@cube-dev/ui-kit 0.0.0-canary-3a7cbbe → 0.0.0-canary-009d53f
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.d.ts +0 -1
- package/dist/components/actions/Button/Button.js +1 -1
- package/dist/components/actions/ButtonGroup/ButtonGroup.js +1 -1
- package/dist/components/actions/ButtonSplit/ButtonSplit.js +1 -1
- package/dist/components/actions/ButtonSplit/context.js +1 -1
- package/dist/components/actions/CommandMenu/CommandMenu.js +1 -1
- package/dist/components/actions/CommandMenu/styled.js +1 -1
- package/dist/components/actions/ItemAction/ItemAction.js +1 -1
- package/dist/components/actions/ItemActionContext.js +1 -1
- package/dist/components/actions/ItemButton/ItemButton.js +1 -1
- package/dist/components/actions/Link/Link.js +1 -1
- package/dist/components/actions/Menu/Menu.js +1 -1
- package/dist/components/actions/Menu/MenuItem.js +1 -1
- package/dist/components/actions/Menu/MenuSection.js +1 -1
- package/dist/components/actions/Menu/MenuTrigger.js +1 -1
- package/dist/components/actions/Menu/SubMenuTrigger.js +1 -1
- package/dist/components/actions/Menu/SubmenuTriggerContext.js +1 -1
- package/dist/components/actions/Menu/context.js +1 -1
- package/dist/components/actions/Menu/styled.js +1 -1
- package/dist/components/actions/index.js +1 -1
- package/dist/components/actions/use-action.js +1 -1
- package/dist/components/actions/use-anchored-menu.js +1 -1
- package/dist/components/actions/use-context-menu.js +1 -1
- package/dist/components/content/ActiveZone/ActiveZone.js +1 -1
- package/dist/components/content/Alert/Alert.js +1 -1
- package/dist/components/content/Alert/use-alert.js +1 -1
- package/dist/components/content/Avatar/Avatar.js +1 -1
- package/dist/components/content/Badge/Badge.js +1 -1
- package/dist/components/content/Card/Card.js +1 -1
- package/dist/components/content/Content.js +1 -1
- package/dist/components/content/CopyPasteBlock/CopyPasteBlock.js +1 -1
- package/dist/components/content/CopySnippet/CopySnippet.js +1 -1
- package/dist/components/content/Disclosure/Disclosure.js +1 -1
- package/dist/components/content/Divider.js +1 -1
- package/dist/components/content/Footer.js +1 -1
- package/dist/components/content/Header.js +1 -1
- package/dist/components/content/HotKeys/HotKeys.js +1 -1
- package/dist/components/content/InlineInput/InlineInput.js +1 -1
- package/dist/components/content/Item/Item.js +11 -2
- package/dist/components/content/Item/Item.js.map +1 -1
- package/dist/components/content/ItemBadge/ItemBadge.js +1 -1
- package/dist/components/content/ItemCard/ItemCard.js +1 -1
- package/dist/components/content/Layout/GridLayout.js +1 -1
- package/dist/components/content/Layout/Layout.js +1 -1
- package/dist/components/content/Layout/LayoutBlock.js +1 -1
- package/dist/components/content/Layout/LayoutCenter.js +1 -1
- package/dist/components/content/Layout/LayoutContainer.js +1 -1
- package/dist/components/content/Layout/LayoutContent.js +1 -1
- package/dist/components/content/Layout/LayoutContext.js +1 -1
- package/dist/components/content/Layout/LayoutFlex.js +1 -1
- package/dist/components/content/Layout/LayoutFooter.js +1 -1
- package/dist/components/content/Layout/LayoutGrid.js +1 -1
- package/dist/components/content/Layout/LayoutHeader.js +1 -1
- package/dist/components/content/Layout/LayoutPane.js +1 -1
- package/dist/components/content/Layout/LayoutPanel.js +1 -1
- package/dist/components/content/Layout/LayoutPanelHeader.js +1 -1
- package/dist/components/content/Layout/LayoutToolbar.js +1 -1
- package/dist/components/content/Layout/hooks/useTinyScrollbar.js +1 -1
- package/dist/components/content/Layout/index.js +1 -1
- package/dist/components/content/Layout/utils.js +1 -1
- package/dist/components/content/Paragraph.js +1 -1
- package/dist/components/content/Placeholder/Placeholder.js +1 -1
- package/dist/components/content/PrismCode/PrismCode.js +1 -1
- package/dist/components/content/PrismCode/prismSetup.js +1 -1
- package/dist/components/content/PrismDiffCode/PrismDiffCode.js +1 -1
- package/dist/components/content/Result/Result.js +1 -1
- package/dist/components/content/Skeleton/Skeleton.js +1 -1
- package/dist/components/content/Tag/Tag.js +1 -1
- package/dist/components/content/Text.d.ts +7 -7
- 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 +17 -213
- package/dist/components/fields/ComboBox/ComboBox.js.map +1 -1
- package/dist/components/fields/CommandTextArea/CommandTextArea.d.ts +98 -0
- package/dist/components/fields/CommandTextArea/CommandTextArea.js +383 -0
- package/dist/components/fields/CommandTextArea/CommandTextArea.js.map +1 -0
- package/dist/components/fields/CommandTextArea/caretPosition.js +89 -0
- package/dist/components/fields/CommandTextArea/caretPosition.js.map +1 -0
- package/dist/components/fields/CommandTextArea/index.d.ts +2 -0
- package/dist/components/fields/CommandTextArea/useCaretAnchor.js +68 -0
- package/dist/components/fields/CommandTextArea/useCaretAnchor.js.map +1 -0
- 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 +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.d.ts +5 -0
- package/dist/components/fields/ListBox/ListBox.js +10 -4
- package/dist/components/fields/ListBox/ListBox.js.map +1 -1
- package/dist/components/fields/ListBoxPopover/ListBoxPopover.d.ts +5 -0
- package/dist/components/fields/ListBoxPopover/ListBoxPopover.js +146 -0
- package/dist/components/fields/ListBoxPopover/ListBoxPopover.js.map +1 -0
- package/dist/components/fields/ListBoxPopover/index.d.ts +3 -0
- package/dist/components/fields/ListBoxPopover/listNavigation.d.ts +24 -0
- package/dist/components/fields/ListBoxPopover/listNavigation.js +98 -0
- package/dist/components/fields/ListBoxPopover/listNavigation.js.map +1 -0
- package/dist/components/fields/ListBoxPopover/useCompositeFocus.js +53 -0
- package/dist/components/fields/ListBoxPopover/useCompositeFocus.js.map +1 -0
- 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 +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 +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/fields/index.d.ts +2 -0
- 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/TabButton.js +1 -1
- package/dist/components/navigation/Tabs/TabDropIndicator.js +1 -1
- package/dist/components/navigation/Tabs/TabPanel.js +1 -1
- package/dist/components/navigation/Tabs/TabPicker.js +1 -1
- package/dist/components/navigation/Tabs/Tabs.js +1 -1
- package/dist/components/navigation/Tabs/TabsAction.js +1 -1
- package/dist/components/navigation/Tabs/TabsContext.js +1 -1
- package/dist/components/navigation/Tabs/popover-placement.js +1 -1
- package/dist/components/navigation/Tabs/styled.js +1 -1
- package/dist/components/navigation/Tabs/types.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.d.ts +1 -2
- package/dist/components/overlays/Modal/Modal.js +1 -1
- package/dist/components/overlays/Modal/OpenTransitionContext.js +1 -1
- package/dist/components/overlays/Modal/Overlay.d.ts +0 -1
- package/dist/components/overlays/Modal/Overlay.js +1 -1
- package/dist/components/overlays/Modal/Popover.js +1 -1
- package/dist/components/overlays/Modal/Tray.js +1 -1
- package/dist/components/overlays/Modal/Underlay.js +1 -1
- package/dist/components/overlays/Modal/types.d.ts +0 -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.d.ts +0 -2
- 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/index.d.ts +0 -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.d.ts +2 -1
- package/dist/index.js +3 -2
- package/dist/index.js.map +1 -1
- package/dist/provider.js +1 -1
- package/dist/providers/TrackingProvider.js +1 -1
- package/dist/providers/navigationAdapter.default.js +1 -1
- package/dist/tokens/base.js +1 -1
- package/dist/tokens/colors.js +1 -1
- package/dist/tokens/index.js +1 -1
- package/dist/tokens/layout.js +1 -1
- package/dist/tokens/palette.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.d.ts +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 +1 -1
- package/dist/utils/react/useQaProps.js +1 -1
- package/dist/utils/react/useViewportSize.js +1 -1
- package/dist/utils/react/wrapNodeIfPlain.js +1 -1
- package/dist/utils/selection.js +1 -1
- package/dist/utils/styles.js +1 -1
- package/dist/utils/tree.js +1 -1
- package/dist/utils/warnings.js +1 -1
- package/dist/version.js +2 -2
- package/docs/components/fields/CommandTextArea.md +153 -0
- package/package.json +1 -1
- package/dist/components/portal/PortalProvider.d.ts +0 -2
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
|
|
2
|
+
import { _CollectionItem } from "../../CollectionItem.js";
|
|
3
|
+
import { CubeTextInputBaseProps } from "../TextInput/TextInputBase.js";
|
|
4
|
+
import { ListStateLike, TextFilterFn } from "../ListBoxPopover/listNavigation.js";
|
|
5
|
+
import "../ListBoxPopover/index.js";
|
|
6
|
+
import { ForwardedRef, ReactElement, ReactNode, RefObject } from "react";
|
|
7
|
+
import { Section } from "react-stately";
|
|
8
|
+
import { Key as Key$1 } from "@react-types/shared";
|
|
9
|
+
|
|
10
|
+
//#region src/components/fields/CommandTextArea/CommandTextArea.d.ts
|
|
11
|
+
/** A single trigger character with optional placement constraint. */
|
|
12
|
+
interface CommandTrigger {
|
|
13
|
+
/** The character that opens the autocomplete (e.g. `/` or `@`). */
|
|
14
|
+
char: string;
|
|
15
|
+
/**
|
|
16
|
+
* When true, the trigger token must start at index 0 of the input
|
|
17
|
+
* (whole-message slash commands). When false, the token may appear after
|
|
18
|
+
* any whitespace, anywhere in the text (Slack/Notion-style).
|
|
19
|
+
*/
|
|
20
|
+
atLineStart?: boolean;
|
|
21
|
+
}
|
|
22
|
+
/** Result of scanning the textarea for an active trigger token. */
|
|
23
|
+
interface ActiveToken {
|
|
24
|
+
/** The matched trigger descriptor. */
|
|
25
|
+
trigger: CommandTrigger;
|
|
26
|
+
/** The active token text, INCLUDING the trigger char (e.g. `/cle`). */
|
|
27
|
+
token: string;
|
|
28
|
+
/** Inclusive start index of the token in the textarea value. */
|
|
29
|
+
start: number;
|
|
30
|
+
/** Exclusive end index of the token (caret position while typing). */
|
|
31
|
+
end: number;
|
|
32
|
+
}
|
|
33
|
+
type CommandTextAreaFilterFn = TextFilterFn;
|
|
34
|
+
interface CubeCommandTextAreaProps<T> extends Omit<CubeTextInputBaseProps, 'children' | 'multiLine'> {
|
|
35
|
+
/** Whether the textarea should resize to fit its content. */
|
|
36
|
+
autoSize?: boolean;
|
|
37
|
+
/** Max visible rows when `autoSize` is true. Defaults to 10. */
|
|
38
|
+
maxRows?: number;
|
|
39
|
+
/** Number of visible rows. Defaults to 3. */
|
|
40
|
+
rows?: number;
|
|
41
|
+
/** Command/option source (alternative to JSX children). */
|
|
42
|
+
items?: Iterable<T>;
|
|
43
|
+
/** Static items or a render function (same shape as ComboBox/ListBox). */
|
|
44
|
+
children?: ReactNode | ((item: T) => ReactElement);
|
|
45
|
+
/**
|
|
46
|
+
* Triggers that open the autocomplete. Defaults to a single slash command
|
|
47
|
+
* that must start at the beginning of the input.
|
|
48
|
+
*/
|
|
49
|
+
triggers?: CommandTrigger[];
|
|
50
|
+
/**
|
|
51
|
+
* Custom filter. Pass `false` to disable internal filtering (server-side).
|
|
52
|
+
*/
|
|
53
|
+
filter?: CommandTextAreaFilterFn | false;
|
|
54
|
+
/**
|
|
55
|
+
* Fired when the user picks a command (Enter/Tab/click). The option's
|
|
56
|
+
* `textValue` is also inserted into the textarea regardless.
|
|
57
|
+
*/
|
|
58
|
+
onCommand?: (key: Key$1, item: {
|
|
59
|
+
textValue: string;
|
|
60
|
+
[k: string]: any;
|
|
61
|
+
}) => void;
|
|
62
|
+
/** Insert a trailing space after the chosen command. Defaults to true. */
|
|
63
|
+
insertSpaceAfter?: boolean;
|
|
64
|
+
/** Keys of disabled options. */
|
|
65
|
+
disabledKeys?: Iterable<Key$1>;
|
|
66
|
+
/** Popover placement. Chat inputs usually want `top`. Defaults to `top`. */
|
|
67
|
+
direction?: 'bottom' | 'top';
|
|
68
|
+
/** Whether the popover should flip when overflowing. Defaults to true. */
|
|
69
|
+
shouldFlip?: boolean;
|
|
70
|
+
/** Offset between the textarea and the popover. */
|
|
71
|
+
overlayOffset?: number;
|
|
72
|
+
/** Padding between the popover and the viewport edge. */
|
|
73
|
+
containerPadding?: number;
|
|
74
|
+
/** Ref for the textarea element. */
|
|
75
|
+
inputRef?: RefObject<HTMLTextAreaElement>;
|
|
76
|
+
/** Ref for the wrapper element (popover anchor). */
|
|
77
|
+
wrapperRef?: RefObject<HTMLDivElement>;
|
|
78
|
+
/** Ref for the popover overlay element. */
|
|
79
|
+
popoverRef?: RefObject<HTMLDivElement>;
|
|
80
|
+
/** Ref for the listbox element. */
|
|
81
|
+
listBoxRef?: RefObject<HTMLDivElement>;
|
|
82
|
+
/** Ref through which the internal list state is exposed. */
|
|
83
|
+
listStateRef?: RefObject<ListStateLike | null>;
|
|
84
|
+
overlayStyles?: any;
|
|
85
|
+
listBoxStyles?: any;
|
|
86
|
+
optionStyles?: any;
|
|
87
|
+
sectionStyles?: any;
|
|
88
|
+
headingStyles?: any;
|
|
89
|
+
}
|
|
90
|
+
declare const _CommandTextArea: (<T>(props: CubeCommandTextAreaProps<T> & {
|
|
91
|
+
ref?: ForwardedRef<HTMLElement>;
|
|
92
|
+
}) => ReactElement) & {
|
|
93
|
+
Item: typeof _CollectionItem;
|
|
94
|
+
Section: typeof Section;
|
|
95
|
+
};
|
|
96
|
+
//#endregion
|
|
97
|
+
export { ActiveToken, CommandTextAreaFilterFn, CommandTrigger, CubeCommandTextAreaProps, _CommandTextArea };
|
|
98
|
+
//# sourceMappingURL=CommandTextArea.d.ts.map
|
|
@@ -0,0 +1,383 @@
|
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-009d53f | Cube Dev Team */
|
|
2
|
+
import { chain } from "../../../utils/react/chain.js";
|
|
3
|
+
import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
|
|
4
|
+
import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
|
|
5
|
+
import { useEvent } from "../../../_internal/hooks/use-event.js";
|
|
6
|
+
import { useProviderProps } from "../../../provider.js";
|
|
7
|
+
import { _CollectionItem } from "../../CollectionItem.js";
|
|
8
|
+
import { generateRandomId } from "../../../utils/random.js";
|
|
9
|
+
import { useFormProps } from "../../form/Form/Form.js";
|
|
10
|
+
import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
|
|
11
|
+
import { castNullableStringValue } from "../../../utils/react/nullableValue.js";
|
|
12
|
+
import { TextInputBase } from "../TextInput/TextInputBase.js";
|
|
13
|
+
import { ListBoxPopover } from "../ListBoxPopover/ListBoxPopover.js";
|
|
14
|
+
import { useCompositeFocus } from "../ListBoxPopover/useCompositeFocus.js";
|
|
15
|
+
import { filterCollectionNodes, getEdgeVisibleKey, getNextVisibleKey, markKeyboardFocus } from "../ListBoxPopover/listNavigation.js";
|
|
16
|
+
import { useCaretAnchor } from "./useCaretAnchor.js";
|
|
17
|
+
import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
|
|
18
|
+
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
19
|
+
import { useFilter, useTextField } from "react-aria";
|
|
20
|
+
import { Section, useListState } from "react-stately";
|
|
21
|
+
|
|
22
|
+
//#region src/components/fields/CommandTextArea/CommandTextArea.tsx
|
|
23
|
+
const DEFAULT_TRIGGERS = [{
|
|
24
|
+
char: "/",
|
|
25
|
+
atLineStart: true
|
|
26
|
+
}];
|
|
27
|
+
/**
|
|
28
|
+
* Inspect the textarea contents up to the caret and find the active trigger
|
|
29
|
+
* token, if any. The token includes the trigger character and ends at the
|
|
30
|
+
* caret (so it grows as the user types). A token ends at whitespace or the end
|
|
31
|
+
* of the input.
|
|
32
|
+
*/
|
|
33
|
+
function parseActiveToken(value, caret, triggers) {
|
|
34
|
+
if (!triggers.length) return null;
|
|
35
|
+
const before = value.slice(0, caret);
|
|
36
|
+
value.slice(caret);
|
|
37
|
+
for (const trigger of triggers) {
|
|
38
|
+
const ch = trigger.char;
|
|
39
|
+
if (trigger.atLineStart) {
|
|
40
|
+
if (value[0] !== ch) continue;
|
|
41
|
+
if (before.slice(1).search(/\s/) !== -1) continue;
|
|
42
|
+
const token = before;
|
|
43
|
+
if (!token) continue;
|
|
44
|
+
return {
|
|
45
|
+
trigger,
|
|
46
|
+
token,
|
|
47
|
+
start: 0,
|
|
48
|
+
end: caret
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
const match = /(?:^|\s)([\S]+)$/.exec(before);
|
|
52
|
+
if (!match) continue;
|
|
53
|
+
const candidate = match[1];
|
|
54
|
+
if (candidate[0] !== ch) continue;
|
|
55
|
+
return {
|
|
56
|
+
trigger,
|
|
57
|
+
token: candidate,
|
|
58
|
+
start: caret - candidate.length,
|
|
59
|
+
end: caret
|
|
60
|
+
};
|
|
61
|
+
}
|
|
62
|
+
return null;
|
|
63
|
+
}
|
|
64
|
+
function CommandTextArea(props, ref) {
|
|
65
|
+
props = castNullableStringValue(props);
|
|
66
|
+
props = useProviderProps(props);
|
|
67
|
+
props = useFormProps(props);
|
|
68
|
+
props = useFieldProps(props, {
|
|
69
|
+
defaultValidationTrigger: "onBlur",
|
|
70
|
+
valuePropsMapper: ({ value, onChange }) => ({
|
|
71
|
+
onChange,
|
|
72
|
+
value: value?.toString() ?? ""
|
|
73
|
+
})
|
|
74
|
+
});
|
|
75
|
+
let { qa, autoSize = false, isDisabled = false, isReadOnly = false, isRequired = false, onChange, maxRows = 10, rows = 3, labelProps: userLabelProps, inputRef: propsInputRef, value, placeholder, items, children: renderChildren, triggers = DEFAULT_TRIGGERS, filter, onCommand, insertSpaceAfter = true, disabledKeys, direction = "top", shouldFlip = true, overlayOffset = 8, containerPadding = 8, overlayStyles, listBoxStyles, optionStyles, sectionStyles, headingStyles, wrapperRef: propsWrapperRef, popoverRef: propsPopoverRef, listBoxRef: propsListBoxRef, listStateRef: propsListStateRef, onKeyDown, onFocus, onBlur, ...otherProps } = props;
|
|
76
|
+
rows = Math.max(rows, 1);
|
|
77
|
+
maxRows = Math.max(maxRows, rows);
|
|
78
|
+
const localInputRef = useRef(null);
|
|
79
|
+
const inputRef = propsInputRef ?? localInputRef;
|
|
80
|
+
const wrapperRef = useCombinedRefs(propsWrapperRef);
|
|
81
|
+
const popoverRef = useCombinedRefs(propsPopoverRef);
|
|
82
|
+
const listBoxRef = useCombinedRefs(propsListBoxRef);
|
|
83
|
+
const listStateRef = propsListStateRef ?? useRef(null);
|
|
84
|
+
const commandTextAreaId = useMemo(() => generateRandomId(), []);
|
|
85
|
+
const isControlled = value !== void 0;
|
|
86
|
+
const [internalValue, setInternalValue] = useState(value ?? "");
|
|
87
|
+
const effectiveValue = isControlled ? value : internalValue;
|
|
88
|
+
const handleChange = useEvent((next) => {
|
|
89
|
+
if (!isControlled) setInternalValue(next);
|
|
90
|
+
onChange?.(next);
|
|
91
|
+
});
|
|
92
|
+
let children = renderChildren;
|
|
93
|
+
const renderFn = renderChildren;
|
|
94
|
+
if (items && typeof renderFn === "function") children = Array.from(items).map((item, idx) => {
|
|
95
|
+
const rendered = renderFn(item);
|
|
96
|
+
if (React.isValidElement(rendered) && rendered.key == null) return React.cloneElement(rendered, { key: rendered?.key ?? item?.key ?? idx });
|
|
97
|
+
return rendered;
|
|
98
|
+
});
|
|
99
|
+
const [caret, setCaret] = useState(() => effectiveValue.length);
|
|
100
|
+
const syncCaret = useEvent(() => {
|
|
101
|
+
const el = inputRef.current;
|
|
102
|
+
if (!el) return;
|
|
103
|
+
setCaret(el.selectionStart ?? el.value.length);
|
|
104
|
+
});
|
|
105
|
+
const activeToken = useMemo(() => parseActiveToken(effectiveValue, caret, triggers), [
|
|
106
|
+
effectiveValue,
|
|
107
|
+
caret,
|
|
108
|
+
triggers
|
|
109
|
+
]);
|
|
110
|
+
const term = useMemo(() => {
|
|
111
|
+
if (!activeToken) return "";
|
|
112
|
+
const { token, trigger } = activeToken;
|
|
113
|
+
return token.startsWith(trigger.char) ? token.slice(trigger.char.length) : token;
|
|
114
|
+
}, [activeToken]);
|
|
115
|
+
const { contains } = useFilter({ sensitivity: "base" });
|
|
116
|
+
const textFilterFn = useMemo(() => filter === false ? () => true : filter || contains, [filter, contains]);
|
|
117
|
+
const localCollectionState = useListState({
|
|
118
|
+
children,
|
|
119
|
+
items,
|
|
120
|
+
selectionMode: "none"
|
|
121
|
+
});
|
|
122
|
+
const filterFn = useCallback((nodes) => filterCollectionNodes(nodes, term, textFilterFn), [term, textFilterFn]);
|
|
123
|
+
const filteredCount = useMemo(() => {
|
|
124
|
+
if (!activeToken) return 0;
|
|
125
|
+
const filtered = filterFn(localCollectionState.collection);
|
|
126
|
+
let count = 0;
|
|
127
|
+
for (const node of filtered) if (node.type === "section" && node.childNodes) {
|
|
128
|
+
for (const child of node.childNodes) if (child.type === "item") count++;
|
|
129
|
+
} else if (node.type === "item") count++;
|
|
130
|
+
return count;
|
|
131
|
+
}, [
|
|
132
|
+
activeToken,
|
|
133
|
+
filterFn,
|
|
134
|
+
localCollectionState.collection
|
|
135
|
+
]);
|
|
136
|
+
const [dismissedToken, setDismissedToken] = useState(null);
|
|
137
|
+
const [, setFocusTick] = useState(0);
|
|
138
|
+
const bumpFocus = useEvent(() => setFocusTick((t) => t + 1));
|
|
139
|
+
useEffect(() => {
|
|
140
|
+
setDismissedToken((prev) => prev != null && activeToken?.token !== prev ? null : prev);
|
|
141
|
+
}, [activeToken?.token]);
|
|
142
|
+
const shouldShowPopover = !!activeToken && activeToken.token !== dismissedToken && filteredCount > 0;
|
|
143
|
+
const { anchorRef: caretAnchorRef, positionApiRef } = useCaretAnchor({
|
|
144
|
+
inputRef,
|
|
145
|
+
wrapperRef,
|
|
146
|
+
caret,
|
|
147
|
+
value: effectiveValue,
|
|
148
|
+
isActive: shouldShowPopover
|
|
149
|
+
});
|
|
150
|
+
const adjustHeight = useEvent(() => {
|
|
151
|
+
const textarea = inputRef.current;
|
|
152
|
+
if (!textarea || !autoSize) return;
|
|
153
|
+
textarea.style.height = "auto";
|
|
154
|
+
const computedStyle = getComputedStyle(textarea);
|
|
155
|
+
const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
|
|
156
|
+
const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;
|
|
157
|
+
const borderTop = parseFloat(computedStyle.borderTopWidth) || 0;
|
|
158
|
+
const borderBottom = parseFloat(computedStyle.borderBottomWidth) || 0;
|
|
159
|
+
const lineHeight = parseInt(computedStyle.lineHeight) || 20;
|
|
160
|
+
const contentHeight = textarea.scrollHeight - paddingTop - paddingBottom;
|
|
161
|
+
const computedRows = Math.ceil(contentHeight / lineHeight);
|
|
162
|
+
const totalHeight = Math.max(Math.min(computedRows, maxRows), rows) * lineHeight + paddingTop + paddingBottom + borderTop + borderBottom;
|
|
163
|
+
textarea.style.height = `${totalHeight}px`;
|
|
164
|
+
});
|
|
165
|
+
let { labelProps, inputProps } = useTextField({
|
|
166
|
+
...otherProps,
|
|
167
|
+
value: effectiveValue,
|
|
168
|
+
placeholder,
|
|
169
|
+
isDisabled,
|
|
170
|
+
isReadOnly,
|
|
171
|
+
isRequired,
|
|
172
|
+
onChange: chain(handleChange, adjustHeight),
|
|
173
|
+
inputElementType: "textarea"
|
|
174
|
+
}, inputRef);
|
|
175
|
+
const mergedLabelProps = mergeProps$1(labelProps, userLabelProps);
|
|
176
|
+
const useEnvironmentalEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
|
|
177
|
+
useEnvironmentalEffect(() => {
|
|
178
|
+
if (!autoSize || !inputRef.current) return;
|
|
179
|
+
adjustHeight();
|
|
180
|
+
const resizeObserver = new ResizeObserver(adjustHeight);
|
|
181
|
+
resizeObserver.observe(inputRef.current);
|
|
182
|
+
return () => resizeObserver.disconnect();
|
|
183
|
+
}, [autoSize, inputRef.current]);
|
|
184
|
+
useEnvironmentalEffect(() => {
|
|
185
|
+
if (autoSize && inputRef.current) adjustHeight();
|
|
186
|
+
}, [effectiveValue]);
|
|
187
|
+
const pendingCaretRef = useRef(null);
|
|
188
|
+
useEnvironmentalEffect(() => {
|
|
189
|
+
if (pendingCaretRef.current != null && inputRef.current) {
|
|
190
|
+
const pos = pendingCaretRef.current;
|
|
191
|
+
pendingCaretRef.current = null;
|
|
192
|
+
inputRef.current.focus();
|
|
193
|
+
inputRef.current.setSelectionRange(pos, pos);
|
|
194
|
+
setCaret(pos);
|
|
195
|
+
}
|
|
196
|
+
}, [effectiveValue]);
|
|
197
|
+
const getItemTextValue = useCallback((key) => {
|
|
198
|
+
return (localCollectionState?.collection?.getItem(key))?.textValue || String(key);
|
|
199
|
+
}, [localCollectionState?.collection]);
|
|
200
|
+
const commit = useEvent((key) => {
|
|
201
|
+
const listState = listStateRef.current;
|
|
202
|
+
const textValue = getItemTextValue(key);
|
|
203
|
+
const token = activeToken;
|
|
204
|
+
const el = inputRef.current;
|
|
205
|
+
if (token) {
|
|
206
|
+
const next = effectiveValue.slice(0, token.start) + textValue + (insertSpaceAfter ? " " : "") + effectiveValue.slice(token.end);
|
|
207
|
+
const caretPos = token.start + textValue.length + (insertSpaceAfter ? 1 : 0);
|
|
208
|
+
pendingCaretRef.current = caretPos;
|
|
209
|
+
handleChange(next);
|
|
210
|
+
if (el) {
|
|
211
|
+
el.focus();
|
|
212
|
+
try {
|
|
213
|
+
el.setSelectionRange(caretPos, caretPos);
|
|
214
|
+
} catch {}
|
|
215
|
+
}
|
|
216
|
+
} else if (el) {
|
|
217
|
+
const start = el.selectionStart ?? effectiveValue.length;
|
|
218
|
+
const end = el.selectionEnd ?? effectiveValue.length;
|
|
219
|
+
const next = effectiveValue.slice(0, start) + textValue + (insertSpaceAfter ? " " : "") + effectiveValue.slice(end);
|
|
220
|
+
pendingCaretRef.current = start + textValue.length + (insertSpaceAfter ? 1 : 0);
|
|
221
|
+
handleChange(next);
|
|
222
|
+
}
|
|
223
|
+
setDismissedToken(null);
|
|
224
|
+
onCommand?.(key, {
|
|
225
|
+
textValue,
|
|
226
|
+
...listState?.collection?.getItem(key)?.props ?? {}
|
|
227
|
+
});
|
|
228
|
+
});
|
|
229
|
+
const onKeyDownHandler = useCallback((e) => {
|
|
230
|
+
onKeyDown?.(e);
|
|
231
|
+
if (e.defaultPrevented) return;
|
|
232
|
+
if (!shouldShowPopover) return;
|
|
233
|
+
const listState = listStateRef.current;
|
|
234
|
+
if (e.key === "ArrowDown" || e.key === "ArrowUp") {
|
|
235
|
+
if (!listState) return;
|
|
236
|
+
e.preventDefault();
|
|
237
|
+
const nextKey = getNextVisibleKey(listState, e.key === "ArrowDown" ? 1 : -1);
|
|
238
|
+
if (nextKey != null) {
|
|
239
|
+
markKeyboardFocus(listState);
|
|
240
|
+
listState.selectionManager.setFocusedKey(nextKey);
|
|
241
|
+
bumpFocus();
|
|
242
|
+
}
|
|
243
|
+
} else if (e.key === "Home" || e.key === "End") {
|
|
244
|
+
if (!listState) return;
|
|
245
|
+
e.preventDefault();
|
|
246
|
+
const edgeKey = getEdgeVisibleKey(listState, e.key === "Home" ? "first" : "last");
|
|
247
|
+
if (edgeKey != null) {
|
|
248
|
+
markKeyboardFocus(listState);
|
|
249
|
+
listState.selectionManager.setFocusedKey(edgeKey);
|
|
250
|
+
bumpFocus();
|
|
251
|
+
}
|
|
252
|
+
} else if (e.key === "Enter" || e.key === "Tab") {
|
|
253
|
+
if (!listState) return;
|
|
254
|
+
const focused = listState.selectionManager.focusedKey;
|
|
255
|
+
if (focused != null) {
|
|
256
|
+
e.preventDefault();
|
|
257
|
+
commit(focused);
|
|
258
|
+
}
|
|
259
|
+
} else if (e.key === "Escape") {
|
|
260
|
+
e.preventDefault();
|
|
261
|
+
if (activeToken) setDismissedToken(activeToken.token);
|
|
262
|
+
}
|
|
263
|
+
}, [
|
|
264
|
+
shouldShowPopover,
|
|
265
|
+
activeToken,
|
|
266
|
+
commit,
|
|
267
|
+
onKeyDown,
|
|
268
|
+
listStateRef
|
|
269
|
+
]);
|
|
270
|
+
const focusInitAttemptsRef = useRef(0);
|
|
271
|
+
useLayoutEffect(() => {
|
|
272
|
+
if (!shouldShowPopover) return;
|
|
273
|
+
focusInitAttemptsRef.current = 0;
|
|
274
|
+
const tick = () => {
|
|
275
|
+
if (!shouldShowPopover) return;
|
|
276
|
+
const listState = listStateRef.current;
|
|
277
|
+
if (!listState) {
|
|
278
|
+
focusInitAttemptsRef.current += 1;
|
|
279
|
+
if (focusInitAttemptsRef.current < 8) requestAnimationFrame(tick);
|
|
280
|
+
return;
|
|
281
|
+
}
|
|
282
|
+
if (listState.selectionManager.focusedKey == null) {
|
|
283
|
+
const first = getEdgeVisibleKey(listState, "first");
|
|
284
|
+
if (first != null) {
|
|
285
|
+
markKeyboardFocus(listState);
|
|
286
|
+
listState.selectionManager.setFocusedKey(first);
|
|
287
|
+
bumpFocus();
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
};
|
|
291
|
+
requestAnimationFrame(() => requestAnimationFrame(tick));
|
|
292
|
+
}, [shouldShowPopover]);
|
|
293
|
+
const { compositeFocusProps } = useCompositeFocus({
|
|
294
|
+
wrapperRef,
|
|
295
|
+
popoverRef,
|
|
296
|
+
onFocus,
|
|
297
|
+
onBlur,
|
|
298
|
+
isDisabled
|
|
299
|
+
});
|
|
300
|
+
const focusedKey = listStateRef.current?.selectionManager.focusedKey ?? null;
|
|
301
|
+
const listBoxId = `CommandTextAreaListBox-${commandTextAreaId}`;
|
|
302
|
+
const popoverOverlayStyles = {
|
|
303
|
+
width: "40x",
|
|
304
|
+
maxWidth: "50vw",
|
|
305
|
+
...overlayStyles
|
|
306
|
+
};
|
|
307
|
+
const commandInputProps = mergeProps$1(inputProps, {
|
|
308
|
+
role: "combobox",
|
|
309
|
+
"aria-autocomplete": "list",
|
|
310
|
+
"aria-expanded": shouldShowPopover,
|
|
311
|
+
"aria-haspopup": "listbox",
|
|
312
|
+
"aria-controls": shouldShowPopover ? listBoxId : void 0,
|
|
313
|
+
"aria-activedescendant": shouldShowPopover && focusedKey != null ? `ListBoxItem-${focusedKey}` : void 0,
|
|
314
|
+
onKeyDown: onKeyDownHandler,
|
|
315
|
+
onSelect: syncCaret,
|
|
316
|
+
onKeyUp: syncCaret,
|
|
317
|
+
onClick: syncCaret,
|
|
318
|
+
"data-input-type": "command-textarea"
|
|
319
|
+
});
|
|
320
|
+
return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TextInputBase, {
|
|
321
|
+
ref,
|
|
322
|
+
...otherProps,
|
|
323
|
+
multiLine: true,
|
|
324
|
+
qa,
|
|
325
|
+
inputRef,
|
|
326
|
+
wrapperRef,
|
|
327
|
+
wrapperProps: compositeFocusProps,
|
|
328
|
+
labelProps: mergedLabelProps,
|
|
329
|
+
inputProps: commandInputProps,
|
|
330
|
+
isDisabled,
|
|
331
|
+
isReadOnly,
|
|
332
|
+
isRequired,
|
|
333
|
+
rows
|
|
334
|
+
}), /* @__PURE__ */ jsx(ListBoxPopover, {
|
|
335
|
+
isOpen: shouldShowPopover,
|
|
336
|
+
triggerRef: wrapperRef,
|
|
337
|
+
positionTargetRef: caretAnchorRef,
|
|
338
|
+
positionApiRef,
|
|
339
|
+
popoverRef,
|
|
340
|
+
listBoxRef,
|
|
341
|
+
direction,
|
|
342
|
+
shouldFlip,
|
|
343
|
+
overlayOffset,
|
|
344
|
+
containerPadding,
|
|
345
|
+
listBoxId,
|
|
346
|
+
overlayStyles: popoverOverlayStyles,
|
|
347
|
+
listBoxStyles,
|
|
348
|
+
optionStyles,
|
|
349
|
+
optionHighlight: term,
|
|
350
|
+
sectionStyles,
|
|
351
|
+
headingStyles,
|
|
352
|
+
isDisabled,
|
|
353
|
+
disabledKeys,
|
|
354
|
+
items,
|
|
355
|
+
listStateRef,
|
|
356
|
+
ariaLabel: props["aria-label"] || (typeof otherProps.label === "string" ? otherProps.label : "Commands"),
|
|
357
|
+
compositeFocusProps,
|
|
358
|
+
filter: filterFn,
|
|
359
|
+
onClose: () => {
|
|
360
|
+
if (activeToken) setDismissedToken(activeToken.token);
|
|
361
|
+
},
|
|
362
|
+
onSelectionChange: (selection) => {
|
|
363
|
+
const key = Array.isArray(selection) ? selection[0] : selection;
|
|
364
|
+
if (key != null) commit(key);
|
|
365
|
+
},
|
|
366
|
+
children
|
|
367
|
+
})] });
|
|
368
|
+
}
|
|
369
|
+
const _CommandTextArea = forwardRef(CommandTextArea);
|
|
370
|
+
Object.assign(_CommandTextArea, {
|
|
371
|
+
Item: _CollectionItem,
|
|
372
|
+
Section,
|
|
373
|
+
displayName: "CommandTextArea"
|
|
374
|
+
});
|
|
375
|
+
Object.defineProperty(_CommandTextArea, "cubeInputType", {
|
|
376
|
+
value: "CommandTextArea",
|
|
377
|
+
enumerable: false,
|
|
378
|
+
configurable: false
|
|
379
|
+
});
|
|
380
|
+
|
|
381
|
+
//#endregion
|
|
382
|
+
export { _CommandTextArea };
|
|
383
|
+
//# sourceMappingURL=CommandTextArea.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CommandTextArea.js","names":["mergeProps","BaseSection"],"sources":["../../../../src/components/fields/CommandTextArea/CommandTextArea.tsx"],"sourcesContent":["import { Key } from '@react-types/shared';\nimport { Styles } from '@tenphi/tasty';\nimport React, {\n ForwardedRef,\n forwardRef,\n ReactElement,\n ReactNode,\n RefObject,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useFilter, useTextField } from 'react-aria';\nimport { Section as BaseSection, useListState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal';\nimport { useProviderProps } from '../../../provider';\nimport { generateRandomId } from '../../../utils/random';\nimport { chain, mergeProps, useCombinedRefs } from '../../../utils/react';\nimport {\n castNullableStringValue,\n WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { CollectionItem as Item } from '../../CollectionItem';\nimport { useFieldProps, useFormProps } from '../../form';\nimport {\n filterCollectionNodes,\n getEdgeVisibleKey,\n getNextVisibleKey,\n ListBoxPopover,\n ListStateLike,\n markKeyboardFocus,\n TextFilterFn,\n useCompositeFocus,\n} from '../ListBoxPopover';\nimport {\n CubeTextInputBaseProps,\n TextInputBase,\n} from '../TextInput/TextInputBase';\n\nimport { useCaretAnchor } from './useCaretAnchor';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** A single trigger character with optional placement constraint. */\nexport interface CommandTrigger {\n /** The character that opens the autocomplete (e.g. `/` or `@`). */\n char: string;\n /**\n * When true, the trigger token must start at index 0 of the input\n * (whole-message slash commands). When false, the token may appear after\n * any whitespace, anywhere in the text (Slack/Notion-style).\n */\n atLineStart?: boolean;\n}\n\n/** Result of scanning the textarea for an active trigger token. */\nexport interface ActiveToken {\n /** The matched trigger descriptor. */\n trigger: CommandTrigger;\n /** The active token text, INCLUDING the trigger char (e.g. `/cle`). */\n token: string;\n /** Inclusive start index of the token in the textarea value. */\n start: number;\n /** Exclusive end index of the token (caret position while typing). */\n end: number;\n}\n\nexport type CommandTextAreaFilterFn = TextFilterFn;\n\nexport interface CubeCommandTextAreaProps<T>\n extends Omit<CubeTextInputBaseProps, 'children' | 'multiLine'> {\n /** Whether the textarea should resize to fit its content. */\n autoSize?: boolean;\n /** Max visible rows when `autoSize` is true. Defaults to 10. */\n maxRows?: number;\n /** Number of visible rows. Defaults to 3. */\n rows?: number;\n\n /** Command/option source (alternative to JSX children). */\n items?: Iterable<T>;\n /** Static items or a render function (same shape as ComboBox/ListBox). */\n children?: ReactNode | ((item: T) => ReactElement);\n /**\n * Triggers that open the autocomplete. Defaults to a single slash command\n * that must start at the beginning of the input.\n */\n triggers?: CommandTrigger[];\n /**\n * Custom filter. Pass `false` to disable internal filtering (server-side).\n */\n filter?: CommandTextAreaFilterFn | false;\n /**\n * Fired when the user picks a command (Enter/Tab/click). The option's\n * `textValue` is also inserted into the textarea regardless.\n */\n onCommand?: (key: Key, item: { textValue: string; [k: string]: any }) => void;\n /** Insert a trailing space after the chosen command. Defaults to true. */\n insertSpaceAfter?: boolean;\n /** Keys of disabled options. */\n disabledKeys?: Iterable<Key>;\n /** Popover placement. Chat inputs usually want `top`. Defaults to `top`. */\n direction?: 'bottom' | 'top';\n /** Whether the popover should flip when overflowing. Defaults to true. */\n shouldFlip?: boolean;\n /** Offset between the textarea and the popover. */\n overlayOffset?: number;\n /** Padding between the popover and the viewport edge. */\n containerPadding?: number;\n\n // Refs\n /** Ref for the textarea element. */\n inputRef?: RefObject<HTMLTextAreaElement>;\n /** Ref for the wrapper element (popover anchor). */\n wrapperRef?: RefObject<HTMLDivElement>;\n /** Ref for the popover overlay element. */\n popoverRef?: RefObject<HTMLDivElement>;\n /** Ref for the listbox element. */\n listBoxRef?: RefObject<HTMLDivElement>;\n /** Ref through which the internal list state is exposed. */\n listStateRef?: RefObject<ListStateLike | null>;\n\n // Style props\n overlayStyles?: any;\n listBoxStyles?: any;\n optionStyles?: any;\n sectionStyles?: any;\n headingStyles?: any;\n}\n\nconst DEFAULT_TRIGGERS: CommandTrigger[] = [{ char: '/', atLineStart: true }];\n\n// ---------------------------------------------------------------------------\n// Trigger parsing\n// ---------------------------------------------------------------------------\n\n/**\n * Inspect the textarea contents up to the caret and find the active trigger\n * token, if any. The token includes the trigger character and ends at the\n * caret (so it grows as the user types). A token ends at whitespace or the end\n * of the input.\n */\nexport function parseActiveToken(\n value: string,\n caret: number,\n triggers: CommandTrigger[],\n): ActiveToken | null {\n if (!triggers.length) return null;\n const before = value.slice(0, caret);\n const after = value.slice(caret);\n\n for (const trigger of triggers) {\n const ch = trigger.char;\n if (trigger.atLineStart) {\n // Whole-message command: token must start at index 0 and contain no\n // whitespace up to the caret.\n if (value[0] !== ch) continue;\n // No whitespace allowed within the token.\n const wsIndex = before.slice(1).search(/\\s/);\n if (wsIndex !== -1) continue;\n // The rest of the input (after caret) must also not yet contain a\n // whitespace boundary that would mean the command is \"finished\" — but\n // since the caret is the typing position, the token runs from 0 to the\n // first whitespace at/after... we keep it simple: token = value up to\n // caret, provided no whitespace in `before` past the trigger char and\n // the char after caret (if any) is not whitespace-only trailing.\n const token = before;\n if (!token) continue;\n return { trigger, token, start: 0, end: caret };\n }\n\n // Caret-token mode: find the last trigger char that begins a token at or\n // after a line start / whitespace boundary, with no whitespace between it\n // and the caret.\n const match = /(?:^|\\s)([\\S]+)$/.exec(before);\n if (!match) continue;\n const candidate = match[1];\n if (candidate[0] !== ch) continue;\n // Ensure the token hasn't already been closed by whitespace after caret.\n // (If there's non-whitespace after the caret, the user is mid-token.)\n const start = caret - candidate.length;\n // If immediately after the caret there's whitespace (or end), the token is\n // \"complete\" — still offer completions as long as the caret sits on the\n // token. We accept it.\n void after;\n return { trigger, token: candidate, start, end: caret };\n }\n\n return null;\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nfunction CommandTextArea<T extends object>(\n props: WithNullableValue<CubeCommandTextAreaProps<T>>,\n ref: ForwardedRef<HTMLElement>,\n) {\n props = castNullableStringValue(props);\n props = useProviderProps(props);\n props = useFormProps(props);\n props = useFieldProps(props, {\n defaultValidationTrigger: 'onBlur',\n valuePropsMapper: ({ value, onChange }) => ({\n onChange,\n value: value?.toString() ?? '',\n }),\n });\n\n let {\n qa,\n autoSize = false,\n isDisabled = false,\n isReadOnly = false,\n isRequired = false,\n onChange,\n maxRows = 10,\n rows = 3,\n labelProps: userLabelProps,\n inputRef: propsInputRef,\n value,\n placeholder,\n // command props\n items,\n children: renderChildren,\n triggers = DEFAULT_TRIGGERS,\n filter,\n onCommand,\n insertSpaceAfter = true,\n disabledKeys,\n direction = 'top',\n shouldFlip = true,\n overlayOffset = 8,\n containerPadding = 8,\n overlayStyles,\n listBoxStyles,\n optionStyles,\n sectionStyles,\n headingStyles,\n wrapperRef: propsWrapperRef,\n popoverRef: propsPopoverRef,\n listBoxRef: propsListBoxRef,\n listStateRef: propsListStateRef,\n onKeyDown,\n onFocus,\n onBlur,\n ...otherProps\n } = props;\n\n rows = Math.max(rows, 1);\n maxRows = Math.max(maxRows, rows);\n\n // ---- refs -------------------------------------------------------------\n const localInputRef = useRef<HTMLTextAreaElement>(null);\n const inputRef = (propsInputRef ??\n localInputRef) as RefObject<HTMLTextAreaElement>;\n const wrapperRef = useCombinedRefs(propsWrapperRef);\n const popoverRef = useCombinedRefs(propsPopoverRef);\n const listBoxRef = useCombinedRefs(propsListBoxRef);\n const listStateRef = (propsListStateRef ??\n useRef<ListStateLike | null>(null)) as RefObject<ListStateLike | null>;\n\n const commandTextAreaId = useMemo(() => generateRandomId(), []);\n\n // ---- controlled / uncontrolled value ----------------------------------\n // When no `value` is provided (standalone, no form), track the text\n // internally so trigger detection and commit still work.\n const isControlled = value !== undefined;\n const [internalValue, setInternalValue] = useState<string>(\n (value as string) ?? '',\n );\n const effectiveValue: string = isControlled\n ? (value as string)\n : internalValue;\n const handleChange = useEvent((next: string) => {\n if (!isControlled) setInternalValue(next);\n onChange?.(next);\n });\n\n // ---- children / items normalization -----------------------------------\n let children: ReactNode = renderChildren as ReactNode;\n const renderFn = renderChildren as unknown;\n if (items && typeof renderFn === 'function') {\n const itemsArray = Array.from(items as Iterable<any>);\n children = itemsArray.map((item, idx) => {\n const rendered = (renderFn as (it: any) => ReactNode)(item);\n if (\n React.isValidElement(rendered) &&\n (rendered as ReactElement).key == null\n ) {\n return React.cloneElement(rendered as ReactElement, {\n key: (rendered as any)?.key ?? item?.key ?? idx,\n });\n }\n return rendered as ReactNode;\n });\n }\n\n // ---- caret tracking ---------------------------------------------------\n // The caret drives trigger detection. We keep it in state so a caret move\n // (arrow keys without typing) re-renders and recomputes the active token.\n const [caret, setCaret] = useState(() => effectiveValue.length);\n const syncCaret = useEvent(() => {\n const el = inputRef.current;\n if (!el) return;\n setCaret(el.selectionStart ?? el.value.length);\n });\n\n // ---- trigger detection ------------------------------------------------\n const activeToken = useMemo(\n () => parseActiveToken(effectiveValue, caret, triggers),\n [effectiveValue, caret, triggers],\n );\n\n // The active token includes the trigger char (e.g. `/co`). Strip it before\n // filtering so the query is matched against the meaningful text — this lets\n // options match by their label/description (which don't contain the trigger\n // char) as well as by their `textValue`.\n const term = useMemo(() => {\n if (!activeToken) return '';\n const { token, trigger } = activeToken;\n return token.startsWith(trigger.char)\n ? token.slice(trigger.char.length)\n : token;\n }, [activeToken]);\n\n // ---- filtering --------------------------------------------------------\n const { contains } = useFilter({ sensitivity: 'base' });\n const textFilterFn = useMemo<CommandTextAreaFilterFn>(\n () => (filter === false ? () => true : filter || contains),\n [filter, contains],\n );\n\n // Local collection used to read option textValues and to count matches.\n const localCollectionState = useListState({\n children: children as any,\n items: items as any,\n selectionMode: 'none',\n });\n\n const filterFn = useCallback(\n (nodes: Iterable<any>) => filterCollectionNodes(nodes, term, textFilterFn),\n [term, textFilterFn],\n );\n\n // Count filtered options (flatten sections) to decide whether to show.\n const filteredCount = useMemo(() => {\n if (!activeToken) return 0;\n const filtered = filterFn(localCollectionState.collection);\n let count = 0;\n for (const node of filtered as Iterable<any>) {\n if (node.type === 'section' && node.childNodes) {\n for (const child of node.childNodes) {\n if (child.type === 'item') count++;\n }\n } else if (node.type === 'item') {\n count++;\n }\n }\n return count;\n }, [activeToken, filterFn, localCollectionState.collection]);\n\n // ---- dismiss handling (Escape keeps the text but hides the popover) ---\n const [dismissedToken, setDismissedToken] = useState<string | null>(null);\n // Bumped whenever we move the virtual focus so the textarea's\n // `aria-activedescendant` (read from the ListBox's stateRef at render time)\n // stays in sync — the ListBox's own state update does not re-render us.\n const [, setFocusTick] = useState(0);\n const bumpFocus = useEvent(() => setFocusTick((t) => t + 1));\n // Reset dismissal whenever the active token changes (user typed/backspaced).\n useEffect(() => {\n setDismissedToken((prev) =>\n prev != null && activeToken?.token !== prev ? null : prev,\n );\n }, [activeToken?.token]);\n\n const isCommandMode = !!activeToken && activeToken.token !== dismissedToken;\n const shouldShowPopover = isCommandMode && filteredCount > 0;\n\n // ---- caret-anchored popover ------------------------------------------\n // A zero-size element positioned at the caret (both axes) drives the\n // popover's geometry; the wrapper remains the dismiss/outside-click trigger.\n const { anchorRef: caretAnchorRef, positionApiRef } = useCaretAnchor({\n inputRef: inputRef as RefObject<HTMLTextAreaElement>,\n wrapperRef: wrapperRef as RefObject<HTMLElement>,\n caret,\n value: effectiveValue,\n isActive: shouldShowPopover,\n });\n\n // ---- height autosize (mirrors TextArea) -------------------------------\n const adjustHeight = useEvent(() => {\n const textarea = inputRef.current;\n if (!textarea || !autoSize) return;\n\n textarea.style.height = 'auto';\n const computedStyle = getComputedStyle(textarea);\n const paddingTop = parseFloat(computedStyle.paddingTop) || 0;\n const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;\n const borderTop = parseFloat(computedStyle.borderTopWidth) || 0;\n const borderBottom = parseFloat(computedStyle.borderBottomWidth) || 0;\n const lineHeight = parseInt(computedStyle.lineHeight) || 20;\n const contentHeight = textarea.scrollHeight - paddingTop - paddingBottom;\n const computedRows = Math.ceil(contentHeight / lineHeight);\n const targetRows = Math.max(Math.min(computedRows, maxRows), rows);\n const totalHeight =\n targetRows * lineHeight +\n paddingTop +\n paddingBottom +\n borderTop +\n borderBottom;\n textarea.style.height = `${totalHeight}px`;\n });\n\n // ---- useTextField (ARIA wiring for the textarea) ----------------------\n let { labelProps, inputProps } = useTextField(\n {\n ...otherProps,\n value: effectiveValue,\n placeholder,\n isDisabled,\n isReadOnly,\n isRequired,\n onChange: chain(handleChange, adjustHeight),\n inputElementType: 'textarea',\n } as any,\n inputRef as any,\n );\n\n const mergedLabelProps = mergeProps(labelProps, userLabelProps);\n\n const useEnvironmentalEffect =\n typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\n useEnvironmentalEffect(() => {\n if (!autoSize || !inputRef.current) return;\n adjustHeight();\n const resizeObserver = new ResizeObserver(adjustHeight);\n resizeObserver.observe(inputRef.current);\n return () => resizeObserver.disconnect();\n }, [autoSize, inputRef.current]);\n\n useEnvironmentalEffect(() => {\n if (autoSize && inputRef.current) {\n adjustHeight();\n }\n }, [effectiveValue]);\n\n // ---- caret restore after commit --------------------------------------\n const pendingCaretRef = useRef<number | null>(null);\n useEnvironmentalEffect(() => {\n if (pendingCaretRef.current != null && inputRef.current) {\n const pos = pendingCaretRef.current;\n pendingCaretRef.current = null;\n inputRef.current.focus();\n inputRef.current.setSelectionRange(pos, pos);\n setCaret(pos);\n }\n }, [effectiveValue]);\n\n // ---- helpers ----------------------------------------------------------\n const getItemTextValue = useCallback(\n (key: Key): string => {\n const item = localCollectionState?.collection?.getItem(key);\n return item?.textValue || String(key);\n },\n [localCollectionState?.collection],\n );\n\n // ---- commit (insert the chosen option's literal value) ---------------\n const commit = useEvent((key: Key) => {\n const listState = listStateRef.current;\n const textValue = getItemTextValue(key);\n const token = activeToken;\n const el = inputRef.current;\n\n if (token) {\n const next =\n effectiveValue.slice(0, token.start) +\n textValue +\n (insertSpaceAfter ? ' ' : '') +\n effectiveValue.slice(token.end);\n const caretPos =\n token.start + textValue.length + (insertSpaceAfter ? 1 : 0);\n pendingCaretRef.current = caretPos;\n handleChange(next);\n // If controlled, caret is restored by the effect above; if not, set now.\n if (el) {\n el.focus();\n try {\n el.setSelectionRange(caretPos, caretPos);\n } catch {\n /* noop */\n }\n }\n } else if (el) {\n // Fallback: insert at caret.\n const start = el.selectionStart ?? effectiveValue.length;\n const end = el.selectionEnd ?? effectiveValue.length;\n const next =\n effectiveValue.slice(0, start) +\n textValue +\n (insertSpaceAfter ? ' ' : '') +\n effectiveValue.slice(end);\n const caretPos = start + textValue.length + (insertSpaceAfter ? 1 : 0);\n pendingCaretRef.current = caretPos;\n handleChange(next);\n }\n\n setDismissedToken(null);\n onCommand?.(key, {\n textValue,\n ...(listState?.collection?.getItem(key)?.props ?? {}),\n });\n });\n\n // ---- keyboard navigation (only while the popover is open) -------------\n const onKeyDownHandler = useCallback(\n (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n onKeyDown?.(e);\n if (e.defaultPrevented) return;\n\n if (!shouldShowPopover) {\n // While not in command mode, the textarea behaves normally; but clear\n // any dismissal when the user edits.\n return;\n }\n\n const listState = listStateRef.current;\n\n if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n if (!listState) return;\n e.preventDefault();\n const nextKey = getNextVisibleKey(\n listState,\n e.key === 'ArrowDown' ? 1 : -1,\n );\n if (nextKey != null) {\n markKeyboardFocus(listState);\n listState.selectionManager.setFocusedKey(nextKey);\n bumpFocus();\n }\n } else if (e.key === 'Home' || e.key === 'End') {\n if (!listState) return;\n e.preventDefault();\n const edgeKey = getEdgeVisibleKey(\n listState,\n e.key === 'Home' ? 'first' : 'last',\n );\n if (edgeKey != null) {\n markKeyboardFocus(listState);\n listState.selectionManager.setFocusedKey(edgeKey);\n bumpFocus();\n }\n } else if (e.key === 'Enter' || e.key === 'Tab') {\n if (!listState) return;\n const focused = listState.selectionManager.focusedKey;\n if (focused != null) {\n e.preventDefault();\n commit(focused);\n }\n // Otherwise pass through (newline / form submit / tab navigation).\n } else if (e.key === 'Escape') {\n e.preventDefault();\n if (activeToken) {\n setDismissedToken(activeToken.token);\n }\n }\n },\n [shouldShowPopover, activeToken, commit, onKeyDown, listStateRef],\n );\n\n // ---- initial focus on the first option when the popover opens ---------\n const focusInitAttemptsRef = useRef(0);\n useLayoutEffect(() => {\n if (!shouldShowPopover) return;\n focusInitAttemptsRef.current = 0;\n\n const tick = () => {\n if (!shouldShowPopover) return;\n const listState = listStateRef.current;\n if (!listState) {\n focusInitAttemptsRef.current += 1;\n if (focusInitAttemptsRef.current < 8) {\n requestAnimationFrame(tick);\n }\n return;\n }\n if (listState.selectionManager.focusedKey == null) {\n const first = getEdgeVisibleKey(listState, 'first');\n if (first != null) {\n markKeyboardFocus(listState);\n listState.selectionManager.setFocusedKey(first);\n bumpFocus();\n }\n }\n };\n\n requestAnimationFrame(() => requestAnimationFrame(tick));\n }, [shouldShowPopover]);\n\n // ---- composite focus (wrapper + portaled popover) ---------------------\n const { compositeFocusProps } = useCompositeFocus({\n wrapperRef: wrapperRef as RefObject<HTMLElement>,\n popoverRef: popoverRef as RefObject<HTMLElement>,\n onFocus,\n onBlur,\n isDisabled,\n });\n\n // ---- aria-activedescendant -------------------------------------------\n const focusedKey = listStateRef.current?.selectionManager.focusedKey ?? null;\n const listBoxId = `CommandTextAreaListBox-${commandTextAreaId}`;\n\n // ---- popover width ----------------------------------------------------\n // The virtualized ListBox has no intrinsic width, so an overlay sized to\n // `max-content` collapses to a sliver. We give the popover a concrete\n // default width (independent of the textarea). Because the popover is now\n // anchored to the caret (a point) rather than the textarea edge, it should\n // not be forced to the textarea's full width — react-aria clamps it to the\n // viewport. The user's `overlayStyles` still win on top.\n const popoverOverlayStyles: Styles = {\n width: '40x',\n maxWidth: '50vw',\n ...overlayStyles,\n };\n\n // ---- assemble input props ---------------------------------------------\n const commandInputProps = mergeProps(inputProps, {\n role: 'combobox',\n 'aria-autocomplete': 'list',\n 'aria-expanded': shouldShowPopover,\n 'aria-haspopup': 'listbox',\n 'aria-controls': shouldShowPopover ? listBoxId : undefined,\n 'aria-activedescendant':\n shouldShowPopover && focusedKey != null\n ? `ListBoxItem-${focusedKey}`\n : undefined,\n onKeyDown: onKeyDownHandler,\n onSelect: syncCaret,\n onKeyUp: syncCaret,\n onClick: syncCaret,\n 'data-input-type': 'command-textarea',\n });\n\n // ---- render -----------------------------------------------------------\n const field = (\n <TextInputBase\n ref={ref as any}\n {...otherProps}\n multiLine\n qa={qa}\n inputRef={inputRef}\n wrapperRef={wrapperRef}\n wrapperProps={compositeFocusProps}\n labelProps={mergedLabelProps}\n inputProps={commandInputProps}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n isRequired={isRequired}\n rows={rows}\n />\n );\n\n return (\n <>\n {field}\n <ListBoxPopover\n isOpen={shouldShowPopover}\n triggerRef={wrapperRef as RefObject<HTMLElement>}\n positionTargetRef={caretAnchorRef as RefObject<Element | null>}\n positionApiRef={positionApiRef}\n popoverRef={popoverRef}\n listBoxRef={listBoxRef}\n direction={direction}\n shouldFlip={shouldFlip}\n overlayOffset={overlayOffset}\n containerPadding={containerPadding}\n listBoxId={listBoxId}\n overlayStyles={popoverOverlayStyles}\n listBoxStyles={listBoxStyles}\n optionStyles={optionStyles}\n optionHighlight={term}\n sectionStyles={sectionStyles}\n headingStyles={headingStyles}\n isDisabled={isDisabled}\n disabledKeys={disabledKeys}\n items={items as any}\n listStateRef={listStateRef}\n ariaLabel={\n (props as any)['aria-label'] ||\n (typeof otherProps.label === 'string' ? otherProps.label : 'Commands')\n }\n compositeFocusProps={compositeFocusProps}\n filter={filterFn}\n onClose={() => {\n if (activeToken) setDismissedToken(activeToken.token);\n }}\n onSelectionChange={(selection) => {\n const key = Array.isArray(selection) ? selection[0] : selection;\n if (key != null) commit(key);\n }}\n >\n {children as any}\n </ListBoxPopover>\n </>\n );\n}\n\nconst _CommandTextArea = forwardRef(CommandTextArea) as unknown as (<T>(\n props: CubeCommandTextAreaProps<T> & {\n ref?: ForwardedRef<HTMLElement>;\n },\n) => ReactElement) & {\n Item: typeof Item;\n Section: typeof BaseSection;\n};\n\nObject.assign(_CommandTextArea, {\n Item,\n Section: BaseSection,\n displayName: 'CommandTextArea',\n});\n\nObject.defineProperty(_CommandTextArea, 'cubeInputType', {\n value: 'CommandTextArea',\n enumerable: false,\n configurable: false,\n});\n\nexport { _CommandTextArea as CommandTextArea };\n"],"mappings":"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"}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-009d53f | Cube Dev Team */
|
|
2
|
+
//#region src/components/fields/CommandTextArea/caretPosition.ts
|
|
3
|
+
const MIRROR_STYLES = [
|
|
4
|
+
"boxSizing",
|
|
5
|
+
"width",
|
|
6
|
+
"height",
|
|
7
|
+
"overflowX",
|
|
8
|
+
"overflowY",
|
|
9
|
+
"paddingTop",
|
|
10
|
+
"paddingRight",
|
|
11
|
+
"paddingBottom",
|
|
12
|
+
"paddingLeft",
|
|
13
|
+
"borderTopWidth",
|
|
14
|
+
"borderRightWidth",
|
|
15
|
+
"borderBottomWidth",
|
|
16
|
+
"borderLeftWidth",
|
|
17
|
+
"fontStyle",
|
|
18
|
+
"fontVariant",
|
|
19
|
+
"fontWeight",
|
|
20
|
+
"fontStretch",
|
|
21
|
+
"fontSize",
|
|
22
|
+
"fontSizeAdjust",
|
|
23
|
+
"lineHeight",
|
|
24
|
+
"fontFamily",
|
|
25
|
+
"textAlign",
|
|
26
|
+
"textTransform",
|
|
27
|
+
"textIndent",
|
|
28
|
+
"textDecoration",
|
|
29
|
+
"letterSpacing",
|
|
30
|
+
"wordSpacing",
|
|
31
|
+
"tabSize",
|
|
32
|
+
"whiteSpace",
|
|
33
|
+
"wordWrap",
|
|
34
|
+
"wordBreak",
|
|
35
|
+
"overflowWrap"
|
|
36
|
+
];
|
|
37
|
+
/**
|
|
38
|
+
* Returns the viewport-space rect of the caret at `index` within `textarea`,
|
|
39
|
+
* or `null` if it can't be measured (e.g. jsdom, no layout, detached node).
|
|
40
|
+
*/
|
|
41
|
+
function getCaretRect(textarea, index) {
|
|
42
|
+
if (typeof document === "undefined") return null;
|
|
43
|
+
const doc = textarea.ownerDocument;
|
|
44
|
+
const style = doc.defaultView?.getComputedStyle(textarea);
|
|
45
|
+
if (!style) return null;
|
|
46
|
+
const box = textarea.getBoundingClientRect();
|
|
47
|
+
if (box.width === 0 && box.height === 0) return null;
|
|
48
|
+
const mirror = doc.createElement("div");
|
|
49
|
+
mirror.setAttribute("data-caret-mirror", "");
|
|
50
|
+
mirror.style.position = "absolute";
|
|
51
|
+
mirror.style.visibility = "hidden";
|
|
52
|
+
mirror.style.whiteSpace = "pre-wrap";
|
|
53
|
+
mirror.style.wordWrap = "break-word";
|
|
54
|
+
mirror.style.top = "0";
|
|
55
|
+
mirror.style.left = "0";
|
|
56
|
+
mirror.style.overflow = "hidden";
|
|
57
|
+
for (const prop of MIRROR_STYLES) {
|
|
58
|
+
const value = style[prop];
|
|
59
|
+
if (value != null) mirror.style.setProperty(prop.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase()), value);
|
|
60
|
+
}
|
|
61
|
+
mirror.style.width = style.width;
|
|
62
|
+
const value = textarea.value;
|
|
63
|
+
const before = value.slice(0, index);
|
|
64
|
+
const after = value.slice(index) || ".";
|
|
65
|
+
mirror.textContent = before;
|
|
66
|
+
const marker = doc.createElement("span");
|
|
67
|
+
marker.textContent = after;
|
|
68
|
+
marker.style.display = "inline-block";
|
|
69
|
+
mirror.appendChild(marker);
|
|
70
|
+
doc.body.appendChild(mirror);
|
|
71
|
+
let rect = null;
|
|
72
|
+
try {
|
|
73
|
+
const mirrorRect = mirror.getBoundingClientRect();
|
|
74
|
+
const markerRect = marker.getBoundingClientRect();
|
|
75
|
+
const { scrollTop, scrollLeft } = textarea;
|
|
76
|
+
rect = {
|
|
77
|
+
left: box.left - scrollLeft + (markerRect.left - mirrorRect.left),
|
|
78
|
+
top: box.top - scrollTop + (markerRect.top - mirrorRect.top),
|
|
79
|
+
height: markerRect.height || parseFloat(style.lineHeight) || 0
|
|
80
|
+
};
|
|
81
|
+
} finally {
|
|
82
|
+
mirror.remove();
|
|
83
|
+
}
|
|
84
|
+
return rect.height > 0 ? rect : null;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
//#endregion
|
|
88
|
+
export { getCaretRect };
|
|
89
|
+
//# sourceMappingURL=caretPosition.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"caretPosition.js","names":[],"sources":["../../../../src/components/fields/CommandTextArea/caretPosition.ts"],"sourcesContent":["/**\n * Computes the caret's position for a `<textarea>` using a mirror-element\n * technique. jsdom returns zeros (no layout), but in a real browser this gives\n * the caret's viewport coordinates and its line height, so a popover can be\n * anchored to it.\n */\n\nexport interface CaretRect {\n /** Caret left edge, in viewport coordinates (px). */\n left: number;\n /** Caret top edge, in viewport coordinates (px). */\n top: number;\n /** Caret height (the textarea's line height), in px. */\n height: number;\n}\n\n// Computed styles that affect text wrapping / caret placement inside a textarea.\nconst MIRROR_STYLES: ReadonlyArray<keyof CSSStyleDeclaration> = [\n 'boxSizing',\n 'width',\n 'height',\n 'overflowX',\n 'overflowY',\n 'paddingTop',\n 'paddingRight',\n 'paddingBottom',\n 'paddingLeft',\n 'borderTopWidth',\n 'borderRightWidth',\n 'borderBottomWidth',\n 'borderLeftWidth',\n 'fontStyle',\n 'fontVariant',\n 'fontWeight',\n 'fontStretch',\n 'fontSize',\n 'fontSizeAdjust',\n 'lineHeight',\n 'fontFamily',\n 'textAlign',\n 'textTransform',\n 'textIndent',\n 'textDecoration',\n 'letterSpacing',\n 'wordSpacing',\n 'tabSize',\n 'whiteSpace',\n 'wordWrap',\n 'wordBreak',\n 'overflowWrap',\n];\n\n/**\n * Returns the viewport-space rect of the caret at `index` within `textarea`,\n * or `null` if it can't be measured (e.g. jsdom, no layout, detached node).\n */\nexport function getCaretRect(\n textarea: HTMLTextAreaElement,\n index: number,\n): CaretRect | null {\n if (typeof document === 'undefined') return null;\n\n const doc = textarea.ownerDocument;\n const style = doc.defaultView?.getComputedStyle(textarea);\n if (!style) return null;\n\n // Bail out in environments without real layout (jsdom reports 0x0).\n const box = textarea.getBoundingClientRect();\n if (box.width === 0 && box.height === 0) return null;\n\n const mirror = doc.createElement('div');\n mirror.setAttribute('data-caret-mirror', '');\n mirror.style.position = 'absolute';\n mirror.style.visibility = 'hidden';\n mirror.style.whiteSpace = 'pre-wrap';\n mirror.style.wordWrap = 'break-word';\n mirror.style.top = '0';\n mirror.style.left = '0';\n // Prevent the mirror from affecting scroll/anchor lookups.\n mirror.style.overflow = 'hidden';\n\n for (const prop of MIRROR_STYLES) {\n const value = style[prop];\n if (value != null) {\n mirror.style.setProperty(\n prop.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase()),\n value,\n );\n }\n }\n\n // Match the textarea's content width, not its border-box scroll width.\n mirror.style.width = style.width;\n\n const value = textarea.value;\n const before = value.slice(0, index);\n const after = value.slice(index) || '.';\n\n mirror.textContent = before;\n\n const marker = doc.createElement('span');\n marker.textContent = after;\n marker.style.display = 'inline-block';\n mirror.appendChild(marker);\n\n // The mirror must be attached to the same document to inherit fonts.\n doc.body.appendChild(mirror);\n\n let rect: CaretRect | null = null;\n try {\n const mirrorRect = mirror.getBoundingClientRect();\n const markerRect = marker.getBoundingClientRect();\n // The mirror is not scrolled, so subtract the textarea's scroll to map the\n // unscrolled caret offset back into viewport space.\n const { scrollTop, scrollLeft } = textarea;\n rect = {\n left: box.left - scrollLeft + (markerRect.left - mirrorRect.left),\n top: box.top - scrollTop + (markerRect.top - mirrorRect.top),\n height: markerRect.height || parseFloat(style.lineHeight) || 0,\n };\n } finally {\n mirror.remove();\n }\n\n return rect.height > 0 ? rect : null;\n}\n"],"mappings":";;AAiBA,MAAM,gBAA0D;CAC9D;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;AAMD,SAAgB,aACd,UACA,OACkB;AAClB,KAAI,OAAO,aAAa,YAAa,QAAO;CAE5C,MAAM,MAAM,SAAS;CACrB,MAAM,QAAQ,IAAI,aAAa,iBAAiB,SAAS;AACzD,KAAI,CAAC,MAAO,QAAO;CAGnB,MAAM,MAAM,SAAS,uBAAuB;AAC5C,KAAI,IAAI,UAAU,KAAK,IAAI,WAAW,EAAG,QAAO;CAEhD,MAAM,SAAS,IAAI,cAAc,MAAM;AACvC,QAAO,aAAa,qBAAqB,GAAG;AAC5C,QAAO,MAAM,WAAW;AACxB,QAAO,MAAM,aAAa;AAC1B,QAAO,MAAM,aAAa;AAC1B,QAAO,MAAM,WAAW;AACxB,QAAO,MAAM,MAAM;AACnB,QAAO,MAAM,OAAO;AAEpB,QAAO,MAAM,WAAW;AAExB,MAAK,MAAM,QAAQ,eAAe;EAChC,MAAM,QAAQ,MAAM;AACpB,MAAI,SAAS,KACX,QAAO,MAAM,YACX,KAAK,QAAQ,WAAW,MAAM,MAAM,EAAE,aAAa,CAAC,EACpD,MACD;;AAKL,QAAO,MAAM,QAAQ,MAAM;CAE3B,MAAM,QAAQ,SAAS;CACvB,MAAM,SAAS,MAAM,MAAM,GAAG,MAAM;CACpC,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAEpC,QAAO,cAAc;CAErB,MAAM,SAAS,IAAI,cAAc,OAAO;AACxC,QAAO,cAAc;AACrB,QAAO,MAAM,UAAU;AACvB,QAAO,YAAY,OAAO;AAG1B,KAAI,KAAK,YAAY,OAAO;CAE5B,IAAI,OAAyB;AAC7B,KAAI;EACF,MAAM,aAAa,OAAO,uBAAuB;EACjD,MAAM,aAAa,OAAO,uBAAuB;EAGjD,MAAM,EAAE,WAAW,eAAe;AAClC,SAAO;GACL,MAAM,IAAI,OAAO,cAAc,WAAW,OAAO,WAAW;GAC5D,KAAK,IAAI,MAAM,aAAa,WAAW,MAAM,WAAW;GACxD,QAAQ,WAAW,UAAU,WAAW,MAAM,WAAW,IAAI;GAC9D;WACO;AACR,SAAO,QAAQ;;AAGjB,QAAO,KAAK,SAAS,IAAI,OAAO"}
|