@economic/taco 2.45.0-alpha.1 → 2.45.0-alpha.11
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/charts/components/Area/AreaChart.d.ts +19 -0
- package/dist/charts/components/Bar/BarChart.d.ts +20 -0
- package/dist/charts/components/Donut/ActiveShape.d.ts +8 -0
- package/dist/charts/components/Donut/CenteredLabel.d.ts +11 -0
- package/dist/charts/components/Donut/DonutChart.d.ts +21 -0
- package/dist/charts/components/Donut/Legend.d.ts +13 -0
- package/dist/charts/components/Donut/util.d.ts +2 -0
- package/dist/charts/components/Legend.d.ts +16 -0
- package/dist/charts/components/Line/LineChart.d.ts +18 -0
- package/dist/charts/components/ResponsiveContainer.d.ts +5 -0
- package/dist/charts/components/Tooltip.d.ts +10 -0
- package/dist/charts/components/types.d.ts +5 -0
- package/dist/charts/utils/color.d.ts +3 -0
- package/dist/charts/utils/common.d.ts +37 -0
- package/dist/components/Alert/Alert.d.ts +1 -1
- package/dist/components/Banner/util.d.ts +0 -1
- package/dist/components/Icon/components/Autopay.d.ts +3 -0
- package/dist/components/Icon/components/AutopayPaused.d.ts +3 -0
- package/dist/components/Icon/components/Experiment.d.ts +3 -0
- package/dist/components/Icon/components/Person.d.ts +3 -0
- package/dist/components/Icon/components/PersonSolid.d.ts +3 -0
- package/dist/components/Icon/components/Wallet.d.ts +3 -0
- package/dist/components/Icon/components/index.d.ts +1 -1
- package/dist/components/Input/Input.d.ts +1 -1
- package/dist/components/Menu/components/Item.d.ts +1 -1
- package/dist/components/Menu/components/Link.d.ts +1 -1
- package/dist/components/Navigation2/components/Link.d.ts +1 -1
- package/dist/components/Pagination/PageNumbers.d.ts +0 -1
- package/dist/components/Popover/Popover.d.ts +1 -1
- package/dist/components/Provider/Localization.d.ts +2 -0
- package/dist/components/RadioGroup/RadioGroup.d.ts +3 -3
- package/dist/components/Report/Report.d.ts +1 -1
- package/dist/components/Select2/components/Option.d.ts +4 -4
- package/dist/components/Select2/components/Search.d.ts +1 -7
- package/dist/components/Table3/Table3.d.ts +2 -14
- package/dist/components/Table3/components/Columns/Cell/EditingDisplayCell.d.ts +0 -1
- package/dist/components/Table3/components/Columns/Internal/EditingActionsMenu.d.ts +3 -4
- package/dist/components/Table3/components/Editing/DiscardChangesConfirmationDialog.d.ts +7 -0
- package/dist/components/Table3/components/Row/Editing/CreateNewRow.d.ts +13 -0
- package/dist/components/Table3/components/Row/Editing/TemporaryRow.d.ts +12 -0
- package/dist/components/Table3/features/useEditingState.d.ts +29 -0
- package/dist/components/Table3/features/useTableEditing.d.ts +28 -37
- package/dist/components/Table3/listeners/useTableEditingListener.d.ts +1 -1
- package/dist/components/Table3/types.d.ts +24 -8
- package/dist/components/Table3/useTable3.d.ts +6 -0
- package/dist/components/Table3/util/editing.d.ts +10 -1
- package/dist/components/Tag/Tag.d.ts +1 -1
- package/dist/esm/index.css +76 -10
- package/dist/esm/packages/taco/src/charts/components/Area/AreaChart.js +67 -0
- package/dist/esm/packages/taco/src/charts/components/Area/AreaChart.js.map +1 -0
- package/dist/esm/packages/taco/src/charts/components/Bar/BarChart.js +120 -0
- package/dist/esm/packages/taco/src/charts/components/Bar/BarChart.js.map +1 -0
- package/dist/esm/packages/taco/src/charts/components/Donut/ActiveShape.js +47 -0
- package/dist/esm/packages/taco/src/charts/components/Donut/ActiveShape.js.map +1 -0
- package/dist/esm/packages/taco/src/charts/components/Donut/CenteredLabel.js +27 -0
- package/dist/esm/packages/taco/src/charts/components/Donut/CenteredLabel.js.map +1 -0
- package/dist/esm/packages/taco/src/charts/components/Donut/DonutChart.js +170 -0
- package/dist/esm/packages/taco/src/charts/components/Donut/DonutChart.js.map +1 -0
- package/dist/esm/packages/taco/src/charts/components/Donut/Legend.js +164 -0
- package/dist/esm/packages/taco/src/charts/components/Donut/Legend.js.map +1 -0
- package/dist/esm/packages/taco/src/charts/components/Donut/util.js +5 -0
- package/dist/esm/packages/taco/src/charts/components/Donut/util.js.map +1 -0
- package/dist/esm/packages/taco/src/charts/components/Legend.js +145 -0
- package/dist/esm/packages/taco/src/charts/components/Legend.js.map +1 -0
- package/dist/esm/packages/taco/src/charts/components/Line/LineChart.js +65 -0
- package/dist/esm/packages/taco/src/charts/components/Line/LineChart.js.map +1 -0
- package/dist/esm/packages/taco/src/charts/components/ResponsiveContainer.js +10 -0
- package/dist/esm/packages/taco/src/charts/components/ResponsiveContainer.js.map +1 -0
- package/dist/esm/packages/taco/src/charts/components/Tooltip.js +44 -0
- package/dist/esm/packages/taco/src/charts/components/Tooltip.js.map +1 -0
- package/dist/esm/packages/taco/src/charts/utils/color.js +24 -0
- package/dist/esm/packages/taco/src/charts/utils/color.js.map +1 -0
- package/dist/esm/packages/taco/src/charts/utils/common.js +34 -0
- package/dist/esm/packages/taco/src/charts/utils/common.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Accordion/Accordion.js +6 -14
- package/dist/esm/packages/taco/src/components/Accordion/Accordion.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Alert/Alert.js +2 -0
- package/dist/esm/packages/taco/src/components/Alert/Alert.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Badge/Badge.js +9 -6
- package/dist/esm/packages/taco/src/components/Badge/Badge.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Banner/util.js +5 -0
- package/dist/esm/packages/taco/src/components/Banner/util.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Button/Button.js +2 -1
- package/dist/esm/packages/taco/src/components/Button/Button.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Button/util.js +1 -1
- package/dist/esm/packages/taco/src/components/Button/util.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Combobox/useCombobox.js +8 -5
- package/dist/esm/packages/taco/src/components/Combobox/useCombobox.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Datepicker/useDatepicker.js +1 -0
- package/dist/esm/packages/taco/src/components/Datepicker/useDatepicker.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Header/components/AgreementSelector.js +2 -4
- package/dist/esm/packages/taco/src/components/Header/components/AgreementSelector.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Icon/components/Autopay.js +19 -0
- package/dist/esm/packages/taco/src/components/Icon/components/Autopay.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Icon/components/AutopayPaused.js +19 -0
- package/dist/esm/packages/taco/src/components/Icon/components/AutopayPaused.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Icon/components/Experiment.js +20 -0
- package/dist/esm/packages/taco/src/components/Icon/components/Experiment.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Icon/components/Person.js +19 -0
- package/dist/esm/packages/taco/src/components/Icon/components/Person.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Icon/components/PersonSolid.js +19 -0
- package/dist/esm/packages/taco/src/components/Icon/components/PersonSolid.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Icon/components/Wallet.js +19 -0
- package/dist/esm/packages/taco/src/components/Icon/components/Wallet.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Icon/components/index.js +12 -0
- package/dist/esm/packages/taco/src/components/Icon/components/index.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Input/util.js +1 -1
- package/dist/esm/packages/taco/src/components/Input/util.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Listbox/util.js +1 -7
- package/dist/esm/packages/taco/src/components/Listbox/util.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Menu/components/Content.js +5 -0
- package/dist/esm/packages/taco/src/components/Menu/components/Content.js.map +1 -1
- package/dist/esm/packages/taco/src/components/ModeSwitch/ModeSwitch.js +2 -2
- package/dist/esm/packages/taco/src/components/ModeSwitch/ModeSwitch.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Popover/Popover.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Provider/Localization.js +5 -3
- package/dist/esm/packages/taco/src/components/Provider/Localization.js.map +1 -1
- package/dist/esm/packages/taco/src/components/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Select2/Select2.js +21 -40
- package/dist/esm/packages/taco/src/components/Select2/Select2.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Select2/components/Create.js +10 -11
- package/dist/esm/packages/taco/src/components/Select2/components/Create.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Select2/components/Option.js +7 -5
- package/dist/esm/packages/taco/src/components/Select2/components/Option.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Select2/components/Search.js +2 -12
- package/dist/esm/packages/taco/src/components/Select2/components/Search.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Select2/components/Trigger.js +75 -20
- package/dist/esm/packages/taco/src/components/Select2/components/Trigger.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Shortcut/Shortcut.js +1 -1
- package/dist/esm/packages/taco/src/components/Shortcut/Shortcut.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Switch/Switch.js +1 -1
- package/dist/esm/packages/taco/src/components/Switch/Switch.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table/hooks/plugins/useRowSelect.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/Table3.js +22 -7
- package/dist/esm/packages/taco/src/components/Table3/Table3.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.js +1 -2
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/EditingControlCell.js +42 -14
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/EditingControlCell.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Internal/EditingActionsMenu.js +9 -40
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Internal/EditingActionsMenu.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Editing/Alert.js +19 -12
- package/dist/esm/packages/taco/src/components/Table3/components/Editing/Alert.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Editing/DiscardChangesConfirmationDialog.js +34 -0
- package/dist/esm/packages/taco/src/components/Table3/components/Editing/DiscardChangesConfirmationDialog.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/CreateNewRow.js +73 -0
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/CreateNewRow.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/SaveStatus.js +2 -14
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/SaveStatus.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/TemporaryRow.js +96 -0
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/TemporaryRow.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Row.js +39 -6
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Row.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Toolbar/Editing/Editing.js +4 -17
- package/dist/esm/packages/taco/src/components/Table3/components/Toolbar/Editing/Editing.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/features/useEditingState.js +527 -0
- package/dist/esm/packages/taco/src/components/Table3/features/useEditingState.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table3/features/useTableEditing.js +75 -399
- package/dist/esm/packages/taco/src/components/Table3/features/useTableEditing.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/listeners/useTableEditingListener.js +44 -34
- package/dist/esm/packages/taco/src/components/Table3/listeners/useTableEditingListener.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/useTable3.js +46 -14
- package/dist/esm/packages/taco/src/components/Table3/useTable3.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/util/editing.js +19 -23
- package/dist/esm/packages/taco/src/components/Table3/util/editing.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Tag/Tag.js +6 -4
- package/dist/esm/packages/taco/src/components/Tag/Tag.js.map +1 -1
- package/dist/esm/packages/taco/src/hooks/useLazyEffect.js +1 -1
- package/dist/esm/packages/taco/src/hooks/useLazyEffect.js.map +1 -1
- package/dist/esm/packages/taco/src/index.js +5 -1
- package/dist/esm/packages/taco/src/index.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/BubbleSelect.js +1 -1
- package/dist/esm/packages/taco/src/primitives/BubbleSelect.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Collection/components/Root.js +18 -0
- package/dist/esm/packages/taco/src/primitives/Collection/components/Root.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Listbox2/components/Option.js +0 -5
- package/dist/esm/packages/taco/src/primitives/Listbox2/components/Option.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Listbox2/components/Root.js +1 -0
- package/dist/esm/packages/taco/src/primitives/Listbox2/components/Root.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Sortable/components/Item.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/Table.js +8 -8
- package/dist/esm/packages/taco/src/primitives/Table/Core/Table.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Body/EmptyStateBody.js +15 -2
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Body/EmptyStateBody.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Cell/BuiltIns/GroupedCell.js +30 -17
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Cell/BuiltIns/GroupedCell.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Actions.js +9 -6
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Actions.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Drag.js +7 -0
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Drag.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Expansion.js +11 -0
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Expansion.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Selection.js +3 -3
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Selection.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Footer/Footer.js +7 -2
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Footer/Footer.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Header/components/Menu.js +3 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Header/components/Menu.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js +5 -2
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/Row.js +6 -2
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/Row.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/RowContext.js +2 -0
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/RowContext.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Filters/FilterContext.js +6 -0
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Filters/FilterContext.js.map +1 -0
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Filters/ManageFiltersPopover.js +5 -3
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Filters/ManageFiltersPopover.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Filters/components/Filter.js +0 -2
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Filters/components/Filter.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Filters/components/FilterColumn.js +2 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Filters/components/FilterColumn.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Filters/components/FilterValue.js +11 -2
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Filters/components/FilterValue.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Search/Search.js +1 -2
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Search/Search.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/features/useTableRenderer.js +34 -8
- package/dist/esm/packages/taco/src/primitives/Table/Core/features/useTableRenderer.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/useTable.js +2 -2
- package/dist/esm/packages/taco/src/primitives/Table/Core/useTable.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/types.js +1 -7
- package/dist/esm/packages/taco/src/primitives/Table/types.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/features/useTableRowExpansion.js +2 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/features/useTableRowExpansion.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/features/useTableRowSelection.js +2 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/features/useTableRowSelection.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/features/useTableServerLoading.js +13 -7
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/features/useTableServerLoading.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/listeners/useTableFontSizeListener.js +2 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/listeners/useTableFontSizeListener.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/listeners/useTableSearchListener.js +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/listeners/useTableSearchListener.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/useTableManager.js +3 -3
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/useTableManager.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/dataTypes.js +6 -2
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/dataTypes.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/presets.js +7 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/presets.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/search.js +7 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/search.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/setup.js +20 -3
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/setup.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/sorting.js.map +1 -1
- package/dist/esm/packages/taco/src/types.js.map +1 -1
- package/dist/esm/packages/taco/src/utils/dom.js +32 -11
- package/dist/esm/packages/taco/src/utils/dom.js.map +1 -1
- package/dist/esm/packages/taco/src/utils/tailwind.js +2 -0
- package/dist/esm/packages/taco/src/utils/tailwind.js.map +1 -1
- package/dist/esm/packages/taco/tailwind.colors.js +122 -0
- package/dist/esm/packages/taco/tailwind.colors.js.map +1 -0
- package/dist/index.css +76 -10
- package/dist/index.d.ts +5 -0
- package/dist/primitives/Collection/components/Root.d.ts +2 -0
- package/dist/primitives/Table/Core/Table.d.ts +1 -0
- package/dist/primitives/Table/Core/components/Body/EmptyStateBody.d.ts +1 -0
- package/dist/primitives/Table/Core/components/Columns/Internal/Actions.d.ts +3 -1
- package/dist/primitives/Table/Core/components/Footer/Footer.d.ts +1 -1
- package/dist/primitives/Table/Core/components/Row/RowContext.d.ts +2 -0
- package/dist/primitives/Table/Core/components/Toolbar/components/Filters/FilterContext.d.ts +3 -0
- package/dist/primitives/Table/Core/components/Toolbar/components/Filters/components/Filter.d.ts +0 -1
- package/dist/primitives/Table/Core/components/Toolbar/components/Filters/components/FilterColumn.d.ts +0 -3
- package/dist/primitives/Table/Core/features/useTableRenderer.d.ts +2 -2
- package/dist/primitives/Table/Core/features/useTableStyle.d.ts +3 -3
- package/dist/primitives/Table/Core/types.d.ts +5 -0
- package/dist/primitives/Table/Core/useTable.d.ts +2 -2
- package/dist/primitives/Table/types.d.ts +3 -7
- package/dist/primitives/Table/useTableManager/features/useTableRowExpansion.d.ts +2 -1
- package/dist/primitives/Table/useTableManager/features/useTableServerLoading.d.ts +3 -3
- package/dist/primitives/Table/useTableManager/types.d.ts +0 -1
- package/dist/primitives/Table/useTableManager/useTableManager.d.ts +1 -1
- package/dist/primitives/Table/useTableManager/util/dataTypes.d.ts +1 -1
- package/dist/taco.cjs.development.js +2313 -864
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/dist/types.d.ts +1 -1
- package/dist/utils/dom.d.ts +2 -1
- package/package.json +20 -19
- package/tailwind.colors.js +121 -0
- package/tailwind.config.js +3 -2
- package/dist/components/Table3/components/Row/Editing/CreateRowButton.d.ts +0 -11
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/CreateRowButton.js +0 -90
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/CreateRowButton.js.map +0 -1
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Table3.js","sources":["../../../../../../../src/components/Table3/Table3.tsx"],"sourcesContent":["import React from 'react';\nimport { fixedForwardRef } from '../../types';\nimport { useTable3 } from './useTable3';\nimport { Table } from '../../primitives/Table/Core/Table';\nimport { Alert } from './components/Editing/Alert';\nimport
|
1
|
+
{"version":3,"file":"Table3.js","sources":["../../../../../../../src/components/Table3/Table3.tsx"],"sourcesContent":["import React from 'react';\nimport { fixedForwardRef } from '../../types';\nimport { useTable3 } from './useTable3';\nimport { Table } from '../../primitives/Table/Core/Table';\nimport { Alert } from './components/Editing/Alert';\nimport { Table3Props, Table3Ref, Table3ColumnProps, Table3GroupProps } from './types';\nimport { Editing } from './components/Toolbar/Editing/Editing';\nimport { CreateNewRow } from './components/Row/Editing/CreateNewRow';\nimport { TemporaryRow } from './components/Row/Editing/TemporaryRow';\nimport './style.css';\nimport { isTableScrolled } from './util/editing';\n\nfunction Column<TType = unknown>(_: Table3ColumnProps<TType>) {\n return null;\n}\nColumn.displayName = 'Table3Column';\n\nfunction Group(_: Table3GroupProps) {\n return null;\n}\nGroup.displayName = 'Table3Group';\n\nconst BaseTable3 = fixedForwardRef(function BaseTable3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n const table3 = useTable3<TType>(props, ref);\n\n const gridAttributes = {\n 'data-table-editing-mode': table3.meta.editing?.isEditing\n ? table3.meta.editing?.isDetailedMode\n ? 'detailed'\n : 'normal'\n : undefined,\n enableHorizontalArrowKeyNavigation: table3.meta.editing.isEditing,\n };\n\n const hasAlertErrors = table3.meta.editing.getErrorsShownInAlert().length;\n const hasCreateWorkflow = table3.meta.editing.isEnabled && props.onEditingCreate;\n const isScrolled = isTableScrolled(table3.ref);\n\n let createWorkflow;\n\n if (hasCreateWorkflow) {\n createWorkflow = (\n <CreateNewRow\n buttonRef={table3.meta.editing.createRowButtonRef}\n isScrolled={isScrolled}\n scrollToIndex={table3.renderer.scrollToIndex}\n table={table3.instance}\n tableMeta={table3.meta}\n />\n );\n }\n\n return (\n <Table>\n <Table.Toolbar<TType> table={table3}>\n {table3.meta.editing.isEnabled ? (\n <Editing scrollToIndex={table3.renderer.scrollToIndex} table={table3.instance} />\n ) : null}\n </Table.Toolbar>\n {hasAlertErrors ? (\n <Alert\n className=\"mb-4\"\n scrollToIndex={table3.renderer.scrollToIndex}\n table={table3.instance}\n tableRef={table3.ref}\n />\n ) : null}\n <Table.Grid<TType>\n {...gridAttributes}\n data-taco=\"table3\"\n footerRows={hasCreateWorkflow && isScrolled ? createWorkflow : undefined}\n table={table3}>\n {hasCreateWorkflow ? (\n <>\n <TemporaryRow\n createRowButtonRef={table3.meta.editing.createRowButtonRef}\n isScrolled={isScrolled}\n table={table3.instance}\n tableMeta={table3.meta}\n tableRef={table3.ref}\n />\n {!isScrolled ? createWorkflow : null}\n </>\n ) : null}\n </Table.Grid>\n </Table>\n );\n});\n\nexport const Table3 = fixedForwardRef(function Table3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n const stringifiedChildren = String(props.children);\n // we force a remount (using key) when the child columns change because there are too many places to add children as an effect\n // this is cheaper from a complexity perspective, and probably performance wise as well\n const key = React.useMemo(() => String('tableKey_' + stringifiedChildren), [stringifiedChildren]);\n return <BaseTable3<TType> {...props} key={key} ref={ref} />;\n}) as (<TType = unknown>(props: Table3Props<TType> & React.RefAttributes<Table3Ref>) => JSX.Element) & {\n Column: typeof Column;\n Group: typeof Group;\n};\nTable3.Column = Column;\nTable3.Group = Group;\n\nexport type {\n Table3Ref,\n Table3Props,\n Table3ColumnProps,\n Table3GroupProps,\n Table3EditingSaveHandler,\n Table3EditingValidatorFn,\n Table3Texts,\n Table3FeatureProps,\n Table3CommonProps,\n Table3WithoutEditingWithClientProps,\n Table3WithoutEditingWithServerProps,\n Table3WithEditingProps,\n Table3WithEditingWithClientProps,\n Table3WithEditingWithServerProps,\n Table3EditingChangeHandler,\n Table3EditingCreateHandler,\n} from './types';\n"],"names":["Column","_","displayName","Group","BaseTable3","fixedForwardRef","props","ref","table3","useTable3","gridAttributes","_table3$meta$editing","meta","editing","isEditing","_table3$meta$editing2","isDetailedMode","undefined","enableHorizontalArrowKeyNavigation","hasAlertErrors","getErrorsShownInAlert","length","hasCreateWorkflow","isEnabled","onEditingCreate","isScrolled","isTableScrolled","createWorkflow","React","CreateNewRow","buttonRef","createRowButtonRef","scrollToIndex","renderer","table","instance","tableMeta","Table","Toolbar","Editing","Alert","className","tableRef","Grid","footerRows","TemporaryRow","Table3","stringifiedChildren","String","children","key","useMemo"],"mappings":"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"}
|
@@ -43,7 +43,6 @@ function RowMoveIndicator(props) {
|
|
43
43
|
if (!show) {
|
44
44
|
return null;
|
45
45
|
}
|
46
|
-
const className = 'wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap rounded-b-md px-1 py-1 text-xs font-bold z-10';
|
47
46
|
const {
|
48
47
|
title,
|
49
48
|
description
|
@@ -52,7 +51,7 @@ function RowMoveIndicator(props) {
|
|
52
51
|
placement: "bottom",
|
53
52
|
title: description.replace('[COLUMN]', columnMeta.header)
|
54
53
|
}, /*#__PURE__*/React__default.createElement("span", {
|
55
|
-
|
54
|
+
"data-row-move-indicator": true
|
56
55
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
57
56
|
name: "info",
|
58
57
|
className: "-mt-0.5 mr-1 !h-4 !w-4 rounded-full bg-white !p-0 text-blue-500"
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"RowMoveIndicator.js","sources":["../../../../../../../../../../../src/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { Cell as ReactTableCell, TableMeta as ReactTableMeta, ColumnMeta as ReactTableColumnMeta } from '@tanstack/react-table';\nimport { Tooltip } from '../../../../../Tooltip/Tooltip';\nimport { LocalizationTexts, useLocalization } from '../../../../../Provider/Localization';\nimport { Icon } from '../../../../../Icon/Icon';\n\ntype TableRowMoveIndicatorProps<TType = unknown> = {\n cell: ReactTableCell<TType, unknown>;\n cellRef: React.RefObject<HTMLTableCellElement>;\n isActiveRow: boolean;\n};\n\nexport function RowMoveIndicator<TType = unknown>(props: TableRowMoveIndicatorProps<TType>) {\n const { cell, cellRef, isActiveRow } = props;\n const { texts } = useLocalization();\n const [show, setShow] = React.useState(false);\n const tableMeta = cell.getContext().table.options.meta as ReactTableMeta<TType>;\n const columnMeta = (cell.column.columnDef.meta ?? {}) as ReactTableColumnMeta<TType, unknown>;\n const moveReason = tableMeta.editing.getRowMoveReason(cell.row.id);\n\n React.useEffect(() => {\n if (cellRef.current) {\n if (isActiveRow && !!moveReason) {\n const firstChild = cellRef.current.parentElement?.querySelector(`td[data-taco=\"cell-control\"]`);\n\n if (cellRef.current === firstChild) {\n setShow(true);\n cellRef.current.parentElement?.setAttribute('data-row-editing-move', 'true');\n }\n } else {\n setShow(false);\n cellRef.current.parentElement?.removeAttribute('data-row-editing-move');\n }\n }\n\n return () => {\n if (cellRef.current) {\n cellRef.current.parentElement?.removeAttribute('data-row-editing-move');\n }\n };\n }, [cellRef, isActiveRow, moveReason]);\n\n if (!show) {\n return null;\n }\n\n const
|
1
|
+
{"version":3,"file":"RowMoveIndicator.js","sources":["../../../../../../../../../../../src/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { Cell as ReactTableCell, TableMeta as ReactTableMeta, ColumnMeta as ReactTableColumnMeta } from '@tanstack/react-table';\nimport { Tooltip } from '../../../../../Tooltip/Tooltip';\nimport { LocalizationTexts, useLocalization } from '../../../../../Provider/Localization';\nimport { Icon } from '../../../../../Icon/Icon';\n\ntype TableRowMoveIndicatorProps<TType = unknown> = {\n cell: ReactTableCell<TType, unknown>;\n cellRef: React.RefObject<HTMLTableCellElement>;\n isActiveRow: boolean;\n};\n\nexport function RowMoveIndicator<TType = unknown>(props: TableRowMoveIndicatorProps<TType>) {\n const { cell, cellRef, isActiveRow } = props;\n const { texts } = useLocalization();\n const [show, setShow] = React.useState(false);\n const tableMeta = cell.getContext().table.options.meta as ReactTableMeta<TType>;\n const columnMeta = (cell.column.columnDef.meta ?? {}) as ReactTableColumnMeta<TType, unknown>;\n const moveReason = tableMeta.editing.getRowMoveReason(cell.row.id) as 'search' | 'sorting' | 'filter' | undefined;\n\n React.useEffect(() => {\n if (cellRef.current) {\n if (isActiveRow && !!moveReason) {\n const firstChild = cellRef.current.parentElement?.querySelector(`td[data-taco=\"cell-control\"]`);\n\n if (cellRef.current === firstChild) {\n setShow(true);\n cellRef.current.parentElement?.setAttribute('data-row-editing-move', 'true');\n }\n } else {\n setShow(false);\n cellRef.current.parentElement?.removeAttribute('data-row-editing-move');\n }\n }\n\n return () => {\n if (cellRef.current) {\n cellRef.current.parentElement?.removeAttribute('data-row-editing-move');\n }\n };\n }, [cellRef, isActiveRow, moveReason]);\n\n if (!show) {\n return null;\n }\n\n const { title, description } = getMessageFromReason(texts, moveReason);\n\n return (\n <Tooltip placement=\"bottom\" title={description.replace('[COLUMN]', columnMeta.header)}>\n <span data-row-move-indicator>\n <Icon name=\"info\" className=\"-mt-0.5 mr-1 !h-4 !w-4 rounded-full bg-white !p-0 text-blue-500\" />\n {title}\n </span>\n </Tooltip>\n );\n}\n\nfunction getMessageFromReason(texts: LocalizationTexts, reason: 'search' | 'sorting' | 'filter' | undefined) {\n let title = '';\n let description = '';\n\n switch (reason) {\n case 'filter':\n title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n description = texts.table3.editing.rowIndicator.rowWillMoveReasonFilter;\n break;\n\n case 'search':\n title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n description = texts.table3.editing.rowIndicator.rowWillMoveReasonSearch;\n break;\n\n case 'sorting':\n title = texts.table3.editing.rowIndicator.rowWillMove;\n description = texts.table3.editing.rowIndicator.rowWillMoveReasonSorting;\n break;\n }\n\n return { title, description };\n}\n"],"names":["RowMoveIndicator","props","cell","cellRef","isActiveRow","texts","useLocalization","show","setShow","React","useState","tableMeta","getContext","table","options","meta","columnMeta","_cell$column$columnDe","column","columnDef","moveReason","editing","getRowMoveReason","row","id","useEffect","current","_cellRef$current$pare","firstChild","parentElement","querySelector","_cellRef$current$pare2","setAttribute","_cellRef$current$pare3","removeAttribute","_cellRef$current$pare4","title","description","getMessageFromReason","Tooltip","placement","replace","header","Icon","name","className","reason","table3","rowIndicator","rowWillBeHidden","rowWillMoveReasonFilter","rowWillMoveReasonSearch","rowWillMove","rowWillMoveReasonSorting"],"mappings":"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"}
|
package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/EditingControlCell.js
CHANGED
@@ -1,6 +1,7 @@
|
|
1
1
|
import React__default from 'react';
|
2
2
|
import { isElementInsideOrTriggeredFromContainer } from '../../../../../utils/dom.js';
|
3
3
|
import { isPressingMetaKey } from '../../../../../utils/keyboard.js';
|
4
|
+
import { Checkbox } from '../../../../Checkbox/Checkbox.js';
|
4
5
|
import { Input } from '../../../../Input/Input.js';
|
5
6
|
import { isDate } from 'date-fns';
|
6
7
|
import { parse, isWeakEqual } from '../../../../../utils/date.js';
|
@@ -24,20 +25,44 @@ function EditingControlCell(props) {
|
|
24
25
|
const {
|
25
26
|
rowIndex
|
26
27
|
} = React__default.useContext(RowContext);
|
27
|
-
const
|
28
|
+
const {
|
29
|
+
table
|
30
|
+
} = cell.getContext();
|
31
|
+
const tableMeta = table.options.meta;
|
28
32
|
const columnMeta = cell.column.columnDef.meta;
|
29
33
|
const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;
|
34
|
+
const type = (_columnMeta$control = columnMeta.control) !== null && _columnMeta$control !== void 0 ? _columnMeta$control : 'input';
|
30
35
|
const handleFocus = useEditingCellAutofocus(props);
|
31
|
-
const
|
36
|
+
const value = cell.getValue();
|
37
|
+
// some controls, like select2, should trigger cell changed (validation, updates) as the value changes
|
38
|
+
const hasNonTextControl = React__default.useMemo(() => {
|
39
|
+
var _cellRef$current;
|
40
|
+
return typeof type === 'function' && !!((_cellRef$current = cellRef.current) !== null && _cellRef$current !== void 0 && _cellRef$current.querySelector('[data-taco="Select2"],[data-taco="switch"],[data-taco="checkbox"]'));
|
41
|
+
}, [cellRef.current]);
|
42
|
+
const handleChange = React__default.useCallback(nextValue => {
|
43
|
+
if (nextValue !== value) {
|
44
|
+
tableMeta.editing.setCellValue(cell, nextValue);
|
45
|
+
if (hasNonTextControl) {
|
46
|
+
requestAnimationFrame(() => tableMeta.editing.onCellChanged(cell, rowIndex, nextValue));
|
47
|
+
}
|
48
|
+
}
|
49
|
+
}, [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex, value]);
|
50
|
+
const blur = React__default.useCallback(function blur() {
|
32
51
|
tableMeta.editing.toggleDetailedMode(false);
|
33
|
-
tableMeta.editing.
|
34
|
-
};
|
52
|
+
tableMeta.editing.onCellChanged(cell, rowIndex, undefined, !hasNonTextControl);
|
53
|
+
}, [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex]);
|
54
|
+
const handleBlur = React__default.useCallback(event => {
|
55
|
+
if (isElementInsideOrTriggeredFromContainer(event.relatedTarget, event.currentTarget)) {
|
56
|
+
return;
|
57
|
+
}
|
58
|
+
blur();
|
59
|
+
}, [blur]);
|
35
60
|
// ensure that blur runs when the cell gets unmounted (when vertically arrow key navigating)
|
36
61
|
React__default.useEffect(() => {
|
37
62
|
const ref = cellRef.current;
|
38
63
|
return () => {
|
39
64
|
if (document.activeElement === ref || isElementInsideOrTriggeredFromContainer(document.activeElement, ref)) {
|
40
|
-
|
65
|
+
blur();
|
41
66
|
}
|
42
67
|
};
|
43
68
|
}, []);
|
@@ -50,14 +75,13 @@ function EditingControlCell(props) {
|
|
50
75
|
isDetailedMode: tableMeta.editing.isDetailedMode,
|
51
76
|
isTruncated: !!columnMeta.enableTruncate,
|
52
77
|
onBlur: handleBlur,
|
53
|
-
onChange:
|
78
|
+
onChange: handleChange,
|
54
79
|
row: cell.row.original,
|
55
|
-
rowPendingChanges: tableMeta.editing.
|
80
|
+
rowPendingChanges: tableMeta.editing.getRowValue(cell.row.id),
|
56
81
|
tabIndex: isActiveRow ? 0 : -1,
|
57
|
-
toggleEditing: tableMeta.editing.toggleEditing,
|
58
82
|
toggleDetailedMode: tableMeta.editing.toggleDetailedMode,
|
59
|
-
type
|
60
|
-
value
|
83
|
+
type,
|
84
|
+
value
|
61
85
|
};
|
62
86
|
const cellAttributes = {
|
63
87
|
...getCellAttributes(cell, index, isHighlighted),
|
@@ -89,7 +113,6 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
|
|
89
113
|
row,
|
90
114
|
rowPendingChanges,
|
91
115
|
tabIndex = -1,
|
92
|
-
toggleEditing,
|
93
116
|
toggleDetailedMode,
|
94
117
|
type = 'input',
|
95
118
|
value
|
@@ -120,6 +143,13 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
|
|
120
143
|
ref: controlRef
|
121
144
|
}));
|
122
145
|
}
|
146
|
+
if (type === 'checkbox') {
|
147
|
+
return /*#__PURE__*/React__default.createElement(Checkbox, Object.assign({}, commonProps, {
|
148
|
+
checked: Boolean(value),
|
149
|
+
onChange: onChange,
|
150
|
+
ref: controlRef
|
151
|
+
}));
|
152
|
+
}
|
123
153
|
const handleInputKeyDown = event => {
|
124
154
|
const target = event.target;
|
125
155
|
if (target.readOnly) {
|
@@ -148,8 +178,8 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
|
|
148
178
|
}
|
149
179
|
// reset the value, or exit edit mode when pressing escape
|
150
180
|
if (event.key === 'Escape') {
|
151
|
-
event.preventDefault();
|
152
181
|
if (isDetailedMode) {
|
182
|
+
event.preventDefault();
|
153
183
|
toggleDetailedMode(false);
|
154
184
|
if (value !== currentValue) {
|
155
185
|
props.onChange(currentValue);
|
@@ -159,8 +189,6 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
|
|
159
189
|
var _target$select2;
|
160
190
|
return (_target$select2 = target.select) === null || _target$select2 === void 0 ? void 0 : _target$select2.call(target);
|
161
191
|
});
|
162
|
-
} else {
|
163
|
-
toggleEditing(false);
|
164
192
|
}
|
165
193
|
return;
|
166
194
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"EditingControlCell.js","sources":["../../../../../../../../../../src/components/Table3/components/Columns/Cell/EditingControlCell.tsx"],"sourcesContent":["import React from 'react';\nimport { TableMeta as ReactTableMeta, ColumnMeta as ReactTableColumnMeta } from '@tanstack/react-table';\nimport { isDate } from 'date-fns';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Input } from '../../../../Input/Input';\nimport { TableColumnDataType, TableColumnRendererControl, TableFontSize } from '../../../../../primitives/Table/types';\nimport * as date from '../../../../../utils/date';\nimport { RowMoveIndicator } from './Editing/RowMoveIndicator';\nimport { TextareaWithAutosizing } from './Editing/TextareaWithAutosizing';\nimport { Field } from '../../../../Field/Field';\nimport { isElementInsideOrTriggeredFromContainer } from '../../../../../utils/dom';\nimport { TableCellRendererProps } from '../../../../../primitives/Table/Core/types';\nimport { RowContext } from '../../../../../primitives/Table/Core/components/Row/RowContext';\nimport { getCellAttributes } from '../../../../../primitives/Table/Core/components/Columns/Cell/util';\nimport { useEditingCellAutofocus } from './util';\nimport { isPressingMetaKey } from '../../../../../utils/keyboard';\n\nexport function EditingControlCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n const { cell, cellRef, isHighlighted, index } = props;\n const { rowIndex } = React.useContext(RowContext);\n const tableMeta = cell.getContext().table.options.meta as ReactTableMeta<TType>;\n const columnMeta = cell.column.columnDef.meta as ReactTableColumnMeta<TType, unknown>;\n const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n\n const handleFocus = useEditingCellAutofocus<TType>(props);\n\n const handleBlur = () => {\n tableMeta.editing.toggleDetailedMode(false);\n tableMeta.editing.validateCell(cell);\n };\n\n // ensure that blur runs when the cell gets unmounted (when vertically arrow key navigating)\n React.useEffect(() => {\n const ref = cellRef.current;\n\n return () => {\n if (document.activeElement === ref || isElementInsideOrTriggeredFromContainer(document.activeElement, ref)) {\n handleBlur();\n }\n };\n }, []);\n\n const error = tableMeta.editing.getCellError<TType>(cell);\n\n const controlProps = {\n dataType: columnMeta.dataType,\n fontSize: tableMeta.fontSize.size,\n id: cell.column.id,\n invalid: !!error,\n isDetailedMode: tableMeta.editing.isDetailedMode,\n isTruncated: !!columnMeta.enableTruncate,\n onBlur: handleBlur,\n onChange: (value: unknown) => tableMeta.editing.setCellValue(cell, value, rowIndex),\n row: cell.row.original,\n rowPendingChanges: tableMeta.editing.getRowPendingChange(cell.row.id),\n tabIndex: isActiveRow ? 0 : -1,\n toggleEditing: tableMeta.editing.toggleEditing,\n toggleDetailedMode: tableMeta.editing.toggleDetailedMode,\n type: columnMeta.control ?? 'input',\n value: cell.getValue(),\n };\n\n const cellAttributes = {\n ...getCellAttributes(cell, index, isHighlighted),\n 'data-cell-editing-invalid': error ? true : undefined,\n 'data-taco': 'cell-control',\n onFocus: handleFocus,\n ref: cellRef,\n tabIndex: -1,\n };\n\n return (\n <td {...cellAttributes}>\n <Field invalid={!!error} message={error}>\n <MemoedEditingCell<TType> {...controlProps} />\n </Field>\n {\n // we show row move indicator here within the cell rather than the row because it is\n // an editing only feature, and we don't want to leak editing into the shared row component\n }\n <RowMoveIndicator cell={cell} cellRef={cellRef} isActiveRow={isActiveRow} />\n </td>\n );\n}\n\ntype MemoedEditingCellProps<TType = unknown, TValue = unknown> = {\n dataType?: TableColumnDataType;\n fontSize: TableFontSize;\n id: string;\n invalid: boolean;\n isDetailedMode: boolean;\n isTruncated: boolean;\n onBlur: () => void;\n onChange: (value: TValue) => void;\n row: TType;\n rowPendingChanges: Partial<TType> | undefined;\n tabIndex?: number;\n toggleEditing: (editing: React.SetStateAction<boolean>) => void;\n toggleDetailedMode: (detailed: React.SetStateAction<boolean>) => void;\n type: TableColumnRendererControl<TType>;\n value: TValue;\n};\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n const {\n dataType,\n fontSize,\n id,\n invalid,\n isDetailedMode,\n isTruncated,\n onBlur,\n onChange,\n row,\n rowPendingChanges,\n tabIndex = -1,\n toggleEditing,\n toggleDetailedMode,\n type = 'input',\n value,\n } = props;\n const controlRef = React.useRef<HTMLElement>(null);\n const currentValue = (row as any)[id];\n const commonProps = {\n onBlur,\n ref: controlRef,\n tabIndex,\n };\n\n if (typeof type === 'function') {\n const controlFnProps = {\n ...commonProps,\n invalid,\n setValue: onChange,\n value,\n };\n\n return type(controlFnProps, { ...row, ...rowPendingChanges });\n }\n\n if (type === 'switch') {\n return (\n <Switch\n {...commonProps}\n checked={Boolean(value)}\n onChange={onChange}\n ref={controlRef as React.RefObject<HTMLButtonElement>}\n />\n );\n }\n\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n const target = event.target as HTMLInputElement | HTMLTextAreaElement;\n\n if (target.readOnly) {\n return;\n }\n\n // prevent active row navigation while in detailed mode\n if (\n isDetailedMode &&\n (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight')\n ) {\n event.stopPropagation();\n }\n\n // enter or exit detail mode when pressing enter\n if (event.key === 'Enter') {\n // textareas support shift and enter, don't prevent default in that case\n if (event.shiftKey && isDetailedMode) {\n return;\n }\n\n event.preventDefault();\n\n if (isDetailedMode) {\n target.select?.();\n } else {\n target.setSelectionRange?.(target.value?.length, target.value?.length);\n }\n\n toggleDetailedMode(editing => !editing);\n return;\n }\n\n // reset the value, or exit edit mode when pressing escape\n if (event.key === 'Escape') {\n event.preventDefault();\n\n if (isDetailedMode) {\n toggleDetailedMode(false);\n\n if (value !== currentValue) {\n props.onChange(currentValue);\n }\n\n // have to let onChange run before selecting, otherwise the value changes\n requestAnimationFrame(() => target.select?.());\n } else {\n toggleEditing(false);\n }\n\n return;\n }\n\n // toggle into detailed mode when actually inputting something\n if (!isPressingMetaKey(event) && (/^[a-z0-9]$/i.test(event.key) || event.key === 'Backspace')) {\n toggleDetailedMode(true);\n }\n };\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n if (!isDetailedMode) {\n event.target.select();\n }\n };\n\n if (type === 'datepicker') {\n const valueAsDate = date.parse(value as Date | string | undefined);\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const newDate = (event as any).detail as Date;\n\n if (!valueAsDate || !newDate || (isDate(valueAsDate) && isDate(newDate) && !date.isWeakEqual(valueAsDate, newDate))) {\n props.onChange(newDate);\n }\n };\n\n return (\n <Datepicker\n {...commonProps}\n invalid={invalid}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleInputKeyDown}\n ref={controlRef as React.RefObject<HTMLInputElement>}\n value={valueAsDate}\n />\n );\n }\n\n if (type === 'textarea') {\n const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n onChange(event.target.value);\n };\n\n return (\n <TextareaWithAutosizing\n {...commonProps}\n fontSize={fontSize}\n invalid={invalid}\n isTruncated={isTruncated}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleInputKeyDown}\n ref={controlRef as React.RefObject<HTMLTextAreaElement>}\n value={String(value ?? '')}\n />\n );\n }\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange(dataType === 'number' && event.target.value ? Number.parseInt(event.target.value) : event.target.value);\n };\n\n return (\n <Input\n {...commonProps}\n invalid={invalid}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleInputKeyDown}\n ref={controlRef as React.RefObject<HTMLInputElement>}\n type={dataType === 'number' ? 'number' : undefined}\n value={dataType === 'number' ? (value as number) : String(value ?? '')}\n />\n );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => JSX.Element;\n"],"names":["EditingControlCell","props","cell","cellRef","isHighlighted","index","rowIndex","React","useContext","RowContext","tableMeta","getContext","table","options","meta","columnMeta","column","columnDef","isActiveRow","rowActive","rowActiveIndex","handleFocus","useEditingCellAutofocus","handleBlur","editing","toggleDetailedMode","validateCell","useEffect","ref","current","document","activeElement","isElementInsideOrTriggeredFromContainer","error","getCellError","controlProps","dataType","fontSize","size","id","invalid","isDetailedMode","isTruncated","enableTruncate","onBlur","onChange","value","setCellValue","row","original","rowPendingChanges","getRowPendingChange","tabIndex","toggleEditing","type","_columnMeta$control","control","getValue","cellAttributes","getCellAttributes","undefined","onFocus","Field","message","MemoedEditingCell","RowMoveIndicator","memo","controlRef","useRef","currentValue","commonProps","controlFnProps","setValue","Switch","checked","Boolean","handleInputKeyDown","event","target","readOnly","key","stopPropagation","shiftKey","preventDefault","_target$select","select","call","_target$setSelectionR","_target$value","_target$value2","setSelectionRange","length","requestAnimationFrame","_target$select2","isPressingMetaKey","test","valueAsDate","date","handleChange","newDate","detail","isDate","Datepicker","onKeyDown","TextareaWithAutosizing","String","Number","parseInt","Input"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"EditingControlCell.js","sources":["../../../../../../../../../../src/components/Table3/components/Columns/Cell/EditingControlCell.tsx"],"sourcesContent":["import React from 'react';\nimport { TableMeta as ReactTableMeta, ColumnMeta as ReactTableColumnMeta } from '@tanstack/react-table';\nimport { isDate } from 'date-fns';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Input } from '../../../../Input/Input';\nimport { TableColumnDataType, TableColumnRendererControl, TableFontSize } from '../../../../../primitives/Table/types';\nimport * as date from '../../../../../utils/date';\nimport { RowMoveIndicator } from './Editing/RowMoveIndicator';\nimport { TextareaWithAutosizing } from './Editing/TextareaWithAutosizing';\nimport { Field } from '../../../../Field/Field';\nimport { isElementInsideOrTriggeredFromContainer } from '../../../../../utils/dom';\nimport { TableCellRendererProps } from '../../../../../primitives/Table/Core/types';\nimport { RowContext } from '../../../../../primitives/Table/Core/components/Row/RowContext';\nimport { getCellAttributes } from '../../../../../primitives/Table/Core/components/Columns/Cell/util';\nimport { useEditingCellAutofocus } from './util';\nimport { isPressingMetaKey } from '../../../../../utils/keyboard';\nimport { Checkbox } from '../../../../Checkbox/Checkbox';\n\nexport function EditingControlCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n const { cell, cellRef, isHighlighted, index } = props;\n const { rowIndex } = React.useContext(RowContext);\n const { table } = cell.getContext();\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const columnMeta = cell.column.columnDef.meta as ReactTableColumnMeta<TType, unknown>;\n const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n const type = columnMeta.control ?? 'input';\n const handleFocus = useEditingCellAutofocus<TType>(props);\n const value = cell.getValue();\n\n // some controls, like select2, should trigger cell changed (validation, updates) as the value changes\n const hasNonTextControl = React.useMemo(() => {\n return (\n typeof type === 'function' &&\n !!cellRef.current?.querySelector('[data-taco=\"Select2\"],[data-taco=\"switch\"],[data-taco=\"checkbox\"]')\n );\n }, [cellRef.current]);\n\n const handleChange = React.useCallback(\n (nextValue: unknown) => {\n if (nextValue !== value) {\n tableMeta.editing.setCellValue(cell, nextValue);\n\n if (hasNonTextControl) {\n requestAnimationFrame(() => tableMeta.editing.onCellChanged(cell, rowIndex, nextValue));\n }\n }\n },\n [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex, value]\n );\n\n const blur = React.useCallback(\n function blur() {\n tableMeta.editing.toggleDetailedMode(false);\n tableMeta.editing.onCellChanged(cell, rowIndex, undefined, !hasNonTextControl);\n },\n [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex]\n );\n\n const handleBlur = React.useCallback(\n (event: React.FocusEvent) => {\n if (isElementInsideOrTriggeredFromContainer(event.relatedTarget, event.currentTarget)) {\n return;\n }\n blur();\n },\n [blur]\n );\n\n // ensure that blur runs when the cell gets unmounted (when vertically arrow key navigating)\n React.useEffect(() => {\n const ref = cellRef.current;\n\n return () => {\n if (document.activeElement === ref || isElementInsideOrTriggeredFromContainer(document.activeElement, ref)) {\n blur();\n }\n };\n }, []);\n\n const error = tableMeta.editing.getCellError<TType>(cell);\n\n const controlProps = {\n dataType: columnMeta.dataType,\n fontSize: tableMeta.fontSize.size,\n id: cell.column.id,\n invalid: !!error,\n isDetailedMode: tableMeta.editing.isDetailedMode,\n isTruncated: !!columnMeta.enableTruncate,\n onBlur: handleBlur,\n onChange: handleChange,\n row: cell.row.original,\n rowPendingChanges: tableMeta.editing.getRowValue(cell.row.id),\n tabIndex: isActiveRow ? 0 : -1,\n toggleDetailedMode: tableMeta.editing.toggleDetailedMode,\n type,\n value,\n };\n\n const cellAttributes = {\n ...getCellAttributes(cell, index, isHighlighted),\n 'data-cell-editing-invalid': error ? true : undefined,\n 'data-taco': 'cell-control',\n onFocus: handleFocus,\n ref: cellRef,\n tabIndex: -1,\n };\n\n return (\n <td {...cellAttributes}>\n <Field invalid={!!error} message={error}>\n <MemoedEditingCell<TType> {...controlProps} />\n </Field>\n {\n // we show row move indicator here within the cell rather than the row because it is\n // an editing only feature, and we don't want to leak editing into the shared row component\n }\n <RowMoveIndicator cell={cell} cellRef={cellRef} isActiveRow={isActiveRow} />\n </td>\n );\n}\n\ntype MemoedEditingCellProps<TType = unknown, TValue = unknown> = {\n dataType?: TableColumnDataType;\n fontSize: TableFontSize;\n id: string;\n invalid: boolean;\n isDetailedMode: boolean;\n isTruncated: boolean;\n onBlur: (event: React.FocusEvent) => void;\n onChange: (value: TValue) => void;\n row: TType;\n rowPendingChanges: Partial<TType> | undefined;\n tabIndex?: number;\n toggleDetailedMode: (detailed: React.SetStateAction<boolean>) => void;\n type: TableColumnRendererControl<TType>;\n value: TValue;\n};\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n const {\n dataType,\n fontSize,\n id,\n invalid,\n isDetailedMode,\n isTruncated,\n onBlur,\n onChange,\n row,\n rowPendingChanges,\n tabIndex = -1,\n toggleDetailedMode,\n type = 'input',\n value,\n } = props;\n const controlRef = React.useRef<HTMLElement>(null);\n const currentValue = row[id];\n const commonProps = {\n onBlur,\n ref: controlRef,\n tabIndex,\n };\n\n if (typeof type === 'function') {\n const controlFnProps = {\n ...commonProps,\n invalid,\n setValue: onChange,\n value,\n };\n\n return type(controlFnProps, { ...row, ...rowPendingChanges });\n }\n\n if (type === 'switch') {\n return (\n <Switch\n {...commonProps}\n checked={Boolean(value)}\n onChange={onChange}\n ref={controlRef as React.RefObject<HTMLButtonElement>}\n />\n );\n }\n\n if (type === 'checkbox') {\n return (\n <Checkbox\n {...commonProps}\n checked={Boolean(value)}\n onChange={onChange}\n ref={controlRef as React.RefObject<HTMLButtonElement>}\n />\n );\n }\n\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n const target = event.target as HTMLInputElement | HTMLTextAreaElement;\n\n if (target.readOnly) {\n return;\n }\n\n // prevent active row navigation while in detailed mode\n if (\n isDetailedMode &&\n (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight')\n ) {\n event.stopPropagation();\n }\n\n // enter or exit detail mode when pressing enter\n if (event.key === 'Enter') {\n // textareas support shift and enter, don't prevent default in that case\n if (event.shiftKey && isDetailedMode) {\n return;\n }\n\n event.preventDefault();\n\n if (isDetailedMode) {\n target.select?.();\n } else {\n target.setSelectionRange?.(target.value?.length, target.value?.length);\n }\n\n toggleDetailedMode(editing => !editing);\n return;\n }\n\n // reset the value, or exit edit mode when pressing escape\n if (event.key === 'Escape') {\n if (isDetailedMode) {\n event.preventDefault();\n toggleDetailedMode(false);\n\n if (value !== currentValue) {\n props.onChange(currentValue);\n }\n\n // have to let onChange run before selecting, otherwise the value changes\n requestAnimationFrame(() => target.select?.());\n }\n\n return;\n }\n\n // toggle into detailed mode when actually inputting something\n if (!isPressingMetaKey(event) && (/^[a-z0-9]$/i.test(event.key) || event.key === 'Backspace')) {\n toggleDetailedMode(true);\n }\n };\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n if (!isDetailedMode) {\n event.target.select();\n }\n };\n\n if (type === 'datepicker') {\n const valueAsDate = date.parse(value as Date | string | undefined);\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const newDate = (event as any).detail as Date;\n\n if (!valueAsDate || !newDate || (isDate(valueAsDate) && isDate(newDate) && !date.isWeakEqual(valueAsDate, newDate))) {\n props.onChange(newDate);\n }\n };\n\n return (\n <Datepicker\n {...commonProps}\n invalid={invalid}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleInputKeyDown}\n ref={controlRef as React.RefObject<HTMLInputElement>}\n value={valueAsDate}\n />\n );\n }\n\n if (type === 'textarea') {\n const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n onChange(event.target.value);\n };\n\n return (\n <TextareaWithAutosizing\n {...commonProps}\n fontSize={fontSize}\n invalid={invalid}\n isTruncated={isTruncated}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleInputKeyDown}\n ref={controlRef as React.RefObject<HTMLTextAreaElement>}\n value={String(value ?? '')}\n />\n );\n }\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange(dataType === 'number' && event.target.value ? Number.parseInt(event.target.value) : event.target.value);\n };\n\n return (\n <Input\n {...commonProps}\n invalid={invalid}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleInputKeyDown}\n ref={controlRef as React.RefObject<HTMLInputElement>}\n type={dataType === 'number' ? 'number' : undefined}\n value={dataType === 'number' ? (value as number) : String(value ?? '')}\n />\n );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => JSX.Element;\n"],"names":["EditingControlCell","props","cell","cellRef","isHighlighted","index","rowIndex","React","useContext","RowContext","table","getContext","tableMeta","options","meta","columnMeta","column","columnDef","isActiveRow","rowActive","rowActiveIndex","type","_columnMeta$control","control","handleFocus","useEditingCellAutofocus","value","getValue","hasNonTextControl","useMemo","_cellRef$current","current","querySelector","handleChange","useCallback","nextValue","editing","setCellValue","requestAnimationFrame","onCellChanged","row","id","original","blur","toggleDetailedMode","undefined","handleBlur","event","isElementInsideOrTriggeredFromContainer","relatedTarget","currentTarget","useEffect","ref","document","activeElement","error","getCellError","controlProps","dataType","fontSize","size","invalid","isDetailedMode","isTruncated","enableTruncate","onBlur","onChange","rowPendingChanges","getRowValue","tabIndex","cellAttributes","getCellAttributes","onFocus","Field","message","MemoedEditingCell","RowMoveIndicator","memo","controlRef","useRef","currentValue","commonProps","controlFnProps","setValue","Switch","checked","Boolean","Checkbox","handleInputKeyDown","target","readOnly","key","stopPropagation","shiftKey","preventDefault","_target$select","select","call","_target$setSelectionR","_target$value","_target$value2","setSelectionRange","length","_target$select2","isPressingMetaKey","test","valueAsDate","date","newDate","detail","isDate","Datepicker","onKeyDown","TextareaWithAutosizing","String","Number","parseInt","Input"],"mappings":"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"}
|
@@ -1,17 +1,14 @@
|
|
1
1
|
import React__default from 'react';
|
2
2
|
import { IconButton } from '../../../../IconButton/IconButton.js';
|
3
3
|
import { useLocalization } from '../../../../Provider/Localization.js';
|
4
|
-
import { Button } from '../../../../Button/Button.js';
|
5
|
-
import { Dialog } from '../../../../Dialog/Dialog.js';
|
6
|
-
import { Group } from '../../../../Group/Group.js';
|
7
4
|
import { Menu } from '../../../../Menu/Menu.js';
|
5
|
+
import { DiscardChangesConfirmationDialog } from '../../Editing/DiscardChangesConfirmationDialog.js';
|
8
6
|
|
9
|
-
function
|
7
|
+
function EditingActionsMenu(props) {
|
10
8
|
const {
|
11
9
|
hasChanges,
|
12
10
|
hasErrors,
|
13
|
-
|
14
|
-
onExit: handleExit,
|
11
|
+
onDiscard: handleDiscard,
|
15
12
|
onEditingSave: handleSave,
|
16
13
|
isLastRow
|
17
14
|
} = props;
|
@@ -33,11 +30,11 @@ function EditingActionMenu(props) {
|
|
33
30
|
return /*#__PURE__*/React__default.createElement(IconButton, {
|
34
31
|
appearance: "transparent",
|
35
32
|
"aria-label": texts.table3.editing.actions.tooltip,
|
36
|
-
className: "group-[[data-row-editing-status]]/row:hidden",
|
37
33
|
icon: "more",
|
38
34
|
onKeyDown: handleKeyDown,
|
39
35
|
menu: menuProps => (/*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, {
|
40
|
-
onKeyDown: handleMenuContentKeyDown
|
36
|
+
onKeyDown: handleMenuContentKeyDown,
|
37
|
+
onFocusOutside: event => event.preventDefault()
|
41
38
|
}, /*#__PURE__*/React__default.createElement(Menu.Item, {
|
42
39
|
icon: "tick",
|
43
40
|
disabled: !hasChanges || hasErrors,
|
@@ -45,40 +42,12 @@ function EditingActionMenu(props) {
|
|
45
42
|
}, texts.table3.editing.actions.save), /*#__PURE__*/React__default.createElement(Menu.Item, {
|
46
43
|
icon: "close",
|
47
44
|
disabled: !hasChanges,
|
48
|
-
dialog: props => /*#__PURE__*/React__default.createElement(
|
49
|
-
|
45
|
+
dialog: props => /*#__PURE__*/React__default.createElement(DiscardChangesConfirmationDialog, Object.assign({}, props, {
|
46
|
+
onDiscard: handleDiscard
|
50
47
|
}))
|
51
|
-
}, texts.table3.editing.actions.clear)
|
52
|
-
icon: "undo",
|
53
|
-
onClick: handleExit
|
54
|
-
}, texts.table3.editing.actions.exit))))
|
48
|
+
}, texts.table3.editing.actions.clear))))
|
55
49
|
});
|
56
50
|
}
|
57
|
-
function ConfirmClearChangesDialog(props) {
|
58
|
-
const {
|
59
|
-
onClear: handleClear,
|
60
|
-
...dialogProps
|
61
|
-
} = props;
|
62
|
-
const {
|
63
|
-
texts
|
64
|
-
} = useLocalization();
|
65
|
-
const handleClickInsideDialogContent = event => {
|
66
|
-
// Prevents the click event from propagating to the table, ensuring the row isn't saved when a click occurs
|
67
|
-
// inside the dialog
|
68
|
-
event.stopPropagation();
|
69
|
-
};
|
70
|
-
return /*#__PURE__*/React__default.createElement(Dialog, Object.assign({}, dialogProps), /*#__PURE__*/React__default.createElement(Dialog.Content, {
|
71
|
-
"aria-label": texts.table3.editing.clearChangesConfirmationDialog.title,
|
72
|
-
onClick: handleClickInsideDialogContent
|
73
|
-
}, /*#__PURE__*/React__default.createElement(Dialog.Title, null, texts.table3.editing.clearChangesConfirmationDialog.title), /*#__PURE__*/React__default.createElement("p", null, texts.table3.editing.clearChangesConfirmationDialog.description), /*#__PURE__*/React__default.createElement(Dialog.Footer, null, /*#__PURE__*/React__default.createElement(Group, null, /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button, {
|
74
|
-
tabIndex: 0
|
75
|
-
}, texts.table3.editing.clearChangesConfirmationDialog.cancel)), /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button, {
|
76
|
-
autoFocus: true,
|
77
|
-
tabIndex: 0,
|
78
|
-
appearance: "primary",
|
79
|
-
onClick: handleClear
|
80
|
-
}, texts.table3.editing.clearChangesConfirmationDialog.confirm))))));
|
81
|
-
}
|
82
51
|
|
83
|
-
export {
|
52
|
+
export { EditingActionsMenu };
|
84
53
|
//# sourceMappingURL=EditingActionsMenu.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"EditingActionsMenu.js","sources":["../../../../../../../../../../src/components/Table3/components/Columns/Internal/EditingActionsMenu.tsx"],"sourcesContent":["import React from 'react';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { Menu } from '../../../../Menu/Menu';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport {
|
1
|
+
{"version":3,"file":"EditingActionsMenu.js","sources":["../../../../../../../../../../src/components/Table3/components/Columns/Internal/EditingActionsMenu.tsx"],"sourcesContent":["import React from 'react';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { Menu } from '../../../../Menu/Menu';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { DiscardChangesConfirmationDialog } from '../../Editing/DiscardChangesConfirmationDialog';\n\ntype EditingActionsMenuProps = {\n hasChanges: boolean;\n hasErrors: boolean;\n onDiscard: () => void;\n onEditingSave: () => Promise<void>;\n isLastRow: boolean;\n};\n\nexport function EditingActionsMenu(props: EditingActionsMenuProps) {\n const { hasChanges, hasErrors, onDiscard: handleDiscard, onEditingSave: handleSave, isLastRow } = props;\n const { texts } = useLocalization();\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n // normally we handle this on change of active row, but when tabbing out of the last row the active row state stays on the last one.\n if (isLastRow && hasChanges && event.key === 'Tab') {\n handleSave();\n }\n };\n\n const handleMenuContentKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n // Stops the keyboard event from propagating to the Table when EditActionsMenu is open\n if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n event.stopPropagation();\n }\n };\n\n return (\n <IconButton\n appearance=\"transparent\"\n aria-label={texts.table3.editing.actions.tooltip}\n icon=\"more\"\n onKeyDown={handleKeyDown}\n menu={menuProps => (\n <Menu {...menuProps}>\n <Menu.Content onKeyDown={handleMenuContentKeyDown} onFocusOutside={event => event.preventDefault()}>\n <Menu.Item icon=\"tick\" disabled={!hasChanges || hasErrors} onClick={handleSave}>\n {texts.table3.editing.actions.save}\n </Menu.Item>\n <Menu.Item\n icon=\"close\"\n disabled={!hasChanges}\n dialog={props => <DiscardChangesConfirmationDialog {...props} onDiscard={handleDiscard} />}>\n {texts.table3.editing.actions.clear}\n </Menu.Item>\n </Menu.Content>\n </Menu>\n )}\n />\n );\n}\n"],"names":["EditingActionsMenu","props","hasChanges","hasErrors","onDiscard","handleDiscard","onEditingSave","handleSave","isLastRow","texts","useLocalization","handleKeyDown","event","key","handleMenuContentKeyDown","stopPropagation","React","IconButton","appearance","table3","editing","actions","tooltip","icon","onKeyDown","menu","menuProps","Menu","Content","onFocusOutside","preventDefault","Item","disabled","onClick","save","dialog","DiscardChangesConfirmationDialog","clear"],"mappings":";;;;;;SAcgBA,kBAAkBA,CAACC,KAA8B;EAC7D,MAAM;IAAEC,UAAU;IAAEC,SAAS;IAAEC,SAAS,EAAEC,aAAa;IAAEC,aAAa,EAAEC,UAAU;IAAEC;GAAW,GAAGP,KAAK;EACvG,MAAM;IAAEQ;GAAO,GAAGC,eAAe,EAAE;EAEnC,MAAMC,aAAa,GAAIC,KAA0B;;IAE7C,IAAIJ,SAAS,IAAIN,UAAU,IAAIU,KAAK,CAACC,GAAG,KAAK,KAAK,EAAE;MAChDN,UAAU,EAAE;;GAEnB;EAED,MAAMO,wBAAwB,GAAIF,KAA0C;;IAExE,IAAIA,KAAK,CAACC,GAAG,KAAK,WAAW,IAAID,KAAK,CAACC,GAAG,KAAK,YAAY,EAAE;MACzDD,KAAK,CAACG,eAAe,EAAE;;GAE9B;EAED,oBACIC,6BAACC,UAAU;IACPC,UAAU,EAAC,aAAa;kBACZT,KAAK,CAACU,MAAM,CAACC,OAAO,CAACC,OAAO,CAACC,OAAO;IAChDC,IAAI,EAAC,MAAM;IACXC,SAAS,EAAEb,aAAa;IACxBc,IAAI,EAAEC,SAAS,kBACXV,6BAACW,IAAI,oBAAKD,SAAS,gBACfV,6BAACW,IAAI,CAACC,OAAO;MAACJ,SAAS,EAAEV,wBAAwB;MAAEe,cAAc,EAAEjB,KAAK,IAAIA,KAAK,CAACkB,cAAc;oBAC5Fd,6BAACW,IAAI,CAACI,IAAI;MAACR,IAAI,EAAC,MAAM;MAACS,QAAQ,EAAE,CAAC9B,UAAU,IAAIC,SAAS;MAAE8B,OAAO,EAAE1B;OAC/DE,KAAK,CAACU,MAAM,CAACC,OAAO,CAACC,OAAO,CAACa,IAAI,CAC1B,eACZlB,6BAACW,IAAI,CAACI,IAAI;MACNR,IAAI,EAAC,OAAO;MACZS,QAAQ,EAAE,CAAC9B,UAAU;MACrBiC,MAAM,EAAElC,KAAK,iBAAIe,6BAACoB,gCAAgC,oBAAKnC,KAAK;QAAEG,SAAS,EAAEC;;OACxEI,KAAK,CAACU,MAAM,CAACC,OAAO,CAACC,OAAO,CAACgB,KAAK,CAC3B,CACD,CACZ;IAEb;AAEV;;;;"}
|
@@ -19,7 +19,7 @@ function Alert(props) {
|
|
19
19
|
const validationTexts = texts.table3.editing.validation;
|
20
20
|
const tableMeta = table.options.meta;
|
21
21
|
const [showFilterResetDialog, setShowFilterResetDialog] = React__default.useState(false);
|
22
|
-
const pendingChangesWithErrors = tableMeta.editing.
|
22
|
+
const pendingChangesWithErrors = tableMeta.editing.getErrorsShownInAlert();
|
23
23
|
function scrollToRow(rowIndex) {
|
24
24
|
tableMeta.rowActive.setRowActiveIndex(rowIndex);
|
25
25
|
scrollToIndex(rowIndex, {
|
@@ -38,38 +38,45 @@ function Alert(props) {
|
|
38
38
|
const title = (pendingChangesWithErrors.length === 1 ? validationTexts.alert.titleOne : validationTexts.alert.titlePlural).replace('[COUNT]', String(pendingChangesWithErrors.length));
|
39
39
|
// generate links to each invalid row, to go into the error message
|
40
40
|
const links = [];
|
41
|
-
const
|
42
|
-
|
41
|
+
const visibleColumns = table.getVisibleFlatColumns().map(c => c.id);
|
42
|
+
const rowIdentityColumn = tableMeta.rowIdentityAccessor && visibleColumns.includes(String(tableMeta.rowIdentityAccessor)) ?
|
43
|
+
// table.getColumn(columName) throw error in strict dev mode. Related thread: https://github.com/TanStack/table/discussions/5505
|
44
|
+
table.getAllColumns().find(x => x.id === String(tableMeta.rowIdentityAccessor)) : undefined;
|
45
|
+
pendingChangesWithErrors.forEach((pendingChangeWithError, index) => {
|
43
46
|
// if appropriate, concatenate the item with the text "and"
|
44
47
|
if (pendingChangesWithErrors.length > 1 && index === pendingChangesWithErrors.length - 1) {
|
45
48
|
// Add space before and after `messageAnd` text
|
46
49
|
links.push(` ${validationTexts.alert.messageAnd} `);
|
47
50
|
}
|
48
|
-
const rowIndex = table.getRowModel().rows.findIndex(row => row.id ===
|
51
|
+
const rowIndex = table.getRowModel().rows.findIndex(row => row.id === pendingChangeWithError.rowId);
|
49
52
|
const handleClick = () => {
|
53
|
+
// if row is visible
|
50
54
|
if (rowIndex > -1) {
|
51
55
|
scrollToRow(rowIndex);
|
52
|
-
}
|
53
|
-
|
56
|
+
}
|
57
|
+
// if row is filtered out
|
58
|
+
else {
|
59
|
+
setShowFilterResetDialog(pendingChangeWithError.rowId);
|
54
60
|
}
|
55
61
|
};
|
56
62
|
let tooltip;
|
57
|
-
if (
|
58
|
-
tooltip =
|
63
|
+
if (pendingChangeWithError.errors.row) {
|
64
|
+
tooltip = pendingChangeWithError.errors.row;
|
59
65
|
} else {
|
60
66
|
var _table$getAllColumns$, _table$getAllColumns$2;
|
61
|
-
const firstCellErrorColumnId = Object.keys(
|
67
|
+
const firstCellErrorColumnId = Object.keys(pendingChangeWithError.errors.cells)[0];
|
62
68
|
const columnName = (_table$getAllColumns$ = table.getAllColumns().find(column => column.id === firstCellErrorColumnId)) === null || _table$getAllColumns$ === void 0 ? void 0 : (_table$getAllColumns$2 = _table$getAllColumns$.columnDef.meta) === null || _table$getAllColumns$2 === void 0 ? void 0 : _table$getAllColumns$2.header;
|
63
|
-
tooltip = `${columnName}: ${
|
69
|
+
tooltip = `${columnName}: ${pendingChangeWithError.errors.cells[firstCellErrorColumnId]}`;
|
64
70
|
}
|
71
|
+
const row = table.getRow(pendingChangeWithError.rowId).original;
|
65
72
|
links.push(/*#__PURE__*/React__default.createElement(Tooltip, {
|
66
|
-
key:
|
73
|
+
key: pendingChangeWithError.rowId,
|
67
74
|
title: tooltip
|
68
75
|
}, /*#__PURE__*/React__default.createElement("span", {
|
69
76
|
className: "text-blue",
|
70
77
|
onClick: handleClick,
|
71
78
|
role: "button"
|
72
|
-
}, rowIdentityColumn ?
|
79
|
+
}, rowIdentityColumn ? row[rowIdentityColumn.id] : rowIndex + 1)));
|
73
80
|
// if appropriate, concatenate the item with the text ","
|
74
81
|
if (pendingChangesWithErrors.length > 2 && index < pendingChangesWithErrors.length - 2) {
|
75
82
|
links.push(', ');
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Alert.js","sources":["../../../../../../../../../src/components/Table3/components/Editing/Alert.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { ScrollToOptions as ReactVirtualScrollToOptions } from '@tanstack/react-virtual';\nimport { Alert as BaseAlert, AlertProps as BaseAlertProps } from '../../../Alert/Alert';\nimport { TableRef } from '../../../../primitives/Table/types';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Dialog, DialogProps } from '../../../Dialog/Dialog';\nimport { Group } from '../../../Group/Group';\nimport { Button } from '../../../Button/Button';\n\ntype AlertProps<TType = unknown> = Omit<BaseAlertProps, 'children'> & {\n scrollToIndex: (index: number, options: ReactVirtualScrollToOptions) => void;\n table: ReactTable<TType>;\n tableRef: React.RefObject<TableRef>;\n};\n\nexport function Alert<TType = unknown>(props: AlertProps<TType>) {\n const { scrollToIndex, table, tableRef, ...attributes } = props;\n const { texts } = useLocalization();\n const validationTexts = texts.table3.editing.validation;\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const [showFilterResetDialog, setShowFilterResetDialog] = React.useState<string | false>(false);\n const pendingChangesWithErrors = tableMeta.editing.getAlertErrors<TType>();\n\n function scrollToRow(rowIndex: number) {\n tableMeta.rowActive.setRowActiveIndex(rowIndex);\n scrollToIndex(rowIndex, { align: 'center' });\n\n requestAnimationFrame(() => {\n const cell = tableRef.current?.querySelector(\n 'tbody > tr[data-row-active=\"true\"] > td[data-cell-editing-invalid=\"true\"]'\n );\n\n if (cell) {\n (cell as HTMLElement).focus?.();\n }\n });\n }\n\n // generate the \"N unsaved entries\" title\n const title = (\n pendingChangesWithErrors.length === 1 ? validationTexts.alert.titleOne : validationTexts.alert.titlePlural\n ).replace('[COUNT]', String(pendingChangesWithErrors.length));\n\n // generate links to each invalid row, to go into the error message\n const links: React.ReactNode[] = [];\n const rowIdentityColumn = tableMeta.rowIdentityColumnId ? table.getColumn(tableMeta.rowIdentityColumnId) : undefined;\n\n pendingChangesWithErrors.forEach((error, index) => {\n // if appropriate, concatenate the item with the text \"and\"\n if (pendingChangesWithErrors.length > 1 && index === pendingChangesWithErrors.length - 1) {\n // Add space before and after `messageAnd` text\n links.push(` ${validationTexts.alert.messageAnd} `);\n }\n const rowIndex = table.getRowModel().rows.findIndex(row => row.id === error.rowId);\n\n const handleClick = () => {\n if (rowIndex > -1) {\n scrollToRow(rowIndex);\n } else {\n setShowFilterResetDialog(error.rowId);\n }\n };\n\n let tooltip;\n\n if (error.pendingChange._meta.errors.row) {\n tooltip = error.pendingChange._meta.errors.row;\n } else {\n const firstCellErrorColumnId = Object.keys(error.pendingChange._meta.errors.cells)[0];\n const columnName = table.getAllColumns().find(column => column.id === firstCellErrorColumnId)?.columnDef.meta?.header;\n tooltip = `${columnName}: ${error.pendingChange._meta.errors.cells[firstCellErrorColumnId]}`;\n }\n\n links.push(\n <Tooltip key={error.rowId} title={tooltip}>\n <span className=\"text-blue\" onClick={handleClick} role=\"button\">\n {rowIdentityColumn ? (error.pendingChange._meta.original as any)[rowIdentityColumn.id] : rowIndex + 1}\n </span>\n </Tooltip>\n );\n\n // if appropriate, concatenate the item with the text \",\"\n if (pendingChangesWithErrors.length > 2 && index < pendingChangesWithErrors.length - 2) {\n links.push(', ');\n }\n });\n\n // generate the \"Row N is incomplete and hasn't been saved\" error message\n const message = (links.length === 1 ? validationTexts.alert.messageOne : validationTexts.alert.messagePlural)\n .split(/(\\[\\w+\\])/)\n .map(part => {\n if (part === '[COLUMN]') {\n return rowIdentityColumn?.columnDef.meta?.header ?? validationTexts.alert.messageRow;\n }\n\n if (part === '[ROW]') {\n return links;\n }\n\n return part;\n });\n\n const handleResetFilters = () => {\n table.resetGlobalFilter();\n table.resetColumnFilters();\n\n requestAnimationFrame(() => {\n const rowIndex = table.getRowModel().rows.findIndex(row => row.id === showFilterResetDialog);\n\n if (rowIndex > -1) {\n scrollToRow(rowIndex);\n }\n\n setShowFilterResetDialog(false);\n });\n };\n\n return (\n <>\n <BaseAlert {...attributes} state=\"error\">\n <span className=\"font-bold\">{title}</span> {message}\n </BaseAlert>\n <FilterResetDialog\n open={showFilterResetDialog !== false}\n onChange={() => setShowFilterResetDialog(false)}\n onSubmit={handleResetFilters}\n />\n </>\n );\n}\n\ntype FilterResetDialogProps = Omit<DialogProps, 'children'> & {\n onSubmit: () => void;\n};\n\nfunction FilterResetDialog(props: FilterResetDialogProps) {\n const { onSubmit: handleSubmit, ...dialogProps } = props;\n const { texts } = useLocalization();\n\n return (\n <Dialog {...dialogProps} size=\"xs\">\n <Dialog.Content aria-label=\"Create a new account\">\n <Dialog.Title>{texts.table3.editing.validation.resetFiltersDialog.title}</Dialog.Title>\n\n <p>{texts.table3.editing.validation.resetFiltersDialog.description}</p>\n\n <Dialog.Footer>\n <Group>\n <Dialog.Close>\n <Button>{texts.table3.editing.validation.resetFiltersDialog.cancel}</Button>\n </Dialog.Close>\n <Button appearance=\"primary\" onClick={handleSubmit}>\n {texts.table3.editing.validation.resetFiltersDialog.confirm}\n </Button>\n </Group>\n </Dialog.Footer>\n </Dialog.Content>\n </Dialog>\n );\n}\n"],"names":["Alert","props","scrollToIndex","table","tableRef","attributes","texts","useLocalization","validationTexts","table3","editing","validation","tableMeta","options","meta","showFilterResetDialog","setShowFilterResetDialog","React","useState","pendingChangesWithErrors","getAlertErrors","scrollToRow","rowIndex","rowActive","setRowActiveIndex","align","requestAnimationFrame","cell","_tableRef$current","current","querySelector","_cell$focus","focus","call","title","length","alert","titleOne","titlePlural","replace","String","links","rowIdentityColumn","rowIdentityColumnId","getColumn","undefined","forEach","error","index","push","messageAnd","getRowModel","rows","findIndex","row","id","rowId","handleClick","tooltip","pendingChange","_meta","errors","_table$getAllColumns$","_table$getAllColumns$2","firstCellErrorColumnId","Object","keys","cells","columnName","getAllColumns","find","column","columnDef","header","Tooltip","key","className","onClick","role","original","message","messageOne","messagePlural","split","map","part","_rowIdentityColumn$co","_rowIdentityColumn$co2","messageRow","handleResetFilters","resetGlobalFilter","resetColumnFilters","BaseAlert","state","FilterResetDialog","open","onChange","onSubmit","handleSubmit","dialogProps","Dialog","size","Content","Title","resetFiltersDialog","description","Footer","Group","Close","Button","cancel","appearance","confirm"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"Alert.js","sources":["../../../../../../../../../src/components/Table3/components/Editing/Alert.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { ScrollToOptions as ReactVirtualScrollToOptions } from '@tanstack/react-virtual';\nimport { Alert as BaseAlert, AlertProps as BaseAlertProps } from '../../../Alert/Alert';\nimport { TableRef } from '../../../../primitives/Table/types';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Dialog, DialogProps } from '../../../Dialog/Dialog';\nimport { Group } from '../../../Group/Group';\nimport { Button } from '../../../Button/Button';\n\ntype AlertProps<TType = unknown> = Omit<BaseAlertProps, 'children'> & {\n scrollToIndex: (index: number, options: ReactVirtualScrollToOptions) => void;\n table: ReactTable<TType>;\n tableRef: React.RefObject<TableRef>;\n};\n\nexport function Alert<TType = unknown>(props: AlertProps<TType>) {\n const { scrollToIndex, table, tableRef, ...attributes } = props;\n const { texts } = useLocalization();\n const validationTexts = texts.table3.editing.validation;\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const [showFilterResetDialog, setShowFilterResetDialog] = React.useState<string | false>(false);\n const pendingChangesWithErrors = tableMeta.editing.getErrorsShownInAlert<TType>();\n\n function scrollToRow(rowIndex: number) {\n tableMeta.rowActive.setRowActiveIndex(rowIndex);\n scrollToIndex(rowIndex, { align: 'center' });\n\n requestAnimationFrame(() => {\n const cell = tableRef.current?.querySelector(\n 'tbody > tr[data-row-active=\"true\"] > td[data-cell-editing-invalid=\"true\"]'\n );\n\n if (cell) {\n (cell as HTMLElement).focus?.();\n }\n });\n }\n\n // generate the \"N unsaved entries\" title\n const title = (\n pendingChangesWithErrors.length === 1 ? validationTexts.alert.titleOne : validationTexts.alert.titlePlural\n ).replace('[COUNT]', String(pendingChangesWithErrors.length));\n\n // generate links to each invalid row, to go into the error message\n const links: React.ReactNode[] = [];\n const visibleColumns = table.getVisibleFlatColumns().map(c => c.id);\n const rowIdentityColumn =\n tableMeta.rowIdentityAccessor && visibleColumns.includes(String(tableMeta.rowIdentityAccessor))\n ? // table.getColumn(columName) throw error in strict dev mode. Related thread: https://github.com/TanStack/table/discussions/5505\n table.getAllColumns().find(x => x.id === String(tableMeta.rowIdentityAccessor))\n : undefined;\n\n pendingChangesWithErrors.forEach((pendingChangeWithError, index) => {\n // if appropriate, concatenate the item with the text \"and\"\n if (pendingChangesWithErrors.length > 1 && index === pendingChangesWithErrors.length - 1) {\n // Add space before and after `messageAnd` text\n links.push(` ${validationTexts.alert.messageAnd} `);\n }\n\n const rowIndex = table.getRowModel().rows.findIndex(row => row.id === pendingChangeWithError.rowId);\n\n const handleClick = () => {\n // if row is visible\n if (rowIndex > -1) {\n scrollToRow(rowIndex);\n }\n // if row is filtered out\n else {\n setShowFilterResetDialog(pendingChangeWithError.rowId);\n }\n };\n\n let tooltip;\n\n if (pendingChangeWithError.errors.row) {\n tooltip = pendingChangeWithError.errors.row;\n } else {\n const firstCellErrorColumnId = Object.keys(pendingChangeWithError.errors.cells)[0];\n const columnName = table.getAllColumns().find(column => column.id === firstCellErrorColumnId)?.columnDef.meta?.header;\n tooltip = `${columnName}: ${pendingChangeWithError.errors.cells[firstCellErrorColumnId]}`;\n }\n\n const row = table.getRow(pendingChangeWithError.rowId).original;\n\n links.push(\n <Tooltip key={pendingChangeWithError.rowId} title={tooltip}>\n <span className=\"text-blue\" onClick={handleClick} role=\"button\">\n {rowIdentityColumn ? row[rowIdentityColumn.id] : rowIndex + 1}\n </span>\n </Tooltip>\n );\n\n // if appropriate, concatenate the item with the text \",\"\n if (pendingChangesWithErrors.length > 2 && index < pendingChangesWithErrors.length - 2) {\n links.push(', ');\n }\n });\n\n // generate the \"Row N is incomplete and hasn't been saved\" error message\n const message = (links.length === 1 ? validationTexts.alert.messageOne : validationTexts.alert.messagePlural)\n .split(/(\\[\\w+\\])/)\n .map(part => {\n if (part === '[COLUMN]') {\n return rowIdentityColumn?.columnDef.meta?.header ?? validationTexts.alert.messageRow;\n }\n\n if (part === '[ROW]') {\n return links;\n }\n\n return part;\n });\n\n const handleResetFilters = () => {\n table.resetGlobalFilter();\n table.resetColumnFilters();\n\n requestAnimationFrame(() => {\n const rowIndex = table.getRowModel().rows.findIndex(row => row.id === showFilterResetDialog);\n\n if (rowIndex > -1) {\n scrollToRow(rowIndex);\n }\n\n setShowFilterResetDialog(false);\n });\n };\n\n return (\n <>\n <BaseAlert {...attributes} state=\"error\">\n <span className=\"font-bold\">{title}</span> {message}\n </BaseAlert>\n <FilterResetDialog\n open={showFilterResetDialog !== false}\n onChange={() => setShowFilterResetDialog(false)}\n onSubmit={handleResetFilters}\n />\n </>\n );\n}\n\ntype FilterResetDialogProps = Omit<DialogProps, 'children'> & {\n onSubmit: () => void;\n};\n\nfunction FilterResetDialog(props: FilterResetDialogProps) {\n const { onSubmit: handleSubmit, ...dialogProps } = props;\n const { texts } = useLocalization();\n\n return (\n <Dialog {...dialogProps} size=\"xs\">\n <Dialog.Content aria-label=\"Create a new account\">\n <Dialog.Title>{texts.table3.editing.validation.resetFiltersDialog.title}</Dialog.Title>\n\n <p>{texts.table3.editing.validation.resetFiltersDialog.description}</p>\n\n <Dialog.Footer>\n <Group>\n <Dialog.Close>\n <Button>{texts.table3.editing.validation.resetFiltersDialog.cancel}</Button>\n </Dialog.Close>\n <Button appearance=\"primary\" onClick={handleSubmit}>\n {texts.table3.editing.validation.resetFiltersDialog.confirm}\n </Button>\n </Group>\n </Dialog.Footer>\n </Dialog.Content>\n </Dialog>\n );\n}\n"],"names":["Alert","props","scrollToIndex","table","tableRef","attributes","texts","useLocalization","validationTexts","table3","editing","validation","tableMeta","options","meta","showFilterResetDialog","setShowFilterResetDialog","React","useState","pendingChangesWithErrors","getErrorsShownInAlert","scrollToRow","rowIndex","rowActive","setRowActiveIndex","align","requestAnimationFrame","cell","_tableRef$current","current","querySelector","_cell$focus","focus","call","title","length","alert","titleOne","titlePlural","replace","String","links","visibleColumns","getVisibleFlatColumns","map","c","id","rowIdentityColumn","rowIdentityAccessor","includes","getAllColumns","find","x","undefined","forEach","pendingChangeWithError","index","push","messageAnd","getRowModel","rows","findIndex","row","rowId","handleClick","tooltip","errors","_table$getAllColumns$","_table$getAllColumns$2","firstCellErrorColumnId","Object","keys","cells","columnName","column","columnDef","header","getRow","original","Tooltip","key","className","onClick","role","message","messageOne","messagePlural","split","part","_rowIdentityColumn$co","_rowIdentityColumn$co2","messageRow","handleResetFilters","resetGlobalFilter","resetColumnFilters","BaseAlert","state","FilterResetDialog","open","onChange","onSubmit","handleSubmit","dialogProps","Dialog","size","Content","Title","resetFiltersDialog","description","Footer","Group","Close","Button","cancel","appearance","confirm"],"mappings":"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"}
|
@@ -0,0 +1,34 @@
|
|
1
|
+
import React__default from 'react';
|
2
|
+
import { useLocalization } from '../../../Provider/Localization.js';
|
3
|
+
import { Button } from '../../../Button/Button.js';
|
4
|
+
import { Dialog } from '../../../Dialog/Dialog.js';
|
5
|
+
import { Group } from '../../../Group/Group.js';
|
6
|
+
|
7
|
+
function DiscardChangesConfirmationDialog(props) {
|
8
|
+
const {
|
9
|
+
onDiscard: handleDiscard,
|
10
|
+
...dialogProps
|
11
|
+
} = props;
|
12
|
+
const {
|
13
|
+
texts
|
14
|
+
} = useLocalization();
|
15
|
+
const handleClickInsideDialogContent = event => {
|
16
|
+
// Prevents the click event from propagating to the table, ensuring the row isn't saved when a click occurs
|
17
|
+
// inside the dialog
|
18
|
+
event.stopPropagation();
|
19
|
+
};
|
20
|
+
return /*#__PURE__*/React__default.createElement(Dialog, Object.assign({}, dialogProps), /*#__PURE__*/React__default.createElement(Dialog.Content, {
|
21
|
+
"aria-label": texts.table3.editing.clearChangesConfirmationDialog.title,
|
22
|
+
onClick: handleClickInsideDialogContent
|
23
|
+
}, /*#__PURE__*/React__default.createElement(Dialog.Title, null, texts.table3.editing.clearChangesConfirmationDialog.title), /*#__PURE__*/React__default.createElement("p", null, texts.table3.editing.clearChangesConfirmationDialog.description), /*#__PURE__*/React__default.createElement(Dialog.Footer, null, /*#__PURE__*/React__default.createElement(Group, null, /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button, {
|
24
|
+
tabIndex: 0
|
25
|
+
}, texts.table3.editing.clearChangesConfirmationDialog.cancel)), /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button, {
|
26
|
+
autoFocus: true,
|
27
|
+
tabIndex: 0,
|
28
|
+
appearance: "primary",
|
29
|
+
onClick: handleDiscard
|
30
|
+
}, texts.table3.editing.clearChangesConfirmationDialog.confirm))))));
|
31
|
+
}
|
32
|
+
|
33
|
+
export { DiscardChangesConfirmationDialog };
|
34
|
+
//# sourceMappingURL=DiscardChangesConfirmationDialog.js.map
|