@cube-dev/ui-kit 0.0.0-canary-09a690c → 0.0.0-canary-30d7fcd
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.
- package/dist/_internal/hooks/use-debounced-value.js +1 -1
- package/dist/_internal/hooks/use-deprecation-warning.js +1 -1
- package/dist/_internal/hooks/use-event.js +1 -1
- package/dist/_internal/hooks/use-is-first-render.js +1 -1
- package/dist/_internal/hooks/use-sync-ref.js +1 -1
- package/dist/_internal/hooks/use-timer/timer.js +1 -1
- package/dist/_internal/hooks/use-timer/use-timer.js +1 -1
- package/dist/_internal/hooks/use-warn.js +1 -1
- package/dist/components/Block.js +1 -1
- package/dist/components/CollectionItem.d.ts +25 -12
- package/dist/components/CollectionItem.js +59 -4
- package/dist/components/CollectionItem.js.map +1 -1
- package/dist/components/GlobalStyles.js +1 -1
- package/dist/components/GridProvider.js +1 -1
- package/dist/components/HiddenInput.js +1 -1
- package/dist/components/Root.js +2 -2
- package/dist/components/actions/Action/Action.js +1 -1
- package/dist/components/actions/Banner/Banner.d.ts +1 -1
- package/dist/components/actions/Banner/Banner.js +1 -1
- package/dist/components/actions/Button/Button.js +1 -1
- package/dist/components/actions/ButtonGroup/ButtonGroup.js +1 -1
- package/dist/components/actions/ButtonSplit/ButtonSplit.js +1 -1
- package/dist/components/actions/ButtonSplit/context.js +1 -1
- package/dist/components/actions/CommandMenu/CommandMenu.d.ts +7 -7
- package/dist/components/actions/CommandMenu/CommandMenu.js +212 -239
- package/dist/components/actions/CommandMenu/CommandMenu.js.map +1 -1
- package/dist/components/actions/CommandMenu/styled.js +1 -1
- package/dist/components/actions/ItemAction/ItemAction.js +26 -22
- package/dist/components/actions/ItemAction/ItemAction.js.map +1 -1
- package/dist/components/actions/ItemActionContext.d.ts +3 -0
- package/dist/components/actions/ItemActionContext.js +15 -13
- package/dist/components/actions/ItemActionContext.js.map +1 -1
- package/dist/components/actions/ItemActionsWrapper.js +1 -1
- package/dist/components/actions/ItemButton/ItemButton.d.ts +2 -2
- package/dist/components/actions/ItemButton/ItemButton.js +1 -1
- package/dist/components/actions/Link/Link.js +1 -1
- package/dist/components/actions/Menu/Menu.d.ts +9 -9
- package/dist/components/actions/Menu/Menu.js +87 -64
- package/dist/components/actions/Menu/Menu.js.map +1 -1
- package/dist/components/actions/Menu/MenuCollectionItem.d.ts +18 -0
- package/dist/components/actions/Menu/MenuCollectionItem.js +36 -0
- package/dist/components/actions/Menu/MenuCollectionItem.js.map +1 -0
- package/dist/components/actions/Menu/MenuItem.d.ts +1 -0
- package/dist/components/actions/Menu/MenuItem.js +401 -115
- package/dist/components/actions/Menu/MenuItem.js.map +1 -1
- package/dist/components/actions/Menu/MenuSection.d.ts +2 -0
- package/dist/components/actions/Menu/MenuSection.js +31 -33
- package/dist/components/actions/Menu/MenuSection.js.map +1 -1
- package/dist/components/actions/Menu/MenuTrigger.js +1 -1
- package/dist/components/actions/Menu/SubMenuTrigger.d.ts +1 -1
- package/dist/components/actions/Menu/SubMenuTrigger.js +2 -2
- package/dist/components/actions/Menu/SubMenuTrigger.js.map +1 -1
- package/dist/components/actions/Menu/SubmenuTriggerContext.js +1 -1
- package/dist/components/actions/Menu/context.js +1 -1
- package/dist/components/actions/Menu/index.d.ts +1 -0
- package/dist/components/actions/Menu/styled.js +1 -1
- package/dist/components/actions/actions-run.js +1 -1
- package/dist/components/actions/index.d.ts +3 -2
- package/dist/components/actions/index.js +1 -1
- package/dist/components/actions/use-action.js +60 -36
- package/dist/components/actions/use-action.js.map +1 -1
- package/dist/components/actions/use-anchored-menu.js +1 -1
- package/dist/components/actions/use-context-menu.js +1 -1
- package/dist/components/content/ActiveZone/ActiveZone.js +1 -1
- package/dist/components/content/Alert/Alert.js +1 -1
- package/dist/components/content/Alert/use-alert.js +1 -1
- package/dist/components/content/Avatar/Avatar.js +1 -1
- package/dist/components/content/Badge/Badge.js +1 -1
- package/dist/components/content/Card/Card.js +1 -1
- package/dist/components/content/Content.js +1 -1
- package/dist/components/content/CopyPasteBlock/CopyPasteBlock.js +1 -1
- package/dist/components/content/CopySnippet/CopySnippet.d.ts +29 -29
- package/dist/components/content/CopySnippet/CopySnippet.js +1 -1
- package/dist/components/content/Disclosure/Disclosure.js +1 -1
- package/dist/components/content/Divider.js +1 -1
- package/dist/components/content/Footer.js +1 -1
- package/dist/components/content/Header.js +1 -1
- package/dist/components/content/HotKeys/HotKeys.js +1 -1
- package/dist/components/content/InfoBadge/InfoBadge.js +1 -1
- package/dist/components/content/InlineInput/InlineInput.js +1 -1
- package/dist/components/content/Item/Item.d.ts +7 -7
- package/dist/components/content/Item/Item.js +205 -67
- package/dist/components/content/Item/Item.js.map +1 -1
- package/dist/components/content/Item/ItemWithNativeLinks.js +314 -0
- package/dist/components/content/Item/ItemWithNativeLinks.js.map +1 -0
- package/dist/components/content/ItemBadge/ItemBadge.js +1 -1
- package/dist/components/content/ItemCard/ItemCard.d.ts +1 -1
- package/dist/components/content/ItemCard/ItemCard.js +1 -1
- package/dist/components/content/Layout/GridLayout.js +1 -1
- package/dist/components/content/Layout/Layout.js +1 -1
- package/dist/components/content/Layout/LayoutBlock.js +1 -1
- package/dist/components/content/Layout/LayoutCenter.js +1 -1
- package/dist/components/content/Layout/LayoutContainer.js +1 -1
- package/dist/components/content/Layout/LayoutContent.js +1 -1
- package/dist/components/content/Layout/LayoutContext.js +1 -1
- package/dist/components/content/Layout/LayoutFlex.js +1 -1
- package/dist/components/content/Layout/LayoutFooter.js +1 -1
- package/dist/components/content/Layout/LayoutGrid.js +1 -1
- package/dist/components/content/Layout/LayoutHeader.js +1 -1
- package/dist/components/content/Layout/LayoutPane.js +1 -1
- package/dist/components/content/Layout/LayoutPanel.js +1 -1
- package/dist/components/content/Layout/LayoutPanelHeader.js +1 -1
- package/dist/components/content/Layout/LayoutPanelTransition.js +1 -1
- package/dist/components/content/Layout/LayoutToolbar.js +1 -1
- package/dist/components/content/Layout/hooks/useTinyScrollbar.js +1 -1
- package/dist/components/content/Layout/index.js +1 -1
- package/dist/components/content/Layout/utils.js +1 -1
- package/dist/components/content/Paragraph.js +1 -1
- package/dist/components/content/Placeholder/Placeholder.js +1 -1
- package/dist/components/content/PrismCode/PrismCode.js +1 -1
- package/dist/components/content/PrismCode/prismSetup.js +1 -1
- package/dist/components/content/PrismDiffCode/PrismDiffCode.js +1 -1
- package/dist/components/content/Result/Result.js +1 -1
- package/dist/components/content/Skeleton/Skeleton.js +1 -1
- package/dist/components/content/Tag/Tag.js +1 -1
- package/dist/components/content/Text.d.ts +28 -28
- package/dist/components/content/Text.js +1 -1
- package/dist/components/content/TextItem/TextItem.js +1 -1
- package/dist/components/content/Title.js +1 -1
- package/dist/components/content/Tree/Tree.js +1 -1
- package/dist/components/content/Tree/TreeNode.js +1 -1
- package/dist/components/content/Tree/styled.js +1 -1
- package/dist/components/content/Tree/tree-index.js +1 -1
- package/dist/components/content/Tree/types.d.ts +2 -2
- package/dist/components/content/Tree/use-checkbox-tree.js +1 -1
- package/dist/components/content/Tree/use-load-data.js +1 -1
- package/dist/components/content/highlightText.js +1 -1
- package/dist/components/content/use-auto-tooltip.js +1 -1
- package/dist/components/data/DataTable/DataTable.js +1 -1
- package/dist/components/data/ItemTable/ItemTable.js +1 -1
- package/dist/components/data/ItemTable/ItemTableBulkBar.js +1 -1
- package/dist/components/data/ItemTable/ItemTableDragPreview.js +1 -1
- package/dist/components/data/ItemTable/ItemTableFooter.js +1 -1
- package/dist/components/data/ItemTable/ItemTableToolbar.js +1 -1
- package/dist/components/data/ItemTable/use-item-table-column-widths.js +1 -1
- package/dist/components/data/ItemTable/use-item-table-drag-drop.js +1 -1
- package/dist/components/data/ItemTable/use-item-table-pagination.js +1 -1
- package/dist/components/data/ItemTable/use-item-table-selection.js +1 -1
- package/dist/components/data/ItemTable/use-item-table-sort.js +1 -1
- package/dist/components/data/ItemTable/use-item-table-tree-model.js +1 -1
- package/dist/components/data/TableBase/ColumnResizer.js +1 -1
- package/dist/components/data/TableBase/RowCollection.js +1 -1
- package/dist/components/data/TableBase/TableHeaderCell.js +1 -1
- package/dist/components/data/TableBase/TableRow.js +1 -1
- package/dist/components/data/TableBase/TableView.js +3 -3
- package/dist/components/data/TableBase/TableView.js.map +1 -1
- package/dist/components/data/TableBase/TreeGridTable.js +1 -1
- package/dist/components/data/TableBase/column-header.js +1 -1
- package/dist/components/data/TableBase/column-menu.js +1 -1
- package/dist/components/data/TableBase/column-styles.js +1 -1
- package/dist/components/data/TableBase/column-tint.js +1 -1
- package/dist/components/data/TableBase/row-menu.js +1 -1
- package/dist/components/data/TableBase/styled.d.ts +1 -1
- package/dist/components/data/TableBase/styled.js +1 -1
- package/dist/components/data/TableBase/table-tree.js +1 -1
- package/dist/components/data/TableBase/types.js +1 -1
- package/dist/components/data/TableBase/use-cell-selection.js +0 -0
- package/dist/components/data/TableBase/use-column-menu.js +1 -1
- package/dist/components/data/TableBase/use-column-order.js +1 -1
- package/dist/components/data/TableBase/use-column-window.js +57 -119
- package/dist/components/data/TableBase/use-column-window.js.map +1 -1
- package/dist/components/data/TableBase/use-container-width.js +1 -1
- package/dist/components/data/TableBase/use-row-move-animation.js +1 -1
- package/dist/components/data/TableBase/use-scrollability.js +1 -1
- package/dist/components/data/TableBase/use-table-columns.js +1 -1
- package/dist/components/data/TableBase/use-table-search.js +1 -1
- package/dist/components/data/TableBase/use-table-selection.js +1 -1
- package/dist/components/data/TableBase/use-table-sort.js +1 -1
- package/dist/components/data/TableBase/use-table-sorts.js +1 -1
- package/dist/components/data/TableBase/use-table-storage.js +1 -1
- package/dist/components/data/TableBase/use-table-tooltip-refresh.js +17 -19
- package/dist/components/data/TableBase/use-table-tooltip-refresh.js.map +1 -1
- package/dist/components/data/TableBase/use-table-tree-state.js +1 -1
- package/dist/components/fields/Checkbox/Checkbox.js +1 -1
- package/dist/components/fields/Checkbox/CheckboxGroup.js +1 -1
- package/dist/components/fields/Checkbox/context.js +1 -1
- package/dist/components/fields/ColorInput/ColorInput.js +1 -1
- package/dist/components/fields/ColorPicker/ColorPicker.js +1 -1
- package/dist/components/fields/ColorSwatch/ColorSwatch.js +1 -1
- package/dist/components/fields/ColorSwatchGroup/ColorSwatchGroup.js +1 -1
- package/dist/components/fields/ComboBox/ComboBox.js +1 -1
- package/dist/components/fields/CommandTextArea/CommandTextArea.js +1 -1
- package/dist/components/fields/CommandTextArea/caretPosition.js +1 -1
- package/dist/components/fields/CommandTextArea/useCaretAnchor.js +1 -1
- package/dist/components/fields/DatePicker/DateInput.js +1 -1
- package/dist/components/fields/DatePicker/DateInputBase.js +1 -1
- package/dist/components/fields/DatePicker/DatePicker.js +1 -1
- package/dist/components/fields/DatePicker/DatePickerButton.js +1 -1
- package/dist/components/fields/DatePicker/DatePickerElement.js +1 -1
- package/dist/components/fields/DatePicker/DatePickerInput.js +1 -1
- package/dist/components/fields/DatePicker/DatePickerSegment.js +1 -1
- package/dist/components/fields/DatePicker/DateRangePicker.js +1 -1
- package/dist/components/fields/DatePicker/DateRangeSeparatedPicker.js +1 -1
- package/dist/components/fields/DatePicker/MonthPicker.js +1 -1
- package/dist/components/fields/DatePicker/PeriodPicker.js +1 -1
- package/dist/components/fields/DatePicker/QuarterPicker.js +1 -1
- package/dist/components/fields/DatePicker/TimeInput.js +1 -1
- package/dist/components/fields/DatePicker/WeekPicker.js +1 -1
- package/dist/components/fields/DatePicker/YearPicker.js +1 -1
- package/dist/components/fields/DatePicker/parseDate.js +1 -1
- package/dist/components/fields/DatePicker/period.js +1 -1
- package/dist/components/fields/DatePicker/props.js +1 -1
- package/dist/components/fields/DatePicker/utils.js +1 -1
- package/dist/components/fields/FileInput/FileInput.js +1 -1
- package/dist/components/fields/FilterListBox/FilterListBox.js +1 -1
- package/dist/components/fields/FilterPicker/FilterPicker.d.ts +2 -2
- package/dist/components/fields/FilterPicker/FilterPicker.js +1 -1
- package/dist/components/fields/Input/Input.js +1 -1
- package/dist/components/fields/ListBox/DraggableListBox.js +1 -1
- package/dist/components/fields/ListBox/ListBox.js +5 -5
- package/dist/components/fields/ListBox/ListBox.js.map +1 -1
- package/dist/components/fields/ListBox/optionId.js +1 -1
- package/dist/components/fields/ListBoxPopover/ListBoxPopover.js +1 -1
- package/dist/components/fields/ListBoxPopover/listNavigation.js +1 -1
- package/dist/components/fields/ListBoxPopover/useCompositeFocus.js +1 -1
- package/dist/components/fields/NumberInput/NumberInput.js +1 -1
- package/dist/components/fields/NumberInput/StepButton.js +1 -1
- package/dist/components/fields/PasswordInput/PasswordInput.js +1 -1
- package/dist/components/fields/Picker/Picker.d.ts +2 -2
- package/dist/components/fields/Picker/Picker.js +1 -1
- package/dist/components/fields/RadioGroup/Radio.d.ts +32 -32
- package/dist/components/fields/RadioGroup/Radio.js +1 -1
- package/dist/components/fields/RadioGroup/RadioGroup.js +1 -1
- package/dist/components/fields/RadioGroup/context.js +1 -1
- package/dist/components/fields/SearchComboBox/SearchComboBox.js +1 -1
- package/dist/components/fields/SearchInput/SearchInput.js +1 -1
- package/dist/components/fields/Select/Select.d.ts +4 -4
- package/dist/components/fields/Select/Select.js +6 -6
- package/dist/components/fields/Select/Select.js.map +1 -1
- package/dist/components/fields/Slider/Gradation.js +1 -1
- package/dist/components/fields/Slider/HueSlider.js +1 -1
- package/dist/components/fields/Slider/RangeSlider.js +1 -1
- package/dist/components/fields/Slider/Slider.js +1 -1
- package/dist/components/fields/Slider/SliderBase.js +1 -1
- package/dist/components/fields/Slider/SliderThumb.js +1 -1
- package/dist/components/fields/Slider/SliderTrack.js +1 -1
- package/dist/components/fields/Slider/elements.js +1 -1
- package/dist/components/fields/Slider/index.js +1 -1
- package/dist/components/fields/Switch/Switch.js +1 -1
- package/dist/components/fields/TagInput/TagInput.js +1 -1
- package/dist/components/fields/TagInput/TagList.js +1 -1
- package/dist/components/fields/TagInput/useActiveOption.js +1 -1
- package/dist/components/fields/TagInput/useTagError.js +1 -1
- package/dist/components/fields/TextArea/TextArea.js +1 -1
- package/dist/components/fields/TextInput/TextInput.js +1 -1
- package/dist/components/fields/TextInput/TextInputBase.js +1 -1
- package/dist/components/fields/TextInput/useAutoSizeTextArea.js +1 -1
- package/dist/components/fields/TextInputMapper/TextInputMapper.js +1 -1
- package/dist/components/fields/TriggerActions.js +1 -1
- package/dist/components/fields/color/ColorPanel.js +1 -1
- package/dist/components/fields/color/channels.js +1 -1
- package/dist/components/fields/color/color.js +1 -1
- package/dist/components/fields/color/context.js +1 -1
- package/dist/components/form/FieldWrapper/FieldWrapper.js +1 -1
- package/dist/components/form/Form/Field.js +1 -1
- package/dist/components/form/Form/Form.js +1 -1
- package/dist/components/form/Form/ModernFormRoot.js +1 -1
- package/dist/components/form/Form/ResetButton/ResetButton.js +1 -1
- package/dist/components/form/Form/SubmitButton/SubmitButton.js +1 -1
- package/dist/components/form/Form/SubmitError.js +1 -1
- package/dist/components/form/Form/backend.js +1 -1
- package/dist/components/form/Form/index.js +1 -1
- package/dist/components/form/Form/modern/actions.js +1 -1
- package/dist/components/form/Form/modern/context.js +1 -1
- package/dist/components/form/Form/modern/controller.js +1 -1
- package/dist/components/form/Form/modern/field-binding.js +1 -1
- package/dist/components/form/Form/modern/field.js +1 -1
- package/dist/components/form/Form/modern/react.js +1 -1
- package/dist/components/form/Form/modern/store.js +1 -1
- package/dist/components/form/Form/modern/validation.js +1 -1
- package/dist/components/form/Form/modern/values.js +1 -1
- package/dist/components/form/Form/reset-unbound-controls.js +1 -1
- package/dist/components/form/Form/use-field/use-field-binding.js +1 -1
- package/dist/components/form/Form/use-field/use-field-props.js +1 -1
- package/dist/components/form/Form/use-field/use-field.js +1 -1
- package/dist/components/form/Form/use-form.js +1 -1
- package/dist/components/form/Form/validation.js +1 -1
- package/dist/components/form/Label.js +1 -1
- package/dist/components/form/legacy-tooltip.js +1 -1
- package/dist/components/form/validation/ValidationIndicator.js +1 -1
- package/dist/components/form/validation/resolve-validation-props.js +1 -1
- package/dist/components/form/validation/use-validation-props.js +1 -1
- package/dist/components/form/wrapper.js +1 -1
- package/dist/components/helpers/DisplayTransition/DisplayTransition.js +1 -1
- package/dist/components/helpers/IconSwitch/IconSwitch.js +1 -1
- package/dist/components/layout/Flex.js +1 -1
- package/dist/components/layout/Flow.js +1 -1
- package/dist/components/layout/Grid.js +1 -1
- package/dist/components/layout/Panel.js +1 -1
- package/dist/components/layout/Prefix.js +1 -1
- package/dist/components/layout/ResizablePanel.js +1 -1
- package/dist/components/layout/Space.js +1 -1
- package/dist/components/layout/Suffix.js +1 -1
- package/dist/components/navigation/Pagination/Pagination.js +1 -1
- package/dist/components/navigation/Pagination/use-pagination.js +1 -1
- package/dist/components/navigation/Tabs/BoardDragActiveProvider.js +1 -1
- package/dist/components/navigation/Tabs/DraggableTabList.js +1 -1
- package/dist/components/navigation/Tabs/TabButton.js +1 -1
- package/dist/components/navigation/Tabs/TabDropIndicator.js +1 -1
- package/dist/components/navigation/Tabs/TabPanel.js +1 -1
- package/dist/components/navigation/Tabs/TabPicker.js +1 -1
- package/dist/components/navigation/Tabs/Tabs.js +1 -1
- package/dist/components/navigation/Tabs/TabsAction.js +1 -1
- package/dist/components/navigation/Tabs/TabsContext.js +1 -1
- package/dist/components/navigation/Tabs/popover-placement.js +1 -1
- package/dist/components/navigation/Tabs/styled.js +1 -1
- package/dist/components/navigation/Tabs/types.d.ts +3 -3
- package/dist/components/navigation/Tabs/types.js +1 -1
- package/dist/components/navigation/Tabs/use-tab-editing.js +1 -1
- package/dist/components/navigation/Tabs/use-tab-indicator.js +1 -1
- package/dist/components/organisms/StatsCard/StatsCard.js +1 -1
- package/dist/components/other/Calendar/Calendar.js +1 -1
- package/dist/components/other/Calendar/CalendarCell.js +1 -1
- package/dist/components/other/Calendar/CalendarGrid.js +1 -1
- package/dist/components/other/Calendar/CalendarHeader.js +1 -1
- package/dist/components/other/Calendar/CalendarPanel.js +1 -1
- package/dist/components/other/Calendar/PeriodCalendar.js +1 -1
- package/dist/components/other/Calendar/PeriodGrid.js +1 -1
- package/dist/components/other/Calendar/RangeCalendar.js +1 -1
- package/dist/components/other/Calendar/styled.js +1 -1
- package/dist/components/other/CubeLogo/CubeLogo.js +1 -1
- package/dist/components/other/NoDataIcon/NoDataIcon.js +1 -1
- package/dist/components/overlays/AlertDialog/AlertDialog.js +1 -1
- package/dist/components/overlays/AlertDialog/AlertDialogApiProvider.js +1 -1
- package/dist/components/overlays/AlertDialog/AlertDialogZone.js +1 -1
- package/dist/components/overlays/Dialog/Dialog.js +1 -1
- package/dist/components/overlays/Dialog/DialogContainer.js +1 -1
- package/dist/components/overlays/Dialog/DialogForm.js +1 -1
- package/dist/components/overlays/Dialog/DialogTrigger.js +1 -1
- package/dist/components/overlays/Dialog/ModernDialogForm.js +1 -1
- package/dist/components/overlays/Dialog/context.js +1 -1
- package/dist/components/overlays/Dialog/default-button-text.js +1 -1
- package/dist/components/overlays/Dialog/use-content-overflow.js +1 -1
- package/dist/components/overlays/Dialog/use-dialog-container.js +1 -1
- package/dist/components/overlays/Modal/Modal.js +1 -1
- package/dist/components/overlays/Modal/OpenTransitionContext.js +1 -1
- package/dist/components/overlays/Modal/Overlay.js +1 -1
- package/dist/components/overlays/Modal/Popover.js +1 -1
- package/dist/components/overlays/Modal/Tray.js +1 -1
- package/dist/components/overlays/Modal/Underlay.js +1 -1
- package/dist/components/overlays/Notifications/Notification.js +1 -1
- package/dist/components/overlays/Notifications/NotificationAction.js +1 -1
- package/dist/components/overlays/Notifications/NotificationCard.js +1 -1
- package/dist/components/overlays/Notifications/NotificationContext.js +1 -1
- package/dist/components/overlays/Notifications/NotificationItem.js +1 -1
- package/dist/components/overlays/Notifications/OverlayContainer.js +1 -1
- package/dist/components/overlays/Notifications/OverlayProvider.js +1 -1
- package/dist/components/overlays/Notifications/PersistentNotificationsList.js +1 -1
- package/dist/components/overlays/Notifications/dismissed-storage.js +1 -1
- package/dist/components/overlays/Notifications/format-relative-time.js +1 -1
- package/dist/components/overlays/Notifications/index.js +1 -1
- package/dist/components/overlays/Notifications/use-notification-state.js +1 -1
- package/dist/components/overlays/Notifications/use-notifications.js +1 -1
- package/dist/components/overlays/Notifications/use-overlay-timers.js +1 -1
- package/dist/components/overlays/Notifications/use-persistent-notifications.js +1 -1
- package/dist/components/overlays/Notifications/use-persistent-state.js +1 -1
- package/dist/components/overlays/Notifications/use-toast-state.js +1 -1
- package/dist/components/overlays/Toast/ToastItem.js +1 -1
- package/dist/components/overlays/Toast/index.js +1 -1
- package/dist/components/overlays/Toast/useProgressToast.js +1 -1
- package/dist/components/overlays/Toast/useToast.js +1 -1
- package/dist/components/overlays/Tooltip/Tooltip.js +1 -1
- package/dist/components/overlays/Tooltip/TooltipProvider.js +1 -1
- package/dist/components/overlays/Tooltip/TooltipTrigger.js +1 -1
- package/dist/components/overlays/Tooltip/context.js +1 -1
- package/dist/components/overlays/Tooltip/split-trigger-props.js +1 -1
- package/dist/components/portal/Portal.js +1 -1
- package/dist/components/portal/PortalProvider.js +1 -1
- package/dist/components/portal/usePortal.js +1 -1
- package/dist/components/shared/DraggableCollection.js +1 -1
- package/dist/components/shared/InvalidIcon.js +1 -1
- package/dist/components/shared/ValidIcon.js +1 -1
- package/dist/components/status/LoadingAnimation/LoadingAnimation.js +1 -1
- package/dist/components/status/Spin/Cube.js +1 -1
- package/dist/components/status/Spin/InternalSpinner.js +1 -1
- package/dist/components/status/Spin/Spin.js +1 -1
- package/dist/components/status/Spin/SpinsContainer.js +1 -1
- package/dist/data/item-themes.js +1 -1
- package/dist/data/themes.js +1 -1
- package/dist/eslint-plugin/defaults.generated.js +2 -2
- package/dist/eslint-plugin/defaults.generated.js.map +1 -1
- package/dist/eslint-plugin/index.js +1 -1
- package/dist/eslint-plugin/rules/no-redundant-default-prop.js +1 -1
- package/dist/i18n/I18nProvider.js +1 -1
- package/dist/i18n/createFormatter.js +1 -1
- package/dist/i18n/index.js +1 -1
- package/dist/i18n/instance.js +1 -1
- package/dist/i18n/locales/de-DE/uikit.js +1 -1
- package/dist/i18n/locales/en-US/uikit.js +1 -1
- package/dist/i18n/locales/es-ES/uikit.js +1 -1
- package/dist/i18n/locales/es-MX/uikit.js +1 -1
- package/dist/i18n/locales/fr-FR/uikit.js +1 -1
- package/dist/i18n/locales/it-IT/uikit.js +1 -1
- package/dist/i18n/locales/ja-JP/uikit.js +1 -1
- package/dist/i18n/locales/nb-NO/uikit.js +1 -1
- package/dist/i18n/locales/pt-BR/uikit.js +1 -1
- package/dist/i18n/locales/pt-PT/uikit.js +1 -1
- package/dist/i18n/locales/sv-SE/uikit.js +1 -1
- package/dist/i18n/locales/vi-VN/uikit.js +1 -1
- package/dist/i18n/locales.js +1 -1
- package/dist/i18n/useFormatter.js +1 -1
- package/dist/i18n/useI18n.js +1 -1
- package/dist/icons/AdjustmentsHorizontalIcon.js +1 -1
- package/dist/icons/AdjustmentsIcon.js +1 -1
- package/dist/icons/AiIcon.js +1 -1
- package/dist/icons/AreaChartIcon.js +1 -1
- package/dist/icons/ArrowNarrowDownIcon.js +1 -1
- package/dist/icons/ArrowNarrowUpIcon.js +1 -1
- package/dist/icons/BackwardIcon.js +1 -1
- package/dist/icons/BarChartIcon.js +1 -1
- package/dist/icons/BellFilledIcon.js +1 -1
- package/dist/icons/BellIcon.js +1 -1
- package/dist/icons/BooleanIcon.js +1 -1
- package/dist/icons/CalendarEditIcon.js +1 -1
- package/dist/icons/CalendarIcon.js +1 -1
- package/dist/icons/CaretDownIcon.js +1 -1
- package/dist/icons/CaretUpIcon.js +1 -1
- package/dist/icons/ChartAreaStackedIcon.js +1 -1
- package/dist/icons/ChartAreaStackedPercentageIcon.js +1 -1
- package/dist/icons/ChartBarGroupedHorizontalIcon.js +1 -1
- package/dist/icons/ChartBarGroupedIcon.js +1 -1
- package/dist/icons/ChartBarHorizontalIcon.js +1 -1
- package/dist/icons/ChartBarLineIcon.js +1 -1
- package/dist/icons/ChartBarStackedHorizontalIcon.js +1 -1
- package/dist/icons/ChartBarStackedIcon.js +1 -1
- package/dist/icons/ChartBarStackedPercentageHorizontalIcon.js +1 -1
- package/dist/icons/ChartBarStackedPercentageIcon.js +1 -1
- package/dist/icons/ChartBoxPlot2Icon.js +1 -1
- package/dist/icons/ChartBoxPlotIcon.js +1 -1
- package/dist/icons/ChartBubbleIcon.js +1 -1
- package/dist/icons/ChartDonut2Icon.js +1 -1
- package/dist/icons/ChartFunnelIcon.js +1 -1
- package/dist/icons/ChartHeatmapIcon.js +1 -1
- package/dist/icons/ChartKPIIcon.js +1 -1
- package/dist/icons/ChartPie2Icon.js +1 -1
- package/dist/icons/ChartScatterIcon.js +1 -1
- package/dist/icons/CheckCircleFilledIcon.js +1 -1
- package/dist/icons/CheckCircleIcon.js +1 -1
- package/dist/icons/CheckIcon.js +1 -1
- package/dist/icons/CircleFilledIcon.js +1 -1
- package/dist/icons/ClearIcon.js +1 -1
- package/dist/icons/CloseCircleFilledIcon.js +1 -1
- package/dist/icons/CloseCircleIcon.js +1 -1
- package/dist/icons/CloseIcon.js +1 -1
- package/dist/icons/CodeIcon.js +1 -1
- package/dist/icons/ColumnTotalIcon.js +1 -1
- package/dist/icons/CopyIcon.js +1 -1
- package/dist/icons/CountIcon.js +1 -1
- package/dist/icons/CubeIcon.js +1 -1
- package/dist/icons/CubePauseIcon.js +1 -1
- package/dist/icons/CubePlayIcon.js +1 -1
- package/dist/icons/CurrencyDollarIcon.js +1 -1
- package/dist/icons/DangerIcon.js +1 -1
- package/dist/icons/DashboardIcon.js +1 -1
- package/dist/icons/DatabaseIcon.js +1 -1
- package/dist/icons/DecimalDecreaseIcon.js +1 -1
- package/dist/icons/DecimalIncreaseIcon.js +1 -1
- package/dist/icons/DirectionIcon.js +1 -1
- package/dist/icons/DonutIcon.js +1 -1
- package/dist/icons/DownIcon.js +1 -1
- package/dist/icons/EditIcon.js +1 -1
- package/dist/icons/ExclamationCircleFilledIcon.js +1 -1
- package/dist/icons/ExclamationCircleIcon.js +1 -1
- package/dist/icons/ExclamationIcon.js +1 -1
- package/dist/icons/EyeIcon.js +1 -1
- package/dist/icons/EyeInvisibleIcon.js +1 -1
- package/dist/icons/FilterIcon.js +1 -1
- package/dist/icons/FolderFilledIcon.js +1 -1
- package/dist/icons/FolderIcon.js +1 -1
- package/dist/icons/FolderOpenFilledIcon.js +1 -1
- package/dist/icons/FolderOpenIcon.js +1 -1
- package/dist/icons/ForwardIcon.js +1 -1
- package/dist/icons/GripVerticalIcon.js +1 -1
- package/dist/icons/HierarchyIcon.js +1 -1
- package/dist/icons/HierarchyOpenIcon.js +1 -1
- package/dist/icons/Icon.js +1 -1
- package/dist/icons/InfoCircleIcon.js +1 -1
- package/dist/icons/InfoIcon.js +1 -1
- package/dist/icons/KeyIcon.js +1 -1
- package/dist/icons/LeftIcon.js +1 -1
- package/dist/icons/LineChartIcon.js +1 -1
- package/dist/icons/LoadingIcon.js +1 -1
- package/dist/icons/LockFilledIcon.js +1 -1
- package/dist/icons/LockIcon.js +1 -1
- package/dist/icons/MoreIcon.js +1 -1
- package/dist/icons/NotAllowedIcon.js +1 -1
- package/dist/icons/Number123Icon.js +1 -1
- package/dist/icons/NumberIcon.js +1 -1
- package/dist/icons/PauseCircleFilledIcon.js +1 -1
- package/dist/icons/PauseCircleIcon.js +1 -1
- package/dist/icons/PauseIcon.js +1 -1
- package/dist/icons/PercentageIcon.js +1 -1
- package/dist/icons/PieChartIcon.js +1 -1
- package/dist/icons/PipetteIcon.js +1 -1
- package/dist/icons/PlayCircleIcon.js +1 -1
- package/dist/icons/PlayIcon.js +1 -1
- package/dist/icons/PlusIcon.js +1 -1
- package/dist/icons/ProgressBarIcon.js +1 -1
- package/dist/icons/ReloadIcon.js +1 -1
- package/dist/icons/ReportIcon.js +1 -1
- package/dist/icons/ReturnIcon.js +1 -1
- package/dist/icons/RightIcon.js +1 -1
- package/dist/icons/RowTotalsIcon.js +1 -1
- package/dist/icons/SchemeIcon.js +1 -1
- package/dist/icons/SearchIcon.js +1 -1
- package/dist/icons/SemanticQueryIcon.js +1 -1
- package/dist/icons/SettingsIcon.js +1 -1
- package/dist/icons/ShieldFilledIcon.js +1 -1
- package/dist/icons/ShieldIcon.js +1 -1
- package/dist/icons/SlashIcon.js +1 -1
- package/dist/icons/SparklesIcon.js +1 -1
- package/dist/icons/SqlIcon.js +1 -1
- package/dist/icons/StatsIcon.js +1 -1
- package/dist/icons/StopIcon.js +1 -1
- package/dist/icons/StringIcon.js +1 -1
- package/dist/icons/SubtotalsIcon.js +1 -1
- package/dist/icons/SwitchIcon.js +1 -1
- package/dist/icons/TableIcon.js +1 -1
- package/dist/icons/ThumbsDownIcon.js +1 -1
- package/dist/icons/ThumbsUpIcon.js +1 -1
- package/dist/icons/ThunderboltCrossedIcon.js +1 -1
- package/dist/icons/ThunderboltFilledIcon.js +1 -1
- package/dist/icons/ThunderboltIcon.js +1 -1
- package/dist/icons/TimeIcon.js +1 -1
- package/dist/icons/TrashIcon.js +1 -1
- package/dist/icons/UnlockIcon.js +1 -1
- package/dist/icons/UpIcon.js +1 -1
- package/dist/icons/UserGroupIcon.js +1 -1
- package/dist/icons/UserIcon.js +1 -1
- package/dist/icons/UserLockIcon.js +1 -1
- package/dist/icons/ViewIcon.js +1 -1
- package/dist/icons/WarningFilledIcon.js +1 -1
- package/dist/icons/WarningIcon.js +1 -1
- package/dist/icons/wrap-icon.js +1 -1
- package/dist/index.d.ts +7 -6
- package/dist/index.js +1 -1
- package/dist/probe/canonicalize.js +1 -1
- package/dist/probe/css.js +1 -1
- package/dist/probe/index.js +1 -1
- package/dist/provider.js +2 -2
- package/dist/provider.js.map +1 -1
- package/dist/providers/TrackingProvider.js +1 -1
- package/dist/providers/navigation-url.js +11 -0
- package/dist/providers/navigation-url.js.map +1 -0
- package/dist/providers/navigationAdapter.default.js +1 -1
- package/dist/providers/use-navigation.js +19 -0
- package/dist/providers/use-navigation.js.map +1 -0
- package/dist/tokens/all-tokens.js +1 -1
- package/dist/tokens/base.js +1 -1
- package/dist/tokens/color-seed.js +1 -1
- package/dist/tokens/color-theme.js +1 -1
- package/dist/tokens/colors.js +1 -1
- package/dist/tokens/layout.js +1 -1
- package/dist/tokens/lazy-styles.js +1 -1
- package/dist/tokens/legacy-color.js +1 -1
- package/dist/tokens/palette-config.js +1 -1
- package/dist/tokens/palette.js +1 -1
- package/dist/tokens/resolve.js +1 -1
- package/dist/tokens/shadows.js +1 -1
- package/dist/tokens/sizes.js +1 -1
- package/dist/tokens/spacing.js +1 -1
- package/dist/tokens/typography.js +1 -1
- package/dist/utils/ResizeSensor.js +1 -1
- package/dist/utils/colors.js +1 -1
- package/dist/utils/dotize.js +1 -1
- package/dist/utils/is-dev-env.js +1 -1
- package/dist/utils/modules.js +1 -1
- package/dist/utils/promise.js +1 -1
- package/dist/utils/raf.js +1 -1
- package/dist/utils/random.js +1 -1
- package/dist/utils/range.js +1 -1
- package/dist/utils/react/RenderCache.js +1 -1
- package/dist/utils/react/Slots.js +1 -1
- package/dist/utils/react/chain.js +1 -1
- package/dist/utils/react/disabledProps.js +1 -1
- package/dist/utils/react/forwardRefWithGenerics.js +1 -1
- package/dist/utils/react/index.js +1 -1
- package/dist/utils/react/interactions.js +1 -1
- package/dist/utils/react/isTextOnly.js +1 -1
- package/dist/utils/react/mapProps.js +1 -1
- package/dist/utils/react/mergeProps.js +1 -1
- package/dist/utils/react/nullableValue.js +1 -1
- package/dist/utils/react/overlayKeyPropagation.js +1 -1
- package/dist/utils/react/programmaticFocus.js +1 -1
- package/dist/utils/react/resolveIcon.js +1 -1
- package/dist/utils/react/sharedStore.js +1 -1
- package/dist/utils/react/useBufferedValue.js +1 -1
- package/dist/utils/react/useCombinedRefs.js +1 -1
- package/dist/utils/react/useControlledFocusVisible.js +1 -1
- package/dist/utils/react/useEventBus.js +1 -1
- package/dist/utils/react/useId.js +1 -1
- package/dist/utils/react/useIsDarwin.js +1 -1
- package/dist/utils/react/useKeySymbols.js +1 -1
- package/dist/utils/react/useLayoutEffect.js +1 -1
- package/dist/utils/react/useLocalStorage.js +1 -1
- package/dist/utils/react/useMergeStyles.js +1 -1
- package/dist/utils/react/useOverlayEscapeGuard.js +1 -1
- package/dist/utils/react/usePopoverSync.js +1 -1
- package/dist/utils/react/useQaProps.js +1 -1
- package/dist/utils/react/useScheme.js +1 -1
- package/dist/utils/react/useViewportSize.js +1 -1
- package/dist/utils/react/wrapNodeIfPlain.js +1 -1
- package/dist/utils/selection.js +1 -1
- package/dist/utils/styles.js +1 -1
- package/dist/utils/tree.js +1 -1
- package/dist/utils/warnings.js +1 -1
- package/dist/version.js +2 -2
- package/docs/Usage.md +4 -0
- package/docs/components/CollectionItem.md +5 -1
- package/docs/components/actions/CommandMenu.md +46 -18
- package/docs/components/actions/Menu.md +124 -19
- package/docs/components/data/ItemTable.md +0 -2
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-30d7fcd | Cube Dev Team */
|
|
2
2
|
import { useEvent } from "../../_internal/hooks/use-event.js";
|
|
3
3
|
import { c } from "react/compiler-runtime";
|
|
4
4
|
import { useSyncExternalStore } from "react";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-30d7fcd | Cube Dev Team */
|
|
2
2
|
import { useEvent } from "../../_internal/hooks/use-event.js";
|
|
3
3
|
import { c } from "react/compiler-runtime";
|
|
4
4
|
import { getEventTarget, nodeContains } from "@react-aria/utils";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-30d7fcd | Cube Dev Team */
|
|
2
2
|
import { EventBusContext, useEventBus } from "./useEventBus.js";
|
|
3
3
|
import { c } from "react/compiler-runtime";
|
|
4
4
|
import { useContext, useEffect, useEffectEvent, useRef } from "react";
|
package/dist/utils/selection.js
CHANGED
package/dist/utils/styles.js
CHANGED
package/dist/utils/tree.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-30d7fcd | Cube Dev Team */
|
|
2
2
|
//#region src/utils/tree.ts
|
|
3
3
|
function toFlatTree(tree, includingFolders) {
|
|
4
4
|
return tree.reduce((result, node) => {
|
package/dist/utils/warnings.js
CHANGED
package/dist/version.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-30d7fcd | Cube Dev Team */
|
|
2
2
|
//#region src/version.ts
|
|
3
|
-
const VERSION = "0.0.0-canary-
|
|
3
|
+
const VERSION = "0.0.0-canary-30d7fcd";
|
|
4
4
|
const TASTY_VERSION = "3.9.9";
|
|
5
5
|
if (typeof window !== "undefined") {
|
|
6
6
|
const version = VERSION;
|
package/docs/Usage.md
CHANGED
|
@@ -11,6 +11,10 @@ For styling engine internals see the [Tasty documentation](./tasty/usage.md). Ta
|
|
|
11
11
|
- **injector.md** — Low-level style injector: `inject()`, `injectGlobal()`, deduplication, SSR.
|
|
12
12
|
- **tasty-static.md** — Zero-runtime `tastyStatic()`, Babel plugin, Next.js/Vite integration.
|
|
13
13
|
|
|
14
|
+
## Navigation
|
|
15
|
+
|
|
16
|
+
Pass your router's `useHref` and `useNavigate` hooks through `Root`'s `navigation` adapter. `Menu.Item`, like `Button`, `ItemButton`, and `Link`, accepts `to` destinations. Its label and description expose native anchors for modified-click, middle-click and link context-menu commands; the complete row supports ordinary click and keyboard activation. Use `navigationOptions` for router options and `target`, `rel`, or `download` for native link behavior. Nested providers and overlays inherit the adapter unless they explicitly supply another one.
|
|
17
|
+
|
|
14
18
|
## React Compiler
|
|
15
19
|
|
|
16
20
|
UI Kit ships components optimized with React Compiler and requires React and React DOM 19.3 or newer. Your application does not need to enable Compiler to use this build. Adoption is incremental: functions with known compatibility diagnostics remain unoptimized, and the legacy form's mutable render paths are explicitly excluded.
|
|
@@ -6,6 +6,10 @@
|
|
|
6
6
|
|
|
7
7
|
ListBox, FilterListBox, Select, ComboBox, FilterPicker, Picker, Menu, CommandMenu
|
|
8
8
|
|
|
9
|
+
The parent component determines an item's semantics. `Menu.Item` and `CommandMenu.Item` can mix commands (`onAction`) with navigation links (`to` or `href`). See [Menu](./actions/Menu.md) for keyboard behavior and inline actions, and [CommandMenu](./actions/CommandMenu.md) for searchable menus.
|
|
10
|
+
|
|
11
|
+
ListBox, ComboBox, SearchComboBox, Select, Picker and their filtering variants render selection options. Their `.Item` APIs reject navigation props, and the controls ignore destinations even when given an item from another factory. Use a menu or command menu when activating a suggestion should navigate.
|
|
12
|
+
|
|
9
13
|
## Usage Patterns
|
|
10
14
|
|
|
11
15
|
There are two ways to provide items to collection components:
|
|
@@ -114,7 +118,7 @@ const items = [{
|
|
|
114
118
|
- **`onAction`** `() => void` — Callback fired when the item is activated (Menu items)
|
|
115
119
|
- **`wrapper`** `(item: ReactElement) => ReactElement` — Function to wrap the rendered item
|
|
116
120
|
|
|
117
|
-
|
|
121
|
+
Supports [Item component](./content/Item.md) content and styling props. Navigation props are available only on `Menu.Item` and `CommandMenu.Item`.
|
|
118
122
|
|
|
119
123
|
### Base Properties
|
|
120
124
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
# CommandMenu
|
|
2
2
|
|
|
3
|
-
A searchable, keyboard-first surface for finding and executing application
|
|
3
|
+
A searchable, keyboard-first surface for finding and executing application commands or opening navigation destinations. CommandMenu renders the searchable menu content; wrap it in `CommandMenu.Trigger` for a button-anchored popover or place it in a `Dialog` for a global command palette.
|
|
4
4
|
|
|
5
5
|
## When to use
|
|
6
6
|
|
|
7
7
|
- Users need to search a large or changing set of application commands
|
|
8
|
-
-
|
|
8
|
+
- Choosing an item executes a command or opens a destination
|
|
9
9
|
- Keyboard-first discovery, aliases (`keywords`), and shortcut hints are important
|
|
10
10
|
- A trigger-based command popover or modal global command palette is needed
|
|
11
11
|
|
|
@@ -38,7 +38,7 @@ Choose a different component when the interaction has another outcome:
|
|
|
38
38
|
- **`autoFocus`** `boolean | FocusStrategy` (default: `true`) — Whether to auto-focus the search input
|
|
39
39
|
- **`items`** `Iterable<T>` — Collection of items for dynamic content with render function pattern
|
|
40
40
|
- **`disabledKeys`** `Iterable<Key>` — Keys of items that should be disabled
|
|
41
|
-
- **`onAction`** `(key: Key) => void` — Callback fired when an item is
|
|
41
|
+
- **`onAction`** `(key: Key) => void` — Callback fired when an item is activated, after its own `onAction()`
|
|
42
42
|
- **`isDisabled`** `boolean` — Whether the command menu is disabled
|
|
43
43
|
- **`header`** `ReactNode` — Optional header content above the search input
|
|
44
44
|
- **`footer`** `ReactNode` — Optional footer content below the menu
|
|
@@ -117,7 +117,11 @@ For detailed information about all available item properties, see the [Menu.Item
|
|
|
117
117
|
- **`hotkeys`** `string` — Keyboard shortcut that triggers this item
|
|
118
118
|
- **`tooltip`** `string | boolean | object` — Tooltip configuration
|
|
119
119
|
- **`isDisabled`** `boolean` — Whether the item is disabled
|
|
120
|
-
- **`onAction`** `() => void` — Callback fired when item is activated
|
|
120
|
+
- **`onAction`** `() => void` — Callback fired when the item is activated, before the CommandMenu's `onAction(key)`
|
|
121
|
+
- **`to`** `string | Path` — Application destination resolved by Root's navigation adapter; takes precedence over `href`
|
|
122
|
+
- **`navigationOptions`** `NavigateOptions` — Options for client navigation, such as `replace`, `state`, `relative` and `preventScrollReset`
|
|
123
|
+
- **`href`** `string` — Native destination when `to` is omitted
|
|
124
|
+
- **`target`**, **`rel`**, **`download`**, **`ping`**, **`referrerPolicy`**, **`hrefLang`** — Native anchor attributes
|
|
121
125
|
|
|
122
126
|
#### CommandMenu-specific Properties
|
|
123
127
|
|
|
@@ -125,6 +129,36 @@ For detailed information about all available item properties, see the [Menu.Item
|
|
|
125
129
|
- **`forceMount`** `boolean` — Whether to always show this item regardless of search filter
|
|
126
130
|
- **`textValue`** `string` — Text value for search filtering (if different from children)
|
|
127
131
|
|
|
132
|
+
#### Mixed Commands and Navigation
|
|
133
|
+
|
|
134
|
+
The same searchable collection can contain commands and links. Give commands an `onAction` and navigation destinations a `to` or `href`; do not navigate again in the action callback. CommandMenu.Item uses the same navigation behavior as [Menu.Item](./Menu.md#navigation-items): ordinary activation uses Root's navigation adapter, while modified clicks, middle clicks, downloads, external destinations and other targets retain native browser behavior. A `!` prefix on `to` opens a new tab, and an `@` prefix forces native navigation.
|
|
135
|
+
|
|
136
|
+
```tsx
|
|
137
|
+
<CommandMenu aria-label="Workbooks" onAction={recordActivation}>
|
|
138
|
+
<CommandMenu.Item key="create" onAction={createWorkbook} keywords={['new']}>
|
|
139
|
+
Create workbook
|
|
140
|
+
</CommandMenu.Item>
|
|
141
|
+
<CommandMenu.Section title="Recent workbooks">
|
|
142
|
+
<CommandMenu.Item
|
|
143
|
+
key="saved"
|
|
144
|
+
to={{ pathname: '/workbooks/saved', search: '?view=table' }}
|
|
145
|
+
description="Open the saved workbook"
|
|
146
|
+
>
|
|
147
|
+
Saved workbook
|
|
148
|
+
</CommandMenu.Item>
|
|
149
|
+
</CommandMenu.Section>
|
|
150
|
+
<CommandMenu.Item key="browse" to="/workbooks">Browse all</CommandMenu.Item>
|
|
151
|
+
</CommandMenu>
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
Filtering, Arrow keys and Enter use the same primary items for both commands and links. The item's `onAction()` runs first, then the CommandMenu's `onAction(key)`, once each. Space activates the highlighted item only while the search is empty; while typing a query, Space inserts text. Disabled items cannot activate or navigate. Selection modes select commands; navigation items open their destination without becoming selected.
|
|
155
|
+
|
|
156
|
+
Loading items are disabled by default. Set `isDisabled={false}` to keep a loading item available; `disabledKeys` still applies.
|
|
157
|
+
|
|
158
|
+
Navigation items expose `menuitem` semantics without a checked state, including when other items are checkboxes or radio choices. Supply `aria-current` to identify a destination that represents the current page.
|
|
159
|
+
|
|
160
|
+
The primary native anchor covers the complete row and exposes the menu-item semantics and destination, while the original Item row retains its layout and style slots. Padding, gaps and whitespace support native browser link commands. Give icon-only items a meaningful accessible name. Follow [Menu's focus and selector migration guidance](./Menu.md#focus-and-selector-migration) for custom selectors. CommandMenu uses virtual focus: the search input keeps DOM focus and identifies the active primary menu item with `aria-activedescendant`, including when styles hide an individual content slot. Inline actions are unsupported in this virtual-focus mode; use a separate primary item for each command or a DOM-focus Menu when independent row actions are required.
|
|
161
|
+
|
|
128
162
|
#### Example with Enhanced Search
|
|
129
163
|
|
|
130
164
|
```jsx
|
|
@@ -167,17 +201,17 @@ Alias for MenuTrigger component. See [Menu.Trigger documentation](./Menu.md#menu
|
|
|
167
201
|
The CommandMenu component provides comprehensive keyboard support:
|
|
168
202
|
|
|
169
203
|
- **Search Input Focus**: The search input is automatically focused when the palette opens
|
|
170
|
-
- **
|
|
171
|
-
- **Enter**:
|
|
204
|
+
- **ArrowUp/ArrowDown**: Navigate through enabled filtered items while keeping the search input focused
|
|
205
|
+
- **Enter**: Activate the currently highlighted command or navigation destination
|
|
206
|
+
- **Space**: Activate the highlighted item only when the search is empty; otherwise insert a space into the query
|
|
172
207
|
- **Escape**: Clear search term or close the palette
|
|
173
208
|
- **Tab**: Navigate between focusable elements
|
|
174
209
|
|
|
175
210
|
### Screen Reader Support
|
|
176
211
|
|
|
177
|
-
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
- Descriptive labels for loading and empty states
|
|
212
|
+
The named search input has `searchbox` semantics and controls a `menu`, rather than a listbox of form options. Its `aria-activedescendant` points to the actual highlighted menu item, including items inside sections and native navigation anchors. Generated IDs are unique per palette. A plain command retains its consumer-provided DOM `id`; keep explicit IDs non-empty and unique within the page. Empty and loading states clear references to items that are no longer rendered.
|
|
213
|
+
|
|
214
|
+
Give the palette an `aria-label` and provide a descriptive `searchPlaceholder`, which also names the search input. Screen-reader wording and virtual-focus behavior vary by reader and browser; verify the consuming application's browser/reader combination. The [WAI-ARIA active-descendant requirements](https://www.w3.org/TR/wai-aria-1.2/#aria-activedescendant) permit a searchbox to reference an item owned by its controlled menu.
|
|
181
215
|
|
|
182
216
|
### Focus Management
|
|
183
217
|
|
|
@@ -441,14 +475,8 @@ The CommandMenu supports enhanced search capabilities:
|
|
|
441
475
|
### Performance
|
|
442
476
|
|
|
443
477
|
- The component uses efficient filtering with React Stately's collection system
|
|
444
|
-
-
|
|
445
|
-
- Virtual focus
|
|
446
|
-
|
|
447
|
-
### Accessibility Compliance
|
|
448
|
-
|
|
449
|
-
- Meets WCAG 2.1 AA standards for keyboard navigation
|
|
450
|
-
- Supports screen readers with proper ARIA attributes
|
|
451
|
-
- Implements virtual focus pattern for optimal accessibility
|
|
478
|
+
- Filtering updates as the search value changes
|
|
479
|
+
- Virtual focus keeps the search input focused during item navigation
|
|
452
480
|
|
|
453
481
|
### Browser Support
|
|
454
482
|
|
|
@@ -17,6 +17,10 @@ Choose a different component when the interaction has another shape:
|
|
|
17
17
|
- Use [FilterPicker](../fields/FilterPicker.md) for persistent single or multiple field values with search.
|
|
18
18
|
- Use [SearchComboBox](../fields/SearchComboBox.md) for a focused search-and-act input that clears after each result.
|
|
19
19
|
|
|
20
|
+
A menu can mix commands and navigation destinations. For example, an enterprise workbook menu can offer “Create workbook”, links to recent workbooks and a “Browse all” link in the same collection. Choose semantics per item: give navigation a `to` or `href`, and give a command an `onAction`. Consumers do not need to choose a navigation-only mode for the entire Menu.
|
|
21
|
+
|
|
22
|
+
Use `Menu` when users expect a composite popup with arrow-key navigation and Tab leaving the menu. For a persistent sidebar or ordinary site navigation, prefer a navigation list with links and disclosure buttons; the [WAI-ARIA guidance for navigation disclosures](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/) explains that interaction. Native anchors with `role="menuitem"` are valid inside a menu, as illustrated by the [WAI-ARIA navigation menu example](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-links/).
|
|
23
|
+
|
|
20
24
|
## Component
|
|
21
25
|
|
|
22
26
|
---
|
|
@@ -32,7 +36,7 @@ Choose a different component when the interaction has another shape:
|
|
|
32
36
|
- **`defaultSelectedKeys`** `Iterable<Key>` — Initially selected keys (uncontrolled)
|
|
33
37
|
- **`disabledKeys`** `Iterable<Key>` — Keys of items that should appear disabled
|
|
34
38
|
- **`autoFocus`** `boolean | FocusStrategy` (default: `false`) — Whether to auto-focus the menu when it opens
|
|
35
|
-
- **`shouldFocusWrap`** `boolean` (default: `
|
|
39
|
+
- **`shouldFocusWrap`** `boolean` (default: `true`) — Whether keyboard navigation should wrap around
|
|
36
40
|
- **`size`** `'medium' | 'large'` (default: `medium`) — Size of the menu items
|
|
37
41
|
- **`styles`** `Styles` — Custom styles for the menu container
|
|
38
42
|
- **`menuStyles`** `Styles` — Custom styles for the inner menu list element
|
|
@@ -73,7 +77,7 @@ Customizes individual menu items.
|
|
|
73
77
|
**Sub-elements:**
|
|
74
78
|
|
|
75
79
|
- `Icon` - Icon element within menu items
|
|
76
|
-
- `
|
|
80
|
+
- `Label` - Main text content of menu items
|
|
77
81
|
- `Description` - Secondary text content for items with descriptions
|
|
78
82
|
|
|
79
83
|
#### sectionStyles
|
|
@@ -166,7 +170,108 @@ For detailed information about all available item properties, see [Item document
|
|
|
166
170
|
|
|
167
171
|
- **`textValue`** `string` — Text for typeahead search
|
|
168
172
|
- **`wrapper`** `(item: ReactElement) => ReactElement` — Function to wrap the item
|
|
169
|
-
- **`onAction`** `() => void` — Callback fired when item is activated
|
|
173
|
+
- **`onAction`** `() => void` — Callback fired when this item is activated, before the Menu's `onAction(key)`
|
|
174
|
+
- **`to`** `string \| Path` — Application destination, resolved by Root's navigation adapter; takes precedence over `href`
|
|
175
|
+
- **`navigationOptions`** `NavigateOptions` — Options forwarded during client navigation, such as `replace`, `state`, `relative`, and `preventScrollReset`
|
|
176
|
+
- **`href`** `string` — Link destination when `to` is omitted
|
|
177
|
+
- **`target`**, **`rel`**, **`download`**, **`ping`**, **`referrerPolicy`**, **`hrefLang`** — Native anchor attributes
|
|
178
|
+
|
|
179
|
+
#### Navigation Items
|
|
180
|
+
|
|
181
|
+
Navigation items render native anchors. An ordinary click or Enter/Space activation uses the navigation adapter passed to [Root](../Root.md) and closes the menu. Without a custom adapter, activation stays native and preserves the anchor's attributes. Modified clicks, middle clicks, downloads, other targets, and external destinations retain browser link behavior. Right-click offers the browser's link commands. Disabled links have no destination and cannot navigate.
|
|
182
|
+
|
|
183
|
+
Loading items are disabled by default. Set `isDisabled={false}` to keep a loading item available; `disabledKeys` still applies.
|
|
184
|
+
|
|
185
|
+
Links expose `menuitem` semantics even in a selectable menu. Only selectable commands expose `menuitemradio` or `menuitemcheckbox` and a checked state; opening a destination does not select it. Use `aria-current` when a link needs to identify the current page.
|
|
186
|
+
|
|
187
|
+
```tsx
|
|
188
|
+
<MenuTrigger>
|
|
189
|
+
<Button>Workbooks</Button>
|
|
190
|
+
<Menu>
|
|
191
|
+
<Menu.Section title="Recent workbooks">
|
|
192
|
+
<Menu.Item key="recent" to={{ pathname: '/workbooks/42', search: '?chatId=abc' }}>
|
|
193
|
+
Recent workbook
|
|
194
|
+
</Menu.Item>
|
|
195
|
+
</Menu.Section>
|
|
196
|
+
<Menu.Item key="browse" to="/workbooks">Browse all</Menu.Item>
|
|
197
|
+
<Menu.Item key="docs" to="!https://cube.dev/docs">Documentation</Menu.Item>
|
|
198
|
+
<Menu.Item key="create" onAction={createWorkbook}>Create workbook</Menu.Item>
|
|
199
|
+
</Menu>
|
|
200
|
+
</MenuTrigger>
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
As with other UI Kit actions, a `!` prefix opens `to` in a new tab and an `@` prefix forces native navigation. Use `onAction` for commands, including history actions. Link `onAction` callbacks still run during activation; navigation itself belongs to `to` or `href`, so the callback should not navigate again. Submenu parents open their submenu and ignore destinations; links inside the submenu behave normally.
|
|
204
|
+
|
|
205
|
+
An item's `onAction()` and the Menu's `onAction(key)` compose: when both are supplied, the item callback runs first and the Menu callback runs second, once each. Mouse activation, Enter, Space and the item's hotkey use the same callbacks. Disabled items invoke neither callback. A submenu parent only opens its submenu; its command callbacks do not run. An inline `Menu.Item.Action` handles its own activation independently and does not invoke either callback for the containing row.
|
|
206
|
+
|
|
207
|
+
```tsx
|
|
208
|
+
<Menu onAction={(key) => recordMenuActivation(key)}>
|
|
209
|
+
<Menu.Item key="create" onAction={createWorkbook}>Create workbook</Menu.Item>
|
|
210
|
+
<Menu.Item key="browse" to="/workbooks">Browse all</Menu.Item>
|
|
211
|
+
</Menu>
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
Use the item callback for a command that belongs to that item, or handle commands centrally using the Menu callback and item keys. Supplying both is useful for additional observation, such as recording an activation; avoid executing the same command in both callbacks.
|
|
215
|
+
|
|
216
|
+
The native link target covers the complete row, including padding, gaps and whitespace. Right-click anywhere on that target offers the browser's link commands. Independent controls in the prefix, suffix or actions slots retain their own targets. The primary native anchor owns menu-item semantics and keyboard focus, while Item's original list element owns layout and styling. Command content has no link destination.
|
|
217
|
+
|
|
218
|
+
#### Inline Actions
|
|
219
|
+
|
|
220
|
+
Use `Menu.Item.Action` in the `actions` slot for an independent action associated with a row. It is a sibling menu item in the keyboard order, outside the row's primary menu item and any navigation anchor. Activating it runs its own `onPress`; it does not run the row's `onAction`, the Menu's `onAction`, or the row's navigation.
|
|
221
|
+
|
|
222
|
+
```tsx
|
|
223
|
+
<Menu aria-label="Workbooks">
|
|
224
|
+
<Menu.Item key="create" onAction={createWorkbook}>Create workbook</Menu.Item>
|
|
225
|
+
<Menu.Item
|
|
226
|
+
key="saved"
|
|
227
|
+
to="/workbooks/saved"
|
|
228
|
+
description="Open the saved workbook"
|
|
229
|
+
actions={
|
|
230
|
+
<Menu.Item.Action
|
|
231
|
+
icon={<TrashIcon />}
|
|
232
|
+
aria-label="Delete saved workbook"
|
|
233
|
+
onPress={deleteSavedWorkbook}
|
|
234
|
+
/>
|
|
235
|
+
}
|
|
236
|
+
>
|
|
237
|
+
Saved workbook
|
|
238
|
+
</Menu.Item>
|
|
239
|
+
</Menu>
|
|
240
|
+
```
|
|
241
|
+
|
|
242
|
+
Up/Down and Home/End include inline actions in DOM order. Disabled actions are skipped. Tab and Shift+Tab leave the menu rather than visiting each action. Give every action an accessible name that identifies its context, such as “Delete saved workbook”; an icon or a repeated “Delete” label alone does not identify the affected row.
|
|
243
|
+
|
|
244
|
+
Keep the label and description non-interactive: text, icons and decorative badges are suitable, but buttons, links and inputs belong outside those content slots. `Menu.Item.Action` supplies the menu-item contract automatically. A custom control in `actions` must provide the same contract, including an appropriate menu-item role, accessible name, `tabIndex={-1}`, disabled behavior and keyboard activation; a generic button is not sufficient. Inline actions support the default DOM-focus mode; combining them with virtual focus is unsupported.
|
|
245
|
+
|
|
246
|
+
#### Focus and Selector Migration
|
|
247
|
+
|
|
248
|
+
The original `li` retains Item's layout, style slots, modifiers and forwarded ref. A navigation row, or a command row with inline actions, places the primary menu-item role and DOM focus on a native anchor covering the row. A command without inline actions keeps its menu-item role and focus on the `li`. The command anchor has no `href`. Inline actions remain outside that primary focus target.
|
|
249
|
+
|
|
250
|
+
Give every item a meaningful accessible name; use `aria-label` or `aria-labelledby` for icon-only rows. Hiding an individual content slot does not move the primary focus target. Explicit accessible names remain in effect. Heading items retain their heading element and level.
|
|
251
|
+
|
|
252
|
+
Use the item's `focused` modifier for row focus styles. It marks the active collection row, including the row associated with a focused inline action. Existing style props and named sub-element overrides continue to style the same layout elements.
|
|
253
|
+
|
|
254
|
+
```tsx
|
|
255
|
+
<Menu
|
|
256
|
+
itemStyles={{
|
|
257
|
+
fill: { '': '#clear', focused: '#dark.09' },
|
|
258
|
+
}}
|
|
259
|
+
>
|
|
260
|
+
<Menu.Item key="browse" to="/workbooks">Browse all</Menu.Item>
|
|
261
|
+
</Menu>
|
|
262
|
+
```
|
|
263
|
+
|
|
264
|
+
Consumer CSS that literally targets `li:focus` or assumes the `li` has `role="menuitem"` needs to follow the split between layout and semantics:
|
|
265
|
+
|
|
266
|
+
| Selector purpose | Use |
|
|
267
|
+
| --- | --- |
|
|
268
|
+
| Focus styling on the layout row | The `focused` style state, or `[data-menuitem][data-focused]` |
|
|
269
|
+
| Row layout or adjacency | The layout marker `[data-menuitem]`, including `[data-menuitem] + [data-menuitem]` |
|
|
270
|
+
| The actual focusable menu item | `[role="menuitem"]`, `[role="menuitemcheckbox"]` or `[role="menuitemradio"]` |
|
|
271
|
+
|
|
272
|
+
Do not use the forwarded row ref or a role selector as a proxy for the primary focus target. A row's semantic role can move to its anchor when a destination or inline action is added. `:focus-within` tracks DOM focus anywhere inside the row; use the `focused` modifier for the collection's active-row state, including virtual focus.
|
|
273
|
+
|
|
274
|
+
Use named style slots or their `data-element` markers for content styling. Selectors that depend on the Label, Description or Icon being a particular HTML tag need to allow their native anchor host. A private native target is also a child of the row; use slot markers instead of child-position selectors for content.
|
|
170
275
|
|
|
171
276
|
#### Example with Rich Items
|
|
172
277
|
|
|
@@ -397,32 +502,32 @@ const items = [
|
|
|
397
502
|
|
|
398
503
|
### Keyboard Navigation
|
|
399
504
|
|
|
400
|
-
- `
|
|
401
|
-
- `
|
|
402
|
-
- `
|
|
403
|
-
- `
|
|
404
|
-
- `
|
|
405
|
-
- `
|
|
406
|
-
- `
|
|
407
|
-
- `
|
|
505
|
+
- Open the menu with its trigger to move focus into it. A standalone Menu can use `autoFocus` or be reached with Tab.
|
|
506
|
+
- `ArrowUp`/`ArrowDown` - Navigate through enabled primary items and inline actions in DOM order. Navigation wraps by default; set `shouldFocusWrap={false}` to stop at the ends.
|
|
507
|
+
- `Home`/`End` - Move to the first/last enabled menu item, including inline actions.
|
|
508
|
+
- `Enter`/`Space` - Activate the focused command, destination or inline action, or open a submenu.
|
|
509
|
+
- `ArrowRight` - Open a submenu from its trigger. On a row with inline actions, move from the primary item into its actions.
|
|
510
|
+
- `ArrowLeft` - Return from inline actions to their primary item, or close a submenu and return to its trigger. Left/Right directions reverse in RTL layouts; submenu behavior takes priority over row shortcuts.
|
|
511
|
+
- `Tab`/`Shift+Tab` - Leave the menu; inline actions do not add separate Tab stops.
|
|
512
|
+
- `Escape` - Close the menu or submenu.
|
|
513
|
+
- Typing, `PageUp` and `PageDown` - Use the primary collection items. From an inline action, focus first returns to its primary row before the collection handles the key.
|
|
408
514
|
|
|
409
515
|
### Screen Reader Support
|
|
410
516
|
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
-
|
|
416
|
-
- Section headings provide context for grouped items
|
|
417
|
-
- Submenu opening and closing is announced to screen readers
|
|
517
|
+
The collection has the `menu` role and an accessible name supplied by `aria-label` or `aria-labelledby`. Each focus target exposes `menuitem`, `menuitemcheckbox` or `menuitemradio` semantics. The item label supplies its name, and its description supplies additional accessible information. Submenu triggers expose their expanded state and submenu relationship; selectable items expose their checked state.
|
|
518
|
+
|
|
519
|
+
A navigation item's focused menu item is the native anchor with the real destination. A screen reader may announce it as a menu item rather than an ordinary link because its menu-item role defines the composite interaction. Browser link commands remain available on the anchor. The layout row is presentational when its child owns the menu-item role, so inline actions are exposed as independent siblings rather than interactive descendants of a menu item.
|
|
520
|
+
|
|
521
|
+
Screen-reader wording varies by reader and browser. Provide descriptive names for the menu and every inline action, and verify the chosen browser/reader combination in the consuming application, especially when adding custom controls or wrappers.
|
|
418
522
|
|
|
419
523
|
### ARIA Properties
|
|
420
524
|
|
|
421
525
|
- `aria-label` - Provides accessible label for the menu
|
|
422
526
|
- `aria-labelledby` - References element that labels the menu
|
|
423
|
-
- `aria-activedescendant` - Indicates the currently focused item
|
|
424
527
|
- `aria-orientation` - Indicates menu orientation (vertical by default)
|
|
425
528
|
|
|
529
|
+
Default Menu navigation moves DOM focus directly to items. CommandMenu owns the search input's `aria-controls` and `aria-activedescendant` relationship. A custom consumer using Menu's virtual-focus mode must own that relationship on its focused controller; enabling virtual focus alone does not supply it.
|
|
530
|
+
|
|
426
531
|
## Best Practices
|
|
427
532
|
|
|
428
533
|
1. **Clear Labels**: Use descriptive, action-oriented labels
|
|
@@ -525,8 +525,6 @@ Virtualization is skipped for the empty and error states, and turns off entirely
|
|
|
525
525
|
|
|
526
526
|
Wide bounded tables also window default text cells horizontally, with a small overscan band. Headers and the complete column layout remain mounted, so header Tab order, menus, resizing, sticky columns and logical ARIA indices remain available. Offscreen body runs become hidden colspan spacers; scrolling mounts their text cells when they approach the viewport.
|
|
527
527
|
|
|
528
|
-
Tables that retain every body column skip column-window tracking. Small horizontal moves reuse the mounted buffer rather than rebuilding rows at every column boundary. The moving edge refills while retaining the ahead coverage; extra cells are released when scrolling settles or vertical movement starts, so new rows keep their ordinary body window.
|
|
529
|
-
|
|
530
528
|
Pinned and structural columns, row headers, the tree column, wrapping columns, custom renderers and per-column cell styles remain mounted. This preserves row naming, controls, drafts and measured row heights. Arbitrary `cellProps`, custom body/row/cell styling, `SlotProvider` text overrides or text/descendant overrides supplied through `styles` keep the complete body layout. When the row-height floor is below the inherited text line box, the body also keeps all columns, since offscreen text can determine intrinsic height. Relative row-height tokens also keep the complete body. This check follows ancestor typography and size-token changes, including viewport media queries. Auto-height and explicitly disabled virtualization render all columns.
|
|
531
529
|
|
|
532
530
|
```jsx
|