@mittwald/flow-react-components 0.2.0-alpha.567 → 0.2.0-alpha.569

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

@@ -9,42 +9,48 @@ import { PropsContextProvider } from '../../lib/propsContext/components/PropsCon
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
 import ContextMenuSectionView from '../../views/ContextMenuSectionView.mjs';
 
-const Section = flowComponent("Section", (props) => {
-  const {
-    children,
-    className,
-    ref,
-    renderContextMenuSection,
-    hideSeparator,
-    ...rest
-  } = props;
-  if (!children) {
-    return null;
-  }
-  if (renderContextMenuSection) {
-    return /* @__PURE__ */ jsx(ContextMenuSectionView, { ref, children });
-  }
-  const rootClassName = clsx(
-    styles.section,
-    className,
-    hideSeparator && styles.hideSeparator
-  );
-  const headingId = useId();
-  const propsContext = {
-    Heading: {
-      level: 2,
-      id: headingId,
-      className: styles.heading
-    },
-    Header: {
-      renderSectionHeader: true
-    },
-    List: {
-      "aria-labelledby": headingId
+const Section = flowComponent(
+  "Section",
+  (props) => {
+    const {
+      children,
+      className,
+      ref,
+      renderContextMenuSection,
+      hideSeparator,
+      ...rest
+    } = props;
+    if (!children) {
+      return null;
     }
-  };
-  return /* @__PURE__ */ jsx("section", { ...rest, className: rootClassName, ref, children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children }) });
-});
+    if (renderContextMenuSection) {
+      return /* @__PURE__ */ jsx(ContextMenuSectionView, { ref, children });
+    }
+    const rootClassName = clsx(
+      styles.section,
+      className,
+      hideSeparator && styles.hideSeparator
+    );
+    const headingId = useId();
+    const propsContext = {
+      Heading: {
+        level: 2,
+        id: headingId,
+        className: styles.heading
+      },
+      Header: {
+        renderSectionHeader: true
+      },
+      List: {
+        "aria-labelledby": headingId
+      }
+    };
+    return /* @__PURE__ */ jsx("section", { ...rest, className: rootClassName, ref, children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children }) });
+  },
+  {
+    type: "layout"
+  }
+);
 
 export { Section, Section as default };
 //# sourceMappingURL=Section.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Section.mjs","sources":["../../../../../../src/components/Section/Section.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport { useId } from \"react\";\nimport styles from \"./Section.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport ContextMenuSectionView from \"@/views/ContextMenuSectionView\";\n\nexport interface SectionProps\n  extends PropsWithChildren<ComponentProps<\"section\">>,\n    FlowComponentProps<HTMLElement> {\n  /** @internal */\n  renderContextMenuSection?: boolean;\n  /** @internal */\n  hideSeparator?: boolean;\n}\n\n/** @flr-generate all */\nexport const Section = flowComponent(\"Section\", (props) => {\n  const {\n    children,\n    className,\n    ref,\n    renderContextMenuSection,\n    hideSeparator,\n    ...rest\n  } = props;\n\n  if (!children) {\n    return null;\n  }\n\n  if (renderContextMenuSection) {\n    return (\n      <ContextMenuSectionView ref={ref as never}>\n        {children}\n      </ContextMenuSectionView>\n    );\n  }\n\n  const rootClassName = clsx(\n    styles.section,\n    className,\n    hideSeparator && styles.hideSeparator,\n  );\n\n  const headingId = useId();\n\n  const propsContext: PropsContext = {\n    Heading: {\n      level: 2,\n      id: headingId,\n      className: styles.heading,\n    },\n    Header: {\n      renderSectionHeader: true,\n    },\n    List: {\n      \"aria-labelledby\": headingId,\n    },\n  };\n\n  return (\n    <section {...rest} className={rootClassName} ref={ref}>\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n    </section>\n  );\n});\n\nexport default Section;\n"],"names":[],"mappings":";;;;;;;;;AAoBO,MAAM,OAAA,GAAU,aAAA,CAAc,SAAA,EAAW,CAAC,KAAA,KAAU;AACzD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAA;AAAA,IACA,wBAAA;AAAA,IACA,aAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,IAAI,CAAC,QAAA,EAAU;AACb,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,IAAI,wBAAA,EAA0B;AAC5B,IAAA,uBACE,GAAA,CAAC,sBAAA,EAAA,EAAuB,GAAA,EACrB,QAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,OAAA;AAAA,IACP,SAAA;AAAA,IACA,iBAAiB,MAAA,CAAO;AAAA,GAC1B;AAEA,EAAA,MAAM,YAAY,KAAA,EAAM;AAExB,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,OAAA,EAAS;AAAA,MACP,KAAA,EAAO,CAAA;AAAA,MACP,EAAA,EAAI,SAAA;AAAA,MACJ,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,mBAAA,EAAqB;AAAA,KACvB;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,iBAAA,EAAmB;AAAA;AACrB,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,SAAA,EAAA,EAAS,GAAG,IAAA,EAAM,SAAA,EAAW,aAAA,EAAe,GAAA,EAC3C,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Section.mjs","sources":["../../../../../../src/components/Section/Section.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport { useId } from \"react\";\nimport styles from \"./Section.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport ContextMenuSectionView from \"@/views/ContextMenuSectionView\";\n\nexport interface SectionProps\n  extends PropsWithChildren<ComponentProps<\"section\">>,\n    FlowComponentProps<HTMLElement> {\n  /** @internal */\n  renderContextMenuSection?: boolean;\n  /** @internal */\n  hideSeparator?: boolean;\n}\n\n/** @flr-generate all */\nexport const Section = flowComponent(\n  \"Section\",\n  (props) => {\n    const {\n      children,\n      className,\n      ref,\n      renderContextMenuSection,\n      hideSeparator,\n      ...rest\n    } = props;\n\n    if (!children) {\n      return null;\n    }\n\n    if (renderContextMenuSection) {\n      return (\n        <ContextMenuSectionView ref={ref as never}>\n          {children}\n        </ContextMenuSectionView>\n      );\n    }\n\n    const rootClassName = clsx(\n      styles.section,\n      className,\n      hideSeparator && styles.hideSeparator,\n    );\n\n    const headingId = useId();\n\n    const propsContext: PropsContext = {\n      Heading: {\n        level: 2,\n        id: headingId,\n        className: styles.heading,\n      },\n      Header: {\n        renderSectionHeader: true,\n      },\n      List: {\n        \"aria-labelledby\": headingId,\n      },\n    };\n\n    return (\n      <section {...rest} className={rootClassName} ref={ref}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </section>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Section;\n"],"names":[],"mappings":";;;;;;;;;AAoBO,MAAM,OAAA,GAAU,aAAA;AAAA,EACrB,SAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAA;AAAA,MACA,wBAAA;AAAA,MACA,aAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,IAAI,CAAC,QAAA,EAAU;AACb,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,IAAI,wBAAA,EAA0B;AAC5B,MAAA,uBACE,GAAA,CAAC,sBAAA,EAAA,EAAuB,GAAA,EACrB,QAAA,EACH,CAAA;AAAA,IAEJ;AAEA,IAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,MACpB,MAAA,CAAO,OAAA;AAAA,MACP,SAAA;AAAA,MACA,iBAAiB,MAAA,CAAO;AAAA,KAC1B;AAEA,IAAA,MAAM,YAAY,KAAA,EAAM;AAExB,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,OAAA,EAAS;AAAA,QACP,KAAA,EAAO,CAAA;AAAA,QACP,EAAA,EAAI,SAAA;AAAA,QACJ,WAAW,MAAA,CAAO;AAAA,OACpB;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,mBAAA,EAAqB;AAAA,OACvB;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,iBAAA,EAAmB;AAAA;AACrB,KACF;AAEA,IAAA,uBACE,GAAA,CAAC,SAAA,EAAA,EAAS,GAAG,IAAA,EAAM,SAAA,EAAW,aAAA,EAAe,GAAA,EAC3C,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH,CAAA,EACF,CAAA;AAAA,EAEJ,CAAA;AAAA,EACA;AAAA,IACE,IAAA,EAAM;AAAA;AAEV;;;;"}

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

@@ -42,14 +42,14 @@ const SegmentedControl = flowComponent("SegmentedControl", (props) => {
     },
     ...fieldPropsContext
   };
-  const localRadioRef = useObjectRef(ref);
-  useMakeFocusable(localRadioRef);
+  const objectRef = useObjectRef(ref);
+  useMakeFocusable(objectRef);
   return /* @__PURE__ */ jsx(
     Aria.RadioGroup,
     {
       ...rest,
       className: clsx(rootClassName, fieldProps.className),
-      ref: localRadioRef,
+      ref: objectRef,
       children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
         /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, { dependencies: ["segment"], props: propsContext, children: [
           /* @__PURE__ */ jsx("div", { className: styles.segmentedControl, children: /* @__PURE__ */ jsx("div", { className: styles.segments, children: /* @__PURE__ */ jsx(TunnelExit, { id: "segments" }) }) }),

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.mjs","sources":["../../../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithContainerBreakpointSize } from \"@/lib/types/props\";\nimport React, { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./SegmentedControl.module.scss\";\nimport { getContainerBreakpointSizeClassName } from \"@/lib/getContainerBreakpointSizeClassName\";\nimport { type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport clsx from \"clsx\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface SegmentedControlProps\n  extends PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\">>,\n    FlowComponentProps,\n    PropsWithContainerBreakpointSize {}\n\n/** @flr-generate all */\nexport const SegmentedControl = flowComponent(\"SegmentedControl\", (props) => {\n  const {\n    children,\n    className,\n    containerBreakpointSize = \"m\",\n    ref,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props);\n\n  const rootClassName = clsx(\n    formFieldStyles.formField,\n    styles.segmentedControlContainer,\n    className,\n    styles[getContainerBreakpointSizeClassName(containerBreakpointSize)],\n  );\n\n  const propsContext: PropsContext = {\n    Segment: {\n      tunnelId: \"segments\",\n      className: styles.segment,\n    },\n    ...fieldPropsContext,\n  };\n\n  const localRadioRef = useObjectRef(ref);\n  useMakeFocusable(localRadioRef);\n\n  return (\n    <Aria.RadioGroup\n      {...rest}\n      className={clsx(rootClassName, fieldProps.className)}\n      ref={localRadioRef}\n    >\n      <TunnelProvider>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider dependencies={[\"segment\"]} props={propsContext}>\n            <div className={styles.segmentedControl}>\n              <div className={styles.segments}>\n                <TunnelExit id=\"segments\" />\n              </div>\n            </div>\n            {children}\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </TunnelProvider>\n    </Aria.RadioGroup>\n  );\n});\n\nexport default SegmentedControl;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwBO,MAAM,gBAAA,GAAmB,aAAA,CAAc,kBAAA,EAAoB,CAAC,KAAA,KAAU;AAC3E,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,uBAAA,GAA0B,GAAA;AAAA,IAC1B,GAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,eAAA,CAAgB,SAAA;AAAA,IAChB,MAAA,CAAO,yBAAA;AAAA,IACP,SAAA;AAAA,IACA,MAAA,CAAO,mCAAA,CAAoC,uBAAuB,CAAC;AAAA,GACrE;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,OAAA,EAAS;AAAA,MACP,QAAA,EAAU,UAAA;AAAA,MACV,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,aAAA,GAAgB,aAAa,GAAG,CAAA;AACtC,EAAA,gBAAA,CAAiB,aAAa,CAAA;AAE9B,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA,CAAK,UAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,aAAA,EAAe,UAAA,CAAW,SAAS,CAAA;AAAA,MACnD,GAAA,EAAK,aAAA;AAAA,MAEL,+BAAC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,+BAAC,oBAAA,EAAA,EAAqB,YAAA,EAAc,CAAC,SAAS,CAAA,EAAG,OAAO,YAAA,EACtD,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,gBAAA,EACrB,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,QAAA,EACrB,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,UAAA,EAAW,GAC5B,CAAA,EACF,CAAA;AAAA,UACC;AAAA,SAAA,EACH,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA,OAAA,EAClB;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"SegmentedControl.mjs","sources":["../../../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithContainerBreakpointSize } from \"@/lib/types/props\";\nimport { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./SegmentedControl.module.scss\";\nimport { getContainerBreakpointSizeClassName } from \"@/lib/getContainerBreakpointSizeClassName\";\nimport { type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport clsx from \"clsx\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface SegmentedControlProps\n  extends PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\" | \"ref\">>,\n    FlowComponentProps<HTMLDivElement>,\n    PropsWithContainerBreakpointSize {}\n\n/** @flr-generate all */\nexport const SegmentedControl = flowComponent(\"SegmentedControl\", (props) => {\n  const {\n    children,\n    className,\n    containerBreakpointSize = \"m\",\n    ref,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props);\n\n  const rootClassName = clsx(\n    formFieldStyles.formField,\n    styles.segmentedControlContainer,\n    className,\n    styles[getContainerBreakpointSizeClassName(containerBreakpointSize)],\n  );\n\n  const propsContext: PropsContext = {\n    Segment: {\n      tunnelId: \"segments\",\n      className: styles.segment,\n    },\n    ...fieldPropsContext,\n  };\n\n  const objectRef = useObjectRef(ref);\n  useMakeFocusable(objectRef);\n\n  return (\n    <Aria.RadioGroup\n      {...rest}\n      className={clsx(rootClassName, fieldProps.className)}\n      ref={objectRef}\n    >\n      <TunnelProvider>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider dependencies={[\"segment\"]} props={propsContext}>\n            <div className={styles.segmentedControl}>\n              <div className={styles.segments}>\n                <TunnelExit id=\"segments\" />\n              </div>\n            </div>\n            {children}\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </TunnelProvider>\n    </Aria.RadioGroup>\n  );\n});\n\nexport default SegmentedControl;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwBO,MAAM,gBAAA,GAAmB,aAAA,CAAc,kBAAA,EAAoB,CAAC,KAAA,KAAU;AAC3E,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,uBAAA,GAA0B,GAAA;AAAA,IAC1B,GAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,eAAA,CAAgB,SAAA;AAAA,IAChB,MAAA,CAAO,yBAAA;AAAA,IACP,SAAA;AAAA,IACA,MAAA,CAAO,mCAAA,CAAoC,uBAAuB,CAAC;AAAA,GACrE;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,OAAA,EAAS;AAAA,MACP,QAAA,EAAU,UAAA;AAAA,MACV,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,SAAA,GAAY,aAAa,GAAG,CAAA;AAClC,EAAA,gBAAA,CAAiB,SAAS,CAAA;AAE1B,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA,CAAK,UAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,aAAA,EAAe,UAAA,CAAW,SAAS,CAAA;AAAA,MACnD,GAAA,EAAK,SAAA;AAAA,MAEL,+BAAC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,+BAAC,oBAAA,EAAA,EAAqB,YAAA,EAAc,CAAC,SAAS,CAAA,EAAG,OAAO,YAAA,EACtD,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,gBAAA,EACrB,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,QAAA,EACrB,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,UAAA,EAAW,GAC5B,CAAA,EACF,CAAA;AAAA,UACC;AAAA,SAAA,EACH,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA,OAAA,EAClB;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

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

@@ -1,7 +1,7 @@
 "use client"
 /* */
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef } from 'react';
+import 'react';
 import * as Aria from 'react-aria-components';
 import '../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
@@ -17,8 +17,6 @@ import { Options } from '../Options/Options.mjs';
 import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
 import 'mobx';
 import { useOverlayController } from '../../lib/controller/overlay/useOverlayController.mjs';
-import { useObjectRef } from '@react-aria/utils';
-import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
 import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
 
 const Select = flowComponent("Select", (props) => {
@@ -27,9 +25,8 @@ const Select = flowComponent("Select", (props) => {
     className,
     onChange,
     onSelectionChange,
-    controller: controllerFromProps,
-    ref,
     isReadOnly,
+    ref,
     ...rest
   } = props;
   const {
@@ -49,16 +46,9 @@ const Select = flowComponent("Select", (props) => {
     },
     ...fieldPropsContext
   };
-  const controllerFromContext = useOverlayController("Select", {
-    reuseControllerFromContext: true
-  });
-  const localSelectRef = useObjectRef(ref);
-  const localButtonRef = useRef(null);
-  useMakeFocusable(localSelectRef, () => {
-    localButtonRef.current?.focus();
-    controller.setOpen(true);
+  const controller = useOverlayController("Select", {
+    reuseControllerFromContext: false
   });
-  const controller = controllerFromProps ?? controllerFromContext;
   const isOpen = controller.useIsOpen();
   return /* @__PURE__ */ jsx(
     Aria.Select,
@@ -66,7 +56,6 @@ const Select = flowComponent("Select", (props) => {
       ...rest,
       ...fieldProps,
       className: clsx(rootClassName, fieldProps.className),
-      ref: localSelectRef,
       onChange: (value) => {
         if (!isReadOnly) {
           onChange?.(value);
@@ -81,9 +70,9 @@ const Select = flowComponent("Select", (props) => {
           /* @__PURE__ */ jsxs(
             Aria.Button,
             {
-              ref: localButtonRef,
               "data-readonly": isReadOnly,
               className: styles.toggle,
+              ref,
               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, useRef } 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 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\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface SelectProps\n  extends PropsWithChildren<Omit<Aria.SelectProps, \"children\" | \"className\">>,\n    FlowComponentProps,\n    PropsWithClassName {\n  /** Handler that is called when the selected value changes. */\n  onChange?: (value: Key | null) => 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/** @flr-generate all */\nexport const Select = flowComponent(\"Select\", (props) => {\n  const {\n    children,\n    className,\n    onChange,\n    onSelectionChange,\n    controller: controllerFromProps,\n    ref,\n    isReadOnly,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props);\n\n  const rootClassName = clsx(\n    styles.select,\n    formFieldStyles.formField,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Option: {\n      tunnelId: \"options\",\n    },\n    ...fieldPropsContext,\n  };\n\n  const controllerFromContext = useOverlayController(\"Select\", {\n    reuseControllerFromContext: true,\n  });\n\n  const localSelectRef = useObjectRef(ref);\n  const localButtonRef = useRef<HTMLButtonElement>(null);\n\n  useMakeFocusable(localSelectRef, () => {\n    localButtonRef.current?.focus();\n    controller.setOpen(true);\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n  const isOpen = controller.useIsOpen();\n\n  return (\n    <Aria.Select\n      {...rest}\n      {...fieldProps}\n      className={clsx(rootClassName, fieldProps.className)}\n      ref={localSelectRef}\n      onChange={(value) => {\n        if (!isReadOnly) {\n          onChange?.(value);\n          onSelectionChange?.(value);\n        }\n      }}\n      onOpenChange={(isOpen) => !isReadOnly && controller.setOpen(isOpen)}\n      isOpen={isOpen}\n      data-readonly={isReadOnly}\n    >\n      <TunnelProvider>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider props={propsContext}>\n            <Aria.Button\n              ref={localButtonRef}\n              data-readonly={isReadOnly}\n              className={styles.toggle}\n            >\n              <Aria.SelectValue />\n              <IconChevronDown />\n            </Aria.Button>\n            {children}\n            <Options controller={controller}>\n              <TunnelExit id=\"options\" />\n            </Options>\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </TunnelProvider>\n    </Aria.Select>\n  );\n});\n\nexport default Select;\n"],"names":["isOpen"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAgCO,MAAM,MAAA,GAAS,aAAA,CAAc,QAAA,EAAU,CAAC,KAAA,KAAU;AACvD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA,EAAY,mBAAA;AAAA,IACZ,GAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,MAAA;AAAA,IACP,eAAA,CAAgB,SAAA;AAAA,IAChB;AAAA,GACF;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,MAAA,EAAQ;AAAA,MACN,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,qBAAA,GAAwB,qBAAqB,QAAA,EAAU;AAAA,IAC3D,0BAAA,EAA4B;AAAA,GAC7B,CAAA;AAED,EAAA,MAAM,cAAA,GAAiB,aAAa,GAAG,CAAA;AACvC,EAAA,MAAM,cAAA,GAAiB,OAA0B,IAAI,CAAA;AAErD,EAAA,gBAAA,CAAiB,gBAAgB,MAAM;AACrC,IAAA,cAAA,CAAe,SAAS,KAAA,EAAM;AAC9B,IAAA,UAAA,CAAW,QAAQ,IAAI,CAAA;AAAA,EACzB,CAAC,CAAA;AAED,EAAA,MAAM,aAAa,mBAAA,IAAuB,qBAAA;AAC1C,EAAA,MAAM,MAAA,GAAS,WAAW,SAAA,EAAU;AAEpC,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA,CAAK,MAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,aAAA,EAAe,UAAA,CAAW,SAAS,CAAA;AAAA,MACnD,GAAA,EAAK,cAAA;AAAA,MACL,QAAA,EAAU,CAAC,KAAA,KAAU;AACnB,QAAA,IAAI,CAAC,UAAA,EAAY;AACf,UAAA,QAAA,GAAW,KAAK,CAAA;AAChB,UAAA,iBAAA,GAAoB,KAAK,CAAA;AAAA,QAC3B;AAAA,MACF,CAAA;AAAA,MACA,cAAc,CAACA,OAAAA,KAAW,CAAC,UAAA,IAAc,UAAA,CAAW,QAAQA,OAAM,CAAA;AAAA,MAClE,MAAA;AAAA,MACA,eAAA,EAAe,UAAA;AAAA,MAEf,+BAAC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,IAAA,CAAK,MAAA;AAAA,YAAL;AAAA,cACC,GAAA,EAAK,cAAA;AAAA,cACL,eAAA,EAAe,UAAA;AAAA,cACf,WAAW,MAAA,CAAO,MAAA;AAAA,cAElB,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,IAAA,CAAK,aAAL,EAAiB,CAAA;AAAA,oCACjB,eAAA,EAAA,EAAgB;AAAA;AAAA;AAAA,WACnB;AAAA,UACC,QAAA;AAAA,8BACA,OAAA,EAAA,EAAQ,UAAA,EACP,8BAAC,UAAA,EAAA,EAAW,EAAA,EAAG,WAAU,CAAA,EAC3B;AAAA,SAAA,EACF,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA,OAAA,EAClB;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 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 { useOverlayController } from \"@/lib/controller\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface SelectProps\n  extends PropsWithChildren<\n      Omit<Aria.SelectProps, \"children\" | \"className\" | \"ref\">\n    >,\n    FlowComponentProps<HTMLButtonElement>,\n    PropsWithClassName {\n  /** Handler that is called when the selected value changes. */\n  onChange?: (value: Key | null) => void;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Select = flowComponent(\"Select\", (props) => {\n  const {\n    children,\n    className,\n    onChange,\n    onSelectionChange,\n    isReadOnly,\n    ref,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props);\n\n  const rootClassName = clsx(\n    styles.select,\n    formFieldStyles.formField,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Option: {\n      tunnelId: \"options\",\n    },\n    ...fieldPropsContext,\n  };\n\n  const controller = useOverlayController(\"Select\", {\n    reuseControllerFromContext: false,\n  });\n  const isOpen = controller.useIsOpen();\n\n  return (\n    <Aria.Select\n      {...rest}\n      {...fieldProps}\n      className={clsx(rootClassName, fieldProps.className)}\n      onChange={(value) => {\n        if (!isReadOnly) {\n          onChange?.(value);\n          onSelectionChange?.(value);\n        }\n      }}\n      onOpenChange={(isOpen) => !isReadOnly && controller.setOpen(isOpen)}\n      isOpen={isOpen}\n      data-readonly={isReadOnly}\n    >\n      <TunnelProvider>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider props={propsContext}>\n            <Aria.Button\n              data-readonly={isReadOnly}\n              className={styles.toggle}\n              ref={ref}\n            >\n              <Aria.SelectValue />\n              <IconChevronDown />\n            </Aria.Button>\n            {children}\n            <Options controller={controller}>\n              <TunnelExit id=\"options\" />\n            </Options>\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </TunnelProvider>\n    </Aria.Select>\n  );\n});\n\nexport default Select;\n"],"names":["isOpen"],"mappings":";;;;;;;;;;;;;;;;;;;AA8BO,MAAM,MAAA,GAAS,aAAA,CAAc,QAAA,EAAU,CAAC,KAAA,KAAU;AACvD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,MAAA;AAAA,IACP,eAAA,CAAgB,SAAA;AAAA,IAChB;AAAA,GACF;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,MAAA,EAAQ;AAAA,MACN,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,UAAA,GAAa,qBAAqB,QAAA,EAAU;AAAA,IAChD,0BAAA,EAA4B;AAAA,GAC7B,CAAA;AACD,EAAA,MAAM,MAAA,GAAS,WAAW,SAAA,EAAU;AAEpC,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA,CAAK,MAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,aAAA,EAAe,UAAA,CAAW,SAAS,CAAA;AAAA,MACnD,QAAA,EAAU,CAAC,KAAA,KAAU;AACnB,QAAA,IAAI,CAAC,UAAA,EAAY;AACf,UAAA,QAAA,GAAW,KAAK,CAAA;AAChB,UAAA,iBAAA,GAAoB,KAAK,CAAA;AAAA,QAC3B;AAAA,MACF,CAAA;AAAA,MACA,cAAc,CAACA,OAAAA,KAAW,CAAC,UAAA,IAAc,UAAA,CAAW,QAAQA,OAAM,CAAA;AAAA,MAClE,MAAA;AAAA,MACA,eAAA,EAAe,UAAA;AAAA,MAEf,+BAAC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,IAAA,CAAK,MAAA;AAAA,YAAL;AAAA,cACC,eAAA,EAAe,UAAA;AAAA,cACf,WAAW,MAAA,CAAO,MAAA;AAAA,cAClB,GAAA;AAAA,cAEA,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,IAAA,CAAK,aAAL,EAAiB,CAAA;AAAA,oCACjB,eAAA,EAAA,EAAgB;AAAA;AAAA;AAAA,WACnB;AAAA,UACC,QAAA;AAAA,8BACA,OAAA,EAAA,EAAQ,UAAA,EACP,8BAAC,UAAA,EAAA,EAAW,EAAA,EAAG,WAAU,CAAA,EAC3B;AAAA,SAAA,EACF,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA,OAAA,EAClB;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

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

@@ -18,7 +18,6 @@ import locales from '../../../../_virtual/_.locale.json@3ed2dc50f997451bdd85a713
 import { useLocalizedStringFormatter } from 'react-aria';
 import { TunnelExit } from '@mittwald/react-tunnel';
 import { useObjectRef } from '@react-aria/utils';
-import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
 import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
 
 const Slider = flowComponent("Slider", (props) => {
@@ -31,7 +30,6 @@ const Slider = flowComponent("Slider", (props) => {
     showInitialMarker,
     isReadOnly,
     ref,
-    inputRef,
     ...rest
   } = props;
   const rootClassName = clsx(
@@ -41,11 +39,7 @@ const Slider = flowComponent("Slider", (props) => {
   );
   const { FieldErrorView, fieldPropsContext, fieldProps } = useFieldComponent(props);
   const stringFormatter = useLocalizedStringFormatter(locales);
-  const localSliderRef = useObjectRef(ref);
-  const localInputRef = useObjectRef(inputRef);
-  useMakeFocusable(localSliderRef, () => {
-    localInputRef.current?.focus();
-  });
+  const objectRef = useObjectRef(ref);
   const propsContext = {
     ...fieldPropsContext,
     Label: {
@@ -58,7 +52,6 @@ const Slider = flowComponent("Slider", (props) => {
     Aria.Slider,
     {
       ...rest,
-      ref: localSliderRef,
       className: rootClassName,
       isDisabled,
       defaultValue,
@@ -120,7 +113,7 @@ const Slider = flowComponent("Slider", (props) => {
               /* @__PURE__ */ jsx(
                 Aria.SliderThumb,
                 {
-                  inputRef: localInputRef,
+                  inputRef: objectRef,
                   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\";\nimport { TunnelExit } from \"@mittwald/react-tunnel\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface SliderProps\n  extends FlowComponentProps,\n    PropsWithChildren<Aria.SliderProps>,\n    Pick<Aria.SliderThumbProps, \"inputRef\" | \"name\"> {\n  showInitialMarker?: boolean;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n  isInvalid?: boolean;\n}\n\n/** @flr-generate all */\nexport const Slider = flowComponent(\"Slider\", (props) => {\n  const {\n    className,\n    children,\n    name,\n    isDisabled,\n    defaultValue,\n    showInitialMarker,\n    isReadOnly,\n    ref,\n    inputRef,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.slider,\n    isDisabled && styles.disabled,\n    className,\n  );\n\n  const { FieldErrorView, fieldPropsContext, fieldProps } =\n    useFieldComponent(props);\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const localSliderRef = useObjectRef(ref);\n  const localInputRef = useObjectRef(inputRef);\n\n  useMakeFocusable(localSliderRef, () => {\n    localInputRef.current?.focus();\n  });\n\n  const propsContext: PropsContext = {\n    ...fieldPropsContext,\n    Label: {\n      unstyled: true,\n      tunnelId: \"label\",\n      ...fieldPropsContext.Label,\n    },\n  };\n\n  return (\n    <div {...fieldProps}>\n      <Aria.Slider\n        {...rest}\n        ref={localSliderRef}\n        className={rootClassName}\n        isDisabled={isDisabled}\n        defaultValue={defaultValue}\n      >\n        <PropsContextProvider props={propsContext}>\n          <div className={styles.text}>\n            <Aria.SliderOutput className={styles.value} />\n            <TunnelExit id=\"label\" />\n          </div>\n\n          <Aria.SliderTrack className={styles.track}>\n            {({ state }) => (\n              <PropsContextProvider\n                props={{\n                  Button: {\n                    isPending: false,\n                    isFailed: false,\n                    isSucceeded: false,\n                    isReadOnly: isReadOnly,\n                    excludeFromTabOrder: true,\n                    isDisabled,\n                    variant: \"plain\",\n                    color: \"secondary\",\n                  },\n                }}\n              >\n                <Button\n                  onPress={() => state.decrementThumb(0)}\n                  aria-label={stringFormatter.format(\"slider.decrement\")}\n                  className={styles.decrement}\n                >\n                  <IconMinus />\n                </Button>\n\n                <Button\n                  onPress={() => state.incrementThumb(0)}\n                  aria-label={stringFormatter.format(\"slider.increment\")}\n                  className={styles.increment}\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                <Aria.SliderThumb\n                  inputRef={localInputRef}\n                  name={name}\n                  className={styles.handle}\n                  isDisabled={isReadOnly}\n                />\n              </PropsContextProvider>\n            )}\n          </Aria.SliderTrack>\n          {children}\n          <FieldErrorView />\n        </PropsContextProvider>\n      </Aria.Slider>\n    </div>\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 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\";\nimport { TunnelExit } from \"@mittwald/react-tunnel\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface SliderProps\n  extends FlowComponentProps<HTMLInputElement>,\n    PropsWithChildren<Aria.SliderProps>,\n    Pick<Aria.SliderThumbProps, \"name\"> {\n  showInitialMarker?: boolean;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n  isInvalid?: boolean;\n}\n\n/** @flr-generate all */\nexport const Slider = flowComponent(\"Slider\", (props) => {\n  const {\n    className,\n    children,\n    name,\n    isDisabled,\n    defaultValue,\n    showInitialMarker,\n    isReadOnly,\n    ref,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.slider,\n    isDisabled && styles.disabled,\n    className,\n  );\n\n  const { FieldErrorView, fieldPropsContext, fieldProps } =\n    useFieldComponent(props);\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const objectRef = useObjectRef(ref);\n\n  const propsContext: PropsContext = {\n    ...fieldPropsContext,\n    Label: {\n      unstyled: true,\n      tunnelId: \"label\",\n      ...fieldPropsContext.Label,\n    },\n  };\n\n  return (\n    <div {...fieldProps}>\n      <Aria.Slider\n        {...rest}\n        className={rootClassName}\n        isDisabled={isDisabled}\n        defaultValue={defaultValue}\n      >\n        <PropsContextProvider props={propsContext}>\n          <div className={styles.text}>\n            <Aria.SliderOutput className={styles.value} />\n            <TunnelExit id=\"label\" />\n          </div>\n\n          <Aria.SliderTrack className={styles.track}>\n            {({ state }) => (\n              <PropsContextProvider\n                props={{\n                  Button: {\n                    isPending: false,\n                    isFailed: false,\n                    isSucceeded: false,\n                    isReadOnly: isReadOnly,\n                    excludeFromTabOrder: true,\n                    isDisabled,\n                    variant: \"plain\",\n                    color: \"secondary\",\n                  },\n                }}\n              >\n                <Button\n                  onPress={() => state.decrementThumb(0)}\n                  aria-label={stringFormatter.format(\"slider.decrement\")}\n                  className={styles.decrement}\n                >\n                  <IconMinus />\n                </Button>\n\n                <Button\n                  onPress={() => state.incrementThumb(0)}\n                  aria-label={stringFormatter.format(\"slider.increment\")}\n                  className={styles.increment}\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                <Aria.SliderThumb\n                  inputRef={objectRef}\n                  name={name}\n                  className={styles.handle}\n                  isDisabled={isReadOnly}\n                />\n              </PropsContextProvider>\n            )}\n          </Aria.SliderTrack>\n          {children}\n          <FieldErrorView />\n        </PropsContextProvider>\n      </Aria.Slider>\n    </div>\n  );\n});\n\nexport default Slider;\n"],"names":[],"mappings":"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"}

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

@@ -14,9 +14,8 @@ import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
 import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
 import '../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
-import { useObjectRef } from '@react-aria/utils';
 import styles$1 from '../Label/Label.module.scss.mjs';
-import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
+import { useObjectRef } from 'react-aria';
 
 const Switch = flowComponent("Switch", (props) => {
   const {
@@ -24,7 +23,6 @@ const Switch = flowComponent("Switch", (props) => {
     className,
     labelPosition = "trailing",
     ref,
-    inputRef,
     ...rest
   } = props;
   const rootClassName = clsx(
@@ -32,11 +30,7 @@ const Switch = flowComponent("Switch", (props) => {
     className,
     styles[`label-${labelPosition}`]
   );
-  const localSwitchRef = useObjectRef(ref);
-  const localInputRef = useObjectRef(inputRef);
-  useMakeFocusable(localSwitchRef, () => {
-    localInputRef.current?.focus();
-  });
+  const objectRef = useObjectRef(ref);
   const {
     FieldErrorView,
     FieldErrorCaptureContext,
@@ -51,19 +45,10 @@ const Switch = flowComponent("Switch", (props) => {
     }
   };
   return /* @__PURE__ */ jsxs("div", { ...fieldProps, children: [
-    /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(
-      Aria.Switch,
-      {
-        ...rest,
-        className: rootClassName,
-        ref: localSwitchRef,
-        inputRef: localInputRef,
-        children: ({ isSelected }) => /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, children: [
-          /* @__PURE__ */ jsx("div", { className: styles.track, children: /* @__PURE__ */ jsx("div", { className: styles.handle, children: isSelected ? /* @__PURE__ */ jsx(IconCheck, { size: "s" }) : /* @__PURE__ */ jsx(IconClose, { size: "s" }) }) }),
-          /* @__PURE__ */ jsx("div", { className: styles$1.label, children })
-        ] })
-      }
-    ) }),
+    /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(Aria.Switch, { ...rest, className: rootClassName, inputRef: objectRef, children: ({ isSelected }) => /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.track, children: /* @__PURE__ */ jsx("div", { className: styles.handle, children: isSelected ? /* @__PURE__ */ jsx(IconCheck, { size: "s" }) : /* @__PURE__ */ jsx(IconClose, { size: "s" }) }) }),
+      /* @__PURE__ */ jsx("div", { className: styles$1.label, children })
+    ] }) }) }),
     /* @__PURE__ */ jsx(FieldErrorView, {})
   ] });
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.mjs","sources":["../../../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Switch.module.scss\";\nimport clsx from \"clsx\";\nimport { IconCheck, IconClose } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport labelStyles from \"../Label/Label.module.scss\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\n\nexport interface SwitchProps\n  extends PropsWithChildren<Omit<Aria.SwitchProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {\n  /**\n   * Whether the label should appear before or after the switch. @default\n   * \"trailing\"\n   */\n  labelPosition?: \"leading\" | \"trailing\";\n}\n\n/** @flr-generate all */\nexport const Switch = flowComponent(\"Switch\", (props) => {\n  const {\n    children,\n    className,\n    labelPosition = \"trailing\",\n    ref,\n    inputRef,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.switch,\n    className,\n    styles[`label-${labelPosition}`],\n  );\n\n  const localSwitchRef = useObjectRef(ref);\n  const localInputRef = useObjectRef(inputRef);\n\n  useMakeFocusable(localSwitchRef, () => {\n    localInputRef.current?.focus();\n  });\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props);\n\n  const propsContext: PropsContext = {\n    ...fieldPropsContext,\n    Label: {\n      ...fieldPropsContext.Label,\n      optional: false,\n    },\n  };\n\n  return (\n    <div {...fieldProps}>\n      <FieldErrorCaptureContext>\n        <Aria.Switch\n          {...rest}\n          className={rootClassName}\n          ref={localSwitchRef}\n          inputRef={localInputRef}\n        >\n          {({ isSelected }) => (\n            <PropsContextProvider props={propsContext}>\n              <div className={styles.track}>\n                <div className={styles.handle}>\n                  {isSelected ? <IconCheck size=\"s\" /> : <IconClose size=\"s\" />}\n                </div>\n              </div>\n              <div className={labelStyles.label}>{children}</div>\n            </PropsContextProvider>\n          )}\n        </Aria.Switch>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Switch;\n"],"names":["labelStyles"],"mappings":";;;;;;;;;;;;;;;;;;AAwBO,MAAM,MAAA,GAAS,aAAA,CAAc,QAAA,EAAU,CAAC,KAAA,KAAU;AACvD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,aAAA,GAAgB,UAAA;AAAA,IAChB,GAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,MAAA;AAAA,IACP,SAAA;AAAA,IACA,MAAA,CAAO,CAAA,MAAA,EAAS,aAAa,CAAA,CAAE;AAAA,GACjC;AAEA,EAAA,MAAM,cAAA,GAAiB,aAAa,GAAG,CAAA;AACvC,EAAA,MAAM,aAAA,GAAgB,aAAa,QAAQ,CAAA;AAE3C,EAAA,gBAAA,CAAiB,gBAAgB,MAAM;AACrC,IAAA,aAAA,CAAc,SAAS,KAAA,EAAM;AAAA,EAC/B,CAAC,CAAA;AAED,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,GAAG,iBAAA;AAAA,IACH,KAAA,EAAO;AAAA,MACL,GAAG,iBAAA,CAAkB,KAAA;AAAA,MACrB,QAAA,EAAU;AAAA;AACZ,GACF;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,UAAA,EACP,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,IAAA,CAAK,MAAA;AAAA,MAAL;AAAA,QACE,GAAG,IAAA;AAAA,QACJ,SAAA,EAAW,aAAA;AAAA,QACX,GAAA,EAAK,cAAA;AAAA,QACL,QAAA,EAAU,aAAA;AAAA,QAET,WAAC,EAAE,UAAA,uBACF,IAAA,CAAC,oBAAA,EAAA,EAAqB,OAAO,YAAA,EAC3B,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,MAAA,CAAO,KAAA,EACrB,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,MAAA,EACpB,QAAA,EAAA,UAAA,uBAAc,SAAA,EAAA,EAAU,IAAA,EAAK,KAAI,CAAA,mBAAK,GAAA,CAAC,aAAU,IAAA,EAAK,GAAA,EAAI,GAC7D,CAAA,EACF,CAAA;AAAA,0BACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWA,QAAA,CAAY,OAAQ,QAAA,EAAS;AAAA,SAAA,EAC/C;AAAA;AAAA,KAEJ,EACF,CAAA;AAAA,wBACC,cAAA,EAAA,EAAe;AAAA,GAAA,EAClB,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Switch.mjs","sources":["../../../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Switch.module.scss\";\nimport clsx from \"clsx\";\nimport { IconCheck, IconClose } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport labelStyles from \"../Label/Label.module.scss\";\nimport { useObjectRef } from \"react-aria\";\n\nexport interface SwitchProps\n  extends PropsWithChildren<Omit<Aria.SwitchProps, \"children\" | \"inputRef\">>,\n    FlowComponentProps<HTMLInputElement> {\n  /**\n   * Whether the label should appear before or after the switch. @default\n   * \"trailing\"\n   */\n  labelPosition?: \"leading\" | \"trailing\";\n}\n\n/** @flr-generate all */\nexport const Switch = flowComponent(\"Switch\", (props) => {\n  const {\n    children,\n    className,\n    labelPosition = \"trailing\",\n    ref,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.switch,\n    className,\n    styles[`label-${labelPosition}`],\n  );\n\n  const objectRef = useObjectRef(ref);\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props);\n\n  const propsContext: PropsContext = {\n    ...fieldPropsContext,\n    Label: {\n      ...fieldPropsContext.Label,\n      optional: false,\n    },\n  };\n\n  return (\n    <div {...fieldProps}>\n      <FieldErrorCaptureContext>\n        <Aria.Switch {...rest} className={rootClassName} inputRef={objectRef}>\n          {({ isSelected }) => (\n            <PropsContextProvider props={propsContext}>\n              <div className={styles.track}>\n                <div className={styles.handle}>\n                  {isSelected ? <IconCheck size=\"s\" /> : <IconClose size=\"s\" />}\n                </div>\n              </div>\n              <div className={labelStyles.label}>{children}</div>\n            </PropsContextProvider>\n          )}\n        </Aria.Switch>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Switch;\n"],"names":["labelStyles"],"mappings":";;;;;;;;;;;;;;;;;AAuBO,MAAM,MAAA,GAAS,aAAA,CAAc,QAAA,EAAU,CAAC,KAAA,KAAU;AACvD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,aAAA,GAAgB,UAAA;AAAA,IAChB,GAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,MAAA;AAAA,IACP,SAAA;AAAA,IACA,MAAA,CAAO,CAAA,MAAA,EAAS,aAAa,CAAA,CAAE;AAAA,GACjC;AAEA,EAAA,MAAM,SAAA,GAAY,aAAa,GAAG,CAAA;AAElC,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,GAAG,iBAAA;AAAA,IACH,KAAA,EAAO;AAAA,MACL,GAAG,iBAAA,CAAkB,KAAA;AAAA,MACrB,QAAA,EAAU;AAAA;AACZ,GACF;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,UAAA,EACP,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,4BACC,QAAA,kBAAA,GAAA,CAAC,IAAA,CAAK,QAAL,EAAa,GAAG,MAAM,SAAA,EAAW,aAAA,EAAe,QAAA,EAAU,SAAA,EACxD,WAAC,EAAE,UAAA,uBACF,IAAA,CAAC,oBAAA,EAAA,EAAqB,OAAO,YAAA,EAC3B,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,MAAA,CAAO,KAAA,EACrB,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,MAAA,EACpB,QAAA,EAAA,UAAA,uBAAc,SAAA,EAAA,EAAU,IAAA,EAAK,KAAI,CAAA,mBAAK,GAAA,CAAC,aAAU,IAAA,EAAK,GAAA,EAAI,GAC7D,CAAA,EACF,CAAA;AAAA,sBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWA,QAAA,CAAY,OAAQ,QAAA,EAAS;AAAA,KAAA,EAC/C,GAEJ,CAAA,EACF,CAAA;AAAA,wBACC,cAAA,EAAA,EAAe;AAAA,GAAA,EAClB,CAAA;AAEJ,CAAC;;;;"}

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

@@ -6,12 +6,12 @@ import { TextFieldBase } from '../TextFieldBase/TextFieldBase.mjs';
 import styles from './TextArea.module.scss.mjs';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
 import { useObjectRef } from '@react-aria/utils';
-import { ReactAriaControlledValueFix } from '../../lib/react/ReactAriaControlledValueFix.mjs';
 import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
 import '../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
 import clsx from 'clsx';
 import { useState, useEffect } from 'react';
+import { useControlledHostValueProps } from '../../lib/remote/useControlledHostValueProps.mjs';
 
 const TextArea = flowComponent("TextArea", (props) => {
   const {
@@ -23,7 +23,7 @@ const TextArea = flowComponent("TextArea", (props) => {
     allowVerticalResize,
     allowHorizontalResize,
     ...rest
-  } = props;
+  } = useControlledHostValueProps(props);
   let { allowResize } = props;
   if (allowVerticalResize) {
     allowResize = "vertical";
@@ -78,25 +78,18 @@ const TextArea = flowComponent("TextArea", (props) => {
     }
   };
   const input = /* @__PURE__ */ jsx(
-    ReactAriaControlledValueFix,
+    Aria.TextArea,
     {
-      inputContext: Aria.TextAreaContext,
-      props,
-      children: /* @__PURE__ */ jsx(
-        Aria.TextArea,
-        {
-          rows,
-          "aria-hidden": props["aria-hidden"],
-          placeholder,
-          className: rootClassName,
-          ref: localRef,
-          onChange: updateHeight,
-          style: {
-            minHeight: getHeight(rows),
-            maxHeight: verticallyResizable ? void 0 : getHeight(autoResizeMaxRows)
-          }
-        }
-      )
+      rows,
+      "aria-hidden": props["aria-hidden"],
+      placeholder,
+      className: rootClassName,
+      ref: localRef,
+      onChange: updateHeight,
+      style: {
+        minHeight: getHeight(rows),
+        maxHeight: verticallyResizable ? void 0 : getHeight(autoResizeMaxRows)
+      }
     }
   );
   const {

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.mjs","sources":["../../../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { TextFieldBaseProps } from \"@/components/TextFieldBase\";\nimport { TextFieldBase } from \"@/components/TextFieldBase\";\nimport styles from \"./TextArea.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { ReactAriaControlledValueFix } from \"@/lib/react/ReactAriaControlledValueFix\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport { useEffect, useState } from \"react\";\n\nexport interface TextAreaProps\n  extends Omit<\n      TextFieldBaseProps,\n      \"FieldErrorView\" | \"FieldErrorCaptureContext\" | \"input\" | \"ref\"\n    >,\n    Pick<Aria.TextAreaProps, \"placeholder\" | \"rows\" | \"aria-hidden\">,\n    FlowComponentProps<HTMLTextAreaElement> {\n  /**\n   * Whether the text area should grow if its content gets longer than its\n   * initial height.\n   */\n  autoResizeMaxRows?: number;\n  /** Allows the user to manually resize the textArea horizontally. */\n  allowResize?: boolean | \"horizontal\" | \"vertical\";\n\n  /** @deprecated Use `allowResize` instead. */\n  allowHorizontalResize?: boolean;\n  /** @deprecated Use `allowResize` instead. */\n  allowVerticalResize?: boolean;\n}\n\n/** @flr-generate all */\nexport const TextArea = flowComponent(\"TextArea\", (props) => {\n  const {\n    children,\n    placeholder,\n    rows = 5,\n    autoResizeMaxRows = rows,\n    ref,\n    allowVerticalResize,\n    allowHorizontalResize,\n    ...rest\n  } = props;\n\n  let { allowResize } = props;\n  if (allowVerticalResize) {\n    allowResize = \"vertical\";\n  } else if (allowHorizontalResize) {\n    allowResize = \"horizontal\";\n  }\n\n  const rootClassName = clsx(\n    styles.textArea,\n    typeof allowResize === \"boolean\" && allowResize ? styles.resize : null,\n    allowResize === \"horizontal\"\n      ? styles.horizontalResize\n      : allowResize === \"vertical\"\n        ? styles.verticalResize\n        : null,\n  );\n\n  const localRef = useObjectRef(ref);\n\n  const getHeight = (rows: number) => {\n    return `calc(var(--line-height--m) * ${rows} + (var(--form-control--padding-y) * 2))`;\n  };\n\n  const [resized, setResized] = useState(false);\n\n  const autoResizable = rows !== autoResizeMaxRows;\n\n  const verticallyResizable =\n    allowResize && (!autoResizable || (autoResizable && resized));\n\n  useEffect(() => {\n    const textarea = localRef.current;\n    if (!textarea) return;\n\n    const startHeight = textarea.offsetHeight;\n    let tracking = false;\n\n    const handleMouseDown = () => {\n      tracking = true;\n    };\n\n    const handleMouseMove = () => {\n      if (!tracking || resized) return;\n\n      const currentHeight = textarea.offsetHeight;\n\n      if (currentHeight !== startHeight) {\n        setResized(true);\n        tracking = false;\n      }\n    };\n\n    const handleMouseUp = () => {\n      tracking = false;\n    };\n\n    window.addEventListener(\"mousedown\", handleMouseDown);\n    window.addEventListener(\"mousemove\", handleMouseMove);\n    window.addEventListener(\"mouseup\", handleMouseUp);\n\n    return () => {\n      window.removeEventListener(\"mousedown\", handleMouseDown);\n      window.removeEventListener(\"mousemove\", handleMouseMove);\n      window.removeEventListener(\"mouseup\", handleMouseUp);\n    };\n  }, [resized]);\n\n  const updateHeight = () => {\n    if (localRef.current && autoResizable && !verticallyResizable) {\n      // https://stackoverflow.com/a/60795884\n      localRef.current.style.height = \"0px\";\n      const scrollHeight = localRef.current.scrollHeight;\n      // + 2 to add border height\n      localRef.current.style.height = scrollHeight + 2 + \"px\";\n    }\n  };\n\n  const input = (\n    <ReactAriaControlledValueFix\n      inputContext={Aria.TextAreaContext}\n      props={props}\n    >\n      <Aria.TextArea\n        rows={rows}\n        aria-hidden={props[\"aria-hidden\"]}\n        placeholder={placeholder}\n        className={rootClassName}\n        ref={localRef}\n        onChange={updateHeight}\n        style={{\n          minHeight: getHeight(rows),\n          maxHeight: verticallyResizable\n            ? undefined\n            : getHeight(autoResizeMaxRows),\n        }}\n      />\n    </ReactAriaControlledValueFix>\n  );\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props);\n\n  return (\n    <TextFieldBase\n      {...rest}\n      {...fieldProps}\n      className={clsx(rest.className, fieldProps.className)}\n      FieldErrorView={FieldErrorView}\n      FieldErrorCaptureContext={FieldErrorCaptureContext}\n      input={input}\n    >\n      <PropsContextProvider props={fieldPropsContext}>\n        {children}\n      </PropsContextProvider>\n    </TextFieldBase>\n  );\n});\n\nexport default TextArea;\n"],"names":["rows"],"mappings":"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"}
+{"version":3,"file":"TextArea.mjs","sources":["../../../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { TextFieldBaseProps } from \"@/components/TextFieldBase\";\nimport { TextFieldBase } from \"@/components/TextFieldBase\";\nimport styles from \"./TextArea.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport { useEffect, useState } from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\n\nexport interface TextAreaProps\n  extends Omit<\n      TextFieldBaseProps,\n      \"FieldErrorView\" | \"FieldErrorCaptureContext\" | \"input\" | \"ref\"\n    >,\n    Pick<Aria.TextAreaProps, \"placeholder\" | \"rows\" | \"aria-hidden\">,\n    FlowComponentProps<HTMLTextAreaElement> {\n  /**\n   * Whether the text area should grow if its content gets longer than its\n   * initial height.\n   */\n  autoResizeMaxRows?: number;\n  /** Allows the user to manually resize the textArea horizontally. */\n  allowResize?: boolean | \"horizontal\" | \"vertical\";\n\n  /** @deprecated Use `allowResize` instead. */\n  allowHorizontalResize?: boolean;\n  /** @deprecated Use `allowResize` instead. */\n  allowVerticalResize?: boolean;\n}\n\n/** @flr-generate all */\nexport const TextArea = flowComponent(\"TextArea\", (props) => {\n  const {\n    children,\n    placeholder,\n    rows = 5,\n    autoResizeMaxRows = rows,\n    ref,\n    allowVerticalResize,\n    allowHorizontalResize,\n    ...rest\n  } = useControlledHostValueProps(props);\n\n  let { allowResize } = props;\n  if (allowVerticalResize) {\n    allowResize = \"vertical\";\n  } else if (allowHorizontalResize) {\n    allowResize = \"horizontal\";\n  }\n\n  const rootClassName = clsx(\n    styles.textArea,\n    typeof allowResize === \"boolean\" && allowResize ? styles.resize : null,\n    allowResize === \"horizontal\"\n      ? styles.horizontalResize\n      : allowResize === \"vertical\"\n        ? styles.verticalResize\n        : null,\n  );\n\n  const localRef = useObjectRef(ref);\n\n  const getHeight = (rows: number) => {\n    return `calc(var(--line-height--m) * ${rows} + (var(--form-control--padding-y) * 2))`;\n  };\n\n  const [resized, setResized] = useState(false);\n\n  const autoResizable = rows !== autoResizeMaxRows;\n\n  const verticallyResizable =\n    allowResize && (!autoResizable || (autoResizable && resized));\n\n  useEffect(() => {\n    const textarea = localRef.current;\n    if (!textarea) return;\n\n    const startHeight = textarea.offsetHeight;\n    let tracking = false;\n\n    const handleMouseDown = () => {\n      tracking = true;\n    };\n\n    const handleMouseMove = () => {\n      if (!tracking || resized) return;\n\n      const currentHeight = textarea.offsetHeight;\n\n      if (currentHeight !== startHeight) {\n        setResized(true);\n        tracking = false;\n      }\n    };\n\n    const handleMouseUp = () => {\n      tracking = false;\n    };\n\n    window.addEventListener(\"mousedown\", handleMouseDown);\n    window.addEventListener(\"mousemove\", handleMouseMove);\n    window.addEventListener(\"mouseup\", handleMouseUp);\n\n    return () => {\n      window.removeEventListener(\"mousedown\", handleMouseDown);\n      window.removeEventListener(\"mousemove\", handleMouseMove);\n      window.removeEventListener(\"mouseup\", handleMouseUp);\n    };\n  }, [resized]);\n\n  const updateHeight = () => {\n    if (localRef.current && autoResizable && !verticallyResizable) {\n      // https://stackoverflow.com/a/60795884\n      localRef.current.style.height = \"0px\";\n      const scrollHeight = localRef.current.scrollHeight;\n      // + 2 to add border height\n      localRef.current.style.height = scrollHeight + 2 + \"px\";\n    }\n  };\n\n  const input = (\n    <Aria.TextArea\n      rows={rows}\n      aria-hidden={props[\"aria-hidden\"]}\n      placeholder={placeholder}\n      className={rootClassName}\n      ref={localRef}\n      onChange={updateHeight}\n      style={{\n        minHeight: getHeight(rows),\n        maxHeight: verticallyResizable\n          ? undefined\n          : getHeight(autoResizeMaxRows),\n      }}\n    />\n  );\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props);\n\n  return (\n    <TextFieldBase\n      {...rest}\n      {...fieldProps}\n      className={clsx(rest.className, fieldProps.className)}\n      FieldErrorView={FieldErrorView}\n      FieldErrorCaptureContext={FieldErrorCaptureContext}\n      input={input}\n    >\n      <PropsContextProvider props={fieldPropsContext}>\n        {children}\n      </PropsContextProvider>\n    </TextFieldBase>\n  );\n});\n\nexport default TextArea;\n"],"names":["rows"],"mappings":";;;;;;;;;;;;;AAmCO,MAAM,QAAA,GAAW,aAAA,CAAc,UAAA,EAAY,CAAC,KAAA,KAAU;AAC3D,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,WAAA;AAAA,IACA,IAAA,GAAO,CAAA;AAAA,IACP,iBAAA,GAAoB,IAAA;AAAA,IACpB,GAAA;AAAA,IACA,mBAAA;AAAA,IACA,qBAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,4BAA4B,KAAK,CAAA;AAErC,EAAA,IAAI,EAAE,aAAY,GAAI,KAAA;AACtB,EAAA,IAAI,mBAAA,EAAqB;AACvB,IAAA,WAAA,GAAc,UAAA;AAAA,EAChB,WAAW,qBAAA,EAAuB;AAChC,IAAA,WAAA,GAAc,YAAA;AAAA,EAChB;AAEA,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,QAAA;AAAA,IACP,OAAO,WAAA,KAAgB,SAAA,IAAa,WAAA,GAAc,OAAO,MAAA,GAAS,IAAA;AAAA,IAClE,gBAAgB,YAAA,GACZ,MAAA,CAAO,mBACP,WAAA,KAAgB,UAAA,GACd,OAAO,cAAA,GACP;AAAA,GACR;AAEA,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,MAAM,SAAA,GAAY,CAACA,KAAAA,KAAiB;AAClC,IAAA,OAAO,gCAAgCA,KAAI,CAAA,wCAAA,CAAA;AAAA,EAC7C,CAAA;AAEA,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAE5C,EAAA,MAAM,gBAAgB,IAAA,KAAS,iBAAA;AAE/B,EAAA,MAAM,mBAAA,GACJ,WAAA,KAAgB,CAAC,aAAA,IAAkB,aAAA,IAAiB,OAAA,CAAA;AAEtD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,WAAW,QAAA,CAAS,OAAA;AAC1B,IAAA,IAAI,CAAC,QAAA,EAAU;AAEf,IAAA,MAAM,cAAc,QAAA,CAAS,YAAA;AAC7B,IAAA,IAAI,QAAA,GAAW,KAAA;AAEf,IAAA,MAAM,kBAAkB,MAAM;AAC5B,MAAA,QAAA,GAAW,IAAA;AAAA,IACb,CAAA;AAEA,IAAA,MAAM,kBAAkB,MAAM;AAC5B,MAAA,IAAI,CAAC,YAAY,OAAA,EAAS;AAE1B,MAAA,MAAM,gBAAgB,QAAA,CAAS,YAAA;AAE/B,MAAA,IAAI,kBAAkB,WAAA,EAAa;AACjC,QAAA,UAAA,CAAW,IAAI,CAAA;AACf,QAAA,QAAA,GAAW,KAAA;AAAA,MACb;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,gBAAgB,MAAM;AAC1B,MAAA,QAAA,GAAW,KAAA;AAAA,IACb,CAAA;AAEA,IAAA,MAAA,CAAO,gBAAA,CAAiB,aAAa,eAAe,CAAA;AACpD,IAAA,MAAA,CAAO,gBAAA,CAAiB,aAAa,eAAe,CAAA;AACpD,IAAA,MAAA,CAAO,gBAAA,CAAiB,WAAW,aAAa,CAAA;AAEhD,IAAA,OAAO,MAAM;AACX,MAAA,MAAA,CAAO,mBAAA,CAAoB,aAAa,eAAe,CAAA;AACvD,MAAA,MAAA,CAAO,mBAAA,CAAoB,aAAa,eAAe,CAAA;AACvD,MAAA,MAAA,CAAO,mBAAA,CAAoB,WAAW,aAAa,CAAA;AAAA,IACrD,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAA,MAAM,eAAe,MAAM;AACzB,IAAA,IAAI,QAAA,CAAS,OAAA,IAAW,aAAA,IAAiB,CAAC,mBAAA,EAAqB;AAE7D,MAAA,QAAA,CAAS,OAAA,CAAQ,MAAM,MAAA,GAAS,KAAA;AAChC,MAAA,MAAM,YAAA,GAAe,SAAS,OAAA,CAAQ,YAAA;AAEtC,MAAA,QAAA,CAAS,OAAA,CAAQ,KAAA,CAAM,MAAA,GAAS,YAAA,GAAe,CAAA,GAAI,IAAA;AAAA,IACrD;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,KAAA,mBACJ,GAAA;AAAA,IAAC,IAAA,CAAK,QAAA;AAAA,IAAL;AAAA,MACC,IAAA;AAAA,MACA,aAAA,EAAa,MAAM,aAAa,CAAA;AAAA,MAChC,WAAA;AAAA,MACA,SAAA,EAAW,aAAA;AAAA,MACX,GAAA,EAAK,QAAA;AAAA,MACL,QAAA,EAAU,YAAA;AAAA,MACV,KAAA,EAAO;AAAA,QACL,SAAA,EAAW,UAAU,IAAI,CAAA;AAAA,QACzB,SAAA,EAAW,mBAAA,GACP,MAAA,GACA,SAAA,CAAU,iBAAiB;AAAA;AACjC;AAAA,GACF;AAGF,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,uBACE,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,IAAA,CAAK,SAAA,EAAW,WAAW,SAAS,CAAA;AAAA,MACpD,cAAA;AAAA,MACA,wBAAA;AAAA,MACA,KAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,iBAAA,EAC1B,QAAA,EACH;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

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

@@ -5,21 +5,14 @@ import * as Aria from 'react-aria-components';
 import { TextFieldBase } from '../TextFieldBase/TextFieldBase.mjs';
 import styles from './TextField.module.scss.mjs';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import { ReactAriaControlledValueFix } from '../../lib/react/ReactAriaControlledValueFix.mjs';
 import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
 import '../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import { useControlledHostValueProps } from '../../lib/remote/useControlledHostValueProps.mjs';
 
 const TextField = flowComponent("TextField", (props) => {
-  const {
-    children,
-    placeholder,
-    ref,
-    form,
-    inputContext = Aria.TextFieldContext,
-    ...rest
-  } = props;
-  const input = /* @__PURE__ */ jsx(ReactAriaControlledValueFix, { inputContext, props, children: /* @__PURE__ */ jsx(
+  const { children, placeholder, form, ref, ...rest } = useControlledHostValueProps(props);
+  const input = /* @__PURE__ */ jsx(
     Aria.Input,
     {
       form,
@@ -27,7 +20,7 @@ const TextField = flowComponent("TextField", (props) => {
       className: styles.textField,
       ref
     }
-  ) });
+  );
   const {
     FieldErrorView,
     FieldErrorCaptureContext,

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.mjs","sources":["../../../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport {\n  TextFieldBase,\n  type TextFieldBaseProps,\n} from \"@/components/TextFieldBase\";\nimport styles from \"./TextField.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport {\n  ReactAriaControlledValueFix,\n  type ReactAriaControlledValueFixProps,\n} from \"@/lib/react/ReactAriaControlledValueFix\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\n\nexport interface TextFieldProps\n  extends Omit<\n      TextFieldBaseProps,\n      \"FieldErrorView\" | \"FieldErrorCaptureContext\" | \"input\" | \"className\"\n    >,\n    Pick<Aria.InputProps, \"placeholder\" | \"form\">,\n    PropsWithClassName,\n    FlowComponentProps<HTMLInputElement> {\n  /** @internal */\n  inputContext?: ReactAriaControlledValueFixProps[\"inputContext\"];\n}\n\n/** @flr-generate all */\nexport const TextField = flowComponent(\"TextField\", (props) => {\n  const {\n    children,\n    placeholder,\n    ref,\n    form,\n    inputContext = Aria.TextFieldContext,\n    ...rest\n  } = props;\n\n  const input = (\n    <ReactAriaControlledValueFix inputContext={inputContext} props={props}>\n      <Aria.Input\n        form={form}\n        placeholder={placeholder}\n        className={styles.textField}\n        ref={ref}\n      />\n    </ReactAriaControlledValueFix>\n  );\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props);\n\n  return (\n    <TextFieldBase\n      {...rest}\n      {...fieldProps}\n      FieldErrorView={FieldErrorView}\n      FieldErrorCaptureContext={FieldErrorCaptureContext}\n      input={input}\n    >\n      <PropsContextProvider props={fieldPropsContext}>\n        {children}\n      </PropsContextProvider>\n    </TextFieldBase>\n  );\n});\n\nexport default TextField;\n"],"names":[],"mappings":";;;;;;;;;;AA6BO,MAAM,SAAA,GAAY,aAAA,CAAc,WAAA,EAAa,CAAC,KAAA,KAAU;AAC7D,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,WAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,eAAe,IAAA,CAAK,gBAAA;AAAA,IACpB,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,KAAA,mBACJ,GAAA,CAAC,2BAAA,EAAA,EAA4B,YAAA,EAA4B,KAAA,EACvD,QAAA,kBAAA,GAAA;AAAA,IAAC,IAAA,CAAK,KAAA;AAAA,IAAL;AAAA,MACC,IAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAW,MAAA,CAAO,SAAA;AAAA,MAClB;AAAA;AAAA,GACF,EACF,CAAA;AAGF,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,uBACE,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACJ,cAAA;AAAA,MACA,wBAAA;AAAA,MACA,KAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,iBAAA,EAC1B,QAAA,EACH;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"TextField.mjs","sources":["../../../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport {\n  TextFieldBase,\n  type TextFieldBaseProps,\n} from \"@/components/TextFieldBase\";\nimport styles from \"./TextField.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\n\nexport interface TextFieldProps\n  extends Omit<\n      TextFieldBaseProps,\n      \"FieldErrorView\" | \"FieldErrorCaptureContext\" | \"input\" | \"className\"\n    >,\n    Pick<Aria.InputProps, \"placeholder\" | \"form\">,\n    PropsWithClassName,\n    FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const TextField = flowComponent(\"TextField\", (props) => {\n  const { children, placeholder, form, ref, ...rest } =\n    useControlledHostValueProps(props);\n\n  const input = (\n    <Aria.Input\n      form={form}\n      placeholder={placeholder}\n      className={styles.textField}\n      ref={ref}\n    />\n  );\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props);\n\n  return (\n    <TextFieldBase\n      {...rest}\n      {...fieldProps}\n      FieldErrorView={FieldErrorView}\n      FieldErrorCaptureContext={FieldErrorCaptureContext}\n      input={input}\n    >\n      <PropsContextProvider props={fieldPropsContext}>\n        {children}\n      </PropsContextProvider>\n    </TextFieldBase>\n  );\n});\n\nexport default TextField;\n"],"names":[],"mappings":";;;;;;;;;;AAuBO,MAAM,SAAA,GAAY,aAAA,CAAc,WAAA,EAAa,CAAC,KAAA,KAAU;AAC7D,EAAA,MAAM,EAAE,UAAU,WAAA,EAAa,IAAA,EAAM,KAAK,GAAG,IAAA,EAAK,GAChD,2BAAA,CAA4B,KAAK,CAAA;AAEnC,EAAA,MAAM,KAAA,mBACJ,GAAA;AAAA,IAAC,IAAA,CAAK,KAAA;AAAA,IAAL;AAAA,MACC,IAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAW,MAAA,CAAO,SAAA;AAAA,MAClB;AAAA;AAAA,GACF;AAGF,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,uBACE,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACJ,cAAA;AAAA,MACA,wBAAA;AAAA,MACA,KAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,iBAAA,EAC1B,QAAA,EACH;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

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

@@ -14,7 +14,6 @@ const TextFieldBase = (props) => {
     className,
     input,
     showCharacterCount,
-    ref,
     FieldErrorView,
     FieldErrorCaptureContext,
     ...rest
@@ -23,7 +22,7 @@ const TextFieldBase = (props) => {
     props.defaultValue?.length ?? props.value?.length ?? 0
   );
   const translation = useLocalizedStringFormatter(locales);
-  const handleOnChange = (v) => {
+  const handleChange = (v) => {
     if (showCharacterCount) {
       setCharactersCount(v.length);
     }
@@ -38,27 +37,14 @@ const TextFieldBase = (props) => {
       maxCount: props.maxLength ?? 0
     }
   );
-  const propsWithOptionalStringValue = "value" in props ? {
-    value: props.value ?? ""
-  } : {};
-  return /* @__PURE__ */ jsxs(
-    Aria.TextField,
-    {
-      ref,
-      ...rest,
-      className,
-      onChange: handleOnChange,
-      ...propsWithOptionalStringValue,
-      children: [
-        /* @__PURE__ */ jsxs(FieldErrorCaptureContext, { children: [
-          children,
-          input,
-          showCharacterCount && /* @__PURE__ */ jsx(FieldDescription, { className: formFieldStyles.fieldDescription, children: charactersCountDescription })
-        ] }),
-        /* @__PURE__ */ jsx(FieldErrorView, {})
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(Aria.TextField, { ...rest, className, onChange: handleChange, children: [
+    /* @__PURE__ */ jsxs(FieldErrorCaptureContext, { children: [
+      children,
+      input,
+      showCharacterCount && /* @__PURE__ */ jsx(FieldDescription, { className: formFieldStyles.fieldDescription, children: charactersCountDescription })
+    ] }),
+    /* @__PURE__ */ jsx(FieldErrorView, {})
+  ] });
 };
 
 export { TextFieldBase, TextFieldBase as default };