@mittwald/flow-react-components 0.2.0-alpha.875 → 0.2.0-alpha.876
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 +6 -0
- package/dist/assets/doc-properties.json +4086 -4086
- package/dist/js/packages/components/src/lib/hooks/useFieldComponent.mjs +4 -0
- package/dist/js/packages/components/src/lib/hooks/useFieldComponent.mjs.map +1 -1
- package/dist/js/packages/components/src/lib/hooks/useFieldError.mjs +5 -4
- package/dist/js/packages/components/src/lib/hooks/useFieldError.mjs.map +1 -1
- package/dist/types/lib/hooks/useFieldComponent.d.ts +3 -0
- package/dist/types/lib/hooks/useFieldComponent.d.ts.map +1 -1
- package/dist/types/lib/hooks/useFieldError.d.ts +1 -0
- package/dist/types/lib/hooks/useFieldError.d.ts.map +1 -1
- package/package.json +6 -6
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
+
import { useId } from 'react';
|
|
3
4
|
import '../propsContext/propsContext.mjs';
|
|
4
5
|
import '../propsContext/components/PropsContextProvider.mjs';
|
|
5
6
|
import formFieldStyles from '../../components/FormField/FormField.module.scss.mjs';
|
|
@@ -7,7 +8,9 @@ import { useFieldError } from './useFieldError.mjs';
|
|
|
7
8
|
import clsx from 'clsx';
|
|
8
9
|
|
|
9
10
|
const useFieldComponent = (props, component) => {
|
|
11
|
+
const fieldErrorId = useId();
|
|
10
12
|
const { FieldErrorView, FieldErrorCaptureContext } = useFieldError({
|
|
13
|
+
fieldErrorId,
|
|
11
14
|
component
|
|
12
15
|
});
|
|
13
16
|
const fieldPropsContext = {
|
|
@@ -25,6 +28,7 @@ const useFieldComponent = (props, component) => {
|
|
|
25
28
|
FieldErrorCaptureContext,
|
|
26
29
|
fieldPropsContext,
|
|
27
30
|
fieldProps: {
|
|
31
|
+
"aria-describedby": props.isInvalid ? fieldErrorId : props["aria-describedby"],
|
|
28
32
|
className: clsx(formFieldStyles.formField)
|
|
29
33
|
}
|
|
30
34
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFieldComponent.mjs","sources":["../../../../../../../src/lib/hooks/useFieldComponent.tsx"],"sourcesContent":["import type
|
|
1
|
+
{"version":3,"file":"useFieldComponent.mjs","sources":["../../../../../../../src/lib/hooks/useFieldComponent.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useId } from \"react\";\nimport { type PropsContext } from \"@/lib/propsContext\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport { useFieldError } from \"@/lib/hooks/useFieldError\";\nimport clsx, { type ClassValue } from \"clsx\";\nimport type { FlowComponentName } from \"@/components/propTypes\";\n\ninterface FieldComponentProps {\n className?: ClassValue;\n isRequired?: boolean;\n isDisabled?: boolean;\n isInvalid?: boolean;\n \"aria-describedby\"?: string;\n}\n\nexport interface UseFieldComponent {\n FieldErrorCaptureContext: FC<PropsWithChildren>;\n FieldErrorView: FC;\n fieldPropsContext: PropsContext;\n fieldProps: {\n \"aria-describedby\"?: string;\n className?: ReturnType<typeof clsx>;\n };\n}\n\nexport const useFieldComponent = (\n props: FieldComponentProps,\n component: FlowComponentName,\n): UseFieldComponent => {\n const fieldErrorId = useId();\n const { FieldErrorView, FieldErrorCaptureContext } = useFieldError({\n fieldErrorId,\n component,\n });\n\n // setting up the props context for all components that\n // are part of a form control\n const fieldPropsContext: PropsContext = {\n Label: {\n className: formFieldStyles.label,\n optional: !props.isRequired,\n isDisabled: !!props.isDisabled,\n },\n FieldDescription: {\n className: formFieldStyles.fieldDescription,\n },\n };\n\n return {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n fieldProps: {\n \"aria-describedby\": props.isInvalid\n ? fieldErrorId\n : props[\"aria-describedby\"],\n className: clsx(formFieldStyles.formField),\n },\n } as const;\n};\n"],"names":[],"mappings":";;;;;;;AAyBO,MAAM,iBAAA,GAAoB,CAC/B,KAAA,EACA,SAAA,KACsB;AACtB,EAAA,MAAM,eAAe,KAAA,EAAM;AAC3B,EAAA,MAAM,EAAE,cAAA,EAAgB,wBAAA,EAAyB,GAAI,aAAA,CAAc;AAAA,IACjE,YAAA;AAAA,IACA;AAAA,GACD,CAAA;AAID,EAAA,MAAM,iBAAA,GAAkC;AAAA,IACtC,KAAA,EAAO;AAAA,MACL,WAAW,eAAA,CAAgB,KAAA;AAAA,MAC3B,QAAA,EAAU,CAAC,KAAA,CAAM,UAAA;AAAA,MACjB,UAAA,EAAY,CAAC,CAAC,KAAA,CAAM;AAAA,KACtB;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB,WAAW,eAAA,CAAgB;AAAA;AAC7B,GACF;AAEA,EAAA,OAAO;AAAA,IACL,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA,EAAY;AAAA,MACV,kBAAA,EAAoB,KAAA,CAAM,SAAA,GACtB,YAAA,GACA,MAAM,kBAAkB,CAAA;AAAA,MAC5B,SAAA,EAAW,IAAA,CAAK,eAAA,CAAgB,SAAS;AAAA;AAC3C,GACF;AACF;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
3
|
import { jsx } from 'react/jsx-runtime';
|
|
4
|
-
import React, {
|
|
4
|
+
import React, { useMemo } from 'react';
|
|
5
5
|
import '../propsContext/propsContext.mjs';
|
|
6
6
|
import { PropsContextProvider } from '../propsContext/components/PropsContextProvider.mjs';
|
|
7
7
|
import formFieldStyles from '../../components/FormField/FormField.module.scss.mjs';
|
|
@@ -10,11 +10,12 @@ import { useProps } from './useProps.mjs';
|
|
|
10
10
|
import { UiComponentTunnelExit } from '../../components/UiComponentTunnel/UiComponentTunnelExit.mjs';
|
|
11
11
|
|
|
12
12
|
const useFieldError = (options) => {
|
|
13
|
-
const
|
|
14
|
-
const currentTunnelId =
|
|
15
|
-
const tunnelId = options.tunnelId ?? currentTunnelId ?? `${
|
|
13
|
+
const fieldErrorProps = useProps("FieldError", {});
|
|
14
|
+
const currentTunnelId = fieldErrorProps.tunnel?.id;
|
|
15
|
+
const tunnelId = options.tunnelId ?? currentTunnelId ?? `${options.fieldErrorId}.fieldError`;
|
|
16
16
|
const fieldErrorCapturePropsContext = {
|
|
17
17
|
FieldError: {
|
|
18
|
+
id: options.fieldErrorId,
|
|
18
19
|
tunnel: { id: tunnelId, component: options.component },
|
|
19
20
|
className: formFieldStyles.fieldError
|
|
20
21
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFieldError.mjs","sources":["../../../../../../../src/lib/hooks/useFieldError.tsx"],"sourcesContent":["import React, { type FC, type PropsWithChildren,
|
|
1
|
+
{"version":3,"file":"useFieldError.mjs","sources":["../../../../../../../src/lib/hooks/useFieldError.tsx"],"sourcesContent":["import React, { type FC, type PropsWithChildren, useMemo } from \"react\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport ClearPropsContext from \"@/lib/propsContext/components/ClearPropsContext\";\nimport { useProps } from \"@/lib/hooks/useProps\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport type { FlowComponentName } from \"@/components/propTypes\";\n\nexport interface UseFieldErrorOptions {\n fieldErrorId: string;\n tunnelId?: string;\n component: FlowComponentName;\n}\n\nexport const useFieldError = (options: UseFieldErrorOptions) => {\n const fieldErrorProps = useProps(\"FieldError\", {});\n const currentTunnelId = fieldErrorProps.tunnel?.id;\n const tunnelId =\n options.tunnelId ?? currentTunnelId ?? `${options.fieldErrorId}.fieldError`;\n\n const fieldErrorCapturePropsContext: PropsContext = {\n FieldError: {\n id: options.fieldErrorId,\n tunnel: { id: tunnelId, component: options.component },\n className: formFieldStyles.fieldError,\n },\n };\n\n const FieldErrorCaptureContext: FC<PropsWithChildren> = useMemo(\n () => (props) => {\n return (\n <PropsContextProvider\n props={fieldErrorCapturePropsContext}\n dependencies={[tunnelId]}\n >\n {props.children}\n </PropsContextProvider>\n );\n },\n [tunnelId],\n );\n\n const FieldErrorView = () => {\n if (currentTunnelId) {\n return null;\n }\n\n return (\n <UiComponentTunnelExit id={tunnelId} component={options.component}>\n {(children) => {\n const childrenArray = React.Children.toArray(children);\n return <ClearPropsContext>{childrenArray[0]}</ClearPropsContext>;\n }}\n </UiComponentTunnelExit>\n );\n };\n\n return {\n FieldErrorCaptureContext,\n FieldErrorView,\n } as const;\n};\n"],"names":[],"mappings":";;;;;;;;;AAcO,MAAM,aAAA,GAAgB,CAAC,OAAA,KAAkC;AAC9D,EAAA,MAAM,eAAA,GAAkB,QAAA,CAAS,YAAA,EAAc,EAAE,CAAA;AACjD,EAAA,MAAM,eAAA,GAAkB,gBAAgB,MAAA,EAAQ,EAAA;AAChD,EAAA,MAAM,WACJ,OAAA,CAAQ,QAAA,IAAY,eAAA,IAAmB,CAAA,EAAG,QAAQ,YAAY,CAAA,WAAA,CAAA;AAEhE,EAAA,MAAM,6BAAA,GAA8C;AAAA,IAClD,UAAA,EAAY;AAAA,MACV,IAAI,OAAA,CAAQ,YAAA;AAAA,MACZ,QAAQ,EAAE,EAAA,EAAI,QAAA,EAAU,SAAA,EAAW,QAAQ,SAAA,EAAU;AAAA,MACrD,WAAW,eAAA,CAAgB;AAAA;AAC7B,GACF;AAEA,EAAA,MAAM,wBAAA,GAAkD,OAAA;AAAA,IACtD,MAAM,CAAC,KAAA,KAAU;AACf,MAAA,uBACE,GAAA;AAAA,QAAC,oBAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAO,6BAAA;AAAA,UACP,YAAA,EAAc,CAAC,QAAQ,CAAA;AAAA,UAEtB,QAAA,EAAA,KAAA,CAAM;AAAA;AAAA,OACT;AAAA,IAEJ,CAAA;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,MAAM,iBAAiB,MAAM;AAC3B,IAAA,IAAI,eAAA,EAAiB;AACnB,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,uBACE,GAAA,CAAC,yBAAsB,EAAA,EAAI,QAAA,EAAU,WAAW,OAAA,CAAQ,SAAA,EACrD,WAAC,QAAA,KAAa;AACb,MAAA,MAAM,aAAA,GAAgB,KAAA,CAAM,QAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA;AACrD,MAAA,uBAAO,GAAA,CAAC,iBAAA,EAAA,EAAmB,QAAA,EAAA,aAAA,CAAc,CAAC,CAAA,EAAE,CAAA;AAAA,IAC9C,CAAA,EACF,CAAA;AAAA,EAEJ,CAAA;AAEA,EAAA,OAAO;AAAA,IACL,wBAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
|
|
@@ -6,12 +6,15 @@ interface FieldComponentProps {
|
|
|
6
6
|
className?: ClassValue;
|
|
7
7
|
isRequired?: boolean;
|
|
8
8
|
isDisabled?: boolean;
|
|
9
|
+
isInvalid?: boolean;
|
|
10
|
+
"aria-describedby"?: string;
|
|
9
11
|
}
|
|
10
12
|
export interface UseFieldComponent {
|
|
11
13
|
FieldErrorCaptureContext: FC<PropsWithChildren>;
|
|
12
14
|
FieldErrorView: FC;
|
|
13
15
|
fieldPropsContext: PropsContext;
|
|
14
16
|
fieldProps: {
|
|
17
|
+
"aria-describedby"?: string;
|
|
15
18
|
className?: ReturnType<typeof clsx>;
|
|
16
19
|
};
|
|
17
20
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFieldComponent.d.ts","sourceRoot":"","sources":["../../../../src/lib/hooks/useFieldComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"useFieldComponent.d.ts","sourceRoot":"","sources":["../../../../src/lib/hooks/useFieldComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAS,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGvD,OAAO,IAAI,EAAE,EAAE,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAC7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,UAAU,mBAAmB;IAC3B,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,iBAAiB;IAChC,wBAAwB,EAAE,EAAE,CAAC,iBAAiB,CAAC,CAAC;IAChD,cAAc,EAAE,EAAE,CAAC;IACnB,iBAAiB,EAAE,YAAY,CAAC;IAChC,UAAU,EAAE;QACV,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,SAAS,CAAC,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;KACrC,CAAC;CACH;AAED,eAAO,MAAM,iBAAiB,GAC5B,OAAO,mBAAmB,EAC1B,WAAW,iBAAiB,KAC3B,iBA+BF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFieldError.d.ts","sourceRoot":"","sources":["../../../../src/lib/hooks/useFieldError.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"useFieldError.d.ts","sourceRoot":"","sources":["../../../../src/lib/hooks/useFieldError.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAMxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,MAAM,WAAW,oBAAoB;IACnC,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,iBAAiB,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,GAAI,SAAS,oBAAoB;;;;;CA+C1D,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.876",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://mittwald.github.io/flow",
|
|
@@ -63,9 +63,9 @@
|
|
|
63
63
|
"@internationalized/string": "^3.2.9",
|
|
64
64
|
"@internationalized/string-compiler": "^3.4.1",
|
|
65
65
|
"@lezer/highlight": "^1.2.3",
|
|
66
|
-
"@mittwald/flow-icons": "0.2.0-alpha.
|
|
66
|
+
"@mittwald/flow-icons": "0.2.0-alpha.876",
|
|
67
67
|
"@mittwald/password-tools-js": "3.0.0-alpha.30",
|
|
68
|
-
"@mittwald/react-tunnel": "0.2.0-alpha.
|
|
68
|
+
"@mittwald/react-tunnel": "0.2.0-alpha.876",
|
|
69
69
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
70
70
|
"@react-aria/form": "^3.2.1",
|
|
71
71
|
"@react-aria/i18n": "^3.13.1",
|
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
"@lezer/generator": "^1.8.0",
|
|
121
121
|
"@lezer/lr": "^1.4.10",
|
|
122
122
|
"@mittwald/flow-core": "",
|
|
123
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
123
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.876",
|
|
124
124
|
"@mittwald/flow-icons-base": "",
|
|
125
125
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
126
126
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
@@ -175,7 +175,7 @@
|
|
|
175
175
|
},
|
|
176
176
|
"peerDependencies": {
|
|
177
177
|
"@internationalized/date": "^3.12.2",
|
|
178
|
-
"@mittwald/flow-icons-pro": "0.2.0-alpha.
|
|
178
|
+
"@mittwald/flow-icons-pro": "0.2.0-alpha.875",
|
|
179
179
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
180
180
|
"next": "^16.2.3",
|
|
181
181
|
"react": "^19.2.0",
|
|
@@ -196,5 +196,5 @@
|
|
|
196
196
|
"optional": true
|
|
197
197
|
}
|
|
198
198
|
},
|
|
199
|
-
"gitHead": "
|
|
199
|
+
"gitHead": "dbf89543c34a6fce799f151fd9fbfb580be0bb3a"
|
|
200
200
|
}
|