@shoplflow/base 0.45.14 → 0.45.16

package/dist/index.cjs

@@ -799,7 +799,9 @@ var Container = styled6__default.default.div`
   ${({ hasChangeAnimation }) => hasChangeAnimation && react$1.css`
       transition:
         width 0.3s ease-in-out,
-        max-width 0.3s ease-in-out;
+        max-width 0.3s ease-in-out,
+        height 0.3s ease-in-out,
+        max-height 0.3s ease-in-out;
     `}
   display: flex;
   flex-direction: column;
@@ -903,22 +905,33 @@ var useViewportSizeObserver = () => {
   return size2;
 };
 var ModalOptionContext = React3.createContext({
-  heightToDeduct: 0,
-  setHeightToDeduct: utils.noop,
-  clearHeightToDeduct: utils.noop
+  topHeight: 0,
+  bottomHeight: 0,
+  setTopHeight: utils.noop,
+  setBottomHeight: utils.noop,
+  clearTopHeight: utils.noop,
+  clearBottomHeight: utils.noop
 });
 var ModalOptionContextProvider = ({ children }) => {
-  const [heightToDeduct, setHeightToDeduct] = React3.useState(0);
-  const controlHeightToDeduct = React3.useCallback((heightToAdd) => {
-    setHeightToDeduct((prev) => prev + heightToAdd);
+  const [topHeight, setTopHeight] = React3.useState(0);
+  const [bottomHeight, setBottomHeight] = React3.useState(0);
+  const clearTopHeight = React3.useCallback(() => {
+    setTopHeight(0);
   }, []);
-  const clearHeightToDeduct = React3.useCallback(() => {
-    setHeightToDeduct(0);
+  const clearBottomHeight = React3.useCallback(() => {
+    setBottomHeight(0);
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ModalOptionContext.Provider,
     {
-      value: { heightToDeduct, setHeightToDeduct: controlHeightToDeduct, clearHeightToDeduct },
+      value: {
+        topHeight,
+        bottomHeight,
+        setTopHeight,
+        setBottomHeight,
+        clearTopHeight,
+        clearBottomHeight
+      },
       children
     }
   );
@@ -1010,7 +1023,8 @@ var ModalBody = ({
   padding
 }) => {
   const { height: windowHeight } = useViewportSizeObserver();
-  const { heightToDeduct } = useModalOption();
+  const { topHeight, bottomHeight } = useModalOption();
+  const heightToDeduct = topHeight + bottomHeight;
   const headerHeight = 64;
   const footerHeight = 72;
   const topBottomMargin = 64;
@@ -1108,29 +1122,45 @@ ModalHeader[exports.MODAL_HEADER_KEY] = true;
 var ModalHeader_default = ModalHeader;
 var ModalTop = ({ children }) => {
   const [topRef, setTopRef] = React3.useState(null);
-  const { setHeightToDeduct, clearHeightToDeduct } = useModalOption();
+  const { setTopHeight, clearTopHeight } = useModalOption();
   React3.useEffect(() => {
-    if (!topRef) {
+    if (!topRef || !setTopHeight) {
       return;
     }
-    const { height } = topRef.getBoundingClientRect();
-    setHeightToDeduct == null ? void 0 : setHeightToDeduct(height);
-    return () => clearHeightToDeduct();
-  }, [topRef, setHeightToDeduct, clearHeightToDeduct]);
+    const updateHeight = () => {
+      const { height } = topRef.getBoundingClientRect();
+      setTopHeight(height);
+    };
+    updateHeight();
+    const resizeObserver = new ResizeObserver(updateHeight);
+    resizeObserver.observe(topRef);
+    return () => {
+      resizeObserver.disconnect();
+      clearTopHeight();
+    };
+  }, [topRef, setTopHeight, clearTopHeight]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setTopRef, children });
 };
 var ModalTop_default = ModalTop;
 var ModalBottom = ({ children }) => {
   const [bottomRef, setBottomRef] = React3.useState(null);
-  const { setHeightToDeduct, clearHeightToDeduct } = useModalOption();
+  const { setBottomHeight, clearBottomHeight } = useModalOption();
   React3.useEffect(() => {
-    if (!bottomRef) {
+    if (!bottomRef || !setBottomHeight) {
       return;
     }
-    const { height } = bottomRef.getBoundingClientRect();
-    setHeightToDeduct == null ? void 0 : setHeightToDeduct(height);
-    return () => clearHeightToDeduct();
-  }, [bottomRef, setHeightToDeduct, clearHeightToDeduct]);
+    const updateHeight = () => {
+      const { height } = bottomRef.getBoundingClientRect();
+      setBottomHeight(height);
+    };
+    updateHeight();
+    const resizeObserver = new ResizeObserver(updateHeight);
+    resizeObserver.observe(bottomRef);
+    return () => {
+      resizeObserver.disconnect();
+      clearBottomHeight();
+    };
+  }, [bottomRef, setBottomHeight, clearBottomHeight]);
   return /* @__PURE__ */ jsxRuntime.jsx(BottomContainer, { ref: setBottomRef, children });
 };
 exports.ModalHandlerContext = React3.createContext({
@@ -3670,6 +3700,12 @@ var StyledInput = styled6__default.default.input`
     box-sizing: inherit;
   }
 `;
+var LeftElementWrapper2 = styled6__default.default.div`
+  padding: ${({ sizeVar }) => sizeVar === "S" ? "0 0 0 8px" : "0 0 0 12px"};
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
 var RightElementWrapper2 = styled6__default.default.div`
   padding: ${({ sizeVar, type, initialType }) => {
   if (initialType === "password" || type === "password") {
@@ -3828,7 +3864,8 @@ var Input = React3.forwardRef(
       minWidth,
       gap,
       initIsFocused,
-      rightSourceStyle
+      rightSourceStyle,
+      leftSource
     } = _b, rest = __objRest(_b, [
       "onFocus",
       "onBlur",
@@ -3852,7 +3889,8 @@ var Input = React3.forwardRef(
       "minWidth",
       "gap",
       "initIsFocused",
-      "rightSourceStyle"
+      "rightSourceStyle",
+      "leftSource"
     ]);
     const [text, setText] = React3.useState("");
     const [isFocused, setIsFocused] = React3.useState(Boolean(initIsFocused));
@@ -3969,6 +4007,7 @@ var Input = React3.forwardRef(
         gap,
         sizeVar,
         children: [
+          leftSource && /* @__PURE__ */ jsxRuntime.jsx(LeftElementWrapper2, { sizeVar, initialType, style: rightSourceStyle, children: leftSource }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", width: "100%" }, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               StyledInput,

package/dist/index.d.cts

@@ -1100,7 +1100,7 @@ declare const InputSizeVariants: {
     readonly M: "M";
 };
 declare type InputSizeVariantType = $Values<typeof InputSizeVariants>;
-interface InputProps extends InputOptionProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'width'>, DisableProps, RightElementProps {
+interface InputProps extends InputOptionProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'width'>, DisableProps, LeftElementProps, RightElementProps {
 }
 interface InputOptionProps extends ErrorProps, SizeVariantProps<InputSizeVariantType> {
     width?: string;

package/dist/index.d.ts

@@ -1100,7 +1100,7 @@ declare const InputSizeVariants: {
     readonly M: "M";
 };
 declare type InputSizeVariantType = $Values<typeof InputSizeVariants>;
-interface InputProps extends InputOptionProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'width'>, DisableProps, RightElementProps {
+interface InputProps extends InputOptionProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'width'>, DisableProps, LeftElementProps, RightElementProps {
 }
 interface InputOptionProps extends ErrorProps, SizeVariantProps<InputSizeVariantType> {
     width?: string;

package/dist/index.js

@@ -772,7 +772,9 @@ var Container = styled6.div`
   ${({ hasChangeAnimation }) => hasChangeAnimation && css`
       transition:
         width 0.3s ease-in-out,
-        max-width 0.3s ease-in-out;
+        max-width 0.3s ease-in-out,
+        height 0.3s ease-in-out,
+        max-height 0.3s ease-in-out;
     `}
   display: flex;
   flex-direction: column;
@@ -876,22 +878,33 @@ var useViewportSizeObserver = () => {
   return size2;
 };
 var ModalOptionContext = createContext({
-  heightToDeduct: 0,
-  setHeightToDeduct: noop,
-  clearHeightToDeduct: noop
+  topHeight: 0,
+  bottomHeight: 0,
+  setTopHeight: noop,
+  setBottomHeight: noop,
+  clearTopHeight: noop,
+  clearBottomHeight: noop
 });
 var ModalOptionContextProvider = ({ children }) => {
-  const [heightToDeduct, setHeightToDeduct] = useState(0);
-  const controlHeightToDeduct = useCallback((heightToAdd) => {
-    setHeightToDeduct((prev) => prev + heightToAdd);
+  const [topHeight, setTopHeight] = useState(0);
+  const [bottomHeight, setBottomHeight] = useState(0);
+  const clearTopHeight = useCallback(() => {
+    setTopHeight(0);
   }, []);
-  const clearHeightToDeduct = useCallback(() => {
-    setHeightToDeduct(0);
+  const clearBottomHeight = useCallback(() => {
+    setBottomHeight(0);
   }, []);
   return /* @__PURE__ */ jsx(
     ModalOptionContext.Provider,
     {
-      value: { heightToDeduct, setHeightToDeduct: controlHeightToDeduct, clearHeightToDeduct },
+      value: {
+        topHeight,
+        bottomHeight,
+        setTopHeight,
+        setBottomHeight,
+        clearTopHeight,
+        clearBottomHeight
+      },
       children
     }
   );
@@ -983,7 +996,8 @@ var ModalBody = ({
   padding
 }) => {
   const { height: windowHeight } = useViewportSizeObserver();
-  const { heightToDeduct } = useModalOption();
+  const { topHeight, bottomHeight } = useModalOption();
+  const heightToDeduct = topHeight + bottomHeight;
   const headerHeight = 64;
   const footerHeight = 72;
   const topBottomMargin = 64;
@@ -1081,29 +1095,45 @@ ModalHeader[MODAL_HEADER_KEY] = true;
 var ModalHeader_default = ModalHeader;
 var ModalTop = ({ children }) => {
   const [topRef, setTopRef] = useState(null);
-  const { setHeightToDeduct, clearHeightToDeduct } = useModalOption();
+  const { setTopHeight, clearTopHeight } = useModalOption();
   useEffect(() => {
-    if (!topRef) {
+    if (!topRef || !setTopHeight) {
       return;
     }
-    const { height } = topRef.getBoundingClientRect();
-    setHeightToDeduct == null ? void 0 : setHeightToDeduct(height);
-    return () => clearHeightToDeduct();
-  }, [topRef, setHeightToDeduct, clearHeightToDeduct]);
+    const updateHeight = () => {
+      const { height } = topRef.getBoundingClientRect();
+      setTopHeight(height);
+    };
+    updateHeight();
+    const resizeObserver = new ResizeObserver(updateHeight);
+    resizeObserver.observe(topRef);
+    return () => {
+      resizeObserver.disconnect();
+      clearTopHeight();
+    };
+  }, [topRef, setTopHeight, clearTopHeight]);
   return /* @__PURE__ */ jsx("div", { ref: setTopRef, children });
 };
 var ModalTop_default = ModalTop;
 var ModalBottom = ({ children }) => {
   const [bottomRef, setBottomRef] = useState(null);
-  const { setHeightToDeduct, clearHeightToDeduct } = useModalOption();
+  const { setBottomHeight, clearBottomHeight } = useModalOption();
   useEffect(() => {
-    if (!bottomRef) {
+    if (!bottomRef || !setBottomHeight) {
       return;
     }
-    const { height } = bottomRef.getBoundingClientRect();
-    setHeightToDeduct == null ? void 0 : setHeightToDeduct(height);
-    return () => clearHeightToDeduct();
-  }, [bottomRef, setHeightToDeduct, clearHeightToDeduct]);
+    const updateHeight = () => {
+      const { height } = bottomRef.getBoundingClientRect();
+      setBottomHeight(height);
+    };
+    updateHeight();
+    const resizeObserver = new ResizeObserver(updateHeight);
+    resizeObserver.observe(bottomRef);
+    return () => {
+      resizeObserver.disconnect();
+      clearBottomHeight();
+    };
+  }, [bottomRef, setBottomHeight, clearBottomHeight]);
   return /* @__PURE__ */ jsx(BottomContainer, { ref: setBottomRef, children });
 };
 var ModalHandlerContext = createContext({
@@ -3643,6 +3673,12 @@ var StyledInput = styled6.input`
     box-sizing: inherit;
   }
 `;
+var LeftElementWrapper2 = styled6.div`
+  padding: ${({ sizeVar }) => sizeVar === "S" ? "0 0 0 8px" : "0 0 0 12px"};
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
 var RightElementWrapper2 = styled6.div`
   padding: ${({ sizeVar, type, initialType }) => {
   if (initialType === "password" || type === "password") {
@@ -3801,7 +3837,8 @@ var Input = forwardRef(
       minWidth,
       gap,
       initIsFocused,
-      rightSourceStyle
+      rightSourceStyle,
+      leftSource
     } = _b, rest = __objRest(_b, [
       "onFocus",
       "onBlur",
@@ -3825,7 +3862,8 @@ var Input = forwardRef(
       "minWidth",
       "gap",
       "initIsFocused",
-      "rightSourceStyle"
+      "rightSourceStyle",
+      "leftSource"
     ]);
     const [text, setText] = useState("");
     const [isFocused, setIsFocused] = useState(Boolean(initIsFocused));
@@ -3942,6 +3980,7 @@ var Input = forwardRef(
         gap,
         sizeVar,
         children: [
+          leftSource && /* @__PURE__ */ jsx(LeftElementWrapper2, { sizeVar, initialType, style: rightSourceStyle, children: leftSource }),
           /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%" }, children: [
             /* @__PURE__ */ jsx(
               StyledInput,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.45.14",
+  "version": "0.45.16",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {
@@ -99,8 +99,8 @@
     "react-dom": "^18.2.0",
     "simplebar-react": "^3.2.6",
     "@shoplflow/hada-assets": "^0.1.10",
-    "@shoplflow/utils": "^0.7.2",
-    "@shoplflow/shopl-assets": "^0.12.33"
+    "@shoplflow/shopl-assets": "^0.12.35",
+    "@shoplflow/utils": "^0.7.2"
   },
   "homepage": "https://github.com/shopl/shoplflow#readme",
   "scripts": {