@elliemae/ds-data-table 3.34.0-rc.0 → 3.34.0

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.
@@ -59,7 +59,6 @@ const ToolbarWrapper = (0, import_ds_system.styled)("div", { name: import_DSData
59
59
  }
60
60
 
61
61
  ${({ isOpen }) => isOpen && boxShadow}
62
- margin-right: 4px;
63
62
  `;
64
63
  const StyledButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.TOOLBAR_BUTTON })`
65
64
  background-color: transparent;
@@ -73,7 +72,7 @@ const ToolbarPosition = (0, import_ds_system.styled)("div", { name: import_DSDat
73
72
  height: 28px;
74
73
  margin-top: 4px;
75
74
  width: 100%;
76
- padding-left: 4px;
75
+ padding-left: 2px;
77
76
  outline: none;
78
77
  &:hover {
79
78
  z-index: 1;
@@ -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, css } from '@elliemae/ds-system';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside, mergeRefs } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../DSDataTableDefinitions.js';\n\nconst ToolbarBtns = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTONS_WRAPPER })``;\n\nconst boxShadow = css`\n box-shadow:\n 0 1px 2px 0 rgba(0, 0, 0, 0.13),\n 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n & > .toolbar-trigger {\n border: none;\n }\n`;\n\nconst ToolbarWrapper = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_WRAPPER })<{\n isOpen: boolean;\n}>`\n display: flex;\n align-items: center;\n pointer-events: all;\n\n & .toolbar-trigger:focus {\n z-index: 8;\n }\n\n ${({ isOpen }) => isOpen && boxShadow}\n margin-right: 4px;\n`;\n\nconst StyledButton = styled(DSButtonV3, { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTON })`\n background-color: transparent;\n`;\n\nconst ToolbarPosition = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_POSITION })`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n background: transparent;\n height: 28px;\n margin-top: 4px;\n width: 100%;\n padding-left: 4px;\n outline: none;\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: neutral-080;\n z-index: 7;\n }\n`;\n\ninterface ToolbarProps {\n isRowSelected?: boolean;\n cell: DSDataTableT.Cell;\n children: React.ReactNode;\n}\n\nexport const Toolbar: React.ComponentType<ToolbarProps> = ({ isRowSelected, cell, children }) => {\n const [show, setShow] = useState(false);\n\n const toolbarRef = useRef<HTMLDivElement | null>(null);\n const toolbarTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n const handleOnClick = useCallback(() => setShow((prev) => !prev), []);\n\n const stopPropagation: React.MouseEventHandler = useCallback((e) => e.stopPropagation(), []);\n\n useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (e.code === 'Escape') {\n setShow(false);\n toolbarTriggerRef.current?.focus();\n }\n e.stopPropagation();\n }, []);\n\n const handleOnBlurToolBar = useCallback(() => {\n setTimeout(() => {\n if (!toolbarRef?.current?.contains?.(document.activeElement)) {\n setShow(false);\n }\n });\n }, []);\n\n return (\n <ToolbarPosition onBlur={handleOnBlurToolBar} innerRef={toolbarRef} tabIndex={-1}>\n <ToolbarWrapper onKeyDown={onToolbarKeyDown} onClick={stopPropagation} isOpen={show}>\n {show && <ToolbarBtns>{children}</ToolbarBtns>}\n <StyledButton\n buttonType=\"icon\"\n className=\"toolbar-trigger\"\n data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n innerRef={mergeRefs(toolbarTriggerRef, cell?.ref)}\n onClick={handleOnClick}\n tabIndex={isRowSelected === false ? -1 : 0}\n aria-label=\"Row actions\"\n >\n <MoreOptionsVert />\n </StyledButton>\n </ToolbarWrapper>\n </ToolbarPosition>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuGjB;AAvGN,mBAAqD;AACrD,uBAA4B;AAC5B,0BAA2B;AAC3B,sBAAgC;AAChC,0BAA6C;AAC7C,uBAA4B;AAE5B,oCAAkD;AAElD,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,wBAAwB,CAAC;AAE3G,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlB,MAAM,qBAAiB,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWlG,CAAC,EAAE,OAAO,MAAM,UAAU;AAAA;AAAA;AAI9B,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,eAAe,CAAC;AAAA;AAAA;AAIxG,MAAM,sBAAkB,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,iBAAiB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCjG,MAAM,UAA6C,CAAC,EAAE,eAAe,MAAM,SAAS,MAAM;AAC/F,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AAEtC,QAAM,iBAAa,qBAA8B,IAAI;AACrD,QAAM,wBAAoB,qBAAiC,IAAI;AAE/D,QAAM,2BAAuB,0BAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,oBAAgB,0BAAY,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;AAEpE,QAAM,sBAA2C,0BAAY,CAAC,MAAM,EAAE,gBAAgB,GAAG,CAAC,CAAC;AAE3F,6CAAkB,YAAY,oBAAoB;AAElD,QAAM,uBAAmB,0BAAY,CAAC,MAA2B;AAC/D,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,wBAAkB,SAAS,MAAM;AAAA,IACnC;AACA,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,eAAW,MAAM;AACf,UAAI,CAAC,YAAY,SAAS,WAAW,SAAS,aAAa,GAAG;AAC5D,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SACE,4CAAC,mBAAgB,QAAQ,qBAAqB,UAAU,YAAY,UAAU,IAC5E,uDAAC,kBAAe,WAAW,kBAAkB,SAAS,iBAAiB,QAAQ,MAC5E;AAAA,YAAQ,4CAAC,eAAa,UAAS;AAAA,IAChC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAa,6BAAY;AAAA,QACzB,cAAU,+BAAU,mBAAmB,MAAM,GAAG;AAAA,QAChD,SAAS;AAAA,QACT,UAAU,kBAAkB,QAAQ,KAAK;AAAA,QACzC,cAAW;AAAA,QAEX,sDAAC,mCAAgB;AAAA;AAAA,IACnB;AAAA,KACF,GACF;AAEJ;",
4
+ "sourcesContent": ["import React, { useCallback, useRef, useState } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside, mergeRefs } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../DSDataTableDefinitions.js';\n\nconst ToolbarBtns = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTONS_WRAPPER })``;\n\nconst boxShadow = css`\n box-shadow:\n 0 1px 2px 0 rgba(0, 0, 0, 0.13),\n 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n & > .toolbar-trigger {\n border: none;\n }\n`;\n\nconst ToolbarWrapper = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_WRAPPER })<{\n isOpen: boolean;\n}>`\n display: flex;\n align-items: center;\n pointer-events: all;\n\n & .toolbar-trigger:focus {\n z-index: 8;\n }\n\n ${({ isOpen }) => isOpen && boxShadow}\n`;\n\nconst StyledButton = styled(DSButtonV3, { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTON })`\n background-color: transparent;\n`;\n\nconst ToolbarPosition = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_POSITION })`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n background: transparent;\n height: 28px;\n margin-top: 4px;\n width: 100%;\n padding-left: 2px;\n outline: none;\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: neutral-080;\n z-index: 7;\n }\n`;\n\ninterface ToolbarProps {\n isRowSelected?: boolean;\n cell: DSDataTableT.Cell;\n children: React.ReactNode;\n}\n\nexport const Toolbar: React.ComponentType<ToolbarProps> = ({ isRowSelected, cell, children }) => {\n const [show, setShow] = useState(false);\n\n const toolbarRef = useRef<HTMLDivElement | null>(null);\n const toolbarTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n const handleOnClick = useCallback(() => setShow((prev) => !prev), []);\n\n const stopPropagation: React.MouseEventHandler = useCallback((e) => e.stopPropagation(), []);\n\n useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (e.code === 'Escape') {\n setShow(false);\n toolbarTriggerRef.current?.focus();\n }\n e.stopPropagation();\n }, []);\n\n const handleOnBlurToolBar = useCallback(() => {\n setTimeout(() => {\n if (!toolbarRef?.current?.contains?.(document.activeElement)) {\n setShow(false);\n }\n });\n }, []);\n\n return (\n <ToolbarPosition onBlur={handleOnBlurToolBar} innerRef={toolbarRef} tabIndex={-1}>\n <ToolbarWrapper onKeyDown={onToolbarKeyDown} onClick={stopPropagation} isOpen={show}>\n {show && <ToolbarBtns>{children}</ToolbarBtns>}\n <StyledButton\n buttonType=\"icon\"\n className=\"toolbar-trigger\"\n data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n innerRef={mergeRefs(toolbarTriggerRef, cell?.ref)}\n onClick={handleOnClick}\n tabIndex={isRowSelected === false ? -1 : 0}\n aria-label=\"Row actions\"\n >\n <MoreOptionsVert />\n </StyledButton>\n </ToolbarWrapper>\n </ToolbarPosition>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsGjB;AAtGN,mBAAqD;AACrD,uBAA4B;AAC5B,0BAA2B;AAC3B,sBAAgC;AAChC,0BAA6C;AAC7C,uBAA4B;AAE5B,oCAAkD;AAElD,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,wBAAwB,CAAC;AAE3G,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlB,MAAM,qBAAiB,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWlG,CAAC,EAAE,OAAO,MAAM,UAAU;AAAA;AAG9B,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,eAAe,CAAC;AAAA;AAAA;AAIxG,MAAM,sBAAkB,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,iBAAiB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCjG,MAAM,UAA6C,CAAC,EAAE,eAAe,MAAM,SAAS,MAAM;AAC/F,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AAEtC,QAAM,iBAAa,qBAA8B,IAAI;AACrD,QAAM,wBAAoB,qBAAiC,IAAI;AAE/D,QAAM,2BAAuB,0BAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,oBAAgB,0BAAY,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;AAEpE,QAAM,sBAA2C,0BAAY,CAAC,MAAM,EAAE,gBAAgB,GAAG,CAAC,CAAC;AAE3F,6CAAkB,YAAY,oBAAoB;AAElD,QAAM,uBAAmB,0BAAY,CAAC,MAA2B;AAC/D,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,wBAAkB,SAAS,MAAM;AAAA,IACnC;AACA,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,eAAW,MAAM;AACf,UAAI,CAAC,YAAY,SAAS,WAAW,SAAS,aAAa,GAAG;AAC5D,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SACE,4CAAC,mBAAgB,QAAQ,qBAAqB,UAAU,YAAY,UAAU,IAC5E,uDAAC,kBAAe,WAAW,kBAAkB,SAAS,iBAAiB,QAAQ,MAC5E;AAAA,YAAQ,4CAAC,eAAa,UAAS;AAAA,IAChC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAa,6BAAY;AAAA,QACzB,cAAU,+BAAU,mBAAmB,MAAM,GAAG;AAAA,QAChD,SAAS;AAAA,QACT,UAAU,kBAAkB,QAAQ,KAAK;AAAA,QACzC,cAAW;AAAA,QAEX,sDAAC,mCAAgB;AAAA;AAAA,IACnB;AAAA,KACF,GACF;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -49,14 +49,16 @@ const withConditionalDnDRowContext = (Component) => (props) => {
49
49
  const allDataFlattened = (0, import_useStore.usePropsStore)((state) => state.allDataFlattened);
50
50
  const onReorder = (0, import_react.useCallback)(
51
51
  (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {
52
- const rootMovedData = structuredClone(movedData.root);
52
+ const rootMovedData = movedData.root;
53
53
  const nodes = {};
54
- const newUserData = [];
55
54
  rootMovedData.forEach((row) => {
56
55
  if (row.original.subRows)
57
56
  delete row.original.subRows;
58
57
  delete row.original.subRows;
59
58
  nodes[row.uid] = row.original;
59
+ });
60
+ const newUserData = [];
61
+ rootMovedData.forEach((row) => {
60
62
  if (row.parentId) {
61
63
  const parentNode = nodes[row.parentId];
62
64
  if (parentNode?.subRows)
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/HoC/withConditionalDnDRowContext.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useMemo } from 'react';\nimport {\n DndContext,\n DragOverlay,\n SortableContext,\n useTreeDndkitConfig,\n restrictToFirstScrollableAncestor,\n type DnDKitTree,\n} from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { Row } from '../Row.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n const dragAndDropRows = usePropsStore((state) => state.dragAndDropRows);\n const isExpandable = usePropsStore((state) => state.isExpandable);\n const onRowsReorder = usePropsStore((state) => state.onRowsReorder);\n const maxDragAndDropLevel = usePropsStore((state) => state.maxDragAndDropLevel);\n const getIsDropValid = usePropsStore((state) => state.getIsDropValid);\n const flattenedData = usePropsStore((state) => state.flattenedData);\n const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n\n const onReorder: DnDKitTree.OnReorder<DSDataTableT.Row> = useCallback(\n (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {\n const rootMovedData = structuredClone(movedData.root);\n // Pull the row's original data into an object\n const nodes: Record<string, DSDataTableT.Row> = {};\n const newUserData = [] as DSDataTableT.Row[];\n rootMovedData.forEach((row) => {\n if (row.original.subRows) delete row.original.subRows;\n delete row.original.subRows;\n nodes[row.uid] = row.original;\n\n // If row has parent, insert it to it's subrows\n // otherwise append it to the new user data\n if (row.parentId) {\n const parentNode = nodes[row.parentId];\n if (parentNode?.subRows) parentNode.subRows.push(row.original);\n else parentNode.subRows = [row.original];\n } else newUserData.push(row.original);\n });\n // Tell the user that the order has change, he can chose to commit it or not\n onRowsReorder(newUserData, { targetIndex, fromIndex }, considerExpanding as string | null, {\n flattenedData,\n allDataFlattened,\n });\n },\n [allDataFlattened, flattenedData, onRowsReorder],\n );\n\n const theFlattenedItems = useMemo(\n () => allDataFlattened.map((datum) => ({ ...datum, collapsed: !datum.isExpanded, subitems: [] })),\n [allDataFlattened],\n );\n\n const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({\n flattenedItems: theFlattenedItems,\n isHorizontalDnD: false,\n isExpandable,\n onReorder,\n maxDragAndDropLevel,\n getIsDropValid: getIsDropValid,\n });\n\n const containerSortableContextProps = sortableContextProps.root;\n\n const visibleItems = useMemo(() => {\n // active in this case is the row that is being dragged\n // if no drag is happening, return the flattened data as is\n if (!active) return flattenedData;\n // if a drag is happening, exclude the children of the dragged row\n // this is a design choice, this way the user can't drag a parent row into one of it's children.\n const excludeParentIds = [active.id];\n return flattenedData.filter((datum) => {\n const isParentExcluded = datum.parentId !== null && excludeParentIds.includes(datum.parentId);\n if (isParentExcluded) {\n excludeParentIds.push(datum.uid);\n return false;\n }\n return true;\n });\n }, [active, flattenedData]);\n\n const ctx = useMemo(\n () => ({\n visibleItems,\n dropIndicatorPosition,\n isDropValid,\n }),\n [visibleItems, dropIndicatorPosition, isDropValid],\n );\n\n const dragOverlayRow = useMemo(\n () => (active ? flattenedData.find((row) => row.uid === active.id) : null),\n [active, flattenedData],\n );\n\n if (dragAndDropRows)\n return (\n <DndContext {...dndContextProps}>\n <SortableContext {...containerSortableContextProps}>\n <DnDTreeContext.Provider value={ctx}>\n <Component {...props} />\n </DnDTreeContext.Provider>\n </SortableContext>\n {createPortal(\n <DragOverlay style={{ width: 'auto' }} modifiers={[restrictToFirstScrollableAncestor]}>\n {active ? <Row row={dragOverlayRow as DSDataTableT.InternalRow} isDragOverlay /> : null}\n </DragOverlay>,\n document.body,\n )}\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 react/function-component-definition */\nimport React, { useCallback, useMemo } from 'react';\nimport {\n DndContext,\n DragOverlay,\n SortableContext,\n useTreeDndkitConfig,\n restrictToFirstScrollableAncestor,\n type DnDKitTree,\n} from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { Row } from '../Row.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n const dragAndDropRows = usePropsStore((state) => state.dragAndDropRows);\n const isExpandable = usePropsStore((state) => state.isExpandable);\n const onRowsReorder = usePropsStore((state) => state.onRowsReorder);\n const maxDragAndDropLevel = usePropsStore((state) => state.maxDragAndDropLevel);\n const getIsDropValid = usePropsStore((state) => state.getIsDropValid);\n const flattenedData = usePropsStore((state) => state.flattenedData);\n const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n\n const onReorder: DnDKitTree.OnReorder<DSDataTableT.Row> = useCallback(\n (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {\n const rootMovedData = movedData.root;\n // Pull the row's original data into an object\n const nodes: Record<string, DSDataTableT.Row> = {};\n rootMovedData.forEach((row) => {\n if (row.original.subRows) delete row.original.subRows;\n delete row.original.subRows;\n nodes[row.uid] = row.original;\n });\n const newUserData = [] as DSDataTableT.Row[];\n rootMovedData.forEach((row) => {\n // If row has parent, insert it to it's subrows\n // otherwise append it to the new user data\n if (row.parentId) {\n const parentNode = nodes[row.parentId];\n if (parentNode?.subRows) parentNode.subRows.push(row.original);\n else parentNode.subRows = [row.original];\n } else newUserData.push(row.original);\n });\n // Tell the user that the order has change, he can chose to commit it or not\n onRowsReorder(newUserData, { targetIndex, fromIndex }, considerExpanding as string | null, {\n flattenedData,\n allDataFlattened,\n });\n },\n [allDataFlattened, flattenedData, onRowsReorder],\n );\n\n const theFlattenedItems = useMemo(\n () => allDataFlattened.map((datum) => ({ ...datum, collapsed: !datum.isExpanded, subitems: [] })),\n [allDataFlattened],\n );\n\n const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({\n flattenedItems: theFlattenedItems,\n isHorizontalDnD: false,\n isExpandable,\n onReorder,\n maxDragAndDropLevel,\n getIsDropValid: getIsDropValid,\n });\n\n const containerSortableContextProps = sortableContextProps.root;\n\n const visibleItems = useMemo(() => {\n // active in this case is the row that is being dragged\n // if no drag is happening, return the flattened data as is\n if (!active) return flattenedData;\n // if a drag is happening, exclude the children of the dragged row\n // this is a design choice, this way the user can't drag a parent row into one of it's children.\n const excludeParentIds = [active.id];\n return flattenedData.filter((datum) => {\n const isParentExcluded = datum.parentId !== null && excludeParentIds.includes(datum.parentId);\n if (isParentExcluded) {\n excludeParentIds.push(datum.uid);\n return false;\n }\n return true;\n });\n }, [active, flattenedData]);\n\n const ctx = useMemo(\n () => ({\n visibleItems,\n dropIndicatorPosition,\n isDropValid,\n }),\n [visibleItems, dropIndicatorPosition, isDropValid],\n );\n\n const dragOverlayRow = useMemo(\n () => (active ? flattenedData.find((row) => row.uid === active.id) : null),\n [active, flattenedData],\n );\n\n if (dragAndDropRows)\n return (\n <DndContext {...dndContextProps}>\n <SortableContext {...containerSortableContextProps}>\n <DnDTreeContext.Provider value={ctx}>\n <Component {...props} />\n </DnDTreeContext.Provider>\n </SortableContext>\n {createPortal(\n <DragOverlay style={{ width: 'auto' }} modifiers={[restrictToFirstScrollableAncestor]}>\n {active ? <Row row={dragOverlayRow as DSDataTableT.InternalRow} isDragOverlay /> : null}\n </DragOverlay>,\n document.body,\n )}\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
  }
@@ -26,7 +26,6 @@ const ToolbarWrapper = styled("div", { name: DSDataTableName, slot: DSDataTableS
26
26
  }
27
27
 
28
28
  ${({ isOpen }) => isOpen && boxShadow}
29
- margin-right: 4px;
30
29
  `;
31
30
  const StyledButton = styled(DSButtonV3, { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTON })`
32
31
  background-color: transparent;
@@ -40,7 +39,7 @@ const ToolbarPosition = styled("div", { name: DSDataTableName, slot: DSDataTable
40
39
  height: 28px;
41
40
  margin-top: 4px;
42
41
  width: 100%;
43
- padding-left: 4px;
42
+ padding-left: 2px;
44
43
  outline: none;
45
44
  &:hover {
46
45
  z-index: 1;
@@ -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, css } from '@elliemae/ds-system';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside, mergeRefs } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../DSDataTableDefinitions.js';\n\nconst ToolbarBtns = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTONS_WRAPPER })``;\n\nconst boxShadow = css`\n box-shadow:\n 0 1px 2px 0 rgba(0, 0, 0, 0.13),\n 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n & > .toolbar-trigger {\n border: none;\n }\n`;\n\nconst ToolbarWrapper = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_WRAPPER })<{\n isOpen: boolean;\n}>`\n display: flex;\n align-items: center;\n pointer-events: all;\n\n & .toolbar-trigger:focus {\n z-index: 8;\n }\n\n ${({ isOpen }) => isOpen && boxShadow}\n margin-right: 4px;\n`;\n\nconst StyledButton = styled(DSButtonV3, { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTON })`\n background-color: transparent;\n`;\n\nconst ToolbarPosition = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_POSITION })`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n background: transparent;\n height: 28px;\n margin-top: 4px;\n width: 100%;\n padding-left: 4px;\n outline: none;\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: neutral-080;\n z-index: 7;\n }\n`;\n\ninterface ToolbarProps {\n isRowSelected?: boolean;\n cell: DSDataTableT.Cell;\n children: React.ReactNode;\n}\n\nexport const Toolbar: React.ComponentType<ToolbarProps> = ({ isRowSelected, cell, children }) => {\n const [show, setShow] = useState(false);\n\n const toolbarRef = useRef<HTMLDivElement | null>(null);\n const toolbarTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n const handleOnClick = useCallback(() => setShow((prev) => !prev), []);\n\n const stopPropagation: React.MouseEventHandler = useCallback((e) => e.stopPropagation(), []);\n\n useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (e.code === 'Escape') {\n setShow(false);\n toolbarTriggerRef.current?.focus();\n }\n e.stopPropagation();\n }, []);\n\n const handleOnBlurToolBar = useCallback(() => {\n setTimeout(() => {\n if (!toolbarRef?.current?.contains?.(document.activeElement)) {\n setShow(false);\n }\n });\n }, []);\n\n return (\n <ToolbarPosition onBlur={handleOnBlurToolBar} innerRef={toolbarRef} tabIndex={-1}>\n <ToolbarWrapper onKeyDown={onToolbarKeyDown} onClick={stopPropagation} isOpen={show}>\n {show && <ToolbarBtns>{children}</ToolbarBtns>}\n <StyledButton\n buttonType=\"icon\"\n className=\"toolbar-trigger\"\n data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n innerRef={mergeRefs(toolbarTriggerRef, cell?.ref)}\n onClick={handleOnClick}\n tabIndex={isRowSelected === false ? -1 : 0}\n aria-label=\"Row actions\"\n >\n <MoreOptionsVert />\n </StyledButton>\n </ToolbarWrapper>\n </ToolbarPosition>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACuGjB,SACW,KADX;AAvGN,SAAgB,aAAa,QAAQ,gBAAgB;AACrD,SAAS,QAAQ,WAAW;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB,iBAAiB;AAC7C,SAAS,mBAAmB;AAE5B,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,wBAAwB,CAAC;AAE3G,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlB,MAAM,iBAAiB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWlG,CAAC,EAAE,OAAO,MAAM,UAAU;AAAA;AAAA;AAI9B,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,eAAe,CAAC;AAAA;AAAA;AAIxG,MAAM,kBAAkB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,iBAAiB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCjG,MAAM,UAA6C,CAAC,EAAE,eAAe,MAAM,SAAS,MAAM;AAC/F,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,QAAM,aAAa,OAA8B,IAAI;AACrD,QAAM,oBAAoB,OAAiC,IAAI;AAE/D,QAAM,uBAAuB,YAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,gBAAgB,YAAY,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;AAEpE,QAAM,kBAA2C,YAAY,CAAC,MAAM,EAAE,gBAAgB,GAAG,CAAC,CAAC;AAE3F,oBAAkB,YAAY,oBAAoB;AAElD,QAAM,mBAAmB,YAAY,CAAC,MAA2B;AAC/D,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,wBAAkB,SAAS,MAAM;AAAA,IACnC;AACA,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAsB,YAAY,MAAM;AAC5C,eAAW,MAAM;AACf,UAAI,CAAC,YAAY,SAAS,WAAW,SAAS,aAAa,GAAG;AAC5D,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,mBAAgB,QAAQ,qBAAqB,UAAU,YAAY,UAAU,IAC5E,+BAAC,kBAAe,WAAW,kBAAkB,SAAS,iBAAiB,QAAQ,MAC5E;AAAA,YAAQ,oBAAC,eAAa,UAAS;AAAA,IAChC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAa,YAAY;AAAA,QACzB,UAAU,UAAU,mBAAmB,MAAM,GAAG;AAAA,QAChD,SAAS;AAAA,QACT,UAAU,kBAAkB,QAAQ,KAAK;AAAA,QACzC,cAAW;AAAA,QAEX,8BAAC,mBAAgB;AAAA;AAAA,IACnB;AAAA,KACF,GACF;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useRef, useState } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside, mergeRefs } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../DSDataTableDefinitions.js';\n\nconst ToolbarBtns = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTONS_WRAPPER })``;\n\nconst boxShadow = css`\n box-shadow:\n 0 1px 2px 0 rgba(0, 0, 0, 0.13),\n 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n & > .toolbar-trigger {\n border: none;\n }\n`;\n\nconst ToolbarWrapper = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_WRAPPER })<{\n isOpen: boolean;\n}>`\n display: flex;\n align-items: center;\n pointer-events: all;\n\n & .toolbar-trigger:focus {\n z-index: 8;\n }\n\n ${({ isOpen }) => isOpen && boxShadow}\n`;\n\nconst StyledButton = styled(DSButtonV3, { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTON })`\n background-color: transparent;\n`;\n\nconst ToolbarPosition = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_POSITION })`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n background: transparent;\n height: 28px;\n margin-top: 4px;\n width: 100%;\n padding-left: 2px;\n outline: none;\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: neutral-080;\n z-index: 7;\n }\n`;\n\ninterface ToolbarProps {\n isRowSelected?: boolean;\n cell: DSDataTableT.Cell;\n children: React.ReactNode;\n}\n\nexport const Toolbar: React.ComponentType<ToolbarProps> = ({ isRowSelected, cell, children }) => {\n const [show, setShow] = useState(false);\n\n const toolbarRef = useRef<HTMLDivElement | null>(null);\n const toolbarTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n const handleOnClick = useCallback(() => setShow((prev) => !prev), []);\n\n const stopPropagation: React.MouseEventHandler = useCallback((e) => e.stopPropagation(), []);\n\n useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (e.code === 'Escape') {\n setShow(false);\n toolbarTriggerRef.current?.focus();\n }\n e.stopPropagation();\n }, []);\n\n const handleOnBlurToolBar = useCallback(() => {\n setTimeout(() => {\n if (!toolbarRef?.current?.contains?.(document.activeElement)) {\n setShow(false);\n }\n });\n }, []);\n\n return (\n <ToolbarPosition onBlur={handleOnBlurToolBar} innerRef={toolbarRef} tabIndex={-1}>\n <ToolbarWrapper onKeyDown={onToolbarKeyDown} onClick={stopPropagation} isOpen={show}>\n {show && <ToolbarBtns>{children}</ToolbarBtns>}\n <StyledButton\n buttonType=\"icon\"\n className=\"toolbar-trigger\"\n data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n innerRef={mergeRefs(toolbarTriggerRef, cell?.ref)}\n onClick={handleOnClick}\n tabIndex={isRowSelected === false ? -1 : 0}\n aria-label=\"Row actions\"\n >\n <MoreOptionsVert />\n </StyledButton>\n </ToolbarWrapper>\n </ToolbarPosition>\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACsGjB,SACW,KADX;AAtGN,SAAgB,aAAa,QAAQ,gBAAgB;AACrD,SAAS,QAAQ,WAAW;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB,iBAAiB;AAC7C,SAAS,mBAAmB;AAE5B,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,wBAAwB,CAAC;AAE3G,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlB,MAAM,iBAAiB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWlG,CAAC,EAAE,OAAO,MAAM,UAAU;AAAA;AAG9B,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,eAAe,CAAC;AAAA;AAAA;AAIxG,MAAM,kBAAkB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,iBAAiB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCjG,MAAM,UAA6C,CAAC,EAAE,eAAe,MAAM,SAAS,MAAM;AAC/F,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,QAAM,aAAa,OAA8B,IAAI;AACrD,QAAM,oBAAoB,OAAiC,IAAI;AAE/D,QAAM,uBAAuB,YAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,gBAAgB,YAAY,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;AAEpE,QAAM,kBAA2C,YAAY,CAAC,MAAM,EAAE,gBAAgB,GAAG,CAAC,CAAC;AAE3F,oBAAkB,YAAY,oBAAoB;AAElD,QAAM,mBAAmB,YAAY,CAAC,MAA2B;AAC/D,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,wBAAkB,SAAS,MAAM;AAAA,IACnC;AACA,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAsB,YAAY,MAAM;AAC5C,eAAW,MAAM;AACf,UAAI,CAAC,YAAY,SAAS,WAAW,SAAS,aAAa,GAAG;AAC5D,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,mBAAgB,QAAQ,qBAAqB,UAAU,YAAY,UAAU,IAC5E,+BAAC,kBAAe,WAAW,kBAAkB,SAAS,iBAAiB,QAAQ,MAC5E;AAAA,YAAQ,oBAAC,eAAa,UAAS;AAAA,IAChC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAa,YAAY;AAAA,QACzB,UAAU,UAAU,mBAAmB,MAAM,GAAG;AAAA,QAChD,SAAS;AAAA,QACT,UAAU,kBAAkB,QAAQ,KAAK;AAAA,QACzC,cAAW;AAAA,QAEX,8BAAC,mBAAgB;AAAA;AAAA,IACnB;AAAA,KACF,GACF;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -22,14 +22,16 @@ const withConditionalDnDRowContext = (Component) => (props) => {
22
22
  const allDataFlattened = usePropsStore((state) => state.allDataFlattened);
23
23
  const onReorder = useCallback(
24
24
  (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {
25
- const rootMovedData = structuredClone(movedData.root);
25
+ const rootMovedData = movedData.root;
26
26
  const nodes = {};
27
- const newUserData = [];
28
27
  rootMovedData.forEach((row) => {
29
28
  if (row.original.subRows)
30
29
  delete row.original.subRows;
31
30
  delete row.original.subRows;
32
31
  nodes[row.uid] = row.original;
32
+ });
33
+ const newUserData = [];
34
+ rootMovedData.forEach((row) => {
33
35
  if (row.parentId) {
34
36
  const parentNode = nodes[row.parentId];
35
37
  if (parentNode?.subRows)
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/withConditionalDnDRowContext.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useMemo } from 'react';\nimport {\n DndContext,\n DragOverlay,\n SortableContext,\n useTreeDndkitConfig,\n restrictToFirstScrollableAncestor,\n type DnDKitTree,\n} from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { Row } from '../Row.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n const dragAndDropRows = usePropsStore((state) => state.dragAndDropRows);\n const isExpandable = usePropsStore((state) => state.isExpandable);\n const onRowsReorder = usePropsStore((state) => state.onRowsReorder);\n const maxDragAndDropLevel = usePropsStore((state) => state.maxDragAndDropLevel);\n const getIsDropValid = usePropsStore((state) => state.getIsDropValid);\n const flattenedData = usePropsStore((state) => state.flattenedData);\n const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n\n const onReorder: DnDKitTree.OnReorder<DSDataTableT.Row> = useCallback(\n (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {\n const rootMovedData = structuredClone(movedData.root);\n // Pull the row's original data into an object\n const nodes: Record<string, DSDataTableT.Row> = {};\n const newUserData = [] as DSDataTableT.Row[];\n rootMovedData.forEach((row) => {\n if (row.original.subRows) delete row.original.subRows;\n delete row.original.subRows;\n nodes[row.uid] = row.original;\n\n // If row has parent, insert it to it's subrows\n // otherwise append it to the new user data\n if (row.parentId) {\n const parentNode = nodes[row.parentId];\n if (parentNode?.subRows) parentNode.subRows.push(row.original);\n else parentNode.subRows = [row.original];\n } else newUserData.push(row.original);\n });\n // Tell the user that the order has change, he can chose to commit it or not\n onRowsReorder(newUserData, { targetIndex, fromIndex }, considerExpanding as string | null, {\n flattenedData,\n allDataFlattened,\n });\n },\n [allDataFlattened, flattenedData, onRowsReorder],\n );\n\n const theFlattenedItems = useMemo(\n () => allDataFlattened.map((datum) => ({ ...datum, collapsed: !datum.isExpanded, subitems: [] })),\n [allDataFlattened],\n );\n\n const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({\n flattenedItems: theFlattenedItems,\n isHorizontalDnD: false,\n isExpandable,\n onReorder,\n maxDragAndDropLevel,\n getIsDropValid: getIsDropValid,\n });\n\n const containerSortableContextProps = sortableContextProps.root;\n\n const visibleItems = useMemo(() => {\n // active in this case is the row that is being dragged\n // if no drag is happening, return the flattened data as is\n if (!active) return flattenedData;\n // if a drag is happening, exclude the children of the dragged row\n // this is a design choice, this way the user can't drag a parent row into one of it's children.\n const excludeParentIds = [active.id];\n return flattenedData.filter((datum) => {\n const isParentExcluded = datum.parentId !== null && excludeParentIds.includes(datum.parentId);\n if (isParentExcluded) {\n excludeParentIds.push(datum.uid);\n return false;\n }\n return true;\n });\n }, [active, flattenedData]);\n\n const ctx = useMemo(\n () => ({\n visibleItems,\n dropIndicatorPosition,\n isDropValid,\n }),\n [visibleItems, dropIndicatorPosition, isDropValid],\n );\n\n const dragOverlayRow = useMemo(\n () => (active ? flattenedData.find((row) => row.uid === active.id) : null),\n [active, flattenedData],\n );\n\n if (dragAndDropRows)\n return (\n <DndContext {...dndContextProps}>\n <SortableContext {...containerSortableContextProps}>\n <DnDTreeContext.Provider value={ctx}>\n <Component {...props} />\n </DnDTreeContext.Provider>\n </SortableContext>\n {createPortal(\n <DragOverlay style={{ width: 'auto' }} modifiers={[restrictToFirstScrollableAncestor]}>\n {active ? <Row row={dragOverlayRow as DSDataTableT.InternalRow} isDragOverlay /> : null}\n </DragOverlay>,\n document.body,\n )}\n </DndContext>\n );\n return <Component {...props} />;\n};\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useMemo } from 'react';\nimport {\n DndContext,\n DragOverlay,\n SortableContext,\n useTreeDndkitConfig,\n restrictToFirstScrollableAncestor,\n type DnDKitTree,\n} from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { Row } from '../Row.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n const dragAndDropRows = usePropsStore((state) => state.dragAndDropRows);\n const isExpandable = usePropsStore((state) => state.isExpandable);\n const onRowsReorder = usePropsStore((state) => state.onRowsReorder);\n const maxDragAndDropLevel = usePropsStore((state) => state.maxDragAndDropLevel);\n const getIsDropValid = usePropsStore((state) => state.getIsDropValid);\n const flattenedData = usePropsStore((state) => state.flattenedData);\n const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n\n const onReorder: DnDKitTree.OnReorder<DSDataTableT.Row> = useCallback(\n (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {\n const rootMovedData = movedData.root;\n // Pull the row's original data into an object\n const nodes: Record<string, DSDataTableT.Row> = {};\n rootMovedData.forEach((row) => {\n if (row.original.subRows) delete row.original.subRows;\n delete row.original.subRows;\n nodes[row.uid] = row.original;\n });\n const newUserData = [] as DSDataTableT.Row[];\n rootMovedData.forEach((row) => {\n // If row has parent, insert it to it's subrows\n // otherwise append it to the new user data\n if (row.parentId) {\n const parentNode = nodes[row.parentId];\n if (parentNode?.subRows) parentNode.subRows.push(row.original);\n else parentNode.subRows = [row.original];\n } else newUserData.push(row.original);\n });\n // Tell the user that the order has change, he can chose to commit it or not\n onRowsReorder(newUserData, { targetIndex, fromIndex }, considerExpanding as string | null, {\n flattenedData,\n allDataFlattened,\n });\n },\n [allDataFlattened, flattenedData, onRowsReorder],\n );\n\n const theFlattenedItems = useMemo(\n () => allDataFlattened.map((datum) => ({ ...datum, collapsed: !datum.isExpanded, subitems: [] })),\n [allDataFlattened],\n );\n\n const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({\n flattenedItems: theFlattenedItems,\n isHorizontalDnD: false,\n isExpandable,\n onReorder,\n maxDragAndDropLevel,\n getIsDropValid: getIsDropValid,\n });\n\n const containerSortableContextProps = sortableContextProps.root;\n\n const visibleItems = useMemo(() => {\n // active in this case is the row that is being dragged\n // if no drag is happening, return the flattened data as is\n if (!active) return flattenedData;\n // if a drag is happening, exclude the children of the dragged row\n // this is a design choice, this way the user can't drag a parent row into one of it's children.\n const excludeParentIds = [active.id];\n return flattenedData.filter((datum) => {\n const isParentExcluded = datum.parentId !== null && excludeParentIds.includes(datum.parentId);\n if (isParentExcluded) {\n excludeParentIds.push(datum.uid);\n return false;\n }\n return true;\n });\n }, [active, flattenedData]);\n\n const ctx = useMemo(\n () => ({\n visibleItems,\n dropIndicatorPosition,\n isDropValid,\n }),\n [visibleItems, dropIndicatorPosition, isDropValid],\n );\n\n const dragOverlayRow = useMemo(\n () => (active ? flattenedData.find((row) => row.uid === active.id) : null),\n [active, flattenedData],\n );\n\n if (dragAndDropRows)\n return (\n <DndContext {...dndContextProps}>\n <SortableContext {...containerSortableContextProps}>\n <DnDTreeContext.Provider value={ctx}>\n <Component {...props} />\n </DnDTreeContext.Provider>\n </SortableContext>\n {createPortal(\n <DragOverlay style={{ width: 'auto' }} modifiers={[restrictToFirstScrollableAncestor]}>\n {active ? <Row row={dragOverlayRow as DSDataTableT.InternalRow} isDragOverlay /> : null}\n </DragOverlay>,\n document.body,\n )}\n </DndContext>\n );\n return <Component {...props} />;\n};\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-data-table",
3
- "version": "3.34.0-rc.0",
3
+ "version": "3.34.0",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Data Table",
6
6
  "files": [
@@ -38,39 +38,39 @@
38
38
  "dependencies": {
39
39
  "react-virtual": "~2.10.4",
40
40
  "uid": "~2.0.1",
41
- "@elliemae/ds-button": "3.34.0-rc.0",
42
- "@elliemae/ds-button-v2": "3.34.0-rc.0",
43
- "@elliemae/ds-circular-progress-indicator": "3.34.0-rc.0",
44
- "@elliemae/ds-drag-and-drop": "3.34.0-rc.0",
45
- "@elliemae/ds-dropdownmenu": "3.34.0-rc.0",
46
- "@elliemae/ds-dropdownmenu-v2": "3.34.0-rc.0",
47
- "@elliemae/ds-form-checkbox": "3.34.0-rc.0",
48
- "@elliemae/ds-form-combobox": "3.34.0-rc.0",
49
- "@elliemae/ds-form-date-range-picker": "3.34.0-rc.0",
50
- "@elliemae/ds-form-date-time-picker": "3.34.0-rc.0",
51
- "@elliemae/ds-form-helpers-mask-hooks": "3.34.0-rc.0",
52
- "@elliemae/ds-form-input-text": "3.34.0-rc.0",
53
- "@elliemae/ds-form-layout-blocks": "3.34.0-rc.0",
54
- "@elliemae/ds-form-radio": "3.34.0-rc.0",
55
- "@elliemae/ds-grid": "3.34.0-rc.0",
56
- "@elliemae/ds-icons": "3.34.0-rc.0",
57
- "@elliemae/ds-pagination": "3.34.0-rc.0",
58
- "@elliemae/ds-pills-v2": "3.34.0-rc.0",
59
- "@elliemae/ds-popperjs": "3.34.0-rc.0",
60
- "@elliemae/ds-props-helpers": "3.34.0-rc.0",
61
- "@elliemae/ds-skeleton": "3.34.0-rc.0",
62
- "@elliemae/ds-system": "3.34.0-rc.0",
63
- "@elliemae/ds-truncated-tooltip-text": "3.34.0-rc.0",
64
- "@elliemae/ds-typescript-helpers": "3.34.0-rc.0",
65
- "@elliemae/ds-utilities": "3.34.0-rc.0",
66
- "@elliemae/ds-zustand-helpers": "3.34.0-rc.0"
41
+ "@elliemae/ds-button": "3.34.0",
42
+ "@elliemae/ds-button-v2": "3.34.0",
43
+ "@elliemae/ds-circular-progress-indicator": "3.34.0",
44
+ "@elliemae/ds-drag-and-drop": "3.34.0",
45
+ "@elliemae/ds-dropdownmenu": "3.34.0",
46
+ "@elliemae/ds-dropdownmenu-v2": "3.34.0",
47
+ "@elliemae/ds-form-combobox": "3.34.0",
48
+ "@elliemae/ds-form-checkbox": "3.34.0",
49
+ "@elliemae/ds-form-date-range-picker": "3.34.0",
50
+ "@elliemae/ds-form-date-time-picker": "3.34.0",
51
+ "@elliemae/ds-form-helpers-mask-hooks": "3.34.0",
52
+ "@elliemae/ds-form-input-text": "3.34.0",
53
+ "@elliemae/ds-form-radio": "3.34.0",
54
+ "@elliemae/ds-grid": "3.34.0",
55
+ "@elliemae/ds-form-layout-blocks": "3.34.0",
56
+ "@elliemae/ds-pagination": "3.34.0",
57
+ "@elliemae/ds-pills-v2": "3.34.0",
58
+ "@elliemae/ds-icons": "3.34.0",
59
+ "@elliemae/ds-popperjs": "3.34.0",
60
+ "@elliemae/ds-props-helpers": "3.34.0",
61
+ "@elliemae/ds-skeleton": "3.34.0",
62
+ "@elliemae/ds-truncated-tooltip-text": "3.34.0",
63
+ "@elliemae/ds-system": "3.34.0",
64
+ "@elliemae/ds-typescript-helpers": "3.34.0",
65
+ "@elliemae/ds-zustand-helpers": "3.34.0",
66
+ "@elliemae/ds-utilities": "3.34.0"
67
67
  },
68
68
  "devDependencies": {
69
69
  "@elliemae/pui-cli": "~9.0.0-next.31",
70
70
  "styled-components": "~5.3.9",
71
71
  "styled-system": "~5.1.5",
72
- "@elliemae/ds-monorepo-devops": "3.34.0-rc.0",
73
- "@elliemae/ds-toolbar-v2": "3.34.0-rc.0"
72
+ "@elliemae/ds-monorepo-devops": "3.34.0",
73
+ "@elliemae/ds-toolbar-v2": "3.34.0"
74
74
  },
75
75
  "peerDependencies": {
76
76
  "lodash": "^4.17.21",