@cube-dev/ui-kit 0.182.0 → 0.184.0

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

@@ -1 +1 @@
-{"version":3,"file":"DatePickerSegment.js","names":[],"sources":["../../../../src/components/fields/DatePicker/DatePickerSegment.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { useRef } from 'react';\nimport { DateValue, useDateSegment } from 'react-aria';\nimport { DateFieldState, DateSegment } from 'react-stately';\n\nimport { DateFieldBase } from './types';\n\ninterface DatePickerSegmentProps extends DateFieldBase<DateValue> {\n  segment: DateSegment;\n  state: DateFieldState;\n}\n\ninterface LiteralSegmentProps {\n  segment: DateSegment;\n}\n\nconst LiteralSegmentElement = tasty({\n  qa: 'LiteralSegment',\n  as: 'span',\n  'aria-hidden': 'true',\n  styles: {},\n});\n\nconst EditableSegmentElement = tasty({\n  qa: 'EditableSegment',\n  styles: {\n    padding: '0 1bw',\n    fontVariantNumeric: 'tabular-nums lining-nums',\n    textAlign: 'right',\n    font: 'monospace',\n    border: 0,\n    outline: 0,\n    color: {\n      '': 'inherit',\n      ':focus': '#white',\n    },\n    fill: {\n      '': '#clear',\n      ':focus': '#primary',\n    },\n    radius: '.25x',\n\n    Placeholder: {\n      opacity: '$disabled-opacity',\n    },\n  },\n});\n\nexport function DatePickerSegment({\n  segment,\n  state,\n  ...otherProps\n}: DatePickerSegmentProps) {\n  switch (segment.type) {\n    // A separator, e.g. punctuation\n    case 'literal':\n      return <LiteralSegment segment={segment} />;\n\n    // Editable segment\n    default:\n      return (\n        <EditableSegment segment={segment} state={state} {...otherProps} />\n      );\n  }\n}\n\nfunction LiteralSegment({ segment }: LiteralSegmentProps) {\n  return (\n    <LiteralSegmentElement\n      data-type={segment.type === 'literal' ? undefined : segment.type}\n    >\n      {segment.text}\n    </LiteralSegmentElement>\n  );\n}\n\nfunction EditableSegment({ segment, state }: DatePickerSegmentProps) {\n  let ref = useRef(null);\n  let { segmentProps } = useDateSegment(segment, state, ref);\n  return (\n    <EditableSegmentElement\n      {...segmentProps}\n      ref={ref}\n      mods={{\n        placeholder: segment.isPlaceholder,\n        'read-only': !segment.isEditable,\n      }}\n      style={{\n        ...segmentProps.style,\n        minWidth:\n          segment.maxValue != null\n            ? `calc(${String(segment.maxValue).length + 'ch'})`\n            : undefined,\n      }}\n      data-testid={segment.type}\n    >\n      {segment.isPlaceholder ? (\n        <span data-element=\"Placeholder\" aria-hidden=\"true\">\n          {segment.placeholder}\n        </span>\n      ) : (\n        segment.text\n      )}\n    </EditableSegmentElement>\n  );\n}\n"],"mappings":";;;;;;;AAgBA,MAAM,wBAAwB,MAAM;CAClC,IAAI;CACJ,IAAI;CACJ,eAAe;CACf,QAAQ,EAAE;CACX,CAAC;AAEF,MAAM,yBAAyB,MAAM;CACnC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,oBAAoB;EACpB,WAAW;EACX,MAAM;EACN,QAAQ;EACR,SAAS;EACT,OAAO;GACL,IAAI;GACJ,UAAU;GACX;EACD,MAAM;GACJ,IAAI;GACJ,UAAU;GACX;EACD,QAAQ;EAER,aAAa,EACX,SAAS,qBACV;EACF;CACF,CAAC;AAEF,SAAgB,kBAAkB,EAChC,SACA,OACA,GAAG,cACsB;AACzB,SAAQ,QAAQ,MAAhB;EAEE,KAAK,UACH,QAAO,oBAAC,kBAAwB,UAAW;EAG7C,QACE,QACE,oBAAC;GAAyB;GAAgB;GAAO,GAAI;IAAc;;;AAK3E,SAAS,eAAe,EAAE,WAAgC;AACxD,QACE,oBAAC;EACC,aAAW,QAAQ,SAAS,YAAY,SAAY,QAAQ;YAE3D,QAAQ;GACa;;AAI5B,SAAS,gBAAgB,EAAE,SAAS,SAAiC;CACnE,IAAI,MAAM,OAAO,KAAK;CACtB,IAAI,EAAE,iBAAiB,eAAe,SAAS,OAAO,IAAI;AAC1D,QACE,oBAAC;EACC,GAAI;EACC;EACL,MAAM;GACJ,aAAa,QAAQ;GACrB,aAAa,CAAC,QAAQ;GACvB;EACD,OAAO;GACL,GAAG,aAAa;GAChB,UACE,QAAQ,YAAY,OAChB,QAAQ,OAAO,QAAQ,SAAS,CAAC,SAAS,KAAK,KAC/C;GACP;EACD,eAAa,QAAQ;YAEpB,QAAQ,gBACP,oBAAC;GAAK,gBAAa;GAAc,eAAY;aAC1C,QAAQ;IACJ,GAEP,QAAQ;GAEa"}
+{"version":3,"file":"DatePickerSegment.js","names":["tasty","useRef","DateValue","useDateSegment","DateFieldState","DateSegment","DateFieldBase","DatePickerSegmentProps","segment","state","LiteralSegmentProps","LiteralSegmentElement","qa","as","styles","EditableSegmentElement","padding","fontVariantNumeric","textAlign","font","border","outline","color","fill","radius","Placeholder","opacity","DatePickerSegment","t0","$","_c","otherProps","type","t1","LiteralSegment","undefined","t2","text","EditableSegment","ref","segmentProps","isEditable","isPlaceholder","placeholder","t3","maxValue","String","length","t4","style","minWidth","t5","t6"],"sources":["../../../../src/components/fields/DatePicker/DatePickerSegment.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { useRef } from 'react';\nimport { DateValue, useDateSegment } from 'react-aria';\nimport { DateFieldState, DateSegment } from 'react-stately';\n\nimport { DateFieldBase } from './types';\n\ninterface DatePickerSegmentProps extends DateFieldBase<DateValue> {\n  segment: DateSegment;\n  state: DateFieldState;\n}\n\ninterface LiteralSegmentProps {\n  segment: DateSegment;\n}\n\nconst LiteralSegmentElement = tasty({\n  qa: 'LiteralSegment',\n  as: 'span',\n  'aria-hidden': 'true',\n  styles: {},\n});\n\nconst EditableSegmentElement = tasty({\n  qa: 'EditableSegment',\n  styles: {\n    padding: '0 1bw',\n    fontVariantNumeric: 'tabular-nums lining-nums',\n    textAlign: 'right',\n    font: 'monospace',\n    border: 0,\n    outline: 0,\n    color: {\n      '': 'inherit',\n      ':focus': '#white',\n    },\n    fill: {\n      '': '#clear',\n      ':focus': '#primary',\n    },\n    radius: '.25x',\n\n    Placeholder: {\n      opacity: '$disabled-opacity',\n    },\n  },\n});\n\nexport function DatePickerSegment({\n  segment,\n  state,\n  ...otherProps\n}: DatePickerSegmentProps) {\n  switch (segment.type) {\n    // A separator, e.g. punctuation\n    case 'literal':\n      return <LiteralSegment segment={segment} />;\n\n    // Editable segment\n    default:\n      return (\n        <EditableSegment segment={segment} state={state} {...otherProps} />\n      );\n  }\n}\n\nfunction LiteralSegment({ segment }: LiteralSegmentProps) {\n  return (\n    <LiteralSegmentElement\n      data-type={segment.type === 'literal' ? undefined : segment.type}\n    >\n      {segment.text}\n    </LiteralSegmentElement>\n  );\n}\n\nfunction EditableSegment({ segment, state }: DatePickerSegmentProps) {\n  let ref = useRef(null);\n  let { segmentProps } = useDateSegment(segment, state, ref);\n  return (\n    <EditableSegmentElement\n      {...segmentProps}\n      ref={ref}\n      mods={{\n        placeholder: segment.isPlaceholder,\n        'read-only': !segment.isEditable,\n      }}\n      style={{\n        ...segmentProps.style,\n        minWidth:\n          segment.maxValue != null\n            ? `calc(${String(segment.maxValue).length + 'ch'})`\n            : undefined,\n      }}\n      data-testid={segment.type}\n    >\n      {segment.isPlaceholder ? (\n        <span data-element=\"Placeholder\" aria-hidden=\"true\">\n          {segment.placeholder}\n        </span>\n      ) : (\n        segment.text\n      )}\n    </EditableSegmentElement>\n  );\n}\n"],"mappings":"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"}

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

@@ -3,8 +3,8 @@ import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import { DateFieldBase } from "./types.js";
 import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
-import { ReactElement, Ref } from "react";
-import { AriaDateRangePickerProps, DateValue } from "react-aria";
+import { ReactElement, Ref, RefObject } from "react";
+import { AriaDateRangePickerProps, DateValue, Placement } from "react-aria";
 
 //#region src/components/fields/DatePicker/DateRangePicker.d.ts
 interface CubeDateRangePickerProps<T extends DateValue = DateValue> extends Omit<AriaDateRangePickerProps<T>, 'errorMessage' | 'form' | 'name'>, BaseProps, DateFieldBase<T>, ContainerStyleProps, FieldBaseProps<{
@@ -17,6 +17,21 @@ interface CubeDateRangePickerProps<T extends DateValue = DateValue> extends Omit
   size?: 'small' | 'medium' | 'large' | (string & {});
   maxVisibleMonths?: number;
   shouldFlip?: boolean;
+  /**
+   * The ref of the element the popover should visually attach itself to.
+   * Defaults to the field wrapper.
+   *
+   * Forwarded to `DialogTrigger`, so the anchor also becomes what outside-click
+   * dismissal treats as the trigger.
+   */
+  targetRef?: RefObject<HTMLElement | null>;
+  /**
+   * Placement of the popover relative to the anchor.
+   * Accepts React Aria's `Placement` strings (e.g. `'bottom start'`,
+   * `'top start'`, `'right top'`, `'left top'`).
+   * @default 'bottom right'
+   */
+  placement?: Placement;
   useLocale?: boolean;
 }
 declare const _DateRangePicker: <T extends DateValue = DateValue>(props: CubeDateRangePickerProps<T> & {

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { Space } from "../../layout/Space.js";
@@ -14,6 +14,7 @@ import { _TimeInput } from "./TimeInput.js";
 import { DatePickerButton } from "./DatePickerButton.js";
 import { DatePickerInput } from "./DatePickerInput.js";
 import { _RangeCalendar } from "../../other/Calendar/RangeCalendar.js";
+import { c } from "react-compiler-runtime";
 import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -28,106 +29,245 @@ const DateRangeDash = tasty({
 	styles: { padding: "0 .5x" }
 });
 function DateRangePicker(props, ref) {
+	const $ = c(67);
 	const { t } = useI18n();
-	props = useFieldProps(props, { defaultValidationTrigger: "onBlur" });
-	props = Object.assign({}, DEFAULT_DATE_PROPS, props);
-	let styles = {
-		...extractStyles(props, CONTAINER_STYLES),
-		...props.wrapperStyles
-	};
-	let { qa, size, shouldFlip, placeholderValue, isDisabled, isInvalid, isValid, useLocale: useLocaleProp, autoFocus } = props;
-	let targetRef = useRef(null);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { defaultValidationTrigger: "onBlur" };
+		$[0] = t0;
+	} else t0 = $[0];
+	props = useFieldProps(props, t0);
+	let t1;
+	if ($[1] !== props) {
+		props = Object.assign({}, DEFAULT_DATE_PROPS, props);
+		t1 = extractStyles(props, CONTAINER_STYLES);
+		$[1] = props;
+		$[2] = t1;
+		$[3] = props;
+	} else {
+		t1 = $[2];
+		props = $[3];
+	}
+	let t2;
+	if ($[4] !== props.wrapperStyles || $[5] !== t1) {
+		t2 = {
+			...t1,
+			...props.wrapperStyles
+		};
+		$[4] = props.wrapperStyles;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	const styles = t2;
+	const { qa, size, shouldFlip, targetRef: targetRefProp, placement: t3, placeholderValue, isDisabled, isInvalid, isValid, useLocale: useLocaleProp, autoFocus } = props;
+	const placement = t3 === void 0 ? "bottom right" : t3;
+	const targetRef = useRef(null);
 	let state = useDateRangePickerState({
 		...props,
 		shouldCloseOnSelect: () => !state.hasTime
 	});
-	let { isOpen, setOpen } = state;
-	let { isFocused, focusProps } = useFocusRing({
-		within: true,
-		isTextInput: true,
-		autoFocus
-	});
-	let { isFocused: isFocusedButton, focusProps: focusPropsButton } = useFocusRing({
-		within: false,
-		isTextInput: false,
-		autoFocus
-	});
-	let domRef = useFocusManagerRef(ref);
-	let { groupProps, labelProps, startFieldProps, endFieldProps, buttonProps, dialogProps, calendarProps } = useDateRangePicker(props, state, targetRef);
-	let placeholder = placeholderValue;
-	let timePlaceholder = placeholder && "hour" in placeholder ? placeholder : void 0;
-	let timeMinValue = props.minValue && "hour" in props.minValue ? props.minValue : void 0;
-	let timeMaxValue = props.maxValue && "hour" in props.maxValue ? props.maxValue : void 0;
-	let timeGranularity = state.granularity === "hour" || state.granularity === "minute" || state.granularity === "second" ? state.granularity : null;
-	let showTimeField = !!timeGranularity;
-	return wrapWithField(/* @__PURE__ */ jsxs(_DateInputBase, {
-		ref: targetRef,
-		qa: qa || "DateRangePicker",
-		inputType: "daterangepicker",
-		styles,
-		disableFocusRing: isFocusedButton,
-		isDisabled,
-		isInvalid,
-		isValid,
-		size,
-		fieldProps: groupProps,
-		...focusProps,
-		suffix: /* @__PURE__ */ jsxs(DialogTrigger, {
+	const { isOpen, setOpen } = state;
+	let t4;
+	if ($[7] !== autoFocus) {
+		t4 = {
+			within: true,
+			isTextInput: true,
+			autoFocus
+		};
+		$[7] = autoFocus;
+		$[8] = t4;
+	} else t4 = $[8];
+	const { focusProps } = useFocusRing(t4);
+	let t5;
+	if ($[9] !== autoFocus) {
+		t5 = {
+			within: false,
+			isTextInput: false,
+			autoFocus
+		};
+		$[9] = autoFocus;
+		$[10] = t5;
+	} else t5 = $[10];
+	const { isFocused: isFocusedButton, focusProps: focusPropsButton } = useFocusRing(t5);
+	const domRef = useFocusManagerRef(ref);
+	const { groupProps, labelProps, startFieldProps, endFieldProps, buttonProps, dialogProps, calendarProps } = useDateRangePicker(props, state, targetRef);
+	const placeholder = placeholderValue;
+	const timePlaceholder = placeholder && "hour" in placeholder ? placeholder : void 0;
+	const timeMinValue = props.minValue && "hour" in props.minValue ? props.minValue : void 0;
+	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 t6 = qa || "DateRangePicker";
+	const t7 = targetRefProp ?? targetRef;
+	let t8;
+	if ($[11] !== buttonProps || $[12] !== focusPropsButton) {
+		t8 = mergeProps$1(buttonProps, focusPropsButton);
+		$[11] = buttonProps;
+		$[12] = focusPropsButton;
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] !== isDisabled || $[15] !== size || $[16] !== t8) {
+		t9 = /* @__PURE__ */ jsx(DatePickerButton, {
+			size,
+			...t8,
+			isDisabled
+		});
+		$[14] = isDisabled;
+		$[15] = size;
+		$[16] = t8;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== calendarProps) {
+		t10 = /* @__PURE__ */ jsx(_RangeCalendar, { ...calendarProps });
+		$[18] = calendarProps;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== props.hideTimeZone || $[21] !== props.hourCycle || $[22] !== showTimeField || $[23] !== state || $[24] !== t || $[25] !== timeGranularity || $[26] !== timeMaxValue || $[27] !== timeMinValue || $[28] !== timePlaceholder) {
+		t11 = showTimeField && /* @__PURE__ */ jsxs(Space, { children: [/* @__PURE__ */ jsx(_TimeInput, {
+			padding: "1x",
+			label: t("datePicker.startTime", "Start time"),
+			value: state.timeRange?.start || null,
+			placeholderValue: timePlaceholder,
+			granularity: timeGranularity,
+			minValue: timeMinValue,
+			maxValue: timeMaxValue,
+			hourCycle: props.hourCycle,
+			hideTimeZone: props.hideTimeZone,
+			onChange: (v) => state.setTime("start", v)
+		}), /* @__PURE__ */ jsx(_TimeInput, {
+			padding: "1x",
+			label: t("datePicker.endTime", "End time"),
+			value: state.timeRange?.end || null,
+			placeholderValue: timePlaceholder,
+			granularity: timeGranularity,
+			minValue: timeMinValue,
+			maxValue: timeMaxValue,
+			hourCycle: props.hourCycle,
+			hideTimeZone: props.hideTimeZone,
+			onChange: (v_0) => state.setTime("end", v_0)
+		})] });
+		$[20] = props.hideTimeZone;
+		$[21] = props.hourCycle;
+		$[22] = showTimeField;
+		$[23] = state;
+		$[24] = t;
+		$[25] = timeGranularity;
+		$[26] = timeMaxValue;
+		$[27] = timeMinValue;
+		$[28] = timePlaceholder;
+		$[29] = t11;
+	} else t11 = $[29];
+	let t12;
+	if ($[30] !== dialogProps || $[31] !== t10 || $[32] !== t11) {
+		t12 = /* @__PURE__ */ jsxs(Dialog, {
+			...dialogProps,
+			width: "max-content",
+			children: [t10, t11]
+		});
+		$[30] = dialogProps;
+		$[31] = t10;
+		$[32] = t11;
+		$[33] = t12;
+	} else t12 = $[33];
+	let t13;
+	if ($[34] !== isOpen || $[35] !== placement || $[36] !== setOpen || $[37] !== shouldFlip || $[38] !== t12 || $[39] !== t7 || $[40] !== t9) {
+		t13 = /* @__PURE__ */ jsxs(DialogTrigger, {
 			hideArrow: true,
 			type: "popover",
 			mobileType: "tray",
-			placement: "bottom right",
-			targetRef,
+			placement,
+			targetRef: t7,
 			isOpen,
 			shouldFlip,
 			onOpenChange: setOpen,
-			children: [/* @__PURE__ */ jsx(DatePickerButton, {
-				size,
-				...mergeProps$1(buttonProps, focusPropsButton),
-				isDisabled
-			}), /* @__PURE__ */ jsxs(Dialog, {
-				...dialogProps,
-				width: "max-content",
-				children: [/* @__PURE__ */ jsx(_RangeCalendar, { ...calendarProps }), showTimeField && /* @__PURE__ */ jsxs(Space, { children: [/* @__PURE__ */ jsx(_TimeInput, {
-					padding: "1x",
-					label: t("datePicker.startTime", "Start time"),
-					value: state.timeRange?.start || null,
-					placeholderValue: timePlaceholder,
-					granularity: timeGranularity,
-					minValue: timeMinValue,
-					maxValue: timeMaxValue,
-					hourCycle: props.hourCycle,
-					hideTimeZone: props.hideTimeZone,
-					onChange: (v) => state.setTime("start", v)
-				}), /* @__PURE__ */ jsx(_TimeInput, {
-					padding: "1x",
-					label: t("datePicker.endTime", "End time"),
-					value: state.timeRange?.end || null,
-					placeholderValue: timePlaceholder,
-					granularity: timeGranularity,
-					minValue: timeMinValue,
-					maxValue: timeMaxValue,
-					hourCycle: props.hourCycle,
-					hideTimeZone: props.hideTimeZone,
-					onChange: (v) => state.setTime("end", v)
-				})] })]
-			})]
-		}),
-		children: [
-			/* @__PURE__ */ jsx(DatePickerInput, {
-				useLocale: useLocaleProp,
-				...startFieldProps
-			}),
-			/* @__PURE__ */ jsx(DateRangeDash, {}),
-			/* @__PURE__ */ jsx(DatePickerInput, {
-				useLocale: useLocaleProp,
-				...endFieldProps
-			})
-		]
-	}), domRef, {
-		...props,
-		labelProps: mergeProps$1(props.labelProps, labelProps)
-	});
+			children: [t9, t12]
+		});
+		$[34] = isOpen;
+		$[35] = placement;
+		$[36] = setOpen;
+		$[37] = shouldFlip;
+		$[38] = t12;
+		$[39] = t7;
+		$[40] = t9;
+		$[41] = t13;
+	} else t13 = $[41];
+	let t14;
+	if ($[42] !== startFieldProps || $[43] !== useLocaleProp) {
+		t14 = /* @__PURE__ */ jsx(DatePickerInput, {
+			useLocale: useLocaleProp,
+			...startFieldProps
+		});
+		$[42] = startFieldProps;
+		$[43] = useLocaleProp;
+		$[44] = t14;
+	} else t14 = $[44];
+	let t15;
+	if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /* @__PURE__ */ jsx(DateRangeDash, {});
+		$[45] = t15;
+	} else t15 = $[45];
+	let t16;
+	if ($[46] !== endFieldProps || $[47] !== useLocaleProp) {
+		t16 = /* @__PURE__ */ jsx(DatePickerInput, {
+			useLocale: useLocaleProp,
+			...endFieldProps
+		});
+		$[46] = endFieldProps;
+		$[47] = useLocaleProp;
+		$[48] = t16;
+	} else t16 = $[48];
+	let t17;
+	if ($[49] !== focusProps || $[50] !== groupProps || $[51] !== isDisabled || $[52] !== isFocusedButton || $[53] !== isInvalid || $[54] !== isValid || $[55] !== size || $[56] !== styles || $[57] !== t13 || $[58] !== t14 || $[59] !== t16 || $[60] !== t6) {
+		t17 = /* @__PURE__ */ jsxs(_DateInputBase, {
+			ref: targetRef,
+			qa: t6,
+			inputType: "daterangepicker",
+			styles,
+			disableFocusRing: isFocusedButton,
+			isDisabled,
+			isInvalid,
+			isValid,
+			size,
+			fieldProps: groupProps,
+			...focusProps,
+			suffix: t13,
+			children: [
+				t14,
+				t15,
+				t16
+			]
+		});
+		$[49] = focusProps;
+		$[50] = groupProps;
+		$[51] = isDisabled;
+		$[52] = isFocusedButton;
+		$[53] = isInvalid;
+		$[54] = isValid;
+		$[55] = size;
+		$[56] = styles;
+		$[57] = t13;
+		$[58] = t14;
+		$[59] = t16;
+		$[60] = t6;
+		$[61] = t17;
+	} else t17 = $[61];
+	const component = t17;
+	let t18;
+	if ($[62] !== component || $[63] !== domRef || $[64] !== labelProps || $[65] !== props) {
+		t18 = wrapWithField(component, domRef, {
+			...props,
+			labelProps: mergeProps$1(props.labelProps, labelProps)
+		});
+		$[62] = component;
+		$[63] = domRef;
+		$[64] = labelProps;
+		$[65] = props;
+		$[66] = t18;
+	} else t18 = $[66];
+	return t18;
 }
 const _DateRangePicker = forwardRef(DateRangePicker);
 _DateRangePicker.displayName = "DateRangePicker";

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.js","names":["DateInputBase","mergeProps","RangeCalendar","TimeInput"],"sources":["../../../../src/components/fields/DatePicker/DateRangePicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport {\n  AriaDateRangePickerProps,\n  DateValue,\n  useDateRangePicker,\n  useFocusRing,\n} from 'react-aria';\nimport { useDateRangePickerState } from 'react-stately';\n\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Space } from '../../layout/Space';\nimport { RangeCalendar } from '../../other/Calendar/RangeCalendar';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\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\nimport type { ReactElement, Ref } from 'react';\n\nconst DateRangeDash = tasty({\n  'aria-hidden': 'true',\n  'data-qa': 'DateRangeDash',\n  children: '–',\n  styles: {\n    padding: '0 .5x',\n  },\n});\n\nexport interface CubeDateRangePickerProps<T extends DateValue = DateValue>\n  extends Omit<AriaDateRangePickerProps<T>, 'errorMessage' | 'form' | 'name'>,\n    BaseProps,\n    DateFieldBase<T>,\n    ContainerStyleProps,\n    FieldBaseProps<{ start: T; end: T } | null | undefined> {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  maxVisibleMonths?: number;\n  shouldFlip?: boolean;\n  useLocale?: boolean;\n}\n\nfunction DateRangePicker<T extends DateValue>(\n  props: CubeDateRangePickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  // The public type declares `ContainerStyleProps` and `styles`, so both have to\n  // reach the root — before this they were extracted and dropped, which made\n  // `width=\"100%\"` type-check and do nothing. `extractStyles` already folds in\n  // `props.styles` and lets the individual style props override it, which is the\n  // precedence every other component uses; re-spreading `props.styles` here\n  // would invert it. `wrapperStyles` stays the most specific and keeps winning.\n  let styles: Styles = {\n    ...extractStyles(props, CONTAINER_STYLES),\n    ...props.wrapperStyles,\n  };\n\n  let {\n    qa,\n    size,\n    shouldFlip,\n    placeholderValue,\n    isDisabled,\n    isInvalid,\n    isValid,\n    useLocale: useLocaleProp,\n    autoFocus,\n  } = props;\n  let targetRef = useRef<HTMLDivElement>(null);\n  let state = useDateRangePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime,\n  });\n  let { isOpen, setOpen } = state;\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 domRef = useFocusManagerRef(ref);\n\n  let {\n    groupProps,\n    labelProps,\n    startFieldProps,\n    endFieldProps,\n    buttonProps,\n    dialogProps,\n    calendarProps,\n  } = useDateRangePicker(props, state, targetRef);\n\n  let placeholder: DateValue | undefined = placeholderValue;\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      qa={qa || 'DateRangePicker'}\n      inputType=\"daterangepicker\"\n      styles={styles}\n      disableFocusRing={isFocusedButton}\n      isDisabled={isDisabled}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      size={size}\n      fieldProps={groupProps}\n      {...focusProps}\n      suffix={\n        <DialogTrigger\n          hideArrow\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement=\"bottom right\"\n          targetRef={targetRef}\n          isOpen={isOpen}\n          shouldFlip={shouldFlip}\n          onOpenChange={setOpen}\n        >\n          <DatePickerButton\n            size={size}\n            {...mergeProps(buttonProps, focusPropsButton)}\n            isDisabled={isDisabled}\n          />\n          <Dialog {...dialogProps} width=\"max-content\">\n            <RangeCalendar {...calendarProps} />\n            {showTimeField && (\n              <Space>\n                <TimeInput\n                  padding=\"1x\"\n                  label={t('datePicker.startTime', 'Start time')}\n                  value={state.timeRange?.start || null}\n                  placeholderValue={timePlaceholder}\n                  granularity={timeGranularity}\n                  minValue={timeMinValue}\n                  maxValue={timeMaxValue}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  onChange={(v) => state.setTime('start', v)}\n                />\n                <TimeInput\n                  padding=\"1x\"\n                  label={t('datePicker.endTime', 'End time')}\n                  value={state.timeRange?.end || null}\n                  placeholderValue={timePlaceholder}\n                  granularity={timeGranularity}\n                  minValue={timeMinValue}\n                  maxValue={timeMaxValue}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  onChange={(v) => state.setTime('end', v)}\n                />\n              </Space>\n            )}\n          </Dialog>\n        </DialogTrigger>\n      }\n    >\n      <DatePickerInput useLocale={useLocaleProp} {...startFieldProps} />\n      <DateRangeDash />\n      <DatePickerInput useLocale={useLocaleProp} {...endFieldProps} />\n    </DateInputBase>\n  );\n\n  return wrapWithField(component, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _DateRangePicker = forwardRef(DateRangePicker) as <\n  T extends DateValue = DateValue,\n>(\n  props: CubeDateRangePickerProps<T> & { ref?: Ref<HTMLElement> },\n) => ReactElement | null;\n\n(_DateRangePicker as any).displayName = 'DateRangePicker';\n\nexport { _DateRangePicker as DateRangePicker };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAM,gBAAgB,MAAM;CAC1B,eAAe;CACf,WAAW;CACX,UAAU;CACV,QAAQ,EACN,SAAS,SACV;CACF,CAAC;AAiBF,SAAS,gBACP,OACA,KACA;CACA,MAAM,EAAE,MAAM,SAAS;AAEvB,SAAQ,cAAc,OAAO,EAC3B,0BAA0B,UAC3B,CAAC;AACF,SAAQ,OAAO,OAAO,EAAE,EAAE,oBAAoB,MAAM;CAQpD,IAAI,SAAiB;EACnB,GAAG,cAAc,OAAO,iBAAiB;EACzC,GAAG,MAAM;EACV;CAED,IAAI,EACF,IACA,MACA,YACA,kBACA,YACA,WACA,SACA,WAAW,eACX,cACE;CACJ,IAAI,YAAY,OAAuB,KAAK;CAC5C,IAAI,QAAQ,wBAAwB;EAClC,GAAG;EACH,2BAA2B,CAAC,MAAM;EACnC,CAAC;CACF,IAAI,EAAE,QAAQ,YAAY;CAE1B,IAAI,EAAE,WAAW,eAAe,aAAa;EAC3C,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEF,IAAI,EAAE,WAAW,iBAAiB,YAAY,qBAC5C,aAAa;EACX,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEJ,IAAI,SAAS,mBAAmB,IAAI;CAEpC,IAAI,EACF,YACA,YACA,iBACA,eACA,aACA,aACA,kBACE,mBAAmB,OAAO,OAAO,UAAU;CAE/C,IAAI,cAAqC;CACzC,IAAI,kBACF,eAAe,UAAU,cAAc,cAAc;CACvD,IAAI,eACF,MAAM,YAAY,UAAU,MAAM,WAAW,MAAM,WAAW;CAChE,IAAI,eACF,MAAM,YAAY,UAAU,MAAM,WAAW,MAAM,WAAW;CAChE,IAAI,kBACF,MAAM,gBAAgB,UACtB,MAAM,gBAAgB,YACtB,MAAM,gBAAgB,WAClB,MAAM,cACN;CACN,IAAI,gBAAgB,CAAC,CAAC;AAwEtB,QAAO,cApEL,qBAACA;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACF;EACR,kBAAkB;EACN;EACD;EACF;EACH;EACN,YAAY;EACZ,GAAI;EACJ,QACE,qBAAC;GACC;GACA,MAAK;GACL,YAAW;GACX,WAAU;GACC;GACH;GACI;GACZ,cAAc;cAEd,oBAAC;IACO;IACN,GAAIC,aAAW,aAAa,iBAAiB;IACjC;KACZ,EACF,qBAAC;IAAO,GAAI;IAAa,OAAM;eAC7B,oBAACC,kBAAc,GAAI,gBAAiB,EACnC,iBACC,qBAAC,oBACC,oBAACC;KACC,SAAQ;KACR,OAAO,EAAE,wBAAwB,aAAa;KAC9C,OAAO,MAAM,WAAW,SAAS;KACjC,kBAAkB;KAClB,aAAa;KACb,UAAU;KACV,UAAU;KACV,WAAW,MAAM;KACjB,cAAc,MAAM;KACpB,WAAW,MAAM,MAAM,QAAQ,SAAS,EAAE;MAC1C,EACF,oBAACA;KACC,SAAQ;KACR,OAAO,EAAE,sBAAsB,WAAW;KAC1C,OAAO,MAAM,WAAW,OAAO;KAC/B,kBAAkB;KAClB,aAAa;KACb,UAAU;KACV,UAAU;KACV,WAAW,MAAM;KACjB,cAAc,MAAM;KACpB,WAAW,MAAM,MAAM,QAAQ,OAAO,EAAE;MACxC,IACI;KAEH;IACK;;GAGlB,oBAAC;IAAgB,WAAW;IAAe,GAAI;KAAmB;GAClE,oBAAC,kBAAgB;GACjB,oBAAC;IAAgB,WAAW;IAAe,GAAI;KAAiB;;GAClD,EAGc,QAAQ;EACtC,GAAG;EACH,YAAYF,aAAW,MAAM,YAAY,WAAW;EACrD,CAAC;;AAGJ,MAAM,mBAAmB,WAAW,gBAAgB;AAMpD,AAAC,iBAAyB,cAAc"}
+{"version":3,"file":"DateRangePicker.js","names":["FocusableRef","BaseProps","CONTAINER_STYLES","ContainerStyleProps","Styles","tasty","forwardRef","RefObject","useRef","AriaDateRangePickerProps","DateValue","Placement","useDateRangePicker","useFocusRing","useDateRangePickerState","useI18n","FieldBaseProps","mergeProps","extractStyles","useFieldProps","wrapWithField","Space","RangeCalendar","Dialog","DialogTrigger","DateInputBase","DatePickerButton","DatePickerInput","DEFAULT_DATE_PROPS","TimeInput","DateFieldBase","useFocusManagerRef","ReactElement","Ref","DateRangeDash","children","styles","padding","CubeDateRangePickerProps","Omit","T","start","end","wrapperStyles","inputStyles","size","maxVisibleMonths","shouldFlip","targetRef","HTMLElement","placement","useLocale","DateRangePicker","props","ref","$","_c","t","t0","Symbol","for","defaultValidationTrigger","t1","Object","assign","t2","qa","targetRefProp","t3","placeholderValue","isDisabled","isInvalid","isValid","useLocaleProp","autoFocus","undefined","state","shouldCloseOnSelect","hasTime","isOpen","setOpen","t4","within","isTextInput","focusProps","t5","isFocused","isFocusedButton","focusPropsButton","domRef","groupProps","labelProps","startFieldProps","endFieldProps","buttonProps","dialogProps","calendarProps","placeholder","timePlaceholder","timeMinValue","minValue","timeMaxValue","maxValue","timeGranularity","granularity","showTimeField","t6","t7","t8","t9","t10","t11","hideTimeZone","hourCycle","timeRange","v","setTime","v_0","t12","t13","t14","t15","t16","t17","component","t18","_DateRangePicker","displayName"],"sources":["../../../../src/components/fields/DatePicker/DateRangePicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, RefObject, useRef } from 'react';\nimport {\n  AriaDateRangePickerProps,\n  DateValue,\n  Placement,\n  useDateRangePicker,\n  useFocusRing,\n} from 'react-aria';\nimport { useDateRangePickerState } from 'react-stately';\n\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Space } from '../../layout/Space';\nimport { RangeCalendar } from '../../other/Calendar/RangeCalendar';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\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\nimport type { ReactElement, Ref } from 'react';\n\nconst DateRangeDash = tasty({\n  'aria-hidden': 'true',\n  'data-qa': 'DateRangeDash',\n  children: '–',\n  styles: {\n    padding: '0 .5x',\n  },\n});\n\nexport interface CubeDateRangePickerProps<T extends DateValue = DateValue>\n  extends Omit<AriaDateRangePickerProps<T>, 'errorMessage' | 'form' | 'name'>,\n    BaseProps,\n    DateFieldBase<T>,\n    ContainerStyleProps,\n    FieldBaseProps<{ start: T; end: T } | null | undefined> {\n  wrapperStyles?: Styles;\n  inputStyles?: 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 DateRangePicker<T extends DateValue>(\n  props: CubeDateRangePickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  // The public type declares `ContainerStyleProps` and `styles`, so both have to\n  // reach the root — before this they were extracted and dropped, which made\n  // `width=\"100%\"` type-check and do nothing. `extractStyles` already folds in\n  // `props.styles` and lets the individual style props override it, which is the\n  // precedence every other component uses; re-spreading `props.styles` here\n  // would invert it. `wrapperStyles` stays the most specific and keeps winning.\n  let styles: Styles = {\n    ...extractStyles(props, CONTAINER_STYLES),\n    ...props.wrapperStyles,\n  };\n\n  let {\n    qa,\n    size,\n    shouldFlip,\n    targetRef: targetRefProp,\n    placement = 'bottom right',\n    placeholderValue,\n    isDisabled,\n    isInvalid,\n    isValid,\n    useLocale: useLocaleProp,\n    autoFocus,\n  } = props;\n  let targetRef = useRef<HTMLDivElement>(null);\n  let state = useDateRangePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime,\n  });\n  let { isOpen, setOpen } = state;\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 domRef = useFocusManagerRef(ref);\n\n  let {\n    groupProps,\n    labelProps,\n    startFieldProps,\n    endFieldProps,\n    buttonProps,\n    dialogProps,\n    calendarProps,\n  } = useDateRangePicker(props, state, targetRef);\n\n  let placeholder: DateValue | undefined = placeholderValue;\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      qa={qa || 'DateRangePicker'}\n      inputType=\"daterangepicker\"\n      styles={styles}\n      disableFocusRing={isFocusedButton}\n      isDisabled={isDisabled}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      size={size}\n      fieldProps={groupProps}\n      {...focusProps}\n      suffix={\n        <DialogTrigger\n          hideArrow\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement={placement}\n          targetRef={targetRefProp ?? targetRef}\n          isOpen={isOpen}\n          shouldFlip={shouldFlip}\n          onOpenChange={setOpen}\n        >\n          <DatePickerButton\n            size={size}\n            {...mergeProps(buttonProps, focusPropsButton)}\n            isDisabled={isDisabled}\n          />\n          <Dialog {...dialogProps} width=\"max-content\">\n            <RangeCalendar {...calendarProps} />\n            {showTimeField && (\n              <Space>\n                <TimeInput\n                  padding=\"1x\"\n                  label={t('datePicker.startTime', 'Start time')}\n                  value={state.timeRange?.start || null}\n                  placeholderValue={timePlaceholder}\n                  granularity={timeGranularity}\n                  minValue={timeMinValue}\n                  maxValue={timeMaxValue}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  onChange={(v) => state.setTime('start', v)}\n                />\n                <TimeInput\n                  padding=\"1x\"\n                  label={t('datePicker.endTime', 'End time')}\n                  value={state.timeRange?.end || null}\n                  placeholderValue={timePlaceholder}\n                  granularity={timeGranularity}\n                  minValue={timeMinValue}\n                  maxValue={timeMaxValue}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  onChange={(v) => state.setTime('end', v)}\n                />\n              </Space>\n            )}\n          </Dialog>\n        </DialogTrigger>\n      }\n    >\n      <DatePickerInput useLocale={useLocaleProp} {...startFieldProps} />\n      <DateRangeDash />\n      <DatePickerInput useLocale={useLocaleProp} {...endFieldProps} />\n    </DateInputBase>\n  );\n\n  return wrapWithField(component, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _DateRangePicker = forwardRef(DateRangePicker) as <\n  T extends DateValue = DateValue,\n>(\n  props: CubeDateRangePickerProps<T> & { ref?: Ref<HTMLElement> },\n) => ReactElement | null;\n\n(_DateRangePicker as any).displayName = 'DateRangePicker';\n\nexport { _DateRangePicker as DateRangePicker };\n"],"mappings":"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"}

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

@@ -3,8 +3,8 @@ import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import { DateFieldBase } from "./types.js";
 import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
-import { ReactElement } from "react";
-import { AriaDateRangePickerProps, DateValue } from "react-aria";
+import { ReactElement, RefObject } from "react";
+import { AriaDateRangePickerProps, DateValue, Placement } from "react-aria";
 import { FocusableRef } from "@react-types/shared";
 
 //#region src/components/fields/DatePicker/DateRangeSeparatedPicker.d.ts
@@ -18,6 +18,21 @@ interface CubeDateRangeSeparatedPickerProps<T extends DateValue = DateValue> ext
   size?: 'small' | 'medium' | 'large' | (string & {});
   maxVisibleMonths?: number;
   shouldFlip?: boolean;
+  /**
+   * The ref of the element the popover should visually attach itself to.
+   * Defaults to the field wrapper.
+   *
+   * Forwarded to `DialogTrigger`, so the anchor also becomes what outside-click
+   * dismissal treats as the trigger.
+   */
+  targetRef?: RefObject<HTMLElement | null>;
+  /**
+   * Placement of the popover relative to the anchor.
+   * Accepts React Aria's `Placement` strings (e.g. `'bottom start'`,
+   * `'top start'`, `'right top'`, `'left top'`).
+   * @default 'bottom right'
+   */
+  placement?: Placement;
   useLocale?: boolean;
 }
 declare const _DateRangeSeparatedPicker: <T extends DateValue>(props: CubeDateRangeSeparatedPickerProps<T> & {