@kanso-labs/kanso-ui 0.40.2 → 0.40.3

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 (51) hide show
  1. package/dist/chip/styles.js +2 -2
  2. package/dist/chip/styles.js.map +1 -1
  3. package/dist/components/app-bar/index.js +5 -2
  4. package/dist/components/app-bar/index.js.map +1 -1
  5. package/dist/components/card/index.js +7 -1
  6. package/dist/components/card/index.js.map +1 -1
  7. package/dist/components/checkbox/index.js +3 -3
  8. package/dist/components/checkbox/index.js.map +1 -1
  9. package/dist/components/checkbox-group/index.js +1 -1
  10. package/dist/components/chip-group/index.js +1 -1
  11. package/dist/components/dialog/index.d.ts +5 -0
  12. package/dist/components/dialog/index.js +5 -0
  13. package/dist/components/dialog/index.js.map +1 -1
  14. package/dist/components/menu/index.js +4 -1
  15. package/dist/components/menu/index.js.map +1 -1
  16. package/dist/components/popover/index.js +310 -93
  17. package/dist/components/popover/index.js.map +1 -1
  18. package/dist/components/progress-indicator/index.js +6 -6
  19. package/dist/components/progress-indicator/index.js.map +1 -1
  20. package/dist/components/radio-group/index.js +27 -38
  21. package/dist/components/radio-group/index.js.map +1 -1
  22. package/dist/components/segmented-button/index.d.ts +3 -1
  23. package/dist/components/segmented-button/index.js +33 -17
  24. package/dist/components/segmented-button/index.js.map +1 -1
  25. package/dist/components/select/index.js +1 -0
  26. package/dist/components/select/index.js.map +1 -1
  27. package/dist/components/sheet/index.d.ts +5 -0
  28. package/dist/components/sheet/index.js +6 -1
  29. package/dist/components/sheet/index.js.map +1 -1
  30. package/dist/components/snackbar/index.js +1 -1
  31. package/dist/components/snackbar/index.js.map +1 -1
  32. package/dist/control/index.js +54 -1
  33. package/dist/control/index.js.map +1 -1
  34. package/dist/control/styles.js +1 -1
  35. package/dist/control/styles.js.map +1 -1
  36. package/dist/field/index.js +183 -131
  37. package/dist/field/index.js.map +1 -1
  38. package/dist/field/styles.js +25 -1
  39. package/dist/field/styles.js.map +1 -1
  40. package/dist/indicator/styles.js +2 -2
  41. package/dist/indicator/styles.js.map +1 -1
  42. package/dist/mark/styles.js +3 -0
  43. package/dist/mark/styles.js.map +1 -1
  44. package/dist/navigation/styles.js +1 -1
  45. package/dist/navigation/styles.js.map +1 -1
  46. package/dist/row/styles.js +1 -1
  47. package/dist/row/styles.js.map +1 -1
  48. package/dist/styles/overlay.js +1 -0
  49. package/dist/styles/overlay.js.map +1 -1
  50. package/dist/styles.css +17 -1
  51. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["c","_c","ComponentProps","ReactElement","ReactNode","RefAttributes","ClassNameOrFunction","MenuItemRenderProps","PopoverRenderProps","MenuItemProps","RACMenuItemProps","MenuLoadMoreItemProps","RACMenuLoadMoreItemProps","MenuProps","RACMenuProps","MenuSectionProps","RACMenuSectionProps","MenuTriggerProps","RACMenuTriggerProps","StyleOrFunction","stylex","Header","Keyboard","Menu","RACMenu","MenuItem","RACMenuItem","MenuLoadMoreItem","RACMenuLoadMoreItem","MenuSection","RACMenuSection","MenuTrigger","RACMenuTrigger","Popover","RACPopover","SubmenuTrigger","RACSubmenuTrigger","Text","OverlayAlign","OverlaySide","CollectionLoadMore","textOf","ChevronEndGlyph","useRipple","RowContent","rowStyles","mergeStatefulStyles","mergeStyles","overlay","placementOf","popupOrigin","colors","radii","sizing","spacing","typography","Separator","MENU_MIN","MENU_MAX","styles","content","kWkggS","kaIpWk","ks0D6T","k7Eaqz","k3XXqK","k8WAf4","$$css","MenuAlign","MenuContentProps","align","alignOffset","className","container","Element","search","side","MenuSide","sideOffset","style","Omit","T","children","leading","shortcut","trailing","MenuLoadMoreProps","label","header","MenuSeparatorProps","MenuSubmenuProps","trigger","delay","itemContent","ripple","state","isDisabled","isSelected","trailingOf","itemStyles","props","base","menu","selectedMenu","isHovered","hovered","isFocusVisible","focusVisible","isPressed","pressed","disabled","t0","$","t1","MenuContent","ref","undefined","t2","surfaceStyles","t3","t4","t5","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","T0","handlers","surface","t6","MenuLoadMore","MenuSeparator","MenuSubmenu","popup","placement","hasSubmenu","Content","Item","LoadMore","Section","Submenu","stylex.props","Menu","_c","RACMenuTrigger","RACMenu","RACPopover","MenuItem","RACMenuItem","RACMenuLoadMoreItem","MenuSection","RACMenuSection","Separator","RACSubmenuTrigger"],"sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactElement, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, MenuItemRenderProps, PopoverRenderProps, MenuItemProps as RACMenuItemProps, MenuLoadMoreItemProps as RACMenuLoadMoreItemProps, MenuProps as RACMenuProps, MenuSectionProps as RACMenuSectionProps, MenuTriggerProps as RACMenuTriggerProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Header, Keyboard, Menu as RACMenu, MenuItem as RACMenuItem, MenuLoadMoreItem as RACMenuLoadMoreItem, MenuSection as RACMenuSection, MenuTrigger as RACMenuTrigger, Popover as RACPopover, SubmenuTrigger as RACSubmenuTrigger, Text } from 'react-aria-components';\nimport type { OverlayAlign, OverlaySide } from '../../styles/overlay';\nimport { CollectionLoadMore } from '../../collection';\nimport { textOf } from '../../collection/text';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay, placementOf, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, sizing, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Separator from '../separator';\n\n// The menus page's menu: a surface between 112 and 280 wide with a 4dp\n// corner and 8dp above and below its items, holding rows of the row module's\n// menu variant — 48dp tall, a label-large label, tertiary container when\n// selected. The surface itself is the overlay module's, shared with Popover\n// and Sheet, with the two things the menus page decides differently applied\n// over it: the corner, which is the extra-small step rather than the\n// medium one every other overlay takes, and the container colour, which is\n// the Expressive column's surface container low rather than the baseline's\n// surface container.\n//\n// Six parts, because everything a menu holds takes arbitrary content:\n// `Menu.Content`, `Menu.Item`, `Menu.Section`, `Menu.Separator`,\n// `Menu.Submenu` and `Menu.LoadMore`. A `Button` or `IconButton` placed\n// directly inside `Menu` is the trigger, wired through React Aria's context\n// rather than a part of ours — the same arrangement Sheet and Popover use.\n//\n// Four things are worth knowing about how this maps onto React Aria.\n//\n// **The item's styles are a function of its render state.** StyleX cannot\n// target `[data-selected]` on the element it is styling, so selection,\n// disabled and the rest are read from the state React Aria hands the\n// `className` function, wrapped in `mergeStatefulStyles` so a call site's own\n// `className` survives.\n//\n// **A shortcut goes through React Aria's `Keyboard` slot**, and the label\n// through its `Text` slot. The second is what makes the first work: React\n// Aria points the item's `aria-labelledby` at the labelled text, so a screen\n// reader reads the label alone and announces the keystroke separately. Left\n// as plain content, the item's name is its whole text and the shortcut is\n// read as part of what the item does. The keycap itself is the library's.\n//\n// **A submenu's arrow is drawn from render state, not from a prop.** React\n// Aria reports `hasSubmenu` on the item inside a `SubmenuTrigger`, so an item\n// that opens one gets the chevron without the call site saying so twice. The\n// glyph carries no direction of its own, so the style mirrors it under a\n// right-to-left writing mode.\n//\n// **A menu's children are a collection**, so anything that is not an item is\n// dropped: React Aria walks them looking for items and finds a search input\n// no place to be. `Menu.Content` therefore takes a `search` slot, drawn on\n// the surface above the items — which is also what puts the bar and the\n// items inside one `Autocomplete` when the menu is filtered.\n//\n// **A separator needs no slot from the call site.** React Aria's menu\n// provides the separator context, which is what `Menu.Separator` picks up —\n// that is why Separator moved onto React Aria in Phase 0. What is added here\n// is the menus page's 8dp either side of the rule.\n\nconst MENU_MIN = '112px';\nconst MENU_MAX = '280px';\nconst styles = {\n content: {\n kWkggS: \"x1vnz5z6\",\n kaIpWk: \"x1tfhd1\",\n ks0D6T: \"x1jkqq1h\",\n k7Eaqz: \"x1c7vg25\",\n k3XXqK: \"x1t137rt\",\n k8WAf4: \"x1cmllll\",\n $$css: true\n }\n};\ntype MenuAlign = OverlayAlign;\ntype MenuContentProps<T extends object = object> = {\n /**\n * Where the menu lines up along that side. Left out, a menu lines up with\n * the start of its trigger, and a submenu with the top of the item that\n * opens it.\n */\n align?: MenuAlign;\n /** Moves the menu along that side, in pixels. */\n alignOffset?: number;\n /**\n * Lands on the surface, which is the element a layout positions. A\n * function may compute the class from the surface's render state.\n */\n className?: ClassNameOrFunction<PopoverRenderProps>;\n /**\n * Where to portal the menu. Defaults to the container of the `ThemeScope`\n * around it, which keeps the menu 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 menu\n * renders outside and keeps the page's tokens.\n */\n container?: Element;\n /**\n * Content drawn on the surface above the items — a search bar that filters\n * them, usually. It goes here rather than among the children because a\n * menu's children are a collection: React Aria walks them for items and\n * drops anything else, so an input written beside them disappears.\n *\n * To filter with it, wrap this whole part in `Autocomplete`, which puts\n * the bar and the items inside one wrapper.\n */\n search?: ReactNode;\n /**\n * Which side of the trigger the menu opens on. Left out, a menu opens below\n * its trigger and a submenu at the inline end of the item that opens it,\n * where the item's chevron points — the places React Aria gives each.\n * Given `align` alone, the side is `bottom`.\n */\n side?: MenuSide;\n /**\n * How far the menu sits from the trigger, in pixels. Left out, React Aria's:\n * 8, or 0 for a menu opened with `trigger=\"contextMenu\"`.\n */\n sideOffset?: number;\n /** Lands on the surface, as `className` does. */\n style?: StyleOrFunction<PopoverRenderProps>;\n} & Omit<RACMenuProps<T>, 'className' | 'style'>;\ntype MenuItemProps<T extends object = object> = {\n /** The item's label — what it does. */\n children?: ReactNode;\n /** A function may compute the class from the item's render state. */\n className?: RACMenuItemProps<T>['className'];\n /** Content before the label, usually an icon. */\n leading?: ReactNode;\n /**\n * The keystroke that runs the item, drawn as a keycap at the end. Goes\n * through React Aria's keyboard slot, so a screen reader announces it\n * apart from the label rather than reading the two as one name.\n */\n shortcut?: ReactNode;\n /** A function may compute the style from the item's render state. */\n style?: RACMenuItemProps<T>['style'];\n /** Content after the label, before the shortcut. */\n trailing?: ReactNode;\n} & Omit<RACMenuItemProps<T>, 'children' | 'className' | 'style'>;\ntype MenuLoadMoreProps = Omit<RACMenuLoadMoreItemProps, 'children'> & {\n /**\n * What the row says while it is loading. Read by a screen reader; the ring\n * itself carries no text.\n * Left out, it is the word for it in the I18nProvider's locale — \"Loading\n * more\" in English.\n */\n label?: string;\n};\n\n// `children` is optional here where React Aria makes it required, so the\n// type reads the way Sheet's and Popover's do: a root that composes rather\n// than one that has to be handed something. Sheet does the same for the same\n// reason.\ntype MenuProps = Omit<RACMenuTriggerProps, 'children'> & {\n /** The trigger, then the `Menu.Content` it opens. */\n children?: ReactNode;\n};\ntype MenuSectionProps<T extends object = object> = Omit<RACMenuSectionProps<T>, 'children'> & {\n /**\n * The items in the section. A section built from data puts React Aria's\n * `Collection` in here rather than a render function, since the header is\n * an element beside them.\n */\n children?: ReactNode;\n /**\n * The section's heading, rendered through React Aria's header so the\n * section is named by it. A section without one is a group with no name.\n */\n header?: ReactNode;\n};\ntype MenuSeparatorProps = Omit<ComponentProps<typeof Separator>, 'orientation'>;\ntype MenuSide = OverlaySide;\ntype MenuSubmenuProps = {\n /**\n * The item that opens the submenu, then the `Menu.Content` it opens.\n * Exactly those two, in that order. The count is the type's to enforce;\n * the order is not, since every JSX element has the same type.\n */\n children: [trigger: ReactElement, content: ReactElement];\n /**\n * How long the pointer rests on the item before the submenu opens, in\n * milliseconds.\n * @default 200\n */\n delay?: number;\n};\n\n// What the item draws, from React Aria's render state. Built by a call\n// 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\n// on its inputs.\n//\n// The render state decides two things: the chevron, which an item inside a\n// SubmenuTrigger gets without the call site asking twice, and the supporting\n// line's colour, which the row module takes from whether the row is selected\n// or disabled.\nfunction itemContent(children: ReactNode, leading: ReactNode, shortcut: ReactNode, trailing: ReactNode, ripple: ReactNode) {\n return (state: MenuItemRenderProps) => <>\n <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} trailing={trailingOf(state, shortcut, trailing)} variant=\"menu\">\n <Text slot=\"label\">{children}</Text>\n </RowContent>\n {state.isDisabled ? null : ripple}\n </>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so an\n// item's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so its ground and colour\n// win over the selected container's. The state layers come from the render\n// state as well — see `focusVisible` in src/row/styles.ts — and React Aria\n// reports none of them on a disabled item, so nothing has to outrank them.\n// No overline, and so no three-line row: the menus page gives one item\n// height and one line of text. `List.Item` and `ListBox.Item` take the prop\n// because the lists page is what they draw, and this row is 48dp rather than\n// that page's 56.\nfunction itemStyles(state: MenuItemRenderProps) {\n return stylex.props(rowStyles.base, rowStyles.menu, state.isSelected && rowStyles.selectedMenu, state.isHovered && rowStyles.hovered, state.isFocusVisible && rowStyles.focusVisible, state.isPressed && rowStyles.pressed, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * A list of actions opened from a control. Open state is React Aria's: pass\n * `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it keep\n * its own.\n *\n * A `Button` or `IconButton` placed directly inside opens it; everything the\n * menu shows goes in `Menu.Content`, since the trigger lives in the page\n * while the menu is portalled out to the end of the body.\n *\n * ```tsx\n * <Menu>\n * <Button>Open</Button>\n * <Menu.Content aria-label=\"Label\">\n * <Menu.Item id=\"first\">First item</Menu.Item>\n * </Menu.Content>\n * </Menu>\n * ```\n */\nfunction Menu({\n children,\n ...props\n}: MenuProps) {\n return <RACMenuTrigger {...props}>{children}</RACMenuTrigger>;\n}\n\n/**\n * The menu itself, and the surface it is drawn on. React Aria names it after\n * the control that opened it, so `aria-label` here is ignored — name the\n * trigger instead.\n *\n * The call site's `className` and `style` land on the surface, which is the\n * element a layout positions.\n *\n * The placement and the offsets are passed on only where the call site gives\n * them. React Aria hands the popover a placement of its own through context —\n * below the trigger for a menu, at the item's inline end for a submenu — and\n * a prop set here replaces it, so a default written here opened every\n * submenu below its item, over the rest of the menu it came from.\n */\nfunction MenuContent<T extends object = object>({\n align,\n alignOffset,\n className,\n container,\n ref,\n search,\n side,\n sideOffset,\n style,\n ...props\n}: MenuContentProps<T> & RefAttributes<HTMLElement>) {\n return <RACPopover crossOffset={alignOffset} offset={sideOffset} placement={side === undefined && align === undefined ? undefined : placementOf(side ?? 'bottom', align ?? 'start')}\n // The surface, where the call site's class and style land, rather than\n // the menu inside it, which takes the rest of the props.\n ref={ref}\n // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n UNSTABLE_portalContainer={container} {...mergeStatefulStyles(surfaceStyles, {\n className,\n style\n })}>\n {search === undefined ? null : <div className=\"x9f619 xqf7pud xn60lsn\">{search}</div>}\n <RACMenu<T> {...props} className=\"x9f619 x78zum5 xdt5ytf x1t137rt\" />\n </RACPopover>;\n}\n\n/**\n * One action. Its slots are the row's: `leading` before the label, the label\n * as children, and `trailing` after it, with `shortcut` at the end. An item\n * that opens a submenu draws the chevron itself.\n */\nfunction MenuItem<T extends object = object>({\n children,\n leading,\n onContextMenu,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp,\n shortcut,\n textValue,\n trailing,\n ...props\n}: MenuItemProps<T> & RefAttributes<HTMLDivElement>) {\n // The press ripple List's rows draw — see ListItem there.\n const ripple = useRipple<HTMLDivElement>(true, {\n onContextMenu,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp\n }, true);\n return <RACMenuItem textValue={textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n {itemContent(children, leading, shortcut, trailing, ripple.surface)}\n </RACMenuItem>;\n}\n\n/**\n * The row shown while more items are being fetched. React Aria calls\n * `onLoadMore` when it comes into view, and draws it only while `isLoading`.\n */\nfunction MenuLoadMore({\n label,\n ...props\n}: MenuLoadMoreProps & RefAttributes<HTMLDivElement>) {\n return <RACMenuLoadMoreItem {...props} {...mergeStyles({\n className: \"x6s0dn4 x9f619 x78zum5 xl56j7k x1ddmzdj\"\n }, props)}>\n <CollectionLoadMore diameter=\"20px\" label={label} />\n </RACMenuLoadMoreItem>;\n}\n\n/**\n * A named group of items. `header` names it, and is what a screen reader\n * reads before the items inside.\n */\nfunction MenuSection<T extends object = object>({\n children,\n header,\n ...props\n}: MenuSectionProps<T> & RefAttributes<HTMLElement>) {\n return <RACMenuSection {...props}>\n {header === undefined ? null : <Header className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x6gmt8y x790zyz\">{header}</Header>}\n {children}\n </RACMenuSection>;\n}\n\n/**\n * A rule between groups of items. It takes its role from the menu around it,\n * so it needs no slot from the call site.\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n return <Separator {...props} {...mergeStyles({\n className: \"xwpi13i\"\n }, props)} />;\n}\n\n/**\n * An item that opens a menu of its own. Takes exactly two children: the\n * `Menu.Item` that opens it, then the `Menu.Content` it opens.\n */\nfunction MenuSubmenu(props: MenuSubmenuProps) {\n return <RACSubmenuTrigger {...props} />;\n}\n\n// The surface grows from the edge it is anchored by, which is what makes it\n// read as coming out of the trigger. Built by a call rather than written\n// inline at the prop, which is what react-perf's no-new-function-as-prop is\n// after.\nfunction surfaceStyles(state: PopoverRenderProps) {\n return stylex.props(overlay.popup, styles.content, popupOrigin(state.placement));\n}\n\n/** What sits after the label: the call site's content, then the shortcut or\n * the submenu's chevron. */\nfunction trailingOf(state: MenuItemRenderProps, shortcut: ReactNode, trailing: ReactNode) {\n if (state.hasSubmenu) {\n return <>\n {trailing}\n <ChevronEndGlyph className=\"x1qx5ct2 xw4jnvo x19axjrm x1c071of\" />\n </>;\n }\n if (shortcut === undefined && trailing === undefined) {\n return undefined;\n }\n return <>\n {trailing}\n {shortcut === undefined ? null : <Keyboard className=\"x1w5n3ug\">{shortcut}</Keyboard>}\n </>;\n}\nMenu.Content = MenuContent;\nMenu.Item = MenuItem;\nMenu.LoadMore = MenuLoadMore;\nMenu.Section = MenuSection;\nMenu.Separator = MenuSeparator;\nMenu.Submenu = MenuSubmenu;\nexport type { MenuAlign, MenuContentProps, MenuItemProps, MenuLoadMoreProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuSide, MenuSubmenuProps };\nexport { MenuContent, MenuItem, MenuLoadMore, MenuSection, MenuSeparator, MenuSubmenu };\nexport default Menu;"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["c","_c","ComponentProps","ReactElement","ReactNode","RefAttributes","ClassNameOrFunction","MenuItemRenderProps","PopoverRenderProps","MenuItemProps","RACMenuItemProps","MenuLoadMoreItemProps","RACMenuLoadMoreItemProps","MenuProps","RACMenuProps","MenuSectionProps","RACMenuSectionProps","MenuTriggerProps","RACMenuTriggerProps","StyleOrFunction","stylex","Header","Keyboard","Menu","RACMenu","MenuItem","RACMenuItem","MenuLoadMoreItem","RACMenuLoadMoreItem","MenuSection","RACMenuSection","MenuTrigger","RACMenuTrigger","Popover","RACPopover","SubmenuTrigger","RACSubmenuTrigger","Text","OverlayAlign","OverlaySide","CollectionLoadMore","textOf","ChevronEndGlyph","useRipple","RowContent","rowStyles","mergeStatefulStyles","mergeStyles","overlay","placementOf","popupOrigin","colors","radii","sizing","spacing","typography","Separator","MENU_MIN","MENU_MAX","styles","content","kWkggS","kaIpWk","ks0D6T","k7Eaqz","k3XXqK","k8WAf4","$$css","MenuAlign","MenuContentProps","align","alignOffset","className","container","Element","search","side","MenuSide","sideOffset","style","Omit","T","children","leading","shortcut","trailing","MenuLoadMoreProps","label","header","MenuSeparatorProps","MenuSubmenuProps","trigger","delay","itemContent","ripple","state","isDisabled","isSelected","trailingOf","itemStyles","props","base","menu","selectedMenu","isHovered","hovered","isFocusVisible","focusVisible","isPressed","pressed","disabled","t0","$","t1","MenuContent","ref","undefined","t2","surfaceStyles","t3","t4","t5","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","T0","handlers","surface","t6","MenuLoadMore","MenuSeparator","MenuSubmenu","popup","placement","hasSubmenu","Content","Item","LoadMore","Section","Submenu","stylex.props","Menu","_c","RACMenuTrigger","RACMenu","RACPopover","MenuItem","RACMenuItem","RACMenuLoadMoreItem","MenuSection","RACMenuSection","Separator","RACSubmenuTrigger"],"sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactElement, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, MenuItemRenderProps, PopoverRenderProps, MenuItemProps as RACMenuItemProps, MenuLoadMoreItemProps as RACMenuLoadMoreItemProps, MenuProps as RACMenuProps, MenuSectionProps as RACMenuSectionProps, MenuTriggerProps as RACMenuTriggerProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Header, Keyboard, Menu as RACMenu, MenuItem as RACMenuItem, MenuLoadMoreItem as RACMenuLoadMoreItem, MenuSection as RACMenuSection, MenuTrigger as RACMenuTrigger, Popover as RACPopover, SubmenuTrigger as RACSubmenuTrigger, Text } from 'react-aria-components';\nimport type { OverlayAlign, OverlaySide } from '../../styles/overlay';\nimport { CollectionLoadMore } from '../../collection';\nimport { textOf } from '../../collection/text';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay, placementOf, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, sizing, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Separator from '../separator';\n\n// The menus page's menu: a surface between 112 and 280 wide with a 4dp\n// corner and 8dp above and below its items, holding rows of the row module's\n// menu variant — 48dp tall, a label-large label, tertiary container when\n// selected. The surface itself is the overlay module's, shared with Popover\n// and Sheet, with the two things the menus page decides differently applied\n// over it: the corner, which is the extra-small step rather than the\n// medium one every other overlay takes, and the container colour, which is\n// the Expressive column's surface container low rather than the baseline's\n// surface container.\n//\n// Six parts, because everything a menu holds takes arbitrary content:\n// `Menu.Content`, `Menu.Item`, `Menu.Section`, `Menu.Separator`,\n// `Menu.Submenu` and `Menu.LoadMore`. A `Button` or `IconButton` placed\n// directly inside `Menu` is the trigger, wired through React Aria's context\n// rather than a part of ours — the same arrangement Sheet and Popover use.\n//\n// Four things are worth knowing about how this maps onto React Aria.\n//\n// **The item's styles are a function of its render state.** StyleX cannot\n// target `[data-selected]` on the element it is styling, so selection,\n// disabled and the rest are read from the state React Aria hands the\n// `className` function, wrapped in `mergeStatefulStyles` so a call site's own\n// `className` survives.\n//\n// **A shortcut goes through React Aria's `Keyboard` slot**, and the label\n// through its `Text` slot. The second is what makes the first work: React\n// Aria points the item's `aria-labelledby` at the labelled text, so a screen\n// reader reads the label alone and announces the keystroke separately. Left\n// as plain content, the item's name is its whole text and the shortcut is\n// read as part of what the item does. The keycap itself is the library's.\n//\n// **A submenu's arrow is drawn from render state, not from a prop.** React\n// Aria reports `hasSubmenu` on the item inside a `SubmenuTrigger`, so an item\n// that opens one gets the chevron without the call site saying so twice. The\n// glyph carries no direction of its own, so the style mirrors it under a\n// right-to-left writing mode.\n//\n// **A menu's children are a collection**, so anything that is not an item is\n// dropped: React Aria walks them looking for items and finds a search input\n// no place to be. `Menu.Content` therefore takes a `search` slot, drawn on\n// the surface above the items — which is also what puts the bar and the\n// items inside one `Autocomplete` when the menu is filtered.\n//\n// **A separator needs no slot from the call site.** React Aria's menu\n// provides the separator context, which is what `Menu.Separator` picks up —\n// that is why Separator moved onto React Aria in Phase 0. What is added here\n// is the menus page's 8dp either side of the rule.\n\nconst MENU_MIN = '112px';\nconst MENU_MAX = '280px';\nconst styles = {\n content: {\n kWkggS: \"x1vnz5z6\",\n kaIpWk: \"x1tfhd1\",\n ks0D6T: \"x1jkqq1h\",\n k7Eaqz: \"x1c7vg25\",\n k3XXqK: \"x1t137rt\",\n k8WAf4: \"x1cmllll\",\n $$css: true\n }\n};\ntype MenuAlign = OverlayAlign;\ntype MenuContentProps<T extends object = object> = {\n /**\n * Where the menu lines up along that side. Left out, a menu lines up with\n * the start of its trigger, and a submenu with the top of the item that\n * opens it.\n */\n align?: MenuAlign;\n /** Moves the menu along that side, in pixels. */\n alignOffset?: number;\n /**\n * Lands on the surface, which is the element a layout positions. A\n * function may compute the class from the surface's render state.\n */\n className?: ClassNameOrFunction<PopoverRenderProps>;\n /**\n * Where to portal the menu. Defaults to the container of the `ThemeScope`\n * around it, which keeps the menu 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 menu\n * renders outside and keeps the page's tokens.\n */\n container?: Element;\n /**\n * Content drawn on the surface above the items — a search bar that filters\n * them, usually. It goes here rather than among the children because a\n * menu's children are a collection: React Aria walks them for items and\n * drops anything else, so an input written beside them disappears.\n *\n * To filter with it, wrap this whole part in `Autocomplete`, which puts\n * the bar and the items inside one wrapper.\n */\n search?: ReactNode;\n /**\n * Which side of the trigger the menu opens on. Left out, a menu opens below\n * its trigger and a submenu at the inline end of the item that opens it,\n * where the item's chevron points — the places React Aria gives each.\n * Given `align` alone, the side is `bottom`.\n */\n side?: MenuSide;\n /**\n * How far the menu sits from the trigger, in pixels. Left out, React Aria's:\n * 8, or 0 for a menu opened with `trigger=\"contextMenu\"`.\n */\n sideOffset?: number;\n /** Lands on the surface, as `className` does. */\n style?: StyleOrFunction<PopoverRenderProps>;\n} & Omit<RACMenuProps<T>, 'className' | 'style'>;\ntype MenuItemProps<T extends object = object> = {\n /** The item's label — what it does. */\n children?: ReactNode;\n /** A function may compute the class from the item's render state. */\n className?: RACMenuItemProps<T>['className'];\n /** Content before the label, usually an icon. */\n leading?: ReactNode;\n /**\n * The keystroke that runs the item, drawn as a keycap at the end. Goes\n * through React Aria's keyboard slot, so a screen reader announces it\n * apart from the label rather than reading the two as one name.\n */\n shortcut?: ReactNode;\n /** A function may compute the style from the item's render state. */\n style?: RACMenuItemProps<T>['style'];\n /** Content after the label, before the shortcut. */\n trailing?: ReactNode;\n} & Omit<RACMenuItemProps<T>, 'children' | 'className' | 'style'>;\ntype MenuLoadMoreProps = Omit<RACMenuLoadMoreItemProps, 'children'> & {\n /**\n * What the row says while it is loading. Read by a screen reader; the ring\n * itself carries no text.\n * Left out, it is the word for it in the I18nProvider's locale — \"Loading\n * more\" in English.\n */\n label?: string;\n};\n\n// `children` is optional here where React Aria makes it required, so the\n// type reads the way Sheet's and Popover's do: a root that composes rather\n// than one that has to be handed something. Sheet does the same for the same\n// reason.\ntype MenuProps = Omit<RACMenuTriggerProps, 'children'> & {\n /** The trigger, then the `Menu.Content` it opens. */\n children?: ReactNode;\n};\ntype MenuSectionProps<T extends object = object> = Omit<RACMenuSectionProps<T>, 'children'> & {\n /**\n * The items in the section. A section built from data puts React Aria's\n * `Collection` in here rather than a render function, since the header is\n * an element beside them.\n */\n children?: ReactNode;\n /**\n * The section's heading, rendered through React Aria's header so the\n * section is named by it. A section without one is a group with no name.\n */\n header?: ReactNode;\n};\ntype MenuSeparatorProps = Omit<ComponentProps<typeof Separator>, 'orientation'>;\ntype MenuSide = OverlaySide;\ntype MenuSubmenuProps = {\n /**\n * The item that opens the submenu, then the `Menu.Content` it opens.\n * Exactly those two, in that order. The count is the type's to enforce;\n * the order is not, since every JSX element has the same type.\n */\n children: [trigger: ReactElement, content: ReactElement];\n /**\n * How long the pointer rests on the item before the submenu opens, in\n * milliseconds.\n * @default 200\n */\n delay?: number;\n};\n\n// What the item draws, from React Aria's render state. Built by a call\n// 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\n// on its inputs.\n//\n// The render state decides two things: the chevron, which an item inside a\n// SubmenuTrigger gets without the call site asking twice, and the supporting\n// line's colour, which the row module takes from whether the row is selected\n// or disabled.\nfunction itemContent(children: ReactNode, leading: ReactNode, shortcut: ReactNode, trailing: ReactNode, ripple: ReactNode) {\n return (state: MenuItemRenderProps) => <>\n <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} trailing={trailingOf(state, shortcut, trailing)} variant=\"menu\">\n <Text slot=\"label\">{children}</Text>\n </RowContent>\n {state.isDisabled ? null : ripple}\n </>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so an\n// item's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so its ground and colour\n// win over the selected container's. The state layers come from the render\n// state as well — see `focusVisible` in src/row/styles.ts — and React Aria\n// reports none of them on a disabled item, so nothing has to outrank them.\n// No overline, and so no three-line row: the menus page gives one item\n// height and one line of text. `List.Item` and `ListBox.Item` take the prop\n// because the lists page is what they draw, and this row is 48dp rather than\n// that page's 56.\nfunction itemStyles(state: MenuItemRenderProps) {\n return stylex.props(rowStyles.base, rowStyles.menu, state.isSelected && rowStyles.selectedMenu, state.isHovered && rowStyles.hovered, state.isFocusVisible && rowStyles.focusVisible, state.isPressed && rowStyles.pressed, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * A list of actions opened from a control. Open state is React Aria's: pass\n * `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it keep\n * its own.\n *\n * A `Button` or `IconButton` placed directly inside opens it; everything the\n * menu shows goes in `Menu.Content`, since the trigger lives in the page\n * while the menu is portalled out to the end of the body.\n *\n * ```tsx\n * <Menu>\n * <Button>Open</Button>\n * <Menu.Content aria-label=\"Label\">\n * <Menu.Item id=\"first\">First item</Menu.Item>\n * </Menu.Content>\n * </Menu>\n * ```\n */\nfunction Menu({\n children,\n ...props\n}: MenuProps) {\n return <RACMenuTrigger {...props}>{children}</RACMenuTrigger>;\n}\n\n/**\n * The menu itself, and the surface it is drawn on. React Aria names it after\n * the control that opened it, so `aria-label` here is ignored — name the\n * trigger instead.\n *\n * The call site's `className` and `style` land on the surface, which is the\n * element a layout positions.\n *\n * The placement and the offsets are passed on only where the call site gives\n * them. React Aria hands the popover a placement of its own through context —\n * below the trigger for a menu, at the item's inline end for a submenu — and\n * a prop set here replaces it, so a default written here opened every\n * submenu below its item, over the rest of the menu it came from.\n */\nfunction MenuContent<T extends object = object>({\n align,\n alignOffset,\n className,\n container,\n ref,\n search,\n side,\n sideOffset,\n style,\n ...props\n}: MenuContentProps<T> & RefAttributes<HTMLElement>) {\n return <RACPopover crossOffset={alignOffset} offset={sideOffset} placement={side === undefined && align === undefined ? undefined : placementOf(side ?? 'bottom', align ?? 'start')}\n // The surface, where the call site's class and style land, rather than\n // the menu inside it, which takes the rest of the props.\n ref={ref}\n // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n UNSTABLE_portalContainer={container} {...mergeStatefulStyles(surfaceStyles, {\n className,\n style\n })}>\n {search === undefined ? null : <div className=\"x9f619 xqf7pud xn60lsn\">{search}</div>}\n <RACMenu<T> {...props} className=\"x9f619 x78zum5 xdt5ytf x1t137rt\" />\n </RACPopover>;\n}\n\n/**\n * One action. Its slots are the row's: `leading` before the label, the label\n * as children, and `trailing` after it, with `shortcut` at the end. An item\n * that opens a submenu draws the chevron itself.\n */\nfunction MenuItem<T extends object = object>({\n children,\n leading,\n onContextMenu,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp,\n shortcut,\n textValue,\n trailing,\n ...props\n}: MenuItemProps<T> & RefAttributes<HTMLDivElement>) {\n // The press ripple List's rows draw — see ListItem there.\n const ripple = useRipple<HTMLDivElement>(true, {\n onContextMenu,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp\n }, true);\n return <RACMenuItem textValue={textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n {itemContent(children, leading, shortcut, trailing, ripple.surface)}\n </RACMenuItem>;\n}\n\n/**\n * The row shown while more items are being fetched. React Aria calls\n * `onLoadMore` when it comes into view, and draws it only while `isLoading`.\n */\nfunction MenuLoadMore({\n label,\n ...props\n}: MenuLoadMoreProps & RefAttributes<HTMLDivElement>) {\n return <RACMenuLoadMoreItem {...props} {...mergeStyles({\n className: \"x6s0dn4 x9f619 x78zum5 xl56j7k x1ddmzdj\"\n }, props)}>\n <CollectionLoadMore diameter=\"20px\" label={label} />\n </RACMenuLoadMoreItem>;\n}\n\n/**\n * A named group of items. `header` names it, and is what a screen reader\n * reads before the items inside.\n */\nfunction MenuSection<T extends object = object>({\n children,\n header,\n ...props\n}: MenuSectionProps<T> & RefAttributes<HTMLElement>) {\n return <RACMenuSection {...props}>\n {header === undefined ? null : <Header className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x6gmt8y x790zyz\">{header}</Header>}\n {children}\n </RACMenuSection>;\n}\n\n/**\n * A rule between groups of items. It takes its role from the menu around it,\n * so it needs no slot from the call site.\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n return <Separator {...props} {...mergeStyles({\n className: \"xwpi13i\"\n }, props)} />;\n}\n\n/**\n * An item that opens a menu of its own. Takes exactly two children: the\n * `Menu.Item` that opens it, then the `Menu.Content` it opens.\n */\nfunction MenuSubmenu(props: MenuSubmenuProps) {\n return <RACSubmenuTrigger {...props} />;\n}\n\n// The surface grows from the edge it is anchored by, which is what makes it\n// read as coming out of the trigger. Built by a call rather than written\n// inline at the prop, which is what react-perf's no-new-function-as-prop is\n// after.\nfunction surfaceStyles(state: PopoverRenderProps) {\n return stylex.props(overlay.popup, styles.content, popupOrigin(state.placement));\n}\n\n/** What sits after the label: the call site's content, then the shortcut or\n * the submenu's chevron. */\nfunction trailingOf(state: MenuItemRenderProps, shortcut: ReactNode, trailing: ReactNode) {\n if (state.hasSubmenu) {\n return <>\n {trailing}\n <ChevronEndGlyph className=\"x1qx5ct2 xw4jnvo x19axjrm x1c071of\" />\n </>;\n }\n if (shortcut === undefined && trailing === undefined) {\n return undefined;\n }\n return <>\n {trailing}\n {shortcut === undefined ? null : <Keyboard {...{\n 0: {\n className: \"x1w5n3ug\"\n },\n 1: {\n className: \"x1heor9g\"\n }\n }[!!state.isDisabled << 0]}>\n {shortcut}\n </Keyboard>}\n </>;\n}\nMenu.Content = MenuContent;\nMenu.Item = MenuItem;\nMenu.LoadMore = MenuLoadMore;\nMenu.Section = MenuSection;\nMenu.Separator = MenuSeparator;\nMenu.Submenu = MenuSubmenu;\nexport type { MenuAlign, MenuContentProps, MenuItemProps, MenuLoadMoreProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuSide, MenuSubmenuProps };\nexport { MenuContent, MenuItem, MenuLoadMore, MenuSection, MenuSeparator, MenuSubmenu };\nexport default Menu;"],"mappings":"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"}
@@ -4,9 +4,9 @@ import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
4
4
  import { focus } from "../../styles/focus.js";
5
5
  import { overlay, placementOf, popupOrigin } from "../../styles/overlay.js";
6
6
  import { c } from "react/compiler-runtime";
7
- import { createContext, useContext, useEffect, useId, useState } from "react";
7
+ import { createContext, useContext, useEffect, useId, useRef, useState } from "react";
8
8
  import { jsx } from "react/jsx-runtime";
9
- import { Dialog, DialogTrigger, Heading, Popover, PreviewTrigger, Text } from "react-aria-components";
9
+ import { ButtonContext, DEFAULT_SLOT, Dialog, DialogContext, DialogTrigger, Heading, HeadingContext, OverlayTriggerStateContext, Popover, PreviewTrigger, Text, TextContext } from "react-aria-components";
10
10
  //#region src/components/popover/index.tsx
11
11
  const DEFAULT_SIDE_OFFSET = 8;
12
12
  const styles = {
@@ -57,6 +57,198 @@ const DescriptionContext = createContext({
57
57
  id: "",
58
58
  register: () => () => {}
59
59
  });
60
+ const TitleContext = createContext(() => () => {});
61
+ const TEXT_SLOTS = { slots: {
62
+ [DEFAULT_SLOT]: {},
63
+ description: {}
64
+ } };
65
+ /**
66
+ * The element that carries the dialog role in a non-modal popover: what
67
+ * React Aria's `Dialog` gives a modal one — the role, the name from the
68
+ * title, the description, and the close slot — without the two things that
69
+ * make `Dialog` a modal's.
70
+ *
71
+ * `Dialog` moves focus into itself as it mounts, whatever opened it, and
72
+ * holds focus inside the overlay until it closes. A hover popover therefore
73
+ * took focus from wherever the reader was typing the moment a pointer
74
+ * rested on its trigger, and Tab in an open popover went round its own
75
+ * controls forever, though the page behind a non-modal popover is meant to
76
+ * stay in reach. Here a pressed popover still takes focus as it opens, since
77
+ * a press asked for the panel, but a hovered one leaves it where it is, and
78
+ * Tab past the panel's last control carries on from the trigger in the
79
+ * page. React Aria's popover sees a dialog inside it and so adds no role or
80
+ * focus handling of its own.
81
+ */
82
+ function PanelDialog(t0) {
83
+ const $ = c(35);
84
+ let children;
85
+ let id;
86
+ let labelledBy;
87
+ let props$2;
88
+ let slot;
89
+ if ($[0] !== t0) {
90
+ const { "aria-labelledby": t1, children: t2, id: t3, render: _render, slot: t4, ...t5 } = t0;
91
+ labelledBy = t1;
92
+ children = t2;
93
+ id = t3;
94
+ slot = t4;
95
+ props$2 = t5;
96
+ $[0] = t0;
97
+ $[1] = children;
98
+ $[2] = id;
99
+ $[3] = labelledBy;
100
+ $[4] = props$2;
101
+ $[5] = slot;
102
+ } else {
103
+ children = $[1];
104
+ id = $[2];
105
+ labelledBy = $[3];
106
+ props$2 = $[4];
107
+ slot = $[5];
108
+ }
109
+ const ref = useRef(null);
110
+ const state = useContext(OverlayTriggerStateContext);
111
+ const t1 = useContext(DialogContext);
112
+ let t2;
113
+ if ($[6] !== t1) {
114
+ t2 = triggerOf(t1);
115
+ $[6] = t1;
116
+ $[7] = t2;
117
+ } else t2 = $[7];
118
+ const trigger = t2;
119
+ const pressed = trigger !== void 0;
120
+ const titleId = useId();
121
+ const [titled, setTitled] = useState(false);
122
+ let t3;
123
+ if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
124
+ t3 = () => {
125
+ setTitled(true);
126
+ return () => {
127
+ setTitled(false);
128
+ };
129
+ };
130
+ $[8] = t3;
131
+ } else t3 = $[8];
132
+ const registerTitle = t3;
133
+ let t4;
134
+ if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
135
+ t4 = {};
136
+ $[9] = t4;
137
+ } else t4 = $[9];
138
+ let t5;
139
+ if ($[10] !== titleId) {
140
+ t5 = { slots: {
141
+ [DEFAULT_SLOT]: t4,
142
+ title: {
143
+ id: titleId,
144
+ level: 2
145
+ }
146
+ } };
147
+ $[10] = titleId;
148
+ $[11] = t5;
149
+ } else t5 = $[11];
150
+ const headings = t5;
151
+ let t6;
152
+ if ($[12] !== state) {
153
+ t6 = { onPress: () => {
154
+ state?.close();
155
+ } };
156
+ $[12] = state;
157
+ $[13] = t6;
158
+ } else t6 = $[13];
159
+ let t7;
160
+ if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
161
+ t7 = {};
162
+ $[14] = t7;
163
+ } else t7 = $[14];
164
+ let t8;
165
+ if ($[15] !== t6) {
166
+ t8 = { slots: {
167
+ close: t6,
168
+ [DEFAULT_SLOT]: t7
169
+ } };
170
+ $[15] = t6;
171
+ $[16] = t8;
172
+ } else t8 = $[16];
173
+ const buttons = t8;
174
+ let t10;
175
+ let t9;
176
+ if ($[17] !== pressed) {
177
+ t9 = () => {
178
+ const element = ref.current;
179
+ if (pressed && element !== null && !element.contains(document.activeElement)) element.focus({ preventScroll: true });
180
+ };
181
+ t10 = [pressed];
182
+ $[17] = pressed;
183
+ $[18] = t10;
184
+ $[19] = t9;
185
+ } else {
186
+ t10 = $[18];
187
+ t9 = $[19];
188
+ }
189
+ useEffect(t9, t10);
190
+ const t11 = labelledBy ?? (titled ? titleId : trigger?.labelledBy);
191
+ const t12 = id ?? trigger?.id;
192
+ const t13 = slot ?? void 0;
193
+ let t14;
194
+ if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
195
+ t14 = props(overlay.popupDialog, focus.ring);
196
+ $[20] = t14;
197
+ } else t14 = $[20];
198
+ let t15;
199
+ if ($[21] !== children) {
200
+ t15 = /* @__PURE__ */ jsx(TitleContext, {
201
+ value: registerTitle,
202
+ children
203
+ });
204
+ $[21] = children;
205
+ $[22] = t15;
206
+ } else t15 = $[22];
207
+ let t16;
208
+ if ($[23] !== buttons || $[24] !== t15) {
209
+ t16 = /* @__PURE__ */ jsx(TextContext, {
210
+ value: TEXT_SLOTS,
211
+ children: /* @__PURE__ */ jsx(ButtonContext, {
212
+ value: buttons,
213
+ children: t15
214
+ })
215
+ });
216
+ $[23] = buttons;
217
+ $[24] = t15;
218
+ $[25] = t16;
219
+ } else t16 = $[25];
220
+ let t17;
221
+ if ($[26] !== headings || $[27] !== t16) {
222
+ t17 = /* @__PURE__ */ jsx(HeadingContext, {
223
+ value: headings,
224
+ children: t16
225
+ });
226
+ $[26] = headings;
227
+ $[27] = t16;
228
+ $[28] = t17;
229
+ } else t17 = $[28];
230
+ let t18;
231
+ if ($[29] !== props$2 || $[30] !== t11 || $[31] !== t12 || $[32] !== t13 || $[33] !== t17) {
232
+ t18 = /* @__PURE__ */ jsx("section", {
233
+ ...props$2,
234
+ "aria-labelledby": t11,
235
+ id: t12,
236
+ ref,
237
+ role: "dialog",
238
+ slot: t13,
239
+ tabIndex: -1,
240
+ ...t14,
241
+ children: t17
242
+ });
243
+ $[29] = props$2;
244
+ $[30] = t11;
245
+ $[31] = t12;
246
+ $[32] = t13;
247
+ $[33] = t17;
248
+ $[34] = t18;
249
+ } else t18 = $[34];
250
+ return t18;
251
+ }
60
252
  /**
61
253
  * A panel anchored to the control that opened it. Open state is React Aria's:
62
254
  * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it
@@ -104,21 +296,22 @@ function Popover$1(t0) {
104
296
  const modal = t3 === void 0 ? false : t3;
105
297
  const size = t4 === void 0 ? "md" : t4;
106
298
  const trigger = t5 === void 0 ? "press" : t5;
107
- let t6;
108
- if ($[8] !== modal || $[9] !== size) {
109
- t6 = {
110
- modal,
299
+ const t6 = modal && trigger !== "hover";
300
+ let t7;
301
+ if ($[8] !== size || $[9] !== t6) {
302
+ t7 = {
303
+ modal: t6,
111
304
  size
112
305
  };
113
- $[8] = modal;
114
- $[9] = size;
115
- $[10] = t6;
116
- } else t6 = $[10];
117
- const context = t6;
306
+ $[8] = size;
307
+ $[9] = t6;
308
+ $[10] = t7;
309
+ } else t7 = $[10];
310
+ const context = t7;
118
311
  if (trigger === "hover") {
119
- let t7;
312
+ let t8;
120
313
  if ($[11] !== children || $[12] !== closeDelay || $[13] !== delay || $[14] !== props) {
121
- t7 = /* @__PURE__ */ jsx(PreviewTrigger, {
314
+ t8 = /* @__PURE__ */ jsx(PreviewTrigger, {
122
315
  closeDelay,
123
316
  delay,
124
317
  ...props,
@@ -128,41 +321,41 @@ function Popover$1(t0) {
128
321
  $[12] = closeDelay;
129
322
  $[13] = delay;
130
323
  $[14] = props;
131
- $[15] = t7;
132
- } else t7 = $[15];
133
- let t8;
134
- if ($[16] !== context || $[17] !== t7) {
135
- t8 = /* @__PURE__ */ jsx(PopoverContext, {
324
+ $[15] = t8;
325
+ } else t8 = $[15];
326
+ let t9;
327
+ if ($[16] !== context || $[17] !== t8) {
328
+ t9 = /* @__PURE__ */ jsx(PopoverContext, {
136
329
  value: context,
137
- children: t7
330
+ children: t8
138
331
  });
139
332
  $[16] = context;
140
- $[17] = t7;
141
- $[18] = t8;
142
- } else t8 = $[18];
143
- return t8;
333
+ $[17] = t8;
334
+ $[18] = t9;
335
+ } else t9 = $[18];
336
+ return t9;
144
337
  }
145
- let t7;
338
+ let t8;
146
339
  if ($[19] !== children || $[20] !== props) {
147
- t7 = /* @__PURE__ */ jsx(DialogTrigger, {
340
+ t8 = /* @__PURE__ */ jsx(DialogTrigger, {
148
341
  ...props,
149
342
  children
150
343
  });
151
344
  $[19] = children;
152
345
  $[20] = props;
153
- $[21] = t7;
154
- } else t7 = $[21];
155
- let t8;
156
- if ($[22] !== context || $[23] !== t7) {
157
- t8 = /* @__PURE__ */ jsx(PopoverContext, {
346
+ $[21] = t8;
347
+ } else t8 = $[21];
348
+ let t9;
349
+ if ($[22] !== context || $[23] !== t8) {
350
+ t9 = /* @__PURE__ */ jsx(PopoverContext, {
158
351
  value: context,
159
- children: t7
352
+ children: t8
160
353
  });
161
354
  $[22] = context;
162
- $[23] = t7;
163
- $[24] = t8;
164
- } else t8 = $[24];
165
- return t8;
355
+ $[23] = t8;
356
+ $[24] = t9;
357
+ } else t9 = $[24];
358
+ return t9;
166
359
  }
167
360
  /**
168
361
  * The panel itself. Everything the popover shows goes in here; the trigger
@@ -174,7 +367,7 @@ function Popover$1(t0) {
174
367
  * than being clipped by it.
175
368
  */
176
369
  function PopoverContent(t0) {
177
- const $ = c(42);
370
+ const $ = c(41);
178
371
  let alignOffset;
179
372
  let children;
180
373
  let className;
@@ -265,38 +458,35 @@ function PopoverContent(t0) {
265
458
  $[22] = t8;
266
459
  $[23] = t9;
267
460
  } else t9 = $[23];
268
- const t10 = described ? descriptionId : void 0;
269
- let t11;
270
- if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
271
- t11 = props(overlay.popupDialog, focus.ring);
272
- $[24] = t11;
273
- } else t11 = $[24];
274
- let t12;
275
- if ($[25] !== children || $[26] !== description) {
276
- t12 = /* @__PURE__ */ jsx(DescriptionContext, {
277
- value: description,
278
- children
279
- });
280
- $[25] = children;
281
- $[26] = description;
282
- $[27] = t12;
283
- } else t12 = $[27];
284
- let t13;
285
- if ($[28] !== props$1 || $[29] !== t10 || $[30] !== t12) {
286
- t13 = /* @__PURE__ */ jsx(Dialog, {
287
- "aria-describedby": t10,
461
+ let t10;
462
+ if ($[24] !== children || $[25] !== described || $[26] !== description || $[27] !== descriptionId || $[28] !== modal || $[29] !== props$1) {
463
+ t10 = modal ? /* @__PURE__ */ jsx(Dialog, {
464
+ "aria-describedby": described ? descriptionId : void 0,
465
+ ...props$1,
466
+ ...props(overlay.popupDialog, focus.ring),
467
+ children: /* @__PURE__ */ jsx(DescriptionContext, {
468
+ value: description,
469
+ children
470
+ })
471
+ }) : /* @__PURE__ */ jsx(PanelDialog, {
472
+ "aria-describedby": described ? descriptionId : void 0,
288
473
  ...props$1,
289
- ...t11,
290
- children: t12
474
+ children: /* @__PURE__ */ jsx(DescriptionContext, {
475
+ value: description,
476
+ children
477
+ })
291
478
  });
292
- $[28] = props$1;
293
- $[29] = t10;
294
- $[30] = t12;
295
- $[31] = t13;
296
- } else t13 = $[31];
297
- let t14;
298
- if ($[32] !== alignOffset || $[33] !== container || $[34] !== ref || $[35] !== sideOffset || $[36] !== t13 || $[37] !== t6 || $[38] !== t7 || $[39] !== t9 || $[40] !== triggerRef) {
299
- t14 = /* @__PURE__ */ jsx(Popover, {
479
+ $[24] = children;
480
+ $[25] = described;
481
+ $[26] = description;
482
+ $[27] = descriptionId;
483
+ $[28] = modal;
484
+ $[29] = props$1;
485
+ $[30] = t10;
486
+ } else t10 = $[30];
487
+ let t11;
488
+ if ($[31] !== alignOffset || $[32] !== container || $[33] !== ref || $[34] !== sideOffset || $[35] !== t10 || $[36] !== t6 || $[37] !== t7 || $[38] !== t9 || $[39] !== triggerRef) {
489
+ t11 = /* @__PURE__ */ jsx(Popover, {
300
490
  crossOffset: alignOffset,
301
491
  isNonModal: t6,
302
492
  offset: sideOffset,
@@ -305,20 +495,20 @@ function PopoverContent(t0) {
305
495
  triggerRef,
306
496
  UNSTABLE_portalContainer: container,
307
497
  ...t9,
308
- children: t13
498
+ children: t10
309
499
  });
310
- $[32] = alignOffset;
311
- $[33] = container;
312
- $[34] = ref;
313
- $[35] = sideOffset;
314
- $[36] = t13;
315
- $[37] = t6;
316
- $[38] = t7;
317
- $[39] = t9;
318
- $[40] = triggerRef;
319
- $[41] = t14;
320
- } else t14 = $[41];
321
- return t14;
500
+ $[31] = alignOffset;
501
+ $[32] = container;
502
+ $[33] = ref;
503
+ $[34] = sideOffset;
504
+ $[35] = t10;
505
+ $[36] = t6;
506
+ $[37] = t7;
507
+ $[38] = t9;
508
+ $[39] = triggerRef;
509
+ $[40] = t11;
510
+ } else t11 = $[40];
511
+ return t11;
322
512
  }
323
513
  /**
324
514
  * Supporting copy under the title. The panel's `aria-describedby` points at
@@ -367,25 +557,52 @@ function PopoverDescription(props) {
367
557
  * itself unnamed.
368
558
  */
369
559
  function PopoverTitle(props) {
370
- const $ = c(5);
560
+ const $ = c(8);
561
+ const register = useContext(TitleContext);
371
562
  let t0;
372
- if ($[0] !== props) {
373
- t0 = mergeStyles({ className: "x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q x1ghz6dp" }, props);
374
- $[0] = props;
375
- $[1] = t0;
376
- } else t0 = $[1];
377
563
  let t1;
378
- if ($[2] !== props || $[3] !== t0) {
379
- t1 = /* @__PURE__ */ jsx(Heading, {
564
+ if ($[0] !== register) {
565
+ t0 = () => register();
566
+ t1 = [register];
567
+ $[0] = register;
568
+ $[1] = t0;
569
+ $[2] = t1;
570
+ } else {
571
+ t0 = $[1];
572
+ t1 = $[2];
573
+ }
574
+ useEffect(t0, t1);
575
+ let t2;
576
+ if ($[3] !== props) {
577
+ t2 = mergeStyles({ className: "x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q x1ghz6dp" }, props);
578
+ $[3] = props;
579
+ $[4] = t2;
580
+ } else t2 = $[4];
581
+ let t3;
582
+ if ($[5] !== props || $[6] !== t2) {
583
+ t3 = /* @__PURE__ */ jsx(Heading, {
380
584
  slot: "title",
381
585
  ...props,
382
- ...t0
586
+ ...t2
383
587
  });
384
- $[2] = props;
385
- $[3] = t0;
386
- $[4] = t1;
387
- } else t1 = $[4];
388
- return t1;
588
+ $[5] = props;
589
+ $[6] = t2;
590
+ $[7] = t3;
591
+ } else t3 = $[7];
592
+ return t3;
593
+ }
594
+ /**
595
+ * What a pressed trigger hands the overlay it opens: the id its
596
+ * `aria-controls` points at, and its own id to name a panel with no title.
597
+ * Read field by field, since the context's type also admits a slotted
598
+ * value; a hover trigger hands nothing.
599
+ */
600
+ function triggerOf(context) {
601
+ if (typeof context !== "object" || context === null || "slots" in context) return;
602
+ return {
603
+ id: "id" in context && typeof context.id === "string" ? context.id : void 0,
604
+ labelledBy: "aria-labelledby" in context && typeof context["aria-labelledby"] === "string" ? context["aria-labelledby"] : void 0
605
+ };
389
606
  }
390
607
  Popover$1.Content = PopoverContent;
391
608
  Popover$1.Description = PopoverDescription;