@elliemae/ds-treeview 3.9.1-rc.8 → 3.9.1
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 +2 -3
- package/dist/cjs/TreeView.js.map +2 -2
- package/dist/cjs/TreeViewContext.js +1 -0
- package/dist/cjs/TreeViewContext.js.map +2 -2
- package/dist/cjs/parts/TreeItem.js +13 -2
- package/dist/cjs/parts/TreeItem.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +1 -0
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/utils/keyboard-helpers.js +15 -13
- package/dist/cjs/utils/keyboard-helpers.js.map +2 -2
- package/dist/cjs/utils/useInstanceRefActions.js +3 -2
- package/dist/cjs/utils/useInstanceRefActions.js.map +2 -2
- package/dist/esm/TreeView.js +2 -3
- package/dist/esm/TreeView.js.map +2 -2
- package/dist/esm/TreeViewContext.js +1 -0
- package/dist/esm/TreeViewContext.js.map +2 -2
- package/dist/esm/parts/TreeItem.js +13 -2
- package/dist/esm/parts/TreeItem.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +1 -0
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/utils/keyboard-helpers.js +15 -13
- package/dist/esm/utils/keyboard-helpers.js.map +2 -2
- package/dist/esm/utils/useInstanceRefActions.js +3 -2
- package/dist/esm/utils/useInstanceRefActions.js.map +2 -2
- package/package.json +15 -12
package/dist/cjs/TreeView.js
CHANGED
|
@@ -35,14 +35,13 @@ var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
|
35
35
|
var import_TreeViewContext = __toESM(require("./TreeViewContext"));
|
|
36
36
|
var import_useTreeview = require("./config/useTreeview");
|
|
37
37
|
var import_TreeList = require("./parts/TreeList");
|
|
38
|
-
|
|
38
|
+
const TreeView = (props) => {
|
|
39
39
|
const { ctx } = (0, import_useTreeview.useTreeview)(props);
|
|
40
40
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TreeViewContext.default.Provider, {
|
|
41
41
|
value: ctx,
|
|
42
42
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TreeList.TreeList, {})
|
|
43
43
|
});
|
|
44
|
-
}
|
|
45
|
-
TreeView.propTypes = import_react_desc_prop_types.TreeViewPropTypes;
|
|
44
|
+
};
|
|
46
45
|
TreeView.displayName = "TreeView";
|
|
47
46
|
const TreeViewWithSchema = (0, import_ds_utilities.describe)(TreeView);
|
|
48
47
|
TreeViewWithSchema.propTypes = import_react_desc_prop_types.TreeViewPropTypes;
|
package/dist/cjs/TreeView.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TreeView.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,0BAAyB;AACzB,mCAAkC;AAClC,6BAA4B;AAC5B,yBAA4B;AAC5B,sBAAyB;AAElB,
|
|
4
|
+
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,0BAAyB;AACzB,mCAAkC;AAClC,6BAA4B;AAC5B,yBAA4B;AAC5B,sBAAyB;AAElB,MAAM,WAAW,CAAC,UAA6B;AACpD,QAAM,EAAE,IAAI,QAAI,gCAAY,KAAK;AAEjC,SACE,4CAAC,uBAAAA,QAAgB,UAAhB;AAAA,IAAyB,OAAO;AAAA,IAC/B,sDAAC,4BAAS;AAAA,GACZ;AAEJ;AAEA,SAAS,cAAc;AACvB,MAAM,yBAAqB,8BAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
|
|
6
6
|
"names": ["TreeViewContext"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TreeViewContext.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable no-unused-vars */\nimport { createContext, createRef } from 'react';\nimport type { DSTreeviewT } from './react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from './sharedTypes';\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\n\nexport const defaultProps = {\n plugins: [],\n selection: {},\n instanceRef: createRef(),\n isItemDisabled: () => false,\n disableIcons: false,\n isMultiSelect: false,\n isSingleSelect: false,\n getIsDropValid: () => true,\n showChildrenAmount: false,\n isLoading: false,\n highlightOnlyQuery: false,\n onItemClick: noop,\n onItemFocus: noop,\n onVisibleItemsChange: noop,\n onOrderChange: noop,\n onSelectionChange: noop,\n onExpandChange: noop,\n onInstanceRefInitialized: noop,\n rowSize: 'normal',\n labelOverflow: 'wrap',\n noItemsPlaceholder: 'No items found',\n nameKey: 'name',\n width: '100%',\n height: '100%',\n groupIcon: null,\n itemIcon: null,\n searchQuery: '',\n // workaround on the typings over the fact that\n // when we instantiate the context we can't have all the props\n // we only have a part of them but the final typings will include missing props\n // this is safe to do because\n // we will \"mergeWithDefaults\" + \"validatePropTypes\" when we do instantiate the context\n} as unknown as DSTreeviewT.Props;\n\nexport const defaultRelativeMouseCoord = {\n isBefore: false,\n isAfter: false,\n isValid: true,\n item: null,\n x: null,\n y: null,\n relativeElementDOMRect: null,\n relativeElementIndex: null,\n};\n\nconst defaultContext: DSTreeviewInternalsT.CTX = {\n props: defaultProps,\n visibleItems: [],\n flattenedItems: [],\n withRadioChecks: false,\n withCheckboxChecks: false,\n withDragAndDrop: false,\n triggerTreeRerender: noop,\n tree: undefined,\n treeRoot: undefined,\n virtualListHelpers: {\n virtualItems: [],\n totalSize: 0,\n scrollToOffset: noop,\n scrollToIndex: noop,\n measure: noop,\n },\n virtualListRef: undefined,\n uniqueTreeViewUUID: '',\n selectedItem: null,\n setSelectedItem: noop,\n focusedItem: null,\n setFocusedItem: noop,\n selectedCheckboxes: {},\n setSelectedCheckboxes: noop,\n expandedGroups: {},\n setExpandedGroups: noop,\n latestToggledItem: null,\n setLatestToggledItem: noop,\n hoverItem: null,\n setHoverItem: noop,\n handleExpandGroup: noop,\n updateUserExpandedState: noop,\n};\n\n/** Context for cross component communication */\nconst TreeViewContext = createContext(defaultContext);\n\nexport default TreeViewContext;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAyC;AAKzC,SAAS,QAA6B,OAAgB;AAAC;AAEhD,MAAM,eAAe;AAAA,EAC1B,SAAS,CAAC;AAAA,EACV,WAAW,CAAC;AAAA,EACZ,iBAAa,wBAAU;AAAA,EACvB,gBAAgB,MAAM;AAAA,EACtB,cAAc;AAAA,EACd,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,gBAAgB,MAAM;AAAA,EACtB,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,0BAA0B;AAAA,EAC1B,SAAS;AAAA,EACT,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,UAAU;AAAA,EACV,aAAa;AAMf;AAEO,MAAM,4BAA4B;AAAA,EACvC,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AAAA,EACN,GAAG;AAAA,EACH,GAAG;AAAA,EACH,wBAAwB;AAAA,EACxB,sBAAsB;AACxB;AAEA,MAAM,iBAA2C;AAAA,EAC/C,OAAO;AAAA,EACP,cAAc,CAAC;AAAA,EACf,gBAAgB,CAAC;AAAA,EACjB,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,oBAAoB;AAAA,IAClB,cAAc,CAAC;AAAA,IACf,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,oBAAoB,CAAC;AAAA,EACrB,uBAAuB;AAAA,EACvB,gBAAgB,CAAC;AAAA,EACjB,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,WAAW;AAAA,EACX,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,yBAAyB;AAC3B;AAGA,MAAM,sBAAkB,4BAAc,cAAc;AAEpD,IAAO,0BAAQ;",
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-unused-vars */\nimport { createContext, createRef } from 'react';\nimport type { DSTreeviewT } from './react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from './sharedTypes';\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\n\nexport const defaultProps = {\n plugins: [],\n selection: {},\n instanceRef: createRef(),\n isItemDisabled: () => false,\n disableIcons: false,\n isMultiSelect: false,\n isSingleSelect: false,\n getIsDropValid: () => true,\n showChildrenAmount: false,\n isLoading: false,\n highlightOnlyQuery: false,\n onItemClick: noop,\n onItemActivate: noop,\n onItemFocus: noop,\n onVisibleItemsChange: noop,\n onOrderChange: noop,\n onSelectionChange: noop,\n onExpandChange: noop,\n onInstanceRefInitialized: noop,\n rowSize: 'normal',\n labelOverflow: 'wrap',\n noItemsPlaceholder: 'No items found',\n nameKey: 'name',\n width: '100%',\n height: '100%',\n groupIcon: null,\n itemIcon: null,\n searchQuery: '',\n // workaround on the typings over the fact that\n // when we instantiate the context we can't have all the props\n // we only have a part of them but the final typings will include missing props\n // this is safe to do because\n // we will \"mergeWithDefaults\" + \"validatePropTypes\" when we do instantiate the context\n} as unknown as DSTreeviewT.Props;\n\nexport const defaultRelativeMouseCoord = {\n isBefore: false,\n isAfter: false,\n isValid: true,\n item: null,\n x: null,\n y: null,\n relativeElementDOMRect: null,\n relativeElementIndex: null,\n};\n\nconst defaultContext: DSTreeviewInternalsT.CTX = {\n props: defaultProps,\n visibleItems: [],\n flattenedItems: [],\n withRadioChecks: false,\n withCheckboxChecks: false,\n withDragAndDrop: false,\n triggerTreeRerender: noop,\n tree: undefined,\n treeRoot: undefined,\n virtualListHelpers: {\n virtualItems: [],\n totalSize: 0,\n scrollToOffset: noop,\n scrollToIndex: noop,\n measure: noop,\n },\n virtualListRef: undefined,\n uniqueTreeViewUUID: '',\n selectedItem: null,\n setSelectedItem: noop,\n focusedItem: null,\n setFocusedItem: noop,\n selectedCheckboxes: {},\n setSelectedCheckboxes: noop,\n expandedGroups: {},\n setExpandedGroups: noop,\n latestToggledItem: null,\n setLatestToggledItem: noop,\n hoverItem: null,\n setHoverItem: noop,\n handleExpandGroup: noop,\n updateUserExpandedState: noop,\n};\n\n/** Context for cross component communication */\nconst TreeViewContext = createContext(defaultContext);\n\nexport default TreeViewContext;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAyC;AAKzC,SAAS,QAA6B,OAAgB;AAAC;AAEhD,MAAM,eAAe;AAAA,EAC1B,SAAS,CAAC;AAAA,EACV,WAAW,CAAC;AAAA,EACZ,iBAAa,wBAAU;AAAA,EACvB,gBAAgB,MAAM;AAAA,EACtB,cAAc;AAAA,EACd,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,gBAAgB,MAAM;AAAA,EACtB,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,0BAA0B;AAAA,EAC1B,SAAS;AAAA,EACT,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,UAAU;AAAA,EACV,aAAa;AAMf;AAEO,MAAM,4BAA4B;AAAA,EACvC,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AAAA,EACN,GAAG;AAAA,EACH,GAAG;AAAA,EACH,wBAAwB;AAAA,EACxB,sBAAsB;AACxB;AAEA,MAAM,iBAA2C;AAAA,EAC/C,OAAO;AAAA,EACP,cAAc,CAAC;AAAA,EACf,gBAAgB,CAAC;AAAA,EACjB,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,oBAAoB;AAAA,IAClB,cAAc,CAAC;AAAA,IACf,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,oBAAoB,CAAC;AAAA,EACrB,uBAAuB;AAAA,EACvB,gBAAgB,CAAC;AAAA,EACjB,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,WAAW;AAAA,EACX,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,yBAAyB;AAC3B;AAGA,MAAM,sBAAkB,4BAAc,cAAc;AAEpD,IAAO,0BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -71,7 +71,17 @@ const TreeItem = (props) => {
|
|
|
71
71
|
const onItemKeyDown = (0, import_keyboard_helpers.useOnItemKeyDown)(item, draggableProps);
|
|
72
72
|
const ctx = (0, import_react.useContext)(import_TreeViewContext.default);
|
|
73
73
|
const {
|
|
74
|
-
props: {
|
|
74
|
+
props: {
|
|
75
|
+
disableIcons,
|
|
76
|
+
rightAddons,
|
|
77
|
+
onItemClick,
|
|
78
|
+
onItemActivate,
|
|
79
|
+
onItemFocus,
|
|
80
|
+
rowSize,
|
|
81
|
+
labelOverflow,
|
|
82
|
+
nameKey,
|
|
83
|
+
showChildrenAmount
|
|
84
|
+
},
|
|
75
85
|
withRadioChecks,
|
|
76
86
|
withCheckboxChecks,
|
|
77
87
|
withDragAndDrop,
|
|
@@ -140,6 +150,7 @@ const TreeItem = (props) => {
|
|
|
140
150
|
onItemClick(item, e);
|
|
141
151
|
setFocusedItem(item);
|
|
142
152
|
setSelectedItem(item);
|
|
153
|
+
onItemActivate(item, e);
|
|
143
154
|
const itemVirtualIndex = typeof item.virtualIndex === "number" ? item.virtualIndex : -1;
|
|
144
155
|
onItemFocus({
|
|
145
156
|
itemIndex: itemVirtualIndex,
|
|
@@ -147,7 +158,7 @@ const TreeItem = (props) => {
|
|
|
147
158
|
item
|
|
148
159
|
});
|
|
149
160
|
},
|
|
150
|
-
[item,
|
|
161
|
+
[onItemClick, item, setFocusedItem, setSelectedItem, onItemActivate, onItemFocus, scrollToIndex]
|
|
151
162
|
);
|
|
152
163
|
const childrenLength = (0, import_react.useMemo)(() => children?.length ?? 0, [children]);
|
|
153
164
|
const ariaLabel = `${itemLabelText}${showChildrenAmount && childrenLength > 0 ? `, ${childrenLength} Items` : ""}`;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/TreeItem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
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: {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAGA,mBAAwD;AAExD,2BAAkC;AAElC,6BAA4B;AAC5B,gCAA+B;AAC/B,6BAA4B;AAC5B,0BAAgC;AAChC,8BAAiC;AACjC,0BAA6B;AAC7B,kBAAqB;AACrB,yBAA4B;AAC5B,0BAA6B;AAC7B,iCAAoD;AAEpD,uBAA0B;AAC1B,wCAA2C;AAC3C,iCAA2D;AAC3D,2BAA0B;AAEnB,MAAM,mBAAe,wCAAkB,MAAM;AAAA,EAClD,eAAe;AAAA,EACf,MAAM;AAER,CAAC,EAAE,4CAAiB;AAEb,MAAM,gCAA4B,wCAAkB,KAAK;AAAA,EAC9D;AAAA,EACA;AAEF;AAUO,MAAM,WAAW,CAAC,UAA+B;AACtD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,mBAAmB,CAAC;AAAA,IACpB;AAAA,IACA,uBAAuB;AAAA,IACvB,gBAAgB;AAAA,EAClB,IAAI;AACJ,QAAM,EAAE,IAAI,MAAM,SAAS,IAAI;AAC/B,QAAM,EAAE,YAAY,IAAI,KAAK;AAE7B,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;AAEzD,QAAM,oBAAgB,0CAAiB,MAAM,cAAc;AAE3D,QAAM,UAAM,yBAAW,uBAAAA,OAAe;AACtC,QAAM;AAAA,IACJ,OAAO,
|
|
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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",
|
|
6
6
|
"names": ["TreeViewContext", "RadioSelectable", "CheckboxSelectable", "DropIndicator"]
|
|
7
7
|
}
|
|
@@ -63,6 +63,7 @@ const TreeViewPropTypes = {
|
|
|
63
63
|
getIsDropValid: import_ds_utilities.PropTypes.func.description("Function that returns true if the drop is valid and false if it's not").defaultValue("() => true"),
|
|
64
64
|
showChildrenAmount: import_ds_utilities.PropTypes.bool.description("whether to show the amount of children or not").defaultValue(false),
|
|
65
65
|
onItemClick: import_ds_utilities.PropTypes.func.description("function executed when clicking on an item").defaultValue("() => {}"),
|
|
66
|
+
onItemActivate: import_ds_utilities.PropTypes.func.description("function executed when an item gets activated").defaultValue("() => {}"),
|
|
66
67
|
onItemFocus: import_ds_utilities.PropTypes.func.description("function executed when focusing on an item").defaultValue("() => {}"),
|
|
67
68
|
onVisibleItemsChange: import_ds_utilities.PropTypes.func.description("function executed when the visible items change").defaultValue("() => {}"),
|
|
68
69
|
onOrderChange: import_ds_utilities.PropTypes.func.description("function executed when the items order changes").defaultValue("() => {}"),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { PropTypes } from '@elliemae/ds-utilities';\nimport TreeModel from 'tree-model';\nimport { useVirtual } from 'react-virtual';\nexport declare namespace DSTreeviewT {\n export type StringOrNum = string | number;\n export type SelectionState = boolean | 'mixed';\n export type SelectionItems = Record<StringOrNum, SelectionState>;\n export type ScrollToFunc = ReturnType<typeof useVirtual>['scrollToIndex'];\n export type ScrollToItemOptions = Parameters<ReturnType<typeof useVirtual>['scrollToIndex']>[1];\n export type ScrollToItemFunc = (options: ScrollToItemOptions) => void;\n export type ExpandedItems = Record<StringOrNum, true>; // { [id]:true } -> e.g. {1:true; 2:true} // false are not listed\n export interface SimpleItem {\n [key: string]: unknown;\n name: string;\n children?: SimpleItem[];\n id: StringOrNum;\n }\n\n export interface Item extends SimpleItem {\n children: Item[];\n treeDepth?: number;\n virtualIndex?: number;\n isChecked?: boolean | 'mixed';\n isGroup?: boolean;\n isExpanded?: boolean;\n childrenMatchesSearchQuery?: boolean;\n matchesSearchQuery?: boolean;\n nodeItemRef?: React.RefObject<HTMLLIElement>;\n model: TreeModel.Node<Item>['model'];\n node: TreeModel.Node<Item> & { parent?: TreeModel.Node<Item> };\n nodePath: TreeModel.Node<Item>[];\n }\n\n export interface DndItem {\n uid: string;\n depth: number;\n realIndex: number;\n childrenCount: number;\n parentId: string | null;\n original: DSTreeviewT.Item;\n }\n\n export interface Actions {\n toggleExpandAll: (isExpand: boolean) => Promise<DSTreeviewT.Item[]>;\n scrollTo: DSTreeviewT.ScrollToFunc;\n setSelectedItemByVirtualIndex: (index: number) => void;\n setFocusedItemByVirtualIndex: (\n index: number,\n scrollOpts: DSTreeviewT.ScrollToItemOptions & { withScroll?: boolean },\n ) => void;\n }\n export interface InstanceRef {\n actions: Actions;\n }\n\n export interface DefaultProps {\n plugins: string[];\n selection: SelectionItems;\n instanceRef: React.MutableRefObject<InstanceRef>;\n isItemDisabled: (item: Item) => boolean;\n disableIcons: boolean;\n isMultiSelect: boolean;\n isSingleSelect: boolean;\n getIsDropValid: (\n active: DndItem,\n over: DndItem,\n dropIndicatorPosition: 'none' | 'before' | 'after' | 'inside',\n ) => boolean;\n showChildrenAmount: boolean;\n isLoading: boolean;\n highlightOnlyQuery: boolean;\n onItemClick: (item: Item, e: React.MouseEvent<HTMLLIElement>) => void;\n onItemFocus: (meta: { scrollToItem: ScrollToItemFunc; itemIndex: number; item: Item }) => void;\n onVisibleItemsChange: (newVisibleItems: Item[]) => void;\n onOrderChange: (newData: SimpleItem[], oldData: SimpleItem[], draggedItem: DndItem) => void;\n onSelectionChange: (\n selection: SelectionItems,\n item: Item,\n meta: { scrollToItem: ScrollToItemFunc; itemIndex: number },\n ) => void;\n onExpandChange: (expandedHashmap: ExpandedItems, itemToggled: Item | null | undefined) => void;\n onInstanceRefInitialized: (instanceRef: React.MutableRefObject<InstanceRef>) => void;\n rowSize: 'normal' | 'compact';\n labelOverflow: 'wrap' | 'wrap-all' | 'truncate';\n noItemsPlaceholder: string;\n nameKey: string;\n width: StringOrNum;\n height: StringOrNum;\n groupIcon: JSX.Element | null;\n itemIcon: JSX.Element | null;\n searchQuery: string;\n }\n export interface PropsOptional {\n expanded: ExpandedItems;\n rightAddons: ((item: Item) => React.ReactNode | React.ReactNode[]) | JSX.Element;\n }\n export interface PropsRequired {\n data: Item[];\n }\n export interface Props extends DefaultProps, PropsOptional, PropsRequired {}\n}\n\nexport const TreeViewPropTypes = {\n data: PropTypes.arrayOf(\n PropTypes.shape({\n children: PropTypes.arrayOf(PropTypes.object),\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n isGroup: PropTypes.oneOfType([PropTypes.oneOf([undefined, null]), PropTypes.bool]),\n name: PropTypes.string,\n node: PropTypes.object,\n }),\n ).description('data to populate tree view').isRequired,\n plugins: PropTypes.tuple([PropTypes.oneOf(['tree-dnd'])])\n .description(\n 'only accepted value is TreeDndPlugin constant\\nother legacy plugins are now supported via different props',\n )\n .defaultValue([]),\n selection: PropTypes.object.description('pre selected items').defaultValue({}),\n expanded: PropTypes.object.description('control what items are expanded').defaultValue(undefined),\n instanceRef: PropTypes.shape({\n current: PropTypes.oneOfType([\n PropTypes.oneOf([null, undefined]),\n PropTypes.shape({\n actions: PropTypes.shape({\n toggleExpandAll: PropTypes.func,\n scrollTo: PropTypes.func,\n }).description('').isRequired,\n }),\n ]),\n }).description('instance ref'),\n isItemDisabled: PropTypes.func\n .description('Function that receives an item, and returns whether that item should be disabled')\n .defaultValue('() => false'),\n disableIcons: PropTypes.bool.description('disable icons').defaultValue(false),\n isMultiSelect: PropTypes.bool.description('whether the tree view is multi select or not').defaultValue(false),\n isSingleSelect: PropTypes.bool.description('wheter the tree view is single select or not').defaultValue(false),\n isLoading: PropTypes.bool.description('wheter the tree should show the loading state or not').defaultValue(false),\n getIsDropValid: PropTypes.func\n .description(\"Function that returns true if the drop is valid and false if it's not\")\n .defaultValue('() => true'),\n showChildrenAmount: PropTypes.bool.description('whether to show the amount of children or not').defaultValue(false),\n onItemClick: PropTypes.func.description('function executed when clicking on an item').defaultValue('() => {}'),\n onItemFocus: PropTypes.func.description('function executed when focusing on an item').defaultValue('() => {}'),\n onVisibleItemsChange: PropTypes.func\n .description('function executed when the visible items change')\n .defaultValue('() => {}'),\n onOrderChange: PropTypes.func.description('function executed when the items order changes').defaultValue('() => {}'),\n onSelectionChange: PropTypes.func\n .description('function executed when the selection changes')\n .defaultValue('() => {}'),\n onExpandChange: PropTypes.func.description('function executed when expanding an item').defaultValue('() => {}'),\n onInstanceRefInitialized: PropTypes.func\n .description('function executed when instanceRef has terminated instanciation')\n .defaultValue('() => {}'),\n rowSize: PropTypes.oneOf(['normal', 'compact']).description('size of the row').defaultValue('normal'),\n labelOverflow: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate'])\n .description('label truncation preference')\n .defaultValue('wrap'),\n width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('components width').defaultValue('100%'),\n height: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n .description('components height')\n .defaultValue('100%'),\n groupIcon: PropTypes.node.description('icon for groups'),\n itemIcon: PropTypes.node.description('icon for items'),\n searchQuery: PropTypes.string.description('search query value'),\n noItemsPlaceholder: PropTypes.string\n .description('message to be shown when there are no items in the treeview to be displayed')\n .defaultValue('No items found'),\n nameKey: PropTypes.string.description('property key to identifier for items labels').defaultValue('name'),\n highlightOnlyQuery: PropTypes.bool.description('whether to highlight results or not').defaultValue(false),\n}
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { WeakValidationMap } from 'react';\nimport { PropTypes } from '@elliemae/ds-utilities';\nimport TreeModel from 'tree-model';\nimport { useVirtual } from 'react-virtual';\nexport declare namespace DSTreeviewT {\n export type StringOrNum = string | number;\n export type SelectionState = boolean | 'mixed';\n export type SelectionItems = Record<StringOrNum, SelectionState>;\n export type ScrollToFunc = ReturnType<typeof useVirtual>['scrollToIndex'];\n export type ScrollToItemOptions = Parameters<ReturnType<typeof useVirtual>['scrollToIndex']>[1];\n export type ScrollToItemFunc = (options: ScrollToItemOptions) => void;\n export type ExpandedItems = Record<StringOrNum, true>; // { [id]:true } -> e.g. {1:true; 2:true} // false are not listed\n export interface SimpleItem {\n [key: string]: unknown;\n name: string;\n children?: SimpleItem[];\n id: StringOrNum;\n }\n\n export interface Item extends SimpleItem {\n children: Item[];\n treeDepth?: number;\n virtualIndex?: number;\n isChecked?: boolean | 'mixed';\n isGroup?: boolean;\n isExpanded?: boolean;\n childrenMatchesSearchQuery?: boolean;\n matchesSearchQuery?: boolean;\n nodeItemRef?: React.RefObject<HTMLLIElement>;\n model: TreeModel.Node<Item>['model'];\n node: TreeModel.Node<Item> & { parent?: TreeModel.Node<Item> };\n nodePath: TreeModel.Node<Item>[];\n }\n\n export interface DndItem {\n uid: string;\n depth: number;\n realIndex: number;\n childrenCount: number;\n parentId: string | null;\n original: DSTreeviewT.Item;\n }\n\n export interface Actions {\n toggleExpandAll: (isExpand: boolean) => Promise<DSTreeviewT.Item[]>;\n scrollTo: DSTreeviewT.ScrollToFunc;\n setSelectedItemByVirtualIndex: (index: number) => void;\n setFocusedItemByVirtualIndex: (\n index: number,\n scrollOpts: DSTreeviewT.ScrollToItemOptions & { withScroll?: boolean },\n ) => void;\n }\n export interface InstanceRef {\n actions: Actions;\n }\n\n export interface DefaultProps {\n plugins: string[];\n selection: SelectionItems;\n instanceRef: React.MutableRefObject<InstanceRef>;\n isItemDisabled: (item: Item) => boolean;\n disableIcons: boolean;\n isMultiSelect: boolean;\n isSingleSelect: boolean;\n getIsDropValid: (\n active: DndItem,\n over: DndItem,\n dropIndicatorPosition: 'none' | 'before' | 'after' | 'inside',\n ) => boolean;\n showChildrenAmount: boolean;\n isLoading: boolean;\n highlightOnlyQuery: boolean;\n onItemClick: (item: Item, e: React.MouseEvent<HTMLLIElement>) => void;\n onItemActivate: (item: Item, e?: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void;\n onItemFocus: (meta: { scrollToItem: ScrollToItemFunc; itemIndex: number; item: Item }) => void;\n onVisibleItemsChange: (newVisibleItems: Item[]) => void;\n onOrderChange: (newData: SimpleItem[], oldData: SimpleItem[], draggedItem: DndItem) => void;\n onSelectionChange: (\n selection: SelectionItems,\n item: Item,\n meta: { scrollToItem: ScrollToItemFunc; itemIndex: number },\n ) => void;\n onExpandChange: (expandedHashmap: ExpandedItems, itemToggled: Item | null | undefined) => void;\n onInstanceRefInitialized: (instanceRef: React.MutableRefObject<InstanceRef>) => void;\n rowSize: 'normal' | 'compact';\n labelOverflow: 'wrap' | 'wrap-all' | 'truncate';\n noItemsPlaceholder: string;\n nameKey: string;\n width: StringOrNum;\n height: StringOrNum;\n groupIcon: JSX.Element | null;\n itemIcon: JSX.Element | null;\n searchQuery: string;\n }\n export interface PropsOptional {\n expanded: ExpandedItems;\n rightAddons: ((item: Item) => React.ReactNode | React.ReactNode[]) | JSX.Element;\n }\n export interface PropsRequired {\n data: Item[];\n }\n export interface Props extends DefaultProps, PropsOptional, PropsRequired {}\n}\n\nexport const TreeViewPropTypes = {\n data: PropTypes.arrayOf(\n PropTypes.shape({\n children: PropTypes.arrayOf(PropTypes.object),\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n isGroup: PropTypes.oneOfType([PropTypes.oneOf([undefined, null]), PropTypes.bool]),\n name: PropTypes.string,\n node: PropTypes.object,\n }),\n ).description('data to populate tree view').isRequired,\n plugins: PropTypes.tuple([PropTypes.oneOf(['tree-dnd'])])\n .description(\n 'only accepted value is TreeDndPlugin constant\\nother legacy plugins are now supported via different props',\n )\n .defaultValue([]),\n selection: PropTypes.object.description('pre selected items').defaultValue({}),\n expanded: PropTypes.object.description('control what items are expanded').defaultValue(undefined),\n instanceRef: PropTypes.shape({\n current: PropTypes.oneOfType([\n PropTypes.oneOf([null, undefined]),\n PropTypes.shape({\n actions: PropTypes.shape({\n toggleExpandAll: PropTypes.func,\n scrollTo: PropTypes.func,\n }).description('').isRequired,\n }),\n ]),\n }).description('instance ref'),\n isItemDisabled: PropTypes.func\n .description('Function that receives an item, and returns whether that item should be disabled')\n .defaultValue('() => false'),\n disableIcons: PropTypes.bool.description('disable icons').defaultValue(false),\n isMultiSelect: PropTypes.bool.description('whether the tree view is multi select or not').defaultValue(false),\n isSingleSelect: PropTypes.bool.description('wheter the tree view is single select or not').defaultValue(false),\n isLoading: PropTypes.bool.description('wheter the tree should show the loading state or not').defaultValue(false),\n getIsDropValid: PropTypes.func\n .description(\"Function that returns true if the drop is valid and false if it's not\")\n .defaultValue('() => true'),\n showChildrenAmount: PropTypes.bool.description('whether to show the amount of children or not').defaultValue(false),\n onItemClick: PropTypes.func.description('function executed when clicking on an item').defaultValue('() => {}'),\n onItemActivate: PropTypes.func.description('function executed when an item gets activated').defaultValue('() => {}'),\n onItemFocus: PropTypes.func.description('function executed when focusing on an item').defaultValue('() => {}'),\n onVisibleItemsChange: PropTypes.func\n .description('function executed when the visible items change')\n .defaultValue('() => {}'),\n onOrderChange: PropTypes.func.description('function executed when the items order changes').defaultValue('() => {}'),\n onSelectionChange: PropTypes.func\n .description('function executed when the selection changes')\n .defaultValue('() => {}'),\n onExpandChange: PropTypes.func.description('function executed when expanding an item').defaultValue('() => {}'),\n onInstanceRefInitialized: PropTypes.func\n .description('function executed when instanceRef has terminated instanciation')\n .defaultValue('() => {}'),\n rowSize: PropTypes.oneOf(['normal', 'compact']).description('size of the row').defaultValue('normal'),\n labelOverflow: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate'])\n .description('label truncation preference')\n .defaultValue('wrap'),\n width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('components width').defaultValue('100%'),\n height: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n .description('components height')\n .defaultValue('100%'),\n groupIcon: PropTypes.node.description('icon for groups'),\n itemIcon: PropTypes.node.description('icon for items'),\n searchQuery: PropTypes.string.description('search query value'),\n noItemsPlaceholder: PropTypes.string\n .description('message to be shown when there are no items in the treeview to be displayed')\n .defaultValue('No items found'),\n nameKey: PropTypes.string.description('property key to identifier for items labels').defaultValue('name'),\n highlightOnlyQuery: PropTypes.bool.description('whether to highlight results or not').defaultValue(false),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -37,7 +37,7 @@ var import_group_expands_helpers = require("./group-expands-helpers");
|
|
|
37
37
|
const useOnItemKeyDown = (item, draggableProps) => {
|
|
38
38
|
const ctx = (0, import_react.useContext)(import_TreeViewContext.default);
|
|
39
39
|
const {
|
|
40
|
-
props: { onItemFocus },
|
|
40
|
+
props: { onItemFocus, onItemActivate },
|
|
41
41
|
triggerTreeRerender,
|
|
42
42
|
visibleItems,
|
|
43
43
|
setFocusedItem,
|
|
@@ -57,20 +57,21 @@ const useOnItemKeyDown = (item, draggableProps) => {
|
|
|
57
57
|
);
|
|
58
58
|
const onItemKeyDown = (0, import_react.useCallback)(
|
|
59
59
|
(e) => {
|
|
60
|
-
const {
|
|
60
|
+
const { key } = e;
|
|
61
61
|
if (!(draggableProps && draggableProps.active)) {
|
|
62
|
-
if (
|
|
62
|
+
if (key !== "Tab")
|
|
63
63
|
e.preventDefault();
|
|
64
|
-
if (
|
|
64
|
+
if ([" ", "Space", "Enter"].includes(key) && e.target.tagName === "LI") {
|
|
65
65
|
setSelectedItem(item);
|
|
66
|
+
onItemActivate(item, e);
|
|
66
67
|
}
|
|
67
|
-
if (
|
|
68
|
+
if (key === "ArrowLeft") {
|
|
68
69
|
if (isGroup && isExpanded) {
|
|
69
70
|
(0, import_group_expands_helpers.toggleItemExpand)(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);
|
|
70
71
|
setLatestToggledItem(item);
|
|
71
72
|
}
|
|
72
73
|
}
|
|
73
|
-
if (
|
|
74
|
+
if (key === "ArrowRight") {
|
|
74
75
|
if (isGroup && !isExpanded) {
|
|
75
76
|
(0, import_group_expands_helpers.toggleItemExpand)(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);
|
|
76
77
|
setLatestToggledItem(item);
|
|
@@ -79,7 +80,7 @@ const useOnItemKeyDown = (item, draggableProps) => {
|
|
|
79
80
|
const { virtualIndex } = item;
|
|
80
81
|
if (typeof virtualIndex === "number") {
|
|
81
82
|
const lastItemIndex = visibleItems.length - 1;
|
|
82
|
-
if (
|
|
83
|
+
if (key === "ArrowUp") {
|
|
83
84
|
const isLoopedFocus = virtualIndex === 0;
|
|
84
85
|
const newFocusIndex = isLoopedFocus ? lastItemIndex : virtualIndex - 1;
|
|
85
86
|
const newFocusItem = visibleItems[newFocusIndex];
|
|
@@ -96,7 +97,7 @@ const useOnItemKeyDown = (item, draggableProps) => {
|
|
|
96
97
|
(0, import_tree_helpers.focusItem)(newFocusItem);
|
|
97
98
|
}
|
|
98
99
|
}
|
|
99
|
-
if (
|
|
100
|
+
if (key === "ArrowDown") {
|
|
100
101
|
const isLoopedFocus = virtualIndex === lastItemIndex;
|
|
101
102
|
const newFocusIndex = isLoopedFocus ? 0 : virtualIndex + 1;
|
|
102
103
|
const newFocusItem = visibleItems[newFocusIndex];
|
|
@@ -113,7 +114,7 @@ const useOnItemKeyDown = (item, draggableProps) => {
|
|
|
113
114
|
(0, import_tree_helpers.focusItem)(newFocusItem);
|
|
114
115
|
}
|
|
115
116
|
}
|
|
116
|
-
if (
|
|
117
|
+
if (key === "End") {
|
|
117
118
|
if (virtualIndex !== lastItemIndex) {
|
|
118
119
|
const newFocusItem = visibleItems[lastItemIndex];
|
|
119
120
|
scrollToIndex(lastItemIndex);
|
|
@@ -124,7 +125,7 @@ const useOnItemKeyDown = (item, draggableProps) => {
|
|
|
124
125
|
}, 300);
|
|
125
126
|
}
|
|
126
127
|
}
|
|
127
|
-
if (
|
|
128
|
+
if (key === "Home") {
|
|
128
129
|
if (virtualIndex !== 0) {
|
|
129
130
|
const newFocusItem = visibleItems[0];
|
|
130
131
|
scrollToIndex(0);
|
|
@@ -140,8 +141,9 @@ const useOnItemKeyDown = (item, draggableProps) => {
|
|
|
140
141
|
},
|
|
141
142
|
[
|
|
142
143
|
draggableProps,
|
|
143
|
-
setSelectedItem,
|
|
144
144
|
item,
|
|
145
|
+
setSelectedItem,
|
|
146
|
+
onItemActivate,
|
|
145
147
|
isGroup,
|
|
146
148
|
isExpanded,
|
|
147
149
|
triggerTreeRerender,
|
|
@@ -164,8 +166,8 @@ const useGlobalKeyboardListener = (func) => {
|
|
|
164
166
|
const useGlobalToggleAllExpandShortcut = (treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState) => {
|
|
165
167
|
const memoizedToggleAllKeyboardShortcut = (0, import_react.useCallback)(
|
|
166
168
|
(e) => {
|
|
167
|
-
const {
|
|
168
|
-
if (
|
|
169
|
+
const { key } = e;
|
|
170
|
+
if (key === "*") {
|
|
169
171
|
(0, import_group_expands_helpers.toggleExpandAllHelper)("toggle", treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);
|
|
170
172
|
}
|
|
171
173
|
},
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/keyboard-helpers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-params */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext, useEffect } from 'react';\nimport TreeViewContext from '../TreeViewContext';\nimport { focusItem } from './tree-helpers';\nimport { toggleExpandAllHelper, toggleItemExpand } from './group-expands-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\nimport { SortableItemContextType } from '../hoc/SortableItemContext';\n\n// 9 tab\n// 13 enter\n// 32 space\n// 37 left arrow\n// 38 up arrow\n// 39 right arrow\n// 40 down arrow\n// 35 end\n// 36 home\n\n// 56 number 8\n// 106 (NumPad) *\n\nexport const useOnItemKeyDown = (item: DSTreeviewT.Item, draggableProps: SortableItemContextType['draggableProps']) => {\n const ctx = useContext(TreeViewContext);\n const {\n props: { onItemFocus },\n triggerTreeRerender,\n visibleItems,\n setFocusedItem,\n setSelectedItem,\n setLatestToggledItem,\n updateUserExpandedState,\n virtualListHelpers: { scrollToIndex },\n } = ctx;\n const { isGroup, isExpanded } = item;\n const onItemFocusCurry = useCallback(\n (newFocusItem: DSTreeviewT.Item) =>\n onItemFocus({\n itemIndex: newFocusItem.virtualIndex as number,\n scrollToItem: (opts = { align: 'start' }) => scrollToIndex(newFocusItem.virtualIndex as number, opts),\n item: newFocusItem,\n }),\n [onItemFocus, scrollToIndex],\n );\n\n const onItemKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLLIElement>) => {\n const {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAmD;AACnD,6BAA4B;AAC5B,0BAA0B;AAC1B,mCAAwD;AAkBjD,MAAM,mBAAmB,CAAC,MAAwB,mBAA8D;AACrH,QAAM,UAAM,yBAAW,uBAAAA,OAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-params */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext, useEffect } from 'react';\nimport TreeViewContext from '../TreeViewContext';\nimport { focusItem } from './tree-helpers';\nimport { toggleExpandAllHelper, toggleItemExpand } from './group-expands-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\nimport { SortableItemContextType } from '../hoc/SortableItemContext';\n\n// 9 tab\n// 13 enter\n// 32 space\n// 37 left arrow\n// 38 up arrow\n// 39 right arrow\n// 40 down arrow\n// 35 end\n// 36 home\n\n// 56 number 8\n// 106 (NumPad) *\n\nexport const useOnItemKeyDown = (item: DSTreeviewT.Item, draggableProps: SortableItemContextType['draggableProps']) => {\n const ctx = useContext(TreeViewContext);\n const {\n props: { onItemFocus, onItemActivate },\n triggerTreeRerender,\n visibleItems,\n setFocusedItem,\n setSelectedItem,\n setLatestToggledItem,\n updateUserExpandedState,\n virtualListHelpers: { scrollToIndex },\n } = ctx;\n const { isGroup, isExpanded } = item;\n const onItemFocusCurry = useCallback(\n (newFocusItem: DSTreeviewT.Item) =>\n onItemFocus({\n itemIndex: newFocusItem.virtualIndex as number,\n scrollToItem: (opts = { align: 'start' }) => scrollToIndex(newFocusItem.virtualIndex as number, opts),\n item: newFocusItem,\n }),\n [onItemFocus, scrollToIndex],\n );\n\n const onItemKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLLIElement>) => {\n const { key } = e;\n if (!(draggableProps && draggableProps.active)) {\n if (key !== 'Tab') e.preventDefault(); // allow tab/shift+tab\n if ([' ', 'Space', 'Enter'].includes(key) && (e.target as HTMLElement).tagName === 'LI') {\n setSelectedItem(item);\n onItemActivate(item, e);\n }\n\n if (key === 'ArrowLeft') {\n if (isGroup && isExpanded) {\n toggleItemExpand(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);\n setLatestToggledItem(item);\n }\n }\n if (key === 'ArrowRight') {\n if (isGroup && !isExpanded) {\n toggleItemExpand(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);\n setLatestToggledItem(item);\n }\n }\n\n const { virtualIndex } = item;\n if (typeof virtualIndex === 'number') {\n const lastItemIndex = visibleItems.length - 1;\n if (key === 'ArrowUp') {\n const isLoopedFocus = virtualIndex === 0;\n const newFocusIndex = isLoopedFocus ? lastItemIndex : virtualIndex - 1;\n const newFocusItem = visibleItems[newFocusIndex];\n scrollToIndex(newFocusIndex);\n if (isLoopedFocus) {\n // when looping the list from start to end we need to wait a bit before focusing\n setTimeout(() => {\n setFocusedItem(newFocusItem);\n focusItem(newFocusItem);\n onItemFocusCurry(newFocusItem);\n }, 300);\n } else {\n setFocusedItem(newFocusItem);\n onItemFocusCurry(newFocusItem);\n focusItem(newFocusItem);\n }\n }\n if (key === 'ArrowDown') {\n const isLoopedFocus = virtualIndex === lastItemIndex;\n const newFocusIndex = isLoopedFocus ? 0 : virtualIndex + 1;\n const newFocusItem = visibleItems[newFocusIndex];\n scrollToIndex(newFocusIndex);\n if (isLoopedFocus) {\n // when looping the list from start to end we need to wait a bit before focusing\n setTimeout(() => {\n setFocusedItem(newFocusItem);\n onItemFocusCurry(newFocusItem);\n focusItem(newFocusItem);\n }, 300);\n } else {\n setFocusedItem(newFocusItem);\n onItemFocusCurry(newFocusItem);\n focusItem(newFocusItem);\n }\n }\n if (key === 'End') {\n if (virtualIndex !== lastItemIndex) {\n const newFocusItem = visibleItems[lastItemIndex];\n scrollToIndex(lastItemIndex);\n setTimeout(() => {\n setFocusedItem(newFocusItem);\n onItemFocusCurry(newFocusItem);\n focusItem(newFocusItem);\n }, 300);\n }\n }\n if (key === 'Home') {\n if (virtualIndex !== 0) {\n const newFocusItem = visibleItems[0];\n scrollToIndex(0);\n setTimeout(() => {\n setFocusedItem(newFocusItem);\n onItemFocusCurry(newFocusItem);\n focusItem(newFocusItem);\n }, 300);\n }\n }\n }\n }\n },\n [\n draggableProps,\n item,\n setSelectedItem,\n onItemActivate,\n isGroup,\n isExpanded,\n triggerTreeRerender,\n updateUserExpandedState,\n scrollToIndex,\n setLatestToggledItem,\n visibleItems,\n setFocusedItem,\n onItemFocusCurry,\n ],\n );\n\n return onItemKeyDown;\n};\n\nexport const useGlobalKeyboardListener = (func: (e: KeyboardEvent) => void) => {\n useEffect(() => {\n document.addEventListener('keydown', func);\n return () => document.removeEventListener('keydown', func);\n }, [func]);\n};\n\nexport const useGlobalToggleAllExpandShortcut = (\n treeRoot: DSTreeviewT.Item['node'],\n triggerTreeRerender: () => void,\n setLatestToggledItem: DSTreeviewInternalsT.CTX['setLatestToggledItem'],\n updateUserExpandedState: DSTreeviewInternalsT.CTX['updateUserExpandedState'],\n) => {\n const memoizedToggleAllKeyboardShortcut = useCallback(\n (e: KeyboardEvent) => {\n const { key } = e;\n if (key === '*') {\n toggleExpandAllHelper('toggle', treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);\n }\n },\n [setLatestToggledItem, treeRoot, triggerTreeRerender, updateUserExpandedState],\n );\n\n return useGlobalKeyboardListener(memoizedToggleAllKeyboardShortcut);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["TreeViewContext"]
|
|
7
7
|
}
|
|
@@ -33,7 +33,7 @@ var import_tree_helpers = require("./tree-helpers");
|
|
|
33
33
|
var import_group_expands_helpers = require("./group-expands-helpers");
|
|
34
34
|
const useInstanceRefActions = ({ actions }, ctx) => {
|
|
35
35
|
const {
|
|
36
|
-
props: { onItemFocus },
|
|
36
|
+
props: { onItemFocus, onItemActivate },
|
|
37
37
|
virtualListHelpers,
|
|
38
38
|
treeRoot,
|
|
39
39
|
visibleItems,
|
|
@@ -76,8 +76,9 @@ const useInstanceRefActions = ({ actions }, ctx) => {
|
|
|
76
76
|
(index) => {
|
|
77
77
|
const itemByIndex = visibleItems[index];
|
|
78
78
|
setSelectedItem(itemByIndex);
|
|
79
|
+
onItemActivate(itemByIndex);
|
|
79
80
|
},
|
|
80
|
-
[visibleItems, setSelectedItem]
|
|
81
|
+
[visibleItems, setSelectedItem, onItemActivate]
|
|
81
82
|
);
|
|
82
83
|
actions.setFocusedItemByVirtualIndex = (0, import_react.useCallback)(
|
|
83
84
|
(index, opts = { align: "start", withScroll: false }) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/useInstanceRefActions.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useEffect, useMemo, useState, useRef, useCallback } from 'react';\nimport { focusItem } from './tree-helpers';\nimport { toggleExpandAllHelper } from './group-expands-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\ninterface PromisesRefT {\n expandResolve?: null | ((value: DSTreeviewT.Item[] | PromiseLike<DSTreeviewT.Item[]>) => void);\n scrollTo?: null | ((value: DSTreeviewT.Item[] | PromiseLike<DSTreeviewT.Item[]>) => void);\n}\n\nexport const useInstanceRefActions = ({ actions }: DSTreeviewT.InstanceRef, ctx: DSTreeviewInternalsT.CTX) => {\n const {\n props: { onItemFocus },\n virtualListHelpers,\n treeRoot,\n visibleItems,\n triggerTreeRerender,\n updateUserExpandedState,\n setSelectedItem,\n setFocusedItem,\n setLatestToggledItem,\n } = ctx;\n const { current: promises } = useRef<PromisesRefT>({});\n const { scrollToIndex } = useMemo(() => virtualListHelpers, [virtualListHelpers]);\n const [expandPromise, setPromise] = useState<Promise<DSTreeviewT.Item[]> | undefined | null>();\n\n useEffect(() => {\n if (expandPromise && promises.expandResolve) {\n promises.expandResolve(visibleItems);\n promises.expandResolve = null;\n setPromise(null);\n }\n }, [visibleItems, expandPromise, promises]);\n\n actions.toggleExpandAll = useCallback(\n (isExpand) => {\n const p = new Promise<DSTreeviewT.Item[]>((resolve) => {\n promises.expandResolve = resolve;\n if (treeRoot)\n toggleExpandAllHelper(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);\n });\n setPromise(p);\n return p;\n },\n [promises, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState],\n );\n actions.scrollTo = useCallback(\n (indx, opts = { align: 'start' }) => {\n if (scrollToIndex) scrollToIndex(indx, opts);\n },\n [scrollToIndex],\n );\n\n actions.setSelectedItemByVirtualIndex = useCallback(\n (index) => {\n const itemByIndex = visibleItems[index];\n setSelectedItem(itemByIndex);\n },\n [visibleItems, setSelectedItem],\n );\n\n actions.setFocusedItemByVirtualIndex = useCallback(\n (index, opts = { align: 'start', withScroll: false }) => {\n const itemByIndex = visibleItems[index];\n const onItemFocusParams = {\n itemIndex: itemByIndex.virtualIndex as number,\n scrollToItem: () => scrollToIndex(index, opts),\n item: itemByIndex,\n };\n\n if (opts.withScroll && scrollToIndex) {\n scrollToIndex(index, opts);\n setTimeout(() => {\n setFocusedItem(itemByIndex);\n focusItem(itemByIndex);\n onItemFocus(onItemFocusParams);\n }, 300);\n } else {\n setFocusedItem(itemByIndex);\n focusItem(itemByIndex);\n onItemFocus(onItemFocusParams);\n }\n },\n [visibleItems, scrollToIndex, setFocusedItem, onItemFocus],\n );\n\n return actions;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkE;AAClE,0BAA0B;AAC1B,mCAAsC;AAS/B,MAAM,wBAAwB,CAAC,EAAE,QAAQ,GAA4B,QAAkC;AAC5G,QAAM;AAAA,IACJ,OAAO,EAAE,
|
|
4
|
+
"sourcesContent": ["import { useEffect, useMemo, useState, useRef, useCallback } from 'react';\nimport { focusItem } from './tree-helpers';\nimport { toggleExpandAllHelper } from './group-expands-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\ninterface PromisesRefT {\n expandResolve?: null | ((value: DSTreeviewT.Item[] | PromiseLike<DSTreeviewT.Item[]>) => void);\n scrollTo?: null | ((value: DSTreeviewT.Item[] | PromiseLike<DSTreeviewT.Item[]>) => void);\n}\n\nexport const useInstanceRefActions = ({ actions }: DSTreeviewT.InstanceRef, ctx: DSTreeviewInternalsT.CTX) => {\n const {\n props: { onItemFocus, onItemActivate },\n virtualListHelpers,\n treeRoot,\n visibleItems,\n triggerTreeRerender,\n updateUserExpandedState,\n setSelectedItem,\n setFocusedItem,\n setLatestToggledItem,\n } = ctx;\n const { current: promises } = useRef<PromisesRefT>({});\n const { scrollToIndex } = useMemo(() => virtualListHelpers, [virtualListHelpers]);\n const [expandPromise, setPromise] = useState<Promise<DSTreeviewT.Item[]> | undefined | null>();\n\n useEffect(() => {\n if (expandPromise && promises.expandResolve) {\n promises.expandResolve(visibleItems);\n promises.expandResolve = null;\n setPromise(null);\n }\n }, [visibleItems, expandPromise, promises]);\n\n actions.toggleExpandAll = useCallback(\n (isExpand) => {\n const p = new Promise<DSTreeviewT.Item[]>((resolve) => {\n promises.expandResolve = resolve;\n if (treeRoot)\n toggleExpandAllHelper(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);\n });\n setPromise(p);\n return p;\n },\n [promises, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState],\n );\n actions.scrollTo = useCallback(\n (indx, opts = { align: 'start' }) => {\n if (scrollToIndex) scrollToIndex(indx, opts);\n },\n [scrollToIndex],\n );\n\n actions.setSelectedItemByVirtualIndex = useCallback(\n (index) => {\n const itemByIndex = visibleItems[index];\n setSelectedItem(itemByIndex);\n onItemActivate(itemByIndex);\n },\n [visibleItems, setSelectedItem, onItemActivate],\n );\n\n actions.setFocusedItemByVirtualIndex = useCallback(\n (index, opts = { align: 'start', withScroll: false }) => {\n const itemByIndex = visibleItems[index];\n const onItemFocusParams = {\n itemIndex: itemByIndex.virtualIndex as number,\n scrollToItem: () => scrollToIndex(index, opts),\n item: itemByIndex,\n };\n\n if (opts.withScroll && scrollToIndex) {\n scrollToIndex(index, opts);\n setTimeout(() => {\n setFocusedItem(itemByIndex);\n focusItem(itemByIndex);\n onItemFocus(onItemFocusParams);\n }, 300);\n } else {\n setFocusedItem(itemByIndex);\n focusItem(itemByIndex);\n onItemFocus(onItemFocusParams);\n }\n },\n [visibleItems, scrollToIndex, setFocusedItem, onItemFocus],\n );\n\n return actions;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkE;AAClE,0BAA0B;AAC1B,mCAAsC;AAS/B,MAAM,wBAAwB,CAAC,EAAE,QAAQ,GAA4B,QAAkC;AAC5G,QAAM;AAAA,IACJ,OAAO,EAAE,aAAa,eAAe;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,SAAS,SAAS,QAAI,qBAAqB,CAAC,CAAC;AACrD,QAAM,EAAE,cAAc,QAAI,sBAAQ,MAAM,oBAAoB,CAAC,kBAAkB,CAAC;AAChF,QAAM,CAAC,eAAe,UAAU,QAAI,uBAAyD;AAE7F,8BAAU,MAAM;AACd,QAAI,iBAAiB,SAAS,eAAe;AAC3C,eAAS,cAAc,YAAY;AACnC,eAAS,gBAAgB;AACzB,iBAAW,IAAI;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,cAAc,eAAe,QAAQ,CAAC;AAE1C,UAAQ,sBAAkB;AAAA,IACxB,CAAC,aAAa;AACZ,YAAM,IAAI,IAAI,QAA4B,CAAC,YAAY;AACrD,iBAAS,gBAAgB;AACzB,YAAI;AACF,kEAAsB,UAAU,UAAU,qBAAqB,sBAAsB,uBAAuB;AAAA,MAChH,CAAC;AACD,iBAAW,CAAC;AACZ,aAAO;AAAA,IACT;AAAA,IACA,CAAC,UAAU,UAAU,qBAAqB,sBAAsB,uBAAuB;AAAA,EACzF;AACA,UAAQ,eAAW;AAAA,IACjB,CAAC,MAAM,OAAO,EAAE,OAAO,QAAQ,MAAM;AACnC,UAAI;AAAe,sBAAc,MAAM,IAAI;AAAA,IAC7C;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,UAAQ,oCAAgC;AAAA,IACtC,CAAC,UAAU;AACT,YAAM,cAAc,aAAa;AACjC,sBAAgB,WAAW;AAC3B,qBAAe,WAAW;AAAA,IAC5B;AAAA,IACA,CAAC,cAAc,iBAAiB,cAAc;AAAA,EAChD;AAEA,UAAQ,mCAA+B;AAAA,IACrC,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,YAAY,MAAM,MAAM;AACvD,YAAM,cAAc,aAAa;AACjC,YAAM,oBAAoB;AAAA,QACxB,WAAW,YAAY;AAAA,QACvB,cAAc,MAAM,cAAc,OAAO,IAAI;AAAA,QAC7C,MAAM;AAAA,MACR;AAEA,UAAI,KAAK,cAAc,eAAe;AACpC,sBAAc,OAAO,IAAI;AACzB,mBAAW,MAAM;AACf,yBAAe,WAAW;AAC1B,6CAAU,WAAW;AACrB,sBAAY,iBAAiB;AAAA,QAC/B,GAAG,GAAG;AAAA,MACR,OAAO;AACL,uBAAe,WAAW;AAC1B,2CAAU,WAAW;AACrB,oBAAY,iBAAiB;AAAA,MAC/B;AAAA,IACF;AAAA,IACA,CAAC,cAAc,eAAe,gBAAgB,WAAW;AAAA,EAC3D;AAEA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/TreeView.js
CHANGED
|
@@ -5,14 +5,13 @@ import { TreeViewPropTypes } from "./react-desc-prop-types";
|
|
|
5
5
|
import TreeViewContext from "./TreeViewContext";
|
|
6
6
|
import { useTreeview } from "./config/useTreeview";
|
|
7
7
|
import { TreeList } from "./parts/TreeList";
|
|
8
|
-
|
|
8
|
+
const TreeView = (props) => {
|
|
9
9
|
const { ctx } = useTreeview(props);
|
|
10
10
|
return /* @__PURE__ */ jsx(TreeViewContext.Provider, {
|
|
11
11
|
value: ctx,
|
|
12
12
|
children: /* @__PURE__ */ jsx(TreeList, {})
|
|
13
13
|
});
|
|
14
|
-
}
|
|
15
|
-
TreeView.propTypes = TreeViewPropTypes;
|
|
14
|
+
};
|
|
16
15
|
TreeView.displayName = "TreeView";
|
|
17
16
|
const TreeViewWithSchema = describe(TreeView);
|
|
18
17
|
TreeViewWithSchema.propTypes = TreeViewPropTypes;
|
package/dist/esm/TreeView.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/TreeView.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,gBAAgB;AACzB,SAAS,yBAAyB;AAClC,OAAO,qBAAqB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AAElB,
|
|
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;ACAvB;AACA,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;AAAA,IAAyB,OAAO;AAAA,IAC/B,8BAAC,YAAS;AAAA,GACZ;AAEJ;AAEA,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/TreeViewContext.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\nimport { createContext, createRef } from 'react';\nimport type { DSTreeviewT } from './react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from './sharedTypes';\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\n\nexport const defaultProps = {\n plugins: [],\n selection: {},\n instanceRef: createRef(),\n isItemDisabled: () => false,\n disableIcons: false,\n isMultiSelect: false,\n isSingleSelect: false,\n getIsDropValid: () => true,\n showChildrenAmount: false,\n isLoading: false,\n highlightOnlyQuery: false,\n onItemClick: noop,\n onItemFocus: noop,\n onVisibleItemsChange: noop,\n onOrderChange: noop,\n onSelectionChange: noop,\n onExpandChange: noop,\n onInstanceRefInitialized: noop,\n rowSize: 'normal',\n labelOverflow: 'wrap',\n noItemsPlaceholder: 'No items found',\n nameKey: 'name',\n width: '100%',\n height: '100%',\n groupIcon: null,\n itemIcon: null,\n searchQuery: '',\n // workaround on the typings over the fact that\n // when we instantiate the context we can't have all the props\n // we only have a part of them but the final typings will include missing props\n // this is safe to do because\n // we will \"mergeWithDefaults\" + \"validatePropTypes\" when we do instantiate the context\n} as unknown as DSTreeviewT.Props;\n\nexport const defaultRelativeMouseCoord = {\n isBefore: false,\n isAfter: false,\n isValid: true,\n item: null,\n x: null,\n y: null,\n relativeElementDOMRect: null,\n relativeElementIndex: null,\n};\n\nconst defaultContext: DSTreeviewInternalsT.CTX = {\n props: defaultProps,\n visibleItems: [],\n flattenedItems: [],\n withRadioChecks: false,\n withCheckboxChecks: false,\n withDragAndDrop: false,\n triggerTreeRerender: noop,\n tree: undefined,\n treeRoot: undefined,\n virtualListHelpers: {\n virtualItems: [],\n totalSize: 0,\n scrollToOffset: noop,\n scrollToIndex: noop,\n measure: noop,\n },\n virtualListRef: undefined,\n uniqueTreeViewUUID: '',\n selectedItem: null,\n setSelectedItem: noop,\n focusedItem: null,\n setFocusedItem: noop,\n selectedCheckboxes: {},\n setSelectedCheckboxes: noop,\n expandedGroups: {},\n setExpandedGroups: noop,\n latestToggledItem: null,\n setLatestToggledItem: noop,\n hoverItem: null,\n setHoverItem: noop,\n handleExpandGroup: noop,\n updateUserExpandedState: noop,\n};\n\n/** Context for cross component communication */\nconst TreeViewContext = createContext(defaultContext);\n\nexport default TreeViewContext;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,eAAe,iBAAiB;AAKzC,SAAS,QAA6B,OAAgB;AAAC;AAEhD,MAAM,eAAe;AAAA,EAC1B,SAAS,CAAC;AAAA,EACV,WAAW,CAAC;AAAA,EACZ,aAAa,UAAU;AAAA,EACvB,gBAAgB,MAAM;AAAA,EACtB,cAAc;AAAA,EACd,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,gBAAgB,MAAM;AAAA,EACtB,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,0BAA0B;AAAA,EAC1B,SAAS;AAAA,EACT,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,UAAU;AAAA,EACV,aAAa;AAMf;AAEO,MAAM,4BAA4B;AAAA,EACvC,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AAAA,EACN,GAAG;AAAA,EACH,GAAG;AAAA,EACH,wBAAwB;AAAA,EACxB,sBAAsB;AACxB;AAEA,MAAM,iBAA2C;AAAA,EAC/C,OAAO;AAAA,EACP,cAAc,CAAC;AAAA,EACf,gBAAgB,CAAC;AAAA,EACjB,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,oBAAoB;AAAA,IAClB,cAAc,CAAC;AAAA,IACf,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,oBAAoB,CAAC;AAAA,EACrB,uBAAuB;AAAA,EACvB,gBAAgB,CAAC;AAAA,EACjB,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,WAAW;AAAA,EACX,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,yBAAyB;AAC3B;AAGA,MAAM,kBAAkB,cAAc,cAAc;AAEpD,IAAO,0BAAQ;",
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\nimport { createContext, createRef } from 'react';\nimport type { DSTreeviewT } from './react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from './sharedTypes';\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\n\nexport const defaultProps = {\n plugins: [],\n selection: {},\n instanceRef: createRef(),\n isItemDisabled: () => false,\n disableIcons: false,\n isMultiSelect: false,\n isSingleSelect: false,\n getIsDropValid: () => true,\n showChildrenAmount: false,\n isLoading: false,\n highlightOnlyQuery: false,\n onItemClick: noop,\n onItemActivate: noop,\n onItemFocus: noop,\n onVisibleItemsChange: noop,\n onOrderChange: noop,\n onSelectionChange: noop,\n onExpandChange: noop,\n onInstanceRefInitialized: noop,\n rowSize: 'normal',\n labelOverflow: 'wrap',\n noItemsPlaceholder: 'No items found',\n nameKey: 'name',\n width: '100%',\n height: '100%',\n groupIcon: null,\n itemIcon: null,\n searchQuery: '',\n // workaround on the typings over the fact that\n // when we instantiate the context we can't have all the props\n // we only have a part of them but the final typings will include missing props\n // this is safe to do because\n // we will \"mergeWithDefaults\" + \"validatePropTypes\" when we do instantiate the context\n} as unknown as DSTreeviewT.Props;\n\nexport const defaultRelativeMouseCoord = {\n isBefore: false,\n isAfter: false,\n isValid: true,\n item: null,\n x: null,\n y: null,\n relativeElementDOMRect: null,\n relativeElementIndex: null,\n};\n\nconst defaultContext: DSTreeviewInternalsT.CTX = {\n props: defaultProps,\n visibleItems: [],\n flattenedItems: [],\n withRadioChecks: false,\n withCheckboxChecks: false,\n withDragAndDrop: false,\n triggerTreeRerender: noop,\n tree: undefined,\n treeRoot: undefined,\n virtualListHelpers: {\n virtualItems: [],\n totalSize: 0,\n scrollToOffset: noop,\n scrollToIndex: noop,\n measure: noop,\n },\n virtualListRef: undefined,\n uniqueTreeViewUUID: '',\n selectedItem: null,\n setSelectedItem: noop,\n focusedItem: null,\n setFocusedItem: noop,\n selectedCheckboxes: {},\n setSelectedCheckboxes: noop,\n expandedGroups: {},\n setExpandedGroups: noop,\n latestToggledItem: null,\n setLatestToggledItem: noop,\n hoverItem: null,\n setHoverItem: noop,\n handleExpandGroup: noop,\n updateUserExpandedState: noop,\n};\n\n/** Context for cross component communication */\nconst TreeViewContext = createContext(defaultContext);\n\nexport default TreeViewContext;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,eAAe,iBAAiB;AAKzC,SAAS,QAA6B,OAAgB;AAAC;AAEhD,MAAM,eAAe;AAAA,EAC1B,SAAS,CAAC;AAAA,EACV,WAAW,CAAC;AAAA,EACZ,aAAa,UAAU;AAAA,EACvB,gBAAgB,MAAM;AAAA,EACtB,cAAc;AAAA,EACd,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,gBAAgB,MAAM;AAAA,EACtB,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,0BAA0B;AAAA,EAC1B,SAAS;AAAA,EACT,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,UAAU;AAAA,EACV,aAAa;AAMf;AAEO,MAAM,4BAA4B;AAAA,EACvC,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AAAA,EACN,GAAG;AAAA,EACH,GAAG;AAAA,EACH,wBAAwB;AAAA,EACxB,sBAAsB;AACxB;AAEA,MAAM,iBAA2C;AAAA,EAC/C,OAAO;AAAA,EACP,cAAc,CAAC;AAAA,EACf,gBAAgB,CAAC;AAAA,EACjB,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,oBAAoB;AAAA,IAClB,cAAc,CAAC;AAAA,IACf,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,oBAAoB,CAAC;AAAA,EACrB,uBAAuB;AAAA,EACvB,gBAAgB,CAAC;AAAA,EACjB,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,WAAW;AAAA,EACX,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,yBAAyB;AAC3B;AAGA,MAAM,kBAAkB,cAAc,cAAc;AAEpD,IAAO,0BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -39,7 +39,17 @@ const TreeItem = (props) => {
|
|
|
39
39
|
const onItemKeyDown = useOnItemKeyDown(item, draggableProps);
|
|
40
40
|
const ctx = useContext(TreeViewContext);
|
|
41
41
|
const {
|
|
42
|
-
props: {
|
|
42
|
+
props: {
|
|
43
|
+
disableIcons,
|
|
44
|
+
rightAddons,
|
|
45
|
+
onItemClick,
|
|
46
|
+
onItemActivate,
|
|
47
|
+
onItemFocus,
|
|
48
|
+
rowSize,
|
|
49
|
+
labelOverflow,
|
|
50
|
+
nameKey,
|
|
51
|
+
showChildrenAmount
|
|
52
|
+
},
|
|
43
53
|
withRadioChecks,
|
|
44
54
|
withCheckboxChecks,
|
|
45
55
|
withDragAndDrop,
|
|
@@ -108,6 +118,7 @@ const TreeItem = (props) => {
|
|
|
108
118
|
onItemClick(item, e);
|
|
109
119
|
setFocusedItem(item);
|
|
110
120
|
setSelectedItem(item);
|
|
121
|
+
onItemActivate(item, e);
|
|
111
122
|
const itemVirtualIndex = typeof item.virtualIndex === "number" ? item.virtualIndex : -1;
|
|
112
123
|
onItemFocus({
|
|
113
124
|
itemIndex: itemVirtualIndex,
|
|
@@ -115,7 +126,7 @@ const TreeItem = (props) => {
|
|
|
115
126
|
item
|
|
116
127
|
});
|
|
117
128
|
},
|
|
118
|
-
[item,
|
|
129
|
+
[onItemClick, item, setFocusedItem, setSelectedItem, onItemActivate, onItemFocus, scrollToIndex]
|
|
119
130
|
);
|
|
120
131
|
const childrenLength = useMemo(() => children?.length ?? 0, [children]);
|
|
121
132
|
const ariaLabel = `${itemLabelText}${showChildrenAmount && childrenLength > 0 ? `, ${childrenLength} Items` : ""}`;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/TreeItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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: {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAGA,SAAgB,YAAY,SAAS,mBAAmB;AAExD,SAAS,yBAAyB;AAElC,OAAO,qBAAqB;AAC5B,OAAO,wBAAwB;AAC/B,OAAO,qBAAqB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB,yBAAyB;AAEpD,SAAS,iBAAiB;AAC1B,SAAS,kCAAkC;AAC3C,SAAS,uBAAuB,2BAA2B;AAC3D,OAAO,mBAAmB;AAEnB,MAAM,eAAe,kBAAkB,MAAM;AAAA,EAClD,eAAe;AAAA,EACf,MAAM;AAER,CAAC,EAAE,iBAAiB;AAEb,MAAM,4BAA4B,kBAAkB,KAAK;AAAA,EAC9D;AAAA,EACA;AAEF;AAUO,MAAM,WAAW,CAAC,UAA+B;AACtD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,mBAAmB,CAAC;AAAA,IACpB;AAAA,IACA,uBAAuB;AAAA,IACvB,gBAAgB;AAAA,EAClB,IAAI;AACJ,QAAM,EAAE,IAAI,MAAM,SAAS,IAAI;AAC/B,QAAM,EAAE,YAAY,IAAI,KAAK;AAE7B,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AAEzD,QAAM,gBAAgB,iBAAiB,MAAM,cAAc;AAE3D,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ,OAAO,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAGA,SAAgB,YAAY,SAAS,mBAAmB;AAExD,SAAS,yBAAyB;AAElC,OAAO,qBAAqB;AAC5B,OAAO,wBAAwB;AAC/B,OAAO,qBAAqB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB,yBAAyB;AAEpD,SAAS,iBAAiB;AAC1B,SAAS,kCAAkC;AAC3C,SAAS,uBAAuB,2BAA2B;AAC3D,OAAO,mBAAmB;AAEnB,MAAM,eAAe,kBAAkB,MAAM;AAAA,EAClD,eAAe;AAAA,EACf,MAAM;AAER,CAAC,EAAE,iBAAiB;AAEb,MAAM,4BAA4B,kBAAkB,KAAK;AAAA,EAC9D;AAAA,EACA;AAEF;AAUO,MAAM,WAAW,CAAC,UAA+B;AACtD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,mBAAmB,CAAC;AAAA,IACpB;AAAA,IACA,uBAAuB;AAAA,IACvB,gBAAgB;AAAA,EAClB,IAAI;AACJ,QAAM,EAAE,IAAI,MAAM,SAAS,IAAI;AAC/B,QAAM,EAAE,YAAY,IAAI,KAAK;AAE7B,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AAEzD,QAAM,gBAAgB,iBAAiB,MAAM,cAAc;AAE3D,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,cAAc;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,gBAAgB,KAAK;AAM3B,QAAM,cAA0D,CAAC,QAAuB;AACtF;AAAA,MACE;AAAA,MACA,CAAC,iBAAiB;AAAA,MAClB,CAAC,iBAAiB,kBAAkB,eAAe;AAAA,IACrD,EAAE,GAAG;AAAA,EACP;AAEA,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AAErF,QAAM,gCAAgC,0BAA0B,sBAAsB;AAEtF,QAAM,aAAa,kBAAkB,eAAe;AAEpD,QAAM,cAAc,kBAAkB,eAAe;AAErD,QAAM,uBAAuB,QAAQ,MAAM;AACzC,QAAI,+BAA+B;AACjC,YAAM,YAAY,GAAG,oBAAoB,oBAAoB,cAAc,YAAY;AACvF,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,+BAA+B,WAAW,CAAC;AAE/C,QAAM,uBAAuB,QAAQ,MAAO,gBAAgB,iBAAiB,IAAK,CAAC,aAAa,CAAC;AAEjG,QAAM,oBAAoB;AAAA,IACxB,MAAO,cAAc,OAAO,KAAK,MAAM,CAAC,gBAAgB,aAAa;AAAA,IACrE,CAAC,eAAe,KAAK,IAAI,cAAc,EAAE;AAAA,EAC3C;AACA,QAAM,iBAAiB;AAAA,IACrB,MAAO,CAAC,iBAAiB,WAAW,OAAO,KAAK,MAAM,CAAC,aAAa,UAAU;AAAA,IAC9E,CAAC,eAAe,WAAW,IAAI,KAAK,IAAI,UAAU;AAAA,EACpD;AACA,QAAM,uBAAuB,QAAQ,MAAM;AACzC,QAAI,kBAAkB,YAAY;AAChC,UAAI,YAAY;AAAW,eAAO,GAAG,oBAAoB;AACzD,aAAO,GAAG,oBAAoB;AAAA,IAChC;AACA,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,OAAO,CAAC;AAE3B,QAAM,sBAAsB,QAAQ,MAAM;AACxC,QAAI;AAAY,aAAO,GAAG,oBAAoB;AAC9C,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,iBAAiB;AAAA,IACrB,MACE,GAAG,wBAAwB,wBAAwB,qBAAqB,kBAAkB,wBAAwB;AAAA,IACpH;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAAuC;AACtC,kBAAY,MAAM,CAAC;AACnB,qBAAe,IAAI;AACnB,sBAAgB,IAAI;AACpB,qBAAe,MAAM,CAAC;AACtB,YAAM,mBAAmB,OAAO,KAAK,iBAAiB,WAAW,KAAK,eAAe;AACrF,kBAAY;AAAA,QACV,WAAW;AAAA,QACX,cAAc,CAAC,OAAO,EAAE,OAAO,QAAQ,MAAM,cAAc,kBAAkB,IAAI;AAAA,QACjF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,aAAa,MAAM,gBAAgB,iBAAiB,gBAAgB,aAAa,aAAa;AAAA,EACjG;AAEA,QAAM,iBAAiB,QAAQ,MAAM,UAAU,UAAU,GAAG,CAAC,QAAQ,CAAC;AAEtE,QAAM,YAAY,GAAG,gBAAgB,sBAAsB,iBAAiB,IAAI,KAAK,yBAAyB;AAE9G,SACE,qBAAC;AAAA,IACC,UAAU;AAAA,IACV,cAAc,MAAM;AAClB,UAAI,WAAW,OAAO,KAAK,IAAI;AAC7B,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AAAA,IACA,cAAc,MAAM;AAClB,mBAAa,IAAI;AAAA,IACnB;AAAA,IACA,SAAS;AAAA,IACT,QAAQ,MAAM,eAAe,IAAI;AAAA,IACjC,KAAK;AAAA,IACL,OAAO,EAAE,GAAG,iBAAiB;AAAA,IAC7B,WAAW;AAAA,IACX,iBAAe,CAAC,CAAC,KAAK;AAAA,IACtB,iBAAe,CAAC,CAAC,mBAAmB,KAAK;AAAA,IACzC,cAAY;AAAA,IACZ,WAAS,KAAK;AAAA,IACd,cAAY,KAAK;AAAA,IACjB,WAAW;AAAA,IAEX;AAAA,2BAAC;AAAA,QACE;AAAA,4BAAkB,oBAAC;AAAA,YAAU;AAAA,YAAQ;AAAA,WAA8B,IAAK;AAAA,UACxE,mBAAmB,CAAC,gBAAgB,oBAAC;AAAA,YAAgB;AAAA,YAAY;AAAA,WAAsB,IAAK;AAAA,UAC5F,sBAAsB,CAAC,gBAAgB,oBAAC;AAAA,YAAmB;AAAA,YAAY;AAAA,WAAsB,IAAK;AAAA,UAClG,CAAC,iBAAiB,oBAAC;AAAA,YAAa;AAAA,YAAY;AAAA,WAA4C;AAAA,UACxF,CAAC,iBAAiB,oBAAC;AAAA,YAAY;AAAA,WAAY;AAAA,UAC3C,CAAC,eAAe,oBAAC;AAAA,YAAK;AAAA,WAAY,IAAK;AAAA;AAAA,OAC1C;AAAA,MACA,oBAAC;AAAA,QAAa;AAAA,OAAY;AAAA,MACzB,eACC,oBAAC;AAAA,QACE,iBAAO,gBAAgB,aAAa,YAAY,IAAI,IAAI;AAAA,OAC3D;AAAA,MAEF,oBAAC;AAAA,QAAc;AAAA,QAA8C;AAAA,OAA0B;AAAA;AAAA,GACzF;AAEJ;AAEA,IAAO,mBAAQ,2BAA2B,QAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,6 +34,7 @@ const TreeViewPropTypes = {
|
|
|
34
34
|
getIsDropValid: PropTypes.func.description("Function that returns true if the drop is valid and false if it's not").defaultValue("() => true"),
|
|
35
35
|
showChildrenAmount: PropTypes.bool.description("whether to show the amount of children or not").defaultValue(false),
|
|
36
36
|
onItemClick: PropTypes.func.description("function executed when clicking on an item").defaultValue("() => {}"),
|
|
37
|
+
onItemActivate: PropTypes.func.description("function executed when an item gets activated").defaultValue("() => {}"),
|
|
37
38
|
onItemFocus: PropTypes.func.description("function executed when focusing on an item").defaultValue("() => {}"),
|
|
38
39
|
onVisibleItemsChange: PropTypes.func.description("function executed when the visible items change").defaultValue("() => {}"),
|
|
39
40
|
onOrderChange: PropTypes.func.description("function executed when the items order changes").defaultValue("() => {}"),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { PropTypes } from '@elliemae/ds-utilities';\nimport TreeModel from 'tree-model';\nimport { useVirtual } from 'react-virtual';\nexport declare namespace DSTreeviewT {\n export type StringOrNum = string | number;\n export type SelectionState = boolean | 'mixed';\n export type SelectionItems = Record<StringOrNum, SelectionState>;\n export type ScrollToFunc = ReturnType<typeof useVirtual>['scrollToIndex'];\n export type ScrollToItemOptions = Parameters<ReturnType<typeof useVirtual>['scrollToIndex']>[1];\n export type ScrollToItemFunc = (options: ScrollToItemOptions) => void;\n export type ExpandedItems = Record<StringOrNum, true>; // { [id]:true } -> e.g. {1:true; 2:true} // false are not listed\n export interface SimpleItem {\n [key: string]: unknown;\n name: string;\n children?: SimpleItem[];\n id: StringOrNum;\n }\n\n export interface Item extends SimpleItem {\n children: Item[];\n treeDepth?: number;\n virtualIndex?: number;\n isChecked?: boolean | 'mixed';\n isGroup?: boolean;\n isExpanded?: boolean;\n childrenMatchesSearchQuery?: boolean;\n matchesSearchQuery?: boolean;\n nodeItemRef?: React.RefObject<HTMLLIElement>;\n model: TreeModel.Node<Item>['model'];\n node: TreeModel.Node<Item> & { parent?: TreeModel.Node<Item> };\n nodePath: TreeModel.Node<Item>[];\n }\n\n export interface DndItem {\n uid: string;\n depth: number;\n realIndex: number;\n childrenCount: number;\n parentId: string | null;\n original: DSTreeviewT.Item;\n }\n\n export interface Actions {\n toggleExpandAll: (isExpand: boolean) => Promise<DSTreeviewT.Item[]>;\n scrollTo: DSTreeviewT.ScrollToFunc;\n setSelectedItemByVirtualIndex: (index: number) => void;\n setFocusedItemByVirtualIndex: (\n index: number,\n scrollOpts: DSTreeviewT.ScrollToItemOptions & { withScroll?: boolean },\n ) => void;\n }\n export interface InstanceRef {\n actions: Actions;\n }\n\n export interface DefaultProps {\n plugins: string[];\n selection: SelectionItems;\n instanceRef: React.MutableRefObject<InstanceRef>;\n isItemDisabled: (item: Item) => boolean;\n disableIcons: boolean;\n isMultiSelect: boolean;\n isSingleSelect: boolean;\n getIsDropValid: (\n active: DndItem,\n over: DndItem,\n dropIndicatorPosition: 'none' | 'before' | 'after' | 'inside',\n ) => boolean;\n showChildrenAmount: boolean;\n isLoading: boolean;\n highlightOnlyQuery: boolean;\n onItemClick: (item: Item, e: React.MouseEvent<HTMLLIElement>) => void;\n onItemFocus: (meta: { scrollToItem: ScrollToItemFunc; itemIndex: number; item: Item }) => void;\n onVisibleItemsChange: (newVisibleItems: Item[]) => void;\n onOrderChange: (newData: SimpleItem[], oldData: SimpleItem[], draggedItem: DndItem) => void;\n onSelectionChange: (\n selection: SelectionItems,\n item: Item,\n meta: { scrollToItem: ScrollToItemFunc; itemIndex: number },\n ) => void;\n onExpandChange: (expandedHashmap: ExpandedItems, itemToggled: Item | null | undefined) => void;\n onInstanceRefInitialized: (instanceRef: React.MutableRefObject<InstanceRef>) => void;\n rowSize: 'normal' | 'compact';\n labelOverflow: 'wrap' | 'wrap-all' | 'truncate';\n noItemsPlaceholder: string;\n nameKey: string;\n width: StringOrNum;\n height: StringOrNum;\n groupIcon: JSX.Element | null;\n itemIcon: JSX.Element | null;\n searchQuery: string;\n }\n export interface PropsOptional {\n expanded: ExpandedItems;\n rightAddons: ((item: Item) => React.ReactNode | React.ReactNode[]) | JSX.Element;\n }\n export interface PropsRequired {\n data: Item[];\n }\n export interface Props extends DefaultProps, PropsOptional, PropsRequired {}\n}\n\nexport const TreeViewPropTypes = {\n data: PropTypes.arrayOf(\n PropTypes.shape({\n children: PropTypes.arrayOf(PropTypes.object),\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n isGroup: PropTypes.oneOfType([PropTypes.oneOf([undefined, null]), PropTypes.bool]),\n name: PropTypes.string,\n node: PropTypes.object,\n }),\n ).description('data to populate tree view').isRequired,\n plugins: PropTypes.tuple([PropTypes.oneOf(['tree-dnd'])])\n .description(\n 'only accepted value is TreeDndPlugin constant\\nother legacy plugins are now supported via different props',\n )\n .defaultValue([]),\n selection: PropTypes.object.description('pre selected items').defaultValue({}),\n expanded: PropTypes.object.description('control what items are expanded').defaultValue(undefined),\n instanceRef: PropTypes.shape({\n current: PropTypes.oneOfType([\n PropTypes.oneOf([null, undefined]),\n PropTypes.shape({\n actions: PropTypes.shape({\n toggleExpandAll: PropTypes.func,\n scrollTo: PropTypes.func,\n }).description('').isRequired,\n }),\n ]),\n }).description('instance ref'),\n isItemDisabled: PropTypes.func\n .description('Function that receives an item, and returns whether that item should be disabled')\n .defaultValue('() => false'),\n disableIcons: PropTypes.bool.description('disable icons').defaultValue(false),\n isMultiSelect: PropTypes.bool.description('whether the tree view is multi select or not').defaultValue(false),\n isSingleSelect: PropTypes.bool.description('wheter the tree view is single select or not').defaultValue(false),\n isLoading: PropTypes.bool.description('wheter the tree should show the loading state or not').defaultValue(false),\n getIsDropValid: PropTypes.func\n .description(\"Function that returns true if the drop is valid and false if it's not\")\n .defaultValue('() => true'),\n showChildrenAmount: PropTypes.bool.description('whether to show the amount of children or not').defaultValue(false),\n onItemClick: PropTypes.func.description('function executed when clicking on an item').defaultValue('() => {}'),\n onItemFocus: PropTypes.func.description('function executed when focusing on an item').defaultValue('() => {}'),\n onVisibleItemsChange: PropTypes.func\n .description('function executed when the visible items change')\n .defaultValue('() => {}'),\n onOrderChange: PropTypes.func.description('function executed when the items order changes').defaultValue('() => {}'),\n onSelectionChange: PropTypes.func\n .description('function executed when the selection changes')\n .defaultValue('() => {}'),\n onExpandChange: PropTypes.func.description('function executed when expanding an item').defaultValue('() => {}'),\n onInstanceRefInitialized: PropTypes.func\n .description('function executed when instanceRef has terminated instanciation')\n .defaultValue('() => {}'),\n rowSize: PropTypes.oneOf(['normal', 'compact']).description('size of the row').defaultValue('normal'),\n labelOverflow: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate'])\n .description('label truncation preference')\n .defaultValue('wrap'),\n width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('components width').defaultValue('100%'),\n height: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n .description('components height')\n .defaultValue('100%'),\n groupIcon: PropTypes.node.description('icon for groups'),\n itemIcon: PropTypes.node.description('icon for items'),\n searchQuery: PropTypes.string.description('search query value'),\n noItemsPlaceholder: PropTypes.string\n .description('message to be shown when there are no items in the treeview to be displayed')\n .defaultValue('No items found'),\n nameKey: PropTypes.string.description('property key to identifier for items labels').defaultValue('name'),\n highlightOnlyQuery: PropTypes.bool.description('whether to highlight results or not').defaultValue(false),\n}
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { WeakValidationMap } from 'react';\nimport { PropTypes } from '@elliemae/ds-utilities';\nimport TreeModel from 'tree-model';\nimport { useVirtual } from 'react-virtual';\nexport declare namespace DSTreeviewT {\n export type StringOrNum = string | number;\n export type SelectionState = boolean | 'mixed';\n export type SelectionItems = Record<StringOrNum, SelectionState>;\n export type ScrollToFunc = ReturnType<typeof useVirtual>['scrollToIndex'];\n export type ScrollToItemOptions = Parameters<ReturnType<typeof useVirtual>['scrollToIndex']>[1];\n export type ScrollToItemFunc = (options: ScrollToItemOptions) => void;\n export type ExpandedItems = Record<StringOrNum, true>; // { [id]:true } -> e.g. {1:true; 2:true} // false are not listed\n export interface SimpleItem {\n [key: string]: unknown;\n name: string;\n children?: SimpleItem[];\n id: StringOrNum;\n }\n\n export interface Item extends SimpleItem {\n children: Item[];\n treeDepth?: number;\n virtualIndex?: number;\n isChecked?: boolean | 'mixed';\n isGroup?: boolean;\n isExpanded?: boolean;\n childrenMatchesSearchQuery?: boolean;\n matchesSearchQuery?: boolean;\n nodeItemRef?: React.RefObject<HTMLLIElement>;\n model: TreeModel.Node<Item>['model'];\n node: TreeModel.Node<Item> & { parent?: TreeModel.Node<Item> };\n nodePath: TreeModel.Node<Item>[];\n }\n\n export interface DndItem {\n uid: string;\n depth: number;\n realIndex: number;\n childrenCount: number;\n parentId: string | null;\n original: DSTreeviewT.Item;\n }\n\n export interface Actions {\n toggleExpandAll: (isExpand: boolean) => Promise<DSTreeviewT.Item[]>;\n scrollTo: DSTreeviewT.ScrollToFunc;\n setSelectedItemByVirtualIndex: (index: number) => void;\n setFocusedItemByVirtualIndex: (\n index: number,\n scrollOpts: DSTreeviewT.ScrollToItemOptions & { withScroll?: boolean },\n ) => void;\n }\n export interface InstanceRef {\n actions: Actions;\n }\n\n export interface DefaultProps {\n plugins: string[];\n selection: SelectionItems;\n instanceRef: React.MutableRefObject<InstanceRef>;\n isItemDisabled: (item: Item) => boolean;\n disableIcons: boolean;\n isMultiSelect: boolean;\n isSingleSelect: boolean;\n getIsDropValid: (\n active: DndItem,\n over: DndItem,\n dropIndicatorPosition: 'none' | 'before' | 'after' | 'inside',\n ) => boolean;\n showChildrenAmount: boolean;\n isLoading: boolean;\n highlightOnlyQuery: boolean;\n onItemClick: (item: Item, e: React.MouseEvent<HTMLLIElement>) => void;\n onItemActivate: (item: Item, e?: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void;\n onItemFocus: (meta: { scrollToItem: ScrollToItemFunc; itemIndex: number; item: Item }) => void;\n onVisibleItemsChange: (newVisibleItems: Item[]) => void;\n onOrderChange: (newData: SimpleItem[], oldData: SimpleItem[], draggedItem: DndItem) => void;\n onSelectionChange: (\n selection: SelectionItems,\n item: Item,\n meta: { scrollToItem: ScrollToItemFunc; itemIndex: number },\n ) => void;\n onExpandChange: (expandedHashmap: ExpandedItems, itemToggled: Item | null | undefined) => void;\n onInstanceRefInitialized: (instanceRef: React.MutableRefObject<InstanceRef>) => void;\n rowSize: 'normal' | 'compact';\n labelOverflow: 'wrap' | 'wrap-all' | 'truncate';\n noItemsPlaceholder: string;\n nameKey: string;\n width: StringOrNum;\n height: StringOrNum;\n groupIcon: JSX.Element | null;\n itemIcon: JSX.Element | null;\n searchQuery: string;\n }\n export interface PropsOptional {\n expanded: ExpandedItems;\n rightAddons: ((item: Item) => React.ReactNode | React.ReactNode[]) | JSX.Element;\n }\n export interface PropsRequired {\n data: Item[];\n }\n export interface Props extends DefaultProps, PropsOptional, PropsRequired {}\n}\n\nexport const TreeViewPropTypes = {\n data: PropTypes.arrayOf(\n PropTypes.shape({\n children: PropTypes.arrayOf(PropTypes.object),\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n isGroup: PropTypes.oneOfType([PropTypes.oneOf([undefined, null]), PropTypes.bool]),\n name: PropTypes.string,\n node: PropTypes.object,\n }),\n ).description('data to populate tree view').isRequired,\n plugins: PropTypes.tuple([PropTypes.oneOf(['tree-dnd'])])\n .description(\n 'only accepted value is TreeDndPlugin constant\\nother legacy plugins are now supported via different props',\n )\n .defaultValue([]),\n selection: PropTypes.object.description('pre selected items').defaultValue({}),\n expanded: PropTypes.object.description('control what items are expanded').defaultValue(undefined),\n instanceRef: PropTypes.shape({\n current: PropTypes.oneOfType([\n PropTypes.oneOf([null, undefined]),\n PropTypes.shape({\n actions: PropTypes.shape({\n toggleExpandAll: PropTypes.func,\n scrollTo: PropTypes.func,\n }).description('').isRequired,\n }),\n ]),\n }).description('instance ref'),\n isItemDisabled: PropTypes.func\n .description('Function that receives an item, and returns whether that item should be disabled')\n .defaultValue('() => false'),\n disableIcons: PropTypes.bool.description('disable icons').defaultValue(false),\n isMultiSelect: PropTypes.bool.description('whether the tree view is multi select or not').defaultValue(false),\n isSingleSelect: PropTypes.bool.description('wheter the tree view is single select or not').defaultValue(false),\n isLoading: PropTypes.bool.description('wheter the tree should show the loading state or not').defaultValue(false),\n getIsDropValid: PropTypes.func\n .description(\"Function that returns true if the drop is valid and false if it's not\")\n .defaultValue('() => true'),\n showChildrenAmount: PropTypes.bool.description('whether to show the amount of children or not').defaultValue(false),\n onItemClick: PropTypes.func.description('function executed when clicking on an item').defaultValue('() => {}'),\n onItemActivate: PropTypes.func.description('function executed when an item gets activated').defaultValue('() => {}'),\n onItemFocus: PropTypes.func.description('function executed when focusing on an item').defaultValue('() => {}'),\n onVisibleItemsChange: PropTypes.func\n .description('function executed when the visible items change')\n .defaultValue('() => {}'),\n onOrderChange: PropTypes.func.description('function executed when the items order changes').defaultValue('() => {}'),\n onSelectionChange: PropTypes.func\n .description('function executed when the selection changes')\n .defaultValue('() => {}'),\n onExpandChange: PropTypes.func.description('function executed when expanding an item').defaultValue('() => {}'),\n onInstanceRefInitialized: PropTypes.func\n .description('function executed when instanceRef has terminated instanciation')\n .defaultValue('() => {}'),\n rowSize: PropTypes.oneOf(['normal', 'compact']).description('size of the row').defaultValue('normal'),\n labelOverflow: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate'])\n .description('label truncation preference')\n .defaultValue('wrap'),\n width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('components width').defaultValue('100%'),\n height: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n .description('components height')\n .defaultValue('100%'),\n groupIcon: PropTypes.node.description('icon for groups'),\n itemIcon: PropTypes.node.description('icon for items'),\n searchQuery: PropTypes.string.description('search query value'),\n noItemsPlaceholder: PropTypes.string\n .description('message to be shown when there are no items in the treeview to be displayed')\n .defaultValue('No items found'),\n nameKey: PropTypes.string.description('property key to identifier for items labels').defaultValue('name'),\n highlightOnlyQuery: PropTypes.bool.description('whether to highlight results or not').defaultValue(false),\n} as WeakValidationMap<unknown>;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -6,7 +6,7 @@ import { toggleExpandAllHelper, toggleItemExpand } from "./group-expands-helpers
|
|
|
6
6
|
const useOnItemKeyDown = (item, draggableProps) => {
|
|
7
7
|
const ctx = useContext(TreeViewContext);
|
|
8
8
|
const {
|
|
9
|
-
props: { onItemFocus },
|
|
9
|
+
props: { onItemFocus, onItemActivate },
|
|
10
10
|
triggerTreeRerender,
|
|
11
11
|
visibleItems,
|
|
12
12
|
setFocusedItem,
|
|
@@ -26,20 +26,21 @@ const useOnItemKeyDown = (item, draggableProps) => {
|
|
|
26
26
|
);
|
|
27
27
|
const onItemKeyDown = useCallback(
|
|
28
28
|
(e) => {
|
|
29
|
-
const {
|
|
29
|
+
const { key } = e;
|
|
30
30
|
if (!(draggableProps && draggableProps.active)) {
|
|
31
|
-
if (
|
|
31
|
+
if (key !== "Tab")
|
|
32
32
|
e.preventDefault();
|
|
33
|
-
if (
|
|
33
|
+
if ([" ", "Space", "Enter"].includes(key) && e.target.tagName === "LI") {
|
|
34
34
|
setSelectedItem(item);
|
|
35
|
+
onItemActivate(item, e);
|
|
35
36
|
}
|
|
36
|
-
if (
|
|
37
|
+
if (key === "ArrowLeft") {
|
|
37
38
|
if (isGroup && isExpanded) {
|
|
38
39
|
toggleItemExpand(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);
|
|
39
40
|
setLatestToggledItem(item);
|
|
40
41
|
}
|
|
41
42
|
}
|
|
42
|
-
if (
|
|
43
|
+
if (key === "ArrowRight") {
|
|
43
44
|
if (isGroup && !isExpanded) {
|
|
44
45
|
toggleItemExpand(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);
|
|
45
46
|
setLatestToggledItem(item);
|
|
@@ -48,7 +49,7 @@ const useOnItemKeyDown = (item, draggableProps) => {
|
|
|
48
49
|
const { virtualIndex } = item;
|
|
49
50
|
if (typeof virtualIndex === "number") {
|
|
50
51
|
const lastItemIndex = visibleItems.length - 1;
|
|
51
|
-
if (
|
|
52
|
+
if (key === "ArrowUp") {
|
|
52
53
|
const isLoopedFocus = virtualIndex === 0;
|
|
53
54
|
const newFocusIndex = isLoopedFocus ? lastItemIndex : virtualIndex - 1;
|
|
54
55
|
const newFocusItem = visibleItems[newFocusIndex];
|
|
@@ -65,7 +66,7 @@ const useOnItemKeyDown = (item, draggableProps) => {
|
|
|
65
66
|
focusItem(newFocusItem);
|
|
66
67
|
}
|
|
67
68
|
}
|
|
68
|
-
if (
|
|
69
|
+
if (key === "ArrowDown") {
|
|
69
70
|
const isLoopedFocus = virtualIndex === lastItemIndex;
|
|
70
71
|
const newFocusIndex = isLoopedFocus ? 0 : virtualIndex + 1;
|
|
71
72
|
const newFocusItem = visibleItems[newFocusIndex];
|
|
@@ -82,7 +83,7 @@ const useOnItemKeyDown = (item, draggableProps) => {
|
|
|
82
83
|
focusItem(newFocusItem);
|
|
83
84
|
}
|
|
84
85
|
}
|
|
85
|
-
if (
|
|
86
|
+
if (key === "End") {
|
|
86
87
|
if (virtualIndex !== lastItemIndex) {
|
|
87
88
|
const newFocusItem = visibleItems[lastItemIndex];
|
|
88
89
|
scrollToIndex(lastItemIndex);
|
|
@@ -93,7 +94,7 @@ const useOnItemKeyDown = (item, draggableProps) => {
|
|
|
93
94
|
}, 300);
|
|
94
95
|
}
|
|
95
96
|
}
|
|
96
|
-
if (
|
|
97
|
+
if (key === "Home") {
|
|
97
98
|
if (virtualIndex !== 0) {
|
|
98
99
|
const newFocusItem = visibleItems[0];
|
|
99
100
|
scrollToIndex(0);
|
|
@@ -109,8 +110,9 @@ const useOnItemKeyDown = (item, draggableProps) => {
|
|
|
109
110
|
},
|
|
110
111
|
[
|
|
111
112
|
draggableProps,
|
|
112
|
-
setSelectedItem,
|
|
113
113
|
item,
|
|
114
|
+
setSelectedItem,
|
|
115
|
+
onItemActivate,
|
|
114
116
|
isGroup,
|
|
115
117
|
isExpanded,
|
|
116
118
|
triggerTreeRerender,
|
|
@@ -133,8 +135,8 @@ const useGlobalKeyboardListener = (func) => {
|
|
|
133
135
|
const useGlobalToggleAllExpandShortcut = (treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState) => {
|
|
134
136
|
const memoizedToggleAllKeyboardShortcut = useCallback(
|
|
135
137
|
(e) => {
|
|
136
|
-
const {
|
|
137
|
-
if (
|
|
138
|
+
const { key } = e;
|
|
139
|
+
if (key === "*") {
|
|
138
140
|
toggleExpandAllHelper("toggle", treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);
|
|
139
141
|
}
|
|
140
142
|
},
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/keyboard-helpers.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext, useEffect } from 'react';\nimport TreeViewContext from '../TreeViewContext';\nimport { focusItem } from './tree-helpers';\nimport { toggleExpandAllHelper, toggleItemExpand } from './group-expands-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\nimport { SortableItemContextType } from '../hoc/SortableItemContext';\n\n// 9 tab\n// 13 enter\n// 32 space\n// 37 left arrow\n// 38 up arrow\n// 39 right arrow\n// 40 down arrow\n// 35 end\n// 36 home\n\n// 56 number 8\n// 106 (NumPad) *\n\nexport const useOnItemKeyDown = (item: DSTreeviewT.Item, draggableProps: SortableItemContextType['draggableProps']) => {\n const ctx = useContext(TreeViewContext);\n const {\n props: { onItemFocus },\n triggerTreeRerender,\n visibleItems,\n setFocusedItem,\n setSelectedItem,\n setLatestToggledItem,\n updateUserExpandedState,\n virtualListHelpers: { scrollToIndex },\n } = ctx;\n const { isGroup, isExpanded } = item;\n const onItemFocusCurry = useCallback(\n (newFocusItem: DSTreeviewT.Item) =>\n onItemFocus({\n itemIndex: newFocusItem.virtualIndex as number,\n scrollToItem: (opts = { align: 'start' }) => scrollToIndex(newFocusItem.virtualIndex as number, opts),\n item: newFocusItem,\n }),\n [onItemFocus, scrollToIndex],\n );\n\n const onItemKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLLIElement>) => {\n const {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,YAAY,iBAAiB;AACnD,OAAO,qBAAqB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB,wBAAwB;AAkBjD,MAAM,mBAAmB,CAAC,MAAwB,mBAA8D;AACrH,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext, useEffect } from 'react';\nimport TreeViewContext from '../TreeViewContext';\nimport { focusItem } from './tree-helpers';\nimport { toggleExpandAllHelper, toggleItemExpand } from './group-expands-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\nimport { SortableItemContextType } from '../hoc/SortableItemContext';\n\n// 9 tab\n// 13 enter\n// 32 space\n// 37 left arrow\n// 38 up arrow\n// 39 right arrow\n// 40 down arrow\n// 35 end\n// 36 home\n\n// 56 number 8\n// 106 (NumPad) *\n\nexport const useOnItemKeyDown = (item: DSTreeviewT.Item, draggableProps: SortableItemContextType['draggableProps']) => {\n const ctx = useContext(TreeViewContext);\n const {\n props: { onItemFocus, onItemActivate },\n triggerTreeRerender,\n visibleItems,\n setFocusedItem,\n setSelectedItem,\n setLatestToggledItem,\n updateUserExpandedState,\n virtualListHelpers: { scrollToIndex },\n } = ctx;\n const { isGroup, isExpanded } = item;\n const onItemFocusCurry = useCallback(\n (newFocusItem: DSTreeviewT.Item) =>\n onItemFocus({\n itemIndex: newFocusItem.virtualIndex as number,\n scrollToItem: (opts = { align: 'start' }) => scrollToIndex(newFocusItem.virtualIndex as number, opts),\n item: newFocusItem,\n }),\n [onItemFocus, scrollToIndex],\n );\n\n const onItemKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLLIElement>) => {\n const { key } = e;\n if (!(draggableProps && draggableProps.active)) {\n if (key !== 'Tab') e.preventDefault(); // allow tab/shift+tab\n if ([' ', 'Space', 'Enter'].includes(key) && (e.target as HTMLElement).tagName === 'LI') {\n setSelectedItem(item);\n onItemActivate(item, e);\n }\n\n if (key === 'ArrowLeft') {\n if (isGroup && isExpanded) {\n toggleItemExpand(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);\n setLatestToggledItem(item);\n }\n }\n if (key === 'ArrowRight') {\n if (isGroup && !isExpanded) {\n toggleItemExpand(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);\n setLatestToggledItem(item);\n }\n }\n\n const { virtualIndex } = item;\n if (typeof virtualIndex === 'number') {\n const lastItemIndex = visibleItems.length - 1;\n if (key === 'ArrowUp') {\n const isLoopedFocus = virtualIndex === 0;\n const newFocusIndex = isLoopedFocus ? lastItemIndex : virtualIndex - 1;\n const newFocusItem = visibleItems[newFocusIndex];\n scrollToIndex(newFocusIndex);\n if (isLoopedFocus) {\n // when looping the list from start to end we need to wait a bit before focusing\n setTimeout(() => {\n setFocusedItem(newFocusItem);\n focusItem(newFocusItem);\n onItemFocusCurry(newFocusItem);\n }, 300);\n } else {\n setFocusedItem(newFocusItem);\n onItemFocusCurry(newFocusItem);\n focusItem(newFocusItem);\n }\n }\n if (key === 'ArrowDown') {\n const isLoopedFocus = virtualIndex === lastItemIndex;\n const newFocusIndex = isLoopedFocus ? 0 : virtualIndex + 1;\n const newFocusItem = visibleItems[newFocusIndex];\n scrollToIndex(newFocusIndex);\n if (isLoopedFocus) {\n // when looping the list from start to end we need to wait a bit before focusing\n setTimeout(() => {\n setFocusedItem(newFocusItem);\n onItemFocusCurry(newFocusItem);\n focusItem(newFocusItem);\n }, 300);\n } else {\n setFocusedItem(newFocusItem);\n onItemFocusCurry(newFocusItem);\n focusItem(newFocusItem);\n }\n }\n if (key === 'End') {\n if (virtualIndex !== lastItemIndex) {\n const newFocusItem = visibleItems[lastItemIndex];\n scrollToIndex(lastItemIndex);\n setTimeout(() => {\n setFocusedItem(newFocusItem);\n onItemFocusCurry(newFocusItem);\n focusItem(newFocusItem);\n }, 300);\n }\n }\n if (key === 'Home') {\n if (virtualIndex !== 0) {\n const newFocusItem = visibleItems[0];\n scrollToIndex(0);\n setTimeout(() => {\n setFocusedItem(newFocusItem);\n onItemFocusCurry(newFocusItem);\n focusItem(newFocusItem);\n }, 300);\n }\n }\n }\n }\n },\n [\n draggableProps,\n item,\n setSelectedItem,\n onItemActivate,\n isGroup,\n isExpanded,\n triggerTreeRerender,\n updateUserExpandedState,\n scrollToIndex,\n setLatestToggledItem,\n visibleItems,\n setFocusedItem,\n onItemFocusCurry,\n ],\n );\n\n return onItemKeyDown;\n};\n\nexport const useGlobalKeyboardListener = (func: (e: KeyboardEvent) => void) => {\n useEffect(() => {\n document.addEventListener('keydown', func);\n return () => document.removeEventListener('keydown', func);\n }, [func]);\n};\n\nexport const useGlobalToggleAllExpandShortcut = (\n treeRoot: DSTreeviewT.Item['node'],\n triggerTreeRerender: () => void,\n setLatestToggledItem: DSTreeviewInternalsT.CTX['setLatestToggledItem'],\n updateUserExpandedState: DSTreeviewInternalsT.CTX['updateUserExpandedState'],\n) => {\n const memoizedToggleAllKeyboardShortcut = useCallback(\n (e: KeyboardEvent) => {\n const { key } = e;\n if (key === '*') {\n toggleExpandAllHelper('toggle', treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);\n }\n },\n [setLatestToggledItem, treeRoot, triggerTreeRerender, updateUserExpandedState],\n );\n\n return useGlobalKeyboardListener(memoizedToggleAllKeyboardShortcut);\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,7 +4,7 @@ import { focusItem } from "./tree-helpers";
|
|
|
4
4
|
import { toggleExpandAllHelper } from "./group-expands-helpers";
|
|
5
5
|
const useInstanceRefActions = ({ actions }, ctx) => {
|
|
6
6
|
const {
|
|
7
|
-
props: { onItemFocus },
|
|
7
|
+
props: { onItemFocus, onItemActivate },
|
|
8
8
|
virtualListHelpers,
|
|
9
9
|
treeRoot,
|
|
10
10
|
visibleItems,
|
|
@@ -47,8 +47,9 @@ const useInstanceRefActions = ({ actions }, ctx) => {
|
|
|
47
47
|
(index) => {
|
|
48
48
|
const itemByIndex = visibleItems[index];
|
|
49
49
|
setSelectedItem(itemByIndex);
|
|
50
|
+
onItemActivate(itemByIndex);
|
|
50
51
|
},
|
|
51
|
-
[visibleItems, setSelectedItem]
|
|
52
|
+
[visibleItems, setSelectedItem, onItemActivate]
|
|
52
53
|
);
|
|
53
54
|
actions.setFocusedItemByVirtualIndex = useCallback(
|
|
54
55
|
(index, opts = { align: "start", withScroll: false }) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/useInstanceRefActions.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo, useState, useRef, useCallback } from 'react';\nimport { focusItem } from './tree-helpers';\nimport { toggleExpandAllHelper } from './group-expands-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\ninterface PromisesRefT {\n expandResolve?: null | ((value: DSTreeviewT.Item[] | PromiseLike<DSTreeviewT.Item[]>) => void);\n scrollTo?: null | ((value: DSTreeviewT.Item[] | PromiseLike<DSTreeviewT.Item[]>) => void);\n}\n\nexport const useInstanceRefActions = ({ actions }: DSTreeviewT.InstanceRef, ctx: DSTreeviewInternalsT.CTX) => {\n const {\n props: { onItemFocus },\n virtualListHelpers,\n treeRoot,\n visibleItems,\n triggerTreeRerender,\n updateUserExpandedState,\n setSelectedItem,\n setFocusedItem,\n setLatestToggledItem,\n } = ctx;\n const { current: promises } = useRef<PromisesRefT>({});\n const { scrollToIndex } = useMemo(() => virtualListHelpers, [virtualListHelpers]);\n const [expandPromise, setPromise] = useState<Promise<DSTreeviewT.Item[]> | undefined | null>();\n\n useEffect(() => {\n if (expandPromise && promises.expandResolve) {\n promises.expandResolve(visibleItems);\n promises.expandResolve = null;\n setPromise(null);\n }\n }, [visibleItems, expandPromise, promises]);\n\n actions.toggleExpandAll = useCallback(\n (isExpand) => {\n const p = new Promise<DSTreeviewT.Item[]>((resolve) => {\n promises.expandResolve = resolve;\n if (treeRoot)\n toggleExpandAllHelper(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);\n });\n setPromise(p);\n return p;\n },\n [promises, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState],\n );\n actions.scrollTo = useCallback(\n (indx, opts = { align: 'start' }) => {\n if (scrollToIndex) scrollToIndex(indx, opts);\n },\n [scrollToIndex],\n );\n\n actions.setSelectedItemByVirtualIndex = useCallback(\n (index) => {\n const itemByIndex = visibleItems[index];\n setSelectedItem(itemByIndex);\n },\n [visibleItems, setSelectedItem],\n );\n\n actions.setFocusedItemByVirtualIndex = useCallback(\n (index, opts = { align: 'start', withScroll: false }) => {\n const itemByIndex = visibleItems[index];\n const onItemFocusParams = {\n itemIndex: itemByIndex.virtualIndex as number,\n scrollToItem: () => scrollToIndex(index, opts),\n item: itemByIndex,\n };\n\n if (opts.withScroll && scrollToIndex) {\n scrollToIndex(index, opts);\n setTimeout(() => {\n setFocusedItem(itemByIndex);\n focusItem(itemByIndex);\n onItemFocus(onItemFocusParams);\n }, 300);\n } else {\n setFocusedItem(itemByIndex);\n focusItem(itemByIndex);\n onItemFocus(onItemFocusParams);\n }\n },\n [visibleItems, scrollToIndex, setFocusedItem, onItemFocus],\n );\n\n return actions;\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,SAAS,UAAU,QAAQ,mBAAmB;AAClE,SAAS,iBAAiB;AAC1B,SAAS,6BAA6B;AAS/B,MAAM,wBAAwB,CAAC,EAAE,QAAQ,GAA4B,QAAkC;AAC5G,QAAM;AAAA,IACJ,OAAO,EAAE,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo, useState, useRef, useCallback } from 'react';\nimport { focusItem } from './tree-helpers';\nimport { toggleExpandAllHelper } from './group-expands-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\ninterface PromisesRefT {\n expandResolve?: null | ((value: DSTreeviewT.Item[] | PromiseLike<DSTreeviewT.Item[]>) => void);\n scrollTo?: null | ((value: DSTreeviewT.Item[] | PromiseLike<DSTreeviewT.Item[]>) => void);\n}\n\nexport const useInstanceRefActions = ({ actions }: DSTreeviewT.InstanceRef, ctx: DSTreeviewInternalsT.CTX) => {\n const {\n props: { onItemFocus, onItemActivate },\n virtualListHelpers,\n treeRoot,\n visibleItems,\n triggerTreeRerender,\n updateUserExpandedState,\n setSelectedItem,\n setFocusedItem,\n setLatestToggledItem,\n } = ctx;\n const { current: promises } = useRef<PromisesRefT>({});\n const { scrollToIndex } = useMemo(() => virtualListHelpers, [virtualListHelpers]);\n const [expandPromise, setPromise] = useState<Promise<DSTreeviewT.Item[]> | undefined | null>();\n\n useEffect(() => {\n if (expandPromise && promises.expandResolve) {\n promises.expandResolve(visibleItems);\n promises.expandResolve = null;\n setPromise(null);\n }\n }, [visibleItems, expandPromise, promises]);\n\n actions.toggleExpandAll = useCallback(\n (isExpand) => {\n const p = new Promise<DSTreeviewT.Item[]>((resolve) => {\n promises.expandResolve = resolve;\n if (treeRoot)\n toggleExpandAllHelper(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);\n });\n setPromise(p);\n return p;\n },\n [promises, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState],\n );\n actions.scrollTo = useCallback(\n (indx, opts = { align: 'start' }) => {\n if (scrollToIndex) scrollToIndex(indx, opts);\n },\n [scrollToIndex],\n );\n\n actions.setSelectedItemByVirtualIndex = useCallback(\n (index) => {\n const itemByIndex = visibleItems[index];\n setSelectedItem(itemByIndex);\n onItemActivate(itemByIndex);\n },\n [visibleItems, setSelectedItem, onItemActivate],\n );\n\n actions.setFocusedItemByVirtualIndex = useCallback(\n (index, opts = { align: 'start', withScroll: false }) => {\n const itemByIndex = visibleItems[index];\n const onItemFocusParams = {\n itemIndex: itemByIndex.virtualIndex as number,\n scrollToItem: () => scrollToIndex(index, opts),\n item: itemByIndex,\n };\n\n if (opts.withScroll && scrollToIndex) {\n scrollToIndex(index, opts);\n setTimeout(() => {\n setFocusedItem(itemByIndex);\n focusItem(itemByIndex);\n onItemFocus(onItemFocusParams);\n }, 300);\n } else {\n setFocusedItem(itemByIndex);\n focusItem(itemByIndex);\n onItemFocus(onItemFocusParams);\n }\n },\n [visibleItems, scrollToIndex, setFocusedItem, onItemFocus],\n );\n\n return actions;\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,SAAS,UAAU,QAAQ,mBAAmB;AAClE,SAAS,iBAAiB;AAC1B,SAAS,6BAA6B;AAS/B,MAAM,wBAAwB,CAAC,EAAE,QAAQ,GAA4B,QAAkC;AAC5G,QAAM;AAAA,IACJ,OAAO,EAAE,aAAa,eAAe;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,SAAS,SAAS,IAAI,OAAqB,CAAC,CAAC;AACrD,QAAM,EAAE,cAAc,IAAI,QAAQ,MAAM,oBAAoB,CAAC,kBAAkB,CAAC;AAChF,QAAM,CAAC,eAAe,UAAU,IAAI,SAAyD;AAE7F,YAAU,MAAM;AACd,QAAI,iBAAiB,SAAS,eAAe;AAC3C,eAAS,cAAc,YAAY;AACnC,eAAS,gBAAgB;AACzB,iBAAW,IAAI;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,cAAc,eAAe,QAAQ,CAAC;AAE1C,UAAQ,kBAAkB;AAAA,IACxB,CAAC,aAAa;AACZ,YAAM,IAAI,IAAI,QAA4B,CAAC,YAAY;AACrD,iBAAS,gBAAgB;AACzB,YAAI;AACF,gCAAsB,UAAU,UAAU,qBAAqB,sBAAsB,uBAAuB;AAAA,MAChH,CAAC;AACD,iBAAW,CAAC;AACZ,aAAO;AAAA,IACT;AAAA,IACA,CAAC,UAAU,UAAU,qBAAqB,sBAAsB,uBAAuB;AAAA,EACzF;AACA,UAAQ,WAAW;AAAA,IACjB,CAAC,MAAM,OAAO,EAAE,OAAO,QAAQ,MAAM;AACnC,UAAI;AAAe,sBAAc,MAAM,IAAI;AAAA,IAC7C;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,UAAQ,gCAAgC;AAAA,IACtC,CAAC,UAAU;AACT,YAAM,cAAc,aAAa;AACjC,sBAAgB,WAAW;AAC3B,qBAAe,WAAW;AAAA,IAC5B;AAAA,IACA,CAAC,cAAc,iBAAiB,cAAc;AAAA,EAChD;AAEA,UAAQ,+BAA+B;AAAA,IACrC,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,YAAY,MAAM,MAAM;AACvD,YAAM,cAAc,aAAa;AACjC,YAAM,oBAAoB;AAAA,QACxB,WAAW,YAAY;AAAA,QACvB,cAAc,MAAM,cAAc,OAAO,IAAI;AAAA,QAC7C,MAAM;AAAA,MACR;AAEA,UAAI,KAAK,cAAc,eAAe;AACpC,sBAAc,OAAO,IAAI;AACzB,mBAAW,MAAM;AACf,yBAAe,WAAW;AAC1B,oBAAU,WAAW;AACrB,sBAAY,iBAAiB;AAAA,QAC/B,GAAG,GAAG;AAAA,MACR,OAAO;AACL,uBAAe,WAAW;AAC1B,kBAAU,WAAW;AACrB,oBAAY,iBAAiB;AAAA,MAC/B;AAAA,IACF;AAAA,IACA,CAAC,cAAc,eAAe,gBAAgB,WAAW;AAAA,EAC3D;AAEA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-treeview",
|
|
3
|
-
"version": "3.9.1
|
|
3
|
+
"version": "3.9.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Tree View",
|
|
6
6
|
"files": [
|
|
@@ -229,15 +229,15 @@
|
|
|
229
229
|
"dependencies": {
|
|
230
230
|
"@dnd-kit/core": "~4.0.3",
|
|
231
231
|
"@dnd-kit/sortable": "~5.0.0",
|
|
232
|
-
"@elliemae/ds-button": "3.9.1
|
|
233
|
-
"@elliemae/ds-circular-progress-indicator": "3.9.1
|
|
234
|
-
"@elliemae/ds-classnames": "3.9.1
|
|
235
|
-
"@elliemae/ds-drag-and-drop": "3.9.1
|
|
236
|
-
"@elliemae/ds-form": "3.9.1
|
|
237
|
-
"@elliemae/ds-icons": "3.9.1
|
|
238
|
-
"@elliemae/ds-system": "3.9.1
|
|
239
|
-
"@elliemae/ds-truncated-tooltip-text": "3.9.1
|
|
240
|
-
"@elliemae/ds-utilities": "3.9.1
|
|
232
|
+
"@elliemae/ds-button": "3.9.1",
|
|
233
|
+
"@elliemae/ds-circular-progress-indicator": "3.9.1",
|
|
234
|
+
"@elliemae/ds-classnames": "3.9.1",
|
|
235
|
+
"@elliemae/ds-drag-and-drop": "3.9.1",
|
|
236
|
+
"@elliemae/ds-form": "3.9.1",
|
|
237
|
+
"@elliemae/ds-icons": "3.9.1",
|
|
238
|
+
"@elliemae/ds-system": "3.9.1",
|
|
239
|
+
"@elliemae/ds-truncated-tooltip-text": "3.9.1",
|
|
240
|
+
"@elliemae/ds-utilities": "3.9.1",
|
|
241
241
|
"react-highlight-words": "~0.18.0",
|
|
242
242
|
"react-virtual": "~2.10.4",
|
|
243
243
|
"tree-model": "~1.0.7",
|
|
@@ -253,13 +253,16 @@
|
|
|
253
253
|
"styled-components": "^5.3.5"
|
|
254
254
|
},
|
|
255
255
|
"scripts": {
|
|
256
|
+
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
257
|
+
"test": "node ../../scripts/testing/test.mjs",
|
|
256
258
|
"test:e2e": "../../../node_modules/pui-e2e-test-sdk/node_modules/.bin/wdio run ../../../wdio.conf.js",
|
|
257
259
|
"test:reports": "../../../node_modules/pui-e2e-test-sdk/node_modules/.bin/allure open",
|
|
258
|
-
"test": "node ../../scripts/testing/test.mjs",
|
|
259
260
|
"lint": "node ../../scripts/lint.mjs",
|
|
260
261
|
"dts": "node ../../scripts/dts.mjs",
|
|
261
|
-
"
|
|
262
|
+
"dts:withdeps": "pnpm --filter {.}... dts",
|
|
262
263
|
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
|
|
264
|
+
"dev:build": "pnpm --filter {.}... build && pnpm --filter {.}... dts",
|
|
265
|
+
"dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
|
|
263
266
|
"checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
264
267
|
}
|
|
265
268
|
}
|