@cube-dev/ui-kit 0.195.0 → 0.197.0

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.197.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";
@@ -108,12 +108,22 @@ const sizePxMap = {
 	large: 798
 };
 /**
+* The control a dialog focuses when it opens: an input marked
+* `data-autofocus`, or a submit or primary button. In an alert dialog never a
+* destructive (`danger`) button, which a reflexive Enter would run.
+*/
+function findPriorityFocusElement(dialog) {
+	const button = dialog.getAttribute("role") === "alertdialog" ? "button:not([data-theme=\"danger\"])" : "button";
+	return dialog.querySelector(`input[data-autofocus], ${button}[type="submit"], ${button}[data-type="primary"]`);
+}
+/**
 * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
 * 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 transitionState = useOpenTransitionContext()?.transitionState;
+	const isShown = transitionState === "enter" || transitionState === "entered";
 	const context = useDialogContext();
 	let t0;
 	if ($[0] !== props || $[1] !== ref) {
@@ -126,7 +136,8 @@ const Dialog = forwardRef(function Dialog(props, ref) {
 		$[2] = t0;
 	} else t0 = $[2];
 	const content = t0;
-	const shouldContainFocus = isEntered && !!context.isOpen && context.type !== "panel";
+	const isNonModalPopover = context.type === "popover" && context.isDismissable === false;
+	const shouldContainFocus = isShown && !!context.isOpen && context.type !== "panel" && !isNonModalPopover;
 	const t1 = context.shouldRestoreFocus ?? true;
 	let t2;
 	if ($[3] !== content || $[4] !== shouldContainFocus || $[5] !== t1) {
@@ -144,12 +155,12 @@ const Dialog = forwardRef(function Dialog(props, ref) {
 });
 const DialogContent = forwardRef(function DialogContent(props, ref) {
 	let { type = "modal", ...contextProps } = useDialogContext();
-	let { qa, children, size = "M", isDismissable = contextProps.isDismissable, onDismiss = contextProps.onClose, closeIcon, closeButtonStyles, style, ...otherProps } = props;
+	let { qa, children, size = "M", isDismissable = type === "popover" ? void 0 : contextProps.isDismissable, onDismiss = contextProps.onClose, closeIcon, closeButtonStyles, style, ...otherProps } = props;
 	size = sizeMap[size.toUpperCase()] || size;
 	const styles = extractStyles(otherProps, STYLES_LIST);
 	const { t } = useI18n();
 	let domRef = useObjectRef(ref);
-	let { dialogProps, titleProps } = useDialog(mergeProps$1(contextProps, props), domRef);
+	let { dialogProps, titleProps, contentProps } = useDialog(mergeProps$1(contextProps, props), domRef);
 	let dismissButton;
 	if (type === "popover" || type === "tray") dismissButton = /* @__PURE__ */ jsx(DismissButton, { onDismiss });
 	useEffect(() => {
@@ -158,7 +169,7 @@ const DialogContent = forwardRef(function DialogContent(props, ref) {
 			const activeElement = document.activeElement;
 			const isFocusOutsideDialog = !domRef.current.contains(activeElement);
 			const isFocusOnDialogShell = activeElement === domRef.current;
-			const priorityElement = domRef.current.querySelector("input[data-autofocus], button[type=\"submit\"], button[data-type=\"primary\"]");
+			const priorityElement = findPriorityFocusElement(domRef.current);
 			if (priorityElement && (isFocusOutsideDialog || isFocusOnDialogShell)) {
 				priorityElement.focus();
 				return;
@@ -175,15 +186,18 @@ const DialogContent = forwardRef(function DialogContent(props, ref) {
 			preset: "h4",
 			...titleProps
 		},
-		content: { styles: {
-			flexGrow: 1,
-			padding: "$dialog-content-padding-v $dialog-padding-h",
-			gap: "$dialog-content-gap",
-			height: {
-				"": "max (100% - (2 * $dialog-content-padding-v))",
-				":last-child": "max (100% - $dialog-content-padding-v)"
+		content: {
+			id: contentProps.id ?? null,
+			styles: {
+				flexGrow: 1,
+				padding: "$dialog-content-padding-v $dialog-padding-h",
+				gap: "$dialog-content-gap",
+				height: {
+					"": "max (100% - (2 * $dialog-content-padding-v))",
+					":last-child": "max (100% - $dialog-content-padding-v)"
+				}
 			}
-		} },
+		},
 		header: {
 			ellipsis: true,
 			styles: {

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","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 } 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 = <DialogContent key=\"content\" {...props} ref={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            aria-label={t('dialog.dismiss', 'Dismiss')}\n            onPress={() => onDismiss && onDismiss()}\n          />\n        )}\n        {children}\n      </SlotProvider>\n    </DialogElement>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgCA,MAAM6B,cAAc;CAClB,GAAG3B;CACH,GAAGK;CACH,GAAGF;CACH,GAAGI;CACJ;AAED,MAAMqB,gBAAgBnB,MAAM;CAC1BoB,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,cAAcnC,MAAMc,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,SAASvD,WAAW,SAAAuD,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;AAEnBO,OAAA,oBAAC;GAA2B,GAAKR;GAAYC;KAA1B,UAAiC;AAAAC,IAAA,KAAAF;AAAAE,IAAA,KAAAD;AAAAC,IAAA,KAAAM;OAAAA,MAAAN,EAAA;CAApE,MAAAO,UAAgBD;CAEhB,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,gBAAgBvE,WAAW,SAASuE,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,SAAS3F,aAAaoE,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;AAczD/C,iBAAgB;AACd,MAAIsE,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,CAFiBpG,mBAAmB4F,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,cAAY2B,EAAE,kBAAkB,UAAU;IAC1C,eAAe7B,aAAaA,WAAW;KAE1C,EACAwB;IACW;GACA;EAElB"}
+{"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","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","findPriorityFocusElement","dialog","HTMLElement","button","getAttribute","querySelector","Dialog","props","ref","$","_c","transitionState","isShown","context","t0","content","isNonModalPopover","shouldContainFocus","isOpen","t1","shouldRestoreFocus","t2","DialogContent","HTMLDivElement","contextProps","children","undefined","onClose","style","otherProps","toUpperCase","t","domRef","dialogProps","titleProps","contentProps","dismissButton","setTimeout","current","activeElement","document","isFocusOutsideDialog","contains","isFocusOnDialogShell","priorityElement","focus","focusManager","focusFirst","tabbable","contentOverflows","slots","title","level","preset","id","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 } 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 * The control a dialog focuses when it opens: an input marked\n * `data-autofocus`, or a submit or primary button. In an alert dialog never a\n * destructive (`danger`) button, which a reflexive Enter would run.\n */\nfunction findPriorityFocusElement(dialog: HTMLElement) {\n  const button =\n    dialog.getAttribute('role') === 'alertdialog'\n      ? 'button:not([data-theme=\"danger\"])'\n      : 'button';\n\n  return dialog.querySelector<HTMLElement>(\n    `input[data-autofocus], ${button}[type=\"submit\"], ${button}[data-type=\"primary\"]`,\n  );\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 transitionState = useOpenTransitionContext()?.transitionState;\n\n  // From the first frame of the enter transition, not only once it has\n  // ended: a Tab pressed while the dialog animates in would otherwise land on\n  // the page behind it, and nothing would pull it back. Released as soon as\n  // the dialog closes, so focus can return to the trigger during the exit.\n  const isShown = transitionState === 'enter' || transitionState === 'entered';\n\n  const context = useDialogContext();\n\n  const content = <DialogContent key=\"content\" {...props} ref={ref} />;\n\n  // A popover that is not dismissable leaves the page usable, as a panel\n  // does: an outside press reaches its control, and focus has to follow it\n  // there, into a text field too.\n  const isNonModalPopover =\n    context.type === 'popover' && context.isDismissable === false;\n\n  const shouldContainFocus =\n    isShown &&\n    !!context.isOpen &&\n    context.type !== 'panel' &&\n    !isNonModalPopover;\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    // A popover shows a close button only when its `Dialog` asks for one: its\n    // trigger's `isDismissable` decides whether an outside press closes it.\n    isDismissable = type === 'popover' ? undefined : 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  // `contentProps` carries an id only for `role=\"alertdialog\"` without an\n  // explicit `aria-describedby`: an alert is described by its message, while a\n  // plain dialog links nothing, so opening a form does not read it aloud.\n  let { dialogProps, titleProps, contentProps } = 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 = findPriorityFocusElement(domRef.current);\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      // `null` rather than `undefined` when there is none: slots reach nested\n      // slot providers, and `undefined` does not override, so a dialog opened\n      // inside an alert dialog would repeat the alert's message id.\n      id: contentProps.id ?? null,\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            aria-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.d.ts

@@ -1,6 +1,6 @@
 
 import { WithCloseBehavior } from "../Modal/types.js";
-import "../Modal/index.js";
+import { Styles } from "@tenphi/tasty";
 import * as react from "react";
 import { ReactNode } from "react";
 
@@ -14,7 +14,9 @@ interface CubeDialogContainerProps extends WithCloseBehavior {
    * The type of Dialog that should be rendered. See the visual options below for examples of each.
    * @default 'modal'
    */
-  type?: 'modal' | 'fullscreen' | 'fullscreenTakeover' | 'panel';
+  type?: 'modal' | 'tray' | 'fullscreen' | 'fullscreenTakeover' | 'panel';
+  /** Styles for the overlay content shell. Style the child Dialog separately. */
+  styles?: Styles;
   /** Whether the Dialog is dismissible. See the [Dialog docs](Dialog.html#dismissable-dialogs) for more details. */
   isDismissable?: boolean;
   /**

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

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
 import { _Modal } from "../Modal/Modal.js";
+import { _Tray } from "../Modal/Tray.js";
 import { DialogContext } from "./context.js";
 import { c } from "react/compiler-runtime";
 import { Children, isValidElement, useState } from "react";
@@ -13,8 +14,8 @@ import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 * or when the trigger unmounts while the dialog is open.
 */
 function DialogContainer(props) {
-	const $ = c(23);
-	const { children, type: t0, onDismiss, isDismissable: t1, isKeyboardDismissDisabled, isOpen, hideOnClose } = props;
+	const $ = c(25);
+	const { children, type: t0, onDismiss, isDismissable: t1, isKeyboardDismissDisabled, isOpen, hideOnClose, styles } = props;
 	const type = t0 === void 0 ? "modal" : t0;
 	const isDismissable = t1 === void 0 ? true : t1;
 	let t2;
@@ -57,45 +58,50 @@ function DialogContainer(props) {
 		$[9] = t4;
 	} else t4 = $[9];
 	const context = t4;
-	const t5 = isDismissable ? onDismiss : void 0;
-	const t6 = child ?? (hideOnClose && !isActuallyOpened ? lastDialog.child : null);
-	let t7;
-	if ($[10] !== t6) {
-		t7 = /* @__PURE__ */ jsx(Fragment$1, { children: t6 });
-		$[10] = t6;
-		$[11] = t7;
-	} else t7 = $[11];
+	const OverlayComponent = type === "tray" ? _Tray : _Modal;
+	const t5 = type === "tray" ? void 0 : type;
+	const t6 = isDismissable ? onDismiss : void 0;
+	const t7 = child ?? (hideOnClose && !isActuallyOpened ? lastDialog.child : null);
 	let t8;
-	if ($[12] !== hideOnClose || $[13] !== isActuallyOpened || $[14] !== isDismissable || $[15] !== isKeyboardDismissDisabled || $[16] !== t5 || $[17] !== t7 || $[18] !== type) {
-		t8 = /* @__PURE__ */ jsx(_Modal, {
+	if ($[10] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Fragment$1, { children: t7 });
+		$[10] = t7;
+		$[11] = t8;
+	} else t8 = $[11];
+	let t9;
+	if ($[12] !== OverlayComponent || $[13] !== hideOnClose || $[14] !== isActuallyOpened || $[15] !== isDismissable || $[16] !== isKeyboardDismissDisabled || $[17] !== styles || $[18] !== t5 || $[19] !== t6 || $[20] !== t8) {
+		t9 = /* @__PURE__ */ jsx(OverlayComponent, {
 			isOpen: isActuallyOpened,
-			type,
+			type: t5,
+			styles,
 			hideOnClose,
 			isDismissable,
 			isKeyboardDismissDisabled,
-			onClose: t5,
-			children: t7
+			onClose: t6,
+			children: t8
 		});
-		$[12] = hideOnClose;
-		$[13] = isActuallyOpened;
-		$[14] = isDismissable;
-		$[15] = isKeyboardDismissDisabled;
-		$[16] = t5;
-		$[17] = t7;
-		$[18] = type;
-		$[19] = t8;
-	} else t8 = $[19];
-	let t9;
-	if ($[20] !== context || $[21] !== t8) {
-		t9 = /* @__PURE__ */ jsx(DialogContext.Provider, {
+		$[12] = OverlayComponent;
+		$[13] = hideOnClose;
+		$[14] = isActuallyOpened;
+		$[15] = isDismissable;
+		$[16] = isKeyboardDismissDisabled;
+		$[17] = styles;
+		$[18] = t5;
+		$[19] = t6;
+		$[20] = t8;
+		$[21] = t9;
+	} else t9 = $[21];
+	let t10;
+	if ($[22] !== context || $[23] !== t9) {
+		t10 = /* @__PURE__ */ jsx(DialogContext.Provider, {
 			value: context,
-			children: t8
+			children: t9
 		});
-		$[20] = context;
-		$[21] = t8;
-		$[22] = t9;
-	} else t9 = $[22];
-	return t9;
+		$[22] = context;
+		$[23] = t9;
+		$[24] = t10;
+	} else t10 = $[24];
+	return t10;
 }
 
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"DialogContainer.js","names":["Children","isValidElement","ReactNode","useState","Modal","WithCloseBehavior","DialogContext","CubeDialogContainerProps","children","onDismiss","arg","type","isDismissable","isOpen","isKeyboardDismissDisabled","DialogContainer","props","$","_c","t0","t1","hideOnClose","undefined","t2","childArray","toArray","length","Error","child","isActuallyOpened","t3","lastDialog","setLastDialog","t4","onClose","context","t5","t6","t7","t8","t9"],"sources":["../../../../src/components/overlays/Dialog/DialogContainer.tsx"],"sourcesContent":["import { Children, isValidElement, ReactNode, useState } 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 child = isValidElement(childArray[0]) ? childArray[0] : null;\n  const isActuallyOpened = typeof isOpen !== 'boolean' ? !!child : isOpen;\n  const [lastDialog, setLastDialog] = useState({ children, child });\n\n  // Children.toArray clones elements, so compare the source when retaining\n  // the last dialog to keep hideOnClose from remounting it or looping renders.\n  if ((child || isActuallyOpened) && children !== lastDialog.children) {\n    setLastDialog({ children, child });\n  }\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        <>\n          {child ??\n            (hideOnClose && !isActuallyOpened ? lastDialog.child : null)}\n        </>\n      </Modal>\n    </DialogContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAgCA,SAAOe,gBAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CACL,MAAA,EAAAV,UAAAG,MAAAQ,IAAAV,WAAAG,eAAAQ,IAAAN,2BAAAD,QAAAQ,gBAQIL;CANF,MAAAL,OAAAQ,OAAAG,SAAA,UAAAH;CAEA,MAAAP,gBAAAQ,OAAAE,SAAA,OAAAF;CAAoB,IAAAG;AAAA,KAAAN,EAAA,OAAAT,UAAA;EAMtB,MAAAgB,aAAmBxB,SAAQyB,QAASjB,SAAS;AAC7C,MAAIgB,WAAUE,SAAU,EACtB,OAAM,IAAIC,MAAM,wDAAwD;AAG5DJ,OAAAtB,eAAeuB,WAAU,GAA2B,GAApBA,WAAU,KAA1C;AAAoDP,IAAA,KAAAT;AAAAS,IAAA,KAAAM;OAAAA,MAAAN,EAAA;CAAlE,MAAAW,QAAcL;CACd,MAAAM,mBAAyB,OAAOhB,WAAW,YAAlB,CAA+B,CAACe,QAAhCf;CAA+C,IAAAiB;AAAA,KAAAb,EAAA,OAAAW,SAAAX,EAAA,OAAAT,UAAA;AAC3BsB,OAAA;GAAAtB;GAAAoB;GAAmB;AAAAX,IAAA,KAAAW;AAAAX,IAAA,KAAAT;AAAAS,IAAA,KAAAa;OAAAA,MAAAb,EAAA;CAAhE,MAAA,CAAAc,YAAAC,iBAAoC7B,SAAS2B,GAAoB;AAIjE,MAAKF,SAAAC,qBAA8BrB,aAAauB,WAAUvB,SACxDwB,eAAc;EAAAxB;EAAAoB;EAAmB,CAAC;CACnC,IAAAK;AAAA,KAAAhB,EAAA,OAAAY,oBAAAZ,EAAA,OAAAL,iBAAAK,EAAA,OAAAR,aAAAQ,EAAA,OAAAN,MAAA;AAEesB,OAAA;GAAAtB;GAAAuB,SAELzB;GAASG;GAAAC,QAEVgB;GACT;AAAAZ,IAAA,KAAAY;AAAAZ,IAAA,KAAAL;AAAAK,IAAA,KAAAR;AAAAQ,IAAA,KAAAN;AAAAM,IAAA,KAAAgB;OAAAA,MAAAhB,EAAA;CALD,MAAAkB,UAAgBF;CAiBD,MAAAG,KAAAxB,gBAAAH,YAAAa;CAGN,MAAAe,KAAAT,UACEP,eAAA,CAAgBQ,mBAAmBE,WAAUH,QAA7C;CAA2D,IAAAU;AAAA,KAAArB,EAAA,QAAAoB,IAAA;AAFhEC,OAAA,4CACGD,KAEA;AAAApB,IAAA,MAAAoB;AAAApB,IAAA,MAAAqB;OAAAA,MAAArB,EAAA;CAAA,IAAAsB;AAAA,KAAAtB,EAAA,QAAAI,eAAAJ,EAAA,QAAAY,oBAAAZ,EAAA,QAAAL,iBAAAK,EAAA,QAAAH,6BAAAG,EAAA,QAAAmB,MAAAnB,EAAA,QAAAqB,MAAArB,EAAA,QAAAN,MAAA;AAXL4B,OAAA,oBAAC;GACSV,QAAAA;GACFlB;GACOU;GACET;GACYE;GAClB,SAAAsB;aAETE;IAIM;AAAArB,IAAA,MAAAI;AAAAJ,IAAA,MAAAY;AAAAZ,IAAA,MAAAL;AAAAK,IAAA,MAAAH;AAAAG,IAAA,MAAAmB;AAAAnB,IAAA,MAAAqB;AAAArB,IAAA,MAAAN;AAAAM,IAAA,MAAAsB;OAAAA,MAAAtB,EAAA;CAAA,IAAAuB;AAAA,KAAAvB,EAAA,QAAAkB,WAAAlB,EAAA,QAAAsB,IAAA;AAbVC,OAAA,oBAAA,cAAA;GAA+BL,OAAAA;aAC7BI;IAauB;AAAAtB,IAAA,MAAAkB;AAAAlB,IAAA,MAAAsB;AAAAtB,IAAA,MAAAuB;OAAAA,MAAAvB,EAAA;AAAA,QAdzBuB"}
+{"version":3,"file":"DialogContainer.js","names":["Styles","Children","isValidElement","ReactNode","useState","Modal","Tray","WithCloseBehavior","DialogContext","CubeDialogContainerProps","children","onDismiss","arg","type","styles","isDismissable","isOpen","isKeyboardDismissDisabled","DialogContainer","props","$","_c","t0","t1","hideOnClose","undefined","t2","childArray","toArray","length","Error","child","isActuallyOpened","t3","lastDialog","setLastDialog","t4","onClose","context","OverlayComponent","t5","t6","t7","t8","t9","t10"],"sources":["../../../../src/components/overlays/Dialog/DialogContainer.tsx"],"sourcesContent":["import { Styles } from '@tenphi/tasty';\nimport { Children, isValidElement, ReactNode, useState } from 'react';\n\nimport { Modal } from '../Modal/Modal';\nimport { Tray } from '../Modal/Tray';\nimport { WithCloseBehavior } from '../Modal/types';\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' | 'tray' | 'fullscreen' | 'fullscreenTakeover' | 'panel';\n  /** Styles for the overlay content shell. Style the child Dialog separately. */\n  styles?: Styles;\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    styles,\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 child = isValidElement(childArray[0]) ? childArray[0] : null;\n  const isActuallyOpened = typeof isOpen !== 'boolean' ? !!child : isOpen;\n  const [lastDialog, setLastDialog] = useState({ children, child });\n\n  // Children.toArray clones elements, so compare the source when retaining\n  // the last dialog to keep hideOnClose from remounting it or looping renders.\n  if ((child || isActuallyOpened) && children !== lastDialog.children) {\n    setLastDialog({ children, child });\n  }\n\n  const context = {\n    type,\n    onClose: onDismiss,\n    isDismissable,\n    isOpen: isActuallyOpened,\n  };\n  const OverlayComponent = type === 'tray' ? Tray : Modal;\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      <OverlayComponent\n        isOpen={isActuallyOpened}\n        type={type === 'tray' ? undefined : type}\n        styles={styles}\n        hideOnClose={hideOnClose}\n        isDismissable={isDismissable}\n        isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n        onClose={isDismissable ? onDismiss : undefined}\n      >\n        <>\n          {child ??\n            (hideOnClose && !isActuallyOpened ? lastDialog.child : null)}\n        </>\n      </OverlayComponent>\n    </DialogContext.Provider>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
 import { _Title } from "../../content/Title.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { Button } from "../../actions/Button/Button.js";

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

@@ -21,12 +21,16 @@ interface CubeDialogTriggerProps extends Omit<OverlayTriggerProps, 'type'>, Posi
   mobileType?: 'modal' | 'tray' | 'fullscreen' | 'fullscreenTakeover' | 'panel' | 'popover';
   placement?: Placement;
   /**
-   * Whether a popover type Dialog's arrow should be hidden.
+   * Has no effect: popovers render no arrow.
+   * @deprecated Popovers never render an arrow, so there is nothing to hide.
    */
   hideArrow?: boolean;
-  /** The ref of the element the Dialog should visually attach itself to. Defaults to the trigger button if not defined. */
+  /** The ref of the element the Dialog should visually attach itself to. Defaults to the trigger button if not defined. A popover closes when this element scrolls, as one attached to its trigger does. */
   targetRef?: RefObject<HTMLElement | null>;
-  /** Whether passive dismissal (Escape or an outside click) can close the dialog. Explicit dialog actions can still close it. */
+  /**
+   * Whether passive dismissal (Escape or an outside click) can close the dialog. Explicit dialog actions can still close it.
+   * A popover that is not dismissable lets an outside press through to the control it lands on, including a text field, which can take focus. It stays open when another popover opens, and closes when a modal, tray, fullscreen or panel dialog opens from another `DialogTrigger`.
+   */
   isDismissable?: boolean;
   /** Whether pressing the escape key to close the dialog should be disabled. */
   isKeyboardDismissDisabled?: boolean;