@elliemae/ds-data-table 3.51.0-rc.2 → 3.51.0-rc.21
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/ColumnExpand/ColumnExpand.js +5 -0
- package/dist/cjs/addons/Columns/ColumnExpand/ColumnExpand.js.map +2 -2
- package/dist/cjs/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js +13 -10
- package/dist/cjs/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js.map +2 -2
- package/dist/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js +12 -2
- package/dist/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js.map +2 -2
- package/dist/cjs/configs/useAutocalculated/index.js +2 -2
- package/dist/cjs/configs/useAutocalculated/index.js.map +3 -3
- package/dist/cjs/configs/usePaginationConfig.js.map +1 -1
- package/dist/cjs/configs/useTableColsWithAddons.js.map +2 -2
- package/dist/cjs/exported-related/RowRenderer/DefaultRowContentRenderer.js +5 -1
- package/dist/cjs/exported-related/RowRenderer/DefaultRowContentRenderer.js.map +2 -2
- package/dist/cjs/exported-related/RowRenderer/useRowRendererHandlers.js +12 -8
- package/dist/cjs/exported-related/RowRenderer/useRowRendererHandlers.js.map +2 -2
- package/dist/cjs/exported-related/Toolbar/Toolbar.js.map +2 -2
- package/dist/cjs/helpers/multipleSelectRow.js +50 -0
- package/dist/cjs/helpers/multipleSelectRow.js.map +7 -0
- package/dist/cjs/index.js +4 -4
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/parts/HoC/withConditionalDnDColumnContext.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +13 -0
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/addons/Columns/ColumnExpand/ColumnExpand.js +5 -0
- package/dist/esm/addons/Columns/ColumnExpand/ColumnExpand.js.map +2 -2
- package/dist/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js +13 -10
- package/dist/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js.map +2 -2
- package/dist/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js +12 -2
- package/dist/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js.map +2 -2
- package/dist/esm/configs/useAutocalculated/index.js +2 -2
- package/dist/esm/configs/useAutocalculated/index.js.map +3 -3
- package/dist/esm/configs/usePaginationConfig.js.map +1 -1
- package/dist/esm/configs/useTableColsWithAddons.js.map +2 -2
- package/dist/esm/exported-related/RowRenderer/DefaultRowContentRenderer.js +5 -1
- package/dist/esm/exported-related/RowRenderer/DefaultRowContentRenderer.js.map +2 -2
- package/dist/esm/exported-related/RowRenderer/useRowRendererHandlers.js +12 -8
- package/dist/esm/exported-related/RowRenderer/useRowRendererHandlers.js.map +2 -2
- package/dist/esm/exported-related/Toolbar/Toolbar.js.map +2 -2
- package/dist/esm/helpers/multipleSelectRow.js +20 -0
- package/dist/esm/helpers/multipleSelectRow.js.map +7 -0
- package/dist/esm/parts/HoC/withConditionalDnDColumnContext.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +13 -0
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/types/helpers/multipleSelectRow.d.ts +2 -0
- package/dist/types/react-desc-prop-types.d.ts +2 -0
- package/package.json +28 -28
|
@@ -175,6 +175,10 @@ const expandRowColumn = {
|
|
|
175
175
|
},
|
|
176
176
|
[onRowExpandHandler]
|
|
177
177
|
);
|
|
178
|
+
const subRowsIds = (0, import_react.useMemo)(
|
|
179
|
+
() => row.original.subRows?.reduce((acc, subRow) => `${acc} ${subRow.id}-row`, "") ?? "",
|
|
180
|
+
[row.original.subRows]
|
|
181
|
+
);
|
|
178
182
|
const isDragging = draggableProps && draggableProps.isDragging;
|
|
179
183
|
const isDragOverlay = dragAndDropRows && !draggableProps;
|
|
180
184
|
const indentStyle = (0, import_react.useMemo)(
|
|
@@ -213,6 +217,7 @@ const expandRowColumn = {
|
|
|
213
217
|
tabIndex: isRowSelected && !disabledRows[row.uid] ? 0 : -1,
|
|
214
218
|
"data-testid": "data-table-row-expand-cell",
|
|
215
219
|
"aria-expanded": isExpanded,
|
|
220
|
+
"aria-controls": isExpanded ? subRowsIds : void 0,
|
|
216
221
|
disabled: disabledRows[row.uid],
|
|
217
222
|
"aria-disabled": disabledRows[row.uid],
|
|
218
223
|
getOwnerProps,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/addons/Columns/ColumnExpand/ColumnExpand.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useMemo, useCallback, createRef } from 'react';\nimport { ArrowheadDown, ArrowheadRight, ArrowShortReturn, type SvgIconT } from '@elliemae/ds-icons';\nimport { styled, css } from '@elliemae/ds-system';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { StyledFocusWithin } from '../../../styled.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\nimport { usePropsStore } from '../../../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../DSDataTableDefinitions.js';\n\nconst disabledCaret = css`\n cursor: not-allowed;\n pointer-events: none;\n`;\nconst StyledSpan = styled('span', { name: DSDataTableName, slot: DSDataTableSlots.EXPAND_CELL_CONTAINER })<{\n disabled?: boolean;\n}>`\n cursor: pointer;\n box-sizing: border-box;\n outline: none;\n display: flex;\n justify-content: center;\n align-items: center;\n ${({ disabled }) => disabled && disabledCaret}\n z-index: 1; // to be clickable over right cell padding that covers the whole cell (hack to satisfy the design)\n`;\n\nconst ArrowDown: React.ComponentType<SvgIconT.Props> = ({ color = ['brand-primary', '600'], ...rest }) => (\n <ArrowheadDown size=\"s\" color={color} data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN} {...rest} />\n);\n\nconst ArrowMixed = () => (\n <ArrowheadRight\n size=\"s\"\n color={['brand-primary', '600']}\n data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_MIXED}\n style={{ transform: 'rotate(45deg)' }}\n />\n);\n\nconst ArrowRight: React.ComponentType<SvgIconT.Props> = ({ color = ['brand-primary', '600'], ...rest }) => (\n <ArrowheadRight size=\"s\" color={color} data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT} {...rest} />\n);\n\nexport const expandRowColumn: DSDataTableT.InternalColumn = {\n // Build our expander column\n id: 'expander', // Make sure it has an ID\n accessor: 'expandRowColumn',\n Header: () => {\n const expandedRows = usePropsStore((state) => state.expandedRows);\n const onRowExpand = usePropsStore((state) => state.onRowExpand);\n const disabledRows = usePropsStore((state) => state.disabledRows);\n const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n const firstFocuseableColumnHeaderId = usePropsStore((state) => state.firstFocuseableColumnHeaderId);\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(\n () => ({\n isGlobal: true,\n }),\n [],\n );\n const allExpandable = useMemo(() => {\n const expandable: Record<string, boolean> = {};\n allDataFlattened.forEach((row) => {\n const isExpandableRow = row.original.subRows || row.original.tableRowDetails || row.original.dimsumHeaderValue;\n if (!disabledRows[row.uid] && isExpandableRow) expandable[row.uid] = true;\n });\n return expandable;\n }, [allDataFlattened, disabledRows]);\n\n const isAllRowsExpanded = useMemo(\n () => Object.keys(allExpandable).length === Object.keys(expandedRows).length,\n [allExpandable, expandedRows],\n );\n\n const onExpandedAllHandler = useCallback(() => {\n if (isAllRowsExpanded) onRowExpand({}, 'All');\n else onRowExpand({ ...allExpandable }, 'All');\n }, [allExpandable, isAllRowsExpanded, onRowExpand]);\n\n const onKeyDownHandler = useCallback(\n (e: React.KeyboardEvent) => {\n if (['Enter', 'Space'].includes(e.code)) {\n onExpandedAllHandler();\n e.preventDefault();\n }\n },\n [onExpandedAllHandler],\n );\n\n const GlobalExpandIcon = useMemo(() => {\n if (isAllRowsExpanded) return <ArrowDown />;\n if (Object.keys(expandedRows).length) return <ArrowMixed />;\n return <ArrowRight />;\n }, [expandedRows, isAllRowsExpanded]);\n\n return (\n <StyledFocusWithin>\n <StyledSpan\n role=\"button\"\n tabIndex={0}\n title={\n isEmptyContent && firstFocuseableColumnHeaderId === 'expander'\n ? `${noResultsMessage}. ${\n noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ''\n } Toggle All Rows Expanded`\n : 'Toggle All Rows Expanded'\n }\n onClick={onExpandedAllHandler}\n onKeyDown={onKeyDownHandler}\n data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_EXPAND_CELL}\n aria-expanded={isAllRowsExpanded}\n style={{ width: '24px', height: '24px' }}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {GlobalExpandIcon}\n </StyledSpan>\n </StyledFocusWithin>\n );\n },\n Cell: ({ cell, row, isRowSelected, draggableProps }) => {\n const dragAndDropRows = usePropsStore((state) => state.dragAndDropRows);\n const expandedRows = usePropsStore((state) => state.expandedRows);\n const onRowExpand = usePropsStore((state) => state.onRowExpand);\n const disabledRows = usePropsStore((state) => state.disabledRows);\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(\n () => ({\n isGlobal: false,\n }),\n [],\n );\n const uniqueId = row.uid;\n\n const isExpanded = !!expandedRows[uniqueId];\n\n const shouldPrintCaret = useMemo(\n () =>\n (row.original.subRows?.length && row.depth === 0) || // only allows 1 level of expands\n row.original.tableRowDetails ||\n row.original.dimsumHeaderValue,\n [row.depth, row.original.dimsumHeaderValue, row.original.subRows?.length, row.original.tableRowDetails],\n );\n\n const onRowExpandHandler = useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n if (disabledRows[row.uid]) return;\n e.stopPropagation(); // to prevent on row click\n const newExpandedRows = { ...expandedRows };\n if (newExpandedRows[uniqueId]) {\n delete newExpandedRows[uniqueId];\n } else {\n newExpandedRows[uniqueId] = true;\n }\n onRowExpand(newExpandedRows, uniqueId);\n },\n [disabledRows, row.uid, expandedRows, uniqueId, onRowExpand],\n );\n\n const onKeyDownHandler = useCallback(\n (e: React.KeyboardEvent) => {\n if (['Enter', 'Space'].includes(e.code)) {\n e.preventDefault();\n onRowExpandHandler(e);\n }\n },\n [onRowExpandHandler],\n );\n\n const isDragging = draggableProps && draggableProps.isDragging;\n const isDragOverlay = dragAndDropRows && !draggableProps;\n\n const indentStyle: React.CSSProperties = useMemo(\n () => ({\n marginLeft: `${row.depth * 32}px`,\n marginRight: '12px',\n paddingLeft: '3px',\n paddingRight: '2px',\n position: 'relative',\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n }),\n [row.depth],\n );\n\n const PureCaretIcon = useMemo(() => {\n const Caret = isExpanded && !isDragging && !isDragOverlay ? ArrowDown : ArrowRight;\n return (\n <Caret\n data-is-col-expanded={isExpanded}\n data-role=\"row-expander-col\"\n color={disabledRows[row.uid] ? ['neutral', '400'] : ['brand-primary', '600']}\n />\n );\n }, [isExpanded, isDragging, isDragOverlay, disabledRows, row.uid]);\n\n if (shouldPrintCaret)\n return (\n <StyledFocusWithin style={indentStyle}>\n <StyledSpan\n role=\"button\"\n key={`${row.uid}-expand-button`}\n title=\"Toggle Row Expanded\"\n onClick={onRowExpandHandler}\n onKeyDown={onKeyDownHandler}\n innerRef={cell.ref}\n tabIndex={isRowSelected && !disabledRows[row.uid] ? 0 : -1}\n data-testid=\"data-table-row-expand-cell\"\n aria-expanded={isExpanded}\n disabled={disabledRows[row.uid]}\n aria-disabled={disabledRows[row.uid]}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {PureCaretIcon}\n </StyledSpan>\n </StyledFocusWithin>\n );\n\n if (row.depth !== 0)\n return (\n <span style={indentStyle}>\n <ArrowShortReturn\n size=\"s\"\n data-testid={DATA_TESTID.DATA_TABLE_ICON_CHILD}\n style={{ transform: 'rotate(90deg) scaleY(-1)' }}\n color={['brand-primary', '600']}\n />\n </span>\n );\n\n return <div style={{ width: '36px' }} />;\n },\n textWrap: 'wrap',\n canResize: false,\n width: 25,\n padding: 0,\n isFocuseable: false,\n disableDnD: true,\n parentId: null,\n depth: 0,\n ref: createRef(),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useMemo, useCallback, createRef } from 'react';\nimport { ArrowheadDown, ArrowheadRight, ArrowShortReturn, type SvgIconT } from '@elliemae/ds-icons';\nimport { styled, css } from '@elliemae/ds-system';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { StyledFocusWithin } from '../../../styled.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\nimport { usePropsStore } from '../../../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../DSDataTableDefinitions.js';\n\nconst disabledCaret = css`\n cursor: not-allowed;\n pointer-events: none;\n`;\nconst StyledSpan = styled('span', { name: DSDataTableName, slot: DSDataTableSlots.EXPAND_CELL_CONTAINER })<{\n disabled?: boolean;\n}>`\n cursor: pointer;\n box-sizing: border-box;\n outline: none;\n display: flex;\n justify-content: center;\n align-items: center;\n ${({ disabled }) => disabled && disabledCaret}\n z-index: 1; // to be clickable over right cell padding that covers the whole cell (hack to satisfy the design)\n`;\n\nconst ArrowDown: React.ComponentType<SvgIconT.Props> = ({ color = ['brand-primary', '600'], ...rest }) => (\n <ArrowheadDown size=\"s\" color={color} data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN} {...rest} />\n);\n\nconst ArrowMixed = () => (\n <ArrowheadRight\n size=\"s\"\n color={['brand-primary', '600']}\n data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_MIXED}\n style={{ transform: 'rotate(45deg)' }}\n />\n);\n\nconst ArrowRight: React.ComponentType<SvgIconT.Props> = ({ color = ['brand-primary', '600'], ...rest }) => (\n <ArrowheadRight size=\"s\" color={color} data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT} {...rest} />\n);\n\nexport const expandRowColumn: DSDataTableT.InternalColumn = {\n // Build our expander column\n id: 'expander', // Make sure it has an ID\n accessor: 'expandRowColumn',\n Header: () => {\n const expandedRows = usePropsStore((state) => state.expandedRows);\n const onRowExpand = usePropsStore((state) => state.onRowExpand);\n const disabledRows = usePropsStore((state) => state.disabledRows);\n const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n const firstFocuseableColumnHeaderId = usePropsStore((state) => state.firstFocuseableColumnHeaderId);\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(\n () => ({\n isGlobal: true,\n }),\n [],\n );\n const allExpandable = useMemo(() => {\n const expandable: Record<string, boolean> = {};\n allDataFlattened.forEach((row) => {\n const isExpandableRow = row.original.subRows || row.original.tableRowDetails || row.original.dimsumHeaderValue;\n if (!disabledRows[row.uid] && isExpandableRow) expandable[row.uid] = true;\n });\n return expandable;\n }, [allDataFlattened, disabledRows]);\n\n const isAllRowsExpanded = useMemo(\n () => Object.keys(allExpandable).length === Object.keys(expandedRows).length,\n [allExpandable, expandedRows],\n );\n\n const onExpandedAllHandler = useCallback(() => {\n if (isAllRowsExpanded) onRowExpand({}, 'All');\n else onRowExpand({ ...allExpandable }, 'All');\n }, [allExpandable, isAllRowsExpanded, onRowExpand]);\n\n const onKeyDownHandler = useCallback(\n (e: React.KeyboardEvent) => {\n if (['Enter', 'Space'].includes(e.code)) {\n onExpandedAllHandler();\n e.preventDefault();\n }\n },\n [onExpandedAllHandler],\n );\n\n const GlobalExpandIcon = useMemo(() => {\n if (isAllRowsExpanded) return <ArrowDown />;\n if (Object.keys(expandedRows).length) return <ArrowMixed />;\n return <ArrowRight />;\n }, [expandedRows, isAllRowsExpanded]);\n\n return (\n <StyledFocusWithin>\n <StyledSpan\n role=\"button\"\n tabIndex={0}\n title={\n isEmptyContent && firstFocuseableColumnHeaderId === 'expander'\n ? `${noResultsMessage}. ${\n noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ''\n } Toggle All Rows Expanded`\n : 'Toggle All Rows Expanded'\n }\n onClick={onExpandedAllHandler}\n onKeyDown={onKeyDownHandler}\n data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_EXPAND_CELL}\n aria-expanded={isAllRowsExpanded}\n style={{ width: '24px', height: '24px' }}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {GlobalExpandIcon}\n </StyledSpan>\n </StyledFocusWithin>\n );\n },\n Cell: ({ cell, row, isRowSelected, draggableProps }) => {\n const dragAndDropRows = usePropsStore((state) => state.dragAndDropRows);\n const expandedRows = usePropsStore((state) => state.expandedRows);\n const onRowExpand = usePropsStore((state) => state.onRowExpand);\n const disabledRows = usePropsStore((state) => state.disabledRows);\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(\n () => ({\n isGlobal: false,\n }),\n [],\n );\n const uniqueId = row.uid;\n\n const isExpanded = !!expandedRows[uniqueId];\n\n const shouldPrintCaret = useMemo(\n () =>\n (row.original.subRows?.length && row.depth === 0) || // only allows 1 level of expands\n row.original.tableRowDetails ||\n row.original.dimsumHeaderValue,\n [row.depth, row.original.dimsumHeaderValue, row.original.subRows?.length, row.original.tableRowDetails],\n );\n\n const onRowExpandHandler = useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n if (disabledRows[row.uid]) return;\n e.stopPropagation(); // to prevent on row click\n const newExpandedRows = { ...expandedRows };\n if (newExpandedRows[uniqueId]) {\n delete newExpandedRows[uniqueId];\n } else {\n newExpandedRows[uniqueId] = true;\n }\n onRowExpand(newExpandedRows, uniqueId);\n },\n [disabledRows, row.uid, expandedRows, uniqueId, onRowExpand],\n );\n\n const onKeyDownHandler = useCallback(\n (e: React.KeyboardEvent) => {\n if (['Enter', 'Space'].includes(e.code)) {\n e.preventDefault();\n onRowExpandHandler(e);\n }\n },\n [onRowExpandHandler],\n );\n\n const subRowsIds = useMemo(\n () => row.original.subRows?.reduce((acc, subRow) => `${acc} ${subRow.id}-row`, '') ?? '',\n [row.original.subRows],\n );\n\n const isDragging = draggableProps && draggableProps.isDragging;\n const isDragOverlay = dragAndDropRows && !draggableProps;\n\n const indentStyle: React.CSSProperties = useMemo(\n () => ({\n marginLeft: `${row.depth * 32}px`,\n marginRight: '12px',\n paddingLeft: '3px',\n paddingRight: '2px',\n position: 'relative',\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n }),\n [row.depth],\n );\n\n const PureCaretIcon = useMemo(() => {\n const Caret = isExpanded && !isDragging && !isDragOverlay ? ArrowDown : ArrowRight;\n return (\n <Caret\n data-is-col-expanded={isExpanded}\n data-role=\"row-expander-col\"\n color={disabledRows[row.uid] ? ['neutral', '400'] : ['brand-primary', '600']}\n />\n );\n }, [isExpanded, isDragging, isDragOverlay, disabledRows, row.uid]);\n\n if (shouldPrintCaret)\n return (\n <StyledFocusWithin style={indentStyle}>\n <StyledSpan\n role=\"button\"\n key={`${row.uid}-expand-button`}\n title=\"Toggle Row Expanded\"\n onClick={onRowExpandHandler}\n onKeyDown={onKeyDownHandler}\n innerRef={cell.ref}\n tabIndex={isRowSelected && !disabledRows[row.uid] ? 0 : -1}\n data-testid=\"data-table-row-expand-cell\"\n aria-expanded={isExpanded}\n aria-controls={isExpanded ? subRowsIds : undefined}\n disabled={disabledRows[row.uid]}\n aria-disabled={disabledRows[row.uid]}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {PureCaretIcon}\n </StyledSpan>\n </StyledFocusWithin>\n );\n\n if (row.depth !== 0)\n return (\n <span style={indentStyle}>\n <ArrowShortReturn\n size=\"s\"\n data-testid={DATA_TESTID.DATA_TABLE_ICON_CHILD}\n style={{ transform: 'rotate(90deg) scaleY(-1)' }}\n color={['brand-primary', '600']}\n />\n </span>\n );\n\n return <div style={{ width: '36px' }} />;\n },\n textWrap: 'wrap',\n canResize: false,\n width: 25,\n padding: 0,\n isFocuseable: false,\n disableDnD: true,\n parentId: null,\n depth: 0,\n ref: createRef(),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -38,6 +38,7 @@ var import_ds_form_checkbox = require("@elliemae/ds-form-checkbox");
|
|
|
38
38
|
var import_uid = require("uid");
|
|
39
39
|
var import_constants = require("../../../configs/constants.js");
|
|
40
40
|
var import_createInternalAndPropsContext = require("../../../configs/useStore/createInternalAndPropsContext.js");
|
|
41
|
+
var import_multipleSelectRow = require("../../../helpers/multipleSelectRow.js");
|
|
41
42
|
const multiSelectColumn = {
|
|
42
43
|
// Build our multiSelecter column
|
|
43
44
|
id: "multiSelecter",
|
|
@@ -106,26 +107,28 @@ const multiSelectColumn = {
|
|
|
106
107
|
const checkboxSelectAllProps = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.checkboxSelectAllProps);
|
|
107
108
|
const isShiftPressed = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.isShiftPressed);
|
|
108
109
|
const setIsShiftPressed = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.setIsShiftPressed);
|
|
109
|
-
const { uid } = row;
|
|
110
|
+
const { uid, realIndex } = row;
|
|
110
111
|
const selectedState = selection?.[uid] ?? false;
|
|
111
112
|
const isShiftPressedKeyRef = (0, import_react.useRef)(false);
|
|
112
113
|
const onChangeHandler = (0, import_react.useCallback)(
|
|
113
114
|
(newState, e) => {
|
|
114
|
-
|
|
115
|
+
let newSelection = { ...selection, [uid]: newState };
|
|
115
116
|
if (!newState) delete newSelection[uid];
|
|
116
|
-
const now =
|
|
117
|
+
const now = realIndex;
|
|
117
118
|
if ((isShiftPressed || isShiftPressedKeyRef.current) && lastSelected.current > -1) {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
119
|
+
newSelection = (0, import_multipleSelectRow.updateRangeSelection)(
|
|
120
|
+
newSelection,
|
|
121
|
+
lastSelected.current,
|
|
122
|
+
now,
|
|
123
|
+
flattenedData,
|
|
124
|
+
disabledRows,
|
|
125
|
+
newState
|
|
126
|
+
);
|
|
124
127
|
}
|
|
125
128
|
lastSelected.current = now;
|
|
126
129
|
onSelectionChange(newSelection, uid, e);
|
|
127
130
|
},
|
|
128
|
-
[
|
|
131
|
+
[selection, uid, realIndex, isShiftPressed, lastSelected, onSelectionChange, flattenedData, disabledRows]
|
|
129
132
|
);
|
|
130
133
|
const onKeyDownHandler = (0, import_react.useCallback)(
|
|
131
134
|
(e) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-statements */\nimport React, { useMemo, useRef, useCallback, createRef } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport { uid as genUid } from 'uid';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\nimport { useInternalStore, usePropsStore } from '../../../configs/useStore/createInternalAndPropsContext.js';\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyEjB;AAxEN,mBAA+D;AAC/D,8BAAqC;AACrC,iBAA8B;AAE9B,uBAA4B;AAC5B,2CAAgD;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\nimport React, { useMemo, useRef, useCallback, createRef } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport { uid as genUid } from 'uid';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\nimport { useInternalStore, usePropsStore } from '../../../configs/useStore/createInternalAndPropsContext.js';\nimport { updateRangeSelection } from '../../../helpers/multipleSelectRow.js';\nexport const multiSelectColumn: DSDataTableT.InternalColumn = {\n // Build our multiSelecter column\n id: 'multiSelecter', // Make sure it has an ID\n Header: () => {\n const onSelectionChange = usePropsStore((state) => state.onSelectionChange);\n const selection = usePropsStore((state) => state.selection);\n const disabledRows = usePropsStore((state) => state.disabledRows);\n const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n const flattenedData = usePropsStore((state) => state.flattenedData);\n const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n const firstFocuseableColumnHeaderId = usePropsStore((state) => state.firstFocuseableColumnHeaderId);\n const domIdAffix = usePropsStore((state) => state.domIdAffix);\n const visibleRangeRef = usePropsStore((state) => state.visibleRangeRef);\n\n // We for sure have selection, so we just typecast it for TS reasons\n const dtSelection = selection ?? {};\n const selectionKeyCount = flattenedData.reduce(\n (acc, cur) => (dtSelection[cur.uid] && !disabledRows[cur.uid] ? 1 : 0) + acc,\n 0,\n );\n\n const currentGlobalState = useMemo(\n () =>\n selectionKeyCount > 0 && selectionKeyCount < flattenedData.filter((datum) => !disabledRows[datum.uid]).length\n ? 'mixed'\n : selectionKeyCount > 0,\n [selectionKeyCount, flattenedData, disabledRows],\n );\n\n // global state toggling: false to true, mixed to true, true to false\n const newGlobalStateAfterToggle = useMemo(() => currentGlobalState !== true, [currentGlobalState]);\n\n const newSelection: DSDataTableT.Selection = useMemo(() => {\n if (!newGlobalStateAfterToggle) return {};\n\n return allDataFlattened.reduce<DSDataTableT.Selection>((newSelectionObject, datum) => {\n newSelectionObject[datum.uid] = !disabledRows[datum.uid];\n return newSelectionObject;\n }, {});\n }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);\n\n const onChangeHandler = useCallback(\n (newState: boolean, e: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent) => {\n onSelectionChange(newSelection, 'All', e);\n },\n [newSelection, onSelectionChange],\n );\n\n const ariaControls = useMemo(\n () =>\n allDataFlattened\n .map((datum) => `data-table-checkbox-${datum.uid}${domIdAffix ? `-${domIdAffix}` : ''}`)\n .join(' '),\n [allDataFlattened, domIdAffix],\n );\n\n const startCandidate = visibleRangeRef.current.start - visibleRangeRef.current.overscan;\n const start = startCandidate > 0 ? startCandidate : 0;\n const endCandidate = visibleRangeRef.current.end + visibleRangeRef.current.overscan + 1;\n const end = endCandidate > visibleRangeRef.current.size ? visibleRangeRef.current.size : endCandidate;\n const visibleAriaControls = ariaControls.split(' ').slice(start, end).join(' ');\n\n return (\n <DSControlledCheckbox\n aria-controls={visibleAriaControls}\n data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX}\n aria-label={\n isEmptyContent && firstFocuseableColumnHeaderId === 'multiSelecter'\n ? `${noResultsMessage}. ${\n noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ''\n } Toggle all rows selected`\n : 'Toggle all rows selected'\n }\n checked={currentGlobalState}\n onChange={onChangeHandler}\n />\n );\n },\n Cell: ({ cell, row, isRowSelected, domIdAffix = genUid(4) }) => {\n const onSelectionChange = usePropsStore((state) => state.onSelectionChange);\n const selection = usePropsStore((state) => state.selection);\n const disabledRows = usePropsStore((state) => state.disabledRows);\n const lastSelected = usePropsStore((state) => state.lastSelected);\n const flattenedData = usePropsStore((state) => state.flattenedData);\n const checkboxSelectAllProps = usePropsStore((state) => state.checkboxSelectAllProps);\n\n const isShiftPressed = useInternalStore((state) => state.isShiftPressed);\n const setIsShiftPressed = useInternalStore((state) => state.setIsShiftPressed);\n\n const { uid, realIndex } = row;\n const selectedState = selection?.[uid] ?? false;\n const isShiftPressedKeyRef = useRef(false);\n const onChangeHandler = useCallback(\n (newState: boolean, e: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent) => {\n let newSelection = { ...selection, [uid]: newState }; // we only want true and mixed values\n if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection\n const now = realIndex;\n if ((isShiftPressed || isShiftPressedKeyRef.current) && lastSelected.current > -1) {\n newSelection = updateRangeSelection(\n newSelection,\n lastSelected.current,\n now,\n flattenedData,\n disabledRows,\n newState,\n );\n }\n lastSelected.current = now;\n onSelectionChange(newSelection, uid, e);\n },\n [selection, uid, realIndex, isShiftPressed, lastSelected, onSelectionChange, flattenedData, disabledRows],\n );\n\n const onKeyDownHandler: React.KeyboardEventHandler = useCallback(\n (e) => {\n setIsShiftPressed(e.code === 'Shift' || e.shiftKey);\n e.stopPropagation();\n },\n [setIsShiftPressed],\n );\n\n const onKeyUpHandler: React.KeyboardEventHandler = useCallback(\n (e) => {\n setIsShiftPressed(false);\n isShiftPressedKeyRef.current = false;\n e.stopPropagation();\n },\n [setIsShiftPressed],\n );\n\n const stopThePropagation = useCallback((e: React.MouseEvent | React.KeyboardEvent) => {\n if (e.shiftKey) {\n isShiftPressedKeyRef.current = true;\n }\n e.stopPropagation();\n }, []);\n\n return (\n <div role=\"presentation\" onClick={stopThePropagation} onKeyDown={onKeyDownHandler} onKeyUp={onKeyUpHandler}>\n <DSControlledCheckbox\n id={`data-table-checkbox-${uid}-${domIdAffix}`}\n data-testid={DATA_TESTID.DATA_TABLE_CHECKBOX}\n aria-label=\"Toggle row selected\"\n checked={selectedState}\n onChange={onChangeHandler}\n disabled={disabledRows[row.uid]}\n innerRef={cell.ref}\n tabIndex={isRowSelected ? 0 : -1}\n {...checkboxSelectAllProps}\n />\n </div>\n );\n },\n textWrap: 'wrap',\n width: 32,\n padding: 7,\n canResize: false,\n isFocuseable: false,\n disableDnD: true,\n parentId: null,\n depth: 0,\n ref: createRef(),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["genUid"]
|
|
7
7
|
}
|
|
@@ -49,7 +49,7 @@ const BaseSelectFilter = (props) => {
|
|
|
49
49
|
creatable = false,
|
|
50
50
|
column,
|
|
51
51
|
type,
|
|
52
|
-
column: { id, filterOptions: userFilterOptions, filterMinWidth },
|
|
52
|
+
column: { id, filterOptions: userFilterOptions, filterMinWidth, disableFirstOptionFocusOnFilter = false },
|
|
53
53
|
reduxHeader,
|
|
54
54
|
patchHeaderFilterButtonAndMenu,
|
|
55
55
|
innerRef,
|
|
@@ -143,6 +143,7 @@ const BaseSelectFilter = (props) => {
|
|
|
143
143
|
innerRef: handleRef,
|
|
144
144
|
allOptions: filters,
|
|
145
145
|
onCreate: creatable ? handleOnCreate : void 0,
|
|
146
|
+
forceFocusFirstOptionOnType: creatable && disableFirstOptionFocusOnFilter === false,
|
|
146
147
|
onChange: handleOnChange,
|
|
147
148
|
selectedValues: selectedItems,
|
|
148
149
|
menuMaxHeight: 300
|
|
@@ -150,7 +151,16 @@ const BaseSelectFilter = (props) => {
|
|
|
150
151
|
)
|
|
151
152
|
}
|
|
152
153
|
),
|
|
153
|
-
[
|
|
154
|
+
[
|
|
155
|
+
creatable,
|
|
156
|
+
disableFirstOptionFocusOnFilter,
|
|
157
|
+
filters,
|
|
158
|
+
handleOnChange,
|
|
159
|
+
handleOnCreate,
|
|
160
|
+
handleRef,
|
|
161
|
+
isMulti,
|
|
162
|
+
selectedItems
|
|
163
|
+
]
|
|
154
164
|
);
|
|
155
165
|
const handleOnClickOutside = (0, import_react.useCallback)(() => {
|
|
156
166
|
setFilteredOptions(filterOptions);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/addons/Filters/Components/SelectFilter/BaseSelectFilter.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { DSComboBox } from '@elliemae/ds-form-combobox';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID, EMPTY_FILTER } from '../../../../configs/index.js';\nimport { usePropsStore } from '../../../../configs/useStore/createInternalAndPropsContext.js';\n\ninterface BaseSelectProps {\n isMulti?: boolean;\n creatable?: boolean;\n type: string;\n}\n\ntype MaybeToStringable =\n | string\n | number\n | boolean\n | Date\n | RegExp\n | Array<unknown>\n | Record<string, unknown>\n | null\n | undefined;\n\nconst getValue = (datum: unknown) => (datum as MaybeToStringable)?.toString();\n\ntype BaseSelectFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const BaseSelectFilter: React.ComponentType<\n DSDataTableT.FilterProps<BaseSelectFilterValue> & BaseSelectProps\n> = (props) => {\n const {\n isMulti = false,\n filterValue: selectedItems = null,\n creatable = false,\n column,\n type,\n column: { id, filterOptions: userFilterOptions, filterMinWidth },\n reduxHeader,\n patchHeaderFilterButtonAndMenu,\n innerRef,\n onValueChange,\n } = props;\n\n const data = usePropsStore((state) => state.data);\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { DSComboBox } from '@elliemae/ds-form-combobox';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID, EMPTY_FILTER } from '../../../../configs/index.js';\nimport { usePropsStore } from '../../../../configs/useStore/createInternalAndPropsContext.js';\n\ninterface BaseSelectProps {\n isMulti?: boolean;\n creatable?: boolean;\n type: string;\n}\n\ntype MaybeToStringable =\n | string\n | number\n | boolean\n | Date\n | RegExp\n | Array<unknown>\n | Record<string, unknown>\n | null\n | undefined;\n\nconst getValue = (datum: unknown) => (datum as MaybeToStringable)?.toString();\n\ntype BaseSelectFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const BaseSelectFilter: React.ComponentType<\n DSDataTableT.FilterProps<BaseSelectFilterValue> & BaseSelectProps\n> = (props) => {\n const {\n isMulti = false,\n filterValue: selectedItems = null,\n creatable = false,\n column,\n type,\n column: { id, filterOptions: userFilterOptions, filterMinWidth, disableFirstOptionFocusOnFilter = false },\n reduxHeader,\n patchHeaderFilterButtonAndMenu,\n innerRef,\n onValueChange,\n } = props;\n\n const data = usePropsStore((state) => state.data);\n const ref = useRef<HTMLInputElement | null>(null);\n const shouldFocus = useRef(true);\n const filterOptions = useMemo(() => {\n // If the user didn't provide options, use the available ones\n if (!userFilterOptions) {\n const automaticFilters = [...new Set(data.map((datum) => getValue(datum?.[id])))];\n\n const hasEmptyValue = automaticFilters.some((item) => item === null || item === undefined || item === '');\n\n const finalAutomaticFilters: DSDataTableT.FilterOptionT[] = automaticFilters\n .filter((item) => item !== null && item !== undefined && item !== '')\n .map((item) => ({\n type: 'option',\n dsId: item as string,\n value: item as string,\n label: item as string,\n }));\n\n if (hasEmptyValue) {\n finalAutomaticFilters.push({\n type: 'option',\n dsId: EMPTY_FILTER,\n value: EMPTY_FILTER,\n label: '(Empty)',\n });\n }\n\n return finalAutomaticFilters;\n }\n\n // If user provided the array itself, use it\n if (Array.isArray(userFilterOptions)) return userFilterOptions;\n // Otherwise, it is a function\n return userFilterOptions();\n }, [data, id, userFilterOptions]);\n\n const [filters, setFilteredOptions] = useState(filterOptions);\n\n useEffect(() => setFilteredOptions(filterOptions), [filterOptions]);\n\n const handleOnChange = useCallback(\n (value: BaseSelectFilterValue) => {\n if (isMulti && Array.isArray(value)) {\n onValueChange(type, value.length !== 0 ? value : undefined);\n } else {\n onValueChange(type, value !== null ? value : undefined);\n patchHeaderFilterButtonAndMenu(column.id, true);\n innerRef?.current?.focus();\n }\n },\n [column.id, innerRef, isMulti, onValueChange, patchHeaderFilterButtonAndMenu, type],\n );\n\n const handleOnCreate = useCallback(\n (label: string) => {\n if (label.trim() === '') {\n return;\n }\n if (filterOptions.some((item) => 'label' in item && item.label === label)) {\n return;\n }\n const newId = uid();\n const newItem: DSDataTableT.FilterOptionT = {\n dsId: newId,\n value: newId,\n label,\n type: 'option',\n };\n filterOptions.unshift(newItem);\n handleOnChange(Array.isArray(selectedItems) ? [...selectedItems, newItem] : newItem);\n setFilteredOptions([...filterOptions]);\n },\n [filterOptions, handleOnChange, selectedItems],\n );\n\n const handleRef = useCallback((newRef: HTMLInputElement | null) => {\n ref.current = newRef;\n if (shouldFocus.current) {\n setTimeout(() => {\n ref.current?.focus();\n shouldFocus.current = false;\n });\n }\n }, []);\n\n useEffect(() => {\n if (reduxHeader?.hideFilterMenu) {\n shouldFocus.current = true;\n }\n }, [reduxHeader?.hideFilterMenu]);\n\n const Select = useMemo(\n () => (\n <Grid\n data-testid={\n isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER\n }\n >\n <DSComboBox\n inline\n aria-label=\"Search filter options\"\n innerRef={handleRef}\n allOptions={filters}\n onCreate={creatable ? handleOnCreate : undefined}\n forceFocusFirstOptionOnType={creatable && disableFirstOptionFocusOnFilter === false}\n onChange={handleOnChange}\n selectedValues={selectedItems}\n menuMaxHeight={300}\n />\n </Grid>\n ),\n [\n creatable,\n disableFirstOptionFocusOnFilter,\n filters,\n handleOnChange,\n handleOnCreate,\n handleRef,\n isMulti,\n selectedItems,\n ],\n );\n\n const handleOnClickOutside = useCallback(() => {\n setFilteredOptions(filterOptions);\n }, [filterOptions]);\n\n return (\n <FilterPopover\n reduxHeader={reduxHeader}\n column={column}\n columnId={column.id}\n menuContent={Select}\n triggerIcon={<SearchXsmall />}\n innerRef={innerRef}\n ariaLabel=\"Open Selection Filter\"\n onClickOutsideMenu={handleOnClickOutside}\n customStyles={{\n backgroundColor: '#fff',\n width: filterMinWidth ?? column.ref?.current?.offsetWidth,\n }}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -32,7 +32,7 @@ __export(useAutocalculated_exports, {
|
|
|
32
32
|
});
|
|
33
33
|
module.exports = __toCommonJS(useAutocalculated_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
|
-
var import_react = require("react");
|
|
35
|
+
var import_react = __toESM(require("react"));
|
|
36
36
|
var import_react_virtual = require("react-virtual");
|
|
37
37
|
var import_useTableColsWithAddons = require("../useTableColsWithAddons.js");
|
|
38
38
|
var import_useRowFlattenization = require("../useRowFlattenization.js");
|
|
@@ -57,7 +57,7 @@ const useAutoCalculated = (propsWithDefaults) => {
|
|
|
57
57
|
overscan: 15,
|
|
58
58
|
paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24,
|
|
59
59
|
estimateSize,
|
|
60
|
-
rangeExtractor:
|
|
60
|
+
rangeExtractor: import_react.default.useCallback((range) => {
|
|
61
61
|
visibleRangeRef.current = range;
|
|
62
62
|
return (0, import_react_virtual.defaultRangeExtractor)(range);
|
|
63
63
|
}, [])
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/configs/useAutocalculated/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-statements */\nimport { useEffect, useMemo, useRef } from 'react';\nimport { useVirtual, defaultRangeExtractor, type Range } from 'react-virtual';\nimport { type DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useTableColsWithAddons } from '../useTableColsWithAddons.js';\nimport { useRowFlattenization } from '../useRowFlattenization.js';\nimport { usePaginationConfig } from '../usePaginationConfig.js';\nimport { columnsToGrid } from '../../helpers/columnsToGrid.js';\nimport { ColsLayoutStyle } from '../constants.js';\nimport { useTableResizeCb } from '../useTableResizeCb.js';\n\nconst estimateSize = () => 36;\n\nexport const useAutoCalculated = (propsWithDefaults: DSDataTableT.InternalProps): DSDataTableT.UseAutoCalculatedT => {\n const { actionRef, colsLayoutStyle, hiddenColumns, isLoading } = propsWithDefaults;\n\n const visibleRangeRef = useRef<Range>({ start: 0, end: 0 });\n const virtualListRef = useRef<HTMLDivElement | null>(null);\n const columnHeaderRef = useRef<HTMLDivElement | null>(null);\n const lastSelected = useRef<number>(-1);\n\n // ===========================================================================\n // Column config\n // ===========================================================================\n const visibleColumns = useTableColsWithAddons(propsWithDefaults, hiddenColumns);\n\n // ===========================================================================\n // Data flattenization and pagination\n // ===========================================================================\n\n const [flattenedData, allDataFlattened] = useRowFlattenization(propsWithDefaults);\n\n const [paginatedData, paginationHelpers] = usePaginationConfig(propsWithDefaults, flattenedData);\n\n const dataLength = useMemo(() => (paginatedData || flattenedData).length, [flattenedData, paginatedData]);\n\n // estimateSize should not be really required given what was stated on\n // https://github.com/tannerlinsley/react-virtual/issues/23\n const virtualListHelpers = useVirtual({\n size: dataLength,\n parentRef: virtualListRef,\n overscan: 15,\n paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24,\n estimateSize,\n rangeExtractor: React.useCallback((range: Range) => {\n visibleRangeRef.current = range;\n\n return defaultRangeExtractor(range);\n }, []),\n });\n\n // ===========================================================================\n // Empty content config\n // ===========================================================================\n\n const isEmptyContent = useMemo(() => !isLoading && flattenedData.length === 0, [isLoading, flattenedData.length]);\n\n const firstFocuseableColumnHeaderId = useMemo(() => {\n for (let i = 0; i < visibleColumns.length; i++) {\n const column = visibleColumns[i];\n if (column.isFocuseable === false && column.id !== 'expander' && column.id !== 'multiSelecter') {\n continue;\n }\n return column.id;\n }\n }, [visibleColumns]);\n\n // ===========================================================================\n // Layout config\n // ===========================================================================\n\n const gridLayout = useMemo(() => columnsToGrid(visibleColumns, colsLayoutStyle), [colsLayoutStyle, visibleColumns]);\n\n // We need to listen and update the state based on this props\n const totalColumnsWidth = useMemo(\n () =>\n colsLayoutStyle === ColsLayoutStyle.Fixed\n ? gridLayout.reduce((acc: number, cur: string) => acc + Number.parseInt(cur, 10), 0)\n : '100%',\n [colsLayoutStyle, gridLayout],\n );\n\n const layoutHelpers = useMemo(\n () => ({\n gridLayout,\n totalColumnsWidth,\n }),\n [gridLayout, totalColumnsWidth],\n );\n\n useTableResizeCb({ virtualListRef, propsWithDefault: propsWithDefaults });\n\n // ===========================================================================\n // Action ref setup\n // ===========================================================================\n useEffect(() => {\n if (actionRef) {\n actionRef.current.scrollToIndex = virtualListHelpers.scrollToIndex;\n actionRef.current.scrollToOffset = virtualListHelpers.scrollToOffset;\n }\n }, [actionRef, virtualListHelpers.scrollToIndex, virtualListHelpers.scrollToOffset]);\n\n return {\n visibleRangeRef,\n layoutHelpers,\n paginationHelpers,\n visibleColumns,\n virtualListHelpers,\n flattenedData: paginatedData || flattenedData,\n allDataFlattened,\n isEmptyContent,\n firstFocuseableColumnHeaderId,\n virtualListRef,\n columnHeaderRef,\n lastSelected,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["/* eslint-disable import/no-cycle */\n/* eslint-disable no-continue */\n/* eslint-disable consistent-return */\n/* eslint-disable no-plusplus */\n/* eslint-disable max-statements */\nimport React, { useEffect, useMemo, useRef } from 'react';\nimport { useVirtual, defaultRangeExtractor, type Range } from 'react-virtual';\nimport { type DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useTableColsWithAddons } from '../useTableColsWithAddons.js';\nimport { useRowFlattenization } from '../useRowFlattenization.js';\nimport { usePaginationConfig } from '../usePaginationConfig.js';\nimport { columnsToGrid } from '../../helpers/columnsToGrid.js';\nimport { ColsLayoutStyle } from '../constants.js';\nimport { useTableResizeCb } from '../useTableResizeCb.js';\n\nconst estimateSize = () => 36;\n\nexport const useAutoCalculated = (propsWithDefaults: DSDataTableT.InternalProps): DSDataTableT.UseAutoCalculatedT => {\n const { actionRef, colsLayoutStyle, hiddenColumns, isLoading } = propsWithDefaults;\n\n const visibleRangeRef = useRef<Range>({ start: 0, end: 0 });\n const virtualListRef = useRef<HTMLDivElement | null>(null);\n const columnHeaderRef = useRef<HTMLDivElement | null>(null);\n const lastSelected = useRef<number>(-1);\n\n // ===========================================================================\n // Column config\n // ===========================================================================\n const visibleColumns = useTableColsWithAddons(propsWithDefaults, hiddenColumns);\n\n // ===========================================================================\n // Data flattenization and pagination\n // ===========================================================================\n\n const [flattenedData, allDataFlattened] = useRowFlattenization(propsWithDefaults);\n\n const [paginatedData, paginationHelpers] = usePaginationConfig(propsWithDefaults, flattenedData);\n\n const dataLength = useMemo(() => (paginatedData || flattenedData).length, [flattenedData, paginatedData]);\n\n // estimateSize should not be really required given what was stated on\n // https://github.com/tannerlinsley/react-virtual/issues/23\n const virtualListHelpers = useVirtual({\n size: dataLength,\n parentRef: virtualListRef,\n overscan: 15,\n paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24,\n estimateSize,\n rangeExtractor: React.useCallback((range: Range) => {\n visibleRangeRef.current = range;\n\n return defaultRangeExtractor(range);\n }, []),\n });\n\n // ===========================================================================\n // Empty content config\n // ===========================================================================\n\n const isEmptyContent = useMemo(() => !isLoading && flattenedData.length === 0, [isLoading, flattenedData.length]);\n\n const firstFocuseableColumnHeaderId = useMemo(() => {\n for (let i = 0; i < visibleColumns.length; i++) {\n const column = visibleColumns[i];\n if (column.isFocuseable === false && column.id !== 'expander' && column.id !== 'multiSelecter') {\n continue;\n }\n return column.id;\n }\n }, [visibleColumns]);\n\n // ===========================================================================\n // Layout config\n // ===========================================================================\n\n const gridLayout = useMemo(() => columnsToGrid(visibleColumns, colsLayoutStyle), [colsLayoutStyle, visibleColumns]);\n\n // We need to listen and update the state based on this props\n const totalColumnsWidth = useMemo(\n () =>\n colsLayoutStyle === ColsLayoutStyle.Fixed\n ? gridLayout.reduce((acc: number, cur: string) => acc + Number.parseInt(cur, 10), 0)\n : '100%',\n [colsLayoutStyle, gridLayout],\n );\n\n const layoutHelpers = useMemo(\n () => ({\n gridLayout,\n totalColumnsWidth,\n }),\n [gridLayout, totalColumnsWidth],\n );\n\n useTableResizeCb({ virtualListRef, propsWithDefault: propsWithDefaults });\n\n // ===========================================================================\n // Action ref setup\n // ===========================================================================\n useEffect(() => {\n if (actionRef) {\n actionRef.current.scrollToIndex = virtualListHelpers.scrollToIndex;\n actionRef.current.scrollToOffset = virtualListHelpers.scrollToOffset;\n }\n }, [actionRef, virtualListHelpers.scrollToIndex, virtualListHelpers.scrollToOffset]);\n\n return {\n visibleRangeRef,\n layoutHelpers,\n paginationHelpers,\n visibleColumns,\n virtualListHelpers,\n flattenedData: paginatedData || flattenedData,\n allDataFlattened,\n isEmptyContent,\n firstFocuseableColumnHeaderId,\n virtualListRef,\n columnHeaderRef,\n lastSelected,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKvB,mBAAkD;AAClD,2BAA8D;AAE9D,oCAAuC;AACvC,kCAAqC;AACrC,iCAAoC;AACpC,2BAA8B;AAC9B,uBAAgC;AAChC,8BAAiC;AAEjC,MAAM,eAAe,MAAM;AAEpB,MAAM,oBAAoB,CAAC,sBAAmF;AACnH,QAAM,EAAE,WAAW,iBAAiB,eAAe,UAAU,IAAI;AAEjE,QAAM,sBAAkB,qBAAc,EAAE,OAAO,GAAG,KAAK,EAAE,CAAC;AAC1D,QAAM,qBAAiB,qBAA8B,IAAI;AACzD,QAAM,sBAAkB,qBAA8B,IAAI;AAC1D,QAAM,mBAAe,qBAAe,EAAE;AAKtC,QAAM,qBAAiB,sDAAuB,mBAAmB,aAAa;AAM9E,QAAM,CAAC,eAAe,gBAAgB,QAAI,kDAAqB,iBAAiB;AAEhF,QAAM,CAAC,eAAe,iBAAiB,QAAI,gDAAoB,mBAAmB,aAAa;AAE/F,QAAM,iBAAa,sBAAQ,OAAO,iBAAiB,eAAe,QAAQ,CAAC,eAAe,aAAa,CAAC;AAIxG,QAAM,yBAAqB,iCAAW;AAAA,IACpC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc,gBAAgB,SAAS,sBAAsB,GAAG,UAAU;AAAA,IAC1E;AAAA,IACA,gBAAgB,aAAAA,QAAM,YAAY,CAAC,UAAiB;AAClD,sBAAgB,UAAU;AAE1B,iBAAO,4CAAsB,KAAK;AAAA,IACpC,GAAG,CAAC,CAAC;AAAA,EACP,CAAC;AAMD,QAAM,qBAAiB,sBAAQ,MAAM,CAAC,aAAa,cAAc,WAAW,GAAG,CAAC,WAAW,cAAc,MAAM,CAAC;AAEhH,QAAM,oCAAgC,sBAAQ,MAAM;AAClD,aAAS,IAAI,GAAG,IAAI,eAAe,QAAQ,KAAK;AAC9C,YAAM,SAAS,eAAe,CAAC;AAC/B,UAAI,OAAO,iBAAiB,SAAS,OAAO,OAAO,cAAc,OAAO,OAAO,iBAAiB;AAC9F;AAAA,MACF;AACA,aAAO,OAAO;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AAMnB,QAAM,iBAAa,sBAAQ,UAAM,oCAAc,gBAAgB,eAAe,GAAG,CAAC,iBAAiB,cAAc,CAAC;AAGlH,QAAM,wBAAoB;AAAA,IACxB,MACE,oBAAoB,iCAAgB,QAChC,WAAW,OAAO,CAAC,KAAa,QAAgB,MAAM,OAAO,SAAS,KAAK,EAAE,GAAG,CAAC,IACjF;AAAA,IACN,CAAC,iBAAiB,UAAU;AAAA,EAC9B;AAEA,QAAM,oBAAgB;AAAA,IACpB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,YAAY,iBAAiB;AAAA,EAChC;AAEA,gDAAiB,EAAE,gBAAgB,kBAAkB,kBAAkB,CAAC;AAKxE,8BAAU,MAAM;AACd,QAAI,WAAW;AACb,gBAAU,QAAQ,gBAAgB,mBAAmB;AACrD,gBAAU,QAAQ,iBAAiB,mBAAmB;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,WAAW,mBAAmB,eAAe,mBAAmB,cAAc,CAAC;AAEnF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,iBAAiB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/configs/usePaginationConfig.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useMemo } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\nconst noPagination: Record<string, never> = {};\n\nconst emptyFunc = () => null;\n\nexport const usePaginationConfig = (\n props: DSDataTableT.InternalProps,\n flattenedData: DSDataTableT.InternalRow[],\n): [DSDataTableT.InternalRow[] | null, DSDataTableT.Pagination] => {\n const { pagination, Pagination } = props;\n\n const hasPagination = Boolean(pagination || Pagination);\n\n // Set default values\n const {\n pageIndex = 1,\n canPreviousPage = true,\n canNextPage = true,\n pageSize = 10,\n perPageOptions = [10],\n onPageSizeChange = emptyFunc,\n onPreviousPage = emptyFunc,\n onNextPage = emptyFunc,\n onPageChange = emptyFunc,\n pageCount = Math.ceil(flattenedData.length / pageSize),\n isLoadingPageCount = false,\n dataIsPage = false,\n perPageStep = 5,\n minPerPage = 0,\n maxPerPage = 100,\n showPerPageSelector = true,\n pageDetails = [],\n pageDetailsTitle = '',\n ...rest\n } = pagination || noPagination; // pagination can be false\n\n // Get the needed page\n const page = useMemo(() => {\n if (!hasPagination || !pagination) return null;\n if (dataIsPage) return flattenedData;\n return flattenedData.slice((pageIndex - 1) * pageSize, pageIndex * pageSize);\n }, [hasPagination, pagination, dataIsPage, flattenedData, pageIndex, pageSize]);\n\n const paginationHelpers = useMemo(\n () => ({\n ...rest,\n hasPagination,\n pageIndex,\n canPreviousPage,\n canNextPage,\n pageSize,\n perPageOptions,\n onPageSizeChange,\n onPreviousPage,\n onNextPage,\n onPageChange,\n pageCount,\n isLoadingPageCount
|
|
4
|
+
"sourcesContent": ["import { useMemo } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\nconst noPagination: Record<string, never> = {};\n\nconst emptyFunc = () => null;\n\nexport const usePaginationConfig = (\n props: DSDataTableT.InternalProps,\n flattenedData: DSDataTableT.InternalRow[],\n): [DSDataTableT.InternalRow[] | null, DSDataTableT.Pagination] => {\n const { pagination, Pagination } = props;\n\n const hasPagination = Boolean(pagination || Pagination);\n\n // Set default values\n const {\n pageIndex = 1,\n canPreviousPage = true,\n canNextPage = true,\n pageSize = 10,\n perPageOptions = [10],\n onPageSizeChange = emptyFunc,\n onPreviousPage = emptyFunc,\n onNextPage = emptyFunc,\n onPageChange = emptyFunc,\n pageCount = Math.ceil(flattenedData.length / pageSize),\n isLoadingPageCount = false,\n dataIsPage = false,\n perPageStep = 5,\n minPerPage = 0,\n maxPerPage = 100,\n showPerPageSelector = true,\n pageDetails = [],\n pageDetailsTitle = '',\n ...rest\n } = pagination || noPagination; // pagination can be false\n\n // Get the needed page\n const page = useMemo(() => {\n if (!hasPagination || !pagination) return null;\n if (dataIsPage) return flattenedData;\n return flattenedData.slice((pageIndex - 1) * pageSize, pageIndex * pageSize);\n }, [hasPagination, pagination, dataIsPage, flattenedData, pageIndex, pageSize]);\n\n const paginationHelpers = useMemo(\n () => ({\n ...rest,\n hasPagination,\n pageIndex,\n canPreviousPage,\n canNextPage,\n pageSize,\n perPageOptions,\n onPageSizeChange,\n onPreviousPage,\n onNextPage,\n onPageChange,\n pageCount,\n isLoadingPageCount,\n perPageStep,\n minPerPage,\n maxPerPage,\n showPerPageSelector,\n pageDetails,\n pageDetailsTitle,\n }),\n [\n hasPagination,\n pageIndex,\n canPreviousPage,\n canNextPage,\n pageSize,\n perPageOptions,\n onPageSizeChange,\n onPreviousPage,\n onNextPage,\n onPageChange,\n pageCount,\n isLoadingPageCount,\n perPageStep,\n minPerPage,\n maxPerPage,\n showPerPageSelector,\n pageDetails,\n pageDetailsTitle,\n rest,\n ],\n );\n return [page, paginationHelpers];\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwB;AAGxB,MAAM,eAAsC,CAAC;AAE7C,MAAM,YAAY,MAAM;AAEjB,MAAM,sBAAsB,CACjC,OACA,kBACiE;AACjE,QAAM,EAAE,YAAY,WAAW,IAAI;AAEnC,QAAM,gBAAgB,QAAQ,cAAc,UAAU;AAGtD,QAAM;AAAA,IACJ,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,cAAc;AAAA,IACd,WAAW;AAAA,IACX,iBAAiB,CAAC,EAAE;AAAA,IACpB,mBAAmB;AAAA,IACnB,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,eAAe;AAAA,IACf,YAAY,KAAK,KAAK,cAAc,SAAS,QAAQ;AAAA,IACrD,qBAAqB;AAAA,IACrB,aAAa;AAAA,IACb,cAAc;AAAA,IACd,aAAa;AAAA,IACb,aAAa;AAAA,IACb,sBAAsB;AAAA,IACtB,cAAc,CAAC;AAAA,IACf,mBAAmB;AAAA,IACnB,GAAG;AAAA,EACL,IAAI,cAAc;AAGlB,QAAM,WAAO,sBAAQ,MAAM;AACzB,QAAI,CAAC,iBAAiB,CAAC,WAAY,QAAO;AAC1C,QAAI,WAAY,QAAO;AACvB,WAAO,cAAc,OAAO,YAAY,KAAK,UAAU,YAAY,QAAQ;AAAA,EAC7E,GAAG,CAAC,eAAe,YAAY,YAAY,eAAe,WAAW,QAAQ,CAAC;AAE9E,QAAM,wBAAoB;AAAA,IACxB,OAAO;AAAA,MACL,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,SAAO,CAAC,MAAM,iBAAiB;AACjC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/configs/useTableColsWithAddons.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable max-params */\nimport { createRef, useMemo } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport {\n dragHandleColumn,\n expandRowColumn,\n actionColumn,\n singleSelectColumn,\n multiSelectColumn,\n} from '../addons/Columns/index.js';\n\nconst augmentColumns = (columns: DSDataTableT.Column[]): DSDataTableT.InternalColumn[] => {\n const augmentColumn = (\n column: DSDataTableT.Column,\n index: number,\n parentId: string | null = null,\n depth = 0,\n ): DSDataTableT.InternalColumn => {\n let id = `column${index}`;\n if (typeof column.Header === 'string') id = column.Header;\n if (typeof column.accessor === 'string') id = column.accessor;\n const { columns: childColumns, ...restOfColumn } = column;\n const newCol: DSDataTableT.InternalColumn = {\n id,\n parentId,\n depth,\n ...restOfColumn,\n ref: createRef<HTMLTableColElement>() as React.MutableRefObject<HTMLTableColElement>,\n };\n if (childColumns) newCol.columns = childColumns.map((col, i) => augmentColumn(col, i, id, depth + 1));\n return newCol;\n };\n return columns.map((col, index) => augmentColumn(col, index));\n};\n\nconst isColumnInArrayOfColumns = (columns: DSDataTableT.Column[], col: DSDataTableT.Column) =>\n columns.some((column) => column.id === col.id);\n\nconst useTableColsWithAddons = (\n {\n columns,\n renderRowActions,\n isExpandable,\n selectSingle,\n selection,\n dragAndDropRows,\n noSelectionColumn,\n }: DSDataTableT.InternalProps,\n hiddenColumns: string[],\n) => {\n const withSelection = Boolean(selection);\n\n return useMemo(() => {\n const columnsWithAddons = [...augmentColumns(columns)];\n // Columns to be prepended\n const colsToPrepend: DSDataTableT.InternalColumn[] = [];\n // Columns to be appended\n const colsToAppend: DSDataTableT.InternalColumn[] = [];\n\n if (isExpandable) colsToPrepend.push(expandRowColumn);\n if (withSelection && !noSelectionColumn) {\n if (selectSingle) colsToPrepend.push(singleSelectColumn as unknown as DSDataTableT.InternalColumn);\n else colsToPrepend.push(multiSelectColumn as unknown as DSDataTableT.InternalColumn);\n }\n if (dragAndDropRows) colsToPrepend.push(dragHandleColumn as unknown as DSDataTableT.InternalColumn);\n if (renderRowActions) colsToAppend.push(actionColumn(renderRowActions));\n\n // Prepend or append all the columns that were not extended by the user\n colsToPrepend.forEach((col) => {\n if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.unshift(col);\n });\n colsToAppend.forEach((col) => {\n if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.push(col);\n });\n\n return columnsWithAddons\n .filter((col) => col.accessor === undefined || !isColumnVisible(col.accessor, col.columns, hiddenColumns))\n .map((col) => {\n if (col.columns) {\n col.columns = col.columns.filter(\n (subCol: DSDataTableT.Column) => subCol.accessor === undefined || !hiddenColumns?.includes(subCol.accessor),\n );\n }\n return col;\n });\n }, [\n columns,\n isExpandable,\n withSelection,\n noSelectionColumn,\n dragAndDropRows,\n renderRowActions,\n selectSingle,\n hiddenColumns,\n ]);\n};\n\nexport { useTableColsWithAddons };\n\nconst isColumnVisible = (\n columnAccessor: string,\n columns: DSDataTableT.Column[] | undefined,\n hiddenColumns: string[],\n) => {\n if (!columns) return hiddenColumns.includes(columnAccessor);\n if (hiddenColumns.includes(columnAccessor)) return true;\n return columns.every((col) => hiddenColumns.includes(col.accessor || col.id!));\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable import/no-cycle */\n/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable max-params */\nimport { createRef, useMemo } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport {\n dragHandleColumn,\n expandRowColumn,\n actionColumn,\n singleSelectColumn,\n multiSelectColumn,\n} from '../addons/Columns/index.js';\n\nconst augmentColumns = (columns: DSDataTableT.Column[]): DSDataTableT.InternalColumn[] => {\n const augmentColumn = (\n column: DSDataTableT.Column,\n index: number,\n parentId: string | null = null,\n depth = 0,\n ): DSDataTableT.InternalColumn => {\n let id = `column${index}`;\n if (typeof column.Header === 'string') id = column.Header;\n if (typeof column.accessor === 'string') id = column.accessor;\n const { columns: childColumns, ...restOfColumn } = column;\n const newCol: DSDataTableT.InternalColumn = {\n id,\n parentId,\n depth,\n ...restOfColumn,\n ref: createRef<HTMLTableColElement>() as React.MutableRefObject<HTMLTableColElement>,\n };\n if (childColumns) newCol.columns = childColumns.map((col, i) => augmentColumn(col, i, id, depth + 1));\n return newCol;\n };\n return columns.map((col, index) => augmentColumn(col, index));\n};\n\nconst isColumnInArrayOfColumns = (columns: DSDataTableT.Column[], col: DSDataTableT.Column) =>\n columns.some((column) => column.id === col.id);\n\nconst useTableColsWithAddons = (\n {\n columns,\n renderRowActions,\n isExpandable,\n selectSingle,\n selection,\n dragAndDropRows,\n noSelectionColumn,\n }: DSDataTableT.InternalProps,\n hiddenColumns: string[],\n) => {\n const withSelection = Boolean(selection);\n\n return useMemo(() => {\n const columnsWithAddons = [...augmentColumns(columns)];\n // Columns to be prepended\n const colsToPrepend: DSDataTableT.InternalColumn[] = [];\n // Columns to be appended\n const colsToAppend: DSDataTableT.InternalColumn[] = [];\n\n if (isExpandable) colsToPrepend.push(expandRowColumn);\n if (withSelection && !noSelectionColumn) {\n if (selectSingle) colsToPrepend.push(singleSelectColumn as unknown as DSDataTableT.InternalColumn);\n else colsToPrepend.push(multiSelectColumn as unknown as DSDataTableT.InternalColumn);\n }\n if (dragAndDropRows) colsToPrepend.push(dragHandleColumn as unknown as DSDataTableT.InternalColumn);\n if (renderRowActions) colsToAppend.push(actionColumn(renderRowActions));\n\n // Prepend or append all the columns that were not extended by the user\n colsToPrepend.forEach((col) => {\n if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.unshift(col);\n });\n colsToAppend.forEach((col) => {\n if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.push(col);\n });\n\n return columnsWithAddons\n .filter((col) => col.accessor === undefined || !isColumnVisible(col.accessor, col.columns, hiddenColumns))\n .map((col) => {\n if (col.columns) {\n col.columns = col.columns.filter(\n (subCol: DSDataTableT.Column) => subCol.accessor === undefined || !hiddenColumns?.includes(subCol.accessor),\n );\n }\n return col;\n });\n }, [\n columns,\n isExpandable,\n withSelection,\n noSelectionColumn,\n dragAndDropRows,\n renderRowActions,\n selectSingle,\n hiddenColumns,\n ]);\n};\n\nexport { useTableColsWithAddons };\n\nconst isColumnVisible = (\n columnAccessor: string,\n columns: DSDataTableT.Column[] | undefined,\n hiddenColumns: string[],\n) => {\n if (!columns) return hiddenColumns.includes(columnAccessor);\n if (hiddenColumns.includes(columnAccessor)) return true;\n return columns.every((col) => hiddenColumns.includes(col.accessor || col.id!));\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAmC;AAEnC,qBAMO;AAEP,MAAM,iBAAiB,CAAC,YAAkE;AACxF,QAAM,gBAAgB,CACpB,QACA,OACA,WAA0B,MAC1B,QAAQ,MACwB;AAChC,QAAI,KAAK,SAAS,KAAK;AACvB,QAAI,OAAO,OAAO,WAAW,SAAU,MAAK,OAAO;AACnD,QAAI,OAAO,OAAO,aAAa,SAAU,MAAK,OAAO;AACrD,UAAM,EAAE,SAAS,cAAc,GAAG,aAAa,IAAI;AACnD,UAAM,SAAsC;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,SAAK,wBAA+B;AAAA,IACtC;AACA,QAAI,aAAc,QAAO,UAAU,aAAa,IAAI,CAAC,KAAK,MAAM,cAAc,KAAK,GAAG,IAAI,QAAQ,CAAC,CAAC;AACpG,WAAO;AAAA,EACT;AACA,SAAO,QAAQ,IAAI,CAAC,KAAK,UAAU,cAAc,KAAK,KAAK,CAAC;AAC9D;AAEA,MAAM,2BAA2B,CAAC,SAAgC,QAChE,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,IAAI,EAAE;AAE/C,MAAM,yBAAyB,CAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GACA,kBACG;AACH,QAAM,gBAAgB,QAAQ,SAAS;AAEvC,aAAO,sBAAQ,MAAM;AACnB,UAAM,oBAAoB,CAAC,GAAG,eAAe,OAAO,CAAC;AAErD,UAAM,gBAA+C,CAAC;AAEtD,UAAM,eAA8C,CAAC;AAErD,QAAI,aAAc,eAAc,KAAK,8BAAe;AACpD,QAAI,iBAAiB,CAAC,mBAAmB;AACvC,UAAI,aAAc,eAAc,KAAK,iCAA4D;AAAA,UAC5F,eAAc,KAAK,gCAA2D;AAAA,IACrF;AACA,QAAI,gBAAiB,eAAc,KAAK,+BAA0D;AAClG,QAAI,iBAAkB,cAAa,SAAK,6BAAa,gBAAgB,CAAC;AAGtE,kBAAc,QAAQ,CAAC,QAAQ;AAC7B,UAAI,CAAC,yBAAyB,mBAAmB,GAAG,EAAG,mBAAkB,QAAQ,GAAG;AAAA,IACtF,CAAC;AACD,iBAAa,QAAQ,CAAC,QAAQ;AAC5B,UAAI,CAAC,yBAAyB,mBAAmB,GAAG,EAAG,mBAAkB,KAAK,GAAG;AAAA,IACnF,CAAC;AAED,WAAO,kBACJ,OAAO,CAAC,QAAQ,IAAI,aAAa,UAAa,CAAC,gBAAgB,IAAI,UAAU,IAAI,SAAS,aAAa,CAAC,EACxG,IAAI,CAAC,QAAQ;AACZ,UAAI,IAAI,SAAS;AACf,YAAI,UAAU,IAAI,QAAQ;AAAA,UACxB,CAAC,WAAgC,OAAO,aAAa,UAAa,CAAC,eAAe,SAAS,OAAO,QAAQ;AAAA,QAC5G;AAAA,MACF;AACA,aAAO;AAAA,IACT,CAAC;AAAA,EACL,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAIA,MAAM,kBAAkB,CACtB,gBACA,SACA,kBACG;AACH,MAAI,CAAC,QAAS,QAAO,cAAc,SAAS,cAAc;AAC1D,MAAI,cAAc,SAAS,cAAc,EAAG,QAAO;AACnD,SAAO,QAAQ,MAAM,CAAC,QAAQ,cAAc,SAAS,IAAI,YAAY,IAAI,EAAG,CAAC;AAC/E;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -46,7 +46,9 @@ var import_styled = require("../../styled.js");
|
|
|
46
46
|
const DetailsWrapper = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
47
47
|
"div",
|
|
48
48
|
{
|
|
49
|
+
id: `${props.row.uid}-detail-view-container`,
|
|
49
50
|
"data-role": "detail-view",
|
|
51
|
+
role: "region",
|
|
50
52
|
style: {
|
|
51
53
|
borderTop: "1px solid #EBEDF0",
|
|
52
54
|
borderBottom: "1px solid #EBEDF0"
|
|
@@ -114,10 +116,12 @@ const DefaultRowContentRenderer = (props) => {
|
|
|
114
116
|
expandable: isExpandable,
|
|
115
117
|
expanded: expandedRows[row.uid] === true
|
|
116
118
|
};
|
|
119
|
+
const isDetailShown = !isDragOverlay && isExpandable && row.isExpanded;
|
|
117
120
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
118
121
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
119
122
|
import_styled.StyledCellContainer,
|
|
120
123
|
{
|
|
124
|
+
id: `${row.uid}-row`,
|
|
121
125
|
innerRef: rowRef,
|
|
122
126
|
tabIndex: 0,
|
|
123
127
|
role: "row",
|
|
@@ -151,7 +155,7 @@ const DefaultRowContentRenderer = (props) => {
|
|
|
151
155
|
},
|
|
152
156
|
row.uid
|
|
153
157
|
),
|
|
154
|
-
|
|
158
|
+
isDetailShown && DetailsView ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DetailsWrapper, { row, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DetailsView, { row, detailsIndent }) }) : null
|
|
155
159
|
] });
|
|
156
160
|
};
|
|
157
161
|
//# sourceMappingURL=DefaultRowContentRenderer.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/exported-related/RowRenderer/DefaultRowContentRenderer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useMemo, useLayoutEffect, useRef, type PropsWithChildren, useCallback } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';\nimport { DATA_TESTID, DropIndicatorPosition } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { Cells } from '../../parts/Cells/index.js';\nimport type { RowVariantProps } from '../../parts/RowVariants/types.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { StyledCellContainer } from '../../styled.js';\n\nconst DetailsWrapper: React.ComponentType<PropsWithChildren> = (props) => (\n // This can be further customized\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n data-role=\"detail-view\"\n style={{\n borderTop: '1px solid #EBEDF0',\n borderBottom: '1px solid #EBEDF0',\n }}\n onClick={(e) => e.stopPropagation()}\n onKeyDown={(e) => e.stopPropagation()}\n >\n {props.children}\n </div>\n);\n\nconst getDefaultAriaLabelMessageForRow = ({\n row,\n selected,\n disabled,\n expanded,\n expandable,\n}: {\n row: DSDataTableT.InternalRow;\n selected: boolean;\n disabled: boolean;\n expanded: boolean;\n expandable: boolean;\n}) =>\n `Row number ${row.realIndex + 1}${row.parentIndex !== null ? `, child of row number ${row.parentIndex + 1}` : ''}. ${\n selected ? 'Selected. ' : ''\n }${disabled ? 'Disabled. ' : 'To interact with the cells press enter. '}${\n // eslint-disable-next-line no-nested-ternary\n expandable ? (expanded ? 'Expanded. ' : 'Collapsed. ') : ''\n }`;\n\nexport const DefaultRowContentRenderer: React.ComponentType<RowVariantProps> = (props) => {\n const {\n row,\n draggableProps,\n isDragOverlay,\n backgroundColor = 'neutral-000',\n dropIndicatorPosition,\n isDropValid,\n focusedRowId,\n drilldownRowId,\n compact,\n } = props;\n\n const isExpandable = usePropsStore((state) => state.isExpandable);\n const selection = usePropsStore((state) => state.selection);\n const noSelectionColumn = usePropsStore((state) => state.noSelectionColumn);\n const expandedRows = usePropsStore((state) => state.expandedRows);\n const disabledRows = usePropsStore((state) => state.disabledRows);\n const getAriaLabelForRow = usePropsStore((state) => state.getAriaLabelForRow);\n const visibleColumns = usePropsStore((state) => state.visibleColumns);\n const domIdAffix = usePropsStore((state) => state.domIdAffix);\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(() => row, [row]);\n const rowRef = useRef<HTMLDivElement>(null);\n const isDndActive = draggableProps && draggableProps.active;\n const isDragging = draggableProps && draggableProps.isDragging;\n\n useLayoutEffect(() => {\n if (row.uid === focusedRowId) {\n rowRef.current?.focus();\n }\n }, [focusedRowId, row.uid]);\n\n const detailsIndent = useMemo(() => {\n let padding = 0;\n for (let i = 0; i < visibleColumns.length; i += 1) {\n if (INTERNAL_COLUMNS.includes(visibleColumns[i].id)) {\n padding += visibleColumns[i].width as number;\n } else {\n padding += row.depth * 32 + 15;\n break;\n }\n }\n return padding;\n }, [row.depth, visibleColumns]);\n\n const DetailsView = row.original.tableRowDetails;\n\n const rowAriaLabelProps = {\n row,\n selected: selection?.[row.uid] === true,\n disabled: disabledRows[row.uid],\n expandable: isExpandable,\n expanded: expandedRows[row.uid] === true,\n };\n\n return (\n <>\n <StyledCellContainer\n innerRef={rowRef}\n key={row.uid}\n tabIndex={0}\n role=\"row\"\n aria-rowindex={row.realIndex + 1}\n aria-label={(getAriaLabelForRow ?? getDefaultAriaLabelMessageForRow)(rowAriaLabelProps)}\n aria-selected={selection?.[row.uid] === true}\n aria-disabled={disabledRows[row.uid]}\n backgroundColor={backgroundColor}\n height={compact ? '24px' : 'auto'}\n minHeight={compact ? '24px' : '36px'}\n isDropIndicatorPositionInside={dropIndicatorPosition === DropIndicatorPosition.Inside}\n isDropValid={isDropValid}\n shouldDisplayHover={!isDndActive && !isDragging && !isDragOverlay}\n isDragOverlay={isDragOverlay}\n isDragging={isDragging}\n selected={noSelectionColumn && selection?.[row.uid] === true}\n isDisabled={disabledRows[row.uid]}\n data-testid={DATA_TESTID.DATA_TABLE_ROW_CONTENT}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <Cells\n row={row}\n isRowSelected={drilldownRowId === row.uid}\n isDragOverlay={isDragOverlay}\n key={row.uid}\n // @ts-expect-error - data-table typescript is broken\n domIdAffix={domIdAffix}\n />\n </StyledCellContainer>\n {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\n/* eslint-disable complexity */\nimport React, { useMemo, useLayoutEffect, useRef, type PropsWithChildren, useCallback } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';\nimport { DATA_TESTID, DropIndicatorPosition } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { Cells } from '../../parts/Cells/index.js';\nimport type { RowVariantProps } from '../../parts/RowVariants/types.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { StyledCellContainer } from '../../styled.js';\n\nconst DetailsWrapper: React.ComponentType<PropsWithChildren & { row: DSDataTableT.InternalRow }> = (props) => (\n // This can be further customized\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n id={`${props.row.uid}-detail-view-container`}\n data-role=\"detail-view\"\n role=\"region\"\n style={{\n borderTop: '1px solid #EBEDF0',\n borderBottom: '1px solid #EBEDF0',\n }}\n onClick={(e) => e.stopPropagation()}\n onKeyDown={(e) => e.stopPropagation()}\n >\n {props.children}\n </div>\n);\n\nconst getDefaultAriaLabelMessageForRow = ({\n row,\n selected,\n disabled,\n expanded,\n expandable,\n}: {\n row: DSDataTableT.InternalRow;\n selected: boolean;\n disabled: boolean;\n expanded: boolean;\n expandable: boolean;\n}) =>\n `Row number ${row.realIndex + 1}${row.parentIndex !== null ? `, child of row number ${row.parentIndex + 1}` : ''}. ${\n selected ? 'Selected. ' : ''\n }${disabled ? 'Disabled. ' : 'To interact with the cells press enter. '}${\n // eslint-disable-next-line no-nested-ternary\n expandable ? (expanded ? 'Expanded. ' : 'Collapsed. ') : ''\n }`;\n\nexport const DefaultRowContentRenderer: React.ComponentType<RowVariantProps> = (props) => {\n const {\n row,\n draggableProps,\n isDragOverlay,\n backgroundColor = 'neutral-000',\n dropIndicatorPosition,\n isDropValid,\n focusedRowId,\n drilldownRowId,\n compact,\n } = props;\n\n const isExpandable = usePropsStore((state) => state.isExpandable);\n const selection = usePropsStore((state) => state.selection);\n const noSelectionColumn = usePropsStore((state) => state.noSelectionColumn);\n const expandedRows = usePropsStore((state) => state.expandedRows);\n const disabledRows = usePropsStore((state) => state.disabledRows);\n const getAriaLabelForRow = usePropsStore((state) => state.getAriaLabelForRow);\n const visibleColumns = usePropsStore((state) => state.visibleColumns);\n const domIdAffix = usePropsStore((state) => state.domIdAffix);\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(() => row, [row]);\n const rowRef = useRef<HTMLDivElement>(null);\n const isDndActive = draggableProps && draggableProps.active;\n const isDragging = draggableProps && draggableProps.isDragging;\n\n useLayoutEffect(() => {\n if (row.uid === focusedRowId) {\n rowRef.current?.focus();\n }\n }, [focusedRowId, row.uid]);\n\n const detailsIndent = useMemo(() => {\n let padding = 0;\n for (let i = 0; i < visibleColumns.length; i += 1) {\n if (INTERNAL_COLUMNS.includes(visibleColumns[i].id)) {\n padding += visibleColumns[i].width as number;\n } else {\n padding += row.depth * 32 + 15;\n break;\n }\n }\n return padding;\n }, [row.depth, visibleColumns]);\n\n const DetailsView = row.original.tableRowDetails;\n\n const rowAriaLabelProps = {\n row,\n selected: selection?.[row.uid] === true,\n disabled: disabledRows[row.uid],\n expandable: isExpandable,\n expanded: expandedRows[row.uid] === true,\n };\n\n const isDetailShown = !isDragOverlay && isExpandable && row.isExpanded;\n\n return (\n <>\n <StyledCellContainer\n id={`${row.uid}-row`}\n innerRef={rowRef}\n key={row.uid}\n tabIndex={0}\n role=\"row\"\n aria-rowindex={row.realIndex + 1}\n aria-label={(getAriaLabelForRow ?? getDefaultAriaLabelMessageForRow)(rowAriaLabelProps)}\n aria-selected={selection?.[row.uid] === true}\n aria-disabled={disabledRows[row.uid]}\n backgroundColor={backgroundColor}\n height={compact ? '24px' : 'auto'}\n minHeight={compact ? '24px' : '36px'}\n isDropIndicatorPositionInside={dropIndicatorPosition === DropIndicatorPosition.Inside}\n isDropValid={isDropValid}\n shouldDisplayHover={!isDndActive && !isDragging && !isDragOverlay}\n isDragOverlay={isDragOverlay}\n isDragging={isDragging}\n selected={noSelectionColumn && selection?.[row.uid] === true}\n isDisabled={disabledRows[row.uid]}\n data-testid={DATA_TESTID.DATA_TABLE_ROW_CONTENT}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <Cells\n row={row}\n isRowSelected={drilldownRowId === row.uid}\n isDragOverlay={isDragOverlay}\n key={row.uid}\n // @ts-expect-error - data-table typescript is broken\n domIdAffix={domIdAffix}\n />\n </StyledCellContainer>\n {isDetailShown && DetailsView ? (\n <DetailsWrapper row={row}>\n <DetailsView row={row} detailsIndent={detailsIndent} />\n </DetailsWrapper>\n ) : null}\n </>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,6 +34,7 @@ module.exports = __toCommonJS(useRowRendererHandlers_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_react = require("react");
|
|
36
36
|
var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
|
|
37
|
+
var import_multipleSelectRow = require("../../helpers/multipleSelectRow.js");
|
|
37
38
|
const useRowRendererHandlers = ({
|
|
38
39
|
row,
|
|
39
40
|
itemIndex,
|
|
@@ -67,16 +68,19 @@ const useRowRendererHandlers = ({
|
|
|
67
68
|
if (selectSingle) {
|
|
68
69
|
onSelectionChange({ [uid]: true }, uid, e);
|
|
69
70
|
} else {
|
|
70
|
-
const
|
|
71
|
+
const newState = !selection[uid];
|
|
72
|
+
let newSelection = { ...selection, [uid]: newState };
|
|
71
73
|
if (!newSelection[uid]) delete newSelection[uid];
|
|
72
|
-
const now =
|
|
74
|
+
const now = row.realIndex;
|
|
73
75
|
if (e.shiftKey && lastSelected.current > -1) {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
76
|
+
newSelection = (0, import_multipleSelectRow.updateRangeSelection)(
|
|
77
|
+
newSelection,
|
|
78
|
+
lastSelected.current,
|
|
79
|
+
now,
|
|
80
|
+
flattenedData,
|
|
81
|
+
disabledRows,
|
|
82
|
+
newState
|
|
83
|
+
);
|
|
80
84
|
}
|
|
81
85
|
lastSelected.current = now;
|
|
82
86
|
onSelectionChange(newSelection, uid, e);
|