@cube-dev/ui-kit 0.204.0 → 0.205.0

package/dist/components/fields/CommandTextArea/useCaretAnchor.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.205.0 | Cube Dev Team */
 import { getCaretRect } from "./caretPosition.js";
 import { c } from "react/compiler-runtime";
 import { useEffect, useLayoutEffect, useRef } from "react";

package/dist/components/fields/DatePicker/CalendarPopover.js

@@ -0,0 +1,281 @@
+/** @license MIT | @cube-dev/ui-kit v0.205.0 | Cube Dev Team */
+import { usePopoverSync } from "../../../utils/react/usePopoverSync.js";
+import { Popover as _Popover } from "../../overlays/Modal/Popover.js";
+import { c } from "react/compiler-runtime";
+import { tasty } from "@tenphi/tasty";
+import { useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DismissButton, FocusScope, useOverlayPosition } from "react-aria";
+import { getFocusableTreeWalker } from "@react-aria/focus";
+import { isFocusable } from "@react-aria/utils";
+import { useControlledState } from "@react-stately/utils";
+//#region src/components/fields/DatePicker/CalendarPopover.tsx
+const EDIT_KEYS = /* @__PURE__ */ new Set([
+	"ArrowUp",
+	"ArrowDown",
+	"PageUp",
+	"PageDown",
+	"Home",
+	"End",
+	"Backspace",
+	"Delete"
+]);
+const CalendarPopoverElement = tasty({
+	qa: "CalendarPopover",
+	role: "dialog",
+	styles: {
+		display: "flex",
+		flow: "column",
+		fill: "#surface",
+		border: true,
+		radius: "1cr",
+		shadow: "$shadow",
+		outline: 0,
+		width: "max-content",
+		height: "initial initial (50dvh - 5x)",
+		overflow: "auto"
+	}
+});
+/**
+* A calendar that opens from its date field instead of a button: a press in
+* the field, an edit of a date, or Alt+Down, which also moves focus into the
+* calendar. Tabbing into the field doesn't open it. While the dates are typed
+* it stays non-modal, and focus stays in the field.
+*/
+function useFieldCalendar(options) {
+	const $ = c(20);
+	const { fieldRef, isDisabled, isReadOnly } = options;
+	const [isOpen, setOpen] = useControlledState(options.isOpen, options.defaultOpen ?? false, options.onOpenChange);
+	const [shouldFocusCalendar, setShouldFocusCalendar] = useState(false);
+	const popoverRef = useRef(null);
+	const calendarRef = useRef(null);
+	const segmentRef = useRef(null);
+	const canOpen = !isDisabled && !isReadOnly;
+	let t0;
+	if ($[0] !== fieldRef) {
+		t0 = (target) => target instanceof Node && !!fieldRef.current?.contains(target);
+		$[0] = fieldRef;
+		$[1] = t0;
+	} else t0 = $[1];
+	const isInField = t0;
+	let t1;
+	if ($[2] !== canOpen || $[3] !== isOpen || $[4] !== setOpen) {
+		t1 = (focusCalendar) => {
+			if (!canOpen) return;
+			if (focusCalendar && isOpen) calendarRef.current?.focus();
+			setShouldFocusCalendar(focusCalendar);
+			setOpen(true);
+		};
+		$[2] = canOpen;
+		$[3] = isOpen;
+		$[4] = setOpen;
+		$[5] = t1;
+	} else t1 = $[5];
+	const open = t1;
+	let t2;
+	if ($[6] !== fieldRef || $[7] !== setOpen) {
+		t2 = () => {
+			if (popoverRef.current?.contains(document.activeElement)) (segmentRef.current?.isConnected ? segmentRef.current : fieldRef.current?.querySelector("[role=\"spinbutton\"]"))?.focus();
+			setShouldFocusCalendar(false);
+			setOpen(false);
+		};
+		$[6] = fieldRef;
+		$[7] = setOpen;
+		$[8] = t2;
+	} else t2 = $[8];
+	const close = t2;
+	let t3;
+	if ($[9] !== close || $[10] !== fieldRef || $[11] !== isInField || $[12] !== isOpen || $[13] !== open) {
+		t3 = {
+			onFocus(e) {
+				if (isInField(e.target)) segmentRef.current = e.target;
+			},
+			onClickCapture(e_0) {
+				if (isInField(e_0.target)) open(false);
+			},
+			onKeyDownCapture(e_1) {
+				if (!isInField(e_1.target)) return;
+				if (e_1.key === "Escape") {
+					if (!isOpen) return;
+					e_1.preventDefault();
+					e_1.stopPropagation();
+					close();
+					return;
+				}
+				if (e_1.altKey && (e_1.key === "ArrowDown" || e_1.key === "ArrowUp")) {
+					e_1.preventDefault();
+					e_1.stopPropagation();
+					open(true);
+					return;
+				}
+				if (e_1.altKey || e_1.ctrlKey || e_1.metaKey) return;
+				if (e_1.key.length === 1 || EDIT_KEYS.has(e_1.key)) open(false);
+			},
+			onBlur(e_2) {
+				if (!isOpen || !isInField(e_2.target)) return;
+				const next = e_2.relatedTarget;
+				if (!(next instanceof Node) || fieldRef.current?.contains(next) || popoverRef.current?.contains(next)) return;
+				close();
+			}
+		};
+		$[9] = close;
+		$[10] = fieldRef;
+		$[11] = isInField;
+		$[12] = isOpen;
+		$[13] = open;
+		$[14] = t3;
+	} else t3 = $[14];
+	const fieldProps = t3;
+	let t4;
+	if ($[15] !== close || $[16] !== fieldProps || $[17] !== isOpen || $[18] !== shouldFocusCalendar) {
+		t4 = {
+			isOpen,
+			shouldFocusCalendar,
+			close,
+			fieldProps,
+			popoverRef,
+			calendarRef
+		};
+		$[15] = close;
+		$[16] = fieldProps;
+		$[17] = isOpen;
+		$[18] = shouldFocusCalendar;
+		$[19] = t4;
+	} else t4 = $[19];
+	return t4;
+}
+/** The non-modal popover `useFieldCalendar` opens. */
+function CalendarPopover(props) {
+	const $ = c(35);
+	const { isOpen, onClose: close, fieldRef, popoverRef, anchorRef, placement, shouldFlip, dialogProps, children } = props;
+	const id = useId();
+	let t0;
+	if ($[0] !== close || $[1] !== fieldRef || $[2] !== id || $[3] !== isOpen || $[4] !== popoverRef) {
+		t0 = {
+			menuId: id,
+			isOpen,
+			onClose: close,
+			triggerRef: fieldRef,
+			containerRef: popoverRef,
+			dismissOnInnerButtonPress: false
+		};
+		$[0] = close;
+		$[1] = fieldRef;
+		$[2] = id;
+		$[3] = isOpen;
+		$[4] = popoverRef;
+		$[5] = t0;
+	} else t0 = $[5];
+	usePopoverSync(t0);
+	let t1;
+	if ($[6] !== anchorRef || $[7] !== close || $[8] !== isOpen || $[9] !== placement || $[10] !== popoverRef || $[11] !== shouldFlip) {
+		t1 = {
+			targetRef: anchorRef,
+			overlayRef: popoverRef,
+			placement,
+			shouldFlip,
+			offset: 8,
+			isOpen,
+			onClose: close
+		};
+		$[6] = anchorRef;
+		$[7] = close;
+		$[8] = isOpen;
+		$[9] = placement;
+		$[10] = popoverRef;
+		$[11] = shouldFlip;
+		$[12] = t1;
+	} else t1 = $[12];
+	const { overlayProps: positionProps, placement: actualPlacement } = useOverlayPosition(t1);
+	let t2;
+	if ($[13] !== close || $[14] !== fieldRef || $[15] !== isOpen) {
+		t2 = (el) => {
+			if (!isOpen) return false;
+			if (fieldRef.current?.contains(el)) return false;
+			if (el.closest("[data-popover-keep]")) return false;
+			if (el.closest("[data-popover-trigger]")) return false;
+			if (el.closest("[data-popover-dismiss]")) {
+				setTimeout(close, 0);
+				return false;
+			}
+			return true;
+		};
+		$[13] = close;
+		$[14] = fieldRef;
+		$[15] = isOpen;
+		$[16] = t2;
+	} else t2 = $[16];
+	const shouldCloseOnInteractOutside = t2;
+	const onMouseDown = _temp;
+	let t3;
+	if ($[17] !== close || $[18] !== popoverRef) {
+		t3 = (e_0) => {
+			const popover = popoverRef.current;
+			if (e_0.key !== "Tab" || !popover) return;
+			const walker = getFocusableTreeWalker(popover, { tabbable: true });
+			const first = walker.firstChild();
+			walker.currentNode = popover;
+			const last = walker.lastChild();
+			if (document.activeElement === (e_0.shiftKey ? first : last)) {
+				e_0.preventDefault();
+				close();
+			}
+		};
+		$[17] = close;
+		$[18] = popoverRef;
+		$[19] = t3;
+	} else t3 = $[19];
+	const onKeyDown = t3;
+	const t4 = actualPlacement ?? void 0;
+	let t5;
+	if ($[20] !== close) {
+		t5 = /* @__PURE__ */ jsx(DismissButton, { onDismiss: close });
+		$[20] = close;
+		$[21] = t5;
+	} else t5 = $[21];
+	let t6;
+	if ($[22] !== children || $[23] !== dialogProps || $[24] !== onKeyDown || $[25] !== t5) {
+		t6 = /* @__PURE__ */ jsx(FocusScope, { children: /* @__PURE__ */ jsxs(CalendarPopoverElement, {
+			...dialogProps,
+			onMouseDown,
+			onKeyDown,
+			children: [children, t5]
+		}) });
+		$[22] = children;
+		$[23] = dialogProps;
+		$[24] = onKeyDown;
+		$[25] = t5;
+		$[26] = t6;
+	} else t6 = $[26];
+	let t7;
+	if ($[27] !== close || $[28] !== isOpen || $[29] !== popoverRef || $[30] !== positionProps.style || $[31] !== shouldCloseOnInteractOutside || $[32] !== t4 || $[33] !== t6) {
+		t7 = /* @__PURE__ */ jsx(_Popover, {
+			ref: popoverRef,
+			isNonModal: true,
+			shouldCloseOnBlur: true,
+			isOpen,
+			style: positionProps.style,
+			placement: t4,
+			shouldCloseOnInteractOutside,
+			onClose: close,
+			children: t6
+		});
+		$[27] = close;
+		$[28] = isOpen;
+		$[29] = popoverRef;
+		$[30] = positionProps.style;
+		$[31] = shouldCloseOnInteractOutside;
+		$[32] = t4;
+		$[33] = t6;
+		$[34] = t7;
+	} else t7 = $[34];
+	return t7;
+}
+function _temp(e) {
+	for (let element = e.target; element && element !== e.currentTarget; element = element.parentElement) if (isFocusable(element)) return;
+	e.preventDefault();
+}
+//#endregion
+export { CalendarPopover, useFieldCalendar };
+
+//# sourceMappingURL=CalendarPopover.js.map

package/dist/components/fields/DatePicker/CalendarPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarPopover.js","names":["getFocusableTreeWalker","isFocusable","useControlledState","FocusableRefValue","tasty","FocusEvent","HTMLAttributes","KeyboardEvent","MouseEvent","ReactNode","RefObject","useId","useRef","useState","DismissButton","FocusScope","Placement","useOverlayPosition","usePopoverSync","Popover","EDIT_KEYS","Set","CalendarPopoverElement","qa","role","styles","display","flow","fill","border","radius","shadow","outline","width","height","overflow","FieldCalendarOptions","fieldRef","HTMLElement","isDisabled","isReadOnly","isOpen","defaultOpen","onOpenChange","useFieldCalendar","options","$","_c","setOpen","shouldFocusCalendar","setShouldFocusCalendar","popoverRef","calendarRef","segmentRef","canOpen","t0","target","Node","current","contains","isInField","t1","focusCalendar","focus","open","t2","document","activeElement","segment","isConnected","querySelector","close","t3","onFocus","e","onClickCapture","e_0","onKeyDownCapture","e_1","key","preventDefault","stopPropagation","altKey","ctrlKey","metaKey","length","has","onBlur","e_2","next","relatedTarget","fieldProps","t4","CalendarPopoverProps","onClose","HTMLDivElement","anchorRef","placement","shouldFlip","dialogProps","children","CalendarPopover","props","id","menuId","triggerRef","containerRef","dismissOnInnerButtonPress","targetRef","overlayRef","offset","overlayProps","positionProps","actualPlacement","el","closest","setTimeout","shouldCloseOnInteractOutside","onMouseDown","_temp","popover","walker","tabbable","first","firstChild","currentNode","last","lastChild","shiftKey","onKeyDown","undefined","t5","t6","t7","style","element","Element","currentTarget","parentElement","_c","Popover"],"sources":["../../../../src/components/fields/DatePicker/CalendarPopover.tsx"],"sourcesContent":["import { getFocusableTreeWalker } from '@react-aria/focus';\nimport { isFocusable } from '@react-aria/utils';\nimport { useControlledState } from '@react-stately/utils';\nimport { FocusableRefValue } from '@react-types/shared';\nimport { tasty } from '@tenphi/tasty';\nimport {\n  FocusEvent,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n  RefObject,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  DismissButton,\n  FocusScope,\n  Placement,\n  useOverlayPosition,\n} from 'react-aria';\n\nimport { usePopoverSync } from '../../../utils/react/usePopoverSync';\nimport { Popover } from '../../overlays/Modal/Popover';\n\n// Keys that change a segment's value: typing goes through any one-character\n// key, the rest are the spin and clear keys.\nconst EDIT_KEYS = new Set([\n  'ArrowUp',\n  'ArrowDown',\n  'PageUp',\n  'PageDown',\n  'Home',\n  'End',\n  'Backspace',\n  'Delete',\n]);\n\nconst CalendarPopoverElement = tasty({\n  qa: 'CalendarPopover',\n  role: 'dialog',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    fill: '#surface',\n    border: true,\n    radius: '1cr',\n    shadow: '$shadow',\n    outline: 0,\n    width: 'max-content',\n    height: 'initial initial (50dvh - 5x)',\n    overflow: 'auto',\n  },\n});\n\nexport interface FieldCalendarOptions {\n  /** The field the calendar opens from. */\n  fieldRef: RefObject<HTMLElement | null>;\n  isDisabled?: boolean;\n  isReadOnly?: boolean;\n  isOpen?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * A calendar that opens from its date field instead of a button: a press in\n * the field, an edit of a date, or Alt+Down, which also moves focus into the\n * calendar. Tabbing into the field doesn't open it. While the dates are typed\n * it stays non-modal, and focus stays in the field.\n */\nexport function useFieldCalendar(options: FieldCalendarOptions) {\n  let { fieldRef, isDisabled, isReadOnly } = options;\n  let [isOpen, setOpen] = useControlledState(\n    options.isOpen,\n    options.defaultOpen ?? false,\n    options.onOpenChange,\n  );\n  // Opened with Alt+Down, the calendar takes focus as it mounts.\n  let [shouldFocusCalendar, setShouldFocusCalendar] = useState(false);\n  let popoverRef = useRef<HTMLDivElement>(null);\n  let calendarRef = useRef<FocusableRefValue<HTMLElement>>(null);\n  // The segment focus goes back to when it leaves the calendar.\n  let segmentRef = useRef<HTMLElement | null>(null);\n  let canOpen = !isDisabled && !isReadOnly;\n\n  let isInField = (target: EventTarget | null) =>\n    target instanceof Node && !!fieldRef.current?.contains(target);\n\n  let open = (focusCalendar: boolean) => {\n    if (!canOpen) return;\n\n    if (focusCalendar && isOpen) calendarRef.current?.focus();\n\n    setShouldFocusCalendar(focusCalendar);\n    setOpen(true);\n  };\n\n  let close = () => {\n    // Before the calendar unmounts and drops focus on the page.\n    if (popoverRef.current?.contains(document.activeElement)) {\n      let segment = segmentRef.current?.isConnected\n        ? segmentRef.current\n        : fieldRef.current?.querySelector<HTMLElement>('[role=\"spinbutton\"]');\n\n      segment?.focus();\n    }\n\n    setShouldFocusCalendar(false);\n    setOpen(false);\n  };\n\n  let fieldProps: HTMLAttributes<HTMLElement> = {\n    onFocus(e: FocusEvent) {\n      if (isInField(e.target)) segmentRef.current = e.target as HTMLElement;\n    },\n    // Capture, since each date's own press handling stops the click there.\n    onClickCapture(e: MouseEvent) {\n      if (isInField(e.target)) open(false);\n    },\n    // Capture, so the keys reach this before the segments and React Aria's\n    // own Alt+Down handling take them.\n    onKeyDownCapture(e: KeyboardEvent) {\n      if (!isInField(e.target)) return;\n\n      if (e.key === 'Escape') {\n        if (!isOpen) return;\n\n        // A surrounding dialog stays open.\n        e.preventDefault();\n        e.stopPropagation();\n        close();\n\n        return;\n      }\n\n      if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {\n        e.preventDefault();\n        e.stopPropagation();\n        open(true);\n\n        return;\n      }\n\n      if (e.altKey || e.ctrlKey || e.metaKey) return;\n\n      if (e.key.length === 1 || EDIT_KEYS.has(e.key)) open(false);\n    },\n    onBlur(e: FocusEvent) {\n      if (!isOpen || !isInField(e.target)) return;\n\n      let next = e.relatedTarget;\n\n      // Focus that goes nowhere, to another window or a press on the page,\n      // leaves it open: a press outside closes it on its own.\n      if (\n        !(next instanceof Node) ||\n        fieldRef.current?.contains(next) ||\n        popoverRef.current?.contains(next)\n      ) {\n        return;\n      }\n\n      close();\n    },\n  };\n\n  return {\n    isOpen,\n    shouldFocusCalendar,\n    close,\n    fieldProps,\n    popoverRef,\n    calendarRef,\n  };\n}\n\nexport interface CalendarPopoverProps {\n  isOpen: boolean;\n  onClose: () => void;\n  /** The field the calendar opens from: a press there keeps it open. */\n  fieldRef: RefObject<HTMLElement | null>;\n  popoverRef: RefObject<HTMLDivElement | null>;\n  /** What the popover is positioned against. */\n  anchorRef: RefObject<HTMLElement | null>;\n  placement: Placement;\n  shouldFlip?: boolean;\n  /** React Aria's dialog props: the id that keeps the field focused while focus is in here, and its label. */\n  dialogProps: HTMLAttributes<HTMLElement>;\n  children: ReactNode;\n}\n\n/** The non-modal popover `useFieldCalendar` opens. */\nexport function CalendarPopover(props: CalendarPopoverProps) {\n  let {\n    isOpen,\n    onClose: close,\n    fieldRef,\n    popoverRef,\n    anchorRef,\n    placement,\n    shouldFlip,\n    dialogProps,\n    children,\n  } = props;\n  let id = useId();\n\n  usePopoverSync({\n    menuId: id,\n    isOpen,\n    onClose: close,\n    triggerRef: fieldRef,\n    containerRef: popoverRef,\n    // The calendar's own buttons page through months.\n    dismissOnInnerButtonPress: false,\n  });\n\n  let { overlayProps: positionProps, placement: actualPlacement } =\n    useOverlayPosition({\n      targetRef: anchorRef,\n      overlayRef: popoverRef,\n      placement,\n      shouldFlip,\n      offset: 8,\n      isOpen,\n      onClose: close,\n    });\n\n  let shouldCloseOnInteractOutside = (el: Element) => {\n    // While it animates out, a press goes through to whatever it lands on.\n    if (!isOpen) return false;\n\n    // The field opens the calendar, so a press there keeps it open.\n    if (fieldRef.current?.contains(el)) return false;\n    if (el.closest('[data-popover-keep]')) return false;\n    // Another popover's trigger opens its popover, which closes this one.\n    if (el.closest('[data-popover-trigger]')) return false;\n\n    // A button's own press runs first, then the calendar closes.\n    if (el.closest('[data-popover-dismiss]')) {\n      setTimeout(close, 0);\n\n      return false;\n    }\n\n    return true;\n  };\n\n  // A press on a part of the calendar that takes no focus keeps focus where it\n  // is: in the date being typed, or on the calendar's focused day.\n  let onMouseDown = (e: MouseEvent) => {\n    for (\n      let element = e.target as Element | null;\n      element && element !== e.currentTarget;\n      element = element.parentElement\n    ) {\n      if (isFocusable(element)) return;\n    }\n\n    e.preventDefault();\n  };\n\n  // Tab off either end of the calendar goes back to the field.\n  let onKeyDown = (e: KeyboardEvent) => {\n    let popover = popoverRef.current;\n\n    if (e.key !== 'Tab' || !popover) return;\n\n    let walker = getFocusableTreeWalker(popover, { tabbable: true });\n    let first = walker.firstChild();\n\n    walker.currentNode = popover;\n\n    let last = walker.lastChild();\n\n    if (document.activeElement === (e.shiftKey ? first : last)) {\n      e.preventDefault();\n      close();\n    }\n  };\n\n  return (\n    <Popover\n      ref={popoverRef}\n      isNonModal\n      shouldCloseOnBlur\n      isOpen={isOpen}\n      // oxlint-disable-next-line tasty/no-style-prop -- React Aria's overlay positioning computes these coordinates\n      style={positionProps.style}\n      placement={actualPlacement ?? undefined}\n      shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}\n      onClose={close}\n    >\n      <FocusScope>\n        <CalendarPopoverElement\n          {...dialogProps}\n          onMouseDown={onMouseDown}\n          onKeyDown={onKeyDown}\n        >\n          {children}\n          <DismissButton onDismiss={close} />\n        </CalendarPopoverElement>\n      </FocusScope>\n    </Popover>\n  );\n}\n"],"mappings":"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"}

package/dist/components/fields/DatePicker/DateInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.205.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";

package/dist/components/fields/DatePicker/DateInputBase.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.205.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";

package/dist/components/fields/DatePicker/DatePicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.205.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { Dialog } from "../../overlays/Dialog/Dialog.js";
@@ -57,22 +57,23 @@ function DatePicker(rawProps, ref) {
 	const timeMaxValue = props.maxValue && "hour" in props.maxValue ? props.maxValue : void 0;
 	const timeGranularity = state.granularity === "hour" || state.granularity === "minute" || state.granularity === "second" ? state.granularity : null;
 	const showTimeField = !!timeGranularity;
-	const t1 = props.isReadOnly;
-	const t2 = props.shouldFlip;
-	let t3;
+	const t1 = props.inputStyles;
+	const t2 = props.isReadOnly;
+	const t3 = props.shouldFlip;
+	let t4;
 	if ($[1] !== buttonProps || $[2] !== focusPropsButton) {
-		t3 = mergeProps$1(buttonProps, focusPropsButton);
+		t4 = mergeProps$1(buttonProps, focusPropsButton);
 		$[1] = buttonProps;
 		$[2] = focusPropsButton;
-		$[3] = t3;
-	} else t3 = $[3];
-	let t4;
+		$[3] = t4;
+	} else t4 = $[3];
+	let t5;
 	if ($[4] !== calendarProps) {
-		t4 = /* @__PURE__ */ jsx(_Calendar, { ...calendarProps });
+		t5 = /* @__PURE__ */ jsx(_Calendar, { ...calendarProps });
 		$[4] = calendarProps;
-		$[5] = t4;
-	} else t4 = $[5];
-	const t5 = showTimeField && /* @__PURE__ */ jsx(_TimeInput, {
+		$[5] = t5;
+	} else t5 = $[5];
+	const t6 = showTimeField && /* @__PURE__ */ jsx(_TimeInput, {
 		label: t("datePicker.time", "Time"),
 		value: state.timeValue,
 		placeholderValue: timePlaceholder,
@@ -83,19 +84,19 @@ function DatePicker(rawProps, ref) {
 		hideTimeZone: props.hideTimeZone,
 		onChange: state.setTimeValue
 	});
-	let t6;
-	if ($[6] !== dialogProps || $[7] !== t4 || $[8] !== t5) {
-		t6 = /* @__PURE__ */ jsxs(Dialog, {
+	let t7;
+	if ($[6] !== dialogProps || $[7] !== t5 || $[8] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Dialog, {
 			...dialogProps,
 			width: "max-content",
 			overflow: "auto",
-			children: [t4, t5]
+			children: [t5, t6]
 		});
 		$[6] = dialogProps;
-		$[7] = t4;
-		$[8] = t5;
-		$[9] = t6;
-	} else t6 = $[9];
+		$[7] = t5;
+		$[8] = t6;
+		$[9] = t7;
+	} else t7 = $[9];
 	const component = /* @__PURE__ */ jsx(_DateInputBase, {
 		ref: targetRef,
 		wrapperRef: domRef,
@@ -103,9 +104,10 @@ function DatePicker(rawProps, ref) {
 		inputType: "datepicker",
 		autoFocus,
 		styles,
+		inputStyles: t1,
 		disableFocusRing: isFocusedButton,
 		isDisabled,
-		isReadOnly: t1,
+		isReadOnly: t2,
 		isInvalid,
 		isValid,
 		size,
@@ -117,13 +119,13 @@ function DatePicker(rawProps, ref) {
 			placement: props.placement ?? "bottom right",
 			targetRef: props.targetRef ?? targetRef,
 			isOpen,
-			shouldFlip: t2,
+			shouldFlip: t3,
 			onOpenChange: setOpen,
 			children: [/* @__PURE__ */ jsx(DatePickerButton, {
 				size,
-				...t3,
+				...t4,
 				isDisabled
-			}), t6]
+			}), t7]
 		}),
 		children: /* @__PURE__ */ jsx(DatePickerInput, {
 			useLocale: useLocaleProp,

package/dist/components/fields/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","names":["FocusableRef","BaseProps","Styles","forwardRef","RefObject","useRef","AriaDatePickerProps","DateValue","Placement","useDatePicker","useFocusRing","useDatePickerState","useI18n","FieldBaseProps","mergeProps","useFieldProps","wrapWithField","FieldLayoutStyleProps","splitFieldLayout","Calendar","Dialog","DialogTrigger","DateInputBase","DatePickerButton","DatePickerInput","DEFAULT_DATE_PROPS","TimeInput","DateFieldBase","useFocusManagerRef","CubeDatePickerProps","Omit","T","wrapperStyles","inputStyles","triggerStyles","styles","size","maxVisibleMonths","shouldFlip","targetRef","HTMLElement","placement","useLocale","DatePicker","rawProps","ref","$","_c","t","t0","Symbol","for","defaultValidationTrigger","props","Object","assign","fieldLayout","overStyles","qa","placeholderValue","isDisabled","isInvalid","isValid","useLocaleProp","autoFocus","state","shouldCloseOnSelect","hasTime","isOpen","setOpen","domRef","focusProps","within","isTextInput","isFocused","isFocusedButton","focusPropsButton","groupProps","labelProps","fieldProps","buttonProps","dialogProps","calendarProps","placeholder","undefined","timePlaceholder","timeMinValue","minValue","timeMaxValue","maxValue","timeGranularity","granularity","showTimeField","t1","isReadOnly","t2","t3","t4","t5","timeValue","hourCycle","hideTimeZone","setTimeValue","t6","component","field","_DatePicker","displayName","_c","mergeProps","Calendar","TimeInput","DateInputBase"],"sources":["../../../../src/components/fields/DatePicker/DatePicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { BaseProps, Styles } from '@tenphi/tasty';\nimport { forwardRef, RefObject, useRef } from 'react';\nimport {\n  AriaDatePickerProps,\n  DateValue,\n  Placement,\n  useDatePicker,\n  useFocusRing,\n} from 'react-aria';\nimport { useDatePickerState } from 'react-stately';\n\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport {\n  FieldLayoutStyleProps,\n  splitFieldLayout,\n} from '../../form/field-layout';\nimport { Calendar } from '../../other/Calendar/Calendar';\nimport { Dialog } from '../../overlays/Dialog/Dialog';\nimport { DialogTrigger } from '../../overlays/Dialog/DialogTrigger';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { DatePickerInput } from './DatePickerInput';\nimport { DEFAULT_DATE_PROPS } from './props';\nimport { TimeInput } from './TimeInput';\nimport { DateFieldBase } from './types';\nimport { useFocusManagerRef } from './utils';\n\nexport interface CubeDatePickerProps<T extends DateValue = DateValue>\n  extends\n    Omit<\n      AriaDatePickerProps<T>,\n      'errorMessage' | 'form' | 'name' | keyof DateFieldBase<T>\n    >,\n    DateFieldBase<T>,\n    BaseProps,\n    FieldLayoutStyleProps,\n    FieldBaseProps<T | null | undefined> {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  triggerStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  maxVisibleMonths?: number;\n  shouldFlip?: boolean;\n  /**\n   * The ref of the element the popover should visually attach itself to.\n   * Defaults to the field wrapper.\n   *\n   * Forwarded to `DialogTrigger`, so the anchor also becomes what outside-click\n   * dismissal treats as the trigger.\n   */\n  targetRef?: RefObject<HTMLElement | null>;\n  /**\n   * Placement of the popover relative to the anchor.\n   * Accepts React Aria's `Placement` strings (e.g. `'bottom start'`,\n   * `'top start'`, `'right top'`, `'left top'`).\n   * @default 'bottom right'\n   */\n  placement?: Placement;\n  useLocale?: boolean;\n}\n\nfunction DatePicker<T extends DateValue>(\n  rawProps: CubeDatePickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n\n  let props = useFieldProps(rawProps, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  // `wrapperStyles` styles the same box as `styles` and wins over it.\n  const fieldLayout = splitFieldLayout(props, {\n    overStyles: props.wrapperStyles,\n  });\n  const styles = fieldLayout.styles;\n\n  let {\n    qa,\n    size,\n    placeholderValue,\n    isDisabled,\n    isInvalid,\n    isValid,\n    useLocale: useLocaleProp,\n    autoFocus,\n  } = props;\n  let targetRef = useRef<HTMLDivElement>(null);\n  let state = useDatePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime,\n  });\n  let { isOpen, setOpen } = state;\n\n  let domRef = useRef<HTMLDivElement>(null);\n\n  useFocusManagerRef(ref, domRef);\n\n  let { isFocused, focusProps } = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus,\n  });\n\n  let { isFocused: isFocusedButton, focusProps: focusPropsButton } =\n    useFocusRing({\n      within: false,\n      isTextInput: false,\n      autoFocus,\n    });\n\n  let {\n    groupProps,\n    labelProps,\n    fieldProps,\n    buttonProps,\n    dialogProps,\n    calendarProps,\n  } = useDatePicker(props, state, targetRef);\n\n  let placeholder: DateValue | undefined = placeholderValue ?? undefined;\n  let timePlaceholder =\n    placeholder && 'hour' in placeholder ? placeholder : undefined;\n  let timeMinValue =\n    props.minValue && 'hour' in props.minValue ? props.minValue : undefined;\n  let timeMaxValue =\n    props.maxValue && 'hour' in props.maxValue ? props.maxValue : undefined;\n  let timeGranularity =\n    state.granularity === 'hour' ||\n    state.granularity === 'minute' ||\n    state.granularity === 'second'\n      ? state.granularity\n      : null;\n  let showTimeField = !!timeGranularity;\n  // let visibleMonths = useVisibleMonths(maxVisibleMonths);\n\n  const component = (\n    <DateInputBase\n      ref={targetRef}\n      wrapperRef={domRef}\n      qa={qa || 'DatePicker'}\n      inputType=\"datepicker\"\n      autoFocus={autoFocus}\n      styles={styles}\n      disableFocusRing={isFocusedButton}\n      isDisabled={isDisabled}\n      isReadOnly={props.isReadOnly}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      size={size}\n      fieldProps={groupProps}\n      {...focusProps}\n      suffix={\n        <DialogTrigger\n          hideArrow\n          type=\"popover\"\n          placement={props.placement ?? 'bottom right'}\n          targetRef={props.targetRef ?? targetRef}\n          isOpen={isOpen}\n          shouldFlip={props.shouldFlip}\n          onOpenChange={setOpen}\n        >\n          <DatePickerButton\n            size={size}\n            {...mergeProps(buttonProps, focusPropsButton)}\n            isDisabled={isDisabled}\n          />\n          <Dialog {...dialogProps} width=\"max-content\" overflow=\"auto\">\n            <Calendar {...calendarProps} />\n            {showTimeField && (\n              <TimeInput\n                label={t('datePicker.time', 'Time')}\n                value={state.timeValue}\n                placeholderValue={timePlaceholder}\n                granularity={timeGranularity}\n                minValue={timeMinValue}\n                maxValue={timeMaxValue}\n                hourCycle={props.hourCycle}\n                hideTimeZone={props.hideTimeZone}\n                onChange={state.setTimeValue}\n              />\n            )}\n          </Dialog>\n        </DialogTrigger>\n      }\n    >\n      <DatePickerInput useLocale={useLocaleProp} {...fieldProps} />\n    </DateInputBase>\n  );\n\n  return wrapWithField(component, {\n    ...props,\n    ...fieldLayout.field,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _DatePicker = forwardRef(DatePicker);\n\n_DatePicker.displayName = 'DatePicker';\n\nexport { _DatePicker as DatePicker };\n"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","names":["FocusableRef","BaseProps","Styles","forwardRef","RefObject","useRef","AriaDatePickerProps","DateValue","Placement","useDatePicker","useFocusRing","useDatePickerState","useI18n","FieldBaseProps","mergeProps","useFieldProps","wrapWithField","FieldLayoutStyleProps","splitFieldLayout","Calendar","Dialog","DialogTrigger","DateInputBase","DatePickerButton","DatePickerInput","DEFAULT_DATE_PROPS","TimeInput","DateFieldBase","useFocusManagerRef","CubeDatePickerProps","Omit","T","wrapperStyles","inputStyles","triggerStyles","styles","size","maxVisibleMonths","shouldFlip","targetRef","HTMLElement","placement","useLocale","DatePicker","rawProps","ref","$","_c","t","t0","Symbol","for","defaultValidationTrigger","props","Object","assign","fieldLayout","overStyles","qa","placeholderValue","isDisabled","isInvalid","isValid","useLocaleProp","autoFocus","state","shouldCloseOnSelect","hasTime","isOpen","setOpen","domRef","focusProps","within","isTextInput","isFocused","isFocusedButton","focusPropsButton","groupProps","labelProps","fieldProps","buttonProps","dialogProps","calendarProps","placeholder","undefined","timePlaceholder","timeMinValue","minValue","timeMaxValue","maxValue","timeGranularity","granularity","showTimeField","t1","t2","isReadOnly","t3","t4","t5","t6","timeValue","hourCycle","hideTimeZone","setTimeValue","t7","component","field","_DatePicker","displayName","_c","mergeProps","Calendar","TimeInput","DateInputBase"],"sources":["../../../../src/components/fields/DatePicker/DatePicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { BaseProps, Styles } from '@tenphi/tasty';\nimport { forwardRef, RefObject, useRef } from 'react';\nimport {\n  AriaDatePickerProps,\n  DateValue,\n  Placement,\n  useDatePicker,\n  useFocusRing,\n} from 'react-aria';\nimport { useDatePickerState } from 'react-stately';\n\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport {\n  FieldLayoutStyleProps,\n  splitFieldLayout,\n} from '../../form/field-layout';\nimport { Calendar } from '../../other/Calendar/Calendar';\nimport { Dialog } from '../../overlays/Dialog/Dialog';\nimport { DialogTrigger } from '../../overlays/Dialog/DialogTrigger';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { DatePickerInput } from './DatePickerInput';\nimport { DEFAULT_DATE_PROPS } from './props';\nimport { TimeInput } from './TimeInput';\nimport { DateFieldBase } from './types';\nimport { useFocusManagerRef } from './utils';\n\nexport interface CubeDatePickerProps<T extends DateValue = DateValue>\n  extends\n    Omit<\n      AriaDatePickerProps<T>,\n      'errorMessage' | 'form' | 'name' | keyof DateFieldBase<T>\n    >,\n    DateFieldBase<T>,\n    BaseProps,\n    FieldLayoutStyleProps,\n    FieldBaseProps<T | null | undefined> {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  triggerStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  maxVisibleMonths?: number;\n  shouldFlip?: boolean;\n  /**\n   * The ref of the element the popover should visually attach itself to.\n   * Defaults to the field wrapper.\n   *\n   * Forwarded to `DialogTrigger`, so the anchor also becomes what outside-click\n   * dismissal treats as the trigger.\n   */\n  targetRef?: RefObject<HTMLElement | null>;\n  /**\n   * Placement of the popover relative to the anchor.\n   * Accepts React Aria's `Placement` strings (e.g. `'bottom start'`,\n   * `'top start'`, `'right top'`, `'left top'`).\n   * @default 'bottom right'\n   */\n  placement?: Placement;\n  useLocale?: boolean;\n}\n\nfunction DatePicker<T extends DateValue>(\n  rawProps: CubeDatePickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n\n  let props = useFieldProps(rawProps, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  // `wrapperStyles` styles the same box as `styles` and wins over it.\n  const fieldLayout = splitFieldLayout(props, {\n    overStyles: props.wrapperStyles,\n  });\n  const styles = fieldLayout.styles;\n\n  let {\n    qa,\n    size,\n    placeholderValue,\n    isDisabled,\n    isInvalid,\n    isValid,\n    useLocale: useLocaleProp,\n    autoFocus,\n  } = props;\n  let targetRef = useRef<HTMLDivElement>(null);\n  let state = useDatePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime,\n  });\n  let { isOpen, setOpen } = state;\n\n  let domRef = useRef<HTMLDivElement>(null);\n\n  useFocusManagerRef(ref, domRef);\n\n  let { isFocused, focusProps } = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus,\n  });\n\n  let { isFocused: isFocusedButton, focusProps: focusPropsButton } =\n    useFocusRing({\n      within: false,\n      isTextInput: false,\n      autoFocus,\n    });\n\n  let {\n    groupProps,\n    labelProps,\n    fieldProps,\n    buttonProps,\n    dialogProps,\n    calendarProps,\n  } = useDatePicker(props, state, targetRef);\n\n  let placeholder: DateValue | undefined = placeholderValue ?? undefined;\n  let timePlaceholder =\n    placeholder && 'hour' in placeholder ? placeholder : undefined;\n  let timeMinValue =\n    props.minValue && 'hour' in props.minValue ? props.minValue : undefined;\n  let timeMaxValue =\n    props.maxValue && 'hour' in props.maxValue ? props.maxValue : undefined;\n  let timeGranularity =\n    state.granularity === 'hour' ||\n    state.granularity === 'minute' ||\n    state.granularity === 'second'\n      ? state.granularity\n      : null;\n  let showTimeField = !!timeGranularity;\n  // let visibleMonths = useVisibleMonths(maxVisibleMonths);\n\n  const component = (\n    <DateInputBase\n      ref={targetRef}\n      wrapperRef={domRef}\n      qa={qa || 'DatePicker'}\n      inputType=\"datepicker\"\n      autoFocus={autoFocus}\n      styles={styles}\n      inputStyles={props.inputStyles}\n      disableFocusRing={isFocusedButton}\n      isDisabled={isDisabled}\n      isReadOnly={props.isReadOnly}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      size={size}\n      fieldProps={groupProps}\n      {...focusProps}\n      suffix={\n        <DialogTrigger\n          hideArrow\n          type=\"popover\"\n          placement={props.placement ?? 'bottom right'}\n          targetRef={props.targetRef ?? targetRef}\n          isOpen={isOpen}\n          shouldFlip={props.shouldFlip}\n          onOpenChange={setOpen}\n        >\n          <DatePickerButton\n            size={size}\n            {...mergeProps(buttonProps, focusPropsButton)}\n            isDisabled={isDisabled}\n          />\n          <Dialog {...dialogProps} width=\"max-content\" overflow=\"auto\">\n            <Calendar {...calendarProps} />\n            {showTimeField && (\n              <TimeInput\n                label={t('datePicker.time', 'Time')}\n                value={state.timeValue}\n                placeholderValue={timePlaceholder}\n                granularity={timeGranularity}\n                minValue={timeMinValue}\n                maxValue={timeMaxValue}\n                hourCycle={props.hourCycle}\n                hideTimeZone={props.hideTimeZone}\n                onChange={state.setTimeValue}\n              />\n            )}\n          </Dialog>\n        </DialogTrigger>\n      }\n    >\n      <DatePickerInput useLocale={useLocaleProp} {...fieldProps} />\n    </DateInputBase>\n  );\n\n  return wrapWithField(component, {\n    ...props,\n    ...fieldLayout.field,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _DatePicker = forwardRef(DatePicker);\n\n_DatePicker.displayName = 'DatePicker';\n\nexport { _DatePicker as DatePicker };\n"],"mappings":"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"}

package/dist/components/fields/DatePicker/DatePickerButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.205.0 | Cube Dev Team */
 import { ItemActionProvider } from "../../actions/ItemActionContext.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { CalendarIcon } from "../../../icons/CalendarIcon.js";

package/dist/components/fields/DatePicker/DatePickerElement.js

@@ -1,9 +1,11 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.205.0 | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { tasty } from "@tenphi/tasty";
 //#region src/components/fields/DatePicker/DatePickerElement.tsx
 const DatePickerElement = tasty(Space, { styles: {
-	gap: 0,
+	flow: "row wrap",
+	gap: ".5x 0",
+	minWidth: "min-content",
 	outline: {
 		"": "#purple-03.0",
 		focused: "#purple-03"

package/dist/components/fields/DatePicker/DatePickerElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerElement.js","names":["tasty","Space","DatePickerElement","styles","gap","outline","focused","radius"],"sources":["../../../../src/components/fields/DatePicker/DatePickerElement.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { Space } from '../../layout/Space';\n\nexport const DatePickerElement = tasty(Space, {\n  styles: {\n    gap: 0,\n    outline: {\n      '': '#purple-03.0',\n      focused: '#purple-03',\n    },\n    radius: true,\n  },\n});\n"],"mappings":";;;;AAIA,MAAaE,oBAAoBF,MAAMC,OAAO,EAC5CE,QAAQ;CACNC,KAAK;CACLC,SAAS;EACP,IAAI;EACJC,SAAS;CACX;CACAC,QAAQ;AACV,EACF,CAAC"}
+{"version":3,"file":"DatePickerElement.js","names":["tasty","Space","DatePickerElement","styles","flow","gap","minWidth","outline","focused","radius"],"sources":["../../../../src/components/fields/DatePicker/DatePickerElement.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { Space } from '../../layout/Space';\n\nexport const DatePickerElement = tasty(Space, {\n  styles: {\n    // Too narrow for one row, the end date wraps under the start date, and the\n    // picker is never narrower than its widest row.\n    flow: 'row wrap',\n    gap: '.5x 0',\n    minWidth: 'min-content',\n    outline: {\n      '': '#purple-03.0',\n      focused: '#purple-03',\n    },\n    radius: true,\n  },\n});\n"],"mappings":";;;;AAIA,MAAaE,oBAAoBF,MAAMC,OAAO,EAC5CE,QAAQ;CAGNC,MAAM;CACNC,KAAK;CACLC,UAAU;CACVC,SAAS;EACP,IAAI;EACJC,SAAS;CACX;CACAC,QAAQ;AACV,EACF,CAAC"}

package/dist/components/fields/DatePicker/DatePickerInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.205.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { DatePickerSegment } from "./DatePickerSegment.js";
 import { formatSegments } from "./utils.js";

package/dist/components/fields/DatePicker/DatePickerSegment.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.205.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";

package/dist/components/fields/DatePicker/DateRangePicker.d.ts

@@ -33,6 +33,16 @@ export interface CubeDateRangePickerProps<T extends DateValue = DateValue> exten
    */
   placement?: Placement;
   useLocale?: boolean;
+  /**
+   * Renders no calendar button, so the field fits a narrower row. The calendar
+   * opens from the field instead: a press in it, an edit of a date (typing,
+   * or Up and Down Arrow), or Alt+Down or Alt+Up, which also move focus into
+   * the calendar. Tabbing into the field doesn't open it, and while the dates
+   * are typed focus stays in the field. Escape, a press outside, picking a
+   * range without times, or focus moving on to another element closes it.
+   * @default false
+   */
+  hideTrigger?: boolean;
 }
 declare const _DateRangePicker: <T extends DateValue = DateValue>(props: CubeDateRangePickerProps<T> & {
   ref?: Ref<HTMLElement>;