@elliemae/ds-data-table 3.70.0-next.6 → 3.70.0-next.60
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/cjs/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js +15 -3
- package/dist/cjs/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js.map +3 -3
- package/dist/cjs/addons/Editables/index.js.map +1 -1
- package/dist/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js.map +2 -2
- package/dist/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilterV2.js.map +2 -2
- package/dist/cjs/configs/constants.js +4 -0
- package/dist/cjs/configs/constants.js.map +2 -2
- package/dist/cjs/configs/useAutocalculated/index.js +15 -1
- package/dist/cjs/configs/useAutocalculated/index.js.map +2 -2
- package/dist/cjs/configs/useStore/useStore.js +46 -0
- package/dist/cjs/configs/useStore/useStore.js.map +2 -2
- package/dist/cjs/constants/index.js +1 -0
- package/dist/cjs/constants/index.js.map +2 -2
- package/dist/cjs/exported-related/FilterBar/PillsFromDataTableFilters.js +2 -1
- package/dist/cjs/exported-related/FilterBar/PillsFromDataTableFilters.js.map +2 -2
- package/dist/cjs/exported-related/FilterPopover/FilterPopoverV2.js +14 -8
- package/dist/cjs/exported-related/FilterPopover/FilterPopoverV2.js.map +2 -2
- package/dist/cjs/exported-related/FilterPopover/index.js +31 -7
- package/dist/cjs/exported-related/FilterPopover/index.js.map +2 -2
- package/dist/cjs/package.json +1 -4
- package/dist/cjs/parts/Cells/Cell.js +1 -1
- package/dist/cjs/parts/Cells/Cell.js.map +2 -2
- package/dist/cjs/parts/Cells/CellFactory.js +1 -1
- package/dist/cjs/parts/Cells/CellFactory.js.map +2 -2
- package/dist/cjs/parts/FilterBar/FiltersBar.js +2 -1
- package/dist/cjs/parts/FilterBar/FiltersBar.js.map +2 -2
- package/dist/cjs/parts/Headers/HeaderCell.js +13 -24
- package/dist/cjs/parts/Headers/HeaderCell.js.map +2 -2
- package/dist/cjs/parts/Headers/HeaderCellTitle.js +24 -4
- package/dist/cjs/parts/Headers/HeaderCellTitle.js.map +2 -2
- package/dist/cjs/parts/Headers/HeaderResizer.js +40 -18
- package/dist/cjs/parts/Headers/HeaderResizer.js.map +2 -2
- package/dist/cjs/{exported-related/FilterPopover/useOnClickOutside.js → parts/Headers/buildScreenReaderInstructions.js} +33 -30
- package/dist/cjs/parts/Headers/buildScreenReaderInstructions.js.map +7 -0
- package/dist/cjs/parts/Headers/index.js +15 -7
- package/dist/cjs/parts/Headers/index.js.map +2 -2
- package/dist/cjs/parts/Headers/useHeaderCellHandlers.js +44 -8
- package/dist/cjs/parts/Headers/useHeaderCellHandlers.js.map +2 -2
- package/dist/cjs/parts/Headers/useHeaderResizer.js +13 -3
- package/dist/cjs/parts/Headers/useHeaderResizer.js.map +2 -2
- package/dist/cjs/parts/HoC/withDnDSortableColumnContext.js +3 -1
- package/dist/cjs/parts/HoC/withDnDSortableColumnContext.js.map +2 -2
- package/dist/cjs/parts/VirtualRowsList.js +2 -0
- package/dist/cjs/parts/VirtualRowsList.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +10 -3
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styled.js +55 -52
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js +15 -3
- package/dist/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js.map +2 -2
- package/dist/esm/addons/Editables/index.js.map +1 -1
- package/dist/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js.map +2 -2
- package/dist/esm/addons/Filters/Components/SelectFilter/BaseSelectFilterV2.js.map +2 -2
- package/dist/esm/configs/constants.js +4 -0
- package/dist/esm/configs/constants.js.map +2 -2
- package/dist/esm/configs/useAutocalculated/index.js +15 -1
- package/dist/esm/configs/useAutocalculated/index.js.map +2 -2
- package/dist/esm/configs/useStore/useStore.js +46 -0
- package/dist/esm/configs/useStore/useStore.js.map +2 -2
- package/dist/esm/constants/index.js +1 -0
- package/dist/esm/constants/index.js.map +2 -2
- package/dist/esm/exported-related/FilterBar/PillsFromDataTableFilters.js +2 -1
- package/dist/esm/exported-related/FilterBar/PillsFromDataTableFilters.js.map +2 -2
- package/dist/esm/exported-related/FilterPopover/FilterPopoverV2.js +15 -9
- package/dist/esm/exported-related/FilterPopover/FilterPopoverV2.js.map +2 -2
- package/dist/esm/exported-related/FilterPopover/index.js +31 -7
- package/dist/esm/exported-related/FilterPopover/index.js.map +2 -2
- package/dist/esm/package.json +1 -4
- package/dist/esm/parts/Cells/Cell.js +1 -1
- package/dist/esm/parts/Cells/Cell.js.map +2 -2
- package/dist/esm/parts/Cells/CellFactory.js +1 -1
- package/dist/esm/parts/Cells/CellFactory.js.map +2 -2
- package/dist/esm/parts/FilterBar/FiltersBar.js +2 -1
- package/dist/esm/parts/FilterBar/FiltersBar.js.map +2 -2
- package/dist/esm/parts/Headers/HeaderCell.js +13 -24
- package/dist/esm/parts/Headers/HeaderCell.js.map +2 -2
- package/dist/esm/parts/Headers/HeaderCellTitle.js +24 -4
- package/dist/esm/parts/Headers/HeaderCellTitle.js.map +2 -2
- package/dist/esm/parts/Headers/HeaderResizer.js +41 -19
- package/dist/esm/parts/Headers/HeaderResizer.js.map +2 -2
- package/dist/esm/parts/Headers/buildScreenReaderInstructions.js +33 -0
- package/dist/esm/parts/Headers/buildScreenReaderInstructions.js.map +7 -0
- package/dist/esm/parts/Headers/index.js +15 -7
- package/dist/esm/parts/Headers/index.js.map +2 -2
- package/dist/esm/parts/Headers/useHeaderCellHandlers.js +44 -8
- package/dist/esm/parts/Headers/useHeaderCellHandlers.js.map +2 -2
- package/dist/esm/parts/Headers/useHeaderResizer.js +14 -4
- package/dist/esm/parts/Headers/useHeaderResizer.js.map +2 -2
- package/dist/esm/parts/HoC/withDnDSortableColumnContext.js +3 -1
- package/dist/esm/parts/HoC/withDnDSortableColumnContext.js.map +2 -2
- package/dist/esm/parts/VirtualRowsList.js +2 -0
- package/dist/esm/parts/VirtualRowsList.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +10 -3
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styled.js +13 -10
- package/dist/esm/styled.js.map +2 -2
- package/dist/types/TruncatedTooltipText.d.ts +1 -1
- package/dist/types/addons/Editables/index.d.ts +1 -1
- package/dist/types/configs/constants.d.ts +2 -0
- package/dist/types/constants/index.d.ts +4 -0
- package/dist/types/exported-related/Skeleton/SkeletonCell.d.ts +2 -1
- package/dist/types/exported-related/Skeleton/SkeletonHeaderCell.d.ts +2 -1
- package/dist/types/parts/Headers/HeaderCellGroup.d.ts +1 -1
- package/dist/types/parts/Headers/buildScreenReaderInstructions.d.ts +19 -0
- package/dist/types/parts/Headers/useHeaderResizer.d.ts +1 -0
- package/dist/types/parts/HoC/withConditionalDnDSortableContext.d.ts +1 -1
- package/dist/types/parts/HoC/withDnDSortableColumnContext.d.ts +1 -1
- package/dist/types/parts/HoC/withDnDSortableRowContext.d.ts +1 -1
- package/dist/types/parts/Loader.d.ts +1 -1
- package/dist/types/parts/Row.d.ts +1 -1
- package/dist/types/parts/SkeletonTable.d.ts +1 -1
- package/dist/types/parts/TableContent.d.ts +2 -1
- package/dist/types/parts/VirtualRowsList.d.ts +2 -1
- package/dist/types/react-desc-prop-types.d.ts +11 -0
- package/dist/types/styled.d.ts +2 -1
- package/package.json +34 -34
- package/skills/ds-data-table-slots/SKILL.md +11 -3
- package/dist/cjs/exported-related/FilterPopover/useOnClickOutside.js.map +0 -7
- package/dist/esm/exported-related/FilterPopover/useOnClickOutside.js +0 -30
- package/dist/esm/exported-related/FilterPopover/useOnClickOutside.js.map +0 -7
- package/dist/types/exported-related/FilterPopover/useOnClickOutside.d.ts +0 -1
- package/dist/types/tests/DSDataTable.exports.test.d.ts +0 -1
- package/dist/types/tests/DSDataTable.get-owner-props-arguments-slots.test.d.ts +0 -1
- package/dist/types/tests/a11y/aria-label-customization.test.d.ts +0 -1
- package/dist/types/tests/a11y/aria-level.test.d.ts +0 -1
- package/dist/types/tests/a11y/internally-printed-ids.A11y.test.d.ts +0 -1
- package/dist/types/tests/a11y/number-of-cells-and-columnheader.test.d.ts +0 -1
- package/dist/types/tests/a11y/out-of-the-box-filters.A11y.test.d.ts +0 -1
- package/dist/types/tests/callbacks/editableCell.events.test.d.ts +0 -1
- package/dist/types/tests/callbacks/header.events.test.d.ts +0 -1
- package/dist/types/tests/callbacks/pagination.events.test.d.ts +0 -1
- package/dist/types/tests/callbacks/row.events.test.d.ts +0 -1
- package/dist/types/tests/data-testid/DSDataTable.data-testid.test.d.ts +0 -1
- package/dist/types/tests/data-testid/Renderers.d.ts +0 -36
- package/dist/types/tests/filters/DSDatatable.PUI-17318.test.d.ts +0 -1
- package/dist/types/tests/filters/combobox-filter.test.d.ts +0 -1
- package/dist/types/tests/filters/currency-range-filter-PUI-12735.test.d.ts +0 -1
- package/dist/types/tests/filters/free-text-search-filter.test.d.ts +0 -1
- package/dist/types/tests/keyboard/dragAndDropColumns.test.d.ts +0 -1
- package/dist/types/tests/keyboard/dragAndDropRows.test.d.ts +0 -1
- package/dist/types/tests/keyboard/expandable.test.d.ts +0 -1
- package/dist/types/tests/keyboard/grouped.test.d.ts +0 -1
- package/dist/types/tests/keyboard/masterDetails.test.d.ts +0 -1
- package/dist/types/tests/keyboard/navigation.test.d.ts +0 -1
- package/dist/types/tests/keyboard/selectMultiple.test.d.ts +0 -1
- package/dist/types/tests/keyboard/selectSingle.test.d.ts +0 -1
- package/dist/types/tests/keyboard/sort.test.d.ts +0 -1
- package/dist/types/tests/playwright/DSDataTable.ControlledFilterTestRenderer.d.ts +0 -2
- package/dist/types/tests/playwright/DSDataTable.ControlledHiddenPanelTestRenderer.d.ts +0 -1
- package/dist/types/tests/playwright/DSDataTable.ControlledSortTestRenderer.d.ts +0 -2
- package/dist/types/tests/playwright/DSDataTable.slot-contracts-dynamic.test.playwright.d.ts +0 -1
- package/dist/types/tests/playwright/DSDataTable.test.playwright.d.ts +0 -1
- package/dist/types/tests/playwright/DSDataTableDropIndicatorTestRenderer.d.ts +0 -1
- package/dist/types/tests/playwright/GenericExampleTable.d.ts +0 -1
- package/dist/types/tests/render/cellStyle.test.d.ts +0 -1
- package/dist/types/tests/render/empty-state.test.d.ts +0 -1
- package/dist/types/tests/render/selectMultiple.test.d.ts +0 -1
- package/dist/types/tests/render/toolbar.test.d.ts +0 -1
- package/dist/types/tests/utils/index.d.ts +0 -65
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/HoC/withDnDSortableColumnContext.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport React, { useContext, useEffect, useMemo } from 'react';\nimport { DropIndicatorPosition } from '../../configs/constants.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { SortableItemContextType } from './SortableItemContext.js';\nimport { SortableItemContext } from './SortableItemContext.js';\nimport { DnDGroupContext } from './DnDGroupContext.js';\n\nexport const withDnDSortableColumnContext =\n <T extends { header: DSDataTableT.InternalColumn }>(Component: React.ComponentType<T>) =>\n (props: T) => {\n const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n const setIsHeaderCellDragging = useInternalStore((state) => state.setIsHeaderCellDragging);\n\n const { activeIndex } = useContext(DnDGroupContext);\n\n // onMount generate unique options, so everyting is only ran once\n const draggableOptions = useMemo(\n () => ({\n id: props.header.id,\n }),\n [props.header.id],\n );\n\n const useSortableHelpers = useSortable(draggableOptions);\n\n // Since Header component for some reason is being render inside the virtual scrollable list,\n // we need to bubble this prop up to avoid the row list being scrolled when dragging a header cell.\n useEffect(() => {\n if (useSortableHelpers.isDragging) {\n setIsHeaderCellDragging(true);\n } else {\n setIsHeaderCellDragging(false);\n }\n }, [useSortableHelpers.isDragging, setIsHeaderCellDragging]);\n // calculate all the \"useSortable\" values as per required\n const draggableProps: DSDataTableT.DraggablePropsT = useMemo(() => {\n if (!dragAndDropColumns) return false;\n\n const { index, overIndex } = useSortableHelpers;\n\n return {\n ...useSortableHelpers,\n shouldShowDropIndicatorPosition: overIndex === index && overIndex !== -1,\n dropIndicatorPosition:\n activeIndex && index > activeIndex ? DropIndicatorPosition.After : DropIndicatorPosition.Before,\n isDropValid: true,\n };\n }, [useSortableHelpers, dragAndDropColumns, activeIndex]);\n // we use a context so we can easly access information wherever without bubbling down\n // this context is all Memoized so as long as component is not re-mounted,\n // the context won't trigger un-required renders per-se...\n const ctx: SortableItemContextType = useMemo(\n () => ({\n draggableProps,\n }),\n [draggableProps],\n );\n // we always add the context, if draggableProps===false we don't have the DnD enabled.\n return (\n <SortableItemContext.Provider value={ctx}>\n <Component {...props} />\n </SortableItemContext.Provider>\n );\n };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport React, { useContext, useEffect, useMemo } from 'react';\nimport { DropIndicatorPosition } from '../../configs/constants.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { SortableItemContextType } from './SortableItemContext.js';\nimport { SortableItemContext } from './SortableItemContext.js';\nimport { DnDGroupContext } from './DnDGroupContext.js';\n\nexport const withDnDSortableColumnContext =\n <T extends { header: DSDataTableT.InternalColumn }>(Component: React.ComponentType<T>) =>\n (props: T) => {\n const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n const setIsHeaderCellDragging = useInternalStore((state) => state.setIsHeaderCellDragging);\n const closeFilterMenuIfOpen = useInternalStore((state) => state.closeFilterMenuIfOpen);\n\n const { activeIndex } = useContext(DnDGroupContext);\n\n // onMount generate unique options, so everyting is only ran once\n const draggableOptions = useMemo(\n () => ({\n id: props.header.id,\n }),\n [props.header.id],\n );\n\n const useSortableHelpers = useSortable(draggableOptions);\n\n // Since Header component for some reason is being render inside the virtual scrollable list,\n // we need to bubble this prop up to avoid the row list being scrolled when dragging a header cell.\n useEffect(() => {\n if (useSortableHelpers.isDragging) {\n setIsHeaderCellDragging(true);\n /**\n * PUI-18785: close this column's own filter menu as soon as its drag actually starts,\n * rather than disabling the drag while the menu is open \u2014 disabling made dnd-kit drop its\n * pointer listeners entirely, so the same press that should close-and-drag only closed the\n * menu, forcing the user into a second press to actually drag. Reacting to isDragging keeps\n * it a single gesture: the PointerSensor has no activation constraint, so this fires on the\n * first pointer move, before the popover (anchored to the header) visibly follows it.\n */\n closeFilterMenuIfOpen(props.header.id);\n } else {\n setIsHeaderCellDragging(false);\n }\n }, [useSortableHelpers.isDragging, setIsHeaderCellDragging, closeFilterMenuIfOpen, props.header.id]);\n // calculate all the \"useSortable\" values as per required\n const draggableProps: DSDataTableT.DraggablePropsT = useMemo(() => {\n if (!dragAndDropColumns) return false;\n\n const { index, overIndex } = useSortableHelpers;\n\n return {\n ...useSortableHelpers,\n shouldShowDropIndicatorPosition: overIndex === index && overIndex !== -1,\n dropIndicatorPosition:\n activeIndex && index > activeIndex ? DropIndicatorPosition.After : DropIndicatorPosition.Before,\n isDropValid: true,\n };\n }, [useSortableHelpers, dragAndDropColumns, activeIndex]);\n // we use a context so we can easly access information wherever without bubbling down\n // this context is all Memoized so as long as component is not re-mounted,\n // the context won't trigger un-required renders per-se...\n const ctx: SortableItemContextType = useMemo(\n () => ({\n draggableProps,\n }),\n [draggableProps],\n );\n // we always add the context, if draggableProps===false we don't have the DnD enabled.\n return (\n <SortableItemContext.Provider value={ctx}>\n <Component {...props} />\n </SortableItemContext.Provider>\n );\n };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyEf;AAxER,8BAA4B;AAC5B,mBAAsD;AACtD,uBAAsC;AACtC,2CAAgD;AAGhD,iCAAoC;AACpC,6BAAgC;AAEzB,MAAM,+BACX,CAAoD,cACpD,CAAC,UAAa;AACZ,QAAM,yBAAqB,oDAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,8BAA0B,uDAAiB,CAAC,UAAU,MAAM,uBAAuB;AACzF,QAAM,4BAAwB,uDAAiB,CAAC,UAAU,MAAM,qBAAqB;AAErF,QAAM,EAAE,YAAY,QAAI,yBAAW,sCAAe;AAGlD,QAAM,uBAAmB;AAAA,IACvB,OAAO;AAAA,MACL,IAAI,MAAM,OAAO;AAAA,IACnB;AAAA,IACA,CAAC,MAAM,OAAO,EAAE;AAAA,EAClB;AAEA,QAAM,yBAAqB,qCAAY,gBAAgB;AAIvD,8BAAU,MAAM;AACd,QAAI,mBAAmB,YAAY;AACjC,8BAAwB,IAAI;AAS5B,4BAAsB,MAAM,OAAO,EAAE;AAAA,IACvC,OAAO;AACL,8BAAwB,KAAK;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,mBAAmB,YAAY,yBAAyB,uBAAuB,MAAM,OAAO,EAAE,CAAC;AAEnG,QAAM,qBAA+C,sBAAQ,MAAM;AACjE,QAAI,CAAC,mBAAoB,QAAO;AAEhC,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC,cAAc,SAAS,cAAc;AAAA,MACtE,uBACE,eAAe,QAAQ,cAAc,uCAAsB,QAAQ,uCAAsB;AAAA,MAC3F,aAAa;AAAA,IACf;AAAA,EACF,GAAG,CAAC,oBAAoB,oBAAoB,WAAW,CAAC;AAIxD,QAAM,UAA+B;AAAA,IACnC,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SACE,4CAAC,+CAAoB,UAApB,EAA6B,OAAO,KACnC,sDAAC,aAAW,GAAG,OAAO,GACxB;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -45,6 +45,7 @@ var import_useFreezeVirtualScrollOnDrag = require("../configs/useFreezeVirtualSc
|
|
|
45
45
|
const VirtualRowsList = () => {
|
|
46
46
|
const isLoading = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.isLoading);
|
|
47
47
|
const virtualListRef = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.virtualListRef);
|
|
48
|
+
const headerHeightPx = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.headerHeightPx);
|
|
48
49
|
const setBodyClientWidth = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.setBodyClientWidth);
|
|
49
50
|
const flattenedData = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.flattenedData);
|
|
50
51
|
const isEmptyContent = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.isEmptyContent);
|
|
@@ -90,6 +91,7 @@ const VirtualRowsList = () => {
|
|
|
90
91
|
role: "rowgroup",
|
|
91
92
|
gridLayout,
|
|
92
93
|
totalColumnsWidth,
|
|
94
|
+
headerHeightPx,
|
|
93
95
|
"aria-busy": isLoading,
|
|
94
96
|
getOwnerProps,
|
|
95
97
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/VirtualRowsList.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable consistent-return */\nimport React, { useCallback, useMemo } from 'react';\nimport { useInternalStore, usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { StyledTableContentWrapper, StyledVirtualListWrapper } from '../styled.js';\nimport { EmptyContent } from './EmptyContent.js'; // imported this way to avoid circular dependencies\nimport { Headers } from './Headers/index.js'; // imported this way to avoid circular dependencies\nimport { MemoizedLoader as Loader } from './Loader.js';\nimport { RowsWithContext as Rows } from './Rows.js'; // imported this way to avoid circular dependencies\nimport { useFreezeVirtualScrollOnDrag } from '../configs/useFreezeVirtualScrollOnDrag.js';\nexport const VirtualRowsList = () => {\n const isLoading = usePropsStore((state) => state.isLoading);\n\n const virtualListRef = usePropsStore((state) => state.virtualListRef);\n const setBodyClientWidth = usePropsStore((state) => state.setBodyClientWidth);\n const flattenedData = usePropsStore((state) => state.flattenedData);\n const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n const { totalColumnsWidth, gridLayout } = usePropsStore((state) => state.layoutHelpers);\n const { totalSize, scrollToIndex } = usePropsStore((state) => state.virtualListHelpers);\n const getOwnerProps = usePropsStore((store) => store.get);\n const isHeaderCellDragging = useInternalStore((state) => state.isHeaderCellDragging);\n const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);\n\n const onKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.ctrlKey && e.code === 'End') {\n scrollToIndex(flattenedData.length - 1);\n setFocusedRowId(flattenedData[flattenedData.length - 1].uid);\n } else if (e.ctrlKey && e.code === 'Home') {\n scrollToIndex(0, { align: 'center' });\n setFocusedRowId(flattenedData[0].uid);\n }\n },\n [scrollToIndex, setFocusedRowId, flattenedData],\n );\n\n const tableContentWrapperHeight = useMemo(\n () => (isEmptyContent || isLoading ? '100%' : totalSize),\n [isEmptyContent, isLoading, totalSize],\n );\n\n useFreezeVirtualScrollOnDrag(virtualListRef, isHeaderCellDragging);\n\n const trackVirtualListRefAndClientWidth = useCallback(\n (node: HTMLDivElement | null) => {\n virtualListRef.current = node;\n if (node) {\n const { clientWidth } = node;\n // if we don't track this with a non-ref, react will not know some component needs to be re-rendered to apply the new width\n setBodyClientWidth(clientWidth);\n }\n },\n [virtualListRef, setBodyClientWidth],\n );\n\n return (\n <StyledVirtualListWrapper\n innerRef={trackVirtualListRefAndClientWidth}\n data-testid={DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\n onKeyDown={onKeyDown}\n tabIndex={-1}\n role=\"rowgroup\"\n gridLayout={gridLayout}\n totalColumnsWidth={totalColumnsWidth}\n aria-busy={isLoading}\n getOwnerProps={getOwnerProps}\n >\n <StyledTableContentWrapper\n height={tableContentWrapperHeight}\n rows={['min-content', 'auto']}\n cols={['100%']}\n getOwnerProps={getOwnerProps}\n >\n <Headers />\n {isEmptyContent && <EmptyContent />}\n {isLoading ? <Loader /> : null}\n {!isLoading && !isEmptyContent && <Rows />}\n </StyledTableContentWrapper>\n </StyledVirtualListWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable consistent-return */\nimport React, { useCallback, useMemo } from 'react';\nimport { useInternalStore, usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { StyledTableContentWrapper, StyledVirtualListWrapper } from '../styled.js';\nimport { EmptyContent } from './EmptyContent.js'; // imported this way to avoid circular dependencies\nimport { Headers } from './Headers/index.js'; // imported this way to avoid circular dependencies\nimport { MemoizedLoader as Loader } from './Loader.js';\nimport { RowsWithContext as Rows } from './Rows.js'; // imported this way to avoid circular dependencies\nimport { useFreezeVirtualScrollOnDrag } from '../configs/useFreezeVirtualScrollOnDrag.js';\nexport const VirtualRowsList = () => {\n const isLoading = usePropsStore((state) => state.isLoading);\n\n const virtualListRef = usePropsStore((state) => state.virtualListRef);\n const headerHeightPx = usePropsStore((state) => state.headerHeightPx);\n const setBodyClientWidth = usePropsStore((state) => state.setBodyClientWidth);\n const flattenedData = usePropsStore((state) => state.flattenedData);\n const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n const { totalColumnsWidth, gridLayout } = usePropsStore((state) => state.layoutHelpers);\n const { totalSize, scrollToIndex } = usePropsStore((state) => state.virtualListHelpers);\n const getOwnerProps = usePropsStore((store) => store.get);\n const isHeaderCellDragging = useInternalStore((state) => state.isHeaderCellDragging);\n const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);\n\n const onKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.ctrlKey && e.code === 'End') {\n scrollToIndex(flattenedData.length - 1);\n setFocusedRowId(flattenedData[flattenedData.length - 1].uid);\n } else if (e.ctrlKey && e.code === 'Home') {\n scrollToIndex(0, { align: 'center' });\n setFocusedRowId(flattenedData[0].uid);\n }\n },\n [scrollToIndex, setFocusedRowId, flattenedData],\n );\n\n const tableContentWrapperHeight = useMemo(\n () => (isEmptyContent || isLoading ? '100%' : totalSize),\n [isEmptyContent, isLoading, totalSize],\n );\n\n useFreezeVirtualScrollOnDrag(virtualListRef, isHeaderCellDragging);\n\n const trackVirtualListRefAndClientWidth = useCallback(\n (node: HTMLDivElement | null) => {\n virtualListRef.current = node;\n if (node) {\n const { clientWidth } = node;\n // if we don't track this with a non-ref, react will not know some component needs to be re-rendered to apply the new width\n setBodyClientWidth(clientWidth);\n }\n },\n [virtualListRef, setBodyClientWidth],\n );\n\n return (\n <StyledVirtualListWrapper\n innerRef={trackVirtualListRefAndClientWidth}\n data-testid={DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\n onKeyDown={onKeyDown}\n tabIndex={-1}\n role=\"rowgroup\"\n gridLayout={gridLayout}\n totalColumnsWidth={totalColumnsWidth}\n headerHeightPx={headerHeightPx}\n aria-busy={isLoading}\n getOwnerProps={getOwnerProps}\n >\n <StyledTableContentWrapper\n height={tableContentWrapperHeight}\n rows={['min-content', 'auto']}\n cols={['100%']}\n getOwnerProps={getOwnerProps}\n >\n <Headers />\n {isEmptyContent && <EmptyContent />}\n {isLoading ? <Loader /> : null}\n {!isLoading && !isEmptyContent && <Rows />}\n </StyledTableContentWrapper>\n </StyledVirtualListWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqEjB;AApEN,mBAA4C;AAC5C,2CAAgD;AAChD,uBAA4B;AAC5B,oBAAoE;AACpE,0BAA6B;AAC7B,qBAAwB;AACxB,oBAAyC;AACzC,kBAAwC;AACxC,0CAA6C;AACtC,MAAM,kBAAkB,MAAM;AACnC,QAAM,gBAAY,oDAAc,CAAC,UAAU,MAAM,SAAS;AAE1D,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,yBAAqB,oDAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,EAAE,mBAAmB,WAAW,QAAI,oDAAc,CAAC,UAAU,MAAM,aAAa;AACtF,QAAM,EAAE,WAAW,cAAc,QAAI,oDAAc,CAAC,UAAU,MAAM,kBAAkB;AACtF,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,2BAAuB,uDAAiB,CAAC,UAAU,MAAM,oBAAoB;AACnF,QAAM,sBAAkB,uDAAiB,CAAC,UAAU,MAAM,eAAe;AAEzE,QAAM,gBAAY;AAAA,IAChB,CAAC,MAA2B;AAC1B,UAAI,EAAE,WAAW,EAAE,SAAS,OAAO;AACjC,sBAAc,cAAc,SAAS,CAAC;AACtC,wBAAgB,cAAc,cAAc,SAAS,CAAC,EAAE,GAAG;AAAA,MAC7D,WAAW,EAAE,WAAW,EAAE,SAAS,QAAQ;AACzC,sBAAc,GAAG,EAAE,OAAO,SAAS,CAAC;AACpC,wBAAgB,cAAc,CAAC,EAAE,GAAG;AAAA,MACtC;AAAA,IACF;AAAA,IACA,CAAC,eAAe,iBAAiB,aAAa;AAAA,EAChD;AAEA,QAAM,gCAA4B;AAAA,IAChC,MAAO,kBAAkB,YAAY,SAAS;AAAA,IAC9C,CAAC,gBAAgB,WAAW,SAAS;AAAA,EACvC;AAEA,wEAA6B,gBAAgB,oBAAoB;AAEjE,QAAM,wCAAoC;AAAA,IACxC,CAAC,SAAgC;AAC/B,qBAAe,UAAU;AACzB,UAAI,MAAM;AACR,cAAM,EAAE,YAAY,IAAI;AAExB,2BAAmB,WAAW;AAAA,MAChC;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,kBAAkB;AAAA,EACrC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,eAAa,6BAAY;AAAA,MACzB;AAAA,MACA,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAW;AAAA,MACX;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ;AAAA,UACR,MAAM,CAAC,eAAe,MAAM;AAAA,UAC5B,MAAM,CAAC,MAAM;AAAA,UACb;AAAA,UAEA;AAAA,wDAAC,0BAAQ;AAAA,YACR,kBAAkB,4CAAC,oCAAa;AAAA,YAChC,YAAY,4CAAC,cAAAA,gBAAA,EAAO,IAAK;AAAA,YACzB,CAAC,aAAa,CAAC,kBAAkB,4CAAC,YAAAC,iBAAA,EAAK;AAAA;AAAA;AAAA,MAC1C;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": ["Loader", "Rows"]
|
|
7
7
|
}
|
|
@@ -98,8 +98,12 @@ const DSDataTablePropTypes = {
|
|
|
98
98
|
disableDnD: import_ds_props_helpers.PropTypes.bool.description("Whereas this column should be draggable"),
|
|
99
99
|
canResize: import_ds_props_helpers.PropTypes.bool.description("Whereas this column should be resizable"),
|
|
100
100
|
width: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.string, import_ds_props_helpers.PropTypes.number]).description("Width of this column"),
|
|
101
|
-
minWidth: import_ds_props_helpers.PropTypes.number.description(
|
|
102
|
-
|
|
101
|
+
minWidth: import_ds_props_helpers.PropTypes.number.description(
|
|
102
|
+
"Minimum width this column can be resized down to. Defaults to 30px, which is NOT guaranteed to fit the header title and icon affordances (drag handle / filter / sort) enabled on this column. When isResizeable is used, pass an explicit minWidth sized to the actual header content \u2014 otherwise the resize handle can overlap the header title."
|
|
103
|
+
),
|
|
104
|
+
maxWidth: import_ds_props_helpers.PropTypes.number.description(
|
|
105
|
+
"Maximum width this column can be resized up to, useful when resizing. Defaults to 600px."
|
|
106
|
+
),
|
|
103
107
|
canSort: import_ds_props_helpers.PropTypes.bool.description("Whereas this column is sortable"),
|
|
104
108
|
disableFirstOptionFocusOnFilter: import_ds_props_helpers.PropTypes.bool.description(
|
|
105
109
|
"Whereas the first option should not be focused on filter"
|
|
@@ -119,7 +123,10 @@ const DSDataTablePropTypes = {
|
|
|
119
123
|
alwaysDisplayEditIcon: import_ds_props_helpers.PropTypes.bool.description(
|
|
120
124
|
"Whereas to always show the edit icon on this column if it is editable"
|
|
121
125
|
),
|
|
122
|
-
textWrap: import_ds_props_helpers.PropTypes.oneOf(["wrap", "wrap-all", "truncate"]).description("How to wrap the text in the column")
|
|
126
|
+
textWrap: import_ds_props_helpers.PropTypes.oneOf(["wrap", "wrap-all", "truncate"]).description("How to wrap the text in the column"),
|
|
127
|
+
pillLabel: import_ds_props_helpers.PropTypes.string.description(
|
|
128
|
+
"Overrides the filter pill label text for this column when non-empty; defaults to the column Header"
|
|
129
|
+
)
|
|
123
130
|
})
|
|
124
131
|
).description("Array of columns").isRequired,
|
|
125
132
|
data: import_ds_props_helpers.PropTypes.arrayOf(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { uid } from 'uid';\nimport type { Range, useVirtual } from 'react-virtual/types';\nimport type { ZustandT } from '@elliemae/ds-zustand-helpers';\nimport type { DSPaginationT } from '@elliemae/ds-pagination';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DnDKitTree, useSortable } from '@elliemae/ds-drag-and-drop';\nimport type { DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n type DSPropTypesSchema,\n type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport { FILTER_TYPES } from './exported-related/index.js';\nimport { type DropIndicatorPosition, ColsLayoutStyle } from './configs/constants.js';\nimport { DSDataTableName, DSDataTableSlots } from './constants/index.js';\nexport namespace DSDataTableT {\n // ===========================================================================\n // Typescript definition for auxiliary types\n // ===========================================================================\n type PropsT<D, R, O> = Partial<D> & R & O;\n\n type InternalPropsT<D, R, O> = D & R & O;\n\n // ===========================================================================\n // Typescript definition for zustand store\n // ===========================================================================\n\n export type InternalAtoms = {\n drilldownRowId: string | null;\n focusedRowId: string | null;\n isShiftPressed: boolean;\n reduxHeaders: Record<string, ReduxHeader>;\n isHeaderCellDragging: boolean;\n };\n export type UseAutoCalculatedT = {\n /**\n * visibleRangeRef: React.MutableRefObject<Range>\n * We can use this ref to get the visible range of the virtual list\n * taking in consideration the end-start and overscan.\n */\n visibleRangeRef: React.MutableRefObject<Range>;\n columnHeaderRef: React.MutableRefObject<HTMLDivElement | null>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | null>;\n flattenedData: InternalRow[];\n allDataFlattened: InternalRow[];\n isEmptyContent: boolean;\n firstFocuseableColumnHeaderId: string | undefined;\n visibleColumns: InternalColumn[];\n virtualListHelpers: ReturnType<typeof useVirtual>;\n layoutHelpers: {\n totalColumnsWidth: number | string;\n gridLayout: string[];\n };\n paginationHelpers: Pagination;\n lastSelected: React.MutableRefObject<number>;\n bodyClientWidth: number | string;\n setBodyClientWidth: React.Dispatch<React.SetStateAction<number | string>>;\n };\n export type Selectors = Record<string, never>;\n export type Reducers = {\n patchHeader: (headerId: string, newHeader: Partial<ReduxHeader>) => void;\n patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n };\n export type ShuttleInternalStore = ZustandT.InternalStore<InternalAtoms, Selectors, Reducers>;\n\n // ===========================================================================\n // Typescript definition for data table related things\n // ===========================================================================\n\n export interface Filter {\n id: string;\n type: string;\n value: unknown;\n }\n\n export type FilterFn<T> = (unfilteredData: Row[], filterKey: string, filterValue: T) => Row[];\n export type FilterFnOutOfTheBoxCurrencyRange = DSDataTableT.FilterFn<{ from: string; to: string }>;\n export type FilterFnOutOfTheBoxDateRange = DSDataTableT.FilterFn<{ startDate: string; endDate: string }>;\n export type FilterFnOutOfTheBoxDateSwitcher = DSDataTableT.FilterFn<{\n startDate: string;\n endDate: string;\n isDateRange: boolean;\n }>;\n export type FilterFnOutOfTheBoxMultiSelect = DSDataTableT.FilterFn<{ label: string; value: string }[]>;\n export type FilterFnOutOfTheBoxNumberRange = DSDataTableT.FilterFn<{ from?: number; to?: number }>;\n export type FilterFnOutOfTheBoxSingleDate = DSDataTableT.FilterFn<string>;\n export type FilterFnOutOfTheBoxSingleSelect = DSDataTableT.FilterFn<{ label: string; value: string }>;\n export type FilterFnOutOfTheBoxFreeTextSearch = DSDataTableT.FilterFn<string>;\n export interface FilterItemProps {\n column: InternalColumn;\n filters: Filter[];\n onFiltersChange: (filters: Filter[]) => void;\n reduxHeader: ReduxHeader;\n innerRef: React.MutableRefObject<HTMLButtonElement | null>;\n referenceColumn?: HTMLDivElement | null;\n }\n\n export interface FilterProps<T> {\n column: InternalColumn;\n referenceColumn?: HTMLDivElement | null;\n onValueChange: (type: string, value: T | undefined) => void;\n patchHeaderFilterButtonAndMenu: (headerId: string, newState: boolean) => void;\n patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n filterValue: T;\n reduxHeader: ReduxHeader;\n innerRef: React.MutableRefObject<HTMLButtonElement | null>;\n domIdAffix?: string;\n }\n\n export interface FilterPillProps<T> {\n columnHeader: string;\n column: string;\n value: T;\n filters: Filter[];\n onFiltersChange: (filters: Filter[]) => void;\n prevRef?: React.RefObject<HTMLElement>;\n innerRef: React.RefObject<HTMLElement>;\n nextRef?: React.RefObject<HTMLElement>;\n onPillRemove?: (remove: () => void) => void;\n }\n\n export interface ReduxHeader {\n hideFilterMenu?: boolean;\n hideFilterButton?: boolean;\n showDnDHandle?: boolean;\n withTabStops?: boolean;\n showSortCaret?: boolean;\n }\n\n export type SelectionItem = boolean | 'mixed';\n\n export type Selection = Record<string | number, SelectionItem>;\n\n export type UniqueRowAccessorType = string | string[] | ((row: Row) => string) | undefined;\n\n export interface SortBy {\n id: string;\n desc: boolean;\n }\n\n export interface Pagination extends DSPaginationT.Props {\n hasPagination: boolean;\n pageIndex?: number;\n canPreviousPage?: boolean;\n canNextPage?: boolean;\n pageSize?: number;\n dataIsPage?: boolean;\n showPerPageSelector?: boolean;\n perPageOptions?: number[];\n perPageStep?: number;\n minPerPage?: number;\n maxPerPage?: number;\n onPageSizeChange?: (pageSize: number) => void;\n onPreviousPage?: () => void;\n onNextPage?: () => void;\n onPageChange?: (page: number) => void;\n pageCount?: number | string;\n isLoadingPageCount?: boolean;\n pageDetails?: string[];\n pageDetailsTitle?: string;\n }\n\n export type RowVariant = 'ds-header-group-row' | 'ds-primary-row' | 'ds-secondary-row';\n\n export interface RenderRowActionsConfig {\n columnWidth: number;\n renderer: React.ComponentType<CellProps>;\n }\n\n export type RenderRowActions = false | RenderRowActionsConfig;\n\n export type DropIndicatorPositionValues = TypescriptHelpersT.ObjectValues<typeof DropIndicatorPosition>;\n\n export type ColsLayoutStyleValues = TypescriptHelpersT.ObjectValues<typeof ColsLayoutStyle>;\n\n export type DraggablePropsT =\n | false\n | (ReturnType<typeof useSortable> & {\n dropIndicatorPosition: DropIndicatorPositionValues;\n shouldShowDropIndicatorPosition: boolean;\n isDropValid: boolean;\n });\n\n export type FilterOptionT = DSComboboxT.Props['allOptions'][number];\n export type EditOptionT = DSComboboxT.Props['allOptions'][number];\n\n // ===========================================================================\n // Typescript definition for the row and columns\n // ===========================================================================\n\n export interface Row {\n [key: string]: unknown;\n id: string;\n subRows?: Row[];\n tableRowDetails?: React.ComponentType<DetailsProps>;\n dimsumHeaderValue?: string;\n }\n export interface EditableCellProps<T extends HTMLElement = HTMLElement> extends CellProps<T> {\n DefaultCellRender: JSX.Element;\n }\n\n export interface Column {\n id?: string;\n Header: string | React.ComponentType<HeaderProps>;\n accessor?: string;\n filter?: string;\n filterOptions?: FilterOptionT[] | (() => FilterOptionT[]);\n disableFirstOptionFocusOnFilter?: boolean;\n editOptions?: EditOptionT[] | (() => EditOptionT[]);\n filterMinWidth?: number | string;\n Filter?: React.ComponentType<FilterProps<unknown>>;\n Cell?: React.ComponentType<CellRendererProps>;\n editable?: string | React.ComponentType<EditableCellProps>;\n disableDnD?: boolean;\n width?: number;\n minWidth?: number;\n maxWidth?: number;\n padding?: number;\n columns?: Column[];\n canSort?: boolean;\n isSortedDesc?: boolean;\n canResize?: boolean;\n isFocuseable?: boolean;\n textWrap?: 'wrap' | 'wrap-all' | 'truncate';\n ref?: React.MutableRefObject<HTMLTableColElement | null>;\n required?: boolean;\n cellStyle?: React.CSSProperties;\n alwaysDisplayEditIcon?: boolean;\n }\n\n // ===========================================================================\n // Typescript definition for the internal representation of the row and columns\n // ===========================================================================\n\n export interface InternalRow {\n id: string;\n uid: string;\n index: number;\n realIndex: number;\n parent: InternalRow | null;\n parentId: string | null;\n parentIndex: number | null;\n depth: number;\n isExpanded: boolean;\n subRows: Row[];\n childrenCount: number;\n original: Row;\n cells: Cell[];\n }\n\n export interface InternalColumn extends Column {\n index?: number;\n id: string;\n parentId: string | null;\n depth: number;\n ref: React.MutableRefObject<HTMLTableColElement | null>;\n columns?: InternalColumn[];\n persistFilterInputAfterSubmit?: boolean;\n }\n\n // ===========================================================================\n // Typescript definition for the internal representation of the cell\n // ===========================================================================\n\n export interface CellRendererProps {\n row: InternalRow;\n column: InternalColumn;\n cell: Cell;\n isRowSelected: boolean;\n isDragOverlay: boolean;\n shouldAddExpandCell: boolean;\n // cellIsNextToExpander: boolean;\n isDisabledRow?: boolean;\n draggableProps?: DraggablePropsT;\n domIdAffix?: string;\n }\n\n export interface Cell<T extends HTMLElement = HTMLElement> {\n column: InternalColumn;\n value: unknown;\n render: React.ComponentType<CellRendererProps>;\n row: InternalRow;\n ref: React.MutableRefObject<T | null>;\n id: string;\n }\n\n // ===========================================================================\n // Typescript definition for all component props\n // ===========================================================================\n\n export interface HeaderProps {\n column: InternalColumn;\n draggableProps: DraggablePropsT;\n }\n\n export interface CellProps<T extends HTMLElement = HTMLElement> {\n row: InternalRow;\n column: InternalColumn;\n cell: Cell<T>;\n domIdAffix?: string;\n isRowSelected: boolean;\n isDragOverlay: boolean;\n shouldAddExpandCell: boolean;\n cellIsNextToExpander: boolean;\n isDisabledRow?: boolean;\n draggableProps?: DraggablePropsT;\n }\n\n export interface DetailsProps {\n detailsIndent: number;\n row: InternalRow;\n }\n export interface RowVariantProps {\n row: DSDataTableT.InternalRow;\n itemIndex: number;\n isDragOverlay: boolean;\n focusedRowId: string | null;\n drilldownRowId: string | null;\n }\n\n // ===========================================================================\n // Typescript definition for the React Context\n // ===========================================================================\n\n export interface Context {\n tableProps: InternalProps;\n columnHeaderRef: React.MutableRefObject<HTMLDivElement | null>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | null>;\n flattenedData: InternalRow[];\n allDataFlattened: InternalRow[];\n isEmptyContent: boolean;\n firstFocuseableColumnHeaderId: string | undefined;\n visibleColumns: InternalColumn[];\n virtualListHelpers: ReturnType<typeof useVirtual>;\n layoutHelpers: {\n totalColumnsWidth: number | string;\n gridLayout: string[];\n };\n paginationHelpers: Pagination;\n drilldownRowId: string | null;\n setDrilldownRowId: React.Dispatch<React.SetStateAction<string | null>>;\n focusedRowId: string | null;\n setFocusedRowId: React.Dispatch<React.SetStateAction<string | null>>;\n reduxHeaders: Record<string, ReduxHeader>;\n patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n isShiftPressed: boolean;\n setIsShiftPressed: React.Dispatch<React.SetStateAction<boolean>>;\n lastSelected: React.MutableRefObject<number>;\n isHeaderCellDragging: boolean;\n setIsHeaderCellDragging: React.Dispatch<React.SetStateAction<boolean>>;\n }\n\n export interface DefaultProps {\n height: string;\n width: string;\n renderRowActions: false | RenderRowActionsConfig;\n getRowVariant: (\n row: InternalRow,\n defaultCellRenderer: React.ComponentType<{\n row: DSDataTableT.InternalRow;\n isRowSelected: boolean;\n isDragOverlay: boolean;\n }>,\n ) => RowVariant | React.ComponentType<RowVariantProps>;\n withFilterBar: boolean;\n isExpandable: boolean;\n expandedRows: Record<string, boolean>;\n disabledRows: Record<string, boolean>;\n isResizeable: boolean;\n isLoading: boolean;\n pagination: false | Pagination;\n filters: Filter[];\n colsLayoutStyle: ColsLayoutStyleValues;\n hiddenColumns: string[];\n noResultsMessage: string;\n dragAndDropRows: boolean;\n maxDragAndDropLevel: number;\n onRowsReorder: (\n newData: Row[],\n indexes: { targetIndex: number; fromIndex: number },\n considerExpanding: string | null,\n extraData: { flattenedData: InternalRow[]; allDataFlattened: InternalRow[] },\n ) => void;\n dragAndDropColumns: boolean;\n onColumnsReorder: (newData: Column[], indexes: { targetIndex: number; fromIndex: number }) => void;\n getIsDropValid: (\n active: DnDKitTree.Item<Row>,\n over: DnDKitTree.Item<Row>,\n dropIndicatorPosition: DropIndicatorPositionValues,\n ) => boolean;\n onColumnResize: (headerId: string, width: number) => void;\n onColumnSizeChange: (newColumns: Column[], headerId: string, width: number) => void;\n onRowClick: TypescriptHelpersT.GenericFunc;\n onRowFocus: TypescriptHelpersT.GenericFunc;\n noSelectionColumn: boolean;\n selectSingle: boolean;\n onSelectionChange: (\n newSelection: Selection,\n selectedControl: string,\n event: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent,\n ) => void;\n textWrap: 'wrap' | 'wrap-all' | 'truncate';\n onCellValueChange: (cellChange: { value: unknown; property: unknown; rowIndex: number }) => void;\n onFiltersChange: TypescriptHelpersT.GenericFunc;\n onPageChanged: TypescriptHelpersT.GenericFunc;\n onRowExpand: (expandedRows: Record<string, boolean>, toggledRow: string) => void;\n onColumnSortChange: (newSortRequest: { column: unknown; direction: unknown }) => void;\n onColumnSort: (newColumns: Column[], headerId: string, direction: 'ASC' | 'DESC') => void;\n isSkeleton: boolean;\n domIdAffix?: string;\n }\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSDataTableName, typeof DSDataTableSlots> {\n uniqueRowAccessor?: UniqueRowAccessorType;\n cellRendererProps?: Record<string, unknown>;\n selection?: Selection;\n groupedRowsRenderHeader?:\n | ((dimsumHeaderValue: string | undefined, subRows: Row[] | undefined) => JSX.Element)\n | string;\n filterBarProps?: {\n filterBarAddonRenderer?: React.ComponentType<{ innerRef: React.MutableRefObject<HTMLButtonElement | null> }>;\n customPillRenderer?: React.ComponentType<FilterPillProps<unknown>>;\n onClearAllFiltersClick?: () => void;\n onDropdownMenuToggle?: (isOpen: boolean, eventType: string) => void;\n onDropdownMenuClickOutside?: () => void;\n onDropdownMenuTriggerClick?: () => void;\n isDropdownMenuOpen?: boolean;\n extraOptions?: { type: string; id: string; label: string; onClick?: TypescriptHelpersT.GenericFunc }[];\n };\n actionRef?: React.MutableRefObject<{\n scrollToIndex: ReturnType<typeof useVirtual>['scrollToIndex'];\n scrollToOffset: ReturnType<typeof useVirtual>['scrollToOffset'];\n }>;\n noResultsSecondaryMessage?: string;\n noResultsButtonLabel?: string;\n noResultsPlaceholder?: React.ReactElement;\n onNoResultsButtonClick?: TypescriptHelpersT.GenericFunc;\n onTableResize?: TypescriptHelpersT.GenericFunc;\n Pagination?: React.ComponentType<Record<string, never>>;\n getAriaLabelForRow?: (args: {\n row: InternalRow;\n selected: boolean;\n disabled: boolean;\n expandable: boolean;\n expanded: boolean;\n }) => string;\n checkboxSelectAllProps?: DSControlledCheckboxT.Props;\n }\n export interface RequiredProps {\n columns: Column[];\n data: Row[];\n }\n\n export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps>;\n\n export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps>;\n\n export type GetOwnerPropsT = () => ZustandT.PropsStore<\n DefaultProps & RequiredProps & OptionalProps & UseAutoCalculatedT\n >;\n}\n\n// default props is a function to ensure that the uid is unique for each instance of the component\n// this is supported by the useMemoMergePropsWithDefault function.\nexport const defaultProps: () => DSDataTableT.DefaultProps = () => ({\n height: '100%',\n width: '100%',\n renderRowActions: false,\n getRowVariant: () => 'ds-primary-row',\n isExpandable: false,\n expandedRows: {},\n disabledRows: {},\n isResizeable: false,\n isLoading: false,\n pagination: false,\n withFilterBar: false,\n filters: [],\n getIsDropValid: () => true,\n onColumnResize: () => null,\n onColumnSortChange: () => null,\n colsLayoutStyle: ColsLayoutStyle.Fixed,\n hiddenColumns: [],\n noResultsMessage: 'No Results Found',\n dragAndDropRows: false,\n maxDragAndDropLevel: 1,\n onRowsReorder: () => null,\n dragAndDropColumns: false,\n onColumnsReorder: () => null,\n onColumnSizeChange: () => null,\n onRowClick: () => null,\n onRowFocus: () => null,\n noSelectionColumn: false,\n selectSingle: false,\n onSelectionChange: () => null,\n textWrap: 'wrap',\n onCellValueChange: () => null,\n onFiltersChange: () => null,\n onPageChanged: () => null,\n onRowExpand: () => null,\n onColumnSort: () => null,\n isSkeleton: false,\n domIdAffix: uid(8),\n});\n\nexport const DSDataTablePropTypes: DSPropTypesSchema<DSDataTableT.Props> = {\n ...getPropsPerSlotPropTypes(DSDataTableName, DSDataTableSlots),\n columns: PropTypes.arrayOf(\n PropTypes.shape({\n Header: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]).description(\n 'Header name or component',\n ).isRequired,\n accessor: PropTypes.string.description('The entry of the data that this column will display'),\n id: PropTypes.string.description('The id of the column, will default to the Header or accessor if not present'),\n filter: PropTypes.oneOf(Object.values(FILTER_TYPES)).description('out-of-the-box filters'),\n Filter: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description(\n 'The custom component to render as a filter',\n ),\n Cell: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('The custom cell renderer component'),\n editable: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]).description(\n 'The editable out-of-the-box or component to render',\n ),\n disableDnD: PropTypes.bool.description('Whereas this column should be draggable'),\n canResize: PropTypes.bool.description('Whereas this column should be resizable'),\n width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of this column'),\n minWidth: PropTypes.number.description('Minimum width of this column, useful when resizing'),\n maxWidth: PropTypes.number.description('Maximum width of this column, useful when resizing'),\n canSort: PropTypes.bool.description('Whereas this column is sortable'),\n disableFirstOptionFocusOnFilter: PropTypes.bool.description(\n 'Whereas the first option should not be focused on filter',\n ),\n filterMinWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n 'Minimum width of the filter',\n ),\n filterOptions: PropTypes.arrayOf(\n PropTypes.shape({\n dsId: PropTypes.string,\n value: PropTypes.string,\n label: PropTypes.string,\n }),\n ).description('Filter options'),\n isSortedDesc: PropTypes.bool.description('Whereas this column is sorted descendingly'),\n required: PropTypes.bool.description('Whereas this column is required'),\n alwaysDisplayEditIcon: PropTypes.bool.description(\n 'Whereas to always show the edit icon on this column if it is editable',\n ),\n textWrap: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']).description('How to wrap the text in the column'),\n }),\n ).description('Array of columns').isRequired,\n data: PropTypes.arrayOf(\n PropTypes.shape({\n tableRowDetails: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description('Component for row details'),\n dimsumHeaderValue: PropTypes.string.description('Header displayed on the header variant of the row'),\n }),\n ).description('Array of rows'),\n height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Height of the datatable component'),\n width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of the datatable component'),\n renderRowActions: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]).description(\n 'The renderer to use for the action toolbar',\n ),\n isExpandable: PropTypes.bool.description('Whether the datatable is expandable').defaultValue(false),\n uniqueRowAccessor: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.arrayOf(PropTypes.string),\n PropTypes.func,\n ]).description(\n 'Column / Combination of columns / Function to call to produce a unique identifier for each row.' +\n ' This is necessary for the selectable and drag and drop features',\n ),\n disabledRows: PropTypes.object.description(\n 'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is disabled or not',\n ),\n expandedRows: PropTypes.object.description(\n 'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is expanded or not',\n ),\n onRowExpand: PropTypes.func.description('Function invoked when a row is (un)expanded'),\n cellRendererProps: PropTypes.object.description(\n 'Object with all the props you want the cells to have available when rendering',\n ),\n selectSingle: PropTypes.bool.description('Whether the selectable feature is single').defaultValue(false),\n selection: PropTypes.object.description(\n 'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is selected or not',\n ),\n onSelectionChange: PropTypes.func.description('Function invoked when a row is selected'),\n groupedRowsRenderHeader: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).description(\n 'String | Function to call which will display in the row headers',\n ),\n isResizeable: PropTypes.bool.description(\"Whether the datatable's columns are resizeable\"),\n filters: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n type: PropTypes.string,\n value: PropTypes.any,\n }),\n ).description('Array of filter keys and values'),\n withFilterBar: PropTypes.bool.description('Whether to display the filter bar'),\n filterBarProps: PropTypes.shape({\n filterBarAddonRenderer: PropTypes.func.description('Render filterbar right addon component'),\n customPillRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description(\n 'If you specify custom filters, you will need to render their pills here',\n ),\n isDropdownMenuOpen: PropTypes.bool.description('Wether the DropdownMenu is Open or not.'),\n onDropdownMenuToggle: PropTypes.func.description('Callback to toggle the DropdownMenu.'),\n onClearAllFiltersClick: PropTypes.func.description('Callback for Clear Al Filters option.'),\n onDropdownMenuClickOutside: PropTypes.func.description('Callback triggered when clicking outside DropdownMenu.'),\n onDropdownMenuTriggerClick: PropTypes.func.description('Callback triggered when clicking DropdownMenu ellipsis.'),\n extraOptions: PropTypes.arrayOf(\n PropTypes.shape({\n type: PropTypes.string,\n id: PropTypes.string,\n label: PropTypes.string,\n onClick: PropTypes.func,\n }),\n ).description('Any extra option you want in the dropdownmenu of the filter bar'),\n }).description('Props for the filter bar'),\n onFiltersChange: PropTypes.func.description('Function invoked when filters change'),\n pagination: PropTypes.oneOfType([\n PropTypes.oneOf([false]),\n PropTypes.shape({\n pageCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('How many pages are there'),\n isLoadingPageCount: PropTypes.bool.description('Whether the page count is loading'),\n pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),\n canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),\n canNextPage: PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),\n pageSize: PropTypes.number.description('The current page size').defaultValue(10),\n showPerPageSelector: PropTypes.bool.description('Whether to show the page selector').defaultValue(true),\n perPageOptions: PropTypes.arrayOf(\n PropTypes.oneOfType([\n PropTypes.number,\n PropTypes.shape({\n dsId: PropTypes.string,\n value: PropTypes.number,\n label: PropTypes.string,\n type: PropTypes.oneOf(['single']),\n }),\n ]),\n )\n .description('The available options for page size')\n .defaultValue([10]),\n perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),\n minPerPage: PropTypes.number.description('Step for the per page options').defaultValue(0),\n maxPerPage: PropTypes.number.description('Step for the per page options').defaultValue(100),\n onPageSizeChange: PropTypes.func\n .description('Function invoked when the page size changes')\n .defaultValue(() => null),\n onPreviousPage: PropTypes.func\n .description('Function invoked when the previous button is pressed')\n .defaultValue(() => null),\n onPageChange: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n onNextPage: PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),\n pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),\n dataIsPage: PropTypes.bool.description('Whether to treat data as a page').defaultValue(false),\n pageDetailsTitle: PropTypes.string\n .description('The title of the details (usually a column of your dataset)')\n .defaultValue(''),\n }),\n ]).description('Object containing the data for the pagination'),\n Pagination: PropTypes.func.description('Custom component to show in place of the pagination'),\n colsLayoutStyle: PropTypes.oneOf(['auto', 'fixed']).description('Whether the datatable fills its container or not'),\n hiddenColumns: PropTypes.arrayOf(PropTypes.string).description('IDs of columns not to render'),\n dragAndDropRows: PropTypes.bool.description('Whether to turn on the d&d feature for the rows').defaultValue(false),\n onRowsReorder: PropTypes.func.description('Function invoked when a row is reordered'),\n maxDragAndDropLevel: PropTypes.number.description('Which level is the maximum allowed to drop into'),\n dragAndDropColumns: PropTypes.bool.description('Whether to turn on the d&d feature for the columns'),\n onColumnsReorder: PropTypes.func.description('Function invoked when a column is reordered'),\n getIsDropValid: PropTypes.func.description('Function to determine if a drop is valid'),\n textWrap: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']).description('Global wrapping rule'),\n noResultsMessage: PropTypes.string.description('Message to show when no more data is available'),\n noResultsSecondaryMessage: PropTypes.string.description('Secondary message to show when no more data is available'),\n noResultsButtonLabel: PropTypes.string.description('Label of the button when no more data is available'),\n noResultsPlaceholder: PropTypes.oneOfType([PropTypes.node]).description(\n 'Custom content to show when dataset is empty',\n ),\n isLoading: PropTypes.bool.description('Whether to show a global loader in the datatable'),\n onColumnResize: PropTypes.func\n .description('Function invoked when a column is resized')\n .deprecated({ version: '4.x', message: 'Use onColumnSizeChange' }),\n onColumnSizeChange: PropTypes.func.description('Function invoked when a column is resized'),\n onRowClick: PropTypes.func.description('Function invoked when clicking a row'),\n onRowFocus: PropTypes.func.description('Function invoked when focusing a row'),\n onCellValueChange: PropTypes.func.description(\"Function invoked when an editable cell's content is changed\"),\n onColumnSortChange: PropTypes.func\n .description('Function invoked when a column is sorted')\n .deprecated({ version: '4.x', message: 'Use onColumnSort' }),\n onColumnSort: PropTypes.func.description('Function invoked when a column is sorted'),\n onTableResize: PropTypes.func.description(\n 'Function invoked when the size of the internal table changes, e.g. when a the browser window is resized',\n ),\n actionRef: PropTypes.object.description('Reference where all the exposed action callbacks will be exposed'),\n getRowVariant: PropTypes.func\n .description(\"Function invoked to determine a row's variant\")\n .defaultValue(`() => 'ds-primary-row'`),\n noSelectionColumn: PropTypes.bool.description('Whether to show the selection column or not').defaultValue(false),\n onPageChanged: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n onNoResultsButtonClick: PropTypes.func\n .description('Function invoked when the no results button is clicked')\n .defaultValue(() => null),\n isSkeleton: PropTypes.bool.description('Whether to show a skeleton loader in the datatable'),\n getAriaLabelForRow: PropTypes.func.description('Function invoked to determine a row aria-label'),\n domIdAffix: PropTypes.string\n .description('Affix to avoid duplicate ids')\n .defaultValue('8 randomly generated characters'),\n checkboxSelectAllProps: PropTypes.object.description('Props for the select all checkbox'),\n};\n\nexport const DSDataTablePropTypesSchema = DSDataTablePropTypes as unknown as ValidationMap<DSDataTableT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,iBAAoB;AAQpB,8BAKO;AACP,8BAA6B;AAC7B,uBAA4D;AAC5D,IAAAA,oBAAkD;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { uid } from 'uid';\nimport type { Range, useVirtual } from 'react-virtual/types';\nimport type { ZustandT } from '@elliemae/ds-zustand-helpers';\nimport type { DSPaginationT } from '@elliemae/ds-pagination';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DnDKitTree, useSortable } from '@elliemae/ds-drag-and-drop';\nimport type { DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n type DSPropTypesSchema,\n type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport { FILTER_TYPES } from './exported-related/index.js';\nimport { type DropIndicatorPosition, ColsLayoutStyle } from './configs/constants.js';\nimport { DSDataTableName, DSDataTableSlots } from './constants/index.js';\nexport namespace DSDataTableT {\n // ===========================================================================\n // Typescript definition for auxiliary types\n // ===========================================================================\n type PropsT<D, R, O> = Partial<D> & R & O;\n\n type InternalPropsT<D, R, O> = D & R & O;\n\n // ===========================================================================\n // Typescript definition for zustand store\n // ===========================================================================\n\n export type InternalAtoms = {\n drilldownRowId: string | null;\n focusedRowId: string | null;\n isShiftPressed: boolean;\n reduxHeaders: Record<string, ReduxHeader>;\n // PUI-15154: which column (if any) the mouse is currently over \u2014 tracked independently of\n // reduxHeaders' hover/focus-derived fields so resetAllHeadersExcept can tell \"this other\n // column is legitimately still hovered\" apart from \"this other column has the stuck-focus\n // bug\" (hover and focus are independent axes: a column can be hovered while a different one\n // has keyboard/click focus, and both should stay visible).\n hoveredColumnId: string | null;\n isHeaderCellDragging: boolean;\n };\n export type UseAutoCalculatedT = {\n /**\n * visibleRangeRef: React.MutableRefObject<Range>\n * We can use this ref to get the visible range of the virtual list\n * taking in consideration the end-start and overscan.\n */\n visibleRangeRef: React.MutableRefObject<Range>;\n columnHeaderRef: React.MutableRefObject<HTMLDivElement | null>;\n columnHeaderCallbackRef: (node: HTMLDivElement | null) => void;\n /** Sticky header height (px) \u2014 drives both useVirtual paddingStart and the scroll container's scroll-padding-top (PUI-18626). */\n headerHeightPx: number;\n virtualListRef: React.MutableRefObject<HTMLDivElement | null>;\n flattenedData: InternalRow[];\n allDataFlattened: InternalRow[];\n isEmptyContent: boolean;\n firstFocuseableColumnHeaderId: string | undefined;\n visibleColumns: InternalColumn[];\n virtualListHelpers: ReturnType<typeof useVirtual>;\n layoutHelpers: {\n totalColumnsWidth: number | string;\n gridLayout: string[];\n };\n paginationHelpers: Pagination;\n lastSelected: React.MutableRefObject<number>;\n bodyClientWidth: number | string;\n setBodyClientWidth: React.Dispatch<React.SetStateAction<number | string>>;\n };\n export type Selectors = Record<string, never>;\n export type Reducers = {\n patchHeader: (headerId: string, newHeader: Partial<ReduxHeader>) => void;\n patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n resetAllHeadersExcept: (exceptHeaderId: string) => void;\n closeFilterMenuIfOpen: (headerId: string) => void;\n };\n export type ShuttleInternalStore = ZustandT.InternalStore<InternalAtoms, Selectors, Reducers>;\n\n // ===========================================================================\n // Typescript definition for data table related things\n // ===========================================================================\n\n export interface Filter {\n id: string;\n type: string;\n value: unknown;\n }\n\n export type FilterFn<T> = (unfilteredData: Row[], filterKey: string, filterValue: T) => Row[];\n export type FilterFnOutOfTheBoxCurrencyRange = DSDataTableT.FilterFn<{ from: string; to: string }>;\n export type FilterFnOutOfTheBoxDateRange = DSDataTableT.FilterFn<{ startDate: string; endDate: string }>;\n export type FilterFnOutOfTheBoxDateSwitcher = DSDataTableT.FilterFn<{\n startDate: string;\n endDate: string;\n isDateRange: boolean;\n }>;\n export type FilterFnOutOfTheBoxMultiSelect = DSDataTableT.FilterFn<{ label: string; value: string }[]>;\n export type FilterFnOutOfTheBoxNumberRange = DSDataTableT.FilterFn<{ from?: number; to?: number }>;\n export type FilterFnOutOfTheBoxSingleDate = DSDataTableT.FilterFn<string>;\n export type FilterFnOutOfTheBoxSingleSelect = DSDataTableT.FilterFn<{ label: string; value: string }>;\n export type FilterFnOutOfTheBoxFreeTextSearch = DSDataTableT.FilterFn<string>;\n export interface FilterItemProps {\n column: InternalColumn;\n filters: Filter[];\n onFiltersChange: (filters: Filter[]) => void;\n reduxHeader: ReduxHeader;\n innerRef: React.MutableRefObject<HTMLButtonElement | null>;\n referenceColumn?: HTMLDivElement | null;\n }\n\n export interface FilterProps<T> {\n column: InternalColumn;\n referenceColumn?: HTMLDivElement | null;\n onValueChange: (type: string, value: T | undefined) => void;\n patchHeaderFilterButtonAndMenu: (headerId: string, newState: boolean) => void;\n patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n filterValue: T;\n reduxHeader: ReduxHeader;\n innerRef: React.MutableRefObject<HTMLButtonElement | null>;\n domIdAffix?: string;\n }\n\n export interface FilterPillProps<T> {\n columnHeader: string;\n column: string;\n value: T;\n filters: Filter[];\n onFiltersChange: (filters: Filter[]) => void;\n prevRef?: React.RefObject<HTMLElement>;\n innerRef: React.RefObject<HTMLElement>;\n nextRef?: React.RefObject<HTMLElement>;\n onPillRemove?: (remove: () => void) => void;\n }\n\n export interface ReduxHeader {\n hideFilterMenu?: boolean;\n hideFilterButton?: boolean;\n showDnDHandle?: boolean;\n withTabStops?: boolean;\n showSortCaret?: boolean;\n }\n\n export type SelectionItem = boolean | 'mixed';\n\n export type Selection = Record<string | number, SelectionItem>;\n\n export type UniqueRowAccessorType = string | string[] | ((row: Row) => string) | undefined;\n\n export interface SortBy {\n id: string;\n desc: boolean;\n }\n\n export interface Pagination extends DSPaginationT.Props {\n hasPagination: boolean;\n pageIndex?: number;\n canPreviousPage?: boolean;\n canNextPage?: boolean;\n pageSize?: number;\n dataIsPage?: boolean;\n showPerPageSelector?: boolean;\n perPageOptions?: number[];\n perPageStep?: number;\n minPerPage?: number;\n maxPerPage?: number;\n onPageSizeChange?: (pageSize: number) => void;\n onPreviousPage?: () => void;\n onNextPage?: () => void;\n onPageChange?: (page: number) => void;\n pageCount?: number | string;\n isLoadingPageCount?: boolean;\n pageDetails?: string[];\n pageDetailsTitle?: string;\n }\n\n export type RowVariant = 'ds-header-group-row' | 'ds-primary-row' | 'ds-secondary-row';\n\n export interface RenderRowActionsConfig {\n columnWidth: number;\n renderer: React.ComponentType<CellProps>;\n }\n\n export type RenderRowActions = false | RenderRowActionsConfig;\n\n export type DropIndicatorPositionValues = TypescriptHelpersT.ObjectValues<typeof DropIndicatorPosition>;\n\n export type ColsLayoutStyleValues = TypescriptHelpersT.ObjectValues<typeof ColsLayoutStyle>;\n\n export type DraggablePropsT =\n | false\n | (ReturnType<typeof useSortable> & {\n dropIndicatorPosition: DropIndicatorPositionValues;\n shouldShowDropIndicatorPosition: boolean;\n isDropValid: boolean;\n });\n\n export type FilterOptionT = DSComboboxT.Props['allOptions'][number];\n export type EditOptionT = DSComboboxT.Props['allOptions'][number];\n\n // ===========================================================================\n // Typescript definition for the row and columns\n // ===========================================================================\n\n export interface Row {\n [key: string]: unknown;\n id: string;\n subRows?: Row[];\n tableRowDetails?: React.ComponentType<DetailsProps>;\n dimsumHeaderValue?: string;\n }\n export interface EditableCellProps<T extends HTMLElement = HTMLElement> extends CellProps<T> {\n DefaultCellRender: JSX.Element;\n }\n\n export interface Column {\n id?: string;\n Header: string | React.ComponentType<HeaderProps>;\n accessor?: string;\n filter?: string;\n filterOptions?: FilterOptionT[] | (() => FilterOptionT[]);\n disableFirstOptionFocusOnFilter?: boolean;\n editOptions?: EditOptionT[] | (() => EditOptionT[]);\n filterMinWidth?: number | string;\n Filter?: React.ComponentType<FilterProps<unknown>>;\n Cell?: React.ComponentType<CellRendererProps>;\n editable?: string | React.ComponentType<EditableCellProps>;\n disableDnD?: boolean;\n width?: number;\n minWidth?: number;\n maxWidth?: number;\n padding?: number;\n columns?: Column[];\n canSort?: boolean;\n isSortedDesc?: boolean;\n canResize?: boolean;\n isFocuseable?: boolean;\n textWrap?: 'wrap' | 'wrap-all' | 'truncate';\n pillLabel?: string;\n ref?: React.MutableRefObject<HTMLTableColElement | null>;\n required?: boolean;\n cellStyle?: React.CSSProperties;\n alwaysDisplayEditIcon?: boolean;\n }\n\n // ===========================================================================\n // Typescript definition for the internal representation of the row and columns\n // ===========================================================================\n\n export interface InternalRow {\n id: string;\n uid: string;\n index: number;\n realIndex: number;\n parent: InternalRow | null;\n parentId: string | null;\n parentIndex: number | null;\n depth: number;\n isExpanded: boolean;\n subRows: Row[];\n childrenCount: number;\n original: Row;\n cells: Cell[];\n }\n\n export interface InternalColumn extends Column {\n index?: number;\n id: string;\n parentId: string | null;\n depth: number;\n ref: React.MutableRefObject<HTMLTableColElement | null>;\n columns?: InternalColumn[];\n persistFilterInputAfterSubmit?: boolean;\n }\n\n // ===========================================================================\n // Typescript definition for the internal representation of the cell\n // ===========================================================================\n\n export interface CellRendererProps {\n row: InternalRow;\n column: InternalColumn;\n cell: Cell;\n isRowSelected: boolean;\n isDragOverlay: boolean;\n shouldAddExpandCell: boolean;\n // cellIsNextToExpander: boolean;\n isDisabledRow?: boolean;\n draggableProps?: DraggablePropsT;\n domIdAffix?: string;\n }\n\n export interface Cell<T extends HTMLElement = HTMLElement> {\n column: InternalColumn;\n value: unknown;\n render: React.ComponentType<CellRendererProps>;\n row: InternalRow;\n ref: React.MutableRefObject<T | null>;\n id: string;\n }\n\n // ===========================================================================\n // Typescript definition for all component props\n // ===========================================================================\n\n export interface HeaderProps {\n column: InternalColumn;\n draggableProps: DraggablePropsT;\n }\n\n export interface CellProps<T extends HTMLElement = HTMLElement> {\n row: InternalRow;\n column: InternalColumn;\n cell: Cell<T>;\n domIdAffix?: string;\n isRowSelected: boolean;\n isDragOverlay: boolean;\n shouldAddExpandCell: boolean;\n cellIsNextToExpander: boolean;\n isDisabledRow?: boolean;\n draggableProps?: DraggablePropsT;\n }\n\n export interface DetailsProps {\n detailsIndent: number;\n row: InternalRow;\n }\n export interface RowVariantProps {\n row: DSDataTableT.InternalRow;\n itemIndex: number;\n isDragOverlay: boolean;\n focusedRowId: string | null;\n drilldownRowId: string | null;\n }\n\n // ===========================================================================\n // Typescript definition for the React Context\n // ===========================================================================\n\n export interface Context {\n tableProps: InternalProps;\n columnHeaderRef: React.MutableRefObject<HTMLDivElement | null>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | null>;\n flattenedData: InternalRow[];\n allDataFlattened: InternalRow[];\n isEmptyContent: boolean;\n firstFocuseableColumnHeaderId: string | undefined;\n visibleColumns: InternalColumn[];\n virtualListHelpers: ReturnType<typeof useVirtual>;\n layoutHelpers: {\n totalColumnsWidth: number | string;\n gridLayout: string[];\n };\n paginationHelpers: Pagination;\n drilldownRowId: string | null;\n setDrilldownRowId: React.Dispatch<React.SetStateAction<string | null>>;\n focusedRowId: string | null;\n setFocusedRowId: React.Dispatch<React.SetStateAction<string | null>>;\n hoveredColumnId: string | null;\n setHoveredColumnId: React.Dispatch<React.SetStateAction<string | null>>;\n reduxHeaders: Record<string, ReduxHeader>;\n patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n resetAllHeadersExcept: (exceptHeaderId: string) => void;\n closeFilterMenuIfOpen: (headerId: string) => void;\n isShiftPressed: boolean;\n setIsShiftPressed: React.Dispatch<React.SetStateAction<boolean>>;\n lastSelected: React.MutableRefObject<number>;\n isHeaderCellDragging: boolean;\n setIsHeaderCellDragging: React.Dispatch<React.SetStateAction<boolean>>;\n }\n\n export interface DefaultProps {\n height: string;\n width: string;\n renderRowActions: false | RenderRowActionsConfig;\n getRowVariant: (\n row: InternalRow,\n defaultCellRenderer: React.ComponentType<{\n row: DSDataTableT.InternalRow;\n isRowSelected: boolean;\n isDragOverlay: boolean;\n }>,\n ) => RowVariant | React.ComponentType<RowVariantProps>;\n withFilterBar: boolean;\n isExpandable: boolean;\n expandedRows: Record<string, boolean>;\n disabledRows: Record<string, boolean>;\n isResizeable: boolean;\n isLoading: boolean;\n pagination: false | Pagination;\n filters: Filter[];\n colsLayoutStyle: ColsLayoutStyleValues;\n hiddenColumns: string[];\n noResultsMessage: string;\n dragAndDropRows: boolean;\n maxDragAndDropLevel: number;\n onRowsReorder: (\n newData: Row[],\n indexes: { targetIndex: number; fromIndex: number },\n considerExpanding: string | null,\n extraData: { flattenedData: InternalRow[]; allDataFlattened: InternalRow[] },\n ) => void;\n dragAndDropColumns: boolean;\n onColumnsReorder: (newData: Column[], indexes: { targetIndex: number; fromIndex: number }) => void;\n getIsDropValid: (\n active: DnDKitTree.Item<Row>,\n over: DnDKitTree.Item<Row>,\n dropIndicatorPosition: DropIndicatorPositionValues,\n ) => boolean;\n onColumnResize: (headerId: string, width: number) => void;\n onColumnSizeChange: (newColumns: Column[], headerId: string, width: number) => void;\n onRowClick: TypescriptHelpersT.GenericFunc;\n onRowFocus: TypescriptHelpersT.GenericFunc;\n noSelectionColumn: boolean;\n selectSingle: boolean;\n onSelectionChange: (\n newSelection: Selection,\n selectedControl: string,\n event: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent,\n ) => void;\n textWrap: 'wrap' | 'wrap-all' | 'truncate';\n onCellValueChange: (cellChange: { value: unknown; property: unknown; rowIndex: number }) => void;\n onFiltersChange: TypescriptHelpersT.GenericFunc;\n onPageChanged: TypescriptHelpersT.GenericFunc;\n onRowExpand: (expandedRows: Record<string, boolean>, toggledRow: string) => void;\n onColumnSortChange: (newSortRequest: { column: unknown; direction: unknown }) => void;\n onColumnSort: (newColumns: Column[], headerId: string, direction: 'ASC' | 'DESC') => void;\n isSkeleton: boolean;\n domIdAffix?: string;\n }\n export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSDataTableName,\n typeof DSDataTableSlots\n > {\n uniqueRowAccessor?: UniqueRowAccessorType;\n cellRendererProps?: Record<string, unknown>;\n selection?: Selection;\n groupedRowsRenderHeader?:\n ((dimsumHeaderValue: string | undefined, subRows: Row[] | undefined) => JSX.Element) | string;\n filterBarProps?: {\n filterBarAddonRenderer?: React.ComponentType<{ innerRef: React.MutableRefObject<HTMLButtonElement | null> }>;\n customPillRenderer?: React.ComponentType<FilterPillProps<unknown>>;\n onClearAllFiltersClick?: () => void;\n onDropdownMenuToggle?: (isOpen: boolean, eventType: string) => void;\n onDropdownMenuClickOutside?: () => void;\n onDropdownMenuTriggerClick?: () => void;\n isDropdownMenuOpen?: boolean;\n extraOptions?: { type: string; id: string; label: string; onClick?: TypescriptHelpersT.GenericFunc }[];\n };\n actionRef?: React.MutableRefObject<{\n scrollToIndex: ReturnType<typeof useVirtual>['scrollToIndex'];\n scrollToOffset: ReturnType<typeof useVirtual>['scrollToOffset'];\n }>;\n noResultsSecondaryMessage?: string;\n noResultsButtonLabel?: string;\n noResultsPlaceholder?: React.ReactElement;\n onNoResultsButtonClick?: TypescriptHelpersT.GenericFunc;\n onTableResize?: TypescriptHelpersT.GenericFunc;\n Pagination?: React.ComponentType<Record<string, never>>;\n getAriaLabelForRow?: (args: {\n row: InternalRow;\n selected: boolean;\n disabled: boolean;\n expandable: boolean;\n expanded: boolean;\n }) => string;\n checkboxSelectAllProps?: DSControlledCheckboxT.Props;\n }\n export interface RequiredProps {\n columns: Column[];\n data: Row[];\n }\n\n export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps>;\n\n export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps>;\n\n export type GetOwnerPropsT = () => ZustandT.PropsStore<\n DefaultProps & RequiredProps & OptionalProps & UseAutoCalculatedT\n >;\n}\n\n// default props is a function to ensure that the uid is unique for each instance of the component\n// this is supported by the useMemoMergePropsWithDefault function.\nexport const defaultProps: () => DSDataTableT.DefaultProps = () => ({\n height: '100%',\n width: '100%',\n renderRowActions: false,\n getRowVariant: () => 'ds-primary-row',\n isExpandable: false,\n expandedRows: {},\n disabledRows: {},\n isResizeable: false,\n isLoading: false,\n pagination: false,\n withFilterBar: false,\n filters: [],\n getIsDropValid: () => true,\n onColumnResize: () => null,\n onColumnSortChange: () => null,\n colsLayoutStyle: ColsLayoutStyle.Fixed,\n hiddenColumns: [],\n noResultsMessage: 'No Results Found',\n dragAndDropRows: false,\n maxDragAndDropLevel: 1,\n onRowsReorder: () => null,\n dragAndDropColumns: false,\n onColumnsReorder: () => null,\n onColumnSizeChange: () => null,\n onRowClick: () => null,\n onRowFocus: () => null,\n noSelectionColumn: false,\n selectSingle: false,\n onSelectionChange: () => null,\n textWrap: 'wrap',\n onCellValueChange: () => null,\n onFiltersChange: () => null,\n onPageChanged: () => null,\n onRowExpand: () => null,\n onColumnSort: () => null,\n isSkeleton: false,\n domIdAffix: uid(8),\n});\n\nexport const DSDataTablePropTypes: DSPropTypesSchema<DSDataTableT.Props> = {\n ...getPropsPerSlotPropTypes(DSDataTableName, DSDataTableSlots),\n columns: PropTypes.arrayOf(\n PropTypes.shape({\n Header: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]).description(\n 'Header name or component',\n ).isRequired,\n accessor: PropTypes.string.description('The entry of the data that this column will display'),\n id: PropTypes.string.description('The id of the column, will default to the Header or accessor if not present'),\n filter: PropTypes.oneOf(Object.values(FILTER_TYPES)).description('out-of-the-box filters'),\n Filter: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description(\n 'The custom component to render as a filter',\n ),\n Cell: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('The custom cell renderer component'),\n editable: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]).description(\n 'The editable out-of-the-box or component to render',\n ),\n disableDnD: PropTypes.bool.description('Whereas this column should be draggable'),\n canResize: PropTypes.bool.description('Whereas this column should be resizable'),\n width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of this column'),\n minWidth: PropTypes.number.description(\n 'Minimum width this column can be resized down to. Defaults to 30px, which is NOT guaranteed to fit the header title and icon affordances (drag handle / filter / sort) enabled on this column. When isResizeable is used, pass an explicit minWidth sized to the actual header content \u2014 otherwise the resize handle can overlap the header title.',\n ),\n maxWidth: PropTypes.number.description(\n 'Maximum width this column can be resized up to, useful when resizing. Defaults to 600px.',\n ),\n canSort: PropTypes.bool.description('Whereas this column is sortable'),\n disableFirstOptionFocusOnFilter: PropTypes.bool.description(\n 'Whereas the first option should not be focused on filter',\n ),\n filterMinWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n 'Minimum width of the filter',\n ),\n filterOptions: PropTypes.arrayOf(\n PropTypes.shape({\n dsId: PropTypes.string,\n value: PropTypes.string,\n label: PropTypes.string,\n }),\n ).description('Filter options'),\n isSortedDesc: PropTypes.bool.description('Whereas this column is sorted descendingly'),\n required: PropTypes.bool.description('Whereas this column is required'),\n alwaysDisplayEditIcon: PropTypes.bool.description(\n 'Whereas to always show the edit icon on this column if it is editable',\n ),\n textWrap: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']).description('How to wrap the text in the column'),\n pillLabel: PropTypes.string.description(\n 'Overrides the filter pill label text for this column when non-empty; defaults to the column Header',\n ),\n }),\n ).description('Array of columns').isRequired,\n data: PropTypes.arrayOf(\n PropTypes.shape({\n tableRowDetails: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description('Component for row details'),\n dimsumHeaderValue: PropTypes.string.description('Header displayed on the header variant of the row'),\n }),\n ).description('Array of rows'),\n height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Height of the datatable component'),\n width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of the datatable component'),\n renderRowActions: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]).description(\n 'The renderer to use for the action toolbar',\n ),\n isExpandable: PropTypes.bool.description('Whether the datatable is expandable').defaultValue(false),\n uniqueRowAccessor: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.arrayOf(PropTypes.string),\n PropTypes.func,\n ]).description(\n 'Column / Combination of columns / Function to call to produce a unique identifier for each row.' +\n ' This is necessary for the selectable and drag and drop features',\n ),\n disabledRows: PropTypes.object.description(\n 'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is disabled or not',\n ),\n expandedRows: PropTypes.object.description(\n 'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is expanded or not',\n ),\n onRowExpand: PropTypes.func.description('Function invoked when a row is (un)expanded'),\n cellRendererProps: PropTypes.object.description(\n 'Object with all the props you want the cells to have available when rendering',\n ),\n selectSingle: PropTypes.bool.description('Whether the selectable feature is single').defaultValue(false),\n selection: PropTypes.object.description(\n 'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is selected or not',\n ),\n onSelectionChange: PropTypes.func.description('Function invoked when a row is selected'),\n groupedRowsRenderHeader: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).description(\n 'String | Function to call which will display in the row headers',\n ),\n isResizeable: PropTypes.bool.description(\"Whether the datatable's columns are resizeable\"),\n filters: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n type: PropTypes.string,\n value: PropTypes.any,\n }),\n ).description('Array of filter keys and values'),\n withFilterBar: PropTypes.bool.description('Whether to display the filter bar'),\n filterBarProps: PropTypes.shape({\n filterBarAddonRenderer: PropTypes.func.description('Render filterbar right addon component'),\n customPillRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description(\n 'If you specify custom filters, you will need to render their pills here',\n ),\n isDropdownMenuOpen: PropTypes.bool.description('Wether the DropdownMenu is Open or not.'),\n onDropdownMenuToggle: PropTypes.func.description('Callback to toggle the DropdownMenu.'),\n onClearAllFiltersClick: PropTypes.func.description('Callback for Clear Al Filters option.'),\n onDropdownMenuClickOutside: PropTypes.func.description('Callback triggered when clicking outside DropdownMenu.'),\n onDropdownMenuTriggerClick: PropTypes.func.description('Callback triggered when clicking DropdownMenu ellipsis.'),\n extraOptions: PropTypes.arrayOf(\n PropTypes.shape({\n type: PropTypes.string,\n id: PropTypes.string,\n label: PropTypes.string,\n onClick: PropTypes.func,\n }),\n ).description('Any extra option you want in the dropdownmenu of the filter bar'),\n }).description('Props for the filter bar'),\n onFiltersChange: PropTypes.func.description('Function invoked when filters change'),\n pagination: PropTypes.oneOfType([\n PropTypes.oneOf([false]),\n PropTypes.shape({\n pageCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('How many pages are there'),\n isLoadingPageCount: PropTypes.bool.description('Whether the page count is loading'),\n pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),\n canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),\n canNextPage: PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),\n pageSize: PropTypes.number.description('The current page size').defaultValue(10),\n showPerPageSelector: PropTypes.bool.description('Whether to show the page selector').defaultValue(true),\n perPageOptions: PropTypes.arrayOf(\n PropTypes.oneOfType([\n PropTypes.number,\n PropTypes.shape({\n dsId: PropTypes.string,\n value: PropTypes.number,\n label: PropTypes.string,\n type: PropTypes.oneOf(['single']),\n }),\n ]),\n )\n .description('The available options for page size')\n .defaultValue([10]),\n perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),\n minPerPage: PropTypes.number.description('Step for the per page options').defaultValue(0),\n maxPerPage: PropTypes.number.description('Step for the per page options').defaultValue(100),\n onPageSizeChange: PropTypes.func\n .description('Function invoked when the page size changes')\n .defaultValue(() => null),\n onPreviousPage: PropTypes.func\n .description('Function invoked when the previous button is pressed')\n .defaultValue(() => null),\n onPageChange: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n onNextPage: PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),\n pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),\n dataIsPage: PropTypes.bool.description('Whether to treat data as a page').defaultValue(false),\n pageDetailsTitle: PropTypes.string\n .description('The title of the details (usually a column of your dataset)')\n .defaultValue(''),\n }),\n ]).description('Object containing the data for the pagination'),\n Pagination: PropTypes.func.description('Custom component to show in place of the pagination'),\n colsLayoutStyle: PropTypes.oneOf(['auto', 'fixed']).description('Whether the datatable fills its container or not'),\n hiddenColumns: PropTypes.arrayOf(PropTypes.string).description('IDs of columns not to render'),\n dragAndDropRows: PropTypes.bool.description('Whether to turn on the d&d feature for the rows').defaultValue(false),\n onRowsReorder: PropTypes.func.description('Function invoked when a row is reordered'),\n maxDragAndDropLevel: PropTypes.number.description('Which level is the maximum allowed to drop into'),\n dragAndDropColumns: PropTypes.bool.description('Whether to turn on the d&d feature for the columns'),\n onColumnsReorder: PropTypes.func.description('Function invoked when a column is reordered'),\n getIsDropValid: PropTypes.func.description('Function to determine if a drop is valid'),\n textWrap: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']).description('Global wrapping rule'),\n noResultsMessage: PropTypes.string.description('Message to show when no more data is available'),\n noResultsSecondaryMessage: PropTypes.string.description('Secondary message to show when no more data is available'),\n noResultsButtonLabel: PropTypes.string.description('Label of the button when no more data is available'),\n noResultsPlaceholder: PropTypes.oneOfType([PropTypes.node]).description(\n 'Custom content to show when dataset is empty',\n ),\n isLoading: PropTypes.bool.description('Whether to show a global loader in the datatable'),\n onColumnResize: PropTypes.func\n .description('Function invoked when a column is resized')\n .deprecated({ version: '4.x', message: 'Use onColumnSizeChange' }),\n onColumnSizeChange: PropTypes.func.description('Function invoked when a column is resized'),\n onRowClick: PropTypes.func.description('Function invoked when clicking a row'),\n onRowFocus: PropTypes.func.description('Function invoked when focusing a row'),\n onCellValueChange: PropTypes.func.description(\"Function invoked when an editable cell's content is changed\"),\n onColumnSortChange: PropTypes.func\n .description('Function invoked when a column is sorted')\n .deprecated({ version: '4.x', message: 'Use onColumnSort' }),\n onColumnSort: PropTypes.func.description('Function invoked when a column is sorted'),\n onTableResize: PropTypes.func.description(\n 'Function invoked when the size of the internal table changes, e.g. when a the browser window is resized',\n ),\n actionRef: PropTypes.object.description('Reference where all the exposed action callbacks will be exposed'),\n getRowVariant: PropTypes.func\n .description(\"Function invoked to determine a row's variant\")\n .defaultValue(`() => 'ds-primary-row'`),\n noSelectionColumn: PropTypes.bool.description('Whether to show the selection column or not').defaultValue(false),\n onPageChanged: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n onNoResultsButtonClick: PropTypes.func\n .description('Function invoked when the no results button is clicked')\n .defaultValue(() => null),\n isSkeleton: PropTypes.bool.description('Whether to show a skeleton loader in the datatable'),\n getAriaLabelForRow: PropTypes.func.description('Function invoked to determine a row aria-label'),\n domIdAffix: PropTypes.string\n .description('Affix to avoid duplicate ids')\n .defaultValue('8 randomly generated characters'),\n checkboxSelectAllProps: PropTypes.object.description('Props for the select all checkbox'),\n};\n\nexport const DSDataTablePropTypesSchema = DSDataTablePropTypes as unknown as ValidationMap<DSDataTableT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,iBAAoB;AAQpB,8BAKO;AACP,8BAA6B;AAC7B,uBAA4D;AAC5D,IAAAA,oBAAkD;AAod3C,MAAM,eAAgD,OAAO;AAAA,EAClE,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,kBAAkB;AAAA,EAClB,eAAe,MAAM;AAAA,EACrB,cAAc;AAAA,EACd,cAAc,CAAC;AAAA,EACf,cAAc,CAAC;AAAA,EACf,cAAc;AAAA,EACd,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,SAAS,CAAC;AAAA,EACV,gBAAgB,MAAM;AAAA,EACtB,gBAAgB,MAAM;AAAA,EACtB,oBAAoB,MAAM;AAAA,EAC1B,iBAAiB,iCAAgB;AAAA,EACjC,eAAe,CAAC;AAAA,EAChB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,eAAe,MAAM;AAAA,EACrB,oBAAoB;AAAA,EACpB,kBAAkB,MAAM;AAAA,EACxB,oBAAoB,MAAM;AAAA,EAC1B,YAAY,MAAM;AAAA,EAClB,YAAY,MAAM;AAAA,EAClB,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,mBAAmB,MAAM;AAAA,EACzB,UAAU;AAAA,EACV,mBAAmB,MAAM;AAAA,EACzB,iBAAiB,MAAM;AAAA,EACvB,eAAe,MAAM;AAAA,EACrB,aAAa,MAAM;AAAA,EACnB,cAAc,MAAM;AAAA,EACpB,YAAY;AAAA,EACZ,gBAAY,gBAAI,CAAC;AACnB;AAEO,MAAM,uBAA8D;AAAA,EACzE,OAAG,kDAAyB,mCAAiB,kCAAgB;AAAA,EAC7D,SAAS,kCAAU;AAAA,IACjB,kCAAU,MAAM;AAAA,MACd,QAAQ,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,kCAAU,IAAI,CAAC,EAAE;AAAA,QAC9E;AAAA,MACF,EAAE;AAAA,MACF,UAAU,kCAAU,OAAO,YAAY,qDAAqD;AAAA,MAC5F,IAAI,kCAAU,OAAO,YAAY,6EAA6E;AAAA,MAC9G,QAAQ,kCAAU,MAAM,OAAO,OAAO,oCAAY,CAAC,EAAE,YAAY,wBAAwB;AAAA,MACzF,QAAQ,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,IAAI,CAAC,EAAE;AAAA,QAC5D;AAAA,MACF;AAAA,MACA,MAAM,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,oCAAoC;AAAA,MAC9G,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,kCAAU,IAAI,CAAC,EAAE;AAAA,QAChF;AAAA,MACF;AAAA,MACA,YAAY,kCAAU,KAAK,YAAY,yCAAyC;AAAA,MAChF,WAAW,kCAAU,KAAK,YAAY,yCAAyC;AAAA,MAC/E,OAAO,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAAE,YAAY,sBAAsB;AAAA,MACnG,UAAU,kCAAU,OAAO;AAAA,QACzB;AAAA,MACF;AAAA,MACA,UAAU,kCAAU,OAAO;AAAA,QACzB;AAAA,MACF;AAAA,MACA,SAAS,kCAAU,KAAK,YAAY,iCAAiC;AAAA,MACrE,iCAAiC,kCAAU,KAAK;AAAA,QAC9C;AAAA,MACF;AAAA,MACA,gBAAgB,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAAE;AAAA,QACxE;AAAA,MACF;AAAA,MACA,eAAe,kCAAU;AAAA,QACvB,kCAAU,MAAM;AAAA,UACd,MAAM,kCAAU;AAAA,UAChB,OAAO,kCAAU;AAAA,UACjB,OAAO,kCAAU;AAAA,QACnB,CAAC;AAAA,MACH,EAAE,YAAY,gBAAgB;AAAA,MAC9B,cAAc,kCAAU,KAAK,YAAY,4CAA4C;AAAA,MACrF,UAAU,kCAAU,KAAK,YAAY,iCAAiC;AAAA,MACtE,uBAAuB,kCAAU,KAAK;AAAA,QACpC;AAAA,MACF;AAAA,MACA,UAAU,kCAAU,MAAM,CAAC,QAAQ,YAAY,UAAU,CAAC,EAAE,YAAY,oCAAoC;AAAA,MAC5G,WAAW,kCAAU,OAAO;AAAA,QAC1B;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH,EAAE,YAAY,kBAAkB,EAAE;AAAA,EAClC,MAAM,kCAAU;AAAA,IACd,kCAAU,MAAM;AAAA,MACd,iBAAiB,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,IAAI,CAAC,EAAE,YAAY,2BAA2B;AAAA,MAC9G,mBAAmB,kCAAU,OAAO,YAAY,mDAAmD;AAAA,IACrG,CAAC;AAAA,EACH,EAAE,YAAY,eAAe;AAAA,EAC7B,QAAQ,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAAE,YAAY,mCAAmC;AAAA,EACjH,OAAO,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAAE,YAAY,kCAAkC;AAAA,EAC/G,kBAAkB,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE;AAAA,IACxE;AAAA,EACF;AAAA,EACA,cAAc,kCAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,KAAK;AAAA,EAClG,mBAAmB,kCAAU,UAAU;AAAA,IACrC,kCAAU;AAAA,IACV,kCAAU,QAAQ,kCAAU,MAAM;AAAA,IAClC,kCAAU;AAAA,EACZ,CAAC,EAAE;AAAA,IACD;AAAA,EAEF;AAAA,EACA,cAAc,kCAAU,OAAO;AAAA,IAC7B;AAAA,EACF;AAAA,EACA,cAAc,kCAAU,OAAO;AAAA,IAC7B;AAAA,EACF;AAAA,EACA,aAAa,kCAAU,KAAK,YAAY,6CAA6C;AAAA,EACrF,mBAAmB,kCAAU,OAAO;AAAA,IAClC;AAAA,EACF;AAAA,EACA,cAAc,kCAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EACvG,WAAW,kCAAU,OAAO;AAAA,IAC1B;AAAA,EACF;AAAA,EACA,mBAAmB,kCAAU,KAAK,YAAY,yCAAyC;AAAA,EACvF,yBAAyB,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE;AAAA,IAC/E;AAAA,EACF;AAAA,EACA,cAAc,kCAAU,KAAK,YAAY,gDAAgD;AAAA,EACzF,SAAS,kCAAU;AAAA,IACjB,kCAAU,MAAM;AAAA,MACd,IAAI,kCAAU;AAAA,MACd,MAAM,kCAAU;AAAA,MAChB,OAAO,kCAAU;AAAA,IACnB,CAAC;AAAA,EACH,EAAE,YAAY,iCAAiC;AAAA,EAC/C,eAAe,kCAAU,KAAK,YAAY,mCAAmC;AAAA,EAC7E,gBAAgB,kCAAU,MAAM;AAAA,IAC9B,wBAAwB,kCAAU,KAAK,YAAY,wCAAwC;AAAA,IAC3F,oBAAoB,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,IAAI,CAAC,EAAE;AAAA,MACxE;AAAA,IACF;AAAA,IACA,oBAAoB,kCAAU,KAAK,YAAY,yCAAyC;AAAA,IACxF,sBAAsB,kCAAU,KAAK,YAAY,sCAAsC;AAAA,IACvF,wBAAwB,kCAAU,KAAK,YAAY,uCAAuC;AAAA,IAC1F,4BAA4B,kCAAU,KAAK,YAAY,wDAAwD;AAAA,IAC/G,4BAA4B,kCAAU,KAAK,YAAY,yDAAyD;AAAA,IAChH,cAAc,kCAAU;AAAA,MACtB,kCAAU,MAAM;AAAA,QACd,MAAM,kCAAU;AAAA,QAChB,IAAI,kCAAU;AAAA,QACd,OAAO,kCAAU;AAAA,QACjB,SAAS,kCAAU;AAAA,MACrB,CAAC;AAAA,IACH,EAAE,YAAY,iEAAiE;AAAA,EACjF,CAAC,EAAE,YAAY,0BAA0B;AAAA,EACzC,iBAAiB,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EAClF,YAAY,kCAAU,UAAU;AAAA,IAC9B,kCAAU,MAAM,CAAC,KAAK,CAAC;AAAA,IACvB,kCAAU,MAAM;AAAA,MACd,WAAW,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAAE,YAAY,0BAA0B;AAAA,MAC3G,oBAAoB,kCAAU,KAAK,YAAY,mCAAmC;AAAA,MAClF,WAAW,kCAAU,OAAO,YAAY,4CAA4C,EAAE,aAAa,CAAC;AAAA,MACpG,iBAAiB,kCAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,IAAI;AAAA,MAC/G,aAAa,kCAAU,KAAK,YAAY,4CAA4C,EAAE,aAAa,IAAI;AAAA,MACvG,UAAU,kCAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,MAC/E,qBAAqB,kCAAU,KAAK,YAAY,mCAAmC,EAAE,aAAa,IAAI;AAAA,MACtG,gBAAgB,kCAAU;AAAA,QACxB,kCAAU,UAAU;AAAA,UAClB,kCAAU;AAAA,UACV,kCAAU,MAAM;AAAA,YACd,MAAM,kCAAU;AAAA,YAChB,OAAO,kCAAU;AAAA,YACjB,OAAO,kCAAU;AAAA,YACjB,MAAM,kCAAU,MAAM,CAAC,QAAQ,CAAC;AAAA,UAClC,CAAC;AAAA,QACH,CAAC;AAAA,MACH,EACG,YAAY,qCAAqC,EACjD,aAAa,CAAC,EAAE,CAAC;AAAA,MACpB,aAAa,kCAAU,OAAO,YAAY,+BAA+B,EAAE,aAAa,CAAC;AAAA,MACzF,YAAY,kCAAU,OAAO,YAAY,+BAA+B,EAAE,aAAa,CAAC;AAAA,MACxF,YAAY,kCAAU,OAAO,YAAY,+BAA+B,EAAE,aAAa,GAAG;AAAA,MAC1F,kBAAkB,kCAAU,KACzB,YAAY,6CAA6C,EACzD,aAAa,MAAM,IAAI;AAAA,MAC1B,gBAAgB,kCAAU,KACvB,YAAY,sDAAsD,EAClE,aAAa,MAAM,IAAI;AAAA,MAC1B,cAAc,kCAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,MAAM,IAAI;AAAA,MAC1G,YAAY,kCAAU,KAAK,YAAY,8CAA8C,EAAE,aAAa,MAAM,IAAI;AAAA,MAC9G,aAAa,kCAAU,QAAQ,kCAAU,MAAM,EAAE,YAAY,kCAAkC,EAAE,aAAa,CAAC,CAAC;AAAA,MAChH,YAAY,kCAAU,KAAK,YAAY,iCAAiC,EAAE,aAAa,KAAK;AAAA,MAC5F,kBAAkB,kCAAU,OACzB,YAAY,6DAA6D,EACzE,aAAa,EAAE;AAAA,IACpB,CAAC;AAAA,EACH,CAAC,EAAE,YAAY,+CAA+C;AAAA,EAC9D,YAAY,kCAAU,KAAK,YAAY,qDAAqD;AAAA,EAC5F,iBAAiB,kCAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAClH,eAAe,kCAAU,QAAQ,kCAAU,MAAM,EAAE,YAAY,8BAA8B;AAAA,EAC7F,iBAAiB,kCAAU,KAAK,YAAY,iDAAiD,EAAE,aAAa,KAAK;AAAA,EACjH,eAAe,kCAAU,KAAK,YAAY,0CAA0C;AAAA,EACpF,qBAAqB,kCAAU,OAAO,YAAY,iDAAiD;AAAA,EACnG,oBAAoB,kCAAU,KAAK,YAAY,oDAAoD;AAAA,EACnG,kBAAkB,kCAAU,KAAK,YAAY,6CAA6C;AAAA,EAC1F,gBAAgB,kCAAU,KAAK,YAAY,0CAA0C;AAAA,EACrF,UAAU,kCAAU,MAAM,CAAC,QAAQ,YAAY,UAAU,CAAC,EAAE,YAAY,sBAAsB;AAAA,EAC9F,kBAAkB,kCAAU,OAAO,YAAY,gDAAgD;AAAA,EAC/F,2BAA2B,kCAAU,OAAO,YAAY,0DAA0D;AAAA,EAClH,sBAAsB,kCAAU,OAAO,YAAY,oDAAoD;AAAA,EACvG,sBAAsB,kCAAU,UAAU,CAAC,kCAAU,IAAI,CAAC,EAAE;AAAA,IAC1D;AAAA,EACF;AAAA,EACA,WAAW,kCAAU,KAAK,YAAY,kDAAkD;AAAA,EACxF,gBAAgB,kCAAU,KACvB,YAAY,2CAA2C,EACvD,WAAW,EAAE,SAAS,OAAO,SAAS,yBAAyB,CAAC;AAAA,EACnE,oBAAoB,kCAAU,KAAK,YAAY,2CAA2C;AAAA,EAC1F,YAAY,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EAC7E,YAAY,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EAC7E,mBAAmB,kCAAU,KAAK,YAAY,6DAA6D;AAAA,EAC3G,oBAAoB,kCAAU,KAC3B,YAAY,0CAA0C,EACtD,WAAW,EAAE,SAAS,OAAO,SAAS,mBAAmB,CAAC;AAAA,EAC7D,cAAc,kCAAU,KAAK,YAAY,0CAA0C;AAAA,EACnF,eAAe,kCAAU,KAAK;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,WAAW,kCAAU,OAAO,YAAY,kEAAkE;AAAA,EAC1G,eAAe,kCAAU,KACtB,YAAY,+CAA+C,EAC3D,aAAa,wBAAwB;AAAA,EACxC,mBAAmB,kCAAU,KAAK,YAAY,6CAA6C,EAAE,aAAa,KAAK;AAAA,EAC/G,eAAe,kCAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,MAAM,IAAI;AAAA,EAC3G,wBAAwB,kCAAU,KAC/B,YAAY,wDAAwD,EACpE,aAAa,MAAM,IAAI;AAAA,EAC1B,YAAY,kCAAU,KAAK,YAAY,oDAAoD;AAAA,EAC3F,oBAAoB,kCAAU,KAAK,YAAY,gDAAgD;AAAA,EAC/F,YAAY,kCAAU,OACnB,YAAY,8BAA8B,EAC1C,aAAa,iCAAiC;AAAA,EACjD,wBAAwB,kCAAU,OAAO,YAAY,mCAAmC;AAC1F;AAEO,MAAM,6BAA6B;",
|
|
6
6
|
"names": ["import_constants"]
|
|
7
7
|
}
|
package/dist/cjs/styled.js
CHANGED
|
@@ -57,9 +57,9 @@ var import_ds_form_input_text = require("@elliemae/ds-form-input-text");
|
|
|
57
57
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
58
58
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
59
59
|
var import_ds_system = require("@elliemae/ds-system");
|
|
60
|
-
var import_constants = require("./constants
|
|
61
|
-
var import_constants2 = require("./configs/constants.js");
|
|
60
|
+
var import_constants = require("./configs/constants.js");
|
|
62
61
|
var import_zIndexInternalConfig = require("./configs/zIndexInternalConfig.js");
|
|
62
|
+
var import_constants2 = require("./constants/index.js");
|
|
63
63
|
var import_helpers = require("./helpers/index.js");
|
|
64
64
|
const styledFocusCss = ({ theme }, color) => `
|
|
65
65
|
&:after {
|
|
@@ -83,22 +83,22 @@ const StyledFocusWithin = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
|
83
83
|
}
|
|
84
84
|
`;
|
|
85
85
|
const StyledDataTableWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
86
|
-
name:
|
|
87
|
-
slot:
|
|
86
|
+
name: import_constants2.DSDataTableName,
|
|
87
|
+
slot: import_constants2.DSDataTableSlots.ROOT
|
|
88
88
|
})`
|
|
89
89
|
width: ${(props) => (0, import_helpers.sizeToCss)(props.width ?? " 100%")};
|
|
90
90
|
height: ${(props) => (0, import_helpers.sizeToCss)(props.height ?? " 100%")};
|
|
91
91
|
`;
|
|
92
92
|
const StyledDataTableContentWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
93
|
-
name:
|
|
94
|
-
slot:
|
|
93
|
+
name: import_constants2.DSDataTableName,
|
|
94
|
+
slot: import_constants2.DSDataTableSlots.CONTENT_WRAPPER
|
|
95
95
|
})`
|
|
96
96
|
user-select: ${({ noSelectionAllowed }) => noSelectionAllowed ? "none" : "auto"};
|
|
97
97
|
width: 100%;
|
|
98
98
|
`;
|
|
99
99
|
const StyledTableWrapper = (0, import_ds_system.styled)("div", {
|
|
100
|
-
name:
|
|
101
|
-
slot:
|
|
100
|
+
name: import_constants2.DSDataTableName,
|
|
101
|
+
slot: import_constants2.DSDataTableSlots.TABLE_WRAPPER
|
|
102
102
|
})`
|
|
103
103
|
display: inline-block;
|
|
104
104
|
border-spacing: 0;
|
|
@@ -108,14 +108,14 @@ const StyledTableWrapper = (0, import_ds_system.styled)("div", {
|
|
|
108
108
|
height: 100%;
|
|
109
109
|
`;
|
|
110
110
|
const StyledPaginationWrapper = (0, import_ds_system.styled)("div", {
|
|
111
|
-
name:
|
|
112
|
-
slot:
|
|
111
|
+
name: import_constants2.DSDataTableName,
|
|
112
|
+
slot: import_constants2.DSDataTableSlots.PAGINATION_WRAPPER
|
|
113
113
|
})`
|
|
114
114
|
width: 100%;
|
|
115
115
|
`;
|
|
116
116
|
const StyledTableContentWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
117
|
-
name:
|
|
118
|
-
slot:
|
|
117
|
+
name: import_constants2.DSDataTableName,
|
|
118
|
+
slot: import_constants2.DSDataTableSlots.TABLE_CONTENT_WRAPPER
|
|
119
119
|
})`
|
|
120
120
|
position: relative;
|
|
121
121
|
${({ height = "auto" }) => `
|
|
@@ -124,17 +124,24 @@ const StyledTableContentWrapper = (0, import_ds_system.styled)(import_ds_grid.Gr
|
|
|
124
124
|
width: var(--total-width);
|
|
125
125
|
`;
|
|
126
126
|
const StyledVirtualListWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
127
|
-
name:
|
|
128
|
-
slot:
|
|
127
|
+
name: import_constants2.DSDataTableName,
|
|
128
|
+
slot: import_constants2.DSDataTableSlots.VIRTUAL_LIST_WRAPPER
|
|
129
129
|
})`
|
|
130
130
|
overflow: auto;
|
|
131
131
|
height: 100%;
|
|
132
|
+
/**
|
|
133
|
+
* PUI-18626: reserve the sticky header's height as scroll-padding so the browser-native
|
|
134
|
+
* focus scroll (fired when keyboard navigation focuses a row) lands the focused row below
|
|
135
|
+
* the sticky header instead of behind it. Honored by scrollIntoView / native focus scroll;
|
|
136
|
+
* orthogonal to react-virtual's paddingStart, which only affects scrollToIndex offsets.
|
|
137
|
+
*/
|
|
138
|
+
scroll-padding-top: ${(props) => props.headerHeightPx}px;
|
|
132
139
|
--grid-layout: ${(props) => props.gridLayout.map((col) => `minmax(0, ${col})`).join(" ")};
|
|
133
140
|
--total-width: ${(props) => (0, import_helpers.sizeToCss)(props.totalColumnsWidth)};
|
|
134
141
|
`;
|
|
135
142
|
const StyledHeadWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
136
|
-
name:
|
|
137
|
-
slot:
|
|
143
|
+
name: import_constants2.DSDataTableName,
|
|
144
|
+
slot: import_constants2.DSDataTableSlots.HEAD_WRAPPER
|
|
138
145
|
})`
|
|
139
146
|
position: sticky;
|
|
140
147
|
top: 0;
|
|
@@ -143,17 +150,17 @@ const StyledHeadWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
|
143
150
|
width: 100%;
|
|
144
151
|
`;
|
|
145
152
|
const StyledHeadTr = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
146
|
-
name:
|
|
147
|
-
slot:
|
|
153
|
+
name: import_constants2.DSDataTableName,
|
|
154
|
+
slot: import_constants2.DSDataTableSlots.HEAD_TR
|
|
148
155
|
})`
|
|
149
|
-
${(props) => props.colsLayoutStyle ===
|
|
156
|
+
${(props) => props.colsLayoutStyle === import_constants.ColsLayoutStyle.Auto ? "width:100%" : ""};
|
|
150
157
|
grid-template-columns: var(--grid-layout);
|
|
151
158
|
border-bottom: 1px solid ${(props) => props.theme.colors.neutral["080"]};
|
|
152
159
|
grid-auto-flow: column;
|
|
153
160
|
`;
|
|
154
161
|
const StyledHeadTh = (0, import_ds_system.styled)("div", {
|
|
155
|
-
name:
|
|
156
|
-
slot:
|
|
162
|
+
name: import_constants2.DSDataTableName,
|
|
163
|
+
slot: import_constants2.DSDataTableSlots.HEAD_TH
|
|
157
164
|
})`
|
|
158
165
|
min-height: 24px;
|
|
159
166
|
line-height: normal;
|
|
@@ -202,20 +209,21 @@ const StyledHeadTh = (0, import_ds_system.styled)("div", {
|
|
|
202
209
|
}
|
|
203
210
|
`;
|
|
204
211
|
const StyledHeaderRightIconsWrapper = (0, import_ds_system.styled)("div", {
|
|
205
|
-
name:
|
|
206
|
-
slot:
|
|
212
|
+
name: import_constants2.DSDataTableName,
|
|
213
|
+
slot: import_constants2.DSDataTableSlots.HEAD_RIGHT_ICONS_WRAPPER
|
|
207
214
|
})`
|
|
208
|
-
height: 100%;
|
|
209
215
|
display: flex;
|
|
210
216
|
align-items: center;
|
|
211
|
-
|
|
217
|
+
align-self: flex-start;
|
|
218
|
+
padding-top: 2px;
|
|
212
219
|
`;
|
|
213
220
|
const StyledResizer = (0, import_ds_system.styled)(import_ds_form_input_text.DSInputText, {
|
|
214
|
-
name:
|
|
215
|
-
slot:
|
|
221
|
+
name: import_constants2.DSDataTableName,
|
|
222
|
+
slot: import_constants2.DSDataTableSlots.RESIZER
|
|
216
223
|
})`
|
|
217
224
|
width: 4px;
|
|
218
225
|
height: 100%;
|
|
226
|
+
|
|
219
227
|
position: absolute;
|
|
220
228
|
right: 0;
|
|
221
229
|
top: 0;
|
|
@@ -227,6 +235,7 @@ const StyledResizer = (0, import_ds_system.styled)(import_ds_form_input_text.DSI
|
|
|
227
235
|
border: none;
|
|
228
236
|
outline: none;
|
|
229
237
|
|
|
238
|
+
|
|
230
239
|
&:hover,
|
|
231
240
|
&:focus,
|
|
232
241
|
&:focus-visible {
|
|
@@ -234,43 +243,37 @@ const StyledResizer = (0, import_ds_system.styled)(import_ds_form_input_text.DSI
|
|
|
234
243
|
outline: none;
|
|
235
244
|
}
|
|
236
245
|
|
|
237
|
-
|
|
246
|
+
input {
|
|
238
247
|
appearance: none;
|
|
239
248
|
cursor: col-resize;
|
|
240
249
|
background-image: transparent;
|
|
241
250
|
padding: 0;
|
|
242
251
|
border-radius: 0;
|
|
243
|
-
|
|
244
252
|
&:focus::-webkit-slider-runnable-track {
|
|
245
253
|
background: transparent;
|
|
246
254
|
}
|
|
247
|
-
|
|
248
255
|
&:focus-visible {
|
|
249
256
|
background: brand-700;
|
|
250
257
|
::-webkit-slider-runnable-track {
|
|
251
258
|
background: transparent;
|
|
252
259
|
}
|
|
253
260
|
}
|
|
254
|
-
|
|
255
261
|
&::-webkit-slider-runnable-track {
|
|
256
262
|
background: transparent;
|
|
257
263
|
}
|
|
258
|
-
|
|
259
264
|
&::-webkit-slider-thumb {
|
|
260
265
|
appearance: none;
|
|
261
266
|
background: transparent;
|
|
262
267
|
}
|
|
263
|
-
|
|
264
268
|
&::-moz-range-thumb {
|
|
265
269
|
appearance: none;
|
|
266
270
|
background: transparent;
|
|
267
271
|
border: none;
|
|
268
272
|
}
|
|
269
|
-
}
|
|
270
273
|
`;
|
|
271
274
|
const StyledActionCell = (0, import_ds_system.styled)("div", {
|
|
272
|
-
name:
|
|
273
|
-
slot:
|
|
275
|
+
name: import_constants2.DSDataTableName,
|
|
276
|
+
slot: import_constants2.DSDataTableSlots.ACTION_CELL
|
|
274
277
|
})`
|
|
275
278
|
position: sticky;
|
|
276
279
|
display: inline-block;
|
|
@@ -279,8 +282,8 @@ const StyledActionCell = (0, import_ds_system.styled)("div", {
|
|
|
279
282
|
background: white;
|
|
280
283
|
`;
|
|
281
284
|
const StyledCell = (0, import_ds_system.styled)("div", {
|
|
282
|
-
name:
|
|
283
|
-
slot:
|
|
285
|
+
name: import_constants2.DSDataTableName,
|
|
286
|
+
slot: import_constants2.DSDataTableSlots.CELL
|
|
284
287
|
})`
|
|
285
288
|
${import_helpers.cellPadding}
|
|
286
289
|
display: flex;
|
|
@@ -289,8 +292,8 @@ const StyledCell = (0, import_ds_system.styled)("div", {
|
|
|
289
292
|
position: relative;
|
|
290
293
|
`;
|
|
291
294
|
const StyledCellContent = (0, import_ds_system.styled)("div", {
|
|
292
|
-
name:
|
|
293
|
-
slot:
|
|
295
|
+
name: import_constants2.DSDataTableName,
|
|
296
|
+
slot: import_constants2.DSDataTableSlots.CELL_CONTENT
|
|
294
297
|
})`
|
|
295
298
|
display: grid;
|
|
296
299
|
justify-self: flex-end;
|
|
@@ -300,12 +303,12 @@ const StyledCellContent = (0, import_ds_system.styled)("div", {
|
|
|
300
303
|
align-items: center;
|
|
301
304
|
`;
|
|
302
305
|
const StyledPencilIcon = (0, import_ds_system.styled)(import_ds_icons.EditPencil, {
|
|
303
|
-
name:
|
|
304
|
-
slot:
|
|
306
|
+
name: import_constants2.DSDataTableName,
|
|
307
|
+
slot: import_constants2.DSDataTableSlots.PENCIL_ICON
|
|
305
308
|
})``;
|
|
306
309
|
const StyledEditableContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
307
|
-
name:
|
|
308
|
-
slot:
|
|
310
|
+
name: import_constants2.DSDataTableName,
|
|
311
|
+
slot: import_constants2.DSDataTableSlots.EDITABLE_CONTAINER
|
|
309
312
|
})`
|
|
310
313
|
width: 100%;
|
|
311
314
|
height: 100%;
|
|
@@ -327,8 +330,8 @@ const StyledEditableContainer = (0, import_ds_system.styled)(import_ds_grid.Grid
|
|
|
327
330
|
outline: none;
|
|
328
331
|
`;
|
|
329
332
|
const StyledFullsizeGrid = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
330
|
-
name:
|
|
331
|
-
slot:
|
|
333
|
+
name: import_constants2.DSDataTableName,
|
|
334
|
+
slot: import_constants2.DSDataTableSlots.FULLSIZE_GRID
|
|
332
335
|
})`
|
|
333
336
|
position: relative;
|
|
334
337
|
z-index: ${import_zIndexInternalConfig.ZIndexDataTable.ROW};
|
|
@@ -337,8 +340,8 @@ const StyledFullsizeGrid = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
|
337
340
|
height: ${(props) => props.height || "auto"};
|
|
338
341
|
`;
|
|
339
342
|
const GroupHeaderContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
340
|
-
name:
|
|
341
|
-
slot:
|
|
343
|
+
name: import_constants2.DSDataTableName,
|
|
344
|
+
slot: import_constants2.DSDataTableSlots.GROUP_HEADER_CONTAINER
|
|
342
345
|
})`
|
|
343
346
|
position: relative;
|
|
344
347
|
background-color: ${({ theme }) => theme.colors.brand[200]};
|
|
@@ -347,16 +350,16 @@ const GroupHeaderContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
|
347
350
|
border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};
|
|
348
351
|
`;
|
|
349
352
|
const GroupHeaderTitle = (0, import_ds_system.styled)("span", {
|
|
350
|
-
name:
|
|
351
|
-
slot:
|
|
353
|
+
name: import_constants2.DSDataTableName,
|
|
354
|
+
slot: import_constants2.DSDataTableSlots.GROUP_HEADER_TITLE
|
|
352
355
|
})`
|
|
353
356
|
font-weight: ${(props) => props.theme.fontWeights.semibold};
|
|
354
357
|
font-size: 12px;
|
|
355
358
|
color: ${(props) => props.theme.colors.neutral[700]};
|
|
356
359
|
`;
|
|
357
360
|
const StyledCellContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
358
|
-
name:
|
|
359
|
-
slot:
|
|
361
|
+
name: import_constants2.DSDataTableName,
|
|
362
|
+
slot: import_constants2.DSDataTableSlots.CELL_CONTAINER
|
|
360
363
|
})`
|
|
361
364
|
position: relative;
|
|
362
365
|
z-index: 2;
|