@astryxdesign/core 0.4.2 → 0.4.3-canary.0a9618e

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (199) hide show
  1. package/CHANGELOG.md +45 -0
  2. package/README.md +79 -45
  3. package/dist/Avatar/Avatar.d.ts.map +1 -1
  4. package/dist/Avatar/Avatar.js +3 -19
  5. package/dist/Banner/Banner.d.ts +9 -2
  6. package/dist/Banner/Banner.d.ts.map +1 -1
  7. package/dist/Banner/Banner.js +84 -33
  8. package/dist/Banner/index.d.ts +14 -12
  9. package/dist/Banner/index.d.ts.map +1 -1
  10. package/dist/Banner/index.js +10 -8
  11. package/dist/BottomSheet/BottomSheet.d.ts +66 -0
  12. package/dist/BottomSheet/BottomSheet.d.ts.map +1 -0
  13. package/dist/BottomSheet/BottomSheet.js +381 -0
  14. package/dist/BottomSheet/BottomSheetPanel.d.ts +57 -0
  15. package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -0
  16. package/dist/BottomSheet/BottomSheetPanel.js +395 -0
  17. package/dist/BottomSheet/BottomSheetSwitcher.d.ts +61 -0
  18. package/dist/BottomSheet/BottomSheetSwitcher.d.ts.map +1 -0
  19. package/dist/BottomSheet/BottomSheetSwitcher.js +410 -0
  20. package/dist/BottomSheet/BottomSheetSwitcherContext.d.ts +21 -0
  21. package/dist/BottomSheet/BottomSheetSwitcherContext.d.ts.map +1 -0
  22. package/dist/BottomSheet/BottomSheetSwitcherContext.js +13 -0
  23. package/dist/BottomSheet/index.d.ts +11 -0
  24. package/dist/BottomSheet/index.d.ts.map +1 -0
  25. package/dist/BottomSheet/index.js +12 -0
  26. package/dist/BottomSheet/snapOffsets.d.ts +72 -0
  27. package/dist/BottomSheet/snapOffsets.d.ts.map +1 -0
  28. package/dist/BottomSheet/snapOffsets.js +130 -0
  29. package/dist/BottomSheet/useMobileKeyboard.d.ts +25 -0
  30. package/dist/BottomSheet/useMobileKeyboard.d.ts.map +1 -0
  31. package/dist/BottomSheet/useMobileKeyboard.js +384 -0
  32. package/dist/BottomSheet/useSheetGestures.d.ts +170 -0
  33. package/dist/BottomSheet/useSheetGestures.d.ts.map +1 -0
  34. package/dist/BottomSheet/useSheetGestures.js +881 -0
  35. package/dist/Chat/ChatComposerInput.d.ts.map +1 -1
  36. package/dist/Chat/ChatComposerInput.js +3 -4
  37. package/dist/Chat/ChatTokenizedText.js +1 -1
  38. package/dist/ComplexSelector/ComplexSelector.d.ts +38 -4
  39. package/dist/ComplexSelector/ComplexSelector.d.ts.map +1 -1
  40. package/dist/ComplexSelector/ComplexSelector.js +98 -31
  41. package/dist/ComplexSelector/index.d.ts +2 -2
  42. package/dist/ComplexSelector/index.d.ts.map +1 -1
  43. package/dist/ComplexSelector/index.js +1 -1
  44. package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
  45. package/dist/ContextMenu/ContextMenu.js +4 -2
  46. package/dist/DateInput/DateInput.d.ts.map +1 -1
  47. package/dist/DateInput/DateInput.js +9 -1
  48. package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
  49. package/dist/DateTimeInput/DateTimeInput.js +31 -1
  50. package/dist/Dialog/Dialog.d.ts.map +1 -1
  51. package/dist/Dialog/Dialog.js +2 -1
  52. package/dist/Markdown/parser.d.ts.map +1 -1
  53. package/dist/Markdown/parser.js +55 -12
  54. package/dist/MobileNav/MobileNav.d.ts +12 -0
  55. package/dist/MobileNav/MobileNav.d.ts.map +1 -1
  56. package/dist/MobileNav/MobileNav.js +102 -30
  57. package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
  58. package/dist/MultiSelector/MultiSelector.js +10 -1
  59. package/dist/NumberInput/NumberInput.d.ts.map +1 -1
  60. package/dist/NumberInput/NumberInput.js +9 -1
  61. package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
  62. package/dist/PowerSearch/PowerSearch.js +4 -1
  63. package/dist/PowerSearch/PowerSearchEditPopover.js +1 -1
  64. package/dist/PowerSearch/formatFilterValue.d.ts.map +1 -1
  65. package/dist/PowerSearch/formatFilterValue.js +2 -4
  66. package/dist/Selector/Selector.d.ts.map +1 -1
  67. package/dist/Selector/Selector.js +10 -1
  68. package/dist/Switch/Switch.d.ts.map +1 -1
  69. package/dist/Switch/Switch.js +5 -1
  70. package/dist/Table/columnUtils.d.ts.map +1 -1
  71. package/dist/Table/columnUtils.js +4 -1
  72. package/dist/TextArea/TextArea.d.ts +6 -3
  73. package/dist/TextArea/TextArea.d.ts.map +1 -1
  74. package/dist/TextArea/TextArea.js +17 -6
  75. package/dist/TimeInput/TimeInput.d.ts.map +1 -1
  76. package/dist/TimeInput/TimeInput.js +8 -1
  77. package/dist/Tooltip/useTooltip.d.ts.map +1 -1
  78. package/dist/Tooltip/useTooltip.js +4 -1
  79. package/dist/TreeList/TreeList.js +2 -1
  80. package/dist/Typeahead/BaseTypeahead.js +1 -1
  81. package/dist/Typeahead/Typeahead.d.ts.map +1 -1
  82. package/dist/Typeahead/Typeahead.js +10 -1
  83. package/dist/astryx.css +25 -2
  84. package/dist/hooks/index.d.ts +8 -1
  85. package/dist/hooks/index.d.ts.map +1 -1
  86. package/dist/hooks/index.js +8 -1
  87. package/dist/hooks/useFocusTrap.d.ts +0 -11
  88. package/dist/hooks/useFocusTrap.d.ts.map +1 -1
  89. package/dist/hooks/useFocusTrap.js +1 -11
  90. package/dist/index.d.ts +1 -0
  91. package/dist/index.d.ts.map +1 -1
  92. package/dist/index.js +1 -0
  93. package/dist/theme/defineTheme.d.ts +30 -7
  94. package/dist/theme/defineTheme.d.ts.map +1 -1
  95. package/dist/theme/defineTheme.js +36 -47
  96. package/dist/theme/expandColorScale.d.ts +17 -2
  97. package/dist/theme/expandColorScale.d.ts.map +1 -1
  98. package/dist/theme/expandColorScale.js +63 -33
  99. package/dist/theme/mergeComponents.d.ts +20 -0
  100. package/dist/theme/mergeComponents.d.ts.map +1 -0
  101. package/dist/theme/mergeComponents.js +56 -0
  102. package/dist/theme/onMediaTokens.d.ts +6 -1
  103. package/dist/theme/onMediaTokens.d.ts.map +1 -1
  104. package/dist/theme/onMediaTokens.js +11 -3
  105. package/dist/utils/characters.d.ts +27 -0
  106. package/dist/utils/characters.d.ts.map +1 -0
  107. package/dist/utils/characters.js +83 -0
  108. package/dist/utils/ime.d.ts +5 -0
  109. package/dist/utils/ime.d.ts.map +1 -0
  110. package/dist/utils/ime.js +63 -0
  111. package/dist/utils/index.d.ts +2 -0
  112. package/dist/utils/index.d.ts.map +1 -1
  113. package/dist/utils/index.js +3 -1
  114. package/package.json +9 -8
  115. package/src/Avatar/Avatar.test.tsx +6 -1
  116. package/src/Avatar/Avatar.tsx +3 -21
  117. package/src/Banner/Banner.doc.mjs +12 -10
  118. package/src/Banner/Banner.test.tsx +108 -0
  119. package/src/Banner/Banner.tsx +124 -38
  120. package/src/Banner/index.ts +15 -13
  121. package/src/BottomSheet/BottomSheet.doc.mjs +266 -0
  122. package/src/BottomSheet/BottomSheet.test.tsx +1865 -0
  123. package/src/BottomSheet/BottomSheet.tsx +539 -0
  124. package/src/BottomSheet/BottomSheetPanel.test.tsx +240 -0
  125. package/src/BottomSheet/BottomSheetPanel.tsx +542 -0
  126. package/src/BottomSheet/BottomSheetSwitcher.doc.mjs +219 -0
  127. package/src/BottomSheet/BottomSheetSwitcher.test.tsx +850 -0
  128. package/src/BottomSheet/BottomSheetSwitcher.tsx +628 -0
  129. package/src/BottomSheet/BottomSheetSwitcherContext.ts +51 -0
  130. package/src/BottomSheet/index.ts +15 -0
  131. package/src/BottomSheet/snapOffsets.test.ts +187 -0
  132. package/src/BottomSheet/snapOffsets.ts +159 -0
  133. package/src/BottomSheet/useMobileKeyboard.ts +566 -0
  134. package/src/BottomSheet/useSheetGestures.test.ts +833 -0
  135. package/src/BottomSheet/useSheetGestures.ts +1333 -0
  136. package/src/Chat/ChatComposerInput.tsx +3 -4
  137. package/src/Chat/ChatTokenizedText.tsx +1 -1
  138. package/src/ComplexSelector/ComplexSelector.doc.mjs +55 -6
  139. package/src/ComplexSelector/ComplexSelector.test.tsx +197 -6
  140. package/src/ComplexSelector/ComplexSelector.tsx +156 -28
  141. package/src/ComplexSelector/index.ts +3 -1
  142. package/src/ContextMenu/ContextMenu.tsx +4 -2
  143. package/src/DateInput/DateInput.test.tsx +21 -0
  144. package/src/DateInput/DateInput.tsx +9 -1
  145. package/src/DateTimeInput/DateTimeInput.doc.mjs +4 -0
  146. package/src/DateTimeInput/DateTimeInput.test.tsx +137 -0
  147. package/src/DateTimeInput/DateTimeInput.tsx +39 -2
  148. package/src/Dialog/Dialog.tsx +2 -1
  149. package/src/Markdown/parser.test.ts +53 -0
  150. package/src/Markdown/parser.ts +53 -12
  151. package/src/MobileNav/MobileNav.tsx +128 -37
  152. package/src/MobileNav/MobileNavCloseEdgeCases.test.tsx +426 -0
  153. package/src/MobileNav/MobileNavCloseTiming.test.ts +58 -0
  154. package/src/MobileNav/MobileNavCloseVisibility.test.tsx +172 -0
  155. package/src/MultiSelector/MultiSelector.test.tsx +31 -0
  156. package/src/MultiSelector/MultiSelector.tsx +10 -1
  157. package/src/NumberInput/NumberInput.test.tsx +18 -0
  158. package/src/NumberInput/NumberInput.tsx +9 -1
  159. package/src/PowerSearch/PowerSearch.test.tsx +48 -3
  160. package/src/PowerSearch/PowerSearch.tsx +4 -1
  161. package/src/PowerSearch/PowerSearchEditPopover.tsx +1 -1
  162. package/src/PowerSearch/formatFilterValue.test.ts +22 -0
  163. package/src/PowerSearch/formatFilterValue.ts +2 -4
  164. package/src/Selector/Selector.test.tsx +33 -0
  165. package/src/Selector/Selector.tsx +10 -1
  166. package/src/Switch/Switch.test.tsx +16 -0
  167. package/src/Switch/Switch.tsx +7 -0
  168. package/src/Table/Table.test.tsx +6 -0
  169. package/src/Table/columnUtils.ts +3 -1
  170. package/src/TextArea/TextArea.doc.mjs +1 -1
  171. package/src/TextArea/TextArea.test.tsx +72 -0
  172. package/src/TextArea/TextArea.tsx +26 -8
  173. package/src/TimeInput/TimeInput.test.tsx +23 -0
  174. package/src/TimeInput/TimeInput.tsx +8 -0
  175. package/src/Tooltip/useTooltip.tsx +4 -1
  176. package/src/TreeList/TreeList.doc.mjs +2 -2
  177. package/src/TreeList/TreeList.tsx +1 -1
  178. package/src/Typeahead/BaseTypeahead.tsx +1 -1
  179. package/src/Typeahead/Typeahead.test.tsx +35 -0
  180. package/src/Typeahead/Typeahead.tsx +10 -1
  181. package/src/__tests__/stubMatchMedia.test.ts +79 -0
  182. package/src/__tests__/stubMatchMedia.ts +95 -0
  183. package/src/hooks/index.ts +9 -5
  184. package/src/hooks/useFocusTrap.ts +1 -14
  185. package/src/index.ts +1 -0
  186. package/src/theme/defineTheme.test.ts +127 -0
  187. package/src/theme/defineTheme.ts +70 -55
  188. package/src/theme/expandColorScale.test.ts +138 -0
  189. package/src/theme/expandColorScale.ts +89 -44
  190. package/src/theme/extensibleAxes.test.ts +365 -0
  191. package/src/theme/mergeComponents.ts +59 -0
  192. package/src/theme/onMediaTokens.ts +9 -2
  193. package/src/utils/characters.test.ts +141 -0
  194. package/src/utils/characters.ts +88 -0
  195. package/src/utils/ime.test.ts +32 -0
  196. package/src/utils/ime.ts +69 -0
  197. package/src/utils/index.ts +4 -0
  198. package/dist/astryx.umd.js +0 -147
  199. package/dist/astryx.umd.js.map +0 -7
@@ -12,27 +12,29 @@
12
12
  */
13
13
 
14
14
  /**
15
- * Extensible status map for Banner.
15
+ * Extensible container map for Banner.
16
16
  *
17
- * Theme packages can add custom statuses via TypeScript module augmentation:
17
+ * Theme packages can add custom container types via TypeScript module augmentation:
18
18
  * @example
19
19
  * ```
20
20
  * declare module '@astryxdesign/core/Banner' {
21
- * interface BannerStatusMap {
22
- * 'neutral': true;
21
+ * interface BannerContainerMap {
22
+ * 'floating': true;
23
23
  * }
24
24
  * }
25
25
  * ```
26
26
  */
27
27
  /**
28
- * Extensible container map for Banner.
28
+ * Extensible status map for Banner.
29
29
  *
30
- * Theme packages can add custom container types via TypeScript module augmentation:
30
+ * Theme packages can add custom statuses via TypeScript module augmentation.
31
+ * A status the library does not know falls through to the base treatment: no
32
+ * status fill, no default glyph, and `role="status"`.
31
33
  * @example
32
34
  * ```
33
35
  * declare module '@astryxdesign/core/Banner' {
34
- * interface BannerContainerMap {
35
- * 'floating': true;
36
+ * interface BannerStatusMap {
37
+ * 'neutral': true;
36
38
  * }
37
39
  * }
38
40
  * ```
@@ -0,0 +1,66 @@
1
+ /**
2
+ * @file BottomSheet.tsx
3
+ * @input Uses React, StyleX, core hooks/utils, BottomSheetPanel, BottomSheetSwitcherContext
4
+ * @output Exports BottomSheet component and BottomSheetProps
5
+ * @position Public BottomSheet router plus private standalone/switcher hosts
6
+ *
7
+ * BottomSheet selects one of two focused hosts. A standalone host owns its
8
+ * native dialog lifecycle; a switcher item participates in the parent's shared
9
+ * dialog and transition state machine. Both render the same BottomSheetPanel,
10
+ * which owns sheet presentation, gestures, mobile-keyboard accommodation, and
11
+ * motion completion.
12
+ *
13
+ * SYNC: When modified, update these files to stay in sync:
14
+ * - /packages/core/src/BottomSheet/BottomSheetPanel.tsx
15
+ * - /packages/core/src/BottomSheet/BottomSheet.doc.mjs
16
+ * - /packages/core/src/BottomSheet/BottomSheet.test.tsx
17
+ * - /packages/core/src/BottomSheet/BottomSheetSwitcher.tsx
18
+ * - /packages/core/src/BottomSheet/BottomSheetSwitcher.test.tsx
19
+ * - /apps/storybook/stories/BottomSheet.stories.tsx
20
+ * - /packages/cli/assets/templates/blocks/components/BottomSheet/BottomSheetShowcase.tsx
21
+ */
22
+ import { type ReactNode } from 'react';
23
+ import type { BaseProps } from '../BaseProps';
24
+ import type { DialogPurpose } from '../Dialog';
25
+ export type { BottomSheetHeight } from './BottomSheetPanel';
26
+ import type { BottomSheetHeight } from './BottomSheetPanel';
27
+ interface BottomSheetSharedProps extends BaseProps<HTMLDivElement> {
28
+ /** Ref forwarded to the visual sheet panel <div>. */
29
+ ref?: React.Ref<HTMLDivElement>;
30
+ /** Accessible label for the sheet. */
31
+ label: string;
32
+ /** Sheet content, rendered below the grab handle in a scrollable area. */
33
+ children: ReactNode;
34
+ /** Height budget or custom CSS length. Only fully expanded Tall is keyboard-aware. @default 'capped' */
35
+ height?: BottomSheetHeight | number | string;
36
+ /**
37
+ * Configures implicit dismissal behavior, matching Dialog.
38
+ * - required: Blocks swipe, scrim click, and Escape
39
+ * - form: Blocks swipe and scrim click, allows Escape
40
+ * - info: Allows swipe, scrim click, and Escape
41
+ * @default 'info'
42
+ */
43
+ purpose?: DialogPurpose;
44
+ }
45
+ interface StandaloneBottomSheetProps extends BottomSheetSharedProps {
46
+ isOpen: boolean;
47
+ onOpenChange: (isOpen: boolean) => void;
48
+ hasScrim?: boolean;
49
+ sheetId?: never;
50
+ }
51
+ interface SwitcherBottomSheetProps extends BottomSheetSharedProps {
52
+ sheetId: string;
53
+ isOpen?: never;
54
+ onOpenChange?: never;
55
+ hasScrim?: never;
56
+ }
57
+ export type BottomSheetProps = StandaloneBottomSheetProps | SwitcherBottomSheetProps;
58
+ /**
59
+ * A mobile touch sheet that either owns a native dialog or participates in a
60
+ * BottomSheetSwitcher shared dialog when given a sheetId inside that context.
61
+ */
62
+ export declare function BottomSheet(props: BottomSheetProps): import("react").JSX.Element;
63
+ export declare namespace BottomSheet {
64
+ var displayName: string;
65
+ }
66
+ //# sourceMappingURL=BottomSheet.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAc7C,YAAY,EAAC,iBAAiB,EAAC,MAAM,oBAAoB,CAAC;AAC1D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,oBAAoB,CAAC;AA2D1D,UAAU,sBAAuB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IAEpB,wGAAwG;IACxG,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,UAAU,0BAA2B,SAAQ,sBAAsB;IACjE,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,MAAM,MAAM,gBAAgB,GAC1B,0BAA0B,GAAG,wBAAwB,CAAC;AAkWxD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA6BlD;yBA7Be,WAAW"}
@@ -0,0 +1,381 @@
1
+ // Copyright (c) Meta Platforms, Inc. and affiliates.
2
+
3
+ 'use client';
4
+
5
+ /**
6
+ * @file BottomSheet.tsx
7
+ * @input Uses React, StyleX, core hooks/utils, BottomSheetPanel, BottomSheetSwitcherContext
8
+ * @output Exports BottomSheet component and BottomSheetProps
9
+ * @position Public BottomSheet router plus private standalone/switcher hosts
10
+ *
11
+ * BottomSheet selects one of two focused hosts. A standalone host owns its
12
+ * native dialog lifecycle; a switcher item participates in the parent's shared
13
+ * dialog and transition state machine. Both render the same BottomSheetPanel,
14
+ * which owns sheet presentation, gestures, mobile-keyboard accommodation, and
15
+ * motion completion.
16
+ *
17
+ * SYNC: When modified, update these files to stay in sync:
18
+ * - /packages/core/src/BottomSheet/BottomSheetPanel.tsx
19
+ * - /packages/core/src/BottomSheet/BottomSheet.doc.mjs
20
+ * - /packages/core/src/BottomSheet/BottomSheet.test.tsx
21
+ * - /packages/core/src/BottomSheet/BottomSheetSwitcher.tsx
22
+ * - /packages/core/src/BottomSheet/BottomSheetSwitcher.test.tsx
23
+ * - /apps/storybook/stories/BottomSheet.stories.tsx
24
+ * - /packages/cli/assets/templates/blocks/components/BottomSheet/BottomSheetShowcase.tsx
25
+ */
26
+ import { use, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
27
+ import * as stylex from '@stylexjs/stylex';
28
+ import "../theme/tokens.stylex.js";
29
+ import { colorVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
30
+ import { useDevWarning, useScrollLock } from "../hooks/index.js";
31
+ import { BottomSheetPanel } from "./BottomSheetPanel.js";
32
+ import { BottomSheetSwitcherContext } from "./BottomSheetSwitcherContext.js";
33
+ import { jsx as _jsx } from "react/jsx-runtime";
34
+ function panelStateForSwitcherPhase(phase, alignmentOffset) {
35
+ switch (phase) {
36
+ case 'active':
37
+ return {
38
+ kind: 'open',
39
+ entering: false
40
+ };
41
+ case 'entering':
42
+ return {
43
+ kind: 'open',
44
+ entering: true
45
+ };
46
+ case 'covered':
47
+ case 'aligning':
48
+ case 'fading':
49
+ return {
50
+ kind: 'retained',
51
+ motion: phase,
52
+ alignmentOffset
53
+ };
54
+ case 'exiting':
55
+ return {
56
+ kind: 'exiting'
57
+ };
58
+ case 'hidden':
59
+ return {
60
+ kind: 'hidden'
61
+ };
62
+ }
63
+ }
64
+ function focusPanel(panel, isModal) {
65
+ const activeElement = document.activeElement;
66
+ if (activeElement != null && panel?.contains(activeElement)) {
67
+ return;
68
+ }
69
+ const autofocus = panel?.querySelector('[data-autofocus]');
70
+ if (autofocus != null) {
71
+ autofocus.focus();
72
+ } else if (isModal) {
73
+ panel?.focus();
74
+ }
75
+ }
76
+ function StandaloneBottomSheet({
77
+ ref,
78
+ isOpen,
79
+ onOpenChange,
80
+ label,
81
+ children,
82
+ height = 'capped',
83
+ hasScrim = true,
84
+ purpose = 'info',
85
+ xstyle,
86
+ ...props
87
+ }) {
88
+ const dialogRef = useRef(null);
89
+ const panelRef = useRef(null);
90
+ const triggerRef = useRef(null);
91
+ const [isPresented, setIsPresented] = useState(isOpen);
92
+ const shouldPresent = isOpen || isPresented;
93
+ const panelState = isOpen ? {
94
+ kind: 'open',
95
+ entering: false
96
+ } : isPresented ? {
97
+ kind: 'exiting'
98
+ } : {
99
+ kind: 'hidden'
100
+ };
101
+ const dismissOnEscape = useCallback(() => {
102
+ if (purpose !== 'required') {
103
+ onOpenChange(false);
104
+ }
105
+ }, [onOpenChange, purpose]);
106
+ const dismissOnLightInteraction = useCallback(() => {
107
+ if (purpose === 'info') {
108
+ onOpenChange(false);
109
+ }
110
+ }, [onOpenChange, purpose]);
111
+ const handlePanelElementChange = useCallback(element => {
112
+ panelRef.current = element;
113
+ }, []);
114
+ const handleScrimOpacity = useCallback(opacity => {
115
+ dialogRef.current?.style.setProperty('--_sheet-scrim-opacity', String(opacity));
116
+ }, []);
117
+ useEffect(() => {
118
+ const dialog = dialogRef.current;
119
+ if (dialog == null || !isOpen) {
120
+ return;
121
+ }
122
+
123
+ // The controlled prop opens an already-mounted dialog; presentation state
124
+ // must latch here so a later close can keep it mounted through its exit.
125
+ // eslint-disable-next-line @eslint-react/set-state-in-effect -- latches controlled open state for exit animation
126
+ setIsPresented(true);
127
+ dialog.style.setProperty('--_sheet-scrim-opacity', '1');
128
+ const wasOpen = dialog.open;
129
+ if (!wasOpen) {
130
+ if (hasScrim) {
131
+ triggerRef.current = document.activeElement;
132
+ dialog.showModal();
133
+ } else {
134
+ dialog.show();
135
+ }
136
+ focusPanel(panelRef.current, hasScrim);
137
+ }
138
+ }, [hasScrim, isOpen]);
139
+ useEffect(() => {
140
+ if (!isOpen && isPresented && hasScrim) {
141
+ handleScrimOpacity(0);
142
+ }
143
+ }, [handleScrimOpacity, hasScrim, isOpen, isPresented]);
144
+ const handleMotionComplete = useCallback(motion => {
145
+ if (motion !== 'exiting' || isOpen) {
146
+ return;
147
+ }
148
+ const dialog = dialogRef.current;
149
+ if (dialog?.open) {
150
+ dialog.close();
151
+ }
152
+ setIsPresented(false);
153
+ triggerRef.current?.focus();
154
+ triggerRef.current = null;
155
+ }, [isOpen]);
156
+ useScrollLock(shouldPresent && hasScrim);
157
+ 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);
158
+ const handleCancel = useCallback(event => {
159
+ event.preventDefault();
160
+ dismissOnEscape();
161
+ }, [dismissOnEscape]);
162
+ const handleKeyDown = useCallback(event => {
163
+ if (event.key === 'Escape') {
164
+ event.preventDefault();
165
+ dismissOnEscape();
166
+ }
167
+ }, [dismissOnEscape]);
168
+ const handleClick = useCallback(event => {
169
+ if (hasScrim && event.target === event.currentTarget) {
170
+ dismissOnLightInteraction();
171
+ }
172
+ }, [dismissOnLightInteraction, hasScrim]);
173
+ return /*#__PURE__*/_jsx("dialog", {
174
+ ...{
175
+ 0: {
176
+ className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz"
177
+ },
178
+ 4: {
179
+ className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq"
180
+ },
181
+ 2: {
182
+ className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w"
183
+ },
184
+ 6: {
185
+ className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w"
186
+ },
187
+ 1: {
188
+ className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz x47corl xfo81ep xh8yej3 x5yr21d"
189
+ },
190
+ 5: {
191
+ className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq x47corl xfo81ep xh8yej3 x5yr21d"
192
+ },
193
+ 3: {
194
+ className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w x47corl xfo81ep xh8yej3 x5yr21d"
195
+ },
196
+ 7: {
197
+ className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w x47corl xfo81ep xh8yej3 x5yr21d"
198
+ }
199
+ }[!!shouldPresent << 2 | !!hasScrim << 1 | !!!hasScrim << 0],
200
+ ref: dialogRef,
201
+ "aria-label": label,
202
+ "aria-hidden": !isOpen && isPresented ? 'true' : undefined,
203
+ "aria-modal": hasScrim && isOpen ? 'true' : undefined,
204
+ role: purpose === 'required' ? 'alertdialog' : undefined,
205
+ inert: !isOpen && isPresented ? true : undefined,
206
+ onCancel: handleCancel,
207
+ onClick: handleClick,
208
+ onKeyDown: handleKeyDown,
209
+ children: /*#__PURE__*/_jsx("div", {
210
+ ...{
211
+ className: "x10l6tqk x17y0mx6 x1ey2m1c x78zum5 xl56j7k x47corl"
212
+ },
213
+ children: /*#__PURE__*/_jsx(BottomSheetPanel, {
214
+ ...props,
215
+ ref: ref,
216
+ state: panelState,
217
+ height: height,
218
+ isSwipeDismissAllowed: purpose === 'info',
219
+ xstyle: xstyle,
220
+ onDismiss: dismissOnLightInteraction,
221
+ onScrimOpacity: handleScrimOpacity,
222
+ onElementChange: handlePanelElementChange,
223
+ onMotionComplete: handleMotionComplete,
224
+ children: children
225
+ })
226
+ })
227
+ });
228
+ }
229
+ function SwitcherBottomSheetItem({
230
+ switcher,
231
+ ref,
232
+ sheetId,
233
+ label,
234
+ children,
235
+ height = 'capped',
236
+ purpose = 'info',
237
+ xstyle,
238
+ ...props
239
+ }) {
240
+ const {
241
+ activeSheet,
242
+ hasScrim,
243
+ onActiveSheetChange,
244
+ getSheetPhase,
245
+ getSheetAlignmentOffset,
246
+ registerSheetElement,
247
+ registerSheetLabel,
248
+ registerSheetPurpose,
249
+ onSheetEnterStart,
250
+ onSheetTransitionComplete,
251
+ onSheetScrimOpacityChange
252
+ } = switcher;
253
+ const hasValidSheetId = typeof sheetId === 'string' && sheetId.length > 0;
254
+ const phase = hasValidSheetId ? getSheetPhase(sheetId) : 'hidden';
255
+ const alignmentOffset = hasValidSheetId ? getSheetAlignmentOffset(sheetId) : 0;
256
+ const panelState = panelStateForSwitcherPhase(phase, alignmentOffset);
257
+ const isInteractive = phase === 'active' || phase === 'entering';
258
+ const isInactive = phase === 'covered' || phase === 'aligning' || phase === 'fading' || phase === 'exiting';
259
+ const isPresented = phase !== 'hidden';
260
+ const isTopSheet = phase === 'active' || phase === 'entering';
261
+ const panelRef = useRef(null);
262
+ const previousPhaseRef = useRef(phase);
263
+ const previousPhase = previousPhaseRef.current;
264
+ const hasPresentedRef = useRef(false);
265
+ useLayoutEffect(() => {
266
+ previousPhaseRef.current = phase;
267
+ }, [phase]);
268
+ const dismissOnSwipe = useCallback(() => {
269
+ if (purpose === 'info' && hasValidSheetId && activeSheet === sheetId) {
270
+ onActiveSheetChange(null);
271
+ }
272
+ }, [activeSheet, hasValidSheetId, onActiveSheetChange, purpose, sheetId]);
273
+ const handlePanelElementChange = useCallback(element => {
274
+ panelRef.current = element;
275
+ if (hasValidSheetId) {
276
+ registerSheetElement(sheetId, element);
277
+ }
278
+ }, [hasValidSheetId, registerSheetElement, sheetId]);
279
+ const handleMotionStart = useCallback(motion => {
280
+ if (motion === 'entering' && hasValidSheetId) {
281
+ onSheetEnterStart(sheetId);
282
+ }
283
+ }, [hasValidSheetId, onSheetEnterStart, sheetId]);
284
+ const handleMotionComplete = useCallback(motion => {
285
+ if (hasValidSheetId) {
286
+ onSheetTransitionComplete({
287
+ sheetId,
288
+ phase: motion
289
+ });
290
+ }
291
+ }, [hasValidSheetId, onSheetTransitionComplete, sheetId]);
292
+ const handleScrimOpacity = useCallback(opacity => {
293
+ if (hasValidSheetId) {
294
+ onSheetScrimOpacityChange(sheetId, opacity);
295
+ }
296
+ }, [hasValidSheetId, onSheetScrimOpacityChange, sheetId]);
297
+ useLayoutEffect(() => {
298
+ if (!hasValidSheetId) {
299
+ return;
300
+ }
301
+ registerSheetLabel(sheetId, label);
302
+ return () => registerSheetLabel(sheetId, null);
303
+ }, [hasValidSheetId, label, registerSheetLabel, sheetId]);
304
+ useLayoutEffect(() => {
305
+ if (!hasValidSheetId) {
306
+ return;
307
+ }
308
+ registerSheetPurpose(sheetId, purpose);
309
+ return () => registerSheetPurpose(sheetId, null);
310
+ }, [hasValidSheetId, purpose, registerSheetPurpose, sheetId]);
311
+ useEffect(() => {
312
+ if (isInteractive) {
313
+ const wasInteractive = previousPhase === 'active' || previousPhase === 'entering';
314
+ if (!hasPresentedRef.current || !wasInteractive) {
315
+ focusPanel(panelRef.current, hasScrim);
316
+ }
317
+ hasPresentedRef.current = true;
318
+ } else if (phase === 'hidden') {
319
+ hasPresentedRef.current = false;
320
+ }
321
+ }, [hasScrim, isInteractive, phase, previousPhase]);
322
+ 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);
323
+ return /*#__PURE__*/_jsx("div", {
324
+ ...{
325
+ 0: {
326
+ className: "x10l6tqk x17y0mx6 x1ey2m1c x78zum5 xl56j7k x47corl"
327
+ },
328
+ 2: {
329
+ className: "x10l6tqk x17y0mx6 x1ey2m1c xl56j7k x47corl x1s85apg"
330
+ },
331
+ 1: {
332
+ className: "x10l6tqk x17y0mx6 x1ey2m1c x78zum5 xl56j7k x47corl x1vjfegm"
333
+ },
334
+ 3: {
335
+ className: "x10l6tqk x17y0mx6 x1ey2m1c xl56j7k x47corl x1s85apg x1vjfegm"
336
+ }
337
+ }[!!!isPresented << 1 | !!isTopSheet << 0],
338
+ hidden: !isPresented,
339
+ "aria-hidden": isInactive ? 'true' : undefined,
340
+ inert: isInactive ? true : undefined,
341
+ children: /*#__PURE__*/_jsx(BottomSheetPanel, {
342
+ ...props,
343
+ ref: ref,
344
+ state: panelState,
345
+ height: height,
346
+ isSwipeDismissAllowed: purpose === 'info',
347
+ xstyle: xstyle,
348
+ onDismiss: dismissOnSwipe,
349
+ onScrimOpacity: handleScrimOpacity,
350
+ onElementChange: handlePanelElementChange,
351
+ onMotionStart: handleMotionStart,
352
+ onMotionComplete: handleMotionComplete,
353
+ children: /*#__PURE__*/_jsx(BottomSheetSwitcherContext, {
354
+ value: null,
355
+ children: children
356
+ })
357
+ })
358
+ });
359
+ }
360
+
361
+ /**
362
+ * A mobile touch sheet that either owns a native dialog or participates in a
363
+ * BottomSheetSwitcher shared dialog when given a sheetId inside that context.
364
+ */
365
+ export function BottomSheet(props) {
366
+ const switcher = use(BottomSheetSwitcherContext);
367
+ const runtimeSheetId = props.sheetId;
368
+ const hasValidSheetId = typeof runtimeSheetId === 'string' && runtimeSheetId.length > 0;
369
+ useDevWarning('BottomSheet', 'requires a non-empty `sheetId` when nested in ' + 'BottomSheetSwitcher; standalone `isOpen` / `onOpenChange` props are ' + 'ignored there.', switcher != null && !hasValidSheetId);
370
+ useDevWarning('BottomSheet', '`sheetId` only works inside BottomSheetSwitcher. Use `isOpen` and ' + '`onOpenChange` for a standalone sheet.', switcher == null && runtimeSheetId != null);
371
+ if (switcher != null) {
372
+ return /*#__PURE__*/_jsx(SwitcherBottomSheetItem, {
373
+ ...props,
374
+ switcher: switcher
375
+ });
376
+ }
377
+ return /*#__PURE__*/_jsx(StandaloneBottomSheet, {
378
+ ...props
379
+ });
380
+ }
381
+ BottomSheet.displayName = 'BottomSheet';
@@ -0,0 +1,57 @@
1
+ /**
2
+ * @file BottomSheetPanel.tsx
3
+ * @input Uses React, StyleX, theme tokens, useSheetGestures
4
+ * @output Internal BottomSheetPanel surface and motion-state types
5
+ * @position Shared presentation layer for standalone and switcher BottomSheets
6
+ *
7
+ * This component owns everything intrinsic to a sheet surface: height budgets,
8
+ * drag and snap gestures, the handle and scrolling body, motion styles, and
9
+ * transition completion. It deliberately does not own a dialog, focus, inert
10
+ * state, or switcher registration; those belong to the hosting controller.
11
+ *
12
+ * SYNC: When modified, update these files to stay in sync:
13
+ * - /packages/core/src/BottomSheet/BottomSheet.tsx
14
+ * - /packages/core/src/BottomSheet/BottomSheetPanel.test.tsx
15
+ * - /packages/core/src/BottomSheet/useSheetGestures.ts
16
+ */
17
+ import { type ReactNode } from 'react';
18
+ import type { BaseProps } from '../BaseProps';
19
+ declare const HEIGHT_BUDGETS: {
20
+ readonly hug: "92dvh";
21
+ readonly capped: "62dvh";
22
+ readonly tall: "92dvh";
23
+ };
24
+ export type BottomSheetHeight = keyof typeof HEIGHT_BUDGETS;
25
+ export type BottomSheetPanelMotion = 'entering' | 'aligning' | 'fading' | 'exiting';
26
+ export type BottomSheetPanelState = {
27
+ kind: 'hidden';
28
+ } | {
29
+ kind: 'open';
30
+ entering: boolean;
31
+ } | {
32
+ kind: 'retained';
33
+ motion: 'covered' | 'aligning' | 'fading';
34
+ alignmentOffset: number;
35
+ } | {
36
+ kind: 'exiting';
37
+ };
38
+ interface BottomSheetPanelProps extends BaseProps<HTMLDivElement> {
39
+ /** Ref forwarded to the visual sheet panel. */
40
+ ref?: React.Ref<HTMLDivElement>;
41
+ state: BottomSheetPanelState;
42
+ height: BottomSheetHeight | number | string;
43
+ children: ReactNode;
44
+ isSwipeDismissAllowed?: boolean;
45
+ onDismiss: () => void;
46
+ onScrimOpacity: (opacity: number) => void;
47
+ onElementChange?: (element: HTMLDivElement | null) => void;
48
+ onMotionStart?: (motion: BottomSheetPanelMotion) => void;
49
+ onMotionComplete?: (motion: BottomSheetPanelMotion) => void;
50
+ }
51
+ /** Internal visual and gesture surface shared by every BottomSheet host. */
52
+ export declare function BottomSheetPanel({ ref, state, height, children, className, style, tabIndex, xstyle, isSwipeDismissAllowed, onDismiss, onScrimOpacity, onElementChange, onMotionStart, onMotionComplete, ...props }: BottomSheetPanelProps): import("react").JSX.Element;
53
+ export declare namespace BottomSheetPanel {
54
+ var displayName: string;
55
+ }
56
+ export {};
57
+ //# sourceMappingURL=BottomSheetPanel.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAqG5D,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,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,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,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,qBAA4B,EAC5B,SAAS,EACT,cAAc,EACd,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAyOvB;yBAzPe,gBAAgB"}