@janbox/storefront-ui 4.0.2 → 4.0.3

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 { Stylesheet } from "../../stylesheet/stylesheet.js";
 import { useAccordionGroupContext } from "../accordion-group/helpers.js";
+import { Stylesheet } from "../../stylesheet/stylesheet.js";
 import { Primitive } from "../../primitive/primitive.js";
 const AccordionContent = ({ children, ref, ..._props }) => {
   const { accordionContentProps: accordionContentPropsByGroup = {} } = useAccordionGroupContext();

package/dist/lib/badge/badge.js

@@ -4,11 +4,13 @@ import { useFloating, autoUpdate, offset, hide, useMergeRefs, FloatingPortal } f
 import { getColorShadesByVariant } from "../../utils/index.js";
 import { cloneElement } from "react";
 import { FLOATING_Z_INDEX } from "../../theme/index.js";
+import { usePortalContainer } from "../../theme/provider.js";
 import { Primitive } from "../primitive/primitive.js";
 import { getTypographyVar } from "../../theme/typography.js";
 const Badge = ({ color = "red", content, offset: offset$1 = 0, children }) => {
   var _a;
   const { main, contrast } = getColorShadesByVariant(color);
+  const portalRoot = usePortalContainer();
   const {
     floatingStyles,
     refs: { setFloating, setReference },
@@ -35,7 +37,7 @@ const Badge = ({ color = "red", content, offset: offset$1 = 0, children }) => {
       ...children.props,
       ref: mergedRefs
     }),
-    context.open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+    context.open && /* @__PURE__ */ jsx(FloatingPortal, { ...portalRoot && { root: portalRoot }, children: /* @__PURE__ */ jsx(
       "div",
       {
         style: {

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

@@ -5,6 +5,7 @@ import { useFloatingContext } from "../floating/helpers.js";
 import { FLOATING_Z_INDEX } from "../../../theme/index.js";
 import { useIsHydrated } from "../../../hooks/use-is-hydrated/index.js";
 import { createSxInterpolation } from "../../../utils/stylesheet.js";
+import { usePortalContainer } from "../../../theme/provider.js";
 const FloatingContent = ({
   style,
   floatingPortalProps,
@@ -17,7 +18,10 @@ const FloatingContent = ({
   const { getFloatingProps, context } = useFloatingContext();
   const mergedRefs = useMergeRefs([context.refs.setFloating, ref]);
   const isHydrated = useIsHydrated();
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: context.open && isHydrated && /* @__PURE__ */ jsx(FloatingPortal, { root: document.body, ...floatingPortalProps, children: /* @__PURE__ */ jsx(
+  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,
     {
       ...floatingOverlayProps,

package/dist/lib/notifications/notifications.js

@@ -7,6 +7,7 @@ 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 { usePortalContainer } from "../../theme/provider.js";
 import { Primitive } from "../primitive/primitive.js";
 import { getTypographyVar } from "../../theme/typography.js";
 import { IconButton } from "../icon-button/icon-button.js";
@@ -17,7 +18,8 @@ const Notifications = () => {
     notificationStore.getSnapshot,
     notificationStore.getServerSnapshot
   );
-  return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+  const portalRoot = usePortalContainer();
+  return /* @__PURE__ */ jsx(FloatingPortal, { ...portalRoot && { root: portalRoot }, children: /* @__PURE__ */ jsx(
     Primitive,
     {
       sx: {

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

@@ -4,6 +4,7 @@ import { useFloating, autoUpdate, shift, flip, size, FloatingPortal } from "@flo
 import { times, isNumber } from "lodash-es";
 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";
 const SWIPER_DOTS_SIZE_VAR = "--swiper-dots-size";
@@ -22,6 +23,7 @@ const SwiperDotsPaging = ({
   const [inViewIndexes, setInViewIndexes] = useState((api == null ? void 0 : api.slidesInView()) ?? []);
   const [totalSlides, setTotalSlides] = useState((api == null ? void 0 : api.slideNodes().length) ?? 0);
   const isHydrated = useIsHydrated();
+  const portalRoot = usePortalContainer();
   const {
     floatingStyles,
     refs: { setFloating, setReference }
@@ -81,7 +83,7 @@ const SwiperDotsPaging = ({
         }
       }
     ),
-    /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(FloatingPortal, { ...portalRoot && { root: portalRoot }, children: /* @__PURE__ */ jsx(
       Primitive,
       {
         style: {

package/dist/lib/swiper/swiper-side-arrows-paging/swiper-side-arrows-paging.js

@@ -3,6 +3,7 @@ import { useState, useRef, useCallback, useEffect } from "react";
 import { useFloating, autoUpdate, offset, size, FloatingPortal } from "@floating-ui/react";
 import { isEmpty, isNumber, isNil } from "lodash-es";
 import { getColorVar } from "../../../theme/palette.js";
+import { usePortalContainer } from "../../../theme/provider.js";
 import ArrowLeftIcon from "../../../assets/svg/arrow-left.svg.js";
 import { SvgLoader } from "../../../components/svg-loader.js";
 import { Primitive } from "../../primitive/primitive.js";
@@ -23,6 +24,7 @@ const SwiperSideArrowsPaging = ({
   const [canScrollNext, setCanScrollNext] = useState(api.canScrollNext());
   const [isVisible, setIsVisible] = useState(visibility === "always");
   const [referenceStyle, setReferenceStyle] = useState(anchorSelector ? {} : { top: 0, bottom: 0 });
+  const portalRoot = usePortalContainer();
   const hoverStateRef = useRef({ root: false, floating: false });
   const updateVisibility = useCallback(() => {
     const { root, floating } = hoverStateRef.current;
@@ -136,7 +138,7 @@ const SwiperSideArrowsPaging = ({
         }
       }
     ),
-    context.open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+    context.open && /* @__PURE__ */ jsx(FloatingPortal, { ...portalRoot && { root: portalRoot }, children: /* @__PURE__ */ jsx(
       Primitive,
       {
         style: {

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 { Stylesheet } from "../../stylesheet/stylesheet.js";
 import { useTabsContext } from "../tabs/helpers.js";
+import { Stylesheet } from "../../stylesheet/stylesheet.js";
 const TabIndicator = () => {
   const { activeIndex, tabIndicatorProps } = useTabsContext();
   const indicatorEl = useRef(null);

package/dist/lib/tooltip/tooltip.js

@@ -5,6 +5,7 @@ import { isUndefined, get } from "lodash-es";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
 import { getColorVar } from "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
+import { usePortalContainer } from "../../theme/provider.js";
 import { Primitive } from "../primitive/primitive.js";
 function Tooltip({
   children,
@@ -22,6 +23,7 @@ function Tooltip({
     defaultValue: defaultOpen,
     value: open
   });
+  const portalRoot = usePortalContainer();
   const triggerRef = useRef(null);
   const arrowRef = useRef(null);
   const handleOpenChange = (val, event, reason) => {
@@ -78,7 +80,7 @@ function Tooltip({
         ref: mergedRefs
       })
     ),
-    context.open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsxs(
+    context.open && /* @__PURE__ */ jsx(FloatingPortal, { ...portalRoot && { root: portalRoot }, children: /* @__PURE__ */ jsxs(
       Primitive,
       {
         style: {

package/dist/theme/index.js

@@ -1,7 +1,7 @@
 import { breakpoint, containerQuery, getSmallerScreens, mediaQuery, screens } from "./screens.js";
 import { getColorVar, groupedColors, paletteVars, parseColor } from "./palette.js";
 import { getSmallerTypographyVariants, getTypographyVar, typographyVars } from "./typography.js";
-import { ThemeProvider, useTheme } from "./provider.js";
+import { ThemeProvider, usePortalContainer, useTheme } from "./provider.js";
 import { createTheme, defaultTheme } from "./create-theme.js";
 const FLOATING_Z_INDEX = 9999;
 export {
@@ -21,5 +21,6 @@ export {
   parseColor,
   screens,
   typographyVars,
+  usePortalContainer,
   useTheme
 };

package/dist/theme/provider.d.ts

@@ -1,8 +1,13 @@
-import { PropsWithChildren } from 'react';
+import { FloatingPortal } from '@floating-ui/react';
+import { ComponentProps, PropsWithChildren } from 'react';
 import { Theme } from '.';
+type PortalContainer = ComponentProps<typeof FloatingPortal>['root'];
 export type ThemeProviderProps = PropsWithChildren<{
     theme: Theme;
     locale?: string;
+    root?: PortalContainer;
 }>;
+export declare const usePortalContainer: () => HTMLElement | ShadowRoot | import('react').MutableRefObject<HTMLElement | ShadowRoot | null> | null | undefined;
 export declare const useTheme: () => Theme;
-export declare const ThemeProvider: ({ theme, children, locale }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ThemeProvider: ({ theme, children, locale, root }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/theme/provider.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Global } from "@emotion/react";
 import { useContext, createContext } from "react";
 import { getColorVar } from "./palette.js";
@@ -6,6 +6,9 @@ import { flatten } from "flat";
 import { flatMap } from "lodash-es";
 import { getTypographyVar } from "./typography.js";
 import { LocaleContext, FALLBACK_LOCALE } from "../i18n/index.js";
+const usePortalContainer = () => {
+  return useContext(PortalContainerContext);
+};
 const useTheme = () => {
   const context = useContext(ThemeContext);
   if (!context) {
@@ -14,11 +17,12 @@ const useTheme = () => {
   return context;
 };
 const ThemeContext = createContext(null);
-const ThemeProvider = ({ theme, children, locale = FALLBACK_LOCALE }) => {
-  return /* @__PURE__ */ jsxs(ThemeContext.Provider, { value: theme, children: [
+const PortalContainerContext = createContext(null);
+const ThemeProvider = ({ theme, children, locale = FALLBACK_LOCALE, root }) => {
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsxs(PortalContainerContext.Provider, { value: root ?? null, children: [
     /* @__PURE__ */ jsx(Global, { styles: createGlobalStyle(theme) }),
     /* @__PURE__ */ jsx(LocaleContext.Provider, { value: locale, children })
-  ] });
+  ] }) });
 };
 const createGlobalStyle = ({ palette, typography }) => {
   const flattenPalette = flatten(palette);
@@ -304,5 +308,6 @@ const createGlobalStyle = ({ palette, typography }) => {
 };
 export {
   ThemeProvider,
+  usePortalContainer,
   useTheme
 };

package/package.json

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