@mittwald/flow-react-components 0.2.0-alpha.341 → 0.2.0-alpha.343
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 +12 -0
- package/dist/assets/doc-properties.json +1036 -1036
- package/dist/css/all.css +1 -1
- package/dist/js/components/src/components/PasswordCreationField/PasswordCreationField.mjs +16 -19
- package/dist/js/components/src/components/PasswordCreationField/PasswordCreationField.mjs.map +1 -1
- package/dist/types/components/LabeledValue/stories/Default.stories.d.ts +1 -0
- package/dist/types/components/LabeledValue/stories/Default.stories.d.ts.map +1 -1
- package/dist/types/components/PasswordCreationField/PasswordCreationField.d.ts +2 -2
- package/dist/types/components/PasswordCreationField/PasswordCreationField.d.ts.map +1 -1
- package/dist/types/components/PasswordCreationField/lib/generatePasswordCreationFieldValidation.d.ts +3 -0
- package/dist/types/components/PasswordCreationField/lib/generatePasswordCreationFieldValidation.d.ts.map +1 -0
- package/dist/types/components/PasswordCreationField/stories/Default.stories.d.ts.map +1 -1
- package/package.json +4 -4
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
3
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
4
|
-
import { useState } from 'react';
|
|
4
|
+
import { useState, useEffect } from 'react';
|
|
5
5
|
import { ClearPropsContext } from '../ClearPropsContext/ClearPropsContext.mjs';
|
|
6
6
|
import '../../lib/propsContext/propsContext.mjs';
|
|
7
7
|
import { dynamic } from '../../lib/propsContext/dynamicProps/dynamic.mjs';
|
|
@@ -51,8 +51,7 @@ const PasswordCreationField = flowComponent(
|
|
|
51
51
|
isInvalid: invalidFromProps,
|
|
52
52
|
validationPolicy = defaultPasswordCreationPolicy,
|
|
53
53
|
isRequired,
|
|
54
|
-
value
|
|
55
|
-
defaultValue: ignoredDefaultValue,
|
|
54
|
+
value,
|
|
56
55
|
...rest
|
|
57
56
|
} = props;
|
|
58
57
|
const translate = useLocalizedContextStringFormatter(locales);
|
|
@@ -83,17 +82,18 @@ const PasswordCreationField = flowComponent(
|
|
|
83
82
|
translationValues
|
|
84
83
|
);
|
|
85
84
|
}
|
|
85
|
+
const [bouncedValue, setDebouncedValue] = useDebounceValue(
|
|
86
|
+
"",
|
|
87
|
+
validationDebounceMilliseconds
|
|
88
|
+
);
|
|
89
|
+
useEffect(() => {
|
|
90
|
+
setDebouncedValue(value ?? "");
|
|
91
|
+
}, [value]);
|
|
86
92
|
const isMounted = useIsMounted();
|
|
87
|
-
const
|
|
88
|
-
const [bouncedValue, setDebouncedValue] = useDebounceValue(void 0, validationDebounceMilliseconds);
|
|
89
|
-
const isEmptyValue = bouncedValue === void 0;
|
|
93
|
+
const isEmptyValue = !value;
|
|
90
94
|
const isValidFromValidationResult = !isEmptyValue && stateFromValidationResult?.isValid;
|
|
91
95
|
const isInvalidFromValidationResult = !isEmptyValue && !stateFromValidationResult?.isValid;
|
|
92
96
|
const isInvalid = invalidFromProps || isInvalidFromValidationResult;
|
|
93
|
-
const setUncontrolledValue = (value2) => {
|
|
94
|
-
setValue(value2);
|
|
95
|
-
setDebouncedValue(value2 === "" ? void 0 : value2);
|
|
96
|
-
};
|
|
97
97
|
const setOptimisticPolicyValidationResult = (isValid = true) => {
|
|
98
98
|
setPolicyValidationResult({
|
|
99
99
|
...initialPolicyValidationState,
|
|
@@ -105,7 +105,7 @@ const PasswordCreationField = flowComponent(
|
|
|
105
105
|
if (signal.aborted) {
|
|
106
106
|
return;
|
|
107
107
|
}
|
|
108
|
-
const validationResult = validationPolicy.validate(
|
|
108
|
+
const validationResult = validationPolicy.validate(bouncedValue);
|
|
109
109
|
if (typeof validationResult.isValid === "boolean") {
|
|
110
110
|
setIsLoading(false);
|
|
111
111
|
setPolicyValidationResult((old) => ({
|
|
@@ -115,7 +115,7 @@ const PasswordCreationField = flowComponent(
|
|
|
115
115
|
complexity: validationResult.complexity
|
|
116
116
|
}));
|
|
117
117
|
if (onChange && isMounted) {
|
|
118
|
-
onChange(
|
|
118
|
+
onChange(bouncedValue);
|
|
119
119
|
}
|
|
120
120
|
return;
|
|
121
121
|
}
|
|
@@ -127,7 +127,7 @@ const PasswordCreationField = flowComponent(
|
|
|
127
127
|
setOptimisticPolicyValidationResult();
|
|
128
128
|
}
|
|
129
129
|
void Promise.all([
|
|
130
|
-
Promise.resolve(
|
|
130
|
+
Promise.resolve(bouncedValue),
|
|
131
131
|
...validationResult.ruleResults
|
|
132
132
|
]).then(([resolvedValue, ...validationResults]) => {
|
|
133
133
|
if (signal.aborted) {
|
|
@@ -141,14 +141,14 @@ const PasswordCreationField = flowComponent(
|
|
|
141
141
|
ruleResults: validationResults
|
|
142
142
|
}));
|
|
143
143
|
if (onChange && isMounted) {
|
|
144
|
-
onChange(
|
|
144
|
+
onChange(resolvedValue);
|
|
145
145
|
}
|
|
146
146
|
});
|
|
147
147
|
},
|
|
148
148
|
[bouncedValue]
|
|
149
149
|
);
|
|
150
150
|
const onChangeValueHandler = (value2) => {
|
|
151
|
-
|
|
151
|
+
onChange?.(value2);
|
|
152
152
|
};
|
|
153
153
|
const onPasswordGenerateHandler = async () => {
|
|
154
154
|
const generatedPassword = await generatePassword(validationPolicy);
|
|
@@ -156,9 +156,6 @@ const PasswordCreationField = flowComponent(
|
|
|
156
156
|
setIsPasswordRevealed(true);
|
|
157
157
|
onChangeValueHandler(generatedPassword);
|
|
158
158
|
};
|
|
159
|
-
const onPasswordInputChangeHandler = (value2) => {
|
|
160
|
-
onChangeValueHandler(value2);
|
|
161
|
-
};
|
|
162
159
|
const onPasswordPasteHandler = (event) => {
|
|
163
160
|
const pastedValue = event.clipboardData.getData("text");
|
|
164
161
|
if (pastedValue !== value) {
|
|
@@ -229,7 +226,7 @@ const PasswordCreationField = flowComponent(
|
|
|
229
226
|
...rest,
|
|
230
227
|
type: isPasswordRevealed ? "text" : "password",
|
|
231
228
|
value,
|
|
232
|
-
onChange:
|
|
229
|
+
onChange: onChangeValueHandler,
|
|
233
230
|
onPaste: onPasswordPasteHandler,
|
|
234
231
|
className: clsx(className, formFieldStyles.formField),
|
|
235
232
|
isDisabled,
|
package/dist/js/components/src/components/PasswordCreationField/PasswordCreationField.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PasswordCreationField.mjs","sources":["../../../../../../src/components/PasswordCreationField/PasswordCreationField.tsx"],"sourcesContent":["import React, {\n type PropsWithChildren,\n useState,\n type ClipboardEvent,\n} from \"react\";\nimport {\n ClearPropsContext,\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"./PasswordCreationField.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport clsx from \"clsx\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport type { Policy } from \"@mittwald/password-tools-js/policy\";\nimport { type ActionFn } from \"@/components/Action\";\nimport getStateFromLatestPolicyValidationResult from \"@/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult\";\nimport locales from \"./locales/*.locale.json\";\nimport generateValidationTranslation from \"@/components/PasswordCreationField/lib/generateValidationTranslation\";\nimport { FieldError } from \"@/components/FieldError\";\nimport FieldDescription from \"@/components/FieldDescription\";\nimport ComplexityIndicator from \"@/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator\";\nimport { type PolicyValidationResult } from \"@mittwald/password-tools-js/policy\";\nimport { type RuleValidationResult } from \"@mittwald/password-tools-js/rules\";\nimport { useDebounceValue } from \"usehooks-ts\";\nimport { generatePassword } from \"@/components/PasswordCreationField/worker/generatePassword\";\nimport TogglePasswordVisibilityButton from \"@/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton\";\nimport { useAbortablePromise } from \"@/lib/promises/useAbortablePromise\";\nimport { defaultPasswordCreationPolicy } from \"@/components/PasswordCreationField/defaultPasswordCreationPolicy\";\nimport { FieldErrorContext } from \"react-aria-components\";\nimport { Wrap } from \"@/components/Wrap\";\nimport { ReactAriaControlledValueFix } from \"@/lib/react/ReactAriaControlledValueFix\";\nimport { useIsMounted } from \"@/lib/hooks\";\nimport { ValidationResultButton } from \"@/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton\";\nimport { PasswordGenerateButton } from \"@/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton\";\nimport { useLocalizedContextStringFormatter } from \"@/components/TranslationProvider/useLocalizedContextStringFormatter\";\n\nconst validationDebounceMilliseconds = 200;\n\nexport interface PasswordCreationFieldProps\n extends PropsWithChildren<\n Omit<Aria.TextFieldProps, \"children\" | \"value\" | \"defaultValue\"> &\n Partial<Pick<Aria.FieldErrorRenderProps, \"validationErrors\">>\n >,\n FlowComponentProps<HTMLInputElement> {\n value?: never;\n defaultValue?: never;\n placeholder?: string;\n validationPolicy?: Policy;\n}\n\nexport interface ResolvedPolicyValidationResult\n extends Omit<PolicyValidationResult, \"isValid\"> {\n isValid: boolean | \"indeterminate\";\n ruleResults: RuleValidationResult[];\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const PasswordCreationField = flowComponent(\n \"PasswordCreationField\",\n (props) => {\n const {\n children,\n className,\n ref,\n isDisabled,\n onChange,\n isInvalid: invalidFromProps,\n validationPolicy = defaultPasswordCreationPolicy,\n isRequired,\n value: ignoredValue,\n defaultValue: ignoredDefaultValue,\n ...rest\n } = props;\n\n const translate = useLocalizedContextStringFormatter(locales);\n\n const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n\n const initialPolicyValidationState: ResolvedPolicyValidationResult = {\n isValid: false,\n complexity: {\n min: validationPolicy.minComplexity,\n actual: 4,\n warning: null,\n },\n ruleResults: [],\n };\n\n const [policyValidationResult, setPolicyValidationResult] = useState(\n initialPolicyValidationState,\n );\n\n const stateFromValidationResult = getStateFromLatestPolicyValidationResult(\n policyValidationResult,\n );\n let latestValidationErrorText = undefined;\n if (stateFromValidationResult) {\n const [translationKey, translationValues] = generateValidationTranslation(\n stateFromValidationResult,\n );\n latestValidationErrorText = translate.format(\n translationKey,\n translationValues,\n );\n }\n\n const isMounted = useIsMounted();\n\n const [value, setValue] = useState(\"\");\n const [bouncedValue, setDebouncedValue] = useDebounceValue<\n string | undefined\n >(undefined, validationDebounceMilliseconds);\n const isEmptyValue = bouncedValue === undefined;\n\n const isValidFromValidationResult =\n !isEmptyValue && stateFromValidationResult?.isValid;\n\n const isInvalidFromValidationResult =\n !isEmptyValue && !stateFromValidationResult?.isValid;\n\n const isInvalid = invalidFromProps || isInvalidFromValidationResult;\n\n const setUncontrolledValue = (value: string) => {\n setValue(value);\n setDebouncedValue(value === \"\" ? undefined : value);\n };\n\n const setOptimisticPolicyValidationResult = (\n isValid: ResolvedPolicyValidationResult[\"isValid\"] = true,\n ) => {\n setPolicyValidationResult({\n ...initialPolicyValidationState,\n isValid,\n });\n };\n\n useAbortablePromise(\n async (signal) => {\n if (signal.aborted) {\n return;\n }\n\n const validationResult = validationPolicy.validate(value);\n if (typeof validationResult.isValid === \"boolean\") {\n setIsLoading(false);\n setPolicyValidationResult((old) => ({\n ...old,\n isValid: validationResult.isValid as boolean,\n ruleResults: validationResult.ruleResults as RuleValidationResult[],\n complexity: validationResult.complexity,\n }));\n\n if (onChange && isMounted) {\n onChange(validationResult.isValid ? value : \"\");\n }\n return;\n }\n\n const nonPromiseValidationsInvalid = validationResult.ruleResults\n .filter((r): r is RuleValidationResult => !(r instanceof Promise))\n .some((r) => !r.isValid);\n\n if (!isEmptyValue) {\n setIsLoading(true);\n }\n if (!nonPromiseValidationsInvalid) {\n setOptimisticPolicyValidationResult();\n }\n\n void Promise.all([\n Promise.resolve(value),\n ...validationResult.ruleResults,\n ]).then(([resolvedValue, ...validationResults]) => {\n if (signal.aborted) {\n return;\n }\n\n const isValid = !validationResults.some((r) => !r.isValid);\n\n setIsLoading(false);\n setPolicyValidationResult((old) => ({\n ...old,\n isValid,\n ruleResults: validationResults,\n }));\n\n if (onChange && isMounted) {\n onChange(isValid ? resolvedValue : \"\");\n }\n });\n },\n [bouncedValue],\n );\n\n const onChangeValueHandler = (value: string) => {\n setUncontrolledValue(value);\n };\n\n const onPasswordGenerateHandler: ActionFn = async () => {\n const generatedPassword = await generatePassword(validationPolicy);\n setOptimisticPolicyValidationResult();\n setIsPasswordRevealed(true);\n onChangeValueHandler(generatedPassword);\n };\n\n const onPasswordInputChangeHandler = (value: string) => {\n onChangeValueHandler(value);\n };\n\n const onPasswordPasteHandler = (event: ClipboardEvent) => {\n const pastedValue = event.clipboardData.getData(\"text\");\n if (pastedValue !== value) {\n setOptimisticPolicyValidationResult(\"indeterminate\");\n }\n };\n\n const togglePasswordVisibilityHandler = () => {\n setIsPasswordRevealed((old) => !old);\n };\n\n const propsContext: PropsContext = {\n Button: {\n tunnelId: \"button\",\n size: \"m\",\n variant: \"plain\",\n color: \"secondary\",\n isDisabled: isDisabled,\n className: styles.button,\n },\n CopyButton: {\n tunnelId: \"button\",\n size: \"m\",\n variant: \"plain\",\n color: \"secondary\",\n isDisabled: isDisabled,\n className: styles.button,\n },\n Label: {\n className: formFieldStyles.label,\n tunnelId: \"label\",\n optional: !isRequired,\n isDisabled: isDisabled,\n children: dynamic((localProps) => {\n return (\n <>\n {localProps.children}\n <PasswordGenerateButton\n isDisabled={isDisabled}\n onGeneratePasswordAction={onPasswordGenerateHandler}\n />\n <ValidationResultButton\n isEmptyValue={isEmptyValue}\n isDisabled={isDisabled}\n policyValidationResult={policyValidationResult}\n />\n </>\n );\n }),\n },\n FieldDescription: {\n className: formFieldStyles.fieldDescription,\n },\n FieldError: {\n className: formFieldStyles.customFieldError,\n children: dynamic(() => {\n if (latestValidationErrorText) {\n return latestValidationErrorText;\n }\n }),\n },\n };\n\n return (\n <ClearPropsContext>\n <TunnelProvider>\n <Aria.TextField\n {...rest}\n type={isPasswordRevealed ? \"text\" : \"password\"}\n value={value}\n onChange={onPasswordInputChangeHandler}\n onPaste={onPasswordPasteHandler}\n className={clsx(className, formFieldStyles.formField)}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isRequired={isRequired}\n >\n <TunnelExit id=\"label\" />\n <Aria.Group\n isDisabled={isDisabled}\n className={clsx(styles.inputGroup)}\n >\n <ReactAriaControlledValueFix\n inputContext={Aria.InputContext}\n props={props}\n >\n <Aria.Input className={styles.input} ref={ref} />\n </ReactAriaControlledValueFix>\n <Aria.Group className={styles.buttonContainer}>\n <TogglePasswordVisibilityButton\n className={styles.button}\n isVisible={isPasswordRevealed}\n isDisabled={isDisabled}\n onPress={togglePasswordVisibilityHandler}\n />\n <TunnelExit id=\"button\" />\n </Aria.Group>\n <ComplexityIndicator\n isEmptyValue={isEmptyValue}\n isLoading={isLoading}\n policyValidationResult={policyValidationResult}\n />\n </Aria.Group>\n <PropsContextProvider props={propsContext}>\n {isValidFromValidationResult && (\n <FieldDescription>{latestValidationErrorText}</FieldDescription>\n )}\n {isInvalidFromValidationResult &&\n policyValidationResult.isValid !== \"indeterminate\" && (\n <FieldError>{latestValidationErrorText}</FieldError>\n )}\n <Wrap if={isInvalidFromValidationResult}>\n <FieldErrorContext.Provider\n value={{\n isInvalid: false,\n validationErrors: [],\n validationDetails: {\n customError: false,\n valid: true,\n typeMismatch: false,\n stepMismatch: false,\n valueMissing: false,\n tooShort: false,\n tooLong: false,\n rangeUnderflow: false,\n patternMismatch: false,\n badInput: false,\n rangeOverflow: false,\n },\n }}\n >\n {children}\n </FieldErrorContext.Provider>\n </Wrap>\n </PropsContextProvider>\n </Aria.TextField>\n </TunnelProvider>\n </ClearPropsContext>\n );\n },\n);\n\nexport default PasswordCreationField;\n"],"names":["value"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,8BAAiC,GAAA,GAAA;AAwBhC,MAAM,qBAAwB,GAAA,aAAA;AAAA,EACnC,uBAAA;AAAA,EACA,CAAC,KAAU,KAAA;AACT,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAW,EAAA,gBAAA;AAAA,MACX,gBAAmB,GAAA,6BAAA;AAAA,MACnB,UAAA;AAAA,MACA,KAAO,EAAA,YAAA;AAAA,MACP,YAAc,EAAA,mBAAA;AAAA,MACd,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAM,MAAA,SAAA,GAAY,mCAAmC,OAAO,CAAA;AAE5D,IAAA,MAAM,CAAC,kBAAA,EAAoB,qBAAqB,CAAA,GAAI,SAAS,KAAK,CAAA;AAClE,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAEhD,IAAA,MAAM,4BAA+D,GAAA;AAAA,MACnE,OAAS,EAAA,KAAA;AAAA,MACT,UAAY,EAAA;AAAA,QACV,KAAK,gBAAiB,CAAA,aAAA;AAAA,QACtB,MAAQ,EAAA,CAAA;AAAA,QACR,OAAS,EAAA;AAAA,OACX;AAAA,MACA,aAAa;AAAC,KAChB;AAEA,IAAM,MAAA,CAAC,sBAAwB,EAAA,yBAAyB,CAAI,GAAA,QAAA;AAAA,MAC1D;AAAA,KACF;AAEA,IAAA,MAAM,yBAA4B,GAAA,wCAAA;AAAA,MAChC;AAAA,KACF;AACA,IAAA,IAAI,yBAA4B,GAAA,MAAA;AAChC,IAAA,IAAI,yBAA2B,EAAA;AAC7B,MAAM,MAAA,CAAC,cAAgB,EAAA,iBAAiB,CAAI,GAAA,6BAAA;AAAA,QAC1C;AAAA,OACF;AACA,MAAA,yBAAA,GAA4B,SAAU,CAAA,MAAA;AAAA,QACpC,cAAA;AAAA,QACA;AAAA,OACF;AAAA;AAGF,IAAA,MAAM,YAAY,YAAa,EAAA;AAE/B,IAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,EAAE,CAAA;AACrC,IAAA,MAAM,CAAC,YAAc,EAAA,iBAAiB,CAAI,GAAA,gBAAA,CAExC,QAAW,8BAA8B,CAAA;AAC3C,IAAA,MAAM,eAAe,YAAiB,KAAA,MAAA;AAEtC,IAAM,MAAA,2BAAA,GACJ,CAAC,YAAA,IAAgB,yBAA2B,EAAA,OAAA;AAE9C,IAAA,MAAM,6BACJ,GAAA,CAAC,YAAgB,IAAA,CAAC,yBAA2B,EAAA,OAAA;AAE/C,IAAA,MAAM,YAAY,gBAAoB,IAAA,6BAAA;AAEtC,IAAM,MAAA,oBAAA,GAAuB,CAACA,MAAkB,KAAA;AAC9C,MAAA,QAAA,CAASA,MAAK,CAAA;AACd,MAAkBA,iBAAAA,CAAAA,MAAAA,KAAU,EAAK,GAAA,MAAA,GAAYA,MAAK,CAAA;AAAA,KACpD;AAEA,IAAM,MAAA,mCAAA,GAAsC,CAC1C,OAAA,GAAqD,IAClD,KAAA;AACH,MAA0B,yBAAA,CAAA;AAAA,QACxB,GAAG,4BAAA;AAAA,QACH;AAAA,OACD,CAAA;AAAA,KACH;AAEA,IAAA,mBAAA;AAAA,MACE,OAAO,MAAW,KAAA;AAChB,QAAA,IAAI,OAAO,OAAS,EAAA;AAClB,UAAA;AAAA;AAGF,QAAM,MAAA,gBAAA,GAAmB,gBAAiB,CAAA,QAAA,CAAS,KAAK,CAAA;AACxD,QAAI,IAAA,OAAO,gBAAiB,CAAA,OAAA,KAAY,SAAW,EAAA;AACjD,UAAA,YAAA,CAAa,KAAK,CAAA;AAClB,UAAA,yBAAA,CAA0B,CAAC,GAAS,MAAA;AAAA,YAClC,GAAG,GAAA;AAAA,YACH,SAAS,gBAAiB,CAAA,OAAA;AAAA,YAC1B,aAAa,gBAAiB,CAAA,WAAA;AAAA,YAC9B,YAAY,gBAAiB,CAAA;AAAA,WAC7B,CAAA,CAAA;AAEF,UAAA,IAAI,YAAY,SAAW,EAAA;AACzB,YAAS,QAAA,CAAA,gBAAA,CAAiB,OAAU,GAAA,KAAA,GAAQ,EAAE,CAAA;AAAA;AAEhD,UAAA;AAAA;AAGF,QAAA,MAAM,4BAA+B,GAAA,gBAAA,CAAiB,WACnD,CAAA,MAAA,CAAO,CAAC,CAAiC,KAAA,EAAE,CAAa,YAAA,OAAA,CAAQ,EAChE,IAAK,CAAA,CAAC,CAAM,KAAA,CAAC,EAAE,OAAO,CAAA;AAEzB,QAAA,IAAI,CAAC,YAAc,EAAA;AACjB,UAAA,YAAA,CAAa,IAAI,CAAA;AAAA;AAEnB,QAAA,IAAI,CAAC,4BAA8B,EAAA;AACjC,UAAoC,mCAAA,EAAA;AAAA;AAGtC,QAAA,KAAK,QAAQ,GAAI,CAAA;AAAA,UACf,OAAA,CAAQ,QAAQ,KAAK,CAAA;AAAA,UACrB,GAAG,gBAAiB,CAAA;AAAA,SACrB,CAAE,CAAA,IAAA,CAAK,CAAC,CAAC,aAAA,EAAkB,oBAAiB,CAAM,KAAA;AACjD,UAAA,IAAI,OAAO,OAAS,EAAA;AAClB,YAAA;AAAA;AAGF,UAAM,MAAA,OAAA,GAAU,CAAC,iBAAkB,CAAA,IAAA,CAAK,CAAC,CAAM,KAAA,CAAC,EAAE,OAAO,CAAA;AAEzD,UAAA,YAAA,CAAa,KAAK,CAAA;AAClB,UAAA,yBAAA,CAA0B,CAAC,GAAS,MAAA;AAAA,YAClC,GAAG,GAAA;AAAA,YACH,OAAA;AAAA,YACA,WAAa,EAAA;AAAA,WACb,CAAA,CAAA;AAEF,UAAA,IAAI,YAAY,SAAW,EAAA;AACzB,YAAS,QAAA,CAAA,OAAA,GAAU,gBAAgB,EAAE,CAAA;AAAA;AACvC,SACD,CAAA;AAAA,OACH;AAAA,MACA,CAAC,YAAY;AAAA,KACf;AAEA,IAAM,MAAA,oBAAA,GAAuB,CAACA,MAAkB,KAAA;AAC9C,MAAA,oBAAA,CAAqBA,MAAK,CAAA;AAAA,KAC5B;AAEA,IAAA,MAAM,4BAAsC,YAAY;AACtD,MAAM,MAAA,iBAAA,GAAoB,MAAM,gBAAA,CAAiB,gBAAgB,CAAA;AACjE,MAAoC,mCAAA,EAAA;AACpC,MAAA,qBAAA,CAAsB,IAAI,CAAA;AAC1B,MAAA,oBAAA,CAAqB,iBAAiB,CAAA;AAAA,KACxC;AAEA,IAAM,MAAA,4BAAA,GAA+B,CAACA,MAAkB,KAAA;AACtD,MAAA,oBAAA,CAAqBA,MAAK,CAAA;AAAA,KAC5B;AAEA,IAAM,MAAA,sBAAA,GAAyB,CAAC,KAA0B,KAAA;AACxD,MAAA,MAAM,WAAc,GAAA,KAAA,CAAM,aAAc,CAAA,OAAA,CAAQ,MAAM,CAAA;AACtD,MAAA,IAAI,gBAAgB,KAAO,EAAA;AACzB,QAAA,mCAAA,CAAoC,eAAe,CAAA;AAAA;AACrD,KACF;AAEA,IAAA,MAAM,kCAAkC,MAAM;AAC5C,MAAsB,qBAAA,CAAA,CAAC,GAAQ,KAAA,CAAC,GAAG,CAAA;AAAA,KACrC;AAEA,IAAA,MAAM,YAA6B,GAAA;AAAA,MACjC,MAAQ,EAAA;AAAA,QACN,QAAU,EAAA,QAAA;AAAA,QACV,IAAM,EAAA,GAAA;AAAA,QACN,OAAS,EAAA,OAAA;AAAA,QACT,KAAO,EAAA,WAAA;AAAA,QACP,UAAA;AAAA,QACA,WAAW,MAAO,CAAA;AAAA,OACpB;AAAA,MACA,UAAY,EAAA;AAAA,QACV,QAAU,EAAA,QAAA;AAAA,QACV,IAAM,EAAA,GAAA;AAAA,QACN,OAAS,EAAA,OAAA;AAAA,QACT,KAAO,EAAA,WAAA;AAAA,QACP,UAAA;AAAA,QACA,WAAW,MAAO,CAAA;AAAA,OACpB;AAAA,MACA,KAAO,EAAA;AAAA,QACL,WAAW,eAAgB,CAAA,KAAA;AAAA,QAC3B,QAAU,EAAA,OAAA;AAAA,QACV,UAAU,CAAC,UAAA;AAAA,QACX,UAAA;AAAA,QACA,QAAA,EAAU,OAAQ,CAAA,CAAC,UAAe,KAAA;AAChC,UAAA,uBAEK,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,YAAW,UAAA,CAAA,QAAA;AAAA,4BACZ,GAAA;AAAA,cAAC,sBAAA;AAAA,cAAA;AAAA,gBACC,UAAA;AAAA,gBACA,wBAA0B,EAAA;AAAA;AAAA,aAC5B;AAAA,4BACA,GAAA;AAAA,cAAC,sBAAA;AAAA,cAAA;AAAA,gBACC,YAAA;AAAA,gBACA,UAAA;AAAA,gBACA;AAAA;AAAA;AACF,WACF,EAAA,CAAA;AAAA,SAEH;AAAA,OACH;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,WAAW,eAAgB,CAAA;AAAA,OAC7B;AAAA,MACA,UAAY,EAAA;AAAA,QACV,WAAW,eAAgB,CAAA,gBAAA;AAAA,QAC3B,QAAA,EAAU,QAAQ,MAAM;AACtB,UAAA,IAAI,yBAA2B,EAAA;AAC7B,YAAO,OAAA,yBAAA;AAAA;AACT,SACD;AAAA;AACH,KACF;AAEA,IACE,uBAAA,GAAA,CAAC,iBACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,cACC,EAAA,EAAA,QAAA,kBAAA,IAAA;AAAA,MAAC,IAAK,CAAA,SAAA;AAAA,MAAL;AAAA,QACE,GAAG,IAAA;AAAA,QACJ,IAAA,EAAM,qBAAqB,MAAS,GAAA,UAAA;AAAA,QACpC,KAAA;AAAA,QACA,QAAU,EAAA,4BAAA;AAAA,QACV,OAAS,EAAA,sBAAA;AAAA,QACT,SAAW,EAAA,IAAA,CAAK,SAAW,EAAA,eAAA,CAAgB,SAAS,CAAA;AAAA,QACpD,UAAA;AAAA,QACA,SAAA;AAAA,QACA,UAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,UAAA,EAAA,EAAW,IAAG,OAAQ,EAAA,CAAA;AAAA,0BACvB,IAAA;AAAA,YAAC,IAAK,CAAA,KAAA;AAAA,YAAL;AAAA,cACC,UAAA;AAAA,cACA,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,UAAU,CAAA;AAAA,cAEjC,QAAA,EAAA;AAAA,gCAAA,GAAA;AAAA,kBAAC,2BAAA;AAAA,kBAAA;AAAA,oBACC,cAAc,IAAK,CAAA,YAAA;AAAA,oBACnB,KAAA;AAAA,oBAEA,8BAAC,IAAK,CAAA,KAAA,EAAL,EAAW,SAAW,EAAA,MAAA,CAAO,OAAO,GAAU,EAAA;AAAA;AAAA,iBACjD;AAAA,qCACC,IAAK,CAAA,KAAA,EAAL,EAAW,SAAA,EAAW,OAAO,eAC5B,EAAA,QAAA,EAAA;AAAA,kCAAA,GAAA;AAAA,oBAAC,8BAAA;AAAA,oBAAA;AAAA,sBACC,WAAW,MAAO,CAAA,MAAA;AAAA,sBAClB,SAAW,EAAA,kBAAA;AAAA,sBACX,UAAA;AAAA,sBACA,OAAS,EAAA;AAAA;AAAA,mBACX;AAAA,kCACA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,QAAS,EAAA;AAAA,iBAC1B,EAAA,CAAA;AAAA,gCACA,GAAA;AAAA,kBAAC,mBAAA;AAAA,kBAAA;AAAA,oBACC,YAAA;AAAA,oBACA,SAAA;AAAA,oBACA;AAAA;AAAA;AACF;AAAA;AAAA,WACF;AAAA,0BACA,IAAA,CAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAC1B,EAAA,QAAA,EAAA;AAAA,YACC,2BAAA,oBAAA,GAAA,CAAC,oBAAkB,QAA0B,EAAA,yBAAA,EAAA,CAAA;AAAA,YAE9C,iCACC,sBAAuB,CAAA,OAAA,KAAY,eACjC,oBAAA,GAAA,CAAC,cAAY,QAA0B,EAAA,yBAAA,EAAA,CAAA;AAAA,4BAE3C,GAAA,CAAC,IAAK,EAAA,EAAA,EAAA,EAAI,6BACR,EAAA,QAAA,kBAAA,GAAA;AAAA,cAAC,iBAAkB,CAAA,QAAA;AAAA,cAAlB;AAAA,gBACC,KAAO,EAAA;AAAA,kBACL,SAAW,EAAA,KAAA;AAAA,kBACX,kBAAkB,EAAC;AAAA,kBACnB,iBAAmB,EAAA;AAAA,oBACjB,WAAa,EAAA,KAAA;AAAA,oBACb,KAAO,EAAA,IAAA;AAAA,oBACP,YAAc,EAAA,KAAA;AAAA,oBACd,YAAc,EAAA,KAAA;AAAA,oBACd,YAAc,EAAA,KAAA;AAAA,oBACd,QAAU,EAAA,KAAA;AAAA,oBACV,OAAS,EAAA,KAAA;AAAA,oBACT,cAAgB,EAAA,KAAA;AAAA,oBAChB,eAAiB,EAAA,KAAA;AAAA,oBACjB,QAAU,EAAA,KAAA;AAAA,oBACV,aAAe,EAAA;AAAA;AACjB,iBACF;AAAA,gBAEC;AAAA;AAAA,aAEL,EAAA;AAAA,WACF,EAAA;AAAA;AAAA;AAAA,OAEJ,CACF,EAAA,CAAA;AAAA;AAGN;;;;"}
|
|
1
|
+
{"version":3,"file":"PasswordCreationField.mjs","sources":["../../../../../../src/components/PasswordCreationField/PasswordCreationField.tsx"],"sourcesContent":["import React, {\n type PropsWithChildren,\n useState,\n type ClipboardEvent,\n useEffect,\n} from \"react\";\nimport {\n ClearPropsContext,\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"./PasswordCreationField.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport clsx from \"clsx\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport type { Policy } from \"@mittwald/password-tools-js/policy\";\nimport { type ActionFn } from \"@/components/Action\";\nimport getStateFromLatestPolicyValidationResult from \"@/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult\";\nimport locales from \"./locales/*.locale.json\";\nimport generateValidationTranslation from \"@/components/PasswordCreationField/lib/generateValidationTranslation\";\nimport { FieldError } from \"@/components/FieldError\";\nimport FieldDescription from \"@/components/FieldDescription\";\nimport ComplexityIndicator from \"@/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator\";\nimport { type PolicyValidationResult } from \"@mittwald/password-tools-js/policy\";\nimport { type RuleValidationResult } from \"@mittwald/password-tools-js/rules\";\nimport { useDebounceValue } from \"usehooks-ts\";\nimport { generatePassword } from \"@/components/PasswordCreationField/worker/generatePassword\";\nimport TogglePasswordVisibilityButton from \"@/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton\";\nimport { useAbortablePromise } from \"@/lib/promises/useAbortablePromise\";\nimport { defaultPasswordCreationPolicy } from \"@/components/PasswordCreationField/defaultPasswordCreationPolicy\";\nimport { FieldErrorContext } from \"react-aria-components\";\nimport { Wrap } from \"@/components/Wrap\";\nimport { ReactAriaControlledValueFix } from \"@/lib/react/ReactAriaControlledValueFix\";\nimport { useIsMounted } from \"@/lib/hooks\";\nimport { ValidationResultButton } from \"@/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton\";\nimport { PasswordGenerateButton } from \"@/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton\";\nimport { useLocalizedContextStringFormatter } from \"@/components/TranslationProvider/useLocalizedContextStringFormatter\";\n\nconst validationDebounceMilliseconds = 200;\n\nexport interface PasswordCreationFieldProps\n extends PropsWithChildren<\n Omit<Aria.TextFieldProps, \"children\" | \"value\" | \"defaultValue\"> &\n Partial<Pick<Aria.FieldErrorRenderProps, \"validationErrors\">>\n >,\n FlowComponentProps<HTMLInputElement> {\n value?: string;\n defaultValue?: string;\n placeholder?: string;\n validationPolicy?: Policy;\n}\n\nexport interface ResolvedPolicyValidationResult\n extends Omit<PolicyValidationResult, \"isValid\"> {\n isValid: boolean | \"indeterminate\";\n ruleResults: RuleValidationResult[];\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const PasswordCreationField = flowComponent(\n \"PasswordCreationField\",\n (props) => {\n const {\n children,\n className,\n ref,\n isDisabled,\n onChange,\n isInvalid: invalidFromProps,\n validationPolicy = defaultPasswordCreationPolicy,\n isRequired,\n value,\n ...rest\n } = props;\n\n const translate = useLocalizedContextStringFormatter(locales);\n\n const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n\n const initialPolicyValidationState: ResolvedPolicyValidationResult = {\n isValid: false,\n complexity: {\n min: validationPolicy.minComplexity,\n actual: 4,\n warning: null,\n },\n ruleResults: [],\n };\n\n const [policyValidationResult, setPolicyValidationResult] = useState(\n initialPolicyValidationState,\n );\n\n const stateFromValidationResult = getStateFromLatestPolicyValidationResult(\n policyValidationResult,\n );\n let latestValidationErrorText = undefined;\n if (stateFromValidationResult) {\n const [translationKey, translationValues] = generateValidationTranslation(\n stateFromValidationResult,\n );\n latestValidationErrorText = translate.format(\n translationKey,\n translationValues,\n );\n }\n\n const [bouncedValue, setDebouncedValue] = useDebounceValue(\n \"\",\n validationDebounceMilliseconds,\n );\n\n useEffect(() => {\n setDebouncedValue(value ?? \"\");\n }, [value]);\n\n const isMounted = useIsMounted();\n const isEmptyValue = !value;\n\n const isValidFromValidationResult =\n !isEmptyValue && stateFromValidationResult?.isValid;\n\n const isInvalidFromValidationResult =\n !isEmptyValue && !stateFromValidationResult?.isValid;\n\n const isInvalid = invalidFromProps || isInvalidFromValidationResult;\n\n const setOptimisticPolicyValidationResult = (\n isValid: ResolvedPolicyValidationResult[\"isValid\"] = true,\n ) => {\n setPolicyValidationResult({\n ...initialPolicyValidationState,\n isValid,\n });\n };\n\n useAbortablePromise(\n async (signal) => {\n if (signal.aborted) {\n return;\n }\n\n const validationResult = validationPolicy.validate(bouncedValue);\n if (typeof validationResult.isValid === \"boolean\") {\n setIsLoading(false);\n setPolicyValidationResult((old) => ({\n ...old,\n isValid: validationResult.isValid as boolean,\n ruleResults: validationResult.ruleResults as RuleValidationResult[],\n complexity: validationResult.complexity,\n }));\n\n if (onChange && isMounted) {\n onChange(bouncedValue);\n }\n return;\n }\n\n const nonPromiseValidationsInvalid = validationResult.ruleResults\n .filter((r): r is RuleValidationResult => !(r instanceof Promise))\n .some((r) => !r.isValid);\n\n if (!isEmptyValue) {\n setIsLoading(true);\n }\n if (!nonPromiseValidationsInvalid) {\n setOptimisticPolicyValidationResult();\n }\n\n void Promise.all([\n Promise.resolve(bouncedValue),\n ...validationResult.ruleResults,\n ]).then(([resolvedValue, ...validationResults]) => {\n if (signal.aborted) {\n return;\n }\n\n const isValid = !validationResults.some((r) => !r.isValid);\n\n setIsLoading(false);\n setPolicyValidationResult((old) => ({\n ...old,\n isValid,\n ruleResults: validationResults,\n }));\n\n if (onChange && isMounted) {\n onChange(resolvedValue);\n }\n });\n },\n [bouncedValue],\n );\n\n const onChangeValueHandler = (value: string) => {\n onChange?.(value);\n };\n\n const onPasswordGenerateHandler: ActionFn = async () => {\n const generatedPassword = await generatePassword(validationPolicy);\n setOptimisticPolicyValidationResult();\n setIsPasswordRevealed(true);\n onChangeValueHandler(generatedPassword);\n };\n\n const onPasswordPasteHandler = (event: ClipboardEvent) => {\n const pastedValue = event.clipboardData.getData(\"text\");\n if (pastedValue !== value) {\n setOptimisticPolicyValidationResult(\"indeterminate\");\n }\n };\n\n const togglePasswordVisibilityHandler = () => {\n setIsPasswordRevealed((old) => !old);\n };\n\n const propsContext: PropsContext = {\n Button: {\n tunnelId: \"button\",\n size: \"m\",\n variant: \"plain\",\n color: \"secondary\",\n isDisabled: isDisabled,\n className: styles.button,\n },\n CopyButton: {\n tunnelId: \"button\",\n size: \"m\",\n variant: \"plain\",\n color: \"secondary\",\n isDisabled: isDisabled,\n className: styles.button,\n },\n Label: {\n className: formFieldStyles.label,\n tunnelId: \"label\",\n optional: !isRequired,\n isDisabled: isDisabled,\n children: dynamic((localProps) => {\n return (\n <>\n {localProps.children}\n <PasswordGenerateButton\n isDisabled={isDisabled}\n onGeneratePasswordAction={onPasswordGenerateHandler}\n />\n <ValidationResultButton\n isEmptyValue={isEmptyValue}\n isDisabled={isDisabled}\n policyValidationResult={policyValidationResult}\n />\n </>\n );\n }),\n },\n FieldDescription: {\n className: formFieldStyles.fieldDescription,\n },\n FieldError: {\n className: formFieldStyles.customFieldError,\n children: dynamic(() => {\n if (latestValidationErrorText) {\n return latestValidationErrorText;\n }\n }),\n },\n };\n\n return (\n <ClearPropsContext>\n <TunnelProvider>\n <Aria.TextField\n {...rest}\n type={isPasswordRevealed ? \"text\" : \"password\"}\n value={value}\n onChange={onChangeValueHandler}\n onPaste={onPasswordPasteHandler}\n className={clsx(className, formFieldStyles.formField)}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isRequired={isRequired}\n >\n <TunnelExit id=\"label\" />\n <Aria.Group\n isDisabled={isDisabled}\n className={clsx(styles.inputGroup)}\n >\n <ReactAriaControlledValueFix\n inputContext={Aria.InputContext}\n props={props}\n >\n <Aria.Input className={styles.input} ref={ref} />\n </ReactAriaControlledValueFix>\n <Aria.Group className={styles.buttonContainer}>\n <TogglePasswordVisibilityButton\n className={styles.button}\n isVisible={isPasswordRevealed}\n isDisabled={isDisabled}\n onPress={togglePasswordVisibilityHandler}\n />\n <TunnelExit id=\"button\" />\n </Aria.Group>\n <ComplexityIndicator\n isEmptyValue={isEmptyValue}\n isLoading={isLoading}\n policyValidationResult={policyValidationResult}\n />\n </Aria.Group>\n <PropsContextProvider props={propsContext}>\n {isValidFromValidationResult && (\n <FieldDescription>{latestValidationErrorText}</FieldDescription>\n )}\n {isInvalidFromValidationResult &&\n policyValidationResult.isValid !== \"indeterminate\" && (\n <FieldError>{latestValidationErrorText}</FieldError>\n )}\n <Wrap if={isInvalidFromValidationResult}>\n <FieldErrorContext.Provider\n value={{\n isInvalid: false,\n validationErrors: [],\n validationDetails: {\n customError: false,\n valid: true,\n typeMismatch: false,\n stepMismatch: false,\n valueMissing: false,\n tooShort: false,\n tooLong: false,\n rangeUnderflow: false,\n patternMismatch: false,\n badInput: false,\n rangeOverflow: false,\n },\n }}\n >\n {children}\n </FieldErrorContext.Provider>\n </Wrap>\n </PropsContextProvider>\n </Aria.TextField>\n </TunnelProvider>\n </ClearPropsContext>\n );\n },\n);\n\nexport default PasswordCreationField;\n"],"names":["value"],"mappings":"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"}
|
|
@@ -8,4 +8,5 @@ export declare const WithCopyButton: Story;
|
|
|
8
8
|
export declare const WithInlineCode: Story;
|
|
9
9
|
export declare const WithLink: Story;
|
|
10
10
|
export declare const WithButton: Story;
|
|
11
|
+
export declare const WithContextualHelp: Story;
|
|
11
12
|
//# sourceMappingURL=Default.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/LabeledValue/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,YAAY,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/LabeledValue/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAe3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAYnC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAE3C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,cAAc,EAAE,KAQ5B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAQ5B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAqBhC,CAAC"}
|
|
@@ -4,8 +4,8 @@ import { Policy, PolicyValidationResult } from '@mittwald/password-tools-js/poli
|
|
|
4
4
|
import { RuleValidationResult } from '@mittwald/password-tools-js/rules';
|
|
5
5
|
import * as Aria from "react-aria-components";
|
|
6
6
|
export interface PasswordCreationFieldProps extends PropsWithChildren<Omit<Aria.TextFieldProps, "children" | "value" | "defaultValue"> & Partial<Pick<Aria.FieldErrorRenderProps, "validationErrors">>>, FlowComponentProps<HTMLInputElement> {
|
|
7
|
-
value?:
|
|
8
|
-
defaultValue?:
|
|
7
|
+
value?: string;
|
|
8
|
+
defaultValue?: string;
|
|
9
9
|
placeholder?: string;
|
|
10
10
|
validationPolicy?: Policy;
|
|
11
11
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PasswordCreationField.d.ts","sourceRoot":"","sources":["../../../../src/components/PasswordCreationField/PasswordCreationField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,KAAK,iBAAiB,
|
|
1
|
+
{"version":3,"file":"PasswordCreationField.d.ts","sourceRoot":"","sources":["../../../../src/components/PasswordCreationField/PasswordCreationField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,KAAK,iBAAiB,EAIvB,MAAM,OAAO,CAAC;AAOf,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAE9C,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAI9C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAQjE,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AACjF,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAgB9E,MAAM,WAAW,0BACf,SAAQ,iBAAiB,CACrB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,GAAG,cAAc,CAAC,GAC9D,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,kBAAkB,CAAC,CAAC,CAChE,EACD,kBAAkB,CAAC,gBAAgB,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,8BACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC;IAC/C,OAAO,EAAE,OAAO,GAAG,eAAe,CAAC;IACnC,WAAW,EAAE,oBAAoB,EAAE,CAAC;CACrC;AAED;;;GAGG;AACH,eAAO,MAAM,qBAAqB,6FA+RjC,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"generatePasswordCreationFieldValidation.d.ts","sourceRoot":"","sources":["../../../../../src/components/PasswordCreationField/lib/generatePasswordCreationFieldValidation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAIjE,eAAO,MAAM,uCAAuC,GACjD,mBAAkB,MAAsC,MAClD,OAAO,MAAM,qBAQnB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/PasswordCreationField/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/PasswordCreationField/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AA0DjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,qBAAqB,CAmB5C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAEpD,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAAsC,CAAC;AAE9D,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAE7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAW/B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA6BtB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAW5B,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.343",
|
|
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
|
"@chakra-ui/live-region": "^2.1.0",
|
|
59
59
|
"@internationalized/string-compiler": "^3.2.6",
|
|
60
60
|
"@mittwald/password-tools-js": "^2.1.6",
|
|
61
|
-
"@mittwald/react-tunnel": "0.2.0-alpha.
|
|
61
|
+
"@mittwald/react-tunnel": "0.2.0-alpha.343",
|
|
62
62
|
"@mittwald/react-use-promise": "^3.0.4",
|
|
63
63
|
"@react-aria/form": "^3.0.18",
|
|
64
64
|
"@react-aria/utils": "^3.29.1",
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
"@faker-js/faker": "^9.9.0",
|
|
100
100
|
"@internationalized/date": "^3.8.2",
|
|
101
101
|
"@mittwald/flow-core": "",
|
|
102
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
102
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.343",
|
|
103
103
|
"@mittwald/react-use-promise": "^3.0.4",
|
|
104
104
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.3",
|
|
105
105
|
"@mittwald/typescript-config": "",
|
|
@@ -181,5 +181,5 @@
|
|
|
181
181
|
"optional": true
|
|
182
182
|
}
|
|
183
183
|
},
|
|
184
|
-
"gitHead": "
|
|
184
|
+
"gitHead": "4c2c223cb205ff2328cba7fe4d7953de436ee79c"
|
|
185
185
|
}
|