@shoplflow/base 0.33.0 → 0.33.1

package/dist/index.cjs

@@ -3330,12 +3330,12 @@ var StyledTreeItem = styled6__default.default(framerMotion.motion.li)`
   gap: 4px;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 8px 8px 0;
+  padding: 8px 8px 8px 0px;
   border-radius: 8px;
   background: transparent;
   cursor: ${({ onClick }) => onClick ? "pointer" : "initial"};
   ${({ depth }) => depth && react$1.css`
-      padding-left: ${depth * 16}px;
+      padding-left: ${(depth - 1) * 24 + 12}px;
     `};
   &:hover {
     background: ${exports.colorTokens.neutral400_5};
@@ -3401,6 +3401,7 @@ exports.TreeItem = (_a) => {
     "onClick"
   ]);
   const [isOpened, setIsOpened] = React3__namespace.default.useState(initialIsOpen != null ? initialIsOpen : false);
+  const uniqueId = React3.useId();
   const CloneChildren = React3__namespace.default.Children.map(children, (child) => {
     if (!React3__namespace.default.isValidElement(child)) {
       return child;
@@ -3422,15 +3423,16 @@ exports.TreeItem = (_a) => {
     }
     return onClick(e);
   };
-  const LeftSourceClone = leftSource ? React3__namespace.default.cloneElement(leftSource, __spreadValues({
+  const LeftSourceClone = leftSource ? React3__namespace.default.cloneElement(leftSource, __spreadValues(__spreadValues({
     disabled,
     onClick
-  }, rest)) : leftSource;
+  }, rest), leftSource.props)) : leftSource;
   React3.useEffect(() => {
     if (isOpen !== void 0) {
       setIsOpened(isOpen);
     }
   }, [isOpen]);
+  const isLastTree = !children && depth > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ React3.createElement(
       StyledTreeItem,
@@ -3440,28 +3442,27 @@ exports.TreeItem = (_a) => {
         variants: fadeInOut
       }, AnimateKey), {
         layout: true,
-        key: String(label),
+        key: uniqueId,
         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(
+        children && !isLastTree && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { styleVar: "GHOST", onClick: handleToggle, sizeVar: "XS", children: /* @__PURE__ */ jsxRuntime.jsx(
           IconWrapper,
           {
             animate: {
-              rotate: isOpened ? 180 : 0,
+              rotate: isOpened ? 90 : 0,
               transition: {
                 duration: 0.2
               }
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.DownArrowIcon, sizeVar: "S", color: "neutral400" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.RightArrowSolidXsmallIcon, sizeVar: "XS", color: "neutral400" })
           }
-        ) })
-      ] })
+        ) }),
+        isLastTree && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "24px", height: "24px", visibility: "hidden" } }),
+        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.jsx(RightElementWrapper, { children: rightSource })
     ),
     /* @__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)) })
   ] });

package/dist/index.js

@@ -11,7 +11,7 @@ import { FloatingPortal, autoUpdate, offset, autoPlacement } from '@floating-ui/
 export { arrow, flip, hide, inline, offset, shift, size } from '@floating-ui/react';
 import { useFloating } from '@floating-ui/react-dom';
 import * as ShoplAssets from '@shoplflow/shopl-assets';
-import { DownArrowSolidXsmallIcon, DownArrowIcon, FirstPageIcon, LeftArrowIcon, RightArrowIcon, EndPageIcon } from '@shoplflow/shopl-assets';
+import { DownArrowSolidXsmallIcon, RightArrowSolidXsmallIcon, FirstPageIcon, LeftArrowIcon, RightArrowIcon, EndPageIcon } from '@shoplflow/shopl-assets';
 import { shift, flip, offset as offset$1 } from '@floating-ui/core';
 import * as HadaAssets from '@shoplflow/hada-assets';
 import DatePicker2 from 'react-datepicker';
@@ -3303,12 +3303,12 @@ var StyledTreeItem = styled6(motion.li)`
   gap: 4px;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 8px 8px 0;
+  padding: 8px 8px 8px 0px;
   border-radius: 8px;
   background: transparent;
   cursor: ${({ onClick }) => onClick ? "pointer" : "initial"};
   ${({ depth }) => depth && css`
-      padding-left: ${depth * 16}px;
+      padding-left: ${(depth - 1) * 24 + 12}px;
     `};
   &:hover {
     background: ${colorTokens.neutral400_5};
@@ -3374,6 +3374,7 @@ var TreeItem = (_a) => {
     "onClick"
   ]);
   const [isOpened, setIsOpened] = React3__default.useState(initialIsOpen != null ? initialIsOpen : false);
+  const uniqueId = useId();
   const CloneChildren = React3__default.Children.map(children, (child) => {
     if (!React3__default.isValidElement(child)) {
       return child;
@@ -3395,15 +3396,16 @@ var TreeItem = (_a) => {
     }
     return onClick(e);
   };
-  const LeftSourceClone = leftSource ? React3__default.cloneElement(leftSource, __spreadValues({
+  const LeftSourceClone = leftSource ? React3__default.cloneElement(leftSource, __spreadValues(__spreadValues({
     disabled,
     onClick
-  }, rest)) : leftSource;
+  }, rest), leftSource.props)) : leftSource;
   useEffect(() => {
     if (isOpen !== void 0) {
       setIsOpened(isOpen);
     }
   }, [isOpen]);
+  const isLastTree = !children && depth > 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ createElement(
       StyledTreeItem,
@@ -3413,28 +3415,27 @@ var TreeItem = (_a) => {
         variants: fadeInOut
       }, AnimateKey), {
         layout: true,
-        key: String(label),
+        key: uniqueId,
         onClick: handleClickTreeItem
       }), rest),
       /* @__PURE__ */ jsxs(LeftElementWrapper, { children: [
-        LeftSourceClone && LeftSourceClone,
-        /* @__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(
+        children && !isLastTree && /* @__PURE__ */ jsx(IconButton_default, { styleVar: "GHOST", onClick: handleToggle, sizeVar: "XS", children: /* @__PURE__ */ jsx(
           IconWrapper,
           {
             animate: {
-              rotate: isOpened ? 180 : 0,
+              rotate: isOpened ? 90 : 0,
               transition: {
                 duration: 0.2
               }
             },
-            children: /* @__PURE__ */ jsx(Icon_default, { iconSource: DownArrowIcon, sizeVar: "S", color: "neutral400" })
+            children: /* @__PURE__ */ jsx(Icon_default, { iconSource: RightArrowSolidXsmallIcon, sizeVar: "XS", color: "neutral400" })
           }
-        ) })
-      ] })
+        ) }),
+        isLastTree && /* @__PURE__ */ jsx("div", { style: { width: "24px", height: "24px", visibility: "hidden" } }),
+        LeftSourceClone && LeftSourceClone,
+        /* @__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__ */ jsx(RightElementWrapper, { children: rightSource })
     ),
     /* @__PURE__ */ jsx(AnimatePresence, { mode: "sync", children: isOpened && children && /* @__PURE__ */ jsx(motion.div, __spreadProps(__spreadValues({ layout: true }, AnimateKey), { variants: fadeInOut, children: CloneChildren }), "children" + String(CloneChildren)) })
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.33.0",
+  "version": "0.33.1",
   "type": "module",
   "license": "Apache-2.0",
   "main": "dist/index.js",
@@ -91,7 +91,7 @@
     "react-dom": "^18.2.0",
     "simplebar-react": "^3.2.6",
     "@shoplflow/hada-assets": "^0.1.3",
-    "@shoplflow/shopl-assets": "^0.12.0",
+    "@shoplflow/shopl-assets": "^0.12.1",
     "@shoplflow/utils": "^0.6.5"
   },
   "scripts": {