@cube-dev/ui-kit 0.0.0-canary-35f1f8f → 0.0.0-canary-fd2e2f2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_internal/hooks/use-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 +2 -1
- package/dist/components/actions/Button/Button.js.map +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 +2 -1
- package/dist/components/actions/ItemButton/ItemButton.js.map +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.d.ts +7 -0
- package/dist/components/actions/Menu/MenuTrigger.js +32 -33
- package/dist/components/actions/Menu/MenuTrigger.js.map +1 -1
- package/dist/components/actions/Menu/SubMenuTrigger.js +7 -20
- package/dist/components/actions/Menu/SubMenuTrigger.js.map +1 -1
- package/dist/components/actions/Menu/SubmenuTriggerContext.js +1 -1
- package/dist/components/actions/Menu/context.js +1 -1
- package/dist/components/actions/Menu/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 +6 -19
- package/dist/components/actions/use-anchored-menu.js.map +1 -1
- package/dist/components/actions/use-context-menu.js +17 -21
- package/dist/components/actions/use-context-menu.js.map +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 +4 -3
- package/dist/components/content/Layout/LayoutHeader.js.map +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.d.ts +28 -28
- package/dist/components/content/Text.js +1 -1
- package/dist/components/content/TextItem/TextItem.js +1 -1
- package/dist/components/content/Title.js +1 -1
- package/dist/components/content/Tree/Tree.js +1 -1
- package/dist/components/content/Tree/TreeNode.js +1 -1
- package/dist/components/content/Tree/styled.js +1 -1
- package/dist/components/content/Tree/tree-index.js +1 -1
- package/dist/components/content/Tree/use-checkbox-tree.js +1 -1
- package/dist/components/content/Tree/use-load-data.js +1 -1
- package/dist/components/content/highlightText.js +1 -1
- package/dist/components/content/use-auto-tooltip.js +1 -1
- package/dist/components/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 +14 -20
- package/dist/components/fields/ComboBox/ComboBox.js.map +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 +14 -21
- package/dist/components/fields/FilterPicker/FilterPicker.js.map +1 -1
- package/dist/components/fields/Input/Input.js +1 -1
- package/dist/components/fields/ListBox/DraggableListBox.js +1 -1
- package/dist/components/fields/ListBox/ListBox.js +8 -16
- package/dist/components/fields/ListBox/ListBox.js.map +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 +14 -21
- 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.js +14 -21
- package/dist/components/fields/Select/Select.js.map +1 -1
- package/dist/components/fields/Slider/Gradation.js +1 -1
- package/dist/components/fields/Slider/HueSlider.js +1 -1
- package/dist/components/fields/Slider/RangeSlider.js +1 -1
- package/dist/components/fields/Slider/Slider.js +1 -1
- package/dist/components/fields/Slider/SliderBase.js +1 -1
- package/dist/components/fields/Slider/SliderThumb.js +1 -1
- package/dist/components/fields/Slider/SliderTrack.js +1 -1
- package/dist/components/fields/Slider/elements.js +1 -1
- package/dist/components/fields/Slider/index.js +1 -1
- package/dist/components/fields/Switch/Switch.js +1 -1
- package/dist/components/fields/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 +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.js +1 -1
- package/dist/components/navigation/Tabs/use-tab-editing.js +1 -1
- package/dist/components/navigation/Tabs/use-tab-indicator.js +1 -1
- package/dist/components/organisms/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/OpenTransitionContext.js +1 -1
- package/dist/components/overlays/Modal/Overlay.js +1 -1
- package/dist/components/overlays/Modal/Popover.js +1 -1
- package/dist/components/overlays/Modal/Tray.js +4 -3
- package/dist/components/overlays/Modal/Tray.js.map +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/DraggableCollection.js +1 -1
- package/dist/components/shared/InvalidIcon.js +1 -1
- package/dist/components/shared/ValidIcon.js +1 -1
- package/dist/components/status/LoadingAnimation/LoadingAnimation.js +1 -1
- package/dist/components/status/Spin/Cube.js +1 -1
- package/dist/components/status/Spin/InternalSpinner.js +1 -1
- package/dist/components/status/Spin/Spin.js +1 -1
- package/dist/components/status/Spin/SpinsContainer.js +1 -1
- package/dist/data/item-themes.js +1 -1
- package/dist/data/themes.js +1 -1
- package/dist/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/GripVerticalIcon.js +1 -1
- package/dist/icons/HierarchyIcon.js +1 -1
- package/dist/icons/HierarchyOpenIcon.js +1 -1
- package/dist/icons/Icon.js +1 -1
- package/dist/icons/InfoCircleIcon.js +1 -1
- package/dist/icons/InfoIcon.js +1 -1
- package/dist/icons/KeyIcon.js +1 -1
- package/dist/icons/LeftIcon.js +1 -1
- package/dist/icons/LineChartIcon.js +1 -1
- package/dist/icons/LoadingIcon.js +1 -1
- package/dist/icons/LockFilledIcon.js +1 -1
- package/dist/icons/LockIcon.js +1 -1
- package/dist/icons/MoreIcon.js +1 -1
- package/dist/icons/NotAllowedIcon.js +1 -1
- package/dist/icons/Number123Icon.js +1 -1
- package/dist/icons/NumberIcon.js +1 -1
- package/dist/icons/PauseCircleFilledIcon.js +1 -1
- package/dist/icons/PauseCircleIcon.js +1 -1
- package/dist/icons/PauseIcon.js +1 -1
- package/dist/icons/PercentageIcon.js +1 -1
- package/dist/icons/PieChartIcon.js +1 -1
- package/dist/icons/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.js +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/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/usePopoverSync.js +69 -0
- package/dist/utils/react/usePopoverSync.js.map +1 -0
- 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.js +1 -1
- package/dist/utils/styles.js +1 -1
- package/dist/utils/tree.js +1 -1
- package/dist/utils/warnings.js +1 -1
- package/dist/version.js +2 -2
- package/package.json +2 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
|
|
2
2
|
import { useLayoutEffect as useLayoutEffect$1 } from "../../utils/react/useLayoutEffect.js";
|
|
3
3
|
import { useRef } from "react";
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
|
|
2
2
|
import { useEvent } from "../use-event.js";
|
|
3
3
|
import { Timer } from "./timer.js";
|
|
4
4
|
import { useEffect, useState } from "react";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
|
|
2
2
|
import { useEvent } from "./use-event.js";
|
|
3
3
|
import { warn } from "../../utils/warnings.js";
|
|
4
4
|
import { useRef } from "react";
|
package/dist/components/Block.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
|
|
2
2
|
import { extractStyles } from "../utils/styles.js";
|
|
3
3
|
import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
|
|
4
4
|
import { forwardRef } from "react";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
|
|
2
2
|
import { ItemAction } from "./actions/ItemAction/ItemAction.js";
|
|
3
3
|
import { ItemBadge } from "./content/ItemBadge/ItemBadge.js";
|
|
4
4
|
import { Item } from "react-stately";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
|
|
2
2
|
import { TOKENS } from "../tokens/index.js";
|
|
3
3
|
import { useGlobalStyles, useRawCSS } from "@tenphi/tasty";
|
|
4
4
|
import { useMemo } from "react";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
|
|
2
2
|
import { useCombinedRefs } from "../utils/react/useCombinedRefs.js";
|
|
3
3
|
import { filterBaseProps, tasty } from "@tenphi/tasty";
|
|
4
4
|
import { forwardRef, useCallback, useEffect, useState } from "react";
|
package/dist/components/Root.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
|
|
2
2
|
import { extractStyles } from "../utils/styles.js";
|
|
3
3
|
import { EventBusProvider } from "../utils/react/useEventBus.js";
|
|
4
4
|
import { PortalProvider } from "./portal/PortalProvider.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
|
|
2
2
|
import { extractStyles } from "../../../utils/styles.js";
|
|
3
3
|
import { useAction } from "../use-action.js";
|
|
4
4
|
import { CONTAINER_STYLES, TEXT_STYLES, tasty } from "@tenphi/tasty";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
|
|
2
2
|
import { useEvent } from "../../../_internal/hooks/use-event.js";
|
|
3
3
|
import { _Item } from "../../content/Item/Item.js";
|
|
4
4
|
import { Button } from "../Button/Button.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
|
|
2
2
|
import { extractStyles } from "../../../utils/styles.js";
|
|
3
3
|
import { mergeProps } from "../../../utils/react/mergeProps.js";
|
|
4
4
|
import { resolveIcon } from "../../../utils/react/resolveIcon.js";
|
|
@@ -306,6 +306,7 @@ const Button = forwardRef(function Button(allProps, ref) {
|
|
|
306
306
|
"data-theme": theme,
|
|
307
307
|
"data-type": type ?? "outline",
|
|
308
308
|
"data-size": size,
|
|
309
|
+
"data-popover-dismiss": "",
|
|
309
310
|
styles,
|
|
310
311
|
tokens: sizeTokenValue ? { $size: sizeTokenValue } : void 0,
|
|
311
312
|
children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":[],"sources":["../../../../src/components/actions/Button/Button.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n CONTAINER_STYLES,\n Mods,\n Styles,\n tasty,\n TEXT_STYLES,\n} from '@tenphi/tasty';\nimport {\n Children,\n forwardRef,\n HTMLAttributes,\n isValidElement,\n ReactNode,\n RefObject,\n useMemo,\n useState,\n} from 'react';\nimport { OverlayProps } from 'react-aria';\n\nimport { useIsFirstRender } from '../../../_internal/hooks/use-is-first-render';\nimport { useWarn } from '../../../_internal/hooks/use-warn';\nimport {\n DANGER_CLEAR_STYLES,\n DANGER_LINK_STYLES,\n DANGER_NEUTRAL_STYLES,\n DANGER_OUTLINE_STYLES,\n DANGER_PRIMARY_STYLES,\n DANGER_SECONDARY_STYLES,\n DEFAULT_CLEAR_STYLES,\n DEFAULT_LINK_STYLES,\n DEFAULT_NEUTRAL_STYLES,\n DEFAULT_OUTLINE_STYLES,\n DEFAULT_PRIMARY_STYLES,\n DEFAULT_SECONDARY_STYLES,\n NOTE_CLEAR_STYLES,\n NOTE_LINK_STYLES,\n NOTE_NEUTRAL_STYLES,\n NOTE_OUTLINE_STYLES,\n NOTE_PRIMARY_STYLES,\n NOTE_SECONDARY_STYLES,\n SPECIAL_CLEAR_STYLES,\n SPECIAL_LINK_STYLES,\n SPECIAL_NEUTRAL_STYLES,\n SPECIAL_OUTLINE_STYLES,\n SPECIAL_PRIMARY_STYLES,\n SPECIAL_SECONDARY_STYLES,\n SUCCESS_CLEAR_STYLES,\n SUCCESS_LINK_STYLES,\n SUCCESS_NEUTRAL_STYLES,\n SUCCESS_OUTLINE_STYLES,\n SUCCESS_PRIMARY_STYLES,\n SUCCESS_SECONDARY_STYLES,\n WARNING_CLEAR_STYLES,\n WARNING_LINK_STYLES,\n WARNING_NEUTRAL_STYLES,\n WARNING_OUTLINE_STYLES,\n WARNING_PRIMARY_STYLES,\n WARNING_SECONDARY_STYLES,\n} from '../../../data/item-themes';\nimport { LoadingIcon } from '../../../icons';\nimport { DynamicIcon, mergeProps, resolveIcon } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useAutoTooltip } from '../../content/use-auto-tooltip';\nimport { DisplayTransition } from '../../helpers/DisplayTransition';\nimport { IconSwitch } from '../../helpers/IconSwitch/IconSwitch';\nimport { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';\nimport { CubeActionProps } from '../Action/Action';\nimport { useButtonSplitContext } from '../ButtonSplit/context';\nimport { useAction } from '../use-action';\n\nconst BUTTON_SIZE_VALUES = [\n 'xsmall',\n 'small',\n 'medium',\n 'large',\n 'xlarge',\n 'inline',\n] as const;\n\n/** Known modifiers for Button component */\nexport type ButtonMods = Mods<{\n pressed?: boolean;\n loading?: boolean;\n selected?: boolean;\n 'has-icons'?: boolean;\n 'has-icon'?: boolean;\n 'has-right-icon'?: boolean;\n 'single-icon'?: boolean;\n 'text-only'?: boolean;\n 'raw-children'?: boolean;\n}>;\n\nexport interface CubeButtonProps extends CubeActionProps {\n icon?: DynamicIcon<ButtonMods>;\n rightIcon?: DynamicIcon<ButtonMods>;\n isLoading?: boolean;\n isSelected?: boolean;\n type?:\n | 'primary'\n | 'secondary'\n | 'danger'\n | 'link'\n | 'clear'\n | 'outline'\n | 'neutral'\n | (string & {});\n size?:\n | 'xsmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'xlarge'\n | 'inline'\n | number\n | (string & {});\n /**\n * Tooltip content and configuration:\n * - string: simple tooltip text\n * - true: auto tooltip on overflow (shows children as tooltip when truncated)\n * - object: advanced configuration with optional auto property\n */\n tooltip?:\n | string\n | boolean\n | (Omit<CubeTooltipProviderProps, 'children'> & { auto?: boolean });\n /**\n * @private\n * Default tooltip placement for the button.\n * @default \"top\"\n */\n defaultTooltipPlacement?: OverlayProps['placement'];\n}\n\nexport type ButtonVariant =\n | 'default.primary'\n | 'default.secondary'\n | 'default.outline'\n | 'default.neutral'\n | 'default.clear'\n | 'default.link'\n | 'danger.primary'\n | 'danger.secondary'\n | 'danger.outline'\n | 'danger.neutral'\n | 'danger.clear'\n | 'danger.link'\n | 'success.primary'\n | 'success.secondary'\n | 'success.outline'\n | 'success.neutral'\n | 'success.clear'\n | 'success.link'\n | 'warning.primary'\n | 'warning.secondary'\n | 'warning.outline'\n | 'warning.neutral'\n | 'warning.clear'\n | 'warning.link'\n | 'note.primary'\n | 'note.secondary'\n | 'note.outline'\n | 'note.neutral'\n | 'note.clear'\n | 'note.link'\n | 'special.primary'\n | 'special.secondary'\n | 'special.outline'\n | 'special.neutral'\n | 'special.clear'\n | 'special.link';\n\nconst STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];\n\nconst DEFAULT_ICON_STYLES: Styles = {\n $: '>',\n position: 'relative',\n display: 'grid',\n placeItems: 'center',\n placeContent: 'center',\n placeSelf: 'stretch',\n // overflow: 'hidden',\n width: 'fixed ($size - 2bw)',\n height: 'fixed ($size - 2bw)',\n pointerEvents: 'none',\n transition: 'theme, width, height, translate',\n};\n\nexport const DEFAULT_BUTTON_STYLES: Styles = {\n recipe: 'reset button',\n display: 'inline-grid',\n flow: 'column dense',\n gap: 0,\n placeItems: {\n '': 'stretch',\n 'raw-children': 'center stretch',\n },\n placeContent: 'center',\n position: 'relative',\n preset: {\n '': 't3m',\n 'size=xsmall': 't4',\n 'size=xlarge': 't2m',\n 'type=link': 'strong',\n },\n outlineOffset: 1,\n padding: {\n '': 0,\n 'raw-children & !has-icons':\n '$block-padding $inline-padding $block-padding $inline-padding',\n 'type=link': '0',\n },\n width: {\n '': 'min $size',\n 'has-icon & has-right-icon': 'min ($size * 2 - 2bw)',\n 'single-icon': 'fixed $size',\n 'type=link': 'min 1ch',\n },\n height: {\n '': 'fixed $size',\n 'type=link': 'initial',\n },\n whiteSpace: 'nowrap',\n radius: {\n '': true,\n 'type=link & !focused': 0,\n '@parent(button-split, >) & !:last-child': '1r left',\n '@parent(button-split, >) & !:first-child': '1r right',\n '@parent(button-split, >) & !:first-child & !:last-child': 0,\n },\n margin: {\n '': 0,\n '@parent(button-split, >) & !:first-child & (type=secondary | type=outline | type=primary)':\n '-1bw left',\n },\n zIndex: {\n '@parent(button-split, >) & :hover': 1,\n '@parent(button-split, >) & :focus-visible': 2,\n },\n transition: 'theme, grid-template, padding',\n verticalAlign: 'bottom',\n\n $size: {\n '': '$size-md',\n 'size=xsmall': '$size-xs',\n 'size=small': '$size-sm',\n 'size=medium': '$size-md',\n 'size=large': '$size-lg',\n 'size=xlarge': '$size-xl',\n 'size=inline': '(1lh + 2bw)',\n },\n '$inline-padding': {\n '': 'max($min-inline-padding, (($size - 1lh - 2bw) / 2 + $inline-compensation))',\n },\n '$block-padding': {\n '': '.5x',\n 'size=xsmall | size=small': '.25x',\n },\n '$inline-compensation': '.5x',\n '$min-inline-padding': '(1x - 1bw)',\n '$left-padding': {\n '': '$inline-padding',\n 'is-icon-shown': '0px',\n },\n '$right-padding': {\n '': '$inline-padding',\n 'is-right-icon-shown': '0px',\n },\n\n // Icon sub-element (recommended format)\n Icon: {\n ...DEFAULT_ICON_STYLES,\n width: {\n '': 'fixed 0px',\n 'is-icon-shown': 'fixed ($size - 2bw)',\n },\n opacity: {\n '': 0,\n 'is-icon-shown': 1,\n },\n translate: {\n '': '($size * 1 / 4) 0',\n 'is-icon-shown': '0 0',\n },\n },\n\n // RightIcon sub-element (recommended format)\n RightIcon: {\n ...DEFAULT_ICON_STYLES,\n width: {\n '': 'fixed 0px',\n 'is-right-icon-shown': 'fixed ($size - 2bw)',\n },\n opacity: {\n '': 0,\n 'is-right-icon-shown': 1,\n },\n translate: {\n '': '($size * -1 / 4) 0',\n 'is-right-icon-shown': '0 0',\n },\n },\n\n // Label sub-element (recommended format)\n Label: {\n $: '>',\n display: 'block',\n placeSelf: 'center stretch',\n boxSizing: 'border-box',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n width: '0 100%',\n textAlign: 'center',\n transition: 'theme, padding',\n padding: {\n '': '$block-padding $right-padding $block-padding $left-padding',\n 'type=link': '0',\n },\n },\n} as const;\n\nconst ButtonElement = tasty({\n qa: 'Button',\n styles: DEFAULT_BUTTON_STYLES,\n variants: {\n // Default theme\n 'default.primary': DEFAULT_PRIMARY_STYLES,\n 'default.secondary': DEFAULT_SECONDARY_STYLES,\n 'default.outline': DEFAULT_OUTLINE_STYLES,\n 'default.neutral': DEFAULT_NEUTRAL_STYLES,\n 'default.clear': DEFAULT_CLEAR_STYLES,\n 'default.link': DEFAULT_LINK_STYLES,\n\n // Danger theme\n 'danger.primary': DANGER_PRIMARY_STYLES,\n 'danger.secondary': DANGER_SECONDARY_STYLES,\n 'danger.outline': DANGER_OUTLINE_STYLES,\n 'danger.neutral': DANGER_NEUTRAL_STYLES,\n 'danger.clear': DANGER_CLEAR_STYLES,\n 'danger.link': DANGER_LINK_STYLES,\n\n // Success theme\n 'success.primary': SUCCESS_PRIMARY_STYLES,\n 'success.secondary': SUCCESS_SECONDARY_STYLES,\n 'success.outline': SUCCESS_OUTLINE_STYLES,\n 'success.neutral': SUCCESS_NEUTRAL_STYLES,\n 'success.clear': SUCCESS_CLEAR_STYLES,\n 'success.link': SUCCESS_LINK_STYLES,\n\n // Warning theme\n 'warning.primary': WARNING_PRIMARY_STYLES,\n 'warning.secondary': WARNING_SECONDARY_STYLES,\n 'warning.outline': WARNING_OUTLINE_STYLES,\n 'warning.neutral': WARNING_NEUTRAL_STYLES,\n 'warning.clear': WARNING_CLEAR_STYLES,\n 'warning.link': WARNING_LINK_STYLES,\n\n // Note theme\n 'note.primary': NOTE_PRIMARY_STYLES,\n 'note.secondary': NOTE_SECONDARY_STYLES,\n 'note.outline': NOTE_OUTLINE_STYLES,\n 'note.neutral': NOTE_NEUTRAL_STYLES,\n 'note.clear': NOTE_CLEAR_STYLES,\n 'note.link': NOTE_LINK_STYLES,\n\n // Special theme\n 'special.primary': SPECIAL_PRIMARY_STYLES,\n 'special.secondary': SPECIAL_SECONDARY_STYLES,\n 'special.outline': SPECIAL_OUTLINE_STYLES,\n 'special.neutral': SPECIAL_NEUTRAL_STYLES,\n 'special.clear': SPECIAL_CLEAR_STYLES,\n 'special.link': SPECIAL_LINK_STYLES,\n },\n});\n\nexport const Button = forwardRef(function Button(\n allProps: CubeButtonProps,\n ref: FocusableRef<HTMLElement>,\n) {\n const splitContext = useButtonSplitContext();\n\n let {\n type,\n size: sizeProp,\n label,\n children,\n theme = splitContext?.theme ?? 'default',\n icon: iconProp,\n rightIcon: rightIconProp,\n mods,\n download,\n tooltip = true,\n defaultTooltipPlacement = 'top',\n ...props\n } = allProps;\n\n type = type ?? splitContext?.type;\n const size =\n sizeProp ?? splitContext?.size ?? (type === 'link' ? 'inline' : 'medium');\n\n const isDisabled =\n splitContext?.isDisabled || props.isDisabled || props.isLoading;\n const isLoading = props.isLoading;\n const isSelected = props.isSelected;\n\n const { actionProps, isPressed } = useAction(\n { ...allProps, isDisabled, ...(label ? { label } : {}) },\n ref,\n );\n\n const styles = extractStyles(props, STYLE_PROPS);\n const isDisabledElement = actionProps.isDisabled;\n\n delete actionProps.isDisabled;\n\n // Base mods for icon resolution (without icon-dependent mods)\n const baseMods = useMemo<ButtonMods>(\n () => ({\n pressed: isPressed && !isDisabled,\n loading: isLoading,\n selected: isSelected,\n ...mods,\n }),\n [isPressed, isDisabled, isLoading, isSelected, mods],\n );\n\n // Resolve dynamic icon props\n const resolvedIcon = useMemo(\n () => resolveIcon(iconProp, baseMods),\n [iconProp, baseMods],\n );\n const resolvedRightIcon = useMemo(\n () => resolveIcon(rightIconProp, baseMods),\n [rightIconProp, baseMods],\n );\n\n const hasLeftSlot = resolvedIcon.hasSlot;\n const hasRightSlot = resolvedRightIcon.hasSlot;\n\n const icon: ReactNode = resolvedIcon.content;\n const rightIcon: ReactNode = resolvedRightIcon.content;\n\n // Generate stable keys for icon transitions based on icon type\n const iconKey = isLoading\n ? 'loading'\n : isValidElement(icon)\n ? (icon.type as any)?.displayName || (icon.type as any)?.name || 'icon'\n : icon\n ? 'icon'\n : 'empty';\n\n const rightIconKey = isValidElement(rightIcon)\n ? (rightIcon.type as any)?.displayName ||\n (rightIcon.type as any)?.name ||\n 'icon'\n : rightIcon\n ? 'icon'\n : 'empty';\n\n children = children || hasLeftSlot || hasRightSlot ? children : label;\n\n const specifiedLabel =\n label ?? props['aria-label'] ?? props['aria-labelledby'];\n\n // Warn about accessibility issues when button has no accessible label\n useWarn(!children && hasLeftSlot && !specifiedLabel, {\n key: ['button-icon-no-label', hasLeftSlot],\n args: [\n 'accessibility issue:',\n 'If you provide `icon` property for a Button and do not provide any children then you should specify the `aria-label` property to make sure the Button element stays accessible.',\n ],\n });\n\n useWarn(!children && !hasLeftSlot && !specifiedLabel, {\n key: ['button-no-content-no-label', hasLeftSlot],\n args: [\n 'accessibility issue:',\n 'If you provide no children for a Button then you should specify the `aria-label` property to make sure the Button element stays accessible.',\n ],\n });\n\n if (!children && !specifiedLabel) {\n label = 'Unnamed'; // fix to avoid warning in production\n }\n\n const hasLeftIcon = !!(hasLeftSlot || isLoading);\n const hasChildren = children != null;\n const singleIcon = !!(\n ((hasLeftIcon && !hasRightSlot) || (hasRightSlot && !hasLeftIcon)) &&\n !hasChildren\n );\n\n const hasIcons = hasLeftIcon || hasRightSlot;\n const rawChildren = !!(\n hasChildren &&\n typeof children !== 'string' &&\n !Children.toArray(children).some((child) => typeof child === 'string')\n );\n\n const [isIconShown, setIsIconShown] = useState(hasLeftIcon);\n const [isRightIconShown, setIsRightIconShown] = useState(hasRightSlot);\n const isFirstRender = useIsFirstRender();\n\n const modifiers = useMemo<ButtonMods>(\n () => ({\n ...baseMods,\n 'has-icons': hasIcons,\n 'has-icon': hasLeftIcon,\n 'is-icon-shown': isIconShown,\n 'has-right-icon': hasRightSlot,\n 'is-right-icon-shown': isRightIconShown,\n 'single-icon': singleIcon,\n 'text-only': !!(hasChildren && typeof children === 'string' && !hasIcons),\n 'raw-children': rawChildren,\n 'has-content': children != null,\n }),\n [\n baseMods,\n children,\n hasLeftIcon,\n hasRightSlot,\n singleIcon,\n hasIcons,\n hasChildren,\n rawChildren,\n isIconShown,\n isRightIconShown,\n ],\n );\n\n const {\n labelProps: finalLabelProps,\n labelRef,\n renderWithTooltip,\n } = useAutoTooltip({\n tooltip,\n children,\n labelProps: undefined,\n });\n\n // Render function that creates the button element\n const renderButtonElement = (\n tooltipTriggerProps?: HTMLAttributes<HTMLElement>,\n tooltipRef?: RefObject<HTMLElement>,\n ): ReactNode => {\n // Use callback ref to merge multiple refs without calling hooks\n const handleRef = (element: HTMLElement | null) => {\n // Set the component's forwarded ref from useAction\n const domRef = actionProps.ref as any;\n if (typeof domRef === 'function') {\n domRef(element);\n } else if (domRef) {\n domRef.current = element;\n }\n // Set the tooltip ref if provided\n if (tooltipRef) {\n (tooltipRef as any).current = element;\n }\n };\n\n // Determine if size is custom (number or unrecognized string)\n const isCustomSize =\n typeof size === 'number' ||\n (size != null &&\n !(BUTTON_SIZE_VALUES as readonly string[]).includes(size));\n const sizeTokenValue =\n typeof size === 'number' ? `${size}px` : isCustomSize ? size : undefined;\n\n return (\n <ButtonElement\n download={download}\n {...mergeProps(actionProps, tooltipTriggerProps || {})}\n ref={handleRef}\n mods={{ ...actionProps.mods, ...modifiers }}\n disabled={isDisabledElement}\n variant={`${theme}.${type ?? 'outline'}` as ButtonVariant}\n data-theme={theme}\n data-type={type ?? 'outline'}\n data-size={size}\n styles={styles}\n tokens={sizeTokenValue ? { $size: sizeTokenValue } : undefined}\n >\n <DisplayTransition\n isShown={hasLeftIcon}\n animateOnMount={!isFirstRender}\n onToggle={setIsIconShown}\n >\n {({ ref }) => (\n <div ref={ref} data-element=\"Icon\" aria-hidden=\"true\">\n <IconSwitch noWrapper contentKey={iconKey}>\n {isLoading ? <LoadingIcon /> : icon}\n </IconSwitch>\n </div>\n )}\n </DisplayTransition>\n {hasChildren &&\n (rawChildren ? (\n children\n ) : (\n <div data-element=\"Label\" {...finalLabelProps} ref={labelRef}>\n {children}\n </div>\n ))}\n <DisplayTransition\n isShown={hasRightSlot}\n animateOnMount={!isFirstRender}\n onToggle={setIsRightIconShown}\n >\n {({ ref }) => (\n <div ref={ref} data-element=\"RightIcon\" aria-hidden=\"true\">\n <IconSwitch noWrapper contentKey={rightIconKey}>\n {rightIcon}\n </IconSwitch>\n </div>\n )}\n </DisplayTransition>\n </ButtonElement>\n );\n };\n\n return renderWithTooltip(renderButtonElement, defaultTooltipPlacement);\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Button.js","names":[],"sources":["../../../../src/components/actions/Button/Button.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n CONTAINER_STYLES,\n Mods,\n Styles,\n tasty,\n TEXT_STYLES,\n} from '@tenphi/tasty';\nimport {\n Children,\n forwardRef,\n HTMLAttributes,\n isValidElement,\n ReactNode,\n RefObject,\n useMemo,\n useState,\n} from 'react';\nimport { OverlayProps } from 'react-aria';\n\nimport { useIsFirstRender } from '../../../_internal/hooks/use-is-first-render';\nimport { useWarn } from '../../../_internal/hooks/use-warn';\nimport {\n DANGER_CLEAR_STYLES,\n DANGER_LINK_STYLES,\n DANGER_NEUTRAL_STYLES,\n DANGER_OUTLINE_STYLES,\n DANGER_PRIMARY_STYLES,\n DANGER_SECONDARY_STYLES,\n DEFAULT_CLEAR_STYLES,\n DEFAULT_LINK_STYLES,\n DEFAULT_NEUTRAL_STYLES,\n DEFAULT_OUTLINE_STYLES,\n DEFAULT_PRIMARY_STYLES,\n DEFAULT_SECONDARY_STYLES,\n NOTE_CLEAR_STYLES,\n NOTE_LINK_STYLES,\n NOTE_NEUTRAL_STYLES,\n NOTE_OUTLINE_STYLES,\n NOTE_PRIMARY_STYLES,\n NOTE_SECONDARY_STYLES,\n SPECIAL_CLEAR_STYLES,\n SPECIAL_LINK_STYLES,\n SPECIAL_NEUTRAL_STYLES,\n SPECIAL_OUTLINE_STYLES,\n SPECIAL_PRIMARY_STYLES,\n SPECIAL_SECONDARY_STYLES,\n SUCCESS_CLEAR_STYLES,\n SUCCESS_LINK_STYLES,\n SUCCESS_NEUTRAL_STYLES,\n SUCCESS_OUTLINE_STYLES,\n SUCCESS_PRIMARY_STYLES,\n SUCCESS_SECONDARY_STYLES,\n WARNING_CLEAR_STYLES,\n WARNING_LINK_STYLES,\n WARNING_NEUTRAL_STYLES,\n WARNING_OUTLINE_STYLES,\n WARNING_PRIMARY_STYLES,\n WARNING_SECONDARY_STYLES,\n} from '../../../data/item-themes';\nimport { LoadingIcon } from '../../../icons';\nimport { DynamicIcon, mergeProps, resolveIcon } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useAutoTooltip } from '../../content/use-auto-tooltip';\nimport { DisplayTransition } from '../../helpers/DisplayTransition';\nimport { IconSwitch } from '../../helpers/IconSwitch/IconSwitch';\nimport { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';\nimport { CubeActionProps } from '../Action/Action';\nimport { useButtonSplitContext } from '../ButtonSplit/context';\nimport { useAction } from '../use-action';\n\nconst BUTTON_SIZE_VALUES = [\n 'xsmall',\n 'small',\n 'medium',\n 'large',\n 'xlarge',\n 'inline',\n] as const;\n\n/** Known modifiers for Button component */\nexport type ButtonMods = Mods<{\n pressed?: boolean;\n loading?: boolean;\n selected?: boolean;\n 'has-icons'?: boolean;\n 'has-icon'?: boolean;\n 'has-right-icon'?: boolean;\n 'single-icon'?: boolean;\n 'text-only'?: boolean;\n 'raw-children'?: boolean;\n}>;\n\nexport interface CubeButtonProps extends CubeActionProps {\n icon?: DynamicIcon<ButtonMods>;\n rightIcon?: DynamicIcon<ButtonMods>;\n isLoading?: boolean;\n isSelected?: boolean;\n type?:\n | 'primary'\n | 'secondary'\n | 'danger'\n | 'link'\n | 'clear'\n | 'outline'\n | 'neutral'\n | (string & {});\n size?:\n | 'xsmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'xlarge'\n | 'inline'\n | number\n | (string & {});\n /**\n * Tooltip content and configuration:\n * - string: simple tooltip text\n * - true: auto tooltip on overflow (shows children as tooltip when truncated)\n * - object: advanced configuration with optional auto property\n */\n tooltip?:\n | string\n | boolean\n | (Omit<CubeTooltipProviderProps, 'children'> & { auto?: boolean });\n /**\n * @private\n * Default tooltip placement for the button.\n * @default \"top\"\n */\n defaultTooltipPlacement?: OverlayProps['placement'];\n}\n\nexport type ButtonVariant =\n | 'default.primary'\n | 'default.secondary'\n | 'default.outline'\n | 'default.neutral'\n | 'default.clear'\n | 'default.link'\n | 'danger.primary'\n | 'danger.secondary'\n | 'danger.outline'\n | 'danger.neutral'\n | 'danger.clear'\n | 'danger.link'\n | 'success.primary'\n | 'success.secondary'\n | 'success.outline'\n | 'success.neutral'\n | 'success.clear'\n | 'success.link'\n | 'warning.primary'\n | 'warning.secondary'\n | 'warning.outline'\n | 'warning.neutral'\n | 'warning.clear'\n | 'warning.link'\n | 'note.primary'\n | 'note.secondary'\n | 'note.outline'\n | 'note.neutral'\n | 'note.clear'\n | 'note.link'\n | 'special.primary'\n | 'special.secondary'\n | 'special.outline'\n | 'special.neutral'\n | 'special.clear'\n | 'special.link';\n\nconst STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];\n\nconst DEFAULT_ICON_STYLES: Styles = {\n $: '>',\n position: 'relative',\n display: 'grid',\n placeItems: 'center',\n placeContent: 'center',\n placeSelf: 'stretch',\n // overflow: 'hidden',\n width: 'fixed ($size - 2bw)',\n height: 'fixed ($size - 2bw)',\n pointerEvents: 'none',\n transition: 'theme, width, height, translate',\n};\n\nexport const DEFAULT_BUTTON_STYLES: Styles = {\n recipe: 'reset button',\n display: 'inline-grid',\n flow: 'column dense',\n gap: 0,\n placeItems: {\n '': 'stretch',\n 'raw-children': 'center stretch',\n },\n placeContent: 'center',\n position: 'relative',\n preset: {\n '': 't3m',\n 'size=xsmall': 't4',\n 'size=xlarge': 't2m',\n 'type=link': 'strong',\n },\n outlineOffset: 1,\n padding: {\n '': 0,\n 'raw-children & !has-icons':\n '$block-padding $inline-padding $block-padding $inline-padding',\n 'type=link': '0',\n },\n width: {\n '': 'min $size',\n 'has-icon & has-right-icon': 'min ($size * 2 - 2bw)',\n 'single-icon': 'fixed $size',\n 'type=link': 'min 1ch',\n },\n height: {\n '': 'fixed $size',\n 'type=link': 'initial',\n },\n whiteSpace: 'nowrap',\n radius: {\n '': true,\n 'type=link & !focused': 0,\n '@parent(button-split, >) & !:last-child': '1r left',\n '@parent(button-split, >) & !:first-child': '1r right',\n '@parent(button-split, >) & !:first-child & !:last-child': 0,\n },\n margin: {\n '': 0,\n '@parent(button-split, >) & !:first-child & (type=secondary | type=outline | type=primary)':\n '-1bw left',\n },\n zIndex: {\n '@parent(button-split, >) & :hover': 1,\n '@parent(button-split, >) & :focus-visible': 2,\n },\n transition: 'theme, grid-template, padding',\n verticalAlign: 'bottom',\n\n $size: {\n '': '$size-md',\n 'size=xsmall': '$size-xs',\n 'size=small': '$size-sm',\n 'size=medium': '$size-md',\n 'size=large': '$size-lg',\n 'size=xlarge': '$size-xl',\n 'size=inline': '(1lh + 2bw)',\n },\n '$inline-padding': {\n '': 'max($min-inline-padding, (($size - 1lh - 2bw) / 2 + $inline-compensation))',\n },\n '$block-padding': {\n '': '.5x',\n 'size=xsmall | size=small': '.25x',\n },\n '$inline-compensation': '.5x',\n '$min-inline-padding': '(1x - 1bw)',\n '$left-padding': {\n '': '$inline-padding',\n 'is-icon-shown': '0px',\n },\n '$right-padding': {\n '': '$inline-padding',\n 'is-right-icon-shown': '0px',\n },\n\n // Icon sub-element (recommended format)\n Icon: {\n ...DEFAULT_ICON_STYLES,\n width: {\n '': 'fixed 0px',\n 'is-icon-shown': 'fixed ($size - 2bw)',\n },\n opacity: {\n '': 0,\n 'is-icon-shown': 1,\n },\n translate: {\n '': '($size * 1 / 4) 0',\n 'is-icon-shown': '0 0',\n },\n },\n\n // RightIcon sub-element (recommended format)\n RightIcon: {\n ...DEFAULT_ICON_STYLES,\n width: {\n '': 'fixed 0px',\n 'is-right-icon-shown': 'fixed ($size - 2bw)',\n },\n opacity: {\n '': 0,\n 'is-right-icon-shown': 1,\n },\n translate: {\n '': '($size * -1 / 4) 0',\n 'is-right-icon-shown': '0 0',\n },\n },\n\n // Label sub-element (recommended format)\n Label: {\n $: '>',\n display: 'block',\n placeSelf: 'center stretch',\n boxSizing: 'border-box',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n width: '0 100%',\n textAlign: 'center',\n transition: 'theme, padding',\n padding: {\n '': '$block-padding $right-padding $block-padding $left-padding',\n 'type=link': '0',\n },\n },\n} as const;\n\nconst ButtonElement = tasty({\n qa: 'Button',\n styles: DEFAULT_BUTTON_STYLES,\n variants: {\n // Default theme\n 'default.primary': DEFAULT_PRIMARY_STYLES,\n 'default.secondary': DEFAULT_SECONDARY_STYLES,\n 'default.outline': DEFAULT_OUTLINE_STYLES,\n 'default.neutral': DEFAULT_NEUTRAL_STYLES,\n 'default.clear': DEFAULT_CLEAR_STYLES,\n 'default.link': DEFAULT_LINK_STYLES,\n\n // Danger theme\n 'danger.primary': DANGER_PRIMARY_STYLES,\n 'danger.secondary': DANGER_SECONDARY_STYLES,\n 'danger.outline': DANGER_OUTLINE_STYLES,\n 'danger.neutral': DANGER_NEUTRAL_STYLES,\n 'danger.clear': DANGER_CLEAR_STYLES,\n 'danger.link': DANGER_LINK_STYLES,\n\n // Success theme\n 'success.primary': SUCCESS_PRIMARY_STYLES,\n 'success.secondary': SUCCESS_SECONDARY_STYLES,\n 'success.outline': SUCCESS_OUTLINE_STYLES,\n 'success.neutral': SUCCESS_NEUTRAL_STYLES,\n 'success.clear': SUCCESS_CLEAR_STYLES,\n 'success.link': SUCCESS_LINK_STYLES,\n\n // Warning theme\n 'warning.primary': WARNING_PRIMARY_STYLES,\n 'warning.secondary': WARNING_SECONDARY_STYLES,\n 'warning.outline': WARNING_OUTLINE_STYLES,\n 'warning.neutral': WARNING_NEUTRAL_STYLES,\n 'warning.clear': WARNING_CLEAR_STYLES,\n 'warning.link': WARNING_LINK_STYLES,\n\n // Note theme\n 'note.primary': NOTE_PRIMARY_STYLES,\n 'note.secondary': NOTE_SECONDARY_STYLES,\n 'note.outline': NOTE_OUTLINE_STYLES,\n 'note.neutral': NOTE_NEUTRAL_STYLES,\n 'note.clear': NOTE_CLEAR_STYLES,\n 'note.link': NOTE_LINK_STYLES,\n\n // Special theme\n 'special.primary': SPECIAL_PRIMARY_STYLES,\n 'special.secondary': SPECIAL_SECONDARY_STYLES,\n 'special.outline': SPECIAL_OUTLINE_STYLES,\n 'special.neutral': SPECIAL_NEUTRAL_STYLES,\n 'special.clear': SPECIAL_CLEAR_STYLES,\n 'special.link': SPECIAL_LINK_STYLES,\n },\n});\n\nexport const Button = forwardRef(function Button(\n allProps: CubeButtonProps,\n ref: FocusableRef<HTMLElement>,\n) {\n const splitContext = useButtonSplitContext();\n\n let {\n type,\n size: sizeProp,\n label,\n children,\n theme = splitContext?.theme ?? 'default',\n icon: iconProp,\n rightIcon: rightIconProp,\n mods,\n download,\n tooltip = true,\n defaultTooltipPlacement = 'top',\n ...props\n } = allProps;\n\n type = type ?? splitContext?.type;\n const size =\n sizeProp ?? splitContext?.size ?? (type === 'link' ? 'inline' : 'medium');\n\n const isDisabled =\n splitContext?.isDisabled || props.isDisabled || props.isLoading;\n const isLoading = props.isLoading;\n const isSelected = props.isSelected;\n\n const { actionProps, isPressed } = useAction(\n { ...allProps, isDisabled, ...(label ? { label } : {}) },\n ref,\n );\n\n const styles = extractStyles(props, STYLE_PROPS);\n const isDisabledElement = actionProps.isDisabled;\n\n delete actionProps.isDisabled;\n\n // Base mods for icon resolution (without icon-dependent mods)\n const baseMods = useMemo<ButtonMods>(\n () => ({\n pressed: isPressed && !isDisabled,\n loading: isLoading,\n selected: isSelected,\n ...mods,\n }),\n [isPressed, isDisabled, isLoading, isSelected, mods],\n );\n\n // Resolve dynamic icon props\n const resolvedIcon = useMemo(\n () => resolveIcon(iconProp, baseMods),\n [iconProp, baseMods],\n );\n const resolvedRightIcon = useMemo(\n () => resolveIcon(rightIconProp, baseMods),\n [rightIconProp, baseMods],\n );\n\n const hasLeftSlot = resolvedIcon.hasSlot;\n const hasRightSlot = resolvedRightIcon.hasSlot;\n\n const icon: ReactNode = resolvedIcon.content;\n const rightIcon: ReactNode = resolvedRightIcon.content;\n\n // Generate stable keys for icon transitions based on icon type\n const iconKey = isLoading\n ? 'loading'\n : isValidElement(icon)\n ? (icon.type as any)?.displayName || (icon.type as any)?.name || 'icon'\n : icon\n ? 'icon'\n : 'empty';\n\n const rightIconKey = isValidElement(rightIcon)\n ? (rightIcon.type as any)?.displayName ||\n (rightIcon.type as any)?.name ||\n 'icon'\n : rightIcon\n ? 'icon'\n : 'empty';\n\n children = children || hasLeftSlot || hasRightSlot ? children : label;\n\n const specifiedLabel =\n label ?? props['aria-label'] ?? props['aria-labelledby'];\n\n // Warn about accessibility issues when button has no accessible label\n useWarn(!children && hasLeftSlot && !specifiedLabel, {\n key: ['button-icon-no-label', hasLeftSlot],\n args: [\n 'accessibility issue:',\n 'If you provide `icon` property for a Button and do not provide any children then you should specify the `aria-label` property to make sure the Button element stays accessible.',\n ],\n });\n\n useWarn(!children && !hasLeftSlot && !specifiedLabel, {\n key: ['button-no-content-no-label', hasLeftSlot],\n args: [\n 'accessibility issue:',\n 'If you provide no children for a Button then you should specify the `aria-label` property to make sure the Button element stays accessible.',\n ],\n });\n\n if (!children && !specifiedLabel) {\n label = 'Unnamed'; // fix to avoid warning in production\n }\n\n const hasLeftIcon = !!(hasLeftSlot || isLoading);\n const hasChildren = children != null;\n const singleIcon = !!(\n ((hasLeftIcon && !hasRightSlot) || (hasRightSlot && !hasLeftIcon)) &&\n !hasChildren\n );\n\n const hasIcons = hasLeftIcon || hasRightSlot;\n const rawChildren = !!(\n hasChildren &&\n typeof children !== 'string' &&\n !Children.toArray(children).some((child) => typeof child === 'string')\n );\n\n const [isIconShown, setIsIconShown] = useState(hasLeftIcon);\n const [isRightIconShown, setIsRightIconShown] = useState(hasRightSlot);\n const isFirstRender = useIsFirstRender();\n\n const modifiers = useMemo<ButtonMods>(\n () => ({\n ...baseMods,\n 'has-icons': hasIcons,\n 'has-icon': hasLeftIcon,\n 'is-icon-shown': isIconShown,\n 'has-right-icon': hasRightSlot,\n 'is-right-icon-shown': isRightIconShown,\n 'single-icon': singleIcon,\n 'text-only': !!(hasChildren && typeof children === 'string' && !hasIcons),\n 'raw-children': rawChildren,\n 'has-content': children != null,\n }),\n [\n baseMods,\n children,\n hasLeftIcon,\n hasRightSlot,\n singleIcon,\n hasIcons,\n hasChildren,\n rawChildren,\n isIconShown,\n isRightIconShown,\n ],\n );\n\n const {\n labelProps: finalLabelProps,\n labelRef,\n renderWithTooltip,\n } = useAutoTooltip({\n tooltip,\n children,\n labelProps: undefined,\n });\n\n // Render function that creates the button element\n const renderButtonElement = (\n tooltipTriggerProps?: HTMLAttributes<HTMLElement>,\n tooltipRef?: RefObject<HTMLElement>,\n ): ReactNode => {\n // Use callback ref to merge multiple refs without calling hooks\n const handleRef = (element: HTMLElement | null) => {\n // Set the component's forwarded ref from useAction\n const domRef = actionProps.ref as any;\n if (typeof domRef === 'function') {\n domRef(element);\n } else if (domRef) {\n domRef.current = element;\n }\n // Set the tooltip ref if provided\n if (tooltipRef) {\n (tooltipRef as any).current = element;\n }\n };\n\n // Determine if size is custom (number or unrecognized string)\n const isCustomSize =\n typeof size === 'number' ||\n (size != null &&\n !(BUTTON_SIZE_VALUES as readonly string[]).includes(size));\n const sizeTokenValue =\n typeof size === 'number' ? `${size}px` : isCustomSize ? size : undefined;\n\n return (\n <ButtonElement\n download={download}\n {...mergeProps(actionProps, tooltipTriggerProps || {})}\n ref={handleRef}\n mods={{ ...actionProps.mods, ...modifiers }}\n disabled={isDisabledElement}\n variant={`${theme}.${type ?? 'outline'}` as ButtonVariant}\n data-theme={theme}\n data-type={type ?? 'outline'}\n data-size={size}\n data-popover-dismiss=\"\"\n styles={styles}\n tokens={sizeTokenValue ? { $size: sizeTokenValue } : undefined}\n >\n <DisplayTransition\n isShown={hasLeftIcon}\n animateOnMount={!isFirstRender}\n onToggle={setIsIconShown}\n >\n {({ ref }) => (\n <div ref={ref} data-element=\"Icon\" aria-hidden=\"true\">\n <IconSwitch noWrapper contentKey={iconKey}>\n {isLoading ? <LoadingIcon /> : icon}\n </IconSwitch>\n </div>\n )}\n </DisplayTransition>\n {hasChildren &&\n (rawChildren ? (\n children\n ) : (\n <div data-element=\"Label\" {...finalLabelProps} ref={labelRef}>\n {children}\n </div>\n ))}\n <DisplayTransition\n isShown={hasRightSlot}\n animateOnMount={!isFirstRender}\n onToggle={setIsRightIconShown}\n >\n {({ ref }) => (\n <div ref={ref} data-element=\"RightIcon\" aria-hidden=\"true\">\n <IconSwitch noWrapper contentKey={rightIconKey}>\n {rightIcon}\n </IconSwitch>\n </div>\n )}\n </DisplayTransition>\n </ButtonElement>\n );\n };\n\n return renderWithTooltip(renderButtonElement, defaultTooltipPlacement);\n});\n"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
|
|
2
2
|
import { useSlotProps } from "../../../utils/react/Slots.js";
|
|
3
3
|
import { Space } from "../../layout/Space.js";
|
|
4
4
|
import { tasty } from "@tenphi/tasty";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
|
|
2
2
|
import { extractStyles } from "../../../utils/styles.js";
|
|
3
3
|
import { mergeProps } from "../../../utils/react/mergeProps.js";
|
|
4
4
|
import { DirectionIcon } from "../../../icons/DirectionIcon.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | 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 { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
|
|
2
2
|
import { mergeProps } from "../../../utils/react/mergeProps.js";
|
|
3
3
|
import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";
|
|
4
4
|
import { DANGER_CLEAR_STYLES, DANGER_NEUTRAL_STYLES, DANGER_OUTLINE_STYLES, DANGER_PRIMARY_STYLES, DANGER_SECONDARY_STYLES, DEFAULT_CLEAR_STYLES, DEFAULT_NEUTRAL_STYLES, DEFAULT_OUTLINE_STYLES, DEFAULT_PRIMARY_STYLES, DEFAULT_SECONDARY_STYLES, ITEM_ACTION_BASE_STYLES, NOTE_CLEAR_STYLES, NOTE_NEUTRAL_STYLES, NOTE_OUTLINE_STYLES, NOTE_PRIMARY_STYLES, NOTE_SECONDARY_STYLES, SPECIAL_CLEAR_STYLES, SPECIAL_NEUTRAL_STYLES, SPECIAL_OUTLINE_STYLES, SPECIAL_PRIMARY_STYLES, SPECIAL_SECONDARY_STYLES, SUCCESS_CLEAR_STYLES, SUCCESS_NEUTRAL_STYLES, SUCCESS_OUTLINE_STYLES, SUCCESS_PRIMARY_STYLES, SUCCESS_SECONDARY_STYLES, WARNING_CLEAR_STYLES, WARNING_NEUTRAL_STYLES, WARNING_OUTLINE_STYLES, WARNING_PRIMARY_STYLES, WARNING_SECONDARY_STYLES } from "../../../data/item-themes.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
|
|
2
2
|
import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
|
|
3
3
|
import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
|
|
4
4
|
import { ItemActionProvider } from "../ItemActionContext.js";
|
|
@@ -116,6 +116,7 @@ const ItemButton = forwardRef(function ItemButton(allProps, ref) {
|
|
|
116
116
|
showActions: shouldShowActions,
|
|
117
117
|
actions: actions ? true : void 0,
|
|
118
118
|
...mergeProps$1(rest, actionProps),
|
|
119
|
+
"data-popover-dismiss": "",
|
|
119
120
|
htmlType: actionProps.type,
|
|
120
121
|
type,
|
|
121
122
|
theme,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ItemButton.js","names":["Item","mergeProps"],"sources":["../../../../src/components/actions/ItemButton/ItemButton.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { Styles, tasty } from '@tenphi/tasty';\nimport {\n CSSProperties,\n forwardRef,\n ReactNode,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useFocusWithin, useHover } from 'react-aria';\n\nimport { mergeProps } from '../../../utils/react';\nimport { CubeItemProps, Item } from '../../content/Item';\nimport { ItemBadge } from '../../content/ItemBadge';\nimport { DisplayTransition } from '../../helpers';\nimport { CubeItemActionProps, ItemAction } from '../ItemAction';\nimport { ItemActionProvider } from '../ItemActionContext';\nimport { CubeUseActionProps, useAction } from '../use-action';\n\nexport interface CubeItemButtonProps\n extends Omit<CubeItemProps, 'size'>,\n Omit<CubeUseActionProps, 'as'> {\n actions?: ReactNode;\n size?: Omit<CubeItemProps['size'], 'inline'>;\n wrapperStyles?: Styles;\n}\n\nconst StyledItem = tasty(Item, {\n as: 'button',\n type: 'neutral',\n theme: 'default',\n styles: {\n recipe: 'reset button',\n placeContent: 'center stretch',\n },\n});\n\nconst ActionsWrapper = tasty({\n styles: {\n display: 'grid',\n position: 'relative',\n placeContent: 'stretch',\n placeItems: 'stretch',\n\n $size: {\n '': '$size-md',\n 'size=xsmall': '$size-xs',\n 'size=small': '$size-sm',\n 'size=medium': '$size-md',\n 'size=large': '$size-lg',\n 'size=xlarge': '$size-xl',\n },\n\n Actions: {\n $: '>',\n position: 'absolute',\n inset: {\n '': '1bw 1bw auto auto',\n 'type=card': '(1bw + .5x) (1bw + .5x) auto auto',\n },\n display: 'flex',\n gap: '1bw',\n placeItems: 'center',\n placeContent: 'center end',\n pointerEvents: {\n '': 'auto',\n '!actions-shown': 'none',\n },\n padding: '0 $side-padding',\n height: 'min ($size - 2bw)',\n opacity: {\n '': 1,\n '!actions-shown': 0,\n },\n translate: {\n '': '0 0',\n '!actions-shown': '.5x 0',\n },\n transition: 'theme, translate',\n\n // Size for the action buttons\n '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))',\n // Side padding for the button\n '$side-padding': '(($size - $action-size - 2bw) / 2)',\n },\n },\n});\n\nconst ItemButton = forwardRef(function ItemButton(\n allProps: CubeItemButtonProps,\n ref: FocusableRef<HTMLElement>,\n) {\n const {\n mods,\n to,\n htmlType,\n as,\n type = 'neutral',\n theme = 'default',\n onPress,\n // Extract react-aria press callbacks to prevent them from leaking to DOM via rest.\n // These are handled by useButton inside useAction.\n onPressStart: _onPressStart,\n onPressEnd: _onPressEnd,\n onPressChange: _onPressChange,\n onPressUp: _onPressUp,\n actions,\n size = 'medium',\n wrapperStyles,\n autoHideActions = false,\n disableActionsFocus = false,\n isDisabled,\n isLoading = false,\n ...rest\n } = allProps as CubeItemButtonProps & {\n as?: 'a' | 'button' | 'div' | 'span';\n };\n\n // Loading state makes the component disabled (same logic as Item)\n const finalIsDisabled =\n isDisabled === true || (isLoading && isDisabled !== false);\n\n const actionsRef = useRef<HTMLDivElement>(null);\n const [actionsWidth, setActionsWidth] = useState(0);\n const [areActionsVisible, setAreActionsVisible] = useState(false);\n const [areActionsShown, setAreActionsShown] = useState(false);\n\n useLayoutEffect(() => {\n if (actions && actionsRef.current) {\n const width = Math.round(actionsRef.current.offsetWidth);\n if (width !== actionsWidth) {\n setActionsWidth(width);\n }\n }\n }, [actions, areActionsVisible]);\n\n const [isFocusWithin, setIsFocusWithin] = useState(false);\n const [hasPressed, setHasPressed] = useState(false);\n const { hoverProps, isHovered } = useHover({});\n const { focusWithinProps } = useFocusWithin({\n onFocusWithinChange: setIsFocusWithin,\n });\n\n // Watch for data-pressed attribute on any descendant element\n useLayoutEffect(() => {\n const actionsEl = actionsRef.current;\n\n if (!actionsEl || !autoHideActions) return;\n\n const checkPressed = () => {\n setHasPressed(actionsEl.querySelector('[data-pressed]') !== null);\n };\n\n const observer = new MutationObserver(checkPressed);\n\n observer.observe(actionsEl, {\n attributes: true,\n attributeFilter: ['data-pressed'],\n subtree: true,\n });\n\n checkPressed();\n\n return () => observer.disconnect();\n }, [areActionsVisible, autoHideActions]);\n\n const shouldShowActions =\n isHovered || isFocusWithin || hasPressed || !autoHideActions;\n\n const { actionProps } = useAction(\n {\n ...(allProps as any),\n htmlType,\n to,\n as,\n mods,\n isDisabled: finalIsDisabled,\n },\n ref,\n );\n\n const finalMods = useMemo(() => {\n return shouldShowActions ? { ...mods, 'actions-shown': true } : mods;\n }, [mods, shouldShowActions]);\n\n const button = (\n <StyledItem\n insideWrapper={!!actions}\n showActions={shouldShowActions}\n actions={actions ? true : undefined}\n {...(mergeProps(rest, actionProps) as any)}\n htmlType={actionProps.type}\n type={type}\n theme={theme}\n size={size}\n isLoading={isLoading}\n isDisabled={isDisabled}\n />\n );\n\n if (actions) {\n return (\n <ActionsWrapper\n {...hoverProps}\n data-size={size}\n data-type={type}\n data-theme={theme}\n mods={finalMods}\n styles={wrapperStyles}\n style={\n {\n '--actions-width':\n areActionsVisible || !autoHideActions\n ? `${actionsWidth}px`\n : '0px',\n ...(typeof size === 'number' && { '--size': `${size}px` }),\n } as CSSProperties\n }\n >\n {button}\n <ItemActionProvider\n type={type}\n theme={theme}\n disableActionsFocus={disableActionsFocus}\n isDisabled={finalIsDisabled}\n >\n {autoHideActions ? (\n <DisplayTransition\n exposeUnmounted\n isShown={shouldShowActions}\n onPhaseChange={(phase) => {\n setAreActionsVisible(phase !== 'unmounted');\n }}\n onToggle={(isShown) => {\n setAreActionsShown(isShown);\n }}\n >\n {({ ref: transitionRef }) => {\n return (\n <div\n {...focusWithinProps}\n ref={(node: any) => {\n actionsRef.current = node;\n transitionRef(node);\n }}\n data-element=\"Actions\"\n >\n {actions}\n </div>\n );\n }}\n </DisplayTransition>\n ) : (\n <div ref={actionsRef} data-element=\"Actions\">\n {actions}\n </div>\n )}\n </ItemActionProvider>\n </ActionsWrapper>\n );\n }\n\n return button;\n});\n\nconst _ItemButton = Object.assign(ItemButton, {\n Action: ItemAction,\n Badge: ItemBadge,\n});\n\nexport { _ItemButton as ItemButton };\nexport type {\n CubeItemButtonProps as ItemButtonProps,\n CubeItemActionProps as ItemActionProps,\n};\n"],"mappings":";;;;;;;;;;;;;;AA6BA,MAAM,aAAa,MAAMA,OAAM;CAC7B,IAAI;CACJ,MAAM;CACN,OAAO;CACP,QAAQ;EACN,QAAQ;EACR,cAAc;EACf;CACF,CAAC;AAEF,MAAM,iBAAiB,MAAM,EAC3B,QAAQ;CACN,SAAS;CACT,UAAU;CACV,cAAc;CACd,YAAY;CAEZ,OAAO;EACL,IAAI;EACJ,eAAe;EACf,cAAc;EACd,eAAe;EACf,cAAc;EACd,eAAe;EAChB;CAED,SAAS;EACP,GAAG;EACH,UAAU;EACV,OAAO;GACL,IAAI;GACJ,aAAa;GACd;EACD,SAAS;EACT,KAAK;EACL,YAAY;EACZ,cAAc;EACd,eAAe;GACb,IAAI;GACJ,kBAAkB;GACnB;EACD,SAAS;EACT,QAAQ;EACR,SAAS;GACP,IAAI;GACJ,kBAAkB;GACnB;EACD,WAAW;GACT,IAAI;GACJ,kBAAkB;GACnB;EACD,YAAY;EAGZ,gBAAgB;EAEhB,iBAAiB;EAClB;CACF,EACF,CAAC;AAEF,MAAM,aAAa,WAAW,SAAS,WACrC,UACA,KACA;CACA,MAAM,EACJ,MACA,IACA,UACA,IACA,OAAO,WACP,QAAQ,WACR,SAGA,cAAc,eACd,YAAY,aACZ,eAAe,gBACf,WAAW,YACX,SACA,OAAO,UACP,eACA,kBAAkB,OAClB,sBAAsB,OACtB,YACA,YAAY,OACZ,GAAG,SACD;CAKJ,MAAM,kBACJ,eAAe,QAAS,aAAa,eAAe;CAEtD,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,CAAC,cAAc,mBAAmB,SAAS,EAAE;CACnD,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,MAAM;CACjE,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,MAAM;AAE7D,uBAAsB;AACpB,MAAI,WAAW,WAAW,SAAS;GACjC,MAAM,QAAQ,KAAK,MAAM,WAAW,QAAQ,YAAY;AACxD,OAAI,UAAU,aACZ,iBAAgB,MAAM;;IAGzB,CAAC,SAAS,kBAAkB,CAAC;CAEhC,MAAM,CAAC,eAAe,oBAAoB,SAAS,MAAM;CACzD,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,EAAE,YAAY,cAAc,SAAS,EAAE,CAAC;CAC9C,MAAM,EAAE,qBAAqB,eAAe,EAC1C,qBAAqB,kBACtB,CAAC;AAGF,uBAAsB;EACpB,MAAM,YAAY,WAAW;AAE7B,MAAI,CAAC,aAAa,CAAC,gBAAiB;EAEpC,MAAM,qBAAqB;AACzB,iBAAc,UAAU,cAAc,iBAAiB,KAAK,KAAK;;EAGnE,MAAM,WAAW,IAAI,iBAAiB,aAAa;AAEnD,WAAS,QAAQ,WAAW;GAC1B,YAAY;GACZ,iBAAiB,CAAC,eAAe;GACjC,SAAS;GACV,CAAC;AAEF,gBAAc;AAEd,eAAa,SAAS,YAAY;IACjC,CAAC,mBAAmB,gBAAgB,CAAC;CAExC,MAAM,oBACJ,aAAa,iBAAiB,cAAc,CAAC;CAE/C,MAAM,EAAE,gBAAgB,UACtB;EACE,GAAI;EACJ;EACA;EACA;EACA;EACA,YAAY;EACb,EACD,IACD;CAED,MAAM,YAAY,cAAc;AAC9B,SAAO,oBAAoB;GAAE,GAAG;GAAM,iBAAiB;GAAM,GAAG;IAC/D,CAAC,MAAM,kBAAkB,CAAC;CAE7B,MAAM,SACJ,oBAAC;EACC,eAAe,CAAC,CAAC;EACjB,aAAa;EACb,SAAS,UAAU,OAAO;EAC1B,GAAKC,aAAW,MAAM,YAAY;EAClC,UAAU,YAAY;EAChB;EACC;EACD;EACK;EACC;GACZ;AAGJ,KAAI,QACF,QACE,qBAAC;EACC,GAAI;EACJ,aAAW;EACX,aAAW;EACX,cAAY;EACZ,MAAM;EACN,QAAQ;EACR,OACE;GACE,mBACE,qBAAqB,CAAC,kBAClB,GAAG,aAAa,MAChB;GACN,GAAI,OAAO,SAAS,YAAY,EAAE,UAAU,GAAG,KAAK,KAAK;GAC1D;aAGF,QACD,oBAAC;GACO;GACC;GACc;GACrB,YAAY;aAEX,kBACC,oBAAC;IACC;IACA,SAAS;IACT,gBAAgB,UAAU;AACxB,0BAAqB,UAAU,YAAY;;IAE7C,WAAW,YAAY;AACrB,wBAAmB,QAAQ;;eAG3B,EAAE,KAAK,oBAAoB;AAC3B,YACE,oBAAC;MACC,GAAI;MACJ,MAAM,SAAc;AAClB,kBAAW,UAAU;AACrB,qBAAc,KAAK;;MAErB,gBAAa;gBAEZ;OACG;;KAGQ,GAEpB,oBAAC;IAAI,KAAK;IAAY,gBAAa;cAChC;KACG;IAEW;GACN;AAIrB,QAAO;EACP;AAEF,MAAM,cAAc,OAAO,OAAO,YAAY;CAC5C,QAAQ;CACR,OAAO;CACR,CAAC"}
|
|
1
|
+
{"version":3,"file":"ItemButton.js","names":["Item","mergeProps"],"sources":["../../../../src/components/actions/ItemButton/ItemButton.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { Styles, tasty } from '@tenphi/tasty';\nimport {\n CSSProperties,\n forwardRef,\n ReactNode,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useFocusWithin, useHover } from 'react-aria';\n\nimport { mergeProps } from '../../../utils/react';\nimport { CubeItemProps, Item } from '../../content/Item';\nimport { ItemBadge } from '../../content/ItemBadge';\nimport { DisplayTransition } from '../../helpers';\nimport { CubeItemActionProps, ItemAction } from '../ItemAction';\nimport { ItemActionProvider } from '../ItemActionContext';\nimport { CubeUseActionProps, useAction } from '../use-action';\n\nexport interface CubeItemButtonProps\n extends Omit<CubeItemProps, 'size'>,\n Omit<CubeUseActionProps, 'as'> {\n actions?: ReactNode;\n size?: Omit<CubeItemProps['size'], 'inline'>;\n wrapperStyles?: Styles;\n}\n\nconst StyledItem = tasty(Item, {\n as: 'button',\n type: 'neutral',\n theme: 'default',\n styles: {\n recipe: 'reset button',\n placeContent: 'center stretch',\n },\n});\n\nconst ActionsWrapper = tasty({\n styles: {\n display: 'grid',\n position: 'relative',\n placeContent: 'stretch',\n placeItems: 'stretch',\n\n $size: {\n '': '$size-md',\n 'size=xsmall': '$size-xs',\n 'size=small': '$size-sm',\n 'size=medium': '$size-md',\n 'size=large': '$size-lg',\n 'size=xlarge': '$size-xl',\n },\n\n Actions: {\n $: '>',\n position: 'absolute',\n inset: {\n '': '1bw 1bw auto auto',\n 'type=card': '(1bw + .5x) (1bw + .5x) auto auto',\n },\n display: 'flex',\n gap: '1bw',\n placeItems: 'center',\n placeContent: 'center end',\n pointerEvents: {\n '': 'auto',\n '!actions-shown': 'none',\n },\n padding: '0 $side-padding',\n height: 'min ($size - 2bw)',\n opacity: {\n '': 1,\n '!actions-shown': 0,\n },\n translate: {\n '': '0 0',\n '!actions-shown': '.5x 0',\n },\n transition: 'theme, translate',\n\n // Size for the action buttons\n '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))',\n // Side padding for the button\n '$side-padding': '(($size - $action-size - 2bw) / 2)',\n },\n },\n});\n\nconst ItemButton = forwardRef(function ItemButton(\n allProps: CubeItemButtonProps,\n ref: FocusableRef<HTMLElement>,\n) {\n const {\n mods,\n to,\n htmlType,\n as,\n type = 'neutral',\n theme = 'default',\n onPress,\n // Extract react-aria press callbacks to prevent them from leaking to DOM via rest.\n // These are handled by useButton inside useAction.\n onPressStart: _onPressStart,\n onPressEnd: _onPressEnd,\n onPressChange: _onPressChange,\n onPressUp: _onPressUp,\n actions,\n size = 'medium',\n wrapperStyles,\n autoHideActions = false,\n disableActionsFocus = false,\n isDisabled,\n isLoading = false,\n ...rest\n } = allProps as CubeItemButtonProps & {\n as?: 'a' | 'button' | 'div' | 'span';\n };\n\n // Loading state makes the component disabled (same logic as Item)\n const finalIsDisabled =\n isDisabled === true || (isLoading && isDisabled !== false);\n\n const actionsRef = useRef<HTMLDivElement>(null);\n const [actionsWidth, setActionsWidth] = useState(0);\n const [areActionsVisible, setAreActionsVisible] = useState(false);\n const [areActionsShown, setAreActionsShown] = useState(false);\n\n useLayoutEffect(() => {\n if (actions && actionsRef.current) {\n const width = Math.round(actionsRef.current.offsetWidth);\n if (width !== actionsWidth) {\n setActionsWidth(width);\n }\n }\n }, [actions, areActionsVisible]);\n\n const [isFocusWithin, setIsFocusWithin] = useState(false);\n const [hasPressed, setHasPressed] = useState(false);\n const { hoverProps, isHovered } = useHover({});\n const { focusWithinProps } = useFocusWithin({\n onFocusWithinChange: setIsFocusWithin,\n });\n\n // Watch for data-pressed attribute on any descendant element\n useLayoutEffect(() => {\n const actionsEl = actionsRef.current;\n\n if (!actionsEl || !autoHideActions) return;\n\n const checkPressed = () => {\n setHasPressed(actionsEl.querySelector('[data-pressed]') !== null);\n };\n\n const observer = new MutationObserver(checkPressed);\n\n observer.observe(actionsEl, {\n attributes: true,\n attributeFilter: ['data-pressed'],\n subtree: true,\n });\n\n checkPressed();\n\n return () => observer.disconnect();\n }, [areActionsVisible, autoHideActions]);\n\n const shouldShowActions =\n isHovered || isFocusWithin || hasPressed || !autoHideActions;\n\n const { actionProps } = useAction(\n {\n ...(allProps as any),\n htmlType,\n to,\n as,\n mods,\n isDisabled: finalIsDisabled,\n },\n ref,\n );\n\n const finalMods = useMemo(() => {\n return shouldShowActions ? { ...mods, 'actions-shown': true } : mods;\n }, [mods, shouldShowActions]);\n\n const button = (\n <StyledItem\n insideWrapper={!!actions}\n showActions={shouldShowActions}\n actions={actions ? true : undefined}\n {...(mergeProps(rest, actionProps) as any)}\n data-popover-dismiss=\"\"\n htmlType={actionProps.type}\n type={type}\n theme={theme}\n size={size}\n isLoading={isLoading}\n isDisabled={isDisabled}\n />\n );\n\n if (actions) {\n return (\n <ActionsWrapper\n {...hoverProps}\n data-size={size}\n data-type={type}\n data-theme={theme}\n mods={finalMods}\n styles={wrapperStyles}\n style={\n {\n '--actions-width':\n areActionsVisible || !autoHideActions\n ? `${actionsWidth}px`\n : '0px',\n ...(typeof size === 'number' && { '--size': `${size}px` }),\n } as CSSProperties\n }\n >\n {button}\n <ItemActionProvider\n type={type}\n theme={theme}\n disableActionsFocus={disableActionsFocus}\n isDisabled={finalIsDisabled}\n >\n {autoHideActions ? (\n <DisplayTransition\n exposeUnmounted\n isShown={shouldShowActions}\n onPhaseChange={(phase) => {\n setAreActionsVisible(phase !== 'unmounted');\n }}\n onToggle={(isShown) => {\n setAreActionsShown(isShown);\n }}\n >\n {({ ref: transitionRef }) => {\n return (\n <div\n {...focusWithinProps}\n ref={(node: any) => {\n actionsRef.current = node;\n transitionRef(node);\n }}\n data-element=\"Actions\"\n >\n {actions}\n </div>\n );\n }}\n </DisplayTransition>\n ) : (\n <div ref={actionsRef} data-element=\"Actions\">\n {actions}\n </div>\n )}\n </ItemActionProvider>\n </ActionsWrapper>\n );\n }\n\n return button;\n});\n\nconst _ItemButton = Object.assign(ItemButton, {\n Action: ItemAction,\n Badge: ItemBadge,\n});\n\nexport { _ItemButton as ItemButton };\nexport type {\n CubeItemButtonProps as ItemButtonProps,\n CubeItemActionProps as ItemActionProps,\n};\n"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
|
|
2
2
|
import { Button } from "../Button/Button.js";
|
|
3
3
|
import { forwardRef } from "react";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | 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 { _CollectionItem } from "../../CollectionItem.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
|
|
2
2
|
import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
|
|
3
3
|
import { filterCollectionItemProps } from "../../CollectionItem.js";
|
|
4
4
|
import { _Item } from "../../content/Item/Item.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
|
|
2
2
|
import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";
|
|
3
3
|
import { MenuItem } from "./MenuItem.js";
|
|
4
4
|
import { StyledMenu, StyledSection, StyledSectionHeading } from "./styled.js";
|
|
@@ -10,6 +10,13 @@ type CubeMenuTriggerProps = AriaMenuTriggerProps$1 & PositionProps & {
|
|
|
10
10
|
children: [ReactElement | ((state: MenuTriggerState) => ReactElement), ReactElement];
|
|
11
11
|
closeOnSelect?: boolean;
|
|
12
12
|
isDummy?: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* Overlay variant to use on mobile screens. Defaults to `'popover'`, which
|
|
15
|
+
* keeps the desktop overlay even on small viewports. Pass `'tray'` to opt
|
|
16
|
+
* into the bottom-sheet `Tray` overlay on mobile (the previous implicit
|
|
17
|
+
* default). Mirrors the `mobileType` API on `DialogTrigger`.
|
|
18
|
+
*/
|
|
19
|
+
mobileType?: 'popover' | 'tray';
|
|
13
20
|
};
|
|
14
21
|
/**
|
|
15
22
|
* The MenuTrigger serves as a wrapper around a Menu and its associated trigger,
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
|
|
2
2
|
import { SlotProvider } from "../../../utils/react/Slots.js";
|
|
3
|
-
import {
|
|
3
|
+
import { useEvent } from "../../../_internal/hooks/use-event.js";
|
|
4
4
|
import { MenuContext } from "./context.js";
|
|
5
5
|
import { generateRandomId } from "../../../utils/random.js";
|
|
6
|
+
import { usePopoverSync } from "../../../utils/react/usePopoverSync.js";
|
|
6
7
|
import { _Tray } from "../../overlays/Modal/Tray.js";
|
|
7
8
|
import { _Popover } from "../../overlays/Modal/Popover.js";
|
|
8
9
|
import { Fragment, forwardRef, useEffect, useMemo, useRef } from "react";
|
|
@@ -20,29 +21,17 @@ function MenuTrigger(props, ref) {
|
|
|
20
21
|
const menuTriggerRef = props.targetRef || domRef || triggerRef;
|
|
21
22
|
const menuRef = useRef(null);
|
|
22
23
|
const wasOpenRef = useRef(false);
|
|
23
|
-
const { children, shouldFlip = true, closeOnSelect, trigger = "press", isDisabled, isDummy } = props;
|
|
24
|
+
const { children, shouldFlip = true, closeOnSelect, trigger = "press", isDisabled, isDummy, mobileType = "popover" } = props;
|
|
24
25
|
const menuId = useMemo(() => generateRandomId(), []);
|
|
25
|
-
const { emit, on } = useEventBus();
|
|
26
26
|
if (!Array.isArray(children) || children.length > 2) throw new Error("MenuTrigger must have exactly 2 children");
|
|
27
27
|
let [menuTrigger, menu] = children;
|
|
28
28
|
const state = useMenuTriggerState(props);
|
|
29
|
-
|
|
30
|
-
return on("popover:open", (data) => {
|
|
31
|
-
if (data.menuId !== menuId && state.isOpen && !isDummy) state.close();
|
|
32
|
-
});
|
|
33
|
-
}, [
|
|
34
|
-
on,
|
|
35
|
-
menuId,
|
|
36
|
-
state
|
|
37
|
-
]);
|
|
38
|
-
useEffect(() => {
|
|
39
|
-
if (state.isOpen && !isDummy) emit("popover:open", { menuId });
|
|
40
|
-
}, [
|
|
41
|
-
state.isOpen,
|
|
42
|
-
emit,
|
|
29
|
+
usePopoverSync({
|
|
43
30
|
menuId,
|
|
44
|
-
|
|
45
|
-
|
|
31
|
+
isOpen: state.isOpen,
|
|
32
|
+
onClose: () => state.close(),
|
|
33
|
+
enabled: !isDummy
|
|
34
|
+
});
|
|
46
35
|
useEffect(() => {
|
|
47
36
|
if (!state.isOpen && wasOpenRef.current && !isDummy) {
|
|
48
37
|
wasOpenRef.current = false;
|
|
@@ -58,14 +47,15 @@ function MenuTrigger(props, ref) {
|
|
|
58
47
|
if (typeof menuTrigger === "function") menuTrigger = menuTrigger(state);
|
|
59
48
|
const { menuTriggerProps, menuProps } = useMenuTrigger({ isDisabled }, state, menuTriggerRef);
|
|
60
49
|
let initialPlacement = props.placement ?? "bottom start";
|
|
61
|
-
const
|
|
50
|
+
const isMobileDevice = useIsMobileDevice();
|
|
51
|
+
const isTray = mobileType === "tray" && isMobileDevice;
|
|
62
52
|
const { overlayProps: positionProps, placement } = useOverlayPosition({
|
|
63
53
|
targetRef: menuTriggerRef,
|
|
64
54
|
overlayRef: menuPopoverRef,
|
|
65
55
|
scrollRef: menuRef,
|
|
66
56
|
placement: initialPlacement,
|
|
67
57
|
shouldFlip,
|
|
68
|
-
isOpen: state.isOpen && !
|
|
58
|
+
isOpen: state.isOpen && !isTray,
|
|
69
59
|
onClose: state.close,
|
|
70
60
|
containerPadding: props.containerPadding,
|
|
71
61
|
offset: props.offset ?? 8,
|
|
@@ -77,13 +67,13 @@ function MenuTrigger(props, ref) {
|
|
|
77
67
|
onClose: state.close,
|
|
78
68
|
closeOnSelect,
|
|
79
69
|
autoFocus: state.focusStrategy ?? "first",
|
|
80
|
-
style:
|
|
70
|
+
style: isTray ? {
|
|
81
71
|
width: "100%",
|
|
82
72
|
maxHeight: "inherit"
|
|
83
73
|
} : void 0,
|
|
84
74
|
mods: {
|
|
85
|
-
popover: !
|
|
86
|
-
tray:
|
|
75
|
+
popover: !isTray,
|
|
76
|
+
tray: isTray
|
|
87
77
|
},
|
|
88
78
|
isClosing: !state.isOpen
|
|
89
79
|
};
|
|
@@ -92,9 +82,24 @@ function MenuTrigger(props, ref) {
|
|
|
92
82
|
menu,
|
|
93
83
|
/* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close })
|
|
94
84
|
] });
|
|
85
|
+
const shouldCloseOnInteractOutside = useEvent((el) => {
|
|
86
|
+
if (!state.isOpen) return false;
|
|
87
|
+
const menuTriggerEl = el.closest("[data-popover-trigger]");
|
|
88
|
+
if (!menuTriggerEl) {
|
|
89
|
+
if (el.closest("[data-popover-dismiss]")) {
|
|
90
|
+
setTimeout(() => state.close(), 0);
|
|
91
|
+
return false;
|
|
92
|
+
}
|
|
93
|
+
return true;
|
|
94
|
+
}
|
|
95
|
+
if (isDummy && (menuTriggerEl === menuTriggerRef.current || menuTriggerRef.current?.contains(el))) return true;
|
|
96
|
+
if (menuTriggerEl === menuTriggerRef.current) return true;
|
|
97
|
+
return false;
|
|
98
|
+
});
|
|
95
99
|
let overlay;
|
|
96
|
-
if (
|
|
100
|
+
if (isTray) overlay = /* @__PURE__ */ jsx(_Tray, {
|
|
97
101
|
isOpen: state.isOpen,
|
|
102
|
+
shouldCloseOnInteractOutside,
|
|
98
103
|
onClose: state.close,
|
|
99
104
|
children: contents
|
|
100
105
|
});
|
|
@@ -105,13 +110,7 @@ function MenuTrigger(props, ref) {
|
|
|
105
110
|
isOpen: state.isOpen,
|
|
106
111
|
style: positionProps.style,
|
|
107
112
|
placement,
|
|
108
|
-
shouldCloseOnInteractOutside
|
|
109
|
-
const menuTriggerEl = el.closest("[data-popover-trigger]");
|
|
110
|
-
if (!menuTriggerEl) return true;
|
|
111
|
-
if (isDummy && (menuTriggerEl === menuTriggerRef.current || menuTriggerRef.current?.contains(el))) return true;
|
|
112
|
-
if (menuTriggerEl === menuTriggerRef.current) return true;
|
|
113
|
-
return false;
|
|
114
|
-
},
|
|
113
|
+
shouldCloseOnInteractOutside,
|
|
115
114
|
onClose: state.close,
|
|
116
115
|
children: contents
|
|
117
116
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuTrigger.js","names":["Tray","Popover"],"sources":["../../../../src/components/actions/Menu/MenuTrigger.tsx"],"sourcesContent":["import { PressResponder } from '@react-aria/interactions';\nimport { useDOMRef, useIsMobileDevice } from '@react-spectrum/utils';\nimport { DOMRef } from '@react-types/shared';\nimport {\n forwardRef,\n Fragment,\n ReactElement,\n useEffect,\n useMemo,\n useRef,\n} from 'react';\nimport {\n AriaMenuTriggerProps,\n DismissButton,\n Placement,\n PositionProps,\n useMenuTrigger,\n useOverlayPosition,\n} from 'react-aria';\nimport { MenuTriggerState, useMenuTriggerState } from 'react-stately';\n\nimport { generateRandomId } from '../../../utils/random';\nimport { SlotProvider } from '../../../utils/react';\nimport { useEventBus } from '../../../utils/react/useEventBus';\nimport { Popover, Tray } from '../../overlays/Modal';\n\nimport { MenuContext, MenuContextValue } from './context';\n\nexport type { AriaMenuTriggerProps };\n\nexport type CubeMenuTriggerProps = AriaMenuTriggerProps &\n PositionProps & {\n isDisabled?: boolean;\n children: [\n ReactElement | ((state: MenuTriggerState) => ReactElement),\n ReactElement,\n ];\n\n closeOnSelect?: boolean;\n isDummy?: boolean;\n };\n\nfunction MenuTrigger(props: CubeMenuTriggerProps, ref: DOMRef<HTMLElement>) {\n const menuPopoverRef = useRef<HTMLDivElement>(null);\n const triggerRef = useRef<HTMLElement>(null);\n const domRef = useDOMRef(ref);\n const menuTriggerRef = props.targetRef || domRef || triggerRef;\n const menuRef = useRef<HTMLUListElement>(null);\n const wasOpenRef = useRef(false);\n const {\n children,\n shouldFlip = true,\n closeOnSelect,\n trigger = 'press',\n isDisabled,\n isDummy,\n } = props;\n\n // Generate a unique ID for this menu instance\n const menuId = useMemo(() => generateRandomId(), []);\n\n // Get event bus for menu synchronization\n const { emit, on } = useEventBus();\n\n if (!Array.isArray(children) || children.length > 2) {\n throw new Error('MenuTrigger must have exactly 2 children');\n }\n\n let [menuTrigger, menu] = children;\n const state: MenuTriggerState = useMenuTriggerState(props);\n\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 menu is open, close this one\n if (data.menuId !== menuId && state.isOpen && !isDummy) {\n state.close();\n }\n });\n\n return unsubscribe;\n }, [on, menuId, state]);\n\n // Emit event when this menu opens\n useEffect(() => {\n if (state.isOpen && !isDummy) {\n emit('popover:open', { menuId });\n }\n }, [state.isOpen, emit, menuId, isDummy]);\n\n // Restore focus manually when the menu closes\n useEffect(() => {\n if (!state.isOpen && wasOpenRef.current && !isDummy) {\n wasOpenRef.current = false;\n // Use setTimeout to ensure focus restoration happens after any animations\n setTimeout(() => {\n menuTriggerRef.current?.focus();\n }, 0);\n } else if (state.isOpen) {\n wasOpenRef.current = true;\n }\n }, [state.isOpen, menuTriggerRef, isDummy]);\n\n if (typeof menuTrigger === 'function') {\n menuTrigger = (menuTrigger as CubeMenuTriggerProps['children'][0])(state);\n }\n\n const { menuTriggerProps, menuProps } = useMenuTrigger(\n { isDisabled },\n state,\n menuTriggerRef,\n );\n\n let initialPlacement: Placement = props.placement ?? 'bottom start';\n\n const isMobile = useIsMobileDevice();\n const { overlayProps: positionProps, placement } = useOverlayPosition({\n targetRef: menuTriggerRef,\n overlayRef: menuPopoverRef,\n scrollRef: menuRef,\n placement: initialPlacement,\n shouldFlip: shouldFlip,\n isOpen: state.isOpen && !isMobile,\n onClose: state.close,\n containerPadding: props.containerPadding,\n offset: props.offset ?? 8,\n crossOffset: props.crossOffset ?? 0,\n });\n\n const menuContext = {\n ...menuProps,\n ref: menuRef,\n onClose: state.close,\n closeOnSelect,\n autoFocus: (state.focusStrategy as any) ?? 'first',\n style: isMobile\n ? {\n width: '100%',\n maxHeight: 'inherit',\n }\n : undefined,\n mods: {\n popover: !isMobile,\n tray: isMobile,\n },\n isClosing: !state.isOpen,\n } as MenuContextValue;\n\n const contents = (\n <>\n <DismissButton onDismiss={state.close} />\n {menu}\n <DismissButton onDismiss={state.close} />\n </>\n );\n\n // On small screen devices, the menu is rendered in a tray, otherwise a popover.\n let overlay;\n if (isMobile) {\n overlay = (\n <Tray isOpen={state.isOpen} onClose={state.close}>\n {contents}\n </Tray>\n );\n } else {\n overlay = (\n <Popover\n ref={menuPopoverRef}\n hideArrow\n isNonModal\n isOpen={state.isOpen}\n style={positionProps.style}\n placement={placement}\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 // For dummy triggers (like useAnchoredMenu), check if the clicked element\n // is the target element or its descendant\n if (\n isDummy &&\n (menuTriggerEl === menuTriggerRef.current ||\n menuTriggerRef.current?.contains(el))\n ) {\n return true;\n }\n // If the same trigger that opened this menu was clicked, allow closing\n if (menuTriggerEl === menuTriggerRef.current) return true;\n // Otherwise, don't close (let event mechanism handle it)\n return false;\n }}\n onClose={state.close}\n >\n {contents}\n </Popover>\n );\n }\n\n return (\n <Fragment>\n <SlotProvider\n slots={{ actionButton: { holdAffordance: trigger === 'longPress' } }}\n >\n {!isDummy ? (\n <PressResponder\n {...menuTriggerProps}\n ref={menuTriggerRef}\n data-popover-trigger\n isPressed={state.isOpen}\n >\n {menuTrigger}\n </PressResponder>\n ) : null}\n </SlotProvider>\n <MenuContext.Provider value={menuContext}>{overlay}</MenuContext.Provider>\n </Fragment>\n );\n}\n\n/**\n * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,\n * linking the Menu's open state with the trigger's press state.\n */\nlet _MenuTrigger = forwardRef(MenuTrigger);\n\n_MenuTrigger.displayName = 'MenuTrigger';\n\nexport { _MenuTrigger as MenuTrigger };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MenuTrigger.js","names":["Tray","Popover"],"sources":["../../../../src/components/actions/Menu/MenuTrigger.tsx"],"sourcesContent":["import { PressResponder } from '@react-aria/interactions';\nimport { useDOMRef, useIsMobileDevice } from '@react-spectrum/utils';\nimport { DOMRef } from '@react-types/shared';\nimport {\n forwardRef,\n Fragment,\n ReactElement,\n useEffect,\n useMemo,\n useRef,\n} from 'react';\nimport {\n AriaMenuTriggerProps,\n DismissButton,\n Placement,\n PositionProps,\n useMenuTrigger,\n useOverlayPosition,\n} from 'react-aria';\nimport { MenuTriggerState, useMenuTriggerState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal';\nimport { generateRandomId } from '../../../utils/random';\nimport { SlotProvider } from '../../../utils/react';\nimport { usePopoverSync } from '../../../utils/react/usePopoverSync';\nimport { Popover, Tray } from '../../overlays/Modal';\n\nimport { MenuContext, MenuContextValue } from './context';\n\nexport type { AriaMenuTriggerProps };\n\nexport type CubeMenuTriggerProps = AriaMenuTriggerProps &\n PositionProps & {\n isDisabled?: boolean;\n children: [\n ReactElement | ((state: MenuTriggerState) => ReactElement),\n ReactElement,\n ];\n\n closeOnSelect?: boolean;\n isDummy?: boolean;\n /**\n * Overlay variant to use on mobile screens. Defaults to `'popover'`, which\n * keeps the desktop overlay even on small viewports. Pass `'tray'` to opt\n * into the bottom-sheet `Tray` overlay on mobile (the previous implicit\n * default). Mirrors the `mobileType` API on `DialogTrigger`.\n */\n mobileType?: 'popover' | 'tray';\n };\n\nfunction MenuTrigger(props: CubeMenuTriggerProps, ref: DOMRef<HTMLElement>) {\n const menuPopoverRef = useRef<HTMLDivElement>(null);\n const triggerRef = useRef<HTMLElement>(null);\n const domRef = useDOMRef(ref);\n const menuTriggerRef = props.targetRef || domRef || triggerRef;\n const menuRef = useRef<HTMLUListElement>(null);\n const wasOpenRef = useRef(false);\n const {\n children,\n shouldFlip = true,\n closeOnSelect,\n trigger = 'press',\n isDisabled,\n isDummy,\n mobileType = 'popover',\n } = props;\n\n // Generate a unique ID for this menu instance\n const menuId = useMemo(() => generateRandomId(), []);\n\n if (!Array.isArray(children) || children.length > 2) {\n throw new Error('MenuTrigger must have exactly 2 children');\n }\n\n let [menuTrigger, menu] = children;\n const state: MenuTriggerState = useMenuTriggerState(props);\n\n usePopoverSync({\n menuId,\n isOpen: state.isOpen,\n onClose: () => state.close(),\n enabled: !isDummy,\n });\n\n // Restore focus manually when the menu closes\n useEffect(() => {\n if (!state.isOpen && wasOpenRef.current && !isDummy) {\n wasOpenRef.current = false;\n // Use setTimeout to ensure focus restoration happens after any animations\n setTimeout(() => {\n menuTriggerRef.current?.focus();\n }, 0);\n } else if (state.isOpen) {\n wasOpenRef.current = true;\n }\n }, [state.isOpen, menuTriggerRef, isDummy]);\n\n if (typeof menuTrigger === 'function') {\n menuTrigger = (menuTrigger as CubeMenuTriggerProps['children'][0])(state);\n }\n\n const { menuTriggerProps, menuProps } = useMenuTrigger(\n { isDisabled },\n state,\n menuTriggerRef,\n );\n\n let initialPlacement: Placement = props.placement ?? 'bottom start';\n\n // Tray rendering is now opt-in via `mobileType=\"tray\"` (matches DialogTrigger).\n // Without that opt-in, MenuTrigger always renders a Popover so that environments\n // like jsdom (where `window.screen.width === 0` makes useIsMobileDevice() true)\n // don't accidentally swap in the tray overlay.\n const isMobileDevice = useIsMobileDevice();\n const isTray = mobileType === 'tray' && isMobileDevice;\n const { overlayProps: positionProps, placement } = useOverlayPosition({\n targetRef: menuTriggerRef,\n overlayRef: menuPopoverRef,\n scrollRef: menuRef,\n placement: initialPlacement,\n shouldFlip: shouldFlip,\n isOpen: state.isOpen && !isTray,\n onClose: state.close,\n containerPadding: props.containerPadding,\n offset: props.offset ?? 8,\n crossOffset: props.crossOffset ?? 0,\n });\n\n const menuContext = {\n ...menuProps,\n ref: menuRef,\n onClose: state.close,\n closeOnSelect,\n autoFocus: (state.focusStrategy as any) ?? 'first',\n style: isTray\n ? {\n width: '100%',\n maxHeight: 'inherit',\n }\n : undefined,\n mods: {\n popover: !isTray,\n tray: isTray,\n },\n isClosing: !state.isOpen,\n } as MenuContextValue;\n\n const contents = (\n <>\n <DismissButton onDismiss={state.close} />\n {menu}\n <DismissButton onDismiss={state.close} />\n </>\n );\n\n // Shared between the Popover and Tray branches so both react-aria\n // `useOverlay` calls see the same predicate. Without this, the Tray branch\n // falls back to unconditional dismiss-on-outside-interaction, which\n // `useOverlay` translates into stopPropagation/preventDefault in the\n // capture phase — that swallows clicks on sibling triggers (see Menu\n // rapid-open test).\n //\n // `useEvent` gives us a single stable callback reference for the lifetime\n // of the component while always reading the latest closure values. This\n // matters because `useMenuTriggerState` returns a fresh `state` object on\n // every render, so a vanilla `useCallback([..., state])` would produce a\n // new function every render and defeat any stability guarantees consumers\n // rely on.\n const shouldCloseOnInteractOutside = useEvent((el: Element) => {\n // While `Popover` is animating out, `useInteractOutside`'s capture-phase\n // listener is still attached (jsdom 29+ uses pointerdown/click capture).\n // The animation lasts ~350ms; without this guard, clicks on a sibling\n // trigger during the exit window get stopPropagation()'d and the\n // sibling's `onClick` never runs — breaking rapid-open and \"open menu\n // again with new props\" flows. Reading `state.isOpen` directly is safe\n // because `useEvent` always sees the latest closure.\n if (!state.isOpen) return false;\n\n const menuTriggerEl = el.closest('[data-popover-trigger]');\n if (!menuTriggerEl) {\n // Plain interactive controls (Button, ItemButton) opt in via\n // `data-popover-dismiss`. We schedule the close via setTimeout(0) so\n // it lands AFTER the click event finishes — the button's onPress\n // fires first, then the popover closes. Without this, useOverlay\n // would stopPropagation() the click and the user would need a second\n // click to actually press the button.\n if (el.closest('[data-popover-dismiss]')) {\n setTimeout(() => state.close(), 0);\n return false;\n }\n return true;\n }\n if (\n isDummy &&\n (menuTriggerEl === menuTriggerRef.current ||\n menuTriggerRef.current?.contains(el))\n ) {\n return true;\n }\n if (menuTriggerEl === menuTriggerRef.current) return true;\n return false;\n });\n\n let overlay;\n if (isTray) {\n overlay = (\n <Tray\n isOpen={state.isOpen}\n shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}\n onClose={state.close}\n >\n {contents}\n </Tray>\n );\n } else {\n overlay = (\n <Popover\n ref={menuPopoverRef}\n hideArrow\n isNonModal\n isOpen={state.isOpen}\n style={positionProps.style}\n placement={placement}\n shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}\n onClose={state.close}\n >\n {contents}\n </Popover>\n );\n }\n\n return (\n <Fragment>\n <SlotProvider\n slots={{ actionButton: { holdAffordance: trigger === 'longPress' } }}\n >\n {!isDummy ? (\n <PressResponder\n {...menuTriggerProps}\n ref={menuTriggerRef}\n data-popover-trigger\n isPressed={state.isOpen}\n >\n {menuTrigger}\n </PressResponder>\n ) : null}\n </SlotProvider>\n <MenuContext.Provider value={menuContext}>{overlay}</MenuContext.Provider>\n </Fragment>\n );\n}\n\n/**\n * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,\n * linking the Menu's open state with the trigger's press state.\n */\nlet _MenuTrigger = forwardRef(MenuTrigger);\n\n_MenuTrigger.displayName = 'MenuTrigger';\n\nexport { _MenuTrigger as MenuTrigger };\n"],"mappings":";;;;;;;;;;;;;;;;AAkDA,SAAS,YAAY,OAA6B,KAA0B;CAC1E,MAAM,iBAAiB,OAAuB,KAAK;CACnD,MAAM,aAAa,OAAoB,KAAK;CAC5C,MAAM,SAAS,UAAU,IAAI;CAC7B,MAAM,iBAAiB,MAAM,aAAa,UAAU;CACpD,MAAM,UAAU,OAAyB,KAAK;CAC9C,MAAM,aAAa,OAAO,MAAM;CAChC,MAAM,EACJ,UACA,aAAa,MACb,eACA,UAAU,SACV,YACA,SACA,aAAa,cACX;CAGJ,MAAM,SAAS,cAAc,kBAAkB,EAAE,EAAE,CAAC;AAEpD,KAAI,CAAC,MAAM,QAAQ,SAAS,IAAI,SAAS,SAAS,EAChD,OAAM,IAAI,MAAM,2CAA2C;CAG7D,IAAI,CAAC,aAAa,QAAQ;CAC1B,MAAM,QAA0B,oBAAoB,MAAM;AAE1D,gBAAe;EACb;EACA,QAAQ,MAAM;EACd,eAAe,MAAM,OAAO;EAC5B,SAAS,CAAC;EACX,CAAC;AAGF,iBAAgB;AACd,MAAI,CAAC,MAAM,UAAU,WAAW,WAAW,CAAC,SAAS;AACnD,cAAW,UAAU;AAErB,oBAAiB;AACf,mBAAe,SAAS,OAAO;MAC9B,EAAE;aACI,MAAM,OACf,YAAW,UAAU;IAEtB;EAAC,MAAM;EAAQ;EAAgB;EAAQ,CAAC;AAE3C,KAAI,OAAO,gBAAgB,WACzB,eAAe,YAAoD,MAAM;CAG3E,MAAM,EAAE,kBAAkB,cAAc,eACtC,EAAE,YAAY,EACd,OACA,eACD;CAED,IAAI,mBAA8B,MAAM,aAAa;CAMrD,MAAM,iBAAiB,mBAAmB;CAC1C,MAAM,SAAS,eAAe,UAAU;CACxC,MAAM,EAAE,cAAc,eAAe,cAAc,mBAAmB;EACpE,WAAW;EACX,YAAY;EACZ,WAAW;EACX,WAAW;EACC;EACZ,QAAQ,MAAM,UAAU,CAAC;EACzB,SAAS,MAAM;EACf,kBAAkB,MAAM;EACxB,QAAQ,MAAM,UAAU;EACxB,aAAa,MAAM,eAAe;EACnC,CAAC;CAEF,MAAM,cAAc;EAClB,GAAG;EACH,KAAK;EACL,SAAS,MAAM;EACf;EACA,WAAY,MAAM,iBAAyB;EAC3C,OAAO,SACH;GACE,OAAO;GACP,WAAW;GACZ,GACD;EACJ,MAAM;GACJ,SAAS,CAAC;GACV,MAAM;GACP;EACD,WAAW,CAAC,MAAM;EACnB;CAED,MAAM,WACJ;EACE,oBAAC,iBAAc,WAAW,MAAM,QAAS;EACxC;EACD,oBAAC,iBAAc,WAAW,MAAM,QAAS;KACxC;CAgBL,MAAM,+BAA+B,UAAU,OAAgB;AAQ7D,MAAI,CAAC,MAAM,OAAQ,QAAO;EAE1B,MAAM,gBAAgB,GAAG,QAAQ,yBAAyB;AAC1D,MAAI,CAAC,eAAe;AAOlB,OAAI,GAAG,QAAQ,yBAAyB,EAAE;AACxC,qBAAiB,MAAM,OAAO,EAAE,EAAE;AAClC,WAAO;;AAET,UAAO;;AAET,MACE,YACC,kBAAkB,eAAe,WAChC,eAAe,SAAS,SAAS,GAAG,EAEtC,QAAO;AAET,MAAI,kBAAkB,eAAe,QAAS,QAAO;AACrD,SAAO;GACP;CAEF,IAAI;AACJ,KAAI,OACF,WACE,oBAACA;EACC,QAAQ,MAAM;EACgB;EAC9B,SAAS,MAAM;YAEd;GACI;KAGT,WACE,oBAACC;EACC,KAAK;EACL;EACA;EACA,QAAQ,MAAM;EACd,OAAO,cAAc;EACV;EACmB;EAC9B,SAAS,MAAM;YAEd;GACO;AAId,QACE,qBAAC,uBACC,oBAAC;EACC,OAAO,EAAE,cAAc,EAAE,gBAAgB,YAAY,aAAa,EAAE;YAEnE,CAAC,UACA,oBAAC;GACC,GAAI;GACJ,KAAK;GACL;GACA,WAAW,MAAM;aAEhB;IACc,GACf;GACS,EACf,oBAAC,YAAY;EAAS,OAAO;YAAc;GAA+B,IACjE;;;;;;AAQf,IAAI,eAAe,WAAW,YAAY;AAE1C,aAAa,cAAc"}
|