pixelize-design-library 2.4.2-beta.65 → 2.4.2-beta.67

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 (489) hide show
  1. package/CHANGELOG.md +447 -13
  2. package/COMPONENT-GOTCHAS.md +150 -91
  3. package/DESIGN-GUIDE.md +47 -7
  4. package/README.md +37 -3
  5. package/dist/Components/Accordion/Accordion.js +11 -8
  6. package/dist/Components/Accordion/AccordionProps.d.ts +4 -0
  7. package/dist/Components/Accordion/accordionColors.js +1 -2
  8. package/dist/Components/Apexcharts/ApexLineChart/ApexLineChart.js +1 -0
  9. package/dist/Components/Apexcharts/ApexLineChart/ApexLineChartProps.d.ts +2 -2
  10. package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.d.ts +1 -1
  11. package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.js +6 -5
  12. package/dist/Components/Apexcharts/ApexPieChart/ApexPieChartProps.d.ts +3 -1
  13. package/dist/Components/Apexcharts/ApexPieChart/pieImageTexture.d.ts +2 -0
  14. package/dist/Components/Apexcharts/ApexPieChart/pieImageTexture.js +13 -0
  15. package/dist/Components/AppSwitcher/AppSwitcher.js +6 -3
  16. package/dist/Components/AppSwitcher/AppSwitcherProps.d.ts +3 -1
  17. package/dist/Components/AppSwitcher/AppSwitcherProps.js +18 -11
  18. package/dist/Components/AppSwitcher/pixelizeSuite.d.ts +24 -0
  19. package/dist/Components/AppSwitcher/pixelizeSuite.js +71 -0
  20. package/dist/Components/AppearanceSettings/AppearanceSettings.js +3 -3
  21. package/dist/Components/AppearanceSettings/AppearanceSettingsProps.d.ts +2 -2
  22. package/dist/Components/Avatar/avatarColorway.d.ts +2 -2
  23. package/dist/Components/Avatar/avatarColorway.js +7 -6
  24. package/dist/Components/Breadcrumbs/BreadcrumbsProps.d.ts +1 -1
  25. package/dist/Components/Button/Button.styles.js +5 -2
  26. package/dist/Components/Button/ButtonProps.d.ts +2 -4
  27. package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js +3 -1
  28. package/dist/Components/CalendarGrid/CalendarGrid.js +5 -3
  29. package/dist/Components/CalendarGrid/CalendarGridProps.d.ts +1 -1
  30. package/dist/Components/Card/Card.d.ts +1 -0
  31. package/dist/Components/Card/Card.js +1 -0
  32. package/dist/Components/Checkbox/Checkbox.styles.js +3 -1
  33. package/dist/Components/CheckoutKit/selectable.d.ts +3 -1
  34. package/dist/Components/CheckoutKit/selectable.js +10 -7
  35. package/dist/Components/CheckoutKit/tonalHover.d.ts +2 -0
  36. package/dist/Components/CheckoutKit/tonalHover.js +6 -0
  37. package/dist/Components/ChoiceCard/ChoiceCard.d.ts +1 -1
  38. package/dist/Components/ChoiceCard/ChoiceCard.js +2 -1
  39. package/dist/Components/ChoiceCard/ChoiceCardProps.d.ts +6 -0
  40. package/dist/Components/Common/FieldMessage.d.ts +1 -0
  41. package/dist/Components/Common/FormLabel.d.ts +1 -1
  42. package/dist/Components/Common/FormLabel.js +4 -3
  43. package/dist/Components/Common/HelperText.d.ts +2 -2
  44. package/dist/Components/Common/HelperText.js +1 -2
  45. package/dist/Components/Common/activationKey.d.ts +5 -0
  46. package/dist/Components/Common/activationKey.js +12 -0
  47. package/dist/Components/Common/dataAttributes.d.ts +4 -0
  48. package/dist/Components/Common/fieldMessageStyles.js +2 -1
  49. package/dist/Components/Common/findSlot.d.ts +2 -0
  50. package/dist/Components/Common/findSlot.js +24 -0
  51. package/dist/Components/Common/surfaceFocusRing.d.ts +1 -0
  52. package/dist/Components/Common/surfaceFocusRing.js +7 -0
  53. package/dist/Components/ConfirmDialog/ConfirmDialog.js +17 -5
  54. package/dist/Components/ConfirmDialog/ConfirmDialogProps.d.ts +38 -10
  55. package/dist/Components/CopyButton/CopyButton.d.ts +1 -0
  56. package/dist/Components/CopyButton/CopyButton.js +3 -6
  57. package/dist/Components/CouponField/CouponField.js +5 -2
  58. package/dist/Components/CustomModulesTable/CustomModulesTable.js +3 -1
  59. package/dist/Components/DatePicker/CalendarPanel.d.ts +1 -0
  60. package/dist/Components/DatePicker/CalendarPanel.js +3 -1
  61. package/dist/Components/DatePicker/DatePicker.js +24 -26
  62. package/dist/Components/DatePicker/DatePickerProps.d.ts +8 -0
  63. package/dist/Components/DatePicker/PickerPortal.js +1 -1
  64. package/dist/Components/DatePicker/RangeDatePicker.d.ts +7 -0
  65. package/dist/Components/DatePicker/RangeDatePicker.js +10 -29
  66. package/dist/Components/DatePicker/SingleDatePicker.js +5 -21
  67. package/dist/Components/DatePicker/TimeOnlyPicker.js +2 -20
  68. package/dist/Components/DescriptionList/DescriptionList.js +1 -1
  69. package/dist/Components/DetailSections/DetailSections.js +2 -1
  70. package/dist/Components/Divider/Divider.d.ts +3 -3
  71. package/dist/Components/Divider/Divider.js +3 -3
  72. package/dist/Components/Drawer/Drawer.d.ts +2 -0
  73. package/dist/Components/Drawer/Drawer.js +23 -25
  74. package/dist/Components/Dropdown/DropDown.js +6 -21
  75. package/dist/Components/Editor/Editor.js +6 -2
  76. package/dist/Components/Editor/EditorProps.d.ts +17 -1
  77. package/dist/Components/Editor/editorLabels.js +1 -0
  78. package/dist/Components/Editor/editorTokenStyles.d.ts +8 -0
  79. package/dist/Components/Editor/editorTokenStyles.js +9 -1
  80. package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.d.ts +1 -1
  81. package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js +9 -2
  82. package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtpProps.d.ts +15 -1
  83. package/dist/Components/EmptyState/EmptyStateProps.d.ts +21 -0
  84. package/dist/Components/EmptyState/FilteredEmptyState.d.ts +5 -0
  85. package/dist/Components/EmptyState/FilteredEmptyState.js +23 -0
  86. package/dist/Components/FieldSelectModal/FieldSelectModal.d.ts +1 -0
  87. package/dist/Components/FilePreview/FilePreview.js +7 -3
  88. package/dist/Components/FilePreview/FilePreviewProps.d.ts +2 -1
  89. package/dist/Components/FileUpload/FileUpload.js +8 -9
  90. package/dist/Components/FileUpload/FileUploadProps.d.ts +2 -2
  91. package/dist/Components/FileUploader/FileUploader.js +5 -6
  92. package/dist/Components/FilterSidebar/FilterSidebar.d.ts +7 -9
  93. package/dist/Components/FilterSidebar/FilterSidebar.js +90 -233
  94. package/dist/Components/FilterSidebar/OptionsSection.d.ts +14 -0
  95. package/dist/Components/FilterSidebar/OptionsSection.js +46 -0
  96. package/dist/Components/FilterSidebar/RangeSection.d.ts +17 -0
  97. package/dist/Components/FilterSidebar/RangeSection.js +80 -0
  98. package/dist/Components/FilterSidebar/SectionHeader.d.ts +13 -0
  99. package/dist/Components/FilterSidebar/SectionHeader.js +29 -0
  100. package/dist/Components/FilterSidebar/useStableCallback.d.ts +1 -0
  101. package/dist/Components/FilterSidebar/useStableCallback.js +12 -0
  102. package/dist/Components/Form/FormWrapper.d.ts +7 -7
  103. package/dist/Components/Form/FormWrapper.js +5 -3
  104. package/dist/Components/FormField/FormField.js +1 -1
  105. package/dist/Components/Header/Header.js +1 -1
  106. package/dist/Components/Header/HeaderActions.js +4 -2
  107. package/dist/Components/IconButton/IconButtonProps.d.ts +2 -1
  108. package/dist/Components/Input/TextInput.js +2 -2
  109. package/dist/Components/Input/TextInputProps.d.ts +3 -1
  110. package/dist/Components/KanbanBoard/AccountCard.js +1 -1
  111. package/dist/Components/KanbanBoard/KanbanBoard.d.ts +1 -1
  112. package/dist/Components/KanbanBoard/KanbanBoard.js +11 -7
  113. package/dist/Components/LauncherTrigger/LauncherTrigger.js +1 -1
  114. package/dist/Components/LazyWrapper/LazyWrapper.d.ts +2 -1
  115. package/dist/Components/LazyWrapper/LazyWrapper.js +1 -1
  116. package/dist/Components/MediaViewer/MediaViewer.js +4 -3
  117. package/dist/Components/MediaViewer/components/MediaAudioPlayer.js +5 -1
  118. package/dist/Components/MediaViewer/components/MediaImageViewer.js +19 -8
  119. package/dist/Components/MediaViewer/components/MediaScrubber.js +7 -2
  120. package/dist/Components/MediaViewer/components/MediaVideoPlayer.js +3 -1
  121. package/dist/Components/MediaViewer/components/ViewerIconButton.js +3 -1
  122. package/dist/Components/MediaViewer/hooks/useFileViewer.d.ts +1 -0
  123. package/dist/Components/MediaViewer/mediaItems.d.ts +1 -0
  124. package/dist/Components/MediaViewer/mediaItems.js +5 -0
  125. package/dist/Components/Modal/Modal.d.ts +1 -0
  126. package/dist/Components/Modal/Modal.js +7 -25
  127. package/dist/Components/Modal/warnDroppedSlotChildren.d.ts +1 -1
  128. package/dist/Components/Modal/warnDroppedSlotChildren.js +7 -3
  129. package/dist/Components/NavLauncher/LauncherTabs.js +2 -1
  130. package/dist/Components/NavLauncher/NavLauncher.js +47 -22
  131. package/dist/Components/NavLauncher/NavLauncherProps.d.ts +6 -4
  132. package/dist/Components/NavLauncher/ScopeBar.js +4 -2
  133. package/dist/Components/NavLauncher/engine/engine.js +2 -1
  134. package/dist/Components/NavLauncher/engine/fold.js +2 -1
  135. package/dist/Components/NavLauncher/launcherMotion.d.ts +19 -0
  136. package/dist/Components/NavLauncher/launcherMotion.js +15 -0
  137. package/dist/Components/NavLauncher/launcherParts.d.ts +12 -0
  138. package/dist/Components/NavLauncher/launcherParts.js +45 -11
  139. package/dist/Components/NavLauncher/searchLayout.d.ts +1 -0
  140. package/dist/Components/NavLauncher/searchLayout.js +3 -1
  141. package/dist/Components/NavLauncher/spotlightParts.d.ts +6 -2
  142. package/dist/Components/NavLauncher/spotlightParts.js +22 -9
  143. package/dist/Components/NavLauncher/useCopiedFlash.d.ts +6 -0
  144. package/dist/Components/NavLauncher/useCopiedFlash.js +21 -0
  145. package/dist/Components/NavigationBar/NavigationBar.js +6 -5
  146. package/dist/Components/NoteTextArea/NoteTextArea.js +12 -17
  147. package/dist/Components/NoteTextArea/NoteTextAreaProps.d.ts +5 -3
  148. package/dist/Components/Notification/Notification.js +19 -21
  149. package/dist/Components/Notification/NotificationProps.d.ts +1 -1
  150. package/dist/Components/NotificationBell/notificationHelpers.d.ts +16 -1
  151. package/dist/Components/NotificationBell/notificationHelpers.js +13 -7
  152. package/dist/Components/OffersList/OffersList.js +4 -2
  153. package/dist/Components/OptionChip/OptionChip.js +3 -2
  154. package/dist/Components/OptionChip/optionInk.js +4 -2
  155. package/dist/Components/OrderStatusTimeline/OrderStatusTimeline.js +2 -1
  156. package/dist/Components/OrgSwitcher/OrgSwitcher.js +13 -6
  157. package/dist/Components/OrgSwitcher/OrgSwitcherProps.d.ts +1 -1
  158. package/dist/Components/OrganizationDetails/OrganizationDetails.js +4 -7
  159. package/dist/Components/OrganizationDetails/OrganizationDetailsProps.d.ts +4 -2
  160. package/dist/Components/PdfViewer/PdfViewer.d.ts +1 -0
  161. package/dist/Components/PlanBadge/PlanBadgeProps.d.ts +1 -1
  162. package/dist/Components/PlanPill/PlanPill.js +4 -2
  163. package/dist/Components/PlanPill/PlanPillProps.d.ts +1 -1
  164. package/dist/Components/ProductCard/ProductCardAction.js +2 -1
  165. package/dist/Components/ProductCard/ProductCardSwatches.js +2 -1
  166. package/dist/Components/ProductDetails/ProductDetails.js +2 -1
  167. package/dist/Components/ProfileCard/ProfileCard.d.ts +1 -0
  168. package/dist/Components/ProfileCard/ProfileCard.js +12 -26
  169. package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js +4 -2
  170. package/dist/Components/ProgressBar/ProgressBar.js +2 -1
  171. package/dist/Components/QuantityStepper/QuantityStepper.js +5 -2
  172. package/dist/Components/QueryState/QueryStateBoundary.d.ts +1 -1
  173. package/dist/Components/QueryState/QueryStateBoundary.js +5 -1
  174. package/dist/Components/QueryState/QueryStateProps.d.ts +6 -2
  175. package/dist/Components/RadioButton/RadioButton.js +2 -3
  176. package/dist/Components/RolesPermission/RolesPermission.js +12 -8
  177. package/dist/Components/ScrollToTop/ScrollToTop.d.ts +1 -0
  178. package/dist/Components/ScrollbarBox/ScrollbarBox.d.ts +4 -1
  179. package/dist/Components/ScrollbarBox/ScrollbarBox.js +10 -4
  180. package/dist/Components/SearchSelect/SearchSelect.d.ts +1 -1
  181. package/dist/Components/SearchSelect/SearchSelect.js +8 -5
  182. package/dist/Components/SearchSelect/SearchSelectProps.d.ts +3 -3
  183. package/dist/Components/SegmentedControl/SegmentedControl.d.ts +1 -1
  184. package/dist/Components/SegmentedControl/SegmentedControl.js +1 -1
  185. package/dist/Components/Select/Select.js +6 -0
  186. package/dist/Components/Select/SelectNative.d.ts +16 -0
  187. package/dist/Components/Select/SelectPopup.js +170 -63
  188. package/dist/Components/Select/SelectProps.d.ts +30 -2
  189. package/dist/Components/Select/groupedWindow.d.ts +21 -0
  190. package/dist/Components/Select/groupedWindow.js +50 -0
  191. package/dist/Components/SelectSearch/SelectSearch.d.ts +1 -1
  192. package/dist/Components/SelectSearch/SelectSearch.js +48 -38
  193. package/dist/Components/SelectSearch/SelectSearchProps.d.ts +3 -3
  194. package/dist/Components/SelectV2/SelectV2.d.ts +1 -1
  195. package/dist/Components/SelectV2/SelectV2.js +1 -1
  196. package/dist/Components/SelectV2/SelectV2Props.d.ts +3 -3
  197. package/dist/Components/SideBar/SecondaryBar.js +3 -2
  198. package/dist/Components/SideBar/components/MenuItemBox.js +3 -2
  199. package/dist/Components/SideBar/components/MenuItems.js +1 -1
  200. package/dist/Components/SideBar/components/OtherApps.js +2 -2
  201. package/dist/Components/SideBar/components/PinnedSection.js +1 -1
  202. package/dist/Components/SideBar/sidebarScale.d.ts +2 -2
  203. package/dist/Components/SideBar/sidebarScale.js +2 -2
  204. package/dist/Components/SignInActivityTable/SignInActivityTable.js +7 -2
  205. package/dist/Components/SignInActivityTable/SignInActivityTableProps.d.ts +1 -1
  206. package/dist/Components/SignInActivityTable/scrollRegionRing.d.ts +10 -0
  207. package/dist/Components/SignInActivityTable/scrollRegionRing.js +14 -0
  208. package/dist/Components/Skeletons/SkeletonProps.d.ts +5 -1
  209. package/dist/Components/Slider/Slider.d.ts +2 -0
  210. package/dist/Components/Slider/Slider.js +5 -4
  211. package/dist/Components/StageProgress/StageItem.js +2 -1
  212. package/dist/Components/StageProgress/StageProgress.js +8 -2
  213. package/dist/Components/StageProgress/StageProgressProps.d.ts +2 -0
  214. package/dist/Components/StageProgress/StepperStage.js +2 -1
  215. package/dist/Components/StickyBuyBar/StickyBuyBar.js +2 -1
  216. package/dist/Components/Table/Table.js +5 -3
  217. package/dist/Components/Table/TableProps.d.ts +1 -1
  218. package/dist/Components/Table/components/HeaderActions.js +5 -3
  219. package/dist/Components/Table/components/TableBody.js +22 -8
  220. package/dist/Components/Table/components/TableGroupRow.js +2 -1
  221. package/dist/Components/Table/components/TableHeader.js +14 -20
  222. package/dist/Components/Table/components/rowDetail.js +3 -2
  223. package/dist/Components/Table/components/rowFocusRing.d.ts +21 -0
  224. package/dist/Components/Table/components/rowFocusRing.js +20 -0
  225. package/dist/Components/Table/filters/ActiveFilters.js +6 -3
  226. package/dist/Components/Table/filters/CompactSelect.js +2 -1
  227. package/dist/Components/Table/filters/FilterDatePicker.d.ts +6 -0
  228. package/dist/Components/Table/filters/FilterDatePicker.js +61 -0
  229. package/dist/Components/Table/filters/LeftFilterPane.d.ts +1 -0
  230. package/dist/Components/Table/filters/LeftFilterPane.js +14 -6
  231. package/dist/Components/Table/hooks/useTable.js +11 -7
  232. package/dist/Components/Table/settings/ManageColumns.js +4 -3
  233. package/dist/Components/Table/settings/TableSettings.js +4 -4
  234. package/dist/Components/Tabs/Tabs.d.ts +1 -0
  235. package/dist/Components/Tabs/Tabs.js +1 -0
  236. package/dist/Components/Tabs/components/CountBadge.d.ts +1 -0
  237. package/dist/Components/Tabs/components/TabList.d.ts +1 -0
  238. package/dist/Components/Tabs/components/TabList.js +1 -0
  239. package/dist/Components/Tabs/components/TabPanel.d.ts +1 -0
  240. package/dist/Components/Tabs/components/TabPanel.js +1 -0
  241. package/dist/Components/Tabs/tabStyles.js +4 -2
  242. package/dist/Components/Tag/Tag.js +5 -4
  243. package/dist/Components/Tag/Tag.styles.js +5 -4
  244. package/dist/Components/Tag/TagProps.d.ts +4 -1
  245. package/dist/Components/Tag/tagDot.js +10 -3
  246. package/dist/Components/TagInput/TagInput.js +6 -5
  247. package/dist/Components/TagInput/TagInputProps.d.ts +15 -0
  248. package/dist/Components/TagInput/tagEntries.d.ts +7 -1
  249. package/dist/Components/TagInput/tagEntries.js +18 -5
  250. package/dist/Components/TimePicker/TimePicker.js +7 -3
  251. package/dist/Components/TimePicker/TimePickerProps.d.ts +2 -0
  252. package/dist/Components/Timeline/Timeline.js +13 -9
  253. package/dist/Components/Toaster/Toaster.js +2 -1
  254. package/dist/Components/Toggle/TableToggle.d.ts +1 -1
  255. package/dist/Components/Toggle/TableToggle.js +1 -1
  256. package/dist/Components/UpgradeButton/UpgradeButton.js +3 -2
  257. package/dist/Components/UpgradeButton/UpgradeButtonProps.d.ts +1 -1
  258. package/dist/Components/UserDetails/UserDetails.js +5 -7
  259. package/dist/Components/WishlistToggle/WishlistToggle.js +2 -1
  260. package/dist/Components/WorkspaceWindow/WorkspaceTrayPreview.js +11 -1
  261. package/dist/Components/WorkspaceWindow/WorkspaceWindow.js +3 -1
  262. package/dist/Components/WorkspaceWindow/WorkspaceWindowProps.d.ts +14 -7
  263. package/dist/Hooks/useOutsideMouseDown.d.ts +11 -0
  264. package/dist/Hooks/useOutsideMouseDown.js +30 -0
  265. package/dist/Hooks/usePreferences.js +30 -12
  266. package/dist/Hooks/useScrollableRegion.d.ts +17 -0
  267. package/dist/Hooks/useScrollableRegion.js +36 -0
  268. package/dist/Hooks/useSidebarPrefs.d.ts +1 -0
  269. package/dist/Theme/chakra/Menu.styles.d.ts +4 -0
  270. package/dist/Theme/chakra/Menu.styles.js +6 -0
  271. package/dist/Theme/chakra/componentStyles.d.ts +4 -0
  272. package/dist/Theme/chakra/componentStyles.js +1 -1
  273. package/dist/Theme/chakra/createBrandTheme.d.ts +1 -0
  274. package/dist/Theme/chakra/focusRing.styles.d.ts +1 -1
  275. package/dist/Theme/chakra/focusRing.styles.js +3 -3
  276. package/dist/Theme/chakra/paletteFromTheme.d.ts +2 -1
  277. package/dist/Theme/chakra/paletteFromTheme.js +18 -4
  278. package/dist/Theme/provider/PixelizeThemeProvider.d.ts +1 -0
  279. package/dist/Theme/provider/ThemeSwitcher.d.ts +1 -0
  280. package/dist/Theme/provider/ThemeSwitcher.js +1 -1
  281. package/dist/Theme/testing/testPalette.d.ts +1 -0
  282. package/dist/Theme/tokens/builders/buildDarkPalette.d.ts +1 -0
  283. package/dist/Theme/tokens/builders/filledSurface.js +3 -2
  284. package/dist/Theme/tokens/builders/focusRing.js +4 -1
  285. package/dist/Theme/tokens/builders/paletteScale.d.ts +2 -0
  286. package/dist/Theme/tokens/builders/paletteScale.js +10 -0
  287. package/dist/Theme/tokens/types.d.ts +1 -0
  288. package/dist/Utils/accountHandoff.d.ts +3 -0
  289. package/dist/Utils/price.d.ts +1 -0
  290. package/dist/Utils/tabular.d.ts +30 -0
  291. package/dist/Utils/tabular.js +61 -0
  292. package/dist/esm/Components/Accordion/Accordion.js +11 -8
  293. package/dist/esm/Components/Accordion/accordionColors.js +2 -3
  294. package/dist/esm/Components/Apexcharts/ApexLineChart/ApexLineChart.js +2 -1
  295. package/dist/esm/Components/Apexcharts/ApexPieChart/ApexPieChart.js +6 -5
  296. package/dist/esm/Components/Apexcharts/ApexPieChart/pieImageTexture.js +10 -0
  297. package/dist/esm/Components/AppSwitcher/AppSwitcher.js +6 -3
  298. package/dist/esm/Components/AppSwitcher/AppSwitcherProps.js +18 -11
  299. package/dist/esm/Components/AppSwitcher/pixelizeSuite.js +67 -0
  300. package/dist/esm/Components/AppearanceSettings/AppearanceSettings.js +3 -3
  301. package/dist/esm/Components/Avatar/avatarColorway.js +4 -4
  302. package/dist/esm/Components/Button/Button.styles.js +5 -2
  303. package/dist/esm/Components/ButtonGroupIcon/ButtonGroupIcon.js +3 -1
  304. package/dist/esm/Components/CalendarGrid/CalendarGrid.js +5 -3
  305. package/dist/esm/Components/Card/Card.js +1 -0
  306. package/dist/esm/Components/Checkbox/Checkbox.styles.js +3 -1
  307. package/dist/esm/Components/CheckoutKit/selectable.js +10 -7
  308. package/dist/esm/Components/CheckoutKit/tonalHover.js +2 -0
  309. package/dist/esm/Components/ChoiceCard/ChoiceCard.js +2 -1
  310. package/dist/esm/Components/Common/FormLabel.js +4 -3
  311. package/dist/esm/Components/Common/HelperText.js +1 -2
  312. package/dist/esm/Components/Common/activationKey.js +7 -0
  313. package/dist/esm/Components/Common/fieldMessageStyles.js +2 -1
  314. package/dist/esm/Components/Common/findSlot.js +17 -0
  315. package/dist/esm/Components/Common/surfaceFocusRing.js +3 -0
  316. package/dist/esm/Components/ConfirmDialog/ConfirmDialog.js +18 -6
  317. package/dist/esm/Components/CopyButton/CopyButton.js +3 -6
  318. package/dist/esm/Components/CouponField/CouponField.js +5 -2
  319. package/dist/esm/Components/CustomModulesTable/CustomModulesTable.js +3 -1
  320. package/dist/esm/Components/DatePicker/CalendarPanel.js +3 -1
  321. package/dist/esm/Components/DatePicker/DatePicker.js +25 -27
  322. package/dist/esm/Components/DatePicker/PickerPortal.js +2 -2
  323. package/dist/esm/Components/DatePicker/RangeDatePicker.js +10 -29
  324. package/dist/esm/Components/DatePicker/SingleDatePicker.js +5 -21
  325. package/dist/esm/Components/DatePicker/TimeOnlyPicker.js +2 -20
  326. package/dist/esm/Components/DescriptionList/DescriptionList.js +1 -1
  327. package/dist/esm/Components/DetailSections/DetailSections.js +2 -1
  328. package/dist/esm/Components/Divider/Divider.js +3 -3
  329. package/dist/esm/Components/Drawer/Drawer.js +19 -18
  330. package/dist/esm/Components/Dropdown/DropDown.js +7 -22
  331. package/dist/esm/Components/Editor/Editor.js +7 -3
  332. package/dist/esm/Components/Editor/editorLabels.js +1 -0
  333. package/dist/esm/Components/Editor/editorTokenStyles.js +7 -0
  334. package/dist/esm/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js +8 -4
  335. package/dist/esm/Components/EmptyState/FilteredEmptyState.js +18 -0
  336. package/dist/esm/Components/FilePreview/FilePreview.js +8 -4
  337. package/dist/esm/Components/FileUpload/FileUpload.js +8 -9
  338. package/dist/esm/Components/FileUploader/FileUploader.js +6 -7
  339. package/dist/esm/Components/FilterSidebar/FilterSidebar.js +94 -237
  340. package/dist/esm/Components/FilterSidebar/OptionsSection.js +41 -0
  341. package/dist/esm/Components/FilterSidebar/RangeSection.js +78 -0
  342. package/dist/esm/Components/FilterSidebar/SectionHeader.js +23 -0
  343. package/dist/esm/Components/FilterSidebar/useStableCallback.js +8 -0
  344. package/dist/esm/Components/Form/FormWrapper.js +5 -3
  345. package/dist/esm/Components/FormField/FormField.js +1 -1
  346. package/dist/esm/Components/Header/Header.js +1 -1
  347. package/dist/esm/Components/Header/HeaderActions.js +6 -4
  348. package/dist/esm/Components/Input/TextInput.js +2 -2
  349. package/dist/esm/Components/KanbanBoard/AccountCard.js +1 -1
  350. package/dist/esm/Components/KanbanBoard/KanbanActions/KanbanActions.js +2 -2
  351. package/dist/esm/Components/KanbanBoard/KanbanBoard.js +11 -7
  352. package/dist/esm/Components/LauncherTrigger/LauncherTrigger.js +1 -1
  353. package/dist/esm/Components/LazyWrapper/LazyWrapper.js +1 -1
  354. package/dist/esm/Components/MediaViewer/MediaViewer.js +5 -4
  355. package/dist/esm/Components/MediaViewer/components/MediaAudioPlayer.js +5 -1
  356. package/dist/esm/Components/MediaViewer/components/MediaImageViewer.js +19 -8
  357. package/dist/esm/Components/MediaViewer/components/MediaScrubber.js +7 -2
  358. package/dist/esm/Components/MediaViewer/components/MediaVideoPlayer.js +3 -1
  359. package/dist/esm/Components/MediaViewer/components/ViewerIconButton.js +3 -1
  360. package/dist/esm/Components/MediaViewer/mediaItems.js +4 -0
  361. package/dist/esm/Components/Modal/Modal.js +2 -17
  362. package/dist/esm/Components/Modal/warnDroppedSlotChildren.js +7 -3
  363. package/dist/esm/Components/NavLauncher/LauncherTabs.js +2 -1
  364. package/dist/esm/Components/NavLauncher/NavLauncher.js +51 -26
  365. package/dist/esm/Components/NavLauncher/ScopeBar.js +4 -2
  366. package/dist/esm/Components/NavLauncher/engine/engine.js +2 -1
  367. package/dist/esm/Components/NavLauncher/engine/fold.js +2 -1
  368. package/dist/esm/Components/NavLauncher/launcherMotion.js +11 -0
  369. package/dist/esm/Components/NavLauncher/launcherParts.js +40 -8
  370. package/dist/esm/Components/NavLauncher/searchLayout.js +1 -0
  371. package/dist/esm/Components/NavLauncher/spotlightParts.js +23 -10
  372. package/dist/esm/Components/NavLauncher/useCopiedFlash.js +17 -0
  373. package/dist/esm/Components/NavigationBar/NavigationBar.js +6 -5
  374. package/dist/esm/Components/NoteTextArea/NoteTextArea.js +12 -17
  375. package/dist/esm/Components/Notification/Notification.js +20 -22
  376. package/dist/esm/Components/NotificationBell/notificationHelpers.js +12 -6
  377. package/dist/esm/Components/OffersList/OffersList.js +4 -2
  378. package/dist/esm/Components/OptionChip/OptionChip.js +3 -2
  379. package/dist/esm/Components/OptionChip/optionInk.js +4 -2
  380. package/dist/esm/Components/OrderStatusTimeline/OrderStatusTimeline.js +2 -1
  381. package/dist/esm/Components/OrgSwitcher/OrgSwitcher.js +14 -7
  382. package/dist/esm/Components/OrganizationDetails/OrganizationDetails.js +5 -8
  383. package/dist/esm/Components/PlanPill/PlanPill.js +4 -2
  384. package/dist/esm/Components/ProductCard/ProductCardAction.js +2 -1
  385. package/dist/esm/Components/ProductCard/ProductCardSwatches.js +2 -1
  386. package/dist/esm/Components/ProductDetails/ProductDetails.js +2 -1
  387. package/dist/esm/Components/ProfileCard/ProfileCard.js +6 -17
  388. package/dist/esm/Components/ProfilePhotoViewer/ProfilePhotoViewer.js +4 -2
  389. package/dist/esm/Components/ProgressBar/ProgressBar.js +2 -1
  390. package/dist/esm/Components/QuantityStepper/QuantityStepper.js +5 -2
  391. package/dist/esm/Components/QueryState/QueryStateBoundary.js +5 -1
  392. package/dist/esm/Components/RadioButton/RadioButton.js +2 -3
  393. package/dist/esm/Components/RolesPermission/RolesPermission.js +12 -8
  394. package/dist/esm/Components/ScrollbarBox/ScrollbarBox.js +9 -3
  395. package/dist/esm/Components/SearchSelect/SearchSelect.js +8 -5
  396. package/dist/esm/Components/SegmentedControl/SegmentedControl.js +1 -1
  397. package/dist/esm/Components/Select/Select.js +6 -0
  398. package/dist/esm/Components/Select/SelectPopup.js +171 -64
  399. package/dist/esm/Components/Select/groupedWindow.js +44 -0
  400. package/dist/esm/Components/SelectSearch/SelectSearch.js +49 -39
  401. package/dist/esm/Components/SelectV2/SelectV2.js +1 -1
  402. package/dist/esm/Components/SideBar/SecondaryBar.js +3 -2
  403. package/dist/esm/Components/SideBar/components/MenuItemBox.js +3 -2
  404. package/dist/esm/Components/SideBar/components/MenuItems.js +1 -1
  405. package/dist/esm/Components/SideBar/components/OtherApps.js +2 -2
  406. package/dist/esm/Components/SideBar/components/PinnedSection.js +1 -1
  407. package/dist/esm/Components/SideBar/sidebarScale.js +2 -2
  408. package/dist/esm/Components/SignInActivityTable/SignInActivityTable.js +8 -3
  409. package/dist/esm/Components/SignInActivityTable/scrollRegionRing.js +9 -0
  410. package/dist/esm/Components/Slider/Slider.js +6 -5
  411. package/dist/esm/Components/StageProgress/StageItem.js +2 -1
  412. package/dist/esm/Components/StageProgress/StageProgress.js +8 -2
  413. package/dist/esm/Components/StageProgress/StepperStage.js +2 -1
  414. package/dist/esm/Components/StickyBuyBar/StickyBuyBar.js +2 -1
  415. package/dist/esm/Components/Table/Table.js +8 -6
  416. package/dist/esm/Components/Table/components/HeaderActions.js +7 -5
  417. package/dist/esm/Components/Table/components/TableBody.js +22 -8
  418. package/dist/esm/Components/Table/components/TableGroupRow.js +2 -1
  419. package/dist/esm/Components/Table/components/TableHeader.js +15 -21
  420. package/dist/esm/Components/Table/components/rowDetail.js +3 -2
  421. package/dist/esm/Components/Table/components/rowFocusRing.js +16 -0
  422. package/dist/esm/Components/Table/filters/ActiveFilters.js +8 -5
  423. package/dist/esm/Components/Table/filters/CompactSelect.js +2 -1
  424. package/dist/esm/Components/Table/filters/FilterDatePicker.js +20 -0
  425. package/dist/esm/Components/Table/filters/LeftFilterPane.js +14 -6
  426. package/dist/esm/Components/Table/hooks/useTable.js +11 -7
  427. package/dist/esm/Components/Table/settings/ManageColumns.js +4 -3
  428. package/dist/esm/Components/Table/settings/TableSettings.js +4 -4
  429. package/dist/esm/Components/Tabs/Tabs.js +1 -0
  430. package/dist/esm/Components/Tabs/components/TabList.js +1 -0
  431. package/dist/esm/Components/Tabs/components/TabPanel.js +1 -0
  432. package/dist/esm/Components/Tabs/tabStyles.js +5 -3
  433. package/dist/esm/Components/Tag/Tag.js +5 -4
  434. package/dist/esm/Components/Tag/Tag.styles.js +5 -4
  435. package/dist/esm/Components/Tag/tagDot.js +10 -3
  436. package/dist/esm/Components/TagInput/TagInput.js +8 -7
  437. package/dist/esm/Components/TagInput/tagEntries.js +16 -4
  438. package/dist/esm/Components/TimePicker/TimePicker.js +7 -3
  439. package/dist/esm/Components/Timeline/Timeline.js +14 -10
  440. package/dist/esm/Components/Toaster/Toaster.js +2 -1
  441. package/dist/esm/Components/Toggle/TableToggle.js +1 -1
  442. package/dist/esm/Components/UpgradeButton/UpgradeButton.js +3 -2
  443. package/dist/esm/Components/UserDetails/UserDetails.js +5 -7
  444. package/dist/esm/Components/WishlistToggle/WishlistToggle.js +2 -1
  445. package/dist/esm/Components/WorkspaceWindow/WorkspaceTrayPreview.js +12 -2
  446. package/dist/esm/Components/WorkspaceWindow/WorkspaceWindow.js +3 -1
  447. package/dist/esm/Hooks/useOutsideMouseDown.js +26 -0
  448. package/dist/esm/Hooks/usePreferences.js +30 -12
  449. package/dist/esm/Hooks/useScrollableRegion.js +33 -0
  450. package/dist/esm/Theme/chakra/Menu.styles.js +6 -0
  451. package/dist/esm/Theme/chakra/componentStyles.js +1 -1
  452. package/dist/esm/Theme/chakra/focusRing.styles.js +3 -3
  453. package/dist/esm/Theme/chakra/paletteFromTheme.js +16 -3
  454. package/dist/esm/Theme/provider/ThemeSwitcher.js +1 -1
  455. package/dist/esm/Theme/tokens/builders/filledSurface.js +3 -2
  456. package/dist/esm/Theme/tokens/builders/focusRing.js +4 -1
  457. package/dist/esm/Theme/tokens/builders/paletteScale.js +6 -0
  458. package/dist/esm/Utils/tabular.js +56 -0
  459. package/dist/esm/index.js +16 -24
  460. package/dist/index.d.ts +54 -2
  461. package/dist/index.js +33 -29
  462. package/package.json +3 -1
  463. package/dist/Components/Buttons/Buttons.d.ts +0 -3
  464. package/dist/Components/Buttons/Buttons.js +0 -9
  465. package/dist/Components/Buttons/ButtonsProps.d.ts +0 -12
  466. package/dist/Components/Common/ErrorComponent.d.ts +0 -7
  467. package/dist/Components/Common/ErrorComponent.js +0 -16
  468. package/dist/Components/Common/FormattedDescription.d.ts +0 -7
  469. package/dist/Components/Common/FormattedDescription.js +0 -62
  470. package/dist/Components/Common/Label.d.ts +0 -9
  471. package/dist/Components/Common/Label.js +0 -12
  472. package/dist/Components/Input/Input/Input.d.ts +0 -4
  473. package/dist/Components/Input/Input/Input.js +0 -75
  474. package/dist/Components/Input/Input/InputProps.d.ts +0 -24
  475. package/dist/Components/Input/Input/InputProps.js +0 -2
  476. package/dist/Components/ProductCard/productCardFixtures.d.ts +0 -7
  477. package/dist/Components/ProductCard/productCardFixtures.js +0 -61
  478. package/dist/esm/Components/Buttons/Buttons.js +0 -4
  479. package/dist/esm/Components/Common/ErrorComponent.js +0 -14
  480. package/dist/esm/Components/Common/FormattedDescription.js +0 -60
  481. package/dist/esm/Components/Common/Label.js +0 -10
  482. package/dist/esm/Components/Input/Input/Input.js +0 -37
  483. package/dist/esm/Components/Input/Input/InputProps.js +0 -1
  484. package/dist/esm/Components/ProductCard/productCardFixtures.js +0 -58
  485. package/dist/esm/services/feedback.js +0 -15
  486. package/dist/services/feedback.d.ts +0 -12
  487. package/dist/services/feedback.js +0 -18
  488. /package/dist/Components/{Buttons/ButtonsProps.js → Common/dataAttributes.js} +0 -0
  489. /package/dist/esm/Components/{Buttons/ButtonsProps.js → Common/dataAttributes.js} +0 -0
@@ -8,13 +8,15 @@ const react_1 = require("@chakra-ui/react");
8
8
  const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
9
9
  const useViewerChrome_1 = require("../useViewerChrome");
10
10
  const focusRing_1 = require("../../../Theme/tokens/builders/focusRing");
11
+ const surfaceFocusRing_1 = require("../../Common/surfaceFocusRing");
11
12
  /** Toolbar/nav button for the media lightbox — always painted against the fixed dark viewer chrome. */
12
13
  const ViewerIconButton = ({ label, hint, icon, onClick, href, size = "md", round = false, pressed = false, isDisabled = false, testId, }) => {
13
14
  const chrome = (0, useViewerChrome_1.useViewerChrome)();
14
15
  const tooltipLabel = hint ? `${label} (${hint})` : label;
15
16
  // The stage is a fixed dark chrome regardless of app mode, so the ring is settled against it directly.
16
17
  const ring = (0, focusRing_1.settleBetween)(chrome.accent, [chrome.stage, chrome.raised, chrome.hover]);
18
+ const focusShadow = (0, surfaceFocusRing_1.surfaceFocusRing)(chrome.stage, ring);
17
19
  const linkProps = href ? { as: "a", href, download: true, rel: "noopener" } : {};
18
- return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tooltipLabel, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": label, "aria-pressed": href ? undefined : pressed, icon: icon, onClick: onClick, isDisabled: isDisabled, size: size, isRound: round, variant: "ghost", color: chrome.ink, bg: round || pressed ? chrome.raised : "transparent", _hover: { bg: chrome.hover }, _active: { bg: chrome.hover }, outline: "2px solid transparent", outlineOffset: "2px", _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, "data-testid": testId, ...linkProps }) }));
20
+ return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tooltipLabel, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": label, "aria-pressed": href ? undefined : pressed, icon: icon, onClick: onClick, isDisabled: isDisabled, size: size, isRound: round, variant: "ghost", color: chrome.ink, bg: round || pressed ? chrome.raised : "transparent", _hover: { bg: chrome.hover }, _active: { bg: chrome.hover }, outline: "2px solid transparent", outlineOffset: "2px", _focusVisible: { boxShadow: focusShadow }, "data-testid": testId, ...linkProps }) }));
19
21
  };
20
22
  exports.default = ViewerIconButton;
@@ -1,6 +1,7 @@
1
1
  import { type ReactNode } from "react";
2
2
  import type { MediaViewerProps } from "../MediaViewerProps";
3
3
  import { type MediaItem, type ResolveUrl, type ViewerFile } from "../mediaItems";
4
+ /** MediaViewer props passed through; items, index and title come from `open`. */
4
5
  export type UseFileViewerOptions = Omit<MediaViewerProps, "isOpen" | "onClose" | "items" | "index" | "onIndexChange" | "title">;
5
6
  export interface FileViewerApi {
6
7
  /** Opens `files` (app-stored paths) resolved through `resolveUrl`, at `index`. */
@@ -59,6 +59,7 @@ export declare const clampZoom: (zoom: number) => number;
59
59
  export declare function formatClock(totalSeconds: number): string;
60
60
  export declare function mediaLink(item: MediaItem, atSeconds?: number): string;
61
61
  export declare function formatFileSize(bytes: number): string;
62
+ export declare function formatUploadedDate(value: string): string;
62
63
  export declare function fileTypeLabel(src: string): string | null;
63
64
  /** True while the event target is a text field or slider, so keyboard shortcuts stay out of its way. */
64
65
  export declare function isTypingTarget(target: EventTarget | null): boolean;
@@ -8,6 +8,7 @@ exports.planPreview = planPreview;
8
8
  exports.formatClock = formatClock;
9
9
  exports.mediaLink = mediaLink;
10
10
  exports.formatFileSize = formatFileSize;
11
+ exports.formatUploadedDate = formatUploadedDate;
11
12
  exports.fileTypeLabel = fileTypeLabel;
12
13
  exports.isTypingTarget = isTypingTarget;
13
14
  exports.MIN_ZOOM = 25;
@@ -180,6 +181,10 @@ function formatFileSize(bytes) {
180
181
  return `${(bytes / 1024).toFixed(1)} KB`;
181
182
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
182
183
  }
184
+ const UPLOADED_DATE = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric" });
185
+ function formatUploadedDate(value) {
186
+ return UPLOADED_DATE.format(new Date(value));
187
+ }
183
188
  function fileTypeLabel(src) {
184
189
  const match = /\.([a-z0-9]{2,5})(?:[?#].*)?$/i.exec(src);
185
190
  return match ? match[1].toUpperCase() : null;
@@ -3,4 +3,5 @@ import { ChakraModelProps, ModalHeaderSlotProps, ModalBodySlotProps, ModalFooter
3
3
  export declare const ModalHeader: React.FC<ModalHeaderSlotProps>;
4
4
  export declare const ModalBody: React.FC<ModalBodySlotProps>;
5
5
  export declare const ModalFooter: React.FC<ModalFooterSlotProps>;
6
+ /** Dialog built from ModalHeader, ModalBody and ModalFooter slots; other children are dropped. */
6
7
  export default function Modal({ size, isOpen, onClose, overlaybg, overlaybackdropFilter, overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount, initialFocusRef, closeOnOverlayClick, closeOnEsc, trapFocus, motionPreset, scrollBehavior, children, isLoading, title, subtitle, hideCloseButton, contentProps, portalChildren, }: ChakraModelProps): import("react/jsx-runtime").JSX.Element;
@@ -1,15 +1,12 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
2
  Object.defineProperty(exports, "__esModule", { value: true });
6
3
  exports.ModalFooter = exports.ModalBody = exports.ModalHeader = void 0;
7
4
  exports.default = Modal;
8
5
  const jsx_runtime_1 = require("react/jsx-runtime");
9
- const react_1 = __importDefault(require("react"));
10
- const react_2 = require("@chakra-ui/react");
6
+ const react_1 = require("@chakra-ui/react");
11
7
  const useCustomTheme_1 = require("../../Theme/useCustomTheme");
12
8
  const warnDroppedSlotChildren_1 = require("./warnDroppedSlotChildren");
9
+ const findSlot_1 = require("../Common/findSlot");
13
10
  const ModalHeader = ({ children }) => {
14
11
  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
15
12
  };
@@ -22,29 +19,14 @@ const ModalFooter = ({ children }) => {
22
19
  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
23
20
  };
24
21
  exports.ModalFooter = ModalFooter;
25
- const isReactElement = (child) => child !== null && typeof child === "object" && "type" in child;
26
- // Matches by type one Fragment deep, so `<>{cond && <ModalFooter>...</ModalFooter>}</>` isn't dropped.
27
- const findSlot = (children, slot) => {
28
- for (const child of react_1.default.Children.toArray(children)) {
29
- if (!isReactElement(child))
30
- continue;
31
- if (child.type === slot)
32
- return child;
33
- if (child.type === react_1.default.Fragment) {
34
- const nested = findSlot(child.props.children, slot);
35
- if (nested)
36
- return nested;
37
- }
38
- }
39
- return undefined;
40
- };
22
+ /** Dialog built from ModalHeader, ModalBody and ModalFooter slots; other children are dropped. */
41
23
  function Modal({ size, isOpen = false, onClose, overlaybg, overlaybackdropFilter, overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount = true, initialFocusRef, closeOnOverlayClick = true, closeOnEsc = true, trapFocus = true, motionPreset = "scale", scrollBehavior = "outside", children, isLoading, title, subtitle, hideCloseButton, contentProps, portalChildren, }) {
42
24
  var _a, _b;
43
25
  const { colors } = (0, useCustomTheme_1.useCustomTheme)();
44
- const headerSlot = findSlot(children, exports.ModalHeader);
45
- const bodySlot = findSlot(children, exports.ModalBody);
46
- const footerSlot = findSlot(children, exports.ModalFooter);
26
+ const headerSlot = (0, findSlot_1.findSlot)(children, exports.ModalHeader);
27
+ const bodySlot = (0, findSlot_1.findSlot)(children, exports.ModalBody);
28
+ const footerSlot = (0, findSlot_1.findSlot)(children, exports.ModalFooter);
47
29
  (0, warnDroppedSlotChildren_1.warnDroppedSlotChildren)("Modal", children, [exports.ModalHeader, exports.ModalBody, exports.ModalFooter]);
48
30
  const headerContent = headerSlot !== null && headerSlot !== void 0 ? headerSlot : title;
49
- return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, size: size, isCentered: isCentered, finalFocusRef: finalFocusRef, blockScrollOnMount: blockScrollOnMount, initialFocusRef: initialFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, trapFocus: trapFocus, motionPreset: motionPreset, scrollBehavior: scrollBehavior, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { "aria-busy": isLoading || undefined, ...contentProps, children: [(headerContent || subtitle) && ((0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { ...((_a = headerSlot === null || headerSlot === void 0 ? void 0 : headerSlot.props) !== null && _a !== void 0 ? _a : {}), children: [headerContent, subtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "div", mt: 0.5, fontSize: "sm", fontWeight: 400, color: colors.textMuted, children: subtitle }))] })), !hideCloseButton && (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "status", "aria-label": "Loading", justify: "center", align: "center", py: 16, children: (0, jsx_runtime_1.jsx)(react_2.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: colors.boxborder[200], color: colors.accentText, size: "xl" }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.ModalBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && ((0, jsx_runtime_1.jsx)(react_2.ModalFooter, { ...footerSlot.props, children: footerSlot }))] })), portalChildren] })] }));
31
+ return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, size: size, isCentered: isCentered, finalFocusRef: finalFocusRef, blockScrollOnMount: blockScrollOnMount, initialFocusRef: initialFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, trapFocus: trapFocus, motionPreset: motionPreset, scrollBehavior: scrollBehavior, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { "aria-busy": isLoading || undefined, ...contentProps, children: [(headerContent || subtitle) && ((0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { ...((_a = headerSlot === null || headerSlot === void 0 ? void 0 : headerSlot.props) !== null && _a !== void 0 ? _a : {}), children: [headerContent, subtitle && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "div", mt: 0.5, fontSize: "sm", fontWeight: 400, color: colors.textMuted, children: subtitle }))] })), !hideCloseButton && (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), isLoading ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { role: "status", "aria-label": "Loading", justify: "center", align: "center", py: 16, children: (0, jsx_runtime_1.jsx)(react_1.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: colors.boxborder[200], color: colors.accentText, size: "xl" }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.ModalBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && ((0, jsx_runtime_1.jsx)(react_1.ModalFooter, { ...footerSlot.props, children: footerSlot }))] })), portalChildren] })] }));
50
32
  }
@@ -1,2 +1,2 @@
1
1
  import React from "react";
2
- export declare const warnDroppedSlotChildren: (owner: "Drawer" | "Modal", children: React.ReactNode, slots: unknown[]) => void;
2
+ export declare const warnDroppedSlotChildren: (owner: string, children: React.ReactNode, slots: unknown[], advice?: string) => void;
@@ -5,7 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.warnDroppedSlotChildren = void 0;
7
7
  const react_1 = __importDefault(require("react"));
8
- const warned = new Set();
8
+ const warnedByOwner = new Map();
9
+ const PORTAL_ADVICE = "Pass nested dialogs and live regions through the portalChildren prop.";
9
10
  const nameOf = (type) => {
10
11
  if (typeof type === "string")
11
12
  return type;
@@ -30,16 +31,19 @@ const collect = (children, slots, dropped) => {
30
31
  dropped.set(child.type, nameOf(child.type));
31
32
  }
32
33
  };
33
- const warnDroppedSlotChildren = (owner, children, slots) => {
34
+ const warnDroppedSlotChildren = (owner, children, slots, advice = PORTAL_ADVICE) => {
35
+ var _a;
34
36
  if (process.env.NODE_ENV === "production")
35
37
  return;
38
+ const warned = (_a = warnedByOwner.get(owner)) !== null && _a !== void 0 ? _a : new Set();
39
+ warnedByOwner.set(owner, warned);
36
40
  const dropped = new Map();
37
41
  collect(children, slots, dropped);
38
42
  dropped.forEach((name, type) => {
39
43
  if (warned.has(type))
40
44
  return;
41
45
  warned.add(type);
42
- console.warn(`[pixelize-design-library] ${owner}: <${name}> is not a ${owner}Header/${owner}Body/${owner}Footer slot and was dropped. Pass nested dialogs and live regions through the portalChildren prop.`);
46
+ console.warn(`[pixelize-design-library] ${owner}: <${name}> is not a ${owner}Header/${owner}Body/${owner}Footer slot and was dropped. ${advice}`);
43
47
  });
44
48
  };
45
49
  exports.warnDroppedSlotChildren = warnDroppedSlotChildren;
@@ -6,6 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
6
6
  const react_1 = require("@chakra-ui/react");
7
7
  const react_2 = require("react");
8
8
  const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
9
+ const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
9
10
  const motion_1 = require("../../Theme/tokens/primitives/motion");
10
11
  const useCustomTheme_1 = require("../../Theme/useCustomTheme");
11
12
  const tabId = (base, id) => `${base}-tab-${id}`;
@@ -41,7 +42,7 @@ function LauncherTabs({ tabs, selected, onSelect, idBase, label, onLeaveUp, onLe
41
42
  event.stopPropagation();
42
43
  handle();
43
44
  };
44
- return ((0, jsx_runtime_1.jsx)(react_1.Flex, { role: "tablist", "aria-label": label, "aria-orientation": "horizontal", flexShrink: 0, px: { base: "10px", md: "16px" }, gap: { base: 0, md: "4px" }, borderBottomWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, onKeyDown: onKeyDown, children: tabs.map((tab) => {
45
+ return ((0, jsx_runtime_1.jsx)(react_1.Flex, { role: "tablist", "aria-label": label, "aria-orientation": "horizontal", flexShrink: 0, px: { base: "10px", md: "16px" }, gap: { base: 0, md: "4px" }, borderBottomWidth: "1px", borderColor: (0, surfaceRaised_1.raisedRule)(colors), bg: colors.surfaceRaised, onKeyDown: onKeyDown, children: tabs.map((tab) => {
45
46
  const isSelected = tab.id === selected;
46
47
  return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", role: "tab", id: (0, exports.tabId)(idBase, tab.id), ref: (node) => {
47
48
  if (node)
@@ -47,6 +47,7 @@ const motion_1 = require("../../Theme/chakra/motion");
47
47
  const chartColorsFromTheme_1 = require("../../Theme/tokens/builders/chartColorsFromTheme");
48
48
  const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
49
49
  const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
50
+ const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
50
51
  const motion_2 = require("../../Theme/tokens/primitives/motion");
51
52
  const useCustomTheme_1 = require("../../Theme/useCustomTheme");
52
53
  const AppMark_1 = require("../AppSwitcher/AppMark");
@@ -62,11 +63,13 @@ const LauncherTabs_1 = require("./LauncherTabs");
62
63
  const match_1 = require("./match");
63
64
  const NewTabLink_1 = __importDefault(require("./NewTabLink"));
64
65
  const PinToggle_1 = __importDefault(require("./PinToggle"));
66
+ const launcherMotion_1 = require("./launcherMotion");
65
67
  const resultNavigation_1 = require("./resultNavigation");
66
68
  const ScopeBar_1 = require("./ScopeBar");
67
69
  const searchLayout_1 = require("./searchLayout");
68
70
  const spotlight_1 = require("./spotlight");
69
71
  const spotlightParts_1 = require("./spotlightParts");
72
+ const useCopiedFlash_1 = require("./useCopiedFlash");
70
73
  const NO_APPS = [];
71
74
  const MD_QUERY = "(min-width: 48em)";
72
75
  const LG_QUERY = "(min-width: 62em)";
@@ -140,6 +143,7 @@ const DEFAULT_LABELS = {
140
143
  matchedOn: "Matches",
141
144
  answers: "Answers",
142
145
  hintCopy: "copy",
146
+ hintExpand: "expand",
143
147
  scopes: "Search in",
144
148
  scopeAll: "All",
145
149
  scopeChanged: (label) => `Showing ${label}`,
@@ -192,7 +196,7 @@ function Pane({ children, scrolls = false, }) {
192
196
  }
193
197
  function Rail({ label, children, scrolls = false, }) {
194
198
  const { colors } = (0, useCustomTheme_1.useCustomTheme)();
195
- return ((0, jsx_runtime_1.jsx)(react_1.Flex, { "data-scroll-region": scrolls || undefined, as: "aside", "aria-label": label, direction: "column", gap: "16px", w: { base: "100%", lg: RAIL_WIDTH }, flexShrink: 0, px: "14px", pt: "12px", pb: "16px", bg: colors.backgroundColor.subtle, borderTopWidth: { base: "1px", lg: 0 }, borderLeftWidth: { base: 0, lg: "1px" }, borderColor: colors.boxborder[200], overflowY: { base: "visible", lg: "auto" }, children: children }));
199
+ return ((0, jsx_runtime_1.jsx)(react_1.Flex, { "data-scroll-region": scrolls || undefined, as: "aside", "aria-label": label, direction: "column", gap: "16px", w: { base: "100%", lg: RAIL_WIDTH }, flexShrink: 0, px: "14px", pt: "12px", pb: "16px", bg: colors.backgroundColor.subtle, borderTopWidth: { base: "1px", lg: 0 }, borderLeftWidth: { base: 0, lg: "1px" }, borderColor: (0, surfaceRaised_1.raisedRule)(colors), overflowY: { base: "visible", lg: "auto" }, children: (0, jsx_runtime_1.jsx)(launcherParts_1.RulePlaneProvider, { value: "recess", children: children }) }));
196
200
  }
197
201
  function SkeletonLayout({ label }) {
198
202
  return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "status", "aria-busy": "true", "aria-label": label, direction: { base: "column", lg: "row" }, flex: 1, minH: 0, children: [(0, jsx_runtime_1.jsx)(Pane, { children: [0, 1, 2].map((section) => ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "0.75rem", width: "6rem" }), (0, jsx_runtime_1.jsx)(ItemGrid, { children: [0, 1, 2, 3].map((row) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "10px", h: "34px", mt: 2, children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "1rem", width: "1rem" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "0.875rem", width: "8rem" })] }, row))) })] }, section))) }), (0, jsx_runtime_1.jsx)(Rail, { label: label, children: [0, 1].map((group) => ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "0.75rem", width: "5rem" }), [0, 1, 2].map((row) => ((0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "1.5rem", width: "100%", mt: 2 }, row)))] }, group))) })] }));
@@ -203,9 +207,9 @@ function SearchField({ inputRef, value, onChange, onKeyDown, labels, placeholder
203
207
  var _a;
204
208
  onChange("");
205
209
  (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
206
- }, boxSize: "24px", borderRadius: "6px", bg: colors.backgroundColor.subtle, color: colors.textMuted, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 12, strokeWidth: 2.4, "aria-hidden": true }) })) : null, hint ? ((0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": true, display: { base: "none", md: "block" }, children: (0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: hint }) })) : null] }));
210
+ }, boxSize: "24px", borderRadius: "md", bg: colors.backgroundColor.subtle, color: colors.textMuted, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 12, strokeWidth: 2.4, "aria-hidden": true }) })) : null, hint ? ((0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": true, display: { base: "none", md: "block" }, children: (0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: hint }) })) : null] }));
207
211
  }
208
- function SearchRow({ item, query, isActive, link, labels, optionId, isPinned, canPin, onPin, onOpen, onHover, describedBy, }) {
212
+ const SearchRow = (0, react_2.memo)(function SearchRow({ item, query, isActive, link, labels, optionId, index, isPinned, canPin, onPin, onOpen, onHover, describedBy, }) {
209
213
  const { colors } = (0, useCustomTheme_1.useCustomTheme)();
210
214
  const isTouch = (0, launcherParts_1.useTouchDensity)();
211
215
  const isScreen = item.kind === "screen";
@@ -218,17 +222,17 @@ function SearchRow({ item, query, isActive, link, labels, optionId, isPinned, ca
218
222
  const titleRef = title.ref;
219
223
  const contextRef = context.ref;
220
224
  const tipLabel = isScreen || !item.context ? fullLabel : `${fullLabel} · ${item.context}`;
221
- return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tipLabel, placement: "top-start", isDisabled: !title.isTruncated && !context.isTruncated, children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "presentation", "data-group": true, "data-reveal": isActive, position: "relative", align: "flex-start", gap: "10px", minH: isTouch ? "44px" : "34px", pl: "8px", pr: "4px", pt: isTouch ? "12px" : "7px", pb: isTouch ? "8px" : "5px", borderRadius: "8px", transition: (0, motion_2.transitionFor)(["background-color"]), onMouseMove: onHover, sx: isActive
225
+ return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tipLabel, placement: "top-start", isDisabled: !title.isTruncated && !context.isTruncated, children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "presentation", "data-group": true, "data-reveal": isActive, position: "relative", align: "flex-start", gap: "10px", minH: isTouch ? "44px" : "34px", pl: "8px", pr: "4px", pt: isTouch ? "12px" : "7px", pb: isTouch ? "8px" : "5px", borderRadius: "lg", transition: (0, motion_2.transitionFor)(["background-color"]), onMouseMove: () => onHover(index), sx: isActive
222
226
  ? { ...launcherParts_1.ROW_CONTAINER, ...(0, launcherParts_1.activeRowSurface)(colors) }
223
227
  : launcherParts_1.ROW_CONTAINER, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { id: optionId, role: "option", "aria-selected": isActive, "aria-describedby": describedBy, "data-active": isActive, flex: 1, minW: 0, align: "flex-start", gap: "10px", cursor: "pointer", onClick: () => {
224
228
  if (!item.href)
225
- onOpen();
226
- }, children: [(0, jsx_runtime_1.jsx)(launcherParts_1.RowIcon, { icon: item.icon, size: 16, mt: "2px" }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "6px", minW: 0, h: "19px", overflow: item.keywordHint ? "hidden" : undefined, sx: (0, launcherParts_1.titleInset)(base, open, ENTER_CHIP_WIDTH), children: [(0, jsx_runtime_1.jsxs)(react_1.Text, { ref: titleRef, fontSize: "13.5px", fontWeight: 500, color: colors.text[900], noOfLines: 1, minW: 0, ...(item.keywordHint ? { flexShrink: 0, maxW: "100%" } : {}), children: [(0, jsx_runtime_1.jsx)(launcherParts_1.Highlight, { text: item.label, query: query }), isScreen ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontWeight: 400, color: colors.textMuted, children: ` — ${item.context}` })) : null] }), item.isNew ? (0, jsx_runtime_1.jsx)(launcherParts_1.NewTag, { label: labels.newBadge }) : null, item.keywordHint ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "11.5px", color: colors.textMuted, whiteSpace: "nowrap", minW: 0, flexShrink: 100, overflow: "hidden", textOverflow: "ellipsis", children: ` · ${item.keywordHint}` })) : null, item.hint ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "11.5px", color: colors.textMuted, whiteSpace: "nowrap", children: item.hint })) : null] }), item.context && !isScreen ? ((0, jsx_runtime_1.jsx)(react_1.Text, { ref: contextRef, fontSize: "11.5px", lineHeight: "15px", color: colors.textMuted, noOfLines: 1, children: item.context })) : null] })] }), item.href ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: item.href, tabIndex: -1, "aria-hidden": true, onClick: link.onPlainClick, position: "absolute", inset: 0, borderRadius: "8px" })) : null, (0, jsx_runtime_1.jsx)(launcherParts_1.RowActions, { children: (0, jsx_runtime_1.jsxs)(react_1.Box, { "aria-hidden": true, display: "contents", children: [isActive ? ((0, jsx_runtime_1.jsx)(react_1.Box, { sx: {
229
+ onOpen(item);
230
+ }, children: [(0, jsx_runtime_1.jsx)(launcherParts_1.RowIcon, { icon: item.icon, size: 16, mt: "2px" }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "6px", minW: 0, h: "19px", overflow: item.keywordHint ? "hidden" : undefined, sx: (0, launcherParts_1.titleInset)(base, open, ENTER_CHIP_WIDTH), children: [(0, jsx_runtime_1.jsxs)(react_1.Text, { ref: titleRef, fontSize: "13.5px", fontWeight: 500, color: colors.text[900], noOfLines: 1, minW: 0, ...(item.keywordHint ? { flexShrink: 0, maxW: "100%" } : {}), children: [(0, jsx_runtime_1.jsx)(launcherParts_1.Highlight, { text: item.label, query: query }), isScreen ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontWeight: 400, color: colors.textMuted, children: ` — ${item.context}` })) : null] }), item.isNew ? (0, jsx_runtime_1.jsx)(launcherParts_1.NewTag, { label: labels.newBadge }) : null, item.keywordHint ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs-minus", color: colors.textMuted, whiteSpace: "nowrap", minW: 0, flexShrink: 100, overflow: "hidden", textOverflow: "ellipsis", children: ` · ${item.keywordHint}` })) : null, item.hint ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs-minus", color: colors.textMuted, whiteSpace: "nowrap", children: item.hint })) : null] }), item.context && !isScreen ? ((0, jsx_runtime_1.jsx)(react_1.Text, { ref: contextRef, fontSize: "xs-minus", lineHeight: "15px", color: colors.textMuted, noOfLines: 1, children: item.context })) : null] })] }), item.href ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: item.href, tabIndex: -1, "aria-hidden": true, onClick: link.onPlainClick, position: "absolute", inset: 0, borderRadius: "lg" })) : null, (0, jsx_runtime_1.jsx)(launcherParts_1.RowActions, { children: (0, jsx_runtime_1.jsxs)(react_1.Box, { "aria-hidden": true, display: "contents", children: [isActive ? ((0, jsx_runtime_1.jsx)(react_1.Box, { sx: {
227
231
  display: "none",
228
232
  [launcherParts_1.WIDE_ROW]: { display: "inline-flex" },
229
233
  "@media (hover: none)": { display: "none" },
230
- }, children: (0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "enter", size: "xs" }) })) : null, (0, jsx_runtime_1.jsx)(launcherParts_1.CountBadge, { value: item.badge }), hasStar ? ((0, jsx_runtime_1.jsx)(PinToggle_1.default, { isPinned: isPinned, label: isPinned ? labels.unpin(item.label) : labels.pin(item.label), title: "", onToggle: onPin, tabIndex: -1 })) : null, item.href ? ((0, jsx_runtime_1.jsx)(NewTabLink_1.default, { href: item.href, label: labels.openInNewTab(isScreen ? `${item.label} — ${item.context}` : item.label), tip: labels.newTabTip, linkAs: link.linkAs, tabIndex: -1 })) : null] }) }), hasStar ? ((0, jsx_runtime_1.jsx)(launcherParts_1.RowTip, { text: isPinned ? labels.unpinTip : labels.pinTip })) : null] }) }));
231
- }
234
+ }, children: (0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "enter", size: "xs" }) })) : null, (0, jsx_runtime_1.jsx)(launcherParts_1.CountBadge, { value: item.badge }), hasStar ? ((0, jsx_runtime_1.jsx)(PinToggle_1.default, { isPinned: isPinned, label: isPinned ? labels.unpin(item.label) : labels.pin(item.label), title: "", onToggle: () => item.screenId && onPin(item.screenId), tabIndex: -1 })) : null, item.href ? ((0, jsx_runtime_1.jsx)(NewTabLink_1.default, { href: item.href, label: labels.openInNewTab(isScreen ? `${item.label} — ${item.context}` : item.label), tip: labels.newTabTip, linkAs: link.linkAs, tabIndex: -1 })) : null] }) }), hasStar ? ((0, jsx_runtime_1.jsx)(launcherParts_1.RowTip, { text: isPinned ? labels.unpinTip : labels.pinTip })) : null] }) }));
235
+ });
232
236
  /** Left-drawer navigation launcher: browse every module, pins, Frequent, Recent, search and (compact) the suite's apps. */
233
237
  function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, frequentIds, recentIds, onTogglePin, onNavigate, linkAs = "a", actions, extraResults, query: controlledQuery, onQueryChange, isSearching = false, isLoading = false, keyScreenLimit = 3, frequentLimit = 4, suggestions, searchHint, modKeyLabel, headerActions, maxWidth = "1080px", labels: labelOverrides, apps, currentAppId, onAppSelect, appsVisibility = "apps-on-compact", searchMode = "classic", synonyms, scopes, activeScope, onScopeChange, quickActions, answers, groupLimit, "data-testid": testId, }) {
234
238
  var _a, _b, _c;
@@ -240,6 +244,7 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
240
244
  const isDesktop = (0, useMatchMedia_1.useMatchMedia)(MD_QUERY, true);
241
245
  const isLg = (0, useMatchMedia_1.useMatchMedia)(LG_QUERY, true);
242
246
  const isWide = (0, useMatchMedia_1.useMatchMedia)(XL_QUERY, false);
247
+ const isReducedMotion = (0, motion_1.usePrefersReducedMotion)();
243
248
  const columns = isWide ? 3 : isDesktop ? 2 : 1;
244
249
  const [innerQuery, setInnerQuery] = (0, react_2.useState)("");
245
250
  const [activeIndex, setActiveIndex] = (0, react_2.useState)(0);
@@ -247,6 +252,7 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
247
252
  const [innerScope, setInnerScope] = (0, react_2.useState)(spotlight_1.SCOPE_ALL);
248
253
  const [expanded, setExpanded] = (0, react_2.useState)(NO_GROUPS);
249
254
  const [announcement, setAnnouncement] = (0, react_2.useState)({ text: "", n: 0 });
255
+ const { copiedId, flash, clear: clearFlash } = (0, useCopiedFlash_1.useCopiedFlash)();
250
256
  const navigating = (0, react_2.useRef)(false);
251
257
  const labels = (0, react_2.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
252
258
  const isControlled = controlledQuery !== undefined;
@@ -284,11 +290,12 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
284
290
  setTab("menu");
285
291
  setExpanded(NO_GROUPS);
286
292
  setAnnouncement({ text: "", n: 0 });
293
+ clearFlash();
287
294
  if (latest.current.query !== "")
288
295
  latest.current.setQuery("");
289
296
  if (latest.current.scope !== spotlight_1.SCOPE_ALL)
290
297
  latest.current.setScope(spotlight_1.SCOPE_ALL, true);
291
- }, [isOpen]);
298
+ }, [isOpen, clearFlash]);
292
299
  (0, react_2.useEffect)(() => {
293
300
  navigating.current = false;
294
301
  setActiveIndex(0);
@@ -412,13 +419,15 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
412
419
  const isTabbed = !isLg && !isListView && !isLoading && tabs.length > 1;
413
420
  const activeTab = tabs.some((item) => item.id === tab) ? tab : "menu";
414
421
  const countText = isSearchView && layout.total > 0 ? labels.resultsCount(layout.total) : "";
422
+ const closeRef = (0, react_2.useRef)(onClose);
423
+ closeRef.current = onClose;
415
424
  const link = (0, react_2.useMemo)(() => ({
416
425
  linkAs,
417
426
  onPlainClick: (event) => {
418
427
  if ((0, launcherParts_1.isPlainClick)(event))
419
- onClose();
428
+ closeRef.current();
420
429
  },
421
- }), [linkAs, onClose]);
430
+ }), [linkAs]);
422
431
  const open = (0, react_2.useCallback)((item, newTab) => {
423
432
  if (item.run) {
424
433
  onClose();
@@ -431,16 +440,21 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
431
440
  onClose();
432
441
  onNavigate(item.href, { newTab });
433
442
  }, [onClose, onNavigate]);
434
- const copyValue = (0, react_2.useCallback)(async (value, node) => {
443
+ const rowHandlers = (0, react_2.useRef)({ open, togglePin: onTogglePin });
444
+ rowHandlers.current = { open, togglePin: onTogglePin };
445
+ const openRow = (0, react_2.useCallback)((item) => rowHandlers.current.open(item, false), []);
446
+ const pinRow = (0, react_2.useCallback)((screenId) => { var _a, _b; return (_b = (_a = rowHandlers.current).togglePin) === null || _b === void 0 ? void 0 : _b.call(_a, screenId); }, []);
447
+ const copyValue = (0, react_2.useCallback)(async (id, value, node) => {
435
448
  try {
436
449
  await navigator.clipboard.writeText(value);
437
450
  announce(labels.copied);
451
+ flash(id);
438
452
  }
439
453
  catch {
440
454
  selectNode(node);
441
455
  announce(labels.copySelected);
442
456
  }
443
- }, [announce, labels]);
457
+ }, [announce, flash, labels]);
444
458
  const onCopied = (0, react_2.useCallback)(() => announce(labels.copied), [announce, labels]);
445
459
  const onCopyBlocked = (0, react_2.useCallback)((node) => {
446
460
  selectNode(node);
@@ -456,9 +470,9 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
456
470
  return;
457
471
  }
458
472
  const { item } = entry;
459
- if (entry.type === "answer" && !item.run && !item.href) {
473
+ if ((0, searchLayout_1.copiesOnEnter)(entry)) {
460
474
  const node = document.getElementById(`${baseId}-opt-${index}-value`);
461
- void copyValue((_b = (_a = item.answer) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : item.label, node);
475
+ void copyValue(item.id, (_b = (_a = item.answer) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : item.label, node);
462
476
  return;
463
477
  }
464
478
  open(item, newTab);
@@ -747,9 +761,9 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
747
761
  : isScopeBrowse
748
762
  ? labels.scopeEmpty((_a = currentScope === null || currentScope === void 0 ? void 0 : currentScope.label) !== null && _a !== void 0 ? _a : "")
749
763
  : labels.noResults(trimmed);
750
- const noResults = ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", align: "center", gap: "12px", py: "48px", px: "20px", textAlign: "center", role: "status", children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { boxSize: "40px", borderRadius: "12px", bg: colors.backgroundColor.subtle, color: colors.textMuted, align: "center", justify: "center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 18, strokeWidth: 2, "aria-hidden": true }) }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: "3px", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "14px", fontWeight: 600, color: colors.text[900], children: emptyTitle }), hasHint ? ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "12.5px", color: colors.textMuted, children: (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length)
764
+ const noResults = ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", align: "center", gap: "12px", py: "48px", px: "20px", textAlign: "center", role: "status", children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { boxSize: "40px", borderRadius: "xl", bg: colors.backgroundColor.subtle, color: colors.textMuted, align: "center", justify: "center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 18, strokeWidth: 2, "aria-hidden": true }) }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: "3px", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "14px", fontWeight: 600, color: colors.text[900], children: emptyTitle }), hasHint ? ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs-plus", color: colors.textMuted, children: (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length)
751
765
  ? labels.suggestionsHint
752
- : labels.noResultsHint })) : null] }), hasHint && (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { wrap: "wrap", justify: "center", gap: "6px", children: suggestions.map((suggestion) => ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", onClick: () => pickSuggestion(suggestion), h: "28px", px: "11px", borderRadius: "full", borderWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, fontSize: "12.5px", fontWeight: 500, color: colors.text[900], transition: (0, motion_2.transitionFor)(["background-color"]), _hover: { bg: (0, rowStates_1.listRowBackgrounds)(colors).active }, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: suggestion }, suggestion))) })) : null] }));
766
+ : labels.noResultsHint })) : null] }), hasHint && (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { wrap: "wrap", justify: "center", gap: "6px", children: suggestions.map((suggestion) => ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", onClick: () => pickSuggestion(suggestion), h: "28px", px: "11px", borderRadius: "full", borderWidth: "1px", borderColor: (0, surfaceRaised_1.raisedRule)(colors), bg: colors.surfaceRaised, fontSize: "xs-plus", fontWeight: 500, color: colors.text[900], transition: (0, motion_2.transitionFor)(["background-color"]), _hover: { bg: (0, rowStates_1.listRowBackgrounds)(colors).active }, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: suggestion }, suggestion))) })) : null] }));
753
767
  const factsId = (index) => `${optionId(index)}-facts`;
754
768
  const describedBy = (item, index) => { var _a; return ((_a = item.facts) === null || _a === void 0 ? void 0 : _a.length) ? factsId(index) : undefined; };
755
769
  const cardProps = (item, index) => ({
@@ -764,7 +778,7 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
764
778
  });
765
779
  const renderBlock = (block) => {
766
780
  if (block.type === "answers") {
767
- return ((0, jsx_runtime_1.jsx)(react_1.Flex, { role: "group", "aria-label": labels.answers, direction: "column", gap: "6px", children: block.items.map((item, i) => ((0, jsx_runtime_1.jsx)(spotlightParts_1.AnswerCard, { ...cardProps(item, block.start + i) }, item.id))) }, "answers"));
781
+ return ((0, jsx_runtime_1.jsx)(react_1.Flex, { role: "group", "aria-label": labels.answers, direction: "column", gap: "6px", children: block.items.map((item, i) => ((0, jsx_runtime_1.jsx)(spotlightParts_1.AnswerCard, { ...cardProps(item, block.start + i), isCopied: copiedId === item.id }, item.id))) }, "answers"));
768
782
  }
769
783
  if (block.type === "top") {
770
784
  return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "group", "aria-label": labels.topHit, direction: "column", gap: "6px", children: [(0, jsx_runtime_1.jsx)(launcherParts_1.SectionHeader, { label: labels.topHit, isDecorative: true }), (0, jsx_runtime_1.jsx)(spotlightParts_1.TopHitCard, { ...cardProps(block.item, block.start), query: query })] }, "top"));
@@ -773,7 +787,7 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
773
787
  const meta = group.isSection ? labels.found(group.items.length) : undefined;
774
788
  return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "group", "aria-label": meta ? `${group.label}, ${meta}` : group.label, direction: "column", gap: "3px", children: [(0, jsx_runtime_1.jsx)(launcherParts_1.SectionHeader, { label: group.label, meta: meta ? `(${meta})` : undefined, isDecorative: true }), (0, jsx_runtime_1.jsx)(ItemGrid, { columns: columns, children: block.visible.map((item, i) => {
775
789
  const index = block.start + i;
776
- return ((0, jsx_runtime_1.jsx)(SearchRow, { item: item, query: query, isActive: index === active, link: link, labels: labels, optionId: optionId(index), isPinned: item.screenId ? pinned.has(item.screenId) : false, canPin: Boolean(onTogglePin) && item.kind === "module", onPin: () => item.screenId && (onTogglePin === null || onTogglePin === void 0 ? void 0 : onTogglePin(item.screenId)), onOpen: () => open(item, false), onHover: () => setActiveIndex(index), describedBy: describedBy(item, index) }, item.id));
790
+ return ((0, jsx_runtime_1.jsx)(SearchRow, { item: item, query: query, isActive: index === active, link: link, labels: labels, optionId: optionId(index), index: index, isPinned: item.screenId ? pinned.has(item.screenId) : false, canPin: Boolean(onTogglePin) && item.kind === "module", onPin: pinRow, onOpen: openRow, onHover: setActiveIndex, describedBy: describedBy(item, index) }, item.id));
777
791
  }) }), more ? ((0, jsx_runtime_1.jsx)(spotlightParts_1.ShowMoreOption, { count: more.count, isActive: more.index === active, optionId: optionId(more.index), label: labels.showMore, onExpand: () => activate(more.index, false), onHover: () => setActiveIndex(more.index) })) : null] }, group.id));
778
792
  };
779
793
  const searchPane = hasResults ? ((0, jsx_runtime_1.jsxs)(launcherParts_1.HighlightOptionsProvider, { value: highlightOptions, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { role: "listbox", id: listboxId, "aria-label": labels.title, "aria-busy": isSearching || undefined, direction: "column", gap: "14px", children: layout.blocks.map(renderBlock) }), entries.map((entry, index) => {
@@ -785,8 +799,18 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
785
799
  entries.some((entry) => { var _a; return entry.type !== "more" && ((_a = entry.item.facts) === null || _a === void 0 ? void 0 : _a.length); });
786
800
  const activeEntry = entries[active];
787
801
  const activeItem = activeEntry && activeEntry.type !== "more" ? activeEntry.item : undefined;
788
- const dock = !isLg && isListView && !isLoading && ((_b = activeItem === null || activeItem === void 0 ? void 0 : activeItem.facts) === null || _b === void 0 ? void 0 : _b.length) ? ((0, jsx_runtime_1.jsx)(spotlightParts_1.PreviewPane, { item: activeItem, placement: "dock", labels: labels, onCopied: onCopied, onCopyBlocked: onCopyBlocked })) : null;
789
- const stacked = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Pane, { scrolls: isLg, children: isListView ? searchPane : browsePane }), showPreview ? ((0, jsx_runtime_1.jsx)(spotlightParts_1.PreviewPane, { item: activeItem, placement: "side", width: RAIL_WIDTH, labels: labels, onCopied: onCopied, onCopyBlocked: onCopyBlocked })) : (rail)] }));
802
+ const enterCopies = isListView && (0, searchLayout_1.copiesOnEnter)(activeEntry);
803
+ const enterExpands = isListView && (activeEntry === null || activeEntry === void 0 ? void 0 : activeEntry.type) === "more";
804
+ const enterLabel = enterCopies
805
+ ? labels.hintCopy
806
+ : enterExpands
807
+ ? labels.hintExpand
808
+ : labels.hintOpen;
809
+ const enterReserve = [labels.hintOpen, labels.hintCopy, labels.hintExpand].join("\n");
810
+ const canOpenInTab = !isListView || Boolean(activeItem === null || activeItem === void 0 ? void 0 : activeItem.href);
811
+ const isActiveCopied = enterCopies && activeItem !== undefined && copiedId === activeItem.id;
812
+ const dock = !isLg && isListView && !isLoading && ((_b = activeItem === null || activeItem === void 0 ? void 0 : activeItem.facts) === null || _b === void 0 ? void 0 : _b.length) ? ((0, jsx_runtime_1.jsx)(spotlightParts_1.PreviewPane, { item: activeItem, placement: "dock", enterCopies: enterCopies, isCopied: isActiveCopied, labels: labels, onCopied: onCopied, onCopyBlocked: onCopyBlocked })) : null;
813
+ const stacked = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Pane, { scrolls: isLg, children: isListView ? searchPane : browsePane }), showPreview ? ((0, jsx_runtime_1.jsx)(spotlightParts_1.PreviewPane, { item: activeItem, placement: "side", width: RAIL_WIDTH, enterCopies: enterCopies, isCopied: isActiveCopied, labels: labels, onCopied: onCopied, onCopyBlocked: onCopyBlocked })) : (rail)] }));
790
814
  const body = isLoading ? (0, jsx_runtime_1.jsx)(SkeletonLayout, { label: labels.loading }) : stacked;
791
815
  const titleId = `${baseId}-title`;
792
816
  const scopeBar = hasScopes ? ((0, jsx_runtime_1.jsx)(ScopeBar_1.ScopeBar, { scopes: scopeChips, value: scope, onChange: (next) => setScope(next), label: labels.scopes, countLabel: labels.scopeCount })) : null;
@@ -806,7 +830,8 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
806
830
  borderBottomRightRadius: { base: 0, lg: "16px" },
807
831
  boxShadow: colors.boxShadow.default,
808
832
  overflow: "hidden",
833
+ motionProps: (0, launcherMotion_1.launcherSlide)(isReducedMotion),
809
834
  onKeyDown: onContentKeyDown,
810
835
  ...{ "data-testid": testId },
811
- }, children: [(0, jsx_runtime_1.jsxs)(Drawer_1.DrawerHeader, { p: 0, flexShrink: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-testid": "launcher-header-row", align: "center", gap: { base: "8px", md: "12px" }, minH: { base: "60px", md: "68px" }, pl: { base: "12px", md: "18px" }, pr: { base: "8px", md: "12px" }, children: [(0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { as: "h2", id: titleId, children: labels.title }), (0, jsx_runtime_1.jsx)(SearchField, { inputRef: inputRef, value: query, onChange: setQuery, onKeyDown: onInputKeyDown, labels: labels, placeholder: (_c = currentScope === null || currentScope === void 0 ? void 0 : currentScope.placeholder) !== null && _c !== void 0 ? _c : labels.searchPlaceholder, hint: searchHint, listboxId: listboxId, activeId: isListView && hasResults ? optionId(active) : undefined, isExpanded: isListView, hasResults: hasResults, minW: inlineScopes ? FIELD_MIN_WIDTH : 0 }), inlineScopes, (0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": true, "data-testid": "launcher-count", display: { base: "none", sm: "block" }, flexShrink: 0, overflow: "hidden", w: countText ? "88px" : "0", opacity: countText ? 1 : 0, textAlign: "right", fontSize: "13px", whiteSpace: "nowrap", color: colors.textMuted, transition: (0, motion_2.transitionFor)(["width", "opacity"]), sx: { fontVariantNumeric: "tabular-nums", ...(0, motion_1.reducedMotionSx)() }, children: countText }), headerActions ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", gap: "4px", flexShrink: 0, children: headerActions })) : null, (0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": labels.close, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 18, "aria-hidden": true }), variant: "ghost", boxSize: { base: "40px", md: "44px" }, minW: { base: "40px", md: "44px" }, borderRadius: "10px", flexShrink: 0, color: colors.textMuted, onClick: onClose })] }), scopeRow ? ((0, jsx_runtime_1.jsx)(react_1.Box, { "data-testid": "launcher-scope-row", pl: "7px", pr: "3px", mt: "-6px", pb: "4px", children: scopeRow })) : null] }), (0, jsx_runtime_1.jsx)(Drawer_1.DrawerBody, { p: 0, display: "flex", flexDirection: "column", overflowY: "hidden", minH: 0, children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { ref: bodyRef, direction: "column", flex: 1, minH: 0, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { "data-testid": "launcher-live", "aria-live": "polite", "aria-atomic": "true", children: countText }), (0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { "data-testid": "launcher-announce", "aria-live": "polite", "aria-atomic": "true", children: (0, jsx_runtime_1.jsx)("span", { children: announcement.text }, announcement.n) }), isTabbed ? ((0, jsx_runtime_1.jsx)(LauncherTabs_1.LauncherTabs, { tabs: tabs, selected: activeTab, onSelect: setTab, idBase: baseId, label: labels.tabsLabel, onLeaveUp: () => focusField(), onLeaveDown: () => moveFocus("first") })) : null, isLg ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "row", flex: 1, minH: 0, minW: 0, children: body })) : (compactBody), dock] }) }), (0, jsx_runtime_1.jsxs)(Drawer_1.DrawerFooter, { p: 0, minH: "32px", flexShrink: 0, px: "18px", py: "6px", gap: "6px 14px", flexWrap: "wrap", bg: colors.backgroundColor.subtle, fontSize: "11.5px", color: colors.textMuted, whiteSpace: "nowrap", justifyContent: "flex-start", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: "6px 14px", align: "center", wrap: "wrap", "aria-hidden": true, sx: { "@media (hover: none)": { display: "none" } }, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", gap: "2px", children: ARROW_KEYS.map((arrow) => ((0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: arrow }, arrow))) }), labels.hintMove] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "enter", size: "xs" }), labels.hintOpen] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [modKeyLabel ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", gap: "4px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: modKeyLabel }), (0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: ENTER_KEY })] })) : ((0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "mod+enter", size: "xs" })), labels.hintNewTab] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: modKeyLabel !== null && modKeyLabel !== void 0 ? modKeyLabel : MOD_KEY }), labels.hintClickNewTab] }), onTogglePin ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: "P" }), labels.hintPin] })) : null, (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "esc", size: "xs" }), labels.hintClose] })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", ml: "auto", children: labels.footerNote })] })] }) }));
836
+ }, children: [(0, jsx_runtime_1.jsxs)(Drawer_1.DrawerHeader, { p: 0, flexShrink: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-testid": "launcher-header-row", align: "center", gap: { base: "8px", md: "12px" }, minH: { base: "60px", md: "68px" }, pl: { base: "12px", md: "18px" }, pr: { base: "8px", md: "12px" }, children: [(0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { as: "h2", id: titleId, children: labels.title }), (0, jsx_runtime_1.jsx)(SearchField, { inputRef: inputRef, value: query, onChange: setQuery, onKeyDown: onInputKeyDown, labels: labels, placeholder: (_c = currentScope === null || currentScope === void 0 ? void 0 : currentScope.placeholder) !== null && _c !== void 0 ? _c : labels.searchPlaceholder, hint: searchHint, listboxId: listboxId, activeId: isListView && hasResults ? optionId(active) : undefined, isExpanded: isListView, hasResults: hasResults, minW: inlineScopes ? FIELD_MIN_WIDTH : 0 }), inlineScopes, (0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": true, "data-testid": "launcher-count", display: { base: "none", sm: "block" }, flexShrink: 0, overflow: "hidden", w: countText ? "88px" : "0", opacity: countText ? 1 : 0, textAlign: "right", fontSize: "13px", whiteSpace: "nowrap", color: colors.textMuted, transition: (0, motion_2.transitionFor)(["width", "opacity"]), sx: { fontVariantNumeric: "tabular-nums", ...(0, motion_1.reducedMotionSx)() }, children: countText }), headerActions ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", gap: "4px", flexShrink: 0, children: headerActions })) : null, (0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": labels.close, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 18, "aria-hidden": true }), variant: "ghost", boxSize: { base: "40px", md: "44px" }, minW: { base: "40px", md: "44px" }, borderRadius: "10px", flexShrink: 0, color: colors.textMuted, onClick: onClose })] }), scopeRow ? ((0, jsx_runtime_1.jsx)(react_1.Box, { "data-testid": "launcher-scope-row", pl: "7px", pr: "3px", mt: "-6px", pb: "4px", children: scopeRow })) : null] }), (0, jsx_runtime_1.jsx)(Drawer_1.DrawerBody, { p: 0, display: "flex", flexDirection: "column", overflowY: "hidden", minH: 0, children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { ref: bodyRef, direction: "column", flex: 1, minH: 0, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { "data-testid": "launcher-live", "aria-live": "polite", "aria-atomic": "true", children: countText }), (0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { "data-testid": "launcher-announce", "aria-live": "polite", "aria-atomic": "true", children: (0, jsx_runtime_1.jsx)("span", { children: announcement.text }, announcement.n) }), isTabbed ? ((0, jsx_runtime_1.jsx)(LauncherTabs_1.LauncherTabs, { tabs: tabs, selected: activeTab, onSelect: setTab, idBase: baseId, label: labels.tabsLabel, onLeaveUp: () => focusField(), onLeaveDown: () => moveFocus("first") })) : null, isLg ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "row", flex: 1, minH: 0, minW: 0, children: body })) : (compactBody), dock] }) }), (0, jsx_runtime_1.jsxs)(Drawer_1.DrawerFooter, { p: 0, minH: "32px", flexShrink: 0, px: "18px", py: "6px", gap: "6px 14px", flexWrap: "wrap", bg: colors.backgroundColor.subtle, fontSize: "xs-minus", color: colors.textMuted, whiteSpace: "nowrap", justifyContent: "flex-start", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { display: { base: "none", md: "flex" }, gap: "6px 14px", align: "center", wrap: "wrap", "aria-hidden": true, sx: { "@media (hover: none)": { display: "none" } }, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", gap: "2px", children: ARROW_KEYS.map((arrow) => ((0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: arrow }, arrow))) }), labels.hintMove] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "enter", size: "xs" }), (0, jsx_runtime_1.jsx)(launcherParts_1.HintLabel, { text: enterLabel, reserve: enterReserve })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", opacity: canOpenInTab ? 1 : 0.45, transition: (0, motion_2.transitionFor)(["opacity"]), sx: (0, motion_1.reducedMotionSx)(), children: [modKeyLabel ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", gap: "4px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: modKeyLabel }), (0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: ENTER_KEY })] })) : ((0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "mod+enter", size: "xs" })), labels.hintNewTab] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", display: { base: "none", lg: "flex" }, children: [(0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: modKeyLabel !== null && modKeyLabel !== void 0 ? modKeyLabel : MOD_KEY }), labels.hintClickNewTab] }), onTogglePin ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: "P" }), labels.hintPin] })) : null, (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "esc", size: "xs" }), labels.hintClose] })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", ml: "auto", children: labels.footerNote })] })] }) }));
812
837
  }
@@ -106,9 +106,9 @@ export type LauncherLabels = {
106
106
  loading: string;
107
107
  /** Heading of the empty state shown when `sections` has nothing to render. */
108
108
  empty: string;
109
- /** Footer hint after the four arrow key caps. */
109
+ /** Footer hint after the arrow caps; the legend hides below md and on touch. */
110
110
  hintMove: string;
111
- /** Footer hint after the ENTER key cap. */
111
+ /** Hint after ENTER when it opens the active result: footer, answer card, preview pane. */
112
112
  hintOpen: string;
113
113
  /** Footer hint after the mod + ENTER key caps. */
114
114
  hintNewTab: string;
@@ -158,8 +158,10 @@ export type LauncherLabels = {
158
158
  matchedOn?: string;
159
159
  /** Name of the answers group. */
160
160
  answers?: string;
161
- /** Footer-style hint on an answer card that copies its value. */
161
+ /** Hint after ENTER when it copies the active answer: footer, answer card, preview pane. */
162
162
  hintCopy?: string;
163
+ /** Footer hint after ENTER while a Show more option is active. */
164
+ hintExpand?: string;
163
165
  /** Name of the scope chip group. */
164
166
  scopes?: string;
165
167
  /** Chip prepended to `scopes` when the list has no "all". */
@@ -178,7 +180,7 @@ export type LauncherLabels = {
178
180
  preview?: string;
179
181
  /** Accessible name and tooltip of a fact's Copy button. */
180
182
  copy?: (label: string) => string;
181
- /** Polite announcement after a copy. */
183
+ /** Announced after a copy; shown for 1.5 s in place of the Enter hint. */
182
184
  copied?: string;
183
185
  /** Announcement when the clipboard is blocked and the value was selected instead. */
184
186
  copySelected?: string;
@@ -9,6 +9,7 @@ const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
9
9
  const motion_1 = require("../../Theme/chakra/motion");
10
10
  const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
11
11
  const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
12
+ const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
12
13
  const motion_2 = require("../../Theme/tokens/primitives/motion");
13
14
  const useCustomTheme_1 = require("../../Theme/useCustomTheme");
14
15
  const EDGE = 36;
@@ -30,7 +31,7 @@ const fadeMask = ({ start, end }) => start || end
30
31
  function PageArrow({ side, onPage, }) {
31
32
  const { colors } = (0, useCustomTheme_1.useCustomTheme)();
32
33
  const Icon = side === "start" ? lucide_react_1.ChevronLeft : lucide_react_1.ChevronRight;
33
- return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", tabIndex: -1, "aria-hidden": true, "data-testid": `launcher-scopes-${side}`, onMouseDown: (event) => event.preventDefault(), onClick: onPage, position: "absolute", top: "50%", left: side === "start" ? 0 : undefined, right: side === "end" ? 0 : undefined, transform: "translateY(-50%)", display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: "28px", borderRadius: "full", borderWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, boxShadow: `0 1px 3px ${colors.boxShadow.default}`, color: colors.textMuted, cursor: "pointer", _hover: { color: colors.text[900] }, sx: { "@media (hover: none)": { display: "none" } }, children: (0, jsx_runtime_1.jsx)(Icon, { size: 16, "aria-hidden": true }) }));
34
+ return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", tabIndex: -1, "aria-hidden": true, "data-testid": `launcher-scopes-${side}`, onMouseDown: (event) => event.preventDefault(), onClick: onPage, position: "absolute", top: "50%", left: side === "start" ? 0 : undefined, right: side === "end" ? 0 : undefined, transform: "translateY(-50%)", display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: "28px", borderRadius: "full", borderWidth: "1px", borderColor: (0, surfaceRaised_1.raisedRule)(colors), bg: colors.surfaceRaised, boxShadow: `0 1px 3px ${colors.boxShadow.default}`, color: colors.textMuted, cursor: "pointer", _hover: { color: colors.text[900] }, sx: { "@media (hover: none)": { display: "none" } }, children: (0, jsx_runtime_1.jsx)(Icon, { size: 16, "aria-hidden": true }) }));
34
35
  }
35
36
  function ScopeBar({ scopes, value, onChange, label, countLabel, }) {
36
37
  const { colors } = (0, useCustomTheme_1.useCustomTheme)();
@@ -41,6 +42,7 @@ function ScopeBar({ scopes, value, onChange, label, countLabel, }) {
41
42
  const selected = Math.max(0, scopes.findIndex((scope) => scope.id === value));
42
43
  const layoutKey = scopes.map((s) => { var _a; return `${s.id}:${(_a = s.count) !== null && _a !== void 0 ? _a : ""}`; }).join("|");
43
44
  const edge = (0, outlineRung_1.liftToContrast)(colors.primary[500], colors.surfaceRaised, outlineRung_1.AA_NON_TEXT);
45
+ const rule = (0, surfaceRaised_1.raisedRule)(colors);
44
46
  const measure = (0, react_2.useCallback)(() => {
45
47
  const strip = stripRef.current;
46
48
  if (!strip)
@@ -119,7 +121,7 @@ function ScopeBar({ scopes, value, onChange, label, countLabel, }) {
119
121
  chipRefs.current[index] = node;
120
122
  }, role: "radio", "aria-checked": isSelected, "aria-label": hasCount
121
123
  ? countLabel(scope.label, (_a = scope.count) !== null && _a !== void 0 ? _a : 0)
122
- : undefined, tabIndex: isSelected ? 0 : -1, onClick: () => onChange(scope.id), display: "inline-flex", alignItems: "center", gap: "6px", flexShrink: 0, h: "32px", pl: "12px", pr: hasCount ? "6px" : "12px", borderRadius: "full", borderWidth: "1px", borderColor: isSelected ? edge : colors.boxborder[200], bg: isSelected ? colors.primary[50] : colors.surfaceRaised, color: isSelected ? colors.accentText : colors.textMuted, fontSize: "xs-plus", fontWeight: isSelected ? 600 : 500, whiteSpace: "nowrap", cursor: "pointer", transition: (0, motion_2.transitionFor)([
124
+ : undefined, tabIndex: isSelected ? 0 : -1, onClick: () => onChange(scope.id), display: "inline-flex", alignItems: "center", gap: "6px", flexShrink: 0, h: "32px", pl: "12px", pr: hasCount ? "6px" : "12px", borderRadius: "full", borderWidth: "1px", borderColor: isSelected ? edge : rule, bg: isSelected ? colors.primary[50] : colors.surfaceRaised, color: isSelected ? colors.accentText : colors.textMuted, fontSize: "xs-plus", fontWeight: isSelected ? 600 : 500, whiteSpace: "nowrap", cursor: "pointer", transition: (0, motion_2.transitionFor)([
123
125
  "background-color",
124
126
  "border-color",
125
127
  "color",
@@ -22,7 +22,8 @@ const SYNONYM_FACTOR = 0.92;
22
22
  const STEM_PENALTY = 1;
23
23
  const MAX_ALTERNATIVES = 12;
24
24
  const UNBOUNDED_SLACK = 32;
25
- const TAMIL_FINAL_MA = "ம்";
25
+ // NOTE: code points, not a literal; see ANUSVARA in fold.ts.
26
+ const TAMIL_FINAL_MA = String.fromCodePoint(0x0bae, 0x0bcd);
26
27
  const WORD_RE = /[\p{L}\p{N}\p{M}]+/gu;
27
28
  const charBit = (code) => {
28
29
  if (code >= 97 && code <= 122)
@@ -6,7 +6,8 @@ const OPTIONAL_MARKS =
6
6
  // eslint-disable-next-line no-misleading-character-class -- each mark is removed on its own
7
7
  /[\u0300-\u036f\u0591-\u05c7\u0610-\u061a\u064b-\u065f\u0670\u06d6-\u06ed\u093c\u1ab0-\u1aff\u1dc0-\u1dff\u200c\u200d\u20d0-\u20ff\ufe20-\ufe2f]/g;
8
8
  const CHANDRABINDU = /\u0901/g;
9
- const ANUSVARA = "\u0902";
9
+ // NOTE: built from code points; minified Indic literals trip consumers' locale-data budget gates.
10
+ const ANUSVARA = String.fromCodePoint(0x0902);
10
11
  const MARK = /\p{M}/u;
11
12
  const SEPARATOR = /[^\p{L}\p{N}\p{M}]+/u;
12
13
  const SPECIAL = {
@@ -0,0 +1,19 @@
1
+ export declare const launcherSlide: (isReducedMotion: boolean) => {
2
+ variants: {
3
+ enter: {
4
+ x: number;
5
+ y: number;
6
+ transition: {
7
+ duration: number;
8
+ };
9
+ };
10
+ exit: {
11
+ x: string;
12
+ y: number;
13
+ transition: {
14
+ duration: number;
15
+ ease: (0 | 1 | 0.2 | 0.4)[];
16
+ };
17
+ };
18
+ };
19
+ };
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.launcherSlide = void 0;
4
+ const react_1 = require("@chakra-ui/react");
5
+ const motion_1 = require("../../Theme/tokens/primitives/motion");
6
+ const ENTER = (0, motion_1.motionTransition)("enter", "out");
7
+ const INSTANT = { duration: 0 };
8
+ const EXIT = { duration: 0.15, ease: [...react_1.EASINGS.easeInOut] };
9
+ const launcherSlide = (isReducedMotion) => ({
10
+ variants: {
11
+ enter: { x: 0, y: 0, transition: isReducedMotion ? INSTANT : ENTER },
12
+ exit: { x: "-100%", y: 0, transition: EXIT },
13
+ },
14
+ });
15
+ exports.launcherSlide = launcherSlide;