@dreamcommerce/aurora 2.9.0-1 → 2.9.0-10
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/build/cjs/packages/aurora/src/components/dropdown/components/custom_label.js +3 -1
- package/build/cjs/packages/aurora/src/components/dropdown/components/custom_label.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/dropdown/hooks/use_keyboard_open_close.js +1 -0
- package/build/cjs/packages/aurora/src/components/dropdown/hooks/use_keyboard_open_close.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/stack/index.js +15 -2
- package/build/cjs/packages/aurora/src/components/stack/index.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/tree/components/tree_node.js +13 -8
- package/build/cjs/packages/aurora/src/components/tree/components/tree_node.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/tree/context/tree_context.js +1 -0
- package/build/cjs/packages/aurora/src/components/tree/context/tree_context.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/tree/context/tree_provider.js +3 -0
- package/build/cjs/packages/aurora/src/components/tree/context/tree_provider.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/tree/css_classes.js +5 -3
- package/build/cjs/packages/aurora/src/components/tree/css_classes.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/tree/hooks/tree_node_hook.js +5 -1
- package/build/cjs/packages/aurora/src/components/tree/hooks/tree_node_hook.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/tree/index.js +2 -2
- package/build/cjs/packages/aurora/src/css/tree/main.module.less.js +2 -2
- package/build/esm/packages/aurora/src/components/dropdown/components/custom_label.js +3 -1
- package/build/esm/packages/aurora/src/components/dropdown/components/custom_label.js.map +1 -1
- package/build/esm/packages/aurora/src/components/dropdown/hooks/use_keyboard_open_close.d.ts +1 -0
- package/build/esm/packages/aurora/src/components/dropdown/hooks/use_keyboard_open_close.js +1 -0
- package/build/esm/packages/aurora/src/components/dropdown/hooks/use_keyboard_open_close.js.map +1 -1
- package/build/esm/packages/aurora/src/components/stack/index.js +16 -3
- package/build/esm/packages/aurora/src/components/stack/index.js.map +1 -1
- package/build/esm/packages/aurora/src/components/stack/stack_types.d.ts +4 -0
- package/build/esm/packages/aurora/src/components/tree/components/tree_node.d.ts +13 -3
- package/build/esm/packages/aurora/src/components/tree/components/tree_node.js +13 -8
- package/build/esm/packages/aurora/src/components/tree/components/tree_node.js.map +1 -1
- package/build/esm/packages/aurora/src/components/tree/context/tree_context.d.ts +1 -0
- package/build/esm/packages/aurora/src/components/tree/context/tree_context.js +1 -0
- package/build/esm/packages/aurora/src/components/tree/context/tree_context.js.map +1 -1
- package/build/esm/packages/aurora/src/components/tree/context/tree_provider.js +3 -0
- package/build/esm/packages/aurora/src/components/tree/context/tree_provider.js.map +1 -1
- package/build/esm/packages/aurora/src/components/tree/css_classes.d.ts +5 -3
- package/build/esm/packages/aurora/src/components/tree/css_classes.js +5 -3
- package/build/esm/packages/aurora/src/components/tree/css_classes.js.map +1 -1
- package/build/esm/packages/aurora/src/components/tree/hooks/tree_node_hook.js +5 -1
- package/build/esm/packages/aurora/src/components/tree/hooks/tree_node_hook.js.map +1 -1
- package/build/esm/packages/aurora/src/components/tree/index.d.ts +4 -1
- package/build/esm/packages/aurora/src/components/tree/index.js +2 -2
- package/build/esm/packages/aurora/src/css/tree/main.module.less.js +2 -2
- package/package.json +1 -1
|
@@ -14,9 +14,11 @@ const CustomLabel = ({ children, disabled }) => {
|
|
|
14
14
|
const { toggleDropdown, isOpen } = index.useDropdownContext();
|
|
15
15
|
const ref = React.useRef(null);
|
|
16
16
|
use_keyboard_open_close.useKeyboardOpenClose(toggleDropdown, isOpen, ref);
|
|
17
|
-
const handleOnClick = () => {
|
|
17
|
+
const handleOnClick = (ev) => {
|
|
18
18
|
if (disabled)
|
|
19
19
|
return;
|
|
20
|
+
ev.preventDefault();
|
|
21
|
+
ev.stopPropagation();
|
|
20
22
|
toggleDropdown && toggleDropdown();
|
|
21
23
|
};
|
|
22
24
|
return (React__default['default'].createElement("div", { onClick: handleOnClick, ref: ref, tabIndex: 0 }, children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -10,5 +10,6 @@ const useKeyboardOpenClose = (toggleDropdown, isOpen, ref) => {
|
|
|
10
10
|
use_key_down.useKeyDown(['Esc|Escape'], () => isOpen && (toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown()), ref);
|
|
11
11
|
};
|
|
12
12
|
|
|
13
|
+
exports.default = useKeyboardOpenClose;
|
|
13
14
|
exports.useKeyboardOpenClose = useKeyboardOpenClose;
|
|
14
15
|
//# sourceMappingURL=use_keyboard_open_close.js.map
|
package/build/cjs/packages/aurora/src/components/dropdown/hooks/use_keyboard_open_close.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -13,11 +13,24 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
13
13
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
14
14
|
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
15
15
|
|
|
16
|
-
const Stack = ({ children, spacing = 0, className = '', direction = stack_constants.STACK_DIRECTIONS.row, justify = stack_constants.STACK_JUSTIFICATIONS.flexStart, align = stack_constants.STACK_ALIGNMENTS.normal, wrap = stack_constants.STACK_WRAP.nowrap, as = 'div', inline = false, style = {} }) => {
|
|
16
|
+
const Stack = ({ children, spacing = 0, className = '', direction = stack_constants.STACK_DIRECTIONS.row, justify = stack_constants.STACK_JUSTIFICATIONS.flexStart, align = stack_constants.STACK_ALIGNMENTS.normal, wrap = stack_constants.STACK_WRAP.nowrap, as = 'div', inline = false, style = {}, onMouseLeave, onMouseEnter, attributes, onClick }) => {
|
|
17
17
|
const stackClass = classnames__default['default'](main_module['default'][css_classes.cssStack], main_module['default'][stack_constants.STACK_DIRECTIONS_TO_CSS_CLASSES_MAP[direction]], main_module['default'][stack_constants.STACK_ALIGNMENTS_TO_CSS_CLASSES_MAP[align]], main_module['default'][stack_constants.STACK_JUSTIFICATIONS_TO_CSS_CLASSES_MAP[justify]], main_module['default'][stack_constants.STACK_WRAP_TO_CSS_CLASSES_MAP[wrap]], inline ? main_module['default'][stack_constants.STACK_CSS_CLASSES.inline] : '', className);
|
|
18
|
+
const stackElRef = React.useRef(null);
|
|
19
|
+
React.useEffect(() => {
|
|
20
|
+
if (!stackElRef.current || !attributes)
|
|
21
|
+
return;
|
|
22
|
+
Object.entries(attributes).forEach(([key, value]) => {
|
|
23
|
+
var _a;
|
|
24
|
+
(_a = stackElRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute(key, value);
|
|
25
|
+
});
|
|
26
|
+
}, []);
|
|
18
27
|
return React__default['default'].createElement(as, {
|
|
28
|
+
ref: stackElRef,
|
|
19
29
|
className: `${stackClass}`,
|
|
20
|
-
style: { gap: `${spacing}px`, ...style }
|
|
30
|
+
style: { gap: `${spacing}px`, ...style },
|
|
31
|
+
onMouseEnter,
|
|
32
|
+
onMouseLeave,
|
|
33
|
+
onClick
|
|
21
34
|
}, children);
|
|
22
35
|
};
|
|
23
36
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -16,7 +16,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
16
16
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
17
17
|
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
18
18
|
|
|
19
|
-
const TreeNode = ({ children, id, ContentComponent, LabelComponent, ...rest }) => {
|
|
19
|
+
const TreeNode = ({ children, id, cssClassNames, ContentComponent, LabelComponent, ...rest }) => {
|
|
20
20
|
const treeApi = tree_hook.useTree();
|
|
21
21
|
const node = tree_node_hook.useTreeNode(id, rest);
|
|
22
22
|
const nodeChildrenRef = React.useRef(null);
|
|
@@ -25,14 +25,19 @@ const TreeNode = ({ children, id, ContentComponent, LabelComponent, ...rest }) =
|
|
|
25
25
|
const toggleNode = () => {
|
|
26
26
|
treeApi.toggleNode(node.id);
|
|
27
27
|
};
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
28
|
+
const Label = LabelComponent ? (LabelComponent === null || LabelComponent === void 0 ? void 0 : LabelComponent({ node, isLeaf: !children })) : (React__default['default'].createElement("span", { tabIndex: !children ? 0 : -1, className: classnames__default['default'](main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeLabelContent], css_classes.TREE_NODE_CSS_CLASSES.treeNodeLabelContent) }, node.label ? node.label : node.id));
|
|
29
|
+
const Content = ContentComponent ? (ContentComponent === null || ContentComponent === void 0 ? void 0 : ContentComponent({ node, toggleNode, isLeaf: !children })) : (React__default['default'].createElement("div", { className: classnames__default['default'](css_classes.TREE_NODE_CSS_CLASSES.treeNodeLabel, main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeLabel]) },
|
|
30
|
+
React__default['default'].createElement("button", { className: classnames__default['default'](css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerBtn, main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerBtn], {
|
|
31
|
+
[css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerBtnExpanded]: node.expanded,
|
|
32
|
+
[main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerBtnExpanded]]: node.expanded
|
|
33
|
+
}), onClick: toggleNode },
|
|
34
|
+
React__default['default'].createElement("span", { className: classnames__default['default'](main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerBtnIcon], css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerBtnIcon) },
|
|
35
|
+
React__default['default'].createElement(icon_list_arrow_down.IconListArrowDown, null))),
|
|
36
|
+
Label));
|
|
37
|
+
return (React__default['default'].createElement("li", { role: "treeitem", "aria-expanded": node.expanded, className: classnames__default['default'](main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNode], css_classes.TREE_NODE_CSS_CLASSES.treeNode, cssClassNames, {
|
|
38
|
+
[css_classes.TREE_NODE_CSS_CLASSES.treeNodeExpanded]: node.expanded
|
|
31
39
|
}) },
|
|
32
|
-
|
|
33
|
-
React__default['default'].createElement("span", { className: classnames__default['default'](main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerIcon], css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerIcon) },
|
|
34
|
-
React__default['default'].createElement(icon_list_arrow_down.IconListArrowDown, null)),
|
|
35
|
-
LabelComponent ? (LabelComponent) : (React__default['default'].createElement("span", { className: classnames__default['default'](main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerLabel], css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerLabel) }, node.label ? node.label : node.id)))),
|
|
40
|
+
children ? Content : Label,
|
|
36
41
|
children ? (React__default['default'].createElement(reactTransitionGroup.CSSTransition, { unmountOnExit: true, in: node.expanded, timeout: 250, classNames: {
|
|
37
42
|
enter: main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeChildrenEnter],
|
|
38
43
|
enterActive: main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeChildrenEnterActive],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -15,6 +15,9 @@ const TreeProvider = ({ children }) => {
|
|
|
15
15
|
addNode(node) {
|
|
16
16
|
setNodes((nodes) => [...nodes, node]);
|
|
17
17
|
},
|
|
18
|
+
updateNode(nodeId, node) {
|
|
19
|
+
setNodes((nodes) => nodes.map((n) => (n.id === nodeId ? { ...n, ...node } : n)));
|
|
20
|
+
},
|
|
18
21
|
getNode(nodeId) {
|
|
19
22
|
return nodes.find((node) => node.id === nodeId);
|
|
20
23
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -10,9 +10,11 @@ const TREE_CSS_CLASSES = {
|
|
|
10
10
|
const treeNodeBaseCssClass = `tree-node`;
|
|
11
11
|
const TREE_NODE_CSS_CLASSES = {
|
|
12
12
|
treeNode: treeNodeBaseCssClass,
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
treeNodeTogglerBtn: `${treeNodeBaseCssClass}__toggler-btn`,
|
|
14
|
+
treeNodeTogglerBtnExpanded: `${treeNodeBaseCssClass}__toggler-btn_expanded`,
|
|
15
|
+
treeNodeTogglerBtnIcon: `${treeNodeBaseCssClass}__toggler-btn-icon`,
|
|
16
|
+
treeNodeLabelContent: `${treeNodeBaseCssClass}__label-content`,
|
|
17
|
+
treeNodeLabel: `${treeNodeBaseCssClass}__label`,
|
|
16
18
|
treeNodeChildren: `${treeNodeBaseCssClass}__children`,
|
|
17
19
|
treeNodeChildrenEnter: `${treeNodeBaseCssClass}__children-enter`,
|
|
18
20
|
treeNodeChildrenEnterActive: `${treeNodeBaseCssClass}__children-enter-active`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -7,9 +7,13 @@ var tree_hook = require('./tree_hook.js');
|
|
|
7
7
|
|
|
8
8
|
const useTreeNode = (nodeId, props) => {
|
|
9
9
|
const treeApi = tree_hook.useTree();
|
|
10
|
+
React.useEffect(() => {
|
|
11
|
+
if (treeApi.hasNode(nodeId) && props)
|
|
12
|
+
treeApi.updateNode(nodeId, props);
|
|
13
|
+
}, [props === null || props === void 0 ? void 0 : props.expanded]);
|
|
10
14
|
React.useEffect(() => {
|
|
11
15
|
if (!treeApi.hasNode(nodeId))
|
|
12
|
-
treeApi.addNode({
|
|
16
|
+
treeApi.addNode({ id: nodeId, ...props });
|
|
13
17
|
return () => treeApi.removeNode(nodeId);
|
|
14
18
|
}, []);
|
|
15
19
|
return treeApi.getNode(nodeId);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -13,9 +13,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
13
13
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
14
14
|
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
15
15
|
|
|
16
|
-
const Tree = ({ children }) => {
|
|
16
|
+
const Tree = ({ children, cssClassNames }) => {
|
|
17
17
|
return (React__default['default'].createElement(tree_provider.TreeProvider, null,
|
|
18
|
-
React__default['default'].createElement("ul", { className: classnames__default['default'](main_module['default'][css_classes.TREE_CSS_CLASSES.tree], css_classes.TREE_CSS_CLASSES.tree) }, children)));
|
|
18
|
+
React__default['default'].createElement("ul", { className: classnames__default['default'](main_module['default'][css_classes.TREE_CSS_CLASSES.tree], css_classes.TREE_CSS_CLASSES.tree, cssClassNames) }, children)));
|
|
19
19
|
};
|
|
20
20
|
|
|
21
21
|
exports.Tree = Tree;
|
|
@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var styleInject_es = require('../../../../../external/style-inject/dist/style-inject.es.js');
|
|
6
6
|
|
|
7
|
-
var css_248z = ".main-module_tree__3D4e3 {\n list-style: none;\n
|
|
8
|
-
var cssClasses = {"tree":"main-module_tree__3D4e3","tree-
|
|
7
|
+
var css_248z = ".main-module_tree__3D4e3 {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.main-module_tree-node__toggler-btn__s9KoL {\n display: flex;\n padding: 0 4px 8px 4px;\n cursor: pointer;\n}\n.main-module_tree-node__toggler-btn__s9KoL svg {\n transition: rotate 250ms ease-out;\n rotate: -95deg;\n}\n.main-module_tree-node__toggler-btn_expanded__17Joe svg {\n rotate: 0deg;\n}\n.main-module_tree-node__label__DT728 {\n display: flex;\n align-items: center;\n background: none;\n gap: 8px;\n}\n.main-module_tree-node__children__QyEOR {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-top: 8px;\n transform-origin: top center;\n transition: opacity 250ms ease-out, scale 250ms ease-out;\n padding-left: 16px;\n list-style: none;\n will-change: true;\n}\n.main-module_tree-node__children-enter__vxFO- {\n opacity: 0;\n scale: 1 0;\n}\n.main-module_tree-node__children-enter-active__T6XIS {\n opacity: 1;\n scale: 1 1;\n}\n.main-module_tree-node__children-exit__1NXHe {\n opacity: 1;\n scale: 1 1;\n}\n.main-module_tree-node__children-exit-active__vdqAI {\n opacity: 0;\n scale: 1 0;\n}\n";
|
|
8
|
+
var cssClasses = {"tree":"main-module_tree__3D4e3","tree-node__toggler-btn":"main-module_tree-node__toggler-btn__s9KoL","tree-node__toggler-btn_expanded":"main-module_tree-node__toggler-btn_expanded__17Joe","tree-node__label":"main-module_tree-node__label__DT728","tree-node__children":"main-module_tree-node__children__QyEOR","tree-node__children-enter":"main-module_tree-node__children-enter__vxFO-","tree-node__children-enter-active":"main-module_tree-node__children-enter-active__T6XIS","tree-node__children-exit":"main-module_tree-node__children-exit__1NXHe","tree-node__children-exit-active":"main-module_tree-node__children-exit-active__vdqAI"};
|
|
9
9
|
styleInject_es['default'](css_248z);
|
|
10
10
|
|
|
11
11
|
exports.default = cssClasses;
|
|
@@ -6,9 +6,11 @@ const CustomLabel = ({ children, disabled }) => {
|
|
|
6
6
|
const { toggleDropdown, isOpen } = useDropdownContext();
|
|
7
7
|
const ref = useRef(null);
|
|
8
8
|
useKeyboardOpenClose(toggleDropdown, isOpen, ref);
|
|
9
|
-
const handleOnClick = () => {
|
|
9
|
+
const handleOnClick = (ev) => {
|
|
10
10
|
if (disabled)
|
|
11
11
|
return;
|
|
12
|
+
ev.preventDefault();
|
|
13
|
+
ev.stopPropagation();
|
|
12
14
|
toggleDropdown && toggleDropdown();
|
|
13
15
|
};
|
|
14
16
|
return (React.createElement("div", { onClick: handleOnClick, ref: ref, tabIndex: 0 }, children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -6,5 +6,6 @@ const useKeyboardOpenClose = (toggleDropdown, isOpen, ref) => {
|
|
|
6
6
|
useKeyDown(['Esc|Escape'], () => isOpen && (toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown()), ref);
|
|
7
7
|
};
|
|
8
8
|
|
|
9
|
+
export default useKeyboardOpenClose;
|
|
9
10
|
export { useKeyboardOpenClose };
|
|
10
11
|
//# sourceMappingURL=use_keyboard_open_close.js.map
|
package/build/esm/packages/aurora/src/components/dropdown/hooks/use_keyboard_open_close.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,14 +1,27 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useRef, useEffect } from 'react';
|
|
2
2
|
import classnames from 'classnames';
|
|
3
3
|
import { STACK_DIRECTIONS, STACK_JUSTIFICATIONS, STACK_ALIGNMENTS, STACK_WRAP, STACK_DIRECTIONS_TO_CSS_CLASSES_MAP, STACK_ALIGNMENTS_TO_CSS_CLASSES_MAP, STACK_JUSTIFICATIONS_TO_CSS_CLASSES_MAP, STACK_WRAP_TO_CSS_CLASSES_MAP, STACK_CSS_CLASSES } from './stack_constants.js';
|
|
4
4
|
import cssClasses from '../../css/stack/main.module.less.js';
|
|
5
5
|
import { cssStack } from './css_classes.js';
|
|
6
6
|
|
|
7
|
-
const Stack = ({ children, spacing = 0, className = '', direction = STACK_DIRECTIONS.row, justify = STACK_JUSTIFICATIONS.flexStart, align = STACK_ALIGNMENTS.normal, wrap = STACK_WRAP.nowrap, as = 'div', inline = false, style = {} }) => {
|
|
7
|
+
const Stack = ({ children, spacing = 0, className = '', direction = STACK_DIRECTIONS.row, justify = STACK_JUSTIFICATIONS.flexStart, align = STACK_ALIGNMENTS.normal, wrap = STACK_WRAP.nowrap, as = 'div', inline = false, style = {}, onMouseLeave, onMouseEnter, attributes, onClick }) => {
|
|
8
8
|
const stackClass = classnames(cssClasses[cssStack], cssClasses[STACK_DIRECTIONS_TO_CSS_CLASSES_MAP[direction]], cssClasses[STACK_ALIGNMENTS_TO_CSS_CLASSES_MAP[align]], cssClasses[STACK_JUSTIFICATIONS_TO_CSS_CLASSES_MAP[justify]], cssClasses[STACK_WRAP_TO_CSS_CLASSES_MAP[wrap]], inline ? cssClasses[STACK_CSS_CLASSES.inline] : '', className);
|
|
9
|
+
const stackElRef = useRef(null);
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
if (!stackElRef.current || !attributes)
|
|
12
|
+
return;
|
|
13
|
+
Object.entries(attributes).forEach(([key, value]) => {
|
|
14
|
+
var _a;
|
|
15
|
+
(_a = stackElRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute(key, value);
|
|
16
|
+
});
|
|
17
|
+
}, []);
|
|
9
18
|
return React.createElement(as, {
|
|
19
|
+
ref: stackElRef,
|
|
10
20
|
className: `${stackClass}`,
|
|
11
|
-
style: { gap: `${spacing}px`, ...style }
|
|
21
|
+
style: { gap: `${spacing}px`, ...style },
|
|
22
|
+
onMouseEnter,
|
|
23
|
+
onMouseLeave,
|
|
24
|
+
onClick
|
|
12
25
|
}, children);
|
|
13
26
|
};
|
|
14
27
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -12,6 +12,10 @@ export declare type TStackProps = {
|
|
|
12
12
|
as?: string;
|
|
13
13
|
inline?: boolean;
|
|
14
14
|
style?: Record<any, any>;
|
|
15
|
+
onMouseEnter?: (event: React.MouseEvent) => void;
|
|
16
|
+
onMouseLeave?: (event: React.MouseEvent) => void;
|
|
17
|
+
attributes?: Record<string, any>;
|
|
18
|
+
onClick?: (event: React.MouseEvent) => void;
|
|
15
19
|
};
|
|
16
20
|
export declare type TStackJustify = Any.Keys<typeof STACK_JUSTIFICATIONS_TO_CSS_CLASSES_MAP>;
|
|
17
21
|
export declare type TStackDirection = Any.Keys<typeof STACK_DIRECTIONS_TO_CSS_CLASSES_MAP>;
|
|
@@ -1,11 +1,21 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TPropsWithChildren } from "../../../typings/general";
|
|
3
3
|
import { ITreeNode } from "../context/tree_context";
|
|
4
|
+
declare type TTreeContentComponentProps = {
|
|
5
|
+
node: ITreeNode;
|
|
6
|
+
toggleNode: () => void;
|
|
7
|
+
isLeaf: boolean;
|
|
8
|
+
};
|
|
9
|
+
declare type TTreeLabelComponentProps = {
|
|
10
|
+
node: ITreeNode;
|
|
11
|
+
isLeaf: boolean;
|
|
12
|
+
};
|
|
4
13
|
declare type TTreeNodeProps = TPropsWithChildren<ITreeNode & {
|
|
14
|
+
cssClassNames?: string;
|
|
5
15
|
collapseIcon?: React.ReactNode;
|
|
6
16
|
expandIcon?: React.ReactNode;
|
|
7
|
-
LabelComponent?: React.ReactNode;
|
|
8
|
-
ContentComponent?: React.ReactNode;
|
|
17
|
+
LabelComponent?: (props: TTreeLabelComponentProps) => React.ReactNode;
|
|
18
|
+
ContentComponent?: (props: TTreeContentComponentProps) => React.ReactNode;
|
|
9
19
|
}>;
|
|
10
|
-
export declare const TreeNode: ({ children, id, ContentComponent, LabelComponent, ...rest }: TTreeNodeProps) => JSX.Element | null;
|
|
20
|
+
export declare const TreeNode: ({ children, id, cssClassNames, ContentComponent, LabelComponent, ...rest }: TTreeNodeProps) => JSX.Element | null;
|
|
11
21
|
export default TreeNode;
|
|
@@ -7,7 +7,7 @@ import { useTree } from '../hooks/tree_hook.js';
|
|
|
7
7
|
import { useTreeNode } from '../hooks/tree_node_hook.js';
|
|
8
8
|
import { IconListArrowDown } from '../../../assets/icon_list_arrow_down.js';
|
|
9
9
|
|
|
10
|
-
const TreeNode = ({ children, id, ContentComponent, LabelComponent, ...rest }) => {
|
|
10
|
+
const TreeNode = ({ children, id, cssClassNames, ContentComponent, LabelComponent, ...rest }) => {
|
|
11
11
|
const treeApi = useTree();
|
|
12
12
|
const node = useTreeNode(id, rest);
|
|
13
13
|
const nodeChildrenRef = useRef(null);
|
|
@@ -16,14 +16,19 @@ const TreeNode = ({ children, id, ContentComponent, LabelComponent, ...rest }) =
|
|
|
16
16
|
const toggleNode = () => {
|
|
17
17
|
treeApi.toggleNode(node.id);
|
|
18
18
|
};
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
const Label = LabelComponent ? (LabelComponent === null || LabelComponent === void 0 ? void 0 : LabelComponent({ node, isLeaf: !children })) : (React.createElement("span", { tabIndex: !children ? 0 : -1, className: classnames(cssClasses[TREE_NODE_CSS_CLASSES.treeNodeLabelContent], TREE_NODE_CSS_CLASSES.treeNodeLabelContent) }, node.label ? node.label : node.id));
|
|
20
|
+
const Content = ContentComponent ? (ContentComponent === null || ContentComponent === void 0 ? void 0 : ContentComponent({ node, toggleNode, isLeaf: !children })) : (React.createElement("div", { className: classnames(TREE_NODE_CSS_CLASSES.treeNodeLabel, cssClasses[TREE_NODE_CSS_CLASSES.treeNodeLabel]) },
|
|
21
|
+
React.createElement("button", { className: classnames(TREE_NODE_CSS_CLASSES.treeNodeTogglerBtn, cssClasses[TREE_NODE_CSS_CLASSES.treeNodeTogglerBtn], {
|
|
22
|
+
[TREE_NODE_CSS_CLASSES.treeNodeTogglerBtnExpanded]: node.expanded,
|
|
23
|
+
[cssClasses[TREE_NODE_CSS_CLASSES.treeNodeTogglerBtnExpanded]]: node.expanded
|
|
24
|
+
}), onClick: toggleNode },
|
|
25
|
+
React.createElement("span", { className: classnames(cssClasses[TREE_NODE_CSS_CLASSES.treeNodeTogglerBtnIcon], TREE_NODE_CSS_CLASSES.treeNodeTogglerBtnIcon) },
|
|
26
|
+
React.createElement(IconListArrowDown, null))),
|
|
27
|
+
Label));
|
|
28
|
+
return (React.createElement("li", { role: "treeitem", "aria-expanded": node.expanded, className: classnames(cssClasses[TREE_NODE_CSS_CLASSES.treeNode], TREE_NODE_CSS_CLASSES.treeNode, cssClassNames, {
|
|
29
|
+
[TREE_NODE_CSS_CLASSES.treeNodeExpanded]: node.expanded
|
|
22
30
|
}) },
|
|
23
|
-
|
|
24
|
-
React.createElement("span", { className: classnames(cssClasses[TREE_NODE_CSS_CLASSES.treeNodeTogglerIcon], TREE_NODE_CSS_CLASSES.treeNodeTogglerIcon) },
|
|
25
|
-
React.createElement(IconListArrowDown, null)),
|
|
26
|
-
LabelComponent ? (LabelComponent) : (React.createElement("span", { className: classnames(cssClasses[TREE_NODE_CSS_CLASSES.treeNodeTogglerLabel], TREE_NODE_CSS_CLASSES.treeNodeTogglerLabel) }, node.label ? node.label : node.id)))),
|
|
31
|
+
children ? Content : Label,
|
|
27
32
|
children ? (React.createElement(CSSTransition, { unmountOnExit: true, in: node.expanded, timeout: 250, classNames: {
|
|
28
33
|
enter: cssClasses[TREE_NODE_CSS_CLASSES.treeNodeChildrenEnter],
|
|
29
34
|
enterActive: cssClasses[TREE_NODE_CSS_CLASSES.treeNodeChildrenEnterActive],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -7,6 +7,7 @@ export declare type ITreeNode = {
|
|
|
7
7
|
};
|
|
8
8
|
export interface ITreeContext {
|
|
9
9
|
addNode(node: ITreeNode): void;
|
|
10
|
+
updateNode(nodeId: string, node: Partial<ITreeNode>): void;
|
|
10
11
|
hasNode(nodeId: string): boolean;
|
|
11
12
|
getNode(nodeId: string): ITreeNode | undefined;
|
|
12
13
|
removeNode(nodeId: string): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -7,6 +7,9 @@ const TreeProvider = ({ children }) => {
|
|
|
7
7
|
addNode(node) {
|
|
8
8
|
setNodes((nodes) => [...nodes, node]);
|
|
9
9
|
},
|
|
10
|
+
updateNode(nodeId, node) {
|
|
11
|
+
setNodes((nodes) => nodes.map((n) => (n.id === nodeId ? { ...n, ...node } : n)));
|
|
12
|
+
},
|
|
10
13
|
getNode(nodeId) {
|
|
11
14
|
return nodes.find((node) => node.id === nodeId);
|
|
12
15
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -4,9 +4,11 @@ export declare const TREE_CSS_CLASSES: {
|
|
|
4
4
|
};
|
|
5
5
|
export declare const TREE_NODE_CSS_CLASSES: {
|
|
6
6
|
readonly treeNode: "tree-node";
|
|
7
|
-
readonly
|
|
8
|
-
readonly
|
|
9
|
-
readonly
|
|
7
|
+
readonly treeNodeTogglerBtn: "tree-node__toggler-btn";
|
|
8
|
+
readonly treeNodeTogglerBtnExpanded: "tree-node__toggler-btn_expanded";
|
|
9
|
+
readonly treeNodeTogglerBtnIcon: "tree-node__toggler-btn-icon";
|
|
10
|
+
readonly treeNodeLabelContent: "tree-node__label-content";
|
|
11
|
+
readonly treeNodeLabel: "tree-node__label";
|
|
10
12
|
readonly treeNodeChildren: "tree-node__children";
|
|
11
13
|
readonly treeNodeChildrenEnter: "tree-node__children-enter";
|
|
12
14
|
readonly treeNodeChildrenEnterActive: "tree-node__children-enter-active";
|
|
@@ -6,9 +6,11 @@ const TREE_CSS_CLASSES = {
|
|
|
6
6
|
const treeNodeBaseCssClass = `tree-node`;
|
|
7
7
|
const TREE_NODE_CSS_CLASSES = {
|
|
8
8
|
treeNode: treeNodeBaseCssClass,
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
treeNodeTogglerBtn: `${treeNodeBaseCssClass}__toggler-btn`,
|
|
10
|
+
treeNodeTogglerBtnExpanded: `${treeNodeBaseCssClass}__toggler-btn_expanded`,
|
|
11
|
+
treeNodeTogglerBtnIcon: `${treeNodeBaseCssClass}__toggler-btn-icon`,
|
|
12
|
+
treeNodeLabelContent: `${treeNodeBaseCssClass}__label-content`,
|
|
13
|
+
treeNodeLabel: `${treeNodeBaseCssClass}__label`,
|
|
12
14
|
treeNodeChildren: `${treeNodeBaseCssClass}__children`,
|
|
13
15
|
treeNodeChildrenEnter: `${treeNodeBaseCssClass}__children-enter`,
|
|
14
16
|
treeNodeChildrenEnterActive: `${treeNodeBaseCssClass}__children-enter-active`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -3,9 +3,13 @@ import { useTree } from './tree_hook.js';
|
|
|
3
3
|
|
|
4
4
|
const useTreeNode = (nodeId, props) => {
|
|
5
5
|
const treeApi = useTree();
|
|
6
|
+
useEffect(() => {
|
|
7
|
+
if (treeApi.hasNode(nodeId) && props)
|
|
8
|
+
treeApi.updateNode(nodeId, props);
|
|
9
|
+
}, [props === null || props === void 0 ? void 0 : props.expanded]);
|
|
6
10
|
useEffect(() => {
|
|
7
11
|
if (!treeApi.hasNode(nodeId))
|
|
8
|
-
treeApi.addNode({
|
|
12
|
+
treeApi.addNode({ id: nodeId, ...props });
|
|
9
13
|
return () => treeApi.removeNode(nodeId);
|
|
10
14
|
}, []);
|
|
11
15
|
return treeApi.getNode(nodeId);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,3 +1,6 @@
|
|
|
1
1
|
import { TPropsWithChildren } from "../../typings/general";
|
|
2
|
-
|
|
2
|
+
declare type TTreeProps = {
|
|
3
|
+
cssClassNames?: string;
|
|
4
|
+
};
|
|
5
|
+
export declare const Tree: ({ children, cssClassNames }: TPropsWithChildren<TTreeProps>) => JSX.Element;
|
|
3
6
|
export default Tree;
|
|
@@ -4,9 +4,9 @@ import { TreeProvider } from './context/tree_provider.js';
|
|
|
4
4
|
import { TREE_CSS_CLASSES } from './css_classes.js';
|
|
5
5
|
import cssClasses from '../../css/tree/main.module.less.js';
|
|
6
6
|
|
|
7
|
-
const Tree = ({ children }) => {
|
|
7
|
+
const Tree = ({ children, cssClassNames }) => {
|
|
8
8
|
return (React.createElement(TreeProvider, null,
|
|
9
|
-
React.createElement("ul", { className: classnames(cssClasses[TREE_CSS_CLASSES.tree], TREE_CSS_CLASSES.tree) }, children)));
|
|
9
|
+
React.createElement("ul", { className: classnames(cssClasses[TREE_CSS_CLASSES.tree], TREE_CSS_CLASSES.tree, cssClassNames) }, children)));
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
export default Tree;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".main-module_tree__3D4e3 {\n list-style: none;\n
|
|
4
|
-
var cssClasses = {"tree":"main-module_tree__3D4e3","tree-
|
|
3
|
+
var css_248z = ".main-module_tree__3D4e3 {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.main-module_tree-node__toggler-btn__s9KoL {\n display: flex;\n padding: 0 4px 8px 4px;\n cursor: pointer;\n}\n.main-module_tree-node__toggler-btn__s9KoL svg {\n transition: rotate 250ms ease-out;\n rotate: -95deg;\n}\n.main-module_tree-node__toggler-btn_expanded__17Joe svg {\n rotate: 0deg;\n}\n.main-module_tree-node__label__DT728 {\n display: flex;\n align-items: center;\n background: none;\n gap: 8px;\n}\n.main-module_tree-node__children__QyEOR {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-top: 8px;\n transform-origin: top center;\n transition: opacity 250ms ease-out, scale 250ms ease-out;\n padding-left: 16px;\n list-style: none;\n will-change: true;\n}\n.main-module_tree-node__children-enter__vxFO- {\n opacity: 0;\n scale: 1 0;\n}\n.main-module_tree-node__children-enter-active__T6XIS {\n opacity: 1;\n scale: 1 1;\n}\n.main-module_tree-node__children-exit__1NXHe {\n opacity: 1;\n scale: 1 1;\n}\n.main-module_tree-node__children-exit-active__vdqAI {\n opacity: 0;\n scale: 1 0;\n}\n";
|
|
4
|
+
var cssClasses = {"tree":"main-module_tree__3D4e3","tree-node__toggler-btn":"main-module_tree-node__toggler-btn__s9KoL","tree-node__toggler-btn_expanded":"main-module_tree-node__toggler-btn_expanded__17Joe","tree-node__label":"main-module_tree-node__label__DT728","tree-node__children":"main-module_tree-node__children__QyEOR","tree-node__children-enter":"main-module_tree-node__children-enter__vxFO-","tree-node__children-enter-active":"main-module_tree-node__children-enter-active__T6XIS","tree-node__children-exit":"main-module_tree-node__children-exit__1NXHe","tree-node__children-exit-active":"main-module_tree-node__children-exit-active__vdqAI"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export default cssClasses;
|