@elliemae/ds-data-table 3.0.0-next.76 → 3.0.0-next.77
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/exported-related/RowRenderer/useRowRendererHandlers.js +5 -1
- package/dist/cjs/exported-related/RowRenderer/useRowRendererHandlers.js.map +2 -2
- package/dist/cjs/exported-related/Toolbar/Toolbar.js +2 -1
- package/dist/cjs/exported-related/Toolbar/Toolbar.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/exported-related/RowRenderer/useRowRendererHandlers.js +5 -1
- package/dist/esm/exported-related/RowRenderer/useRowRendererHandlers.js.map +2 -2
- package/dist/esm/exported-related/Toolbar/Toolbar.js +2 -1
- package/dist/esm/exported-related/Toolbar/Toolbar.js.map +2 -2
- package/package.json +1 -1
|
@@ -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(
|
|
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",
|
|
@@ -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
|
|
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
|
}
|
|
@@ -79,7 +79,11 @@ const useRowRendererHandlers = ({
|
|
|
79
79
|
}
|
|
80
80
|
}
|
|
81
81
|
if (e.code === "Space") {
|
|
82
|
-
e
|
|
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") {
|
|
@@ -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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,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,IACtC,oBAAoB,EAAE;AAAA,IACtB;AAAA,IACA;AAAA,MACE,6BAAW,wCAAgB;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,8BACtB,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,8BACpB,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,
|
|
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
|
}
|
|
@@ -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)
|
|
@@ -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,
|
|
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
|
}
|
|
@@ -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(
|
|
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",
|
|
@@ -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
|
|
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
|
}
|
|
@@ -54,7 +54,11 @@ const useRowRendererHandlers = ({
|
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
if (e.code === "Space") {
|
|
57
|
-
e
|
|
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") {
|
|
@@ -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,
|
|
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
|
}
|
|
@@ -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)
|
|
@@ -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,
|
|
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
|
}
|