@mittwald/flow-react-components 1.5.0-next.43 → 1.5.0-next.45
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.
- package/dist/assets/component-index.json +1 -1
- package/dist/assets/doc-properties.json +1 -1
- package/dist/css/all-layered.css +1 -1
- package/dist/css/all.css +1 -1
- package/dist/js/packages/components/src/components/FileField/components/FileInput.mjs +1 -0
- package/dist/js/packages/components/src/components/FileField/components/FileInput.mjs.map +1 -1
- package/dist/js/packages/components/src/components/HeaderNavigation/HeaderNavigation.mjs +14 -5
- package/dist/js/packages/components/src/components/HeaderNavigation/HeaderNavigation.mjs.map +1 -1
- package/dist/js/packages/components/src/components/HeaderNavigation/HeaderNavigation.module.mjs.map +1 -1
- package/dist/js/packages/components/src/integrations/react-hook-form/components/Field/Field.mjs +5 -2
- package/dist/js/packages/components/src/integrations/react-hook-form/components/Field/Field.mjs.map +1 -1
- package/package.json +9 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.mjs","names":["styles"],"sources":["../../../../../../../../src/components/FileField/components/FileInput.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref } from \"react\";\nimport { type ChangeEvent } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./FileInput.module.scss\";\nimport { useVisuallyHidden } from \"react-aria\";\n\nexport type FileInputOnChangeHandler = (files: FileList | null) => void;\n\n/** @internal */\nexport interface FileInputProps extends PropsWithChildren {\n onChange?: FileInputOnChangeHandler;\n isDisabled?: boolean;\n ref?: Ref<HTMLInputElement>;\n isReadOnly?: boolean;\n}\n\n/** @internal */\nexport const FileInput: FC<FileInputProps> = (props) => {\n const { children, isDisabled, onChange, isReadOnly, ref, ...restInputProps } =\n props;\n const inputRef = useObjectRef(ref);\n const { visuallyHiddenProps } = useVisuallyHidden();\n\n const handlePress = () => {\n if (inputRef.current?.value) {\n inputRef.current.value = \"\";\n onChange?.(null);\n }\n inputRef.current?.click();\n };\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n onChange?.(event.target.files);\n };\n\n const propsContext: PropsContext = {\n Button: {\n onPress: handlePress,\n className: styles.trigger,\n isDisabled,\n isReadOnly,\n },\n FieldDescription: { className: styles.fieldDescription },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n {children}\n <Aria.Input\n {...restInputProps}\n {...visuallyHiddenProps}\n type=\"file\"\n ref={inputRef}\n onChange={handleChange}\n onClick={(event) => event.stopPropagation()}\n />\n </PropsContextProvider>\n );\n};\n"],"mappings":";;;;;;;;;;;AAoBA,IAAa,aAAiC,UAAU;CACtD,MAAM,EAAE,UAAU,YAAY,UAAU,YAAY,KAAK,GAAG,mBAC1D;CACF,MAAM,WAAW,aAAa,GAAG;CACjC,MAAM,EAAE,wBAAwB,kBAAkB;CAElD,MAAM,oBAAoB;EACxB,IAAI,SAAS,SAAS,OAAO;GAC3B,SAAS,QAAQ,QAAQ;GACzB,WAAW,IAAI;EACjB;EACA,SAAS,SAAS,MAAM;CAC1B;CAEA,MAAM,gBAAgB,UAAyC;EAC7D,WAAW,MAAM,OAAO,KAAK;CAC/B;CAEA,MAAM,eAA6B;EACjC,QAAQ;GACN,SAAS;GACT,WAAWA,yBAAO;GAClB;GACA;EACF;EACA,kBAAkB,EAAE,WAAWA,yBAAO,iBAAiB;CACzD;CAEA,OACE,qBAAC,sBAAD;EAAsB,OAAO;EAA7B,UAAA,CACG,UACD,oBAAC,KAAK,OAAN;GACE,GAAI;GACJ,GAAI;GACJ,MAAK;GACL,KAAK;GACL,UAAU;GACV,UAAU,UAAU,MAAM,gBAAgB;EAC3C,CAAA,CACmB;;AAE1B"}
|
|
1
|
+
{"version":3,"file":"FileInput.mjs","names":["styles"],"sources":["../../../../../../../../src/components/FileField/components/FileInput.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref } from \"react\";\nimport { type ChangeEvent } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./FileInput.module.scss\";\nimport { useVisuallyHidden } from \"react-aria\";\n\nexport type FileInputOnChangeHandler = (files: FileList | null) => void;\n\n/** @internal */\nexport interface FileInputProps extends PropsWithChildren {\n onChange?: FileInputOnChangeHandler;\n isDisabled?: boolean;\n ref?: Ref<HTMLInputElement>;\n isReadOnly?: boolean;\n}\n\n/** @internal */\nexport const FileInput: FC<FileInputProps> = (props) => {\n const { children, isDisabled, onChange, isReadOnly, ref, ...restInputProps } =\n props;\n const inputRef = useObjectRef(ref);\n const { visuallyHiddenProps } = useVisuallyHidden();\n\n const handlePress = () => {\n if (inputRef.current?.value) {\n inputRef.current.value = \"\";\n onChange?.(null);\n }\n inputRef.current?.click();\n };\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n onChange?.(event.target.files);\n };\n\n const propsContext: PropsContext = {\n Button: {\n onPress: handlePress,\n className: styles.trigger,\n isDisabled,\n isReadOnly,\n },\n FieldDescription: { className: styles.fieldDescription },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n {children}\n <Aria.Input\n {...restInputProps}\n {...visuallyHiddenProps}\n type=\"file\"\n disabled={isDisabled}\n ref={inputRef}\n onChange={handleChange}\n onClick={(event) => event.stopPropagation()}\n />\n </PropsContextProvider>\n );\n};\n"],"mappings":";;;;;;;;;;;AAoBA,IAAa,aAAiC,UAAU;CACtD,MAAM,EAAE,UAAU,YAAY,UAAU,YAAY,KAAK,GAAG,mBAC1D;CACF,MAAM,WAAW,aAAa,GAAG;CACjC,MAAM,EAAE,wBAAwB,kBAAkB;CAElD,MAAM,oBAAoB;EACxB,IAAI,SAAS,SAAS,OAAO;GAC3B,SAAS,QAAQ,QAAQ;GACzB,WAAW,IAAI;EACjB;EACA,SAAS,SAAS,MAAM;CAC1B;CAEA,MAAM,gBAAgB,UAAyC;EAC7D,WAAW,MAAM,OAAO,KAAK;CAC/B;CAEA,MAAM,eAA6B;EACjC,QAAQ;GACN,SAAS;GACT,WAAWA,yBAAO;GAClB;GACA;EACF;EACA,kBAAkB,EAAE,WAAWA,yBAAO,iBAAiB;CACzD;CAEA,OACE,qBAAC,sBAAD;EAAsB,OAAO;EAA7B,UAAA,CACG,UACD,oBAAC,KAAK,OAAN;GACE,GAAI;GACJ,GAAI;GACJ,MAAK;GACL,UAAU;GACV,KAAK;GACL,UAAU;GACV,UAAU,UAAU,MAAM,gBAAgB;EAC3C,CAAA,CACmB;;AAE1B"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
/* */
|
|
3
3
|
import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
|
|
4
4
|
import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
|
|
5
|
+
import { containsTextChild } from "../../lib/react/remote.mjs";
|
|
5
6
|
import { isAlphaColor } from "../../lib/types/props.mjs";
|
|
6
7
|
import { Text } from "../Text/Text.mjs";
|
|
7
8
|
import HeaderNavigation_module_default from "./HeaderNavigation.module.mjs";
|
|
@@ -12,20 +13,28 @@ import { jsx } from "react/jsx-runtime";
|
|
|
12
13
|
var HeaderNavigation = (props) => {
|
|
13
14
|
const { children, className, color = "default", ...rest } = props;
|
|
14
15
|
const rootClassName = clsx(HeaderNavigation_module_default.headerNavigation, isAlphaColor(color) && HeaderNavigation_module_default[color], className);
|
|
16
|
+
const buttonPropsContext = {
|
|
17
|
+
className: HeaderNavigation_module_default.button,
|
|
18
|
+
color: isAlphaColor(color) ? color : "secondary",
|
|
19
|
+
variant: "plain"
|
|
20
|
+
};
|
|
15
21
|
const propsContext = {
|
|
16
22
|
Link: {
|
|
17
23
|
wrapWith: /* @__PURE__ */ jsx("li", { className: HeaderNavigation_module_default.item }),
|
|
18
24
|
className: HeaderNavigation_module_default.link,
|
|
19
25
|
unstyled: true,
|
|
20
|
-
|
|
26
|
+
/**
|
|
27
|
+
* `Text` clears the props context, so a link combined with a button must
|
|
28
|
+
* not get it — the button would lose the context of `Link`.
|
|
29
|
+
*/
|
|
30
|
+
children: dynamic((props) => containsTextChild(props.children) ? /* @__PURE__ */ jsx(Text, {
|
|
21
31
|
emulateBoldWidth: true,
|
|
22
32
|
children: props.children
|
|
23
|
-
}))
|
|
33
|
+
}) : props.children),
|
|
34
|
+
Button: buttonPropsContext
|
|
24
35
|
},
|
|
25
36
|
Button: {
|
|
26
|
-
|
|
27
|
-
color: isAlphaColor(color) ? color : "secondary",
|
|
28
|
-
variant: "plain",
|
|
37
|
+
...buttonPropsContext,
|
|
29
38
|
wrapWith: /* @__PURE__ */ jsx("li", { className: HeaderNavigation_module_default.item })
|
|
30
39
|
}
|
|
31
40
|
};
|
package/dist/js/packages/components/src/components/HeaderNavigation/HeaderNavigation.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderNavigation.mjs","names":["styles"],"sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./HeaderNavigation.module.scss\";\nimport {\n type AlphaColor,\n isAlphaColor,\n type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { Text } from \"@/components/Text\";\n\nexport interface HeaderNavigationProps\n extends PropsWithChildren<ComponentProps<\"nav\">>, PropsWithClassName {\n /** The color of the header navigation. @default \"default\" */\n color?: \"default\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const HeaderNavigation: FC<HeaderNavigationProps> = (props) => {\n const { children, className, color = \"default\", ...rest } = props;\n\n const rootClassName = clsx(\n styles.headerNavigation,\n isAlphaColor(color) && styles[color],\n className,\n );\n\n const propsContext: PropsContext = {\n Link: {\n wrapWith: <li className={styles.item} />,\n className: styles.link,\n unstyled: true,\n children: dynamic((props)
|
|
1
|
+
{"version":3,"file":"HeaderNavigation.mjs","names":["styles"],"sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./HeaderNavigation.module.scss\";\nimport {\n type AlphaColor,\n isAlphaColor,\n type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { Text } from \"@/components/Text\";\nimport { containsTextChild } from \"@/lib/react/remote\";\n\nexport interface HeaderNavigationProps\n extends PropsWithChildren<ComponentProps<\"nav\">>, PropsWithClassName {\n /** The color of the header navigation. @default \"default\" */\n color?: \"default\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const HeaderNavigation: FC<HeaderNavigationProps> = (props) => {\n const { children, className, color = \"default\", ...rest } = props;\n\n const rootClassName = clsx(\n styles.headerNavigation,\n isAlphaColor(color) && styles[color],\n className,\n );\n\n const buttonPropsContext = {\n className: styles.button,\n color: isAlphaColor(color) ? color : \"secondary\",\n variant: \"plain\",\n } as const;\n\n const propsContext: PropsContext = {\n Link: {\n wrapWith: <li className={styles.item} />,\n className: styles.link,\n unstyled: true,\n /**\n * `Text` clears the props context, so a link combined with a button must\n * not get it — the button would lose the context of `Link`.\n */\n children: dynamic((props) =>\n containsTextChild(props.children) ? (\n <Text emulateBoldWidth>{props.children}</Text>\n ) : (\n props.children\n ),\n ),\n Button: buttonPropsContext,\n },\n Button: {\n ...buttonPropsContext,\n wrapWith: <li className={styles.item} />,\n },\n };\n\n return (\n <nav className={rootClassName} role=\"navigation\" {...rest}>\n <ul className={styles.list}>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </ul>\n </nav>\n );\n};\n\nexport default HeaderNavigation;\n"],"mappings":";;;;;;;;;;;;AAuBA,IAAa,oBAA+C,UAAU;CACpE,MAAM,EAAE,UAAU,WAAW,QAAQ,WAAW,GAAG,SAAS;CAE5D,MAAM,gBAAgB,KACpBA,gCAAO,kBACP,aAAa,KAAK,KAAKA,gCAAO,QAC9B,SACF;CAEA,MAAM,qBAAqB;EACzB,WAAWA,gCAAO;EAClB,OAAO,aAAa,KAAK,IAAI,QAAQ;EACrC,SAAS;CACX;CAEA,MAAM,eAA6B;EACjC,MAAM;GACJ,UAAU,oBAAC,MAAD,EAAI,WAAWA,gCAAO,KAAO,CAAA;GACvC,WAAWA,gCAAO;GAClB,UAAU;;;;;GAKV,UAAU,SAAS,UACjB,kBAAkB,MAAM,QAAQ,IAC9B,oBAAC,MAAD;IAAM,kBAAA;IAAkB,UAAA,MAAM;GAAe,CAAA,IAE7C,MAAM,QAEV;GACA,QAAQ;EACV;EACA,QAAQ;GACN,GAAG;GACH,UAAU,oBAAC,MAAD,EAAI,WAAWA,gCAAO,KAAO,CAAA;EACzC;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW;EAAe,MAAK;EAAa,GAAI;EACnD,UAAA,oBAAC,MAAD;GAAI,WAAWA,gCAAO;GACpB,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACpB,CAAA;CACD,CAAA;AAET"}
|
package/dist/js/packages/components/src/components/HeaderNavigation/HeaderNavigation.module.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderNavigation.module.mjs","names":[],"sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.headerNavigation {\n .list {\n display: flex;\n flex-flow: row wrap;\n align-items: center;\n gap: var(--header-navigation--spacing);\n }\n\n .item {\n list-style: none;\n }\n\n .link {\n padding: var(--header-navigation--padding);\n border-radius: var(--header-navigation--corner-radius);\n color: var(--header-navigation--color);\n position: relative;\n\n @include focus.focus;\n\n &:hover:not([aria-current]) {\n background-color: var(--header-navigation--background-color--hover);\n }\n\n &[data-pressed]:not([aria-current]) {\n background-color: var(--header-navigation--background-color--pressed);\n }\n\n &[aria-current] {\n font-weight: var(--header-navigation--font-weight-current);\n\n &::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n inset-inline: 0;\n background-color: var(--header-navigation--color);\n height: var(--header-navigation--underline-width-current);\n }\n }\n }\n\n .button {\n color: var(--header-navigation--color);\n border-radius: var(--header-navigation--corner-radius-round);\n\n &:hover,\n &[data-pressed] {\n color: var(--header-navigation--color);\n }\n }\n\n /* Color */\n\n @mixin color($color) {\n &.#{$color} {\n .link,\n .button {\n color: var(--header-navigation--color-#{$color});\n\n &:hover:not([aria-current]) {\n background-color: var(\n --header-navigation--background-color-#{$color}--hover\n );\n }\n\n &[data-pressed]:not([aria-current]) {\n background-color: var(\n --header-navigation--background-color-#{$color}--pressed\n );\n }\n\n &[aria-current] {\n &::after {\n background-color: var(--header-navigation--color-#{$color});\n }\n }\n }\n }\n }\n\n @include color(dark);\n @include color(light);\n @include color(dark-static);\n @include color(light-static);\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"HeaderNavigation.module.mjs","names":[],"sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.headerNavigation {\n .list {\n display: flex;\n flex-flow: row wrap;\n align-items: center;\n gap: var(--header-navigation--spacing);\n }\n\n .item {\n list-style: none;\n }\n\n .link {\n padding: var(--header-navigation--padding);\n border-radius: var(--header-navigation--corner-radius);\n color: var(--header-navigation--color);\n position: relative;\n\n @include focus.focus;\n\n /* Combined with a Button, the Button carries the look */\n &:has(> .button) {\n display: block;\n padding: 0;\n border-radius: var(--header-navigation--corner-radius-round);\n }\n }\n\n .link:not(:has(> .button)) {\n &:hover:not([aria-current]) {\n background-color: var(--header-navigation--background-color--hover);\n }\n\n &[data-pressed]:not([aria-current]) {\n background-color: var(--header-navigation--background-color--pressed);\n }\n\n &[aria-current] {\n font-weight: var(--header-navigation--font-weight-current);\n\n &::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n inset-inline: 0;\n background-color: var(--header-navigation--color);\n height: var(--header-navigation--underline-width-current);\n }\n }\n }\n\n .button {\n color: var(--header-navigation--color);\n border-radius: var(--header-navigation--corner-radius-round);\n\n &:hover,\n &[data-pressed] {\n color: var(--header-navigation--color);\n }\n }\n\n /* Color */\n\n @mixin color($color) {\n &.#{$color} {\n .link,\n .button {\n color: var(--header-navigation--color-#{$color});\n }\n\n .link:not(:has(> .button)),\n .button {\n &:hover:not([aria-current]) {\n background-color: var(\n --header-navigation--background-color-#{$color}--hover\n );\n }\n\n &[data-pressed]:not([aria-current]) {\n background-color: var(\n --header-navigation--background-color-#{$color}--pressed\n );\n }\n\n &[aria-current] {\n &::after {\n background-color: var(--header-navigation--color-#{$color});\n }\n }\n }\n }\n }\n\n @include color(dark);\n @include color(light);\n @include color(dark-static);\n @include color(light-static);\n}\n"],"mappings":""}
|
package/dist/js/packages/components/src/integrations/react-hook-form/components/Field/Field.mjs
CHANGED
|
@@ -59,8 +59,10 @@ function Field(props) {
|
|
|
59
59
|
name
|
|
60
60
|
}) ?? controller.field.value;
|
|
61
61
|
const isFieldInvalid = controller.fieldState.invalid;
|
|
62
|
+
const { disabled, ...controllerFieldProps } = controller.field;
|
|
62
63
|
const fieldProps = {
|
|
63
|
-
...
|
|
64
|
+
...controllerFieldProps,
|
|
65
|
+
...disabled && { isDisabled: dynamic(() => true) },
|
|
64
66
|
value,
|
|
65
67
|
name,
|
|
66
68
|
form: formContext.id,
|
|
@@ -73,6 +75,7 @@ function Field(props) {
|
|
|
73
75
|
return /* @__PURE__ */ jsxs(Fragment$1, { children: [p.children, /* @__PURE__ */ jsx(FieldErrorView, { children: controller.fieldState.error?.message })] });
|
|
74
76
|
})
|
|
75
77
|
};
|
|
78
|
+
const { isDisabled: ignoredIsDisabled, ...codeEditorFieldProps } = fieldProps;
|
|
76
79
|
const propsContext = {
|
|
77
80
|
Autocomplete: {
|
|
78
81
|
SearchField: fieldProps,
|
|
@@ -82,7 +85,7 @@ function Field(props) {
|
|
|
82
85
|
TextField: fieldProps,
|
|
83
86
|
TextArea: fieldProps,
|
|
84
87
|
MarkdownEditor: fieldProps,
|
|
85
|
-
CodeEditor:
|
|
88
|
+
CodeEditor: codeEditorFieldProps,
|
|
86
89
|
Checkbox: {
|
|
87
90
|
...fieldProps,
|
|
88
91
|
isSelected: value
|
package/dist/js/packages/components/src/integrations/react-hook-form/components/Field/Field.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.mjs","names":["locales","_Fragment"],"sources":["../../../../../../../../../src/integrations/react-hook-form/components/Field/Field.tsx"],"sourcesContent":["import { useFormContext } from \"@/integrations/react-hook-form/components/FormContextProvider/FormContextProvider\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { type PropsWithChildren } from \"react\";\nimport {\n type ControllerProps,\n type FieldValues,\n useController,\n type UseFormReturn,\n useWatch,\n} from \"react-hook-form\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport FieldErrorView from \"@/views/FieldErrorView\";\nimport { useUpdateFormDefaultValue } from \"@/integrations/react-hook-form/components/Field/hooks/useUpdateFormDefaultValue\";\n\nexport interface FieldProps<T extends FieldValues>\n extends Omit<ControllerProps<T>, \"render\">, PropsWithChildren {}\n\nexport function Field<T extends FieldValues>(props: FieldProps<T>) {\n const { children, name, defaultValue, ...rest } = props;\n\n const stringFormatter = useLocalizedStringFormatter(\n locales,\n \"ReactHookForm.Field\",\n );\n\n const controller = useController({\n ...props,\n rules: {\n ...props.rules,\n min:\n typeof rest.rules?.min === \"number\"\n ? {\n value: rest.rules.min,\n message: stringFormatter.format(\"validation.min\", {\n number: rest.rules.min,\n }),\n }\n : rest.rules?.min,\n max:\n typeof rest.rules?.max === \"number\"\n ? {\n value: rest.rules.max,\n message: stringFormatter.format(\"validation.max\", {\n number: rest.rules.max,\n }),\n }\n : rest.rules?.max,\n required:\n typeof rest.rules?.required === \"boolean\"\n ? stringFormatter.format(\"validation.required\")\n : rest.rules?.required,\n pattern:\n rest.rules?.pattern instanceof RegExp\n ? {\n value: rest.rules.pattern,\n message: stringFormatter.format(\"validation.pattern\", {\n pattern: rest.rules.pattern.source,\n }),\n }\n : rest.rules?.pattern,\n minLength:\n typeof rest.rules?.minLength === \"number\"\n ? {\n value: rest.rules.minLength,\n message: stringFormatter.format(\"validation.minLength\", {\n number: rest.rules.minLength,\n }),\n }\n : rest.rules?.minLength,\n maxLength:\n typeof rest.rules?.maxLength === \"number\"\n ? {\n value: rest.rules.maxLength,\n message: stringFormatter.format(\"validation.maxLength\", {\n number: rest.rules.maxLength,\n }),\n }\n : rest.rules?.maxLength,\n },\n });\n const formContext = useFormContext<T>();\n\n useUpdateFormDefaultValue(props, formContext.form);\n\n /**\n * We don't use controller.field.value here, because it doesn't update when\n * the form value is updated outside of this field (e.g. when setting values\n * with form.setValue or resetting the form), and the Field unmounts in\n * between. This is generally a feature of React Hook Form, but this breaks\n * dynamic forms where fields are conditionally rendered.\n *\n * By using formContext.form.watch(name), we ensure that the field value is\n * always in sync with the form state. See:\n * https://react-hook-form.com/api/usecontroller/controller/\n */\n const value =\n useWatch({\n control: formContext.form.control,\n name,\n }) ?? controller.field.value;\n\n const isFieldInvalid = controller.fieldState.invalid;\n\n const fieldProps = {\n ...
|
|
1
|
+
{"version":3,"file":"Field.mjs","names":["locales","_Fragment"],"sources":["../../../../../../../../../src/integrations/react-hook-form/components/Field/Field.tsx"],"sourcesContent":["import { useFormContext } from \"@/integrations/react-hook-form/components/FormContextProvider/FormContextProvider\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { type PropsWithChildren } from \"react\";\nimport {\n type ControllerProps,\n type FieldValues,\n useController,\n type UseFormReturn,\n useWatch,\n} from \"react-hook-form\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport FieldErrorView from \"@/views/FieldErrorView\";\nimport { useUpdateFormDefaultValue } from \"@/integrations/react-hook-form/components/Field/hooks/useUpdateFormDefaultValue\";\nimport type {\n FlowComponentName,\n FlowComponentPropName,\n} from \"@/components/propTypes\";\n\ntype DisableableComponentName = {\n [C in FlowComponentName]: \"isDisabled\" extends FlowComponentPropName<C>\n ? C\n : never;\n}[FlowComponentName];\n\nexport interface FieldProps<T extends FieldValues>\n extends Omit<ControllerProps<T>, \"render\">, PropsWithChildren {}\n\nexport function Field<T extends FieldValues>(props: FieldProps<T>) {\n const { children, name, defaultValue, ...rest } = props;\n\n const stringFormatter = useLocalizedStringFormatter(\n locales,\n \"ReactHookForm.Field\",\n );\n\n const controller = useController({\n ...props,\n rules: {\n ...props.rules,\n min:\n typeof rest.rules?.min === \"number\"\n ? {\n value: rest.rules.min,\n message: stringFormatter.format(\"validation.min\", {\n number: rest.rules.min,\n }),\n }\n : rest.rules?.min,\n max:\n typeof rest.rules?.max === \"number\"\n ? {\n value: rest.rules.max,\n message: stringFormatter.format(\"validation.max\", {\n number: rest.rules.max,\n }),\n }\n : rest.rules?.max,\n required:\n typeof rest.rules?.required === \"boolean\"\n ? stringFormatter.format(\"validation.required\")\n : rest.rules?.required,\n pattern:\n rest.rules?.pattern instanceof RegExp\n ? {\n value: rest.rules.pattern,\n message: stringFormatter.format(\"validation.pattern\", {\n pattern: rest.rules.pattern.source,\n }),\n }\n : rest.rules?.pattern,\n minLength:\n typeof rest.rules?.minLength === \"number\"\n ? {\n value: rest.rules.minLength,\n message: stringFormatter.format(\"validation.minLength\", {\n number: rest.rules.minLength,\n }),\n }\n : rest.rules?.minLength,\n maxLength:\n typeof rest.rules?.maxLength === \"number\"\n ? {\n value: rest.rules.maxLength,\n message: stringFormatter.format(\"validation.maxLength\", {\n number: rest.rules.maxLength,\n }),\n }\n : rest.rules?.maxLength,\n },\n });\n const formContext = useFormContext<T>();\n\n useUpdateFormDefaultValue(props, formContext.form);\n\n /**\n * We don't use controller.field.value here, because it doesn't update when\n * the form value is updated outside of this field (e.g. when setting values\n * with form.setValue or resetting the form), and the Field unmounts in\n * between. This is generally a feature of React Hook Form, but this breaks\n * dynamic forms where fields are conditionally rendered.\n *\n * By using formContext.form.watch(name), we ensure that the field value is\n * always in sync with the form state. See:\n * https://react-hook-form.com/api/usecontroller/controller/\n */\n const value =\n useWatch({\n control: formContext.form.control,\n name,\n }) ?? controller.field.value;\n\n const isFieldInvalid = controller.fieldState.invalid;\n\n const { disabled, ...controllerFieldProps } = controller.field;\n\n const fieldProps = {\n ...controllerFieldProps,\n // Dynamic, so a local `isDisabled={false}` cannot enable a field whose\n // value React Hook Form drops on submit\n ...(disabled && {\n isDisabled: dynamic<DisableableComponentName, \"isDisabled\">(() => true),\n }),\n value,\n name,\n form: formContext.id,\n isRequired: !!rest.rules?.required,\n isReadOnly: formContext.isReadOnly,\n validationBehavior: \"aria\" as const,\n defaultValue,\n isInvalid: isFieldInvalid,\n children: dynamic((p) => {\n return (\n <>\n {p.children}\n <FieldErrorView>\n {controller.fieldState.error?.message}\n </FieldErrorView>\n </>\n );\n }),\n };\n\n // TODO: remove once CodeEditor supports `isDisabled` (#3369). Until then it\n // spreads unknown props into CodeMirror. Field.browser.test.tsx fails\n // test:compile as soon as it does\n const { isDisabled: ignoredIsDisabled, ...codeEditorFieldProps } = fieldProps;\n\n const propsContext: PropsContext = {\n Autocomplete: {\n SearchField: fieldProps,\n TextField: fieldProps,\n },\n SearchField: fieldProps,\n TextField: fieldProps,\n TextArea: fieldProps,\n MarkdownEditor: fieldProps,\n CodeEditor: codeEditorFieldProps,\n Checkbox: {\n ...fieldProps,\n isSelected: value,\n },\n CheckboxGroup: {\n ...fieldProps,\n },\n CheckboxButton: {\n ...fieldProps,\n isSelected: value,\n },\n FileField: fieldProps,\n FileDropZone: fieldProps,\n NumberField: fieldProps,\n RadioGroup: fieldProps,\n Switch: {\n ...fieldProps,\n isSelected: value,\n },\n Slider: fieldProps,\n PasswordCreationField: fieldProps,\n DatePicker: fieldProps,\n DateRangePicker: fieldProps,\n TimeField: fieldProps,\n SegmentedControl: fieldProps,\n Select: {\n ...fieldProps,\n selectedKey: value,\n },\n ComboBox: {\n ...fieldProps,\n selectedKey: value,\n },\n Rating: fieldProps,\n };\n\n return (\n <PropsContextProvider\n props={propsContext}\n dependencies={[\n controller.fieldState,\n controller.field,\n value,\n formContext.isReadOnly,\n ]}\n >\n {children}\n </PropsContextProvider>\n );\n}\n\nexport const typedField = <T extends FieldValues>(\n ignoredForm: UseFormReturn<T> | UseFormReturn<T>[\"control\"],\n): typeof Field<T> => Field;\n\nexport default Field;\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "1.5.0-next.
|
|
3
|
+
"version": "1.5.0-next.45",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://flow.mittwald.de",
|
|
@@ -84,9 +84,9 @@
|
|
|
84
84
|
"@internationalized/string-compiler": "^3.4.1",
|
|
85
85
|
"@lezer/common": "^1.5.2",
|
|
86
86
|
"@lezer/highlight": "^1.2.3",
|
|
87
|
-
"@mittwald/flow-icons": "^1.5.0-next.
|
|
87
|
+
"@mittwald/flow-icons": "^1.5.0-next.45",
|
|
88
88
|
"@mittwald/password-tools-js": "^3.0.0",
|
|
89
|
-
"@mittwald/react-tunnel": "^1.5.0-next.
|
|
89
|
+
"@mittwald/react-tunnel": "^1.5.0-next.45",
|
|
90
90
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
91
91
|
"@react-aria/form": "^3.2.1",
|
|
92
92
|
"@react-aria/i18n": "^3.13.1",
|
|
@@ -139,12 +139,12 @@
|
|
|
139
139
|
"@internationalized/date": "^3.12.3",
|
|
140
140
|
"@lezer/generator": "^1.8.0",
|
|
141
141
|
"@lezer/lr": "^1.4.10",
|
|
142
|
-
"@mittwald/flow-core": "1.5.0-next.
|
|
143
|
-
"@mittwald/flow-design-tokens": "1.5.0-next.
|
|
144
|
-
"@mittwald/flow-icons-base": "1.5.0-next.
|
|
142
|
+
"@mittwald/flow-core": "1.5.0-next.45",
|
|
143
|
+
"@mittwald/flow-design-tokens": "1.5.0-next.45",
|
|
144
|
+
"@mittwald/flow-icons-base": "1.5.0-next.45",
|
|
145
145
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
146
146
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
147
|
-
"@mittwald/typescript-config": "1.5.0-next.
|
|
147
|
+
"@mittwald/typescript-config": "1.5.0-next.45",
|
|
148
148
|
"@nx/storybook": "^22.7.6",
|
|
149
149
|
"@storybook/addon-a11y": "^10.5.10",
|
|
150
150
|
"@storybook/addon-actions": "^9.0.8",
|
|
@@ -198,7 +198,7 @@
|
|
|
198
198
|
},
|
|
199
199
|
"peerDependencies": {
|
|
200
200
|
"@internationalized/date": "^3.12.2",
|
|
201
|
-
"@mittwald/flow-icons-pro": "1.5.0-next.
|
|
201
|
+
"@mittwald/flow-icons-pro": "1.5.0-next.45",
|
|
202
202
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
203
203
|
"next": "^16.2.3",
|
|
204
204
|
"react": "^19.2.0",
|
|
@@ -222,5 +222,5 @@
|
|
|
222
222
|
"browserslist": [
|
|
223
223
|
"baseline widely available"
|
|
224
224
|
],
|
|
225
|
-
"gitHead": "
|
|
225
|
+
"gitHead": "86fe93dfcb04b4f826c53f6ca8da7829f569896d"
|
|
226
226
|
}
|