@astryxdesign/core 0.4.3 → 0.4.4-canary.0e8af82

package/dist/BottomSheet/BottomSheet.js

@@ -0,0 +1,396 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file BottomSheet.tsx
+ * @input Uses React, StyleX, core hooks/utils, BottomSheetPanel, BottomSheetSwitcherContext
+ * @output Exports BottomSheet component and BottomSheetProps
+ * @position Public BottomSheet router plus private standalone/switcher hosts
+ *
+ * BottomSheet selects one of two focused hosts. A standalone host owns its
+ * native dialog lifecycle; a switcher item participates in the parent's shared
+ * dialog and transition state machine. Both render the same BottomSheetPanel,
+ * which owns sheet presentation, gestures, mobile-keyboard accommodation, and
+ * motion completion.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/BottomSheet/BottomSheetPanel.tsx
+ * - /packages/core/src/BottomSheet/BottomSheet.doc.mjs
+ * - /packages/core/src/BottomSheet/BottomSheet.test.tsx
+ * - /packages/core/src/BottomSheet/BottomSheetSwitcher.tsx
+ * - /packages/core/src/BottomSheet/BottomSheetSwitcher.test.tsx
+ * - /apps/storybook/stories/BottomSheet.stories.tsx
+ * - /packages/cli/assets/templates/blocks/components/BottomSheet/BottomSheetShowcase.tsx
+ */
+import { use, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { colorVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
+import { useDevWarning, useScrollLock } from "../hooks/index.js";
+import { BottomSheetPanel } from "./BottomSheetPanel.js";
+import { BottomSheetSwitcherContext } from "./BottomSheetSwitcherContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function panelStateForSwitcherPhase(phase, alignmentOffset) {
+  switch (phase) {
+    case 'active':
+      return {
+        kind: 'open',
+        entering: false
+      };
+    case 'entering':
+      return {
+        kind: 'open',
+        entering: true
+      };
+    case 'covered':
+    case 'aligning':
+    case 'fading':
+      return {
+        kind: 'retained',
+        motion: phase,
+        alignmentOffset
+      };
+    case 'exiting':
+      return {
+        kind: 'exiting'
+      };
+    case 'hidden':
+      return {
+        kind: 'hidden'
+      };
+  }
+}
+
+// preventScroll on both: presenting a sheet must not scroll the page to reveal
+// what it just focused. For an autofocused field that reveal is the mobile
+// keyboard's, and it moves the document under a fixed sheet; useMobileKeyboard
+// brings the field into view within the sheet instead.
+function focusPanel(panel, isModal) {
+  const activeElement = document.activeElement;
+  if (activeElement != null && panel?.contains(activeElement)) {
+    return;
+  }
+  const autofocus = panel?.querySelector('[data-autofocus]');
+  if (autofocus != null) {
+    autofocus.focus({
+      preventScroll: true
+    });
+  } else if (isModal) {
+    panel?.focus({
+      preventScroll: true
+    });
+  }
+}
+function StandaloneBottomSheet({
+  ref,
+  isOpen,
+  onOpenChange,
+  label,
+  children,
+  height = 'capped',
+  snapPoints,
+  hasScrim = true,
+  purpose = 'info',
+  xstyle,
+  ...props
+}) {
+  const dialogRef = useRef(null);
+  const panelRef = useRef(null);
+  const triggerRef = useRef(null);
+  const [isPresented, setIsPresented] = useState(isOpen);
+  const shouldPresent = isOpen || isPresented;
+  const panelState = isOpen ? {
+    kind: 'open',
+    entering: false
+  } : isPresented ? {
+    kind: 'exiting'
+  } : {
+    kind: 'hidden'
+  };
+  const dismissOnEscape = useCallback(() => {
+    if (purpose !== 'required') {
+      onOpenChange(false);
+    }
+  }, [onOpenChange, purpose]);
+  const dismissOnLightInteraction = useCallback(() => {
+    if (purpose === 'info') {
+      onOpenChange(false);
+    }
+  }, [onOpenChange, purpose]);
+  const handlePanelElementChange = useCallback(element => {
+    panelRef.current = element;
+  }, []);
+  const handleScrimOpacity = useCallback(opacity => {
+    dialogRef.current?.style.setProperty('--_sheet-scrim-opacity', String(opacity));
+  }, []);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (dialog == null || !isOpen) {
+      return;
+    }
+
+    // The controlled prop opens an already-mounted dialog; presentation state
+    // must latch here so a later close can keep it mounted through its exit.
+    // eslint-disable-next-line @eslint-react/set-state-in-effect -- latches controlled open state for exit animation
+    setIsPresented(true);
+    dialog.style.setProperty('--_sheet-scrim-opacity', '1');
+    const wasOpen = dialog.open;
+    if (!wasOpen) {
+      if (hasScrim) {
+        triggerRef.current = document.activeElement;
+        dialog.showModal();
+      } else {
+        dialog.show();
+      }
+      focusPanel(panelRef.current, hasScrim);
+    }
+  }, [hasScrim, isOpen]);
+  useEffect(() => {
+    if (!isOpen && isPresented && hasScrim) {
+      handleScrimOpacity(0);
+    }
+  }, [handleScrimOpacity, hasScrim, isOpen, isPresented]);
+  const handleMotionComplete = useCallback(motion => {
+    if (motion !== 'exiting' || isOpen) {
+      return;
+    }
+    const dialog = dialogRef.current;
+    if (dialog?.open) {
+      dialog.close();
+    }
+    setIsPresented(false);
+    triggerRef.current?.focus();
+    triggerRef.current = null;
+  }, [isOpen]);
+  useScrollLock(shouldPresent && hasScrim);
+  useDevWarning('BottomSheet', 'requires a non-empty `label` for an accessible name; the open sheet ' + 'has no built-in heading to derive one from.', isOpen && !label);
+  const handleCancel = useCallback(event => {
+    event.preventDefault();
+    dismissOnEscape();
+  }, [dismissOnEscape]);
+  const handleKeyDown = useCallback(event => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      dismissOnEscape();
+    }
+  }, [dismissOnEscape]);
+  const handleClick = useCallback(event => {
+    if (hasScrim && event.target === event.currentTarget) {
+      dismissOnLightInteraction();
+    }
+  }, [dismissOnLightInteraction, hasScrim]);
+  return /*#__PURE__*/_jsx("dialog", {
+    ...{
+      0: {
+        className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz"
+      },
+      4: {
+        className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq"
+      },
+      2: {
+        className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w"
+      },
+      6: {
+        className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w"
+      },
+      1: {
+        className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz x47corl xfo81ep xh8yej3 x5yr21d"
+      },
+      5: {
+        className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq x47corl xfo81ep xh8yej3 x5yr21d"
+      },
+      3: {
+        className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w x47corl xfo81ep xh8yej3 x5yr21d"
+      },
+      7: {
+        className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w x47corl xfo81ep xh8yej3 x5yr21d"
+      }
+    }[!!shouldPresent << 2 | !!hasScrim << 1 | !!!hasScrim << 0],
+    ref: dialogRef,
+    "aria-label": label,
+    "aria-hidden": !isOpen && isPresented ? 'true' : undefined,
+    "aria-modal": hasScrim && isOpen ? 'true' : undefined,
+    role: purpose === 'required' ? 'alertdialog' : undefined,
+    inert: !isOpen && isPresented ? true : undefined,
+    onCancel: handleCancel,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    children: /*#__PURE__*/_jsx("div", {
+      ...{
+        className: "x10l6tqk x17y0mx6 x1ey2m1c x78zum5 xl56j7k x47corl"
+      },
+      children: /*#__PURE__*/_jsx(BottomSheetPanel, {
+        ...props,
+        ref: ref,
+        state: panelState,
+        height: height,
+        snapPoints: snapPoints,
+        isSwipeDismissAllowed: purpose === 'info',
+        isPageScrollLocked: shouldPresent && hasScrim,
+        xstyle: xstyle,
+        onDismiss: dismissOnLightInteraction,
+        onScrimOpacity: handleScrimOpacity,
+        onElementChange: handlePanelElementChange,
+        onMotionComplete: handleMotionComplete,
+        children: children
+      })
+    })
+  });
+}
+function SwitcherBottomSheetItem({
+  switcher,
+  ref,
+  sheetId,
+  label,
+  children,
+  height = 'capped',
+  snapPoints,
+  purpose = 'info',
+  xstyle,
+  ...props
+}) {
+  const {
+    activeSheet,
+    hasScrim,
+    onActiveSheetChange,
+    getSheetPhase,
+    getSheetAlignmentOffset,
+    registerSheetElement,
+    registerSheetLabel,
+    registerSheetPurpose,
+    onSheetEnterStart,
+    onSheetTransitionComplete,
+    onSheetScrimOpacityChange
+  } = switcher;
+  const hasValidSheetId = typeof sheetId === 'string' && sheetId.length > 0;
+  const phase = hasValidSheetId ? getSheetPhase(sheetId) : 'hidden';
+  const alignmentOffset = hasValidSheetId ? getSheetAlignmentOffset(sheetId) : 0;
+  const panelState = panelStateForSwitcherPhase(phase, alignmentOffset);
+  const isInteractive = phase === 'active' || phase === 'entering';
+  const isInactive = phase === 'covered' || phase === 'aligning' || phase === 'fading' || phase === 'exiting';
+  const isPresented = phase !== 'hidden';
+  const isTopSheet = phase === 'active' || phase === 'entering';
+  const panelRef = useRef(null);
+  const previousPhaseRef = useRef(phase);
+  const previousPhase = previousPhaseRef.current;
+  const hasPresentedRef = useRef(false);
+  useLayoutEffect(() => {
+    previousPhaseRef.current = phase;
+  }, [phase]);
+  const dismissOnSwipe = useCallback(() => {
+    if (purpose === 'info' && hasValidSheetId && activeSheet === sheetId) {
+      onActiveSheetChange(null);
+    }
+  }, [activeSheet, hasValidSheetId, onActiveSheetChange, purpose, sheetId]);
+  const handlePanelElementChange = useCallback(element => {
+    panelRef.current = element;
+    if (hasValidSheetId) {
+      registerSheetElement(sheetId, element);
+    }
+  }, [hasValidSheetId, registerSheetElement, sheetId]);
+  const handleMotionStart = useCallback(motion => {
+    if (motion === 'entering' && hasValidSheetId) {
+      onSheetEnterStart(sheetId);
+    }
+  }, [hasValidSheetId, onSheetEnterStart, sheetId]);
+  const handleMotionComplete = useCallback(motion => {
+    if (hasValidSheetId) {
+      onSheetTransitionComplete({
+        sheetId,
+        phase: motion
+      });
+    }
+  }, [hasValidSheetId, onSheetTransitionComplete, sheetId]);
+  const handleScrimOpacity = useCallback(opacity => {
+    if (hasValidSheetId) {
+      onSheetScrimOpacityChange(sheetId, opacity);
+    }
+  }, [hasValidSheetId, onSheetScrimOpacityChange, sheetId]);
+  useLayoutEffect(() => {
+    if (!hasValidSheetId) {
+      return;
+    }
+    registerSheetLabel(sheetId, label);
+    return () => registerSheetLabel(sheetId, null);
+  }, [hasValidSheetId, label, registerSheetLabel, sheetId]);
+  useLayoutEffect(() => {
+    if (!hasValidSheetId) {
+      return;
+    }
+    registerSheetPurpose(sheetId, purpose);
+    return () => registerSheetPurpose(sheetId, null);
+  }, [hasValidSheetId, purpose, registerSheetPurpose, sheetId]);
+  useEffect(() => {
+    if (isInteractive) {
+      const wasInteractive = previousPhase === 'active' || previousPhase === 'entering';
+      if (!hasPresentedRef.current || !wasInteractive) {
+        focusPanel(panelRef.current, hasScrim);
+      }
+      hasPresentedRef.current = true;
+    } else if (phase === 'hidden') {
+      hasPresentedRef.current = false;
+    }
+  }, [hasScrim, isInteractive, phase, previousPhase]);
+  useDevWarning('BottomSheet', 'requires a non-empty `label` for an accessible name; the open sheet ' + 'has no built-in heading to derive one from.', isInteractive && !label);
+  return /*#__PURE__*/_jsx("div", {
+    ...{
+      0: {
+        className: "x10l6tqk x17y0mx6 x1ey2m1c x78zum5 xl56j7k x47corl"
+      },
+      2: {
+        className: "x10l6tqk x17y0mx6 x1ey2m1c xl56j7k x47corl x1s85apg"
+      },
+      1: {
+        className: "x10l6tqk x17y0mx6 x1ey2m1c x78zum5 xl56j7k x47corl x1vjfegm"
+      },
+      3: {
+        className: "x10l6tqk x17y0mx6 x1ey2m1c xl56j7k x47corl x1s85apg x1vjfegm"
+      }
+    }[!!!isPresented << 1 | !!isTopSheet << 0],
+    hidden: !isPresented,
+    "aria-hidden": isInactive ? 'true' : undefined,
+    inert: isInactive ? true : undefined,
+    children: /*#__PURE__*/_jsx(BottomSheetPanel, {
+      ...props,
+      ref: ref,
+      state: panelState,
+      height: height,
+      snapPoints: snapPoints,
+      isSwipeDismissAllowed: purpose === 'info',
+      isPageScrollLocked: hasScrim,
+      xstyle: xstyle,
+      onDismiss: dismissOnSwipe,
+      onScrimOpacity: handleScrimOpacity,
+      onElementChange: handlePanelElementChange,
+      onMotionStart: handleMotionStart,
+      onMotionComplete: handleMotionComplete,
+      children: /*#__PURE__*/_jsx(BottomSheetSwitcherContext, {
+        value: null,
+        children: children
+      })
+    })
+  });
+}
+
+/**
+ * A mobile touch sheet that either owns a native dialog or participates in a
+ * BottomSheetSwitcher shared dialog when given a sheetId inside that context.
+ */
+export function BottomSheet(props) {
+  const switcher = use(BottomSheetSwitcherContext);
+  const runtimeSheetId = props.sheetId;
+  const hasValidSheetId = typeof runtimeSheetId === 'string' && runtimeSheetId.length > 0;
+  useDevWarning('BottomSheet', 'requires a non-empty `sheetId` when nested in ' + 'BottomSheetSwitcher; standalone `isOpen` / `onOpenChange` props are ' + 'ignored there.', switcher != null && !hasValidSheetId);
+  useDevWarning('BottomSheet', '`sheetId` only works inside BottomSheetSwitcher. Use `isOpen` and ' + '`onOpenChange` for a standalone sheet.', switcher == null && runtimeSheetId != null);
+  if (switcher != null) {
+    return /*#__PURE__*/_jsx(SwitcherBottomSheetItem, {
+      ...props,
+      switcher: switcher
+    });
+  }
+  return /*#__PURE__*/_jsx(StandaloneBottomSheet, {
+    ...props
+  });
+}
+BottomSheet.displayName = 'BottomSheet';

package/dist/BottomSheet/BottomSheetPanel.d.ts

@@ -0,0 +1,63 @@
+/**
+ * @file BottomSheetPanel.tsx
+ * @input Uses React, StyleX, theme tokens, useSheetGestures
+ * @output Internal BottomSheetPanel surface and motion-state types
+ * @position Shared presentation layer for standalone and switcher BottomSheets
+ *
+ * This component owns everything intrinsic to a sheet surface: height budgets,
+ * drag and snap gestures, the handle and scrolling body, motion styles, and
+ * transition completion. It deliberately does not own a dialog, focus, inert
+ * state, or switcher registration; those belong to the hosting controller.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/BottomSheet/BottomSheet.tsx
+ * - /packages/core/src/BottomSheet/BottomSheetPanel.test.tsx
+ * - /packages/core/src/BottomSheet/snapOffsets.ts
+ * - /packages/core/src/BottomSheet/useMobileKeyboard.ts
+ * - /packages/core/src/BottomSheet/useSheetGestures.ts
+ */
+import { type ReactNode } from 'react';
+import type { BaseProps } from '../BaseProps';
+import { type BottomSheetSnapPoint } from './snapOffsets';
+declare const HEIGHT_BUDGETS: {
+    readonly hug: "92dvh";
+    readonly capped: "62dvh";
+    readonly tall: "92dvh";
+};
+export type BottomSheetHeight = keyof typeof HEIGHT_BUDGETS;
+export type { BottomSheetSnapPoint };
+export type BottomSheetPanelMotion = 'entering' | 'aligning' | 'fading' | 'exiting';
+export type BottomSheetPanelState = {
+    kind: 'hidden';
+} | {
+    kind: 'open';
+    entering: boolean;
+} | {
+    kind: 'retained';
+    motion: 'covered' | 'aligning' | 'fading';
+    alignmentOffset: number;
+} | {
+    kind: 'exiting';
+};
+interface BottomSheetPanelProps extends BaseProps<HTMLDivElement> {
+    /** Ref forwarded to the visual sheet panel. */
+    ref?: React.Ref<HTMLDivElement>;
+    state: BottomSheetPanelState;
+    height: BottomSheetHeight | number | string;
+    children: ReactNode;
+    snapPoints?: ReadonlyArray<BottomSheetSnapPoint>;
+    isSwipeDismissAllowed?: boolean;
+    /** Whether the host has locked page scrolling (a modal, scrim-backed sheet). */
+    isPageScrollLocked?: boolean;
+    onDismiss: () => void;
+    onScrimOpacity: (opacity: number) => void;
+    onElementChange?: (element: HTMLDivElement | null) => void;
+    onMotionStart?: (motion: BottomSheetPanelMotion) => void;
+    onMotionComplete?: (motion: BottomSheetPanelMotion) => void;
+}
+/** Internal visual and gesture surface shared by every BottomSheet host. */
+export declare function BottomSheetPanel({ ref, state, height, children, snapPoints, className, style, tabIndex, xstyle, isSwipeDismissAllowed, isPageScrollLocked, onDismiss, onScrimOpacity, onElementChange, onMotionStart, onMotionComplete, ...props }: BottomSheetPanelProps): import("react").JSX.Element;
+export declare namespace BottomSheetPanel {
+    var displayName: string;
+}
+//# sourceMappingURL=BottomSheetPanel.d.ts.map

package/dist/BottomSheet/BottomSheetPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAY5C,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAIvB,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAC5D,YAAY,EAAC,oBAAoB,EAAC,CAAC;AAoHnC,MAAM,MAAM,sBAAsB,GAChC,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjD,MAAM,MAAM,qBAAqB,GAC7B;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GAChB;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAC,GACjC;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC1C,eAAe,EAAE,MAAM,CAAC;CACzB,GACD;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,UAAU,qBAAsB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,KAAK,EAAE,qBAAqB,CAAC;IAC7B,MAAM,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACjD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACzD,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;CAC7D;AA+GD,4EAA4E;AAC5E,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,MAAM,EACN,QAAQ,EACR,UAAU,EACV,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,qBAA4B,EAC5B,kBAA0B,EAC1B,SAAS,EACT,cAAc,EACd,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAwQvB;yBA1Re,gBAAgB"}