@cube-dev/ui-kit 0.124.4 → 0.125.1
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/CHANGELOG.md +12 -0
- package/dist/_internal/hooks/use-chained-callback.js +1 -1
- 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.js +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 +1 -1
- package/dist/components/actions/Action/Action.js +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.js +1 -1
- package/dist/components/actions/CommandMenu/styled.js +1 -1
- package/dist/components/actions/ItemAction/ItemAction.js +1 -1
- package/dist/components/actions/ItemActionContext.js +1 -1
- package/dist/components/actions/ItemButton/ItemButton.js +1 -1
- package/dist/components/actions/Link/Link.js +1 -1
- package/dist/components/actions/Menu/Menu.js +1 -1
- package/dist/components/actions/Menu/MenuItem.js +1 -1
- package/dist/components/actions/Menu/MenuSection.js +1 -1
- package/dist/components/actions/Menu/MenuTrigger.js +1 -1
- package/dist/components/actions/Menu/SubMenuTrigger.js +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/styled.js +1 -1
- package/dist/components/actions/index.js +1 -1
- package/dist/components/actions/use-action.js +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.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/Item/Item.js +1 -1
- package/dist/components/content/ItemBadge/ItemBadge.js +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/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.js +1 -1
- package/dist/components/content/TextItem/TextItem.js +1 -1
- package/dist/components/content/Title.js +1 -1
- package/dist/components/content/highlightText.js +1 -1
- package/dist/components/content/use-auto-tooltip.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/ComboBox/ComboBox.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/TimeInput.js +1 -1
- package/dist/components/fields/DatePicker/intl.js +1 -1
- package/dist/components/fields/DatePicker/parseDate.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.js +190 -194
- package/dist/components/fields/FilterPicker/FilterPicker.js.map +1 -1
- package/dist/components/fields/Input/Input.js +1 -1
- package/dist/components/fields/ListBox/ListBox.d.ts +7 -7
- package/dist/components/fields/ListBox/ListBox.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.js +178 -157
- package/dist/components/fields/Picker/Picker.js.map +1 -1
- 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/SearchInput/SearchInput.js +1 -1
- package/dist/components/fields/Select/Select.d.ts +4 -4
- package/dist/components/fields/Select/Select.js +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/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/TextInputMapper/TextInputMapper.js +1 -1
- package/dist/components/form/FieldWrapper/FieldWrapper.js +1 -1
- package/dist/components/form/FieldWrapper/extract-field-wrapper-props.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/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/index.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/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/Tabs/DraggableTabList.js +1 -1
- package/dist/components/navigation/Tabs/EditableTitle.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 +7 -5
- package/dist/components/navigation/Tabs/Tabs.js.map +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/styled.js +1 -1
- package/dist/components/navigation/Tabs/types.d.ts +7 -0
- package/dist/components/navigation/Tabs/types.js +1 -1
- package/dist/components/navigation/Tabs/types.js.map +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/FileTabs/FileTabs.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/RangeCalendar.js +1 -1
- package/dist/components/other/CloudLogo/CloudLogo.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/context.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/OpenTransition.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/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/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/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/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/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/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 +2 -1
- package/dist/index.js +3 -2
- package/dist/index.js.map +1 -1
- package/dist/provider.js +1 -1
- package/dist/providers/TrackingProvider.js +1 -1
- package/dist/providers/navigationAdapter.default.js +1 -1
- package/dist/tokens/base.js +1 -1
- package/dist/tokens/colors.js +1 -1
- package/dist/tokens/index.js +1 -1
- package/dist/tokens/layout.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/index.d.ts +2 -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/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/resolveIcon.js +1 -1
- package/dist/utils/react/sharedStore.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/useQaProps.js +1 -1
- package/dist/utils/react/useViewportSize.js +1 -1
- package/dist/utils/react/wrapNodeIfPlain.js +1 -1
- package/dist/utils/selection.d.ts +12 -0
- package/dist/utils/selection.js +19 -0
- package/dist/utils/selection.js.map +1 -0
- 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/components/navigation/Tabs.md +1 -0
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.125.1 | Cube Dev Team */
|
|
2
2
|
import { extractStyles } from "../../../utils/styles.js";
|
|
3
3
|
import { useEventBus } from "../../../utils/react/useEventBus.js";
|
|
4
4
|
import { useEvent } from "../../../_internal/hooks/use-event.js";
|
|
@@ -17,8 +17,9 @@ import { wrapWithField } from "../../form/wrapper.js";
|
|
|
17
17
|
import { Dialog } from "../../overlays/Dialog/Dialog.js";
|
|
18
18
|
import { DialogTrigger } from "../../overlays/Dialog/DialogTrigger.js";
|
|
19
19
|
import { ListBox } from "../ListBox/ListBox.js";
|
|
20
|
+
import { processSelectionArray } from "../../../utils/selection.js";
|
|
20
21
|
import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
|
|
21
|
-
import { forwardRef,
|
|
22
|
+
import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
|
|
22
23
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
23
24
|
import { FocusScope, useKeyboard } from "react-aria";
|
|
24
25
|
import { Section, useListState } from "react-stately";
|
|
@@ -65,108 +66,159 @@ const Picker = forwardRef(function Picker(props, ref) {
|
|
|
65
66
|
const [internalSelectedKeys, setInternalSelectedKeys] = useState(defaultSelectedKeys ?? []);
|
|
66
67
|
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
|
|
67
68
|
const triggerRef = useRef(null);
|
|
69
|
+
const triggerWidthRef = useRef(void 0);
|
|
68
70
|
const isControlledSingle = selectedKey !== void 0;
|
|
69
71
|
const isControlledMultiple = selectedKeys !== void 0;
|
|
70
72
|
const effectiveSelectedKey = isControlledSingle ? selectedKey : internalSelectedKey;
|
|
71
73
|
const effectiveSelectedKeys = isControlledMultiple ? selectedKeys : internalSelectedKeys;
|
|
72
|
-
const processSelectionArray = (iterable) => {
|
|
73
|
-
const resultSet = /* @__PURE__ */ new Set();
|
|
74
|
-
for (const key of iterable) {
|
|
75
|
-
const nKey = String(key);
|
|
76
|
-
if (resultSet.has(nKey)) resultSet.delete(nKey);
|
|
77
|
-
else resultSet.add(nKey);
|
|
78
|
-
}
|
|
79
|
-
return Array.from(resultSet);
|
|
80
|
-
};
|
|
81
74
|
const internalListStateRef = useRef(null);
|
|
82
75
|
useEffect(() => {
|
|
83
76
|
if (externalListStateRef && internalListStateRef.current) externalListStateRef.current = internalListStateRef.current;
|
|
84
77
|
}, [externalListStateRef]);
|
|
85
78
|
const cachedItemsOrder = useRef(null);
|
|
79
|
+
const latestSelectionRef = useRef({
|
|
80
|
+
single: effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,
|
|
81
|
+
multiple: selectionMode === "multiple" && effectiveSelectedKeys !== "all" ? (effectiveSelectedKeys || []).map(String) : []
|
|
82
|
+
});
|
|
83
|
+
useEffect(() => {
|
|
84
|
+
latestSelectionRef.current = {
|
|
85
|
+
single: effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,
|
|
86
|
+
multiple: selectionMode === "multiple" && effectiveSelectedKeys !== "all" ? (effectiveSelectedKeys || []).map(String) : []
|
|
87
|
+
};
|
|
88
|
+
}, [
|
|
89
|
+
effectiveSelectedKey,
|
|
90
|
+
effectiveSelectedKeys,
|
|
91
|
+
selectionMode
|
|
92
|
+
]);
|
|
86
93
|
const selectionWhenClosed = useRef({
|
|
87
94
|
single: null,
|
|
88
95
|
multiple: []
|
|
89
96
|
});
|
|
90
97
|
const sortSelectedToTopExplicit = sortSelectedToTop !== void 0;
|
|
91
98
|
const shouldSortSelectedToTop = sortSelectedToTop ?? (items ? true : false);
|
|
99
|
+
useWarn(sortSelectedToTopExplicit && shouldSortSelectedToTop && !items, {
|
|
100
|
+
key: ["picker-sort-selected-to-top-children"],
|
|
101
|
+
args: ["Picker: sortSelectedToTop only works with the items prop. Sorting will be skipped when using JSX children."]
|
|
102
|
+
});
|
|
92
103
|
useEffect(() => {
|
|
93
104
|
cachedItemsOrder.current = null;
|
|
94
105
|
}, [items]);
|
|
95
106
|
useEffect(() => {
|
|
96
|
-
if (!isPopoverOpen) {
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
};
|
|
101
|
-
cachedItemsOrder.current = null;
|
|
102
|
-
}
|
|
107
|
+
if (!isPopoverOpen) selectionWhenClosed.current = {
|
|
108
|
+
single: effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,
|
|
109
|
+
multiple: selectionMode === "multiple" && effectiveSelectedKeys !== "all" ? (effectiveSelectedKeys || []).map(String) : []
|
|
110
|
+
};
|
|
103
111
|
}, [
|
|
104
|
-
isPopoverOpen,
|
|
105
112
|
effectiveSelectedKey,
|
|
106
113
|
effectiveSelectedKeys,
|
|
114
|
+
isPopoverOpen,
|
|
107
115
|
selectionMode
|
|
108
116
|
]);
|
|
109
|
-
|
|
110
|
-
onOpenChange?.(isPopoverOpen);
|
|
111
|
-
}, [isPopoverOpen]);
|
|
112
|
-
const finalItems = useCallback(() => {
|
|
117
|
+
const finalItems = useMemo(() => {
|
|
113
118
|
if (!items || !shouldSortSelectedToTop) return items;
|
|
119
|
+
if (!isPopoverOpen) return items;
|
|
114
120
|
if (cachedItemsOrder.current) return cachedItemsOrder.current;
|
|
115
|
-
|
|
116
|
-
console.warn("Picker: sortSelectedToTop only works with the items prop. Sorting will be skipped when using JSX children.");
|
|
117
|
-
return items;
|
|
118
|
-
}
|
|
119
|
-
const selectedKeys = /* @__PURE__ */ new Set();
|
|
121
|
+
const selectedKeySet = /* @__PURE__ */ new Set();
|
|
120
122
|
if (selectionMode === "multiple") {
|
|
121
123
|
if (selectionWhenClosed.current.multiple.length === 0 || effectiveSelectedKeys === "all") return items;
|
|
122
|
-
selectionWhenClosed.current.multiple.forEach((k) =>
|
|
123
|
-
} else if (selectionWhenClosed.current.single)
|
|
124
|
-
if (
|
|
124
|
+
selectionWhenClosed.current.multiple.forEach((k) => selectedKeySet.add(k));
|
|
125
|
+
} else if (selectionWhenClosed.current.single) selectedKeySet.add(selectionWhenClosed.current.single);
|
|
126
|
+
if (selectedKeySet.size === 0) return items;
|
|
125
127
|
const itemsArray = Array.isArray(items) ? items : Array.from(items);
|
|
126
128
|
const selectedItems = [];
|
|
127
129
|
const unselectedItems = [];
|
|
128
130
|
itemsArray.forEach((item) => {
|
|
129
131
|
const key = item?.key ?? item?.id;
|
|
130
|
-
if (key != null &&
|
|
132
|
+
if (key != null && selectedKeySet.has(String(key))) selectedItems.push(item);
|
|
131
133
|
else unselectedItems.push(item);
|
|
132
134
|
});
|
|
133
135
|
const sorted = [...selectedItems, ...unselectedItems];
|
|
134
|
-
|
|
136
|
+
cachedItemsOrder.current = sorted;
|
|
135
137
|
return sorted;
|
|
136
138
|
}, [
|
|
137
139
|
items,
|
|
138
140
|
shouldSortSelectedToTop,
|
|
139
|
-
sortSelectedToTopExplicit,
|
|
140
141
|
selectionMode,
|
|
141
|
-
effectiveSelectedKeys,
|
|
142
142
|
isPopoverOpen
|
|
143
|
-
])
|
|
143
|
+
]);
|
|
144
144
|
const localCollectionState = useListState({
|
|
145
145
|
children,
|
|
146
146
|
items: finalItems,
|
|
147
147
|
selectionMode: "none"
|
|
148
148
|
});
|
|
149
|
-
const getItemLabel = useCallback((key) => {
|
|
150
|
-
return (localCollectionState?.collection?.getItem(key))?.textValue || String(key);
|
|
151
|
-
}, [localCollectionState?.collection]);
|
|
152
149
|
const selectedLabels = useMemo(() => {
|
|
153
|
-
const
|
|
150
|
+
const collection = localCollectionState?.collection;
|
|
154
151
|
if (selectionMode === "multiple" && effectiveSelectedKeys === "all") {
|
|
155
|
-
if (!
|
|
152
|
+
if (!collection) return [];
|
|
156
153
|
const labels = [];
|
|
157
|
-
for (const item of
|
|
154
|
+
for (const item of collection) if (item.type === "item") labels.push(item.textValue || String(item.key));
|
|
158
155
|
return labels;
|
|
159
156
|
}
|
|
160
|
-
return
|
|
157
|
+
return (selectionMode === "multiple" && effectiveSelectedKeys !== "all" ? effectiveSelectedKeys || [] : effectiveSelectedKey != null ? [effectiveSelectedKey] : []).map((key) => {
|
|
158
|
+
return (collection?.getItem(key))?.textValue || String(key);
|
|
159
|
+
}).filter(Boolean);
|
|
161
160
|
}, [
|
|
162
161
|
selectionMode,
|
|
163
162
|
effectiveSelectedKeys,
|
|
164
163
|
effectiveSelectedKey,
|
|
165
|
-
getItemLabel,
|
|
166
164
|
localCollectionState?.collection
|
|
167
165
|
]);
|
|
168
166
|
const hasSelection = selectedLabels.length > 0;
|
|
169
|
-
const
|
|
167
|
+
const handleOpenChange = useEvent((isOpen) => {
|
|
168
|
+
if (isOpen === isPopoverOpen) return;
|
|
169
|
+
if (isOpen) triggerWidthRef.current = triggerRef?.current?.UNSAFE_getDOMNode()?.offsetWidth;
|
|
170
|
+
setIsPopoverOpen(isOpen);
|
|
171
|
+
if (!isOpen) {
|
|
172
|
+
selectionWhenClosed.current = { ...latestSelectionRef.current };
|
|
173
|
+
cachedItemsOrder.current = null;
|
|
174
|
+
}
|
|
175
|
+
onOpenChange?.(isOpen);
|
|
176
|
+
});
|
|
177
|
+
useEffect(() => {
|
|
178
|
+
return on("popover:open", (data) => {
|
|
179
|
+
if (data.menuId !== pickerId && isPopoverOpen) handleOpenChange(false);
|
|
180
|
+
});
|
|
181
|
+
}, [
|
|
182
|
+
on,
|
|
183
|
+
pickerId,
|
|
184
|
+
isPopoverOpen,
|
|
185
|
+
handleOpenChange
|
|
186
|
+
]);
|
|
187
|
+
useEffect(() => {
|
|
188
|
+
if (isPopoverOpen) emit("popover:open", { menuId: pickerId });
|
|
189
|
+
}, [
|
|
190
|
+
isPopoverOpen,
|
|
191
|
+
emit,
|
|
192
|
+
pickerId
|
|
193
|
+
]);
|
|
194
|
+
const [shouldUpdatePosition, setShouldUpdatePosition] = useState(true);
|
|
195
|
+
useEffect(() => {
|
|
196
|
+
if (isPopoverOpen) {
|
|
197
|
+
setShouldUpdatePosition(true);
|
|
198
|
+
const timerId = window.setTimeout(() => setShouldUpdatePosition(false), 160);
|
|
199
|
+
return () => window.clearTimeout(timerId);
|
|
200
|
+
} else setShouldUpdatePosition(true);
|
|
201
|
+
}, [isPopoverOpen]);
|
|
202
|
+
const { keyboardProps } = useKeyboard({ onKeyDown: (e) => {
|
|
203
|
+
if ((e.key === "ArrowUp" || e.key === "ArrowDown") && !isPopoverOpen) {
|
|
204
|
+
e.preventDefault();
|
|
205
|
+
handleOpenChange(true);
|
|
206
|
+
}
|
|
207
|
+
} });
|
|
208
|
+
const clearValue = useEvent(() => {
|
|
209
|
+
if (selectionMode === "multiple") {
|
|
210
|
+
if (!isControlledMultiple) setInternalSelectedKeys([]);
|
|
211
|
+
onSelectionChange?.([]);
|
|
212
|
+
} else {
|
|
213
|
+
if (!isControlledSingle) setInternalSelectedKey(null);
|
|
214
|
+
onSelectionChange?.(null);
|
|
215
|
+
}
|
|
216
|
+
handleOpenChange(false);
|
|
217
|
+
triggerRef?.current?.focus?.();
|
|
218
|
+
onClear?.();
|
|
219
|
+
return false;
|
|
220
|
+
});
|
|
221
|
+
const triggerContent = useMemo(() => {
|
|
170
222
|
if (typeof renderSummary === "function") {
|
|
171
223
|
if (selectionMode === "single") return renderSummary({
|
|
172
224
|
selectedLabel: selectedLabels[0],
|
|
@@ -181,116 +233,99 @@ const Picker = forwardRef(function Picker(props, ref) {
|
|
|
181
233
|
selectionMode: "multiple"
|
|
182
234
|
});
|
|
183
235
|
} else if (renderSummary === false) return null;
|
|
184
|
-
let content = "";
|
|
185
236
|
if (!hasSelection) return /* @__PURE__ */ jsx(_Text.Placeholder, { children: placeholder });
|
|
186
|
-
else if (selectionMode === "single")
|
|
187
|
-
else if (effectiveSelectedKeys === "all")
|
|
188
|
-
else
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
}
|
|
219
|
-
} });
|
|
220
|
-
useEffect(() => {
|
|
221
|
-
if (state.isOpen) {
|
|
222
|
-
setShouldUpdatePosition(true);
|
|
223
|
-
const id = window.setTimeout(() => setShouldUpdatePosition(false), 160);
|
|
224
|
-
return () => window.clearTimeout(id);
|
|
225
|
-
} else setShouldUpdatePosition(true);
|
|
226
|
-
}, [state.isOpen]);
|
|
227
|
-
let showClearButton = isClearable && hasSelection && !isDisabled && !props.isReadOnly;
|
|
228
|
-
let clearValue = useEvent(() => {
|
|
229
|
-
if (selectionMode === "multiple") {
|
|
230
|
-
if (!isControlledMultiple) setInternalSelectedKeys([]);
|
|
231
|
-
onSelectionChange?.([]);
|
|
232
|
-
} else {
|
|
233
|
-
if (!isControlledSingle) setInternalSelectedKey(null);
|
|
234
|
-
onSelectionChange?.(null);
|
|
235
|
-
}
|
|
236
|
-
if (state.isOpen) state.close();
|
|
237
|
-
triggerRef?.current?.focus?.();
|
|
238
|
-
onClear?.();
|
|
239
|
-
return false;
|
|
240
|
-
});
|
|
241
|
-
return /* @__PURE__ */ jsx(_ItemButton, {
|
|
242
|
-
ref: triggerRef,
|
|
243
|
-
"data-popover-trigger": true,
|
|
244
|
-
id,
|
|
245
|
-
qa: qa || "PickerTrigger",
|
|
246
|
-
type,
|
|
247
|
-
theme: validationState === "invalid" ? "danger" : theme,
|
|
237
|
+
else if (selectionMode === "single") return selectedLabels[0] || null;
|
|
238
|
+
else if (effectiveSelectedKeys === "all") return selectAllLabel;
|
|
239
|
+
else return selectedLabels.join(", ") || null;
|
|
240
|
+
}, [
|
|
241
|
+
renderSummary,
|
|
242
|
+
selectionMode,
|
|
243
|
+
selectedLabels,
|
|
244
|
+
effectiveSelectedKey,
|
|
245
|
+
effectiveSelectedKeys,
|
|
246
|
+
hasSelection,
|
|
247
|
+
placeholder,
|
|
248
|
+
selectAllLabel
|
|
249
|
+
]);
|
|
250
|
+
const showClearButton = isClearable && hasSelection && !isDisabled && !props.isReadOnly;
|
|
251
|
+
const triggerElement = /* @__PURE__ */ jsx(_ItemButton, {
|
|
252
|
+
ref: triggerRef,
|
|
253
|
+
"data-popover-trigger": true,
|
|
254
|
+
id,
|
|
255
|
+
qa: qa || "PickerTrigger",
|
|
256
|
+
type,
|
|
257
|
+
theme: validationState === "invalid" ? "danger" : theme,
|
|
258
|
+
size,
|
|
259
|
+
shape,
|
|
260
|
+
isDisabled: isDisabled || isLoading,
|
|
261
|
+
"data-input-type": "picker",
|
|
262
|
+
mods: {
|
|
263
|
+
placeholder: !hasSelection,
|
|
264
|
+
...externalMods
|
|
265
|
+
},
|
|
266
|
+
icon,
|
|
267
|
+
rightIcon: isLoading ? /* @__PURE__ */ jsx(LoadingIcon, {}) : rightIcon !== void 0 ? rightIcon : showClearButton ? /* @__PURE__ */ jsx(ItemAction, {
|
|
268
|
+
icon: /* @__PURE__ */ jsx(CloseIcon, {}),
|
|
248
269
|
size,
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
270
|
+
theme: validationState === "invalid" ? "danger" : void 0,
|
|
271
|
+
qa: "PickerClearButton",
|
|
272
|
+
mods: { pressed: false },
|
|
273
|
+
onPress: clearValue
|
|
274
|
+
}) : /* @__PURE__ */ jsx(DirectionIcon, { to: isPopoverOpen ? "top" : "bottom" }),
|
|
275
|
+
prefix,
|
|
276
|
+
suffix,
|
|
277
|
+
hotkeys,
|
|
278
|
+
tooltip: triggerTooltip,
|
|
279
|
+
description: triggerDescription,
|
|
280
|
+
descriptionPlacement,
|
|
281
|
+
styles: triggerStyles,
|
|
282
|
+
...keyboardProps,
|
|
283
|
+
"aria-label": `${props["aria-label"] ?? props.label ?? ""}`,
|
|
284
|
+
children: triggerContent
|
|
285
|
+
});
|
|
286
|
+
const handleSelectionChange = useEvent((selection) => {
|
|
287
|
+
if (selectionMode === "single") {
|
|
288
|
+
if (!isControlledSingle) setInternalSelectedKey(selection);
|
|
289
|
+
} else if (!isControlledMultiple) {
|
|
290
|
+
let normalized = selection;
|
|
291
|
+
if (selection === "all") normalized = "all";
|
|
292
|
+
else if (Array.isArray(selection)) normalized = processSelectionArray(selection);
|
|
293
|
+
else if (selection && typeof selection === "object" && selection instanceof Set) normalized = processSelectionArray(selection);
|
|
294
|
+
setInternalSelectedKeys(normalized);
|
|
295
|
+
}
|
|
296
|
+
if (selectionMode === "single") latestSelectionRef.current.single = selection != null ? String(selection) : null;
|
|
297
|
+
else if (selection === "all") latestSelectionRef.current.multiple = [];
|
|
298
|
+
else if (Array.isArray(selection)) latestSelectionRef.current.multiple = processSelectionArray(selection);
|
|
299
|
+
else if (selection && typeof selection === "object" && selection instanceof Set) latestSelectionRef.current.multiple = processSelectionArray(selection);
|
|
300
|
+
else latestSelectionRef.current.multiple = [];
|
|
301
|
+
onSelectionChange?.(selection);
|
|
302
|
+
if (selectionMode === "single") handleOpenChange(false);
|
|
303
|
+
});
|
|
304
|
+
const handleEscape = useEvent(() => {
|
|
305
|
+
handleOpenChange(false);
|
|
306
|
+
});
|
|
307
|
+
const handleOptionClick = useEvent((key) => {
|
|
308
|
+
if (selectionMode === "multiple" && isCheckable || key === "__ALL__") handleOpenChange(false);
|
|
309
|
+
});
|
|
277
310
|
return wrapWithField(/* @__PURE__ */ jsx(PickerWrapper, {
|
|
278
311
|
styles,
|
|
279
312
|
...filterBaseProps(otherProps, { eventProps: true }),
|
|
280
313
|
children: /* @__PURE__ */ jsxs(DialogTrigger, {
|
|
314
|
+
isDismissable: true,
|
|
281
315
|
type: "popover",
|
|
282
316
|
placement: "bottom start",
|
|
317
|
+
isOpen: isPopoverOpen,
|
|
283
318
|
containerPadding,
|
|
284
319
|
shouldUpdatePosition,
|
|
285
320
|
shouldFlip: shouldFlip && shouldUpdatePosition,
|
|
286
|
-
isDismissable: true,
|
|
287
321
|
shouldCloseOnInteractOutside: (el) => {
|
|
288
322
|
const menuTriggerEl = el.closest("[data-popover-trigger]");
|
|
289
323
|
if (!menuTriggerEl) return true;
|
|
290
|
-
if (menuTriggerEl === triggerRef?.current) return true;
|
|
324
|
+
if (menuTriggerEl === triggerRef?.current?.UNSAFE_getDOMNode()) return true;
|
|
291
325
|
return false;
|
|
292
326
|
},
|
|
293
|
-
|
|
327
|
+
onOpenChange: handleOpenChange,
|
|
328
|
+
children: [triggerElement, () => /* @__PURE__ */ jsx(Dialog, {
|
|
294
329
|
qa: "PickerOverlay",
|
|
295
330
|
display: "grid",
|
|
296
331
|
styles: {
|
|
@@ -299,7 +334,7 @@ const Picker = forwardRef(function Picker(props, ref) {
|
|
|
299
334
|
"$overlay-min-width": "30x",
|
|
300
335
|
...popoverStyles
|
|
301
336
|
},
|
|
302
|
-
style:
|
|
337
|
+
style: triggerWidthRef.current ? { "--overlay-min-width": `${triggerWidthRef.current}px` } : void 0,
|
|
303
338
|
children: /* @__PURE__ */ jsx(FocusScope, {
|
|
304
339
|
restoreFocus: true,
|
|
305
340
|
children: /* @__PURE__ */ jsx(ListBox, {
|
|
@@ -333,23 +368,9 @@ const Picker = forwardRef(function Picker(props, ref) {
|
|
|
333
368
|
footerStyles,
|
|
334
369
|
qa: `${props.qa || "Picker"}ListBox`,
|
|
335
370
|
allValueProps,
|
|
336
|
-
onEscape:
|
|
337
|
-
onOptionClick:
|
|
338
|
-
|
|
339
|
-
},
|
|
340
|
-
onSelectionChange: (selection) => {
|
|
341
|
-
if (selectionMode === "single") {
|
|
342
|
-
if (!isControlledSingle) setInternalSelectedKey(selection);
|
|
343
|
-
} else if (!isControlledMultiple) {
|
|
344
|
-
let normalized = selection;
|
|
345
|
-
if (selection === "all") normalized = "all";
|
|
346
|
-
else if (Array.isArray(selection)) normalized = processSelectionArray(selection);
|
|
347
|
-
else if (selection && typeof selection === "object" && selection instanceof Set) normalized = processSelectionArray(selection);
|
|
348
|
-
setInternalSelectedKeys(normalized);
|
|
349
|
-
}
|
|
350
|
-
onSelectionChange?.(selection);
|
|
351
|
-
if (selectionMode === "single") close();
|
|
352
|
-
},
|
|
371
|
+
onEscape: handleEscape,
|
|
372
|
+
onOptionClick: handleOptionClick,
|
|
373
|
+
onSelectionChange: handleSelectionChange,
|
|
353
374
|
children
|
|
354
375
|
})
|
|
355
376
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Picker.js","names":["Text","ItemButton","BaseSection"],"sources":["../../../../src/components/fields/Picker/Picker.tsx"],"sourcesContent":["import { CollectionChildren, FocusableRefValue } from '@react-types/shared';\nimport {\n BASE_STYLES,\n BasePropsWithoutChildren,\n BaseStyleProps,\n COLOR_STYLES,\n ColorStyleProps,\n filterBaseProps,\n OUTER_STYLES,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n ForwardedRef,\n forwardRef,\n MutableRefObject,\n ReactElement,\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { FocusScope, Key, useKeyboard } from 'react-aria';\nimport { Section as BaseSection, ListState, useListState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal';\nimport { useWarn } from '../../../_internal/hooks/use-warn';\nimport { CloseIcon, DirectionIcon, LoadingIcon } from '../../../icons';\nimport { useProviderProps } from '../../../provider';\nimport { generateRandomId } from '../../../utils/random';\nimport { useEventBus } from '../../../utils/react/useEventBus';\nimport { extractStyles } from '../../../utils/styles';\nimport { CubeItemButtonProps, ItemAction, ItemButton } from '../../actions';\nimport { CubeItemProps } from '../../content/Item';\nimport { Text } from '../../content/Text';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\nimport { CubeListBoxProps, ListBox } from '../ListBox/ListBox';\n\nimport type { FieldBaseProps } from '../../../shared';\n\nexport interface CubePickerProps<T>\n extends Omit<CubeListBoxProps<T>, 'size' | 'tooltip' | 'shape'>,\n Omit<CubeItemProps, 'children' | 'size'>,\n BasePropsWithoutChildren,\n BaseStyleProps,\n OuterStyleProps,\n ColorStyleProps,\n Omit<FieldBaseProps, 'tooltip'>,\n Pick<\n CubeItemButtonProps,\n | 'type'\n | 'theme'\n | 'icon'\n | 'rightIcon'\n | 'prefix'\n | 'suffix'\n | 'hotkeys'\n | 'shape'\n > {\n /** Placeholder text when no selection is made */\n placeholder?: string;\n /** Size of the picker component */\n size?: 'small' | 'medium' | 'large';\n /** Custom styles for the list box popover */\n listBoxStyles?: Styles;\n /** Custom styles for the popover container */\n popoverStyles?: Styles;\n /** Custom styles for the trigger button */\n triggerStyles?: Styles;\n /** Whether to show checkboxes for multiple selection mode */\n isCheckable?: boolean;\n /** Whether to flip the popover placement */\n shouldFlip?: boolean;\n /** Minimum padding in pixels between the popover and viewport edges */\n containerPadding?: number;\n /** Tooltip for the trigger button (separate from field tooltip) */\n triggerTooltip?: CubeItemProps['tooltip'];\n /** Description for the trigger button (separate from field description) */\n triggerDescription?: CubeItemProps['description'];\n\n /**\n * Custom renderer for the summary shown inside the trigger when there is a selection.\n *\n * For `selectionMode=\"multiple\"` the function receives:\n * - `selectedLabels`: array of labels of the selected items.\n * - `selectedKeys`: array of keys of the selected items or \"all\".\n *\n * For `selectionMode=\"single\"` the function receives:\n * - `selectedLabel`: label of the selected item.\n * - `selectedKey`: key of the selected item.\n *\n * The function should return a `ReactNode` that will be rendered inside the trigger.\n * Set to `false` to hide the summary text completely.\n */\n renderSummary?:\n | ((args: {\n selectedLabels?: string[];\n selectedKeys?: 'all' | (string | number)[];\n selectedLabel?: string;\n selectedKey?: string | number | null;\n selectionMode?: 'single' | 'multiple';\n }) => ReactNode)\n | false;\n\n /** Ref to access internal ListBox state */\n listStateRef?: MutableRefObject<ListState<T>>;\n /** Additional modifiers for styling the Picker */\n mods?: Record<string, boolean>;\n /** Whether the picker is clearable using a clear button in the rightIcon slot */\n isClearable?: boolean;\n /** Callback called when the clear button is pressed */\n onClear?: () => void;\n /**\n * Sort selected item(s) to the top when the popover opens.\n * Only works when using the `items` prop (data-driven mode).\n * Supports both single and multiple selection modes.\n * @default true when items are provided, false when using JSX children\n */\n sortSelectedToTop?: boolean;\n /** Callback called when the popover open state changes */\n onOpenChange?: (isOpen: boolean) => void;\n}\n\nconst PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];\n\nconst PickerWrapper = tasty({\n qa: 'PickerWrapper',\n styles: {\n display: 'inline-grid',\n flow: 'column',\n gridRows: '1sf',\n placeContent: 'stretch',\n placeItems: 'stretch',\n },\n});\n\nexport const Picker = forwardRef(function Picker<T extends object>(\n props: CubePickerProps<T>,\n ref: ForwardedRef<HTMLElement>,\n) {\n props = useProviderProps(props);\n props = useFormProps(props);\n props = useFieldProps(props, {\n valuePropsMapper: ({ value, onChange }) => {\n const fieldProps: Record<string, unknown> = {};\n\n if (props.selectionMode === 'multiple') {\n fieldProps.selectedKeys = value || [];\n } else {\n fieldProps.selectedKey = value ?? null;\n }\n\n fieldProps.onSelectionChange = (key: Key | null | 'all' | Key[]) => {\n if (props.selectionMode === 'multiple') {\n // Handle \"all\" selection and array selections\n if (key === 'all') {\n onChange('all');\n } else {\n onChange(key ? (Array.isArray(key) ? key : [key]) : []);\n }\n } else {\n onChange(Array.isArray(key) ? key[0] : key);\n }\n };\n\n return fieldProps;\n },\n });\n\n let {\n id,\n qa,\n label,\n extra,\n icon,\n rightIcon,\n prefix,\n suffix,\n hotkeys,\n triggerTooltip,\n triggerDescription,\n labelStyles,\n isRequired,\n necessityIndicator,\n validationState,\n isDisabled,\n isLoading,\n message,\n mods: externalMods,\n description,\n descriptionPlacement,\n placeholder,\n size = 'medium',\n styles,\n listBoxStyles,\n popoverStyles,\n type = 'outline',\n theme = 'default',\n shape,\n labelSuffix,\n shouldFocusWrap,\n children,\n shouldFlip = true,\n containerPadding = 8,\n selectedKey,\n defaultSelectedKey,\n selectedKeys,\n defaultSelectedKeys,\n disabledKeys,\n onSelectionChange,\n selectionMode = 'single',\n listStateRef,\n focusOnHover,\n showSelectAll,\n selectAllLabel = 'All',\n items,\n header,\n footer,\n headerStyles,\n footerStyles,\n triggerStyles,\n renderSummary,\n isCheckable,\n allValueProps,\n listStyles,\n optionStyles,\n sectionStyles,\n headingStyles,\n listRef,\n disallowEmptySelection,\n shouldUseVirtualFocus,\n onEscape,\n onOptionClick,\n isClearable,\n onClear,\n sortSelectedToTop,\n onOpenChange,\n listStateRef: externalListStateRef,\n ...otherProps\n } = props;\n\n styles = extractStyles(otherProps, PROP_STYLES, styles);\n\n // Generate a unique ID for this Picker instance\n const pickerId = useMemo(() => generateRandomId(), []);\n\n // Get event bus for menu synchronization\n const { emit, on } = useEventBus();\n\n // Warn if isCheckable is false in single selection mode\n useWarn(isCheckable === false && selectionMode === 'single', {\n key: ['picker-checkable-single-mode'],\n args: [\n 'CubeUIKit: isCheckable=false is not recommended in single selection mode as it may confuse users about selection behavior.',\n ],\n });\n\n // Internal selection state (uncontrolled scenario)\n const [internalSelectedKey, setInternalSelectedKey] = useState<Key | null>(\n defaultSelectedKey ?? null,\n );\n const [internalSelectedKeys, setInternalSelectedKeys] = useState<\n 'all' | Key[]\n >(defaultSelectedKeys ?? []);\n\n // Track popover open/close and capture children order for session\n const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n const triggerRef = useRef<FocusableRefValue<HTMLButtonElement>>(null);\n\n const isControlledSingle = selectedKey !== undefined;\n const isControlledMultiple = selectedKeys !== undefined;\n\n const effectiveSelectedKey = isControlledSingle\n ? selectedKey\n : internalSelectedKey;\n const effectiveSelectedKeys = isControlledMultiple\n ? selectedKeys\n : internalSelectedKeys;\n\n // Given an iterable of keys (array or Set) toggle membership for duplicates\n const processSelectionArray = (iterable: Iterable<Key>): string[] => {\n const resultSet = new Set<string>();\n for (const key of iterable) {\n const nKey = String(key);\n if (resultSet.has(nKey)) {\n resultSet.delete(nKey); // toggle off if clicked twice\n } else {\n resultSet.add(nKey); // select\n }\n }\n return Array.from(resultSet);\n };\n\n // Ref to access internal ListBox state for collection API\n const internalListStateRef = useRef<ListState<T>>(null);\n\n // Sync internal ref with external ref if provided\n useEffect(() => {\n if (externalListStateRef && internalListStateRef.current) {\n externalListStateRef.current = internalListStateRef.current;\n }\n }, [externalListStateRef]);\n\n // Cache for sorted items array when using `items` prop\n const cachedItemsOrder = useRef<T[] | null>(null);\n const selectionWhenClosed = useRef<{\n single: string | null;\n multiple: string[];\n }>({ single: null, multiple: [] });\n\n // Track if sortSelectedToTop was explicitly provided\n const sortSelectedToTopExplicit = sortSelectedToTop !== undefined;\n // Default to true if items are provided, false otherwise\n const shouldSortSelectedToTop = sortSelectedToTop ?? (items ? true : false);\n\n // Invalidate cache when items change\n useEffect(() => {\n cachedItemsOrder.current = null;\n }, [items]);\n\n // Capture selection when popover closes\n useEffect(() => {\n if (!isPopoverOpen) {\n selectionWhenClosed.current = {\n single:\n effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,\n multiple:\n selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'\n ? (effectiveSelectedKeys || []).map(String)\n : [],\n };\n cachedItemsOrder.current = null;\n }\n }, [\n isPopoverOpen,\n effectiveSelectedKey,\n effectiveSelectedKeys,\n selectionMode,\n ]);\n\n // Call onOpenChange when popover state changes\n useEffect(() => {\n onOpenChange?.(isPopoverOpen);\n }, [isPopoverOpen]);\n\n // Sort items with selected on top if enabled\n const getSortedItems = useCallback((): typeof items => {\n if (!items || !shouldSortSelectedToTop) return items;\n\n // Reuse cached order if available\n if (cachedItemsOrder.current) {\n return cachedItemsOrder.current;\n }\n\n // Warn if explicitly requested but JSX children used\n if (sortSelectedToTopExplicit && !items) {\n console.warn(\n 'Picker: sortSelectedToTop only works with the items prop. ' +\n 'Sorting will be skipped when using JSX children.',\n );\n return items;\n }\n\n const selectedKeys = new Set<string>();\n\n if (selectionMode === 'multiple') {\n // Don't sort when \"all\" is selected\n if (\n selectionWhenClosed.current.multiple.length === 0 ||\n effectiveSelectedKeys === 'all'\n ) {\n return items;\n }\n selectionWhenClosed.current.multiple.forEach((k) => selectedKeys.add(k));\n } else if (selectionWhenClosed.current.single) {\n selectedKeys.add(selectionWhenClosed.current.single);\n }\n\n if (selectedKeys.size === 0) return items;\n\n const itemsArray = Array.isArray(items) ? items : Array.from(items);\n const selectedItems: T[] = [];\n const unselectedItems: T[] = [];\n\n itemsArray.forEach((item) => {\n const key = (item as any)?.key ?? (item as any)?.id;\n if (key != null && selectedKeys.has(String(key))) {\n selectedItems.push(item);\n } else {\n unselectedItems.push(item);\n }\n });\n\n const sorted = [...selectedItems, ...unselectedItems];\n\n if (isPopoverOpen) {\n cachedItemsOrder.current = sorted;\n }\n\n return sorted;\n }, [\n items,\n shouldSortSelectedToTop,\n sortSelectedToTopExplicit,\n selectionMode,\n effectiveSelectedKeys,\n isPopoverOpen,\n ]);\n\n const finalItems = getSortedItems();\n\n // Create local collection state for reading item data (labels, etc.)\n // This allows us to read item labels even before the popover opens\n const localCollectionState = useListState({\n children,\n items: finalItems, // Use sorted items to match what's shown in popover\n selectionMode: 'none', // Don't manage selection in this state\n });\n\n // Helper to get label from local collection\n const getItemLabel = useCallback(\n (key: Key): string => {\n const item = localCollectionState?.collection?.getItem(key);\n return item?.textValue || String(key);\n },\n [localCollectionState?.collection],\n );\n\n const selectedLabels = useMemo(() => {\n const keysToGet =\n selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'\n ? effectiveSelectedKeys || []\n : effectiveSelectedKey != null\n ? [effectiveSelectedKey]\n : [];\n\n // Handle \"all\" selection\n if (selectionMode === 'multiple' && effectiveSelectedKeys === 'all') {\n if (!localCollectionState?.collection) return [];\n const labels: string[] = [];\n for (const item of localCollectionState.collection) {\n if (item.type === 'item') {\n labels.push(item.textValue || String(item.key));\n }\n }\n return labels;\n }\n\n // Get labels for selected keys\n return keysToGet.map((key) => getItemLabel(key)).filter(Boolean);\n }, [\n selectionMode,\n effectiveSelectedKeys,\n effectiveSelectedKey,\n getItemLabel,\n localCollectionState?.collection,\n ]);\n\n const hasSelection = selectedLabels.length > 0;\n\n const renderTriggerContent = () => {\n // When there is a selection and a custom summary renderer is provided – use it.\n if (typeof renderSummary === 'function') {\n if (selectionMode === 'single') {\n return renderSummary({\n selectedLabel: selectedLabels[0],\n selectedKey: effectiveSelectedKey ?? null,\n selectedLabels,\n selectedKeys: effectiveSelectedKeys,\n selectionMode: 'single',\n });\n }\n\n return renderSummary({\n selectedLabels,\n selectedKeys: effectiveSelectedKeys,\n selectionMode: 'multiple',\n });\n } else if (renderSummary === false) {\n return null;\n }\n\n let content: ReactNode = '';\n\n if (!hasSelection) {\n return <Text.Placeholder>{placeholder}</Text.Placeholder>;\n } else if (selectionMode === 'single') {\n content = selectedLabels[0];\n } else if (effectiveSelectedKeys === 'all') {\n content = selectAllLabel;\n } else {\n content = selectedLabels.join(', ');\n }\n\n if (!content) {\n return null;\n }\n\n return content;\n };\n\n const [shouldUpdatePosition, setShouldUpdatePosition] = useState(true);\n\n // Capture trigger width for overlay min-width\n const triggerWidth = triggerRef?.current?.UNSAFE_getDOMNode()?.offsetWidth;\n\n // The trigger is rendered as a function so we can access the dialog state\n const renderTrigger = (state) => {\n // Listen for other menus opening and close this one if needed\n useEffect(() => {\n const unsubscribe = on('popover:open', (data: { menuId: string }) => {\n // If another menu is opening and this Picker is open, close this one\n if (data.menuId !== pickerId && state.isOpen) {\n state.close();\n }\n });\n\n return unsubscribe;\n }, [on, pickerId, state]);\n\n // Emit event when this Picker opens\n useEffect(() => {\n if (state.isOpen) {\n emit('popover:open', { menuId: pickerId });\n }\n }, [state.isOpen, emit, pickerId]);\n\n // Track popover open/close state to control sorting\n useEffect(() => {\n if (state.isOpen !== isPopoverOpen) {\n setIsPopoverOpen(state.isOpen);\n }\n }, [state.isOpen, isPopoverOpen]);\n\n // Add keyboard support for arrow keys to open the popover\n const { keyboardProps } = useKeyboard({\n onKeyDown: (e) => {\n if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !state.isOpen) {\n e.preventDefault();\n state.open();\n }\n },\n });\n\n useEffect(() => {\n // Allow initial positioning & flipping when opening, then lock placement after transition\n // Popover transition is ~120ms, give it a bit more time to finalize placement\n if (state.isOpen) {\n setShouldUpdatePosition(true);\n const id = window.setTimeout(() => setShouldUpdatePosition(false), 160);\n return () => window.clearTimeout(id);\n } else {\n setShouldUpdatePosition(true);\n }\n }, [state.isOpen]);\n\n // Clear button logic\n let showClearButton =\n isClearable && hasSelection && !isDisabled && !props.isReadOnly;\n\n // Clear function\n let clearValue = useEvent(() => {\n if (selectionMode === 'multiple') {\n if (!isControlledMultiple) {\n setInternalSelectedKeys([]);\n }\n onSelectionChange?.([]);\n } else {\n if (!isControlledSingle) {\n setInternalSelectedKey(null);\n }\n onSelectionChange?.(null);\n }\n\n if (state.isOpen) {\n state.close();\n }\n\n triggerRef?.current?.focus?.();\n\n onClear?.();\n\n return false;\n });\n\n return (\n <ItemButton\n ref={triggerRef as any}\n data-popover-trigger\n id={id}\n qa={qa || 'PickerTrigger'}\n type={type}\n theme={validationState === 'invalid' ? 'danger' : theme}\n size={size}\n shape={shape}\n isDisabled={isDisabled || isLoading}\n data-input-type=\"picker\"\n mods={{\n placeholder: !hasSelection,\n ...externalMods,\n }}\n icon={icon}\n rightIcon={\n isLoading ? (\n <LoadingIcon />\n ) : rightIcon !== undefined ? (\n rightIcon\n ) : showClearButton ? (\n <ItemAction\n icon={<CloseIcon />}\n size={size}\n theme={validationState === 'invalid' ? 'danger' : undefined}\n qa=\"PickerClearButton\"\n mods={{ pressed: false }}\n onPress={clearValue}\n />\n ) : (\n <DirectionIcon to={state.isOpen ? 'top' : 'bottom'} />\n )\n }\n prefix={prefix}\n suffix={suffix}\n hotkeys={hotkeys}\n tooltip={triggerTooltip}\n description={triggerDescription}\n descriptionPlacement={descriptionPlacement}\n styles={triggerStyles}\n {...keyboardProps}\n aria-label={`${props['aria-label'] ?? props.label ?? ''}`}\n >\n {renderTriggerContent()}\n </ItemButton>\n );\n };\n\n const pickerField = (\n <PickerWrapper\n styles={styles}\n {...filterBaseProps(otherProps, { eventProps: true })}\n >\n <DialogTrigger\n type=\"popover\"\n placement=\"bottom start\"\n containerPadding={containerPadding}\n shouldUpdatePosition={shouldUpdatePosition}\n shouldFlip={shouldFlip && shouldUpdatePosition}\n isDismissable={true}\n shouldCloseOnInteractOutside={(el) => {\n const menuTriggerEl = el.closest('[data-popover-trigger]');\n // If no menu trigger was clicked, allow closing\n if (!menuTriggerEl) return true;\n // If the same trigger that opened this popover was clicked, allow closing (toggle)\n if (menuTriggerEl === (triggerRef as any)?.current) return true;\n // Otherwise, don't close here. Let the event bus handle closing when the other opens.\n return false;\n }}\n >\n {renderTrigger}\n {(close) => (\n <Dialog\n qa=\"PickerOverlay\"\n display=\"grid\"\n styles={{\n gridRows: '1sf',\n width: 'max($overlay-min-width, 30x) max-content 50vw',\n '$overlay-min-width': '30x',\n ...popoverStyles,\n }}\n style={\n triggerWidth\n ? ({ '--overlay-min-width': `${triggerWidth}px` } as any)\n : undefined\n }\n >\n <FocusScope restoreFocus>\n <ListBox\n autoFocus\n items={items ? (finalItems as typeof props.items) : undefined}\n // Pass an aria-label so the internal ListBox is properly labeled and React Aria doesn't warn.\n aria-label={`${props['aria-label'] ?? props.label ?? ''} Picker`}\n selectedKey={\n selectionMode === 'single' ? effectiveSelectedKey : undefined\n }\n selectedKeys={\n selectionMode === 'multiple'\n ? effectiveSelectedKeys\n : undefined\n }\n listStyles={listStyles}\n optionStyles={optionStyles}\n sectionStyles={sectionStyles}\n headingStyles={headingStyles}\n listRef={listRef}\n disallowEmptySelection={disallowEmptySelection}\n disabledKeys={disabledKeys}\n focusOnHover={focusOnHover}\n shouldFocusWrap={shouldFocusWrap}\n selectionMode={selectionMode}\n validationState={validationState}\n isDisabled={isDisabled}\n isLoading={isLoading}\n stateRef={internalListStateRef}\n isCheckable={isCheckable}\n shape=\"popover\"\n size=\"medium\"\n showSelectAll={showSelectAll}\n selectAllLabel={selectAllLabel}\n header={header}\n footer={footer}\n headerStyles={headerStyles}\n footerStyles={footerStyles}\n qa={`${props.qa || 'Picker'}ListBox`}\n allValueProps={allValueProps}\n onEscape={() => close()}\n onOptionClick={(key) => {\n // For Picker, clicking the content area should close the popover\n // in multiple selection mode (single mode already closes via onSelectionChange)\n if (\n (selectionMode === 'multiple' && isCheckable) ||\n key === '__ALL__'\n ) {\n close();\n }\n }}\n onSelectionChange={(selection) => {\n // No need to change any flags - children order is cached\n\n // Update internal state if uncontrolled\n if (selectionMode === 'single') {\n if (!isControlledSingle) {\n setInternalSelectedKey(selection as Key | null);\n }\n } else {\n if (!isControlledMultiple) {\n let normalized: 'all' | Key[] = selection as\n | 'all'\n | Key[];\n\n if (selection === 'all') {\n normalized = 'all';\n } else if (Array.isArray(selection)) {\n normalized = processSelectionArray(selection);\n } else if (\n selection &&\n typeof selection === 'object' &&\n (selection as any) instanceof Set\n ) {\n normalized = processSelectionArray(\n selection as Set<Key>,\n );\n }\n\n setInternalSelectedKeys(normalized);\n }\n }\n\n onSelectionChange?.(selection);\n\n if (selectionMode === 'single') {\n close();\n }\n }}\n >\n {children as CollectionChildren<T>}\n </ListBox>\n </FocusScope>\n </Dialog>\n )}\n </DialogTrigger>\n </PickerWrapper>\n );\n\n return wrapWithField<Omit<CubePickerProps<T>, 'children' | 'tooltip'>>(\n pickerField,\n ref as any,\n props,\n );\n}) as unknown as (<T>(\n props: CubePickerProps<T> & { ref?: ForwardedRef<HTMLElement> },\n) => ReactElement) & { Item: typeof ListBox.Item; Section: typeof BaseSection };\n\nPicker.Item = ListBox.Item;\n\nPicker.Section = BaseSection;\n\nObject.defineProperty(Picker, 'cubeInputType', {\n value: 'Picker',\n enumerable: false,\n configurable: false,\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Picker.js","names":["Text","ItemButton","BaseSection"],"sources":["../../../../src/components/fields/Picker/Picker.tsx"],"sourcesContent":["import { CollectionChildren, FocusableRefValue } from '@react-types/shared';\nimport {\n BASE_STYLES,\n BasePropsWithoutChildren,\n BaseStyleProps,\n COLOR_STYLES,\n ColorStyleProps,\n filterBaseProps,\n OUTER_STYLES,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n ForwardedRef,\n forwardRef,\n MutableRefObject,\n ReactElement,\n ReactNode,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { FocusScope, Key, useKeyboard } from 'react-aria';\nimport { Section as BaseSection, ListState, useListState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal';\nimport { useWarn } from '../../../_internal/hooks/use-warn';\nimport { CloseIcon, DirectionIcon, LoadingIcon } from '../../../icons';\nimport { useProviderProps } from '../../../provider';\nimport { generateRandomId } from '../../../utils/random';\nimport { useEventBus } from '../../../utils/react/useEventBus';\nimport { processSelectionArray } from '../../../utils/selection';\nimport { extractStyles } from '../../../utils/styles';\nimport { CubeItemButtonProps, ItemAction, ItemButton } from '../../actions';\nimport { CubeItemProps } from '../../content/Item';\nimport { Text } from '../../content/Text';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\nimport { CubeListBoxProps, ListBox } from '../ListBox/ListBox';\n\nimport type { FieldBaseProps } from '../../../shared';\n\nexport interface CubePickerProps<T>\n extends Omit<CubeListBoxProps<T>, 'size' | 'tooltip' | 'shape'>,\n Omit<CubeItemProps, 'children' | 'size'>,\n BasePropsWithoutChildren,\n BaseStyleProps,\n OuterStyleProps,\n ColorStyleProps,\n Omit<FieldBaseProps, 'tooltip'>,\n Pick<\n CubeItemButtonProps,\n | 'type'\n | 'theme'\n | 'icon'\n | 'rightIcon'\n | 'prefix'\n | 'suffix'\n | 'hotkeys'\n | 'shape'\n > {\n /** Placeholder text when no selection is made */\n placeholder?: string;\n /** Size of the picker component */\n size?: 'small' | 'medium' | 'large';\n /** Custom styles for the list box popover */\n listBoxStyles?: Styles;\n /** Custom styles for the popover container */\n popoverStyles?: Styles;\n /** Custom styles for the trigger button */\n triggerStyles?: Styles;\n /** Whether to show checkboxes for multiple selection mode */\n isCheckable?: boolean;\n /** Whether to flip the popover placement */\n shouldFlip?: boolean;\n /** Minimum padding in pixels between the popover and viewport edges */\n containerPadding?: number;\n /** Tooltip for the trigger button (separate from field tooltip) */\n triggerTooltip?: CubeItemProps['tooltip'];\n /** Description for the trigger button (separate from field description) */\n triggerDescription?: CubeItemProps['description'];\n\n /**\n * Custom renderer for the summary shown inside the trigger when there is a selection.\n *\n * For `selectionMode=\"multiple\"` the function receives:\n * - `selectedLabels`: array of labels of the selected items.\n * - `selectedKeys`: array of keys of the selected items or \"all\".\n *\n * For `selectionMode=\"single\"` the function receives:\n * - `selectedLabel`: label of the selected item.\n * - `selectedKey`: key of the selected item.\n *\n * The function should return a `ReactNode` that will be rendered inside the trigger.\n * Set to `false` to hide the summary text completely.\n */\n renderSummary?:\n | ((args: {\n selectedLabels?: string[];\n selectedKeys?: 'all' | (string | number)[];\n selectedLabel?: string;\n selectedKey?: string | number | null;\n selectionMode?: 'single' | 'multiple';\n }) => ReactNode)\n | false;\n\n /** Ref to access internal ListBox state */\n listStateRef?: MutableRefObject<ListState<T>>;\n /** Additional modifiers for styling the Picker */\n mods?: Record<string, boolean>;\n /** Whether the picker is clearable using a clear button in the rightIcon slot */\n isClearable?: boolean;\n /** Callback called when the clear button is pressed */\n onClear?: () => void;\n /**\n * Sort selected item(s) to the top when the popover opens.\n * Only works when using the `items` prop (data-driven mode).\n * Supports both single and multiple selection modes.\n * @default true when items are provided, false when using JSX children\n */\n sortSelectedToTop?: boolean;\n /** Callback called when the popover open state changes */\n onOpenChange?: (isOpen: boolean) => void;\n}\n\nconst PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];\n\nconst PickerWrapper = tasty({\n qa: 'PickerWrapper',\n styles: {\n display: 'inline-grid',\n flow: 'column',\n gridRows: '1sf',\n placeContent: 'stretch',\n placeItems: 'stretch',\n },\n});\n\nexport const Picker = forwardRef(function Picker<T extends object>(\n props: CubePickerProps<T>,\n ref: ForwardedRef<HTMLElement>,\n) {\n props = useProviderProps(props);\n props = useFormProps(props);\n props = useFieldProps(props, {\n valuePropsMapper: ({ value, onChange }) => {\n const fieldProps: Record<string, unknown> = {};\n\n if (props.selectionMode === 'multiple') {\n fieldProps.selectedKeys = value || [];\n } else {\n fieldProps.selectedKey = value ?? null;\n }\n\n fieldProps.onSelectionChange = (key: Key | null | 'all' | Key[]) => {\n if (props.selectionMode === 'multiple') {\n // Handle \"all\" selection and array selections\n if (key === 'all') {\n onChange('all');\n } else {\n onChange(key ? (Array.isArray(key) ? key : [key]) : []);\n }\n } else {\n onChange(Array.isArray(key) ? key[0] : key);\n }\n };\n\n return fieldProps;\n },\n });\n\n let {\n id,\n qa,\n label,\n extra,\n icon,\n rightIcon,\n prefix,\n suffix,\n hotkeys,\n triggerTooltip,\n triggerDescription,\n labelStyles,\n isRequired,\n necessityIndicator,\n validationState,\n isDisabled,\n isLoading,\n message,\n mods: externalMods,\n description,\n descriptionPlacement,\n placeholder,\n size = 'medium',\n styles,\n listBoxStyles,\n popoverStyles,\n type = 'outline',\n theme = 'default',\n shape,\n labelSuffix,\n shouldFocusWrap,\n children,\n shouldFlip = true,\n containerPadding = 8,\n selectedKey,\n defaultSelectedKey,\n selectedKeys,\n defaultSelectedKeys,\n disabledKeys,\n onSelectionChange,\n selectionMode = 'single',\n listStateRef,\n focusOnHover,\n showSelectAll,\n selectAllLabel = 'All',\n items,\n header,\n footer,\n headerStyles,\n footerStyles,\n triggerStyles,\n renderSummary,\n isCheckable,\n allValueProps,\n listStyles,\n optionStyles,\n sectionStyles,\n headingStyles,\n listRef,\n disallowEmptySelection,\n shouldUseVirtualFocus,\n onEscape,\n onOptionClick,\n isClearable,\n onClear,\n sortSelectedToTop,\n onOpenChange,\n listStateRef: externalListStateRef,\n ...otherProps\n } = props;\n\n styles = extractStyles(otherProps, PROP_STYLES, styles);\n\n // Generate a unique ID for this Picker instance\n const pickerId = useMemo(() => generateRandomId(), []);\n\n // Get event bus for menu synchronization\n const { emit, on } = useEventBus();\n\n // Warn if isCheckable is false in single selection mode\n useWarn(isCheckable === false && selectionMode === 'single', {\n key: ['picker-checkable-single-mode'],\n args: [\n 'CubeUIKit: isCheckable=false is not recommended in single selection mode as it may confuse users about selection behavior.',\n ],\n });\n\n // Internal selection state (uncontrolled scenario)\n const [internalSelectedKey, setInternalSelectedKey] = useState<Key | null>(\n defaultSelectedKey ?? null,\n );\n const [internalSelectedKeys, setInternalSelectedKeys] = useState<\n 'all' | Key[]\n >(defaultSelectedKeys ?? []);\n\n // Popover state — used as controlled prop for DialogTrigger\n const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n const triggerRef = useRef<FocusableRefValue<HTMLButtonElement>>(null);\n // Measured lazily on popover open instead of on every render\n const triggerWidthRef = useRef<number | undefined>(undefined);\n\n const isControlledSingle = selectedKey !== undefined;\n const isControlledMultiple = selectedKeys !== undefined;\n\n const effectiveSelectedKey = isControlledSingle\n ? selectedKey\n : internalSelectedKey;\n const effectiveSelectedKeys = isControlledMultiple\n ? selectedKeys\n : internalSelectedKeys;\n\n // Ref to access internal ListBox state for collection API\n const internalListStateRef = useRef<ListState<T>>(null);\n\n // Sync internal ref with external ref if provided\n useEffect(() => {\n if (externalListStateRef && internalListStateRef.current) {\n externalListStateRef.current = internalListStateRef.current;\n }\n }, [externalListStateRef]);\n\n // Cache for sorted items array when using `items` prop\n const cachedItemsOrder = useRef<T[] | null>(null);\n\n const latestSelectionRef = useRef<{\n single: string | null;\n multiple: string[];\n }>({\n single: effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,\n multiple:\n selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'\n ? (effectiveSelectedKeys || []).map(String)\n : [],\n });\n\n useEffect(() => {\n latestSelectionRef.current = {\n single:\n effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,\n multiple:\n selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'\n ? (effectiveSelectedKeys || []).map(String)\n : [],\n };\n }, [effectiveSelectedKey, effectiveSelectedKeys, selectionMode]);\n\n const selectionWhenClosed = useRef<{\n single: string | null;\n multiple: string[];\n }>({ single: null, multiple: [] });\n\n const sortSelectedToTopExplicit = sortSelectedToTop !== undefined;\n const shouldSortSelectedToTop = sortSelectedToTop ?? (items ? true : false);\n\n useWarn(sortSelectedToTopExplicit && shouldSortSelectedToTop && !items, {\n key: ['picker-sort-selected-to-top-children'],\n args: [\n 'Picker: sortSelectedToTop only works with the items prop. Sorting will be skipped when using JSX children.',\n ],\n });\n\n useEffect(() => {\n cachedItemsOrder.current = null;\n }, [items]);\n\n useEffect(() => {\n if (!isPopoverOpen) {\n selectionWhenClosed.current = {\n single:\n effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,\n multiple:\n selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'\n ? (effectiveSelectedKeys || []).map(String)\n : [],\n };\n }\n }, [\n effectiveSelectedKey,\n effectiveSelectedKeys,\n isPopoverOpen,\n selectionMode,\n ]);\n\n const finalItems = useMemo(() => {\n if (!items || !shouldSortSelectedToTop) return items;\n if (!isPopoverOpen) return items;\n if (cachedItemsOrder.current) return cachedItemsOrder.current;\n\n const selectedKeySet = new Set<string>();\n\n if (selectionMode === 'multiple') {\n if (\n selectionWhenClosed.current.multiple.length === 0 ||\n effectiveSelectedKeys === 'all'\n ) {\n return items;\n }\n selectionWhenClosed.current.multiple.forEach((k) =>\n selectedKeySet.add(k),\n );\n } else if (selectionWhenClosed.current.single) {\n selectedKeySet.add(selectionWhenClosed.current.single);\n }\n\n if (selectedKeySet.size === 0) return items;\n\n const itemsArray = Array.isArray(items) ? items : Array.from(items);\n const selectedItems: T[] = [];\n const unselectedItems: T[] = [];\n\n itemsArray.forEach((item) => {\n const key = (item as any)?.key ?? (item as any)?.id;\n if (key != null && selectedKeySet.has(String(key))) {\n selectedItems.push(item);\n } else {\n unselectedItems.push(item);\n }\n });\n\n const sorted = [...selectedItems, ...unselectedItems];\n\n cachedItemsOrder.current = sorted;\n\n return sorted;\n }, [items, shouldSortSelectedToTop, selectionMode, isPopoverOpen]);\n\n // Create local collection state for reading item data (labels, etc.)\n // This allows us to read item labels even before the popover opens\n const localCollectionState = useListState({\n children,\n items: finalItems, // Use sorted items to match what's shown in popover\n selectionMode: 'none', // Don't manage selection in this state\n });\n\n const selectedLabels = useMemo(() => {\n const collection = localCollectionState?.collection;\n\n if (selectionMode === 'multiple' && effectiveSelectedKeys === 'all') {\n if (!collection) return [];\n const labels: string[] = [];\n for (const item of collection) {\n if (item.type === 'item') {\n labels.push(item.textValue || String(item.key));\n }\n }\n return labels;\n }\n\n const keysToGet =\n selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'\n ? effectiveSelectedKeys || []\n : effectiveSelectedKey != null\n ? [effectiveSelectedKey]\n : [];\n\n return keysToGet\n .map((key) => {\n const item = collection?.getItem(key);\n return item?.textValue || String(key);\n })\n .filter(Boolean);\n }, [\n selectionMode,\n effectiveSelectedKeys,\n effectiveSelectedKey,\n localCollectionState?.collection,\n ]);\n\n const hasSelection = selectedLabels.length > 0;\n\n // ---------------------------------------------------------------------------\n // Popover lifecycle — all effects moved out of the inline renderTrigger\n // function so they have a stable component identity and don't tear\n // down/setup on every parent re-render.\n // DialogTrigger is controlled via isOpen/onOpenChange.\n // ---------------------------------------------------------------------------\n\n const handleOpenChange = useEvent((isOpen: boolean) => {\n if (isOpen === isPopoverOpen) return;\n\n if (isOpen) {\n triggerWidthRef.current =\n triggerRef?.current?.UNSAFE_getDOMNode()?.offsetWidth;\n }\n setIsPopoverOpen(isOpen);\n if (!isOpen) {\n selectionWhenClosed.current = { ...latestSelectionRef.current };\n cachedItemsOrder.current = null;\n }\n onOpenChange?.(isOpen);\n });\n\n // Close this picker when another menu opens (event bus)\n useEffect(() => {\n return on('popover:open', (data: { menuId: string }) => {\n if (data.menuId !== pickerId && isPopoverOpen) {\n handleOpenChange(false);\n }\n });\n }, [on, pickerId, isPopoverOpen, handleOpenChange]);\n\n // Emit event when this picker opens\n useEffect(() => {\n if (isPopoverOpen) {\n emit('popover:open', { menuId: pickerId });\n }\n }, [isPopoverOpen, emit, pickerId]);\n\n // Position update management\n const [shouldUpdatePosition, setShouldUpdatePosition] = useState(true);\n\n useEffect(() => {\n if (isPopoverOpen) {\n setShouldUpdatePosition(true);\n const timerId = window.setTimeout(\n () => setShouldUpdatePosition(false),\n 160,\n );\n return () => window.clearTimeout(timerId);\n } else {\n setShouldUpdatePosition(true);\n }\n }, [isPopoverOpen]);\n\n // Keyboard handler for arrow keys to open popover\n const { keyboardProps } = useKeyboard({\n onKeyDown: (e) => {\n if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !isPopoverOpen) {\n e.preventDefault();\n handleOpenChange(true);\n }\n },\n });\n\n // Clear handler\n const clearValue = useEvent(() => {\n if (selectionMode === 'multiple') {\n if (!isControlledMultiple) {\n setInternalSelectedKeys([]);\n }\n onSelectionChange?.([]);\n } else {\n if (!isControlledSingle) {\n setInternalSelectedKey(null);\n }\n onSelectionChange?.(null);\n }\n\n handleOpenChange(false);\n triggerRef?.current?.focus?.();\n onClear?.();\n\n return false;\n });\n\n // ---------------------------------------------------------------------------\n // Trigger content\n // ---------------------------------------------------------------------------\n\n const triggerContent = useMemo((): ReactNode => {\n if (typeof renderSummary === 'function') {\n if (selectionMode === 'single') {\n return renderSummary({\n selectedLabel: selectedLabels[0],\n selectedKey: effectiveSelectedKey ?? null,\n selectedLabels,\n selectedKeys: effectiveSelectedKeys,\n selectionMode: 'single',\n });\n }\n\n return renderSummary({\n selectedLabels,\n selectedKeys: effectiveSelectedKeys,\n selectionMode: 'multiple',\n });\n } else if (renderSummary === false) {\n return null;\n }\n\n if (!hasSelection) {\n return <Text.Placeholder>{placeholder}</Text.Placeholder>;\n } else if (selectionMode === 'single') {\n return selectedLabels[0] || null;\n } else if (effectiveSelectedKeys === 'all') {\n return selectAllLabel;\n } else {\n return selectedLabels.join(', ') || null;\n }\n }, [\n renderSummary,\n selectionMode,\n selectedLabels,\n effectiveSelectedKey,\n effectiveSelectedKeys,\n hasSelection,\n placeholder,\n selectAllLabel,\n ]);\n\n const showClearButton =\n isClearable && hasSelection && !isDisabled && !props.isReadOnly;\n\n // Trigger element — plain JSX with no hooks.\n const triggerElement = (\n <ItemButton\n ref={triggerRef as any}\n data-popover-trigger\n id={id}\n qa={qa || 'PickerTrigger'}\n type={type}\n theme={validationState === 'invalid' ? 'danger' : theme}\n size={size}\n shape={shape}\n isDisabled={isDisabled || isLoading}\n data-input-type=\"picker\"\n mods={{\n placeholder: !hasSelection,\n ...externalMods,\n }}\n icon={icon}\n rightIcon={\n isLoading ? (\n <LoadingIcon />\n ) : rightIcon !== undefined ? (\n rightIcon\n ) : showClearButton ? (\n <ItemAction\n icon={<CloseIcon />}\n size={size}\n theme={validationState === 'invalid' ? 'danger' : undefined}\n qa=\"PickerClearButton\"\n mods={{ pressed: false }}\n onPress={clearValue}\n />\n ) : (\n <DirectionIcon to={isPopoverOpen ? 'top' : 'bottom'} />\n )\n }\n prefix={prefix}\n suffix={suffix}\n hotkeys={hotkeys}\n tooltip={triggerTooltip}\n description={triggerDescription}\n descriptionPlacement={descriptionPlacement}\n styles={triggerStyles}\n {...keyboardProps}\n aria-label={`${props['aria-label'] ?? props.label ?? ''}`}\n >\n {triggerContent}\n </ItemButton>\n );\n\n // ---------------------------------------------------------------------------\n // Selection change handler\n // ---------------------------------------------------------------------------\n\n const handleSelectionChange = useEvent((selection: any) => {\n if (selectionMode === 'single') {\n if (!isControlledSingle) {\n setInternalSelectedKey(selection as Key | null);\n }\n } else {\n if (!isControlledMultiple) {\n let normalized: 'all' | Key[] = selection;\n\n if (selection === 'all') {\n normalized = 'all';\n } else if (Array.isArray(selection)) {\n normalized = processSelectionArray(selection);\n } else if (\n selection &&\n typeof selection === 'object' &&\n selection instanceof Set\n ) {\n normalized = processSelectionArray(selection as Set<Key>);\n }\n\n setInternalSelectedKeys(normalized);\n }\n }\n\n if (selectionMode === 'single') {\n latestSelectionRef.current.single =\n selection != null ? String(selection) : null;\n } else {\n if (selection === 'all') {\n latestSelectionRef.current.multiple = [];\n } else if (Array.isArray(selection)) {\n latestSelectionRef.current.multiple = processSelectionArray(selection);\n } else if (\n selection &&\n typeof selection === 'object' &&\n selection instanceof Set\n ) {\n latestSelectionRef.current.multiple = processSelectionArray(\n selection as Set<Key>,\n );\n } else {\n latestSelectionRef.current.multiple = [];\n }\n }\n\n onSelectionChange?.(selection);\n\n if (selectionMode === 'single') {\n handleOpenChange(false);\n }\n });\n\n const handleEscape = useEvent(() => {\n handleOpenChange(false);\n });\n\n const handleOptionClick = useEvent((key: Key) => {\n if ((selectionMode === 'multiple' && isCheckable) || key === '__ALL__') {\n handleOpenChange(false);\n }\n });\n\n const pickerField = (\n <PickerWrapper\n styles={styles}\n {...filterBaseProps(otherProps, { eventProps: true })}\n >\n <DialogTrigger\n isDismissable\n type=\"popover\"\n placement=\"bottom start\"\n isOpen={isPopoverOpen}\n containerPadding={containerPadding}\n shouldUpdatePosition={shouldUpdatePosition}\n shouldFlip={shouldFlip && shouldUpdatePosition}\n shouldCloseOnInteractOutside={(el) => {\n const menuTriggerEl = el.closest('[data-popover-trigger]');\n if (!menuTriggerEl) return true;\n if (menuTriggerEl === triggerRef?.current?.UNSAFE_getDOMNode())\n return true;\n return false;\n }}\n onOpenChange={handleOpenChange}\n >\n {triggerElement}\n {() => (\n <Dialog\n qa=\"PickerOverlay\"\n display=\"grid\"\n styles={{\n gridRows: '1sf',\n width: 'max($overlay-min-width, 30x) max-content 50vw',\n '$overlay-min-width': '30x',\n ...popoverStyles,\n }}\n style={\n triggerWidthRef.current\n ? ({\n '--overlay-min-width': `${triggerWidthRef.current}px`,\n } as any)\n : undefined\n }\n >\n <FocusScope restoreFocus>\n <ListBox\n autoFocus\n items={items ? (finalItems as typeof props.items) : undefined}\n aria-label={`${props['aria-label'] ?? props.label ?? ''} Picker`}\n selectedKey={\n selectionMode === 'single' ? effectiveSelectedKey : undefined\n }\n selectedKeys={\n selectionMode === 'multiple'\n ? effectiveSelectedKeys\n : undefined\n }\n listStyles={listStyles}\n optionStyles={optionStyles}\n sectionStyles={sectionStyles}\n headingStyles={headingStyles}\n listRef={listRef}\n disallowEmptySelection={disallowEmptySelection}\n disabledKeys={disabledKeys}\n focusOnHover={focusOnHover}\n shouldFocusWrap={shouldFocusWrap}\n selectionMode={selectionMode}\n validationState={validationState}\n isDisabled={isDisabled}\n isLoading={isLoading}\n stateRef={internalListStateRef}\n isCheckable={isCheckable}\n shape=\"popover\"\n size=\"medium\"\n showSelectAll={showSelectAll}\n selectAllLabel={selectAllLabel}\n header={header}\n footer={footer}\n headerStyles={headerStyles}\n footerStyles={footerStyles}\n qa={`${props.qa || 'Picker'}ListBox`}\n allValueProps={allValueProps}\n onEscape={handleEscape}\n onOptionClick={handleOptionClick}\n onSelectionChange={handleSelectionChange}\n >\n {children as CollectionChildren<T>}\n </ListBox>\n </FocusScope>\n </Dialog>\n )}\n </DialogTrigger>\n </PickerWrapper>\n );\n\n return wrapWithField<Omit<CubePickerProps<T>, 'children' | 'tooltip'>>(\n pickerField,\n ref as any,\n props,\n );\n}) as unknown as (<T>(\n props: CubePickerProps<T> & { ref?: ForwardedRef<HTMLElement> },\n) => ReactElement) & { Item: typeof ListBox.Item; Section: typeof BaseSection };\n\nPicker.Item = ListBox.Item;\n\nPicker.Section = BaseSection;\n\nObject.defineProperty(Picker, 'cubeInputType', {\n value: 'Picker',\n enumerable: false,\n configurable: false,\n});\n"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.125.1 | Cube Dev Team */
|
|
2
2
|
import { extractStyles } from "../../../utils/styles.js";
|
|
3
3
|
import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
|
|
4
4
|
import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.125.1 | Cube Dev Team */
|
|
2
2
|
import { extractStyles } from "../../../utils/styles.js";
|
|
3
3
|
import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
|
|
4
4
|
import { useProviderProps } from "../../../provider.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.125.1 | Cube Dev Team */
|
|
2
2
|
import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
|
|
3
3
|
import { useProviderProps } from "../../../provider.js";
|
|
4
4
|
import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
|