@shoplflow/base 0.27.0 → 0.27.1
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.
- package/dist/index.cjs +13 -6
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +14 -7
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/dist/index.cjs
CHANGED
|
@@ -2835,7 +2835,7 @@ var StyledTree = styled6__default.default(framerMotion.motion.ul)`
|
|
|
2835
2835
|
flex-direction: column;
|
|
2836
2836
|
width: 100%;
|
|
2837
2837
|
`;
|
|
2838
|
-
var StyledTreeItem = styled6__default.default(framerMotion.
|
|
2838
|
+
var StyledTreeItem = styled6__default.default(framerMotion.motion.li)`
|
|
2839
2839
|
display: flex;
|
|
2840
2840
|
flex-direction: row;
|
|
2841
2841
|
width: 100%;
|
|
@@ -2865,7 +2865,7 @@ var RightElementWrapper = styled6__default.default.div`
|
|
|
2865
2865
|
flex-direction: row;
|
|
2866
2866
|
align-items: center;
|
|
2867
2867
|
`;
|
|
2868
|
-
var IconWrapper = styled6__default.default(framerMotion.
|
|
2868
|
+
var IconWrapper = styled6__default.default(framerMotion.motion.div)`
|
|
2869
2869
|
display: flex;
|
|
2870
2870
|
width: fit-content;
|
|
2871
2871
|
height: fit-content;
|
|
@@ -2882,7 +2882,14 @@ var AnimateKey = {
|
|
|
2882
2882
|
};
|
|
2883
2883
|
var Tree = (_a) => {
|
|
2884
2884
|
var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
|
|
2885
|
-
|
|
2885
|
+
const [isMounted, setIsMounted] = React3__namespace.default.useState(false);
|
|
2886
|
+
React3.useEffect(() => {
|
|
2887
|
+
setIsMounted(true);
|
|
2888
|
+
}, []);
|
|
2889
|
+
if (!isMounted) {
|
|
2890
|
+
return null;
|
|
2891
|
+
}
|
|
2892
|
+
return /* @__PURE__ */ jsxRuntime.jsx(StyledTree, __spreadProps(__spreadValues({}, rest), { "data-shoplflow": "Tree", layout: true, layoutRoot: true, children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.LayoutGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "sync", children }) }) }));
|
|
2886
2893
|
};
|
|
2887
2894
|
exports.TreeItem = (_a) => {
|
|
2888
2895
|
var _b = _a, {
|
|
@@ -2922,8 +2929,8 @@ exports.TreeItem = (_a) => {
|
|
|
2922
2929
|
setIsOpened(isOpen);
|
|
2923
2930
|
}
|
|
2924
2931
|
}, [isOpen]);
|
|
2925
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2926
|
-
/* @__PURE__ */ React3.createElement(StyledTreeItem, __spreadValues(__spreadProps(__spreadValues({ depth }, AnimateKey), {
|
|
2932
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2933
|
+
/* @__PURE__ */ React3.createElement(StyledTreeItem, __spreadValues(__spreadProps(__spreadValues({ depth, variants: fadeInOut }, AnimateKey), { layout: true, key: String(label) }), rest), /* @__PURE__ */ jsxRuntime.jsxs(LeftElementWrapper, { children: [
|
|
2927
2934
|
leftSource,
|
|
2928
2935
|
/* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", lineClamp: 1, children: label })
|
|
2929
2936
|
] }), /* @__PURE__ */ jsxRuntime.jsxs(RightElementWrapper, { children: [
|
|
@@ -2941,7 +2948,7 @@ exports.TreeItem = (_a) => {
|
|
|
2941
2948
|
}
|
|
2942
2949
|
) })
|
|
2943
2950
|
] })),
|
|
2944
|
-
isOpened && children && /* @__PURE__ */ jsxRuntime.jsx(framerMotion.
|
|
2951
|
+
/* @__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)) })
|
|
2945
2952
|
] });
|
|
2946
2953
|
};
|
|
2947
2954
|
exports.TreeItem[exports.TREE_SYMBOL_KEY] = true;
|