SheetStack

Description

A component that groups together several Sheets and enable the definition of stacking-driven animations (i.e. animations based on the travel of Sheets stacked on top of each other).

Notes

The Sheets can be either siblings or nested.

Current limitation

• Sheets which are part of a SheetStack can only be dismissed when they are frontmost (i.e. at the top of the stack). This limitation will be lifted in the future.

Anatomy

Sibling sheets

import { Sheet, SheetStack } from "@silk-hq/components";

export default () => (
  <SheetStack.Root>
    <SheetStack.Outlet />

    <Sheet.Root>
      <Sheet.Trigger />
      <Sheet.Portal>
        <Sheet.View>
          <Sheet.Backdrop />
          <Sheet.Content>
            <Sheet.Title />
            <Sheet.Description />
          </Sheet.Content>
        </Sheet.View>
      </Sheet.Portal>
    </Sheet.Root>

    <Sheet.Root>
      <Sheet.Trigger />
      <Sheet.Portal>
        <Sheet.View>
          <Sheet.Backdrop />
          <Sheet.Content>
            <Sheet.Title />
            <Sheet.Description />
          </Sheet.Content>
        </Sheet.View>
      </Sheet.Portal>
    </Sheet.Root>
  </SheetStack.Root>
);

Nested sheets

import { Sheet, SheetStack } from "@silk-hq/components";

export default () => (
  <SheetStack.Root>
    <SheetStack.Outlet />

    <Sheet.Root>
      <Sheet.Trigger />
      <Sheet.Portal>
        <Sheet.View>
          <Sheet.Backdrop />
          <Sheet.Content>
            <Sheet.Title />
            <Sheet.Description />

            {/* Nested sheet */}
            <Sheet.Root>
              <Sheet.Trigger />
              <Sheet.Portal>
                <Sheet.View>
                  <Sheet.Backdrop />
                  <Sheet.Content>
                    <Sheet.Title />
                    <Sheet.Description />
                  </Sheet.Content>
                </Sheet.View>
              </Sheet.Portal>
            </Sheet.Root>
          </Sheet.Content>
        </Sheet.View>
      </Sheet.Portal>
    </Sheet.Root>
  </SheetStack.Root>
);

Sub-components

<SheetStack.Root>

<div>

Description

The Root sub-component wraps all other sub-components of the same SheetStack instance as well as the associated Sheet instances’ <Sheet.Root> sub-components.

asChild

boolean | undefined

undefined

Description

Defines whether the sub-component underlying element is the default one or the one passed as child of the sub-component.

Values description

true

false | undefined

Notes

• If the child is a React component rendering an element:
  • it must accept props and spread all received props onto the rendered element;
  • in React < 19, it must use React.forwardRef() and pass the received ref to the rendered element.
• See Composition for more information.

componentId

SheetStackId

undefined

Description

Defines the id of this SheetStack. This id can then be passed to <Sheet.Root>, or <Island.Root> forComponent prop to associate them with this SheetStack.

<SheetStack.Outlet>

<div>

Description

A sub-component that allows to declaratively define animations for the underlying element based on the stacking progress of the associated SheetStack.

asChild

See asChild on <SheetStack.Root>.

forComponent

SheetStackId | "closest"

Description

Associates this sub-component with the desired SheetStack instance.

stackingAnimation

{
  [property: string]:
    | [string | number, string | number]
    | ((args: {
        progress: number;
        tween: (start: number | string, end: number | string) => string;
      }) => string | number | null | undefined);
}

undefined

Description

Declaratively defines animations on any CSS property of the underlying element driven by the aggregated travel of Sheets stacked above the first Sheet belonging to the associated SheetStack.

Values description for each key

[string | number, string | number]

(args: {
  tween: (start: number | string, end: number | string) => string;
}) => string | number

string

null | undefined

Notes

• CSS properties must be written in camelcase form (e.g. borderRadius).
• All individual components of the transform CSS property can be used separately.
  • List

    TypeScript

    Copy

    | "translate"
    | "translateX"
    | "translateY"
    | "translateZ"
    | "scale"
    | "scaleX"
    | "scaleY"
    | "scaleZ"
    | "rotate"
    | "rotateX"
    | "rotateY"
    | "rotateZ"
    | "skew"
    | "skewX"
    | "skewY"
    

• The keyframes array syntax is only supported with individual transform properties and opacity.
  • List. Note that, apart from opacity, all of the following keys will be incorporated into a single transform declaration.

    TypeScript

    Copy

    | "opacity"
    | "translate"
    | "translateX"
    | "translateY"
    | "translateZ"
    | "scale"
    | "scaleX"
    | "scaleY"
    | "scaleZ"
    | "rotate"
    | "rotateX"
    | "rotateY"
    | "rotateZ"
    | "skew"
    | "skewX"
    | "skewY"
    

• Updating stackingAnimation won't immediately reflect visually. The new value will only apply on the next travel. This limitation will be lifted in the future.
• stackingAnimation is short for "stacking-driven animation".

Examples

<SheetStack.Outlet
  stackingAnimation={{
    translateX: ["0px", "100px"],
  }}
/>;

<SheetStack.Outlet
  stackingAnimation={{
    translateX: ({ progress }) => progress * 100 + "px",
  }}
/>;

<SheetStack.Outlet
  stackingAnimation={{
    backgroundColor: ({ tween }) =>
      `rgb(${tween(10, 0)}, ${tween(10, 0)}, ${tween(10, 0)})`,
  }}
/>;