npm - @mittwald/flow-react-components - Versions diffs - 1.6.0-next.5 → 1.6.0-next.51 - Mend

@mittwald/flow-react-components 1.6.0-next.5 → 1.6.0-next.51

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PasswordCreationField.mjs","names":["locales","styles","_Fragment"],"sources":["../../../../../../../src/components/PasswordCreationField/PasswordCreationField.tsx"],"sourcesContent":["import {\n type PropsWithChildren,\n useState,\n type ClipboardEvent,\n useCallback,\n useId,\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 { joinIds, 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 /\n A validation that outlasts the delay shows the loading bar, but keeps the\n * previous result until the new one arrives – dropping it flickered the\n * error and the bar color after every typing pause.\n /\n const [isValidationPending, setIsValidationPending] = useState(false);\n const loadingRef = useRef<ReturnType<typeof setTimeout>>(null);\n const { rememberValidationResult } = usePolicyValidationResult(\n validationPolicy,\n value ?? \"\",\n () => {\n if (isEmptyValue) {\n return;\n }\n\n if (loadingRef.current) {\n clearTimeout(loadingRef.current);\n }\n loadingRef.current = setTimeout(() => {\n setIsValidationPending(true);\n }, 150);\n },\n ({ password, isValid, results }) => {\n if (loadingRef.current) {\n clearTimeout(loadingRef.current);\n }\n setIsValidationPending(false);\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 {\n FieldErrorView,\n FieldErrorCaptureContext,\n wrapperProps,\n controlProps,\n fieldPropsContext,\n renderedFieldErrorId,\n skeletonProps,\n } = useFieldComponent(props, \"PasswordCreationField\");\n\n /\n The result for a valid password appears after the asynchronous policy\n * validation. react-aria resolves its description slot only when the\n * field's validity changes, so a result that appears while the field stays\n * valid (a generated password) was never linked. It gets its own id\n * instead, referenced only while it is rendered.\n \n A shown error replaces it: the FormField styles hide descriptions next to\n * an error, and a hidden description would still be announced.\n /\n const resultDescriptionId = useId();\n const [isResultDescriptionRendered, setIsResultDescriptionRendered] =\n useState(false);\n const resultDescriptionRef = useCallback((element: Element \| null) => {\n setIsResultDescriptionRendered(!!element);\n }, []);\n const describedBy = joinIds(\n isResultDescriptionRendered && resultDescriptionId,\n controlProps[\"aria-describedby\"],\n );\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 /\n The generator returns only passwords the policy accepts, so the rating\n * is set with the password instead of after the typing debounce. It is\n * the policy's own result: a guessed one (full strength) was overturned\n * by the real rating, e.g. to \"meets the minimum requirements\". Cached,\n * so the debounced validation of this password does not rate it again.\n */\n const generatedPasswordResult =\n await validationPolicy.validate(generatedPassword);\n rememberValidationResult(generatedPassword, generatedPasswordResult);\n setPolicyValidationResult(generatedPasswordResult);\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 {...skeletonProps}\n aria-describedby={describedBy}\n value={value}\n type={isPasswordRevealed ? \"text\" : \"password\"}\n onChange={onChange}\n onPaste={onPasswordPasteHandler}\n className={clsx(className, wrapperProps.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={\n isValidationPending \|\|\n policyValidationResult.isValid === \"indeterminate\"\n }\n policyValidationResult={policyValidationResult}\n validationResultState={stateFromValidationResult}\n isInvalid={invalidFromProps}\n />\n </Aria.Group>\n {isValidFromValidationResult && !renderedFieldErrorId && (\n // Out of react-aria's description slot, which would set its own\n // id – see `resultDescriptionId`.\n <Aria.TextContext.Provider value={null}>\n <FieldDescription\n id={resultDescriptionId}\n ref={resultDescriptionRef}\n >\n {latestValidationErrorText}\n </FieldDescription>\n </Aria.TextContext.Provider>\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":["locales","styles","_Fragment"],"sources":["../../../../../../../src/components/PasswordCreationField/PasswordCreationField.tsx"],"sourcesContent":["import {\n type PropsWithChildren,\n useState,\n type ClipboardEvent,\n useCallback,\n useId,\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 { joinIds, 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 /\n A validation that outlasts the delay shows the loading bar, but keeps the\n * previous result until the new one arrives – dropping it flickered the\n * error and the bar color after every typing pause.\n /\n const [isValidationPending, setIsValidationPending] = useState(false);\n const loadingRef = useRef<ReturnType<typeof setTimeout>>(null);\n const { rememberValidationResult } = usePolicyValidationResult(\n validationPolicy,\n value ?? \"\",\n () => {\n if (isEmptyValue) {\n return;\n }\n\n if (loadingRef.current) {\n clearTimeout(loadingRef.current);\n }\n loadingRef.current = setTimeout(() => {\n setIsValidationPending(true);\n }, 150);\n },\n ({ password, isValid, results }) => {\n if (loadingRef.current) {\n clearTimeout(loadingRef.current);\n }\n setIsValidationPending(false);\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 {\n FieldErrorView,\n FieldErrorCaptureContext,\n wrapperProps,\n controlProps,\n fieldPropsContext,\n renderedFieldErrorId,\n skeletonProps,\n } = useFieldComponent(props, \"PasswordCreationField\");\n\n /\n The result for a valid password appears after the asynchronous policy\n * validation. react-aria resolves its description slot only when the\n * field's validity changes, so a result that appears while the field stays\n * valid (a generated password) was never linked. It gets its own id\n * instead, referenced only while it is rendered.\n \n A shown error replaces it: the FormField styles hide descriptions next to\n * an error, and a hidden description would still be announced.\n /\n const resultDescriptionId = useId();\n const [isResultDescriptionRendered, setIsResultDescriptionRendered] =\n useState(false);\n const resultDescriptionRef = useCallback((element: Element \| null) => {\n setIsResultDescriptionRendered(!!element);\n }, []);\n const describedBy = joinIds(\n isResultDescriptionRendered && resultDescriptionId,\n controlProps[\"aria-describedby\"],\n );\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 /\n The generator returns only passwords the policy accepts, so the rating\n * is set with the password instead of after the typing debounce. It is\n * the policy's own result: a guessed one (full strength) was overturned\n * by the real rating, e.g. to \"meets the minimum requirements\". Cached,\n * so the debounced validation of this password does not rate it again.\n /\n const generatedPasswordResult =\n await validationPolicy.validate(generatedPassword);\n rememberValidationResult(generatedPassword, generatedPasswordResult);\n setPolicyValidationResult(generatedPasswordResult);\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 {...skeletonProps}\n aria-describedby={describedBy}\n value={value}\n type={isPasswordRevealed ? \"text\" : \"password\"}\n onChange={onChange}\n onPaste={onPasswordPasteHandler}\n className={clsx(wrapperProps.className, className)}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isRequired={isRequired}\n >\n <FieldErrorCaptureContext>\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={\n isValidationPending \|\|\n policyValidationResult.isValid === \"indeterminate\"\n }\n policyValidationResult={policyValidationResult}\n validationResultState={stateFromValidationResult}\n isInvalid={invalidFromProps}\n />\n </Aria.Group>\n {isValidFromValidationResult && !renderedFieldErrorId && (\n // Out of react-aria's description slot, which would set its own\n // id – see `resultDescriptionId`.\n <Aria.TextContext.Provider value={null}>\n <FieldDescription\n id={resultDescriptionId}\n ref={resultDescriptionRef}\n >\n {latestValidationErrorText}\n </FieldDescription>\n </Aria.TextContext.Provider>\n )}\n </PropsContextProvider>\n {/ After `children`: the field shows the first error in the tree, and\n a consumer's error wins over the policy's. */}\n {latestValidationErrorText && (\n <FieldError>{latestValidationErrorText}</FieldError>\n )}\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/PasswordCreationField.module.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/PasswordCreationField/PasswordCreationField.module.scss
+// src/components/PasswordCreationField/PasswordCreationField.module.scss
 var inputGroup = "flow--password-creation-field--input-group";
 var readonly = "flow--password-creation-field--readonly";
 var input = "flow--password-creation-field--input";
@@ -15,7 +15,6 @@ var PasswordCreationField_module_default = {
 	button,
 	"skeleton-text-shimmer": "flow--password-creation-field--skeleton-text-shimmer"
 };
-//#endregion
 export { button, buttonContainer, PasswordCreationField_module_default as default, input, inputGroup, readonly };
 //# sourceMappingURL=PasswordCreationField.module.mjs.map

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

@@ -4,7 +4,7 @@ import ComplexityIndicator_module_default from "./ComplexityIndicator.module.mjs
 import getStatusFromPolicyValidationResult from "../../lib/getStatusFromPolicyValidationResult.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.tsx
+// src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.tsx
 /** @internal */
 var ComplexityIndicator = (props) => {
 	const { policyValidationResult, validationResultState, isLoading, isEmptyValue, isInvalid } = props;
@@ -42,7 +42,6 @@ var ComplexityIndicator = (props) => {
 		})
 	});
 };
-//#endregion
 export { ComplexityIndicator, ComplexityIndicator as default };
 //# sourceMappingURL=ComplexityIndicator.mjs.map

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.module.scss
+// src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.module.scss
 var complexityIndicator = "flow--password-creation-field--complexity-indicator";
 var hide = "flow--password-creation-field--complexity-indicator--hide";
 var bar = "flow--password-creation-field--complexity-indicator--bar";
@@ -19,7 +19,6 @@ var ComplexityIndicator_module_default = {
 	loading,
 	shimmer
 };
-//#endregion
 export { bar, complexityIndicator, ComplexityIndicator_module_default as default, hide, loading, running, shimmer };
 //# sourceMappingURL=ComplexityIndicator.module.mjs.map

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

@@ -6,7 +6,7 @@ import { Action } from "../../../Action/Action.mjs";
 import __locale_default from "../../../../../../../_virtual/_30.locale.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton.tsx
+// src/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton.tsx
 /** @internal */
 var PasswordGenerateButton = (props) => {
 	const { isDisabled, onGeneratePasswordAction } = props;
@@ -24,7 +24,6 @@ var PasswordGenerateButton = (props) => {
 		})
 	});
 };
-//#endregion
 export { PasswordGenerateButton };
 //# sourceMappingURL=PasswordGenerateButton.mjs.map

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

@@ -10,7 +10,7 @@ import { Tooltip } from "../../../Tooltip/Tooltip.mjs";
 import __locale_default from "../../../../../../../_virtual/_30.locale.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton.tsx
+// src/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton.tsx
 /** @internal */
 var TogglePasswordVisibilityButton = ({ isVisible, isDisabled = false, onPress, className }) => {
 	const translate = useLocalizedStringFormatter(__locale_default, "PasswordCreationField");
@@ -31,7 +31,6 @@ var TogglePasswordVisibilityButton = ({ isVisible, isDisabled = false, onPress,
 		}) })
 	});
 };
-//#endregion
 export { TogglePasswordVisibilityButton, TogglePasswordVisibilityButton as default };
 //# sourceMappingURL=TogglePasswordVisibilityButton.mjs.map

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

@@ -10,7 +10,7 @@ import { ValidationResultEntry } from "../ValidationResultEntry/ValidationResult
 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
+// src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.tsx
 /** @internal */
 var ValidationResultButton = (props) => {
 	const { policyValidationResult, isDisabled, isEmptyValue, className } = props;
@@ -42,7 +42,6 @@ var ValidationResultButton = (props) => {
 		})] })]
 	});
 };
-//#endregion
 export { ValidationResultButton };
 //# sourceMappingURL=ValidationResultButton.mjs.map

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

@@ -1,9 +1,8 @@
 "use client"
 /* */
-//#region src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.module.scss
+// 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/ValidationResultEntry/ValidationResultEntry.mjs CHANGED Viewed

@@ -8,7 +8,7 @@ import generateValidationTranslation from "../../lib/generateValidationTranslati
 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
+// src/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry.tsx
 /** @internal */
 var ValidationResultEntry = (props) => {
 	const { result, unspecifiedRules = false } = props;
@@ -33,7 +33,6 @@ var ValidationResultEntry = (props) => {
 		}), translate.format(translationKey, translationValues)] })]
 	});
 };
-//#endregion
 export { ValidationResultEntry, ValidationResultEntry as default };
 //# sourceMappingURL=ValidationResultEntry.mjs.map

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

@@ -1,9 +1,8 @@
 "use client"
 /* */
-//#region src/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry.module.scss
+// src/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry.module.scss
 var validationResultEntry = "flow--password-creation-field--validation-result-entry";
 var ValidationResultEntry_module_default = { validationResultEntry };
-//#endregion
 export { ValidationResultEntry_module_default as default, validationResultEntry };
 //# sourceMappingURL=ValidationResultEntry.module.mjs.map

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

@@ -4,7 +4,7 @@ import { useLocalizedStringFormatter } from "../../TranslationProvider/useLocali
 import __locale_default from "../../../../../../_virtual/_30.locale.mjs";
 import { useEffect, useRef } from "react";
 import { announce } from "@react-aria/live-announcer";
-//#region src/components/PasswordCreationField/lib/ariaAnnounce.ts
+// src/components/PasswordCreationField/lib/ariaAnnounce.ts
 /**
 * Announces the current validation message — which rule the password misses, or
 * that it is secure.
@@ -46,7 +46,6 @@ var useAriaAnnouncePasswordVisibility = (isRevealed) => {
 		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/generateValidationTranslation.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 "use client"
 /* */
 import { RuleType } from "../../../../../../@mittwald/password-tools-js.mjs";
-//#region src/components/PasswordCreationField/lib/generateValidationTranslation.ts
+// src/components/PasswordCreationField/lib/generateValidationTranslation.ts
 var generateTranslationString = (rule, shortVersion = false) => {
 	if (rule.translationKey) return `validation.${rule.translationKey}`;
 	const translateString = `validation.${rule.ruleType ?? "general"}`;
@@ -23,7 +23,6 @@ var generateValidationTranslation = (r, shotVersion = false) => {
 	}];
 	return [translationKey, r];
 };
-//#endregion
 export { generateValidationTranslation as default, generateValidationTranslation };
 //# sourceMappingURL=generateValidationTranslation.mjs.map

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult.ts
+// src/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult.ts
 /** @internal */
 var getStateFromLatestPolicyValidationResult = (isEmptyValue, result) => {
 	if (result.isValid === "indeterminate") return;
@@ -23,7 +23,6 @@ var getStateFromLatestPolicyValidationResult = (isEmptyValue, result) => {
 		identifier: "securePassword"
 	};
 };
-//#endregion
 export { getStateFromLatestPolicyValidationResult as default, getStateFromLatestPolicyValidationResult };
 //# sourceMappingURL=getStateFromLatestPolicyValidationResult.mjs.map

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/PasswordCreationField/lib/getStatusFromPolicyValidationResult.ts
+// src/components/PasswordCreationField/lib/getStatusFromPolicyValidationResult.ts
 /** @internal */
 var getStatusFromPolicyValidationResult = (isValid, result) => {
 	if (isValid === true) {
@@ -9,7 +9,6 @@ var getStatusFromPolicyValidationResult = (isValid, result) => {
 	} else if (isValid === "indeterminate") return "indeterminate";
 	return "danger";
 };
-//#endregion
 export { getStatusFromPolicyValidationResult as default, getStatusFromPolicyValidationResult };
 //# sourceMappingURL=getStatusFromPolicyValidationResult.mjs.map

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

@@ -2,7 +2,7 @@
 /* */
 import { startTransition, useEffect, useRef } from "react";
 import { useDebouncedCallback } from "use-debounce";
-//#region src/components/PasswordCreationField/lib/usePolicyValidationResult.ts
+// src/components/PasswordCreationField/lib/usePolicyValidationResult.ts
 /** @internal */
 var usePolicyValidationResult = (validationPolicy, password, onValidationStart, onValidationResult) => {
 	const cache = useRef(null);
@@ -54,7 +54,6 @@ var usePolicyValidationResult = (validationPolicy, password, onValidationStart,
 	};
 	return { rememberValidationResult };
 };
-//#endregion
 export { usePolicyValidationResult };
 //# sourceMappingURL=usePolicyValidationResult.mjs.map

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

@@ -1,11 +1,10 @@
 "use client"
 /* */
 import { Generator } from "../../../../../../@mittwald/password-tools-js.mjs";
-//#region src/components/PasswordCreationField/worker/generatePassword.ts
+// src/components/PasswordCreationField/worker/generatePassword.ts
 var generatePassword = async (validationPolicy) => {
 	return new Generator(validationPolicy).generatePassword();
 };
-//#endregion
 export { generatePassword };
 //# sourceMappingURL=generatePassword.mjs.map

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

@@ -9,7 +9,7 @@ import PopoverContentView from "../../views/PopoverContentView.mjs";
 import clsx from "clsx";
 import { useCallback, useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/Popover/Popover.tsx
+// src/components/Popover/Popover.tsx
 var Popover = flowComponent("Popover", (props) => {
 	const { children, className, controller: controllerFromProps, onOpenChange: onOpenChangeFromProps, isOpen: isOpenFromProps, isDefaultOpen, defaultOpen, ...contentProps } = props;
 	const warnDeprecation = useWarnDeprecation();
@@ -44,7 +44,6 @@ var Popover = flowComponent("Popover", (props) => {
 		})
 	});
 });
-//#endregion
 export { Popover, Popover as default };
 //# sourceMappingURL=Popover.mjs.map

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/Popover/Popover.module.scss
+// src/components/Popover/Popover.module.scss
 var popover = "flow--popover";
 var content = "flow--popover--content";
 var tip = "flow--popover--tip";
@@ -13,7 +13,6 @@ var Popover_module_default = {
 	tipIcon,
 	"popover-slide": "flow--popover--popover-slide"
 };
-//#endregion
 export { content, Popover_module_default as default, popover, tip, tipIcon };
 //# sourceMappingURL=Popover.module.mjs.map

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

@@ -9,7 +9,7 @@ import { useEffect, useId, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEnterAnimation, useExitAnimation } from "@react-aria/utils";
 import { useObjectRef as useObjectRef$1, useOverlayPosition } from "react-aria";
-//#region src/components/Popover/components/NonModalPopoverContent/NonModalPopoverContent.tsx
+// src/components/Popover/components/NonModalPopoverContent/NonModalPopoverContent.tsx
 var useRepositionWhenAnchorMoves = (anchorRef, isOpen, updatePosition) => {
 	useEffect(() => {
 		const anchor = anchorRef.current;
@@ -87,7 +87,7 @@ var NonModalPopoverContentInner = (props) => {
 		...overlayProps,
 		id,
 		ref: overlayRef,
-		className: clsx(className, Popover_module_default["non-modal"]),
+		className: clsx(Popover_module_default["non-modal"], className),
 		"data-placement": placement ?? void 0,
 		"data-entering": isEntering || void 0,
 		"data-exiting": isExiting || void 0,
@@ -116,7 +116,6 @@ var NonModalPopoverContentInner = (props) => {
 		})]
 	});
 };
-//#endregion
 export { NonModalPopoverContent, NonModalPopoverContent as default };
 //# sourceMappingURL=NonModalPopoverContent.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NonModalPopoverContent.mjs","names":["useObjectRef","styles"],"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\";\nimport { PopoverTip } from \"../PopoverTip\";\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 <PopoverTip />\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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"}
1	+ {"version":3,"file":"NonModalPopoverContent.mjs","names":["useObjectRef","styles"],"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\";\nimport { PopoverTip } from \"../PopoverTip\";\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(styles[\"non-modal\"], className)}\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 <PopoverTip />\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

@@ -1,5 +1,6 @@
 "use client"
 /* */
+import { SectionHeadingReset } from "../../../Section/context.mjs";
 import { useIsActivityActive } from "../../../Activity/context.mjs";
 import Popover_module_default from "../../Popover.module.mjs";
 import { popoverViewportPadding } from "../../viewportPadding.mjs";
@@ -9,7 +10,7 @@ import { NonModalPopoverContent } from "../NonModalPopoverContent/NonModalPopove
 import { useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
-//#region src/components/Popover/components/PopoverContent/PopoverContent.tsx
+// src/components/Popover/components/PopoverContent/PopoverContent.tsx
 /**
 * @flr-generate all
 * @flr-ignore-props modality
@@ -21,6 +22,7 @@ var PopoverContent = (props) => {
 	const triggerRefFromContext = popoverContext && "triggerRef" in popoverContext ? popoverContext.triggerRef : void 0;
 	const idFromContext = popoverContext && "id" in popoverContext ? popoverContext.id : void 0;
 	const ContentComponent = isDialogContent ? Aria.Dialog : "div";
+	const content = /* @__PURE__ */ jsx(SectionHeadingReset, { children });
 	if (!isActivityActive) return null;
 	if (modality === "non-modal") {
 		const anchor = rest.triggerRef ?? triggerRefFromContext;
@@ -35,7 +37,7 @@ var PopoverContent = (props) => {
 			id: idFromContext,
 			triggerRef: anchor,
 			onOpenChange,
-			children
+			children: content
 		});
 	}
 	return /* @__PURE__ */ jsxs(Aria.Popover, {
@@ -51,11 +53,10 @@ var PopoverContent = (props) => {
 			children: /* @__PURE__ */ jsx(PopoverTip, {})
 		}), /* @__PURE__ */ jsx(ContentComponent, {
 			className: Popover_module_default.content,
-			children
+			children: content
 		})]
 	});
 };
-//#endregion
 export { PopoverContent, PopoverContent as default };
 //# sourceMappingURL=PopoverContent.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PopoverContent.mjs","names":["styles"],"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 { PopoverTip } from \"../PopoverTip\";\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 <PopoverTip />\n </Aria.OverlayArrow>\n )}\n <ContentComponent className={styles.content}>{~~children~~}</ContentComponent>\n </Aria.Popover>\n );\n};\n\nexport default PopoverContent;\n"],"mappings":"~~;;;;;;;;;;;;;;;;AA4BA~~,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,WAAWA,uBAAO;GACnC,UAAA,oBAAC,YAAD,CAAa,CAAA;EACI,CAAA,GAErB,oBAAC,kBAAD;GAAkB,WAAWA,uBAAO;GAAU;~~EAA2B~~,CAAA,~~CAC7D~~;;AAElB"}
1	+ {"version":3,"file":"PopoverContent.mjs","names":["styles"],"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 { SectionHeadingReset } from \"@/components/Section/context\";\nimport { NonModalPopoverContent } from \"../NonModalPopoverContent\";\nimport { PopoverTip } from \"../PopoverTip\";\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 const content = <SectionHeadingReset>{children}</SectionHeadingReset>;\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 {content}\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 <PopoverTip />\n </Aria.OverlayArrow>\n )}\n <ContentComponent className={styles.content}>{content}</ContentComponent>\n </Aria.Popover>\n );\n};\n\nexport default PopoverContent;\n"],"mappings":";;;;;;;;;;;;;;;;;AA6BA,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,MAAM,UAAU,oBAAC,qBAAD,EAAsB,SAA8B,CAAA;CAEpE,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,UAAA;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,WAAWA,uBAAO;GACnC,UAAA,oBAAC,YAAD,CAAa,CAAA;EACI,CAAA,GAErB,oBAAC,kBAAD;GAAkB,WAAWA,uBAAO;GAAU,UAAA;EAA0B,CAAA,CAC5D;;AAElB"}

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

@@ -2,7 +2,7 @@
 /* */
 import Popover_module_default from "../../Popover.module.mjs";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/Popover/components/PopoverTip/PopoverTip.tsx
+// src/components/Popover/components/PopoverTip/PopoverTip.tsx
 var PopoverTip = () => /* @__PURE__ */ jsx("svg", {
 	className: Popover_module_default.tipIcon,
 	width: 16,
@@ -11,7 +11,6 @@ var PopoverTip = () => /* @__PURE__ */ jsx("svg", {
 	"aria-hidden": true,
 	children: /* @__PURE__ */ jsx("path", { d: "M0 0 L8 8 L16 0" })
 });
-//#endregion
 export { PopoverTip };
 //# sourceMappingURL=PopoverTip.mjs.map

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

@@ -4,7 +4,7 @@ import { flowComponent } from "../../../../lib/componentFactory/flowComponent.mj
 import { OverlayTrigger } from "../../../OverlayTrigger/OverlayTrigger.mjs";
 import DialogTriggerView from "../../../../views/DialogTriggerView.mjs";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/Popover/components/PopoverTrigger/PopoverTrigger.tsx
+// src/components/Popover/components/PopoverTrigger/PopoverTrigger.tsx
 var PopoverTrigger = flowComponent("PopoverTrigger", (props) => {
 	const { children, ...triggerProps } = props;
 	return /* @__PURE__ */ jsx(OverlayTrigger, {
@@ -14,7 +14,6 @@ var PopoverTrigger = flowComponent("PopoverTrigger", (props) => {
 		children
 	});
 }, { type: "provider" });
-//#endregion
 export { PopoverTrigger, PopoverTrigger as default };
 //# sourceMappingURL=PopoverTrigger.mjs.map

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

@@ -1,7 +1,7 @@
 "use client"
 /* */
 import all_light_default from "../../../../design-tokens/dist/json-runtime/all-light.mjs";
-//#region src/components/Popover/viewportPadding.ts
+// src/components/Popover/viewportPadding.ts
 /**
 * The gap a popover keeps to the viewport edge. The stylesheet caps the
 * popover's width with it, `containerPadding` insets the position by it — and
@@ -10,7 +10,6 @@ import all_light_default from "../../../../design-tokens/dist/json-runtime/all-l
 * @internal
 */
 var popoverViewportPadding = Number.parseFloat(all_light_default.popover["viewport-padding"].value);
-//#endregion
 export { popoverViewportPadding };
 //# sourceMappingURL=viewportPadding.mjs.map

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/Popover/widthStyle.ts
+// src/components/Popover/widthStyle.ts
 /**
 * The inline style that carries a popover's `width`.
 *
@@ -20,7 +20,6 @@ var popoverWidthStyle = (width) => width === void 0 ? {} : {
 	width,
 	"--popover-content-max-width": "none"
 };
-//#endregion
 export { popoverWidthStyle };
 //# sourceMappingURL=widthStyle.mjs.map