@janbox/storefront-ui 4.0.12 → 4.0.14

package/dist/components/scroll-view.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 import { Stylesheet } from "../lib/stylesheet/stylesheet.js";
+import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 const ScrollView = ({ children, options, sx, ...props }) => {
   return /* @__PURE__ */ jsx(Stylesheet, { children: ({ cx, css }) => /* @__PURE__ */ jsx(
     OverlayScrollbarsComponent,

package/dist/lib/accordion/accordion-content/accordion-content.js

@@ -3,8 +3,8 @@ import { useRef } from "react";
 import { motion } from "motion/react";
 import { getAccordionContentProps } from "./helpers.js";
 import { useAccordionContext } from "../accordion/helpers.js";
-import { useAccordionGroupContext } from "../accordion-group/helpers.js";
 import { Stylesheet } from "../../stylesheet/stylesheet.js";
+import { useAccordionGroupContext } from "../accordion-group/helpers.js";
 import { Primitive } from "../../primitive/primitive.js";
 const AccordionContent = ({ children, ref, ..._props }) => {
   const { accordionContentProps: accordionContentPropsByGroup = {} } = useAccordionGroupContext();

package/dist/lib/count-up/count-up.js

@@ -7,9 +7,9 @@ import { useTranslation } from "../../i18n/index.js";
 import "lodash-es";
 import "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
+import { Stylesheet } from "../stylesheet/stylesheet.js";
 import { getCountUpProps } from "./helpers.js";
 import { getDecimalDigits } from "../../utils/common.js";
-import { Stylesheet } from "../stylesheet/stylesheet.js";
 const CountUp = ({ ref, ..._props }) => {
   const {
     from = 0,

package/dist/lib/dialog/dialog/dialog.js

@@ -1,11 +1,9 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { getDialogProps, getDialogSizeInNumber } from "./helpers.js";
-import { FLOATING_Z_INDEX } from "../../../theme/index.js";
+import { breakpoint } from "../../../theme/screens.js";
+import { getColorVar } from "../../../theme/palette.js";
 import { Floating } from "../../floating/floating/floating.js";
 import { FloatingContent } from "../../floating/floating-content/floating-content.js";
-import { Primitive } from "../../primitive/primitive.js";
-import { getColorVar } from "../../../theme/palette.js";
-import { mediaQuery } from "../../../theme/screens.js";
 const Dialog = (_props) => {
   const { size, sm, md, lg, children, ...props } = getDialogProps(_props);
   return /* @__PURE__ */ jsx(
@@ -15,71 +13,41 @@ const Dialog = (_props) => {
         enabled: true
       },
       ...props,
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx(
         FloatingContent,
         {
-          floatingOverlayProps: {
-            disabled: false,
-            css: {
-              display: "grid",
-              placeItems: "center",
-              padding: "1rem",
-              [mediaQuery("sm")]: { padding: "1.25rem" },
-              [mediaQuery("md")]: { padding: "1.5rem" }
-            },
+          overlay: {
             lockScroll: true,
             style: {
-              zIndex: FLOATING_Z_INDEX
+              display: "grid",
+              placeItems: "center",
+              backgroundColor: "rgba(0, 0, 0, 0.4)",
+              backdropFilter: "blur(2px)"
             }
           },
           sx: {
-            maxHeight: "100%",
-            maxWidth: "100%",
+            width: getDialogSizeInNumber(size),
+            backgroundColor: getColorVar("surface.default"),
+            maxWidth: `calc(100dvw - ${breakpoint.xs.padding * 2}px)`,
             overflow: "hidden",
             display: "flex",
-            flexDirection: "column"
+            flexDirection: "column",
+            borderRadius: 8,
+            paddingBlock: 8,
+            sm: {
+              width: getDialogSizeInNumber(sm == null ? void 0 : sm.size),
+              maxWidth: `calc(100dvw - ${breakpoint.sm.padding * 2}px)`
+            },
+            md: {
+              width: getDialogSizeInNumber(md == null ? void 0 : md.size),
+              maxWidth: `calc(100dvw - ${breakpoint.md.padding * 2}px)`
+            },
+            lg: {
+              width: getDialogSizeInNumber(lg == null ? void 0 : lg.size),
+              maxWidth: `calc(100dvw - ${breakpoint.lg.padding * 2}px)`
+            }
           },
-          children: [
-            /* @__PURE__ */ jsx(
-              Primitive,
-              {
-                sx: {
-                  backdropFilter: "blur(2px)",
-                  position: "fixed",
-                  inset: 0,
-                  backgroundColor: "rgba(0, 0, 0, 0.4)",
-                  pointerEvents: "none"
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Primitive,
-              {
-                sx: {
-                  width: getDialogSizeInNumber(size),
-                  backgroundColor: getColorVar("surface.default"),
-                  maxWidth: "100%",
-                  overflow: "hidden",
-                  display: "flex",
-                  flexDirection: "column",
-                  borderRadius: "0.5rem",
-                  paddingTop: "0.5rem",
-                  paddingBottom: "0.5rem",
-                  position: "relative",
-                  sm: {
-                    width: getDialogSizeInNumber(sm == null ? void 0 : sm.size)
-                  },
-                  md: {
-                    width: getDialogSizeInNumber(md == null ? void 0 : md.size)
-                  },
-                  lg: {
-                    width: getDialogSizeInNumber(lg == null ? void 0 : lg.size)
-                  }
-                },
-                children
-              }
-            )
-          ]
+          children
         }
       )
     }

package/dist/lib/drawer/drawer/drawer.js

@@ -1,11 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { motion } from "motion/react";
-import { FLOATING_Z_INDEX } from "../../../theme/index.js";
+import { Stylesheet } from "../../stylesheet/stylesheet.js";
 import { Floating } from "../../floating/floating/floating.js";
 import { FloatingContent } from "../../floating/floating-content/floating-content.js";
 import { Primitive } from "../../primitive/primitive.js";
-import { Stylesheet } from "../../stylesheet/stylesheet.js";
 const Drawer = ({ children, placement = "left", ...props }) => {
   const initial = useMemo(() => {
     switch (placement) {
@@ -39,12 +38,8 @@ const Drawer = ({ children, placement = "left", ...props }) => {
       children: /* @__PURE__ */ jsxs(
         FloatingContent,
         {
-          floatingOverlayProps: {
-            disabled: false,
-            lockScroll: true,
-            style: {
-              zIndex: FLOATING_Z_INDEX
-            }
+          overlay: {
+            lockScroll: true
           },
           sx: {
             maxHeight: "100%",

package/dist/lib/floating/floating/floating.js

@@ -30,6 +30,7 @@ const FloatingCore = ({
   offsetOptions = 4,
   sizeOptions,
   autoUpdateOptions,
+  strategy,
   ref
 }) => {
   const floating = useFloating({
@@ -72,7 +73,8 @@ const FloatingCore = ({
     whileElementsMounted: (...args) => {
       return autoUpdate(...args, autoUpdateOptions);
     },
-    elements
+    elements,
+    strategy
   });
   useImperativeHandle(ref, () => floating, [floating]);
   const { context } = floating;

package/dist/lib/floating/floating/types.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { AutoUpdateOptions, OffsetOptions, Placement, SizeOptions, UseClickProps, UseDismissProps, UseFloatingOptions, UseFloatingReturn, UseFocusProps, UseHoverProps } from '@floating-ui/react';
+import { AutoUpdateOptions, OffsetOptions, Placement, SizeOptions, Strategy, UseClickProps, UseDismissProps, UseFloatingOptions, UseFloatingReturn, UseFocusProps, UseHoverProps } from '@floating-ui/react';
 export type FloatingProps = PropsWithChildren<{
     placement?: Placement;
     onOpenChange?: UseFloatingOptions['onOpenChange'];
@@ -13,5 +13,6 @@ export type FloatingProps = PropsWithChildren<{
     sizeOptions?: SizeOptions;
     autoUpdateOptions?: AutoUpdateOptions;
     ref?: React.Ref<FloatingRef>;
+    strategy?: Strategy;
 }>;
 export type FloatingRef = UseFloatingReturn;

package/dist/lib/floating/floating-content/floating-content.d.ts

@@ -1,2 +1,2 @@
 import { FloatingContentProps } from './types';
-export declare const FloatingContent: ({ style, floatingPortalProps, floatingFocusManagerProps, floatingOverlayProps, sx, ref, ...props }: FloatingContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FloatingContent: ({ preserveTabOrder, focus, overlay, sx, ref, ...props }: FloatingContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/floating/floating-content/floating-content.js

@@ -1,55 +1,46 @@
 import { jsx } from "react/jsx-runtime";
-import { useMergeRefs, FloatingPortal, FloatingOverlay, FloatingFocusManager } from "@floating-ui/react";
-import { AnimatePresence, motion } from "motion/react";
+import { useMergeRefs, FloatingFocusManager, FloatingPortal, FloatingOverlay } from "@floating-ui/react";
+import { motion, AnimatePresence } from "motion/react";
 import { useFloatingContext } from "../floating/helpers.js";
 import { FLOATING_Z_INDEX } from "../../../theme/index.js";
 import { useIsHydrated } from "../../../hooks/use-is-hydrated/index.js";
-import { usePortalContainer } from "../../../theme/provider.js";
 import { Stylesheet } from "../../stylesheet/stylesheet.js";
-const FloatingContent = ({
-  style,
-  floatingPortalProps,
-  floatingFocusManagerProps,
-  floatingOverlayProps,
-  sx,
-  ref,
-  ...props
-}) => {
+import { usePortalContainer } from "../../../theme/provider.js";
+const FloatingContent = ({ preserveTabOrder, focus, overlay, sx, ref, ...props }) => {
   const { getFloatingProps, context } = useFloatingContext();
   const mergedRefs = useMergeRefs([context.refs.setFloating, ref]);
   const isHydrated = useIsHydrated();
   const portalRoot = usePortalContainer();
-  const { root = portalRoot, ...portalProps } = floatingPortalProps ?? {};
-  const resolvedRoot = root || void 0;
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: context.open && isHydrated && /* @__PURE__ */ jsx(FloatingPortal, { root: resolvedRoot, ...portalProps, children: /* @__PURE__ */ jsx(
-    FloatingOverlay,
+  const mainContent = /* @__PURE__ */ jsx(FloatingFocusManager, { initialFocus: -1, context, ...focus, children: /* @__PURE__ */ jsx(Stylesheet, { children: ({ cx, css }) => /* @__PURE__ */ jsx(
+    motion.div,
     {
-      ...floatingOverlayProps,
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      ...getFloatingProps({
+        ...props,
+        className: cx(css(sx), props.className)
+      }),
       style: {
-        display: (floatingOverlayProps == null ? void 0 : floatingOverlayProps.disabled) ?? true ? "contents" : void 0,
-        ...floatingOverlayProps == null ? void 0 : floatingOverlayProps.style
+        ...context.elements.reference ? context.floatingStyles : {},
+        ...props.style,
+        zIndex: FLOATING_Z_INDEX
       },
-      children: /* @__PURE__ */ jsx(FloatingFocusManager, { disabled: true, context, ...floatingFocusManagerProps, children: /* @__PURE__ */ jsx(Stylesheet, { children: ({ cx, css }) => /* @__PURE__ */ jsx(
-        motion.div,
-        {
-          initial: { opacity: 0 },
-          animate: { opacity: 1 },
-          exit: { opacity: 0 },
-          style: {
-            ...context.elements.reference ? context.floatingStyles : {},
-            ...style,
-            zIndex: FLOATING_Z_INDEX
-          },
-          ...getFloatingProps({
-            ...props,
-            className: cx(css(sx), props.className)
-          }),
-          ref: mergedRefs,
-          children: props.children
-        }
-      ) }) })
+      ref: mergedRefs,
+      children: props.children
     }
   ) }) });
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: context.open && isHydrated && /* @__PURE__ */ jsx(FloatingPortal, { root: portalRoot ?? void 0, preserveTabOrder, children: overlay ? /* @__PURE__ */ jsx(
+    FloatingOverlay,
+    {
+      ...overlay,
+      style: {
+        zIndex: FLOATING_Z_INDEX,
+        ...overlay.style
+      },
+      children: mainContent
+    }
+  ) : mainContent }) });
 };
 export {
   FloatingContent

package/dist/lib/floating/floating-content/types.d.ts

@@ -1,12 +1,8 @@
 import { ComponentProps, HTMLProps } from 'react';
-import { Interpolation } from '@emotion/react';
-import { FloatingFocusManager, FloatingOverlay, FloatingPortal } from '@floating-ui/react';
-import { PropsWithSx, ShallowMerge } from '../../../types';
+import { FloatingFocusManager, FloatingOverlay, FloatingPortal, FloatingPortalProps } from '@floating-ui/react';
+import { PropsWithSx } from '../../../types';
 export type FloatingContentProps = PropsWithSx<HTMLProps<HTMLDivElement> & {
     floatingPortalProps?: Partial<ComponentProps<typeof FloatingPortal>>;
-    floatingOverlayProps?: Partial<ShallowMerge<ComponentProps<typeof FloatingOverlay>, {
-        disabled: boolean;
-        css?: Interpolation;
-    }>>;
-    floatingFocusManagerProps?: Partial<ComponentProps<typeof FloatingFocusManager>>;
-}>;
+    focus?: Partial<ComponentProps<typeof FloatingFocusManager>>;
+    overlay?: Partial<ComponentProps<typeof FloatingOverlay>>;
+} & Pick<FloatingPortalProps, 'preserveTabOrder'>>;

package/dist/lib/lightbox/lightbox.js

@@ -10,12 +10,12 @@ import ZoomPlusIcon from "../../assets/svg/search-add-plus-middle.svg.js";
 import ZoomMinusIcon from "../../assets/svg/search-minus.svg.js";
 import CloseIcon from "../../assets/svg/times-close-delete.svg.js";
 import { FLOATING_Z_INDEX } from "../../theme/index.js";
+import { Stylesheet } from "../stylesheet/stylesheet.js";
 import { Swiper } from "../swiper/swiper/swiper.js";
 import { SwiperSlide } from "../swiper/swiper-slide/swiper-slide.js";
 import { Floating } from "../floating/floating/floating.js";
 import { FloatingContent } from "../floating/floating-content/floating-content.js";
 import { Primitive } from "../primitive/primitive.js";
-import { Stylesheet } from "../stylesheet/stylesheet.js";
 import { Image } from "../image/image.js";
 import { FloatingClose } from "../floating/floating-close/floating-close.js";
 import { IconButton } from "../icon-button/icon-button.js";
@@ -269,16 +269,11 @@ const Lightbox = ({ slides, defaultActiveIndex, ...props }) => {
       children: /* @__PURE__ */ jsx(
         FloatingContent,
         {
-          floatingOverlayProps: {
-            disabled: false,
+          overlay: {
             lockScroll: true,
             style: {
               zIndex: FLOATING_Z_INDEX,
-              backdropFilter: "blur(4px)"
-            },
-            css: {
-              position: "fixed",
-              inset: 0,
+              backdropFilter: "blur(4px)",
               backgroundColor: "rgba(0, 0, 0, 0.9)",
               color: "white"
             }

package/dist/lib/loading/image-skeleton/image-skeleton.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { animatePulseStyle } from "../../../constants/emotion.js";
+import { Stylesheet } from "../../stylesheet/stylesheet.js";
 import "lodash-es";
 import { getColorVar } from "../../../theme/palette.js";
 import { Primitive } from "../../primitive/primitive.js";
-import { Stylesheet } from "../../stylesheet/stylesheet.js";
 const ImageSkeleton = (props) => {
   return /* @__PURE__ */ jsx(
     Primitive,

package/dist/lib/notifications/notifications.js

@@ -7,9 +7,9 @@ import { notificationStore } from "./helpers.js";
 import { getColorShadesByVariant } from "../../utils/index.js";
 import { FLOATING_Z_INDEX } from "../../theme/index.js";
 import CloseIcon from "../../assets/svg/times-close-delete.svg.js";
+import { Stylesheet } from "../stylesheet/stylesheet.js";
 import { usePortalContainer } from "../../theme/provider.js";
 import { Primitive } from "../primitive/primitive.js";
-import { Stylesheet } from "../stylesheet/stylesheet.js";
 import { getTypographyVar } from "../../theme/typography.js";
 import { IconButton } from "../icon-button/icon-button.js";
 const Notifications = () => {

package/dist/lib/star-rating/star-rating.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
-import { getStarRatingProps } from "./helpers.js";
 import { Stylesheet } from "../stylesheet/stylesheet.js";
+import { getStarRatingProps } from "./helpers.js";
 const StarRating = (_props) => {
   const { rating, maxRating, size, sm, md, lg, ref, color, sx } = getStarRatingProps(_props);
   const id = useId();

package/dist/lib/swiper/swiper-dots-paging/swiper-dots-paging.js

@@ -6,8 +6,8 @@ import { motion } from "motion/react";
 import { getColorVar } from "../../../theme/palette.js";
 import { usePortalContainer } from "../../../theme/provider.js";
 import { useIsHydrated } from "../../../hooks/use-is-hydrated/index.js";
-import { Primitive } from "../../primitive/primitive.js";
 import { Stylesheet } from "../../stylesheet/stylesheet.js";
+import { Primitive } from "../../primitive/primitive.js";
 const SWIPER_DOTS_SIZE_VAR = "--swiper-dots-size";
 const SWIPER_DOTS_OFFSET_VAR = "--swiper-dots-offset";
 const SWIPER_DOTS_SPACING_VAR = "--swiper-dots-spacing";

package/dist/lib/tabs/tab-indicator/tab-indicator.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
 import { motion } from "motion/react";
-import { useTabsContext } from "../tabs/helpers.js";
 import { Stylesheet } from "../../stylesheet/stylesheet.js";
+import { useTabsContext } from "../tabs/helpers.js";
 const TabIndicator = () => {
   const { activeIndex, tabIndicatorProps } = useTabsContext();
   const indicatorEl = useRef(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janbox/storefront-ui",
-  "version": "4.0.12",
+  "version": "4.0.14",
   "description": "Storefront UI component library for Janbox",
   "author": "Janbox",
   "keywords": [