npm - @mittwald/flow-react-components - Versions diffs - 1.5.0-next.4 → 1.5.0-next.40 - Mend

@mittwald/flow-react-components 1.5.0-next.4 → 1.5.0-next.40

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberField.mjs","names":[],"sources":["../../../../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./NumberField.module.scss\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport {\n IconChevronDown,\n IconChevronUp,\n IconMinus,\n IconPlus,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\n\nexport interface NumberFieldProps\n extends\n PropsWithChildren<Omit<Aria.NumberFieldProps, \"children\">>,\n FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const NumberField = flowComponent(\"NumberField\", (props) => {\n // `NaN` is what react-aria's number field state uses for \"no number\"\n const {\n children,\n className,\n isWheelDisabled = true,\n ref,\n ...rest\n } = useControlledHostValueProps(props, NaN);\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n ~~fieldProps~~,\n fieldPropsContext,\n } = useFieldComponent(props, \"NumberField\");\n\n const rootClassName = clsx(formFieldStyles.formField, className);\n\n return (\n <Aria.NumberField\n {...rest}\n isWheelDisabled={isWheelDisabled}\n className={clsx(rootClassName, ~~fieldProps~~.className)}\n >\n <PropsContextProvider props={fieldPropsContext}>\n <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n <FieldErrorView />\n </PropsContextProvider>\n <Aria.Group className={styles.group}>\n <Button\n ariaSlot=\"decrement\"\n className={styles.decrementButton}\n size=\"s\"\n variant=\"plain\"\n color=\"secondary\"\n >\n <IconChevronDown />\n <IconMinus className={styles.coarsePointerIcon} />\n </Button>\n <Aria.Input className={styles.input} ref={ref} />\n <Button\n ariaSlot=\"increment\"\n className={styles.incrementButton}\n size=\"s\"\n variant=\"plain\"\n color=\"secondary\"\n >\n <IconChevronUp />\n <IconPlus className={styles.coarsePointerIcon} />\n </Button>\n </Aria.Group>\n </Aria.NumberField>\n );\n});\n\nexport default NumberField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAwBA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CAEjE,MAAM,EACJ,UACA,WACA,kBAAkB,MAClB,KACA,GAAG,SACD,4BAA4B,OAAO,GAAG;CAE1C,MAAM,EACJ,gBACA,0BACA,~~YACA~~,sBACE,kBAAkB,OAAO,aAAa;CAE1C,MAAM,gBAAgB,~~KAAK~~,yBAAgB,WAAW,SAAS;CAE/D,OACE,qBAAC,KAAK,aAAN;EACE,GAAI;EACa;EACjB,WAAW,KAAK,eAAe,~~WAAW~~,SAAS;~~EAHrD~~,UAAA,~~CAKE~~,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA,GAC9D,oBAAC,gBAAD,CAAiB,CAAA,CACG;EACtB,CAAA,GAAA,qBAAC,KAAK,OAAN;GAAY,~~WAAW~~,2BAAO;GAA9B,UAAA;IACE,qBAAC,QAAD;KACE,UAAS;KACT,~~WAAW~~,2BAAO;KAClB,MAAK;KACL,SAAQ;KACR,OAAM;KALR,UAAA,CAOE,oBAAC,iBAAD,CAAkB,CAAA,GAClB,oBAAC,WAAD,EAAW,~~WAAW~~,2BAAO,kBAAoB,CAAA,CAC3C;;IACR,oBAAC,KAAK,OAAN;KAAY,~~WAAW~~,2BAAO;KAAY;IAAM,CAAA;IAChD,qBAAC,QAAD;KACE,UAAS;KACT,~~WAAW~~,2BAAO;KAClB,MAAK;KACL,SAAQ;KACR,OAAM;KALR,UAAA,CAOE,oBAAC,eAAD,CAAgB,CAAA,GAChB,oBAAC,UAAD,EAAU,~~WAAW~~,2BAAO,kBAAoB,CAAA,CAC1C;;GACE;EACI,CAAA,CAAA;;AAEtB,CAAC"}
1	+ {"version":3,"file":"NumberField.mjs","names":["formFieldStyles","styles"],"sources":["../../../../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./NumberField.module.scss\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport {\n IconChevronDown,\n IconChevronUp,\n IconMinus,\n IconPlus,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\n\nexport interface NumberFieldProps\n extends\n PropsWithChildren<Omit<Aria.NumberFieldProps, \"children\">>,\n FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const NumberField = flowComponent(\"NumberField\", (props) => {\n // `NaN` is what react-aria's number field state uses for \"no number\"\n const {\n children,\n className,\n isWheelDisabled = true,\n ref,\n ...rest\n } = useControlledHostValueProps(props, NaN);\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n wrapperProps,\n controlProps,\n fieldPropsContext,\n } = useFieldComponent(props, \"NumberField\");\n\n const rootClassName = clsx(formFieldStyles.formField, className);\n\n return (\n <Aria.NumberField\n {...rest}\n isWheelDisabled={isWheelDisabled}\n aria-describedby={controlProps[\"aria-describedby\"]}\n className={clsx(rootClassName, wrapperProps.className)}\n >\n <PropsContextProvider props={fieldPropsContext}>\n <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n <FieldErrorView />\n </PropsContextProvider>\n <Aria.Group className={styles.group}>\n <Button\n ariaSlot=\"decrement\"\n className={styles.decrementButton}\n size=\"s\"\n variant=\"plain\"\n color=\"secondary\"\n >\n <IconChevronDown />\n <IconMinus className={styles.coarsePointerIcon} />\n </Button>\n <Aria.Input className={styles.input} ref={ref} />\n <Button\n ariaSlot=\"increment\"\n className={styles.incrementButton}\n size=\"s\"\n variant=\"plain\"\n color=\"secondary\"\n >\n <IconChevronUp />\n <IconPlus className={styles.coarsePointerIcon} />\n </Button>\n </Aria.Group>\n </Aria.NumberField>\n );\n});\n\nexport default NumberField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAwBA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CAEjE,MAAM,EACJ,UACA,WACA,kBAAkB,MAClB,KACA,GAAG,SACD,4BAA4B,OAAO,GAAG;CAE1C,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,aAAa;CAE1C,MAAM,gBAAgB,KAAKA,yBAAgB,WAAW,SAAS;CAE/D,OACE,qBAAC,KAAK,aAAN;EACE,GAAI;EACa;EACjB,oBAAkB,aAAa;EAC/B,WAAW,KAAK,eAAe,aAAa,SAAS;EAJvD,UAAA,CAME,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA,GAC9D,oBAAC,gBAAD,CAAiB,CAAA,CACG;EACtB,CAAA,GAAA,qBAAC,KAAK,OAAN;GAAY,WAAWC,2BAAO;GAA9B,UAAA;IACE,qBAAC,QAAD;KACE,UAAS;KACT,WAAWA,2BAAO;KAClB,MAAK;KACL,SAAQ;KACR,OAAM;KALR,UAAA,CAOE,oBAAC,iBAAD,CAAkB,CAAA,GAClB,oBAAC,WAAD,EAAW,WAAWA,2BAAO,kBAAoB,CAAA,CAC3C;;IACR,oBAAC,KAAK,OAAN;KAAY,WAAWA,2BAAO;KAAY;IAAM,CAAA;IAChD,qBAAC,QAAD;KACE,UAAS;KACT,WAAWA,2BAAO;KAClB,MAAK;KACL,SAAQ;KACR,OAAM;KALR,UAAA,CAOE,oBAAC,eAAD,CAAgB,CAAA,GAChB,oBAAC,UAAD,EAAU,WAAWA,2BAAO,kBAAoB,CAAA,CAC1C;;GACE;EACI,CAAA,CAAA;;AAEtB,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Option.mjs","names":[],"sources":["../../../../../../../src/components/Option/Option.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport { Children, useEffect, useRef } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Option.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { extractTextFromChildren } from \"@/lib/react/remote\";\nimport { IconCheck } from \"@/components/Icon/components/icons\";\n\nexport interface OptionProps\n extends\n Omit<Aria.ListBoxItemProps, \"children\" \| \"value\" \| \"id\">,\n PropsWithChildren,\n FlowComponentProps {\n /*\n The value this option contributes to the field's selection, and the key\n * `defaultValue` / `value` of the surrounding field target.\n \n Defaults to `textValue`, which itself defaults to the text among the\n * option's children — element children such as a `Badge` do not contribute,\n * so `<Option>Millennium Falcon <Badge>Latest</Badge></Option>` is\n * `\"Millennium Falcon\"`. Pass it explicitly when the value must not follow\n * the display text, or when the children carry no text at all.\n /\n value?: string \| number;\n}\n\n/\n The key an option contributes to its collection: an explicit `value`, else\n * the `textValue`, else the text among the children. Shared with the props\n * context that routes options through a field's tunnel, so both derive the same\n * identity for one option.\n /\nexport const getOptionValue = (\n props: Pick<OptionProps, \"value\" \| \"textValue\" \| \"children\">,\n): string \| number \| undefined =>\n props.value ?? props.textValue ?? extractTextFromChildren(props.children);\n\n/* @flr-generate all /\nexport const Option = flowComponent(\"Option\", (props) => {\n const {\n className,\n children,\n textValue = extractTextFromChildren(children),\n // Derived through `getOptionValue` below; destructured only to keep it out\n // of the props spread onto the react-aria item.\n value: valueIgnored,\n ref,\n ...rest\n } = props;\n\n const value = getOptionValue(props);\n\n useWarnMissingValue(value === undefined);\n\n const rootClassName = clsx(styles.option, className);\n const hasChildren = Children.count(children) >= 1;\n\n return (\n <Aria.ListBoxItem\n className={rootClassName}\n ref={ref}\n id={value}\n {...rest}\n textValue={textValue}\n >\n <span className={styles.content}>\n {hasChildren ? children : textValue}\n </span>\n <IconCheck aria-hidden className={styles.checkMark} />\n </Aria.ListBoxItem>\n );\n});\n\n/\n * Without an `id`, react-aria gives the item a key off a render-order counter\n * (`react-aria-1`). That key is what the field reports as its selected value\n * and what `defaultValue` has to match, so an option without a `value` silently\n * submits a meaningless string and cannot be preselected — and the key shifts\n * when unrelated markup around it changes. react-aria warns about the missing\n * `textValue` in this situation but says nothing about the key, which is the\n * expensive half (#3028).\n \n Warn in an effect rather than during render, so a double render in StrictMode\n * does not log twice; the ref keeps it to once per option.\n */\nconst useWarnMissingValue = (isMissing: boolean): void => {\n const hasWarned = useRef(false);\n\n useEffect(() => {\n if (!isMissing \|\| hasWarned.current) {\n return;\n }\n\n hasWarned.current = true;\n console.error(\n \"An <Option> has no 'value' and none could be inferred from its children, so it falls back to a generated, render-order-dependent key. Pass a 'value' to give the option a stable key.\",\n );\n }, [isMissing]);\n};\n\nexport default Option;\n"],"mappings":";;;;;;;;;;;;;;;;;AAkCA,IAAa,kBACX,UAEA,MAAM,SAAS,MAAM,aAAa,wBAAwB,MAAM,QAAQ;;AAG1E,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,WACA,UACA,YAAY,wBAAwB,QAAQ,GAG5C,OAAO,cACP,KACA,GAAG,SACD;CAEJ,MAAM,QAAQ,eAAe,KAAK;CAElC,oBAAoB,UAAU,KAAA,CAAS;CAEvC,MAAM,gBAAgB,~~KAAK~~,sBAAO,QAAQ,SAAS;CACnD,MAAM,cAAc,SAAS,MAAM,QAAQ,KAAK;CAEhD,OACE,qBAAC,KAAK,aAAN;EACE,WAAW;EACN;EACL,IAAI;EACJ,GAAI;EACO;EALb,UAAA,CAOE,oBAAC,QAAD;GAAM,~~WAAW~~,sBAAO;GACrB,UAAA,cAAc,WAAW;EACtB,CAAA,GACN,oBAAC,WAAD;GAAW,eAAA;GAAY,~~WAAW~~,sBAAO;EAAY,CAAA,CACrC;;AAEtB,CAAC;AAcD,IAAM,uBAAuB,cAA6B;CACxD,MAAM,YAAY,OAAO,KAAK;CAE9B,gBAAgB;EACd,IAAI,CAAC,aAAa,UAAU,SAC1B;EAGF,UAAU,UAAU;EACpB,QAAQ,MACN,uLACF;CACF,GAAG,CAAC,SAAS,CAAC;AAChB"}
1	+ {"version":3,"file":"Option.mjs","names":["styles"],"sources":["../../../../../../../src/components/Option/Option.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport { Children, useEffect, useRef } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Option.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { extractTextFromChildren } from \"@/lib/react/remote\";\nimport { IconCheck } from \"@/components/Icon/components/icons\";\n\nexport interface OptionProps\n extends\n Omit<Aria.ListBoxItemProps, \"children\" \| \"value\" \| \"id\">,\n PropsWithChildren,\n FlowComponentProps {\n /*\n The value this option contributes to the field's selection, and the key\n * `defaultValue` / `value` of the surrounding field target.\n \n Defaults to `textValue`, which itself defaults to the text among the\n * option's children — element children such as a `Badge` do not contribute,\n * so `<Option>Millennium Falcon <Badge>Latest</Badge></Option>` is\n * `\"Millennium Falcon\"`. Pass it explicitly when the value must not follow\n * the display text, or when the children carry no text at all.\n /\n value?: string \| number;\n}\n\n/\n The key an option contributes to its collection: an explicit `value`, else\n * the `textValue`, else the text among the children. Shared with the props\n * context that routes options through a field's tunnel, so both derive the same\n * identity for one option.\n /\nexport const getOptionValue = (\n props: Pick<OptionProps, \"value\" \| \"textValue\" \| \"children\">,\n): string \| number \| undefined =>\n props.value ?? props.textValue ?? extractTextFromChildren(props.children);\n\n/* @flr-generate all /\nexport const Option = flowComponent(\"Option\", (props) => {\n const {\n className,\n children,\n textValue = extractTextFromChildren(children),\n // Derived through `getOptionValue` below; destructured only to keep it out\n // of the props spread onto the react-aria item.\n value: valueIgnored,\n ref,\n ...rest\n } = props;\n\n const value = getOptionValue(props);\n\n useWarnMissingValue(value === undefined);\n\n const rootClassName = clsx(styles.option, className);\n const hasChildren = Children.count(children) >= 1;\n\n return (\n <Aria.ListBoxItem\n className={rootClassName}\n ref={ref}\n id={value}\n {...rest}\n textValue={textValue}\n >\n <span className={styles.content}>\n {hasChildren ? children : textValue}\n </span>\n <IconCheck aria-hidden className={styles.checkMark} />\n </Aria.ListBoxItem>\n );\n});\n\n/\n * Without an `id`, react-aria gives the item a key off a render-order counter\n * (`react-aria-1`). That key is what the field reports as its selected value\n * and what `defaultValue` has to match, so an option without a `value` silently\n * submits a meaningless string and cannot be preselected — and the key shifts\n * when unrelated markup around it changes. react-aria warns about the missing\n * `textValue` in this situation but says nothing about the key, which is the\n * expensive half (#3028).\n \n Warn in an effect rather than during render, so a double render in StrictMode\n * does not log twice; the ref keeps it to once per option.\n */\nconst useWarnMissingValue = (isMissing: boolean): void => {\n const hasWarned = useRef(false);\n\n useEffect(() => {\n if (!isMissing \|\| hasWarned.current) {\n return;\n }\n\n hasWarned.current = true;\n console.error(\n \"An <Option> has no 'value' and none could be inferred from its children, so it falls back to a generated, render-order-dependent key. Pass a 'value' to give the option a stable key.\",\n );\n }, [isMissing]);\n};\n\nexport default Option;\n"],"mappings":";;;;;;;;;;;;;;;;;AAkCA,IAAa,kBACX,UAEA,MAAM,SAAS,MAAM,aAAa,wBAAwB,MAAM,QAAQ;;AAG1E,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,WACA,UACA,YAAY,wBAAwB,QAAQ,GAG5C,OAAO,cACP,KACA,GAAG,SACD;CAEJ,MAAM,QAAQ,eAAe,KAAK;CAElC,oBAAoB,UAAU,KAAA,CAAS;CAEvC,MAAM,gBAAgB,KAAKA,sBAAO,QAAQ,SAAS;CACnD,MAAM,cAAc,SAAS,MAAM,QAAQ,KAAK;CAEhD,OACE,qBAAC,KAAK,aAAN;EACE,WAAW;EACN;EACL,IAAI;EACJ,GAAI;EACO;EALb,UAAA,CAOE,oBAAC,QAAD;GAAM,WAAWA,sBAAO;GACrB,UAAA,cAAc,WAAW;EACtB,CAAA,GACN,oBAAC,WAAD;GAAW,eAAA;GAAY,WAAWA,sBAAO;EAAY,CAAA,CACrC;;AAEtB,CAAC;AAcD,IAAM,uBAAuB,cAA6B;CACxD,MAAM,YAAY,OAAO,KAAK;CAE9B,gBAAgB;EACd,IAAI,CAAC,aAAa,UAAU,SAC1B;EAGF,UAAU,UAAU;EACpB,QAAQ,MACN,uLACF;CACF,GAAG,CAAC,SAAS,CAAC;AAChB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Options.mjs","names":[],"sources":["../../../../../../../src/components/Options/Options.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { Popover, type PopoverProps } from \"@/components/Popover/Popover\";\nimport clsx from \"clsx\";\nimport styles from \"./Options.module.scss\";\nimport type { OverlayController } from \"@/lib/controller\";\nimport type { OptionProps } from \"@/components/Option\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface OptionsProps\n extends\n Pick<Aria.ListBoxProps<OptionProps>, \"renderEmptyState\" \| \"onAction\">,\n PopoverProps {\n controller: OverlayController;\n}\n\nexport const Options: FC<OptionsProps> = flowComponent(\"Options\", (props) => {\n const {\n className,\n children,\n controller,\n renderEmptyState,\n onAction,\n ...restPopoverProps\n } = props;\n\n const rootClassName = clsx(styles.options, className);\n\n return (\n <Popover\n className={styles.popover}\n controller={controller}\n maxHeight={324}\n {...restPopoverProps}\n >\n <Aria.ListBox\n onAction={onAction}\n className={rootClassName}\n renderEmptyState={renderEmptyState}\n >\n {children}\n </Aria.ListBox>\n </Popover>\n );\n});\n\nexport default Options;\n"],"mappings":";;;;;;;;;;AAgBA,IAAa,UAA4B,cAAc,YAAY,UAAU;CAC3E,MAAM,EACJ,WACA,UACA,YACA,kBACA,UACA,GAAG,qBACD;CAEJ,MAAM,gBAAgB,~~KAAK~~,uBAAO,SAAS,SAAS;CAEpD,OACE,oBAAC,SAAD;EACE,~~WAAW~~,uBAAO;EACN;EACZ,WAAW;EACX,GAAI;EAEJ,UAAA,oBAAC,KAAK,SAAN;GACY;GACV,WAAW;GACO;GAEjB;EACW,CAAA;CACP,CAAA;AAEb,CAAC"}
1	+ {"version":3,"file":"Options.mjs","names":["styles"],"sources":["../../../../../../../src/components/Options/Options.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { Popover, type PopoverProps } from \"@/components/Popover/Popover\";\nimport clsx from \"clsx\";\nimport styles from \"./Options.module.scss\";\nimport type { OverlayController } from \"@/lib/controller\";\nimport type { OptionProps } from \"@/components/Option\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface OptionsProps\n extends\n Pick<Aria.ListBoxProps<OptionProps>, \"renderEmptyState\" \| \"onAction\">,\n PopoverProps {\n controller: OverlayController;\n}\n\nexport const Options: FC<OptionsProps> = flowComponent(\"Options\", (props) => {\n const {\n className,\n children,\n controller,\n renderEmptyState,\n onAction,\n ...restPopoverProps\n } = props;\n\n const rootClassName = clsx(styles.options, className);\n\n return (\n <Popover\n className={styles.popover}\n controller={controller}\n maxHeight={324}\n {...restPopoverProps}\n >\n <Aria.ListBox\n onAction={onAction}\n className={rootClassName}\n renderEmptyState={renderEmptyState}\n >\n {children}\n </Aria.ListBox>\n </Popover>\n );\n});\n\nexport default Options;\n"],"mappings":";;;;;;;;;;AAgBA,IAAa,UAA4B,cAAc,YAAY,UAAU;CAC3E,MAAM,EACJ,WACA,UACA,YACA,kBACA,UACA,GAAG,qBACD;CAEJ,MAAM,gBAAgB,KAAKA,uBAAO,SAAS,SAAS;CAEpD,OACE,oBAAC,SAAD;EACE,WAAWA,uBAAO;EACN;EACZ,WAAW;EACX,GAAI;EAEJ,UAAA,oBAAC,KAAK,SAAN;GACY;GACV,WAAW;GACO;GAEjB;EACW,CAAA;CACP,CAAA;AAEb,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Overlay.mjs","names":[],"sources":["../../../../../../../src/components/Overlay/Overlay.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref } from \"react\";\nimport styles from \"./Overlay.module.scss\";\nimport clsx from \"clsx\";\nimport type { OverlayController } from \"@/lib/controller\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport OverlayContextProvider from \"@/lib/controller/overlay/OverlayContextProvider\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport OverlayContentView from \"@/views/OverlayContentView\";\nimport type {\n OverlayCloseHandler,\n OverlayOpenHandler,\n OverlayOpenStateHandler,\n} from \"@/lib/controller/overlay/OverlayController\";\nimport type * as Aria from \"react-aria-components\";\n\nexport interface OverlayProps\n extends\n PropsWithChildren,\n PropsWithClassName,\n Pick<Aria.DialogProps, \"aria-labelledby\"> {\n ref?: Ref<HTMLDivElement>;\n /** The controller to control the overlay state. /\n controller?: OverlayController;\n /* Whether the overlay can be closed by clicking outside of it. /\n isDismissable?: boolean;\n /* Whether the overlay is a modal or a light box. /\n overlayType?: \"Modal\" \| \"LightBox\";\n /* Whether the overlay is open. Use it to control the overlay state. /\n isOpen?: boolean;\n /\n Whether the overlay is open initially. Use it for an uncontrolled overlay.\n \n @default false\n /\n isDefaultOpen?: boolean;\n /* Called when the overlay is opened. /\n onOpen?: OverlayOpenHandler;\n /* Called when the overlay is closed. /\n onClose?: OverlayCloseHandler;\n /* Called with the new open state whenever the overlay is opened or closed. /\n onOpenChange?: OverlayOpenStateHandler;\n /* Whether closing the overlay must be confirmed. */\n confirmOnClose?: boolean;\n}\n\nexport const Overlay: FC<OverlayProps> = (props) => {\n const {\n controller: controllerFromProps,\n children,\n isDismissable = true,\n className,\n overlayType = \"Modal\",\n isDefaultOpen,\n isOpen: isOpenFromProps,\n ref,\n \"aria-labelledby\": ariaLabelledBy,\n ...controllerOptions\n } = props;\n\n const controllerFromContext = useOverlayController(overlayType, {\n reuseControllerFromContext: true,\n isDefaultOpen,\n });\n\n const controller = controllerFromProps ?? controllerFromContext;\n controller.useUpdateOptions(controllerOptions);\n\n const isOpen = isOpenFromProps ?? controller.useIsOpen();\n\n const rootClassName = clsx(styles.overlay, className);\n\n return (\n <OverlayContentView\n onOpenChange={controller.setOpen}\n isOpen={isOpen}\n ref={ref}\n isDismissable={isDismissable}\n className={rootClassName}\n aria-labelledby={ariaLabelledBy}\n >\n <OverlayContextProvider type=\"Modal\" controller={controller}>\n {children}\n </OverlayContextProvider>\n </OverlayContentView>\n );\n};\n\nexport default Overlay;\n"],"mappings":";;;;;;;;;AA6CA,IAAa,WAA6B,UAAU;CAClD,MAAM,EACJ,YAAY,qBACZ,UACA,gBAAgB,MAChB,WACA,cAAc,SACd,eACA,QAAQ,iBACR,KACA,mBAAmB,gBACnB,GAAG,sBACD;CAEJ,MAAM,wBAAwB,qBAAqB,aAAa;EAC9D,4BAA4B;EAC5B;CACF,CAAC;CAED,MAAM,aAAa,uBAAuB;CAC1C,WAAW,iBAAiB,iBAAiB;CAE7C,MAAM,SAAS,mBAAmB,WAAW,UAAU;CAEvD,MAAM,gBAAgB,~~KAAK~~,uBAAO,SAAS,SAAS;CAEpD,OACE,oBAAC,oBAAD;EACE,cAAc,WAAW;EACjB;EACH;EACU;EACf,WAAW;EACX,mBAAiB;EAEjB,UAAA,oBAAC,wBAAD;GAAwB,MAAK;GAAoB;GAC9C;EACqB,CAAA;CACN,CAAA;AAExB"}
1	+ {"version":3,"file":"Overlay.mjs","names":["styles"],"sources":["../../../../../../../src/components/Overlay/Overlay.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref } from \"react\";\nimport styles from \"./Overlay.module.scss\";\nimport clsx from \"clsx\";\nimport type { OverlayController } from \"@/lib/controller\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport OverlayContextProvider from \"@/lib/controller/overlay/OverlayContextProvider\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport OverlayContentView from \"@/views/OverlayContentView\";\nimport type {\n OverlayCloseHandler,\n OverlayOpenHandler,\n OverlayOpenStateHandler,\n} from \"@/lib/controller/overlay/OverlayController\";\nimport type * as Aria from \"react-aria-components\";\n\nexport interface OverlayProps\n extends\n PropsWithChildren,\n PropsWithClassName,\n Pick<Aria.DialogProps, \"aria-labelledby\"> {\n ref?: Ref<HTMLDivElement>;\n /** The controller to control the overlay state. /\n controller?: OverlayController;\n /* Whether the overlay can be closed by clicking outside of it. /\n isDismissable?: boolean;\n /* Whether the overlay is a modal or a light box. /\n overlayType?: \"Modal\" \| \"LightBox\";\n /* Whether the overlay is open. Use it to control the overlay state. /\n isOpen?: boolean;\n /\n Whether the overlay is open initially. Use it for an uncontrolled overlay.\n \n @default false\n /\n isDefaultOpen?: boolean;\n /* Called when the overlay is opened. /\n onOpen?: OverlayOpenHandler;\n /* Called when the overlay is closed. /\n onClose?: OverlayCloseHandler;\n /* Called with the new open state whenever the overlay is opened or closed. /\n onOpenChange?: OverlayOpenStateHandler;\n /* Whether closing the overlay must be confirmed. */\n confirmOnClose?: boolean;\n}\n\nexport const Overlay: FC<OverlayProps> = (props) => {\n const {\n controller: controllerFromProps,\n children,\n isDismissable = true,\n className,\n overlayType = \"Modal\",\n isDefaultOpen,\n isOpen: isOpenFromProps,\n ref,\n \"aria-labelledby\": ariaLabelledBy,\n ...controllerOptions\n } = props;\n\n const controllerFromContext = useOverlayController(overlayType, {\n reuseControllerFromContext: true,\n isDefaultOpen,\n });\n\n const controller = controllerFromProps ?? controllerFromContext;\n controller.useUpdateOptions(controllerOptions);\n\n const isOpen = isOpenFromProps ?? controller.useIsOpen();\n\n const rootClassName = clsx(styles.overlay, className);\n\n return (\n <OverlayContentView\n onOpenChange={controller.setOpen}\n isOpen={isOpen}\n ref={ref}\n isDismissable={isDismissable}\n className={rootClassName}\n aria-labelledby={ariaLabelledBy}\n >\n <OverlayContextProvider type=\"Modal\" controller={controller}>\n {children}\n </OverlayContextProvider>\n </OverlayContentView>\n );\n};\n\nexport default Overlay;\n"],"mappings":";;;;;;;;;AA6CA,IAAa,WAA6B,UAAU;CAClD,MAAM,EACJ,YAAY,qBACZ,UACA,gBAAgB,MAChB,WACA,cAAc,SACd,eACA,QAAQ,iBACR,KACA,mBAAmB,gBACnB,GAAG,sBACD;CAEJ,MAAM,wBAAwB,qBAAqB,aAAa;EAC9D,4BAA4B;EAC5B;CACF,CAAC;CAED,MAAM,aAAa,uBAAuB;CAC1C,WAAW,iBAAiB,iBAAiB;CAE7C,MAAM,SAAS,mBAAmB,WAAW,UAAU;CAEvD,MAAM,gBAAgB,KAAKA,uBAAO,SAAS,SAAS;CAEpD,OACE,oBAAC,oBAAD;EACE,cAAc,WAAW;EACjB;EACH;EACU;EACf,WAAW;EACX,mBAAiB;EAEjB,UAAA,oBAAC,wBAAD;GAAwB,MAAK;GAAoB;GAC9C;EACqB,CAAA;CACN,CAAA;AAExB"}

package/dist/js/packages/components/src/components/Overlay/components/OverlayContent.mjs CHANGED Viewed

@@ -17,9 +17,14 @@ var overlayContainerAttribute = "data-flow-overlays";
 * blurs a focused field inside it (#3268). The same heuristic also spares
 * custom elements and shadow hosts the page itself appends, which then render
 * above open overlays.
+*
+* Hidden nodes don't count either: react-aria appends a `display: none`
+* description node whenever a DatePicker's value changes, and moving the
+* container for it on every keystroke resets the segment being typed into.
 */
+var isHiddenNode = (node) => node instanceof HTMLElement && (node.hidden === true || node.style.display === "none");
 var isCoveredByPageContent = (container) => {
-	for (let node = container.nextElementSibling; node; node = node.nextElementSibling) if (!isBrowserExtensionNode(node)) return true;
+	for (let node = container.nextElementSibling; node; node = node.nextElementSibling) if (!isBrowserExtensionNode(node) && !isHiddenNode(node)) return true;
 	return false;
 };
 /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"OverlayContent.mjs","names":[],"sources":["../../../../../../../../src/components/Overlay/components/OverlayContent.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport { type FC, type PropsWithChildren, type Ref, Suspense } from \"react\";\nimport { UNSAFE_PortalProvider } from \"react-aria\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { OverlaySuspenseFallback } from \"@/components/Overlay/components/OverlaySuspenseFallback\";\nimport styles from \"../Overlay.module.scss\";\nimport DivView from \"@/views/DivView\";\nimport {\n isBrowserExtensionNode,\n useKeepBrowserExtensionsInteractive,\n} from \"@/lib/hooks/dom/useKeepBrowserExtensionsInteractive\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\n\nconst overlayContainerAttribute = \"data-flow-overlays\";\n\n/*\n Nodes a browser extension appends (e.g. 1Password's inline menu) don't count\n * as covering: they belong on top anyway, and moving the container for them\n * blurs a focused field inside it (#3268). The same heuristic also spares\n * custom elements and shadow hosts the page itself appends, which then render\n * above open overlays.\n /\nconst isCoveredByPageContent = (container: HTMLElement): boolean => {\n for (\n let node = container.nextElementSibling;\n node;\n node = node.nextElementSibling\n ) {\n if (!isBrowserExtensionNode(node)) {\n return true;\n }\n }\n return false;\n};\n\n/\n Only the container moves, never the nodes appended after it: those are\n * foreign, and moving them costs state we cannot restore (an iframe reloads).\n * The container's own state we can. Moving a node blurs the focused element\n * inside it and resets every scroll container inside to the top. `moveBefore`\n * keeps the focus (and, in Chromium, the scroll positions); the rest is\n * restored afterwards.\n /\nconst moveToEnd = (container: HTMLElement): void => {\n const body = document.body;\n const focused = document.activeElement;\n const scrolled = Array.from(container.querySelectorAll<HTMLElement>(\"\"))\n .filter((element) => element.scrollTop !== 0 \|\| element.scrollLeft !== 0)\n .map(\n (element) => [element, element.scrollTop, element.scrollLeft] as const,\n );\n\n if (typeof body.moveBefore === \"function\") {\n body.moveBefore(container, null);\n } else {\n body.append(container);\n }\n\n for (const [element, scrollTop, scrollLeft] of scrolled) {\n element.scrollTop = scrollTop;\n element.scrollLeft = scrollLeft;\n }\n if (\n focused instanceof HTMLElement &&\n container.contains(focused) &&\n document.activeElement !== focused\n ) {\n focused.focus({ preventScroll: true });\n }\n};\n\n/*\n Render overlays into a dedicated container instead of `document.body`.\n \n React Aria `FocusScope` relies on nearby sibling nodes (sentinels + overlay).\n * Browser extensions (e.g. password managers) inject/reorder `body` children,\n * which can separate those nodes. Then focus scope detection breaks and may\n * cause recursive focus restoration.\n \n Keep the overlay container as the last child of body.\n \n React Aria normally portals overlays directly into body, so they are appended\n * last and render on top.\n \n If we create one persistent container only once, anything appended to body\n * later (toasts, third-party widgets, remounted app root) can render above open\n * overlays. Then overlays can appear behind page content, and the backdrop blur\n * no longer covers the page.\n /\nconst getOverlayContainer = (): HTMLElement \| null => {\n if (typeof document === \"undefined\") {\n return null;\n }\n\n const existingContainer = document.querySelector<HTMLElement>(\n `body > [${overlayContainerAttribute}]`,\n );\n\n if (existingContainer) {\n if (isCoveredByPageContent(existingContainer)) {\n moveToEnd(existingContainer);\n }\n return existingContainer;\n }\n\n const container = document.createElement(\"div\");\n container.setAttribute(overlayContainerAttribute, \"\");\n document.body.append(container);\n\n return container;\n};\n\nexport interface OverlayContentProps\n extends\n PropsWithChildren,\n PropsWithClassName,\n Pick<Aria.DialogProps, \"aria-labelledby\"> {\n ref?: Ref<HTMLDivElement>;\n onOpenChange: (isOpen: boolean) => void;\n isDismissable?: boolean;\n isOpen?: boolean;\n}\n\n/* @flr-generate all /\nexport const OverlayContent: FC<OverlayContentProps> = (props) => {\n const {\n children,\n className,\n \"aria-labelledby\": ariaLabelledBy,\n ...restProps\n } = props;\n\n const isActivityActive = useIsActivityActive();\n\n useKeepBrowserExtensionsInteractive(restProps.isOpen ?? false);\n\n const Fallback = () => {\n return (\n <DivView className={styles.suspense}>\n <OverlaySuspenseFallback {...restProps} />\n </DivView>\n );\n };\n\n if (!isActivityActive) {\n return null;\n }\n\n return (\n <UNSAFE_PortalProvider getContainer={getOverlayContainer}>\n <Aria.ModalOverlay {...restProps} className={className}>\n {/ The centering viewport between the backdrop and react-aria's modal\n wrapper. Classed so Modal/OffCanvas/LightBox can position it\n without selecting a bare `div`. */}\n <DivView className={styles.viewport}>\n <Aria.Modal>\n <Suspense fallback={<Fallback />}>\n <Aria.Dialog aria-labelledby={ariaLabelledBy}>\n {children}\n </Aria.Dialog>\n </Suspense>\n </Aria.Modal>\n </DivView>\n </Aria.ModalOverlay>\n </UNSAFE_PortalProvider>\n );\n};\n\nexport default OverlayContent;\n"],"mappings":";;;;;;;;;;;;AAaA,IAAM,4BAA4B~~;;;;;;;;AASlC~~,IAAM,0BAA0B,cAAoC;CAClE,KACE,IAAI,OAAO,UAAU,oBACrB,MACA,OAAO,KAAK,oBAEZ,IAAI,CAAC,uBAAuB,IAAI,~~GAC9B~~,OAAO;CAGX,OAAO;AACT;;;;;;;;;AAUA,IAAM,aAAa,cAAiC;CAClD,MAAM,OAAO,SAAS;CACtB,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,MAAM,KAAK,UAAU,iBAA8B,GAAG,CAAC,CAAC,CACtE,QAAQ,YAAY,QAAQ,cAAc,KAAK,QAAQ,eAAe,CAAC,CAAC,CACxE,KACE,YAAY;EAAC;EAAS,QAAQ;EAAW,QAAQ;CAAU,CAC9D;CAEF,IAAI,OAAO,KAAK,eAAe,YAC7B,KAAK,WAAW,WAAW,IAAI;MAE/B,KAAK,OAAO,SAAS;CAGvB,KAAK,MAAM,CAAC,SAAS,WAAW,eAAe,UAAU;EACvD,QAAQ,YAAY;EACpB,QAAQ,aAAa;CACvB;CACA,IACE,mBAAmB,eACnB,UAAU,SAAS,OAAO,KAC1B,SAAS,kBAAkB,SAE3B,QAAQ,MAAM,EAAE,eAAe,KAAK,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;AAoBA,IAAM,4BAAgD;CACpD,IAAI,OAAO,aAAa,aACtB,OAAO;CAGT,MAAM,oBAAoB,SAAS,cACjC,WAAW,0BAA0B,EACvC;CAEA,IAAI,mBAAmB;EACrB,IAAI,uBAAuB,iBAAiB,GAC1C,UAAU,iBAAiB;EAE7B,OAAO;CACT;CAEA,MAAM,YAAY,SAAS,cAAc,KAAK;CAC9C,UAAU,aAAa,2BAA2B,EAAE;CACpD,SAAS,KAAK,OAAO,SAAS;CAE9B,OAAO;AACT;;AAcA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,WACA,mBAAmB,gBACnB,GAAG,cACD;CAEJ,MAAM,mBAAmB,oBAAoB;CAE7C,oCAAoC,UAAU,UAAU,KAAK;CAE7D,MAAM,iBAAiB;EACrB,OACE,oBAAC,SAAD;GAAS,~~WAAW~~,uBAAO;GACzB,UAAA,oBAAC,yBAAD,EAAyB,GAAI,UAAY,CAAA;EAClC,CAAA;CAEb;CAEA,IAAI,CAAC,kBACH,OAAO;CAGT,OACE,oBAAC,uBAAD;EAAuB,cAAc;EACnC,UAAA,oBAAC,KAAK,cAAN;GAAmB,GAAI;GAAsB;GAI3C,UAAA,oBAAC,SAAD;IAAS,~~WAAW~~,uBAAO;IACzB,UAAA,oBAAC,KAAK,OAAN,EAAA,UACE,oBAAC,UAAD;KAAU,UAAU,oBAAC,UAAD,CAAW,CAAA;KAC7B,UAAA,oBAAC,KAAK,QAAN;MAAa,mBAAiB;MAC3B;KACU,CAAA;IACL,CAAA,EACA,CAAA;GACL,CAAA;EACQ,CAAA;CACE,CAAA;AAE3B"}
1	+ {"version":3,"file":"OverlayContent.mjs","names":["styles"],"sources":["../../../../../../../../src/components/Overlay/components/OverlayContent.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport { type FC, type PropsWithChildren, type Ref, Suspense } from \"react\";\nimport { UNSAFE_PortalProvider } from \"react-aria\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { OverlaySuspenseFallback } from \"@/components/Overlay/components/OverlaySuspenseFallback\";\nimport styles from \"../Overlay.module.scss\";\nimport DivView from \"@/views/DivView\";\nimport {\n isBrowserExtensionNode,\n useKeepBrowserExtensionsInteractive,\n} from \"@/lib/hooks/dom/useKeepBrowserExtensionsInteractive\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\n\nconst overlayContainerAttribute = \"data-flow-overlays\";\n\n/*\n Nodes a browser extension appends (e.g. 1Password's inline menu) don't count\n * as covering: they belong on top anyway, and moving the container for them\n * blurs a focused field inside it (#3268). The same heuristic also spares\n * custom elements and shadow hosts the page itself appends, which then render\n * above open overlays.\n \n Hidden nodes don't count either: react-aria appends a `display: none`\n * description node whenever a DatePicker's value changes, and moving the\n * container for it on every keystroke resets the segment being typed into.\n /\nconst isHiddenNode = (node: Element): boolean =>\n node instanceof HTMLElement &&\n (node.hidden === true \|\| node.style.display === \"none\");\n\nconst isCoveredByPageContent = (container: HTMLElement): boolean => {\n for (\n let node = container.nextElementSibling;\n node;\n node = node.nextElementSibling\n ) {\n if (!isBrowserExtensionNode(node) && !isHiddenNode(node)) {\n return true;\n }\n }\n return false;\n};\n\n/\n Only the container moves, never the nodes appended after it: those are\n * foreign, and moving them costs state we cannot restore (an iframe reloads).\n * The container's own state we can. Moving a node blurs the focused element\n * inside it and resets every scroll container inside to the top. `moveBefore`\n * keeps the focus (and, in Chromium, the scroll positions); the rest is\n * restored afterwards.\n /\nconst moveToEnd = (container: HTMLElement): void => {\n const body = document.body;\n const focused = document.activeElement;\n const scrolled = Array.from(container.querySelectorAll<HTMLElement>(\"\"))\n .filter((element) => element.scrollTop !== 0 \|\| element.scrollLeft !== 0)\n .map(\n (element) => [element, element.scrollTop, element.scrollLeft] as const,\n );\n\n if (typeof body.moveBefore === \"function\") {\n body.moveBefore(container, null);\n } else {\n body.append(container);\n }\n\n for (const [element, scrollTop, scrollLeft] of scrolled) {\n element.scrollTop = scrollTop;\n element.scrollLeft = scrollLeft;\n }\n if (\n focused instanceof HTMLElement &&\n container.contains(focused) &&\n document.activeElement !== focused\n ) {\n focused.focus({ preventScroll: true });\n }\n};\n\n/*\n Render overlays into a dedicated container instead of `document.body`.\n \n React Aria `FocusScope` relies on nearby sibling nodes (sentinels + overlay).\n * Browser extensions (e.g. password managers) inject/reorder `body` children,\n * which can separate those nodes. Then focus scope detection breaks and may\n * cause recursive focus restoration.\n \n Keep the overlay container as the last child of body.\n \n React Aria normally portals overlays directly into body, so they are appended\n * last and render on top.\n \n If we create one persistent container only once, anything appended to body\n * later (toasts, third-party widgets, remounted app root) can render above open\n * overlays. Then overlays can appear behind page content, and the backdrop blur\n * no longer covers the page.\n /\nconst getOverlayContainer = (): HTMLElement \| null => {\n if (typeof document === \"undefined\") {\n return null;\n }\n\n const existingContainer = document.querySelector<HTMLElement>(\n `body > [${overlayContainerAttribute}]`,\n );\n\n if (existingContainer) {\n if (isCoveredByPageContent(existingContainer)) {\n moveToEnd(existingContainer);\n }\n return existingContainer;\n }\n\n const container = document.createElement(\"div\");\n container.setAttribute(overlayContainerAttribute, \"\");\n document.body.append(container);\n\n return container;\n};\n\nexport interface OverlayContentProps\n extends\n PropsWithChildren,\n PropsWithClassName,\n Pick<Aria.DialogProps, \"aria-labelledby\"> {\n ref?: Ref<HTMLDivElement>;\n onOpenChange: (isOpen: boolean) => void;\n isDismissable?: boolean;\n isOpen?: boolean;\n}\n\n/* @flr-generate all /\nexport const OverlayContent: FC<OverlayContentProps> = (props) => {\n const {\n children,\n className,\n \"aria-labelledby\": ariaLabelledBy,\n ...restProps\n } = props;\n\n const isActivityActive = useIsActivityActive();\n\n useKeepBrowserExtensionsInteractive(restProps.isOpen ?? false);\n\n const Fallback = () => {\n return (\n <DivView className={styles.suspense}>\n <OverlaySuspenseFallback {...restProps} />\n </DivView>\n );\n };\n\n if (!isActivityActive) {\n return null;\n }\n\n return (\n <UNSAFE_PortalProvider getContainer={getOverlayContainer}>\n <Aria.ModalOverlay {...restProps} className={className}>\n {/ The centering viewport between the backdrop and react-aria's modal\n wrapper. Classed so Modal/OffCanvas/LightBox can position it\n without selecting a bare `div`. */}\n <DivView className={styles.viewport}>\n <Aria.Modal>\n <Suspense fallback={<Fallback />}>\n <Aria.Dialog aria-labelledby={ariaLabelledBy}>\n {children}\n </Aria.Dialog>\n </Suspense>\n </Aria.Modal>\n </DivView>\n </Aria.ModalOverlay>\n </UNSAFE_PortalProvider>\n );\n};\n\nexport default OverlayContent;\n"],"mappings":";;;;;;;;;;;;AAaA,IAAM,4BAA4B;;;;;;;;;;;;AAalC,IAAM,gBAAgB,SACpB,gBAAgB,gBACf,KAAK,WAAW,QAAQ,KAAK,MAAM,YAAY;AAElD,IAAM,0BAA0B,cAAoC;CAClE,KACE,IAAI,OAAO,UAAU,oBACrB,MACA,OAAO,KAAK,oBAEZ,IAAI,CAAC,uBAAuB,IAAI,KAAK,CAAC,aAAa,IAAI,GACrD,OAAO;CAGX,OAAO;AACT;;;;;;;;;AAUA,IAAM,aAAa,cAAiC;CAClD,MAAM,OAAO,SAAS;CACtB,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,MAAM,KAAK,UAAU,iBAA8B,GAAG,CAAC,CAAC,CACtE,QAAQ,YAAY,QAAQ,cAAc,KAAK,QAAQ,eAAe,CAAC,CAAC,CACxE,KACE,YAAY;EAAC;EAAS,QAAQ;EAAW,QAAQ;CAAU,CAC9D;CAEF,IAAI,OAAO,KAAK,eAAe,YAC7B,KAAK,WAAW,WAAW,IAAI;MAE/B,KAAK,OAAO,SAAS;CAGvB,KAAK,MAAM,CAAC,SAAS,WAAW,eAAe,UAAU;EACvD,QAAQ,YAAY;EACpB,QAAQ,aAAa;CACvB;CACA,IACE,mBAAmB,eACnB,UAAU,SAAS,OAAO,KAC1B,SAAS,kBAAkB,SAE3B,QAAQ,MAAM,EAAE,eAAe,KAAK,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;AAoBA,IAAM,4BAAgD;CACpD,IAAI,OAAO,aAAa,aACtB,OAAO;CAGT,MAAM,oBAAoB,SAAS,cACjC,WAAW,0BAA0B,EACvC;CAEA,IAAI,mBAAmB;EACrB,IAAI,uBAAuB,iBAAiB,GAC1C,UAAU,iBAAiB;EAE7B,OAAO;CACT;CAEA,MAAM,YAAY,SAAS,cAAc,KAAK;CAC9C,UAAU,aAAa,2BAA2B,EAAE;CACpD,SAAS,KAAK,OAAO,SAAS;CAE9B,OAAO;AACT;;AAcA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,WACA,mBAAmB,gBACnB,GAAG,cACD;CAEJ,MAAM,mBAAmB,oBAAoB;CAE7C,oCAAoC,UAAU,UAAU,KAAK;CAE7D,MAAM,iBAAiB;EACrB,OACE,oBAAC,SAAD;GAAS,WAAWA,uBAAO;GACzB,UAAA,oBAAC,yBAAD,EAAyB,GAAI,UAAY,CAAA;EAClC,CAAA;CAEb;CAEA,IAAI,CAAC,kBACH,OAAO;CAGT,OACE,oBAAC,uBAAD;EAAuB,cAAc;EACnC,UAAA,oBAAC,KAAK,cAAN;GAAmB,GAAI;GAAsB;GAI3C,UAAA,oBAAC,SAAD;IAAS,WAAWA,uBAAO;IACzB,UAAA,oBAAC,KAAK,OAAN,EAAA,UACE,oBAAC,UAAD;KAAU,UAAU,oBAAC,UAAD,CAAW,CAAA;KAC7B,UAAA,oBAAC,KAAK,QAAN;MAAa,mBAAiB;MAC3B;KACU,CAAA;IACL,CAAA,EACA,CAAA;GACL,CAAA;EACQ,CAAA;CACE,CAAA;AAE3B"}

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

@@ -5,7 +5,7 @@ import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
 import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
-import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
+import { joinIds, useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
 import { FieldDescription } from "../FieldDescription/FieldDescription.mjs";
 import { FieldError } from "../FieldError/FieldError.mjs";
@@ -23,7 +23,7 @@ import { PasswordGenerateButton } from "./components/PasswordGenerateButton/Pass
 import { usePolicyValidationResult } from "./lib/usePolicyValidationResult.mjs";
 import { useAriaAnnouncePasswordVisibility, useAriaAnnounceValidationState } from "./lib/ariaAnnounce.mjs";
 import clsx from "clsx";
-import { useMemo, useRef, useState } from "react";
+import { useCallback, useId, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
 //#region src/components/PasswordCreationField/PasswordCreationField.tsx
@@ -44,7 +44,7 @@ var PasswordCreationField = flowComponent("PasswordCreationField", (props) => {
 	};
 	const [policyValidationResult, setPolicyValidationResult] = useState(initialPolicyValidationState);
 	const loadingRef = useRef(null);
-	usePolicyValidationResult(validationPolicy, value ?? "", () => {
+	const { rememberValidationResult } = usePolicyValidationResult(validationPolicy, value ?? "", () => {
 		if (isEmptyValue) return;
 		loadingRef.current = setTimeout(() => {
 			setPolicyValidationResult((r) => ({
@@ -77,10 +77,23 @@ var PasswordCreationField = flowComponent("PasswordCreationField", (props) => {
 	const isValidFromValidationResult = !isEmptyValue && stateFromValidationResult?.isValid;
 	const isInvalidFromValidationResult = !isEmptyValue && stateFromValidationResult?.isValid === false;
 	const isInvalid = invalidFromProps || isInvalidFromValidationResult;
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent({
-		...props,
-		isInvalid
-	}, "PasswordCreationField");
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext, renderedFieldErrorId } = useFieldComponent(props, "PasswordCreationField");
+	/**
+	* The result for a valid password appears after the asynchronous policy
+	* validation. react-aria resolves its description slot only when the
+	* field's validity changes, so a result that appears while the field stays
+	* valid (a generated password) was never linked. It gets its own id
+	* instead, referenced only while it is rendered.
+	*
+	* A shown error replaces it: the FormField styles hide descriptions next to
+	* an error, and a hidden description would still be announced.
+	*/
+	const resultDescriptionId = useId();
+	const [isResultDescriptionRendered, setIsResultDescriptionRendered] = useState(false);
+	const resultDescriptionRef = useCallback((element) => {
+		setIsResultDescriptionRendered(!!element);
+	}, []);
+	const describedBy = joinIds(isResultDescriptionRendered && resultDescriptionId, controlProps["aria-describedby"]);
 	useAriaAnnounceValidationState(latestValidationErrorText, !isEmptyValue && policyValidationResult.isValid !== "indeterminate");
 	useAriaAnnouncePasswordVisibility(isPasswordRevealed);
 	const setOptimisticPolicyValidationResult = (state = {}) => {
@@ -92,14 +105,16 @@ var PasswordCreationField = flowComponent("PasswordCreationField", (props) => {
 	};
 	const onPasswordGenerateHandler = async () => {
 		const generatedPassword = await generatePassword(validationPolicy);
-		setOptimisticPolicyValidationResult({
-			...initialPolicyValidationState,
-			isValid: true,
-			ruleResults: policyValidationResult.ruleResults.map((r) => ({
-				...r,
-				isValid: true
-			}))
-		});
+		/**
+		* The generator returns only passwords the policy accepts, so the rating
+		* is set with the password instead of after the typing debounce. It is
+		* the policy's own result: a guessed one (full strength) was overturned
+		* by the real rating, e.g. to "meets the minimum requirements". Cached,
+		* so the debounced validation of this password does not rate it again.
+		*/
+		const generatedPasswordResult = await validationPolicy.validate(generatedPassword);
+		rememberValidationResult(generatedPassword, generatedPasswordResult);
+		setPolicyValidationResult(generatedPasswordResult);
 		setIsPasswordRevealed(true);
 		onChange(generatedPassword);
 	};
@@ -155,12 +170,12 @@ var PasswordCreationField = flowComponent("PasswordCreationField", (props) => {
 	};
 	return /* @__PURE__ */ jsxs(Aria.TextField, {
 		...rest,
-		...fieldProps,
+		"aria-describedby": describedBy,
 		value,
 		type: isPasswordRevealed ? "text" : "password",
 		onChange,
 		onPaste: onPasswordPasteHandler,
-		className: clsx(className, fieldProps.className),
+		className: clsx(className, wrapperProps.className),
 		isDisabled,
 		isInvalid,
 		isRequired,
@@ -199,11 +214,19 @@ var PasswordCreationField = flowComponent("PasswordCreationField", (props) => {
 							isEmptyValue,
 							isLoading: policyValidationResult.isValid === "indeterminate",
 							policyValidationResult,
-							validationResultState: stateFromValidationResult
+							validationResultState: stateFromValidationResult,
+							isInvalid: invalidFromProps
 						}, value)
 					]
 				}),
-				isValidFromValidationResult && /* @__PURE__ */ jsx(FieldDescription, { children: latestValidationErrorText })
+				isValidFromValidationResult && !renderedFieldErrorId && /* @__PURE__ */ jsx(Aria.TextContext.Provider, {
+					value: null,
+					children: /* @__PURE__ */ jsx(FieldDescription, {
+						id: resultDescriptionId,
+						ref: resultDescriptionRef,
+						children: latestValidationErrorText
+					})
+				})
 			]
 		})] }), /* @__PURE__ */ jsx(FieldErrorView, {})]
 	});

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\";\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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"}
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 const loadingRef = useRef<ReturnType<typeof setTimeout>>(null);\n const { rememberValidationResult } = 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 {\n FieldErrorView,\n FieldErrorCaptureContext,\n wrapperProps,\n controlProps,\n fieldPropsContext,\n renderedFieldErrorId,\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 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={policyValidationResult.isValid === \"indeterminate\"}\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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"}

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

@@ -7,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.tsx
 /** @internal */
 var ComplexityIndicator = (props) => {
-	const { policyValidationResult, validationResultState, isLoading, isEmptyValue } = props;
+	const { policyValidationResult, validationResultState, isLoading, isEmptyValue, isInvalid } = props;
 	let complexityVisible;
 	let status;
 	const complexityScore = policyValidationResult?.complexity;
@@ -22,7 +22,7 @@ var ComplexityIndicator = (props) => {
 		status = "success";
 	} else {
 		complexityVisible = true;
-		status = getStatusFromPolicyValidationResult(validationResultState?.isValid ?? policyValidationResult.isValid, policyValidationResult);
+		status = isInvalid ? "danger" : getStatusFromPolicyValidationResult(validationResultState?.isValid ?? policyValidationResult.isValid, policyValidationResult);
 	}
 	const complexityFulfilled = totalFulfilledPercentage === 100;
 	const percentageClassName = clsx(ComplexityIndicator_module_default.bar, !isEmptyValue && status !== "unavailable" && ComplexityIndicator_module_default[`bar-background-status-${status}`], {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ComplexityIndicator.mjs","names":[],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"./ComplexityIndicator.module.scss\";\nimport { getStatusFromPolicyValidationResult } from \"@/components/PasswordCreationField/lib/getStatusFromPolicyValidationResult\";\nimport clsx from \"clsx\";\nimport type { ResolvedPolicyValidationResult } from \"@/components/PasswordCreationField/PasswordCreationField\";\nimport { type Status } from \"@/lib/types/props\";\nimport type { StateFromLatestPolicyValidationResult } from \"@/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult\";\n\nexport type ComplexityStatus = Exclude<Status, \"info\"> \| \"indeterminate\";\n\nexport interface ComplexityIndicatorProps {\n isLoading: boolean;\n isEmptyValue: boolean;\n validationResultState: StateFromLatestPolicyValidationResult;\n policyValidationResult: ResolvedPolicyValidationResult;\n}\n\n/** @internal /\nexport const ComplexityIndicator: FC<ComplexityIndicatorProps> = (props) => {\n const {\n policyValidationResult,\n validationResultState,\n isLoading,\n isEmptyValue,\n } = props;\n\n let complexityVisible;\n let status: ComplexityStatus;\n\n const complexityScore = policyValidationResult?.complexity;\n const rulesResults = policyValidationResult?.ruleResults ?? [];\n\n const complexityFulfilledPercentage = complexityScore\n ? Math.min(\n (100 / (complexityScore.min + 1)) (complexityScore.actual + 1),\n 100,\n )\n : 0;\n\n const validRules = rulesResults.filter((r) => r.isValid).length;\n const rulesFulfilledPercentage =\n rulesResults.length > 0 ? (validRules / rulesResults.length) * 100 : 0;\n\n let totalFulfilledPercentage = Math.round(\n complexityFulfilledPercentage * 0.8 + rulesFulfilledPercentage * 0.2,\n );\n\n if (isEmptyValue) {\n complexityVisible = false;\n totalFulfilledPercentage = 0;\n status = \"success\";\n } else {\n complexityVisible = true;\n status = getStatusFromPolicyValidationResult(\n validationResultState?.isValid ?? policyValidationResult.isValid,\n policyValidationResult,\n );\n }\n\n const complexityFulfilled = totalFulfilledPercentage === 100;\n\n const percentageClassName = clsx(\n styles.bar,\n !isEmptyValue &&\n status !== \"unavailable\" &&\n styles[`bar-background-status-${status}`],\n {\n [styles.loading as string]: isLoading,\n [styles.running as string]: !complexityFulfilled,\n },\n );\n\n return (\n <div\n aria-hidden={true}\n data-container=\"complexity\"\n data-complexity-visible={complexityVisible}\n data-complexity-status={status}\n data-complexity-percentage={totalFulfilledPercentage}\n className={clsx(styles.complexityIndicator, {\n [styles.hide as string]: !complexityVisible,\n })}\n >\n <div\n style={{\n \"--complexity-indicator--percentage\": totalFulfilledPercentage,\n }}\n className={percentageClassName}\n />\n </div>\n );\n};\n\nexport default ComplexityIndicator;\n"],"mappings":";;;;;;;;~~AAkBA~~,IAAa,uBAAqD,UAAU;CAC1E,MAAM,EACJ,wBACA,uBACA,WACA,~~iBACE~~;CAEJ,IAAI;CACJ,IAAI;CAEJ,MAAM,kBAAkB,wBAAwB;CAChD,MAAM,eAAe,wBAAwB,eAAe,CAAC;CAE7D,MAAM,gCAAgC,kBAClC,KAAK,IACF,OAAO,gBAAgB,MAAM,MAAO,gBAAgB,SAAS,IAC9D,GACF,IACA;CAEJ,MAAM,aAAa,aAAa,QAAQ,MAAM,EAAE,OAAO,CAAC,CAAC;CACzD,MAAM,2BACJ,aAAa,SAAS,IAAK,aAAa,aAAa,SAAU,MAAM;CAEvE,IAAI,2BAA2B,KAAK,MAClC,gCAAgC,KAAM,2BAA2B,EACnE;CAEA,IAAI,cAAc;EAChB,oBAAoB;EACpB,2BAA2B;EAC3B,SAAS;CACX,OAAO;EACL,oBAAoB;EACpB,SAAS,~~oCACP~~,uBAAuB,WAAW,uBAAuB,SACzD,sBACF;~~CACF~~;CAEA,MAAM,sBAAsB,6BAA6B;CAEzD,MAAM,sBAAsB,~~KAC1B~~,mCAAO,KACP,CAAC,gBACC,WAAW,~~iBACX~~,mCAAO,yBAAyB,WAClC;~~GACG~~,mCAAO,UAAoB;~~GAC3B~~,mCAAO,UAAoB,CAAC;CAC/B,CACF;CAEA,OACE,oBAAC,OAAD;EACE,eAAa;EACb,kBAAe;EACf,2BAAyB;EACzB,0BAAwB;EACxB,8BAA4B;EAC5B,WAAW,~~KAAK~~,mCAAO,qBAAqB,~~GACzC~~,mCAAO,OAAiB,CAAC,kBAC5B,CAAC;EAED,UAAA,oBAAC,OAAD;GACE,OAAO,EACL,sCAAsC,yBACxC;GACA,WAAW;EACZ,CAAA;CACE,CAAA;AAET"}
1	+ {"version":3,"file":"ComplexityIndicator.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"./ComplexityIndicator.module.scss\";\nimport { getStatusFromPolicyValidationResult } from \"@/components/PasswordCreationField/lib/getStatusFromPolicyValidationResult\";\nimport clsx from \"clsx\";\nimport type { ResolvedPolicyValidationResult } from \"@/components/PasswordCreationField/PasswordCreationField\";\nimport { type Status } from \"@/lib/types/props\";\nimport type { StateFromLatestPolicyValidationResult } from \"@/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult\";\n\nexport type ComplexityStatus = Exclude<Status, \"info\"> \| \"indeterminate\";\n\nexport interface ComplexityIndicatorProps {\n isLoading: boolean;\n isEmptyValue: boolean;\n validationResultState: StateFromLatestPolicyValidationResult;\n policyValidationResult: ResolvedPolicyValidationResult;\n /*\n The field is invalid for a reason outside the policy, e.g. a server error.\n * The bar then shows danger like the field, not the password's strength.\n /\n isInvalid?: boolean;\n}\n\n/* @internal /\nexport const ComplexityIndicator: FC<ComplexityIndicatorProps> = (props) => {\n const {\n policyValidationResult,\n validationResultState,\n isLoading,\n isEmptyValue,\n isInvalid,\n } = props;\n\n let complexityVisible;\n let status: ComplexityStatus;\n\n const complexityScore = policyValidationResult?.complexity;\n const rulesResults = policyValidationResult?.ruleResults ?? [];\n\n const complexityFulfilledPercentage = complexityScore\n ? Math.min(\n (100 / (complexityScore.min + 1)) (complexityScore.actual + 1),\n 100,\n )\n : 0;\n\n const validRules = rulesResults.filter((r) => r.isValid).length;\n const rulesFulfilledPercentage =\n rulesResults.length > 0 ? (validRules / rulesResults.length) * 100 : 0;\n\n let totalFulfilledPercentage = Math.round(\n complexityFulfilledPercentage * 0.8 + rulesFulfilledPercentage * 0.2,\n );\n\n if (isEmptyValue) {\n complexityVisible = false;\n totalFulfilledPercentage = 0;\n status = \"success\";\n } else {\n complexityVisible = true;\n status = isInvalid\n ? \"danger\"\n : getStatusFromPolicyValidationResult(\n validationResultState?.isValid ?? policyValidationResult.isValid,\n policyValidationResult,\n );\n }\n\n const complexityFulfilled = totalFulfilledPercentage === 100;\n\n const percentageClassName = clsx(\n styles.bar,\n !isEmptyValue &&\n status !== \"unavailable\" &&\n styles[`bar-background-status-${status}`],\n {\n [styles.loading as string]: isLoading,\n [styles.running as string]: !complexityFulfilled,\n },\n );\n\n return (\n <div\n aria-hidden={true}\n data-container=\"complexity\"\n data-complexity-visible={complexityVisible}\n data-complexity-status={status}\n data-complexity-percentage={totalFulfilledPercentage}\n className={clsx(styles.complexityIndicator, {\n [styles.hide as string]: !complexityVisible,\n })}\n >\n <div\n style={{\n \"--complexity-indicator--percentage\": totalFulfilledPercentage,\n }}\n className={percentageClassName}\n />\n </div>\n );\n};\n\nexport default ComplexityIndicator;\n"],"mappings":";;;;;;;;AAuBA,IAAa,uBAAqD,UAAU;CAC1E,MAAM,EACJ,wBACA,uBACA,WACA,cACA,cACE;CAEJ,IAAI;CACJ,IAAI;CAEJ,MAAM,kBAAkB,wBAAwB;CAChD,MAAM,eAAe,wBAAwB,eAAe,CAAC;CAE7D,MAAM,gCAAgC,kBAClC,KAAK,IACF,OAAO,gBAAgB,MAAM,MAAO,gBAAgB,SAAS,IAC9D,GACF,IACA;CAEJ,MAAM,aAAa,aAAa,QAAQ,MAAM,EAAE,OAAO,CAAC,CAAC;CACzD,MAAM,2BACJ,aAAa,SAAS,IAAK,aAAa,aAAa,SAAU,MAAM;CAEvE,IAAI,2BAA2B,KAAK,MAClC,gCAAgC,KAAM,2BAA2B,EACnE;CAEA,IAAI,cAAc;EAChB,oBAAoB;EACpB,2BAA2B;EAC3B,SAAS;CACX,OAAO;EACL,oBAAoB;EACpB,SAAS,YACL,WACA,oCACE,uBAAuB,WAAW,uBAAuB,SACzD,sBACF;CACN;CAEA,MAAM,sBAAsB,6BAA6B;CAEzD,MAAM,sBAAsB,KAC1BA,mCAAO,KACP,CAAC,gBACC,WAAW,iBACXA,mCAAO,yBAAyB,WAClC;GACGA,mCAAO,UAAoB;GAC3BA,mCAAO,UAAoB,CAAC;CAC/B,CACF;CAEA,OACE,oBAAC,OAAD;EACE,eAAa;EACb,kBAAe;EACf,2BAAyB;EACzB,0BAAwB;EACxB,8BAA4B;EAC5B,WAAW,KAAKA,mCAAO,qBAAqB,GACzCA,mCAAO,OAAiB,CAAC,kBAC5B,CAAC;EAED,UAAA,oBAAC,OAAD;GACE,OAAO,EACL,sCAAsC,yBACxC;GACA,WAAW;EACZ,CAAA;CACE,CAAA;AAET"}

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\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"}
1	+ {"version":3,"file":"PasswordGenerateButton.mjs","names":["locales"],"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,4BAChBA,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/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TogglePasswordVisibilityButton.mjs","names":[],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport { Tooltip, TooltipTrigger } from \"@/components/Tooltip\";\nimport Button from \"@/components/Button\";\nimport { IconHide, IconShow } from \"@/components/Icon/components/icons\";\nimport { Action, type ActionFn } from \"@/components/Action\";\nimport locales from \"./../../locales/.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\n\ninterface Props extends PropsWithClassName {\n isDisabled?: boolean;\n isVisible: boolean;\n onPress: ActionFn;\n}\n\n/* @internal */\nexport const TogglePasswordVisibilityButton: FC<Props> = ({\n isVisible,\n isDisabled = false,\n onPress,\n className,\n}) => {\n const translate = useLocalizedStringFormatter(\n locales,\n \"PasswordCreationField\",\n );\n\n const icon = isVisible ? <IconHide /> : <IconShow />;\n const tooltipText = translate.format(\n \"button.generate.tooltip.\" + (isVisible ? \"hide\" : \"show\"),\n );\n\n return (\n <Action onAction={onPress}>\n <TooltipTrigger>\n <Button\n className={className}\n size=\"m\"\n tunnel={null}\n variant=\"plain\"\n color=\"secondary\"\n isDisabled={isDisabled}\n data-component=\"toggleRevealPassword\"\n aria-label={tooltipText}\n >\n {icon}\n <Tooltip>{tooltipText}</Tooltip>\n </Button>\n </TooltipTrigger>\n </Action>\n );\n};\n\nexport default TogglePasswordVisibilityButton;\n"],"mappings":";;;;;;;;;;;;;;AAgBA,IAAa,kCAA6C,EACxD,WACA,aAAa,OACb,SACA,gBACI;CACJ,MAAM,YAAY,~~4BAChB~~,kBACA,uBACF;CAEA,MAAM,OAAO,YAAY,oBAAC,UAAD,CAAW,CAAA,IAAI,oBAAC,UAAD,CAAW,CAAA;CACnD,MAAM,cAAc,UAAU,OAC5B,8BAA8B,YAAY,SAAS,OACrD;CAEA,OACE,oBAAC,QAAD;EAAQ,UAAU;EAChB,UAAA,oBAAC,gBAAD,EAAA,UACE,qBAAC,QAAD;GACa;GACX,MAAK;GACL,QAAQ;GACR,SAAQ;GACR,OAAM;GACM;GACZ,kBAAe;GACf,cAAY;GARd,UAAA,CAUG,MACD,oBAAC,SAAD,EAAA,UAAU,YAAqB,CAAA,CACzB;EACM,CAAA,EAAA,CAAA;CACV,CAAA;AAEZ"}
1	+ {"version":3,"file":"TogglePasswordVisibilityButton.mjs","names":["locales"],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport { Tooltip, TooltipTrigger } from \"@/components/Tooltip\";\nimport Button from \"@/components/Button\";\nimport { IconHide, IconShow } from \"@/components/Icon/components/icons\";\nimport { Action, type ActionFn } from \"@/components/Action\";\nimport locales from \"./../../locales/.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\n\ninterface Props extends PropsWithClassName {\n isDisabled?: boolean;\n isVisible: boolean;\n onPress: ActionFn;\n}\n\n/* @internal */\nexport const TogglePasswordVisibilityButton: FC<Props> = ({\n isVisible,\n isDisabled = false,\n onPress,\n className,\n}) => {\n const translate = useLocalizedStringFormatter(\n locales,\n \"PasswordCreationField\",\n );\n\n const icon = isVisible ? <IconHide /> : <IconShow />;\n const tooltipText = translate.format(\n \"button.generate.tooltip.\" + (isVisible ? \"hide\" : \"show\"),\n );\n\n return (\n <Action onAction={onPress}>\n <TooltipTrigger>\n <Button\n className={className}\n size=\"m\"\n tunnel={null}\n variant=\"plain\"\n color=\"secondary\"\n isDisabled={isDisabled}\n data-component=\"toggleRevealPassword\"\n aria-label={tooltipText}\n >\n {icon}\n <Tooltip>{tooltipText}</Tooltip>\n </Button>\n </TooltipTrigger>\n </Action>\n );\n};\n\nexport default TogglePasswordVisibilityButton;\n"],"mappings":";;;;;;;;;;;;;;AAgBA,IAAa,kCAA6C,EACxD,WACA,aAAa,OACb,SACA,gBACI;CACJ,MAAM,YAAY,4BAChBA,kBACA,uBACF;CAEA,MAAM,OAAO,YAAY,oBAAC,UAAD,CAAW,CAAA,IAAI,oBAAC,UAAD,CAAW,CAAA;CACnD,MAAM,cAAc,UAAU,OAC5B,8BAA8B,YAAY,SAAS,OACrD;CAEA,OACE,oBAAC,QAAD;EAAQ,UAAU;EAChB,UAAA,oBAAC,gBAAD,EAAA,UACE,qBAAC,QAAD;GACa;GACX,MAAK;GACL,QAAQ;GACR,SAAQ;GACR,OAAM;GACM;GACZ,kBAAe;GACf,cAAY;GARd,UAAA,CAUG,MACD,oBAAC,SAAD,EAAA,UAAU,YAAqB,CAAA,CACzB;EACM,CAAA,EAAA,CAAA;CACV,CAAA;AAEZ"}

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, 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"}
1	+ {"version":3,"file":"ValidationResultButton.mjs","names":["locales","styles"],"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,4BAChBA,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,WAAWC,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/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 * 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"}
1	+ {"version":3,"file":"ValidationResultEntry.mjs","names":["locales","styles"],"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,4BAChBA,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,WAAWC,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.map CHANGED Viewed

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"ariaAnnounce.mjs","names":["locales"],"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,4BAChBA,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/usePolicyValidationResult.mjs CHANGED Viewed

@@ -34,6 +34,18 @@ var usePolicyValidationResult = (validationPolicy, password, onValidationStart,
 		if (password) validatePasswordDebounce(password);
 		else validatePassword(password);
 	}, [password, validationPolicy]);
+	/**
+	* Stores a result the caller already has (a generated password), so the
+	* validation of that password answers from the cache instead of rating it
+	* again.
+	*/
+	const rememberValidationResult = (pwd, results) => {
+		cache.current = {
+			password: pwd,
+			results
+		};
+	};
+	return { rememberValidationResult };
 };
 //#endregion
 export { usePolicyValidationResult };

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\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~~"}
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 /\n Stores a result the caller already has (a generated password), so the\n * validation of that password answers from the cache instead of rating it\n * again.\n */\n const rememberValidationResult = (\n pwd: string,\n results: ResolvedPolicyValidationResult,\n ) => {\n cache.current = { password: pwd, results };\n };\n\n return { rememberValidationResult } as const;\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;;;;;;CAO/B,MAAM,4BACJ,KACA,YACG;EACH,MAAM,UAAU;GAAE,UAAU;GAAK;EAAQ;CAC3C;CAEA,OAAO,EAAE,yBAAyB;AACpC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Popover.mjs","names":[],"sources":["../../../../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import { type PropsWithChildren, useCallback, useEffect } from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { type OverlayController, useOverlayController } from \"@/lib/controller\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport OverlayContextProvider from \"@/lib/controller/overlay/OverlayContextProvider\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\nimport styles from \"./Popover.module.scss\";\nimport PopoverContentView from \"@/views/PopoverContentView\";\n\nexport interface PopoverProps\n extends\n PropsWithChildren<Omit<Aria.PopoverProps, \"children\" \| \"ref\">>,\n FlowComponentProps<HTMLDivElement> {\n /*\n Whether the popover should display a tip, pointing towards the trigger\n * element.\n /\n withTip?: boolean;\n /* Whether the popover contains a dialog. /\n isDialogContent?: boolean;\n /\n @internal How the popover relates to the rest of the page. `\"modal\"` locks\n * the page below — scrolling blocked, everything outside `inert`, focus moved\n * in, and the popover a `dialog`. `\"non-modal\"` leaves the page alone: no\n * dialog semantics, and rendered where it stands instead of portalled to the\n * end of the body, so it keeps its place in the reading order. Not a variant\n * to pick — it is the shape `CoachMark` needs, and that component sets it.\n /\n modality?: \"modal\" \| \"non-modal\";\n /* An overlay controller to control the popover state. /\n controller?: OverlayController;\n /* A fixed width for the popover. /\n width?: string \| number;\n /\n Whether the popover is open. Use it to control the popover state – then\n * `onOpenChange` must update the state this value comes from.\n /\n isOpen?: boolean;\n /\n Whether the popover is open initially. Use it for an uncontrolled popover.\n \n @default false\n /\n isDefaultOpen?: boolean;\n /* @deprecated Use `isDefaultOpen` instead. /\n defaultOpen?: boolean;\n /\n Called with the new open state whenever the popover is opened or closed –\n * on every path, including a close triggered through the controller. It only\n * reports the change; it never performs or suppresses it.\n */\n onOpenChange?: (isOpen: boolean) => void;\n}\n\nexport const Popover = flowComponent(\"Popover\", (props) => {\n const {\n children,\n className,\n controller: controllerFromProps,\n onOpenChange: onOpenChangeFromProps,\n isOpen: isOpenFromProps,\n isDefaultOpen,\n defaultOpen,\n ...contentProps\n } = props;\n\n const warnDeprecation = useWarnDeprecation();\n\n if (defaultOpen !== undefined) {\n warnDeprecation(\n \"The 'defaultOpen' prop is deprecated and will be removed in a future release. Use 'isDefaultOpen' instead.\",\n );\n }\n\n const controllerFromContext = useOverlayController(\"Popover\", {\n reuseControllerFromContext: true,\n isDefaultOpen: isDefaultOpen ?? defaultOpen ?? false,\n });\n\n const controller = controllerFromProps ?? controllerFromContext;\n\n // The return value is dropped on purpose – the prop is typed to return\n // nothing and must not gain a controller handler's abort semantics.\n const notifyOpenChange = useCallback(\n (isOpen: boolean) => {\n onOpenChangeFromProps?.(isOpen);\n },\n [onOpenChangeFromProps],\n );\n\n controller.useUpdateOptions({ onOpenChange: notifyOpenChange });\n\n const isOpen = controller.useIsOpen();\n\n useEffect(() => {\n if (isOpenFromProps !== undefined && isOpenFromProps !== isOpen) {\n controller.syncOpen(isOpenFromProps);\n }\n }, [controller, isOpenFromProps, isOpen]);\n\n const rootClassName = clsx(styles.popover, className);\n\n return (\n <PopoverContentView\n {...contentProps}\n className={rootClassName}\n isOpen={isOpen}\n onOpenChange={controller.setOpen}\n >\n <OverlayContextProvider type=\"Popover\" controller={controller}>\n {children}\n </OverlayContextProvider>\n </PopoverContentView>\n );\n});\n\nexport default Popover;\n"],"mappings":";;;;;;;;;;;;AA0DA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EACJ,UACA,WACA,YAAY,qBACZ,cAAc,uBACd,QAAQ,iBACR,eACA,aACA,GAAG,iBACD;CAEJ,MAAM,kBAAkB,mBAAmB;CAE3C,IAAI,gBAAgB,KAAA,GAClB,gBACE,4GACF;CAGF,MAAM,wBAAwB,qBAAqB,WAAW;EAC5D,4BAA4B;EAC5B,eAAe,iBAAiB,eAAe;CACjD,CAAC;CAED,MAAM,aAAa,uBAAuB;CAI1C,MAAM,mBAAmB,aACtB,WAAoB;EACnB,wBAAwB,MAAM;CAChC,GACA,CAAC,qBAAqB,CACxB;CAEA,WAAW,iBAAiB,EAAE,cAAc,iBAAiB,CAAC;CAE9D,MAAM,SAAS,WAAW,UAAU;CAEpC,gBAAgB;EACd,IAAI,oBAAoB,KAAA,KAAa,oBAAoB,QACvD,WAAW,SAAS,eAAe;CAEvC,GAAG;EAAC;EAAY;EAAiB;CAAM,CAAC;CAExC,MAAM,gBAAgB,~~KAAK~~,uBAAO,SAAS,SAAS;CAEpD,OACE,oBAAC,oBAAD;EACE,GAAI;EACJ,WAAW;EACH;EACR,cAAc,WAAW;EAEzB,UAAA,oBAAC,wBAAD;GAAwB,MAAK;GAAsB;GAChD;EACqB,CAAA;CACN,CAAA;AAExB,CAAC"}
1	+ {"version":3,"file":"Popover.mjs","names":["styles"],"sources":["../../../../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import { type PropsWithChildren, useCallback, useEffect } from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { type OverlayController, useOverlayController } from \"@/lib/controller\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport OverlayContextProvider from \"@/lib/controller/overlay/OverlayContextProvider\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\nimport styles from \"./Popover.module.scss\";\nimport PopoverContentView from \"@/views/PopoverContentView\";\n\nexport interface PopoverProps\n extends\n PropsWithChildren<Omit<Aria.PopoverProps, \"children\" \| \"ref\">>,\n FlowComponentProps<HTMLDivElement> {\n /*\n Whether the popover should display a tip, pointing towards the trigger\n * element.\n /\n withTip?: boolean;\n /* Whether the popover contains a dialog. /\n isDialogContent?: boolean;\n /\n @internal How the popover relates to the rest of the page. `\"modal\"` locks\n * the page below — scrolling blocked, everything outside `inert`, focus moved\n * in, and the popover a `dialog`. `\"non-modal\"` leaves the page alone: no\n * dialog semantics, and rendered where it stands instead of portalled to the\n * end of the body, so it keeps its place in the reading order. Not a variant\n * to pick — it is the shape `CoachMark` needs, and that component sets it.\n /\n modality?: \"modal\" \| \"non-modal\";\n /* An overlay controller to control the popover state. /\n controller?: OverlayController;\n /* A fixed width for the popover. /\n width?: string \| number;\n /\n Whether the popover is open. Use it to control the popover state – then\n * `onOpenChange` must update the state this value comes from.\n /\n isOpen?: boolean;\n /\n Whether the popover is open initially. Use it for an uncontrolled popover.\n \n @default false\n /\n isDefaultOpen?: boolean;\n /* @deprecated Use `isDefaultOpen` instead. /\n defaultOpen?: boolean;\n /\n Called with the new open state whenever the popover is opened or closed –\n * on every path, including a close triggered through the controller. It only\n * reports the change; it never performs or suppresses it.\n */\n onOpenChange?: (isOpen: boolean) => void;\n}\n\nexport const Popover = flowComponent(\"Popover\", (props) => {\n const {\n children,\n className,\n controller: controllerFromProps,\n onOpenChange: onOpenChangeFromProps,\n isOpen: isOpenFromProps,\n isDefaultOpen,\n defaultOpen,\n ...contentProps\n } = props;\n\n const warnDeprecation = useWarnDeprecation();\n\n if (defaultOpen !== undefined) {\n warnDeprecation(\n \"The 'defaultOpen' prop is deprecated and will be removed in a future release. Use 'isDefaultOpen' instead.\",\n );\n }\n\n const controllerFromContext = useOverlayController(\"Popover\", {\n reuseControllerFromContext: true,\n isDefaultOpen: isDefaultOpen ?? defaultOpen ?? false,\n });\n\n const controller = controllerFromProps ?? controllerFromContext;\n\n // The return value is dropped on purpose – the prop is typed to return\n // nothing and must not gain a controller handler's abort semantics.\n const notifyOpenChange = useCallback(\n (isOpen: boolean) => {\n onOpenChangeFromProps?.(isOpen);\n },\n [onOpenChangeFromProps],\n );\n\n controller.useUpdateOptions({ onOpenChange: notifyOpenChange });\n\n const isOpen = controller.useIsOpen();\n\n useEffect(() => {\n if (isOpenFromProps !== undefined && isOpenFromProps !== isOpen) {\n controller.syncOpen(isOpenFromProps);\n }\n }, [controller, isOpenFromProps, isOpen]);\n\n const rootClassName = clsx(styles.popover, className);\n\n return (\n <PopoverContentView\n {...contentProps}\n className={rootClassName}\n isOpen={isOpen}\n onOpenChange={controller.setOpen}\n >\n <OverlayContextProvider type=\"Popover\" controller={controller}>\n {children}\n </OverlayContextProvider>\n </PopoverContentView>\n );\n});\n\nexport default Popover;\n"],"mappings":";;;;;;;;;;;;AA0DA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EACJ,UACA,WACA,YAAY,qBACZ,cAAc,uBACd,QAAQ,iBACR,eACA,aACA,GAAG,iBACD;CAEJ,MAAM,kBAAkB,mBAAmB;CAE3C,IAAI,gBAAgB,KAAA,GAClB,gBACE,4GACF;CAGF,MAAM,wBAAwB,qBAAqB,WAAW;EAC5D,4BAA4B;EAC5B,eAAe,iBAAiB,eAAe;CACjD,CAAC;CAED,MAAM,aAAa,uBAAuB;CAI1C,MAAM,mBAAmB,aACtB,WAAoB;EACnB,wBAAwB,MAAM;CAChC,GACA,CAAC,qBAAqB,CACxB;CAEA,WAAW,iBAAiB,EAAE,cAAc,iBAAiB,CAAC;CAE9D,MAAM,SAAS,WAAW,UAAU;CAEpC,gBAAgB;EACd,IAAI,oBAAoB,KAAA,KAAa,oBAAoB,QACvD,WAAW,SAAS,eAAe;CAEvC,GAAG;EAAC;EAAY;EAAiB;CAAM,CAAC;CAExC,MAAM,gBAAgB,KAAKA,uBAAO,SAAS,SAAS;CAEpD,OACE,oBAAC,oBAAD;EACE,GAAI;EACJ,WAAW;EACH;EACR,cAAc,WAAW;EAEzB,UAAA,oBAAC,wBAAD;GAAwB,MAAK;GAAsB;GAChD;EACqB,CAAA;CACN,CAAA;AAExB,CAAC"}