@cube-dev/ui-kit 0.183.0 → 0.184.0

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.183.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 { useI18n } from "../../../i18n/useI18n.js";
@@ -32,7 +32,7 @@ const DateRangeDash = tasty({
 	}
 });
 function DateRangeSeparatedPicker(props, ref) {
-	const $ = c(138);
+	const $ = c(142);
 	const { t } = useI18n();
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -185,53 +185,55 @@ function DateRangeSeparatedPicker(props, ref) {
 	const t13 = qa || "DateRangeSeparatedPicker";
 	const t14 = startFocusProps.isFocused;
 	const t15 = startFocusRingProps.focusProps;
-	const t16 = startState.isOpen;
-	const t17 = props.shouldFlip;
-	const t18 = startState.setOpen;
-	let t19;
+	const t16 = props.placement ?? "bottom right";
+	const t17 = props.targetRef ?? targetRef;
+	const t18 = startState.isOpen;
+	const t19 = props.shouldFlip;
+	const t20 = startState.setOpen;
+	let t21;
 	if ($[29] !== startFocusProps.focusProps || $[30] !== startProps.buttonProps) {
-		t19 = mergeProps$1(startProps.buttonProps, startFocusProps.focusProps);
+		t21 = mergeProps$1(startProps.buttonProps, startFocusProps.focusProps);
 		$[29] = startFocusProps.focusProps;
 		$[30] = startProps.buttonProps;
-		$[31] = t19;
-	} else t19 = $[31];
-	let t20;
-	if ($[32] !== isDisabled || $[33] !== size || $[34] !== t19) {
-		t20 = /* @__PURE__ */ jsx(DatePickerButton, {
+		$[31] = t21;
+	} else t21 = $[31];
+	let t22;
+	if ($[32] !== isDisabled || $[33] !== size || $[34] !== t21) {
+		t22 = /* @__PURE__ */ jsx(DatePickerButton, {
 			size,
-			...t19,
+			...t21,
 			isDisabled
 		});
 		$[32] = isDisabled;
 		$[33] = size;
-		$[34] = t19;
-		$[35] = t20;
-	} else t20 = $[35];
-	const t21 = state.value?.start || state.value?.end || void 0;
-	const t22 = state.value?.start && state.value?.end ? state.value : void 0;
-	let t23;
+		$[34] = t21;
+		$[35] = t22;
+	} else t22 = $[35];
+	const t23 = state.value?.start || state.value?.end || void 0;
+	const t24 = state.value?.start && state.value?.end ? state.value : void 0;
+	let t25;
 	if ($[36] !== onChange) {
-		t23 = (value_0) => onChange(value_0, "start");
+		t25 = (value_0) => onChange(value_0, "start");
 		$[36] = onChange;
-		$[37] = t23;
-	} else t23 = $[37];
-	let t24;
-	if ($[38] !== startProps.calendarProps || $[39] !== t21 || $[40] !== t22 || $[41] !== t23) {
-		t24 = /* @__PURE__ */ jsx(_Calendar, {
+		$[37] = t25;
+	} else t25 = $[37];
+	let t26;
+	if ($[38] !== startProps.calendarProps || $[39] !== t23 || $[40] !== t24 || $[41] !== t25) {
+		t26 = /* @__PURE__ */ jsx(_Calendar, {
 			...startProps.calendarProps,
-			defaultFocusedValue: t21,
-			selectedRange: t22,
-			onChange: t23
+			defaultFocusedValue: t23,
+			selectedRange: t24,
+			onChange: t25
 		});
 		$[38] = startProps.calendarProps;
-		$[39] = t21;
-		$[40] = t22;
-		$[41] = t23;
-		$[42] = t24;
-	} else t24 = $[42];
-	let t25;
+		$[39] = t23;
+		$[40] = t24;
+		$[41] = t25;
+		$[42] = t26;
+	} else t26 = $[42];
+	let t27;
 	if ($[43] !== props.hideTimeZone || $[44] !== props.hourCycle || $[45] !== showTimeField || $[46] !== startState.setTimeValue || $[47] !== startState.timeValue || $[48] !== t || $[49] !== timeGranularity || $[50] !== timeMaxValue || $[51] !== timeMinValue || $[52] !== timePlaceholder) {
-		t25 = showTimeField && /* @__PURE__ */ jsx(_TimeInput, {
+		t27 = showTimeField && /* @__PURE__ */ jsx(_TimeInput, {
 			padding: "1x",
 			label: t("datePicker.time", "Time"),
 			value: startState.timeValue,
@@ -253,136 +255,140 @@ function DateRangeSeparatedPicker(props, ref) {
 		$[50] = timeMaxValue;
 		$[51] = timeMinValue;
 		$[52] = timePlaceholder;
-		$[53] = t25;
-	} else t25 = $[53];
-	let t26;
-	if ($[54] !== startProps.dialogProps || $[55] !== t24 || $[56] !== t25) {
-		t26 = /* @__PURE__ */ jsxs(Dialog, {
+		$[53] = t27;
+	} else t27 = $[53];
+	let t28;
+	if ($[54] !== startProps.dialogProps || $[55] !== t26 || $[56] !== t27) {
+		t28 = /* @__PURE__ */ jsxs(Dialog, {
 			...startProps.dialogProps,
 			width: "max-content",
-			children: [t24, t25]
+			children: [t26, t27]
 		});
 		$[54] = startProps.dialogProps;
-		$[55] = t24;
-		$[56] = t25;
-		$[57] = t26;
-	} else t26 = $[57];
-	let t27;
-	if ($[58] !== props.shouldFlip || $[59] !== startState.isOpen || $[60] !== startState.setOpen || $[61] !== t20 || $[62] !== t26) {
-		t27 = /* @__PURE__ */ jsxs(DialogTrigger, {
+		$[55] = t26;
+		$[56] = t27;
+		$[57] = t28;
+	} else t28 = $[57];
+	let t29;
+	if ($[58] !== props.shouldFlip || $[59] !== startState.isOpen || $[60] !== startState.setOpen || $[61] !== t16 || $[62] !== t17 || $[63] !== t22 || $[64] !== t28) {
+		t29 = /* @__PURE__ */ jsxs(DialogTrigger, {
 			hideArrow: true,
 			type: "popover",
 			mobileType: "tray",
-			placement: "bottom right",
-			targetRef,
-			isOpen: t16,
-			shouldFlip: t17,
-			onOpenChange: t18,
-			children: [t20, t26]
+			placement: t16,
+			targetRef: t17,
+			isOpen: t18,
+			shouldFlip: t19,
+			onOpenChange: t20,
+			children: [t22, t28]
 		});
 		$[58] = props.shouldFlip;
 		$[59] = startState.isOpen;
 		$[60] = startState.setOpen;
-		$[61] = t20;
-		$[62] = t26;
-		$[63] = t27;
-	} else t27 = $[63];
-	let t28;
-	if ($[64] !== startFieldProps || $[65] !== useLocaleProp) {
-		t28 = /* @__PURE__ */ jsx(DatePickerInput, {
+		$[61] = t16;
+		$[62] = t17;
+		$[63] = t22;
+		$[64] = t28;
+		$[65] = t29;
+	} else t29 = $[65];
+	let t30;
+	if ($[66] !== startFieldProps || $[67] !== useLocaleProp) {
+		t30 = /* @__PURE__ */ jsx(DatePickerInput, {
 			useLocale: useLocaleProp,
 			...startFieldProps
 		});
-		$[64] = startFieldProps;
-		$[65] = useLocaleProp;
-		$[66] = t28;
-	} else t28 = $[66];
-	let t29;
-	if ($[67] !== isDisabled || $[68] !== isInvalid || $[69] !== isValid || $[70] !== size || $[71] !== startFocusProps.isFocused || $[72] !== startFocusRingProps.focusProps || $[73] !== t27 || $[74] !== t28) {
-		t29 = /* @__PURE__ */ jsx(_DateInputBase, {
+		$[66] = startFieldProps;
+		$[67] = useLocaleProp;
+		$[68] = t30;
+	} else t30 = $[68];
+	let t31;
+	if ($[69] !== isDisabled || $[70] !== isInvalid || $[71] !== isValid || $[72] !== size || $[73] !== startFocusProps.isFocused || $[74] !== startFocusRingProps.focusProps || $[75] !== t29 || $[76] !== t30) {
+		t31 = /* @__PURE__ */ jsx(_DateInputBase, {
 			disableFocusRing: t14,
 			isDisabled,
 			isInvalid,
 			isValid,
 			size,
 			...t15,
-			suffix: t27,
-			children: t28
+			suffix: t29,
+			children: t30
 		});
-		$[67] = isDisabled;
-		$[68] = isInvalid;
-		$[69] = isValid;
-		$[70] = size;
-		$[71] = startFocusProps.isFocused;
-		$[72] = startFocusRingProps.focusProps;
-		$[73] = t27;
-		$[74] = t28;
+		$[69] = isDisabled;
+		$[70] = isInvalid;
+		$[71] = isValid;
+		$[72] = size;
+		$[73] = startFocusProps.isFocused;
+		$[74] = startFocusRingProps.focusProps;
 		$[75] = t29;
-	} else t29 = $[75];
-	let t30;
-	if ($[76] === Symbol.for("react.memo_cache_sentinel")) {
-		t30 = /* @__PURE__ */ jsx(DateRangeDash, {});
 		$[76] = t30;
-	} else t30 = $[76];
-	const t31 = endFocusProps.isFocused;
-	const t32 = endFocusRingProps.focusProps;
-	const t33 = endState.isOpen;
-	const t34 = props.shouldFlip;
-	const t35 = endState.setOpen;
-	let t36;
-	if ($[77] !== t) {
-		t36 = t("datePicker.showEndCalendar", "Show calendar for the end date");
-		$[77] = t;
-		$[78] = t36;
-	} else t36 = $[78];
-	let t37;
-	if ($[79] !== endFocusProps.focusProps || $[80] !== endProps.buttonProps) {
-		t37 = mergeProps$1(endFocusProps.focusProps, endProps.buttonProps);
-		$[79] = endFocusProps.focusProps;
-		$[80] = endProps.buttonProps;
-		$[81] = t37;
-	} else t37 = $[81];
-	let t38;
-	if ($[82] !== isDisabled || $[83] !== size || $[84] !== t36 || $[85] !== t37) {
-		t38 = /* @__PURE__ */ jsx(DatePickerButton, {
-			"aria-label": t36,
+		$[77] = t31;
+	} else t31 = $[77];
+	let t32;
+	if ($[78] === Symbol.for("react.memo_cache_sentinel")) {
+		t32 = /* @__PURE__ */ jsx(DateRangeDash, {});
+		$[78] = t32;
+	} else t32 = $[78];
+	const t33 = endFocusProps.isFocused;
+	const t34 = endFocusRingProps.focusProps;
+	const t35 = props.placement ?? "bottom right";
+	const t36 = props.targetRef ?? targetRef;
+	const t37 = endState.isOpen;
+	const t38 = props.shouldFlip;
+	const t39 = endState.setOpen;
+	let t40;
+	if ($[79] !== t) {
+		t40 = t("datePicker.showEndCalendar", "Show calendar for the end date");
+		$[79] = t;
+		$[80] = t40;
+	} else t40 = $[80];
+	let t41;
+	if ($[81] !== endFocusProps.focusProps || $[82] !== endProps.buttonProps) {
+		t41 = mergeProps$1(endFocusProps.focusProps, endProps.buttonProps);
+		$[81] = endFocusProps.focusProps;
+		$[82] = endProps.buttonProps;
+		$[83] = t41;
+	} else t41 = $[83];
+	let t42;
+	if ($[84] !== isDisabled || $[85] !== size || $[86] !== t40 || $[87] !== t41) {
+		t42 = /* @__PURE__ */ jsx(DatePickerButton, {
+			"aria-label": t40,
 			size,
-			...t37,
+			...t41,
 			isDisabled
 		});
-		$[82] = isDisabled;
-		$[83] = size;
-		$[84] = t36;
-		$[85] = t37;
-		$[86] = t38;
-	} else t38 = $[86];
-	const t39 = state.value?.end || state.value?.start || void 0;
-	const t40 = state.value?.start && state.value?.end ? state.value : void 0;
-	let t41;
-	if ($[87] !== onChange) {
-		t41 = (value_1) => {
+		$[84] = isDisabled;
+		$[85] = size;
+		$[86] = t40;
+		$[87] = t41;
+		$[88] = t42;
+	} else t42 = $[88];
+	const t43 = state.value?.end || state.value?.start || void 0;
+	const t44 = state.value?.start && state.value?.end ? state.value : void 0;
+	let t45;
+	if ($[89] !== onChange) {
+		t45 = (value_1) => {
 			onChange(value_1, "end");
 		};
-		$[87] = onChange;
-		$[88] = t41;
-	} else t41 = $[88];
-	let t42;
-	if ($[89] !== endProps.calendarProps || $[90] !== t39 || $[91] !== t40 || $[92] !== t41) {
-		t42 = /* @__PURE__ */ jsx(_Calendar, {
+		$[89] = onChange;
+		$[90] = t45;
+	} else t45 = $[90];
+	let t46;
+	if ($[91] !== endProps.calendarProps || $[92] !== t43 || $[93] !== t44 || $[94] !== t45) {
+		t46 = /* @__PURE__ */ jsx(_Calendar, {
 			...endProps.calendarProps,
-			defaultFocusedValue: t39,
-			selectedRange: t40,
-			onChange: t41
+			defaultFocusedValue: t43,
+			selectedRange: t44,
+			onChange: t45
 		});
-		$[89] = endProps.calendarProps;
-		$[90] = t39;
-		$[91] = t40;
-		$[92] = t41;
-		$[93] = t42;
-	} else t42 = $[93];
-	let t43;
-	if ($[94] !== endState.setTimeValue || $[95] !== endState.timeValue || $[96] !== props.hideTimeZone || $[97] !== props.hourCycle || $[98] !== showTimeField || $[99] !== t || $[100] !== timeGranularity || $[101] !== timeMaxValue || $[102] !== timeMinValue || $[103] !== timePlaceholder) {
-		t43 = showTimeField && /* @__PURE__ */ jsx(_TimeInput, {
+		$[91] = endProps.calendarProps;
+		$[92] = t43;
+		$[93] = t44;
+		$[94] = t45;
+		$[95] = t46;
+	} else t46 = $[95];
+	let t47;
+	if ($[96] !== endState.setTimeValue || $[97] !== endState.timeValue || $[98] !== props.hideTimeZone || $[99] !== props.hourCycle || $[100] !== showTimeField || $[101] !== t || $[102] !== timeGranularity || $[103] !== timeMaxValue || $[104] !== timeMinValue || $[105] !== timePlaceholder) {
+		t47 = showTimeField && /* @__PURE__ */ jsx(_TimeInput, {
 			padding: "1x",
 			label: t("datePicker.time", "Time"),
 			value: endState.timeValue,
@@ -394,117 +400,119 @@ function DateRangeSeparatedPicker(props, ref) {
 			hideTimeZone: props.hideTimeZone,
 			onChange: endState.setTimeValue
 		});
-		$[94] = endState.setTimeValue;
-		$[95] = endState.timeValue;
-		$[96] = props.hideTimeZone;
-		$[97] = props.hourCycle;
-		$[98] = showTimeField;
-		$[99] = t;
-		$[100] = timeGranularity;
-		$[101] = timeMaxValue;
-		$[102] = timeMinValue;
-		$[103] = timePlaceholder;
-		$[104] = t43;
-	} else t43 = $[104];
-	let t44;
-	if ($[105] !== endProps.dialogProps || $[106] !== t42 || $[107] !== t43) {
-		t44 = /* @__PURE__ */ jsxs(Dialog, {
+		$[96] = endState.setTimeValue;
+		$[97] = endState.timeValue;
+		$[98] = props.hideTimeZone;
+		$[99] = props.hourCycle;
+		$[100] = showTimeField;
+		$[101] = t;
+		$[102] = timeGranularity;
+		$[103] = timeMaxValue;
+		$[104] = timeMinValue;
+		$[105] = timePlaceholder;
+		$[106] = t47;
+	} else t47 = $[106];
+	let t48;
+	if ($[107] !== endProps.dialogProps || $[108] !== t46 || $[109] !== t47) {
+		t48 = /* @__PURE__ */ jsxs(Dialog, {
 			...endProps.dialogProps,
 			width: "max-content",
-			children: [t42, t43]
+			children: [t46, t47]
 		});
-		$[105] = endProps.dialogProps;
-		$[106] = t42;
-		$[107] = t43;
-		$[108] = t44;
-	} else t44 = $[108];
-	let t45;
-	if ($[109] !== endState.isOpen || $[110] !== endState.setOpen || $[111] !== props.shouldFlip || $[112] !== t38 || $[113] !== t44) {
-		t45 = /* @__PURE__ */ jsxs(DialogTrigger, {
+		$[107] = endProps.dialogProps;
+		$[108] = t46;
+		$[109] = t47;
+		$[110] = t48;
+	} else t48 = $[110];
+	let t49;
+	if ($[111] !== endState.isOpen || $[112] !== endState.setOpen || $[113] !== props.shouldFlip || $[114] !== t35 || $[115] !== t36 || $[116] !== t42 || $[117] !== t48) {
+		t49 = /* @__PURE__ */ jsxs(DialogTrigger, {
 			hideArrow: true,
 			type: "popover",
 			mobileType: "tray",
-			placement: "bottom right",
-			targetRef,
-			isOpen: t33,
-			shouldFlip: t34,
-			onOpenChange: t35,
-			children: [t38, t44]
+			placement: t35,
+			targetRef: t36,
+			isOpen: t37,
+			shouldFlip: t38,
+			onOpenChange: t39,
+			children: [t42, t48]
 		});
-		$[109] = endState.isOpen;
-		$[110] = endState.setOpen;
-		$[111] = props.shouldFlip;
-		$[112] = t38;
-		$[113] = t44;
-		$[114] = t45;
-	} else t45 = $[114];
-	let t46;
-	if ($[115] !== endFieldProps || $[116] !== useLocaleProp) {
-		t46 = /* @__PURE__ */ jsx(DatePickerInput, {
+		$[111] = endState.isOpen;
+		$[112] = endState.setOpen;
+		$[113] = props.shouldFlip;
+		$[114] = t35;
+		$[115] = t36;
+		$[116] = t42;
+		$[117] = t48;
+		$[118] = t49;
+	} else t49 = $[118];
+	let t50;
+	if ($[119] !== endFieldProps || $[120] !== useLocaleProp) {
+		t50 = /* @__PURE__ */ jsx(DatePickerInput, {
 			useLocale: useLocaleProp,
 			...endFieldProps
 		});
-		$[115] = endFieldProps;
-		$[116] = useLocaleProp;
-		$[117] = t46;
-	} else t46 = $[117];
-	let t47;
-	if ($[118] !== endFocusProps.isFocused || $[119] !== endFocusRingProps.focusProps || $[120] !== isDisabled || $[121] !== isInvalid || $[122] !== isValid || $[123] !== size || $[124] !== t45 || $[125] !== t46) {
-		t47 = /* @__PURE__ */ jsx(_DateInputBase, {
-			disableFocusRing: t31,
+		$[119] = endFieldProps;
+		$[120] = useLocaleProp;
+		$[121] = t50;
+	} else t50 = $[121];
+	let t51;
+	if ($[122] !== endFocusProps.isFocused || $[123] !== endFocusRingProps.focusProps || $[124] !== isDisabled || $[125] !== isInvalid || $[126] !== isValid || $[127] !== size || $[128] !== t49 || $[129] !== t50) {
+		t51 = /* @__PURE__ */ jsx(_DateInputBase, {
+			disableFocusRing: t33,
 			isDisabled,
 			isInvalid,
 			isValid,
 			size,
-			...t32,
-			suffix: t45,
-			children: t46
+			...t34,
+			suffix: t49,
+			children: t50
 		});
-		$[118] = endFocusProps.isFocused;
-		$[119] = endFocusRingProps.focusProps;
-		$[120] = isDisabled;
-		$[121] = isInvalid;
-		$[122] = isValid;
-		$[123] = size;
-		$[124] = t45;
-		$[125] = t46;
-		$[126] = t47;
-	} else t47 = $[126];
-	let t48;
-	if ($[127] !== groupProps || $[128] !== styles || $[129] !== t13 || $[130] !== t29 || $[131] !== t47) {
-		t48 = /* @__PURE__ */ jsxs(DatePickerElement, {
+		$[122] = endFocusProps.isFocused;
+		$[123] = endFocusRingProps.focusProps;
+		$[124] = isDisabled;
+		$[125] = isInvalid;
+		$[126] = isValid;
+		$[127] = size;
+		$[128] = t49;
+		$[129] = t50;
+		$[130] = t51;
+	} else t51 = $[130];
+	let t52;
+	if ($[131] !== groupProps || $[132] !== styles || $[133] !== t13 || $[134] !== t31 || $[135] !== t51) {
+		t52 = /* @__PURE__ */ jsxs(DatePickerElement, {
 			ref: targetRef,
 			...groupProps,
 			styles,
 			qa: t13,
 			"data-input-type": "daterangeseparatedpicker",
 			children: [
-				t29,
-				t30,
-				t47
+				t31,
+				t32,
+				t51
 			]
 		});
-		$[127] = groupProps;
-		$[128] = styles;
-		$[129] = t13;
-		$[130] = t29;
-		$[131] = t47;
-		$[132] = t48;
-	} else t48 = $[132];
-	const component = t48;
-	let t49;
-	if ($[133] !== component || $[134] !== domRef || $[135] !== labelProps || $[136] !== props) {
-		t49 = wrapWithField(component, domRef, {
+		$[131] = groupProps;
+		$[132] = styles;
+		$[133] = t13;
+		$[134] = t31;
+		$[135] = t51;
+		$[136] = t52;
+	} else t52 = $[136];
+	const component = t52;
+	let t53;
+	if ($[137] !== component || $[138] !== domRef || $[139] !== labelProps || $[140] !== props) {
+		t53 = wrapWithField(component, domRef, {
 			...props,
 			labelProps: mergeProps$1(props.labelProps, labelProps)
 		});
-		$[133] = component;
-		$[134] = domRef;
-		$[135] = labelProps;
-		$[136] = props;
-		$[137] = t49;
-	} else t49 = $[137];
-	return t49;
+		$[137] = component;
+		$[138] = domRef;
+		$[139] = labelProps;
+		$[140] = props;
+		$[141] = t53;
+	} else t53 = $[141];
+	return t53;
 }
 const _DateRangeSeparatedPicker = forwardRef(DateRangeSeparatedPicker);
 _DateRangeSeparatedPicker.displayName = "DateRangeSeparatedPicker";