@elliemae/ds-treeview 3.22.0-next.20 → 3.22.0-next.22
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/parts/CheckboxSelectable.js +15 -5
- package/dist/cjs/parts/CheckboxSelectable.js.map +2 -2
- package/dist/cjs/utils/selectable-helper.js +3 -2
- package/dist/cjs/utils/selectable-helper.js.map +2 -2
- package/dist/esm/parts/CheckboxSelectable.js +15 -5
- package/dist/esm/parts/CheckboxSelectable.js.map +2 -2
- package/dist/esm/utils/selectable-helper.js +3 -2
- package/dist/esm/utils/selectable-helper.js.map +2 -2
- package/dist/types/parts/CheckboxSelectable.d.ts +1 -0
- package/dist/types/parts/ExpandCaret.d.ts +1 -0
- package/dist/types/parts/Icon.d.ts +1 -0
- package/dist/types/parts/NestingSpace.d.ts +1 -0
- package/dist/types/parts/TreeItemText.d.ts +1 -0
- package/dist/types/utils/selectable-helper.d.ts +1 -1
- package/package.json +12 -12
|
@@ -34,7 +34,7 @@ module.exports = __toCommonJS(CheckboxSelectable_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_react = require("react");
|
|
37
|
-
var
|
|
37
|
+
var import_ds_controlled_form = require("@elliemae/ds-controlled-form");
|
|
38
38
|
var import_ds_system = require("@elliemae/ds-system");
|
|
39
39
|
var import_TreeViewContext = __toESM(require("../TreeViewContext.js"));
|
|
40
40
|
var import_selectable_helper = require("../utils/selectable-helper.js");
|
|
@@ -44,17 +44,18 @@ const StyledCheckboxWrapper = import_ds_system.styled.span`
|
|
|
44
44
|
`;
|
|
45
45
|
const CheckboxSelectable = (props) => {
|
|
46
46
|
const { item, itemIndex } = props;
|
|
47
|
-
const { id } = item;
|
|
47
|
+
const { id, children } = item;
|
|
48
48
|
const ctx = (0, import_react.useContext)(import_TreeViewContext.default);
|
|
49
49
|
const {
|
|
50
50
|
props: { onSelectionChange, isItemDisabled },
|
|
51
51
|
virtualListHelpers: { scrollToIndex },
|
|
52
52
|
triggerTreeRerender,
|
|
53
53
|
selectedCheckboxes,
|
|
54
|
-
setInternallySelectedCheckboxes
|
|
54
|
+
setInternallySelectedCheckboxes,
|
|
55
|
+
uniqueTreeViewUUID
|
|
55
56
|
} = ctx;
|
|
56
57
|
const onCheckboxChange = (0, import_react.useCallback)(() => {
|
|
57
|
-
const newSelections = (0, import_selectable_helper.toggleCheckboxItem)(item);
|
|
58
|
+
const newSelections = (0, import_selectable_helper.toggleCheckboxItem)(item, selectedCheckboxes);
|
|
58
59
|
const newSelectionHasmap = (0, import_object_helpers.filterObject)(
|
|
59
60
|
{ ...selectedCheckboxes, ...newSelections },
|
|
60
61
|
(value) => value !== false
|
|
@@ -89,13 +90,22 @@ const CheckboxSelectable = (props) => {
|
|
|
89
90
|
return false;
|
|
90
91
|
}, [selectedCheckboxes, id]);
|
|
91
92
|
const isDisabled = (0, import_react.useMemo)(() => isItemDisabled(item), [item, isItemDisabled]);
|
|
93
|
+
const ariaControls = (0, import_react.useMemo)(() => {
|
|
94
|
+
if (children.length) {
|
|
95
|
+
const childrenIds = children.map((child) => `ds-item-${uniqueTreeViewUUID}-${child.id}`);
|
|
96
|
+
return childrenIds.join(" ");
|
|
97
|
+
}
|
|
98
|
+
return void 0;
|
|
99
|
+
}, [children, uniqueTreeViewUUID]);
|
|
92
100
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCheckboxWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
93
|
-
|
|
101
|
+
import_ds_controlled_form.DSControlledCheckbox,
|
|
94
102
|
{
|
|
95
103
|
checked: isChecked,
|
|
96
104
|
disabled: isDisabled,
|
|
97
105
|
className: "em-ds-tree-item-checkbox",
|
|
98
106
|
"data-testid": "tree-item-checkbox",
|
|
107
|
+
"aria-controls": ariaControls,
|
|
108
|
+
id: `ds-item-${uniqueTreeViewUUID}-${id}`,
|
|
99
109
|
onChange: onCheckboxChange,
|
|
100
110
|
tabIndex: "0"
|
|
101
111
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/CheckboxSelectable.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext, useCallback, useMemo } from 'react';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useCallback, useMemo } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-controlled-form';\nimport { styled } from '@elliemae/ds-system';\nimport TreeViewContext from '../TreeViewContext.js';\nimport { toggleCheckboxItem } from '../utils/selectable-helper.js';\nimport { filterObject } from '../utils/object-helpers.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\nconst StyledCheckboxWrapper = styled.span`\n padding-top: 3px;\n`;\ninterface PropsT {\n item: DSTreeviewT.Item;\n itemIndex: number;\n}\nconst CheckboxSelectable = (props: PropsT): JSX.Element | null => {\n const { item, itemIndex } = props;\n const { id, children } = item;\n\n const ctx = useContext(TreeViewContext);\n const {\n props: { onSelectionChange, isItemDisabled },\n virtualListHelpers: { scrollToIndex },\n triggerTreeRerender,\n selectedCheckboxes,\n setInternallySelectedCheckboxes,\n uniqueTreeViewUUID,\n } = ctx;\n\n const onCheckboxChange = useCallback(() => {\n const newSelections = toggleCheckboxItem(item, selectedCheckboxes);\n const newSelectionHasmap = filterObject<DSTreeviewT.SelectionState>(\n { ...selectedCheckboxes, ...newSelections },\n (value) => value !== false,\n );\n setInternallySelectedCheckboxes(newSelectionHasmap);\n triggerTreeRerender();\n\n const indexAndScrollTo = {\n scrollToItem: () => {\n if (typeof item.virtualIndex === 'number') scrollToIndex(item.virtualIndex);\n },\n itemIndex,\n };\n if (onSelectionChange) onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);\n }, [\n item,\n triggerTreeRerender,\n onSelectionChange,\n itemIndex,\n scrollToIndex,\n selectedCheckboxes,\n setInternallySelectedCheckboxes,\n ]);\n const isChecked = useMemo(() => {\n if (selectedCheckboxes[id] === 'mixed') {\n return 'mixed' as const;\n }\n if (selectedCheckboxes[id] === true) {\n return true;\n }\n return false;\n }, [selectedCheckboxes, id]);\n\n const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);\n const ariaControls = useMemo(() => {\n if (children.length) {\n const childrenIds = children.map((child) => `ds-item-${uniqueTreeViewUUID}-${child.id}`);\n return childrenIds.join(' ');\n }\n return undefined;\n }, [children, uniqueTreeViewUUID]);\n\n return (\n <StyledCheckboxWrapper>\n <DSControlledCheckbox\n checked={isChecked}\n disabled={isDisabled}\n className=\"em-ds-tree-item-checkbox\"\n data-testid=\"tree-item-checkbox\"\n aria-controls={ariaControls}\n id={`ds-item-${uniqueTreeViewUUID}-${id}`}\n onChange={onCheckboxChange}\n tabIndex=\"0\"\n />\n </StyledCheckboxWrapper>\n );\n};\n\nexport default CheckboxSelectable;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0EjB;AA1EN,mBAAwD;AACxD,gCAAqC;AACrC,uBAAuB;AACvB,6BAA4B;AAC5B,+BAAmC;AACnC,4BAA6B;AAE7B,MAAM,wBAAwB,wBAAO;AAAA;AAAA;AAOrC,MAAM,qBAAqB,CAAC,UAAsC;AAChE,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,IAAI,SAAS,IAAI;AAEzB,QAAM,UAAM,yBAAW,uBAAAA,OAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,mBAAmB,eAAe;AAAA,IAC3C,oBAAoB,EAAE,cAAc;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,uBAAmB,0BAAY,MAAM;AACzC,UAAM,oBAAgB,6CAAmB,MAAM,kBAAkB;AACjE,UAAM,yBAAqB;AAAA,MACzB,EAAE,GAAG,oBAAoB,GAAG,cAAc;AAAA,MAC1C,CAAC,UAAU,UAAU;AAAA,IACvB;AACA,oCAAgC,kBAAkB;AAClD,wBAAoB;AAEpB,UAAM,mBAAmB;AAAA,MACvB,cAAc,MAAM;AAClB,YAAI,OAAO,KAAK,iBAAiB;AAAU,wBAAc,KAAK,YAAY;AAAA,MAC5E;AAAA,MACA;AAAA,IACF;AACA,QAAI;AAAmB,wBAAkB,oBAAoB,MAAM,gBAAgB;AAAA,EACrF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,QAAI,mBAAmB,EAAE,MAAM,SAAS;AACtC,aAAO;AAAA,IACT;AACA,QAAI,mBAAmB,EAAE,MAAM,MAAM;AACnC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,EAAE,CAAC;AAE3B,QAAM,iBAAa,sBAAQ,MAAM,eAAe,IAAI,GAAG,CAAC,MAAM,cAAc,CAAC;AAC7E,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI,SAAS,QAAQ;AACnB,YAAM,cAAc,SAAS,IAAI,CAAC,UAAU,WAAW,sBAAsB,MAAM,IAAI;AACvF,aAAO,YAAY,KAAK,GAAG;AAAA,IAC7B;AACA,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,kBAAkB,CAAC;AAEjC,SACE,4CAAC,yBACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,iBAAe;AAAA,MACf,IAAI,WAAW,sBAAsB;AAAA,MACrC,UAAU;AAAA,MACV,UAAS;AAAA;AAAA,EACX,GACF;AAEJ;AAEA,IAAO,6BAAQ;",
|
|
6
6
|
"names": ["TreeViewContext"]
|
|
7
7
|
}
|
|
@@ -65,12 +65,13 @@ const selectCheckboxItemModelParentsTillRoot = (modelToCheck, triggerTreeRerende
|
|
|
65
65
|
triggerTreeRerender();
|
|
66
66
|
return newSelections;
|
|
67
67
|
};
|
|
68
|
-
const toggleCheckboxItem = (itemToSelect, triggerTreeRerender = null) => {
|
|
68
|
+
const toggleCheckboxItem = (itemToSelect, currentlySelectedCheckboxes, triggerTreeRerender = null) => {
|
|
69
69
|
const {
|
|
70
70
|
node: {
|
|
71
|
-
model: { id,
|
|
71
|
+
model: { id, children = [] }
|
|
72
72
|
}
|
|
73
73
|
} = itemToSelect;
|
|
74
|
+
const isChecked = currentlySelectedCheckboxes[id];
|
|
74
75
|
const newSelections = {};
|
|
75
76
|
const nextState = isChecked === "mixed" ? true : !isChecked;
|
|
76
77
|
itemToSelect.node.model.isChecked = nextState;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/selectable-helper.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-params */\nimport { walkParents, walkAllNodeChildren } from './tree-helpers.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\n\nexport const getGroupCheckState = (node: DSTreeviewT.Item['node']) => {\n let childAllChecked = true;\n let anyChildChecked = false;\n walkAllNodeChildren(node, (childNode) => {\n const {\n model: { isChecked },\n } = childNode;\n if (isChecked === 'mixed' || isChecked === true) anyChildChecked = true;\n else childAllChecked = false;\n });\n\n if (childAllChecked) return true;\n if (anyChildChecked) return 'mixed';\n return false;\n};\n\nexport const selectCheckboxItemModelParentsTillRoot = (\n modelToCheck: DSTreeviewT.Item,\n triggerTreeRerender: (() => void) | null = null,\n) => {\n const newSelections: DSTreeviewT.SelectionItems = {};\n const { nodePath } = modelToCheck;\n walkParents(nodePath, (parentNode) => {\n const nextState = getGroupCheckState(parentNode);\n parentNode.model.isChecked = nextState;\n newSelections[parentNode.model.id] = nextState;\n });\n if (triggerTreeRerender) triggerTreeRerender();\n return newSelections;\n};\n\nexport const toggleCheckboxItem = (itemToSelect: DSTreeviewT.Item
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAiD;AAG1C,MAAM,qBAAqB,CAAC,SAAmC;AACpE,MAAI,kBAAkB;AACtB,MAAI,kBAAkB;AACtB,+CAAoB,MAAM,CAAC,cAAc;AACvC,UAAM;AAAA,MACJ,OAAO,EAAE,UAAU;AAAA,IACrB,IAAI;AACJ,QAAI,cAAc,WAAW,cAAc;AAAM,wBAAkB;AAAA;AAC9D,wBAAkB;AAAA,EACzB,CAAC;AAED,MAAI;AAAiB,WAAO;AAC5B,MAAI;AAAiB,WAAO;AAC5B,SAAO;AACT;AAEO,MAAM,yCAAyC,CACpD,cACA,sBAA2C,SACxC;AACH,QAAM,gBAA4C,CAAC;AACnD,QAAM,EAAE,SAAS,IAAI;AACrB,uCAAY,UAAU,CAAC,eAAe;AACpC,UAAM,YAAY,mBAAmB,UAAU;AAC/C,eAAW,MAAM,YAAY;AAC7B,kBAAc,WAAW,MAAM,EAAE,IAAI;AAAA,EACvC,CAAC;AACD,MAAI;AAAqB,wBAAoB;AAC7C,SAAO;AACT;AAEO,MAAM,qBAAqB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-params */\nimport { walkParents, walkAllNodeChildren } from './tree-helpers.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\n\nexport const getGroupCheckState = (node: DSTreeviewT.Item['node']) => {\n let childAllChecked = true;\n let anyChildChecked = false;\n walkAllNodeChildren(node, (childNode) => {\n const {\n model: { isChecked },\n } = childNode;\n if (isChecked === 'mixed' || isChecked === true) anyChildChecked = true;\n else childAllChecked = false;\n });\n\n if (childAllChecked) return true;\n if (anyChildChecked) return 'mixed';\n return false;\n};\n\nexport const selectCheckboxItemModelParentsTillRoot = (\n modelToCheck: DSTreeviewT.Item,\n triggerTreeRerender: (() => void) | null = null,\n) => {\n const newSelections: DSTreeviewT.SelectionItems = {};\n const { nodePath } = modelToCheck;\n walkParents(nodePath, (parentNode) => {\n const nextState = getGroupCheckState(parentNode);\n parentNode.model.isChecked = nextState;\n newSelections[parentNode.model.id] = nextState;\n });\n if (triggerTreeRerender) triggerTreeRerender();\n return newSelections;\n};\n\nexport const toggleCheckboxItem = (\n itemToSelect: DSTreeviewT.Item,\n currentlySelectedCheckboxes: DSTreeviewT.SelectionItems,\n triggerTreeRerender: (() => void) | null = null,\n) => {\n const {\n node: {\n model: { id, children = [] },\n },\n } = itemToSelect;\n const isChecked = currentlySelectedCheckboxes[id];\n\n const newSelections: DSTreeviewT.SelectionItems = {};\n // 'mixed' -> true -> false -> true [...->false -> true]\n const nextState = isChecked === 'mixed' ? true : !isChecked;\n itemToSelect.node.model.isChecked = nextState;\n newSelections[id] = nextState;\n\n if (children.length > 0 && (nextState === true || nextState === false)) {\n walkAllNodeChildren(itemToSelect.node, (childNode) => {\n childNode.model.isChecked = nextState;\n newSelections[childNode.model.id] = nextState;\n });\n }\n\n const parentsNewSelections = selectCheckboxItemModelParentsTillRoot(itemToSelect);\n\n if (triggerTreeRerender) triggerTreeRerender();\n return { ...parentsNewSelections, ...newSelections };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAiD;AAG1C,MAAM,qBAAqB,CAAC,SAAmC;AACpE,MAAI,kBAAkB;AACtB,MAAI,kBAAkB;AACtB,+CAAoB,MAAM,CAAC,cAAc;AACvC,UAAM;AAAA,MACJ,OAAO,EAAE,UAAU;AAAA,IACrB,IAAI;AACJ,QAAI,cAAc,WAAW,cAAc;AAAM,wBAAkB;AAAA;AAC9D,wBAAkB;AAAA,EACzB,CAAC;AAED,MAAI;AAAiB,WAAO;AAC5B,MAAI;AAAiB,WAAO;AAC5B,SAAO;AACT;AAEO,MAAM,yCAAyC,CACpD,cACA,sBAA2C,SACxC;AACH,QAAM,gBAA4C,CAAC;AACnD,QAAM,EAAE,SAAS,IAAI;AACrB,uCAAY,UAAU,CAAC,eAAe;AACpC,UAAM,YAAY,mBAAmB,UAAU;AAC/C,eAAW,MAAM,YAAY;AAC7B,kBAAc,WAAW,MAAM,EAAE,IAAI;AAAA,EACvC,CAAC;AACD,MAAI;AAAqB,wBAAoB;AAC7C,SAAO;AACT;AAEO,MAAM,qBAAqB,CAChC,cACA,6BACA,sBAA2C,SACxC;AACH,QAAM;AAAA,IACJ,MAAM;AAAA,MACJ,OAAO,EAAE,IAAI,WAAW,CAAC,EAAE;AAAA,IAC7B;AAAA,EACF,IAAI;AACJ,QAAM,YAAY,4BAA4B,EAAE;AAEhD,QAAM,gBAA4C,CAAC;AAEnD,QAAM,YAAY,cAAc,UAAU,OAAO,CAAC;AAClD,eAAa,KAAK,MAAM,YAAY;AACpC,gBAAc,EAAE,IAAI;AAEpB,MAAI,SAAS,SAAS,MAAM,cAAc,QAAQ,cAAc,QAAQ;AACtE,iDAAoB,aAAa,MAAM,CAAC,cAAc;AACpD,gBAAU,MAAM,YAAY;AAC5B,oBAAc,UAAU,MAAM,EAAE,IAAI;AAAA,IACtC,CAAC;AAAA,EACH;AAEA,QAAM,uBAAuB,uCAAuC,YAAY;AAEhF,MAAI;AAAqB,wBAAoB;AAC7C,SAAO,EAAE,GAAG,sBAAsB,GAAG,cAAc;AACrD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { useContext, useCallback, useMemo } from "react";
|
|
4
|
-
import {
|
|
4
|
+
import { DSControlledCheckbox } from "@elliemae/ds-controlled-form";
|
|
5
5
|
import { styled } from "@elliemae/ds-system";
|
|
6
6
|
import TreeViewContext from "../TreeViewContext.js";
|
|
7
7
|
import { toggleCheckboxItem } from "../utils/selectable-helper.js";
|
|
@@ -11,17 +11,18 @@ const StyledCheckboxWrapper = styled.span`
|
|
|
11
11
|
`;
|
|
12
12
|
const CheckboxSelectable = (props) => {
|
|
13
13
|
const { item, itemIndex } = props;
|
|
14
|
-
const { id } = item;
|
|
14
|
+
const { id, children } = item;
|
|
15
15
|
const ctx = useContext(TreeViewContext);
|
|
16
16
|
const {
|
|
17
17
|
props: { onSelectionChange, isItemDisabled },
|
|
18
18
|
virtualListHelpers: { scrollToIndex },
|
|
19
19
|
triggerTreeRerender,
|
|
20
20
|
selectedCheckboxes,
|
|
21
|
-
setInternallySelectedCheckboxes
|
|
21
|
+
setInternallySelectedCheckboxes,
|
|
22
|
+
uniqueTreeViewUUID
|
|
22
23
|
} = ctx;
|
|
23
24
|
const onCheckboxChange = useCallback(() => {
|
|
24
|
-
const newSelections = toggleCheckboxItem(item);
|
|
25
|
+
const newSelections = toggleCheckboxItem(item, selectedCheckboxes);
|
|
25
26
|
const newSelectionHasmap = filterObject(
|
|
26
27
|
{ ...selectedCheckboxes, ...newSelections },
|
|
27
28
|
(value) => value !== false
|
|
@@ -56,13 +57,22 @@ const CheckboxSelectable = (props) => {
|
|
|
56
57
|
return false;
|
|
57
58
|
}, [selectedCheckboxes, id]);
|
|
58
59
|
const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);
|
|
60
|
+
const ariaControls = useMemo(() => {
|
|
61
|
+
if (children.length) {
|
|
62
|
+
const childrenIds = children.map((child) => `ds-item-${uniqueTreeViewUUID}-${child.id}`);
|
|
63
|
+
return childrenIds.join(" ");
|
|
64
|
+
}
|
|
65
|
+
return void 0;
|
|
66
|
+
}, [children, uniqueTreeViewUUID]);
|
|
59
67
|
return /* @__PURE__ */ jsx(StyledCheckboxWrapper, { children: /* @__PURE__ */ jsx(
|
|
60
|
-
|
|
68
|
+
DSControlledCheckbox,
|
|
61
69
|
{
|
|
62
70
|
checked: isChecked,
|
|
63
71
|
disabled: isDisabled,
|
|
64
72
|
className: "em-ds-tree-item-checkbox",
|
|
65
73
|
"data-testid": "tree-item-checkbox",
|
|
74
|
+
"aria-controls": ariaControls,
|
|
75
|
+
id: `ds-item-${uniqueTreeViewUUID}-${id}`,
|
|
66
76
|
onChange: onCheckboxChange,
|
|
67
77
|
tabIndex: "0"
|
|
68
78
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/CheckboxSelectable.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useMemo } from 'react';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useMemo } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-controlled-form';\nimport { styled } from '@elliemae/ds-system';\nimport TreeViewContext from '../TreeViewContext.js';\nimport { toggleCheckboxItem } from '../utils/selectable-helper.js';\nimport { filterObject } from '../utils/object-helpers.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\nconst StyledCheckboxWrapper = styled.span`\n padding-top: 3px;\n`;\ninterface PropsT {\n item: DSTreeviewT.Item;\n itemIndex: number;\n}\nconst CheckboxSelectable = (props: PropsT): JSX.Element | null => {\n const { item, itemIndex } = props;\n const { id, children } = item;\n\n const ctx = useContext(TreeViewContext);\n const {\n props: { onSelectionChange, isItemDisabled },\n virtualListHelpers: { scrollToIndex },\n triggerTreeRerender,\n selectedCheckboxes,\n setInternallySelectedCheckboxes,\n uniqueTreeViewUUID,\n } = ctx;\n\n const onCheckboxChange = useCallback(() => {\n const newSelections = toggleCheckboxItem(item, selectedCheckboxes);\n const newSelectionHasmap = filterObject<DSTreeviewT.SelectionState>(\n { ...selectedCheckboxes, ...newSelections },\n (value) => value !== false,\n );\n setInternallySelectedCheckboxes(newSelectionHasmap);\n triggerTreeRerender();\n\n const indexAndScrollTo = {\n scrollToItem: () => {\n if (typeof item.virtualIndex === 'number') scrollToIndex(item.virtualIndex);\n },\n itemIndex,\n };\n if (onSelectionChange) onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);\n }, [\n item,\n triggerTreeRerender,\n onSelectionChange,\n itemIndex,\n scrollToIndex,\n selectedCheckboxes,\n setInternallySelectedCheckboxes,\n ]);\n const isChecked = useMemo(() => {\n if (selectedCheckboxes[id] === 'mixed') {\n return 'mixed' as const;\n }\n if (selectedCheckboxes[id] === true) {\n return true;\n }\n return false;\n }, [selectedCheckboxes, id]);\n\n const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);\n const ariaControls = useMemo(() => {\n if (children.length) {\n const childrenIds = children.map((child) => `ds-item-${uniqueTreeViewUUID}-${child.id}`);\n return childrenIds.join(' ');\n }\n return undefined;\n }, [children, uniqueTreeViewUUID]);\n\n return (\n <StyledCheckboxWrapper>\n <DSControlledCheckbox\n checked={isChecked}\n disabled={isDisabled}\n className=\"em-ds-tree-item-checkbox\"\n data-testid=\"tree-item-checkbox\"\n aria-controls={ariaControls}\n id={`ds-item-${uniqueTreeViewUUID}-${id}`}\n onChange={onCheckboxChange}\n tabIndex=\"0\"\n />\n </StyledCheckboxWrapper>\n );\n};\n\nexport default CheckboxSelectable;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC0EjB;AA1EN,SAAgB,YAAY,aAAa,eAAe;AACxD,SAAS,4BAA4B;AACrC,SAAS,cAAc;AACvB,OAAO,qBAAqB;AAC5B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAE7B,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAOrC,MAAM,qBAAqB,CAAC,UAAsC;AAChE,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,IAAI,SAAS,IAAI;AAEzB,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,mBAAmB,eAAe;AAAA,IAC3C,oBAAoB,EAAE,cAAc;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,mBAAmB,YAAY,MAAM;AACzC,UAAM,gBAAgB,mBAAmB,MAAM,kBAAkB;AACjE,UAAM,qBAAqB;AAAA,MACzB,EAAE,GAAG,oBAAoB,GAAG,cAAc;AAAA,MAC1C,CAAC,UAAU,UAAU;AAAA,IACvB;AACA,oCAAgC,kBAAkB;AAClD,wBAAoB;AAEpB,UAAM,mBAAmB;AAAA,MACvB,cAAc,MAAM;AAClB,YAAI,OAAO,KAAK,iBAAiB;AAAU,wBAAc,KAAK,YAAY;AAAA,MAC5E;AAAA,MACA;AAAA,IACF;AACA,QAAI;AAAmB,wBAAkB,oBAAoB,MAAM,gBAAgB;AAAA,EACrF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,mBAAmB,EAAE,MAAM,SAAS;AACtC,aAAO;AAAA,IACT;AACA,QAAI,mBAAmB,EAAE,MAAM,MAAM;AACnC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,EAAE,CAAC;AAE3B,QAAM,aAAa,QAAQ,MAAM,eAAe,IAAI,GAAG,CAAC,MAAM,cAAc,CAAC;AAC7E,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,SAAS,QAAQ;AACnB,YAAM,cAAc,SAAS,IAAI,CAAC,UAAU,WAAW,sBAAsB,MAAM,IAAI;AACvF,aAAO,YAAY,KAAK,GAAG;AAAA,IAC7B;AACA,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,kBAAkB,CAAC;AAEjC,SACE,oBAAC,yBACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,iBAAe;AAAA,MACf,IAAI,WAAW,sBAAsB;AAAA,MACrC,UAAU;AAAA,MACV,UAAS;AAAA;AAAA,EACX,GACF;AAEJ;AAEA,IAAO,6BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -30,12 +30,13 @@ const selectCheckboxItemModelParentsTillRoot = (modelToCheck, triggerTreeRerende
|
|
|
30
30
|
triggerTreeRerender();
|
|
31
31
|
return newSelections;
|
|
32
32
|
};
|
|
33
|
-
const toggleCheckboxItem = (itemToSelect, triggerTreeRerender = null) => {
|
|
33
|
+
const toggleCheckboxItem = (itemToSelect, currentlySelectedCheckboxes, triggerTreeRerender = null) => {
|
|
34
34
|
const {
|
|
35
35
|
node: {
|
|
36
|
-
model: { id,
|
|
36
|
+
model: { id, children = [] }
|
|
37
37
|
}
|
|
38
38
|
} = itemToSelect;
|
|
39
|
+
const isChecked = currentlySelectedCheckboxes[id];
|
|
39
40
|
const newSelections = {};
|
|
40
41
|
const nextState = isChecked === "mixed" ? true : !isChecked;
|
|
41
42
|
itemToSelect.node.model.isChecked = nextState;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/selectable-helper.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport { walkParents, walkAllNodeChildren } from './tree-helpers.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\n\nexport const getGroupCheckState = (node: DSTreeviewT.Item['node']) => {\n let childAllChecked = true;\n let anyChildChecked = false;\n walkAllNodeChildren(node, (childNode) => {\n const {\n model: { isChecked },\n } = childNode;\n if (isChecked === 'mixed' || isChecked === true) anyChildChecked = true;\n else childAllChecked = false;\n });\n\n if (childAllChecked) return true;\n if (anyChildChecked) return 'mixed';\n return false;\n};\n\nexport const selectCheckboxItemModelParentsTillRoot = (\n modelToCheck: DSTreeviewT.Item,\n triggerTreeRerender: (() => void) | null = null,\n) => {\n const newSelections: DSTreeviewT.SelectionItems = {};\n const { nodePath } = modelToCheck;\n walkParents(nodePath, (parentNode) => {\n const nextState = getGroupCheckState(parentNode);\n parentNode.model.isChecked = nextState;\n newSelections[parentNode.model.id] = nextState;\n });\n if (triggerTreeRerender) triggerTreeRerender();\n return newSelections;\n};\n\nexport const toggleCheckboxItem = (itemToSelect: DSTreeviewT.Item
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,2BAA2B;AAG1C,MAAM,qBAAqB,CAAC,SAAmC;AACpE,MAAI,kBAAkB;AACtB,MAAI,kBAAkB;AACtB,sBAAoB,MAAM,CAAC,cAAc;AACvC,UAAM;AAAA,MACJ,OAAO,EAAE,UAAU;AAAA,IACrB,IAAI;AACJ,QAAI,cAAc,WAAW,cAAc;AAAM,wBAAkB;AAAA;AAC9D,wBAAkB;AAAA,EACzB,CAAC;AAED,MAAI;AAAiB,WAAO;AAC5B,MAAI;AAAiB,WAAO;AAC5B,SAAO;AACT;AAEO,MAAM,yCAAyC,CACpD,cACA,sBAA2C,SACxC;AACH,QAAM,gBAA4C,CAAC;AACnD,QAAM,EAAE,SAAS,IAAI;AACrB,cAAY,UAAU,CAAC,eAAe;AACpC,UAAM,YAAY,mBAAmB,UAAU;AAC/C,eAAW,MAAM,YAAY;AAC7B,kBAAc,WAAW,MAAM,EAAE,IAAI;AAAA,EACvC,CAAC;AACD,MAAI;AAAqB,wBAAoB;AAC7C,SAAO;AACT;AAEO,MAAM,qBAAqB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport { walkParents, walkAllNodeChildren } from './tree-helpers.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\n\nexport const getGroupCheckState = (node: DSTreeviewT.Item['node']) => {\n let childAllChecked = true;\n let anyChildChecked = false;\n walkAllNodeChildren(node, (childNode) => {\n const {\n model: { isChecked },\n } = childNode;\n if (isChecked === 'mixed' || isChecked === true) anyChildChecked = true;\n else childAllChecked = false;\n });\n\n if (childAllChecked) return true;\n if (anyChildChecked) return 'mixed';\n return false;\n};\n\nexport const selectCheckboxItemModelParentsTillRoot = (\n modelToCheck: DSTreeviewT.Item,\n triggerTreeRerender: (() => void) | null = null,\n) => {\n const newSelections: DSTreeviewT.SelectionItems = {};\n const { nodePath } = modelToCheck;\n walkParents(nodePath, (parentNode) => {\n const nextState = getGroupCheckState(parentNode);\n parentNode.model.isChecked = nextState;\n newSelections[parentNode.model.id] = nextState;\n });\n if (triggerTreeRerender) triggerTreeRerender();\n return newSelections;\n};\n\nexport const toggleCheckboxItem = (\n itemToSelect: DSTreeviewT.Item,\n currentlySelectedCheckboxes: DSTreeviewT.SelectionItems,\n triggerTreeRerender: (() => void) | null = null,\n) => {\n const {\n node: {\n model: { id, children = [] },\n },\n } = itemToSelect;\n const isChecked = currentlySelectedCheckboxes[id];\n\n const newSelections: DSTreeviewT.SelectionItems = {};\n // 'mixed' -> true -> false -> true [...->false -> true]\n const nextState = isChecked === 'mixed' ? true : !isChecked;\n itemToSelect.node.model.isChecked = nextState;\n newSelections[id] = nextState;\n\n if (children.length > 0 && (nextState === true || nextState === false)) {\n walkAllNodeChildren(itemToSelect.node, (childNode) => {\n childNode.model.isChecked = nextState;\n newSelections[childNode.model.id] = nextState;\n });\n }\n\n const parentsNewSelections = selectCheckboxItemModelParentsTillRoot(itemToSelect);\n\n if (triggerTreeRerender) triggerTreeRerender();\n return { ...parentsNewSelections, ...newSelections };\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,2BAA2B;AAG1C,MAAM,qBAAqB,CAAC,SAAmC;AACpE,MAAI,kBAAkB;AACtB,MAAI,kBAAkB;AACtB,sBAAoB,MAAM,CAAC,cAAc;AACvC,UAAM;AAAA,MACJ,OAAO,EAAE,UAAU;AAAA,IACrB,IAAI;AACJ,QAAI,cAAc,WAAW,cAAc;AAAM,wBAAkB;AAAA;AAC9D,wBAAkB;AAAA,EACzB,CAAC;AAED,MAAI;AAAiB,WAAO;AAC5B,MAAI;AAAiB,WAAO;AAC5B,SAAO;AACT;AAEO,MAAM,yCAAyC,CACpD,cACA,sBAA2C,SACxC;AACH,QAAM,gBAA4C,CAAC;AACnD,QAAM,EAAE,SAAS,IAAI;AACrB,cAAY,UAAU,CAAC,eAAe;AACpC,UAAM,YAAY,mBAAmB,UAAU;AAC/C,eAAW,MAAM,YAAY;AAC7B,kBAAc,WAAW,MAAM,EAAE,IAAI;AAAA,EACvC,CAAC;AACD,MAAI;AAAqB,wBAAoB;AAC7C,SAAO;AACT;AAEO,MAAM,qBAAqB,CAChC,cACA,6BACA,sBAA2C,SACxC;AACH,QAAM;AAAA,IACJ,MAAM;AAAA,MACJ,OAAO,EAAE,IAAI,WAAW,CAAC,EAAE;AAAA,IAC7B;AAAA,EACF,IAAI;AACJ,QAAM,YAAY,4BAA4B,EAAE;AAEhD,QAAM,gBAA4C,CAAC;AAEnD,QAAM,YAAY,cAAc,UAAU,OAAO,CAAC;AAClD,eAAa,KAAK,MAAM,YAAY;AACpC,gBAAc,EAAE,IAAI;AAEpB,MAAI,SAAS,SAAS,MAAM,cAAc,QAAQ,cAAc,QAAQ;AACtE,wBAAoB,aAAa,MAAM,CAAC,cAAc;AACpD,gBAAU,MAAM,YAAY;AAC5B,oBAAc,UAAU,MAAM,EAAE,IAAI;AAAA,IACtC,CAAC;AAAA,EACH;AAEA,QAAM,uBAAuB,uCAAuC,YAAY;AAEhF,MAAI;AAAqB,wBAAoB;AAC7C,SAAO,EAAE,GAAG,sBAAsB,GAAG,cAAc;AACrD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { DSTreeviewT } from '../react-desc-prop-types.js';
|
|
2
2
|
export declare const getGroupCheckState: (node: DSTreeviewT.Item['node']) => boolean | "mixed";
|
|
3
3
|
export declare const selectCheckboxItemModelParentsTillRoot: (modelToCheck: DSTreeviewT.Item, triggerTreeRerender?: (() => void) | null) => DSTreeviewT.SelectionItems;
|
|
4
|
-
export declare const toggleCheckboxItem: (itemToSelect: DSTreeviewT.Item, triggerTreeRerender?: (() => void) | null) => {
|
|
4
|
+
export declare const toggleCheckboxItem: (itemToSelect: DSTreeviewT.Item, currentlySelectedCheckboxes: DSTreeviewT.SelectionItems, triggerTreeRerender?: (() => void) | null) => {
|
|
5
5
|
[x: string]: DSTreeviewT.SelectionState;
|
|
6
6
|
[x: number]: DSTreeviewT.SelectionState;
|
|
7
7
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-treeview",
|
|
3
|
-
"version": "3.22.0-next.
|
|
3
|
+
"version": "3.22.0-next.22",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Tree View",
|
|
6
6
|
"files": [
|
|
@@ -231,23 +231,23 @@
|
|
|
231
231
|
"react-virtual": "~2.10.4",
|
|
232
232
|
"tree-model": "~1.0.7",
|
|
233
233
|
"uid": "~2.0.1",
|
|
234
|
-
"@elliemae/ds-
|
|
235
|
-
"@elliemae/ds-
|
|
236
|
-
"@elliemae/ds-
|
|
237
|
-
"@elliemae/ds-drag-and-drop": "3.22.0-next.
|
|
238
|
-
"@elliemae/ds-form": "3.22.0-next.
|
|
239
|
-
"@elliemae/ds-
|
|
240
|
-
"@elliemae/ds-
|
|
241
|
-
"@elliemae/ds-
|
|
242
|
-
"@elliemae/ds-
|
|
243
|
-
"@elliemae/ds-
|
|
234
|
+
"@elliemae/ds-button-v2": "3.22.0-next.22",
|
|
235
|
+
"@elliemae/ds-classnames": "3.22.0-next.22",
|
|
236
|
+
"@elliemae/ds-circular-progress-indicator": "3.22.0-next.22",
|
|
237
|
+
"@elliemae/ds-drag-and-drop": "3.22.0-next.22",
|
|
238
|
+
"@elliemae/ds-form": "3.22.0-next.22",
|
|
239
|
+
"@elliemae/ds-icons": "3.22.0-next.22",
|
|
240
|
+
"@elliemae/ds-props-helpers": "3.22.0-next.22",
|
|
241
|
+
"@elliemae/ds-system": "3.22.0-next.22",
|
|
242
|
+
"@elliemae/ds-truncated-tooltip-text": "3.22.0-next.22",
|
|
243
|
+
"@elliemae/ds-utilities": "3.22.0-next.22"
|
|
244
244
|
},
|
|
245
245
|
"devDependencies": {
|
|
246
246
|
"@elliemae/pui-cli": "~9.0.0-next.22",
|
|
247
247
|
"@testing-library/jest-dom": "~5.16.5",
|
|
248
248
|
"@testing-library/react": "~12.1.3",
|
|
249
249
|
"styled-components": "~5.3.9",
|
|
250
|
-
"@elliemae/ds-monorepo-devops": "3.22.0-next.
|
|
250
|
+
"@elliemae/ds-monorepo-devops": "3.22.0-next.22"
|
|
251
251
|
},
|
|
252
252
|
"peerDependencies": {
|
|
253
253
|
"lodash": "^4.17.21",
|