@shoplflow/base 0.27.0 → 0.27.1

package/dist/index.d.cts

@@ -948,7 +948,7 @@ interface TreeItemOptionProps extends ChildrenProps, LeftElementProps, RightElem
 declare const TREE_SYMBOL_KEY: unique symbol;
 
 declare const Tree: {
-    ({ children, ...rest }: TreeProps): react_jsx_runtime.JSX.Element;
+    ({ children, ...rest }: TreeProps): react_jsx_runtime.JSX.Element | null;
     Item: ({ children, label, leftSource, rightSource, depth, initialIsOpen, isOpen, ...rest }: TreeItemProps) => react_jsx_runtime.JSX.Element;
 };
 declare const TreeItem: ({ children, label, leftSource, rightSource, depth, initialIsOpen, isOpen, ...rest }: TreeItemProps) => react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -948,7 +948,7 @@ interface TreeItemOptionProps extends ChildrenProps, LeftElementProps, RightElem
 declare const TREE_SYMBOL_KEY: unique symbol;
 
 declare const Tree: {
-    ({ children, ...rest }: TreeProps): react_jsx_runtime.JSX.Element;
+    ({ children, ...rest }: TreeProps): react_jsx_runtime.JSX.Element | null;
     Item: ({ children, label, leftSource, rightSource, depth, initialIsOpen, isOpen, ...rest }: TreeItemProps) => react_jsx_runtime.JSX.Element;
 };
 declare const TreeItem: ({ children, label, leftSource, rightSource, depth, initialIsOpen, isOpen, ...rest }: TreeItemProps) => react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -1,7 +1,7 @@
 import * as React3 from 'react';
 import React3__default, { forwardRef, useRef, useState, useCallback, useEffect, createContext, useId, useContext, useMemo, createElement } from 'react';
 import styled6 from '@emotion/styled';
-import { motion, AnimatePresence, m, LayoutGroup, LazyMotion, domAnimation } from 'framer-motion';
+import { motion, AnimatePresence, LayoutGroup, LazyMotion, domAnimation } from 'framer-motion';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { css } from '@emotion/react';
@@ -2810,7 +2810,7 @@ var StyledTree = styled6(motion.ul)`
   flex-direction: column;
   width: 100%;
 `;
-var StyledTreeItem = styled6(m.li)`
+var StyledTreeItem = styled6(motion.li)`
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -2840,7 +2840,7 @@ var RightElementWrapper = styled6.div`
   flex-direction: row;
   align-items: center;
 `;
-var IconWrapper = styled6(m.div)`
+var IconWrapper = styled6(motion.div)`
   display: flex;
   width: fit-content;
   height: fit-content;
@@ -2857,7 +2857,14 @@ var AnimateKey = {
 };
 var Tree = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx(StyledTree, __spreadProps(__spreadValues({}, rest), { "data-shoplflow": "Tree", layout: true, layoutRoot: true, children: /* @__PURE__ */ jsx(LayoutGroup, { children }) }));
+  const [isMounted, setIsMounted] = React3__default.useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  if (!isMounted) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(StyledTree, __spreadProps(__spreadValues({}, rest), { "data-shoplflow": "Tree", layout: true, layoutRoot: true, children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "sync", children }) }) }));
 };
 var TreeItem = (_a) => {
   var _b = _a, {
@@ -2897,8 +2904,8 @@ var TreeItem = (_a) => {
       setIsOpened(isOpen);
     }
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs(AnimatePresence, { mode: "sync", children: [
-    /* @__PURE__ */ createElement(StyledTreeItem, __spreadValues(__spreadProps(__spreadValues({ depth }, AnimateKey), { variants: fadeInOut, layout: true, key: String(label) }), rest), /* @__PURE__ */ jsxs(LeftElementWrapper, { children: [
+  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(Text_default, { typography: "body1_400", lineClamp: 1, children: label })
     ] }), /* @__PURE__ */ jsxs(RightElementWrapper, { children: [
@@ -2916,7 +2923,7 @@ var TreeItem = (_a) => {
         }
       ) })
     ] })),
-    isOpened && children && /* @__PURE__ */ jsx(m.div, __spreadProps(__spreadValues({ layout: true }, AnimateKey), { variants: fadeInOut, children: CloneChildren }), "children" + String(CloneChildren))
+    /* @__PURE__ */ jsx(AnimatePresence, { mode: "sync", children: isOpened && children && /* @__PURE__ */ jsx(motion.div, __spreadProps(__spreadValues({ layout: true }, AnimateKey), { variants: fadeInOut, children: CloneChildren }), "children" + String(CloneChildren)) })
   ] });
 };
 TreeItem[TREE_SYMBOL_KEY] = true;