@cube-dev/ui-kit 0.0.0-canary-48c41d1 → 0.0.0-canary-50ea57a

package/dist/components/layout/Prefix.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";

package/dist/components/layout/ResizablePanel.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../_internal/hooks/use-event.js";

package/dist/components/layout/Space.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { c } from "react-compiler-runtime";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/layout/Suffix.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
 import { c } from "react-compiler-runtime";

package/dist/components/navigation/Pagination/Pagination.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/navigation/Pagination/use-pagination.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { c } from "react-compiler-runtime";
 import { useControlledState } from "@react-stately/utils";

package/dist/components/navigation/Tabs/DraggableTabList.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { DraggableCollection } from "../../shared/DraggableCollection.js";
 import { c } from "react-compiler-runtime";
 import { jsx } from "react/jsx-runtime";

package/dist/components/navigation/Tabs/TabButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";

package/dist/components/navigation/Tabs/TabDropIndicator.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { DropIndicatorElement } from "./styled.js";
 import { useTabsContext } from "./TabsContext.js";
 import { c } from "react-compiler-runtime";

package/dist/components/navigation/Tabs/TabPanel.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { TabPanelElement } from "./styled.js";
 import { c } from "react-compiler-runtime";
 import { useEffect, useMemo, useRef } from "react";

package/dist/components/navigation/Tabs/TabPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";

package/dist/components/navigation/Tabs/Tabs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/navigation/Tabs/TabsAction.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { _ItemButton } from "../../actions/ItemButton/ItemButton.js";
 import { useOptionalTabsContext } from "./TabsContext.js";
 import { c } from "react-compiler-runtime";

package/dist/components/navigation/Tabs/TabsContext.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { c } from "react-compiler-runtime";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/navigation/Tabs/popover-placement.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 //#region src/components/navigation/Tabs/popover-placement.ts
 /**
 * Maps the parent Tabs `placement` to the popover placement for menus and

package/dist/components/navigation/Tabs/styled.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { _Item } from "../../content/Item/Item.js";
 import { tasty } from "@tenphi/tasty";
 

package/dist/components/navigation/Tabs/types.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 //#region src/components/navigation/Tabs/types.ts
 /**
 * Size mapping for radio type tabs.

package/dist/components/navigation/Tabs/use-tab-editing.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { c } from "react-compiler-runtime";
 import { useState } from "react";
 

package/dist/components/navigation/Tabs/use-tab-indicator.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { chainRaf } from "../../../utils/raf.js";
 import { c } from "react-compiler-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";

package/dist/components/organisms/StatsCard/StatsCard.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { _Text } from "../../content/Text.js";
 import { _Title } from "../../content/Title.js";
 import { Card } from "../../content/Card/Card.js";

package/dist/components/other/Calendar/Calendar.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { useProviderProps } from "../../../provider.js";
 import { CalendarPanel } from "./CalendarPanel.js";
 import { c } from "react-compiler-runtime";

package/dist/components/other/Calendar/CalendarCell.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { CALENDAR_CELL_STYLES } from "./styled.js";
 import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";

package/dist/components/other/Calendar/CalendarGrid.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { getWeekNumber } from "../../fields/DatePicker/period.js";
 import { CalendarCell } from "./CalendarCell.js";
 import { c } from "react-compiler-runtime";

package/dist/components/other/Calendar/CalendarHeader.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { _Title } from "../../content/Title.js";
 import { Space } from "../../layout/Space.js";
 import { RightIcon } from "../../../icons/RightIcon.js";

package/dist/components/other/Calendar/CalendarPanel.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { CalendarElement } from "./styled.js";

package/dist/components/other/Calendar/PeriodCalendar.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { useProviderProps } from "../../../provider.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { getQuarter } from "../../fields/DatePicker/period.js";

package/dist/components/other/Calendar/PeriodGrid.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { CALENDAR_CELL_STYLES } from "./styled.js";
 import { tasty } from "@tenphi/tasty";
 import { useLayoutEffect, useRef } from "react";

package/dist/components/other/Calendar/RangeCalendar.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { useProviderProps } from "../../../provider.js";
 import { CalendarPanel } from "./CalendarPanel.js";
 import { c } from "react-compiler-runtime";

package/dist/components/other/Calendar/styled.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 
 //#region src/components/other/Calendar/styled.tsx

package/dist/components/other/CubeLogo/CubeLogo.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { Icon } from "../../../icons/Icon.js";
 import { c } from "react-compiler-runtime";
 import { mergeStyles, tasty } from "@tenphi/tasty";

package/dist/components/other/NoDataIcon/NoDataIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { wrapIcon } from "../../../icons/wrap-icon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { Paragraph } from "../../content/Paragraph.js";
 import { _Title } from "../../content/Title.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { AlertDialogZone } from "./AlertDialogZone.js";
 import { c } from "react-compiler-runtime";
 import { createContext, useContext, useRef, useState } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { Portal } from "../../portal/Portal.js";
 import { DialogContainer } from "../Dialog/DialogContainer.js";
 import { _AlertDialog } from "./AlertDialog.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | 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,6 +7,7 @@ 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 } from "react";
@@ -84,6 +85,14 @@ const DialogElement = tasty({
 		"$dialog-content-gap": {
 			"": "1.5x",
 			"type=popover": "1x"
+		},
+		Form: {
+			$: "> form",
+			display: "flex",
+			flow: "column",
+			flexGrow: 1,
+			height: "min 0",
+			gap: 0
 		}
 	}
 });
@@ -167,6 +176,7 @@ const DialogContent = forwardRef(function DialogContent(props, ref) {
 			}
 		});
 	}, [contextProps.isOpen]);
+	const contentOverflows = useContentOverflow(domRef);
 	let slots = {
 		title: {
 			level: 2,
@@ -194,14 +204,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":["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","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","slots","title","level","preset","flexGrow","padding","header","ellipsis","placeItems","placeContent","footer","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';\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","Form","$","flexGrow","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","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>` sitting between the dialog and its slots passes the dialog's\n    // flex context through instead of breaking it.\n    //\n    // The dialog is a flex column whose `Content` grows and scrolls while\n    // `Header` and `Footer` stay put. Wrap the slots in a form — which every\n    // dialog with a submit button has to, since the buttons must be inside it —\n    // and the form becomes the flex child in their place. Its own\n    // `display: block` then makes `Content` size to its content, so the body\n    // never scrolls and the footer is pushed off the bottom of the dialog.\n    //\n    // `min-height: 0` is the half nobody guesses: a flex item's default\n    // `min-height: auto` refuses to shrink below its content, so `Content`\n    // cannot scroll no matter what overflow it sets. Consumers rediscovered\n    // this set by hand — see CUB-4920 — so the dialog states it once here.\n    //\n    // Direct child only (`$: '> form'` is a raw tag selector, no\n    // `data-element` needed). A form nested deeper is the consumer's own\n    // layout and is left alone.\n    Form: {\n      $: '> form',\n      display: 'flex',\n      flow: 'column',\n      flexGrow: 1,\n      height: 'min 0',\n      gap: 0,\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  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":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { _Modal } from "../Modal/Modal.js";
 import { DialogContext } from "./context.js";
 import { Children, isValidElement, useRef } from "react";

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

@@ -1,10 +1,11 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | 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 { 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";
@@ -47,7 +48,7 @@ function LegacyDialogForm(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,
@@ -69,7 +70,7 @@ function LegacyDialogForm(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"),
@@ -79,8 +80,8 @@ function LegacyDialogForm(props) {
 				label: t("dialogForm.cancel", "Cancel"),
 				onPress: onLocalDismiss,
 				...cancelProps || {}
-			})] }) : void 0]
-		}) })]
+			})] }) }) : void 0]
+		})]
 	});
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"DialogForm.js","names":["useI18n","Button","ButtonGroup","Content","Header","Title","isModernFormController","Form","SubmitButton","useForm","useDialogContext","CubeDialogProps","Dialog","ModernDialogForm","ReactElement","CubeButtonProps","CubeFormProps","ModernFormProps","CubeSubmitButtonProps","FieldTypes","CubeDialogFormProps","Omit","T","danger","submitProps","cancelProps","preserve","noActions","title","children","onLocalDismiss","CubeDialogFormRef","open","close","ModernDialogFormProps","DialogForm","props","$","_c","t0","form","LegacyDialogForm","qa","name","defaultValues","onDismiss","onSubmit","onSubmitFailed","onValuesChange","labelStyles","labelPosition","requiredMark","necessityIndicator","isReadOnly","isInvalid","isValid","validateTrigger","size","closeIcon","dialogProps","t","onClose","setTimeout","resetFields","data","undefined"],"sources":["../../../../src/components/overlays/Dialog/DialogForm.tsx"],"sourcesContent":["import { useI18n } from '../../../i18n';\nimport { Button } from '../../actions/Button/Button';\nimport { ButtonGroup } from '../../actions/ButtonGroup/ButtonGroup';\nimport { Content } from '../../content/Content';\nimport { Header } from '../../content/Header';\nimport { Title } from '../../content/Title';\nimport { isModernFormController } from '../../form/Form/backend';\nimport { Form } from '../../form/Form/Form';\nimport { SubmitButton } from '../../form/Form/SubmitButton/SubmitButton';\nimport { useForm } from '../../form/Form/use-form';\n\nimport { useDialogContext } from './context';\nimport { CubeDialogProps, Dialog } from './Dialog';\nimport { ModernDialogForm } from './ModernDialogForm';\n\nimport type { ReactElement } from 'react';\nimport type { CubeButtonProps } from '../../actions/Button/Button';\nimport type { CubeFormProps } from '../../form/Form/Form';\nimport type { ModernFormProps } from '../../form/Form/ModernFormRoot';\nimport type { CubeSubmitButtonProps } from '../../form/Form/SubmitButton/SubmitButton';\nimport type { FieldTypes } from '../../form/Form/types';\n\nexport interface CubeDialogFormProps<T extends FieldTypes = FieldTypes>\n  extends Omit<CubeDialogProps, 'children'>,\n    Omit<CubeFormProps<T>, 'role' | 'children'> {\n  /** Whether the submit button has a `danger` theme */\n  danger?: boolean;\n  /** Properties for submit button. Use `label` to change text. */\n  submitProps?: CubeButtonProps;\n  /** Properties for cancel button. Use `label` to change text. */\n  cancelProps?: CubeButtonProps;\n  /** Preserve form values after submission or dismissal. */\n  preserve?: boolean;\n  /** Whether to hide action button so developer can manually specify them */\n  noActions?: boolean;\n  /** The title of the dialog */\n  title?: string;\n  /** Children nodes or render function  */\n  children?:\n    | CubeFormProps['children']\n    | ((onLocalDismiss: () => void) => CubeFormProps['children']);\n}\n\nexport interface CubeDialogFormRef {\n  open: () => void;\n  close: () => void;\n}\n\n/**\n * DialogForms are a specific type of Dialog. They contain forms to fill.\n */\nexport interface ModernDialogFormProps<T extends FieldTypes = FieldTypes>\n  extends Omit<CubeDialogFormProps<T>, keyof CubeFormProps<T> | 'submitProps'>,\n    Omit<ModernFormProps<T>, 'role' | 'children'> {\n  children?: CubeDialogFormProps<T>['children'];\n  submitProps?: Omit<CubeSubmitButtonProps<T>, 'form'>;\n}\n\nexport function DialogForm<T extends FieldTypes = FieldTypes>(\n  props: CubeDialogFormProps<T>,\n): ReactElement;\nexport function DialogForm<T extends FieldTypes = FieldTypes>(\n  props: ModernDialogFormProps<T>,\n): ReactElement;\nexport function DialogForm<T extends FieldTypes = FieldTypes>(\n  props: CubeDialogFormProps<T> | ModernDialogFormProps<T>,\n): ReactElement {\n  return isModernFormController(props.form) ? (\n    <ModernDialogForm {...(props as ModernDialogFormProps<T>)} />\n  ) : (\n    <LegacyDialogForm {...(props as CubeDialogFormProps<T>)} />\n  );\n}\n\nfunction LegacyDialogForm<T extends FieldTypes>(props: CubeDialogFormProps<T>) {\n  'use no memo';\n  // Legacy form state is mutable; preserve its render-time reads until migration.\n\n  let {\n    qa,\n    name,\n    form,\n    defaultValues,\n    onDismiss,\n    onSubmit,\n    onSubmitFailed,\n    onValuesChange,\n    labelStyles,\n    labelPosition,\n    requiredMark,\n    necessityIndicator,\n    isReadOnly,\n    isInvalid,\n    isValid,\n    validateTrigger,\n    children,\n    danger,\n    noActions,\n    submitProps,\n    cancelProps,\n    preserve,\n    title,\n    size,\n    closeIcon,\n    ...dialogProps\n  } = props;\n\n  [form] = useForm(form);\n\n  const { t } = useI18n();\n  const { onClose } = useDialogContext();\n\n  function onLocalDismiss() {\n    onClose?.();\n    onDismiss?.();\n\n    if (!preserve) {\n      // let animations finish before resetting the form\n      setTimeout(() => {\n        form?.resetFields();\n      }, 250);\n    }\n  }\n\n  return (\n    <Dialog\n      qa={`${qa || ''}Dialog`}\n      size={size}\n      closeIcon={closeIcon}\n      {...dialogProps}\n    >\n      <Header>\n        <Title ellipsis>{title}</Title>\n      </Header>\n      <Content>\n        <Form<T>\n          qa={qa || 'DialogForm'}\n          form={form}\n          name={name}\n          defaultValues={defaultValues}\n          labelStyles={labelStyles}\n          labelPosition={labelPosition}\n          requiredMark={requiredMark}\n          necessityIndicator={necessityIndicator}\n          isReadOnly={isReadOnly}\n          isInvalid={isInvalid}\n          isValid={isValid}\n          validateTrigger={validateTrigger}\n          onSubmit={async (data) => {\n            await onSubmit?.(data);\n\n            onClose?.();\n\n            if (!preserve) {\n              // let animations finish before resetting the form\n              setTimeout(() => {\n                form.resetFields();\n              }, 250);\n            }\n          }}\n          onSubmitFailed={onSubmitFailed}\n          onValuesChange={onValuesChange}\n        >\n          {typeof children === 'function' ? children(onLocalDismiss) : children}\n\n          {!noActions ? (\n            <ButtonGroup>\n              <SubmitButton\n                qa={`${qa || ''}SubmitButton`}\n                theme={danger ? 'danger' : undefined}\n                label={t('dialogForm.submit', 'Submit')}\n                {...(submitProps || {})}\n              />\n              <Button\n                qa={`${qa || ''}CancelButton`}\n                label={t('dialogForm.cancel', 'Cancel')}\n                onPress={onLocalDismiss}\n                {...(cancelProps || {})}\n              />\n            </ButtonGroup>\n          ) : undefined}\n        </Form>\n      </Content>\n    </Dialog>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgEA,SAAOmC,WAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAD,OAAA;AAGEG,OAAAjC,uBAAuB8B,MAAKI,KAIlC,GAHC,oBAAC,oBAAgB,GAAMJ,QAGxB,GADC,oBAAC,oBAAgB,GAAMA,QACxB;AAAAC,IAAA,KAAAD;AAAAC,IAAA,KAAAE;OAAAA,MAAAF,EAAA;AAAA,QAJME;;AAOT,SAASE,iBAAuCL,OAA+B;AAC7E;CAGA,IAAI,EACFM,IACAC,MACAH,MACAI,eACAC,WACAC,UACAC,gBACAC,gBACAC,aACAC,eACAC,cACAC,oBACAC,YACAC,WACAC,SACAC,iBACA3B,UACAN,QACAI,WACAH,aACAC,aACAC,UACAE,OACA6B,MACAC,WACA,GAAGC,gBACDvB;AAEJ,EAACI,QAAQ/B,QAAQ+B,KAAK;CAEtB,MAAM,EAAEoB,MAAM5D,SAAS;CACvB,MAAM,EAAE6D,YAAYnD,kBAAkB;CAEtC,SAASoB,iBAAiB;AACxB+B,aAAW;AACXhB,eAAa;AAEb,MAAI,CAACnB,SAEHoC,kBAAiB;AACftB,SAAMuB,aAAa;KAClB,IAAI;;AAIX,QACE,qBAAC;EACC,IAAI,GAAGrB,MAAM,GAAE;EACTe;EACKC;EACX,GAAIC;aAEJ,oBAAC,oBACC,oBAAC;GAAM;aAAU/B;IAAa,GACxB,EACR,oBAAC,qBACC,qBAAC;GACC,IAAIc,MAAM;GACJF;GACAG;GACSC;GACFK;GACEC;GACDC;GACMC;GACRC;GACDC;GACFC;GACQC;GACjB,UAAU,OAAOQ,SAAS;AACxB,UAAMlB,WAAWkB,KAAK;AAEtBH,eAAW;AAEX,QAAI,CAACnC,SAEHoC,kBAAiB;AACftB,UAAKuB,aAAa;OACjB,IAAI;;GAGKhB;GACAC;cAEf,OAAOnB,aAAa,aAAaA,SAASC,eAAe,GAAGD,UAE5D,CAACF,YACA,qBAAC,0BACC,oBAAC;IACC,IAAI,GAAGe,MAAM,GAAE;IACf,OAAOnB,SAAS,WAAW0C;IAC3B,OAAOL,EAAE,qBAAqB,SAAS;IACvC,GAAKpC,eAAe,EAAG;KAAC,EAE1B,oBAAC;IACC,IAAI,GAAGkB,MAAM,GAAE;IACf,OAAOkB,EAAE,qBAAqB,SAAS;IACvC,SAAS9B;IACT,GAAKL,eAAe,EAAG;KAAC,IAEd,GACZwC;IACA,GACC;GACF"}
+{"version":3,"file":"DialogForm.js","names":["useI18n","Button","ButtonGroup","Content","Footer","Header","Title","isModernFormController","Form","SubmitButton","useForm","useDialogContext","CubeDialogProps","Dialog","ModernDialogForm","ReactElement","CubeButtonProps","CubeFormProps","ModernFormProps","CubeSubmitButtonProps","FieldTypes","CubeDialogFormProps","Omit","T","danger","submitProps","cancelProps","preserve","noActions","title","children","onLocalDismiss","CubeDialogFormRef","open","close","ModernDialogFormProps","DialogForm","props","$","_c","t0","form","LegacyDialogForm","qa","name","defaultValues","onDismiss","onSubmit","onSubmitFailed","onValuesChange","labelStyles","labelPosition","requiredMark","necessityIndicator","isReadOnly","isInvalid","isValid","validateTrigger","size","closeIcon","dialogProps","t","onClose","setTimeout","resetFields","data","undefined"],"sources":["../../../../src/components/overlays/Dialog/DialogForm.tsx"],"sourcesContent":["import { useI18n } from '../../../i18n';\nimport { Button } from '../../actions/Button/Button';\nimport { ButtonGroup } from '../../actions/ButtonGroup/ButtonGroup';\nimport { Content } from '../../content/Content';\nimport { Footer } from '../../content/Footer';\nimport { Header } from '../../content/Header';\nimport { Title } from '../../content/Title';\nimport { isModernFormController } from '../../form/Form/backend';\nimport { Form } from '../../form/Form/Form';\nimport { SubmitButton } from '../../form/Form/SubmitButton/SubmitButton';\nimport { useForm } from '../../form/Form/use-form';\n\nimport { useDialogContext } from './context';\nimport { CubeDialogProps, Dialog } from './Dialog';\nimport { ModernDialogForm } from './ModernDialogForm';\n\nimport type { ReactElement } from 'react';\nimport type { CubeButtonProps } from '../../actions/Button/Button';\nimport type { CubeFormProps } from '../../form/Form/Form';\nimport type { ModernFormProps } from '../../form/Form/ModernFormRoot';\nimport type { CubeSubmitButtonProps } from '../../form/Form/SubmitButton/SubmitButton';\nimport type { FieldTypes } from '../../form/Form/types';\n\nexport interface CubeDialogFormProps<T extends FieldTypes = FieldTypes>\n  extends Omit<CubeDialogProps, 'children'>,\n    Omit<CubeFormProps<T>, 'role' | 'children'> {\n  /** Whether the submit button has a `danger` theme */\n  danger?: boolean;\n  /** Properties for submit button. Use `label` to change text. */\n  submitProps?: CubeButtonProps;\n  /** Properties for cancel button. Use `label` to change text. */\n  cancelProps?: CubeButtonProps;\n  /** Preserve form values after submission or dismissal. */\n  preserve?: boolean;\n  /** Whether to hide action button so developer can manually specify them */\n  noActions?: boolean;\n  /** The title of the dialog */\n  title?: string;\n  /** Children nodes or render function  */\n  children?:\n    | CubeFormProps['children']\n    | ((onLocalDismiss: () => void) => CubeFormProps['children']);\n}\n\nexport interface CubeDialogFormRef {\n  open: () => void;\n  close: () => void;\n}\n\n/**\n * DialogForms are a specific type of Dialog. They contain forms to fill.\n */\nexport interface ModernDialogFormProps<T extends FieldTypes = FieldTypes>\n  extends Omit<CubeDialogFormProps<T>, keyof CubeFormProps<T> | 'submitProps'>,\n    Omit<ModernFormProps<T>, 'role' | 'children'> {\n  children?: CubeDialogFormProps<T>['children'];\n  submitProps?: Omit<CubeSubmitButtonProps<T>, 'form'>;\n}\n\nexport function DialogForm<T extends FieldTypes = FieldTypes>(\n  props: CubeDialogFormProps<T>,\n): ReactElement;\nexport function DialogForm<T extends FieldTypes = FieldTypes>(\n  props: ModernDialogFormProps<T>,\n): ReactElement;\nexport function DialogForm<T extends FieldTypes = FieldTypes>(\n  props: CubeDialogFormProps<T> | ModernDialogFormProps<T>,\n): ReactElement {\n  return isModernFormController(props.form) ? (\n    <ModernDialogForm {...(props as ModernDialogFormProps<T>)} />\n  ) : (\n    <LegacyDialogForm {...(props as CubeDialogFormProps<T>)} />\n  );\n}\n\nfunction LegacyDialogForm<T extends FieldTypes>(props: CubeDialogFormProps<T>) {\n  'use no memo';\n  // Legacy form state is mutable; preserve its render-time reads until migration.\n\n  let {\n    qa,\n    name,\n    form,\n    defaultValues,\n    onDismiss,\n    onSubmit,\n    onSubmitFailed,\n    onValuesChange,\n    labelStyles,\n    labelPosition,\n    requiredMark,\n    necessityIndicator,\n    isReadOnly,\n    isInvalid,\n    isValid,\n    validateTrigger,\n    children,\n    danger,\n    noActions,\n    submitProps,\n    cancelProps,\n    preserve,\n    title,\n    size,\n    closeIcon,\n    ...dialogProps\n  } = props;\n\n  [form] = useForm(form);\n\n  const { t } = useI18n();\n  const { onClose } = useDialogContext();\n\n  function onLocalDismiss() {\n    onClose?.();\n    onDismiss?.();\n\n    if (!preserve) {\n      // let animations finish before resetting the form\n      setTimeout(() => {\n        form?.resetFields();\n      }, 250);\n    }\n  }\n\n  return (\n    <Dialog\n      qa={`${qa || ''}Dialog`}\n      size={size}\n      closeIcon={closeIcon}\n      {...dialogProps}\n    >\n      <Header>\n        <Title ellipsis>{title}</Title>\n      </Header>\n      {/*\n        The form wraps BOTH slots rather than sitting inside `Content`, so the\n        actions can live in a pinned `Footer` while the body scrolls. They still\n        have to be inside the `<form>` for submit to work, which is why the form\n        is the outer one of the two (CUB-4920). `Dialog` gives a direct-child\n        form the flex context this needs.\n      */}\n      <Form<T>\n        qa={qa || 'DialogForm'}\n        form={form}\n        name={name}\n        defaultValues={defaultValues}\n        labelStyles={labelStyles}\n        labelPosition={labelPosition}\n        requiredMark={requiredMark}\n        necessityIndicator={necessityIndicator}\n        isReadOnly={isReadOnly}\n        isInvalid={isInvalid}\n        isValid={isValid}\n        validateTrigger={validateTrigger}\n        onSubmit={async (data) => {\n          await onSubmit?.(data);\n\n          onClose?.();\n\n          if (!preserve) {\n            // let animations finish before resetting the form\n            setTimeout(() => {\n              form.resetFields();\n            }, 250);\n          }\n        }}\n        onSubmitFailed={onSubmitFailed}\n        onValuesChange={onValuesChange}\n      >\n        <Content>\n          {typeof children === 'function' ? children(onLocalDismiss) : children}\n        </Content>\n\n        {!noActions ? (\n          <Footer>\n            <ButtonGroup>\n              <SubmitButton\n                qa={`${qa || ''}SubmitButton`}\n                theme={danger ? 'danger' : undefined}\n                label={t('dialogForm.submit', 'Submit')}\n                {...(submitProps || {})}\n              />\n              <Button\n                qa={`${qa || ''}CancelButton`}\n                label={t('dialogForm.cancel', 'Cancel')}\n                onPress={onLocalDismiss}\n                {...(cancelProps || {})}\n              />\n            </ButtonGroup>\n          </Footer>\n        ) : undefined}\n      </Form>\n    </Dialog>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiEA,SAAOoC,WAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAD,OAAA;AAGEG,OAAAjC,uBAAuB8B,MAAKI,KAIlC,GAHC,oBAAC,oBAAgB,GAAMJ,QAGxB,GADC,oBAAC,oBAAgB,GAAMA,QACxB;AAAAC,IAAA,KAAAD;AAAAC,IAAA,KAAAE;OAAAA,MAAAF,EAAA;AAAA,QAJME;;AAOT,SAASE,iBAAuCL,OAA+B;AAC7E;CAGA,IAAI,EACFM,IACAC,MACAH,MACAI,eACAC,WACAC,UACAC,gBACAC,gBACAC,aACAC,eACAC,cACAC,oBACAC,YACAC,WACAC,SACAC,iBACA3B,UACAN,QACAI,WACAH,aACAC,aACAC,UACAE,OACA6B,MACAC,WACA,GAAGC,gBACDvB;AAEJ,EAACI,QAAQ/B,QAAQ+B,KAAK;CAEtB,MAAM,EAAEoB,MAAM7D,SAAS;CACvB,MAAM,EAAE8D,YAAYnD,kBAAkB;CAEtC,SAASoB,iBAAiB;AACxB+B,aAAW;AACXhB,eAAa;AAEb,MAAI,CAACnB,SAEHoC,kBAAiB;AACftB,SAAMuB,aAAa;KAClB,IAAI;;AAIX,QACE,qBAAC;EACC,IAAI,GAAGrB,MAAM,GAAE;EACTe;EACKC;EACX,GAAIC;aAEJ,oBAAC,oBACC,oBAAC;GAAM;aAAU/B;IAAa,GACxB,EAQR,qBAAC;GACC,IAAIc,MAAM;GACJF;GACAG;GACSC;GACFK;GACEC;GACDC;GACMC;GACRC;GACDC;GACFC;GACQC;GACjB,UAAU,OAAOQ,SAAS;AACxB,UAAMlB,WAAWkB,KAAK;AAEtBH,eAAW;AAEX,QAAI,CAACnC,SAEHoC,kBAAiB;AACftB,UAAKuB,aAAa;OACjB,IAAI;;GAGKhB;GACAC;cAEhB,oBAAC,qBACE,OAAOnB,aAAa,aAAaA,SAASC,eAAe,GAAGD,WACtD,EAER,CAACF,YACA,oBAAC,oBACC,qBAAC,0BACC,oBAAC;IACC,IAAI,GAAGe,MAAM,GAAE;IACf,OAAOnB,SAAS,WAAW0C;IAC3B,OAAOL,EAAE,qBAAqB,SAAS;IACvC,GAAKpC,eAAe,EAAG;KAAC,EAE1B,oBAAC;IACC,IAAI,GAAGkB,MAAM,GAAE;IACf,OAAOkB,EAAE,qBAAqB,SAAS;IACvC,SAAS9B;IACT,GAAKL,eAAe,EAAG;KAAC,IAEf,GACN,GACPwC;IACA;GACC"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-48c41d1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-50ea57a | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { usePopoverSync } from "../../../utils/react/usePopoverSync.js";