npm - @mittwald/flow-react-components - Versions diffs - 1.2.0-next.8 → 2.0.0-next.0 - Mend

@mittwald/flow-react-components 1.2.0-next.8 → 2.0.0-next.0

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

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

@@ -2,6 +2,7 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { ClearPropsContext } from "../../lib/propsContext/components/ClearPropsContext.mjs";
+import ClearPropsContextView from "../../views/ClearPropsContextView.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
 import { IconClose } from "../Icon/components/icons/IconClose.mjs";
@@ -9,8 +10,8 @@ import { Wrap } from "../Wrap/Wrap.mjs";
 import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { OverlayController } from "../../lib/controller/overlay/OverlayController.mjs";
 import { Action } from "../Action/Action.mjs";
-import DivView from "../../views/DivView.mjs";
 import ButtonView from "../../views/ButtonView.mjs";
+import DivView from "../../views/DivView.mjs";
 import { Overlay } from "../Overlay/Overlay.mjs";
 import Modal_module_default from "./Modal.module.mjs";
 import { OffCanvasSuspenseFallback } from "./components/OffCanvasSuspenseFallback/OffCanvasSuspenseFallback.mjs";
@@ -30,7 +31,7 @@ var Modal = flowComponent("Modal", (props) => {
 	const header = (children) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DivView, {
 		className: Modal_module_default.headerTitle,
 		children
-	}), /* @__PURE__ */ jsx(Action, {
+	}), /* @__PURE__ */ jsx(ClearPropsContext, { children: /* @__PURE__ */ jsx(ClearPropsContextView, { children: /* @__PURE__ */ jsx(Action, {
 		closeModal: { bypassConfirmation: true },
 		children: /* @__PURE__ */ jsx(ButtonView, {
 			variant: "plain",
@@ -39,7 +40,7 @@ var Modal = flowComponent("Modal", (props) => {
 			className: clsx(Modal_module_default.closeButton, showCloseButton === true ? Modal_module_default.alwaysVisible : showCloseButton === false ? Modal_module_default.alwaysHidden : void 0),
 			children: /* @__PURE__ */ jsx(IconClose, {})
 		})
-	})] });
+	}) }) })] });
 	const nestedHeadingLevel = 3;
 	const nestedHeadingProps = {
 		Heading: { level: nestedHeadingLevel },

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.mjs","names":[],"sources":["../../../../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import { type PropsWithChildren, type ReactNode, Suspense, useId } from \"react\";\nimport styles from \"./Modal.module.scss\";\nimport clsx from \"clsx\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { OverlayController } from \"@/lib/controller/overlay\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Overlay, type OverlayProps } from \"@/components/Overlay/Overlay\";\nimport { Action } from \"@/components/Action\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ButtonView from \"@/views/ButtonView\";\nimport DivView from \"@/views/DivView\";\nimport { OffCanvasSuspenseFallback } from \"@/components/Modal/components/OffCanvasSuspenseFallback\";\nimport { ConfirmUnsavedChangesModal } from \"@/components/Modal/components/ConfirmUnsavedChangesModal/ConfirmUnsavedChangesModal\";\nimport Wrap from \"@/components/Wrap\";\nimport { ClearPropsContext } from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { useVirtualKeyboardVisible } from \"@/lib/hooks/dom/useVirtualKeyboardVisible\";\nimport locales from \"./locales/.locale.json\";\n\ntype SupportedOverlayProps = Pick<\n OverlayProps,\n \"isOpen\" \| \"isDefaultOpen\" \| \"onOpen\" \| \"onClose\" \| \"onOpenChange\"\n>;\n\nexport interface ModalProps\n extends\n PropsWithChildren,\n FlowComponentProps,\n PropsWithClassName,\n SupportedOverlayProps {\n /* The size of the modal. @default \"s\" /\n size?: \"s\" \| \"m\" \| \"l\";\n /* Whether the modal should be displayed as an off canvas. /\n offCanvas?: boolean;\n /\n Whether the off canvas should be displayed on the right or left side of the\n * screen. @default \"right\"\n /\n offCanvasOrientation?: \"left\" \| \"right\";\n /* An overlay controller to control the modal state. /\n controller?: OverlayController;\n /\n Accepts \"actionConfirm\" to use the modal as a confirmation modal for an\n * action.\n /\n slot?: string;\n /* Whether the modal can be closed by clicking outside of it. /\n isDismissable?: boolean;\n /* Whether the close button should be visible /\n showCloseButton?: boolean;\n /\n Whether closing the modal must be confirmed – use it to protect unsaved\n * changes.\n */\n confirmOnClose?: boolean;\n}\n\nexport const Modal = flowComponent(\"Modal\", (props) => {\n const {\n size = \"s\",\n offCanvas,\n controller,\n children,\n ref,\n className,\n offCanvasOrientation = \"right\",\n showCloseButton,\n ...overlayProps\n } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Modal\");\n\n // On mobile the header/footer are docked (sticky) while at rest, but flow\n // normally while the on-screen keyboard is open so the content gets the full\n // available space (see Modal.module.scss). #2423\n const keyboardVisible = useVirtualKeyboardVisible();\n\n const rootClassName = clsx(\n offCanvas ? styles.offCanvas : styles.modal,\n styles[`size-${size}`],\n offCanvasOrientation === \"left\" && styles[\"left\"],\n keyboardVisible && styles.keyboardVisible,\n className,\n );\n\n const generatedId = useId();\n\n const header = (children: ReactNode) => (\n <>\n <DivView className={styles.headerTitle}>{children}</DivView>\n <Action closeModal={{ bypassConfirmation: true }}>\n <ButtonView\n variant=\"plain\"\n color=\"secondary\"\n aria-label={stringFormatter.format(\"close\")}\n className={clsx(\n styles.closeButton,\n showCloseButton === true\n ? styles.alwaysVisible\n : showCloseButton === false\n ? styles.alwaysHidden\n : undefined,\n )}\n >\n <IconClose />\n </ButtonView>\n </Action>\n </>\n );\n\n const nestedHeadingLevel = 3;\n\n const nestedHeadingProps: PropsContext = {\n Heading: { level: nestedHeadingLevel },\n Section: {\n Header: { Heading: { level: nestedHeadingLevel } },\n Heading: { level: nestedHeadingLevel },\n hideSeparator: true,\n },\n Header: { Heading: { level: nestedHeadingLevel } },\n };\n\n const propsContext: PropsContext = {\n Content: {\n ...nestedHeadingProps,\n className: styles.content,\n },\n ColumnLayout: {\n ...nestedHeadingProps,\n l: [2, 1],\n m: [1],\n className: styles.columnLayout,\n AccentBox: { className: styles.accentBox, backgroundColor: \"neutral\" },\n wrapWith: <ClearPropsContext />,\n },\n Heading: {\n className: styles.header,\n level: 2,\n children: dynamic((props) => header(props.children)),\n id: generatedId,\n },\n ActionGroup: {\n className: styles.actionGroup,\n spacing: \"m\",\n Action: {\n closeModal: dynamic((props) => {\n if (props.closeModal === undefined) {\n return;\n }\n if (props.closeModal === true) {\n return { bypassConfirmation: true };\n }\n return {\n bypassConfirmation: true,\n ...props.closeModal,\n };\n }),\n closeOverlay: dynamic((props) => {\n if (props.closeOverlay === undefined) {\n return;\n }\n if (\n props.closeOverlay instanceof OverlayController \|\|\n typeof props.closeOverlay === \"string\"\n ) {\n return {\n bypassConfirmation: true,\n overlay: props.closeOverlay,\n };\n }\n return {\n bypassConfirmation: true,\n ...props.closeOverlay,\n };\n }),\n },\n },\n };\n\n return (\n <Overlay\n className={rootClassName}\n controller={controller}\n ref={ref}\n aria-labelledby={generatedId}\n {...overlayProps}\n >\n <PropsContextProvider props={propsContext}>\n <Wrap if={offCanvas}>\n <Suspense fallback={<OffCanvasSuspenseFallback />}>\n {children}\n </Suspense>\n </Wrap>\n </PropsContextProvider>\n <ConfirmUnsavedChangesModal />\n </Overlay>\n );\n});\n\nexport default Modal;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;AA+DA~~,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,OAAO,KACP,WACA,YACA,UACA,KACA,WACA,uBAAuB,SACvB,iBACA,GAAG,iBACD;CAEJ,MAAM,kBAAkB,4BAA4B,kBAAS,OAAO;CAKpE,MAAM,kBAAkB,0BAA0B;CAElD,MAAM,gBAAgB,KACpB,YAAY,qBAAO,YAAY,qBAAO,OACtC,qBAAO,QAAQ,SACf,yBAAyB,UAAU,qBAAO,SAC1C,mBAAmB,qBAAO,iBAC1B,SACF;CAEA,MAAM,cAAc,MAAM;CAE1B,MAAM,UAAU,aACd,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAS,WAAW,qBAAO;EAAc;CAAkB,CAAA,GAC3D,oBAAC,QAAD;EAAQ,YAAY,EAAE,oBAAoB,KAAK;EAC7C,UAAA,oBAAC,YAAD;GACE,SAAQ;GACR,OAAM;GACN,cAAY,gBAAgB,OAAO,OAAO;GAC1C,WAAW,KACT,qBAAO,aACP,oBAAoB,OAChB,qBAAO,gBACP,oBAAoB,QAClB,qBAAO,eACP,KAAA,CACR;GAEA,UAAA,oBAAC,WAAD,CAAY,CAAA;EACF,CAAA;CACN,CAAA,~~CACR~~,EAAA,CAAA;CAGJ,MAAM,qBAAqB;CAE3B,MAAM,qBAAmC;EACvC,SAAS,EAAE,OAAO,mBAAmB;EACrC,SAAS;GACP,QAAQ,EAAE,SAAS,EAAE,OAAO,mBAAmB,EAAE;GACjD,SAAS,EAAE,OAAO,mBAAmB;GACrC,eAAe;EACjB;EACA,QAAQ,EAAE,SAAS,EAAE,OAAO,mBAAmB,EAAE;CACnD;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,GAAG;GACH,WAAW,qBAAO;EACpB;EACA,cAAc;GACZ,GAAG;GACH,GAAG,CAAC,GAAG,CAAC;GACR,GAAG,CAAC,CAAC;GACL,WAAW,qBAAO;GAClB,WAAW;IAAE,WAAW,qBAAO;IAAW,iBAAiB;GAAU;GACrE,UAAU,oBAAC,mBAAD,CAAoB,CAAA;EAChC;EACA,SAAS;GACP,WAAW,qBAAO;GAClB,OAAO;GACP,UAAU,SAAS,UAAU,OAAO,MAAM,QAAQ,CAAC;GACnD,IAAI;EACN;EACA,aAAa;GACX,WAAW,qBAAO;GAClB,SAAS;GACT,QAAQ;IACN,YAAY,SAAS,UAAU;KAC7B,IAAI,MAAM,eAAe,KAAA,GACvB;KAEF,IAAI,MAAM,eAAe,MACvB,OAAO,EAAE,oBAAoB,KAAK;KAEpC,OAAO;MACL,oBAAoB;MACpB,GAAG,MAAM;KACX;IACF,CAAC;IACD,cAAc,SAAS,UAAU;KAC/B,IAAI,MAAM,iBAAiB,KAAA,GACzB;KAEF,IACE,MAAM,wBAAwB,qBAC9B,OAAO,MAAM,iBAAiB,UAE9B,OAAO;MACL,oBAAoB;MACpB,SAAS,MAAM;KACjB;KAEF,OAAO;MACL,oBAAoB;MACpB,GAAG,MAAM;KACX;IACF,CAAC;GACH;EACF;CACF;CAEA,OACE,qBAAC,SAAD;EACE,WAAW;EACC;EACP;EACL,mBAAiB;EACjB,GAAI;EALN,UAAA,CAOE,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,MAAD;IAAM,IAAI;IACR,UAAA,oBAAC,UAAD;KAAU,UAAU,oBAAC,2BAAD,CAA4B,CAAA;KAC7C;IACO,CAAA;GACN,CAAA;EACc,CAAA,GACtB,oBAAC,4BAAD,CAA6B,CAAA,CACtB;;AAEb,CAAC"}
1	+ {"version":3,"file":"Modal.mjs","names":[],"sources":["../../../../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import { type PropsWithChildren, type ReactNode, Suspense, useId } from \"react\";\nimport styles from \"./Modal.module.scss\";\nimport clsx from \"clsx\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { OverlayController } from \"@/lib/controller/overlay\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Overlay, type OverlayProps } from \"@/components/Overlay/Overlay\";\nimport { Action } from \"@/components/Action\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ButtonView from \"@/views/ButtonView\";\nimport DivView from \"@/views/DivView\";\nimport { OffCanvasSuspenseFallback } from \"@/components/Modal/components/OffCanvasSuspenseFallback\";\nimport { ConfirmUnsavedChangesModal } from \"@/components/Modal/components/ConfirmUnsavedChangesModal/ConfirmUnsavedChangesModal\";\nimport Wrap from \"@/components/Wrap\";\nimport { ClearPropsContext } from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport ClearPropsContextView from \"@/views/ClearPropsContextView\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { useVirtualKeyboardVisible } from \"@/lib/hooks/dom/useVirtualKeyboardVisible\";\nimport locales from \"./locales/.locale.json\";\n\ntype SupportedOverlayProps = Pick<\n OverlayProps,\n \"isOpen\" \| \"isDefaultOpen\" \| \"onOpen\" \| \"onClose\" \| \"onOpenChange\"\n>;\n\nexport interface ModalProps\n extends\n PropsWithChildren,\n FlowComponentProps,\n PropsWithClassName,\n SupportedOverlayProps {\n /* The size of the modal. @default \"s\" /\n size?: \"s\" \| \"m\" \| \"l\";\n /* Whether the modal should be displayed as an off canvas. /\n offCanvas?: boolean;\n /\n Whether the off canvas should be displayed on the right or left side of the\n * screen. @default \"right\"\n /\n offCanvasOrientation?: \"left\" \| \"right\";\n /* An overlay controller to control the modal state. /\n controller?: OverlayController;\n /\n Accepts \"actionConfirm\" to use the modal as a confirmation modal for an\n * action.\n /\n slot?: string;\n /* Whether the modal can be closed by clicking outside of it. /\n isDismissable?: boolean;\n /* Whether the close button should be visible /\n showCloseButton?: boolean;\n /\n Whether closing the modal must be confirmed – use it to protect unsaved\n * changes.\n */\n confirmOnClose?: boolean;\n}\n\nexport const Modal = flowComponent(\"Modal\", (props) => {\n const {\n size = \"s\",\n offCanvas,\n controller,\n children,\n ref,\n className,\n offCanvasOrientation = \"right\",\n showCloseButton,\n ...overlayProps\n } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Modal\");\n\n // On mobile the header/footer are docked (sticky) while at rest, but flow\n // normally while the on-screen keyboard is open so the content gets the full\n // available space (see Modal.module.scss). #2423\n const keyboardVisible = useVirtualKeyboardVisible();\n\n const rootClassName = clsx(\n offCanvas ? styles.offCanvas : styles.modal,\n styles[`size-${size}`],\n offCanvasOrientation === \"left\" && styles[\"left\"],\n keyboardVisible && styles.keyboardVisible,\n className,\n );\n\n const generatedId = useId();\n\n const header = (children: ReactNode) => (\n <>\n <DivView className={styles.headerTitle}>{children}</DivView>\n <ClearPropsContext>\n <ClearPropsContextView>\n <Action closeModal={{ bypassConfirmation: true }}>\n <ButtonView\n variant=\"plain\"\n color=\"secondary\"\n aria-label={stringFormatter.format(\"close\")}\n className={clsx(\n styles.closeButton,\n showCloseButton === true\n ? styles.alwaysVisible\n : showCloseButton === false\n ? styles.alwaysHidden\n : undefined,\n )}\n >\n <IconClose />\n </ButtonView>\n </Action>\n </ClearPropsContextView>\n </ClearPropsContext>\n </>\n );\n\n const nestedHeadingLevel = 3;\n\n const nestedHeadingProps: PropsContext = {\n Heading: { level: nestedHeadingLevel },\n Section: {\n Header: { Heading: { level: nestedHeadingLevel } },\n Heading: { level: nestedHeadingLevel },\n hideSeparator: true,\n },\n Header: { Heading: { level: nestedHeadingLevel } },\n };\n\n const propsContext: PropsContext = {\n Content: {\n ...nestedHeadingProps,\n className: styles.content,\n },\n ColumnLayout: {\n ...nestedHeadingProps,\n l: [2, 1],\n m: [1],\n className: styles.columnLayout,\n AccentBox: { className: styles.accentBox, backgroundColor: \"neutral\" },\n wrapWith: <ClearPropsContext />,\n },\n Heading: {\n className: styles.header,\n level: 2,\n children: dynamic((props) => header(props.children)),\n id: generatedId,\n },\n ActionGroup: {\n className: styles.actionGroup,\n spacing: \"m\",\n Action: {\n closeModal: dynamic((props) => {\n if (props.closeModal === undefined) {\n return;\n }\n if (props.closeModal === true) {\n return { bypassConfirmation: true };\n }\n return {\n bypassConfirmation: true,\n ...props.closeModal,\n };\n }),\n closeOverlay: dynamic((props) => {\n if (props.closeOverlay === undefined) {\n return;\n }\n if (\n props.closeOverlay instanceof OverlayController \|\|\n typeof props.closeOverlay === \"string\"\n ) {\n return {\n bypassConfirmation: true,\n overlay: props.closeOverlay,\n };\n }\n return {\n bypassConfirmation: true,\n ...props.closeOverlay,\n };\n }),\n },\n },\n };\n\n return (\n <Overlay\n className={rootClassName}\n controller={controller}\n ref={ref}\n aria-labelledby={generatedId}\n {...overlayProps}\n >\n <PropsContextProvider props={propsContext}>\n <Wrap if={offCanvas}>\n <Suspense fallback={<OffCanvasSuspenseFallback />}>\n {children}\n </Suspense>\n </Wrap>\n </PropsContextProvider>\n <ConfirmUnsavedChangesModal />\n </Overlay>\n );\n});\n\nexport default Modal;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgEA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,OAAO,KACP,WACA,YACA,UACA,KACA,WACA,uBAAuB,SACvB,iBACA,GAAG,iBACD;CAEJ,MAAM,kBAAkB,4BAA4B,kBAAS,OAAO;CAKpE,MAAM,kBAAkB,0BAA0B;CAElD,MAAM,gBAAgB,KACpB,YAAY,qBAAO,YAAY,qBAAO,OACtC,qBAAO,QAAQ,SACf,yBAAyB,UAAU,qBAAO,SAC1C,mBAAmB,qBAAO,iBAC1B,SACF;CAEA,MAAM,cAAc,MAAM;CAE1B,MAAM,UAAU,aACd,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAS,WAAW,qBAAO;EAAc;CAAkB,CAAA,GAC3D,oBAAC,mBAAD,EAAA,UACE,oBAAC,uBAAD,EAAA,UACE,oBAAC,QAAD;EAAQ,YAAY,EAAE,oBAAoB,KAAK;EAC7C,UAAA,oBAAC,YAAD;GACE,SAAQ;GACR,OAAM;GACN,cAAY,gBAAgB,OAAO,OAAO;GAC1C,WAAW,KACT,qBAAO,aACP,oBAAoB,OAChB,qBAAO,gBACP,oBAAoB,QAClB,qBAAO,eACP,KAAA,CACR;GAEA,UAAA,oBAAC,WAAD,CAAY,CAAA;EACF,CAAA;CACN,CAAA,EACa,CAAA,EACN,CAAA,CACnB,EAAA,CAAA;CAGJ,MAAM,qBAAqB;CAE3B,MAAM,qBAAmC;EACvC,SAAS,EAAE,OAAO,mBAAmB;EACrC,SAAS;GACP,QAAQ,EAAE,SAAS,EAAE,OAAO,mBAAmB,EAAE;GACjD,SAAS,EAAE,OAAO,mBAAmB;GACrC,eAAe;EACjB;EACA,QAAQ,EAAE,SAAS,EAAE,OAAO,mBAAmB,EAAE;CACnD;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,GAAG;GACH,WAAW,qBAAO;EACpB;EACA,cAAc;GACZ,GAAG;GACH,GAAG,CAAC,GAAG,CAAC;GACR,GAAG,CAAC,CAAC;GACL,WAAW,qBAAO;GAClB,WAAW;IAAE,WAAW,qBAAO;IAAW,iBAAiB;GAAU;GACrE,UAAU,oBAAC,mBAAD,CAAoB,CAAA;EAChC;EACA,SAAS;GACP,WAAW,qBAAO;GAClB,OAAO;GACP,UAAU,SAAS,UAAU,OAAO,MAAM,QAAQ,CAAC;GACnD,IAAI;EACN;EACA,aAAa;GACX,WAAW,qBAAO;GAClB,SAAS;GACT,QAAQ;IACN,YAAY,SAAS,UAAU;KAC7B,IAAI,MAAM,eAAe,KAAA,GACvB;KAEF,IAAI,MAAM,eAAe,MACvB,OAAO,EAAE,oBAAoB,KAAK;KAEpC,OAAO;MACL,oBAAoB;MACpB,GAAG,MAAM;KACX;IACF,CAAC;IACD,cAAc,SAAS,UAAU;KAC/B,IAAI,MAAM,iBAAiB,KAAA,GACzB;KAEF,IACE,MAAM,wBAAwB,qBAC9B,OAAO,MAAM,iBAAiB,UAE9B,OAAO;MACL,oBAAoB;MACpB,SAAS,MAAM;KACjB;KAEF,OAAO;MACL,oBAAoB;MACpB,GAAG,MAAM;KACX;IACF,CAAC;GACH;EACF;CACF;CAEA,OACE,qBAAC,SAAD;EACE,WAAW;EACC;EACP;EACL,mBAAiB;EACjB,GAAI;EALN,UAAA,CAOE,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,MAAD;IAAM,IAAI;IACR,UAAA,oBAAC,UAAD;KAAU,UAAU,oBAAC,2BAAD,CAA4B,CAAA;KAC7C;IACO,CAAA;GACN,CAAA;EACc,CAAA,GACtB,oBAAC,4BAAD,CAA6B,CAAA,CACtB;;AAEb,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.module.mjs","names":[],"sources":["../../../../../../../src/components/Modal/Modal.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n/* Caps the dialog width per size token (`size-s` / `size-m` / `size-l`). /\n@mixin size($size) {\n &.size-#{$size} {\n [role=\"dialog\"] {\n width: inherit;\n max-width: var(--modal--size--#{$size});\n }\n }\n}\n\n/ ===========================================================================\n Base — shared by Modal (centered / bottom sheet) and OffCanvas (side panel).\n =========================================================================== /\n.modal,\n.offCanvas {\n / Fixed full-viewport layer + centering wrapper. Sized to the visual\n viewport so it tracks the on-screen keyboard (Overlay sets the var). /\n > div {\n position: fixed;\n height: var(--visual-viewport-height);\n display: flex;\n flex-direction: column;\n width: 100%;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n\n > div {\n display: flex;\n justify-content: center;\n width: inherit;\n max-height: var(--visual-viewport-height);\n padding: var(--size-px--xl);\n }\n }\n\n / Close button: hidden when an action group is present, unless forced. /\n &:has(.actionGroup) {\n .closeButton:not(.alwaysVisible) {\n display: none;\n }\n }\n\n .closeButton.alwaysHidden {\n display: none;\n }\n\n / The dialog card itself — a flex column. /\n [role=\"dialog\"] {\n display: flex;\n flex-direction: column;\n max-height: 100%;\n overflow: hidden;\n outline: none;\n pointer-events: all;\n background-color: var(--modal--background-color);\n border: var(--modal--border-width) var(--modal--border-style)\n var(--modal--border-color);\n\n > form {\n display: contents;\n }\n }\n\n / Header /\n header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .header {\n display: flex;\n align-items: center;\n gap: var(--heading--icon-to-text-spacing);\n padding-top: var(--modal--header-padding-top);\n padding-inline: var(--modal--padding);\n\n / Flatten the heading's text and content spans into the header row, so\n badges stay behind the title instead of wrapping onto their own line. /\n > span {\n display: contents;\n }\n\n .headerTitle {\n min-width: 0;\n }\n\n .closeButton {\n order: 1;\n margin-inline-start: auto;\n }\n }\n\n / Content — the scrollable body /\n .content,\n .columnLayout {\n @include scrollbar.scrollbar;\n\n flex-grow: 1;\n min-height: var(--modal--content-min-height);\n padding: var(--modal--padding);\n overflow: hidden auto;\n background-color: var(--modal--background-color);\n }\n\n .columnLayout .accentBox {\n position: sticky;\n top: 0;\n height: fit-content;\n }\n\n / Action group — the footer /\n .actionGroup {\n padding: var(--modal--padding);\n background-color: var(--modal--footer-background-color);\n }\n\n / ActionGroup's \"sorted\" layout sets flex-grow:1 on itself; the modal footer\n must keep its natural height (otherwise it fills the full-height off-canvas\n panel). Scope via the dialog so flex-grow:0 wins the equal-specificity /\n source-order battle — without raising the specificity of the padding above,\n which the mobile rules override. /\n [role=\"dialog\"] .actionGroup {\n flex-grow: 0;\n }\n}\n\n/ ===========================================================================\n Modal — desktop (centered dialog, zoom in/out).\n =========================================================================== /\n@media (width > 768px) {\n .modal {\n @include size(s);\n @include size(m);\n @include size(l);\n\n [role=\"dialog\"] {\n border-radius: var(--modal--corner-radius);\n }\n\n > div > div {\n &[data-entering] {\n animation: modal-zoom var(--transition--duration--slow)\n cubic-bezier(0.1, 0.8, 0.3, 1.2);\n }\n\n &[data-exiting] {\n animation: modal-zoom var(--transition--duration--default)\n cubic-bezier(0.1, 0.8, 0.3, 1.2) reverse;\n }\n }\n }\n}\n\n/ ===========================================================================\n OffCanvas — side panel (all widths), full height, slides in from the side.\n =========================================================================== /\n.offCanvas {\n @include size(s);\n @include size(m);\n @include size(l);\n\n [role=\"dialog\"] {\n height: 100%;\n border-radius: 0;\n }\n\n > div {\n padding-inline-start: var(--size-px--m);\n\n > div {\n justify-content: flex-end;\n width: inherit;\n height: inherit;\n padding: unset;\n\n &[data-entering] {\n animation: modal-slide-in-from-right var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: modal-slide-in-from-right\n var(--transition--duration--default) reverse;\n }\n }\n }\n\n &.left {\n > div {\n padding-inline: 0 var(--size-px--m);\n\n > div {\n justify-content: flex-start;\n padding: unset;\n\n &[data-entering] {\n animation: modal-slide-in-from-left var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: modal-slide-in-from-left\n var(--transition--duration--default) reverse;\n }\n }\n }\n }\n}\n\n/ ===========================================================================\n Modal — mobile (bottom sheet), issue #2423.\n\n One scroll container: the dialog scrolls while the header sticks to the top\n and the footer to the bottom. While the virtual keyboard is open\n (.keyboardVisible) both un-stick so header + content + footer flow normally\n and the content gets the full available space.\n =========================================================================== /\n@media (max-width: 768px) {\n .modal {\n / Bottom-anchored sheet: rounded top corners + slide-up animation. /\n > div > div {\n margin-top: auto;\n width: 100%;\n padding: unset;\n overflow: hidden;\n border-start-start-radius: var(--modal--corner-radius);\n border-start-end-radius: var(--modal--corner-radius);\n pointer-events: all;\n\n &[data-entering] {\n animation: modal-slide-up var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: modal-slide-up var(--transition--duration--default) reverse;\n }\n }\n\n / The dialog is the single scroll container. Capped just below the visual\n viewport so a full-height sheet keeps a small gap from the top edge. /\n [role=\"dialog\"] {\n @include scrollbar.scrollbar;\n\n width: inherit;\n max-height: calc(\n var(--visual-viewport-height) - var(--modal--tray-top-spacing)\n );\n overflow: hidden auto;\n }\n\n [role=\"dialog\"] > form {\n width: inherit;\n }\n\n / flex: 0 0 auto keeps natural heights; without flex-shrink:0 the flex\n column compresses the content box and the (overflow:visible) fields\n spill over the footer. /\n .header,\n .content,\n .columnLayout,\n .actionGroup {\n flex: 0 0 auto;\n }\n\n .content,\n .columnLayout {\n min-height: 0;\n overflow: visible;\n }\n\n / Docked header + footer (sticky within the single scroll container). /\n .header {\n position: sticky;\n top: 0;\n z-index: 1;\n background-color: var(--modal--background-color);\n }\n\n .actionGroup {\n position: sticky;\n bottom: 0;\n z-index: 1;\n }\n }\n\n / Keyboard open: un-stick both so everything flows for maximum typing space.\n The dialog fills the available height and the footer uses margin-top:auto,\n so with SHORT content the footer still sits at the bottom (not mid-air) and\n with tall content it scrolls away with everything else. Never hidden. /\n .modal.keyboardVisible {\n [role=\"dialog\"] {\n min-height: calc(\n var(--visual-viewport-height) - var(--modal--tray-top-spacing)\n );\n }\n\n .header,\n .actionGroup {\n position: static;\n }\n\n .actionGroup {\n margin-top: auto;\n }\n }\n\n / Shared mobile spacing + full-width stacked actions (Modal + OffCanvas). /\n .modal,\n .offCanvas {\n .header {\n padding-inline: var(--modal--padding-mobile);\n }\n\n .content,\n .columnLayout,\n .actionGroup {\n padding: var(--modal--padding-mobile);\n }\n\n .actionGroup {\n flex-direction: column;\n\n button {\n width: 100%;\n }\n }\n }\n}\n\n/ ===========================================================================\n Animations\n =========================================================================== /\n@keyframes modal-zoom {\n / Start with scale(1) to let ResizeObservers take the correct width on mount. */\n 0% {\n opacity: 0;\n transform: scale(1);\n }\n\n 0.1% {\n opacity: 1;\n transform: scale(0.8);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes modal-slide-up {\n from {\n translate: 0 30%;\n }\n\n to {\n translate: 0 0;\n }\n}\n\n@keyframes modal-slide-in-from-right {\n from {\n translate: 30% 0;\n }\n\n to {\n translate: 0 0;\n }\n}\n\n@keyframes modal-slide-in-from-left {\n from {\n translate: -30% 0;\n }\n\n to {\n translate: 0 0;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Modal.module.mjs","names":[],"sources":["../../../../../../../src/components/Modal/Modal.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n/* Caps the dialog width per size token (`size-s` / `size-m` / `size-l`). /\n@mixin size($size) {\n &.size-#{$size} {\n [role=\"dialog\"] {\n width: inherit;\n max-width: var(--modal--size--#{$size});\n }\n }\n}\n\n/ ===========================================================================\n Base — shared by Modal (centered / bottom sheet) and OffCanvas (side panel).\n =========================================================================== /\n.modal,\n.offCanvas {\n / Fixed full-viewport layer + centering wrapper. Sized to the visual\n viewport so it tracks the on-screen keyboard (Overlay sets the var). /\n > div {\n position: fixed;\n height: var(--visual-viewport-height);\n display: flex;\n flex-direction: column;\n width: 100%;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n\n > div {\n display: flex;\n justify-content: center;\n width: inherit;\n max-height: var(--visual-viewport-height);\n padding: var(--size-px--xl);\n }\n }\n\n / Close button: hidden when an action group is present, unless forced. /\n &:has(.actionGroup) {\n .closeButton:not(.alwaysVisible) {\n display: none;\n }\n }\n\n .closeButton.alwaysHidden {\n display: none;\n }\n\n / The dialog card itself — a flex column. It is also the scroll container on\n mobile, and the sticky header/footer stack against its content only. /\n [role=\"dialog\"] {\n display: flex;\n flex-direction: column;\n isolation: isolate;\n max-height: 100%;\n overflow: hidden;\n outline: none;\n pointer-events: all;\n background-color: var(--modal--background-color);\n border: var(--modal--border-width) var(--modal--border-style)\n var(--modal--border-color);\n\n > form {\n display: contents;\n }\n }\n\n / Header /\n header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .header {\n display: flex;\n align-items: center;\n gap: var(--heading--icon-to-text-spacing);\n padding-top: var(--modal--header-padding-top);\n padding-inline: var(--modal--padding);\n\n / Flatten the heading's text and content spans into the header row, so\n badges stay behind the title instead of wrapping onto their own line. /\n > span {\n display: contents;\n }\n\n .headerTitle {\n min-width: 0;\n }\n\n .closeButton {\n order: 1;\n margin-inline-start: auto;\n }\n }\n\n / Content — the scrollable body /\n .content,\n .columnLayout {\n @include scrollbar.scrollbar;\n\n flex-grow: 1;\n min-height: var(--modal--content-min-height);\n padding: var(--modal--padding);\n overflow: hidden auto;\n background-color: var(--modal--background-color);\n }\n\n .columnLayout .accentBox {\n position: sticky;\n top: 0;\n height: fit-content;\n }\n\n / Action group — the footer /\n .actionGroup {\n padding: var(--modal--padding);\n background-color: var(--modal--footer-background-color);\n }\n\n / ActionGroup's \"sorted\" layout sets flex-grow:1 on itself; the modal footer\n must keep its natural height (otherwise it fills the full-height off-canvas\n panel). Scope via the dialog so flex-grow:0 wins the equal-specificity /\n source-order battle — without raising the specificity of the padding above,\n which the mobile rules override. /\n [role=\"dialog\"] .actionGroup {\n flex-grow: 0;\n }\n}\n\n/ ===========================================================================\n Modal — desktop (centered dialog, zoom in/out).\n =========================================================================== /\n@media (width > 768px) {\n .modal {\n @include size(s);\n @include size(m);\n @include size(l);\n\n [role=\"dialog\"] {\n border-radius: var(--modal--corner-radius);\n }\n\n > div > div {\n &[data-entering] {\n animation: modal-zoom var(--transition--duration--slow)\n cubic-bezier(0.1, 0.8, 0.3, 1.2);\n }\n\n &[data-exiting] {\n animation: modal-zoom var(--transition--duration--default)\n cubic-bezier(0.1, 0.8, 0.3, 1.2) reverse;\n }\n }\n }\n}\n\n/ ===========================================================================\n OffCanvas — side panel (all widths), full height, slides in from the side.\n =========================================================================== /\n.offCanvas {\n @include size(s);\n @include size(m);\n @include size(l);\n\n [role=\"dialog\"] {\n height: 100%;\n border-radius: 0;\n }\n\n > div {\n padding-inline-start: var(--size-px--m);\n\n > div {\n justify-content: flex-end;\n width: inherit;\n height: inherit;\n padding: unset;\n\n &[data-entering] {\n animation: modal-slide-in-from-right var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: modal-slide-in-from-right\n var(--transition--duration--default) reverse;\n }\n }\n }\n\n &.left {\n > div {\n padding-inline: 0 var(--size-px--m);\n\n > div {\n justify-content: flex-start;\n padding: unset;\n\n &[data-entering] {\n animation: modal-slide-in-from-left var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: modal-slide-in-from-left\n var(--transition--duration--default) reverse;\n }\n }\n }\n }\n}\n\n/ ===========================================================================\n Modal — mobile (bottom sheet), issue #2423.\n\n One scroll container: the dialog scrolls while the header sticks to the top\n and the footer to the bottom. While the virtual keyboard is open\n (.keyboardVisible) both un-stick so header + content + footer flow normally\n and the content gets the full available space.\n =========================================================================== /\n@media (max-width: 768px) {\n .modal {\n / Bottom-anchored sheet: rounded top corners + slide-up animation. /\n > div > div {\n margin-top: auto;\n width: 100%;\n padding: unset;\n overflow: hidden;\n border-start-start-radius: var(--modal--corner-radius);\n border-start-end-radius: var(--modal--corner-radius);\n pointer-events: all;\n\n &[data-entering] {\n animation: modal-slide-up var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: modal-slide-up var(--transition--duration--default) reverse;\n }\n }\n\n / The dialog is the single scroll container. Capped just below the visual\n viewport so a full-height sheet keeps a small gap from the top edge. /\n [role=\"dialog\"] {\n @include scrollbar.scrollbar;\n\n width: inherit;\n max-height: calc(\n var(--visual-viewport-height) - var(--modal--tray-top-spacing)\n );\n overflow: hidden auto;\n }\n\n [role=\"dialog\"] > form {\n width: inherit;\n }\n\n / flex: 0 0 auto keeps natural heights; without flex-shrink:0 the flex\n column compresses the content box and the (overflow:visible) fields\n spill over the footer. /\n .header,\n .content,\n .columnLayout,\n .actionGroup {\n flex: 0 0 auto;\n }\n\n .content,\n .columnLayout {\n min-height: 0;\n overflow: visible;\n }\n\n / Docked header + footer (sticky within the single scroll container). /\n .header {\n position: sticky;\n top: 0;\n z-index: 1;\n background-color: var(--modal--background-color);\n }\n\n .actionGroup {\n position: sticky;\n bottom: 0;\n z-index: 1;\n }\n }\n\n / Keyboard open: un-stick both so everything flows for maximum typing space.\n The dialog fills the available height and the footer uses margin-top:auto,\n so with SHORT content the footer still sits at the bottom (not mid-air) and\n with tall content it scrolls away with everything else. Never hidden. /\n .modal.keyboardVisible {\n [role=\"dialog\"] {\n min-height: calc(\n var(--visual-viewport-height) - var(--modal--tray-top-spacing)\n );\n }\n\n .header,\n .actionGroup {\n position: static;\n }\n\n .actionGroup {\n margin-top: auto;\n }\n }\n\n / Shared mobile spacing + full-width stacked actions (Modal + OffCanvas). /\n .modal,\n .offCanvas {\n .header {\n padding-inline: var(--modal--padding-mobile);\n }\n\n .content,\n .columnLayout,\n .actionGroup {\n padding: var(--modal--padding-mobile);\n }\n\n .actionGroup {\n flex-direction: column;\n\n button {\n width: 100%;\n }\n }\n }\n}\n\n/ ===========================================================================\n Animations\n =========================================================================== /\n@keyframes modal-zoom {\n / Start with scale(1) to let ResizeObservers take the correct width on mount. */\n 0% {\n opacity: 0;\n transform: scale(1);\n }\n\n 0.1% {\n opacity: 1;\n transform: scale(0.8);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes modal-slide-up {\n from {\n translate: 0 30%;\n }\n\n to {\n translate: 0 0;\n }\n}\n\n@keyframes modal-slide-in-from-right {\n from {\n translate: 30% 0;\n }\n\n to {\n translate: 0 0;\n }\n}\n\n@keyframes modal-slide-in-from-left {\n from {\n translate: -30% 0;\n }\n\n to {\n translate: 0 0;\n }\n}\n"],"mappings":""}

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

@@ -2,11 +2,19 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
+import { containsTextChild } from "../../lib/react/remote.mjs";
 import Navigation_module_default from "./Navigation.module.mjs";
 import { LinkListTunnelExit } from "./components/LinkListTunnelExit/LinkListTunnelExit.mjs";
 import clsx from "clsx";
+import { Children } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Navigation/Navigation.tsx
+/**
+* A bare text node is an anonymous flex item that no rule can reach, so give
+* the label an element the item can truncate.
+*/
+var wrapTextInLabel = (children) => Children.map(children, (child) => containsTextChild(child) ? /* @__PURE__ */ jsx("span", { children: child }) : child);
 /** @flr-generate all */
 var Navigation = flowComponent("Navigation", (props) => {
 	const { className, children, ref, ...rest } = props;
@@ -15,6 +23,7 @@ var Navigation = flowComponent("Navigation", (props) => {
 		wrapWith: /* @__PURE__ */ jsx("li", {}),
 		className: Navigation_module_default.item,
 		unstyled: true,
+		children: dynamic((linkProps) => wrapTextInLabel(linkProps.children)),
 		Icon: {
 			className: Navigation_module_default.icon,
 			size: "m"

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Navigation.mjs","names":[],"sources":["../../../../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport styles from \"./Navigation.module.scss\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { ComponentPropsContext } from \"@/lib/propsContext/types\";\nimport { LinkListTunnelExit } from \"@/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit\";\n\nexport interface NavigationProps\n extends\n PropsWithChildren<ComponentProps<\"nav\">>,\n PropsWithClassName,\n FlowComponentProps<HTMLElement> {}\n\n/** @flr-generate all */\nexport const Navigation = flowComponent(\"Navigation\", (props) => {\n const { className, children, ref, ...rest } = props;\n\n const rootClassName = clsx(styles.navigation, className);\n\n const linkPropsContext: ComponentPropsContext<\"Link\"> = {\n wrapWith: <li />,\n className: styles.item,\n unstyled: true,\n Icon: {\n className: styles.icon,\n size: \"m\",\n },\n Badge: { className: styles.badge },\n AlertBadge: { className: styles.badge },\n CounterBadge: { className: styles.badge },\n };\n\n return (\n <PropsContextProvider\n props={{\n Link: {\n ...linkPropsContext,\n tunnel: {\n id: \"links\",\n component: \"Navigation\",\n },\n },\n NavigationGroup: {\n Link: linkPropsContext,\n },\n }}\n >\n <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n <LinkListTunnelExit id=\"links\" component=\"Navigation\" />\n {children}\n </nav>\n </PropsContextProvider>\n );\n});\n\nexport default Navigation;\n"],"mappings":"~~;;;;;;;;;;AAmBA~~,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,WAAW,UAAU,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAK,0BAAO,YAAY,SAAS;CAEvD,MAAM,mBAAkD;EACtD,UAAU,oBAAC,MAAD,CAAK,CAAA;EACf,WAAW,0BAAO;EAClB,UAAU;EACV,MAAM;GACJ,WAAW,0BAAO;GAClB,MAAM;EACR;EACA,OAAO,EAAE,WAAW,0BAAO,MAAM;EACjC,YAAY,EAAE,WAAW,0BAAO,MAAM;EACtC,cAAc,EAAE,WAAW,0BAAO,MAAM;CAC1C;CAEA,OACE,oBAAC,sBAAD;EACE,OAAO;GACL,MAAM;IACJ,GAAG;IACH,QAAQ;KACN,IAAI;KACJ,WAAW;IACb;GACF;GACA,iBAAiB,EACf,MAAM,iBACR;EACF;EAEA,UAAA,qBAAC,OAAD;GAAK,WAAW;GAAe,MAAK;GAAa,GAAI;GAAW;GAAhE,UAAA,CACE,oBAAC,oBAAD;IAAoB,IAAG;IAAQ,WAAU;GAAc,CAAA,GACtD,QACE;;CACe,CAAA;AAE1B,CAAC"}
1	+ {"version":3,"file":"Navigation.mjs","names":[],"sources":["../../../../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren, ReactNode } from \"react\";\nimport { Children } from \"react\";\nimport styles from \"./Navigation.module.scss\";\nimport clsx from \"clsx\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { ComponentPropsContext } from \"@/lib/propsContext/types\";\nimport { LinkListTunnelExit } from \"@/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit\";\nimport { containsTextChild } from \"@/lib/react/remote\";\n\nexport interface NavigationProps\n extends\n PropsWithChildren<ComponentProps<\"nav\">>,\n PropsWithClassName,\n FlowComponentProps<HTMLElement> {}\n\n/*\n A bare text node is an anonymous flex item that no rule can reach, so give\n * the label an element the item can truncate.\n /\nconst wrapTextInLabel = (children: ReactNode): ReactNode =>\n Children.map(children, (child) =>\n containsTextChild(child) ? <span>{child}</span> : child,\n );\n\n/* @flr-generate all */\nexport const Navigation = flowComponent(\"Navigation\", (props) => {\n const { className, children, ref, ...rest } = props;\n\n const rootClassName = clsx(styles.navigation, className);\n\n const linkPropsContext: ComponentPropsContext<\"Link\"> = {\n wrapWith: <li />,\n className: styles.item,\n unstyled: true,\n children: dynamic((linkProps) => wrapTextInLabel(linkProps.children)),\n Icon: {\n className: styles.icon,\n size: \"m\",\n },\n Badge: { className: styles.badge },\n AlertBadge: { className: styles.badge },\n CounterBadge: { className: styles.badge },\n };\n\n return (\n <PropsContextProvider\n props={{\n Link: {\n ...linkPropsContext,\n tunnel: {\n id: \"links\",\n component: \"Navigation\",\n },\n },\n NavigationGroup: {\n Link: linkPropsContext,\n },\n }}\n >\n <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n <LinkListTunnelExit id=\"links\" component=\"Navigation\" />\n {children}\n </nav>\n </PropsContextProvider>\n );\n});\n\nexport default Navigation;\n"],"mappings":";;;;;;;;;;;;;;;;AAwBA,IAAM,mBAAmB,aACvB,SAAS,IAAI,WAAW,UACtB,kBAAkB,KAAK,IAAI,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,IAAI,KACpD;;AAGF,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,WAAW,UAAU,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAK,0BAAO,YAAY,SAAS;CAEvD,MAAM,mBAAkD;EACtD,UAAU,oBAAC,MAAD,CAAK,CAAA;EACf,WAAW,0BAAO;EAClB,UAAU;EACV,UAAU,SAAS,cAAc,gBAAgB,UAAU,QAAQ,CAAC;EACpE,MAAM;GACJ,WAAW,0BAAO;GAClB,MAAM;EACR;EACA,OAAO,EAAE,WAAW,0BAAO,MAAM;EACjC,YAAY,EAAE,WAAW,0BAAO,MAAM;EACtC,cAAc,EAAE,WAAW,0BAAO,MAAM;CAC1C;CAEA,OACE,oBAAC,sBAAD;EACE,OAAO;GACL,MAAM;IACJ,GAAG;IACH,QAAQ;KACN,IAAI;KACJ,WAAW;IACb;GACF;GACA,iBAAiB,EACf,MAAM,iBACR;EACF;EAEA,UAAA,qBAAC,OAAD;GAAK,WAAW;GAAe,MAAK;GAAa,GAAI;GAAW;GAAhE,UAAA,CACE,oBAAC,oBAAD;IAAoB,IAAG;IAAQ,WAAU;GAAc,CAAA,GACtD,QACE;;CACe,CAAA;AAE1B,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Navigation.module.mjs","names":[],"sources":["../../../../../../../src/components/Navigation/Navigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/menuItem\";\n\n.navigation {\n display: flex;\n flex-direction: column;\n\n ul {\n display: flex;\n flex-direction: column;\n row-gap: var(--menu--item-to-item-spacing);\n\n &:empty {\n display: none;\n }\n }\n\n .item {\n @include menuItem.menuItem();\n\n flex-~~wrap~~: ~~wrap~~;\n\n > .icon {\n order: 0;\n }\n\n > :not(.icon) {\n ~~order~~: 1;\n }\n\n .badge {\n margin-inline-start: auto;\n }\n }\n\n hr {\n margin-bottom: var(--menu--group-to-group-spacing);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Navigation.module.mjs","names":[],"sources":["../../../../../../../src/components/Navigation/Navigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/menuItem\";\n@use \"@/styles/mixins/ellipsis\";\n\n.navigation {\n display: flex;\n flex-direction: column;\n min-width: 0;\n\n ul {\n display: flex;\n flex-direction: column;\n row-gap: var(--menu--item-to-item-spacing);\n\n &:empty {\n display: none;\n }\n }\n\n .item {\n @include menuItem.menuItem();\n\n > .icon {\n order: 0;\n flex-shrink: 0;\n }\n\n > :not(.icon) {\n order: 1;\n }\n\n > :not(.icon, .badge) {\n @include ellipsis.ellipsis;\n\n min-width: 0;\n }\n\n .badge {\n margin-inline-start: auto;\n flex-shrink: 0;\n }\n }\n\n hr {\n margin-bottom: var(--menu--group-to-group-spacing);\n }\n}\n"],"mappings":""}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Notification.module.mjs","names":[],"sources":["../../../../../../../src/components/Notification/Notification.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.notification {\n border-radius: var(--notification--corner-radius);\n width: var(--notification--width);\n box-shadow: var(--notification--box-shadow);\n position: relative;\n border: var(--notification--border-width) var(--notification--border-style)\n var(--notification--border-color);\n\n &::after {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n width: var(--notification--border-x-start-width);\n inset-inline-start: calc(var(--size-px--xxxs) * -1);\n border-start-start-radius: var(--notification--corner-radius);\n border-end-start-radius: var(--notification--corner-radius);\n }\n\n @extend .info;\n\n /* Elements /\n\n .link {\n padding: var(--notification--padding);\n padding-inline-start: calc(\n var(--notification--padding) + var(--notification--border-x-start-width)\n );\n display: flex;\n flex-direction: column;\n row-gap: var(--notification--heading-to-text-spacing);\n cursor: default;\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n position: relative;\n border-radius: calc(var(--notification--corner-radius) - 1px);\n\n @include focus.focus;\n }\n\n .heading {\n --button-size: calc(\n var(--button--line-height-s) + 2 var(--button--padding-s-x)\n );\n\n padding-inline-end: calc(\n var(--button-size) + var(--heading--icon-to-text-spacing)\n );\n\n .icon {\n height: var(--heading-line-height);\n width: var(--heading-line-height);\n vertical-align: bottom;\n display: inline-block;\n margin-inline-end: var(--heading--icon-to-text-spacing);\n }\n }\n\n .text {\n font-size: var(--notification--font-size);\n }\n\n .close {\n position: absolute;\n top: var(--notification--padding);\n inset-inline-end: var(--notification--padding);\n }\n\n /* Status */\n\n @mixin status($status) {\n &.#{$status} {\n .link {\n border-color: var(--notification--#{$status}-background-color--default);\n background-color: var(\n --notification--#{$status}-background-color--default\n );\n }\n\n &::after {\n background-color: var(--notification--#{$status}-border-color);\n }\n\n &.hasLink {\n .link {\n &:hover {\n background-color: var(\n --notification--#{$status}-background-color--hover\n );\n }\n\n &[data-pressed] {\n background-color: var(\n --notification--#{$status}-background-color--pressed\n );\n }\n }\n }\n\n .heading {\n color: var(--notification--#{$status}-heading-color);\n }\n }\n }\n\n @include status(info);\n @include status(warning);\n @include status(danger);\n @include status(success);\n @include status(unavailable);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Notification.module.mjs","names":[],"sources":["../../../../../../../src/components/Notification/Notification.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.notification {\n border-radius: var(--notification--corner-radius);\n width: var(--notification--width);\n max-width: var(--notification--max-width);\n box-shadow: var(--notification--box-shadow);\n position: relative;\n border: var(--notification--border-width) var(--notification--border-style)\n var(--notification--border-color);\n\n &::after {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n width: var(--notification--border-x-start-width);\n inset-inline-start: calc(var(--size-px--xxxs) * -1);\n border-start-start-radius: var(--notification--corner-radius);\n border-end-start-radius: var(--notification--corner-radius);\n }\n\n @extend .info;\n\n /* Elements /\n\n .link {\n padding: var(--notification--padding);\n padding-inline-start: calc(\n var(--notification--padding) + var(--notification--border-x-start-width)\n );\n display: flex;\n flex-direction: column;\n row-gap: var(--notification--heading-to-text-spacing);\n cursor: default;\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n position: relative;\n border-radius: calc(var(--notification--corner-radius) - 1px);\n\n @include focus.focus;\n }\n\n .heading {\n --button-size: calc(\n var(--button--line-height-s) + 2 var(--button--padding-s-x)\n );\n\n padding-inline-end: calc(\n var(--button-size) + var(--heading--icon-to-text-spacing)\n );\n\n .icon {\n height: var(--heading-line-height);\n width: var(--heading-line-height);\n vertical-align: bottom;\n display: inline-block;\n margin-inline-end: var(--heading--icon-to-text-spacing);\n }\n }\n\n .text {\n font-size: var(--notification--font-size);\n }\n\n .close {\n position: absolute;\n top: var(--notification--padding);\n inset-inline-end: var(--notification--padding);\n }\n\n /* Status */\n\n @mixin status($status) {\n &.#{$status} {\n .link {\n border-color: var(--notification--#{$status}-background-color--default);\n background-color: var(\n --notification--#{$status}-background-color--default\n );\n }\n\n &::after {\n background-color: var(--notification--#{$status}-border-color);\n }\n\n &.hasLink {\n .link {\n &:hover {\n background-color: var(\n --notification--#{$status}-background-color--hover\n );\n }\n\n &[data-pressed] {\n background-color: var(\n --notification--#{$status}-background-color--pressed\n );\n }\n }\n }\n\n .heading {\n color: var(--notification--#{$status}-heading-color);\n }\n }\n }\n\n @include status(info);\n @include status(warning);\n @include status(danger);\n @include status(success);\n @include status(unavailable);\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/NotificationProvider/NotificationContainer/NotificationContainer.mjs CHANGED Viewed

@@ -23,6 +23,7 @@ var NotificationContainer = (props) => {
 			children: /* @__PURE__ */ jsx("div", {
 				className: rootClassName,
 				...rest,
+				"data-react-aria-top-layer": true,
 				children: /* @__PURE__ */ jsx(AnimatePresence, { children: notifications.map((n) => /* @__PURE__ */ jsx(m.div, {
 					className: NotificationContainer_module_default.notification,
 					initial: {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NotificationContainer.mjs","names":[],"sources":["../../../../../../../../src/components/NotificationProvider/NotificationContainer/NotificationContainer.tsx"],"sourcesContent":["import type { ComponentProps, FC } from \"react\";\nimport { Suspense } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport clsx from \"clsx\";\nimport styles from \"./NotificationContainer.module.scss\";\nimport ControlledNotification from \"@/components/NotificationProvider/ControlledNotification\";\nimport {\n AnimatePresence,\n domAnimation,\n LazyMotion,\n m,\n MotionConfig,\n} from \"framer-motion\";\nimport { useIsSSR } from \"react-aria\";\nimport { useNotificationController } from \"@/components/NotificationProvider/NotificationProvider\";\n\nexport type NotificationsContainerProps = ComponentProps<\"div\">;\n\nexport const NotificationContainer: FC<NotificationsContainerProps> = (\n props,\n) => {\n const { className, ...rest } = props;\n\n const controller = useNotificationController();\n const notifications = controller.useNotifications();\n const isSsr = useIsSSR();\n\n const rootClassName = clsx(styles.notificationContainer, className);\n\n const content = (\n <MotionConfig reducedMotion=\"user\">\n <LazyMotion features={domAnimation}>\n <div className={rootClassName} {...rest}>\n <AnimatePresence>\n {notifications.map((n) => (\n <m.div\n className={styles.notification}\n key={n.meta.id}\n initial={{ opacity: 0, x: 200 }}\n animate={{ opacity: 1, x: 0 }}\n exit={{ opacity: 0, x: 200, height: 0, paddingBottom: 0 }}\n transition={{\n bounce: 0,\n }}\n >\n <Suspense>\n <ControlledNotification\n notification={n}\n controller={controller}\n />\n </Suspense>\n </m.div>\n ))}\n </AnimatePresence>\n </div>\n </LazyMotion>\n </MotionConfig>\n );\n\n return isSsr ? null : ReactDOM.createPortal(content, document.body);\n};\n\nexport default NotificationContainer;\n"],"mappings":";;;;;;;;;;;;AAkBA,IAAa,yBACX,UACG;CACH,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,MAAM,aAAa,0BAA0B;CAC7C,MAAM,gBAAgB,WAAW,iBAAiB;CAClD,MAAM,QAAQ,SAAS;CAEvB,MAAM,gBAAgB,KAAK,qCAAO,uBAAuB,SAAS;CAElE,MAAM,UACJ,oBAAC,cAAD;EAAc,eAAc;EAC1B,UAAA,oBAAC,YAAD;GAAY,UAAU;GACpB,UAAA,oBAAC,OAAD;IAAK,WAAW;IAAe,GAAI;~~IACjC~~,UAAA,oBAAC,iBAAD,EAAA,UACG,cAAc,KAAK,MAClB,oBAAC,EAAE,KAAH;KACE,WAAW,qCAAO;KAElB,SAAS;MAAE,SAAS;MAAG,GAAG;KAAI;KAC9B,SAAS;MAAE,SAAS;MAAG,GAAG;KAAE;KAC5B,MAAM;MAAE,SAAS;MAAG,GAAG;MAAK,QAAQ;MAAG,eAAe;KAAE;KACxD,YAAY,EACV,QAAQ,EACV;KAEA,UAAA,oBAAC,UAAD,EAAA,UACE,oBAAC,wBAAD;MACE,cAAc;MACF;KACb,CAAA,EACO,CAAA;IACL,GAdA,EAAE,KAAK,EAcP,CACR,EACc,CAAA;GACd,CAAA;EACK,CAAA;CACA,CAAA;CAGhB,OAAO,QAAQ,OAAO,SAAS,aAAa,SAAS,SAAS,IAAI;AACpE"}
1	+ {"version":3,"file":"NotificationContainer.mjs","names":[],"sources":["../../../../../../../../src/components/NotificationProvider/NotificationContainer/NotificationContainer.tsx"],"sourcesContent":["import type { ComponentProps, FC } from \"react\";\nimport { Suspense } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport clsx from \"clsx\";\nimport styles from \"./NotificationContainer.module.scss\";\nimport ControlledNotification from \"@/components/NotificationProvider/ControlledNotification\";\nimport {\n AnimatePresence,\n domAnimation,\n LazyMotion,\n m,\n MotionConfig,\n} from \"framer-motion\";\nimport { useIsSSR } from \"react-aria\";\nimport { useNotificationController } from \"@/components/NotificationProvider/NotificationProvider\";\n\nexport type NotificationsContainerProps = ComponentProps<\"div\">;\n\nexport const NotificationContainer: FC<NotificationsContainerProps> = (\n props,\n) => {\n const { className, ...rest } = props;\n\n const controller = useNotificationController();\n const notifications = controller.useNotifications();\n const isSsr = useIsSSR();\n\n const rootClassName = clsx(styles.notificationContainer, className);\n\n const content = (\n <MotionConfig reducedMotion=\"user\">\n <LazyMotion features={domAnimation}>\n <div className={rootClassName} {...rest} data-react-aria-top-layer>\n <AnimatePresence>\n {notifications.map((n) => (\n <m.div\n className={styles.notification}\n key={n.meta.id}\n initial={{ opacity: 0, x: 200 }}\n animate={{ opacity: 1, x: 0 }}\n exit={{ opacity: 0, x: 200, height: 0, paddingBottom: 0 }}\n transition={{\n bounce: 0,\n }}\n >\n <Suspense>\n <ControlledNotification\n notification={n}\n controller={controller}\n />\n </Suspense>\n </m.div>\n ))}\n </AnimatePresence>\n </div>\n </LazyMotion>\n </MotionConfig>\n );\n\n return isSsr ? null : ReactDOM.createPortal(content, document.body);\n};\n\nexport default NotificationContainer;\n"],"mappings":";;;;;;;;;;;;AAkBA,IAAa,yBACX,UACG;CACH,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,MAAM,aAAa,0BAA0B;CAC7C,MAAM,gBAAgB,WAAW,iBAAiB;CAClD,MAAM,QAAQ,SAAS;CAEvB,MAAM,gBAAgB,KAAK,qCAAO,uBAAuB,SAAS;CAElE,MAAM,UACJ,oBAAC,cAAD;EAAc,eAAc;EAC1B,UAAA,oBAAC,YAAD;GAAY,UAAU;GACpB,UAAA,oBAAC,OAAD;IAAK,WAAW;IAAe,GAAI;IAAM,6BAAA;IACvC,UAAA,oBAAC,iBAAD,EAAA,UACG,cAAc,KAAK,MAClB,oBAAC,EAAE,KAAH;KACE,WAAW,qCAAO;KAElB,SAAS;MAAE,SAAS;MAAG,GAAG;KAAI;KAC9B,SAAS;MAAE,SAAS;MAAG,GAAG;KAAE;KAC5B,MAAM;MAAE,SAAS;MAAG,GAAG;MAAK,QAAQ;MAAG,eAAe;KAAE;KACxD,YAAY,EACV,QAAQ,EACV;KAEA,UAAA,oBAAC,UAAD,EAAA,UACE,oBAAC,wBAAD;MACE,cAAc;MACF;KACb,CAAA,EACO,CAAA;IACL,GAdA,EAAE,KAAK,EAcP,CACR,EACc,CAAA;GACd,CAAA;EACK,CAAA;CACA,CAAA;CAGhB,OAAO,QAAQ,OAAO,SAAS,aAAa,SAAS,SAAS,IAAI;AACpE"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NotificationContainer.module.mjs","names":[],"sources":["../../../../../../../../src/components/NotificationProvider/NotificationContainer/NotificationContainer.module.scss"],"sourcesContent":[".notificationContainer {\n position: fixed;\n top: var(--notification-provider--window-to-provider-spacing);\n inset-inline-end: var(--notification-provider--window-to-provider-spacing);\n display: flex;\n flex-direction: column;\n z-index: 1;\n\n .notification {\n padding-bottom: var(\n --notification-provider--notification-to-notification-spacing\n );\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"NotificationContainer.module.mjs","names":[],"sources":["../../../../../../../../src/components/NotificationProvider/NotificationContainer/NotificationContainer.module.scss"],"sourcesContent":["/* This container is portalled into `document.body`, so its z-index lives in the\n root stacking context and cannot be isolated. It has to: overlays render into\n a container that is kept as body's last child (see\n `OverlayContent.getOverlayContainer`), and this is what keeps a notification\n painted over an open modal. */\n.notificationContainer {\n position: fixed;\n top: var(--notification-provider--window-to-provider-spacing);\n inset-inline-end: var(--notification-provider--window-to-provider-spacing);\n display: flex;\n flex-direction: column;\n z-index: 1;\n\n .notification {\n padding-bottom: var(\n --notification-provider--notification-to-notification-spacing\n );\n }\n}\n"],"mappings":""}

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

@@ -18,7 +18,7 @@ import * as Aria from "react-aria-components";
 //#region src/components/NumberField/NumberField.tsx
 /** @flr-generate all */
 var NumberField = flowComponent("NumberField", (props) => {
-	const { children, className, isWheelDisabled = true, ref, ...rest } = useControlledHostValueProps(props);
+	const { children, className, isWheelDisabled = true, ref, ...rest } = useControlledHostValueProps(props, NaN);
 	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "NumberField");
 	const rootClassName = clsx(FormField_module_default.formField, className);
 	return /* @__PURE__ */ jsxs(Aria.NumberField, {

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

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

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

@@ -1,17 +1,26 @@
 "use client"
 /* */
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
-import { extractTextFromFirstChild } from "../../lib/react/remote.mjs";
+import { extractTextFromChildren } from "../../lib/react/remote.mjs";
 import { IconCheck } from "../Icon/components/icons/IconCheck.mjs";
 import Option_module_default from "./Option.module.mjs";
 import clsx from "clsx";
-import { Children } from "react";
+import { Children, useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
 //#region src/components/Option/Option.tsx
+/**
+* The key an option contributes to its collection: an explicit `value`, else
+* the `textValue`, else the text among the children. Shared with the props
+* context that routes options through a field's tunnel, so both derive the same
+* identity for one option.
+*/
+var getOptionValue = (props) => props.value ?? props.textValue ?? extractTextFromChildren(props.children);
 /** @flr-generate all */
 var Option = flowComponent("Option", (props) => {
-	const { className, children, textValue = extractTextFromFirstChild(children), value = textValue, ref, ...rest } = props;
+	const { className, children, textValue = extractTextFromChildren(children), value: valueIgnored, ref, ...rest } = props;
+	const value = getOptionValue(props);
+	useWarnMissingValue(value === void 0);
 	const rootClassName = clsx(Option_module_default.option, className);
 	const hasChildren = Children.count(children) >= 1;
 	return /* @__PURE__ */ jsxs(Aria.ListBoxItem, {
@@ -29,7 +38,15 @@ var Option = flowComponent("Option", (props) => {
 		})]
 	});
 });
+var useWarnMissingValue = (isMissing) => {
+	const hasWarned = useRef(false);
+	useEffect(() => {
+		if (!isMissing || hasWarned.current) return;
+		hasWarned.current = true;
+		console.error("An <Option> has no 'value' and none could be inferred from its children, so it falls back to a generated, render-order-dependent key. Pass a 'value' to give the option a stable key.");
+	}, [isMissing]);
+};
 //#endregion
-export { Option, Option as default };
+export { Option, Option as default, getOptionValue };
 //# sourceMappingURL=Option.mjs.map

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

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

package/dist/js/packages/components/src/components/Option/optionsTunnel.mjs ADDED Viewed

@@ -0,0 +1,36 @@
+"use client"
+/* */
+import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
+import { getOptionValue } from "./Option.mjs";
+//#region src/components/Option/optionsTunnel.ts
+var optionsTunnelId = "options";
+/**
+* Props context entry that routes a field's `Option` children through its
+* "options" tunnel.
+*
+* The entry id is the option's own collection key rather than a generated one.
+* react-aria renders collection children twice — once into its hidden
+* collection document, once for real — and both renders register a tunnel
+* entry. With a generated id each render becomes its own entry, so the tunnel
+* exit renders every option twice: the collection then holds two element nodes
+* per key, and the `prevKey`/`nextKey` links derived from that doubled sibling
+* chain form a ring. That ring makes `ArrowUp` on the first option wrap to the
+* last one, and lets react-stately's focus restoration walk `getKeyBefore`
+* forever, which freezes the tab.
+*
+* An option without a value keeps a generated id. Its collection key is a
+* react-aria render counter in that case, which is unstable for other reasons
+* already — `Option` warns about it.
+*/
+var getOptionsTunnelProps = (component) => dynamic((optionProps) => {
+	const value = getOptionValue(optionProps);
+	return {
+		id: optionsTunnelId,
+		component,
+		staticEntryId: value === void 0 ? void 0 : String(value)
+	};
+});
+//#endregion
+export { getOptionsTunnelProps, optionsTunnelId };
+//# sourceMappingURL=optionsTunnel.mjs.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"optionsTunnel.mjs","names":[],"sources":["../../../../../../../src/components/Option/optionsTunnel.ts"],"sourcesContent":["import type { FlowComponentName } from \"@/components/propTypes\";\nimport { dynamic } from \"@/lib/propsContext\";\nimport { getOptionValue } from \"./Option\";\n\nexport const optionsTunnelId = \"options\";\n\n/**\n * Props context entry that routes a field's `Option` children through its\n * \"options\" tunnel.\n *\n * The entry id is the option's own collection key rather than a generated one.\n * react-aria renders collection children twice — once into its hidden\n * collection document, once for real — and both renders register a tunnel\n * entry. With a generated id each render becomes its own entry, so the tunnel\n * exit renders every option twice: the collection then holds two element nodes\n * per key, and the `prevKey`/`nextKey` links derived from that doubled sibling\n * chain form a ring. That ring makes `ArrowUp` on the first option wrap to the\n * last one, and lets react-stately's focus restoration walk `getKeyBefore`\n * forever, which freezes the tab.\n *\n * An option without a value keeps a generated id. Its collection key is a\n * react-aria render counter in that case, which is unstable for other reasons\n * already — `Option` warns about it.\n */\nexport const getOptionsTunnelProps = (component: FlowComponentName) =>\n dynamic<\"Option\", \"tunnel\">((optionProps) => {\n const value = getOptionValue(optionProps);\n\n return {\n id: optionsTunnelId,\n component,\n staticEntryId: value === undefined ? undefined : String(value),\n };\n });\n"],"mappings":";;;;;AAIA,IAAa,kBAAkB;;;;;;;;;;;;;;;;;;;AAoB/B,IAAa,yBAAyB,cACpC,SAA6B,gBAAgB;CAC3C,MAAM,QAAQ,eAAe,WAAW;CAExC,OAAO;EACL,IAAI;EACJ;EACA,eAAe,UAAU,KAAA,IAAY,KAAA,IAAY,OAAO,KAAK;CAC/D;AACF,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Overlay.module.mjs","names":[],"sources":["../../../../../../../src/components/Overlay/Overlay.module.scss"],"sourcesContent":["/* Full-page backdrop behind every overlay (Modal, LightBox, …).\n ~~react~~-~~aria~~ ~~publishes~~ ~~two~~ ~~custom~~ ~~properties~~ on the overlay ~~element~~ ~~that~~ ~~this~~\n ~~package~~ ~~relies~~ on: `--page-height` (full ~~scrollable~~ ~~page~~ height, ~~used~~ ~~here)~~\n ~~and~~ ~~`--visual-~~viewport-~~height~~` ~~(space~~ ~~above~~ the ~~on-screen~~ ~~keyboard,~~ ~~used~~ by\n ~~Modal)~~. ~~Both~~ ~~update~~ as the ~~visual~~ ~~viewport~~ ~~changes~~. /\n.overlay {\n position: fixed;\n top: 0;\n inset-inline-start: 0;\n width: 100%;\n height: var(--~~page~~-height);\n isolation: isolate;\n background: var(--overlay--backdrop-color);\n backdrop-filter: blur(var(--blur));\n\n &[data-entering] {\n animation: overlay-fade var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: overlay-fade var(--transition--duration--default) reverse ease-in;\n }\n}\n\n/ Fallback shown while suspended overlay content loads. */\n.suspense {\n padding: var(--size-px--xl);\n}\n\n@keyframes overlay-fade {\n 0% {\n opacity: 0;\n }\n\n 50% {\n opacity: 1;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@media (prefers-contrast: more), (prefers-reduced-transparency) {\n .overlay {\n backdrop-filter: none;\n background-color: var(--dark--color--600);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Overlay.module.mjs","names":[],"sources":["../../../../../../../src/components/Overlay/Overlay.module.scss"],"sourcesContent":["/* Full-page backdrop behind every overlay (Modal, LightBox, …).\n\n Sized to `--visual-viewport-height`, the property the Modal wrapper uses too,\n so the whole overlay stack tracks the on-screen keyboard as one. react-aria\n publishes it on this element and updates it with the visual viewport.\n\n Not `--page-height` (the full document height): this element is `fixed`, so\n anything past the viewport never shows, while `backdrop-filter` blurs the\n whole layer every frame. Chromium drops an oversized one for single frames\n while scrolling, flickering backdrop and modal alike. #2338 switched\n `absolute` → `fixed` and added the blur, but kept the `--page-height` that\n `absolute` had needed. /\n.overlay {\n position: fixed;\n top: 0;\n inset-inline-start: 0;\n width: 100%;\n height: var(--visual-viewport-height);\n isolation: isolate;\n background: var(--overlay--backdrop-color);\n backdrop-filter: blur(var(--blur));\n\n &[data-entering] {\n animation: overlay-fade var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: overlay-fade var(--transition--duration--default) reverse ease-in;\n }\n}\n\n/ Fallback shown while suspended overlay content loads. */\n.suspense {\n padding: var(--size-px--xl);\n}\n\n@keyframes overlay-fade {\n 0% {\n opacity: 0;\n }\n\n 50% {\n opacity: 1;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@media (prefers-contrast: more), (prefers-reduced-transparency) {\n .overlay {\n backdrop-filter: none;\n background-color: var(--dark--color--600);\n }\n}\n"],"mappings":""}

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

@@ -1,5 +1,6 @@
 "use client"
 /* */
+import { useIsActivityActive } from "../../Activity/context.mjs";
 import DivView from "../../../views/DivView.mjs";
 import Overlay_module_default from "../Overlay.module.mjs";
 import { OverlaySuspenseFallback } from "./OverlaySuspenseFallback.mjs";
@@ -43,6 +44,7 @@ var getOverlayContainer = () => {
 /** @flr-generate all */
 var OverlayContent = (props) => {
 	const { children, className, "aria-labelledby": ariaLabelledBy, ...restProps } = props;
+	const isActivityActive = useIsActivityActive();
 	useKeepBrowserExtensionsInteractive(restProps.isOpen ?? false);
 	const Fallback = () => {
 		return /* @__PURE__ */ jsx(DivView, {
@@ -50,6 +52,7 @@ var OverlayContent = (props) => {
 			children: /* @__PURE__ */ jsx(OverlaySuspenseFallback, { ...restProps })
 		});
 	};
+	if (!isActivityActive) return null;
 	return /* @__PURE__ */ jsx(UNSAFE_PortalProvider, {
 		getContainer: getOverlayContainer,
 		children: /* @__PURE__ */ jsx(Aria.ModalOverlay, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"OverlayContent.mjs","names":[],"sources":["../../../../../../../../src/components/Overlay/components/OverlayContent.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport { type FC, type PropsWithChildren, type Ref, Suspense } from \"react\";\nimport { UNSAFE_PortalProvider } from \"react-aria\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { OverlaySuspenseFallback } from \"@/components/Overlay/components/OverlaySuspenseFallback\";\nimport styles from \"../Overlay.module.scss\";\nimport DivView from \"@/views/DivView\";\nimport { useKeepBrowserExtensionsInteractive } from \"@/lib/hooks/dom/useKeepBrowserExtensionsInteractive\";\n\nconst overlayContainerAttribute = \"data-flow-overlays\";\n\n/*\n Render overlays into a dedicated container instead of `document.body`.\n \n React Aria `FocusScope` relies on nearby sibling nodes (sentinels + overlay).\n * Browser extensions (e.g. password managers) inject/reorder `body` children,\n * which can separate those nodes. Then focus scope detection breaks and may\n * cause recursive focus restoration.\n \n Keep the overlay container as the last child of body.\n \n React Aria normally portals overlays directly into body, so they are appended\n * last and render on top.\n \n If we create one persistent container only once, anything appended to body\n * later (toasts, third-party widgets, remounted app root) can render above open\n * overlays. Then overlays can appear behind page content, and the backdrop blur\n * no longer covers the page.\n /\nconst getOverlayContainer = (): HTMLElement \| null => {\n if (typeof document === \"undefined\") {\n return null;\n }\n\n const existingContainer = document.querySelector<HTMLElement>(\n `body > [${overlayContainerAttribute}]`,\n );\n\n if (existingContainer) {\n if (existingContainer !== document.body.lastElementChild) {\n document.body.append(existingContainer);\n }\n return existingContainer;\n }\n\n const container = document.createElement(\"div\");\n container.setAttribute(overlayContainerAttribute, \"\");\n document.body.append(container);\n\n return container;\n};\n\nexport interface OverlayContentProps\n extends\n PropsWithChildren,\n PropsWithClassName,\n Pick<Aria.DialogProps, \"aria-labelledby\"> {\n ref?: Ref<HTMLDivElement>;\n onOpenChange: (isOpen: boolean) => void;\n isDismissable?: boolean;\n isOpen?: boolean;\n}\n\n/* @flr-generate all */\nexport const OverlayContent: FC<OverlayContentProps> = (props) => {\n const {\n children,\n className,\n \"aria-labelledby\": ariaLabelledBy,\n ...restProps\n } = props;\n\n useKeepBrowserExtensionsInteractive(restProps.isOpen ?? false);\n\n const Fallback = () => {\n return (\n <DivView className={styles.suspense}>\n <OverlaySuspenseFallback {...restProps} />\n </DivView>\n );\n };\n\n return (\n <UNSAFE_PortalProvider getContainer={getOverlayContainer}>\n <Aria.ModalOverlay {...restProps} className={className}>\n <DivView>\n <Aria.Modal>\n <Suspense fallback={<Fallback />}>\n <Aria.Dialog aria-labelledby={ariaLabelledBy}>\n {children}\n </Aria.Dialog>\n </Suspense>\n </Aria.Modal>\n </DivView>\n </Aria.ModalOverlay>\n </UNSAFE_PortalProvider>\n );\n};\n\nexport default OverlayContent;\n"],"mappings":"~~;;;;;;;;;;;AASA~~,IAAM,4BAA4B;;;;;;;;;;;;;;;;;;;AAoBlC,IAAM,4BAAgD;CACpD,IAAI,OAAO,aAAa,aACtB,OAAO;CAGT,MAAM,oBAAoB,SAAS,cACjC,WAAW,0BAA0B,EACvC;CAEA,IAAI,mBAAmB;EACrB,IAAI,sBAAsB,SAAS,KAAK,kBACtC,SAAS,KAAK,OAAO,iBAAiB;EAExC,OAAO;CACT;CAEA,MAAM,YAAY,SAAS,cAAc,KAAK;CAC9C,UAAU,aAAa,2BAA2B,EAAE;CACpD,SAAS,KAAK,OAAO,SAAS;CAE9B,OAAO;AACT;;AAcA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,WACA,mBAAmB,gBACnB,GAAG,cACD;CAEJ,oCAAoC,UAAU,UAAU,KAAK;CAE7D,MAAM,iBAAiB;EACrB,OACE,oBAAC,SAAD;GAAS,WAAW,uBAAO;GACzB,UAAA,oBAAC,yBAAD,EAAyB,GAAI,UAAY,CAAA;EAClC,CAAA;CAEb;CAEA,OACE,oBAAC,uBAAD;EAAuB,cAAc;EACnC,UAAA,oBAAC,KAAK,cAAN;GAAmB,GAAI;GAAsB;GAC3C,UAAA,oBAAC,SAAD,EAAA,UACE,oBAAC,KAAK,OAAN,EAAA,UACE,oBAAC,UAAD;IAAU,UAAU,oBAAC,UAAD,CAAW,CAAA;IAC7B,UAAA,oBAAC,KAAK,QAAN;KAAa,mBAAiB;KAC3B;IACU,CAAA;GACL,CAAA,EACA,CAAA,EACL,CAAA;EACQ,CAAA;CACE,CAAA;AAE3B"}
1	+ {"version":3,"file":"OverlayContent.mjs","names":[],"sources":["../../../../../../../../src/components/Overlay/components/OverlayContent.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport { type FC, type PropsWithChildren, type Ref, Suspense } from \"react\";\nimport { UNSAFE_PortalProvider } from \"react-aria\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { OverlaySuspenseFallback } from \"@/components/Overlay/components/OverlaySuspenseFallback\";\nimport styles from \"../Overlay.module.scss\";\nimport DivView from \"@/views/DivView\";\nimport { useKeepBrowserExtensionsInteractive } from \"@/lib/hooks/dom/useKeepBrowserExtensionsInteractive\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\n\nconst overlayContainerAttribute = \"data-flow-overlays\";\n\n/*\n Render overlays into a dedicated container instead of `document.body`.\n \n React Aria `FocusScope` relies on nearby sibling nodes (sentinels + overlay).\n * Browser extensions (e.g. password managers) inject/reorder `body` children,\n * which can separate those nodes. Then focus scope detection breaks and may\n * cause recursive focus restoration.\n \n Keep the overlay container as the last child of body.\n \n React Aria normally portals overlays directly into body, so they are appended\n * last and render on top.\n \n If we create one persistent container only once, anything appended to body\n * later (toasts, third-party widgets, remounted app root) can render above open\n * overlays. Then overlays can appear behind page content, and the backdrop blur\n * no longer covers the page.\n /\nconst getOverlayContainer = (): HTMLElement \| null => {\n if (typeof document === \"undefined\") {\n return null;\n }\n\n const existingContainer = document.querySelector<HTMLElement>(\n `body > [${overlayContainerAttribute}]`,\n );\n\n if (existingContainer) {\n if (existingContainer !== document.body.lastElementChild) {\n document.body.append(existingContainer);\n }\n return existingContainer;\n }\n\n const container = document.createElement(\"div\");\n container.setAttribute(overlayContainerAttribute, \"\");\n document.body.append(container);\n\n return container;\n};\n\nexport interface OverlayContentProps\n extends\n PropsWithChildren,\n PropsWithClassName,\n Pick<Aria.DialogProps, \"aria-labelledby\"> {\n ref?: Ref<HTMLDivElement>;\n onOpenChange: (isOpen: boolean) => void;\n isDismissable?: boolean;\n isOpen?: boolean;\n}\n\n/* @flr-generate all */\nexport const OverlayContent: FC<OverlayContentProps> = (props) => {\n const {\n children,\n className,\n \"aria-labelledby\": ariaLabelledBy,\n ...restProps\n } = props;\n\n const isActivityActive = useIsActivityActive();\n\n useKeepBrowserExtensionsInteractive(restProps.isOpen ?? false);\n\n const Fallback = () => {\n return (\n <DivView className={styles.suspense}>\n <OverlaySuspenseFallback {...restProps} />\n </DivView>\n );\n };\n\n if (!isActivityActive) {\n return null;\n }\n\n return (\n <UNSAFE_PortalProvider getContainer={getOverlayContainer}>\n <Aria.ModalOverlay {...restProps} className={className}>\n <DivView>\n <Aria.Modal>\n <Suspense fallback={<Fallback />}>\n <Aria.Dialog aria-labelledby={ariaLabelledBy}>\n {children}\n </Aria.Dialog>\n </Suspense>\n </Aria.Modal>\n </DivView>\n </Aria.ModalOverlay>\n </UNSAFE_PortalProvider>\n );\n};\n\nexport default OverlayContent;\n"],"mappings":";;;;;;;;;;;;AAUA,IAAM,4BAA4B;;;;;;;;;;;;;;;;;;;AAoBlC,IAAM,4BAAgD;CACpD,IAAI,OAAO,aAAa,aACtB,OAAO;CAGT,MAAM,oBAAoB,SAAS,cACjC,WAAW,0BAA0B,EACvC;CAEA,IAAI,mBAAmB;EACrB,IAAI,sBAAsB,SAAS,KAAK,kBACtC,SAAS,KAAK,OAAO,iBAAiB;EAExC,OAAO;CACT;CAEA,MAAM,YAAY,SAAS,cAAc,KAAK;CAC9C,UAAU,aAAa,2BAA2B,EAAE;CACpD,SAAS,KAAK,OAAO,SAAS;CAE9B,OAAO;AACT;;AAcA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,WACA,mBAAmB,gBACnB,GAAG,cACD;CAEJ,MAAM,mBAAmB,oBAAoB;CAE7C,oCAAoC,UAAU,UAAU,KAAK;CAE7D,MAAM,iBAAiB;EACrB,OACE,oBAAC,SAAD;GAAS,WAAW,uBAAO;GACzB,UAAA,oBAAC,yBAAD,EAAyB,GAAI,UAAY,CAAA;EAClC,CAAA;CAEb;CAEA,IAAI,CAAC,kBACH,OAAO;CAGT,OACE,oBAAC,uBAAD;EAAuB,cAAc;EACnC,UAAA,oBAAC,KAAK,cAAN;GAAmB,GAAI;GAAsB;GAC3C,UAAA,oBAAC,SAAD,EAAA,UACE,oBAAC,KAAK,OAAN,EAAA,UACE,oBAAC,UAAD;IAAU,UAAU,oBAAC,UAAD,CAAW,CAAA;IAC7B,UAAA,oBAAC,KAAK,QAAN;KAAa,mBAAiB;KAC3B;IACU,CAAA;GACL,CAAA,EACA,CAAA,EACL,CAAA;EACQ,CAAA;CACE,CAAA;AAE3B"}

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

@@ -15,11 +15,15 @@ var OverlayTrigger = (props) => {
 	const isOpen = overlayController.useIsOpen();
 	const isContentSuspended = overlayController.useIsContentSuspended();
 	const isPending = useIsPendingWithWait(isContentSuspended);
-	const propsContext = { Button: {
-		onPress: overlayController.open,
-		isPending,
-		isDisabled: Boolean(buttonPropsContext?.isDisabled) || isContentSuspended
-	} };
+	const propsContext = {
+		Button: {
+			onPress: overlayController.open,
+			isPending,
+			isDisabled: Boolean(buttonPropsContext?.isDisabled) || isContentSuspended,
+			tunnel: null
+		},
+		DialogTrigger: { tunnel: null }
+	};
 	return /* @__PURE__ */ jsx(OverlayContextProvider, {
 		type: overlayType,
 		controller: overlayController,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"OverlayTrigger.mjs","names":[],"sources":["../../../../../../../src/components/OverlayTrigger/OverlayTrigger.tsx"],"sourcesContent":["import type { ComponentType, FC, PropsWithChildren, ReactNode } from \"react\";\nimport { OverlayController } from \"@/lib/controller\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useComponentPropsContext } from \"@/lib/propsContext/propsContext\";\nimport type { FlowComponentName } from \"@/components/propTypes\";\nimport OverlayContextProvider from \"@/lib/controller/overlay/OverlayContextProvider\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { useIsPendingWithWait } from \"@/components/Action/hooks/useIsPendingWithWait\";\n\ntype AriaComponentType = ComponentType<{\n isOpen?: boolean;\n children: ReactNode;\n}>;\n\nexport interface OverlayTriggerProps\n extends FlowComponentProps, PropsWithChildren {\n /** Whether the overlay should be open initially. /\n isDefaultOpen?: boolean;\n /* A controller to control the state of the overlay. */\n controller?: OverlayController;\n}\n\ninterface Props extends OverlayTriggerProps {\n overlayType: FlowComponentName;\n component: AriaComponentType;\n}\n\nexport const OverlayTrigger: FC<Props> = (props) => {\n const {\n overlayType,\n isDefaultOpen = false,\n component: AriaOverlayTrigger,\n children,\n controller: controllerFromProps,\n } = props;\n const buttonPropsContext = useComponentPropsContext(\"Button\");\n\n const newOverlayController = OverlayController.useNew({ isDefaultOpen });\n const overlayController = controllerFromProps ?? newOverlayController;\n const isOpen = overlayController.useIsOpen();\n const isContentSuspended = overlayController.useIsContentSuspended();\n const isPending = useIsPendingWithWait(isContentSuspended);\n\n const propsContext: PropsContext = {\n Button: {\n onPress: overlayController.open,\n isPending,\n isDisabled: Boolean(buttonPropsContext?.isDisabled) \|\| isContentSuspended,\n },\n };\n\n return (\n <OverlayContextProvider type={overlayType} controller={overlayController}>\n <PropsContextProvider\n props={propsContext}\n dependencies={[isPending, overlayController]}\n >\n <AriaOverlayTrigger isOpen={isOpen}>{children}</AriaOverlayTrigger>\n </PropsContextProvider>\n </OverlayContextProvider>\n );\n};\n\nexport default OverlayTrigger;\n"],"mappings":";;;;;;;;;AA4BA,IAAa,kBAA6B,UAAU;CAClD,MAAM,EACJ,aACA,gBAAgB,OAChB,WAAW,oBACX,UACA,YAAY,wBACV;CACJ,MAAM,qBAAqB,yBAAyB,QAAQ;CAE5D,MAAM,uBAAuB,kBAAkB,OAAO,EAAE,cAAc,CAAC;CACvE,MAAM,oBAAoB,uBAAuB;CACjD,MAAM,SAAS,kBAAkB,UAAU;CAC3C,MAAM,qBAAqB,kBAAkB,sBAAsB;CACnE,MAAM,YAAY,qBAAqB,kBAAkB;CAEzD,MAAM,eAA6B,EACjC,QAAQ;~~EACN~~,SAAS,kBAAkB;~~EAC3B~~;~~EACA~~,YAAY,QAAQ,oBAAoB,UAAU,KAAK;~~CACzD~~,~~EACF~~;CAEA,OACE,oBAAC,wBAAD;EAAwB,MAAM;EAAa,YAAY;EACrD,UAAA,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc,CAAC,WAAW,iBAAiB;GAE3C,UAAA,oBAAC,oBAAD;IAA4B;IAAS;GAA6B,CAAA;EAC9C,CAAA;CACA,CAAA;AAE5B"}
1	+ {"version":3,"file":"OverlayTrigger.mjs","names":[],"sources":["../../../../../../../src/components/OverlayTrigger/OverlayTrigger.tsx"],"sourcesContent":["import type { ComponentType, FC, PropsWithChildren, ReactNode } from \"react\";\nimport { OverlayController } from \"@/lib/controller\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useComponentPropsContext } from \"@/lib/propsContext/propsContext\";\nimport type { FlowComponentName } from \"@/components/propTypes\";\nimport OverlayContextProvider from \"@/lib/controller/overlay/OverlayContextProvider\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { useIsPendingWithWait } from \"@/components/Action/hooks/useIsPendingWithWait\";\n\ntype AriaComponentType = ComponentType<{\n isOpen?: boolean;\n children: ReactNode;\n}>;\n\nexport interface OverlayTriggerProps\n extends FlowComponentProps, PropsWithChildren {\n /** Whether the overlay should be open initially. /\n isDefaultOpen?: boolean;\n /* A controller to control the state of the overlay. /\n controller?: OverlayController;\n}\n\ninterface Props extends OverlayTriggerProps {\n overlayType: FlowComponentName;\n component: AriaComponentType;\n}\n\nexport const OverlayTrigger: FC<Props> = (props) => {\n const {\n overlayType,\n isDefaultOpen = false,\n component: AriaOverlayTrigger,\n children,\n controller: controllerFromProps,\n } = props;\n const buttonPropsContext = useComponentPropsContext(\"Button\");\n\n const newOverlayController = OverlayController.useNew({ isDefaultOpen });\n const overlayController = controllerFromProps ?? newOverlayController;\n const isOpen = overlayController.useIsOpen();\n const isContentSuspended = overlayController.useIsContentSuspended();\n const isPending = useIsPendingWithWait(isContentSuspended);\n\n const propsContext: PropsContext = {\n Button: {\n onPress: overlayController.open,\n isPending,\n isDisabled: Boolean(buttonPropsContext?.isDisabled) \|\| isContentSuspended,\n /\n * The button is the react-aria trigger. react-aria hands the press\n * handling, the trigger ref and `aria-haspopup`/`aria-expanded`/\n * `aria-controls` down through a `PressResponder`, which only reaches its\n * own subtree — so a surrounding props context must not tunnel the button\n * out of the trigger. Such a context has to tunnel the trigger as a whole\n * instead (`overlayTriggersTunneledTo`).\n /\n tunnel: null,\n },\n /\n * The aria trigger this renders is the host-side identity of every trigger\n * that is not `@flr-generate` (see `overlayTriggersTunneledTo`), so a\n * tunneling props context targets it as well. Here it is already inside the\n * trigger the author wrote — tunneling it again would send the same subtree\n * into the exit twice.\n */\n DialogTrigger: {\n tunnel: null,\n },\n };\n\n return (\n <OverlayContextProvider type={overlayType} controller={overlayController}>\n <PropsContextProvider\n props={propsContext}\n dependencies={[isPending, overlayController]}\n >\n <AriaOverlayTrigger isOpen={isOpen}>{children}</AriaOverlayTrigger>\n </PropsContextProvider>\n </OverlayContextProvider>\n );\n};\n\nexport default OverlayTrigger;\n"],"mappings":";;;;;;;;;AA4BA,IAAa,kBAA6B,UAAU;CAClD,MAAM,EACJ,aACA,gBAAgB,OAChB,WAAW,oBACX,UACA,YAAY,wBACV;CACJ,MAAM,qBAAqB,yBAAyB,QAAQ;CAE5D,MAAM,uBAAuB,kBAAkB,OAAO,EAAE,cAAc,CAAC;CACvE,MAAM,oBAAoB,uBAAuB;CACjD,MAAM,SAAS,kBAAkB,UAAU;CAC3C,MAAM,qBAAqB,kBAAkB,sBAAsB;CACnE,MAAM,YAAY,qBAAqB,kBAAkB;CAEzD,MAAM,eAA6B;EACjC,QAAQ;GACN,SAAS,kBAAkB;GAC3B;GACA,YAAY,QAAQ,oBAAoB,UAAU,KAAK;GASvD,QAAQ;EACV;EAQA,eAAe,EACb,QAAQ,KACV;CACF;CAEA,OACE,oBAAC,wBAAD;EAAwB,MAAM;EAAa,YAAY;EACrD,UAAA,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc,CAAC,WAAW,iBAAiB;GAE3C,UAAA,oBAAC,oBAAD;IAA4B;IAAS;GAA6B,CAAA;EAC9C,CAAA;CACA,CAAA;AAE5B"}

package/dist/js/packages/components/src/components/OverlayTrigger/components/DialogTrigger/DialogTrigger.mjs CHANGED Viewed

@@ -1,12 +1,25 @@
 "use client"
 /* */
+import { PropsContextProvider } from "../../../../lib/propsContext/components/PropsContextProvider.mjs";
+import { flowComponent } from "../../../../lib/componentFactory/flowComponent.mjs";
 import { jsx } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
 //#region src/components/OverlayTrigger/components/DialogTrigger/DialogTrigger.tsx
-/** @flr-generate all */
-var DialogTrigger = (props) => {
-	return /* @__PURE__ */ jsx(Aria.DialogTrigger, { ...props });
-};
+var propsContext = { Button: { tunnel: null } };
+/**
+* @flr-generate all
+* @flr-provider
+*/
+var DialogTrigger = flowComponent("DialogTrigger", (props) => {
+	const { children, ...rest } = props;
+	return /* @__PURE__ */ jsx(Aria.DialogTrigger, {
+		...rest,
+		children: /* @__PURE__ */ jsx(PropsContextProvider, {
+			props: propsContext,
+			children
+		})
+	});
+}, { type: "provider" });
 //#endregion
 export { DialogTrigger, DialogTrigger as default };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DialogTrigger.mjs","names":[],"sources":["../../../../../../../../../src/components/OverlayTrigger/components/DialogTrigger/DialogTrigger.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { ComponentProps, FC } from \"react\";\n\nexport type DialogTriggerProps = ComponentProps<typeof Aria.DialogTrigger~~>;\~~n\n/** @flr-generate all */\nexport const DialogTrigger: FC<DialogTriggerProps> = (props) => {\n return <Aria.DialogTrigger {...props} ~~/>;\~~n};\n\nexport default DialogTrigger;\n"],"mappings":"~~;;;;;;~~AAMA,IAAa,~~iBAAyC~~,UAAU;~~CAC9D~~,~~OAAO~~,oBAAC,KAAK,eAAN,EAAoB,GAAI,~~MAAQ~~,CAAA;~~AACzC~~"}
1	+ {"version":3,"file":"DialogTrigger.mjs","names":[],"sources":["../../../../../../../../../src/components/OverlayTrigger/components/DialogTrigger/DialogTrigger.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { ComponentProps, FC } from \"react\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\n\nexport type DialogTriggerProps = ComponentProps<typeof Aria.DialogTrigger> &\n FlowComponentProps;\n\n/\n `OverlayTrigger` pins the trigger button in the local tree, but its props\n * context does not reach the host: `ModalTrigger`, `PopoverTrigger` and\n * `LightBoxTrigger` are not `@flr-generate`, so a remote tree emits this\n * trigger's view and the host materialises a `DialogTrigger` with no\n * `OverlayTrigger` around it. Pinning the button here is what makes the\n * invariant hold on both sides — see `overlayTriggersTunneledTo`.\n /\nconst propsContext: PropsContext = {\n Button: {\n tunnel: null,\n },\n};\n\n/\n @flr-generate all\n * @flr-provider\n */\nexport const DialogTrigger: FC<DialogTriggerProps> = flowComponent(\n \"DialogTrigger\",\n (props) => {\n const { children, ...rest } = props;\n\n return (\n <Aria.DialogTrigger {...rest}>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </Aria.DialogTrigger>\n );\n },\n { type: \"provider\" },\n);\n\nexport default DialogTrigger;\n"],"mappings":";;;;;;;AAoBA,IAAM,eAA6B,EACjC,QAAQ,EACN,QAAQ,KACV,EACF;;;;;AAMA,IAAa,gBAAwC,cACnD,kBACC,UAAU;CACT,MAAM,EAAE,UAAU,GAAG,SAAS;CAE9B,OACE,oBAAC,KAAK,eAAN;EAAoB,GAAI;EACtB,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACJ,CAAA;AAExB,GACA,EAAE,MAAM,WAAW,CACrB"}

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

@@ -28,7 +28,7 @@ import * as Aria from "react-aria-components";
 //#region src/components/PasswordCreationField/PasswordCreationField.tsx
 /** @flr-generate all */
 var PasswordCreationField = flowComponent("PasswordCreationField", (props) => {
-	const { children, className, ref, isDisabled, onValidationResult, isInvalid: invalidFromProps, validationPolicy: validationPolicyFromProps = defaultPasswordCreationPolicy, isRequired, value, onChange, ...rest } = useControlledHostValueProps(props);
+	const { children, className, ref, isDisabled, onValidationResult, isInvalid: invalidFromProps, validationPolicy: validationPolicyFromProps = defaultPasswordCreationPolicy, isRequired, value, onChange, ...rest } = useControlledHostValueProps(props, "");
 	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "PasswordCreationField");
 	const translate = useLocalizedStringFormatter(__locale_default, "PasswordCreationField");
 	const validationPolicy = useMemo(() => Policy.fromDeclaration(validationPolicyFromProps), [validationPolicyFromProps]);