@mittwald/flow-react-components 0.2.0-alpha.988 → 0.2.0-alpha.989
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 +4 -0
- package/dist/assets/doc-properties.json +440 -402
- package/dist/js/_virtual/_.locale.json@95341064edeb0e38b66d786dbd62955c.mjs +2 -0
- package/dist/js/_virtual/_.locale.json@95341064edeb0e38b66d786dbd62955c.mjs.map +1 -1
- package/dist/js/_virtual/_.locale.json@df0c8534e2e4f7c6c3d4365218df7347.mjs +4 -2
- package/dist/js/_virtual/_.locale.json@df0c8534e2e4f7c6c3d4365218df7347.mjs.map +1 -1
- package/dist/js/packages/components/src/components/ContextualHelp/ContextualHelp.mjs +5 -1
- package/dist/js/packages/components/src/components/ContextualHelp/ContextualHelp.mjs.map +1 -1
- package/dist/js/packages/components/src/components/ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.mjs +8 -2
- package/dist/js/packages/components/src/components/ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.mjs.map +1 -1
- package/dist/js/packages/components/src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.mjs +21 -15
- package/dist/js/packages/components/src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.mjs.map +1 -1
- package/dist/types/components/ContextualHelp/ContextualHelp.browser.test.d.ts +2 -0
- package/dist/types/components/ContextualHelp/ContextualHelp.browser.test.d.ts.map +1 -0
- package/dist/types/components/ContextualHelp/ContextualHelp.d.ts.map +1 -1
- package/dist/types/components/ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.d.ts +15 -2
- package/dist/types/components/ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.d.ts.map +1 -1
- package/dist/types/components/ContextualHelp/stories/Default.stories.d.ts.map +1 -1
- package/dist/types/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.d.ts.map +1 -1
- package/package.json +6 -6
|
@@ -5,6 +5,7 @@ const locales = {"de-DE":{
|
|
|
5
5
|
"button.generate.tooltip.hide": "Passwort verbergen",
|
|
6
6
|
"button.generate.tooltip.show": "Passwort anzeigen",
|
|
7
7
|
"password.requirements.heading": "Anforderungen an dein Passwort",
|
|
8
|
+
"password.requirements.subject": "den Anforderungen an dein Passwort",
|
|
8
9
|
"validation.allowedSpecialCharacters": "Erlaubte Sonderzeichen: #!~%^*_+-=?()<>|.,;$:/",
|
|
9
10
|
"validation.atLeastOneCapitalLetter": "Mindestens ein Großbuchstabe",
|
|
10
11
|
"validation.atLeastOneLowercaseLetter": "Mindestens ein Kleinbuchstabe",
|
|
@@ -45,6 +46,7 @@ const locales = {"de-DE":{
|
|
|
45
46
|
"button.generate.tooltip.hide": "Hide password",
|
|
46
47
|
"button.generate.tooltip.show": "Show password",
|
|
47
48
|
"password.requirements.heading": "Requirements for your password",
|
|
49
|
+
"password.requirements.subject": "your password requirements",
|
|
48
50
|
"validation.allowedSpecialCharacters": "Allowed special characters: #!~%^*_+-=?()<>|.,;$:/",
|
|
49
51
|
"validation.atLeastOneCapitalLetter": "At least one capital letter",
|
|
50
52
|
"validation.atLeastOneLowercaseLetter": "At least one lowercase letter",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_.locale.json@95341064edeb0e38b66d786dbd62955c.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"_.locale.json@95341064edeb0e38b66d786dbd62955c.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
3
|
const locales = {"de-DE":{
|
|
4
|
-
"moreInformation": "Weitere Informationen"
|
|
4
|
+
"moreInformation": "Weitere Informationen",
|
|
5
|
+
"moreInformationAbout": "Weitere Informationen zu {subject}"
|
|
5
6
|
}
|
|
6
7
|
,"en-US":{
|
|
7
|
-
"moreInformation": "More information"
|
|
8
|
+
"moreInformation": "More information",
|
|
9
|
+
"moreInformationAbout": "More information about {subject}"
|
|
8
10
|
}
|
|
9
11
|
};
|
|
10
12
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_.locale.json@df0c8534e2e4f7c6c3d4365218df7347.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"_.locale.json@df0c8534e2e4f7c6c3d4365218df7347.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
|
|
@@ -25,8 +25,12 @@ const ContextualHelp = flowComponent("ContextualHelp", (props) => {
|
|
|
25
25
|
});
|
|
26
26
|
const controller = controllerFromProps ?? controllerFromContext;
|
|
27
27
|
const propsContext = {
|
|
28
|
+
// A contextual help holds a single, simple explanation — it does not need
|
|
29
|
+
// its own heading structure. A heading is rendered as a bold text label
|
|
30
|
+
// instead of an actual heading element.
|
|
28
31
|
Heading: {
|
|
29
|
-
level: 5
|
|
32
|
+
level: 5,
|
|
33
|
+
elementType: "span"
|
|
30
34
|
}
|
|
31
35
|
};
|
|
32
36
|
return /* @__PURE__ */ jsx(Popover, { withTip: true, ...rest, controller, children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx("div", { className: styles.contextualHelp, children }) }) });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextualHelp.mjs","sources":["../../../../../../../src/components/ContextualHelp/ContextualHelp.tsx"],"sourcesContent":["import type { PopoverProps } from \"@/components/Popover/Popover\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport styles from \"./ContextualHelp.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useOverlayController } from \"@/lib/controller\";\n\nexport type ContextualHelpProps = Omit<PopoverProps, \"withTip\">;\n\n/** @flr-generate all */\nexport const ContextualHelp = flowComponent(\"ContextualHelp\", (props) => {\n const {\n children,\n controller: controllerFromProps,\n ref: ignoredRef,\n ...rest\n } = props;\n\n const controllerFromContext = useOverlayController(\"ContextualHelp\", {\n reuseControllerFromContext: true,\n });\n\n const controller = controllerFromProps ?? controllerFromContext;\n\n const propsContext: PropsContext = {\n Heading: {\n level: 5,\n },\n };\n\n return (\n <Popover withTip {...rest} controller={controller}>\n <PropsContextProvider props={propsContext}>\n <div className={styles.contextualHelp}>{children}</div>\n </PropsContextProvider>\n </Popover>\n );\n});\n\nexport default ContextualHelp;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAWO,MAAM,cAAA,GAAiB,aAAA,CAAc,gBAAA,EAAkB,CAAC,KAAA,KAAU;AACvE,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,UAAA,EAAY,mBAAA;AAAA,IACZ,GAAA,EAAK,UAAA;AAAA,IACL,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,qBAAA,GAAwB,qBAAqB,gBAAA,EAAkB;AAAA,IACnE,0BAAA,EAA4B;AAAA,GAC7B,CAAA;AAED,EAAA,MAAM,aAAa,mBAAA,IAAuB,qBAAA;AAE1C,EAAA,MAAM,YAAA,GAA6B;AAAA,
|
|
1
|
+
{"version":3,"file":"ContextualHelp.mjs","sources":["../../../../../../../src/components/ContextualHelp/ContextualHelp.tsx"],"sourcesContent":["import type { PopoverProps } from \"@/components/Popover/Popover\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport styles from \"./ContextualHelp.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useOverlayController } from \"@/lib/controller\";\n\nexport type ContextualHelpProps = Omit<PopoverProps, \"withTip\">;\n\n/** @flr-generate all */\nexport const ContextualHelp = flowComponent(\"ContextualHelp\", (props) => {\n const {\n children,\n controller: controllerFromProps,\n ref: ignoredRef,\n ...rest\n } = props;\n\n const controllerFromContext = useOverlayController(\"ContextualHelp\", {\n reuseControllerFromContext: true,\n });\n\n const controller = controllerFromProps ?? controllerFromContext;\n\n const propsContext: PropsContext = {\n // A contextual help holds a single, simple explanation — it does not need\n // its own heading structure. A heading is rendered as a bold text label\n // instead of an actual heading element.\n Heading: {\n level: 5,\n elementType: \"span\",\n },\n };\n\n return (\n <Popover withTip {...rest} controller={controller}>\n <PropsContextProvider props={propsContext}>\n <div className={styles.contextualHelp}>{children}</div>\n </PropsContextProvider>\n </Popover>\n );\n});\n\nexport default ContextualHelp;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAWO,MAAM,cAAA,GAAiB,aAAA,CAAc,gBAAA,EAAkB,CAAC,KAAA,KAAU;AACvE,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,UAAA,EAAY,mBAAA;AAAA,IACZ,GAAA,EAAK,UAAA;AAAA,IACL,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,qBAAA,GAAwB,qBAAqB,gBAAA,EAAkB;AAAA,IACnE,0BAAA,EAA4B;AAAA,GAC7B,CAAA;AAED,EAAA,MAAM,aAAa,mBAAA,IAAuB,qBAAA;AAE1C,EAAA,MAAM,YAAA,GAA6B;AAAA;AAAA;AAAA;AAAA,IAIjC,OAAA,EAAS;AAAA,MACP,KAAA,EAAO,CAAA;AAAA,MACP,WAAA,EAAa;AAAA;AACf,GACF;AAEA,EAAA,2BACG,OAAA,EAAA,EAAQ,OAAA,EAAO,MAAE,GAAG,IAAA,EAAM,YACzB,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,cAAA,EAAiB,QAAA,EAAS,GACnD,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -19,14 +19,20 @@ import { flowComponent } from '../../../../lib/componentFactory/flowComponent.mj
|
|
|
19
19
|
const ContextualHelpTrigger = flowComponent(
|
|
20
20
|
"ContextualHelpTrigger",
|
|
21
21
|
(props) => {
|
|
22
|
-
const {
|
|
22
|
+
const {
|
|
23
|
+
children,
|
|
24
|
+
subject,
|
|
25
|
+
"aria-label": ariaLabelFromProps,
|
|
26
|
+
...triggerProps
|
|
27
|
+
} = props;
|
|
23
28
|
const stringFormatter = useLocalizedStringFormatter(
|
|
24
29
|
locales,
|
|
25
30
|
"ContextualHelpTrigger"
|
|
26
31
|
);
|
|
32
|
+
const ariaLabel = ariaLabelFromProps ?? (subject === void 0 ? stringFormatter.format("moreInformation") : stringFormatter.format("moreInformationAbout", { subject }));
|
|
27
33
|
const propsContext = {
|
|
28
34
|
Button: {
|
|
29
|
-
"aria-label":
|
|
35
|
+
"aria-label": ariaLabel,
|
|
30
36
|
children: /* @__PURE__ */ jsx(IconInfo, {}),
|
|
31
37
|
size: "s",
|
|
32
38
|
variant: "plain",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextualHelpTrigger.mjs","sources":["../../../../../../../../../src/components/ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { OverlayTriggerProps } from \"@/components/OverlayTrigger\";\nimport { OverlayTrigger } from \"@/components/OverlayTrigger\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { IconInfo } from \"@/components/Icon/components/icons\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport
|
|
1
|
+
{"version":3,"file":"ContextualHelpTrigger.mjs","sources":["../../../../../../../../../src/components/ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { OverlayTriggerProps } from \"@/components/OverlayTrigger\";\nimport { OverlayTrigger } from \"@/components/OverlayTrigger\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { IconInfo } from \"@/components/Icon/components/icons\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface ContextualHelpTriggerProps extends OverlayTriggerProps {\n /**\n * The subject the contextual help is about — not a complete accessibility\n * label. It is inserted into the localized template \"More information about\n * {subject}\", which becomes the accessibility label of the trigger.\n */\n subject?: string;\n /**\n * A complete accessibility label for the trigger, replacing the label built\n * from `subject`. Prefer `subject`, which stays localized — reach for this\n * only when the template does not fit.\n */\n \"aria-label\"?: string;\n}\n\n/** @flr-generate all */\nexport const ContextualHelpTrigger = flowComponent(\n \"ContextualHelpTrigger\",\n (props) => {\n const {\n children,\n subject,\n \"aria-label\": ariaLabelFromProps,\n ...triggerProps\n } = props;\n const stringFormatter = useLocalizedStringFormatter(\n locales,\n \"ContextualHelpTrigger\",\n );\n\n const ariaLabel =\n ariaLabelFromProps ??\n (subject === undefined\n ? stringFormatter.format(\"moreInformation\")\n : stringFormatter.format(\"moreInformationAbout\", { subject }));\n\n const propsContext: PropsContext = {\n Button: {\n \"aria-label\": ariaLabel,\n children: <IconInfo />,\n size: \"s\",\n variant: \"plain\",\n ariaSlot: null,\n },\n };\n\n return (\n <OverlayTrigger\n overlayType=\"ContextualHelp\"\n {...triggerProps}\n component={Aria.DialogTrigger}\n >\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </OverlayTrigger>\n );\n },\n { type: \"provider\" },\n);\n\nexport default ContextualHelpTrigger;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA0BO,MAAM,qBAAA,GAAwB,aAAA;AAAA,EACnC,uBAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,OAAA;AAAA,MACA,YAAA,EAAc,kBAAA;AAAA,MACd,GAAG;AAAA,KACL,GAAI,KAAA;AACJ,IAAA,MAAM,eAAA,GAAkB,2BAAA;AAAA,MACtB,OAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,MAAM,SAAA,GACJ,kBAAA,KACC,OAAA,KAAY,MAAA,GACT,eAAA,CAAgB,MAAA,CAAO,iBAAiB,CAAA,GACxC,eAAA,CAAgB,MAAA,CAAO,sBAAA,EAAwB,EAAE,SAAS,CAAA,CAAA;AAEhE,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,MAAA,EAAQ;AAAA,QACN,YAAA,EAAc,SAAA;AAAA,QACd,QAAA,sBAAW,QAAA,EAAA,EAAS,CAAA;AAAA,QACpB,IAAA,EAAM,GAAA;AAAA,QACN,OAAA,EAAS,OAAA;AAAA,QACT,QAAA,EAAU;AAAA;AACZ,KACF;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAY,gBAAA;AAAA,QACX,GAAG,YAAA;AAAA,QACJ,WAAW,IAAA,CAAK,aAAA;AAAA,QAEhB,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH;AAAA;AAAA,KACF;AAAA,EAEJ,CAAA;AAAA,EACA,EAAE,MAAM,UAAA;AACV;;;;"}
|
|
@@ -31,21 +31,27 @@ const ValidationResultButton = (props) => {
|
|
|
31
31
|
`${result.identifier}-${index}`
|
|
32
32
|
);
|
|
33
33
|
}) ?? [];
|
|
34
|
-
return /* @__PURE__ */ jsxs(
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
34
|
+
return /* @__PURE__ */ jsxs(
|
|
35
|
+
ContextualHelpTrigger,
|
|
36
|
+
{
|
|
37
|
+
subject: translate.format("password.requirements.subject"),
|
|
38
|
+
children: [
|
|
39
|
+
/* @__PURE__ */ jsx(
|
|
40
|
+
Button,
|
|
41
|
+
{
|
|
42
|
+
"data-component": "showPasswordRules",
|
|
43
|
+
isDisabled,
|
|
44
|
+
className
|
|
45
|
+
}
|
|
46
|
+
),
|
|
47
|
+
/* @__PURE__ */ jsxs(ContextualHelp, { children: [
|
|
48
|
+
/* @__PURE__ */ jsx(Heading, { children: translate.format("password.requirements.heading") }),
|
|
49
|
+
validationResultComponents.length === 0 && /* @__PURE__ */ jsx(ValidationResultEntry, { result: { isValid: true }, unspecifiedRules: true }),
|
|
50
|
+
validationResultComponents
|
|
51
|
+
] })
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
);
|
|
49
55
|
};
|
|
50
56
|
|
|
51
57
|
export { ValidationResultButton };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ValidationResultButton.mjs","sources":["../../../../../../../../../src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\n\nimport locales from \"./../../locales/*.locale.json\";\nimport type { ResolvedPolicyValidationResult } from \"@/components/PasswordCreationField/PasswordCreationField\";\nimport ValidationResultEntry from \"@/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry\";\nimport { Button } from \"@/components/Button\";\nimport {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@/components/ContextualHelp\";\nimport { Heading } from \"@/components/Heading\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\n\ninterface Props extends PropsWithClassName {\n policyValidationResult?: ResolvedPolicyValidationResult;\n isDisabled?: boolean;\n isEmptyValue: boolean;\n}\n\nexport const ValidationResultButton: FC<Props> = (props) => {\n const { policyValidationResult, isDisabled, isEmptyValue, className } = props;\n\n const translate = useLocalizedStringFormatter(\n locales,\n \"PasswordCreationField\",\n );\n\n let validationResults = policyValidationResult?.ruleResults?.filter((r) => {\n return isEmptyValue ? !r.isValid : true;\n });\n if (validationResults && validationResults.length === 0 && isEmptyValue) {\n // if we have no rules to show on first info - just list them all\n validationResults = policyValidationResult?.ruleResults;\n }\n\n const validationResultComponents =\n validationResults?.map((result, index) => {\n return (\n <ValidationResultEntry\n key={`${result.identifier}-${index}`}\n result={result}\n />\n );\n }) ?? [];\n\n return (\n <ContextualHelpTrigger>\n <Button\n data-component=\"showPasswordRules\"\n isDisabled={isDisabled}\n className={className}\n />\n <ContextualHelp>\n <Heading>{translate.format(\"password.requirements.heading\")}</Heading>\n {validationResultComponents.length === 0 && (\n <ValidationResultEntry result={{ isValid: true }} unspecifiedRules />\n )}\n {validationResultComponents}\n </ContextualHelp>\n </ContextualHelpTrigger>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAoBO,MAAM,sBAAA,GAAoC,CAAC,KAAA,KAAU;AAC1D,EAAA,MAAM,EAAE,sBAAA,EAAwB,UAAA,EAAY,YAAA,EAAc,WAAU,GAAI,KAAA;AAExE,EAAA,MAAM,SAAA,GAAY,2BAAA;AAAA,IAChB,OAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,IAAI,iBAAA,GAAoB,sBAAA,EAAwB,WAAA,EAAa,MAAA,CAAO,CAAC,CAAA,KAAM;AACzE,IAAA,OAAO,YAAA,GAAe,CAAC,CAAA,CAAE,OAAA,GAAU,IAAA;AAAA,EACrC,CAAC,CAAA;AACD,EAAA,IAAI,iBAAA,IAAqB,iBAAA,CAAkB,MAAA,KAAW,CAAA,IAAK,YAAA,EAAc;AAEvE,IAAA,iBAAA,GAAoB,sBAAA,EAAwB,WAAA;AAAA,EAC9C;AAEA,EAAA,MAAM,0BAAA,GACJ,iBAAA,EAAmB,GAAA,CAAI,CAAC,QAAQ,KAAA,KAAU;AACxC,IAAA,uBACE,GAAA;AAAA,MAAC,qBAAA;AAAA,MAAA;AAAA,QAEC;AAAA,OAAA;AAAA,MADK,CAAA,EAAG,MAAA,CAAO,UAAU,CAAA,CAAA,EAAI,KAAK,CAAA;AAAA,KAEpC;AAAA,EAEJ,CAAC,KAAK,EAAC;AAET,EAAA,
|
|
1
|
+
{"version":3,"file":"ValidationResultButton.mjs","sources":["../../../../../../../../../src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\n\nimport locales from \"./../../locales/*.locale.json\";\nimport type { ResolvedPolicyValidationResult } from \"@/components/PasswordCreationField/PasswordCreationField\";\nimport ValidationResultEntry from \"@/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry\";\nimport { Button } from \"@/components/Button\";\nimport {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@/components/ContextualHelp\";\nimport { Heading } from \"@/components/Heading\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\n\ninterface Props extends PropsWithClassName {\n policyValidationResult?: ResolvedPolicyValidationResult;\n isDisabled?: boolean;\n isEmptyValue: boolean;\n}\n\nexport const ValidationResultButton: FC<Props> = (props) => {\n const { policyValidationResult, isDisabled, isEmptyValue, className } = props;\n\n const translate = useLocalizedStringFormatter(\n locales,\n \"PasswordCreationField\",\n );\n\n let validationResults = policyValidationResult?.ruleResults?.filter((r) => {\n return isEmptyValue ? !r.isValid : true;\n });\n if (validationResults && validationResults.length === 0 && isEmptyValue) {\n // if we have no rules to show on first info - just list them all\n validationResults = policyValidationResult?.ruleResults;\n }\n\n const validationResultComponents =\n validationResults?.map((result, index) => {\n return (\n <ValidationResultEntry\n key={`${result.identifier}-${index}`}\n result={result}\n />\n );\n }) ?? [];\n\n return (\n <ContextualHelpTrigger\n subject={translate.format(\"password.requirements.subject\")}\n >\n <Button\n data-component=\"showPasswordRules\"\n isDisabled={isDisabled}\n className={className}\n />\n <ContextualHelp>\n <Heading>{translate.format(\"password.requirements.heading\")}</Heading>\n {validationResultComponents.length === 0 && (\n <ValidationResultEntry result={{ isValid: true }} unspecifiedRules />\n )}\n {validationResultComponents}\n </ContextualHelp>\n </ContextualHelpTrigger>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAoBO,MAAM,sBAAA,GAAoC,CAAC,KAAA,KAAU;AAC1D,EAAA,MAAM,EAAE,sBAAA,EAAwB,UAAA,EAAY,YAAA,EAAc,WAAU,GAAI,KAAA;AAExE,EAAA,MAAM,SAAA,GAAY,2BAAA;AAAA,IAChB,OAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,IAAI,iBAAA,GAAoB,sBAAA,EAAwB,WAAA,EAAa,MAAA,CAAO,CAAC,CAAA,KAAM;AACzE,IAAA,OAAO,YAAA,GAAe,CAAC,CAAA,CAAE,OAAA,GAAU,IAAA;AAAA,EACrC,CAAC,CAAA;AACD,EAAA,IAAI,iBAAA,IAAqB,iBAAA,CAAkB,MAAA,KAAW,CAAA,IAAK,YAAA,EAAc;AAEvE,IAAA,iBAAA,GAAoB,sBAAA,EAAwB,WAAA;AAAA,EAC9C;AAEA,EAAA,MAAM,0BAAA,GACJ,iBAAA,EAAmB,GAAA,CAAI,CAAC,QAAQ,KAAA,KAAU;AACxC,IAAA,uBACE,GAAA;AAAA,MAAC,qBAAA;AAAA,MAAA;AAAA,QAEC;AAAA,OAAA;AAAA,MADK,CAAA,EAAG,MAAA,CAAO,UAAU,CAAA,CAAA,EAAI,KAAK,CAAA;AAAA,KAEpC;AAAA,EAEJ,CAAC,KAAK,EAAC;AAET,EAAA,uBACE,IAAA;AAAA,IAAC,qBAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,SAAA,CAAU,MAAA,CAAO,+BAA+B,CAAA;AAAA,MAEzD,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,gBAAA,EAAe,mBAAA;AAAA,YACf,UAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,6BACC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,OAAA,EAAA,EAAS,QAAA,EAAA,SAAA,CAAU,MAAA,CAAO,+BAA+B,CAAA,EAAE,CAAA;AAAA,UAC3D,0BAAA,CAA2B,MAAA,KAAW,CAAA,oBACrC,GAAA,CAAC,qBAAA,EAAA,EAAsB,MAAA,EAAQ,EAAE,OAAA,EAAS,IAAA,EAAK,EAAG,gBAAA,EAAgB,IAAA,EAAC,CAAA;AAAA,UAEpE;AAAA,SAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ContextualHelp.browser.test.d.ts","sourceRoot":"","sources":["../../../../src/components/ContextualHelp/ContextualHelp.browser.test.tsx"],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextualHelp.d.ts","sourceRoot":"","sources":["../../../../src/components/ContextualHelp/ContextualHelp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAQjE,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;AAEhE,wBAAwB;AACxB,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"ContextualHelp.d.ts","sourceRoot":"","sources":["../../../../src/components/ContextualHelp/ContextualHelp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAQjE,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;AAEhE,wBAAwB;AACxB,eAAO,MAAM,cAAc,wGA+BzB,CAAC;AAEH,eAAe,cAAc,CAAC"}
|
|
@@ -1,6 +1,19 @@
|
|
|
1
1
|
import { OverlayTriggerProps } from '../../../OverlayTrigger';
|
|
2
|
-
export
|
|
2
|
+
export interface ContextualHelpTriggerProps extends OverlayTriggerProps {
|
|
3
|
+
/**
|
|
4
|
+
* The subject the contextual help is about — not a complete accessibility
|
|
5
|
+
* label. It is inserted into the localized template "More information about
|
|
6
|
+
* {subject}", which becomes the accessibility label of the trigger.
|
|
7
|
+
*/
|
|
8
|
+
subject?: string;
|
|
9
|
+
/**
|
|
10
|
+
* A complete accessibility label for the trigger, replacing the label built
|
|
11
|
+
* from `subject`. Prefer `subject`, which stays localized — reach for this
|
|
12
|
+
* only when the template does not fit.
|
|
13
|
+
*/
|
|
14
|
+
"aria-label"?: string;
|
|
15
|
+
}
|
|
3
16
|
/** @flr-generate all */
|
|
4
|
-
export declare const ContextualHelpTrigger: import('react').FunctionComponent<
|
|
17
|
+
export declare const ContextualHelpTrigger: import('react').FunctionComponent<ContextualHelpTriggerProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
5
18
|
export default ContextualHelpTrigger;
|
|
6
19
|
//# sourceMappingURL=ContextualHelpTrigger.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextualHelpTrigger.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AASvE,MAAM,
|
|
1
|
+
{"version":3,"file":"ContextualHelpTrigger.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AASvE,MAAM,WAAW,0BAA2B,SAAQ,mBAAmB;IACrE;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAwB;AACxB,eAAO,MAAM,qBAAqB,+GA2CjC,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ContextualHelp/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EACL,cAAc,EAEf,MAAM,6BAA6B,CAAC;
|
|
1
|
+
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ContextualHelp/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EACL,cAAc,EAEf,MAAM,6BAA6B,CAAC;AAKrC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAmBrC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ValidationResultButton.d.ts","sourceRoot":"","sources":["../../../../../../src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,0DAA0D,CAAC;AAQ/G,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,UAAU,KAAM,SAAQ,kBAAkB;IACxC,sBAAsB,CAAC,EAAE,8BAA8B,CAAC;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"ValidationResultButton.d.ts","sourceRoot":"","sources":["../../../../../../src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,0DAA0D,CAAC;AAQ/G,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,UAAU,KAAM,SAAQ,kBAAkB;IACxC,sBAAsB,CAAC,EAAE,8BAA8B,CAAC;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,KAAK,CA4C5C,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.989",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://flow.mittwald.de",
|
|
@@ -68,9 +68,9 @@
|
|
|
68
68
|
"@internationalized/string-compiler": "^3.4.1",
|
|
69
69
|
"@lezer/common": "^1.5.2",
|
|
70
70
|
"@lezer/highlight": "^1.2.3",
|
|
71
|
-
"@mittwald/flow-icons": "0.2.0-alpha.
|
|
71
|
+
"@mittwald/flow-icons": "0.2.0-alpha.989",
|
|
72
72
|
"@mittwald/password-tools-js": "3.0.0-alpha.31",
|
|
73
|
-
"@mittwald/react-tunnel": "0.2.0-alpha.
|
|
73
|
+
"@mittwald/react-tunnel": "0.2.0-alpha.989",
|
|
74
74
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
75
75
|
"@react-aria/form": "^3.2.1",
|
|
76
76
|
"@react-aria/i18n": "^3.13.1",
|
|
@@ -125,7 +125,7 @@
|
|
|
125
125
|
"@lezer/generator": "^1.8.0",
|
|
126
126
|
"@lezer/lr": "^1.4.10",
|
|
127
127
|
"@mittwald/flow-core": "",
|
|
128
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
128
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.989",
|
|
129
129
|
"@mittwald/flow-icons-base": "",
|
|
130
130
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
131
131
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
@@ -180,7 +180,7 @@
|
|
|
180
180
|
},
|
|
181
181
|
"peerDependencies": {
|
|
182
182
|
"@internationalized/date": "^3.12.2",
|
|
183
|
-
"@mittwald/flow-icons-pro": "0.2.0-alpha.
|
|
183
|
+
"@mittwald/flow-icons-pro": "0.2.0-alpha.989",
|
|
184
184
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
185
185
|
"next": "^16.2.3",
|
|
186
186
|
"react": "^19.2.0",
|
|
@@ -201,5 +201,5 @@
|
|
|
201
201
|
"optional": true
|
|
202
202
|
}
|
|
203
203
|
},
|
|
204
|
-
"gitHead": "
|
|
204
|
+
"gitHead": "5f93b99b1dc76d62493a18f644e93568d2431598"
|
|
205
205
|
}
|