@mittwald/flow-react-components 0.2.0-alpha.523 → 0.2.0-alpha.525
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 +291 -253
- package/dist/css/all.css +1 -1
- package/dist/js/components/src/components/Autocomplete/Autocomplete.mjs +48 -36
- package/dist/js/components/src/components/Autocomplete/Autocomplete.mjs.map +1 -1
- package/dist/js/components/src/components/Checkbox/Checkbox.mjs +25 -7
- package/dist/js/components/src/components/Checkbox/Checkbox.mjs.map +1 -1
- package/dist/js/components/src/components/Checkbox/Checkbox.module.scss.mjs +3 -1
- package/dist/js/components/src/components/Checkbox/Checkbox.module.scss.mjs.map +1 -1
- package/dist/js/components/src/components/CheckboxButton/CheckboxButton.mjs +28 -6
- package/dist/js/components/src/components/CheckboxButton/CheckboxButton.mjs.map +1 -1
- package/dist/js/components/src/components/CheckboxButton/CheckboxButton.module.scss.mjs +6 -4
- package/dist/js/components/src/components/CheckboxButton/CheckboxButton.module.scss.mjs.map +1 -1
- package/dist/js/components/src/components/CheckboxGroup/CheckboxGroup.mjs +22 -26
- package/dist/js/components/src/components/CheckboxGroup/CheckboxGroup.mjs.map +1 -1
- package/dist/js/components/src/components/ComboBox/ComboBox.mjs +31 -27
- package/dist/js/components/src/components/ComboBox/ComboBox.mjs.map +1 -1
- package/dist/js/components/src/components/DatePicker/DatePicker.mjs +8 -18
- package/dist/js/components/src/components/DatePicker/DatePicker.mjs.map +1 -1
- package/dist/js/components/src/components/DateRangePicker/DateRangePicker.mjs +7 -19
- package/dist/js/components/src/components/DateRangePicker/DateRangePicker.mjs.map +1 -1
- package/dist/js/components/src/components/FieldError/FieldError.mjs +36 -5
- package/dist/js/components/src/components/FieldError/FieldError.mjs.map +1 -1
- package/dist/js/components/src/components/FileDropZone/FileDropZone.mjs +22 -11
- package/dist/js/components/src/components/FileDropZone/FileDropZone.mjs.map +1 -1
- package/dist/js/components/src/components/FileField/FileField.mjs +33 -31
- package/dist/js/components/src/components/FileField/FileField.mjs.map +1 -1
- package/dist/js/components/src/components/FormField/FormField.module.scss.mjs +1 -3
- package/dist/js/components/src/components/FormField/FormField.module.scss.mjs.map +1 -1
- package/dist/js/components/src/components/NumberField/NumberField.mjs +9 -18
- package/dist/js/components/src/components/NumberField/NumberField.mjs.map +1 -1
- package/dist/js/components/src/components/PasswordCreationField/PasswordCreationField.mjs +85 -79
- package/dist/js/components/src/components/PasswordCreationField/PasswordCreationField.mjs.map +1 -1
- package/dist/js/components/src/components/PasswordCreationField/lib/generateValidationTranslation.mjs +1 -0
- package/dist/js/components/src/components/PasswordCreationField/lib/generateValidationTranslation.mjs.map +1 -1
- package/dist/js/components/src/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult.mjs +1 -0
- package/dist/js/components/src/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult.mjs.map +1 -1
- package/dist/js/components/src/components/PasswordCreationField/worker/generatePassword.mjs +1 -0
- package/dist/js/components/src/components/PasswordCreationField/worker/generatePassword.mjs.map +1 -1
- package/dist/js/components/src/components/RadioGroup/RadioGroup.mjs +36 -34
- package/dist/js/components/src/components/RadioGroup/RadioGroup.mjs.map +1 -1
- package/dist/js/components/src/components/SearchField/SearchField.mjs +12 -17
- package/dist/js/components/src/components/SearchField/SearchField.mjs.map +1 -1
- package/dist/js/components/src/components/SegmentedControl/SegmentedControl.mjs +25 -23
- package/dist/js/components/src/components/SegmentedControl/SegmentedControl.mjs.map +1 -1
- package/dist/js/components/src/components/Select/Select.mjs +30 -30
- package/dist/js/components/src/components/Select/Select.mjs.map +1 -1
- package/dist/js/components/src/components/Slider/Slider.mjs +10 -5
- package/dist/js/components/src/components/Slider/Slider.mjs.map +1 -1
- package/dist/js/components/src/components/Switch/Switch.mjs +22 -31
- package/dist/js/components/src/components/Switch/Switch.mjs.map +1 -1
- package/dist/js/components/src/components/Switch/Switch.module.scss.mjs +2 -4
- package/dist/js/components/src/components/Switch/Switch.module.scss.mjs.map +1 -1
- package/dist/js/components/src/components/TextArea/TextArea.mjs +16 -1
- package/dist/js/components/src/components/TextArea/TextArea.mjs.map +1 -1
- package/dist/js/components/src/components/TextField/TextField.mjs +14 -1
- package/dist/js/components/src/components/TextField/TextField.mjs.map +1 -1
- package/dist/js/components/src/components/TextFieldBase/TextFieldBase.mjs +13 -22
- package/dist/js/components/src/components/TextFieldBase/TextFieldBase.mjs.map +1 -1
- package/dist/js/components/src/components/TimeField/TimeField.mjs +8 -32
- package/dist/js/components/src/components/TimeField/TimeField.mjs.map +1 -1
- package/dist/js/components/src/integrations/@mittwald/password-tools-js/generatePasswordCreationFieldValidation.mjs +19 -13
- package/dist/js/components/src/integrations/@mittwald/password-tools-js/generatePasswordCreationFieldValidation.mjs.map +1 -1
- package/dist/js/components/src/integrations/react-hook-form/components/Field/Field.mjs +29 -14
- package/dist/js/components/src/integrations/react-hook-form/components/Field/Field.mjs.map +1 -1
- package/dist/js/components/src/lib/hooks/useFieldComponent.mjs +36 -0
- package/dist/js/components/src/lib/hooks/useFieldComponent.mjs.map +1 -0
- package/dist/js/components/src/lib/hooks/useFieldError.mjs +43 -0
- package/dist/js/components/src/lib/hooks/useFieldError.mjs.map +1 -0
- package/dist/js/components/src/lib/hooks/useManagedValue.mjs +7 -3
- package/dist/js/components/src/lib/hooks/useManagedValue.mjs.map +1 -1
- package/dist/types/components/Autocomplete/Autocomplete.d.ts +1 -0
- package/dist/types/components/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/dist/types/components/Checkbox/Checkbox.d.ts +3 -2
- package/dist/types/components/Checkbox/Checkbox.d.ts.map +1 -1
- package/dist/types/components/CheckboxButton/CheckboxButton.d.ts +2 -2
- package/dist/types/components/CheckboxButton/CheckboxButton.d.ts.map +1 -1
- package/dist/types/components/CheckboxGroup/CheckboxGroup.d.ts.map +1 -1
- package/dist/types/components/ComboBox/ComboBox.d.ts.map +1 -1
- package/dist/types/components/ComboBox/stories/Default.stories.d.ts.map +1 -1
- package/dist/types/components/DatePicker/DatePicker.d.ts +1 -3
- package/dist/types/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/dist/types/components/DatePicker/stories/Default.stories.d.ts.map +1 -1
- package/dist/types/components/DateRangePicker/DateRangePicker.d.ts +1 -3
- package/dist/types/components/DateRangePicker/DateRangePicker.d.ts.map +1 -1
- package/dist/types/components/DateRangePicker/stories/Default.stories.d.ts.map +1 -1
- package/dist/types/components/FieldError/FieldError.d.ts +2 -2
- package/dist/types/components/FieldError/FieldError.d.ts.map +1 -1
- package/dist/types/components/FileDropZone/FileDropZone.d.ts.map +1 -1
- package/dist/types/components/FileDropZone/stories/Default.stories.d.ts.map +1 -1
- package/dist/types/components/FileField/FileField.d.ts.map +1 -1
- package/dist/types/components/NumberField/NumberField.d.ts +2 -2
- package/dist/types/components/NumberField/NumberField.d.ts.map +1 -1
- package/dist/types/components/PasswordCreationField/PasswordCreationField.d.ts.map +1 -1
- package/dist/types/components/RadioGroup/RadioGroup.d.ts.map +1 -1
- package/dist/types/components/SearchField/SearchField.d.ts.map +1 -1
- package/dist/types/components/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/dist/types/components/Select/Select.d.ts.map +1 -1
- package/dist/types/components/Slider/Slider.d.ts +1 -0
- package/dist/types/components/Slider/Slider.d.ts.map +1 -1
- package/dist/types/components/Switch/Switch.d.ts.map +1 -1
- package/dist/types/components/TextArea/TextArea.d.ts +1 -1
- package/dist/types/components/TextArea/TextArea.d.ts.map +1 -1
- package/dist/types/components/TextField/TextField.d.ts +1 -1
- package/dist/types/components/TextField/TextField.d.ts.map +1 -1
- package/dist/types/components/TextFieldBase/TextFieldBase.d.ts +2 -1
- package/dist/types/components/TextFieldBase/TextFieldBase.d.ts.map +1 -1
- package/dist/types/components/TimeField/TimeField.d.ts +2 -4
- package/dist/types/components/TimeField/TimeField.d.ts.map +1 -1
- package/dist/types/integrations/@mittwald/password-tools-js/generatePasswordCreationFieldValidation.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/Field.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/Autocomplete.stories.d.ts +2 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/Autocomplete.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/Checkbox.stories.d.ts +2 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/Checkbox.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/CheckboxButton.stories.d.ts +9 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/CheckboxButton.stories.d.ts.map +1 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/CheckboxGroup.stories.d.ts +2 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/CheckboxGroup.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/ComboBox.stories.d.ts +2 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/ComboBox.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/DatePicker.stories.d.ts +2 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/DatePicker.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/DateRangePicker.stories.d.ts +2 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/DateRangePicker.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/FileField.stories.d.ts +2 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/FileField.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/MarkdownEditor.stories.d.ts +2 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/MarkdownEditor.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/NumberField.stories.d.ts +2 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/NumberField.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/PasswordCreationField.stories.d.ts +2 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/PasswordCreationField.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/RadioGroup.stories.d.ts +2 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/RadioGroup.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/SearchField.stories.d.ts +2 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/SearchField.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/SegmentedControl.stories.d.ts +2 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/SegmentedControl.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/Select.stories.d.ts +2 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/Select.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/Slider.stories.d.ts +2 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/Slider.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/Switch.stories.d.ts +2 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/Switch.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/TextArea.stories.d.ts +2 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/TextArea.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/TextField.stories.d.ts +2 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/TextField.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/TimeField.stories.d.ts +2 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/TimeField.stories.d.ts.map +1 -1
- package/dist/types/lib/hooks/useFieldComponent.d.ts +19 -0
- package/dist/types/lib/hooks/useFieldComponent.d.ts.map +1 -0
- package/dist/types/lib/hooks/useFieldError.d.ts +10 -0
- package/dist/types/lib/hooks/useFieldError.d.ts.map +1 -0
- package/dist/types/lib/hooks/useManagedValue.d.ts +9 -7
- package/dist/types/lib/hooks/useManagedValue.d.ts.map +1 -1
- package/package.json +4 -4
- package/dist/js/components/src/views/FieldErrorView.mjs +0 -15
- package/dist/js/components/src/views/FieldErrorView.mjs.map +0 -1
|
@@ -9,14 +9,12 @@ import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
|
9
9
|
import styles from './PasswordCreationField.module.scss.mjs';
|
|
10
10
|
import * as Aria from 'react-aria-components';
|
|
11
11
|
import { FieldErrorContext } from 'react-aria-components';
|
|
12
|
-
import formFieldStyles from '../FormField/FormField.module.scss.mjs';
|
|
13
12
|
import clsx from 'clsx';
|
|
14
13
|
import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
|
|
15
14
|
import '../Action/Action.mjs';
|
|
16
15
|
import { getStateFromLatestPolicyValidationResult } from './lib/getStateFromLatestPolicyValidationResult.mjs';
|
|
17
16
|
import locales from '../../../../_virtual/_.locale.json@95341064edeb0e38b66d786dbd62955c.mjs';
|
|
18
17
|
import { generateValidationTranslation } from './lib/generateValidationTranslation.mjs';
|
|
19
|
-
import { FieldError } from '../FieldError/FieldError.mjs';
|
|
20
18
|
import { FieldDescription } from '../FieldDescription/FieldDescription.mjs';
|
|
21
19
|
import { ComplexityIndicator } from './components/ComplexityIndicator/ComplexityIndicator.mjs';
|
|
22
20
|
import { generatePassword } from './worker/generatePassword.mjs';
|
|
@@ -33,6 +31,7 @@ import '@mittwald/password-tools-js/rules';
|
|
|
33
31
|
import '@mittwald/password-tools-js/generator';
|
|
34
32
|
import { usePolicyValidationResult } from './lib/usePolicyValidationResult.mjs';
|
|
35
33
|
import { useManagedValue } from '../../lib/hooks/useManagedValue.mjs';
|
|
34
|
+
import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
|
|
36
35
|
|
|
37
36
|
const PasswordCreationField = flowComponent(
|
|
38
37
|
"PasswordCreationField",
|
|
@@ -48,6 +47,12 @@ const PasswordCreationField = flowComponent(
|
|
|
48
47
|
isRequired,
|
|
49
48
|
...rest
|
|
50
49
|
} = props;
|
|
50
|
+
const {
|
|
51
|
+
FieldErrorView,
|
|
52
|
+
FieldErrorResetContext,
|
|
53
|
+
fieldProps,
|
|
54
|
+
fieldPropsContext
|
|
55
|
+
} = useFieldComponent(props);
|
|
51
56
|
const [isLoading, setIsLoading] = useState(false);
|
|
52
57
|
const translate = useLocalizedContextStringFormatter(locales);
|
|
53
58
|
const validationPolicy = useMemo(
|
|
@@ -135,6 +140,7 @@ const PasswordCreationField = flowComponent(
|
|
|
135
140
|
setIsPasswordRevealed((old) => !old);
|
|
136
141
|
};
|
|
137
142
|
const propsContext = {
|
|
143
|
+
...fieldPropsContext,
|
|
138
144
|
Button: {
|
|
139
145
|
tunnelId: "button",
|
|
140
146
|
size: "m",
|
|
@@ -153,10 +159,8 @@ const PasswordCreationField = flowComponent(
|
|
|
153
159
|
text: value
|
|
154
160
|
},
|
|
155
161
|
Label: {
|
|
156
|
-
|
|
162
|
+
...fieldPropsContext.Label,
|
|
157
163
|
tunnelId: "label",
|
|
158
|
-
optional: !isRequired,
|
|
159
|
-
isDisabled,
|
|
160
164
|
children: dynamic((localProps) => {
|
|
161
165
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
162
166
|
localProps.children,
|
|
@@ -177,87 +181,89 @@ const PasswordCreationField = flowComponent(
|
|
|
177
181
|
)
|
|
178
182
|
] });
|
|
179
183
|
})
|
|
180
|
-
},
|
|
181
|
-
FieldDescription: {
|
|
182
|
-
className: formFieldStyles.fieldDescription
|
|
183
|
-
},
|
|
184
|
-
FieldError: {
|
|
185
|
-
className: formFieldStyles.customFieldError,
|
|
186
|
-
children: dynamic(() => {
|
|
187
|
-
if (latestValidationErrorText) {
|
|
188
|
-
return latestValidationErrorText;
|
|
189
|
-
}
|
|
190
|
-
})
|
|
191
184
|
}
|
|
192
185
|
};
|
|
193
186
|
return /* @__PURE__ */ jsx(
|
|
194
|
-
|
|
187
|
+
Aria.TextField,
|
|
195
188
|
{
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
}
|
|
225
|
-
),
|
|
226
|
-
/* @__PURE__ */ jsxs(Aria.Group, { className: styles.buttonContainer, children: [
|
|
189
|
+
...rest,
|
|
190
|
+
value,
|
|
191
|
+
type: isPasswordRevealed ? "text" : "password",
|
|
192
|
+
onChange: handleOnChange,
|
|
193
|
+
onPaste: onPasswordPasteHandler,
|
|
194
|
+
className: clsx(className, fieldProps.className),
|
|
195
|
+
isDisabled,
|
|
196
|
+
isInvalid,
|
|
197
|
+
isRequired,
|
|
198
|
+
children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
|
|
199
|
+
/* @__PURE__ */ jsx(FieldErrorResetContext, { children: /* @__PURE__ */ jsxs(
|
|
200
|
+
PropsContextProvider,
|
|
201
|
+
{
|
|
202
|
+
props: propsContext,
|
|
203
|
+
dependencies: [
|
|
204
|
+
isDisabled,
|
|
205
|
+
isRequired,
|
|
206
|
+
value,
|
|
207
|
+
policyValidationResult
|
|
208
|
+
],
|
|
209
|
+
children: [
|
|
210
|
+
/* @__PURE__ */ jsx(TunnelExit, { id: "label" }),
|
|
211
|
+
/* @__PURE__ */ jsxs(
|
|
212
|
+
Aria.Group,
|
|
213
|
+
{
|
|
214
|
+
isDisabled,
|
|
215
|
+
className: clsx(styles.inputGroup),
|
|
216
|
+
children: [
|
|
227
217
|
/* @__PURE__ */ jsx(
|
|
228
|
-
|
|
218
|
+
ReactAriaControlledValueFix,
|
|
229
219
|
{
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
onPress: togglePasswordVisibilityHandler
|
|
220
|
+
inputContext: Aria.InputContext,
|
|
221
|
+
props: { ...props, value },
|
|
222
|
+
children: /* @__PURE__ */ jsx(Aria.Input, { ref, className: styles.input })
|
|
234
223
|
}
|
|
235
224
|
),
|
|
236
|
-
/* @__PURE__ */
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
225
|
+
/* @__PURE__ */ jsxs(Aria.Group, { className: styles.buttonContainer, children: [
|
|
226
|
+
/* @__PURE__ */ jsx(
|
|
227
|
+
TogglePasswordVisibilityButton,
|
|
228
|
+
{
|
|
229
|
+
className: styles.button,
|
|
230
|
+
isVisible: isPasswordRevealed,
|
|
231
|
+
isDisabled,
|
|
232
|
+
onPress: togglePasswordVisibilityHandler
|
|
233
|
+
}
|
|
234
|
+
),
|
|
235
|
+
/* @__PURE__ */ jsx(TunnelExit, { id: "button" })
|
|
236
|
+
] }),
|
|
237
|
+
/* @__PURE__ */ jsx(
|
|
238
|
+
ComplexityIndicator,
|
|
239
|
+
{
|
|
240
|
+
isEmptyValue,
|
|
241
|
+
isLoading,
|
|
242
|
+
policyValidationResult,
|
|
243
|
+
validationResultState: stateFromValidationResult
|
|
244
|
+
}
|
|
245
|
+
)
|
|
246
|
+
]
|
|
247
|
+
}
|
|
248
|
+
),
|
|
249
|
+
children,
|
|
250
|
+
isValidFromValidationResult && /* @__PURE__ */ jsx(FieldDescription, { children: latestValidationErrorText })
|
|
251
|
+
]
|
|
252
|
+
}
|
|
253
|
+
) }),
|
|
254
|
+
/* @__PURE__ */ jsx(
|
|
255
|
+
Wrap,
|
|
256
|
+
{
|
|
257
|
+
if: isInvalidFromValidationResult && policyValidationResult.isValid !== "indeterminate" && latestValidationErrorText,
|
|
258
|
+
children: /* @__PURE__ */ jsx(
|
|
253
259
|
FieldErrorContext.Provider,
|
|
254
260
|
{
|
|
255
261
|
value: {
|
|
256
|
-
isInvalid:
|
|
257
|
-
validationErrors: [],
|
|
262
|
+
isInvalid: true,
|
|
263
|
+
validationErrors: [latestValidationErrorText ?? ""],
|
|
258
264
|
validationDetails: {
|
|
259
|
-
customError:
|
|
260
|
-
valid:
|
|
265
|
+
customError: true,
|
|
266
|
+
valid: false,
|
|
261
267
|
typeMismatch: false,
|
|
262
268
|
stepMismatch: false,
|
|
263
269
|
valueMissing: false,
|
|
@@ -269,12 +275,12 @@ const PasswordCreationField = flowComponent(
|
|
|
269
275
|
rangeOverflow: false
|
|
270
276
|
}
|
|
271
277
|
},
|
|
272
|
-
children
|
|
278
|
+
children: /* @__PURE__ */ jsx(FieldErrorView, {})
|
|
273
279
|
}
|
|
274
|
-
)
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
280
|
+
)
|
|
281
|
+
}
|
|
282
|
+
)
|
|
283
|
+
] })
|
|
278
284
|
}
|
|
279
285
|
);
|
|
280
286
|
}
|
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 {\n type PropsWithChildren,\n useState,\n type ClipboardEvent,\n useDeferredValue,\n useMemo,\n} from \"react\";\nimport {\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 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 { generatePassword } from \"@/components/PasswordCreationField/worker/generatePassword\";\nimport TogglePasswordVisibilityButton from \"@/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton\";\nimport { FieldErrorContext } from \"react-aria-components\";\nimport { Wrap } from \"@/components/Wrap\";\nimport { ReactAriaControlledValueFix } from \"@/lib/react/ReactAriaControlledValueFix\";\nimport { ValidationResultButton } from \"@/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton\";\nimport { PasswordGenerateButton } from \"@/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton\";\nimport { useLocalizedContextStringFormatter } from \"@/components/TranslationProvider/useLocalizedContextStringFormatter\";\nimport type {\n PolicyValidationResult,\n PolicyGenericDeclaration,\n RuleValidationResult,\n} from \"@/integrations/@mittwald/password-tools-js\";\nimport {\n defaultPasswordCreationPolicy,\n Policy,\n} from \"@/integrations/@mittwald/password-tools-js\";\nimport { usePolicyValidationResult } from \"@/components/PasswordCreationField/lib/usePolicyValidationResult\";\nimport { useManagedValue } from \"@/lib/hooks/useManagedValue\";\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 onValidationResult?: (result: { password: string; isValid: boolean }) => void;\n defaultValue?: string;\n placeholder?: string;\n validationPolicy?: PolicyGenericDeclaration;\n}\n\nexport interface ResolvedPolicyValidationResult\n extends Omit<PolicyValidationResult, \"isValid\"> {\n isValid: boolean | \"indeterminate\";\n ruleResults: RuleValidationResult[];\n}\n\n/** @flr-generate all */\nexport const PasswordCreationField = flowComponent(\n \"PasswordCreationField\",\n (props) => {\n const {\n children,\n className,\n ref,\n isDisabled,\n onValidationResult,\n isInvalid: invalidFromProps,\n validationPolicy:\n validationPolicyFromProps = defaultPasswordCreationPolicy,\n isRequired,\n ...rest\n } = props;\n\n const [isLoading, setIsLoading] = useState(false);\n const translate = useLocalizedContextStringFormatter(locales);\n const validationPolicy = useMemo(\n () => Policy.fromDeclaration(validationPolicyFromProps),\n [validationPolicyFromProps],\n );\n\n const { value, handleOnChange } = useManagedValue(props);\n const deferredValue = useDeferredValue(value);\n\n const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n const initialPolicyValidationState: ResolvedPolicyValidationResult = {\n isValid: true,\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 usePolicyValidationResult(\n validationPolicy,\n deferredValue,\n () => {\n if (isEmptyValue) {\n return;\n }\n\n setIsLoading(() => true);\n },\n ({ password, isValid, results }) => {\n if (isEmptyValue) {\n setPolicyValidationResult(() => ({\n ...results,\n isValid: true,\n }));\n return;\n }\n\n setIsLoading(() => false);\n setPolicyValidationResult(() => results);\n onValidationResult?.({ password, isValid });\n },\n );\n\n const isEmptyValue = !value;\n const stateFromValidationResult = getStateFromLatestPolicyValidationResult(\n isEmptyValue,\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 isValidFromValidationResult =\n !isEmptyValue && stateFromValidationResult?.isValid;\n const isInvalidFromValidationResult =\n !isEmptyValue && !stateFromValidationResult?.isValid;\n const isInvalid = invalidFromProps || isInvalidFromValidationResult;\n\n const setOptimisticPolicyValidationResult = (\n state: Partial<ResolvedPolicyValidationResult> = {},\n ) => {\n setIsLoading(() => false);\n setPolicyValidationResult(() => ({\n ...initialPolicyValidationState,\n ...state,\n isValid: true,\n }));\n };\n\n const onPasswordGenerateHandler: ActionFn = async () => {\n const generatedPassword = await generatePassword(validationPolicy);\n setOptimisticPolicyValidationResult();\n setIsPasswordRevealed(true);\n handleOnChange(generatedPassword);\n };\n\n const onPasswordPasteHandler = (event: ClipboardEvent) => {\n const pastedValue = event.clipboardData.getData(\"text\");\n if (pastedValue !== value) {\n setOptimisticPolicyValidationResult({\n isValid: \"indeterminate\",\n });\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 text: value,\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 <PropsContextProvider\n props={propsContext}\n dependencies={[isDisabled, isRequired, value, policyValidationResult]}\n >\n <TunnelProvider>\n <Aria.TextField\n {...rest}\n value={value}\n type={isPasswordRevealed ? \"text\" : \"password\"}\n onChange={handleOnChange}\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, value }}\n >\n <Aria.Input ref={ref} className={styles.input} />\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 validationResultState={stateFromValidationResult}\n />\n </Aria.Group>\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 </Aria.TextField>\n </TunnelProvider>\n </PropsContextProvider>\n );\n },\n);\n\nexport default PasswordCreationField;\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PasswordCreationField.mjs","sources":["../../../../../../src/components/PasswordCreationField/PasswordCreationField.tsx"],"sourcesContent":["import {\n type PropsWithChildren,\n useState,\n type ClipboardEvent,\n useDeferredValue,\n useMemo,\n} from \"react\";\nimport {\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 clsx from \"clsx\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\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 FieldDescription from \"@/components/FieldDescription\";\nimport ComplexityIndicator from \"@/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator\";\nimport { generatePassword } from \"@/components/PasswordCreationField/worker/generatePassword\";\nimport TogglePasswordVisibilityButton from \"@/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton\";\nimport { FieldErrorContext } from \"react-aria-components\";\nimport { Wrap } from \"@/components/Wrap\";\nimport { ReactAriaControlledValueFix } from \"@/lib/react/ReactAriaControlledValueFix\";\nimport { ValidationResultButton } from \"@/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton\";\nimport { PasswordGenerateButton } from \"@/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton\";\nimport { useLocalizedContextStringFormatter } from \"@/components/TranslationProvider/useLocalizedContextStringFormatter\";\nimport type {\n PolicyValidationResult,\n PolicyGenericDeclaration,\n RuleValidationResult,\n} from \"@/integrations/@mittwald/password-tools-js\";\nimport {\n defaultPasswordCreationPolicy,\n Policy,\n} from \"@/integrations/@mittwald/password-tools-js\";\nimport { usePolicyValidationResult } from \"@/components/PasswordCreationField/lib/usePolicyValidationResult\";\nimport { useManagedValue } from \"@/lib/hooks/useManagedValue\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\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 onValidationResult?: (result: { password: string; isValid: boolean }) => void;\n defaultValue?: string;\n placeholder?: string;\n validationPolicy?: PolicyGenericDeclaration;\n}\n\nexport interface ResolvedPolicyValidationResult\n extends Omit<PolicyValidationResult, \"isValid\"> {\n isValid: boolean | \"indeterminate\";\n ruleResults: RuleValidationResult[];\n}\n\n/** @flr-generate all */\nexport const PasswordCreationField = flowComponent(\n \"PasswordCreationField\",\n (props) => {\n const {\n children,\n className,\n ref,\n isDisabled,\n onValidationResult,\n isInvalid: invalidFromProps,\n validationPolicy:\n validationPolicyFromProps = defaultPasswordCreationPolicy,\n isRequired,\n ...rest\n } = props;\n\n const {\n FieldErrorView,\n FieldErrorResetContext,\n fieldProps,\n fieldPropsContext,\n } = useFieldComponent(props);\n\n const [isLoading, setIsLoading] = useState(false);\n const translate = useLocalizedContextStringFormatter(locales);\n\n const validationPolicy = useMemo(\n () => Policy.fromDeclaration(validationPolicyFromProps),\n [validationPolicyFromProps],\n );\n\n const { value, handleOnChange } = useManagedValue(props);\n const deferredValue = useDeferredValue(value);\n\n const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n const initialPolicyValidationState: ResolvedPolicyValidationResult = {\n isValid: true,\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 usePolicyValidationResult(\n validationPolicy,\n deferredValue,\n () => {\n if (isEmptyValue) {\n return;\n }\n\n setIsLoading(() => true);\n },\n ({ password, isValid, results }) => {\n if (isEmptyValue) {\n setPolicyValidationResult(() => ({\n ...results,\n isValid: true,\n }));\n return;\n }\n\n setIsLoading(() => false);\n setPolicyValidationResult(() => results);\n onValidationResult?.({ password, isValid });\n },\n );\n\n const isEmptyValue = !value;\n const stateFromValidationResult = getStateFromLatestPolicyValidationResult(\n isEmptyValue,\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 isValidFromValidationResult =\n !isEmptyValue && stateFromValidationResult?.isValid;\n const isInvalidFromValidationResult =\n !isEmptyValue && !stateFromValidationResult?.isValid;\n const isInvalid = invalidFromProps || isInvalidFromValidationResult;\n\n const setOptimisticPolicyValidationResult = (\n state: Partial<ResolvedPolicyValidationResult> = {},\n ) => {\n setIsLoading(() => false);\n setPolicyValidationResult(() => ({\n ...initialPolicyValidationState,\n ...state,\n isValid: true,\n }));\n };\n\n const onPasswordGenerateHandler: ActionFn = async () => {\n const generatedPassword = await generatePassword(validationPolicy);\n setOptimisticPolicyValidationResult();\n setIsPasswordRevealed(true);\n handleOnChange(generatedPassword);\n };\n\n const onPasswordPasteHandler = (event: ClipboardEvent) => {\n const pastedValue = event.clipboardData.getData(\"text\");\n if (pastedValue !== value) {\n setOptimisticPolicyValidationResult({\n isValid: \"indeterminate\",\n });\n }\n };\n\n const togglePasswordVisibilityHandler = () => {\n setIsPasswordRevealed((old) => !old);\n };\n\n const propsContext: PropsContext = {\n ...fieldPropsContext,\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 text: value,\n },\n Label: {\n ...fieldPropsContext.Label,\n tunnelId: \"label\",\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 };\n\n return (\n <Aria.TextField\n {...rest}\n value={value}\n type={isPasswordRevealed ? \"text\" : \"password\"}\n onChange={handleOnChange}\n onPaste={onPasswordPasteHandler}\n className={clsx(className, fieldProps.className)}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isRequired={isRequired}\n >\n <TunnelProvider>\n <FieldErrorResetContext>\n <PropsContextProvider\n props={propsContext}\n dependencies={[\n isDisabled,\n isRequired,\n value,\n policyValidationResult,\n ]}\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, value }}\n >\n <Aria.Input ref={ref} className={styles.input} />\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 validationResultState={stateFromValidationResult}\n />\n </Aria.Group>\n {children}\n {isValidFromValidationResult && (\n <FieldDescription>{latestValidationErrorText}</FieldDescription>\n )}\n </PropsContextProvider>\n </FieldErrorResetContext>\n <Wrap\n if={\n isInvalidFromValidationResult &&\n policyValidationResult.isValid !== \"indeterminate\" &&\n latestValidationErrorText\n }\n >\n <FieldErrorContext.Provider\n value={{\n isInvalid: true,\n validationErrors: [latestValidationErrorText ?? \"\"],\n validationDetails: {\n customError: true,\n valid: false,\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 <FieldErrorView />\n </FieldErrorContext.Provider>\n </Wrap>\n </TunnelProvider>\n </Aria.TextField>\n );\n },\n);\n\nexport default PasswordCreationField;\n"],"names":[],"mappings":"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"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import '../../../integrations/@mittwald/password-tools-js/defaultPasswordCreationPolicy.mjs';
|
|
4
4
|
import '@mittwald/password-tools-js/policy';
|
|
5
5
|
import 'remeda';
|
|
6
|
+
import 'react';
|
|
6
7
|
import { RuleType } from '@mittwald/password-tools-js/rules';
|
|
7
8
|
import '@mittwald/password-tools-js/generator';
|
|
8
9
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generateValidationTranslation.mjs","sources":["../../../../../../../src/components/PasswordCreationField/lib/generateValidationTranslation.ts"],"sourcesContent":["import {\n RuleType,\n type RuleValidationResult,\n} from \"@/integrations/@mittwald/password-tools-js\";\n\nconst generateTranslationString = (\n rule: Partial<RuleValidationResult> & { translationKey?: string },\n shortVersion = false,\n): string => {\n if (rule.translationKey) {\n return `validation.${rule.translationKey}`;\n }\n const translateString = `validation.${rule.ruleType ?? \"general\"}`;\n let finalTranslationString = \"\";\n\n if (\n (\"min\" in rule && rule.min !== undefined) ||\n (\"max\" in rule && rule.max !== undefined)\n ) {\n const breakingBoundaryProperty = rule.failingBoundary\n ? rule.failingBoundary\n : rule.min\n ? \"min\"\n : \"max\";\n\n if (rule.identifier) {\n finalTranslationString = `${translateString}.${rule.identifier}.${breakingBoundaryProperty}`;\n } else {\n finalTranslationString = `${translateString}.${breakingBoundaryProperty}`;\n }\n } else if (rule.identifier) {\n finalTranslationString = `${translateString}.${rule.identifier}`;\n } else {\n finalTranslationString = translateString;\n }\n\n return shortVersion\n ? `${finalTranslationString}.short`\n : finalTranslationString;\n};\n\nexport const generateValidationTranslation = (\n r: Partial<RuleValidationResult>,\n shotVersion = false,\n): [string, Record<string, string | number | boolean> | undefined] => {\n const translationKey = generateTranslationString(r, shotVersion);\n\n if (r.ruleType === RuleType.char && r.chars) {\n return [\n translationKey,\n { ...r, chars: r.chars.map((c) => c.char).join(\"\") },\n ];\n }\n\n return [\n translationKey,\n r as unknown as Record<string, string | number | boolean> | undefined,\n ];\n};\n\nexport default generateValidationTranslation;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"generateValidationTranslation.mjs","sources":["../../../../../../../src/components/PasswordCreationField/lib/generateValidationTranslation.ts"],"sourcesContent":["import {\n RuleType,\n type RuleValidationResult,\n} from \"@/integrations/@mittwald/password-tools-js\";\n\nconst generateTranslationString = (\n rule: Partial<RuleValidationResult> & { translationKey?: string },\n shortVersion = false,\n): string => {\n if (rule.translationKey) {\n return `validation.${rule.translationKey}`;\n }\n const translateString = `validation.${rule.ruleType ?? \"general\"}`;\n let finalTranslationString = \"\";\n\n if (\n (\"min\" in rule && rule.min !== undefined) ||\n (\"max\" in rule && rule.max !== undefined)\n ) {\n const breakingBoundaryProperty = rule.failingBoundary\n ? rule.failingBoundary\n : rule.min\n ? \"min\"\n : \"max\";\n\n if (rule.identifier) {\n finalTranslationString = `${translateString}.${rule.identifier}.${breakingBoundaryProperty}`;\n } else {\n finalTranslationString = `${translateString}.${breakingBoundaryProperty}`;\n }\n } else if (rule.identifier) {\n finalTranslationString = `${translateString}.${rule.identifier}`;\n } else {\n finalTranslationString = translateString;\n }\n\n return shortVersion\n ? `${finalTranslationString}.short`\n : finalTranslationString;\n};\n\nexport const generateValidationTranslation = (\n r: Partial<RuleValidationResult>,\n shotVersion = false,\n): [string, Record<string, string | number | boolean> | undefined] => {\n const translationKey = generateTranslationString(r, shotVersion);\n\n if (r.ruleType === RuleType.char && r.chars) {\n return [\n translationKey,\n { ...r, chars: r.chars.map((c) => c.char).join(\"\") },\n ];\n }\n\n return [\n translationKey,\n r as unknown as Record<string, string | number | boolean> | undefined,\n ];\n};\n\nexport default generateValidationTranslation;\n"],"names":[],"mappings":";;;;;;;AAKA,MAAM,yBAAA,GAA4B,CAChC,IAAA,EACA,YAAA,GAAe,KAAA,KACJ;AACX,EAAA,IAAI,KAAK,cAAA,EAAgB;AACvB,IAAA,OAAO,CAAA,WAAA,EAAc,KAAK,cAAc,CAAA,CAAA;AAAA,EAC1C;AACA,EAAA,MAAM,eAAA,GAAkB,CAAA,WAAA,EAAc,IAAA,CAAK,QAAA,IAAY,SAAS,CAAA,CAAA;AAChE,EAAA,IAAI,sBAAA,GAAyB,EAAA;AAE7B,EAAA,IACG,KAAA,IAAS,QAAQ,IAAA,CAAK,GAAA,KAAQ,UAC9B,KAAA,IAAS,IAAA,IAAQ,IAAA,CAAK,GAAA,KAAQ,MAAA,EAC/B;AACA,IAAA,MAAM,2BAA2B,IAAA,CAAK,eAAA,GAClC,KAAK,eAAA,GACL,IAAA,CAAK,MACH,KAAA,GACA,KAAA;AAEN,IAAA,IAAI,KAAK,UAAA,EAAY;AACnB,MAAA,sBAAA,GAAyB,GAAG,eAAe,CAAA,CAAA,EAAI,IAAA,CAAK,UAAU,IAAI,wBAAwB,CAAA,CAAA;AAAA,IAC5F,CAAA,MAAO;AACL,MAAA,sBAAA,GAAyB,CAAA,EAAG,eAAe,CAAA,CAAA,EAAI,wBAAwB,CAAA,CAAA;AAAA,IACzE;AAAA,EACF,CAAA,MAAA,IAAW,KAAK,UAAA,EAAY;AAC1B,IAAA,sBAAA,GAAyB,CAAA,EAAG,eAAe,CAAA,CAAA,EAAI,IAAA,CAAK,UAAU,CAAA,CAAA;AAAA,EAChE,CAAA,MAAO;AACL,IAAA,sBAAA,GAAyB,eAAA;AAAA,EAC3B;AAEA,EAAA,OAAO,YAAA,GACH,CAAA,EAAG,sBAAsB,CAAA,MAAA,CAAA,GACzB,sBAAA;AACN,CAAA;AAEO,MAAM,6BAAA,GAAgC,CAC3C,CAAA,EACA,WAAA,GAAc,KAAA,KACsD;AACpE,EAAA,MAAM,cAAA,GAAiB,yBAAA,CAA0B,CAAA,EAAG,WAAW,CAAA;AAE/D,EAAA,IAAI,CAAA,CAAE,QAAA,KAAa,QAAA,CAAS,IAAA,IAAQ,EAAE,KAAA,EAAO;AAC3C,IAAA,OAAO;AAAA,MACL,cAAA;AAAA,MACA,EAAE,GAAG,CAAA,EAAG,KAAA,EAAO,EAAE,KAAA,CAAM,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,IAAI,CAAA,CAAE,IAAA,CAAK,EAAE,CAAA;AAAE,KACrD;AAAA,EACF;AAEA,EAAA,OAAO;AAAA,IACL,cAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import '../../../integrations/@mittwald/password-tools-js/defaultPasswordCreationPolicy.mjs';
|
|
4
4
|
import '@mittwald/password-tools-js/policy';
|
|
5
5
|
import 'remeda';
|
|
6
|
+
import 'react';
|
|
6
7
|
import '@mittwald/password-tools-js/rules';
|
|
7
8
|
import '@mittwald/password-tools-js/generator';
|
|
8
9
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getStateFromLatestPolicyValidationResult.mjs","sources":["../../../../../../../src/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult.ts"],"sourcesContent":["import { type RuleValidationResult } from \"@/integrations/@mittwald/password-tools-js\";\nimport type { ResolvedPolicyValidationResult } from \"@/components/PasswordCreationField/PasswordCreationField\";\n\nexport type StateFromLatestPolicyValidationResult =\n | undefined\n | Partial<RuleValidationResult>;\n\n/** @internal */\nexport const getStateFromLatestPolicyValidationResult = (\n isEmptyValue: boolean,\n result: ResolvedPolicyValidationResult,\n): StateFromLatestPolicyValidationResult => {\n if (result.ruleResults.length >= 1) {\n const failingRule = result.ruleResults.find((r) => !r.isValid);\n if (failingRule) {\n return failingRule;\n }\n }\n\n if (result.isValid === \"indeterminate\") {\n return undefined;\n }\n\n if (!isEmptyValue) {\n if (result.complexity.actual < result.complexity.min) {\n return {\n isValid: false,\n identifier: \"failingComplexity\",\n };\n }\n\n if (result.complexity.actual === result.complexity.min) {\n return {\n isValid: result.isValid,\n identifier: \"optimizeComplexity\",\n };\n }\n }\n\n return {\n isValid: true,\n identifier: \"securePassword\",\n };\n};\n\nexport default getStateFromLatestPolicyValidationResult;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"getStateFromLatestPolicyValidationResult.mjs","sources":["../../../../../../../src/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult.ts"],"sourcesContent":["import { type RuleValidationResult } from \"@/integrations/@mittwald/password-tools-js\";\nimport type { ResolvedPolicyValidationResult } from \"@/components/PasswordCreationField/PasswordCreationField\";\n\nexport type StateFromLatestPolicyValidationResult =\n | undefined\n | Partial<RuleValidationResult>;\n\n/** @internal */\nexport const getStateFromLatestPolicyValidationResult = (\n isEmptyValue: boolean,\n result: ResolvedPolicyValidationResult,\n): StateFromLatestPolicyValidationResult => {\n if (result.ruleResults.length >= 1) {\n const failingRule = result.ruleResults.find((r) => !r.isValid);\n if (failingRule) {\n return failingRule;\n }\n }\n\n if (result.isValid === \"indeterminate\") {\n return undefined;\n }\n\n if (!isEmptyValue) {\n if (result.complexity.actual < result.complexity.min) {\n return {\n isValid: false,\n identifier: \"failingComplexity\",\n };\n }\n\n if (result.complexity.actual === result.complexity.min) {\n return {\n isValid: result.isValid,\n identifier: \"optimizeComplexity\",\n };\n }\n }\n\n return {\n isValid: true,\n identifier: \"securePassword\",\n };\n};\n\nexport default getStateFromLatestPolicyValidationResult;\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,wCAAA,GAA2C,CACtD,YAAA,EACA,MAAA,KAC0C;AAC1C,EAAA,IAAI,MAAA,CAAO,WAAA,CAAY,MAAA,IAAU,CAAA,EAAG;AAClC,IAAA,MAAM,WAAA,GAAc,OAAO,WAAA,CAAY,IAAA,CAAK,CAAC,CAAA,KAAM,CAAC,EAAE,OAAO,CAAA;AAC7D,IAAA,IAAI,WAAA,EAAa;AACf,MAAA,OAAO,WAAA;AAAA,IACT;AAAA,EACF;AAEA,EAAA,IAAI,MAAA,CAAO,YAAY,eAAA,EAAiB;AACtC,IAAA,OAAO,MAAA;AAAA,EACT;AAEA,EAAA,IAAI,CAAC,YAAA,EAAc;AACjB,IAAA,IAAI,MAAA,CAAO,UAAA,CAAW,MAAA,GAAS,MAAA,CAAO,WAAW,GAAA,EAAK;AACpD,MAAA,OAAO;AAAA,QACL,OAAA,EAAS,KAAA;AAAA,QACT,UAAA,EAAY;AAAA,OACd;AAAA,IACF;AAEA,IAAA,IAAI,MAAA,CAAO,UAAA,CAAW,MAAA,KAAW,MAAA,CAAO,WAAW,GAAA,EAAK;AACtD,MAAA,OAAO;AAAA,QACL,SAAS,MAAA,CAAO,OAAA;AAAA,QAChB,UAAA,EAAY;AAAA,OACd;AAAA,IACF;AAAA,EACF;AAEA,EAAA,OAAO;AAAA,IACL,OAAA,EAAS,IAAA;AAAA,IACT,UAAA,EAAY;AAAA,GACd;AACF;;;;"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import '../../../integrations/@mittwald/password-tools-js/defaultPasswordCreationPolicy.mjs';
|
|
4
4
|
import '@mittwald/password-tools-js/policy';
|
|
5
5
|
import 'remeda';
|
|
6
|
+
import 'react';
|
|
6
7
|
import '@mittwald/password-tools-js/rules';
|
|
7
8
|
import { Generator } from '@mittwald/password-tools-js/generator';
|
|
8
9
|
|
package/dist/js/components/src/components/PasswordCreationField/worker/generatePassword.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generatePassword.mjs","sources":["../../../../../../../src/components/PasswordCreationField/worker/generatePassword.ts"],"sourcesContent":["import {\n Generator,\n type Policy,\n} from \"@/integrations/@mittwald/password-tools-js\";\n\nexport const generatePassword = async (\n validationPolicy: Policy,\n): Promise<string> => {\n return new Generator(validationPolicy).generatePassword();\n};\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"generatePassword.mjs","sources":["../../../../../../../src/components/PasswordCreationField/worker/generatePassword.ts"],"sourcesContent":["import {\n Generator,\n type Policy,\n} from \"@/integrations/@mittwald/password-tools-js\";\n\nexport const generatePassword = async (\n validationPolicy: Policy,\n): Promise<string> => {\n return new Generator(validationPolicy).generatePassword();\n};\n"],"names":[],"mappings":";;;;;;;AAKO,MAAM,gBAAA,GAAmB,OAC9B,gBAAA,KACoB;AACpB,EAAA,OAAO,IAAI,SAAA,CAAU,gBAAgB,CAAA,CAAE,gBAAA,EAAiB;AAC1D;;;;"}
|
|
@@ -1,63 +1,65 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
-
import {
|
|
3
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
4
|
import styles from './RadioGroup.module.scss.mjs';
|
|
5
5
|
import * as Aria from 'react-aria-components';
|
|
6
6
|
import clsx from 'clsx';
|
|
7
7
|
import '../../lib/propsContext/propsContext.mjs';
|
|
8
8
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
9
|
-
import { FieldError } from '../FieldError/FieldError.mjs';
|
|
10
9
|
import { ColumnLayout } from '../ColumnLayout/ColumnLayout.mjs';
|
|
11
10
|
import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
|
|
12
11
|
import formFieldStyles from '../FormField/FormField.module.scss.mjs';
|
|
13
12
|
import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
14
13
|
import { useObjectRef } from '@react-aria/utils';
|
|
15
14
|
import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
|
|
15
|
+
import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
|
|
16
16
|
|
|
17
17
|
const RadioGroup = flowComponent("RadioGroup", (props) => {
|
|
18
18
|
const { children, className, s, m, l, ref, ...rest } = props;
|
|
19
|
+
const {
|
|
20
|
+
FieldErrorView,
|
|
21
|
+
FieldErrorResetContext,
|
|
22
|
+
fieldProps,
|
|
23
|
+
fieldPropsContext
|
|
24
|
+
} = useFieldComponent(props);
|
|
19
25
|
const rootClassName = clsx(formFieldStyles.formField, className);
|
|
20
26
|
const propsContext = {
|
|
21
|
-
Label: {
|
|
22
|
-
className: formFieldStyles.label
|
|
23
|
-
},
|
|
24
|
-
FieldDescription: {
|
|
25
|
-
className: formFieldStyles.fieldDescription,
|
|
26
|
-
tunnelId: "fieldDescription"
|
|
27
|
-
},
|
|
28
|
-
FieldError: {
|
|
29
|
-
className: formFieldStyles.customFieldError,
|
|
30
|
-
tunnelId: "fieldError"
|
|
31
|
-
},
|
|
32
27
|
RadioButton: {
|
|
33
28
|
tunnelId: "radioButtons"
|
|
34
29
|
},
|
|
35
30
|
Radio: {
|
|
36
31
|
tunnelId: "radios"
|
|
37
|
-
}
|
|
32
|
+
},
|
|
33
|
+
...fieldPropsContext
|
|
38
34
|
};
|
|
39
35
|
const localRadioRef = useObjectRef(ref);
|
|
40
36
|
useMakeFocusable(localRadioRef);
|
|
41
|
-
return /* @__PURE__ */
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
m:
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
37
|
+
return /* @__PURE__ */ jsx(
|
|
38
|
+
Aria.RadioGroup,
|
|
39
|
+
{
|
|
40
|
+
...rest,
|
|
41
|
+
className: clsx(rootClassName, fieldProps.className),
|
|
42
|
+
ref: localRadioRef,
|
|
43
|
+
children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
|
|
44
|
+
/* @__PURE__ */ jsx(FieldErrorResetContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, { dependencies: ["radio"], props: propsContext, children: [
|
|
45
|
+
/* @__PURE__ */ jsx(ColumnLayout, { s, m, l, className: styles.radioGroup, children: /* @__PURE__ */ jsx(TunnelExit, { id: "radioButtons" }) }),
|
|
46
|
+
/* @__PURE__ */ jsx(
|
|
47
|
+
ColumnLayout,
|
|
48
|
+
{
|
|
49
|
+
s: s ?? [1],
|
|
50
|
+
m: m ?? [1],
|
|
51
|
+
l: l ?? [1],
|
|
52
|
+
rowGap: "s",
|
|
53
|
+
className: styles.radioGroup,
|
|
54
|
+
children: /* @__PURE__ */ jsx(TunnelExit, { id: "radios" })
|
|
55
|
+
}
|
|
56
|
+
),
|
|
57
|
+
children
|
|
58
|
+
] }) }),
|
|
59
|
+
/* @__PURE__ */ jsx(FieldErrorView, {})
|
|
60
|
+
] })
|
|
61
|
+
}
|
|
62
|
+
);
|
|
61
63
|
});
|
|
62
64
|
|
|
63
65
|
export { RadioGroup, RadioGroup as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.mjs","sources":["../../../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./RadioGroup.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport
|
|
1
|
+
{"version":3,"file":"RadioGroup.mjs","sources":["../../../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./RadioGroup.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport formFieldStyles from \"../FormField/FormField.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface RadioGroupProps\n extends PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\">>,\n FlowComponentProps,\n Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\"> {}\n\n/** @flr-generate all */\nexport const RadioGroup = flowComponent(\"RadioGroup\", (props) => {\n const { children, className, s, m, l, ref, ...rest } = props;\n\n const {\n FieldErrorView,\n FieldErrorResetContext,\n fieldProps,\n fieldPropsContext,\n } = useFieldComponent(props);\n\n const rootClassName = clsx(formFieldStyles.formField, className);\n const propsContext: PropsContext = {\n RadioButton: {\n tunnelId: \"radioButtons\",\n },\n Radio: {\n tunnelId: \"radios\",\n },\n ...fieldPropsContext,\n };\n\n const localRadioRef = useObjectRef(ref);\n useMakeFocusable(localRadioRef);\n\n return (\n <Aria.RadioGroup\n {...rest}\n className={clsx(rootClassName, fieldProps.className)}\n ref={localRadioRef}\n >\n <TunnelProvider>\n <FieldErrorResetContext>\n <PropsContextProvider dependencies={[\"radio\"]} props={propsContext}>\n <ColumnLayout s={s} m={m} l={l} className={styles.radioGroup}>\n <TunnelExit id=\"radioButtons\" />\n </ColumnLayout>\n\n <ColumnLayout\n s={s ?? [1]}\n m={m ?? [1]}\n l={l ?? [1]}\n rowGap=\"s\"\n className={styles.radioGroup}\n >\n <TunnelExit id=\"radios\" />\n </ColumnLayout>\n\n {children}\n </PropsContextProvider>\n </FieldErrorResetContext>\n <FieldErrorView />\n </TunnelProvider>\n </Aria.RadioGroup>\n );\n});\n\nexport default RadioGroup;\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAsBO,MAAM,UAAA,GAAa,aAAA,CAAc,YAAA,EAAc,CAAC,KAAA,KAAU;AAC/D,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,CAAA,EAAG,GAAG,CAAA,EAAG,GAAA,EAAK,GAAG,IAAA,EAAK,GAAI,KAAA;AAEvD,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,sBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,eAAA,CAAgB,SAAA,EAAW,SAAS,CAAA;AAC/D,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,WAAA,EAAa;AAAA,MACX,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,KAAA,EAAO;AAAA,MACL,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,aAAA,GAAgB,aAAa,GAAG,CAAA;AACtC,EAAA,gBAAA,CAAiB,aAAa,CAAA;AAE9B,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA,CAAK,UAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,aAAA,EAAe,UAAA,CAAW,SAAS,CAAA;AAAA,MACnD,GAAA,EAAK,aAAA;AAAA,MAEL,+BAAC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,sBAAA,EAAA,EACC,+BAAC,oBAAA,EAAA,EAAqB,YAAA,EAAc,CAAC,OAAO,CAAA,EAAG,OAAO,YAAA,EACpD,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YAAA,EAAA,EAAa,CAAA,EAAM,CAAA,EAAM,CAAA,EAAM,SAAA,EAAW,MAAA,CAAO,UAAA,EAChD,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,cAAA,EAAe,CAAA,EAChC,CAAA;AAAA,0BAEA,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,cACV,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,cACV,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,cACV,MAAA,EAAO,GAAA;AAAA,cACP,WAAW,MAAA,CAAO,UAAA;AAAA,cAElB,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,QAAA,EAAS;AAAA;AAAA,WAC1B;AAAA,UAEC;AAAA,SAAA,EACH,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA,OAAA,EAClB;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
|
|
@@ -7,7 +7,6 @@ import styles from './SearchField.module.scss.mjs';
|
|
|
7
7
|
import clsx from 'clsx';
|
|
8
8
|
import '../../lib/propsContext/propsContext.mjs';
|
|
9
9
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
10
|
-
import { FieldError } from '../FieldError/FieldError.mjs';
|
|
11
10
|
import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
12
11
|
import { Button } from '../Button/Button.mjs';
|
|
13
12
|
import 'react';
|
|
@@ -19,9 +18,16 @@ import { IconSearch } from '../Icon/components/icons/IconSearch.mjs';
|
|
|
19
18
|
import locales from '../../../../_virtual/_.locale.json@e940efc6da10fdf09417eb079b65a343.mjs';
|
|
20
19
|
import { useLocalizedStringFormatter } from 'react-aria';
|
|
21
20
|
import { ReactAriaControlledValueFix } from '../../lib/react/ReactAriaControlledValueFix.mjs';
|
|
21
|
+
import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
|
|
22
22
|
|
|
23
23
|
const SearchField = flowComponent("SearchField", (props) => {
|
|
24
24
|
const { children, className, ref, ...rest } = props;
|
|
25
|
+
const {
|
|
26
|
+
FieldErrorView,
|
|
27
|
+
FieldErrorResetContext,
|
|
28
|
+
fieldProps,
|
|
29
|
+
fieldPropsContext
|
|
30
|
+
} = useFieldComponent(props);
|
|
25
31
|
const rootClassName = clsx(
|
|
26
32
|
formFieldStyles.formField,
|
|
27
33
|
styles.searchField,
|
|
@@ -29,26 +35,15 @@ const SearchField = flowComponent("SearchField", (props) => {
|
|
|
29
35
|
);
|
|
30
36
|
const stringFormatter = useLocalizedStringFormatter(locales);
|
|
31
37
|
const searchText = stringFormatter.format(`searchField.search`);
|
|
32
|
-
const propsContext = {
|
|
33
|
-
Label: {
|
|
34
|
-
className: formFieldStyles.label,
|
|
35
|
-
optional: !props.isRequired
|
|
36
|
-
},
|
|
37
|
-
FieldDescription: {
|
|
38
|
-
className: formFieldStyles.fieldDescription
|
|
39
|
-
},
|
|
40
|
-
FieldError: {
|
|
41
|
-
className: formFieldStyles.customFieldError
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
38
|
return /* @__PURE__ */ jsxs(
|
|
45
39
|
Aria.SearchField,
|
|
46
40
|
{
|
|
47
|
-
"aria-label": searchText,
|
|
48
41
|
...rest,
|
|
49
|
-
|
|
42
|
+
...fieldProps,
|
|
43
|
+
"aria-label": searchText,
|
|
44
|
+
className: clsx(rootClassName, fieldProps.className),
|
|
50
45
|
children: [
|
|
51
|
-
/* @__PURE__ */ jsx(PropsContextProvider, { props:
|
|
46
|
+
/* @__PURE__ */ jsx(PropsContextProvider, { props: fieldPropsContext, children: /* @__PURE__ */ jsx(FieldErrorResetContext, { children }) }),
|
|
52
47
|
/* @__PURE__ */ jsxs("div", { className: styles.inputContainer, children: [
|
|
53
48
|
/* @__PURE__ */ jsx(IconSearch, { className: styles.searchIcon }),
|
|
54
49
|
/* @__PURE__ */ jsx(
|
|
@@ -76,7 +71,7 @@ const SearchField = flowComponent("SearchField", (props) => {
|
|
|
76
71
|
}
|
|
77
72
|
)
|
|
78
73
|
] }),
|
|
79
|
-
/* @__PURE__ */ jsx(
|
|
74
|
+
/* @__PURE__ */ jsx(FieldErrorView, {})
|
|
80
75
|
]
|
|
81
76
|
}
|
|
82
77
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchField.mjs","sources":["../../../../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"../FormField/FormField.module.scss\";\nimport styles from \"./SearchField.module.scss\";\nimport clsx from \"clsx\";\nimport
|
|
1
|
+
{"version":3,"file":"SearchField.mjs","sources":["../../../../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"../FormField/FormField.module.scss\";\nimport styles from \"./SearchField.module.scss\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose, IconSearch } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport { ReactAriaControlledValueFix } from \"@/lib/react/ReactAriaControlledValueFix\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface SearchFieldProps\n extends PropsWithChildren<Omit<Aria.SearchFieldProps, \"children\">>,\n FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const SearchField = flowComponent(\"SearchField\", (props) => {\n const { children, className, ref, ...rest } = props;\n\n const {\n FieldErrorView,\n FieldErrorResetContext,\n fieldProps,\n fieldPropsContext,\n } = useFieldComponent(props);\n\n const rootClassName = clsx(\n formFieldStyles.formField,\n styles.searchField,\n className,\n );\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n const searchText = stringFormatter.format(`searchField.search`);\n\n return (\n <Aria.SearchField\n {...rest}\n {...fieldProps}\n aria-label={searchText}\n className={clsx(rootClassName, fieldProps.className)}\n >\n <PropsContextProvider props={fieldPropsContext}>\n <FieldErrorResetContext>{children}</FieldErrorResetContext>\n </PropsContextProvider>\n <div className={styles.inputContainer}>\n <IconSearch className={styles.searchIcon} />\n <ReactAriaControlledValueFix\n inputContext={Aria.InputContext}\n props={props}\n >\n <Aria.Input\n placeholder={searchText}\n className={styles.input}\n ref={ref}\n />\n </ReactAriaControlledValueFix>\n <Button\n className={styles.clearButton}\n variant=\"plain\"\n color=\"secondary\"\n >\n <IconClose />\n </Button>\n </div>\n <FieldErrorView />\n </Aria.SearchField>\n );\n});\n\nexport default SearchField;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,WAAA,GAAc,aAAA,CAAc,aAAA,EAAe,CAAC,KAAA,KAAU;AACjE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE9C,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,sBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,eAAA,CAAgB,SAAA;AAAA,IAChB,MAAA,CAAO,WAAA;AAAA,IACP;AAAA,GACF;AAEA,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAC3D,EAAA,MAAM,UAAA,GAAa,eAAA,CAAgB,MAAA,CAAO,CAAA,kBAAA,CAAoB,CAAA;AAE9D,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA,CAAK,WAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACJ,YAAA,EAAY,UAAA;AAAA,MACZ,SAAA,EAAW,IAAA,CAAK,aAAA,EAAe,UAAA,CAAW,SAAS,CAAA;AAAA,MAEnD,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBAAqB,KAAA,EAAO,iBAAA,EAC3B,QAAA,kBAAA,GAAA,CAAC,sBAAA,EAAA,EAAwB,UAAS,CAAA,EACpC,CAAA;AAAA,wBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,cAAA,EACrB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,MAAA,CAAO,UAAA,EAAY,CAAA;AAAA,0BAC1C,GAAA;AAAA,YAAC,2BAAA;AAAA,YAAA;AAAA,cACC,cAAc,IAAA,CAAK,YAAA;AAAA,cACnB,KAAA;AAAA,cAEA,QAAA,kBAAA,GAAA;AAAA,gBAAC,IAAA,CAAK,KAAA;AAAA,gBAAL;AAAA,kBACC,WAAA,EAAa,UAAA;AAAA,kBACb,WAAW,MAAA,CAAO,KAAA;AAAA,kBAClB;AAAA;AAAA;AACF;AAAA,WACF;AAAA,0BACA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,MAAA,CAAO,WAAA;AAAA,cAClB,OAAA,EAAQ,OAAA;AAAA,cACR,KAAA,EAAM,WAAA;AAAA,cAEN,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA;AACb,SAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ,CAAC;;;;"}
|