@shoplflow/base 0.13.4 → 0.13.5

package/dist/index.js

@@ -182,9 +182,25 @@ var ModalProvider = ({ children }) => {
   return /* @__PURE__ */ jsx(ModalContext.Provider, { value: openedModals, children: /* @__PURE__ */ jsx(ModalHandlerContext.Provider, { value: dispatch, children }) });
 };
 var ModalProvider_default = ModalProvider;
+var PopperPortal = () => {
+  return /* @__PURE__ */ jsx(Fragment, { children: createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: "popper-portal-key",
+        style: {
+          zIndex: 20001
+        }
+      }
+    ),
+    document.body
+  ) });
+};
+var PopperPortal_default = PopperPortal;
 var ShoplflowProvider = ({ children, domain = "SHOPL" }) => {
   useDomain(domain);
   return /* @__PURE__ */ jsxs(ModalProvider_default, { children: [
+    /* @__PURE__ */ jsx(PopperPortal_default, {}),
     /* @__PURE__ */ jsx(ModalPortal_default, {}),
     children
   ] });
@@ -1472,12 +1488,12 @@ var PopperTrigger = forwardRef(
     return /* @__PURE__ */ jsx(StyledPopper, __spreadProps(__spreadValues({ ref: refs, "data-shoplflow": "Popper" }, rest), { children }));
   }
 );
-var PopperPortal = forwardRef(
+var PopperPortal2 = forwardRef(
   ({ children, animation: initialAnimation }, ref) => {
     const { floatingStyles, setFloating, isOpen } = usePopper();
     const animation = initialAnimation != null ? initialAnimation : fadeInOut;
     const refs = useMergeRefs(ref, setFloating);
-    return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(FloatingPortal, { id: "popper-portal-key", children: /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(
       motion.div,
       {
         initial: animation.initial,
@@ -1491,7 +1507,7 @@ var PopperPortal = forwardRef(
   }
 );
 Popper.Trigger = PopperTrigger;
-Popper.Portal = PopperPortal;
+Popper.Portal = PopperPortal2;
 var Popper_default = Popper;
 var getDropdownHeightBySizeVar = (size) => {
   switch (size) {
@@ -1563,6 +1579,7 @@ var StyledDropdown = styled5.div`
 var StyledDropdownContent = styled5.div`
   display: flex;
   flex-direction: column;
+  background: ${colorTokens.neutral0};
   width: ${({ width }) => width != null ? width : "240px"};
   padding: 4px;
   border-radius: 6px;
@@ -2245,6 +2262,6 @@ var MinusButton = forwardRef((_a, ref) => {
 });
 var MinusButton_default = MinusButton;
 
-export { Button_default as Button, Callout_default as Callout, CalloutTypes, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, Dropdown_default as Dropdown, DropdownButtonIcon, Icon_default as Icon, IconButton_default as IconButton, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MinusButton_default as MinusButton, Modal, ModalPortal_default as ModalProvider, ModalSize, MotionStack, Popper_default as Popper, PopperPortal, PopperTrigger, ShoplflowProvider_default as ShoplflowProvider, Stack_default as Stack, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledPopper, StyledStack, Switch_default as Switch, Text_default as Text, TextArea_default as TextArea, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { Button_default as Button, Callout_default as Callout, CalloutTypes, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, Dropdown_default as Dropdown, DropdownButtonIcon, Icon_default as Icon, IconButton_default as IconButton, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MinusButton_default as MinusButton, Modal, ModalPortal_default as ModalProvider, ModalSize, MotionStack, Popper_default as Popper, PopperPortal2 as PopperPortal, PopperTrigger, ShoplflowProvider_default as ShoplflowProvider, Stack_default as Stack, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledPopper, StyledStack, Switch_default as Switch, Text_default as Text, TextArea_default as TextArea, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map