@mittwald/flow-react-components 1.5.0-next.14 → 1.5.0-next.15

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

@@ -2,6 +2,7 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
 import { useOverlayController } from "../../lib/controller/overlay/useOverlayController.mjs";
 import { Text } from "../Text/Text.mjs";
@@ -9,7 +10,7 @@ import { getOptionsTunnelProps } from "../Option/optionsTunnel.mjs";
 import { Options } from "../Options/Options.mjs";
 import __locale_default from "../../../../../_virtual/_3.locale.mjs";
 import Autocomplete_module_default from "./Autocomplete.module.mjs";
-import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
+import { joinIds, useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { isFocused } from "../../lib/form/isFocused.mjs";
 import { emitElementValueChange } from "../../lib/react/emitElementValueChange.mjs";
 import clsx from "clsx";
@@ -40,6 +41,7 @@ var Autocomplete = flowComponent("Autocomplete", (props) => {
 		if (inputRef.current) emitElementValueChange(inputRef.current, value);
 		optionsOverlayController.close();
 	};
+	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, wrapperProps, controlProps } = useFieldComponent(props, "Autocomplete");
 	const inputProps = {
 		onKeyDown: (e) => {
 			if (e.key === "Enter" && optionsOverlayController.isOpen) e.preventDefault();
@@ -47,21 +49,26 @@ var Autocomplete = flowComponent("Autocomplete", (props) => {
 		ref: inputRef,
 		onChange: handleInputChange
 	};
-	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, fieldProps } = useFieldComponent(props, "Autocomplete");
-	const rootClassName = clsx(Autocomplete_module_default.autocomplete, fieldProps.className, className);
+	const errorDescribedBy = controlProps["aria-describedby"];
+	const rootClassName = clsx(Autocomplete_module_default.autocomplete, wrapperProps.className, className);
 	const propsContext = {
-		SearchField: inputProps,
-		TextField: inputProps,
+		SearchField: {
+			...inputProps,
+			"aria-describedby": dynamic((p) => joinIds(errorDescribedBy, p["aria-describedby"]))
+		},
+		TextField: {
+			...inputProps,
+			"aria-describedby": dynamic((p) => joinIds(errorDescribedBy, p["aria-describedby"]))
+		},
 		Option: { tunnel: getOptionsTunnelProps("Autocomplete") },
 		Popover: { className: Autocomplete_module_default.popover },
 		...fieldPropsContext
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		...fieldProps,
 		className: rootClassName,
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(PropsContextProvider, {
 			props: propsContext,
-			dependencies: [optionsOverlayController],
+			dependencies: [optionsOverlayController, errorDescribedBy],
 			children: /* @__PURE__ */ jsx("div", {
 				...focusWithin.focusWithinProps,
 				ref: container,

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

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.mjs","names":[],"sources":["../../../../../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import { getOptionsTunnelProps } from \"@/components/Option/optionsTunnel\";\nimport { useRef, type PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { SearchFieldProps } from \"@/components/SearchField\";\nimport type { TextFieldProps } from \"@/components/TextField\";\nimport Options from \"@/components/Options\";\nimport locales from \"./locales/*.locale.json\";\nimport Text from \"@/components/Text\";\nimport styles from \"./Autocomplete.module.scss\";\nimport {\n  UNSAFE_PortalProvider,\n  useFocusWithin,\n  useLocalizedStringFormatter,\n  useObjectRef,\n} from \"react-aria\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { isFocused } from \"@/lib/form/isFocused\";\nimport { emitElementValueChange } from \"@/lib/react/emitElementValueChange\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport clsx from \"clsx\";\n\nexport interface AutocompleteProps\n  extends\n    PropsWithChildren,\n    PropsWithClassName,\n    FlowComponentProps<HTMLInputElement>,\n    Omit<\n      Aria.AutocompleteProps,\n      \"children\" | \"onInputChange\" | \"inputValue\" | \"defaultInputValue\" | \"ref\"\n    > {}\n\n/** @flr-generate all */\nexport const Autocomplete = flowComponent(\"Autocomplete\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const inputRef = useObjectRef(ref);\n\n  const { contains } = Aria.useFilter({ sensitivity: \"base\" });\n  const stringFormatter = useLocalizedStringFormatter(locales);\n  const container = useRef(null);\n\n  const optionsOverlayController = useOverlayController(\"Popover\", {\n    reuseControllerFromContext: false,\n  });\n\n  const focusWithin = useFocusWithin({\n    onBlurWithin: () => optionsOverlayController.close(),\n  });\n\n  const renderEmptyState = () => (\n    <Text className={styles.empty}>\n      {stringFormatter.format(\"autocomplete.empty\")}\n    </Text>\n  );\n\n  const handleInputChange = (value: string) => {\n    if (value === \"\") {\n      optionsOverlayController.close();\n    } else if (isFocused(inputRef.current)) {\n      optionsOverlayController.open();\n    }\n  };\n\n  const handleOptionAction = (key: Aria.Key) => {\n    const value = String(key);\n    if (inputRef.current) {\n      emitElementValueChange(inputRef.current, value);\n    }\n    optionsOverlayController.close();\n  };\n\n  const inputProps: SearchFieldProps & TextFieldProps = {\n    onKeyDown: (e) => {\n      if (e.key === \"Enter\" && optionsOverlayController.isOpen) {\n        e.preventDefault();\n      }\n    },\n    ref: inputRef,\n    onChange: handleInputChange,\n  };\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props, \"Autocomplete\");\n\n  const rootClassName = clsx(\n    styles.autocomplete,\n    fieldProps.className,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    SearchField: inputProps,\n    TextField: inputProps,\n    Option: {\n      tunnel: getOptionsTunnelProps(\"Autocomplete\"),\n    },\n    Popover: {\n      className: styles.popover,\n    },\n    ...fieldPropsContext,\n  };\n\n  return (\n    <div {...fieldProps} className={rootClassName}>\n      <FieldErrorCaptureContext>\n        <PropsContextProvider\n          props={propsContext}\n          dependencies={[optionsOverlayController]}\n        >\n          <div {...focusWithin.focusWithinProps} ref={container}>\n            <UNSAFE_PortalProvider getContainer={() => container.current}>\n              <Aria.Autocomplete\n                filter={contains}\n                disableAutoFocusFirst\n                {...rest}\n              >\n                {children}\n                <Options\n                  onAction={handleOptionAction}\n                  triggerRef={container}\n                  controller={optionsOverlayController}\n                  renderEmptyState={renderEmptyState}\n                  isNonModal\n                  placement=\"bottom start\"\n                >\n                  <UiComponentTunnelExit\n                    id=\"options\"\n                    component=\"Autocomplete\"\n                  />\n                </Options>\n              </Aria.Autocomplete>\n            </UNSAFE_PortalProvider>\n          </div>\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Autocomplete;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuCA,IAAa,eAAe,cAAc,iBAAiB,UAAU;CACnE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,WAAW,aAAa,GAAG;CAEjC,MAAM,EAAE,aAAa,KAAK,UAAU,EAAE,aAAa,OAAO,CAAC;CAC3D,MAAM,kBAAkB,4BAA4B,gBAAO;CAC3D,MAAM,YAAY,OAAO,IAAI;CAE7B,MAAM,2BAA2B,qBAAqB,WAAW,EAC/D,4BAA4B,MAC9B,CAAC;CAED,MAAM,cAAc,eAAe,EACjC,oBAAoB,yBAAyB,MAAM,EACrD,CAAC;CAED,MAAM,yBACJ,oBAAC,MAAD;EAAM,WAAW,4BAAO;EACrB,UAAA,gBAAgB,OAAO,oBAAoB;CACxC,CAAA;CAGR,MAAM,qBAAqB,UAAkB;EAC3C,IAAI,UAAU,IACZ,yBAAyB,MAAM;OAC1B,IAAI,UAAU,SAAS,OAAO,GACnC,yBAAyB,KAAK;CAElC;CAEA,MAAM,sBAAsB,QAAkB;EAC5C,MAAM,QAAQ,OAAO,GAAG;EACxB,IAAI,SAAS,SACX,uBAAuB,SAAS,SAAS,KAAK;EAEhD,yBAAyB,MAAM;CACjC;CAEA,MAAM,aAAgD;EACpD,YAAY,MAAM;GAChB,IAAI,EAAE,QAAQ,WAAW,yBAAyB,QAChD,EAAE,eAAe;EAErB;EACA,KAAK;EACL,UAAU;CACZ;CAEA,MAAM,EACJ,gBACA,0BACA,mBACA,eACE,kBAAkB,OAAO,cAAc;CAE3C,MAAM,gBAAgB,KACpB,4BAAO,cACP,WAAW,WACX,SACF;CAEA,MAAM,eAA6B;EACjC,aAAa;EACb,WAAW;EACX,QAAQ,EACN,QAAQ,sBAAsB,cAAc,EAC9C;EACA,SAAS,EACP,WAAW,4BAAO,QACpB;EACA,GAAG;CACL;CAEA,OACE,qBAAC,OAAD;EAAK,GAAI;EAAY,WAAW;EAAhC,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc,CAAC,wBAAwB;GAEvC,UAAA,oBAAC,OAAD;IAAK,GAAI,YAAY;IAAkB,KAAK;IAC1C,UAAA,oBAAC,uBAAD;KAAuB,oBAAoB,UAAU;KACnD,UAAA,qBAAC,KAAK,cAAN;MACE,QAAQ;MACR,uBAAA;MACA,GAAI;MAHN,UAAA,CAKG,UACD,oBAAC,SAAD;OACE,UAAU;OACV,YAAY;OACZ,YAAY;OACM;OAClB,YAAA;OACA,WAAU;OAEV,UAAA,oBAAC,uBAAD;QACE,IAAG;QACH,WAAU;OACX,CAAA;MACM,CAAA,CACQ;;IACE,CAAA;GACpB,CAAA;EACe,CAAA,EACE,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}
+{"version":3,"file":"Autocomplete.mjs","names":[],"sources":["../../../../../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import { getOptionsTunnelProps } from \"@/components/Option/optionsTunnel\";\nimport { useRef, type PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { SearchFieldProps } from \"@/components/SearchField\";\nimport type { TextFieldProps } from \"@/components/TextField\";\nimport Options from \"@/components/Options\";\nimport locales from \"./locales/*.locale.json\";\nimport Text from \"@/components/Text\";\nimport styles from \"./Autocomplete.module.scss\";\nimport {\n  UNSAFE_PortalProvider,\n  useFocusWithin,\n  useLocalizedStringFormatter,\n  useObjectRef,\n} from \"react-aria\";\nimport { joinIds, useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { isFocused } from \"@/lib/form/isFocused\";\nimport { emitElementValueChange } from \"@/lib/react/emitElementValueChange\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport clsx from \"clsx\";\n\nexport interface AutocompleteProps\n  extends\n    PropsWithChildren,\n    PropsWithClassName,\n    FlowComponentProps<HTMLInputElement>,\n    Omit<\n      Aria.AutocompleteProps,\n      \"children\" | \"onInputChange\" | \"inputValue\" | \"defaultInputValue\" | \"ref\"\n    > {}\n\n/** @flr-generate all */\nexport const Autocomplete = flowComponent(\"Autocomplete\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const inputRef = useObjectRef(ref);\n\n  const { contains } = Aria.useFilter({ sensitivity: \"base\" });\n  const stringFormatter = useLocalizedStringFormatter(locales);\n  const container = useRef(null);\n\n  const optionsOverlayController = useOverlayController(\"Popover\", {\n    reuseControllerFromContext: false,\n  });\n\n  const focusWithin = useFocusWithin({\n    onBlurWithin: () => optionsOverlayController.close(),\n  });\n\n  const renderEmptyState = () => (\n    <Text className={styles.empty}>\n      {stringFormatter.format(\"autocomplete.empty\")}\n    </Text>\n  );\n\n  const handleInputChange = (value: string) => {\n    if (value === \"\") {\n      optionsOverlayController.close();\n    } else if (isFocused(inputRef.current)) {\n      optionsOverlayController.open();\n    }\n  };\n\n  const handleOptionAction = (key: Aria.Key) => {\n    const value = String(key);\n    if (inputRef.current) {\n      emitElementValueChange(inputRef.current, value);\n    }\n    optionsOverlayController.close();\n  };\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n  } = useFieldComponent(props, \"Autocomplete\");\n\n  const inputProps: SearchFieldProps & TextFieldProps = {\n    onKeyDown: (e) => {\n      if (e.key === \"Enter\" && optionsOverlayController.isOpen) {\n        e.preventDefault();\n      }\n    },\n    ref: inputRef,\n    onChange: handleInputChange,\n  };\n\n  const errorDescribedBy = controlProps[\"aria-describedby\"];\n\n  const rootClassName = clsx(\n    styles.autocomplete,\n    wrapperProps.className,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    // Merged, not replaced: a field's own `aria-describedby` must not unlink\n    // the Autocomplete's error.\n    SearchField: {\n      ...inputProps,\n      \"aria-describedby\": dynamic((p) =>\n        joinIds(errorDescribedBy, p[\"aria-describedby\"]),\n      ),\n    },\n    TextField: {\n      ...inputProps,\n      \"aria-describedby\": dynamic((p) =>\n        joinIds(errorDescribedBy, p[\"aria-describedby\"]),\n      ),\n    },\n    Option: {\n      tunnel: getOptionsTunnelProps(\"Autocomplete\"),\n    },\n    Popover: {\n      className: styles.popover,\n    },\n    ...fieldPropsContext,\n  };\n\n  return (\n    <div className={rootClassName}>\n      <FieldErrorCaptureContext>\n        <PropsContextProvider\n          props={propsContext}\n          dependencies={[optionsOverlayController, errorDescribedBy]}\n        >\n          <div {...focusWithin.focusWithinProps} ref={container}>\n            <UNSAFE_PortalProvider getContainer={() => container.current}>\n              <Aria.Autocomplete\n                filter={contains}\n                disableAutoFocusFirst\n                {...rest}\n              >\n                {children}\n                <Options\n                  onAction={handleOptionAction}\n                  triggerRef={container}\n                  controller={optionsOverlayController}\n                  renderEmptyState={renderEmptyState}\n                  isNonModal\n                  placement=\"bottom start\"\n                >\n                  <UiComponentTunnelExit\n                    id=\"options\"\n                    component=\"Autocomplete\"\n                  />\n                </Options>\n              </Aria.Autocomplete>\n            </UNSAFE_PortalProvider>\n          </div>\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Autocomplete;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA2CA,IAAa,eAAe,cAAc,iBAAiB,UAAU;CACnE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,WAAW,aAAa,GAAG;CAEjC,MAAM,EAAE,aAAa,KAAK,UAAU,EAAE,aAAa,OAAO,CAAC;CAC3D,MAAM,kBAAkB,4BAA4B,gBAAO;CAC3D,MAAM,YAAY,OAAO,IAAI;CAE7B,MAAM,2BAA2B,qBAAqB,WAAW,EAC/D,4BAA4B,MAC9B,CAAC;CAED,MAAM,cAAc,eAAe,EACjC,oBAAoB,yBAAyB,MAAM,EACrD,CAAC;CAED,MAAM,yBACJ,oBAAC,MAAD;EAAM,WAAW,4BAAO;EACrB,UAAA,gBAAgB,OAAO,oBAAoB;CACxC,CAAA;CAGR,MAAM,qBAAqB,UAAkB;EAC3C,IAAI,UAAU,IACZ,yBAAyB,MAAM;OAC1B,IAAI,UAAU,SAAS,OAAO,GACnC,yBAAyB,KAAK;CAElC;CAEA,MAAM,sBAAsB,QAAkB;EAC5C,MAAM,QAAQ,OAAO,GAAG;EACxB,IAAI,SAAS,SACX,uBAAuB,SAAS,SAAS,KAAK;EAEhD,yBAAyB,MAAM;CACjC;CAEA,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,iBACE,kBAAkB,OAAO,cAAc;CAE3C,MAAM,aAAgD;EACpD,YAAY,MAAM;GAChB,IAAI,EAAE,QAAQ,WAAW,yBAAyB,QAChD,EAAE,eAAe;EAErB;EACA,KAAK;EACL,UAAU;CACZ;CAEA,MAAM,mBAAmB,aAAa;CAEtC,MAAM,gBAAgB,KACpB,4BAAO,cACP,aAAa,WACb,SACF;CAEA,MAAM,eAA6B;EAGjC,aAAa;GACX,GAAG;GACH,oBAAoB,SAAS,MAC3B,QAAQ,kBAAkB,EAAE,mBAAmB,CACjD;EACF;EACA,WAAW;GACT,GAAG;GACH,oBAAoB,SAAS,MAC3B,QAAQ,kBAAkB,EAAE,mBAAmB,CACjD;EACF;EACA,QAAQ,EACN,QAAQ,sBAAsB,cAAc,EAC9C;EACA,SAAS,EACP,WAAW,4BAAO,QACpB;EACA,GAAG;CACL;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW;EAAhB,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc,CAAC,0BAA0B,gBAAgB;GAEzD,UAAA,oBAAC,OAAD;IAAK,GAAI,YAAY;IAAkB,KAAK;IAC1C,UAAA,oBAAC,uBAAD;KAAuB,oBAAoB,UAAU;KACnD,UAAA,qBAAC,KAAK,cAAN;MACE,QAAQ;MACR,uBAAA;MACA,GAAI;MAHN,UAAA,CAKG,UACD,oBAAC,SAAD;OACE,UAAU;OACV,YAAY;OACZ,YAAY;OACM;OAClB,YAAA;OACA,WAAU;OAEV,UAAA,oBAAC,uBAAD;QACE,IAAG;QACH,WAAU;OACX,CAAA;MACM,CAAA,CACQ;;IACE,CAAA;GACpB,CAAA;EACe,CAAA,EACE,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}

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

@@ -15,13 +15,13 @@ import { useObjectRef } from "react-aria";
 /** @flr-generate all */
 var Checkbox = flowComponent("Checkbox", (props) => {
 	const { children, className, ref, inputClassName, ...rest } = props;
-	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, fieldProps } = useFieldComponent(props, "Checkbox");
+	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, wrapperProps, controlProps } = useFieldComponent(props, "Checkbox");
 	const inputRef = useObjectRef(ref);
 	return /* @__PURE__ */ jsxs("div", {
-		...fieldProps,
-		className: clsx(Checkbox_module_default.checkbox, className, fieldProps.className),
+		className: clsx(Checkbox_module_default.checkbox, className, wrapperProps.className),
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(Aria.Checkbox, {
 			...rest,
+			"aria-describedby": controlProps["aria-describedby"],
 			inputRef,
 			className: clsx(inputClassName, Checkbox_module_default.input),
 			children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs(PropsContextProvider, {

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","names":[],"sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import {\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Checkbox.module.scss\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"react-aria\";\n\nexport interface CheckboxProps\n  extends\n    PropsWithChildren<\n      Omit<Aria.CheckboxProps, \"children\" | \"ref\" | \"inputRef\">\n    >,\n    FlowComponentProps<HTMLInputElement> {\n  /** The class name of the underlying input element. */\n  inputClassName?: string;\n}\n\n/** @flr-generate all */\nexport const Checkbox = flowComponent(\"Checkbox\", (props) => {\n  const { children, className, ref, inputClassName, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props, \"Checkbox\");\n\n  const inputRef = useObjectRef(ref);\n\n  return (\n    <div\n      {...fieldProps}\n      className={clsx(styles.checkbox, className, fieldProps.className)}\n    >\n      <FieldErrorCaptureContext>\n        <Aria.Checkbox\n          {...rest}\n          inputRef={inputRef}\n          className={clsx(inputClassName, styles.input)}\n        >\n          {({ isSelected, isIndeterminate }) => (\n            <PropsContextProvider props={fieldPropsContext}>\n              {isSelected ? (\n                <IconCheckboxChecked className={styles.icon} />\n              ) : isIndeterminate ? (\n                <IconCheckboxIndeterminate className={styles.icon} />\n              ) : (\n                <IconCheckboxEmpty className={styles.icon} />\n              )}\n              {children}\n            </PropsContextProvider>\n          )}\n        </Aria.Checkbox>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;;;AA0BA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EAAE,UAAU,WAAW,KAAK,gBAAgB,GAAG,SAAS;CAE9D,MAAM,EACJ,gBACA,0BACA,mBACA,eACE,kBAAkB,OAAO,UAAU;CAEvC,MAAM,WAAW,aAAa,GAAG;CAEjC,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW,KAAK,wBAAO,UAAU,WAAW,WAAW,SAAS;EAFlE,UAAA,CAIE,oBAAC,0BAAD,EAAA,UACE,oBAAC,KAAK,UAAN;GACE,GAAI;GACM;GACV,WAAW,KAAK,gBAAgB,wBAAO,KAAK;GAE1C,WAAA,EAAE,YAAY,sBACd,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA,CACG,aACC,oBAAC,qBAAD,EAAqB,WAAW,wBAAO,KAAO,CAAA,IAC5C,kBACF,oBAAC,2BAAD,EAA2B,WAAW,wBAAO,KAAO,CAAA,IAEpD,oBAAC,mBAAD,EAAmB,WAAW,wBAAO,KAAO,CAAA,GAE7C,QACmB;;EAEX,CAAA,EACS,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}
+{"version":3,"file":"Checkbox.mjs","names":[],"sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import {\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Checkbox.module.scss\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"react-aria\";\n\nexport interface CheckboxProps\n  extends\n    PropsWithChildren<\n      Omit<Aria.CheckboxProps, \"children\" | \"ref\" | \"inputRef\">\n    >,\n    FlowComponentProps<HTMLInputElement> {\n  /** The class name of the underlying input element. */\n  inputClassName?: string;\n}\n\n/** @flr-generate all */\nexport const Checkbox = flowComponent(\"Checkbox\", (props) => {\n  const { children, className, ref, inputClassName, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n  } = useFieldComponent(props, \"Checkbox\");\n\n  const inputRef = useObjectRef(ref);\n\n  return (\n    <div className={clsx(styles.checkbox, className, wrapperProps.className)}>\n      <FieldErrorCaptureContext>\n        <Aria.Checkbox\n          {...rest}\n          aria-describedby={controlProps[\"aria-describedby\"]}\n          inputRef={inputRef}\n          className={clsx(inputClassName, styles.input)}\n        >\n          {({ isSelected, isIndeterminate }) => (\n            <PropsContextProvider props={fieldPropsContext}>\n              {isSelected ? (\n                <IconCheckboxChecked className={styles.icon} />\n              ) : isIndeterminate ? (\n                <IconCheckboxIndeterminate className={styles.icon} />\n              ) : (\n                <IconCheckboxEmpty className={styles.icon} />\n              )}\n              {children}\n            </PropsContextProvider>\n          )}\n        </Aria.Checkbox>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;;;AA0BA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EAAE,UAAU,WAAW,KAAK,gBAAgB,GAAG,SAAS;CAE9D,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,iBACE,kBAAkB,OAAO,UAAU;CAEvC,MAAM,WAAW,aAAa,GAAG;CAEjC,OACE,qBAAC,OAAD;EAAK,WAAW,KAAK,wBAAO,UAAU,WAAW,aAAa,SAAS;EAAvE,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,oBAAC,KAAK,UAAN;GACE,GAAI;GACJ,oBAAkB,aAAa;GACrB;GACV,WAAW,KAAK,gBAAgB,wBAAO,KAAK;GAE1C,WAAA,EAAE,YAAY,sBACd,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA,CACG,aACC,oBAAC,qBAAD,EAAqB,WAAW,wBAAO,KAAO,CAAA,IAC5C,kBACF,oBAAC,2BAAD,EAA2B,WAAW,wBAAO,KAAO,CAAA,IAEpD,oBAAC,mBAAD,EAAmB,WAAW,wBAAO,KAAO,CAAA,GAE7C,QACmB;;EAEX,CAAA,EACS,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}

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

@@ -11,17 +11,17 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /** @flr-generate all */
 var CheckboxButton = flowComponent("CheckboxButton", (props) => {
 	const { children, className, inputClassName, ...rest } = props;
-	const { fieldPropsContext, fieldProps, FieldErrorView, FieldErrorCaptureContext } = useFieldComponent(props, "CheckboxButton");
+	const { fieldPropsContext, wrapperProps, controlProps, FieldErrorView, FieldErrorCaptureContext } = useFieldComponent(props, "CheckboxButton");
 	const mergedPropsContext = {
 		Text: { className: CheckboxButton_module_default.label },
 		Content: { className: CheckboxButton_module_default.content },
 		...fieldPropsContext
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		...fieldProps,
-		className: clsx(fieldProps.className, CheckboxButton_module_default.checkboxButton, className),
+		className: clsx(wrapperProps.className, CheckboxButton_module_default.checkboxButton, className),
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(Checkbox, {
 			...rest,
+			"aria-describedby": controlProps["aria-describedby"],
 			className: CheckboxButton_module_default.checkbox,
 			inputClassName: clsx(inputClassName, CheckboxButton_module_default.input),
 			children: /* @__PURE__ */ jsx(PropsContextProvider, {

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.mjs","names":[],"sources":["../../../../../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import styles from \"./CheckboxButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { CheckboxProps } from \"@/components/Checkbox\";\nimport { Checkbox } from \"@/components/Checkbox\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface CheckboxButtonProps\n  extends CheckboxProps, FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const CheckboxButton = flowComponent(\"CheckboxButton\", (props) => {\n  const { children, className, inputClassName, ...rest } = props;\n\n  const {\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorView,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props, \"CheckboxButton\");\n\n  const mergedPropsContext: PropsContext = {\n    Text: {\n      className: styles.label,\n    },\n    Content: {\n      className: styles.content,\n    },\n    ...fieldPropsContext,\n  };\n\n  return (\n    <div\n      {...fieldProps}\n      className={clsx(fieldProps.className, styles.checkboxButton, className)}\n    >\n      <FieldErrorCaptureContext>\n        <Checkbox\n          {...rest}\n          className={styles.checkbox}\n          inputClassName={clsx(inputClassName, styles.input)}\n        >\n          <PropsContextProvider props={mergedPropsContext}>\n            {children}\n          </PropsContextProvider>\n        </Checkbox>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default CheckboxButton;\n"],"mappings":";;;;;;;;;;;AAcA,IAAa,iBAAiB,cAAc,mBAAmB,UAAU;CACvE,MAAM,EAAE,UAAU,WAAW,gBAAgB,GAAG,SAAS;CAEzD,MAAM,EACJ,mBACA,YACA,gBACA,6BACE,kBAAkB,OAAO,gBAAgB;CAE7C,MAAM,qBAAmC;EACvC,MAAM,EACJ,WAAW,8BAAO,MACpB;EACA,SAAS,EACP,WAAW,8BAAO,QACpB;EACA,GAAG;CACL;CAEA,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW,KAAK,WAAW,WAAW,8BAAO,gBAAgB,SAAS;EAFxE,UAAA,CAIE,oBAAC,0BAAD,EAAA,UACE,oBAAC,UAAD;GACE,GAAI;GACJ,WAAW,8BAAO;GAClB,gBAAgB,KAAK,gBAAgB,8BAAO,KAAK;GAEjD,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACd,CAAA,EACc,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}
+{"version":3,"file":"CheckboxButton.mjs","names":[],"sources":["../../../../../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import styles from \"./CheckboxButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { CheckboxProps } from \"@/components/Checkbox\";\nimport { Checkbox } from \"@/components/Checkbox\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface CheckboxButtonProps\n  extends CheckboxProps, FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const CheckboxButton = flowComponent(\"CheckboxButton\", (props) => {\n  const { children, className, inputClassName, ...rest } = props;\n\n  const {\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    FieldErrorView,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props, \"CheckboxButton\");\n\n  const mergedPropsContext: PropsContext = {\n    Text: {\n      className: styles.label,\n    },\n    Content: {\n      className: styles.content,\n    },\n    ...fieldPropsContext,\n  };\n\n  return (\n    <div\n      className={clsx(wrapperProps.className, styles.checkboxButton, className)}\n    >\n      <FieldErrorCaptureContext>\n        <Checkbox\n          {...rest}\n          aria-describedby={controlProps[\"aria-describedby\"]}\n          className={styles.checkbox}\n          inputClassName={clsx(inputClassName, styles.input)}\n        >\n          <PropsContextProvider props={mergedPropsContext}>\n            {children}\n          </PropsContextProvider>\n        </Checkbox>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default CheckboxButton;\n"],"mappings":";;;;;;;;;;;AAcA,IAAa,iBAAiB,cAAc,mBAAmB,UAAU;CACvE,MAAM,EAAE,UAAU,WAAW,gBAAgB,GAAG,SAAS;CAEzD,MAAM,EACJ,mBACA,cACA,cACA,gBACA,6BACE,kBAAkB,OAAO,gBAAgB;CAE7C,MAAM,qBAAmC;EACvC,MAAM,EACJ,WAAW,8BAAO,MACpB;EACA,SAAS,EACP,WAAW,8BAAO,QACpB;EACA,GAAG;CACL;CAEA,OACE,qBAAC,OAAD;EACE,WAAW,KAAK,aAAa,WAAW,8BAAO,gBAAgB,SAAS;EAD1E,UAAA,CAGE,oBAAC,0BAAD,EAAA,UACE,oBAAC,UAAD;GACE,GAAI;GACJ,oBAAkB,aAAa;GAC/B,WAAW,8BAAO;GAClB,gBAAgB,KAAK,gBAAgB,8BAAO,KAAK;GAEjD,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACd,CAAA,EACc,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}

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

@@ -15,7 +15,7 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var CheckboxGroup = flowComponent("CheckboxGroup", (props) => {
 	const { children, className, isInvalid, s, m, l, ref, ...rest } = props;
-	const { FieldErrorView, fieldPropsContext, fieldProps, FieldErrorCaptureContext } = useFieldComponent(props, "CheckboxGroup");
+	const { FieldErrorView, fieldPropsContext, wrapperProps, controlProps, FieldErrorCaptureContext } = useFieldComponent(props, "CheckboxGroup");
 	const propsContext = {
 		Checkbox: {
 			isInvalid,
@@ -39,9 +39,9 @@ var CheckboxGroup = flowComponent("CheckboxGroup", (props) => {
 	useMakeFocusable(objectRef);
 	return /* @__PURE__ */ jsxs(Aria.CheckboxGroup, {
 		...rest,
-		...fieldProps,
+		...controlProps,
 		isInvalid,
-		className: clsx(fieldProps.className, className),
+		className: clsx(wrapperProps.className, className),
 		ref: objectRef,
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, {
 			props: propsContext,

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.mjs","names":[],"sources":["../../../../../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\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 clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./CheckboxGroup.module.scss\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface CheckboxGroupProps\n  extends\n    PropsWithChildren<Omit<Aria.CheckboxGroupProps, \"children\">>,\n    Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\">,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const CheckboxGroup = flowComponent(\"CheckboxGroup\", (props) => {\n  const { children, className, isInvalid, s, m, l, ref, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props, \"CheckboxGroup\");\n\n  const propsContext: PropsContext = {\n    Checkbox: {\n      isInvalid,\n      className: styles.checkbox,\n      tunnel: {\n        id: \"checkboxes\",\n        component: \"CheckboxGroup\",\n      },\n    },\n    CheckboxButton: {\n      isInvalid,\n      className: styles.checkboxButton,\n      tunnel: {\n        id: \"checkboxButtons\",\n        component: \"CheckboxGroup\",\n      },\n    },\n    ...fieldPropsContext,\n  };\n\n  const objectRef = useObjectRef(ref);\n  useMakeFocusable(objectRef);\n\n  return (\n    <Aria.CheckboxGroup\n      {...rest}\n      {...fieldProps}\n      isInvalid={isInvalid}\n      className={clsx(fieldProps.className, className)}\n      ref={objectRef}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider props={propsContext}>\n          {children}\n\n          <ColumnLayout s={s} m={m} l={l} className={styles.checkboxGroup}>\n            <UiComponentTunnelExit\n              id=\"checkboxButtons\"\n              component=\"CheckboxGroup\"\n            />\n          </ColumnLayout>\n\n          <ColumnLayout\n            s={s ?? [1]}\n            m={m ?? [1]}\n            l={l ?? [1]}\n            rowGap=\"s\"\n            className={styles.checkboxGroup}\n          >\n            <UiComponentTunnelExit id=\"checkboxes\" component=\"CheckboxGroup\" />\n          </ColumnLayout>\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.CheckboxGroup>\n  );\n});\n\nexport default CheckboxGroup;\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,UAAU,WAAW,WAAW,GAAG,GAAG,GAAG,KAAK,GAAG,SAAS;CAElE,MAAM,EACJ,gBACA,mBACA,YACA,6BACE,kBAAkB,OAAO,eAAe;CAE5C,MAAM,eAA6B;EACjC,UAAU;GACR;GACA,WAAW,6BAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,gBAAgB;GACd;GACA,WAAW,6BAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,GAAG;CACL;CAEA,MAAM,YAAY,aAAa,GAAG;CAClC,iBAAiB,SAAS;CAE1B,OACE,qBAAC,KAAK,eAAN;EACE,GAAI;EACJ,GAAI;EACO;EACX,WAAW,KAAK,WAAW,WAAW,SAAS;EAC/C,KAAK;EALP,UAAA,CAOE,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACG;IAED,oBAAC,cAAD;KAAiB;KAAM;KAAM;KAAG,WAAW,6BAAO;KAChD,UAAA,oBAAC,uBAAD;MACE,IAAG;MACH,WAAU;KACX,CAAA;IACW,CAAA;IAEd,oBAAC,cAAD;KACE,GAAG,KAAK,CAAC,CAAC;KACV,GAAG,KAAK,CAAC,CAAC;KACV,GAAG,KAAK,CAAC,CAAC;KACV,QAAO;KACP,WAAW,6BAAO;KAElB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAa,WAAU;KAAiB,CAAA;IACtD,CAAA;GACM;EACE,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACC;;AAExB,CAAC"}
+{"version":3,"file":"CheckboxGroup.mjs","names":[],"sources":["../../../../../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\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 clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./CheckboxGroup.module.scss\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface CheckboxGroupProps\n  extends\n    PropsWithChildren<Omit<Aria.CheckboxGroupProps, \"children\">>,\n    Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\">,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const CheckboxGroup = flowComponent(\"CheckboxGroup\", (props) => {\n  const { children, className, isInvalid, s, m, l, ref, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props, \"CheckboxGroup\");\n\n  const propsContext: PropsContext = {\n    Checkbox: {\n      isInvalid,\n      className: styles.checkbox,\n      tunnel: {\n        id: \"checkboxes\",\n        component: \"CheckboxGroup\",\n      },\n    },\n    CheckboxButton: {\n      isInvalid,\n      className: styles.checkboxButton,\n      tunnel: {\n        id: \"checkboxButtons\",\n        component: \"CheckboxGroup\",\n      },\n    },\n    ...fieldPropsContext,\n  };\n\n  const objectRef = useObjectRef(ref);\n  useMakeFocusable(objectRef);\n\n  return (\n    <Aria.CheckboxGroup\n      {...rest}\n      {...controlProps}\n      isInvalid={isInvalid}\n      className={clsx(wrapperProps.className, className)}\n      ref={objectRef}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider props={propsContext}>\n          {children}\n\n          <ColumnLayout s={s} m={m} l={l} className={styles.checkboxGroup}>\n            <UiComponentTunnelExit\n              id=\"checkboxButtons\"\n              component=\"CheckboxGroup\"\n            />\n          </ColumnLayout>\n\n          <ColumnLayout\n            s={s ?? [1]}\n            m={m ?? [1]}\n            l={l ?? [1]}\n            rowGap=\"s\"\n            className={styles.checkboxGroup}\n          >\n            <UiComponentTunnelExit id=\"checkboxes\" component=\"CheckboxGroup\" />\n          </ColumnLayout>\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.CheckboxGroup>\n  );\n});\n\nexport default CheckboxGroup;\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,UAAU,WAAW,WAAW,GAAG,GAAG,GAAG,KAAK,GAAG,SAAS;CAElE,MAAM,EACJ,gBACA,mBACA,cACA,cACA,6BACE,kBAAkB,OAAO,eAAe;CAE5C,MAAM,eAA6B;EACjC,UAAU;GACR;GACA,WAAW,6BAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,gBAAgB;GACd;GACA,WAAW,6BAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,GAAG;CACL;CAEA,MAAM,YAAY,aAAa,GAAG;CAClC,iBAAiB,SAAS;CAE1B,OACE,qBAAC,KAAK,eAAN;EACE,GAAI;EACJ,GAAI;EACO;EACX,WAAW,KAAK,aAAa,WAAW,SAAS;EACjD,KAAK;EALP,UAAA,CAOE,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACG;IAED,oBAAC,cAAD;KAAiB;KAAM;KAAM;KAAG,WAAW,6BAAO;KAChD,UAAA,oBAAC,uBAAD;MACE,IAAG;MACH,WAAU;KACX,CAAA;IACW,CAAA;IAEd,oBAAC,cAAD;KACE,GAAG,KAAK,CAAC,CAAC;KACV,GAAG,KAAK,CAAC,CAAC;KACV,GAAG,KAAK,CAAC,CAAC;KACV,QAAO;KACP,WAAW,6BAAO;KAElB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAa,WAAU;KAAiB,CAAA;IACtD,CAAA;GACM;EACE,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACC;;AAExB,CAAC"}

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

@@ -3,7 +3,7 @@
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
-import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
+import { joinIds, useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { useMakeFocusable } from "../../lib/hooks/dom/useMakeFocusable.mjs";
 import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
 import CodeEditor_module_default from "./CodeEditor.module.mjs";
@@ -11,7 +11,7 @@ import { defaultLightTheme } from "./themes/defaultEditorTheme.mjs";
 import { useCodeEditorExtensions } from "./hooks/useCodeEditorExtensions.mjs";
 import { CopyButton } from "../CopyButton/CopyButton.mjs";
 import clsx from "clsx";
-import { useId } from "react";
+import { useCallback, useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useObjectRef } from "react-aria";
 import CodeMirror, { EditorView } from "@uiw/react-codemirror";
@@ -22,11 +22,25 @@ import CodeMirror, { EditorView } from "@uiw/react-codemirror";
 */
 var CodeEditor = flowComponent("CodeEditor", (props) => {
 	const { ref, children, className, language, extensions, isReadOnly, isInvalid, isRequired, validationBehavior: _ignoredValidationBehavior, value, showLineNumbers = true, showCodeFolding = true, showCodeIndentationMakers = true, showLinterMarkers = true, showActiveLineMarker = true, copyable = true, height, minHeight, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest } = useControlledHostValueProps(props, "");
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "CodeEditor");
-	const rootClassName = clsx(fieldProps.className, CodeEditor_module_default.codeEditor, className);
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "CodeEditor");
+	const rootClassName = clsx(wrapperProps.className, CodeEditor_module_default.codeEditor, className);
 	const labelId = useId();
 	const descriptionId = useId();
 	/**
+	* Both are optional. Their refs tell whether they are rendered, so the editor
+	* never references an element that does not exist – a dangling id fails HTML
+	* validators and a11y checks. The callbacks are stable: a new one per render
+	* would detach and re-attach on every render.
+	*/
+	const [hasLabel, setHasLabel] = useState(false);
+	const [hasDescription, setHasDescription] = useState(false);
+	const labelRef = useCallback((element) => {
+		setHasLabel(!!element);
+	}, []);
+	const descriptionRef = useCallback((element) => {
+		setHasDescription(!!element);
+	}, []);
+	/**
 	* The label and the field description are declared as children of the code
 	* editor, but must be rendered outside of the editor itself. They are
 	* tunneled out of the editor – just like the field error. Their ids are the
@@ -37,6 +51,7 @@ var CodeEditor = flowComponent("CodeEditor", (props) => {
 		Label: {
 			...fieldPropsContext.Label,
 			id: labelId,
+			ref: labelRef,
 			tunnel: {
 				id: "label",
 				component: "CodeEditor"
@@ -45,6 +60,7 @@ var CodeEditor = flowComponent("CodeEditor", (props) => {
 		FieldDescription: {
 			...fieldPropsContext.FieldDescription,
 			id: descriptionId,
+			ref: descriptionRef,
 			tunnel: {
 				id: "fieldDescription",
 				component: "CodeEditor"
@@ -62,14 +78,12 @@ var CodeEditor = flowComponent("CodeEditor", (props) => {
 	* root element the props are applied to. Its ARIA attributes are set through
 	* the content attributes facet.
 	*
-	* The label reference only resolves when a label is given. Without one, an
-	* `aria-label` names the editor instead – the name computation skips
-	* references that point at nothing.
+	* Without a label, an `aria-label` names the editor instead.
 	*/
-	const labelledBy = [ariaLabelledBy, labelId].filter(Boolean).join(" ");
-	const describedBy = [descriptionId, fieldProps["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+	const labelledBy = joinIds(ariaLabelledBy, hasLabel && labelId);
+	const describedBy = joinIds(hasDescription && descriptionId, controlProps["aria-describedby"]);
 	const contentAttributes = EditorView.contentAttributes.of({
-		"aria-labelledby": labelledBy,
+		...labelledBy ? { "aria-labelledby": labelledBy } : {},
 		...ariaLabel ? { "aria-label": ariaLabel } : {},
 		...describedBy ? { "aria-describedby": describedBy } : {},
 		...isRequired ? { "aria-required": "true" } : {},

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

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.mjs","names":[],"sources":["../../../../../../../src/components/CodeEditor/CodeEditor.tsx"],"sourcesContent":["import type { ReactCodeMirrorProps } from \"@uiw/react-codemirror\";\nimport CodeMirror, { EditorView } from \"@uiw/react-codemirror\";\nimport { useId } from \"react\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeEditor.module.scss\";\nimport { type CodeEditorLanguage } from \"@/components/CodeEditor/languages\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useObjectRef } from \"react-aria\";\nimport { defaultLightTheme } from \"@/components/CodeEditor/themes/defaultEditorTheme\";\nimport {\n  type CodeEditorSetup,\n  useCodeEditorExtensions,\n} from \"@/components/CodeEditor/hooks/useCodeEditorExtensions\";\nimport { CopyButton } from \"@/components/CopyButton\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface CodeEditorProps\n  extends\n    Omit<ReactCodeMirrorProps, \"theme\" | \"lang\" | \"basicSetup\" | \"readOnly\">,\n    CodeEditorSetup,\n    FlowComponentProps {\n  /** The initial code of an uncontrolled editor. */\n  defaultValue?: string;\n  /**\n   * Whether the code can be read but not edited.\n   *\n   * @default false\n   */\n  isReadOnly?: boolean;\n  /**\n   * Whether the editor is displayed as invalid.\n   *\n   * @default false\n   */\n  isInvalid?: boolean;\n  /** The elements class name. */\n  className?: string;\n  /** The language the code is highlighted as. */\n  language?: CodeEditorLanguage;\n  /**\n   * Whether a button to copy the code to the clipboard is shown.\n   *\n   * @default true\n   */\n  copyable?: boolean;\n  /**\n   * Whether the field must be filled in. Only marks the editor as required for\n   * assistive technology — the editor does not validate itself.\n   *\n   * @default false\n   */\n  isRequired?: boolean;\n  /**\n   * @internal Set by `<Field />` on every form field. The editor has no\n   * react-aria validation to forward it to and drops it.\n   */\n  validationBehavior?: unknown;\n}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const CodeEditor = flowComponent(\"CodeEditor\", (props) => {\n  const {\n    ref,\n    children,\n    className,\n    language,\n    extensions,\n    isReadOnly,\n    isInvalid,\n    isRequired,\n    validationBehavior: _ignoredValidationBehavior,\n    value,\n    showLineNumbers = true,\n    showCodeFolding = true,\n    showCodeIndentationMakers = true,\n    showLinterMarkers = true,\n    showActiveLineMarker = true,\n    copyable = true,\n    height,\n    minHeight,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...rest\n  } = useControlledHostValueProps(props, \"\");\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"CodeEditor\");\n\n  const rootClassName = clsx(\n    fieldProps.className,\n    styles.codeEditor,\n    className,\n  );\n\n  const labelId = useId();\n  const descriptionId = useId();\n\n  /**\n   * The label and the field description are declared as children of the code\n   * editor, but must be rendered outside of the editor itself. They are\n   * tunneled out of the editor – just like the field error. Their ids are the\n   * ones the editor references.\n   */\n  const propsContext: PropsContext = {\n    ...fieldPropsContext,\n    Label: {\n      ...fieldPropsContext.Label,\n      id: labelId,\n      tunnel: { id: \"label\", component: \"CodeEditor\" },\n    },\n    FieldDescription: {\n      ...fieldPropsContext.FieldDescription,\n      id: descriptionId,\n      tunnel: { id: \"fieldDescription\", component: \"CodeEditor\" },\n    },\n  };\n\n  const enabledExtensions = useCodeEditorExtensions(language, extensions, {\n    showLineNumbers: showLineNumbers,\n    showCodeIndentationMakers: showCodeIndentationMakers,\n    showCodeFolding: showCodeFolding,\n    showLinterMarkers: showLinterMarkers,\n  });\n\n  /**\n   * The editable element of CodeMirror is the `.cm-content` element – not the\n   * root element the props are applied to. Its ARIA attributes are set through\n   * the content attributes facet.\n   *\n   * The label reference only resolves when a label is given. Without one, an\n   * `aria-label` names the editor instead – the name computation skips\n   * references that point at nothing.\n   */\n  const labelledBy = [ariaLabelledBy, labelId].filter(Boolean).join(\" \");\n\n  const describedBy =\n    [descriptionId, fieldProps[\"aria-describedby\"]].filter(Boolean).join(\" \") ||\n    undefined;\n\n  const contentAttributes = EditorView.contentAttributes.of({\n    \"aria-labelledby\": labelledBy,\n    ...(ariaLabel ? { \"aria-label\": ariaLabel } : {}),\n    ...(describedBy ? { \"aria-describedby\": describedBy } : {}),\n    ...(isRequired ? { \"aria-required\": \"true\" } : {}),\n    ...(isInvalid ? { \"aria-invalid\": \"true\" } : {}),\n  });\n\n  const localRef = useObjectRef(ref);\n\n  useMakeFocusable(localRef);\n\n  return (\n    <div className={rootClassName}>\n      <PropsContextProvider props={propsContext}>\n        <UiComponentTunnelExit id=\"label\" component=\"CodeEditor\" />\n        <FieldErrorCaptureContext>\n          <CodeMirror\n            {...rest}\n            value={value}\n            basicSetup={{\n              highlightActiveLine: showActiveLineMarker,\n              highlightActiveLineGutter: showActiveLineMarker,\n              autocompletion: false,\n              lineNumbers: false,\n              foldGutter: false,\n              highlightSelectionMatches: false,\n            }}\n            theme={defaultLightTheme}\n            data-invalid={isInvalid || undefined}\n            readOnly={isReadOnly}\n            className={clsx(styles.codeMirror, isReadOnly && styles.readonly)}\n            ref={(codeMirrorRef) => {\n              if (codeMirrorRef?.editor) {\n                localRef.current = codeMirrorRef.editor;\n              }\n            }}\n            extensions={[...enabledExtensions, contentAttributes]}\n            height={height ?? minHeight}\n          >\n            {copyable && (\n              <CopyButton\n                className={styles.copyButton}\n                size=\"s\"\n                variant=\"soft\"\n                text={value}\n              />\n            )}\n            {children}\n          </CodeMirror>\n        </FieldErrorCaptureContext>\n        <UiComponentTunnelExit id=\"fieldDescription\" component=\"CodeEditor\" />\n        <FieldErrorView />\n      </PropsContextProvider>\n    </div>\n  );\n});\n\nexport default CodeEditor;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsEA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EACJ,KACA,UACA,WACA,UACA,YACA,YACA,WACA,YACA,oBAAoB,4BACpB,OACA,kBAAkB,MAClB,kBAAkB,MAClB,4BAA4B,MAC5B,oBAAoB,MACpB,uBAAuB,MACvB,WAAW,MACX,QACA,WACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,YAAY;CAEzC,MAAM,gBAAgB,KACpB,WAAW,WACX,0BAAO,YACP,SACF;CAEA,MAAM,UAAU,MAAM;CACtB,MAAM,gBAAgB,MAAM;;;;;;;CAQ5B,MAAM,eAA6B;EACjC,GAAG;EACH,OAAO;GACL,GAAG,kBAAkB;GACrB,IAAI;GACJ,QAAQ;IAAE,IAAI;IAAS,WAAW;GAAa;EACjD;EACA,kBAAkB;GAChB,GAAG,kBAAkB;GACrB,IAAI;GACJ,QAAQ;IAAE,IAAI;IAAoB,WAAW;GAAa;EAC5D;CACF;CAEA,MAAM,oBAAoB,wBAAwB,UAAU,YAAY;EACrD;EACU;EACV;EACE;CACrB,CAAC;;;;;;;;;;CAWD,MAAM,aAAa,CAAC,gBAAgB,OAAO,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAErE,MAAM,cACJ,CAAC,eAAe,WAAW,mBAAmB,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KACxE,KAAA;CAEF,MAAM,oBAAoB,WAAW,kBAAkB,GAAG;EACxD,mBAAmB;EACnB,GAAI,YAAY,EAAE,cAAc,UAAU,IAAI,CAAC;EAC/C,GAAI,cAAc,EAAE,oBAAoB,YAAY,IAAI,CAAC;EACzD,GAAI,aAAa,EAAE,iBAAiB,OAAO,IAAI,CAAC;EAChD,GAAI,YAAY,EAAE,gBAAgB,OAAO,IAAI,CAAC;CAChD,CAAC;CAED,MAAM,WAAW,aAAa,GAAG;CAEjC,iBAAiB,QAAQ;CAEzB,OACE,oBAAC,OAAD;EAAK,WAAW;EACd,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,oBAAC,uBAAD;KAAuB,IAAG;KAAQ,WAAU;IAAc,CAAA;IAC1D,oBAAC,0BAAD,EAAA,UACE,qBAAC,YAAD;KACE,GAAI;KACG;KACP,YAAY;MACV,qBAAqB;MACrB,2BAA2B;MAC3B,gBAAgB;MAChB,aAAa;MACb,YAAY;MACZ,2BAA2B;KAC7B;KACA,OAAO;KACP,gBAAc,aAAa,KAAA;KAC3B,UAAU;KACV,WAAW,KAAK,0BAAO,YAAY,cAAc,0BAAO,QAAQ;KAChE,MAAM,kBAAkB;MACtB,IAAI,eAAe,QACjB,SAAS,UAAU,cAAc;KAErC;KACA,YAAY,CAAC,GAAG,mBAAmB,iBAAiB;KACpD,QAAQ,UAAU;KArBpB,UAAA,CAuBG,YACC,oBAAC,YAAD;MACE,WAAW,0BAAO;MAClB,MAAK;MACL,SAAQ;MACR,MAAM;KACP,CAAA,GAEF,QACS;IACY,CAAA,EAAA,CAAA;IAC1B,oBAAC,uBAAD;KAAuB,IAAG;KAAmB,WAAU;IAAc,CAAA;IACrE,oBAAC,gBAAD,CAAiB,CAAA;GACG;;CACnB,CAAA;AAET,CAAC"}
+{"version":3,"file":"CodeEditor.mjs","names":[],"sources":["../../../../../../../src/components/CodeEditor/CodeEditor.tsx"],"sourcesContent":["import type { ReactCodeMirrorProps } from \"@uiw/react-codemirror\";\nimport CodeMirror, { EditorView } from \"@uiw/react-codemirror\";\nimport { useCallback, useId, useState } from \"react\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { joinIds, useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeEditor.module.scss\";\nimport { type CodeEditorLanguage } from \"@/components/CodeEditor/languages\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useObjectRef } from \"react-aria\";\nimport { defaultLightTheme } from \"@/components/CodeEditor/themes/defaultEditorTheme\";\nimport {\n  type CodeEditorSetup,\n  useCodeEditorExtensions,\n} from \"@/components/CodeEditor/hooks/useCodeEditorExtensions\";\nimport { CopyButton } from \"@/components/CopyButton\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface CodeEditorProps\n  extends\n    Omit<ReactCodeMirrorProps, \"theme\" | \"lang\" | \"basicSetup\" | \"readOnly\">,\n    CodeEditorSetup,\n    FlowComponentProps {\n  /** The initial code of an uncontrolled editor. */\n  defaultValue?: string;\n  /**\n   * Whether the code can be read but not edited.\n   *\n   * @default false\n   */\n  isReadOnly?: boolean;\n  /**\n   * Whether the editor is displayed as invalid.\n   *\n   * @default false\n   */\n  isInvalid?: boolean;\n  /** The elements class name. */\n  className?: string;\n  /** The language the code is highlighted as. */\n  language?: CodeEditorLanguage;\n  /**\n   * Whether a button to copy the code to the clipboard is shown.\n   *\n   * @default true\n   */\n  copyable?: boolean;\n  /**\n   * Whether the field must be filled in. Only marks the editor as required for\n   * assistive technology — the editor does not validate itself.\n   *\n   * @default false\n   */\n  isRequired?: boolean;\n  /**\n   * @internal Set by `<Field />` on every form field. The editor has no\n   * react-aria validation to forward it to and drops it.\n   */\n  validationBehavior?: unknown;\n}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const CodeEditor = flowComponent(\"CodeEditor\", (props) => {\n  const {\n    ref,\n    children,\n    className,\n    language,\n    extensions,\n    isReadOnly,\n    isInvalid,\n    isRequired,\n    validationBehavior: _ignoredValidationBehavior,\n    value,\n    showLineNumbers = true,\n    showCodeFolding = true,\n    showCodeIndentationMakers = true,\n    showLinterMarkers = true,\n    showActiveLineMarker = true,\n    copyable = true,\n    height,\n    minHeight,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...rest\n  } = useControlledHostValueProps(props, \"\");\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"CodeEditor\");\n\n  const rootClassName = clsx(\n    wrapperProps.className,\n    styles.codeEditor,\n    className,\n  );\n\n  const labelId = useId();\n  const descriptionId = useId();\n\n  /**\n   * Both are optional. Their refs tell whether they are rendered, so the editor\n   * never references an element that does not exist – a dangling id fails HTML\n   * validators and a11y checks. The callbacks are stable: a new one per render\n   * would detach and re-attach on every render.\n   */\n  const [hasLabel, setHasLabel] = useState(false);\n  const [hasDescription, setHasDescription] = useState(false);\n  const labelRef = useCallback((element: Element | null) => {\n    setHasLabel(!!element);\n  }, []);\n  const descriptionRef = useCallback((element: Element | null) => {\n    setHasDescription(!!element);\n  }, []);\n\n  /**\n   * The label and the field description are declared as children of the code\n   * editor, but must be rendered outside of the editor itself. They are\n   * tunneled out of the editor – just like the field error. Their ids are the\n   * ones the editor references.\n   */\n  const propsContext: PropsContext = {\n    ...fieldPropsContext,\n    Label: {\n      ...fieldPropsContext.Label,\n      id: labelId,\n      ref: labelRef,\n      tunnel: { id: \"label\", component: \"CodeEditor\" },\n    },\n    FieldDescription: {\n      ...fieldPropsContext.FieldDescription,\n      id: descriptionId,\n      ref: descriptionRef,\n      tunnel: { id: \"fieldDescription\", component: \"CodeEditor\" },\n    },\n  };\n\n  const enabledExtensions = useCodeEditorExtensions(language, extensions, {\n    showLineNumbers: showLineNumbers,\n    showCodeIndentationMakers: showCodeIndentationMakers,\n    showCodeFolding: showCodeFolding,\n    showLinterMarkers: showLinterMarkers,\n  });\n\n  /**\n   * The editable element of CodeMirror is the `.cm-content` element – not the\n   * root element the props are applied to. Its ARIA attributes are set through\n   * the content attributes facet.\n   *\n   * Without a label, an `aria-label` names the editor instead.\n   */\n  const labelledBy = joinIds(ariaLabelledBy, hasLabel && labelId);\n  const describedBy = joinIds(\n    hasDescription && descriptionId,\n    controlProps[\"aria-describedby\"],\n  );\n\n  const contentAttributes = EditorView.contentAttributes.of({\n    ...(labelledBy ? { \"aria-labelledby\": labelledBy } : {}),\n    ...(ariaLabel ? { \"aria-label\": ariaLabel } : {}),\n    ...(describedBy ? { \"aria-describedby\": describedBy } : {}),\n    ...(isRequired ? { \"aria-required\": \"true\" } : {}),\n    ...(isInvalid ? { \"aria-invalid\": \"true\" } : {}),\n  });\n\n  const localRef = useObjectRef(ref);\n\n  useMakeFocusable(localRef);\n\n  return (\n    <div className={rootClassName}>\n      <PropsContextProvider props={propsContext}>\n        <UiComponentTunnelExit id=\"label\" component=\"CodeEditor\" />\n        <FieldErrorCaptureContext>\n          <CodeMirror\n            {...rest}\n            value={value}\n            basicSetup={{\n              highlightActiveLine: showActiveLineMarker,\n              highlightActiveLineGutter: showActiveLineMarker,\n              autocompletion: false,\n              lineNumbers: false,\n              foldGutter: false,\n              highlightSelectionMatches: false,\n            }}\n            theme={defaultLightTheme}\n            data-invalid={isInvalid || undefined}\n            readOnly={isReadOnly}\n            className={clsx(styles.codeMirror, isReadOnly && styles.readonly)}\n            ref={(codeMirrorRef) => {\n              if (codeMirrorRef?.editor) {\n                localRef.current = codeMirrorRef.editor;\n              }\n            }}\n            extensions={[...enabledExtensions, contentAttributes]}\n            height={height ?? minHeight}\n          >\n            {copyable && (\n              <CopyButton\n                className={styles.copyButton}\n                size=\"s\"\n                variant=\"soft\"\n                text={value}\n              />\n            )}\n            {children}\n          </CodeMirror>\n        </FieldErrorCaptureContext>\n        <UiComponentTunnelExit id=\"fieldDescription\" component=\"CodeEditor\" />\n        <FieldErrorView />\n      </PropsContextProvider>\n    </div>\n  );\n});\n\nexport default CodeEditor;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsEA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EACJ,KACA,UACA,WACA,UACA,YACA,YACA,WACA,YACA,oBAAoB,4BACpB,OACA,kBAAkB,MAClB,kBAAkB,MAClB,4BAA4B,MAC5B,oBAAoB,MACpB,uBAAuB,MACvB,WAAW,MACX,QACA,WACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,YAAY;CAEzC,MAAM,gBAAgB,KACpB,aAAa,WACb,0BAAO,YACP,SACF;CAEA,MAAM,UAAU,MAAM;CACtB,MAAM,gBAAgB,MAAM;;;;;;;CAQ5B,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,KAAK;CAC1D,MAAM,WAAW,aAAa,YAA4B;EACxD,YAAY,CAAC,CAAC,OAAO;CACvB,GAAG,CAAC,CAAC;CACL,MAAM,iBAAiB,aAAa,YAA4B;EAC9D,kBAAkB,CAAC,CAAC,OAAO;CAC7B,GAAG,CAAC,CAAC;;;;;;;CAQL,MAAM,eAA6B;EACjC,GAAG;EACH,OAAO;GACL,GAAG,kBAAkB;GACrB,IAAI;GACJ,KAAK;GACL,QAAQ;IAAE,IAAI;IAAS,WAAW;GAAa;EACjD;EACA,kBAAkB;GAChB,GAAG,kBAAkB;GACrB,IAAI;GACJ,KAAK;GACL,QAAQ;IAAE,IAAI;IAAoB,WAAW;GAAa;EAC5D;CACF;CAEA,MAAM,oBAAoB,wBAAwB,UAAU,YAAY;EACrD;EACU;EACV;EACE;CACrB,CAAC;;;;;;;;CASD,MAAM,aAAa,QAAQ,gBAAgB,YAAY,OAAO;CAC9D,MAAM,cAAc,QAClB,kBAAkB,eAClB,aAAa,mBACf;CAEA,MAAM,oBAAoB,WAAW,kBAAkB,GAAG;EACxD,GAAI,aAAa,EAAE,mBAAmB,WAAW,IAAI,CAAC;EACtD,GAAI,YAAY,EAAE,cAAc,UAAU,IAAI,CAAC;EAC/C,GAAI,cAAc,EAAE,oBAAoB,YAAY,IAAI,CAAC;EACzD,GAAI,aAAa,EAAE,iBAAiB,OAAO,IAAI,CAAC;EAChD,GAAI,YAAY,EAAE,gBAAgB,OAAO,IAAI,CAAC;CAChD,CAAC;CAED,MAAM,WAAW,aAAa,GAAG;CAEjC,iBAAiB,QAAQ;CAEzB,OACE,oBAAC,OAAD;EAAK,WAAW;EACd,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,oBAAC,uBAAD;KAAuB,IAAG;KAAQ,WAAU;IAAc,CAAA;IAC1D,oBAAC,0BAAD,EAAA,UACE,qBAAC,YAAD;KACE,GAAI;KACG;KACP,YAAY;MACV,qBAAqB;MACrB,2BAA2B;MAC3B,gBAAgB;MAChB,aAAa;MACb,YAAY;MACZ,2BAA2B;KAC7B;KACA,OAAO;KACP,gBAAc,aAAa,KAAA;KAC3B,UAAU;KACV,WAAW,KAAK,0BAAO,YAAY,cAAc,0BAAO,QAAQ;KAChE,MAAM,kBAAkB;MACtB,IAAI,eAAe,QACjB,SAAS,UAAU,cAAc;KAErC;KACA,YAAY,CAAC,GAAG,mBAAmB,iBAAiB;KACpD,QAAQ,UAAU;KArBpB,UAAA,CAuBG,YACC,oBAAC,YAAD;MACE,WAAW,0BAAO;MAClB,MAAK;MACL,SAAQ;MACR,MAAM;KACP,CAAA,GAEF,QACS;IACY,CAAA,EAAA,CAAA;IAC1B,oBAAC,uBAAD;KAAuB,IAAG;KAAmB,WAAU;IAAc,CAAA;IACrE,oBAAC,gBAAD,CAAiB,CAAA;GACG;;CACnB,CAAA;AAET,CAAC"}

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

@@ -20,9 +20,9 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var ComboBox = flowComponent("ComboBox", (props) => {
 	const { children, className, menuTrigger = "focus", onChange, onSelectionChange, placeholder, ref, renderEmptyState, ...rest } = props;
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "ComboBox");
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "ComboBox");
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "ComboBox");
-	const rootClassName = clsx(fieldProps.className, ComboBox_module_default.comboBox, className);
+	const rootClassName = clsx(wrapperProps.className, ComboBox_module_default.comboBox, className);
 	const propsContext = {
 		Option: { tunnel: getOptionsTunnelProps("ComboBox") },
 		...fieldPropsContext
@@ -34,10 +34,10 @@ var ComboBox = flowComponent("ComboBox", (props) => {
 	};
 	const controller = useOverlayController("ComboBox", { reuseControllerFromContext: false });
 	return /* @__PURE__ */ jsx(Aria.ComboBox, {
-		...fieldProps,
 		menuTrigger,
 		className: rootClassName,
 		...rest,
+		...controlProps,
 		onSelectionChange: handleSelectionChange,
 		onOpenChange: (isOpen) => {
 			controller.setOpen(isOpen);

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.mjs","names":[],"sources":["../../../../../../../src/components/ComboBox/ComboBox.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Options } from \"@/components/Options\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./ComboBox.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { getOptionsTunnelProps } from \"@/components/Option/optionsTunnel\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport type { OptionsProps } from \"@/components/Options/Options\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface ComboBoxProps\n  extends\n    Omit<Aria.ComboBoxProps<never>, \"children\" | \"onChange\">,\n    Pick<Aria.InputProps, \"placeholder\">,\n    Pick<OptionsProps, \"renderEmptyState\">,\n    PropsWithChildren,\n    FlowComponentProps<HTMLInputElement> {\n  /** Called with the key of the selected option whenever the selection changes. */\n  onChange?: (value: string) => void;\n}\n\n/** @flr-generate all */\nexport const ComboBox = flowComponent(\"ComboBox\", (props) => {\n  const {\n    children,\n    className,\n    menuTrigger = \"focus\",\n    onChange,\n    onSelectionChange,\n    placeholder,\n    ref,\n    renderEmptyState,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"ComboBox\");\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"ComboBox\");\n\n  const rootClassName = clsx(fieldProps.className, styles.comboBox, className);\n\n  const propsContext: PropsContext = {\n    Option: {\n      tunnel: getOptionsTunnelProps(\"ComboBox\"),\n    },\n    ...fieldPropsContext,\n  };\n\n  const handleSelectionChange = (key: Key | null) => {\n    if (key === null) {\n      return;\n    }\n    onChange?.(String(key));\n    onSelectionChange?.(key);\n  };\n\n  const controller = useOverlayController(\"ComboBox\", {\n    reuseControllerFromContext: false,\n  });\n\n  return (\n    <Aria.ComboBox\n      {...fieldProps}\n      menuTrigger={menuTrigger}\n      className={rootClassName}\n      {...rest}\n      onSelectionChange={handleSelectionChange}\n      onOpenChange={(isOpen) => {\n        controller.setOpen(isOpen);\n      }}\n    >\n      <PropsContextProvider props={propsContext}>\n        <FieldErrorCaptureContext>\n          <div className={styles.input}>\n            <Aria.Input placeholder={placeholder} ref={ref} />\n            <Button\n              className={styles.toggle}\n              aria-label={stringFormatter.format(\"showOptions\")}\n              variant=\"plain\"\n              color=\"secondary\"\n            >\n              <IconChevronDown />\n            </Button>\n          </div>\n\n          {children}\n\n          <Options\n            controller={controller}\n            onOpenChange={() => {\n              // cut-off to avoid double controller state changes\n            }}\n            renderEmptyState={renderEmptyState}\n          >\n            <UiComponentTunnelExit id=\"options\" component=\"ComboBox\" />\n          </Options>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n    </Aria.ComboBox>\n  );\n});\n\nexport default ComboBox;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAgCA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EACJ,UACA,WACA,cAAc,SACd,UACA,mBACA,aACA,KACA,kBACA,GAAG,SACD;CAEJ,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,UAAU;CAEvC,MAAM,kBAAkB,4BAA4B,kBAAS,UAAU;CAEvE,MAAM,gBAAgB,KAAK,WAAW,WAAW,wBAAO,UAAU,SAAS;CAE3E,MAAM,eAA6B;EACjC,QAAQ,EACN,QAAQ,sBAAsB,UAAU,EAC1C;EACA,GAAG;CACL;CAEA,MAAM,yBAAyB,QAAoB;EACjD,IAAI,QAAQ,MACV;EAEF,WAAW,OAAO,GAAG,CAAC;EACtB,oBAAoB,GAAG;CACzB;CAEA,MAAM,aAAa,qBAAqB,YAAY,EAClD,4BAA4B,MAC9B,CAAC;CAED,OACE,oBAAC,KAAK,UAAN;EACE,GAAI;EACS;EACb,WAAW;EACX,GAAI;EACJ,mBAAmB;EACnB,eAAe,WAAW;GACxB,WAAW,QAAQ,MAAM;EAC3B;EAEA,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,qBAAC,0BAAD,EAAA,UAAA;IACE,qBAAC,OAAD;KAAK,WAAW,wBAAO;KAAvB,UAAA,CACE,oBAAC,KAAK,OAAN;MAAyB;MAAkB;KAAM,CAAA,GACjD,oBAAC,QAAD;MACE,WAAW,wBAAO;MAClB,cAAY,gBAAgB,OAAO,aAAa;MAChD,SAAQ;MACR,OAAM;MAEN,UAAA,oBAAC,iBAAD,CAAkB,CAAA;KACZ,CAAA,CACL;;IAEJ;IAED,oBAAC,SAAD;KACc;KACZ,oBAAoB,CAEpB;KACkB;KAElB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAU,WAAU;KAAY,CAAA;IACnD,CAAA;GACe,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACG;;CACT,CAAA;AAEnB,CAAC"}
+{"version":3,"file":"ComboBox.mjs","names":[],"sources":["../../../../../../../src/components/ComboBox/ComboBox.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Options } from \"@/components/Options\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./ComboBox.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { getOptionsTunnelProps } from \"@/components/Option/optionsTunnel\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport type { OptionsProps } from \"@/components/Options/Options\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface ComboBoxProps\n  extends\n    Omit<Aria.ComboBoxProps<never>, \"children\" | \"onChange\">,\n    Pick<Aria.InputProps, \"placeholder\">,\n    Pick<OptionsProps, \"renderEmptyState\">,\n    PropsWithChildren,\n    FlowComponentProps<HTMLInputElement> {\n  /** Called with the key of the selected option whenever the selection changes. */\n  onChange?: (value: string) => void;\n}\n\n/** @flr-generate all */\nexport const ComboBox = flowComponent(\"ComboBox\", (props) => {\n  const {\n    children,\n    className,\n    menuTrigger = \"focus\",\n    onChange,\n    onSelectionChange,\n    placeholder,\n    ref,\n    renderEmptyState,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"ComboBox\");\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"ComboBox\");\n\n  const rootClassName = clsx(\n    wrapperProps.className,\n    styles.comboBox,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Option: {\n      tunnel: getOptionsTunnelProps(\"ComboBox\"),\n    },\n    ...fieldPropsContext,\n  };\n\n  const handleSelectionChange = (key: Key | null) => {\n    if (key === null) {\n      return;\n    }\n    onChange?.(String(key));\n    onSelectionChange?.(key);\n  };\n\n  const controller = useOverlayController(\"ComboBox\", {\n    reuseControllerFromContext: false,\n  });\n\n  return (\n    <Aria.ComboBox\n      menuTrigger={menuTrigger}\n      className={rootClassName}\n      {...rest}\n      {...controlProps}\n      onSelectionChange={handleSelectionChange}\n      onOpenChange={(isOpen) => {\n        controller.setOpen(isOpen);\n      }}\n    >\n      <PropsContextProvider props={propsContext}>\n        <FieldErrorCaptureContext>\n          <div className={styles.input}>\n            <Aria.Input placeholder={placeholder} ref={ref} />\n            <Button\n              className={styles.toggle}\n              aria-label={stringFormatter.format(\"showOptions\")}\n              variant=\"plain\"\n              color=\"secondary\"\n            >\n              <IconChevronDown />\n            </Button>\n          </div>\n\n          {children}\n\n          <Options\n            controller={controller}\n            onOpenChange={() => {\n              // cut-off to avoid double controller state changes\n            }}\n            renderEmptyState={renderEmptyState}\n          >\n            <UiComponentTunnelExit id=\"options\" component=\"ComboBox\" />\n          </Options>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n    </Aria.ComboBox>\n  );\n});\n\nexport default ComboBox;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAgCA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EACJ,UACA,WACA,cAAc,SACd,UACA,mBACA,aACA,KACA,kBACA,GAAG,SACD;CAEJ,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,UAAU;CAEvC,MAAM,kBAAkB,4BAA4B,kBAAS,UAAU;CAEvE,MAAM,gBAAgB,KACpB,aAAa,WACb,wBAAO,UACP,SACF;CAEA,MAAM,eAA6B;EACjC,QAAQ,EACN,QAAQ,sBAAsB,UAAU,EAC1C;EACA,GAAG;CACL;CAEA,MAAM,yBAAyB,QAAoB;EACjD,IAAI,QAAQ,MACV;EAEF,WAAW,OAAO,GAAG,CAAC;EACtB,oBAAoB,GAAG;CACzB;CAEA,MAAM,aAAa,qBAAqB,YAAY,EAClD,4BAA4B,MAC9B,CAAC;CAED,OACE,oBAAC,KAAK,UAAN;EACe;EACb,WAAW;EACX,GAAI;EACJ,GAAI;EACJ,mBAAmB;EACnB,eAAe,WAAW;GACxB,WAAW,QAAQ,MAAM;EAC3B;EAEA,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,qBAAC,0BAAD,EAAA,UAAA;IACE,qBAAC,OAAD;KAAK,WAAW,wBAAO;KAAvB,UAAA,CACE,oBAAC,KAAK,OAAN;MAAyB;MAAkB;KAAM,CAAA,GACjD,oBAAC,QAAD;MACE,WAAW,wBAAO;MAClB,cAAY,gBAAgB,OAAO,aAAa;MAChD,SAAQ;MACR,OAAM;MAEN,UAAA,oBAAC,iBAAD,CAAkB,CAAA;KACZ,CAAA,CACL;;IAEJ;IAED,oBAAC,SAAD;KACc;KACZ,oBAAoB,CAEpB;KACkB;KAElB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAU,WAAU;KAAY,CAAA;IACnD,CAAA;GACe,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACG;;CACT,CAAA;AAEnB,CAAC"}

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

@@ -17,11 +17,11 @@ import * as Aria from "react-aria-components";
 var DatePicker = flowComponent("DatePicker", (props) => {
 	const { children, className, onChange, ref, ...rest } = props;
 	const popoverController = useOverlayController("Popover");
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "DatePicker");
-	const rootClassName = clsx(fieldProps.className, className);
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "DatePicker");
+	const rootClassName = clsx(wrapperProps.className, className);
 	return /* @__PURE__ */ jsxs(Aria.DatePicker, {
 		...rest,
-		...fieldProps,
+		...controlProps,
 		className: rootClassName,
 		onOpenChange: (v) => popoverController.setOpen(v),
 		isOpen: popoverController.isOpen,

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.mjs","names":[],"sources":["../../../../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { DateInput } from \"./components/DateInput\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { Calendar } from \"@/components/Calendar\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./DatePicker.module.scss\";\n\nexport interface DatePickerProps<T extends Aria.DateValue = Aria.DateValue>\n  extends\n    PropsWithChildren<Omit<Aria.DatePickerProps<T>, \"children\" | \"ref\">>,\n    FlowComponentProps<HTMLSpanElement> {}\n\n/** @flr-generate all */\nexport const DatePicker = flowComponent(\"DatePicker\", (props) => {\n  const { children, className, onChange, ref, ...rest } = props;\n\n  const popoverController = useOverlayController(\"Popover\");\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"DatePicker\");\n\n  const rootClassName = clsx(fieldProps.className, className);\n\n  return (\n    <Aria.DatePicker\n      {...rest}\n      {...fieldProps}\n      className={rootClassName}\n      onOpenChange={(v) => popoverController.setOpen(v)}\n      isOpen={popoverController.isOpen}\n      onChange={(value) => {\n        if (onChange) {\n          onChange(value);\n        }\n        popoverController.close();\n      }}\n    >\n      <FieldErrorCaptureContext>\n        <DateInput isDisabled={props.isDisabled} ref={ref} />\n        <PropsContextProvider props={fieldPropsContext}>\n          {children}\n        </PropsContextProvider>\n        <Popover\n          placement=\"bottom end\"\n          isDialogContent\n          controller={popoverController}\n        >\n          <Calendar className={styles.calendar} />\n        </Popover>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.DatePicker>\n  );\n});\n\nexport default DatePicker;\n"],"mappings":";;;;;;;;;;;;;;;;AAqBA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,UAAU,WAAW,UAAU,KAAK,GAAG,SAAS;CAExD,MAAM,oBAAoB,qBAAqB,SAAS;CACxD,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,YAAY;CAEzC,MAAM,gBAAgB,KAAK,WAAW,WAAW,SAAS;CAE1D,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,GAAI;EACJ,WAAW;EACX,eAAe,MAAM,kBAAkB,QAAQ,CAAC;EAChD,QAAQ,kBAAkB;EAC1B,WAAW,UAAU;GACnB,IAAI,UACF,SAAS,KAAK;GAEhB,kBAAkB,MAAM;EAC1B;EAXF,UAAA,CAaE,qBAAC,0BAAD,EAAA,UAAA;GACE,oBAAC,WAAD;IAAW,YAAY,MAAM;IAAiB;GAAM,CAAA;GACpD,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;GACtB,oBAAC,SAAD;IACE,WAAU;IACV,iBAAA;IACA,YAAY;IAEZ,UAAA,oBAAC,UAAD,EAAU,WAAW,0BAAO,SAAW,CAAA;GAChC,CAAA;EACe,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}
+{"version":3,"file":"DatePicker.mjs","names":[],"sources":["../../../../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { DateInput } from \"./components/DateInput\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { Calendar } from \"@/components/Calendar\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./DatePicker.module.scss\";\n\nexport interface DatePickerProps<T extends Aria.DateValue = Aria.DateValue>\n  extends\n    PropsWithChildren<Omit<Aria.DatePickerProps<T>, \"children\" | \"ref\">>,\n    FlowComponentProps<HTMLSpanElement> {}\n\n/** @flr-generate all */\nexport const DatePicker = flowComponent(\"DatePicker\", (props) => {\n  const { children, className, onChange, ref, ...rest } = props;\n\n  const popoverController = useOverlayController(\"Popover\");\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"DatePicker\");\n\n  const rootClassName = clsx(wrapperProps.className, className);\n\n  return (\n    <Aria.DatePicker\n      {...rest}\n      {...controlProps}\n      className={rootClassName}\n      onOpenChange={(v) => popoverController.setOpen(v)}\n      isOpen={popoverController.isOpen}\n      onChange={(value) => {\n        if (onChange) {\n          onChange(value);\n        }\n        popoverController.close();\n      }}\n    >\n      <FieldErrorCaptureContext>\n        <DateInput isDisabled={props.isDisabled} ref={ref} />\n        <PropsContextProvider props={fieldPropsContext}>\n          {children}\n        </PropsContextProvider>\n        <Popover\n          placement=\"bottom end\"\n          isDialogContent\n          controller={popoverController}\n        >\n          <Calendar className={styles.calendar} />\n        </Popover>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.DatePicker>\n  );\n});\n\nexport default DatePicker;\n"],"mappings":";;;;;;;;;;;;;;;;AAqBA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,UAAU,WAAW,UAAU,KAAK,GAAG,SAAS;CAExD,MAAM,oBAAoB,qBAAqB,SAAS;CACxD,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,YAAY;CAEzC,MAAM,gBAAgB,KAAK,aAAa,WAAW,SAAS;CAE5D,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,GAAI;EACJ,WAAW;EACX,eAAe,MAAM,kBAAkB,QAAQ,CAAC;EAChD,QAAQ,kBAAkB;EAC1B,WAAW,UAAU;GACnB,IAAI,UACF,SAAS,KAAK;GAEhB,kBAAkB,MAAM;EAC1B;EAXF,UAAA,CAaE,qBAAC,0BAAD,EAAA,UAAA;GACE,oBAAC,WAAD;IAAW,YAAY,MAAM;IAAiB;GAAM,CAAA;GACpD,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;GACtB,oBAAC,SAAD;IACE,WAAU;IACV,iBAAA;IACA,YAAY;IAEZ,UAAA,oBAAC,UAAD,EAAU,WAAW,0BAAO,SAAW,CAAA;GAChC,CAAA;EACe,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}

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

@@ -17,14 +17,15 @@ import * as Aria from "react-aria-components";
 var DateRangePicker = flowComponent("DateRangePicker", (props) => {
 	const { children, className, onChange, ref, withDatePickerPresets = false, ...rest } = useControlledHostValueProps(props, null);
 	const popoverController = useOverlayController("Popover");
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "DateRangePicker");
-	const rootClassName = clsx(fieldProps.className, className);
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "DateRangePicker");
+	const rootClassName = clsx(wrapperProps.className, className);
 	const onDatePickerChange = (value) => {
 		if (onChange) onChange(value);
 		popoverController.close();
 	};
 	return /* @__PURE__ */ jsxs(Aria.DateRangePicker, {
 		...rest,
+		"aria-describedby": controlProps["aria-describedby"],
 		className: rootClassName,
 		onOpenChange: (v) => popoverController.setOpen(v),
 		isOpen: popoverController.isOpen,

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.mjs","names":[],"sources":["../../../../../../../src/components/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { Popover } from \"@/components/Popover\";\nimport { type DateRangePresets, RangeCalendar } from \"@/components/Calendar\";\nimport { DateRangeInput } from \"./components/DateRangeInput\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport type { RangeValue } from \"react-aria\";\nimport type { DateValue } from \"@internationalized/date\";\nimport styles from \"./DateRangePicker.module.scss\";\n\nexport interface DateRangePickerProps<T extends Aria.DateValue = Aria.DateValue>\n  extends\n    PropsWithChildren<Omit<Aria.DateRangePickerProps<T>, \"children\" | \"ref\">>,\n    FlowComponentProps<HTMLSpanElement> {\n  /**\n   * Whether the calendar offers presets to pick a range with one click. Pass an\n   * array to replace the built-in presets with your own.\n   *\n   * @default false\n   */\n  withDatePickerPresets?: boolean | DateRangePresets;\n}\n\n/** @flr-generate all */\nexport const DateRangePicker = flowComponent(\"DateRangePicker\", (props) => {\n  // `null` is what react-aria's date range picker state uses for \"no range\"\n  const {\n    children,\n    className,\n    onChange,\n    ref,\n    withDatePickerPresets = false,\n    ...rest\n  } = useControlledHostValueProps(props, null);\n\n  const popoverController = useOverlayController(\"Popover\");\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"DateRangePicker\");\n\n  const rootClassName = clsx(fieldProps.className, className);\n\n  const onDatePickerChange = (value: RangeValue<DateValue> | null) => {\n    if (onChange) {\n      onChange(value);\n    }\n    popoverController.close();\n  };\n\n  return (\n    <Aria.DateRangePicker\n      {...rest}\n      className={rootClassName}\n      onOpenChange={(v) => popoverController.setOpen(v)}\n      isOpen={popoverController.isOpen}\n      onChange={onDatePickerChange}\n    >\n      <FieldErrorCaptureContext>\n        <DateRangeInput isDisabled={props.isDisabled} ref={ref} />\n        <PropsContextProvider props={fieldPropsContext}>\n          {children}\n        </PropsContextProvider>\n        <Popover\n          placement=\"bottom end\"\n          isDialogContent\n          controller={popoverController}\n        >\n          <RangeCalendar\n            withDatePickerPresets={withDatePickerPresets}\n            className={styles.calendar}\n          />\n        </Popover>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.DateRangePicker>\n  );\n});\n\nexport default DateRangePicker;\n"],"mappings":";;;;;;;;;;;;;;;;AAgCA,IAAa,kBAAkB,cAAc,oBAAoB,UAAU;CAEzE,MAAM,EACJ,UACA,WACA,UACA,KACA,wBAAwB,OACxB,GAAG,SACD,4BAA4B,OAAO,IAAI;CAE3C,MAAM,oBAAoB,qBAAqB,SAAS;CACxD,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,iBAAiB;CAE9C,MAAM,gBAAgB,KAAK,WAAW,WAAW,SAAS;CAE1D,MAAM,sBAAsB,UAAwC;EAClE,IAAI,UACF,SAAS,KAAK;EAEhB,kBAAkB,MAAM;CAC1B;CAEA,OACE,qBAAC,KAAK,iBAAN;EACE,GAAI;EACJ,WAAW;EACX,eAAe,MAAM,kBAAkB,QAAQ,CAAC;EAChD,QAAQ,kBAAkB;EAC1B,UAAU;EALZ,UAAA,CAOE,qBAAC,0BAAD,EAAA,UAAA;GACE,oBAAC,gBAAD;IAAgB,YAAY,MAAM;IAAiB;GAAM,CAAA;GACzD,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;GACtB,oBAAC,SAAD;IACE,WAAU;IACV,iBAAA;IACA,YAAY;IAEZ,UAAA,oBAAC,eAAD;KACyB;KACvB,WAAW,+BAAO;IACnB,CAAA;GACM,CAAA;EACe,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACG;;AAE1B,CAAC"}
+{"version":3,"file":"DateRangePicker.mjs","names":[],"sources":["../../../../../../../src/components/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { Popover } from \"@/components/Popover\";\nimport { type DateRangePresets, RangeCalendar } from \"@/components/Calendar\";\nimport { DateRangeInput } from \"./components/DateRangeInput\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport type { RangeValue } from \"react-aria\";\nimport type { DateValue } from \"@internationalized/date\";\nimport styles from \"./DateRangePicker.module.scss\";\n\nexport interface DateRangePickerProps<T extends Aria.DateValue = Aria.DateValue>\n  extends\n    PropsWithChildren<Omit<Aria.DateRangePickerProps<T>, \"children\" | \"ref\">>,\n    FlowComponentProps<HTMLSpanElement> {\n  /**\n   * Whether the calendar offers presets to pick a range with one click. Pass an\n   * array to replace the built-in presets with your own.\n   *\n   * @default false\n   */\n  withDatePickerPresets?: boolean | DateRangePresets;\n}\n\n/** @flr-generate all */\nexport const DateRangePicker = flowComponent(\"DateRangePicker\", (props) => {\n  // `null` is what react-aria's date range picker state uses for \"no range\"\n  const {\n    children,\n    className,\n    onChange,\n    ref,\n    withDatePickerPresets = false,\n    ...rest\n  } = useControlledHostValueProps(props, null);\n\n  const popoverController = useOverlayController(\"Popover\");\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"DateRangePicker\");\n\n  const rootClassName = clsx(wrapperProps.className, className);\n\n  const onDatePickerChange = (value: RangeValue<DateValue> | null) => {\n    if (onChange) {\n      onChange(value);\n    }\n    popoverController.close();\n  };\n\n  return (\n    <Aria.DateRangePicker\n      {...rest}\n      aria-describedby={controlProps[\"aria-describedby\"]}\n      className={rootClassName}\n      onOpenChange={(v) => popoverController.setOpen(v)}\n      isOpen={popoverController.isOpen}\n      onChange={onDatePickerChange}\n    >\n      <FieldErrorCaptureContext>\n        <DateRangeInput isDisabled={props.isDisabled} ref={ref} />\n        <PropsContextProvider props={fieldPropsContext}>\n          {children}\n        </PropsContextProvider>\n        <Popover\n          placement=\"bottom end\"\n          isDialogContent\n          controller={popoverController}\n        >\n          <RangeCalendar\n            withDatePickerPresets={withDatePickerPresets}\n            className={styles.calendar}\n          />\n        </Popover>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.DateRangePicker>\n  );\n});\n\nexport default DateRangePicker;\n"],"mappings":";;;;;;;;;;;;;;;;AAgCA,IAAa,kBAAkB,cAAc,oBAAoB,UAAU;CAEzE,MAAM,EACJ,UACA,WACA,UACA,KACA,wBAAwB,OACxB,GAAG,SACD,4BAA4B,OAAO,IAAI;CAE3C,MAAM,oBAAoB,qBAAqB,SAAS;CACxD,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,iBAAiB;CAE9C,MAAM,gBAAgB,KAAK,aAAa,WAAW,SAAS;CAE5D,MAAM,sBAAsB,UAAwC;EAClE,IAAI,UACF,SAAS,KAAK;EAEhB,kBAAkB,MAAM;CAC1B;CAEA,OACE,qBAAC,KAAK,iBAAN;EACE,GAAI;EACJ,oBAAkB,aAAa;EAC/B,WAAW;EACX,eAAe,MAAM,kBAAkB,QAAQ,CAAC;EAChD,QAAQ,kBAAkB;EAC1B,UAAU;EANZ,UAAA,CAQE,qBAAC,0BAAD,EAAA,UAAA;GACE,oBAAC,gBAAD;IAAgB,YAAY,MAAM;IAAiB;GAAM,CAAA;GACzD,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;GACtB,oBAAC,SAAD;IACE,WAAU;IACV,iBAAA;IACA,YAAY;IAEZ,UAAA,oBAAC,eAAD;KACyB;KACvB,WAAW,+BAAO;IACnB,CAAA;GACM,CAAA;EACe,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACG;;AAE1B,CAAC"}

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

@@ -3,52 +3,61 @@
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { Alert } from "../Alert/Alert.mjs";
 import { AlertText } from "../AlertText/AlertText.mjs";
+import { FieldErrorRenderedContext } from "../../lib/hooks/fieldErrorRenderedContext.mjs";
 import { Heading } from "../Heading/Heading.mjs";
 import FieldError_module_default from "./FieldError.module.mjs";
 import clsx from "clsx";
-import React, { useContext, useMemo } from "react";
+import React, { useContext, useLayoutEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
 import { FieldErrorContext, TextContext } from "react-aria-components";
+import { useObjectRef } from "react-aria";
 //#region src/components/FieldError/FieldError.tsx
 /** @flr-generate all */
 var FieldError = flowComponent("FieldError", (props) => {
 	const { children, className, ref, renderAlert, ...rest } = props;
 	const rootClassName = clsx(FieldError_module_default.fieldError, className);
-	const fieldErrorFromAriaContext = useContext(FieldErrorContext);
-	const isInvalidFromChildren = React.Children.count(children) >= 1;
-	const mergedErrorState = useMemo(() => {
-		const errors = fieldErrorFromAriaContext?.validationErrors ?? [];
-		if (isInvalidFromChildren) errors.push(children);
-		const isInvalid = !!(isInvalidFromChildren || fieldErrorFromAriaContext?.isInvalid);
-		const lastError = errors.length >= 1 ? errors[errors.length - 1] : void 0;
-		return {
-			isInvalid,
-			validationDetails: {
-				valid: !isInvalid,
-				badInput: false,
-				customError: isInvalid,
-				patternMismatch: false,
-				rangeOverflow: false,
-				rangeUnderflow: false,
-				stepMismatch: false,
-				tooLong: false,
-				tooShort: false,
-				valueMissing: false,
-				typeMismatch: false,
-				...fieldErrorFromAriaContext?.validationDetails
-			},
-			...fieldErrorFromAriaContext,
-			validationErrors: lastError ? [lastError] : []
-		};
-	}, [fieldErrorFromAriaContext, children]);
-	if (!mergedErrorState.isInvalid) return;
+	const fieldValidation = useContext(FieldErrorContext);
+	const reportRendered = useContext(FieldErrorRenderedContext);
+	const hasChildren = React.Children.count(children) >= 1;
+	const isInvalid = fieldValidation ? fieldValidation.isInvalid : hasChildren;
+	const message = hasChildren ? children : fieldValidation?.validationErrors.at(-1);
+	const errorState = {
+		isInvalid,
+		validationDetails: fieldValidation?.validationDetails ?? {
+			badInput: false,
+			customError: isInvalid,
+			patternMismatch: false,
+			rangeOverflow: false,
+			rangeUnderflow: false,
+			stepMismatch: false,
+			tooLong: false,
+			tooShort: false,
+			typeMismatch: false,
+			valid: !isInvalid,
+			valueMissing: false
+		},
+		validationErrors: message ? [message] : []
+	};
+	const localRef = useObjectRef(ref);
+	useLayoutEffect(() => {
+		const element = localRef.current;
+		if (!reportRendered || !isInvalid || !element?.isConnected || !element.id) return;
+		reportRendered(element.id);
+		return () => reportRendered(void 0);
+	}, [
+		reportRendered,
+		isInvalid,
+		rest.id,
+		localRef
+	]);
+	if (!isInvalid) return;
 	return /* @__PURE__ */ jsx(Aria.Provider, {
 		values: [[TextContext, { slot: void 0 }]],
 		children: /* @__PURE__ */ jsx(FieldErrorContext, {
-			value: mergedErrorState,
+			value: errorState,
 			children: /* @__PURE__ */ jsx(Aria.FieldError, {
-				ref,
+				ref: localRef,
 				...rest,
 				className: rootClassName,
 				children: ({ validationErrors }) => {