@mittwald/flow-react-components 0.2.0-alpha.482 → 0.2.0-alpha.484
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/CHANGELOG.md +10 -0
- package/dist/assets/doc-properties.json +2663 -2663
- package/dist/js/components/src/integrations/react-hook-form/components/Field/Field.mjs +2 -1
- package/dist/js/components/src/integrations/react-hook-form/components/Field/Field.mjs.map +1 -1
- package/dist/js/components/src/lib/componentFactory/flowComponent.mjs +3 -15
- package/dist/js/components/src/lib/componentFactory/flowComponent.mjs.map +1 -1
- package/dist/js/components/src/lib/propsContext/inherit/types.mjs +4 -1
- package/dist/js/components/src/lib/propsContext/inherit/types.mjs.map +1 -1
- package/dist/js/components/src/lib/react/getPropsMerger.mjs +19 -2
- package/dist/js/components/src/lib/react/getPropsMerger.mjs.map +1 -1
- package/dist/js/flr-universal.mjs +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/Field.d.ts.map +1 -1
- package/dist/types/lib/componentFactory/flowComponent.d.ts.map +1 -1
- package/dist/types/lib/react/getPropsMerger.d.ts +1 -0
- package/dist/types/lib/react/getPropsMerger.d.ts.map +1 -1
- package/package.json +5 -5
|
@@ -9,6 +9,7 @@ import { useController } from 'react-hook-form';
|
|
|
9
9
|
import FieldErrorView from '../../../../views/FieldErrorView.mjs';
|
|
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';
|
|
12
13
|
|
|
13
14
|
function Field(props) {
|
|
14
15
|
const { children, name, defaultValue, ...rest } = props;
|
|
@@ -34,7 +35,7 @@ function Field(props) {
|
|
|
34
35
|
const formContext = useFormContext();
|
|
35
36
|
const value = formContext.form.watch(name) ?? controller.field.value;
|
|
36
37
|
const fieldProps = {
|
|
37
|
-
|
|
38
|
+
...inheritProps,
|
|
38
39
|
...controller.field,
|
|
39
40
|
value,
|
|
40
41
|
name,
|
|
@@ -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 type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithChildren } from \"react\";\nimport {\n type ControllerProps,\n type FieldValues,\n useController,\n type UseFormReturn,\n} from \"react-hook-form\";\nimport FieldErrorView from \"@/views/FieldErrorView\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\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 = formContext.form.watch(name) ?? controller.field.value;\n\n const fieldProps = {\n
|
|
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 type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithChildren } from \"react\";\nimport {\n type ControllerProps,\n type FieldValues,\n useController,\n type UseFormReturn,\n} from \"react-hook-form\";\nimport FieldErrorView from \"@/views/FieldErrorView\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\nimport { inheritProps } from \"@/lib/propsContext/inherit/types\";\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 = formContext.form.watch(name) ?? controller.field.value;\n\n const fieldProps = {\n ...inheritProps,\n ...controller.field,\n value,\n name,\n form: formContext.id,\n isRequired: !!rest.rules?.required,\n validationBehavior: \"aria\" as const,\n defaultValue,\n isInvalid: controller.fieldState.invalid,\n children: dynamic((p) => {\n if (controller.fieldState.invalid) {\n return (\n <>\n {p.children}\n <FieldErrorView>\n {controller.fieldState.error?.message}\n </FieldErrorView>\n </>\n );\n }\n\n return p.children;\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: fieldProps,\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={[controller.fieldState, controller.field, value]}\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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"}
|
|
@@ -5,7 +5,6 @@ import { cloneElement } from 'react';
|
|
|
5
5
|
import { TunnelEntry } from '@mittwald/react-tunnel';
|
|
6
6
|
import { SlotContextProvider } from '../slotContext/SlotContextProvider.mjs';
|
|
7
7
|
import { useProps } from '../hooks/useProps.mjs';
|
|
8
|
-
import { mergeRefs } from '@react-aria/utils';
|
|
9
8
|
import { useComponentPropsContext } from '../propsContext/propsContext.mjs';
|
|
10
9
|
import { increaseNestingLevel } from '../propsContext/nestedPropsContext/lib.mjs';
|
|
11
10
|
import ComponentPropsContextProviderView from '../../views/ComponentPropsContextProviderView.mjs';
|
|
@@ -14,27 +13,16 @@ import { ComponentPropsContextProvider } from '../propsContext/components/Compon
|
|
|
14
13
|
function flowComponent(componentName, ImplementationComponentType, options = {}) {
|
|
15
14
|
const { type = "ui", isRemoteComponent = false } = options;
|
|
16
15
|
const propsContextLevelMode = type === "ui" ? "increment" : "keep";
|
|
17
|
-
function Component(
|
|
18
|
-
const {
|
|
19
|
-
const {
|
|
20
|
-
ref: refFromContext = null,
|
|
21
|
-
tunnelId,
|
|
22
|
-
wrapWith,
|
|
23
|
-
...propsWithContext
|
|
24
|
-
} = useProps(
|
|
16
|
+
function Component(props) {
|
|
17
|
+
const { tunnelId, wrapWith, ...propsWithContext } = useProps(
|
|
25
18
|
componentName,
|
|
26
19
|
props
|
|
27
20
|
);
|
|
28
21
|
const implementationTypeProps = propsWithContext;
|
|
29
22
|
const componentProps = useComponentPropsContext(componentName) ?? {};
|
|
30
23
|
increaseNestingLevel(componentProps);
|
|
31
|
-
const mergedRef = mergeRefs(refFromProps, refFromContext);
|
|
32
|
-
const propsWithRef = {
|
|
33
|
-
...implementationTypeProps,
|
|
34
|
-
ref: mergedRef
|
|
35
|
-
};
|
|
36
24
|
ImplementationComponentType.displayName = `FlowComponentImpl(${componentName})`;
|
|
37
|
-
let element = /* @__PURE__ */ jsx(ImplementationComponentType, { ...
|
|
25
|
+
let element = /* @__PURE__ */ jsx(ImplementationComponentType, { ...implementationTypeProps });
|
|
38
26
|
if (isRemoteComponent) {
|
|
39
27
|
element = /* @__PURE__ */ jsx(
|
|
40
28
|
ComponentPropsContextProvider,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flowComponent.mjs","sources":["../../../../../../src/lib/componentFactory/flowComponent.tsx"],"sourcesContent":["import type {\n FlowComponentName,\n FlowComponentProps as FlowComponentPropsOfName,\n} from \"@/components/propTypes\";\nimport type {\n ComponentProps,\n ComponentType,\n ReactElement,\n ReactNode,\n RefAttributes,\n FunctionComponent,\n} from \"react\";\nimport { cloneElement } from \"react\";\nimport type { PropsWithTunnel } from \"@/lib/types/props\";\nimport { TunnelEntry } from \"@mittwald/react-tunnel\";\nimport SlotContextProvider from \"@/lib/slotContext/SlotContextProvider\";\nimport { useProps } from \"@/lib/hooks/useProps\";\nimport {
|
|
1
|
+
{"version":3,"file":"flowComponent.mjs","sources":["../../../../../../src/lib/componentFactory/flowComponent.tsx"],"sourcesContent":["import type {\n FlowComponentName,\n FlowComponentProps as FlowComponentPropsOfName,\n} from \"@/components/propTypes\";\nimport type {\n ComponentProps,\n ComponentType,\n ReactElement,\n ReactNode,\n RefAttributes,\n FunctionComponent,\n} from \"react\";\nimport { cloneElement } from \"react\";\nimport type { PropsWithTunnel } from \"@/lib/types/props\";\nimport { TunnelEntry } from \"@mittwald/react-tunnel\";\nimport SlotContextProvider from \"@/lib/slotContext/SlotContextProvider\";\nimport { useProps } from \"@/lib/hooks/useProps\";\nimport { useComponentPropsContext } from \"@/lib/propsContext/propsContext\";\nimport { increaseNestingLevel } from \"@/lib/propsContext/nestedPropsContext/lib\";\nimport ComponentPropsContextProviderView from \"@/views/ComponentPropsContextProviderView\";\nimport { ComponentPropsContextProvider } from \"@/components/ComponentPropsContextProvider\";\nimport type { PropsContextLevelMode } from \"@/lib/propsContext/inherit/types\";\n\ntype RefType<T> = T extends RefAttributes<infer R> ? R : undefined;\n\nexport interface FlowComponentProps<R = HTMLDivElement>\n extends PropsWithTunnel,\n RefAttributes<R> {\n wrapWith?: ReactElement;\n}\n\ntype FlowComponentImplementationProps<C extends FlowComponentName> = Omit<\n FlowComponentPropsOfName<C>,\n keyof FlowComponentProps\n> &\n RefAttributes<RefType<FlowComponentPropsOfName<C>>>;\n\ntype FlowComponentImplementationType<C extends FlowComponentName> =\n ComponentType<FlowComponentImplementationProps<C>>;\n\ntype FlowComponentType<C extends FlowComponentName> = FunctionComponent<\n FlowComponentPropsOfName<C> &\n RefAttributes<RefType<FlowComponentPropsOfName<C>>>\n>;\n\ntype FlowComponentProvisionType = \"provider\" | \"ui\";\n\ninterface Options {\n type?: FlowComponentProvisionType;\n isRemoteComponent?: boolean;\n}\n\nexport function flowComponent<C extends FlowComponentName>(\n componentName: C,\n ImplementationComponentType: FlowComponentImplementationType<C>,\n options: Options = {},\n): FlowComponentType<C> {\n type Props = FlowComponentPropsOfName<C> &\n RefAttributes<RefType<FlowComponentPropsOfName<C>>>;\n\n const { type = \"ui\", isRemoteComponent = false } = options;\n\n const propsContextLevelMode: PropsContextLevelMode =\n type === \"ui\" ? \"increment\" : \"keep\";\n\n function Component(props: Props) {\n const { tunnelId, wrapWith, ...propsWithContext } = useProps(\n componentName,\n props as FlowComponentPropsOfName<C>,\n ) as FlowComponentProps<RefType<FlowComponentPropsOfName<C>>>;\n\n const implementationTypeProps = propsWithContext as ComponentProps<\n typeof ImplementationComponentType\n >;\n\n const componentProps = useComponentPropsContext(componentName) ?? {};\n increaseNestingLevel(componentProps);\n\n ImplementationComponentType.displayName = `FlowComponentImpl(${componentName})`;\n\n let element: ReactNode = (\n <ImplementationComponentType {...implementationTypeProps} />\n );\n\n if (isRemoteComponent) {\n element = (\n <ComponentPropsContextProvider\n componentProps={componentProps}\n levelModel={propsContextLevelMode}\n >\n {element}\n </ComponentPropsContextProvider>\n );\n } else {\n /**\n * In case of a Flow component that does not have a remote counterpart\n * (like the List component), the ComponentPropsContext must be applied on\n * the host side, so that nesting and inheritance is working correctly.\n */\n element = (\n <ComponentPropsContextProviderView\n componentProps={componentProps}\n levelModel={propsContextLevelMode}\n >\n {element}\n </ComponentPropsContextProviderView>\n );\n }\n\n if (\"slot\" in props && !!props.slot && typeof props.slot === \"string\") {\n element = (\n <SlotContextProvider slot={props.slot} component={componentName}>\n {element}\n </SlotContextProvider>\n );\n }\n\n if (wrapWith) {\n element = cloneElement(wrapWith, undefined, element);\n }\n\n if (tunnelId) {\n element = <TunnelEntry id={tunnelId}>{element}</TunnelEntry>;\n }\n\n return element;\n }\n\n Component.displayName = `FlowComponent(${componentName})`;\n return Component;\n}\n"],"names":[],"mappings":";;;;;;;;;;AAoDO,SAAS,aACd,CAAA,aAAA,EACA,2BACA,EAAA,OAAA,GAAmB,EACG,EAAA;AAItB,EAAA,MAAM,EAAE,IAAA,GAAO,IAAM,EAAA,iBAAA,GAAoB,OAAU,GAAA,OAAA;AAEnD,EAAM,MAAA,qBAAA,GACJ,IAAS,KAAA,IAAA,GAAO,WAAc,GAAA,MAAA;AAEhC,EAAA,SAAS,UAAU,KAAc,EAAA;AAC/B,IAAA,MAAM,EAAE,QAAA,EAAU,QAAU,EAAA,GAAG,kBAAqB,GAAA,QAAA;AAAA,MAClD,aAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,MAAM,uBAA0B,GAAA,gBAAA;AAIhC,IAAA,MAAM,cAAiB,GAAA,wBAAA,CAAyB,aAAa,CAAA,IAAK,EAAC;AACnE,IAAA,oBAAA,CAAqB,cAAc,CAAA;AAEnC,IAA4B,2BAAA,CAAA,WAAA,GAAc,qBAAqB,aAAa,CAAA,CAAA,CAAA;AAE5E,IAAA,IAAI,OACF,mBAAA,GAAA,CAAC,2BAA6B,EAAA,EAAA,GAAG,uBAAyB,EAAA,CAAA;AAG5D,IAAA,IAAI,iBAAmB,EAAA;AACrB,MACE,OAAA,mBAAA,GAAA;AAAA,QAAC,6BAAA;AAAA,QAAA;AAAA,UACC,cAAA;AAAA,UACA,UAAY,EAAA,qBAAA;AAAA,UAEX,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,KAEG,MAAA;AAML,MACE,OAAA,mBAAA,GAAA;AAAA,QAAC,iCAAA;AAAA,QAAA;AAAA,UACC,cAAA;AAAA,UACA,UAAY,EAAA,qBAAA;AAAA,UAEX,QAAA,EAAA;AAAA;AAAA,OACH;AAAA;AAIJ,IAAI,IAAA,MAAA,IAAU,SAAS,CAAC,CAAC,MAAM,IAAQ,IAAA,OAAO,KAAM,CAAA,IAAA,KAAS,QAAU,EAAA;AACrE,MAAA,OAAA,uBACG,mBAAoB,EAAA,EAAA,IAAA,EAAM,MAAM,IAAM,EAAA,SAAA,EAAW,eAC/C,QACH,EAAA,OAAA,EAAA,CAAA;AAAA;AAIJ,IAAA,IAAI,QAAU,EAAA;AACZ,MAAU,OAAA,GAAA,YAAA,CAAa,QAAU,EAAA,MAAA,EAAW,OAAO,CAAA;AAAA;AAGrD,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,OAAA,mBAAW,GAAA,CAAA,WAAA,EAAA,EAAY,EAAI,EAAA,QAAA,EAAW,QAAQ,EAAA,OAAA,EAAA,CAAA;AAAA;AAGhD,IAAO,OAAA,OAAA;AAAA;AAGT,EAAU,SAAA,CAAA,WAAA,GAAc,iBAAiB,aAAa,CAAA,CAAA,CAAA;AACtD,EAAO,OAAA,SAAA;AACT;;;;"}
|
|
@@ -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;\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,sBAAyB,GAAA;;;;"}
|
|
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;\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,sBAAyB,GAAA;AAS/B,MAAM,YAA4C,GAAA;AAAA,EACvD,CAAC,sBAAsB,GAAG;AAC5B;;;;"}
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
-
import { mergeProps } from '@react-aria/utils';
|
|
3
|
+
import { mergeProps, mergeRefs } from '@react-aria/utils';
|
|
4
4
|
import { isObjectType } from 'remeda';
|
|
5
5
|
import { setProperty } from 'dot-prop';
|
|
6
6
|
|
|
7
7
|
const getPropsMerger = (options = {}) => (...propsList) => {
|
|
8
|
-
const {
|
|
8
|
+
const {
|
|
9
|
+
mergeClassNames = true,
|
|
10
|
+
mergeEventHandler = true,
|
|
11
|
+
mergeRefs: mergeRefs$1 = true
|
|
12
|
+
} = options;
|
|
9
13
|
const mergedProps = mergeProps(...propsList);
|
|
10
14
|
if (isObjectType(mergedProps)) {
|
|
11
15
|
if (!mergeClassNames) {
|
|
@@ -27,6 +31,19 @@ const getPropsMerger = (options = {}) => (...propsList) => {
|
|
|
27
31
|
}
|
|
28
32
|
}
|
|
29
33
|
}
|
|
34
|
+
if (mergeRefs$1) {
|
|
35
|
+
const refProps = Object.keys(mergedProps).filter(
|
|
36
|
+
(p) => p === "ref" || p.endsWith("Ref")
|
|
37
|
+
);
|
|
38
|
+
for (const refProp of refProps) {
|
|
39
|
+
const collectedRefObjects = propsList.map((p) => isObjectType(p) && refProp in p ? p[refProp] : null).filter((r) => r !== null);
|
|
40
|
+
setProperty(
|
|
41
|
+
mergedProps,
|
|
42
|
+
refProp,
|
|
43
|
+
mergeRefs(...collectedRefObjects)
|
|
44
|
+
);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
30
47
|
}
|
|
31
48
|
return mergedProps;
|
|
32
49
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getPropsMerger.mjs","sources":["../../../../../../src/lib/react/getPropsMerger.ts"],"sourcesContent":["import { mergeProps as ariaMergeProps } from \"@react-aria/utils\";\nimport { isObjectType } from \"remeda\";\nimport { setProperty } from \"dot-prop\";\n\ninterface MergePropsOptions {\n mergeClassNames?: boolean;\n mergeEventHandler?: boolean;\n}\n\nexport const getPropsMerger =\n (options: MergePropsOptions = {}): typeof ariaMergeProps =>\n (...propsList) => {\n const {
|
|
1
|
+
{"version":3,"file":"getPropsMerger.mjs","sources":["../../../../../../src/lib/react/getPropsMerger.ts"],"sourcesContent":["import { mergeRefs as mergeRefsFn } from \"@react-aria/utils\";\nimport { mergeProps as ariaMergeProps } from \"@react-aria/utils\";\nimport { isObjectType } from \"remeda\";\nimport { setProperty } from \"dot-prop\";\nimport type { Ref } from \"react\";\n\ninterface MergePropsOptions {\n mergeClassNames?: boolean;\n mergeEventHandler?: boolean;\n mergeRefs?: boolean;\n}\n\nexport const getPropsMerger =\n (options: MergePropsOptions = {}): typeof ariaMergeProps =>\n (...propsList) => {\n const {\n mergeClassNames = true,\n mergeEventHandler = true,\n mergeRefs = true,\n } = options;\n const mergedProps = ariaMergeProps(...propsList);\n\n if (isObjectType(mergedProps)) {\n if (!mergeClassNames) {\n // \"Unmerge\" className\n for (const props of propsList) {\n if (\n isObjectType(props) &&\n \"className\" in mergedProps &&\n \"className\" in props\n ) {\n mergedProps.className = props.className;\n }\n }\n }\n\n if (!mergeEventHandler) {\n // \"Unmerge\" eventHandler\n for (const props of propsList) {\n if (isObjectType(props)) {\n for (const [propName, propValue] of Object.entries(props)) {\n const isEventHandlerProp = /^on[A-Z]/.test(propName);\n if (isEventHandlerProp) {\n setProperty(mergedProps, propName, propValue);\n }\n }\n }\n }\n }\n\n if (mergeRefs) {\n const refProps = Object.keys(mergedProps).filter(\n (p) => p === \"ref\" || p.endsWith(\"Ref\"),\n );\n\n for (const refProp of refProps) {\n const collectedRefObjects = propsList\n .map((p) => (isObjectType(p) && refProp in p ? p[refProp] : null))\n .filter((r): r is Ref<unknown> => r !== null);\n\n setProperty(\n mergedProps,\n refProp,\n mergeRefsFn(...collectedRefObjects),\n );\n }\n }\n }\n\n return mergedProps;\n };\n"],"names":["mergeRefs","ariaMergeProps","mergeRefsFn"],"mappings":";;;;AAYO,MAAM,iBACX,CAAC,OAAA,GAA6B,EAAC,KAC/B,IAAI,SAAc,KAAA;AAChB,EAAM,MAAA;AAAA,IACJ,eAAkB,GAAA,IAAA;AAAA,IAClB,iBAAoB,GAAA,IAAA;AAAA,eACpBA,WAAY,GAAA;AAAA,GACV,GAAA,OAAA;AACJ,EAAM,MAAA,WAAA,GAAcC,UAAe,CAAA,GAAG,SAAS,CAAA;AAE/C,EAAI,IAAA,YAAA,CAAa,WAAW,CAAG,EAAA;AAC7B,IAAA,IAAI,CAAC,eAAiB,EAAA;AAEpB,MAAA,KAAA,MAAW,SAAS,SAAW,EAAA;AAC7B,QAAA,IACE,aAAa,KAAK,CAAA,IAClB,WAAe,IAAA,WAAA,IACf,eAAe,KACf,EAAA;AACA,UAAA,WAAA,CAAY,YAAY,KAAM,CAAA,SAAA;AAAA;AAChC;AACF;AAGF,IAAA,IAAI,CAAC,iBAAmB,EAAA;AAEtB,MAAA,KAAA,MAAW,SAAS,SAAW,EAAA;AAC7B,QAAI,IAAA,YAAA,CAAa,KAAK,CAAG,EAAA;AACvB,UAAA,KAAA,MAAW,CAAC,QAAU,EAAA,SAAS,KAAK,MAAO,CAAA,OAAA,CAAQ,KAAK,CAAG,EAAA;AACzD,YAAM,MAAA,kBAAA,GAAqB,UAAW,CAAA,IAAA,CAAK,QAAQ,CAAA;AACnD,YAAA,IAAI,kBAAoB,EAAA;AACtB,cAAY,WAAA,CAAA,WAAA,EAAa,UAAU,SAAS,CAAA;AAAA;AAC9C;AACF;AACF;AACF;AAGF,IAAA,IAAID,WAAW,EAAA;AACb,MAAA,MAAM,QAAW,GAAA,MAAA,CAAO,IAAK,CAAA,WAAW,CAAE,CAAA,MAAA;AAAA,QACxC,CAAC,CAAM,KAAA,CAAA,KAAM,KAAS,IAAA,CAAA,CAAE,SAAS,KAAK;AAAA,OACxC;AAEA,MAAA,KAAA,MAAW,WAAW,QAAU,EAAA;AAC9B,QAAA,MAAM,sBAAsB,SACzB,CAAA,GAAA,CAAI,CAAC,CAAO,KAAA,YAAA,CAAa,CAAC,CAAK,IAAA,OAAA,IAAW,IAAI,CAAE,CAAA,OAAO,IAAI,IAAK,CAAA,CAChE,OAAO,CAAC,CAAA,KAAyB,MAAM,IAAI,CAAA;AAE9C,QAAA,WAAA;AAAA,UACE,WAAA;AAAA,UACA,OAAA;AAAA,UACAE,SAAA,CAAY,GAAG,mBAAmB;AAAA,SACpC;AAAA;AACF;AACF;AAGF,EAAO,OAAA,WAAA;AACT;;;;"}
|
|
@@ -124,8 +124,8 @@ import './components/src/lib/propsContext/inherit/propsContextLevel.mjs';
|
|
|
124
124
|
import '@mittwald/react-tunnel';
|
|
125
125
|
import './components/src/lib/slotContext/slotContext.mjs';
|
|
126
126
|
export { useProps } from './components/src/lib/hooks/useProps.mjs';
|
|
127
|
-
import '@react-aria/utils';
|
|
128
127
|
import './components/src/lib/viewComponentContext/viewComponentContext.mjs';
|
|
128
|
+
import '@react-aria/utils';
|
|
129
129
|
import 'remeda';
|
|
130
130
|
import 'dot-prop';
|
|
131
131
|
import './components/src/components/Button/Button.mjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../../../../src/integrations/react-hook-form/components/Field/Field.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,WAAW,EAEhB,KAAK,aAAa,EACnB,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../../../../src/integrations/react-hook-form/components/Field/Field.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,WAAW,EAEhB,KAAK,aAAa,EACnB,MAAM,iBAAiB,CAAC;AAMzB,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,2CAqHhE;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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flowComponent.d.ts","sourceRoot":"","sources":["../../../../src/lib/componentFactory/flowComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,kBAAkB,IAAI,wBAAwB,EAC/C,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAEV,aAAa,EACb,YAAY,EAEZ,aAAa,EACb,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"flowComponent.d.ts","sourceRoot":"","sources":["../../../../src/lib/componentFactory/flowComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,kBAAkB,IAAI,wBAAwB,EAC/C,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAEV,aAAa,EACb,YAAY,EAEZ,aAAa,EACb,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAUzD,KAAK,OAAO,CAAC,CAAC,IAAI,CAAC,SAAS,aAAa,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;AAEnE,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,cAAc,CACpD,SAAQ,eAAe,EACrB,aAAa,CAAC,CAAC,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;CACzB;AAED,KAAK,gCAAgC,CAAC,CAAC,SAAS,iBAAiB,IAAI,IAAI,CACvE,wBAAwB,CAAC,CAAC,CAAC,EAC3B,MAAM,kBAAkB,CACzB,GACC,aAAa,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAEtD,KAAK,+BAA+B,CAAC,CAAC,SAAS,iBAAiB,IAC9D,aAAa,CAAC,gCAAgC,CAAC,CAAC,CAAC,CAAC,CAAC;AAErD,KAAK,iBAAiB,CAAC,CAAC,SAAS,iBAAiB,IAAI,iBAAiB,CACrE,wBAAwB,CAAC,CAAC,CAAC,GACzB,aAAa,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CACtD,CAAC;AAEF,KAAK,0BAA0B,GAAG,UAAU,GAAG,IAAI,CAAC;AAEpD,UAAU,OAAO;IACf,IAAI,CAAC,EAAE,0BAA0B,CAAC;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAgB,aAAa,CAAC,CAAC,SAAS,iBAAiB,EACvD,aAAa,EAAE,CAAC,EAChB,2BAA2B,EAAE,+BAA+B,CAAC,CAAC,CAAC,EAC/D,OAAO,GAAE,OAAY,GACpB,iBAAiB,CAAC,CAAC,CAAC,CA0EtB"}
|
|
@@ -2,6 +2,7 @@ import { mergeProps as ariaMergeProps } from '@react-aria/utils';
|
|
|
2
2
|
interface MergePropsOptions {
|
|
3
3
|
mergeClassNames?: boolean;
|
|
4
4
|
mergeEventHandler?: boolean;
|
|
5
|
+
mergeRefs?: boolean;
|
|
5
6
|
}
|
|
6
7
|
export declare const getPropsMerger: (options?: MergePropsOptions) => typeof ariaMergeProps;
|
|
7
8
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getPropsMerger.d.ts","sourceRoot":"","sources":["../../../../src/lib/react/getPropsMerger.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"getPropsMerger.d.ts","sourceRoot":"","sources":["../../../../src/lib/react/getPropsMerger.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAKjE,UAAU,iBAAiB;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,cAAc,GACxB,UAAS,iBAAsB,KAAG,OAAO,cAyDzC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "0.2.0-alpha.
|
|
3
|
+
"version": "0.2.0-alpha.484",
|
|
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.
|
|
61
|
+
"@mittwald/react-tunnel": "0.2.0-alpha.484",
|
|
62
62
|
"@mittwald/react-use-promise": "^3.0.4",
|
|
63
63
|
"@react-aria/form": "^3.1.0",
|
|
64
64
|
"@react-aria/live-announcer": "^3.4.4",
|
|
@@ -101,7 +101,7 @@
|
|
|
101
101
|
"@faker-js/faker": "^9.9.0",
|
|
102
102
|
"@internationalized/date": "^3.8.2",
|
|
103
103
|
"@mittwald/flow-core": "",
|
|
104
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
104
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.484",
|
|
105
105
|
"@mittwald/react-use-promise": "^3.0.4",
|
|
106
106
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.3",
|
|
107
107
|
"@mittwald/typescript-config": "",
|
|
@@ -161,7 +161,7 @@
|
|
|
161
161
|
"next": "*",
|
|
162
162
|
"react": "^19",
|
|
163
163
|
"react-dom": "^19",
|
|
164
|
-
"react-hook-form": "
|
|
164
|
+
"react-hook-form": "^7.55.0"
|
|
165
165
|
},
|
|
166
166
|
"peerDependenciesMeta": {
|
|
167
167
|
"@internationalized/date": {
|
|
@@ -174,5 +174,5 @@
|
|
|
174
174
|
"optional": true
|
|
175
175
|
}
|
|
176
176
|
},
|
|
177
|
-
"gitHead": "
|
|
177
|
+
"gitHead": "f312c4667117190295fe590c7bc828c07cb046dd"
|
|
178
178
|
}
|