@mittwald/flow-react-components 1.6.0-next.36 → 1.6.0-next.37

package/dist/js/packages/components/src/components/Modal/Modal.mjs

@@ -8,7 +8,9 @@ import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
 import { IconClose } from "../Icon/components/icons/IconClose.mjs";
 import { Wrap } from "../Wrap/Wrap.mjs";
 import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
+import useSelector from "../../lib/mobx/useSelector.mjs";
 import { OverlayController } from "../../lib/controller/overlay/OverlayController.mjs";
+import { useOverlayContext } from "../../lib/controller/overlay/context.mjs";
 import { Action } from "../Action/Action.mjs";
 import ButtonView from "../../views/ButtonView.mjs";
 import DivView from "../../views/DivView.mjs";
@@ -25,7 +27,11 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 var Modal = flowComponent("Modal", (props) => {
 	const { size = "s", offCanvas, controller, children, ref, className, offCanvasOrientation = "right", showCloseButton, ...overlayProps } = props;
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "Modal");
-	const keyboardVisible = useVirtualKeyboardVisible();
+	const controllerFromContext = useOverlayContext().byType.Modal;
+	const knownController = controller ?? controllerFromContext;
+	const isOpenFromController = useSelector(() => knownController?.isOpen ?? true, [knownController]);
+	const isOpen = overlayProps.isOpen ?? isOpenFromController;
+	const keyboardVisible = useVirtualKeyboardVisible(isOpen);
 	const rootClassName = clsx(offCanvas ? Modal_module_default.offCanvas : Modal_module_default.modal, Modal_module_default[`size-${size}`], offCanvasOrientation === "left" && Modal_module_default["left"], keyboardVisible && Modal_module_default.keyboardVisible, className);
 	const generatedId = useId();
 	const closeButtonClassName = clsx(Modal_module_default.closeButton, showCloseButton === true && Modal_module_default.alwaysVisible, showCloseButton === false && Modal_module_default.alwaysHidden);

package/dist/js/packages/components/src/components/Modal/Modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","names":["locales","styles","_Fragment"],"sources":["../../../../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import { type PropsWithChildren, type ReactNode, Suspense, useId } from \"react\";\nimport styles from \"./Modal.module.scss\";\nimport clsx from \"clsx\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { OverlayController } from \"@/lib/controller/overlay\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Overlay, type OverlayProps } from \"@/components/Overlay/Overlay\";\nimport { Action } from \"@/components/Action\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ButtonView from \"@/views/ButtonView\";\nimport DivView from \"@/views/DivView\";\nimport { OffCanvasSuspenseFallback } from \"@/components/Modal/components/OffCanvasSuspenseFallback\";\nimport { ConfirmUnsavedChangesModal } from \"@/components/Modal/components/ConfirmUnsavedChangesModal/ConfirmUnsavedChangesModal\";\nimport Wrap from \"@/components/Wrap\";\nimport { ClearPropsContext } from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport ClearPropsContextView from \"@/views/ClearPropsContextView\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { useVirtualKeyboardVisible } from \"@/lib/hooks/dom/useVirtualKeyboardVisible\";\nimport locales from \"./locales/*.locale.json\";\n\ntype SupportedOverlayProps = Pick<\n  OverlayProps,\n  \"isOpen\" | \"isDefaultOpen\" | \"onOpen\" | \"onClose\" | \"onOpenChange\"\n>;\n\nexport interface ModalProps\n  extends\n    PropsWithChildren,\n    FlowComponentProps,\n    PropsWithClassName,\n    SupportedOverlayProps {\n  /** The size of the modal. @default \"s\" */\n  size?: \"s\" | \"m\" | \"l\";\n  /** Whether the modal should be displayed as an off canvas. */\n  offCanvas?: boolean;\n  /**\n   * Whether the off canvas should be displayed on the right or left side of the\n   * screen. @default \"right\"\n   */\n  offCanvasOrientation?: \"left\" | \"right\";\n  /** An overlay controller to control the modal state. */\n  controller?: OverlayController;\n  /**\n   * Accepts \"actionConfirm\" to use the modal as a confirmation modal for an\n   * action.\n   */\n  slot?: string;\n  /** Whether the modal can be closed by clicking outside of it. */\n  isDismissable?: boolean;\n  /** Whether the close button should be visible */\n  showCloseButton?: boolean;\n  /**\n   * Whether closing the modal must be confirmed – use it to protect unsaved\n   * changes. `false` does not switch off the confirmation of a dirty `Form`\n   * inside the modal; set `confirmModalCloseOnUnsavedChanges={false}` on the\n   * `Form` for that.\n   */\n  confirmOnClose?: boolean;\n}\n\nexport const Modal = flowComponent(\"Modal\", (props) => {\n  const {\n    size = \"s\",\n    offCanvas,\n    controller,\n    children,\n    ref,\n    className,\n    offCanvasOrientation = \"right\",\n    showCloseButton,\n    ...overlayProps\n  } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Modal\");\n\n  // On mobile the header/footer are docked (sticky) while at rest, but flow\n  // normally while the on-screen keyboard is open so the content gets the full\n  // available space (see Modal.module.scss). #2423\n  const keyboardVisible = useVirtualKeyboardVisible();\n\n  const rootClassName = clsx(\n    offCanvas ? styles.offCanvas : styles.modal,\n    styles[`size-${size}`],\n    offCanvasOrientation === \"left\" && styles[\"left\"],\n    keyboardVisible && styles.keyboardVisible,\n    className,\n  );\n\n  const generatedId = useId();\n\n  const closeButtonClassName = clsx(\n    styles.closeButton,\n    showCloseButton === true && styles.alwaysVisible,\n    showCloseButton === false && styles.alwaysHidden,\n  );\n\n  const header = (children: ReactNode) => (\n    <>\n      <DivView className={styles.headerTitle}>{children}</DivView>\n      <ClearPropsContext>\n        <ClearPropsContextView>\n          <Action closeModal={{ bypassConfirmation: true }}>\n            <ButtonView\n              variant=\"plain\"\n              color=\"secondary\"\n              aria-label={stringFormatter.format(\"close\")}\n              className={closeButtonClassName}\n            >\n              <IconClose />\n            </ButtonView>\n          </Action>\n        </ClearPropsContextView>\n      </ClearPropsContext>\n    </>\n  );\n\n  const nestedHeadingLevel = 3;\n\n  const nestedHeadingProps: PropsContext = {\n    Heading: { level: nestedHeadingLevel },\n    Section: {\n      Header: { Heading: { level: nestedHeadingLevel } },\n      Heading: { level: nestedHeadingLevel },\n      hideSeparator: true,\n    },\n    Header: { Heading: { level: nestedHeadingLevel } },\n  };\n\n  const propsContext: PropsContext = {\n    Content: {\n      ...nestedHeadingProps,\n      className: styles.content,\n    },\n    ColumnLayout: {\n      ...nestedHeadingProps,\n      l: [2, 1],\n      m: [1],\n      className: styles.columnLayout,\n      AccentBox: { className: styles.accentBox, backgroundColor: \"neutral\" },\n      wrapWith: <ClearPropsContext />,\n    },\n    Heading: {\n      className: styles.header,\n      level: 2,\n      children: dynamic((props) => header(props.children)),\n      id: generatedId,\n    },\n    ActionGroup: {\n      className: styles.actionGroup,\n      spacing: \"m\",\n      Action: {\n        closeModal: dynamic((props) => {\n          if (props.closeModal === undefined) {\n            return;\n          }\n          if (props.closeModal === true) {\n            return { bypassConfirmation: true };\n          }\n          return {\n            bypassConfirmation: true,\n            ...props.closeModal,\n          };\n        }),\n        closeOverlay: dynamic((props) => {\n          const { closeOverlay } = props;\n          if (closeOverlay === undefined || closeOverlay === false) {\n            return closeOverlay;\n          }\n          // `true` keeps its \"the nearest overlay\" meaning by leaving `overlay`\n          // unset – the options object means the same thing.\n          if (closeOverlay === true) {\n            return { bypassConfirmation: true };\n          }\n          if (\n            closeOverlay instanceof OverlayController ||\n            typeof closeOverlay === \"string\"\n          ) {\n            return {\n              bypassConfirmation: true,\n              overlay: closeOverlay,\n            };\n          }\n          return {\n            bypassConfirmation: true,\n            ...closeOverlay,\n          };\n        }),\n      },\n    },\n  };\n\n  return (\n    <Overlay\n      className={rootClassName}\n      controller={controller}\n      ref={ref}\n      aria-labelledby={generatedId}\n      {...overlayProps}\n    >\n      <PropsContextProvider props={propsContext}>\n        <Wrap if={offCanvas}>\n          <Suspense fallback={<OffCanvasSuspenseFallback />}>\n            {children}\n          </Suspense>\n        </Wrap>\n      </PropsContextProvider>\n      <ConfirmUnsavedChangesModal />\n    </Overlay>\n  );\n});\n\nexport default Modal;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkEA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,OAAO,KACP,WACA,YACA,UACA,KACA,WACA,uBAAuB,SACvB,iBACA,GAAG,iBACD;CAEJ,MAAM,kBAAkB,4BAA4BA,kBAAS,OAAO;CAKpE,MAAM,kBAAkB,0BAA0B;CAElD,MAAM,gBAAgB,KACpB,YAAYC,qBAAO,YAAYA,qBAAO,OACtCA,qBAAO,QAAQ,SACf,yBAAyB,UAAUA,qBAAO,SAC1C,mBAAmBA,qBAAO,iBAC1B,SACF;CAEA,MAAM,cAAc,MAAM;CAE1B,MAAM,uBAAuB,KAC3BA,qBAAO,aACP,oBAAoB,QAAQA,qBAAO,eACnC,oBAAoB,SAASA,qBAAO,YACtC;CAEA,MAAM,UAAU,aACd,qBAAAC,YAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAS,WAAWD,qBAAO;EAAc;CAAkB,CAAA,GAC3D,oBAAC,mBAAD,EAAA,UACE,oBAAC,uBAAD,EAAA,UACE,oBAAC,QAAD;EAAQ,YAAY,EAAE,oBAAoB,KAAK;EAC7C,UAAA,oBAAC,YAAD;GACE,SAAQ;GACR,OAAM;GACN,cAAY,gBAAgB,OAAO,OAAO;GAC1C,WAAW;GAEX,UAAA,oBAAC,WAAD,CAAY,CAAA;EACF,CAAA;CACN,CAAA,EACa,CAAA,EACN,CAAA,CACnB,EAAA,CAAA;CAGJ,MAAM,qBAAqB;CAE3B,MAAM,qBAAmC;EACvC,SAAS,EAAE,OAAO,mBAAmB;EACrC,SAAS;GACP,QAAQ,EAAE,SAAS,EAAE,OAAO,mBAAmB,EAAE;GACjD,SAAS,EAAE,OAAO,mBAAmB;GACrC,eAAe;EACjB;EACA,QAAQ,EAAE,SAAS,EAAE,OAAO,mBAAmB,EAAE;CACnD;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,GAAG;GACH,WAAWA,qBAAO;EACpB;EACA,cAAc;GACZ,GAAG;GACH,GAAG,CAAC,GAAG,CAAC;GACR,GAAG,CAAC,CAAC;GACL,WAAWA,qBAAO;GAClB,WAAW;IAAE,WAAWA,qBAAO;IAAW,iBAAiB;GAAU;GACrE,UAAU,oBAAC,mBAAD,CAAoB,CAAA;EAChC;EACA,SAAS;GACP,WAAWA,qBAAO;GAClB,OAAO;GACP,UAAU,SAAS,UAAU,OAAO,MAAM,QAAQ,CAAC;GACnD,IAAI;EACN;EACA,aAAa;GACX,WAAWA,qBAAO;GAClB,SAAS;GACT,QAAQ;IACN,YAAY,SAAS,UAAU;KAC7B,IAAI,MAAM,eAAe,KAAA,GACvB;KAEF,IAAI,MAAM,eAAe,MACvB,OAAO,EAAE,oBAAoB,KAAK;KAEpC,OAAO;MACL,oBAAoB;MACpB,GAAG,MAAM;KACX;IACF,CAAC;IACD,cAAc,SAAS,UAAU;KAC/B,MAAM,EAAE,iBAAiB;KACzB,IAAI,iBAAiB,KAAA,KAAa,iBAAiB,OACjD,OAAO;KAIT,IAAI,iBAAiB,MACnB,OAAO,EAAE,oBAAoB,KAAK;KAEpC,IACE,wBAAwB,qBACxB,OAAO,iBAAiB,UAExB,OAAO;MACL,oBAAoB;MACpB,SAAS;KACX;KAEF,OAAO;MACL,oBAAoB;MACpB,GAAG;KACL;IACF,CAAC;GACH;EACF;CACF;CAEA,OACE,qBAAC,SAAD;EACE,WAAW;EACC;EACP;EACL,mBAAiB;EACjB,GAAI;EALN,UAAA,CAOE,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,MAAD;IAAM,IAAI;IACR,UAAA,oBAAC,UAAD;KAAU,UAAU,oBAAC,2BAAD,CAA4B,CAAA;KAC7C;IACO,CAAA;GACN,CAAA;EACc,CAAA,GACtB,oBAAC,4BAAD,CAA6B,CAAA,CACtB;;AAEb,CAAC"}
+{"version":3,"file":"Modal.mjs","names":["locales","styles","_Fragment"],"sources":["../../../../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import { type PropsWithChildren, type ReactNode, Suspense, useId } from \"react\";\nimport styles from \"./Modal.module.scss\";\nimport clsx from \"clsx\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { OverlayController } from \"@/lib/controller/overlay\";\nimport { useOverlayContext } from \"@/lib/controller/overlay/context\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Overlay, type OverlayProps } from \"@/components/Overlay/Overlay\";\nimport { Action } from \"@/components/Action\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ButtonView from \"@/views/ButtonView\";\nimport DivView from \"@/views/DivView\";\nimport { OffCanvasSuspenseFallback } from \"@/components/Modal/components/OffCanvasSuspenseFallback\";\nimport { ConfirmUnsavedChangesModal } from \"@/components/Modal/components/ConfirmUnsavedChangesModal/ConfirmUnsavedChangesModal\";\nimport Wrap from \"@/components/Wrap\";\nimport { ClearPropsContext } from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport ClearPropsContextView from \"@/views/ClearPropsContextView\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { useVirtualKeyboardVisible } from \"@/lib/hooks/dom/useVirtualKeyboardVisible\";\nimport useSelector from \"@/lib/mobx/useSelector\";\nimport locales from \"./locales/*.locale.json\";\n\ntype SupportedOverlayProps = Pick<\n  OverlayProps,\n  \"isOpen\" | \"isDefaultOpen\" | \"onOpen\" | \"onClose\" | \"onOpenChange\"\n>;\n\nexport interface ModalProps\n  extends\n    PropsWithChildren,\n    FlowComponentProps,\n    PropsWithClassName,\n    SupportedOverlayProps {\n  /** The size of the modal. @default \"s\" */\n  size?: \"s\" | \"m\" | \"l\";\n  /** Whether the modal should be displayed as an off canvas. */\n  offCanvas?: boolean;\n  /**\n   * Whether the off canvas should be displayed on the right or left side of the\n   * screen. @default \"right\"\n   */\n  offCanvasOrientation?: \"left\" | \"right\";\n  /** An overlay controller to control the modal state. */\n  controller?: OverlayController;\n  /**\n   * Accepts \"actionConfirm\" to use the modal as a confirmation modal for an\n   * action.\n   */\n  slot?: string;\n  /** Whether the modal can be closed by clicking outside of it. */\n  isDismissable?: boolean;\n  /** Whether the close button should be visible */\n  showCloseButton?: boolean;\n  /**\n   * Whether closing the modal must be confirmed – use it to protect unsaved\n   * changes. `false` does not switch off the confirmation of a dirty `Form`\n   * inside the modal; set `confirmModalCloseOnUnsavedChanges={false}` on the\n   * `Form` for that.\n   */\n  confirmOnClose?: boolean;\n}\n\nexport const Modal = flowComponent(\"Modal\", (props) => {\n  const {\n    size = \"s\",\n    offCanvas,\n    controller,\n    children,\n    ref,\n    className,\n    offCanvasOrientation = \"right\",\n    showCloseButton,\n    ...overlayProps\n  } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Modal\");\n\n  // The controller `Overlay` will use, if it exists yet: from props or from a\n  // trigger. Without one (a standalone Modal) `Overlay` creates its own, and\n  // the keyboard is tracked whether the modal is open or not.\n  const controllerFromContext = useOverlayContext().byType.Modal;\n  const knownController = controller ?? controllerFromContext;\n  const isOpenFromController = useSelector(\n    () => knownController?.isOpen ?? true,\n    [knownController],\n  );\n  const isOpen = overlayProps.isOpen ?? isOpenFromController;\n\n  // On mobile the header/footer are docked (sticky) while at rest, but flow\n  // normally while the on-screen keyboard is open so the content gets the full\n  // available space (see Modal.module.scss). #2423\n  const keyboardVisible = useVirtualKeyboardVisible(isOpen);\n\n  const rootClassName = clsx(\n    offCanvas ? styles.offCanvas : styles.modal,\n    styles[`size-${size}`],\n    offCanvasOrientation === \"left\" && styles[\"left\"],\n    keyboardVisible && styles.keyboardVisible,\n    className,\n  );\n\n  const generatedId = useId();\n\n  const closeButtonClassName = clsx(\n    styles.closeButton,\n    showCloseButton === true && styles.alwaysVisible,\n    showCloseButton === false && styles.alwaysHidden,\n  );\n\n  const header = (children: ReactNode) => (\n    <>\n      <DivView className={styles.headerTitle}>{children}</DivView>\n      <ClearPropsContext>\n        <ClearPropsContextView>\n          <Action closeModal={{ bypassConfirmation: true }}>\n            <ButtonView\n              variant=\"plain\"\n              color=\"secondary\"\n              aria-label={stringFormatter.format(\"close\")}\n              className={closeButtonClassName}\n            >\n              <IconClose />\n            </ButtonView>\n          </Action>\n        </ClearPropsContextView>\n      </ClearPropsContext>\n    </>\n  );\n\n  const nestedHeadingLevel = 3;\n\n  const nestedHeadingProps: PropsContext = {\n    Heading: { level: nestedHeadingLevel },\n    Section: {\n      Header: { Heading: { level: nestedHeadingLevel } },\n      Heading: { level: nestedHeadingLevel },\n      hideSeparator: true,\n    },\n    Header: { Heading: { level: nestedHeadingLevel } },\n  };\n\n  const propsContext: PropsContext = {\n    Content: {\n      ...nestedHeadingProps,\n      className: styles.content,\n    },\n    ColumnLayout: {\n      ...nestedHeadingProps,\n      l: [2, 1],\n      m: [1],\n      className: styles.columnLayout,\n      AccentBox: { className: styles.accentBox, backgroundColor: \"neutral\" },\n      wrapWith: <ClearPropsContext />,\n    },\n    Heading: {\n      className: styles.header,\n      level: 2,\n      children: dynamic((props) => header(props.children)),\n      id: generatedId,\n    },\n    ActionGroup: {\n      className: styles.actionGroup,\n      spacing: \"m\",\n      Action: {\n        closeModal: dynamic((props) => {\n          if (props.closeModal === undefined) {\n            return;\n          }\n          if (props.closeModal === true) {\n            return { bypassConfirmation: true };\n          }\n          return {\n            bypassConfirmation: true,\n            ...props.closeModal,\n          };\n        }),\n        closeOverlay: dynamic((props) => {\n          const { closeOverlay } = props;\n          if (closeOverlay === undefined || closeOverlay === false) {\n            return closeOverlay;\n          }\n          // `true` keeps its \"the nearest overlay\" meaning by leaving `overlay`\n          // unset – the options object means the same thing.\n          if (closeOverlay === true) {\n            return { bypassConfirmation: true };\n          }\n          if (\n            closeOverlay instanceof OverlayController ||\n            typeof closeOverlay === \"string\"\n          ) {\n            return {\n              bypassConfirmation: true,\n              overlay: closeOverlay,\n            };\n          }\n          return {\n            bypassConfirmation: true,\n            ...closeOverlay,\n          };\n        }),\n      },\n    },\n  };\n\n  return (\n    <Overlay\n      className={rootClassName}\n      controller={controller}\n      ref={ref}\n      aria-labelledby={generatedId}\n      {...overlayProps}\n    >\n      <PropsContextProvider props={propsContext}>\n        <Wrap if={offCanvas}>\n          <Suspense fallback={<OffCanvasSuspenseFallback />}>\n            {children}\n          </Suspense>\n        </Wrap>\n      </PropsContextProvider>\n      <ConfirmUnsavedChangesModal />\n    </Overlay>\n  );\n});\n\nexport default Modal;\n"],"mappings":"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"}

package/dist/js/packages/components/src/lib/hooks/dom/useVirtualKeyboardVisible.mjs

@@ -11,12 +11,15 @@ var isVirtualKeyboardVisible = (layoutViewportHeight, visualViewportHeight, thre
 * VisualViewport API. On iOS and Android the layout viewport stays while the
 * visual viewport shrinks by the keyboard height. Returns `false` where
 * VisualViewport is unavailable (SSR, very old browsers).
+*
+* Reading the viewport height forces a synchronous layout, so the hook neither
+* reads nor listens while `isEnabled` is `false`, and returns `false` then.
 */
-var useVirtualKeyboardVisible = () => {
+var useVirtualKeyboardVisible = (isEnabled = true) => {
 	const [visible, setVisible] = useState(false);
 	useEffect(() => {
 		const viewport = window.visualViewport;
-		if (!viewport) return;
+		if (!isEnabled || !viewport) return;
 		const update = () => {
 			setVisible(isVirtualKeyboardVisible(window.innerHeight, viewport.height));
 		};
@@ -26,9 +29,10 @@ var useVirtualKeyboardVisible = () => {
 		return () => {
 			viewport.removeEventListener("resize", update);
 			viewport.removeEventListener("scroll", update);
+			setVisible(false);
 		};
-	}, []);
-	return visible;
+	}, [isEnabled]);
+	return isEnabled && visible;
 };
 //#endregion
 export { isVirtualKeyboardVisible, useVirtualKeyboardVisible };

package/dist/js/packages/components/src/lib/hooks/dom/useVirtualKeyboardVisible.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useVirtualKeyboardVisible.mjs","names":[],"sources":["../../../../../../../../src/lib/hooks/dom/useVirtualKeyboardVisible.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\n/**\n * Minimum shrinkage (px) of the visual viewport relative to the layout viewport\n * that we treat as \"the on-screen keyboard is open\". Filters out the much\n * smaller changes caused by mobile browser chrome (e.g. the address bar).\n */\nexport const VIRTUAL_KEYBOARD_MIN_HEIGHT = 150;\n\n/**\n * Pure predicate: the visual viewport is at least `threshold` px shorter than\n * the layout viewport (i.e. the on-screen keyboard is open).\n */\nexport const isVirtualKeyboardVisible = (\n  layoutViewportHeight: number,\n  visualViewportHeight: number,\n  threshold: number = VIRTUAL_KEYBOARD_MIN_HEIGHT,\n): boolean => layoutViewportHeight - visualViewportHeight > threshold;\n\n/**\n * Tracks whether the on-screen (virtual) keyboard is currently open, using the\n * VisualViewport API. On iOS and Android the layout viewport stays while the\n * visual viewport shrinks by the keyboard height. Returns `false` where\n * VisualViewport is unavailable (SSR, very old browsers).\n */\nexport const useVirtualKeyboardVisible = (): boolean => {\n  const [visible, setVisible] = useState(false);\n\n  useEffect(() => {\n    const viewport = window.visualViewport;\n    if (!viewport) {\n      return;\n    }\n    const update = (): void => {\n      setVisible(isVirtualKeyboardVisible(window.innerHeight, viewport.height));\n    };\n    update();\n    viewport.addEventListener(\"resize\", update);\n    viewport.addEventListener(\"scroll\", update);\n    return () => {\n      viewport.removeEventListener(\"resize\", update);\n      viewport.removeEventListener(\"scroll\", update);\n    };\n  }, []);\n\n  return visible;\n};\n"],"mappings":";;;;;;;AAaA,IAAa,4BACX,sBACA,sBACA,YAAA,QACY,uBAAuB,uBAAuB;;;;;;;AAQ5D,IAAa,kCAA2C;CACtD,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,gBAAgB;EACd,MAAM,WAAW,OAAO;EACxB,IAAI,CAAC,UACH;EAEF,MAAM,eAAqB;GACzB,WAAW,yBAAyB,OAAO,aAAa,SAAS,MAAM,CAAC;EAC1E;EACA,OAAO;EACP,SAAS,iBAAiB,UAAU,MAAM;EAC1C,SAAS,iBAAiB,UAAU,MAAM;EAC1C,aAAa;GACX,SAAS,oBAAoB,UAAU,MAAM;GAC7C,SAAS,oBAAoB,UAAU,MAAM;EAC/C;CACF,GAAG,CAAC,CAAC;CAEL,OAAO;AACT"}
+{"version":3,"file":"useVirtualKeyboardVisible.mjs","names":[],"sources":["../../../../../../../../src/lib/hooks/dom/useVirtualKeyboardVisible.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\n/**\n * Minimum shrinkage (px) of the visual viewport relative to the layout viewport\n * that we treat as \"the on-screen keyboard is open\". Filters out the much\n * smaller changes caused by mobile browser chrome (e.g. the address bar).\n */\nexport const VIRTUAL_KEYBOARD_MIN_HEIGHT = 150;\n\n/**\n * Pure predicate: the visual viewport is at least `threshold` px shorter than\n * the layout viewport (i.e. the on-screen keyboard is open).\n */\nexport const isVirtualKeyboardVisible = (\n  layoutViewportHeight: number,\n  visualViewportHeight: number,\n  threshold: number = VIRTUAL_KEYBOARD_MIN_HEIGHT,\n): boolean => layoutViewportHeight - visualViewportHeight > threshold;\n\n/**\n * Tracks whether the on-screen (virtual) keyboard is currently open, using the\n * VisualViewport API. On iOS and Android the layout viewport stays while the\n * visual viewport shrinks by the keyboard height. Returns `false` where\n * VisualViewport is unavailable (SSR, very old browsers).\n *\n * Reading the viewport height forces a synchronous layout, so the hook neither\n * reads nor listens while `isEnabled` is `false`, and returns `false` then.\n */\nexport const useVirtualKeyboardVisible = (isEnabled = true): boolean => {\n  const [visible, setVisible] = useState(false);\n\n  useEffect(() => {\n    const viewport = window.visualViewport;\n    if (!isEnabled || !viewport) {\n      return;\n    }\n    const update = (): void => {\n      setVisible(isVirtualKeyboardVisible(window.innerHeight, viewport.height));\n    };\n    update();\n    viewport.addEventListener(\"resize\", update);\n    viewport.addEventListener(\"scroll\", update);\n    return () => {\n      viewport.removeEventListener(\"resize\", update);\n      viewport.removeEventListener(\"scroll\", update);\n      setVisible(false);\n    };\n  }, [isEnabled]);\n\n  return isEnabled && visible;\n};\n"],"mappings":";;;;;;;AAaA,IAAa,4BACX,sBACA,sBACA,YAAA,QACY,uBAAuB,uBAAuB;;;;;;;;;;AAW5D,IAAa,6BAA6B,YAAY,SAAkB;CACtE,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,gBAAgB;EACd,MAAM,WAAW,OAAO;EACxB,IAAI,CAAC,aAAa,CAAC,UACjB;EAEF,MAAM,eAAqB;GACzB,WAAW,yBAAyB,OAAO,aAAa,SAAS,MAAM,CAAC;EAC1E;EACA,OAAO;EACP,SAAS,iBAAiB,UAAU,MAAM;EAC1C,SAAS,iBAAiB,UAAU,MAAM;EAC1C,aAAa;GACX,SAAS,oBAAoB,UAAU,MAAM;GAC7C,SAAS,oBAAoB,UAAU,MAAM;GAC7C,WAAW,KAAK;EAClB;CACF,GAAG,CAAC,SAAS,CAAC;CAEd,OAAO,aAAa;AACtB"}

package/dist/types/lib/hooks/dom/useVirtualKeyboardVisible.d.ts

@@ -14,5 +14,8 @@ export declare const isVirtualKeyboardVisible: (layoutViewportHeight: number, vi
  * VisualViewport API. On iOS and Android the layout viewport stays while the
  * visual viewport shrinks by the keyboard height. Returns `false` where
  * VisualViewport is unavailable (SSR, very old browsers).
+ *
+ * Reading the viewport height forces a synchronous layout, so the hook neither
+ * reads nor listens while `isEnabled` is `false`, and returns `false` then.
  */
-export declare const useVirtualKeyboardVisible: () => boolean;
+export declare const useVirtualKeyboardVisible: (isEnabled?: boolean) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "1.6.0-next.36",
+  "version": "1.6.0-next.37",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://flow.mittwald.de",
@@ -84,9 +84,9 @@
     "@internationalized/string-compiler": "^3.4.1",
     "@lezer/common": "^1.5.2",
     "@lezer/highlight": "^1.2.3",
-    "@mittwald/flow-icons": "^1.6.0-next.36",
+    "@mittwald/flow-icons": "^1.6.0-next.37",
     "@mittwald/password-tools-js": "^3.0.0",
-    "@mittwald/react-tunnel": "^1.6.0-next.36",
+    "@mittwald/react-tunnel": "^1.6.0-next.37",
     "@mittwald/react-use-promise": "^4.2.2",
     "@react-aria/form": "^3.2.1",
     "@react-aria/i18n": "^3.13.1",
@@ -139,13 +139,13 @@
     "@internationalized/date": "^3.12.3",
     "@lezer/generator": "^1.8.0",
     "@lezer/lr": "^1.4.10",
-    "@mittwald/flow-components-base": "1.6.0-next.36",
-    "@mittwald/flow-core": "1.6.0-next.36",
-    "@mittwald/flow-design-tokens": "1.6.0-next.36",
-    "@mittwald/flow-icons-base": "1.6.0-next.36",
+    "@mittwald/flow-components-base": "1.6.0-next.37",
+    "@mittwald/flow-core": "1.6.0-next.37",
+    "@mittwald/flow-design-tokens": "1.6.0-next.37",
+    "@mittwald/flow-icons-base": "1.6.0-next.37",
     "@mittwald/react-use-promise": "^4.2.2",
     "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
-    "@mittwald/typescript-config": "1.6.0-next.36",
+    "@mittwald/typescript-config": "1.6.0-next.37",
     "@nx/storybook": "^22.7.6",
     "@storybook/addon-a11y": "^10.5.10",
     "@storybook/addon-actions": "^9.0.8",
@@ -199,7 +199,7 @@
   },
   "peerDependencies": {
     "@internationalized/date": "^3.12.2",
-    "@mittwald/flow-icons-pro": "1.6.0-next.36",
+    "@mittwald/flow-icons-pro": "1.6.0-next.37",
     "@mittwald/react-use-promise": "^4.2.2",
     "next": "^16.2.3",
     "react": "^19.2.0",
@@ -223,5 +223,5 @@
   "browserslist": [
     "baseline widely available"
   ],
-  "gitHead": "f7394797edfc8a79a0d2323d2dfeb60b4c759a31"
+  "gitHead": "e4ab7766ecff29bf82f1ea257438bb1f92b2b4ec"
 }