@easypost/easy-ui 1.0.0-alpha.12 → 1.0.0-alpha.120

package/Modal/index.js

@@ -31,68 +31,21 @@ var __objRest = (source, exclude) => {
   return target;
 };
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const utilities_css = require("../utilities/css.js");
 const utilities_useScrollbar = require("../utilities/useScrollbar.js");
-const Button_index = require("../Button/index.js");
-const Close = require("../__chunks__/Close-e92ca701.js");
-const HorizontalStack_index = require("../HorizontalStack/index.js");
-const Icon_index = require("../Icon/index.js");
-const Text_index = require("../Text/index.js");
-const VerticalStack_index = require("../VerticalStack/index.js");
-const _import$2 = require("../__chunks__/import-5d56d155.js");
-const _import = require("../__chunks__/import-109dab60.js");
-const _import$1 = require("../__chunks__/import-313d3d73.js");
-require("../__chunks__/overlayscrollbars-react.es-f2a0bcff.js");
-require("../__chunks__/index-fd91868d.js");
-require("../__chunks__/omit-fca26542.js");
-require("react-dom");
-require("../__chunks__/import-dea5a24d.js");
-require("../__chunks__/real-module-c0f9f92a.js");
-function $40df3f8667284809$export$d55e7ee900f34e93(props, ref) {
-  let { role = "dialog" } = props;
-  let titleId = _import.$bdb11010cef70236$export$b4cc09c592e8fdb8();
-  titleId = props["aria-label"] ? void 0 : titleId;
-  let isRefocusing = React.useRef(false);
-  React.useEffect(() => {
-    if (ref.current && !ref.current.contains(document.activeElement)) {
-      _import$1.$6a99195332edec8b$export$80f3e147d781571c(ref.current);
-      let timeout = setTimeout(() => {
-        if (document.activeElement === ref.current) {
-          isRefocusing.current = true;
-          ref.current.blur();
-          _import$1.$6a99195332edec8b$export$80f3e147d781571c(ref.current);
-          isRefocusing.current = false;
-        }
-      }, 500);
-      return () => {
-        clearTimeout(timeout);
-      };
-    }
-  }, [
-    ref
-  ]);
-  _import$2.$337b884510726a0d$export$14c98a7594375490();
-  return {
-    dialogProps: __spreadProps(__spreadValues({}, _import.$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
-      labelable: true
-    })), {
-      role,
-      tabIndex: -1,
-      "aria-labelledby": props["aria-labelledby"] || titleId,
-      // Prevent blur events from reaching useOverlay, which may cause
-      // popovers to close. Since focus is contained within the dialog,
-      // we don't want this to occur due to the above useEffect.
-      onBlur: (e) => {
-        if (isRefocusing.current)
-          e.stopPropagation();
-      }
-    }),
-    titleProps: {
-      id: titleId
-    }
-  };
-}
+const Button = require("../__chunks__/Button-CQdi4TMV.js");
+const Close = require("../__chunks__/Close-BQ2IlPyf.js");
+const HorizontalStack = require("../__chunks__/HorizontalStack-CWdKKY8L.js");
+const Icon = require("../__chunks__/Icon-BRlbo3RF.js");
+const Text = require("../__chunks__/Text-DkzMEqky.js");
+const VerticalStack = require("../__chunks__/VerticalStack-BHkiocKU.js");
+const useModalOverlay = require("../__chunks__/useModalOverlay-C4Gci3MA.js");
+const Overlay = require("../__chunks__/Overlay-BNP_t3v4.js");
+const useOverlayTrigger = require("../__chunks__/useOverlayTrigger-DP9RbCAF.js");
+const useIntersectionDetection = require("../__chunks__/useIntersectionDetection-DI5n4zwA.js");
+const useDialog = require("../__chunks__/useDialog-uxNR0maK.js");
 const ModalContext = React.createContext(null);
 const useModalContext = () => {
   const modalContext = React.useContext(ModalContext);
@@ -113,22 +66,42 @@ const useModalTrigger = () => {
   const modalTriggerContext = useModalTriggerContext();
   return modalTriggerContext.state;
 };
-const underlayBg = "_underlayBg_10qt7_5";
-const underlayBox = "_underlayBox_10qt7_28";
-const underlayEdge = "_underlayEdge_10qt7_36";
-const Modal$1 = "_Modal_10qt7_42";
-const header = "_header_10qt7_60";
-const stuck = "_stuck_10qt7_66";
-const body = "_body_10qt7_70";
-const content = "_content_10qt7_77";
-const footer = "_footer_10qt7_94";
-const closeBtn = "_closeBtn_10qt7_111";
-const iconAtEnd = "_iconAtEnd_10qt7_125";
-const sizeSm = "_sizeSm_10qt7_131";
-const sizeMd = "_sizeMd_10qt7_135";
-const sizeLg = "_sizeLg_10qt7_139";
+function ModalTriggerProvider({ state, isDismissable, children }) {
+  const [hasOpenNestedModal, setHasOpenNestedModal] = React.useState(false);
+  const context = React.useMemo(() => {
+    return {
+      hasOpenNestedModal,
+      setHasOpenNestedModal,
+      state,
+      isDismissable
+    };
+  }, [hasOpenNestedModal, state, isDismissable]);
+  return jsxRuntime.jsx(ModalTriggerContext.Provider, {
+    value: context,
+    children
+  });
+}
+const underlayBg = "_underlayBg_1xo4s_4";
+const underlayBgHidden = "_underlayBgHidden_1xo4s_27";
+const underlayBox = "_underlayBox_1xo4s_31";
+const underlayEdge = "_underlayEdge_1xo4s_39";
+const Modal$1 = "_Modal_1xo4s_45";
+const header = "_header_1xo4s_63";
+const stuck = "_stuck_1xo4s_69";
+const body = "_body_1xo4s_73";
+const content = "_content_1xo4s_80";
+const footer = "_footer_1xo4s_97";
+const footerSlot = "_footerSlot_1xo4s_105";
+const footerActions = "_footerActions_1xo4s_110";
+const closeBtn = "_closeBtn_1xo4s_122";
+const iconAtEnd = "_iconAtEnd_1xo4s_136";
+const sizeSm = "_sizeSm_1xo4s_142";
+const sizeMd = "_sizeMd_1xo4s_146";
+const sizeLg = "_sizeLg_1xo4s_150";
+const sizeXl = "_sizeXl_1xo4s_154";
 const styles = {
   underlayBg,
+  underlayBgHidden,
   underlayBox,
   underlayEdge,
   Modal: Modal$1,
@@ -137,182 +110,203 @@ const styles = {
   body,
   content,
   footer,
+  footerSlot,
+  footerActions,
   closeBtn,
   iconAtEnd,
   sizeSm,
   sizeMd,
-  sizeLg
+  sizeLg,
+  sizeXl
 };
 function ModalBody(props) {
   const { children } = props;
   const modalContext = useModalContext();
   utilities_useScrollbar.useScrollbar(modalContext.bodyRef, "ezui-os-theme-modal");
-  return React.createElement("div", {
+  return jsxRuntime.jsx("div", {
     className: styles.body,
-    ref: modalContext.bodyRef
-  }, React.createElement("div", {
-    className: styles.content
-  }, React.createElement("div", {
-    "data-intercept": "header",
-    ref: modalContext.headerInterceptorRef
-  }), children, React.createElement("div", {
-    "data-intercept": "footer",
-    ref: modalContext.footerInterceptorRef
-  })));
+    ref: modalContext.bodyRef,
+    children: jsxRuntime.jsxs("div", {
+      className: styles.content,
+      children: [jsxRuntime.jsx("div", {
+        "data-intercept": "header",
+        ref: modalContext.headerInterceptorRef
+      }), children, jsxRuntime.jsx("div", {
+        "data-intercept": "footer",
+        ref: modalContext.footerInterceptorRef
+      })]
+    })
+  });
 }
 function ModalFooter(props) {
-  const { primaryAction, secondaryAction } = props;
+  var _a;
   const modalContext = useModalContext();
-  const className = utilities_css.classNames(styles.footer, modalContext.isFooterStuck && styles.stuck);
-  return React.createElement("div", {
-    className
-  }, secondaryAction && React.createElement(Button_index.Button, {
-    onPress: secondaryAction.onAction,
-    color: "neutral",
-    isDisabled: secondaryAction.isDisabled
-  }, secondaryAction.content), React.createElement(Button_index.Button, {
-    onPress: primaryAction.onAction,
-    isDisabled: primaryAction.isDisabled
-  }, primaryAction.content));
+  const className = utilities_css.classNames(styles.footer, "children" in props ? styles.footerSlot : styles.footerActions, modalContext.isFooterStuck && styles.stuck);
+  if ("children" in props) {
+    return jsxRuntime.jsx("div", {
+      className,
+      children: props.children
+    });
+  }
+  const { primaryAction, secondaryAction } = props;
+  return jsxRuntime.jsxs("div", {
+    className,
+    children: [secondaryAction && jsxRuntime.jsx(Button.Button, {
+      onPress: secondaryAction.onAction,
+      color: (_a = secondaryAction.color) != null ? _a : "neutral",
+      isDisabled: secondaryAction.isDisabled,
+      children: secondaryAction.content
+    }), jsxRuntime.jsx(Button.Button, {
+      onPress: primaryAction.onAction,
+      color: primaryAction.color,
+      isDisabled: primaryAction.isDisabled,
+      children: primaryAction.content
+    })]
+  });
 }
 function ModalHeader(props) {
   const { as = "h2", children, subtitle, iconAtStart, iconAtEnd: iconAtEnd2 } = props;
   const modalContext = useModalContext();
   const modalTriggerContext = useModalTriggerContext();
   const className = utilities_css.classNames(styles.header, modalContext.isHeaderStuck && styles.stuck);
-  return React.createElement("div", {
-    className
-  }, React.createElement(VerticalStack_index.VerticalStack, {
-    gap: "1.5"
-  }, React.createElement(HorizontalStack_index.HorizontalStack, {
-    align: "space-between",
-    blockAlign: "center",
-    wrap: false
-  }, React.createElement(HorizontalStack_index.HorizontalStack, {
-    gap: "2",
-    wrap: false
-  }, iconAtStart && React.createElement("span", null, React.createElement(Icon_index.Icon, __spreadProps(__spreadValues({}, iconAtStart), {
-    size: "lg"
-  }))), React.createElement(Text_index.Text, __spreadValues({
-    as,
-    variant: "heading4",
-    truncate: true
-  }, modalContext.titleProps), children)), iconAtEnd2 ? React.createElement("span", {
-    className: styles.iconAtEnd,
-    "data-size": iconAtEnd2.size
-  }, React.createElement(Icon_index.Icon, __spreadValues({}, iconAtEnd2))) : modalTriggerContext.isDismissable ? React.createElement("button", {
-    className: styles.closeBtn,
-    onClick: () => {
-      modalTriggerContext.state.close();
-    }
-  }, React.createElement(Text_index.Text, {
-    visuallyHidden: true
-  }, "Close modal"), React.createElement(Icon_index.Icon, {
-    symbol: Close.Close,
-    size: "sm"
-  })) : null), subtitle && React.createElement(Text_index.Text, {
-    variant: "subtitle1"
-  }, subtitle)));
+  return jsxRuntime.jsx("div", {
+    className,
+    children: jsxRuntime.jsxs(VerticalStack.VerticalStack, {
+      gap: "1.5",
+      children: [jsxRuntime.jsxs(HorizontalStack.HorizontalStack, {
+        align: "space-between",
+        blockAlign: "center",
+        wrap: false,
+        children: [jsxRuntime.jsxs(HorizontalStack.HorizontalStack, {
+          gap: "2",
+          wrap: false,
+          children: [iconAtStart && jsxRuntime.jsx("span", {
+            children: jsxRuntime.jsx(Icon.Icon, __spreadProps(__spreadValues({}, iconAtStart), {
+              size: "lg"
+            }))
+          }), jsxRuntime.jsx(Text.Text, __spreadProps(__spreadValues({
+            as,
+            variant: "heading4",
+            truncate: true
+          }, modalContext.titleProps), {
+            children
+          }))]
+        }), iconAtEnd2 ? jsxRuntime.jsx("span", {
+          className: styles.iconAtEnd,
+          "data-size": iconAtEnd2.size,
+          children: jsxRuntime.jsx(Icon.Icon, __spreadValues({}, iconAtEnd2))
+        }) : modalTriggerContext.isDismissable ? jsxRuntime.jsxs("button", {
+          className: styles.closeBtn,
+          onClick: () => {
+            modalTriggerContext.state.close();
+          },
+          children: [jsxRuntime.jsx(Text.Text, {
+            visuallyHidden: true,
+            children: "Close modal"
+          }), jsxRuntime.jsx(Icon.Icon, {
+            symbol: Close.Close,
+            size: "sm"
+          })]
+        }) : null]
+      }), subtitle && jsxRuntime.jsx(Text.Text, {
+        variant: "subtitle1",
+        children: subtitle
+      })]
+    })
+  });
 }
 function ModalUnderlay(props) {
   const _a = props, { state, children } = _a, overlayProps = __objRest(_a, ["state", "children"]);
   const { isDismissable = true } = overlayProps;
   const ref = React.useRef(null);
-  const { modalProps, underlayProps } = _import$2.$8ac8429251c45e4b$export$dbc0f175b25fb0fb(__spreadProps(__spreadValues({}, overlayProps), {
+  const { modalProps, underlayProps } = useModalOverlay.$8ac8429251c45e4b$export$dbc0f175b25fb0fb(__spreadProps(__spreadValues({}, overlayProps), {
     isDismissable,
     isKeyboardDismissDisabled: !isDismissable
   }), state, ref);
-  return React.createElement(_import$2.$337b884510726a0d$export$c6fdb837b070b4ff, null, React.createElement("div", __spreadValues({
-    className: styles.underlayBg
-  }, underlayProps), React.createElement("div", __spreadProps(__spreadValues({}, modalProps), {
-    ref,
-    className: styles.underlayBox
-  }), React.createElement("div", {
-    className: styles.underlayEdge
-  }), children, React.createElement("div", {
-    className: styles.underlayEdge
-  }))));
+  const { hasOpenNestedModal } = useModalTriggerContext();
+  const className = utilities_css.classNames(styles.underlayBg, hasOpenNestedModal && styles.underlayBgHidden);
+  return jsxRuntime.jsx(Overlay.$337b884510726a0d$export$c6fdb837b070b4ff, {
+    children: jsxRuntime.jsx("div", __spreadProps(__spreadValues({
+      className
+    }, underlayProps), {
+      children: jsxRuntime.jsxs("div", __spreadProps(__spreadValues({}, modalProps), {
+        ref,
+        className: styles.underlayBox,
+        children: [jsxRuntime.jsx("div", {
+          className: styles.underlayEdge
+        }), children, jsxRuntime.jsx("div", {
+          className: styles.underlayEdge
+        })]
+      }))
+    }))
+  });
 }
 function ModalTrigger(props) {
   const _a = props, { children, isDismissable = true } = _a, inTriggerProps = __objRest(_a, ["children", "isDismissable"]);
-  const state = _import$2.$fc909762b330b746$export$61c6a8c84e605fb6(inTriggerProps);
-  const { triggerProps, overlayProps } = _import$2.$628037886ba31236$export$f9d5c8beee7d008d({
+  const state = Overlay.$fc909762b330b746$export$61c6a8c84e605fb6(inTriggerProps);
+  const { triggerProps, overlayProps } = useOverlayTrigger.$628037886ba31236$export$f9d5c8beee7d008d({
     type: "dialog"
   }, state);
   if (children.length !== 2) {
     throw new Error("children must be exactly one trigger element and one modal element");
   }
   const [trigger, modal] = children;
-  const context = React.useMemo(() => {
-    return {
+  return jsxRuntime.jsxs(ModalTriggerProvider, {
+    state,
+    isDismissable,
+    children: [React.cloneElement(trigger, triggerProps), state.isOpen && jsxRuntime.jsx(ModalUnderlay, __spreadProps(__spreadValues({}, props), {
       state,
-      isDismissable
-    };
-  }, [isDismissable, state]);
-  return React.createElement(ModalTriggerContext.Provider, {
-    value: context
-  }, React.cloneElement(trigger, triggerProps), state.isOpen && React.createElement(ModalUnderlay, __spreadProps(__spreadValues({}, props), {
-    state
-  }), React.cloneElement(typeof modal === "function" ? modal(state.close) : modal, overlayProps)));
-}
-function useIntersectionDetection(targetRef, scrollRef) {
-  const [isStuck, setIsStuck] = React.useState(false);
-  React.useEffect(() => {
-    if (!targetRef.current || !scrollRef.current) {
-      return;
-    }
-    const observer = new IntersectionObserver(([entry]) => {
-      setIsStuck(!entry.isIntersecting);
-    }, {
-      root: scrollRef.current
-    });
-    observer.observe(targetRef.current);
-    return () => {
-      observer.disconnect();
-    };
-  }, [targetRef, scrollRef]);
-  return isStuck;
+      children: React.cloneElement(typeof modal === "function" ? modal(state.close) : modal, overlayProps)
+    }))]
+  });
 }
 function ModalContainer(props) {
   const { children, isDismissable = true, onDismiss = () => {
   } } = props;
-  const existingModalTriggerContext = React.useContext(ModalTriggerContext);
-  if (existingModalTriggerContext) {
-    throw new Error("Modal.Container must be used outside of a Modal.Trigger");
+  const childArray = React.Children.toArray(children);
+  if (childArray.length > 1) {
+    throw new Error("Only a single child can be passed to ModalContainer.");
+  }
+  const [lastChild, setLastChild] = React.useState(null);
+  let child = null;
+  if (Array.isArray(children)) {
+    child = children.find(React.isValidElement);
+  } else if (React.isValidElement(children)) {
+    child = children;
   }
-  const state = _import$2.$fc909762b330b746$export$61c6a8c84e605fb6({
-    isOpen: Boolean(children),
+  if (child && child !== lastChild) {
+    setLastChild(child);
+  }
+  const state = Overlay.$fc909762b330b746$export$61c6a8c84e605fb6({
+    isOpen: Boolean(child),
     onOpenChange: (isOpen) => {
       if (!isOpen) {
         onDismiss();
       }
     }
   });
-  const { overlayProps } = _import$2.$628037886ba31236$export$f9d5c8beee7d008d({
+  const { overlayProps } = useOverlayTrigger.$628037886ba31236$export$f9d5c8beee7d008d({
     type: "dialog"
   }, state);
-  const context = React.useMemo(() => {
-    return {
-      state,
-      isDismissable
-    };
-  }, [state, isDismissable]);
-  return React.createElement(ModalTriggerContext.Provider, {
-    value: context
-  }, state.isOpen && React.createElement(ModalUnderlay, {
+  return jsxRuntime.jsx(ModalTriggerProvider, {
     state,
-    isDismissable
-  }, children ? typeof children === "function" ? children(state.close) : React.cloneElement(children, overlayProps) : null));
+    isDismissable,
+    children: state.isOpen && jsxRuntime.jsx(ModalUnderlay, {
+      state,
+      isDismissable,
+      children: lastChild ? React.cloneElement(lastChild, overlayProps) : null
+    })
+  });
 }
 function Modal(props) {
   const { children, size = "lg" } = props;
   const bodyRef = React.useRef(null);
   const headerInterceptorRef = React.useRef(null);
   const footerInterceptorRef = React.useRef(null);
-  const isHeaderStuck = useIntersectionDetection(headerInterceptorRef, bodyRef);
-  const isFooterStuck = useIntersectionDetection(footerInterceptorRef, bodyRef);
+  const isHeaderStuck = useIntersectionDetection.useIntersectionDetection(headerInterceptorRef, bodyRef);
+  const isFooterStuck = useIntersectionDetection.useIntersectionDetection(footerInterceptorRef, bodyRef);
   const dialogRef = React.useRef(null);
-  const { dialogProps, titleProps } = $40df3f8667284809$export$d55e7ee900f34e93({
+  const { dialogProps, titleProps } = useDialog.$40df3f8667284809$export$d55e7ee900f34e93({
     role: "dialog"
   }, dialogRef);
   const context = React.useMemo(() => {
@@ -327,12 +321,14 @@ function Modal(props) {
     };
   }, [dialogProps, isFooterStuck, isHeaderStuck, titleProps]);
   const className = utilities_css.classNames(styles.Modal, styles[utilities_css.variationName("size", size)]);
-  return React.createElement(ModalContext.Provider, {
-    value: context
-  }, React.createElement("div", __spreadProps(__spreadValues({}, dialogProps), {
-    className,
-    ref: dialogRef
-  }), children));
+  return jsxRuntime.jsx(ModalContext.Provider, {
+    value: context,
+    children: jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, dialogProps), {
+      className,
+      ref: dialogRef,
+      children
+    }))
+  });
 }
 Modal.Trigger = ModalTrigger;
 Modal.Header = ModalHeader;