@shoplflow/base 0.28.5 → 0.30.0

package/dist/index.cjs

@@ -2839,16 +2839,17 @@ var StyledTreeItem = styled6__default.default(framerMotion.motion.li)`
   gap: 4px;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 0;
+  padding: 8px 8px 8px 0;
   border-radius: 8px;
   background: transparent;
-  cursor: initial;
+  cursor: ${({ onClick }) => onClick ? "pointer" : "initial"};
   ${({ depth }) => depth && react$1.css`
       padding-left: ${depth * 16}px;
     `};
   &:hover {
     background: ${exports.colorTokens.neutral400_5};
   }
+  ${({ disabled }) => disabled && getDisabledStyle(disabled)}
 `;
 var LeftElementWrapper = styled6__default.default.div`
   display: flex;
@@ -2894,7 +2895,9 @@ exports.TreeItem = (_a) => {
     rightSource,
     depth = 0,
     initialIsOpen,
-    isOpen
+    isOpen,
+    disabled = false,
+    onClick
   } = _b, rest = __objRest(_b, [
     "children",
     "label",
@@ -2902,7 +2905,9 @@ exports.TreeItem = (_a) => {
     "rightSource",
     "depth",
     "initialIsOpen",
-    "isOpen"
+    "isOpen",
+    "disabled",
+    "onClick"
   ]);
   const [isOpened, setIsOpened] = React3__namespace.default.useState(initialIsOpen != null ? initialIsOpen : false);
   const CloneChildren = React3__namespace.default.Children.map(children, (child) => {
@@ -2916,33 +2921,57 @@ exports.TreeItem = (_a) => {
     }
     return child;
   });
-  const handleToggle = () => {
+  const handleToggle = (e) => {
+    e.stopPropagation();
     setIsOpened((prev) => !prev);
   };
+  const handleClickTreeItem = (e) => {
+    if (disabled || !onClick) {
+      return;
+    }
+    return onClick(e);
+  };
+  const LeftSourceClone = leftSource ? React3__namespace.default.cloneElement(leftSource, __spreadValues({
+    disabled,
+    onClick
+  }, rest)) : leftSource;
   React3.useEffect(() => {
     if (isOpen !== void 0) {
       setIsOpened(isOpen);
     }
   }, [isOpen]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ React3.createElement(StyledTreeItem, __spreadValues(__spreadProps(__spreadValues({ depth, variants: fadeInOut }, AnimateKey), { layout: true, key: String(label) }), rest), /* @__PURE__ */ jsxRuntime.jsxs(LeftElementWrapper, { children: [
-      leftSource,
-      /* @__PURE__ */ jsxRuntime.jsx(exports.StackContainer, { padding: "0 0 0 4px", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", lineClamp: 1, children: label }) })
-    ] }), /* @__PURE__ */ jsxRuntime.jsxs(RightElementWrapper, { children: [
-      rightSource,
-      children && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { styleVar: "GHOST", onClick: handleToggle, children: /* @__PURE__ */ jsxRuntime.jsx(
-        IconWrapper,
-        {
-          animate: {
-            rotate: isOpened ? 180 : 0,
-            transition: {
-              duration: 0.2
-            }
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.DownArrowIcon, sizeVar: "S" })
-        }
-      ) })
-    ] })),
+    /* @__PURE__ */ React3.createElement(
+      StyledTreeItem,
+      __spreadValues(__spreadProps(__spreadValues({
+        disabled,
+        depth,
+        variants: fadeInOut
+      }, AnimateKey), {
+        layout: true,
+        key: String(label),
+        onClick: handleClickTreeItem
+      }), rest),
+      /* @__PURE__ */ jsxRuntime.jsxs(LeftElementWrapper, { children: [
+        LeftSourceClone && LeftSourceClone,
+        /* @__PURE__ */ jsxRuntime.jsx(exports.StackContainer, { padding: "0 0 0 4px", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", lineClamp: 1, color: disabled ? "neutral350" : "neutral700", children: label }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(RightElementWrapper, { children: [
+        rightSource,
+        children && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { styleVar: "GHOST", onClick: handleToggle, sizeVar: "S", children: /* @__PURE__ */ jsxRuntime.jsx(
+          IconWrapper,
+          {
+            animate: {
+              rotate: isOpened ? 180 : 0,
+              transition: {
+                duration: 0.2
+              }
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.DownArrowIcon, sizeVar: "S", color: "neutral400" })
+          }
+        ) })
+      ] })
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "sync", children: isOpened && children && /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, __spreadProps(__spreadValues({ layout: true }, AnimateKey), { variants: fadeInOut, children: CloneChildren }), "children" + String(CloneChildren)) })
   ] });
 };