WizardSheet / Dev

Plain id

Add a custom header (under the step bars)

To use the standard header, use the headerTitle and headerIcon props

The title of the header

Use in combination with headerIcon

For a custom header, use the header prop

Use in combination with headerTitle

Specify the height of the steps

All steps must have the same height for the wizard to work smoothly

Whether to autoplay the steps

The duration of each step in milliseconds

The steps of the wizard

Can be any React component, but should typically be a simple component without scrollable content.

Example:

[
 <div>Step 1</div>,
 <div>Step 2</div>,
 <div>Step 3</div>,
]

Change the color of the sheet when changing steps

Give a list of colors, one for each step

Callback when the active step changes @param activeStep

Callback when the wizard is completed

Build a custom announcement for the active step

A sane default is provided @param activeStep The active step @param totalSteps The total number of steps @param autoplaying Whether the wizard is currently autoplaying

If the dialog is considered important (relative to its "siblings")

If set to true:

• Will be placed in front of any non-important sibling
• Will be placed behind the first important sibling If set to false (default):
• Will be placed behind all siblings

Show/hide the modal

Calling this will close the Sheet

Typically, this will call a local set state in the application.

Nested Dialog/Sheet/PromptScreen components

A ref to an element that should receive focus first. @see https://headlessui.com/react/dialog#focus-management

Internal className-tap-in for handling advanced heading configurations like in the responsible gaming modals (the dark haiti-"trapezium" ⏢)

If activated, the modal will prevent the user from dismissing the modal when swiping down "optimistically" and simply animate the Sheet up to its initial position.

Example: Only allow dismissal when the customer have approved the customer agreement

This is only relevant for when appearing as a sheet (and not as a modal).

This feature is considered unstable.

Will most likely come into play when we look at filtering in insta games

Placed after the content at the bottom. Will always be visible.

Typically, this place is used for call-to-action buttons.

Same as the footer-prop, but as a render-prop with two bool params that can be used to differentiate:

1. isBottomSheet - whether the sheet is currently displayed as a bottom-sheet
2. isPointerDevice - whether the device uses a pointer device or not (media pointer: fine)

NOTE! If both the footer & renderFooter is defined, the renderFooter will be used.

Renders provided element outside the inner wrapper, forgoing any margin and padding

Default classNames being provided are: absolute rounded-t-2xl rounded-b-2xl The rounded classes will follow the Sheet styling both in "Sheet" (mobile) mode and "Dialog" mode (tablet/desktop)

Example:

absolutePositionedDecorator={customClassNames => (
  <div
    className={
      customClassNames('inset-x-0 bottom-0 bg-blue-sky flex justify-center items-center p-2')
    }
  >
    <HeartIcon />
  </div>
)}

If you don't want the rounded corner

Lock the sheet height to a specific value

Default is full (h-full).

To make it grow with the content, use h-auto

The width of the sheet when displayed as a left/right drawer or a dialog (desktop and tablet)

These settings have no effect on mobile (always full width)

Default: max-w-xl w-11/12

The height of the sheet when displayed as a dialog (desktop and tablet)

Default: inset-y-0 my-auto h-fit

The text and background color of the main area of the Sheet/Modal.

Warning modal example: "bg-yellow-pastel"

Override the z-index of the Sheet

Default is z-1300

Color to use in the footer body.

If not given, the twColor-value is used instead.

Typically not needed.

Warning modal example: empty.

Color to use in the header

Border color to use around the header and footer

Typically not needed.

Warning modal example: empty.

The color of the Sheet "drag knob/handle"

Only relevant if you change the background in twColor.

Warning modal example: "bg-silver"

Padding to use for the main area of the Sheet/Modal.

The padding to use for the footer.

Add class names to the immediate parent of the children

Note: When withContentStyling is active, the CSS class for the content is also applied to the same element.

If set to true the content (children) will receive styling of basic elements like <p>, <li>, <h*>, ...

Use this if you don't need full control of the elements mentioned above.

You can also add className ntds-content --compact any place in your custom {children}.

Note: you have to import '@ntds/core/css/src/ntds-content.css';

Hides the handle (drag knob) in the side-sheet mode

Deactivate or customise the backdrop blur effect

Default: backdrop-blur-sm @see https://tailwindcss.com/docs/blur#blurring-elements

If set to true, a close button will be shown in the side-sheet configuration or when the bottom sheet is (rarely) shown on desktop

If you need to differentiate based on the sheet mode (bottom-sheet/side-sheet) or based on if the active device is a pointer device or not, you can provide a function instead of a boolean. This function will receive two bool params that can be used to differentiate:

1. isBottomSheet - whether the sheet is currently displayed as a bottom-sheet
2. isPointerDevice - whether the device uses a pointer device or not (media pointer: fine)
   • NOTE: Best effort: Better to fallback on an explicit close-button if has support for both touch and mouse

Important: Remember to provide an accessibleCloseButtonLabel for the close button!

Give the close button a descriptive label for screen readers. Used when dismissible is set to true

How the sheet should behave on desktop (and tablet)

Default: right

If set to true, the sheet will "shrink and lift" when a nested dialog/sheet/prompt is shown.

Typically only used in combination with nested Sheets.

Only affects the sheet-mode.

Default: false

Render an element to be a part of the dialog semantics (including focus handling) but outside the fixed container

Useful for edge cases where you need full control of the z-layer.

Same as the footer-prop, but as a render-prop with two bool params that can be used to differentiate:

1. isBottomSheet - whether the sheet is currently displayed as a bottom-sheet
2. isPointerDevice - whether the device uses a pointer device or not (media pointer: fine)

NOTE! If both the children & render is defined, the render will be used.