@elliemae/ds-data-table 3.0.0-next.75 → 3.0.0-next.78

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.
Files changed (17) hide show
  1. package/dist/cjs/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js +4 -2
  2. package/dist/cjs/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js.map +2 -2
  3. package/dist/cjs/exported-related/RowRenderer/useRowRendererHandlers.js +5 -1
  4. package/dist/cjs/exported-related/RowRenderer/useRowRendererHandlers.js.map +2 -2
  5. package/dist/cjs/exported-related/Toolbar/Toolbar.js +2 -1
  6. package/dist/cjs/exported-related/Toolbar/Toolbar.js.map +2 -2
  7. package/dist/cjs/parts/HoC/withConditionalDnDColumnContext.js +3 -1
  8. package/dist/cjs/parts/HoC/withConditionalDnDColumnContext.js.map +2 -2
  9. package/dist/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js +4 -2
  10. package/dist/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js.map +2 -2
  11. package/dist/esm/exported-related/RowRenderer/useRowRendererHandlers.js +5 -1
  12. package/dist/esm/exported-related/RowRenderer/useRowRendererHandlers.js.map +2 -2
  13. package/dist/esm/exported-related/Toolbar/Toolbar.js +2 -1
  14. package/dist/esm/exported-related/Toolbar/Toolbar.js.map +2 -2
  15. package/dist/esm/parts/HoC/withConditionalDnDColumnContext.js +3 -1
  16. package/dist/esm/parts/HoC/withConditionalDnDColumnContext.js.map +2 -2
  17. package/package.json +1 -1
package/dist/cjs/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js CHANGED
@@ -88,7 +88,9 @@ const multiSelectColumn = {
88
88
  } = ctx;
89
89
  const { uid } = row;
90
90
  const selectedState = selection?.[uid];
91
- const PureCheckboxCell = (0, import_react.useMemo)(() => /* @__PURE__ */ import_react.default.createElement(import_ds_form.DSCheckbox, {
91
+ const PureCheckboxCell = (0, import_react.useMemo)(() => /* @__PURE__ */ import_react.default.createElement("div", {
92
+ onClick: (e) => e.stopPropagation()
93
+ }, /* @__PURE__ */ import_react.default.createElement(import_ds_form.DSCheckbox, {
92
94
  "data-testid": import_constants.DATA_TESTID.DATA_TABLE_CHECKBOX,
93
95
  title: "Toggle Row Selected",
94
96
  "aria-checked": selectedState,
@@ -105,7 +107,7 @@ const multiSelectColumn = {
105
107
  innerRef: cell.ref,
106
108
  tabIndex: isRowSelected ? 0 : -1,
107
109
  style: { cursor: "pointer" }
108
- }), [selectedState, disabledRows, row.uid, cell.ref, isRowSelected, selection, uid, onSelectionChange]);
110
+ })), [selectedState, disabledRows, row.uid, cell.ref, isRowSelected, selection, uid, onSelectionChange]);
109
111
  return PureCheckboxCell;
110
112
  },
111
113
  textWrap: "wrap",
package/dist/cjs/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js.map CHANGED
@@ -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 { DSCheckbox } from '@elliemae/ds-form';\nimport { TypescriptColumn } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nexport const multiSelectColumn: TypescriptColumn = {\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 const selectionKeyCount = Object.keys(selection).length;\n\n const currentGlobalState = useMemo(\n () => (selectionKeyCount > 0 && selectionKeyCount < data.length ? 'mixed' : selectionKeyCount > 0),\n [selectionKeyCount, data],\n );\n\n const newGlobalStateAfterToggle = useMemo(() => {\n // false -- toggles into --> true\n // mixed -- toggles into --> true\n // true -- toggles into --> false\n let newState = false;\n if (currentGlobalState === false || currentGlobalState === 'mixed') newState = true;\n return newState;\n }, [currentGlobalState]);\n\n const newSelection = useMemo(() => {\n if (newGlobalStateAfterToggle) {\n const nextSelection = {};\n allDataFlattened.forEach((datum) => {\n nextSelection[datum.uid] = !disabledRows[datum.uid];\n });\n return nextSelection;\n }\n return {};\n }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);\n\n const onChangeHandler = useCallback(\n (e) => {\n onSelectionChange(newSelection, 'All', e);\n },\n [newSelection, onSelectionChange],\n );\n\n const PureHeaderCheckbox = useMemo(\n () => (\n <DSCheckbox\n data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX}\n title=\"Toggle All Rows Selected\"\n checked={currentGlobalState}\n onChange={onChangeHandler}\n tabIndex=\"0\"\n style={{ cursor: 'pointer' }}\n />\n ),\n [currentGlobalState, onChangeHandler],\n );\n return PureHeaderCheckbox;\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];\n const PureCheckboxCell = useMemo(\n () => (\n <DSCheckbox\n data-testid={DATA_TESTID.DATA_TABLE_CHECKBOX}\n title=\"Toggle Row Selected\"\n aria-checked={selectedState}\n aria-disabled={false}\n checked={selectedState}\n onChange={(e) => {\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 disabled={disabledRows[row.uid]}\n innerRef={cell.ref}\n tabIndex={isRowSelected ? 0 : -1}\n style={{ cursor: 'pointer' }}\n />\n ),\n [selectedState, disabledRows, row.uid, cell.ref, isRowSelected, selection, uid, onSelectionChange],\n );\n return PureCheckboxCell;\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,qBAA2B;AAE3B,uBAA4B;AAErB,MAAM,oBAAsC;AAAA,EAEjD,IAAI;AAAA,EACJ,QAAQ,CAAC,EAAE,UAAU;AACnB,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW,MAAM;AAAA,MAClD;AAAA,QACE;AAEJ,UAAM,oBAAoB,OAAO,KAAK,SAAS,EAAE;AAEjD,UAAM,qBAAqB,0BACzB,MAAO,oBAAoB,KAAK,oBAAoB,KAAK,SAAS,UAAU,oBAAoB,GAChG,CAAC,mBAAmB,IAAI,CAC1B;AAEA,UAAM,4BAA4B,0BAAQ,MAAM;AAI9C,UAAI,WAAW;AACf,UAAI,uBAAuB,SAAS,uBAAuB;AAAS,mBAAW;AAC/E,aAAO;AAAA,IACT,GAAG,CAAC,kBAAkB,CAAC;AAEvB,UAAM,eAAe,0BAAQ,MAAM;AACjC,UAAI,2BAA2B;AAC7B,cAAM,gBAAgB,CAAC;AACvB,yBAAiB,QAAQ,CAAC,UAAU;AAClC,wBAAc,MAAM,OAAO,CAAC,aAAa,MAAM;AAAA,QACjD,CAAC;AACD,eAAO;AAAA,MACT;AACA,aAAO,CAAC;AAAA,IACV,GAAG,CAAC,2BAA2B,kBAAkB,YAAY,CAAC;AAE9D,UAAM,kBAAkB,8BACtB,CAAC,MAAM;AACL,wBAAkB,cAAc,OAAO,CAAC;AAAA,IAC1C,GACA,CAAC,cAAc,iBAAiB,CAClC;AAEA,UAAM,qBAAqB,0BACzB,MACE,mDAAC;AAAA,MACC,eAAa,6BAAY;AAAA,MACzB,OAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAS;AAAA,MACT,OAAO,EAAE,QAAQ,UAAU;AAAA,KAC7B,GAEF,CAAC,oBAAoB,eAAe,CACtC;AACA,WAAO;AAAA,EACT;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;AAClC,UAAM,mBAAmB,0BACvB,MACE,mDAAC;AAAA,MACC,eAAa,6BAAY;AAAA,MACzB,OAAM;AAAA,MACN,gBAAc;AAAA,MACd,iBAAe;AAAA,MACf,SAAS;AAAA,MACT,UAAU,CAAC,MAAM;AACf,cAAM,WAAW,CAAC;AAClB,cAAM,eAAe,iCAAK,YAAL,GAAiB,MAAM,SAAS;AACrD,YAAI,CAAC;AAAU,iBAAO,aAAa;AACnC,0BAAkB,cAAc,KAAK,CAAC;AAAA,MACxC;AAAA,MACA,UAAU,aAAa,IAAI;AAAA,MAC3B,UAAU,KAAK;AAAA,MACf,UAAU,gBAAgB,IAAI;AAAA,MAC9B,OAAO,EAAE,QAAQ,UAAU;AAAA,KAC7B,GAEF,CAAC,eAAe,cAAc,IAAI,KAAK,KAAK,KAAK,eAAe,WAAW,KAAK,iBAAiB,CACnG;AACA,WAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AACd;",
4
+ "sourcesContent": ["import React, { useMemo, useCallback } from 'react';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { TypescriptColumn } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nexport const multiSelectColumn: TypescriptColumn = {\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 const selectionKeyCount = Object.keys(selection).length;\n\n const currentGlobalState = useMemo(\n () => (selectionKeyCount > 0 && selectionKeyCount < data.length ? 'mixed' : selectionKeyCount > 0),\n [selectionKeyCount, data],\n );\n\n const newGlobalStateAfterToggle = useMemo(() => {\n // false -- toggles into --> true\n // mixed -- toggles into --> true\n // true -- toggles into --> false\n let newState = false;\n if (currentGlobalState === false || currentGlobalState === 'mixed') newState = true;\n return newState;\n }, [currentGlobalState]);\n\n const newSelection = useMemo(() => {\n if (newGlobalStateAfterToggle) {\n const nextSelection = {};\n allDataFlattened.forEach((datum) => {\n nextSelection[datum.uid] = !disabledRows[datum.uid];\n });\n return nextSelection;\n }\n return {};\n }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);\n\n const onChangeHandler = useCallback(\n (e) => {\n onSelectionChange(newSelection, 'All', e);\n },\n [newSelection, onSelectionChange],\n );\n\n const PureHeaderCheckbox = useMemo(\n () => (\n <DSCheckbox\n data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX}\n title=\"Toggle All Rows Selected\"\n checked={currentGlobalState}\n onChange={onChangeHandler}\n tabIndex=\"0\"\n style={{ cursor: 'pointer' }}\n />\n ),\n [currentGlobalState, onChangeHandler],\n );\n return PureHeaderCheckbox;\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];\n const PureCheckboxCell = useMemo(\n () => (\n <div onClick={(e) => e.stopPropagation()}>\n <DSCheckbox\n data-testid={DATA_TESTID.DATA_TABLE_CHECKBOX}\n title=\"Toggle Row Selected\"\n aria-checked={selectedState}\n aria-disabled={false}\n checked={selectedState}\n onChange={(e) => {\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 disabled={disabledRows[row.uid]}\n innerRef={cell.ref}\n tabIndex={isRowSelected ? 0 : -1}\n style={{ cursor: 'pointer' }}\n />\n </div>\n ),\n [selectedState, disabledRows, row.uid, cell.ref, isRowSelected, selection, uid, onSelectionChange],\n );\n return PureCheckboxCell;\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,qBAA2B;AAE3B,uBAA4B;AAErB,MAAM,oBAAsC;AAAA,EAEjD,IAAI;AAAA,EACJ,QAAQ,CAAC,EAAE,UAAU;AACnB,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW,MAAM;AAAA,MAClD;AAAA,QACE;AAEJ,UAAM,oBAAoB,OAAO,KAAK,SAAS,EAAE;AAEjD,UAAM,qBAAqB,0BACzB,MAAO,oBAAoB,KAAK,oBAAoB,KAAK,SAAS,UAAU,oBAAoB,GAChG,CAAC,mBAAmB,IAAI,CAC1B;AAEA,UAAM,4BAA4B,0BAAQ,MAAM;AAI9C,UAAI,WAAW;AACf,UAAI,uBAAuB,SAAS,uBAAuB;AAAS,mBAAW;AAC/E,aAAO;AAAA,IACT,GAAG,CAAC,kBAAkB,CAAC;AAEvB,UAAM,eAAe,0BAAQ,MAAM;AACjC,UAAI,2BAA2B;AAC7B,cAAM,gBAAgB,CAAC;AACvB,yBAAiB,QAAQ,CAAC,UAAU;AAClC,wBAAc,MAAM,OAAO,CAAC,aAAa,MAAM;AAAA,QACjD,CAAC;AACD,eAAO;AAAA,MACT;AACA,aAAO,CAAC;AAAA,IACV,GAAG,CAAC,2BAA2B,kBAAkB,YAAY,CAAC;AAE9D,UAAM,kBAAkB,8BACtB,CAAC,MAAM;AACL,wBAAkB,cAAc,OAAO,CAAC;AAAA,IAC1C,GACA,CAAC,cAAc,iBAAiB,CAClC;AAEA,UAAM,qBAAqB,0BACzB,MACE,mDAAC;AAAA,MACC,eAAa,6BAAY;AAAA,MACzB,OAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAS;AAAA,MACT,OAAO,EAAE,QAAQ,UAAU;AAAA,KAC7B,GAEF,CAAC,oBAAoB,eAAe,CACtC;AACA,WAAO;AAAA,EACT;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;AAClC,UAAM,mBAAmB,0BACvB,MACE,mDAAC;AAAA,MAAI,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,OACrC,mDAAC;AAAA,MACC,eAAa,6BAAY;AAAA,MACzB,OAAM;AAAA,MACN,gBAAc;AAAA,MACd,iBAAe;AAAA,MACf,SAAS;AAAA,MACT,UAAU,CAAC,MAAM;AACf,cAAM,WAAW,CAAC;AAClB,cAAM,eAAe,iCAAK,YAAL,GAAiB,MAAM,SAAS;AACrD,YAAI,CAAC;AAAU,iBAAO,aAAa;AACnC,0BAAkB,cAAc,KAAK,CAAC;AAAA,MACxC;AAAA,MACA,UAAU,aAAa,IAAI;AAAA,MAC3B,UAAU,KAAK;AAAA,MACf,UAAU,gBAAgB,IAAI;AAAA,MAC9B,OAAO,EAAE,QAAQ,UAAU;AAAA,KAC7B,CACF,GAEF,CAAC,eAAe,cAAc,IAAI,KAAK,KAAK,KAAK,eAAe,WAAW,KAAK,iBAAiB,CACnG;AACA,WAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AACd;",
6
6
  "names": []
7
7
  }
package/dist/cjs/exported-related/RowRenderer/useRowRendererHandlers.js CHANGED
@@ -79,7 +79,11 @@ const useRowRendererHandlers = ({
79
79
  }
80
80
  }
81
81
  if (e.code === "Space") {
82
- e.preventDefault();
82
+ const { currentTarget, target } = e;
83
+ const isChildEvent = currentTarget !== target && currentTarget.contains(target);
84
+ if (!isChildEvent) {
85
+ e.preventDefault();
86
+ }
83
87
  handleItemClick(e, row);
84
88
  }
85
89
  if (e.code === "ArrowDown") {
package/dist/cjs/exported-related/RowRenderer/useRowRendererHandlers.js.map CHANGED
@@ -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 complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { DataTableContext } from '../../DataTableContext';\nimport { SortableItemContextType } from '../../parts/HoC/SortableItemContext';\nimport { TypescriptRow } from '../../types/props';\n\nexport const useRowRendererHandlers = ({\n row,\n itemIndex,\n items,\n draggableProps,\n isDragOverlay,\n drilldownRowId,\n}: {\n row: TypescriptRow;\n itemIndex: number;\n items: TypescriptRow[];\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, 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 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, onRowFocus, itemIndex, 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 if (e.code === 'Enter') {\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 if (e.code === 'Space') {\n e.preventDefault();\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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",
4
+ "sourcesContent": ["/* 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 { TypescriptRow } from '../../types/props';\n\nexport const useRowRendererHandlers = ({\n row,\n itemIndex,\n items,\n draggableProps,\n isDragOverlay,\n drilldownRowId,\n}: {\n row: TypescriptRow;\n itemIndex: number;\n items: TypescriptRow[];\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, 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 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, onRowFocus, itemIndex, 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 if (e.code === 'Enter') {\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 if (e.code === 'Space') {\n const { currentTarget, target } = e;\n const isChildEvent = currentTarget !== target && currentTarget.contains(target);\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
  }
package/dist/cjs/exported-related/Toolbar/Toolbar.js CHANGED
@@ -79,7 +79,8 @@ const Toolbar = ({ children }) => {
79
79
  const handleOnClick = (0, import_react.useCallback)(() => setShow(true), []);
80
80
  (0, import_ds_utilities.useOnClickOutside)(toolbarRef, handleOnClickOutside);
81
81
  return /* @__PURE__ */ import_react.default.createElement(ToolbarPosition, {
82
- ref: toolbarRef
82
+ ref: toolbarRef,
83
+ onClick: (e) => e.stopPropagation()
83
84
  }, /* @__PURE__ */ import_react.default.createElement(ToolbarWrapper, {
84
85
  onMouseEnter: () => setShow(true),
85
86
  onMouseLeave: () => setShow(false)
package/dist/cjs/exported-related/Toolbar/Toolbar.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/exported-related/Toolbar/Toolbar.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React, { useCallback, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants';\n\nconst ToolbarBtns = styled.div`\n & > .em-ds-toolbar {\n box-shadow: none;\n }\n`;\n\nconst ToolbarWrapper = styled.div`\n display: flex;\n align-items: center;\n height: 36px;\n margin-right: 1px;\n pointer-events: all;\n &:hover {\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n & > .toolbar-trigger {\n border: none;\n }\n }\n`;\n\nconst ToolbarPosition = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n background: white;\n height: 28px;\n margin-top: 4px;\n width: 100%;\n padding-left: 4px;\n &:hover {\n z-index: 1;\n }\n :after {\n content: '';\n position: absolute;\n left: 0px;\n top: 4px;\n bottom: 4px;\n width: 1px;\n background-color: ${(props) => props.theme.colors.neutral['080']};\n z-index: 7;\n }\n`;\n\n// eslint-disable-next-line react/prop-types\nexport const Toolbar: React.ComponentType = ({ children }) => {\n const [show, setShow] = useState(false);\n\n const toolbarRef = useRef(null);\n\n const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n const handleOnClick = useCallback(() => setShow(true), []);\n\n useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n return (\n <ToolbarPosition ref={toolbarRef}>\n <ToolbarWrapper onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>\n {show && <ToolbarBtns>{children}</ToolbarBtns>}\n <DSButtonV2\n buttonType=\"icon\"\n className=\"toolbar-trigger\"\n data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n onClick={handleOnClick}\n onKeyDown={(e) => ['Enter', 'Space'].includes(e.code) && handleOnClick()}\n tabIndex={0}\n >\n <MoreOptionsVert />\n </DSButtonV2>\n </ToolbarWrapper>\n </ToolbarPosition>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqD;AACrD,+BAAmB;AACnB,uBAA2B;AAC3B,sBAAgC;AAChC,0BAAkC;AAClC,uBAA4B;AAE5B,MAAM,cAAc,iCAAO;AAAA;AAAA;AAAA;AAAA;AAM3B,MAAM,iBAAiB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc9B,MAAM,kBAAkB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAoBP,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAMvD,MAAM,UAA+B,CAAC,EAAE,eAAe;AAC5D,QAAM,CAAC,MAAM,WAAW,2BAAS,KAAK;AAEtC,QAAM,aAAa,yBAAO,IAAI;AAE9B,QAAM,uBAAuB,8BAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,gBAAgB,8BAAY,MAAM,QAAQ,IAAI,GAAG,CAAC,CAAC;AAEzD,6CAAkB,YAAY,oBAAoB;AAElD,SACE,mDAAC;AAAA,IAAgB,KAAK;AAAA,KACpB,mDAAC;AAAA,IAAe,cAAc,MAAM,QAAQ,IAAI;AAAA,IAAG,cAAc,MAAM,QAAQ,KAAK;AAAA,KACjF,QAAQ,mDAAC,mBAAa,QAAS,GAChC,mDAAC;AAAA,IACC,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAa,6BAAY;AAAA,IACzB,SAAS;AAAA,IACT,WAAW,CAAC,MAAM,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,KAAK,cAAc;AAAA,IACvE,UAAU;AAAA,KAEV,mDAAC,qCAAgB,CACnB,CACF,CACF;AAEJ;",
4
+ "sourcesContent": ["import React, { useCallback, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants';\n\nconst ToolbarBtns = styled.div`\n & > .em-ds-toolbar {\n box-shadow: none;\n }\n`;\n\nconst ToolbarWrapper = styled.div`\n display: flex;\n align-items: center;\n height: 36px;\n margin-right: 1px;\n pointer-events: all;\n &:hover {\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n & > .toolbar-trigger {\n border: none;\n }\n }\n`;\n\nconst ToolbarPosition = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n background: white;\n height: 28px;\n margin-top: 4px;\n width: 100%;\n padding-left: 4px;\n &:hover {\n z-index: 1;\n }\n :after {\n content: '';\n position: absolute;\n left: 0px;\n top: 4px;\n bottom: 4px;\n width: 1px;\n background-color: ${(props) => props.theme.colors.neutral['080']};\n z-index: 7;\n }\n`;\n\n// eslint-disable-next-line react/prop-types\nexport const Toolbar: React.ComponentType = ({ children }) => {\n const [show, setShow] = useState(false);\n\n const toolbarRef = useRef(null);\n\n const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n const handleOnClick = useCallback(() => setShow(true), []);\n\n useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n return (\n <ToolbarPosition ref={toolbarRef} onClick={(e) => e.stopPropagation()}>\n <ToolbarWrapper onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>\n {show && <ToolbarBtns>{children}</ToolbarBtns>}\n <DSButtonV2\n buttonType=\"icon\"\n className=\"toolbar-trigger\"\n data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n onClick={handleOnClick}\n onKeyDown={(e) => ['Enter', 'Space'].includes(e.code) && handleOnClick()}\n tabIndex={0}\n >\n <MoreOptionsVert />\n </DSButtonV2>\n </ToolbarWrapper>\n </ToolbarPosition>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqD;AACrD,+BAAmB;AACnB,uBAA2B;AAC3B,sBAAgC;AAChC,0BAAkC;AAClC,uBAA4B;AAE5B,MAAM,cAAc,iCAAO;AAAA;AAAA;AAAA;AAAA;AAM3B,MAAM,iBAAiB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc9B,MAAM,kBAAkB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAoBP,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAMvD,MAAM,UAA+B,CAAC,EAAE,eAAe;AAC5D,QAAM,CAAC,MAAM,WAAW,2BAAS,KAAK;AAEtC,QAAM,aAAa,yBAAO,IAAI;AAE9B,QAAM,uBAAuB,8BAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,gBAAgB,8BAAY,MAAM,QAAQ,IAAI,GAAG,CAAC,CAAC;AAEzD,6CAAkB,YAAY,oBAAoB;AAElD,SACE,mDAAC;AAAA,IAAgB,KAAK;AAAA,IAAY,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,KAClE,mDAAC;AAAA,IAAe,cAAc,MAAM,QAAQ,IAAI;AAAA,IAAG,cAAc,MAAM,QAAQ,KAAK;AAAA,KACjF,QAAQ,mDAAC,mBAAa,QAAS,GAChC,mDAAC;AAAA,IACC,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAa,6BAAY;AAAA,IACzB,SAAS;AAAA,IACT,WAAW,CAAC,MAAM,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,KAAK,cAAc;AAAA,IACvE,UAAU;AAAA,KAEV,mDAAC,qCAAgB,CACnB,CACF,CACF;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/HoC/withConditionalDnDColumnContext.js CHANGED
@@ -99,7 +99,9 @@ const withConditionalDnDColumnContext = (Component) => (props) => {
99
99
  const el = document.body.querySelector(`[data-testid="${import_constants.DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}"]`);
100
100
  if (el) {
101
101
  const y = el.scrollTop;
102
- el.onscroll = () => el.scrollTo(0, y);
102
+ el.onscroll = () => {
103
+ el.scrollTo({ top: y });
104
+ };
103
105
  }
104
106
  }, []);
105
107
  const { dndContextProps, activeId, activeIndex } = (0, import_ds_drag_and_drop.useHierarchyDndkitConfig)({
package/dist/cjs/parts/HoC/withConditionalDnDColumnContext.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/HoC/withConditionalDnDColumnContext.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { useHierarchyDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { arrayMove } from '@dnd-kit/sortable';\nimport { FunctionalHOC } from '../../types/FunctionalHoC';\nimport { DataTableContext } from '../../DataTableContext';\nimport { Item } from '../../helpers/dndkit/hierarchy/types';\nimport { TypescriptColumn } from '../../types/props';\nimport { HeaderCellGroup } from '../internal';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns';\n\ntype DnDGroupContextType = {\n activeIndex: number;\n};\n\nexport const DnDGroupContext = createContext<DnDGroupContextType>({\n activeIndex: undefined,\n});\n\nconst flattenColumns = (cols: TypescriptColumn[]) => {\n const flattened = [];\n const flatten = (col: TypescriptColumn, index, parentId = null) => {\n const { id } = col;\n flattened.push([{ id, parentId, index }, col]);\n if (col.columns)\n col.columns.forEach((subColumn: TypescriptColumn, childIndex: number) => flatten(subColumn, childIndex, id));\n };\n cols.forEach((col, index) => flatten(col, index));\n return flattened;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) => (props) => {\n const {\n tableProps: { dragAndDropColumns, onColumnsReorder },\n visibleColumns,\n } = React.useContext(DataTableContext);\n\n const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n const onReorder = useCallback(\n (movedItem: Item, indexes: { targetIndex: number; fromIndex: number }) => {\n // Send from index to target index\n const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);\n // Pull the cols's data into an object\n const nodes = {};\n newFlattenedData.forEach(([dndData, colData]) => {\n delete colData.columns;\n nodes[dndData.id] = colData;\n });\n const newData = [];\n newFlattenedData.forEach(([dndData, colData]) => {\n // Don't send internal columns to the user\n if (INTERNAL_COLUMNS.includes(dndData.id)) {\n return;\n }\n // If row has parent, insert it to it's subrows\n // otherwise append it to the new user data\n if (dndData.parentId) {\n const parentNode = nodes[dndData.parentId];\n if (parentNode.columns) parentNode.columns.push(colData);\n else parentNode.columns = [colData];\n } else newData.push(colData);\n });\n onColumnsReorder(newData, indexes);\n },\n [flattenedItems, onColumnsReorder],\n );\n\n const onPreviewResetState = useCallback(() => {\n const el: HTMLDivElement | null = document.body.querySelector(\n `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n );\n if (el) el.onscroll = () => null;\n }, []);\n\n const onPreviewDragStart = useCallback(() => {\n const el: HTMLDivElement | null = document.body.querySelector(\n `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n );\n if (el) {\n const y = el.scrollTop;\n el.onscroll = () => el.scrollTo(0, y);\n }\n }, []);\n\n const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n flattenedItems,\n dragOverlayDataTestid: DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY,\n isHorizontalDnD: true,\n onReorder,\n onPreviewResetState,\n onPreviewDragStart,\n });\n\n if (dragAndDropColumns)\n return (\n <DndContext {...dndContextProps}>\n <DnDGroupContext.Provider value={{ activeIndex }}>\n <Component {...props} />\n </DnDGroupContext.Provider>\n <DragOverlay>\n {activeId ? (\n <HeaderCellGroup header={flattenedItems.find(([item]) => item.id === activeId)[1]} isDragOverlay />\n ) : null}\n </DragOverlay>\n </DndContext>\n );\n return <Component {...props} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { useHierarchyDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { arrayMove } from '@dnd-kit/sortable';\nimport { FunctionalHOC } from '../../types/FunctionalHoC';\nimport { DataTableContext } from '../../DataTableContext';\nimport { Item } from '../../helpers/dndkit/hierarchy/types';\nimport { TypescriptColumn } from '../../types/props';\nimport { HeaderCellGroup } from '../internal';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns';\n\ntype DnDGroupContextType = {\n activeIndex: number;\n};\n\nexport const DnDGroupContext = createContext<DnDGroupContextType>({\n activeIndex: undefined,\n});\n\nconst flattenColumns = (cols: TypescriptColumn[]) => {\n const flattened = [];\n const flatten = (col: TypescriptColumn, index, parentId = null) => {\n const { id } = col;\n flattened.push([{ id, parentId, index }, col]);\n if (col.columns)\n col.columns.forEach((subColumn: TypescriptColumn, childIndex: number) => flatten(subColumn, childIndex, id));\n };\n cols.forEach((col, index) => flatten(col, index));\n return flattened;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) => (props) => {\n const {\n tableProps: { dragAndDropColumns, onColumnsReorder },\n visibleColumns,\n } = React.useContext(DataTableContext);\n\n const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n const onReorder = useCallback(\n (movedItem: Item, indexes: { targetIndex: number; fromIndex: number }) => {\n // Send from index to target index\n const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);\n // Pull the cols's data into an object\n const nodes = {};\n newFlattenedData.forEach(([dndData, colData]) => {\n delete colData.columns;\n nodes[dndData.id] = colData;\n });\n const newData = [];\n newFlattenedData.forEach(([dndData, colData]) => {\n // Don't send internal columns to the user\n if (INTERNAL_COLUMNS.includes(dndData.id)) {\n return;\n }\n // If row has parent, insert it to it's subrows\n // otherwise append it to the new user data\n if (dndData.parentId) {\n const parentNode = nodes[dndData.parentId];\n if (parentNode.columns) parentNode.columns.push(colData);\n else parentNode.columns = [colData];\n } else newData.push(colData);\n });\n onColumnsReorder(newData, indexes);\n },\n [flattenedItems, onColumnsReorder],\n );\n\n const onPreviewResetState = useCallback(() => {\n const el: HTMLDivElement | null = document.body.querySelector(\n `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n );\n if (el) el.onscroll = () => null;\n }, []);\n\n const onPreviewDragStart = useCallback(() => {\n const el: HTMLDivElement | null = document.body.querySelector(\n `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n );\n if (el) {\n const y = el.scrollTop;\n el.onscroll = () => {\n el.scrollTo({ top: y });\n };\n }\n }, []);\n\n const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n flattenedItems,\n dragOverlayDataTestid: DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY,\n isHorizontalDnD: true,\n onReorder,\n onPreviewResetState,\n onPreviewDragStart,\n });\n\n if (dragAndDropColumns)\n return (\n <DndContext {...dndContextProps}>\n <DnDGroupContext.Provider value={{ activeIndex }}>\n <Component {...props} />\n </DnDGroupContext.Provider>\n <DragOverlay>\n {activeId ? (\n <HeaderCellGroup header={flattenedItems.find(([item]) => item.id === activeId)[1]} isDragOverlay />\n ) : null}\n </DragOverlay>\n </DndContext>\n );\n return <Component {...props} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js CHANGED
@@ -65,7 +65,9 @@ const multiSelectColumn = {
65
65
  } = ctx;
66
66
  const { uid } = row;
67
67
  const selectedState = selection?.[uid];
68
- const PureCheckboxCell = useMemo(() => /* @__PURE__ */ React2.createElement(DSCheckbox, {
68
+ const PureCheckboxCell = useMemo(() => /* @__PURE__ */ React2.createElement("div", {
69
+ onClick: (e) => e.stopPropagation()
70
+ }, /* @__PURE__ */ React2.createElement(DSCheckbox, {
69
71
  "data-testid": DATA_TESTID.DATA_TABLE_CHECKBOX,
70
72
  title: "Toggle Row Selected",
71
73
  "aria-checked": selectedState,
@@ -82,7 +84,7 @@ const multiSelectColumn = {
82
84
  innerRef: cell.ref,
83
85
  tabIndex: isRowSelected ? 0 : -1,
84
86
  style: { cursor: "pointer" }
85
- }), [selectedState, disabledRows, row.uid, cell.ref, isRowSelected, selection, uid, onSelectionChange]);
87
+ })), [selectedState, disabledRows, row.uid, cell.ref, isRowSelected, selection, uid, onSelectionChange]);
86
88
  return PureCheckboxCell;
87
89
  },
88
90
  textWrap: "wrap",
package/dist/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js.map CHANGED
@@ -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 { DSCheckbox } from '@elliemae/ds-form';\nimport { TypescriptColumn } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nexport const multiSelectColumn: TypescriptColumn = {\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 const selectionKeyCount = Object.keys(selection).length;\n\n const currentGlobalState = useMemo(\n () => (selectionKeyCount > 0 && selectionKeyCount < data.length ? 'mixed' : selectionKeyCount > 0),\n [selectionKeyCount, data],\n );\n\n const newGlobalStateAfterToggle = useMemo(() => {\n // false -- toggles into --> true\n // mixed -- toggles into --> true\n // true -- toggles into --> false\n let newState = false;\n if (currentGlobalState === false || currentGlobalState === 'mixed') newState = true;\n return newState;\n }, [currentGlobalState]);\n\n const newSelection = useMemo(() => {\n if (newGlobalStateAfterToggle) {\n const nextSelection = {};\n allDataFlattened.forEach((datum) => {\n nextSelection[datum.uid] = !disabledRows[datum.uid];\n });\n return nextSelection;\n }\n return {};\n }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);\n\n const onChangeHandler = useCallback(\n (e) => {\n onSelectionChange(newSelection, 'All', e);\n },\n [newSelection, onSelectionChange],\n );\n\n const PureHeaderCheckbox = useMemo(\n () => (\n <DSCheckbox\n data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX}\n title=\"Toggle All Rows Selected\"\n checked={currentGlobalState}\n onChange={onChangeHandler}\n tabIndex=\"0\"\n style={{ cursor: 'pointer' }}\n />\n ),\n [currentGlobalState, onChangeHandler],\n );\n return PureHeaderCheckbox;\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];\n const PureCheckboxCell = useMemo(\n () => (\n <DSCheckbox\n data-testid={DATA_TESTID.DATA_TABLE_CHECKBOX}\n title=\"Toggle Row Selected\"\n aria-checked={selectedState}\n aria-disabled={false}\n checked={selectedState}\n onChange={(e) => {\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 disabled={disabledRows[row.uid]}\n innerRef={cell.ref}\n tabIndex={isRowSelected ? 0 : -1}\n style={{ cursor: 'pointer' }}\n />\n ),\n [selectedState, disabledRows, row.uid, cell.ref, isRowSelected, selection, uid, onSelectionChange],\n );\n return PureCheckboxCell;\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;AAEO,MAAM,oBAAsC;AAAA,EAEjD,IAAI;AAAA,EACJ,QAAQ,CAAC,EAAE,UAAU;AACnB,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW,MAAM;AAAA,MAClD;AAAA,QACE;AAEJ,UAAM,oBAAoB,OAAO,KAAK,SAAS,EAAE;AAEjD,UAAM,qBAAqB,QACzB,MAAO,oBAAoB,KAAK,oBAAoB,KAAK,SAAS,UAAU,oBAAoB,GAChG,CAAC,mBAAmB,IAAI,CAC1B;AAEA,UAAM,4BAA4B,QAAQ,MAAM;AAI9C,UAAI,WAAW;AACf,UAAI,uBAAuB,SAAS,uBAAuB;AAAS,mBAAW;AAC/E,aAAO;AAAA,IACT,GAAG,CAAC,kBAAkB,CAAC;AAEvB,UAAM,eAAe,QAAQ,MAAM;AACjC,UAAI,2BAA2B;AAC7B,cAAM,gBAAgB,CAAC;AACvB,yBAAiB,QAAQ,CAAC,UAAU;AAClC,wBAAc,MAAM,OAAO,CAAC,aAAa,MAAM;AAAA,QACjD,CAAC;AACD,eAAO;AAAA,MACT;AACA,aAAO,CAAC;AAAA,IACV,GAAG,CAAC,2BAA2B,kBAAkB,YAAY,CAAC;AAE9D,UAAM,kBAAkB,YACtB,CAAC,MAAM;AACL,wBAAkB,cAAc,OAAO,CAAC;AAAA,IAC1C,GACA,CAAC,cAAc,iBAAiB,CAClC;AAEA,UAAM,qBAAqB,QACzB,MACE,qCAAC;AAAA,MACC,eAAa,YAAY;AAAA,MACzB,OAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAS;AAAA,MACT,OAAO,EAAE,QAAQ,UAAU;AAAA,KAC7B,GAEF,CAAC,oBAAoB,eAAe,CACtC;AACA,WAAO;AAAA,EACT;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;AAClC,UAAM,mBAAmB,QACvB,MACE,qCAAC;AAAA,MACC,eAAa,YAAY;AAAA,MACzB,OAAM;AAAA,MACN,gBAAc;AAAA,MACd,iBAAe;AAAA,MACf,SAAS;AAAA,MACT,UAAU,CAAC,MAAM;AACf,cAAM,WAAW,CAAC;AAClB,cAAM,eAAe,iCAAK,YAAL,GAAiB,MAAM,SAAS;AACrD,YAAI,CAAC;AAAU,iBAAO,aAAa;AACnC,0BAAkB,cAAc,KAAK,CAAC;AAAA,MACxC;AAAA,MACA,UAAU,aAAa,IAAI;AAAA,MAC3B,UAAU,KAAK;AAAA,MACf,UAAU,gBAAgB,IAAI;AAAA,MAC9B,OAAO,EAAE,QAAQ,UAAU;AAAA,KAC7B,GAEF,CAAC,eAAe,cAAc,IAAI,KAAK,KAAK,KAAK,eAAe,WAAW,KAAK,iBAAiB,CACnG;AACA,WAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AACd;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useCallback } from 'react';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { TypescriptColumn } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nexport const multiSelectColumn: TypescriptColumn = {\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 const selectionKeyCount = Object.keys(selection).length;\n\n const currentGlobalState = useMemo(\n () => (selectionKeyCount > 0 && selectionKeyCount < data.length ? 'mixed' : selectionKeyCount > 0),\n [selectionKeyCount, data],\n );\n\n const newGlobalStateAfterToggle = useMemo(() => {\n // false -- toggles into --> true\n // mixed -- toggles into --> true\n // true -- toggles into --> false\n let newState = false;\n if (currentGlobalState === false || currentGlobalState === 'mixed') newState = true;\n return newState;\n }, [currentGlobalState]);\n\n const newSelection = useMemo(() => {\n if (newGlobalStateAfterToggle) {\n const nextSelection = {};\n allDataFlattened.forEach((datum) => {\n nextSelection[datum.uid] = !disabledRows[datum.uid];\n });\n return nextSelection;\n }\n return {};\n }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);\n\n const onChangeHandler = useCallback(\n (e) => {\n onSelectionChange(newSelection, 'All', e);\n },\n [newSelection, onSelectionChange],\n );\n\n const PureHeaderCheckbox = useMemo(\n () => (\n <DSCheckbox\n data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX}\n title=\"Toggle All Rows Selected\"\n checked={currentGlobalState}\n onChange={onChangeHandler}\n tabIndex=\"0\"\n style={{ cursor: 'pointer' }}\n />\n ),\n [currentGlobalState, onChangeHandler],\n );\n return PureHeaderCheckbox;\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];\n const PureCheckboxCell = useMemo(\n () => (\n <div onClick={(e) => e.stopPropagation()}>\n <DSCheckbox\n data-testid={DATA_TESTID.DATA_TABLE_CHECKBOX}\n title=\"Toggle Row Selected\"\n aria-checked={selectedState}\n aria-disabled={false}\n checked={selectedState}\n onChange={(e) => {\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 disabled={disabledRows[row.uid]}\n innerRef={cell.ref}\n tabIndex={isRowSelected ? 0 : -1}\n style={{ cursor: 'pointer' }}\n />\n </div>\n ),\n [selectedState, disabledRows, row.uid, cell.ref, isRowSelected, selection, uid, onSelectionChange],\n );\n return PureCheckboxCell;\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;AAEO,MAAM,oBAAsC;AAAA,EAEjD,IAAI;AAAA,EACJ,QAAQ,CAAC,EAAE,UAAU;AACnB,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW,MAAM;AAAA,MAClD;AAAA,QACE;AAEJ,UAAM,oBAAoB,OAAO,KAAK,SAAS,EAAE;AAEjD,UAAM,qBAAqB,QACzB,MAAO,oBAAoB,KAAK,oBAAoB,KAAK,SAAS,UAAU,oBAAoB,GAChG,CAAC,mBAAmB,IAAI,CAC1B;AAEA,UAAM,4BAA4B,QAAQ,MAAM;AAI9C,UAAI,WAAW;AACf,UAAI,uBAAuB,SAAS,uBAAuB;AAAS,mBAAW;AAC/E,aAAO;AAAA,IACT,GAAG,CAAC,kBAAkB,CAAC;AAEvB,UAAM,eAAe,QAAQ,MAAM;AACjC,UAAI,2BAA2B;AAC7B,cAAM,gBAAgB,CAAC;AACvB,yBAAiB,QAAQ,CAAC,UAAU;AAClC,wBAAc,MAAM,OAAO,CAAC,aAAa,MAAM;AAAA,QACjD,CAAC;AACD,eAAO;AAAA,MACT;AACA,aAAO,CAAC;AAAA,IACV,GAAG,CAAC,2BAA2B,kBAAkB,YAAY,CAAC;AAE9D,UAAM,kBAAkB,YACtB,CAAC,MAAM;AACL,wBAAkB,cAAc,OAAO,CAAC;AAAA,IAC1C,GACA,CAAC,cAAc,iBAAiB,CAClC;AAEA,UAAM,qBAAqB,QACzB,MACE,qCAAC;AAAA,MACC,eAAa,YAAY;AAAA,MACzB,OAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAS;AAAA,MACT,OAAO,EAAE,QAAQ,UAAU;AAAA,KAC7B,GAEF,CAAC,oBAAoB,eAAe,CACtC;AACA,WAAO;AAAA,EACT;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;AAClC,UAAM,mBAAmB,QACvB,MACE,qCAAC;AAAA,MAAI,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,OACrC,qCAAC;AAAA,MACC,eAAa,YAAY;AAAA,MACzB,OAAM;AAAA,MACN,gBAAc;AAAA,MACd,iBAAe;AAAA,MACf,SAAS;AAAA,MACT,UAAU,CAAC,MAAM;AACf,cAAM,WAAW,CAAC;AAClB,cAAM,eAAe,iCAAK,YAAL,GAAiB,MAAM,SAAS;AACrD,YAAI,CAAC;AAAU,iBAAO,aAAa;AACnC,0BAAkB,cAAc,KAAK,CAAC;AAAA,MACxC;AAAA,MACA,UAAU,aAAa,IAAI;AAAA,MAC3B,UAAU,KAAK;AAAA,MACf,UAAU,gBAAgB,IAAI;AAAA,MAC9B,OAAO,EAAE,QAAQ,UAAU;AAAA,KAC7B,CACF,GAEF,CAAC,eAAe,cAAc,IAAI,KAAK,KAAK,KAAK,eAAe,WAAW,KAAK,iBAAiB,CACnG;AACA,WAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AACd;",
6
6
  "names": []
7
7
  }
package/dist/esm/exported-related/RowRenderer/useRowRendererHandlers.js CHANGED
@@ -54,7 +54,11 @@ const useRowRendererHandlers = ({
54
54
  }
55
55
  }
56
56
  if (e.code === "Space") {
57
- e.preventDefault();
57
+ const { currentTarget, target } = e;
58
+ const isChildEvent = currentTarget !== target && currentTarget.contains(target);
59
+ if (!isChildEvent) {
60
+ e.preventDefault();
61
+ }
58
62
  handleItemClick(e, row);
59
63
  }
60
64
  if (e.code === "ArrowDown") {
package/dist/esm/exported-related/RowRenderer/useRowRendererHandlers.js.map CHANGED
@@ -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 complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { DataTableContext } from '../../DataTableContext';\nimport { SortableItemContextType } from '../../parts/HoC/SortableItemContext';\nimport { TypescriptRow } from '../../types/props';\n\nexport const useRowRendererHandlers = ({\n row,\n itemIndex,\n items,\n draggableProps,\n isDragOverlay,\n drilldownRowId,\n}: {\n row: TypescriptRow;\n itemIndex: number;\n items: TypescriptRow[];\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, 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 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, onRowFocus, itemIndex, 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 if (e.code === 'Enter') {\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 if (e.code === 'Space') {\n e.preventDefault();\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": "AAAA;ACCA;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,IACtC,oBAAoB,EAAE;AAAA,IACtB;AAAA,IACA;AAAA,MACE,WAAW,gBAAgB;AAE/B,QAAM,qBAAqB,CAAC,QAAiB,CAAC,aAAa,IAAI;AAE/D,QAAM,qBAAqB,CACzB,MACA,MACA,UACA,OAAO,MAEI;AACX,aACM,IAAK,QAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,OAAO,IACrB,IAAK,KAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,UAAI,SAAS,KAAK,EAAE;AAAG,eAAO;AAAA,IAChC;AACA,WAAO;AAAA,EACT;AAEA,QAAM,kBAAkB,YACtB,CAAC,GAAG,EAAE,UAAU,QAAQ,QAAQ;AAC9B,QAAI,aAAa;AAAM;AACvB,eAAW,UAAU,GAAG,GAAG;AAC3B,eACE;AAAA,MACE;AAAA,MACA,cAAc,CACZ,OAAuD;AAAA,QACrD,OAAO;AAAA,MACT,MACG,cAAc,WAAW,IAAI;AAAA,MAClC;AAAA,IACF,GACA,CACF;AAAA,EACF,GACA,CAAC,KAAK,cAAc,YAAY,YAAY,WAAW,aAAa,CACtE;AAEA,QAAM,WAAW,kBAAkB,eAAe;AAElD,QAAM,gBAAgB,YACpB,CAAC,MAA2B;AAC1B,QAAI,iBAAiB,UAAU;AAC7B,QAAE,eAAe;AACjB;AAAA,IACF;AACA,QAAI,EAAE,SAAS,SAAS;AACtB,QAAE,eAAe;AACjB,UAAI,mBAAmB,IAAI,KAAK;AAC9B,0BAAkB,IAAI,GAAG;AACzB,mBAAW,MAAM;AACf,gBAAM,iBAAiB,IAAI,MAAM,KAAK,CAAC,SAAS,KAAK,IAAI,YAAY,IAAI;AACzE,cAAI;AAAgB,2BAAe,IAAI,QAAQ,MAAM;AAAA,QACvD,CAAC;AAAA,MACH;AAAA,IACF;AACA,QAAI,EAAE,SAAS,SAAS;AACtB,QAAE,eAAe;AACjB,sBAAgB,GAAG,GAAG;AAAA,IACxB;AACA,QAAI,EAAE,SAAS,aAAa;AAC1B,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAClB,YAAM,OAAO,mBAAmB,OAAO,WAAW,kBAAkB;AACpE,sBAAgB,MAAM,MAAM,GAAG;AAAA,IACjC;AACA,QAAI,EAAE,SAAS,WAAW;AACxB,QAAE,eAAe;AACjB,YAAM,OAAO,mBAAmB,OAAO,WAAW,oBAAoB,EAAE;AACxE,sBAAgB,MAAM,MAAM,GAAG;AAAA,IACjC;AAAA,EACF,GACA;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CACF;AAEA,QAAM,eAAe,YACnB,CAAC,MAAM;AACL,QAAI,EAAE,eAAe,aAAa,aAAa,MAAM,0BAA0B;AAC7E,wBAAkB,IAAI;AAAA,IACxB;AAAA,EACF,GACA,CAAC,iBAAiB,CACpB;AAEA,QAAM,gBAAyC,YAC7C,CAAC,MAAM;AACL,QACE,CAAC,aAAa,IAAI,QAClB,EAAE,UACF,EAAE,OAAO,aAAa,aAAa,MAAM,YAAY,wBACrD;AACA,sBAAgB,IAAI,GAAG;AAAA,IACzB;AAAA,EACF,GACA,CAAC,IAAI,KAAK,iBAAiB,YAAY,CACzC;AAEA,SAAO,EAAE,iBAAiB,eAAe,cAAc,cAAc;AACvE;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\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 { TypescriptRow } from '../../types/props';\n\nexport const useRowRendererHandlers = ({\n row,\n itemIndex,\n items,\n draggableProps,\n isDragOverlay,\n drilldownRowId,\n}: {\n row: TypescriptRow;\n itemIndex: number;\n items: TypescriptRow[];\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, 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 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, onRowFocus, itemIndex, 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 if (e.code === 'Enter') {\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 if (e.code === 'Space') {\n const { currentTarget, target } = e;\n const isChildEvent = currentTarget !== target && currentTarget.contains(target);\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/dist/esm/exported-related/Toolbar/Toolbar.js CHANGED
@@ -54,7 +54,8 @@ const Toolbar = ({ children }) => {
54
54
  const handleOnClick = useCallback(() => setShow(true), []);
55
55
  useOnClickOutside(toolbarRef, handleOnClickOutside);
56
56
  return /* @__PURE__ */ React2.createElement(ToolbarPosition, {
57
- ref: toolbarRef
57
+ ref: toolbarRef,
58
+ onClick: (e) => e.stopPropagation()
58
59
  }, /* @__PURE__ */ React2.createElement(ToolbarWrapper, {
59
60
  onMouseEnter: () => setShow(true),
60
61
  onMouseLeave: () => setShow(false)
package/dist/esm/exported-related/Toolbar/Toolbar.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/Toolbar/Toolbar.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants';\n\nconst ToolbarBtns = styled.div`\n & > .em-ds-toolbar {\n box-shadow: none;\n }\n`;\n\nconst ToolbarWrapper = styled.div`\n display: flex;\n align-items: center;\n height: 36px;\n margin-right: 1px;\n pointer-events: all;\n &:hover {\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n & > .toolbar-trigger {\n border: none;\n }\n }\n`;\n\nconst ToolbarPosition = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n background: white;\n height: 28px;\n margin-top: 4px;\n width: 100%;\n padding-left: 4px;\n &:hover {\n z-index: 1;\n }\n :after {\n content: '';\n position: absolute;\n left: 0px;\n top: 4px;\n bottom: 4px;\n width: 1px;\n background-color: ${(props) => props.theme.colors.neutral['080']};\n z-index: 7;\n }\n`;\n\n// eslint-disable-next-line react/prop-types\nexport const Toolbar: React.ComponentType = ({ children }) => {\n const [show, setShow] = useState(false);\n\n const toolbarRef = useRef(null);\n\n const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n const handleOnClick = useCallback(() => setShow(true), []);\n\n useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n return (\n <ToolbarPosition ref={toolbarRef}>\n <ToolbarWrapper onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>\n {show && <ToolbarBtns>{children}</ToolbarBtns>}\n <DSButtonV2\n buttonType=\"icon\"\n className=\"toolbar-trigger\"\n data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n onClick={handleOnClick}\n onKeyDown={(e) => ['Enter', 'Space'].includes(e.code) && handleOnClick()}\n tabIndex={0}\n >\n <MoreOptionsVert />\n </DSButtonV2>\n </ToolbarWrapper>\n </ToolbarPosition>\n );\n};\n"],
5
- "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAM3B,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc9B,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAoBP,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAMvD,MAAM,UAA+B,CAAC,EAAE,eAAe;AAC5D,QAAM,CAAC,MAAM,WAAW,SAAS,KAAK;AAEtC,QAAM,aAAa,OAAO,IAAI;AAE9B,QAAM,uBAAuB,YAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,gBAAgB,YAAY,MAAM,QAAQ,IAAI,GAAG,CAAC,CAAC;AAEzD,oBAAkB,YAAY,oBAAoB;AAElD,SACE,qCAAC;AAAA,IAAgB,KAAK;AAAA,KACpB,qCAAC;AAAA,IAAe,cAAc,MAAM,QAAQ,IAAI;AAAA,IAAG,cAAc,MAAM,QAAQ,KAAK;AAAA,KACjF,QAAQ,qCAAC,mBAAa,QAAS,GAChC,qCAAC;AAAA,IACC,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAa,YAAY;AAAA,IACzB,SAAS;AAAA,IACT,WAAW,CAAC,MAAM,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,KAAK,cAAc;AAAA,IACvE,UAAU;AAAA,KAEV,qCAAC,qBAAgB,CACnB,CACF,CACF;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants';\n\nconst ToolbarBtns = styled.div`\n & > .em-ds-toolbar {\n box-shadow: none;\n }\n`;\n\nconst ToolbarWrapper = styled.div`\n display: flex;\n align-items: center;\n height: 36px;\n margin-right: 1px;\n pointer-events: all;\n &:hover {\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n & > .toolbar-trigger {\n border: none;\n }\n }\n`;\n\nconst ToolbarPosition = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n background: white;\n height: 28px;\n margin-top: 4px;\n width: 100%;\n padding-left: 4px;\n &:hover {\n z-index: 1;\n }\n :after {\n content: '';\n position: absolute;\n left: 0px;\n top: 4px;\n bottom: 4px;\n width: 1px;\n background-color: ${(props) => props.theme.colors.neutral['080']};\n z-index: 7;\n }\n`;\n\n// eslint-disable-next-line react/prop-types\nexport const Toolbar: React.ComponentType = ({ children }) => {\n const [show, setShow] = useState(false);\n\n const toolbarRef = useRef(null);\n\n const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n const handleOnClick = useCallback(() => setShow(true), []);\n\n useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n return (\n <ToolbarPosition ref={toolbarRef} onClick={(e) => e.stopPropagation()}>\n <ToolbarWrapper onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>\n {show && <ToolbarBtns>{children}</ToolbarBtns>}\n <DSButtonV2\n buttonType=\"icon\"\n className=\"toolbar-trigger\"\n data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n onClick={handleOnClick}\n onKeyDown={(e) => ['Enter', 'Space'].includes(e.code) && handleOnClick()}\n tabIndex={0}\n >\n <MoreOptionsVert />\n </DSButtonV2>\n </ToolbarWrapper>\n </ToolbarPosition>\n );\n};\n"],
5
+ "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAM3B,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc9B,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAoBP,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAMvD,MAAM,UAA+B,CAAC,EAAE,eAAe;AAC5D,QAAM,CAAC,MAAM,WAAW,SAAS,KAAK;AAEtC,QAAM,aAAa,OAAO,IAAI;AAE9B,QAAM,uBAAuB,YAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,gBAAgB,YAAY,MAAM,QAAQ,IAAI,GAAG,CAAC,CAAC;AAEzD,oBAAkB,YAAY,oBAAoB;AAElD,SACE,qCAAC;AAAA,IAAgB,KAAK;AAAA,IAAY,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,KAClE,qCAAC;AAAA,IAAe,cAAc,MAAM,QAAQ,IAAI;AAAA,IAAG,cAAc,MAAM,QAAQ,KAAK;AAAA,KACjF,QAAQ,qCAAC,mBAAa,QAAS,GAChC,qCAAC;AAAA,IACC,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAa,YAAY;AAAA,IACzB,SAAS;AAAA,IACT,WAAW,CAAC,MAAM,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,KAAK,cAAc;AAAA,IACvE,UAAU;AAAA,KAEV,qCAAC,qBAAgB,CACnB,CACF,CACF;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/HoC/withConditionalDnDColumnContext.js CHANGED
@@ -75,7 +75,9 @@ const withConditionalDnDColumnContext = (Component) => (props) => {
75
75
  const el = document.body.querySelector(`[data-testid="${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}"]`);
76
76
  if (el) {
77
77
  const y = el.scrollTop;
78
- el.onscroll = () => el.scrollTo(0, y);
78
+ el.onscroll = () => {
79
+ el.scrollTo({ top: y });
80
+ };
79
81
  }
80
82
  }, []);
81
83
  const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({
package/dist/esm/parts/HoC/withConditionalDnDColumnContext.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/withConditionalDnDColumnContext.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { useHierarchyDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { arrayMove } from '@dnd-kit/sortable';\nimport { FunctionalHOC } from '../../types/FunctionalHoC';\nimport { DataTableContext } from '../../DataTableContext';\nimport { Item } from '../../helpers/dndkit/hierarchy/types';\nimport { TypescriptColumn } from '../../types/props';\nimport { HeaderCellGroup } from '../internal';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns';\n\ntype DnDGroupContextType = {\n activeIndex: number;\n};\n\nexport const DnDGroupContext = createContext<DnDGroupContextType>({\n activeIndex: undefined,\n});\n\nconst flattenColumns = (cols: TypescriptColumn[]) => {\n const flattened = [];\n const flatten = (col: TypescriptColumn, index, parentId = null) => {\n const { id } = col;\n flattened.push([{ id, parentId, index }, col]);\n if (col.columns)\n col.columns.forEach((subColumn: TypescriptColumn, childIndex: number) => flatten(subColumn, childIndex, id));\n };\n cols.forEach((col, index) => flatten(col, index));\n return flattened;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) => (props) => {\n const {\n tableProps: { dragAndDropColumns, onColumnsReorder },\n visibleColumns,\n } = React.useContext(DataTableContext);\n\n const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n const onReorder = useCallback(\n (movedItem: Item, indexes: { targetIndex: number; fromIndex: number }) => {\n // Send from index to target index\n const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);\n // Pull the cols's data into an object\n const nodes = {};\n newFlattenedData.forEach(([dndData, colData]) => {\n delete colData.columns;\n nodes[dndData.id] = colData;\n });\n const newData = [];\n newFlattenedData.forEach(([dndData, colData]) => {\n // Don't send internal columns to the user\n if (INTERNAL_COLUMNS.includes(dndData.id)) {\n return;\n }\n // If row has parent, insert it to it's subrows\n // otherwise append it to the new user data\n if (dndData.parentId) {\n const parentNode = nodes[dndData.parentId];\n if (parentNode.columns) parentNode.columns.push(colData);\n else parentNode.columns = [colData];\n } else newData.push(colData);\n });\n onColumnsReorder(newData, indexes);\n },\n [flattenedItems, onColumnsReorder],\n );\n\n const onPreviewResetState = useCallback(() => {\n const el: HTMLDivElement | null = document.body.querySelector(\n `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n );\n if (el) el.onscroll = () => null;\n }, []);\n\n const onPreviewDragStart = useCallback(() => {\n const el: HTMLDivElement | null = document.body.querySelector(\n `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n );\n if (el) {\n const y = el.scrollTop;\n el.onscroll = () => el.scrollTo(0, y);\n }\n }, []);\n\n const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n flattenedItems,\n dragOverlayDataTestid: DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY,\n isHorizontalDnD: true,\n onReorder,\n onPreviewResetState,\n onPreviewDragStart,\n });\n\n if (dragAndDropColumns)\n return (\n <DndContext {...dndContextProps}>\n <DnDGroupContext.Provider value={{ activeIndex }}>\n <Component {...props} />\n </DnDGroupContext.Provider>\n <DragOverlay>\n {activeId ? (\n <HeaderCellGroup header={flattenedItems.find(([item]) => item.id === activeId)[1]} isDragOverlay />\n ) : null}\n </DragOverlay>\n </DndContext>\n );\n return <Component {...props} />;\n};\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;AAAA;ACEA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AAMO,MAAM,kBAAkB,cAAmC;AAAA,EAChE,aAAa;AACf,CAAC;AAED,MAAM,iBAAiB,CAAC,SAA6B;AACnD,QAAM,YAAY,CAAC;AACnB,QAAM,UAAU,CAAC,KAAuB,OAAO,WAAW,SAAS;AACjE,UAAM,EAAE,OAAO;AACf,cAAU,KAAK,CAAC,EAAE,IAAI,UAAU,MAAM,GAAG,GAAG,CAAC;AAC7C,QAAI,IAAI;AACN,UAAI,QAAQ,QAAQ,CAAC,WAA6B,eAAuB,QAAQ,WAAW,YAAY,EAAE,CAAC;AAAA,EAC/G;AACA,OAAK,QAAQ,CAAC,KAAK,UAAU,QAAQ,KAAK,KAAK,CAAC;AAChD,SAAO;AACT;AAGO,MAAM,kCAAiD,CAAC,cAAc,CAAC,UAAU;AACtF,QAAM;AAAA,IACJ,YAAY,EAAE,oBAAoB;AAAA,IAClC;AAAA,MACE,OAAM,WAAW,gBAAgB;AAErC,QAAM,iBAAiB,QAAQ,MAAM,eAAe,cAAc,GAAG,CAAC,cAAc,CAAC;AAErF,QAAM,YAAY,YAChB,CAAC,WAAiB,YAAwD;AAExE,UAAM,mBAAmB,UAAU,gBAAgB,QAAQ,WAAW,QAAQ,WAAW;AAEzF,UAAM,QAAQ,CAAC;AACf,qBAAiB,QAAQ,CAAC,CAAC,SAAS,aAAa;AAC/C,aAAO,QAAQ;AACf,YAAM,QAAQ,MAAM;AAAA,IACtB,CAAC;AACD,UAAM,UAAU,CAAC;AACjB,qBAAiB,QAAQ,CAAC,CAAC,SAAS,aAAa;AAE/C,UAAI,iBAAiB,SAAS,QAAQ,EAAE,GAAG;AACzC;AAAA,MACF;AAGA,UAAI,QAAQ,UAAU;AACpB,cAAM,aAAa,MAAM,QAAQ;AACjC,YAAI,WAAW;AAAS,qBAAW,QAAQ,KAAK,OAAO;AAAA;AAClD,qBAAW,UAAU,CAAC,OAAO;AAAA,MACpC;AAAO,gBAAQ,KAAK,OAAO;AAAA,IAC7B,CAAC;AACD,qBAAiB,SAAS,OAAO;AAAA,EACnC,GACA,CAAC,gBAAgB,gBAAgB,CACnC;AAEA,QAAM,sBAAsB,YAAY,MAAM;AAC5C,UAAM,KAA4B,SAAS,KAAK,cAC9C,iBAAiB,YAAY,mCAC/B;AACA,QAAI;AAAI,SAAG,WAAW,MAAM;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAqB,YAAY,MAAM;AAC3C,UAAM,KAA4B,SAAS,KAAK,cAC9C,iBAAiB,YAAY,mCAC/B;AACA,QAAI,IAAI;AACN,YAAM,IAAI,GAAG;AACb,SAAG,WAAW,MAAM,GAAG,SAAS,GAAG,CAAC;AAAA,IACtC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,iBAAiB,UAAU,gBAAgB,yBAAyB;AAAA,IAC1E;AAAA,IACA,uBAAuB,YAAY;AAAA,IACnC,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI;AACF,WACE,qCAAC,+BAAe,kBACd,qCAAC,gBAAgB,UAAhB;AAAA,MAAyB,OAAO,EAAE,YAAY;AAAA,OAC7C,qCAAC,8BAAc,MAAO,CACxB,GACA,qCAAC,mBACE,WACC,qCAAC;AAAA,MAAgB,QAAQ,eAAe,KAAK,CAAC,CAAC,UAAU,KAAK,OAAO,QAAQ,EAAE;AAAA,MAAI,eAAa;AAAA,KAAC,IAC/F,IACN,CACF;AAEJ,SAAO,qCAAC,8BAAc,MAAO;AAC/B;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { useHierarchyDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { arrayMove } from '@dnd-kit/sortable';\nimport { FunctionalHOC } from '../../types/FunctionalHoC';\nimport { DataTableContext } from '../../DataTableContext';\nimport { Item } from '../../helpers/dndkit/hierarchy/types';\nimport { TypescriptColumn } from '../../types/props';\nimport { HeaderCellGroup } from '../internal';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns';\n\ntype DnDGroupContextType = {\n activeIndex: number;\n};\n\nexport const DnDGroupContext = createContext<DnDGroupContextType>({\n activeIndex: undefined,\n});\n\nconst flattenColumns = (cols: TypescriptColumn[]) => {\n const flattened = [];\n const flatten = (col: TypescriptColumn, index, parentId = null) => {\n const { id } = col;\n flattened.push([{ id, parentId, index }, col]);\n if (col.columns)\n col.columns.forEach((subColumn: TypescriptColumn, childIndex: number) => flatten(subColumn, childIndex, id));\n };\n cols.forEach((col, index) => flatten(col, index));\n return flattened;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) => (props) => {\n const {\n tableProps: { dragAndDropColumns, onColumnsReorder },\n visibleColumns,\n } = React.useContext(DataTableContext);\n\n const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n const onReorder = useCallback(\n (movedItem: Item, indexes: { targetIndex: number; fromIndex: number }) => {\n // Send from index to target index\n const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);\n // Pull the cols's data into an object\n const nodes = {};\n newFlattenedData.forEach(([dndData, colData]) => {\n delete colData.columns;\n nodes[dndData.id] = colData;\n });\n const newData = [];\n newFlattenedData.forEach(([dndData, colData]) => {\n // Don't send internal columns to the user\n if (INTERNAL_COLUMNS.includes(dndData.id)) {\n return;\n }\n // If row has parent, insert it to it's subrows\n // otherwise append it to the new user data\n if (dndData.parentId) {\n const parentNode = nodes[dndData.parentId];\n if (parentNode.columns) parentNode.columns.push(colData);\n else parentNode.columns = [colData];\n } else newData.push(colData);\n });\n onColumnsReorder(newData, indexes);\n },\n [flattenedItems, onColumnsReorder],\n );\n\n const onPreviewResetState = useCallback(() => {\n const el: HTMLDivElement | null = document.body.querySelector(\n `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n );\n if (el) el.onscroll = () => null;\n }, []);\n\n const onPreviewDragStart = useCallback(() => {\n const el: HTMLDivElement | null = document.body.querySelector(\n `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n );\n if (el) {\n const y = el.scrollTop;\n el.onscroll = () => {\n el.scrollTo({ top: y });\n };\n }\n }, []);\n\n const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n flattenedItems,\n dragOverlayDataTestid: DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY,\n isHorizontalDnD: true,\n onReorder,\n onPreviewResetState,\n onPreviewDragStart,\n });\n\n if (dragAndDropColumns)\n return (\n <DndContext {...dndContextProps}>\n <DnDGroupContext.Provider value={{ activeIndex }}>\n <Component {...props} />\n </DnDGroupContext.Provider>\n <DragOverlay>\n {activeId ? (\n <HeaderCellGroup header={flattenedItems.find(([item]) => item.id === activeId)[1]} isDragOverlay />\n ) : null}\n </DragOverlay>\n </DndContext>\n );\n return <Component {...props} />;\n};\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;AAAA;ACEA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AAMO,MAAM,kBAAkB,cAAmC;AAAA,EAChE,aAAa;AACf,CAAC;AAED,MAAM,iBAAiB,CAAC,SAA6B;AACnD,QAAM,YAAY,CAAC;AACnB,QAAM,UAAU,CAAC,KAAuB,OAAO,WAAW,SAAS;AACjE,UAAM,EAAE,OAAO;AACf,cAAU,KAAK,CAAC,EAAE,IAAI,UAAU,MAAM,GAAG,GAAG,CAAC;AAC7C,QAAI,IAAI;AACN,UAAI,QAAQ,QAAQ,CAAC,WAA6B,eAAuB,QAAQ,WAAW,YAAY,EAAE,CAAC;AAAA,EAC/G;AACA,OAAK,QAAQ,CAAC,KAAK,UAAU,QAAQ,KAAK,KAAK,CAAC;AAChD,SAAO;AACT;AAGO,MAAM,kCAAiD,CAAC,cAAc,CAAC,UAAU;AACtF,QAAM;AAAA,IACJ,YAAY,EAAE,oBAAoB;AAAA,IAClC;AAAA,MACE,OAAM,WAAW,gBAAgB;AAErC,QAAM,iBAAiB,QAAQ,MAAM,eAAe,cAAc,GAAG,CAAC,cAAc,CAAC;AAErF,QAAM,YAAY,YAChB,CAAC,WAAiB,YAAwD;AAExE,UAAM,mBAAmB,UAAU,gBAAgB,QAAQ,WAAW,QAAQ,WAAW;AAEzF,UAAM,QAAQ,CAAC;AACf,qBAAiB,QAAQ,CAAC,CAAC,SAAS,aAAa;AAC/C,aAAO,QAAQ;AACf,YAAM,QAAQ,MAAM;AAAA,IACtB,CAAC;AACD,UAAM,UAAU,CAAC;AACjB,qBAAiB,QAAQ,CAAC,CAAC,SAAS,aAAa;AAE/C,UAAI,iBAAiB,SAAS,QAAQ,EAAE,GAAG;AACzC;AAAA,MACF;AAGA,UAAI,QAAQ,UAAU;AACpB,cAAM,aAAa,MAAM,QAAQ;AACjC,YAAI,WAAW;AAAS,qBAAW,QAAQ,KAAK,OAAO;AAAA;AAClD,qBAAW,UAAU,CAAC,OAAO;AAAA,MACpC;AAAO,gBAAQ,KAAK,OAAO;AAAA,IAC7B,CAAC;AACD,qBAAiB,SAAS,OAAO;AAAA,EACnC,GACA,CAAC,gBAAgB,gBAAgB,CACnC;AAEA,QAAM,sBAAsB,YAAY,MAAM;AAC5C,UAAM,KAA4B,SAAS,KAAK,cAC9C,iBAAiB,YAAY,mCAC/B;AACA,QAAI;AAAI,SAAG,WAAW,MAAM;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAqB,YAAY,MAAM;AAC3C,UAAM,KAA4B,SAAS,KAAK,cAC9C,iBAAiB,YAAY,mCAC/B;AACA,QAAI,IAAI;AACN,YAAM,IAAI,GAAG;AACb,SAAG,WAAW,MAAM;AAClB,WAAG,SAAS,EAAE,KAAK,EAAE,CAAC;AAAA,MACxB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,iBAAiB,UAAU,gBAAgB,yBAAyB;AAAA,IAC1E;AAAA,IACA,uBAAuB,YAAY;AAAA,IACnC,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI;AACF,WACE,qCAAC,+BAAe,kBACd,qCAAC,gBAAgB,UAAhB;AAAA,MAAyB,OAAO,EAAE,YAAY;AAAA,OAC7C,qCAAC,8BAAc,MAAO,CACxB,GACA,qCAAC,mBACE,WACC,qCAAC;AAAA,MAAgB,QAAQ,eAAe,KAAK,CAAC,CAAC,UAAU,KAAK,OAAO,QAAQ,EAAE;AAAA,MAAI,eAAa;AAAA,KAAC,IAC/F,IACN,CACF;AAEJ,SAAO,qCAAC,8BAAc,MAAO;AAC/B;",
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.0.0-next.75",
3
+ "version": "3.0.0-next.78",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Data Table",
6
6
  "files": [