@navikt/ds-react 8.9.0 → 8.10.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/cjs/alert/base-alert/content/BaseAlertContent.js +4 -1
- package/cjs/alert/base-alert/content/BaseAlertContent.js.map +1 -1
- package/cjs/data/drag-and-drop/drag-handler/DragAndDropDragHandler.d.ts +3 -0
- package/cjs/data/drag-and-drop/drag-handler/DragAndDropDragHandler.js +41 -20
- package/cjs/data/drag-and-drop/drag-handler/DragAndDropDragHandler.js.map +1 -1
- package/cjs/data/drag-and-drop/item/DragAndDropItem.d.ts +7 -2
- package/cjs/data/drag-and-drop/item/DragAndDropItem.js +6 -8
- package/cjs/data/drag-and-drop/item/DragAndDropItem.js.map +1 -1
- package/cjs/data/drag-and-drop/root/DragAndDrop.context.d.ts +2 -1
- package/cjs/data/drag-and-drop/root/DragAndDrop.context.js.map +1 -1
- package/cjs/data/drag-and-drop/root/DragAndDropRoot.d.ts +7 -30
- package/cjs/data/drag-and-drop/root/DragAndDropRoot.js +124 -65
- package/cjs/data/drag-and-drop/root/DragAndDropRoot.js.map +1 -1
- package/cjs/data/drag-and-drop/types.d.ts +4 -0
- package/cjs/data/table/base-cell/DataTableBaseCell.d.ts +46 -0
- package/cjs/data/table/base-cell/DataTableBaseCell.js +63 -0
- package/cjs/data/table/base-cell/DataTableBaseCell.js.map +1 -0
- package/cjs/data/table/column-header/DataTableColumnHeader.d.ts +32 -0
- package/cjs/data/table/column-header/DataTableColumnHeader.js +108 -0
- package/cjs/data/table/column-header/DataTableColumnHeader.js.map +1 -0
- package/cjs/data/table/column-header/useTableColumnResize.js.map +1 -0
- package/cjs/data/table/empty-state/DataTableEmptyState.d.ts +6 -2
- package/cjs/data/table/empty-state/DataTableEmptyState.js +2 -2
- package/cjs/data/table/empty-state/DataTableEmptyState.js.map +1 -1
- package/cjs/data/table/helpers/selection/getMultipleSelectProps.d.ts +10 -10
- package/cjs/data/table/helpers/selection/getMultipleSelectProps.js +29 -28
- package/cjs/data/table/helpers/selection/getMultipleSelectProps.js.map +1 -1
- package/cjs/data/table/helpers/selection/getSingleSelectProps.d.ts +7 -5
- package/cjs/data/table/helpers/selection/getSingleSelectProps.js +8 -9
- package/cjs/data/table/helpers/selection/getSingleSelectProps.js.map +1 -1
- package/cjs/data/table/helpers/selection/selection.types.d.ts +44 -21
- package/cjs/data/table/hooks/useColumnOptions.d.ts +19 -0
- package/cjs/data/table/hooks/useColumnOptions.js +19 -0
- package/cjs/data/table/hooks/useColumnOptions.js.map +1 -0
- package/cjs/data/table/hooks/useTableExpansion.d.ts +26 -0
- package/cjs/data/table/hooks/useTableExpansion.js +68 -0
- package/cjs/data/table/hooks/useTableExpansion.js.map +1 -0
- package/cjs/data/table/hooks/useTableKeyboardNav.d.ts +2 -1
- package/cjs/data/table/hooks/useTableKeyboardNav.js +3 -1
- package/cjs/data/table/hooks/useTableKeyboardNav.js.map +1 -1
- package/cjs/data/table/hooks/useTableSelection.d.ts +14 -7
- package/cjs/data/table/hooks/useTableSelection.js +40 -27
- package/cjs/data/table/hooks/useTableSelection.js.map +1 -1
- package/cjs/data/table/hooks/useTableSort.d.ts +37 -0
- package/cjs/data/table/hooks/useTableSort.js +49 -0
- package/cjs/data/table/hooks/useTableSort.js.map +1 -0
- package/cjs/data/table/loading-state/DataTableLoadingState.d.ts +6 -2
- package/cjs/data/table/loading-state/DataTableLoadingState.js +2 -2
- package/cjs/data/table/loading-state/DataTableLoadingState.js.map +1 -1
- package/cjs/data/table/root/DataTable.types.d.ts +55 -4
- package/cjs/data/table/root/DataTableAuto.d.ts +97 -1
- package/cjs/data/table/root/DataTableAuto.js +92 -41
- package/cjs/data/table/root/DataTableAuto.js.map +1 -1
- package/cjs/data/table/root/DataTableRoot.context.d.ts +22 -1
- package/cjs/data/table/root/DataTableRoot.context.js +7 -1
- package/cjs/data/table/root/DataTableRoot.context.js.map +1 -1
- package/cjs/data/table/root/DataTableRoot.d.ts +0 -6
- package/cjs/data/table/root/DataTableRoot.js +5 -4
- package/cjs/data/table/root/DataTableRoot.js.map +1 -1
- package/cjs/data/table/tbody/DataTableTbody.js +7 -1
- package/cjs/data/table/tbody/DataTableTbody.js.map +1 -1
- package/cjs/data/table/td/DataTableTd.d.ts +3 -19
- package/cjs/data/table/td/DataTableTd.js +3 -5
- package/cjs/data/table/td/DataTableTd.js.map +1 -1
- package/cjs/data/table/tfoot/DataTableTfoot.js +3 -1
- package/cjs/data/table/tfoot/DataTableTfoot.js.map +1 -1
- package/cjs/data/table/th/DataTableTh.d.ts +3 -44
- package/cjs/data/table/th/DataTableTh.js +3 -54
- package/cjs/data/table/th/DataTableTh.js.map +1 -1
- package/cjs/data/table/thead/DataTableThead.js +2 -2
- package/cjs/data/table/thead/DataTableThead.js.map +1 -1
- package/cjs/data/table/tr/DataTableTr.d.ts +8 -0
- package/cjs/data/table/tr/DataTableTr.js +131 -9
- package/cjs/data/table/tr/DataTableTr.js.map +1 -1
- package/cjs/data/token-filter/FilterChip.d.ts +10 -0
- package/cjs/data/token-filter/FilterChip.js +65 -0
- package/cjs/data/token-filter/FilterChip.js.map +1 -0
- package/cjs/data/token-filter/TokenFilter.js +3 -10
- package/cjs/data/token-filter/TokenFilter.js.map +1 -1
- package/cjs/date/datepicker/hooks/useRangeDatepicker.js +1 -1
- package/cjs/date/datepicker/hooks/useRangeDatepicker.js.map +1 -1
- package/cjs/date/datepicker/parts/DatePicker.DayButton.js +3 -1
- package/cjs/date/datepicker/parts/DatePicker.DayButton.js.map +1 -1
- package/cjs/date/datepicker/parts/DatePicker.RDP.d.ts +1 -1
- package/cjs/date/datepicker/parts/DatePicker.RDP.js +26 -11
- package/cjs/date/datepicker/parts/DatePicker.RDP.js.map +1 -1
- package/cjs/date/monthpicker/parts/MonthPicker.Button.js +7 -5
- package/cjs/date/monthpicker/parts/MonthPicker.Button.js.map +1 -1
- package/cjs/date/monthpicker/parts/MonthPicker.Standalone.d.ts +1 -1
- package/cjs/dialog/popup/DialogPopupInternal.js +1 -1
- package/cjs/dialog/popup/DialogPopupInternal.js.map +1 -1
- package/cjs/form/checkbox/Checkbox.js +19 -33
- package/cjs/form/checkbox/Checkbox.js.map +1 -1
- package/cjs/form/checkbox/CheckboxGroup.context.d.ts +6 -0
- package/cjs/form/checkbox/CheckboxGroup.context.js +6 -0
- package/cjs/form/checkbox/CheckboxGroup.context.js.map +1 -0
- package/cjs/form/checkbox/CheckboxGroup.d.ts +0 -6
- package/cjs/form/checkbox/CheckboxGroup.js +8 -8
- package/cjs/form/checkbox/CheckboxGroup.js.map +1 -1
- package/cjs/form/checkbox/checkbox-input/CheckboxInput.d.ts +21 -0
- package/cjs/form/checkbox/checkbox-input/CheckboxInput.js +65 -0
- package/cjs/form/checkbox/checkbox-input/CheckboxInput.js.map +1 -0
- package/cjs/form/checkbox/types.d.ts +1 -1
- package/cjs/form/checkbox/useCheckbox.js +2 -2
- package/cjs/form/checkbox/useCheckbox.js.map +1 -1
- package/cjs/form/combobox/ComboboxWrapper.js +1 -3
- package/cjs/form/combobox/ComboboxWrapper.js.map +1 -1
- package/cjs/form/error-summary/ErrorSummary.js +1 -3
- package/cjs/form/error-summary/ErrorSummary.js.map +1 -1
- package/cjs/form/fieldset/Fieldset.d.ts +0 -4
- package/cjs/form/fieldset/Fieldset.js +5 -9
- package/cjs/form/fieldset/Fieldset.js.map +1 -1
- package/cjs/form/fieldset/useFieldset.d.ts +5 -3
- package/cjs/form/fieldset/useFieldset.js +9 -4
- package/cjs/form/fieldset/useFieldset.js.map +1 -1
- package/cjs/form/radio/Radio.js +9 -7
- package/cjs/form/radio/Radio.js.map +1 -1
- package/cjs/form/radio/RadioGroup.context.d.ts +8 -0
- package/cjs/form/radio/RadioGroup.context.js +6 -0
- package/cjs/form/radio/RadioGroup.context.js.map +1 -0
- package/cjs/form/radio/RadioGroup.d.ts +0 -8
- package/cjs/form/radio/RadioGroup.js +10 -10
- package/cjs/form/radio/RadioGroup.js.map +1 -1
- package/cjs/form/radio/radio-input/RadioInput.d.ts +19 -0
- package/cjs/{data/table/thead/DataTableThead.context.js → form/radio/radio-input/RadioInput.js} +19 -9
- package/cjs/form/radio/radio-input/RadioInput.js.map +1 -0
- package/cjs/form/radio/useRadio.js +2 -2
- package/cjs/form/radio/useRadio.js.map +1 -1
- package/cjs/form/search/Search.js +1 -3
- package/cjs/form/search/Search.js.map +1 -1
- package/cjs/inline-message/root/InlineMessage.js +2 -5
- package/cjs/inline-message/root/InlineMessage.js.map +1 -1
- package/cjs/modal/Modal.js +1 -3
- package/cjs/modal/Modal.js.map +1 -1
- package/cjs/modal/ModalUtils.js +1 -1
- package/cjs/modal/ModalUtils.js.map +1 -1
- package/cjs/primitives/box/Box.d.ts +1 -1
- package/cjs/process/Process.js +1 -5
- package/cjs/process/Process.js.map +1 -1
- package/cjs/tabs/useTabs.js +3 -7
- package/cjs/tabs/useTabs.js.map +1 -1
- package/cjs/timeline/Timeline.js +25 -62
- package/cjs/timeline/Timeline.js.map +1 -1
- package/cjs/timeline/TimelineRow.js +10 -14
- package/cjs/timeline/TimelineRow.js.map +1 -1
- package/cjs/timeline/hooks/TimelineKeyboardNavProvider.d.ts +16 -0
- package/cjs/timeline/hooks/TimelineKeyboardNavProvider.js +179 -0
- package/cjs/timeline/hooks/TimelineKeyboardNavProvider.js.map +1 -0
- package/cjs/timeline/hooks/usePeriodContext.d.ts +0 -1
- package/cjs/timeline/hooks/usePeriodContext.js +0 -1
- package/cjs/timeline/hooks/usePeriodContext.js.map +1 -1
- package/cjs/timeline/hooks/useRowContext.d.ts +0 -1
- package/cjs/timeline/hooks/useRowContext.js +0 -1
- package/cjs/timeline/hooks/useRowContext.js.map +1 -1
- package/cjs/timeline/hooks/useTimelineContext.d.ts +0 -4
- package/cjs/timeline/hooks/useTimelineContext.js +0 -4
- package/cjs/timeline/hooks/useTimelineContext.js.map +1 -1
- package/cjs/timeline/period/ClickablePeriod.js +6 -20
- package/cjs/timeline/period/ClickablePeriod.js.map +1 -1
- package/cjs/timeline/period/NonClickablePeriod.js +1 -1
- package/cjs/timeline/period/NonClickablePeriod.js.map +1 -1
- package/cjs/timeline/pin/PinInternal.js +9 -10
- package/cjs/timeline/pin/PinInternal.js.map +1 -1
- package/cjs/toggle-group/useToggleGroup.js +1 -1
- package/cjs/toggle-group/useToggleGroup.js.map +1 -1
- package/cjs/utils/components/HighlightText/HighlightText.js +1 -4
- package/cjs/utils/components/HighlightText/HighlightText.js.map +1 -1
- package/cjs/utils/components/dismissablelayer/DismissableLayer.js +1 -1
- package/cjs/utils/components/dismissablelayer/DismissableLayer.js.map +1 -1
- package/cjs/utils/helpers/create-strict-context.js +1 -1
- package/cjs/utils/helpers/create-strict-context.js.map +1 -1
- package/cjs/utils/hooks/useEventCallback.js +1 -1
- package/cjs/utils/hooks/useEventCallback.js.map +1 -1
- package/cjs/utils/hooks/useMedia.js +1 -1
- package/cjs/utils/hooks/useMedia.js.map +1 -1
- package/esm/alert/base-alert/content/BaseAlertContent.js +4 -1
- package/esm/alert/base-alert/content/BaseAlertContent.js.map +1 -1
- package/esm/data/drag-and-drop/drag-handler/DragAndDropDragHandler.d.ts +3 -0
- package/esm/data/drag-and-drop/drag-handler/DragAndDropDragHandler.js +41 -20
- package/esm/data/drag-and-drop/drag-handler/DragAndDropDragHandler.js.map +1 -1
- package/esm/data/drag-and-drop/item/DragAndDropItem.d.ts +7 -2
- package/esm/data/drag-and-drop/item/DragAndDropItem.js +6 -8
- package/esm/data/drag-and-drop/item/DragAndDropItem.js.map +1 -1
- package/esm/data/drag-and-drop/root/DragAndDrop.context.d.ts +2 -1
- package/esm/data/drag-and-drop/root/DragAndDrop.context.js.map +1 -1
- package/esm/data/drag-and-drop/root/DragAndDropRoot.d.ts +7 -30
- package/esm/data/drag-and-drop/root/DragAndDropRoot.js +125 -66
- package/esm/data/drag-and-drop/root/DragAndDropRoot.js.map +1 -1
- package/esm/data/drag-and-drop/types.d.ts +4 -0
- package/esm/data/table/base-cell/DataTableBaseCell.d.ts +46 -0
- package/esm/data/table/base-cell/DataTableBaseCell.js +27 -0
- package/esm/data/table/base-cell/DataTableBaseCell.js.map +1 -0
- package/esm/data/table/column-header/DataTableColumnHeader.d.ts +32 -0
- package/esm/data/table/column-header/DataTableColumnHeader.js +72 -0
- package/esm/data/table/column-header/DataTableColumnHeader.js.map +1 -0
- package/esm/data/table/column-header/useTableColumnResize.js.map +1 -0
- package/esm/data/table/empty-state/DataTableEmptyState.d.ts +6 -2
- package/esm/data/table/empty-state/DataTableEmptyState.js +2 -2
- package/esm/data/table/empty-state/DataTableEmptyState.js.map +1 -1
- package/esm/data/table/helpers/selection/getMultipleSelectProps.d.ts +10 -10
- package/esm/data/table/helpers/selection/getMultipleSelectProps.js +29 -28
- package/esm/data/table/helpers/selection/getMultipleSelectProps.js.map +1 -1
- package/esm/data/table/helpers/selection/getSingleSelectProps.d.ts +7 -5
- package/esm/data/table/helpers/selection/getSingleSelectProps.js +8 -9
- package/esm/data/table/helpers/selection/getSingleSelectProps.js.map +1 -1
- package/esm/data/table/helpers/selection/selection.types.d.ts +44 -21
- package/esm/data/table/hooks/useColumnOptions.d.ts +19 -0
- package/esm/data/table/hooks/useColumnOptions.js +17 -0
- package/esm/data/table/hooks/useColumnOptions.js.map +1 -0
- package/esm/data/table/hooks/useTableExpansion.d.ts +26 -0
- package/esm/data/table/hooks/useTableExpansion.js +31 -0
- package/esm/data/table/hooks/useTableExpansion.js.map +1 -0
- package/esm/data/table/hooks/useTableKeyboardNav.d.ts +2 -1
- package/esm/data/table/hooks/useTableKeyboardNav.js +4 -2
- package/esm/data/table/hooks/useTableKeyboardNav.js.map +1 -1
- package/esm/data/table/hooks/useTableSelection.d.ts +14 -7
- package/esm/data/table/hooks/useTableSelection.js +40 -29
- package/esm/data/table/hooks/useTableSelection.js.map +1 -1
- package/esm/data/table/hooks/useTableSort.d.ts +37 -0
- package/esm/data/table/hooks/useTableSort.js +47 -0
- package/esm/data/table/hooks/useTableSort.js.map +1 -0
- package/esm/data/table/loading-state/DataTableLoadingState.d.ts +6 -2
- package/esm/data/table/loading-state/DataTableLoadingState.js +2 -2
- package/esm/data/table/loading-state/DataTableLoadingState.js.map +1 -1
- package/esm/data/table/root/DataTable.types.d.ts +55 -4
- package/esm/data/table/root/DataTableAuto.d.ts +97 -1
- package/esm/data/table/root/DataTableAuto.js +94 -43
- package/esm/data/table/root/DataTableAuto.js.map +1 -1
- package/esm/data/table/root/DataTableRoot.context.d.ts +22 -1
- package/esm/data/table/root/DataTableRoot.context.js +5 -1
- package/esm/data/table/root/DataTableRoot.context.js.map +1 -1
- package/esm/data/table/root/DataTableRoot.d.ts +0 -6
- package/esm/data/table/root/DataTableRoot.js +6 -5
- package/esm/data/table/root/DataTableRoot.js.map +1 -1
- package/esm/data/table/tbody/DataTableTbody.js +8 -2
- package/esm/data/table/tbody/DataTableTbody.js.map +1 -1
- package/esm/data/table/td/DataTableTd.d.ts +3 -19
- package/esm/data/table/td/DataTableTd.js +3 -5
- package/esm/data/table/td/DataTableTd.js.map +1 -1
- package/esm/data/table/tfoot/DataTableTfoot.js +3 -1
- package/esm/data/table/tfoot/DataTableTfoot.js.map +1 -1
- package/esm/data/table/th/DataTableTh.d.ts +3 -44
- package/esm/data/table/th/DataTableTh.js +4 -55
- package/esm/data/table/th/DataTableTh.js.map +1 -1
- package/esm/data/table/thead/DataTableThead.js +2 -2
- package/esm/data/table/thead/DataTableThead.js.map +1 -1
- package/esm/data/table/tr/DataTableTr.d.ts +8 -0
- package/esm/data/table/tr/DataTableTr.js +134 -12
- package/esm/data/table/tr/DataTableTr.js.map +1 -1
- package/esm/data/token-filter/FilterChip.d.ts +10 -0
- package/esm/data/token-filter/FilterChip.js +30 -0
- package/esm/data/token-filter/FilterChip.js.map +1 -0
- package/esm/data/token-filter/TokenFilter.js +3 -10
- package/esm/data/token-filter/TokenFilter.js.map +1 -1
- package/esm/date/datepicker/hooks/useRangeDatepicker.js +1 -1
- package/esm/date/datepicker/hooks/useRangeDatepicker.js.map +1 -1
- package/esm/date/datepicker/parts/DatePicker.DayButton.js +3 -1
- package/esm/date/datepicker/parts/DatePicker.DayButton.js.map +1 -1
- package/esm/date/datepicker/parts/DatePicker.RDP.d.ts +1 -1
- package/esm/date/datepicker/parts/DatePicker.RDP.js +27 -12
- package/esm/date/datepicker/parts/DatePicker.RDP.js.map +1 -1
- package/esm/date/monthpicker/parts/MonthPicker.Button.js +7 -5
- package/esm/date/monthpicker/parts/MonthPicker.Button.js.map +1 -1
- package/esm/date/monthpicker/parts/MonthPicker.Standalone.d.ts +1 -1
- package/esm/dialog/popup/DialogPopupInternal.js +1 -1
- package/esm/dialog/popup/DialogPopupInternal.js.map +1 -1
- package/esm/form/checkbox/Checkbox.js +19 -33
- package/esm/form/checkbox/Checkbox.js.map +1 -1
- package/esm/form/checkbox/CheckboxGroup.context.d.ts +6 -0
- package/esm/form/checkbox/CheckboxGroup.context.js +3 -0
- package/esm/form/checkbox/CheckboxGroup.context.js.map +1 -0
- package/esm/form/checkbox/CheckboxGroup.d.ts +0 -6
- package/esm/form/checkbox/CheckboxGroup.js +8 -8
- package/esm/form/checkbox/CheckboxGroup.js.map +1 -1
- package/esm/form/checkbox/checkbox-input/CheckboxInput.d.ts +21 -0
- package/esm/form/checkbox/checkbox-input/CheckboxInput.js +29 -0
- package/esm/form/checkbox/checkbox-input/CheckboxInput.js.map +1 -0
- package/esm/form/checkbox/types.d.ts +1 -1
- package/esm/form/checkbox/useCheckbox.js +1 -1
- package/esm/form/checkbox/useCheckbox.js.map +1 -1
- package/esm/form/combobox/ComboboxWrapper.js +1 -3
- package/esm/form/combobox/ComboboxWrapper.js.map +1 -1
- package/esm/form/error-summary/ErrorSummary.js +1 -3
- package/esm/form/error-summary/ErrorSummary.js.map +1 -1
- package/esm/form/fieldset/Fieldset.d.ts +0 -4
- package/esm/form/fieldset/Fieldset.js +5 -9
- package/esm/form/fieldset/Fieldset.js.map +1 -1
- package/esm/form/fieldset/useFieldset.d.ts +5 -3
- package/esm/form/fieldset/useFieldset.js +10 -5
- package/esm/form/fieldset/useFieldset.js.map +1 -1
- package/esm/form/radio/Radio.js +9 -7
- package/esm/form/radio/Radio.js.map +1 -1
- package/esm/form/radio/RadioGroup.context.d.ts +8 -0
- package/esm/form/radio/RadioGroup.context.js +3 -0
- package/esm/form/radio/RadioGroup.context.js.map +1 -0
- package/esm/form/radio/RadioGroup.d.ts +0 -8
- package/esm/form/radio/RadioGroup.js +9 -9
- package/esm/form/radio/RadioGroup.js.map +1 -1
- package/esm/form/radio/radio-input/RadioInput.d.ts +19 -0
- package/esm/form/radio/radio-input/RadioInput.js +19 -0
- package/esm/form/radio/radio-input/RadioInput.js.map +1 -0
- package/esm/form/radio/useRadio.js +1 -1
- package/esm/form/radio/useRadio.js.map +1 -1
- package/esm/form/search/Search.js +1 -3
- package/esm/form/search/Search.js.map +1 -1
- package/esm/inline-message/root/InlineMessage.js +2 -5
- package/esm/inline-message/root/InlineMessage.js.map +1 -1
- package/esm/modal/Modal.js +1 -3
- package/esm/modal/Modal.js.map +1 -1
- package/esm/modal/ModalUtils.js +1 -1
- package/esm/modal/ModalUtils.js.map +1 -1
- package/esm/primitives/box/Box.d.ts +1 -1
- package/esm/process/Process.js +1 -5
- package/esm/process/Process.js.map +1 -1
- package/esm/tabs/useTabs.js +3 -7
- package/esm/tabs/useTabs.js.map +1 -1
- package/esm/timeline/Timeline.js +26 -63
- package/esm/timeline/Timeline.js.map +1 -1
- package/esm/timeline/TimelineRow.js +10 -14
- package/esm/timeline/TimelineRow.js.map +1 -1
- package/esm/timeline/hooks/TimelineKeyboardNavProvider.d.ts +16 -0
- package/esm/timeline/hooks/TimelineKeyboardNavProvider.js +141 -0
- package/esm/timeline/hooks/TimelineKeyboardNavProvider.js.map +1 -0
- package/esm/timeline/hooks/usePeriodContext.d.ts +0 -1
- package/esm/timeline/hooks/usePeriodContext.js +0 -1
- package/esm/timeline/hooks/usePeriodContext.js.map +1 -1
- package/esm/timeline/hooks/useRowContext.d.ts +0 -1
- package/esm/timeline/hooks/useRowContext.js +0 -1
- package/esm/timeline/hooks/useRowContext.js.map +1 -1
- package/esm/timeline/hooks/useTimelineContext.d.ts +0 -4
- package/esm/timeline/hooks/useTimelineContext.js +0 -4
- package/esm/timeline/hooks/useTimelineContext.js.map +1 -1
- package/esm/timeline/period/ClickablePeriod.js +7 -21
- package/esm/timeline/period/ClickablePeriod.js.map +1 -1
- package/esm/timeline/period/NonClickablePeriod.js +1 -1
- package/esm/timeline/period/NonClickablePeriod.js.map +1 -1
- package/esm/timeline/pin/PinInternal.js +10 -11
- package/esm/timeline/pin/PinInternal.js.map +1 -1
- package/esm/toggle-group/useToggleGroup.js +1 -1
- package/esm/toggle-group/useToggleGroup.js.map +1 -1
- package/esm/utils/components/HighlightText/HighlightText.js +1 -4
- package/esm/utils/components/HighlightText/HighlightText.js.map +1 -1
- package/esm/utils/components/dismissablelayer/DismissableLayer.js +1 -1
- package/esm/utils/components/dismissablelayer/DismissableLayer.js.map +1 -1
- package/esm/utils/helpers/create-strict-context.js +1 -1
- package/esm/utils/helpers/create-strict-context.js.map +1 -1
- package/esm/utils/hooks/useEventCallback.js +1 -1
- package/esm/utils/hooks/useEventCallback.js.map +1 -1
- package/esm/utils/hooks/useMedia.js +1 -1
- package/esm/utils/hooks/useMedia.js.map +1 -1
- package/package.json +9 -7
- package/src/alert/base-alert/content/BaseAlertContent.tsx +7 -2
- package/src/data/drag-and-drop/drag-handler/DragAndDropDragHandler.tsx +73 -29
- package/src/data/drag-and-drop/item/DragAndDropItem.tsx +28 -18
- package/src/data/drag-and-drop/root/DragAndDrop.context.tsx +4 -2
- package/src/data/drag-and-drop/root/DragAndDropRoot.tsx +303 -209
- package/src/data/drag-and-drop/types.ts +5 -0
- package/src/data/table/base-cell/DataTableBaseCell.tsx +92 -0
- package/src/data/table/column-header/DataTableColumnHeader.tsx +180 -0
- package/src/data/table/empty-state/DataTableEmptyState.tsx +5 -3
- package/src/data/table/helpers/selection/getMultipleSelectProps.ts +49 -45
- package/src/data/table/helpers/selection/getSingleSelectProps.ts +15 -13
- package/src/data/table/helpers/selection/selection.types.ts +46 -21
- package/src/data/table/hooks/__tests__/useTableSelection.test.ts +93 -56
- package/src/data/table/hooks/useColumnOptions.ts +48 -0
- package/src/data/table/hooks/useTableExpansion.tsx +100 -0
- package/src/data/table/hooks/useTableKeyboardNav.ts +7 -5
- package/src/data/table/hooks/useTableSelection.ts +77 -46
- package/src/data/table/hooks/useTableSort.ts +103 -0
- package/src/data/table/loading-state/DataTableLoadingState.tsx +5 -3
- package/src/data/table/root/DataTable.types.ts +64 -5
- package/src/data/table/root/DataTableAuto.tsx +383 -95
- package/src/data/table/root/DataTableRoot.context.ts +30 -1
- package/src/data/table/root/DataTableRoot.tsx +14 -11
- package/src/data/table/tbody/DataTableTbody.tsx +17 -6
- package/src/data/table/td/DataTableTd.tsx +10 -33
- package/src/data/table/tfoot/DataTableTfoot.tsx +10 -7
- package/src/data/table/th/DataTableTh.tsx +11 -172
- package/src/data/table/thead/DataTableThead.tsx +3 -3
- package/src/data/table/tr/DataTableTr.tsx +300 -11
- package/src/data/token-filter/FilterChip.tsx +100 -0
- package/src/data/token-filter/TokenFilter.tsx +8 -24
- package/src/date/datepicker/hooks/useRangeDatepicker.tsx +1 -1
- package/src/date/datepicker/parts/DatePicker.DayButton.tsx +2 -1
- package/src/date/datepicker/parts/DatePicker.RDP.tsx +34 -15
- package/src/date/monthpicker/parts/MonthPicker.Button.tsx +11 -9
- package/src/date/monthpicker/parts/MonthPicker.Standalone.tsx +1 -1
- package/src/dialog/popup/DialogPopupInternal.tsx +1 -1
- package/src/form/checkbox/Checkbox.tsx +37 -64
- package/src/form/checkbox/CheckboxGroup.context.ts +10 -0
- package/src/form/checkbox/CheckboxGroup.tsx +18 -28
- package/src/form/checkbox/checkbox-input/CheckboxInput.tsx +69 -0
- package/src/form/checkbox/types.ts +1 -1
- package/src/form/checkbox/useCheckbox.ts +1 -1
- package/src/form/fieldset/Fieldset.tsx +8 -14
- package/src/form/fieldset/useFieldset.ts +13 -6
- package/src/form/radio/Radio.tsx +43 -38
- package/src/form/radio/RadioGroup.context.ts +13 -0
- package/src/form/radio/RadioGroup.tsx +22 -31
- package/src/form/radio/radio-input/RadioInput.tsx +32 -0
- package/src/form/radio/useRadio.ts +1 -1
- package/src/inline-message/root/InlineMessage.tsx +3 -13
- package/src/modal/ModalUtils.ts +1 -1
- package/src/primitives/box/Box.tsx +1 -1
- package/src/tabs/useTabs.ts +3 -7
- package/src/timeline/Timeline.tsx +62 -91
- package/src/timeline/TimelineRow.tsx +19 -17
- package/src/timeline/hooks/TimelineKeyboardNavProvider.tsx +237 -0
- package/src/timeline/hooks/usePeriodContext.tsx +0 -2
- package/src/timeline/hooks/useRowContext.tsx +0 -2
- package/src/timeline/hooks/useTimelineContext.tsx +0 -8
- package/src/timeline/period/ClickablePeriod.tsx +8 -19
- package/src/timeline/period/NonClickablePeriod.tsx +2 -0
- package/src/timeline/pin/PinInternal.tsx +10 -13
- package/src/toggle-group/useToggleGroup.ts +1 -1
- package/src/utils/components/dismissablelayer/DismissableLayer.tsx +1 -1
- package/src/utils/helpers/create-strict-context.tsx +1 -1
- package/src/utils/hooks/useEventCallback.ts +1 -1
- package/src/utils/hooks/useMedia.ts +1 -1
- package/cjs/data/table/th/DataTableThActions.d.ts +0 -5
- package/cjs/data/table/th/DataTableThActions.js +0 -23
- package/cjs/data/table/th/DataTableThActions.js.map +0 -1
- package/cjs/data/table/th/useTableColumnResize.js.map +0 -1
- package/cjs/data/table/thead/DataTableThead.context.d.ts +0 -4
- package/cjs/data/table/thead/DataTableThead.context.js.map +0 -1
- package/esm/data/table/th/DataTableThActions.d.ts +0 -5
- package/esm/data/table/th/DataTableThActions.js +0 -18
- package/esm/data/table/th/DataTableThActions.js.map +0 -1
- package/esm/data/table/th/useTableColumnResize.js.map +0 -1
- package/esm/data/table/thead/DataTableThead.context.d.ts +0 -4
- package/esm/data/table/thead/DataTableThead.context.js +0 -8
- package/esm/data/table/thead/DataTableThead.context.js.map +0 -1
- package/src/data/table/th/DataTableThActions.tsx +0 -32
- package/src/data/table/thead/DataTableThead.context.ts +0 -10
- /package/cjs/data/table/{th → column-header}/useTableColumnResize.d.ts +0 -0
- /package/cjs/data/table/{th → column-header}/useTableColumnResize.js +0 -0
- /package/esm/data/table/{th → column-header}/useTableColumnResize.d.ts +0 -0
- /package/esm/data/table/{th → column-header}/useTableColumnResize.js +0 -0
- /package/src/data/table/{th → column-header}/useTableColumnResize.ts +0 -0
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
type DataTableExpansionContextT = {
|
|
3
|
+
expandedIds: (string | number)[];
|
|
4
|
+
isExpanded: (id: string | number) => boolean;
|
|
5
|
+
toggleExpansion: (id: string | number) => void;
|
|
6
|
+
toggleAll: () => void;
|
|
7
|
+
isAllExpanded: boolean;
|
|
8
|
+
getDetailsPanelContent?: (row: unknown) => React.ReactNode;
|
|
9
|
+
getDetailsPanelHeight?: (row: unknown) => number | "auto";
|
|
10
|
+
showExpandAll?: boolean;
|
|
11
|
+
enableExpansion: boolean;
|
|
12
|
+
};
|
|
13
|
+
declare const useDataTableExpansion: <S extends boolean = true>(strict?: S | undefined) => S extends true ? DataTableExpansionContextT : DataTableExpansionContextT | undefined;
|
|
14
|
+
type TableExpansionOptions<T> = {
|
|
15
|
+
detailsPanelRowIds?: (string | number)[];
|
|
16
|
+
defaultDetailsPanelRowIds?: (string | number)[];
|
|
17
|
+
onDetailsPanelChange?: (ids: (string | number)[]) => void;
|
|
18
|
+
allRowKeys: (string | number)[];
|
|
19
|
+
getDetailsPanelContent?: (row: T) => React.ReactNode;
|
|
20
|
+
getDetailsPanelHeight?: (row: T) => number | "auto";
|
|
21
|
+
showExpandAll?: boolean;
|
|
22
|
+
};
|
|
23
|
+
declare function DataTableExpansionProvider<T>({ children, detailsPanelRowIds, defaultDetailsPanelRowIds, onDetailsPanelChange, allRowKeys, getDetailsPanelContent, getDetailsPanelHeight, showExpandAll, }: TableExpansionOptions<T> & {
|
|
24
|
+
children: React.ReactNode;
|
|
25
|
+
}): React.JSX.Element;
|
|
26
|
+
export { DataTableExpansionProvider, useDataTableExpansion };
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.useDataTableExpansion = void 0;
|
|
37
|
+
exports.DataTableExpansionProvider = DataTableExpansionProvider;
|
|
38
|
+
const react_1 = __importStar(require("react"));
|
|
39
|
+
const helpers_1 = require("../../../utils/helpers");
|
|
40
|
+
const hooks_1 = require("../../../utils/hooks");
|
|
41
|
+
const { Provider: DataTableExpansionContextProvider, useContext: useDataTableExpansion, } = (0, helpers_1.createStrictContext)({
|
|
42
|
+
name: "DataTableExpansionContext",
|
|
43
|
+
errorMessage: "useDataTableExpansion must be used within a DataTableExpansionProvider.",
|
|
44
|
+
});
|
|
45
|
+
exports.useDataTableExpansion = useDataTableExpansion;
|
|
46
|
+
function DataTableExpansionProvider({ children, detailsPanelRowIds, defaultDetailsPanelRowIds = [], onDetailsPanelChange, allRowKeys, getDetailsPanelContent, getDetailsPanelHeight, showExpandAll = false, }) {
|
|
47
|
+
const [expandedIds, setExpandedIds] = (0, hooks_1.useControllableState)({
|
|
48
|
+
value: detailsPanelRowIds,
|
|
49
|
+
defaultValue: defaultDetailsPanelRowIds,
|
|
50
|
+
});
|
|
51
|
+
const isExpanded = (0, react_1.useCallback)((id) => expandedIds.includes(id), [expandedIds]);
|
|
52
|
+
const toggleExpansion = (0, react_1.useCallback)((id) => {
|
|
53
|
+
const next = expandedIds.includes(id)
|
|
54
|
+
? expandedIds.filter((eid) => eid !== id)
|
|
55
|
+
: [...expandedIds, id];
|
|
56
|
+
setExpandedIds(next);
|
|
57
|
+
onDetailsPanelChange === null || onDetailsPanelChange === void 0 ? void 0 : onDetailsPanelChange(next);
|
|
58
|
+
}, [expandedIds, setExpandedIds, onDetailsPanelChange]);
|
|
59
|
+
const isAllExpanded = allRowKeys.length > 0 &&
|
|
60
|
+
allRowKeys.every((key) => expandedIds.includes(key));
|
|
61
|
+
const toggleAll = (0, react_1.useCallback)(() => {
|
|
62
|
+
const next = isAllExpanded ? [] : [...allRowKeys];
|
|
63
|
+
setExpandedIds(next);
|
|
64
|
+
onDetailsPanelChange === null || onDetailsPanelChange === void 0 ? void 0 : onDetailsPanelChange(next);
|
|
65
|
+
}, [isAllExpanded, allRowKeys, setExpandedIds, onDetailsPanelChange]);
|
|
66
|
+
return (react_1.default.createElement(DataTableExpansionContextProvider, { expandedIds: expandedIds, isExpanded: isExpanded, toggleExpansion: toggleExpansion, toggleAll: toggleAll, isAllExpanded: isAllExpanded, getDetailsPanelContent: getDetailsPanelContent, getDetailsPanelHeight: getDetailsPanelHeight, showExpandAll: showExpandAll, enableExpansion: !!getDetailsPanelContent }, children));
|
|
67
|
+
}
|
|
68
|
+
//# sourceMappingURL=useTableExpansion.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTableExpansion.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableExpansion.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmGS,gEAA0B;AAnGnC,+CAA2C;AAC3C,oDAA6D;AAC7D,gDAA4D;AAc5D,MAAM,EACJ,QAAQ,EAAE,iCAAiC,EAC3C,UAAU,EAAE,qBAAqB,GAClC,GAAG,IAAA,6BAAmB,EAA6B;IAClD,IAAI,EAAE,2BAA2B;IACjC,YAAY,EACV,yEAAyE;CAC5E,CAAC,CAAC;AA4EkC,sDAAqB;AAhE1D,SAAS,0BAA0B,CAAI,EACrC,QAAQ,EACR,kBAAkB,EAClB,yBAAyB,GAAG,EAAE,EAC9B,oBAAoB,EACpB,UAAU,EACV,sBAAsB,EACtB,qBAAqB,EACrB,aAAa,GAAG,KAAK,GACoC;IACzD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,4BAAoB,EAAC;QACzD,KAAK,EAAE,kBAAkB;QACzB,YAAY,EAAE,yBAAyB;KACxC,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,IAAA,mBAAW,EAC5B,CAAC,EAAmB,EAAE,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,EACjD,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,MAAM,eAAe,GAAG,IAAA,mBAAW,EACjC,CAAC,EAAmB,EAAE,EAAE;QACtB,MAAM,IAAI,GAAG,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC;YACnC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC;YACzC,CAAC,CAAC,CAAC,GAAG,WAAW,EAAE,EAAE,CAAC,CAAC;QACzB,cAAc,CAAC,IAAI,CAAC,CAAC;QACrB,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAG,IAAI,CAAC,CAAC;IAC/B,CAAC,EACD,CAAC,WAAW,EAAE,cAAc,EAAE,oBAAoB,CAAC,CACpD,CAAC;IAEF,MAAM,aAAa,GACjB,UAAU,CAAC,MAAM,GAAG,CAAC;QACrB,UAAU,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;IAEvD,MAAM,SAAS,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACjC,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC;QAClD,cAAc,CAAC,IAAI,CAAC,CAAC;QACrB,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAG,IAAI,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,EAAE,cAAc,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAEtE,OAAO,CACL,8BAAC,iCAAiC,IAChC,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,EAC5B,sBAAsB,EACpB,sBAEa,EAEf,qBAAqB,EACnB,qBAAwE,EAE1E,aAAa,EAAE,aAAa,EAC5B,eAAe,EAAE,CAAC,CAAC,sBAAsB,IAExC,QAAQ,CACyB,CACrC,CAAC;AACJ,CAAC"}
|
|
@@ -6,8 +6,9 @@ type UseTableKeyboardNavOptions = {
|
|
|
6
6
|
*/
|
|
7
7
|
shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
|
|
8
8
|
};
|
|
9
|
-
declare function useTableKeyboardNav(
|
|
9
|
+
declare function useTableKeyboardNav({ enabled, shouldBlockNavigation: customBlockFn, }: UseTableKeyboardNavOptions): {
|
|
10
10
|
tabIndex: number | undefined;
|
|
11
|
+
setTableRef: import("react").Dispatch<import("react").SetStateAction<HTMLTableElement | null>>;
|
|
11
12
|
};
|
|
12
13
|
export { useTableKeyboardNav };
|
|
13
14
|
export type { UseTableKeyboardNavOptions };
|
|
@@ -8,7 +8,8 @@ const table_focus_1 = require("../helpers/table-focus");
|
|
|
8
8
|
const table_grid_nav_1 = require("../helpers/table-grid-nav");
|
|
9
9
|
const table_keyboard_1 = require("../helpers/table-keyboard");
|
|
10
10
|
const useGridCache_1 = require("./useGridCache");
|
|
11
|
-
function useTableKeyboardNav(
|
|
11
|
+
function useTableKeyboardNav({ enabled, shouldBlockNavigation: customBlockFn, }) {
|
|
12
|
+
const [tableRef, setTableRef] = (0, react_1.useState)(null);
|
|
12
13
|
const { getTableGrid, activeCell, setActiveCell } = (0, useGridCache_1.useGridCache)(tableRef, enabled);
|
|
13
14
|
/**
|
|
14
15
|
* Executes a navigation action and returns the target cell.
|
|
@@ -120,6 +121,7 @@ function useTableKeyboardNav(tableRef, { enabled, shouldBlockNavigation: customB
|
|
|
120
121
|
return {
|
|
121
122
|
/* Table should only have tabIndex until the focus is moved inside and is enabled */
|
|
122
123
|
tabIndex: enabled ? (activeCell ? undefined : 0) : undefined,
|
|
124
|
+
setTableRef,
|
|
123
125
|
};
|
|
124
126
|
}
|
|
125
127
|
//# sourceMappingURL=useTableKeyboardNav.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTableKeyboardNav.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableKeyboardNav.ts"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"useTableKeyboardNav.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableKeyboardNav.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,8 +1,15 @@
|
|
|
1
|
-
import type { SelectionProps,
|
|
2
|
-
type UseTableSelectionArgs
|
|
3
|
-
|
|
4
|
-
getRowId: (rowData: T, index: number) => string | number;
|
|
1
|
+
import type { SelectionProps, TableSelection } from "../helpers/selection/selection.types";
|
|
2
|
+
type UseTableSelectionArgs = SelectionProps & {
|
|
3
|
+
allRowKeys: (string | number)[];
|
|
5
4
|
};
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
type UseTableSelectionReturn = {
|
|
6
|
+
selection: TableSelection;
|
|
7
|
+
renderSelection: boolean;
|
|
8
|
+
};
|
|
9
|
+
declare function useTableSelection({ selectionMode, defaultSelectedKeys, selectedKeys: selectedKeysProp, onSelectionChange, disabledSelectionKeys, allRowKeys, }: UseTableSelectionArgs): UseTableSelectionReturn;
|
|
10
|
+
/**
|
|
11
|
+
* TODO: Only temp needed to keep Root happy
|
|
12
|
+
*/
|
|
13
|
+
declare const noSelectionState: UseTableSelectionReturn;
|
|
14
|
+
export { useTableSelection, noSelectionState };
|
|
15
|
+
export type { SelectionProps, UseTableSelectionReturn };
|
|
@@ -1,49 +1,62 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.noSelectionState = void 0;
|
|
3
4
|
exports.useTableSelection = useTableSelection;
|
|
4
5
|
const react_1 = require("react");
|
|
6
|
+
const utils_external_1 = require("../../../utils-external");
|
|
5
7
|
const hooks_1 = require("../../../utils/hooks");
|
|
6
8
|
const getMultipleSelectProps_1 = require("../helpers/selection/getMultipleSelectProps");
|
|
7
9
|
const getSingleSelectProps_1 = require("../helpers/selection/getSingleSelectProps");
|
|
8
|
-
function useTableSelection({ selectionMode = "none", defaultSelectedKeys, selectedKeys: selectedKeysProp, onSelectionChange,
|
|
9
|
-
const
|
|
10
|
+
function useTableSelection({ selectionMode = "none", defaultSelectedKeys, selectedKeys: selectedKeysProp, onSelectionChange, disabledSelectionKeys = [], allRowKeys, }) {
|
|
11
|
+
const radioGroupName = (0, utils_external_1.useId)();
|
|
10
12
|
const [selectedKeys, setSelectedKeys] = (0, hooks_1.useControllableState)({
|
|
11
13
|
value: selectionMode !== "none" ? selectedKeysProp : undefined,
|
|
12
14
|
defaultValue: defaultSelectedKeys !== null && defaultSelectedKeys !== void 0 ? defaultSelectedKeys : [],
|
|
13
15
|
onChange: onSelectionChange,
|
|
14
16
|
});
|
|
17
|
+
const selectedKeysSet = (0, react_1.useMemo)(() => new Set(selectedKeys), [selectedKeys]);
|
|
18
|
+
const disabledKeysSet = (0, react_1.useMemo)(() => new Set(disabledSelectionKeys), [disabledSelectionKeys]);
|
|
19
|
+
const isRowSelected = (0, react_1.useCallback)((rowId) => selectedKeysSet.has(rowId), [selectedKeysSet]);
|
|
20
|
+
const baseSelection = { selectedKeys, disabledSelectionKeys, isRowSelected };
|
|
15
21
|
if (selectionMode === "none") {
|
|
16
|
-
return {
|
|
22
|
+
return {
|
|
23
|
+
selection: Object.assign(Object.assign({ selectionMode }, baseSelection), { selectedKeys: [] }),
|
|
24
|
+
renderSelection: false,
|
|
25
|
+
};
|
|
17
26
|
}
|
|
18
27
|
if (selectionMode === "single") {
|
|
19
|
-
const arrayKeys = Array.isArray(selectedKeys) ? selectedKeys : [];
|
|
20
|
-
const { getRowRadioProps } = (0, getSingleSelectProps_1.getSingleSelectProps)({
|
|
21
|
-
selectedKeys: arrayKeys,
|
|
22
|
-
setSelectedKeys,
|
|
23
|
-
disabledKeys,
|
|
24
|
-
});
|
|
25
28
|
return {
|
|
26
|
-
selectionMode,
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
selection: Object.assign(Object.assign({ selectionMode }, baseSelection), (0, getSingleSelectProps_1.getSingleSelectProps)({
|
|
30
|
+
selectedKeysSet,
|
|
31
|
+
setSelectedKeys,
|
|
32
|
+
disabledKeysSet,
|
|
33
|
+
name: radioGroupName,
|
|
34
|
+
})),
|
|
35
|
+
renderSelection: allRowKeys.length !== 0,
|
|
31
36
|
};
|
|
32
37
|
}
|
|
33
|
-
const { getTheadCheckboxProps, getRowCheckboxProps } = (0, getMultipleSelectProps_1.getMultipleSelectProps)({
|
|
34
|
-
selectedKeys,
|
|
35
|
-
setSelectedKeys,
|
|
36
|
-
disabledKeys,
|
|
37
|
-
allKeys,
|
|
38
|
-
totalCount: data.length,
|
|
39
|
-
});
|
|
40
38
|
return {
|
|
41
|
-
selectionMode,
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
39
|
+
selection: Object.assign(Object.assign({ selectionMode }, baseSelection), (0, getMultipleSelectProps_1.getMultipleSelectProps)({
|
|
40
|
+
selectedKeysSet,
|
|
41
|
+
selectedKeys,
|
|
42
|
+
setSelectedKeys,
|
|
43
|
+
disabledKeysSet,
|
|
44
|
+
allRowKeys,
|
|
45
|
+
})),
|
|
46
|
+
renderSelection: allRowKeys.length !== 0,
|
|
47
47
|
};
|
|
48
48
|
}
|
|
49
|
+
/**
|
|
50
|
+
* TODO: Only temp needed to keep Root happy
|
|
51
|
+
*/
|
|
52
|
+
const noSelectionState = {
|
|
53
|
+
selection: {
|
|
54
|
+
selectionMode: "none",
|
|
55
|
+
selectedKeys: [],
|
|
56
|
+
disabledSelectionKeys: [],
|
|
57
|
+
isRowSelected: () => false,
|
|
58
|
+
},
|
|
59
|
+
renderSelection: false,
|
|
60
|
+
};
|
|
61
|
+
exports.noSelectionState = noSelectionState;
|
|
49
62
|
//# sourceMappingURL=useTableSelection.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTableSelection.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableSelection.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useTableSelection.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableSelection.ts"],"names":[],"mappings":";;;AA2GS,8CAAiB;AA3G1B,iCAA6C;AAC7C,4DAAgD;AAChD,gDAA4D;AAC5D,wFAAqF;AACrF,oFAAiF;AAiBjF,SAAS,iBAAiB,CAAC,EACzB,aAAa,GAAG,MAAM,EACtB,mBAAmB,EACnB,YAAY,EAAE,gBAAgB,EAC9B,iBAAiB,EACjB,qBAAqB,GAAG,EAAE,EAC1B,UAAU,GACY;IACtB,MAAM,cAAc,GAAG,IAAA,sBAAK,GAAE,CAAC;IAE/B,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,4BAAoB,EAAgB;QAC1E,KAAK,EAAE,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS;QAC9D,YAAY,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,EAAE;QACvC,QAAQ,EAAE,iBAAiB;KAC5B,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAI,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAE7E,MAAM,eAAe,GAAG,IAAA,eAAO,EAC7B,GAAG,EAAE,CAAC,IAAI,GAAG,CAAC,qBAAqB,CAAC,EACpC,CAAC,qBAAqB,CAAC,CACxB,CAAC;IAEF,MAAM,aAAa,GAAG,IAAA,mBAAW,EAC/B,CAAC,KAAsB,EAAE,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,EACtD,CAAC,eAAe,CAAC,CAClB,CAAC;IAEF,MAAM,aAAa,GAAG,EAAE,YAAY,EAAE,qBAAqB,EAAE,aAAa,EAAE,CAAC;IAE7E,IAAI,aAAa,KAAK,MAAM,EAAE,CAAC;QAC7B,OAAO;YACL,SAAS,gCACP,aAAa,IACV,aAAa,KAChB,YAAY,EAAE,EAAE,GACjB;YACD,eAAe,EAAE,KAAK;SACvB,CAAC;IACJ,CAAC;IAED,IAAI,aAAa,KAAK,QAAQ,EAAE,CAAC;QAC/B,OAAO;YACL,SAAS,gCACP,aAAa,IACV,aAAa,GACb,IAAA,2CAAoB,EAAC;gBACtB,eAAe;gBACf,eAAe;gBACf,eAAe;gBACf,IAAI,EAAE,cAAc;aACrB,CAAC,CACH;YACD,eAAe,EAAE,UAAU,CAAC,MAAM,KAAK,CAAC;SACzC,CAAC;IACJ,CAAC;IAED,OAAO;QACL,SAAS,gCACP,aAAa,IACV,aAAa,GACb,IAAA,+CAAsB,EAAC;YACxB,eAAe;YACf,YAAY;YACZ,eAAe;YACf,eAAe;YACf,UAAU;SACX,CAAC,CACH;QACD,eAAe,EAAE,UAAU,CAAC,MAAM,KAAK,CAAC;KACzC,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,gBAAgB,GAA4B;IAChD,SAAS,EAAE;QACT,aAAa,EAAE,MAAM;QACrB,YAAY,EAAE,EAAE;QAChB,qBAAqB,EAAE,EAAE;QACzB,aAAa,EAAE,GAAG,EAAE,CAAC,KAAK;KAC3B;IACD,eAAe,EAAE,KAAK;CACvB,CAAC;AAE0B,4CAAgB"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import type { SortChangeDetail, SortEntry } from "../root/DataTable.types";
|
|
2
|
+
type TableSortOptions = {
|
|
3
|
+
/**
|
|
4
|
+
* Current sort state. Each entry represents a sorted column.
|
|
5
|
+
* Columns not present in the array are unsorted.
|
|
6
|
+
* Supports multi-column sorting when multiple entries are provided.
|
|
7
|
+
*
|
|
8
|
+
* When provided, the component is controlled — you must also handle `onSortChange`.
|
|
9
|
+
* For uncontrolled usage, use `defaultSort` instead.
|
|
10
|
+
*/
|
|
11
|
+
sort?: SortEntry[];
|
|
12
|
+
/**
|
|
13
|
+
* Initial sort state for uncontrolled usage.
|
|
14
|
+
* Use `sort` + `onSortChange` for controlled usage.
|
|
15
|
+
* @default []
|
|
16
|
+
*/
|
|
17
|
+
defaultSort?: SortEntry[];
|
|
18
|
+
/**
|
|
19
|
+
* Called when the user clicks a sortable column header.
|
|
20
|
+
* - `sort` — the full updated sort array after cycling: unsorted → asc → desc → unsorted.
|
|
21
|
+
* - `detail` — the specific column that changed, including its new direction (`"none"` means removed).
|
|
22
|
+
*/
|
|
23
|
+
onSortChange?: (sort: SortEntry[], detail: SortChangeDetail) => void;
|
|
24
|
+
};
|
|
25
|
+
type UseTableSortResults = {
|
|
26
|
+
/**
|
|
27
|
+
* Handler for when a sortable column header is clicked. Pass the column's `id` as an argument.
|
|
28
|
+
*/
|
|
29
|
+
onSortClick: (columnId: string, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
|
|
30
|
+
/**
|
|
31
|
+
* The current sort state, to be passed to the table header for rendering sort indicators.
|
|
32
|
+
*/
|
|
33
|
+
sortState: SortEntry[];
|
|
34
|
+
};
|
|
35
|
+
declare function useTableSort(options: TableSortOptions): UseTableSortResults;
|
|
36
|
+
export { useTableSort };
|
|
37
|
+
export type { TableSortOptions };
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useTableSort = useTableSort;
|
|
4
|
+
const react_1 = require("react");
|
|
5
|
+
const hooks_1 = require("../../../utils/hooks");
|
|
6
|
+
function useTableSort(options) {
|
|
7
|
+
const { defaultSort = [], onSortChange, sort: sortOption } = options;
|
|
8
|
+
const [sort, setSort] = (0, hooks_1.useControllableState)({
|
|
9
|
+
value: sortOption,
|
|
10
|
+
defaultValue: defaultSort,
|
|
11
|
+
});
|
|
12
|
+
const handleSortClick = (0, react_1.useCallback)((id, event) => {
|
|
13
|
+
if (id === undefined) {
|
|
14
|
+
if (process.env.NODE_ENV === "development") {
|
|
15
|
+
console.warn(`Aksel: Column id is undefined for sort event on target ${event.target}. Make sure your column definitions include an 'id' property.`);
|
|
16
|
+
}
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
19
|
+
const cumulative = event.shiftKey;
|
|
20
|
+
const base = cumulative ? sort : sort.filter((s) => s.columnId === id);
|
|
21
|
+
const { next, detail } = nextSortEntries(base, id);
|
|
22
|
+
setSort(next);
|
|
23
|
+
onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(next, detail);
|
|
24
|
+
}, [onSortChange, setSort, sort]);
|
|
25
|
+
return {
|
|
26
|
+
onSortClick: handleSortClick,
|
|
27
|
+
sortState: sort,
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
function nextSortEntries(current, columnId) {
|
|
31
|
+
const existing = current.find((s) => s.columnId === columnId);
|
|
32
|
+
if (!existing) {
|
|
33
|
+
return {
|
|
34
|
+
next: [...current, { columnId, direction: "asc" }],
|
|
35
|
+
detail: { columnId, direction: "asc" },
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
if (existing.direction === "asc") {
|
|
39
|
+
return {
|
|
40
|
+
next: current.map((s) => s.columnId === columnId ? Object.assign(Object.assign({}, s), { direction: "desc" }) : s),
|
|
41
|
+
detail: { columnId, direction: "desc" },
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
return {
|
|
45
|
+
next: current.filter((s) => s.columnId !== columnId),
|
|
46
|
+
detail: { columnId, direction: "none" },
|
|
47
|
+
};
|
|
48
|
+
}
|
|
49
|
+
//# sourceMappingURL=useTableSort.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTableSort.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableSort.ts"],"names":[],"mappings":";;AAqGS,oCAAY;AArGrB,iCAAoC;AACpC,gDAA4D;AAyC5D,SAAS,YAAY,CAAC,OAAyB;IAC7C,MAAM,EAAE,WAAW,GAAG,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC;IAErE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,4BAAoB,EAAC;QAC3C,KAAK,EAAE,UAAU;QACjB,YAAY,EAAE,WAAW;KAC1B,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,IAAA,mBAAW,EACjC,CAAC,EAAU,EAAE,KAAgD,EAAE,EAAE;QAC/D,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC;YACrB,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE,CAAC;gBAC3C,OAAO,CAAC,IAAI,CACV,0DAA0D,KAAK,CAAC,MAAM,+DAA+D,CACtI,CAAC;YACJ,CAAC;YACD,OAAO;QACT,CAAC;QAED,MAAM,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC;QAClC,MAAM,IAAI,GAAG,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,EAAE,CAAC,CAAC;QACvE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,eAAe,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACnD,OAAO,CAAC,IAAI,CAAC,CAAC;QACd,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,IAAI,EAAE,MAAM,CAAC,CAAC;IAC/B,CAAC,EACD,CAAC,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,CAC9B,CAAC;IAEF,OAAO;QACL,WAAW,EAAE,eAAe;QAC5B,SAAS,EAAE,IAAI;KAChB,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CACtB,OAAoB,EACpB,QAAgB;IAEhB,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC;IAC9D,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO;YACL,IAAI,EAAE,CAAC,GAAG,OAAO,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;YAClD,MAAM,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE;SACvC,CAAC;IACJ,CAAC;IACD,IAAI,QAAQ,CAAC,SAAS,KAAK,KAAK,EAAE,CAAC;QACjC,OAAO;YACL,IAAI,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CACtB,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,iCAAM,CAAC,KAAE,SAAS,EAAE,MAAM,IAAG,CAAC,CAAC,CAAC,CAC1D;YACD,MAAM,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE;SACxC,CAAC;IACJ,CAAC;IACD,OAAO;QACL,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC;QACpD,MAAM,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE;KACxC,CAAC;AACJ,CAAC"}
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
type DataTableLoadingStateProps = React.HTMLAttributes<HTMLDivElement
|
|
3
|
-
|
|
2
|
+
type DataTableLoadingStateProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
3
|
+
colSpan?: number;
|
|
4
|
+
};
|
|
5
|
+
declare const DataTableLoadingState: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
|
6
|
+
colSpan?: number;
|
|
7
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
4
8
|
export { DataTableLoadingState };
|
|
5
9
|
export type { DataTableLoadingStateProps };
|
|
@@ -48,9 +48,9 @@ exports.DataTableLoadingState = void 0;
|
|
|
48
48
|
const react_1 = __importStar(require("react"));
|
|
49
49
|
const helpers_1 = require("../../../utils/helpers");
|
|
50
50
|
const DataTableLoadingState = (0, react_1.forwardRef)((_a, forwardedRef) => {
|
|
51
|
-
var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
|
|
51
|
+
var { className, children, colSpan = 999 } = _a, rest = __rest(_a, ["className", "children", "colSpan"]);
|
|
52
52
|
return (react_1.default.createElement("tr", null,
|
|
53
|
-
react_1.default.createElement("td", { colSpan:
|
|
53
|
+
react_1.default.createElement("td", { colSpan: colSpan },
|
|
54
54
|
react_1.default.createElement("div", Object.assign({}, rest, { ref: forwardedRef, className: (0, helpers_1.cl)("aksel-data-table__loading-state", className) }), children))));
|
|
55
55
|
});
|
|
56
56
|
exports.DataTableLoadingState = DataTableLoadingState;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableLoadingState.js","sourceRoot":"","sources":["../../../../src/data/table/loading-state/DataTableLoadingState.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,oDAA4C;
|
|
1
|
+
{"version":3,"file":"DataTableLoadingState.js","sourceRoot":"","sources":["../../../../src/data/table/loading-state/DataTableLoadingState.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,oDAA4C;AAM5C,MAAM,qBAAqB,GAAG,IAAA,kBAAU,EAGtC,CAAC,EAA+C,EAAE,YAAY,EAAE,EAAE;QAAjE,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,GAAG,GAAG,OAAW,EAAN,IAAI,cAA7C,oCAA+C,CAAF;IAC9C,OAAO,CACL;QACE,sCAAI,OAAO,EAAE,OAAO;YAClB,uDACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,YAAE,EAAC,iCAAiC,EAAE,SAAS,CAAC,KAE1D,QAAQ,CACL,CACH,CACF,CACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEM,sDAAqB"}
|
|
@@ -1,13 +1,64 @@
|
|
|
1
|
+
type SortDirection = "asc" | "desc" | "none";
|
|
2
|
+
/**
|
|
3
|
+
* TODO:
|
|
4
|
+
* - Consider "accessorKey" or similar to allow simple column definitions without a cell function.
|
|
5
|
+
* - Add "align" property for better control over text alignment in cells.
|
|
6
|
+
*/
|
|
1
7
|
type ColumnDefinition<T> = {
|
|
2
|
-
id
|
|
3
|
-
header: React.ReactNode;
|
|
8
|
+
id: string;
|
|
4
9
|
width?: number | string;
|
|
10
|
+
defaultWidth?: number | string;
|
|
5
11
|
minWidth?: number | string;
|
|
6
12
|
maxWidth?: number | string;
|
|
7
13
|
/**
|
|
8
|
-
*
|
|
14
|
+
* Currently only handles cell alignment.
|
|
15
|
+
* TODO: Should this include centering?
|
|
16
|
+
* type "icon" or something to avoid ellipsis on actions, tags etc
|
|
17
|
+
*/
|
|
18
|
+
type?: "string" | "number";
|
|
19
|
+
/**
|
|
20
|
+
* Assigned to the cell's `th` element instead of `td` if true.
|
|
21
|
+
*
|
|
22
|
+
* Should be used for cells that act as row headers. Each row should have one rowheader, and only have one cell with `isRowHeader: true`,
|
|
23
|
+
*
|
|
24
|
+
* TODO: Not implemented
|
|
25
|
+
* - Add a generic tablecell component that can render either a td or th based on context or this prop.
|
|
26
|
+
*/
|
|
27
|
+
isRowHeader?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Renders table header-cell
|
|
30
|
+
*/
|
|
31
|
+
header?: React.ReactNode;
|
|
32
|
+
/**
|
|
33
|
+
* Renders table-cell
|
|
9
34
|
*/
|
|
10
35
|
cell: (item: T) => React.ReactNode;
|
|
36
|
+
/**
|
|
37
|
+
* Label of header. Renders if header is not provided.
|
|
38
|
+
*/
|
|
39
|
+
label: string;
|
|
40
|
+
/**
|
|
41
|
+
* Makes the column sortable. Renders the header as a sort button.
|
|
42
|
+
* Use `sort` and `onSortChange` on the root component to control sort state.
|
|
43
|
+
*/
|
|
44
|
+
sortable?: boolean;
|
|
11
45
|
};
|
|
12
46
|
type ColumnDefinitions<T> = ColumnDefinition<T>[];
|
|
13
|
-
|
|
47
|
+
/**
|
|
48
|
+
* A single sort entry representing a column's current sort state.
|
|
49
|
+
* Absent from the `sort` array means the column is unsorted.
|
|
50
|
+
*/
|
|
51
|
+
type SortEntry = {
|
|
52
|
+
columnId: string;
|
|
53
|
+
direction: "asc" | "desc";
|
|
54
|
+
};
|
|
55
|
+
/**
|
|
56
|
+
* The column that changed in a sort operation, passed as the second argument
|
|
57
|
+
* to `onSortChange`. Useful for triggering targeted server-side sort requests.
|
|
58
|
+
*/
|
|
59
|
+
type SortChangeDetail = {
|
|
60
|
+
columnId: string;
|
|
61
|
+
/** The new direction for this column. `"none"` means the column was removed from the sort. */
|
|
62
|
+
direction: "asc" | "desc" | "none";
|
|
63
|
+
};
|
|
64
|
+
export type { ColumnDefinition, ColumnDefinitions, SortDirection, SortEntry, SortChangeDetail, };
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
/** biome-ignore-all lint/correctness/useHookAtTopLevel: False positive because of the way forwardRef() is added */
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { type SelectionProps } from "../hooks/useTableSelection";
|
|
4
|
+
import { type TableSortOptions } from "../hooks/useTableSort";
|
|
4
5
|
import type { ColumnDefinitions } from "./DataTable.types";
|
|
5
|
-
interface DataTableProps<T> extends React.HTMLAttributes<HTMLTableElement>, SelectionProps {
|
|
6
|
+
interface DataTableProps<T> extends React.HTMLAttributes<HTMLTableElement>, SelectionProps, TableSortOptions {
|
|
6
7
|
children?: never;
|
|
7
8
|
/**
|
|
8
9
|
* Controls vertical cell padding.
|
|
@@ -48,11 +49,106 @@ interface DataTableProps<T> extends React.HTMLAttributes<HTMLTableElement>, Sele
|
|
|
48
49
|
*/
|
|
49
50
|
layout?: "fixed" | "auto";
|
|
50
51
|
/**
|
|
52
|
+
* Defines the columns of the table and how to render them.
|
|
51
53
|
*
|
|
54
|
+
*
|
|
55
|
+
* Each column definition should have a unique `id` (or use the column index as fallback) and a `cell`-renderer function that takes the row data as argument and returns a React node.
|
|
52
56
|
*/
|
|
53
57
|
columnDefinitions: ColumnDefinitions<T>;
|
|
58
|
+
/**
|
|
59
|
+
* The data to display in the table.
|
|
60
|
+
*
|
|
61
|
+
*
|
|
62
|
+
* Each object in the array represents a row, and the properties of the object are used to render the cells based on the `columnDefinitions`.
|
|
63
|
+
*/
|
|
54
64
|
data: T[];
|
|
65
|
+
/**
|
|
66
|
+
* Function to get unique row id from row data.
|
|
67
|
+
*
|
|
68
|
+
*
|
|
69
|
+
* If not provided, the row index will be used as id. This can cause issues if your data changes dynamically, so it's recommended to provide a stable id if possible.
|
|
70
|
+
*/
|
|
55
71
|
getRowId?: (rowData: T, index: number) => string | number;
|
|
72
|
+
/**
|
|
73
|
+
* Sticky columns that remain visible when horizontally scrolling the table.
|
|
74
|
+
*
|
|
75
|
+
* You can specify 1 sticky column on the left and 1 on the right.
|
|
76
|
+
*/
|
|
77
|
+
stickyColumns?: {
|
|
78
|
+
first?: "1";
|
|
79
|
+
last?: "1";
|
|
80
|
+
};
|
|
81
|
+
/**
|
|
82
|
+
* @default false
|
|
83
|
+
*/
|
|
84
|
+
stickyHeader?: boolean;
|
|
85
|
+
/**
|
|
86
|
+
* Callback invoked when a data row is clicked.
|
|
87
|
+
* Not called when clicking header, loading, or empty-state rows.
|
|
88
|
+
*/
|
|
89
|
+
onRowClick?: (rowId: string | number, event: React.MouseEvent<HTMLTableRowElement>) => void;
|
|
90
|
+
/**
|
|
91
|
+
* Content to render when `data` is empty.
|
|
92
|
+
* Rendered inside a `DataTable.EmptyState` row spanning all columns.
|
|
93
|
+
*/
|
|
94
|
+
emptyState?: React.ReactNode;
|
|
95
|
+
/**
|
|
96
|
+
* Shows the table in a loading state.
|
|
97
|
+
*
|
|
98
|
+
* - When `loadingState` is provided, it is rendered inside a `DataTable.LoadingState` row.
|
|
99
|
+
* - When `loadingState` is **not** provided, skeleton placeholder rows are rendered instead.
|
|
100
|
+
* @default false
|
|
101
|
+
*/
|
|
102
|
+
isLoading?: boolean;
|
|
103
|
+
/**
|
|
104
|
+
* Custom content to render when `isLoading` is `true`.
|
|
105
|
+
* Rendered inside a `DataTable.LoadingState` row spanning all columns.
|
|
106
|
+
* When omitted, skeleton rows are rendered based on `loadingRows`.
|
|
107
|
+
*/
|
|
108
|
+
loadingState?: React.ReactNode;
|
|
109
|
+
/**
|
|
110
|
+
* Number of skeleton rows to render when `isLoading` is `true` and no `loadingState` is provided.
|
|
111
|
+
*
|
|
112
|
+
*
|
|
113
|
+
* If not provided, the rendered content will get a temporarily overlay while loading
|
|
114
|
+
*/
|
|
115
|
+
loadingRows?: number;
|
|
116
|
+
/**
|
|
117
|
+
* Visually hidden label announced to screen readers when skeleton rows are shown.
|
|
118
|
+
* Only used when `isLoading` is `true` and no `loadingState` is provided.
|
|
119
|
+
* @default "Laster innhold"
|
|
120
|
+
*/
|
|
121
|
+
loadingLabel?: string;
|
|
122
|
+
/**
|
|
123
|
+
* Renders a details panel below the row when expanded.
|
|
124
|
+
* When provided, an expand toggle column is added automatically.
|
|
125
|
+
*/
|
|
126
|
+
getDetailsPanelContent?: (rowData: T) => React.ReactNode;
|
|
127
|
+
/**
|
|
128
|
+
* Controlled list of expanded row IDs.
|
|
129
|
+
* Use with `onDetailsPanelChange` for controlled usage, or `defaultDetailsPanelRowIds` for uncontrolled.
|
|
130
|
+
*/
|
|
131
|
+
detailsPanelRowIds?: (string | number)[];
|
|
132
|
+
/**
|
|
133
|
+
* Initial list of expanded row IDs for uncontrolled usage.
|
|
134
|
+
* @default []
|
|
135
|
+
*/
|
|
136
|
+
defaultDetailsPanelRowIds?: (string | number)[];
|
|
137
|
+
/**
|
|
138
|
+
* Called when the list of expanded row IDs changes.
|
|
139
|
+
*/
|
|
140
|
+
onDetailsPanelChange?: (ids: (string | number)[]) => void;
|
|
141
|
+
/**
|
|
142
|
+
* Returns the height (in px) or `"auto"` for a row's details panel.
|
|
143
|
+
* When a number is returned, the panel scrolls within that fixed height.
|
|
144
|
+
* @default "auto"
|
|
145
|
+
*/
|
|
146
|
+
getDetailsPanelHeight?: (rowData: T) => number | "auto";
|
|
147
|
+
/**
|
|
148
|
+
* Shows an expand-all toggle button in the expand column header.
|
|
149
|
+
* @default false
|
|
150
|
+
*/
|
|
151
|
+
showExpandAll?: boolean;
|
|
56
152
|
}
|
|
57
153
|
declare const DataTableAuto: <T>(props: DataTableProps<T> & React.RefAttributes<HTMLTableElement>) => React.ReactElement | null;
|
|
58
154
|
export { DataTableAuto };
|