@mittwald/flow-react-components 0.2.0-alpha.468 → 0.2.0-alpha.469

package/dist/js/components/src/components/Button/Button.mjs

@@ -20,7 +20,7 @@ import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner.mjs';
 import { useAriaAnnounceActionState } from '../Action/lib/ariaLive.mjs';
 
 const disablePendingProps = (props) => {
-  if (props.isPending || props.isSucceeded || props.isFailed || props["aria-disabled"]) {
+  if (props.isPending || props.isSucceeded || props.isFailed || props["aria-disabled"] || props.isReadOnly) {
     props = { ...props };
     props.onPress = void 0;
     props.onPressStart = void 0;
@@ -48,6 +48,7 @@ const Button = flowComponent("Button", (props) => {
     slot: ignoredSlotProp,
     ariaSlot: slot,
     unstyled,
+    isReadOnly,
     ...restProps
   } = props;
   const rootClassName = unstyled ? className : clsx(
@@ -103,6 +104,7 @@ const Button = flowComponent("Button", (props) => {
       className: rootClassName,
       ref,
       slot,
+      "data-readonly": isReadOnly,
       ...restProps,
       children: [
         /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(Wrap, { if: !unstyled, children: /* @__PURE__ */ jsx("span", { className: styles.content, children: /* @__PURE__ */ jsx(Wrap, { if: isStringContent, children: /* @__PURE__ */ jsx(Text, { className: styles.text, children }) }) }) }) }),

package/dist/js/components/src/components/Button/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","sources":["../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Button.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport { Wrap } from \"@/components/Wrap\";\nimport { Text } from \"@/components/Text\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport LoadingSpinner from \"@/components/LoadingSpinner/LoadingSpinner\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\nimport ClearPropsContext from \"@/components/ClearPropsContext/ClearPropsContext\";\n\nexport interface ButtonProps\n  extends PropsWithChildren<Aria.ButtonProps>,\n    FlowComponentProps<HTMLButtonElement> {\n  /** Slot for button placement in action groups. */\n  slot?: string;\n  /** The color of the button. @default \"primary\" */\n  color?: \"primary\" | \"accent\" | \"secondary\" | \"danger\" | \"dark\" | \"light\";\n  /** The visual variant of the button. @default \"solid\" */\n  variant?: \"plain\" | \"solid\" | \"soft\" | \"outline\";\n  /** The size of the button. @default \"m\" */\n  size?: \"m\" | \"s\";\n  /** Disables button but keeps it focusable. */\n  \"aria-disabled\"?: boolean;\n  /** Whether the button is in a pending state. */\n  isPending?: boolean;\n  /** Whether the button is in a succeeded state. */\n  isSucceeded?: boolean;\n  /** Whether the button is in a failed state. */\n  isFailed?: boolean;\n  /** @internal */\n  unstyled?: boolean;\n  /** @internal */\n  ariaSlot?: string | null;\n}\n\nconst disablePendingProps = (props: ButtonProps) => {\n  if (\n    props.isPending ||\n    props.isSucceeded ||\n    props.isFailed ||\n    props[\"aria-disabled\"]\n  ) {\n    props = { ...props };\n    props.onPress = undefined;\n    props.onPressStart = undefined;\n    props.onPressEnd = undefined;\n    props.onPressChange = undefined;\n    props.onPressUp = undefined;\n    props.onKeyDown = undefined;\n    props.onKeyUp = undefined;\n  }\n\n  return props;\n};\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Button = flowComponent(\"Button\", (props) => {\n  props = disablePendingProps(props);\n\n  const {\n    color = \"primary\",\n    variant = \"solid\",\n    children,\n    className,\n    size = \"m\",\n    isPending,\n    isSucceeded,\n    isFailed,\n    \"aria-disabled\": ariaDisabled,\n    ref,\n    slot: ignoredSlotProp,\n    ariaSlot: slot,\n    unstyled,\n    ...restProps\n  } = props;\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(\n        styles.button,\n        isPending && styles.isPending,\n        isSucceeded && styles.isSucceeded,\n        isFailed && styles.isFailed,\n        styles[`size-${size}`],\n        styles[color],\n        styles[variant],\n        className,\n        /**\n         * Workaround warning: The Aria.Button does not support \"aria-disabled\"\n         * by now, so this Button will be visually disabled via CSS.\n         */\n        ariaDisabled && styles.ariaDisabled,\n      );\n\n  useAriaAnnounceActionState(\n    isPending\n      ? \"isPending\"\n      : isSucceeded\n        ? \"isSucceeded\"\n        : isFailed\n          ? \"isFailed\"\n          : \"isIdle\",\n  );\n\n  const propsContext: PropsContext = {\n    Icon: {\n      className: styles.icon,\n      \"aria-hidden\": true,\n      size,\n    },\n    Text: {\n      className: styles.text,\n    },\n    Avatar: {\n      className: styles.avatar,\n    },\n    CounterBadge: {\n      className: styles.counterBadge,\n    },\n    Image: {\n      className: styles.image,\n    },\n  };\n\n  const StateIconComponent = isSucceeded\n    ? IconSucceeded\n    : isFailed\n      ? IconFailed\n      : isPending\n        ? LoadingSpinner\n        : undefined;\n\n  const stateIcon = StateIconComponent && (\n    <StateIconComponent\n      size={size}\n      className={styles.stateIcon}\n      status={isFailed ? \"danger\" : isSucceeded ? \"success\" : undefined}\n    />\n  );\n\n  const isStringContent = typeof children === \"string\";\n\n  return (\n    <ClearPropsContext>\n      <Aria.Button\n        className={rootClassName}\n        ref={ref}\n        slot={slot}\n        {...restProps}\n      >\n        <PropsContextProvider props={propsContext}>\n          <Wrap if={!unstyled}>\n            <span className={styles.content}>\n              <Wrap if={isStringContent}>\n                <Text className={styles.text}>{children}</Text>\n              </Wrap>\n            </span>\n          </Wrap>\n        </PropsContextProvider>\n        {stateIcon}\n      </Aria.Button>\n    </ClearPropsContext>\n  );\n});\n\nexport default Button;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Button.mjs","sources":["../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Button.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport { Wrap } from \"@/components/Wrap\";\nimport { Text } from \"@/components/Text\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport LoadingSpinner from \"@/components/LoadingSpinner/LoadingSpinner\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\nimport ClearPropsContext from \"@/components/ClearPropsContext/ClearPropsContext\";\n\nexport interface ButtonProps\n  extends PropsWithChildren<Aria.ButtonProps>,\n    FlowComponentProps<HTMLButtonElement> {\n  /** Slot for button placement in action groups. */\n  slot?: string;\n  /** The color of the button. @default \"primary\" */\n  color?: \"primary\" | \"accent\" | \"secondary\" | \"danger\" | \"dark\" | \"light\";\n  /** The visual variant of the button. @default \"solid\" */\n  variant?: \"plain\" | \"solid\" | \"soft\" | \"outline\";\n  /** The size of the button. @default \"m\" */\n  size?: \"m\" | \"s\";\n  /** Disables button but keeps it focusable. */\n  \"aria-disabled\"?: boolean;\n  /** Whether the button is in a pending state. */\n  isPending?: boolean;\n  /** Whether the button is in a succeeded state. */\n  isSucceeded?: boolean;\n  /** Whether the button is in a failed state. */\n  isFailed?: boolean;\n  /** Whether the button is in a read only state. */\n  isReadOnly?: boolean;\n  /** @internal */\n  unstyled?: boolean;\n  /** @internal */\n  ariaSlot?: string | null;\n}\n\nconst disablePendingProps = (props: ButtonProps) => {\n  if (\n    props.isPending ||\n    props.isSucceeded ||\n    props.isFailed ||\n    props[\"aria-disabled\"] ||\n    props.isReadOnly\n  ) {\n    props = { ...props };\n    props.onPress = undefined;\n    props.onPressStart = undefined;\n    props.onPressEnd = undefined;\n    props.onPressChange = undefined;\n    props.onPressUp = undefined;\n    props.onKeyDown = undefined;\n    props.onKeyUp = undefined;\n  }\n\n  return props;\n};\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Button = flowComponent(\"Button\", (props) => {\n  props = disablePendingProps(props);\n\n  const {\n    color = \"primary\",\n    variant = \"solid\",\n    children,\n    className,\n    size = \"m\",\n    isPending,\n    isSucceeded,\n    isFailed,\n    \"aria-disabled\": ariaDisabled,\n    ref,\n    slot: ignoredSlotProp,\n    ariaSlot: slot,\n    unstyled,\n    isReadOnly,\n    ...restProps\n  } = props;\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(\n        styles.button,\n        isPending && styles.isPending,\n        isSucceeded && styles.isSucceeded,\n        isFailed && styles.isFailed,\n        styles[`size-${size}`],\n        styles[color],\n        styles[variant],\n        className,\n        /**\n         * Workaround warning: The Aria.Button does not support \"aria-disabled\"\n         * by now, so this Button will be visually disabled via CSS.\n         */\n        ariaDisabled && styles.ariaDisabled,\n      );\n\n  useAriaAnnounceActionState(\n    isPending\n      ? \"isPending\"\n      : isSucceeded\n        ? \"isSucceeded\"\n        : isFailed\n          ? \"isFailed\"\n          : \"isIdle\",\n  );\n\n  const propsContext: PropsContext = {\n    Icon: {\n      className: styles.icon,\n      \"aria-hidden\": true,\n      size,\n    },\n    Text: {\n      className: styles.text,\n    },\n    Avatar: {\n      className: styles.avatar,\n    },\n    CounterBadge: {\n      className: styles.counterBadge,\n    },\n    Image: {\n      className: styles.image,\n    },\n  };\n\n  const StateIconComponent = isSucceeded\n    ? IconSucceeded\n    : isFailed\n      ? IconFailed\n      : isPending\n        ? LoadingSpinner\n        : undefined;\n\n  const stateIcon = StateIconComponent && (\n    <StateIconComponent\n      size={size}\n      className={styles.stateIcon}\n      status={isFailed ? \"danger\" : isSucceeded ? \"success\" : undefined}\n    />\n  );\n\n  const isStringContent = typeof children === \"string\";\n\n  return (\n    <ClearPropsContext>\n      <Aria.Button\n        className={rootClassName}\n        ref={ref}\n        slot={slot}\n        data-readonly={isReadOnly}\n        {...restProps}\n      >\n        <PropsContextProvider props={propsContext}>\n          <Wrap if={!unstyled}>\n            <span className={styles.content}>\n              <Wrap if={isStringContent}>\n                <Text className={styles.text}>{children}</Text>\n              </Wrap>\n            </span>\n          </Wrap>\n        </PropsContextProvider>\n        {stateIcon}\n      </Aria.Button>\n    </ClearPropsContext>\n  );\n});\n\nexport default Button;\n"],"names":[],"mappings":"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"}

package/dist/js/components/src/components/Content/Content.mjs

@@ -2,20 +2,12 @@
 /* */
 import { jsx } from 'react/jsx-runtime';
 import 'react';
-import { ClearPropsContext } from '../ClearPropsContext/ClearPropsContext.mjs';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import { Wrap } from '../Wrap/Wrap.mjs';
 
 const Content = flowComponent("Content", (props) => {
-  const {
-    children,
-    elementType = "div",
-    ref,
-    clearPropsContext = true,
-    ...rest
-  } = props;
+  const { children, elementType = "div", ref, ...rest } = props;
   const Element = elementType;
-  return /* @__PURE__ */ jsx(Wrap, { if: clearPropsContext, children: /* @__PURE__ */ jsx(ClearPropsContext, { children: /* @__PURE__ */ jsx(Element, { ref, ...rest, children }) }) });
+  return /* @__PURE__ */ jsx(Element, { ref, ...rest, children });
 });
 
 export { Content, Content as default };

package/dist/js/components/src/components/Content/Content.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Content.mjs","sources":["../../../../../../src/components/Content/Content.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport ClearPropsContext from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport type { PropsWithElementType } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Wrap } from \"@/components/Wrap\";\n\nexport interface ContentProps\n  extends PropsWithChildren,\n    PropsWithElementType<\"div\" | \"section\" | \"span\">,\n    FlowComponentProps {\n  /** @internal */\n  clearPropsContext?: boolean;\n  /** @internal */\n  slot?: string;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Content = flowComponent(\"Content\", (props) => {\n  const {\n    children,\n    elementType = \"div\",\n    ref,\n    clearPropsContext = true,\n    ...rest\n  } = props;\n\n  const Element = elementType;\n\n  return (\n    <Wrap if={clearPropsContext}>\n      <ClearPropsContext>\n        <Element ref={ref} {...rest}>\n          {children}\n        </Element>\n      </ClearPropsContext>\n    </Wrap>\n  );\n});\n\nexport default Content;\n"],"names":[],"mappings":";;;;;;AAsBO,MAAM,OAAU,GAAA,aAAA,CAAc,SAAW,EAAA,CAAC,KAAU,KAAA;AACzD,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,WAAc,GAAA,KAAA;AAAA,IACd,GAAA;AAAA,IACA,iBAAoB,GAAA,IAAA;AAAA,IACpB,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,OAAU,GAAA,WAAA;AAEhB,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA,EAAK,EAAI,EAAA,iBAAA,EACR,QAAC,kBAAA,GAAA,CAAA,iBAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,OAAA,EAAA,EAAQ,GAAW,EAAA,GAAG,IACpB,EAAA,QAAA,EACH,GACF,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Content.mjs","sources":["../../../../../../src/components/Content/Content.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport type { PropsWithElementType } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface ContentProps\n  extends PropsWithChildren,\n    PropsWithElementType<\"div\" | \"section\" | \"span\">,\n    FlowComponentProps {\n  /** @internal */\n  slot?: string;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Content = flowComponent(\"Content\", (props) => {\n  const { children, elementType = \"div\", ref, ...rest } = props;\n\n  const Element = elementType;\n\n  return (\n    <Element ref={ref} {...rest}>\n      {children}\n    </Element>\n  );\n});\n\nexport default Content;\n"],"names":[],"mappings":";;;;AAkBO,MAAM,OAAU,GAAA,aAAA,CAAc,SAAW,EAAA,CAAC,KAAU,KAAA;AACzD,EAAA,MAAM,EAAE,QAAU,EAAA,WAAA,GAAc,OAAO,GAAK,EAAA,GAAG,MAAS,GAAA,KAAA;AAExD,EAAA,MAAM,OAAU,GAAA,WAAA;AAEhB,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA,EAAQ,GAAW,EAAA,GAAG,MACpB,QACH,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/FileDropZone/FileDropZone.mjs

@@ -22,7 +22,8 @@ const FileDropZone = flowComponent(
       onChange: onChangeDropZone,
       children,
       name,
-      isDisabled
+      isDisabled,
+      isReadOnly
     } = props;
     const fileFieldRef = useRef(null);
     const rootClassName = clsx(
@@ -38,7 +39,8 @@ const FileDropZone = flowComponent(
         accept,
         multiple,
         Button: { variant: "outline", color: "dark" },
-        isDisabled
+        isDisabled,
+        isReadOnly
       },
       Heading: {
         className: styles.heading
@@ -47,6 +49,9 @@ const FileDropZone = flowComponent(
       Text: { className: styles.text }
     };
     const onDropHandler = async (event) => {
+      if (isReadOnly) {
+        return;
+      }
       const fileDropItems = event.items.filter(
         (file) => file.kind === "file"
       );
@@ -75,6 +80,7 @@ const FileDropZone = flowComponent(
         className: rootClassName,
         onDrop: onDropHandler,
         isDisabled,
+        "data-readonly": isReadOnly,
         children: /* @__PURE__ */ jsx(IllustratedMessage, { color: "dark", children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, mergeInParentContext: true, children }) })
       }
     );

package/dist/js/components/src/components/FileDropZone/FileDropZone.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileDropZone.mjs","sources":["../../../../../../src/components/FileDropZone/FileDropZone.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useRef } from \"react\";\nimport React from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { IllustratedMessage } from \"@/components/IllustratedMessage\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./FileDropZone.module.scss\";\nimport clsx from \"clsx\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { DropEvent, FocusableElement } from \"@react-types/shared\";\nimport { addAwaitedArrayBuffer } from \"@mittwald/flow-core\";\n\nexport interface FileDropZoneProps\n  extends PropsWithClassName,\n    FlowComponentProps<FocusableElement>,\n    PropsWithChildren,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<Aria.DropZoneProps, \"isDisabled\"> {\n  onChange?: FileInputOnChangeHandler;\n}\n\n/** @flr-generate all */\nexport const FileDropZone: FC<FileDropZoneProps> = flowComponent(\n  \"FileDropZone\",\n  (props) => {\n    const {\n      multiple,\n      accept,\n      className,\n      onChange: onChangeDropZone,\n      children,\n      name,\n      isDisabled,\n    } = props;\n\n    const fileFieldRef = useRef<HTMLInputElement>(null);\n    const rootClassName = clsx(\n      styles.fileDropZone,\n      isDisabled && styles.disabled,\n      className,\n    );\n\n    const propsContext: PropsContext = {\n      FileField: {\n        name,\n        onChange: onChangeDropZone,\n        ref: fileFieldRef,\n        accept: accept,\n        multiple: multiple,\n        Button: { variant: \"outline\", color: \"dark\" },\n        isDisabled,\n      },\n      Heading: {\n        className: styles.heading,\n      },\n      Icon: { className: styles.icon },\n      Text: { className: styles.text },\n    };\n\n    const onDropHandler = async (event: DropEvent) => {\n      const fileDropItems = event.items.filter(\n        (file) => file.kind === \"file\",\n      ) as Aria.FileDropItem[];\n\n      const files = await Promise.all(\n        fileDropItems\n          .filter((f) => !accept || accept?.includes(f.type))\n          .map(async (f) => {\n            const file = await f.getFile();\n            return await addAwaitedArrayBuffer(file);\n          }),\n      );\n\n      if (files.length > 0) {\n        const fileTransfer = new DataTransfer();\n        for (const file of multiple ? files : [files[0]]) {\n          if (file) {\n            fileTransfer.items.add(file);\n          }\n        }\n\n        onChangeDropZone?.(fileTransfer.files);\n        if (fileFieldRef.current) {\n          fileFieldRef.current.files = fileTransfer.files;\n        }\n      }\n    };\n\n    return (\n      <Aria.DropZone\n        className={rootClassName}\n        onDrop={onDropHandler}\n        isDisabled={isDisabled}\n      >\n        <IllustratedMessage color=\"dark\">\n          <PropsContextProvider props={propsContext} mergeInParentContext>\n            {children}\n          </PropsContextProvider>\n        </IllustratedMessage>\n      </Aria.DropZone>\n    );\n  },\n);\n\nexport default FileDropZone;\n"],"names":[],"mappings":";;;;;;;;;;;;AA2BO,MAAM,YAAsC,GAAA,aAAA;AAAA,EACjD,cAAA;AAAA,EACA,CAAC,KAAU,KAAA;AACT,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAU,EAAA,gBAAA;AAAA,MACV,QAAA;AAAA,MACA,IAAA;AAAA,MACA;AAAA,KACE,GAAA,KAAA;AAEJ,IAAM,MAAA,YAAA,GAAe,OAAyB,IAAI,CAAA;AAClD,IAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,MACpB,MAAO,CAAA,YAAA;AAAA,MACP,cAAc,MAAO,CAAA,QAAA;AAAA,MACrB;AAAA,KACF;AAEA,IAAA,MAAM,YAA6B,GAAA;AAAA,MACjC,SAAW,EAAA;AAAA,QACT,IAAA;AAAA,QACA,QAAU,EAAA,gBAAA;AAAA,QACV,GAAK,EAAA,YAAA;AAAA,QACL,MAAA;AAAA,QACA,QAAA;AAAA,QACA,MAAQ,EAAA,EAAE,OAAS,EAAA,SAAA,EAAW,OAAO,MAAO,EAAA;AAAA,QAC5C;AAAA,OACF;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAW,MAAO,CAAA;AAAA,OACpB;AAAA,MACA,IAAM,EAAA,EAAE,SAAW,EAAA,MAAA,CAAO,IAAK,EAAA;AAAA,MAC/B,IAAM,EAAA,EAAE,SAAW,EAAA,MAAA,CAAO,IAAK;AAAA,KACjC;AAEA,IAAM,MAAA,aAAA,GAAgB,OAAO,KAAqB,KAAA;AAChD,MAAM,MAAA,aAAA,GAAgB,MAAM,KAAM,CAAA,MAAA;AAAA,QAChC,CAAC,IAAS,KAAA,IAAA,CAAK,IAAS,KAAA;AAAA,OAC1B;AAEA,MAAM,MAAA,KAAA,GAAQ,MAAM,OAAQ,CAAA,GAAA;AAAA,QAC1B,aACG,CAAA,MAAA,CAAO,CAAC,CAAA,KAAM,CAAC,MAAU,IAAA,MAAA,EAAQ,QAAS,CAAA,CAAA,CAAE,IAAI,CAAC,CACjD,CAAA,GAAA,CAAI,OAAO,CAAM,KAAA;AAChB,UAAM,MAAA,IAAA,GAAO,MAAM,CAAA,CAAE,OAAQ,EAAA;AAC7B,UAAO,OAAA,MAAM,sBAAsB,IAAI,CAAA;AAAA,SACxC;AAAA,OACL;AAEA,MAAI,IAAA,KAAA,CAAM,SAAS,CAAG,EAAA;AACpB,QAAM,MAAA,YAAA,GAAe,IAAI,YAAa,EAAA;AACtC,QAAA,KAAA,MAAW,QAAQ,QAAW,GAAA,KAAA,GAAQ,CAAC,KAAM,CAAA,CAAC,CAAC,CAAG,EAAA;AAChD,UAAA,IAAI,IAAM,EAAA;AACR,YAAa,YAAA,CAAA,KAAA,CAAM,IAAI,IAAI,CAAA;AAAA;AAC7B;AAGF,QAAA,gBAAA,GAAmB,aAAa,KAAK,CAAA;AACrC,QAAA,IAAI,aAAa,OAAS,EAAA;AACxB,UAAa,YAAA,CAAA,OAAA,CAAQ,QAAQ,YAAa,CAAA,KAAA;AAAA;AAC5C;AACF,KACF;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,IAAK,CAAA,QAAA;AAAA,MAAL;AAAA,QACC,SAAW,EAAA,aAAA;AAAA,QACX,MAAQ,EAAA,aAAA;AAAA,QACR,UAAA;AAAA,QAEA,QAAA,kBAAA,GAAA,CAAC,kBAAmB,EAAA,EAAA,KAAA,EAAM,MACxB,EAAA,QAAA,kBAAA,GAAA,CAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAAc,EAAA,oBAAA,EAAoB,IAC5D,EAAA,QAAA,EACH,CACF,EAAA;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}
+{"version":3,"file":"FileDropZone.mjs","sources":["../../../../../../src/components/FileDropZone/FileDropZone.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useRef } from \"react\";\nimport React from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { IllustratedMessage } from \"@/components/IllustratedMessage\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./FileDropZone.module.scss\";\nimport clsx from \"clsx\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { DropEvent, FocusableElement } from \"@react-types/shared\";\nimport { addAwaitedArrayBuffer } from \"@mittwald/flow-core\";\n\nexport interface FileDropZoneProps\n  extends PropsWithClassName,\n    FlowComponentProps<FocusableElement>,\n    PropsWithChildren,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<Aria.DropZoneProps, \"isDisabled\"> {\n  onChange?: FileInputOnChangeHandler;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileDropZone: FC<FileDropZoneProps> = flowComponent(\n  \"FileDropZone\",\n  (props) => {\n    const {\n      multiple,\n      accept,\n      className,\n      onChange: onChangeDropZone,\n      children,\n      name,\n      isDisabled,\n      isReadOnly,\n    } = props;\n\n    const fileFieldRef = useRef<HTMLInputElement>(null);\n    const rootClassName = clsx(\n      styles.fileDropZone,\n      isDisabled && styles.disabled,\n      className,\n    );\n\n    const propsContext: PropsContext = {\n      FileField: {\n        name,\n        onChange: onChangeDropZone,\n        ref: fileFieldRef,\n        accept: accept,\n        multiple: multiple,\n        Button: { variant: \"outline\", color: \"dark\" },\n        isDisabled,\n        isReadOnly,\n      },\n      Heading: {\n        className: styles.heading,\n      },\n      Icon: { className: styles.icon },\n      Text: { className: styles.text },\n    };\n\n    const onDropHandler = async (event: DropEvent) => {\n      if (isReadOnly) {\n        return;\n      }\n\n      const fileDropItems = event.items.filter(\n        (file) => file.kind === \"file\",\n      ) as Aria.FileDropItem[];\n\n      const files = await Promise.all(\n        fileDropItems\n          .filter((f) => !accept || accept?.includes(f.type))\n          .map(async (f) => {\n            const file = await f.getFile();\n            return await addAwaitedArrayBuffer(file);\n          }),\n      );\n\n      if (files.length > 0) {\n        const fileTransfer = new DataTransfer();\n        for (const file of multiple ? files : [files[0]]) {\n          if (file) {\n            fileTransfer.items.add(file);\n          }\n        }\n\n        onChangeDropZone?.(fileTransfer.files);\n        if (fileFieldRef.current) {\n          fileFieldRef.current.files = fileTransfer.files;\n        }\n      }\n    };\n\n    return (\n      <Aria.DropZone\n        className={rootClassName}\n        onDrop={onDropHandler}\n        isDisabled={isDisabled}\n        data-readonly={isReadOnly}\n      >\n        <IllustratedMessage color=\"dark\">\n          <PropsContextProvider props={propsContext} mergeInParentContext>\n            {children}\n          </PropsContextProvider>\n        </IllustratedMessage>\n      </Aria.DropZone>\n    );\n  },\n);\n\nexport default FileDropZone;\n"],"names":[],"mappings":"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"}

package/dist/js/components/src/components/FileField/FileField.mjs

@@ -23,6 +23,7 @@ const FileField = flowComponent("FileField", (props) => {
     isDisabled,
     validationBehavior,
     onChange,
+    isReadOnly,
     ...restInputProps
   } = props;
   const inputRef = useObjectRef(ref);
@@ -60,6 +61,7 @@ const FileField = flowComponent("FileField", (props) => {
   return /* @__PURE__ */ jsx(InputContext.Provider, { value: inputProps, children: /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: formValidationState.displayValidation, children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(
     "div",
     {
+      "data-readonly": isReadOnly,
       "data-required": !!isRequired || void 0,
       "data-invalid": formValidationState.displayValidation.isInvalid || void 0,
       className: formFieldStyles.formField,
@@ -67,7 +69,8 @@ const FileField = flowComponent("FileField", (props) => {
         FileInput,
         {
           ref,
-          onChange: handleOnChange,
+          isReadOnly,
+          onChange: isReadOnly ? void 0 : handleOnChange,
           isDisabled,
           children
         }

package/dist/js/components/src/components/FileField/FileField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileField.mjs","sources":["../../../../../../src/components/FileField/FileField.tsx"],"sourcesContent":["import formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport { useFormValidation } from \"@react-aria/form\";\nimport { useFormValidationState } from \"@react-stately/form\";\nimport type { PropsWithChildren } from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport { FieldErrorContext, InputContext } from \"react-aria-components\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport { FileInput } from \"@/components/FileField/components/FileInput\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { addAwaitedArrayBuffer } from \"@mittwald/flow-core\";\nexport interface FileFieldProps\n  extends PropsWithChildren,\n    FlowComponentProps<HTMLInputElement>,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<\n      Aria.TextFieldProps,\n      \"isRequired\" | \"isInvalid\" | \"validationBehavior\" | \"isDisabled\"\n    > {\n  /** Handler that is called when the file input changes. */\n  onChange?: FileInputOnChangeHandler;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const FileField = flowComponent(\"FileField\", (props) => {\n  const {\n    children,\n    ref,\n    isRequired,\n    isInvalid,\n    isDisabled,\n    validationBehavior,\n    onChange,\n    ...restInputProps\n  } = props;\n  const inputRef = useObjectRef(ref);\n\n  const formValidationState = useFormValidationState({\n    value: undefined,\n    validationBehavior,\n    isInvalid,\n  });\n\n  useFormValidation({ validationBehavior }, formValidationState, inputRef);\n\n  const inputProps = {\n    ...restInputProps,\n    ref: inputRef,\n    \"aria-invalid\": formValidationState.displayValidation.isInvalid,\n    value: undefined,\n  };\n\n  const propsContext: PropsContext = {\n    Label: {\n      className: formFieldStyles.label,\n      optional: !props.isRequired,\n    },\n    FieldDescription: {\n      className: formFieldStyles.fieldDescription,\n    },\n    FieldError: {\n      className: formFieldStyles.customFieldError,\n    },\n  };\n\n  const handleOnChange: FileInputOnChangeHandler = (fileList) => {\n    if (fileList && onChange) {\n      Promise.all(Array.from(fileList).map(addAwaitedArrayBuffer)).then(() =>\n        onChange(fileList),\n      );\n    }\n  };\n\n  return (\n    <InputContext.Provider value={inputProps}>\n      <FieldErrorContext.Provider value={formValidationState.displayValidation}>\n        <PropsContextProvider props={propsContext}>\n          <div\n            data-required={!!isRequired || undefined}\n            data-invalid={\n              formValidationState.displayValidation.isInvalid || undefined\n            }\n            className={formFieldStyles.formField}\n          >\n            <FileInput\n              ref={ref}\n              onChange={handleOnChange}\n              isDisabled={isDisabled}\n            >\n              {children}\n            </FileInput>\n          </div>\n        </PropsContextProvider>\n      </FieldErrorContext.Provider>\n    </InputContext.Provider>\n  );\n});\nexport default FileField;\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA8BO,MAAM,SAAY,GAAA,aAAA,CAAc,WAAa,EAAA,CAAC,KAAU,KAAA;AAC7D,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,GAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AACJ,EAAM,MAAA,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,MAAM,sBAAsB,sBAAuB,CAAA;AAAA,IACjD,KAAO,EAAA,MAAA;AAAA,IACP,kBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,iBAAA,CAAkB,EAAE,kBAAA,EAAsB,EAAA,mBAAA,EAAqB,QAAQ,CAAA;AAEvE,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,GAAG,cAAA;AAAA,IACH,GAAK,EAAA,QAAA;AAAA,IACL,cAAA,EAAgB,oBAAoB,iBAAkB,CAAA,SAAA;AAAA,IACtD,KAAO,EAAA;AAAA,GACT;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,KAAO,EAAA;AAAA,MACL,WAAW,eAAgB,CAAA,KAAA;AAAA,MAC3B,QAAA,EAAU,CAAC,KAAM,CAAA;AAAA,KACnB;AAAA,IACA,gBAAkB,EAAA;AAAA,MAChB,WAAW,eAAgB,CAAA;AAAA,KAC7B;AAAA,IACA,UAAY,EAAA;AAAA,MACV,WAAW,eAAgB,CAAA;AAAA;AAC7B,GACF;AAEA,EAAM,MAAA,cAAA,GAA2C,CAAC,QAAa,KAAA;AAC7D,IAAA,IAAI,YAAY,QAAU,EAAA;AACxB,MAAQ,OAAA,CAAA,GAAA,CAAI,MAAM,IAAK,CAAA,QAAQ,EAAE,GAAI,CAAA,qBAAqB,CAAC,CAAE,CAAA,IAAA;AAAA,QAAK,MAChE,SAAS,QAAQ;AAAA,OACnB;AAAA;AACF,GACF;AAEA,EAAA,2BACG,YAAa,CAAA,QAAA,EAAb,EAAsB,KAAA,EAAO,YAC5B,QAAC,kBAAA,GAAA,CAAA,iBAAA,CAAkB,QAAlB,EAAA,EAA2B,OAAO,mBAAoB,CAAA,iBAAA,EACrD,QAAC,kBAAA,GAAA,CAAA,oBAAA,EAAA,EAAqB,OAAO,YAC3B,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,eAAA,EAAe,CAAC,CAAC,UAAc,IAAA,MAAA;AAAA,MAC/B,cAAA,EACE,mBAAoB,CAAA,iBAAA,CAAkB,SAAa,IAAA,MAAA;AAAA,MAErD,WAAW,eAAgB,CAAA,SAAA;AAAA,MAE3B,QAAA,kBAAA,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,QAAU,EAAA,cAAA;AAAA,UACV,UAAA;AAAA,UAEC;AAAA;AAAA;AACH;AAAA,GACF,EACF,GACF,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"FileField.mjs","sources":["../../../../../../src/components/FileField/FileField.tsx"],"sourcesContent":["import formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport { useFormValidation } from \"@react-aria/form\";\nimport { useFormValidationState } from \"@react-stately/form\";\nimport type { PropsWithChildren } from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport { FieldErrorContext, InputContext } from \"react-aria-components\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport { FileInput } from \"@/components/FileField/components/FileInput\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { addAwaitedArrayBuffer } from \"@mittwald/flow-core\";\n\nexport interface FileFieldProps\n  extends PropsWithChildren,\n    FlowComponentProps<HTMLInputElement>,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<\n      Aria.TextFieldProps,\n      \"isRequired\" | \"isInvalid\" | \"validationBehavior\" | \"isDisabled\"\n    > {\n  /** Handler that is called when the file input changes. */\n  onChange?: FileInputOnChangeHandler;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const FileField = flowComponent(\"FileField\", (props) => {\n  const {\n    children,\n    ref,\n    isRequired,\n    isInvalid,\n    isDisabled,\n    validationBehavior,\n    onChange,\n    isReadOnly,\n    ...restInputProps\n  } = props;\n  const inputRef = useObjectRef(ref);\n\n  const formValidationState = useFormValidationState({\n    value: undefined,\n    validationBehavior,\n    isInvalid,\n  });\n\n  useFormValidation({ validationBehavior }, formValidationState, inputRef);\n\n  const inputProps = {\n    ...restInputProps,\n    ref: inputRef,\n    \"aria-invalid\": formValidationState.displayValidation.isInvalid,\n    value: undefined,\n  };\n\n  const propsContext: PropsContext = {\n    Label: {\n      className: formFieldStyles.label,\n      optional: !props.isRequired,\n    },\n    FieldDescription: {\n      className: formFieldStyles.fieldDescription,\n    },\n    FieldError: {\n      className: formFieldStyles.customFieldError,\n    },\n  };\n\n  const handleOnChange: FileInputOnChangeHandler = (fileList) => {\n    if (fileList && onChange) {\n      Promise.all(Array.from(fileList).map(addAwaitedArrayBuffer)).then(() =>\n        onChange(fileList),\n      );\n    }\n  };\n\n  return (\n    <InputContext.Provider value={inputProps}>\n      <FieldErrorContext.Provider value={formValidationState.displayValidation}>\n        <PropsContextProvider props={propsContext}>\n          <div\n            data-readonly={isReadOnly}\n            data-required={!!isRequired || undefined}\n            data-invalid={\n              formValidationState.displayValidation.isInvalid || undefined\n            }\n            className={formFieldStyles.formField}\n          >\n            <FileInput\n              ref={ref}\n              isReadOnly={isReadOnly}\n              onChange={isReadOnly ? undefined : handleOnChange}\n              isDisabled={isDisabled}\n            >\n              {children}\n            </FileInput>\n          </div>\n        </PropsContextProvider>\n      </FieldErrorContext.Provider>\n    </InputContext.Provider>\n  );\n});\nexport default FileField;\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAiCO,MAAM,SAAY,GAAA,aAAA,CAAc,WAAa,EAAA,CAAC,KAAU,KAAA;AAC7D,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,GAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AACJ,EAAM,MAAA,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,MAAM,sBAAsB,sBAAuB,CAAA;AAAA,IACjD,KAAO,EAAA,MAAA;AAAA,IACP,kBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,iBAAA,CAAkB,EAAE,kBAAA,EAAsB,EAAA,mBAAA,EAAqB,QAAQ,CAAA;AAEvE,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,GAAG,cAAA;AAAA,IACH,GAAK,EAAA,QAAA;AAAA,IACL,cAAA,EAAgB,oBAAoB,iBAAkB,CAAA,SAAA;AAAA,IACtD,KAAO,EAAA;AAAA,GACT;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,KAAO,EAAA;AAAA,MACL,WAAW,eAAgB,CAAA,KAAA;AAAA,MAC3B,QAAA,EAAU,CAAC,KAAM,CAAA;AAAA,KACnB;AAAA,IACA,gBAAkB,EAAA;AAAA,MAChB,WAAW,eAAgB,CAAA;AAAA,KAC7B;AAAA,IACA,UAAY,EAAA;AAAA,MACV,WAAW,eAAgB,CAAA;AAAA;AAC7B,GACF;AAEA,EAAM,MAAA,cAAA,GAA2C,CAAC,QAAa,KAAA;AAC7D,IAAA,IAAI,YAAY,QAAU,EAAA;AACxB,MAAQ,OAAA,CAAA,GAAA,CAAI,MAAM,IAAK,CAAA,QAAQ,EAAE,GAAI,CAAA,qBAAqB,CAAC,CAAE,CAAA,IAAA;AAAA,QAAK,MAChE,SAAS,QAAQ;AAAA,OACnB;AAAA;AACF,GACF;AAEA,EAAA,2BACG,YAAa,CAAA,QAAA,EAAb,EAAsB,KAAA,EAAO,YAC5B,QAAC,kBAAA,GAAA,CAAA,iBAAA,CAAkB,QAAlB,EAAA,EAA2B,OAAO,mBAAoB,CAAA,iBAAA,EACrD,QAAC,kBAAA,GAAA,CAAA,oBAAA,EAAA,EAAqB,OAAO,YAC3B,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,eAAe,EAAA,UAAA;AAAA,MACf,eAAA,EAAe,CAAC,CAAC,UAAc,IAAA,MAAA;AAAA,MAC/B,cAAA,EACE,mBAAoB,CAAA,iBAAA,CAAkB,SAAa,IAAA,MAAA;AAAA,MAErD,WAAW,eAAgB,CAAA,SAAA;AAAA,MAE3B,QAAA,kBAAA,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,UAAA;AAAA,UACA,QAAA,EAAU,aAAa,MAAY,GAAA,cAAA;AAAA,UACnC,UAAA;AAAA,UAEC;AAAA;AAAA;AACH;AAAA,GACF,EACF,GACF,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/FileField/components/FileInput.mjs

@@ -10,7 +10,7 @@ import { PropsContextProvider } from '../../../lib/propsContext/PropsContextProv
 import styles from './FileInput.module.scss.mjs';
 
 const FileInput = (props) => {
-  const { children, isDisabled, onChange, ref } = props;
+  const { children, isDisabled, onChange, isReadOnly, ref } = props;
   const inputRef = useObjectRef(ref);
   const handlePress = () => {
     if (inputRef.current?.value) {
@@ -26,7 +26,8 @@ const FileInput = (props) => {
     Button: {
       onPress: handlePress,
       className: styles.trigger,
-      isDisabled
+      isDisabled,
+      isReadOnly
     }
   };
   return /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, mergeInParentContext: true, children: [

package/dist/js/components/src/components/FileField/components/FileInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.mjs","sources":["../../../../../../../src/components/FileField/components/FileInput.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref } from \"react\";\nimport React, { type ChangeEvent } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./FileInput.module.scss\";\n\nexport type FileInputOnChangeHandler = (files: FileList | null) => void;\n\n/** @internal */\nexport interface FileInputProps extends PropsWithChildren {\n  onChange?: FileInputOnChangeHandler;\n  isDisabled?: boolean;\n  ref?: Ref<HTMLInputElement>;\n}\n\n/** @internal */\nexport const FileInput: FC<FileInputProps> = (props) => {\n  const { children, isDisabled, onChange, ref } = props;\n  const inputRef = useObjectRef(ref);\n\n  const handlePress = () => {\n    if (inputRef.current?.value) {\n      inputRef.current.value = \"\";\n      onChange?.(null);\n    }\n    inputRef.current?.click();\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event.target.files);\n  };\n\n  const propsContext: PropsContext = {\n    Button: {\n      onPress: handlePress,\n      className: styles.trigger,\n      isDisabled,\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext} mergeInParentContext>\n      {children}\n      <Aria.Input\n        style={{ display: \"none\" }}\n        type=\"file\"\n        ref={inputRef}\n        onChange={handleChange}\n      />\n    </PropsContextProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAkBa,MAAA,SAAA,GAAgC,CAAC,KAAU,KAAA;AACtD,EAAA,MAAM,EAAE,QAAA,EAAU,UAAY,EAAA,QAAA,EAAU,KAAQ,GAAA,KAAA;AAChD,EAAM,MAAA,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,MAAM,cAAc,MAAM;AACxB,IAAI,IAAA,QAAA,CAAS,SAAS,KAAO,EAAA;AAC3B,MAAA,QAAA,CAAS,QAAQ,KAAQ,GAAA,EAAA;AACzB,MAAA,QAAA,GAAW,IAAI,CAAA;AAAA;AAEjB,IAAA,QAAA,CAAS,SAAS,KAAM,EAAA;AAAA,GAC1B;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAW,QAAA,GAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,GAC/B;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,MAAQ,EAAA;AAAA,MACN,OAAS,EAAA,WAAA;AAAA,MACT,WAAW,MAAO,CAAA,OAAA;AAAA,MAClB;AAAA;AACF,GACF;AAEA,EAAA,uBACG,IAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAAc,sBAAoB,IAC5D,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA;AAAA,MAAC,IAAK,CAAA,KAAA;AAAA,MAAL;AAAA,QACC,KAAA,EAAO,EAAE,OAAA,EAAS,MAAO,EAAA;AAAA,QACzB,IAAK,EAAA,MAAA;AAAA,QACL,GAAK,EAAA,QAAA;AAAA,QACL,QAAU,EAAA;AAAA;AAAA;AACZ,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FileInput.mjs","sources":["../../../../../../../src/components/FileField/components/FileInput.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref } from \"react\";\nimport React, { type ChangeEvent } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./FileInput.module.scss\";\n\nexport type FileInputOnChangeHandler = (files: FileList | null) => void;\n\n/** @internal */\nexport interface FileInputProps extends PropsWithChildren {\n  onChange?: FileInputOnChangeHandler;\n  isDisabled?: boolean;\n  ref?: Ref<HTMLInputElement>;\n  isReadOnly?: boolean;\n}\n\n/** @internal */\nexport const FileInput: FC<FileInputProps> = (props) => {\n  const { children, isDisabled, onChange, isReadOnly, ref } = props;\n  const inputRef = useObjectRef(ref);\n\n  const handlePress = () => {\n    if (inputRef.current?.value) {\n      inputRef.current.value = \"\";\n      onChange?.(null);\n    }\n    inputRef.current?.click();\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event.target.files);\n  };\n\n  const propsContext: PropsContext = {\n    Button: {\n      onPress: handlePress,\n      className: styles.trigger,\n      isDisabled,\n      isReadOnly,\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext} mergeInParentContext>\n      {children}\n      <Aria.Input\n        style={{ display: \"none\" }}\n        type=\"file\"\n        ref={inputRef}\n        onChange={handleChange}\n      />\n    </PropsContextProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAmBa,MAAA,SAAA,GAAgC,CAAC,KAAU,KAAA;AACtD,EAAA,MAAM,EAAE,QAAU,EAAA,UAAA,EAAY,QAAU,EAAA,UAAA,EAAY,KAAQ,GAAA,KAAA;AAC5D,EAAM,MAAA,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,MAAM,cAAc,MAAM;AACxB,IAAI,IAAA,QAAA,CAAS,SAAS,KAAO,EAAA;AAC3B,MAAA,QAAA,CAAS,QAAQ,KAAQ,GAAA,EAAA;AACzB,MAAA,QAAA,GAAW,IAAI,CAAA;AAAA;AAEjB,IAAA,QAAA,CAAS,SAAS,KAAM,EAAA;AAAA,GAC1B;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAW,QAAA,GAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,GAC/B;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,MAAQ,EAAA;AAAA,MACN,OAAS,EAAA,WAAA;AAAA,MACT,WAAW,MAAO,CAAA,OAAA;AAAA,MAClB,UAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,uBACG,IAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAAc,sBAAoB,IAC5D,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA;AAAA,MAAC,IAAK,CAAA,KAAA;AAAA,MAAL;AAAA,QACC,KAAA,EAAO,EAAE,OAAA,EAAS,MAAO,EAAA;AAAA,QACzB,IAAK,EAAA,MAAA;AAAA,QACL,GAAK,EAAA,QAAA;AAAA,QACL,QAAU,EAAA;AAAA;AAAA;AACZ,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.mjs

@@ -33,7 +33,7 @@ const NavigationGroup = flowComponent("NavigationGroup", (props) => {
   if (collapsable) {
     return /* @__PURE__ */ jsx(PropsContextProvider, { mergeInParentContext: true, props: propsContext, children: /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsxs(Accordion, { defaultExpanded: true, className: rootClassName, children: [
       children,
-      /* @__PURE__ */ jsx(Content, { clearPropsContext: false, children: /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx(TunnelExit, { id: "groupLinks" }) }) })
+      /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx(TunnelExit, { id: "groupLinks" }) }) })
     ] }) }) });
   }
   return /* @__PURE__ */ jsx(PropsContextProvider, { mergeInParentContext: true, props: propsContext, children: /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsx(

package/dist/js/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationGroup.mjs","sources":["../../../../../../../../src/components/Navigation/components/NavigationGroup/NavigationGroup.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport React, { useId } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./NavigationGroup.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport { Accordion } from \"@/components/Accordion\";\nimport { Content } from \"@/components/Content\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\nexport interface NavigationGroupProps\n  extends PropsWithChildren<ComponentProps<\"section\">>,\n    FlowComponentProps<HTMLElement> {\n  collapsable?: boolean;\n}\n\n/** @flr-generate all */\nexport const NavigationGroup = flowComponent(\"NavigationGroup\", (props) => {\n  const { children, className, collapsable, ...rest } = props;\n\n  const rootClassName = clsx(\n    styles.navigationGroup,\n    collapsable && styles.collapsable,\n    className,\n  );\n\n  const generatedId = useId();\n\n  const propsContext: PropsContext = {\n    Label: {\n      id: generatedId,\n      className: styles.label,\n      \"aria-hidden\": true,\n    },\n    Link: {\n      tunnelId: \"groupLinks\",\n    },\n  };\n\n  if (collapsable) {\n    return (\n      <PropsContextProvider mergeInParentContext props={propsContext}>\n        <TunnelProvider>\n          <Accordion defaultExpanded className={rootClassName}>\n            {children}\n            <Content clearPropsContext={false}>\n              <ul>\n                <TunnelExit id=\"groupLinks\" />\n              </ul>\n            </Content>\n          </Accordion>\n        </TunnelProvider>\n      </PropsContextProvider>\n    );\n  }\n\n  return (\n    <PropsContextProvider mergeInParentContext props={propsContext}>\n      <TunnelProvider>\n        <section\n          aria-labelledby={generatedId}\n          className={rootClassName}\n          {...rest}\n        >\n          <PropsContextProvider mergeInParentContext props={propsContext}>\n            {children}\n            <TunnelExit id=\"Label\" />\n            <ul>\n              <TunnelExit id=\"groupLinks\" />\n            </ul>\n          </PropsContextProvider>\n        </section>\n      </TunnelProvider>\n    </PropsContextProvider>\n  );\n});\n\nexport default NavigationGroup;\n"],"names":[],"mappings":";;;;;;;;;;;;AAoBO,MAAM,eAAkB,GAAA,aAAA,CAAc,iBAAmB,EAAA,CAAC,KAAU,KAAA;AACzE,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,WAAa,EAAA,GAAG,MAAS,GAAA,KAAA;AAEtD,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,eAAA;AAAA,IACP,eAAe,MAAO,CAAA,WAAA;AAAA,IACtB;AAAA,GACF;AAEA,EAAA,MAAM,cAAc,KAAM,EAAA;AAE1B,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,KAAO,EAAA;AAAA,MACL,EAAI,EAAA,WAAA;AAAA,MACJ,WAAW,MAAO,CAAA,KAAA;AAAA,MAClB,aAAe,EAAA;AAAA,KACjB;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,QAAU,EAAA;AAAA;AACZ,GACF;AAEA,EAAA,IAAI,WAAa,EAAA;AACf,IAAA,uBACG,GAAA,CAAA,oBAAA,EAAA,EAAqB,oBAAoB,EAAA,IAAA,EAAC,KAAO,EAAA,YAAA,EAChD,QAAC,kBAAA,GAAA,CAAA,cAAA,EAAA,EACC,QAAC,kBAAA,IAAA,CAAA,SAAA,EAAA,EAAU,eAAe,EAAA,IAAA,EAAC,WAAW,aACnC,EAAA,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACD,GAAA,CAAC,OAAQ,EAAA,EAAA,iBAAA,EAAmB,KAC1B,EAAA,QAAA,kBAAA,GAAA,CAAC,IACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,YAAa,EAAA,CAAA,EAC9B,CACF,EAAA;AAAA,KAAA,EACF,GACF,CACF,EAAA,CAAA;AAAA;AAIJ,EAAA,2BACG,oBAAqB,EAAA,EAAA,oBAAA,EAAoB,MAAC,KAAO,EAAA,YAAA,EAChD,8BAAC,cACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,iBAAiB,EAAA,WAAA;AAAA,MACjB,SAAW,EAAA,aAAA;AAAA,MACV,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,IAAA,CAAA,oBAAA,EAAA,EAAqB,oBAAoB,EAAA,IAAA,EAAC,OAAO,YAC/C,EAAA,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBACD,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,OAAQ,EAAA,CAAA;AAAA,4BACtB,IACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,cAAa,CAC9B,EAAA;AAAA,OACF,EAAA;AAAA;AAAA,KAEJ,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"NavigationGroup.mjs","sources":["../../../../../../../../src/components/Navigation/components/NavigationGroup/NavigationGroup.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport React, { useId } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./NavigationGroup.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport { Accordion } from \"@/components/Accordion\";\nimport { Content } from \"@/components/Content\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\nexport interface NavigationGroupProps\n  extends PropsWithChildren<ComponentProps<\"section\">>,\n    FlowComponentProps<HTMLElement> {\n  collapsable?: boolean;\n}\n\n/** @flr-generate all */\nexport const NavigationGroup = flowComponent(\"NavigationGroup\", (props) => {\n  const { children, className, collapsable, ...rest } = props;\n\n  const rootClassName = clsx(\n    styles.navigationGroup,\n    collapsable && styles.collapsable,\n    className,\n  );\n\n  const generatedId = useId();\n\n  const propsContext: PropsContext = {\n    Label: {\n      id: generatedId,\n      className: styles.label,\n      \"aria-hidden\": true,\n    },\n    Link: {\n      tunnelId: \"groupLinks\",\n    },\n  };\n\n  if (collapsable) {\n    return (\n      <PropsContextProvider mergeInParentContext props={propsContext}>\n        <TunnelProvider>\n          <Accordion defaultExpanded className={rootClassName}>\n            {children}\n            <Content>\n              <ul>\n                <TunnelExit id=\"groupLinks\" />\n              </ul>\n            </Content>\n          </Accordion>\n        </TunnelProvider>\n      </PropsContextProvider>\n    );\n  }\n\n  return (\n    <PropsContextProvider mergeInParentContext props={propsContext}>\n      <TunnelProvider>\n        <section\n          aria-labelledby={generatedId}\n          className={rootClassName}\n          {...rest}\n        >\n          <PropsContextProvider mergeInParentContext props={propsContext}>\n            {children}\n            <TunnelExit id=\"Label\" />\n            <ul>\n              <TunnelExit id=\"groupLinks\" />\n            </ul>\n          </PropsContextProvider>\n        </section>\n      </TunnelProvider>\n    </PropsContextProvider>\n  );\n});\n\nexport default NavigationGroup;\n"],"names":[],"mappings":";;;;;;;;;;;;AAoBO,MAAM,eAAkB,GAAA,aAAA,CAAc,iBAAmB,EAAA,CAAC,KAAU,KAAA;AACzE,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,WAAa,EAAA,GAAG,MAAS,GAAA,KAAA;AAEtD,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,eAAA;AAAA,IACP,eAAe,MAAO,CAAA,WAAA;AAAA,IACtB;AAAA,GACF;AAEA,EAAA,MAAM,cAAc,KAAM,EAAA;AAE1B,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,KAAO,EAAA;AAAA,MACL,EAAI,EAAA,WAAA;AAAA,MACJ,WAAW,MAAO,CAAA,KAAA;AAAA,MAClB,aAAe,EAAA;AAAA,KACjB;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,QAAU,EAAA;AAAA;AACZ,GACF;AAEA,EAAA,IAAI,WAAa,EAAA;AACf,IAAA,uBACG,GAAA,CAAA,oBAAA,EAAA,EAAqB,oBAAoB,EAAA,IAAA,EAAC,KAAO,EAAA,YAAA,EAChD,QAAC,kBAAA,GAAA,CAAA,cAAA,EAAA,EACC,QAAC,kBAAA,IAAA,CAAA,SAAA,EAAA,EAAU,eAAe,EAAA,IAAA,EAAC,WAAW,aACnC,EAAA,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACD,GAAA,CAAC,WACC,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EACC,8BAAC,UAAW,EAAA,EAAA,EAAA,EAAG,YAAa,EAAA,CAAA,EAC9B,CACF,EAAA;AAAA,KAAA,EACF,GACF,CACF,EAAA,CAAA;AAAA;AAIJ,EAAA,2BACG,oBAAqB,EAAA,EAAA,oBAAA,EAAoB,MAAC,KAAO,EAAA,YAAA,EAChD,8BAAC,cACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,iBAAiB,EAAA,WAAA;AAAA,MACjB,SAAW,EAAA,aAAA;AAAA,MACV,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,IAAA,CAAA,oBAAA,EAAA,EAAqB,oBAAoB,EAAA,IAAA,EAAC,OAAO,YAC/C,EAAA,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBACD,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,OAAQ,EAAA,CAAA;AAAA,4BACtB,IACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,cAAa,CAC9B,EAAA;AAAA,OACF,EAAA;AAAA;AAAA,KAEJ,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/Select/Select.mjs

@@ -29,6 +29,7 @@ const Select = flowComponent("Select", (props) => {
     },
     controller: controllerFromProps,
     ref,
+    isReadOnly,
     ...rest
   } = props;
   const rootClassName = clsx(
@@ -66,11 +67,12 @@ const Select = flowComponent("Select", (props) => {
       ...rest,
       className: rootClassName,
       ref,
-      onSelectionChange: handleOnSelectionChange,
-      onOpenChange: (isOpen2) => controller.setOpen(isOpen2),
+      onSelectionChange: isReadOnly ? void 0 : handleOnSelectionChange,
+      onOpenChange: (isOpen2) => !isReadOnly && controller.setOpen(isOpen2),
       isOpen,
+      "data-readonly": isReadOnly,
       children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
-        /* @__PURE__ */ jsxs(Aria.Button, { className: styles.toggle, children: [
+        /* @__PURE__ */ jsxs(Aria.Button, { "data-readonly": isReadOnly, className: styles.toggle, children: [
           /* @__PURE__ */ jsx(Aria.SelectValue, {}),
           /* @__PURE__ */ jsx(IconChevronDown, {})
         ] }),

package/dist/js/components/src/components/Select/Select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.mjs","sources":["../../../../../../src/components/Select/Select.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport { FieldError } from \"@/components/FieldError\";\nimport styles from \"./Select.module.scss\";\nimport clsx from \"clsx\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Options } from \"@/components/Options\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { type OverlayController, useOverlayController } from \"@/lib/controller\";\n\nexport interface SelectProps\n  extends PropsWithChildren<\n      Omit<Aria.SelectProps<{ example: string }>, \"children\" | \"className\">\n    >,\n    FlowComponentProps,\n    PropsWithClassName {\n  /** Handler that is called when the selected value changes. */\n  onChange?: (value: string | number) => void;\n  /** An overlay controller to control the select option popover state. */\n  controller?: OverlayController;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Select = flowComponent(\"Select\", (props) => {\n  const {\n    children,\n    className,\n    onChange = () => {\n      // default: do nothing\n    },\n    onSelectionChange = () => {\n      // default: do nothing\n    },\n    controller: controllerFromProps,\n    ref,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.select,\n    formFieldStyles.formField,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Label: {\n      className: formFieldStyles.label,\n      optional: !props.isRequired,\n    },\n    FieldDescription: {\n      className: formFieldStyles.fieldDescription,\n    },\n    FieldError: {\n      className: formFieldStyles.customFieldError,\n    },\n    Option: {\n      tunnelId: \"options\",\n    },\n  };\n\n  const handleOnSelectionChange = (id: Key | null) => {\n    onChange(String(id));\n    onSelectionChange(id);\n  };\n\n  const controllerFromContext = useOverlayController(\"Select\", {\n    reuseControllerFromContext: true,\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n\n  const isOpen = controller.useIsOpen();\n\n  return (\n    <Aria.Select\n      {...rest}\n      className={rootClassName}\n      ref={ref}\n      onSelectionChange={handleOnSelectionChange}\n      onOpenChange={(isOpen) => controller.setOpen(isOpen)}\n      isOpen={isOpen}\n    >\n      <PropsContextProvider props={propsContext}>\n        <TunnelProvider>\n          <Aria.Button className={styles.toggle}>\n            <Aria.SelectValue />\n            <IconChevronDown />\n          </Aria.Button>\n\n          {children}\n          <Options controller={controller}>\n            <TunnelExit id=\"options\" />\n          </Options>\n\n          <FieldError className={formFieldStyles.fieldError} />\n        </TunnelProvider>\n      </PropsContextProvider>\n    </Aria.Select>\n  );\n});\n\nexport default Select;\n"],"names":["isOpen"],"mappings":";;;;;;;;;;;;;;;;;;;AAiCO,MAAM,MAAS,GAAA,aAAA,CAAc,QAAU,EAAA,CAAC,KAAU,KAAA;AACvD,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAW,MAAM;AAAA,KAEjB;AAAA,IACA,oBAAoB,MAAM;AAAA,KAE1B;AAAA,IACA,UAAY,EAAA,mBAAA;AAAA,IACZ,GAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,MAAA;AAAA,IACP,eAAgB,CAAA,SAAA;AAAA,IAChB;AAAA,GACF;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,KAAO,EAAA;AAAA,MACL,WAAW,eAAgB,CAAA,KAAA;AAAA,MAC3B,QAAA,EAAU,CAAC,KAAM,CAAA;AAAA,KACnB;AAAA,IACA,gBAAkB,EAAA;AAAA,MAChB,WAAW,eAAgB,CAAA;AAAA,KAC7B;AAAA,IACA,UAAY,EAAA;AAAA,MACV,WAAW,eAAgB,CAAA;AAAA,KAC7B;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA;AACZ,GACF;AAEA,EAAM,MAAA,uBAAA,GAA0B,CAAC,EAAmB,KAAA;AAClD,IAAS,QAAA,CAAA,MAAA,CAAO,EAAE,CAAC,CAAA;AACnB,IAAA,iBAAA,CAAkB,EAAE,CAAA;AAAA,GACtB;AAEA,EAAM,MAAA,qBAAA,GAAwB,qBAAqB,QAAU,EAAA;AAAA,IAC3D,0BAA4B,EAAA;AAAA,GAC7B,CAAA;AAED,EAAA,MAAM,aAAa,mBAAuB,IAAA,qBAAA;AAE1C,EAAM,MAAA,MAAA,GAAS,WAAW,SAAU,EAAA;AAEpC,EACE,uBAAA,GAAA;AAAA,IAAC,IAAK,CAAA,MAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAW,EAAA,aAAA;AAAA,MACX,GAAA;AAAA,MACA,iBAAmB,EAAA,uBAAA;AAAA,MACnB,YAAc,EAAA,CAACA,OAAW,KAAA,UAAA,CAAW,QAAQA,OAAM,CAAA;AAAA,MACnD,MAAA;AAAA,MAEA,QAAC,kBAAA,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAC3B,+BAAC,cACC,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,IAAK,CAAA,MAAA,EAAL,EAAY,SAAA,EAAW,OAAO,MAC7B,EAAA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,IAAA,CAAK,aAAL,EAAiB,CAAA;AAAA,8BACjB,eAAgB,EAAA,EAAA;AAAA,SACnB,EAAA,CAAA;AAAA,QAEC,QAAA;AAAA,4BACA,OAAQ,EAAA,EAAA,UAAA,EACP,8BAAC,UAAW,EAAA,EAAA,EAAA,EAAG,WAAU,CAC3B,EAAA,CAAA;AAAA,wBAEC,GAAA,CAAA,UAAA,EAAA,EAAW,SAAW,EAAA,eAAA,CAAgB,UAAY,EAAA;AAAA,OAAA,EACrD,CACF,EAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Select.mjs","sources":["../../../../../../src/components/Select/Select.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport { FieldError } from \"@/components/FieldError\";\nimport styles from \"./Select.module.scss\";\nimport clsx from \"clsx\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Options } from \"@/components/Options\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { type OverlayController, useOverlayController } from \"@/lib/controller\";\n\nexport interface SelectProps\n  extends PropsWithChildren<\n      Omit<Aria.SelectProps<{ example: string }>, \"children\" | \"className\">\n    >,\n    FlowComponentProps,\n    PropsWithClassName {\n  /** Handler that is called when the selected value changes. */\n  onChange?: (value: string | number) => void;\n  /** An overlay controller to control the select option popover state. */\n  controller?: OverlayController;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Select = flowComponent(\"Select\", (props) => {\n  const {\n    children,\n    className,\n    onChange = () => {\n      // default: do nothing\n    },\n    onSelectionChange = () => {\n      // default: do nothing\n    },\n    controller: controllerFromProps,\n    ref,\n    isReadOnly,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.select,\n    formFieldStyles.formField,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Label: {\n      className: formFieldStyles.label,\n      optional: !props.isRequired,\n    },\n    FieldDescription: {\n      className: formFieldStyles.fieldDescription,\n    },\n    FieldError: {\n      className: formFieldStyles.customFieldError,\n    },\n    Option: {\n      tunnelId: \"options\",\n    },\n  };\n\n  const handleOnSelectionChange = (id: Key | null) => {\n    onChange(String(id));\n    onSelectionChange(id);\n  };\n\n  const controllerFromContext = useOverlayController(\"Select\", {\n    reuseControllerFromContext: true,\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n\n  const isOpen = controller.useIsOpen();\n\n  return (\n    <Aria.Select\n      {...rest}\n      className={rootClassName}\n      ref={ref}\n      onSelectionChange={isReadOnly ? undefined : handleOnSelectionChange}\n      onOpenChange={(isOpen) => !isReadOnly && controller.setOpen(isOpen)}\n      isOpen={isOpen}\n      data-readonly={isReadOnly}\n    >\n      <PropsContextProvider props={propsContext}>\n        <TunnelProvider>\n          <Aria.Button data-readonly={isReadOnly} className={styles.toggle}>\n            <Aria.SelectValue />\n            <IconChevronDown />\n          </Aria.Button>\n\n          {children}\n          <Options controller={controller}>\n            <TunnelExit id=\"options\" />\n          </Options>\n\n          <FieldError className={formFieldStyles.fieldError} />\n        </TunnelProvider>\n      </PropsContextProvider>\n    </Aria.Select>\n  );\n});\n\nexport default Select;\n"],"names":["isOpen"],"mappings":";;;;;;;;;;;;;;;;;;;AAmCO,MAAM,MAAS,GAAA,aAAA,CAAc,QAAU,EAAA,CAAC,KAAU,KAAA;AACvD,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAW,MAAM;AAAA,KAEjB;AAAA,IACA,oBAAoB,MAAM;AAAA,KAE1B;AAAA,IACA,UAAY,EAAA,mBAAA;AAAA,IACZ,GAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,MAAA;AAAA,IACP,eAAgB,CAAA,SAAA;AAAA,IAChB;AAAA,GACF;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,KAAO,EAAA;AAAA,MACL,WAAW,eAAgB,CAAA,KAAA;AAAA,MAC3B,QAAA,EAAU,CAAC,KAAM,CAAA;AAAA,KACnB;AAAA,IACA,gBAAkB,EAAA;AAAA,MAChB,WAAW,eAAgB,CAAA;AAAA,KAC7B;AAAA,IACA,UAAY,EAAA;AAAA,MACV,WAAW,eAAgB,CAAA;AAAA,KAC7B;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA;AACZ,GACF;AAEA,EAAM,MAAA,uBAAA,GAA0B,CAAC,EAAmB,KAAA;AAClD,IAAS,QAAA,CAAA,MAAA,CAAO,EAAE,CAAC,CAAA;AACnB,IAAA,iBAAA,CAAkB,EAAE,CAAA;AAAA,GACtB;AAEA,EAAM,MAAA,qBAAA,GAAwB,qBAAqB,QAAU,EAAA;AAAA,IAC3D,0BAA4B,EAAA;AAAA,GAC7B,CAAA;AAED,EAAA,MAAM,aAAa,mBAAuB,IAAA,qBAAA;AAE1C,EAAM,MAAA,MAAA,GAAS,WAAW,SAAU,EAAA;AAEpC,EACE,uBAAA,GAAA;AAAA,IAAC,IAAK,CAAA,MAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAW,EAAA,aAAA;AAAA,MACX,GAAA;AAAA,MACA,iBAAA,EAAmB,aAAa,MAAY,GAAA,uBAAA;AAAA,MAC5C,cAAc,CAACA,OAAAA,KAAW,CAAC,UAAc,IAAA,UAAA,CAAW,QAAQA,OAAM,CAAA;AAAA,MAClE,MAAA;AAAA,MACA,eAAe,EAAA,UAAA;AAAA,MAEf,QAAC,kBAAA,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAC3B,+BAAC,cACC,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAK,MAAL,EAAA,EAAY,iBAAe,UAAY,EAAA,SAAA,EAAW,OAAO,MACxD,EAAA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,IAAA,CAAK,aAAL,EAAiB,CAAA;AAAA,8BACjB,eAAgB,EAAA,EAAA;AAAA,SACnB,EAAA,CAAA;AAAA,QAEC,QAAA;AAAA,4BACA,OAAQ,EAAA,EAAA,UAAA,EACP,8BAAC,UAAW,EAAA,EAAA,EAAA,EAAG,WAAU,CAC3B,EAAA,CAAA;AAAA,wBAEC,GAAA,CAAA,UAAA,EAAA,EAAW,SAAW,EAAA,eAAA,CAAgB,UAAY,EAAA;AAAA,OAAA,EACrD,CACF,EAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/Slider/Slider.mjs

@@ -25,6 +25,7 @@ const Slider = flowComponent("Slider", (props) => {
     isDisabled,
     defaultValue,
     showInitialMarker,
+    isReadOnly,
     ...rest
   } = props;
   const rootClassName = clsx(
@@ -61,6 +62,7 @@ const Slider = flowComponent("Slider", (props) => {
               className: styles.decrement,
               isDisabled,
               excludeFromTabOrder: true,
+              isReadOnly,
               children: /* @__PURE__ */ jsx(IconMinus, {})
             }
           ),
@@ -74,6 +76,7 @@ const Slider = flowComponent("Slider", (props) => {
               className: styles.increment,
               isDisabled,
               excludeFromTabOrder: true,
+              isReadOnly,
               children: /* @__PURE__ */ jsx(IconPlus, {})
             }
           ),
@@ -93,7 +96,14 @@ const Slider = flowComponent("Slider", (props) => {
               }
             }
           ),
-          /* @__PURE__ */ jsx(Aria.SliderThumb, { name, className: styles.handle })
+          /* @__PURE__ */ jsx(
+            Aria.SliderThumb,
+            {
+              name,
+              className: styles.handle,
+              isDisabled: isReadOnly
+            }
+          )
         ] }) })
       ]
     }

package/dist/js/components/src/components/Slider/Slider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.mjs","sources":["../../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Slider.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconMinus, IconPlus } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\n\nexport interface SliderProps\n  extends FlowComponentProps<HTMLDivElement>,\n    PropsWithChildren<Aria.SliderProps>,\n    Pick<Aria.SliderThumbProps, \"name\"> {\n  showInitialMarker?: boolean;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Slider = flowComponent(\"Slider\", (props) => {\n  const {\n    className,\n    children,\n    name,\n    isDisabled,\n    defaultValue,\n    showInitialMarker,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.slider,\n    isDisabled && styles.disabled,\n    className,\n  );\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const propsContext: PropsContext = {\n    Label: {\n      unstyled: true,\n    },\n  };\n\n  return (\n    <Aria.Slider\n      className={rootClassName}\n      isDisabled={isDisabled}\n      defaultValue={defaultValue}\n      {...rest}\n    >\n      <div className={styles.text}>\n        <Aria.SliderOutput className={styles.value} />\n\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </div>\n\n      <Aria.SliderTrack className={styles.track}>\n        {({ state }) => (\n          <>\n            <Button\n              onPress={() => state.decrementThumb(0)}\n              aria-label={stringFormatter.format(\"slider.decrement\")}\n              variant=\"plain\"\n              color=\"secondary\"\n              className={styles.decrement}\n              isDisabled={isDisabled}\n              excludeFromTabOrder\n            >\n              <IconMinus />\n            </Button>\n\n            <Button\n              onPress={() => state.incrementThumb(0)}\n              aria-label={stringFormatter.format(\"slider.increment\")}\n              variant=\"plain\"\n              color=\"secondary\"\n              className={styles.increment}\n              isDisabled={isDisabled}\n              excludeFromTabOrder\n            >\n              <IconPlus />\n            </Button>\n\n            <div\n              className={styles.fill}\n              style={{ width: state.getThumbPercent(0) * 100 + \"%\" }}\n            />\n\n            {showInitialMarker &&\n              defaultValue &&\n              typeof defaultValue === \"number\" && (\n                <div\n                  className={styles.initialMarker}\n                  style={{\n                    left: `calc(${state.getValuePercent(defaultValue) * 100}% - 2px)`,\n                  }}\n                />\n              )}\n\n            <Aria.SliderThumb name={name} className={styles.handle} />\n          </>\n        )}\n      </Aria.SliderTrack>\n    </Aria.Slider>\n  );\n});\n\nexport default Slider;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Slider.mjs","sources":["../../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Slider.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconMinus, IconPlus } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\n\nexport interface SliderProps\n  extends FlowComponentProps<HTMLDivElement>,\n    PropsWithChildren<Aria.SliderProps>,\n    Pick<Aria.SliderThumbProps, \"name\"> {\n  showInitialMarker?: boolean;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Slider = flowComponent(\"Slider\", (props) => {\n  const {\n    className,\n    children,\n    name,\n    isDisabled,\n    defaultValue,\n    showInitialMarker,\n    isReadOnly,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.slider,\n    isDisabled && styles.disabled,\n    className,\n  );\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const propsContext: PropsContext = {\n    Label: {\n      unstyled: true,\n    },\n  };\n\n  return (\n    <Aria.Slider\n      className={rootClassName}\n      isDisabled={isDisabled}\n      defaultValue={defaultValue}\n      {...rest}\n    >\n      <div className={styles.text}>\n        <Aria.SliderOutput className={styles.value} />\n\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </div>\n\n      <Aria.SliderTrack className={styles.track}>\n        {({ state }) => (\n          <>\n            <Button\n              onPress={() => state.decrementThumb(0)}\n              aria-label={stringFormatter.format(\"slider.decrement\")}\n              variant=\"plain\"\n              color=\"secondary\"\n              className={styles.decrement}\n              isDisabled={isDisabled}\n              excludeFromTabOrder\n              isReadOnly={isReadOnly}\n            >\n              <IconMinus />\n            </Button>\n\n            <Button\n              onPress={() => state.incrementThumb(0)}\n              aria-label={stringFormatter.format(\"slider.increment\")}\n              variant=\"plain\"\n              color=\"secondary\"\n              className={styles.increment}\n              isDisabled={isDisabled}\n              excludeFromTabOrder\n              isReadOnly={isReadOnly}\n            >\n              <IconPlus />\n            </Button>\n\n            <div\n              className={styles.fill}\n              style={{ width: state.getThumbPercent(0) * 100 + \"%\" }}\n            />\n\n            {showInitialMarker &&\n              defaultValue &&\n              typeof defaultValue === \"number\" && (\n                <div\n                  className={styles.initialMarker}\n                  style={{\n                    left: `calc(${state.getValuePercent(defaultValue) * 100}% - 2px)`,\n                  }}\n                />\n              )}\n\n            <Aria.SliderThumb\n              name={name}\n              className={styles.handle}\n              isDisabled={isReadOnly}\n            />\n          </>\n        )}\n      </Aria.SliderTrack>\n    </Aria.Slider>\n  );\n});\n\nexport default Slider;\n"],"names":[],"mappings":"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"}

package/dist/js/components/src/integrations/react-hook-form/components/Field/Field.mjs

@@ -74,6 +74,7 @@ function Field(props) {
   return /* @__PURE__ */ jsx(
     PropsContextProvider,
     {
+      mergeInParentContext: true,
       props: propsContext,
       dependencies: [controller.fieldState, controller.field, value],
       children

package/dist/js/components/src/integrations/react-hook-form/components/Field/Field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Field.mjs","sources":["../../../../../../../../src/integrations/react-hook-form/components/Field/Field.tsx"],"sourcesContent":["import { useFormContext } from \"@/integrations/react-hook-form/components/context/formContext\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithChildren } from \"react\";\nimport {\n  useController,\n  type ControllerProps,\n  type FieldValues,\n  type UseFormReturn,\n} from \"react-hook-form\";\nimport FieldErrorView from \"@/views/FieldErrorView\";\n\nexport interface FieldProps<T extends FieldValues>\n  extends Omit<ControllerProps<T>, \"render\">,\n    PropsWithChildren {}\n\nexport function Field<T extends FieldValues>(props: FieldProps<T>) {\n  const { children, name, defaultValue, ...rest } = props;\n\n  const controller = useController(props);\n  const formContext = useFormContext<T>();\n  const value = controller.field.value;\n\n  const fieldProps = {\n    ...controller.field,\n    name,\n    form: formContext.id,\n    isRequired: !!rest.rules?.required,\n    validationBehavior: \"aria\" as const,\n    defaultValue,\n    isInvalid: controller.fieldState.invalid,\n    children: dynamic((p) => {\n      if (controller.fieldState.invalid) {\n        return (\n          <>\n            {p.children}\n            <FieldErrorView>\n              {controller.fieldState.error?.message}\n            </FieldErrorView>\n          </>\n        );\n      }\n\n      return p.children;\n    }),\n  };\n\n  const { value: ignoredValue, ...fieldPropsWithoutValue } = fieldProps;\n\n  const propsContext: PropsContext = {\n    SearchField: fieldProps,\n    TextField: fieldProps,\n    TextArea: fieldProps,\n    MarkdownEditor: fieldProps,\n\n    Checkbox: {\n      ...fieldProps,\n      isSelected: value,\n    },\n    CheckboxGroup: fieldProps,\n    CheckboxButton: {\n      ...fieldProps,\n      isSelected: value,\n    },\n    FileField: fieldProps,\n    FileDropZone: fieldProps,\n    NumberField: fieldProps,\n    RadioGroup: fieldProps,\n    Switch: {\n      ...fieldProps,\n      isSelected: value,\n    },\n    Slider: fieldProps,\n    PasswordCreationField: fieldProps,\n    DatePicker: fieldProps,\n    DateRangePicker: fieldProps,\n    TimeField: fieldProps,\n    SegmentedControl: fieldProps,\n    Select: {\n      ...fieldProps,\n      selectedKey: value,\n    },\n    ComboBox: {\n      ...fieldPropsWithoutValue,\n      selectedKey: value,\n    },\n  };\n\n  return (\n    <PropsContextProvider\n      props={propsContext}\n      dependencies={[controller.fieldState, controller.field, value]}\n    >\n      {children}\n    </PropsContextProvider>\n  );\n}\n\nexport const typedField = <T extends FieldValues>(\n  ignoredForm: UseFormReturn<T> | UseFormReturn<T>[\"control\"],\n): typeof Field<T> => Field;\n\nexport default Field;\n"],"names":[],"mappings":";;;;;;;;;;AAgBO,SAAS,MAA6B,KAAsB,EAAA;AACjE,EAAA,MAAM,EAAE,QAAU,EAAA,IAAA,EAAM,YAAc,EAAA,GAAG,MAAS,GAAA,KAAA;AAElD,EAAM,MAAA,UAAA,GAAa,cAAc,KAAK,CAAA;AACtC,EAAA,MAAM,cAAc,cAAkB,EAAA;AACtC,EAAM,MAAA,KAAA,GAAQ,WAAW,KAAM,CAAA,KAAA;AAE/B,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,GAAG,UAAW,CAAA,KAAA;AAAA,IACd,IAAA;AAAA,IACA,MAAM,WAAY,CAAA,EAAA;AAAA,IAClB,UAAY,EAAA,CAAC,CAAC,IAAA,CAAK,KAAO,EAAA,QAAA;AAAA,IAC1B,kBAAoB,EAAA,MAAA;AAAA,IACpB,YAAA;AAAA,IACA,SAAA,EAAW,WAAW,UAAW,CAAA,OAAA;AAAA,IACjC,QAAA,EAAU,OAAQ,CAAA,CAAC,CAAM,KAAA;AACvB,MAAI,IAAA,UAAA,CAAW,WAAW,OAAS,EAAA;AACjC,QAAA,uBAEK,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,UAAE,CAAA,CAAA,QAAA;AAAA,0BACF,GAAA,CAAA,cAAA,EAAA,EACE,QAAW,EAAA,UAAA,CAAA,UAAA,CAAW,OAAO,OAChC,EAAA;AAAA,SACF,EAAA,CAAA;AAAA;AAIJ,MAAA,OAAO,CAAE,CAAA,QAAA;AAAA,KACV;AAAA,GACH;AAEA,EAAA,MAAM,EAAE,KAAA,EAAO,YAAc,EAAA,GAAG,wBAA2B,GAAA,UAAA;AAE3D,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,WAAa,EAAA,UAAA;AAAA,IACb,SAAW,EAAA,UAAA;AAAA,IACX,QAAU,EAAA,UAAA;AAAA,IACV,cAAgB,EAAA,UAAA;AAAA,IAEhB,QAAU,EAAA;AAAA,MACR,GAAG,UAAA;AAAA,MACH,UAAY,EAAA;AAAA,KACd;AAAA,IACA,aAAe,EAAA,UAAA;AAAA,IACf,cAAgB,EAAA;AAAA,MACd,GAAG,UAAA;AAAA,MACH,UAAY,EAAA;AAAA,KACd;AAAA,IACA,SAAW,EAAA,UAAA;AAAA,IACX,YAAc,EAAA,UAAA;AAAA,IACd,WAAa,EAAA,UAAA;AAAA,IACb,UAAY,EAAA,UAAA;AAAA,IACZ,MAAQ,EAAA;AAAA,MACN,GAAG,UAAA;AAAA,MACH,UAAY,EAAA;AAAA,KACd;AAAA,IACA,MAAQ,EAAA,UAAA;AAAA,IACR,qBAAuB,EAAA,UAAA;AAAA,IACvB,UAAY,EAAA,UAAA;AAAA,IACZ,eAAiB,EAAA,UAAA;AAAA,IACjB,SAAW,EAAA,UAAA;AAAA,IACX,gBAAkB,EAAA,UAAA;AAAA,IAClB,MAAQ,EAAA;AAAA,MACN,GAAG,UAAA;AAAA,MACH,WAAa,EAAA;AAAA,KACf;AAAA,IACA,QAAU,EAAA;AAAA,MACR,GAAG,sBAAA;AAAA,MACH,WAAa,EAAA;AAAA;AACf,GACF;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,oBAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA,YAAA;AAAA,MACP,cAAc,CAAC,UAAA,CAAW,UAAY,EAAA,UAAA,CAAW,OAAO,KAAK,CAAA;AAAA,MAE5D;AAAA;AAAA,GACH;AAEJ;AAEa,MAAA,UAAA,GAAa,CACxB,WACoB,KAAA;;;;"}
+{"version":3,"file":"Field.mjs","sources":["../../../../../../../../src/integrations/react-hook-form/components/Field/Field.tsx"],"sourcesContent":["import { useFormContext } from \"@/integrations/react-hook-form/components/context/formContext\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithChildren } from \"react\";\nimport {\n  useController,\n  type ControllerProps,\n  type FieldValues,\n  type UseFormReturn,\n} from \"react-hook-form\";\nimport FieldErrorView from \"@/views/FieldErrorView\";\n\nexport interface FieldProps<T extends FieldValues>\n  extends Omit<ControllerProps<T>, \"render\">,\n    PropsWithChildren {}\n\nexport function Field<T extends FieldValues>(props: FieldProps<T>) {\n  const { children, name, defaultValue, ...rest } = props;\n\n  const controller = useController(props);\n  const formContext = useFormContext<T>();\n  const value = controller.field.value;\n\n  const fieldProps = {\n    ...controller.field,\n    name,\n    form: formContext.id,\n    isRequired: !!rest.rules?.required,\n    validationBehavior: \"aria\" as const,\n    defaultValue,\n    isInvalid: controller.fieldState.invalid,\n    children: dynamic((p) => {\n      if (controller.fieldState.invalid) {\n        return (\n          <>\n            {p.children}\n            <FieldErrorView>\n              {controller.fieldState.error?.message}\n            </FieldErrorView>\n          </>\n        );\n      }\n\n      return p.children;\n    }),\n  };\n\n  const { value: ignoredValue, ...fieldPropsWithoutValue } = fieldProps;\n\n  const propsContext: PropsContext = {\n    SearchField: fieldProps,\n    TextField: fieldProps,\n    TextArea: fieldProps,\n    MarkdownEditor: fieldProps,\n\n    Checkbox: {\n      ...fieldProps,\n      isSelected: value,\n    },\n    CheckboxGroup: fieldProps,\n    CheckboxButton: {\n      ...fieldProps,\n      isSelected: value,\n    },\n    FileField: fieldProps,\n    FileDropZone: fieldProps,\n    NumberField: fieldProps,\n    RadioGroup: fieldProps,\n    Switch: {\n      ...fieldProps,\n      isSelected: value,\n    },\n    Slider: fieldProps,\n    PasswordCreationField: fieldProps,\n    DatePicker: fieldProps,\n    DateRangePicker: fieldProps,\n    TimeField: fieldProps,\n    SegmentedControl: fieldProps,\n    Select: {\n      ...fieldProps,\n      selectedKey: value,\n    },\n    ComboBox: {\n      ...fieldPropsWithoutValue,\n      selectedKey: value,\n    },\n  };\n\n  return (\n    <PropsContextProvider\n      mergeInParentContext\n      props={propsContext}\n      dependencies={[controller.fieldState, controller.field, value]}\n    >\n      {children}\n    </PropsContextProvider>\n  );\n}\n\nexport const typedField = <T extends FieldValues>(\n  ignoredForm: UseFormReturn<T> | UseFormReturn<T>[\"control\"],\n): typeof Field<T> => Field;\n\nexport default Field;\n"],"names":[],"mappings":";;;;;;;;;;AAgBO,SAAS,MAA6B,KAAsB,EAAA;AACjE,EAAA,MAAM,EAAE,QAAU,EAAA,IAAA,EAAM,YAAc,EAAA,GAAG,MAAS,GAAA,KAAA;AAElD,EAAM,MAAA,UAAA,GAAa,cAAc,KAAK,CAAA;AACtC,EAAA,MAAM,cAAc,cAAkB,EAAA;AACtC,EAAM,MAAA,KAAA,GAAQ,WAAW,KAAM,CAAA,KAAA;AAE/B,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,GAAG,UAAW,CAAA,KAAA;AAAA,IACd,IAAA;AAAA,IACA,MAAM,WAAY,CAAA,EAAA;AAAA,IAClB,UAAY,EAAA,CAAC,CAAC,IAAA,CAAK,KAAO,EAAA,QAAA;AAAA,IAC1B,kBAAoB,EAAA,MAAA;AAAA,IACpB,YAAA;AAAA,IACA,SAAA,EAAW,WAAW,UAAW,CAAA,OAAA;AAAA,IACjC,QAAA,EAAU,OAAQ,CAAA,CAAC,CAAM,KAAA;AACvB,MAAI,IAAA,UAAA,CAAW,WAAW,OAAS,EAAA;AACjC,QAAA,uBAEK,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,UAAE,CAAA,CAAA,QAAA;AAAA,0BACF,GAAA,CAAA,cAAA,EAAA,EACE,QAAW,EAAA,UAAA,CAAA,UAAA,CAAW,OAAO,OAChC,EAAA;AAAA,SACF,EAAA,CAAA;AAAA;AAIJ,MAAA,OAAO,CAAE,CAAA,QAAA;AAAA,KACV;AAAA,GACH;AAEA,EAAA,MAAM,EAAE,KAAA,EAAO,YAAc,EAAA,GAAG,wBAA2B,GAAA,UAAA;AAE3D,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,WAAa,EAAA,UAAA;AAAA,IACb,SAAW,EAAA,UAAA;AAAA,IACX,QAAU,EAAA,UAAA;AAAA,IACV,cAAgB,EAAA,UAAA;AAAA,IAEhB,QAAU,EAAA;AAAA,MACR,GAAG,UAAA;AAAA,MACH,UAAY,EAAA;AAAA,KACd;AAAA,IACA,aAAe,EAAA,UAAA;AAAA,IACf,cAAgB,EAAA;AAAA,MACd,GAAG,UAAA;AAAA,MACH,UAAY,EAAA;AAAA,KACd;AAAA,IACA,SAAW,EAAA,UAAA;AAAA,IACX,YAAc,EAAA,UAAA;AAAA,IACd,WAAa,EAAA,UAAA;AAAA,IACb,UAAY,EAAA,UAAA;AAAA,IACZ,MAAQ,EAAA;AAAA,MACN,GAAG,UAAA;AAAA,MACH,UAAY,EAAA;AAAA,KACd;AAAA,IACA,MAAQ,EAAA,UAAA;AAAA,IACR,qBAAuB,EAAA,UAAA;AAAA,IACvB,UAAY,EAAA,UAAA;AAAA,IACZ,eAAiB,EAAA,UAAA;AAAA,IACjB,SAAW,EAAA,UAAA;AAAA,IACX,gBAAkB,EAAA,UAAA;AAAA,IAClB,MAAQ,EAAA;AAAA,MACN,GAAG,UAAA;AAAA,MACH,WAAa,EAAA;AAAA,KACf;AAAA,IACA,QAAU,EAAA;AAAA,MACR,GAAG,sBAAA;AAAA,MACH,WAAa,EAAA;AAAA;AACf,GACF;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,oBAAA;AAAA,IAAA;AAAA,MACC,oBAAoB,EAAA,IAAA;AAAA,MACpB,KAAO,EAAA,YAAA;AAAA,MACP,cAAc,CAAC,UAAA,CAAW,UAAY,EAAA,UAAA,CAAW,OAAO,KAAK,CAAA;AAAA,MAE5D;AAAA;AAAA,GACH;AAEJ;AAEa,MAAA,UAAA,GAAa,CACxB,WACoB,KAAA;;;;"}

package/dist/js/components/src/integrations/react-hook-form/components/Form/Form.mjs

@@ -6,6 +6,9 @@ import { FormContextProvider } from '../context/formContext.mjs';
 import { useId, useRef, useMemo } from 'react';
 import { FormProvider } from 'react-hook-form';
 import { AfterFormSubmitEffect } from '../AfterFormSubmitEffect/AfterFormSubmitEffect.mjs';
+import '../../../../lib/propsContext/propsContext.mjs';
+import '../../../../lib/viewComponentContext/viewComponentContext.mjs';
+import { PropsContextProvider } from '../../../../lib/propsContext/PropsContextProvider.mjs';
 
 const DefaultFormComponent = (p) => /* @__PURE__ */ jsx("form", { ...p });
 function Form(props) {
@@ -14,6 +17,7 @@ function Form(props) {
     children,
     onSubmit,
     formComponent: FormView = DefaultFormComponent,
+    isReadOnly,
     ...formProps
   } = props;
   const formId = useId();
@@ -36,23 +40,52 @@ function Form(props) {
       return result;
     })(formEvent);
   };
-  return /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsxs(FormContextProvider, { value: { form, id: formId }, children: [
-    /* @__PURE__ */ jsx(SubmitButtonStateProvider, { isAsyncSubmit, children: /* @__PURE__ */ jsx(
-      FormViewComponent,
-      {
-        ...formProps,
-        id: formId,
-        onSubmit: handleOnSubmit,
-        children
-      }
-    ) }),
-    /* @__PURE__ */ jsx(
-      AfterFormSubmitEffect,
-      {
-        submitHandlerResultRef
-      }
-    )
-  ] }) });
+  const propsContext = {
+    SearchField: { isReadOnly: true },
+    TextField: { isReadOnly: true },
+    TextArea: { isReadOnly: true },
+    MarkdownEditor: { isReadOnly: true },
+    Checkbox: { isReadOnly: true },
+    CheckboxGroup: { isReadOnly: true },
+    CheckboxButton: { isReadOnly: true },
+    FileField: { isReadOnly: true },
+    FileDropZone: { isReadOnly: true },
+    NumberField: { isReadOnly: true },
+    RadioGroup: { isReadOnly: true },
+    Switch: { isReadOnly: true },
+    Slider: { isReadOnly: true },
+    PasswordCreationField: { isReadOnly: true },
+    DatePicker: { isReadOnly: true },
+    DateRangePicker: { isReadOnly: true },
+    TimeField: { isReadOnly: true },
+    SegmentedControl: { isReadOnly: true },
+    Select: { isReadOnly: true },
+    ComboBox: { isReadOnly: true }
+  };
+  return /* @__PURE__ */ jsx(
+    PropsContextProvider,
+    {
+      props: isReadOnly ? propsContext : {},
+      mergeInParentContext: true,
+      children: /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsxs(FormContextProvider, { value: { form, id: formId }, children: [
+        /* @__PURE__ */ jsx(SubmitButtonStateProvider, { isAsyncSubmit, children: /* @__PURE__ */ jsx(
+          FormViewComponent,
+          {
+            ...formProps,
+            id: formId,
+            onSubmit: handleOnSubmit,
+            children
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          AfterFormSubmitEffect,
+          {
+            submitHandlerResultRef
+          }
+        )
+      ] }) })
+    }
+  );
 }
 
 export { Form, Form as default };

package/dist/js/components/src/integrations/react-hook-form/components/Form/Form.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Form.mjs","sources":["../../../../../../../../src/integrations/react-hook-form/components/Form/Form.tsx"],"sourcesContent":["import { SubmitButtonStateProvider } from \"@/integrations/react-hook-form/components/ActionGroupWrapper/SubmitButtonStateProvider\";\nimport { FormContextProvider } from \"@/integrations/react-hook-form/components/context/formContext\";\nimport {\n  type ComponentProps,\n  type ComponentType,\n  type FormEvent,\n  type FormEventHandler,\n  type PropsWithChildren,\n  useMemo,\n} from \"react\";\nimport { useId, useRef } from \"react\";\nimport type { FieldValues, UseFormReturn } from \"react-hook-form\";\nimport { FormProvider as RhfFormContextProvider } from \"react-hook-form\";\nimport { AfterFormSubmitEffect } from \"../AfterFormSubmitEffect/AfterFormSubmitEffect\";\n\nexport type FormOnSubmitHandler<F extends FieldValues> = Parameters<\n  UseFormReturn<F>[\"handleSubmit\"]\n>[0];\n\ntype FormComponentType = ComponentType<\n  PropsWithChildren<{\n    id: string;\n    onSubmit?: FormEventHandler | FormOnSubmitHandler<never>;\n  }>\n>;\n\nexport interface FormProps<F extends FieldValues>\n  extends Omit<ComponentProps<\"form\">, \"onSubmit\">,\n    PropsWithChildren {\n  form: UseFormReturn<F>;\n  onSubmit: FormOnSubmitHandler<F>;\n  formComponent?: FormComponentType;\n}\n\nconst DefaultFormComponent: FormComponentType = (p) => <form {...p} />;\n\nexport function Form<F extends FieldValues>(props: FormProps<F>) {\n  const {\n    form,\n    children,\n    onSubmit,\n    formComponent: FormView = DefaultFormComponent,\n    ...formProps\n  } = props;\n\n  const formId = useId();\n  const isAsyncSubmit = useRef(false);\n  const submitHandlerResultRef = useRef<unknown>(null);\n  const FormViewComponent = useMemo(() => FormView, [formId]);\n\n  const handleOnSubmit = (e?: FormEvent<HTMLFormElement> | F) => {\n    const { isSubmitting, isValidating } = form.control._formState;\n    const formEvent =\n      e && \"nativeEvent\" in e ? (e as FormEvent<HTMLFormElement>) : undefined;\n\n    formEvent?.stopPropagation();\n\n    if (isSubmitting || isValidating) {\n      formEvent?.preventDefault();\n      return;\n    }\n\n    submitHandlerResultRef.current = undefined;\n\n    form.handleSubmit((values) => {\n      const result = onSubmit(values, formEvent);\n      isAsyncSubmit.current = result instanceof Promise;\n      submitHandlerResultRef.current = result;\n      return result;\n    })(formEvent);\n  };\n\n  return (\n    <RhfFormContextProvider {...form}>\n      <FormContextProvider value={{ form, id: formId }}>\n        <SubmitButtonStateProvider isAsyncSubmit={isAsyncSubmit}>\n          <FormViewComponent\n            {...formProps}\n            id={formId}\n            onSubmit={handleOnSubmit}\n          >\n            {children}\n          </FormViewComponent>\n        </SubmitButtonStateProvider>\n        <AfterFormSubmitEffect\n          submitHandlerResultRef={submitHandlerResultRef}\n        />\n      </FormContextProvider>\n    </RhfFormContextProvider>\n  );\n}\n\nexport default Form;\n"],"names":["RhfFormContextProvider"],"mappings":";;;;;;;AAkCA,MAAM,uBAA0C,CAAC,CAAA,qBAAO,GAAA,CAAA,MAAA,EAAA,EAAM,GAAG,CAAG,EAAA,CAAA;AAE7D,SAAS,KAA4B,KAAqB,EAAA;AAC/D,EAAM,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,eAAe,QAAW,GAAA,oBAAA;AAAA,IAC1B,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,SAAS,KAAM,EAAA;AACrB,EAAM,MAAA,aAAA,GAAgB,OAAO,KAAK,CAAA;AAClC,EAAM,MAAA,sBAAA,GAAyB,OAAgB,IAAI,CAAA;AACnD,EAAA,MAAM,oBAAoB,OAAQ,CAAA,MAAM,QAAU,EAAA,CAAC,MAAM,CAAC,CAAA;AAE1D,EAAM,MAAA,cAAA,GAAiB,CAAC,CAAuC,KAAA;AAC7D,IAAA,MAAM,EAAE,YAAA,EAAc,YAAa,EAAA,GAAI,KAAK,OAAQ,CAAA,UAAA;AACpD,IAAA,MAAM,SACJ,GAAA,CAAA,IAAK,aAAiB,IAAA,CAAA,GAAK,CAAmC,GAAA,MAAA;AAEhE,IAAA,SAAA,EAAW,eAAgB,EAAA;AAE3B,IAAA,IAAI,gBAAgB,YAAc,EAAA;AAChC,MAAA,SAAA,EAAW,cAAe,EAAA;AAC1B,MAAA;AAAA;AAGF,IAAA,sBAAA,CAAuB,OAAU,GAAA,MAAA;AAEjC,IAAK,IAAA,CAAA,YAAA,CAAa,CAAC,MAAW,KAAA;AAC5B,MAAM,MAAA,MAAA,GAAS,QAAS,CAAA,MAAA,EAAQ,SAAS,CAAA;AACzC,MAAA,aAAA,CAAc,UAAU,MAAkB,YAAA,OAAA;AAC1C,MAAA,sBAAA,CAAuB,OAAU,GAAA,MAAA;AACjC,MAAO,OAAA,MAAA;AAAA,KACR,EAAE,SAAS,CAAA;AAAA,GACd;AAEA,EACE,uBAAA,GAAA,CAACA,YAAwB,EAAA,EAAA,GAAG,IAC1B,EAAA,QAAA,kBAAA,IAAA,CAAC,mBAAoB,EAAA,EAAA,KAAA,EAAO,EAAE,IAAA,EAAM,EAAI,EAAA,MAAA,EACtC,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,6BAA0B,aACzB,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACE,GAAG,SAAA;AAAA,QACJ,EAAI,EAAA,MAAA;AAAA,QACJ,QAAU,EAAA,cAAA;AAAA,QAET;AAAA;AAAA,KAEL,EAAA,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,qBAAA;AAAA,MAAA;AAAA,QACC;AAAA;AAAA;AACF,GAAA,EACF,CACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Form.mjs","sources":["../../../../../../../../src/integrations/react-hook-form/components/Form/Form.tsx"],"sourcesContent":["import { SubmitButtonStateProvider } from \"@/integrations/react-hook-form/components/ActionGroupWrapper/SubmitButtonStateProvider\";\nimport { FormContextProvider } from \"@/integrations/react-hook-form/components/context/formContext\";\nimport {\n  type ComponentProps,\n  type ComponentType,\n  type FormEvent,\n  type FormEventHandler,\n  type PropsWithChildren,\n  useId,\n  useMemo,\n  useRef,\n} from \"react\";\nimport type { FieldValues, UseFormReturn } from \"react-hook-form\";\nimport { FormProvider as RhfFormContextProvider } from \"react-hook-form\";\nimport { AfterFormSubmitEffect } from \"../AfterFormSubmitEffect/AfterFormSubmitEffect\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\nexport type FormOnSubmitHandler<F extends FieldValues> = Parameters<\n  UseFormReturn<F>[\"handleSubmit\"]\n>[0];\n\ntype FormComponentType = ComponentType<\n  PropsWithChildren<{\n    id: string;\n    onSubmit?: FormEventHandler | FormOnSubmitHandler<never>;\n  }>\n>;\n\nexport interface FormProps<F extends FieldValues>\n  extends Omit<ComponentProps<\"form\">, \"onSubmit\">,\n    PropsWithChildren {\n  form: UseFormReturn<F>;\n  onSubmit: FormOnSubmitHandler<F>;\n  formComponent?: FormComponentType;\n  isReadOnly?: boolean;\n}\n\nconst DefaultFormComponent: FormComponentType = (p) => <form {...p} />;\n\nexport function Form<F extends FieldValues>(props: FormProps<F>) {\n  const {\n    form,\n    children,\n    onSubmit,\n    formComponent: FormView = DefaultFormComponent,\n    isReadOnly,\n    ...formProps\n  } = props;\n\n  const formId = useId();\n  const isAsyncSubmit = useRef(false);\n  const submitHandlerResultRef = useRef<unknown>(null);\n  const FormViewComponent = useMemo(() => FormView, [formId]);\n\n  const handleOnSubmit = (e?: FormEvent<HTMLFormElement> | F) => {\n    const { isSubmitting, isValidating } = form.control._formState;\n    const formEvent =\n      e && \"nativeEvent\" in e ? (e as FormEvent<HTMLFormElement>) : undefined;\n\n    formEvent?.stopPropagation();\n\n    if (isSubmitting || isValidating) {\n      formEvent?.preventDefault();\n      return;\n    }\n\n    submitHandlerResultRef.current = undefined;\n\n    form.handleSubmit((values) => {\n      const result = onSubmit(values, formEvent);\n      isAsyncSubmit.current = result instanceof Promise;\n      submitHandlerResultRef.current = result;\n      return result;\n    })(formEvent);\n  };\n\n  const propsContext: PropsContext = {\n    SearchField: { isReadOnly: true },\n    TextField: { isReadOnly: true },\n    TextArea: { isReadOnly: true },\n    MarkdownEditor: { isReadOnly: true },\n    Checkbox: { isReadOnly: true },\n    CheckboxGroup: { isReadOnly: true },\n    CheckboxButton: { isReadOnly: true },\n    FileField: { isReadOnly: true },\n    FileDropZone: { isReadOnly: true },\n    NumberField: { isReadOnly: true },\n    RadioGroup: { isReadOnly: true },\n    Switch: { isReadOnly: true },\n    Slider: { isReadOnly: true },\n    PasswordCreationField: { isReadOnly: true },\n    DatePicker: { isReadOnly: true },\n    DateRangePicker: { isReadOnly: true },\n    TimeField: { isReadOnly: true },\n    SegmentedControl: { isReadOnly: true },\n    Select: { isReadOnly: true },\n    ComboBox: { isReadOnly: true },\n  };\n\n  return (\n    <PropsContextProvider\n      props={isReadOnly ? propsContext : {}}\n      mergeInParentContext\n    >\n      <RhfFormContextProvider {...form}>\n        <FormContextProvider value={{ form, id: formId }}>\n          <SubmitButtonStateProvider isAsyncSubmit={isAsyncSubmit}>\n            <FormViewComponent\n              {...formProps}\n              id={formId}\n              onSubmit={handleOnSubmit}\n            >\n              {children}\n            </FormViewComponent>\n          </SubmitButtonStateProvider>\n          <AfterFormSubmitEffect\n            submitHandlerResultRef={submitHandlerResultRef}\n          />\n        </FormContextProvider>\n      </RhfFormContextProvider>\n    </PropsContextProvider>\n  );\n}\n\nexport default Form;\n"],"names":["RhfFormContextProvider"],"mappings":"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"}

package/dist/types/components/Button/Button.d.ts

@@ -18,6 +18,8 @@ export interface ButtonProps extends PropsWithChildren<Aria.ButtonProps>, FlowCo
     isSucceeded?: boolean;
     /** Whether the button is in a failed state. */
     isFailed?: boolean;
+    /** Whether the button is in a read only state. */
+    isReadOnly?: boolean;
 }
 /**
  * @flr-generate all

package/dist/types/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAO9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAM/E,MAAM,WAAW,WACf,SAAQ,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,EACzC,kBAAkB,CAAC,iBAAiB,CAAC;IACvC,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACzE,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IACjD,2CAA2C;IAC3C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;CAKpB;AAsBD;;;GAGG;AACH,eAAO,MAAM,MAAM,+EA2GjB,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAO9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAM/E,MAAM,WAAW,WACf,SAAQ,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,EACzC,kBAAkB,CAAC,iBAAiB,CAAC;IACvC,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACzE,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IACjD,2CAA2C;IAC3C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;CAKtB;AAuBD;;;GAGG;AACH,eAAO,MAAM,MAAM,+EA6GjB,CAAC;AAEH,eAAe,MAAM,CAAC"}