@jobber/components 9.15.5 → 9.16.0

package/dist/SideDrawer/SideDrawer.d.ts

@@ -27,6 +27,11 @@ interface SideDrawerProps extends PropsWithChildren {
      * @default false
      */
     readonly inline?: boolean;
+    /**
+     * Element where the SideDrawer portal should be rendered.
+     * @default document.body
+     */
+    readonly container?: HTMLElement | null;
     /**
      * **Use at your own risk:** Custom class names for specific elements. This should only be used as a
      * **last resort**. Using this may result in unexpected side effects.
@@ -44,7 +49,7 @@ interface SideDrawerProps extends PropsWithChildren {
         container?: CSSProperties;
     };
 }
-export declare function SideDrawer({ children, onRequestClose, open, variation, scrollDirection, inline, UNSAFE_className, UNSAFE_style, }: SideDrawerProps): React.JSX.Element | null;
+export declare function SideDrawer({ children, onRequestClose, open, variation, scrollDirection, inline, container, UNSAFE_className, UNSAFE_style, }: SideDrawerProps): React.JSX.Element | null;
 export declare namespace SideDrawer {
     var Title: typeof SideDrawerTitle;
     var Toolbar: typeof SideDrawerToolbar;

package/dist/SideDrawer-cjs.js

@@ -115,14 +115,15 @@ const useSideDrawerState = (open) => {
         noFooterShadow,
     };
 };
-function SideDrawer({ children, onRequestClose, open, variation = "base", scrollDirection, inline = false, UNSAFE_className, UNSAFE_style, }) {
+function SideDrawer({ children, onRequestClose, open, variation = "base", scrollDirection, inline = false, container, UNSAFE_className, UNSAFE_style, }) {
     var _a;
     const { ref, setRef, components, setComponents, slots, sideDrawerRef, headerShadowRef, noHeaderShadow, footerShadowRef, noFooterShadow, } = useSideDrawerState(open);
     const { t } = useAtlantisI18n.useAtlantisI18n(sideDrawerMessages);
     jobberHooks.useRefocusOnActivator(open);
-    const container = ((_a = globalThis.document) === null || _a === void 0 ? void 0 : _a.body) || null;
+    const body = ((_a = globalThis.document) === null || _a === void 0 ? void 0 : _a.body) || null;
+    const portalContainer = container || body;
     const isMounted = jobberHooks.useIsMounted();
-    if (!isMounted.current && !container)
+    if (!isMounted.current && !portalContainer)
         return null;
     const SideDrawerRender = (React.createElement(SideDrawerContext.Provider, { value: {
             actionPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(slots.actions.selector),
@@ -167,7 +168,7 @@ function SideDrawer({ children, onRequestClose, open, variation = "base", scroll
     if (inline) {
         return SideDrawerRender;
     }
-    return ReactDOM.createPortal(SideDrawerRender, container);
+    return ReactDOM.createPortal(SideDrawerRender, portalContainer);
     function handleKeyDown(event) {
         if (event.key === "Escape") {
             event.stopPropagation();

package/dist/SideDrawer-es.js

@@ -113,14 +113,15 @@ const useSideDrawerState = (open) => {
         noFooterShadow,
     };
 };
-function SideDrawer({ children, onRequestClose, open, variation = "base", scrollDirection, inline = false, UNSAFE_className, UNSAFE_style, }) {
+function SideDrawer({ children, onRequestClose, open, variation = "base", scrollDirection, inline = false, container, UNSAFE_className, UNSAFE_style, }) {
     var _a;
     const { ref, setRef, components, setComponents, slots, sideDrawerRef, headerShadowRef, noHeaderShadow, footerShadowRef, noFooterShadow, } = useSideDrawerState(open);
     const { t } = useAtlantisI18n(sideDrawerMessages);
     useRefocusOnActivator(open);
-    const container = ((_a = globalThis.document) === null || _a === void 0 ? void 0 : _a.body) || null;
+    const body = ((_a = globalThis.document) === null || _a === void 0 ? void 0 : _a.body) || null;
+    const portalContainer = container || body;
     const isMounted = useIsMounted();
-    if (!isMounted.current && !container)
+    if (!isMounted.current && !portalContainer)
         return null;
     const SideDrawerRender = (React__default.createElement(SideDrawerContext.Provider, { value: {
             actionPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(slots.actions.selector),
@@ -165,7 +166,7 @@ function SideDrawer({ children, onRequestClose, open, variation = "base", scroll
     if (inline) {
         return SideDrawerRender;
     }
-    return createPortal(SideDrawerRender, container);
+    return createPortal(SideDrawerRender, portalContainer);
     function handleKeyDown(event) {
         if (event.key === "Escape") {
             event.stopPropagation();

package/dist/docs/SideDrawer/SideDrawer.md

@@ -166,6 +166,7 @@ SideSheet content.
 |------|------|----------|---------|-------------|
 | `onRequestClose` | `() => void` | Yes | — | Callback function to close the drawer. |
 | `open` | `boolean` | Yes | — | Whether or not the drawer is open. |
+| `container` | `HTMLElement` | No | `document.body` | Element where the SideDrawer portal should be rendered. |
 | `inline` | `boolean` | No | `false` | Changes whether the SideDrawer is positioned to the side of the viewport or inline with the content. |
 | `scrollDirection` | `"normal" | "reverse"` | No | — | Change the scrolling direction of the drawer. Useful for chat-like interfaces. |
 | `UNSAFE_className` | `{ container?: string; }` | No | — | **Use at your own risk:** Custom class names for specific elements. This should only be used as a **last resort**. Us... |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "9.15.5",
+  "version": "9.16.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -548,5 +548,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "a9ac41dfb966649048fcaf7cce2db45f2569fc29"
+  "gitHead": "a4505ca7fe0a7ffe781409655a63fe9b8ea852ec"
 }