@elliemae/ds-data-table 3.5.0-rc.3 → 3.5.0-rc.4
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 +4 -2
- package/dist/cjs/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js.map +2 -2
- package/dist/cjs/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js +5 -1
- package/dist/cjs/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js.map +2 -2
- package/dist/cjs/exported-related/RowRenderer/useRowRendererHandlers.js +5 -2
- package/dist/cjs/exported-related/RowRenderer/useRowRendererHandlers.js.map +2 -2
- package/dist/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js +4 -2
- package/dist/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js.map +2 -2
- package/dist/esm/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js +5 -1
- package/dist/esm/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js.map +2 -2
- package/dist/esm/exported-related/RowRenderer/useRowRendererHandlers.js +5 -2
- package/dist/esm/exported-related/RowRenderer/useRowRendererHandlers.js.map +2 -2
- package/package.json +18 -18
|
@@ -76,7 +76,8 @@ const multiSelectColumn = {
|
|
|
76
76
|
}, [onSelectionChange, selectedState, selection, uid]);
|
|
77
77
|
return /* @__PURE__ */ import_react.default.createElement("div", {
|
|
78
78
|
role: "presentation",
|
|
79
|
-
onClick: stopThePropagation
|
|
79
|
+
onClick: stopThePropagation,
|
|
80
|
+
onKeyDown: stopThePropagation
|
|
80
81
|
}, /* @__PURE__ */ import_react.default.createElement(import_ds_controlled_form.DSControlledCheckbox, {
|
|
81
82
|
id: `data-table-checkbox-${uid}`,
|
|
82
83
|
"data-testid": import_constants.DATA_TESTID.DATA_TABLE_CHECKBOX,
|
|
@@ -84,7 +85,8 @@ const multiSelectColumn = {
|
|
|
84
85
|
"aria-checked": selectedState,
|
|
85
86
|
"aria-disabled": false,
|
|
86
87
|
checked: selectedState,
|
|
87
|
-
|
|
88
|
+
onClick: onChangeHandler,
|
|
89
|
+
onChange: stopThePropagation,
|
|
88
90
|
disabled: disabledRows[row.uid],
|
|
89
91
|
innerRef: cell.ref,
|
|
90
92
|
tabIndex: isRowSelected ? 0 : -1,
|
|
@@ -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": ["import React, { useMemo, useCallback } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-controlled-form';\nimport { TypescriptColumn, TypescriptSelection } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nconst stopThePropagation = (e: React.MouseEvent) => e.stopPropagation();\n\nexport const multiSelectColumn: TypescriptColumn<HTMLInputElement> = {\n // Build our multiSelecter column\n id: 'multiSelecter', // Make sure it has an ID\n Header: ({ ctx }) => {\n const {\n tableProps: { onSelectionChange, selection, data, disabledRows },\n allDataFlattened,\n } = ctx;\n\n // We for sure have selection, so we just typecast it for TS reasons\n const dtSelection = selection ?? {};\n\n const selectionKeyCount = Object.keys(dtSelection).length;\n\n const currentGlobalState = useMemo(\n () => (selectionKeyCount > 0 && selectionKeyCount < data.length ? 'mixed' : selectionKeyCount > 0),\n [selectionKeyCount, data],\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: TypescriptSelection = useMemo(() => {\n if (!newGlobalStateAfterToggle) return {};\n\n return allDataFlattened.reduce<TypescriptSelection>((newSelectionObject, datum) => {\n newSelectionObject[datum.uid] = !disabledRows[datum.uid];\n return newSelectionObject;\n }, {});\n }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);\n\n const onChangeHandler = useCallback(\n (e: React.ChangeEvent) => {\n onSelectionChange(newSelection, 'All', e);\n },\n [newSelection, onSelectionChange],\n );\n\n const ariaControls = useMemo(\n () => allDataFlattened.map((datum) => `data-table-checkbox-${datum.uid}`).join(' '),\n [allDataFlattened],\n );\n\n return (\n <DSControlledCheckbox\n aria-controls={ariaControls}\n data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX}\n aria-label=\"Toggle all rows selected\"\n checked={currentGlobalState}\n onChange={onChangeHandler}\n style={{ cursor: 'pointer' }}\n />\n );\n },\n Cell: ({ cell, row, isRowSelected, ctx }) => {\n const {\n tableProps: { onSelectionChange, selection, disabledRows },\n } = ctx;\n const { uid } = row;\n const selectedState = selection?.[uid] ?? false;\n\n const onChangeHandler = useCallback(\n (e: React.ChangeEvent) => {\n const newState = !selectedState;\n const 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 onSelectionChange(newSelection, uid, e);\n },\n [onSelectionChange, selectedState, selection, uid],\n );\n\n return (\n <div role=\"presentation\" onClick={stopThePropagation}>\n <DSControlledCheckbox\n id={`data-table-checkbox-${uid}`}\n data-testid={DATA_TESTID.DATA_TABLE_CHECKBOX}\n aria-label=\"Toggle row selected\"\n aria-checked={selectedState}\n aria-disabled={false}\n checked={selectedState}\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA4C;AAC5C,gCAAqC;AAErC,uBAA4B;AAE5B,MAAM,qBAAqB,CAAC,
|
|
4
|
+
"sourcesContent": ["import React, { useMemo, useCallback } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-controlled-form';\nimport { TypescriptColumn, TypescriptSelection } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nconst stopThePropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\n\nexport const multiSelectColumn: TypescriptColumn<HTMLInputElement> = {\n // Build our multiSelecter column\n id: 'multiSelecter', // Make sure it has an ID\n Header: ({ ctx }) => {\n const {\n tableProps: { onSelectionChange, selection, data, disabledRows },\n allDataFlattened,\n } = ctx;\n\n // We for sure have selection, so we just typecast it for TS reasons\n const dtSelection = selection ?? {};\n\n const selectionKeyCount = Object.keys(dtSelection).length;\n\n const currentGlobalState = useMemo(\n () => (selectionKeyCount > 0 && selectionKeyCount < data.length ? 'mixed' : selectionKeyCount > 0),\n [selectionKeyCount, data],\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: TypescriptSelection = useMemo(() => {\n if (!newGlobalStateAfterToggle) return {};\n\n return allDataFlattened.reduce<TypescriptSelection>((newSelectionObject, datum) => {\n newSelectionObject[datum.uid] = !disabledRows[datum.uid];\n return newSelectionObject;\n }, {});\n }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);\n\n const onChangeHandler = useCallback(\n (e: React.ChangeEvent) => {\n onSelectionChange(newSelection, 'All', e);\n },\n [newSelection, onSelectionChange],\n );\n\n const ariaControls = useMemo(\n () => allDataFlattened.map((datum) => `data-table-checkbox-${datum.uid}`).join(' '),\n [allDataFlattened],\n );\n\n return (\n <DSControlledCheckbox\n aria-controls={ariaControls}\n data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX}\n aria-label=\"Toggle all rows selected\"\n checked={currentGlobalState}\n onChange={onChangeHandler}\n style={{ cursor: 'pointer' }}\n />\n );\n },\n Cell: ({ cell, row, isRowSelected, ctx }) => {\n const {\n tableProps: { onSelectionChange, selection, disabledRows },\n } = ctx;\n const { uid } = row;\n const selectedState = selection?.[uid] ?? false;\n\n const onChangeHandler = useCallback(\n (e: React.ChangeEvent) => {\n const newState = !selectedState;\n const 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 onSelectionChange(newSelection, uid, e);\n },\n [onSelectionChange, selectedState, selection, uid],\n );\n\n return (\n <div role=\"presentation\" onClick={stopThePropagation} onKeyDown={stopThePropagation}>\n <DSControlledCheckbox\n id={`data-table-checkbox-${uid}`}\n data-testid={DATA_TESTID.DATA_TABLE_CHECKBOX}\n aria-label=\"Toggle row selected\"\n aria-checked={selectedState}\n aria-disabled={false}\n checked={selectedState}\n onClick={onChangeHandler}\n onChange={stopThePropagation}\n disabled={disabledRows[row.uid]}\n innerRef={cell.ref}\n tabIndex={isRowSelected ? 0 : -1}\n style={{ cursor: 'pointer' }}\n />\n </div>\n );\n },\n textWrap: 'wrap',\n width: 32,\n padding: 7,\n canResize: false,\n isFocuseable: false,\n disableDnD: true,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA4C;AAC5C,gCAAqC;AAErC,uBAA4B;AAE5B,MAAM,qBAAqB,CAAC,MAA8C,EAAE,gBAAgB;AAErF,MAAM,oBAAwD;AAAA,EAEnE,IAAI;AAAA,EACJ,QAAQ,CAAC,EAAE,UAAU;AACnB,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW,MAAM;AAAA,MAClD;AAAA,QACE;AAGJ,UAAM,cAAc,aAAa,CAAC;AAElC,UAAM,oBAAoB,OAAO,KAAK,WAAW,EAAE;AAEnD,UAAM,qBAAqB,0BACzB,MAAO,oBAAoB,KAAK,oBAAoB,KAAK,SAAS,UAAU,oBAAoB,GAChG,CAAC,mBAAmB,IAAI,CAC1B;AAGA,UAAM,4BAA4B,0BAAQ,MAAM,uBAAuB,MAAM,CAAC,kBAAkB,CAAC;AAEjG,UAAM,eAAoC,0BAAQ,MAAM;AACtD,UAAI,CAAC;AAA2B,eAAO,CAAC;AAExC,aAAO,iBAAiB,OAA4B,CAAC,oBAAoB,UAAU;AACjF,2BAAmB,MAAM,OAAO,CAAC,aAAa,MAAM;AACpD,eAAO;AAAA,MACT,GAAG,CAAC,CAAC;AAAA,IACP,GAAG,CAAC,2BAA2B,kBAAkB,YAAY,CAAC;AAE9D,UAAM,kBAAkB,8BACtB,CAAC,MAAyB;AACxB,wBAAkB,cAAc,OAAO,CAAC;AAAA,IAC1C,GACA,CAAC,cAAc,iBAAiB,CAClC;AAEA,UAAM,eAAe,0BACnB,MAAM,iBAAiB,IAAI,CAAC,UAAU,uBAAuB,MAAM,KAAK,EAAE,KAAK,GAAG,GAClF,CAAC,gBAAgB,CACnB;AAEA,WACE,mDAAC;AAAA,MACC,iBAAe;AAAA,MACf,eAAa,6BAAY;AAAA,MACzB,cAAW;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO,EAAE,QAAQ,UAAU;AAAA,KAC7B;AAAA,EAEJ;AAAA,EACA,MAAM,CAAC,EAAE,MAAM,KAAK,eAAe,UAAU;AAC3C,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW;AAAA,QAC1C;AACJ,UAAM,EAAE,QAAQ;AAChB,UAAM,gBAAgB,YAAY,QAAQ;AAE1C,UAAM,kBAAkB,8BACtB,CAAC,MAAyB;AACxB,YAAM,WAAW,CAAC;AAClB,YAAM,eAAe,EAAE,GAAG,WAAW,CAAC,MAAM,SAAS;AACrD,UAAI,CAAC;AAAU,eAAO,aAAa;AACnC,wBAAkB,cAAc,KAAK,CAAC;AAAA,IACxC,GACA,CAAC,mBAAmB,eAAe,WAAW,GAAG,CACnD;AAEA,WACE,mDAAC;AAAA,MAAI,MAAK;AAAA,MAAe,SAAS;AAAA,MAAoB,WAAW;AAAA,OAC/D,mDAAC;AAAA,MACC,IAAI,uBAAuB;AAAA,MAC3B,eAAa,6BAAY;AAAA,MACzB,cAAW;AAAA,MACX,gBAAc;AAAA,MACd,iBAAe;AAAA,MACf,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU,aAAa,IAAI;AAAA,MAC3B,UAAU,KAAK;AAAA,MACf,UAAU,gBAAgB,IAAI;AAAA,MAC9B,OAAO,EAAE,QAAQ,UAAU;AAAA,KAC7B,CACF;AAAA,EAEJ;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AACd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -36,6 +36,7 @@ const CenteredContent = import_ds_system.styled.div`
|
|
|
36
36
|
justify-content: center;
|
|
37
37
|
align-items: center;
|
|
38
38
|
`;
|
|
39
|
+
const stopThePropagation = (e) => e.stopPropagation();
|
|
39
40
|
const singleSelectColumn = {
|
|
40
41
|
id: "singleSelecter",
|
|
41
42
|
Header: () => /* @__PURE__ */ import_react.default.createElement("div", null),
|
|
@@ -48,7 +49,10 @@ const singleSelectColumn = {
|
|
|
48
49
|
const onChangeHandler = (0, import_react.useCallback)((newValue, e) => {
|
|
49
50
|
onSelectionChange({ [uid]: !selectedState }, uid, e);
|
|
50
51
|
}, [onSelectionChange, selectedState, uid]);
|
|
51
|
-
return /* @__PURE__ */ import_react.default.createElement(CenteredContent,
|
|
52
|
+
return /* @__PURE__ */ import_react.default.createElement(CenteredContent, {
|
|
53
|
+
onClick: stopThePropagation,
|
|
54
|
+
onKeyDown: stopThePropagation
|
|
55
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_ds_controlled_form.DSControlledRadio, {
|
|
52
56
|
"aria-checked": selectedState,
|
|
53
57
|
"aria-disabled": disabledRows[row.uid],
|
|
54
58
|
title: "Toggle row selected",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback } from 'react';\nimport { DSControlledRadio } from '@elliemae/ds-controlled-form';\nimport { styled } from '@elliemae/ds-system';\nimport { TypescriptColumn } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nconst CenteredContent = styled.div`\n display: flex;\n height: 100%;\n width: 100%;\n justify-content: center;\n align-items: center;\n`;\n\nexport const singleSelectColumn: TypescriptColumn<HTMLInputElement> = {\n // Build our singleSelecter column\n id: 'singleSelecter', // Make sure it has an ID\n // The header doesn't need anything for single selection\n Header: () => <div />,\n Cell: ({ cell, row, isRowSelected, ctx }) => {\n const {\n tableProps: { onSelectionChange, selection, disabledRows },\n } = ctx;\n const { uid } = row;\n const selectedState = !!selection?.[uid];\n\n const onChangeHandler = useCallback(\n (newValue: string, e: React.ChangeEvent) => {\n // in single select we only allow one item to be selected\n onSelectionChange({ [uid]: !selectedState }, uid, e);\n },\n [onSelectionChange, selectedState, uid],\n );\n\n return (\n <CenteredContent>\n <DSControlledRadio\n aria-checked={selectedState}\n aria-disabled={disabledRows[row.uid]}\n title=\"Toggle row selected\"\n aria-label=\"Toggle row selected\"\n checked={selectedState}\n onChange={onChangeHandler}\n data-testid={DATA_TESTID.DATA_TABLE_RADIO}\n disabled={disabledRows[row.uid]}\n innerRef={cell.ref}\n value={uid}\n tabIndex={isRowSelected ? 0 : -1}\n />\n </CenteredContent>\n );\n },\n textWrap: 'wrap',\n width: 32,\n padding: 4,\n canResize: false,\n isFocuseable: false,\n disableDnD: true,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAmC;AACnC,gCAAkC;AAClC,uBAAuB;AAEvB,uBAA4B;AAE5B,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import React, { useCallback } from 'react';\nimport { DSControlledRadio } from '@elliemae/ds-controlled-form';\nimport { styled } from '@elliemae/ds-system';\nimport { TypescriptColumn } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nconst CenteredContent = styled.div`\n display: flex;\n height: 100%;\n width: 100%;\n justify-content: center;\n align-items: center;\n`;\n\nconst stopThePropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\n\nexport const singleSelectColumn: TypescriptColumn<HTMLInputElement> = {\n // Build our singleSelecter column\n id: 'singleSelecter', // Make sure it has an ID\n // The header doesn't need anything for single selection\n Header: () => <div />,\n Cell: ({ cell, row, isRowSelected, ctx }) => {\n const {\n tableProps: { onSelectionChange, selection, disabledRows },\n } = ctx;\n const { uid } = row;\n const selectedState = !!selection?.[uid];\n\n const onChangeHandler = useCallback(\n (newValue: string, e: React.ChangeEvent) => {\n // in single select we only allow one item to be selected\n onSelectionChange({ [uid]: !selectedState }, uid, e);\n },\n [onSelectionChange, selectedState, uid],\n );\n\n return (\n <CenteredContent onClick={stopThePropagation} onKeyDown={stopThePropagation}>\n <DSControlledRadio\n aria-checked={selectedState}\n aria-disabled={disabledRows[row.uid]}\n title=\"Toggle row selected\"\n aria-label=\"Toggle row selected\"\n checked={selectedState}\n onChange={onChangeHandler}\n data-testid={DATA_TESTID.DATA_TABLE_RADIO}\n disabled={disabledRows[row.uid]}\n innerRef={cell.ref}\n value={uid}\n tabIndex={isRowSelected ? 0 : -1}\n />\n </CenteredContent>\n );\n },\n textWrap: 'wrap',\n width: 32,\n padding: 4,\n canResize: false,\n isFocuseable: false,\n disableDnD: true,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAmC;AACnC,gCAAkC;AAClC,uBAAuB;AAEvB,uBAA4B;AAE5B,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ/B,MAAM,qBAAqB,CAAC,MAA8C,EAAE,gBAAgB;AAErF,MAAM,qBAAyD;AAAA,EAEpE,IAAI;AAAA,EAEJ,QAAQ,MAAM,mDAAC,WAAI;AAAA,EACnB,MAAM,CAAC,EAAE,MAAM,KAAK,eAAe,UAAU;AAC3C,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW;AAAA,QAC1C;AACJ,UAAM,EAAE,QAAQ;AAChB,UAAM,gBAAgB,CAAC,CAAC,YAAY;AAEpC,UAAM,kBAAkB,8BACtB,CAAC,UAAkB,MAAyB;AAE1C,wBAAkB,EAAE,CAAC,MAAM,CAAC,cAAc,GAAG,KAAK,CAAC;AAAA,IACrD,GACA,CAAC,mBAAmB,eAAe,GAAG,CACxC;AAEA,WACE,mDAAC;AAAA,MAAgB,SAAS;AAAA,MAAoB,WAAW;AAAA,OACvD,mDAAC;AAAA,MACC,gBAAc;AAAA,MACd,iBAAe,aAAa,IAAI;AAAA,MAChC,OAAM;AAAA,MACN,cAAW;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,eAAa,6BAAY;AAAA,MACzB,UAAU,aAAa,IAAI;AAAA,MAC3B,UAAU,KAAK;AAAA,MACf,OAAO;AAAA,MACP,UAAU,gBAAgB,IAAI;AAAA,KAChC,CACF;AAAA,EAEJ;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AACd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -37,7 +37,7 @@ const useRowRendererHandlers = ({
|
|
|
37
37
|
drilldownRowId
|
|
38
38
|
}) => {
|
|
39
39
|
const {
|
|
40
|
-
tableProps: { onRowClick, onRowFocus, disabledRows },
|
|
40
|
+
tableProps: { onRowClick, onSelectionChange, selectSingle, selection, onRowFocus, disabledRows },
|
|
41
41
|
virtualListHelpers: { scrollToIndex },
|
|
42
42
|
setDrilldownRowId,
|
|
43
43
|
setFocusedRowId
|
|
@@ -54,6 +54,9 @@ const useRowRendererHandlers = ({
|
|
|
54
54
|
if (disabledRows[uid])
|
|
55
55
|
return;
|
|
56
56
|
onRowClick(original, e, uid);
|
|
57
|
+
if (selection && onSelectionChange) {
|
|
58
|
+
onSelectionChange(selectSingle ? { [uid]: true } : { ...selection, [uid]: !selection[uid] }, uid, e);
|
|
59
|
+
}
|
|
57
60
|
onRowFocus({
|
|
58
61
|
itemIndex,
|
|
59
62
|
scrollToItem: (opts = {
|
|
@@ -61,7 +64,7 @@ const useRowRendererHandlers = ({
|
|
|
61
64
|
}) => scrollToIndex(itemIndex, opts),
|
|
62
65
|
original
|
|
63
66
|
}, e);
|
|
64
|
-
}, [row, disabledRows, onRowClick, onRowFocus, itemIndex, scrollToIndex]);
|
|
67
|
+
}, [row, disabledRows, onRowClick, selection, onSelectionChange, onRowFocus, itemIndex, selectSingle, scrollToIndex]);
|
|
65
68
|
const isActive = draggableProps && draggableProps.active;
|
|
66
69
|
const handleKeyDown = (0, import_react.useCallback)((e) => {
|
|
67
70
|
if (isDragOverlay || isActive) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/exported-related/RowRenderer/useRowRendererHandlers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { DataTableContext } from '../../DataTableContext';\nimport { SortableItemContextType } from '../../parts/HoC/SortableItemContext';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAA+C;AAC/C,uBAA4B;AAC5B,8BAAiC;AAI1B,MAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAaG;AACH,QAAM;AAAA,IACJ,YAAY,EAAE,YAAY,YAAY;AAAA,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { DataTableContext } from '../../DataTableContext';\nimport { SortableItemContextType } from '../../parts/HoC/SortableItemContext';\nimport { InternalTypescriptRow } from '../../types/props';\n\nexport const useRowRendererHandlers = ({\n row,\n itemIndex,\n items,\n draggableProps,\n isDragOverlay,\n drilldownRowId,\n}: {\n row: InternalTypescriptRow;\n itemIndex: number;\n items: InternalTypescriptRow[];\n draggableProps: SortableItemContextType['draggableProps'];\n isDragOverlay: boolean;\n drilldownRowId: string | null;\n}): {\n handleItemClick: React.MouseEventHandler;\n handleKeyDown: React.KeyboardEventHandler;\n handleOnBlur: React.FocusEventHandler;\n handleOnFocus: React.FocusEventHandler;\n} => {\n const {\n tableProps: { onRowClick, onSelectionChange, selectSingle, selection, onRowFocus, disabledRows },\n virtualListHelpers: { scrollToIndex },\n setDrilldownRowId,\n setFocusedRowId,\n } = useContext(DataTableContext);\n\n const isOptionFocuseable = (opt): boolean => !disabledRows[opt.uid];\n\n const findInCircularList = (\n list,\n from: number,\n criteria: (item) => boolean,\n step = 1,\n // eslint-disable-next-line max-params\n ): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from > -1;\n i = (i + step + list.length) % list.length\n ) {\n if (criteria(list[i])) return i;\n }\n return from; // return same item\n };\n\n const handleItemClick = useCallback(\n (e, { original, uid } = row) => {\n if (disabledRows[uid]) return;\n onRowClick(original, e, uid);\n if (selection && onSelectionChange) {\n onSelectionChange(selectSingle ? { [uid]: true } : { ...selection, [uid]: !selection[uid] }, uid, e);\n }\n onRowFocus(\n {\n itemIndex,\n scrollToItem: (\n opts: { align: 'auto' | 'start' | 'center' | 'end' } = {\n align: 'start',\n },\n ) => scrollToIndex(itemIndex, opts),\n original,\n },\n e,\n );\n },\n [row, disabledRows, onRowClick, selection, onSelectionChange, onRowFocus, itemIndex, selectSingle, scrollToIndex],\n );\n\n const isActive = draggableProps && draggableProps.active;\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (isDragOverlay || isActive) {\n e.preventDefault();\n return;\n }\n const { target } = e;\n const isChildEvent = (target as HTMLElement).getAttribute('role') !== 'row'; // if the event comes from a row\n\n if (e.code === 'Enter') {\n if (!isChildEvent) {\n e.preventDefault();\n if (drilldownRowId !== row.uid) {\n setDrilldownRowId(row.uid);\n setTimeout(() => {\n const focuseableCell = row.cells.find((cell) => cell.ref.current !== null);\n if (focuseableCell) focuseableCell.ref.current.focus();\n });\n }\n }\n }\n if (e.code === 'Space') {\n if (!isChildEvent) {\n e.preventDefault();\n }\n handleItemClick(e, row);\n }\n if (e.code === 'ArrowDown') {\n e.preventDefault();\n e.stopPropagation();\n const next = findInCircularList(items, itemIndex, isOptionFocuseable);\n setFocusedRowId(items[next].uid);\n }\n if (e.code === 'ArrowUp') {\n e.preventDefault();\n const prev = findInCircularList(items, itemIndex, isOptionFocuseable, -1);\n setFocusedRowId(items[prev].uid);\n }\n },\n [\n isDragOverlay,\n isActive,\n drilldownRowId,\n row,\n setDrilldownRowId,\n handleItemClick,\n items,\n itemIndex,\n isOptionFocuseable,\n setFocusedRowId,\n ],\n );\n\n const handleOnBlur = useCallback(\n (e) => {\n if (e.relatedTarget?.getAttribute('data-testid') === 'data-table-row-content') {\n setDrilldownRowId(null);\n }\n },\n [setDrilldownRowId],\n );\n\n const handleOnFocus: React.FocusEventHandler = useCallback(\n (e) => {\n if (\n !disabledRows[row.uid] &&\n e.target &&\n e.target.getAttribute('data-testid') === DATA_TESTID.DATA_TABLE_ROW_CONTENT\n ) {\n setFocusedRowId(row.uid);\n }\n },\n [row.uid, setFocusedRowId, disabledRows],\n );\n\n return { handleItemClick, handleKeyDown, handleOnBlur, handleOnFocus };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -50,7 +50,8 @@ const multiSelectColumn = {
|
|
|
50
50
|
}, [onSelectionChange, selectedState, selection, uid]);
|
|
51
51
|
return /* @__PURE__ */ React2.createElement("div", {
|
|
52
52
|
role: "presentation",
|
|
53
|
-
onClick: stopThePropagation
|
|
53
|
+
onClick: stopThePropagation,
|
|
54
|
+
onKeyDown: stopThePropagation
|
|
54
55
|
}, /* @__PURE__ */ React2.createElement(DSControlledCheckbox, {
|
|
55
56
|
id: `data-table-checkbox-${uid}`,
|
|
56
57
|
"data-testid": DATA_TESTID.DATA_TABLE_CHECKBOX,
|
|
@@ -58,7 +59,8 @@ const multiSelectColumn = {
|
|
|
58
59
|
"aria-checked": selectedState,
|
|
59
60
|
"aria-disabled": false,
|
|
60
61
|
checked: selectedState,
|
|
61
|
-
|
|
62
|
+
onClick: onChangeHandler,
|
|
63
|
+
onChange: stopThePropagation,
|
|
62
64
|
disabled: disabledRows[row.uid],
|
|
63
65
|
innerRef: cell.ref,
|
|
64
66
|
tabIndex: isRowSelected ? 0 : -1,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useCallback } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-controlled-form';\nimport { TypescriptColumn, TypescriptSelection } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nconst stopThePropagation = (e: React.MouseEvent) => e.stopPropagation();\n\nexport const multiSelectColumn: TypescriptColumn<HTMLInputElement> = {\n // Build our multiSelecter column\n id: 'multiSelecter', // Make sure it has an ID\n Header: ({ ctx }) => {\n const {\n tableProps: { onSelectionChange, selection, data, disabledRows },\n allDataFlattened,\n } = ctx;\n\n // We for sure have selection, so we just typecast it for TS reasons\n const dtSelection = selection ?? {};\n\n const selectionKeyCount = Object.keys(dtSelection).length;\n\n const currentGlobalState = useMemo(\n () => (selectionKeyCount > 0 && selectionKeyCount < data.length ? 'mixed' : selectionKeyCount > 0),\n [selectionKeyCount, data],\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: TypescriptSelection = useMemo(() => {\n if (!newGlobalStateAfterToggle) return {};\n\n return allDataFlattened.reduce<TypescriptSelection>((newSelectionObject, datum) => {\n newSelectionObject[datum.uid] = !disabledRows[datum.uid];\n return newSelectionObject;\n }, {});\n }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);\n\n const onChangeHandler = useCallback(\n (e: React.ChangeEvent) => {\n onSelectionChange(newSelection, 'All', e);\n },\n [newSelection, onSelectionChange],\n );\n\n const ariaControls = useMemo(\n () => allDataFlattened.map((datum) => `data-table-checkbox-${datum.uid}`).join(' '),\n [allDataFlattened],\n );\n\n return (\n <DSControlledCheckbox\n aria-controls={ariaControls}\n data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX}\n aria-label=\"Toggle all rows selected\"\n checked={currentGlobalState}\n onChange={onChangeHandler}\n style={{ cursor: 'pointer' }}\n />\n );\n },\n Cell: ({ cell, row, isRowSelected, ctx }) => {\n const {\n tableProps: { onSelectionChange, selection, disabledRows },\n } = ctx;\n const { uid } = row;\n const selectedState = selection?.[uid] ?? false;\n\n const onChangeHandler = useCallback(\n (e: React.ChangeEvent) => {\n const newState = !selectedState;\n const 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 onSelectionChange(newSelection, uid, e);\n },\n [onSelectionChange, selectedState, selection, uid],\n );\n\n return (\n <div role=\"presentation\" onClick={stopThePropagation}>\n <DSControlledCheckbox\n id={`data-table-checkbox-${uid}`}\n data-testid={DATA_TESTID.DATA_TABLE_CHECKBOX}\n aria-label=\"Toggle row selected\"\n aria-checked={selectedState}\n aria-disabled={false}\n checked={selectedState}\n
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AAEA;AAEA,MAAM,qBAAqB,CAAC,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useCallback } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-controlled-form';\nimport { TypescriptColumn, TypescriptSelection } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nconst stopThePropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\n\nexport const multiSelectColumn: TypescriptColumn<HTMLInputElement> = {\n // Build our multiSelecter column\n id: 'multiSelecter', // Make sure it has an ID\n Header: ({ ctx }) => {\n const {\n tableProps: { onSelectionChange, selection, data, disabledRows },\n allDataFlattened,\n } = ctx;\n\n // We for sure have selection, so we just typecast it for TS reasons\n const dtSelection = selection ?? {};\n\n const selectionKeyCount = Object.keys(dtSelection).length;\n\n const currentGlobalState = useMemo(\n () => (selectionKeyCount > 0 && selectionKeyCount < data.length ? 'mixed' : selectionKeyCount > 0),\n [selectionKeyCount, data],\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: TypescriptSelection = useMemo(() => {\n if (!newGlobalStateAfterToggle) return {};\n\n return allDataFlattened.reduce<TypescriptSelection>((newSelectionObject, datum) => {\n newSelectionObject[datum.uid] = !disabledRows[datum.uid];\n return newSelectionObject;\n }, {});\n }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);\n\n const onChangeHandler = useCallback(\n (e: React.ChangeEvent) => {\n onSelectionChange(newSelection, 'All', e);\n },\n [newSelection, onSelectionChange],\n );\n\n const ariaControls = useMemo(\n () => allDataFlattened.map((datum) => `data-table-checkbox-${datum.uid}`).join(' '),\n [allDataFlattened],\n );\n\n return (\n <DSControlledCheckbox\n aria-controls={ariaControls}\n data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX}\n aria-label=\"Toggle all rows selected\"\n checked={currentGlobalState}\n onChange={onChangeHandler}\n style={{ cursor: 'pointer' }}\n />\n );\n },\n Cell: ({ cell, row, isRowSelected, ctx }) => {\n const {\n tableProps: { onSelectionChange, selection, disabledRows },\n } = ctx;\n const { uid } = row;\n const selectedState = selection?.[uid] ?? false;\n\n const onChangeHandler = useCallback(\n (e: React.ChangeEvent) => {\n const newState = !selectedState;\n const 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 onSelectionChange(newSelection, uid, e);\n },\n [onSelectionChange, selectedState, selection, uid],\n );\n\n return (\n <div role=\"presentation\" onClick={stopThePropagation} onKeyDown={stopThePropagation}>\n <DSControlledCheckbox\n id={`data-table-checkbox-${uid}`}\n data-testid={DATA_TESTID.DATA_TABLE_CHECKBOX}\n aria-label=\"Toggle row selected\"\n aria-checked={selectedState}\n aria-disabled={false}\n checked={selectedState}\n onClick={onChangeHandler}\n onChange={stopThePropagation}\n disabled={disabledRows[row.uid]}\n innerRef={cell.ref}\n tabIndex={isRowSelected ? 0 : -1}\n style={{ cursor: 'pointer' }}\n />\n </div>\n );\n },\n textWrap: 'wrap',\n width: 32,\n padding: 7,\n canResize: false,\n isFocuseable: false,\n disableDnD: true,\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAEA;AAEA,MAAM,qBAAqB,CAAC,MAA8C,EAAE,gBAAgB;AAErF,MAAM,oBAAwD;AAAA,EAEnE,IAAI;AAAA,EACJ,QAAQ,CAAC,EAAE,UAAU;AACnB,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW,MAAM;AAAA,MAClD;AAAA,QACE;AAGJ,UAAM,cAAc,aAAa,CAAC;AAElC,UAAM,oBAAoB,OAAO,KAAK,WAAW,EAAE;AAEnD,UAAM,qBAAqB,QACzB,MAAO,oBAAoB,KAAK,oBAAoB,KAAK,SAAS,UAAU,oBAAoB,GAChG,CAAC,mBAAmB,IAAI,CAC1B;AAGA,UAAM,4BAA4B,QAAQ,MAAM,uBAAuB,MAAM,CAAC,kBAAkB,CAAC;AAEjG,UAAM,eAAoC,QAAQ,MAAM;AACtD,UAAI,CAAC;AAA2B,eAAO,CAAC;AAExC,aAAO,iBAAiB,OAA4B,CAAC,oBAAoB,UAAU;AACjF,2BAAmB,MAAM,OAAO,CAAC,aAAa,MAAM;AACpD,eAAO;AAAA,MACT,GAAG,CAAC,CAAC;AAAA,IACP,GAAG,CAAC,2BAA2B,kBAAkB,YAAY,CAAC;AAE9D,UAAM,kBAAkB,YACtB,CAAC,MAAyB;AACxB,wBAAkB,cAAc,OAAO,CAAC;AAAA,IAC1C,GACA,CAAC,cAAc,iBAAiB,CAClC;AAEA,UAAM,eAAe,QACnB,MAAM,iBAAiB,IAAI,CAAC,UAAU,uBAAuB,MAAM,KAAK,EAAE,KAAK,GAAG,GAClF,CAAC,gBAAgB,CACnB;AAEA,WACE,qCAAC;AAAA,MACC,iBAAe;AAAA,MACf,eAAa,YAAY;AAAA,MACzB,cAAW;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO,EAAE,QAAQ,UAAU;AAAA,KAC7B;AAAA,EAEJ;AAAA,EACA,MAAM,CAAC,EAAE,MAAM,KAAK,eAAe,UAAU;AAC3C,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW;AAAA,QAC1C;AACJ,UAAM,EAAE,QAAQ;AAChB,UAAM,gBAAgB,YAAY,QAAQ;AAE1C,UAAM,kBAAkB,YACtB,CAAC,MAAyB;AACxB,YAAM,WAAW,CAAC;AAClB,YAAM,eAAe,EAAE,GAAG,WAAW,CAAC,MAAM,SAAS;AACrD,UAAI,CAAC;AAAU,eAAO,aAAa;AACnC,wBAAkB,cAAc,KAAK,CAAC;AAAA,IACxC,GACA,CAAC,mBAAmB,eAAe,WAAW,GAAG,CACnD;AAEA,WACE,qCAAC;AAAA,MAAI,MAAK;AAAA,MAAe,SAAS;AAAA,MAAoB,WAAW;AAAA,OAC/D,qCAAC;AAAA,MACC,IAAI,uBAAuB;AAAA,MAC3B,eAAa,YAAY;AAAA,MACzB,cAAW;AAAA,MACX,gBAAc;AAAA,MACd,iBAAe;AAAA,MACf,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU,aAAa,IAAI;AAAA,MAC3B,UAAU,KAAK;AAAA,MACf,UAAU,gBAAgB,IAAI;AAAA,MAC9B,OAAO,EAAE,QAAQ,UAAU;AAAA,KAC7B,CACF;AAAA,EAEJ;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AACd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -10,6 +10,7 @@ const CenteredContent = styled.div`
|
|
|
10
10
|
justify-content: center;
|
|
11
11
|
align-items: center;
|
|
12
12
|
`;
|
|
13
|
+
const stopThePropagation = (e) => e.stopPropagation();
|
|
13
14
|
const singleSelectColumn = {
|
|
14
15
|
id: "singleSelecter",
|
|
15
16
|
Header: () => /* @__PURE__ */ React2.createElement("div", null),
|
|
@@ -22,7 +23,10 @@ const singleSelectColumn = {
|
|
|
22
23
|
const onChangeHandler = useCallback((newValue, e) => {
|
|
23
24
|
onSelectionChange({ [uid]: !selectedState }, uid, e);
|
|
24
25
|
}, [onSelectionChange, selectedState, uid]);
|
|
25
|
-
return /* @__PURE__ */ React2.createElement(CenteredContent,
|
|
26
|
+
return /* @__PURE__ */ React2.createElement(CenteredContent, {
|
|
27
|
+
onClick: stopThePropagation,
|
|
28
|
+
onKeyDown: stopThePropagation
|
|
29
|
+
}, /* @__PURE__ */ React2.createElement(DSControlledRadio, {
|
|
26
30
|
"aria-checked": selectedState,
|
|
27
31
|
"aria-disabled": disabledRows[row.uid],
|
|
28
32
|
title: "Toggle row selected",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSControlledRadio } from '@elliemae/ds-controlled-form';\nimport { styled } from '@elliemae/ds-system';\nimport { TypescriptColumn } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nconst CenteredContent = styled.div`\n display: flex;\n height: 100%;\n width: 100%;\n justify-content: center;\n align-items: center;\n`;\n\nexport const singleSelectColumn: TypescriptColumn<HTMLInputElement> = {\n // Build our singleSelecter column\n id: 'singleSelecter', // Make sure it has an ID\n // The header doesn't need anything for single selection\n Header: () => <div />,\n Cell: ({ cell, row, isRowSelected, ctx }) => {\n const {\n tableProps: { onSelectionChange, selection, disabledRows },\n } = ctx;\n const { uid } = row;\n const selectedState = !!selection?.[uid];\n\n const onChangeHandler = useCallback(\n (newValue: string, e: React.ChangeEvent) => {\n // in single select we only allow one item to be selected\n onSelectionChange({ [uid]: !selectedState }, uid, e);\n },\n [onSelectionChange, selectedState, uid],\n );\n\n return (\n <CenteredContent>\n <DSControlledRadio\n aria-checked={selectedState}\n aria-disabled={disabledRows[row.uid]}\n title=\"Toggle row selected\"\n aria-label=\"Toggle row selected\"\n checked={selectedState}\n onChange={onChangeHandler}\n data-testid={DATA_TESTID.DATA_TABLE_RADIO}\n disabled={disabledRows[row.uid]}\n innerRef={cell.ref}\n value={uid}\n tabIndex={isRowSelected ? 0 : -1}\n />\n </CenteredContent>\n );\n },\n textWrap: 'wrap',\n width: 32,\n padding: 4,\n canResize: false,\n isFocuseable: false,\n disableDnD: true,\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AAEA;AAEA,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSControlledRadio } from '@elliemae/ds-controlled-form';\nimport { styled } from '@elliemae/ds-system';\nimport { TypescriptColumn } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nconst CenteredContent = styled.div`\n display: flex;\n height: 100%;\n width: 100%;\n justify-content: center;\n align-items: center;\n`;\n\nconst stopThePropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\n\nexport const singleSelectColumn: TypescriptColumn<HTMLInputElement> = {\n // Build our singleSelecter column\n id: 'singleSelecter', // Make sure it has an ID\n // The header doesn't need anything for single selection\n Header: () => <div />,\n Cell: ({ cell, row, isRowSelected, ctx }) => {\n const {\n tableProps: { onSelectionChange, selection, disabledRows },\n } = ctx;\n const { uid } = row;\n const selectedState = !!selection?.[uid];\n\n const onChangeHandler = useCallback(\n (newValue: string, e: React.ChangeEvent) => {\n // in single select we only allow one item to be selected\n onSelectionChange({ [uid]: !selectedState }, uid, e);\n },\n [onSelectionChange, selectedState, uid],\n );\n\n return (\n <CenteredContent onClick={stopThePropagation} onKeyDown={stopThePropagation}>\n <DSControlledRadio\n aria-checked={selectedState}\n aria-disabled={disabledRows[row.uid]}\n title=\"Toggle row selected\"\n aria-label=\"Toggle row selected\"\n checked={selectedState}\n onChange={onChangeHandler}\n data-testid={DATA_TESTID.DATA_TABLE_RADIO}\n disabled={disabledRows[row.uid]}\n innerRef={cell.ref}\n value={uid}\n tabIndex={isRowSelected ? 0 : -1}\n />\n </CenteredContent>\n );\n },\n textWrap: 'wrap',\n width: 32,\n padding: 4,\n canResize: false,\n isFocuseable: false,\n disableDnD: true,\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AAEA;AAEA,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ/B,MAAM,qBAAqB,CAAC,MAA8C,EAAE,gBAAgB;AAErF,MAAM,qBAAyD;AAAA,EAEpE,IAAI;AAAA,EAEJ,QAAQ,MAAM,qCAAC,WAAI;AAAA,EACnB,MAAM,CAAC,EAAE,MAAM,KAAK,eAAe,UAAU;AAC3C,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW;AAAA,QAC1C;AACJ,UAAM,EAAE,QAAQ;AAChB,UAAM,gBAAgB,CAAC,CAAC,YAAY;AAEpC,UAAM,kBAAkB,YACtB,CAAC,UAAkB,MAAyB;AAE1C,wBAAkB,EAAE,CAAC,MAAM,CAAC,cAAc,GAAG,KAAK,CAAC;AAAA,IACrD,GACA,CAAC,mBAAmB,eAAe,GAAG,CACxC;AAEA,WACE,qCAAC;AAAA,MAAgB,SAAS;AAAA,MAAoB,WAAW;AAAA,OACvD,qCAAC;AAAA,MACC,gBAAc;AAAA,MACd,iBAAe,aAAa,IAAI;AAAA,MAChC,OAAM;AAAA,MACN,cAAW;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,eAAa,YAAY;AAAA,MACzB,UAAU,aAAa,IAAI;AAAA,MAC3B,UAAU,KAAK;AAAA,MACf,OAAO;AAAA,MACP,UAAU,gBAAgB,IAAI;AAAA,KAChC,CACF;AAAA,EAEJ;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AACd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -11,7 +11,7 @@ const useRowRendererHandlers = ({
|
|
|
11
11
|
drilldownRowId
|
|
12
12
|
}) => {
|
|
13
13
|
const {
|
|
14
|
-
tableProps: { onRowClick, onRowFocus, disabledRows },
|
|
14
|
+
tableProps: { onRowClick, onSelectionChange, selectSingle, selection, onRowFocus, disabledRows },
|
|
15
15
|
virtualListHelpers: { scrollToIndex },
|
|
16
16
|
setDrilldownRowId,
|
|
17
17
|
setFocusedRowId
|
|
@@ -28,6 +28,9 @@ const useRowRendererHandlers = ({
|
|
|
28
28
|
if (disabledRows[uid])
|
|
29
29
|
return;
|
|
30
30
|
onRowClick(original, e, uid);
|
|
31
|
+
if (selection && onSelectionChange) {
|
|
32
|
+
onSelectionChange(selectSingle ? { [uid]: true } : { ...selection, [uid]: !selection[uid] }, uid, e);
|
|
33
|
+
}
|
|
31
34
|
onRowFocus({
|
|
32
35
|
itemIndex,
|
|
33
36
|
scrollToItem: (opts = {
|
|
@@ -35,7 +38,7 @@ const useRowRendererHandlers = ({
|
|
|
35
38
|
}) => scrollToIndex(itemIndex, opts),
|
|
36
39
|
original
|
|
37
40
|
}, e);
|
|
38
|
-
}, [row, disabledRows, onRowClick, onRowFocus, itemIndex, scrollToIndex]);
|
|
41
|
+
}, [row, disabledRows, onRowClick, selection, onSelectionChange, onRowFocus, itemIndex, selectSingle, scrollToIndex]);
|
|
39
42
|
const isActive = draggableProps && draggableProps.active;
|
|
40
43
|
const handleKeyDown = useCallback((e) => {
|
|
41
44
|
if (isDragOverlay || isActive) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/RowRenderer/useRowRendererHandlers.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { DataTableContext } from '../../DataTableContext';\nimport { SortableItemContextType } from '../../parts/HoC/SortableItemContext';\nimport {
|
|
5
|
-
"mappings": "AAAA;ACEA;AACA;AACA;AAIO,MAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAaG;AACH,QAAM;AAAA,IACJ,YAAY,EAAE,YAAY,YAAY;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { DataTableContext } from '../../DataTableContext';\nimport { SortableItemContextType } from '../../parts/HoC/SortableItemContext';\nimport { InternalTypescriptRow } from '../../types/props';\n\nexport const useRowRendererHandlers = ({\n row,\n itemIndex,\n items,\n draggableProps,\n isDragOverlay,\n drilldownRowId,\n}: {\n row: InternalTypescriptRow;\n itemIndex: number;\n items: InternalTypescriptRow[];\n draggableProps: SortableItemContextType['draggableProps'];\n isDragOverlay: boolean;\n drilldownRowId: string | null;\n}): {\n handleItemClick: React.MouseEventHandler;\n handleKeyDown: React.KeyboardEventHandler;\n handleOnBlur: React.FocusEventHandler;\n handleOnFocus: React.FocusEventHandler;\n} => {\n const {\n tableProps: { onRowClick, onSelectionChange, selectSingle, selection, onRowFocus, disabledRows },\n virtualListHelpers: { scrollToIndex },\n setDrilldownRowId,\n setFocusedRowId,\n } = useContext(DataTableContext);\n\n const isOptionFocuseable = (opt): boolean => !disabledRows[opt.uid];\n\n const findInCircularList = (\n list,\n from: number,\n criteria: (item) => boolean,\n step = 1,\n // eslint-disable-next-line max-params\n ): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from > -1;\n i = (i + step + list.length) % list.length\n ) {\n if (criteria(list[i])) return i;\n }\n return from; // return same item\n };\n\n const handleItemClick = useCallback(\n (e, { original, uid } = row) => {\n if (disabledRows[uid]) return;\n onRowClick(original, e, uid);\n if (selection && onSelectionChange) {\n onSelectionChange(selectSingle ? { [uid]: true } : { ...selection, [uid]: !selection[uid] }, uid, e);\n }\n onRowFocus(\n {\n itemIndex,\n scrollToItem: (\n opts: { align: 'auto' | 'start' | 'center' | 'end' } = {\n align: 'start',\n },\n ) => scrollToIndex(itemIndex, opts),\n original,\n },\n e,\n );\n },\n [row, disabledRows, onRowClick, selection, onSelectionChange, onRowFocus, itemIndex, selectSingle, scrollToIndex],\n );\n\n const isActive = draggableProps && draggableProps.active;\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (isDragOverlay || isActive) {\n e.preventDefault();\n return;\n }\n const { target } = e;\n const isChildEvent = (target as HTMLElement).getAttribute('role') !== 'row'; // if the event comes from a row\n\n if (e.code === 'Enter') {\n if (!isChildEvent) {\n e.preventDefault();\n if (drilldownRowId !== row.uid) {\n setDrilldownRowId(row.uid);\n setTimeout(() => {\n const focuseableCell = row.cells.find((cell) => cell.ref.current !== null);\n if (focuseableCell) focuseableCell.ref.current.focus();\n });\n }\n }\n }\n if (e.code === 'Space') {\n if (!isChildEvent) {\n e.preventDefault();\n }\n handleItemClick(e, row);\n }\n if (e.code === 'ArrowDown') {\n e.preventDefault();\n e.stopPropagation();\n const next = findInCircularList(items, itemIndex, isOptionFocuseable);\n setFocusedRowId(items[next].uid);\n }\n if (e.code === 'ArrowUp') {\n e.preventDefault();\n const prev = findInCircularList(items, itemIndex, isOptionFocuseable, -1);\n setFocusedRowId(items[prev].uid);\n }\n },\n [\n isDragOverlay,\n isActive,\n drilldownRowId,\n row,\n setDrilldownRowId,\n handleItemClick,\n items,\n itemIndex,\n isOptionFocuseable,\n setFocusedRowId,\n ],\n );\n\n const handleOnBlur = useCallback(\n (e) => {\n if (e.relatedTarget?.getAttribute('data-testid') === 'data-table-row-content') {\n setDrilldownRowId(null);\n }\n },\n [setDrilldownRowId],\n );\n\n const handleOnFocus: React.FocusEventHandler = useCallback(\n (e) => {\n if (\n !disabledRows[row.uid] &&\n e.target &&\n e.target.getAttribute('data-testid') === DATA_TESTID.DATA_TABLE_ROW_CONTENT\n ) {\n setFocusedRowId(row.uid);\n }\n },\n [row.uid, setFocusedRowId, disabledRows],\n );\n\n return { handleItemClick, handleKeyDown, handleOnBlur, handleOnFocus };\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-data-table",
|
|
3
|
-
"version": "3.5.0-rc.
|
|
3
|
+
"version": "3.5.0-rc.4",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Data Table",
|
|
6
6
|
"files": [
|
|
@@ -571,23 +571,23 @@
|
|
|
571
571
|
"indent": 4
|
|
572
572
|
},
|
|
573
573
|
"dependencies": {
|
|
574
|
-
"@elliemae/ds-button": "3.5.0-rc.
|
|
575
|
-
"@elliemae/ds-circular-progress-indicator": "3.5.0-rc.
|
|
576
|
-
"@elliemae/ds-controlled-form": "3.5.0-rc.
|
|
577
|
-
"@elliemae/ds-drag-and-drop": "3.5.0-rc.
|
|
578
|
-
"@elliemae/ds-dropdownmenu": "3.5.0-rc.
|
|
579
|
-
"@elliemae/ds-form": "3.5.0-rc.
|
|
580
|
-
"@elliemae/ds-form-layout-blocks": "3.5.0-rc.
|
|
581
|
-
"@elliemae/ds-grid": "3.5.0-rc.
|
|
582
|
-
"@elliemae/ds-icons": "3.5.0-rc.
|
|
583
|
-
"@elliemae/ds-pagination": "3.5.0-rc.
|
|
584
|
-
"@elliemae/ds-pills": "3.5.0-rc.
|
|
585
|
-
"@elliemae/ds-popperjs": "3.5.0-rc.
|
|
586
|
-
"@elliemae/ds-skeleton": "3.5.0-rc.
|
|
587
|
-
"@elliemae/ds-system": "3.5.0-rc.
|
|
588
|
-
"@elliemae/ds-toolbar": "3.5.0-rc.
|
|
589
|
-
"@elliemae/ds-truncated-tooltip-text": "3.5.0-rc.
|
|
590
|
-
"@elliemae/ds-utilities": "3.5.0-rc.
|
|
574
|
+
"@elliemae/ds-button": "3.5.0-rc.4",
|
|
575
|
+
"@elliemae/ds-circular-progress-indicator": "3.5.0-rc.4",
|
|
576
|
+
"@elliemae/ds-controlled-form": "3.5.0-rc.4",
|
|
577
|
+
"@elliemae/ds-drag-and-drop": "3.5.0-rc.4",
|
|
578
|
+
"@elliemae/ds-dropdownmenu": "3.5.0-rc.4",
|
|
579
|
+
"@elliemae/ds-form": "3.5.0-rc.4",
|
|
580
|
+
"@elliemae/ds-form-layout-blocks": "3.5.0-rc.4",
|
|
581
|
+
"@elliemae/ds-grid": "3.5.0-rc.4",
|
|
582
|
+
"@elliemae/ds-icons": "3.5.0-rc.4",
|
|
583
|
+
"@elliemae/ds-pagination": "3.5.0-rc.4",
|
|
584
|
+
"@elliemae/ds-pills": "3.5.0-rc.4",
|
|
585
|
+
"@elliemae/ds-popperjs": "3.5.0-rc.4",
|
|
586
|
+
"@elliemae/ds-skeleton": "3.5.0-rc.4",
|
|
587
|
+
"@elliemae/ds-system": "3.5.0-rc.4",
|
|
588
|
+
"@elliemae/ds-toolbar": "3.5.0-rc.4",
|
|
589
|
+
"@elliemae/ds-truncated-tooltip-text": "3.5.0-rc.4",
|
|
590
|
+
"@elliemae/ds-utilities": "3.5.0-rc.4",
|
|
591
591
|
"react-virtual": "~2.10.4",
|
|
592
592
|
"uid": "~2.0.0"
|
|
593
593
|
},
|