@cube-dev/ui-kit 0.197.0 → 0.198.1

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

@@ -1 +1 @@
-{"version":3,"file":"DatePickerSegment.js","names":["tasty","useRef","DateValue","useDateSegment","DateFieldState","DateSegment","DateFieldBase","DatePickerSegmentProps","segment","state","LiteralSegmentProps","LiteralSegmentElement","qa","as","styles","EditableSegmentElement","padding","fontVariantNumeric","textAlign","font","border","outline","color","fill","radius","Placeholder","opacity","DatePickerSegment","t0","$","_c","otherProps","type","t1","LiteralSegment","undefined","t2","text","EditableSegment","ref","segmentProps","isEditable","isPlaceholder","placeholder","t3","maxValue","String","length","t4","style","minWidth","t5","t6"],"sources":["../../../../src/components/fields/DatePicker/DatePickerSegment.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { useRef } from 'react';\nimport { DateValue, useDateSegment } from 'react-aria';\nimport { DateFieldState, DateSegment } from 'react-stately';\n\nimport { DateFieldBase } from './types';\n\ninterface DatePickerSegmentProps extends DateFieldBase<DateValue> {\n  segment: DateSegment;\n  state: DateFieldState;\n}\n\ninterface LiteralSegmentProps {\n  segment: DateSegment;\n}\n\nconst LiteralSegmentElement = tasty({\n  qa: 'LiteralSegment',\n  as: 'span',\n  'aria-hidden': 'true',\n  styles: {},\n});\n\nconst EditableSegmentElement = tasty({\n  qa: 'EditableSegment',\n  styles: {\n    padding: '0 1bw',\n    fontVariantNumeric: 'tabular-nums lining-nums',\n    textAlign: 'right',\n    font: 'monospace',\n    border: 0,\n    outline: 0,\n    color: {\n      '': 'inherit',\n      ':focus': '#white',\n    },\n    fill: {\n      '': '#clear',\n      ':focus': '#primary',\n    },\n    radius: '.25x',\n\n    Placeholder: {\n      opacity: '$disabled-opacity',\n    },\n  },\n});\n\nexport function DatePickerSegment({\n  segment,\n  state,\n  ...otherProps\n}: DatePickerSegmentProps) {\n  switch (segment.type) {\n    // A separator, e.g. punctuation\n    case 'literal':\n      return <LiteralSegment segment={segment} />;\n\n    // Editable segment\n    default:\n      return (\n        <EditableSegment segment={segment} state={state} {...otherProps} />\n      );\n  }\n}\n\nfunction LiteralSegment({ segment }: LiteralSegmentProps) {\n  return (\n    <LiteralSegmentElement\n      data-type={segment.type === 'literal' ? undefined : segment.type}\n    >\n      {segment.text}\n    </LiteralSegmentElement>\n  );\n}\n\nfunction EditableSegment({ segment, state }: DatePickerSegmentProps) {\n  let ref = useRef(null);\n  let { segmentProps } = useDateSegment(segment, state, ref);\n  return (\n    <EditableSegmentElement\n      {...segmentProps}\n      ref={ref}\n      mods={{\n        placeholder: segment.isPlaceholder,\n        'read-only': !segment.isEditable,\n      }}\n      style={{\n        ...segmentProps.style,\n        minWidth:\n          segment.maxValue != null\n            ? `calc(${String(segment.maxValue).length + 'ch'})`\n            : undefined,\n      }}\n      data-testid={segment.type}\n    >\n      {segment.isPlaceholder ? (\n        <span data-element=\"Placeholder\" aria-hidden=\"true\">\n          {segment.placeholder}\n        </span>\n      ) : (\n        segment.text\n      )}\n    </EditableSegmentElement>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"DatePickerSegment.js","names":["tasty","useRef","DateValue","useDateSegment","DateFieldState","DateSegment","DateFieldBase","DatePickerSegmentProps","segment","state","LiteralSegmentProps","LiteralSegmentElement","qa","as","styles","EditableSegmentElement","padding","fontVariantNumeric","textAlign","font","border","outline","color","fill","radius","Placeholder","opacity","DatePickerSegment","t0","$","_c","otherProps","type","t1","LiteralSegment","undefined","t2","text","EditableSegment","ref","segmentProps","isEditable","isPlaceholder","placeholder","t3","maxValue","String","length","t4","style","minWidth","t5","t6","_c"],"sources":["../../../../src/components/fields/DatePicker/DatePickerSegment.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { useRef } from 'react';\nimport { DateValue, useDateSegment } from 'react-aria';\nimport { DateFieldState, DateSegment } from 'react-stately';\n\nimport { DateFieldBase } from './types';\n\ninterface DatePickerSegmentProps extends DateFieldBase<DateValue> {\n  segment: DateSegment;\n  state: DateFieldState;\n}\n\ninterface LiteralSegmentProps {\n  segment: DateSegment;\n}\n\nconst LiteralSegmentElement = tasty({\n  qa: 'LiteralSegment',\n  as: 'span',\n  'aria-hidden': 'true',\n  styles: {},\n});\n\nconst EditableSegmentElement = tasty({\n  qa: 'EditableSegment',\n  styles: {\n    padding: '0 1bw',\n    fontVariantNumeric: 'tabular-nums lining-nums',\n    textAlign: 'right',\n    font: 'monospace',\n    border: 0,\n    outline: 0,\n    color: {\n      '': 'inherit',\n      ':focus': '#white',\n    },\n    fill: {\n      '': '#clear',\n      ':focus': '#primary',\n    },\n    radius: '.25x',\n\n    Placeholder: {\n      opacity: '$disabled-opacity',\n    },\n  },\n});\n\nexport function DatePickerSegment({\n  segment,\n  state,\n  ...otherProps\n}: DatePickerSegmentProps) {\n  switch (segment.type) {\n    // A separator, e.g. punctuation\n    case 'literal':\n      return <LiteralSegment segment={segment} />;\n\n    // Editable segment\n    default:\n      return (\n        <EditableSegment segment={segment} state={state} {...otherProps} />\n      );\n  }\n}\n\nfunction LiteralSegment({ segment }: LiteralSegmentProps) {\n  return (\n    <LiteralSegmentElement\n      data-type={segment.type === 'literal' ? undefined : segment.type}\n    >\n      {segment.text}\n    </LiteralSegmentElement>\n  );\n}\n\nfunction EditableSegment({ segment, state }: DatePickerSegmentProps) {\n  let ref = useRef(null);\n  let { segmentProps } = useDateSegment(segment, state, ref);\n  return (\n    <EditableSegmentElement\n      {...segmentProps}\n      ref={ref}\n      mods={{\n        placeholder: segment.isPlaceholder,\n        'read-only': !segment.isEditable,\n      }}\n      style={{\n        ...segmentProps.style,\n        minWidth:\n          segment.maxValue != null\n            ? `calc(${String(segment.maxValue).length + 'ch'})`\n            : undefined,\n      }}\n      data-testid={segment.type}\n    >\n      {segment.isPlaceholder ? (\n        <span data-element=\"Placeholder\" aria-hidden=\"true\">\n          {segment.placeholder}\n        </span>\n      ) : (\n        segment.text\n      )}\n    </EditableSegmentElement>\n  );\n}\n"],"mappings":"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"}

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

@@ -5,9 +5,8 @@ import { DateFieldBase } from "./types.js";
 import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
 import { ReactElement, Ref, RefObject } from "react";
 import { AriaDateRangePickerProps, DateValue, Placement } from "react-aria";
-
 //#region src/components/fields/DatePicker/DateRangePicker.d.ts
-interface CubeDateRangePickerProps<T extends DateValue = DateValue> extends Omit<AriaDateRangePickerProps<T>, 'errorMessage' | 'form' | 'name' | keyof DateFieldBase<T>>, BaseProps, DateFieldBase<T>, ContainerStyleProps, FieldBaseProps<{
+export interface CubeDateRangePickerProps<T extends DateValue = DateValue> extends Omit<AriaDateRangePickerProps<T>, 'errorMessage' | 'form' | 'name' | keyof DateFieldBase<T>>, BaseProps, DateFieldBase<T>, ContainerStyleProps, FieldBaseProps<{
   start: T;
   end: T;
 } | null | undefined> {
@@ -38,5 +37,5 @@ declare const _DateRangePicker: <T extends DateValue = DateValue>(props: CubeDat
   ref?: Ref<HTMLElement>;
 }) => ReactElement | null;
 //#endregion
-export { CubeDateRangePickerProps, _DateRangePicker };
+export { _DateRangePicker as DateRangePicker };
 //# sourceMappingURL=DateRangePicker.d.ts.map

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.1 | Cube Dev Team */
 import { extractStyles, mergeStyleLayers } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";
@@ -7,20 +7,19 @@ 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 { DialogTrigger } from "../../overlays/Dialog/DialogTrigger.js";
-import { _DateInputBase } from "./DateInputBase.js";
+import { DateInputBase as _DateInputBase } from "./DateInputBase.js";
 import { DEFAULT_DATE_PROPS } from "./props.js";
 import { useFocusManagerRef } from "./utils.js";
-import { _TimeInput } from "./TimeInput.js";
+import { TimeInput as _TimeInput } from "./TimeInput.js";
 import { DatePickerButton } from "./DatePickerButton.js";
 import { DatePickerInput } from "./DatePickerInput.js";
-import { _RangeCalendar } from "../../other/Calendar/RangeCalendar.js";
+import { RangeCalendar as _RangeCalendar } from "../../other/Calendar/RangeCalendar.js";
 import { c } from "react/compiler-runtime";
 import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useDateRangePicker, useFocusRing } from "react-aria";
 import { useDateRangePickerState } from "react-stately";
-
 //#region src/components/fields/DatePicker/DateRangePicker.tsx
 const DateRangeDash = tasty({
 	"aria-hidden": "true",
@@ -79,7 +78,8 @@ function DateRangePicker(rawProps, ref) {
 		$[7] = t4;
 	} else t4 = $[7];
 	const { isFocused: isFocusedButton, focusProps: focusPropsButton } = useFocusRing(t4);
-	const domRef = useFocusManagerRef(ref);
+	const domRef = useRef(null);
+	useFocusManagerRef(ref, domRef);
 	const { groupProps, labelProps, startFieldProps, endFieldProps, buttonProps, dialogProps, calendarProps } = useDateRangePicker(props, state, targetRef);
 	const placeholder = placeholderValue ?? void 0;
 	const timePlaceholder = placeholder && "hour" in placeholder ? placeholder : void 0;
@@ -214,11 +214,13 @@ function DateRangePicker(rawProps, ref) {
 		$[46] = t15;
 	} else t15 = $[46];
 	let t16;
-	if ($[47] !== focusProps || $[48] !== groupProps || $[49] !== isDisabled || $[50] !== isFocusedButton || $[51] !== isInvalid || $[52] !== isValid || $[53] !== size || $[54] !== styles || $[55] !== t12 || $[56] !== t13 || $[57] !== t15 || $[58] !== t5) {
+	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,
@@ -234,29 +236,29 @@ function DateRangePicker(rawProps, ref) {
 				t15
 			]
 		});
-		$[47] = focusProps;
-		$[48] = groupProps;
-		$[49] = isDisabled;
-		$[50] = isFocusedButton;
-		$[51] = isInvalid;
-		$[52] = isValid;
-		$[53] = size;
-		$[54] = styles;
-		$[55] = t12;
-		$[56] = t13;
-		$[57] = t15;
-		$[58] = t5;
-		$[59] = t16;
-	} else t16 = $[59];
+		$[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 ($[60] !== component || $[61] !== domRef || $[62] !== labelProps || $[63] !== props) {
-		t17 = wrapWithField(component, domRef, {
+	if ($[61] !== component || $[62] !== labelProps || $[63] !== props) {
+		t17 = wrapWithField(component, {
 			...props,
 			labelProps: mergeProps$1(props.labelProps, labelProps)
 		});
-		$[60] = component;
-		$[61] = domRef;
+		$[61] = component;
 		$[62] = labelProps;
 		$[63] = props;
 		$[64] = t17;
@@ -265,7 +267,7 @@ function DateRangePicker(rawProps, ref) {
 }
 const _DateRangePicker = forwardRef(DateRangePicker);
 _DateRangePicker.displayName = "DateRangePicker";
-
 //#endregion
-export { _DateRangePicker };
+export { _DateRangePicker as DateRangePicker };
+
 //# sourceMappingURL=DateRangePicker.js.map

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"],"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 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 = 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 ?? 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      qa={qa || 'DateRangePicker'}\n      inputType=\"daterangepicker\"\n      styles={styles}\n      disableFocusRing={isFocusedButton}\n      isDisabled={isDisabled}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      size={size}\n      fieldProps={groupProps}\n      {...focusProps}\n      suffix={\n        <DialogTrigger\n          hideArrow\n          type=\"popover\"\n          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, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _DateRangePicker = forwardRef(DateRangePicker) as <\n  T extends DateValue = DateValue,\n>(\n  props: CubeDateRangePickerProps<T> & { ref?: Ref<HTMLElement> },\n) => ReactElement | null;\n\n(_DateRangePicker as any).displayName = 'DateRangePicker';\n\nexport { _DateRangePicker as DateRangePicker };\n"],"mappings":"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"}
+{"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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"}

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

@@ -6,9 +6,8 @@ import { BaseProps, ContainerStyleProps, 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
-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, ContainerStyleProps, DateFieldBase<T>, FieldBaseProps<{
   start: T;
   end: T;
 } | null | undefined> {
@@ -39,5 +38,5 @@ declare const _DateRangeSeparatedPicker: <T extends DateValue>(props: CubeDateRa
   ref?: FocusableRef<HTMLElement>;
 }) => ReactElement;
 //#endregion
-export { CubeDateRangeSeparatedPickerProps, _DateRangeSeparatedPicker };
+export { _DateRangeSeparatedPicker as DateRangeSeparatedPicker };
 //# sourceMappingURL=DateRangeSeparatedPicker.d.ts.map

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.1 | Cube Dev Team */
 import { extractStyles, mergeStyleLayers } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";
@@ -6,11 +6,11 @@ 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 { DialogTrigger } from "../../overlays/Dialog/DialogTrigger.js";
-import { _DateInputBase } from "./DateInputBase.js";
+import { DateInputBase as _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 { TimeInput as _TimeInput } from "./TimeInput.js";
+import { Calendar as _Calendar } from "../../other/Calendar/Calendar.js";
 import { DatePickerButton } from "./DatePickerButton.js";
 import { DatePickerInput } from "./DatePickerInput.js";
 import { DatePickerElement } from "./DatePickerElement.js";
@@ -20,7 +20,6 @@ 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",
@@ -141,7 +140,7 @@ function DateRangeSeparatedPicker(rawProps, ref) {
 		$[21] = t12;
 	} else t12 = $[21];
 	const endFocusProps = useFocusRing(t12);
-	const domRef = useFocusManagerRef(ref);
+	useFocusManagerRef(ref, targetRef);
 	const { groupProps, labelProps, startFieldProps, endFieldProps } = useDateRangePicker(props, state, targetRef);
 	const startProps = useDatePicker(startDateProps, startState, targetRef);
 	const endProps = useDatePicker(endDateProps, endState, targetRef);
@@ -326,8 +325,9 @@ function DateRangeSeparatedPicker(rawProps, ref) {
 		$[72] = t32;
 	} else t32 = $[72];
 	let t33;
-	if ($[73] !== isDisabled || $[74] !== isInvalid || $[75] !== isValid || $[76] !== size || $[77] !== startFocusProps.isFocused || $[78] !== startFocusRingProps.focusProps || $[79] !== t31 || $[80] !== t32) {
+	if ($[73] !== autoFocus || $[74] !== isDisabled || $[75] !== isInvalid || $[76] !== isValid || $[77] !== size || $[78] !== startFocusProps.isFocused || $[79] !== startFocusRingProps.focusProps || $[80] !== t31 || $[81] !== t32) {
 		t33 = /* @__PURE__ */ jsx(_DateInputBase, {
+			autoFocus,
 			disableFocusRing: t15,
 			isDisabled,
 			isInvalid,
@@ -337,21 +337,22 @@ function DateRangeSeparatedPicker(rawProps, ref) {
 			suffix: t31,
 			children: t32
 		});
-		$[73] = isDisabled;
-		$[74] = isInvalid;
-		$[75] = isValid;
-		$[76] = size;
-		$[77] = startFocusProps.isFocused;
-		$[78] = startFocusRingProps.focusProps;
-		$[79] = t31;
-		$[80] = t32;
-		$[81] = t33;
-	} else t33 = $[81];
+		$[73] = autoFocus;
+		$[74] = isDisabled;
+		$[75] = isInvalid;
+		$[76] = isValid;
+		$[77] = size;
+		$[78] = startFocusProps.isFocused;
+		$[79] = startFocusRingProps.focusProps;
+		$[80] = t31;
+		$[81] = t32;
+		$[82] = t33;
+	} else t33 = $[82];
 	let t34;
-	if ($[82] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[83] === Symbol.for("react.memo_cache_sentinel")) {
 		t34 = /* @__PURE__ */ jsx(DateRangeDash, {});
-		$[82] = t34;
-	} else t34 = $[82];
+		$[83] = t34;
+	} else t34 = $[83];
 	const t35 = endFocusProps.isFocused;
 	const t36 = endFocusRingProps.focusProps;
 	const t37 = props.placement ?? "bottom right";
@@ -360,66 +361,66 @@ function DateRangeSeparatedPicker(rawProps, ref) {
 	const t40 = props.shouldFlip;
 	const t41 = endState.setOpen;
 	let t42;
-	if ($[83] !== endFocusProps.focusProps || $[84] !== endProps.buttonProps) {
+	if ($[84] !== endFocusProps.focusProps || $[85] !== endProps.buttonProps) {
 		t42 = mergeProps$1(endFocusProps.focusProps, endProps.buttonProps);
-		$[83] = endFocusProps.focusProps;
-		$[84] = endProps.buttonProps;
-		$[85] = t42;
-	} else t42 = $[85];
+		$[84] = endFocusProps.focusProps;
+		$[85] = endProps.buttonProps;
+		$[86] = t42;
+	} else t42 = $[86];
 	let t43;
-	if ($[86] !== t) {
+	if ($[87] !== t) {
 		t43 = t("datePicker.showEndCalendar", "Show calendar for the end date");
-		$[86] = t;
-		$[87] = t43;
-	} else t43 = $[87];
+		$[87] = t;
+		$[88] = t43;
+	} else t43 = $[88];
 	let t44;
-	if ($[88] !== isDisabled || $[89] !== size || $[90] !== t42 || $[91] !== t43) {
+	if ($[89] !== isDisabled || $[90] !== size || $[91] !== t42 || $[92] !== t43) {
 		t44 = /* @__PURE__ */ jsx(DatePickerButton, {
 			size,
 			...t42,
 			"aria-label": t43,
 			isDisabled
 		});
-		$[88] = isDisabled;
-		$[89] = size;
-		$[90] = t42;
-		$[91] = t43;
-		$[92] = t44;
-	} else t44 = $[92];
+		$[89] = isDisabled;
+		$[90] = size;
+		$[91] = t42;
+		$[92] = t43;
+		$[93] = t44;
+	} else t44 = $[93];
 	const t45 = state.value?.end || state.value?.start || void 0;
 	let t46;
-	if ($[93] !== state.value) {
+	if ($[94] !== state.value) {
 		t46 = state.value?.start && state.value?.end ? {
 			start: state.value.start,
 			end: state.value.end
 		} : void 0;
-		$[93] = state.value;
-		$[94] = t46;
-	} else t46 = $[94];
+		$[94] = state.value;
+		$[95] = t46;
+	} else t46 = $[95];
 	let t47;
-	if ($[95] !== onChange) {
+	if ($[96] !== onChange) {
 		t47 = (value_1) => {
 			onChange(value_1, "end");
 		};
-		$[95] = onChange;
-		$[96] = t47;
-	} else t47 = $[96];
+		$[96] = onChange;
+		$[97] = t47;
+	} else t47 = $[97];
 	let t48;
-	if ($[97] !== endProps.calendarProps || $[98] !== t45 || $[99] !== t46 || $[100] !== t47) {
+	if ($[98] !== endProps.calendarProps || $[99] !== t45 || $[100] !== t46 || $[101] !== t47) {
 		t48 = /* @__PURE__ */ jsx(_Calendar, {
 			...endProps.calendarProps,
 			defaultFocusedValue: t45,
 			selectedRange: t46,
 			onChange: t47
 		});
-		$[97] = endProps.calendarProps;
-		$[98] = t45;
-		$[99] = t46;
-		$[100] = t47;
-		$[101] = t48;
-	} else t48 = $[101];
+		$[98] = endProps.calendarProps;
+		$[99] = t45;
+		$[100] = t46;
+		$[101] = t47;
+		$[102] = t48;
+	} else t48 = $[102];
 	let t49;
-	if ($[102] !== endState.setTimeValue || $[103] !== endState.timeValue || $[104] !== props.hideTimeZone || $[105] !== props.hourCycle || $[106] !== showTimeField || $[107] !== t || $[108] !== timeGranularity || $[109] !== timeMaxValue || $[110] !== timeMinValue || $[111] !== timePlaceholder) {
+	if ($[103] !== endState.setTimeValue || $[104] !== endState.timeValue || $[105] !== props.hideTimeZone || $[106] !== props.hourCycle || $[107] !== showTimeField || $[108] !== t || $[109] !== timeGranularity || $[110] !== timeMaxValue || $[111] !== timeMinValue || $[112] !== timePlaceholder) {
 		t49 = showTimeField && /* @__PURE__ */ jsx(_TimeInput, {
 			padding: "1x",
 			label: t("datePicker.time", "Time"),
@@ -432,33 +433,33 @@ function DateRangeSeparatedPicker(rawProps, ref) {
 			hideTimeZone: props.hideTimeZone,
 			onChange: endState.setTimeValue
 		});
-		$[102] = endState.setTimeValue;
-		$[103] = endState.timeValue;
-		$[104] = props.hideTimeZone;
-		$[105] = props.hourCycle;
-		$[106] = showTimeField;
-		$[107] = t;
-		$[108] = timeGranularity;
-		$[109] = timeMaxValue;
-		$[110] = timeMinValue;
-		$[111] = timePlaceholder;
-		$[112] = t49;
-	} else t49 = $[112];
+		$[103] = endState.setTimeValue;
+		$[104] = endState.timeValue;
+		$[105] = props.hideTimeZone;
+		$[106] = props.hourCycle;
+		$[107] = showTimeField;
+		$[108] = t;
+		$[109] = timeGranularity;
+		$[110] = timeMaxValue;
+		$[111] = timeMinValue;
+		$[112] = timePlaceholder;
+		$[113] = t49;
+	} else t49 = $[113];
 	let t50;
-	if ($[113] !== endProps.dialogProps || $[114] !== t48 || $[115] !== t49) {
+	if ($[114] !== endProps.dialogProps || $[115] !== t48 || $[116] !== t49) {
 		t50 = /* @__PURE__ */ jsxs(Dialog, {
 			...endProps.dialogProps,
 			width: "max-content",
 			overflow: "auto",
 			children: [t48, t49]
 		});
-		$[113] = endProps.dialogProps;
-		$[114] = t48;
-		$[115] = t49;
-		$[116] = t50;
-	} else t50 = $[116];
+		$[114] = endProps.dialogProps;
+		$[115] = t48;
+		$[116] = t49;
+		$[117] = t50;
+	} else t50 = $[117];
 	let t51;
-	if ($[117] !== endState.isOpen || $[118] !== endState.setOpen || $[119] !== props.shouldFlip || $[120] !== t37 || $[121] !== t38 || $[122] !== t44 || $[123] !== t50) {
+	if ($[118] !== endState.isOpen || $[119] !== endState.setOpen || $[120] !== props.shouldFlip || $[121] !== t37 || $[122] !== t38 || $[123] !== t44 || $[124] !== t50) {
 		t51 = /* @__PURE__ */ jsxs(DialogTrigger, {
 			hideArrow: true,
 			type: "popover",
@@ -469,27 +470,27 @@ function DateRangeSeparatedPicker(rawProps, ref) {
 			onOpenChange: t41,
 			children: [t44, t50]
 		});
-		$[117] = endState.isOpen;
-		$[118] = endState.setOpen;
-		$[119] = props.shouldFlip;
-		$[120] = t37;
-		$[121] = t38;
-		$[122] = t44;
-		$[123] = t50;
-		$[124] = t51;
-	} else t51 = $[124];
+		$[118] = endState.isOpen;
+		$[119] = endState.setOpen;
+		$[120] = props.shouldFlip;
+		$[121] = t37;
+		$[122] = t38;
+		$[123] = t44;
+		$[124] = t50;
+		$[125] = t51;
+	} else t51 = $[125];
 	let t52;
-	if ($[125] !== endFieldProps || $[126] !== useLocaleProp) {
+	if ($[126] !== endFieldProps || $[127] !== useLocaleProp) {
 		t52 = /* @__PURE__ */ jsx(DatePickerInput, {
 			useLocale: useLocaleProp,
 			...endFieldProps
 		});
-		$[125] = endFieldProps;
-		$[126] = useLocaleProp;
-		$[127] = t52;
-	} else t52 = $[127];
+		$[126] = endFieldProps;
+		$[127] = useLocaleProp;
+		$[128] = t52;
+	} else t52 = $[128];
 	let t53;
-	if ($[128] !== endFocusProps.isFocused || $[129] !== endFocusRingProps.focusProps || $[130] !== isDisabled || $[131] !== isInvalid || $[132] !== isValid || $[133] !== size || $[134] !== t51 || $[135] !== t52) {
+	if ($[129] !== endFocusProps.isFocused || $[130] !== endFocusRingProps.focusProps || $[131] !== isDisabled || $[132] !== isInvalid || $[133] !== isValid || $[134] !== size || $[135] !== t51 || $[136] !== t52) {
 		t53 = /* @__PURE__ */ jsx(_DateInputBase, {
 			disableFocusRing: t35,
 			isDisabled,
@@ -500,18 +501,18 @@ function DateRangeSeparatedPicker(rawProps, ref) {
 			suffix: t51,
 			children: t52
 		});
-		$[128] = endFocusProps.isFocused;
-		$[129] = endFocusRingProps.focusProps;
-		$[130] = isDisabled;
-		$[131] = isInvalid;
-		$[132] = isValid;
-		$[133] = size;
-		$[134] = t51;
-		$[135] = t52;
-		$[136] = t53;
-	} else t53 = $[136];
+		$[129] = endFocusProps.isFocused;
+		$[130] = endFocusRingProps.focusProps;
+		$[131] = isDisabled;
+		$[132] = isInvalid;
+		$[133] = isValid;
+		$[134] = size;
+		$[135] = t51;
+		$[136] = t52;
+		$[137] = t53;
+	} else t53 = $[137];
 	let t54;
-	if ($[137] !== groupProps || $[138] !== styles || $[139] !== t14 || $[140] !== t33 || $[141] !== t53) {
+	if ($[138] !== groupProps || $[139] !== styles || $[140] !== t14 || $[141] !== t33 || $[142] !== t53) {
 		t54 = /* @__PURE__ */ jsxs(DatePickerElement, {
 			ref: targetRef,
 			...groupProps,
@@ -524,22 +525,21 @@ function DateRangeSeparatedPicker(rawProps, ref) {
 				t53
 			]
 		});
-		$[137] = groupProps;
-		$[138] = styles;
-		$[139] = t14;
-		$[140] = t33;
-		$[141] = t53;
-		$[142] = t54;
-	} else t54 = $[142];
+		$[138] = groupProps;
+		$[139] = styles;
+		$[140] = t14;
+		$[141] = t33;
+		$[142] = t53;
+		$[143] = t54;
+	} else t54 = $[143];
 	const component = t54;
 	let t55;
-	if ($[143] !== component || $[144] !== domRef || $[145] !== labelProps || $[146] !== props) {
-		t55 = wrapWithField(component, domRef, {
+	if ($[144] !== component || $[145] !== labelProps || $[146] !== props) {
+		t55 = wrapWithField(component, {
 			...props,
 			labelProps: mergeProps$1(props.labelProps, labelProps)
 		});
-		$[143] = component;
-		$[144] = domRef;
+		$[144] = component;
 		$[145] = labelProps;
 		$[146] = props;
 		$[147] = t55;
@@ -548,7 +548,7 @@ function DateRangeSeparatedPicker(rawProps, ref) {
 }
 const _DateRangeSeparatedPicker = forwardRef(DateRangeSeparatedPicker);
 _DateRangeSeparatedPicker.displayName = "DateRangeSeparatedPicker";
-
 //#endregion
-export { _DateRangeSeparatedPicker };
+export { _DateRangeSeparatedPicker as DateRangeSeparatedPicker };
+
 //# sourceMappingURL=DateRangeSeparatedPicker.js.map