@mittwald/flow-react-components 0.2.0-alpha.556 → 0.2.0-alpha.558

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.
@@ -16,9 +16,11 @@ import styles from './Autocomplete.module.scss.mjs';
16
16
  import { useLocalizedStringFormatter, useFocusWithin, UNSAFE_PortalProvider } from 'react-aria';
17
17
  import { emitElementValueChange } from '../../lib/react/emitElementValueChange.mjs';
18
18
  import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
19
+ import { useManagedValue } from '../../lib/hooks/useManagedValue.mjs';
19
20
 
20
21
  const Autocomplete = flowComponent("Autocomplete", (props) => {
21
22
  const { children, isInvalid, ...rest } = props;
23
+ const { value, handleOnChange } = useManagedValue(props);
22
24
  const { contains } = Aria.useFilter({ sensitivity: "base" });
23
25
  const stringFormatter = useLocalizedStringFormatter(locales);
24
26
  const container = useRef(null);
@@ -39,12 +41,13 @@ const Autocomplete = flowComponent("Autocomplete", (props) => {
39
41
  ref: triggerRef
40
42
  };
41
43
  const renderEmptyState = () => /* @__PURE__ */ jsx(Text, { className: styles.empty, children: stringFormatter.format("autocomplete.empty") });
42
- const handleOnInputChange = (value) => {
43
- if (!value) {
44
+ const handleOnInputChange = (value2) => {
45
+ if (!value2) {
44
46
  controller.close();
45
47
  } else if (!controller.isOpen) {
46
48
  controller.open();
47
49
  }
50
+ handleOnChange?.(value2);
48
51
  };
49
52
  const handleOptionAction = (key) => {
50
53
  const inputElement = triggerRef.current;
@@ -71,12 +74,13 @@ const Autocomplete = flowComponent("Autocomplete", (props) => {
71
74
  ...fieldPropsContext
72
75
  };
73
76
  return /* @__PURE__ */ jsxs("div", { ...fieldProps, children: [
74
- /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx("div", { ...focusWithin.focusWithinProps, ref: container, children: /* @__PURE__ */ jsx(UNSAFE_PortalProvider, { getContainer: () => container.current, children: /* @__PURE__ */ jsxs(
77
+ /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, clear: true, children: /* @__PURE__ */ jsx("div", { ...focusWithin.focusWithinProps, ref: container, children: /* @__PURE__ */ jsx(UNSAFE_PortalProvider, { getContainer: () => container.current, children: /* @__PURE__ */ jsxs(
75
78
  Aria.Autocomplete,
76
79
  {
77
80
  onInputChange: handleOnInputChange,
78
81
  filter: contains,
79
82
  disableAutoFocusFirst: true,
83
+ inputValue: value,
80
84
  ...rest,
81
85
  children: [
82
86
  children,
@@ -1 +1 @@
1
- {"version":3,"file":"Autocomplete.mjs","sources":["../../../../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useRef, type PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { SearchFieldProps } from \"@/components/SearchField\";\nimport type { TextFieldProps } from \"@/components/TextField\";\nimport Options from \"@/components/Options\";\nimport { TunnelExit } from \"@mittwald/react-tunnel\";\nimport locales from \"./locales/*.locale.json\";\nimport Text from \"@/components/Text\";\nimport styles from \"./Autocomplete.module.scss\";\nimport {\n UNSAFE_PortalProvider,\n useFocusWithin,\n useLocalizedStringFormatter,\n} from \"react-aria\";\nimport { emitElementValueChange } from \"@/lib/react/emitElementValueChange\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nexport interface AutocompleteProps\n extends PropsWithChildren,\n PropsWithClassName,\n FlowComponentProps,\n Omit<Aria.AutocompleteProps, \"children\" | \"onInputChange\" | \"inputValue\"> {\n isInvalid?: boolean;\n}\n\n/** @flr-generate all */\nexport const Autocomplete = flowComponent(\"Autocomplete\", (props) => {\n const { children, isInvalid, ...rest } = props;\n\n const { contains } = Aria.useFilter({ sensitivity: \"base\" });\n const stringFormatter = useLocalizedStringFormatter(locales);\n const container = useRef(null);\n const triggerRef = useRef<HTMLInputElement>(null);\n\n const controller = useOverlayController(\"Popover\", {\n reuseControllerFromContext: false,\n });\n\n const focusWithin = useFocusWithin({\n onBlurWithin: controller.close,\n });\n\n const inputProps: SearchFieldProps & TextFieldProps = {\n onKeyDown: (e) => {\n if (e.key === \"Enter\" && controller.isOpen) {\n e.preventDefault();\n }\n },\n isInvalid,\n ref: triggerRef,\n };\n\n const renderEmptyState = () => (\n <Text className={styles.empty}>\n {stringFormatter.format(\"autocomplete.empty\")}\n </Text>\n );\n\n const handleOnInputChange = (value: string) => {\n if (!value) {\n controller.close();\n } else if (!controller.isOpen) {\n controller.open();\n }\n };\n\n const handleOptionAction = (key: Aria.Key) => {\n const inputElement = triggerRef.current;\n if (inputElement) {\n // Set value on input element and trigger change event\n emitElementValueChange(inputElement, String(key));\n }\n controller.close();\n };\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n fieldProps,\n } = useFieldComponent(props);\n\n const propsContext: PropsContext = {\n SearchField: inputProps,\n TextField: { ...inputProps, inputContext: Aria.AutocompleteContext },\n Option: {\n tunnelId: \"options\",\n },\n Popover: {\n className: styles.popover,\n },\n ...fieldPropsContext,\n };\n\n return (\n <div {...fieldProps}>\n <FieldErrorCaptureContext>\n <PropsContextProvider props={propsContext}>\n <div {...focusWithin.focusWithinProps} ref={container}>\n <UNSAFE_PortalProvider getContainer={() => container.current}>\n <Aria.Autocomplete\n onInputChange={handleOnInputChange}\n filter={contains}\n disableAutoFocusFirst\n {...rest}\n >\n {children}\n <Options\n onAction={handleOptionAction}\n triggerRef={triggerRef}\n controller={controller}\n renderEmptyState={renderEmptyState}\n isNonModal\n placement=\"bottom start\"\n >\n <TunnelExit id=\"options\" />\n </Options>\n </Aria.Autocomplete>\n </UNSAFE_PortalProvider>\n </div>\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </div>\n );\n});\n\nexport default Autocomplete;\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Autocomplete.mjs","sources":["../../../../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useRef, type PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { SearchFieldProps } from \"@/components/SearchField\";\nimport type { TextFieldProps } from \"@/components/TextField\";\nimport Options from \"@/components/Options\";\nimport { TunnelExit } from \"@mittwald/react-tunnel\";\nimport locales from \"./locales/*.locale.json\";\nimport Text from \"@/components/Text\";\nimport styles from \"./Autocomplete.module.scss\";\nimport {\n UNSAFE_PortalProvider,\n useFocusWithin,\n useLocalizedStringFormatter,\n} from \"react-aria\";\nimport { emitElementValueChange } from \"@/lib/react/emitElementValueChange\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useManagedValue } from \"@/lib/hooks/useManagedValue\";\n\nexport interface AutocompleteProps\n extends PropsWithChildren,\n PropsWithClassName,\n FlowComponentProps,\n Omit<\n Aria.AutocompleteProps,\n \"children\" | \"onInputChange\" | \"inputValue\" | \"defaultInputValue\"\n > {\n isInvalid?: boolean;\n value?: string;\n defaultValue?: string;\n onChange?: (value: string) => void;\n}\n\n/** @flr-generate all */\nexport const Autocomplete = flowComponent(\"Autocomplete\", (props) => {\n const { children, isInvalid, ...rest } = props;\n\n const { value, handleOnChange } = useManagedValue(props);\n\n const { contains } = Aria.useFilter({ sensitivity: \"base\" });\n const stringFormatter = useLocalizedStringFormatter(locales);\n const container = useRef(null);\n const triggerRef = useRef<HTMLInputElement>(null);\n\n const controller = useOverlayController(\"Popover\", {\n reuseControllerFromContext: false,\n });\n\n const focusWithin = useFocusWithin({\n onBlurWithin: controller.close,\n });\n\n const inputProps: SearchFieldProps & TextFieldProps = {\n onKeyDown: (e) => {\n if (e.key === \"Enter\" && controller.isOpen) {\n e.preventDefault();\n }\n },\n isInvalid,\n ref: triggerRef,\n };\n\n const renderEmptyState = () => (\n <Text className={styles.empty}>\n {stringFormatter.format(\"autocomplete.empty\")}\n </Text>\n );\n\n const handleOnInputChange = (value: string) => {\n if (!value) {\n controller.close();\n } else if (!controller.isOpen) {\n controller.open();\n }\n\n handleOnChange?.(value);\n };\n\n const handleOptionAction = (key: Aria.Key) => {\n const inputElement = triggerRef.current;\n if (inputElement) {\n // Set value on input element and trigger change event\n emitElementValueChange(inputElement, String(key));\n }\n controller.close();\n };\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n fieldProps,\n } = useFieldComponent(props);\n\n const propsContext: PropsContext = {\n SearchField: inputProps,\n TextField: { ...inputProps, inputContext: Aria.AutocompleteContext },\n Option: {\n tunnelId: \"options\",\n },\n Popover: {\n className: styles.popover,\n },\n ...fieldPropsContext,\n };\n\n return (\n <div {...fieldProps}>\n <FieldErrorCaptureContext>\n <PropsContextProvider props={propsContext} clear>\n <div {...focusWithin.focusWithinProps} ref={container}>\n <UNSAFE_PortalProvider getContainer={() => container.current}>\n <Aria.Autocomplete\n onInputChange={handleOnInputChange}\n filter={contains}\n disableAutoFocusFirst\n inputValue={value}\n {...rest}\n >\n {children}\n <Options\n onAction={handleOptionAction}\n triggerRef={triggerRef}\n controller={controller}\n renderEmptyState={renderEmptyState}\n isNonModal\n placement=\"bottom start\"\n >\n <TunnelExit id=\"options\" />\n </Options>\n </Aria.Autocomplete>\n </UNSAFE_PortalProvider>\n </div>\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </div>\n );\n});\n\nexport default Autocomplete;\n"],"names":["value"],"mappings":"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"}
@@ -20,7 +20,7 @@ const TextFieldBase = (props) => {
20
20
  ...rest
21
21
  } = props;
22
22
  const [charactersCount, setCharactersCount] = useState(
23
- props.value?.length ?? 0
23
+ props.defaultValue?.length ?? props.value?.length ?? 0
24
24
  );
25
25
  const translation = useLocalizedStringFormatter(locales);
26
26
  const handleOnChange = (v) => {
@@ -1 +1 @@
1
- {"version":3,"file":"TextFieldBase.mjs","sources":["../../../../../../src/components/TextFieldBase/TextFieldBase.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, type ReactNode } from \"react\";\nimport { useState } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport type { UseFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"../FormField/FormField.module.scss\";\n\nexport interface TextFieldBaseProps\n extends PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n Pick<FlowComponentProps<HTMLInputElement>, \"ref\">,\n Pick<UseFieldComponent, \"FieldErrorView\" | \"FieldErrorCaptureContext\"> {\n /** The input element */\n input: ReactNode;\n /** Whether a character count should be displayed inside the field description. */\n showCharacterCount?: boolean;\n}\n\nexport const TextFieldBase: FC<TextFieldBaseProps> = (props) => {\n const {\n children,\n className,\n input,\n showCharacterCount,\n ref,\n FieldErrorView,\n FieldErrorCaptureContext,\n ...rest\n } = props;\n\n const [charactersCount, setCharactersCount] = useState(\n props.value?.length ?? 0,\n );\n\n const translation = useLocalizedStringFormatter(locales);\n\n const handleOnChange = (v: string) => {\n if (showCharacterCount) {\n setCharactersCount(v.length);\n }\n if (props.onChange) {\n props.onChange(v);\n }\n };\n\n const charactersCountDescription = translation.format(\n \"textFieldBase.characters\",\n {\n count: charactersCount,\n maxCount: props.maxLength ?? 0,\n },\n );\n\n /** Prevent weird reset behavior when value is 'undefined' */\n const propsWithOptionalStringValue =\n \"value\" in props\n ? {\n value: props.value ?? \"\",\n }\n : {};\n\n return (\n <Aria.TextField\n ref={ref}\n {...rest}\n className={className}\n onChange={handleOnChange}\n {...propsWithOptionalStringValue}\n >\n <FieldErrorCaptureContext>\n {children}\n {input}\n {showCharacterCount && (\n <FieldDescription className={styles.fieldDescription}>\n {charactersCountDescription}\n </FieldDescription>\n )}\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </Aria.TextField>\n );\n};\n\nexport default TextFieldBase;\n"],"names":["styles"],"mappings":";;;;;;;;AAoBO,MAAM,aAAA,GAAwC,CAAC,KAAA,KAAU;AAC9D,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,kBAAA;AAAA,IACA,GAAA;AAAA,IACA,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,QAAA;AAAA,IAC5C,KAAA,CAAM,OAAO,MAAA,IAAU;AAAA,GACzB;AAEA,EAAA,MAAM,WAAA,GAAc,4BAA4B,OAAO,CAAA;AAEvD,EAAA,MAAM,cAAA,GAAiB,CAAC,CAAA,KAAc;AACpC,IAAA,IAAI,kBAAA,EAAoB;AACtB,MAAA,kBAAA,CAAmB,EAAE,MAAM,CAAA;AAAA,IAC7B;AACA,IAAA,IAAI,MAAM,QAAA,EAAU;AAClB,MAAA,KAAA,CAAM,SAAS,CAAC,CAAA;AAAA,IAClB;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,6BAA6B,WAAA,CAAY,MAAA;AAAA,IAC7C,0BAAA;AAAA,IACA;AAAA,MACE,KAAA,EAAO,eAAA;AAAA,MACP,QAAA,EAAU,MAAM,SAAA,IAAa;AAAA;AAC/B,GACF;AAGA,EAAA,MAAM,4BAAA,GACJ,WAAW,KAAA,GACP;AAAA,IACE,KAAA,EAAO,MAAM,KAAA,IAAS;AAAA,MAExB,EAAC;AAEP,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA,CAAK,SAAA;AAAA,IAAL;AAAA,MACC,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,SAAA;AAAA,MACA,QAAA,EAAU,cAAA;AAAA,MACT,GAAG,4BAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,wBAAA,EAAA,EACE,QAAA,EAAA;AAAA,UAAA,QAAA;AAAA,UACA,KAAA;AAAA,UACA,sCACC,GAAA,CAAC,gBAAA,EAAA,EAAiB,SAAA,EAAWA,eAAA,CAAO,kBACjC,QAAA,EAAA,0BAAA,EACH;AAAA,SAAA,EAEJ,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ;;;;"}
1
+ {"version":3,"file":"TextFieldBase.mjs","sources":["../../../../../../src/components/TextFieldBase/TextFieldBase.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, type ReactNode } from \"react\";\nimport { useState } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport type { UseFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"../FormField/FormField.module.scss\";\n\nexport interface TextFieldBaseProps\n extends PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n Pick<FlowComponentProps<HTMLInputElement>, \"ref\">,\n Pick<UseFieldComponent, \"FieldErrorView\" | \"FieldErrorCaptureContext\"> {\n /** The input element */\n input: ReactNode;\n /** Whether a character count should be displayed inside the field description. */\n showCharacterCount?: boolean;\n}\n\nexport const TextFieldBase: FC<TextFieldBaseProps> = (props) => {\n const {\n children,\n className,\n input,\n showCharacterCount,\n ref,\n FieldErrorView,\n FieldErrorCaptureContext,\n ...rest\n } = props;\n\n const [charactersCount, setCharactersCount] = useState(\n props.defaultValue?.length ?? props.value?.length ?? 0,\n );\n\n const translation = useLocalizedStringFormatter(locales);\n\n const handleOnChange = (v: string) => {\n if (showCharacterCount) {\n setCharactersCount(v.length);\n }\n if (props.onChange) {\n props.onChange(v);\n }\n };\n\n const charactersCountDescription = translation.format(\n \"textFieldBase.characters\",\n {\n count: charactersCount,\n maxCount: props.maxLength ?? 0,\n },\n );\n\n /** Prevent weird reset behavior when value is 'undefined' */\n const propsWithOptionalStringValue =\n \"value\" in props\n ? {\n value: props.value ?? \"\",\n }\n : {};\n\n return (\n <Aria.TextField\n ref={ref}\n {...rest}\n className={className}\n onChange={handleOnChange}\n {...propsWithOptionalStringValue}\n >\n <FieldErrorCaptureContext>\n {children}\n {input}\n {showCharacterCount && (\n <FieldDescription className={styles.fieldDescription}>\n {charactersCountDescription}\n </FieldDescription>\n )}\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </Aria.TextField>\n );\n};\n\nexport default TextFieldBase;\n"],"names":["styles"],"mappings":";;;;;;;;AAoBO,MAAM,aAAA,GAAwC,CAAC,KAAA,KAAU;AAC9D,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,kBAAA;AAAA,IACA,GAAA;AAAA,IACA,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,QAAA;AAAA,IAC5C,KAAA,CAAM,YAAA,EAAc,MAAA,IAAU,KAAA,CAAM,OAAO,MAAA,IAAU;AAAA,GACvD;AAEA,EAAA,MAAM,WAAA,GAAc,4BAA4B,OAAO,CAAA;AAEvD,EAAA,MAAM,cAAA,GAAiB,CAAC,CAAA,KAAc;AACpC,IAAA,IAAI,kBAAA,EAAoB;AACtB,MAAA,kBAAA,CAAmB,EAAE,MAAM,CAAA;AAAA,IAC7B;AACA,IAAA,IAAI,MAAM,QAAA,EAAU;AAClB,MAAA,KAAA,CAAM,SAAS,CAAC,CAAA;AAAA,IAClB;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,6BAA6B,WAAA,CAAY,MAAA;AAAA,IAC7C,0BAAA;AAAA,IACA;AAAA,MACE,KAAA,EAAO,eAAA;AAAA,MACP,QAAA,EAAU,MAAM,SAAA,IAAa;AAAA;AAC/B,GACF;AAGA,EAAA,MAAM,4BAAA,GACJ,WAAW,KAAA,GACP;AAAA,IACE,KAAA,EAAO,MAAM,KAAA,IAAS;AAAA,MAExB,EAAC;AAEP,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA,CAAK,SAAA;AAAA,IAAL;AAAA,MACC,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,SAAA;AAAA,MACA,QAAA,EAAU,cAAA;AAAA,MACT,GAAG,4BAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,wBAAA,EAAA,EACE,QAAA,EAAA;AAAA,UAAA,QAAA;AAAA,UACA,KAAA;AAAA,UACA,sCACC,GAAA,CAAC,gBAAA,EAAA,EAAiB,SAAA,EAAWA,eAAA,CAAO,kBACjC,QAAA,EAAA,0BAAA,EACH;AAAA,SAAA,EAEJ,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ;;;;"}
@@ -9,7 +9,6 @@ import 'react';
9
9
  import { useController, useWatch } from 'react-hook-form';
10
10
  import { useLocalizedStringFormatter } from 'react-aria';
11
11
  import locales from '../../../../../../_virtual/_.locale.json@72ba2ce40f190df671686fec50c04ddf.mjs';
12
- import { inheritProps } from '../../../../lib/propsContext/inherit/types.mjs';
13
12
  import FieldErrorView from '../../../../views/FieldErrorView.mjs';
14
13
  import { useHotkeys } from 'react-hotkeys-hook';
15
14
  import { useMergeRefs } from 'use-callback-ref';
@@ -53,7 +52,6 @@ function Field(props) {
53
52
  );
54
53
  const fieldRef = useMergeRefs([controller.field.ref, hotkeyRef]);
55
54
  const fieldProps = {
56
- ...inheritProps,
57
55
  ...controller.field,
58
56
  ref: fieldRef,
59
57
  value,
@@ -73,6 +71,7 @@ function Field(props) {
73
71
  };
74
72
  const { value: ignoredValue, ...fieldPropsWithoutValue } = fieldProps;
75
73
  const propsContext = {
74
+ Autocomplete: fieldProps,
76
75
  SearchField: fieldProps,
77
76
  TextField: fieldProps,
78
77
  TextArea: fieldProps,
@@ -1 +1 @@
1
- {"version":3,"file":"Field.mjs","sources":["../../../../../../../../src/integrations/react-hook-form/components/Field/Field.tsx"],"sourcesContent":["import { useFormContext } from \"@/integrations/react-hook-form/components/context/formContext\";\nimport { dynamic, type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } 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 \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\nimport { inheritProps } from \"@/lib/propsContext/inherit/types\";\nimport FieldErrorView from \"@/views/FieldErrorView\";\nimport { useHotkeys } from \"react-hotkeys-hook\";\nimport { useMergeRefs } from \"use-callback-ref\";\n\nexport interface FieldProps<T extends FieldValues>\n extends Omit<ControllerProps<T>, \"render\">,\n PropsWithChildren {}\n\nexport function Field<T extends FieldValues>(props: FieldProps<T>) {\n const { children, name, defaultValue, ...rest } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const controller = useController({\n ...props,\n rules: {\n ...props.rules,\n minLength:\n typeof rest.rules?.minLength === \"number\"\n ? {\n value: rest.rules.minLength,\n message: stringFormatter.format(\"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(\"maxLength\", {\n number: rest.rules.maxLength,\n }),\n }\n : rest.rules?.maxLength,\n },\n });\n const formContext = useFormContext<T>();\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 hotkeyRef = useHotkeys<never>(\n \"meta+enter, ctrl+enter\",\n () => {\n formContext.submit();\n },\n {\n enableOnFormTags: true,\n enableOnContentEditable: true,\n },\n );\n const fieldRef = useMergeRefs([controller.field.ref, hotkeyRef]);\n\n const fieldProps = {\n ...inheritProps,\n ...controller.field,\n ref: fieldRef,\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 const { value: ignoredValue, ...fieldPropsWithoutValue } = fieldProps;\n\n const propsContext: PropsContext = {\n SearchField: fieldProps,\n TextField: fieldProps,\n TextArea: fieldProps,\n MarkdownEditor: fieldProps,\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 ...fieldPropsWithoutValue,\n selectedKey: value,\n },\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"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Field.mjs","sources":["../../../../../../../../src/integrations/react-hook-form/components/Field/Field.tsx"],"sourcesContent":["import { useFormContext } from \"@/integrations/react-hook-form/components/context/formContext\";\nimport { dynamic, type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } 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 \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\nimport FieldErrorView from \"@/views/FieldErrorView\";\nimport { useHotkeys } from \"react-hotkeys-hook\";\nimport { useMergeRefs } from \"use-callback-ref\";\n\nexport interface FieldProps<T extends FieldValues>\n extends Omit<ControllerProps<T>, \"render\">,\n PropsWithChildren {}\n\nexport function Field<T extends FieldValues>(props: FieldProps<T>) {\n const { children, name, defaultValue, ...rest } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const controller = useController({\n ...props,\n rules: {\n ...props.rules,\n minLength:\n typeof rest.rules?.minLength === \"number\"\n ? {\n value: rest.rules.minLength,\n message: stringFormatter.format(\"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(\"maxLength\", {\n number: rest.rules.maxLength,\n }),\n }\n : rest.rules?.maxLength,\n },\n });\n const formContext = useFormContext<T>();\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 hotkeyRef = useHotkeys<never>(\n \"meta+enter, ctrl+enter\",\n () => {\n formContext.submit();\n },\n {\n enableOnFormTags: true,\n enableOnContentEditable: true,\n },\n );\n const fieldRef = useMergeRefs([controller.field.ref, hotkeyRef]);\n\n const fieldProps = {\n ...controller.field,\n ref: fieldRef,\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 const { value: ignoredValue, ...fieldPropsWithoutValue } = fieldProps;\n\n const propsContext: PropsContext = {\n Autocomplete: fieldProps,\n SearchField: fieldProps,\n TextField: fieldProps,\n TextArea: fieldProps,\n MarkdownEditor: fieldProps,\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 ...fieldPropsWithoutValue,\n selectedKey: value,\n },\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"],"names":[],"mappings":"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"}
@@ -1,9 +1,6 @@
1
1
  "use client"
2
2
  /* */
3
3
  const inheritPropsContextKey = "___inherit";
4
- const inheritProps = {
5
- [inheritPropsContextKey]: true
6
- };
7
4
 
8
- export { inheritProps, inheritPropsContextKey };
5
+ export { inheritPropsContextKey };
9
6
  //# sourceMappingURL=types.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.mjs","sources":["../../../../../../../src/lib/propsContext/inherit/types.ts"],"sourcesContent":["/** @internal */\nexport const inheritPropsContextKey = \"___inherit\" as const;\n\n/** @internal */\nexport type InheritPropsContextKey = typeof inheritPropsContextKey;\n\nexport interface InheritPropsContextSettings {\n [inheritPropsContextKey]?: boolean | \"preserve\";\n}\n\nexport const inheritProps: InheritPropsContextSettings = {\n [inheritPropsContextKey]: true,\n};\n\nexport type PropsContextLevelMode =\n | \"reset\"\n | \"increment\"\n | \"decrement\"\n | \"keep\";\n"],"names":[],"mappings":"AACO,MAAM,sBAAA,GAAyB;AAS/B,MAAM,YAAA,GAA4C;AAAA,EACvD,CAAC,sBAAsB,GAAG;AAC5B;;;;"}
1
+ {"version":3,"file":"types.mjs","sources":["../../../../../../../src/lib/propsContext/inherit/types.ts"],"sourcesContent":["/** @internal */\nexport const inheritPropsContextKey = \"___inherit\" as const;\n\n/** @internal */\nexport type InheritPropsContextKey = typeof inheritPropsContextKey;\n\nexport interface InheritPropsContextSettings {\n [inheritPropsContextKey]?: boolean | \"preserve\";\n}\n\nexport const inheritProps: InheritPropsContextSettings = {\n [inheritPropsContextKey]: true,\n};\n\nexport type PropsContextLevelMode =\n | \"reset\"\n | \"increment\"\n | \"decrement\"\n | \"keep\";\n"],"names":[],"mappings":"AACO,MAAM,sBAAA,GAAyB;;;;"}
@@ -2,8 +2,11 @@ import { PropsWithChildren } from 'react';
2
2
  import { PropsWithClassName } from '../../lib/types/props';
3
3
  import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
4
4
  import * as Aria from "react-aria-components";
5
- export interface AutocompleteProps extends PropsWithChildren, PropsWithClassName, FlowComponentProps, Omit<Aria.AutocompleteProps, "children" | "onInputChange" | "inputValue"> {
5
+ export interface AutocompleteProps extends PropsWithChildren, PropsWithClassName, FlowComponentProps, Omit<Aria.AutocompleteProps, "children" | "onInputChange" | "inputValue" | "defaultInputValue"> {
6
6
  isInvalid?: boolean;
7
+ value?: string;
8
+ defaultValue?: string;
9
+ onChange?: (value: string) => void;
7
10
  }
8
11
  /** @flr-generate all */
9
12
  export declare const Autocomplete: import('react').FunctionComponent<AutocompleteProps & import('react').RefAttributes<HTMLDivElement>>;
@@ -1 +1 @@
1
- {"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAE9C,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAe9C,MAAM,WAAW,iBACf,SAAQ,iBAAiB,EACvB,kBAAkB,EAClB,kBAAkB,EAClB,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,eAAe,GAAG,YAAY,CAAC;IAC3E,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAwB;AACxB,eAAO,MAAM,YAAY,sGAmGvB,CAAC;AAEH,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAE9C,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAiB9C,MAAM,WAAW,iBACf,SAAQ,iBAAiB,EACvB,kBAAkB,EAClB,kBAAkB,EAClB,IAAI,CACF,IAAI,CAAC,iBAAiB,EACtB,UAAU,GAAG,eAAe,GAAG,YAAY,GAAG,mBAAmB,CAClE;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,wBAAwB;AACxB,eAAO,MAAM,YAAY,sGAwGvB,CAAC;AAEH,eAAe,YAAY,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../../../../src/integrations/react-hook-form/components/Field/Field.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,WAAW,EAEhB,KAAK,aAAa,EAEnB,MAAM,iBAAiB,CAAC;AAQzB,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,WAAW,CAC/C,SAAQ,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,EACxC,iBAAiB;CAAG;AAExB,wBAAgB,KAAK,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,2CA4IhE;AAED,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,WAAW,EAC9C,aAAa,aAAa,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,KAC1D,OAAO,KAAK,CAAC,CAAC,CAAU,CAAC;AAE5B,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../../../../src/integrations/react-hook-form/components/Field/Field.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,WAAW,EAEhB,KAAK,aAAa,EAEnB,MAAM,iBAAiB,CAAC;AAOzB,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,WAAW,CAC/C,SAAQ,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,EACxC,iBAAiB;CAAG;AAExB,wBAAgB,KAAK,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,2CA4IhE;AAED,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,WAAW,EAC9C,aAAa,aAAa,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,KAC1D,OAAO,KAAK,CAAC,CAAC,CAAU,CAAC;AAE5B,eAAe,KAAK,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mittwald/flow-react-components",
3
- "version": "0.2.0-alpha.556",
3
+ "version": "0.2.0-alpha.558",
4
4
  "type": "module",
5
5
  "description": "A React implementation of Flow, mittwald’s design system",
6
6
  "homepage": "https://mittwald.github.io/flow",
@@ -58,7 +58,7 @@
58
58
  "dependencies": {
59
59
  "@internationalized/string-compiler": "^3.2.6",
60
60
  "@mittwald/password-tools-js": "3.0.0-alpha.18",
61
- "@mittwald/react-tunnel": "0.2.0-alpha.556",
61
+ "@mittwald/react-tunnel": "0.2.0-alpha.558",
62
62
  "@mittwald/react-use-promise": "^4.2.2",
63
63
  "@react-aria/form": "^3.1.2",
64
64
  "@react-aria/live-announcer": "^3.4.4",
@@ -102,7 +102,7 @@
102
102
  "@faker-js/faker": "^10.1.0",
103
103
  "@internationalized/date": "^3.10.0",
104
104
  "@mittwald/flow-core": "",
105
- "@mittwald/flow-design-tokens": "0.2.0-alpha.556",
105
+ "@mittwald/flow-design-tokens": "0.2.0-alpha.558",
106
106
  "@mittwald/react-use-promise": "^4.2.2",
107
107
  "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
108
108
  "@mittwald/typescript-config": "",
@@ -175,5 +175,5 @@
175
175
  "optional": true
176
176
  }
177
177
  },
178
- "gitHead": "8b635aa44b302105dea143076d3a08b535e135f3"
178
+ "gitHead": "bef6727eef3414090cea1a842aa106a3dcf69ae7"
179
179
  }