npm - @mittwald/flow-react-components - Versions diffs - 1.5.0-next.2 → 1.5.0-next.21 - Mend

@mittwald/flow-react-components 1.5.0-next.2 → 1.5.0-next.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (91) hide show

package/dist/js/packages/components/src/components/Slider/Slider.mjs CHANGED Viewed

@@ -11,16 +11,15 @@ import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import Slider_module_default from "./Slider.module.mjs";
 import __locale_default from "../../../../../_virtual/_19.locale.mjs";
 import clsx from "clsx";
-import "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useObjectRef } from "@react-aria/utils";
 import * as Aria from "react-aria-components";
 //#region src/components/Slider/Slider.tsx
 /** @flr-generate all */
 var Slider = flowComponent("Slider", (props) => {
-	const { className, children, name, isDisabled, defaultValue, showInitialMarker, isReadOnly, ref, step, sliderOnly, ...rest } = props;
+	const { className, children, name, isDisabled, defaultValue, showInitialMarker, isReadOnly, ref, step, sliderOnly, "aria-describedby": ignoredAriaDescribedBy, ...rest } = props;
 	const rootClassName = clsx(Slider_module_default.slider, isDisabled && Slider_module_default.disabled, className);
-	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, fieldProps } = useFieldComponent(props, "Slider");
+	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, wrapperProps, controlProps } = useFieldComponent(props, "Slider");
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "Slider");
 	const objectRef = useObjectRef(ref);
 	const propsContext = {
@@ -35,7 +34,7 @@ var Slider = flowComponent("Slider", (props) => {
 		}
 	};
 	return /* @__PURE__ */ jsx("div", {
-		...fieldProps,
+		className: wrapperProps.className,
 		children: /* @__PURE__ */ jsx(Aria.Slider, {
 			...rest,
 			className: rootClassName,
@@ -72,7 +71,7 @@ var Slider = flowComponent("Slider", (props) => {
 								size: "s"
 							} },
 							children: [
-								!sliderOnly && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+								!sliderOnly && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
 									onPress: () => state.decrementThumb(0, step),
 									"aria-label": stringFormatter.format("decrement"),
 									className: Slider_module_default.decrement,
@@ -85,14 +84,15 @@ var Slider = flowComponent("Slider", (props) => {
 								})] }),
 								/* @__PURE__ */ jsx("div", {
 									className: Slider_module_default.fill,
-									style: { width: state.getThumbPercent(0) * 100 + "%" }
+									style: { "--slider--value": state.getThumbPercent(0) }
 								}),
 								showInitialMarker && defaultValue && typeof defaultValue === "number" && /* @__PURE__ */ jsx("div", {
 									className: Slider_module_default.initialMarker,
-									style: { left: `calc(${state.getValuePercent(defaultValue) * 100}% - 2px)` }
+									style: { "--slider--initial-value": state.getValuePercent(defaultValue) }
 								}),
 								/* @__PURE__ */ jsx(Aria.SliderThumb, {
 									inputRef: objectRef,
+									"aria-describedby": controlProps["aria-describedby"],
 									name,
 									className: Slider_module_default.handle,
 									isDisabled: isReadOnly

package/dist/js/packages/components/src/components/Slider/Slider.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.mjs","names":[],"sources":["../../../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import { ~~type~~ PropsWithChildren } from \"react\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Slider.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconMinus, IconPlus } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface SliderProps\n extends\n FlowComponentProps<HTMLInputElement>,\n PropsWithChildren<Aria.SliderProps>,\n Pick<Aria.SliderThumbProps, \"name\"> {\n /* Whether the marker for the initial value should be visible /\n showInitialMarker?: boolean;\n /* Whether the component is read only. /\n isReadOnly?: boolean;\n /* Whether the component is invalid. /\n isInvalid?: boolean;\n /* Hide Buttons, Label and Value /\n sliderOnly?: boolean;\n}\n\n/* @flr-generate all /\nexport const Slider = flowComponent(\"Slider\", (props) => {\n const {\n className,\n children,\n name,\n isDisabled,\n defaultValue,\n showInitialMarker,\n isReadOnly,\n ref,\n step,\n sliderOnly,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.slider,\n isDisabled && styles.disabled,\n className,\n );\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n ~~fieldProps~~,\n } = useFieldComponent(props, \"Slider\");\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Slider\");\n\n const objectRef = useObjectRef(ref);\n\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n Label: {\n tunnel: {\n id: \"label\",\n component: \"Slider\",\n },\n ...fieldPropsContext.Label,\n className: styles.label,\n },\n };\n\n return (\n <div {~~...fieldProps~~}>\n <Aria.Slider\n {...rest}\n className={rootClassName}\n isDisabled={isDisabled}\n defaultValue={defaultValue}\n step={step}\n >\n <PropsContextProvider props={propsContext}>\n <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n\n {!sliderOnly && (\n <div className={styles.text}>\n <Aria.SliderOutput className={styles.value} />{\" \"}\n <UiComponentTunnelExit id=\"label\" component=\"Slider\" />\n </div>\n )}\n\n <Aria.SliderTrack className={styles.track}>\n {({ state }) => (\n <PropsContextProvider\n props={{\n Button: {\n isPending: false,\n isFailed: false,\n isSucceeded: false,\n isReadOnly: isReadOnly,\n excludeFromTabOrder: true,\n isDisabled,\n variant: \"plain\",\n color: \"secondary\",\n size: \"s\",\n },\n }}\n >\n {!sliderOnly && (\n <>\n <Button\n onPress={() => state.decrementThumb(0, step)}\n aria-label={stringFormatter.format(\"decrement\")}\n className={styles.decrement}\n >\n <IconMinus />\n </Button>\n <Button\n onPress={() => state.incrementThumb(0, step)}\n aria-label={stringFormatter.format(\"increment\")}\n className={styles.increment}\n >\n <IconPlus />\n </Button>\n </>\n )}\n\n <div\n className={styles.fill}\n style={{ ~~width~~: state.getThumbPercent(0) 100 + \"%\" }}\n />\n\n {showInitialMarker &&\n defaultValue &&\n typeof defaultValue === \"number\" && (\n <div\n className={styles.initialMarker}\n style={{\n ~~left: `calc(${~~state.getValuePercent(defaultValue) * 100}% - 2px)`,\n }}\n />\n )}\n <Aria.SliderThumb\n inputRef={objectRef}\n name={name}\n className={styles.handle}\n isDisabled={isReadOnly}\n />\n </PropsContextProvider>\n )}\n </Aria.SliderTrack>\n <FieldErrorView />\n </PropsContextProvider>\n </Aria.Slider>\n </div>\n );\n});\n\nexport default Slider;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;~~AAgCA,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,WACA,UACA,MACA,YACA,cACA,mBACA,YACA,KACA,MACA,~~YACA~~,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,sBAAO,QACP,cAAc,sBAAO,UACrB,SACF;CAEA,MAAM,EACJ,gBACA,0BACA,mBACA,~~eACE~~,kBAAkB,OAAO,QAAQ;CAErC,MAAM,kBAAkB,4BAA4B,kBAAS,QAAQ;CAErE,MAAM,YAAY,aAAa,GAAG;CAElC,MAAM,eAA6B;EACjC,GAAG;EACH,OAAO;GACL,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,GAAG,kBAAkB;GACrB,WAAW,sBAAO;EACpB;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,~~GAAI~~;~~EACP~~,UAAA,oBAAC,KAAK,QAAN;GACE,GAAI;GACJ,WAAW;GACC;GACE;GACR;GAEN,UAAA,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA;KACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA;KAE7D,CAAC,cACA,qBAAC,OAAD;MAAK,WAAW,sBAAO;MAAvB,UAAA;OACE,oBAAC,KAAK,cAAN,EAAmB,WAAW,sBAAO,MAAQ,CAAA;OAAE;OAC/C,oBAAC,uBAAD;QAAuB,IAAG;QAAQ,WAAU;OAAU,CAAA;MACnD;;KAGP,oBAAC,KAAK,aAAN;MAAkB,WAAW,sBAAO;MAChC,WAAA,EAAE,YACF,qBAAC,sBAAD;OACE,OAAO,EACL,QAAQ;QACN,WAAW;QACX,UAAU;QACV,aAAa;QACD;QACZ,qBAAqB;QACrB;QACA,SAAS;QACT,OAAO;QACP,MAAM;OACR,EACF;OAbF,UAAA;QAeG,CAAC,cACA,qBAAA,~~YAAA~~,EAAA,UAAA,CACE,oBAAC,QAAD;SACE,eAAe,MAAM,eAAe,GAAG,IAAI;SAC3C,cAAY,gBAAgB,OAAO,WAAW;SAC9C,WAAW,sBAAO;SAElB,UAAA,oBAAC,WAAD,CAAY,CAAA;QACN,CAAA,GACR,oBAAC,QAAD;SACE,eAAe,MAAM,eAAe,GAAG,IAAI;SAC3C,cAAY,gBAAgB,OAAO,WAAW;SAC9C,WAAW,sBAAO;SAElB,UAAA,oBAAC,UAAD,CAAW,CAAA;QACL,CAAA,CACR,EAAA,CAAA;QAGJ,oBAAC,OAAD;SACE,WAAW,sBAAO;SAClB,OAAO,~~EAAE~~,~~OAAO~~,MAAM,gBAAgB,CAAC,~~IAAI,MAAM,IAAI~~;~~QACtD~~,CAAA;QAEA,qBACC,gBACA,OAAO,iBAAiB,YACtB,oBAAC,OAAD;SACE,WAAW,sBAAO;SAClB,OAAO,EACL,~~MAAM~~,~~QAAQ,~~MAAM,gBAAgB,YAAY,~~IAAI,IAAI,UAC1D~~;QACD,CAAA;QAEL,oBAAC,KAAK,aAAN;SACE,UAAU;~~SACJ~~;SACN,WAAW,sBAAO;SAClB,YAAY;QACb,CAAA;OACmB;;KAER,CAAA;KAClB,oBAAC,gBAAD,CAAiB,CAAA;IACG;;EACX,CAAA;CACV,CAAA;AAET,CAAC"}
1	+ {"version":3,"file":"Slider.mjs","names":[],"sources":["../../../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Slider.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconMinus, IconPlus } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface SliderProps\n extends\n FlowComponentProps<HTMLInputElement>,\n PropsWithChildren<Aria.SliderProps>,\n Pick<Aria.SliderThumbProps, \"name\"> {\n /* Whether the marker for the initial value should be visible /\n showInitialMarker?: boolean;\n /* Whether the component is read only. /\n isReadOnly?: boolean;\n /* Whether the component is invalid. /\n isInvalid?: boolean;\n /* Hide Buttons, Label and Value /\n sliderOnly?: boolean;\n}\n\n/* @flr-generate all */\nexport const Slider = flowComponent(\"Slider\", (props) => {\n const {\n className,\n children,\n name,\n isDisabled,\n defaultValue,\n showInitialMarker,\n isReadOnly,\n ref,\n step,\n sliderOnly,\n // Reaches the thumb through `controlProps` – react-aria would add it a\n // second time from the slider.\n \"aria-describedby\": ignoredAriaDescribedBy,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.slider,\n isDisabled && styles.disabled,\n className,\n );\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n wrapperProps,\n controlProps,\n } = useFieldComponent(props, \"Slider\");\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Slider\");\n\n const objectRef = useObjectRef(ref);\n\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n Label: {\n tunnel: {\n id: \"label\",\n component: \"Slider\",\n },\n ...fieldPropsContext.Label,\n className: styles.label,\n },\n };\n\n return (\n <div className={wrapperProps.className}>\n <Aria.Slider\n {...rest}\n className={rootClassName}\n isDisabled={isDisabled}\n defaultValue={defaultValue}\n step={step}\n >\n <PropsContextProvider props={propsContext}>\n <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n\n {!sliderOnly && (\n <div className={styles.text}>\n <Aria.SliderOutput className={styles.value} />{\" \"}\n <UiComponentTunnelExit id=\"label\" component=\"Slider\" />\n </div>\n )}\n\n <Aria.SliderTrack className={styles.track}>\n {({ state }) => (\n <PropsContextProvider\n props={{\n Button: {\n isPending: false,\n isFailed: false,\n isSucceeded: false,\n isReadOnly: isReadOnly,\n excludeFromTabOrder: true,\n isDisabled,\n variant: \"plain\",\n color: \"secondary\",\n size: \"s\",\n },\n }}\n >\n {!sliderOnly && (\n <>\n <Button\n onPress={() => state.decrementThumb(0, step)}\n aria-label={stringFormatter.format(\"decrement\")}\n className={styles.decrement}\n >\n <IconMinus />\n </Button>\n <Button\n onPress={() => state.incrementThumb(0, step)}\n aria-label={stringFormatter.format(\"increment\")}\n className={styles.increment}\n >\n <IconPlus />\n </Button>\n </>\n )}\n\n <div\n className={styles.fill}\n style={{\n \"--slider--value\": state.getThumbPercent(0),\n }}\n />\n\n {showInitialMarker &&\n defaultValue &&\n typeof defaultValue === \"number\" && (\n <div\n className={styles.initialMarker}\n style={{\n \"--slider--initial-value\":\n state.getValuePercent(defaultValue),\n }}\n />\n )}\n <Aria.SliderThumb\n inputRef={objectRef}\n aria-describedby={controlProps[\"aria-describedby\"]}\n name={name}\n className={styles.handle}\n isDisabled={isReadOnly}\n />\n </PropsContextProvider>\n )}\n </Aria.SliderTrack>\n <FieldErrorView />\n </PropsContextProvider>\n </Aria.Slider>\n </div>\n );\n});\n\nexport default Slider;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgCA,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,WACA,UACA,MACA,YACA,cACA,mBACA,YACA,KACA,MACA,YAGA,oBAAoB,wBACpB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,sBAAO,QACP,cAAc,sBAAO,UACrB,SACF;CAEA,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,iBACE,kBAAkB,OAAO,QAAQ;CAErC,MAAM,kBAAkB,4BAA4B,kBAAS,QAAQ;CAErE,MAAM,YAAY,aAAa,GAAG;CAElC,MAAM,eAA6B;EACjC,GAAG;EACH,OAAO;GACL,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,GAAG,kBAAkB;GACrB,WAAW,sBAAO;EACpB;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW,aAAa;EAC3B,UAAA,oBAAC,KAAK,QAAN;GACE,GAAI;GACJ,WAAW;GACC;GACE;GACR;GAEN,UAAA,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA;KACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA;KAE7D,CAAC,cACA,qBAAC,OAAD;MAAK,WAAW,sBAAO;MAAvB,UAAA;OACE,oBAAC,KAAK,cAAN,EAAmB,WAAW,sBAAO,MAAQ,CAAA;OAAE;OAC/C,oBAAC,uBAAD;QAAuB,IAAG;QAAQ,WAAU;OAAU,CAAA;MACnD;;KAGP,oBAAC,KAAK,aAAN;MAAkB,WAAW,sBAAO;MAChC,WAAA,EAAE,YACF,qBAAC,sBAAD;OACE,OAAO,EACL,QAAQ;QACN,WAAW;QACX,UAAU;QACV,aAAa;QACD;QACZ,qBAAqB;QACrB;QACA,SAAS;QACT,OAAO;QACP,MAAM;OACR,EACF;OAbF,UAAA;QAeG,CAAC,cACA,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;SACE,eAAe,MAAM,eAAe,GAAG,IAAI;SAC3C,cAAY,gBAAgB,OAAO,WAAW;SAC9C,WAAW,sBAAO;SAElB,UAAA,oBAAC,WAAD,CAAY,CAAA;QACN,CAAA,GACR,oBAAC,QAAD;SACE,eAAe,MAAM,eAAe,GAAG,IAAI;SAC3C,cAAY,gBAAgB,OAAO,WAAW;SAC9C,WAAW,sBAAO;SAElB,UAAA,oBAAC,UAAD,CAAW,CAAA;QACL,CAAA,CACR,EAAA,CAAA;QAGJ,oBAAC,OAAD;SACE,WAAW,sBAAO;SAClB,OAAO,EACL,mBAAmB,MAAM,gBAAgB,CAAC,EAC5C;QACD,CAAA;QAEA,qBACC,gBACA,OAAO,iBAAiB,YACtB,oBAAC,OAAD;SACE,WAAW,sBAAO;SAClB,OAAO,EACL,2BACE,MAAM,gBAAgB,YAAY,EACtC;QACD,CAAA;QAEL,oBAAC,KAAK,aAAN;SACE,UAAU;SACV,oBAAkB,aAAa;SACzB;SACN,WAAW,sBAAO;SAClB,YAAY;QACb,CAAA;OACmB;;KAER,CAAA;KAClB,oBAAC,gBAAD,CAAiB,CAAA;IACG;;EACX,CAAA;CACV,CAAA;AAET,CAAC"}

package/dist/js/packages/components/src/components/Slider/Slider.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.module.mjs","names":[],"sources":["../../../../../../../src/components/Slider/Slider.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.slider {\n display: flex;\n flex-direction: column;\n width: 100%;\n row-gap: var(--slider--spacing-y);\n\n --button-size: calc(\n var(--button--line-height-s) + var(--button--padding-s-y) * 2\n );\n\n .text {\n text-align: center;\n align-items: end;\n padding-inline: calc(var(--button-size) + var(--slider--spacing-x));\n padding-top: calc(var(--slider--spacing-y) / 2);\n\n .value {\n font-size: var(--font-size-text--s);\n font-weight: var(--slider--value-font-weight);\n }\n\n .label {\n margin: 0;\n display: inline-flex;\n column-gap: var(--label--spacing);\n }\n }\n\n .track {\n grid-area: track;\n position: relative;\n height: var(--slider--track-height);\n background-color: var(--slider--track-color--default);\n width: 100%;\n border-radius: var(--slider--corner-radius);\n border: var(--slider--track-border-width) var(--slider--track-border-style)\n var(--slider--track-border-color--default);\n }\n\n .fill {\n position: absolute;\n height: var(--slider--track-height);\n background-color: var(--slider--color--default);\n top: calc(50% - var(--slider--track-height) / 2);\n border-radius: var(--slider--corner-radius);\n }\n\n .initialMarker {\n position: absolute;\n height: var(--slider--initial-marker-height);\n width: var(--slider--initial-marker-border-width);\n background-color: var(--slider--color--default);\n top: calc(50% - var(--slider--initial-marker-height) / 2);\n border-radius: var(--slider--corner-radius);\n }\n\n .handle {\n width: var(--slider--handle-size);\n height: var(--slider--handle-size);\n border-radius: var(--slider--handle-corner-radius);\n background-color: var(--slider--handle-fill-color);\n border: var(--slider--handle-border-width) var(--slider--track-border-style)\n var(--slider--color--default);\n forced-color-adjust: none;\n top: 50%;\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n &[data-dragging],\n &[data-focus-visible] {\n background-color: var(--slider--color--default);\n }\n\n &[data-focus-visible] {\n @include focus.focus;\n\n & {\n outline-offset: var(--size-px--xs);\n }\n }\n }\n\n .increment,\n .decrement {\n position: absolute;\n top: calc((var(--slider--spacing-y) + var(--button-size)) * -1);\n }\n\n .increment {\n inset-inline-end: 0;\n }\n\n .decrement {\n inset-inline-start: 0;\n }\n\n &.disabled {\n .track {\n background-color: var(--slider--track-color--disabled);\n border-color: var(--slider--track-border-color--disabled);\n }\n\n .fill {\n background-color: var(--slider--color--disabled);\n }\n\n .handle {\n border-color: var(--slider--color--disabled);\n }\n\n .text {\n color: var(--text--color--disabled);\n }\n }\n}\n\n/\n.slider {\n\n\n\n\n\n\n\n\n\n}\n/\n"],"mappings":""}
1	+ {"version":3,"file":"Slider.module.mjs","names":[],"sources":["../../../../../../../src/components/Slider/Slider.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.slider {\n display: flex;\n flex-direction: column;\n width: 100%;\n row-gap: var(--slider--spacing-y);\n\n --button-size: calc(\n var(--button--line-height-s) + var(--button--padding-s-y) * 2\n );\n\n .text {\n text-align: center;\n align-items: end;\n padding-inline: calc(var(--button-size) + var(--slider--spacing-x));\n padding-top: calc(var(--slider--spacing-y) / 2);\n\n .value {\n font-size: var(--font-size-text--s);\n font-weight: var(--slider--value-font-weight);\n }\n\n .label {\n margin: 0;\n display: inline-flex;\n column-gap: var(--label--spacing);\n }\n }\n\n .track {\n grid-area: track;\n position: relative;\n height: var(--slider--track-height);\n background-color: var(--slider--track-color--default);\n width: 100%;\n border-radius: var(--slider--corner-radius);\n border: var(--slider--track-border-width) var(--slider--track-border-style)\n var(--slider--track-border-color--default);\n }\n\n .fill {\n position: absolute;\n width: calc(var(--slider--value) * 100%);\n height: var(--slider--track-height);\n background-color: var(--slider--color--default);\n top: calc(50% - var(--slider--track-height) / 2);\n border-radius: var(--slider--corner-radius);\n }\n\n .initialMarker {\n position: absolute;\n inset-inline-start: calc(var(--slider--initial-value) * 100% - 2px);\n height: var(--slider--initial-marker-height);\n width: var(--slider--initial-marker-border-width);\n background-color: var(--slider--color--default);\n top: calc(50% - var(--slider--initial-marker-height) / 2);\n border-radius: var(--slider--corner-radius);\n }\n\n .handle {\n width: var(--slider--handle-size);\n height: var(--slider--handle-size);\n border-radius: var(--slider--handle-corner-radius);\n background-color: var(--slider--handle-fill-color);\n border: var(--slider--handle-border-width) var(--slider--track-border-style)\n var(--slider--color--default);\n forced-color-adjust: none;\n top: 50%;\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n &[data-dragging],\n &[data-focus-visible] {\n background-color: var(--slider--color--default);\n }\n\n &[data-focus-visible] {\n @include focus.focus;\n\n & {\n outline-offset: var(--size-px--xs);\n }\n }\n }\n\n .increment,\n .decrement {\n position: absolute;\n top: calc((var(--slider--spacing-y) + var(--button-size)) * -1);\n }\n\n .increment {\n inset-inline-end: 0;\n }\n\n .decrement {\n inset-inline-start: 0;\n }\n\n &.disabled {\n .track {\n background-color: var(--slider--track-color--disabled);\n border-color: var(--slider--track-border-color--disabled);\n }\n\n .fill {\n background-color: var(--slider--color--disabled);\n }\n\n .handle {\n border-color: var(--slider--color--disabled);\n }\n\n .text {\n color: var(--text--color--disabled);\n }\n }\n}\n\n/\n.slider {\n\n\n\n\n\n\n\n\n\n}\n/\n"],"mappings":""}

package/dist/js/packages/components/src/components/Switch/Switch.mjs CHANGED Viewed

@@ -18,7 +18,7 @@ var Switch = flowComponent("Switch", (props) => {
 	const { children, className, labelPosition = "trailing", ref, ...rest } = props;
 	const rootClassName = clsx(Switch_module_default.switch, labelPosition !== "trailing" && Switch_module_default[`label-${labelPosition}`], className);
 	const objectRef = useObjectRef(ref);
-	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, fieldProps } = useFieldComponent(props, "Switch");
+	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, wrapperProps, controlProps } = useFieldComponent(props, "Switch");
 	const propsContext = {
 		...fieldPropsContext,
 		Label: {
@@ -28,9 +28,10 @@ var Switch = flowComponent("Switch", (props) => {
 		}
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		...fieldProps,
+		className: wrapperProps.className,
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(Aria.Switch, {
 			...rest,
+			"aria-describedby": controlProps["aria-describedby"],
 			className: rootClassName,
 			inputRef: objectRef,
 			children: ({ isSelected }) => /* @__PURE__ */ jsxs(PropsContextProvider, {

package/dist/js/packages/components/src/components/Switch/Switch.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch.mjs","names":[],"sources":["../../../../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Switch.module.scss\";\nimport clsx from \"clsx\";\nimport { IconCheck, IconClose } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport labelStyles from \"@/components/Label/Label.module.scss\";\nimport { useObjectRef } from \"react-aria\";\n\nexport interface SwitchProps\n extends\n PropsWithChildren<Omit<Aria.SwitchProps, \"children\" \| \"inputRef\">>,\n FlowComponentProps<HTMLInputElement> {\n /*\n Whether the label should appear before or after the switch. @default\n * \"trailing\"\n /\n labelPosition?: \"leading\" \| \"trailing\";\n}\n\n/* @flr-generate all */\nexport const Switch = flowComponent(\"Switch\", (props) => {\n const {\n children,\n className,\n labelPosition = \"trailing\",\n ref,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.switch,\n labelPosition !== \"trailing\" && styles[`label-${labelPosition}`],\n className,\n );\n\n const objectRef = useObjectRef(ref);\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n ~~fieldProps~~,\n } = useFieldComponent(props, \"Switch\");\n\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n Label: {\n ...fieldPropsContext.Label,\n optional: false,\n className: styles.label,\n },\n };\n\n return (\n <div {~~...fieldProps~~}>\n <FieldErrorCaptureContext>\n <Aria.Switch {...rest} className={rootClassName} inputRef={objectRef}>\n {({ isSelected }) => (\n <PropsContextProvider props={propsContext}>\n <div className={styles.track}>\n <div className={styles.handle}>\n {isSelected ? <IconCheck size=\"s\" /> : <IconClose size=\"s\" />}\n </div>\n </div>\n <div className={labelStyles.label}>{children}</div>\n </PropsContextProvider>\n )}\n </Aria.Switch>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </div>\n );\n});\n\nexport default Switch;\n"],"mappings":";;;;;;;;;;;;;;;;AAwBA,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,UACA,WACA,gBAAgB,YAChB,KACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,sBAAO,QACP,kBAAkB,cAAc,sBAAO,SAAS,kBAChD,SACF;CAEA,MAAM,YAAY,aAAa,GAAG;CAElC,MAAM,EACJ,gBACA,0BACA,mBACA,~~eACE~~,kBAAkB,OAAO,QAAQ;CAErC,MAAM,eAA6B;EACjC,GAAG;EACH,OAAO;GACL,GAAG,kBAAkB;GACrB,UAAU;GACV,WAAW,sBAAO;EACpB;CACF;CAEA,OACE,qBAAC,OAAD;EAAK,~~GAAI~~;~~EAAT~~,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,oBAAC,KAAK,QAAN;~~GAAa~~,GAAI;~~GAAM~~,WAAW;~~GAAe~~,UAAU;~~GACvD~~,WAAA,EAAE,iBACF,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA,CACE,oBAAC,OAAD;KAAK,WAAW,sBAAO;KACrB,UAAA,oBAAC,OAAD;MAAK,WAAW,sBAAO;MACpB,UAAA,aAAa,oBAAC,WAAD,EAAW,MAAK,IAAK,CAAA,IAAI,oBAAC,WAAD,EAAW,MAAK,IAAK,CAAA;KACzD,CAAA;IACF,CAAA,GACL,oBAAC,OAAD;KAAK,WAAW,qBAAY;KAAQ;IAAc,CAAA,CAC9B;;EAEb,CAAA,EACW,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}
1	+ {"version":3,"file":"Switch.mjs","names":[],"sources":["../../../../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Switch.module.scss\";\nimport clsx from \"clsx\";\nimport { IconCheck, IconClose } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport labelStyles from \"@/components/Label/Label.module.scss\";\nimport { useObjectRef } from \"react-aria\";\n\nexport interface SwitchProps\n extends\n PropsWithChildren<Omit<Aria.SwitchProps, \"children\" \| \"inputRef\">>,\n FlowComponentProps<HTMLInputElement> {\n /*\n Whether the label should appear before or after the switch. @default\n * \"trailing\"\n /\n labelPosition?: \"leading\" \| \"trailing\";\n}\n\n/* @flr-generate all */\nexport const Switch = flowComponent(\"Switch\", (props) => {\n const {\n children,\n className,\n labelPosition = \"trailing\",\n ref,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.switch,\n labelPosition !== \"trailing\" && styles[`label-${labelPosition}`],\n className,\n );\n\n const objectRef = useObjectRef(ref);\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n wrapperProps,\n controlProps,\n } = useFieldComponent(props, \"Switch\");\n\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n Label: {\n ...fieldPropsContext.Label,\n optional: false,\n className: styles.label,\n },\n };\n\n return (\n <div className={wrapperProps.className}>\n <FieldErrorCaptureContext>\n <Aria.Switch\n {...rest}\n aria-describedby={controlProps[\"aria-describedby\"]}\n className={rootClassName}\n inputRef={objectRef}\n >\n {({ isSelected }) => (\n <PropsContextProvider props={propsContext}>\n <div className={styles.track}>\n <div className={styles.handle}>\n {isSelected ? <IconCheck size=\"s\" /> : <IconClose size=\"s\" />}\n </div>\n </div>\n <div className={labelStyles.label}>{children}</div>\n </PropsContextProvider>\n )}\n </Aria.Switch>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </div>\n );\n});\n\nexport default Switch;\n"],"mappings":";;;;;;;;;;;;;;;;AAwBA,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,UACA,WACA,gBAAgB,YAChB,KACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,sBAAO,QACP,kBAAkB,cAAc,sBAAO,SAAS,kBAChD,SACF;CAEA,MAAM,YAAY,aAAa,GAAG;CAElC,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,iBACE,kBAAkB,OAAO,QAAQ;CAErC,MAAM,eAA6B;EACjC,GAAG;EACH,OAAO;GACL,GAAG,kBAAkB;GACrB,UAAU;GACV,WAAW,sBAAO;EACpB;CACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,aAAa;EAA7B,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,oBAAC,KAAK,QAAN;GACE,GAAI;GACJ,oBAAkB,aAAa;GAC/B,WAAW;GACX,UAAU;GAER,WAAA,EAAE,iBACF,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA,CACE,oBAAC,OAAD;KAAK,WAAW,sBAAO;KACrB,UAAA,oBAAC,OAAD;MAAK,WAAW,sBAAO;MACpB,UAAA,aAAa,oBAAC,WAAD,EAAW,MAAK,IAAK,CAAA,IAAI,oBAAC,WAAD,EAAW,MAAK,IAAK,CAAA;KACzD,CAAA;IACF,CAAA,GACL,oBAAC,OAAD;KAAK,WAAW,qBAAY;KAAQ;IAAc,CAAA,CAC9B;;EAEb,CAAA,EACW,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}

package/dist/js/packages/components/src/components/TextArea/TextArea.mjs CHANGED Viewed

@@ -21,11 +21,11 @@ var TextArea = flowComponent("TextArea", (props) => {
 	const { children, placeholder, rows = 5, autoResizeMaxRows = rows, ref, allowVerticalResize, allowHorizontalResize, showCharacterCount, className, onChange, isReadOnly, value, ...rest } = useControlledHostValueProps(props, "");
 	if (allowHorizontalResize !== void 0) warnDeprecation("The 'allowHorizontalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.");
 	if (allowVerticalResize !== void 0) warnDeprecation("The 'allowVerticalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.");
-	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, fieldProps } = useFieldComponent(props, "TextArea");
+	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, wrapperProps, controlProps } = useFieldComponent(props, "TextArea");
 	let { allowResize } = props;
 	if (allowVerticalResize) allowResize = "vertical";
 	else if (allowHorizontalResize) allowResize = "horizontal";
-	const rootClassName = clsx(fieldProps.className, className);
+	const rootClassName = clsx(wrapperProps.className, className);
 	const inputClassName = clsx(TextArea_module_default.input, typeof allowResize === "boolean" && allowResize ? TextArea_module_default.resize : null, allowResize === "horizontal" ? TextArea_module_default.horizontalResize : allowResize === "vertical" ? TextArea_module_default.verticalResize : null);
 	const handleChange = (v) => {
 		if (isReadOnly) return;
@@ -78,7 +78,7 @@ var TextArea = flowComponent("TextArea", (props) => {
 	]);
 	return /* @__PURE__ */ jsx(Aria.TextField, {
 		...rest,
-		...fieldProps,
+		...controlProps,
 		value,
 		className: rootClassName,
 		onChange: handleChange,

package/dist/js/packages/components/src/components/TextArea/TextArea.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.mjs","names":[],"sources":["../../../../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport styles from \"./TextArea.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport {\n type PropsWithChildren,\n useEffect,\n useLayoutEffect,\n useState,\n} from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/.locale.json\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface TextAreaProps\n extends\n PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n Pick<Aria.TextAreaProps, \"placeholder\" \| \"rows\" \| \"aria-hidden\">,\n FlowComponentProps<HTMLTextAreaElement> {\n /* Whether a character count should be displayed inside the field description. /\n showCharacterCount?: boolean;\n /\n Whether the text area should grow if its content gets longer than its\n * initial height.\n /\n autoResizeMaxRows?: number;\n /* Allows the user to manually resize the textArea horizontally. /\n allowResize?: boolean \| \"horizontal\" \| \"vertical\";\n /* @deprecated Use `allowResize` instead. /\n allowHorizontalResize?: boolean;\n /* @deprecated Use `allowResize` instead. /\n allowVerticalResize?: boolean;\n}\n\n/* @flr-generate all /\nexport const TextArea = flowComponent(\"TextArea\", (props) => {\n const warnDeprecation = useWarnDeprecation();\n const {\n children,\n placeholder,\n rows = 5,\n autoResizeMaxRows = rows,\n ref,\n allowVerticalResize,\n allowHorizontalResize,\n showCharacterCount,\n className,\n onChange,\n isReadOnly,\n value,\n ...rest\n } = useControlledHostValueProps(props, \"\");\n\n if (allowHorizontalResize !== undefined) {\n warnDeprecation(\n \"The 'allowHorizontalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.\",\n );\n }\n if (allowVerticalResize !== undefined) {\n warnDeprecation(\n \"The 'allowVerticalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.\",\n );\n }\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n ~~fieldProps~~,\n } = useFieldComponent(props, \"TextArea\");\n\n let { allowResize } = props;\n if (allowVerticalResize) {\n allowResize = \"vertical\";\n } else if (allowHorizontalResize) {\n allowResize = \"horizontal\";\n }\n\n const rootClassName = clsx(~~fieldProps~~.className, className);\n\n const inputClassName = clsx(\n styles.input,\n typeof allowResize === \"boolean\" && allowResize ? styles.resize : null,\n allowResize === \"horizontal\"\n ? styles.horizontalResize\n : allowResize === \"vertical\"\n ? styles.verticalResize\n : null,\n );\n\n const handleChange = (v: string) => {\n if (isReadOnly) {\n return;\n }\n\n if (onChange) {\n onChange(v);\n }\n };\n\n const translation = useLocalizedStringFormatter(locales, \"TextArea\");\n\n // Derived, so that a value the field never saw typed is counted as well.\n const charactersCountDescription = translation.format(\"characters\", {\n count: value.length,\n maxCount: props.maxLength ?? 0,\n });\n\n const localRef = useObjectRef(ref);\n\n const [resized, setResized] = useState(false);\n\n const autoResizable = rows !== autoResizeMaxRows;\n\n const verticallyResizable =\n allowResize && (!autoResizable \|\| (autoResizable && resized));\n\n useEffect(() => {\n const textarea = localRef.current;\n if (!textarea) return;\n\n const startHeight = textarea.offsetHeight;\n let tracking = false;\n\n const handleMouseDown = () => {\n tracking = true;\n };\n\n const handleMouseMove = () => {\n if (!tracking \|\| resized) return;\n\n const currentHeight = textarea.offsetHeight;\n\n if (currentHeight !== startHeight) {\n setResized(true);\n tracking = false;\n }\n };\n\n const handleMouseUp = () => {\n tracking = false;\n };\n\n window.addEventListener(\"mousedown\", handleMouseDown);\n window.addEventListener(\"mousemove\", handleMouseMove);\n window.addEventListener(\"mouseup\", handleMouseUp);\n\n return () => {\n window.removeEventListener(\"mousedown\", handleMouseDown);\n window.removeEventListener(\"mousemove\", handleMouseMove);\n window.removeEventListener(\"mouseup\", handleMouseUp);\n };\n }, [resized]);\n\n /\n * The height depends on the rendered content, so it cannot be a style. It is\n * synced to the value instead of to the `change` event, because a value the\n * field never saw typed — an initial value, or a draft loaded into a\n * controlled field — has to resize it just the same.\n */\n useLayoutEffect(() => {\n const textArea = localRef.current;\n if (!textArea \|\| !autoResizable \|\| verticallyResizable) {\n return;\n }\n // https://stackoverflow.com/a/60795884\n textArea.style.height = \"0px\";\n // + 2 to add border height\n textArea.style.height = `${textArea.scrollHeight + 2}px`;\n }, [value, autoResizable, verticallyResizable]);\n\n return (\n <Aria.TextField\n {...rest}\n {...~~fieldProps~~}\n value={value}\n className={rootClassName}\n onChange={handleChange}\n >\n <PropsContextProvider props={fieldPropsContext}>\n <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n <Aria.TextArea\n rows={rows}\n {...(isReadOnly ? { \"data-readonly\": true } : {})}\n aria-readonly={isReadOnly}\n aria-hidden={props[\"aria-hidden\"]}\n placeholder={placeholder}\n className={inputClassName}\n ref={localRef}\n style={{\n \"--text-area--rows\": rows,\n \"--text-area--max-rows\": verticallyResizable\n ? undefined\n : autoResizeMaxRows,\n }}\n />\n {showCharacterCount && (\n <FieldDescription>{charactersCountDescription}</FieldDescription>\n )}\n <FieldErrorView />\n </PropsContextProvider>\n </Aria.TextField>\n );\n});\n\nexport default TextArea;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAyCA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,kBAAkB,mBAAmB;CAC3C,MAAM,EACJ,UACA,aACA,OAAO,GACP,oBAAoB,MACpB,KACA,qBACA,uBACA,oBACA,WACA,UACA,YACA,OACA,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,IAAI,0BAA0B,KAAA,GAC5B,gBACE,oHACF;CAEF,IAAI,wBAAwB,KAAA,GAC1B,gBACE,kHACF;CAGF,MAAM,EACJ,gBACA,0BACA,mBACA,~~eACE~~,kBAAkB,OAAO,UAAU;CAEvC,IAAI,EAAE,gBAAgB;CACtB,IAAI,qBACF,cAAc;MACT,IAAI,uBACT,cAAc;CAGhB,MAAM,gBAAgB,KAAK,~~WAAW~~,WAAW,SAAS;~~CAE1D~~,MAAM,iBAAiB,KACrB,wBAAO,OACP,OAAO,gBAAgB,aAAa,cAAc,wBAAO,SAAS,MAClE,gBAAgB,eACZ,wBAAO,mBACP,gBAAgB,aACd,wBAAO,iBACP,IACR;CAEA,MAAM,gBAAgB,MAAc;EAClC,IAAI,YACF;EAGF,IAAI,UACF,SAAS,CAAC;CAEd;CAKA,MAAM,6BAHc,4BAA4B,kBAAS,UAGtB,CAAA,CAAY,OAAO,cAAc;EAClE,OAAO,MAAM;EACb,UAAU,MAAM,aAAa;CAC/B,CAAC;CAED,MAAM,WAAW,aAAa,GAAG;CAEjC,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,MAAM,gBAAgB,SAAS;CAE/B,MAAM,sBACJ,gBAAgB,CAAC,iBAAkB,iBAAiB;CAEtD,gBAAgB;EACd,MAAM,WAAW,SAAS;EAC1B,IAAI,CAAC,UAAU;EAEf,MAAM,cAAc,SAAS;EAC7B,IAAI,WAAW;EAEf,MAAM,wBAAwB;GAC5B,WAAW;EACb;EAEA,MAAM,wBAAwB;GAC5B,IAAI,CAAC,YAAY,SAAS;GAI1B,IAFsB,SAAS,iBAET,aAAa;IACjC,WAAW,IAAI;IACf,WAAW;GACb;EACF;EAEA,MAAM,sBAAsB;GAC1B,WAAW;EACb;EAEA,OAAO,iBAAiB,aAAa,eAAe;EACpD,OAAO,iBAAiB,aAAa,eAAe;EACpD,OAAO,iBAAiB,WAAW,aAAa;EAEhD,aAAa;GACX,OAAO,oBAAoB,aAAa,eAAe;GACvD,OAAO,oBAAoB,aAAa,eAAe;GACvD,OAAO,oBAAoB,WAAW,aAAa;EACrD;CACF,GAAG,CAAC,OAAO,CAAC;CAQZ,sBAAsB;EACpB,MAAM,WAAW,SAAS;EAC1B,IAAI,CAAC,YAAY,CAAC,iBAAiB,qBACjC;EAGF,SAAS,MAAM,SAAS;EAExB,SAAS,MAAM,SAAS,GAAG,SAAS,eAAe,EAAE;CACvD,GAAG;EAAC;EAAO;EAAe;CAAmB,CAAC;CAE9C,OACE,oBAAC,KAAK,WAAN;EACE,GAAI;EACJ,GAAI;EACG;EACP,WAAW;EACX,UAAU;EAEV,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA;IAC9D,oBAAC,KAAK,UAAN;KACQ;KACN,GAAK,aAAa,EAAE,iBAAiB,KAAK,IAAI,CAAC;KAC/C,iBAAe;KACf,eAAa,MAAM;KACN;KACb,WAAW;KACX,KAAK;KACL,OAAO;MACL,qBAAqB;MACrB,yBAAyB,sBACrB,KAAA,IACA;KACN;IACD,CAAA;IACA,sBACC,oBAAC,kBAAD,EAAA,UAAmB,2BAA6C,CAAA;IAElE,oBAAC,gBAAD,CAAiB,CAAA;GACG;;CACR,CAAA;AAEpB,CAAC"}
1	+ {"version":3,"file":"TextArea.mjs","names":[],"sources":["../../../../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport styles from \"./TextArea.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport {\n type PropsWithChildren,\n useEffect,\n useLayoutEffect,\n useState,\n} from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/.locale.json\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface TextAreaProps\n extends\n PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n Pick<Aria.TextAreaProps, \"placeholder\" \| \"rows\" \| \"aria-hidden\">,\n FlowComponentProps<HTMLTextAreaElement> {\n /* Whether a character count should be displayed inside the field description. /\n showCharacterCount?: boolean;\n /\n Whether the text area should grow if its content gets longer than its\n * initial height.\n /\n autoResizeMaxRows?: number;\n /* Allows the user to manually resize the textArea horizontally. /\n allowResize?: boolean \| \"horizontal\" \| \"vertical\";\n /* @deprecated Use `allowResize` instead. /\n allowHorizontalResize?: boolean;\n /* @deprecated Use `allowResize` instead. /\n allowVerticalResize?: boolean;\n}\n\n/* @flr-generate all /\nexport const TextArea = flowComponent(\"TextArea\", (props) => {\n const warnDeprecation = useWarnDeprecation();\n const {\n children,\n placeholder,\n rows = 5,\n autoResizeMaxRows = rows,\n ref,\n allowVerticalResize,\n allowHorizontalResize,\n showCharacterCount,\n className,\n onChange,\n isReadOnly,\n value,\n ...rest\n } = useControlledHostValueProps(props, \"\");\n\n if (allowHorizontalResize !== undefined) {\n warnDeprecation(\n \"The 'allowHorizontalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.\",\n );\n }\n if (allowVerticalResize !== undefined) {\n warnDeprecation(\n \"The 'allowVerticalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.\",\n );\n }\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n wrapperProps,\n controlProps,\n } = useFieldComponent(props, \"TextArea\");\n\n let { allowResize } = props;\n if (allowVerticalResize) {\n allowResize = \"vertical\";\n } else if (allowHorizontalResize) {\n allowResize = \"horizontal\";\n }\n\n const rootClassName = clsx(wrapperProps.className, className);\n\n const inputClassName = clsx(\n styles.input,\n typeof allowResize === \"boolean\" && allowResize ? styles.resize : null,\n allowResize === \"horizontal\"\n ? styles.horizontalResize\n : allowResize === \"vertical\"\n ? styles.verticalResize\n : null,\n );\n\n const handleChange = (v: string) => {\n if (isReadOnly) {\n return;\n }\n\n if (onChange) {\n onChange(v);\n }\n };\n\n const translation = useLocalizedStringFormatter(locales, \"TextArea\");\n\n // Derived, so that a value the field never saw typed is counted as well.\n const charactersCountDescription = translation.format(\"characters\", {\n count: value.length,\n maxCount: props.maxLength ?? 0,\n });\n\n const localRef = useObjectRef(ref);\n\n const [resized, setResized] = useState(false);\n\n const autoResizable = rows !== autoResizeMaxRows;\n\n const verticallyResizable =\n allowResize && (!autoResizable \|\| (autoResizable && resized));\n\n useEffect(() => {\n const textarea = localRef.current;\n if (!textarea) return;\n\n const startHeight = textarea.offsetHeight;\n let tracking = false;\n\n const handleMouseDown = () => {\n tracking = true;\n };\n\n const handleMouseMove = () => {\n if (!tracking \|\| resized) return;\n\n const currentHeight = textarea.offsetHeight;\n\n if (currentHeight !== startHeight) {\n setResized(true);\n tracking = false;\n }\n };\n\n const handleMouseUp = () => {\n tracking = false;\n };\n\n window.addEventListener(\"mousedown\", handleMouseDown);\n window.addEventListener(\"mousemove\", handleMouseMove);\n window.addEventListener(\"mouseup\", handleMouseUp);\n\n return () => {\n window.removeEventListener(\"mousedown\", handleMouseDown);\n window.removeEventListener(\"mousemove\", handleMouseMove);\n window.removeEventListener(\"mouseup\", handleMouseUp);\n };\n }, [resized]);\n\n /\n * The height depends on the rendered content, so it cannot be a style. It is\n * synced to the value instead of to the `change` event, because a value the\n * field never saw typed — an initial value, or a draft loaded into a\n * controlled field — has to resize it just the same.\n */\n useLayoutEffect(() => {\n const textArea = localRef.current;\n if (!textArea \|\| !autoResizable \|\| verticallyResizable) {\n return;\n }\n // https://stackoverflow.com/a/60795884\n textArea.style.height = \"0px\";\n // + 2 to add border height\n textArea.style.height = `${textArea.scrollHeight + 2}px`;\n }, [value, autoResizable, verticallyResizable]);\n\n return (\n <Aria.TextField\n {...rest}\n {...controlProps}\n value={value}\n className={rootClassName}\n onChange={handleChange}\n >\n <PropsContextProvider props={fieldPropsContext}>\n <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n <Aria.TextArea\n rows={rows}\n {...(isReadOnly ? { \"data-readonly\": true } : {})}\n aria-readonly={isReadOnly}\n aria-hidden={props[\"aria-hidden\"]}\n placeholder={placeholder}\n className={inputClassName}\n ref={localRef}\n style={{\n \"--text-area--rows\": rows,\n \"--text-area--max-rows\": verticallyResizable\n ? undefined\n : autoResizeMaxRows,\n }}\n />\n {showCharacterCount && (\n <FieldDescription>{charactersCountDescription}</FieldDescription>\n )}\n <FieldErrorView />\n </PropsContextProvider>\n </Aria.TextField>\n );\n});\n\nexport default TextArea;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAyCA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,kBAAkB,mBAAmB;CAC3C,MAAM,EACJ,UACA,aACA,OAAO,GACP,oBAAoB,MACpB,KACA,qBACA,uBACA,oBACA,WACA,UACA,YACA,OACA,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,IAAI,0BAA0B,KAAA,GAC5B,gBACE,oHACF;CAEF,IAAI,wBAAwB,KAAA,GAC1B,gBACE,kHACF;CAGF,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,iBACE,kBAAkB,OAAO,UAAU;CAEvC,IAAI,EAAE,gBAAgB;CACtB,IAAI,qBACF,cAAc;MACT,IAAI,uBACT,cAAc;CAGhB,MAAM,gBAAgB,KAAK,aAAa,WAAW,SAAS;CAE5D,MAAM,iBAAiB,KACrB,wBAAO,OACP,OAAO,gBAAgB,aAAa,cAAc,wBAAO,SAAS,MAClE,gBAAgB,eACZ,wBAAO,mBACP,gBAAgB,aACd,wBAAO,iBACP,IACR;CAEA,MAAM,gBAAgB,MAAc;EAClC,IAAI,YACF;EAGF,IAAI,UACF,SAAS,CAAC;CAEd;CAKA,MAAM,6BAHc,4BAA4B,kBAAS,UAGtB,CAAA,CAAY,OAAO,cAAc;EAClE,OAAO,MAAM;EACb,UAAU,MAAM,aAAa;CAC/B,CAAC;CAED,MAAM,WAAW,aAAa,GAAG;CAEjC,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,MAAM,gBAAgB,SAAS;CAE/B,MAAM,sBACJ,gBAAgB,CAAC,iBAAkB,iBAAiB;CAEtD,gBAAgB;EACd,MAAM,WAAW,SAAS;EAC1B,IAAI,CAAC,UAAU;EAEf,MAAM,cAAc,SAAS;EAC7B,IAAI,WAAW;EAEf,MAAM,wBAAwB;GAC5B,WAAW;EACb;EAEA,MAAM,wBAAwB;GAC5B,IAAI,CAAC,YAAY,SAAS;GAI1B,IAFsB,SAAS,iBAET,aAAa;IACjC,WAAW,IAAI;IACf,WAAW;GACb;EACF;EAEA,MAAM,sBAAsB;GAC1B,WAAW;EACb;EAEA,OAAO,iBAAiB,aAAa,eAAe;EACpD,OAAO,iBAAiB,aAAa,eAAe;EACpD,OAAO,iBAAiB,WAAW,aAAa;EAEhD,aAAa;GACX,OAAO,oBAAoB,aAAa,eAAe;GACvD,OAAO,oBAAoB,aAAa,eAAe;GACvD,OAAO,oBAAoB,WAAW,aAAa;EACrD;CACF,GAAG,CAAC,OAAO,CAAC;CAQZ,sBAAsB;EACpB,MAAM,WAAW,SAAS;EAC1B,IAAI,CAAC,YAAY,CAAC,iBAAiB,qBACjC;EAGF,SAAS,MAAM,SAAS;EAExB,SAAS,MAAM,SAAS,GAAG,SAAS,eAAe,EAAE;CACvD,GAAG;EAAC;EAAO;EAAe;CAAmB,CAAC;CAE9C,OACE,oBAAC,KAAK,WAAN;EACE,GAAI;EACJ,GAAI;EACG;EACP,WAAW;EACX,UAAU;EAEV,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA;IAC9D,oBAAC,KAAK,UAAN;KACQ;KACN,GAAK,aAAa,EAAE,iBAAiB,KAAK,IAAI,CAAC;KAC/C,iBAAe;KACf,eAAa,MAAM;KACN;KACb,WAAW;KACX,KAAK;KACL,OAAO;MACL,qBAAqB;MACrB,yBAAyB,sBACrB,KAAA,IACA;KACN;IACD,CAAA;IACA,sBACC,oBAAC,kBAAD,EAAA,UAAmB,2BAA6C,CAAA;IAElE,oBAAC,gBAAD,CAAiB,CAAA;GACG;;CACR,CAAA;AAEpB,CAAC"}

package/dist/js/packages/components/src/components/TextField/TextField.mjs CHANGED Viewed

@@ -22,8 +22,8 @@ var TextField = flowComponent("TextField", (props) => {
 	const { className, showCharacterCount, form, placeholder, ref, type: typeFromProps, children, onChange, ...rest } = useControlledHostValueProps(props, "");
 	const [charactersCount, setCharactersCount] = useState(props.defaultValue?.length ?? props.value?.length ?? 0);
 	const [type, setType] = useState(typeFromProps);
-	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, fieldProps } = useFieldComponent(props, "TextField");
-	const rootClassName = clsx(fieldProps.className, className);
+	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, wrapperProps, controlProps } = useFieldComponent(props, "TextField");
+	const rootClassName = clsx(wrapperProps.className, className);
 	const propsContext = {
 		Button: {
 			className: TextField_module_default.button,
@@ -54,7 +54,7 @@ var TextField = flowComponent("TextField", (props) => {
 	});
 	return /* @__PURE__ */ jsx(Aria.TextField, {
 		...rest,
-		...fieldProps,
+		...controlProps,
 		className: rootClassName,
 		onChange: handleChange,
 		type,

package/dist/js/packages/components/src/components/TextField/TextField.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextField.mjs","names":[],"sources":["../../../../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { type PropsWithChildren, useState } from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./TextField.module.scss\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport locales from \"./locales/.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport { IconHide, IconShow } from \"@/components/Icon/components/icons\";\nimport clsx from \"clsx\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface TextFieldProps\n extends\n PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n Pick<Aria.InputProps, \"placeholder\">,\n FlowComponentProps<HTMLInputElement> {\n /* Whether a character count should be displayed inside the field description. /\n showCharacterCount?: boolean;\n}\n\n/* @flr-generate all */\nexport const TextField = flowComponent(\"TextField\", (props) => {\n const {\n className,\n showCharacterCount,\n form,\n placeholder,\n ref,\n type: typeFromProps,\n children,\n onChange,\n ...rest\n } = useControlledHostValueProps(props, \"\");\n\n const [charactersCount, setCharactersCount] = useState(\n props.defaultValue?.length ?? props.value?.length ?? 0,\n );\n\n const [type, setType] = useState(typeFromProps);\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n ~~fieldProps~~,\n } = useFieldComponent(props, \"TextField\");\n\n const rootClassName = clsx(~~fieldProps~~.className, className);\n\n const propsContext: PropsContext = {\n Button: {\n className: styles.button,\n variant: \"plain\",\n color: \"secondary\",\n tunnel: {\n id: \"button\",\n component: \"TextField\",\n },\n },\n CopyButton: {\n className: styles.button,\n tunnel: {\n id: \"button\",\n component: \"TextField\",\n },\n },\n ...fieldPropsContext,\n };\n\n const handleChange = (v: string) => {\n if (showCharacterCount) {\n setCharactersCount(v.length);\n }\n if (onChange) {\n onChange(v);\n }\n };\n\n const translation = useLocalizedStringFormatter(locales, \"TextField\");\n\n const charactersCountDescription = translation.format(\"characters\", {\n count: charactersCount,\n maxCount: props.maxLength ?? 0,\n });\n\n return (\n <Aria.TextField\n {...rest}\n {...~~fieldProps~~}\n className={rootClassName}\n onChange={handleChange}\n type={type}\n >\n <PropsContextProvider props={propsContext}>\n <FieldErrorCaptureContext>\n {children}\n <div className={styles.inputContainer}>\n <Aria.Input\n form={form}\n placeholder={placeholder}\n className={styles.input}\n ref={ref}\n />\n <UiComponentTunnelExit id=\"button\" component=\"TextField\" />\n {typeFromProps === \"password\" && (\n <Button\n color=\"secondary\"\n variant=\"plain\"\n className={styles.button}\n onPress={() =>\n setType(type === \"password\" ? \"text\" : \"password\")\n }\n aria-label={translation.format(\n `password.${type === \"password\" ? \"show\" : \"hide\"}`,\n )}\n >\n {type === \"password\" ? <IconShow /> : <IconHide />}\n </Button>\n )}\n </div>\n {showCharacterCount && (\n <FieldDescription>{charactersCountDescription}</FieldDescription>\n )}\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </PropsContextProvider>\n </Aria.TextField>\n );\n});\n\nexport default TextField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA4BA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,WACA,oBACA,MACA,aACA,KACA,MAAM,eACN,UACA,UACA,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,MAAM,CAAC,iBAAiB,sBAAsB,SAC5C,MAAM,cAAc,UAAU,MAAM,OAAO,UAAU,CACvD;CAEA,MAAM,CAAC,MAAM,WAAW,SAAS,aAAa;CAE9C,MAAM,EACJ,gBACA,0BACA,mBACA,~~eACE~~,kBAAkB,OAAO,WAAW;CAExC,MAAM,gBAAgB,KAAK,~~WAAW~~,WAAW,SAAS;~~CAE1D~~,MAAM,eAA6B;EACjC,QAAQ;GACN,WAAW,yBAAO;GAClB,SAAS;GACT,OAAO;GACP,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,YAAY;GACV,WAAW,yBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,GAAG;CACL;CAEA,MAAM,gBAAgB,MAAc;EAClC,IAAI,oBACF,mBAAmB,EAAE,MAAM;EAE7B,IAAI,UACF,SAAS,CAAC;CAEd;CAEA,MAAM,cAAc,4BAA4B,kBAAS,WAAW;CAEpE,MAAM,6BAA6B,YAAY,OAAO,cAAc;EAClE,OAAO;EACP,UAAU,MAAM,aAAa;CAC/B,CAAC;CAED,OACE,oBAAC,KAAK,WAAN;EACE,GAAI;EACJ,GAAI;EACJ,WAAW;EACX,UAAU;EACJ;EAEN,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,qBAAC,0BAAD,EAAA,UAAA;IACG;IACD,qBAAC,OAAD;KAAK,WAAW,yBAAO;KAAvB,UAAA;MACE,oBAAC,KAAK,OAAN;OACQ;OACO;OACb,WAAW,yBAAO;OACb;MACN,CAAA;MACD,oBAAC,uBAAD;OAAuB,IAAG;OAAS,WAAU;MAAa,CAAA;MACzD,kBAAkB,cACjB,oBAAC,QAAD;OACE,OAAM;OACN,SAAQ;OACR,WAAW,yBAAO;OAClB,eACE,QAAQ,SAAS,aAAa,SAAS,UAAU;OAEnD,cAAY,YAAY,OACtB,YAAY,SAAS,aAAa,SAAS,QAC7C;OAEC,UAAA,SAAS,aAAa,oBAAC,UAAD,CAAW,CAAA,IAAI,oBAAC,UAAD,CAAW,CAAA;MAC3C,CAAA;KAEP;;IACJ,sBACC,oBAAC,kBAAD,EAAA,UAAmB,2BAA6C,CAAA;GAE1C,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACG;;CACR,CAAA;AAEpB,CAAC"}
1	+ {"version":3,"file":"TextField.mjs","names":[],"sources":["../../../../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { type PropsWithChildren, useState } from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./TextField.module.scss\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport locales from \"./locales/.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport { IconHide, IconShow } from \"@/components/Icon/components/icons\";\nimport clsx from \"clsx\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface TextFieldProps\n extends\n PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n Pick<Aria.InputProps, \"placeholder\">,\n FlowComponentProps<HTMLInputElement> {\n /* Whether a character count should be displayed inside the field description. /\n showCharacterCount?: boolean;\n}\n\n/* @flr-generate all */\nexport const TextField = flowComponent(\"TextField\", (props) => {\n const {\n className,\n showCharacterCount,\n form,\n placeholder,\n ref,\n type: typeFromProps,\n children,\n onChange,\n ...rest\n } = useControlledHostValueProps(props, \"\");\n\n const [charactersCount, setCharactersCount] = useState(\n props.defaultValue?.length ?? props.value?.length ?? 0,\n );\n\n const [type, setType] = useState(typeFromProps);\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n wrapperProps,\n controlProps,\n } = useFieldComponent(props, \"TextField\");\n\n const rootClassName = clsx(wrapperProps.className, className);\n\n const propsContext: PropsContext = {\n Button: {\n className: styles.button,\n variant: \"plain\",\n color: \"secondary\",\n tunnel: {\n id: \"button\",\n component: \"TextField\",\n },\n },\n CopyButton: {\n className: styles.button,\n tunnel: {\n id: \"button\",\n component: \"TextField\",\n },\n },\n ...fieldPropsContext,\n };\n\n const handleChange = (v: string) => {\n if (showCharacterCount) {\n setCharactersCount(v.length);\n }\n if (onChange) {\n onChange(v);\n }\n };\n\n const translation = useLocalizedStringFormatter(locales, \"TextField\");\n\n const charactersCountDescription = translation.format(\"characters\", {\n count: charactersCount,\n maxCount: props.maxLength ?? 0,\n });\n\n return (\n <Aria.TextField\n {...rest}\n {...controlProps}\n className={rootClassName}\n onChange={handleChange}\n type={type}\n >\n <PropsContextProvider props={propsContext}>\n <FieldErrorCaptureContext>\n {children}\n <div className={styles.inputContainer}>\n <Aria.Input\n form={form}\n placeholder={placeholder}\n className={styles.input}\n ref={ref}\n />\n <UiComponentTunnelExit id=\"button\" component=\"TextField\" />\n {typeFromProps === \"password\" && (\n <Button\n color=\"secondary\"\n variant=\"plain\"\n className={styles.button}\n onPress={() =>\n setType(type === \"password\" ? \"text\" : \"password\")\n }\n aria-label={translation.format(\n `password.${type === \"password\" ? \"show\" : \"hide\"}`,\n )}\n >\n {type === \"password\" ? <IconShow /> : <IconHide />}\n </Button>\n )}\n </div>\n {showCharacterCount && (\n <FieldDescription>{charactersCountDescription}</FieldDescription>\n )}\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </PropsContextProvider>\n </Aria.TextField>\n );\n});\n\nexport default TextField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA4BA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,WACA,oBACA,MACA,aACA,KACA,MAAM,eACN,UACA,UACA,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,MAAM,CAAC,iBAAiB,sBAAsB,SAC5C,MAAM,cAAc,UAAU,MAAM,OAAO,UAAU,CACvD;CAEA,MAAM,CAAC,MAAM,WAAW,SAAS,aAAa;CAE9C,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,iBACE,kBAAkB,OAAO,WAAW;CAExC,MAAM,gBAAgB,KAAK,aAAa,WAAW,SAAS;CAE5D,MAAM,eAA6B;EACjC,QAAQ;GACN,WAAW,yBAAO;GAClB,SAAS;GACT,OAAO;GACP,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,YAAY;GACV,WAAW,yBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,GAAG;CACL;CAEA,MAAM,gBAAgB,MAAc;EAClC,IAAI,oBACF,mBAAmB,EAAE,MAAM;EAE7B,IAAI,UACF,SAAS,CAAC;CAEd;CAEA,MAAM,cAAc,4BAA4B,kBAAS,WAAW;CAEpE,MAAM,6BAA6B,YAAY,OAAO,cAAc;EAClE,OAAO;EACP,UAAU,MAAM,aAAa;CAC/B,CAAC;CAED,OACE,oBAAC,KAAK,WAAN;EACE,GAAI;EACJ,GAAI;EACJ,WAAW;EACX,UAAU;EACJ;EAEN,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,qBAAC,0BAAD,EAAA,UAAA;IACG;IACD,qBAAC,OAAD;KAAK,WAAW,yBAAO;KAAvB,UAAA;MACE,oBAAC,KAAK,OAAN;OACQ;OACO;OACb,WAAW,yBAAO;OACb;MACN,CAAA;MACD,oBAAC,uBAAD;OAAuB,IAAG;OAAS,WAAU;MAAa,CAAA;MACzD,kBAAkB,cACjB,oBAAC,QAAD;OACE,OAAM;OACN,SAAQ;OACR,WAAW,yBAAO;OAClB,eACE,QAAQ,SAAS,aAAa,SAAS,UAAU;OAEnD,cAAY,YAAY,OACtB,YAAY,SAAS,aAAa,SAAS,QAC7C;OAEC,UAAA,SAAS,aAAa,oBAAC,UAAD,CAAW,CAAA,IAAI,oBAAC,UAAD,CAAW,CAAA;MAC3C,CAAA;KAEP;;IACJ,sBACC,oBAAC,kBAAD,EAAA,UAAmB,2BAA6C,CAAA;GAE1C,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACG;;CACR,CAAA;AAEpB,CAAC"}

package/dist/js/packages/components/src/components/TimeField/TimeField.mjs CHANGED Viewed

@@ -3,6 +3,7 @@
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
+import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
 import { DateInput } from "../DateInput/DateInput.mjs";
 import TimeField_module_default from "./TimeField.module.mjs";
 import "react";
@@ -11,12 +12,13 @@ import * as Aria from "react-aria-components";
 //#region src/components/TimeField/TimeField.tsx
 /** @flr-generate all */
 var TimeField = flowComponent("TimeField", (props) => {
-	const { children, ref, ...rest } = props;
-	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, fieldProps } = useFieldComponent(props, "TimeField");
+	const { children, ref, ...rest } = useControlledHostValueProps(props, null);
+	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, wrapperProps, controlProps } = useFieldComponent(props, "TimeField");
 	return /* @__PURE__ */ jsxs(Aria.TimeField, {
 		hourCycle: 24,
 		...rest,
-		...fieldProps,
+		...wrapperProps,
+		...controlProps,
 		children: [/* @__PURE__ */ jsxs(FieldErrorCaptureContext, { children: [/* @__PURE__ */ jsx(DateInput, {
 			className: TimeField_module_default.dateInput,
 			ref

package/dist/js/packages/components/src/components/TimeField/TimeField.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimeField.mjs","names":[],"sources":["../../../../../../../src/components/TimeField/TimeField.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./TimeField.module.scss\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport DateInput from \"@/components/DateInput\";\n\nexport interface TimeFieldProps<T extends Aria.TimeValue = Aria.TimeValue>\n extends\n PropsWithChildren<Omit<Aria.TimeFieldProps<T>, \"children\">>,\n FlowComponentProps<HTMLSpanElement> {}\n\n/** @flr-generate all */\nexport const TimeField = flowComponent(\"TimeField\", (props) => {\n const { children, ref, ...rest } = props;\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n ~~fieldProps~~,\n } = useFieldComponent(props, \"TimeField\");\n\n return (\n <Aria.TimeField hourCycle={24} {...rest} {...~~fieldProps~~}>\n <FieldErrorCaptureContext>\n <DateInput className={styles.dateInput} ref={ref} />\n <PropsContextProvider props={fieldPropsContext}>\n {children}\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </Aria.TimeField>\n );\n});\n\nexport default TimeField;\n"],"mappings":"~~;;;;;;;;;;;;AAiBA~~,IAAa,YAAY,cAAc,cAAc,UAAU;~~CAC7D~~,MAAM,EAAE,UAAU,KAAK,GAAG,SAAS;~~CAEnC~~,MAAM,EACJ,gBACA,0BACA,mBACA,~~eACE~~,kBAAkB,OAAO,WAAW;CAExC,OACE,qBAAC,KAAK,WAAN;~~EAAgB~~,WAAW;~~EAAI~~,GAAI;~~EAAM~~,GAAI;~~EAA7C~~,UAAA,~~CACE~~,qBAAC,0BAAD,EAAA,UAAA,CACE,oBAAC,WAAD;GAAW,WAAW,yBAAO;GAAgB;EAAM,CAAA,GACnD,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA,CACE,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACH;;AAEpB,CAAC"}
1	+ {"version":3,"file":"TimeField.mjs","names":[],"sources":["../../../../../../../src/components/TimeField/TimeField.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./TimeField.module.scss\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport DateInput from \"@/components/DateInput\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\n\nexport interface TimeFieldProps<T extends Aria.TimeValue = Aria.TimeValue>\n extends\n PropsWithChildren<Omit<Aria.TimeFieldProps<T>, \"children\">>,\n FlowComponentProps<HTMLSpanElement> {}\n\n/** @flr-generate all */\nexport const TimeField = flowComponent(\"TimeField\", (props) => {\n // `null` is what react-aria's time field state uses for \"no time\"\n const { children, ref, ...rest } = useControlledHostValueProps(props, null);\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n wrapperProps,\n controlProps,\n } = useFieldComponent(props, \"TimeField\");\n\n return (\n <Aria.TimeField\n hourCycle={24}\n {...rest}\n {...wrapperProps}\n {...controlProps}\n >\n <FieldErrorCaptureContext>\n <DateInput className={styles.dateInput} ref={ref} />\n <PropsContextProvider props={fieldPropsContext}>\n {children}\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </Aria.TimeField>\n );\n});\n\nexport default TimeField;\n"],"mappings":";;;;;;;;;;;;;AAkBA,IAAa,YAAY,cAAc,cAAc,UAAU;CAE7D,MAAM,EAAE,UAAU,KAAK,GAAG,SAAS,4BAA4B,OAAO,IAAI;CAE1E,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,iBACE,kBAAkB,OAAO,WAAW;CAExC,OACE,qBAAC,KAAK,WAAN;EACE,WAAW;EACX,GAAI;EACJ,GAAI;EACJ,GAAI;EAJN,UAAA,CAME,qBAAC,0BAAD,EAAA,UAAA,CACE,oBAAC,WAAD;GAAW,WAAW,yBAAO;GAAgB;EAAM,CAAA,GACnD,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA,CACE,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACH;;AAEpB,CAAC"}

package/dist/js/packages/components/src/integrations/react-hook-form/components/FormRootError/FormRootError.mjs CHANGED Viewed

@@ -3,17 +3,20 @@
 import { useFormContext } from "../FormContextProvider/FormContextProvider.mjs";
 import FieldErrorView from "../../../../views/FieldErrorView.mjs";
 import { useMountedFormRootErrorComponent } from "./useMountedFormRootErrorComponent.mjs";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx } from "react/jsx-runtime";
 //#region src/integrations/react-hook-form/components/FormRootError/FormRootError.tsx
 /** @flowStatus new */
-var FormRootError = () => {
+var FormRootError = (props) => {
+	const { children } = props;
 	const form = useFormContext().form;
 	useMountedFormRootErrorComponent();
 	const error = form.formState.errors.root;
-	return /* @__PURE__ */ jsx(FieldErrorView, {
+	if (children === void 0) return /* @__PURE__ */ jsx(FieldErrorView, {
 		renderAlert: true,
 		children: error?.message
 	});
+	if (!error) return null;
+	return /* @__PURE__ */ jsx(Fragment, { children: typeof children === "function" ? children(error) : children });
 };
 //#endregion
 export { FormRootError, FormRootError as default };

package/dist/js/packages/components/src/integrations/react-hook-form/components/FormRootError/FormRootError.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormRootError.mjs","names":[],"sources":["../../../../../../../../../src/integrations/react-hook-form/components/FormRootError/FormRootError.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useFormContext } from \"../FormContextProvider\";\nimport FieldErrorView from \"@/views/FieldErrorView\";\nimport { useMountedFormRootErrorComponent } from \"./useMountedFormRootErrorComponent\";\n\n/** @flowStatus new */\nexport const FormRootError: FC = () => {\n const form = useFormContext().form;\n useMountedFormRootErrorComponent();\n const error = form.formState.errors.root;\n return <FieldErrorView renderAlert>{error?.message}</FieldErrorView>;\n};\n\nexport default FormRootError;\n"],"mappings":";;;;;;;;~~AAMA~~,IAAa,~~sBAA0B~~;~~CACrC~~,MAAM,OAAO,eAAe,CAAC,CAAC;CAC9B,iCAAiC;CACjC,MAAM,QAAQ,KAAK,UAAU,OAAO;~~CACpC~~,OAAO,oBAAC,gBAAD;EAAgB,aAAA;EAAa,UAAA,OAAO;CAAwB,CAAA;~~AACrE~~"}
1	+ {"version":3,"file":"FormRootError.mjs","names":[],"sources":["../../../../../../../../../src/integrations/react-hook-form/components/FormRootError/FormRootError.tsx"],"sourcesContent":["import type { FC, ReactNode } from \"react\";\nimport type { FieldErrors } from \"react-hook-form\";\nimport { useFormContext } from \"../FormContextProvider\";\nimport FieldErrorView from \"@/views/FieldErrorView\";\nimport { useMountedFormRootErrorComponent } from \"./useMountedFormRootErrorComponent\";\n\nexport type FormRootErrorValue = NonNullable<FieldErrors[\"root\"]>;\n\nexport interface FormRootErrorProps {\n /*\n Custom content shown instead of the default alert. Rendered only while a\n * root error is set. A function receives the root error, e.g. to pick the\n * content by its `type`.\n /\n children?: ReactNode \| ((error: FormRootErrorValue) => ReactNode);\n}\n\n/* @flowStatus new */\nexport const FormRootError: FC<FormRootErrorProps> = (props) => {\n const { children } = props;\n const form = useFormContext().form;\n useMountedFormRootErrorComponent();\n const error = form.formState.errors.root;\n\n if (children === undefined) {\n return <FieldErrorView renderAlert>{error?.message}</FieldErrorView>;\n }\n\n if (!error) {\n return null;\n }\n\n return <>{typeof children === \"function\" ? children(error) : children}</>;\n};\n\nexport default FormRootError;\n"],"mappings":";;;;;;;;AAkBA,IAAa,iBAAyC,UAAU;CAC9D,MAAM,EAAE,aAAa;CACrB,MAAM,OAAO,eAAe,CAAC,CAAC;CAC9B,iCAAiC;CACjC,MAAM,QAAQ,KAAK,UAAU,OAAO;CAEpC,IAAI,aAAa,KAAA,GACf,OAAO,oBAAC,gBAAD;EAAgB,aAAA;EAAa,UAAA,OAAO;CAAwB,CAAA;CAGrE,IAAI,CAAC,OACH,OAAO;CAGT,OAAO,oBAAA,UAAA,EAAA,UAAG,OAAO,aAAa,aAAa,SAAS,KAAK,IAAI,SAAW,CAAA;AAC1E"}

package/dist/js/packages/components/src/lib/hooks/fieldErrorRenderedContext.mjs ADDED Viewed

@@ -0,0 +1,16 @@
+"use client"
+/* */
+import { createContext } from "react";
+//#region src/lib/hooks/fieldErrorRenderedContext.ts
+/**
+* Lets a rendered `FieldError` tell its field which id it has, so the field
+* references the error only while it exists. `undefined` reports that it is
+* gone.
+*
+* @internal
+*/
+var FieldErrorRenderedContext = createContext(void 0);
+//#endregion
+export { FieldErrorRenderedContext };
+//# sourceMappingURL=fieldErrorRenderedContext.mjs.map

package/dist/js/packages/components/src/lib/hooks/fieldErrorRenderedContext.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"fieldErrorRenderedContext.mjs","names":[],"sources":["../../../../../../../src/lib/hooks/fieldErrorRenderedContext.ts"],"sourcesContent":["import { createContext } from \"react\";\n\n/**\n * Lets a rendered `FieldError` tell its field which id it has, so the field\n * references the error only while it exists. `undefined` reports that it is\n * gone.\n *\n * @internal\n */\nexport const FieldErrorRenderedContext = createContext<\n ((fieldErrorId: string | undefined) => void) | undefined\n>(undefined);\n"],"mappings":";;;;;;;;;;;AASA,IAAa,4BAA4B,cAEvC,KAAA,CAAS"}

package/dist/js/packages/components/src/lib/hooks/useFieldComponent.mjs CHANGED Viewed

@@ -2,12 +2,14 @@
 /* */
 import FormField_module_default from "../../components/FormField/FormField.module.mjs";
 import { useFieldError } from "./useFieldError.mjs";
-import clsx from "clsx";
+import "clsx";
 import { useId } from "react";
 //#region src/lib/hooks/useFieldComponent.tsx
+/** Joins id references, dropping empty ones. @internal */
+var joinIds = (...ids) => ids.filter(Boolean).join(" ") || void 0;
 var useFieldComponent = (props, component) => {
 	const fieldErrorId = useId();
-	const { FieldErrorView, FieldErrorCaptureContext } = useFieldError({
+	const { FieldErrorView, FieldErrorCaptureContext, renderedFieldErrorId } = useFieldError({
 		fieldErrorId,
 		component
 	});
@@ -22,13 +24,12 @@ var useFieldComponent = (props, component) => {
 			},
 			FieldDescription: { className: FormField_module_default.fieldDescription }
 		},
-		fieldProps: {
-			"aria-describedby": props.isInvalid ? fieldErrorId : props["aria-describedby"],
-			className: clsx(FormField_module_default.formField)
-		}
+		wrapperProps: { className: FormField_module_default.formField },
+		controlProps: { "aria-describedby": joinIds(renderedFieldErrorId, props["aria-describedby"]) },
+		renderedFieldErrorId
 	};
 };
 //#endregion
-export { useFieldComponent };
+export { joinIds, useFieldComponent };
 //# sourceMappingURL=useFieldComponent.mjs.map

package/dist/js/packages/components/src/lib/hooks/useFieldComponent.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useFieldComponent.mjs","names":[],"sources":["../../../../../../../src/lib/hooks/useFieldComponent.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useId } from \"react\";\nimport { type PropsContext } from \"@/lib/propsContext\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport { useFieldError } from \"@/lib/hooks/useFieldError\";\nimport ~~clsx,~~ { type ClassValue } from \"clsx\";\nimport type { FlowComponentName } from \"@/components/propTypes\";\n\ninterface FieldComponentProps {\n className?: ClassValue;\n isRequired?: boolean;\n isDisabled?: boolean;\n ~~isInvalid?: boolean;\n~~ \"aria-describedby\"?: string;\n}\n\nexport interface UseFieldComponent {\n FieldErrorCaptureContext: FC<PropsWithChildren>;\n FieldErrorView: FC;\n fieldPropsContext: PropsContext;\n ~~fieldProps~~: {\n \"aria-describedby\"?: string;\n ~~className?:~~ ~~ReturnType<typeof~~ ~~clsx>;\~~n };\n}\n\nexport const useFieldComponent = (\n props: FieldComponentProps,\n component: FlowComponentName,\n): UseFieldComponent => {\n const fieldErrorId = useId();\n const { FieldErrorView, FieldErrorCaptureContext } = useFieldError({\n fieldErrorId,\n component,\n });\n\n // setting up the props context for all components that\n // are part of a form control\n const fieldPropsContext: PropsContext = {\n Label: {\n className: formFieldStyles.label,\n optional: !props.isRequired,\n isDisabled: !!props.isDisabled,\n },\n FieldDescription: {\n className: formFieldStyles.fieldDescription,\n },\n };\n\n return {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n ~~fieldProps~~: {\n \"aria-describedby\": ~~props.isInvalid~~\n ~~? fieldErrorId\~~n : props[\"aria-describedby\"],\n ~~className: clsx(formFieldStyles.formField~~),\n },\n } as const;\n};\n"],"mappings":"~~;;;;;;;AAyBA~~,IAAa,qBACX,OACA,cACsB;CACtB,MAAM,eAAe,MAAM;CAC3B,MAAM,EAAE,gBAAgB,~~6BAA6B~~,cAAc;~~EACjE~~;EACA;CACF,CAAC;~~CAeD~~,OAAO;EACL;EACA;EACA,mBAAA;GAbA,OAAO;IACL,WAAW,yBAAgB;IAC3B,UAAU,CAAC,MAAM;IACjB,YAAY,CAAC,CAAC,MAAM;GACtB;GACA,kBAAkB,EAChB,WAAW,yBAAgB,iBAC7B;EAMA;EACA,~~YAAY~~;~~GACV~~,oBAAoB,~~MAAM~~,~~YACtB~~,~~eACA,~~MAAM~~;GACV~~,~~WAAW~~,~~KAAK,yBAAgB,SAAS~~;~~EAC3C~~;CACF;AACF"}
1	+ {"version":3,"file":"useFieldComponent.mjs","names":[],"sources":["../../../../../../../src/lib/hooks/useFieldComponent.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useId } from \"react\";\nimport { type PropsContext } from \"@/lib/propsContext\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport { useFieldError } from \"@/lib/hooks/useFieldError\";\nimport { type ClassValue } from \"clsx\";\nimport type { FlowComponentName } from \"@/components/propTypes\";\n\ninterface FieldComponentProps {\n className?: ClassValue;\n isRequired?: boolean;\n isDisabled?: boolean;\n \"aria-describedby\"?: string;\n}\n\nexport interface UseFieldComponent {\n FieldErrorCaptureContext: FC<PropsWithChildren>;\n FieldErrorView: FC;\n fieldPropsContext: PropsContext;\n /** For the field's outer element. /\n wrapperProps: {\n className: string;\n };\n /\n For what assistive technology lands on — the input, or the group of a\n * grouped control. Where the react-aria root forwards `aria-describedby` to\n * its input itself, spread it on the root together with `wrapperProps`.\n * Spread it after `rest`: it already contains the consumer's\n * `aria-describedby`, which `rest` would otherwise put back alone.\n /\n controlProps: {\n \"aria-describedby\"?: string;\n };\n /* The id of the error while one is rendered, without the consumer's ids. /\n renderedFieldErrorId?: string;\n}\n\n/* Joins id references, dropping empty ones. @internal */\nexport const joinIds = (...ids: (string \| false \| null \| undefined)[]) =>\n ids.filter(Boolean).join(\" \") \|\| undefined;\n\nexport const useFieldComponent = (\n props: FieldComponentProps,\n component: FlowComponentName,\n): UseFieldComponent => {\n const fieldErrorId = useId();\n const { FieldErrorView, FieldErrorCaptureContext, renderedFieldErrorId } =\n useFieldError({\n fieldErrorId,\n component,\n });\n\n // setting up the props context for all components that\n // are part of a form control\n const fieldPropsContext: PropsContext = {\n Label: {\n className: formFieldStyles.label,\n optional: !props.isRequired,\n isDisabled: !!props.isDisabled,\n },\n FieldDescription: {\n className: formFieldStyles.fieldDescription,\n },\n };\n\n return {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n wrapperProps: {\n className: formFieldStyles.formField,\n },\n controlProps: {\n // Reference the error only while it is rendered – an id that points to\n // nothing fails HTML validators and a11y checks.\n \"aria-describedby\": joinIds(\n renderedFieldErrorId,\n props[\"aria-describedby\"],\n ),\n },\n renderedFieldErrorId,\n } as const;\n};\n"],"mappings":";;;;;;;;AAqCA,IAAa,WAAW,GAAG,QACzB,IAAI,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;AAEnC,IAAa,qBACX,OACA,cACsB;CACtB,MAAM,eAAe,MAAM;CAC3B,MAAM,EAAE,gBAAgB,0BAA0B,yBAChD,cAAc;EACZ;EACA;CACF,CAAC;CAeH,OAAO;EACL;EACA;EACA,mBAAA;GAbA,OAAO;IACL,WAAW,yBAAgB;IAC3B,UAAU,CAAC,MAAM;IACjB,YAAY,CAAC,CAAC,MAAM;GACtB;GACA,kBAAkB,EAChB,WAAW,yBAAgB,iBAC7B;EAMA;EACA,cAAc,EACZ,WAAW,yBAAgB,UAC7B;EACA,cAAc,EAGZ,oBAAoB,QAClB,sBACA,MAAM,mBACR,EACF;EACA;CACF;AACF"}

package/dist/js/packages/components/src/lib/hooks/useFieldError.mjs CHANGED Viewed

@@ -5,7 +5,8 @@ import { PropsContextProvider } from "../propsContext/components/PropsContextPro
 import { ClearPropsContext } from "../propsContext/components/ClearPropsContext.mjs";
 import { UiComponentTunnelExit } from "../../components/UiComponentTunnel/UiComponentTunnelExit.mjs";
 import FormField_module_default from "../../components/FormField/FormField.module.mjs";
-import React, { useMemo } from "react";
+import { FieldErrorRenderedContext } from "./fieldErrorRenderedContext.mjs";
+import React, { useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/lib/hooks/useFieldError.tsx
 var useFieldError = (options) => {
@@ -19,27 +20,39 @@ var useFieldError = (options) => {
 		},
 		className: FormField_module_default.fieldError
 	} };
-	const FieldErrorCaptureContext = useMemo(() => (props) => {
-		return /* @__PURE__ */ jsx(PropsContextProvider, {
-			props: fieldErrorCapturePropsContext,
-			dependencies: [tunnelId],
-			children: props.children
-		});
-	}, [tunnelId]);
-	const FieldErrorView = () => {
-		if (currentTunnelId) return null;
-		return /* @__PURE__ */ jsx(UiComponentTunnelExit, {
-			id: tunnelId,
-			component: options.component,
-			children: (children) => {
-				const childrenArray = React.Children.toArray(children);
-				return /* @__PURE__ */ jsx(ClearPropsContext, { children: childrenArray[0] });
-			}
-		});
-	};
+	const [renderedFieldErrorId, setRenderedFieldErrorId] = useState();
 	return {
-		FieldErrorCaptureContext,
-		FieldErrorView
+		FieldErrorCaptureContext: useMemo(() => (props) => {
+			return /* @__PURE__ */ jsx(PropsContextProvider, {
+				props: fieldErrorCapturePropsContext,
+				dependencies: [tunnelId],
+				children: props.children
+			});
+		}, [tunnelId]),
+		FieldErrorView: useMemo(() => () => {
+			if (currentTunnelId) return null;
+			return /* @__PURE__ */ jsx(FieldErrorRenderedContext, {
+				value: setRenderedFieldErrorId,
+				children: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
+					id: tunnelId,
+					component: options.component,
+					children: (children) => {
+						const childrenArray = React.Children.toArray(children);
+						return /* @__PURE__ */ jsx(ClearPropsContext, { children: childrenArray[0] });
+					}
+				})
+			});
+		}, [
+			currentTunnelId,
+			tunnelId,
+			options.component
+		]),
+		/**
+		* The id of the error while one is rendered for this field. A nested field
+		* (a `Checkbox` inside a `CheckboxButton`) renders its error at the outer
+		* one, so only the outer field ever gets an id here.
+		*/
+		renderedFieldErrorId
 	};
 };
 //#endregion

package/dist/js/packages/components/src/lib/hooks/useFieldError.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useFieldError.mjs","names":[],"sources":["../../../../../../../src/lib/hooks/useFieldError.tsx"],"sourcesContent":["import React, { type FC, type PropsWithChildren, useMemo } from \"react\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport ClearPropsContext from \"@/lib/propsContext/components/ClearPropsContext\";\nimport { useProps } from \"@/lib/hooks/useProps\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport type { FlowComponentName } from \"@/components/propTypes\";\n\nexport interface UseFieldErrorOptions {\n fieldErrorId: string;\n tunnelId?: string;\n component: FlowComponentName;\n}\n\nexport const useFieldError = (options: UseFieldErrorOptions) => {\n const fieldErrorProps = useProps(\"FieldError\", {});\n const currentTunnelId = fieldErrorProps.tunnel?.id;\n const tunnelId =\n options.tunnelId ?? currentTunnelId ?? `${options.fieldErrorId}.fieldError`;\n\n const fieldErrorCapturePropsContext: PropsContext = {\n FieldError: {\n id: options.fieldErrorId,\n tunnel: { id: tunnelId, component: options.component },\n className: formFieldStyles.fieldError,\n },\n };\n\n const FieldErrorCaptureContext: FC<PropsWithChildren> = useMemo(\n () => (props) => {\n return (\n <PropsContextProvider\n props={fieldErrorCapturePropsContext}\n dependencies={[tunnelId]}\n >\n {props.children}\n </PropsContextProvider>\n );\n },\n [tunnelId],\n );\n\n const FieldErrorView = () => {\n if (currentTunnelId) {\n return null;\n }\n\n return (\n <UiComponentTunnelExit id={tunnelId} component={options.component}>\n {(children) => {\n const childrenArray = React.Children.toArray(children);\n return <ClearPropsContext>{childrenArray[0]}</ClearPropsContext>;\n }}\n </UiComponentTunnelExit>\n );\n };\n\n return {\n FieldErrorCaptureContext,\n FieldErrorView,\n } as const;\n};\n"],"mappings":"~~;;;;;;;;;;AAcA~~,IAAa,iBAAiB,YAAkC;CAE9D,MAAM,kBADkB,SAAS,cAAc,CAAC,CACxB,CAAA,CAAgB,QAAQ;CAChD,MAAM,WACJ,QAAQ,YAAY,mBAAmB,GAAG,QAAQ,aAAa;CAEjE,MAAM,gCAA8C,EAClD,YAAY;EACV,IAAI,QAAQ;EACZ,QAAQ;GAAE,IAAI;GAAU,WAAW,QAAQ;EAAU;EACrD,WAAW,yBAAgB;CAC7B,EACF;CAEA,MAAM,~~2BAAkD~~,eAC/C,UAAU;~~EACf~~,OACE,oBAAC,sBAAD;~~GACE~~,OAAO;~~GACP~~,cAAc,CAAC,QAAQ;~~GAEtB~~,UAAA,MAAM;~~EACa~~,CAAA;~~CAE1B~~,GACA,CAAC,QAAQ,~~CACX~~;~~CAEA~~,~~MAAM~~,~~uBAAuB~~;~~EAC3B~~,IAAI,iBACF,OAAO;~~EAGT~~,OACE,oBAAC,uBAAD;~~GAAuB~~,IAAI;~~GAAU~~,WAAW,QAAQ;~~GACpD~~,WAAA,aAAa;~~IACb~~,MAAM,gBAAgB,MAAM,SAAS,QAAQ,QAAQ;~~IACrD~~,OAAO,oBAAC,mBAAD,EAAA,UAAoB,cAAc,GAAsB,CAAA;~~GACjE~~;~~EACqB~~,CAAA;~~CAE3B~~;~~CAEA~~,~~OAAO~~;~~EACL~~;~~EACA~~;CACF;AACF"}
1	+ {"version":3,"file":"useFieldError.mjs","names":[],"sources":["../../../../../../../src/lib/hooks/useFieldError.tsx"],"sourcesContent":["import React, {\n type FC,\n type PropsWithChildren,\n useMemo,\n useState,\n} from \"react\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport ClearPropsContext from \"@/lib/propsContext/components/ClearPropsContext\";\nimport { useProps } from \"@/lib/hooks/useProps\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport type { FlowComponentName } from \"@/components/propTypes\";\nimport { FieldErrorRenderedContext } from \"@/lib/hooks/fieldErrorRenderedContext\";\n\nexport interface UseFieldErrorOptions {\n fieldErrorId: string;\n tunnelId?: string;\n component: FlowComponentName;\n}\n\nexport const useFieldError = (options: UseFieldErrorOptions) => {\n const fieldErrorProps = useProps(\"FieldError\", {});\n const currentTunnelId = fieldErrorProps.tunnel?.id;\n const tunnelId =\n options.tunnelId ?? currentTunnelId ?? `${options.fieldErrorId}.fieldError`;\n\n const fieldErrorCapturePropsContext: PropsContext = {\n FieldError: {\n id: options.fieldErrorId,\n tunnel: { id: tunnelId, component: options.component },\n className: formFieldStyles.fieldError,\n },\n };\n\n const [renderedFieldErrorId, setRenderedFieldErrorId] = useState<string>();\n\n const FieldErrorCaptureContext: FC<PropsWithChildren> = useMemo(\n () => (props) => {\n return (\n <PropsContextProvider\n props={fieldErrorCapturePropsContext}\n dependencies={[tunnelId]}\n >\n {props.children}\n </PropsContextProvider>\n );\n },\n [tunnelId],\n );\n\n // Keep the component identity stable: a new one per render makes React\n // remount the error on every render of the field (each keystroke).\n const FieldErrorView: FC = useMemo(\n () => () => {\n if (currentTunnelId) {\n return null;\n }\n\n return (\n <FieldErrorRenderedContext value={setRenderedFieldErrorId}>\n <UiComponentTunnelExit id={tunnelId} component={options.component}>\n {(children) => {\n const childrenArray = React.Children.toArray(children);\n return <ClearPropsContext>{childrenArray[0]}</ClearPropsContext>;\n }}\n </UiComponentTunnelExit>\n </FieldErrorRenderedContext>\n );\n },\n [currentTunnelId, tunnelId, options.component],\n );\n\n return {\n FieldErrorCaptureContext,\n FieldErrorView,\n /*\n The id of the error while one is rendered for this field. A nested field\n * (a `Checkbox` inside a `CheckboxButton`) renders its error at the outer\n * one, so only the outer field ever gets an id here.\n */\n renderedFieldErrorId,\n } as const;\n};\n"],"mappings":";;;;;;;;;;;AAoBA,IAAa,iBAAiB,YAAkC;CAE9D,MAAM,kBADkB,SAAS,cAAc,CAAC,CACxB,CAAA,CAAgB,QAAQ;CAChD,MAAM,WACJ,QAAQ,YAAY,mBAAmB,GAAG,QAAQ,aAAa;CAEjE,MAAM,gCAA8C,EAClD,YAAY;EACV,IAAI,QAAQ;EACZ,QAAQ;GAAE,IAAI;GAAU,WAAW,QAAQ;EAAU;EACrD,WAAW,yBAAgB;CAC7B,EACF;CAEA,MAAM,CAAC,sBAAsB,2BAA2B,SAAiB;CAsCzE,OAAO;EACL,0BArCsD,eAC/C,UAAU;GACf,OACE,oBAAC,sBAAD;IACE,OAAO;IACP,cAAc,CAAC,QAAQ;IAEtB,UAAA,MAAM;GACa,CAAA;EAE1B,GACA,CAAC,QAAQ,CA0BT;EACA,gBAtByB,oBACb;GACV,IAAI,iBACF,OAAO;GAGT,OACE,oBAAC,2BAAD;IAA2B,OAAO;IAChC,UAAA,oBAAC,uBAAD;KAAuB,IAAI;KAAU,WAAW,QAAQ;KACpD,WAAA,aAAa;MACb,MAAM,gBAAgB,MAAM,SAAS,QAAQ,QAAQ;MACrD,OAAO,oBAAC,mBAAD,EAAA,UAAoB,cAAc,GAAsB,CAAA;KACjE;IACqB,CAAA;GACE,CAAA;EAE/B,GACA;GAAC;GAAiB;GAAU,QAAQ;EAAS,CAK7C;;;;;;EAMA;CACF;AACF"}

package/dist/types/components/ActionGroup/ActionGroup.d.ts CHANGED Viewed

@@ -8,8 +8,9 @@ export interface ActionGroupProps extends PropsWithChildren, FlowComponentProps<
     /** The size of the buttons and links inside the action group. @default "m" */
     size?: ButtonProps["size"];
     /**
-     * When set, the buttons are not sorted automatically but stay in source
-     * order. @default false
+     * When set, the buttons are not sorted into the slots `primary`, `secondary`
+     * and `abort` but stay in source order. Use it when the actions have no such
+     * hierarchy, e.g. a row of equal actions or icon buttons. @default false
      */
     preserveOrder?: boolean;
 }

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

@@ -3,7 +3,13 @@ import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
 import { AlphaColor } from '../../lib/types/props';
 import * as Aria from "react-aria-components";
 export interface ButtonProps extends PropsWithChildren<Aria.ButtonProps>, FlowComponentProps<HTMLButtonElement> {
-    /** Slot for button placement in action groups. */
+    /**
+     * Slot for button placement in action groups: `primary` (at the end),
+     * `secondary` (before the primary action) or `abort` (at the start). Without
+     * a slot, an action group places the colors primary, success and danger in
+     * `primary` and every other color in `abort`. A secondary-colored button that
+     * does not abort therefore needs `slot="secondary"`.
+     */
     slot?: string;
     /**
      * The color of the button.

package/dist/types/components/CartesianChart/components/YAxis/YAxis.d.ts CHANGED Viewed

@@ -4,6 +4,13 @@ import * as Recharts from "recharts";
 export type YAxisProps<TData extends ChartDataValue = ChartDataValue, TDataKey extends DataKey<TData> = DataKey<TData>, TDataMatch = DataKeyValue<TData, TDataKey>> = Pick<Recharts.YAxisProps, "className" | "orientation" | "allowDecimals" | "interval" | "minTickGap" | "scale" | "type" | "domain" | "hide" | "unit"> & {
     dataKey?: TDataKey;
     tickFormatter?: (value: TDataMatch, index: number) => string;
+    /**
+     * The width of the axis in pixels. `"auto"` sizes the axis to its widest tick
+     * label. Defaults to `"auto"` for a category axis (e.g. with `layout` set to
+     * `"vertical"`) and to `60` otherwise. Pin a number to align the plot areas
+     * of synchronized charts.
+     */
+    width?: number | "auto";
 };
 /**
  * `tickFormatter` is deliberately not part of the remote surface. A function

package/dist/types/components/FileField/FileField.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
 import { FileInputOnChangeHandler } from './components/FileInput';
 import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
 import type * as Aria from "react-aria-components";
-export interface FileFieldProps extends PropsWithChildren, FlowComponentProps<HTMLInputElement>, Pick<Aria.InputProps, "accept" | "multiple" | "name">, Pick<Aria.TextFieldProps, "isRequired" | "isInvalid" | "validationBehavior" | "isDisabled"> {
+export interface FileFieldProps extends PropsWithChildren, FlowComponentProps<HTMLInputElement>, Pick<Aria.InputProps, "accept" | "multiple" | "name" | "aria-describedby">, Pick<Aria.TextFieldProps, "isRequired" | "isInvalid" | "validationBehavior" | "isDisabled"> {
     /** Handler that is called when the file input changes. */
     onChange?: FileInputOnChangeHandler;
     /** Whether the component is read only. */

package/dist/types/components/Flex/Flex.d.ts CHANGED Viewed

@@ -19,6 +19,10 @@ export interface FlexProps extends PropsWithChildren, PropsWithClassName, PropsW
     wrap?: CSSProperties["flexWrap"];
     /** The padding of the element. */
     padding?: "xs" | "s" | "m" | "l" | "xl";
+    /** The padding top and bottom of the element. Takes precedence over `padding`. */
+    paddingBlock?: "xs" | "s" | "m" | "l" | "xl";
+    /** The padding left and right of the element. Takes precedence over `padding`. */
+    paddingInline?: "xs" | "s" | "m" | "l" | "xl";
     /** The padding top of the element. */
     paddingTop?: "xs" | "s" | "m" | "l" | "xl";
     /** The padding bottom of the element. */