@elliemae/ds-treeview 3.12.0-rc.2 → 3.12.0-rc.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/dist/cjs/TreeView.js +1 -4
  2. package/dist/cjs/TreeView.js.map +1 -1
  3. package/dist/cjs/config/useTreeview.js +1 -1
  4. package/dist/cjs/config/useTreeview.js.map +2 -2
  5. package/dist/cjs/hoc/WithConditionalDnDContext.js +24 -31
  6. package/dist/cjs/hoc/WithConditionalDnDContext.js.map +1 -1
  7. package/dist/cjs/hoc/WithDnDSortableItemContext.js +1 -6
  8. package/dist/cjs/hoc/WithDnDSortableItemContext.js.map +1 -1
  9. package/dist/cjs/parts/CheckboxSelectable.js +5 -4
  10. package/dist/cjs/parts/CheckboxSelectable.js.map +1 -1
  11. package/dist/cjs/parts/ChildrenCountDisplayer.js +4 -8
  12. package/dist/cjs/parts/ChildrenCountDisplayer.js.map +1 -1
  13. package/dist/cjs/parts/DnDHandle.js +19 -16
  14. package/dist/cjs/parts/DnDHandle.js.map +1 -1
  15. package/dist/cjs/parts/DropIndicator.js +5 -21
  16. package/dist/cjs/parts/DropIndicator.js.map +1 -1
  17. package/dist/cjs/parts/ExpandCaret.js +32 -38
  18. package/dist/cjs/parts/ExpandCaret.js.map +1 -1
  19. package/dist/cjs/parts/NestingSpace.js +1 -4
  20. package/dist/cjs/parts/NestingSpace.js.map +1 -1
  21. package/dist/cjs/parts/RadioSelectable.js +12 -9
  22. package/dist/cjs/parts/RadioSelectable.js.map +1 -1
  23. package/dist/cjs/parts/TreeItem.js +38 -60
  24. package/dist/cjs/parts/TreeItem.js.map +1 -1
  25. package/dist/cjs/parts/TreeItemText.js +39 -53
  26. package/dist/cjs/parts/TreeItemText.js.map +1 -1
  27. package/dist/cjs/parts/TreeList.js +61 -62
  28. package/dist/cjs/parts/TreeList.js.map +1 -1
  29. package/dist/cjs/related-components/TreeViewSearchBar.js +14 -11
  30. package/dist/cjs/related-components/TreeViewSearchBar.js.map +1 -1
  31. package/dist/esm/TreeView.js +1 -4
  32. package/dist/esm/TreeView.js.map +1 -1
  33. package/dist/esm/config/useTreeview.js +1 -1
  34. package/dist/esm/config/useTreeview.js.map +2 -2
  35. package/dist/esm/hoc/WithConditionalDnDContext.js +24 -31
  36. package/dist/esm/hoc/WithConditionalDnDContext.js.map +1 -1
  37. package/dist/esm/hoc/WithDnDSortableItemContext.js +1 -6
  38. package/dist/esm/hoc/WithDnDSortableItemContext.js.map +1 -1
  39. package/dist/esm/parts/CheckboxSelectable.js +5 -4
  40. package/dist/esm/parts/CheckboxSelectable.js.map +1 -1
  41. package/dist/esm/parts/ChildrenCountDisplayer.js +4 -8
  42. package/dist/esm/parts/ChildrenCountDisplayer.js.map +1 -1
  43. package/dist/esm/parts/DnDHandle.js +19 -16
  44. package/dist/esm/parts/DnDHandle.js.map +1 -1
  45. package/dist/esm/parts/DropIndicator.js +5 -21
  46. package/dist/esm/parts/DropIndicator.js.map +1 -1
  47. package/dist/esm/parts/ExpandCaret.js +32 -38
  48. package/dist/esm/parts/ExpandCaret.js.map +1 -1
  49. package/dist/esm/parts/NestingSpace.js +1 -4
  50. package/dist/esm/parts/NestingSpace.js.map +1 -1
  51. package/dist/esm/parts/RadioSelectable.js +12 -9
  52. package/dist/esm/parts/RadioSelectable.js.map +1 -1
  53. package/dist/esm/parts/TreeItem.js +38 -60
  54. package/dist/esm/parts/TreeItem.js.map +1 -1
  55. package/dist/esm/parts/TreeItemText.js +39 -53
  56. package/dist/esm/parts/TreeItemText.js.map +1 -1
  57. package/dist/esm/parts/TreeList.js +61 -62
  58. package/dist/esm/parts/TreeList.js.map +1 -1
  59. package/dist/esm/related-components/TreeViewSearchBar.js +14 -11
  60. package/dist/esm/related-components/TreeViewSearchBar.js.map +1 -1
  61. package/package.json +11 -11
@@ -90,37 +90,30 @@ const withConditionalDnDRowContext = (Component) => function(props) {
90
90
  }
91
91
  }, [overId, dropIndicatorPosition, triggerTreeRerender, visibleItems, updateUserExpandedState]);
92
92
  if (withDragAndDrop)
93
- return /* @__PURE__ */ jsxs(DndContext, {
94
- ...dndContextProps,
95
- children: [
96
- /* @__PURE__ */ jsx(SortableContext, {
97
- ...sortableContextProps,
98
- children: /* @__PURE__ */ jsx(DnDTreeContext.Provider, {
99
- value: {
100
- activeIndex,
101
- depth,
102
- visibleItems: visibleItems.map((item) => item.original),
103
- dropIndicatorPosition,
104
- isDropValid
105
- },
106
- children: /* @__PURE__ */ jsx(Component, {
107
- ...props
108
- })
109
- })
110
- }),
111
- /* @__PURE__ */ jsx(DragOverlay, {
112
- style: { width: "auto" },
113
- children: activeId ? /* @__PURE__ */ jsx(TreeItem, {
114
- itemIndex: activeIndex,
115
- item: ensure(flattenedVisibleTree.find((item) => item.id.toString() === activeId)),
116
- isDragOverlay: true
117
- }) : null
118
- })
119
- ]
120
- });
121
- return /* @__PURE__ */ jsx(Component, {
122
- ...props
123
- });
93
+ return /* @__PURE__ */ jsxs(DndContext, { ...dndContextProps, children: [
94
+ /* @__PURE__ */ jsx(SortableContext, { ...sortableContextProps, children: /* @__PURE__ */ jsx(
95
+ DnDTreeContext.Provider,
96
+ {
97
+ value: {
98
+ activeIndex,
99
+ depth,
100
+ visibleItems: visibleItems.map((item) => item.original),
101
+ dropIndicatorPosition,
102
+ isDropValid
103
+ },
104
+ children: /* @__PURE__ */ jsx(Component, { ...props })
105
+ }
106
+ ) }),
107
+ /* @__PURE__ */ jsx(DragOverlay, { style: { width: "auto" }, children: activeId ? /* @__PURE__ */ jsx(
108
+ TreeItem,
109
+ {
110
+ itemIndex: activeIndex,
111
+ item: ensure(flattenedVisibleTree.find((item) => item.id.toString() === activeId)),
112
+ isDragOverlay: true
113
+ }
114
+ ) : null })
115
+ ] });
116
+ return /* @__PURE__ */ jsx(Component, { ...props });
124
117
  };
125
118
  export {
126
119
  withConditionalDnDRowContext
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hoc/WithConditionalDnDContext.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';\nimport { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport TreeViewContext from '../TreeViewContext';\nimport { TreeItem } from '../parts/TreeItem';\nimport { DnDTreeContext } from './DnDTreeContext';\nimport { DropIndicatorPosition } from './SortableItemContext';\nimport { toggleItemExpand } from '../utils/group-expands-helpers';\n\ntype FunctionalHOC = <T = unknown>(Component: React.ComponentType<T>, ...other: unknown[]) => (props: T) => JSX.Element;\n\nconst ensure = <T,>(argument: T | undefined | null, message = 'This should never happen'): T => {\n if (argument === undefined || argument === null) {\n throw new TypeError(message);\n }\n\n return argument;\n};\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) =>\n function (props) {\n const {\n props: { data, onOrderChange, getIsDropValid },\n flattenedItems,\n updateUserExpandedState,\n triggerTreeRerender,\n visibleItems: flattenedVisibleTree,\n withDragAndDrop,\n } = useContext(TreeViewContext);\n\n const flattenedVisibleTreeForDnD = useMemo(\n () =>\n flattenedVisibleTree.map((item, index) => ({\n uid: item.id.toString(),\n depth: (item.treeDepth ?? 1) - 1,\n realIndex: index,\n childrenCount: item.children?.length ?? 0,\n parentId: item.node.parent?.model?.id?.toString() ?? null,\n original: item,\n })),\n [flattenedVisibleTree],\n );\n\n const onReorder = useCallback(\n (tree: DSTreeviewT.DndItem[], indexes: { targetIndex: number; fromIndex: number }) => {\n // Pull the row's original data into an object\n const nodes: Record<DSTreeviewT.StringOrNum, DSTreeviewT.SimpleItem> = {};\n tree.forEach((item) => {\n const originalItem = item.original.model;\n originalItem.children = [];\n nodes[item.uid] = originalItem;\n });\n\n const newUserTree: DSTreeviewT.SimpleItem[] = [];\n tree.forEach((item) => {\n // If row has parent, insert it to it's subrows\n // otherwise append it to the new user data\n if (item.parentId !== null && item.parentId !== undefined && item.parentId !== '__ds_tree_root') {\n const parentNode = nodes[item.parentId];\n parentNode.children?.push(item.original.model);\n } else if (item.uid !== '__ds_tree_root') {\n newUserTree.push(item.original.model);\n }\n });\n // Tell the user that the order has change, he can chose to commit it or not\n onOrderChange(newUserTree, data, flattenedItems[indexes.fromIndex]);\n },\n [onOrderChange, data, flattenedItems],\n );\n\n const {\n dndContextProps,\n sortableContextProps,\n activeId,\n activeIndex,\n depth,\n dropIndicatorPosition,\n visibleItems,\n isDropValid,\n overId,\n } = useTreeDndkitConfig({\n flattenedItems,\n visibleItems: flattenedVisibleTreeForDnD,\n isHorizontalDnD: false,\n isExpandable: true,\n onReorder,\n getIsDropValid,\n maxDragAndDropLevel: Infinity,\n });\n\n const timeoutRef = useRef<NodeJS.Timeout>();\n\n useEffect(() => {\n if (timeoutRef.current) clearTimeout(timeoutRef.current);\n if (dropIndicatorPosition === DropIndicatorPosition.Inside && overId) {\n timeoutRef.current = setTimeout(() => {\n const overItem = visibleItems.find((item) => item.uid === overId);\n if (overItem) {\n const realOverItem = overItem.original;\n if (realOverItem.isGroup && !realOverItem.isExpanded) {\n toggleItemExpand(realOverItem, triggerTreeRerender, updateUserExpandedState);\n }\n }\n }, 1000);\n }\n }, [overId, dropIndicatorPosition, triggerTreeRerender, visibleItems, updateUserExpandedState]);\n\n if (withDragAndDrop)\n return (\n <DndContext {...dndContextProps}>\n <SortableContext {...sortableContextProps}>\n <DnDTreeContext.Provider\n value={{\n activeIndex,\n depth,\n visibleItems: visibleItems.map((item) => item.original),\n dropIndicatorPosition,\n isDropValid,\n }}\n >\n <Component {...props} />\n </DnDTreeContext.Provider>\n </SortableContext>\n <DragOverlay style={{ width: 'auto' }}>\n {activeId ? (\n <TreeItem\n itemIndex={activeIndex}\n item={ensure(flattenedVisibleTree.find((item) => item.id.toString() === activeId))}\n isDragOverlay\n />\n ) : null}\n </DragOverlay>\n </DndContext>\n );\n return <Component {...props} />;\n };\n"],
5
- "mappings": "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",
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -33,12 +33,7 @@ const withDnDSortableItemContext = (Component) => function(props) {
33
33
  }),
34
34
  [draggableProps]
35
35
  );
36
- return /* @__PURE__ */ jsx(SortableItemContext.Provider, {
37
- value: ctx,
38
- children: /* @__PURE__ */ jsx(Component, {
39
- ...props
40
- })
41
- });
36
+ return /* @__PURE__ */ jsx(SortableItemContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(Component, { ...props }) });
42
37
  };
43
38
  export {
44
39
  withDnDSortableItemContext
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hoc/WithDnDSortableItemContext.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-call */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport React, { useContext, useMemo } from 'react';\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport type { SortableItemContextType } from './SortableItemContext';\nimport { SortableItemContext } from './SortableItemContext';\nimport TreeViewContext from '../TreeViewContext';\nimport { DnDTreeContext } from './DnDTreeContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\ntype FunctionalHOC = <T = unknown>(Component: React.ComponentType<T>, ...other: unknown[]) => (props: T) => JSX.Element;\n\nexport const withDnDSortableItemContext: FunctionalHOC = (Component) =>\n function (props: any) {\n const { withDragAndDrop } = useContext(TreeViewContext);\n const { dropIndicatorPosition, isDropValid } = useContext(DnDTreeContext);\n\n const id = (props as { item: DSTreeviewT.Item }).item.id.toString();\n\n // onMount generate unique options, so everyting is only ran once\n const draggableOptions = useMemo(\n () => ({\n id,\n }),\n [id],\n );\n\n const useSortableHelpers = useSortable(draggableOptions);\n\n // calculate all the \"useSortable\" values as per required\n const draggableProps = useMemo(() => {\n if (!withDragAndDrop) return false;\n\n const { index, overIndex } = useSortableHelpers;\n\n return {\n ...useSortableHelpers,\n shouldShowDropIndicatorPosition: overIndex === index,\n dropIndicatorPosition,\n isDropValid,\n };\n }, [withDragAndDrop, useSortableHelpers, dropIndicatorPosition, isDropValid]);\n\n // we use a context so we can easly access information wherever without bubbling down\n // this context is all Memoized so as long as component is not re-mounted,\n // the context won't trigger un-required renders per-se...\n const ctx: SortableItemContextType = useMemo(\n () => ({\n draggableProps,\n }),\n [draggableProps],\n );\n // we always add the context, if draggableProps===false we don't have the DnD enabled.\n return (\n <SortableItemContext.Provider value={ctx}>\n <Component {...props} />\n </SortableItemContext.Provider>\n );\n };\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACwDf;AArDR,SAAgB,YAAY,eAAe;AAC3C,SAAS,mBAAmB;AAE5B,SAAS,2BAA2B;AACpC,OAAO,qBAAqB;AAC5B,SAAS,sBAAsB;AAKxB,MAAM,6BAA4C,CAAC,cACxD,SAAU,OAAY;AACpB,QAAM,EAAE,gBAAgB,IAAI,WAAW,eAAe;AACtD,QAAM,EAAE,uBAAuB,YAAY,IAAI,WAAW,cAAc;AAExE,QAAM,KAAM,MAAqC,KAAK,GAAG,SAAS;AAGlE,QAAM,mBAAmB;AAAA,IACvB,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,EAAE;AAAA,EACL;AAEA,QAAM,qBAAqB,YAAY,gBAAgB;AAGvD,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI,CAAC;AAAiB,aAAO;AAE7B,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC,cAAc;AAAA,MAC/C;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,iBAAiB,oBAAoB,uBAAuB,WAAW,CAAC;AAK5E,QAAM,MAA+B;AAAA,IACnC,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SACE,oBAAC,oBAAoB,UAApB;AAAA,IAA6B,OAAO;AAAA,IACnC,8BAAC;AAAA,MAAW,GAAG;AAAA,KAAO;AAAA,GACxB;AAEJ;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACwDf;AArDR,SAAgB,YAAY,eAAe;AAC3C,SAAS,mBAAmB;AAE5B,SAAS,2BAA2B;AACpC,OAAO,qBAAqB;AAC5B,SAAS,sBAAsB;AAKxB,MAAM,6BAA4C,CAAC,cACxD,SAAU,OAAY;AACpB,QAAM,EAAE,gBAAgB,IAAI,WAAW,eAAe;AACtD,QAAM,EAAE,uBAAuB,YAAY,IAAI,WAAW,cAAc;AAExE,QAAM,KAAM,MAAqC,KAAK,GAAG,SAAS;AAGlE,QAAM,mBAAmB;AAAA,IACvB,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,EAAE;AAAA,EACL;AAEA,QAAM,qBAAqB,YAAY,gBAAgB;AAGvD,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI,CAAC;AAAiB,aAAO;AAE7B,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC,cAAc;AAAA,MAC/C;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,iBAAiB,oBAAoB,uBAAuB,WAAW,CAAC;AAK5E,QAAM,MAA+B;AAAA,IACnC,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SACE,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,KACnC,8BAAC,aAAW,GAAG,OAAO,GACxB;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -56,16 +56,17 @@ const CheckboxSelectable = (props) => {
56
56
  return false;
57
57
  }, [selectedCheckboxes, id]);
58
58
  const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);
59
- return /* @__PURE__ */ jsx(StyledCheckboxWrapper, {
60
- children: /* @__PURE__ */ jsx(DSCheckbox, {
59
+ return /* @__PURE__ */ jsx(StyledCheckboxWrapper, { children: /* @__PURE__ */ jsx(
60
+ DSCheckbox,
61
+ {
61
62
  checked: isChecked,
62
63
  disabled: isDisabled,
63
64
  className: "em-ds-tree-item-checkbox",
64
65
  "data-testid": "tree-item-checkbox",
65
66
  onChange: onCheckboxChange,
66
67
  tabIndex: "0"
67
- })
68
- });
68
+ }
69
+ ) });
69
70
  };
70
71
  var CheckboxSelectable_default = CheckboxSelectable;
71
72
  export {
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/CheckboxSelectable.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useMemo } from 'react';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { styled } from '@elliemae/ds-system';\nimport TreeViewContext from '../TreeViewContext';\nimport { toggleCheckboxItem } from '../utils/selectable-helper';\nimport { filterObject } from '../utils/object-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nconst StyledCheckboxWrapper = styled.span`\n padding-top: 3px;\n`;\ninterface PropsT {\n item: DSTreeviewT.Item;\n itemIndex: number;\n}\nconst CheckboxSelectable = (props: PropsT): JSX.Element | null => {\n const { item, itemIndex } = props;\n const { id } = item;\n\n const ctx = useContext(TreeViewContext);\n const {\n props: { onSelectionChange, isItemDisabled },\n virtualListHelpers: { scrollToIndex },\n triggerTreeRerender,\n selectedCheckboxes,\n setSelectedCheckboxes,\n } = ctx;\n\n const onCheckboxChange = useCallback(() => {\n const newSelections = toggleCheckboxItem(item);\n const newSelectionHasmap = filterObject<DSTreeviewT.SelectionState>(\n { ...selectedCheckboxes, ...newSelections },\n (value) => value !== false,\n );\n setSelectedCheckboxes(newSelectionHasmap);\n triggerTreeRerender();\n\n const indexAndScrollTo = {\n scrollToItem: () => {\n if (typeof item.virtualIndex === 'number') scrollToIndex(item.virtualIndex);\n },\n itemIndex,\n };\n if (onSelectionChange) onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);\n }, [\n item,\n triggerTreeRerender,\n onSelectionChange,\n itemIndex,\n scrollToIndex,\n selectedCheckboxes,\n setSelectedCheckboxes,\n ]);\n const isChecked = useMemo(() => {\n if (selectedCheckboxes[id] === 'mixed') {\n return 'mixed' as const;\n }\n if (selectedCheckboxes[id] === true) {\n return true;\n }\n return false;\n }, [selectedCheckboxes, id]);\n\n const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);\n\n return (\n <StyledCheckboxWrapper>\n <DSCheckbox\n checked={isChecked}\n disabled={isDisabled}\n className=\"em-ds-tree-item-checkbox\"\n data-testid=\"tree-item-checkbox\"\n onChange={onCheckboxChange}\n tabIndex=\"0\"\n />\n </StyledCheckboxWrapper>\n );\n};\n\nexport default CheckboxSelectable;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACkEjB;AAlEN,SAAgB,YAAY,aAAa,eAAe;AACxD,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,OAAO,qBAAqB;AAC5B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAE7B,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAOrC,MAAM,qBAAqB,CAAC,UAAsC;AAChE,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,GAAG,IAAI;AAEf,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,mBAAmB,eAAe;AAAA,IAC3C,oBAAoB,EAAE,cAAc;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,mBAAmB,YAAY,MAAM;AACzC,UAAM,gBAAgB,mBAAmB,IAAI;AAC7C,UAAM,qBAAqB;AAAA,MACzB,EAAE,GAAG,oBAAoB,GAAG,cAAc;AAAA,MAC1C,CAAC,UAAU,UAAU;AAAA,IACvB;AACA,0BAAsB,kBAAkB;AACxC,wBAAoB;AAEpB,UAAM,mBAAmB;AAAA,MACvB,cAAc,MAAM;AAClB,YAAI,OAAO,KAAK,iBAAiB;AAAU,wBAAc,KAAK,YAAY;AAAA,MAC5E;AAAA,MACA;AAAA,IACF;AACA,QAAI;AAAmB,wBAAkB,oBAAoB,MAAM,gBAAgB;AAAA,EACrF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,mBAAmB,QAAQ,SAAS;AACtC,aAAO;AAAA,IACT;AACA,QAAI,mBAAmB,QAAQ,MAAM;AACnC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,EAAE,CAAC;AAE3B,QAAM,aAAa,QAAQ,MAAM,eAAe,IAAI,GAAG,CAAC,MAAM,cAAc,CAAC;AAE7E,SACE,oBAAC;AAAA,IACC,8BAAC;AAAA,MACC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,UAAU;AAAA,MACV,UAAS;AAAA,KACX;AAAA,GACF;AAEJ;AAEA,IAAO,6BAAQ;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACkEjB;AAlEN,SAAgB,YAAY,aAAa,eAAe;AACxD,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,OAAO,qBAAqB;AAC5B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAE7B,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAOrC,MAAM,qBAAqB,CAAC,UAAsC;AAChE,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,GAAG,IAAI;AAEf,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,mBAAmB,eAAe;AAAA,IAC3C,oBAAoB,EAAE,cAAc;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,mBAAmB,YAAY,MAAM;AACzC,UAAM,gBAAgB,mBAAmB,IAAI;AAC7C,UAAM,qBAAqB;AAAA,MACzB,EAAE,GAAG,oBAAoB,GAAG,cAAc;AAAA,MAC1C,CAAC,UAAU,UAAU;AAAA,IACvB;AACA,0BAAsB,kBAAkB;AACxC,wBAAoB;AAEpB,UAAM,mBAAmB;AAAA,MACvB,cAAc,MAAM;AAClB,YAAI,OAAO,KAAK,iBAAiB;AAAU,wBAAc,KAAK,YAAY;AAAA,MAC5E;AAAA,MACA;AAAA,IACF;AACA,QAAI;AAAmB,wBAAkB,oBAAoB,MAAM,gBAAgB;AAAA,EACrF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,mBAAmB,QAAQ,SAAS;AACtC,aAAO;AAAA,IACT;AACA,QAAI,mBAAmB,QAAQ,MAAM;AACnC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,EAAE,CAAC;AAE3B,QAAM,aAAa,QAAQ,MAAM,eAAe,IAAI,GAAG,CAAC,MAAM,cAAc,CAAC;AAE7E,SACE,oBAAC,yBACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,UAAU;AAAA,MACV,UAAS;AAAA;AAAA,EACX,GACF;AAEJ;AAEA,IAAO,6BAAQ;",
6
6
  "names": []
7
7
  }
@@ -15,14 +15,10 @@ const ChildrenCountDisplayer = (props) => {
15
15
  const { isGroup, children } = item;
16
16
  if (!isGroup)
17
17
  return null;
18
- return /* @__PURE__ */ jsxs("span", {
19
- "data-testid": "tree-item-children-count-displayer",
20
- className,
21
- children: [
22
- /* @__PURE__ */ jsx(Separator, {}),
23
- `${children.length} Items`
24
- ]
25
- });
18
+ return /* @__PURE__ */ jsxs("span", { "data-testid": "tree-item-children-count-displayer", className, children: [
19
+ /* @__PURE__ */ jsx(Separator, {}),
20
+ `${children.length} Items`
21
+ ] });
26
22
  };
27
23
  export {
28
24
  ChildrenCountDisplayer
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ChildrenCountDisplayer.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/function-component-definition */\nimport React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nconst Separator = styled.span`\n width: 1px;\n height: 12px;\n margin: 0 8px;\n border-left: 1px solid ${(props) => props.theme.colors.neutral['600']};\n font-size: 12px;\n`;\n\nconst className = `${DSTreeViewPrefix}-${treeItemBlockName}-children-count-displayer`;\n\ninterface PropsT {\n item: DSTreeviewT.Item;\n}\n\nexport const ChildrenCountDisplayer: React.ComponentType<PropsT> = (props) => {\n const { item } = props;\n const { isGroup, children } = item;\n\n if (!isGroup) return null;\n return (\n <span data-testid=\"tree-item-children-count-displayer\" className={className}>\n <Separator />\n {`${children.length} Items`}\n </span>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;AC0BnB,SACE,KADF;AAxBJ,SAAS,cAAc;AACvB,SAAS,kBAAkB,yBAAyB;AAGpD,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA,2BAIE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAIjE,MAAM,YAAY,GAAG,oBAAoB;AAMlC,MAAM,yBAAsD,CAAC,UAAU;AAC5E,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,EAAE,SAAS,SAAS,IAAI;AAE9B,MAAI,CAAC;AAAS,WAAO;AACrB,SACE,qBAAC;AAAA,IAAK,eAAY;AAAA,IAAqC;AAAA,IACrD;AAAA,0BAAC,aAAU;AAAA,MACV,GAAG,SAAS;AAAA;AAAA,GACf;AAEJ;",
5
+ "mappings": "AAAA,YAAY,WAAW;AC0BnB,SACE,KADF;AAxBJ,SAAS,cAAc;AACvB,SAAS,kBAAkB,yBAAyB;AAGpD,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA,2BAIE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAIjE,MAAM,YAAY,GAAG,oBAAoB;AAMlC,MAAM,yBAAsD,CAAC,UAAU;AAC5E,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,EAAE,SAAS,SAAS,IAAI;AAE9B,MAAI,CAAC;AAAS,WAAO;AACrB,SACE,qBAAC,UAAK,eAAY,sCAAqC,WACrD;AAAA,wBAAC,aAAU;AAAA,IACV,GAAG,SAAS;AAAA,KACf;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -6,22 +6,25 @@ import { SortableItemContext } from "../hoc/SortableItemContext";
6
6
  const DnDHandle = ({ id, isDragOverlay }) => {
7
7
  const { draggableProps } = useContext(SortableItemContext);
8
8
  const isDragging = draggableProps && draggableProps.isDragging;
9
- return /* @__PURE__ */ createElement(GripperVertical, {
10
- role: "button",
11
- ...draggableProps && {
12
- ...draggableProps.listeners,
13
- ...draggableProps.attributes
14
- },
15
- "data-testid": "drag-handle",
16
- "data-isactive": draggableProps && !!draggableProps.active,
17
- "data-isdragoverlay": isDragOverlay,
18
- id: `${id}-drag-handle`,
19
- key: `${id}-drag-handle`,
20
- className: `drag-handle ${isDragging ? "" : "focuseable"}`,
21
- color: isDragging ? ["neutral", "080"] : ["brand-primary", "800"],
22
- size: "s",
23
- tabIndex: 0
24
- });
9
+ return /* @__PURE__ */ createElement(
10
+ GripperVertical,
11
+ {
12
+ role: "button",
13
+ ...draggableProps && {
14
+ ...draggableProps.listeners,
15
+ ...draggableProps.attributes
16
+ },
17
+ "data-testid": "drag-handle",
18
+ "data-isactive": draggableProps && !!draggableProps.active,
19
+ "data-isdragoverlay": isDragOverlay,
20
+ id: `${id}-drag-handle`,
21
+ key: `${id}-drag-handle`,
22
+ className: `drag-handle ${isDragging ? "" : "focuseable"}`,
23
+ color: isDragging ? ["neutral", "080"] : ["brand-primary", "800"],
24
+ size: "s",
25
+ tabIndex: 0
26
+ }
27
+ );
25
28
  };
26
29
  export {
27
30
  DnDHandle
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DnDHandle.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport { SortableItemContext } from '../hoc/SortableItemContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\ninterface DnDHandleProps {\n id: DSTreeviewT.StringOrNum;\n isDragOverlay: boolean;\n}\n\nexport const DnDHandle = ({ id, isDragOverlay }: DnDHandleProps) => {\n const { draggableProps } = useContext(SortableItemContext);\n\n const isDragging = draggableProps && draggableProps.isDragging;\n\n return (\n <GripperVertical\n role=\"button\"\n {...(draggableProps && {\n ...draggableProps.listeners,\n ...draggableProps.attributes,\n })}\n data-testid=\"drag-handle\"\n data-isactive={draggableProps && !!draggableProps.active}\n data-isdragoverlay={isDragOverlay}\n id={`${id}-drag-handle`}\n key={`${id}-drag-handle`}\n className={`drag-handle ${isDragging ? '' : 'focuseable'}`}\n color={isDragging ? ['neutral', '080'] : ['brand-primary', '800']}\n size=\"s\"\n tabIndex={0}\n />\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACgBnB;AAhBJ,SAAgB,kBAAkB;AAClC,SAAS,uBAAuB;AAChC,SAAS,2BAA2B;AAQ7B,MAAM,YAAY,CAAC,EAAE,IAAI,cAAc,MAAsB;AAClE,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AAEzD,QAAM,aAAa,kBAAkB,eAAe;AAEpD,SACE,8BAAC;AAAA,IACC,MAAK;AAAA,IACJ,GAAI,kBAAkB;AAAA,MACrB,GAAG,eAAe;AAAA,MAClB,GAAG,eAAe;AAAA,IACpB;AAAA,IACA,eAAY;AAAA,IACZ,iBAAe,kBAAkB,CAAC,CAAC,eAAe;AAAA,IAClD,sBAAoB;AAAA,IACpB,IAAI,GAAG;AAAA,IACP,KAAK,GAAG;AAAA,IACR,WAAW,eAAe,aAAa,KAAK;AAAA,IAC5C,OAAO,aAAa,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK;AAAA,IAChE,MAAK;AAAA,IACL,UAAU;AAAA,GACZ;AAEJ;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACgBnB;AAhBJ,SAAgB,kBAAkB;AAClC,SAAS,uBAAuB;AAChC,SAAS,2BAA2B;AAQ7B,MAAM,YAAY,CAAC,EAAE,IAAI,cAAc,MAAsB;AAClE,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AAEzD,QAAM,aAAa,kBAAkB,eAAe;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAI,kBAAkB;AAAA,QACrB,GAAG,eAAe;AAAA,QAClB,GAAG,eAAe;AAAA,MACpB;AAAA,MACA,eAAY;AAAA,MACZ,iBAAe,kBAAkB,CAAC,CAAC,eAAe;AAAA,MAClD,sBAAoB;AAAA,MACpB,IAAI,GAAG;AAAA,MACP,KAAK,GAAG;AAAA,MACR,WAAW,eAAe,aAAa,KAAK;AAAA,MAC5C,OAAO,aAAa,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK;AAAA,MAChE,MAAK;AAAA,MACL,UAAU;AAAA;AAAA,EACZ;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -24,33 +24,17 @@ const StyledIndicator = styled.div`
24
24
  background-color: ${({ isDropValid, theme }) => isDropValid ? theme.colors.brand[600] : theme.colors.danger[900]};
25
25
  z-index: 20;
26
26
  `;
27
- const CircleIndicator = (style, isDropValid) => /* @__PURE__ */ jsx("svg", {
28
- height: "6",
29
- width: "6",
30
- style,
31
- children: /* @__PURE__ */ jsx("circle", {
32
- cx: "3",
33
- cy: "3",
34
- r: "3",
35
- strokeWidth: "0",
36
- fill: isDropValid ? "#1E79C2" : "#C64252"
37
- })
38
- });
27
+ const CircleIndicator = (style, isDropValid) => /* @__PURE__ */ jsx("svg", { height: "6", width: "6", style, children: /* @__PURE__ */ jsx("circle", { cx: "3", cy: "3", r: "3", strokeWidth: "0", fill: isDropValid ? "#1E79C2" : "#C64252" }) });
39
28
  const DropIndicator = ({ dropIndicatorPosition, isLast, isDropValid }) => {
40
29
  if (![DropIndicatorPosition.After, DropIndicatorPosition.Before].includes(
41
30
  dropIndicatorPosition
42
31
  ))
43
32
  return null;
44
33
  const safeDropIndicatorPosition = isLast ? DropIndicatorPosition.Before : dropIndicatorPosition;
45
- return /* @__PURE__ */ jsxs(Fragment, {
46
- children: [
47
- CircleIndicator(getCircleStyles({ dropIndicatorPosition: safeDropIndicatorPosition }), isDropValid),
48
- /* @__PURE__ */ jsx(StyledIndicator, {
49
- dropIndicatorPosition: safeDropIndicatorPosition,
50
- isDropValid
51
- })
52
- ]
53
- });
34
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
35
+ CircleIndicator(getCircleStyles({ dropIndicatorPosition: safeDropIndicatorPosition }), isDropValid),
36
+ /* @__PURE__ */ jsx(StyledIndicator, { dropIndicatorPosition: safeDropIndicatorPosition, isDropValid })
37
+ ] });
54
38
  };
55
39
  var DropIndicator_default = DropIndicator;
56
40
  export {
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DropIndicator.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DropIndicatorPosition } from '../hoc/SortableItemContext';\n\ninterface DropIndicatorProps {\n vertical?: boolean;\n dropIndicatorPosition: DropIndicatorPosition | false;\n isLast?: boolean;\n isDropValid?: boolean;\n}\n\nconst getPositionStyles = ({ dropIndicatorPosition }: DropIndicatorProps) => `\n top: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n bottom: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n left: -2px;\n `;\n\nconst getCircleStyles = ({ dropIndicatorPosition }: DropIndicatorProps) => ({\n position: 'absolute',\n zIndex: 20,\n top: dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n bottom: dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n left: '0px',\n opacity: 1,\n});\n\nconst StyledIndicator = styled.div<DropIndicatorProps>`\n position: absolute;\n ${getPositionStyles}\n box-sizing: border-box;\n width: ${(props) => (props.vertical ? '2px' : '100%')};\n height: ${(props) => (props.vertical ? '100%' : '2px')};\n background-color: ${({ isDropValid, theme }) => (isDropValid ? theme.colors.brand[600] : theme.colors.danger[900])};\n z-index: 20;\n`;\n\nconst CircleIndicator = (style: Record<string, unknown>, isDropValid: boolean | null | undefined) => (\n <svg height=\"6\" width=\"6\" style={style}>\n <circle cx=\"3\" cy=\"3\" r=\"3\" strokeWidth=\"0\" fill={isDropValid ? '#1E79C2' : '#C64252'} />\n </svg>\n);\n\nconst DropIndicator: React.ComponentType<DropIndicatorProps> = ({ dropIndicatorPosition, isLast, isDropValid }) => {\n if (\n ![DropIndicatorPosition.After, DropIndicatorPosition.Before].includes(\n dropIndicatorPosition as DropIndicatorPosition,\n )\n )\n return null;\n\n const safeDropIndicatorPosition = isLast ? DropIndicatorPosition.Before : dropIndicatorPosition;\n\n return (\n <>\n {CircleIndicator(getCircleStyles({ dropIndicatorPosition: safeDropIndicatorPosition }), isDropValid)}\n <StyledIndicator dropIndicatorPosition={safeDropIndicatorPosition} isDropValid={isDropValid} />\n </>\n );\n};\n\nexport default DropIndicator;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACsCnB,SAeA,UAfA,KAeA,YAfA;AArCJ,SAAS,cAAc;AACvB,SAAS,6BAA6B;AAStC,MAAM,oBAAoB,CAAC,EAAE,sBAAsB,MAA0B;AAAA,aAChE,0BAA0B,sBAAsB,SAAS,MAAM;AAAA,gBAC5D,0BAA0B,sBAAsB,QAAQ,MAAM;AAAA;AAAA;AAI9E,MAAM,kBAAkB,CAAC,EAAE,sBAAsB,OAA2B;AAAA,EAC1E,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,KAAK,0BAA0B,sBAAsB,QAAQ,UAAU;AAAA,EACvE,QAAQ,0BAA0B,sBAAsB,SAAS,UAAU;AAAA,EAC3E,MAAM;AAAA,EACN,SAAS;AACX;AAEA,MAAM,kBAAkB,OAAO;AAAA;AAAA,IAE3B;AAAA;AAAA,WAEO,CAAC,UAAW,MAAM,WAAW,QAAQ;AAAA,YACpC,CAAC,UAAW,MAAM,WAAW,SAAS;AAAA,sBAC5B,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,MAAM,OAAO,MAAM,OAAO,MAAM,OAAO,OAAO;AAAA;AAAA;AAI/G,MAAM,kBAAkB,CAAC,OAAgC,gBACvD,oBAAC;AAAA,EAAI,QAAO;AAAA,EAAI,OAAM;AAAA,EAAI;AAAA,EACxB,8BAAC;AAAA,IAAO,IAAG;AAAA,IAAI,IAAG;AAAA,IAAI,GAAE;AAAA,IAAI,aAAY;AAAA,IAAI,MAAM,cAAc,YAAY;AAAA,GAAW;AAAA,CACzF;AAGF,MAAM,gBAAyD,CAAC,EAAE,uBAAuB,QAAQ,YAAY,MAAM;AACjH,MACE,CAAC,CAAC,sBAAsB,OAAO,sBAAsB,MAAM,EAAE;AAAA,IAC3D;AAAA,EACF;AAEA,WAAO;AAET,QAAM,4BAA4B,SAAS,sBAAsB,SAAS;AAE1E,SACE;AAAA,IACG;AAAA,sBAAgB,gBAAgB,EAAE,uBAAuB,0BAA0B,CAAC,GAAG,WAAW;AAAA,MACnG,oBAAC;AAAA,QAAgB,uBAAuB;AAAA,QAA2B;AAAA,OAA0B;AAAA;AAAA,GAC/F;AAEJ;AAEA,IAAO,wBAAQ;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACsCnB,SAeA,UAfA,KAeA,YAfA;AArCJ,SAAS,cAAc;AACvB,SAAS,6BAA6B;AAStC,MAAM,oBAAoB,CAAC,EAAE,sBAAsB,MAA0B;AAAA,aAChE,0BAA0B,sBAAsB,SAAS,MAAM;AAAA,gBAC5D,0BAA0B,sBAAsB,QAAQ,MAAM;AAAA;AAAA;AAI9E,MAAM,kBAAkB,CAAC,EAAE,sBAAsB,OAA2B;AAAA,EAC1E,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,KAAK,0BAA0B,sBAAsB,QAAQ,UAAU;AAAA,EACvE,QAAQ,0BAA0B,sBAAsB,SAAS,UAAU;AAAA,EAC3E,MAAM;AAAA,EACN,SAAS;AACX;AAEA,MAAM,kBAAkB,OAAO;AAAA;AAAA,IAE3B;AAAA;AAAA,WAEO,CAAC,UAAW,MAAM,WAAW,QAAQ;AAAA,YACpC,CAAC,UAAW,MAAM,WAAW,SAAS;AAAA,sBAC5B,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,MAAM,OAAO,MAAM,OAAO,MAAM,OAAO,OAAO;AAAA;AAAA;AAI/G,MAAM,kBAAkB,CAAC,OAAgC,gBACvD,oBAAC,SAAI,QAAO,KAAI,OAAM,KAAI,OACxB,8BAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,aAAY,KAAI,MAAM,cAAc,YAAY,WAAW,GACzF;AAGF,MAAM,gBAAyD,CAAC,EAAE,uBAAuB,QAAQ,YAAY,MAAM;AACjH,MACE,CAAC,CAAC,sBAAsB,OAAO,sBAAsB,MAAM,EAAE;AAAA,IAC3D;AAAA,EACF;AAEA,WAAO;AAET,QAAM,4BAA4B,SAAS,sBAAsB,SAAS;AAE1E,SACE,iCACG;AAAA,oBAAgB,gBAAgB,EAAE,uBAAuB,0BAA0B,CAAC,GAAG,WAAW;AAAA,IACnG,oBAAC,mBAAgB,uBAAuB,2BAA2B,aAA0B;AAAA,KAC/F;AAEJ;AAEA,IAAO,wBAAQ;",
6
6
  "names": []
7
7
  }
@@ -22,46 +22,40 @@ const ExpandCaret = (props) => {
22
22
  virtualListHelpers: { scrollToIndex }
23
23
  } = ctx;
24
24
  if (isGroupOrHasChildrens)
25
- return /* @__PURE__ */ jsx(Button, {
26
- buttonType: "text",
27
- className: "expandable-arrow",
28
- "data-testid": "tree-item-expand-toggle",
29
- icon: isExpanded ? /* @__PURE__ */ jsx(ArrowheadDown, {
25
+ return /* @__PURE__ */ jsx(
26
+ Button,
27
+ {
28
+ buttonType: "text",
29
+ className: "expandable-arrow",
30
+ "data-testid": "tree-item-expand-toggle",
31
+ icon: isExpanded ? /* @__PURE__ */ jsx(ArrowheadDown, { size: "s", "data-testid": "ic-arrow-head-down", color: ["brand-primary", "800"] }) : /* @__PURE__ */ jsx(ArrowheadRight, { size: "s", "data-testid": "ic-arrow-head-right", color: ["brand-primary", "800"] }),
32
+ onMouseDown: (e) => {
33
+ if (e) {
34
+ e.preventDefault();
35
+ }
36
+ },
37
+ onClick: (e) => {
38
+ e.stopPropagation();
39
+ if (e)
40
+ handleExpandGroup(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex, e);
41
+ setLatestToggledItem(item);
42
+ const itemVitualIndex = item.virtualIndex;
43
+ if (typeof itemVitualIndex === "number") {
44
+ onItemFocus({
45
+ itemIndex: itemVitualIndex,
46
+ scrollToItem: (opts = { align: "start" }) => scrollToIndex(itemVitualIndex, opts),
47
+ item
48
+ });
49
+ }
50
+ setFocusedItem(item);
51
+ focusItem(item);
52
+ },
30
53
  size: "s",
31
- "data-testid": "ic-arrow-head-down",
32
- color: ["brand-primary", "800"]
33
- }) : /* @__PURE__ */ jsx(ArrowheadRight, {
34
- size: "s",
35
- "data-testid": "ic-arrow-head-right",
36
- color: ["brand-primary", "800"]
37
- }),
38
- onMouseDown: (e) => {
39
- if (e) {
40
- e.preventDefault();
41
- }
42
- },
43
- onClick: (e) => {
44
- e.stopPropagation();
45
- if (e)
46
- handleExpandGroup(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex, e);
47
- setLatestToggledItem(item);
48
- const itemVitualIndex = item.virtualIndex;
49
- if (typeof itemVitualIndex === "number") {
50
- onItemFocus({
51
- itemIndex: itemVitualIndex,
52
- scrollToItem: (opts = { align: "start" }) => scrollToIndex(itemVitualIndex, opts),
53
- item
54
- });
55
- }
56
- setFocusedItem(item);
57
- focusItem(item);
54
+ tabIndex: -1
58
55
  },
59
- size: "s",
60
- tabIndex: -1
61
- }, `${id}-expand-addon`);
62
- return /* @__PURE__ */ jsx("div", {
63
- style: { width: "24px" }
64
- });
56
+ `${id}-expand-addon`
57
+ );
58
+ return /* @__PURE__ */ jsx("div", { style: { width: "24px" } });
65
59
  };
66
60
  export {
67
61
  ExpandCaret
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ExpandCaret.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback } from 'react';\nimport Button from '@elliemae/ds-button';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { toggleItemExpand } from '../utils/group-expands-helpers';\nimport { focusItem } from '../utils/tree-helpers';\nimport TreeViewContext from '../TreeViewContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\ninterface PropsT {\n item: DSTreeviewT.Item;\n}\n\nexport const ExpandCaret = (props: PropsT): JSX.Element | null => {\n const defaultHandleExpandGroup = useCallback(toggleItemExpand, []);\n const { item } = props;\n const { id, isExpanded, isGroup, children } = item;\n const isGroupOrHasChildrens = isGroup || (Array.isArray(children) && children.length > 0);\n const ctx = useContext(TreeViewContext);\n const {\n props: { onItemFocus },\n handleExpandGroup = defaultHandleExpandGroup,\n triggerTreeRerender,\n updateUserExpandedState,\n setLatestToggledItem,\n setFocusedItem,\n virtualListHelpers: { scrollToIndex },\n } = ctx;\n\n if (isGroupOrHasChildrens)\n return (\n <Button\n buttonType=\"text\"\n className=\"expandable-arrow\"\n data-testid=\"tree-item-expand-toggle\"\n key={`${id}-expand-addon`}\n icon={\n isExpanded ? (\n <ArrowheadDown size=\"s\" data-testid=\"ic-arrow-head-down\" color={['brand-primary', '800']} />\n ) : (\n <ArrowheadRight size=\"s\" data-testid=\"ic-arrow-head-right\" color={['brand-primary', '800']} />\n )\n }\n onMouseDown={(e: React.MouseEvent) => {\n // prevent focusing the caret\n if (e) {\n e.preventDefault();\n }\n }}\n onClick={(e) => {\n e.stopPropagation();\n if (e) handleExpandGroup(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex, e);\n setLatestToggledItem(item);\n const itemVitualIndex = item.virtualIndex;\n if (typeof itemVitualIndex === 'number') {\n onItemFocus({\n itemIndex: itemVitualIndex,\n scrollToItem: (opts = { align: 'start' }) => scrollToIndex(itemVitualIndex, opts),\n item,\n });\n }\n setFocusedItem(item);\n focusItem(item);\n }}\n size=\"s\"\n tabIndex={-1}\n />\n );\n return <div style={{ width: '24px' }} />;\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACqCX;AArCZ,SAAgB,YAAY,mBAAmB;AAC/C,OAAO,YAAY;AACnB,SAAS,eAAe,sBAAsB;AAC9C,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAC1B,OAAO,qBAAqB;AAOrB,MAAM,cAAc,CAAC,UAAsC;AAChE,QAAM,2BAA2B,YAAY,kBAAkB,CAAC,CAAC;AACjE,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,EAAE,IAAI,YAAY,SAAS,SAAS,IAAI;AAC9C,QAAM,wBAAwB,WAAY,MAAM,QAAQ,QAAQ,KAAK,SAAS,SAAS;AACvF,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,YAAY;AAAA,IACrB,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,cAAc;AAAA,EACtC,IAAI;AAEJ,MAAI;AACF,WACE,oBAAC;AAAA,MACC,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MAEZ,MACE,aACE,oBAAC;AAAA,QAAc,MAAK;AAAA,QAAI,eAAY;AAAA,QAAqB,OAAO,CAAC,iBAAiB,KAAK;AAAA,OAAG,IAE1F,oBAAC;AAAA,QAAe,MAAK;AAAA,QAAI,eAAY;AAAA,QAAsB,OAAO,CAAC,iBAAiB,KAAK;AAAA,OAAG;AAAA,MAGhG,aAAa,CAAC,MAAwB;AAEpC,YAAI,GAAG;AACL,YAAE,eAAe;AAAA,QACnB;AAAA,MACF;AAAA,MACA,SAAS,CAAC,MAAM;AACd,UAAE,gBAAgB;AAClB,YAAI;AAAG,4BAAkB,MAAM,qBAAqB,yBAAyB,eAAe,CAAC;AAC7F,6BAAqB,IAAI;AACzB,cAAM,kBAAkB,KAAK;AAC7B,YAAI,OAAO,oBAAoB,UAAU;AACvC,sBAAY;AAAA,YACV,WAAW;AAAA,YACX,cAAc,CAAC,OAAO,EAAE,OAAO,QAAQ,MAAM,cAAc,iBAAiB,IAAI;AAAA,YAChF;AAAA,UACF,CAAC;AAAA,QACH;AACA,uBAAe,IAAI;AACnB,kBAAU,IAAI;AAAA,MAChB;AAAA,MACA,MAAK;AAAA,MACL,UAAU;AAAA,OA9BL,GAAG,iBA+BV;AAEJ,SAAO,oBAAC;AAAA,IAAI,OAAO,EAAE,OAAO,OAAO;AAAA,GAAG;AACxC;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACqCX;AArCZ,SAAgB,YAAY,mBAAmB;AAC/C,OAAO,YAAY;AACnB,SAAS,eAAe,sBAAsB;AAC9C,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAC1B,OAAO,qBAAqB;AAOrB,MAAM,cAAc,CAAC,UAAsC;AAChE,QAAM,2BAA2B,YAAY,kBAAkB,CAAC,CAAC;AACjE,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,EAAE,IAAI,YAAY,SAAS,SAAS,IAAI;AAC9C,QAAM,wBAAwB,WAAY,MAAM,QAAQ,QAAQ,KAAK,SAAS,SAAS;AACvF,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,YAAY;AAAA,IACrB,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,cAAc;AAAA,EACtC,IAAI;AAEJ,MAAI;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAY;AAAA,QAEZ,MACE,aACE,oBAAC,iBAAc,MAAK,KAAI,eAAY,sBAAqB,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAE1F,oBAAC,kBAAe,MAAK,KAAI,eAAY,uBAAsB,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA,QAGhG,aAAa,CAAC,MAAwB;AAEpC,cAAI,GAAG;AACL,cAAE,eAAe;AAAA,UACnB;AAAA,QACF;AAAA,QACA,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AAClB,cAAI;AAAG,8BAAkB,MAAM,qBAAqB,yBAAyB,eAAe,CAAC;AAC7F,+BAAqB,IAAI;AACzB,gBAAM,kBAAkB,KAAK;AAC7B,cAAI,OAAO,oBAAoB,UAAU;AACvC,wBAAY;AAAA,cACV,WAAW;AAAA,cACX,cAAc,CAAC,OAAO,EAAE,OAAO,QAAQ,MAAM,cAAc,iBAAiB,IAAI;AAAA,cAChF;AAAA,YACF,CAAC;AAAA,UACH;AACA,yBAAe,IAAI;AACnB,oBAAU,IAAI;AAAA,QAChB;AAAA,QACA,MAAK;AAAA,QACL,UAAU;AAAA;AAAA,MA9BL,GAAG;AAAA,IA+BV;AAEJ,SAAO,oBAAC,SAAI,OAAO,EAAE,OAAO,OAAO,GAAG;AACxC;",
6
6
  "names": []
7
7
  }
@@ -13,10 +13,7 @@ const NestingSpace = (props) => {
13
13
  const itemNestingLeftPadding = getItemNestingLeftPadding(treeDepth - 1, {
14
14
  spaceForNestingLevel
15
15
  });
16
- return /* @__PURE__ */ jsx("div", {
17
- "data-testid": "tree-item-nested-space",
18
- style: { width: itemNestingLeftPadding }
19
- });
16
+ return /* @__PURE__ */ jsx("div", { "data-testid": "tree-item-nested-space", style: { width: itemNestingLeftPadding } });
20
17
  }
21
18
  return null;
22
19
  };
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/NestingSpace.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nconst getItemNestingLeftPadding = (level: number, opts: { spaceForNestingLevel: number }) => {\n const { spaceForNestingLevel = 1.5 } = opts;\n const groupLeftPadding = spaceForNestingLevel * (level - 1);\n const finalLeftPadding = groupLeftPadding + spaceForNestingLevel - 0.1;\n // root level left-padding would be negative and would not be applied\n // if \"root-level\" nesting, then defaults to 0 left-padding.\n return finalLeftPadding > 0 ? `${finalLeftPadding}em` : '0';\n};\n\ntype NestingSpacePropsType = {\n item: DSTreeviewT.Item;\n spaceForNestingLevel: number;\n};\n\nexport const NestingSpace = (props: NestingSpacePropsType): JSX.Element | null => {\n const { item, spaceForNestingLevel } = props;\n const { treeDepth } = item;\n if (treeDepth) {\n const itemNestingLeftPadding = getItemNestingLeftPadding(treeDepth - 1, {\n spaceForNestingLevel,\n });\n\n return <div data-testid=\"tree-item-nested-space\" style={{ width: itemNestingLeftPadding }} />;\n }\n return null;\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACyBZ;AAtBX,MAAM,4BAA4B,CAAC,OAAe,SAA2C;AAC3F,QAAM,EAAE,uBAAuB,IAAI,IAAI;AACvC,QAAM,mBAAmB,wBAAwB,QAAQ;AACzD,QAAM,mBAAmB,mBAAmB,uBAAuB;AAGnE,SAAO,mBAAmB,IAAI,GAAG,uBAAuB;AAC1D;AAOO,MAAM,eAAe,CAAC,UAAqD;AAChF,QAAM,EAAE,MAAM,qBAAqB,IAAI;AACvC,QAAM,EAAE,UAAU,IAAI;AACtB,MAAI,WAAW;AACb,UAAM,yBAAyB,0BAA0B,YAAY,GAAG;AAAA,MACtE;AAAA,IACF,CAAC;AAED,WAAO,oBAAC;AAAA,MAAI,eAAY;AAAA,MAAyB,OAAO,EAAE,OAAO,uBAAuB;AAAA,KAAG;AAAA,EAC7F;AACA,SAAO;AACT;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACyBZ;AAtBX,MAAM,4BAA4B,CAAC,OAAe,SAA2C;AAC3F,QAAM,EAAE,uBAAuB,IAAI,IAAI;AACvC,QAAM,mBAAmB,wBAAwB,QAAQ;AACzD,QAAM,mBAAmB,mBAAmB,uBAAuB;AAGnE,SAAO,mBAAmB,IAAI,GAAG,uBAAuB;AAC1D;AAOO,MAAM,eAAe,CAAC,UAAqD;AAChF,QAAM,EAAE,MAAM,qBAAqB,IAAI;AACvC,QAAM,EAAE,UAAU,IAAI;AACtB,MAAI,WAAW;AACb,UAAM,yBAAyB,0BAA0B,YAAY,GAAG;AAAA,MACtE;AAAA,IACF,CAAC;AAED,WAAO,oBAAC,SAAI,eAAY,0BAAyB,OAAO,EAAE,OAAO,uBAAuB,GAAG;AAAA,EAC7F;AACA,SAAO;AACT;",
6
6
  "names": []
7
7
  }
@@ -29,15 +29,18 @@ const RadioSelectable = (props) => {
29
29
  }, [id, setSelectedCheckboxes, itemIndex, onSelectionChange, item, scrollToIndex]);
30
30
  const radioName = useMemo(() => `radios-${uniqueTreeViewUUID}`, [uniqueTreeViewUUID]);
31
31
  const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);
32
- return /* @__PURE__ */ jsx(DSRadio, {
33
- checked: selectedCheckboxes[id] === true,
34
- name: radioName,
35
- disabled: isDisabled,
36
- className: "em-ds-tree-item-radio",
37
- "data-testid": "tree-item-radio",
38
- onChange: onRadioChange,
39
- tabIndex: 0
40
- });
32
+ return /* @__PURE__ */ jsx(
33
+ DSRadio,
34
+ {
35
+ checked: selectedCheckboxes[id] === true,
36
+ name: radioName,
37
+ disabled: isDisabled,
38
+ className: "em-ds-tree-item-radio",
39
+ "data-testid": "tree-item-radio",
40
+ onChange: onRadioChange,
41
+ tabIndex: 0
42
+ }
43
+ );
41
44
  };
42
45
  var RadioSelectable_default = RadioSelectable;
43
46
  export {
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/RadioSelectable.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useMemo } from 'react';\nimport { DSRadio } from '@elliemae/ds-form';\nimport TreeViewContext from '../TreeViewContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\ninterface PropsT {\n item: DSTreeviewT.Item;\n itemIndex: number;\n}\nconst RadioSelectable = (props: PropsT) => {\n const { item, itemIndex } = props;\n\n const ctx = useContext(TreeViewContext);\n const {\n props: { onSelectionChange, isItemDisabled },\n virtualListHelpers: { scrollToIndex },\n uniqueTreeViewUUID,\n selectedCheckboxes,\n setSelectedCheckboxes,\n } = ctx;\n\n const { id } = item;\n\n const onRadioChange = useCallback(() => {\n const newSelectionHasmap = { [id]: true };\n setSelectedCheckboxes(newSelectionHasmap);\n const indexAndScrollTo = {\n scrollToItem: () => {\n if (item.virtualIndex) scrollToIndex(item.virtualIndex);\n },\n itemIndex,\n };\n if (onSelectionChange) onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);\n }, [id, setSelectedCheckboxes, itemIndex, onSelectionChange, item, scrollToIndex]);\n\n const radioName = useMemo(() => `radios-${uniqueTreeViewUUID}`, [uniqueTreeViewUUID]);\n\n const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);\n\n return (\n <DSRadio\n checked={selectedCheckboxes[id] === true}\n name={radioName}\n disabled={isDisabled}\n className=\"em-ds-tree-item-radio\"\n data-testid=\"tree-item-radio\"\n onChange={onRadioChange}\n tabIndex={0}\n />\n );\n};\n\nexport default RadioSelectable;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACuCnB;AAvCJ,SAAgB,YAAY,aAAa,eAAe;AACxD,SAAS,eAAe;AACxB,OAAO,qBAAqB;AAM5B,MAAM,kBAAkB,CAAC,UAAkB;AACzC,QAAM,EAAE,MAAM,UAAU,IAAI;AAE5B,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,mBAAmB,eAAe;AAAA,IAC3C,oBAAoB,EAAE,cAAc;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,GAAG,IAAI;AAEf,QAAM,gBAAgB,YAAY,MAAM;AACtC,UAAM,qBAAqB,EAAE,CAAC,KAAK,KAAK;AACxC,0BAAsB,kBAAkB;AACxC,UAAM,mBAAmB;AAAA,MACvB,cAAc,MAAM;AAClB,YAAI,KAAK;AAAc,wBAAc,KAAK,YAAY;AAAA,MACxD;AAAA,MACA;AAAA,IACF;AACA,QAAI;AAAmB,wBAAkB,oBAAoB,MAAM,gBAAgB;AAAA,EACrF,GAAG,CAAC,IAAI,uBAAuB,WAAW,mBAAmB,MAAM,aAAa,CAAC;AAEjF,QAAM,YAAY,QAAQ,MAAM,UAAU,sBAAsB,CAAC,kBAAkB,CAAC;AAEpF,QAAM,aAAa,QAAQ,MAAM,eAAe,IAAI,GAAG,CAAC,MAAM,cAAc,CAAC;AAE7E,SACE,oBAAC;AAAA,IACC,SAAS,mBAAmB,QAAQ;AAAA,IACpC,MAAM;AAAA,IACN,UAAU;AAAA,IACV,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA,GACZ;AAEJ;AAEA,IAAO,0BAAQ;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACuCnB;AAvCJ,SAAgB,YAAY,aAAa,eAAe;AACxD,SAAS,eAAe;AACxB,OAAO,qBAAqB;AAM5B,MAAM,kBAAkB,CAAC,UAAkB;AACzC,QAAM,EAAE,MAAM,UAAU,IAAI;AAE5B,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,mBAAmB,eAAe;AAAA,IAC3C,oBAAoB,EAAE,cAAc;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,GAAG,IAAI;AAEf,QAAM,gBAAgB,YAAY,MAAM;AACtC,UAAM,qBAAqB,EAAE,CAAC,KAAK,KAAK;AACxC,0BAAsB,kBAAkB;AACxC,UAAM,mBAAmB;AAAA,MACvB,cAAc,MAAM;AAClB,YAAI,KAAK;AAAc,wBAAc,KAAK,YAAY;AAAA,MACxD;AAAA,MACA;AAAA,IACF;AACA,QAAI;AAAmB,wBAAkB,oBAAoB,MAAM,gBAAgB;AAAA,EACrF,GAAG,CAAC,IAAI,uBAAuB,WAAW,mBAAmB,MAAM,aAAa,CAAC;AAEjF,QAAM,YAAY,QAAQ,MAAM,UAAU,sBAAsB,CAAC,kBAAkB,CAAC;AAEpF,QAAM,aAAa,QAAQ,MAAM,eAAe,IAAI,GAAG,CAAC,MAAM,cAAc,CAAC;AAE7E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,mBAAmB,QAAQ;AAAA,MACpC,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,UAAU;AAAA,MACV,UAAU;AAAA;AAAA,EACZ;AAEJ;AAEA,IAAO,0BAAQ;",
6
6
  "names": []
7
7
  }
@@ -130,66 +130,44 @@ const TreeItem = (props) => {
130
130
  );
131
131
  const childrenLength = useMemo(() => children?.length ?? 0, [children]);
132
132
  const ariaLabel = `${itemLabelText}${showChildrenAmount && childrenLength > 0 ? `, ${childrenLength} Items` : ""}`;
133
- return /* @__PURE__ */ jsxs(TreeListItem, {
134
- tabIndex: 0,
135
- onMouseLeave: () => {
136
- if (hoverItem?.id === item.id) {
137
- setHoverItem(null);
138
- }
139
- },
140
- onMouseEnter: () => {
141
- setHoverItem(item);
142
- },
143
- onClick: handleItemClick,
144
- onBlur: () => setFocusedItem(null),
145
- ref: setItemRefs,
146
- style: { ...itemWrapperStyle },
147
- className: finalClassName,
148
- "aria-expanded": !!item.isExpanded,
149
- "aria-selected": !!selectedCheckboxes[item.id],
150
- "aria-label": ariaLabel,
151
- "data-id": item.id,
152
- "data-index": item.virtualIndex,
153
- onKeyDown: onItemKeyDown,
154
- children: [
155
- /* @__PURE__ */ jsxs(TreeListItemAddonsWrapper, {
156
- children: [
157
- withDragAndDrop ? /* @__PURE__ */ jsx(DnDHandle, {
158
- id,
159
- isDragOverlay
160
- }) : null,
161
- withRadioChecks && !isDragOverlay ? /* @__PURE__ */ jsx(RadioSelectable, {
162
- item,
163
- itemIndex
164
- }) : null,
165
- withCheckboxChecks && !isDragOverlay ? /* @__PURE__ */ jsx(CheckboxSelectable, {
166
- item,
167
- itemIndex
168
- }) : null,
169
- !isDragOverlay && /* @__PURE__ */ jsx(NestingSpace, {
170
- item,
171
- spaceForNestingLevel
172
- }),
173
- !isDragOverlay && /* @__PURE__ */ jsx(ExpandCaret, {
174
- item
175
- }),
176
- !disableIcons ? /* @__PURE__ */ jsx(Icon, {
177
- item
178
- }) : null
179
- ]
180
- }),
181
- /* @__PURE__ */ jsx(TreeItemText, {
182
- item
183
- }),
184
- rightAddons && /* @__PURE__ */ jsx(TreeListItemAddonsWrapper, {
185
- children: typeof rightAddons === "function" ? rightAddons(item) : rightAddons
186
- }),
187
- /* @__PURE__ */ jsx(DropIndicator, {
188
- dropIndicatorPosition,
189
- isDropValid
190
- })
191
- ]
192
- });
133
+ return /* @__PURE__ */ jsxs(
134
+ TreeListItem,
135
+ {
136
+ tabIndex: 0,
137
+ onMouseLeave: () => {
138
+ if (hoverItem?.id === item.id) {
139
+ setHoverItem(null);
140
+ }
141
+ },
142
+ onMouseEnter: () => {
143
+ setHoverItem(item);
144
+ },
145
+ onClick: handleItemClick,
146
+ onBlur: () => setFocusedItem(null),
147
+ ref: setItemRefs,
148
+ style: { ...itemWrapperStyle },
149
+ className: finalClassName,
150
+ "aria-expanded": !!item.isExpanded,
151
+ "aria-selected": !!selectedCheckboxes[item.id],
152
+ "aria-label": ariaLabel,
153
+ "data-id": item.id,
154
+ "data-index": item.virtualIndex,
155
+ onKeyDown: onItemKeyDown,
156
+ children: [
157
+ /* @__PURE__ */ jsxs(TreeListItemAddonsWrapper, { children: [
158
+ withDragAndDrop ? /* @__PURE__ */ jsx(DnDHandle, { id, isDragOverlay }) : null,
159
+ withRadioChecks && !isDragOverlay ? /* @__PURE__ */ jsx(RadioSelectable, { item, itemIndex }) : null,
160
+ withCheckboxChecks && !isDragOverlay ? /* @__PURE__ */ jsx(CheckboxSelectable, { item, itemIndex }) : null,
161
+ !isDragOverlay && /* @__PURE__ */ jsx(NestingSpace, { item, spaceForNestingLevel }),
162
+ !isDragOverlay && /* @__PURE__ */ jsx(ExpandCaret, { item }),
163
+ !disableIcons ? /* @__PURE__ */ jsx(Icon, { item }) : null
164
+ ] }),
165
+ /* @__PURE__ */ jsx(TreeItemText, { item }),
166
+ rightAddons && /* @__PURE__ */ jsx(TreeListItemAddonsWrapper, { children: typeof rightAddons === "function" ? rightAddons(item) : rightAddons }),
167
+ /* @__PURE__ */ jsx(DropIndicator, { dropIndicatorPosition, isDropValid })
168
+ ]
169
+ }
170
+ );
193
171
  };
194
172
  var TreeItem_default = withDnDSortableItemContext(TreeItem);
195
173
  export {