@shoplflow/base 0.12.4 → 0.13.0

package/dist/index.mjs

@@ -6,6 +6,8 @@ import { createPortal } from 'react-dom';
 import { noop, useParentElementClick, useResizeObserver, isNullOrUndefined } from '@shoplflow/utils';
 import { css } from '@emotion/react';
 import Scrollbars from 'react-custom-scrollbars-2';
+import { useFloating } from '@floating-ui/react-dom';
+import { autoUpdate, offset, autoPlacement, FloatingPortal } from '@floating-ui/react';
 import * as ShoplAssets from '@shoplflow/shopl-assets';
 import * as HadaAssets from '@shoplflow/hada-assets';
 
@@ -336,6 +338,7 @@ var body2_500 = ".body2_500";
 var body2_400 = ".body2_400";
 var body3_400 = ".body3_400";
 var body3_500 = ".body3_500";
+var caption_700 = ".caption_700";
 var caption_400 = ".caption_400";
 var typographyTokens = {
   heading1_700,
@@ -357,6 +360,7 @@ var typographyTokens = {
   body2_400,
   body3_400,
   body3_500,
+  caption_700,
   caption_400
 };
 var StyledStack = styled5.div`
@@ -1049,6 +1053,7 @@ var StyledButton = styled5.button`
   display: flex;
   align-items: center;
   justify-content: center;
+  height: fit-content;
   gap: 4px;
   padding: 0 12px;
   border-radius: 6px;
@@ -1261,6 +1266,54 @@ var CalloutTypes = {
   INFORMATION: "INFORMATION",
   ALERT: "ALERT"
 };
+var StyledPopper = styled5.div`
+  display: flex;
+  flex-direction: row;
+  width: ${({ width }) => width ?? "fit-content"};
+  height: ${({ height }) => height ?? "fit-content"};
+`;
+var Popper = ({
+  trigger,
+  popper,
+  isOpen = false,
+  placement,
+  offset: initialOffset = 0,
+  autoPlacement: initialAutoPlacement,
+  strategy = "absolute",
+  middlewares,
+  animation: initialAnimation,
+  ...rest
+}) => {
+  const { refs, floatingStyles } = useFloating({
+    strategy,
+    placement,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(initialOffset),
+      autoPlacement({
+        crossAxis: false,
+        ...initialAutoPlacement
+      }),
+      ...middlewares ?? []
+    ]
+  });
+  const animation = initialAnimation ?? fadeInOut;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(StyledPopper, { ref: refs.setReference, "data-shoplflow": "Popper", ...rest, children: trigger }),
+    /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: animation.initial,
+        animate: animation.animate,
+        exit: animation.exit,
+        ref: refs.setFloating,
+        style: floatingStyles,
+        children: popper
+      }
+    ) }) })
+  ] });
+};
+var Popper_default = Popper;
 
 // src/components/Icon/Icon.types.ts
 var IconSizeVariants = {
@@ -1697,6 +1750,6 @@ var MinusButton = forwardRef(({ onClick, color = "neutral300", ...rest }, 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, Icon_default as Icon, IconButton_default as IconButton, IconSizeVariants, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MinusButton_default as MinusButton, Modal, ModalPortal_default as ModalProvider, ModalSize, MotionStack, ShoplflowProvider_default as ShoplflowProvider, Stack_default as Stack, StyledIcon, StyledStack, Switch_default as Switch, Text_default as Text, TextArea_default as TextArea, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, 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, Icon_default as Icon, IconButton_default as IconButton, IconSizeVariants, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MinusButton_default as MinusButton, Modal, ModalPortal_default as ModalProvider, ModalSize, MotionStack, Popper_default as Popper, ShoplflowProvider_default as ShoplflowProvider, Stack_default as Stack, StyledIcon, StyledPopper, StyledStack, Switch_default as Switch, Text_default as Text, TextArea_default as TextArea, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map