@shoplflow/base 0.30.5 → 0.30.7

package/dist/index.d.cts

@@ -506,13 +506,17 @@ interface ModalFooterType extends React.FC<ModalBodyProps> {
 declare type ModalStateType = {
     component: ReactNode;
     id?: string;
+    /**
+     * custom zIndex를 넣어주세요
+     */
+    zIndex?: number;
 };
 declare type RemoveModalProps = {
     id?: string;
     deps?: number;
 };
 declare type ModalHandlerContext = {
-    addModal: (modal: ReactNode, id?: string) => void;
+    addModal: (modal: ReactNode, id?: string, zIndex?: number) => void;
     removeModal: (props?: RemoveModalProps) => void;
 };
 declare const ModalHandlerContext: React$1.Context<ModalHandlerContext>;
@@ -524,7 +528,7 @@ declare const useModalValue: () => {
 };
 
 declare const useHandleModal: () => {
-    addModal: (modal: React$1.ReactNode, id?: string | undefined) => void;
+    addModal: (modal: React$1.ReactNode, id?: string | undefined, zIndex?: number | undefined) => void;
     removeModal: (props?: RemoveModalProps | undefined) => void;
 };
 
@@ -536,6 +540,7 @@ declare const Modal: {
 };
 
 interface BackDropProps extends ChildrenProps, BackDropOptionProps {
+    zIndex?: number;
 }
 interface BackDropOptionProps {
 }

package/dist/index.d.ts

@@ -506,13 +506,17 @@ interface ModalFooterType extends React.FC<ModalBodyProps> {
 declare type ModalStateType = {
     component: ReactNode;
     id?: string;
+    /**
+     * custom zIndex를 넣어주세요
+     */
+    zIndex?: number;
 };
 declare type RemoveModalProps = {
     id?: string;
     deps?: number;
 };
 declare type ModalHandlerContext = {
-    addModal: (modal: ReactNode, id?: string) => void;
+    addModal: (modal: ReactNode, id?: string, zIndex?: number) => void;
     removeModal: (props?: RemoveModalProps) => void;
 };
 declare const ModalHandlerContext: React$1.Context<ModalHandlerContext>;
@@ -524,7 +528,7 @@ declare const useModalValue: () => {
 };
 
 declare const useHandleModal: () => {
-    addModal: (modal: React$1.ReactNode, id?: string | undefined) => void;
+    addModal: (modal: React$1.ReactNode, id?: string | undefined, zIndex?: number | undefined) => void;
     removeModal: (props?: RemoveModalProps | undefined) => void;
 };
 
@@ -536,6 +540,7 @@ declare const Modal: {
 };
 
 interface BackDropProps extends ChildrenProps, BackDropOptionProps {
+    zIndex?: number;
 }
 interface BackDropOptionProps {
 }

package/dist/index.js

@@ -162,12 +162,12 @@ var BackDropStyled = styled6(motion.div)`
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 20000;
+  z-index: ${({ zIndex }) => zIndex || 2e4};
   width: 100%;
   height: 100%;
   background: rgba(51, 51, 51, 0.6);
 `;
-var BackDrop = ({ children }) => {
+var BackDrop = ({ children, zIndex }) => {
   return /* @__PURE__ */ jsx(
     BackDropStyled,
     {
@@ -176,6 +176,7 @@ var BackDrop = ({ children }) => {
       animate: "animate",
       exit: "exit",
       "data-shoplflow": "BackDrop",
+      zIndex,
       children
     }
   );
@@ -1028,12 +1029,12 @@ var useHandleModal = () => {
 };
 var ModalProvider = ({ children }) => {
   const [openedModals, setOpenedModals] = useState([]);
-  const addModal = (component, id) => {
+  const addModal = (component, id, zIndex) => {
     setOpenedModals((modals) => {
       if (modals) {
-        return [...modals, { component, id }];
+        return [...modals, { component, id, zIndex }];
       }
-      return [{ component, id }];
+      return [{ component, id, zIndex }];
     });
   };
   const removeModal = (props) => {
@@ -4136,7 +4137,7 @@ var SpaceMarginWrapper = styled6(motion.div)`
 var ModalPortal = () => {
   const modal = useContext(ModalContext);
   return /* @__PURE__ */ jsx(Fragment, { children: createPortal(
-    /* @__PURE__ */ jsx(AnimatePresence, { children: modal.map((item, index) => /* @__PURE__ */ jsx(BackDrop_default, { children: /* @__PURE__ */ jsx(SpaceMarginWrapper, { children: item.component }) }, index)) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: modal.map((item, index) => /* @__PURE__ */ jsx(BackDrop_default, { zIndex: item.zIndex, children: /* @__PURE__ */ jsx(SpaceMarginWrapper, { children: item.component }) }, index)) }),
     document.body
   ) });
 };