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

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

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

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"}

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PopoverTip.mjs","names":[],"sources":["../../../../../../../../../src/components/Popover/components/PopoverTip/PopoverTip.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"../../Popover.module.scss\";\n\n/\n The tip's shape — and only the shape. What positions it differs per popover\n * path: the modal one uses `Aria.OverlayArrow`, which takes the placement from\n * a context that only `Aria.Popover` puts up and that react-aria-components\n * does not export, while the non-modal one builds its wrapper from what\n * `useOverlayPosition` hands it. Both wrappers carry `.tip`; `.tipIcon` is the\n * hook `Popover.module.scss` fills, strokes and turns to face the trigger.\n */\nexport const PopoverTip: FC = () => (\n <svg\n className={styles.tipIcon}\n width={16}\n height={16}\n viewBox=\"0 0 16 16\"\n aria-hidden\n >\n <path d=\"M0 0 L8 8 L16 0\" />\n </svg>\n);\n"],"mappings":";;;;;AAWA,IAAa,mBACX,oBAAC,OAAD;CACE,~~WAAW~~,uBAAO;CAClB,OAAO;CACP,QAAQ;CACR,SAAQ;CACR,eAAA;CAEA,UAAA,oBAAC,QAAD,EAAM,GAAE,kBAAmB,CAAA;AACxB,CAAA"}
1	+ {"version":3,"file":"PopoverTip.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Popover/components/PopoverTip/PopoverTip.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"../../Popover.module.scss\";\n\n/\n The tip's shape — and only the shape. What positions it differs per popover\n * path: the modal one uses `Aria.OverlayArrow`, which takes the placement from\n * a context that only `Aria.Popover` puts up and that react-aria-components\n * does not export, while the non-modal one builds its wrapper from what\n * `useOverlayPosition` hands it. Both wrappers carry `.tip`; `.tipIcon` is the\n * hook `Popover.module.scss` fills, strokes and turns to face the trigger.\n */\nexport const PopoverTip: FC = () => (\n <svg\n className={styles.tipIcon}\n width={16}\n height={16}\n viewBox=\"0 0 16 16\"\n aria-hidden\n >\n <path d=\"M0 0 L8 8 L16 0\" />\n </svg>\n);\n"],"mappings":";;;;;AAWA,IAAa,mBACX,oBAAC,OAAD;CACE,WAAWA,uBAAO;CAClB,OAAO;CACP,QAAQ;CACR,SAAQ;CACR,eAAA;CAEA,UAAA,oBAAC,QAAD,EAAM,GAAE,kBAAmB,CAAA;AACxB,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"viewportPadding.mjs","names":[],"sources":["../../../../../../../src/components/Popover/viewportPadding.ts"],"sourcesContent":["import tokens from \"@mittwald/flow-design-tokens/json-runtime/all-light.json\";\n\n/*\n The gap a popover keeps to the viewport edge. The stylesheet caps the\n * popover's width with it, `containerPadding` insets the position by it — and\n * `containerPadding` is a number, so it cannot read the CSS variable.\n \n @internal\n */\nexport const popoverViewportPadding = Number.parseFloat(\n tokens.popover[\"viewport-padding\"].value,\n);\n"],"mappings":";;;;;;;;;;;AASA,IAAa,yBAAyB,OAAO,~~WAC3C~~,kBAAO,QAAQ,mBAAmB,CAAC,KACrC"}
1	+ {"version":3,"file":"viewportPadding.mjs","names":["tokens"],"sources":["../../../../../../../src/components/Popover/viewportPadding.ts"],"sourcesContent":["import tokens from \"@mittwald/flow-design-tokens/json-runtime/all-light.json\";\n\n/*\n The gap a popover keeps to the viewport edge. The stylesheet caps the\n * popover's width with it, `containerPadding` insets the position by it — and\n * `containerPadding` is a number, so it cannot read the CSS variable.\n \n @internal\n */\nexport const popoverViewportPadding = Number.parseFloat(\n tokens.popover[\"viewport-padding\"].value,\n);\n"],"mappings":";;;;;;;;;;;AASA,IAAa,yBAAyB,OAAO,WAC3CA,kBAAO,QAAQ,mBAAmB,CAAC,KACrC"}

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

@@ -2,6 +2,7 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import ProgressBar_module_default from "./ProgressBar.module.mjs";
 import { ProgressBarValue } from "./components/ProgressBarValue.mjs";
 import { ProgressBarBar } from "./components/ProgressBarBar.mjs";
@@ -13,7 +14,8 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var ProgressBar = flowComponent("ProgressBar", (props) => {
 	const { children, className, status = "info", showMaxValue, size = "m", segments, value, formatOptions, showLegend = true, maxValue, valueLabel, ...rest } = props;
-	const rootClassName = clsx(ProgressBar_module_default.progressBar, ProgressBar_module_default[`size-${size}`], ProgressBar_module_default[status], className);
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(ProgressBar_module_default.progressBar, ProgressBar_module_default[`size-${size}`], ProgressBar_module_default[status], isSkeleton && ProgressBar_module_default.skeleton, className);
 	const propsContext = { Label: {
 		className: ProgressBar_module_default.label,
 		unstyled: true
@@ -25,6 +27,7 @@ var ProgressBar = flowComponent("ProgressBar", (props) => {
 		formatOptions,
 		maxValue,
 		...rest,
+		inert: isSkeleton || void 0,
 		children: ({ percentage }) => /* @__PURE__ */ jsxs(PropsContextProvider, {
 			props: propsContext,
 			children: [

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBar.mjs","names":[],"sources":["../../../../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\nimport styles from \"./ProgressBar.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { ProgressBarValue } from \"@/components/ProgressBar/components/ProgressBarValue\";\nimport { ProgressBarBar } from \"@/components/ProgressBar/components/ProgressBarBar\";\nimport { ProgressBarLegend } from \"@/components/ProgressBar/components/ProgressBarLegend\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { Status } from \"@/lib/types/props\";\n\nexport interface ProgressBarProps\n extends\n PropsWithChildren<Omit<Aria.ProgressBarProps, \"children\">>,\n FlowComponentProps {\n /** The status the progress bar is colored by. /\n status?: Exclude<Status, \"unavailable\">;\n /* Whether the max value should be displayed. /\n showMaxValue?: boolean;\n /* The size variant of the progress bar. @default \"m\" /\n size?: \"s\" \| \"m\" \| \"l\";\n /* Divides the fill of the progress bar into segments /\n segments?: {\n value: number;\n title: string;\n color?: CategoricalWithCustomColor;\n valueText?: string;\n }[];\n /\n Whether the legend component is shown when segments are used. @default:\n * true\n /\n showLegend?: boolean;\n}\n\n/* @flr-generate all */\nexport const ProgressBar = flowComponent(\"ProgressBar\", (props) => {\n const {\n children,\n className,\n status = \"info\",\n showMaxValue,\n size = \"m\",\n segments,\n value,\n formatOptions,\n showLegend = true,\n maxValue,\n valueLabel,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.progressBar,\n styles[`size-${size}`],\n styles[status],\n className,\n );\n\n const propsContext: PropsContext = {\n Label: {\n className: styles.label,\n unstyled: true,\n },\n };\n\n const segmentsTotalValue = segments\n ? segments.map((s) => s.value).reduce((a, b) => a + b, 0)\n : undefined;\n\n return (\n <Aria.ProgressBar\n className={rootClassName}\n value={segmentsTotalValue ?? value}\n formatOptions={formatOptions}\n maxValue={maxValue}\n {...rest}\n >\n {({ percentage }) => (\n <PropsContextProvider props={propsContext}>\n {children}\n\n <ProgressBarValue\n showMaxValue={showMaxValue}\n maxValue={maxValue}\n formatOptions={formatOptions}\n value={segmentsTotalValue ?? value}\n valueLabel={valueLabel}\n />\n\n <ProgressBarBar percentage={percentage} segments={segments} />\n\n <ProgressBarLegend\n showLegend={showLegend}\n segments={segments}\n formatOptions={formatOptions}\n />\n </PropsContextProvider>\n )}\n </Aria.ProgressBar>\n );\n});\n\nexport default ProgressBar;\n"],"mappings":"~~;;;;;;;;;;;;;AAyCA~~,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EACJ,UACA,WACA,SAAS,QACT,cACA,OAAO,KACP,UACA,OACA,eACA,aAAa,MACb,UACA,YACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,~~KACpB~~,2BAAO,~~aACP~~,2BAAO,QAAQ,~~SACf~~,2BAAO,SACP,SACF;CAEA,MAAM,eAA6B,EACjC,OAAO;EACL,~~WAAW~~,2BAAO;EAClB,UAAU;CACZ,EACF;CAEA,MAAM,qBAAqB,WACvB,SAAS,KAAK,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,GAAG,MAAM,IAAI,GAAG,CAAC,IACtD,KAAA;CAEJ,OACE,oBAAC,KAAK,aAAN;EACE,WAAW;EACX,OAAO,sBAAsB;EACd;EACL;EACV,GAAI;~~EAEF~~,WAAA,EAAE,iBACF,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACG;IAED,oBAAC,kBAAD;KACgB;KACJ;KACK;KACf,OAAO,sBAAsB;KACjB;IACb,CAAA;IAED,oBAAC,gBAAD;KAA4B;KAAsB;IAAW,CAAA;IAE7D,oBAAC,mBAAD;KACc;KACF;KACK;IAChB,CAAA;GACmB;;CAER,CAAA;AAEtB,CAAC"}
1	+ {"version":3,"file":"ProgressBar.mjs","names":["styles"],"sources":["../../../../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\nimport styles from \"./ProgressBar.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { ProgressBarValue } from \"@/components/ProgressBar/components/ProgressBarValue\";\nimport { ProgressBarBar } from \"@/components/ProgressBar/components/ProgressBarBar\";\nimport { ProgressBarLegend } from \"@/components/ProgressBar/components/ProgressBarLegend\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { Status } from \"@/lib/types/props\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface ProgressBarProps\n extends\n PropsWithChildren<Omit<Aria.ProgressBarProps, \"children\">>,\n FlowComponentProps {\n /** The status the progress bar is colored by. /\n status?: Exclude<Status, \"unavailable\">;\n /* Whether the max value should be displayed. /\n showMaxValue?: boolean;\n /* The size variant of the progress bar. @default \"m\" /\n size?: \"s\" \| \"m\" \| \"l\";\n /* Divides the fill of the progress bar into segments /\n segments?: {\n value: number;\n title: string;\n color?: CategoricalWithCustomColor;\n valueText?: string;\n }[];\n /\n Whether the legend component is shown when segments are used. @default:\n * true\n /\n showLegend?: boolean;\n}\n\n/* @flr-generate all */\nexport const ProgressBar = flowComponent(\"ProgressBar\", (props) => {\n const {\n children,\n className,\n status = \"info\",\n showMaxValue,\n size = \"m\",\n segments,\n value,\n formatOptions,\n showLegend = true,\n maxValue,\n valueLabel,\n ...rest\n } = props;\n\n const isSkeleton = useSkeletonMode();\n\n const rootClassName = clsx(\n styles.progressBar,\n styles[`size-${size}`],\n styles[status],\n isSkeleton && styles.skeleton,\n className,\n );\n\n const propsContext: PropsContext = {\n Label: {\n className: styles.label,\n unstyled: true,\n },\n };\n\n const segmentsTotalValue = segments\n ? segments.map((s) => s.value).reduce((a, b) => a + b, 0)\n : undefined;\n\n return (\n <Aria.ProgressBar\n className={rootClassName}\n value={segmentsTotalValue ?? value}\n formatOptions={formatOptions}\n maxValue={maxValue}\n {...rest}\n inert={isSkeleton \|\| undefined}\n >\n {({ percentage }) => (\n <PropsContextProvider props={propsContext}>\n {children}\n\n <ProgressBarValue\n showMaxValue={showMaxValue}\n maxValue={maxValue}\n formatOptions={formatOptions}\n value={segmentsTotalValue ?? value}\n valueLabel={valueLabel}\n />\n\n <ProgressBarBar percentage={percentage} segments={segments} />\n\n <ProgressBarLegend\n showLegend={showLegend}\n segments={segments}\n formatOptions={formatOptions}\n />\n </PropsContextProvider>\n )}\n </Aria.ProgressBar>\n );\n});\n\nexport default ProgressBar;\n"],"mappings":";;;;;;;;;;;;;;AA0CA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EACJ,UACA,WACA,SAAS,QACT,cACA,OAAO,KACP,UACA,OACA,eACA,aAAa,MACb,UACA,YACA,GAAG,SACD;CAEJ,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,2BAAO,aACPA,2BAAO,QAAQ,SACfA,2BAAO,SACP,cAAcA,2BAAO,UACrB,SACF;CAEA,MAAM,eAA6B,EACjC,OAAO;EACL,WAAWA,2BAAO;EAClB,UAAU;CACZ,EACF;CAEA,MAAM,qBAAqB,WACvB,SAAS,KAAK,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,GAAG,MAAM,IAAI,GAAG,CAAC,IACtD,KAAA;CAEJ,OACE,oBAAC,KAAK,aAAN;EACE,WAAW;EACX,OAAO,sBAAsB;EACd;EACL;EACV,GAAI;EACJ,OAAO,cAAc,KAAA;EAEnB,WAAA,EAAE,iBACF,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACG;IAED,oBAAC,kBAAD;KACgB;KACJ;KACK;KACf,OAAO,sBAAsB;KACjB;IACb,CAAA;IAED,oBAAC,gBAAD;KAA4B;KAAsB;IAAW,CAAA;IAE7D,oBAAC,mBAAD;KACc;KACF;KACK;IAChB,CAAA;GACmB;;CAER,CAAA;AAEtB,CAAC"}

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

@@ -12,6 +12,7 @@ var info = "flow--progress-bar--info";
 var success = "flow--progress-bar--success";
 var danger = "flow--progress-bar--danger";
 var warning = "flow--progress-bar--warning";
+var skeleton = "flow--progress-bar--skeleton";
 var ProgressBar_module_default = {
 	progressBar,
 	legend,
@@ -27,9 +28,12 @@ var ProgressBar_module_default = {
 	info,
 	success,
 	danger,
-	warning
+	warning,
+	skeleton,
+	"skeleton-surface-shimmer": "flow--progress-bar--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--progress-bar--skeleton-text-shimmer"
 };
 //#endregion
-export { bar, danger, ProgressBar_module_default as default, fill, info, label, legend, progressBar, segment, success, value, warning };
+export { bar, danger, ProgressBar_module_default as default, fill, info, label, legend, progressBar, segment, skeleton, success, value, warning };
 //# sourceMappingURL=ProgressBar.module.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBar.module.mjs","names":[],"sources":["../../../../../../../src/components/ProgressBar/ProgressBar.module.scss"],"sourcesContent":[".progressBar {\n display: grid;\n grid-template-areas:\n \"label value\"\n \"bar bar\";\n grid-template-columns: 1fr auto;\n column-gap: var(--progress-bar--spacing-x);\n width: 100%;\n font-size: var(--progress-bar--font-size);\n\n @extend .size-m;\n @extend .info;\n\n &:has(.legend) {\n grid-template-areas:\n \"label value\"\n \"bar bar\"\n \"legend legend\";\n }\n\n /* Elements /\n\n .label {\n grid-area: label;\n }\n\n .value {\n grid-area: value;\n font-weight: var(--progress-bar--value-font-weight);\n }\n\n .bar {\n grid-area: bar;\n border-radius: var(--progress-bar--corner-radius);\n background-color: var(--progress-bar--background-color);\n box-shadow: inset 0 0 0 var(--progress-bar--border-width)\n var(--progress-bar--border-color);\n overflow: hidden;\n margin-top: var(--progress-bar--spacing-y);\n }\n\n .fill {\n height: 100%;\n width: calc(var(--progress-bar--percentage) 1%);\n display: flex;\n animation: progress-bar-fill var(--progress-bar--transition-duration) ease;\n }\n\n /* Segments share the fill in proportion to their values. /\n .segment {\n flex: var(--progress-bar--segment-value) 1 0;\n }\n\n .legend {\n grid-area: legend;\n margin-top: var(--progress-bar--spacing-bar-to-legend);\n }\n\n / Size /\n\n &.size-s {\n font-size: var(--progress-bar--font-size-s);\n }\n\n / Sizes /\n\n @mixin size($size) {\n &.size-#{$size} {\n .bar {\n height: var(--progress-bar--height--#{$size});\n }\n }\n }\n\n @include size(s);\n @include size(m);\n @include size(l);\n\n / Variants /\n\n @mixin status($status) {\n &.#{$status} {\n .fill {\n background: var(--progress-bar--#{$status}-fill-background-color);\n }\n }\n }\n\n @include status(info);\n @include status(success);\n @include status(danger);\n @include status(warning);\n}\n\n/ The implicit \"to\" keyframe picks up the fill's inline width. */\n@keyframes progress-bar-fill {\n from {\n width: 0%;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"ProgressBar.module.mjs","names":[],"sources":["../../../../../../../src/components/ProgressBar/ProgressBar.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.progressBar {\n display: grid;\n grid-template-areas:\n \"label value\"\n \"bar bar\";\n grid-template-columns: 1fr auto;\n column-gap: var(--progress-bar--spacing-x);\n width: 100%;\n font-size: var(--progress-bar--font-size);\n\n @extend .size-m;\n @extend .info;\n\n &:has(.legend) {\n grid-template-areas:\n \"label value\"\n \"bar bar\"\n \"legend legend\";\n }\n\n /* Elements /\n\n .label {\n grid-area: label;\n }\n\n .value {\n grid-area: value;\n font-weight: var(--progress-bar--value-font-weight);\n }\n\n .bar {\n grid-area: bar;\n border-radius: var(--progress-bar--corner-radius);\n background-color: var(--progress-bar--background-color);\n box-shadow: inset 0 0 0 var(--progress-bar--border-width)\n var(--progress-bar--border-color);\n overflow: hidden;\n margin-top: var(--progress-bar--spacing-y);\n }\n\n .fill {\n height: 100%;\n width: calc(var(--progress-bar--percentage) 1%);\n display: flex;\n animation: progress-bar-fill var(--progress-bar--transition-duration) ease;\n }\n\n /* Segments share the fill in proportion to their values. /\n .segment {\n flex: var(--progress-bar--segment-value) 1 0;\n }\n\n .legend {\n grid-area: legend;\n margin-top: var(--progress-bar--spacing-bar-to-legend);\n }\n\n / Size /\n\n &.size-s {\n font-size: var(--progress-bar--font-size-s);\n }\n\n / Sizes /\n\n @mixin size($size) {\n &.size-#{$size} {\n .bar {\n height: var(--progress-bar--height--#{$size});\n }\n }\n }\n\n @include size(s);\n @include size(m);\n @include size(l);\n\n / Variants /\n\n @mixin status($status) {\n &.#{$status} {\n .fill {\n background: var(--progress-bar--#{$status}-fill-background-color);\n }\n }\n }\n\n @include status(info);\n @include status(success);\n @include status(danger);\n @include status(warning);\n\n / SkeletonMode: the track is a surface, the value stays hidden /\n &.skeleton {\n .bar {\n @include skeleton.surface;\n\n --skeleton-radius: var(--progress-bar--corner-radius);\n\n box-shadow: none;\n }\n\n .value {\n visibility: hidden;\n }\n }\n}\n\n@include skeleton.keyframes;\n\n/ The implicit \"to\" keyframe picks up the fill's inline width. */\n@keyframes progress-bar-fill {\n from {\n width: 0%;\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/ProgressBar/components/ProgressBarBar.mjs CHANGED Viewed

@@ -1,5 +1,6 @@
 "use client"
 /* */
+import { useSkeletonMode } from "../../SkeletonMode/skeletonModeContext.mjs";
 import { isCategoricalColor } from "../../../lib/tokens/isCategoricalColor.mjs";
 import ProgressBar_module_default from "../ProgressBar.module.mjs";
 import { getCategoricalColorByIndex } from "../../../lib/tokens/getCategoricalColorByIndex.mjs";
@@ -7,6 +8,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/ProgressBar/components/ProgressBarBar.tsx
 var ProgressBarBar = (props) => {
 	const { segments, percentage } = props;
+	if (useSkeletonMode()) return /* @__PURE__ */ jsx("div", { className: ProgressBar_module_default.bar });
 	const segmentFill = segments && segments.length > 0 ? segments.map((s, i) => {
 		const backgroundColor = !s.color ? `var(--color--categorical--${getCategoricalColorByIndex(i)})` : isCategoricalColor(s.color) ? `var(--color--categorical--${s.color})` : s.color;
 		return /* @__PURE__ */ jsx("div", {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBarBar.mjs","names":[],"sources":["../../../../../../../../src/components/ProgressBar/components/ProgressBarBar.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport type { FC } from \"react\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\n\ninterface Props extends Pick<ProgressBarProps, \"segments\"> {\n percentage?: number;\n}\n\nexport const ProgressBarBar: FC<Props> = (props) => {\n const { segments, percentage } = props;\n\n const segmentFill =\n segments && segments.length > 0\n ? segments.map((s, i) => {\n const backgroundColor = !s.color\n ? `var(--color--categorical--${getCategoricalColorByIndex(i)})`\n : isCategoricalColor(s.color)\n ? `var(--color--categorical--${s.color})`\n : s.color;\n\n return (\n <div\n key={s.title}\n aria-hidden\n className={styles.segment}\n style={{\n backgroundColor,\n \"--progress-bar--segment-value\": s.value,\n }}\n />\n );\n })\n : null;\n\n return (\n <div className={styles.bar}>\n <div\n className={styles.fill}\n style={{ \"--progress-bar--percentage\": percentage }}\n >\n {segmentFill}\n </div>\n </div>\n );\n};\n"],"mappings":"~~;;;;;;;AAUA~~,IAAa,kBAA6B,UAAU;CAClD,MAAM,EAAE,UAAU,eAAe;~~CAEjC~~,MAAM,cACJ,YAAY,SAAS,SAAS,IAC1B,SAAS,KAAK,GAAG,MAAM;EACrB,MAAM,kBAAkB,CAAC,EAAE,QACvB,6BAA6B,2BAA2B,CAAC,EAAE,KAC3D,mBAAmB,EAAE,KAAK,IACxB,6BAA6B,EAAE,MAAM,KACrC,EAAE;EAER,OACE,oBAAC,OAAD;GAEE,eAAA;GACA,~~WAAW~~,2BAAO;GAClB,OAAO;IACL;IACA,iCAAiC,EAAE;GACrC;EACD,GAPM,EAAE,KAOR;CAEL,CAAC,IACD;CAEN,OACE,oBAAC,OAAD;EAAK,~~WAAW~~,2BAAO;EACrB,UAAA,oBAAC,OAAD;GACE,~~WAAW~~,2BAAO;GAClB,OAAO,EAAE,8BAA8B,WAAW;GAEjD,UAAA;EACE,CAAA;CACF,CAAA;AAET"}
1	+ {"version":3,"file":"ProgressBarBar.mjs","names":["styles"],"sources":["../../../../../../../../src/components/ProgressBar/components/ProgressBarBar.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport type { FC } from \"react\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\ninterface Props extends Pick<ProgressBarProps, \"segments\"> {\n percentage?: number;\n}\n\nexport const ProgressBarBar: FC<Props> = (props) => {\n const { segments, percentage } = props;\n\n const isSkeleton = useSkeletonMode();\n\n /* In the mode, the track stays and shows no value. */\n if (isSkeleton) {\n return <div className={styles.bar} />;\n }\n\n const segmentFill =\n segments && segments.length > 0\n ? segments.map((s, i) => {\n const backgroundColor = !s.color\n ? `var(--color--categorical--${getCategoricalColorByIndex(i)})`\n : isCategoricalColor(s.color)\n ? `var(--color--categorical--${s.color})`\n : s.color;\n\n return (\n <div\n key={s.title}\n aria-hidden\n className={styles.segment}\n style={{\n backgroundColor,\n \"--progress-bar--segment-value\": s.value,\n }}\n />\n );\n })\n : null;\n\n return (\n <div className={styles.bar}>\n <div\n className={styles.fill}\n style={{ \"--progress-bar--percentage\": percentage }}\n >\n {segmentFill}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;AAWA,IAAa,kBAA6B,UAAU;CAClD,MAAM,EAAE,UAAU,eAAe;CAKjC,IAHmB,gBAGf,GACF,OAAO,oBAAC,OAAD,EAAK,WAAWA,2BAAO,IAAM,CAAA;CAGtC,MAAM,cACJ,YAAY,SAAS,SAAS,IAC1B,SAAS,KAAK,GAAG,MAAM;EACrB,MAAM,kBAAkB,CAAC,EAAE,QACvB,6BAA6B,2BAA2B,CAAC,EAAE,KAC3D,mBAAmB,EAAE,KAAK,IACxB,6BAA6B,EAAE,MAAM,KACrC,EAAE;EAER,OACE,oBAAC,OAAD;GAEE,eAAA;GACA,WAAWA,2BAAO;GAClB,OAAO;IACL;IACA,iCAAiC,EAAE;GACrC;EACD,GAPM,EAAE,KAOR;CAEL,CAAC,IACD;CAEN,OACE,oBAAC,OAAD;EAAK,WAAWA,2BAAO;EACrB,UAAA,oBAAC,OAAD;GACE,WAAWA,2BAAO;GAClB,OAAO,EAAE,8BAA8B,WAAW;GAEjD,UAAA;EACE,CAAA;CACF,CAAA;AAET"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBarLegend.mjs","names":[],"sources":["../../../../../../../../src/components/ProgressBar/components/ProgressBarLegend.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport { type FC } from \"react\";\nimport { useNumberFormatter } from \"react-aria\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\nimport { Legend, LegendItem } from \"@/components/Legend\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\n\ntype Props = Pick<\n ProgressBarProps,\n \"segments\" \| \"showLegend\" \| \"formatOptions\"\n>;\n\nexport const ProgressBarLegend: FC<Props> = (props) => {\n const { segments, showLegend, formatOptions } = props;\n\n const formatter = useNumberFormatter(formatOptions);\n\n if (!segments \|\| !showLegend) {\n return null;\n }\n\n return (\n <Legend className={styles.legend}>\n {segments.map((s, i) => (\n <LegendItem\n key={s.title}\n color={s.color ?? getCategoricalColorByIndex(i)}\n >{`${s.title} (${s.valueText ?? (formatOptions ? formatter.format(s.value) : `${s.value} %`)})`}</LegendItem>\n ))}\n </Legend>\n );\n};\n"],"mappings":";;;;;;;;;;AAYA,IAAa,qBAAgC,UAAU;CACrD,MAAM,EAAE,UAAU,YAAY,kBAAkB;CAEhD,MAAM,YAAY,mBAAmB,aAAa;CAElD,IAAI,CAAC,YAAY,CAAC,YAChB,OAAO;CAGT,OACE,oBAAC,QAAD;EAAQ,~~WAAW~~,2BAAO;EACvB,UAAA,SAAS,KAAK,GAAG,MAChB,oBAAC,YAAD;GAEE,OAAO,EAAE,SAAS,2BAA2B,CAAC;GAC9C,UAAA,GAAG,EAAE,MAAM,IAAI,EAAE,cAAc,gBAAgB,UAAU,OAAO,EAAE,KAAK,IAAI,GAAG,EAAE,MAAM,KAAK;EAAe,GAFrG,EAAE,KAEmG,CAC7G;CACK,CAAA;AAEZ"}
1	+ {"version":3,"file":"ProgressBarLegend.mjs","names":["styles"],"sources":["../../../../../../../../src/components/ProgressBar/components/ProgressBarLegend.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport { type FC } from \"react\";\nimport { useNumberFormatter } from \"react-aria\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\nimport { Legend, LegendItem } from \"@/components/Legend\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\n\ntype Props = Pick<\n ProgressBarProps,\n \"segments\" \| \"showLegend\" \| \"formatOptions\"\n>;\n\nexport const ProgressBarLegend: FC<Props> = (props) => {\n const { segments, showLegend, formatOptions } = props;\n\n const formatter = useNumberFormatter(formatOptions);\n\n if (!segments \|\| !showLegend) {\n return null;\n }\n\n return (\n <Legend className={styles.legend}>\n {segments.map((s, i) => (\n <LegendItem\n key={s.title}\n color={s.color ?? getCategoricalColorByIndex(i)}\n >{`${s.title} (${s.valueText ?? (formatOptions ? formatter.format(s.value) : `${s.value} %`)})`}</LegendItem>\n ))}\n </Legend>\n );\n};\n"],"mappings":";;;;;;;;;;AAYA,IAAa,qBAAgC,UAAU;CACrD,MAAM,EAAE,UAAU,YAAY,kBAAkB;CAEhD,MAAM,YAAY,mBAAmB,aAAa;CAElD,IAAI,CAAC,YAAY,CAAC,YAChB,OAAO;CAGT,OACE,oBAAC,QAAD;EAAQ,WAAWA,2BAAO;EACvB,UAAA,SAAS,KAAK,GAAG,MAChB,oBAAC,YAAD;GAEE,OAAO,EAAE,SAAS,2BAA2B,CAAC;GAC9C,UAAA,GAAG,EAAE,MAAM,IAAI,EAAE,cAAc,gBAAgB,UAAU,OAAO,EAAE,KAAK,IAAI,GAAG,EAAE,MAAM,KAAK;EAAe,GAFrG,EAAE,KAEmG,CAC7G;CACK,CAAA;AAEZ"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBarValue.mjs","names":[],"sources":["../../../../../../../../src/components/ProgressBar/components/ProgressBarValue.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport { type FC, type ReactNode } from \"react\";\nimport { useLocalizedStringFormatter, useNumberFormatter } from \"react-aria\";\nimport locales from \"../locales/*.locale.json\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\n\ninterface Props extends Pick<\n ProgressBarProps,\n \"showMaxValue\" \| \"maxValue\" \| \"formatOptions\"\n> {\n value?: number;\n valueLabel?: ReactNode;\n}\n\nexport const ProgressBarValue: FC<Props> = (props) => {\n const {\n showMaxValue,\n maxValue,\n value = 0,\n formatOptions,\n valueLabel,\n } = props;\n\n const formatter = useNumberFormatter(formatOptions);\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const maxValueText =\n !showMaxValue \|\| !maxValue\n ? undefined\n : formatOptions\n ? formatter.format(maxValue)\n : `${maxValue} %`;\n\n const valueText = formatOptions ? formatter.format(value) : `${value} %`;\n\n const textWithMaxValue = `${valueText} ${stringFormatter.format(\"progressBar.of\")} ${maxValueText}`;\n\n return (\n <span className={styles.value}>\n {valueLabel ?? (maxValueText ? textWithMaxValue : valueText)}\n </span>\n );\n};\n"],"mappings":";;;;;;;;AAcA,IAAa,oBAA+B,UAAU;CACpD,MAAM,EACJ,cACA,UACA,QAAQ,GACR,eACA,eACE;CAEJ,MAAM,YAAY,mBAAmB,aAAa;CAElD,MAAM,kBAAkB,~~4BAA4B~~,gBAAO;CAE3D,MAAM,eACJ,CAAC,gBAAgB,CAAC,WACd,KAAA,IACA,gBACE,UAAU,OAAO,QAAQ,IACzB,GAAG,SAAS;CAEpB,MAAM,YAAY,gBAAgB,UAAU,OAAO,KAAK,IAAI,GAAG,MAAM;CAErE,MAAM,mBAAmB,GAAG,UAAU,GAAG,gBAAgB,OAAO,gBAAgB,EAAE,GAAG;CAErF,OACE,oBAAC,QAAD;EAAM,~~WAAW~~,2BAAO;EACrB,UAAA,eAAe,eAAe,mBAAmB;CAC9C,CAAA;AAEV"}
1	+ {"version":3,"file":"ProgressBarValue.mjs","names":["locales","styles"],"sources":["../../../../../../../../src/components/ProgressBar/components/ProgressBarValue.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport { type FC, type ReactNode } from \"react\";\nimport { useLocalizedStringFormatter, useNumberFormatter } from \"react-aria\";\nimport locales from \"../locales/*.locale.json\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\n\ninterface Props extends Pick<\n ProgressBarProps,\n \"showMaxValue\" \| \"maxValue\" \| \"formatOptions\"\n> {\n value?: number;\n valueLabel?: ReactNode;\n}\n\nexport const ProgressBarValue: FC<Props> = (props) => {\n const {\n showMaxValue,\n maxValue,\n value = 0,\n formatOptions,\n valueLabel,\n } = props;\n\n const formatter = useNumberFormatter(formatOptions);\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const maxValueText =\n !showMaxValue \|\| !maxValue\n ? undefined\n : formatOptions\n ? formatter.format(maxValue)\n : `${maxValue} %`;\n\n const valueText = formatOptions ? formatter.format(value) : `${value} %`;\n\n const textWithMaxValue = `${valueText} ${stringFormatter.format(\"progressBar.of\")} ${maxValueText}`;\n\n return (\n <span className={styles.value}>\n {valueLabel ?? (maxValueText ? textWithMaxValue : valueText)}\n </span>\n );\n};\n"],"mappings":";;;;;;;;AAcA,IAAa,oBAA+B,UAAU;CACpD,MAAM,EACJ,cACA,UACA,QAAQ,GACR,eACA,eACE;CAEJ,MAAM,YAAY,mBAAmB,aAAa;CAElD,MAAM,kBAAkB,4BAA4BA,gBAAO;CAE3D,MAAM,eACJ,CAAC,gBAAgB,CAAC,WACd,KAAA,IACA,gBACE,UAAU,OAAO,QAAQ,IACzB,GAAG,SAAS;CAEpB,MAAM,YAAY,gBAAgB,UAAU,OAAO,KAAK,IAAI,GAAG,MAAM;CAErE,MAAM,mBAAmB,GAAG,UAAU,GAAG,gBAAgB,OAAO,gBAAgB,EAAE,GAAG;CAErF,OACE,oBAAC,QAAD;EAAM,WAAWC,2BAAO;EACrB,UAAA,eAAe,eAAe,mBAAmB;CAC9C,CAAA;AAEV"}

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

@@ -16,7 +16,7 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var RadioGroup = flowComponent("RadioGroup", (props) => {
 	const { children, className, s, m, l, ref, ...rest } = props;
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "RadioGroup");
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "RadioGroup");
 	const rootClassName = clsx(FormField_module_default.formField, className);
 	const propsContext = {
 		RadioButton: { tunnel: {
@@ -33,7 +33,8 @@ var RadioGroup = flowComponent("RadioGroup", (props) => {
 	useMakeFocusable(localRadioRef);
 	return /* @__PURE__ */ jsxs(Aria.RadioGroup, {
 		...rest,
-		className: clsx(rootClassName, fieldProps.className),
+		"aria-describedby": controlProps["aria-describedby"],
+		className: clsx(rootClassName, wrapperProps.className),
 		ref: localRadioRef,
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, {
 			props: propsContext,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioGroup.mjs","names":[],"sources":["../../../../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./RadioGroup.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface RadioGroupProps\n extends\n PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\">>,\n FlowComponentProps,\n Pick<ColumnLayoutProps, \"s\" \| \"m\" \| \"l\"> {}\n\n/** @flr-generate all */\nexport const RadioGroup = flowComponent(\"RadioGroup\", (props) => {\n const { children, className, s, m, l, ref, ...rest } = props;\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n ~~fieldProps~~,\n fieldPropsContext,\n } = useFieldComponent(props, \"RadioGroup\");\n\n const rootClassName = clsx(formFieldStyles.formField, className);\n const propsContext: PropsContext = {\n RadioButton: {\n tunnel: {\n id: \"radioButtons\",\n component: \"RadioGroup\",\n },\n },\n Radio: {\n tunnel: {\n id: \"radios\",\n component: \"RadioGroup\",\n },\n },\n ...fieldPropsContext,\n };\n\n const localRadioRef = useObjectRef(ref);\n useMakeFocusable(localRadioRef);\n\n return (\n <Aria.RadioGroup\n {...rest}\n className={clsx(rootClassName, ~~fieldProps~~.className)}\n ref={localRadioRef}\n >\n <FieldErrorCaptureContext>\n <PropsContextProvider props={propsContext}>\n <ColumnLayout s={s} m={m} l={l} className={styles.radioGroup}>\n <UiComponentTunnelExit id=\"radioButtons\" component=\"RadioGroup\" />\n </ColumnLayout>\n\n <ColumnLayout\n s={s ?? [1]}\n m={m ?? [1]}\n l={l ?? [1]}\n rowGap=\"s\"\n className={styles.radioGroup}\n >\n <UiComponentTunnelExit id=\"radios\" component=\"RadioGroup\" />\n </ColumnLayout>\n\n {children}\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </Aria.RadioGroup>\n );\n});\n\nexport default RadioGroup;\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,UAAU,WAAW,GAAG,GAAG,GAAG,KAAK,GAAG,SAAS;CAEvD,MAAM,EACJ,gBACA,0BACA,~~YACA~~,sBACE,kBAAkB,OAAO,YAAY;CAEzC,MAAM,gBAAgB,~~KAAK~~,yBAAgB,WAAW,SAAS;CAC/D,MAAM,eAA6B;EACjC,aAAa,EACX,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,OAAO,EACL,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,GAAG;CACL;CAEA,MAAM,gBAAgB,aAAa,GAAG;CACtC,iBAAiB,aAAa;CAE9B,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,WAAW,KAAK,eAAe,~~WAAW~~,SAAS;~~EACnD~~,KAAK;~~EAHP~~,UAAA,~~CAKE~~,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,oBAAC,cAAD;KAAiB;KAAM;KAAM;KAAG,~~WAAW~~,0BAAO;KAChD,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAe,WAAU;KAAc,CAAA;IACrD,CAAA;IAEd,oBAAC,cAAD;KACE,GAAG,KAAK,CAAC,CAAC;KACV,GAAG,KAAK,CAAC,CAAC;KACV,GAAG,KAAK,CAAC,CAAC;KACV,QAAO;KACP,~~WAAW~~,0BAAO;KAElB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAS,WAAU;KAAc,CAAA;IAC/C,CAAA;IAEb;GACmB;EACE,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}
1	+ {"version":3,"file":"RadioGroup.mjs","names":["formFieldStyles","styles"],"sources":["../../../../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./RadioGroup.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface RadioGroupProps\n extends\n PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\">>,\n FlowComponentProps,\n Pick<ColumnLayoutProps, \"s\" \| \"m\" \| \"l\"> {}\n\n/** @flr-generate all */\nexport const RadioGroup = flowComponent(\"RadioGroup\", (props) => {\n const { children, className, s, m, l, ref, ...rest } = props;\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n wrapperProps,\n controlProps,\n fieldPropsContext,\n } = useFieldComponent(props, \"RadioGroup\");\n\n const rootClassName = clsx(formFieldStyles.formField, className);\n const propsContext: PropsContext = {\n RadioButton: {\n tunnel: {\n id: \"radioButtons\",\n component: \"RadioGroup\",\n },\n },\n Radio: {\n tunnel: {\n id: \"radios\",\n component: \"RadioGroup\",\n },\n },\n ...fieldPropsContext,\n };\n\n const localRadioRef = useObjectRef(ref);\n useMakeFocusable(localRadioRef);\n\n return (\n <Aria.RadioGroup\n {...rest}\n aria-describedby={controlProps[\"aria-describedby\"]}\n className={clsx(rootClassName, wrapperProps.className)}\n ref={localRadioRef}\n >\n <FieldErrorCaptureContext>\n <PropsContextProvider props={propsContext}>\n <ColumnLayout s={s} m={m} l={l} className={styles.radioGroup}>\n <UiComponentTunnelExit id=\"radioButtons\" component=\"RadioGroup\" />\n </ColumnLayout>\n\n <ColumnLayout\n s={s ?? [1]}\n m={m ?? [1]}\n l={l ?? [1]}\n rowGap=\"s\"\n className={styles.radioGroup}\n >\n <UiComponentTunnelExit id=\"radios\" component=\"RadioGroup\" />\n </ColumnLayout>\n\n {children}\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </Aria.RadioGroup>\n );\n});\n\nexport default RadioGroup;\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,UAAU,WAAW,GAAG,GAAG,GAAG,KAAK,GAAG,SAAS;CAEvD,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,YAAY;CAEzC,MAAM,gBAAgB,KAAKA,yBAAgB,WAAW,SAAS;CAC/D,MAAM,eAA6B;EACjC,aAAa,EACX,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,OAAO,EACL,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,GAAG;CACL;CAEA,MAAM,gBAAgB,aAAa,GAAG;CACtC,iBAAiB,aAAa;CAE9B,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,oBAAkB,aAAa;EAC/B,WAAW,KAAK,eAAe,aAAa,SAAS;EACrD,KAAK;EAJP,UAAA,CAME,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,oBAAC,cAAD;KAAiB;KAAM;KAAM;KAAG,WAAWC,0BAAO;KAChD,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAe,WAAU;KAAc,CAAA;IACrD,CAAA;IAEd,oBAAC,cAAD;KACE,GAAG,KAAK,CAAC,CAAC;KACV,GAAG,KAAK,CAAC,CAAC;KACV,GAAG,KAAK,CAAC,CAAC;KACV,QAAO;KACP,WAAWA,0BAAO;KAElB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAS,WAAU;KAAc,CAAA;IAC/C,CAAA;IAEb;GACmB;EACE,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.mjs","names":[],"sources":["../../../../../../../../../src/components/RadioGroup/components/Radio/Radio.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Radio.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { IconRadioOff, IconRadioOn } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface RadioProps\n extends\n PropsWithChildren<Omit<Aria.RadioProps, \"children\">>,\n FlowComponentProps<HTMLLabelElement> {}\n\n/** @flr-generate all */\nexport const Radio = flowComponent(\"Radio\", (props) => {\n const { children, className, ref, ...rest } = props;\n\n const rootClassName = clsx(styles.radio, className);\n\n return (\n <Aria.Radio {...rest} className={rootClassName} ref={ref}>\n {({ isSelected }) => (\n <>\n {isSelected ? (\n <IconRadioOn className={styles.icon} />\n ) : (\n <IconRadioOff className={styles.icon} />\n )}\n {children}\n </>\n )}\n </Aria.Radio>\n );\n});\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;;AAcA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,~~KAAK~~,qBAAO,OAAO,SAAS;CAElD,OACE,oBAAC,KAAK,OAAN;EAAY,GAAI;EAAM,WAAW;EAAoB;EACjD,WAAA,EAAE,iBACF,~~qBAAA~~,UAAA,EAAA,UAAA,CACG,aACC,oBAAC,aAAD,EAAa,~~WAAW~~,qBAAO,KAAO,CAAA,IAEtC,oBAAC,cAAD,EAAc,~~WAAW~~,qBAAO,KAAO,CAAA,GAExC,QACD,EAAA,CAAA;CAEM,CAAA;AAEhB,CAAC"}
1	+ {"version":3,"file":"Radio.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../../../src/components/RadioGroup/components/Radio/Radio.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Radio.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { IconRadioOff, IconRadioOn } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface RadioProps\n extends\n PropsWithChildren<Omit<Aria.RadioProps, \"children\">>,\n FlowComponentProps<HTMLLabelElement> {}\n\n/** @flr-generate all */\nexport const Radio = flowComponent(\"Radio\", (props) => {\n const { children, className, ref, ...rest } = props;\n\n const rootClassName = clsx(styles.radio, className);\n\n return (\n <Aria.Radio {...rest} className={rootClassName} ref={ref}>\n {({ isSelected }) => (\n <>\n {isSelected ? (\n <IconRadioOn className={styles.icon} />\n ) : (\n <IconRadioOff className={styles.icon} />\n )}\n {children}\n </>\n )}\n </Aria.Radio>\n );\n});\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;;AAcA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAKA,qBAAO,OAAO,SAAS;CAElD,OACE,oBAAC,KAAK,OAAN;EAAY,GAAI;EAAM,WAAW;EAAoB;EACjD,WAAA,EAAE,iBACF,qBAAAC,UAAA,EAAA,UAAA,CACG,aACC,oBAAC,aAAD,EAAa,WAAWD,qBAAO,KAAO,CAAA,IAEtC,oBAAC,cAAD,EAAc,WAAWA,qBAAO,KAAO,CAAA,GAExC,QACD,EAAA,CAAA;CAEM,CAAA;AAEhB,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.mjs","names":[],"sources":["../../../../../../../../../src/components/RadioGroup/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import styles from \"./RadioButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { RadioProps } from \"@/components/RadioGroup\";\nimport { Radio } from \"@/components/RadioGroup\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport type RadioButtonProps = RadioProps;\n\n/** @flr-generate all */\nexport const RadioButton = flowComponent(\"RadioButton\", (props) => {\n const { children, className, ref, ...rest } = props;\n\n const rootClassName = clsx(styles.radioButton, className);\n\n const propsContext: PropsContext = {\n Text: {\n className: styles.label,\n },\n Content: {\n className: styles.content,\n },\n };\n\n return (\n <Radio {...rest} className={rootClassName} ref={ref}>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </Radio>\n );\n});\n\nexport default RadioButton;\n"],"mappings":";;;;;;;;;;AAWA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,~~KAAK~~,2BAAO,aAAa,SAAS;CAExD,MAAM,eAA6B;EACjC,MAAM,EACJ,~~WAAW~~,2BAAO,MACpB;EACA,SAAS,EACP,~~WAAW~~,2BAAO,QACpB;CACF;CAEA,OACE,oBAAC,OAAD;EAAO,GAAI;EAAM,WAAW;EAAoB;EAC9C,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACjB,CAAA;AAEX,CAAC"}
1	+ {"version":3,"file":"RadioButton.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/RadioGroup/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import styles from \"./RadioButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { RadioProps } from \"@/components/RadioGroup\";\nimport { Radio } from \"@/components/RadioGroup\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport type RadioButtonProps = RadioProps;\n\n/** @flr-generate all */\nexport const RadioButton = flowComponent(\"RadioButton\", (props) => {\n const { children, className, ref, ...rest } = props;\n\n const rootClassName = clsx(styles.radioButton, className);\n\n const propsContext: PropsContext = {\n Text: {\n className: styles.label,\n },\n Content: {\n className: styles.content,\n },\n };\n\n return (\n <Radio {...rest} className={rootClassName} ref={ref}>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </Radio>\n );\n});\n\nexport default RadioButton;\n"],"mappings":";;;;;;;;;;AAWA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAKA,2BAAO,aAAa,SAAS;CAExD,MAAM,eAA6B;EACjC,MAAM,EACJ,WAAWA,2BAAO,MACpB;EACA,SAAS,EACP,WAAWA,2BAAO,QACpB;CACF;CAEA,OACE,oBAAC,OAAD;EAAO,GAAI;EAAM,WAAW;EAAoB;EAC9C,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACjB,CAAA;AAEX,CAAC"}

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

@@ -2,6 +2,7 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { SkeletonModeReset, useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
 import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { useMakeFocusable } from "../../lib/hooks/dom/useMakeFocusable.mjs";
@@ -22,8 +23,9 @@ var toSegmentValue = (value) => value === void 0 ? void 0 : Math.round(value).to
 */
 var Rating = flowComponent("Rating", (props) => {
 	const { value, defaultValue, size = "m", maxValue = 5, fill = "cumulative", className, children, ref, iconEmpty, iconFilled, ...rest } = props;
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "Rating");
-	const rootClassName = clsx(Rating_module_default.rating, Rating_module_default[`size-${size}`], Rating_module_default[`fill-${fill}`], fieldProps.className, className);
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "Rating");
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(Rating_module_default.rating, Rating_module_default[`size-${size}`], Rating_module_default[`fill-${fill}`], isSkeleton && Rating_module_default.skeleton, wrapperProps.className, className);
 	const localRef = useObjectRef(ref);
 	useMakeFocusable(localRef);
 	const segmentProps = {
@@ -44,10 +46,12 @@ var Rating = flowComponent("Rating", (props) => {
 	const defaultSegments = Array.from({ length: maxValue }, (_, index) => /* @__PURE__ */ jsx(RatingSegment, { ...segmentProps }, index));
 	return /* @__PURE__ */ jsxs(Aria.RadioGroup, {
 		...rest,
+		"aria-describedby": controlProps["aria-describedby"],
 		className: rootClassName,
 		value: toSegmentValue(value),
 		defaultValue: toSegmentValue(defaultValue),
 		ref: localRef,
+		inert: isSkeleton || void 0,
 		children: [/* @__PURE__ */ jsxs(FieldErrorCaptureContext, { children: [/* @__PURE__ */ jsx(PropsContextProvider, {
 			props: propsContext,
 			dependencies: [
@@ -58,7 +62,7 @@ var Rating = flowComponent("Rating", (props) => {
 			children
 		}), /* @__PURE__ */ jsx("div", {
 			className: Rating_module_default.ratingSegments,
-			children: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
+			children: /* @__PURE__ */ jsx(SkeletonModeReset, { children: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
 				id: segmentsTunnelId,
 				component: "Rating",
 				children: (tunnelChildren) => {
@@ -72,7 +76,7 @@ var Rating = flowComponent("Rating", (props) => {
 						children: segment
 					}, index));
 				}
-			})
+			}) })
 		})] }), /* @__PURE__ */ jsx(FieldErrorView, {})]
 	});
 });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Rating.mjs","names":[],"sources":["../../../../../../../src/components/Rating/Rating.tsx"],"sourcesContent":["import { Children, type PropsWithChildren, type ReactElement } from \"react\";\nimport styles from \"./Rating.module.scss\";\nimport clsx from \"clsx\";\nimport * as Aria from \"react-aria-components\";\nimport { RatingSegment } from \"@/components/Rating/components/RatingSegment\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { RatingSegmentContextProvider } from \"@/components/Rating/context\";\n\nexport interface RatingProps\n extends\n FlowComponentProps,\n PropsWithChildren,\n Omit<Aria.RadioGroupProps, \"children\" \| \"value\" \| \"defaultValue\"> {\n /*\n The value sets the amount of filled stars. Decimals are rounded to the\n * nearest whole star. @default: 0\n /\n value?: number;\n /\n The defaultValue sets the amount of default filled stars. Decimals are\n * rounded to the nearest whole star. @default: 0\n /\n defaultValue?: number;\n /* The size of the component. @default: \"m\" /\n size?: \"s\" \| \"m\";\n /\n The number of segments the rating consists of. Ignored when the rating has\n * `RatingSegment` children — those define the number of segments themselves.\n \n @default: 5\n /\n maxValue?: number;\n /\n How the segments are filled. `cumulative` fills every segment up to the\n * value, `single` fills only the selected segment.\n \n @default: cumulative\n /\n fill?: \"cumulative\" \| \"single\";\n /* An alternative icon for the empty state /\n iconEmpty?: ReactElement;\n /* An alternative icon for the filled state /\n iconFilled?: ReactElement;\n}\n\nconst segmentsTunnelId = \"segments\";\n\n// Segment values are whole numbers, so a decimal would match no segment.\nconst toSegmentValue = (value?: number) =>\n value === undefined ? undefined : Math.round(value).toString();\n\n/\n @flr-generate all\n * @flr-slot-props iconEmpty, iconFilled\n */\nexport const Rating = flowComponent(\"Rating\", (props) => {\n const {\n value,\n defaultValue,\n size = \"m\",\n maxValue = 5,\n fill = \"cumulative\",\n className,\n children,\n ref,\n iconEmpty,\n iconFilled,\n ...rest\n } = props;\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n ~~fieldProps~~,\n fieldPropsContext,\n } = useFieldComponent(props, \"Rating\");\n\n const rootClassName = clsx(\n styles.rating,\n styles[`size-${size}`],\n styles[`fill-${fill}`],\n ~~fieldProps~~.className,\n className,\n );\n\n const localRef = useObjectRef(ref);\n\n useMakeFocusable(localRef);\n\n const segmentProps = { size, iconEmpty, iconFilled };\n\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n RatingSegment: {\n ...segmentProps,\n tunnel: { id: segmentsTunnelId, component: \"Rating\" },\n },\n };\n\n const defaultSegments = Array.from({ length: maxValue }, (_, index) => (\n <RatingSegment key={index} {...segmentProps} />\n ));\n\n return (\n <Aria.RadioGroup\n {...rest}\n className={rootClassName}\n value={toSegmentValue(value)}\n defaultValue={toSegmentValue(defaultValue)}\n ref={localRef}\n >\n <FieldErrorCaptureContext>\n <PropsContextProvider\n props={propsContext}\n dependencies={[size, iconEmpty, iconFilled]}\n >\n {children}\n </PropsContextProvider>\n <div className={styles.ratingSegments}>\n <UiComponentTunnelExit id={segmentsTunnelId} component=\"Rating\">\n {(tunnelChildren) => {\n const tunneledSegments = Children.toArray(tunnelChildren);\n const segments =\n tunneledSegments.length > 0\n ? tunneledSegments\n : defaultSegments;\n\n return segments.map((segment, index) => (\n <RatingSegmentContextProvider\n key={index}\n value={{ value: index + 1, count: segments.length }}\n >\n {segment}\n </RatingSegmentContextProvider>\n ));\n }}\n </UiComponentTunnelExit>\n </div>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </Aria.RadioGroup>\n );\n});\n\nexport default Rating;\n"],"mappings":"~~;;;;;;;;;;;;;;;;AAqDA~~,IAAM,mBAAmB;AAGzB,IAAM,kBAAkB,UACtB,UAAU,KAAA,IAAY,KAAA,IAAY,KAAK,MAAM,KAAK,CAAC,CAAC,SAAS;;;;;AAM/D,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,OACA,cACA,OAAO,KACP,WAAW,GACX,OAAO,cACP,WACA,UACA,KACA,WACA,YACA,GAAG,SACD;CAEJ,MAAM,EACJ,gBACA,0BACA,~~YACA~~,sBACE,kBAAkB,OAAO,QAAQ;CAErC,MAAM,gBAAgB,~~KACpB~~,sBAAO,~~QACP~~,sBAAO,QAAQ,~~SACf~~,sBAAO,QAAQ,SACf,~~WAAW~~,~~WACX~~,SACF;CAEA,MAAM,WAAW,aAAa,GAAG;CAEjC,iBAAiB,QAAQ;CAEzB,MAAM,eAAe;EAAE;EAAM;EAAW;CAAW;CAEnD,MAAM,eAA6B;EACjC,GAAG;EACH,eAAe;GACb,GAAG;GACH,QAAQ;IAAE,IAAI;IAAkB,WAAW;GAAS;EACtD;CACF;CAEA,MAAM,kBAAkB,MAAM,KAAK,EAAE,QAAQ,SAAS,IAAI,GAAG,UAC3D,oBAAC,eAAD,EAA2B,GAAI,aAAe,GAA1B,KAA0B,CAC/C;CAED,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,WAAW;EACX,OAAO,eAAe,KAAK;EAC3B,cAAc,eAAe,YAAY;EACzC,KAAK;~~EALP~~,UAAA,~~CAOE~~,qBAAC,0BAAD,EAAA,UAAA,CACE,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc;IAAC;IAAM;IAAW;GAAU;GAEzC;EACmB,CAAA,GACtB,oBAAC,OAAD;GAAK,~~WAAW~~,sBAAO;GACrB,UAAA,oBAAC,uBAAD;IAAuB,IAAI;IAAkB,WAAU;IACnD,WAAA,mBAAmB;KACnB,MAAM,mBAAmB,SAAS,QAAQ,cAAc;KACxD,MAAM,WACJ,iBAAiB,SAAS,IACtB,mBACA;KAEN,OAAO,SAAS,KAAK,SAAS,UAC5B,oBAAC,8BAAD;MAEE,OAAO;OAAE,OAAO,QAAQ;OAAG,OAAO,SAAS;MAAO;MAEjD,UAAA;KAC2B,GAJvB,KAIuB,CAC/B;IACH;GACqB,CAAA;~~EACpB~~,CAAA,CACmB,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}
1	+ {"version":3,"file":"Rating.mjs","names":["styles"],"sources":["../../../../../../../src/components/Rating/Rating.tsx"],"sourcesContent":["import { Children, type PropsWithChildren, type ReactElement } from \"react\";\nimport styles from \"./Rating.module.scss\";\nimport clsx from \"clsx\";\nimport * as Aria from \"react-aria-components\";\nimport { RatingSegment } from \"@/components/Rating/components/RatingSegment\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { RatingSegmentContextProvider } from \"@/components/Rating/context\";\nimport {\n SkeletonModeReset,\n useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface RatingProps\n extends\n FlowComponentProps,\n PropsWithChildren,\n Omit<Aria.RadioGroupProps, \"children\" \| \"value\" \| \"defaultValue\"> {\n /*\n The value sets the amount of filled stars. Decimals are rounded to the\n * nearest whole star. @default: 0\n /\n value?: number;\n /\n The defaultValue sets the amount of default filled stars. Decimals are\n * rounded to the nearest whole star. @default: 0\n /\n defaultValue?: number;\n /* The size of the component. @default: \"m\" /\n size?: \"s\" \| \"m\";\n /\n The number of segments the rating consists of. Ignored when the rating has\n * `RatingSegment` children — those define the number of segments themselves.\n \n @default: 5\n /\n maxValue?: number;\n /\n How the segments are filled. `cumulative` fills every segment up to the\n * value, `single` fills only the selected segment.\n \n @default: cumulative\n /\n fill?: \"cumulative\" \| \"single\";\n /* An alternative icon for the empty state /\n iconEmpty?: ReactElement;\n /* An alternative icon for the filled state /\n iconFilled?: ReactElement;\n}\n\nconst segmentsTunnelId = \"segments\";\n\n// Segment values are whole numbers, so a decimal would match no segment.\nconst toSegmentValue = (value?: number) =>\n value === undefined ? undefined : Math.round(value).toString();\n\n/\n @flr-generate all\n * @flr-slot-props iconEmpty, iconFilled\n */\nexport const Rating = flowComponent(\"Rating\", (props) => {\n const {\n value,\n defaultValue,\n size = \"m\",\n maxValue = 5,\n fill = \"cumulative\",\n className,\n children,\n ref,\n iconEmpty,\n iconFilled,\n ...rest\n } = props;\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n wrapperProps,\n controlProps,\n fieldPropsContext,\n } = useFieldComponent(props, \"Rating\");\n\n const isSkeleton = useSkeletonMode();\n\n const rootClassName = clsx(\n styles.rating,\n styles[`size-${size}`],\n styles[`fill-${fill}`],\n isSkeleton && styles.skeleton,\n wrapperProps.className,\n className,\n );\n\n const localRef = useObjectRef(ref);\n\n useMakeFocusable(localRef);\n\n const segmentProps = { size, iconEmpty, iconFilled };\n\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n RatingSegment: {\n ...segmentProps,\n tunnel: { id: segmentsTunnelId, component: \"Rating\" },\n },\n };\n\n const defaultSegments = Array.from({ length: maxValue }, (_, index) => (\n <RatingSegment key={index} {...segmentProps} />\n ));\n\n return (\n <Aria.RadioGroup\n {...rest}\n aria-describedby={controlProps[\"aria-describedby\"]}\n className={rootClassName}\n value={toSegmentValue(value)}\n defaultValue={toSegmentValue(defaultValue)}\n ref={localRef}\n inert={isSkeleton \|\| undefined}\n >\n <FieldErrorCaptureContext>\n <PropsContextProvider\n props={propsContext}\n dependencies={[size, iconEmpty, iconFilled]}\n >\n {children}\n </PropsContextProvider>\n <div className={styles.ratingSegments}>\n <SkeletonModeReset>\n <UiComponentTunnelExit id={segmentsTunnelId} component=\"Rating\">\n {(tunnelChildren) => {\n const tunneledSegments = Children.toArray(tunnelChildren);\n const segments =\n tunneledSegments.length > 0\n ? tunneledSegments\n : defaultSegments;\n\n return segments.map((segment, index) => (\n <RatingSegmentContextProvider\n key={index}\n value={{ value: index + 1, count: segments.length }}\n >\n {segment}\n </RatingSegmentContextProvider>\n ));\n }}\n </UiComponentTunnelExit>\n </SkeletonModeReset>\n </div>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </Aria.RadioGroup>\n );\n});\n\nexport default Rating;\n"],"mappings":";;;;;;;;;;;;;;;;;AAyDA,IAAM,mBAAmB;AAGzB,IAAM,kBAAkB,UACtB,UAAU,KAAA,IAAY,KAAA,IAAY,KAAK,MAAM,KAAK,CAAC,CAAC,SAAS;;;;;AAM/D,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,OACA,cACA,OAAO,KACP,WAAW,GACX,OAAO,cACP,WACA,UACA,KACA,WACA,YACA,GAAG,SACD;CAEJ,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,QAAQ;CAErC,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,sBAAO,QACPA,sBAAO,QAAQ,SACfA,sBAAO,QAAQ,SACf,cAAcA,sBAAO,UACrB,aAAa,WACb,SACF;CAEA,MAAM,WAAW,aAAa,GAAG;CAEjC,iBAAiB,QAAQ;CAEzB,MAAM,eAAe;EAAE;EAAM;EAAW;CAAW;CAEnD,MAAM,eAA6B;EACjC,GAAG;EACH,eAAe;GACb,GAAG;GACH,QAAQ;IAAE,IAAI;IAAkB,WAAW;GAAS;EACtD;CACF;CAEA,MAAM,kBAAkB,MAAM,KAAK,EAAE,QAAQ,SAAS,IAAI,GAAG,UAC3D,oBAAC,eAAD,EAA2B,GAAI,aAAe,GAA1B,KAA0B,CAC/C;CAED,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,oBAAkB,aAAa;EAC/B,WAAW;EACX,OAAO,eAAe,KAAK;EAC3B,cAAc,eAAe,YAAY;EACzC,KAAK;EACL,OAAO,cAAc,KAAA;EAPvB,UAAA,CASE,qBAAC,0BAAD,EAAA,UAAA,CACE,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc;IAAC;IAAM;IAAW;GAAU;GAEzC;EACmB,CAAA,GACtB,oBAAC,OAAD;GAAK,WAAWA,sBAAO;GACrB,UAAA,oBAAC,mBAAD,EAAA,UACE,oBAAC,uBAAD;IAAuB,IAAI;IAAkB,WAAU;IACnD,WAAA,mBAAmB;KACnB,MAAM,mBAAmB,SAAS,QAAQ,cAAc;KACxD,MAAM,WACJ,iBAAiB,SAAS,IACtB,mBACA;KAEN,OAAO,SAAS,KAAK,SAAS,UAC5B,oBAAC,8BAAD;MAEE,OAAO;OAAE,OAAO,QAAQ;OAAG,OAAO,SAAS;MAAO;MAEjD,UAAA;KAC2B,GAJvB,KAIuB,CAC/B;IACH;GACqB,CAAA,EACN,CAAA;EAChB,CAAA,CACmB,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}

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

@@ -7,6 +7,7 @@ var ratingSegment = "flow--rating--rating-segment";
 var empty = "flow--rating--empty";
 var filled = "flow--rating--filled";
 var current = "flow--rating--current";
+var skeleton = "flow--rating--skeleton";
 var Rating_module_default = {
 	rating,
 	ratingSegments,
@@ -17,9 +18,12 @@ var Rating_module_default = {
 	current,
 	"fill-single": "flow--rating--fill-single",
 	"size-s": "flow--rating--size-s",
-	"size-m": "flow--rating--size-m"
+	"size-m": "flow--rating--size-m",
+	skeleton,
+	"skeleton-surface-shimmer": "flow--rating--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--rating--skeleton-text-shimmer"
 };
 //#endregion
-export { current, Rating_module_default as default, empty, filled, rating, ratingSegment, ratingSegments };
+export { current, Rating_module_default as default, empty, filled, rating, ratingSegment, ratingSegments, skeleton };
 //# sourceMappingURL=Rating.module.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Rating.module.mjs","names":[],"sources":["../../../../../../../src/components/Rating/Rating.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n/*\n Segments render filled by default. The fill rules below empty out every\n * segment that must not appear filled.\n /\n@mixin empty-segment {\n .empty {\n opacity: 1;\n }\n\n .filled {\n opacity: 0;\n }\n}\n\n.rating {\n .ratingSegments {\n display: flex;\n width: fit-content;\n order: 2;\n }\n\n .ratingSegment {\n display: grid;\n grid-template-areas: \"star\";\n border-radius: var(--corner-radius--m);\n\n @include focus.focus;\n\n & {\n outline-offset: calc(var(--size-px--xxs) -1);\n }\n\n &[data-focus-visible] {\n transform: scale(1.2);\n }\n }\n\n .empty,\n .filled {\n grid-area: star;\n transition-property: opacity, transform;\n transition-duration: var(--transition--duration--fast);\n }\n\n :where(.empty) {\n opacity: 0;\n color: var(--rating--star-color);\n }\n\n :where(.filled) {\n opacity: 1;\n color: var(--rating--star-filled-color);\n }\n\n &.fill-cumulative {\n &:not(:has(.ratingSegments:hover)),\n &[data-readonly] {\n .ratingSegment.current ~ .ratingSegment {\n @include empty-segment;\n }\n\n &:not(:has(.current)) .ratingSegment {\n @include empty-segment;\n }\n }\n\n &:not([data-readonly]) {\n .ratingSegment:hover ~ .ratingSegment {\n @include empty-segment;\n }\n }\n }\n\n &.fill-single {\n &:not(:has(.ratingSegments:hover)),\n &[data-readonly] {\n .ratingSegment:not(.current) {\n @include empty-segment;\n }\n }\n\n &:not([data-readonly]):has(.ratingSegments:hover) {\n .ratingSegment:not(:hover) {\n @include empty-segment;\n }\n }\n }\n\n &:not([data-readonly]) {\n .ratingSegment:hover {\n transform: scale(1.2);\n transform-origin: center;\n }\n }\n\n &:disabled,\n &[data-disabled],\n [aria-disabled] & {\n .ratingSegment {\n .empty,\n .filled {\n color: var(--form-control--border-color--disabled);\n }\n }\n }\n\n @mixin size($size) {\n &.size-#{$size} .ratingSegment {\n padding: var(--rating--spacing--#{$size});\n }\n }\n\n @include size(s);\n @include size(m);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Rating.module.mjs","names":[],"sources":["../../../../../../../src/components/Rating/Rating.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/skeleton\";\n\n/*\n Segments render filled by default. The fill rules below empty out every\n * segment that must not appear filled.\n /\n@mixin empty-segment {\n .empty {\n opacity: 1;\n }\n\n .filled {\n opacity: 0;\n }\n}\n\n.rating {\n .ratingSegments {\n display: flex;\n width: fit-content;\n order: 2;\n }\n\n .ratingSegment {\n display: grid;\n grid-template-areas: \"star\";\n border-radius: var(--corner-radius--m);\n\n @include focus.focus;\n\n & {\n outline-offset: calc(var(--size-px--xxs) -1);\n }\n\n &[data-focus-visible] {\n transform: scale(1.2);\n }\n }\n\n .empty,\n .filled {\n grid-area: star;\n transition-property: opacity, transform;\n transition-duration: var(--transition--duration--fast);\n }\n\n :where(.empty) {\n opacity: 0;\n color: var(--rating--star-color);\n }\n\n :where(.filled) {\n opacity: 1;\n color: var(--rating--star-filled-color);\n }\n\n &.fill-cumulative {\n &:not(:has(.ratingSegments:hover)),\n &[data-readonly] {\n .ratingSegment.current ~ .ratingSegment {\n @include empty-segment;\n }\n\n &:not(:has(.current)) .ratingSegment {\n @include empty-segment;\n }\n }\n\n &:not([data-readonly]) {\n .ratingSegment:hover ~ .ratingSegment {\n @include empty-segment;\n }\n }\n }\n\n &.fill-single {\n &:not(:has(.ratingSegments:hover)),\n &[data-readonly] {\n .ratingSegment:not(.current) {\n @include empty-segment;\n }\n }\n\n &:not([data-readonly]):has(.ratingSegments:hover) {\n .ratingSegment:not(:hover) {\n @include empty-segment;\n }\n }\n }\n\n &:not([data-readonly]) {\n .ratingSegment:hover {\n transform: scale(1.2);\n transform-origin: center;\n }\n }\n\n &:disabled,\n &[data-disabled],\n [aria-disabled] & {\n .ratingSegment {\n .empty,\n .filled {\n color: var(--form-control--border-color--disabled);\n }\n }\n }\n\n @mixin size($size) {\n &.size-#{$size} .ratingSegment {\n padding: var(--rating--spacing--#{$size});\n }\n }\n\n @include size(s);\n @include size(m);\n\n /* SkeletonMode: the segments become one surface in their size */\n &.skeleton .ratingSegments {\n @include skeleton.shape;\n }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

package/dist/js/packages/components/src/components/Rating/components/RatingSegment/EmptySegment.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmptySegment.mjs","names":[],"sources":["../../../../../../../../../src/components/Rating/components/RatingSegment/EmptySegment.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren } from \"react\";\nimport type { RatingSegmentProps } from \"@/components/Rating/components/RatingSegment/RatingSegment\";\nimport styles from \"../../Rating.module.scss\";\nimport { IconStar } from \"@/components/Icon/components/icons\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\ninterface Props extends PropsWithChildren {\n size: RatingSegmentProps[\"size\"];\n}\n\nexport const EmptySegment: FC<Props> = (props) => {\n const { size, children } = props;\n\n const propsContext: PropsContext = {\n Icon: {\n size,\n \"aria-hidden\": true,\n className: styles.empty,\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n {children ?? (\n <IconStar aria-hidden size={size} className={styles.empty} />\n )}\n </PropsContextProvider>\n );\n};\n"],"mappings":";;;;;;;;AAUA,IAAa,gBAA2B,UAAU;CAChD,MAAM,EAAE,MAAM,aAAa;CAE3B,MAAM,eAA6B,EACjC,MAAM;EACJ;EACA,eAAe;EACf,~~WAAW~~,sBAAO;CACpB,EACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC1B,UAAA,YACC,oBAAC,UAAD;GAAU,eAAA;GAAkB;GAAM,~~WAAW~~,sBAAO;EAAQ,CAAA;CAE1C,CAAA;AAE1B"}
1	+ {"version":3,"file":"EmptySegment.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Rating/components/RatingSegment/EmptySegment.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren } from \"react\";\nimport type { RatingSegmentProps } from \"@/components/Rating/components/RatingSegment/RatingSegment\";\nimport styles from \"../../Rating.module.scss\";\nimport { IconStar } from \"@/components/Icon/components/icons\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\ninterface Props extends PropsWithChildren {\n size: RatingSegmentProps[\"size\"];\n}\n\nexport const EmptySegment: FC<Props> = (props) => {\n const { size, children } = props;\n\n const propsContext: PropsContext = {\n Icon: {\n size,\n \"aria-hidden\": true,\n className: styles.empty,\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n {children ?? (\n <IconStar aria-hidden size={size} className={styles.empty} />\n )}\n </PropsContextProvider>\n );\n};\n"],"mappings":";;;;;;;;AAUA,IAAa,gBAA2B,UAAU;CAChD,MAAM,EAAE,MAAM,aAAa;CAE3B,MAAM,eAA6B,EACjC,MAAM;EACJ;EACA,eAAe;EACf,WAAWA,sBAAO;CACpB,EACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC1B,UAAA,YACC,oBAAC,UAAD;GAAU,eAAA;GAAkB;GAAM,WAAWA,sBAAO;EAAQ,CAAA;CAE1C,CAAA;AAE1B"}

package/dist/js/packages/components/src/components/Rating/components/RatingSegment/FilledSegment.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilledSegment.mjs","names":[],"sources":["../../../../../../../../../src/components/Rating/components/RatingSegment/FilledSegment.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren } from \"react\";\nimport type { RatingSegmentProps } from \"@/components/Rating/components/RatingSegment/RatingSegment\";\nimport styles from \"../../Rating.module.scss\";\nimport { IconStarFilled } from \"@/components/Icon/components/icons\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\ninterface Props extends PropsWithChildren {\n size: RatingSegmentProps[\"size\"];\n}\n\nexport const FilledSegment: FC<Props> = (props) => {\n const { size, children } = props;\n\n const propsContext: PropsContext = {\n Icon: {\n size,\n \"aria-hidden\": true,\n className: styles.filled,\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n {children ?? (\n <IconStarFilled aria-hidden size={size} className={styles.filled} />\n )}\n </PropsContextProvider>\n );\n};\n"],"mappings":";;;;;;;;AAUA,IAAa,iBAA4B,UAAU;CACjD,MAAM,EAAE,MAAM,aAAa;CAE3B,MAAM,eAA6B,EACjC,MAAM;EACJ;EACA,eAAe;EACf,~~WAAW~~,sBAAO;CACpB,EACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC1B,UAAA,YACC,oBAAC,gBAAD;GAAgB,eAAA;GAAkB;GAAM,~~WAAW~~,sBAAO;EAAS,CAAA;CAEjD,CAAA;AAE1B"}
1	+ {"version":3,"file":"FilledSegment.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Rating/components/RatingSegment/FilledSegment.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren } from \"react\";\nimport type { RatingSegmentProps } from \"@/components/Rating/components/RatingSegment/RatingSegment\";\nimport styles from \"../../Rating.module.scss\";\nimport { IconStarFilled } from \"@/components/Icon/components/icons\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\ninterface Props extends PropsWithChildren {\n size: RatingSegmentProps[\"size\"];\n}\n\nexport const FilledSegment: FC<Props> = (props) => {\n const { size, children } = props;\n\n const propsContext: PropsContext = {\n Icon: {\n size,\n \"aria-hidden\": true,\n className: styles.filled,\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n {children ?? (\n <IconStarFilled aria-hidden size={size} className={styles.filled} />\n )}\n </PropsContextProvider>\n );\n};\n"],"mappings":";;;;;;;;AAUA,IAAa,iBAA4B,UAAU;CACjD,MAAM,EAAE,MAAM,aAAa;CAE3B,MAAM,eAA6B,EACjC,MAAM;EACJ;EACA,eAAe;EACf,WAAWA,sBAAO;CACpB,EACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC1B,UAAA,YACC,oBAAC,gBAAD;GAAgB,eAAA;GAAkB;GAAM,WAAWA,sBAAO;EAAS,CAAA;CAEjD,CAAA;AAE1B"}