@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.
- package/dist/cjs/TreeView.js +1 -4
- package/dist/cjs/TreeView.js.map +1 -1
- package/dist/cjs/config/useTreeview.js +1 -1
- package/dist/cjs/config/useTreeview.js.map +2 -2
- package/dist/cjs/hoc/WithConditionalDnDContext.js +24 -31
- package/dist/cjs/hoc/WithConditionalDnDContext.js.map +1 -1
- package/dist/cjs/hoc/WithDnDSortableItemContext.js +1 -6
- package/dist/cjs/hoc/WithDnDSortableItemContext.js.map +1 -1
- package/dist/cjs/parts/CheckboxSelectable.js +5 -4
- package/dist/cjs/parts/CheckboxSelectable.js.map +1 -1
- package/dist/cjs/parts/ChildrenCountDisplayer.js +4 -8
- package/dist/cjs/parts/ChildrenCountDisplayer.js.map +1 -1
- package/dist/cjs/parts/DnDHandle.js +19 -16
- package/dist/cjs/parts/DnDHandle.js.map +1 -1
- package/dist/cjs/parts/DropIndicator.js +5 -21
- package/dist/cjs/parts/DropIndicator.js.map +1 -1
- package/dist/cjs/parts/ExpandCaret.js +32 -38
- package/dist/cjs/parts/ExpandCaret.js.map +1 -1
- package/dist/cjs/parts/NestingSpace.js +1 -4
- package/dist/cjs/parts/NestingSpace.js.map +1 -1
- package/dist/cjs/parts/RadioSelectable.js +12 -9
- package/dist/cjs/parts/RadioSelectable.js.map +1 -1
- package/dist/cjs/parts/TreeItem.js +38 -60
- package/dist/cjs/parts/TreeItem.js.map +1 -1
- package/dist/cjs/parts/TreeItemText.js +39 -53
- package/dist/cjs/parts/TreeItemText.js.map +1 -1
- package/dist/cjs/parts/TreeList.js +61 -62
- package/dist/cjs/parts/TreeList.js.map +1 -1
- package/dist/cjs/related-components/TreeViewSearchBar.js +14 -11
- package/dist/cjs/related-components/TreeViewSearchBar.js.map +1 -1
- package/dist/esm/TreeView.js +1 -4
- package/dist/esm/TreeView.js.map +1 -1
- package/dist/esm/config/useTreeview.js +1 -1
- package/dist/esm/config/useTreeview.js.map +2 -2
- package/dist/esm/hoc/WithConditionalDnDContext.js +24 -31
- package/dist/esm/hoc/WithConditionalDnDContext.js.map +1 -1
- package/dist/esm/hoc/WithDnDSortableItemContext.js +1 -6
- package/dist/esm/hoc/WithDnDSortableItemContext.js.map +1 -1
- package/dist/esm/parts/CheckboxSelectable.js +5 -4
- package/dist/esm/parts/CheckboxSelectable.js.map +1 -1
- package/dist/esm/parts/ChildrenCountDisplayer.js +4 -8
- package/dist/esm/parts/ChildrenCountDisplayer.js.map +1 -1
- package/dist/esm/parts/DnDHandle.js +19 -16
- package/dist/esm/parts/DnDHandle.js.map +1 -1
- package/dist/esm/parts/DropIndicator.js +5 -21
- package/dist/esm/parts/DropIndicator.js.map +1 -1
- package/dist/esm/parts/ExpandCaret.js +32 -38
- package/dist/esm/parts/ExpandCaret.js.map +1 -1
- package/dist/esm/parts/NestingSpace.js +1 -4
- package/dist/esm/parts/NestingSpace.js.map +1 -1
- package/dist/esm/parts/RadioSelectable.js +12 -9
- package/dist/esm/parts/RadioSelectable.js.map +1 -1
- package/dist/esm/parts/TreeItem.js +38 -60
- package/dist/esm/parts/TreeItem.js.map +1 -1
- package/dist/esm/parts/TreeItemText.js +39 -53
- package/dist/esm/parts/TreeItemText.js.map +1 -1
- package/dist/esm/parts/TreeList.js +61 -62
- package/dist/esm/parts/TreeList.js.map +1 -1
- package/dist/esm/related-components/TreeViewSearchBar.js +14 -11
- package/dist/esm/related-components/TreeViewSearchBar.js.map +1 -1
- package/package.json +11 -11
|
@@ -162,66 +162,44 @@ const TreeItem = (props) => {
|
|
|
162
162
|
);
|
|
163
163
|
const childrenLength = (0, import_react.useMemo)(() => children?.length ?? 0, [children]);
|
|
164
164
|
const ariaLabel = `${itemLabelText}${showChildrenAmount && childrenLength > 0 ? `, ${childrenLength} Items` : ""}`;
|
|
165
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
}) : null,
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
spaceForNestingLevel
|
|
204
|
-
}),
|
|
205
|
-
!isDragOverlay && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ExpandCaret.ExpandCaret, {
|
|
206
|
-
item
|
|
207
|
-
}),
|
|
208
|
-
!disableIcons ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, {
|
|
209
|
-
item
|
|
210
|
-
}) : null
|
|
211
|
-
]
|
|
212
|
-
}),
|
|
213
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TreeItemText.TreeItemText, {
|
|
214
|
-
item
|
|
215
|
-
}),
|
|
216
|
-
rightAddons && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TreeListItemAddonsWrapper, {
|
|
217
|
-
children: typeof rightAddons === "function" ? rightAddons(item) : rightAddons
|
|
218
|
-
}),
|
|
219
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropIndicator.default, {
|
|
220
|
-
dropIndicatorPosition,
|
|
221
|
-
isDropValid
|
|
222
|
-
})
|
|
223
|
-
]
|
|
224
|
-
});
|
|
165
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
166
|
+
TreeListItem,
|
|
167
|
+
{
|
|
168
|
+
tabIndex: 0,
|
|
169
|
+
onMouseLeave: () => {
|
|
170
|
+
if (hoverItem?.id === item.id) {
|
|
171
|
+
setHoverItem(null);
|
|
172
|
+
}
|
|
173
|
+
},
|
|
174
|
+
onMouseEnter: () => {
|
|
175
|
+
setHoverItem(item);
|
|
176
|
+
},
|
|
177
|
+
onClick: handleItemClick,
|
|
178
|
+
onBlur: () => setFocusedItem(null),
|
|
179
|
+
ref: setItemRefs,
|
|
180
|
+
style: { ...itemWrapperStyle },
|
|
181
|
+
className: finalClassName,
|
|
182
|
+
"aria-expanded": !!item.isExpanded,
|
|
183
|
+
"aria-selected": !!selectedCheckboxes[item.id],
|
|
184
|
+
"aria-label": ariaLabel,
|
|
185
|
+
"data-id": item.id,
|
|
186
|
+
"data-index": item.virtualIndex,
|
|
187
|
+
onKeyDown: onItemKeyDown,
|
|
188
|
+
children: [
|
|
189
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TreeListItemAddonsWrapper, { children: [
|
|
190
|
+
withDragAndDrop ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DnDHandle.DnDHandle, { id, isDragOverlay }) : null,
|
|
191
|
+
withRadioChecks && !isDragOverlay ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_RadioSelectable.default, { item, itemIndex }) : null,
|
|
192
|
+
withCheckboxChecks && !isDragOverlay ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CheckboxSelectable.default, { item, itemIndex }) : null,
|
|
193
|
+
!isDragOverlay && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_NestingSpace.NestingSpace, { item, spaceForNestingLevel }),
|
|
194
|
+
!isDragOverlay && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ExpandCaret.ExpandCaret, { item }),
|
|
195
|
+
!disableIcons ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { item }) : null
|
|
196
|
+
] }),
|
|
197
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TreeItemText.TreeItemText, { item }),
|
|
198
|
+
rightAddons && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TreeListItemAddonsWrapper, { children: typeof rightAddons === "function" ? rightAddons(item) : rightAddons }),
|
|
199
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropIndicator.default, { dropIndicatorPosition, isDropValid })
|
|
200
|
+
]
|
|
201
|
+
}
|
|
202
|
+
);
|
|
225
203
|
};
|
|
226
204
|
var TreeItem_default = (0, import_WithDnDSortableItemContext.withDnDSortableItemContext)(TreeItem);
|
|
227
205
|
//# sourceMappingURL=TreeItem.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/TreeItem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\n\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nimport RadioSelectable from './RadioSelectable';\nimport CheckboxSelectable from './CheckboxSelectable';\nimport TreeViewContext from '../TreeViewContext';\nimport { setMultipleRefs } from '../utils/refs-helpers';\nimport { useOnItemKeyDown } from '../utils/keyboard-helpers';\nimport { NestingSpace } from './NestingSpace';\nimport { Icon } from './Icon';\nimport { ExpandCaret } from './ExpandCaret';\nimport { TreeItemText } from './TreeItemText';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport { DnDHandle } from './DnDHandle';\nimport { withDnDSortableItemContext } from '../hoc/WithDnDSortableItemContext';\nimport { DropIndicatorPosition, SortableItemContext } from '../hoc/SortableItemContext';\nimport DropIndicator from './DropIndicator';\n\nexport const TreeListItem = aggregatedClasses('li', {\n 'data-testid': treeItemBlockName,\n role: 'treeitem',\n // temp fix untill we move to styled components\n})(treeItemBlockName) as unknown as React.ComponentType<React.ComponentProps<'li'>>;\n\nexport const TreeListItemAddonsWrapper = aggregatedClasses('div')(\n treeItemBlockName,\n 'addons',\n // temp fix untill we move to styled components\n) as unknown as React.ComponentType;\n\ninterface PropsT {\n item: DSTreeviewT.Item;\n itemIndex: number;\n isDragOverlay?: boolean;\n virtualItemRef?: React.RefObject<HTMLLIElement>;\n itemWrapperStyle?: { [key: string]: unknown };\n spaceForNestingLevel?: number;\n}\nexport const TreeItem = (props: PropsT): JSX.Element => {\n const {\n item,\n itemIndex,\n itemWrapperStyle = {},\n virtualItemRef,\n spaceForNestingLevel = 1.5,\n isDragOverlay = false,\n } = props;\n const { id, node, children } = item;\n const { nodeItemRef } = node.model;\n\n const { draggableProps } = useContext(SortableItemContext);\n\n const onItemKeyDown = useOnItemKeyDown(item, draggableProps);\n\n const ctx = useContext(TreeViewContext);\n const {\n props: {\n disableIcons,\n rightAddons,\n onItemClick,\n onItemActivate,\n onItemFocus,\n rowSize,\n labelOverflow,\n nameKey,\n showChildrenAmount,\n },\n withRadioChecks,\n withCheckboxChecks,\n withDragAndDrop,\n selectedItem,\n selectedCheckboxes,\n hoverItem,\n virtualListHelpers: { scrollToIndex },\n setHoverItem,\n setSelectedItem,\n setFocusedItem,\n } = ctx;\n const itemLabelText = item[nameKey] as DSTreeviewT.Item['name'];\n\n // Sortable Items needs to update\n // - the virtual list ref (for react-virtual requirement)\n // - nodeItemRef which is a prop avaiable in the TreeModel nodes\n // - the drag and drop node reference\n const setItemRefs: React.LegacyRef<HTMLLIElement> | undefined = (ref: HTMLLIElement) => {\n setMultipleRefs(\n virtualItemRef,\n !isDragOverlay && nodeItemRef,\n !isDragOverlay && draggableProps && draggableProps.setNodeRef,\n )(ref);\n };\n\n const dropIndicatorPosition =\n draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n const isDropIndicatorPositionInside = dropIndicatorPosition === DropIndicatorPosition.Inside;\n\n const isDragging = draggableProps && draggableProps.isDragging;\n\n const isDropValid = draggableProps && draggableProps.isDropValid;\n\n const dropPreviewClassName = useMemo(() => {\n if (isDropIndicatorPositionInside) {\n const className = `${DSTreeViewPrefix}-${treeItemBlockName}${isDropValid ? '--valid' : '--invalid'}-drop-in`;\n return className;\n }\n return '';\n }, [isDropIndicatorPositionInside, isDropValid]);\n\n const dragOverlayClassName = useMemo(() => (isDragOverlay ? 'drag-overlay' : ''), [isDragOverlay]);\n\n const selectedClassName = useMemo(\n () => (selectedItem?.id === item.id && !isDragOverlay ? 'selected' : ''),\n [isDragOverlay, item.id, selectedItem?.id],\n );\n const hoverClassName = useMemo(\n () => (!isDragOverlay && hoverItem?.id === item.id && !isDragging ? 'hover' : ''),\n [isDragOverlay, hoverItem?.id, item.id, isDragging],\n );\n const fixedHeightClassname = useMemo(() => {\n if (labelOverflow === 'truncate') {\n if (rowSize === 'compact') return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height-compact`;\n return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height`;\n }\n return '';\n }, [labelOverflow, rowSize]);\n\n const isDraggingClassname = useMemo(() => {\n if (isDragging) return `${DSTreeViewPrefix}-${treeItemBlockName}--dragging`;\n return '';\n }, [isDragging]);\n\n const finalClassName = useMemo(\n () =>\n `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName} ${dragOverlayClassName} ${isDraggingClassname}`,\n [\n dropPreviewClassName,\n fixedHeightClassname,\n selectedClassName,\n hoverClassName,\n dragOverlayClassName,\n isDraggingClassname,\n ],\n );\n\n const handleItemClick = useCallback(\n (e: React.MouseEvent<HTMLLIElement>) => {\n onItemClick(item, e);\n setFocusedItem(item);\n setSelectedItem(item);\n onItemActivate(item, e);\n const itemVirtualIndex = typeof item.virtualIndex === 'number' ? item.virtualIndex : -1;\n onItemFocus({\n itemIndex: itemVirtualIndex,\n scrollToItem: (opts = { align: 'start' }) => scrollToIndex(itemVirtualIndex, opts),\n item,\n });\n },\n [onItemClick, item, setFocusedItem, setSelectedItem, onItemActivate, onItemFocus, scrollToIndex],\n );\n\n const childrenLength = useMemo(() => children?.length ?? 0, [children]);\n\n const ariaLabel = `${itemLabelText}${showChildrenAmount && childrenLength > 0 ? `, ${childrenLength} Items` : ''}`;\n\n return (\n <TreeListItem\n tabIndex={0}\n onMouseLeave={() => {\n if (hoverItem?.id === item.id) {\n setHoverItem(null);\n }\n }}\n onMouseEnter={() => {\n setHoverItem(item);\n }}\n onClick={handleItemClick}\n onBlur={() => setFocusedItem(null)}\n ref={setItemRefs}\n style={{ ...itemWrapperStyle }}\n className={finalClassName}\n aria-expanded={!!item.isExpanded}\n aria-selected={!!selectedCheckboxes[item.id]}\n aria-label={ariaLabel}\n data-id={item.id}\n data-index={item.virtualIndex}\n onKeyDown={onItemKeyDown}\n >\n <TreeListItemAddonsWrapper>\n {withDragAndDrop ? <DnDHandle id={id} isDragOverlay={isDragOverlay} /> : null}\n {withRadioChecks && !isDragOverlay ? <RadioSelectable item={item} itemIndex={itemIndex} /> : null}\n {withCheckboxChecks && !isDragOverlay ? <CheckboxSelectable item={item} itemIndex={itemIndex} /> : null}\n {!isDragOverlay && <NestingSpace item={item} spaceForNestingLevel={spaceForNestingLevel} />}\n {!isDragOverlay && <ExpandCaret item={item} />}\n {!disableIcons ? <Icon item={item} /> : null}\n </TreeListItemAddonsWrapper>\n <TreeItemText item={item} />\n {rightAddons && (\n <TreeListItemAddonsWrapper>\n {typeof rightAddons === 'function' ? rightAddons(item) : rightAddons}\n </TreeListItemAddonsWrapper>\n )}\n <DropIndicator dropIndicatorPosition={dropIndicatorPosition} isDropValid={isDropValid} />\n </TreeListItem>\n );\n};\n\nexport default withDnDSortableItemContext(TreeItem);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "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
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["TreeViewContext", "RadioSelectable", "CheckboxSelectable", "DropIndicator"]
|
|
7
7
|
}
|
|
@@ -40,11 +40,7 @@ const ItemContent = (0, import_ds_classnames.aggregatedClasses)("div")(`${import
|
|
|
40
40
|
const ItemValue = (0, import_ds_classnames.aggregatedClasses)("span")(import_cssClassesConstants.treeItemBlockName, "value");
|
|
41
41
|
const classNameModifierWrapAll = `${import_cssClassesConstants.DSTreeViewPrefix}-${import_cssClassesConstants.treeItemBlockName}__value--wrap-all`;
|
|
42
42
|
const classNameModifierTruncate = `${import_cssClassesConstants.DSTreeViewPrefix}-${import_cssClassesConstants.treeItemBlockName}__value--truncate`;
|
|
43
|
-
const CustomHighlight = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("mark", {
|
|
44
|
-
className: "tree-text-highlight",
|
|
45
|
-
"data-testid": "tree-text-highlight",
|
|
46
|
-
children
|
|
47
|
-
});
|
|
43
|
+
const CustomHighlight = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("mark", { className: "tree-text-highlight", "data-testid": "tree-text-highlight", children });
|
|
48
44
|
const TreeItemText = (props) => {
|
|
49
45
|
const { item } = props;
|
|
50
46
|
const ctx = (0, import_react.useContext)(import_TreeViewContext.default);
|
|
@@ -55,68 +51,58 @@ const TreeItemText = (props) => {
|
|
|
55
51
|
const itemLabelText = item[nameKey];
|
|
56
52
|
if (searchQuery) {
|
|
57
53
|
if (labelOverflow === "truncate") {
|
|
58
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
54
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
55
|
+
import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText,
|
|
56
|
+
{
|
|
57
|
+
value: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
58
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
59
|
+
import_react_highlight_words.default,
|
|
60
|
+
{
|
|
61
|
+
autoEscape: true,
|
|
62
|
+
highlightTag: CustomHighlight,
|
|
63
|
+
searchWords: [searchQuery],
|
|
64
|
+
textToHighlight: itemLabelText
|
|
65
|
+
}
|
|
66
|
+
),
|
|
67
|
+
showChildrenAmount ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChildrenCountDisplayer.ChildrenCountDisplayer, { item }) : null
|
|
68
|
+
] })
|
|
69
|
+
}
|
|
70
|
+
);
|
|
73
71
|
}
|
|
74
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
75
|
-
|
|
76
|
-
|
|
72
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
73
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
74
|
+
import_react_highlight_words.default,
|
|
75
|
+
{
|
|
77
76
|
autoEscape: true,
|
|
78
77
|
highlightTag: CustomHighlight,
|
|
79
78
|
searchWords: [searchQuery],
|
|
80
79
|
textToHighlight: itemLabelText
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
]
|
|
86
|
-
});
|
|
80
|
+
}
|
|
81
|
+
),
|
|
82
|
+
showChildrenAmount ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChildrenCountDisplayer.ChildrenCountDisplayer, { item }) : null
|
|
83
|
+
] });
|
|
87
84
|
}
|
|
88
85
|
if (labelOverflow === "truncate") {
|
|
89
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
90
|
-
|
|
91
|
-
|
|
86
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
87
|
+
import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText,
|
|
88
|
+
{
|
|
89
|
+
value: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
92
90
|
itemLabelText,
|
|
93
|
-
showChildrenAmount ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChildrenCountDisplayer.ChildrenCountDisplayer, {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
})
|
|
98
|
-
});
|
|
91
|
+
showChildrenAmount ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChildrenCountDisplayer.ChildrenCountDisplayer, { item }) : null
|
|
92
|
+
] })
|
|
93
|
+
}
|
|
94
|
+
);
|
|
99
95
|
}
|
|
100
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
item
|
|
105
|
-
}) : null
|
|
106
|
-
]
|
|
107
|
-
});
|
|
96
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
97
|
+
itemLabelText,
|
|
98
|
+
showChildrenAmount ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChildrenCountDisplayer.ChildrenCountDisplayer, { item }) : null
|
|
99
|
+
] });
|
|
108
100
|
}, [item, searchQuery, nameKey, showChildrenAmount, labelOverflow]);
|
|
109
101
|
let className = "";
|
|
110
102
|
if (labelOverflow === "wrap-all")
|
|
111
103
|
className += `${classNameModifierWrapAll} `;
|
|
112
104
|
if (labelOverflow === "truncate")
|
|
113
105
|
className += `${classNameModifierTruncate} `;
|
|
114
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemContent, {
|
|
115
|
-
"data-testid": `${import_cssClassesConstants.treeItemBlockName}-content`,
|
|
116
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemValue, {
|
|
117
|
-
className,
|
|
118
|
-
children: Text
|
|
119
|
-
})
|
|
120
|
-
});
|
|
106
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemContent, { "data-testid": `${import_cssClassesConstants.treeItemBlockName}-content`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemValue, { className, children: Text }) });
|
|
121
107
|
};
|
|
122
108
|
//# sourceMappingURL=TreeItemText.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/TreeItemText.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useMemo, useContext } from 'react';\nimport Highlighter from 'react-highlight-words';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nimport { ChildrenCountDisplayer } from './ChildrenCountDisplayer';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\n\nimport TreeViewContext from '../TreeViewContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nconst ItemContent = aggregatedClasses('div')(`${treeItemBlockName}-content`) as unknown as React.ComponentType<\n React.ComponentProps<'div'>\n>;\nconst ItemValue = aggregatedClasses('span')(treeItemBlockName, 'value') as unknown as React.ComponentType<\n React.ComponentProps<'span'>\n>;\n\n// const wrapperClassName = `${DSTreeViewPrefix}-${treeItemBlockName}-content`;\nconst classNameModifierWrapAll = `${DSTreeViewPrefix}-${treeItemBlockName}__value--wrap-all`;\nconst classNameModifierTruncate = `${DSTreeViewPrefix}-${treeItemBlockName}__value--truncate`;\n\n// eslint-disable-next-line react/prop-types\nconst CustomHighlight = ({ children }: { children: React.ReactNode }) => (\n <mark className=\"tree-text-highlight\" data-testid=\"tree-text-highlight\">\n {children}\n </mark>\n);\ninterface PropsT {\n item: DSTreeviewT.Item;\n}\nexport const TreeItemText = (props: PropsT): JSX.Element => {\n const { item } = props;\n const ctx = useContext(TreeViewContext);\n const {\n props: { searchQuery, showChildrenAmount, labelOverflow, nameKey },\n } = ctx;\n\n const Text = useMemo(() => {\n const itemLabelText = item[nameKey] as DSTreeviewT.Item['name'];\n if (searchQuery) {\n if (labelOverflow === 'truncate') {\n return (\n <SimpleTruncatedTooltipText\n value={\n <>\n <Highlighter\n autoEscape\n highlightTag={CustomHighlight}\n searchWords={[searchQuery]}\n textToHighlight={itemLabelText}\n />\n {showChildrenAmount ? <ChildrenCountDisplayer item={item} /> : null}\n </>\n }\n />\n );\n }\n return (\n <>\n <Highlighter\n autoEscape\n highlightTag={CustomHighlight}\n searchWords={[searchQuery]}\n textToHighlight={itemLabelText}\n />\n {showChildrenAmount ? <ChildrenCountDisplayer item={item} /> : null}\n </>\n );\n }\n if (labelOverflow === 'truncate') {\n return (\n <SimpleTruncatedTooltipText\n value={\n <>\n {itemLabelText}\n {showChildrenAmount ? <ChildrenCountDisplayer item={item} /> : null}\n </>\n }\n />\n );\n }\n return (\n <>\n {itemLabelText}\n {showChildrenAmount ? <ChildrenCountDisplayer item={item} /> : null}\n </>\n );\n }, [item, searchQuery, nameKey, showChildrenAmount, labelOverflow]);\n\n let className = '';\n if (labelOverflow === 'wrap-all') className += `${classNameModifierWrapAll} `;\n if (labelOverflow === 'truncate') className += `${classNameModifierTruncate} `;\n\n return (\n <ItemContent data-testid={`${treeItemBlockName}-content`}>\n <ItemValue className={className}>{Text}</ItemValue>\n </ItemContent>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBrB;AAxBF,mBAA2C;AAC3C,mCAAwB;AACxB,uCAA2C;AAC3C,2BAAkC;AAElC,oCAAuC;AACvC,iCAAoD;AAEpD,6BAA4B;AAG5B,MAAM,kBAAc,wCAAkB,KAAK,EAAE,GAAG,sDAA2B;AAG3E,MAAM,gBAAY,wCAAkB,MAAM,EAAE,8CAAmB,OAAO;AAKtE,MAAM,2BAA2B,GAAG,+CAAoB;AACxD,MAAM,4BAA4B,GAAG,+CAAoB;AAGzD,MAAM,kBAAkB,CAAC,EAAE,SAAS,MAClC,4CAAC
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBrB;AAxBF,mBAA2C;AAC3C,mCAAwB;AACxB,uCAA2C;AAC3C,2BAAkC;AAElC,oCAAuC;AACvC,iCAAoD;AAEpD,6BAA4B;AAG5B,MAAM,kBAAc,wCAAkB,KAAK,EAAE,GAAG,sDAA2B;AAG3E,MAAM,gBAAY,wCAAkB,MAAM,EAAE,8CAAmB,OAAO;AAKtE,MAAM,2BAA2B,GAAG,+CAAoB;AACxD,MAAM,4BAA4B,GAAG,+CAAoB;AAGzD,MAAM,kBAAkB,CAAC,EAAE,SAAS,MAClC,4CAAC,UAAK,WAAU,uBAAsB,eAAY,uBAC/C,UACH;AAKK,MAAM,eAAe,CAAC,UAA+B;AAC1D,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,UAAM,yBAAW,uBAAAA,OAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,aAAa,oBAAoB,eAAe,QAAQ;AAAA,EACnE,IAAI;AAEJ,QAAM,WAAO,sBAAQ,MAAM;AACzB,UAAM,gBAAgB,KAAK;AAC3B,QAAI,aAAa;AACf,UAAI,kBAAkB,YAAY;AAChC,eACE;AAAA,UAAC;AAAA;AAAA,YACC,OACE,4EACE;AAAA;AAAA,gBAAC,6BAAAC;AAAA,gBAAA;AAAA,kBACC,YAAU;AAAA,kBACV,cAAc;AAAA,kBACd,aAAa,CAAC,WAAW;AAAA,kBACzB,iBAAiB;AAAA;AAAA,cACnB;AAAA,cACC,qBAAqB,4CAAC,wDAAuB,MAAY,IAAK;AAAA,eACjE;AAAA;AAAA,QAEJ;AAAA,MAEJ;AACA,aACE,4EACE;AAAA;AAAA,UAAC,6BAAAA;AAAA,UAAA;AAAA,YACC,YAAU;AAAA,YACV,cAAc;AAAA,YACd,aAAa,CAAC,WAAW;AAAA,YACzB,iBAAiB;AAAA;AAAA,QACnB;AAAA,QACC,qBAAqB,4CAAC,wDAAuB,MAAY,IAAK;AAAA,SACjE;AAAA,IAEJ;AACA,QAAI,kBAAkB,YAAY;AAChC,aACE;AAAA,QAAC;AAAA;AAAA,UACC,OACE,4EACG;AAAA;AAAA,YACA,qBAAqB,4CAAC,wDAAuB,MAAY,IAAK;AAAA,aACjE;AAAA;AAAA,MAEJ;AAAA,IAEJ;AACA,WACE,4EACG;AAAA;AAAA,MACA,qBAAqB,4CAAC,wDAAuB,MAAY,IAAK;AAAA,OACjE;AAAA,EAEJ,GAAG,CAAC,MAAM,aAAa,SAAS,oBAAoB,aAAa,CAAC;AAElE,MAAI,YAAY;AAChB,MAAI,kBAAkB;AAAY,iBAAa,GAAG;AAClD,MAAI,kBAAkB;AAAY,iBAAa,GAAG;AAElD,SACE,4CAAC,eAAY,eAAa,GAAG,wDAC3B,sDAAC,aAAU,WAAuB,gBAAK,GACzC;AAEJ;",
|
|
6
6
|
"names": ["TreeViewContext", "Highlighter"]
|
|
7
7
|
}
|
|
@@ -63,68 +63,67 @@ const TreeListComp = () => {
|
|
|
63
63
|
const { totalSize, virtualItems } = virtualListHelpers;
|
|
64
64
|
const className = `${rowSize === "compact" ? `${compactRowClass}` : `${normaRowClass}`}`;
|
|
65
65
|
const { visibleItems } = (0, import_react.useContext)(import_DnDTreeContext.DnDTreeContext);
|
|
66
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
});
|
|
66
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
67
|
+
TreeListWrapper,
|
|
68
|
+
{
|
|
69
|
+
ref: virtualListRef,
|
|
70
|
+
className,
|
|
71
|
+
style: {
|
|
72
|
+
height: `${typeof height === "number" ? `${height}px` : height}`,
|
|
73
|
+
width: `${typeof width === "number" ? `${width}px` : width}`,
|
|
74
|
+
overflow: "auto"
|
|
75
|
+
},
|
|
76
|
+
children: [
|
|
77
|
+
isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
78
|
+
"div",
|
|
79
|
+
{
|
|
80
|
+
style: {
|
|
81
|
+
width: "100%",
|
|
82
|
+
height: "100%",
|
|
83
|
+
display: "flex",
|
|
84
|
+
alignItems: "center",
|
|
85
|
+
justifyContent: "center"
|
|
86
|
+
},
|
|
87
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_circular_progress_indicator.DSCircularProgressIndicator, { size: "xl", loading: isLoading, showLabel: true, waiting: false, showTooltip: false })
|
|
88
|
+
}
|
|
89
|
+
) : null,
|
|
90
|
+
!isLoading && virtualItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TreeListNoItems, { children: noItemsPlaceholder }) : null,
|
|
91
|
+
!isLoading && virtualItems.length !== 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
92
|
+
"div",
|
|
93
|
+
{
|
|
94
|
+
style: {
|
|
95
|
+
height: `${totalSize}px`,
|
|
96
|
+
width: "100%",
|
|
97
|
+
position: "relative"
|
|
98
|
+
},
|
|
99
|
+
children: virtualItems.map((virtualItem) => {
|
|
100
|
+
const { index, measureRef, start } = virtualItem;
|
|
101
|
+
const item = (visibleItems || flattenedVisibleItems)[index];
|
|
102
|
+
if (!item)
|
|
103
|
+
return null;
|
|
104
|
+
item.virtualIndex = index;
|
|
105
|
+
const { id } = item;
|
|
106
|
+
const style = {
|
|
107
|
+
position: "absolute",
|
|
108
|
+
top: `${start}px`,
|
|
109
|
+
left: 0,
|
|
110
|
+
width: "100%"
|
|
111
|
+
};
|
|
112
|
+
const listItemProps = {
|
|
113
|
+
key: `DS-TreeView-List-Item-${id}`,
|
|
114
|
+
virtualItemRef: measureRef,
|
|
115
|
+
index,
|
|
116
|
+
itemIndex: index,
|
|
117
|
+
item,
|
|
118
|
+
itemWrapperStyle: style
|
|
119
|
+
};
|
|
120
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TreeItem.default, { ...listItemProps });
|
|
121
|
+
})
|
|
122
|
+
}
|
|
123
|
+
) : null
|
|
124
|
+
]
|
|
125
|
+
}
|
|
126
|
+
);
|
|
128
127
|
};
|
|
129
128
|
const TreeList = (0, import_WithConditionalDnDContext.withConditionalDnDRowContext)(TreeListComp);
|
|
130
129
|
//# sourceMappingURL=TreeList.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/TreeList.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useContext } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\n\nimport TreeViewContext from '../TreeViewContext';\nimport { DSTreeViewPrefix, treeListBlockName } from '../config/cssClassesConstants';\nimport TreeItem from './TreeItem';\n\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport { withConditionalDnDRowContext } from '../hoc/WithConditionalDnDContext';\nimport { DnDTreeContext } from '../hoc/DnDTreeContext';\n\nexport const treeListNoItemsBn = `${treeListBlockName}-no-items`;\nexport const TreeListNoItems = aggregatedClasses('div', {\n 'data-testid': treeListNoItemsBn,\n})(treeListNoItemsBn) as unknown as React.ComponentType<React.ComponentProps<'div'>>;\n\n// React.ComponentProps<'ul'> uses LegacyRef typings that existed pre-hook era\n// we omit the LegacyRef typings in favor of hook-era typings\ninterface UlProps extends Omit<React.ComponentProps<'ul'>, 'ref'> {\n ref: React.MutableRefObject<HTMLUListElement | undefined> | undefined;\n}\nexport const TreeListWrapper = aggregatedClasses('ul', {\n 'data-testid': treeListBlockName,\n role: 'tree',\n})(treeListBlockName, null, ({ rowSize }: { rowSize: 'normal' | 'compact' }) => ({\n [`rowsize-${rowSize}`]: rowSize,\n})) as unknown as React.ComponentType<UlProps>;\n\nconst compactRowClass = `${DSTreeViewPrefix}-tv-row-size-compact`;\nconst normaRowClass = `${DSTreeViewPrefix}-tv-row-size-normal`;\n\ninterface PropsT {\n onMouseDragOverItem?: (opts: {\n event: React.MouseEvent<HTMLLIElement>;\n item: DSTreeviewT.Item;\n itemIndex: number;\n setIsDraggingOverThis: React.Dispatch<React.SetStateAction<boolean>>;\n openFolderOnHoverTimeout: React.MutableRefObject<NodeJS.Timeout | null>;\n }) => void;\n}\n\nconst TreeListComp: React.ComponentType<PropsT> = () => {\n const ctx = useContext(TreeViewContext);\n const {\n virtualListRef,\n virtualListHelpers,\n visibleItems: flattenedVisibleItems,\n props: { width, height, rowSize, noItemsPlaceholder, isLoading },\n } = ctx;\n const { totalSize, virtualItems } = virtualListHelpers;\n const className = `${rowSize === 'compact' ? `${compactRowClass}` : `${normaRowClass}`}`;\n\n const { visibleItems } = useContext(DnDTreeContext);\n\n return (\n <TreeListWrapper\n ref={virtualListRef}\n className={className}\n style={{\n height: `${typeof height === 'number' ? `${height}px` : height}`,\n width: `${typeof width === 'number' ? `${width}px` : width}`,\n overflow: 'auto',\n }}\n >\n {isLoading ? (\n <div\n style={{\n width: '100%',\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n }}\n >\n <DSCircularProgressIndicator size=\"xl\" loading={isLoading} showLabel waiting={false} showTooltip={false} />\n </div>\n ) : null}\n {!isLoading && virtualItems.length === 0 ? <TreeListNoItems>{noItemsPlaceholder}</TreeListNoItems> : null}\n {!isLoading && virtualItems.length !== 0 ? (\n <div\n style={{\n height: `${totalSize}px`,\n width: '100%',\n position: 'relative',\n }}\n >\n {virtualItems.map((virtualItem) => {\n const { index, measureRef, start } = virtualItem;\n const item = (visibleItems || flattenedVisibleItems)[index];\n if (!item) return null;\n item.virtualIndex = index;\n const { id } = item;\n\n const style = {\n position: 'absolute',\n top: `${start}px`,\n left: 0,\n width: '100%',\n };\n\n const listItemProps = {\n key: `DS-TreeView-List-Item-${id}`,\n virtualItemRef: measureRef,\n index, // this is consumed by the DnD HOC\n itemIndex: index,\n item,\n itemWrapperStyle: style,\n };\n\n return <TreeItem {...listItemProps} />;\n })}\n </div>\n ) : null}\n </TreeListWrapper>\n );\n};\n\nexport const TreeList = withConditionalDnDRowContext(TreeListComp);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyDnB;AAxDJ,mBAAkC;AAClC,2BAAkC;AAClC,4CAA4C;AAE5C,6BAA4B;AAC5B,iCAAoD;AACpD,sBAAqB;AAGrB,uCAA6C;AAC7C,4BAA+B;AAExB,MAAM,oBAAoB,GAAG;AAC7B,MAAM,sBAAkB,wCAAkB,OAAO;AAAA,EACtD,eAAe;AACjB,CAAC,EAAE,iBAAiB;AAOb,MAAM,sBAAkB,wCAAkB,MAAM;AAAA,EACrD,eAAe;AAAA,EACf,MAAM;AACR,CAAC,EAAE,8CAAmB,MAAM,CAAC,EAAE,QAAQ,OAA0C;AAAA,EAC/E,CAAC,WAAW,YAAY;AAC1B,EAAE;AAEF,MAAM,kBAAkB,GAAG;AAC3B,MAAM,gBAAgB,GAAG;AAYzB,MAAM,eAA4C,MAAM;AACtD,QAAM,UAAM,yBAAW,uBAAAA,OAAe;AACtC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,OAAO,EAAE,OAAO,QAAQ,SAAS,oBAAoB,UAAU;AAAA,EACjE,IAAI;AACJ,QAAM,EAAE,WAAW,aAAa,IAAI;AACpC,QAAM,YAAY,GAAG,YAAY,YAAY,GAAG,oBAAoB,GAAG;AAEvE,QAAM,EAAE,aAAa,QAAI,yBAAW,oCAAc;AAElD,SACE,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyDnB;AAxDJ,mBAAkC;AAClC,2BAAkC;AAClC,4CAA4C;AAE5C,6BAA4B;AAC5B,iCAAoD;AACpD,sBAAqB;AAGrB,uCAA6C;AAC7C,4BAA+B;AAExB,MAAM,oBAAoB,GAAG;AAC7B,MAAM,sBAAkB,wCAAkB,OAAO;AAAA,EACtD,eAAe;AACjB,CAAC,EAAE,iBAAiB;AAOb,MAAM,sBAAkB,wCAAkB,MAAM;AAAA,EACrD,eAAe;AAAA,EACf,MAAM;AACR,CAAC,EAAE,8CAAmB,MAAM,CAAC,EAAE,QAAQ,OAA0C;AAAA,EAC/E,CAAC,WAAW,YAAY;AAC1B,EAAE;AAEF,MAAM,kBAAkB,GAAG;AAC3B,MAAM,gBAAgB,GAAG;AAYzB,MAAM,eAA4C,MAAM;AACtD,QAAM,UAAM,yBAAW,uBAAAA,OAAe;AACtC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,OAAO,EAAE,OAAO,QAAQ,SAAS,oBAAoB,UAAU;AAAA,EACjE,IAAI;AACJ,QAAM,EAAE,WAAW,aAAa,IAAI;AACpC,QAAM,YAAY,GAAG,YAAY,YAAY,GAAG,oBAAoB,GAAG;AAEvE,QAAM,EAAE,aAAa,QAAI,yBAAW,oCAAc;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,OAAO;AAAA,QACL,QAAQ,GAAG,OAAO,WAAW,WAAW,GAAG,aAAa;AAAA,QACxD,OAAO,GAAG,OAAO,UAAU,WAAW,GAAG,YAAY;AAAA,QACrD,UAAU;AAAA,MACZ;AAAA,MAEC;AAAA,oBACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,gBAAgB;AAAA,YAClB;AAAA,YAEA,sDAAC,qEAA4B,MAAK,MAAK,SAAS,WAAW,WAAS,MAAC,SAAS,OAAO,aAAa,OAAO;AAAA;AAAA,QAC3G,IACE;AAAA,QACH,CAAC,aAAa,aAAa,WAAW,IAAI,4CAAC,mBAAiB,8BAAmB,IAAqB;AAAA,QACpG,CAAC,aAAa,aAAa,WAAW,IACrC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,QAAQ,GAAG;AAAA,cACX,OAAO;AAAA,cACP,UAAU;AAAA,YACZ;AAAA,YAEC,uBAAa,IAAI,CAAC,gBAAgB;AACjC,oBAAM,EAAE,OAAO,YAAY,MAAM,IAAI;AACrC,oBAAM,QAAQ,gBAAgB,uBAAuB;AACrD,kBAAI,CAAC;AAAM,uBAAO;AAClB,mBAAK,eAAe;AACpB,oBAAM,EAAE,GAAG,IAAI;AAEf,oBAAM,QAAQ;AAAA,gBACZ,UAAU;AAAA,gBACV,KAAK,GAAG;AAAA,gBACR,MAAM;AAAA,gBACN,OAAO;AAAA,cACT;AAEA,oBAAM,gBAAgB;AAAA,gBACpB,KAAK,yBAAyB;AAAA,gBAC9B,gBAAgB;AAAA,gBAChB;AAAA,gBACA,WAAW;AAAA,gBACX;AAAA,gBACA,kBAAkB;AAAA,cACpB;AAEA,qBAAO,4CAAC,gBAAAC,SAAA,EAAU,GAAG,eAAe;AAAA,YACtC,CAAC;AAAA;AAAA,QACH,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;AAEO,MAAM,eAAW,+DAA6B,YAAY;",
|
|
6
6
|
"names": ["TreeViewContext", "TreeItem"]
|
|
7
7
|
}
|
|
@@ -32,16 +32,19 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
32
32
|
var import_ds_form = require("@elliemae/ds-form");
|
|
33
33
|
const TreeViewSearchBar = (props) => {
|
|
34
34
|
const { handleChange, onNext, onPrevious, onClear, currentResultIndex, totalResults, value } = props;
|
|
35
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
35
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
36
|
+
import_ds_form.DSNavSearchBox,
|
|
37
|
+
{
|
|
38
|
+
onChange: (v) => {
|
|
39
|
+
handleChange({ target: { value: v } });
|
|
40
|
+
},
|
|
41
|
+
onNext,
|
|
42
|
+
onPrevious,
|
|
43
|
+
onClear,
|
|
44
|
+
currentResultIndex,
|
|
45
|
+
totalResults,
|
|
46
|
+
value
|
|
47
|
+
}
|
|
48
|
+
);
|
|
46
49
|
};
|
|
47
50
|
//# sourceMappingURL=TreeViewSearchBar.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/related-components/TreeViewSearchBar.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-lines */\nimport React from 'react';\nimport { DSNavSearchBox } from '@elliemae/ds-form';\n\ninterface PropsT {\n handleChange: (opt: { target: { value: string } }) => void;\n onNext: () => void;\n onPrevious: () => void;\n onClear: () => void;\n currentResultIndex: number;\n totalResults: number;\n value: string;\n}\n\nexport const TreeViewSearchBar = (props: PropsT) => {\n const { handleChange, onNext, onPrevious, onClear, currentResultIndex, totalResults, value } = props;\n\n return (\n <DSNavSearchBox\n onChange={(v: string) => {\n handleChange({ target: { value: v } });\n }}\n onNext={onNext}\n onPrevious={onPrevious}\n onClear={onClear}\n currentResultIndex={currentResultIndex}\n totalResults={totalResults}\n value={value}\n />\n );\n};\n\n// TreeViewSearchBar.propTypes = {\n// value: PropTypes.string.isRequired,\n// handleChange: PropTypes.func.isRequired,\n// onNext: PropTypes.func.isRequired,\n// onPrevious: PropTypes.func.isRequired,\n// onClear: PropTypes.func.isRequired,\n// currentResultIndex: PropTypes.number.isRequired,\n// totalResults: PropTypes.number.isRequired,\n// };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBnB;AAhBJ,qBAA+B;AAYxB,MAAM,oBAAoB,CAAC,UAAkB;AAClD,QAAM,EAAE,cAAc,QAAQ,YAAY,SAAS,oBAAoB,cAAc,MAAM,IAAI;AAE/F,SACE,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBnB;AAhBJ,qBAA+B;AAYxB,MAAM,oBAAoB,CAAC,UAAkB;AAClD,QAAM,EAAE,cAAc,QAAQ,YAAY,SAAS,oBAAoB,cAAc,MAAM,IAAI;AAE/F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,CAAC,MAAc;AACvB,qBAAa,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,CAAC;AAAA,MACvC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/TreeView.js
CHANGED
|
@@ -7,10 +7,7 @@ import { useTreeview } from "./config/useTreeview";
|
|
|
7
7
|
import { TreeList } from "./parts/TreeList";
|
|
8
8
|
const TreeView = (props) => {
|
|
9
9
|
const { ctx } = useTreeview(props);
|
|
10
|
-
return /* @__PURE__ */ jsx(TreeViewContext.Provider, {
|
|
11
|
-
value: ctx,
|
|
12
|
-
children: /* @__PURE__ */ jsx(TreeList, {})
|
|
13
|
-
});
|
|
10
|
+
return /* @__PURE__ */ jsx(TreeViewContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(TreeList, {}) });
|
|
14
11
|
};
|
|
15
12
|
TreeView.displayName = "TreeView";
|
|
16
13
|
const TreeViewWithSchema = describe(TreeView);
|
package/dist/esm/TreeView.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/TreeView.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { TreeViewPropTypes } from './react-desc-prop-types';\nimport TreeViewContext from './TreeViewContext';\nimport { useTreeview } from './config/useTreeview';\nimport { TreeList } from './parts/TreeList';\nimport type { DSTreeviewT } from './react-desc-prop-types';\nexport const TreeView = (props: DSTreeviewT.Props) => {\n const { ctx } = useTreeview(props);\n\n return (\n <TreeViewContext.Provider value={ctx}>\n <TreeList />\n </TreeViewContext.Provider>\n );\n};\n\nTreeView.displayName = 'TreeView';\nconst TreeViewWithSchema = describe(TreeView);\nTreeViewWithSchema.propTypes = TreeViewPropTypes;\n\nexport { TreeViewWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACYjB;AAXN,SAAS,gBAAgB;AACzB,SAAS,yBAAyB;AAClC,OAAO,qBAAqB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AAElB,MAAM,WAAW,CAAC,UAA6B;AACpD,QAAM,EAAE,IAAI,IAAI,YAAY,KAAK;AAEjC,SACE,oBAAC,gBAAgB,UAAhB
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACYjB;AAXN,SAAS,gBAAgB;AACzB,SAAS,yBAAyB;AAClC,OAAO,qBAAqB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AAElB,MAAM,WAAW,CAAC,UAA6B;AACpD,QAAM,EAAE,IAAI,IAAI,YAAY,KAAK;AAEjC,SACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,KAC/B,8BAAC,YAAS,GACZ;AAEJ;AAEA,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -12,7 +12,7 @@ import { useInstanceRefActions } from "../utils/useInstanceRefActions";
|
|
|
12
12
|
import { useGlobalToggleAllExpandShortcut } from "../utils/keyboard-helpers";
|
|
13
13
|
const useTreeview = (props) => {
|
|
14
14
|
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
15
|
-
useValidateTypescriptPropTypes(propsWithDefault, TreeViewPropTypes);
|
|
15
|
+
useValidateTypescriptPropTypes(propsWithDefault, TreeViewPropTypes, "DSTreeView");
|
|
16
16
|
const defaultActions = {
|
|
17
17
|
actions: {
|
|
18
18
|
toggleExpandAll: () => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useTreeview.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport { useState, useRef, useEffect, useMemo, useCallback } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\n\nimport { TreeViewPropTypes } from '../react-desc-prop-types';\nimport { defaultProps } from '../TreeViewContext';\nimport { TreeDndPlugin } from '../plugins/dnd';\nimport { useTree } from '../utils/useTree';\nimport { useNotifyExpandedChange, toggleItemExpand } from '../utils/group-expands-helpers';\nimport { useInstanceRefActions } from '../utils/useInstanceRefActions';\nimport { useGlobalToggleAllExpandShortcut } from '../utils/keyboard-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\ntype UseTreeviewT = (props: DSTreeviewT.Props) => { ctx: DSTreeviewInternalsT.CTX };\n\nexport const useTreeview: UseTreeviewT = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSTreeviewT.Props>(props, defaultProps);\n useValidateTypescriptPropTypes
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,UAAU,QAAQ,WAAW,SAAS,mBAAmB;AAClE,SAAS,kBAAkB;AAC3B,SAAS,8BAA8B,sCAAsC;AAC7E,SAAS,WAAW;AAEpB,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,eAAe;AACxB,SAAS,yBAAyB,wBAAwB;AAC1D,SAAS,6BAA6B;AACtC,SAAS,wCAAwC;AAM1C,MAAM,cAA4B,CAAC,UAAU;AAClD,QAAM,mBAAmB,6BAAgD,OAAO,YAAY;AAC5F,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport { useState, useRef, useEffect, useMemo, useCallback } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\n\nimport { TreeViewPropTypes } from '../react-desc-prop-types';\nimport { defaultProps } from '../TreeViewContext';\nimport { TreeDndPlugin } from '../plugins/dnd';\nimport { useTree } from '../utils/useTree';\nimport { useNotifyExpandedChange, toggleItemExpand } from '../utils/group-expands-helpers';\nimport { useInstanceRefActions } from '../utils/useInstanceRefActions';\nimport { useGlobalToggleAllExpandShortcut } from '../utils/keyboard-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\ntype UseTreeviewT = (props: DSTreeviewT.Props) => { ctx: DSTreeviewInternalsT.CTX };\n\nexport const useTreeview: UseTreeviewT = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSTreeviewT.Props>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefault, TreeViewPropTypes, 'DSTreeView');\n const defaultActions = {\n actions: {\n toggleExpandAll: () => {},\n scrollTo: () => {},\n setSelectedItemByVirtualIndex: () => {},\n setFocusedItemByVirtualIndex: () => {},\n },\n } as unknown as DSTreeviewT.InstanceRef;\n const treeRef = useRef(defaultActions);\n const {\n data,\n plugins,\n onOrderChange,\n isMultiSelect,\n isSingleSelect,\n instanceRef,\n selection,\n onInstanceRefInitialized,\n } = propsWithDefault;\n const [uniqueTreeViewUUID] = useState(uid(6));\n const [hoverItem, setHoverItem] = useState<DSTreeviewT.Item | null>(null);\n const [latestToggledItem, setLatestToggledItem] = useState<DSTreeviewT.Item | null>(null);\n const [selectedItem, setSelectedItem] = useState<DSTreeviewT.Item | null>(null);\n const [focusedItem, setFocusedItem] = useState<DSTreeviewT.Item | null>(null);\n const [selectedCheckboxes, setSelectedCheckboxes] = useState({\n ...selection,\n });\n const [expandedGroups, setExpandedGroups] = useState<DSTreeviewT.ExpandedItems>({});\n const { visibleItems, flattenedItems, tree, treeRoot, triggerTreeRerender, updateUserExpandedState } = useTree(\n data,\n propsWithDefault,\n {\n setExpandedGroups,\n },\n );\n\n const virtualListRef = useRef<HTMLUListElement>();\n // estimateSize should not be really required given what was stated on\n // https://github.com/tannerlinsley/react-virtual/issues/23\n\n const virtualListHelpers = useVirtual({\n size: visibleItems.length,\n parentRef: virtualListRef,\n overscan: 15,\n });\n\n const withDragAndDrop = !!(plugins?.includes(TreeDndPlugin) && onOrderChange);\n const withRadioChecks = isSingleSelect && !isMultiSelect;\n const withCheckboxChecks = !isSingleSelect && isMultiSelect;\n\n const handleExpandGroup = useCallback(toggleItemExpand, []);\n\n const ctx: DSTreeviewInternalsT.CTX = useMemo(\n () => ({\n props: propsWithDefault,\n virtualListHelpers,\n virtualListRef,\n tree,\n treeRoot,\n visibleItems,\n flattenedItems,\n triggerTreeRerender,\n withRadioChecks,\n withCheckboxChecks,\n withDragAndDrop,\n uniqueTreeViewUUID,\n selectedCheckboxes,\n setSelectedCheckboxes,\n selectedItem,\n setSelectedItem,\n expandedGroups,\n setExpandedGroups,\n latestToggledItem,\n setLatestToggledItem,\n focusedItem,\n setFocusedItem,\n hoverItem,\n setHoverItem,\n handleExpandGroup,\n updateUserExpandedState,\n }),\n [\n propsWithDefault,\n virtualListHelpers,\n tree,\n treeRoot,\n visibleItems,\n flattenedItems,\n triggerTreeRerender,\n withRadioChecks,\n withCheckboxChecks,\n withDragAndDrop,\n uniqueTreeViewUUID,\n selectedCheckboxes,\n selectedItem,\n expandedGroups,\n latestToggledItem,\n focusedItem,\n hoverItem,\n handleExpandGroup,\n updateUserExpandedState,\n ],\n );\n // this hooks can't use the context because the context provider doesn't wrap this\n // as such we manually pass the second parameter as fit\n if (instanceRef) instanceRef.current = treeRef.current;\n useInstanceRefActions(treeRef.current, ctx);\n useGlobalToggleAllExpandShortcut(treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);\n useNotifyExpandedChange(propsWithDefault, ctx);\n\n // this is an horrible hack.\n // this is required because there is no \"on rendered\" react-way to check if every children has finished rendering\n // this should be working for now, in the future we may want to review this for a better solution\n useEffect(() => {\n setTimeout(() => onInstanceRefInitialized(treeRef), 100);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return useMemo(() => ({ ctx }), [ctx]);\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,UAAU,QAAQ,WAAW,SAAS,mBAAmB;AAClE,SAAS,kBAAkB;AAC3B,SAAS,8BAA8B,sCAAsC;AAC7E,SAAS,WAAW;AAEpB,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,eAAe;AACxB,SAAS,yBAAyB,wBAAwB;AAC1D,SAAS,6BAA6B;AACtC,SAAS,wCAAwC;AAM1C,MAAM,cAA4B,CAAC,UAAU;AAClD,QAAM,mBAAmB,6BAAgD,OAAO,YAAY;AAC5F,iCAA+B,kBAAkB,mBAAmB,YAAY;AAChF,QAAM,iBAAiB;AAAA,IACrB,SAAS;AAAA,MACP,iBAAiB,MAAM;AAAA,MAAC;AAAA,MACxB,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,+BAA+B,MAAM;AAAA,MAAC;AAAA,MACtC,8BAA8B,MAAM;AAAA,MAAC;AAAA,IACvC;AAAA,EACF;AACA,QAAM,UAAU,OAAO,cAAc;AACrC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,kBAAkB,IAAI,SAAS,IAAI,CAAC,CAAC;AAC5C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAkC,IAAI;AACxE,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAkC,IAAI;AACxF,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkC,IAAI;AAC9E,QAAM,CAAC,aAAa,cAAc,IAAI,SAAkC,IAAI;AAC5E,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS;AAAA,IAC3D,GAAG;AAAA,EACL,CAAC;AACD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAoC,CAAC,CAAC;AAClF,QAAM,EAAE,cAAc,gBAAgB,MAAM,UAAU,qBAAqB,wBAAwB,IAAI;AAAA,IACrG;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAAA,IACF;AAAA,EACF;AAEA,QAAM,iBAAiB,OAAyB;AAIhD,QAAM,qBAAqB,WAAW;AAAA,IACpC,MAAM,aAAa;AAAA,IACnB,WAAW;AAAA,IACX,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,kBAAkB,CAAC,EAAE,SAAS,SAAS,aAAa,KAAK;AAC/D,QAAM,kBAAkB,kBAAkB,CAAC;AAC3C,QAAM,qBAAqB,CAAC,kBAAkB;AAE9C,QAAM,oBAAoB,YAAY,kBAAkB,CAAC,CAAC;AAE1D,QAAM,MAAgC;AAAA,IACpC,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAGA,MAAI;AAAa,gBAAY,UAAU,QAAQ;AAC/C,wBAAsB,QAAQ,SAAS,GAAG;AAC1C,mCAAiC,UAAU,qBAAqB,sBAAsB,uBAAuB;AAC7G,0BAAwB,kBAAkB,GAAG;AAK7C,YAAU,MAAM;AACd,eAAW,MAAM,yBAAyB,OAAO,GAAG,GAAG;AAAA,EAEzD,GAAG,CAAC,CAAC;AAEL,SAAO,QAAQ,OAAO,EAAE,IAAI,IAAI,CAAC,GAAG,CAAC;AACvC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|