npm - @mittwald/flow-react-components - Versions diffs - 1.3.0-next.3 → 1.3.0-next.30 - Mend

@mittwald/flow-react-components 1.3.0-next.3 → 1.3.0-next.30

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 (181) hide show

package/dist/js/packages/components/src/components/PasswordCreationField/PasswordCreationField.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PasswordCreationField.mjs","names":[],"sources":["../../../../../../../src/components/PasswordCreationField/PasswordCreationField.tsx"],"sourcesContent":["import {\n type PropsWithChildren,\n useState,\n type ClipboardEvent,\n useMemo,\n useRef,\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 { 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 { ValidationResultButton } from \"@/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton\";\nimport { PasswordGenerateButton } from \"@/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton\";\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 { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { FieldError } from \"@/components/FieldError\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface PasswordCreationFieldProps\n extends\n PropsWithChildren<\n Omit<Aria.TextFieldProps, \"children\" \| \"value\" \| \"defaultValue\"> &\n Partial<Pick<Aria.FieldErrorRenderProps, \"validationErrors\">>\n >,\n FlowComponentProps<HTMLInputElement> {\n /* The password of a controlled field. /\n value?: string;\n /* Called with the password and its validity whenever the password changes. /\n onValidationResult?: (result: { password: string; isValid: boolean }) => void;\n /* The initial password of an uncontrolled field. /\n defaultValue?: string;\n /* The placeholder shown while the field is empty. /\n placeholder?: string;\n /\n The policy the password is validated against.\n \n @default defaultPasswordCreationPolicy\n /\n validationPolicy?: PolicyGenericDeclaration;\n}\n\nexport interface ResolvedPolicyValidationResult extends Omit<\n PolicyValidationResult,\n \"isValid\"\n> {\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 value,\n onChange,\n ...rest\n } = useControlledHostValueProps(props, \"\");\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldProps,\n fieldPropsContext,\n } = useFieldComponent(props, \"PasswordCreationField\");\n\n const translate = useLocalizedStringFormatter(\n locales,\n \"PasswordCreationField\",\n );\n\n const validationPolicy = useMemo(\n () => Policy.fromDeclaration(validationPolicyFromProps),\n [validationPolicyFromProps],\n );\n\n const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n const initialPolicyValidationState: ResolvedPolicyValidationResult = {\n isValid: \"indeterminate\",\n complexity: {\n min: validationPolicy.minComplexity,\n actual: 4,\n warning: null,\n },\n ruleResults: [],\n };\n\n const [policyValidationResult, setPolicyValidationResult] = useState(\n initialPolicyValidationState,\n );\n\n const loadingRef = useRef<ReturnType<typeof setTimeout>>(null);\n usePolicyValidationResult(\n validationPolicy,\n value ?? \"\",\n () => {\n if (isEmptyValue) {\n return;\n }\n\n loadingRef.current = setTimeout(() => {\n setPolicyValidationResult((r) => ({\n ...r,\n isValid: \"indeterminate\",\n }));\n }, 150);\n },\n ({ password, isValid, results }) => {\n if (loadingRef.current) {\n clearTimeout(loadingRef.current);\n }\n\n if (isEmptyValue) {\n setPolicyValidationResult(() => ({\n ...results,\n isValid: true,\n }));\n return;\n }\n\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\n const isInvalidFromValidationResult =\n !isEmptyValue && stateFromValidationResult?.isValid === false;\n const isInvalid = invalidFromProps \|\| isInvalidFromValidationResult;\n\n const setOptimisticPolicyValidationResult = (\n state: Partial<ResolvedPolicyValidationResult> = {},\n ) => {\n setPolicyValidationResult((currentState) => ({\n ...currentState,\n isValid: true,\n ...state,\n }));\n };\n\n const onPasswordGenerateHandler: ActionFn = async () => {\n const generatedPassword = await generatePassword(validationPolicy);\n setOptimisticPolicyValidationResult({\n ...initialPolicyValidationState,\n isValid: true,\n ruleResults: policyValidationResult.ruleResults.map((r) => ({\n ...r,\n isValid: true,\n })),\n });\n setIsPasswordRevealed(true);\n onChange(generatedPassword);\n };\n\n const onPasswordPasteHandler = (event: ClipboardEvent) => {\n const pastedValue = event.clipboardData?.getData(\"text\");\n if (typeof pastedValue === \"string\" && 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 tunnel: {\n id: \"button\",\n component: \"PasswordCreationField\",\n },\n size: \"m\",\n variant: \"plain\",\n color: \"secondary\",\n isDisabled: isDisabled,\n className: styles.button,\n },\n CopyButton: {\n tunnel: {\n id: \"button\",\n component: \"PasswordCreationField\",\n },\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 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={onChange}\n onPaste={onPasswordPasteHandler}\n className={clsx(className, fieldProps.className)}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isRequired={isRequired}\n >\n <FieldErrorCaptureContext>\n {latestValidationErrorText && (\n <FieldError>{latestValidationErrorText}</FieldError>\n )}\n <PropsContextProvider\n props={propsContext}\n dependencies={[\n isDisabled,\n isRequired,\n value,\n policyValidationResult,\n isEmptyValue,\n ]}\n >\n {children}\n <Aria.Group\n isDisabled={isDisabled}\n className={clsx(styles.inputGroup)}\n >\n <Aria.Input ref={ref} className={styles.input} />\n <Aria.Group className={styles.buttonContainer}>\n <TogglePasswordVisibilityButton\n className={styles.button}\n isVisible={isPasswordRevealed}\n isDisabled={isDisabled}\n onPress={togglePasswordVisibilityHandler}\n />\n <UiComponentTunnelExit\n id=\"button\"\n component=\"PasswordCreationField\"\n />\n </Aria.Group>\n <ComplexityIndicator\n key={value}\n isEmptyValue={isEmptyValue}\n isLoading={policyValidationResult.isValid === \"indeterminate\"}\n policyValidationResult={policyValidationResult}\n validationResultState={stateFromValidationResult}\n />\n </Aria.Group>\n {isValidFromValidationResult && (\n <FieldDescription>{latestValidationErrorText}</FieldDescription>\n )}\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </Aria.TextField>\n );\n },\n);\n\nexport default PasswordCreationField;\n"],"mappings":"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"}
1	+ {"version":3,"file":"PasswordCreationField.mjs","names":[],"sources":["../../../../../../../src/components/PasswordCreationField/PasswordCreationField.tsx"],"sourcesContent":["import {\n type PropsWithChildren,\n useState,\n type ClipboardEvent,\n useMemo,\n useRef,\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 { 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 { ValidationResultButton } from \"@/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton\";\nimport { PasswordGenerateButton } from \"@/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton\";\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 { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { FieldError } from \"@/components/FieldError\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport {\n useAriaAnnouncePasswordVisibility,\n useAriaAnnounceValidationState,\n} from \"@/components/PasswordCreationField/lib/ariaAnnounce\";\n\nexport interface PasswordCreationFieldProps\n extends\n PropsWithChildren<\n Omit<Aria.TextFieldProps, \"children\" \| \"value\" \| \"defaultValue\"> &\n Partial<Pick<Aria.FieldErrorRenderProps, \"validationErrors\">>\n >,\n FlowComponentProps<HTMLInputElement> {\n /* The password of a controlled field. /\n value?: string;\n /* Called with the password and its validity whenever the password changes. /\n onValidationResult?: (result: { password: string; isValid: boolean }) => void;\n /* The initial password of an uncontrolled field. /\n defaultValue?: string;\n /* The placeholder shown while the field is empty. /\n placeholder?: string;\n /\n The policy the password is validated against.\n \n @default defaultPasswordCreationPolicy\n /\n validationPolicy?: PolicyGenericDeclaration;\n}\n\nexport interface ResolvedPolicyValidationResult extends Omit<\n PolicyValidationResult,\n \"isValid\"\n> {\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 value,\n onChange,\n ...rest\n } = useControlledHostValueProps(props, \"\");\n\n const translate = useLocalizedStringFormatter(\n locales,\n \"PasswordCreationField\",\n );\n\n const validationPolicy = useMemo(\n () => Policy.fromDeclaration(validationPolicyFromProps),\n [validationPolicyFromProps],\n );\n\n const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n const initialPolicyValidationState: ResolvedPolicyValidationResult = {\n isValid: \"indeterminate\",\n complexity: {\n min: validationPolicy.minComplexity,\n actual: 4,\n warning: null,\n },\n ruleResults: [],\n };\n\n const [policyValidationResult, setPolicyValidationResult] = useState(\n initialPolicyValidationState,\n );\n\n const loadingRef = useRef<ReturnType<typeof setTimeout>>(null);\n usePolicyValidationResult(\n validationPolicy,\n value ?? \"\",\n () => {\n if (isEmptyValue) {\n return;\n }\n\n loadingRef.current = setTimeout(() => {\n setPolicyValidationResult((r) => ({\n ...r,\n isValid: \"indeterminate\",\n }));\n }, 150);\n },\n ({ password, isValid, results }) => {\n if (loadingRef.current) {\n clearTimeout(loadingRef.current);\n }\n\n if (isEmptyValue) {\n setPolicyValidationResult(() => ({\n ...results,\n isValid: true,\n }));\n return;\n }\n\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\n const isInvalidFromValidationResult =\n !isEmptyValue && stateFromValidationResult?.isValid === false;\n const isInvalid = invalidFromProps \|\| isInvalidFromValidationResult;\n\n // The field derives its invalid state from the policy validation, so the\n // hook has to see that state — not just the `isInvalid` prop — to describe\n // the input with the field error.\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldProps,\n fieldPropsContext,\n } = useFieldComponent({ ...props, isInvalid }, \"PasswordCreationField\");\n\n useAriaAnnounceValidationState(\n latestValidationErrorText,\n !isEmptyValue && policyValidationResult.isValid !== \"indeterminate\",\n );\n useAriaAnnouncePasswordVisibility(isPasswordRevealed);\n\n const setOptimisticPolicyValidationResult = (\n state: Partial<ResolvedPolicyValidationResult> = {},\n ) => {\n setPolicyValidationResult((currentState) => ({\n ...currentState,\n isValid: true,\n ...state,\n }));\n };\n\n const onPasswordGenerateHandler: ActionFn = async () => {\n const generatedPassword = await generatePassword(validationPolicy);\n setOptimisticPolicyValidationResult({\n ...initialPolicyValidationState,\n isValid: true,\n ruleResults: policyValidationResult.ruleResults.map((r) => ({\n ...r,\n isValid: true,\n })),\n });\n setIsPasswordRevealed(true);\n onChange(generatedPassword);\n };\n\n const onPasswordPasteHandler = (event: ClipboardEvent) => {\n const pastedValue = event.clipboardData?.getData(\"text\");\n if (typeof pastedValue === \"string\" && 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 tunnel: {\n id: \"button\",\n component: \"PasswordCreationField\",\n },\n size: \"m\",\n variant: \"plain\",\n color: \"secondary\",\n isDisabled: isDisabled,\n className: styles.button,\n },\n CopyButton: {\n tunnel: {\n id: \"button\",\n component: \"PasswordCreationField\",\n },\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 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 {...fieldProps}\n value={value}\n type={isPasswordRevealed ? \"text\" : \"password\"}\n onChange={onChange}\n onPaste={onPasswordPasteHandler}\n className={clsx(className, fieldProps.className)}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isRequired={isRequired}\n >\n <FieldErrorCaptureContext>\n {latestValidationErrorText && (\n <FieldError>{latestValidationErrorText}</FieldError>\n )}\n <PropsContextProvider\n props={propsContext}\n dependencies={[\n isDisabled,\n isRequired,\n value,\n policyValidationResult,\n isEmptyValue,\n ]}\n >\n {children}\n <Aria.Group\n isDisabled={isDisabled}\n className={clsx(styles.inputGroup)}\n >\n <Aria.Input ref={ref} className={styles.input} />\n <Aria.Group className={styles.buttonContainer}>\n <TogglePasswordVisibilityButton\n className={styles.button}\n isVisible={isPasswordRevealed}\n isDisabled={isDisabled}\n onPress={togglePasswordVisibilityHandler}\n />\n <UiComponentTunnelExit\n id=\"button\"\n component=\"PasswordCreationField\"\n />\n </Aria.Group>\n <ComplexityIndicator\n key={value}\n isEmptyValue={isEmptyValue}\n isLoading={policyValidationResult.isValid === \"indeterminate\"}\n policyValidationResult={policyValidationResult}\n validationResultState={stateFromValidationResult}\n />\n </Aria.Group>\n {isValidFromValidationResult && (\n <FieldDescription>{latestValidationErrorText}</FieldDescription>\n )}\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </Aria.TextField>\n );\n },\n);\n\nexport default PasswordCreationField;\n"],"mappings":"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"}

package/dist/js/packages/components/src/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton.mjs CHANGED Viewed

@@ -7,6 +7,7 @@ import __locale_default from "../../../../../../../_virtual/_28.locale.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton.tsx
+/** @internal */
 var PasswordGenerateButton = (props) => {
 	const { isDisabled, onGeneratePasswordAction } = props;
 	const translate = useLocalizedStringFormatter(__locale_default, "PasswordCreationField");
@@ -18,6 +19,7 @@ var PasswordGenerateButton = (props) => {
 			isDisabled,
 			variant: "plain",
 			color: "secondary",
+			"aria-label": translate.format("button.generate.label"),
 			children: translate.format("button.generate")
 		})
 	});

package/dist/js/packages/components/src/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PasswordGenerateButton.mjs","names":[],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./../../locales/*.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport { Action, type ActionFn } from \"@/components/Action\";\n\ninterface Props {\n isDisabled?: boolean;\n onGeneratePasswordAction?: ActionFn;\n}\n\nexport const PasswordGenerateButton: FC<Props> = (props) => {\n const { isDisabled, onGeneratePasswordAction } = props;\n const translate = useLocalizedStringFormatter(\n locales,\n \"PasswordCreationField\",\n );\n\n return (\n <Action onAction={onGeneratePasswordAction} showFeedback={false}>\n <Button\n data-component=\"generatePassword\"\n isDisabled={isDisabled}\n variant=\"plain\"\n color=\"secondary\"\n >\n {translate.format(\"button.generate\")}\n </Button>\n </Action>\n );\n};\n"],"mappings":"~~;;;;;;;;;AAWA~~,IAAa,0BAAqC,UAAU;CAC1D,MAAM,EAAE,YAAY,6BAA6B;CACjD,MAAM,YAAY,4BAChB,kBACA,uBACF;CAEA,OACE,oBAAC,QAAD;EAAQ,UAAU;EAA0B,cAAc;EACxD,UAAA,oBAAC,QAAD;GACE,kBAAe;GACH;GACZ,SAAQ;GACR,OAAM;~~GAEL~~,UAAA,UAAU,OAAO,iBAAiB;EAC7B,CAAA;CACF,CAAA;AAEZ"}
1	+ {"version":3,"file":"PasswordGenerateButton.mjs","names":[],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./../../locales/.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport { Action, type ActionFn } from \"@/components/Action\";\n\ninterface Props {\n isDisabled?: boolean;\n onGeneratePasswordAction?: ActionFn;\n}\n\n/* @internal */\nexport const PasswordGenerateButton: FC<Props> = (props) => {\n const { isDisabled, onGeneratePasswordAction } = props;\n const translate = useLocalizedStringFormatter(\n locales,\n \"PasswordCreationField\",\n );\n\n return (\n <Action onAction={onGeneratePasswordAction} showFeedback={false}>\n <Button\n data-component=\"generatePassword\"\n isDisabled={isDisabled}\n variant=\"plain\"\n color=\"secondary\"\n // The button sits in the label, where \"Generate\" alone does not say\n // what is generated.\n aria-label={translate.format(\"button.generate.label\")}\n >\n {translate.format(\"button.generate\")}\n </Button>\n </Action>\n );\n};\n"],"mappings":";;;;;;;;;;AAYA,IAAa,0BAAqC,UAAU;CAC1D,MAAM,EAAE,YAAY,6BAA6B;CACjD,MAAM,YAAY,4BAChB,kBACA,uBACF;CAEA,OACE,oBAAC,QAAD;EAAQ,UAAU;EAA0B,cAAc;EACxD,UAAA,oBAAC,QAAD;GACE,kBAAe;GACH;GACZ,SAAQ;GACR,OAAM;GAGN,cAAY,UAAU,OAAO,uBAAuB;GAEnD,UAAA,UAAU,OAAO,iBAAiB;EAC7B,CAAA;CACF,CAAA;AAEZ"}

package/dist/js/packages/components/src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.mjs CHANGED Viewed

@@ -7,12 +7,15 @@ import { Heading } from "../../../Heading/Heading.mjs";
 import { ContextualHelp } from "../../../ContextualHelp/ContextualHelp.mjs";
 import __locale_default from "../../../../../../../_virtual/_28.locale.mjs";
 import { ValidationResultEntry } from "../ValidationResultEntry/ValidationResultEntry.mjs";
-import "react";
+import ValidationResultButton_module_default from "./ValidationResultButton.module.mjs";
+import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.tsx
+/** @internal */
 var ValidationResultButton = (props) => {
 	const { policyValidationResult, isDisabled, isEmptyValue, className } = props;
 	const translate = useLocalizedStringFormatter(__locale_default, "PasswordCreationField");
+	const headingId = useId();
 	let validationResults = policyValidationResult?.ruleResults?.filter((r) => {
 		return isEmptyValue ? !r.isValid : true;
 	});
@@ -26,14 +29,17 @@ var ValidationResultButton = (props) => {
 			"data-component": "showPasswordRules",
 			isDisabled,
 			className
-		}), /* @__PURE__ */ jsxs(ContextualHelp, { children: [
-			/* @__PURE__ */ jsx(Heading, { children: translate.format("password.requirements.heading") }),
-			validationResultComponents.length === 0 && /* @__PURE__ */ jsx(ValidationResultEntry, {
+		}), /* @__PURE__ */ jsxs(ContextualHelp, { children: [/* @__PURE__ */ jsx(Heading, {
+			id: headingId,
+			children: translate.format("password.requirements.heading")
+		}), /* @__PURE__ */ jsx("ul", {
+			"aria-labelledby": headingId,
+			className: ValidationResultButton_module_default.validationResultList,
+			children: validationResultComponents.length === 0 ? /* @__PURE__ */ jsx(ValidationResultEntry, {
 				result: { isValid: true },
 				unspecifiedRules: true
-			}),
-			validationResultComponents
-		] })]
+			}) : validationResultComponents
+		})] })]
 	});
 };
 //#endregion

package/dist/js/packages/components/src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ValidationResultButton.mjs","names":[],"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"],"mappings":"~~;;;;;;;;;;;;AAoBA~~,IAAa,0BAAqC,UAAU;CAC1D,MAAM,EAAE,wBAAwB,YAAY,cAAc,cAAc;CAExE,MAAM,YAAY,4BAChB,kBACA,uBACF;~~CAEA~~,IAAI,oBAAoB,wBAAwB,aAAa,QAAQ,MAAM;EACzE,OAAO,eAAe,CAAC,EAAE,UAAU;CACrC,CAAC;CACD,IAAI,qBAAqB,kBAAkB,WAAW,KAAK,cAEzD,oBAAoB,wBAAwB;CAG9C,MAAM,6BACJ,mBAAmB,KAAK,QAAQ,UAAU;EACxC,OACE,oBAAC,uBAAD,EAEU,OACT,GAFM,GAAG,OAAO,WAAW,GAAG,OAE9B;CAEL,CAAC,KAAK,CAAC;CAET,OACE,qBAAC,uBAAD;EACE,SAAS,UAAU,OAAO,+BAA+B;EAD3D,UAAA,CAGE,oBAAC,QAAD;GACE,kBAAe;GACH;GACD;EACZ,CAAA,GACD,qBAAC,gBAAD,EAAA,UAAA~~;GACE~~,oBAAC,SAAD,~~EAAA~~,~~UAAU~~,UAAU,OAAO,+BAA+B,~~EAAW~~,~~CAAA~~;~~GACpE~~,2BAA2B,WAAW,~~KACrC~~,oBAAC,uBAAD;~~IAAuB~~,QAAQ,EAAE,SAAS,KAAK;~~IAAG~~,kBAAA;~~GAAkB~~,CAAA;~~GAErE;EACa~~,EAAA,CAAA,CACK;;AAE3B"}
1	+ {"version":3,"file":"ValidationResultButton.mjs","names":[],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.tsx"],"sourcesContent":["import { type FC, useId } 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\";\nimport styles from \"./ValidationResultButton.module.scss\";\n\ninterface Props extends PropsWithClassName {\n policyValidationResult?: ResolvedPolicyValidationResult;\n isDisabled?: boolean;\n isEmptyValue: boolean;\n}\n\n/* @internal /\nexport const ValidationResultButton: FC<Props> = (props) => {\n const { policyValidationResult, isDisabled, isEmptyValue, className } = props;\n\n const translate = useLocalizedStringFormatter(\n locales,\n \"PasswordCreationField\",\n );\n const headingId = useId();\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 id={headingId}>\n {translate.format(\"password.requirements.heading\")}\n </Heading>\n {/ A list, so a screen reader announces the requirements as one unit\n with their number — and each rule with its status. */}\n <ul aria-labelledby={headingId} className={styles.validationResultList}>\n {validationResultComponents.length === 0 ? (\n <ValidationResultEntry\n result={{ isValid: true }}\n unspecifiedRules\n />\n ) : (\n validationResultComponents\n )}\n </ul>\n </ContextualHelp>\n </ContextualHelpTrigger>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;AAsBA,IAAa,0BAAqC,UAAU;CAC1D,MAAM,EAAE,wBAAwB,YAAY,cAAc,cAAc;CAExE,MAAM,YAAY,4BAChB,kBACA,uBACF;CACA,MAAM,YAAY,MAAM;CAExB,IAAI,oBAAoB,wBAAwB,aAAa,QAAQ,MAAM;EACzE,OAAO,eAAe,CAAC,EAAE,UAAU;CACrC,CAAC;CACD,IAAI,qBAAqB,kBAAkB,WAAW,KAAK,cAEzD,oBAAoB,wBAAwB;CAG9C,MAAM,6BACJ,mBAAmB,KAAK,QAAQ,UAAU;EACxC,OACE,oBAAC,uBAAD,EAEU,OACT,GAFM,GAAG,OAAO,WAAW,GAAG,OAE9B;CAEL,CAAC,KAAK,CAAC;CAET,OACE,qBAAC,uBAAD;EACE,SAAS,UAAU,OAAO,+BAA+B;EAD3D,UAAA,CAGE,oBAAC,QAAD;GACE,kBAAe;GACH;GACD;EACZ,CAAA,GACD,qBAAC,gBAAD,EAAA,UAAA,CACE,oBAAC,SAAD;GAAS,IAAI;GACV,UAAA,UAAU,OAAO,+BAA+B;EAC1C,CAAA,GAGT,oBAAC,MAAD;GAAI,mBAAiB;GAAW,WAAW,sCAAO;GAC/C,UAAA,2BAA2B,WAAW,IACrC,oBAAC,uBAAD;IACE,QAAQ,EAAE,SAAS,KAAK;IACxB,kBAAA;GACD,CAAA,IAED;EAEA,CAAA,CACU,EAAA,CAAA,CACK;;AAE3B"}

package/dist/js/packages/components/src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.module.mjs ADDED Viewed

@@ -0,0 +1,9 @@
+"use client"
+/* */
+//#region src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.module.scss
+var validationResultList = "flow--password-creation-field--validation-result-button--validation-result-list";
+var ValidationResultButton_module_default = { validationResultList };
+//#endregion
+export { ValidationResultButton_module_default as default, validationResultList };
+//# sourceMappingURL=ValidationResultButton.module.mjs.map

package/dist/js/packages/components/src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.module.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ValidationResultButton.module.mjs","names":[],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.module.scss"],"sourcesContent":[".validationResultList {\n display: flex;\n flex-direction: column;\n row-gap: var(--password-creation-field--rule-to-rule-spacing);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry.mjs CHANGED Viewed

@@ -7,23 +7,31 @@ import __locale_default from "../../../../../../../_virtual/_28.locale.mjs";
 import generateValidationTranslation from "../../lib/generateValidationTranslation.mjs";
 import ValidationResultEntry_module_default from "./ValidationResultEntry.module.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as Aria from "react-aria-components";
 //#region src/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry.tsx
 /** @internal */
 var ValidationResultEntry = (props) => {
 	const { result, unspecifiedRules = false } = props;
 	const translate = useLocalizedStringFormatter(__locale_default, "PasswordCreationField");
-	const icon = /* @__PURE__ */ jsx(AlertIcon, { status: result.isValid ? "success" : "warning" });
+	const icon = /* @__PURE__ */ jsx(AlertIcon, {
+		status: result.isValid ? "success" : "warning",
+		"aria-label": void 0
+	});
+	const status = translate.format(result.isValid ? "password.requirements.rule.fulfilled" : "password.requirements.rule.unfulfilled");
 	let [translationKey, translationValues] = generateValidationTranslation(result, true);
 	if (unspecifiedRules) {
 		translationKey = `${translationKey}.unspecified`;
 		translationValues = {};
 	}
-	return /* @__PURE__ */ jsxs(Text, {
+	return /* @__PURE__ */ jsxs("li", {
 		className: ValidationResultEntry_module_default.validationResultEntry,
 		"data-rule": result.ruleType,
 		"data-rule-valid": result.isValid,
-		children: [icon, translate.format(translationKey, translationValues)]
-	}, translationKey);
+		children: [icon, /* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Aria.VisuallyHidden, {
+			elementType: "span",
+			children: `${status}: `
+		}), translate.format(translationKey, translationValues)] })]
+	});
 };
 //#endregion
 export { ValidationResultEntry, ValidationResultEntry as default };

package/dist/js/packages/components/src/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ValidationResultEntry.mjs","names":[],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { Text } from \"@/components/Text\";\nimport generateValidationTranslation from \"@/components/PasswordCreationField/lib/generateValidationTranslation\";\nimport locales from \"./../../locales/.locale.json\";\nimport styles from \"./ValidationResultEntry.module.scss\";\nimport type { RuleValidationResult } from \"@/integrations/@mittwald/password-tools-js\";\nimport AlertIcon from \"@/components/AlertIcon\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\n\ninterface Props {\n result: Partial<RuleValidationResult>;\n unspecifiedRules?: boolean;\n}\n\n/* @internal */\nexport const ValidationResultEntry: FC<Props> = (props) => {\n const { result, unspecifiedRules = false } = props;\n const translate = useLocalizedStringFormatter(\n locales,\n \"PasswordCreationField\",\n );\n\n const icon = <AlertIcon status={result.isValid ? \"success\" : \"warning\"} ~~/>;\~~n\n let [translationKey, translationValues] = generateValidationTranslation(\n result,\n true,\n );\n\n if (unspecifiedRules) {\n translationKey = `${translationKey}.unspecified`;\n translationValues = {};\n }\n\n return (\n <~~Text~~\n className={styles.validationResultEntry}\n data-rule={result.ruleType}\n data-rule-valid={result.isValid}\n ~~key={translationKey}\n~~ >\n {icon}\n {translate.format(translationKey, translationValues)}\n </Text>\n );\n};\n\nexport default ValidationResultEntry;\n"],"mappings":"~~;;;;;;;;;;;AAeA~~,IAAa,yBAAoC,UAAU;CACzD,MAAM,EAAE,QAAQ,mBAAmB,UAAU;CAC7C,MAAM,YAAY,4BAChB,kBACA,uBACF;CAEA,MAAM,~~OAAO~~,oBAAC,WAAD,~~EAAW,~~QAAQ,OAAO,UAAU,YAAY,~~UAAY~~,CAAA;~~CAEzE~~,IAAI,CAAC,gBAAgB,qBAAqB,8BACxC,QACA,IACF;CAEA,IAAI,kBAAkB;EACpB,iBAAiB,GAAG,eAAe;EACnC,oBAAoB,CAAC;CACvB;CAEA,OACE,qBAAC,MAAD;EACE,WAAW,qCAAO;EAClB,aAAW,OAAO;EAClB,mBAAiB,OAAO;EAH1B,UAAA,~~CAMG~~,~~MACA~~,UAAU,OAAO,gBAAgB,iBAAiB,CAC/C~~;CAJC~~,~~GAAA~~,~~cAID;AAEV~~"}
1	+ {"version":3,"file":"ValidationResultEntry.mjs","names":[],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { Text } from \"@/components/Text\";\nimport generateValidationTranslation from \"@/components/PasswordCreationField/lib/generateValidationTranslation\";\nimport locales from \"./../../locales/.locale.json\";\nimport styles from \"./ValidationResultEntry.module.scss\";\nimport type { RuleValidationResult } from \"@/integrations/@mittwald/password-tools-js\";\nimport AlertIcon from \"@/components/AlertIcon\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\n\ninterface Props {\n result: Partial<RuleValidationResult>;\n unspecifiedRules?: boolean;\n}\n\n/* @internal */\nexport const ValidationResultEntry: FC<Props> = (props) => {\n const { result, unspecifiedRules = false } = props;\n const translate = useLocalizedStringFormatter(\n locales,\n \"PasswordCreationField\",\n );\n\n const icon = (\n <AlertIcon\n status={result.isValid ? \"success\" : \"warning\"}\n // The status is spelled out as text right next to it, so the icon is\n // decorative. Overriding `AlertIcon`'s generic \"Status …\" label with\n // `undefined` is what makes `Icon` hide it from the accessibility tree.\n aria-label={undefined}\n />\n );\n\n const status = translate.format(\n result.isValid\n ? \"password.requirements.rule.fulfilled\"\n : \"password.requirements.rule.unfulfilled\",\n );\n\n let [translationKey, translationValues] = generateValidationTranslation(\n result,\n true,\n );\n\n if (unspecifiedRules) {\n translationKey = `${translationKey}.unspecified`;\n translationValues = {};\n }\n\n return (\n <li\n className={styles.validationResultEntry}\n data-rule={result.ruleType}\n data-rule-valid={result.isValid}\n >\n {icon}\n <Text>\n <Aria.VisuallyHidden elementType=\"span\">{`${status}: `}</Aria.VisuallyHidden>\n {translate.format(translationKey, translationValues)}\n </Text>\n </li>\n );\n};\n\nexport default ValidationResultEntry;\n"],"mappings":";;;;;;;;;;;;AAgBA,IAAa,yBAAoC,UAAU;CACzD,MAAM,EAAE,QAAQ,mBAAmB,UAAU;CAC7C,MAAM,YAAY,4BAChB,kBACA,uBACF;CAEA,MAAM,OACJ,oBAAC,WAAD;EACE,QAAQ,OAAO,UAAU,YAAY;EAIrC,cAAY,KAAA;CACb,CAAA;CAGH,MAAM,SAAS,UAAU,OACvB,OAAO,UACH,yCACA,wCACN;CAEA,IAAI,CAAC,gBAAgB,qBAAqB,8BACxC,QACA,IACF;CAEA,IAAI,kBAAkB;EACpB,iBAAiB,GAAG,eAAe;EACnC,oBAAoB,CAAC;CACvB;CAEA,OACE,qBAAC,MAAD;EACE,WAAW,qCAAO;EAClB,aAAW,OAAO;EAClB,mBAAiB,OAAO;EAH1B,UAAA,CAKG,MACD,qBAAC,MAAD,EAAA,UAAA,CACE,oBAAC,KAAK,gBAAN;GAAqB,aAAY;GAAQ,UAAA,GAAG,OAAO;EAAyB,CAAA,GAC3E,UAAU,OAAO,gBAAgB,iBAAiB,CAC/C,EAAA,CAAA,CACJ;;AAER"}

package/dist/js/packages/components/src/components/PasswordCreationField/lib/ariaAnnounce.mjs ADDED Viewed

@@ -0,0 +1,52 @@
+"use client"
+/* */
+import { useLocalizedStringFormatter } from "../../TranslationProvider/useLocalizedStringFormatter.mjs";
+import __locale_default from "../../../../../../_virtual/_28.locale.mjs";
+import { useEffect, useRef } from "react";
+import { announce } from "@react-aria/live-announcer";
+//#region src/components/PasswordCreationField/lib/ariaAnnounce.ts
+/**
+* Announces the current validation message — which rule the password misses, or
+* that it is secure.
+*
+* The same text is wired to the field via `aria-describedby`, but a description
+* is only read when the field receives focus. The field keeps focus while the
+* password is typed, so without a live region a screen reader reports the field
+* as invalid and never says why.
+*
+* @internal
+*/
+var useAriaAnnounceValidationState = (text, isAnnounceable) => {
+	const lastAnnouncedText = useRef(void 0);
+	useEffect(() => {
+		if (!isAnnounceable || !text) {
+			lastAnnouncedText.current = void 0;
+			return;
+		}
+		if (text === lastAnnouncedText.current) return;
+		lastAnnouncedText.current = text;
+		announce(text, "polite");
+	}, [text, isAnnounceable]);
+};
+/**
+* Announces that the password became visible or hidden. The toggle button keeps
+* focus, and a screen reader does not report that the input switched between
+* masked characters and plain text on its own.
+*
+* @internal
+*/
+var useAriaAnnouncePasswordVisibility = (isRevealed) => {
+	const formatter = useLocalizedStringFormatter(__locale_default, "PasswordCreationField");
+	const isInitialRender = useRef(true);
+	useEffect(() => {
+		if (isInitialRender.current) {
+			isInitialRender.current = false;
+			return;
+		}
+		announce(formatter.format(isRevealed ? "password.announce.revealed" : "password.announce.hidden"), "polite");
+	}, [isRevealed]);
+};
+//#endregion
+export { useAriaAnnouncePasswordVisibility, useAriaAnnounceValidationState };
+//# sourceMappingURL=ariaAnnounce.mjs.map

package/dist/js/packages/components/src/components/PasswordCreationField/lib/ariaAnnounce.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ariaAnnounce.mjs","names":[],"sources":["../../../../../../../../src/components/PasswordCreationField/lib/ariaAnnounce.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { announce } from \"@react-aria/live-announcer\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./../locales/*.locale.json\";\n\n/**\n * Announces the current validation message — which rule the password misses, or\n * that it is secure.\n *\n * The same text is wired to the field via `aria-describedby`, but a description\n * is only read when the field receives focus. The field keeps focus while the\n * password is typed, so without a live region a screen reader reports the field\n * as invalid and never says why.\n *\n * @internal\n */\nexport const useAriaAnnounceValidationState = (\n text: string | undefined,\n isAnnounceable: boolean,\n): void => {\n const lastAnnouncedText = useRef<string>(undefined);\n\n useEffect(() => {\n if (!isAnnounceable || !text) {\n // Announce the text again when it comes back after an empty field or a\n // pending validation.\n lastAnnouncedText.current = undefined;\n return;\n }\n\n if (text === lastAnnouncedText.current) {\n return;\n }\n\n lastAnnouncedText.current = text;\n announce(text, \"polite\");\n }, [text, isAnnounceable]);\n};\n\n/**\n * Announces that the password became visible or hidden. The toggle button keeps\n * focus, and a screen reader does not report that the input switched between\n * masked characters and plain text on its own.\n *\n * @internal\n */\nexport const useAriaAnnouncePasswordVisibility = (\n isRevealed: boolean,\n): void => {\n const formatter = useLocalizedStringFormatter(\n locales,\n \"PasswordCreationField\",\n );\n const isInitialRender = useRef(true);\n\n useEffect(() => {\n if (isInitialRender.current) {\n isInitialRender.current = false;\n return;\n }\n\n announce(\n formatter.format(\n isRevealed ? \"password.announce.revealed\" : \"password.announce.hidden\",\n ),\n \"polite\",\n );\n }, [isRevealed]);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgBA,IAAa,kCACX,MACA,mBACS;CACT,MAAM,oBAAoB,OAAe,KAAA,CAAS;CAElD,gBAAgB;EACd,IAAI,CAAC,kBAAkB,CAAC,MAAM;GAG5B,kBAAkB,UAAU,KAAA;GAC5B;EACF;EAEA,IAAI,SAAS,kBAAkB,SAC7B;EAGF,kBAAkB,UAAU;EAC5B,SAAS,MAAM,QAAQ;CACzB,GAAG,CAAC,MAAM,cAAc,CAAC;AAC3B;;;;;;;;AASA,IAAa,qCACX,eACS;CACT,MAAM,YAAY,4BAChB,kBACA,uBACF;CACA,MAAM,kBAAkB,OAAO,IAAI;CAEnC,gBAAgB;EACd,IAAI,gBAAgB,SAAS;GAC3B,gBAAgB,UAAU;GAC1B;EACF;EAEA,SACE,UAAU,OACR,aAAa,+BAA+B,0BAC9C,GACA,QACF;CACF,GAAG,CAAC,UAAU,CAAC;AACjB"}

package/dist/js/packages/components/src/components/PasswordCreationField/lib/generateValidationTranslation.mjs CHANGED Viewed

@@ -14,6 +14,7 @@ var generateTranslationString = (rule, shortVersion = false) => {
 	else finalTranslationString = translateString;
 	return shortVersion ? `${finalTranslationString}.short` : finalTranslationString;
 };
+/** @internal */
 var generateValidationTranslation = (r, shotVersion = false) => {
 	const translationKey = generateTranslationString(r, shotVersion);
 	if (r.ruleType === RuleType.char && r.chars) return [translationKey, {

package/dist/js/packages/components/src/components/PasswordCreationField/lib/generateValidationTranslation.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"generateValidationTranslation.mjs","names":[],"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: string;\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"],"mappings":";;;;AAKA,IAAM,6BACJ,MACA,eAAe,UACJ;CACX,IAAI,KAAK,gBACP,OAAO,cAAc,KAAK;CAE5B,MAAM,kBAAkB,cAAc,KAAK,YAAY;CACvD,IAAI;CAEJ,IACG,SAAS,QAAQ,KAAK,QAAQ,KAAA,KAC9B,SAAS,QAAQ,KAAK,QAAQ,KAAA,GAC/B;EACA,MAAM,2BAA2B,KAAK,kBAClC,KAAK,kBACL,KAAK,MACH,QACA;EAEN,IAAI,KAAK,YACP,yBAAyB,GAAG,gBAAgB,GAAG,KAAK,WAAW,GAAG;OAElE,yBAAyB,GAAG,gBAAgB,GAAG;CAEnD,OAAO,IAAI,KAAK,YACd,yBAAyB,GAAG,gBAAgB,GAAG,KAAK;MAEpD,yBAAyB;CAG3B,OAAO,eACH,GAAG,uBAAuB,UAC1B;AACN~~;AAEA~~,IAAa,iCACX,GACA,cAAc,UACsD;CACpE,MAAM,iBAAiB,0BAA0B,GAAG,WAAW;CAE/D,IAAI,EAAE,aAAa,SAAS,QAAQ,EAAE,OACpC,OAAO,CACL,gBACA;EAAE,GAAG;EAAG,OAAO,EAAE,MAAM,KAAK,MAAM,EAAE,IAAI,CAAC,CAAC,KAAK,EAAE;CAAE,CACrD;CAGF,OAAO,CACL,gBACA,CACF;AACF"}
1	+ {"version":3,"file":"generateValidationTranslation.mjs","names":[],"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: string;\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\n/** @internal */\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"],"mappings":";;;;AAKA,IAAM,6BACJ,MACA,eAAe,UACJ;CACX,IAAI,KAAK,gBACP,OAAO,cAAc,KAAK;CAE5B,MAAM,kBAAkB,cAAc,KAAK,YAAY;CACvD,IAAI;CAEJ,IACG,SAAS,QAAQ,KAAK,QAAQ,KAAA,KAC9B,SAAS,QAAQ,KAAK,QAAQ,KAAA,GAC/B;EACA,MAAM,2BAA2B,KAAK,kBAClC,KAAK,kBACL,KAAK,MACH,QACA;EAEN,IAAI,KAAK,YACP,yBAAyB,GAAG,gBAAgB,GAAG,KAAK,WAAW,GAAG;OAElE,yBAAyB,GAAG,gBAAgB,GAAG;CAEnD,OAAO,IAAI,KAAK,YACd,yBAAyB,GAAG,gBAAgB,GAAG,KAAK;MAEpD,yBAAyB;CAG3B,OAAO,eACH,GAAG,uBAAuB,UAC1B;AACN;;AAGA,IAAa,iCACX,GACA,cAAc,UACsD;CACpE,MAAM,iBAAiB,0BAA0B,GAAG,WAAW;CAE/D,IAAI,EAAE,aAAa,SAAS,QAAQ,EAAE,OACpC,OAAO,CACL,gBACA;EAAE,GAAG;EAAG,OAAO,EAAE,MAAM,KAAK,MAAM,EAAE,IAAI,CAAC,CAAC,KAAK,EAAE;CAAE,CACrD;CAGF,OAAO,CACL,gBACA,CACF;AACF"}

package/dist/js/packages/components/src/components/PasswordCreationField/lib/getStatusFromPolicyValidationResult.mjs CHANGED Viewed

@@ -1,6 +1,7 @@
 "use client"
 /* */
 //#region src/components/PasswordCreationField/lib/getStatusFromPolicyValidationResult.ts
+/** @internal */
 var getStatusFromPolicyValidationResult = (isValid, result) => {
 	if (isValid === true) {
 		if (result.complexity && result.complexity.actual === result.complexity.min && result.complexity.min !== 4) return "warning";

package/dist/js/packages/components/src/components/PasswordCreationField/lib/getStatusFromPolicyValidationResult.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"getStatusFromPolicyValidationResult.mjs","names":[],"sources":["../../../../../../../../src/components/PasswordCreationField/lib/getStatusFromPolicyValidationResult.ts"],"sourcesContent":["import type { ResolvedPolicyValidationResult } from \"@/components/PasswordCreationField/PasswordCreationField\";\nimport type { ComplexityStatus } from \"@/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator\";\n\nexport const getStatusFromPolicyValidationResult = (\n isValid: ResolvedPolicyValidationResult[\"isValid\"],\n result: ResolvedPolicyValidationResult,\n): ComplexityStatus => {\n if (isValid === true) {\n if (\n result.complexity &&\n result.complexity.actual === result.complexity.min &&\n result.complexity.min !== 4\n ) {\n return \"warning\";\n }\n\n return \"success\";\n } else if (isValid === \"indeterminate\") {\n return \"indeterminate\";\n }\n\n return \"danger\";\n};\n\nexport default getStatusFromPolicyValidationResult;\n"],"mappings":"~~;;;AAGA~~,IAAa,uCACX,SACA,WACqB;CACrB,IAAI,YAAY,MAAM;EACpB,IACE,OAAO,cACP,OAAO,WAAW,WAAW,OAAO,WAAW,OAC/C,OAAO,WAAW,QAAQ,GAE1B,OAAO;EAGT,OAAO;CACT,OAAO,IAAI,YAAY,iBACrB,OAAO;CAGT,OAAO;AACT"}
1	+ {"version":3,"file":"getStatusFromPolicyValidationResult.mjs","names":[],"sources":["../../../../../../../../src/components/PasswordCreationField/lib/getStatusFromPolicyValidationResult.ts"],"sourcesContent":["import type { ResolvedPolicyValidationResult } from \"@/components/PasswordCreationField/PasswordCreationField\";\nimport type { ComplexityStatus } from \"@/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator\";\n\n/** @internal */\nexport const getStatusFromPolicyValidationResult = (\n isValid: ResolvedPolicyValidationResult[\"isValid\"],\n result: ResolvedPolicyValidationResult,\n): ComplexityStatus => {\n if (isValid === true) {\n if (\n result.complexity &&\n result.complexity.actual === result.complexity.min &&\n result.complexity.min !== 4\n ) {\n return \"warning\";\n }\n\n return \"success\";\n } else if (isValid === \"indeterminate\") {\n return \"indeterminate\";\n }\n\n return \"danger\";\n};\n\nexport default getStatusFromPolicyValidationResult;\n"],"mappings":";;;;AAIA,IAAa,uCACX,SACA,WACqB;CACrB,IAAI,YAAY,MAAM;EACpB,IACE,OAAO,cACP,OAAO,WAAW,WAAW,OAAO,WAAW,OAC/C,OAAO,WAAW,QAAQ,GAE1B,OAAO;EAGT,OAAO;CACT,OAAO,IAAI,YAAY,iBACrB,OAAO;CAGT,OAAO;AACT"}

package/dist/js/packages/components/src/components/PasswordCreationField/lib/usePolicyValidationResult.mjs CHANGED Viewed

@@ -3,6 +3,7 @@
 import { startTransition, useEffect, useRef } from "react";
 import { useDebouncedCallback } from "use-debounce";
 //#region src/components/PasswordCreationField/lib/usePolicyValidationResult.ts
+/** @internal */
 var usePolicyValidationResult = (validationPolicy, password, onValidationStart, onValidationResult) => {
 	const cache = useRef(null);
 	const validatePassword = (pwd) => {

package/dist/js/packages/components/src/components/PasswordCreationField/lib/usePolicyValidationResult.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"usePolicyValidationResult.mjs","names":[],"sources":["../../../../../../../../src/components/PasswordCreationField/lib/usePolicyValidationResult.ts"],"sourcesContent":["import { startTransition, useEffect, useRef } from \"react\";\nimport type { Policy } from \"@/integrations/@mittwald/password-tools-js\";\nimport type { ResolvedPolicyValidationResult } from \"@/components/PasswordCreationField/PasswordCreationField\";\nimport { useDebouncedCallback } from \"use-debounce\";\n\nexport const usePolicyValidationResult = (\n validationPolicy: Policy,\n password: string,\n onValidationStart?: () => void,\n onValidationResult?: (data: {\n password: string;\n isValid: boolean;\n results: ResolvedPolicyValidationResult;\n }) => void,\n) => {\n const cache = useRef<{\n password: string;\n results: ResolvedPolicyValidationResult;\n } \| null>(null);\n\n const validatePassword = (pwd: string) => {\n onValidationStart?.();\n\n startTransition(async () => {\n if (cache.current?.password === pwd) {\n onValidationResult?.({\n password: cache.current.password,\n isValid: Boolean(cache.current.results.isValid),\n results: cache.current.results,\n });\n return;\n }\n\n const validationResult = await validationPolicy.validate(pwd);\n cache.current = { password: pwd, results: validationResult };\n onValidationResult?.({\n password: pwd,\n isValid: validationResult.isValid,\n results: validationResult,\n });\n });\n };\n\n const validatePasswordDebounce = useDebouncedCallback(validatePassword, 350, {\n trailing: true,\n });\n\n useEffect(() => {\n if (password) {\n validatePasswordDebounce(password);\n } else {\n validatePassword(password);\n }\n }, [password, validationPolicy]);\n};\n"],"mappings":"~~;;;;;AAKA~~,IAAa,6BACX,kBACA,UACA,mBACA,uBAKG;CACH,MAAM,QAAQ,OAGJ,IAAI;CAEd,MAAM,oBAAoB,QAAgB;EACxC,oBAAoB;EAEpB,gBAAgB,YAAY;GAC1B,IAAI,MAAM,SAAS,aAAa,KAAK;IACnC,qBAAqB;KACnB,UAAU,MAAM,QAAQ;KACxB,SAAS,QAAQ,MAAM,QAAQ,QAAQ,OAAO;KAC9C,SAAS,MAAM,QAAQ;IACzB,CAAC;IACD;GACF;GAEA,MAAM,mBAAmB,MAAM,iBAAiB,SAAS,GAAG;GAC5D,MAAM,UAAU;IAAE,UAAU;IAAK,SAAS;GAAiB;GAC3D,qBAAqB;IACnB,UAAU;IACV,SAAS,iBAAiB;IAC1B,SAAS;GACX,CAAC;EACH,CAAC;CACH;CAEA,MAAM,2BAA2B,qBAAqB,kBAAkB,KAAK,EAC3E,UAAU,KACZ,CAAC;CAED,gBAAgB;EACd,IAAI,UACF,yBAAyB,QAAQ;OAEjC,iBAAiB,QAAQ;CAE7B,GAAG,CAAC,UAAU,gBAAgB,CAAC;AACjC"}
1	+ {"version":3,"file":"usePolicyValidationResult.mjs","names":[],"sources":["../../../../../../../../src/components/PasswordCreationField/lib/usePolicyValidationResult.ts"],"sourcesContent":["import { startTransition, useEffect, useRef } from \"react\";\nimport type { Policy } from \"@/integrations/@mittwald/password-tools-js\";\nimport type { ResolvedPolicyValidationResult } from \"@/components/PasswordCreationField/PasswordCreationField\";\nimport { useDebouncedCallback } from \"use-debounce\";\n\n/** @internal */\nexport const usePolicyValidationResult = (\n validationPolicy: Policy,\n password: string,\n onValidationStart?: () => void,\n onValidationResult?: (data: {\n password: string;\n isValid: boolean;\n results: ResolvedPolicyValidationResult;\n }) => void,\n) => {\n const cache = useRef<{\n password: string;\n results: ResolvedPolicyValidationResult;\n } \| null>(null);\n\n const validatePassword = (pwd: string) => {\n onValidationStart?.();\n\n startTransition(async () => {\n if (cache.current?.password === pwd) {\n onValidationResult?.({\n password: cache.current.password,\n isValid: Boolean(cache.current.results.isValid),\n results: cache.current.results,\n });\n return;\n }\n\n const validationResult = await validationPolicy.validate(pwd);\n cache.current = { password: pwd, results: validationResult };\n onValidationResult?.({\n password: pwd,\n isValid: validationResult.isValid,\n results: validationResult,\n });\n });\n };\n\n const validatePasswordDebounce = useDebouncedCallback(validatePassword, 350, {\n trailing: true,\n });\n\n useEffect(() => {\n if (password) {\n validatePasswordDebounce(password);\n } else {\n validatePassword(password);\n }\n }, [password, validationPolicy]);\n};\n"],"mappings":";;;;;;AAMA,IAAa,6BACX,kBACA,UACA,mBACA,uBAKG;CACH,MAAM,QAAQ,OAGJ,IAAI;CAEd,MAAM,oBAAoB,QAAgB;EACxC,oBAAoB;EAEpB,gBAAgB,YAAY;GAC1B,IAAI,MAAM,SAAS,aAAa,KAAK;IACnC,qBAAqB;KACnB,UAAU,MAAM,QAAQ;KACxB,SAAS,QAAQ,MAAM,QAAQ,QAAQ,OAAO;KAC9C,SAAS,MAAM,QAAQ;IACzB,CAAC;IACD;GACF;GAEA,MAAM,mBAAmB,MAAM,iBAAiB,SAAS,GAAG;GAC5D,MAAM,UAAU;IAAE,UAAU;IAAK,SAAS;GAAiB;GAC3D,qBAAqB;IACnB,UAAU;IACV,SAAS,iBAAiB;IAC1B,SAAS;GACX,CAAC;EACH,CAAC;CACH;CAEA,MAAM,2BAA2B,qBAAqB,kBAAkB,KAAK,EAC3E,UAAU,KACZ,CAAC;CAED,gBAAgB;EACd,IAAI,UACF,yBAAyB,QAAQ;OAEjC,iBAAiB,QAAQ;CAE7B,GAAG,CAAC,UAAU,gBAAgB,CAAC;AACjC"}

package/dist/js/packages/components/src/components/Popover/Popover.module.mjs CHANGED Viewed

@@ -4,14 +4,16 @@
 var popover = "flow--popover";
 var content = "flow--popover--content";
 var tip = "flow--popover--tip";
+var tipIcon = "flow--popover--tip-icon";
 var Popover_module_default = {
 	"non-modal": "flow--popover--non-modal",
 	popover,
 	content,
 	tip,
+	tipIcon,
 	"popover-slide": "flow--popover--popover-slide"
 };
 //#endregion
-export { content, Popover_module_default as default, popover, tip };
+export { content, Popover_module_default as default, popover, tip, tipIcon };
 //# sourceMappingURL=Popover.module.mjs.map

package/dist/js/packages/components/src/components/Popover/Popover.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Popover.module.mjs","names":[],"sources":["../../../../../../../src/components/Popover/Popover.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n/* Variants /\n\n/\n * A non-modal popover stays in the document and scrolls with the page, so the\n * height react-aria caps it at — the room left in the viewport when it was last\n * measured — is not a limit that applies to it. Anchored below the fold that\n * room is zero, and the hint renders as a two-pixel sliver.\n \n `useOverlayPosition` writes the value straight onto the element\n * (`overlay.style.maxHeight = …`) rather than returning it among its props, so\n * no React style can remove it and only `!important` reaches it.\n /\n.non-modal {\n max-height: none !important;\n}\n\n.popover {\n background-color: var(--popover--background-color);\n box-shadow: var(--popover--box-shadow);\n border-radius: var(--popover--corner-radius);\n display: flex;\n flex-direction: column;\n\n --size-px--s--negative: calc(var(--size-px--s) -1);\n\n min-width: var(--popover--min-width);\n border-width: var(--popover--border-width);\n border-style: var(--popover--border-style);\n border-color: var(--popover--border-color);\n max-width: calc(100% - 2 * var(--popover--viewport-padding));\n\n :where(.content) {\n @include scrollbar.scrollbar;\n\n overflow-y: auto;\n\n &:focus-visible {\n outline: none;\n }\n }\n\n .tip {\n width: var(--popover--tip-width);\n\n ~~svg~~ {\n display: block;\n fill: var(--popover--background-color);\n stroke: var(--popover--border-color);\n stroke-width: var(--popover--border-width);\n }\n }\n\n &[data-placement=\"top\"] {\n --origin: translateY(var(--size-px--s));\n\n &:has(.tip) {\n margin-bottom: var(--popover--tip-height);\n }\n }\n\n &[data-placement=\"bottom\"] {\n --origin: translateY(var(--size-px--s--negative));\n\n &:has(.tip) {\n margin-top: var(--popover--tip-height);\n }\n\n .tip ~~svg~~ {\n transform: rotate(180deg);\n }\n }\n\n &[data-placement=\"right\"] {\n --origin: translateX(var(--size-px--s--negative));\n\n &:has(.tip) {\n margin-inline-start: var(--popover--tip-height);\n }\n\n .tip ~~svg~~ {\n transform: rotate(90deg);\n }\n }\n\n &[data-placement=\"left\"] {\n --origin: translateX(var(--size-px--s));\n\n &:has(.tip) {\n margin-inline-end: var(--popover--tip-height);\n }\n\n .tip ~~svg~~ {\n transform: rotate(-90deg);\n }\n }\n\n &[data-entering] {\n animation: popover-slide var(--transition--duration--default);\n }\n\n &[data-exiting] {\n animation: popover-slide var(--transition--duration--default) reverse\n ease-in;\n pointer-events: none;\n }\n\n &:has(:global(.flow--options):empty) {\n display: none;\n }\n}\n\n@keyframes popover-slide {\n from {\n transform: var(--origin);\n opacity: 0;\n }\n\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Popover.module.mjs","names":[],"sources":["../../../../../../../src/components/Popover/Popover.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n/* Variants /\n\n/\n * A non-modal popover stays in the document and scrolls with the page, so the\n * height react-aria caps it at — the room left in the viewport when it was last\n * measured — is not a limit that applies to it. Anchored below the fold that\n * room is zero, and the hint renders as a two-pixel sliver.\n \n `useOverlayPosition` writes the value straight onto the element\n * (`overlay.style.maxHeight = …`) rather than returning it among its props, so\n * no React style can remove it and only `!important` reaches it.\n /\n.non-modal {\n max-height: none !important;\n\n /\n * The lowest level that still puts the popover in front of the page. Claiming\n * none at all left it in the `z-index: auto` group, where paint order is tree\n * order — so anything positioned that came later in the document painted over\n * it, and a `position: relative` written as a containing block for something\n * inside it was enough (a `TabNavigation` in a `LayoutCard` below the anchor,\n * #3232). Nothing an overlay can read tells that apart from a deliberate\n * claim, so it has to outrank the whole group.\n \n The cost is app chrome that claims level 1 itself: the popover comes later\n * in the document than a header does, so it now wins that tie. Chrome that has\n * to stay above a coach mark claims 2 — the docs site's own header does.\n /\n z-index: 1;\n}\n\n.popover {\n background-color: var(--popover--background-color);\n box-shadow: var(--popover--box-shadow);\n border-radius: var(--popover--corner-radius);\n display: flex;\n flex-direction: column;\n\n --size-px--s--negative: calc(var(--size-px--s) -1);\n\n min-width: var(--popover--min-width);\n border-width: var(--popover--border-width);\n border-style: var(--popover--border-style);\n border-color: var(--popover--border-color);\n max-width: calc(100% - 2 * var(--popover--viewport-padding));\n\n :where(.content) {\n @include scrollbar.scrollbar;\n\n overflow-y: auto;\n\n &:focus-visible {\n outline: none;\n }\n }\n\n .tip {\n width: var(--popover--tip-width);\n\n .tipIcon {\n display: block;\n fill: var(--popover--background-color);\n stroke: var(--popover--border-color);\n stroke-width: var(--popover--border-width);\n }\n }\n\n &[data-placement=\"top\"] {\n --origin: translateY(var(--size-px--s));\n\n &:has(.tip) {\n margin-bottom: var(--popover--tip-height);\n }\n }\n\n &[data-placement=\"bottom\"] {\n --origin: translateY(var(--size-px--s--negative));\n\n &:has(.tip) {\n margin-top: var(--popover--tip-height);\n }\n\n .tip .tipIcon {\n transform: rotate(180deg);\n }\n }\n\n &[data-placement=\"right\"] {\n --origin: translateX(var(--size-px--s--negative));\n\n &:has(.tip) {\n margin-inline-start: var(--popover--tip-height);\n }\n\n .tip .tipIcon {\n transform: rotate(90deg);\n }\n }\n\n &[data-placement=\"left\"] {\n --origin: translateX(var(--size-px--s));\n\n &:has(.tip) {\n margin-inline-end: var(--popover--tip-height);\n }\n\n .tip .tipIcon {\n transform: rotate(-90deg);\n }\n }\n\n &[data-entering] {\n animation: popover-slide var(--transition--duration--default);\n }\n\n &[data-exiting] {\n animation: popover-slide var(--transition--duration--default) reverse\n ease-in;\n pointer-events: none;\n }\n\n &:has(:global(.flow--options):empty) {\n display: none;\n }\n}\n\n@keyframes popover-slide {\n from {\n transform: var(--origin);\n opacity: 0;\n }\n\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Popover/components/NonModalPopoverContent/NonModalPopoverContent.mjs CHANGED Viewed

@@ -4,9 +4,10 @@ import Popover_module_default from "../../Popover.module.mjs";
 import { popoverViewportPadding } from "../../viewportPadding.mjs";
 import { popoverWidthStyle } from "../../widthStyle.mjs";
 import clsx from "clsx";
-import { useEffect, useId, useRef, useState } from "react";
+import { useEffect, useId, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useObjectRef, useOverlayPosition } from "react-aria";
+import { useEnterAnimation, useExitAnimation } from "@react-aria/utils";
+import { useObjectRef as useObjectRef$1, useOverlayPosition } from "react-aria";
 //#region src/components/Popover/components/NonModalPopoverContent/NonModalPopoverContent.tsx
 var useRepositionWhenAnchorMoves = (anchorRef, isOpen, updatePosition) => {
 	useEffect(() => {
@@ -22,7 +23,19 @@ var useRepositionWhenAnchorMoves = (anchorRef, isOpen, updatePosition) => {
 	]);
 };
 var NonModalPopoverContent = (props) => {
-	const { children, className, withTip, isOpen = false, width, id, onOpenChange, ref, triggerRef, placement: requestedPlacement, offset, crossOffset, maxHeight: ignoredMaxHeight, shouldFlip, shouldUpdatePosition, arrowBoundaryOffset, boundaryElement, ...rest } = props;
+	const { isOpen = false, ref, ...rest } = props;
+	const overlayRef = useObjectRef$1(ref);
+	const isExiting = useExitAnimation(overlayRef, isOpen);
+	if (!isOpen && !isExiting) return null;
+	return /* @__PURE__ */ jsx(NonModalPopoverContentInner, {
+		...rest,
+		overlayRef,
+		isOpen,
+		isExiting
+	});
+};
+var NonModalPopoverContentInner = (props) => {
+	const { children, className, withTip, isOpen = false, isExiting, width, id, onOpenChange, overlayRef, triggerRef, placement: requestedPlacement, offset, crossOffset, maxHeight: ignoredMaxHeight, shouldFlip, shouldUpdatePosition, arrowBoundaryOffset, boundaryElement, ...rest } = props;
 	const positionProps = {
 		placement: requestedPlacement,
 		offset,
@@ -32,9 +45,7 @@ var NonModalPopoverContent = (props) => {
 		arrowBoundaryOffset,
 		boundaryElement
 	};
-	const overlayRef = useObjectRef(ref);
 	const arrowRef = useRef(null);
-	const [isEntering, setIsEntering] = useState(true);
 	const detailsId = useId();
 	const { overlayProps, arrowProps, placement, updatePosition } = useOverlayPosition({
 		...positionProps,
@@ -46,6 +57,8 @@ var NonModalPopoverContent = (props) => {
 		containerPadding: popoverViewportPadding
 	});
 	useRepositionWhenAnchorMoves(triggerRef, isOpen, updatePosition);
+	const isPositioned = placement !== null;
+	const isEntering = useEnterAnimation(overlayRef, isPositioned);
 	useEffect(() => {
 		const trigger = triggerRef.current;
 		if (!isOpen || !trigger) return;
@@ -68,11 +81,6 @@ var NonModalPopoverContent = (props) => {
 		document.addEventListener("keydown", closeOnEscape);
 		return () => document.removeEventListener("keydown", closeOnEscape);
 	}, [isOpen, onOpenChange]);
-	useEffect(() => {
-		if (!isOpen) setIsEntering(true);
-	}, [isOpen]);
-	if (!isOpen) return null;
-	const isPositioned = placement !== null;
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
 		...overlayProps,
@@ -81,7 +89,7 @@ var NonModalPopoverContent = (props) => {
 		className: clsx(className, Popover_module_default["non-modal"]),
 		"data-placement": placement ?? void 0,
 		"data-entering": isEntering || void 0,
-		onAnimationEnd: () => setIsEntering(false),
+		"data-exiting": isExiting || void 0,
 		style: {
 			...overlayProps.style,
 			zIndex: void 0,
@@ -100,6 +108,7 @@ var NonModalPopoverContent = (props) => {
 				...placement ? { [placement]: "100%" } : {}
 			},
 			children: /* @__PURE__ */ jsx("svg", {
+				className: Popover_module_default.tipIcon,
 				width: 16,
 				height: 16,
 				viewBox: "0 0 16 16",

package/dist/js/packages/components/src/components/Popover/components/NonModalPopoverContent/NonModalPopoverContent.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NonModalPopoverContent.mjs","names":[],"sources":["../../../../../../../../../src/components/Popover/components/NonModalPopoverContent/NonModalPopoverContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref, RefObject } from \"react\";\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { useObjectRef, useOverlayPosition } from \"react-aria\";\nimport type { Placement } from \"react-aria\";\nimport styles from \"../../Popover.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { popoverViewportPadding } from \"../../viewportPadding\";\nimport { popoverWidthStyle } from \"../../widthStyle\";\n\nexport interface NonModalPopoverContentProps\n extends PropsWithChildren, PropsWithClassName {\n withTip?: boolean;\n isOpen?: boolean;\n width?: string \| number;\n placement?: Placement;\n offset?: number;\n crossOffset?: number;\n /** Swallowed on purpose — the stylesheet overrides `max-height` here. /\n maxHeight?: number;\n shouldFlip?: boolean;\n shouldUpdatePosition?: boolean;\n arrowBoundaryOffset?: number;\n boundaryElement?: Element;\n /* The id react-aria's trigger points its `aria-controls` at. /\n id?: string;\n onOpenChange: (isOpen: boolean) => void;\n ref?: Ref<HTMLElement>;\n triggerRef: RefObject<Element \| null>;\n}\n\n/\n * `useOverlayPosition` recalculates when the window resizes, when a scroll\n * container scrolls, and when the anchor or the popover changes size. It never\n * notices the anchor merely moving, because a popover normally opens on a user\n * interaction, long after the page settled.\n \n This one opens itself, so it places itself into a page that is still filling\n * in — and anything appearing above the anchor then pushes the anchor out from\n * under it. Remotely that is the normal case, not an edge case: the host\n * materializes the page in pieces as they arrive over the connection.\n \n Observing the ancestors covers it. In block layout an element moves because\n * something around it changed size, and a resized ancestor is the one signal\n * every such reflow has in common. What it does not catch is an ancestor of\n * fixed height rearranging inside — rare, and the next scroll or resize\n * corrects it.\n /\nconst useRepositionWhenAnchorMoves = (\n anchorRef: RefObject<Element \| null>,\n isOpen: boolean,\n updatePosition: () => void,\n): void => {\n useEffect(() => {\n // Read inside the effect. A coach mark that is open from its first render\n // renders before the anchor's ref is attached, and a ref filling in does not\n // re-render anything — so reading during render would see `null`, bail, and\n // leave nothing observing.\n const anchor = anchorRef.current;\n\n if (!isOpen \|\| !anchor) {\n return;\n }\n\n const observer = new ResizeObserver(updatePosition);\n\n for (\n let element = anchor.parentElement;\n element;\n element = element.parentElement\n ) {\n observer.observe(element);\n }\n\n return () => observer.disconnect();\n }, [anchorRef, isOpen, updatePosition]);\n};\n\n/\n * The non-modal popover deliberately skips react-aria's `usePopover`, which is\n * what a popover normally builds on. That hook couples three things Flow does\n * not want here: it locks page scrolling, it hides the rest of the page from\n * assistive tech, and — the reason this component exists — it closes the\n * popover on the first scroll, with no way to opt out.\n \n What is left is `useOverlayPosition` for the anchoring, public react-aria API.\n * The popover therefore tracks its trigger while the page scrolls, and its\n * content stays plain content: no role, no label, no focus of its own.\n \n It is not portalled either. A popover that is announced by nothing has to be\n * findable where it belongs, and a portal to the end of `<body>` puts it behind\n * the whole page in reading order — so it renders where it was written, right\n * next to what it points at. Being absolutely positioned it still takes no\n * space; what it does inherit is its surroundings, so an ancestor that clips\n * (`overflow: hidden`) or a stacking context can cut it off.\n /\nexport const NonModalPopoverContent: FC<NonModalPopoverContentProps> = (\n props,\n) => {\n const {\n children,\n className,\n withTip,\n isOpen = false,\n width,\n id,\n onOpenChange,\n ref,\n triggerRef,\n // Named one by one so that everything left over is a DOM prop and reaches\n // the element. Funnelling the rest into the positioning instead drops\n // `aria-`, `data-` and the like, which `Aria.Popover` forwards on the\n // modal path.\n placement: requestedPlacement,\n offset,\n crossOffset,\n maxHeight: ignoredMaxHeight,\n shouldFlip,\n shouldUpdatePosition,\n arrowBoundaryOffset,\n boundaryElement,\n ...rest\n } = props;\n\n void ignoredMaxHeight;\n\n const positionProps = {\n placement: requestedPlacement,\n offset,\n crossOffset,\n shouldFlip,\n shouldUpdatePosition,\n arrowBoundaryOffset,\n boundaryElement,\n };\n\n const overlayRef = useObjectRef(ref as Ref<HTMLDivElement>);\n const arrowRef = useRef<HTMLDivElement>(null);\n const [isEntering, setIsEntering] = useState(true);\n const detailsId = useId();\n\n const { overlayProps, arrowProps, placement, updatePosition } =\n useOverlayPosition({\n ...positionProps,\n targetRef: triggerRef,\n overlayRef,\n arrowRef,\n isOpen,\n offset: positionProps.offset ?? 8,\n containerPadding: popoverViewportPadding,\n });\n\n useRepositionWhenAnchorMoves(triggerRef, isOpen, updatePosition);\n\n /\n * Nothing announces this popover, so the trigger points at it: `aria-details`\n * tells assistive tech that there is related content and offers a way over to\n * it — unlike `aria-describedby`, which would flatten the popover into a\n * string and put its buttons out of reach.\n \n Set on the trigger element itself, because that element belongs to whoever\n * rendered it. Whatever it carried before is restored on the way out.\n /\n useEffect(() => {\n const trigger = triggerRef.current;\n\n if (!isOpen \|\| !trigger) {\n return;\n }\n\n const previous = trigger.getAttribute(\"aria-details\");\n trigger.setAttribute(\n \"aria-details\",\n previous ? `${previous} ${detailsId}` : detailsId,\n );\n\n return () => {\n if (previous === null) {\n trigger.removeAttribute(\"aria-details\");\n } else {\n trigger.setAttribute(\"aria-details\", previous);\n }\n };\n }, [isOpen, triggerRef, detailsId]);\n\n // Escape closes it. react-aria would do this through `useOverlay`, which is\n // part of the machinery this component leaves out.\n useEffect(() => {\n if (!isOpen) {\n return;\n }\n\n const closeOnEscape = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n onOpenChange(false);\n }\n };\n\n document.addEventListener(\"keydown\", closeOnEscape);\n return () => document.removeEventListener(\"keydown\", closeOnEscape);\n }, [isOpen, onOpenChange]);\n\n useEffect(() => {\n if (!isOpen) {\n setIsEntering(true);\n }\n }, [isOpen]);\n\n if (!isOpen) {\n return null;\n }\n\n /\n * Until it has a placement, `useOverlayPosition` parks the popover in the top\n * left corner (`position: fixed; top: 0; left: 0`) — it has not measured the\n * anchor yet. Rendered on a server that corner is what ships, and the popover\n * sits there until hydration measures; an anchor given by id is resolved a\n * frame later still. Either way it is visibly in the wrong place first and\n * jumps to the anchor after, so keep it out of sight until it knows where it\n * belongs. It stays in the DOM, which is what its place in the reading order\n * and `aria-details` depend on.\n /\n const isPositioned = placement !== null;\n\n return (\n <div\n {...rest}\n {...overlayProps}\n id={id}\n ref={overlayRef}\n className={clsx(className, styles[\"non-modal\"])}\n data-placement={placement ?? undefined}\n data-entering={isEntering \|\| undefined}\n onAnimationEnd={() => setIsEntering(false)}\n style={{\n ...overlayProps.style,\n /\n * Two things `useOverlayPosition` adds for an overlay portalled to the\n * end of `<body>` and pinned to the viewport. This one renders where it\n * stands and scrolls with the page, so both are wrong here.\n \n `z-index: 100000` would put it in front of the whole application — it\n * scrolled over the docs site's sticky header. Claiming no stacking\n * level leaves that to the page: it still covers the ordinary content\n * around it, and app chrome that sets a `z-index` keeps its place above.\n \n The `max-height` it caps the overlay at is wrong here for the same\n * reason, but it is written straight onto the element and has to be\n * undone in CSS — see `.non-modal` in Popover.module.scss.\n */\n zIndex: undefined,\n ...popoverWidthStyle(width),\n ...(isPositioned ? {} : { visibility: \"hidden\" }),\n }}\n >\n {withTip && (\n <div\n {...arrowProps}\n ref={arrowRef}\n className={styles.tip}\n data-placement={placement ?? undefined}\n style={{\n // What <Aria.OverlayArrow /> contributes on top of `arrowProps`:\n // it lifts the tip out of the flow and centres it on the anchor.\n position: \"absolute\",\n transform:\n placement === \"top\" \|\| placement === \"bottom\"\n ? \"translateX(-50%)\"\n : \"translateY(-50%)\",\n // `arrowProps.style` carries the offset along the popover's edge and\n // leaves the other axis `undefined` — which still overwrites. So the\n // edge the tip sits on is set last: spread first, it silently lost\n // `top: 100%` and the tip jumped to the popover's top edge, pointing\n // away from an anchor that was below it.\n ...arrowProps.style,\n ...(placement ? { [placement]: \"100%\" } : {}),\n }}\n >\n <svg width={16} height={16} viewBox=\"0 0 16 16\">\n <path d=\"M0 0 L8 8 L16 0\" />\n </svg>\n </div>\n )}\n <div className={styles.content} id={detailsId}>\n {children}\n </div>\n </div>\n );\n};\n\nexport default NonModalPopoverContent;\n"],"mappings":";;;;;;;;;;AAgDA,IAAM,gCACJ,WACA,QACA,mBACS;CACT,gBAAgB;EAKd,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,UAAU,CAAC,QACd;EAGF,MAAM,WAAW,IAAI,eAAe,cAAc;EAElD,KACE,IAAI,UAAU,OAAO,eACrB,SACA,UAAU,QAAQ,eAElB,SAAS,QAAQ,OAAO;EAG1B,aAAa,SAAS,WAAW;CACnC,GAAG;EAAC;EAAW;EAAQ;CAAc,CAAC;AACxC;AAoBA,IAAa,0BACX,UACG;CACH,MAAM,EACJ,UACA,WACA,SACA,SAAS,OACT,OACA,IACA,cACA,KACA,YAKA,WAAW,oBACX,QACA,aACA,WAAW,kBACX,YACA,sBACA,qBACA,iBACA,GAAG,SACD;CAIJ,MAAM,gBAAgB;EACpB,WAAW;EACX;EACA;EACA;EACA;EACA;EACA;CACF;CAEA,MAAM,aAAa,aAAa,GAA0B;CAC1D,MAAM,WAAW,OAAuB,IAAI;CAC5C,MAAM,CAAC,YAAY,iBAAiB,SAAS,IAAI;CACjD,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,cAAc,YAAY,WAAW,mBAC3C,mBAAmB;EACjB,GAAG;EACH,WAAW;EACX;EACA;EACA;EACA,QAAQ,cAAc,UAAU;EAChC,kBAAkB;CACpB,CAAC;CAEH,6BAA6B,YAAY,QAAQ,cAAc;CAW/D,gBAAgB;EACd,MAAM,UAAU,WAAW;EAE3B,IAAI,CAAC,UAAU,CAAC,SACd;EAGF,MAAM,WAAW,QAAQ,aAAa,cAAc;EACpD,QAAQ,aACN,gBACA,WAAW,GAAG,SAAS,GAAG,cAAc,SAC1C;EAEA,aAAa;GACX,IAAI,aAAa,MACf,QAAQ,gBAAgB,cAAc;QAEtC,QAAQ,aAAa,gBAAgB,QAAQ;EAEjD;CACF,GAAG;EAAC;EAAQ;EAAY;CAAS,CAAC;CAIlC,gBAAgB;EACd,IAAI,CAAC,QACH;EAGF,MAAM,iBAAiB,UAAyB;GAC9C,IAAI,MAAM,QAAQ,UAChB,aAAa,KAAK;EAEtB;EAEA,SAAS,iBAAiB,WAAW,aAAa;EAClD,aAAa,SAAS,oBAAoB,WAAW,aAAa;CACpE,GAAG,CAAC,QAAQ,YAAY,CAAC;CAEzB,gBAAgB;EACd,IAAI,CAAC,QACH,cAAc,IAAI;CAEtB,GAAG,CAAC,MAAM,CAAC;CAEX,IAAI,CAAC,QACH,OAAO;CAaT,MAAM,eAAe,cAAc;CAEnC,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,GAAI;EACA;EACJ,KAAK;EACL,WAAW,KAAK,WAAW,uBAAO,YAAY;EAC9C,kBAAgB,aAAa,KAAA;EAC7B,iBAAe,cAAc,KAAA;EAC7B,sBAAsB,cAAc,KAAK;EACzC,OAAO;GACL,GAAG,aAAa;GAehB,QAAQ,KAAA;GACR,GAAG,kBAAkB,KAAK;GAC1B,GAAI,eAAe,CAAC,IAAI,EAAE,YAAY,SAAS;EACjD;EA5BF,UAAA,CA8BG,WACC,oBAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACL,WAAW,uBAAO;GAClB,kBAAgB,aAAa,KAAA;GAC7B,OAAO;IAGL,UAAU;IACV,WACE,cAAc,SAAS,cAAc,WACjC,qBACA;IAMN,GAAG,WAAW;IACd,GAAI,YAAY,GAAG,YAAY,OAAO,IAAI,CAAC;GAC7C;GAEA,UAAA,oBAAC,OAAD;IAAK,OAAO;IAAI,QAAQ;IAAI,SAAQ;IAClC,UAAA,oBAAC,QAAD,EAAM,GAAE,kBAAmB,CAAA;GACxB,CAAA;EACF,CAAA,GAEP,oBAAC,OAAD;GAAK,WAAW,uBAAO;GAAS,IAAI;GACjC;EACE,CAAA,CACF;;AAET"}
1	+ {"version":3,"file":"NonModalPopoverContent.mjs","names":[],"sources":["../../../../../../../../../src/components/Popover/components/NonModalPopoverContent/NonModalPopoverContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref, RefObject } from \"react\";\nimport { useEffect, useId, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { useObjectRef, useOverlayPosition } from \"react-aria\";\nimport type { Placement } from \"react-aria\";\nimport { useEnterAnimation, useExitAnimation } from \"@react-aria/utils\";\nimport styles from \"../../Popover.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { popoverViewportPadding } from \"../../viewportPadding\";\nimport { popoverWidthStyle } from \"../../widthStyle\";\n\nexport interface NonModalPopoverContentProps\n extends PropsWithChildren, PropsWithClassName {\n withTip?: boolean;\n isOpen?: boolean;\n width?: string \| number;\n placement?: Placement;\n offset?: number;\n crossOffset?: number;\n /** Swallowed on purpose — the stylesheet overrides `max-height` here. /\n maxHeight?: number;\n shouldFlip?: boolean;\n shouldUpdatePosition?: boolean;\n arrowBoundaryOffset?: number;\n boundaryElement?: Element;\n /* The id react-aria's trigger points its `aria-controls` at. /\n id?: string;\n onOpenChange: (isOpen: boolean) => void;\n ref?: Ref<HTMLElement>;\n triggerRef: RefObject<Element \| null>;\n}\n\ninterface NonModalPopoverContentInnerProps extends Omit<\n NonModalPopoverContentProps,\n \"ref\"\n> {\n overlayRef: RefObject<HTMLDivElement \| null>;\n isExiting: boolean;\n}\n\n/\n * `useOverlayPosition` recalculates when the window resizes, when a scroll\n * container scrolls, and when the anchor or the popover changes size. It never\n * notices the anchor merely moving, because a popover normally opens on a user\n * interaction, long after the page settled.\n \n This one opens itself, so it places itself into a page that is still filling\n * in — and anything appearing above the anchor then pushes the anchor out from\n * under it. Remotely that is the normal case, not an edge case: the host\n * materializes the page in pieces as they arrive over the connection.\n \n Observing the ancestors covers it. In block layout an element moves because\n * something around it changed size, and a resized ancestor is the one signal\n * every such reflow has in common. What it does not catch is an ancestor of\n * fixed height rearranging inside — rare, and the next scroll or resize\n * corrects it.\n /\nconst useRepositionWhenAnchorMoves = (\n anchorRef: RefObject<Element \| null>,\n isOpen: boolean,\n updatePosition: () => void,\n): void => {\n useEffect(() => {\n // Read inside the effect. A coach mark that is open from its first render\n // renders before the anchor's ref is attached, and a ref filling in does not\n // re-render anything — so reading during render would see `null`, bail, and\n // leave nothing observing.\n const anchor = anchorRef.current;\n\n if (!isOpen \|\| !anchor) {\n return;\n }\n\n const observer = new ResizeObserver(updatePosition);\n\n for (\n let element = anchor.parentElement;\n element;\n element = element.parentElement\n ) {\n observer.observe(element);\n }\n\n return () => observer.disconnect();\n }, [anchorRef, isOpen, updatePosition]);\n};\n\n/\n * The non-modal popover deliberately skips react-aria's `usePopover`, which is\n * what a popover normally builds on. That hook couples three things Flow does\n * not want here: it locks page scrolling, it hides the rest of the page from\n * assistive tech, and — the reason this component exists — it closes the\n * popover on the first scroll, with no way to opt out.\n \n What is left is `useOverlayPosition` for the anchoring, public react-aria API.\n * The popover therefore tracks its trigger while the page scrolls, and its\n * content stays plain content: no role, no label, no focus of its own.\n \n It is not portalled either. A popover that is announced by nothing has to be\n * findable where it belongs, and a portal to the end of `<body>` puts it behind\n * the whole page in reading order — so it renders where it was written, right\n * next to what it points at. Being absolutely positioned it still takes no\n * space; what it does inherit is its surroundings, so an ancestor that clips\n * (`overflow: hidden`) or a stacking context can cut it off.\n \n Mounting is split across two components for the same reason `Aria.Popover`\n * splits it: the closing animation has to outlive `isOpen`, so the element that\n * plays it cannot be unmounted by the render that closes it. This outer half\n * keeps the ref and the mount decision and survives across open and closed; the\n * inner half holds the positioning and remounts on every open, which is what\n * resets the entry animation.\n /\nexport const NonModalPopoverContent: FC<NonModalPopoverContentProps> = (\n props,\n) => {\n const { isOpen = false, ref, ...rest } = props;\n\n const overlayRef = useObjectRef(ref as Ref<HTMLDivElement>);\n\n const isExiting = useExitAnimation(overlayRef, isOpen);\n\n if (!isOpen && !isExiting) {\n return null;\n }\n\n return (\n <NonModalPopoverContentInner\n {...rest}\n overlayRef={overlayRef}\n isOpen={isOpen}\n isExiting={isExiting}\n />\n );\n};\n\nconst NonModalPopoverContentInner: FC<NonModalPopoverContentInnerProps> = (\n props,\n) => {\n const {\n children,\n className,\n withTip,\n isOpen = false,\n isExiting,\n width,\n id,\n onOpenChange,\n overlayRef,\n triggerRef,\n // Named one by one so that everything left over is a DOM prop and reaches\n // the element. Funnelling the rest into the positioning instead drops\n // `aria-`, `data-` and the like, which `Aria.Popover` forwards on the\n // modal path.\n placement: requestedPlacement,\n offset,\n crossOffset,\n maxHeight: ignoredMaxHeight,\n shouldFlip,\n shouldUpdatePosition,\n arrowBoundaryOffset,\n boundaryElement,\n ...rest\n } = props;\n\n void ignoredMaxHeight;\n\n const positionProps = {\n placement: requestedPlacement,\n offset,\n crossOffset,\n shouldFlip,\n shouldUpdatePosition,\n arrowBoundaryOffset,\n boundaryElement,\n };\n\n const arrowRef = useRef<HTMLDivElement>(null);\n const detailsId = useId();\n\n const { overlayProps, arrowProps, placement, updatePosition } =\n useOverlayPosition({\n ...positionProps,\n targetRef: triggerRef,\n overlayRef,\n arrowRef,\n isOpen,\n offset: positionProps.offset ?? 8,\n containerPadding: popoverViewportPadding,\n });\n\n useRepositionWhenAnchorMoves(triggerRef, isOpen, updatePosition);\n\n /\n * Until it has a placement, `useOverlayPosition` parks the popover in the top\n * left corner (`position: fixed; top: 0; left: 0`) — it has not measured the\n * anchor yet. Rendered on a server that corner is what ships, and the popover\n * sits there until hydration measures; an anchor given by id is resolved a\n * frame later still. Either way it is visibly in the wrong place first and\n * jumps to the anchor after, so keep it out of sight until it knows where it\n * belongs. It stays in the DOM, which is what its place in the reading order\n * and `aria-details` depend on.\n /\n const isPositioned = placement !== null;\n\n // Held back until the popover knows where it belongs — an entry animation\n // that plays while the popover is still hidden is one the user never sees.\n const isEntering = useEnterAnimation(overlayRef, isPositioned);\n\n /\n * Nothing announces this popover, so the trigger points at it: `aria-details`\n * tells assistive tech that there is related content and offers a way over to\n * it — unlike `aria-describedby`, which would flatten the popover into a\n * string and put its buttons out of reach.\n \n Set on the trigger element itself, because that element belongs to whoever\n * rendered it. Whatever it carried before is restored on the way out.\n /\n useEffect(() => {\n const trigger = triggerRef.current;\n\n if (!isOpen \|\| !trigger) {\n return;\n }\n\n const previous = trigger.getAttribute(\"aria-details\");\n trigger.setAttribute(\n \"aria-details\",\n previous ? `${previous} ${detailsId}` : detailsId,\n );\n\n return () => {\n if (previous === null) {\n trigger.removeAttribute(\"aria-details\");\n } else {\n trigger.setAttribute(\"aria-details\", previous);\n }\n };\n }, [isOpen, triggerRef, detailsId]);\n\n // Escape closes it. react-aria would do this through `useOverlay`, which is\n // part of the machinery this component leaves out.\n useEffect(() => {\n if (!isOpen) {\n return;\n }\n\n const closeOnEscape = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n onOpenChange(false);\n }\n };\n\n document.addEventListener(\"keydown\", closeOnEscape);\n return () => document.removeEventListener(\"keydown\", closeOnEscape);\n }, [isOpen, onOpenChange]);\n\n return (\n <div\n {...rest}\n {...overlayProps}\n id={id}\n ref={overlayRef}\n className={clsx(className, styles[\"non-modal\"])}\n data-placement={placement ?? undefined}\n data-entering={isEntering \|\| undefined}\n data-exiting={isExiting \|\| undefined}\n style={{\n ...overlayProps.style,\n /\n * Two things `useOverlayPosition` adds for an overlay portalled to the\n * end of `<body>` and pinned to the viewport. This one renders where it\n * stands and scrolls with the page, so both are wrong here.\n \n `z-index: 100000` would put it in front of the whole application — it\n * scrolled over the docs site's sticky header. Dropping the value here\n * hands the level to CSS, where `.non-modal` claims the lowest one that\n * still clears ordinary page content.\n \n The `max-height` it caps the overlay at is wrong here for the same\n * reason, but it is written straight onto the element and has to be\n * undone in CSS — see `.non-modal` in Popover.module.scss.\n */\n zIndex: undefined,\n ...popoverWidthStyle(width),\n ...(isPositioned ? {} : { visibility: \"hidden\" }),\n }}\n >\n {withTip && (\n <div\n {...arrowProps}\n ref={arrowRef}\n className={styles.tip}\n data-placement={placement ?? undefined}\n style={{\n // What <Aria.OverlayArrow /> contributes on top of `arrowProps`:\n // it lifts the tip out of the flow and centres it on the anchor.\n position: \"absolute\",\n transform:\n placement === \"top\" \|\| placement === \"bottom\"\n ? \"translateX(-50%)\"\n : \"translateY(-50%)\",\n // `arrowProps.style` carries the offset along the popover's edge and\n // leaves the other axis `undefined` — which still overwrites. So the\n // edge the tip sits on is set last: spread first, it silently lost\n // `top: 100%` and the tip jumped to the popover's top edge, pointing\n // away from an anchor that was below it.\n ...arrowProps.style,\n ...(placement ? { [placement]: \"100%\" } : {}),\n }}\n >\n <svg\n className={styles.tipIcon}\n width={16}\n height={16}\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M0 0 L8 8 L16 0\" />\n </svg>\n </div>\n )}\n <div className={styles.content} id={detailsId}>\n {children}\n </div>\n </div>\n );\n};\n\nexport default NonModalPopoverContent;\n"],"mappings":"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"}

package/dist/js/packages/components/src/components/Popover/components/PopoverContent/PopoverContent.mjs CHANGED Viewed

@@ -48,6 +48,7 @@ var PopoverContent = (props) => {
 		children: [withTip && /* @__PURE__ */ jsx(Aria.OverlayArrow, {
 			className: Popover_module_default.tip,
 			children: /* @__PURE__ */ jsx("svg", {
+				className: Popover_module_default.tipIcon,
 				width: 16,
 				height: 16,
 				viewBox: "0 0 16 16",

package/dist/js/packages/components/src/components/Popover/components/PopoverContent/PopoverContent.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PopoverContent.mjs","names":[],"sources":["../../../../../../../../../src/components/Popover/components/PopoverContent/PopoverContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref, RefObject } from \"react\";\nimport { useContext } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"../../Popover.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\nimport { NonModalPopoverContent } from \"../NonModalPopoverContent\";\nimport { popoverViewportPadding } from \"../../viewportPadding\";\nimport { popoverWidthStyle } from \"../../widthStyle\";\n\nexport interface PopoverContentProps\n extends PropsWithChildren, PropsWithClassName {\n withTip?: boolean;\n isDialogContent?: boolean;\n isOpen?: boolean;\n width?: string \| number;\n /** @internal Set by `CoachMark`; see `PopoverProps`. /\n modality?: \"modal\" \| \"non-modal\";\n onOpenChange: (isOpen: boolean) => void;\n ref?: Ref<HTMLElement>;\n triggerRef?: RefObject<Element \| null>;\n}\n\n/\n @flr-generate all\n * @flr-ignore-props modality\n */\nexport const PopoverContent: FC<PopoverContentProps> = (props) => {\n const {\n children,\n className,\n isDialogContent = false,\n withTip,\n onOpenChange,\n ref,\n isOpen,\n width,\n modality,\n ...rest\n } = props;\n\n const isActivityActive = useIsActivityActive();\n\n // A trigger hands its popover a ref through the context react-aria sets up,\n // and the non-modal popover has to anchor itself with it.\n const popoverContext = useContext(Aria.PopoverContext);\n const triggerRefFromContext =\n popoverContext && \"triggerRef\" in popoverContext\n ? popoverContext.triggerRef\n : undefined;\n\n // The trigger points its `aria-controls` at this id while the popover is\n // open, so the popover has to carry it — react-aria's own only applies it\n // when the popover is a dialog.\n const idFromContext =\n popoverContext && \"id\" in popoverContext ? popoverContext.id : undefined;\n\n const ContentComponent = isDialogContent ? Aria.Dialog : \"div\";\n\n if (!isActivityActive) {\n return null;\n }\n\n if (modality === \"non-modal\") {\n const anchor = rest.triggerRef ?? triggerRefFromContext;\n\n // Without an anchor there is nothing to position against. react-aria's own\n // popover has the same requirement; it just throws further in.\n if (!anchor) {\n return null;\n }\n\n return (\n <NonModalPopoverContent\n {...rest}\n className={className}\n ref={ref}\n isOpen={isOpen}\n width={width}\n withTip={withTip}\n id={idFromContext}\n triggerRef={anchor}\n onOpenChange={onOpenChange}\n >\n {children}\n </NonModalPopoverContent>\n );\n }\n\n return (\n <Aria.Popover\n {...rest}\n className={className}\n containerPadding={popoverViewportPadding}\n ref={ref}\n isOpen={isOpen}\n onOpenChange={onOpenChange}\n style={popoverWidthStyle(width)}\n >\n {withTip && (\n <Aria.OverlayArrow className={styles.tip}>\n <svg width={16} height={16} viewBox=\"0 0 16 16\">\n <path d=\"M0 0 L8 8 L16 0\" />\n </svg>\n </Aria.OverlayArrow>\n )}\n <ContentComponent className={styles.content}>{children}</ContentComponent>\n </Aria.Popover>\n );\n};\n\nexport default PopoverContent;\n"],"mappings":";;;;;;;;;;;;;;;AA2BA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,WACA,kBAAkB,OAClB,SACA,cACA,KACA,QACA,OACA,UACA,GAAG,SACD;CAEJ,MAAM,mBAAmB,oBAAoB;CAI7C,MAAM,iBAAiB,WAAW,KAAK,cAAc;CACrD,MAAM,wBACJ,kBAAkB,gBAAgB,iBAC9B,eAAe,aACf,KAAA;CAKN,MAAM,gBACJ,kBAAkB,QAAQ,iBAAiB,eAAe,KAAK,KAAA;CAEjE,MAAM,mBAAmB,kBAAkB,KAAK,SAAS;CAEzD,IAAI,CAAC,kBACH,OAAO;CAGT,IAAI,aAAa,aAAa;EAC5B,MAAM,SAAS,KAAK,cAAc;EAIlC,IAAI,CAAC,QACH,OAAO;EAGT,OACE,oBAAC,wBAAD;GACE,GAAI;GACO;GACN;GACG;GACD;GACE;GACT,IAAI;GACJ,YAAY;GACE;GAEb;EACqB,CAAA;CAE5B;CAEA,OACE,qBAAC,KAAK,SAAN;EACE,GAAI;EACO;EACX,kBAAkB;EACb;EACG;EACM;EACd,OAAO,kBAAkB,KAAK;EAPhC,UAAA,CASG,WACC,oBAAC,KAAK,cAAN;GAAmB,WAAW,uBAAO;GACnC,UAAA,oBAAC,OAAD;~~IAAK~~,OAAO;~~IAAI~~,QAAQ;~~IAAI~~,SAAQ;~~IAClC~~,UAAA,oBAAC,QAAD,EAAM,GAAE,kBAAmB,CAAA;GACxB,CAAA;EACY,CAAA,GAErB,oBAAC,kBAAD;GAAkB,WAAW,uBAAO;GAAU;EAA2B,CAAA,CAC7D;;AAElB"}
1	+ {"version":3,"file":"PopoverContent.mjs","names":[],"sources":["../../../../../../../../../src/components/Popover/components/PopoverContent/PopoverContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref, RefObject } from \"react\";\nimport { useContext } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"../../Popover.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\nimport { NonModalPopoverContent } from \"../NonModalPopoverContent\";\nimport { popoverViewportPadding } from \"../../viewportPadding\";\nimport { popoverWidthStyle } from \"../../widthStyle\";\n\nexport interface PopoverContentProps\n extends PropsWithChildren, PropsWithClassName {\n withTip?: boolean;\n isDialogContent?: boolean;\n isOpen?: boolean;\n width?: string \| number;\n /** @internal Set by `CoachMark`; see `PopoverProps`. /\n modality?: \"modal\" \| \"non-modal\";\n onOpenChange: (isOpen: boolean) => void;\n ref?: Ref<HTMLElement>;\n triggerRef?: RefObject<Element \| null>;\n}\n\n/\n @flr-generate all\n * @flr-ignore-props modality\n */\nexport const PopoverContent: FC<PopoverContentProps> = (props) => {\n const {\n children,\n className,\n isDialogContent = false,\n withTip,\n onOpenChange,\n ref,\n isOpen,\n width,\n modality,\n ...rest\n } = props;\n\n const isActivityActive = useIsActivityActive();\n\n // A trigger hands its popover a ref through the context react-aria sets up,\n // and the non-modal popover has to anchor itself with it.\n const popoverContext = useContext(Aria.PopoverContext);\n const triggerRefFromContext =\n popoverContext && \"triggerRef\" in popoverContext\n ? popoverContext.triggerRef\n : undefined;\n\n // The trigger points its `aria-controls` at this id while the popover is\n // open, so the popover has to carry it — react-aria's own only applies it\n // when the popover is a dialog.\n const idFromContext =\n popoverContext && \"id\" in popoverContext ? popoverContext.id : undefined;\n\n const ContentComponent = isDialogContent ? Aria.Dialog : \"div\";\n\n if (!isActivityActive) {\n return null;\n }\n\n if (modality === \"non-modal\") {\n const anchor = rest.triggerRef ?? triggerRefFromContext;\n\n // Without an anchor there is nothing to position against. react-aria's own\n // popover has the same requirement; it just throws further in.\n if (!anchor) {\n return null;\n }\n\n return (\n <NonModalPopoverContent\n {...rest}\n className={className}\n ref={ref}\n isOpen={isOpen}\n width={width}\n withTip={withTip}\n id={idFromContext}\n triggerRef={anchor}\n onOpenChange={onOpenChange}\n >\n {children}\n </NonModalPopoverContent>\n );\n }\n\n return (\n <Aria.Popover\n {...rest}\n className={className}\n containerPadding={popoverViewportPadding}\n ref={ref}\n isOpen={isOpen}\n onOpenChange={onOpenChange}\n style={popoverWidthStyle(width)}\n >\n {withTip && (\n <Aria.OverlayArrow className={styles.tip}>\n <svg\n className={styles.tipIcon}\n width={16}\n height={16}\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M0 0 L8 8 L16 0\" />\n </svg>\n </Aria.OverlayArrow>\n )}\n <ContentComponent className={styles.content}>{children}</ContentComponent>\n </Aria.Popover>\n );\n};\n\nexport default PopoverContent;\n"],"mappings":";;;;;;;;;;;;;;;AA2BA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,WACA,kBAAkB,OAClB,SACA,cACA,KACA,QACA,OACA,UACA,GAAG,SACD;CAEJ,MAAM,mBAAmB,oBAAoB;CAI7C,MAAM,iBAAiB,WAAW,KAAK,cAAc;CACrD,MAAM,wBACJ,kBAAkB,gBAAgB,iBAC9B,eAAe,aACf,KAAA;CAKN,MAAM,gBACJ,kBAAkB,QAAQ,iBAAiB,eAAe,KAAK,KAAA;CAEjE,MAAM,mBAAmB,kBAAkB,KAAK,SAAS;CAEzD,IAAI,CAAC,kBACH,OAAO;CAGT,IAAI,aAAa,aAAa;EAC5B,MAAM,SAAS,KAAK,cAAc;EAIlC,IAAI,CAAC,QACH,OAAO;EAGT,OACE,oBAAC,wBAAD;GACE,GAAI;GACO;GACN;GACG;GACD;GACE;GACT,IAAI;GACJ,YAAY;GACE;GAEb;EACqB,CAAA;CAE5B;CAEA,OACE,qBAAC,KAAK,SAAN;EACE,GAAI;EACO;EACX,kBAAkB;EACb;EACG;EACM;EACd,OAAO,kBAAkB,KAAK;EAPhC,UAAA,CASG,WACC,oBAAC,KAAK,cAAN;GAAmB,WAAW,uBAAO;GACnC,UAAA,oBAAC,OAAD;IACE,WAAW,uBAAO;IAClB,OAAO;IACP,QAAQ;IACR,SAAQ;IAER,UAAA,oBAAC,QAAD,EAAM,GAAE,kBAAmB,CAAA;GACxB,CAAA;EACY,CAAA,GAErB,oBAAC,kBAAD;GAAkB,WAAW,uBAAO;GAAU;EAA2B,CAAA,CAC7D;;AAElB"}