@kanso-labs/kanso-ui 0.40.9 → 0.42.0

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 (53) hide show
  1. package/dist/color-scheme.d.ts +6 -0
  2. package/dist/color-scheme.js +9 -2
  3. package/dist/color-scheme.js.map +1 -1
  4. package/dist/components/app-bar/index.d.ts +16 -6
  5. package/dist/components/app-bar/index.js +54 -48
  6. package/dist/components/app-bar/index.js.map +1 -1
  7. package/dist/components/avatar/index.d.ts +28 -2
  8. package/dist/components/avatar/index.js +3 -0
  9. package/dist/components/avatar/index.js.map +1 -1
  10. package/dist/components/card/index.d.ts +12 -1
  11. package/dist/components/card/index.js +136 -66
  12. package/dist/components/card/index.js.map +1 -1
  13. package/dist/components/dialog/index.js +3 -2
  14. package/dist/components/dialog/index.js.map +1 -1
  15. package/dist/components/popover/index.js +3 -2
  16. package/dist/components/popover/index.js.map +1 -1
  17. package/dist/components/product-icon/index.d.ts +18 -0
  18. package/dist/components/product-icon/index.js +3 -0
  19. package/dist/components/product-icon/index.js.map +1 -1
  20. package/dist/components/segmented-button/index.d.ts +3 -0
  21. package/dist/components/segmented-button/index.js +131 -65
  22. package/dist/components/segmented-button/index.js.map +1 -1
  23. package/dist/components/separator/index.js +2 -2
  24. package/dist/components/separator/index.js.map +1 -1
  25. package/dist/components/sheet/index.js +17 -16
  26. package/dist/components/sheet/index.js.map +1 -1
  27. package/dist/components/snackbar/index.d.ts +10 -3
  28. package/dist/components/snackbar/index.js +32 -12
  29. package/dist/components/snackbar/index.js.map +1 -1
  30. package/dist/components/switch/index.js +12 -3
  31. package/dist/components/switch/index.js.map +1 -1
  32. package/dist/components/toolbar/index.d.ts +3 -2
  33. package/dist/components/toolbar/index.js +3 -2
  34. package/dist/components/toolbar/index.js.map +1 -1
  35. package/dist/field/index.js +75 -48
  36. package/dist/field/index.js.map +1 -1
  37. package/dist/glyphs/index.js +19 -1
  38. package/dist/glyphs/index.js.map +1 -1
  39. package/dist/hooks/useImageLoadingStatus.js +56 -45
  40. package/dist/hooks/useImageLoadingStatus.js.map +1 -1
  41. package/dist/mark/index.js +126 -86
  42. package/dist/mark/index.js.map +1 -1
  43. package/dist/mark/styles.js +14 -0
  44. package/dist/mark/styles.js.map +1 -1
  45. package/dist/overlay/index.js +24 -0
  46. package/dist/overlay/index.js.map +1 -0
  47. package/dist/styles/scheme.js +19 -0
  48. package/dist/styles/scheme.js.map +1 -0
  49. package/dist/styles.css +94 -26
  50. package/dist/theme-scope.d.ts +5 -2
  51. package/dist/theme-scope.js +2 -1
  52. package/dist/theme-scope.js.map +1 -1
  53. package/package.json +2 -2
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","RefObject","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","PopoverRenderProps","StyleOrFunction","TextProps","stylex","createContext","useCallback","useContext","useEffect","useId","useMemo","useRef","useState","useInteractOutside","ButtonContext","DEFAULT_SLOT","Dialog","DialogContext","DialogTrigger","Heading","HeadingContext","OverlayTriggerStateContext","PreviewTrigger","Popover","RACPopover","PopoverContext","RACPopoverContext","Text","TextContext","useSlottedContext","OverlayAlign","OverlaySide","mergeRefs","focus","mergeStatefulStyles","mergeStyles","overlay","placementOf","popupOrigin","colors","spacing","typography","DEFAULT_SIDE_OFFSET","styles","content","kGO01o","kLKAdn","kg3NbH","$$css","description","kB7OPa","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kogj98","md","ks0D6T","sm","title","DEFAULT_HOVER_DELAY","DEFAULT_HOVER_CLOSE_DELAY","PopoverAlign","PopoverSide","PopoverSize","modal","size","DescriptionContext","id","register","TitleContext","TEXT_SLOTS","slots","PopoverProps","Omit","children","closeDelay","delay","trigger","PopoverTrigger","PanelDialog","t0","$","labelledBy","onPressWithin","props","slot","t1","t2","t3","t4","render","_render","t5","t6","ref","state","triggerOf","pressed","undefined","titleId","titled","setTitled","Symbol","for","registerTitle","level","headings","onPress","close","t7","t8","buttons","t10","t9","element","current","contains","document","activeElement","preventScroll","t11","t12","t13","t14","popupDialog","ring","t15","t16","t17","t18","context","PopoverContent","alignOffset","className","container","style","triggerRef","align","side","sideOffset","handed","panel","merged","pressedWithin","markPressWithin","own","triggers","fromTrigger","isOutsideTrigger","isOpen","event","target","Element","isDisabled","onInteractOutside","onInteractOutsideStart","descriptionId","described","setDescribed","t19","popup","placement","t20","t21","t22","PopoverDescription","PopoverTitle","Content","Description","Title","PopoverContentProps","PopoverDescriptionProps","PopoverTitleProps","PopoverContext","_c","props","stylex.props","Popover","RACPopoverContext","RACPopover"],"sources":["../../../src/components/popover/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes, RefObject } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, PopoverRenderProps, StyleOrFunction, TextProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';\nimport { useInteractOutside } from 'react-aria';\nimport { ButtonContext, DEFAULT_SLOT, Dialog, DialogContext, DialogTrigger, Heading, HeadingContext, OverlayTriggerStateContext, PreviewTrigger, Popover as RACPopover, PopoverContext as RACPopoverContext, Text, TextContext, useSlottedContext } from 'react-aria-components';\nimport type { OverlayAlign, OverlaySide } from '../../styles/overlay';\nimport { mergeRefs } from '../../render/ref';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay, placementOf, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The gap between the anchor and the panel, matching `spacing.sm`'s default.\n// A number rather than the token, because React Aria computes the position in\n// JavaScript and so cannot read a CSS custom property — this is the one place\n// in the component where a step of the spacing scale is spelled out. React\n// Aria's own default is 8 as well, but the value is this component's decision\n// rather than an inherited one.\nconst DEFAULT_SIDE_OFFSET = 8;\n\n// The surface, its entry and the dialog's focus ring are the overlay module's,\n// shared with every anchored overlay; what is here is Popover's own — its\n// inset, its two widths, and the type of its title and description.\n//\n// Popover has no page of its own, so the inset and the type follow the rich\n// tooltip, the nearest thing the Material Design pages draw: a plain rounded\n// panel offset from its anchor, with no caret drawn between the two, holding\n// a subhead over supporting text.\n//\n// React Aria's popover is two elements — the positioned panel and the dialog\n// inside it — so the styles are split the same way: the surface, `content`\n// and a size on the panel, the dialog style on the element that carries the\n// role.\nconst styles = {\n content: {\n kGO01o: \"xqf7pud\",\n kLKAdn: \"x6gmt8y\",\n kg3NbH: \"x790zyz\",\n $$css: true\n },\n description: {\n kB7OPa: \"x9f619\",\n kMwMTN: \"x1w5n3ug\",\n kMv6JI: \"xpo2rfv\",\n kGuDYH: \"x193rfdd\",\n k63SB2: \"x1hews6w\",\n kb6lSQ: \"xn43zvd\",\n kLWn49: \"xv61bfh\",\n kogj98: \"x1ghz6dp\",\n $$css: true\n },\n md: {\n ks0D6T: \"x10u2fgw\",\n $$css: true\n },\n sm: {\n ks0D6T: \"xjjheoa\",\n $$css: true\n },\n title: {\n kB7OPa: \"x9f619\",\n kMwMTN: \"x1w5n3ug\",\n kMv6JI: \"xrgwony\",\n kGuDYH: \"x12s497w\",\n k63SB2: \"x1szcwkt\",\n kb6lSQ: \"xo803ec\",\n kLWn49: \"xyl1r0q\",\n kogj98: \"x1ghz6dp\",\n $$css: true\n }\n};\n\n// How long a pointer rests on the trigger before a hovered popover opens,\n// and how long it has to leave before it closes. React Aria's own defaults,\n// spelled out because they are the whole feel of a hover trigger and worth\n// finding in the component rather than in a changelog.\nconst DEFAULT_HOVER_DELAY = 600;\nconst DEFAULT_HOVER_CLOSE_DELAY = 200;\n\n// The overlay module's, since which side a surface opens on is the same\n// question for every anchored overlay. Aliased rather than re-declared so\n// the names a call site imports stay this component's.\ntype PopoverAlign = OverlayAlign;\ntype PopoverSide = OverlaySide;\ntype PopoverSize = 'md' | 'sm';\n\n// `size` and `modal` are declared on the root, where a reader expects to set\n// the shape of the whole popover, but it is `Popover.Content` that has to\n// apply them. Through context rather than making the call site repeat them —\n// the same arrangement Sheet uses, and worth keeping identical between the\n// two panels a consumer is most likely to reach for in the same afternoon.\nconst PopoverContext = createContext<{\n modal: boolean;\n size: PopoverSize;\n}>({\n modal: false,\n size: 'md'\n});\n\n// React Aria points a dialog's `aria-describedby` at its description slot\n// only for an alert dialog, on the grounds that an ordinary dialog's content\n// is read anyway. A popover's description names what the panel is for, so it\n// is pointed at here: the content hands the description an id, and the\n// description reports that it is mounted, since an `aria-describedby` with\n// nothing at the other end is an invalid reference rather than a harmless one.\nconst DescriptionContext = createContext<{\n id: string;\n register: () => () => void;\n}>({\n id: '',\n register: () => () => {}\n});\n\n// The same for the title, which the non-modal panel names itself by — see\n// PanelDialog. React Aria's own Dialog finds its title by looking for it;\n// the panel here is told it is there.\nconst TitleContext = createContext<() => () => void>(() => () => {});\n\n// The text slot the description fills, with the default beside it so a\n// plain `Text` still renders. Hoisted, since it never changes.\nconst TEXT_SLOTS = {\n slots: {\n [DEFAULT_SLOT]: {},\n description: {}\n }\n};\ntype PopoverProps = Omit<DialogTriggerProps, 'children'> & {\n children?: ReactNode;\n /**\n * How long the pointer has to leave a hovered popover before it closes, in\n * milliseconds. Ignored by a pressed one.\n * @default 200\n */\n closeDelay?: number;\n /**\n * How long the pointer has to rest on the trigger before a hovered popover\n * opens, in milliseconds. Ignored by a pressed one.\n * @default 600\n */\n delay?: number;\n /**\n * Blocks the page behind the panel while it is open, as a dialog would.\n * Off by default: a popover leaves the page interactive, which is the\n * difference from `Sheet`.\n * @default false\n */\n modal?: boolean;\n /**\n * Panel width: `sm` caps at 240px, `md` at 320px. Either way the panel is\n * only as wide as its contents, and never wider than the viewport.\n * @default 'md'\n */\n size?: PopoverSize;\n /**\n * What opens the panel: a press, or a pointer resting on the trigger.\n * `hover` is the tooltips page's rich tooltip — it opens on hover, focus\n * or a long press, and stays open while the pointer is inside it, so the\n * panel's own buttons and links can be reached.\n * @default 'press'\n */\n trigger?: PopoverTrigger;\n};\ntype PopoverTrigger = 'hover' | 'press';\n\n/**\n * The element that carries the dialog role in a non-modal popover: what\n * React Aria's `Dialog` gives a modal one — the role, the name from the\n * title, the description, and the close slot — without the two things that\n * make `Dialog` a modal's.\n *\n * `Dialog` moves focus into itself as it mounts, whatever opened it, and\n * holds focus inside the overlay until it closes. A hover popover therefore\n * took focus from wherever the reader was typing the moment a pointer\n * rested on its trigger, and Tab in an open popover went round its own\n * controls forever, though the page behind a non-modal popover is meant to\n * stay in reach. Here a pressed popover still takes focus as it opens, since\n * a press asked for the panel, but a hovered one leaves it where it is, and\n * Tab past the panel's last control carries on from the trigger in the\n * page. React Aria's popover sees a dialog inside it and so adds no role or\n * focus handling of its own.\n */\nfunction PanelDialog({\n 'aria-labelledby': labelledBy,\n children,\n id,\n onPressWithin,\n // React Aria's render prop is the one part of a dialog's props this\n // element cannot honour, being an element of its own rather than React\n // Aria's; left out rather than spread onto the DOM.\n render: _render,\n slot,\n ...props\n}: Omit<PopoverContentProps, 'align' | 'alignOffset' | 'className' | 'container' | 'side' | 'sideOffset' | 'style' | 'triggerRef'> & {\n /**\n * Called when a press starts anywhere inside the panel in React's tree,\n * which takes in what an overlay opened from the panel draws elsewhere in\n * the document — see `PopoverContent`.\n */\n onPressWithin: () => void;\n}) {\n const ref = useRef<HTMLElement>(null);\n const state = useContext(OverlayTriggerStateContext);\n // What the trigger hands its overlay: the id the trigger's\n // `aria-controls` points at, and the trigger itself as the name of a\n // panel with no title. A hover trigger hands nothing, and is a hover\n // trigger for exactly that reason.\n const trigger = triggerOf(useContext(DialogContext));\n const pressed = trigger !== undefined;\n const titleId = useId();\n const [titled, setTitled] = useState(false);\n const registerTitle = useCallback(() => {\n setTitled(true);\n return () => {\n setTitled(false);\n };\n }, []);\n const headings = useMemo(() => ({\n slots: {\n [DEFAULT_SLOT]: {},\n title: {\n id: titleId,\n level: 2\n }\n }\n }), [titleId]);\n const buttons = useMemo(() => ({\n slots: {\n close: {\n onPress: () => {\n state?.close();\n }\n },\n [DEFAULT_SLOT]: {}\n }\n }), [state]);\n useEffect(() => {\n const element = ref.current;\n if (pressed && element !== null && !element.contains(document.activeElement)) {\n element.focus({\n preventScroll: true\n });\n }\n }, [pressed]);\n return (\n // A section with the role, as React Aria's own dialog is: a `<dialog>`\n // element brings the browser's own positioning, border, padding and top\n // layer, all of which the panel around it already decides.\n <section {...props} aria-labelledby={labelledBy ?? (titled ? titleId : trigger?.labelledBy)} id={id ?? trigger?.id} onPointerDownCapture={onPressWithin} ref={ref}\n // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- a `<dialog>` element would bring the browser's own positioning and top layer, which the panel around it already decides\n role=\"dialog\" slot={slot ?? undefined} tabIndex={-1} {...stylex.props(overlay.popupDialog, focus.ring)}>\n <HeadingContext value={headings}>\n <TextContext value={TEXT_SLOTS}>\n <ButtonContext value={buttons}>\n <TitleContext value={registerTitle}>{children}</TitleContext>\n </ButtonContext>\n </TextContext>\n </HeadingContext>\n </section>\n );\n}\n\n// React Aria names a placement by the side and, along it, the end the panel\n// is aligned to — `bottom start`, or `left top` on the sides where the axis\n// runs the other way.\n/**\n * A panel anchored to the control that opened it. 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 * Non-modal by design — the page behind stays scrollable and clickable, which\n * is the difference from `Sheet`. Pass `modal` to change that. Escape, a press\n * anywhere outside the panel and a button given `slot=\"close\"` close it, and\n * a press on its trigger toggles it. Inside a dialog, a press on the scrim\n * closes the popover first and the dialog on the next, as a menu does.\n *\n * Composed rather than configured by props, because a popover's contents are\n * arbitrary — the parts are `Popover.Content`, `Popover.Title`, and\n * `Popover.Description`. A `Button` or `IconButton` placed directly inside\n * `Popover` opens it, and one given `slot=\"close\"` inside the content closes\n * it; neither needs a part of its own.\n */\nfunction Popover({\n children,\n closeDelay = DEFAULT_HOVER_CLOSE_DELAY,\n delay = DEFAULT_HOVER_DELAY,\n modal = false,\n size = 'md',\n trigger = 'press',\n ...props\n}: PopoverProps) {\n // A hovered popover is React Aria's preview trigger, which is a different\n // element around the same parts rather than a mode of the pressed one: it\n // opens from hover, focus or a long press, and it is always non-modal,\n // since a panel that blocked the page while the pointer merely rested on\n // something would be a trap. `modal` is ignored there rather than\n // refused, so the content draws the non-modal panel whatever it says.\n const context = useMemo(() => ({\n modal: modal && trigger !== 'hover',\n size\n }), [modal, size, trigger]);\n if (trigger === 'hover') {\n return <PopoverContext value={context}>\n <PreviewTrigger closeDelay={closeDelay} delay={delay} {...props}>\n {children}\n </PreviewTrigger>\n </PopoverContext>;\n }\n return <PopoverContext value={context}>\n <DialogTrigger {...props}>{children}</DialogTrigger>\n </PopoverContext>;\n}\n\n/**\n * The panel itself. Everything the popover shows goes in here; the trigger\n * stays outside it, since the trigger lives in the page while this is\n * portalled out to the end of the body.\n *\n * Placement is React Aria's anchor positioning, so the panel flips to the\n * opposite side and shifts along the edge of the viewport on its own rather\n * than being clipped by it.\n */\nfunction PopoverContent({\n align = 'center',\n alignOffset,\n children,\n className,\n container,\n ref,\n side = 'bottom',\n sideOffset = DEFAULT_SIDE_OFFSET,\n style,\n triggerRef,\n ...props\n}: PopoverContentProps & RefAttributes<HTMLElement>) {\n const {\n modal,\n size\n } = useContext(PopoverContext);\n const state = useContext(OverlayTriggerStateContext);\n // The trigger React Aria hands its popover, for a content part given no\n // `triggerRef` of its own.\n const handed = useSlottedContext(RACPopoverContext)?.triggerRef;\n\n // A non-modal popover is one React Aria closes on blur alone: a press on\n // blank page left it open, and a press on its own trigger closed it as\n // focus left the panel and opened it again on the same press. Here a\n // press anywhere outside the panel closes it, and a press on the trigger\n // is left to the trigger, which toggles it.\n //\n // What an overlay opened from inside the panel draws — a select's list, a\n // menu — is portalled elsewhere in the document, so a press there is\n // outside the panel's element though it is within the panel's tree. React\n // carries the press up that tree, and the panel marks it as within before\n // the press ends; the outside press is read on its end, so the mark is\n // there to read. Each press outside clears it as it starts.\n const panel = useRef<HTMLElement>(null);\n const merged = useMemo(() => mergeRefs(panel, ref ?? undefined), [ref]);\n const pressedWithin = useRef(false);\n const markPressWithin = useCallback(() => {\n pressedWithin.current = true;\n }, []);\n // The two refs the trigger may come through, kept where a callback can\n // read them at the moment of a press rather than as dependencies, which a\n // ref is not.\n const triggers = useRef({\n handed,\n own: triggerRef\n });\n useEffect(() => {\n triggers.current = {\n handed,\n own: triggerRef\n };\n });\n const isOutsideTrigger = useCallback((element: Element) => {\n const {\n handed: fromTrigger,\n own\n } = triggers.current;\n const trigger = own?.current ?? fromTrigger?.current;\n return !(trigger?.contains(element) ?? false);\n }, []);\n useInteractOutside({\n isDisabled: modal || state === null || !state.isOpen,\n onInteractOutside: event => {\n if (pressedWithin.current) {\n pressedWithin.current = false;\n return;\n }\n if (event.target instanceof Element && !isOutsideTrigger(event.target)) {\n return;\n }\n state?.close();\n },\n onInteractOutsideStart: () => {\n pressedWithin.current = false;\n },\n ref: panel\n });\n const descriptionId = useId();\n const [described, setDescribed] = useState(false);\n const register = useCallback(() => {\n setDescribed(true);\n return () => {\n setDescribed(false);\n };\n }, []);\n const description = useMemo(() => ({\n id: descriptionId,\n register\n }), [descriptionId, register]);\n return <RACPopover crossOffset={alignOffset} isNonModal={!modal} offset={sideOffset} placement={placementOf(side, align)}\n // The surface, 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={merged}\n // Focus leaving for the trigger closes nothing: the trigger's own\n // press toggles the panel, and closing it first reopened it.\n shouldCloseOnInteractOutside={modal ? undefined : isOutsideTrigger} triggerRef={triggerRef}\n // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n UNSTABLE_portalContainer={container} {...mergeStatefulStyles((render: PopoverRenderProps) => stylex.props(overlay.popup, styles.content, styles[size], popupOrigin(render.placement)), {\n className,\n style\n })}>\n {modal ? <Dialog aria-describedby={described ? descriptionId : undefined} {...props} {...stylex.props(overlay.popupDialog, focus.ring)}>\n <DescriptionContext value={description}>\n {children}\n </DescriptionContext>\n </Dialog> : <PanelDialog aria-describedby={described ? descriptionId : undefined} onPressWithin={markPressWithin} {...props}>\n <DescriptionContext value={description}>\n {children}\n </DescriptionContext>\n </PanelDialog>}\n </RACPopover>;\n}\n\n/**\n * Supporting copy under the title. The panel's `aria-describedby` points at\n * it — see DescriptionContext for why that is this component's doing.\n */\nfunction PopoverDescription(props: PopoverDescriptionProps & RefAttributes<HTMLElement>) {\n const {\n id,\n register\n } = useContext(DescriptionContext);\n useEffect(() => register(), [register]);\n return <Text id={id} slot=\"description\" {...props} {...mergeStyles({\n className: \"x9f619 x1w5n3ug xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh x1ghz6dp\"\n }, props)} />;\n}\n\n/**\n * Names the popover. Rendered through React Aria's title slot, which is what\n * points the panel's `aria-labelledby` at it — a popover without one announces\n * itself unnamed.\n */\nfunction PopoverTitle(props: PopoverTitleProps & RefAttributes<HTMLHeadingElement>) {\n const register = useContext(TitleContext);\n useEffect(() => register(), [register]);\n return <Heading slot=\"title\" {...props} {...mergeStyles({\n className: \"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q x1ghz6dp\"\n }, props)} />;\n}\n\n/**\n * What a pressed trigger hands the overlay it opens: the id its\n * `aria-controls` points at, and its own id to name a panel with no title.\n * Read field by field, since the context's type also admits a slotted\n * value; a hover trigger hands nothing.\n */\nfunction triggerOf(context: unknown) {\n if (typeof context !== 'object' || context === null || 'slots' in context) {\n return undefined;\n }\n return {\n id: 'id' in context && typeof context.id === 'string' ? context.id : undefined,\n labelledBy: 'aria-labelledby' in context && typeof context['aria-labelledby'] === 'string' ? context['aria-labelledby'] : undefined\n };\n}\nPopover.Content = PopoverContent;\nPopover.Description = PopoverDescription;\nPopover.Title = PopoverTitle;\n\n// The dialog's own props, plus the four that place the panel and its\n// styling. Those belong to the positioned panel rather than to the dialog,\n// but a call site has no reason to know there are two elements — `className`\n// and `style` reach the panel, which is the one worth restyling, and\n// everything else lands on the dialog.\ntype PopoverContentProps = Omit<DialogProps, 'children' | 'className' | 'style'> & {\n /**\n * Where the panel sits along the side it opens on.\n * @default 'center'\n */\n align?: PopoverAlign;\n /** Moves the panel along that side, in pixels. */\n alignOffset?: number;\n children?: ReactNode;\n /** A function may compute the class from the panel's render state. */\n className?: ClassNameOrFunction<PopoverRenderProps>;\n /**\n * Where to portal the panel. Defaults to the container of the `ThemeScope`\n * around it, which keeps the popover on that scope's tokens, or to the end of\n * `<body>` where there is none. A subtree themed through the `themeScope`\n * class has no container of its own, so point this inside it, or the popover\n * renders outside and keeps the page's tokens.\n */\n container?: Element;\n /**\n * Which side of the trigger the panel opens on. It flips to the opposite\n * side when there is no room.\n * @default 'bottom'\n */\n side?: PopoverSide;\n /**\n * The gap between the trigger and the panel, in pixels.\n * @default 8\n */\n sideOffset?: number;\n /** A function may compute the style from the panel's render state. */\n style?: StyleOrFunction<PopoverRenderProps>;\n /**\n * An element to anchor the panel to other than the trigger that opened it.\n */\n triggerRef?: RefObject<Element | null>;\n};\ntype PopoverDescriptionProps = TextProps;\ntype PopoverTitleProps = HeadingProps;\nexport type { PopoverAlign, PopoverContentProps, PopoverDescriptionProps, PopoverProps, PopoverSide, PopoverSize, PopoverTitleProps, PopoverTrigger };\nexport { PopoverContent, PopoverDescription, PopoverTitle };\nexport default Popover;"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","RefObject","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","PopoverRenderProps","StyleOrFunction","TextProps","stylex","createContext","useCallback","useContext","useEffect","useId","useMemo","useRef","useState","useInteractOutside","ButtonContext","DEFAULT_SLOT","Dialog","DialogContext","DialogTrigger","Heading","HeadingContext","OverlayTriggerStateContext","PreviewTrigger","Popover","RACPopover","PopoverContext","RACPopoverContext","Text","TextContext","useSlottedContext","OverlayAlign","OverlaySide","OverlayScope","mergeRefs","focus","mergeStatefulStyles","mergeStyles","overlay","placementOf","popupOrigin","colors","spacing","typography","DEFAULT_SIDE_OFFSET","styles","content","kGO01o","kLKAdn","kg3NbH","$$css","description","kB7OPa","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kogj98","md","ks0D6T","sm","title","DEFAULT_HOVER_DELAY","DEFAULT_HOVER_CLOSE_DELAY","PopoverAlign","PopoverSide","PopoverSize","modal","size","DescriptionContext","id","register","TitleContext","TEXT_SLOTS","slots","PopoverProps","Omit","children","closeDelay","delay","trigger","PopoverTrigger","PanelDialog","t0","$","labelledBy","onPressWithin","props","slot","t1","t2","t3","t4","render","_render","t5","t6","ref","state","triggerOf","pressed","undefined","titleId","titled","setTitled","Symbol","for","registerTitle","level","headings","onPress","close","t7","t8","buttons","t10","t9","element","current","contains","document","activeElement","preventScroll","t11","t12","t13","t14","popupDialog","ring","t15","t16","t17","t18","context","PopoverContent","alignOffset","className","container","style","triggerRef","align","side","sideOffset","handed","panel","merged","pressedWithin","markPressWithin","own","triggers","fromTrigger","isOutsideTrigger","isOpen","event","target","Element","isDisabled","onInteractOutside","onInteractOutsideStart","descriptionId","described","setDescribed","t19","popup","placement","t20","t21","t22","PopoverDescription","PopoverTitle","Content","Description","Title","PopoverContentProps","PopoverDescriptionProps","PopoverTitleProps","PopoverContext","_c","props","stylex.props","Popover","RACPopoverContext","RACPopover"],"sources":["../../../src/components/popover/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes, RefObject } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, PopoverRenderProps, StyleOrFunction, TextProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';\nimport { useInteractOutside } from 'react-aria';\nimport { ButtonContext, DEFAULT_SLOT, Dialog, DialogContext, DialogTrigger, Heading, HeadingContext, OverlayTriggerStateContext, PreviewTrigger, Popover as RACPopover, PopoverContext as RACPopoverContext, Text, TextContext, useSlottedContext } from 'react-aria-components';\nimport type { OverlayAlign, OverlaySide } from '../../styles/overlay';\nimport { OverlayScope } from '../../overlay';\nimport { mergeRefs } from '../../render/ref';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay, placementOf, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The gap between the anchor and the panel, matching `spacing.sm`'s default.\n// A number rather than the token, because React Aria computes the position in\n// JavaScript and so cannot read a CSS custom property — this is the one place\n// in the component where a step of the spacing scale is spelled out. React\n// Aria's own default is 8 as well, but the value is this component's decision\n// rather than an inherited one.\nconst DEFAULT_SIDE_OFFSET = 8;\n\n// The surface, its entry and the dialog's focus ring are the overlay module's,\n// shared with every anchored overlay; what is here is Popover's own — its\n// inset, its two widths, and the type of its title and description.\n//\n// Popover has no page of its own, so the inset and the type follow the rich\n// tooltip, the nearest thing the Material Design pages draw: a plain rounded\n// panel offset from its anchor, with no caret drawn between the two, holding\n// a subhead over supporting text.\n//\n// React Aria's popover is two elements — the positioned panel and the dialog\n// inside it — so the styles are split the same way: the surface, `content`\n// and a size on the panel, the dialog style on the element that carries the\n// role.\nconst styles = {\n content: {\n kGO01o: \"xqf7pud\",\n kLKAdn: \"x6gmt8y\",\n kg3NbH: \"x790zyz\",\n $$css: true\n },\n description: {\n kB7OPa: \"x9f619\",\n kMwMTN: \"x1w5n3ug\",\n kMv6JI: \"xpo2rfv\",\n kGuDYH: \"x193rfdd\",\n k63SB2: \"x1hews6w\",\n kb6lSQ: \"xn43zvd\",\n kLWn49: \"xv61bfh\",\n kogj98: \"x1ghz6dp\",\n $$css: true\n },\n md: {\n ks0D6T: \"x10u2fgw\",\n $$css: true\n },\n sm: {\n ks0D6T: \"xjjheoa\",\n $$css: true\n },\n title: {\n kB7OPa: \"x9f619\",\n kMwMTN: \"x1w5n3ug\",\n kMv6JI: \"xrgwony\",\n kGuDYH: \"x12s497w\",\n k63SB2: \"x1szcwkt\",\n kb6lSQ: \"xo803ec\",\n kLWn49: \"xyl1r0q\",\n kogj98: \"x1ghz6dp\",\n $$css: true\n }\n};\n\n// How long a pointer rests on the trigger before a hovered popover opens,\n// and how long it has to leave before it closes. React Aria's own defaults,\n// spelled out because they are the whole feel of a hover trigger and worth\n// finding in the component rather than in a changelog.\nconst DEFAULT_HOVER_DELAY = 600;\nconst DEFAULT_HOVER_CLOSE_DELAY = 200;\n\n// The overlay module's, since which side a surface opens on is the same\n// question for every anchored overlay. Aliased rather than re-declared so\n// the names a call site imports stay this component's.\ntype PopoverAlign = OverlayAlign;\ntype PopoverSide = OverlaySide;\ntype PopoverSize = 'md' | 'sm';\n\n// `size` and `modal` are declared on the root, where a reader expects to set\n// the shape of the whole popover, but it is `Popover.Content` that has to\n// apply them. Through context rather than making the call site repeat them —\n// the same arrangement Sheet uses, and worth keeping identical between the\n// two panels a consumer is most likely to reach for in the same afternoon.\nconst PopoverContext = createContext<{\n modal: boolean;\n size: PopoverSize;\n}>({\n modal: false,\n size: 'md'\n});\n\n// React Aria points a dialog's `aria-describedby` at its description slot\n// only for an alert dialog, on the grounds that an ordinary dialog's content\n// is read anyway. A popover's description names what the panel is for, so it\n// is pointed at here: the content hands the description an id, and the\n// description reports that it is mounted, since an `aria-describedby` with\n// nothing at the other end is an invalid reference rather than a harmless one.\nconst DescriptionContext = createContext<{\n id: string;\n register: () => () => void;\n}>({\n id: '',\n register: () => () => {}\n});\n\n// The same for the title, which the non-modal panel names itself by — see\n// PanelDialog. React Aria's own Dialog finds its title by looking for it;\n// the panel here is told it is there.\nconst TitleContext = createContext<() => () => void>(() => () => {});\n\n// The text slot the description fills, with the default beside it so a\n// plain `Text` still renders. Hoisted, since it never changes.\nconst TEXT_SLOTS = {\n slots: {\n [DEFAULT_SLOT]: {},\n description: {}\n }\n};\ntype PopoverProps = Omit<DialogTriggerProps, 'children'> & {\n children?: ReactNode;\n /**\n * How long the pointer has to leave a hovered popover before it closes, in\n * milliseconds. Ignored by a pressed one.\n * @default 200\n */\n closeDelay?: number;\n /**\n * How long the pointer has to rest on the trigger before a hovered popover\n * opens, in milliseconds. Ignored by a pressed one.\n * @default 600\n */\n delay?: number;\n /**\n * Blocks the page behind the panel while it is open, as a dialog would.\n * Off by default: a popover leaves the page interactive, which is the\n * difference from `Sheet`.\n * @default false\n */\n modal?: boolean;\n /**\n * Panel width: `sm` caps at 240px, `md` at 320px. Either way the panel is\n * only as wide as its contents, and never wider than the viewport.\n * @default 'md'\n */\n size?: PopoverSize;\n /**\n * What opens the panel: a press, or a pointer resting on the trigger.\n * `hover` is the tooltips page's rich tooltip — it opens on hover, focus\n * or a long press, and stays open while the pointer is inside it, so the\n * panel's own buttons and links can be reached.\n * @default 'press'\n */\n trigger?: PopoverTrigger;\n};\ntype PopoverTrigger = 'hover' | 'press';\n\n/**\n * The element that carries the dialog role in a non-modal popover: what\n * React Aria's `Dialog` gives a modal one — the role, the name from the\n * title, the description, and the close slot — without the two things that\n * make `Dialog` a modal's.\n *\n * `Dialog` moves focus into itself as it mounts, whatever opened it, and\n * holds focus inside the overlay until it closes. A hover popover therefore\n * took focus from wherever the reader was typing the moment a pointer\n * rested on its trigger, and Tab in an open popover went round its own\n * controls forever, though the page behind a non-modal popover is meant to\n * stay in reach. Here a pressed popover still takes focus as it opens, since\n * a press asked for the panel, but a hovered one leaves it where it is, and\n * Tab past the panel's last control carries on from the trigger in the\n * page. React Aria's popover sees a dialog inside it and so adds no role or\n * focus handling of its own.\n */\nfunction PanelDialog({\n 'aria-labelledby': labelledBy,\n children,\n id,\n onPressWithin,\n // React Aria's render prop is the one part of a dialog's props this\n // element cannot honour, being an element of its own rather than React\n // Aria's; left out rather than spread onto the DOM.\n render: _render,\n slot,\n ...props\n}: Omit<PopoverContentProps, 'align' | 'alignOffset' | 'className' | 'container' | 'side' | 'sideOffset' | 'style' | 'triggerRef'> & {\n /**\n * Called when a press starts anywhere inside the panel in React's tree,\n * which takes in what an overlay opened from the panel draws elsewhere in\n * the document — see `PopoverContent`.\n */\n onPressWithin: () => void;\n}) {\n const ref = useRef<HTMLElement>(null);\n const state = useContext(OverlayTriggerStateContext);\n // What the trigger hands its overlay: the id the trigger's\n // `aria-controls` points at, and the trigger itself as the name of a\n // panel with no title. A hover trigger hands nothing, and is a hover\n // trigger for exactly that reason.\n const trigger = triggerOf(useContext(DialogContext));\n const pressed = trigger !== undefined;\n const titleId = useId();\n const [titled, setTitled] = useState(false);\n const registerTitle = useCallback(() => {\n setTitled(true);\n return () => {\n setTitled(false);\n };\n }, []);\n const headings = useMemo(() => ({\n slots: {\n [DEFAULT_SLOT]: {},\n title: {\n id: titleId,\n level: 2\n }\n }\n }), [titleId]);\n const buttons = useMemo(() => ({\n slots: {\n close: {\n onPress: () => {\n state?.close();\n }\n },\n [DEFAULT_SLOT]: {}\n }\n }), [state]);\n useEffect(() => {\n const element = ref.current;\n if (pressed && element !== null && !element.contains(document.activeElement)) {\n element.focus({\n preventScroll: true\n });\n }\n }, [pressed]);\n return (\n // A section with the role, as React Aria's own dialog is: a `<dialog>`\n // element brings the browser's own positioning, border, padding and top\n // layer, all of which the panel around it already decides.\n <section {...props} aria-labelledby={labelledBy ?? (titled ? titleId : trigger?.labelledBy)} id={id ?? trigger?.id} onPointerDownCapture={onPressWithin} ref={ref}\n // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- a `<dialog>` element would bring the browser's own positioning and top layer, which the panel around it already decides\n role=\"dialog\" slot={slot ?? undefined} tabIndex={-1} {...stylex.props(overlay.popupDialog, focus.ring)}>\n <HeadingContext value={headings}>\n <TextContext value={TEXT_SLOTS}>\n <ButtonContext value={buttons}>\n <TitleContext value={registerTitle}>{children}</TitleContext>\n </ButtonContext>\n </TextContext>\n </HeadingContext>\n </section>\n );\n}\n\n// React Aria names a placement by the side and, along it, the end the panel\n// is aligned to — `bottom start`, or `left top` on the sides where the axis\n// runs the other way.\n/**\n * A panel anchored to the control that opened it. 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 * Non-modal by design — the page behind stays scrollable and clickable, which\n * is the difference from `Sheet`. Pass `modal` to change that. Escape, a press\n * anywhere outside the panel and a button given `slot=\"close\"` close it, and\n * a press on its trigger toggles it. Inside a dialog, a press on the scrim\n * closes the popover first and the dialog on the next, as a menu does.\n *\n * Composed rather than configured by props, because a popover's contents are\n * arbitrary — the parts are `Popover.Content`, `Popover.Title`, and\n * `Popover.Description`. A `Button` or `IconButton` placed directly inside\n * `Popover` opens it, and one given `slot=\"close\"` inside the content closes\n * it; neither needs a part of its own.\n */\nfunction Popover({\n children,\n closeDelay = DEFAULT_HOVER_CLOSE_DELAY,\n delay = DEFAULT_HOVER_DELAY,\n modal = false,\n size = 'md',\n trigger = 'press',\n ...props\n}: PopoverProps) {\n // A hovered popover is React Aria's preview trigger, which is a different\n // element around the same parts rather than a mode of the pressed one: it\n // opens from hover, focus or a long press, and it is always non-modal,\n // since a panel that blocked the page while the pointer merely rested on\n // something would be a trap. `modal` is ignored there rather than\n // refused, so the content draws the non-modal panel whatever it says.\n const context = useMemo(() => ({\n modal: modal && trigger !== 'hover',\n size\n }), [modal, size, trigger]);\n if (trigger === 'hover') {\n return <PopoverContext value={context}>\n <PreviewTrigger closeDelay={closeDelay} delay={delay} {...props}>\n {children}\n </PreviewTrigger>\n </PopoverContext>;\n }\n return <PopoverContext value={context}>\n <DialogTrigger {...props}>{children}</DialogTrigger>\n </PopoverContext>;\n}\n\n/**\n * The panel itself. Everything the popover shows goes in here; the trigger\n * stays outside it, since the trigger lives in the page while this is\n * portalled out to the end of the body.\n *\n * Placement is React Aria's anchor positioning, so the panel flips to the\n * opposite side and shifts along the edge of the viewport on its own rather\n * than being clipped by it.\n */\nfunction PopoverContent({\n align = 'center',\n alignOffset,\n children,\n className,\n container,\n ref,\n side = 'bottom',\n sideOffset = DEFAULT_SIDE_OFFSET,\n style,\n triggerRef,\n ...props\n}: PopoverContentProps & RefAttributes<HTMLElement>) {\n const {\n modal,\n size\n } = useContext(PopoverContext);\n const state = useContext(OverlayTriggerStateContext);\n // The trigger React Aria hands its popover, for a content part given no\n // `triggerRef` of its own.\n const handed = useSlottedContext(RACPopoverContext)?.triggerRef;\n\n // A non-modal popover is one React Aria closes on blur alone: a press on\n // blank page left it open, and a press on its own trigger closed it as\n // focus left the panel and opened it again on the same press. Here a\n // press anywhere outside the panel closes it, and a press on the trigger\n // is left to the trigger, which toggles it.\n //\n // What an overlay opened from inside the panel draws — a select's list, a\n // menu — is portalled elsewhere in the document, so a press there is\n // outside the panel's element though it is within the panel's tree. React\n // carries the press up that tree, and the panel marks it as within before\n // the press ends; the outside press is read on its end, so the mark is\n // there to read. Each press outside clears it as it starts.\n const panel = useRef<HTMLElement>(null);\n const merged = useMemo(() => mergeRefs(panel, ref ?? undefined), [ref]);\n const pressedWithin = useRef(false);\n const markPressWithin = useCallback(() => {\n pressedWithin.current = true;\n }, []);\n // The two refs the trigger may come through, kept where a callback can\n // read them at the moment of a press rather than as dependencies, which a\n // ref is not.\n const triggers = useRef({\n handed,\n own: triggerRef\n });\n useEffect(() => {\n triggers.current = {\n handed,\n own: triggerRef\n };\n });\n const isOutsideTrigger = useCallback((element: Element) => {\n const {\n handed: fromTrigger,\n own\n } = triggers.current;\n const trigger = own?.current ?? fromTrigger?.current;\n return !(trigger?.contains(element) ?? false);\n }, []);\n useInteractOutside({\n isDisabled: modal || state === null || !state.isOpen,\n onInteractOutside: event => {\n if (pressedWithin.current) {\n pressedWithin.current = false;\n return;\n }\n if (event.target instanceof Element && !isOutsideTrigger(event.target)) {\n return;\n }\n state?.close();\n },\n onInteractOutsideStart: () => {\n pressedWithin.current = false;\n },\n ref: panel\n });\n const descriptionId = useId();\n const [described, setDescribed] = useState(false);\n const register = useCallback(() => {\n setDescribed(true);\n return () => {\n setDescribed(false);\n };\n }, []);\n const description = useMemo(() => ({\n id: descriptionId,\n register\n }), [descriptionId, register]);\n return <OverlayScope>\n <RACPopover crossOffset={alignOffset} isNonModal={!modal} offset={sideOffset} placement={placementOf(side, align)}\n // The surface, 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={merged}\n // Focus leaving for the trigger closes nothing: the trigger's own\n // press toggles the panel, and closing it first reopened it.\n shouldCloseOnInteractOutside={modal ? undefined : isOutsideTrigger} triggerRef={triggerRef}\n // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n UNSTABLE_portalContainer={container} {...mergeStatefulStyles((render: PopoverRenderProps) => stylex.props(overlay.popup, styles.content, styles[size], popupOrigin(render.placement)), {\n className,\n style\n })}>\n {modal ? <Dialog aria-describedby={described ? descriptionId : undefined} {...props} {...stylex.props(overlay.popupDialog, focus.ring)}>\n <DescriptionContext value={description}>\n {children}\n </DescriptionContext>\n </Dialog> : <PanelDialog aria-describedby={described ? descriptionId : undefined} onPressWithin={markPressWithin} {...props}>\n <DescriptionContext value={description}>\n {children}\n </DescriptionContext>\n </PanelDialog>}\n </RACPopover>\n </OverlayScope>;\n}\n\n/**\n * Supporting copy under the title. The panel's `aria-describedby` points at\n * it — see DescriptionContext for why that is this component's doing.\n */\nfunction PopoverDescription(props: PopoverDescriptionProps & RefAttributes<HTMLElement>) {\n const {\n id,\n register\n } = useContext(DescriptionContext);\n useEffect(() => register(), [register]);\n return <Text id={id} slot=\"description\" {...props} {...mergeStyles({\n className: \"x9f619 x1w5n3ug xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh x1ghz6dp\"\n }, props)} />;\n}\n\n/**\n * Names the popover. Rendered through React Aria's title slot, which is what\n * points the panel's `aria-labelledby` at it — a popover without one announces\n * itself unnamed.\n */\nfunction PopoverTitle(props: PopoverTitleProps & RefAttributes<HTMLHeadingElement>) {\n const register = useContext(TitleContext);\n useEffect(() => register(), [register]);\n return <Heading slot=\"title\" {...props} {...mergeStyles({\n className: \"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q x1ghz6dp\"\n }, props)} />;\n}\n\n/**\n * What a pressed trigger hands the overlay it opens: the id its\n * `aria-controls` points at, and its own id to name a panel with no title.\n * Read field by field, since the context's type also admits a slotted\n * value; a hover trigger hands nothing.\n */\nfunction triggerOf(context: unknown) {\n if (typeof context !== 'object' || context === null || 'slots' in context) {\n return undefined;\n }\n return {\n id: 'id' in context && typeof context.id === 'string' ? context.id : undefined,\n labelledBy: 'aria-labelledby' in context && typeof context['aria-labelledby'] === 'string' ? context['aria-labelledby'] : undefined\n };\n}\nPopover.Content = PopoverContent;\nPopover.Description = PopoverDescription;\nPopover.Title = PopoverTitle;\n\n// The dialog's own props, plus the four that place the panel and its\n// styling. Those belong to the positioned panel rather than to the dialog,\n// but a call site has no reason to know there are two elements — `className`\n// and `style` reach the panel, which is the one worth restyling, and\n// everything else lands on the dialog.\ntype PopoverContentProps = Omit<DialogProps, 'children' | 'className' | 'style'> & {\n /**\n * Where the panel sits along the side it opens on.\n * @default 'center'\n */\n align?: PopoverAlign;\n /** Moves the panel along that side, in pixels. */\n alignOffset?: number;\n children?: ReactNode;\n /** A function may compute the class from the panel's render state. */\n className?: ClassNameOrFunction<PopoverRenderProps>;\n /**\n * Where to portal the panel. Defaults to the container of the `ThemeScope`\n * around it, which keeps the popover on that scope's tokens, or to the end of\n * `<body>` where there is none. A subtree themed through the `themeScope`\n * class has no container of its own, so point this inside it, or the popover\n * renders outside and keeps the page's tokens.\n */\n container?: Element;\n /**\n * Which side of the trigger the panel opens on. It flips to the opposite\n * side when there is no room.\n * @default 'bottom'\n */\n side?: PopoverSide;\n /**\n * The gap between the trigger and the panel, in pixels.\n * @default 8\n */\n sideOffset?: number;\n /** A function may compute the style from the panel's render state. */\n style?: StyleOrFunction<PopoverRenderProps>;\n /**\n * An element to anchor the panel to other than the trigger that opened it.\n */\n triggerRef?: RefObject<Element | null>;\n};\ntype PopoverDescriptionProps = TextProps;\ntype PopoverTitleProps = HeadingProps;\nexport type { PopoverAlign, PopoverContentProps, PopoverDescriptionProps, PopoverProps, PopoverSide, PopoverSize, PopoverTitleProps, PopoverTrigger };\nexport { PopoverContent, PopoverDescription, PopoverTitle };\nexport default Popover;"],"mappings":"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"}
@@ -1,6 +1,21 @@
1
1
  import { RenderComponentProps } from "../../render/useRender.js";
2
+ import { ImgHTMLAttributes } from "react";
2
3
  //#region src/components/product-icon/index.d.ts
3
4
  type ProductIconProps = Omit<RenderComponentProps<'span'>, 'children'> & {
5
+ /**
6
+ * Hides the mark from assistive technology, for one beside the name of
7
+ * what it identifies, where it would otherwise announce the name a second
8
+ * time. `name` still supplies the initial, and is not announced.
9
+ * @default false
10
+ */
11
+ decorative?: boolean;
12
+ /**
13
+ * Attributes for the picture's own `<img>`: a `srcSet` and `sizes` for a
14
+ * screen's density, a `referrerPolicy` or `crossOrigin` for where it is
15
+ * served from, a `fetchPriority`, or `loading` and `decoding`, which are
16
+ * `lazy` and `async` unless given.
17
+ */
18
+ imgProps?: Pick<ImgHTMLAttributes<HTMLImageElement>, 'crossOrigin' | 'decoding' | 'fetchPriority' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcSet'>;
4
19
  /**
5
20
  * What this identifies. Supplies both the fallback initial and the
6
21
  * accessible name, so a screen reader announces the thing rather than
@@ -34,6 +49,9 @@ type ProductIconProps = Omit<RenderComponentProps<'span'>, 'children'> & {
34
49
  *
35
50
  * The mark is letterboxed rather than cropped, so a logo of any aspect ratio
36
51
  * can be handed over as it was drawn.
52
+ *
53
+ * When the thing's name is already written next to the mark, mark it
54
+ * `decorative`, so a screen reader reads the name once.
37
55
  */
38
56
  declare function ProductIcon({ size, tone, ...props }: ProductIconProps): import("react").JSX.Element;
39
57
  //#endregion
@@ -9,6 +9,9 @@ import { jsx } from "react/jsx-runtime";
9
9
  *
10
10
  * The mark is letterboxed rather than cropped, so a logo of any aspect ratio
11
11
  * can be handed over as it was drawn.
12
+ *
13
+ * When the thing's name is already written next to the mark, mark it
14
+ * `decorative`, so a screen reader reads the name once.
12
15
  */
13
16
  function ProductIcon(t0) {
14
17
  const $ = c(8);
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["c","_c","RenderComponentProps","Mark","ProductIconProps","Omit","name","size","src","tone","ProductIcon","t0","$","props","t1","t2","undefined","t3","_c"],"sources":["../../../src/components/product-icon/index.tsx"],"sourcesContent":["'use client'\n\nimport type { RenderComponentProps } from '../../render/useRender'\n\nimport Mark from '../../mark'\n\n// The counterpart to Avatar: Avatar stands for a person, this stands for\n// everything else — an application, a service, a brand. It is drawn as a\n// rounded square with the mark letterboxed, and its tone tints the fallback\n// rather than the square. The header of `src/mark/styles.ts` says why on all\n// three counts.\n//\n// The box, the sizes, the tones, the mark's loading and the labelling are the\n// mark's in `src/mark`, which Avatar draws a person through as well. No\n// Material Design page draws a product mark, so its sizes are Avatar's — 36,\n// 40 and 56 — which is what lets a mark and a person fill the same slot.\n\ntype ProductIconProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n /**\n * What this identifies. Supplies both the fallback initial and the\n * accessible name, so a screen reader announces the thing rather than\n * reading a letter aloud. The initial is the name's first letter, number or\n * emoji, passing over punctuation it opens with: a handle's at sign, a\n * channel's hash or a bracket.\n */\n name: string\n /**\n * Edge length: `sm` 36px, `md` 40px, `lg` 56px. The same three Avatar uses,\n * so the two are interchangeable wherever one leads a row or a card.\n * @default 'md'\n */\n size?: 'lg' | 'md' | 'sm'\n /**\n * The mark to show in place of the initial. The initial stays until it has\n * loaded, and comes back if it fails.\n */\n src?: string\n /**\n * Which container/on-container colour pair to tint the fallback with. It is\n * the fallback's own background, so it is gone once `src` has loaded rather\n * than sitting behind the mark.\n * @default 'primary'\n */\n tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary'\n}\n\n/**\n * A small square mark identifying something that is not a person — an\n * application, a service, a brand. Reach for Avatar when it is a person.\n *\n * The mark is letterboxed rather than cropped, so a logo of any aspect ratio\n * can be handed over as it was drawn.\n */\nfunction ProductIcon({\n size = 'md',\n tone = 'primary',\n ...props\n}: ProductIconProps) {\n return <Mark {...props} kind=\"thing\" size={size} tone={tone} />\n}\n\nexport type { ProductIconProps }\n\nexport default ProductIcon\n"],"mappings":";;;;;;;;;;;;AAqDA,SAAAU,YAAAC,IAAA;CAAA,MAAAC,IAAAX,EAAA,CAAA;CAAA,IAAAY;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAH,EAAA,OAAAD,IAAA;EAAqB,CAAA,CAAAJ,MAAAO,IAAAL,MAAAM,IAAA,GAAAF,SAAAF;EAIFC,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAA;EAAAF,QAAAD,EAAA;EAAAE,KAAAF,EAAA;EAAAG,KAAAH,EAAA;CAAA;CAHjB,MAAAL,OAAAO,OAAAE,KAAAA,IAAA,OAAAF;CACA,MAAAL,OAAAM,OAAAC,KAAAA,IAAA,YAAAD;CAAgB,IAAAE;CAAA,IAAAL,EAAA,OAAAC,SAAAD,EAAA,OAAAL,QAAAK,EAAA,OAAAH,MAAA;EAGTQ,KAAA,oBAAC,MAAD;GAAK,GAAKJ;GAAY,MAAA;GAAcN;GAAYE;EAAI,CAAA;EAAIG,EAAA,KAAAC;EAAAD,EAAA,KAAAL;EAAAK,EAAA,KAAAH;EAAAG,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OAAxDK;AAAwD"}
1
+ {"version":3,"file":"index.js","names":["c","_c","ImgHTMLAttributes","RenderComponentProps","Mark","ProductIconProps","Omit","decorative","imgProps","Pick","HTMLImageElement","name","size","src","tone","ProductIcon","t0","$","props","t1","t2","undefined","t3","_c"],"sources":["../../../src/components/product-icon/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ImgHTMLAttributes } from 'react'\n\nimport type { RenderComponentProps } from '../../render/useRender'\n\nimport Mark from '../../mark'\n\n// The counterpart to Avatar: Avatar stands for a person, this stands for\n// everything else — an application, a service, a brand. It is drawn as a\n// rounded square with the mark letterboxed, and its tone tints the fallback\n// rather than the square. The header of `src/mark/styles.ts` says why on all\n// three counts.\n//\n// The box, the sizes, the tones, the mark's loading and the labelling are the\n// mark's in `src/mark`, which Avatar draws a person through as well. No\n// Material Design page draws a product mark, so its sizes are Avatar's — 36,\n// 40 and 56 — which is what lets a mark and a person fill the same slot.\n\ntype ProductIconProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n /**\n * Hides the mark from assistive technology, for one beside the name of\n * what it identifies, where it would otherwise announce the name a second\n * time. `name` still supplies the initial, and is not announced.\n * @default false\n */\n decorative?: boolean\n /**\n * Attributes for the picture's own `<img>`: a `srcSet` and `sizes` for a\n * screen's density, a `referrerPolicy` or `crossOrigin` for where it is\n * served from, a `fetchPriority`, or `loading` and `decoding`, which are\n * `lazy` and `async` unless given.\n */\n imgProps?: Pick<\n ImgHTMLAttributes<HTMLImageElement>,\n | 'crossOrigin'\n | 'decoding'\n | 'fetchPriority'\n | 'loading'\n | 'referrerPolicy'\n | 'sizes'\n | 'srcSet'\n >\n /**\n * What this identifies. Supplies both the fallback initial and the\n * accessible name, so a screen reader announces the thing rather than\n * reading a letter aloud. The initial is the name's first letter, number or\n * emoji, passing over punctuation it opens with: a handle's at sign, a\n * channel's hash or a bracket.\n */\n name: string\n /**\n * Edge length: `sm` 36px, `md` 40px, `lg` 56px. The same three Avatar uses,\n * so the two are interchangeable wherever one leads a row or a card.\n * @default 'md'\n */\n size?: 'lg' | 'md' | 'sm'\n /**\n * The mark to show in place of the initial. The initial stays until it has\n * loaded, and comes back if it fails.\n */\n src?: string\n /**\n * Which container/on-container colour pair to tint the fallback with. It is\n * the fallback's own background, so it is gone once `src` has loaded rather\n * than sitting behind the mark.\n * @default 'primary'\n */\n tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary'\n}\n\n/**\n * A small square mark identifying something that is not a person — an\n * application, a service, a brand. Reach for Avatar when it is a person.\n *\n * The mark is letterboxed rather than cropped, so a logo of any aspect ratio\n * can be handed over as it was drawn.\n *\n * When the thing's name is already written next to the mark, mark it\n * `decorative`, so a screen reader reads the name once.\n */\nfunction ProductIcon({\n size = 'md',\n tone = 'primary',\n ...props\n}: ProductIconProps) {\n return <Mark {...props} kind=\"thing\" size={size} tone={tone} />\n}\n\nexport type { ProductIconProps }\n\nexport default ProductIcon\n"],"mappings":";;;;;;;;;;;;;;;AAiFA,SAAAe,YAAAC,IAAA;CAAA,MAAAC,IAAAhB,EAAA,CAAA;CAAA,IAAAiB;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAH,EAAA,OAAAD,IAAA;EAAqB,CAAA,CAAAJ,MAAAO,IAAAL,MAAAM,IAAA,GAAAF,SAAAF;EAIFC,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAA;EAAAF,QAAAD,EAAA;EAAAE,KAAAF,EAAA;EAAAG,KAAAH,EAAA;CAAA;CAHjB,MAAAL,OAAAO,OAAAE,KAAAA,IAAA,OAAAF;CACA,MAAAL,OAAAM,OAAAC,KAAAA,IAAA,YAAAD;CAAgB,IAAAE;CAAA,IAAAL,EAAA,OAAAC,SAAAD,EAAA,OAAAL,QAAAK,EAAA,OAAAH,MAAA;EAGTQ,KAAA,oBAAC,MAAD;GAAK,GAAKJ;GAAY,MAAA;GAAcN;GAAYE;EAAI,CAAA;EAAIG,EAAA,KAAAC;EAAAD,EAAA,KAAAL;EAAAK,EAAA,KAAAH;EAAAG,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OAAxDK;AAAwD"}
@@ -40,6 +40,9 @@ type SegmentedButtonSegmentProps = Omit<ToggleButtonProps, 'children' | 'classNa
40
40
  * An icon before the label, in the page's 18dp size. Replaced by the check
41
41
  * while the segment is chosen, unless the set turns that off. An icon drawn
42
42
  * in `em` takes that size from the slot.
43
+ *
44
+ * Given with no label, the icon is the segment, centred in it and kept
45
+ * while chosen; name the segment with `aria-label` then.
43
46
  */
44
47
  icon?: ReactNode;
45
48
  /** A function may compute the style from the segment's render state. */
@@ -8,7 +8,7 @@ import { focus } from "../../styles/focus.js";
8
8
  import { useToggleGroupDisabled } from "../../hooks/useToggleGroupDisabled.js";
9
9
  import { useRipple } from "../../hooks/useRipple.js";
10
10
  import { c } from "react/compiler-runtime";
11
- import { createContext, createElement, useContext } from "react";
11
+ import { createContext, createElement, useContext, useLayoutEffect, useState } from "react";
12
12
  import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
13
13
  import { SelectionIndicator, ToggleButton, ToggleButtonGroup } from "react-aria-components";
14
14
  //#region src/components/segmented-button/index.tsx
@@ -61,32 +61,8 @@ function stepOf(key, rtl) {
61
61
  }
62
62
  `${spacing.sm}`;
63
63
  `${spacing.sm}`;
64
+ `${spacing.md}${spacing.sm}`;
64
65
  const styles = {
65
- label: {
66
- k6CgDc: "x12w9bfk",
67
- k7Eaqz: "xeuugli",
68
- kVQacm: "xb3r6kr",
69
- kg5iWk: "xlyipyv",
70
- kIyJzY: "x1qno0dh",
71
- k1ekBW: "x1ve1rmq",
72
- kAMwcw: "xpc4ca7",
73
- khDVqt: "xuxw1ft",
74
- $$css: true
75
- },
76
- labelChosen: {
77
- kAXs8y: "x1g12otp",
78
- $$css: true
79
- },
80
- labelReserved: {
81
- k71WvV: "x184gv5z",
82
- keTefX: "x1mjqfaz",
83
- $$css: true
84
- },
85
- labelShifted: {
86
- k71WvV: "x14z9mp",
87
- keTefX: "x1c5lys2",
88
- $$css: true
89
- },
90
66
  segment: {
91
67
  "--segment-indicator-radius-end": "x32u3vw x111hk5a",
92
68
  "--segment-indicator-radius-start": "xatjrgw x1syycwj",
@@ -117,7 +93,7 @@ const styles = {
117
93
  kLWn49: "x1lz68p4",
118
94
  k7Eaqz: "xeuugli",
119
95
  k8WAf4: "xt970qd",
120
- kg3NbH: "x18fpw6u",
96
+ kg3NbH: "xn60lsn",
121
97
  kVAEAm: "x1n2onr6",
122
98
  kIyJzY: "x1qno0dh",
123
99
  k1ekBW: "xt3l3uh",
@@ -141,6 +117,34 @@ const styles = {
141
117
  segmentUnselected: {
142
118
  kMwMTN: "x139gbkf",
143
119
  $$css: true
120
+ },
121
+ spacer: {
122
+ k6CgDc: "x12w9bfk",
123
+ kGNEyG: "x6s0dn4",
124
+ kB7OPa: "x9f619",
125
+ k1xSpc: "x78zum5",
126
+ kmuXW: "xs83m0k",
127
+ kzqmXN: "xbraz1g",
128
+ kjj79g: "x13a6bvl",
129
+ k7Eaqz: "xeuugli",
130
+ kIyJzY: "x1qno0dh",
131
+ k1ekBW: "x1pha8k4",
132
+ kAMwcw: "xpc4ca7",
133
+ $$css: true
134
+ },
135
+ spacerHalf: {
136
+ kzqmXN: "x154zo0h",
137
+ $$css: true
138
+ },
139
+ spacerHolding: {
140
+ kzqmXN: "x1n85vuq",
141
+ k7Eaqz: "x36sgg7",
142
+ $$css: true
143
+ },
144
+ spacerIcon: {
145
+ kzqmXN: "x1iuy3mw",
146
+ k7Eaqz: "x16xo4sp",
147
+ $$css: true
144
148
  }
145
149
  };
146
150
  /**
@@ -150,11 +154,14 @@ const styles = {
150
154
  * type be inferred, since `ReactNode` is a union that includes a promise and
151
155
  * an inferred one has to be `async`.
152
156
  */
153
- function glyphFor(state, icon, showSelectedIcon) {
154
- if (state.isSelected && showSelectedIcon) return /* @__PURE__ */ jsx(CheckGlyph, { className: "x5yr21d x2lah0s x1xp8n7a" });
157
+ function glyphFor(state, icon, marked) {
158
+ if (state.isSelected && marked) return /* @__PURE__ */ jsx(CheckGlyph, { className: "x5yr21d x2lah0s x1xp8n7a" });
155
159
  return icon ?? null;
156
160
  }
157
- function indicatorClassName(isDisabled, selectionMode, showSelectedIcon) {
161
+ function hasLabel(children) {
162
+ return children !== void 0 && children !== null && children !== false && children !== "";
163
+ }
164
+ function indicatorClassName(isDisabled, selectionMode, marked) {
158
165
  return (state) => ({
159
166
  0: { className: "x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd" },
160
167
  8: { className: "x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7" },
@@ -172,14 +179,16 @@ function indicatorClassName(isDisabled, selectionMode, showSelectedIcon) {
172
179
  11: { className: "xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk" },
173
180
  7: { className: "xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk" },
174
181
  15: { className: "xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk" }
175
- })[!!(selectionMode === "multiple") << 3 | !!!showSelectedIcon << 2 | !!isDisabled << 1 | !!(state.isEntering || state.isExiting) << 0].className ?? "";
182
+ })[!!(selectionMode === "multiple") << 3 | !!!marked << 2 | !!isDisabled << 1 | !!(state.isEntering || state.isExiting) << 0].className ?? "";
176
183
  }
177
- function segmentContent(children, icon, ripple, selectionMode, showSelectedIcon) {
178
- const reserves = showSelectedIcon || icon !== void 0;
184
+ function segmentContent(children, icon, ripple, selectionMode, marked, labelRef, labelTitle) {
185
+ const labelled = hasLabel(children);
186
+ const reserves = marked || icon !== void 0;
179
187
  return (state) => {
180
- const glyph = glyphFor(state, icon, showSelectedIcon);
188
+ const glyph = glyphFor(state, icon, marked);
189
+ const drawn = glyph !== null;
181
190
  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
182
- /* @__PURE__ */ jsx(SelectionIndicator, { className: indicatorClassName(state.isDisabled, selectionMode, showSelectedIcon) }),
191
+ /* @__PURE__ */ jsx(SelectionIndicator, { className: indicatorClassName(state.isDisabled, selectionMode, marked) }),
183
192
  /* @__PURE__ */ jsx("span", { ...{
184
193
  0: { className: "x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi xg01cxk x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4" },
185
194
  4: { className: "x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xe2qvxb" },
@@ -190,17 +199,33 @@ function segmentContent(children, icon, ripple, selectionMode, showSelectedIcon)
190
199
  3: { className: "x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g" },
191
200
  7: { className: "x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g" }
192
201
  }[!!state.isHovered << 2 | !!state.isFocusVisible << 1 | !!state.isPressed << 0] }),
193
- reserves && /* @__PURE__ */ jsx("span", {
194
- ...{
195
- 0: { className: "x12w9bfk x6s0dn4 xmix8c7 x3nfvp2 xosj86m xnalus7 xwa60dl x2xyl1b xl56j7k xb3r6kr x47corl x10l6tqk xmzmy3r x1qno0dh x1j4rzew xpc4ca7" },
196
- 1: { className: "x12w9bfk x6s0dn4 xmix8c7 x3nfvp2 xosj86m xwa60dl x2xyl1b xl56j7k xb3r6kr x47corl x10l6tqk xmzmy3r x1qno0dh x1j4rzew xpc4ca7 x1xp8n7a" }
197
- }[!!(glyph !== null) << 0],
198
- children: glyph
199
- }),
200
202
  /* @__PURE__ */ jsx("span", {
201
- ...props(styles.label, reserves && (glyph === null ? styles.labelReserved : styles.labelShifted), state.isSelected && !state.isDisabled && styles.labelChosen),
203
+ ...props(styles.spacer, reserves && (drawn ? labelled ? styles.spacerHolding : styles.spacerIcon : styles.spacerHalf)),
204
+ children: reserves && /* @__PURE__ */ jsx("span", {
205
+ ...{
206
+ 0: { className: "x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xnalus7 xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7" },
207
+ 2: { className: "x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7 x1xp8n7a" },
208
+ 1: { className: "x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xnalus7 xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7 x1nsf9p3" },
209
+ 3: { className: "x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7 x1xp8n7a x1nsf9p3" }
210
+ }[!!drawn << 1 | !!(drawn && labelled) << 0],
211
+ children: glyph
212
+ })
213
+ }),
214
+ labelled && /* @__PURE__ */ jsx("span", {
215
+ ref: labelRef,
216
+ title: labelTitle,
217
+ ...{
218
+ 0: { className: "x12w9bfk x2lah0s x193iq5w xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft" },
219
+ 2: { className: "x12w9bfk x2lah0s xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft x1tpxo8" },
220
+ 1: { className: "x12w9bfk x2lah0s x193iq5w xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft x1g12otp" },
221
+ 3: { className: "x12w9bfk x2lah0s xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft x1tpxo8 x1g12otp" }
222
+ }[!!drawn << 1 | !!(state.isSelected && !state.isDisabled) << 0],
202
223
  children
203
224
  }),
225
+ /* @__PURE__ */ jsx("span", { ...{
226
+ 0: { className: "x12w9bfk x6s0dn4 x9f619 x78zum5 xs83m0k xbraz1g x13a6bvl xeuugli x1qno0dh x1pha8k4 xpc4ca7" },
227
+ 1: { className: "x12w9bfk x6s0dn4 x9f619 x78zum5 xs83m0k x13a6bvl xeuugli x1qno0dh x1pha8k4 xpc4ca7 x154zo0h" }
228
+ }[!!(reserves && !drawn) << 0] }),
204
229
  ripple.surface
205
230
  ] });
206
231
  };
@@ -338,11 +363,13 @@ function SegmentedButton(t0) {
338
363
  * unchosen one draws whatever `icon` holds, if anything.
339
364
  */
340
365
  function SegmentedButtonSegment(t0) {
341
- const $ = c(21);
366
+ const $ = c(23);
342
367
  const { children, disableRipple: t1, icon, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, render, ...props } = t0;
343
368
  const disableRipple = t1 === void 0 ? false : t1;
344
369
  const selectionMode = useContext(SelectionModeContext);
345
- const showSelectedIcon = useContext(ShowSelectedIconContext);
370
+ const marked = useContext(ShowSelectedIconContext) && hasLabel(children);
371
+ const [label, setLabel] = useState(null);
372
+ const labelTitle = useTruncatedText(label);
346
373
  const element = {
347
374
  aria: ariaAttributesOf(props),
348
375
  onKeyDown,
@@ -372,19 +399,21 @@ function SegmentedButtonSegment(t0) {
372
399
  const t3 = selectionMode === "single" && props.id !== void 0 ? JSON.stringify(props.id) : void 0;
373
400
  const t4 = toggleButtonRenderer(element, render);
374
401
  const t5 = ripple.handlers;
375
- const t6 = mergeStatefulStyles(segmentStyles(showSelectedIcon), props);
402
+ const t6 = mergeStatefulStyles(segmentStyles(marked), props);
376
403
  let t7;
377
- if ($[7] !== children || $[8] !== icon || $[9] !== ripple || $[10] !== selectionMode || $[11] !== showSelectedIcon) {
378
- t7 = segmentContent(children, icon, ripple, selectionMode, showSelectedIcon);
404
+ if ($[7] !== children || $[8] !== icon || $[9] !== labelTitle || $[10] !== marked || $[11] !== ripple || $[12] !== selectionMode || $[13] !== setLabel) {
405
+ t7 = segmentContent(children, icon, ripple, selectionMode, marked, setLabel, labelTitle);
379
406
  $[7] = children;
380
407
  $[8] = icon;
381
- $[9] = ripple;
382
- $[10] = selectionMode;
383
- $[11] = showSelectedIcon;
384
- $[12] = t7;
385
- } else t7 = $[12];
408
+ $[9] = labelTitle;
409
+ $[10] = marked;
410
+ $[11] = ripple;
411
+ $[12] = selectionMode;
412
+ $[13] = setLabel;
413
+ $[14] = t7;
414
+ } else t7 = $[14];
386
415
  let t8;
387
- if ($[13] !== T0 || $[14] !== props || $[15] !== ripple.handlers || $[16] !== t3 || $[17] !== t4 || $[18] !== t6 || $[19] !== t7) {
416
+ if ($[15] !== T0 || $[16] !== props || $[17] !== ripple.handlers || $[18] !== t3 || $[19] !== t4 || $[20] !== t6 || $[21] !== t7) {
388
417
  t8 = /* @__PURE__ */ jsx(T0, {
389
418
  "data-key": t3,
390
419
  render: t4,
@@ -393,19 +422,56 @@ function SegmentedButtonSegment(t0) {
393
422
  ...t6,
394
423
  children: t7
395
424
  });
396
- $[13] = T0;
397
- $[14] = props;
398
- $[15] = ripple.handlers;
399
- $[16] = t3;
400
- $[17] = t4;
401
- $[18] = t6;
402
- $[19] = t7;
403
- $[20] = t8;
404
- } else t8 = $[20];
425
+ $[15] = T0;
426
+ $[16] = props;
427
+ $[17] = ripple.handlers;
428
+ $[18] = t3;
429
+ $[19] = t4;
430
+ $[20] = t6;
431
+ $[21] = t7;
432
+ $[22] = t8;
433
+ } else t8 = $[22];
405
434
  return t8;
406
435
  }
407
- function segmentStyles(showSelectedIcon) {
408
- return (state) => props(styles.segment, focus.ring, state.isSelected ? styles.segmentSelected : styles.segmentUnselected, state.isSelected && !showSelectedIcon && styles.segmentSelectedUnmarked, state.isDisabled && styles.segmentDisabled);
436
+ function segmentStyles(marked) {
437
+ return (state) => props(styles.segment, focus.ring, state.isSelected ? styles.segmentSelected : styles.segmentUnselected, state.isSelected && !marked && styles.segmentSelectedUnmarked, state.isDisabled && styles.segmentDisabled);
438
+ }
439
+ function useTruncatedText(label) {
440
+ const $ = c(3);
441
+ const [text, setText] = useState(void 0);
442
+ let t0;
443
+ let t1;
444
+ if ($[0] !== label) {
445
+ t0 = () => {
446
+ if (label === null) return;
447
+ const measure = () => {
448
+ const cut = label.scrollWidth > label.clientWidth;
449
+ setText(cut && label.textContent !== "" ? label.textContent : void 0);
450
+ };
451
+ measure();
452
+ const resize = new ResizeObserver(measure);
453
+ resize.observe(label);
454
+ const relabel = new MutationObserver(measure);
455
+ relabel.observe(label, {
456
+ characterData: true,
457
+ childList: true,
458
+ subtree: true
459
+ });
460
+ return () => {
461
+ resize.disconnect();
462
+ relabel.disconnect();
463
+ };
464
+ };
465
+ t1 = [label];
466
+ $[0] = label;
467
+ $[1] = t0;
468
+ $[2] = t1;
469
+ } else {
470
+ t0 = $[1];
471
+ t1 = $[2];
472
+ }
473
+ useLayoutEffect(t0, t1);
474
+ return text;
409
475
  }
410
476
  SegmentedButton.Segment = SegmentedButtonSegment;
411
477
  //#endregion