@cube-dev/ui-kit 0.113.1 → 0.115.0

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

@@ -0,0 +1,51 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { DatePickerSegment } from "./DatePickerSegment.js";
+import { formatSegments } from "./utils.js";
+import { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useDateField, useFocusWithin, useLocale } from "react-aria";
+import { useDateFieldState } from "react-stately";
+import { createCalendar } from "@internationalized/date";
+
+//#region src/components/fields/DatePicker/DatePickerInput.tsx
+const DateInputElement = tasty({
+	role: "presentation",
+	styles: {
+		display: "flex",
+		flow: "row",
+		placeItems: "center start"
+	}
+});
+function DatePickerInput(props) {
+	let { isDisabled, isReadOnly, isRequired, useLocale: useLocaleProp } = props;
+	let ref = useRef(null);
+	let { locale } = useLocale();
+	let state = useDateFieldState({
+		...props,
+		locale: useLocaleProp ? locale : "en-US",
+		createCalendar
+	});
+	if (useLocaleProp == null) state.segments = formatSegments(state.segments);
+	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: (isFocused) => {
+		if (isFocused) props.onFocus?.();
+		else props.onBlur?.();
+	} });
+	let { fieldProps } = useDateField(props, state, ref);
+	return /* @__PURE__ */ jsx(DateInputElement, {
+		ref,
+		...mergeProps$1(fieldProps, focusWithinProps),
+		children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DatePickerSegment, {
+			segment,
+			state,
+			isDisabled,
+			isReadOnly,
+			isRequired
+		}, i))
+	});
+}
+
+//#endregion
+export { DatePickerInput };
+//# sourceMappingURL=DatePickerInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerInput.js","names":["mergeProps"],"sources":["../../../../src/components/fields/DatePicker/DatePickerInput.tsx"],"sourcesContent":["import { createCalendar } from '@internationalized/date';\nimport { useRef } from 'react';\nimport {\n  AriaDatePickerProps,\n  DateValue,\n  useDateField,\n  useFocusWithin,\n  useLocale,\n} from 'react-aria';\nimport { DateSegment, useDateFieldState } from 'react-stately';\n\nimport { tasty } from '../../../tasty';\nimport { mergeProps } from '../../../utils/react';\n\nimport { DatePickerSegment } from './DatePickerSegment';\nimport { DateFieldBase, Granularity } from './types';\nimport { formatSegments } from './utils';\n\nconst DateInputElement = tasty({\n  role: 'presentation',\n  styles: {\n    display: 'flex',\n    flow: 'row',\n    placeItems: 'center start',\n  },\n});\n\ninterface CubeDatePickerInputProps<T extends DateValue>\n  extends Omit<AriaDatePickerProps<T>, 'errorMessage'>,\n    DateFieldBase<T> {\n  hideValidationIcon?: boolean;\n  maxGranularity?: Granularity;\n  useLocale?: boolean;\n  onFocus?: () => void;\n  onBlur?: () => void;\n}\n\nexport function DatePickerInput<T extends DateValue>(\n  props: CubeDatePickerInputProps<T>,\n) {\n  let { isDisabled, isReadOnly, isRequired, useLocale: useLocaleProp } = props;\n  let ref = useRef(null);\n  let { locale } = useLocale();\n  let state = useDateFieldState({\n    ...props,\n    locale: useLocaleProp ? locale : 'en-US',\n    createCalendar,\n  });\n\n  if (useLocaleProp == null) {\n    state.segments = formatSegments(state.segments);\n  }\n\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: (isFocused) => {\n      if (isFocused) {\n        props.onFocus?.();\n      } else {\n        props.onBlur?.();\n      }\n    },\n  });\n\n  let { fieldProps } = useDateField(props, state, ref);\n\n  return (\n    <DateInputElement ref={ref} {...mergeProps(fieldProps, focusWithinProps)}>\n      {state.segments.map((segment: DateSegment, i: number) => (\n        <DatePickerSegment\n          key={i}\n          segment={segment}\n          state={state}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isRequired={isRequired}\n        />\n      ))}\n    </DateInputElement>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAkBA,MAAM,mBAAmB,MAAM;CAC7B,MAAM;CACN,QAAQ;EACN,SAAS;EACT,MAAM;EACN,YAAY;EACb;CACF,CAAC;AAYF,SAAgB,gBACd,OACA;CACA,IAAI,EAAE,YAAY,YAAY,YAAY,WAAW,kBAAkB;CACvE,IAAI,MAAM,OAAO,KAAK;CACtB,IAAI,EAAE,WAAW,WAAW;CAC5B,IAAI,QAAQ,kBAAkB;EAC5B,GAAG;EACH,QAAQ,gBAAgB,SAAS;EACjC;EACD,CAAC;AAEF,KAAI,iBAAiB,KACnB,OAAM,WAAW,eAAe,MAAM,SAAS;CAGjD,MAAM,EAAE,qBAAqB,eAAe,EAC1C,sBAAsB,cAAc;AAClC,MAAI,UACF,OAAM,WAAW;MAEjB,OAAM,UAAU;IAGrB,CAAC;CAEF,IAAI,EAAE,eAAe,aAAa,OAAO,OAAO,IAAI;AAEpD,QACE,oBAAC;EAAsB;EAAK,GAAIA,aAAW,YAAY,iBAAiB;YACrE,MAAM,SAAS,KAAK,SAAsB,MACzC,oBAAC;GAEU;GACF;GACK;GACA;GACA;KALP,EAML,CACF;GACe"}

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

@@ -0,0 +1,76 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useDateSegment } from "react-aria";
+
+//#region src/components/fields/DatePicker/DatePickerSegment.tsx
+const LiteralSegmentElement = tasty({
+	qa: "LiteralSegment",
+	as: "span",
+	"aria-hidden": "true",
+	styles: {}
+});
+const EditableSegmentElement = tasty({
+	qa: "EditableSegment",
+	styles: {
+		padding: "0 1bw",
+		fontVariantNumeric: "tabular-nums lining-nums",
+		textAlign: "right",
+		font: "monospace",
+		border: 0,
+		outline: 0,
+		color: {
+			"": "inherit",
+			":focus": "#white"
+		},
+		fill: {
+			"": "#clear",
+			":focus": "#primary"
+		},
+		radius: ".25x",
+		Placeholder: { opacity: "#disabled-opacity" }
+	}
+});
+function DatePickerSegment({ segment, state, ...otherProps }) {
+	switch (segment.type) {
+		case "literal": return /* @__PURE__ */ jsx(LiteralSegment, { segment });
+		default: return /* @__PURE__ */ jsx(EditableSegment, {
+			segment,
+			state,
+			...otherProps
+		});
+	}
+}
+function LiteralSegment({ segment }) {
+	return /* @__PURE__ */ jsx(LiteralSegmentElement, {
+		"data-type": segment.type === "literal" ? void 0 : segment.type,
+		children: segment.text
+	});
+}
+function EditableSegment({ segment, state }) {
+	let ref = useRef(null);
+	let { segmentProps } = useDateSegment(segment, state, ref);
+	return /* @__PURE__ */ jsx(EditableSegmentElement, {
+		...segmentProps,
+		ref,
+		mods: {
+			placeholder: segment.isPlaceholder,
+			"read-only": !segment.isEditable
+		},
+		style: {
+			...segmentProps.style,
+			minWidth: segment.maxValue != null ? `calc(${String(segment.maxValue).length + "ch"})` : void 0
+		},
+		"data-testid": segment.type,
+		children: segment.isPlaceholder ? /* @__PURE__ */ jsx("span", {
+			"data-element": "Placeholder",
+			"aria-hidden": "true",
+			children: segment.placeholder
+		}) : segment.text
+	});
+}
+
+//#endregion
+export { DatePickerSegment };
+//# sourceMappingURL=DatePickerSegment.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerSegment.js","names":[],"sources":["../../../../src/components/fields/DatePicker/DatePickerSegment.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { DateValue, useDateSegment } from 'react-aria';\nimport { DateFieldState, DateSegment } from 'react-stately';\n\nimport { tasty } from '../../../tasty';\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":";;;;;;;AAiBA,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"}

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

@@ -0,0 +1,27 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import { BaseProps, ContainerStyleProps } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import { FieldBaseProps, ValidationState } from "../../../shared/form.js";
+import "../../../shared/index.js";
+import { DateFieldBase } from "./types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { AriaDateRangePickerProps, DateValue } from "react-aria";
+import { FocusableRef } from "@react-types/shared";
+
+//#region src/components/fields/DatePicker/DateRangePicker.d.ts
+interface CubeDateRangePickerProps<T extends DateValue = DateValue> extends Omit<AriaDateRangePickerProps<T>, 'errorMessage'>, BaseProps, DateFieldBase<T>, ContainerStyleProps, FieldBaseProps {
+  wrapperStyles?: Styles;
+  inputStyles?: Styles;
+  styles?: Styles;
+  size?: 'small' | 'medium' | 'large' | (string & {});
+  validationState?: ValidationState;
+  maxVisibleMonths?: number;
+  shouldFlip?: boolean;
+  useLocale?: boolean;
+}
+declare function DateRangePicker<T extends DateValue>(props: CubeDateRangePickerProps<T>, ref: FocusableRef<HTMLElement>): react_jsx_runtime0.JSX.Element;
+declare const _DateRangePicker: typeof DateRangePicker;
+//#endregion
+export { CubeDateRangePickerProps, _DateRangePicker };
+//# sourceMappingURL=DateRangePicker.d.ts.map

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

@@ -0,0 +1,137 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles } from "../../../tasty/utils/styles.js";
+import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
+import { tasty } from "../../../tasty/tasty.js";
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { useProviderProps } from "../../../provider.js";
+import { Space } from "../../layout/Space.js";
+import { useFormProps } from "../../form/Form/Form.js";
+import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
+import { wrapWithField } from "../../form/wrapper.js";
+import { Dialog } from "../../overlays/Dialog/Dialog.js";
+import { DialogTrigger } from "../../overlays/Dialog/DialogTrigger.js";
+import { _DateInputBase } from "./DateInputBase.js";
+import { DEFAULT_DATE_PROPS } from "./props.js";
+import { useFocusManagerRef } from "./utils.js";
+import { _TimeInput } from "./TimeInput.js";
+import { DatePickerButton } from "./DatePickerButton.js";
+import { DatePickerInput } from "./DatePickerInput.js";
+import { dateMessages } from "./intl.js";
+import { _RangeCalendar } from "../../other/Calendar/RangeCalendar.js";
+import { forwardRef, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDateRangePicker, useFocusRing } from "react-aria";
+import { useDateRangePickerState } from "react-stately";
+
+//#region src/components/fields/DatePicker/DateRangePicker.tsx
+const DateRangeDash = tasty({
+	"aria-hidden": "true",
+	"data-qa": "DateRangeDash",
+	children: "–",
+	styles: { padding: "0 .5x" }
+});
+function DateRangePicker(props, ref) {
+	props = useProviderProps(props);
+	props = useFormProps(props);
+	props = useFieldProps(props, { defaultValidationTrigger: "onBlur" });
+	props = Object.assign({}, DEFAULT_DATE_PROPS, props);
+	extractStyles(props, CONTAINER_STYLES);
+	let { qa, size, shouldFlip, placeholderValue, isDisabled, validationState, useLocale: useLocaleProp, autoFocus } = props;
+	let 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: props.wrapperStyles,
+		disableFocusRing: isFocusedButton,
+		isDisabled,
+		validationState,
+		size,
+		fieldProps: groupProps,
+		...focusProps,
+		suffix: /* @__PURE__ */ jsxs(DialogTrigger, {
+			hideArrow: true,
+			type: "popover",
+			mobileType: "tray",
+			placement: "bottom right",
+			targetRef,
+			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: dateMessages["startTime"],
+					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: dateMessages["endTime"],
+					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)
+	});
+}
+const _DateRangePicker = forwardRef(DateRangePicker);
+_DateRangePicker.displayName = "DateRangePicker";
+
+//#endregion
+export { _DateRangePicker };
+//# sourceMappingURL=DateRangePicker.js.map

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

@@ -0,0 +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 { forwardRef, useRef } from 'react';\nimport {\n  AriaDateRangePickerProps,\n  DateValue,\n  useDateRangePicker,\n  useFocusRing,\n} from 'react-aria';\nimport { useDateRangePickerState } from 'react-stately';\n\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps, ValidationState } from '../../../shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  Styles,\n  tasty,\n} from '../../../tasty';\nimport { mergeProps } from '../../../utils/react';\nimport { useFieldProps, useFormProps, 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 { dateMessages } from './intl';\nimport { DEFAULT_DATE_PROPS } from './props';\nimport { TimeInput } from './TimeInput';\nimport { DateFieldBase } from './types';\nimport { useFocusManagerRef } from './utils';\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'>,\n    BaseProps,\n    DateFieldBase<T>,\n    ContainerStyleProps,\n    FieldBaseProps {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  validationState?: ValidationState;\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  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let {\n    qa,\n    size,\n    shouldFlip,\n    placeholderValue,\n    isDisabled,\n    validationState,\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={props.wrapperStyles}\n      disableFocusRing={isFocusedButton}\n      isDisabled={isDisabled}\n      validationState={validationState}\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={dateMessages['startTime']}\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={dateMessages['endTime']}\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 typeof DateRangePicker;\n\n(_DateRangePicker as any).displayName = 'DateRangePicker';\n\nexport { _DateRangePicker as DateRangePicker };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAM,gBAAgB,MAAM;CAC1B,eAAe;CACf,WAAW;CACX,UAAU;CACV,QAAQ,EACN,SAAS,SACV;CACF,CAAC;AAkBF,SAAS,gBACP,OACA,KACA;AACA,SAAQ,iBAAiB,MAAM;AAC/B,SAAQ,aAAa,MAAM;AAC3B,SAAQ,cAAc,OAAO,EAC3B,0BAA0B,UAC3B,CAAC;AACF,SAAQ,OAAO,OAAO,EAAE,EAAE,oBAAoB,MAAM;AAEvC,eAAc,OAAO,iBAAiB;CAEnD,IAAI,EACF,IACA,MACA,YACA,kBACA,YACA,iBACA,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;AAuEtB,QAAO,cAnEL,qBAACA;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACV,QAAQ,MAAM;EACd,kBAAkB;EACN;EACK;EACX;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,aAAa;KACpB,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,aAAa;KACpB,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;AAEpD,AAAC,iBAAyB,cAAc"}

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

@@ -0,0 +1,28 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import { BaseProps, ContainerStyleProps } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import { FieldBaseProps, ValidationState } from "../../../shared/form.js";
+import "../../../shared/index.js";
+import { DateFieldBase } from "./types.js";
+import { ReactElement } from "react";
+import { AriaDateRangePickerProps, DateValue } from "react-aria";
+import { FocusableRef } from "@react-types/shared";
+
+//#region src/components/fields/DatePicker/DateRangeSeparatedPicker.d.ts
+interface CubeDateRangeSeparatedPickerProps<T extends DateValue = DateValue> extends Omit<AriaDateRangePickerProps<T>, 'errorMessage'>, BaseProps, ContainerStyleProps, DateFieldBase<T>, FieldBaseProps {
+  wrapperStyles?: Styles;
+  inputStyles?: Styles;
+  styles?: Styles;
+  size?: 'small' | 'medium' | 'large' | (string & {});
+  validationState?: ValidationState;
+  maxVisibleMonths?: number;
+  shouldFlip?: boolean;
+  useLocale?: boolean;
+}
+declare const _DateRangeSeparatedPicker: <T extends DateValue>(props: CubeDateRangeSeparatedPickerProps<T> & {
+  ref?: FocusableRef<HTMLElement>;
+}) => ReactElement;
+//#endregion
+export { CubeDateRangeSeparatedPickerProps, _DateRangeSeparatedPicker };
+//# sourceMappingURL=DateRangeSeparatedPicker.d.ts.map

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

@@ -0,0 +1,220 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles } from "../../../tasty/utils/styles.js";
+import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
+import { tasty } from "../../../tasty/tasty.js";
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { useProviderProps } from "../../../provider.js";
+import { useFormProps } from "../../form/Form/Form.js";
+import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
+import { wrapWithField } from "../../form/wrapper.js";
+import { Dialog } from "../../overlays/Dialog/Dialog.js";
+import { DialogTrigger } from "../../overlays/Dialog/DialogTrigger.js";
+import { _DateInputBase } from "./DateInputBase.js";
+import { DEFAULT_DATE_PROPS } from "./props.js";
+import { useFocusManagerRef } from "./utils.js";
+import { _TimeInput } from "./TimeInput.js";
+import { _Calendar } from "../../other/Calendar/Calendar.js";
+import { DatePickerButton } from "./DatePickerButton.js";
+import { DatePickerInput } from "./DatePickerInput.js";
+import { dateMessages } from "./intl.js";
+import { DatePickerElement } from "./DatePickerElement.js";
+import { forwardRef, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDatePicker, useDateRangePicker, useFocusRing } from "react-aria";
+import { useDatePickerState, useDateRangePickerState } from "react-stately";
+
+//#region src/components/fields/DatePicker/DateRangeSeparatedPicker.tsx
+const DateRangeDash = tasty({
+	"aria-hidden": "true",
+	"data-qa": "DateRangeDash",
+	children: "–",
+	styles: {
+		padding: "0 .5x",
+		color: "#dark-03"
+	}
+});
+function DateRangeSeparatedPicker(props, ref) {
+	props = useProviderProps(props);
+	props = useFormProps(props);
+	props = useFieldProps(props, { defaultValidationTrigger: "onBlur" });
+	props = Object.assign({}, DEFAULT_DATE_PROPS, props);
+	extractStyles(props, CONTAINER_STYLES);
+	let { qa, size, placeholderValue, isDisabled, validationState, useLocale: useLocaleProp, autoFocus } = props;
+	let targetRef = useRef(null);
+	let state = useDateRangePickerState({ ...props });
+	let startState = useDatePickerState({
+		...props,
+		onChange: null,
+		value: state.value?.start
+	});
+	let endState = useDatePickerState({
+		...props,
+		onChange: null,
+		value: state.value?.end
+	});
+	let startFocusRingProps = useFocusRing({
+		within: true,
+		isTextInput: true,
+		autoFocus
+	});
+	let startFocusProps = useFocusRing({
+		within: false,
+		isTextInput: false,
+		autoFocus
+	});
+	let endFocusRingProps = useFocusRing({
+		within: true,
+		isTextInput: true,
+		autoFocus
+	});
+	let endFocusProps = useFocusRing({
+		within: false,
+		isTextInput: false,
+		autoFocus
+	});
+	let domRef = useFocusManagerRef(ref);
+	let { groupProps, labelProps, startFieldProps, endFieldProps } = useDateRangePicker(props, state, targetRef);
+	let startProps = useDatePicker(props, startState, targetRef);
+	let endProps = useDatePicker(props, endState, 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;
+	function onChange(value, type) {
+		if (type === "start") {
+			const newRange = {
+				...state.value,
+				start: value
+			};
+			if (newRange.start && newRange.end && newRange.end.compare(newRange.start) < 0) newRange.end = newRange.start;
+			state.setValue(newRange);
+			startProps.calendarProps.onChange(value);
+			startState.setOpen(false);
+		} else {
+			const newRange = {
+				...state.value,
+				end: value
+			};
+			if (newRange.start && newRange.end && newRange.end.compare(newRange.start) < 0) newRange.start = newRange.end;
+			state.setValue(newRange);
+			endProps.calendarProps.onChange(value);
+			endState.setOpen(false);
+		}
+	}
+	return wrapWithField(/* @__PURE__ */ jsxs(DatePickerElement, {
+		ref: targetRef,
+		...groupProps,
+		styles: props.wrapperStyles,
+		qa: qa || "DateRangeSeparatedPicker",
+		"data-input-type": "daterangeseparatedpicker",
+		children: [
+			/* @__PURE__ */ jsx(_DateInputBase, {
+				disableFocusRing: startFocusProps.isFocused,
+				isDisabled,
+				validationState,
+				size,
+				...startFocusRingProps.focusProps,
+				suffix: /* @__PURE__ */ jsxs(DialogTrigger, {
+					hideArrow: true,
+					type: "popover",
+					mobileType: "tray",
+					placement: "bottom right",
+					targetRef,
+					isOpen: startState.isOpen,
+					shouldFlip: props.shouldFlip,
+					onOpenChange: startState.setOpen,
+					children: [/* @__PURE__ */ jsx(DatePickerButton, {
+						size,
+						...mergeProps$1(startProps.buttonProps, startFocusProps.focusProps),
+						isDisabled
+					}), /* @__PURE__ */ jsxs(Dialog, {
+						...startProps.dialogProps,
+						width: "max-content",
+						children: [/* @__PURE__ */ jsx(_Calendar, {
+							...startProps.calendarProps,
+							defaultFocusedValue: state.value?.start || state.value?.end || void 0,
+							selectedRange: state.value?.start && state.value?.end ? state.value : void 0,
+							onChange: (value) => onChange(value, "start")
+						}), showTimeField && /* @__PURE__ */ jsx(_TimeInput, {
+							padding: "1x",
+							label: dateMessages["time"],
+							value: startState.timeValue,
+							placeholderValue: timePlaceholder,
+							granularity: timeGranularity,
+							minValue: timeMinValue,
+							maxValue: timeMaxValue,
+							hourCycle: props.hourCycle,
+							hideTimeZone: props.hideTimeZone,
+							onChange: startState.setTimeValue
+						})]
+					})]
+				}),
+				children: /* @__PURE__ */ jsx(DatePickerInput, {
+					useLocale: useLocaleProp,
+					...startFieldProps
+				})
+			}),
+			/* @__PURE__ */ jsx(DateRangeDash, {}),
+			/* @__PURE__ */ jsx(_DateInputBase, {
+				disableFocusRing: endFocusProps.isFocused,
+				isDisabled,
+				validationState,
+				size,
+				...endFocusRingProps.focusProps,
+				suffix: /* @__PURE__ */ jsxs(DialogTrigger, {
+					hideArrow: true,
+					type: "popover",
+					mobileType: "tray",
+					placement: "bottom right",
+					targetRef,
+					isOpen: endState.isOpen,
+					shouldFlip: props.shouldFlip,
+					onOpenChange: endState.setOpen,
+					children: [/* @__PURE__ */ jsx(DatePickerButton, {
+						"aria-label": "Show calendar for the end date",
+						size,
+						...mergeProps$1(endFocusProps.focusProps, endProps.buttonProps),
+						isDisabled
+					}), /* @__PURE__ */ jsxs(Dialog, {
+						...endProps.dialogProps,
+						width: "max-content",
+						children: [/* @__PURE__ */ jsx(_Calendar, {
+							...endProps.calendarProps,
+							defaultFocusedValue: state.value?.end || state.value?.start || void 0,
+							selectedRange: state.value?.start && state.value?.end ? state.value : void 0,
+							onChange: (value) => {
+								onChange(value, "end");
+							}
+						}), showTimeField && /* @__PURE__ */ jsx(_TimeInput, {
+							padding: "1x",
+							label: dateMessages["time"],
+							value: endState.timeValue,
+							placeholderValue: timePlaceholder,
+							granularity: timeGranularity,
+							minValue: timeMinValue,
+							maxValue: timeMaxValue,
+							hourCycle: props.hourCycle,
+							hideTimeZone: props.hideTimeZone,
+							onChange: endState.setTimeValue
+						})]
+					})]
+				}),
+				children: /* @__PURE__ */ jsx(DatePickerInput, {
+					useLocale: useLocaleProp,
+					...endFieldProps
+				})
+			})
+		]
+	}), domRef, {
+		...props,
+		labelProps: mergeProps$1(props.labelProps, labelProps)
+	});
+}
+const _DateRangeSeparatedPicker = forwardRef(DateRangeSeparatedPicker);
+_DateRangeSeparatedPicker.displayName = "DateRangeSeparatedPicker";
+
+//#endregion
+export { _DateRangeSeparatedPicker };
+//# sourceMappingURL=DateRangeSeparatedPicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeSeparatedPicker.js","names":["DateInputBase","mergeProps","Calendar","TimeInput"],"sources":["../../../../src/components/fields/DatePicker/DateRangeSeparatedPicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { forwardRef, ReactElement, useRef } from 'react';\nimport {\n  AriaDateRangePickerProps,\n  DateValue,\n  useDatePicker,\n  useDateRangePicker,\n  useFocusRing,\n} from 'react-aria';\nimport { useDatePickerState, useDateRangePickerState } from 'react-stately';\n\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps, ValidationState } from '../../../shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  Styles,\n  tasty,\n} from '../../../tasty';\nimport { mergeProps } from '../../../utils/react';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\nimport { Calendar } from '../../other/Calendar/Calendar';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { DatePickerElement } from './DatePickerElement';\nimport { DatePickerInput } from './DatePickerInput';\nimport { dateMessages } from './intl';\nimport { DEFAULT_DATE_PROPS } from './props';\nimport { TimeInput } from './TimeInput';\nimport { DateFieldBase } from './types';\nimport { useFocusManagerRef } from './utils';\n\nconst DateRangeDash = tasty({\n  'aria-hidden': 'true',\n  'data-qa': 'DateRangeDash',\n  children: '–',\n  styles: {\n    padding: '0 .5x',\n    color: '#dark-03',\n  },\n});\n\nexport interface CubeDateRangeSeparatedPickerProps<\n  T extends DateValue = DateValue,\n> extends Omit<AriaDateRangePickerProps<T>, 'errorMessage'>,\n    BaseProps,\n    ContainerStyleProps,\n    DateFieldBase<T>,\n    FieldBaseProps {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  validationState?: ValidationState;\n  maxVisibleMonths?: number;\n  shouldFlip?: boolean;\n  useLocale?: boolean;\n}\n\nfunction DateRangeSeparatedPicker<T extends DateValue>(\n  props: CubeDateRangeSeparatedPickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let {\n    qa,\n    size,\n    placeholderValue,\n    isDisabled,\n    validationState,\n    useLocale: useLocaleProp,\n    autoFocus,\n  } = props;\n  let targetRef = useRef<HTMLDivElement>(null);\n\n  let state = useDateRangePickerState({\n    ...props,\n  });\n\n  let startState = useDatePickerState({\n    ...props,\n    onChange: null,\n    value: state.value?.start,\n  });\n\n  let endState = useDatePickerState({\n    ...props,\n    onChange: null,\n    value: state.value?.end,\n  });\n\n  let startFocusRingProps = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus,\n  });\n  let startFocusProps = useFocusRing({\n    within: false,\n    isTextInput: false,\n    autoFocus,\n  });\n  let endFocusRingProps = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus,\n  });\n  let endFocusProps = useFocusRing({\n    within: false,\n    isTextInput: false,\n    autoFocus,\n  });\n\n  let domRef = useFocusManagerRef(ref);\n\n  let { groupProps, labelProps, startFieldProps, endFieldProps } =\n    useDateRangePicker(props, state, targetRef);\n\n  let startProps = useDatePicker(props, startState, targetRef);\n  let endProps = useDatePicker(props, endState, 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\n  // let visibleMonths = useVisibleMonths(maxVisibleMonths);\n\n  function onChange(value: DateValue, type: 'start' | 'end') {\n    if (type === 'start') {\n      const newRange = { ...state.value, start: value };\n\n      if (\n        newRange.start &&\n        newRange.end &&\n        newRange.end.compare(newRange.start) < 0\n      ) {\n        newRange.end = newRange.start;\n      }\n\n      state.setValue(newRange);\n      startProps.calendarProps.onChange(value);\n      startState.setOpen(false);\n    } else {\n      const newRange = { ...state.value, end: value };\n\n      if (\n        newRange.start &&\n        newRange.end &&\n        newRange.end.compare(newRange.start) < 0\n      ) {\n        newRange.start = newRange.end;\n      }\n\n      state.setValue(newRange);\n      endProps.calendarProps.onChange(value);\n      endState.setOpen(false);\n    }\n  }\n\n  const component = (\n    <DatePickerElement\n      ref={targetRef}\n      {...groupProps}\n      styles={props.wrapperStyles}\n      qa={qa || 'DateRangeSeparatedPicker'}\n      data-input-type=\"daterangeseparatedpicker\"\n    >\n      <DateInputBase\n        disableFocusRing={startFocusProps.isFocused}\n        isDisabled={isDisabled}\n        validationState={validationState}\n        size={size}\n        {...startFocusRingProps.focusProps}\n        suffix={\n          <DialogTrigger\n            hideArrow\n            type=\"popover\"\n            mobileType=\"tray\"\n            placement=\"bottom right\"\n            targetRef={targetRef}\n            isOpen={startState.isOpen}\n            shouldFlip={props.shouldFlip}\n            onOpenChange={startState.setOpen}\n          >\n            <DatePickerButton\n              size={size}\n              {...mergeProps(\n                startProps.buttonProps,\n                startFocusProps.focusProps,\n              )}\n              isDisabled={isDisabled}\n            />\n            <Dialog {...startProps.dialogProps} width=\"max-content\">\n              <Calendar\n                {...startProps.calendarProps}\n                defaultFocusedValue={\n                  state.value?.start || state.value?.end || undefined\n                }\n                selectedRange={\n                  state.value?.start && state.value?.end\n                    ? state.value\n                    : undefined\n                }\n                onChange={(value: DateValue) => onChange(value, 'start')}\n              />\n              {showTimeField && (\n                <TimeInput\n                  padding=\"1x\"\n                  label={dateMessages['time']}\n                  value={startState.timeValue}\n                  placeholderValue={timePlaceholder}\n                  granularity={timeGranularity}\n                  minValue={timeMinValue}\n                  maxValue={timeMaxValue}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  onChange={startState.setTimeValue}\n                />\n              )}\n            </Dialog>\n          </DialogTrigger>\n        }\n      >\n        <DatePickerInput useLocale={useLocaleProp} {...startFieldProps} />\n      </DateInputBase>\n      <DateRangeDash />\n      <DateInputBase\n        disableFocusRing={endFocusProps.isFocused}\n        isDisabled={isDisabled}\n        validationState={validationState}\n        size={size}\n        {...endFocusRingProps.focusProps}\n        suffix={\n          <DialogTrigger\n            hideArrow\n            type=\"popover\"\n            mobileType=\"tray\"\n            placement=\"bottom right\"\n            targetRef={targetRef}\n            isOpen={endState.isOpen}\n            shouldFlip={props.shouldFlip}\n            onOpenChange={endState.setOpen}\n          >\n            <DatePickerButton\n              aria-label=\"Show calendar for the end date\"\n              size={size}\n              {...mergeProps(endFocusProps.focusProps, endProps.buttonProps)}\n              isDisabled={isDisabled}\n            />\n            <Dialog {...endProps.dialogProps} width=\"max-content\">\n              <Calendar\n                {...endProps.calendarProps}\n                defaultFocusedValue={\n                  state.value?.end || state.value?.start || undefined\n                }\n                selectedRange={\n                  state.value?.start && state.value?.end\n                    ? state.value\n                    : undefined\n                }\n                onChange={(value: DateValue) => {\n                  onChange(value, 'end');\n                }}\n              />\n              {showTimeField && (\n                <TimeInput\n                  padding=\"1x\"\n                  label={dateMessages['time']}\n                  value={endState.timeValue}\n                  placeholderValue={timePlaceholder}\n                  granularity={timeGranularity}\n                  minValue={timeMinValue}\n                  maxValue={timeMaxValue}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  onChange={endState.setTimeValue}\n                />\n              )}\n            </Dialog>\n          </DialogTrigger>\n        }\n      >\n        <DatePickerInput useLocale={useLocaleProp} {...endFieldProps} />\n      </DateInputBase>\n    </DatePickerElement>\n  );\n\n  return wrapWithField(component, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _DateRangeSeparatedPicker = forwardRef(DateRangeSeparatedPicker) as <\n  T extends DateValue,\n>(\n  props: CubeDateRangeSeparatedPickerProps<T> & {\n    ref?: FocusableRef<HTMLElement>;\n  },\n) => ReactElement;\n\n(_DateRangeSeparatedPicker as any).displayName = 'DateRangeSeparatedPicker';\n\nexport { _DateRangeSeparatedPicker as DateRangeSeparatedPicker };\n"],"mappings":"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"}