@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.
Files changed (20) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/assets/doc-properties.json +440 -402
  3. package/dist/js/_virtual/_.locale.json@95341064edeb0e38b66d786dbd62955c.mjs +2 -0
  4. package/dist/js/_virtual/_.locale.json@95341064edeb0e38b66d786dbd62955c.mjs.map +1 -1
  5. package/dist/js/_virtual/_.locale.json@df0c8534e2e4f7c6c3d4365218df7347.mjs +4 -2
  6. package/dist/js/_virtual/_.locale.json@df0c8534e2e4f7c6c3d4365218df7347.mjs.map +1 -1
  7. package/dist/js/packages/components/src/components/ContextualHelp/ContextualHelp.mjs +5 -1
  8. package/dist/js/packages/components/src/components/ContextualHelp/ContextualHelp.mjs.map +1 -1
  9. package/dist/js/packages/components/src/components/ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.mjs +8 -2
  10. package/dist/js/packages/components/src/components/ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.mjs.map +1 -1
  11. package/dist/js/packages/components/src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.mjs +21 -15
  12. package/dist/js/packages/components/src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.mjs.map +1 -1
  13. package/dist/types/components/ContextualHelp/ContextualHelp.browser.test.d.ts +2 -0
  14. package/dist/types/components/ContextualHelp/ContextualHelp.browser.test.d.ts.map +1 -0
  15. package/dist/types/components/ContextualHelp/ContextualHelp.d.ts.map +1 -1
  16. package/dist/types/components/ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.d.ts +15 -2
  17. package/dist/types/components/ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.d.ts.map +1 -1
  18. package/dist/types/components/ContextualHelp/stories/Default.stories.d.ts.map +1 -1
  19. package/dist/types/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.d.ts.map +1 -1
  20. 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,IACjC,OAAA,EAAS;AAAA,MACP,KAAA,EAAO;AAAA;AACT,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;;;;"}
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 { children, ...triggerProps } = props;
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": stringFormatter.format("moreInformation"),
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 type ContextualHelpTriggerProps = OverlayTriggerProps;\n\n/** @flr-generate all */\nexport const ContextualHelpTrigger = flowComponent(\n \"ContextualHelpTrigger\",\n (props) => {\n const { children, ...triggerProps } = props;\n const stringFormatter = useLocalizedStringFormatter(\n locales,\n \"ContextualHelpTrigger\",\n );\n\n const propsContext: PropsContext = {\n Button: {\n \"aria-label\": stringFormatter.format(\"moreInformation\"),\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":";;;;;;;;;;;;;;;;AAaO,MAAM,qBAAA,GAAwB,aAAA;AAAA,EACnC,uBAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM,EAAE,QAAA,EAAU,GAAG,YAAA,EAAa,GAAI,KAAA;AACtC,IAAA,MAAM,eAAA,GAAkB,2BAAA;AAAA,MACtB,OAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,MAAA,EAAQ;AAAA,QACN,YAAA,EAAc,eAAA,CAAgB,MAAA,CAAO,iBAAiB,CAAA;AAAA,QACtD,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;;;;"}
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(ContextualHelpTrigger, { children: [
35
- /* @__PURE__ */ jsx(
36
- Button,
37
- {
38
- "data-component": "showPasswordRules",
39
- isDisabled,
40
- className
41
- }
42
- ),
43
- /* @__PURE__ */ jsxs(ContextualHelp, { children: [
44
- /* @__PURE__ */ jsx(Heading, { children: translate.format("password.requirements.heading") }),
45
- validationResultComponents.length === 0 && /* @__PURE__ */ jsx(ValidationResultEntry, { result: { isValid: true }, unspecifiedRules: true }),
46
- validationResultComponents
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,4BACG,qBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,gBAAA,EAAe,mBAAA;AAAA,QACf,UAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,yBACC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,OAAA,EAAA,EAAS,QAAA,EAAA,SAAA,CAAU,MAAA,CAAO,+BAA+B,CAAA,EAAE,CAAA;AAAA,MAC3D,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,MAEpE;AAAA,KAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
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,2 @@
1
+ export {};
2
+ //# sourceMappingURL=ContextualHelp.browser.test.d.ts.map
@@ -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,wGA2BzB,CAAC;AAEH,eAAe,cAAc,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 type ContextualHelpTriggerProps = OverlayTriggerProps;
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<OverlayTriggerProps & import('react').RefAttributes<HTMLDivElement>>;
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,MAAM,0BAA0B,GAAG,mBAAmB,CAAC;AAE7D,wBAAwB;AACxB,eAAO,MAAM,qBAAqB,wGAgCjC,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
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;AAMrC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAoBrC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,eAAO,MAAM,OAAO,EAAE,KAAU,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,CA0C5C,CAAC"}
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.988",
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.988",
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.988",
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.988",
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.988",
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": "2a4ec58ed02538cea56c47800f4edd0bada8f8ae"
204
+ "gitHead": "5f93b99b1dc76d62493a18f644e93568d2431598"
205
205
  }