@cube-dev/ui-kit 0.200.1 → 0.202.0

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

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

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

@@ -1 +1 @@
-{"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","mergeStyleLayers","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","rawProps","ref","$","_c","t","t0","Symbol","for","defaultValidationTrigger","props","t1","Object","assign","qa","targetRefProp","t2","placeholderValue","isDisabled","isInvalid","isValid","useLocaleProp","autoFocus","undefined","state","shouldCloseOnSelect","hasTime","isOpen","setOpen","t3","within","isTextInput","focusProps","t4","isFocused","isFocusedButton","focusPropsButton","domRef","groupProps","labelProps","startFieldProps","endFieldProps","buttonProps","dialogProps","calendarProps","placeholder","timePlaceholder","timeMinValue","minValue","timeMaxValue","maxValue","timeGranularity","granularity","showTimeField","t5","t6","t7","t8","t9","isDateUnavailable","t10","hideTimeZone","hourCycle","timeRange","v","setTime","v_0","t11","t12","t13","t14","t15","t16","component","t17","_DateRangePicker","displayName","_c","mergeProps","RangeCalendar","TimeInput","DateInputBase"],"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, mergeStyleLayers } from '../../../utils/styles';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Space } from '../../layout/Space';\nimport { RangeCalendar } from '../../other/Calendar/RangeCalendar';\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\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\n    Omit<\n      AriaDateRangePickerProps<T>,\n      'errorMessage' | 'form' | 'name' | keyof DateFieldBase<T>\n    >,\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  rawProps: CubeDateRangePickerProps<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  // 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 = mergeStyleLayers(\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 = useRef<HTMLDivElement>(null);\n\n  useFocusManagerRef(ref, domRef);\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 ?? 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 || 'DateRangePicker'}\n      inputType=\"daterangepicker\"\n      autoFocus={autoFocus}\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          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\" overflow=\"auto\">\n            <RangeCalendar\n              {...calendarProps}\n              isDateUnavailable={props.isDateUnavailable}\n            />\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, {\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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"}
+{"version":3,"file":"DateRangePicker.js","names":["FocusableRef","BaseProps","Styles","tasty","forwardRef","RefObject","useRef","AriaDateRangePickerProps","DateValue","Placement","useDateRangePicker","useFocusRing","useDateRangePickerState","useI18n","FieldBaseProps","mergeProps","mergeStyleLayers","useFieldProps","wrapWithField","FieldLayoutStyleProps","splitFieldLayout","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","rawProps","ref","$","_c","t","t0","Symbol","for","defaultValidationTrigger","props","Object","assign","fieldLayout","qa","targetRefProp","t1","placeholderValue","isDisabled","isInvalid","isValid","useLocaleProp","autoFocus","undefined","state","shouldCloseOnSelect","hasTime","isOpen","setOpen","focusProps","within","isTextInput","isFocused","isFocusedButton","focusPropsButton","domRef","groupProps","labelProps","startFieldProps","endFieldProps","buttonProps","dialogProps","calendarProps","placeholder","timePlaceholder","timeMinValue","minValue","timeMaxValue","maxValue","timeGranularity","granularity","showTimeField","t2","isReadOnly","t3","t4","isDateUnavailable","t5","timeRange","hourCycle","hideTimeZone","v","setTime","v_0","t6","t7","t8","component","field","_DateRangePicker","displayName","_c","mergeProps","RangeCalendar","TimeInput","DateInputBase"],"sources":["../../../../src/components/fields/DatePicker/DateRangePicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { BaseProps, Styles, tasty } 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 { mergeStyleLayers } from '../../../utils/styles';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport {\n  FieldLayoutStyleProps,\n  splitFieldLayout,\n} from '../../form/field-layout';\nimport { Space } from '../../layout/Space';\nimport { RangeCalendar } from '../../other/Calendar/RangeCalendar';\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\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\n    Omit<\n      AriaDateRangePickerProps<T>,\n      'errorMessage' | 'form' | 'name' | keyof DateFieldBase<T>\n    >,\n    BaseProps,\n    DateFieldBase<T>,\n    FieldLayoutStyleProps,\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  rawProps: CubeDateRangePickerProps<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  const styles = mergeStyleLayers(fieldLayout.styles, props.wrapperStyles);\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 = useRef<HTMLDivElement>(null);\n\n  useFocusManagerRef(ref, domRef);\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 ?? 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 || 'DateRangePicker'}\n      inputType=\"daterangepicker\"\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={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\" overflow=\"auto\">\n            <RangeCalendar\n              {...calendarProps}\n              isDateUnavailable={props.isDateUnavailable}\n            />\n            {showTimeField && (\n              <Space>\n                <TimeInput\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                  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, {\n    ...props,\n    ...fieldLayout.field,\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

@@ -1,13 +1,14 @@
 
 import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
+import { FieldLayoutStyleProps } from "../../form/field-layout.js";
 import { DateFieldBase } from "./types.js";
-import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
+import { BaseProps, Styles } from "@tenphi/tasty";
 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
-export interface CubeDateRangeSeparatedPickerProps<T extends DateValue = DateValue> extends Omit<AriaDateRangePickerProps<T>, 'errorMessage' | 'form' | 'name' | keyof DateFieldBase<T>>, BaseProps, ContainerStyleProps, DateFieldBase<T>, FieldBaseProps<{
+export interface CubeDateRangeSeparatedPickerProps<T extends DateValue = DateValue> extends Omit<AriaDateRangePickerProps<T>, 'errorMessage' | 'form' | 'name' | keyof DateFieldBase<T>>, BaseProps, FieldLayoutStyleProps, DateFieldBase<T>, FieldBaseProps<{
   start: T;
   end: T;
 } | null | undefined> {