@shoplflow/base 0.28.5 → 0.29.0

package/dist/index.d.cts

@@ -945,14 +945,15 @@ interface TreeItemOptionProps extends ChildrenProps, LeftElementProps, RightElem
      * 트리아이템을 직접 조작할 때 사용합니다.
      */
     isOpen?: boolean;
+    disabled?: boolean;
 }
 declare const TREE_SYMBOL_KEY: unique symbol;
 
 declare const Tree: {
     ({ children, ...rest }: TreeProps): react_jsx_runtime.JSX.Element | null;
-    Item: ({ children, label, leftSource, rightSource, depth, initialIsOpen, isOpen, ...rest }: TreeItemProps) => react_jsx_runtime.JSX.Element;
+    Item: ({ children, label, leftSource, rightSource, depth, initialIsOpen, isOpen, disabled, ...rest }: TreeItemProps) => react_jsx_runtime.JSX.Element;
 };
-declare const TreeItem: ({ children, label, leftSource, rightSource, depth, initialIsOpen, isOpen, ...rest }: TreeItemProps) => react_jsx_runtime.JSX.Element;
+declare const TreeItem: ({ children, label, leftSource, rightSource, depth, initialIsOpen, isOpen, disabled, ...rest }: TreeItemProps) => react_jsx_runtime.JSX.Element;
 
 declare const IconSizeVariants: {
     readonly XS: "XS";

package/dist/index.d.ts

@@ -945,14 +945,15 @@ interface TreeItemOptionProps extends ChildrenProps, LeftElementProps, RightElem
      * 트리아이템을 직접 조작할 때 사용합니다.
      */
     isOpen?: boolean;
+    disabled?: boolean;
 }
 declare const TREE_SYMBOL_KEY: unique symbol;
 
 declare const Tree: {
     ({ children, ...rest }: TreeProps): react_jsx_runtime.JSX.Element | null;
-    Item: ({ children, label, leftSource, rightSource, depth, initialIsOpen, isOpen, ...rest }: TreeItemProps) => react_jsx_runtime.JSX.Element;
+    Item: ({ children, label, leftSource, rightSource, depth, initialIsOpen, isOpen, disabled, ...rest }: TreeItemProps) => react_jsx_runtime.JSX.Element;
 };
-declare const TreeItem: ({ children, label, leftSource, rightSource, depth, initialIsOpen, isOpen, ...rest }: TreeItemProps) => react_jsx_runtime.JSX.Element;
+declare const TreeItem: ({ children, label, leftSource, rightSource, depth, initialIsOpen, isOpen, disabled, ...rest }: TreeItemProps) => react_jsx_runtime.JSX.Element;
 
 declare const IconSizeVariants: {
     readonly XS: "XS";

package/dist/index.js

@@ -2814,16 +2814,17 @@ var StyledTreeItem = styled6(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 && css`
       padding-left: ${depth * 16}px;
     `};
   &:hover {
     background: ${colorTokens.neutral400_5};
   }
+  ${({ disabled }) => disabled && getDisabledStyle(disabled)}
 `;
 var LeftElementWrapper = styled6.div`
   display: flex;
@@ -2869,7 +2870,8 @@ var TreeItem = (_a) => {
     rightSource,
     depth = 0,
     initialIsOpen,
-    isOpen
+    isOpen,
+    disabled = false
   } = _b, rest = __objRest(_b, [
     "children",
     "label",
@@ -2877,7 +2879,8 @@ var TreeItem = (_a) => {
     "rightSource",
     "depth",
     "initialIsOpen",
-    "isOpen"
+    "isOpen",
+    "disabled"
   ]);
   const [isOpened, setIsOpened] = React3__default.useState(initialIsOpen != null ? initialIsOpen : false);
   const CloneChildren = React3__default.Children.map(children, (child) => {
@@ -2891,7 +2894,8 @@ var TreeItem = (_a) => {
     }
     return child;
   });
-  const handleToggle = () => {
+  const handleToggle = (e) => {
+    e.stopPropagation();
     setIsOpened((prev) => !prev);
   };
   useEffect(() => {
@@ -2900,24 +2904,36 @@ var TreeItem = (_a) => {
     }
   }, [isOpen]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ createElement(StyledTreeItem, __spreadValues(__spreadProps(__spreadValues({ depth, variants: fadeInOut }, AnimateKey), { layout: true, key: String(label) }), rest), /* @__PURE__ */ jsxs(LeftElementWrapper, { children: [
-      leftSource,
-      /* @__PURE__ */ jsx(StackContainer_default, { padding: "0 0 0 4px", children: /* @__PURE__ */ jsx(Text_default, { typography: "body1_400", lineClamp: 1, children: label }) })
-    ] }), /* @__PURE__ */ jsxs(RightElementWrapper, { children: [
-      rightSource,
-      children && /* @__PURE__ */ jsx(IconButton_default, { styleVar: "GHOST", onClick: handleToggle, children: /* @__PURE__ */ jsx(
-        IconWrapper,
-        {
-          animate: {
-            rotate: isOpened ? 180 : 0,
-            transition: {
-              duration: 0.2
-            }
-          },
-          children: /* @__PURE__ */ jsx(Icon_default, { iconSource: DownArrowIcon, sizeVar: "S" })
-        }
-      ) })
-    ] })),
+    /* @__PURE__ */ createElement(
+      StyledTreeItem,
+      __spreadValues(__spreadProps(__spreadValues({
+        disabled,
+        depth,
+        variants: fadeInOut
+      }, AnimateKey), {
+        layout: true,
+        key: String(label)
+      }), rest),
+      /* @__PURE__ */ jsxs(LeftElementWrapper, { children: [
+        leftSource,
+        /* @__PURE__ */ jsx(StackContainer_default, { padding: "0 0 0 4px", children: /* @__PURE__ */ jsx(Text_default, { typography: "body1_400", lineClamp: 1, color: disabled ? "neutral350" : "neutral700", children: label }) })
+      ] }),
+      /* @__PURE__ */ jsxs(RightElementWrapper, { children: [
+        rightSource,
+        children && /* @__PURE__ */ jsx(IconButton_default, { styleVar: "GHOST", onClick: handleToggle, sizeVar: "S", children: /* @__PURE__ */ jsx(
+          IconWrapper,
+          {
+            animate: {
+              rotate: isOpened ? 180 : 0,
+              transition: {
+                duration: 0.2
+              }
+            },
+            children: /* @__PURE__ */ jsx(Icon_default, { iconSource: DownArrowIcon, sizeVar: "S", color: "neutral400" })
+          }
+        ) })
+      ] })
+    ),
     /* @__PURE__ */ jsx(AnimatePresence, { mode: "sync", children: isOpened && children && /* @__PURE__ */ jsx(motion.div, __spreadProps(__spreadValues({ layout: true }, AnimateKey), { variants: fadeInOut, children: CloneChildren }), "children" + String(CloneChildren)) })
   ] });
 };