@homebound/beam 2.98.2 → 2.99.0

package/dist/components/Modal/Modal.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { MutableRefObject, ReactNode } from "react";
 import { Only, Xss } from "../../Css";
 import { Callback } from "../../types";
 export declare type ModalSize = "sm" | "md" | "lg" | "xl";
@@ -19,7 +19,12 @@ export interface ModalProps {
     forceScrolling?: boolean;
     /** Adds a callback that is called _after_ close has definitely happened. */
     onClose?: Callback;
+    /** Imperative API for interacting with the Modal */
+    api?: MutableRefObject<ModalApi | undefined>;
 }
+export declare type ModalApi = {
+    setSize: (size: ModalProps["size"]) => void;
+};
 /**
  * Internal component for displaying a Modal; see `useModal` for the public API.
  *

package/dist/components/Modal/Modal.js

@@ -20,7 +20,7 @@ const utils_1 = require("../../utils");
  * Provides underlay, modal container, and header. Will disable scrolling of page under the modal.
  */
 function Modal(props) {
-    const { size = "md", content, forceScrolling } = props;
+    const { size = "md", content, forceScrolling, api } = props;
     const isFixedHeight = typeof size !== "string";
     const ref = (0, react_1.useRef)(null);
     const { modalBodyDiv, modalFooterDiv, modalHeaderDiv, drawerContentStack } = (0, BeamContext_1.useBeamContext)();
@@ -37,13 +37,16 @@ function Modal(props) {
     }, ref);
     const { modalProps } = (0, react_aria_1.useModal)();
     const { dialogProps, titleProps } = (0, react_aria_1.useDialog)({ role: "dialog" }, ref);
-    const [width, height] = getSize(size);
+    const [[width, height], setSize] = (0, react_1.useState)(getSize(size));
     const contentRef = (0, react_1.useRef)(null);
     const modalBodyRef = (0, react_1.useRef)(null);
     const modalFooterRef = (0, react_1.useRef)(null);
     const modalHeaderRef = (0, react_1.useRef)(null);
     const testId = (0, utils_1.useTestIds)({}, testIdPrefix);
     (0, react_aria_1.usePreventScroll)();
+    if (api) {
+        api.current = { setSize: (size = "md") => setSize(getSize(size)) };
+    }
     const [hasScroll, setHasScroll] = (0, react_1.useState)(forceScrolling !== null && forceScrolling !== void 0 ? forceScrolling : false);
     (0, resize_observer_1.default)(contentRef, ({ target }) => {
         if (forceScrolling === undefined && !isFixedHeight) {

package/dist/components/Modal/useModal.d.ts

@@ -4,5 +4,6 @@ export interface UseModalHook {
     openModal: (props: ModalProps) => void;
     closeModal: Callback;
     addCanClose: (canClose: CheckFn) => void;
+    setSize: (size: ModalProps["size"]) => void;
 }
 export declare function useModal(): UseModalHook;

package/dist/components/Modal/useModal.js

@@ -7,6 +7,7 @@ const utils_1 = require("../../utils");
 function useModal() {
     const { modalState, modalCanCloseChecks } = (0, BeamContext_1.useBeamContext)();
     const lastCanClose = (0, react_1.useRef)();
+    const api = (0, react_1.useRef)();
     (0, react_1.useEffect)(() => {
         return () => {
             modalCanCloseChecks.current = modalCanCloseChecks.current.filter((c) => c !== lastCanClose.current);
@@ -16,7 +17,7 @@ function useModal() {
         openModal(props) {
             // TODO Check already open?
             // TODO Check can leave?
-            modalState.current = props;
+            modalState.current = { ...props, api };
         },
         closeModal() {
             var _a;
@@ -38,6 +39,12 @@ function useModal() {
             ];
             lastCanClose.current = canClose;
         },
+        setSize(size) {
+            var _a;
+            if (modalState.current && ((_a = modalState.current.api) === null || _a === void 0 ? void 0 : _a.current)) {
+                modalState.current.api.current.setSize(size);
+            }
+        },
     }), [modalState, modalCanCloseChecks]);
 }
 exports.useModal = useModal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.98.2",
+  "version": "2.99.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",