@kanso-labs/kanso-ui 0.40.7 → 0.40.9

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 (61) hide show
  1. package/dist/badge/index.js +15 -0
  2. package/dist/badge/index.js.map +1 -0
  3. package/dist/components/avatar/index.d.ts +7 -0
  4. package/dist/components/avatar/index.js.map +1 -1
  5. package/dist/components/badge/index.js +96 -48
  6. package/dist/components/badge/index.js.map +1 -1
  7. package/dist/components/dialog/index.d.ts +6 -1
  8. package/dist/components/dialog/index.js +54 -24
  9. package/dist/components/dialog/index.js.map +1 -1
  10. package/dist/components/form/index.d.ts +5 -4
  11. package/dist/components/form/index.js.map +1 -1
  12. package/dist/components/link/index.js +16 -5
  13. package/dist/components/link/index.js.map +1 -1
  14. package/dist/components/menu/index.js +29 -21
  15. package/dist/components/menu/index.js.map +1 -1
  16. package/dist/components/navigation-bar/index.js +134 -54
  17. package/dist/components/navigation-bar/index.js.map +1 -1
  18. package/dist/components/navigation-rail/index.js +56 -37
  19. package/dist/components/navigation-rail/index.js.map +1 -1
  20. package/dist/components/number-field/index.d.ts +13 -2
  21. package/dist/components/number-field/index.js +95 -84
  22. package/dist/components/number-field/index.js.map +1 -1
  23. package/dist/components/popover/index.d.ts +4 -1
  24. package/dist/components/popover/index.js +239 -137
  25. package/dist/components/popover/index.js.map +1 -1
  26. package/dist/components/product-icon/index.d.ts +3 -1
  27. package/dist/components/product-icon/index.js.map +1 -1
  28. package/dist/components/progress-indicator/index.js +1 -1
  29. package/dist/components/progress-indicator/index.js.map +1 -1
  30. package/dist/components/search-field/index.js +7 -3
  31. package/dist/components/search-field/index.js.map +1 -1
  32. package/dist/components/segmented-button/index.d.ts +17 -1
  33. package/dist/components/segmented-button/index.js +132 -59
  34. package/dist/components/segmented-button/index.js.map +1 -1
  35. package/dist/components/sheet/index.d.ts +8 -1
  36. package/dist/components/sheet/index.js +45 -29
  37. package/dist/components/sheet/index.js.map +1 -1
  38. package/dist/components/snackbar/index.d.ts +4 -0
  39. package/dist/components/snackbar/index.js +54 -49
  40. package/dist/components/snackbar/index.js.map +1 -1
  41. package/dist/field/index.js +314 -284
  42. package/dist/field/index.js.map +1 -1
  43. package/dist/field/press.js +27 -0
  44. package/dist/field/press.js.map +1 -0
  45. package/dist/field/root.js +8 -8
  46. package/dist/field/root.js.map +1 -1
  47. package/dist/field/styles.js +22 -0
  48. package/dist/field/styles.js.map +1 -1
  49. package/dist/hooks/useBottomEdge.js +83 -0
  50. package/dist/hooks/useBottomEdge.js.map +1 -0
  51. package/dist/mark/initials.js +41 -26
  52. package/dist/mark/initials.js.map +1 -1
  53. package/dist/navigation/context.js.map +1 -1
  54. package/dist/navigation/index.js +16 -4
  55. package/dist/navigation/index.js.map +1 -1
  56. package/dist/navigation/styles.js +35 -1
  57. package/dist/navigation/styles.js.map +1 -1
  58. package/dist/row/styles.js +2 -1
  59. package/dist/row/styles.js.map +1 -1
  60. package/dist/styles.css +110 -32
  61. package/package.json +2 -2
@@ -3,6 +3,7 @@ import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
3
3
  import { mergeRefs } from "../../render/ref.js";
4
4
  import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
5
5
  import { overlay } from "../../styles/overlay.js";
6
+ import { useHoldBottomEdge } from "../../hooks/useBottomEdge.js";
6
7
  import { useScrollable } from "../../hooks/useScrollable.js";
7
8
  import { c } from "react/compiler-runtime";
8
9
  import { useRef } from "react";
@@ -66,7 +67,7 @@ function Sheet(t0) {
66
67
  }
67
68
  function SheetBody(t0) {
68
69
  const $ = c(7);
69
- const { ref: callerRef, ...props$1 } = t0;
70
+ const { ref: callerRef, ...props$2 } = t0;
70
71
  const ref = useRef(null);
71
72
  const scrollable = useScrollable(ref);
72
73
  const t1 = callerRef ?? void 0;
@@ -78,17 +79,17 @@ function SheetBody(t0) {
78
79
  } else t2 = $[1];
79
80
  const merged = t2;
80
81
  const t3 = scrollable ? 0 : void 0;
81
- const t4 = mergeStyles(props(styles.body, overlay.modalBodyRing), props$1);
82
+ const t4 = mergeStyles(props(styles.body, overlay.modalBodyRing), props$2);
82
83
  let t5;
83
- if ($[2] !== merged || $[3] !== props$1 || $[4] !== t3 || $[5] !== t4) {
84
+ if ($[2] !== merged || $[3] !== props$2 || $[4] !== t3 || $[5] !== t4) {
84
85
  t5 = /* @__PURE__ */ jsx("div", {
85
86
  tabIndex: t3,
86
- ...props$1,
87
+ ...props$2,
87
88
  ref: merged,
88
89
  ...t4
89
90
  });
90
91
  $[2] = merged;
91
- $[3] = props$1;
92
+ $[3] = props$2;
92
93
  $[4] = t3;
93
94
  $[5] = t4;
94
95
  $[6] = t5;
@@ -123,12 +124,12 @@ function SheetContent(t0) {
123
124
  let isKeyboardDismissDisabled;
124
125
  let isOpen;
125
126
  let onOpenChange;
126
- let props$2;
127
+ let props$1;
127
128
  let ref;
128
129
  let style;
129
130
  let t1;
130
131
  if ($[0] !== t0) {
131
- ({children, className, container, defaultOpen, isDismissable: t1, isKeyboardDismissDisabled, isOpen, onOpenChange, ref, style, ...props$2} = t0);
132
+ ({children, className, container, defaultOpen, isDismissable: t1, isKeyboardDismissDisabled, isOpen, onOpenChange, ref, style, ...props$1} = t0);
132
133
  $[0] = t0;
133
134
  $[1] = children;
134
135
  $[2] = className;
@@ -137,7 +138,7 @@ function SheetContent(t0) {
137
138
  $[5] = isKeyboardDismissDisabled;
138
139
  $[6] = isOpen;
139
140
  $[7] = onOpenChange;
140
- $[8] = props$2;
141
+ $[8] = props$1;
141
142
  $[9] = ref;
142
143
  $[10] = style;
143
144
  $[11] = t1;
@@ -149,7 +150,7 @@ function SheetContent(t0) {
149
150
  isKeyboardDismissDisabled = $[5];
150
151
  isOpen = $[6];
151
152
  onOpenChange = $[7];
152
- props$2 = $[8];
153
+ props$1 = $[8];
153
154
  ref = $[9];
154
155
  style = $[10];
155
156
  t1 = $[11];
@@ -176,14 +177,14 @@ function SheetContent(t0) {
176
177
  $[16] = t4;
177
178
  } else t4 = $[16];
178
179
  let t5;
179
- if ($[17] !== children || $[18] !== props$2) {
180
+ if ($[17] !== children || $[18] !== props$1) {
180
181
  t5 = /* @__PURE__ */ jsx(Dialog, {
181
- ...props$2,
182
+ ...props$1,
182
183
  ...t4,
183
184
  children
184
185
  });
185
186
  $[17] = children;
186
- $[18] = props$2;
187
+ $[18] = props$1;
187
188
  $[19] = t5;
188
189
  } else t5 = $[19];
189
190
  let t6;
@@ -221,25 +222,40 @@ function SheetContent(t0) {
221
222
  } else t7 = $[31];
222
223
  return t7;
223
224
  }
224
- function SheetFooter(props) {
225
- const $ = c(5);
226
- let t0;
227
- if ($[0] !== props) {
228
- t0 = mergeStyles({ className: "x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x1nhvcw1 x1qafhyn x8i8c5o x1clyivc xg0ps1x" }, props);
229
- $[0] = props;
230
- $[1] = t0;
231
- } else t0 = $[1];
232
- let t1;
233
- if ($[2] !== props || $[3] !== t0) {
234
- t1 = /* @__PURE__ */ jsx("div", {
225
+ /**
226
+ * The sheet's actions. The panel is pinned to the window's bottom edge in
227
+ * both presentations, so they sit on that edge, and a toast rises clear of
228
+ * them while the sheet is open rather than lying over its buttons. A side
229
+ * sheet's are included: the toast is centred in the window, and on any
230
+ * window narrower than about 1376px its 576 reach into the sheet's 400.
231
+ */
232
+ function SheetFooter(t0) {
233
+ const $ = c(6);
234
+ const { ref: callerRef, ...props } = t0;
235
+ const ref = useRef(null);
236
+ useHoldBottomEdge(ref, true);
237
+ const t1 = callerRef ?? void 0;
238
+ let t2;
239
+ if ($[0] !== t1) {
240
+ t2 = mergeRefs(ref, t1);
241
+ $[0] = t1;
242
+ $[1] = t2;
243
+ } else t2 = $[1];
244
+ const merged = t2;
245
+ const t3 = mergeStyles({ className: "x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x1nhvcw1 x1qafhyn x8i8c5o x1clyivc xg0ps1x" }, props);
246
+ let t4;
247
+ if ($[2] !== merged || $[3] !== props || $[4] !== t3) {
248
+ t4 = /* @__PURE__ */ jsx("div", {
235
249
  ...props,
236
- ...t0
250
+ ref: merged,
251
+ ...t3
237
252
  });
238
- $[2] = props;
239
- $[3] = t0;
240
- $[4] = t1;
241
- } else t1 = $[4];
242
- return t1;
253
+ $[2] = merged;
254
+ $[3] = props;
255
+ $[4] = t3;
256
+ $[5] = t4;
257
+ } else t4 = $[5];
258
+ return t4;
243
259
  }
244
260
  /**
245
261
  * The bottom sheets page's drag handle: a short bar above the sheet's
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["c","_c","HTMLAttributes","ReactNode","RefAttributes","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","StyleOrFunction","stylex","useMemo","useRef","Dialog","DialogTrigger","Heading","Modal","ModalOverlay","useScrollable","mergeRefs","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","FORCED_COLORS","slideInFromEnd","slideInFromStart","slideInFromBottom","styles","body","kB7OPa","k1xSpc","kXwgrk","kzQI83","kOIVth","kORKVm","k8WAf4","kg3NbH","$$css","SheetProps","Omit","children","Sheet","t0","$","props","t1","SheetBody","ref","callerRef","scrollable","undefined","t2","merged","t3","t4","modalBodyRing","t5","SheetContent","className","container","defaultOpen","isKeyboardDismissDisabled","isOpen","onOpenChange","style","isDismissable","Symbol","for","scrim","modalDialog","t6","t7","SheetFooter","SheetHandle","SheetHeader","SheetTitle","Body","Content","Footer","Handle","Header","Title","SheetContentProps","Pick","Element","SheetTitleProps","_c","props","stylex.props"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["'use client';\n\nimport type { HTMLAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useMemo, useRef } from 'react';\nimport { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from 'react-aria-components';\nimport { useScrollable } from '../../hooks/useScrollable';\nimport { mergeRefs } from '../../render/ref';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// One component, two presentations. Above the medium breakpoint it is a side\n// sheet pinned to the inline end of the viewport; below it, the same panel\n// becomes a bottom sheet. That is the pairing the Material Design pages draw\n// rather than two components: a sheet that stayed on the right at 375px would\n// be a drawer covering the whole screen.\n//\n// The two differ in five things and no more: which edges they are pinned to,\n// which two corners are rounded, which axis they arrive along, how much of\n// the viewport they may take, and the drag handle, which is the bottom\n// sheets page's element alone. Everything inside the panel — the 24 of start\n// and end padding, the 12 between the header's elements, the actions area —\n// comes from the side sheets page and is drawn the same in both.\n\n// The side sheet arrives along the inline axis, and it takes two keyframes to\n// do that rather than one. Which edge the panel rests against is logical —\n// `insetInlineEnd` puts it on the right under a left-to-right document and on\n// the left under a right-to-left one — but `translateX` is physical and flips\n// with nothing. One keyframe would therefore have the panel arrive from the\n// far side of where it comes to rest under one of the two.\nconst slideInFromEnd = \"x17cjob-B\";\nconst slideInFromStart = \"x18x3npg-B\";\nconst slideInFromBottom = \"x15b941j-B\";\n\n// Entry only, so there is no exit animation to wait for and closing is\n// immediate: React Aria keeps a closing panel mounted only while an animation\n// is running on it, and finds none. See the comment on `SheetContent` for why\n// that is a design call rather than a limit of StyleX.\n//\n// React Aria's overlay is three nested elements — the scrim, the panel, and\n// the dialog inside it — so the styles are split the same way: the overlay\n// module's scrim on the first, `content` on the panel, its modal dialog style\n// on the element that carries the role. The scrim and that dialog style are\n// shared with every modal overlay; the panel is the sheet's own, since which\n// edge it is pinned to is what makes it a sheet.\nconst styles = {\n body: {\n kB7OPa: \"x9f619\",\n k1xSpc: \"x78zum5\",\n kXwgrk: \"xdt5ytf\",\n kzQI83: \"x1iyjqo2\",\n kOIVth: \"xxj4525\",\n kORKVm: \"x1odjw0f\",\n k8WAf4: \"xp6hjv6\",\n kg3NbH: \"xg0ps1x\",\n $$css: true\n }\n};\ntype SheetProps = Omit<DialogTriggerProps, 'children'> & {\n children?: ReactNode;\n};\n\n/**\n * A modal panel that arrives from the edge of the screen — a side sheet on a\n * wide viewport, a bottom sheet on a narrow one. Open state is React Aria's:\n * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Composed rather than configured by props, because a sheet's header, body,\n * and footer all take arbitrary content — the parts are `Sheet.Content`,\n * `Sheet.Header`, `Sheet.Title`, `Sheet.Body`, and `Sheet.Footer`. A\n * `Button` or `IconButton` placed directly inside `Sheet` opens it, and one\n * given `slot=\"close\"` anywhere inside the content closes it; neither needs\n * a part of its own.\n *\n * `Sheet` is the trigger's half, so a sheet nothing on the page opens — one\n * a route shows, or a menu item raises — leaves it out and passes `isOpen`\n * and `onOpenChange` to `Sheet.Content` instead. Wrapped in `Sheet` with no\n * button inside it, React Aria warns that its press responder found nothing\n * to press.\n */\nfunction Sheet({\n children,\n ...props\n}: SheetProps) {\n return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction SheetBody({\n ref: callerRef,\n ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n const ref = useRef<HTMLDivElement>(null);\n // A body its content runs past is a tab stop, so a keyboard can scroll it\n // when nothing inside it takes focus; a call site's own tabIndex still\n // wins. See useScrollable.\n const scrollable = useScrollable(ref);\n // The body measures itself through its own ref, and the call site's lands\n // on the same element.\n const merged = useMemo(() => mergeRefs(ref, callerRef ?? undefined), [callerRef]);\n return <div\n // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- a scroll container with nothing focusable inside is otherwise out of a keyboard's reach, which axe's scrollable-region-focusable reports\n tabIndex={scrollable ? 0 : undefined} {...props} ref={merged} {...mergeStyles(stylex.props(styles.body, overlay.modalBodyRing), props)} />;\n}\n\n/**\n * The panel itself, and the scrim behind it. Everything the sheet shows goes\n * in here; the trigger stays outside it, since the trigger lives in the page\n * while this is portalled out to the end of the body.\n *\n * A press on the scrim closes the sheet unless `isDismissable` says\n * otherwise — React Aria's own default is the reverse, and a sheet that\n * ignores a tap outside it reads as stuck.\n *\n * Inside `Sheet`, the open state is the trigger's. On its own, with no\n * trigger, it is this part's: `isOpen` with `onOpenChange` controls it, and\n * a `slot=\"close\"` button, Escape and the scrim all report through\n * `onOpenChange`, as they would to `Sheet`.\n *\n * The scrim draws at `z-index: 900`, over any page content layered below\n * that, such as a sticky header, and the panel draws inside it. A\n * `Snackbar` draws at 1000, so a toast raised from inside the sheet is read\n * over it, and React Aria's popovers and menus draw above both.\n */\nfunction SheetContent({\n children,\n className,\n container,\n defaultOpen,\n isDismissable = true,\n isKeyboardDismissDisabled,\n isOpen,\n onOpenChange,\n ref,\n style,\n ...props\n}: RefAttributes<HTMLDivElement> & SheetContentProps) {\n return <ModalOverlay defaultOpen={defaultOpen} isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled} isOpen={isOpen} onOpenChange={onOpenChange}\n // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim)}>\n <Modal\n // The panel, where the call site's class and style land, rather than\n // the dialog inside it, which takes the rest of the props.\n ref={ref} {...mergeStatefulStyles({\n className: \"x1n1nwrg x1u6grsq x1ioi8j8 xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 x19dwuzr xuz63mn x1lym3mf xkducg2 xrzall9 xb0nsol xjslfuv x1gbqego x1cfajip xjg5lhu x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr x1a148e8 x1mrd0q x5ubeis x1lodr2j x1uhho1l x19b5e0v xg4bq00 xg4jtgg xsds98l xixxii4\"\n }, {\n className,\n style\n })}>\n <Dialog {...props} {...stylex.props(overlay.modalDialog)}>\n {children}\n </Dialog>\n </Modal>\n </ModalOverlay>;\n}\nfunction SheetFooter(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n return <div {...props} {...mergeStyles({\n className: \"x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x1nhvcw1 x1qafhyn x8i8c5o x1clyivc xg0ps1x\"\n }, props)} />;\n}\n\n/**\n * The bottom sheets page's drag handle: a short bar above the sheet's\n * content, saying the panel is a bottom sheet. Place it first inside\n * `Sheet.Content`; above the medium breakpoint the panel is a side sheet and\n * this draws nothing.\n *\n * It is decoration rather than a control, and hidden from assistive\n * technology. Material's own handle drags a sheet between a collapsed and an\n * expanded height and dismisses it from the collapsed one; this panel has\n * one height and cannot be dragged, so a control that only looked draggable\n * would promise what it cannot do. Closing is already the scrim, Escape, and\n * any button given `slot=\"close\"`.\n */\nfunction SheetHandle(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n return <div aria-hidden=\"true\" {...props} {...mergeStyles({\n className: \"x6s0dn4 x9f619 x1s85apg x37i4ze x2lah0s xl56j7k x1xg6qyv\"\n }, props)}>\n <span className=\"x1ccu2yh xwvh9j7 xqu0tyb x1dkaolv x9f619 x1g12otp x1td3qas\" />\n </div>;\n}\nfunction SheetHeader(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n return <div {...props} {...mergeStyles({\n className: \"x6s0dn4 x1j6faob x1q0q8m5 xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib x1cmllll xg0ps1x\"\n }, props)} />;\n}\n\n/**\n * Names the sheet. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a sheet without one announces\n * itself as an unnamed dialog.\n */\nfunction SheetTitle(props: RefAttributes<HTMLHeadingElement> & SheetTitleProps) {\n return <Heading slot=\"title\" {...props} {...mergeStyles({\n className: \"x9f619 x1w5n3ug xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp\"\n }, props)} />;\n}\nSheet.Body = SheetBody;\nSheet.Content = SheetContent;\nSheet.Footer = SheetFooter;\nSheet.Handle = SheetHandle;\nSheet.Header = SheetHeader;\nSheet.Title = SheetTitle;\n\n// The dialog's own props, plus the scrim's open state and dismissal settings\n// and the panel's styling. A call site has no reason to know there are three\n// elements: `className` and `style` reach the panel, which is the one worth\n// restyling and positioning, the open state and the dismissal settings reach\n// the scrim, and everything else lands on the dialog.\n//\n// `isDismissable` is declared here rather than picked with its siblings,\n// since the picked one carries React Aria's documentation, whose default is\n// the reverse of this component's.\ntype SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'defaultOpen' | 'isKeyboardDismissDisabled' | 'isOpen' | 'onOpenChange'> & {\n /** A function may compute the class from the panel's render state. */\n className?: ClassNameOrFunction<ModalRenderProps>;\n /**\n * Where to portal the panel and scrim. Defaults to the container of the\n * `ThemeScope` around it, which keeps the sheet on that scope's tokens, or\n * to the end of `<body>` where there is none. A subtree themed through the\n * `themeScope` class has no container of its own, so point this inside it,\n * or the sheet renders outside and keeps the page's tokens.\n */\n container?: Element;\n /**\n * Whether a press on the scrim, outside the panel, closes the sheet.\n * `true` here where React Aria's own default is `false`, since a sheet\n * that ignores a tap outside it reads as stuck. Escape is\n * `isKeyboardDismissDisabled`'s, and this says nothing about it.\n * @default true\n */\n isDismissable?: boolean;\n /** A function may compute the style from the panel's render state. */\n style?: StyleOrFunction<ModalRenderProps>;\n};\ntype SheetTitleProps = HeadingProps;\nexport type { SheetContentProps, SheetProps, SheetTitleProps };\nexport { SheetBody, SheetContent, SheetFooter, SheetHandle, SheetHeader, SheetTitle };\nexport default Sheet;"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["c","_c","HTMLAttributes","ReactNode","RefAttributes","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","StyleOrFunction","stylex","useMemo","useRef","Dialog","DialogTrigger","Heading","Modal","ModalOverlay","useHoldBottomEdge","useScrollable","mergeRefs","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","FORCED_COLORS","slideInFromEnd","slideInFromStart","slideInFromBottom","styles","body","kB7OPa","k1xSpc","kXwgrk","kzQI83","kOIVth","kORKVm","k8WAf4","kg3NbH","$$css","SheetProps","Omit","children","Sheet","t0","$","props","t1","SheetBody","ref","callerRef","scrollable","undefined","t2","merged","t3","t4","modalBodyRing","t5","SheetContent","className","container","defaultOpen","isKeyboardDismissDisabled","isOpen","onOpenChange","style","isDismissable","Symbol","for","scrim","modalDialog","t6","t7","SheetFooter","SheetHandle","SheetHeader","SheetTitle","Body","Content","Footer","Handle","Header","Title","SheetContentProps","Pick","Element","SheetTitleProps","_c","props","stylex.props"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["'use client';\n\nimport type { HTMLAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useMemo, useRef } from 'react';\nimport { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from 'react-aria-components';\nimport { useHoldBottomEdge } from '../../hooks/useBottomEdge';\nimport { useScrollable } from '../../hooks/useScrollable';\nimport { mergeRefs } from '../../render/ref';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// One component, two presentations. Above the medium breakpoint it is a side\n// sheet pinned to the inline end of the viewport; below it, the same panel\n// becomes a bottom sheet. That is the pairing the Material Design pages draw\n// rather than two components: a sheet that stayed on the right at 375px would\n// be a drawer covering the whole screen.\n//\n// The two differ in five things and no more: which edges they are pinned to,\n// which two corners are rounded, which axis they arrive along, how much of\n// the viewport they may take, and the drag handle, which is the bottom\n// sheets page's element alone. Everything inside the panel — the 24 of start\n// and end padding, the 12 between the header's elements, the actions area —\n// comes from the side sheets page and is drawn the same in both.\n\n// The side sheet arrives along the inline axis, and it takes two keyframes to\n// do that rather than one. Which edge the panel rests against is logical —\n// `insetInlineEnd` puts it on the right under a left-to-right document and on\n// the left under a right-to-left one — but `translateX` is physical and flips\n// with nothing. One keyframe would therefore have the panel arrive from the\n// far side of where it comes to rest under one of the two.\nconst slideInFromEnd = \"x17cjob-B\";\nconst slideInFromStart = \"x18x3npg-B\";\nconst slideInFromBottom = \"x15b941j-B\";\n\n// Entry only, so there is no exit animation to wait for and closing is\n// immediate: React Aria keeps a closing panel mounted only while an animation\n// is running on it, and finds none. See the comment on `SheetContent` for why\n// that is a design call rather than a limit of StyleX.\n//\n// React Aria's overlay is three nested elements — the scrim, the panel, and\n// the dialog inside it — so the styles are split the same way: the overlay\n// module's scrim on the first, `content` on the panel, its modal dialog style\n// on the element that carries the role. The scrim and that dialog style are\n// shared with every modal overlay; the panel is the sheet's own, since which\n// edge it is pinned to is what makes it a sheet.\nconst styles = {\n body: {\n kB7OPa: \"x9f619\",\n k1xSpc: \"x78zum5\",\n kXwgrk: \"xdt5ytf\",\n kzQI83: \"x1iyjqo2\",\n kOIVth: \"xxj4525\",\n kORKVm: \"x1odjw0f\",\n k8WAf4: \"xp6hjv6\",\n kg3NbH: \"xg0ps1x\",\n $$css: true\n }\n};\ntype SheetProps = Omit<DialogTriggerProps, 'children'> & {\n children?: ReactNode;\n};\n\n/**\n * A modal panel that arrives from the edge of the screen — a side sheet on a\n * wide viewport, a bottom sheet on a narrow one. Open state is React Aria's:\n * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Composed rather than configured by props, because a sheet's header, body,\n * and footer all take arbitrary content — the parts are `Sheet.Content`,\n * `Sheet.Header`, `Sheet.Title`, `Sheet.Body`, and `Sheet.Footer`. A\n * `Button` or `IconButton` placed directly inside `Sheet` opens it, and one\n * given `slot=\"close\"` anywhere inside the content closes it; neither needs\n * a part of its own.\n *\n * `Sheet` is the trigger's half, so a sheet nothing on the page opens — one\n * a route shows, or a menu item raises — leaves it out and passes `isOpen`\n * and `onOpenChange` to `Sheet.Content` instead. Wrapped in `Sheet` with no\n * button inside it, React Aria warns that its press responder found nothing\n * to press.\n */\nfunction Sheet({\n children,\n ...props\n}: SheetProps) {\n return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction SheetBody({\n ref: callerRef,\n ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n const ref = useRef<HTMLDivElement>(null);\n // A body its content runs past is a tab stop, so a keyboard can scroll it\n // when nothing inside it takes focus; a call site's own tabIndex still\n // wins. See useScrollable.\n const scrollable = useScrollable(ref);\n // The body measures itself through its own ref, and the call site's lands\n // on the same element.\n const merged = useMemo(() => mergeRefs(ref, callerRef ?? undefined), [callerRef]);\n return <div\n // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- a scroll container with nothing focusable inside is otherwise out of a keyboard's reach, which axe's scrollable-region-focusable reports\n tabIndex={scrollable ? 0 : undefined} {...props} ref={merged} {...mergeStyles(stylex.props(styles.body, overlay.modalBodyRing), props)} />;\n}\n\n/**\n * The panel itself, and the scrim behind it. Everything the sheet shows goes\n * in here; the trigger stays outside it, since the trigger lives in the page\n * while this is portalled out to the end of the body.\n *\n * A press on the scrim closes the sheet unless `isDismissable` says\n * otherwise — React Aria's own default is the reverse, and a sheet that\n * ignores a tap outside it reads as stuck.\n *\n * Inside `Sheet`, the open state is the trigger's. On its own, with no\n * trigger, it is this part's: `isOpen` with `onOpenChange` controls it, and\n * a `slot=\"close\"` button, Escape and the scrim all report through\n * `onOpenChange`, as they would to `Sheet`.\n *\n * The scrim draws at `z-index: 900`, over any page content layered below\n * that, such as a sticky header, and the panel draws inside it. A\n * `Snackbar` draws at 1000, so a toast raised from inside the sheet is read\n * over it, and React Aria's popovers and menus draw above both.\n */\nfunction SheetContent({\n children,\n className,\n container,\n defaultOpen,\n isDismissable = true,\n isKeyboardDismissDisabled,\n isOpen,\n onOpenChange,\n ref,\n style,\n ...props\n}: RefAttributes<HTMLDivElement> & SheetContentProps) {\n return <ModalOverlay defaultOpen={defaultOpen} isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled} isOpen={isOpen} onOpenChange={onOpenChange}\n // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim)}>\n <Modal\n // The panel, where the call site's class and style land, rather than\n // the dialog inside it, which takes the rest of the props.\n ref={ref} {...mergeStatefulStyles({\n className: \"x1n1nwrg x1u6grsq x1ioi8j8 xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 x19dwuzr xuz63mn x1lym3mf xkducg2 xrzall9 xb0nsol xjslfuv x1gbqego x1cfajip xjg5lhu x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr x1a148e8 x1mrd0q x5ubeis x1lodr2j x1uhho1l x19b5e0v xg4bq00 xg4jtgg xsds98l xixxii4\"\n }, {\n className,\n style\n })}>\n <Dialog {...props} {...stylex.props(overlay.modalDialog)}>\n {children}\n </Dialog>\n </Modal>\n </ModalOverlay>;\n}\n\n/**\n * The sheet's actions. The panel is pinned to the window's bottom edge in\n * both presentations, so they sit on that edge, and a toast rises clear of\n * them while the sheet is open rather than lying over its buttons. A side\n * sheet's are included: the toast is centred in the window, and on any\n * window narrower than about 1376px its 576 reach into the sheet's 400.\n */\nfunction SheetFooter({\n ref: callerRef,\n ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n const ref = useRef<HTMLDivElement>(null);\n useHoldBottomEdge(ref, true);\n // The footer measures itself through its own ref, and the call site's\n // lands on the same element.\n const merged = useMemo(() => mergeRefs(ref, callerRef ?? undefined), [callerRef]);\n return <div {...props} ref={merged} {...mergeStyles({\n className: \"x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x1nhvcw1 x1qafhyn x8i8c5o x1clyivc xg0ps1x\"\n }, props)} />;\n}\n\n/**\n * The bottom sheets page's drag handle: a short bar above the sheet's\n * content, saying the panel is a bottom sheet. Place it first inside\n * `Sheet.Content`; above the medium breakpoint the panel is a side sheet and\n * this draws nothing.\n *\n * It is decoration rather than a control, and hidden from assistive\n * technology. Material's own handle drags a sheet between a collapsed and an\n * expanded height and dismisses it from the collapsed one; this panel has\n * one height and cannot be dragged, so a control that only looked draggable\n * would promise what it cannot do. Closing is already the scrim, Escape, and\n * any button given `slot=\"close\"`.\n */\nfunction SheetHandle(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n return <div aria-hidden=\"true\" {...props} {...mergeStyles({\n className: \"x6s0dn4 x9f619 x1s85apg x37i4ze x2lah0s xl56j7k x1xg6qyv\"\n }, props)}>\n <span className=\"x1ccu2yh xwvh9j7 xqu0tyb x1dkaolv x9f619 x1g12otp x1td3qas\" />\n </div>;\n}\nfunction SheetHeader(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n return <div {...props} {...mergeStyles({\n className: \"x6s0dn4 x1j6faob x1q0q8m5 xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib x1cmllll xg0ps1x\"\n }, props)} />;\n}\n\n/**\n * Names the sheet. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a sheet without one announces\n * itself as an unnamed dialog.\n */\nfunction SheetTitle(props: RefAttributes<HTMLHeadingElement> & SheetTitleProps) {\n return <Heading slot=\"title\" {...props} {...mergeStyles({\n className: \"x9f619 x1w5n3ug xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp\"\n }, props)} />;\n}\nSheet.Body = SheetBody;\nSheet.Content = SheetContent;\nSheet.Footer = SheetFooter;\nSheet.Handle = SheetHandle;\nSheet.Header = SheetHeader;\nSheet.Title = SheetTitle;\n\n// The dialog's own props, plus the scrim's open state and dismissal settings\n// and the panel's styling. A call site has no reason to know there are three\n// elements: `className` and `style` reach the panel, which is the one worth\n// restyling and positioning, the open state and the dismissal settings reach\n// the scrim, and everything else lands on the dialog.\n//\n// `isDismissable` is declared here rather than picked with its siblings,\n// since the picked one carries React Aria's documentation, whose default is\n// the reverse of this component's.\ntype SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'defaultOpen' | 'isKeyboardDismissDisabled' | 'isOpen' | 'onOpenChange'> & {\n /** A function may compute the class from the panel's render state. */\n className?: ClassNameOrFunction<ModalRenderProps>;\n /**\n * Where to portal the panel and scrim. Defaults to the container of the\n * `ThemeScope` around it, which keeps the sheet on that scope's tokens, or\n * to the end of `<body>` where there is none. A subtree themed through the\n * `themeScope` class has no container of its own, so point this inside it,\n * or the sheet renders outside and keeps the page's tokens.\n */\n container?: Element;\n /**\n * Whether a press on the scrim, outside the panel, closes the sheet.\n * `true` here where React Aria's own default is `false`, since a sheet\n * that ignores a tap outside it reads as stuck. Escape is\n * `isKeyboardDismissDisabled`'s, and this says nothing about it.\n * @default true\n */\n isDismissable?: boolean;\n /** A function may compute the style from the panel's render state. */\n style?: StyleOrFunction<ModalRenderProps>;\n};\ntype SheetTitleProps = HeadingProps;\nexport type { SheetContentProps, SheetProps, SheetTitleProps };\nexport { SheetBody, SheetContent, SheetFooter, SheetHandle, SheetHeader, SheetTitle };\nexport default Sheet;"],"mappings":"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"}
@@ -114,6 +114,10 @@ declare class SnackbarQueue {
114
114
  *
115
115
  * The call site's `className` and `style` land on that region, which is the
116
116
  * element a layout positions.
117
+ *
118
+ * While a full-screen `Dialog` or a `Sheet` with a footer is open, the region
119
+ * rises to sit above those actions rather than over them, since they share
120
+ * the bottom edge of the window and the snackbar is drawn above both.
117
121
  */
118
122
  declare function Snackbar({ closeLabel, queue, ...props }: RefAttributes<HTMLDivElement> & SnackbarProps): import("react").JSX.Element;
119
123
  declare namespace Snackbar {
@@ -3,12 +3,18 @@ import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
3
3
  import { mergeStatefulStyles } from "../../styles/merge.js";
4
4
  import { CloseGlyph } from "../../glyphs/index.js";
5
5
  import { useRipple } from "../../hooks/useRipple.js";
6
+ import { useBottomEdgeClearance } from "../../hooks/useBottomEdge.js";
6
7
  import { c } from "react/compiler-runtime";
7
8
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
8
9
  import { Button, Text, UNSTABLE_Toast, UNSTABLE_ToastContent, UNSTABLE_ToastQueue, UNSTABLE_ToastRegion } from "react-aria-components";
9
10
  //#region src/components/snackbar/index.tsx
10
11
  const MESSAGE_MS = 5e3;
11
12
  const UNTIL_CLOSED = 0;
13
+ const _temp = {
14
+ krVfgx: "xiicpxy",
15
+ kGO01o: "xqf7pud",
16
+ "$$css": true
17
+ };
12
18
  const styles = {
13
19
  action: {
14
20
  kMwMTN: "x16bex6i",
@@ -57,7 +63,26 @@ const styles = {
57
63
  controlPressed: {
58
64
  kWkggS: "xsykwg8",
59
65
  $$css: true
60
- }
66
+ },
67
+ region: {
68
+ kGNEyG: "x6s0dn4",
69
+ kB7OPa: "x9f619",
70
+ k1xSpc: "x78zum5",
71
+ kXwgrk: "xdt5ytf",
72
+ kOIVth: "x126z3so",
73
+ krVfgx: "x1ey2m1c",
74
+ kkqhue: "x17y0mx6",
75
+ k3XXqK: "x1t137rt",
76
+ kGO01o: "x1u7mh7p",
77
+ kLKAdn: "xi7mcox",
78
+ kE3dHu: "xbpsoft",
79
+ kpe85a: "xq5vm52",
80
+ kfzvcC: "x47corl",
81
+ kVAEAm: "xixxii4",
82
+ kY2c9j: "x1bk8fjm",
83
+ $$css: true
84
+ },
85
+ risen: (clearance) => [_temp, { "--x-insetBlockEnd": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(clearance) }]
61
86
  };
62
87
  /**
63
88
  * The queue a snackbar is shown from. Make one where the app can reach it —
@@ -135,61 +160,41 @@ function controlClassName(style) {
135
160
  *
136
161
  * The call site's `className` and `style` land on that region, which is the
137
162
  * element a layout positions.
163
+ *
164
+ * While a full-screen `Dialog` or a `Sheet` with a footer is open, the region
165
+ * rises to sit above those actions rather than over them, since they share
166
+ * the bottom edge of the window and the snackbar is drawn above both.
138
167
  */
139
168
  function Snackbar(t0) {
140
- const $ = c(16);
141
- let T0;
142
- let closeLabel;
143
- let queue;
144
- let t1;
145
- let t2;
169
+ const $ = c(9);
170
+ const { closeLabel, queue, ...props$1 } = t0;
171
+ const clearance = useBottomEdgeClearance();
172
+ const T0 = UNSTABLE_ToastRegion;
173
+ const t1 = queue.rac;
174
+ const t2 = mergeStatefulStyles(props(styles.region, clearance > 0 && styles.risen(`${clearance}px`)), props$1);
146
175
  let t3;
147
- if ($[0] !== t0) {
148
- const { closeLabel: t4, queue: t5, ...props } = t0;
149
- closeLabel = t4;
150
- queue = t5;
151
- T0 = UNSTABLE_ToastRegion;
152
- t1 = queue.rac;
153
- t2 = props;
154
- t3 = mergeStatefulStyles({ className: "x6s0dn4 x9f619 x78zum5 xdt5ytf x126z3so x1ey2m1c x17y0mx6 x1t137rt x1u7mh7p xi7mcox xbpsoft xq5vm52 x47corl xixxii4 x1bk8fjm" }, props);
155
- $[0] = t0;
156
- $[1] = T0;
157
- $[2] = closeLabel;
158
- $[3] = queue;
159
- $[4] = t1;
160
- $[5] = t2;
161
- $[6] = t3;
162
- } else {
163
- T0 = $[1];
164
- closeLabel = $[2];
165
- queue = $[3];
166
- t1 = $[4];
167
- t2 = $[5];
168
- t3 = $[6];
169
- }
176
+ if ($[0] !== closeLabel || $[1] !== queue) {
177
+ t3 = snackbarContent(queue, closeLabel);
178
+ $[0] = closeLabel;
179
+ $[1] = queue;
180
+ $[2] = t3;
181
+ } else t3 = $[2];
170
182
  let t4;
171
- if ($[7] !== closeLabel || $[8] !== queue) {
172
- t4 = snackbarContent(queue, closeLabel);
173
- $[7] = closeLabel;
174
- $[8] = queue;
175
- $[9] = t4;
176
- } else t4 = $[9];
177
- let t5;
178
- if ($[10] !== T0 || $[11] !== t1 || $[12] !== t2 || $[13] !== t3 || $[14] !== t4) {
179
- t5 = /* @__PURE__ */ jsx(T0, {
183
+ if ($[3] !== T0 || $[4] !== props$1 || $[5] !== queue.rac || $[6] !== t2 || $[7] !== t3) {
184
+ t4 = /* @__PURE__ */ jsx(T0, {
180
185
  queue: t1,
186
+ ...props$1,
181
187
  ...t2,
182
- ...t3,
183
- children: t4
188
+ children: t3
184
189
  });
185
- $[10] = T0;
186
- $[11] = t1;
187
- $[12] = t2;
188
- $[13] = t3;
189
- $[14] = t4;
190
- $[15] = t5;
191
- } else t5 = $[15];
192
- return t5;
190
+ $[3] = T0;
191
+ $[4] = props$1;
192
+ $[5] = queue.rac;
193
+ $[6] = t2;
194
+ $[7] = t3;
195
+ $[8] = t4;
196
+ } else t4 = $[8];
197
+ return t4;
193
198
  }
194
199
  /**
195
200
  * One of the snackbar's two controls. React Aria's `Button` rather than the
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","FocusableElement","ToastRegionProps","RACToastRegionProps","ToastRegionRenderProps","stylex","Button","RACButton","UNSTABLE_Toast","RACToast","UNSTABLE_ToastContent","RACToastContent","UNSTABLE_ToastQueue","RACToastQueue","UNSTABLE_ToastRegion","RACToastRegion","Text","CloseGlyph","useRipple","layers","mergeStatefulStyles","colors","motion","radii","shadows","sizing","spacing","stateLayerOpacity","typography","MESSAGE_MS","UNTIL_CLOSED","WIDE","rise","FORCED_COLORS","styles","action","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","kg3NbH","$$css","close","kZKoxP","kzqmXN","kmVPX3","control","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kVQacm","kVAEAm","controlFocused","controlHovered","controlPressed","SnackbarAction","label","onPress","SnackbarMessage","message","showCloseButton","SnackbarOptions","onClose","timeout","SnackbarProps","className","closeLabel","queue","SnackbarQueue","style","Omit","SnackbarToastItem","rac","constructor","maxVisibleToasts","add","options","undefined","clear","key","actionPress","closeToast","controlClassName","StyleXStyles","state","isFocusVisible","isHovered","isPressed","props","Snackbar","t0","$","T0","t1","t2","t3","t4","t5","snackbarContent","SnackbarButton","children","ripple","handlers","surface","toast","SnackbarControls","SnackbarToast","content","Queue","SnackbarRegionRenderProps","RACToastQueue","stylex.props","_c","RACToastRegion","RACButton","RACToastContent","RACToast"],"sources":["../../../src/components/snackbar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { FocusableElement, ToastRegionProps as RACToastRegionProps, ToastRegionRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, UNSTABLE_Toast as RACToast, UNSTABLE_ToastContent as RACToastContent, UNSTABLE_ToastQueue as RACToastQueue, UNSTABLE_ToastRegion as RACToastRegion, Text } from 'react-aria-components';\nimport { CloseGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport '../../styles/layers.stylex';\nimport { layers } from '../../styles/layers.stylex';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The snackbar page's brief message at the bottom of the screen, with an\n// optional action beside it and an optional close button after that. The\n// page's container is the inverse surface at a 4dp corner and elevation 3,\n// its supporting text is body-medium in inverse on surface, its action label\n// is inverse primary, and its close icon takes the supporting text's colour.\n// The measurements are the page's too: 8dp of margin from the edges of the\n// screen, 8dp of padding inside the container with another 8dp either side\n// of the message, 14dp above and below on a single line, and between 320 and\n// 576dp wide above the page's 600dp breakpoint — full width below it.\n//\n// One at a time. The page shows a single snackbar and replaces it rather\n// than stacking, which is `maxVisibleToasts: 1` on the queue.\n//\n// React Aria's toast is the behaviour: the region is a landmark that holds\n// the message, moves focus into it for a keyboard, and pauses every timer\n// while it is hovered or focused, so a message never expires while it is\n// being read or acted on.\n//\n// Three things are decided here rather than taken from React Aria or from\n// the page.\n//\n// **The queue is ours, not React Aria's.** React Aria's toast is still\n// `UNSTABLE_`, and `SnackbarQueue` is what keeps that name out of a\n// consumer's code — an upstream rename is this file rather than every call\n// site. It wraps their queue, defaults it to one visible message, and takes\n// the message and its options as one call.\n//\n// **The action and the close button are drawn here rather than through\n// Button and IconButton.** The page colours them inverse primary and inverse\n// on surface, which no variant of either carries, and a colour pushed in\n// from outside through `className` is the merge hazard AGENTS.md describes:\n// StyleX decides between two atomic classes by their order in the compiled\n// stylesheet, not by the order they are applied. Both are React Aria's\n// `Button` with the same ripple and the same state layers, over\n// `currentColor` so each takes the colour the snackbar gives it.\n//\n// **There is no `container` prop.** Every other overlay here takes one,\n// because React Aria's `Modal` and `Popover` accept a portal container, and\n// `src/components/portal-container.test.tsx` is what keeps that true.\n// Its toast region does not: it reads a portal provider that\n// `react-aria-components` does not export, so the region always lands at the\n// end of `<body>`. An app that scopes its StyleX theme to a subtree has to\n// put the theme on `:root` for the snackbar to be drawn in it.\n\n// How long a message is shown when the call site names no `timeout`. The\n// specs page gives no duration, so these come from the snackbar's guidelines\n// and accessibility pages.\n//\n// A message alone leaves after five seconds. The pages allow four to ten, and\n// React Aria's toast docs set five as the least a reader should be given.\n//\n// A message with an action stays until the action is taken or something\n// closes it, as the pages ask of every actionable snackbar. No timer can know\n// how long a reader needs to act: a screen reader user hears the message\n// first and has to reach the region before the action is any use, and the\n// pause while the region is hovered or focused only starts once they have.\n// Android's snackbar can keep shorter defaults because the platform lengthens\n// them from each user's accessibility settings, and the web has no such\n// setting to read.\nconst MESSAGE_MS = 5000;\nconst UNTIL_CLOSED = 0;\n\n// Below the page's 600dp breakpoint the snackbar runs the width of the\n// screen; above it, it takes between 320 and 576.\nconst WIDE = '@media (min-width: 600px)';\n\n// The page's own is a fade. It rises a little as it arrives too, which is\n// what the page draws and what says the message came from the edge of the\n// screen rather than appearing over it.\nconst rise = \"x15b941j-B\";\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n action: {\n kMwMTN: \"x16bex6i\",\n kMv6JI: \"xkknnkr\",\n kGuDYH: \"x14zspaw\",\n k63SB2: \"x1v9cpvo\",\n kb6lSQ: \"x155f00i\",\n kLWn49: \"x1lz68p4\",\n k8WAf4: \"x1cmllll\",\n kg3NbH: \"x18fpw6u\",\n $$css: true\n },\n close: {\n kZKoxP: \"xbg5kjn\",\n kMwMTN: \"x1girmi0\",\n kzqmXN: \"xoqf9c6\",\n kmVPX3: \"x1717udv\",\n $$css: true\n },\n control: {\n kGNEyG: \"x6s0dn4\",\n kWkggS: \"xjbqb8w\",\n kaIpWk: \"x1dkaolv\",\n kMzoRj: \"xc342km\",\n kB7OPa: \"x9f619\",\n kkrTdU: \"x1ypdohk\",\n k1xSpc: \"x3nfvp2\",\n kmuXW: \"x2lah0s\",\n kjj79g: \"xl56j7k\",\n kjBf7l: \"x14ytart\",\n kInvED: \"x1hl8ikr\",\n k3XXqK: \"x9v5kkp x1t137rt\",\n kMeerF: \"x1de99jn\",\n kVQacm: \"xb3r6kr\",\n kVAEAm: \"x1n2onr6\",\n $$css: true\n },\n controlFocused: {\n kWkggS: \"x1mbb5iu\",\n $$css: true\n },\n controlHovered: {\n kWkggS: \"x930l3l\",\n $$css: true\n },\n controlPressed: {\n kWkggS: \"xsykwg8\",\n $$css: true\n }\n};\ntype SnackbarAction = {\n /** What the action says. The page gives it a single word where it can. */\n label: string;\n /** Run when the action is pressed, just before the snackbar closes. */\n onPress: () => void;\n};\n\n/** What a snackbar carries: its message, and what may sit beside it. */\ntype SnackbarMessage = {\n action: SnackbarAction | undefined;\n message: ReactNode;\n showCloseButton: boolean;\n};\ntype SnackbarOptions = {\n /**\n * A single action shown after the message. Pressing it runs `onPress` and\n * closes the snackbar, which is what the page draws.\n */\n action?: SnackbarAction;\n /** Run when the snackbar closes, however it was closed. */\n onClose?: () => void;\n /**\n * Whether a close button is shown at the end. The page draws one for a\n * message a reader may want out of the way before it expires.\n *\n * Named for what it draws rather than `isDismissable`, which on `Sheet`,\n * `Dialog` and React Aria's modals is whether a press outside them closes\n * them — a snackbar has no outside to press.\n * @default false\n */\n showCloseButton?: boolean;\n /**\n * How long the snackbar is shown, in milliseconds. Defaults to five seconds\n * for a message alone. A message with an action defaults to `0` and stays\n * until the action is taken or something closes it, as Material Design asks\n * of an actionable snackbar, since a reader may need longer to reach the\n * action than any timer allows. The timer is paused while the region is\n * hovered or focused, so a message never expires while it is being read.\n *\n * `0` is the page's indefinite length: the snackbar stays until something\n * closes it. Give one of those an action or `showCloseButton`, or there is no\n * way to be rid of it.\n */\n timeout?: number;\n};\ntype SnackbarProps = {\n /**\n * What a screen reader calls the region holding the snackbar. Left out,\n * React Aria names the region itself: a count of the messages it holds, in\n * the reader's own locale — \"1 notification.\" in English, and one of some\n * thirty languages otherwise. Pass a name only to replace that, and pass a\n * translated one, since whatever is passed is read as written.\n */\n 'aria-label'?: string;\n /** A function may compute the class from the region's render state. */\n className?: RACToastRegionProps<SnackbarMessage>['className'];\n /**\n * What a screen reader calls the button that dismisses a snackbar. It sits\n * here rather than on a message's own options because it does not vary by\n * message, so putting it there would make every `add` call repeat it. Left\n * out, React Aria names it in the reader's locale — \"Close\" in English.\n */\n closeLabel?: string;\n /** The queue the region shows messages from. */\n queue: SnackbarQueue;\n /** A function may compute the style from the region's render state. */\n style?: RACToastRegionProps<SnackbarMessage>['style'];\n} & Omit<RACToastRegionProps<SnackbarMessage>, 'children' | 'className' | 'queue' | 'style'>;\n\n// One entry of the queue, as React Aria hands it to the region's render\n// function. Taken from its render state rather than imported from\n// `react-stately`, which this package does not depend on.\ntype SnackbarToastItem = ToastRegionRenderProps<SnackbarMessage>['visibleToasts'][number];\n\n/**\n * The queue a snackbar is shown from. Make one where the app can reach it —\n * a module of its own is the usual place — mount `Snackbar` once with it,\n * and call `add` from anywhere.\n *\n * ```ts\n * const messages = new Snackbar.Queue()\n * messages.add('Label', { action: { label: 'Undo', onPress: undo } })\n * ```\n *\n * It wraps React Aria's toast queue rather than exposing it, which is what\n * keeps that API's `UNSTABLE_` name out of a consumer's code.\n */\nclass SnackbarQueue {\n /**\n * React Aria's queue, which `Snackbar` subscribes to. Not part of the\n * package's API — read it and an upstream release may break the call site.\n */\n readonly rac: RACToastQueue<SnackbarMessage>;\n constructor() {\n // One at a time, which is what the page shows: a second message replaces\n // the first rather than stacking under it.\n this.rac = new RACToastQueue<SnackbarMessage>({\n maxVisibleToasts: 1\n });\n }\n\n /**\n * Shows a message, and returns the key that closes it.\n */\n add(message: ReactNode, options: SnackbarOptions = {}) {\n const {\n action,\n onClose,\n showCloseButton = false,\n timeout\n } = options;\n return this.rac.add({\n action,\n message,\n showCloseButton\n }, {\n onClose,\n timeout: timeout ?? (action === undefined ? MESSAGE_MS : UNTIL_CLOSED)\n });\n }\n\n /** Closes every snackbar, shown or waiting. */\n clear() {\n this.rac.clear();\n }\n\n /** Closes one snackbar, by the key `add` returned. */\n close(key: string) {\n this.rac.close(key);\n }\n}\n\n// The three handlers the snackbar hands to something below it, each built by\n// a call rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\nfunction actionPress(action: SnackbarAction, close: () => void) {\n return () => {\n action.onPress();\n close();\n };\n}\nfunction closeToast(queue: SnackbarQueue, key: string) {\n return () => {\n queue.close(key);\n };\n}\n\n// A control's classes, from its own render state — see `controlFocused`.\nfunction controlClassName(style: stylex.StyleXStyles) {\n return (state: {\n isFocusVisible: boolean;\n isHovered: boolean;\n isPressed: boolean;\n }) => stylex.props(styles.control, style, state.isHovered && styles.controlHovered, state.isFocusVisible && styles.controlFocused, state.isPressed && styles.controlPressed).className ?? '';\n}\n\n/**\n * A brief message at the bottom of the screen, with an optional action. Mount\n * one of these with a `Snackbar.Queue`, and call the queue's `add` to show a\n * message from anywhere.\n *\n * ```tsx\n * const messages = new Snackbar.Queue()\n *\n * <Snackbar queue={messages} />\n * ```\n *\n * The region is portalled to the end of `<body>` and renders nothing while\n * the queue is empty. It is one region rather than one per message, so mount\n * it once, near the root.\n *\n * The call site's `className` and `style` land on that region, which is the\n * element a layout positions.\n */\nfunction Snackbar({\n closeLabel,\n queue,\n ...props\n}: RefAttributes<HTMLDivElement> & SnackbarProps) {\n return <RACToastRegion<SnackbarMessage> queue={queue.rac} {...props} {...mergeStatefulStyles({\n className: \"x6s0dn4 x9f619 x78zum5 xdt5ytf x126z3so x1ey2m1c x17y0mx6 x1t137rt x1u7mh7p xi7mcox xbpsoft xq5vm52 x47corl xixxii4 x1bk8fjm\"\n }, props)}>\n {snackbarContent(queue, closeLabel)}\n </RACToastRegion>;\n}\n\n/**\n * One of the snackbar's two controls. React Aria's `Button` rather than the\n * library's, for the colour reason in the comment at the top of this file;\n * the ripple and the state layers are the same ones every other control\n * here draws, over `currentColor`.\n */\nfunction SnackbarButton({\n children,\n style,\n ...props\n}: {\n 'aria-label'?: string;\n children: ReactNode;\n onPress?: () => void;\n slot?: string;\n style: stylex.StyleXStyles;\n}) {\n const ripple = useRipple<FocusableElement>();\n return <RACButton {...ripple.handlers} {...props} className={controlClassName(style)}>\n {children}\n {ripple.surface}\n </RACButton>;\n}\nfunction snackbarContent(queue: SnackbarQueue, closeLabel: string | undefined) {\n return ({\n toast\n }: {\n toast: SnackbarToastItem;\n }) => <SnackbarToast close={closeToast(queue, toast.key)} closeLabel={closeLabel} toast={toast} />;\n}\n\n/** The action, the close button, or nothing, after the message. */\nfunction SnackbarControls({\n action,\n close,\n closeLabel,\n showCloseButton\n}: {\n action: SnackbarAction | undefined;\n close: () => void;\n closeLabel: string | undefined;\n showCloseButton: boolean;\n}) {\n return <>\n {action === undefined ? null : <SnackbarButton onPress={actionPress(action, close)} style={styles.action}>\n {action.label}\n </SnackbarButton>}\n {showCloseButton ? <SnackbarButton aria-label={closeLabel} slot=\"close\" style={styles.close}>\n <CloseGlyph className=\"xxk0z11 xvy4d1p\" />\n </SnackbarButton> : null}\n </>;\n}\n\n/** One snackbar: its message, then whatever sits after it. */\nfunction SnackbarToast({\n close,\n closeLabel,\n toast\n}: {\n close: () => void;\n closeLabel: string | undefined;\n toast: SnackbarToastItem;\n}) {\n const {\n action,\n message,\n showCloseButton\n } = toast.content;\n return <RACToast toast={toast} className=\"x6s0dn4 x1n1nwrg x1u6grsq x1dwmuk9 x16dv9tl x1c5gpgi x1w1tqly x1tfhd1 xx61lck x13rsnn2 x1udv5rz x9f619 x78zum5 xh8yej3 x1x1rfll xlx31pv x1dry9sr xeuugli xuq8xha x1ulcdur x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd xn60lsn x67bb7w\">\n <RACToastContent className=\"x9f619 x1girmi0 x1iyjqo2 xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh xz158ff xeuugli xxlmvz2\">\n <Text slot=\"title\">{message}</Text>\n </RACToastContent>\n <SnackbarControls action={action} close={close} closeLabel={closeLabel} showCloseButton={showCloseButton} />\n </RACToast>;\n}\nSnackbar.Queue = SnackbarQueue;\n\n// The queue is reached as `Snackbar.Queue` rather than exported beside the\n// component: this file would otherwise export something that is not a\n// component, which is what turns fast refresh off for it.\nexport type { SnackbarAction, SnackbarMessage, SnackbarOptions, SnackbarProps, SnackbarQueue, ToastRegionRenderProps as SnackbarRegionRenderProps };\nexport default Snackbar;"],"mappings":";;;;;;;;;AAyEA,MAAMgC,aAAa;AACnB,MAAMC,eAAe;AAgBrB,MAAMI,SAAS;CACbC,QAAQ;EACNC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,OAAO;EACLC,QAAQ;EACRV,QAAQ;EACRW,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACAK,SAAS;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRpB,OAAO;CACT;CACAqB,gBAAgB;EACdd,QAAQ;EACRP,OAAO;CACT;CACAsB,gBAAgB;EACdf,QAAQ;EACRP,OAAO;CACT;CACAuB,gBAAgB;EACdhB,QAAQ;EACRP,OAAO;CACT;AACF;;;;;;;;;;;;;;AAwFA,IAAMqC,gBAAN,MAAoB;;;;;CAKlB;CACAK,cAAc;EAGZ,KAAKD,MAAM,IAAIxE,oBAA+B,EAC5C0E,kBAAkB,EACpB,CAAC;CACH;;;;CAKAC,IAAIhB,SAAoBiB,UAA2B,CAAC,GAAG;EACrD,MAAM,EACJtD,QACAwC,SACAF,kBAAkB,OAClBG,YACEa;EACJ,OAAO,KAAKJ,IAAIG,IAAI;GAClBrD;GACAqC;GACAC;EACF,GAAG;GACDE;GACAC,SAASA,YAAYzC,WAAWuD,KAAAA,IAAY7D,aAAaC;EAC3D,CAAC;CACH;;CAGA6D,QAAQ;EACN,KAAKN,IAAIM,MAAM;CACjB;;CAGA9C,MAAM+C,KAAa;EACjB,KAAKP,IAAIxC,MAAM+C,GAAG;CACpB;AACF;AAMA,SAASC,YAAY1D,QAAwBU,OAAmB;CAC9D,aAAa;EACXV,OAAOmC,QAAQ;EACfzB,MAAM;CACR;AACF;AACA,SAASiD,WAAWd,OAAsBY,KAAa;CACrD,aAAa;EACXZ,MAAMnC,MAAM+C,GAAG;CACjB;AACF;AAGA,SAASG,iBAAiBb,OAA4B;CACpD,QAAQe,UAIF5F,MAAa6B,OAAOe,SAASiC,OAAOe,MAAME,aAAajE,OAAOgC,gBAAgB+B,MAAMC,kBAAkBhE,OAAO+B,gBAAgBgC,MAAMG,aAAalE,OAAOiC,cAAc,CAAC,CAACW,aAAa;AAC5L;;;;;;;;;;;;;;;;;;;AAoBA,SAAAwB,SAAAC,IAAA;CAAA,MAAAC,IAAA1G,EAAA,EAAA;CAAA,IAAA2G;CAAA,IAAA1B;CAAA,IAAAC;CAAA,IAAA0B;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAJ,EAAA,OAAAD,IAAA;EAAkB,MAAA,EAAAxB,YAAA8B,IAAA7B,OAAA8B,IAAA,GAAAT,UAAAE;EAAAxB,aAAA8B;EAAA7B,QAAA8B;EAKRL,KAAA1F;EAAuC2F,KAAA1B,MAAKK;EAAUgB,KAAAA;EAAWO,KAAAxF,oBAAoB,EAAA0D,WAChF,+HACb,GAAGuB,KAAK;EAACG,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAzB;EAAAyB,EAAA,KAAAxB;EAAAwB,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAA;EAAAH,KAAAD,EAAA;EAAAzB,aAAAyB,EAAA;EAAAxB,QAAAwB,EAAA;EAAAE,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAzB,cAAAyB,EAAA,OAAAxB,OAAA;EACJ6B,KAAAE,gBAAgB/B,OAAOD,UAAU;EAACyB,EAAA,KAAAzB;EAAAyB,EAAA,KAAAxB;EAAAwB,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,QAAAC,MAAAD,EAAA,QAAAE,MAAAF,EAAA,QAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,IAAA;EAHhCC,KAAA,oBAAC,IAAD;GAAwC,OAAAJ;GAAS,GAAML;GAAK,GAAMO;GAGpEC,UAAAA;EAHiB,CAAA;EAIHL,EAAA,MAAAC;EAAAD,EAAA,MAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,OAJZM;AAIY;;;;;;;AASrB,SAAAE,eAAAT,IAAA;CAAA,MAAAC,IAAA1G,EAAA,EAAA;CAAA,IAAAmH;CAAA,IAAAZ;CAAA,IAAAnB;CAAA,IAAAsB,EAAA,OAAAD,IAAA;EAAwB,CAAA,CAAAU,UAAA/B,OAAA,GAAAmB,SAAAE;EAUvBC,EAAA,KAAAD;EAAAC,EAAA,KAAAS;EAAAT,EAAA,KAAAH;EAAAG,EAAA,KAAAtB;CAAA,OAAA;EAAA+B,WAAAT,EAAA;EAAAH,QAAAG,EAAA;EAAAtB,QAAAsB,EAAA;CAAA;CACC,MAAAU,SAAehG,UAA4B;CACrB,MAAAwF,KAAAQ,OAAMC;CAAS,IAAAR;CAAA,IAAAH,EAAA,OAAAtB,OAAA;EAAwByB,KAAAZ,iBAAiBb,KAAK;EAACsB,EAAA,KAAAtB;EAAAsB,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAAS,YAAAT,EAAA,OAAAH,SAAAG,EAAA,OAAAU,OAAAC,YAAAX,EAAA,OAAAU,OAAAE,WAAAZ,EAAA,QAAAG,IAAA;EAA7EC,KAAA,qBAACmB,QAAD;GAAU,GAAKrB;GAAe,GAAML;GAAkB,WAAAM;GAAtD,UAAA,CACFM,UACAC,OAAME,OAFM;;EAGHZ,EAAA,KAAAS;EAAAT,EAAA,KAAAH;EAAAG,EAAA,KAAAU,OAAAC;EAAAX,EAAA,KAAAU,OAAAE;EAAAZ,EAAA,MAAAG;EAAAH,EAAA,MAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,OAHPI;AAGO;AAEhB,SAASG,gBAAgB/B,OAAsBD,YAAgC;CAC7E,QAAQ,EACNsC,YAGI,oBAAC,eAAD;EAAe,OAAOvB,WAAWd,OAAOqC,MAAMzB,GAAG;EAAeb;EAAmBsC;CAAM,CAAA;AACjG;;AAGA,SAAAC,iBAAAf,IAAA;CAAA,MAAAC,IAAA1G,EAAA,CAAA;CAA0B,MAAA,EAAAqC,QAAAU,OAAAkC,YAAAN,oBAAA8B;CAUzB,IAAAG;CAAA,IAAAF,EAAA,OAAArE,UAAAqE,EAAA,OAAA3D,OAAA;EAEM6D,KAAAvE,WAAWuD,KAAAA,IAAX,OAA8B,oBAAC,gBAAD;GAAyB,SAAAG,YAAY1D,QAAQU,KAAK;GAAU,OAAAX,OAAMC;GAC5FA,UAAAA,OAAMkC;EADmC,CAAA;EAE3BmC,EAAA,KAAArE;EAAAqE,EAAA,KAAA3D;EAAA2D,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAG;CAAA,IAAAH,EAAA,OAAAzB,cAAAyB,EAAA,OAAA/B,iBAAA;EAClBkC,KAAAlC,kBAAkB,oBAAC,gBAAD;GAA4BM,cAAAA;GAAiB,MAAA;GAAe,OAAA7C,OAAMW;GACjF,UAAA,oBAAC,YAAD,EAAsB,WAAA,kBAAiB,CAAA;EADT,CAAA,IAAjC;EAEyB2D,EAAA,KAAAzB;EAAAyB,EAAA,KAAA/B;EAAA+B,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAAE,MAAAF,EAAA,OAAAG,IAAA;EANvBC,KAAA,qBAAA,UAAA,EAAA,UAAA,CACFF,IAGAC,EAEyB,EAAA,CAAA;EACzBH,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,OAPEI;AAOF;;AAIP,SAAAW,cAAAhB,IAAA;CAAA,MAAAC,IAAA1G,EAAA,EAAA;CAAuB,MAAA,EAAA+C,OAAAkC,YAAAsC,UAAAd;CASrB,MAAA,EAAApE,QAAAqC,SAAAC,oBAII4C,MAAKG;CAAS,IAAAd;CAAA,IAAAF,EAAA,OAAAhC,SAAA;EAEdkC,KAAA,oBAACsB,uBAAD;GAA2B,WAAA;GACzB,UAAA,oBAAC,MAAD;IAAW,MAAA;IAASxD,UAAAA;GAAf,CAAA;EADS,CAAA;EAEEgC,EAAA,KAAAhC;EAAAgC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAG;CAAA,IAAAH,EAAA,OAAArE,UAAAqE,EAAA,OAAA3D,SAAA2D,EAAA,OAAAzB,cAAAyB,EAAA,OAAA/B,iBAAA;EAClBkC,KAAA,oBAAC,kBAAD;GAA0BxE;GAAeU;GAAmBkC;GAA6BN;EAAe,CAAA;EAAI+B,EAAA,KAAArE;EAAAqE,EAAA,KAAA3D;EAAA2D,EAAA,KAAAzB;EAAAyB,EAAA,KAAA/B;EAAA+B,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,OAAAa,OAAA;EAJzGT,KAAA,qBAACqB,gBAAD;GAAiBZ;GAAiB,WAAA;GAAlC,UAAA,CACHX,IAGAC,EAJY;;EAKHH,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAa;EAAAb,EAAA,MAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,OALNI;AAKM;AAEfN,SAASmB,QAAQxC"}
1
+ {"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","FocusableElement","ToastRegionProps","RACToastRegionProps","ToastRegionRenderProps","stylex","Button","RACButton","UNSTABLE_Toast","RACToast","UNSTABLE_ToastContent","RACToastContent","UNSTABLE_ToastQueue","RACToastQueue","UNSTABLE_ToastRegion","RACToastRegion","Text","CloseGlyph","useBottomEdgeClearance","useRipple","layers","mergeStatefulStyles","colors","motion","radii","shadows","sizing","spacing","stateLayerOpacity","typography","MESSAGE_MS","UNTIL_CLOSED","WIDE","rise","FORCED_COLORS","_temp","krVfgx","kGO01o","styles","action","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","kg3NbH","$$css","close","kZKoxP","kzqmXN","kmVPX3","control","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kVQacm","kVAEAm","controlFocused","controlHovered","controlPressed","region","kXwgrk","kOIVth","kkqhue","kLKAdn","kE3dHu","kpe85a","kfzvcC","kY2c9j","risen","clearance","val","undefined","SnackbarAction","label","onPress","SnackbarMessage","message","showCloseButton","SnackbarOptions","onClose","timeout","SnackbarProps","className","closeLabel","queue","SnackbarQueue","style","Omit","SnackbarToastItem","rac","constructor","maxVisibleToasts","add","options","clear","key","actionPress","closeToast","controlClassName","StyleXStyles","state","isFocusVisible","isHovered","isPressed","props","Snackbar","t0","$","T0","t1","t2","t3","snackbarContent","t4","SnackbarButton","children","ripple","handlers","surface","toast","SnackbarControls","SnackbarToast","content","Queue","SnackbarRegionRenderProps","RACToastQueue","stylex.props","_c","props","RACToastRegion","RACButton","RACToastContent","RACToast"],"sources":["../../../src/components/snackbar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { FocusableElement, ToastRegionProps as RACToastRegionProps, ToastRegionRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, UNSTABLE_Toast as RACToast, UNSTABLE_ToastContent as RACToastContent, UNSTABLE_ToastQueue as RACToastQueue, UNSTABLE_ToastRegion as RACToastRegion, Text } from 'react-aria-components';\nimport { CloseGlyph } from '../../glyphs';\nimport { useBottomEdgeClearance } from '../../hooks/useBottomEdge';\nimport { useRipple } from '../../hooks/useRipple';\nimport '../../styles/layers.stylex';\nimport { layers } from '../../styles/layers.stylex';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The snackbar page's brief message at the bottom of the screen, with an\n// optional action beside it and an optional close button after that. The\n// page's container is the inverse surface at a 4dp corner and elevation 3,\n// its supporting text is body-medium in inverse on surface, its action label\n// is inverse primary, and its close icon takes the supporting text's colour.\n// The measurements are the page's too: 8dp of margin from the edges of the\n// screen, 8dp of padding inside the container with another 8dp either side\n// of the message, 14dp above and below on a single line, and between 320 and\n// 576dp wide above the page's 600dp breakpoint — full width below it.\n//\n// One at a time. The page shows a single snackbar and replaces it rather\n// than stacking, which is `maxVisibleToasts: 1` on the queue.\n//\n// React Aria's toast is the behaviour: the region is a landmark that holds\n// the message, moves focus into it for a keyboard, and pauses every timer\n// while it is hovered or focused, so a message never expires while it is\n// being read or acted on.\n//\n// Three things are decided here rather than taken from React Aria or from\n// the page.\n//\n// **The queue is ours, not React Aria's.** React Aria's toast is still\n// `UNSTABLE_`, and `SnackbarQueue` is what keeps that name out of a\n// consumer's code — an upstream rename is this file rather than every call\n// site. It wraps their queue, defaults it to one visible message, and takes\n// the message and its options as one call.\n//\n// **The action and the close button are drawn here rather than through\n// Button and IconButton.** The page colours them inverse primary and inverse\n// on surface, which no variant of either carries, and a colour pushed in\n// from outside through `className` is the merge hazard AGENTS.md describes:\n// StyleX decides between two atomic classes by their order in the compiled\n// stylesheet, not by the order they are applied. Both are React Aria's\n// `Button` with the same ripple and the same state layers, over\n// `currentColor` so each takes the colour the snackbar gives it.\n//\n// **There is no `container` prop.** Every other overlay here takes one,\n// because React Aria's `Modal` and `Popover` accept a portal container, and\n// `src/components/portal-container.test.tsx` is what keeps that true.\n// Its toast region does not: it reads a portal provider that\n// `react-aria-components` does not export, so the region always lands at the\n// end of `<body>`. An app that scopes its StyleX theme to a subtree has to\n// put the theme on `:root` for the snackbar to be drawn in it.\n\n// How long a message is shown when the call site names no `timeout`. The\n// specs page gives no duration, so these come from the snackbar's guidelines\n// and accessibility pages.\n//\n// A message alone leaves after five seconds. The pages allow four to ten, and\n// React Aria's toast docs set five as the least a reader should be given.\n//\n// A message with an action stays until the action is taken or something\n// closes it, as the pages ask of every actionable snackbar. No timer can know\n// how long a reader needs to act: a screen reader user hears the message\n// first and has to reach the region before the action is any use, and the\n// pause while the region is hovered or focused only starts once they have.\n// Android's snackbar can keep shorter defaults because the platform lengthens\n// them from each user's accessibility settings, and the web has no such\n// setting to read.\nconst MESSAGE_MS = 5000;\nconst UNTIL_CLOSED = 0;\n\n// Below the page's 600dp breakpoint the snackbar runs the width of the\n// screen; above it, it takes between 320 and 576.\nconst WIDE = '@media (min-width: 600px)';\n\n// The page's own is a fade. It rises a little as it arrives too, which is\n// what the page draws and what says the message came from the edge of the\n// screen rather than appearing over it.\nconst rise = \"x15b941j-B\";\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst _temp = {\n krVfgx: \"xiicpxy\",\n kGO01o: \"xqf7pud\",\n \"$$css\": true\n};\nconst styles = {\n action: {\n kMwMTN: \"x16bex6i\",\n kMv6JI: \"xkknnkr\",\n kGuDYH: \"x14zspaw\",\n k63SB2: \"x1v9cpvo\",\n kb6lSQ: \"x155f00i\",\n kLWn49: \"x1lz68p4\",\n k8WAf4: \"x1cmllll\",\n kg3NbH: \"x18fpw6u\",\n $$css: true\n },\n close: {\n kZKoxP: \"xbg5kjn\",\n kMwMTN: \"x1girmi0\",\n kzqmXN: \"xoqf9c6\",\n kmVPX3: \"x1717udv\",\n $$css: true\n },\n control: {\n kGNEyG: \"x6s0dn4\",\n kWkggS: \"xjbqb8w\",\n kaIpWk: \"x1dkaolv\",\n kMzoRj: \"xc342km\",\n kB7OPa: \"x9f619\",\n kkrTdU: \"x1ypdohk\",\n k1xSpc: \"x3nfvp2\",\n kmuXW: \"x2lah0s\",\n kjj79g: \"xl56j7k\",\n kjBf7l: \"x14ytart\",\n kInvED: \"x1hl8ikr\",\n k3XXqK: \"x9v5kkp x1t137rt\",\n kMeerF: \"x1de99jn\",\n kVQacm: \"xb3r6kr\",\n kVAEAm: \"x1n2onr6\",\n $$css: true\n },\n controlFocused: {\n kWkggS: \"x1mbb5iu\",\n $$css: true\n },\n controlHovered: {\n kWkggS: \"x930l3l\",\n $$css: true\n },\n controlPressed: {\n kWkggS: \"xsykwg8\",\n $$css: true\n },\n region: {\n kGNEyG: \"x6s0dn4\",\n kB7OPa: \"x9f619\",\n k1xSpc: \"x78zum5\",\n kXwgrk: \"xdt5ytf\",\n kOIVth: \"x126z3so\",\n krVfgx: \"x1ey2m1c\",\n kkqhue: \"x17y0mx6\",\n k3XXqK: \"x1t137rt\",\n kGO01o: \"x1u7mh7p\",\n kLKAdn: \"xi7mcox\",\n kE3dHu: \"xbpsoft\",\n kpe85a: \"xq5vm52\",\n kfzvcC: \"x47corl\",\n kVAEAm: \"xixxii4\",\n kY2c9j: \"x1bk8fjm\",\n $$css: true\n },\n risen: (clearance: string) => [_temp, {\n \"--x-insetBlockEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(clearance)\n }]\n};\ntype SnackbarAction = {\n /** What the action says. The page gives it a single word where it can. */\n label: string;\n /** Run when the action is pressed, just before the snackbar closes. */\n onPress: () => void;\n};\n\n/** What a snackbar carries: its message, and what may sit beside it. */\ntype SnackbarMessage = {\n action: SnackbarAction | undefined;\n message: ReactNode;\n showCloseButton: boolean;\n};\ntype SnackbarOptions = {\n /**\n * A single action shown after the message. Pressing it runs `onPress` and\n * closes the snackbar, which is what the page draws.\n */\n action?: SnackbarAction;\n /** Run when the snackbar closes, however it was closed. */\n onClose?: () => void;\n /**\n * Whether a close button is shown at the end. The page draws one for a\n * message a reader may want out of the way before it expires.\n *\n * Named for what it draws rather than `isDismissable`, which on `Sheet`,\n * `Dialog` and React Aria's modals is whether a press outside them closes\n * them — a snackbar has no outside to press.\n * @default false\n */\n showCloseButton?: boolean;\n /**\n * How long the snackbar is shown, in milliseconds. Defaults to five seconds\n * for a message alone. A message with an action defaults to `0` and stays\n * until the action is taken or something closes it, as Material Design asks\n * of an actionable snackbar, since a reader may need longer to reach the\n * action than any timer allows. The timer is paused while the region is\n * hovered or focused, so a message never expires while it is being read.\n *\n * `0` is the page's indefinite length: the snackbar stays until something\n * closes it. Give one of those an action or `showCloseButton`, or there is no\n * way to be rid of it.\n */\n timeout?: number;\n};\ntype SnackbarProps = {\n /**\n * What a screen reader calls the region holding the snackbar. Left out,\n * React Aria names the region itself: a count of the messages it holds, in\n * the reader's own locale — \"1 notification.\" in English, and one of some\n * thirty languages otherwise. Pass a name only to replace that, and pass a\n * translated one, since whatever is passed is read as written.\n */\n 'aria-label'?: string;\n /** A function may compute the class from the region's render state. */\n className?: RACToastRegionProps<SnackbarMessage>['className'];\n /**\n * What a screen reader calls the button that dismisses a snackbar. It sits\n * here rather than on a message's own options because it does not vary by\n * message, so putting it there would make every `add` call repeat it. Left\n * out, React Aria names it in the reader's locale — \"Close\" in English.\n */\n closeLabel?: string;\n /** The queue the region shows messages from. */\n queue: SnackbarQueue;\n /** A function may compute the style from the region's render state. */\n style?: RACToastRegionProps<SnackbarMessage>['style'];\n} & Omit<RACToastRegionProps<SnackbarMessage>, 'children' | 'className' | 'queue' | 'style'>;\n\n// One entry of the queue, as React Aria hands it to the region's render\n// function. Taken from its render state rather than imported from\n// `react-stately`, which this package does not depend on.\ntype SnackbarToastItem = ToastRegionRenderProps<SnackbarMessage>['visibleToasts'][number];\n\n/**\n * The queue a snackbar is shown from. Make one where the app can reach it —\n * a module of its own is the usual place — mount `Snackbar` once with it,\n * and call `add` from anywhere.\n *\n * ```ts\n * const messages = new Snackbar.Queue()\n * messages.add('Label', { action: { label: 'Undo', onPress: undo } })\n * ```\n *\n * It wraps React Aria's toast queue rather than exposing it, which is what\n * keeps that API's `UNSTABLE_` name out of a consumer's code.\n */\nclass SnackbarQueue {\n /**\n * React Aria's queue, which `Snackbar` subscribes to. Not part of the\n * package's API — read it and an upstream release may break the call site.\n */\n readonly rac: RACToastQueue<SnackbarMessage>;\n constructor() {\n // One at a time, which is what the page shows: a second message replaces\n // the first rather than stacking under it.\n this.rac = new RACToastQueue<SnackbarMessage>({\n maxVisibleToasts: 1\n });\n }\n\n /**\n * Shows a message, and returns the key that closes it.\n */\n add(message: ReactNode, options: SnackbarOptions = {}) {\n const {\n action,\n onClose,\n showCloseButton = false,\n timeout\n } = options;\n return this.rac.add({\n action,\n message,\n showCloseButton\n }, {\n onClose,\n timeout: timeout ?? (action === undefined ? MESSAGE_MS : UNTIL_CLOSED)\n });\n }\n\n /** Closes every snackbar, shown or waiting. */\n clear() {\n this.rac.clear();\n }\n\n /** Closes one snackbar, by the key `add` returned. */\n close(key: string) {\n this.rac.close(key);\n }\n}\n\n// The three handlers the snackbar hands to something below it, each built by\n// a call rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\nfunction actionPress(action: SnackbarAction, close: () => void) {\n return () => {\n action.onPress();\n close();\n };\n}\nfunction closeToast(queue: SnackbarQueue, key: string) {\n return () => {\n queue.close(key);\n };\n}\n\n// A control's classes, from its own render state — see `controlFocused`.\nfunction controlClassName(style: stylex.StyleXStyles) {\n return (state: {\n isFocusVisible: boolean;\n isHovered: boolean;\n isPressed: boolean;\n }) => stylex.props(styles.control, style, state.isHovered && styles.controlHovered, state.isFocusVisible && styles.controlFocused, state.isPressed && styles.controlPressed).className ?? '';\n}\n\n/**\n * A brief message at the bottom of the screen, with an optional action. Mount\n * one of these with a `Snackbar.Queue`, and call the queue's `add` to show a\n * message from anywhere.\n *\n * ```tsx\n * const messages = new Snackbar.Queue()\n *\n * <Snackbar queue={messages} />\n * ```\n *\n * The region is portalled to the end of `<body>` and renders nothing while\n * the queue is empty. It is one region rather than one per message, so mount\n * it once, near the root.\n *\n * The call site's `className` and `style` land on that region, which is the\n * element a layout positions.\n *\n * While a full-screen `Dialog` or a `Sheet` with a footer is open, the region\n * rises to sit above those actions rather than over them, since they share\n * the bottom edge of the window and the snackbar is drawn above both.\n */\nfunction Snackbar({\n closeLabel,\n queue,\n ...props\n}: RefAttributes<HTMLDivElement> & SnackbarProps) {\n const clearance = useBottomEdgeClearance();\n return <RACToastRegion<SnackbarMessage> queue={queue.rac} {...props} {...mergeStatefulStyles(stylex.props(styles.region, clearance > 0 && styles.risen(`${clearance}px`)), props)}>\n {snackbarContent(queue, closeLabel)}\n </RACToastRegion>;\n}\n\n/**\n * One of the snackbar's two controls. React Aria's `Button` rather than the\n * library's, for the colour reason in the comment at the top of this file;\n * the ripple and the state layers are the same ones every other control\n * here draws, over `currentColor`.\n */\nfunction SnackbarButton({\n children,\n style,\n ...props\n}: {\n 'aria-label'?: string;\n children: ReactNode;\n onPress?: () => void;\n slot?: string;\n style: stylex.StyleXStyles;\n}) {\n const ripple = useRipple<FocusableElement>();\n return <RACButton {...ripple.handlers} {...props} className={controlClassName(style)}>\n {children}\n {ripple.surface}\n </RACButton>;\n}\nfunction snackbarContent(queue: SnackbarQueue, closeLabel: string | undefined) {\n return ({\n toast\n }: {\n toast: SnackbarToastItem;\n }) => <SnackbarToast close={closeToast(queue, toast.key)} closeLabel={closeLabel} toast={toast} />;\n}\n\n/** The action, the close button, or nothing, after the message. */\nfunction SnackbarControls({\n action,\n close,\n closeLabel,\n showCloseButton\n}: {\n action: SnackbarAction | undefined;\n close: () => void;\n closeLabel: string | undefined;\n showCloseButton: boolean;\n}) {\n return <>\n {action === undefined ? null : <SnackbarButton onPress={actionPress(action, close)} style={styles.action}>\n {action.label}\n </SnackbarButton>}\n {showCloseButton ? <SnackbarButton aria-label={closeLabel} slot=\"close\" style={styles.close}>\n <CloseGlyph className=\"xxk0z11 xvy4d1p\" />\n </SnackbarButton> : null}\n </>;\n}\n\n/** One snackbar: its message, then whatever sits after it. */\nfunction SnackbarToast({\n close,\n closeLabel,\n toast\n}: {\n close: () => void;\n closeLabel: string | undefined;\n toast: SnackbarToastItem;\n}) {\n const {\n action,\n message,\n showCloseButton\n } = toast.content;\n return <RACToast toast={toast} className=\"x6s0dn4 x1n1nwrg x1u6grsq x1dwmuk9 x16dv9tl x1c5gpgi x1w1tqly x1tfhd1 xx61lck x13rsnn2 x1udv5rz x9f619 x78zum5 xh8yej3 x1x1rfll xlx31pv x1dry9sr xeuugli xuq8xha x1ulcdur x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd xn60lsn x67bb7w\">\n <RACToastContent className=\"x9f619 x1girmi0 x1iyjqo2 xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh xz158ff xeuugli xxlmvz2\">\n <Text slot=\"title\">{message}</Text>\n </RACToastContent>\n <SnackbarControls action={action} close={close} closeLabel={closeLabel} showCloseButton={showCloseButton} />\n </RACToast>;\n}\nSnackbar.Queue = SnackbarQueue;\n\n// The queue is reached as `Snackbar.Queue` rather than exported beside the\n// component: this file would otherwise export something that is not a\n// component, which is what turns fast refresh off for it.\nexport type { SnackbarAction, SnackbarMessage, SnackbarOptions, SnackbarProps, SnackbarQueue, ToastRegionRenderProps as SnackbarRegionRenderProps };\nexport default Snackbar;"],"mappings":"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"}