@cube-dev/ui-kit 0.69.0 → 0.69.2
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/CHANGELOG.md +24 -0
- package/es/_internal/hooks/index.js +1 -1
- package/es/_internal/hooks/use-chained-callback.js +1 -1
- package/es/_internal/hooks/use-debounced-value.js +1 -1
- package/es/_internal/hooks/use-deprecation-warning.js +1 -1
- package/es/_internal/hooks/use-effect-once.js +1 -1
- package/es/_internal/hooks/use-event.js +1 -1
- package/es/_internal/hooks/use-is-first-render.js +1 -1
- package/es/_internal/hooks/use-sync-ref.js +1 -1
- package/es/_internal/hooks/use-timer/index.js +1 -1
- package/es/_internal/hooks/use-timer/timer.js +1 -1
- package/es/_internal/hooks/use-timer/use-timer.js +1 -1
- package/es/_internal/hooks/use-update-effect.js +1 -1
- package/es/_internal/hooks/use-warn.js +1 -1
- package/es/_internal/index.js +1 -1
- package/es/components/Block.js +1 -1
- package/es/components/GlobalStyles.js +1 -1
- package/es/components/GridProvider.js +1 -1
- package/es/components/HiddenInput.js +1 -1
- package/es/components/OpenTrasition.js +1 -1
- package/es/components/Root.js +1 -1
- package/es/components/actions/Action/Action.js +1 -1
- package/es/components/actions/Button/Button.js +39 -16
- package/es/components/actions/Button/index.js +1 -1
- package/es/components/actions/ButtonGroup/ButtonGroup.js +1 -1
- package/es/components/actions/CommandMenu/CommandMenu.js +1 -1
- package/es/components/actions/CommandMenu/index.js +1 -1
- package/es/components/actions/CommandMenu/styled.js +1 -1
- package/es/components/actions/Menu/Menu.js +1 -1
- package/es/components/actions/Menu/MenuItem.js +1 -1
- package/es/components/actions/Menu/MenuSection.js +1 -1
- package/es/components/actions/Menu/MenuTrigger.js +1 -1
- package/es/components/actions/Menu/context.js +1 -1
- package/es/components/actions/Menu/index.js +1 -1
- package/es/components/actions/Menu/styled.js +7 -1
- package/es/components/actions/index.js +1 -1
- package/es/components/actions/use-action.js +1 -1
- package/es/components/actions/use-anchored-menu.js +1 -1
- package/es/components/actions/use-context-menu.js +1 -1
- package/es/components/content/ActiveZone/ActiveZone.js +1 -1
- package/es/components/content/Alert/Alert.js +1 -1
- package/es/components/content/Alert/index.js +1 -1
- package/es/components/content/Alert/types.js +1 -1
- package/es/components/content/Alert/use-alert.js +1 -1
- package/es/components/content/Avatar/Avatar.js +1 -1
- package/es/components/content/Badge/Badge.js +1 -1
- package/es/components/content/Card/Card.js +1 -1
- package/es/components/content/Content.js +1 -1
- package/es/components/content/CopyPasteBlock/CopyPasteBlock.js +1 -1
- package/es/components/content/CopyPasteBlock/index.js +1 -1
- package/es/components/content/CopySnippet/CopySnippet.js +1 -1
- package/es/components/content/CopySnippet/index.js +1 -1
- package/es/components/content/Divider.js +1 -1
- package/es/components/content/Footer.js +1 -1
- package/es/components/content/Header.js +1 -1
- package/es/components/content/HotKeys/HotKeys.js +1 -1
- package/es/components/content/HotKeys/index.js +1 -1
- package/es/components/content/Paragraph.js +1 -1
- package/es/components/content/Placeholder/Placeholder.js +1 -1
- package/es/components/content/PrismCode/PrismCode.js +1 -1
- package/es/components/content/PrismCode/prismSetup.js +1 -1
- package/es/components/content/PrismDiffCode/PrismDiffCode.js +1 -1
- package/es/components/content/Result/Result.js +1 -1
- package/es/components/content/Skeleton/Skeleton.js +1 -1
- package/es/components/content/Tag/Tag.js +1 -1
- package/es/components/content/Text.js +1 -1
- package/es/components/content/Title.js +1 -1
- package/es/components/fields/Checkbox/Checkbox.js +1 -1
- package/es/components/fields/Checkbox/CheckboxGroup.js +1 -1
- package/es/components/fields/Checkbox/context.js +1 -1
- package/es/components/fields/Checkbox/index.js +1 -1
- package/es/components/fields/ComboBox/ComboBox.js +2 -2
- package/es/components/fields/ComboBox/index.js +1 -1
- package/es/components/fields/DatePicker/DateInput.js +1 -1
- package/es/components/fields/DatePicker/DateInputBase.js +6 -1
- package/es/components/fields/DatePicker/DatePicker.js +1 -1
- package/es/components/fields/DatePicker/DatePickerButton.js +1 -1
- package/es/components/fields/DatePicker/DatePickerElement.js +1 -1
- package/es/components/fields/DatePicker/DatePickerInput.js +1 -1
- package/es/components/fields/DatePicker/DatePickerSegment.js +1 -1
- package/es/components/fields/DatePicker/DateRangePicker.js +1 -1
- package/es/components/fields/DatePicker/DateRangeSeparatedPicker.js +1 -1
- package/es/components/fields/DatePicker/TimeInput.js +1 -1
- package/es/components/fields/DatePicker/index.js +1 -1
- package/es/components/fields/DatePicker/intl.js +1 -1
- package/es/components/fields/DatePicker/parseDate.js +1 -1
- package/es/components/fields/DatePicker/props.js +1 -1
- package/es/components/fields/DatePicker/types.js +1 -1
- package/es/components/fields/DatePicker/utils.js +1 -1
- package/es/components/fields/FileInput/FileInput.js +1 -1
- package/es/components/fields/FilterListBox/FilterListBox.js +54 -11
- package/es/components/fields/FilterListBox/index.js +1 -1
- package/es/components/fields/FilterPicker/FilterPicker.js +213 -100
- package/es/components/fields/FilterPicker/index.js +1 -1
- package/es/components/fields/Input/Input.js +1 -1
- package/es/components/fields/Input/index.js +1 -1
- package/es/components/fields/ListBox/ListBox.js +132 -25
- package/es/components/fields/ListBox/index.js +1 -1
- package/es/components/fields/NumberInput/NumberInput.js +3 -3
- package/es/components/fields/NumberInput/StepButton.js +24 -22
- package/es/components/fields/PasswordInput/PasswordInput.js +1 -1
- package/es/components/fields/RadioGroup/Radio.js +1 -1
- package/es/components/fields/RadioGroup/RadioGroup.js +1 -1
- package/es/components/fields/RadioGroup/context.js +1 -1
- package/es/components/fields/RadioGroup/index.js +1 -1
- package/es/components/fields/SearchInput/SearchInput.js +1 -1
- package/es/components/fields/SearchInput/index.js +1 -1
- package/es/components/fields/Select/Select.js +58 -39
- package/es/components/fields/Select/index.js +1 -1
- package/es/components/fields/Slider/Gradation.js +1 -1
- package/es/components/fields/Slider/Header.js +1 -1
- package/es/components/fields/Slider/RangeSlider.js +1 -1
- package/es/components/fields/Slider/Slider.js +1 -1
- package/es/components/fields/Slider/SliderBase.js +1 -1
- package/es/components/fields/Slider/SliderInput.js +1 -1
- package/es/components/fields/Slider/SliderThumb.js +1 -1
- package/es/components/fields/Slider/SliderTrack.js +1 -1
- package/es/components/fields/Slider/elements.js +1 -1
- package/es/components/fields/Slider/index.js +1 -1
- package/es/components/fields/Slider/types.js +1 -1
- package/es/components/fields/Switch/Switch.js +1 -1
- package/es/components/fields/Switch/index.js +1 -1
- package/es/components/fields/TextArea/TextArea.js +1 -1
- package/es/components/fields/TextArea/index.js +1 -1
- package/es/components/fields/TextInput/TextInput.js +1 -1
- package/es/components/fields/TextInput/TextInputBase.js +31 -29
- package/es/components/fields/TextInput/index.js +1 -1
- package/es/components/fields/TextInputMapper/TextInputMapper.js +1 -1
- package/es/components/fields/TextInputMapper/index.js +1 -1
- package/es/components/fields/index.js +1 -1
- package/es/components/form/FieldWrapper/FieldWrapper.js +1 -1
- package/es/components/form/FieldWrapper/extract-field-wrapper-props.js +1 -1
- package/es/components/form/FieldWrapper/index.js +1 -1
- package/es/components/form/FieldWrapper/types.js +1 -1
- package/es/components/form/Form/Field.js +1 -1
- package/es/components/form/Form/Form.js +1 -1
- package/es/components/form/Form/ResetButton/ResetButton.js +1 -1
- package/es/components/form/Form/ResetButton/index.js +1 -1
- package/es/components/form/Form/SubmitButton/SubmitButton.js +1 -1
- package/es/components/form/Form/SubmitButton/index.js +1 -1
- package/es/components/form/Form/SubmitError.js +1 -1
- package/es/components/form/Form/index.js +1 -1
- package/es/components/form/Form/types.js +1 -1
- package/es/components/form/Form/use-field/index.js +1 -1
- package/es/components/form/Form/use-field/types.js +1 -1
- package/es/components/form/Form/use-field/use-field-props.js +1 -1
- package/es/components/form/Form/use-field/use-field.js +1 -1
- package/es/components/form/Form/use-form.js +1 -1
- package/es/components/form/Form/validation.js +1 -1
- package/es/components/form/Label.js +1 -1
- package/es/components/form/index.js +1 -1
- package/es/components/form/wrapper.js +1 -1
- package/es/components/layout/Flex.js +1 -1
- package/es/components/layout/Flow.js +1 -1
- package/es/components/layout/Grid.js +1 -1
- package/es/components/layout/Panel.js +1 -1
- package/es/components/layout/Prefix.js +1 -1
- package/es/components/layout/ResizablePanel.js +1 -1
- package/es/components/layout/Space.js +1 -1
- package/es/components/layout/Suffix.js +1 -1
- package/es/components/navigation/LegacyTabs/LegacyTabs.js +1 -1
- package/es/components/navigation/Link/Link.js +1 -1
- package/es/components/organisms/FileTabs/FileTabs.js +1 -1
- package/es/components/organisms/Modal/Modal.js +1 -1
- package/es/components/organisms/StatsCard/StatsCard.js +1 -1
- package/es/components/other/Base64Upload/Base64Upload.js +1 -1
- package/es/components/other/Calendar/Calendar.js +1 -1
- package/es/components/other/Calendar/CalendarCell.js +1 -1
- package/es/components/other/Calendar/CalendarGrid.js +1 -1
- package/es/components/other/Calendar/RangeCalendar.js +1 -1
- package/es/components/other/CloudLogo/CloudLogo.js +1 -1
- package/es/components/overlays/AlertDialog/AlertDialog.js +1 -1
- package/es/components/overlays/AlertDialog/AlertDialogApiProvider.js +1 -1
- package/es/components/overlays/AlertDialog/AlertDialogZone.js +1 -1
- package/es/components/overlays/AlertDialog/index.js +1 -1
- package/es/components/overlays/AlertDialog/types.js +1 -1
- package/es/components/overlays/Dialog/Dialog.js +1 -1
- package/es/components/overlays/Dialog/DialogContainer.js +1 -1
- package/es/components/overlays/Dialog/DialogForm.js +1 -1
- package/es/components/overlays/Dialog/DialogTrigger.js +2 -1
- package/es/components/overlays/Dialog/context.js +1 -1
- package/es/components/overlays/Dialog/index.js +1 -1
- package/es/components/overlays/Dialog/use-dialog-container.js +1 -1
- package/es/components/overlays/Modal/Modal.js +1 -1
- package/es/components/overlays/Modal/OpenTransition.js +1 -1
- package/es/components/overlays/Modal/Overlay.js +1 -1
- package/es/components/overlays/Modal/Popover.js +1 -1
- package/es/components/overlays/Modal/Tray.js +1 -1
- package/es/components/overlays/Modal/Underlay.js +1 -1
- package/es/components/overlays/Modal/index.js +1 -1
- package/es/components/overlays/Modal/types.js +1 -1
- package/es/components/overlays/NewNotifications/Bar/FloatingNotification.js +1 -1
- package/es/components/overlays/NewNotifications/Bar/NotificationsBar.js +1 -1
- package/es/components/overlays/NewNotifications/Bar/TransitionComponent.js +1 -1
- package/es/components/overlays/NewNotifications/Bar/index.js +1 -1
- package/es/components/overlays/NewNotifications/Dialog/NotificationsDialogTrigger.js +1 -1
- package/es/components/overlays/NewNotifications/Dialog/index.js +1 -1
- package/es/components/overlays/NewNotifications/Notification.js +1 -1
- package/es/components/overlays/NewNotifications/NotificationView/NotificationAction.js +1 -1
- package/es/components/overlays/NewNotifications/NotificationView/NotificationCloseButton.js +1 -1
- package/es/components/overlays/NewNotifications/NotificationView/NotificationDescription.js +1 -1
- package/es/components/overlays/NewNotifications/NotificationView/NotificationFooter.js +1 -1
- package/es/components/overlays/NewNotifications/NotificationView/NotificationHeader.js +1 -1
- package/es/components/overlays/NewNotifications/NotificationView/NotificationIcon.js +1 -1
- package/es/components/overlays/NewNotifications/NotificationView/NotificationProvider.js +1 -1
- package/es/components/overlays/NewNotifications/NotificationView/NotificationView.js +1 -1
- package/es/components/overlays/NewNotifications/NotificationView/index.js +1 -1
- package/es/components/overlays/NewNotifications/NotificationView/types.js +1 -1
- package/es/components/overlays/NewNotifications/NotificationsContext/NotificationsContext.js +1 -1
- package/es/components/overlays/NewNotifications/NotificationsContext/NotificationsProvider.js +1 -1
- package/es/components/overlays/NewNotifications/NotificationsContext/index.js +1 -1
- package/es/components/overlays/NewNotifications/NotificationsContext/use-notifications.js +1 -1
- package/es/components/overlays/NewNotifications/NotificationsList/NotificationsList.js +1 -1
- package/es/components/overlays/NewNotifications/NotificationsList/NotificationsListItem.js +1 -1
- package/es/components/overlays/NewNotifications/NotificationsList/index.js +1 -1
- package/es/components/overlays/NewNotifications/NotificationsList/types.js +1 -1
- package/es/components/overlays/NewNotifications/hooks/index.js +1 -1
- package/es/components/overlays/NewNotifications/hooks/types.js +1 -1
- package/es/components/overlays/NewNotifications/hooks/use-notification-list-item.js +1 -1
- package/es/components/overlays/NewNotifications/hooks/use-notifications-api.js +1 -1
- package/es/components/overlays/NewNotifications/hooks/use-notifications-list.js +1 -1
- package/es/components/overlays/NewNotifications/hooks/use-notifications-observer.js +1 -1
- package/es/components/overlays/NewNotifications/index.js +1 -1
- package/es/components/overlays/NewNotifications/types.js +1 -1
- package/es/components/overlays/Notification/Notification.js +1 -1
- package/es/components/overlays/OverlayWrapper.js +1 -1
- package/es/components/overlays/Toasts/Toast.js +1 -1
- package/es/components/overlays/Toasts/index.js +1 -1
- package/es/components/overlays/Toasts/types.js +1 -1
- package/es/components/overlays/Toasts/use-toasts-api.js +1 -1
- package/es/components/overlays/Tooltip/Tooltip.js +1 -1
- package/es/components/overlays/Tooltip/TooltipProvider.js +1 -1
- package/es/components/overlays/Tooltip/TooltipTrigger.js +1 -1
- package/es/components/overlays/Tooltip/context.js +1 -1
- package/es/components/overlays/Tooltip/index.js +1 -1
- package/es/components/portal/Portal.js +1 -1
- package/es/components/portal/PortalProvider.js +1 -1
- package/es/components/portal/index.js +1 -1
- package/es/components/portal/storybook/templates/CustomRoot.js +1 -1
- package/es/components/portal/storybook/templates/PortalOrder.js +1 -1
- package/es/components/portal/storybook/templates/basic.js +1 -1
- package/es/components/portal/storybook/templates/index.js +1 -1
- package/es/components/portal/types.js +1 -1
- package/es/components/portal/usePortal.js +1 -1
- package/es/components/shared/InvalidIcon.js +1 -1
- package/es/components/shared/ValidIcon.js +1 -1
- package/es/components/status/LoadingAnimation/LoadingAnimation.js +1 -1
- package/es/components/status/LoadingAnimation/index.js +1 -1
- package/es/components/status/Spin/Cube.js +1 -1
- package/es/components/status/Spin/InternalSpinner.js +1 -1
- package/es/components/status/Spin/Spin.js +1 -1
- package/es/components/status/Spin/SpinsContainer.js +1 -1
- package/es/components/status/Spin/index.js +1 -1
- package/es/components/status/Spin/types.js +1 -1
- package/es/components/status/index.js +1 -1
- package/es/data/themes.js +1 -1
- package/es/icons/AdjustmentsHorizontalIcon.js +1 -1
- package/es/icons/AdjustmentsIcon.js +1 -1
- package/es/icons/AiIcon.js +1 -1
- package/es/icons/AreaChartIcon.js +1 -1
- package/es/icons/BackwardIcon.js +1 -1
- package/es/icons/BarChartIcon.js +1 -1
- package/es/icons/BellFilledIcon.js +1 -1
- package/es/icons/BellIcon.js +1 -1
- package/es/icons/BooleanIcon.js +1 -1
- package/es/icons/CalendarEditIcon.js +1 -1
- package/es/icons/CalendarIcon.js +1 -1
- package/es/icons/CaretDownIcon.js +1 -1
- package/es/icons/CaretUpIcon.js +1 -1
- package/es/icons/ChartAreaStackedIcon.js +1 -1
- package/es/icons/ChartAreaStackedPercentageIcon.js +1 -1
- package/es/icons/ChartBarGroupedHorizontalIcon.js +1 -1
- package/es/icons/ChartBarGroupedIcon.js +1 -1
- package/es/icons/ChartBarHorizontalIcon.js +1 -1
- package/es/icons/ChartBarLineIcon.js +1 -1
- package/es/icons/ChartBarStackedHorizontalIcon.js +1 -1
- package/es/icons/ChartBarStackedIcon.js +1 -1
- package/es/icons/ChartBarStackedPercentageHorizontalIcon.js +1 -1
- package/es/icons/ChartBarStackedPercentageIcon.js +1 -1
- package/es/icons/ChartBoxPlot2Icon.js +1 -1
- package/es/icons/ChartBoxPlotIcon.js +1 -1
- package/es/icons/ChartBubbleIcon.js +1 -1
- package/es/icons/ChartDonut2Icon.js +1 -1
- package/es/icons/ChartFunnelIcon.js +1 -1
- package/es/icons/ChartKPIIcon.js +1 -1
- package/es/icons/ChartPie2Icon.js +1 -1
- package/es/icons/ChartScatterIcon.js +1 -1
- package/es/icons/CheckCircleFilledIcon.js +1 -1
- package/es/icons/CheckCircleIcon.js +1 -1
- package/es/icons/CheckIcon.js +1 -1
- package/es/icons/CircleFilledIcon.js +1 -1
- package/es/icons/ClearIcon.js +1 -1
- package/es/icons/CloseCircleFilledIcon.js +1 -1
- package/es/icons/CloseCircleIcon.js +1 -1
- package/es/icons/CloseIcon.js +1 -1
- package/es/icons/CodeIcon.js +1 -1
- package/es/icons/CopyIcon.js +1 -1
- package/es/icons/CountIcon.js +1 -1
- package/es/icons/CubeIcon.js +1 -1
- package/es/icons/DangerIcon.js +1 -1
- package/es/icons/DashboardIcon.js +1 -1
- package/es/icons/DatabaseIcon.js +1 -1
- package/es/icons/DirectionIcon.js +4 -2
- package/es/icons/DonutIcon.js +1 -1
- package/es/icons/DownIcon.js +1 -1
- package/es/icons/EditIcon.js +1 -1
- package/es/icons/ExclamationCircleFilledIcon.js +1 -1
- package/es/icons/ExclamationCircleIcon.js +1 -1
- package/es/icons/ExclamationIcon.js +1 -1
- package/es/icons/EyeIcon.js +1 -1
- package/es/icons/EyeInvisibleIcon.js +1 -1
- package/es/icons/FilterIcon.js +1 -1
- package/es/icons/FolderFilledIcon.js +1 -1
- package/es/icons/FolderIcon.js +1 -1
- package/es/icons/FolderOpenFilledIcon.js +1 -1
- package/es/icons/FolderOpenIcon.js +1 -1
- package/es/icons/ForwardIcon.js +1 -1
- package/es/icons/HierarchyIcon.js +1 -1
- package/es/icons/Icon.js +1 -1
- package/es/icons/InfoCircleIcon.js +1 -1
- package/es/icons/InfoIcon.js +1 -1
- package/es/icons/KeyIcon.js +1 -1
- package/es/icons/LeftIcon.js +1 -1
- package/es/icons/LineChartIcon.js +1 -1
- package/es/icons/LoadingIcon.js +1 -1
- package/es/icons/LockFilledIcon.js +1 -1
- package/es/icons/LockIcon.js +1 -1
- package/es/icons/MoreIcon.js +1 -1
- package/es/icons/NotAllowedIcon.js +1 -1
- package/es/icons/NumberIcon.js +1 -1
- package/es/icons/PauseCircleFilledIcon.js +1 -1
- package/es/icons/PauseCircleIcon.js +1 -1
- package/es/icons/PauseIcon.js +1 -1
- package/es/icons/PieChartIcon.js +1 -1
- package/es/icons/PlayCircleIcon.js +1 -1
- package/es/icons/PlayIcon.js +1 -1
- package/es/icons/PlusIcon.js +1 -1
- package/es/icons/ReloadIcon.js +1 -1
- package/es/icons/ReportIcon.js +1 -1
- package/es/icons/ReturnIcon.js +1 -1
- package/es/icons/RightIcon.js +1 -1
- package/es/icons/SchemeIcon.js +1 -1
- package/es/icons/SearchIcon.js +1 -1
- package/es/icons/SettingsIcon.js +1 -1
- package/es/icons/ShieldFilledIcon.js +1 -1
- package/es/icons/ShieldIcon.js +1 -1
- package/es/icons/SlashIcon.js +1 -1
- package/es/icons/SparklesIcon.js +1 -1
- package/es/icons/SqlIcon.js +1 -1
- package/es/icons/StatsIcon.js +1 -1
- package/es/icons/StopIcon.js +1 -1
- package/es/icons/StringIcon.js +1 -1
- package/es/icons/SwitchIcon.js +1 -1
- package/es/icons/TableIcon.js +1 -1
- package/es/icons/ThumbsDownIcon.js +1 -1
- package/es/icons/ThumbsUpIcon.js +1 -1
- package/es/icons/ThunderboltCrossedIcon.js +1 -1
- package/es/icons/ThunderboltFilledIcon.js +1 -1
- package/es/icons/ThunderboltIcon.js +1 -1
- package/es/icons/TimeIcon.js +1 -1
- package/es/icons/UnlockIcon.js +1 -1
- package/es/icons/UpIcon.js +1 -1
- package/es/icons/UserGroupIcon.js +1 -1
- package/es/icons/UserIcon.js +1 -1
- package/es/icons/UserLockIcon.js +1 -1
- package/es/icons/ViewIcon.js +1 -1
- package/es/icons/WarningFilledIcon.js +1 -1
- package/es/icons/WarningIcon.js +1 -1
- package/es/icons/add-new-icon.js +1 -1
- package/es/icons/index.js +1 -1
- package/es/icons/wrap-icon.js +1 -1
- package/es/index.js +1 -1
- package/es/provider.js +1 -1
- package/es/providers/TrackingProvider.js +1 -1
- package/es/services/notification.js +1 -1
- package/es/shared/form.js +1 -1
- package/es/shared/index.js +1 -1
- package/es/stories/Form.legacy-stories.js +1 -1
- package/es/stories/FormFieldArgs.js +1 -1
- package/es/stories/Layout.stories.js +1 -1
- package/es/stories/Tasty.stories.js +1 -1
- package/es/stories/components/ConfirmDeletionDialogForm.js +1 -1
- package/es/stories/components/DialogFormApp.js +1 -1
- package/es/stories/components/StyledButton.js +1 -1
- package/es/stories/lists/baseProps.js +1 -1
- package/es/tasty/index.js +1 -1
- package/es/tasty/providers/BreakpointsProvider.js +1 -1
- package/es/tasty/styles/align.js +1 -1
- package/es/tasty/styles/border.js +1 -1
- package/es/tasty/styles/boxShadow.combinator.js +1 -1
- package/es/tasty/styles/color.js +1 -1
- package/es/tasty/styles/createStyle.js +1 -1
- package/es/tasty/styles/dimension.js +1 -1
- package/es/tasty/styles/display.js +1 -1
- package/es/tasty/styles/fade.js +1 -1
- package/es/tasty/styles/fill.js +1 -1
- package/es/tasty/styles/flow.js +1 -1
- package/es/tasty/styles/font.js +1 -1
- package/es/tasty/styles/fontStyle.js +1 -1
- package/es/tasty/styles/gap.js +1 -1
- package/es/tasty/styles/groupRadius.js +1 -1
- package/es/tasty/styles/height.js +1 -1
- package/es/tasty/styles/index.js +1 -1
- package/es/tasty/styles/inset.js +1 -1
- package/es/tasty/styles/justify.js +1 -1
- package/es/tasty/styles/list.js +1 -1
- package/es/tasty/styles/margin.js +1 -1
- package/es/tasty/styles/marginBlock.js +1 -1
- package/es/tasty/styles/marginInline.js +1 -1
- package/es/tasty/styles/outline.js +1 -1
- package/es/tasty/styles/padding.js +1 -1
- package/es/tasty/styles/paddingBlock.js +1 -1
- package/es/tasty/styles/paddingInline.js +1 -1
- package/es/tasty/styles/place.js +1 -1
- package/es/tasty/styles/predefined.js +1 -1
- package/es/tasty/styles/preset.js +1 -1
- package/es/tasty/styles/radius.js +1 -1
- package/es/tasty/styles/reset.js +1 -1
- package/es/tasty/styles/scrollbar.js +1 -1
- package/es/tasty/styles/shadow.js +1 -1
- package/es/tasty/styles/styledScrollbar.js +1 -1
- package/es/tasty/styles/transition.js +1 -1
- package/es/tasty/styles/types.js +1 -1
- package/es/tasty/styles/width.js +1 -1
- package/es/tasty/tasty.js +1 -1
- package/es/tasty/types.js +1 -1
- package/es/tasty/utils/cache-wrapper.js +1 -1
- package/es/tasty/utils/case-converter.js +1 -1
- package/es/tasty/utils/colors.js +1 -1
- package/es/tasty/utils/dotize.js +1 -1
- package/es/tasty/utils/filterBaseProps.js +1 -1
- package/es/tasty/utils/getDisplayName.js +1 -1
- package/es/tasty/utils/getModCombinations.js +1 -1
- package/es/tasty/utils/mergeStyles.js +1 -1
- package/es/tasty/utils/modAttrs.js +1 -1
- package/es/tasty/utils/renderStyles.js +1 -1
- package/es/tasty/utils/responsive.js +1 -1
- package/es/tasty/utils/string.js +1 -1
- package/es/tasty/utils/styles.js +1 -1
- package/es/tasty/utils/warnings.js +1 -1
- package/es/tokens.js +1 -1
- package/es/type-checks.js +1 -1
- package/es/utils/ResizeSensor.js +1 -1
- package/es/utils/modules.js +1 -1
- package/es/utils/promise.js +1 -1
- package/es/utils/random.js +1 -1
- package/es/utils/range.js +1 -1
- package/es/utils/react/Slots.js +1 -1
- package/es/utils/react/chain.js +1 -1
- package/es/utils/react/index.js +1 -1
- package/es/utils/react/interactions.js +1 -1
- package/es/utils/react/isTextOnly.js +1 -1
- package/es/utils/react/mapProps.js +1 -1
- package/es/utils/react/mergeProps.js +1 -1
- package/es/utils/react/nullableValue.js +1 -1
- package/es/utils/react/sharedStore.js +1 -1
- package/es/utils/react/useCombinedRefs.js +1 -1
- package/es/utils/react/useControlledFocusVisible.js +1 -1
- package/es/utils/react/useEventBus.js +1 -1
- package/es/utils/react/useId.js +1 -1
- package/es/utils/react/useIsDarwin.js +1 -1
- package/es/utils/react/useKeySymbols.js +1 -1
- package/es/utils/react/useLayoutEffect.js +1 -1
- package/es/utils/react/useQaProps.js +1 -1
- package/es/utils/react/useViewportSize.js +1 -1
- package/es/utils/react/wrapNodeIfPlain.js +1 -1
- package/es/utils/transitions.js +1 -1
- package/es/utils/tree.js +1 -1
- package/es/utils/warnings.js +1 -1
- package/es/version.js +2 -2
- package/package.json +1 -1
- package/types/components/actions/Button/Button.d.ts +30 -12
- package/types/components/fields/FilterListBox/FilterListBox.d.ts +11 -11
- package/types/components/fields/FilterPicker/FilterPicker.d.ts +20 -16
- package/types/components/fields/ListBox/ListBox.d.ts +39 -22
- package/types/components/overlays/Dialog/DialogTrigger.d.ts +1 -0
@@ -1,17 +1,18 @@
|
|
1
1
|
/**
|
2
2
|
* @license MIT
|
3
3
|
* author: Cube Dev Team
|
4
|
-
* @cube-dev/ui-kit v0.69.
|
4
|
+
* @cube-dev/ui-kit v0.69.2
|
5
5
|
* Released under the MIT license.
|
6
6
|
*/
|
7
7
|
|
8
8
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
9
|
-
import
|
9
|
+
import { Children, cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
|
10
|
+
import { FocusScope, useKeyboard } from 'react-aria';
|
10
11
|
import { Section as BaseSection, Item } from 'react-stately';
|
11
12
|
import { useWarn } from '../../../_internal/hooks/use-warn';
|
12
13
|
import { DirectionIcon } from '../../../icons';
|
13
14
|
import { useProviderProps } from '../../../provider';
|
14
|
-
import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, } from '../../../tasty';
|
15
|
+
import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
|
15
16
|
import { mergeProps } from '../../../utils/react';
|
16
17
|
import { Button } from '../../actions';
|
17
18
|
import { Text } from '../../content/Text';
|
@@ -20,6 +21,16 @@ import { Dialog, DialogTrigger } from '../../overlays/Dialog';
|
|
20
21
|
import { FilterListBox, } from '../FilterListBox/FilterListBox';
|
21
22
|
import { ListBox } from '../ListBox';
|
22
23
|
const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
|
24
|
+
const FilterPickerWrapper = tasty({
|
25
|
+
qa: 'FilterPicker',
|
26
|
+
styles: {
|
27
|
+
display: 'inline-grid',
|
28
|
+
flow: 'column',
|
29
|
+
gridRows: '1sf',
|
30
|
+
placeContent: 'stretch',
|
31
|
+
placeItems: 'stretch',
|
32
|
+
},
|
33
|
+
});
|
23
34
|
export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
|
24
35
|
props = useProviderProps(props);
|
25
36
|
props = useFormProps(props);
|
@@ -34,7 +45,13 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
|
|
34
45
|
}
|
35
46
|
fieldProps.onSelectionChange = (key) => {
|
36
47
|
if (props.selectionMode === 'multiple') {
|
37
|
-
|
48
|
+
// Handle "all" selection and array selections
|
49
|
+
if (key === 'all') {
|
50
|
+
onChange('all');
|
51
|
+
}
|
52
|
+
else {
|
53
|
+
onChange(key ? (Array.isArray(key) ? key : [key]) : []);
|
54
|
+
}
|
38
55
|
}
|
39
56
|
else {
|
40
57
|
onChange(Array.isArray(key) ? key[0] : key);
|
@@ -43,7 +60,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
|
|
43
60
|
return fieldProps;
|
44
61
|
},
|
45
62
|
});
|
46
|
-
let { qa, label, extra, icon, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, message, mods: externalMods, description, placeholder, size = 'medium', styles, listBoxStyles, popoverStyles, type = 'outline', theme = 'default', labelSuffix, children, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = 'single', listStateRef, focusOnHover, header, footer, headerStyles, footerStyles, allowsCustomValue, renderSummary, isCheckable, ...otherProps } = props;
|
63
|
+
let { qa, label, extra, icon, rightIcon, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, message, mods: externalMods, description, placeholder, size = 'medium', styles, listBoxStyles, popoverStyles, type = 'outline', theme = 'default', labelSuffix, shouldFocusWrap, children, shouldFlip = true, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = 'single', listStateRef, focusOnHover, showSelectAll, selectAllLabel = 'All', items, header, footer, headerStyles, footerStyles, triggerStyles, allowsCustomValue, renderSummary, isCheckable, ...otherProps } = props;
|
47
64
|
styles = extractStyles(otherProps, PROP_STYLES, styles);
|
48
65
|
// Warn if isCheckable is false in single selection mode
|
49
66
|
useWarn(isCheckable === false && selectionMode === 'single', {
|
@@ -67,7 +84,8 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
|
|
67
84
|
const effectiveSelectedKeys = isControlledMultiple
|
68
85
|
? selectedKeys
|
69
86
|
: internalSelectedKeys;
|
70
|
-
// Utility
|
87
|
+
// Utility: remove React's ".$" / "." prefixes from element keys so that we
|
88
|
+
// can compare them with user-provided keys.
|
71
89
|
const normalizeKeyValue = (key) => {
|
72
90
|
if (key == null)
|
73
91
|
return '';
|
@@ -78,11 +96,56 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
|
|
78
96
|
? str.slice(1)
|
79
97
|
: str;
|
80
98
|
};
|
99
|
+
// ---------------------------------------------------------------------------
|
100
|
+
// Map public-facing keys (without React's "." prefix) to the actual React
|
101
|
+
// element keys that appear in the collection (which usually have the `.$`
|
102
|
+
// or `.` prefix added by React when children are in an array). This ensures
|
103
|
+
// that the key we pass to ListBox exactly matches the keys it receives from
|
104
|
+
// React Aria, so the initial selection is highlighted correctly.
|
105
|
+
// ---------------------------------------------------------------------------
|
106
|
+
const findReactKey = useCallback((lookup) => {
|
107
|
+
if (lookup == null)
|
108
|
+
return lookup;
|
109
|
+
const normalizedLookup = normalizeKeyValue(lookup);
|
110
|
+
let foundKey = lookup;
|
111
|
+
const traverse = (nodes) => {
|
112
|
+
Children.forEach(nodes, (child) => {
|
113
|
+
if (!child || typeof child !== 'object')
|
114
|
+
return;
|
115
|
+
if (child.key != null) {
|
116
|
+
if (normalizeKeyValue(child.key) === normalizedLookup) {
|
117
|
+
foundKey = child.key;
|
118
|
+
}
|
119
|
+
}
|
120
|
+
if (child.props?.children) {
|
121
|
+
traverse(child.props.children);
|
122
|
+
}
|
123
|
+
});
|
124
|
+
};
|
125
|
+
if (children)
|
126
|
+
traverse(children);
|
127
|
+
return foundKey;
|
128
|
+
}, [children]);
|
129
|
+
const mappedSelectedKey = useMemo(() => {
|
130
|
+
if (selectionMode !== 'single')
|
131
|
+
return null;
|
132
|
+
return findReactKey(effectiveSelectedKey);
|
133
|
+
}, [selectionMode, effectiveSelectedKey, findReactKey]);
|
134
|
+
const mappedSelectedKeys = useMemo(() => {
|
135
|
+
if (selectionMode !== 'multiple')
|
136
|
+
return undefined;
|
137
|
+
if (effectiveSelectedKeys === 'all')
|
138
|
+
return 'all';
|
139
|
+
if (Array.isArray(effectiveSelectedKeys)) {
|
140
|
+
return effectiveSelectedKeys.map((k) => findReactKey(k));
|
141
|
+
}
|
142
|
+
return effectiveSelectedKeys;
|
143
|
+
}, [selectionMode, effectiveSelectedKeys, findReactKey]);
|
81
144
|
// Given an iterable of keys (array or Set) toggle membership for duplicates
|
82
145
|
const processSelectionArray = (iterable) => {
|
83
146
|
const resultSet = new Set();
|
84
147
|
for (const key of iterable) {
|
85
|
-
const nKey =
|
148
|
+
const nKey = String(key);
|
86
149
|
if (resultSet.has(nKey)) {
|
87
150
|
resultSet.delete(nKey); // toggle off if clicked twice
|
88
151
|
}
|
@@ -96,18 +159,41 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
|
|
96
159
|
const getSelectedLabels = () => {
|
97
160
|
if (!children)
|
98
161
|
return [];
|
99
|
-
|
100
|
-
|
162
|
+
// Handle "all" selection - return all available labels
|
163
|
+
if (selectionMode === 'multiple' && effectiveSelectedKeys === 'all') {
|
164
|
+
const allLabels = [];
|
165
|
+
const extractAllLabels = (nodes) => {
|
166
|
+
Children.forEach(nodes, (child) => {
|
167
|
+
if (!child || typeof child !== 'object')
|
168
|
+
return;
|
169
|
+
if (child.type === Item) {
|
170
|
+
const label = child.props.textValue ||
|
171
|
+
(typeof child.props.children === 'string'
|
172
|
+
? child.props.children
|
173
|
+
: '') ||
|
174
|
+
String(child.props.children || '');
|
175
|
+
allLabels.push(label);
|
176
|
+
}
|
177
|
+
if (child.props?.children) {
|
178
|
+
extractAllLabels(child.props.children);
|
179
|
+
}
|
180
|
+
});
|
181
|
+
};
|
182
|
+
extractAllLabels(children);
|
183
|
+
return allLabels;
|
184
|
+
}
|
185
|
+
const selectedSet = new Set(selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'
|
186
|
+
? (effectiveSelectedKeys || []).map((k) => normalizeKeyValue(k))
|
101
187
|
: effectiveSelectedKey != null
|
102
|
-
? [
|
188
|
+
? [normalizeKeyValue(effectiveSelectedKey)]
|
103
189
|
: []);
|
104
190
|
const labels = [];
|
105
191
|
const extractLabels = (nodes) => {
|
106
|
-
|
192
|
+
Children.forEach(nodes, (child) => {
|
107
193
|
if (!child || typeof child !== 'object')
|
108
194
|
return;
|
109
195
|
if (child.type === Item) {
|
110
|
-
if (selectedSet.has(
|
196
|
+
if (selectedSet.has(normalizeKeyValue(child.key))) {
|
111
197
|
const label = child.props.textValue ||
|
112
198
|
(typeof child.props.children === 'string'
|
113
199
|
? child.props.children
|
@@ -124,7 +210,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
|
|
124
210
|
const processedKeys = new Set();
|
125
211
|
// Modified extractLabels to track which keys we've processed
|
126
212
|
const extractLabelsWithTracking = (nodes) => {
|
127
|
-
|
213
|
+
Children.forEach(nodes, (child) => {
|
128
214
|
if (!child || typeof child !== 'object')
|
129
215
|
return;
|
130
216
|
if (child.type === Item) {
|
@@ -146,14 +232,14 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
|
|
146
232
|
};
|
147
233
|
extractLabelsWithTracking(children);
|
148
234
|
// Handle custom values that don't have corresponding children
|
149
|
-
const selectedKeysArr = selectionMode === 'multiple'
|
235
|
+
const selectedKeysArr = selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'
|
150
236
|
? (effectiveSelectedKeys || []).map(String)
|
151
237
|
: effectiveSelectedKey != null
|
152
238
|
? [String(effectiveSelectedKey)]
|
153
239
|
: [];
|
154
240
|
// Add labels for any selected keys that weren't processed (custom values)
|
155
241
|
selectedKeysArr.forEach((key) => {
|
156
|
-
if (!processedKeys.has(key)) {
|
242
|
+
if (!processedKeys.has(normalizeKeyValue(key))) {
|
157
243
|
// This is a custom value, use the key as the label
|
158
244
|
labels.push(key);
|
159
245
|
}
|
@@ -164,29 +250,35 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
|
|
164
250
|
const hasSelection = selectedLabels.length > 0;
|
165
251
|
// Always keep the latest selection in a ref (with normalized keys) so that we can read it synchronously in the popover close effect.
|
166
252
|
const latestSelectionRef = useRef({
|
167
|
-
single: effectiveSelectedKey != null
|
168
|
-
|
169
|
-
|
170
|
-
|
253
|
+
single: effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,
|
254
|
+
multiple: effectiveSelectedKeys === 'all'
|
255
|
+
? 'all'
|
256
|
+
: (effectiveSelectedKeys ?? []).map(String),
|
171
257
|
});
|
172
|
-
|
258
|
+
useEffect(() => {
|
173
259
|
latestSelectionRef.current = {
|
174
|
-
single: effectiveSelectedKey != null
|
175
|
-
|
176
|
-
|
177
|
-
|
260
|
+
single: effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,
|
261
|
+
multiple: effectiveSelectedKeys === 'all'
|
262
|
+
? 'all'
|
263
|
+
: (effectiveSelectedKeys ?? []).map(String),
|
178
264
|
};
|
179
265
|
}, [effectiveSelectedKey, effectiveSelectedKeys]);
|
180
266
|
const selectionsWhenClosed = useRef({ single: null, multiple: [] });
|
267
|
+
// Capture the initial selection (from defaultSelectedKey(s)) so that
|
268
|
+
// the very first popover open can already use it for sorting.
|
269
|
+
useEffect(() => {
|
270
|
+
selectionsWhenClosed.current = { ...latestSelectionRef.current };
|
271
|
+
}, []); // run only once on mount
|
181
272
|
// Function to sort children with selected items on top
|
182
|
-
const getSortedChildren =
|
273
|
+
const getSortedChildren = useCallback(() => {
|
183
274
|
if (!children)
|
184
275
|
return children;
|
185
|
-
// When the popover is **closed
|
186
|
-
//
|
187
|
-
//
|
188
|
-
|
189
|
-
|
276
|
+
// When the popover is **closed**, reuse the cached order if we have it to
|
277
|
+
// avoid unnecessary reflows. If we don't have a cache yet (first open),
|
278
|
+
// fall through to compute the sorted order so the very first render is
|
279
|
+
// already correct.
|
280
|
+
if (!isPopoverOpen && cachedChildrenOrder.current) {
|
281
|
+
return cachedChildrenOrder.current;
|
190
282
|
}
|
191
283
|
// Popover is open – compute (or recompute) the sorted order for this
|
192
284
|
// session.
|
@@ -208,11 +300,17 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
|
|
208
300
|
// Create selected keys set for fast lookup
|
209
301
|
const selectedSet = new Set();
|
210
302
|
if (selectionMode === 'multiple') {
|
211
|
-
selectionsWhenClosed.current.multiple
|
303
|
+
if (selectionsWhenClosed.current.multiple === 'all') {
|
304
|
+
// Don't sort when "all" is selected, just return original children
|
305
|
+
return children;
|
306
|
+
}
|
307
|
+
else {
|
308
|
+
selectionsWhenClosed.current.multiple.forEach((key) => selectedSet.add(String(key)));
|
309
|
+
}
|
212
310
|
}
|
213
311
|
else if (selectionMode === 'single' &&
|
214
312
|
selectionsWhenClosed.current.single != null) {
|
215
|
-
selectedSet.add(
|
313
|
+
selectedSet.add(String(selectionsWhenClosed.current.single));
|
216
314
|
}
|
217
315
|
// Helper function to check if an item is selected
|
218
316
|
const isItemSelected = (child) => {
|
@@ -220,7 +318,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
|
|
220
318
|
};
|
221
319
|
// Helper function to sort children array
|
222
320
|
const sortChildrenArray = (childrenArray) => {
|
223
|
-
const cloneWithNormalizedKey = (item) =>
|
321
|
+
const cloneWithNormalizedKey = (item) => cloneElement(item, {
|
224
322
|
key: normalizeKeyValue(item.key),
|
225
323
|
});
|
226
324
|
const selected = [];
|
@@ -256,7 +354,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
|
|
256
354
|
}
|
257
355
|
});
|
258
356
|
// Create new section with sorted children, preserving React element properly
|
259
|
-
unselected.push(
|
357
|
+
unselected.push(cloneElement(child, {
|
260
358
|
...child.props,
|
261
359
|
children: [...selectedItems, ...unselectedItems],
|
262
360
|
}));
|
@@ -275,10 +373,11 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
|
|
275
373
|
return [...selected, ...unselected];
|
276
374
|
};
|
277
375
|
// Sort the children
|
278
|
-
const childrenArray =
|
376
|
+
const childrenArray = Children.toArray(children);
|
279
377
|
const sortedChildren = sortChildrenArray(childrenArray);
|
280
|
-
// Cache the sorted order when popover opens
|
281
|
-
|
378
|
+
// Cache the sorted order when popover opens or when we compute it for the
|
379
|
+
// first time before opening.
|
380
|
+
if (isPopoverOpen || !cachedChildrenOrder.current) {
|
282
381
|
cachedChildrenOrder.current = sortedChildren;
|
283
382
|
}
|
284
383
|
return sortedChildren;
|
@@ -292,16 +391,6 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
|
|
292
391
|
// FilterListBox handles custom values internally when allowsCustomValue={true}
|
293
392
|
// We only provide the sorted original children
|
294
393
|
const finalChildren = getSortedChildren();
|
295
|
-
// Function to close popover and focus trigger button
|
296
|
-
const closeAndFocus = React.useCallback((close) => {
|
297
|
-
close();
|
298
|
-
// Use setTimeout to ensure the popover closes first, then focus the trigger
|
299
|
-
setTimeout(() => {
|
300
|
-
if (triggerRef.current) {
|
301
|
-
triggerRef.current.focus();
|
302
|
-
}
|
303
|
-
}, 0);
|
304
|
-
}, []);
|
305
394
|
const renderTriggerContent = () => {
|
306
395
|
// When there is a selection and a custom summary renderer is provided – use it.
|
307
396
|
if (hasSelection && typeof renderSummary === 'function') {
|
@@ -330,6 +419,9 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
|
|
330
419
|
else if (selectionMode === 'single') {
|
331
420
|
content = selectedLabels[0];
|
332
421
|
}
|
422
|
+
else if (effectiveSelectedKeys === 'all') {
|
423
|
+
content = selectAllLabel;
|
424
|
+
}
|
333
425
|
else {
|
334
426
|
content = selectedLabels.join(', ');
|
335
427
|
}
|
@@ -338,10 +430,11 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
|
|
338
430
|
}
|
339
431
|
return (_jsx(Text, { ellipsis: true, style: { opacity: hasSelection ? 1 : 'var(--disabled-opacity)' }, children: content }));
|
340
432
|
};
|
433
|
+
const [shouldUpdatePosition, setShouldUpdatePosition] = useState(false);
|
341
434
|
// The trigger is rendered as a function so we can access the dialog state
|
342
435
|
const renderTrigger = (state) => {
|
343
436
|
// Track popover open/close state to control sorting
|
344
|
-
|
437
|
+
useEffect(() => {
|
345
438
|
if (state.isOpen !== isPopoverOpen) {
|
346
439
|
setIsPopoverOpen(state.isOpen);
|
347
440
|
if (!state.isOpen) {
|
@@ -352,64 +445,84 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
|
|
352
445
|
}
|
353
446
|
}
|
354
447
|
}, [state.isOpen, isPopoverOpen]);
|
355
|
-
|
448
|
+
// Add keyboard support for arrow keys to open the popover
|
449
|
+
const { keyboardProps } = useKeyboard({
|
450
|
+
onKeyDown: (e) => {
|
451
|
+
if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !state.isOpen) {
|
452
|
+
e.preventDefault();
|
453
|
+
state.open();
|
454
|
+
}
|
455
|
+
},
|
456
|
+
});
|
457
|
+
useEffect(() => {
|
458
|
+
// Disable the update of the position while the popover is open (with a delay) to avoid jumping
|
459
|
+
setShouldUpdatePosition(!state.isOpen);
|
460
|
+
}, [state.isOpen]);
|
461
|
+
return (_jsx(Button, { ref: triggerRef, "data-menu-trigger": true, type: type, theme: validationState === 'invalid' ? 'danger' : theme, size: size, isDisabled: isDisabled, isLoading: isLoading, mods: {
|
356
462
|
placeholder: !hasSelection,
|
357
463
|
selected: hasSelection,
|
358
464
|
...externalMods,
|
359
|
-
}, icon: icon, rightIcon: _jsx(DirectionIcon, { to: state.isOpen ? 'top' : 'bottom' }), styles: styles, ...
|
465
|
+
}, icon: icon, rightIcon: rightIcon !== undefined ? (rightIcon) : (_jsx(DirectionIcon, { to: state.isOpen ? 'top' : 'bottom' })), styles: styles, ...keyboardProps, "aria-label": `${props['aria-label'] ?? props.label ?? ''}`, children: renderTriggerContent() }));
|
360
466
|
};
|
361
|
-
const filterPickerField = (_jsxs(DialogTrigger, { type: "popover", placement: "bottom start", shouldFlip:
|
362
|
-
|
363
|
-
|
364
|
-
|
365
|
-
|
366
|
-
|
367
|
-
|
368
|
-
|
369
|
-
}, onSelectionChange: (selection) => {
|
370
|
-
// No need to change any flags - children order is cached
|
371
|
-
// Update internal state if uncontrolled
|
372
|
-
if (selectionMode === 'single') {
|
373
|
-
if (!isControlledSingle) {
|
374
|
-
setInternalSelectedKey(selection);
|
375
|
-
}
|
376
|
-
}
|
377
|
-
else {
|
378
|
-
if (!isControlledMultiple) {
|
379
|
-
let normalized = selection;
|
380
|
-
if (Array.isArray(selection)) {
|
381
|
-
normalized = processSelectionArray(selection);
|
467
|
+
const filterPickerField = (_jsx(FilterPickerWrapper, { qa: props.qa || 'FilterPicker', styles: styles, ...otherProps, children: _jsxs(DialogTrigger, { type: "popover", placement: "bottom start", styles: triggerStyles, shouldUpdatePosition: shouldUpdatePosition, shouldFlip: shouldFlip, isDismissable: true, children: [renderTrigger, (close) => (_jsx(Dialog, { display: "grid", styles: { gridRows: '1sf', ...popoverStyles }, children: _jsx(FocusScope, { restoreFocus: true, children: _jsx(FilterListBox, { autoFocus: true, items: items, "aria-label": `${props['aria-label'] ?? props.label ?? ''} Picker`, selectedKey: selectionMode === 'single' ? mappedSelectedKey : undefined, selectedKeys: selectionMode === 'multiple' ? mappedSelectedKeys : undefined, disabledKeys: disabledKeys, focusOnHover: focusOnHover, shouldFocusWrap: shouldFocusWrap, allowsCustomValue: allowsCustomValue, selectionMode: selectionMode, validationState: validationState, isDisabled: isDisabled, stateRef: listStateRef, isCheckable: isCheckable, mods: {
|
468
|
+
popover: true,
|
469
|
+
}, size: size === 'small' ? 'medium' : size, showSelectAll: showSelectAll, selectAllLabel: selectAllLabel, header: header, footer: footer, headerStyles: headerStyles, footerStyles: footerStyles, qa: `${props.qa || 'FilterPicker'}ListBox`, onEscape: () => close(), onOptionClick: (key) => {
|
470
|
+
// For FilterPicker, clicking the content area should close the popover
|
471
|
+
// in multiple selection mode (single mode already closes via onSelectionChange)
|
472
|
+
if ((selectionMode === 'multiple' && isCheckable) ||
|
473
|
+
key === '__ALL__') {
|
474
|
+
close();
|
382
475
|
}
|
383
|
-
|
384
|
-
|
385
|
-
|
386
|
-
|
476
|
+
}, onSelectionChange: (selection) => {
|
477
|
+
// No need to change any flags - children order is cached
|
478
|
+
// Update internal state if uncontrolled
|
479
|
+
if (selectionMode === 'single') {
|
480
|
+
if (!isControlledSingle) {
|
481
|
+
setInternalSelectedKey(selection);
|
482
|
+
}
|
387
483
|
}
|
388
|
-
|
389
|
-
|
390
|
-
|
391
|
-
|
392
|
-
|
393
|
-
|
394
|
-
|
395
|
-
|
396
|
-
|
397
|
-
|
398
|
-
|
399
|
-
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
|
404
|
-
|
405
|
-
|
406
|
-
|
407
|
-
|
408
|
-
|
409
|
-
|
410
|
-
|
411
|
-
|
412
|
-
|
484
|
+
else {
|
485
|
+
if (!isControlledMultiple) {
|
486
|
+
let normalized = selection;
|
487
|
+
if (selection === 'all') {
|
488
|
+
normalized = 'all';
|
489
|
+
}
|
490
|
+
else if (Array.isArray(selection)) {
|
491
|
+
normalized = processSelectionArray(selection);
|
492
|
+
}
|
493
|
+
else if (selection &&
|
494
|
+
typeof selection === 'object' &&
|
495
|
+
selection instanceof Set) {
|
496
|
+
normalized = processSelectionArray(selection);
|
497
|
+
}
|
498
|
+
setInternalSelectedKeys(normalized);
|
499
|
+
}
|
500
|
+
}
|
501
|
+
// Update latest selection ref synchronously
|
502
|
+
if (selectionMode === 'single') {
|
503
|
+
latestSelectionRef.current.single = selection;
|
504
|
+
}
|
505
|
+
else {
|
506
|
+
if (selection === 'all') {
|
507
|
+
latestSelectionRef.current.multiple = 'all';
|
508
|
+
}
|
509
|
+
else if (Array.isArray(selection)) {
|
510
|
+
latestSelectionRef.current.multiple = Array.from(new Set(processSelectionArray(selection)));
|
511
|
+
}
|
512
|
+
else if (selection &&
|
513
|
+
typeof selection === 'object' &&
|
514
|
+
selection instanceof Set) {
|
515
|
+
latestSelectionRef.current.multiple = Array.from(new Set(processSelectionArray(selection)));
|
516
|
+
}
|
517
|
+
else {
|
518
|
+
latestSelectionRef.current.multiple = selection;
|
519
|
+
}
|
520
|
+
}
|
521
|
+
onSelectionChange?.(selection);
|
522
|
+
if (selectionMode === 'single') {
|
523
|
+
close();
|
524
|
+
}
|
525
|
+
}, children: finalChildren }) }) }))] }) }));
|
413
526
|
return wrapWithField(filterPickerField, ref, mergeProps({
|
414
527
|
...props,
|
415
528
|
styles: undefined,
|