@cube-dev/ui-kit 0.164.0 → 0.166.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/CHANGELOG.md +32 -0
- package/dist/_internal/hooks/use-chained-callback.js +1 -1
- package/dist/_internal/hooks/use-debounced-value.js +1 -1
- package/dist/_internal/hooks/use-deprecation-warning.js +1 -1
- package/dist/_internal/hooks/use-event.js +1 -1
- package/dist/_internal/hooks/use-is-first-render.js +1 -1
- package/dist/_internal/hooks/use-sync-ref.js +1 -1
- package/dist/_internal/hooks/use-timer/timer.js +1 -1
- package/dist/_internal/hooks/use-timer/use-timer.js +1 -1
- package/dist/_internal/hooks/use-warn.js +1 -1
- package/dist/components/Block.js +1 -1
- package/dist/components/CollectionItem.js +1 -1
- package/dist/components/GlobalStyles.js +1 -1
- package/dist/components/GridProvider.js +1 -1
- package/dist/components/HiddenInput.js +1 -1
- package/dist/components/Root.js +1 -1
- package/dist/components/actions/Action/Action.js +1 -1
- package/dist/components/actions/Banner/Banner.js +1 -1
- package/dist/components/actions/Button/Button.js +1 -1
- package/dist/components/actions/ButtonGroup/ButtonGroup.js +1 -1
- package/dist/components/actions/ButtonSplit/ButtonSplit.js +1 -1
- package/dist/components/actions/ButtonSplit/context.js +1 -1
- package/dist/components/actions/CommandMenu/CommandMenu.js +1 -1
- package/dist/components/actions/CommandMenu/styled.js +1 -1
- package/dist/components/actions/ItemAction/ItemAction.js +1 -1
- package/dist/components/actions/ItemActionContext.js +1 -1
- package/dist/components/actions/ItemButton/ItemButton.js +1 -1
- package/dist/components/actions/Link/Link.js +1 -1
- package/dist/components/actions/Menu/Menu.js +1 -1
- package/dist/components/actions/Menu/MenuItem.js +1 -1
- package/dist/components/actions/Menu/MenuSection.js +1 -1
- package/dist/components/actions/Menu/MenuTrigger.js +1 -1
- package/dist/components/actions/Menu/SubMenuTrigger.js +1 -1
- package/dist/components/actions/Menu/SubmenuTriggerContext.js +1 -1
- package/dist/components/actions/Menu/context.js +1 -1
- package/dist/components/actions/Menu/styled.js +1 -1
- package/dist/components/actions/index.js +1 -1
- package/dist/components/actions/use-action.js +1 -1
- package/dist/components/actions/use-anchored-menu.js +1 -1
- package/dist/components/actions/use-context-menu.js +1 -1
- package/dist/components/content/ActiveZone/ActiveZone.js +1 -1
- package/dist/components/content/Alert/Alert.js +1 -1
- package/dist/components/content/Alert/use-alert.js +1 -1
- package/dist/components/content/Avatar/Avatar.js +1 -1
- package/dist/components/content/Badge/Badge.js +1 -1
- package/dist/components/content/Card/Card.js +1 -1
- package/dist/components/content/Content.js +1 -1
- package/dist/components/content/CopyPasteBlock/CopyPasteBlock.js +1 -1
- package/dist/components/content/CopySnippet/CopySnippet.js +1 -1
- package/dist/components/content/Disclosure/Disclosure.js +1 -1
- package/dist/components/content/Divider.js +1 -1
- package/dist/components/content/Footer.js +1 -1
- package/dist/components/content/Header.js +1 -1
- package/dist/components/content/HotKeys/HotKeys.js +1 -1
- package/dist/components/content/InfoBadge/InfoBadge.js +1 -1
- package/dist/components/content/InlineInput/InlineInput.js +1 -1
- package/dist/components/content/Item/Item.js +1 -1
- package/dist/components/content/ItemBadge/ItemBadge.js +1 -1
- package/dist/components/content/ItemCard/ItemCard.js +1 -1
- package/dist/components/content/Layout/GridLayout.js +1 -1
- package/dist/components/content/Layout/Layout.js +1 -1
- package/dist/components/content/Layout/LayoutBlock.js +1 -1
- package/dist/components/content/Layout/LayoutCenter.js +1 -1
- package/dist/components/content/Layout/LayoutContainer.js +1 -1
- package/dist/components/content/Layout/LayoutContent.js +1 -1
- package/dist/components/content/Layout/LayoutContext.js +1 -1
- package/dist/components/content/Layout/LayoutFlex.js +1 -1
- package/dist/components/content/Layout/LayoutFooter.js +1 -1
- package/dist/components/content/Layout/LayoutGrid.js +1 -1
- package/dist/components/content/Layout/LayoutHeader.js +1 -1
- package/dist/components/content/Layout/LayoutPane.js +1 -1
- package/dist/components/content/Layout/LayoutPanel.js +1 -1
- package/dist/components/content/Layout/LayoutPanelHeader.js +1 -1
- package/dist/components/content/Layout/LayoutToolbar.js +1 -1
- package/dist/components/content/Layout/hooks/useTinyScrollbar.js +1 -1
- package/dist/components/content/Layout/index.js +1 -1
- package/dist/components/content/Layout/utils.js +1 -1
- package/dist/components/content/Paragraph.js +1 -1
- package/dist/components/content/Placeholder/Placeholder.js +1 -1
- package/dist/components/content/PrismCode/PrismCode.js +1 -1
- package/dist/components/content/PrismCode/prismSetup.js +1 -1
- package/dist/components/content/PrismDiffCode/PrismDiffCode.js +1 -1
- package/dist/components/content/Result/Result.js +1 -1
- package/dist/components/content/Skeleton/Skeleton.js +1 -1
- package/dist/components/content/Tag/Tag.js +1 -1
- package/dist/components/content/Text.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/data/DataTable/DataTable.js +140 -21
- package/dist/components/data/DataTable/DataTable.js.map +1 -1
- package/dist/components/data/DataTable/index.d.ts +1 -1
- package/dist/components/data/DataTable/types.d.ts +19 -4
- package/dist/components/data/ItemTable/ItemTable.js +169 -25
- package/dist/components/data/ItemTable/ItemTable.js.map +1 -1
- package/dist/components/data/ItemTable/ItemTableBulkBar.js +1 -1
- package/dist/components/data/ItemTable/ItemTableDragPreview.js +1 -1
- package/dist/components/data/ItemTable/ItemTableFooter.js +1 -1
- package/dist/components/data/ItemTable/ItemTableToolbar.js +1 -1
- package/dist/components/data/ItemTable/types.d.ts +7 -2
- package/dist/components/data/TableBase/ColumnResizer.js +1 -1
- package/dist/components/data/TableBase/RowCollection.js +1 -1
- package/dist/components/data/TableBase/TableHeaderCell.js +1 -1
- package/dist/components/data/TableBase/TableRow.js +30 -5
- package/dist/components/data/TableBase/TableRow.js.map +1 -1
- package/dist/components/data/TableBase/TableView.d.ts +2 -1
- package/dist/components/data/TableBase/TableView.js +299 -75
- package/dist/components/data/TableBase/TableView.js.map +1 -1
- package/dist/components/data/TableBase/column-menu.js +1 -1
- package/dist/components/data/TableBase/column-tint.js +1 -1
- package/dist/components/data/TableBase/index.d.ts +1 -1
- package/dist/components/data/TableBase/row-menu.js +1 -1
- package/dist/components/data/TableBase/styled.js +75 -2
- package/dist/components/data/TableBase/styled.js.map +1 -1
- package/dist/components/data/TableBase/table-tree.js +129 -0
- package/dist/components/data/TableBase/table-tree.js.map +1 -0
- package/dist/components/data/TableBase/types.d.ts +46 -1
- package/dist/components/data/TableBase/types.js +1 -1
- package/dist/components/data/TableBase/types.js.map +1 -1
- package/dist/components/data/TableBase/use-cell-selection.js +0 -0
- package/dist/components/data/TableBase/use-column-order.js +1 -1
- package/dist/components/data/TableBase/use-container-width.js +1 -1
- package/dist/components/data/TableBase/use-row-move-animation.js +1 -1
- package/dist/components/data/TableBase/use-scrollability.js +1 -1
- package/dist/components/data/TableBase/use-table-columns.js +1 -1
- package/dist/components/data/TableBase/use-table-search.js +4 -4
- package/dist/components/data/TableBase/use-table-search.js.map +1 -1
- package/dist/components/data/TableBase/use-table-selection.js +124 -24
- package/dist/components/data/TableBase/use-table-selection.js.map +1 -1
- package/dist/components/data/TableBase/use-table-sort.js +1 -1
- package/dist/components/data/TableBase/use-table-sorts.js +1 -1
- package/dist/components/data/TableBase/use-table-storage.js +1 -1
- package/dist/components/data/TableBase/use-table-tree-state.js +107 -0
- package/dist/components/data/TableBase/use-table-tree-state.js.map +1 -0
- package/dist/components/data/index.d.ts +2 -2
- package/dist/components/fields/Checkbox/Checkbox.js +1 -1
- package/dist/components/fields/Checkbox/CheckboxGroup.js +1 -1
- package/dist/components/fields/Checkbox/context.js +1 -1
- package/dist/components/fields/ColorInput/ColorInput.js +1 -1
- package/dist/components/fields/ColorPicker/ColorPicker.js +1 -1
- package/dist/components/fields/ColorSwatch/ColorSwatch.js +1 -1
- package/dist/components/fields/ColorSwatchGroup/ColorSwatchGroup.js +1 -1
- package/dist/components/fields/ComboBox/ComboBox.js +1 -1
- package/dist/components/fields/CommandTextArea/CommandTextArea.js +8 -25
- package/dist/components/fields/CommandTextArea/CommandTextArea.js.map +1 -1
- package/dist/components/fields/CommandTextArea/caretPosition.js +1 -1
- package/dist/components/fields/CommandTextArea/useCaretAnchor.js +1 -1
- package/dist/components/fields/DatePicker/DateInput.js +1 -1
- package/dist/components/fields/DatePicker/DateInputBase.js +1 -1
- package/dist/components/fields/DatePicker/DatePicker.js +1 -1
- package/dist/components/fields/DatePicker/DatePickerButton.js +1 -1
- package/dist/components/fields/DatePicker/DatePickerElement.js +1 -1
- package/dist/components/fields/DatePicker/DatePickerInput.js +1 -1
- package/dist/components/fields/DatePicker/DatePickerSegment.js +1 -1
- package/dist/components/fields/DatePicker/DateRangePicker.js +1 -1
- package/dist/components/fields/DatePicker/DateRangeSeparatedPicker.js +1 -1
- package/dist/components/fields/DatePicker/MonthPicker.js +1 -1
- package/dist/components/fields/DatePicker/PeriodPicker.js +1 -1
- package/dist/components/fields/DatePicker/QuarterPicker.js +1 -1
- package/dist/components/fields/DatePicker/TimeInput.js +1 -1
- package/dist/components/fields/DatePicker/WeekPicker.js +1 -1
- package/dist/components/fields/DatePicker/YearPicker.js +1 -1
- package/dist/components/fields/DatePicker/parseDate.js +1 -1
- package/dist/components/fields/DatePicker/period.js +1 -1
- package/dist/components/fields/DatePicker/props.js +1 -1
- package/dist/components/fields/DatePicker/utils.js +1 -1
- package/dist/components/fields/FileInput/FileInput.js +1 -1
- package/dist/components/fields/FilterListBox/FilterListBox.js +1 -1
- package/dist/components/fields/FilterPicker/FilterPicker.js +1 -1
- package/dist/components/fields/Input/Input.js +1 -1
- package/dist/components/fields/ListBox/DraggableListBox.js +1 -1
- package/dist/components/fields/ListBox/ListBox.js +1 -1
- package/dist/components/fields/ListBoxPopover/ListBoxPopover.js +1 -1
- package/dist/components/fields/ListBoxPopover/listNavigation.js +1 -1
- package/dist/components/fields/ListBoxPopover/useCompositeFocus.js +1 -1
- package/dist/components/fields/NumberInput/NumberInput.js +1 -1
- package/dist/components/fields/NumberInput/StepButton.js +1 -1
- package/dist/components/fields/PasswordInput/PasswordInput.js +1 -1
- package/dist/components/fields/Picker/Picker.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/SearchComboBox/SearchComboBox.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 +10 -29
- package/dist/components/fields/TextArea/TextArea.js.map +1 -1
- package/dist/components/fields/TextInput/TextInput.js +1 -1
- package/dist/components/fields/TextInput/TextInputBase.js +1 -1
- package/dist/components/fields/TextInput/useAutoSizeTextArea.js +146 -0
- package/dist/components/fields/TextInput/useAutoSizeTextArea.js.map +1 -0
- package/dist/components/fields/TextInputMapper/TextInputMapper.js +1 -1
- package/dist/components/fields/color/ColorPanel.js +1 -1
- package/dist/components/fields/color/channels.js +1 -1
- package/dist/components/fields/color/color.js +1 -1
- package/dist/components/fields/color/context.js +1 -1
- package/dist/components/form/FieldWrapper/FieldWrapper.js +1 -1
- package/dist/components/form/Form/Field.js +1 -1
- package/dist/components/form/Form/Form.js +1 -1
- package/dist/components/form/Form/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/validation/ValidationIndicator.js +1 -1
- package/dist/components/form/validation/resolve-validation-props.js +1 -1
- package/dist/components/form/validation/use-validation-props.js +1 -1
- package/dist/components/form/wrapper.js +1 -1
- package/dist/components/helpers/DisplayTransition/DisplayTransition.js +1 -1
- package/dist/components/helpers/IconSwitch/IconSwitch.js +1 -1
- package/dist/components/layout/Board/Board.d.ts +30 -7
- package/dist/components/layout/Board/Board.js +16 -6
- package/dist/components/layout/Board/Board.js.map +1 -1
- package/dist/components/layout/Board/BoardProvider.js +1 -1
- package/dist/components/layout/Board/BoardResponsive.js +1 -1
- package/dist/components/layout/Board/Widget.d.ts +9 -0
- package/dist/components/layout/Board/Widget.js +3 -2
- package/dist/components/layout/Board/Widget.js.map +1 -1
- package/dist/components/layout/Board/WidgetHost.js +4 -3
- package/dist/components/layout/Board/WidgetHost.js.map +1 -1
- package/dist/components/layout/Board/board-context.js +1 -1
- package/dist/components/layout/Board/board-store.js +2 -2
- package/dist/components/layout/Board/board-store.js.map +1 -1
- package/dist/components/layout/Board/grid-core/calculate.js +1 -1
- package/dist/components/layout/Board/grid-core/collision-modes.js +7 -4
- package/dist/components/layout/Board/grid-core/collision-modes.js.map +1 -1
- package/dist/components/layout/Board/grid-core/collision.js +1 -1
- package/dist/components/layout/Board/grid-core/compactors.js +1 -1
- package/dist/components/layout/Board/grid-core/constraints.js +1 -1
- package/dist/components/layout/Board/grid-core/group-move.js +1 -1
- package/dist/components/layout/Board/grid-core/layout.js +1 -1
- package/dist/components/layout/Board/grid-core/placement.d.ts +58 -0
- package/dist/components/layout/Board/grid-core/placement.js +153 -0
- package/dist/components/layout/Board/grid-core/placement.js.map +1 -0
- package/dist/components/layout/Board/grid-core/sort.js +1 -1
- package/dist/components/layout/Board/grid-core/types.d.ts +6 -4
- package/dist/components/layout/Board/index.d.ts +1 -0
- package/dist/components/layout/Board/index.js +2 -1
- package/dist/components/layout/Board/index.js.map +1 -1
- package/dist/components/layout/Board/responsive-utils.js +1 -1
- package/dist/components/layout/Board/use-board-layout.js +1 -1
- package/dist/components/layout/Board/use-board-registry.js +91 -100
- package/dist/components/layout/Board/use-board-registry.js.map +1 -1
- package/dist/components/layout/Board/use-board-select-modifier-key.js +1 -1
- package/dist/components/layout/Board/use-board-selection.js +1 -1
- package/dist/components/layout/Flex.js +1 -1
- package/dist/components/layout/Flow.js +1 -1
- package/dist/components/layout/Grid.js +1 -1
- package/dist/components/layout/Panel.js +1 -1
- package/dist/components/layout/Prefix.js +1 -1
- package/dist/components/layout/ResizablePanel.js +1 -1
- package/dist/components/layout/Space.js +1 -1
- package/dist/components/layout/Suffix.js +1 -1
- package/dist/components/navigation/Pagination/Pagination.js +1 -1
- package/dist/components/navigation/Pagination/use-pagination.js +1 -1
- package/dist/components/navigation/Tabs/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/StatsCard/StatsCard.js +1 -1
- package/dist/components/other/Calendar/Calendar.js +1 -1
- package/dist/components/other/Calendar/CalendarCell.js +1 -1
- package/dist/components/other/Calendar/CalendarGrid.js +1 -1
- package/dist/components/other/Calendar/CalendarHeader.js +1 -1
- package/dist/components/other/Calendar/CalendarPanel.js +1 -1
- package/dist/components/other/Calendar/PeriodCalendar.js +1 -1
- package/dist/components/other/Calendar/PeriodGrid.js +1 -1
- package/dist/components/other/Calendar/RangeCalendar.js +1 -1
- package/dist/components/other/Calendar/styled.js +1 -1
- package/dist/components/other/CubeLogo/CubeLogo.js +1 -1
- package/dist/components/other/NoDataIcon/NoDataIcon.js +1 -1
- package/dist/components/overlays/AlertDialog/AlertDialog.js +1 -1
- package/dist/components/overlays/AlertDialog/AlertDialogApiProvider.js +1 -1
- package/dist/components/overlays/AlertDialog/AlertDialogZone.js +1 -1
- package/dist/components/overlays/Dialog/Dialog.js +1 -1
- package/dist/components/overlays/Dialog/DialogContainer.js +1 -1
- package/dist/components/overlays/Dialog/DialogForm.js +1 -1
- package/dist/components/overlays/Dialog/DialogTrigger.js +1 -1
- package/dist/components/overlays/Dialog/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 +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 +2 -1
- package/dist/components/overlays/Tooltip/Tooltip.js.map +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/eslint-plugin/defaults.generated.js +17 -1
- package/dist/eslint-plugin/defaults.generated.js.map +1 -1
- package/dist/eslint-plugin/index.js +1 -1
- package/dist/eslint-plugin/rules/no-redundant-default-prop.js +1 -1
- package/dist/i18n/I18nProvider.js +1 -1
- package/dist/i18n/createFormatter.js +1 -1
- package/dist/i18n/index.js +1 -1
- package/dist/i18n/instance.js +1 -1
- package/dist/i18n/locales/de-DE/uikit.js +2 -1
- package/dist/i18n/locales/en-US/uikit.js +2 -1
- package/dist/i18n/locales/en-US/uikit.json.d.ts +1 -0
- package/dist/i18n/locales/es-ES/uikit.js +2 -1
- package/dist/i18n/locales/es-MX/uikit.js +2 -1
- package/dist/i18n/locales/fr-FR/uikit.js +2 -1
- package/dist/i18n/locales/it-IT/uikit.js +2 -1
- package/dist/i18n/locales/ja-JP/uikit.js +2 -1
- package/dist/i18n/locales/nb-NO/uikit.js +2 -1
- package/dist/i18n/locales/pt-BR/uikit.js +2 -1
- package/dist/i18n/locales/pt-PT/uikit.js +2 -1
- package/dist/i18n/locales/sv-SE/uikit.js +2 -1
- package/dist/i18n/locales/vi-VN/uikit.js +2 -1
- package/dist/i18n/locales.js +1 -1
- package/dist/i18n/useFormatter.js +1 -1
- package/dist/i18n/useI18n.js +1 -1
- package/dist/icons/AdjustmentsHorizontalIcon.js +1 -1
- package/dist/icons/AdjustmentsIcon.js +1 -1
- package/dist/icons/AiIcon.js +1 -1
- package/dist/icons/AreaChartIcon.js +1 -1
- package/dist/icons/ArrowNarrowDownIcon.js +1 -1
- package/dist/icons/ArrowNarrowUpIcon.js +1 -1
- package/dist/icons/BackwardIcon.js +1 -1
- package/dist/icons/BarChartIcon.js +1 -1
- package/dist/icons/BellFilledIcon.js +1 -1
- package/dist/icons/BellIcon.js +1 -1
- package/dist/icons/BooleanIcon.js +1 -1
- package/dist/icons/CalendarEditIcon.js +1 -1
- package/dist/icons/CalendarIcon.js +1 -1
- package/dist/icons/CaretDownIcon.js +1 -1
- package/dist/icons/CaretUpIcon.js +1 -1
- package/dist/icons/ChartAreaStackedIcon.js +1 -1
- package/dist/icons/ChartAreaStackedPercentageIcon.js +1 -1
- package/dist/icons/ChartBarGroupedHorizontalIcon.js +1 -1
- package/dist/icons/ChartBarGroupedIcon.js +1 -1
- package/dist/icons/ChartBarHorizontalIcon.js +1 -1
- package/dist/icons/ChartBarLineIcon.js +1 -1
- package/dist/icons/ChartBarStackedHorizontalIcon.js +1 -1
- package/dist/icons/ChartBarStackedIcon.js +1 -1
- package/dist/icons/ChartBarStackedPercentageHorizontalIcon.js +1 -1
- package/dist/icons/ChartBarStackedPercentageIcon.js +1 -1
- package/dist/icons/ChartBoxPlot2Icon.js +1 -1
- package/dist/icons/ChartBoxPlotIcon.js +1 -1
- package/dist/icons/ChartBubbleIcon.js +1 -1
- package/dist/icons/ChartDonut2Icon.js +1 -1
- package/dist/icons/ChartFunnelIcon.js +1 -1
- package/dist/icons/ChartHeatmapIcon.js +1 -1
- package/dist/icons/ChartKPIIcon.js +1 -1
- package/dist/icons/ChartPie2Icon.js +1 -1
- package/dist/icons/ChartScatterIcon.js +1 -1
- package/dist/icons/CheckCircleFilledIcon.js +1 -1
- package/dist/icons/CheckCircleIcon.js +1 -1
- package/dist/icons/CheckIcon.js +1 -1
- package/dist/icons/CircleFilledIcon.js +1 -1
- package/dist/icons/ClearIcon.js +1 -1
- package/dist/icons/CloseCircleFilledIcon.js +1 -1
- package/dist/icons/CloseCircleIcon.js +1 -1
- package/dist/icons/CloseIcon.js +1 -1
- package/dist/icons/CodeIcon.js +1 -1
- package/dist/icons/ColumnTotalIcon.js +1 -1
- package/dist/icons/CopyIcon.js +1 -1
- package/dist/icons/CountIcon.js +1 -1
- package/dist/icons/CubeIcon.js +1 -1
- package/dist/icons/CubePauseIcon.js +1 -1
- package/dist/icons/CubePlayIcon.js +1 -1
- package/dist/icons/CurrencyDollarIcon.js +1 -1
- package/dist/icons/DangerIcon.js +1 -1
- package/dist/icons/DashboardIcon.js +1 -1
- package/dist/icons/DatabaseIcon.js +1 -1
- package/dist/icons/DecimalDecreaseIcon.js +1 -1
- package/dist/icons/DecimalIncreaseIcon.js +1 -1
- package/dist/icons/DirectionIcon.js +1 -1
- package/dist/icons/DonutIcon.js +1 -1
- package/dist/icons/DownIcon.js +1 -1
- package/dist/icons/EditIcon.js +1 -1
- package/dist/icons/ExclamationCircleFilledIcon.js +1 -1
- package/dist/icons/ExclamationCircleIcon.js +1 -1
- package/dist/icons/ExclamationIcon.js +1 -1
- package/dist/icons/EyeIcon.js +1 -1
- package/dist/icons/EyeInvisibleIcon.js +1 -1
- package/dist/icons/FilterIcon.js +1 -1
- package/dist/icons/FolderFilledIcon.js +1 -1
- package/dist/icons/FolderIcon.js +1 -1
- package/dist/icons/FolderOpenFilledIcon.js +1 -1
- package/dist/icons/FolderOpenIcon.js +1 -1
- package/dist/icons/ForwardIcon.js +1 -1
- package/dist/icons/GripVerticalIcon.js +1 -1
- package/dist/icons/HierarchyIcon.js +1 -1
- package/dist/icons/HierarchyOpenIcon.js +1 -1
- package/dist/icons/Icon.js +1 -1
- package/dist/icons/InfoCircleIcon.js +1 -1
- package/dist/icons/InfoIcon.js +1 -1
- package/dist/icons/KeyIcon.js +1 -1
- package/dist/icons/LeftIcon.js +1 -1
- package/dist/icons/LineChartIcon.js +1 -1
- package/dist/icons/LoadingIcon.js +1 -1
- package/dist/icons/LockFilledIcon.js +1 -1
- package/dist/icons/LockIcon.js +1 -1
- package/dist/icons/MoreIcon.js +1 -1
- package/dist/icons/NotAllowedIcon.js +1 -1
- package/dist/icons/Number123Icon.js +1 -1
- package/dist/icons/NumberIcon.js +1 -1
- package/dist/icons/PauseCircleFilledIcon.js +1 -1
- package/dist/icons/PauseCircleIcon.js +1 -1
- package/dist/icons/PauseIcon.js +1 -1
- package/dist/icons/PercentageIcon.js +1 -1
- package/dist/icons/PieChartIcon.js +1 -1
- package/dist/icons/PipetteIcon.js +1 -1
- package/dist/icons/PlayCircleIcon.js +1 -1
- package/dist/icons/PlayIcon.js +1 -1
- package/dist/icons/PlusIcon.js +1 -1
- package/dist/icons/ProgressBarIcon.js +1 -1
- package/dist/icons/ReloadIcon.js +1 -1
- package/dist/icons/ReportIcon.js +1 -1
- package/dist/icons/ReturnIcon.js +1 -1
- package/dist/icons/RightIcon.js +1 -1
- package/dist/icons/RowTotalsIcon.js +1 -1
- package/dist/icons/SchemeIcon.js +1 -1
- package/dist/icons/SearchIcon.js +1 -1
- package/dist/icons/SemanticQueryIcon.js +1 -1
- package/dist/icons/SettingsIcon.js +1 -1
- package/dist/icons/ShieldFilledIcon.js +1 -1
- package/dist/icons/ShieldIcon.js +1 -1
- package/dist/icons/SlashIcon.js +1 -1
- package/dist/icons/SparklesIcon.js +1 -1
- package/dist/icons/SqlIcon.js +1 -1
- package/dist/icons/StatsIcon.js +1 -1
- package/dist/icons/StopIcon.js +1 -1
- package/dist/icons/StringIcon.js +1 -1
- package/dist/icons/SubtotalsIcon.js +1 -1
- package/dist/icons/SwitchIcon.js +1 -1
- package/dist/icons/TableIcon.js +1 -1
- package/dist/icons/ThumbsDownIcon.js +1 -1
- package/dist/icons/ThumbsUpIcon.js +1 -1
- package/dist/icons/ThunderboltCrossedIcon.js +1 -1
- package/dist/icons/ThunderboltFilledIcon.js +1 -1
- package/dist/icons/ThunderboltIcon.js +1 -1
- package/dist/icons/TimeIcon.js +1 -1
- package/dist/icons/TrashIcon.js +1 -1
- package/dist/icons/UnlockIcon.js +1 -1
- package/dist/icons/UpIcon.js +1 -1
- package/dist/icons/UserGroupIcon.js +1 -1
- package/dist/icons/UserIcon.js +1 -1
- package/dist/icons/UserLockIcon.js +1 -1
- package/dist/icons/ViewIcon.js +1 -1
- package/dist/icons/WarningFilledIcon.js +1 -1
- package/dist/icons/WarningIcon.js +1 -1
- package/dist/icons/wrap-icon.js +1 -1
- package/dist/index.d.ts +4 -3
- package/dist/index.js +3 -2
- package/dist/index.js.map +1 -1
- package/dist/probe/canonicalize.js +1 -1
- package/dist/probe/css.js +1 -1
- package/dist/probe/index.js +1 -1
- package/dist/provider.js +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/color-seed.js +1 -1
- package/dist/tokens/color-theme.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/lazy-styles.js +1 -1
- package/dist/tokens/palette-config.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/disabledProps.js +1 -1
- package/dist/utils/react/forwardRefWithGenerics.js +1 -1
- package/dist/utils/react/index.js +1 -1
- package/dist/utils/react/interactions.js +1 -1
- package/dist/utils/react/isTextOnly.js +1 -1
- package/dist/utils/react/mapProps.js +1 -1
- package/dist/utils/react/mergeProps.js +1 -1
- package/dist/utils/react/nullableValue.js +1 -1
- package/dist/utils/react/resolveIcon.js +1 -1
- package/dist/utils/react/sharedStore.js +1 -1
- package/dist/utils/react/useBufferedValue.js +1 -1
- package/dist/utils/react/useCombinedRefs.js +1 -1
- package/dist/utils/react/useControlledFocusVisible.js +1 -1
- package/dist/utils/react/useEventBus.js +1 -1
- package/dist/utils/react/useId.js +1 -1
- package/dist/utils/react/useIsDarwin.js +1 -1
- package/dist/utils/react/useKeySymbols.js +1 -1
- package/dist/utils/react/useLayoutEffect.js +1 -1
- package/dist/utils/react/useLocalStorage.js +1 -1
- package/dist/utils/react/useMergeStyles.js +1 -1
- package/dist/utils/react/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 +3 -3
- package/docs/Introduction.md +85 -97
- package/docs/Usage.md +26 -0
- package/docs/components/data/DataTable.md +110 -11
- package/docs/components/data/ItemTable.md +63 -1
- package/docs/components/layout/Board.md +37 -6
- package/docs/components/overlays/Tooltip.md +12 -0
- package/docs/tasty/configuration.md +10 -6
- package/docs/tasty/dsl.md +99 -2
- package/docs/tasty/styles.md +3 -1
- package/package.json +2 -2
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
|
|
2
2
|
import { extractStyles } from "../../utils/styles.js";
|
|
3
3
|
import { useSlotProps } from "../../utils/react/Slots.js";
|
|
4
4
|
import { BASE_STYLES, COLOR_STYLES, TEXT_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
|
|
2
2
|
import { extractStyles } from "../../../utils/styles.js";
|
|
3
3
|
import { TEXT_PROP_MAP, _Text } from "../Text.js";
|
|
4
4
|
import { highlightText } from "../highlightText.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
|
|
2
2
|
import { extractStyles } from "../../utils/styles.js";
|
|
3
3
|
import { useSlotProps } from "../../utils/react/Slots.js";
|
|
4
4
|
import { TEXT_PROP_MAP } from "./Text.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
|
|
2
2
|
import { extractStyles } from "../../../utils/styles.js";
|
|
3
3
|
import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
|
|
4
4
|
import { useEvent } from "../../../_internal/hooks/use-event.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
|
|
2
2
|
import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
|
|
3
3
|
import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
|
|
4
4
|
import { useEvent } from "../../../_internal/hooks/use-event.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
|
|
2
2
|
import { _Item } from "../Item/Item.js";
|
|
3
3
|
import { Action } from "../../actions/Action/Action.js";
|
|
4
4
|
import { tasty } from "@tenphi/tasty";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
|
|
2
2
|
import { TooltipProvider } from "../overlays/Tooltip/TooltipProvider.js";
|
|
3
3
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -1,32 +1,60 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
|
|
2
2
|
import { extractStyles } from "../../../utils/styles.js";
|
|
3
3
|
import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
|
|
4
4
|
import { useEvent } from "../../../_internal/hooks/use-event.js";
|
|
5
|
+
import { useWarn } from "../../../_internal/hooks/use-warn.js";
|
|
5
6
|
import { useI18n } from "../../../i18n/useI18n.js";
|
|
6
7
|
import { DraggableCollection } from "../../shared/DraggableCollection.js";
|
|
7
8
|
import { clampPage, getPageInfo } from "../../navigation/Pagination/use-pagination.js";
|
|
8
9
|
import { ItemTableFooter } from "../ItemTable/ItemTableFooter.js";
|
|
9
10
|
import { RowCollection } from "../TableBase/RowCollection.js";
|
|
11
|
+
import { buildTableTree, flattenTableTree, reindexTableTree, sortTableTree } from "../TableBase/table-tree.js";
|
|
10
12
|
import { selectionRowKey } from "../TableBase/types.js";
|
|
11
13
|
import { useCellSelection } from "../TableBase/use-cell-selection.js";
|
|
12
14
|
import { getDraggableColumnKeys, isColumnDraggable, useColumnOrder } from "../TableBase/use-column-order.js";
|
|
13
|
-
import { freezeColumnWidths, useTableColumns } from "../TableBase/use-table-columns.js";
|
|
15
|
+
import { freezeColumnWidths, getColumnText, useTableColumns } from "../TableBase/use-table-columns.js";
|
|
14
16
|
import { ROW_NUMBER_COLUMN_KEY } from "../TableBase/use-table-selection.js";
|
|
15
17
|
import { TableView } from "../TableBase/TableView.js";
|
|
16
18
|
import { useContainerWidth } from "../TableBase/use-container-width.js";
|
|
19
|
+
import { compareByColumn } from "../TableBase/use-table-sort.js";
|
|
17
20
|
import { useTableSorts } from "../TableBase/use-table-sorts.js";
|
|
18
21
|
import { useTableStorage } from "../TableBase/use-table-storage.js";
|
|
22
|
+
import { useTableTreeState } from "../TableBase/use-table-tree-state.js";
|
|
19
23
|
import { CONTAINER_STYLES } from "@tenphi/tasty";
|
|
20
24
|
import { forwardRef, useMemo, useRef, useState } from "react";
|
|
21
25
|
import { jsx } from "react/jsx-runtime";
|
|
22
26
|
import { useMultipleSelectionState } from "react-stately";
|
|
23
27
|
import { useControlledState } from "@react-stately/utils";
|
|
28
|
+
import { useCollator } from "@react-aria/i18n";
|
|
24
29
|
import { SelectionManager } from "@react-stately/selection";
|
|
25
30
|
|
|
26
31
|
//#region src/components/data/DataTable/DataTable.tsx
|
|
27
32
|
/** Wide enough for five digits at the dense default. */
|
|
28
33
|
const ROW_NUMBER_WIDTH = 56;
|
|
29
34
|
const EMPTY_WIDTHS = {};
|
|
35
|
+
function isColumnGroup(column) {
|
|
36
|
+
return "children" in column;
|
|
37
|
+
}
|
|
38
|
+
/** Flattens the public column tree while retaining each leaf's header path. */
|
|
39
|
+
function buildColumnModel(definitions) {
|
|
40
|
+
const columns = [];
|
|
41
|
+
const headerPaths = /* @__PURE__ */ new Map();
|
|
42
|
+
function visit(entries, path) {
|
|
43
|
+
for (const entry of entries) if (isColumnGroup(entry)) visit(entry.children, [...path, {
|
|
44
|
+
key: entry.key,
|
|
45
|
+
title: entry.title
|
|
46
|
+
}]);
|
|
47
|
+
else {
|
|
48
|
+
columns.push(entry);
|
|
49
|
+
if (path.length) headerPaths.set(entry.key, path);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
visit(definitions, []);
|
|
53
|
+
return {
|
|
54
|
+
columns,
|
|
55
|
+
headerPaths
|
|
56
|
+
};
|
|
57
|
+
}
|
|
30
58
|
function defaultGetRowKey(rowKey) {
|
|
31
59
|
return (row, index) => {
|
|
32
60
|
const value = row?.[rowKey];
|
|
@@ -42,18 +70,34 @@ function defaultGetRowKey(rowKey) {
|
|
|
42
70
|
* rows pinned for totals.
|
|
43
71
|
*
|
|
44
72
|
* It knows nothing about Cube. Measures, dimensions, pivots and drill-downs
|
|
45
|
-
* reach it as
|
|
46
|
-
* content, which is what keeps the ~34 kB of Cloud's
|
|
47
|
-
* Cloud.
|
|
73
|
+
* reach it as leaf columns, presentational column groups, `render` output and
|
|
74
|
+
* `column.header.menu` content, which is what keeps the ~34 kB of Cloud's
|
|
75
|
+
* column-header menu in Cloud.
|
|
48
76
|
*/
|
|
49
77
|
function DataTable(props, ref) {
|
|
50
|
-
const { data, columns, rowKey = "id", getRowKey, pinnedTopRows, pinnedBottomRows, isLoading = false, loadingIndicator = "overlay", skeletonRowCount, error, emptyLabel, noResultsLabel, isFiltered, shape = "plain", size = "small", rowSize, rowHeight, headerHeight, isStriped = true, isHeaderHidden, isHeaderSticky, showRowNumbers = false, sortMode, sorts: sortsProp, defaultSorts, onSortsChange, paginationMode = "client", page: pageProp, defaultPage, onPageChange, pageSize: pageSizeProp, defaultPageSize = 100, onPageSizeChange, pageSizeOptions, total: totalProp, totalPages, hasNextPage, summary = true, autoHidePagination = true, footerStart, footerCenter, footerEnd, cellSelectionMode = "range", isCellSelectable, selectedCellRange, defaultSelectedCellRange, onCellRangeChange, isRowMoveAnimated, isResizable = true, columnWidths: columnWidthsProp, defaultColumnWidths, onColumnResize, isColumnReorderable = false, columnOrder, defaultColumnOrder, onColumnOrderChange, columnContextMenu, onColumnMenuAction, columnMenuTriggerProps, columnMenuProps, isVirtualized, virtualizeThreshold, overscan, getRowProps, storageKey, styles, headerStyles, headerCellStyles, bodyStyles, rowStyles, cellStyles, footerStyles, ariaLabel, qa, mods, ...rest } = props;
|
|
78
|
+
const { data, columns, rowKey = "id", getRowKey, getRowChildren, treeColumnKey, expandedKeys, defaultExpandedKeys, onExpand, pinnedTopRows, pinnedBottomRows, isLoading = false, loadingIndicator = "overlay", skeletonRowCount, error, emptyLabel, noResultsLabel, isFiltered, shape = "plain", size = "small", rowSize, rowHeight, headerHeight, isStriped = true, isHeaderHidden, isHeaderSticky, isAutoHeight = false, showRowNumbers = false, sortMode, sorts: sortsProp, defaultSorts, onSortsChange, paginationMode = "client", page: pageProp, defaultPage, onPageChange, pageSize: pageSizeProp, defaultPageSize = 100, onPageSizeChange, pageSizeOptions, total: totalProp, totalPages, hasNextPage, summary = true, autoHidePagination = true, footerStart, footerCenter, footerEnd, cellSelectionMode = "range", isCellSelectable, selectedCellRange, defaultSelectedCellRange, onCellRangeChange, isRowMoveAnimated, isResizable = true, columnWidths: columnWidthsProp, defaultColumnWidths, onColumnResize, isColumnReorderable = false, columnOrder, defaultColumnOrder, onColumnOrderChange, columnContextMenu, onColumnMenuAction, columnMenuTriggerProps, columnMenuProps, isVirtualized, virtualizeThreshold, overscan, getRowProps, storageKey, styles, headerStyles, headerCellStyles, bodyStyles, rowStyles, cellStyles, footerStyles, ariaLabel, qa, mods, ...rest } = props;
|
|
51
79
|
const rootRef = useCombinedRefs(ref, useRef(null));
|
|
52
80
|
const [scrollerEl, setScrollerEl] = useState(null);
|
|
53
81
|
const containerWidth = useContainerWidth(scrollerEl);
|
|
82
|
+
const resolvedGetRowKey = useMemo(() => getRowKey ?? defaultGetRowKey(rowKey), [getRowKey, rowKey]);
|
|
83
|
+
const treeModel = useMemo(() => getRowChildren ? buildTableTree(data, getRowChildren, resolvedGetRowKey) : null, [
|
|
84
|
+
data,
|
|
85
|
+
getRowChildren,
|
|
86
|
+
resolvedGetRowKey
|
|
87
|
+
]);
|
|
88
|
+
useWarn(treeModel != null && treeModel.duplicateKeys.length > 0, {
|
|
89
|
+
key: ["data-table-tree-duplicate-keys"],
|
|
90
|
+
args: ["DataTable:", "Tree row keys must be unique across the complete hierarchy. Duplicate rows were ignored."]
|
|
91
|
+
});
|
|
92
|
+
useWarn(treeModel != null && treeModel.cyclicKeys.length > 0, {
|
|
93
|
+
key: ["data-table-tree-cyclic-keys"],
|
|
94
|
+
args: ["DataTable:", "Tree data contains a cycle. Cyclic descendants were ignored."]
|
|
95
|
+
});
|
|
54
96
|
const storage = useTableStorage(storageKey);
|
|
97
|
+
const columnModel = useMemo(() => buildColumnModel(columns), [columns]);
|
|
98
|
+
const hasColumnGroups = columnModel.headerPaths.size > 0;
|
|
55
99
|
const columnOrderState = useColumnOrder({
|
|
56
|
-
columns: useMemo(() => columns.map((column) => {
|
|
100
|
+
columns: useMemo(() => columnModel.columns.map((column) => {
|
|
57
101
|
const isNumeric = column.dataType === "number";
|
|
58
102
|
return {
|
|
59
103
|
...column,
|
|
@@ -63,26 +107,65 @@ function DataTable(props, ref) {
|
|
|
63
107
|
...typeof column.cellStyles === "object" ? column.cellStyles : null
|
|
64
108
|
} : column.cellStyles
|
|
65
109
|
};
|
|
66
|
-
}), [columns]),
|
|
110
|
+
}), [columnModel.columns]),
|
|
67
111
|
columnOrder,
|
|
68
112
|
defaultColumnOrder,
|
|
69
113
|
onColumnOrderChange,
|
|
70
114
|
storage
|
|
71
115
|
});
|
|
72
116
|
const orderedColumns = columnOrderState.columns;
|
|
117
|
+
const resolvedTreeColumnKey = useMemo(() => {
|
|
118
|
+
if (!treeModel) return void 0;
|
|
119
|
+
const visibleColumns = orderedColumns.filter((column) => !column.isHidden);
|
|
120
|
+
return visibleColumns.some((column) => column.key === treeColumnKey) ? treeColumnKey : visibleColumns[0]?.key;
|
|
121
|
+
}, [
|
|
122
|
+
treeModel,
|
|
123
|
+
orderedColumns,
|
|
124
|
+
treeColumnKey
|
|
125
|
+
]);
|
|
126
|
+
useWarn(treeModel != null && treeColumnKey != null && resolvedTreeColumnKey !== treeColumnKey, {
|
|
127
|
+
key: ["data-table-tree-column-invalid", treeColumnKey],
|
|
128
|
+
args: ["DataTable:", "`treeColumnKey` must identify a visible data column. Falling back to the first visible column."]
|
|
129
|
+
});
|
|
73
130
|
const { sorts, sortedRows, toggleSort, setColumnSort, mode: resolvedSortMode } = useTableSorts({
|
|
74
131
|
columns: orderedColumns,
|
|
75
|
-
rows: data,
|
|
76
|
-
mode: sortMode,
|
|
132
|
+
rows: treeModel ? treeModel.roots.map((node) => node.row) : data,
|
|
133
|
+
mode: treeModel ? "server" : sortMode,
|
|
77
134
|
sorts: sortsProp,
|
|
78
135
|
defaultSorts,
|
|
79
136
|
onSortsChange
|
|
80
137
|
});
|
|
138
|
+
const collator = useCollator({
|
|
139
|
+
numeric: true,
|
|
140
|
+
sensitivity: "base"
|
|
141
|
+
});
|
|
142
|
+
const treeSortMode = treeModel ? sortMode ?? (orderedColumns.some((column) => column.isSortable) ? "client" : "off") : resolvedSortMode;
|
|
143
|
+
const processedTreeRoots = useMemo(() => {
|
|
144
|
+
const roots = treeModel?.roots ?? [];
|
|
145
|
+
if (treeSortMode !== "client" || !sorts.length) return roots;
|
|
146
|
+
const active = sorts.map((sort) => ({
|
|
147
|
+
sort,
|
|
148
|
+
column: orderedColumns.find((column) => column.key === sort.columnKey)
|
|
149
|
+
})).filter((entry) => entry.column != null);
|
|
150
|
+
return sortTableTree(roots, (a, b) => {
|
|
151
|
+
for (const { sort, column } of active) {
|
|
152
|
+
const result = compareByColumn(column, collator, a.row, a.sourceIndex, b.row, b.sourceIndex);
|
|
153
|
+
if (result !== 0) return result * (sort.direction === "asc" ? 1 : -1);
|
|
154
|
+
}
|
|
155
|
+
return a.siblingIndex - b.siblingIndex;
|
|
156
|
+
});
|
|
157
|
+
}, [
|
|
158
|
+
treeModel,
|
|
159
|
+
treeSortMode,
|
|
160
|
+
sorts,
|
|
161
|
+
orderedColumns,
|
|
162
|
+
collator
|
|
163
|
+
]);
|
|
81
164
|
const [pageSize, setPageSizeState] = useControlledState(pageSizeProp, pageSizeProp === void 0 && storage.has("pageSize") ? storage.initial.pageSize ?? defaultPageSize : defaultPageSize, onPageSizeChange);
|
|
82
165
|
const [page, setPageState] = useControlledState(pageProp, defaultPage ?? 1, onPageChange);
|
|
83
166
|
const isPaginated = paginationMode !== "off";
|
|
84
167
|
const isServerPaginated = paginationMode === "server";
|
|
85
|
-
const total = isServerPaginated ? totalProp ?? 0 : sortedRows.length;
|
|
168
|
+
const total = isServerPaginated ? totalProp ?? 0 : treeModel ? processedTreeRoots.length : sortedRows.length;
|
|
86
169
|
const pageInfo = getPageInfo({
|
|
87
170
|
page,
|
|
88
171
|
pageSize,
|
|
@@ -95,7 +178,27 @@ function DataTable(props, ref) {
|
|
|
95
178
|
setPageState(1);
|
|
96
179
|
if (pageSizeProp === void 0) storage.write({ pageSize: next });
|
|
97
180
|
});
|
|
98
|
-
const
|
|
181
|
+
const flatVisibleRows = paginationMode === "client" ? sortedRows.slice((pageInfo.page - 1) * pageSize, pageInfo.page * pageSize) : sortedRows;
|
|
182
|
+
const treeState = useTableTreeState({
|
|
183
|
+
roots: useMemo(() => reindexTableTree(paginationMode === "client" ? processedTreeRoots.slice((pageInfo.page - 1) * pageSize, pageInfo.page * pageSize) : processedTreeRoots), [
|
|
184
|
+
processedTreeRoots,
|
|
185
|
+
paginationMode,
|
|
186
|
+
pageInfo.page,
|
|
187
|
+
pageSize
|
|
188
|
+
]),
|
|
189
|
+
allNodesByKey: treeModel?.byKey ?? /* @__PURE__ */ new Map(),
|
|
190
|
+
expandedKeys,
|
|
191
|
+
defaultExpandedKeys,
|
|
192
|
+
getTextValue: (node) => {
|
|
193
|
+
const column = orderedColumns.find((entry) => entry.key === resolvedTreeColumnKey);
|
|
194
|
+
return column ? getColumnText(column, node.row, node.sourceIndex) ?? String(node.key) : String(node.key);
|
|
195
|
+
},
|
|
196
|
+
onExpand,
|
|
197
|
+
ariaLabel
|
|
198
|
+
});
|
|
199
|
+
const visibleTreeEntries = treeModel ? treeState.visibleEntries : [];
|
|
200
|
+
const visibleRows = treeModel ? visibleTreeEntries.map((entry) => entry.row) : flatVisibleRows;
|
|
201
|
+
const visibleRowKeys = treeModel ? visibleTreeEntries.map((entry) => entry.key) : void 0;
|
|
99
202
|
const [ownColumnWidths, setOwnColumnWidths] = useState(() => (columnWidthsProp === void 0 && storage.has("columnWidths") ? storage.initial.columnWidths ?? defaultColumnWidths : defaultColumnWidths) ?? EMPTY_WIDTHS);
|
|
100
203
|
const [draftColumnWidths, setDraftColumnWidths] = useState(null);
|
|
101
204
|
const draftRef = useRef(null);
|
|
@@ -135,7 +238,6 @@ function DataTable(props, ref) {
|
|
|
135
238
|
});
|
|
136
239
|
layoutRef.current = layout;
|
|
137
240
|
const { t } = useI18n();
|
|
138
|
-
const resolvedGetRowKey = useMemo(() => getRowKey ?? defaultGetRowKey(rowKey), [getRowKey, rowKey]);
|
|
139
241
|
const selectionRows = useMemo(() => [
|
|
140
242
|
...pinnedTopRows ?? [],
|
|
141
243
|
...visibleRows,
|
|
@@ -147,11 +249,12 @@ function DataTable(props, ref) {
|
|
|
147
249
|
]);
|
|
148
250
|
const selectionRowKeys = useMemo(() => [
|
|
149
251
|
...(pinnedTopRows ?? []).map((row, index) => selectionRowKey("pinnedTop", resolvedGetRowKey(row, index))),
|
|
150
|
-
...visibleRows.map(resolvedGetRowKey),
|
|
252
|
+
...visibleRows.map((row, index) => visibleRowKeys?.[index] ?? resolvedGetRowKey(row, index)),
|
|
151
253
|
...(pinnedBottomRows ?? []).map((row, index) => selectionRowKey("pinnedBottom", resolvedGetRowKey(row, index)))
|
|
152
254
|
], [
|
|
153
255
|
pinnedTopRows,
|
|
154
256
|
visibleRows,
|
|
257
|
+
visibleRowKeys,
|
|
155
258
|
pinnedBottomRows,
|
|
156
259
|
resolvedGetRowKey
|
|
157
260
|
]);
|
|
@@ -183,9 +286,14 @@ function DataTable(props, ref) {
|
|
|
183
286
|
const smallestPageSize = pageSizeOptions?.length ? Math.min(...pageSizeOptions) : pageSize;
|
|
184
287
|
const showPagination = isPaginated && !(autoHidePagination && !hasNextPage && pageInfo.totalPages <= 1 && total <= smallestPageSize);
|
|
185
288
|
const hasFooter = showPagination || footerStart != null || footerCenter != null || footerEnd != null;
|
|
289
|
+
useWarn(isColumnReorderable && hasColumnGroups, {
|
|
290
|
+
key: ["data-table-grouped-column-reorder"],
|
|
291
|
+
args: ["DataTable:", "`isColumnReorderable` is ignored when columns contain header groups."]
|
|
292
|
+
});
|
|
293
|
+
const canReorderColumns = isColumnReorderable && !hasColumnGroups;
|
|
186
294
|
const headRowRef = useRef(null);
|
|
187
|
-
const draggableColumnKeys = useMemo(() => getDraggableColumnKeys(layout.columns,
|
|
188
|
-
const columnCollection = useMemo(() => new RowCollection(layout.columns.filter((column) => isColumnDraggable(column,
|
|
295
|
+
const draggableColumnKeys = useMemo(() => getDraggableColumnKeys(layout.columns, canReorderColumns), [layout.columns, canReorderColumns]);
|
|
296
|
+
const columnCollection = useMemo(() => new RowCollection(layout.columns.filter((column) => isColumnDraggable(column, canReorderColumns)), (column) => column.key, /* @__PURE__ */ new Set(), (column) => typeof column.title === "string" ? column.title : column.key), [layout.columns, canReorderColumns]);
|
|
189
297
|
/**
|
|
190
298
|
* `'single'`, not `'none'`.
|
|
191
299
|
*
|
|
@@ -202,18 +310,21 @@ function DataTable(props, ref) {
|
|
|
202
310
|
const handleColumnFocus = useEvent((columnKey) => {
|
|
203
311
|
columnSelectionManager.setFocusedKey(columnKey);
|
|
204
312
|
});
|
|
205
|
-
const isColumnDragEnabled =
|
|
313
|
+
const isColumnDragEnabled = canReorderColumns && draggableColumnKeys.length > 1;
|
|
314
|
+
const treeRowNumberOffset = treeModel ? paginationMode === "client" ? flattenTableTree(processedTreeRoots.slice(0, (pageInfo.page - 1) * pageSize), treeState.expandedKeys).length : 0 : null;
|
|
206
315
|
const renderTable = (columnDragState, columnDropState, headCollectionProps) => /* @__PURE__ */ jsx(TableView, {
|
|
207
316
|
...rest,
|
|
208
317
|
rootRef,
|
|
209
318
|
qa: qa || "DataTable",
|
|
210
319
|
rows: visibleRows,
|
|
320
|
+
rowKeys: visibleRowKeys,
|
|
211
321
|
pinnedTopRows,
|
|
212
322
|
pinnedBottomRows,
|
|
213
|
-
rowNumberOffset: paginationMode === "off" ? 0 : (pageInfo.page - 1) * pageSize,
|
|
214
|
-
rowIndexOffset: paginationMode === "off" ? 0 : (pageInfo.page - 1) * pageSize,
|
|
215
|
-
totalRowCount: total,
|
|
323
|
+
rowNumberOffset: treeRowNumberOffset ?? (paginationMode === "off" ? 0 : (pageInfo.page - 1) * pageSize),
|
|
324
|
+
rowIndexOffset: treeModel ? 0 : paginationMode === "off" ? 0 : (pageInfo.page - 1) * pageSize,
|
|
325
|
+
totalRowCount: treeModel ? visibleRows.length : total,
|
|
216
326
|
layout,
|
|
327
|
+
columnHeaderPaths: columnModel.headerPaths,
|
|
217
328
|
hasColumnDividers: true,
|
|
218
329
|
cellSelection,
|
|
219
330
|
getRowKey: resolvedGetRowKey,
|
|
@@ -234,9 +345,10 @@ function DataTable(props, ref) {
|
|
|
234
345
|
isRowMoveAnimated,
|
|
235
346
|
isHeaderHidden,
|
|
236
347
|
isHeaderSticky,
|
|
348
|
+
isAutoHeight,
|
|
237
349
|
contentPreset: "t4",
|
|
238
350
|
headerPreset: "t4m",
|
|
239
|
-
sortMode:
|
|
351
|
+
sortMode: treeSortMode,
|
|
240
352
|
sorts,
|
|
241
353
|
onColumnSort: toggleSort,
|
|
242
354
|
onColumnSortChange: setColumnSort,
|
|
@@ -265,6 +377,13 @@ function DataTable(props, ref) {
|
|
|
265
377
|
headCollectionProps,
|
|
266
378
|
headRowRef,
|
|
267
379
|
onColumnFocus: handleColumnFocus,
|
|
380
|
+
tree: treeModel ? {
|
|
381
|
+
state: treeState.state,
|
|
382
|
+
ariaProps: treeState.ariaProps,
|
|
383
|
+
nodes: treeState.visibleNodes,
|
|
384
|
+
entries: visibleTreeEntries,
|
|
385
|
+
columnKey: resolvedTreeColumnKey
|
|
386
|
+
} : void 0,
|
|
268
387
|
footer: hasFooter ? /* @__PURE__ */ jsx(ItemTableFooter, {
|
|
269
388
|
start: footerStart,
|
|
270
389
|
center: footerCenter,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.js","names":[],"sources":["../../../../src/components/data/DataTable/DataTable.tsx"],"sourcesContent":["import { SelectionManager } from '@react-stately/selection';\nimport { useControlledState } from '@react-stately/utils';\nimport { CONTAINER_STYLES } from '@tenphi/tasty';\nimport { forwardRef, useMemo, useRef, useState } from 'react';\nimport { useMultipleSelectionState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { clampPage, getPageInfo } from '../../navigation/Pagination';\nimport { DraggableCollection } from '../../shared/DraggableCollection';\nimport { ItemTableFooter } from '../ItemTable/ItemTableFooter';\nimport { RowCollection } from '../TableBase/RowCollection';\nimport { TableView } from '../TableBase/TableView';\nimport { selectionRowKey } from '../TableBase/types';\nimport { useCellSelection } from '../TableBase/use-cell-selection';\nimport {\n getDraggableColumnKeys,\n isColumnDraggable,\n useColumnOrder,\n} from '../TableBase/use-column-order';\nimport { useContainerWidth } from '../TableBase/use-container-width';\nimport {\n freezeColumnWidths,\n useTableColumns,\n} from '../TableBase/use-table-columns';\nimport { ROW_NUMBER_COLUMN_KEY } from '../TableBase/use-table-selection';\nimport { useTableSorts } from '../TableBase/use-table-sorts';\nimport { useTableStorage } from '../TableBase/use-table-storage';\n\nimport type { Key } from '@react-types/shared';\nimport type { ForwardedRef, ReactElement } from 'react';\nimport type {\n CubeTableColumnLayout,\n CubeTableRowSection,\n} from '../TableBase/types';\nimport type { CubeDataTableColumn, CubeDataTableProps } from './types';\n\n/** Wide enough for five digits at the dense default. */\nconst ROW_NUMBER_WIDTH = 56;\n\nconst EMPTY_WIDTHS: Record<string, number> = {};\n\nfunction defaultGetRowKey<T>(rowKey: string) {\n return (row: T, index: number): Key => {\n const value = (row as any)?.[rowKey];\n\n return value == null ? index : (value as Key);\n };\n}\n\n/**\n * A grid for query results.\n *\n * The same engine as `ItemTable` — one `TableView`, one column layout, one\n * value pipeline — with the defaults an analytical grid wants rather than a\n * list's: denser type, banded rows, resizable columns, multi-column sort, and\n * rows pinned for totals.\n *\n * It knows nothing about Cube. Measures, dimensions, pivots and drill-downs\n * reach it as ordinary columns, `render` output and `column.header.menu`\n * content, which is what keeps the ~34 kB of Cloud's column-header menu in\n * Cloud.\n */\nfunction DataTable<T = any>(\n props: CubeDataTableProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const {\n data,\n columns,\n rowKey = 'id',\n getRowKey,\n pinnedTopRows,\n pinnedBottomRows,\n isLoading = false,\n loadingIndicator = 'overlay',\n skeletonRowCount,\n error,\n emptyLabel,\n noResultsLabel,\n isFiltered,\n shape = 'plain',\n // Denser than `ItemTable`'s `medium`: a result grid is read as a block, and\n // more rows on screen is the point of it.\n size = 'small',\n rowSize,\n rowHeight,\n headerHeight,\n isStriped = true,\n isHeaderHidden,\n isHeaderSticky,\n showRowNumbers = false,\n sortMode,\n sorts: sortsProp,\n defaultSorts,\n onSortsChange,\n paginationMode = 'client',\n page: pageProp,\n defaultPage,\n onPageChange,\n pageSize: pageSizeProp,\n defaultPageSize = 100,\n onPageSizeChange,\n pageSizeOptions,\n total: totalProp,\n totalPages,\n hasNextPage,\n summary = true,\n autoHidePagination = true,\n footerStart,\n footerCenter,\n footerEnd,\n cellSelectionMode = 'range',\n isCellSelectable,\n selectedCellRange,\n defaultSelectedCellRange,\n onCellRangeChange,\n isRowMoveAnimated,\n isResizable = true,\n columnWidths: columnWidthsProp,\n defaultColumnWidths,\n onColumnResize,\n isColumnReorderable = false,\n columnOrder,\n defaultColumnOrder,\n onColumnOrderChange,\n columnContextMenu,\n onColumnMenuAction,\n columnMenuTriggerProps,\n columnMenuProps,\n isVirtualized,\n virtualizeThreshold,\n overscan,\n getRowProps,\n storageKey,\n styles,\n headerStyles,\n headerCellStyles,\n bodyStyles,\n rowStyles,\n cellStyles,\n footerStyles,\n ariaLabel,\n qa,\n mods,\n ...rest\n } = props;\n\n const localRef = useRef<HTMLDivElement>(null);\n const rootRef = useCombinedRefs(ref, localRef);\n const [scrollerEl, setScrollerEl] = useState<HTMLElement | null>(null);\n const containerWidth = useContainerWidth(scrollerEl);\n\n const storage = useTableStorage(storageKey);\n\n /**\n * `dataType` is presentational, so it is folded into the column here rather\n * than reaching the renderer: `number` right-aligns and takes tabular figures\n * so digits line up down the column.\n */\n const resolvedColumns = useMemo(\n () =>\n columns.map((column) => {\n const isNumeric = column.dataType === 'number';\n\n return {\n ...column,\n align: column.align ?? (isNumeric ? 'end' : 'start'),\n cellStyles: isNumeric\n ? {\n fontVariantNumeric: 'tabular-nums',\n ...(typeof column.cellStyles === 'object'\n ? column.cellStyles\n : null),\n }\n : column.cellStyles,\n } as CubeDataTableColumn<T>;\n }),\n [columns],\n );\n\n // Applied to the SOURCE columns, before `useTableColumns`, so hidden-column\n // filtering, structural injection and pinned hoisting all still happen\n // downstream and `columnOrder` can never fight `pin`.\n const columnOrderState = useColumnOrder<T>({\n columns: resolvedColumns,\n columnOrder,\n defaultColumnOrder,\n onColumnOrderChange,\n storage,\n });\n const orderedColumns = columnOrderState.columns;\n\n const {\n sorts,\n sortedRows,\n toggleSort,\n setColumnSort,\n mode: resolvedSortMode,\n } = useTableSorts<T>({\n columns: orderedColumns,\n rows: data,\n mode: sortMode,\n sorts: sortsProp,\n defaultSorts,\n onSortsChange,\n });\n\n const [pageSize, setPageSizeState] = useControlledState<number>(\n pageSizeProp as number,\n (pageSizeProp === undefined && storage.has('pageSize')\n ? storage.initial.pageSize ?? defaultPageSize\n : defaultPageSize) as number,\n onPageSizeChange as (value: number) => void,\n );\n const [page, setPageState] = useControlledState<number>(\n pageProp as number,\n defaultPage ?? 1,\n onPageChange as (value: number) => void,\n );\n\n const isPaginated = paginationMode !== 'off';\n const isServerPaginated = paginationMode === 'server';\n const total = isServerPaginated ? totalProp ?? 0 : sortedRows.length;\n\n const pageInfo = getPageInfo({\n page,\n pageSize,\n total,\n totalPages: isServerPaginated ? totalPages : undefined,\n });\n\n const setPage = useEvent((next: number) =>\n setPageState(clampPage(next, pageInfo.totalPages)),\n );\n const setPageSize = useEvent((next: number) => {\n setPageSizeState(next);\n setPageState(1);\n\n if (pageSizeProp === undefined) storage.write({ pageSize: next });\n });\n\n const visibleRows =\n paginationMode === 'client'\n ? sortedRows.slice(\n (pageInfo.page - 1) * pageSize,\n pageInfo.page * pageSize,\n )\n : sortedRows;\n\n const [ownColumnWidths, setOwnColumnWidths] = useState<\n Record<string, number>\n >(\n () =>\n (columnWidthsProp === undefined && storage.has('columnWidths')\n ? storage.initial.columnWidths ?? defaultColumnWidths\n : defaultColumnWidths) ?? EMPTY_WIDTHS,\n );\n const [draftColumnWidths, setDraftColumnWidths] = useState<Record<\n string,\n number\n > | null>(null);\n const draftRef = useRef<Record<string, number> | null>(null);\n\n const baseColumnWidths = columnWidthsProp ?? ownColumnWidths;\n const columnWidths = draftColumnWidths ?? baseColumnWidths;\n\n /**\n * The resolved widths, for the freeze below. A ref because `layout` is\n * computed *after* this handler is defined, and `useEvent` only reads it when\n * the drag actually runs.\n */\n const layoutRef = useRef<CubeTableColumnLayout<T> | null>(null);\n\n const handleColumnResize = useEvent((key: string, width: number) => {\n // First move of a drag freezes every column, so this changes exactly one\n // width instead of re-splitting the flex pool. See `freezeColumnWidths`.\n const base =\n draftRef.current ??\n freezeColumnWidths(layoutRef.current, baseColumnWidths);\n\n draftRef.current = { ...base, [key]: Math.round(width) };\n setDraftColumnWidths(draftRef.current);\n });\n\n const handleColumnResizeEnd = useEvent((key: string) => {\n const next = draftRef.current ?? baseColumnWidths;\n\n if (columnWidthsProp === undefined) {\n setOwnColumnWidths(next);\n storage.write({ columnWidths: next });\n }\n\n onColumnResize?.(key, next[key], next);\n draftRef.current = null;\n setDraftColumnWidths(null);\n });\n\n const leadingColumns = useMemo(\n () =>\n showRowNumbers\n ? [{ key: ROW_NUMBER_COLUMN_KEY, width: ROW_NUMBER_WIDTH }]\n : undefined,\n [showRowNumbers],\n );\n\n const layout = useTableColumns<T>({\n columns: orderedColumns,\n containerWidth,\n columnWidths,\n leadingColumns,\n });\n\n layoutRef.current = layout;\n\n const { t } = useI18n();\n\n const resolvedGetRowKey = useMemo(\n () => getRowKey ?? defaultGetRowKey<T>(rowKey),\n [getRowKey, rowKey],\n );\n\n // Every row a range can reach, in the order they appear on screen. Pinned rows\n // are in it: a total is a figure like any other, and having to copy it\n // separately from the column it sums is the wrong trade.\n //\n // The keys are built here rather than inside the hook so they cannot disagree\n // with the ones the renderer stamps — a pinned row is keyed by its own index\n // within its group, exactly as `renderPinnedRow` keys it.\n const selectionRows = useMemo(\n () => [\n ...(pinnedTopRows ?? []),\n ...visibleRows,\n ...(pinnedBottomRows ?? []),\n ],\n [pinnedTopRows, visibleRows, pinnedBottomRows],\n );\n const selectionRowKeys = useMemo(\n () => [\n // Section-qualified, matching what the renderer stamps: the same record\n // is routinely pinned at both edges, and one flat key space collapsed the\n // two into whichever came first.\n ...(pinnedTopRows ?? []).map((row, index) =>\n selectionRowKey('pinnedTop', resolvedGetRowKey(row, index)),\n ),\n ...visibleRows.map(resolvedGetRowKey),\n ...(pinnedBottomRows ?? []).map((row, index) =>\n selectionRowKey('pinnedBottom', resolvedGetRowKey(row, index)),\n ),\n ],\n [pinnedTopRows, visibleRows, pinnedBottomRows, resolvedGetRowKey],\n );\n\n // The hook works in one flat row order; the section a row belongs to is a\n // property of where it sits in that order, so it is resolved here rather than\n // asking the consumer to track it.\n const resolveCellSelectable = useEvent(\n (row: T, rowKey: Key, columnKey: string) => {\n if (!isCellSelectable) return true;\n\n const index = selectionRowKeys.indexOf(rowKey);\n const topCount = pinnedTopRows?.length ?? 0;\n const section: CubeTableRowSection =\n index < topCount\n ? 'pinnedTop'\n : index < topCount + visibleRows.length\n ? 'body'\n : 'pinnedBottom';\n\n return isCellSelectable({ row, rowKey, columnKey, section });\n },\n );\n\n const cellSelection = useCellSelection<T>({\n mode: cellSelectionMode,\n columns: layout.columns,\n rows: selectionRows,\n rowKeys: selectionRowKeys,\n isCellSelectable: isCellSelectable ? resolveCellSelectable : undefined,\n range: selectedCellRange,\n defaultRange: defaultSelectedCellRange,\n onRangeChange: onCellRangeChange,\n });\n\n // Same as `ItemTable`: style props (`height`, `maxHeight`, `margin`, …) land\n // on the root frame. `height` is the one that matters — there is no\n // page-scroll mode, so bounding the grid is what turns the body into a\n // scroller, pins the header, and lets virtualization engage at all.\n const rootStyles = { ...extractStyles(props, CONTAINER_STYLES), ...styles };\n\n const smallestPageSize = pageSizeOptions?.length\n ? Math.min(...pageSizeOptions)\n : pageSize;\n\n const showPagination =\n isPaginated &&\n !(\n autoHidePagination &&\n !hasNextPage &&\n pageInfo.totalPages <= 1 &&\n total <= smallestPageSize\n );\n\n const hasFooter =\n showPagination ||\n footerStart != null ||\n footerCenter != null ||\n footerEnd != null;\n\n /* ── column reordering ────────────────────────────────────────────────── */\n\n const headRowRef = useRef<HTMLTableRowElement>(null);\n const draggableColumnKeys = useMemo(\n () => getDraggableColumnKeys(layout.columns, isColumnReorderable),\n [layout.columns, isColumnReorderable],\n );\n const columnCollection = useMemo(\n () =>\n new RowCollection(\n layout.columns.filter((column) =>\n isColumnDraggable(column, isColumnReorderable),\n ),\n (column) => column.key,\n new Set(),\n // The drag announcements read this — otherwise a screen reader hears\n // \"Insert between and \".\n (column) =>\n typeof column.title === 'string' ? column.title : column.key,\n ),\n [layout.columns, isColumnReorderable],\n );\n /**\n * `'single'`, not `'none'`.\n *\n * `useDraggableItem` only deletes its own `onClick` — the one that would\n * hijack a screen-reader click away from the sort — when the selection mode is\n * not `'none'`, and only then does it attach the keyboard drag description.\n * Nothing is ever actually selected here.\n */\n const columnSelectionState = useMultipleSelectionState({\n selectionMode: 'single',\n disabledBehavior: 'all',\n });\n const columnSelectionManager = useMemo(\n () => new SelectionManager(columnCollection, columnSelectionState),\n [columnCollection, columnSelectionState],\n );\n const handleColumnFocus = useEvent((columnKey: string | null) => {\n columnSelectionManager.setFocusedKey(columnKey);\n });\n\n // One draggable column cannot be reordered, so the machinery stays unmounted\n // and the header keeps its exact DOM.\n const isColumnDragEnabled =\n isColumnReorderable && draggableColumnKeys.length > 1;\n\n const renderTable = (\n columnDragState?: any,\n columnDropState?: any,\n headCollectionProps?: Record<string, any>,\n ) => (\n <TableView<T>\n {...rest}\n rootRef={rootRef}\n qa={qa || 'DataTable'}\n rows={visibleRows}\n pinnedTopRows={pinnedTopRows}\n pinnedBottomRows={pinnedBottomRows}\n // Continuous across pages: row 101 is row 101, not row 1 of page two.\n //\n // Server mode counts too — the page and its size are known there just the\n // same, and `rows` is that page. Only `'off'` starts at 1, because then\n // there is no page to be on.\n rowNumberOffset={\n paginationMode === 'off' ? 0 : (pageInfo.page - 1) * pageSize\n }\n // The same offset drives `aria-rowindex`, which is document-absolute by\n // contract — a screen reader on page 3 should hear \"row 51 of 240\", not\n // \"row 1 of 25\".\n rowIndexOffset={\n paginationMode === 'off' ? 0 : (pageInfo.page - 1) * pageSize\n }\n totalRowCount={total}\n layout={layout}\n // Always on, unlike `ItemTable`. A result grid is read down a column, and\n // once the values are wide and right-aligned the rule is what keeps a\n // figure attached to its column — which is why Cloud's ag-grid theme sets\n // `columnBorder` for `DataTable` and not for the list grids.\n hasColumnDividers\n cellSelection={cellSelection}\n getRowKey={resolvedGetRowKey}\n onScrollerRef={setScrollerEl}\n isLoading={isLoading}\n loadingIndicator={loadingIndicator}\n skeletonRowCount={skeletonRowCount}\n error={error}\n // Same localized fallbacks as `ItemTable`: a grid that has finished\n // loading and shows an unexplained blank rectangle reads as broken.\n emptyLabel={emptyLabel ?? t('itemTable.noItems', 'No items')}\n noResultsLabel={\n noResultsLabel ?? t('itemTable.noResults', 'No results found')\n }\n isFiltered={isFiltered}\n shape={shape}\n size={size}\n rowSize={rowSize}\n rowHeight={rowHeight}\n headerHeight={headerHeight}\n isStriped={isStriped}\n isRowMoveAnimated={isRowMoveAnimated}\n isHeaderHidden={isHeaderHidden}\n isHeaderSticky={isHeaderSticky}\n // The header shows the column name at body size — a result grid has no\n // room for the uppercase caption a list header uses.\n // `t4` throughout: a result grid is read as a block, and one step down\n // from the list preset fits noticeably more on screen without losing\n // legibility. The header takes the medium weight of the same step.\n contentPreset=\"t4\"\n headerPreset=\"t4m\"\n sortMode={resolvedSortMode}\n sorts={sorts}\n onColumnSort={toggleSort}\n onColumnSortChange={setColumnSort}\n columnContextMenu={columnContextMenu}\n onColumnMenuAction={onColumnMenuAction}\n columnMenuTriggerProps={columnMenuTriggerProps}\n columnMenuProps={columnMenuProps}\n isVirtualized={isVirtualized}\n virtualizeThreshold={virtualizeThreshold}\n overscan={overscan}\n isResizable={isResizable}\n onColumnResize={handleColumnResize}\n onColumnResizeEnd={handleColumnResizeEnd}\n getRowProps={getRowProps}\n ariaLabel={ariaLabel}\n styles={rootStyles}\n headerStyles={headerStyles}\n headerCellStyles={headerCellStyles}\n bodyStyles={bodyStyles}\n rowStyles={rowStyles}\n cellStyles={cellStyles}\n mods={mods}\n isColumnReorderable={isColumnDragEnabled}\n columnDragState={columnDragState}\n columnDropState={columnDropState}\n headCollectionProps={headCollectionProps}\n headRowRef={headRowRef}\n onColumnFocus={handleColumnFocus}\n footer={\n hasFooter ? (\n <ItemTableFooter\n start={footerStart}\n center={footerCenter}\n end={footerEnd}\n styles={footerStyles}\n pagination={\n showPagination\n ? {\n page: pageInfo.page,\n pageSize,\n total,\n totalPages: pageInfo.totalPages,\n pageSizeOptions,\n summary,\n hasNextPage,\n onPageChange: setPage,\n onPageSizeChange: setPageSize,\n }\n : undefined\n }\n />\n ) : null\n }\n />\n );\n\n return isColumnDragEnabled ? (\n <DraggableCollection\n state={{\n collection: columnCollection as any,\n selectionManager: columnSelectionManager as any,\n disabledKeys: new Set(),\n }}\n // The element that DIRECTLY contains the header cells. React Aria's\n // `ListDropTargetDelegate` resolves a drop by measuring `[data-key]`\n // descendants of this element, so pointing it anywhere else leaves every\n // drop unresolvable — the column lifts but never lands.\n listRef={headRowRef}\n orderedKeys={draggableColumnKeys}\n orientation=\"horizontal\"\n onReorder={columnOrderState.reorder}\n >\n {(dragState, dropState, collectionProps) =>\n renderTable(dragState, dropState, collectionProps)\n }\n </DraggableCollection>\n ) : (\n renderTable()\n );\n}\n\nconst _DataTable = forwardRef(DataTable) as unknown as (<T = any>(\n props: CubeDataTableProps<T> & { ref?: ForwardedRef<HTMLDivElement> },\n) => ReactElement) & { displayName?: string };\n\n_DataTable.displayName = 'DataTable';\n\nexport { _DataTable as DataTable };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DataTable.js","names":[],"sources":["../../../../src/components/data/DataTable/DataTable.tsx"],"sourcesContent":["import { useCollator } from '@react-aria/i18n';\nimport { SelectionManager } from '@react-stately/selection';\nimport { useControlledState } from '@react-stately/utils';\nimport { CONTAINER_STYLES } from '@tenphi/tasty';\nimport { forwardRef, useMemo, useRef, useState } from 'react';\nimport { useMultipleSelectionState } from 'react-stately';\n\nimport { useEvent, useWarn } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { clampPage, getPageInfo } from '../../navigation/Pagination';\nimport { DraggableCollection } from '../../shared/DraggableCollection';\nimport { ItemTableFooter } from '../ItemTable/ItemTableFooter';\nimport { RowCollection } from '../TableBase/RowCollection';\nimport {\n buildTableTree,\n flattenTableTree,\n reindexTableTree,\n sortTableTree,\n} from '../TableBase/table-tree';\nimport { TableView } from '../TableBase/TableView';\nimport { selectionRowKey } from '../TableBase/types';\nimport { useCellSelection } from '../TableBase/use-cell-selection';\nimport {\n getDraggableColumnKeys,\n isColumnDraggable,\n useColumnOrder,\n} from '../TableBase/use-column-order';\nimport { useContainerWidth } from '../TableBase/use-container-width';\nimport {\n freezeColumnWidths,\n getColumnText,\n useTableColumns,\n} from '../TableBase/use-table-columns';\nimport { ROW_NUMBER_COLUMN_KEY } from '../TableBase/use-table-selection';\nimport { compareByColumn } from '../TableBase/use-table-sort';\nimport { useTableSorts } from '../TableBase/use-table-sorts';\nimport { useTableStorage } from '../TableBase/use-table-storage';\nimport { useTableTreeState } from '../TableBase/use-table-tree-state';\n\nimport type { Key } from '@react-types/shared';\nimport type { ForwardedRef, ReactElement } from 'react';\nimport type {\n CubeTableColumnGroupHeader,\n CubeTableColumnLayout,\n CubeTableRowSection,\n} from '../TableBase/types';\nimport type {\n CubeDataTableColumn,\n CubeDataTableColumnDefinition,\n CubeDataTableColumnGroup,\n CubeDataTableProps,\n} from './types';\n\n/** Wide enough for five digits at the dense default. */\nconst ROW_NUMBER_WIDTH = 56;\n\nconst EMPTY_WIDTHS: Record<string, number> = {};\n\ninterface DataTableColumnModel<T> {\n columns: CubeDataTableColumn<T>[];\n headerPaths: Map<string, readonly CubeTableColumnGroupHeader[]>;\n}\n\nfunction isColumnGroup<T>(\n column: CubeDataTableColumnDefinition<T>,\n): column is CubeDataTableColumnGroup<T> {\n return 'children' in column;\n}\n\n/** Flattens the public column tree while retaining each leaf's header path. */\nfunction buildColumnModel<T>(\n definitions: readonly CubeDataTableColumnDefinition<T>[],\n): DataTableColumnModel<T> {\n const columns: CubeDataTableColumn<T>[] = [];\n const headerPaths = new Map<string, readonly CubeTableColumnGroupHeader[]>();\n\n function visit(\n entries: readonly CubeDataTableColumnDefinition<T>[],\n path: readonly CubeTableColumnGroupHeader[],\n ) {\n for (const entry of entries) {\n if (isColumnGroup(entry)) {\n visit(entry.children, [\n ...path,\n { key: entry.key, title: entry.title },\n ]);\n } else {\n columns.push(entry);\n if (path.length) headerPaths.set(entry.key, path);\n }\n }\n }\n\n visit(definitions, []);\n\n return { columns, headerPaths };\n}\n\nfunction defaultGetRowKey<T>(rowKey: string) {\n return (row: T, index: number): Key => {\n const value = (row as any)?.[rowKey];\n\n return value == null ? index : (value as Key);\n };\n}\n\n/**\n * A grid for query results.\n *\n * The same engine as `ItemTable` — one `TableView`, one column layout, one\n * value pipeline — with the defaults an analytical grid wants rather than a\n * list's: denser type, banded rows, resizable columns, multi-column sort, and\n * rows pinned for totals.\n *\n * It knows nothing about Cube. Measures, dimensions, pivots and drill-downs\n * reach it as leaf columns, presentational column groups, `render` output and\n * `column.header.menu` content, which is what keeps the ~34 kB of Cloud's\n * column-header menu in Cloud.\n */\nfunction DataTable<T = any>(\n props: CubeDataTableProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const {\n data,\n columns,\n rowKey = 'id',\n getRowKey,\n getRowChildren,\n treeColumnKey,\n expandedKeys,\n defaultExpandedKeys,\n onExpand,\n pinnedTopRows,\n pinnedBottomRows,\n isLoading = false,\n loadingIndicator = 'overlay',\n skeletonRowCount,\n error,\n emptyLabel,\n noResultsLabel,\n isFiltered,\n shape = 'plain',\n // Denser than `ItemTable`'s `medium`: a result grid is read as a block, and\n // more rows on screen is the point of it.\n size = 'small',\n rowSize,\n rowHeight,\n headerHeight,\n isStriped = true,\n isHeaderHidden,\n isHeaderSticky,\n isAutoHeight = false,\n showRowNumbers = false,\n sortMode,\n sorts: sortsProp,\n defaultSorts,\n onSortsChange,\n paginationMode = 'client',\n page: pageProp,\n defaultPage,\n onPageChange,\n pageSize: pageSizeProp,\n defaultPageSize = 100,\n onPageSizeChange,\n pageSizeOptions,\n total: totalProp,\n totalPages,\n hasNextPage,\n summary = true,\n autoHidePagination = true,\n footerStart,\n footerCenter,\n footerEnd,\n cellSelectionMode = 'range',\n isCellSelectable,\n selectedCellRange,\n defaultSelectedCellRange,\n onCellRangeChange,\n isRowMoveAnimated,\n isResizable = true,\n columnWidths: columnWidthsProp,\n defaultColumnWidths,\n onColumnResize,\n isColumnReorderable = false,\n columnOrder,\n defaultColumnOrder,\n onColumnOrderChange,\n columnContextMenu,\n onColumnMenuAction,\n columnMenuTriggerProps,\n columnMenuProps,\n isVirtualized,\n virtualizeThreshold,\n overscan,\n getRowProps,\n storageKey,\n styles,\n headerStyles,\n headerCellStyles,\n bodyStyles,\n rowStyles,\n cellStyles,\n footerStyles,\n ariaLabel,\n qa,\n mods,\n ...rest\n } = props;\n\n const localRef = useRef<HTMLDivElement>(null);\n const rootRef = useCombinedRefs(ref, localRef);\n const [scrollerEl, setScrollerEl] = useState<HTMLElement | null>(null);\n const containerWidth = useContainerWidth(scrollerEl);\n\n const resolvedGetRowKey = useMemo(\n () => getRowKey ?? defaultGetRowKey<T>(rowKey),\n [getRowKey, rowKey],\n );\n\n const treeModel = useMemo(\n () =>\n getRowChildren\n ? buildTableTree(data, getRowChildren, resolvedGetRowKey)\n : null,\n [data, getRowChildren, resolvedGetRowKey],\n );\n\n useWarn(treeModel != null && treeModel.duplicateKeys.length > 0, {\n key: ['data-table-tree-duplicate-keys'],\n args: [\n 'DataTable:',\n 'Tree row keys must be unique across the complete hierarchy. Duplicate rows were ignored.',\n ],\n });\n useWarn(treeModel != null && treeModel.cyclicKeys.length > 0, {\n key: ['data-table-tree-cyclic-keys'],\n args: [\n 'DataTable:',\n 'Tree data contains a cycle. Cyclic descendants were ignored.',\n ],\n });\n\n const storage = useTableStorage(storageKey);\n\n const columnModel = useMemo(() => buildColumnModel(columns), [columns]);\n const hasColumnGroups = columnModel.headerPaths.size > 0;\n\n /**\n * `dataType` is presentational, so it is folded into the column here rather\n * than reaching the renderer: `number` right-aligns and takes tabular figures\n * so digits line up down the column.\n */\n const resolvedColumns = useMemo(\n () =>\n columnModel.columns.map((column) => {\n const isNumeric = column.dataType === 'number';\n\n return {\n ...column,\n align: column.align ?? (isNumeric ? 'end' : 'start'),\n cellStyles: isNumeric\n ? {\n fontVariantNumeric: 'tabular-nums',\n ...(typeof column.cellStyles === 'object'\n ? column.cellStyles\n : null),\n }\n : column.cellStyles,\n } as CubeDataTableColumn<T>;\n }),\n [columnModel.columns],\n );\n\n // Applied to the SOURCE columns, before `useTableColumns`, so hidden-column\n // filtering, structural injection and pinned hoisting all still happen\n // downstream and `columnOrder` can never fight `pin`.\n const columnOrderState = useColumnOrder<T>({\n columns: resolvedColumns,\n columnOrder,\n defaultColumnOrder,\n onColumnOrderChange,\n storage,\n });\n const orderedColumns = columnOrderState.columns;\n\n const resolvedTreeColumnKey = useMemo(() => {\n if (!treeModel) return undefined;\n const visibleColumns = orderedColumns.filter((column) => !column.isHidden);\n return visibleColumns.some((column) => column.key === treeColumnKey)\n ? treeColumnKey\n : visibleColumns[0]?.key;\n }, [treeModel, orderedColumns, treeColumnKey]);\n\n useWarn(\n treeModel != null &&\n treeColumnKey != null &&\n resolvedTreeColumnKey !== treeColumnKey,\n {\n key: ['data-table-tree-column-invalid', treeColumnKey],\n args: [\n 'DataTable:',\n '`treeColumnKey` must identify a visible data column. Falling back to the first visible column.',\n ],\n },\n );\n\n const {\n sorts,\n sortedRows,\n toggleSort,\n setColumnSort,\n mode: resolvedSortMode,\n } = useTableSorts<T>({\n columns: orderedColumns,\n rows: treeModel ? treeModel.roots.map((node) => node.row) : data,\n mode: treeModel ? 'server' : sortMode,\n sorts: sortsProp,\n defaultSorts,\n onSortsChange,\n });\n\n const collator = useCollator({ numeric: true, sensitivity: 'base' });\n const treeSortMode = treeModel\n ? sortMode ??\n (orderedColumns.some((column) => column.isSortable) ? 'client' : 'off')\n : resolvedSortMode;\n const processedTreeRoots = useMemo(() => {\n const roots = treeModel?.roots ?? [];\n if (treeSortMode !== 'client' || !sorts.length) return roots;\n\n const active = sorts\n .map((sort) => ({\n sort,\n column: orderedColumns.find((column) => column.key === sort.columnKey),\n }))\n .filter((entry) => entry.column != null);\n\n return sortTableTree(roots, (a, b) => {\n for (const { sort, column } of active) {\n const result = compareByColumn(\n column!,\n collator,\n a.row,\n a.sourceIndex,\n b.row,\n b.sourceIndex,\n );\n if (result !== 0) {\n return result * (sort.direction === 'asc' ? 1 : -1);\n }\n }\n return a.siblingIndex - b.siblingIndex;\n });\n }, [treeModel, treeSortMode, sorts, orderedColumns, collator]);\n\n const [pageSize, setPageSizeState] = useControlledState<number>(\n pageSizeProp as number,\n (pageSizeProp === undefined && storage.has('pageSize')\n ? storage.initial.pageSize ?? defaultPageSize\n : defaultPageSize) as number,\n onPageSizeChange as (value: number) => void,\n );\n const [page, setPageState] = useControlledState<number>(\n pageProp as number,\n defaultPage ?? 1,\n onPageChange as (value: number) => void,\n );\n\n const isPaginated = paginationMode !== 'off';\n const isServerPaginated = paginationMode === 'server';\n const total = isServerPaginated\n ? totalProp ?? 0\n : treeModel\n ? processedTreeRoots.length\n : sortedRows.length;\n\n const pageInfo = getPageInfo({\n page,\n pageSize,\n total,\n totalPages: isServerPaginated ? totalPages : undefined,\n });\n\n const setPage = useEvent((next: number) =>\n setPageState(clampPage(next, pageInfo.totalPages)),\n );\n const setPageSize = useEvent((next: number) => {\n setPageSizeState(next);\n setPageState(1);\n\n if (pageSizeProp === undefined) storage.write({ pageSize: next });\n });\n\n const flatVisibleRows =\n paginationMode === 'client'\n ? sortedRows.slice(\n (pageInfo.page - 1) * pageSize,\n pageInfo.page * pageSize,\n )\n : sortedRows;\n\n const pageTreeRoots = useMemo(\n () =>\n reindexTableTree(\n paginationMode === 'client'\n ? processedTreeRoots.slice(\n (pageInfo.page - 1) * pageSize,\n pageInfo.page * pageSize,\n )\n : processedTreeRoots,\n ),\n [processedTreeRoots, paginationMode, pageInfo.page, pageSize],\n );\n\n const treeState = useTableTreeState<T>({\n roots: pageTreeRoots,\n allNodesByKey: treeModel?.byKey ?? new Map(),\n expandedKeys,\n defaultExpandedKeys,\n getTextValue: (node) => {\n const column = orderedColumns.find(\n (entry) => entry.key === resolvedTreeColumnKey,\n );\n return column\n ? getColumnText(column, node.row, node.sourceIndex) ?? String(node.key)\n : String(node.key);\n },\n onExpand,\n ariaLabel,\n });\n\n const visibleTreeEntries = treeModel ? treeState.visibleEntries : [];\n const visibleRows = treeModel\n ? visibleTreeEntries.map((entry) => entry.row)\n : flatVisibleRows;\n const visibleRowKeys = treeModel\n ? visibleTreeEntries.map((entry) => entry.key)\n : undefined;\n\n const [ownColumnWidths, setOwnColumnWidths] = useState<\n Record<string, number>\n >(\n () =>\n (columnWidthsProp === undefined && storage.has('columnWidths')\n ? storage.initial.columnWidths ?? defaultColumnWidths\n : defaultColumnWidths) ?? EMPTY_WIDTHS,\n );\n const [draftColumnWidths, setDraftColumnWidths] = useState<Record<\n string,\n number\n > | null>(null);\n const draftRef = useRef<Record<string, number> | null>(null);\n\n const baseColumnWidths = columnWidthsProp ?? ownColumnWidths;\n const columnWidths = draftColumnWidths ?? baseColumnWidths;\n\n /**\n * The resolved widths, for the freeze below. A ref because `layout` is\n * computed *after* this handler is defined, and `useEvent` only reads it when\n * the drag actually runs.\n */\n const layoutRef = useRef<CubeTableColumnLayout<T> | null>(null);\n\n const handleColumnResize = useEvent((key: string, width: number) => {\n // First move of a drag freezes every column, so this changes exactly one\n // width instead of re-splitting the flex pool. See `freezeColumnWidths`.\n const base =\n draftRef.current ??\n freezeColumnWidths(layoutRef.current, baseColumnWidths);\n\n draftRef.current = { ...base, [key]: Math.round(width) };\n setDraftColumnWidths(draftRef.current);\n });\n\n const handleColumnResizeEnd = useEvent((key: string) => {\n const next = draftRef.current ?? baseColumnWidths;\n\n if (columnWidthsProp === undefined) {\n setOwnColumnWidths(next);\n storage.write({ columnWidths: next });\n }\n\n onColumnResize?.(key, next[key], next);\n draftRef.current = null;\n setDraftColumnWidths(null);\n });\n\n const leadingColumns = useMemo(\n () =>\n showRowNumbers\n ? [{ key: ROW_NUMBER_COLUMN_KEY, width: ROW_NUMBER_WIDTH }]\n : undefined,\n [showRowNumbers],\n );\n\n const layout = useTableColumns<T>({\n columns: orderedColumns,\n containerWidth,\n columnWidths,\n leadingColumns,\n });\n\n layoutRef.current = layout;\n\n const { t } = useI18n();\n\n // Every row a range can reach, in the order they appear on screen. Pinned rows\n // are in it: a total is a figure like any other, and having to copy it\n // separately from the column it sums is the wrong trade.\n //\n // The keys are built here rather than inside the hook so they cannot disagree\n // with the ones the renderer stamps — a pinned row is keyed by its own index\n // within its group, exactly as `renderPinnedRow` keys it.\n const selectionRows = useMemo(\n () => [\n ...(pinnedTopRows ?? []),\n ...visibleRows,\n ...(pinnedBottomRows ?? []),\n ],\n [pinnedTopRows, visibleRows, pinnedBottomRows],\n );\n const selectionRowKeys = useMemo(\n () => [\n // Section-qualified, matching what the renderer stamps: the same record\n // is routinely pinned at both edges, and one flat key space collapsed the\n // two into whichever came first.\n ...(pinnedTopRows ?? []).map((row, index) =>\n selectionRowKey('pinnedTop', resolvedGetRowKey(row, index)),\n ),\n ...visibleRows.map(\n (row, index) =>\n visibleRowKeys?.[index] ?? resolvedGetRowKey(row, index),\n ),\n ...(pinnedBottomRows ?? []).map((row, index) =>\n selectionRowKey('pinnedBottom', resolvedGetRowKey(row, index)),\n ),\n ],\n [\n pinnedTopRows,\n visibleRows,\n visibleRowKeys,\n pinnedBottomRows,\n resolvedGetRowKey,\n ],\n );\n\n // The hook works in one flat row order; the section a row belongs to is a\n // property of where it sits in that order, so it is resolved here rather than\n // asking the consumer to track it.\n const resolveCellSelectable = useEvent(\n (row: T, rowKey: Key, columnKey: string) => {\n if (!isCellSelectable) return true;\n\n const index = selectionRowKeys.indexOf(rowKey);\n const topCount = pinnedTopRows?.length ?? 0;\n const section: CubeTableRowSection =\n index < topCount\n ? 'pinnedTop'\n : index < topCount + visibleRows.length\n ? 'body'\n : 'pinnedBottom';\n\n return isCellSelectable({ row, rowKey, columnKey, section });\n },\n );\n\n const cellSelection = useCellSelection<T>({\n mode: cellSelectionMode,\n columns: layout.columns,\n rows: selectionRows,\n rowKeys: selectionRowKeys,\n isCellSelectable: isCellSelectable ? resolveCellSelectable : undefined,\n range: selectedCellRange,\n defaultRange: defaultSelectedCellRange,\n onRangeChange: onCellRangeChange,\n });\n\n const rootStyles = { ...extractStyles(props, CONTAINER_STYLES), ...styles };\n\n const smallestPageSize = pageSizeOptions?.length\n ? Math.min(...pageSizeOptions)\n : pageSize;\n\n const showPagination =\n isPaginated &&\n !(\n autoHidePagination &&\n !hasNextPage &&\n pageInfo.totalPages <= 1 &&\n total <= smallestPageSize\n );\n\n const hasFooter =\n showPagination ||\n footerStart != null ||\n footerCenter != null ||\n footerEnd != null;\n\n /* ── column reordering ────────────────────────────────────────────────── */\n\n useWarn(isColumnReorderable && hasColumnGroups, {\n key: ['data-table-grouped-column-reorder'],\n args: [\n 'DataTable:',\n '`isColumnReorderable` is ignored when columns contain header groups.',\n ],\n });\n\n const canReorderColumns = isColumnReorderable && !hasColumnGroups;\n\n const headRowRef = useRef<HTMLTableRowElement>(null);\n const draggableColumnKeys = useMemo(\n () => getDraggableColumnKeys(layout.columns, canReorderColumns),\n [layout.columns, canReorderColumns],\n );\n const columnCollection = useMemo(\n () =>\n new RowCollection(\n layout.columns.filter((column) =>\n isColumnDraggable(column, canReorderColumns),\n ),\n (column) => column.key,\n new Set(),\n // The drag announcements read this — otherwise a screen reader hears\n // \"Insert between and \".\n (column) =>\n typeof column.title === 'string' ? column.title : column.key,\n ),\n [layout.columns, canReorderColumns],\n );\n /**\n * `'single'`, not `'none'`.\n *\n * `useDraggableItem` only deletes its own `onClick` — the one that would\n * hijack a screen-reader click away from the sort — when the selection mode is\n * not `'none'`, and only then does it attach the keyboard drag description.\n * Nothing is ever actually selected here.\n */\n const columnSelectionState = useMultipleSelectionState({\n selectionMode: 'single',\n disabledBehavior: 'all',\n });\n const columnSelectionManager = useMemo(\n () => new SelectionManager(columnCollection, columnSelectionState),\n [columnCollection, columnSelectionState],\n );\n const handleColumnFocus = useEvent((columnKey: string | null) => {\n columnSelectionManager.setFocusedKey(columnKey);\n });\n\n // One draggable column cannot be reordered, so the machinery stays unmounted\n // and the header keeps its exact DOM.\n const isColumnDragEnabled =\n canReorderColumns && draggableColumnKeys.length > 1;\n\n const treeRowNumberOffset = treeModel\n ? paginationMode === 'client'\n ? flattenTableTree(\n processedTreeRoots.slice(0, (pageInfo.page - 1) * pageSize),\n treeState.expandedKeys,\n ).length\n : 0\n : null;\n\n const renderTable = (\n columnDragState?: any,\n columnDropState?: any,\n headCollectionProps?: Record<string, any>,\n ) => (\n <TableView<T>\n {...rest}\n rootRef={rootRef}\n qa={qa || 'DataTable'}\n rows={visibleRows}\n rowKeys={visibleRowKeys}\n pinnedTopRows={pinnedTopRows}\n pinnedBottomRows={pinnedBottomRows}\n // Continuous across pages: row 101 is row 101, not row 1 of page two.\n //\n // Server mode counts too — the page and its size are known there just the\n // same, and `rows` is that page. Only `'off'` starts at 1, because then\n // there is no page to be on.\n rowNumberOffset={\n treeRowNumberOffset ??\n (paginationMode === 'off' ? 0 : (pageInfo.page - 1) * pageSize)\n }\n // The same offset drives `aria-rowindex`, which is document-absolute by\n // contract — a screen reader on page 3 should hear \"row 51 of 240\", not\n // \"row 1 of 25\".\n rowIndexOffset={\n treeModel\n ? 0\n : paginationMode === 'off'\n ? 0\n : (pageInfo.page - 1) * pageSize\n }\n totalRowCount={treeModel ? visibleRows.length : total}\n layout={layout}\n columnHeaderPaths={columnModel.headerPaths}\n // Always on, unlike `ItemTable`. A result grid is read down a column, and\n // once the values are wide and right-aligned the rule is what keeps a\n // figure attached to its column — which is why Cloud's ag-grid theme sets\n // `columnBorder` for `DataTable` and not for the list grids.\n hasColumnDividers\n cellSelection={cellSelection}\n getRowKey={resolvedGetRowKey}\n onScrollerRef={setScrollerEl}\n isLoading={isLoading}\n loadingIndicator={loadingIndicator}\n skeletonRowCount={skeletonRowCount}\n error={error}\n // Same localized fallbacks as `ItemTable`: a grid that has finished\n // loading and shows an unexplained blank rectangle reads as broken.\n emptyLabel={emptyLabel ?? t('itemTable.noItems', 'No items')}\n noResultsLabel={\n noResultsLabel ?? t('itemTable.noResults', 'No results found')\n }\n isFiltered={isFiltered}\n shape={shape}\n size={size}\n rowSize={rowSize}\n rowHeight={rowHeight}\n headerHeight={headerHeight}\n isStriped={isStriped}\n isRowMoveAnimated={isRowMoveAnimated}\n isHeaderHidden={isHeaderHidden}\n isHeaderSticky={isHeaderSticky}\n isAutoHeight={isAutoHeight}\n // The header shows the column name at body size — a result grid has no\n // room for the uppercase caption a list header uses.\n // `t4` throughout: a result grid is read as a block, and one step down\n // from the list preset fits noticeably more on screen without losing\n // legibility. The header takes the medium weight of the same step.\n contentPreset=\"t4\"\n headerPreset=\"t4m\"\n sortMode={treeSortMode}\n sorts={sorts}\n onColumnSort={toggleSort}\n onColumnSortChange={setColumnSort}\n columnContextMenu={columnContextMenu}\n onColumnMenuAction={onColumnMenuAction}\n columnMenuTriggerProps={columnMenuTriggerProps}\n columnMenuProps={columnMenuProps}\n isVirtualized={isVirtualized}\n virtualizeThreshold={virtualizeThreshold}\n overscan={overscan}\n isResizable={isResizable}\n onColumnResize={handleColumnResize}\n onColumnResizeEnd={handleColumnResizeEnd}\n getRowProps={getRowProps}\n ariaLabel={ariaLabel}\n styles={rootStyles}\n headerStyles={headerStyles}\n headerCellStyles={headerCellStyles}\n bodyStyles={bodyStyles}\n rowStyles={rowStyles}\n cellStyles={cellStyles}\n mods={mods}\n isColumnReorderable={isColumnDragEnabled}\n columnDragState={columnDragState}\n columnDropState={columnDropState}\n headCollectionProps={headCollectionProps}\n headRowRef={headRowRef}\n onColumnFocus={handleColumnFocus}\n tree={\n treeModel\n ? {\n state: treeState.state,\n ariaProps: treeState.ariaProps,\n nodes: treeState.visibleNodes,\n entries: visibleTreeEntries,\n columnKey: resolvedTreeColumnKey!,\n }\n : undefined\n }\n footer={\n hasFooter ? (\n <ItemTableFooter\n start={footerStart}\n center={footerCenter}\n end={footerEnd}\n styles={footerStyles}\n pagination={\n showPagination\n ? {\n page: pageInfo.page,\n pageSize,\n total,\n totalPages: pageInfo.totalPages,\n pageSizeOptions,\n summary,\n hasNextPage,\n onPageChange: setPage,\n onPageSizeChange: setPageSize,\n }\n : undefined\n }\n />\n ) : null\n }\n />\n );\n\n return isColumnDragEnabled ? (\n <DraggableCollection\n state={{\n collection: columnCollection as any,\n selectionManager: columnSelectionManager as any,\n disabledKeys: new Set(),\n }}\n // The element that DIRECTLY contains the header cells. React Aria's\n // `ListDropTargetDelegate` resolves a drop by measuring `[data-key]`\n // descendants of this element, so pointing it anywhere else leaves every\n // drop unresolvable — the column lifts but never lands.\n listRef={headRowRef}\n orderedKeys={draggableColumnKeys}\n orientation=\"horizontal\"\n onReorder={columnOrderState.reorder}\n >\n {(dragState, dropState, collectionProps) =>\n renderTable(dragState, dropState, collectionProps)\n }\n </DraggableCollection>\n ) : (\n renderTable()\n );\n}\n\nconst _DataTable = forwardRef(DataTable) as unknown as (<T = any>(\n props: CubeDataTableProps<T> & { ref?: ForwardedRef<HTMLDivElement> },\n) => ReactElement) & { displayName?: string };\n\n_DataTable.displayName = 'DataTable';\n\nexport { _DataTable as DataTable };\n"],"mappings":"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B;EAEpD;EACL;EACD;EACG;EACE;EACG;EACH;EACQ;EACH;EACA;EACF;EAMd,eAAc;EACd,cAAa;EACb,UAAU;EACH;EACP,cAAc;EACd,oBAAoB;EACD;EACC;EACI;EACP;EACF;EACM;EACX;EACG;EACb,gBAAgB;EAChB,mBAAmB;EACN;EACF;EACX,QAAQ;EACM;EACI;EACN;EACD;EACC;EACN;EACN,qBAAqB;EACJ;EACA;EACI;EACT;EACZ,eAAe;EACf,MACE,YACI;GACE,OAAO,UAAU;GACjB,WAAW,UAAU;GACrB,OAAO,UAAU;GACjB,SAAS;GACT,WAAW;GACZ,GACD;EAEN,QACE,YACE,oBAAC;GACC,OAAO;GACP,QAAQ;GACR,KAAK;GACL,QAAQ;GACR,YACE,iBACI;IACE,MAAM,SAAS;IACf;IACA;IACA,YAAY,SAAS;IACrB;IACA;IACA;IACA,cAAc;IACd,kBAAkB;IACnB,GACD;IAEN,GACA;GAEN;AAGJ,QAAO,sBACL,oBAAC;EACC,OAAO;GACL,YAAY;GACZ,kBAAkB;GAClB,8BAAc,IAAI,KAAK;GACxB;EAKD,SAAS;EACT,aAAa;EACb,aAAY;EACZ,WAAW,iBAAiB;aAE1B,WAAW,WAAW,oBACtB,YAAY,WAAW,WAAW,gBAAgB;GAEhC,GAEtB,aAAa;;AAIjB,MAAM,aAAa,WAAW,UAAU;AAIxC,WAAW,cAAc"}
|
|
@@ -3,7 +3,7 @@ import { SizeName } from "../../../tokens/sizes.js";
|
|
|
3
3
|
import { CubeTablePageInfo } from "../../navigation/Pagination/types.js";
|
|
4
4
|
import "../../navigation/Pagination/index.js";
|
|
5
5
|
import "../../../tokens/index.js";
|
|
6
|
-
import { CubeTableCellRange, CubeTableColumn, CubeTableLoadingIndicator, CubeTableRowContext, CubeTableRowSection, CubeTableRowSize, CubeTableSort } from "../TableBase/types.js";
|
|
6
|
+
import { CubeTableCellRange, CubeTableColumn, CubeTableLayoutProps, CubeTableLoadingIndicator, CubeTableRowContext, CubeTableRowSection, CubeTableRowSize, CubeTableSort, CubeTableTreeProps } from "../TableBase/types.js";
|
|
7
7
|
import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
|
|
8
8
|
import { ReactNode } from "react";
|
|
9
9
|
import { Key as Key$1 } from "@react-types/shared";
|
|
@@ -23,9 +23,23 @@ interface CubeDataTableColumn<T = any> extends CubeTableColumn<T> {
|
|
|
23
23
|
*/
|
|
24
24
|
dataType?: 'string' | 'number' | 'boolean' | 'date' | 'unknown';
|
|
25
25
|
}
|
|
26
|
-
|
|
26
|
+
/**
|
|
27
|
+
* A header band spanning one or more DataTable columns.
|
|
28
|
+
*
|
|
29
|
+
* Groups are presentational: sorting, resizing, selection and the value
|
|
30
|
+
* pipeline continue to operate on the leaf columns in `children`.
|
|
31
|
+
*/
|
|
32
|
+
interface CubeDataTableColumnGroup<T = any> {
|
|
33
|
+
/** Stable identity within the column tree. */
|
|
34
|
+
key: string;
|
|
35
|
+
title?: ReactNode;
|
|
36
|
+
children: CubeDataTableColumnDefinition<T>[];
|
|
37
|
+
}
|
|
38
|
+
/** A leaf column or a nested header group. */
|
|
39
|
+
type CubeDataTableColumnDefinition<T = any> = CubeDataTableColumn<T> | CubeDataTableColumnGroup<T>;
|
|
40
|
+
interface CubeDataTableProps<T = any> extends BaseProps, ContainerStyleProps, CubeTableLayoutProps, CubeTableTreeProps<T> {
|
|
27
41
|
data: readonly T[];
|
|
28
|
-
columns:
|
|
42
|
+
columns: CubeDataTableColumnDefinition<T>[];
|
|
29
43
|
rowKey?: string;
|
|
30
44
|
getRowKey?: (row: T, index: number) => Key$1;
|
|
31
45
|
/**
|
|
@@ -59,6 +73,7 @@ interface CubeDataTableProps<T = any> extends BaseProps, ContainerStyleProps {
|
|
|
59
73
|
rowSize?: CubeTableRowSize;
|
|
60
74
|
/** An exact height in px, when none of the named steps is the answer. */
|
|
61
75
|
rowHeight?: number;
|
|
76
|
+
/** Exact height of each header row in px. */
|
|
62
77
|
headerHeight?: number;
|
|
63
78
|
/** @default true — banding is what makes a wide row readable across. */
|
|
64
79
|
isStriped?: boolean;
|
|
@@ -196,5 +211,5 @@ interface CubeDataTableProps<T = any> extends BaseProps, ContainerStyleProps {
|
|
|
196
211
|
mods?: Record<string, boolean>;
|
|
197
212
|
}
|
|
198
213
|
//#endregion
|
|
199
|
-
export { CubeDataTableColumn, CubeDataTableProps };
|
|
214
|
+
export { CubeDataTableColumn, CubeDataTableColumnDefinition, CubeDataTableColumnGroup, CubeDataTableProps };
|
|
200
215
|
//# sourceMappingURL=types.d.ts.map
|