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

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/components/Table/components/TableCell/TableCell.mjs

@@ -3,7 +3,6 @@
 import { SkeletonText } from "../../../SkeletonText/SkeletonText.mjs";
 import { SkeletonRawText } from "../../../SkeletonMode/components/SkeletonRawText/SkeletonRawText.mjs";
 import Table_module_default from "../../Table.module.mjs";
-import { TableColumn } from "../TableColumn/TableColumn.mjs";
 import clsx from "clsx";
 import { Suspense } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -12,20 +11,14 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var TableCell = (props) => {
 	const { children, className, rowHeader, horizontalAlign = "start", ...rest } = props;
-	const rootClassName = clsx(Table_module_default.cell, horizontalAlign !== "start" && Table_module_default[`horizontal-align-${horizontalAlign}`], className);
-	const content = /* @__PURE__ */ jsx(Suspense, {
-		fallback: /* @__PURE__ */ jsx(SkeletonText, { width: "100px" }),
-		children: /* @__PURE__ */ jsx(SkeletonRawText, { children })
-	});
-	if (rowHeader) return /* @__PURE__ */ jsx(TableColumn, {
-		className: rootClassName,
-		...rest,
-		children: content
-	});
+	const rootClassName = clsx(Table_module_default.cell, rowHeader && Table_module_default.column, horizontalAlign !== "start" && Table_module_default[`horizontal-align-${horizontalAlign}`], className);
 	return /* @__PURE__ */ jsx(Aria.Cell, {
 		className: rootClassName,
 		...rest,
-		children: content
+		children: /* @__PURE__ */ jsx(Suspense, {
+			fallback: /* @__PURE__ */ jsx(SkeletonText, { width: "100px" }),
+			children: /* @__PURE__ */ jsx(SkeletonRawText, { children })
+		})
 	});
 };
 //#endregion

package/dist/js/packages/components/src/components/Table/components/TableCell/TableCell.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableCell/TableCell.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { Suspense } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { SkeletonText } from \"@/components/SkeletonText\";\nimport { TableColumn } from \"@/components/Table/components/TableColumn/TableColumn\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\n\nexport interface TableCellProps\n  extends\n    Omit<Aria.CellProps, \"children\" | \"style\" | \"render\">,\n    PropsWithChildren {\n  /** Use cell as row header */\n  rowHeader?: boolean;\n  /** Horizontal alignment of the cell content @default \"start\" */\n  horizontalAlign?: \"start\" | \"center\" | \"end\";\n}\n\n/** @flr-generate all */\nexport const TableCell: FC<TableCellProps> = (props) => {\n  const {\n    children,\n    className,\n    rowHeader,\n    horizontalAlign = \"start\",\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.cell,\n    horizontalAlign !== \"start\" &&\n      styles[`horizontal-align-${horizontalAlign}`],\n    className,\n  );\n\n  const content = (\n    <Suspense fallback={<SkeletonText width=\"100px\" />}>\n      <SkeletonRawText>{children}</SkeletonRawText>\n    </Suspense>\n  );\n\n  if (rowHeader) {\n    return (\n      <TableColumn className={rootClassName} {...rest}>\n        {content}\n      </TableColumn>\n    );\n  }\n\n  return (\n    <Aria.Cell className={rootClassName} {...rest}>\n      {content}\n    </Aria.Cell>\n  );\n};\n\nexport default TableCell;\n"],"mappings":";;;;;;;;;;;;AAoBA,IAAa,aAAiC,UAAU;CACtD,MAAM,EACJ,UACA,WACA,WACA,kBAAkB,SAClB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,qBAAO,MACP,oBAAoB,WAClBA,qBAAO,oBAAoB,oBAC7B,SACF;CAEA,MAAM,UACJ,oBAAC,UAAD;EAAU,UAAU,oBAAC,cAAD,EAAc,OAAM,QAAS,CAAA;EAC/C,UAAA,oBAAC,iBAAD,EAAkB,SAA0B,CAAA;CACpC,CAAA;CAGZ,IAAI,WACF,OACE,oBAAC,aAAD;EAAa,WAAW;EAAe,GAAI;EACxC,UAAA;CACU,CAAA;CAIjB,OACE,oBAAC,KAAK,MAAN;EAAW,WAAW;EAAe,GAAI;EACtC,UAAA;CACQ,CAAA;AAEf"}
+{"version":3,"file":"TableCell.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableCell/TableCell.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { Suspense } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { SkeletonText } from \"@/components/SkeletonText\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\n\nexport interface TableCellProps\n  extends\n    Omit<Aria.CellProps, \"children\" | \"style\" | \"render\">,\n    PropsWithChildren {\n  /**\n   * Styles the cell as a row header. Its semantics come from the column: the\n   * first column, or the one with `isRowHeader`.\n   */\n  rowHeader?: boolean;\n  /** Horizontal alignment of the cell content @default \"start\" */\n  horizontalAlign?: \"start\" | \"center\" | \"end\";\n}\n\n/** @flr-generate all */\nexport const TableCell: FC<TableCellProps> = (props) => {\n  const {\n    children,\n    className,\n    rowHeader,\n    horizontalAlign = \"start\",\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.cell,\n    rowHeader && styles.column,\n    horizontalAlign !== \"start\" &&\n      styles[`horizontal-align-${horizontalAlign}`],\n    className,\n  );\n\n  return (\n    <Aria.Cell className={rootClassName} {...rest}>\n      <Suspense fallback={<SkeletonText width=\"100px\" />}>\n        <SkeletonRawText>{children}</SkeletonRawText>\n      </Suspense>\n    </Aria.Cell>\n  );\n};\n\nexport default TableCell;\n"],"mappings":";;;;;;;;;;;AAsBA,IAAa,aAAiC,UAAU;CACtD,MAAM,EACJ,UACA,WACA,WACA,kBAAkB,SAClB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,qBAAO,MACP,aAAaA,qBAAO,QACpB,oBAAoB,WAClBA,qBAAO,oBAAoB,oBAC7B,SACF;CAEA,OACE,oBAAC,KAAK,MAAN;EAAW,WAAW;EAAe,GAAI;EACvC,UAAA,oBAAC,UAAD;GAAU,UAAU,oBAAC,cAAD,EAAc,OAAM,QAAS,CAAA;GAC/C,UAAA,oBAAC,iBAAD,EAAkB,SAA0B,CAAA;EACpC,CAAA;CACD,CAAA;AAEf"}

package/dist/js/packages/components/src/components/Table/components/TableColumn/TableColumn.mjs

@@ -3,17 +3,19 @@
 import { PropsContextProvider } from "../../../../lib/propsContext/components/PropsContextProvider.mjs";
 import { SkeletonRawText } from "../../../SkeletonMode/components/SkeletonRawText/SkeletonRawText.mjs";
 import Table_module_default from "../../Table.module.mjs";
+import { useIsFirstColumn } from "../TableHeader/context.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
 //#region src/components/Table/components/TableColumn/TableColumn.tsx
 /** @flr-generate all */
 var TableColumn = (props) => {
-	const { children, className, horizontalAlign = "start", width, minWidth, ...rest } = props;
+	const { children, className, horizontalAlign = "start", width, minWidth, isRowHeader, ...rest } = props;
+	const isFirstColumn = useIsFirstColumn();
 	const rootClassName = clsx(Table_module_default.column, horizontalAlign !== "start" && Table_module_default[`horizontal-align-${horizontalAlign}`], className);
 	const propsContext = { Checkbox: { slot: null } };
 	return /* @__PURE__ */ jsx(Aria.Column, {
-		isRowHeader: true,
+		isRowHeader: isRowHeader ?? isFirstColumn ?? true,
 		className: rootClassName,
 		...rest,
 		style: {

package/dist/js/packages/components/src/components/Table/components/TableColumn/TableColumn.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableColumn.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableColumn/TableColumn.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\n\nexport interface TableColumnProps\n  extends\n    Omit<\n      Aria.ColumnProps,\n      \"children\" | \"width\" | \"minWidth\" | \"maxWidth\" | \"style\"\n    >,\n    PropsWithChildren {\n  /** Horizontal alignment of the cell content @default \"start\" */\n  horizontalAlign?: \"start\" | \"center\" | \"end\";\n  /** The width of the column. */\n  width?: number | string;\n  /** The minimum width of the column. */\n  minWidth?: number | string;\n}\n\n/** @flr-generate all */\nexport const TableColumn: FC<TableColumnProps> = (props) => {\n  const {\n    children,\n    className,\n    horizontalAlign = \"start\",\n    width,\n    minWidth,\n    ...rest\n  } = props;\n  const rootClassName = clsx(\n    styles.column,\n    horizontalAlign !== \"start\" &&\n      styles[`horizontal-align-${horizontalAlign}`],\n    className,\n  );\n\n  const propsContext: PropsContext = { Checkbox: { slot: null } };\n\n  return (\n    <Aria.Column\n      isRowHeader\n      className={rootClassName}\n      {...rest}\n      style={{ width, minWidth }}\n    >\n      <PropsContextProvider props={propsContext}>\n        <SkeletonRawText>{children}</SkeletonRawText>\n      </PropsContextProvider>\n    </Aria.Column>\n  );\n};\n\nexport default TableColumn;\n"],"mappings":";;;;;;;;;;AAuBA,IAAa,eAAqC,UAAU;CAC1D,MAAM,EACJ,UACA,WACA,kBAAkB,SAClB,OACA,UACA,GAAG,SACD;CACJ,MAAM,gBAAgB,KACpBA,qBAAO,QACP,oBAAoB,WAClBA,qBAAO,oBAAoB,oBAC7B,SACF;CAEA,MAAM,eAA6B,EAAE,UAAU,EAAE,MAAM,KAAK,EAAE;CAE9D,OACE,oBAAC,KAAK,QAAN;EACE,aAAA;EACA,WAAW;EACX,GAAI;EACJ,OAAO;GAAE;GAAO;EAAS;EAEzB,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,iBAAD,EAAkB,SAA0B,CAAA;EACxB,CAAA;CACX,CAAA;AAEjB"}
+{"version":3,"file":"TableColumn.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableColumn/TableColumn.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\nimport { useIsFirstColumn } from \"@/components/Table/components/TableHeader/context\";\n\nexport interface TableColumnProps\n  extends\n    Omit<\n      Aria.ColumnProps,\n      \"children\" | \"width\" | \"minWidth\" | \"maxWidth\" | \"style\"\n    >,\n    PropsWithChildren {\n  /** Horizontal alignment of the cell content @default \"start\" */\n  horizontalAlign?: \"start\" | \"center\" | \"end\";\n  /** The width of the column. */\n  width?: number | string;\n  /** The minimum width of the column. */\n  minWidth?: number | string;\n}\n\n/** @flr-generate all */\nexport const TableColumn: FC<TableColumnProps> = (props) => {\n  const {\n    children,\n    className,\n    horizontalAlign = \"start\",\n    width,\n    minWidth,\n    isRowHeader,\n    ...rest\n  } = props;\n  const isFirstColumn = useIsFirstColumn();\n\n  const rootClassName = clsx(\n    styles.column,\n    horizontalAlign !== \"start\" &&\n      styles[`horizontal-align-${horizontalAlign}`],\n    className,\n  );\n\n  const propsContext: PropsContext = { Checkbox: { slot: null } };\n\n  return (\n    <Aria.Column\n      isRowHeader={isRowHeader ?? isFirstColumn ?? true}\n      className={rootClassName}\n      {...rest}\n      style={{ width, minWidth }}\n    >\n      <PropsContextProvider props={propsContext}>\n        <SkeletonRawText>{children}</SkeletonRawText>\n      </PropsContextProvider>\n    </Aria.Column>\n  );\n};\n\nexport default TableColumn;\n"],"mappings":";;;;;;;;;;;AAwBA,IAAa,eAAqC,UAAU;CAC1D,MAAM,EACJ,UACA,WACA,kBAAkB,SAClB,OACA,UACA,aACA,GAAG,SACD;CACJ,MAAM,gBAAgB,iBAAiB;CAEvC,MAAM,gBAAgB,KACpBA,qBAAO,QACP,oBAAoB,WAClBA,qBAAO,oBAAoB,oBAC7B,SACF;CAEA,MAAM,eAA6B,EAAE,UAAU,EAAE,MAAM,KAAK,EAAE;CAE9D,OACE,oBAAC,KAAK,QAAN;EACE,aAAa,eAAe,iBAAiB;EAC7C,WAAW;EACX,GAAI;EACJ,OAAO;GAAE;GAAO;EAAS;EAEzB,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,iBAAD,EAAkB,SAA0B,CAAA;EACxB,CAAA;CACX,CAAA;AAEjB"}

package/dist/js/packages/components/src/components/Table/components/TableHeader/TableHeader.mjs

@@ -1,7 +1,9 @@
 "use client"
 /* */
 import Table_module_default from "../../Table.module.mjs";
+import { IsFirstColumnContext } from "./context.mjs";
 import clsx from "clsx";
+import { Children } from "react";
 import { jsx } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
 //#region src/components/Table/components/TableHeader/TableHeader.tsx
@@ -9,10 +11,14 @@ import * as Aria from "react-aria-components";
 var TableHeader = (props) => {
 	const { children, className, ...rest } = props;
 	const rootClassName = clsx(Table_module_default.header, className);
+	const columns = typeof children === "function" ? children : Children.toArray(children).map((column, index) => /* @__PURE__ */ jsx(IsFirstColumnContext, {
+		value: index === 0,
+		children: column
+	}, index));
 	return /* @__PURE__ */ jsx(Aria.TableHeader, {
 		className: rootClassName,
 		...rest,
-		children
+		children: columns
 	});
 };
 //#endregion

package/dist/js/packages/components/src/components/Table/components/TableHeader/TableHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableHeader/TableHeader.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\n\nexport type TableHeaderProps = Aria.TableHeaderProps<never>;\n\n/** @flr-generate all */\nexport const TableHeader: FC<TableHeaderProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const rootClassName = clsx(styles.header, className);\n\n  return (\n    <Aria.TableHeader className={rootClassName} {...rest}>\n      {children}\n    </Aria.TableHeader>\n  );\n};\n\nexport default TableHeader;\n"],"mappings":";;;;;;;;AAQA,IAAa,eAAqC,UAAU;CAC1D,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,gBAAgB,KAAKA,qBAAO,QAAQ,SAAS;CAEnD,OACE,oBAAC,KAAK,aAAN;EAAkB,WAAW;EAAe,GAAI;EAC7C;CACe,CAAA;AAEtB"}
+{"version":3,"file":"TableHeader.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableHeader/TableHeader.tsx"],"sourcesContent":["import { Children, type FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { IsFirstColumnContext } from \"./context\";\n\nexport type TableHeaderProps = Aria.TableHeaderProps<never>;\n\n/** @flr-generate all */\nexport const TableHeader: FC<TableHeaderProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const rootClassName = clsx(styles.header, className);\n\n  // Assumes the first child renders a column; a wrapper that renders nothing\n  // leaves the table without row header column, and react-aria throws.\n  const columns =\n    typeof children === \"function\"\n      ? children\n      : Children.toArray(children).map((column, index) => (\n          <IsFirstColumnContext key={index} value={index === 0}>\n            {column}\n          </IsFirstColumnContext>\n        ));\n\n  return (\n    <Aria.TableHeader className={rootClassName} {...rest}>\n      {columns}\n    </Aria.TableHeader>\n  );\n};\n\nexport default TableHeader;\n"],"mappings":";;;;;;;;;;AASA,IAAa,eAAqC,UAAU;CAC1D,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,gBAAgB,KAAKA,qBAAO,QAAQ,SAAS;CAInD,MAAM,UACJ,OAAO,aAAa,aAChB,WACA,SAAS,QAAQ,QAAQ,CAAC,CAAC,KAAK,QAAQ,UACtC,oBAAC,sBAAD;EAAkC,OAAO,UAAU;EAChD,UAAA;CACmB,GAFK,KAEL,CACvB;CAEP,OACE,oBAAC,KAAK,aAAN;EAAkB,WAAW;EAAe,GAAI;EAC7C,UAAA;CACe,CAAA;AAEtB"}

package/dist/js/packages/components/src/components/Table/components/TableHeader/context.mjs

@@ -0,0 +1,14 @@
+"use client"
+/* */
+import { createContext, useContext } from "react";
+//#region src/components/Table/components/TableHeader/context.ts
+/**
+* Whether a column is the first of its `TableHeader`. Undefined outside a
+* header that can tell, e.g. with dynamic `columns`.
+*/
+var IsFirstColumnContext = createContext(void 0);
+var useIsFirstColumn = () => useContext(IsFirstColumnContext);
+//#endregion
+export { IsFirstColumnContext, useIsFirstColumn };
+
+//# sourceMappingURL=context.mjs.map

package/dist/js/packages/components/src/components/Table/components/TableHeader/context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","names":[],"sources":["../../../../../../../../../src/components/Table/components/TableHeader/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\n/**\n * Whether a column is the first of its `TableHeader`. Undefined outside a\n * header that can tell, e.g. with dynamic `columns`.\n */\nexport const IsFirstColumnContext = createContext<boolean | undefined>(\n  undefined,\n);\n\nexport const useIsFirstColumn = () => useContext(IsFirstColumnContext);\n"],"mappings":";;;;;;;;AAMA,IAAa,uBAAuB,cAClC,KAAA,CACF;AAEA,IAAa,yBAAyB,WAAW,oBAAoB"}

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/components/Table/components/TableCell/TableCell.d.ts

@@ -1,7 +1,10 @@
 import { FC, PropsWithChildren } from 'react';
 import * as Aria from "react-aria-components";
 export interface TableCellProps extends Omit<Aria.CellProps, "children" | "style" | "render">, PropsWithChildren {
-    /** Use cell as row header */
+    /**
+     * Styles the cell as a row header. Its semantics come from the column: the
+     * first column, or the one with `isRowHeader`.
+     */
     rowHeader?: boolean;
     /** Horizontal alignment of the cell content @default "start" */
     horizontalAlign?: "start" | "center" | "end";

package/dist/types/components/Table/components/TableHeader/context.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Whether a column is the first of its `TableHeader`. Undefined outside a
+ * header that can tell, e.g. with dynamic `columns`.
+ */
+export declare const IsFirstColumnContext: import('react').Context<boolean | undefined>;
+export declare const useIsFirstColumn: () => boolean | undefined;

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.38",
   "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.38",
     "@mittwald/password-tools-js": "^3.0.0",
-    "@mittwald/react-tunnel": "^1.6.0-next.36",
+    "@mittwald/react-tunnel": "^1.6.0-next.38",
     "@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.38",
+    "@mittwald/flow-core": "1.6.0-next.38",
+    "@mittwald/flow-design-tokens": "1.6.0-next.38",
+    "@mittwald/flow-icons-base": "1.6.0-next.38",
     "@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.38",
     "@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.38",
     "@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": "6cdf6117125d8cd2993df5ac2a61d4e5405643c6"
 }