@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.
Files changed (43) hide show
  1. package/build/cjs/packages/aurora/src/components/dropdown/components/custom_label.js +3 -1
  2. package/build/cjs/packages/aurora/src/components/dropdown/components/custom_label.js.map +1 -1
  3. package/build/cjs/packages/aurora/src/components/dropdown/hooks/use_keyboard_open_close.js +1 -0
  4. package/build/cjs/packages/aurora/src/components/dropdown/hooks/use_keyboard_open_close.js.map +1 -1
  5. package/build/cjs/packages/aurora/src/components/stack/index.js +15 -2
  6. package/build/cjs/packages/aurora/src/components/stack/index.js.map +1 -1
  7. package/build/cjs/packages/aurora/src/components/tree/components/tree_node.js +13 -8
  8. package/build/cjs/packages/aurora/src/components/tree/components/tree_node.js.map +1 -1
  9. package/build/cjs/packages/aurora/src/components/tree/context/tree_context.js +1 -0
  10. package/build/cjs/packages/aurora/src/components/tree/context/tree_context.js.map +1 -1
  11. package/build/cjs/packages/aurora/src/components/tree/context/tree_provider.js +3 -0
  12. package/build/cjs/packages/aurora/src/components/tree/context/tree_provider.js.map +1 -1
  13. package/build/cjs/packages/aurora/src/components/tree/css_classes.js +5 -3
  14. package/build/cjs/packages/aurora/src/components/tree/css_classes.js.map +1 -1
  15. package/build/cjs/packages/aurora/src/components/tree/hooks/tree_node_hook.js +5 -1
  16. package/build/cjs/packages/aurora/src/components/tree/hooks/tree_node_hook.js.map +1 -1
  17. package/build/cjs/packages/aurora/src/components/tree/index.js +2 -2
  18. package/build/cjs/packages/aurora/src/css/tree/main.module.less.js +2 -2
  19. package/build/esm/packages/aurora/src/components/dropdown/components/custom_label.js +3 -1
  20. package/build/esm/packages/aurora/src/components/dropdown/components/custom_label.js.map +1 -1
  21. package/build/esm/packages/aurora/src/components/dropdown/hooks/use_keyboard_open_close.d.ts +1 -0
  22. package/build/esm/packages/aurora/src/components/dropdown/hooks/use_keyboard_open_close.js +1 -0
  23. package/build/esm/packages/aurora/src/components/dropdown/hooks/use_keyboard_open_close.js.map +1 -1
  24. package/build/esm/packages/aurora/src/components/stack/index.js +16 -3
  25. package/build/esm/packages/aurora/src/components/stack/index.js.map +1 -1
  26. package/build/esm/packages/aurora/src/components/stack/stack_types.d.ts +4 -0
  27. package/build/esm/packages/aurora/src/components/tree/components/tree_node.d.ts +13 -3
  28. package/build/esm/packages/aurora/src/components/tree/components/tree_node.js +13 -8
  29. package/build/esm/packages/aurora/src/components/tree/components/tree_node.js.map +1 -1
  30. package/build/esm/packages/aurora/src/components/tree/context/tree_context.d.ts +1 -0
  31. package/build/esm/packages/aurora/src/components/tree/context/tree_context.js +1 -0
  32. package/build/esm/packages/aurora/src/components/tree/context/tree_context.js.map +1 -1
  33. package/build/esm/packages/aurora/src/components/tree/context/tree_provider.js +3 -0
  34. package/build/esm/packages/aurora/src/components/tree/context/tree_provider.js.map +1 -1
  35. package/build/esm/packages/aurora/src/components/tree/css_classes.d.ts +5 -3
  36. package/build/esm/packages/aurora/src/components/tree/css_classes.js +5 -3
  37. package/build/esm/packages/aurora/src/components/tree/css_classes.js.map +1 -1
  38. package/build/esm/packages/aurora/src/components/tree/hooks/tree_node_hook.js +5 -1
  39. package/build/esm/packages/aurora/src/components/tree/hooks/tree_node_hook.js.map +1 -1
  40. package/build/esm/packages/aurora/src/components/tree/index.d.ts +4 -1
  41. package/build/esm/packages/aurora/src/components/tree/index.js +2 -2
  42. package/build/esm/packages/aurora/src/css/tree/main.module.less.js +2 -2
  43. 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
@@ -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
- return (React__default['default'].createElement("li", { className: classnames__default['default'](main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNode], css_classes.TREE_NODE_CSS_CLASSES.treeNode, {
29
- [css_classes.TREE_NODE_CSS_CLASSES.treeNodeExpanded]: node.expanded,
30
- [main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeExpanded]]: node.expanded
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
- ContentComponent ? null : (React__default['default'].createElement("button", { onClick: toggleNode, className: classnames__default['default'](css_classes.TREE_NODE_CSS_CLASSES.treeNodeToggler, main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeToggler]) },
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;"}
@@ -6,6 +6,7 @@ var React = require('react');
6
6
 
7
7
  const TreeContext = React.createContext({
8
8
  addNode: () => { },
9
+ updateNode: () => { },
9
10
  removeNode: () => { },
10
11
  toggleNode: () => { },
11
12
  getNode: () => undefined,
@@ -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
- treeNodeToggler: `${treeNodeBaseCssClass}__toggler`,
14
- treeNodeTogglerIcon: `${treeNodeBaseCssClass}__toggler-icon`,
15
- treeNodeTogglerLabel: `${treeNodeBaseCssClass}__toggler-label`,
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({ ...props, id: nodeId });
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}\n.main-module_tree-node_expanded__2NInq .main-module_tree-node__toggler-icon__3QR9X svg {\n rotate: 0deg;\n}\n.main-module_tree-node__toggler__Bhwx9 {\n display: flex;\n align-items: center;\n background: none;\n}\n.main-module_tree-node__toggler-icon__3QR9X {\n display: flex;\n align-items: center;\n}\n.main-module_tree-node__toggler-icon__3QR9X svg {\n transition: rotate 250ms ease-out;\n rotate: -95deg;\n}\n.main-module_tree-node__children__QyEOR {\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_expanded":"main-module_tree-node_expanded__2NInq","tree-node__toggler-icon":"main-module_tree-node__toggler-icon__3QR9X","tree-node__toggler":"main-module_tree-node__toggler__Bhwx9","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"};
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;"}
@@ -1,2 +1,3 @@
1
1
  import { RefObject } from 'react';
2
2
  export declare const useKeyboardOpenClose: (toggleDropdown?: () => void, isOpen?: boolean, ref?: RefObject<HTMLElement>) => void;
3
+ export default useKeyboardOpenClose;
@@ -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
@@ -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
- return (React.createElement("li", { className: classnames(cssClasses[TREE_NODE_CSS_CLASSES.treeNode], TREE_NODE_CSS_CLASSES.treeNode, {
20
- [TREE_NODE_CSS_CLASSES.treeNodeExpanded]: node.expanded,
21
- [cssClasses[TREE_NODE_CSS_CLASSES.treeNodeExpanded]]: node.expanded
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
- ContentComponent ? null : (React.createElement("button", { onClick: toggleNode, className: classnames(TREE_NODE_CSS_CLASSES.treeNodeToggler, cssClasses[TREE_NODE_CSS_CLASSES.treeNodeToggler]) },
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;
@@ -2,6 +2,7 @@ import { createContext } from 'react';
2
2
 
3
3
  const TreeContext = createContext({
4
4
  addNode: () => { },
5
+ updateNode: () => { },
5
6
  removeNode: () => { },
6
7
  toggleNode: () => { },
7
8
  getNode: () => undefined,
@@ -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 treeNodeToggler: "tree-node__toggler";
8
- readonly treeNodeTogglerIcon: "tree-node__toggler-icon";
9
- readonly treeNodeTogglerLabel: "tree-node__toggler-label";
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
- treeNodeToggler: `${treeNodeBaseCssClass}__toggler`,
10
- treeNodeTogglerIcon: `${treeNodeBaseCssClass}__toggler-icon`,
11
- treeNodeTogglerLabel: `${treeNodeBaseCssClass}__toggler-label`,
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({ ...props, id: nodeId });
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
- export declare const Tree: ({ children }: TPropsWithChildren) => JSX.Element;
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}\n.main-module_tree-node_expanded__2NInq .main-module_tree-node__toggler-icon__3QR9X svg {\n rotate: 0deg;\n}\n.main-module_tree-node__toggler__Bhwx9 {\n display: flex;\n align-items: center;\n background: none;\n}\n.main-module_tree-node__toggler-icon__3QR9X {\n display: flex;\n align-items: center;\n}\n.main-module_tree-node__toggler-icon__3QR9X svg {\n transition: rotate 250ms ease-out;\n rotate: -95deg;\n}\n.main-module_tree-node__children__QyEOR {\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_expanded":"main-module_tree-node_expanded__2NInq","tree-node__toggler-icon":"main-module_tree-node__toggler-icon__3QR9X","tree-node__toggler":"main-module_tree-node__toggler__Bhwx9","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"};
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;
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@dreamcommerce/aurora",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "2.9.0-1",
5
+ "version": "2.9.0-10",
6
6
  "description": "aurora",
7
7
  "author": "k0ssak",
8
8
  "license": "MIT",