@cube-dev/ui-kit 0.182.0 → 0.184.0

package/dist/components/overlays/AlertDialog/AlertDialogZone.js

@@ -1,7 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { Portal } from "../../portal/Portal.js";
 import { DialogContainer } from "../Dialog/DialogContainer.js";
 import { _AlertDialog } from "./AlertDialog.js";
+import { c } from "react-compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/overlays/AlertDialog/AlertDialogZone.tsx
@@ -10,52 +11,158 @@ const PORTAL_KEY = "AlertDialogZone";
 * @internal Do not use it
 */
 function AlertDialogZone(props) {
+	const $ = c(40);
 	const { openedDialog } = props;
-	if (openedDialog === null) return /* @__PURE__ */ jsx(Portal, {}, PORTAL_KEY);
-	const { type, isDismissable = true, actions, onDismiss, content, ...options } = openedDialog.props;
+	if (openedDialog === null) {
+		let t0;
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+			t0 = /* @__PURE__ */ jsx(Portal, {}, PORTAL_KEY);
+			$[0] = t0;
+		} else t0 = $[0];
+		return t0;
+	}
+	let actions;
+	let content;
+	let onDismiss;
+	let options;
+	let t0;
+	let type;
+	if ($[1] !== openedDialog.props) {
+		({type, isDismissable: t0, actions, onDismiss, content, ...options} = openedDialog.props);
+		$[1] = openedDialog.props;
+		$[2] = actions;
+		$[3] = content;
+		$[4] = onDismiss;
+		$[5] = options;
+		$[6] = t0;
+		$[7] = type;
+	} else {
+		actions = $[2];
+		content = $[3];
+		onDismiss = $[4];
+		options = $[5];
+		t0 = $[6];
+		type = $[7];
+	}
+	const isDismissable = t0 === void 0 ? true : t0;
 	const { resolve, reject, isVisible, dialogType } = openedDialog.meta;
-	const _actions = (() => {
-		const mergeActionProps = (action, status) => {
-			if (typeof action === "undefined") return;
-			if (typeof action === "boolean") return action ? { onPress: () => resolve(status) } : false;
-			const onPress = action.onPress;
-			return {
-				...action,
-				onPress: (e) => {
-					onPress?.(e);
-					resolve(status);
-				}
+	let t1;
+	bb0: {
+		let t2;
+		if ($[8] !== resolve) {
+			t2 = (action, status) => {
+				if (typeof action === "undefined") return;
+				if (typeof action === "boolean") return action ? { onPress: () => resolve(status) } : false;
+				const onPress = action.onPress;
+				return {
+					...action,
+					onPress: (e) => {
+						onPress?.(e);
+						resolve(status);
+					}
+				};
 			};
-		};
-		if (typeof actions === "undefined") return {};
-		return {
-			confirm: mergeActionProps(actions.confirm, "confirm"),
-			secondary: mergeActionProps(actions.secondary, "secondary"),
-			cancel: typeof actions.cancel === "undefined" ? void 0 : typeof actions.cancel === "boolean" ? actions.cancel ? { onPress: () => reject(void 0) } : false : {
+			$[8] = resolve;
+			$[9] = t2;
+		} else t2 = $[9];
+		const mergeActionProps = t2;
+		if (typeof actions === "undefined") {
+			let t3;
+			if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+				t3 = {};
+				$[10] = t3;
+			} else t3 = $[10];
+			t1 = t3;
+			break bb0;
+		}
+		let t3;
+		if ($[11] !== actions.confirm || $[12] !== mergeActionProps) {
+			t3 = mergeActionProps(actions.confirm, "confirm");
+			$[11] = actions.confirm;
+			$[12] = mergeActionProps;
+			$[13] = t3;
+		} else t3 = $[13];
+		let t4;
+		if ($[14] !== actions.secondary || $[15] !== mergeActionProps) {
+			t4 = mergeActionProps(actions.secondary, "secondary");
+			$[14] = actions.secondary;
+			$[15] = mergeActionProps;
+			$[16] = t4;
+		} else t4 = $[16];
+		let t5;
+		if ($[17] !== actions.cancel || $[18] !== reject) {
+			t5 = typeof actions.cancel === "undefined" ? void 0 : typeof actions.cancel === "boolean" ? actions.cancel ? { onPress: () => reject(void 0) } : false : {
 				...actions.cancel,
-				onPress: (e) => {
-					actions.cancel.onPress?.(e);
+				onPress: (e_0) => {
+					actions.cancel.onPress?.(e_0);
 					reject(void 0);
 				}
-			}
-		};
-	})();
-	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DialogContainer, {
-		isOpen: isVisible,
-		isDismissable,
-		type,
-		onDismiss,
-		children: /* @__PURE__ */ jsx(_AlertDialog, {
-			noActions: dialogType === "form",
+			};
+			$[17] = actions.cancel;
+			$[18] = reject;
+			$[19] = t5;
+		} else t5 = $[19];
+		let t6;
+		if ($[20] !== t3 || $[21] !== t4 || $[22] !== t5) {
+			t6 = {
+				confirm: t3,
+				secondary: t4,
+				cancel: t5
+			};
+			$[20] = t3;
+			$[21] = t4;
+			$[22] = t5;
+			$[23] = t6;
+		} else t6 = $[23];
+		t1 = t6;
+	}
+	const _actions = t1;
+	const t2 = dialogType === "form";
+	const t3 = !isVisible;
+	let t4;
+	if ($[24] !== content || $[25] !== reject || $[26] !== resolve) {
+		t4 = typeof content === "function" ? content({
+			resolve,
+			reject
+		}) : content;
+		$[24] = content;
+		$[25] = reject;
+		$[26] = resolve;
+		$[27] = t4;
+	} else t4 = $[27];
+	let t5;
+	if ($[28] !== _actions || $[29] !== options || $[30] !== t2 || $[31] !== t3 || $[32] !== t4) {
+		t5 = /* @__PURE__ */ jsx(_AlertDialog, {
+			noActions: t2,
 			actions: _actions,
-			isHidden: !isVisible,
-			content: typeof content === "function" ? content({
-				resolve,
-				reject
-			}) : content,
+			isHidden: t3,
+			content: t4,
 			...options
-		})
-	}) }, PORTAL_KEY);
+		});
+		$[28] = _actions;
+		$[29] = options;
+		$[30] = t2;
+		$[31] = t3;
+		$[32] = t4;
+		$[33] = t5;
+	} else t5 = $[33];
+	let t6;
+	if ($[34] !== isDismissable || $[35] !== isVisible || $[36] !== onDismiss || $[37] !== t5 || $[38] !== type) {
+		t6 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DialogContainer, {
+			isOpen: isVisible,
+			isDismissable,
+			type,
+			onDismiss,
+			children: t5
+		}) }, PORTAL_KEY);
+		$[34] = isDismissable;
+		$[35] = isVisible;
+		$[36] = onDismiss;
+		$[37] = t5;
+		$[38] = type;
+		$[39] = t6;
+	} else t6 = $[39];
+	return t6;
 }
 
 //#endregion

package/dist/components/overlays/AlertDialog/AlertDialogZone.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialogZone.js","names":["AlertDialog"],"sources":["../../../../src/components/overlays/AlertDialog/AlertDialogZone.tsx"],"sourcesContent":["import { Portal } from '../../portal';\nimport { DialogContainer } from '../Dialog/DialogContainer';\n\nimport { AlertDialog, CubeAlertDialogActionsProps } from './AlertDialog';\nimport { AlertDialogResolveStatus, Dialog } from './types';\n\nimport type { CubeButtonProps } from '../../actions/Button/Button';\n\nexport interface DialogZoneProps {\n  openedDialog: Dialog | null;\n}\n\nconst PORTAL_KEY = 'AlertDialogZone';\n\n/**\n * @internal Do not use it\n */\nexport function AlertDialogZone(props: DialogZoneProps) {\n  const { openedDialog } = props;\n\n  if (openedDialog === null) return <Portal key={PORTAL_KEY} />;\n\n  const {\n    type,\n    isDismissable = true,\n    actions,\n    onDismiss,\n    content,\n    ...options\n  } = openedDialog.props;\n  const { resolve, reject, isVisible, dialogType } = openedDialog.meta;\n\n  const _actions: CubeAlertDialogActionsProps = (() => {\n    const mergeActionProps = <\n      T extends\n        | CubeAlertDialogActionsProps['confirm']\n        | CubeAlertDialogActionsProps['secondary'],\n    >(\n      action: T,\n      status: AlertDialogResolveStatus,\n    ): T => {\n      if (typeof action === 'undefined') {\n        return undefined as unknown as T;\n      }\n\n      if (typeof action === 'boolean') {\n        return (action\n          ? { onPress: () => resolve(status) }\n          : false) as unknown as T;\n      }\n\n      const onPress = action.onPress;\n\n      return {\n        ...(action as CubeButtonProps),\n        onPress: (e) => {\n          onPress?.(e);\n          resolve(status);\n        },\n      } as unknown as T;\n    };\n\n    if (typeof actions === 'undefined') return {};\n\n    return {\n      confirm: mergeActionProps(actions.confirm, 'confirm'),\n      secondary: mergeActionProps(actions.secondary, 'secondary'),\n      cancel:\n        typeof actions.cancel === 'undefined'\n          ? undefined\n          : typeof actions.cancel === 'boolean'\n            ? actions.cancel\n              ? { onPress: () => reject(undefined) }\n              : false\n            : {\n                ...(actions.cancel as CubeButtonProps),\n                onPress: (e) => {\n                  (actions.cancel as CubeButtonProps).onPress?.(e);\n                  reject(undefined);\n                },\n              },\n    };\n  })();\n\n  return (\n    <Portal key={PORTAL_KEY}>\n      <DialogContainer\n        isOpen={isVisible}\n        isDismissable={isDismissable}\n        type={type}\n        onDismiss={onDismiss}\n      >\n        <AlertDialog\n          noActions={dialogType === 'form'}\n          actions={_actions}\n          isHidden={!isVisible}\n          content={\n            typeof content === 'function'\n              ? content({ resolve, reject })\n              : content\n          }\n          {...options}\n        />\n      </DialogContainer>\n    </Portal>\n  );\n}\n"],"mappings":";;;;;;;AAYA,MAAM,aAAa;;;;AAKnB,SAAgB,gBAAgB,OAAwB;CACtD,MAAM,EAAE,iBAAiB;AAEzB,KAAI,iBAAiB,KAAM,QAAO,oBAAC,YAAY,WAAc;CAE7D,MAAM,EACJ,MACA,gBAAgB,MAChB,SACA,WACA,SACA,GAAG,YACD,aAAa;CACjB,MAAM,EAAE,SAAS,QAAQ,WAAW,eAAe,aAAa;CAEhE,MAAM,kBAA+C;EACnD,MAAM,oBAKJ,QACA,WACM;AACN,OAAI,OAAO,WAAW,YACpB;AAGF,OAAI,OAAO,WAAW,UACpB,QAAQ,SACJ,EAAE,eAAe,QAAQ,OAAO,EAAE,GAClC;GAGN,MAAM,UAAU,OAAO;AAEvB,UAAO;IACL,GAAI;IACJ,UAAU,MAAM;AACd,eAAU,EAAE;AACZ,aAAQ,OAAO;;IAElB;;AAGH,MAAI,OAAO,YAAY,YAAa,QAAO,EAAE;AAE7C,SAAO;GACL,SAAS,iBAAiB,QAAQ,SAAS,UAAU;GACrD,WAAW,iBAAiB,QAAQ,WAAW,YAAY;GAC3D,QACE,OAAO,QAAQ,WAAW,cACtB,SACA,OAAO,QAAQ,WAAW,YACxB,QAAQ,SACN,EAAE,eAAe,OAAO,OAAU,EAAE,GACpC,QACF;IACE,GAAI,QAAQ;IACZ,UAAU,MAAM;AACd,KAAC,QAAQ,OAA2B,UAAU,EAAE;AAChD,YAAO,OAAU;;IAEpB;GACV;KACC;AAEJ,QACE,oBAAC,oBACC,oBAAC;EACC,QAAQ;EACO;EACT;EACK;YAEX,oBAACA;GACC,WAAW,eAAe;GAC1B,SAAS;GACT,UAAU,CAAC;GACX,SACE,OAAO,YAAY,aACf,QAAQ;IAAE;IAAS;IAAQ,CAAC,GAC5B;GAEN,GAAI;IACJ;GACc,IAlBP,WAmBJ"}
+{"version":3,"file":"AlertDialogZone.js","names":["Portal","DialogContainer","AlertDialog","CubeAlertDialogActionsProps","AlertDialogResolveStatus","Dialog","CubeButtonProps","DialogZoneProps","openedDialog","PORTAL_KEY","AlertDialogZone","props","$","_c","t0","Symbol","for","actions","content","onDismiss","options","type","isDismissable","undefined","resolve","reject","isVisible","dialogType","meta","t1","bb0","t2","action","status","T","onPress","e","mergeActionProps","t3","confirm","t4","secondary","t5","cancel","e_0","t6","_actions"],"sources":["../../../../src/components/overlays/AlertDialog/AlertDialogZone.tsx"],"sourcesContent":["import { Portal } from '../../portal';\nimport { DialogContainer } from '../Dialog/DialogContainer';\n\nimport { AlertDialog, CubeAlertDialogActionsProps } from './AlertDialog';\nimport { AlertDialogResolveStatus, Dialog } from './types';\n\nimport type { CubeButtonProps } from '../../actions/Button/Button';\n\nexport interface DialogZoneProps {\n  openedDialog: Dialog | null;\n}\n\nconst PORTAL_KEY = 'AlertDialogZone';\n\n/**\n * @internal Do not use it\n */\nexport function AlertDialogZone(props: DialogZoneProps) {\n  const { openedDialog } = props;\n\n  if (openedDialog === null) return <Portal key={PORTAL_KEY} />;\n\n  const {\n    type,\n    isDismissable = true,\n    actions,\n    onDismiss,\n    content,\n    ...options\n  } = openedDialog.props;\n  const { resolve, reject, isVisible, dialogType } = openedDialog.meta;\n\n  const _actions: CubeAlertDialogActionsProps = (() => {\n    const mergeActionProps = <\n      T extends\n        | CubeAlertDialogActionsProps['confirm']\n        | CubeAlertDialogActionsProps['secondary'],\n    >(\n      action: T,\n      status: AlertDialogResolveStatus,\n    ): T => {\n      if (typeof action === 'undefined') {\n        return undefined as unknown as T;\n      }\n\n      if (typeof action === 'boolean') {\n        return (action\n          ? { onPress: () => resolve(status) }\n          : false) as unknown as T;\n      }\n\n      const onPress = action.onPress;\n\n      return {\n        ...(action as CubeButtonProps),\n        onPress: (e) => {\n          onPress?.(e);\n          resolve(status);\n        },\n      } as unknown as T;\n    };\n\n    if (typeof actions === 'undefined') return {};\n\n    return {\n      confirm: mergeActionProps(actions.confirm, 'confirm'),\n      secondary: mergeActionProps(actions.secondary, 'secondary'),\n      cancel:\n        typeof actions.cancel === 'undefined'\n          ? undefined\n          : typeof actions.cancel === 'boolean'\n            ? actions.cancel\n              ? { onPress: () => reject(undefined) }\n              : false\n            : {\n                ...(actions.cancel as CubeButtonProps),\n                onPress: (e) => {\n                  (actions.cancel as CubeButtonProps).onPress?.(e);\n                  reject(undefined);\n                },\n              },\n    };\n  })();\n\n  return (\n    <Portal key={PORTAL_KEY}>\n      <DialogContainer\n        isOpen={isVisible}\n        isDismissable={isDismissable}\n        type={type}\n        onDismiss={onDismiss}\n      >\n        <AlertDialog\n          noActions={dialogType === 'form'}\n          actions={_actions}\n          isHidden={!isVisible}\n          content={\n            typeof content === 'function'\n              ? content({ resolve, reject })\n              : content\n          }\n          {...options}\n        />\n      </DialogContainer>\n    </Portal>\n  );\n}\n"],"mappings":"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"}

package/dist/components/overlays/Dialog/Dialog.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { SlotProvider } from "../../../utils/react/Slots.js";
@@ -7,8 +7,10 @@ import { useOpenTransitionContext } from "../Modal/OpenTransitionContext.js";
 import { _ItemButton } from "../../actions/ItemButton/ItemButton.js";
 import { useDialogContext } from "./context.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
+import { useContentOverflow } from "./use-content-overflow.js";
+import { c } from "react-compiler-runtime";
 import { BASE_STYLES, BLOCK_STYLES, DIMENSION_STYLES, FLOW_STYLES, tasty } from "@tenphi/tasty";
-import { forwardRef, useEffect, useMemo } from "react";
+import { forwardRef, useEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { DismissButton, FocusScope, useDialog } from "react-aria";
 import { createFocusManager } from "@react-aria/focus";
@@ -110,20 +112,35 @@ const sizePxMap = {
 * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.
 */
 const Dialog = forwardRef(function Dialog(props, ref) {
+	const $ = c(7);
 	const isEntered = useOpenTransitionContext()?.transitionState === "entered";
 	const context = useDialogContext();
-	const content = useMemo(() => {
-		return /* @__PURE__ */ jsx(DialogContent, {
+	let t0;
+	if ($[0] !== props || $[1] !== ref) {
+		t0 = /* @__PURE__ */ jsx(DialogContent, {
 			...props,
 			ref
 		}, "content");
-	}, [props, ref]);
+		$[0] = props;
+		$[1] = ref;
+		$[2] = t0;
+	} else t0 = $[2];
+	const content = t0;
 	const shouldContainFocus = isEntered && !!context.isOpen && context.type !== "panel";
-	return /* @__PURE__ */ jsx(FocusScope, {
-		restoreFocus: context.shouldRestoreFocus ?? true,
-		contain: shouldContainFocus,
-		children: content
-	});
+	const t1 = context.shouldRestoreFocus ?? true;
+	let t2;
+	if ($[3] !== content || $[4] !== shouldContainFocus || $[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx(FocusScope, {
+			restoreFocus: t1,
+			contain: shouldContainFocus,
+			children: content
+		});
+		$[3] = content;
+		$[4] = shouldContainFocus;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
 });
 const DialogContent = forwardRef(function DialogContent(props, ref) {
 	let { type = "modal", ...contextProps } = useDialogContext();
@@ -151,6 +168,7 @@ const DialogContent = forwardRef(function DialogContent(props, ref) {
 			}
 		});
 	}, [contextProps.isOpen]);
+	const contentOverflows = useContentOverflow(domRef);
 	let slots = {
 		title: {
 			level: 2,
@@ -178,14 +196,21 @@ const DialogContent = forwardRef(function DialogContent(props, ref) {
 				border: "bottom"
 			}
 		},
-		footer: { styles: {
-			display: "flex",
-			gap: "1x",
-			flow: "row-reverse",
-			placeItems: "baseline stretch",
-			placeContent: "space-between",
-			padding: "$dialog-footer-v $dialog-padding-h"
-		} },
+		footer: {
+			mods: { "content-overflow": contentOverflows },
+			styles: {
+				display: "flex",
+				gap: "1x",
+				flow: "row-reverse",
+				placeItems: "baseline stretch",
+				placeContent: "space-between",
+				padding: "$dialog-footer-v $dialog-padding-h",
+				border: {
+					"": false,
+					"content-overflow": "top"
+				}
+			}
+		},
 		buttonGroup: { styles: { flow: "row-reverse" } }
 	};
 	return /* @__PURE__ */ jsxs(DialogElement, {

package/dist/components/overlays/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":["ItemButton","mergeProps"],"sources":["../../../../src/components/overlays/Dialog/Dialog.tsx"],"sourcesContent":["import { createFocusManager } from '@react-aria/focus';\nimport { useObjectRef } from '@react-aria/utils';\nimport {\n  BASE_STYLES,\n  BaseProps,\n  BaseStyleProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  DIMENSION_STYLES,\n  DimensionStyleProps,\n  FLOW_STYLES,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, ReactElement, Ref, useEffect, useMemo } from 'react';\nimport {\n  AriaDialogProps,\n  DismissButton,\n  FocusScope,\n  useDialog,\n} from 'react-aria';\n\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon } from '../../../icons/CloseIcon';\nimport { mergeProps, SlotProvider } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemButton } from '../../actions/ItemButton/ItemButton';\nimport { useOpenTransitionContext } from '../Modal/OpenTransitionContext';\n\nimport { useDialogContext } from './context';\n\nconst STYLES_LIST = [\n  ...BASE_STYLES,\n  ...DIMENSION_STYLES,\n  ...BLOCK_STYLES,\n  ...FLOW_STYLES,\n];\n\nconst DialogElement = tasty({\n  as: 'section',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    fill: '#surface',\n    pointerEvents: 'auto',\n    outline: 0,\n    position: {\n      '': 'relative',\n      'type=panel': 'absolute',\n    },\n    width: {\n      '': '$min-dialog-size $dialog-size (100dvw - 8x)',\n      'type=fullscreen': '(100dvw - 8x) (100dvw - 8x)',\n      'type=fullscreenTakeover': '100dvw 100dvw',\n      'type=panel': 'auto',\n    },\n    height: {\n      '': 'auto (100dvh - 8x)',\n      'type=fullscreen': '(100dvh - 8x) (100dvh - 8x)',\n      'type=fullscreenTakeover | type=panel': '100dvh 100dvh',\n      'type=popover': 'initial initial (50dvh - 5x)',\n    },\n    gap: 0,\n    border: {\n      '': false,\n      'type=popover': true,\n    },\n    radius: {\n      '': '1cr',\n      'type=tray': '1cr top',\n      'type=fullscreenTakeover': '0r',\n    },\n    shadow: {\n      '': '$dialog-shadow',\n      'type=popover | type=panel': '$shadow',\n    },\n    top: {\n      '': false,\n      'type=modal': '((50vh - 50%) / -3)',\n      'type=panel': 'auto',\n    },\n    '$dialog-title-padding-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-content-padding-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-padding-h': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-footer-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-content-gap': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n  },\n});\n\nconst CloseButton = tasty(ItemButton, {\n  qa: 'ModalCloseButton',\n  type: 'clear',\n  styles: {\n    position: 'absolute',\n    top: '1x',\n    right: '1x',\n  },\n});\n\nconst sizeMap = {\n  S: 'small',\n  M: 'medium',\n  L: 'large',\n};\nconst sizePxMap = {\n  small: 360,\n  medium: 479,\n  large: 798,\n};\n\nexport interface CubeDialogProps\n  extends Omit<BaseProps, 'role'>,\n    AriaDialogProps,\n    BaseStyleProps,\n    BlockStyleProps,\n    DimensionStyleProps {\n  /** The size of the dialog */\n  size?: 'S' | 'M' | 'L' | 'small' | 'medium' | 'large';\n  /** Whether the dialog is dismissable */\n  isDismissable?: boolean;\n  /** Trigger when the dialog is dismissed */\n  onDismiss?: (arg?: any) => void;\n  /** That you can replace the close icon with */\n  closeIcon?: ReactElement;\n  closeButtonStyles?: Styles;\n  role?: 'dialog' | 'alertdialog';\n}\n\n/**\n * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.\n * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.\n */\nexport const Dialog = forwardRef(function Dialog(\n  props: CubeDialogProps,\n  ref: Ref<HTMLDivElement>,\n) {\n  const transitionContext = useOpenTransitionContext();\n\n  const isEntered = transitionContext?.transitionState === 'entered';\n\n  const context = useDialogContext();\n\n  const content = useMemo(() => {\n    return <DialogContent key=\"content\" {...props} ref={ref} />;\n  }, [props, ref]);\n\n  const shouldContainFocus =\n    isEntered && !!context.isOpen && context.type !== 'panel';\n\n  return (\n    // This component traps the focus inside the dialog and restores it on\n    // close. The restore is the one that matters for popover-type dialogs —\n    // `DialogTrigger`'s own restore is a no-op there — so `shouldRestoreFocus`\n    // has to reach it. Containment is unaffected either way.\n    <FocusScope\n      restoreFocus={context.shouldRestoreFocus ?? true}\n      contain={shouldContainFocus}\n    >\n      {content}\n    </FocusScope>\n  );\n});\n\nconst DialogContent = forwardRef(function DialogContent(\n  props: CubeDialogProps,\n  ref: Ref<HTMLDivElement>,\n) {\n  let { type = 'modal', ...contextProps } = useDialogContext();\n\n  let {\n    qa,\n    children,\n    size = 'M',\n    isDismissable = contextProps.isDismissable,\n    onDismiss = contextProps.onClose,\n    closeIcon,\n    closeButtonStyles,\n    style,\n    ...otherProps\n  } = props;\n\n  size = sizeMap[size.toUpperCase()] || size;\n\n  const styles: Styles = extractStyles(otherProps, STYLES_LIST);\n\n  const { t } = useI18n();\n\n  let domRef = useObjectRef(ref);\n  let { dialogProps, titleProps } = useDialog(\n    mergeProps(contextProps, props),\n    domRef,\n  );\n\n  // If rendered in a popover or tray there won't be a visible dismiss button,\n  // so we render a hidden one for screen readers.\n  let dismissButton;\n  if (type === 'popover' || type === 'tray') {\n    dismissButton = <DismissButton onDismiss={onDismiss} />;\n  }\n\n  // Focus the first focusable element in the dialog when it opens.\n  //\n  // We also re-run the priority focus logic when the dialog <section>\n  // itself is the active element. This recovers from a race that occurs\n  // when a popover-based component (FilterPicker, Picker, Select, …) opens\n  // inside another contained Dialog: React's native `autoFocus` on the\n  // inner control fires during the mutation phase, before the popover's\n  // FocusScope registers in react-aria's focus-scope tree, so the outer\n  // FocusScope yanks focus back. useDialog then defaults focus to the\n  // dialog <section>; without re-promoting it here, the priority element\n  // (e.g. the search input) is never focused.\n  useEffect(() => {\n    if (contextProps.isOpen) {\n      setTimeout(() => {\n        if (!domRef.current) return;\n\n        const activeElement = document.activeElement;\n        const isFocusOutsideDialog = !domRef.current.contains(activeElement);\n        const isFocusOnDialogShell = activeElement === domRef.current;\n\n        // Priority 1: autofocus input or primary button\n        const priorityElement = domRef.current.querySelector(\n          'input[data-autofocus], button[type=\"submit\"], button[data-type=\"primary\"]',\n        ) as HTMLElement | null;\n\n        if (priorityElement && (isFocusOutsideDialog || isFocusOnDialogShell)) {\n          priorityElement.focus();\n          return;\n        }\n\n        if (isFocusOutsideDialog) {\n          // Fallback: focus first tabbable element, or dialog itself\n          const focusManager = createFocusManager(domRef);\n\n          if (!focusManager.focusFirst({ tabbable: true })) {\n            domRef.current.focus();\n          }\n        }\n      });\n    }\n  }, [contextProps.isOpen]);\n\n  // let hasHeader = useHasChild('[data-id=\"Header\"]', domRef);\n  // let hasFooter = useHasChild('[data-id=\"Footer\"]', domRef);\n\n  let slots = {\n    title: {\n      level: 2,\n      preset: 'h4',\n      ...titleProps,\n    },\n    content: {\n      styles: {\n        flexGrow: 1,\n        padding: '$dialog-content-padding-v $dialog-padding-h',\n        gap: '$dialog-content-gap',\n        height: {\n          '': 'max (100% - (2 * $dialog-content-padding-v))',\n          ':last-child': 'max (100% - $dialog-content-padding-v)',\n        },\n      },\n    },\n    header: {\n      ellipsis: true,\n      styles: {\n        display: 'flex',\n        flow: 'row',\n        gap: '1x',\n        placeItems: 'center stretch',\n        placeContent: 'space-between',\n        padding: `$dialog-title-padding-v ${\n          isDismissable ? '($dialog-padding-h + 4x)' : '$dialog-padding-h'\n        } $dialog-title-padding-v $dialog-padding-h`,\n        border: 'bottom',\n      },\n    },\n    footer: {\n      styles: {\n        display: 'flex',\n        gap: '1x',\n        flow: 'row-reverse',\n        placeItems: 'baseline stretch',\n        placeContent: 'space-between',\n        padding: '$dialog-footer-v $dialog-padding-h',\n      },\n    },\n    buttonGroup: {\n      styles: {\n        flow: 'row-reverse',\n      },\n    },\n  };\n\n  return (\n    <DialogElement\n      ref={domRef}\n      data-id=\"Dialog\"\n      data-qa={qa || 'Dialog'}\n      styles={styles}\n      as=\"section\"\n      {...dialogProps}\n      mods={{ dismissable: isDismissable }}\n      style={{\n        '--dialog-size': `${sizePxMap[size] || sizePxMap.small}px`,\n        ...style,\n      }}\n      data-type={type}\n      data-size={size}\n    >\n      {dismissButton}\n\n      <SlotProvider slots={slots}>\n        {isDismissable && (\n          <CloseButton\n            icon={closeIcon || <CloseIcon size={20} />}\n            label={t('dialog.dismiss', 'Dismiss')}\n            onPress={() => onDismiss && onDismiss()}\n          />\n        )}\n        {children}\n      </SlotProvider>\n    </DialogElement>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","names":["createFocusManager","useObjectRef","BASE_STYLES","BaseProps","BaseStyleProps","BLOCK_STYLES","BlockStyleProps","DIMENSION_STYLES","DimensionStyleProps","FLOW_STYLES","Styles","tasty","forwardRef","ReactElement","Ref","useEffect","useMemo","AriaDialogProps","DismissButton","FocusScope","useDialog","useI18n","CloseIcon","mergeProps","SlotProvider","extractStyles","ItemButton","useOpenTransitionContext","useDialogContext","useContentOverflow","STYLES_LIST","DialogElement","as","styles","display","flow","fill","pointerEvents","outline","position","width","height","gap","border","radius","shadow","top","CloseButton","qa","type","right","sizeMap","S","M","L","sizePxMap","small","medium","large","CubeDialogProps","Omit","size","isDismissable","onDismiss","arg","closeIcon","closeButtonStyles","role","Dialog","props","ref","$","_c","transitionContext","isEntered","transitionState","context","t0","content","shouldContainFocus","isOpen","t1","shouldRestoreFocus","t2","DialogContent","HTMLDivElement","contextProps","children","onClose","style","otherProps","toUpperCase","t","domRef","dialogProps","titleProps","dismissButton","setTimeout","current","activeElement","document","isFocusOutsideDialog","contains","isFocusOnDialogShell","priorityElement","querySelector","HTMLElement","focus","focusManager","focusFirst","tabbable","contentOverflows","slots","title","level","preset","flexGrow","padding","header","ellipsis","placeItems","placeContent","footer","mods","buttonGroup","dismissable"],"sources":["../../../../src/components/overlays/Dialog/Dialog.tsx"],"sourcesContent":["import { createFocusManager } from '@react-aria/focus';\nimport { useObjectRef } from '@react-aria/utils';\nimport {\n  BASE_STYLES,\n  BaseProps,\n  BaseStyleProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  DIMENSION_STYLES,\n  DimensionStyleProps,\n  FLOW_STYLES,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, ReactElement, Ref, useEffect, useMemo } from 'react';\nimport {\n  AriaDialogProps,\n  DismissButton,\n  FocusScope,\n  useDialog,\n} from 'react-aria';\n\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon } from '../../../icons/CloseIcon';\nimport { mergeProps, SlotProvider } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemButton } from '../../actions/ItemButton/ItemButton';\nimport { useOpenTransitionContext } from '../Modal/OpenTransitionContext';\n\nimport { useDialogContext } from './context';\nimport { useContentOverflow } from './use-content-overflow';\n\nconst STYLES_LIST = [\n  ...BASE_STYLES,\n  ...DIMENSION_STYLES,\n  ...BLOCK_STYLES,\n  ...FLOW_STYLES,\n];\n\nconst DialogElement = tasty({\n  as: 'section',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    fill: '#surface',\n    pointerEvents: 'auto',\n    outline: 0,\n    position: {\n      '': 'relative',\n      'type=panel': 'absolute',\n    },\n    width: {\n      '': '$min-dialog-size $dialog-size (100dvw - 8x)',\n      'type=fullscreen': '(100dvw - 8x) (100dvw - 8x)',\n      'type=fullscreenTakeover': '100dvw 100dvw',\n      'type=panel': 'auto',\n    },\n    height: {\n      '': 'auto (100dvh - 8x)',\n      'type=fullscreen': '(100dvh - 8x) (100dvh - 8x)',\n      'type=fullscreenTakeover | type=panel': '100dvh 100dvh',\n      'type=popover': 'initial initial (50dvh - 5x)',\n    },\n    gap: 0,\n    border: {\n      '': false,\n      'type=popover': true,\n    },\n    radius: {\n      '': '1cr',\n      'type=tray': '1cr top',\n      'type=fullscreenTakeover': '0r',\n    },\n    shadow: {\n      '': '$dialog-shadow',\n      'type=popover | type=panel': '$shadow',\n    },\n    top: {\n      '': false,\n      'type=modal': '((50vh - 50%) / -3)',\n      'type=panel': 'auto',\n    },\n    '$dialog-title-padding-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-content-padding-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-padding-h': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-footer-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-content-gap': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n\n    // A `Form` placed directly here (`Dialog > Form > Content + Footer`) lays\n    // itself out as this flex column — see `FormElement`. It is the form's own\n    // state rather than a rule here, so the form's `styles` still win.\n  },\n});\n\nconst CloseButton = tasty(ItemButton, {\n  qa: 'ModalCloseButton',\n  type: 'clear',\n  styles: {\n    position: 'absolute',\n    top: '1x',\n    right: '1x',\n  },\n});\n\nconst sizeMap = {\n  S: 'small',\n  M: 'medium',\n  L: 'large',\n};\nconst sizePxMap = {\n  small: 360,\n  medium: 479,\n  large: 798,\n};\n\nexport interface CubeDialogProps\n  extends Omit<BaseProps, 'role'>,\n    AriaDialogProps,\n    BaseStyleProps,\n    BlockStyleProps,\n    DimensionStyleProps {\n  /** The size of the dialog */\n  size?: 'S' | 'M' | 'L' | 'small' | 'medium' | 'large';\n  /** Whether the dialog is dismissable */\n  isDismissable?: boolean;\n  /** Trigger when the dialog is dismissed */\n  onDismiss?: (arg?: any) => void;\n  /** That you can replace the close icon with */\n  closeIcon?: ReactElement;\n  closeButtonStyles?: Styles;\n  role?: 'dialog' | 'alertdialog';\n}\n\n/**\n * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.\n * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.\n */\nexport const Dialog = forwardRef(function Dialog(\n  props: CubeDialogProps,\n  ref: Ref<HTMLDivElement>,\n) {\n  const transitionContext = useOpenTransitionContext();\n\n  const isEntered = transitionContext?.transitionState === 'entered';\n\n  const context = useDialogContext();\n\n  const content = useMemo(() => {\n    return <DialogContent key=\"content\" {...props} ref={ref} />;\n  }, [props, ref]);\n\n  const shouldContainFocus =\n    isEntered && !!context.isOpen && context.type !== 'panel';\n\n  return (\n    // This component traps the focus inside the dialog and restores it on\n    // close. The restore is the one that matters for popover-type dialogs —\n    // `DialogTrigger`'s own restore is a no-op there — so `shouldRestoreFocus`\n    // has to reach it. Containment is unaffected either way.\n    <FocusScope\n      restoreFocus={context.shouldRestoreFocus ?? true}\n      contain={shouldContainFocus}\n    >\n      {content}\n    </FocusScope>\n  );\n});\n\nconst DialogContent = forwardRef(function DialogContent(\n  props: CubeDialogProps,\n  ref: Ref<HTMLDivElement>,\n) {\n  let { type = 'modal', ...contextProps } = useDialogContext();\n\n  let {\n    qa,\n    children,\n    size = 'M',\n    isDismissable = contextProps.isDismissable,\n    onDismiss = contextProps.onClose,\n    closeIcon,\n    closeButtonStyles,\n    style,\n    ...otherProps\n  } = props;\n\n  size = sizeMap[size.toUpperCase()] || size;\n\n  const styles: Styles = extractStyles(otherProps, STYLES_LIST);\n\n  const { t } = useI18n();\n\n  let domRef = useObjectRef(ref);\n  let { dialogProps, titleProps } = useDialog(\n    mergeProps(contextProps, props),\n    domRef,\n  );\n\n  // If rendered in a popover or tray there won't be a visible dismiss button,\n  // so we render a hidden one for screen readers.\n  let dismissButton;\n  if (type === 'popover' || type === 'tray') {\n    dismissButton = <DismissButton onDismiss={onDismiss} />;\n  }\n\n  // Focus the first focusable element in the dialog when it opens.\n  //\n  // We also re-run the priority focus logic when the dialog <section>\n  // itself is the active element. This recovers from a race that occurs\n  // when a popover-based component (FilterPicker, Picker, Select, …) opens\n  // inside another contained Dialog: React's native `autoFocus` on the\n  // inner control fires during the mutation phase, before the popover's\n  // FocusScope registers in react-aria's focus-scope tree, so the outer\n  // FocusScope yanks focus back. useDialog then defaults focus to the\n  // dialog <section>; without re-promoting it here, the priority element\n  // (e.g. the search input) is never focused.\n  useEffect(() => {\n    if (contextProps.isOpen) {\n      setTimeout(() => {\n        if (!domRef.current) return;\n\n        const activeElement = document.activeElement;\n        const isFocusOutsideDialog = !domRef.current.contains(activeElement);\n        const isFocusOnDialogShell = activeElement === domRef.current;\n\n        // Priority 1: autofocus input or primary button\n        const priorityElement = domRef.current.querySelector(\n          'input[data-autofocus], button[type=\"submit\"], button[data-type=\"primary\"]',\n        ) as HTMLElement | null;\n\n        if (priorityElement && (isFocusOutsideDialog || isFocusOnDialogShell)) {\n          priorityElement.focus();\n          return;\n        }\n\n        if (isFocusOutsideDialog) {\n          // Fallback: focus first tabbable element, or dialog itself\n          const focusManager = createFocusManager(domRef);\n\n          if (!focusManager.focusFirst({ tabbable: true })) {\n            domRef.current.focus();\n          }\n        }\n      });\n    }\n  }, [contextProps.isOpen]);\n\n  // let hasHeader = useHasChild('[data-id=\"Header\"]', domRef);\n  // let hasFooter = useHasChild('[data-id=\"Footer\"]', domRef);\n\n  const contentOverflows = useContentOverflow(domRef);\n\n  let slots = {\n    title: {\n      level: 2,\n      preset: 'h4',\n      ...titleProps,\n    },\n    content: {\n      styles: {\n        flexGrow: 1,\n        padding: '$dialog-content-padding-v $dialog-padding-h',\n        gap: '$dialog-content-gap',\n        height: {\n          '': 'max (100% - (2 * $dialog-content-padding-v))',\n          ':last-child': 'max (100% - $dialog-content-padding-v)',\n        },\n      },\n    },\n    header: {\n      ellipsis: true,\n      styles: {\n        display: 'flex',\n        flow: 'row',\n        gap: '1x',\n        placeItems: 'center stretch',\n        placeContent: 'space-between',\n        padding: `$dialog-title-padding-v ${\n          isDismissable ? '($dialog-padding-h + 4x)' : '$dialog-padding-h'\n        } $dialog-title-padding-v $dialog-padding-h`,\n        border: 'bottom',\n      },\n    },\n    footer: {\n      mods: { 'content-overflow': contentOverflows },\n      styles: {\n        display: 'flex',\n        gap: '1x',\n        flow: 'row-reverse',\n        placeItems: 'baseline stretch',\n        placeContent: 'space-between',\n        padding: '$dialog-footer-v $dialog-padding-h',\n        // A line only while the body scrolls: the footer then sits over\n        // content that carries on beneath it, and the line is what says so.\n        // Under a body that fits, the actions simply end it and a rule there\n        // reads as clutter.\n        border: {\n          '': false,\n          'content-overflow': 'top',\n        },\n      },\n    },\n    buttonGroup: {\n      styles: {\n        flow: 'row-reverse',\n      },\n    },\n  };\n\n  return (\n    <DialogElement\n      ref={domRef}\n      data-id=\"Dialog\"\n      data-qa={qa || 'Dialog'}\n      styles={styles}\n      as=\"section\"\n      {...dialogProps}\n      mods={{ dismissable: isDismissable }}\n      style={{\n        '--dialog-size': `${sizePxMap[size] || sizePxMap.small}px`,\n        ...style,\n      }}\n      data-type={type}\n      data-size={size}\n    >\n      {dismissButton}\n\n      <SlotProvider slots={slots}>\n        {isDismissable && (\n          <CloseButton\n            icon={closeIcon || <CloseIcon size={20} />}\n            label={t('dialog.dismiss', 'Dismiss')}\n            onPress={() => onDismiss && onDismiss()}\n          />\n        )}\n        {children}\n      </SlotProvider>\n    </DialogElement>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgCA,MAAM8B,cAAc;CAClB,GAAG5B;CACH,GAAGK;CACH,GAAGF;CACH,GAAGI;CACJ;AAED,MAAMsB,gBAAgBpB,MAAM;CAC1BqB,IAAI;CACJC,QAAQ;EACNC,SAAS;EACTC,MAAM;EACNC,MAAM;EACNC,eAAe;EACfC,SAAS;EACTC,UAAU;GACR,IAAI;GACJ,cAAc;GACf;EACDC,OAAO;GACL,IAAI;GACJ,mBAAmB;GACnB,2BAA2B;GAC3B,cAAc;GACf;EACDC,QAAQ;GACN,IAAI;GACJ,mBAAmB;GACnB,wCAAwC;GACxC,gBAAgB;GACjB;EACDC,KAAK;EACLC,QAAQ;GACN,IAAI;GACJ,gBAAgB;GACjB;EACDC,QAAQ;GACN,IAAI;GACJ,aAAa;GACb,2BAA2B;GAC5B;EACDC,QAAQ;GACN,IAAI;GACJ,6BAA6B;GAC9B;EACDC,KAAK;GACH,IAAI;GACJ,cAAc;GACd,cAAc;GACf;EACD,2BAA2B;GACzB,IAAI;GACJ,gBAAgB;GACjB;EACD,6BAA6B;GAC3B,IAAI;GACJ,gBAAgB;GACjB;EACD,qBAAqB;GACnB,IAAI;GACJ,gBAAgB;GACjB;EACD,oBAAoB;GAClB,IAAI;GACJ,gBAAgB;GACjB;EACD,uBAAuB;GACrB,IAAI;GACJ,gBAAgB;GAClB;EAKF;CACD,CAAC;AAEF,MAAMC,cAAcpC,MAAMe,aAAY;CACpCsB,IAAI;CACJC,MAAM;CACNhB,QAAQ;EACNM,UAAU;EACVO,KAAK;EACLI,OAAO;EACT;CACD,CAAC;AAEF,MAAMC,UAAU;CACdC,GAAG;CACHC,GAAG;CACHC,GAAG;CACJ;AACD,MAAMC,YAAY;CAChBC,OAAO;CACPC,QAAQ;CACRC,OAAO;CACR;;;;;AAwBD,MAAaU,SAASxD,WAAW,SAAAwD,OAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAM/B,MAAAE,YAF0B/C,0BAA0B,EAEjBgD,oBAAsB;CAEzD,MAAAC,UAAgBhD,kBAAkB;CAAC,IAAAiD;AAAA,KAAAN,EAAA,OAAAF,SAAAE,EAAA,OAAAD,KAAA;AAG1BO,OAAA,oBAAC;GAA2B,GAAKR;GAAYC;KAA1B,UAAiC;AAAAC,IAAA,KAAAF;AAAAE,IAAA,KAAAD;AAAAC,IAAA,KAAAM;OAAAA,MAAAN,EAAA;CAD7D,MAAAO,UACED;CAGF,MAAAE,qBACEL,aAAA,CAAc,CAACE,QAAOI,UAAWJ,QAAO3B,SAAU;CAQlC,MAAAgC,KAAAL,QAAOM,sBAAP;CAAkC,IAAAC;AAAA,KAAAZ,EAAA,OAAAO,WAAAP,EAAA,OAAAQ,sBAAAR,EAAA,OAAAU,IAAA;AADlDE,OAAA,oBAAC;GACe,cAAAF;GACLF,SAAAA;aAERD;IACU;AAAAP,IAAA,KAAAO;AAAAP,IAAA,KAAAQ;AAAAR,IAAA,KAAAU;AAAAV,IAAA,KAAAY;OAAAA,MAAAZ,EAAA;AAAA,QALbY;EAOF;AAEF,MAAMC,gBAAgBxE,WAAW,SAASwE,cACxCf,OACAC,KACA;CACA,IAAI,EAAErB,OAAO,SAAS,GAAGqC,iBAAiB1D,kBAAkB;CAE5D,IAAI,EACFoB,IACAuC,UACA1B,OAAO,KACPC,gBAAgBwB,aAAaxB,eAC7BC,YAAYuB,aAAaE,SACzBvB,WACAC,mBACAuB,OACA,GAAGC,eACDrB;AAEJR,QAAOV,QAAQU,KAAK8B,aAAa,KAAK9B;CAEtC,MAAM5B,SAAiBR,cAAciE,YAAY5D,YAAY;CAE7D,MAAM,EAAE8D,MAAMvE,SAAS;CAEvB,IAAIwE,SAAS5F,aAAaqE,IAAI;CAC9B,IAAI,EAAEwB,aAAaC,eAAe3E,UAChCG,aAAW+D,cAAcjB,MAAM,EAC/BwB,OACD;CAID,IAAIG;AACJ,KAAI/C,SAAS,aAAaA,SAAS,OACjC+C,iBAAgB,oBAAC,iBAAyBjC,YAAa;AAczDhD,iBAAgB;AACd,MAAIuE,aAAaN,OACfiB,kBAAiB;AACf,OAAI,CAACJ,OAAOK,QAAS;GAErB,MAAMC,gBAAgBC,SAASD;GAC/B,MAAME,uBAAuB,CAACR,OAAOK,QAAQI,SAASH,cAAc;GACpE,MAAMI,uBAAuBJ,kBAAkBN,OAAOK;GAGtD,MAAMM,kBAAkBX,OAAOK,QAAQO,cACrC,gFACD;AAED,OAAID,oBAAoBH,wBAAwBE,uBAAuB;AACrEC,oBAAgBG,OAAO;AACvB;;AAGF,OAAIN,sBAIF;QAAI,CAFiBrG,mBAAmB6F,OAAO,CAE7BgB,WAAW,EAAEC,UAAU,MAAM,CAAC,CAC9CjB,QAAOK,QAAQS,OAAO;;IAG1B;IAEH,CAACrB,aAAaN,OAAO,CAAC;CAKzB,MAAM+B,mBAAmBlF,mBAAmBgE,OAAO;CAEnD,IAAImB,QAAQ;EACVC,OAAO;GACLC,OAAO;GACPC,QAAQ;GACR,GAAGpB;GACJ;EACDjB,SAAS,EACP7C,QAAQ;GACNmF,UAAU;GACVC,SAAS;GACT3E,KAAK;GACLD,QAAQ;IACN,IAAI;IACJ,eAAe;IACjB;GACF,EACD;EACD6E,QAAQ;GACNC,UAAU;GACVtF,QAAQ;IACNC,SAAS;IACTC,MAAM;IACNO,KAAK;IACL8E,YAAY;IACZC,cAAc;IACdJ,SAAS,2BACPvD,gBAAgB,6BAA6B,oBAAmB;IAElEnB,QAAQ;IACV;GACD;EACD+E,QAAQ;GACNC,MAAM,EAAE,oBAAoBZ,kBAAkB;GAC9C9E,QAAQ;IACNC,SAAS;IACTQ,KAAK;IACLP,MAAM;IACNqF,YAAY;IACZC,cAAc;IACdJ,SAAS;IAKT1E,QAAQ;KACN,IAAI;KACJ,oBAAoB;KACtB;IACF;GACD;EACDiF,aAAa,EACX3F,QAAQ,EACNE,MAAM,eACR,EACF;EACD;AAED,QACE,qBAAC;EACC,KAAK0D;EACL,WAAQ;EACR,WAAS7C,MAAM;EACPf;EACR,IAAG;EACH,GAAI6D;EACJ,MAAM,EAAE+B,aAAa/D,eAAe;EACpC,OAAO;GACL,iBAAiB,GAAGP,UAAUM,SAASN,UAAUC,MAAK;GACtD,GAAGiC;GACJ;EACD,aAAWxC;EACX,aAAWY;aAEVmC,eAED,qBAAC;GAAoBgB;cAClBlD,iBACC,oBAAC;IACC,MAAMG,aAAa,oBAAC,aAAU,MAAM,KAAM;IAC1C,OAAO2B,EAAE,kBAAkB,UAAU;IACrC,eAAe7B,aAAaA,WAAW;KAE1C,EACAwB;IACW;GACA;EAElB"}

package/dist/components/overlays/Dialog/DialogContainer.js

@@ -1,8 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { _Modal } from "../Modal/Modal.js";
 import { DialogContext } from "./context.js";
 import { Children, isValidElement, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 
 //#region src/components/overlays/Dialog/DialogContainer.tsx
 /**
@@ -23,18 +23,18 @@ function DialogContainer(props) {
 		type,
 		onClose: onDismiss,
 		isDismissable,
-		isOpen
+		isOpen: isActuallyOpened
 	};
-	return /* @__PURE__ */ jsx(_Modal, {
-		isOpen: isActuallyOpened,
-		type,
-		hideOnClose,
-		isDismissable,
-		isKeyboardDismissDisabled,
-		onClose: isDismissable ? onDismiss : void 0,
-		children: /* @__PURE__ */ jsx(DialogContext.Provider, {
-			value: context,
-			children: child
+	return /* @__PURE__ */ jsx(DialogContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(_Modal, {
+			isOpen: isActuallyOpened,
+			type,
+			hideOnClose,
+			isDismissable,
+			isKeyboardDismissDisabled,
+			onClose: isDismissable ? onDismiss : void 0,
+			children: /* @__PURE__ */ jsx(Fragment$1, { children: child })
 		})
 	});
 }

package/dist/components/overlays/Dialog/DialogContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContainer.js","names":["Modal"],"sources":["../../../../src/components/overlays/Dialog/DialogContainer.tsx"],"sourcesContent":["import {\n  Children,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  useRef,\n} from 'react';\n\nimport { Modal, WithCloseBehavior } from '../Modal';\n\nimport { DialogContext } from './context';\n\nexport interface CubeDialogContainerProps extends WithCloseBehavior {\n  /** The Dialog to display, if any. */\n  children?: ReactNode;\n  /** Handler that is called when the 'x' button of a dismissible Dialog is clicked. */\n  onDismiss?: (arg?: any) => void;\n  /**\n   * The type of Dialog that should be rendered. See the visual options below for examples of each.\n   * @default 'modal'\n   */\n  type?: 'modal' | 'fullscreen' | 'fullscreenTakeover' | 'panel';\n  /** Whether the Dialog is dismissible. See the [Dialog docs](Dialog.html#dismissable-dialogs) for more details. */\n  isDismissable?: boolean;\n  /**\n   * This prop allows you to configure whenever the modal is open or not\n   */\n  isOpen?: boolean;\n  /** Whether pressing the escape key to close the dialog should be disabled. */\n  isKeyboardDismissDisabled?: boolean;\n}\n\n/**\n * A DialogContainer accepts a single Dialog as a child, and manages to show and hide\n * it in a modal.\n * Useful in cases where there is no trigger element\n * or when the trigger unmounts while the dialog is open.\n */\nexport function DialogContainer(props: CubeDialogContainerProps) {\n  const {\n    children,\n    type = 'modal',\n    onDismiss,\n    isDismissable = true,\n    isKeyboardDismissDisabled,\n    isOpen,\n    hideOnClose,\n  } = props;\n\n  const childArray = Children.toArray(children);\n  if (childArray.length > 1) {\n    throw new Error('Only a single child can be passed to DialogContainer.');\n  }\n\n  const lastChild = useRef<ReactElement>(null);\n  const child = isValidElement(childArray[0]) ? childArray[0] : null;\n\n  if (child) {\n    lastChild.current = child;\n  }\n\n  const isActuallyOpened = typeof isOpen !== 'boolean' ? !!child : isOpen;\n\n  const context = {\n    type,\n    onClose: onDismiss,\n    isDismissable,\n    isOpen,\n  };\n\n  return (\n    <Modal\n      isOpen={isActuallyOpened}\n      type={type}\n      hideOnClose={hideOnClose}\n      isDismissable={isDismissable}\n      isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n      onClose={isDismissable ? onDismiss : undefined}\n    >\n      <DialogContext.Provider value={context}>{child}</DialogContext.Provider>\n    </Modal>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAsCA,SAAgB,gBAAgB,OAAiC;CAC/D,MAAM,EACJ,UACA,OAAO,SACP,WACA,gBAAgB,MAChB,2BACA,QACA,gBACE;CAEJ,MAAM,aAAa,SAAS,QAAQ,SAAS;AAC7C,KAAI,WAAW,SAAS,EACtB,OAAM,IAAI,MAAM,wDAAwD;CAG1E,MAAM,YAAY,OAAqB,KAAK;CAC5C,MAAM,QAAQ,eAAe,WAAW,GAAG,GAAG,WAAW,KAAK;AAE9D,KAAI,MACF,WAAU,UAAU;CAGtB,MAAM,mBAAmB,OAAO,WAAW,YAAY,CAAC,CAAC,QAAQ;CAEjE,MAAM,UAAU;EACd;EACA,SAAS;EACT;EACA;EACD;AAED,QACE,oBAACA;EACC,QAAQ;EACF;EACO;EACE;EACY;EAC3B,SAAS,gBAAgB,YAAY;YAErC,oBAAC,cAAc;GAAS,OAAO;aAAU;IAA+B;GAClE"}
+{"version":3,"file":"DialogContainer.js","names":["Children","isValidElement","ReactElement","ReactNode","useRef","Modal","WithCloseBehavior","DialogContext","CubeDialogContainerProps","children","onDismiss","arg","type","isDismissable","isOpen","isKeyboardDismissDisabled","DialogContainer","props","hideOnClose","childArray","toArray","length","Error","lastChild","child","current","isActuallyOpened","context","onClose","undefined"],"sources":["../../../../src/components/overlays/Dialog/DialogContainer.tsx"],"sourcesContent":["import {\n  Children,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  useRef,\n} from 'react';\n\nimport { Modal, WithCloseBehavior } from '../Modal';\n\nimport { DialogContext } from './context';\n\nexport interface CubeDialogContainerProps extends WithCloseBehavior {\n  /** The Dialog to display, if any. */\n  children?: ReactNode;\n  /** Handler that is called when the 'x' button of a dismissible Dialog is clicked. */\n  onDismiss?: (arg?: any) => void;\n  /**\n   * The type of Dialog that should be rendered. See the visual options below for examples of each.\n   * @default 'modal'\n   */\n  type?: 'modal' | 'fullscreen' | 'fullscreenTakeover' | 'panel';\n  /** Whether the Dialog is dismissible. See the [Dialog docs](Dialog.html#dismissable-dialogs) for more details. */\n  isDismissable?: boolean;\n  /**\n   * This prop allows you to configure whenever the modal is open or not\n   */\n  isOpen?: boolean;\n  /** Whether pressing the escape key to close the dialog should be disabled. */\n  isKeyboardDismissDisabled?: boolean;\n}\n\n/**\n * A DialogContainer accepts a single Dialog as a child, and manages to show and hide\n * it in a modal.\n * Useful in cases where there is no trigger element\n * or when the trigger unmounts while the dialog is open.\n */\nexport function DialogContainer(props: CubeDialogContainerProps) {\n  const {\n    children,\n    type = 'modal',\n    onDismiss,\n    isDismissable = true,\n    isKeyboardDismissDisabled,\n    isOpen,\n    hideOnClose,\n  } = props;\n\n  const childArray = Children.toArray(children);\n  if (childArray.length > 1) {\n    throw new Error('Only a single child can be passed to DialogContainer.');\n  }\n\n  const lastChild = useRef<ReactElement>(null);\n  const child = isValidElement(childArray[0]) ? childArray[0] : null;\n\n  if (child) {\n    lastChild.current = child;\n  }\n\n  const isActuallyOpened = typeof isOpen !== 'boolean' ? !!child : isOpen;\n\n  const context = {\n    type,\n    onClose: onDismiss,\n    isDismissable,\n    isOpen: isActuallyOpened,\n  };\n\n  return (\n    // The exit animation preserves its children. Keep live open state outside\n    // that snapshot so forms cancel immediately when the container closes.\n    <DialogContext.Provider value={context}>\n      <Modal\n        isOpen={isActuallyOpened}\n        type={type}\n        hideOnClose={hideOnClose}\n        isDismissable={isDismissable}\n        isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n        onClose={isDismissable ? onDismiss : undefined}\n      >\n        <>{child}</>\n      </Modal>\n    </DialogContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAsCA,SAAgBgB,gBAAgBC,OAAiC;CAC/D,MAAM,EACJR,UACAG,OAAO,SACPF,WACAG,gBAAgB,MAChBE,2BACAD,QACAI,gBACED;CAEJ,MAAME,aAAanB,SAASoB,QAAQX,SAAS;AAC7C,KAAIU,WAAWE,SAAS,EACtB,OAAM,IAAIC,MAAM,wDAAwD;CAG1E,MAAMC,YAAYnB,OAAqB,KAAK;CAC5C,MAAMoB,QAAQvB,eAAekB,WAAW,GAAG,GAAGA,WAAW,KAAK;AAE9D,KAAIK,MACFD,WAAUE,UAAUD;CAGtB,MAAME,mBAAmB,OAAOZ,WAAW,YAAY,CAAC,CAACU,QAAQV;CAEjE,MAAMa,UAAU;EACdf;EACAgB,SAASlB;EACTG;EACAC,QAAQY;EACT;AAED,QAGE,oBAAC,cAAc;EAAS,OAAOC;YAC7B,oBAAC;GACC,QAAQD;GACFd;GACOM;GACEL;GACYE;GAC3B,SAASF,gBAAgBH,YAAYmB;aAErC,4CAAGL,QAAM;IACJ;GACe"}

package/dist/components/overlays/Dialog/DialogForm.d.ts

@@ -1,11 +1,11 @@
 
 import { CubeButtonProps } from "../../actions/Button/Button.js";
-import "../../actions/index.js";
+import { CubeDialogProps } from "./Dialog.js";
 import { FieldTypes } from "../../form/Form/types.js";
+import { ModernFormProps } from "../../form/Form/ModernFormRoot.js";
 import { CubeFormProps } from "../../form/Form/Form.js";
-import "../../form/index.js";
-import { CubeDialogProps } from "./Dialog.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { CubeSubmitButtonProps } from "../../form/Form/SubmitButton/SubmitButton.js";
+import { ReactElement } from "react";
 
 //#region src/components/overlays/Dialog/DialogForm.d.ts
 interface CubeDialogFormProps<T extends FieldTypes = FieldTypes> extends Omit<CubeDialogProps, 'children'>, Omit<CubeFormProps<T>, 'role' | 'children'> {
@@ -15,7 +15,7 @@ interface CubeDialogFormProps<T extends FieldTypes = FieldTypes> extends Omit<Cu
   submitProps?: CubeButtonProps;
   /** Properties for cancel button. Use `label` to change text. */
   cancelProps?: CubeButtonProps;
-  /** WIP. Preserve form values even if field is deleted */
+  /** Preserve form values after submission or dismissal. */
   preserve?: boolean;
   /** Whether to hide action button so developer can manually specify them */
   noActions?: boolean;
@@ -31,7 +31,12 @@ interface CubeDialogFormRef {
 /**
  * DialogForms are a specific type of Dialog. They contain forms to fill.
  */
-declare function DialogForm<T extends FieldTypes = FieldTypes>(props: CubeDialogFormProps<T>): react_jsx_runtime0.JSX.Element;
+interface ModernDialogFormProps<T extends FieldTypes = FieldTypes> extends Omit<CubeDialogFormProps<T>, keyof CubeFormProps<T> | 'submitProps'>, Omit<ModernFormProps<T>, 'role' | 'children'> {
+  children?: CubeDialogFormProps<T>['children'];
+  submitProps?: Omit<CubeSubmitButtonProps<T>, 'form'>;
+}
+declare function DialogForm<T extends FieldTypes = FieldTypes>(props: CubeDialogFormProps<T>): ReactElement;
+declare function DialogForm<T extends FieldTypes = FieldTypes>(props: ModernDialogFormProps<T>): ReactElement;
 //#endregion
-export { CubeDialogFormProps, CubeDialogFormRef, DialogForm };
+export { CubeDialogFormProps, CubeDialogFormRef, DialogForm, ModernDialogFormProps };
 //# sourceMappingURL=DialogForm.d.ts.map

package/dist/components/overlays/Dialog/DialogForm.js

@@ -1,22 +1,34 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { _Title } from "../../content/Title.js";
 import { useI18n } from "../../../i18n/useI18n.js";
+import { Button } from "../../actions/Button/Button.js";
 import { ButtonGroup } from "../../actions/ButtonGroup/ButtonGroup.js";
-import { Button } from "../../actions/index.js";
 import { useDialogContext } from "./context.js";
 import { Content } from "../../content/Content.js";
+import { Footer } from "../../content/Footer.js";
 import { Header } from "../../content/Header.js";
 import { Dialog } from "./Dialog.js";
+import { isModernFormController } from "../../form/Form/backend.js";
 import { useForm } from "../../form/Form/use-form.js";
+import { _Form } from "../../form/Form/Form.js";
 import { _SubmitButton } from "../../form/Form/SubmitButton/SubmitButton.js";
-import { Form } from "../../form/Form/index.js";
+import { ModernDialogForm } from "./ModernDialogForm.js";
+import { c } from "react-compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/overlays/Dialog/DialogForm.tsx
-/**
-* DialogForms are a specific type of Dialog. They contain forms to fill.
-*/
 function DialogForm(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = isModernFormController(props.form) ? /* @__PURE__ */ jsx(ModernDialogForm, { ...props }) : /* @__PURE__ */ jsx(LegacyDialogForm, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+function LegacyDialogForm(props) {
+	"use no memo";
 	let { qa, name, form, defaultValues, onDismiss, onSubmit, onSubmitFailed, onValuesChange, labelStyles, labelPosition, requiredMark, necessityIndicator, isReadOnly, isInvalid, isValid, validateTrigger, children, danger, noActions, submitProps, cancelProps, preserve, title, size, closeIcon, ...dialogProps } = props;
 	[form] = useForm(form);
 	const { t } = useI18n();
@@ -36,7 +48,7 @@ function DialogForm(props) {
 		children: [/* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(_Title, {
 			ellipsis: true,
 			children: title
-		}) }), /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Form, {
+		}) }), /* @__PURE__ */ jsxs(_Form, {
 			qa: qa || "DialogForm",
 			form,
 			name,
@@ -58,7 +70,7 @@ function DialogForm(props) {
 			},
 			onSubmitFailed,
 			onValuesChange,
-			children: [typeof children === "function" ? children(onLocalDismiss) : children, !noActions ? /* @__PURE__ */ jsxs(ButtonGroup, { children: [/* @__PURE__ */ jsx(_SubmitButton, {
+			children: [/* @__PURE__ */ jsx(Content, { children: typeof children === "function" ? children(onLocalDismiss) : children }), !noActions ? /* @__PURE__ */ jsx(Footer, { children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [/* @__PURE__ */ jsx(_SubmitButton, {
 				qa: `${qa || ""}SubmitButton`,
 				theme: danger ? "danger" : void 0,
 				label: t("dialogForm.submit", "Submit"),
@@ -68,8 +80,8 @@ function DialogForm(props) {
 				label: t("dialogForm.cancel", "Cancel"),
 				onPress: onLocalDismiss,
 				...cancelProps || {}
-			})] }) : void 0]
-		}) })]
+			})] }) }) : void 0]
+		})]
 	});
 }