@cimpress-ui/react 1.23.0 → 1.25.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 (129) hide show
  1. package/dist/commonjs/components/app-header/side-nav.d.ts +1 -9
  2. package/dist/commonjs/components/app-header/side-nav.d.ts.map +1 -1
  3. package/dist/commonjs/components/app-header/side-nav.js +3 -3
  4. package/dist/commonjs/components/app-header/side-nav.js.map +1 -1
  5. package/dist/commonjs/components/checkbox/checkbox.d.ts.map +1 -1
  6. package/dist/commonjs/components/checkbox/checkbox.js +1 -1
  7. package/dist/commonjs/components/checkbox/checkbox.js.map +1 -1
  8. package/dist/commonjs/components/code/code.d.ts +14 -0
  9. package/dist/commonjs/components/code/code.d.ts.map +1 -0
  10. package/dist/commonjs/components/code/code.js +22 -0
  11. package/dist/commonjs/components/code/code.js.map +1 -0
  12. package/dist/commonjs/components/code-block/code-block.d.ts +13 -0
  13. package/dist/commonjs/components/code-block/code-block.d.ts.map +1 -0
  14. package/dist/commonjs/components/code-block/code-block.js +50 -0
  15. package/dist/commonjs/components/code-block/code-block.js.map +1 -0
  16. package/dist/commonjs/components/combo-box/combo-box.d.ts +1 -0
  17. package/dist/commonjs/components/combo-box/combo-box.d.ts.map +1 -1
  18. package/dist/commonjs/components/combo-box/combo-box.js +23 -5
  19. package/dist/commonjs/components/combo-box/combo-box.js.map +1 -1
  20. package/dist/commonjs/components/internal/checkbox-indicator/checkbox-indicator.js +2 -4
  21. package/dist/commonjs/components/internal/checkbox-indicator/checkbox-indicator.js.map +1 -1
  22. package/dist/commonjs/components/internal/collapsible-list/collapsible-list.js.map +1 -1
  23. package/dist/commonjs/components/menu/menu.d.ts +14 -1
  24. package/dist/commonjs/components/menu/menu.d.ts.map +1 -1
  25. package/dist/commonjs/components/menu/menu.js +16 -2
  26. package/dist/commonjs/components/menu/menu.js.map +1 -1
  27. package/dist/commonjs/components/select/select.d.ts +1 -1
  28. package/dist/commonjs/components/select/select.d.ts.map +1 -1
  29. package/dist/commonjs/components/select/select.js +3 -2
  30. package/dist/commonjs/components/select/select.js.map +1 -1
  31. package/dist/commonjs/components/slider/slider.d.ts +15 -7
  32. package/dist/commonjs/components/slider/slider.d.ts.map +1 -1
  33. package/dist/commonjs/components/slider/slider.js +18 -20
  34. package/dist/commonjs/components/slider/slider.js.map +1 -1
  35. package/dist/commonjs/components/tag-field/tag-field.js +1 -1
  36. package/dist/commonjs/components/tag-field/tag-field.js.map +1 -1
  37. package/dist/commonjs/components/toast/toast-queue.d.ts +9 -7
  38. package/dist/commonjs/components/toast/toast-queue.d.ts.map +1 -1
  39. package/dist/commonjs/components/toast/toast-queue.js +6 -5
  40. package/dist/commonjs/components/toast/toast-queue.js.map +1 -1
  41. package/dist/commonjs/components/toast/toast-region.d.ts +1 -1
  42. package/dist/commonjs/components/toast/toast-region.d.ts.map +1 -1
  43. package/dist/commonjs/components/toast/toast-region.js +3 -3
  44. package/dist/commonjs/components/toast/toast-region.js.map +1 -1
  45. package/dist/commonjs/components/toast/toast.js +3 -3
  46. package/dist/commonjs/components/toast/toast.js.map +1 -1
  47. package/dist/commonjs/components/toast/types.d.ts +1 -1
  48. package/dist/commonjs/components/toast/types.d.ts.map +1 -1
  49. package/dist/commonjs/components/toast/types.js.map +1 -1
  50. package/dist/commonjs/components/typography/list.d.ts +31 -0
  51. package/dist/commonjs/components/typography/list.d.ts.map +1 -0
  52. package/dist/commonjs/components/typography/list.js +39 -0
  53. package/dist/commonjs/components/typography/list.js.map +1 -0
  54. package/dist/commonjs/i18n/messages/en-US.d.ts.map +1 -1
  55. package/dist/commonjs/i18n/messages/en-US.js +1 -0
  56. package/dist/commonjs/i18n/messages/en-US.js.map +1 -1
  57. package/dist/commonjs/i18n/messages/types.d.ts +6 -0
  58. package/dist/commonjs/i18n/messages/types.d.ts.map +1 -1
  59. package/dist/commonjs/i18n/messages/types.js.map +1 -1
  60. package/dist/commonjs/index.d.ts +6 -3
  61. package/dist/commonjs/index.d.ts.map +1 -1
  62. package/dist/commonjs/index.js +7 -4
  63. package/dist/commonjs/index.js.map +1 -1
  64. package/dist/esm/components/app-header/side-nav.d.ts +1 -9
  65. package/dist/esm/components/app-header/side-nav.d.ts.map +1 -1
  66. package/dist/esm/components/app-header/side-nav.js +3 -3
  67. package/dist/esm/components/app-header/side-nav.js.map +1 -1
  68. package/dist/esm/components/checkbox/checkbox.d.ts.map +1 -1
  69. package/dist/esm/components/checkbox/checkbox.js +1 -1
  70. package/dist/esm/components/checkbox/checkbox.js.map +1 -1
  71. package/dist/esm/components/code/code.d.ts +14 -0
  72. package/dist/esm/components/code/code.d.ts.map +1 -0
  73. package/dist/esm/components/code/code.js +16 -0
  74. package/dist/esm/components/code/code.js.map +1 -0
  75. package/dist/esm/components/code-block/code-block.d.ts +13 -0
  76. package/dist/esm/components/code-block/code-block.d.ts.map +1 -0
  77. package/dist/esm/components/code-block/code-block.js +44 -0
  78. package/dist/esm/components/code-block/code-block.js.map +1 -0
  79. package/dist/esm/components/combo-box/combo-box.d.ts +1 -0
  80. package/dist/esm/components/combo-box/combo-box.d.ts.map +1 -1
  81. package/dist/esm/components/combo-box/combo-box.js +24 -6
  82. package/dist/esm/components/combo-box/combo-box.js.map +1 -1
  83. package/dist/esm/components/internal/checkbox-indicator/checkbox-indicator.js +2 -4
  84. package/dist/esm/components/internal/checkbox-indicator/checkbox-indicator.js.map +1 -1
  85. package/dist/esm/components/internal/collapsible-list/collapsible-list.js.map +1 -1
  86. package/dist/esm/components/menu/menu.d.ts +14 -1
  87. package/dist/esm/components/menu/menu.d.ts.map +1 -1
  88. package/dist/esm/components/menu/menu.js +17 -4
  89. package/dist/esm/components/menu/menu.js.map +1 -1
  90. package/dist/esm/components/select/select.d.ts +1 -1
  91. package/dist/esm/components/select/select.d.ts.map +1 -1
  92. package/dist/esm/components/select/select.js +4 -3
  93. package/dist/esm/components/select/select.js.map +1 -1
  94. package/dist/esm/components/slider/slider.d.ts +15 -7
  95. package/dist/esm/components/slider/slider.d.ts.map +1 -1
  96. package/dist/esm/components/slider/slider.js +17 -19
  97. package/dist/esm/components/slider/slider.js.map +1 -1
  98. package/dist/esm/components/tag-field/tag-field.js +1 -1
  99. package/dist/esm/components/tag-field/tag-field.js.map +1 -1
  100. package/dist/esm/components/toast/toast-queue.d.ts +9 -7
  101. package/dist/esm/components/toast/toast-queue.d.ts.map +1 -1
  102. package/dist/esm/components/toast/toast-queue.js +5 -4
  103. package/dist/esm/components/toast/toast-queue.js.map +1 -1
  104. package/dist/esm/components/toast/toast-region.d.ts +1 -1
  105. package/dist/esm/components/toast/toast-region.d.ts.map +1 -1
  106. package/dist/esm/components/toast/toast-region.js +3 -3
  107. package/dist/esm/components/toast/toast-region.js.map +1 -1
  108. package/dist/esm/components/toast/toast.js +2 -2
  109. package/dist/esm/components/toast/toast.js.map +1 -1
  110. package/dist/esm/components/toast/types.d.ts +1 -1
  111. package/dist/esm/components/toast/types.d.ts.map +1 -1
  112. package/dist/esm/components/toast/types.js.map +1 -1
  113. package/dist/esm/components/typography/list.d.ts +31 -0
  114. package/dist/esm/components/typography/list.d.ts.map +1 -0
  115. package/dist/esm/components/typography/list.js +31 -0
  116. package/dist/esm/components/typography/list.js.map +1 -0
  117. package/dist/esm/i18n/messages/en-US.d.ts.map +1 -1
  118. package/dist/esm/i18n/messages/en-US.js +1 -0
  119. package/dist/esm/i18n/messages/en-US.js.map +1 -1
  120. package/dist/esm/i18n/messages/types.d.ts +6 -0
  121. package/dist/esm/i18n/messages/types.d.ts.map +1 -1
  122. package/dist/esm/i18n/messages/types.js.map +1 -1
  123. package/dist/esm/index.d.ts +6 -3
  124. package/dist/esm/index.d.ts.map +1 -1
  125. package/dist/esm/index.js +5 -2
  126. package/dist/esm/index.js.map +1 -1
  127. package/dist-styles/core.css +1 -1
  128. package/dist-styles/styles.css +1 -1
  129. package/package.json +6 -6
@@ -1 +1 @@
1
- {"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;AAkCb,4BAEC;AAkBD,oBAcC;AAaD,kCAaC;AAiBD,4BA+BC;;AA5ID,gDAAwB;AAExB,iEAY+B;AAC/B,mDAAqD;AACrD,mEAA4D;AAC5D,gGAAyF;AACzF,0FAAmF;AAEnF,qDAAmD;AAOnD;;;;GAIG;AACH,SAAgB,QAAQ,CAAC,KAAoB;IAC3C,OAAO,uBAAC,mCAAc,OAAK,KAAK,GAAI,CAAC;AACvC,CAAC;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAelC,qFAAqF;AACrF,SAAgB,IAAI,CAA2B,EAAE,KAAK,GAAG,OAAO,EAAE,GAAG,KAAK,EAAgB;IACxF,IAAI,CAAC,IAAA,+BAAY,GAAE,IAAI,KAAK,CAAC,KAAK,IAAI,IAAI,IAAI,OAAO,KAAK,CAAC,QAAQ,KAAK,UAAU,EAAE,CAAC;QACnF,OAAO,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAC;IACtF,CAAC;IAED,OAAO,CACL,uBAAC,qCAAe,IACd,SAAS,EAAE,UAAU,KAAK,EAAE,EAC5B,MAAM,EAAE,CAAC,EACT,SAAS,EAAE,GAAG,YAEd,uBAAC,4BAAO,OAAK,KAAK,EAAE,SAAS,EAAC,UAAU,GAAG,GAC3B,CACnB,CAAC;AACJ,CAAC;AAED,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAU1B,sDAAsD;AACtD,SAAgB,WAAW,CAA2B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAuB;IAC7G,IAAI,CAAC,IAAA,+BAAY,GAAE,IAAI,KAAK,IAAI,IAAI,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACvE,OAAO,CAAC,IAAI,CAAC,4EAA4E,CAAC,CAAC;IAC7F,CAAC;IAED,OAAO,CACL,wBAAC,mCAAc,OAAK,KAAK,EAAE,SAAS,EAAC,kBAAkB,aACrD,uBAAC,8BAAS,IAAC,SAAS,EAAE,IAAA,cAAI,EAAC,yBAAyB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,YAC5G,KAAK,GACI,EACZ,uBAAC,kCAAa,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAiB,IACxC,CAClB,CAAC;AACJ,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAcxC,gDAAgD;AAChD,SAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,KAAK,EAAiB;IAC/E,MAAM,SAAS,GACb,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEhH,OAAO,CACL,uBAAC,gCAAW,OAAK,KAAK,EAAE,SAAS,EAAC,8CAA8C,EAAC,SAAS,EAAE,SAAS,YAClG,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CAC9C,6DACG,aAAa,KAAK,QAAQ,IAAI,uBAAC,wBAAa,IAAC,gBAAgB,EAAC,mCAAmC,GAAG,EACpG,aAAa,KAAK,UAAU,IAAI,uBAAC,yCAAiB,IAAC,UAAU,EAAE,UAAU,GAAI,EAE7E,IAAI,EAEL,iCAAK,SAAS,EAAC,oBAAoB,aACjC,uBAAC,4BAAO,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,YACjG,QAAQ,GACD,EAET,WAAW,IAAI,CACd,uBAAC,4BAAO,IACN,IAAI,EAAC,aAAa,EAClB,SAAS,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,YAEhF,WAAW,GACJ,CACX,IACG,IACL,CACJ,GACW,CACf,CAAC;AACJ,CAAC;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ReactNode, UIEventHandler } from 'react';\nimport {\n Collection as RACCollection,\n Header as RACHeader,\n Menu as RACMenu,\n type MenuProps as RACMenuProps,\n MenuItem as RACMenuItem,\n type MenuItemProps as RACMenuItemProps,\n MenuSection as RACMenuSection,\n type MenuSectionProps as RACMenuSectionProps,\n MenuTrigger as RACMenuTrigger,\n type MenuTriggerProps as RACMenuTriggerProps,\n Text as RACText,\n} from 'react-aria-components';\nimport { IconCheckBold } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport type { CollectionItem, CollectionProps, Key, NavigationProps, StringLikeChildren } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface MenuRootProps extends Pick<RACMenuTriggerProps, 'onOpenChange' | 'isOpen' | 'defaultOpen'> {\n /** The menu trigger with its associated menu. Provide the trigger as the first child, and the menu as the second child. */\n children: ReactNode;\n}\n\n/**\n * Encapsulates a menu trigger and its associated menu. The trigger can be any Cimpress UI button, and the menu will be displayed when the trigger is activated.\n *\n * See [menu usage guidelines](https://ui.cimpress.io/components/menu/).\n */\nexport function MenuRoot(props: MenuRootProps) {\n return <RACMenuTrigger {...props} />;\n}\n\nMenuRoot.displayName = 'MenuRoot';\n\nexport interface MenuProps<T extends CollectionItem = CollectionItem>\n extends CollectionProps<T>, Pick<RACMenuProps<T>, 'selectedKeys' | 'onSelectionChange' | 'selectionMode'> {\n /**\n * The alignment of the menu overlay relative to its trigger.\n * @default 'start'\n */\n align?: 'start' | 'end';\n /** Handler that is called when an item is selected. When using `onAction`, all items must have an `id` prop defined. */\n onAction?: (key: Key) => void;\n /** Handler that is called when the list of items is scrolled. */\n onScroll?: UIEventHandler<HTMLDivElement>;\n}\n\n/** Displays a collapsible list of options and actions that users can choose from. */\nexport function Menu<T extends CollectionItem>({ align = 'start', ...props }: MenuProps<T>) {\n if (!isProduction() && props.items != null && typeof props.children !== 'function') {\n console.warn('`Menu` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <CollapsibleList\n placement={`bottom ${align}`}\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n >\n <RACMenu {...props} className=\"cim-menu\" />\n </CollapsibleList>\n );\n}\n\nMenu.displayName = 'Menu';\n\nexport interface MenuSectionProps<T extends CollectionItem = CollectionItem>\n extends CollectionProps<T>, Pick<RACMenuSectionProps<T>, 'selectedKeys' | 'onSelectionChange' | 'selectionMode'> {\n /** The ID of the section. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the section title. */\n title: string;\n}\n\n/** Groups list items within `Menu` into a section. */\nexport function MenuSection<T extends CollectionItem>({ title, children, items, ...props }: MenuSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`MenuSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACMenuSection {...props} className=\"cim-menu-section\">\n <RACHeader className={clsx('cim-menu-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}>\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACMenuSection>\n );\n}\n\nMenuSection.displayName = 'MenuSection';\n\nexport interface MenuItemProps\n extends NavigationProps, Pick<RACMenuItemProps, 'isDisabled' | 'onAction' | 'onHoverStart' | 'onHoverEnd'> {\n /** The ID of the item. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the label. */\n children: StringLikeChildren;\n /** Additional description for the menu item. */\n description?: string;\n /** An icon representing the menu item. */\n icon?: ReactNode;\n}\n\n/** Renders a single list item within `Menu`. */\nexport function MenuItem({ children, description, icon, ...props }: MenuItemProps) {\n const textValue =\n typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n return (\n <RACMenuItem {...props} className=\"cim-menu-item cim-checkbox-indicator-wrapper\" textValue={textValue}>\n {({ isDisabled, isSelected, selectionMode }) => (\n <>\n {selectionMode === 'single' && <IconCheckBold UNSAFE_className=\"cim-menu-item-selection-indicator\" />}\n {selectionMode === 'multiple' && <CheckboxIndicator isSelected={isSelected} />}\n\n {icon}\n\n <div className=\"cim-menu-item-text\">\n <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n {children}\n </RACText>\n\n {description && (\n <RACText\n slot=\"description\"\n className={textStyle({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' })}\n >\n {description}\n </RACText>\n )}\n </div>\n </>\n )}\n </RACMenuItem>\n );\n}\n\nMenuItem.displayName = 'MenuItem';\n"]}
1
+ {"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { Children, createContext, useContext, type ReactElement, type ReactNode, type UIEventHandler } from 'react';\nimport {\n Collection as RACCollection,\n Header as RACHeader,\n Menu as RACMenu,\n type MenuProps as RACMenuProps,\n MenuItem as RACMenuItem,\n type MenuItemProps as RACMenuItemProps,\n MenuSection as RACMenuSection,\n type MenuSectionProps as RACMenuSectionProps,\n MenuTrigger as RACMenuTrigger,\n type MenuTriggerProps as RACMenuTriggerProps,\n SubmenuTrigger as RACSubmenuTrigger,\n Text as RACText,\n} from 'react-aria-components';\nimport { IconCheckBold, IconChevronRight } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport type { CollectionItem, CollectionProps, Key, NavigationProps, StringLikeChildren } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nconst SubmenuContext = createContext(false);\n\nexport interface MenuRootProps extends Pick<RACMenuTriggerProps, 'onOpenChange' | 'isOpen' | 'defaultOpen'> {\n /** The menu trigger with its associated menu. Provide the trigger as the first child, and the menu as the second child. */\n children: ReactNode;\n}\n\n/**\n * Encapsulates a menu trigger and its associated menu. The trigger can be any Cimpress UI button, and the menu will be displayed when the trigger is activated.\n *\n * See [menu usage guidelines](https://ui.cimpress.io/components/menu/).\n */\nexport function MenuRoot(props: MenuRootProps) {\n return <RACMenuTrigger {...props} />;\n}\n\nMenuRoot.displayName = 'MenuRoot';\n\nexport interface SubmenuRootProps {\n /** The submenu trigger with its associated menu. Provide the item trigger as the first child, and the menu as the second child. */\n children: ReactElement[];\n}\n\n/**\n * Encapsulates a submenu trigger and its associated menu. The trigger must be a `MenuItem`, and the menu will be displayed when the trigger is hovered or focused.\n *\n * See [menu usage guidelines](https://ui.cimpress.io/components/menu/).\n */\nexport function SubmenuRoot({ children, ...props }: SubmenuRootProps) {\n const [trigger, menu] = Children.toArray(children) as ReactElement[];\n\n return (\n <RACSubmenuTrigger {...props} delay={0}>\n {trigger!}\n <SubmenuContext.Provider value={true}>{menu!}</SubmenuContext.Provider>\n </RACSubmenuTrigger>\n );\n}\n\nSubmenuRoot.displayName = 'SubmenuRoot';\n\nexport interface MenuProps<T extends CollectionItem = CollectionItem>\n extends CollectionProps<T>, Pick<RACMenuProps<T>, 'selectedKeys' | 'onSelectionChange' | 'selectionMode'> {\n /**\n * The alignment of the menu overlay relative to its trigger.\n * @default 'start'\n */\n align?: 'start' | 'end';\n /** Handler that is called when an item is selected. When using `onAction`, all items must have an `id` prop defined. */\n onAction?: (key: Key) => void;\n /** Handler that is called when the list of items is scrolled. */\n onScroll?: UIEventHandler<HTMLDivElement>;\n}\n\n/** Displays a collapsible list of options and actions that users can choose from. */\nexport function Menu<T extends CollectionItem>({ align = 'start', ...props }: MenuProps<T>) {\n if (!isProduction() && props.items != null && typeof props.children !== 'function') {\n console.warn('`Menu` requires `children` to be a function when using `items` prop');\n }\n\n const isSubmenu = useContext(SubmenuContext);\n\n return (\n <CollapsibleList\n placement={isSubmenu ? 'end top' : `bottom ${align}`}\n offset={isSubmenu ? -1 : 5} // 1px border + 4px actual offset\n crossOffset={isSubmenu ? -8 : undefined}\n maxHeight={315}\n >\n <RACMenu {...props} className=\"cim-menu\" />\n </CollapsibleList>\n );\n}\n\nMenu.displayName = 'Menu';\n\nexport interface MenuSectionProps<T extends CollectionItem = CollectionItem>\n extends CollectionProps<T>, Pick<RACMenuSectionProps<T>, 'selectedKeys' | 'onSelectionChange' | 'selectionMode'> {\n /** The ID of the section. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the section title. */\n title: string;\n}\n\n/** Groups list items within `Menu` into a section. */\nexport function MenuSection<T extends CollectionItem>({ title, children, items, ...props }: MenuSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`MenuSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACMenuSection {...props} className=\"cim-menu-section\">\n <RACHeader className={clsx('cim-menu-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}>\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACMenuSection>\n );\n}\n\nMenuSection.displayName = 'MenuSection';\n\nexport interface MenuItemProps\n extends NavigationProps, Pick<RACMenuItemProps, 'isDisabled' | 'onAction' | 'onHoverStart' | 'onHoverEnd'> {\n /** The ID of the item. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the label. */\n children: StringLikeChildren;\n /** Additional description for the menu item. */\n description?: string;\n /** An icon representing the menu item. */\n icon?: ReactNode;\n}\n\n/** Renders a single list item within `Menu`. */\nexport function MenuItem({ children, description, icon, ...props }: MenuItemProps) {\n const textValue =\n typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n return (\n <RACMenuItem {...props} className=\"cim-menu-item\" textValue={textValue}>\n {({ isDisabled, isSelected, selectionMode, hasSubmenu }) => (\n <>\n {selectionMode === 'single' && <IconCheckBold UNSAFE_className=\"cim-menu-item-selection-indicator\" />}\n {selectionMode === 'multiple' && <CheckboxIndicator isSelected={isSelected} isDisabled={isDisabled} />}\n\n {icon}\n\n <div className=\"cim-menu-item-text\">\n <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n {children}\n </RACText>\n\n {description && (\n <RACText\n slot=\"description\"\n className={textStyle({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' })}\n >\n {description}\n </RACText>\n )}\n </div>\n\n {hasSubmenu && <IconChevronRight size={24} UNSAFE_className=\"cim-menu-item-submenu-indicator\" />}\n </>\n )}\n </RACMenuItem>\n );\n}\n\nMenuItem.displayName = 'MenuItem';\n"]}
@@ -31,7 +31,7 @@ export interface SelectProps<T extends CollectionItem = CollectionItem, M extend
31
31
  * How the selected value is displayed.
32
32
  * @default 'text'
33
33
  */
34
- UNSTABLE_valueDisplay?: 'text' | 'tags';
34
+ UNSTABLE_valueDisplay?: 'text' | 'tags' | 'count';
35
35
  /**
36
36
  * Whether the list of options should be filterable.
37
37
  * @default false
@@ -1 +1 @@
1
- {"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,cAAc,EAKpB,MAAM,OAAO,CAAC;AAEf,OAAO,EAQL,KAAK,gBAAgB,IAAI,mBAAmB,EAO5C,KAAK,WAAW,IAAI,cAAc,EAMnC,MAAM,uBAAuB,CAAC;AAgB/B,OAAO,KAAK,EACV,QAAQ,EACR,qBAAqB,EACrB,cAAc,EACd,eAAe,EACf,WAAW,EACX,UAAU,EACV,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAKrB,MAAM,MAAM,4BAA4B,GAAG,QAAQ,GAAG,UAAU,CAAC;AAUjE,MAAM,WAAW,WAAW,CAC1B,CAAC,SAAS,cAAc,GAAG,cAAc,EACzC,CAAC,SAAS,4BAA4B,GAAG,QAAQ,CAEjD,SACE,WAAW,EACX,UAAU,CAAC,CAAC,SAAS,QAAQ,GAAG,GAAG,GAAG,GAAG,EAAE,CAAC,EAC5C,eAAe,CAAC,CAAC,CAAC,EAClB,qBAAqB,EACrB,QAAQ,CAAC,SAAS,CAAC,EACnB,IAAI,CACF,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,EAClB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,cAAc,GACd,WAAW,GACX,aAAa,GACb,SAAS,GACT,QAAQ,GACR,cAAc,CACjB;IACH,iEAAiE;IACjE,WAAW,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IACzB,iEAAiE;IACjE,kBAAkB,CAAC,EAAE,GAAG,CAAC;IACzB,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC1C;;;OAGG;IACH,sBAAsB,CAAC,EAAE,CAAC,CAAC;IAC3B,4CAA4C;IAC5C,cAAc,CAAC,EAAE,CAAC,SAAS,QAAQ,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,EAAE,CAAC;IACzD,sDAAsD;IACtD,qBAAqB,CAAC,EAAE,CAAC,SAAS,QAAQ,GAAG,GAAG,GAAG,GAAG,EAAE,CAAC;IACzD,qDAAqD;IACrD,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,SAAS,QAAQ,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,EAAE,KAAK,IAAI,CAAC;IAC3E;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IAClD;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,kDAAkD;IAClD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,4DAA4D;IAC5D,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,4DAA4D;IAC5D,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,qEAAqE;IACrE,eAAe,CAAC,EAAE,CAAC,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE;QAAE,GAAG,EAAE,GAAG,CAAC;QAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAA;KAAE,KAAK,OAAO,CAAC,GAAG,IAAI,CAAC;IACnH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,4DAA4D;AAC5D,MAAM,WAAW,SAAS;IACxB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAkUD;;;;GAIG;AACH,QAAA,MAAM,OAAO,GArUG,CAAC,SAAS,cAAc,EAAE,CAAC,SAAS,4BAA4B,6KAqUpB,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC;AAE7B,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IAC9G,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,kDAAkD;AAClD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAiBjE;yBAjBe,UAAU;;;AAqB1B,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACtF,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wDAAwD;AACxD,wBAAgB,aAAa,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CAelH;yBAfe,aAAa"}
@@ -20,6 +20,7 @@ const is_production_js_1 = require("../../utils/is-production.js");
20
20
  const string_like_children_to_string_js_1 = require("../../utils/string-like-children-to-string.js");
21
21
  const use_production_warning_js_1 = require("../../utils/use-production-warning.js");
22
22
  const with_style_props_js_1 = require("../../with-style-props.js");
23
+ const checkbox_indicator_js_1 = require("../internal/checkbox-indicator/checkbox-indicator.js");
23
24
  const collapsible_list_js_1 = require("../internal/collapsible-list/collapsible-list.js");
24
25
  const form_field_js_1 = require("../internal/form-field/form-field.js");
25
26
  const x_button_js_1 = require("../internal/x-button/x-button.js");
@@ -77,7 +78,7 @@ const SelectButton = (0, forward_ref_js_1.forwardRef)(({ valueDisplay, isClearab
77
78
  const triggerRef = (0, react_1.useRef)(null);
78
79
  const collectionMessages = (0, index_js_1.useLocalizedMessages)('UNSTABLE_collection');
79
80
  return ((0, jsx_runtime_1.jsxs)("div", { className: "cim-select-button", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { ref: (0, utils_1.mergeRefs)(ref, triggerRef), className: "cim-select-button-trigger" }), (0, jsx_runtime_1.jsx)(react_aria_components_1.SelectValue, { className: (0, clsx_1.default)('cim-select-button-value', (0, utils_js_1.textStyle)({ variant: 'body', alignment: 'start' })), children: ({ selectedText, defaultChildren, isPlaceholder, state }) => {
80
- if (valueDisplay === 'tags' && state.selectedItems.length > 0) {
81
+ if ((valueDisplay === 'tags' && state.selectedItems.length > 0) || valueDisplay === 'count') {
81
82
  return ((0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "body", tone: "subtle", children: collectionMessages.format('itemsSelected', { selectedItemCount: state.selectedItems.length }) }));
82
83
  }
83
84
  return isPlaceholder ? defaultChildren : selectedText;
@@ -148,7 +149,7 @@ exports.Select = _Select;
148
149
  /** Renders a single list item within `Select`. */
149
150
  function SelectItem({ children, ...props }) {
150
151
  const textValue = (0, string_like_children_to_string_js_1.stringLikeChildrenToString)(children);
151
- return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { ...props, className: "cim-select-item", textValue: textValue, children: ({ isDisabled }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_js_2.IconCheck, {}), (0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { slot: "label", className: (0, utils_js_1.textStyle)({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children })] })) }));
152
+ return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { ...props, className: "cim-select-item", textValue: textValue, children: ({ isDisabled, isSelected, selectionMode }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectionMode === 'single' && (0, jsx_runtime_1.jsx)(index_js_2.IconCheckBold, {}), selectionMode === 'multiple' && (0, jsx_runtime_1.jsx)(checkbox_indicator_js_1.CheckboxIndicator, { isSelected: isSelected, isDisabled: isDisabled }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { slot: "label", className: (0, utils_js_1.textStyle)({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children })] })) }));
152
153
  }
153
154
  SelectItem.displayName = 'SelectItem';
154
155
  /** Groups list items within `Select` into a section. */
@@ -1 +1 @@
1
- {"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { mergeRefs } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport {\n type ForwardedRef,\n type ReactNode,\n type UIEventHandler,\n useContext,\n useImperativeHandle,\n useMemo,\n useRef,\n} from 'react';\nimport { useFilter, useId, useInteractOutside, usePreventScroll } from 'react-aria';\nimport {\n Autocomplete as RACAutocomplete,\n Button as RACButton,\n Collection as RACCollection,\n Header as RACHeader,\n LabelContext as RACLabelContext,\n ListBox as RACListBox,\n ListBoxItem as RACListBoxItem,\n type ListBoxItemProps as RACListBoxItemProps,\n ListBoxLoadMoreItem as RACListBoxLoadMoreItem,\n type ListBoxProps as RACListBoxProps,\n ListBoxSection as RACListBoxSection,\n ListLayout as RACListLayout,\n type ListLayoutOptions as RACListLayoutOptions,\n Select as RACSelect,\n type SelectProps as RACSelectProps,\n SelectStateContext as RACSelectStateContext,\n SelectValue as RACSelectValue,\n Text as RACText,\n Virtualizer as RACVirtualizer,\n useSlottedContext,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCheck, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { stringLikeChildrenToString } from '../../utils/string-like-children-to-string.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { XButton } from '../internal/x-button/x-button.js';\nimport { Spinner } from '../spinner/spinner.js';\nimport { TagGroup } from '../tag/tag-group.js';\nimport { Tag } from '../tag/tag.js';\nimport { SearchField } from '../text-inputs/search-field.js';\nimport type {\n ApiProps,\n AsyncItemLoadingProps,\n CollectionItem,\n CollectionProps,\n CommonProps,\n FieldProps,\n Key,\n StringLikeChildren,\n} from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { textStyle } from '../typography/utils.js';\nimport { UNSTABLE_VisuallyHidden } from '../visually-hidden/visually-hidden.js';\n\nexport type UNSTABLE_SelectSelectionMode = 'single' | 'multiple';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n estimatedRowHeight: 40,\n estimatedHeadingHeight: 32,\n loaderHeight: 40,\n padding: 0,\n gap: 0,\n};\n\nexport interface SelectProps<\n T extends CollectionItem = CollectionItem,\n M extends UNSTABLE_SelectSelectionMode = 'single',\n>\n extends\n CommonProps,\n FieldProps<M extends 'single' ? Key : Key[]>,\n CollectionProps<T>,\n AsyncItemLoadingProps,\n ApiProps<SelectApi>,\n Pick<\n RACSelectProps<T, M>,\n | 'isDisabled'\n | 'isRequired'\n | 'isInvalid'\n | 'autoComplete'\n | 'autoFocus'\n | 'placeholder'\n | 'onFocus'\n | 'onBlur'\n | 'onOpenChange'\n > {\n /** The currently selected key in the collection (controlled). */\n selectedKey?: Key | null;\n /** The initial selected key in the collection (uncontrolled). */\n defaultSelectedKey?: Key;\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (key: Key | null) => void;\n /**\n * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n * @default false\n */\n isVirtualized?: boolean;\n /** Handler that is called when the list of items is scrolled. */\n onScroll?: UIEventHandler<HTMLDivElement>;\n /**\n * The selection mode of the select.\n * @default 'single'\n */\n UNSTABLE_selectionMode?: M;\n /** The value of the select (controlled). */\n UNSTABLE_value?: M extends 'single' ? Key | null : Key[];\n /** The initial value of the select (uncontrolled). */\n UNSTABLE_defaultValue?: M extends 'single' ? Key : Key[];\n /** Handler that is called when the value changes. */\n UNSTABLE_onChange?: (key: M extends 'single' ? Key | null : Key[]) => void;\n /**\n * How the selected value is displayed.\n * @default 'text'\n */\n UNSTABLE_valueDisplay?: 'text' | 'tags';\n /**\n * Whether the list of options should be filterable.\n * @default false\n */\n UNSTABLE_isFilterable?: boolean;\n /** The value of the filter input (controlled). */\n UNSTABLE_filterValue?: string;\n /** The initial value of the filter input (uncontrolled). */\n UNSTABLE_defaultFilterValue?: string;\n /** Handler that is called when the filter value changes. */\n UNSTABLE_onFilterChange?: (value: string) => void;\n /** A custom filter function to use instead of the default filter. */\n UNSTABLE_filter?: ((textValue: string, inputValue: string, node: { key: Key; value: T | null }) => boolean) | null;\n UNSTABLE_isClearable?: boolean;\n}\n\n/** The imperative API exposed by the `Select` component. */\nexport interface SelectApi {\n /** Focuses the trigger button and opens the list of items. */\n focus: () => void;\n}\n\nfunction Select<T extends CollectionItem, M extends UNSTABLE_SelectSelectionMode = 'single'>(\n {\n children,\n items,\n label,\n description,\n error,\n UNSAFE_className,\n UNSAFE_style,\n onScroll,\n isVirtualized = false,\n apiRef,\n UNSTABLE_isLoading: isLoading,\n UNSTABLE_onLoadMore: onLoadMore,\n selectedKey,\n defaultSelectedKey,\n onSelectionChange,\n UNSTABLE_selectionMode,\n UNSTABLE_value,\n UNSTABLE_defaultValue,\n UNSTABLE_onChange,\n UNSTABLE_valueDisplay: valueDisplay = 'text',\n UNSTABLE_isFilterable: isFilterable = false,\n UNSTABLE_filterValue: filterValue,\n UNSTABLE_defaultFilterValue: defaultFilterValue,\n UNSTABLE_onFilterChange: onFilterChange,\n UNSTABLE_filter: filter,\n UNSTABLE_isClearable: isClearable = false,\n ...props\n }: SelectProps<T, M>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const triggerRef = useRef<HTMLButtonElement>(null);\n\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('Select requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`Select` requires `children` to be a function when using `items` prop');\n }\n\n useImperativeHandle(\n apiRef,\n () => ({\n focus: () => triggerRef.current?.focus(),\n }),\n [],\n );\n\n const listBox = (\n <SelectListBox items={items} isLoading={isLoading} onLoadMore={onLoadMore} onScroll={onScroll}>\n {children}\n </SelectListBox>\n );\n\n const listBoxWithVirtualizer = isVirtualized ? (\n <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n {listBox}\n </RACVirtualizer>\n ) : (\n listBox\n );\n\n const listBoxWithFilter = isFilterable ? (\n <SelectFilter\n filterValue={filterValue}\n defaultFilterValue={defaultFilterValue}\n onFilterChange={onFilterChange}\n filter={filter}\n >\n {listBoxWithVirtualizer}\n </SelectFilter>\n ) : (\n listBoxWithVirtualizer\n );\n\n return (\n <RACSelect\n {...props}\n ref={ref}\n className={clsx('cim-select', UNSAFE_className)}\n style={UNSAFE_style}\n selectedKey={selectedKey}\n defaultSelectedKey={defaultSelectedKey}\n onSelectionChange={onSelectionChange}\n value={UNSTABLE_value}\n defaultValue={UNSTABLE_defaultValue}\n onChange={UNSTABLE_onChange}\n selectionMode={UNSTABLE_selectionMode}\n allowsEmptyCollection={isLoading}\n >\n <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n {label}\n </FormFieldLabel>\n <SelectButton ref={triggerRef} valueDisplay={valueDisplay} isClearable={isClearable} />\n <FormFieldError>{error}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n <SelectPopover>{listBoxWithFilter}</SelectPopover>\n {UNSTABLE_selectionMode === 'multiple' && valueDisplay === 'tags' && <SelectTags />}\n </RACSelect>\n );\n}\n\ninterface SelectPopoverProps {\n children: ReactNode;\n}\n\nfunction SelectPopover({ children }: SelectPopoverProps) {\n const popoverRef = useRef<HTMLDivElement>(null);\n const selectState = useContext(RACSelectStateContext);\n\n // Popover is non-modal, but we still want to close it when the user interacts outside\n useInteractOutside({\n ref: popoverRef,\n onInteractOutside: () => {\n selectState?.close();\n },\n isDisabled: !selectState?.isOpen,\n });\n\n // Popover is non-modal, but we still want to prevent scrolling when it is open\n usePreventScroll({ isDisabled: !selectState?.isOpen });\n\n return (\n <CollapsibleList\n ref={popoverRef}\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n // Set to non-modal so that interactions like clicking the clear button can be performed without first having to close the popover\n isNonModal\n >\n {children}\n </CollapsibleList>\n );\n}\n\ninterface SelectButtonProps {\n valueDisplay: SelectProps['UNSTABLE_valueDisplay'];\n isClearable?: SelectProps['UNSTABLE_isClearable'];\n}\n\nconst SelectButton = forwardRef<SelectButtonProps, HTMLButtonElement>(({ valueDisplay, isClearable }, ref) => {\n const triggerRef = useRef<HTMLButtonElement>(null);\n const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n\n return (\n <div className=\"cim-select-button\">\n <RACButton ref={mergeRefs(ref, triggerRef)} className=\"cim-select-button-trigger\" />\n <RACSelectValue className={clsx('cim-select-button-value', textStyle({ variant: 'body', alignment: 'start' }))}>\n {({ selectedText, defaultChildren, isPlaceholder, state }) => {\n if (valueDisplay === 'tags' && state.selectedItems.length > 0) {\n return (\n <Text as=\"span\" variant=\"body\" tone=\"subtle\">\n {collectionMessages.format('itemsSelected', { selectedItemCount: state.selectedItems.length })}\n </Text>\n );\n }\n\n return isPlaceholder ? defaultChildren : selectedText;\n }}\n </RACSelectValue>\n {isClearable && (\n <SelectClearButton\n // Move focus to trigger button, because button will disappear after clearing\n onClear={() => triggerRef.current?.focus()}\n />\n )}\n <IconChevronDown UNSAFE_className=\"cim-select-button-chevron\" />\n </div>\n );\n});\n\nfunction SelectClearButton({ onClear }: { onClear?: () => void }) {\n const selectState = useContext(RACSelectStateContext);\n\n if (!selectState || selectState.selectedItems.length === 0) {\n return null;\n }\n\n return (\n <XButton\n // TODO: i18n once stabilized\n aria-label=\"Clear selection\"\n iconType=\"circled\"\n onPress={() => {\n selectState.setValue(null);\n onClear?.();\n }}\n slot={null}\n UNSAFE_className=\"cim-select-button-clear\"\n />\n );\n}\n\nfunction SelectListBox<T extends CollectionItem>({\n children,\n items,\n isLoading,\n onLoadMore,\n ...props\n}: RACListBoxProps<T> & {\n isLoading?: boolean;\n onLoadMore?: () => void;\n}) {\n const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n const selectState = useContext(RACSelectStateContext);\n const isEmpty = selectState?.collection.size === 0;\n\n return (\n <RACListBox\n className=\"cim-select-listbox\"\n renderEmptyState={() =>\n !isLoading && (\n // TODO: i18n once stabilized\n <Text\n as=\"p\"\n variant=\"body\"\n tone=\"subtle\"\n marginX={8}\n marginY={8}\n UNSAFE_className=\"cim-select-listbox-empty-state\"\n >\n No results found.\n </Text>\n )\n }\n {...props}\n >\n <RACCollection items={items}>{children}</RACCollection>\n <RACListBoxLoadMoreItem onLoadMore={onLoadMore} isLoading={isLoading}>\n <Spinner aria-label={collectionMessages.format(isEmpty ? 'loading' : 'loadingMore')} size=\"small\" marginY={8} />\n </RACListBoxLoadMoreItem>\n </RACListBox>\n );\n}\n\nfunction SelectFilter<T extends CollectionItem>({\n children,\n filterValue,\n defaultFilterValue,\n onFilterChange,\n filter,\n}: RACListBoxProps<T> & {\n children: ReactNode;\n filterValue?: string;\n defaultFilterValue?: string;\n onFilterChange?: (value: string) => void;\n filter?: ((textValue: string, inputValue: string, node: { key: Key; value: T | null }) => boolean) | null;\n}) {\n const { contains } = useFilter({ sensitivity: 'base' });\n const filterFn = useMemo(() => {\n if (filter === null) return undefined;\n if (filter == null) return contains;\n\n return (textValue: string, inputValue: string, node: { key: Key; value: T | null }) => {\n return filter(textValue, inputValue, { key: node.key, value: node.value });\n };\n }, [filter, contains]);\n\n return (\n <RACAutocomplete<T>\n filter={filterFn}\n inputValue={filterValue}\n defaultInputValue={defaultFilterValue}\n onInputChange={onFilterChange}\n >\n <SearchField\n // TODO: i18n once stabilized\n aria-label=\"Search\"\n placeholder=\"Search\"\n autoFocus\n marginX={8}\n marginTop={8}\n />\n {children}\n </RACAutocomplete>\n );\n}\n\nfunction SelectTags() {\n const labelContext = useSlottedContext(RACLabelContext);\n const selectedItemsLabelId = useId();\n\n return (\n <RACSelectValue>\n {({ state }) => {\n if (state.selectedItems.length === 0) {\n return <></>;\n }\n\n return (\n <>\n <TagGroup\n aria-labelledby={[labelContext?.id, selectedItemsLabelId].filter(Boolean).join(' ')}\n items={state.selectedItems\n .filter((item) => item != null)\n .map((item) => ({ id: item.key, label: item.textValue }))}\n onRemove={(keys) => {\n if (Array.isArray(state.value)) {\n state.setValue(state.value.filter((k) => !keys.has(k)));\n }\n }}\n marginTop={8}\n >\n {(item) => <Tag>{item.label}</Tag>}\n </TagGroup>\n {/* TODO: i18n once stabilized */}\n <UNSTABLE_VisuallyHidden id={selectedItemsLabelId}>selected items</UNSTABLE_VisuallyHidden>\n </>\n );\n }}\n </RACSelectValue>\n );\n}\n\n/**\n * Allows users to select one item from a collapsible list.\n *\n * See [select usage guidelines](https://ui.cimpress.io/components/select/).\n */\nconst _Select = withStyleProps(forwardRef(Select), 'Select');\n\nexport { _Select as Select };\n\nexport interface SelectItemProps extends Pick<RACListBoxItemProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n /** The ID of the item. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the label. */\n children: StringLikeChildren;\n}\n\n/** Renders a single list item within `Select`. */\nexport function SelectItem({ children, ...props }: SelectItemProps) {\n const textValue = stringLikeChildrenToString(children);\n\n return (\n <RACListBoxItem {...props} className=\"cim-select-item\" textValue={textValue}>\n {({ isDisabled }) => (\n <>\n <IconCheck />\n\n <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n {children}\n </RACText>\n </>\n )}\n </RACListBoxItem>\n );\n}\n\nSelectItem.displayName = 'SelectItem';\n\nexport interface SelectSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n /** The ID of the section. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the section title. */\n title: string;\n}\n\n/** Groups list items within `Select` into a section. */\nexport function SelectSection<T extends CollectionItem>({ title, children, items, ...props }: SelectSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`SelectSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACListBoxSection {...props} className=\"cim-select-section\">\n <RACHeader\n className={clsx('cim-select-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n >\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACListBoxSection>\n );\n}\n\nSelectSection.displayName = 'SelectSection';\n"]}
1
+ {"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { mergeRefs } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport {\n type ForwardedRef,\n type ReactNode,\n type UIEventHandler,\n useContext,\n useImperativeHandle,\n useMemo,\n useRef,\n} from 'react';\nimport { useFilter, useId, useInteractOutside, usePreventScroll } from 'react-aria';\nimport {\n Autocomplete as RACAutocomplete,\n Button as RACButton,\n Collection as RACCollection,\n Header as RACHeader,\n LabelContext as RACLabelContext,\n ListBox as RACListBox,\n ListBoxItem as RACListBoxItem,\n type ListBoxItemProps as RACListBoxItemProps,\n ListBoxLoadMoreItem as RACListBoxLoadMoreItem,\n type ListBoxProps as RACListBoxProps,\n ListBoxSection as RACListBoxSection,\n ListLayout as RACListLayout,\n type ListLayoutOptions as RACListLayoutOptions,\n Select as RACSelect,\n type SelectProps as RACSelectProps,\n SelectStateContext as RACSelectStateContext,\n SelectValue as RACSelectValue,\n Text as RACText,\n Virtualizer as RACVirtualizer,\n useSlottedContext,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCheckBold, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { stringLikeChildrenToString } from '../../utils/string-like-children-to-string.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { XButton } from '../internal/x-button/x-button.js';\nimport { Spinner } from '../spinner/spinner.js';\nimport { TagGroup } from '../tag/tag-group.js';\nimport { Tag } from '../tag/tag.js';\nimport { SearchField } from '../text-inputs/search-field.js';\nimport type {\n ApiProps,\n AsyncItemLoadingProps,\n CollectionItem,\n CollectionProps,\n CommonProps,\n FieldProps,\n Key,\n StringLikeChildren,\n} from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { textStyle } from '../typography/utils.js';\nimport { UNSTABLE_VisuallyHidden } from '../visually-hidden/visually-hidden.js';\n\nexport type UNSTABLE_SelectSelectionMode = 'single' | 'multiple';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n estimatedRowHeight: 40,\n estimatedHeadingHeight: 32,\n loaderHeight: 40,\n padding: 0,\n gap: 0,\n};\n\nexport interface SelectProps<\n T extends CollectionItem = CollectionItem,\n M extends UNSTABLE_SelectSelectionMode = 'single',\n>\n extends\n CommonProps,\n FieldProps<M extends 'single' ? Key : Key[]>,\n CollectionProps<T>,\n AsyncItemLoadingProps,\n ApiProps<SelectApi>,\n Pick<\n RACSelectProps<T, M>,\n | 'isDisabled'\n | 'isRequired'\n | 'isInvalid'\n | 'autoComplete'\n | 'autoFocus'\n | 'placeholder'\n | 'onFocus'\n | 'onBlur'\n | 'onOpenChange'\n > {\n /** The currently selected key in the collection (controlled). */\n selectedKey?: Key | null;\n /** The initial selected key in the collection (uncontrolled). */\n defaultSelectedKey?: Key;\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (key: Key | null) => void;\n /**\n * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n * @default false\n */\n isVirtualized?: boolean;\n /** Handler that is called when the list of items is scrolled. */\n onScroll?: UIEventHandler<HTMLDivElement>;\n /**\n * The selection mode of the select.\n * @default 'single'\n */\n UNSTABLE_selectionMode?: M;\n /** The value of the select (controlled). */\n UNSTABLE_value?: M extends 'single' ? Key | null : Key[];\n /** The initial value of the select (uncontrolled). */\n UNSTABLE_defaultValue?: M extends 'single' ? Key : Key[];\n /** Handler that is called when the value changes. */\n UNSTABLE_onChange?: (key: M extends 'single' ? Key | null : Key[]) => void;\n /**\n * How the selected value is displayed.\n * @default 'text'\n */\n UNSTABLE_valueDisplay?: 'text' | 'tags' | 'count';\n /**\n * Whether the list of options should be filterable.\n * @default false\n */\n UNSTABLE_isFilterable?: boolean;\n /** The value of the filter input (controlled). */\n UNSTABLE_filterValue?: string;\n /** The initial value of the filter input (uncontrolled). */\n UNSTABLE_defaultFilterValue?: string;\n /** Handler that is called when the filter value changes. */\n UNSTABLE_onFilterChange?: (value: string) => void;\n /** A custom filter function to use instead of the default filter. */\n UNSTABLE_filter?: ((textValue: string, inputValue: string, node: { key: Key; value: T | null }) => boolean) | null;\n UNSTABLE_isClearable?: boolean;\n}\n\n/** The imperative API exposed by the `Select` component. */\nexport interface SelectApi {\n /** Focuses the trigger button and opens the list of items. */\n focus: () => void;\n}\n\nfunction Select<T extends CollectionItem, M extends UNSTABLE_SelectSelectionMode = 'single'>(\n {\n children,\n items,\n label,\n description,\n error,\n UNSAFE_className,\n UNSAFE_style,\n onScroll,\n isVirtualized = false,\n apiRef,\n UNSTABLE_isLoading: isLoading,\n UNSTABLE_onLoadMore: onLoadMore,\n selectedKey,\n defaultSelectedKey,\n onSelectionChange,\n UNSTABLE_selectionMode,\n UNSTABLE_value,\n UNSTABLE_defaultValue,\n UNSTABLE_onChange,\n UNSTABLE_valueDisplay: valueDisplay = 'text',\n UNSTABLE_isFilterable: isFilterable = false,\n UNSTABLE_filterValue: filterValue,\n UNSTABLE_defaultFilterValue: defaultFilterValue,\n UNSTABLE_onFilterChange: onFilterChange,\n UNSTABLE_filter: filter,\n UNSTABLE_isClearable: isClearable = false,\n ...props\n }: SelectProps<T, M>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const triggerRef = useRef<HTMLButtonElement>(null);\n\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('Select requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`Select` requires `children` to be a function when using `items` prop');\n }\n\n useImperativeHandle(\n apiRef,\n () => ({\n focus: () => triggerRef.current?.focus(),\n }),\n [],\n );\n\n const listBox = (\n <SelectListBox items={items} isLoading={isLoading} onLoadMore={onLoadMore} onScroll={onScroll}>\n {children}\n </SelectListBox>\n );\n\n const listBoxWithVirtualizer = isVirtualized ? (\n <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n {listBox}\n </RACVirtualizer>\n ) : (\n listBox\n );\n\n const listBoxWithFilter = isFilterable ? (\n <SelectFilter\n filterValue={filterValue}\n defaultFilterValue={defaultFilterValue}\n onFilterChange={onFilterChange}\n filter={filter}\n >\n {listBoxWithVirtualizer}\n </SelectFilter>\n ) : (\n listBoxWithVirtualizer\n );\n\n return (\n <RACSelect\n {...props}\n ref={ref}\n className={clsx('cim-select', UNSAFE_className)}\n style={UNSAFE_style}\n selectedKey={selectedKey}\n defaultSelectedKey={defaultSelectedKey}\n onSelectionChange={onSelectionChange}\n value={UNSTABLE_value}\n defaultValue={UNSTABLE_defaultValue}\n onChange={UNSTABLE_onChange}\n selectionMode={UNSTABLE_selectionMode}\n allowsEmptyCollection={isLoading}\n >\n <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n {label}\n </FormFieldLabel>\n <SelectButton ref={triggerRef} valueDisplay={valueDisplay} isClearable={isClearable} />\n <FormFieldError>{error}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n <SelectPopover>{listBoxWithFilter}</SelectPopover>\n {UNSTABLE_selectionMode === 'multiple' && valueDisplay === 'tags' && <SelectTags />}\n </RACSelect>\n );\n}\n\ninterface SelectPopoverProps {\n children: ReactNode;\n}\n\nfunction SelectPopover({ children }: SelectPopoverProps) {\n const popoverRef = useRef<HTMLDivElement>(null);\n const selectState = useContext(RACSelectStateContext);\n\n // Popover is non-modal, but we still want to close it when the user interacts outside\n useInteractOutside({\n ref: popoverRef,\n onInteractOutside: () => {\n selectState?.close();\n },\n isDisabled: !selectState?.isOpen,\n });\n\n // Popover is non-modal, but we still want to prevent scrolling when it is open\n usePreventScroll({ isDisabled: !selectState?.isOpen });\n\n return (\n <CollapsibleList\n ref={popoverRef}\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n // Set to non-modal so that interactions like clicking the clear button can be performed without first having to close the popover\n isNonModal\n >\n {children}\n </CollapsibleList>\n );\n}\n\ninterface SelectButtonProps {\n valueDisplay: SelectProps['UNSTABLE_valueDisplay'];\n isClearable?: SelectProps['UNSTABLE_isClearable'];\n}\n\nconst SelectButton = forwardRef<SelectButtonProps, HTMLButtonElement>(({ valueDisplay, isClearable }, ref) => {\n const triggerRef = useRef<HTMLButtonElement>(null);\n const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n\n return (\n <div className=\"cim-select-button\">\n <RACButton ref={mergeRefs(ref, triggerRef)} className=\"cim-select-button-trigger\" />\n <RACSelectValue className={clsx('cim-select-button-value', textStyle({ variant: 'body', alignment: 'start' }))}>\n {({ selectedText, defaultChildren, isPlaceholder, state }) => {\n if ((valueDisplay === 'tags' && state.selectedItems.length > 0) || valueDisplay === 'count') {\n return (\n <Text as=\"span\" variant=\"body\" tone=\"subtle\">\n {collectionMessages.format('itemsSelected', { selectedItemCount: state.selectedItems.length })}\n </Text>\n );\n }\n\n return isPlaceholder ? defaultChildren : selectedText;\n }}\n </RACSelectValue>\n {isClearable && (\n <SelectClearButton\n // Move focus to trigger button, because button will disappear after clearing\n onClear={() => triggerRef.current?.focus()}\n />\n )}\n <IconChevronDown UNSAFE_className=\"cim-select-button-chevron\" />\n </div>\n );\n});\n\nfunction SelectClearButton({ onClear }: { onClear?: () => void }) {\n const selectState = useContext(RACSelectStateContext);\n\n if (!selectState || selectState.selectedItems.length === 0) {\n return null;\n }\n\n return (\n <XButton\n // TODO: i18n once stabilized\n aria-label=\"Clear selection\"\n iconType=\"circled\"\n onPress={() => {\n selectState.setValue(null);\n onClear?.();\n }}\n slot={null}\n UNSAFE_className=\"cim-select-button-clear\"\n />\n );\n}\n\nfunction SelectListBox<T extends CollectionItem>({\n children,\n items,\n isLoading,\n onLoadMore,\n ...props\n}: RACListBoxProps<T> & {\n isLoading?: boolean;\n onLoadMore?: () => void;\n}) {\n const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n const selectState = useContext(RACSelectStateContext);\n const isEmpty = selectState?.collection.size === 0;\n\n return (\n <RACListBox\n className=\"cim-select-listbox\"\n renderEmptyState={() =>\n !isLoading && (\n // TODO: i18n once stabilized\n <Text\n as=\"p\"\n variant=\"body\"\n tone=\"subtle\"\n marginX={8}\n marginY={8}\n UNSAFE_className=\"cim-select-listbox-empty-state\"\n >\n No results found.\n </Text>\n )\n }\n {...props}\n >\n <RACCollection items={items}>{children}</RACCollection>\n <RACListBoxLoadMoreItem onLoadMore={onLoadMore} isLoading={isLoading}>\n <Spinner aria-label={collectionMessages.format(isEmpty ? 'loading' : 'loadingMore')} size=\"small\" marginY={8} />\n </RACListBoxLoadMoreItem>\n </RACListBox>\n );\n}\n\nfunction SelectFilter<T extends CollectionItem>({\n children,\n filterValue,\n defaultFilterValue,\n onFilterChange,\n filter,\n}: RACListBoxProps<T> & {\n children: ReactNode;\n filterValue?: string;\n defaultFilterValue?: string;\n onFilterChange?: (value: string) => void;\n filter?: ((textValue: string, inputValue: string, node: { key: Key; value: T | null }) => boolean) | null;\n}) {\n const { contains } = useFilter({ sensitivity: 'base' });\n const filterFn = useMemo(() => {\n if (filter === null) return undefined;\n if (filter == null) return contains;\n\n return (textValue: string, inputValue: string, node: { key: Key; value: T | null }) => {\n return filter(textValue, inputValue, { key: node.key, value: node.value });\n };\n }, [filter, contains]);\n\n return (\n <RACAutocomplete<T>\n filter={filterFn}\n inputValue={filterValue}\n defaultInputValue={defaultFilterValue}\n onInputChange={onFilterChange}\n >\n <SearchField\n // TODO: i18n once stabilized\n aria-label=\"Search\"\n placeholder=\"Search\"\n autoFocus\n marginX={8}\n marginTop={8}\n />\n {children}\n </RACAutocomplete>\n );\n}\n\nfunction SelectTags() {\n const labelContext = useSlottedContext(RACLabelContext);\n const selectedItemsLabelId = useId();\n\n return (\n <RACSelectValue>\n {({ state }) => {\n if (state.selectedItems.length === 0) {\n return <></>;\n }\n\n return (\n <>\n <TagGroup\n aria-labelledby={[labelContext?.id, selectedItemsLabelId].filter(Boolean).join(' ')}\n items={state.selectedItems\n .filter((item) => item != null)\n .map((item) => ({ id: item.key, label: item.textValue }))}\n onRemove={(keys) => {\n if (Array.isArray(state.value)) {\n state.setValue(state.value.filter((k) => !keys.has(k)));\n }\n }}\n marginTop={8}\n >\n {(item) => <Tag>{item.label}</Tag>}\n </TagGroup>\n {/* TODO: i18n once stabilized */}\n <UNSTABLE_VisuallyHidden id={selectedItemsLabelId}>selected items</UNSTABLE_VisuallyHidden>\n </>\n );\n }}\n </RACSelectValue>\n );\n}\n\n/**\n * Allows users to select one item from a collapsible list.\n *\n * See [select usage guidelines](https://ui.cimpress.io/components/select/).\n */\nconst _Select = withStyleProps(forwardRef(Select), 'Select');\n\nexport { _Select as Select };\n\nexport interface SelectItemProps extends Pick<RACListBoxItemProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n /** The ID of the item. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the label. */\n children: StringLikeChildren;\n}\n\n/** Renders a single list item within `Select`. */\nexport function SelectItem({ children, ...props }: SelectItemProps) {\n const textValue = stringLikeChildrenToString(children);\n\n return (\n <RACListBoxItem {...props} className=\"cim-select-item\" textValue={textValue}>\n {({ isDisabled, isSelected, selectionMode }) => (\n <>\n {selectionMode === 'single' && <IconCheckBold />}\n {selectionMode === 'multiple' && <CheckboxIndicator isSelected={isSelected} isDisabled={isDisabled} />}\n\n <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n {children}\n </RACText>\n </>\n )}\n </RACListBoxItem>\n );\n}\n\nSelectItem.displayName = 'SelectItem';\n\nexport interface SelectSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n /** The ID of the section. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the section title. */\n title: string;\n}\n\n/** Groups list items within `Select` into a section. */\nexport function SelectSection<T extends CollectionItem>({ title, children, items, ...props }: SelectSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`SelectSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACListBoxSection {...props} className=\"cim-select-section\">\n <RACHeader\n className={clsx('cim-select-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n >\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACListBoxSection>\n );\n}\n\nSelectSection.displayName = 'SelectSection';\n"]}
@@ -1,6 +1,6 @@
1
1
  import { type SliderProps as RACSliderProps } from 'react-aria-components';
2
2
  import type { CommonProps, LabellableProps } from '../types.js';
3
- export interface UNSTABLE_SliderProps<T extends number | number[] = number> extends CommonProps, LabellableProps, Pick<RACSliderProps<T>, 'isDisabled' | 'minValue' | 'maxValue' | 'step' | 'formatOptions'> {
3
+ export interface SliderProps<T extends number | [number, number] = number> extends CommonProps, LabellableProps, Pick<RACSliderProps<T>, 'isDisabled' | 'minValue' | 'maxValue' | 'step' | 'formatOptions'> {
4
4
  /** A description for the field. Provides a hint such as specific requirements for what to choose. */
5
5
  description?: string;
6
6
  /** The current value (controlled). */
@@ -18,17 +18,25 @@ export interface UNSTABLE_SliderProps<T extends number | number[] = number> exte
18
18
  */
19
19
  form?: string;
20
20
  /**
21
- * The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name).
21
+ * The name(s) of the input element(s), used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name).
22
+ */
23
+ name?: T extends [number, number] ? [string, string] : string;
24
+ /**
25
+ * Whether to show input fields for slider values.
26
+ * @default false
22
27
  */
23
- name?: T extends number[] ? string[] : string;
24
- /** Show input fields for slider values. */
25
28
  withInput?: boolean;
26
- /** Show static labels for minimum and maximum values. */
29
+ /**
30
+ * Whether to show static labels with minimum and maximum values.
31
+ * @default false
32
+ * */
27
33
  showLabels?: boolean;
28
34
  }
29
35
  /**
30
36
  * Allows users to select one or more values within a range.
37
+ *
38
+ * See [slider usage guidelines](https://ui.cimpress.io/components/slider/).
31
39
  */
32
- declare const _UNSTABLE_Slider: <T extends number | number[] = number>(props: UNSTABLE_SliderProps<T> & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
33
- export { _UNSTABLE_Slider as UNSTABLE_Slider };
40
+ declare const _Slider: <T extends number | [number, number] = number>(props: SliderProps<T> & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
41
+ export { _Slider as Slider };
34
42
  //# sourceMappingURL=slider.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../../src/components/slider/slider.tsx"],"names":[],"mappings":"AAKA,OAAO,EAYL,KAAK,WAAW,IAAI,cAAc,EACnC,MAAM,uBAAuB,CAAC;AAM/B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAShE,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,CACxE,SACE,WAAW,EACX,eAAe,EACf,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,eAAe,CAAC;IAC5F,qGAAqG;IACrG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,wCAAwC;IACxC,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,2DAA2D;IAC3D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACjC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,SAAS,MAAM,EAAE,GAAG,MAAM,EAAE,GAAG,MAAM,CAAC;IAC9C,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yDAAyD;IACzD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAgKD;;GAEG;AACH,QAAA,MAAM,gBAAgB,GAjKG,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,iLAiK0B,CAAC;AAE/E,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC"}
1
+ {"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../../src/components/slider/slider.tsx"],"names":[],"mappings":"AAKA,OAAO,EAYL,KAAK,WAAW,IAAI,cAAc,EACnC,MAAM,uBAAuB,CAAC;AAO/B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAGhE,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CACvE,SACE,WAAW,EACX,eAAe,EACf,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,eAAe,CAAC;IAC5F,qGAAqG;IACrG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,wCAAwC;IACxC,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,2DAA2D;IAC3D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACjC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC;IAC9D;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;SAGK;IACL,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA+JD;;;;GAIG;AACH,QAAA,MAAM,OAAO,GAlKG,CAAC,SAAS,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,wKAkKS,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC"}
@@ -4,55 +4,53 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  return (mod && mod.__esModule) ? mod : { "default": mod };
5
5
  };
6
6
  Object.defineProperty(exports, "__esModule", { value: true });
7
- exports.UNSTABLE_Slider = void 0;
7
+ exports.Slider = void 0;
8
8
  const jsx_runtime_1 = require("react/jsx-runtime");
9
9
  const clsx_1 = __importDefault(require("clsx"));
10
10
  const react_1 = require("react");
11
11
  const react_aria_1 = require("react-aria");
12
12
  const react_aria_components_1 = require("react-aria-components");
13
13
  const forward_ref_js_1 = require("../../forward-ref.js");
14
+ const localization_provider_js_1 = require("../../i18n/localization-provider.js");
14
15
  const use_production_warning_js_1 = require("../../utils/use-production-warning.js");
15
16
  const with_style_props_js_1 = require("../../with-style-props.js");
16
17
  const form_field_js_1 = require("../internal/form-field/form-field.js");
17
18
  const input_js_1 = require("../internal/input/input.js");
18
19
  const text_js_1 = require("../typography/text.js");
19
- // TODO: move to translations when stabilized
20
- const sliderStrings = {
21
- srMinimum: 'minimum',
22
- srMaximum: 'maximum',
23
- };
24
- function UNSTABLE_Slider({ label, description, UNSAFE_className, UNSAFE_style, form, name, withInput, showLabels, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) {
20
+ function Slider({ label, description, UNSAFE_className, UNSAFE_style, form, name, withInput, showLabels, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) {
25
21
  const descriptionId = (0, react_aria_1.useId)();
22
+ const rangeStartLabelId = (0, react_aria_1.useId)();
23
+ const rangeEndLabelId = (0, react_aria_1.useId)();
24
+ const messages = (0, localization_provider_js_1.useLocalizedMessages)('slider');
26
25
  (0, use_production_warning_js_1.useProductionWarning)(() => {
27
26
  if (!label && !ariaLabel && !ariaLabelledBy) {
28
27
  console.warn('Slider requires one of label / aria-label / aria-labelledby for accessibility');
29
28
  }
30
29
  }, [label, ariaLabel, ariaLabelledBy]);
31
30
  return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Provider, { values: [[react_aria_components_1.TextContext, { slots: { description: { id: descriptionId } } }]], children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Slider, { ...props, ref: ref, className: (0, clsx_1.default)('cim-slider', UNSAFE_className), style: UNSAFE_style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, orientation: "horizontal", "aria-describedby": [description && descriptionId, props['aria-describedby']].filter(Boolean).join(' '), children: ({ state, isDisabled }) => {
31
+ const isRangeSlider = state.values.length === 2;
32
32
  return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: false, isDisabled: isDisabled, children: label }), !withInput && label != null && ((0, jsx_runtime_1.jsx)(react_aria_components_1.SliderOutput, { className: "cim-slider-output", children: (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "medium", children: state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ') }) })), (0, jsx_runtime_1.jsxs)("div", { className: "cim-slider-track-container", children: [showLabels && ((0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "medium", UNSAFE_className: "cim-slider-label-min", children: state.getThumbMinValue(0) })), (0, jsx_runtime_1.jsx)(react_aria_components_1.SliderTrack, { className: "cim-slider-track", children: ({ state: trackState, isDisabled: trackIsDisabled }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "cim-slider-track-background", "data-disabled": trackIsDisabled || undefined }), (0, jsx_runtime_1.jsx)("div", { className: "cim-slider-fill", style: (state.values.length === 1
33
33
  ? {
34
34
  '--cim-slider-fill-size': trackState.getThumbPercent(0) * 100 + '%',
35
35
  }
36
- : state.values.length === 2
36
+ : isRangeSlider
37
37
  ? {
38
38
  '--cim-slider-fill-start': trackState.getThumbPercent(0) * 100 + '%',
39
39
  '--cim-slider-fill-size': (trackState.getThumbPercent(1) - trackState.getThumbPercent(0)) * 100 + '%',
40
40
  }
41
- : {}) }), trackState.values.map((_, i) => ((0, jsx_runtime_1.jsx)(SliderThumb, { index: i, name: typeof name === 'string' ? name : name?.[i], form: form }, i)))] })) }), showLabels && ((0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "medium", UNSAFE_className: "cim-slider-label-max", children: state.getThumbMaxValue(state.values.length - 1) })), withInput && ((0, jsx_runtime_1.jsx)("div", { className: "cim-slider-inputs-container-wide", children: state.values.map((_, i) => ((0, jsx_runtime_1.jsx)(SliderNumberField, { index: i, style: { order: state.values.length === 2 ? (i === 0 ? -1 : 1) : undefined }, formatOptions: props.formatOptions, children: (0, jsx_runtime_1.jsx)(input_js_1.Input, { width: "fit-content" }) }, i))) }))] }), withInput && ((0, jsx_runtime_1.jsx)("div", { className: "cim-slider-inputs-container-narrow", children: state.values.map((_, i) => ((0, jsx_runtime_1.jsx)(SliderNumberField, { index: i, formatOptions: props.formatOptions, children: (0, jsx_runtime_1.jsx)(input_js_1.Input, {}) }, i))) })), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description })] }));
41
+ : {}) }), trackState.values.map((_, i) => ((0, jsx_runtime_1.jsx)(react_aria_components_1.SliderThumb, { index: i, className: "cim-slider-thumb", name: typeof name === 'string' ? name : name?.[i], form: form, "aria-labelledby": isRangeSlider ? (i === 0 ? rangeStartLabelId : rangeEndLabelId) : undefined }, i)))] })) }), showLabels && ((0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "medium", UNSAFE_className: "cim-slider-label-max", children: state.getThumbMaxValue(state.values.length - 1) })), withInput && ((0, jsx_runtime_1.jsx)("div", { className: "cim-slider-inputs-container-wide", children: state.values.map((_, i) => ((0, jsx_runtime_1.jsx)(SliderNumberField, { index: i, "aria-labelledby": isRangeSlider ? (i === 0 ? rangeStartLabelId : rangeEndLabelId) : undefined, style: { order: isRangeSlider ? (i === 0 ? -1 : 1) : undefined }, formatOptions: props.formatOptions, children: (0, jsx_runtime_1.jsx)(input_js_1.Input, { width: "fit-content" }) }, i))) }))] }), withInput && ((0, jsx_runtime_1.jsx)("div", { className: "cim-slider-inputs-container-narrow", children: state.values.map((_, i) => ((0, jsx_runtime_1.jsx)(SliderNumberField, { index: i, "aria-labelledby": isRangeSlider ? (i === 0 ? rangeStartLabelId : rangeEndLabelId) : undefined, formatOptions: props.formatOptions, children: (0, jsx_runtime_1.jsx)(input_js_1.Input, {}) }, i))) })), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description }), isRangeSlider && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { style: { display: 'none' }, id: rangeStartLabelId, children: messages.format('rangeStart') }), (0, jsx_runtime_1.jsx)("span", { style: { display: 'none' }, id: rangeEndLabelId, children: messages.format('rangeEnd') })] }))] }));
42
42
  } }) }));
43
43
  }
44
- function SliderNumberField({ index, ...props }) {
45
- const state = (0, react_1.useContext)(react_aria_components_1.SliderStateContext);
46
- const labelProps = (0, react_aria_components_1.useSlottedContext)(react_aria_components_1.LabelContext);
47
- return ((0, jsx_runtime_1.jsx)(react_aria_components_1.NumberField, { ...props, className: "cim-slider-input", value: state.values[index], onChange: (value) => state.setThumbValue(index, value ?? 0), "aria-labelledby": labelProps.id, "aria-label": state.values.length === 2 ? (index === 0 ? sliderStrings.srMinimum : sliderStrings.srMaximum) : undefined }));
48
- }
49
- function SliderThumb({ index, name, form }) {
50
- const state = (0, react_1.useContext)(react_aria_components_1.SliderStateContext);
51
- return ((0, jsx_runtime_1.jsx)(react_aria_components_1.SliderThumb, { index: index, className: "cim-slider-thumb", name: typeof name === 'string' ? name : name?.[index], form: form, "aria-label": state.values.length === 2 ? (index === 0 ? sliderStrings.srMinimum : sliderStrings.srMaximum) : undefined }));
52
- }
53
44
  /**
54
45
  * Allows users to select one or more values within a range.
46
+ *
47
+ * See [slider usage guidelines](https://ui.cimpress.io/components/slider/).
55
48
  */
56
- const _UNSTABLE_Slider = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(UNSTABLE_Slider), 'Slider');
57
- exports.UNSTABLE_Slider = _UNSTABLE_Slider;
49
+ const _Slider = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(Slider), 'Slider');
50
+ exports.Slider = _Slider;
51
+ function SliderNumberField({ index, 'aria-labelledby': ariaLabelledBy, ...props }) {
52
+ const state = (0, react_1.useContext)(react_aria_components_1.SliderStateContext);
53
+ const labelProps = (0, react_aria_components_1.useSlottedContext)(react_aria_components_1.LabelContext);
54
+ return ((0, jsx_runtime_1.jsx)(react_aria_components_1.NumberField, { ...props, className: "cim-slider-input", value: state.values[index], onChange: (value) => state.setThumbValue(index, value ?? 0), "aria-labelledby": labelProps.id ? `${labelProps.id} ${ariaLabelledBy}` : ariaLabelledBy }));
55
+ }
58
56
  //# sourceMappingURL=slider.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../../src/components/slider/slider.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport { useId } from 'react-aria';\nimport {\n LabelContext as RACLabelContext,\n NumberField as RACNumberField,\n Provider as RACProvider,\n Slider as RACSlider,\n SliderOutput as RACSliderOutput,\n SliderStateContext as RACSliderStateContext,\n SliderThumb as RACSliderThumb,\n SliderTrack as RACSliderTrack,\n TextContext as RACTextContext,\n useSlottedContext,\n type NumberFieldProps as RACNumberFieldProps,\n type SliderProps as RACSliderProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Input } from '../internal/input/input.js';\nimport type { CommonProps, LabellableProps } from '../types.js';\nimport { Text } from '../typography/text.js';\n\n// TODO: move to translations when stabilized\nconst sliderStrings = {\n srMinimum: 'minimum',\n srMaximum: 'maximum',\n};\n\nexport interface UNSTABLE_SliderProps<T extends number | number[] = number>\n extends\n CommonProps,\n LabellableProps,\n Pick<RACSliderProps<T>, 'isDisabled' | 'minValue' | 'maxValue' | 'step' | 'formatOptions'> {\n /** A description for the field. Provides a hint such as specific requirements for what to choose. */\n description?: string;\n /** The current value (controlled). */\n value?: T;\n /** The default value (uncontrolled). */\n defaultValue?: T;\n /** Handler that is called when the value changes. */\n onChange?: (value: T) => void;\n /** Handler that is called when the slider stops moving. */\n onChangeEnd?: (value: T) => void;\n /**\n * The `<form>` element to associate the input with.\n * The value of this attribute must be the id of a `<form>` in the same document.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).\n */\n form?: string;\n /**\n * The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name).\n */\n name?: T extends number[] ? string[] : string;\n /** Show input fields for slider values. */\n withInput?: boolean;\n /** Show static labels for minimum and maximum values. */\n showLabels?: boolean;\n}\n\nfunction UNSTABLE_Slider<T extends number | number[] = number>(\n {\n label,\n description,\n UNSAFE_className,\n UNSAFE_style,\n form,\n name,\n withInput,\n showLabels,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n ...props\n }: UNSTABLE_SliderProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const descriptionId = useId();\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('Slider requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n return (\n <RACProvider values={[[RACTextContext, { slots: { description: { id: descriptionId } } }]]}>\n <RACSlider\n {...props}\n ref={ref}\n className={clsx('cim-slider', UNSAFE_className)}\n style={UNSAFE_style}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n orientation=\"horizontal\"\n aria-describedby={[description && descriptionId, props['aria-describedby']].filter(Boolean).join(' ')}\n >\n {({ state, isDisabled }) => {\n return (\n <>\n <FormFieldLabel isRequired={false} isDisabled={isDisabled}>\n {label}\n </FormFieldLabel>\n {!withInput && label != null && (\n <RACSliderOutput className=\"cim-slider-output\">\n <Text as=\"span\" variant=\"medium\">\n {state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}\n </Text>\n </RACSliderOutput>\n )}\n <div className=\"cim-slider-track-container\">\n {showLabels && (\n <Text as=\"span\" variant=\"medium\" UNSAFE_className=\"cim-slider-label-min\">\n {state.getThumbMinValue(0)}\n </Text>\n )}\n\n <RACSliderTrack className=\"cim-slider-track\">\n {({ state: trackState, isDisabled: trackIsDisabled }) => (\n <>\n <div className=\"cim-slider-track-background\" data-disabled={trackIsDisabled || undefined} />\n <div\n className=\"cim-slider-fill\"\n style={\n (state.values.length === 1\n ? {\n '--cim-slider-fill-size': trackState.getThumbPercent(0) * 100 + '%',\n }\n : state.values.length === 2\n ? {\n '--cim-slider-fill-start': trackState.getThumbPercent(0) * 100 + '%',\n '--cim-slider-fill-size':\n (trackState.getThumbPercent(1) - trackState.getThumbPercent(0)) * 100 + '%',\n }\n : {}) as React.CSSProperties\n }\n />\n {trackState.values.map((_, i) => (\n <SliderThumb key={i} index={i} name={typeof name === 'string' ? name : name?.[i]} form={form} />\n ))}\n </>\n )}\n </RACSliderTrack>\n {showLabels && (\n <Text as=\"span\" variant=\"medium\" UNSAFE_className=\"cim-slider-label-max\">\n {state.getThumbMaxValue(state.values.length - 1)}\n </Text>\n )}\n {withInput && (\n <div className=\"cim-slider-inputs-container-wide\">\n {state.values.map((_, i) => (\n <SliderNumberField\n key={i}\n index={i}\n style={{ order: state.values.length === 2 ? (i === 0 ? -1 : 1) : undefined }}\n formatOptions={props.formatOptions}\n >\n <Input width=\"fit-content\" />\n </SliderNumberField>\n ))}\n </div>\n )}\n </div>\n {withInput && (\n <div className=\"cim-slider-inputs-container-narrow\">\n {state.values.map((_, i) => (\n <SliderNumberField key={i} index={i} formatOptions={props.formatOptions}>\n <Input />\n </SliderNumberField>\n ))}\n </div>\n )}\n <FormFieldDescription>{description}</FormFieldDescription>\n </>\n );\n }}\n </RACSlider>\n </RACProvider>\n );\n}\n\ninterface SliderNumberFieldProps extends RACNumberFieldProps {\n index: number;\n}\n\nfunction SliderNumberField({ index, ...props }: SliderNumberFieldProps) {\n const state = useContext(RACSliderStateContext)!;\n const labelProps = useSlottedContext(RACLabelContext)!;\n\n return (\n <RACNumberField\n {...props}\n className=\"cim-slider-input\"\n value={state.values[index]}\n onChange={(value) => state.setThumbValue(index, value ?? 0)}\n aria-labelledby={labelProps.id}\n aria-label={\n state.values.length === 2 ? (index === 0 ? sliderStrings.srMinimum : sliderStrings.srMaximum) : undefined\n }\n />\n );\n}\n\nfunction SliderThumb({ index, name, form }: { index: number; name?: string | string[]; form?: string }) {\n const state = useContext(RACSliderStateContext)!;\n\n return (\n <RACSliderThumb\n index={index}\n className=\"cim-slider-thumb\"\n name={typeof name === 'string' ? name : name?.[index]}\n form={form}\n aria-label={\n state.values.length === 2 ? (index === 0 ? sliderStrings.srMinimum : sliderStrings.srMaximum) : undefined\n }\n />\n );\n}\n\n/**\n * Allows users to select one or more values within a range.\n */\nconst _UNSTABLE_Slider = withStyleProps(forwardRef(UNSTABLE_Slider), 'Slider');\n\nexport { _UNSTABLE_Slider as UNSTABLE_Slider };\n"]}
1
+ {"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../../src/components/slider/slider.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport { useId } from 'react-aria';\nimport {\n LabelContext as RACLabelContext,\n NumberField as RACNumberField,\n Provider as RACProvider,\n Slider as RACSlider,\n SliderOutput as RACSliderOutput,\n SliderStateContext as RACSliderStateContext,\n SliderThumb as RACSliderThumb,\n SliderTrack as RACSliderTrack,\n TextContext as RACTextContext,\n useSlottedContext,\n type NumberFieldProps as RACNumberFieldProps,\n type SliderProps as RACSliderProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/localization-provider.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Input } from '../internal/input/input.js';\nimport type { CommonProps, LabellableProps } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface SliderProps<T extends number | [number, number] = number>\n extends\n CommonProps,\n LabellableProps,\n Pick<RACSliderProps<T>, 'isDisabled' | 'minValue' | 'maxValue' | 'step' | 'formatOptions'> {\n /** A description for the field. Provides a hint such as specific requirements for what to choose. */\n description?: string;\n /** The current value (controlled). */\n value?: T;\n /** The default value (uncontrolled). */\n defaultValue?: T;\n /** Handler that is called when the value changes. */\n onChange?: (value: T) => void;\n /** Handler that is called when the slider stops moving. */\n onChangeEnd?: (value: T) => void;\n /**\n * The `<form>` element to associate the input with.\n * The value of this attribute must be the id of a `<form>` in the same document.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).\n */\n form?: string;\n /**\n * The name(s) of the input element(s), used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name).\n */\n name?: T extends [number, number] ? [string, string] : string;\n /**\n * Whether to show input fields for slider values.\n * @default false\n */\n withInput?: boolean;\n /**\n * Whether to show static labels with minimum and maximum values.\n * @default false\n * */\n showLabels?: boolean;\n}\n\nfunction Slider<T extends number | [number, number] = number>(\n {\n label,\n description,\n UNSAFE_className,\n UNSAFE_style,\n form,\n name,\n withInput,\n showLabels,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n ...props\n }: SliderProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const descriptionId = useId();\n const rangeStartLabelId = useId();\n const rangeEndLabelId = useId();\n const messages = useLocalizedMessages('slider');\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('Slider requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n return (\n <RACProvider values={[[RACTextContext, { slots: { description: { id: descriptionId } } }]]}>\n <RACSlider\n {...props}\n ref={ref}\n className={clsx('cim-slider', UNSAFE_className)}\n style={UNSAFE_style}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n orientation=\"horizontal\"\n aria-describedby={[description && descriptionId, props['aria-describedby']].filter(Boolean).join(' ')}\n >\n {({ state, isDisabled }) => {\n const isRangeSlider = state.values.length === 2;\n\n return (\n <>\n <FormFieldLabel isRequired={false} isDisabled={isDisabled}>\n {label}\n </FormFieldLabel>\n\n {!withInput && label != null && (\n <RACSliderOutput className=\"cim-slider-output\">\n <Text as=\"span\" variant=\"medium\">\n {state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}\n </Text>\n </RACSliderOutput>\n )}\n\n <div className=\"cim-slider-track-container\">\n {showLabels && (\n <Text as=\"span\" variant=\"medium\" UNSAFE_className=\"cim-slider-label-min\">\n {state.getThumbMinValue(0)}\n </Text>\n )}\n\n <RACSliderTrack className=\"cim-slider-track\">\n {({ state: trackState, isDisabled: trackIsDisabled }) => (\n <>\n <div className=\"cim-slider-track-background\" data-disabled={trackIsDisabled || undefined} />\n\n <div\n className=\"cim-slider-fill\"\n style={\n (state.values.length === 1\n ? {\n '--cim-slider-fill-size': trackState.getThumbPercent(0) * 100 + '%',\n }\n : isRangeSlider\n ? {\n '--cim-slider-fill-start': trackState.getThumbPercent(0) * 100 + '%',\n '--cim-slider-fill-size':\n (trackState.getThumbPercent(1) - trackState.getThumbPercent(0)) * 100 + '%',\n }\n : {}) as React.CSSProperties\n }\n />\n\n {trackState.values.map((_, i) => (\n <RACSliderThumb\n key={i}\n index={i}\n className=\"cim-slider-thumb\"\n name={typeof name === 'string' ? name : name?.[i]}\n form={form}\n aria-labelledby={isRangeSlider ? (i === 0 ? rangeStartLabelId : rangeEndLabelId) : undefined}\n />\n ))}\n </>\n )}\n </RACSliderTrack>\n\n {showLabels && (\n <Text as=\"span\" variant=\"medium\" UNSAFE_className=\"cim-slider-label-max\">\n {state.getThumbMaxValue(state.values.length - 1)}\n </Text>\n )}\n\n {withInput && (\n <div className=\"cim-slider-inputs-container-wide\">\n {state.values.map((_, i) => (\n <SliderNumberField\n key={i}\n index={i}\n aria-labelledby={isRangeSlider ? (i === 0 ? rangeStartLabelId : rangeEndLabelId) : undefined}\n style={{ order: isRangeSlider ? (i === 0 ? -1 : 1) : undefined }}\n formatOptions={props.formatOptions}\n >\n <Input width=\"fit-content\" />\n </SliderNumberField>\n ))}\n </div>\n )}\n </div>\n\n {withInput && (\n <div className=\"cim-slider-inputs-container-narrow\">\n {state.values.map((_, i) => (\n <SliderNumberField\n key={i}\n index={i}\n aria-labelledby={isRangeSlider ? (i === 0 ? rangeStartLabelId : rangeEndLabelId) : undefined}\n formatOptions={props.formatOptions}\n >\n <Input />\n </SliderNumberField>\n ))}\n </div>\n )}\n\n <FormFieldDescription>{description}</FormFieldDescription>\n\n {isRangeSlider && (\n <>\n <span style={{ display: 'none' }} id={rangeStartLabelId}>\n {messages.format('rangeStart')}\n </span>\n <span style={{ display: 'none' }} id={rangeEndLabelId}>\n {messages.format('rangeEnd')}\n </span>\n </>\n )}\n </>\n );\n }}\n </RACSlider>\n </RACProvider>\n );\n}\n\n/**\n * Allows users to select one or more values within a range.\n *\n * See [slider usage guidelines](https://ui.cimpress.io/components/slider/).\n */\nconst _Slider = withStyleProps(forwardRef(Slider), 'Slider');\n\nexport { _Slider as Slider };\n\ninterface SliderNumberFieldProps extends RACNumberFieldProps {\n index: number;\n}\n\nfunction SliderNumberField({ index, 'aria-labelledby': ariaLabelledBy, ...props }: SliderNumberFieldProps) {\n const state = useContext(RACSliderStateContext)!;\n const labelProps = useSlottedContext(RACLabelContext)!;\n\n return (\n <RACNumberField\n {...props}\n className=\"cim-slider-input\"\n value={state.values[index]}\n onChange={(value) => state.setThumbValue(index, value ?? 0)}\n aria-labelledby={labelProps.id ? `${labelProps.id} ${ariaLabelledBy}` : ariaLabelledBy}\n />\n );\n}\n"]}
@@ -62,7 +62,7 @@ exports.TagField = _TagField;
62
62
  /** Renders a single list item within `TagField`. */
63
63
  function TagFieldItem({ children, ...props }) {
64
64
  const textValue = typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');
65
- return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { ...props, className: "cim-tag-field-item cim-checkbox-indicator-wrapper", textValue: textValue, children: ({ isDisabled }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(checkbox_indicator_js_1.CheckboxIndicator, {}), (0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { slot: "label", className: (0, utils_js_1.textStyle)({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' }), children: children })] })) }));
65
+ return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { ...props, className: "cim-tag-field-item", textValue: textValue, children: ({ isDisabled, isSelected }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(checkbox_indicator_js_1.CheckboxIndicator, { isSelected: isSelected, isDisabled: isDisabled }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { slot: "label", className: (0, utils_js_1.textStyle)({ variant: 'body' }), children: children })] })) }));
66
66
  }
67
67
  TagFieldItem.displayName = 'TagFieldItem';
68
68
  /** Groups list items within `TagField` into a section. */
@@ -1 +1 @@
1
- {"version":3,"file":"tag-field.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ForwardedRef, type UIEventHandler, useImperativeHandle, useRef } from 'react';\nimport { useId } from 'react-aria';\nimport {\n Button as RACButton,\n Collection as RACCollection,\n ComboBox as RACComboBox,\n Group as RACGroup,\n Header as RACHeader,\n ListBoxItem as RACListBoxItem,\n ListBoxSection as RACListBoxSection,\n Text as RACText,\n type ComboBoxProps as RACComboBoxProps,\n type ListBoxItemProps as RACListBoxItemProps,\n ComboBoxValue as RACComboBoxValue,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { TagGroup, type TagGroupProps } from '../tag/tag-group.js';\nimport { Tag, type TagProps } from '../tag/tag.js';\nimport type {\n ApiProps,\n CollectionItem,\n CollectionProps,\n CommonProps,\n FieldWithPlaceholderProps,\n Key,\n StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\nimport { TagFieldInput } from './tag-field-input.js';\nimport { TagFieldListBox } from './tag-field-list-box.js';\n\n/** Represents the state of the `TagField` component for validation purposes. */\nexport interface TagFieldValidationValue {\n /** The selected keys in the TagField. */\n selectedKeys: Set<Key> | null;\n /** The value of the TagField input. */\n inputValue: string;\n}\n\nexport interface TagFieldProps<T extends CollectionItem = CollectionItem>\n extends\n CommonProps,\n FieldWithPlaceholderProps<TagFieldValidationValue>,\n CollectionProps<T>,\n ApiProps<TagFieldApi>,\n Pick<\n RACComboBoxProps<T>,\n | 'isRequired'\n | 'isDisabled'\n | 'isInvalid'\n | 'isReadOnly'\n | 'inputValue'\n | 'defaultInputValue'\n | 'autoFocus'\n | 'onInputChange'\n | 'onFocus'\n | 'onBlur'\n | 'onOpenChange'\n >,\n Pick<TagGroupProps<T>, 'renderEmptyState'> {\n /** The currently selected keys in the collection (controlled). */\n selectedKeys?: Iterable<Key>;\n /** The initial selected keys in the collection (uncontrolled). */\n defaultSelectedKeys?: Iterable<Key>;\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (keys: Set<Key>) => void;\n /**\n * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n * @default false\n */\n isVirtualized?: boolean;\n /** Handler that is called when the list of items is scrolled. */\n onScroll?: UIEventHandler<HTMLDivElement>;\n}\n\n/** The imperative API exposed by the `TagField` component. */\nexport interface TagFieldApi {\n /** Focuses the input field and opens the list of items. */\n focus: () => void;\n}\n\nfunction TagField<T extends CollectionItem>(\n {\n label,\n description,\n error,\n items,\n children,\n placeholder,\n UNSAFE_className,\n UNSAFE_style,\n validate,\n isReadOnly,\n onScroll,\n selectedKeys,\n defaultSelectedKeys,\n onSelectionChange,\n id,\n renderEmptyState,\n isVirtualized = false,\n apiRef,\n ...props\n }: TagFieldProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const inputRef = useRef<HTMLInputElement>(null);\n\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, isRequired, isDisabled } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('TagField requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`TagField` requires `children` to be a function when using `items` prop');\n }\n\n const inputId = useId(id);\n\n useImperativeHandle(\n apiRef,\n () => ({\n focus: () => inputRef.current?.focus(),\n }),\n [],\n );\n\n return (\n <RACComboBox\n {...props}\n ref={ref}\n className={clsx('cim-combo-box', 'cim-tag-field', UNSAFE_className)}\n style={UNSAFE_style}\n id={inputId}\n selectionMode=\"multiple\"\n value={selectedKeys ? Array.from(selectedKeys) : undefined}\n defaultValue={defaultSelectedKeys ? Array.from(defaultSelectedKeys) : undefined}\n onChange={(keys) => onSelectionChange?.(new Set(keys))}\n menuTrigger=\"focus\"\n isReadOnly={isReadOnly}\n data-readonly={isReadOnly ? true : undefined}\n validate={\n validate\n ? ({ inputValue, value }) => {\n return validate({ inputValue, selectedKeys: new Set(value as unknown as Key[]) });\n }\n : undefined\n }\n >\n <FormFieldLabel isRequired={isRequired} isDisabled={isDisabled}>\n {label}\n </FormFieldLabel>\n\n <RACGroup className=\"cim-combo-box-input-group\">\n <TagFieldInput\n inputRef={inputRef}\n aria-describedby={props['aria-describedby']}\n isReadOnly={isReadOnly}\n placeholder={placeholder}\n />\n <RACButton className=\"cim-combo-box-button\">\n <IconChevronDown />\n </RACButton>\n </RACGroup>\n\n <FormFieldError>{error}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n\n <RACComboBoxValue>\n {({ state }) => (\n <TagGroup\n aria-labelledby={inputId}\n disabledKeys={isDisabled ? state.selectedItems.map((item) => item.key) : undefined}\n renderEmptyState={renderEmptyState}\n onRemove={\n isReadOnly\n ? undefined\n : (keys) => {\n if (Array.isArray(state.value)) {\n state.setValue(state.value.filter((k) => !keys.has(k)));\n }\n }\n }\n >\n {state.selectedItems.map((item) => (\n <Tag key={item.key} id={item.key} isDisabled={(item.props as TagProps).isDisabled}>\n {item.textValue}\n </Tag>\n ))}\n </TagGroup>\n )}\n </RACComboBoxValue>\n\n <CollapsibleList\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n >\n <TagFieldListBox<T> items={items} onScroll={onScroll} isVirtualized={isVirtualized}>\n {children}\n </TagFieldListBox>\n </CollapsibleList>\n </RACComboBox>\n );\n}\n\n/**\n * Allows users to filter a collapsible list and select multiple items from it.\n *\n * See [tag field usage guidelines](https://ui.cimpress.io/components/tag-field).\n */\nconst _TagField = withStyleProps(forwardRef(TagField), 'TagField');\n\nexport { _TagField as TagField };\n\nexport interface TagFieldItemProps<T extends CollectionItem> extends Pick<\n RACListBoxItemProps<T>,\n 'isDisabled' | 'onHoverStart' | 'onHoverEnd'\n> {\n /** The ID of the item. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the label. */\n children: StringLikeChildren;\n}\n\n/** Renders a single list item within `TagField`. */\nexport function TagFieldItem<T extends CollectionItem>({ children, ...props }: TagFieldItemProps<T>) {\n const textValue =\n typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n return (\n <RACListBoxItem {...props} className=\"cim-tag-field-item cim-checkbox-indicator-wrapper\" textValue={textValue}>\n {({ isDisabled }) => (\n <>\n <CheckboxIndicator />\n\n <RACText slot=\"label\" className={textStyle({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' })}>\n {children}\n </RACText>\n </>\n )}\n </RACListBoxItem>\n );\n}\n\nTagFieldItem.displayName = 'TagFieldItem';\n\nexport interface TagFieldSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n /** The ID of the section. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the section title. */\n title: string;\n}\n\n/** Groups list items within `TagField` into a section. */\nexport function TagFieldSection<T extends CollectionItem>({\n title,\n children,\n items,\n ...props\n}: TagFieldSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`TagFieldSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACListBoxSection {...props} className=\"cim-combo-box-section\">\n <RACHeader\n className={clsx('cim-combo-box-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n >\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACListBoxSection>\n );\n}\n\nTagFieldSection.displayName = 'TagFieldSection';\n"]}
1
+ {"version":3,"file":"tag-field.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ForwardedRef, type UIEventHandler, useImperativeHandle, useRef } from 'react';\nimport { useId } from 'react-aria';\nimport {\n Button as RACButton,\n Collection as RACCollection,\n ComboBox as RACComboBox,\n Group as RACGroup,\n Header as RACHeader,\n ListBoxItem as RACListBoxItem,\n ListBoxSection as RACListBoxSection,\n Text as RACText,\n type ComboBoxProps as RACComboBoxProps,\n type ListBoxItemProps as RACListBoxItemProps,\n ComboBoxValue as RACComboBoxValue,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { TagGroup, type TagGroupProps } from '../tag/tag-group.js';\nimport { Tag, type TagProps } from '../tag/tag.js';\nimport type {\n ApiProps,\n CollectionItem,\n CollectionProps,\n CommonProps,\n FieldWithPlaceholderProps,\n Key,\n StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\nimport { TagFieldInput } from './tag-field-input.js';\nimport { TagFieldListBox } from './tag-field-list-box.js';\n\n/** Represents the state of the `TagField` component for validation purposes. */\nexport interface TagFieldValidationValue {\n /** The selected keys in the TagField. */\n selectedKeys: Set<Key> | null;\n /** The value of the TagField input. */\n inputValue: string;\n}\n\nexport interface TagFieldProps<T extends CollectionItem = CollectionItem>\n extends\n CommonProps,\n FieldWithPlaceholderProps<TagFieldValidationValue>,\n CollectionProps<T>,\n ApiProps<TagFieldApi>,\n Pick<\n RACComboBoxProps<T>,\n | 'isRequired'\n | 'isDisabled'\n | 'isInvalid'\n | 'isReadOnly'\n | 'inputValue'\n | 'defaultInputValue'\n | 'autoFocus'\n | 'onInputChange'\n | 'onFocus'\n | 'onBlur'\n | 'onOpenChange'\n >,\n Pick<TagGroupProps<T>, 'renderEmptyState'> {\n /** The currently selected keys in the collection (controlled). */\n selectedKeys?: Iterable<Key>;\n /** The initial selected keys in the collection (uncontrolled). */\n defaultSelectedKeys?: Iterable<Key>;\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (keys: Set<Key>) => void;\n /**\n * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n * @default false\n */\n isVirtualized?: boolean;\n /** Handler that is called when the list of items is scrolled. */\n onScroll?: UIEventHandler<HTMLDivElement>;\n}\n\n/** The imperative API exposed by the `TagField` component. */\nexport interface TagFieldApi {\n /** Focuses the input field and opens the list of items. */\n focus: () => void;\n}\n\nfunction TagField<T extends CollectionItem>(\n {\n label,\n description,\n error,\n items,\n children,\n placeholder,\n UNSAFE_className,\n UNSAFE_style,\n validate,\n isReadOnly,\n onScroll,\n selectedKeys,\n defaultSelectedKeys,\n onSelectionChange,\n id,\n renderEmptyState,\n isVirtualized = false,\n apiRef,\n ...props\n }: TagFieldProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const inputRef = useRef<HTMLInputElement>(null);\n\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, isRequired, isDisabled } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('TagField requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`TagField` requires `children` to be a function when using `items` prop');\n }\n\n const inputId = useId(id);\n\n useImperativeHandle(\n apiRef,\n () => ({\n focus: () => inputRef.current?.focus(),\n }),\n [],\n );\n\n return (\n <RACComboBox\n {...props}\n ref={ref}\n className={clsx('cim-combo-box', 'cim-tag-field', UNSAFE_className)}\n style={UNSAFE_style}\n id={inputId}\n selectionMode=\"multiple\"\n value={selectedKeys ? Array.from(selectedKeys) : undefined}\n defaultValue={defaultSelectedKeys ? Array.from(defaultSelectedKeys) : undefined}\n onChange={(keys) => onSelectionChange?.(new Set(keys))}\n menuTrigger=\"focus\"\n isReadOnly={isReadOnly}\n data-readonly={isReadOnly ? true : undefined}\n validate={\n validate\n ? ({ inputValue, value }) => {\n return validate({ inputValue, selectedKeys: new Set(value as unknown as Key[]) });\n }\n : undefined\n }\n >\n <FormFieldLabel isRequired={isRequired} isDisabled={isDisabled}>\n {label}\n </FormFieldLabel>\n\n <RACGroup className=\"cim-combo-box-input-group\">\n <TagFieldInput\n inputRef={inputRef}\n aria-describedby={props['aria-describedby']}\n isReadOnly={isReadOnly}\n placeholder={placeholder}\n />\n <RACButton className=\"cim-combo-box-button\">\n <IconChevronDown />\n </RACButton>\n </RACGroup>\n\n <FormFieldError>{error}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n\n <RACComboBoxValue>\n {({ state }) => (\n <TagGroup\n aria-labelledby={inputId}\n disabledKeys={isDisabled ? state.selectedItems.map((item) => item.key) : undefined}\n renderEmptyState={renderEmptyState}\n onRemove={\n isReadOnly\n ? undefined\n : (keys) => {\n if (Array.isArray(state.value)) {\n state.setValue(state.value.filter((k) => !keys.has(k)));\n }\n }\n }\n >\n {state.selectedItems.map((item) => (\n <Tag key={item.key} id={item.key} isDisabled={(item.props as TagProps).isDisabled}>\n {item.textValue}\n </Tag>\n ))}\n </TagGroup>\n )}\n </RACComboBoxValue>\n\n <CollapsibleList\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n >\n <TagFieldListBox<T> items={items} onScroll={onScroll} isVirtualized={isVirtualized}>\n {children}\n </TagFieldListBox>\n </CollapsibleList>\n </RACComboBox>\n );\n}\n\n/**\n * Allows users to filter a collapsible list and select multiple items from it.\n *\n * See [tag field usage guidelines](https://ui.cimpress.io/components/tag-field).\n */\nconst _TagField = withStyleProps(forwardRef(TagField), 'TagField');\n\nexport { _TagField as TagField };\n\nexport interface TagFieldItemProps<T extends CollectionItem> extends Pick<\n RACListBoxItemProps<T>,\n 'isDisabled' | 'onHoverStart' | 'onHoverEnd'\n> {\n /** The ID of the item. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the label. */\n children: StringLikeChildren;\n}\n\n/** Renders a single list item within `TagField`. */\nexport function TagFieldItem<T extends CollectionItem>({ children, ...props }: TagFieldItemProps<T>) {\n const textValue =\n typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n return (\n <RACListBoxItem {...props} className=\"cim-tag-field-item\" textValue={textValue}>\n {({ isDisabled, isSelected }) => (\n <>\n <CheckboxIndicator isSelected={isSelected} isDisabled={isDisabled} />\n\n <RACText slot=\"label\" className={textStyle({ variant: 'body' })}>\n {children}\n </RACText>\n </>\n )}\n </RACListBoxItem>\n );\n}\n\nTagFieldItem.displayName = 'TagFieldItem';\n\nexport interface TagFieldSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n /** The ID of the section. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the section title. */\n title: string;\n}\n\n/** Groups list items within `TagField` into a section. */\nexport function TagFieldSection<T extends CollectionItem>({\n title,\n children,\n items,\n ...props\n}: TagFieldSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`TagFieldSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACListBoxSection {...props} className=\"cim-combo-box-section\">\n <RACHeader\n className={clsx('cim-combo-box-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n >\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACListBoxSection>\n );\n}\n\nTagFieldSection.displayName = 'TagFieldSection';\n"]}
@@ -1,30 +1,32 @@
1
1
  import { UNSTABLE_ToastQueue as RACToastQueue } from 'react-aria-components';
2
- import type { InternalToastContent, UNSTABLE_ToastOptions } from './types.js';
2
+ import type { InternalToastContent, ToastOptions } from './types.js';
3
3
  export declare const internalToastQueue: RACToastQueue<InternalToastContent>;
4
4
  /**
5
5
  * Manages the queue of toasts.
6
+ *
7
+ * See [toast usage guidelines](https://ui.cimpress.io/components/toast/).
6
8
  */
7
- export interface UNSTABLE_ToastQueue {
9
+ export interface ToastQueue {
8
10
  /**
9
11
  * Add an info toast to the queue.
10
12
  * @returns The ID of the toast
11
13
  */
12
- info(message: string, options?: UNSTABLE_ToastOptions): string;
14
+ info(message: string, options?: ToastOptions): string;
13
15
  /**
14
16
  * Add a success toast to the queue.
15
17
  * @returns The ID of the toast
16
18
  */
17
- success(message: string, options?: UNSTABLE_ToastOptions): string;
19
+ success(message: string, options?: ToastOptions): string;
18
20
  /**
19
21
  * Add a warning toast to the queue.
20
22
  * @returns The ID of the toast
21
23
  */
22
- warning(message: string, options?: UNSTABLE_ToastOptions): string;
24
+ warning(message: string, options?: ToastOptions): string;
23
25
  /**
24
26
  * Add a critical toast to the queue.
25
27
  * @returns The ID of the toast
26
28
  */
27
- critical(message: string, options?: UNSTABLE_ToastOptions): string;
29
+ critical(message: string, options?: ToastOptions): string;
28
30
  /**
29
31
  * Close a toast.
30
32
  * @param id The ID of the toast to close
@@ -35,5 +37,5 @@ export interface UNSTABLE_ToastQueue {
35
37
  */
36
38
  clear(): void;
37
39
  }
38
- export declare const UNSTABLE_toastQueue: UNSTABLE_ToastQueue;
40
+ export declare const toastQueue: ToastQueue;
39
41
  //# sourceMappingURL=toast-queue.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"toast-queue.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/toast-queue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE7E,OAAO,KAAK,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAI9E,eAAO,MAAM,kBAAkB,qCAU7B,CAAC;AAcH;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,qBAAqB,GAAG,MAAM,CAAC;IAC/D;;;OAGG;IACH,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,qBAAqB,GAAG,MAAM,CAAC;IAClE;;;OAGG;IACH,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,qBAAqB,GAAG,MAAM,CAAC;IAClE;;;OAGG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,qBAAqB,GAAG,MAAM,CAAC;IACnE;;;OAGG;IACH,KAAK,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB;;OAEG;IACH,KAAK,IAAI,IAAI,CAAC;CACf;AAED,eAAO,MAAM,mBAAmB,EAAE,mBA2CjC,CAAC"}
1
+ {"version":3,"file":"toast-queue.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/toast-queue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE7E,OAAO,KAAK,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAIrE,eAAO,MAAM,kBAAkB,qCAU7B,CAAC;AAgBH;;;;GAIG;AACH,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IACtD;;;OAGG;IACH,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IACzD;;;OAGG;IACH,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IACzD;;;OAGG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAC1D;;;OAGG;IACH,KAAK,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB;;OAEG;IACH,KAAK,IAAI,IAAI,CAAC;CACf;AAED,eAAO,MAAM,UAAU,EAAE,UA2CxB,CAAC"}