@cube-dev/ui-kit 0.182.0 → 0.184.0

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

@@ -1 +1 @@
-{"version":3,"file":"PeriodPicker.js","names":["Calendar","DateInputBase","mergeProps"],"sources":["../../../../src/components/fields/DatePicker/PeriodPicker.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, useId, useRef } from 'react';\nimport {\n  AriaDatePickerProps,\n  DateValue,\n  useDatePicker,\n  useFocusRing,\n  useLocale,\n} from 'react-aria';\nimport { useDatePickerState } from 'react-stately';\n\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Calendar } from '../../other/Calendar/Calendar';\nimport { PeriodCalendar } from '../../other/Calendar/PeriodCalendar';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { formatPeriod, PickerType, snapToPeriod } from './period';\nimport { useFocusManagerRef } from './utils';\n\nconst PeriodValueElement = tasty({\n  qa: 'PeriodPickerValue',\n  styles: {\n    preset: 't3',\n    width: 'max 100%',\n    whiteSpace: 'nowrap',\n    textOverflow: 'ellipsis',\n    overflow: 'hidden',\n    color: {\n      '': '#dark',\n      placeholder: '#dark.30',\n      disabled: '#dark.30',\n    },\n  },\n});\n\nexport interface CubePeriodPickerProps<T extends DateValue = DateValue>\n  extends Omit<\n      AriaDatePickerProps<T>,\n      'errorMessage' | 'granularity' | 'form' | 'name'\n    >,\n    BaseProps,\n    ContainerStyleProps,\n    FieldBaseProps<T | null | undefined> {\n  /** Which period the picker selects. Set by the concrete picker components. */\n  picker?: PickerType;\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  triggerStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  shouldFlip?: boolean;\n  /** Placeholder shown when no value is selected. */\n  placeholder?: string;\n  /** Override how the selected value is rendered as text. */\n  formatValue?: (date: DateValue, picker: PickerType, locale: string) => string;\n}\n\nfunction PeriodPicker<T extends DateValue>(\n  props: CubePeriodPickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let {\n    qa,\n    size,\n    picker = 'month',\n    placeholder,\n    formatValue,\n    isDisabled,\n    isReadOnly,\n    isInvalid,\n    isValid,\n    autoFocus,\n  } = props;\n\n  let defaultPlaceholder: Record<PickerType, string> = {\n    week: t('datePicker.selectWeek', 'Select week'),\n    month: t('datePicker.selectMonth', 'Select month'),\n    quarter: t('datePicker.selectQuarter', 'Select quarter'),\n    year: t('datePicker.selectYear', 'Select year'),\n  };\n\n  let { locale } = useLocale();\n  let targetRef = useRef<HTMLDivElement>(null);\n  let state = useDatePickerState({\n    ...props,\n    granularity: 'day',\n    shouldCloseOnSelect: true,\n  });\n  let { isOpen, setOpen } = state;\n\n  let domRef = useFocusManagerRef(ref);\n\n  let { isFocused: isFocusedButton, focusProps: focusPropsButton } =\n    useFocusRing({\n      within: false,\n      isTextInput: false,\n      autoFocus,\n    });\n\n  let { groupProps, labelProps, buttonProps, dialogProps, calendarProps } =\n    useDatePicker({ ...props, granularity: 'day' }, state, targetRef);\n\n  let handleSelect = (date: DateValue) => {\n    state.setValue(snapToPeriod(date, picker, locale));\n    setOpen(false);\n  };\n\n  let displayText = state.value\n    ? (formatValue ?? formatPeriod)(state.value, picker, locale)\n    : placeholder ?? defaultPlaceholder[picker];\n\n  // The value is rendered as text rather than editable segments, so the trigger\n  // has to point at it to announce the current selection.\n  let valueId = useId();\n\n  const panel =\n    picker === 'week' ? (\n      <Calendar\n        {...calendarProps}\n        autoFocus\n        pickerMode=\"week\"\n        isDisabled={isDisabled}\n        onChange={handleSelect}\n      />\n    ) : (\n      <PeriodCalendar\n        autoFocus\n        picker={picker}\n        value={calendarProps.value}\n        minValue={calendarProps.minValue}\n        maxValue={calendarProps.maxValue}\n        isDateUnavailable={calendarProps.isDateUnavailable}\n        isDisabled={isDisabled}\n        onChange={handleSelect}\n      />\n    );\n\n  const component = (\n    <DateInputBase\n      ref={targetRef}\n      qa={qa || 'PeriodPicker'}\n      inputType=\"datepicker\"\n      styles={{ display: 'grid', ...styles, ...props.wrapperStyles }}\n      inputStyles={{\n        cursor: isDisabled || isReadOnly ? 'default' : 'pointer',\n        ...props.inputStyles,\n      }}\n      disableFocusRing={isFocusedButton}\n      isDisabled={isDisabled}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      size={size}\n      fieldProps={groupProps}\n      suffix={\n        <DialogTrigger\n          hideArrow\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement=\"bottom right\"\n          targetRef={targetRef}\n          isOpen={isOpen}\n          shouldFlip={props.shouldFlip}\n          onOpenChange={setOpen}\n        >\n          <DatePickerButton\n            size={size}\n            {...mergeProps(buttonProps, focusPropsButton)}\n            aria-describedby={valueId}\n            // Passed separately, not merged: only the field-disabled half is\n            // inherited. See `DatePickerButton`.\n            isDisabled={isDisabled}\n            isReadOnly={isReadOnly}\n            styles={props.triggerStyles}\n          />\n          <Dialog {...dialogProps} width=\"max-content\">\n            {panel}\n          </Dialog>\n        </DialogTrigger>\n      }\n    >\n      <PeriodValueElement\n        id={valueId}\n        mods={{ placeholder: !state.value, disabled: isDisabled }}\n        onClick={() => !isDisabled && !isReadOnly && setOpen(true)}\n      >\n        {displayText}\n      </PeriodValueElement>\n    </DateInputBase>\n  );\n\n  return wrapWithField(component, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _PeriodPicker = forwardRef(PeriodPicker);\n\n_PeriodPicker.displayName = 'PeriodPicker';\n\nexport { _PeriodPicker as PeriodPicker };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAgCA,MAAM,qBAAqB,MAAM;CAC/B,IAAI;CACJ,QAAQ;EACN,QAAQ;EACR,OAAO;EACP,YAAY;EACZ,cAAc;EACd,UAAU;EACV,OAAO;GACL,IAAI;GACJ,aAAa;GACb,UAAU;GACX;EACF;CACF,CAAC;AAwBF,SAAS,aACP,OACA,KACA;CACA,MAAM,EAAE,MAAM,SAAS;AAEvB,SAAQ,cAAc,OAAO,EAC3B,0BAA0B,UAC3B,CAAC;CAEF,IAAI,SAAS,cAAc,OAAO,iBAAiB;CAEnD,IAAI,EACF,IACA,MACA,SAAS,SACT,aACA,aACA,YACA,YACA,WACA,SACA,cACE;CAEJ,IAAI,qBAAiD;EACnD,MAAM,EAAE,yBAAyB,cAAc;EAC/C,OAAO,EAAE,0BAA0B,eAAe;EAClD,SAAS,EAAE,4BAA4B,iBAAiB;EACxD,MAAM,EAAE,yBAAyB,cAAc;EAChD;CAED,IAAI,EAAE,WAAW,WAAW;CAC5B,IAAI,YAAY,OAAuB,KAAK;CAC5C,IAAI,QAAQ,mBAAmB;EAC7B,GAAG;EACH,aAAa;EACb,qBAAqB;EACtB,CAAC;CACF,IAAI,EAAE,QAAQ,YAAY;CAE1B,IAAI,SAAS,mBAAmB,IAAI;CAEpC,IAAI,EAAE,WAAW,iBAAiB,YAAY,qBAC5C,aAAa;EACX,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEJ,IAAI,EAAE,YAAY,YAAY,aAAa,aAAa,kBACtD,cAAc;EAAE,GAAG;EAAO,aAAa;EAAO,EAAE,OAAO,UAAU;CAEnE,IAAI,gBAAgB,SAAoB;AACtC,QAAM,SAAS,aAAa,MAAM,QAAQ,OAAO,CAAC;AAClD,UAAQ,MAAM;;CAGhB,IAAI,cAAc,MAAM,SACnB,eAAe,cAAc,MAAM,OAAO,QAAQ,OAAO,GAC1D,eAAe,mBAAmB;CAItC,IAAI,UAAU,OAAO;CAErB,MAAM,QACJ,WAAW,SACT,oBAACA;EACC,GAAI;EACJ;EACA,YAAW;EACC;EACZ,UAAU;GACV,GAEF,oBAAC;EACC;EACQ;EACR,OAAO,cAAc;EACrB,UAAU,cAAc;EACxB,UAAU,cAAc;EACxB,mBAAmB,cAAc;EACrB;EACZ,UAAU;GACV;AAwDN,QAAO,cApDL,oBAACC;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACV,QAAQ;GAAE,SAAS;GAAQ,GAAG;GAAQ,GAAG,MAAM;GAAe;EAC9D,aAAa;GACX,QAAQ,cAAc,aAAa,YAAY;GAC/C,GAAG,MAAM;GACV;EACD,kBAAkB;EACN;EACD;EACF;EACH;EACN,YAAY;EACZ,QACE,qBAAC;GACC;GACA,MAAK;GACL,YAAW;GACX,WAAU;GACC;GACH;GACR,YAAY,MAAM;GAClB,cAAc;cAEd,oBAAC;IACO;IACN,GAAIC,aAAW,aAAa,iBAAiB;IAC7C,oBAAkB;IAGN;IACA;IACZ,QAAQ,MAAM;KACd,EACF,oBAAC;IAAO,GAAI;IAAa,OAAM;cAC5B;KACM;IACK;YAGlB,oBAAC;GACC,IAAI;GACJ,MAAM;IAAE,aAAa,CAAC,MAAM;IAAO,UAAU;IAAY;GACzD,eAAe,CAAC,cAAc,CAAC,cAAc,QAAQ,KAAK;aAEzD;IACkB;GACP,EAGc,QAAQ;EACtC,GAAG;EACH,YAAYA,aAAW,MAAM,YAAY,WAAW;EACrD,CAAC;;AAGJ,MAAM,gBAAgB,WAAW,aAAa;AAE9C,cAAc,cAAc"}
+{"version":3,"file":"PeriodPicker.js","names":["FocusableRef","BaseProps","CONTAINER_STYLES","ContainerStyleProps","Styles","tasty","forwardRef","RefObject","useId","useRef","AriaDatePickerProps","DateValue","Placement","useDatePicker","useFocusRing","useLocale","useDatePickerState","useI18n","FieldBaseProps","mergeProps","extractStyles","useFieldProps","wrapWithField","Calendar","PeriodCalendar","Dialog","DialogTrigger","DateInputBase","DatePickerButton","formatPeriod","PickerType","snapToPeriod","useFocusManagerRef","PeriodValueElement","qa","styles","preset","width","whiteSpace","textOverflow","overflow","color","placeholder","disabled","CubePeriodPickerProps","Omit","T","picker","wrapperStyles","inputStyles","triggerStyles","size","shouldFlip","targetRef","HTMLElement","placement","formatValue","date","locale","PeriodPicker","props","ref","$","_c","t","t0","Symbol","for","defaultValidationTrigger","t1","t2","isDisabled","isReadOnly","isInvalid","isValid","autoFocus","undefined","t3","t4","t5","t6","t7","week","month","quarter","year","defaultPlaceholder","t8","granularity","shouldCloseOnSelect","state","isOpen","setOpen","domRef","t9","within","isTextInput","isFocused","isFocusedButton","focusProps","focusPropsButton","t10","groupProps","labelProps","buttonProps","dialogProps","calendarProps","t11","setValue","handleSelect","t12","value","displayText","valueId","t13","minValue","maxValue","isDateUnavailable","panel","t14","t15","display","t16","t17","cursor","t18","t19","t20","t21","t22","t23","t24","t25","t26","t27","t28","t29","component","t30","_PeriodPicker","displayName"],"sources":["../../../../src/components/fields/DatePicker/PeriodPicker.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, useId, useRef } from 'react';\nimport {\n  AriaDatePickerProps,\n  DateValue,\n  Placement,\n  useDatePicker,\n  useFocusRing,\n  useLocale,\n} from 'react-aria';\nimport { useDatePickerState } from 'react-stately';\n\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Calendar } from '../../other/Calendar/Calendar';\nimport { PeriodCalendar } from '../../other/Calendar/PeriodCalendar';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { formatPeriod, PickerType, snapToPeriod } from './period';\nimport { useFocusManagerRef } from './utils';\n\nconst PeriodValueElement = tasty({\n  qa: 'PeriodPickerValue',\n  styles: {\n    preset: 't3',\n    width: 'max 100%',\n    whiteSpace: 'nowrap',\n    textOverflow: 'ellipsis',\n    overflow: 'hidden',\n    color: {\n      '': '#dark',\n      placeholder: '#dark.30',\n      disabled: '#dark.30',\n    },\n  },\n});\n\nexport interface CubePeriodPickerProps<T extends DateValue = DateValue>\n  extends Omit<\n      AriaDatePickerProps<T>,\n      'errorMessage' | 'granularity' | 'form' | 'name'\n    >,\n    BaseProps,\n    ContainerStyleProps,\n    FieldBaseProps<T | null | undefined> {\n  /** Which period the picker selects. Set by the concrete picker components. */\n  picker?: PickerType;\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  triggerStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\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  /** Placeholder shown when no value is selected. */\n  placeholder?: string;\n  /** Override how the selected value is rendered as text. */\n  formatValue?: (date: DateValue, picker: PickerType, locale: string) => string;\n}\n\nfunction PeriodPicker<T extends DateValue>(\n  props: CubePeriodPickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let {\n    qa,\n    size,\n    picker = 'month',\n    placeholder,\n    formatValue,\n    isDisabled,\n    isReadOnly,\n    isInvalid,\n    isValid,\n    autoFocus,\n  } = props;\n\n  let defaultPlaceholder: Record<PickerType, string> = {\n    week: t('datePicker.selectWeek', 'Select week'),\n    month: t('datePicker.selectMonth', 'Select month'),\n    quarter: t('datePicker.selectQuarter', 'Select quarter'),\n    year: t('datePicker.selectYear', 'Select year'),\n  };\n\n  let { locale } = useLocale();\n  let targetRef = useRef<HTMLDivElement>(null);\n  let state = useDatePickerState({\n    ...props,\n    granularity: 'day',\n    shouldCloseOnSelect: true,\n  });\n  let { isOpen, setOpen } = state;\n\n  let domRef = useFocusManagerRef(ref);\n\n  let { isFocused: isFocusedButton, focusProps: focusPropsButton } =\n    useFocusRing({\n      within: false,\n      isTextInput: false,\n      autoFocus,\n    });\n\n  let { groupProps, labelProps, buttonProps, dialogProps, calendarProps } =\n    useDatePicker({ ...props, granularity: 'day' }, state, targetRef);\n\n  let handleSelect = (date: DateValue) => {\n    state.setValue(snapToPeriod(date, picker, locale));\n    setOpen(false);\n  };\n\n  let displayText = state.value\n    ? (formatValue ?? formatPeriod)(state.value, picker, locale)\n    : placeholder ?? defaultPlaceholder[picker];\n\n  // The value is rendered as text rather than editable segments, so the trigger\n  // has to point at it to announce the current selection.\n  let valueId = useId();\n\n  const panel =\n    picker === 'week' ? (\n      <Calendar\n        {...calendarProps}\n        autoFocus\n        pickerMode=\"week\"\n        isDisabled={isDisabled}\n        onChange={handleSelect}\n      />\n    ) : (\n      <PeriodCalendar\n        autoFocus\n        picker={picker}\n        value={calendarProps.value}\n        minValue={calendarProps.minValue}\n        maxValue={calendarProps.maxValue}\n        isDateUnavailable={calendarProps.isDateUnavailable}\n        isDisabled={isDisabled}\n        onChange={handleSelect}\n      />\n    );\n\n  const component = (\n    <DateInputBase\n      ref={targetRef}\n      qa={qa || 'PeriodPicker'}\n      inputType=\"datepicker\"\n      styles={{ display: 'grid', ...styles, ...props.wrapperStyles }}\n      inputStyles={{\n        cursor: isDisabled || isReadOnly ? 'default' : 'pointer',\n        ...props.inputStyles,\n      }}\n      disableFocusRing={isFocusedButton}\n      isDisabled={isDisabled}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      size={size}\n      fieldProps={groupProps}\n      suffix={\n        <DialogTrigger\n          hideArrow\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement={props.placement ?? 'bottom right'}\n          targetRef={props.targetRef ?? targetRef}\n          isOpen={isOpen}\n          shouldFlip={props.shouldFlip}\n          onOpenChange={setOpen}\n        >\n          <DatePickerButton\n            size={size}\n            {...mergeProps(buttonProps, focusPropsButton)}\n            aria-describedby={valueId}\n            // Passed separately, not merged: only the field-disabled half is\n            // inherited. See `DatePickerButton`.\n            isDisabled={isDisabled}\n            isReadOnly={isReadOnly}\n            styles={props.triggerStyles}\n          />\n          <Dialog {...dialogProps} width=\"max-content\">\n            {panel}\n          </Dialog>\n        </DialogTrigger>\n      }\n    >\n      <PeriodValueElement\n        id={valueId}\n        mods={{ placeholder: !state.value, disabled: isDisabled }}\n        onClick={() => !isDisabled && !isReadOnly && setOpen(true)}\n      >\n        {displayText}\n      </PeriodValueElement>\n    </DateInputBase>\n  );\n\n  return wrapWithField(component, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _PeriodPicker = forwardRef(PeriodPicker);\n\n_PeriodPicker.displayName = 'PeriodPicker';\n\nexport { _PeriodPicker as PeriodPicker };\n"],"mappings":"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"}

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

@@ -1,15 +1,24 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { _PeriodPicker } from "./PeriodPicker.js";
+import { c } from "react-compiler-runtime";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/fields/DatePicker/QuarterPicker.tsx
 function QuarterPicker(props, ref) {
-	return /* @__PURE__ */ jsx(_PeriodPicker, {
-		ref,
-		picker: "quarter",
-		...props
-	});
+	const $ = c(3);
+	let t0;
+	if ($[0] !== props || $[1] !== ref) {
+		t0 = /* @__PURE__ */ jsx(_PeriodPicker, {
+			ref,
+			picker: "quarter",
+			...props
+		});
+		$[0] = props;
+		$[1] = ref;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
 }
 const _QuarterPicker = forwardRef(QuarterPicker);
 _QuarterPicker.displayName = "QuarterPicker";

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

@@ -1 +1 @@
-{"version":3,"file":"QuarterPicker.js","names":["PeriodPicker"],"sources":["../../../../src/components/fields/DatePicker/QuarterPicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { forwardRef } from 'react';\nimport { DateValue } from 'react-aria';\n\nimport { CubePeriodPickerProps, PeriodPicker } from './PeriodPicker';\n\nexport interface CubeQuarterPickerProps<T extends DateValue = DateValue>\n  extends Omit<CubePeriodPickerProps<T>, 'picker'> {}\n\nfunction QuarterPicker<T extends DateValue>(\n  props: CubeQuarterPickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  return <PeriodPicker ref={ref} picker=\"quarter\" {...props} />;\n}\n\nconst _QuarterPicker = forwardRef(QuarterPicker);\n\n_QuarterPicker.displayName = 'QuarterPicker';\n\nexport { _QuarterPicker as QuarterPicker };\n"],"mappings":";;;;;;AASA,SAAS,cACP,OACA,KACA;AACA,QAAO,oBAACA;EAAkB;EAAK,QAAO;EAAU,GAAI;GAAS;;AAG/D,MAAM,iBAAiB,WAAW,cAAc;AAEhD,eAAe,cAAc"}
+{"version":3,"file":"QuarterPicker.js","names":["FocusableRef","forwardRef","DateValue","CubePeriodPickerProps","PeriodPicker","CubeQuarterPickerProps","Omit","T","QuarterPicker","props","ref","$","_c","t0","_QuarterPicker","displayName"],"sources":["../../../../src/components/fields/DatePicker/QuarterPicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { forwardRef } from 'react';\nimport { DateValue } from 'react-aria';\n\nimport { CubePeriodPickerProps, PeriodPicker } from './PeriodPicker';\n\nexport interface CubeQuarterPickerProps<T extends DateValue = DateValue>\n  extends Omit<CubePeriodPickerProps<T>, 'picker'> {}\n\nfunction QuarterPicker<T extends DateValue>(\n  props: CubeQuarterPickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  return <PeriodPicker ref={ref} picker=\"quarter\" {...props} />;\n}\n\nconst _QuarterPicker = forwardRef(QuarterPicker);\n\n_QuarterPicker.displayName = 'QuarterPicker';\n\nexport { _QuarterPicker as QuarterPicker };\n"],"mappings":";;;;;;;AASA,SAAAQ,cAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAF,SAAAE,EAAA,OAAAD,KAAA;AAISG,OAAA,oBAAC;GAAkBH;GAAY,QAAA;GAAS,GAAKD;IAAS;AAAAE,IAAA,KAAAF;AAAAE,IAAA,KAAAD;AAAAC,IAAA,KAAAE;OAAAA,MAAAF,EAAA;AAAA,QAAtDE;;AAGT,MAAMC,iBAAiBb,WAAWO,cAAc;AAEhDM,eAAeC,cAAc"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
@@ -7,6 +7,7 @@ import { _DateInputBase } from "./DateInputBase.js";
 import { DatePickerSegment } from "./DatePickerSegment.js";
 import { DEFAULT_TIME_PROPS } from "./props.js";
 import { useFocusManagerRef } from "./utils.js";
+import { c } from "react-compiler-runtime";
 import { CONTAINER_STYLES } from "@tenphi/tasty";
 import { forwardRef, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -15,17 +16,24 @@ import { useTimeFieldState } from "react-stately";
 
 //#region src/components/fields/DatePicker/TimeInput.tsx
 function TimeInput(props, ref) {
-	props = useFieldProps(props, { defaultValidationTrigger: "onBlur" });
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { defaultValidationTrigger: "onBlur" };
+		$[0] = t0;
+	} else t0 = $[0];
+	props = useFieldProps(props, t0);
 	props = Object.assign({}, DEFAULT_TIME_PROPS, props);
 	extractStyles(props, CONTAINER_STYLES);
-	let { qa, inputStyles, wrapperStyles, autoFocus, isDisabled, isReadOnly, isRequired, isInvalid, isValid, size = "medium", labelProps: userLabelProps } = props;
-	let domRef = useFocusManagerRef(ref);
-	let state = useTimeFieldState({
+	const { qa, inputStyles, wrapperStyles, autoFocus, isDisabled, isReadOnly, isRequired, isInvalid, isValid, size: t1, labelProps: userLabelProps } = props;
+	const size = t1 === void 0 ? "medium" : t1;
+	const domRef = useFocusManagerRef(ref);
+	const state = useTimeFieldState({
 		...props,
 		locale: "en-US"
 	});
-	let fieldRef = useRef(null);
-	let { labelProps, fieldProps } = useTimeField(props, state, fieldRef);
+	const fieldRef = useRef(null);
+	const { labelProps, fieldProps } = useTimeField(props, state, fieldRef);
 	return wrapWithField(/* @__PURE__ */ jsx(_DateInputBase, {
 		ref: fieldRef,
 		qa: qa || "TimeInput",

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

@@ -1 +1 @@
-{"version":3,"file":"TimeInput.js","names":["DateInputBase","mergeProps"],"sources":["../../../../src/components/fields/DatePicker/TimeInput.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport {\n  AriaTimeFieldProps,\n  DateValue,\n  TimeValue,\n  useTimeField,\n} from 'react-aria';\nimport { useTimeFieldState } from 'react-stately';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, wrapWithField } from '../../form';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerSegment } from './DatePickerSegment';\nimport { DEFAULT_TIME_PROPS } from './props';\nimport { Granularity } from './types';\nimport { useFocusManagerRef } from './utils';\n\nexport interface CubeTimeInputProps<T extends TimeValue = TimeValue>\n  extends Omit<AriaTimeFieldProps<T>, 'errorMessage' | 'form' | 'name'>,\n    BaseProps,\n    ContainerStyleProps,\n    FieldBaseProps<TimeValue | null | undefined> {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  value?: TimeValue;\n  /** The minimum allowed date that a user may select. */\n  minValue?: TimeValue;\n  /** The maximum allowed date that a user may select. */\n  maxValue?: TimeValue;\n  /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */\n  isDateUnavailable?: (date: DateValue) => boolean;\n  /** A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight. */\n  placeholderValue?: TimeValue;\n  /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */\n  hourCycle?: 12 | 24;\n  /** Determines the smallest unit that is displayed in the date picker. By default, this is `\"day\"` for dates, and `\"minute\"` for times. */\n  granularity?: Granularity;\n  /**\n   * Whether to hide the time zone abbreviation.\n   * @default false\n   */\n  hideTimeZone?: boolean;\n  onChange?: (value: TimeValue) => void;\n}\n\nfunction TimeInput<T extends TimeValue>(\n  props: CubeTimeInputProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_TIME_PROPS, props);\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let {\n    qa,\n    inputStyles,\n    wrapperStyles,\n    autoFocus,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    isInvalid,\n    isValid,\n    size = 'medium',\n    labelProps: userLabelProps,\n  } = props;\n\n  let domRef = useFocusManagerRef(ref);\n  // let { locale } = useLocale();\n  let state = useTimeFieldState({\n    ...props,\n    locale: 'en-US',\n  });\n\n  let fieldRef = useRef(null);\n  let { labelProps, fieldProps } = useTimeField(props, state, fieldRef);\n\n  const timeInput = (\n    <DateInputBase\n      ref={fieldRef}\n      qa={qa || 'TimeInput'}\n      inputType=\"timeinput\"\n      size={size}\n      fieldProps={fieldProps}\n      isDisabled={isDisabled}\n      autoFocus={autoFocus}\n      inputStyles={inputStyles}\n      styles={wrapperStyles}\n      isInvalid={isInvalid}\n      isValid={isValid}\n    >\n      {state.segments.map((segment, i) => (\n        <DatePickerSegment\n          key={i}\n          segment={segment}\n          state={state}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isRequired={isRequired}\n        />\n      ))}\n    </DateInputBase>\n  );\n\n  return wrapWithField(timeInput, domRef, {\n    ...props,\n    labelProps: mergeProps(labelProps, userLabelProps),\n  });\n}\n\n/**\n * TimeFields allow users to enter and edit time values using a keyboard.\n * Each part of the time is displayed in an individually editable segment.\n */\nconst _TimeInput = forwardRef(TimeInput);\n\n_TimeInput.displayName = 'TimeInput';\n\nexport { _TimeInput as TimeInput };\n"],"mappings":";;;;;;;;;;;;;;;;AAyDA,SAAS,UACP,OACA,KACA;AACA,SAAQ,cAAc,OAAO,EAC3B,0BAA0B,UAC3B,CAAC;AACF,SAAQ,OAAO,OAAO,EAAE,EAAE,oBAAoB,MAAM;AAEvC,eAAc,OAAO,iBAAiB;CAEnD,IAAI,EACF,IACA,aACA,eACA,WACA,YACA,YACA,YACA,WACA,SACA,OAAO,UACP,YAAY,mBACV;CAEJ,IAAI,SAAS,mBAAmB,IAAI;CAEpC,IAAI,QAAQ,kBAAkB;EAC5B,GAAG;EACH,QAAQ;EACT,CAAC;CAEF,IAAI,WAAW,OAAO,KAAK;CAC3B,IAAI,EAAE,YAAY,eAAe,aAAa,OAAO,OAAO,SAAS;AA6BrE,QAAO,cA1BL,oBAACA;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACJ;EACM;EACA;EACD;EACE;EACb,QAAQ;EACG;EACF;YAER,MAAM,SAAS,KAAK,SAAS,MAC5B,oBAAC;GAEU;GACF;GACK;GACA;GACA;KALP,EAML,CACF;GACY,EAGc,QAAQ;EACtC,GAAG;EACH,YAAYC,aAAW,YAAY,eAAe;EACnD,CAAC;;;;;;AAOJ,MAAM,aAAa,WAAW,UAAU;AAExC,WAAW,cAAc"}
+{"version":3,"file":"TimeInput.js","names":["FocusableRef","BaseProps","CONTAINER_STYLES","ContainerStyleProps","Styles","forwardRef","useRef","AriaTimeFieldProps","DateValue","TimeValue","useTimeField","useTimeFieldState","FieldBaseProps","mergeProps","extractStyles","useFieldProps","wrapWithField","DateInputBase","DatePickerSegment","DEFAULT_TIME_PROPS","Granularity","useFocusManagerRef","CubeTimeInputProps","Omit","T","wrapperStyles","inputStyles","styles","size","value","minValue","maxValue","isDateUnavailable","date","placeholderValue","hourCycle","granularity","hideTimeZone","onChange","TimeInput","props","ref","$","_c","t0","Symbol","for","defaultValidationTrigger","Object","assign","qa","autoFocus","isDisabled","isReadOnly","isRequired","isInvalid","isValid","t1","labelProps","userLabelProps","undefined","domRef","state","locale","fieldRef","fieldProps","timeInput","segments","map","segment","i","_TimeInput","displayName"],"sources":["../../../../src/components/fields/DatePicker/TimeInput.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport {\n  AriaTimeFieldProps,\n  DateValue,\n  TimeValue,\n  useTimeField,\n} from 'react-aria';\nimport { useTimeFieldState } from 'react-stately';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, wrapWithField } from '../../form';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerSegment } from './DatePickerSegment';\nimport { DEFAULT_TIME_PROPS } from './props';\nimport { Granularity } from './types';\nimport { useFocusManagerRef } from './utils';\n\nexport interface CubeTimeInputProps<T extends TimeValue = TimeValue>\n  extends Omit<AriaTimeFieldProps<T>, 'errorMessage' | 'form' | 'name'>,\n    BaseProps,\n    ContainerStyleProps,\n    FieldBaseProps<TimeValue | null | undefined> {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  value?: TimeValue;\n  /** The minimum allowed date that a user may select. */\n  minValue?: TimeValue;\n  /** The maximum allowed date that a user may select. */\n  maxValue?: TimeValue;\n  /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */\n  isDateUnavailable?: (date: DateValue) => boolean;\n  /** A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight. */\n  placeholderValue?: TimeValue;\n  /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */\n  hourCycle?: 12 | 24;\n  /** Determines the smallest unit that is displayed in the date picker. By default, this is `\"day\"` for dates, and `\"minute\"` for times. */\n  granularity?: Granularity;\n  /**\n   * Whether to hide the time zone abbreviation.\n   * @default false\n   */\n  hideTimeZone?: boolean;\n  onChange?: (value: TimeValue) => void;\n}\n\nfunction TimeInput<T extends TimeValue>(\n  props: CubeTimeInputProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_TIME_PROPS, props);\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let {\n    qa,\n    inputStyles,\n    wrapperStyles,\n    autoFocus,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    isInvalid,\n    isValid,\n    size = 'medium',\n    labelProps: userLabelProps,\n  } = props;\n\n  let domRef = useFocusManagerRef(ref);\n  // let { locale } = useLocale();\n  let state = useTimeFieldState({\n    ...props,\n    locale: 'en-US',\n  });\n\n  let fieldRef = useRef(null);\n  let { labelProps, fieldProps } = useTimeField(props, state, fieldRef);\n\n  const timeInput = (\n    <DateInputBase\n      ref={fieldRef}\n      qa={qa || 'TimeInput'}\n      inputType=\"timeinput\"\n      size={size}\n      fieldProps={fieldProps}\n      isDisabled={isDisabled}\n      autoFocus={autoFocus}\n      inputStyles={inputStyles}\n      styles={wrapperStyles}\n      isInvalid={isInvalid}\n      isValid={isValid}\n    >\n      {state.segments.map((segment, i) => (\n        <DatePickerSegment\n          key={i}\n          segment={segment}\n          state={state}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isRequired={isRequired}\n        />\n      ))}\n    </DateInputBase>\n  );\n\n  return wrapWithField(timeInput, domRef, {\n    ...props,\n    labelProps: mergeProps(labelProps, userLabelProps),\n  });\n}\n\n/**\n * TimeFields allow users to enter and edit time values using a keyboard.\n * Each part of the time is displayed in an individually editable segment.\n */\nconst _TimeInput = forwardRef(TimeInput);\n\n_TimeInput.displayName = 'TimeInput';\n\nexport { _TimeInput as TimeInput };\n"],"mappings":";;;;;;;;;;;;;;;;;AAyDA,SAAAuC,UAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAG,OAAAC,IAAA,4BAAA,EAAA;AAI+BF,OAAA,EAAAG,0BACD,UAC3B;AAAAL,IAAA,KAAAE;OAAAA,MAAAF,EAAA;AAFDF,SAAQzB,cAAcyB,OAAOI,GAE3B;AACFJ,SAAQQ,OAAMC,OAAQ,EAAE,EAAE9B,oBAAoBqB,MAAM;AAEvC1B,eAAc0B,OAAOtC,iBAAiB;CAEnD,MAAA,EAAAgD,IAAAxB,aAAAD,eAAA0B,WAAAC,YAAAC,YAAAC,YAAAC,WAAAC,SAAA5B,MAAA6B,IAAAC,YAAAC,mBAYInB;CAFF,MAAAZ,OAAA6B,OAAAG,SAAA,WAAAH;CAIF,MAAAI,SAAaxC,mBAAmBoB,IAAI;CAEpC,MAAAqB,QAAYnD,kBAAkB;EAAA,GACzB6B;EAAKuB,QACA;EACT,CAAC;CAEF,MAAAC,WAAe1D,OAAO,KAAK;CAC3B,MAAA,EAAAoD,YAAAO,eAAiCvD,aAAa8B,OAAOsB,OAAOE,SAAS;AA2BnE,QAEKhD,cA1BL,oBAAC;EACMgD,KAAAA;EACD,IAAAd,MAAA;EACM,WAAA;EACJtB;EACMqC;EACAb;EACDD;EACEzB;EACLD,QAAAA;EACG8B;EACFC;YAERM,MAAKK,SAASC,KAAKC,SAAAC,MAClB,oBAAC;GAEUD;GACFP;GACKV;GACAC;GACAC;KALPgB,EAOR,CAAA;GACa,EAGcT,QAAQ;EAAA,GACnCrB;EAAKkB,YACI7C,aAAW6C,YAAYC,eAAc;EAClD,CAAC;;;;;;AAOJ,MAAMY,aAAalE,WAAWkC,UAAU;AAExCgC,WAAWC,cAAc"}

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

@@ -1,15 +1,24 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { _PeriodPicker } from "./PeriodPicker.js";
+import { c } from "react-compiler-runtime";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/fields/DatePicker/WeekPicker.tsx
 function WeekPicker(props, ref) {
-	return /* @__PURE__ */ jsx(_PeriodPicker, {
-		ref,
-		picker: "week",
-		...props
-	});
+	const $ = c(3);
+	let t0;
+	if ($[0] !== props || $[1] !== ref) {
+		t0 = /* @__PURE__ */ jsx(_PeriodPicker, {
+			ref,
+			picker: "week",
+			...props
+		});
+		$[0] = props;
+		$[1] = ref;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
 }
 const _WeekPicker = forwardRef(WeekPicker);
 _WeekPicker.displayName = "WeekPicker";

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

@@ -1 +1 @@
-{"version":3,"file":"WeekPicker.js","names":["PeriodPicker"],"sources":["../../../../src/components/fields/DatePicker/WeekPicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { forwardRef } from 'react';\nimport { DateValue } from 'react-aria';\n\nimport { CubePeriodPickerProps, PeriodPicker } from './PeriodPicker';\n\nexport interface CubeWeekPickerProps<T extends DateValue = DateValue>\n  extends Omit<CubePeriodPickerProps<T>, 'picker'> {}\n\nfunction WeekPicker<T extends DateValue>(\n  props: CubeWeekPickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  return <PeriodPicker ref={ref} picker=\"week\" {...props} />;\n}\n\nconst _WeekPicker = forwardRef(WeekPicker);\n\n_WeekPicker.displayName = 'WeekPicker';\n\nexport { _WeekPicker as WeekPicker };\n"],"mappings":";;;;;;AASA,SAAS,WACP,OACA,KACA;AACA,QAAO,oBAACA;EAAkB;EAAK,QAAO;EAAO,GAAI;GAAS;;AAG5D,MAAM,cAAc,WAAW,WAAW;AAE1C,YAAY,cAAc"}
+{"version":3,"file":"WeekPicker.js","names":["FocusableRef","forwardRef","DateValue","CubePeriodPickerProps","PeriodPicker","CubeWeekPickerProps","Omit","T","WeekPicker","props","ref","$","_c","t0","_WeekPicker","displayName"],"sources":["../../../../src/components/fields/DatePicker/WeekPicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { forwardRef } from 'react';\nimport { DateValue } from 'react-aria';\n\nimport { CubePeriodPickerProps, PeriodPicker } from './PeriodPicker';\n\nexport interface CubeWeekPickerProps<T extends DateValue = DateValue>\n  extends Omit<CubePeriodPickerProps<T>, 'picker'> {}\n\nfunction WeekPicker<T extends DateValue>(\n  props: CubeWeekPickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  return <PeriodPicker ref={ref} picker=\"week\" {...props} />;\n}\n\nconst _WeekPicker = forwardRef(WeekPicker);\n\n_WeekPicker.displayName = 'WeekPicker';\n\nexport { _WeekPicker as WeekPicker };\n"],"mappings":";;;;;;;AASA,SAAAQ,WAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAF,SAAAE,EAAA,OAAAD,KAAA;AAISG,OAAA,oBAAC;GAAkBH;GAAY,QAAA;GAAM,GAAKD;IAAS;AAAAE,IAAA,KAAAF;AAAAE,IAAA,KAAAD;AAAAC,IAAA,KAAAE;OAAAA,MAAAF,EAAA;AAAA,QAAnDE;;AAGT,MAAMC,cAAcb,WAAWO,WAAW;AAE1CM,YAAYC,cAAc"}

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

@@ -1,15 +1,24 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { _PeriodPicker } from "./PeriodPicker.js";
+import { c } from "react-compiler-runtime";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/fields/DatePicker/YearPicker.tsx
 function YearPicker(props, ref) {
-	return /* @__PURE__ */ jsx(_PeriodPicker, {
-		ref,
-		picker: "year",
-		...props
-	});
+	const $ = c(3);
+	let t0;
+	if ($[0] !== props || $[1] !== ref) {
+		t0 = /* @__PURE__ */ jsx(_PeriodPicker, {
+			ref,
+			picker: "year",
+			...props
+		});
+		$[0] = props;
+		$[1] = ref;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
 }
 const _YearPicker = forwardRef(YearPicker);
 _YearPicker.displayName = "YearPicker";

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

@@ -1 +1 @@
-{"version":3,"file":"YearPicker.js","names":["PeriodPicker"],"sources":["../../../../src/components/fields/DatePicker/YearPicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { forwardRef } from 'react';\nimport { DateValue } from 'react-aria';\n\nimport { CubePeriodPickerProps, PeriodPicker } from './PeriodPicker';\n\nexport interface CubeYearPickerProps<T extends DateValue = DateValue>\n  extends Omit<CubePeriodPickerProps<T>, 'picker'> {}\n\nfunction YearPicker<T extends DateValue>(\n  props: CubeYearPickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  return <PeriodPicker ref={ref} picker=\"year\" {...props} />;\n}\n\nconst _YearPicker = forwardRef(YearPicker);\n\n_YearPicker.displayName = 'YearPicker';\n\nexport { _YearPicker as YearPicker };\n"],"mappings":";;;;;;AASA,SAAS,WACP,OACA,KACA;AACA,QAAO,oBAACA;EAAkB;EAAK,QAAO;EAAO,GAAI;GAAS;;AAG5D,MAAM,cAAc,WAAW,WAAW;AAE1C,YAAY,cAAc"}
+{"version":3,"file":"YearPicker.js","names":["FocusableRef","forwardRef","DateValue","CubePeriodPickerProps","PeriodPicker","CubeYearPickerProps","Omit","T","YearPicker","props","ref","$","_c","t0","_YearPicker","displayName"],"sources":["../../../../src/components/fields/DatePicker/YearPicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { forwardRef } from 'react';\nimport { DateValue } from 'react-aria';\n\nimport { CubePeriodPickerProps, PeriodPicker } from './PeriodPicker';\n\nexport interface CubeYearPickerProps<T extends DateValue = DateValue>\n  extends Omit<CubePeriodPickerProps<T>, 'picker'> {}\n\nfunction YearPicker<T extends DateValue>(\n  props: CubeYearPickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  return <PeriodPicker ref={ref} picker=\"year\" {...props} />;\n}\n\nconst _YearPicker = forwardRef(YearPicker);\n\n_YearPicker.displayName = 'YearPicker';\n\nexport { _YearPicker as YearPicker };\n"],"mappings":";;;;;;;AASA,SAAAQ,WAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAF,SAAAE,EAAA,OAAAD,KAAA;AAISG,OAAA,oBAAC;GAAkBH;GAAY,QAAA;GAAM,GAAKD;IAAS;AAAAE,IAAA,KAAAF;AAAAE,IAAA,KAAAD;AAAAC,IAAA,KAAAE;OAAAA,MAAAF,EAAA;AAAA,QAAnDE;;AAGT,MAAMC,cAAcb,WAAWO,WAAW;AAE1CM,YAAYC,cAAc"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { parseAbsolute } from "@internationalized/date";
 
 //#region src/components/fields/DatePicker/parseDate.ts

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

@@ -1 +1 @@
-{"version":3,"file":"parseDate.js","names":[],"sources":["../../../../src/components/fields/DatePicker/parseDate.ts"],"sourcesContent":["import { parseAbsolute } from '@internationalized/date';\n\nexport function parseAbsoluteDate(val: string | Date | undefined | null) {\n  if (!val || (typeof val === 'string' && val.trim() === '')) {\n    return undefined;\n  }\n\n  if (val instanceof Date) {\n    return parseAbsolute(val.toISOString(), 'UTC');\n  }\n\n  try {\n    parseAbsolute(val, 'UTC');\n  } catch (e) {\n    if (!Number.isNaN(Date.parse(val))) {\n      return parseAbsolute(new Date(val).toISOString(), 'UTC');\n    } else {\n      console.error('Invalid date format', val);\n      return undefined;\n    }\n  }\n}\n"],"mappings":";;;;AAEA,SAAgB,kBAAkB,KAAuC;AACvE,KAAI,CAAC,OAAQ,OAAO,QAAQ,YAAY,IAAI,MAAM,KAAK,GACrD;AAGF,KAAI,eAAe,KACjB,QAAO,cAAc,IAAI,aAAa,EAAE,MAAM;AAGhD,KAAI;AACF,gBAAc,KAAK,MAAM;UAClB,GAAG;AACV,MAAI,CAAC,OAAO,MAAM,KAAK,MAAM,IAAI,CAAC,CAChC,QAAO,cAAc,IAAI,KAAK,IAAI,CAAC,aAAa,EAAE,MAAM;OACnD;AACL,WAAQ,MAAM,uBAAuB,IAAI;AACzC"}
+{"version":3,"file":"parseDate.js","names":["parseAbsolute","parseAbsoluteDate","val","Date","trim","undefined","toISOString","e","Number","isNaN","parse","console","error"],"sources":["../../../../src/components/fields/DatePicker/parseDate.ts"],"sourcesContent":["import { parseAbsolute } from '@internationalized/date';\n\nexport function parseAbsoluteDate(val: string | Date | undefined | null) {\n  if (!val || (typeof val === 'string' && val.trim() === '')) {\n    return undefined;\n  }\n\n  if (val instanceof Date) {\n    return parseAbsolute(val.toISOString(), 'UTC');\n  }\n\n  try {\n    parseAbsolute(val, 'UTC');\n  } catch (e) {\n    if (!Number.isNaN(Date.parse(val))) {\n      return parseAbsolute(new Date(val).toISOString(), 'UTC');\n    } else {\n      console.error('Invalid date format', val);\n      return undefined;\n    }\n  }\n}\n"],"mappings":";;;;AAEA,SAAgBC,kBAAkBC,KAAuC;AACvE,KAAI,CAACA,OAAQ,OAAOA,QAAQ,YAAYA,IAAIE,MAAM,KAAK,GACrD;AAGF,KAAIF,eAAeC,KACjB,QAAOH,cAAcE,IAAII,aAAa,EAAE,MAAM;AAGhD,KAAI;AACFN,gBAAcE,KAAK,MAAM;UAClBK,GAAG;AACV,MAAI,CAACC,OAAOC,MAAMN,KAAKO,MAAMR,IAAI,CAAC,CAChC,QAAOF,cAAc,IAAIG,KAAKD,IAAI,CAACI,aAAa,EAAE,MAAM;OACnD;AACLK,WAAQC,MAAM,uBAAuBV,IAAI;AACzC"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { CalendarDate, startOfMonth, startOfWeek, startOfYear, toCalendarDate } from "@internationalized/date";
 
 //#region src/components/fields/DatePicker/period.ts

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

@@ -1 +1 @@
-{"version":3,"file":"period.js","names":[],"sources":["../../../../src/components/fields/DatePicker/period.ts"],"sourcesContent":["import {\n  CalendarDate,\n  startOfMonth,\n  startOfWeek,\n  startOfYear,\n  toCalendarDate,\n} from '@internationalized/date';\nimport { DateValue } from 'react-aria';\n\n/**\n * The period granularity a picker operates on. Unlike React Aria's `granularity`\n * (which controls the smallest *time* unit shown in a date field), this controls\n * which calendar panel is shown and which period a selected value is snapped to.\n */\nexport type PickerType = 'week' | 'month' | 'quarter' | 'year';\n\nconst MS_PER_DAY = 24 * 60 * 60 * 1000;\n\n/** The 1-based quarter (1–4) that a given month (1–12) belongs to. */\nexport function getQuarter(month: number): number {\n  return Math.floor((month - 1) / 3) + 1;\n}\n\n/**\n * Snap a date to the start of the period it belongs to:\n * - `week`   → the first day of its week (locale-aware)\n * - `month`  → the 1st of its month\n * - `quarter`→ the 1st of the first month of its quarter\n * - `year`   → January 1st\n */\nexport function snapToPeriod(\n  date: DateValue,\n  picker: PickerType,\n  locale: string,\n): CalendarDate {\n  const cd = toCalendarDate(date);\n\n  switch (picker) {\n    case 'week':\n      return startOfWeek(cd, locale);\n    case 'month':\n      return startOfMonth(cd);\n    case 'quarter': {\n      const quarterStartMonth = (getQuarter(cd.month) - 1) * 3 + 1;\n      return new CalendarDate(cd.year, quarterStartMonth, 1);\n    }\n    case 'year':\n      return startOfYear(cd);\n  }\n}\n\n/**\n * The locale-aware week-of-year number for a date, counted from the first week\n * of that date's calendar year (matches how the value's year is displayed).\n */\nexport function getWeekNumber(date: DateValue, locale: string): number {\n  const cd = toCalendarDate(date);\n  const weekStart = startOfWeek(cd, locale);\n  const firstWeekStart = startOfWeek(startOfYear(cd), locale);\n  const diffDays = Math.round(\n    (weekStart.toDate('UTC').getTime() -\n      firstWeekStart.toDate('UTC').getTime()) /\n      MS_PER_DAY,\n  );\n\n  return Math.floor(diffDays / 7) + 1;\n}\n\nconst pad2 = (value: number) => String(value).padStart(2, '0');\n\n/**\n * Default formatting of a period value into a compact label, e.g.\n * `2026-08` (month), `2026-Q3` (quarter), `2026` (year), `2026-W33` (week).\n * Consumers can override this via the picker's `formatValue` prop.\n */\nexport function formatPeriod(\n  date: DateValue,\n  picker: PickerType,\n  locale: string,\n): string {\n  const cd = toCalendarDate(date);\n\n  switch (picker) {\n    case 'year':\n      return String(cd.year);\n    case 'quarter':\n      return `${cd.year}-Q${getQuarter(cd.month)}`;\n    case 'month':\n      return `${cd.year}-${pad2(cd.month)}`;\n    case 'week':\n      return `${cd.year}-W${pad2(getWeekNumber(cd, locale))}`;\n  }\n}\n"],"mappings":";;;;AAgBA,MAAM,aAAa,OAAU,KAAK;;AAGlC,SAAgB,WAAW,OAAuB;AAChD,QAAO,KAAK,OAAO,QAAQ,KAAK,EAAE,GAAG;;;;;;;;;AAUvC,SAAgB,aACd,MACA,QACA,QACc;CACd,MAAM,KAAK,eAAe,KAAK;AAE/B,SAAQ,QAAR;EACE,KAAK,OACH,QAAO,YAAY,IAAI,OAAO;EAChC,KAAK,QACH,QAAO,aAAa,GAAG;EACzB,KAAK,WAAW;GACd,MAAM,qBAAqB,WAAW,GAAG,MAAM,GAAG,KAAK,IAAI;AAC3D,UAAO,IAAI,aAAa,GAAG,MAAM,mBAAmB,EAAE;;EAExD,KAAK,OACH,QAAO,YAAY,GAAG;;;;;;;AAQ5B,SAAgB,cAAc,MAAiB,QAAwB;CACrE,MAAM,KAAK,eAAe,KAAK;CAC/B,MAAM,YAAY,YAAY,IAAI,OAAO;CACzC,MAAM,iBAAiB,YAAY,YAAY,GAAG,EAAE,OAAO;CAC3D,MAAM,WAAW,KAAK,OACnB,UAAU,OAAO,MAAM,CAAC,SAAS,GAChC,eAAe,OAAO,MAAM,CAAC,SAAS,IACtC,WACH;AAED,QAAO,KAAK,MAAM,WAAW,EAAE,GAAG;;AAGpC,MAAM,QAAQ,UAAkB,OAAO,MAAM,CAAC,SAAS,GAAG,IAAI;;;;;;AAO9D,SAAgB,aACd,MACA,QACA,QACQ;CACR,MAAM,KAAK,eAAe,KAAK;AAE/B,SAAQ,QAAR;EACE,KAAK,OACH,QAAO,OAAO,GAAG,KAAK;EACxB,KAAK,UACH,QAAO,GAAG,GAAG,KAAK,IAAI,WAAW,GAAG,MAAM;EAC5C,KAAK,QACH,QAAO,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM;EACrC,KAAK,OACH,QAAO,GAAG,GAAG,KAAK,IAAI,KAAK,cAAc,IAAI,OAAO,CAAC"}
+{"version":3,"file":"period.js","names":["CalendarDate","startOfMonth","startOfWeek","startOfYear","toCalendarDate","DateValue","PickerType","MS_PER_DAY","getQuarter","month","Math","floor","snapToPeriod","date","picker","locale","cd","quarterStartMonth","year","getWeekNumber","weekStart","firstWeekStart","diffDays","round","toDate","getTime","pad2","value","String","padStart","formatPeriod"],"sources":["../../../../src/components/fields/DatePicker/period.ts"],"sourcesContent":["import {\n  CalendarDate,\n  startOfMonth,\n  startOfWeek,\n  startOfYear,\n  toCalendarDate,\n} from '@internationalized/date';\nimport { DateValue } from 'react-aria';\n\n/**\n * The period granularity a picker operates on. Unlike React Aria's `granularity`\n * (which controls the smallest *time* unit shown in a date field), this controls\n * which calendar panel is shown and which period a selected value is snapped to.\n */\nexport type PickerType = 'week' | 'month' | 'quarter' | 'year';\n\nconst MS_PER_DAY = 24 * 60 * 60 * 1000;\n\n/** The 1-based quarter (1–4) that a given month (1–12) belongs to. */\nexport function getQuarter(month: number): number {\n  return Math.floor((month - 1) / 3) + 1;\n}\n\n/**\n * Snap a date to the start of the period it belongs to:\n * - `week`   → the first day of its week (locale-aware)\n * - `month`  → the 1st of its month\n * - `quarter`→ the 1st of the first month of its quarter\n * - `year`   → January 1st\n */\nexport function snapToPeriod(\n  date: DateValue,\n  picker: PickerType,\n  locale: string,\n): CalendarDate {\n  const cd = toCalendarDate(date);\n\n  switch (picker) {\n    case 'week':\n      return startOfWeek(cd, locale);\n    case 'month':\n      return startOfMonth(cd);\n    case 'quarter': {\n      const quarterStartMonth = (getQuarter(cd.month) - 1) * 3 + 1;\n      return new CalendarDate(cd.year, quarterStartMonth, 1);\n    }\n    case 'year':\n      return startOfYear(cd);\n  }\n}\n\n/**\n * The locale-aware week-of-year number for a date, counted from the first week\n * of that date's calendar year (matches how the value's year is displayed).\n */\nexport function getWeekNumber(date: DateValue, locale: string): number {\n  const cd = toCalendarDate(date);\n  const weekStart = startOfWeek(cd, locale);\n  const firstWeekStart = startOfWeek(startOfYear(cd), locale);\n  const diffDays = Math.round(\n    (weekStart.toDate('UTC').getTime() -\n      firstWeekStart.toDate('UTC').getTime()) /\n      MS_PER_DAY,\n  );\n\n  return Math.floor(diffDays / 7) + 1;\n}\n\nconst pad2 = (value: number) => String(value).padStart(2, '0');\n\n/**\n * Default formatting of a period value into a compact label, e.g.\n * `2026-08` (month), `2026-Q3` (quarter), `2026` (year), `2026-W33` (week).\n * Consumers can override this via the picker's `formatValue` prop.\n */\nexport function formatPeriod(\n  date: DateValue,\n  picker: PickerType,\n  locale: string,\n): string {\n  const cd = toCalendarDate(date);\n\n  switch (picker) {\n    case 'year':\n      return String(cd.year);\n    case 'quarter':\n      return `${cd.year}-Q${getQuarter(cd.month)}`;\n    case 'month':\n      return `${cd.year}-${pad2(cd.month)}`;\n    case 'week':\n      return `${cd.year}-W${pad2(getWeekNumber(cd, locale))}`;\n  }\n}\n"],"mappings":";;;;AAgBA,MAAMO,aAAa,OAAU,KAAK;;AAGlC,SAAgBC,WAAWC,OAAuB;AAChD,QAAOC,KAAKC,OAAOF,QAAQ,KAAK,EAAE,GAAG;;;;;;;;;AAUvC,SAAgBG,aACdC,MACAC,QACAC,QACc;CACd,MAAMC,KAAKZ,eAAeS,KAAK;AAE/B,SAAQC,QAAR;EACE,KAAK,OACH,QAAOZ,YAAYc,IAAID,OAAO;EAChC,KAAK,QACH,QAAOd,aAAae,GAAG;EACzB,KAAK,WAAW;GACd,MAAMC,qBAAqBT,WAAWQ,GAAGP,MAAM,GAAG,KAAK,IAAI;AAC3D,UAAO,IAAIT,aAAagB,GAAGE,MAAMD,mBAAmB,EAAE;;EAExD,KAAK,OACH,QAAOd,YAAYa,GAAG;;;;;;;AAQ5B,SAAgBG,cAAcN,MAAiBE,QAAwB;CACrE,MAAMC,KAAKZ,eAAeS,KAAK;CAC/B,MAAMO,YAAYlB,YAAYc,IAAID,OAAO;CACzC,MAAMM,iBAAiBnB,YAAYC,YAAYa,GAAG,EAAED,OAAO;CAC3D,MAAMO,WAAWZ,KAAKa,OACnBH,UAAUI,OAAO,MAAM,CAACC,SAAS,GAChCJ,eAAeG,OAAO,MAAM,CAACC,SAAS,IACtClB,WACH;AAED,QAAOG,KAAKC,MAAMW,WAAW,EAAE,GAAG;;AAGpC,MAAMI,QAAQC,UAAkBC,OAAOD,MAAM,CAACE,SAAS,GAAG,IAAI;;;;;;AAO9D,SAAgBC,aACdjB,MACAC,QACAC,QACQ;CACR,MAAMC,KAAKZ,eAAeS,KAAK;AAE/B,SAAQC,QAAR;EACE,KAAK,OACH,QAAOc,OAAOZ,GAAGE,KAAK;EACxB,KAAK,UACH,QAAO,GAAGF,GAAGE,KAAI,IAAKV,WAAWQ,GAAGP,MAAM;EAC5C,KAAK,QACH,QAAO,GAAGO,GAAGE,KAAI,GAAIQ,KAAKV,GAAGP,MAAM;EACrC,KAAK,OACH,QAAO,GAAGO,GAAGE,KAAI,IAAKQ,KAAKP,cAAcH,IAAID,OAAO,CAAC"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 //#region src/components/fields/DatePicker/props.ts
 const DEFAULT_DATE_PROPS = {
 	granularity: "day",

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

@@ -1 +1 @@
-{"version":3,"file":"props.js","names":[],"sources":["../../../../src/components/fields/DatePicker/props.ts"],"sourcesContent":["import { AriaDatePickerProps, DateValue } from 'react-aria';\n\nexport const DEFAULT_DATE_PROPS: Partial<AriaDatePickerProps<DateValue>> = {\n  granularity: 'day',\n  hideTimeZone: true,\n  hourCycle: 24,\n  shouldForceLeadingZeros: true,\n};\n\nexport const DEFAULT_TIME_PROPS: Partial<AriaDatePickerProps<DateValue>> = {\n  hideTimeZone: true,\n  hourCycle: 24,\n  shouldForceLeadingZeros: true,\n};\n"],"mappings":";;AAEA,MAAa,qBAA8D;CACzE,aAAa;CACb,cAAc;CACd,WAAW;CACX,yBAAyB;CAC1B;AAED,MAAa,qBAA8D;CACzE,cAAc;CACd,WAAW;CACX,yBAAyB;CAC1B"}
+{"version":3,"file":"props.js","names":["AriaDatePickerProps","DateValue","DEFAULT_DATE_PROPS","Partial","granularity","hideTimeZone","hourCycle","shouldForceLeadingZeros","DEFAULT_TIME_PROPS"],"sources":["../../../../src/components/fields/DatePicker/props.ts"],"sourcesContent":["import { AriaDatePickerProps, DateValue } from 'react-aria';\n\nexport const DEFAULT_DATE_PROPS: Partial<AriaDatePickerProps<DateValue>> = {\n  granularity: 'day',\n  hideTimeZone: true,\n  hourCycle: 24,\n  shouldForceLeadingZeros: true,\n};\n\nexport const DEFAULT_TIME_PROPS: Partial<AriaDatePickerProps<DateValue>> = {\n  hideTimeZone: true,\n  hourCycle: 24,\n  shouldForceLeadingZeros: true,\n};\n"],"mappings":";;AAEA,MAAaE,qBAA8D;CACzEE,aAAa;CACbC,cAAc;CACdC,WAAW;CACXC,yBAAyB;CAC1B;AAED,MAAaC,qBAA8D;CACzEH,cAAc;CACdC,WAAW;CACXC,yBAAyB;CAC1B"}

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

@@ -1,17 +1,24 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
+import { c } from "react-compiler-runtime";
 import { useImperativeHandle, useRef } from "react";
 import { createDOMRef } from "@react-spectrum/utils";
 import { createFocusManager } from "@react-aria/focus";
 
 //#region src/components/fields/DatePicker/utils.ts
 function useFocusManagerRef(ref) {
-	let domRef = useRef(null);
-	useImperativeHandle(ref, () => ({
-		...createDOMRef(domRef),
-		focus() {
-			createFocusManager(domRef).focusFirst({ tabbable: true });
-		}
-	}));
+	const $ = c(1);
+	const domRef = useRef(null);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = () => ({
+			...createDOMRef(domRef),
+			focus() {
+				createFocusManager(domRef).focusFirst({ tabbable: true });
+			}
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	useImperativeHandle(ref, t0);
 	return domRef;
 }
 function formatSegments(segments) {

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../../../src/components/fields/DatePicker/utils.ts"],"sourcesContent":["import { createFocusManager } from '@react-aria/focus';\nimport { createDOMRef } from '@react-spectrum/utils';\nimport { FocusableRef } from '@react-types/shared';\nimport { useImperativeHandle, useRef } from 'react';\nimport { DateSegment } from 'react-stately';\n\n// export function useFormatHelpText(\n//   props: Pick<SpectrumDatePickerBase, 'description' | 'showFormatHelpText'>,\n// ) {\n//   let formatter = useDateFormatter({ dateStyle: 'short' });\n//   let displayNames = useDisplayNames();\n//   return useMemo(() => {\n//     if (props.description) {\n//       return props.description;\n//     }\n//\n//     if (props.showFormatHelpText) {\n//       return formatter\n//         .formatToParts(new Date())\n//         .map((s) => {\n//           if (s.type === 'literal') {\n//             return s.value;\n//           }\n//\n//           return displayNames.of(s.type);\n//         })\n//         .join(' ');\n//     }\n//\n//     return '';\n//   }, [props.description, props.showFormatHelpText, formatter, displayNames]);\n// }\n\n// export function useVisibleMonths(maxVisibleMonths: number) {\n//   let [visibleMonths, setVisibleMonths] = useState(getVisibleMonths('large'));\n//   useLayoutEffect(() => {\n//     let onResize = () => setVisibleMonths(getVisibleMonths('large'));\n//     onResize();\n//\n//     window.addEventListener('resize', onResize);\n//     return () => {\n//       window.removeEventListener('resize', onResize);\n//     };\n//   }, []);\n//\n//   return Math.max(1, Math.min(visibleMonths, maxVisibleMonths, 3));\n// }\n\n// function getVisibleMonths(scale) {\n//   if (typeof window === 'undefined') {\n//     return 1;\n//   }\n//   let monthWidth = scale === 'large' ? 336 : 280;\n//   let gap = scale === 'large' ? 30 : 24;\n//   let popoverPadding = scale === 'large' ? 32 : 48;\n//   return Math.floor(\n//     (window.innerWidth - popoverPadding * 2) / (monthWidth + gap),\n//   );\n// }\n\nexport function useFocusManagerRef(ref: FocusableRef<HTMLElement>) {\n  let domRef = useRef(null);\n  useImperativeHandle(ref, () => ({\n    // @ts-ignore\n    ...createDOMRef(domRef),\n    focus() {\n      // @ts-ignore\n      createFocusManager(domRef).focusFirst({ tabbable: true });\n    },\n  }));\n  return domRef;\n}\n\nexport function formatSegments(segments: DateSegment[]) {\n  segments = JSON.parse(JSON.stringify(segments));\n\n  segments.forEach((segment) => {\n    if (segment.type === 'literal') {\n      if (segment.text === '/') {\n        segment.text = '-';\n      }\n\n      if (segment.text === ', ') {\n        segment.text = ' ';\n      }\n    }\n  });\n\n  const year = segments.find((s) => s.type === 'year');\n\n  if (year) {\n    segments.splice(segments.indexOf(year), 1);\n    segments.unshift(year);\n  }\n\n  const month = segments.find((s) => s.type === 'month');\n\n  if (month) {\n    segments.splice(segments.indexOf(month), 1);\n    segments.splice(2, 0, month);\n  }\n\n  const day = segments.find((s) => s.type === 'day');\n\n  if (day) {\n    segments.splice(segments.indexOf(day), 1);\n    segments.splice(4, 0, day);\n  }\n\n  return segments;\n}\n"],"mappings":";;;;;;AA4DA,SAAgB,mBAAmB,KAAgC;CACjE,IAAI,SAAS,OAAO,KAAK;AACzB,qBAAoB,YAAY;EAE9B,GAAG,aAAa,OAAO;EACvB,QAAQ;AAEN,sBAAmB,OAAO,CAAC,WAAW,EAAE,UAAU,MAAM,CAAC;;EAE5D,EAAE;AACH,QAAO;;AAGT,SAAgB,eAAe,UAAyB;AACtD,YAAW,KAAK,MAAM,KAAK,UAAU,SAAS,CAAC;AAE/C,UAAS,SAAS,YAAY;AAC5B,MAAI,QAAQ,SAAS,WAAW;AAC9B,OAAI,QAAQ,SAAS,IACnB,SAAQ,OAAO;AAGjB,OAAI,QAAQ,SAAS,KACnB,SAAQ,OAAO;;GAGnB;CAEF,MAAM,OAAO,SAAS,MAAM,MAAM,EAAE,SAAS,OAAO;AAEpD,KAAI,MAAM;AACR,WAAS,OAAO,SAAS,QAAQ,KAAK,EAAE,EAAE;AAC1C,WAAS,QAAQ,KAAK;;CAGxB,MAAM,QAAQ,SAAS,MAAM,MAAM,EAAE,SAAS,QAAQ;AAEtD,KAAI,OAAO;AACT,WAAS,OAAO,SAAS,QAAQ,MAAM,EAAE,EAAE;AAC3C,WAAS,OAAO,GAAG,GAAG,MAAM;;CAG9B,MAAM,MAAM,SAAS,MAAM,MAAM,EAAE,SAAS,MAAM;AAElD,KAAI,KAAK;AACP,WAAS,OAAO,SAAS,QAAQ,IAAI,EAAE,EAAE;AACzC,WAAS,OAAO,GAAG,GAAG,IAAI;;AAG5B,QAAO"}
+{"version":3,"file":"utils.js","names":["createFocusManager","createDOMRef","FocusableRef","useImperativeHandle","useRef","DateSegment","useFocusManagerRef","ref","$","_c","domRef","t0","Symbol","for","focus","focusFirst","tabbable","formatSegments","segments","JSON","parse","stringify","forEach","segment","type","text","year","find","s","splice","indexOf","unshift","month","day"],"sources":["../../../../src/components/fields/DatePicker/utils.ts"],"sourcesContent":["import { createFocusManager } from '@react-aria/focus';\nimport { createDOMRef } from '@react-spectrum/utils';\nimport { FocusableRef } from '@react-types/shared';\nimport { useImperativeHandle, useRef } from 'react';\nimport { DateSegment } from 'react-stately';\n\n// export function useFormatHelpText(\n//   props: Pick<SpectrumDatePickerBase, 'description' | 'showFormatHelpText'>,\n// ) {\n//   let formatter = useDateFormatter({ dateStyle: 'short' });\n//   let displayNames = useDisplayNames();\n//   return useMemo(() => {\n//     if (props.description) {\n//       return props.description;\n//     }\n//\n//     if (props.showFormatHelpText) {\n//       return formatter\n//         .formatToParts(new Date())\n//         .map((s) => {\n//           if (s.type === 'literal') {\n//             return s.value;\n//           }\n//\n//           return displayNames.of(s.type);\n//         })\n//         .join(' ');\n//     }\n//\n//     return '';\n//   }, [props.description, props.showFormatHelpText, formatter, displayNames]);\n// }\n\n// export function useVisibleMonths(maxVisibleMonths: number) {\n//   let [visibleMonths, setVisibleMonths] = useState(getVisibleMonths('large'));\n//   useLayoutEffect(() => {\n//     let onResize = () => setVisibleMonths(getVisibleMonths('large'));\n//     onResize();\n//\n//     window.addEventListener('resize', onResize);\n//     return () => {\n//       window.removeEventListener('resize', onResize);\n//     };\n//   }, []);\n//\n//   return Math.max(1, Math.min(visibleMonths, maxVisibleMonths, 3));\n// }\n\n// function getVisibleMonths(scale) {\n//   if (typeof window === 'undefined') {\n//     return 1;\n//   }\n//   let monthWidth = scale === 'large' ? 336 : 280;\n//   let gap = scale === 'large' ? 30 : 24;\n//   let popoverPadding = scale === 'large' ? 32 : 48;\n//   return Math.floor(\n//     (window.innerWidth - popoverPadding * 2) / (monthWidth + gap),\n//   );\n// }\n\nexport function useFocusManagerRef(ref: FocusableRef<HTMLElement>) {\n  let domRef = useRef(null);\n  useImperativeHandle(ref, () => ({\n    // @ts-ignore\n    ...createDOMRef(domRef),\n    focus() {\n      // @ts-ignore\n      createFocusManager(domRef).focusFirst({ tabbable: true });\n    },\n  }));\n  return domRef;\n}\n\nexport function formatSegments(segments: DateSegment[]) {\n  segments = JSON.parse(JSON.stringify(segments));\n\n  segments.forEach((segment) => {\n    if (segment.type === 'literal') {\n      if (segment.text === '/') {\n        segment.text = '-';\n      }\n\n      if (segment.text === ', ') {\n        segment.text = ' ';\n      }\n    }\n  });\n\n  const year = segments.find((s) => s.type === 'year');\n\n  if (year) {\n    segments.splice(segments.indexOf(year), 1);\n    segments.unshift(year);\n  }\n\n  const month = segments.find((s) => s.type === 'month');\n\n  if (month) {\n    segments.splice(segments.indexOf(month), 1);\n    segments.splice(2, 0, month);\n  }\n\n  const day = segments.find((s) => s.type === 'day');\n\n  if (day) {\n    segments.splice(segments.indexOf(day), 1);\n    segments.splice(4, 0, day);\n  }\n\n  return segments;\n}\n"],"mappings":";;;;;;;AA4DA,SAAOM,mBAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CACL,MAAAC,SAAaN,OAAO,KAAK;CAAC,IAAAO;AAAA,KAAAH,EAAA,OAAAI,OAAAC,IAAA,4BAAA,EAAA;AACDF,cAAO;GAAA,GAE3BV,aAAaS,OAAO;GAAAI,QAAA;AAGrBd,uBAAmBU,OAAO,CAAAK,WAAY,EAAAC,UAAY,MAAM,CAAC;;GAE5D;AAACR,IAAA,KAAAG;OAAAA,MAAAH,EAAA;AAPFL,qBAAoBI,KAAKI,GAOtB;AAAA,QACID;;AAGT,SAAgBO,eAAeC,UAAyB;AACtDA,YAAWC,KAAKC,MAAMD,KAAKE,UAAUH,SAAS,CAAC;AAE/CA,UAASI,SAASC,YAAY;AAC5B,MAAIA,QAAQC,SAAS,WAAW;AAC9B,OAAID,QAAQE,SAAS,IACnBF,SAAQE,OAAO;AAGjB,OAAIF,QAAQE,SAAS,KACnBF,SAAQE,OAAO;;GAGnB;CAEF,MAAMC,OAAOR,SAASS,MAAMC,MAAMA,EAAEJ,SAAS,OAAO;AAEpD,KAAIE,MAAM;AACRR,WAASW,OAAOX,SAASY,QAAQJ,KAAK,EAAE,EAAE;AAC1CR,WAASa,QAAQL,KAAK;;CAGxB,MAAMM,QAAQd,SAASS,MAAMC,MAAMA,EAAEJ,SAAS,QAAQ;AAEtD,KAAIQ,OAAO;AACTd,WAASW,OAAOX,SAASY,QAAQE,MAAM,EAAE,EAAE;AAC3Cd,WAASW,OAAO,GAAG,GAAGG,MAAM;;CAG9B,MAAMC,MAAMf,SAASS,MAAMC,MAAMA,EAAEJ,SAAS,MAAM;AAElD,KAAIS,KAAK;AACPf,WAASW,OAAOX,SAASY,QAAQG,IAAI,EAAE,EAAE;AACzCf,WAASW,OAAO,GAAG,GAAGI,IAAI;;AAG5B,QAAOf"}

package/dist/components/fields/FileInput/FileInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
@@ -118,11 +118,11 @@ function FileInput(allProps, ref) {
 	const onLocalChange = useEvent((event) => {
 		reader.current?.abort();
 		const file = event.target.files?.[0];
-		const name = file?.name ?? "";
+		const name_0 = file?.name ?? "";
 		const commit = (next) => {
 			setSelection({
 				value: next,
-				name
+				name: name_0
 			});
 			setValue(next);
 		};

package/dist/components/fields/FileInput/FileInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.js","names":[],"sources":["../../../../src/components/fields/FileInput/FileInput.tsx"],"sourcesContent":["import { createFocusableRef } from '@react-spectrum/utils';\nimport { useControlledState } from '@react-stately/utils';\nimport {\n  BaseProps,\n  BlockStyleProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  PositionStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  forwardRef,\n  RefObject,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal/hooks/use-event';\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { Action } from '../../actions';\nimport {\n  getValidationMods,\n  useFieldProps,\n  ValidationIndicator,\n  wrapWithField,\n} from '../../form';\n\nimport type { ChangeEvent } from 'react';\nimport type { AriaTextFieldProps } from 'react-aria';\nimport type { Props } from '../../../props';\n\nconst FileInputElement = tasty(Action, {\n  qa: 'FileInputWrapper',\n  styles: {\n    display: 'inline-flex',\n    position: 'relative',\n    preset: 't3',\n    padding: '.5x 1x',\n    gap: '1x',\n    flow: 'row',\n    placeItems: 'center start',\n    fill: {\n      '': '#surface',\n      'drag-hover': '#primary.16',\n      ':hover': '#primary.08',\n      disabled: '#disabled-surface',\n    },\n    border: {\n      '': true,\n      valid: '#success-text.50',\n      invalid: '#danger-text.50',\n      ':focus-within & :focus-visible': '#primary-text',\n    },\n    radius: true,\n    cursor: '$pointer',\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n\n    Button: {\n      radius: true,\n      border: {\n        '': '#clear',\n        pressed: '#primary.30',\n      },\n      fill: '#primary.12',\n      color: {\n        '': '#primary',\n        disabled: '#dark.30',\n      },\n      padding: '.5x (1.5x - 1px)',\n      transition: 'theme',\n    },\n\n    Placeholder: {\n      color: '#dark-02',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis',\n      width: 'max 100%',\n      overflow: 'hidden',\n    },\n\n    Value: {\n      color: '#dark-02',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis',\n      width: 'max 100%',\n      overflow: 'hidden',\n    },\n\n    State: {\n      display: 'flex',\n      placeItems: 'center',\n    },\n\n    ValidationIcon: {\n      $: '> State >',\n      display: 'grid',\n      placeItems: 'center',\n      width: 'min 2x',\n      fontSize: '$icon-size',\n    },\n\n    Input: {\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      radius: '$content-radius',\n      opacity: 0.01,\n      cursor: '$pointer',\n      zIndex: 10,\n    },\n  },\n});\n\nexport interface CubeFileInputProps\n  extends BaseProps,\n    PositionStyleProps,\n    ContainerStyleProps,\n    BlockStyleProps,\n    AriaTextFieldProps,\n    FieldBaseProps<string | null | undefined> {\n  /** The form instance; redeclared for the same reason as in `Checkbox`. */\n  form?: FieldBaseProps['form'];\n  /** Field name; modern forms also accept nested tuple paths. */\n  name?: FieldBaseProps['name'];\n  /**\n   * The size of the input\n   * @default default\n   */\n  size?: 'small' | 'default' | 'large' | string;\n  /** The input ref */\n  inputRef?: RefObject<HTMLInputElement>;\n  /** Style map for the input */\n  inputStyles?: Styles;\n  /**\n   * The type of the input\n   * @default file\n   */\n  type?: 'file' | 'text';\n  /** Direct input props */\n  inputProps?: Props;\n  /** The file types that the input should accept */\n  accept?: string;\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  placeholder?: string;\n}\n\nfunction extractFileNameFromValue(value?: string) {\n  return typeof value === 'string'\n    ? (value as string).split('\\\\')?.pop()\n    : undefined;\n}\n\nfunction FileInput(allProps: CubeFileInputProps, ref) {\n  const { t } = useI18n();\n\n  const props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onChange',\n  });\n\n  let {\n    id,\n    name,\n    qa,\n    value,\n    onChange,\n    placeholder,\n    inputRef,\n    isDisabled,\n    isInvalid,\n    isValid,\n    inputStyles,\n    type = 'file',\n    inputProps,\n    accept,\n    form,\n    ...otherProps\n  } = props;\n\n  const [dragHover, setDragHover] = useState(false);\n  const [currentValue, setValue] = useControlledState(\n    value,\n    props.defaultValue ?? '',\n    onChange,\n  );\n  const [selection, setSelection] = useState<{\n    value: string;\n    name: string;\n  }>();\n  const fileName =\n    type === 'file'\n      ? extractFileNameFromValue(currentValue)\n      : currentValue === selection?.value\n        ? selection?.name\n        : undefined;\n  const reader = useRef<FileReader | null>(null);\n\n  let domRef = useRef(null);\n\n  inputRef = useCombinedRefs(inputRef);\n\n  useEffect(() => {\n    // Browsers only allow clearing a file input programmatically. A reset or\n    // external value replacement must also release the old native selection.\n    if (inputRef.current && currentValue !== selection?.value) {\n      inputRef.current.value = '';\n    }\n  }, [currentValue, selection, inputRef]);\n  useEffect(() => () => reader.current?.abort(), [type]);\n\n  const onLocalChange = useEvent((event: ChangeEvent<HTMLInputElement>) => {\n    reader.current?.abort();\n    const file = event.target.files?.[0];\n    const name = file?.name ?? '';\n    const commit = (next: string) => {\n      setSelection({ value: next, name });\n      setValue(next);\n    };\n    if (type === 'file') {\n      commit(event.target.value);\n    } else if (file) {\n      const nextReader = new FileReader();\n      reader.current = nextReader;\n      nextReader.onload = () => commit(String(nextReader.result ?? ''));\n      nextReader.readAsText(file);\n    } else {\n      commit('');\n    }\n  });\n\n  let styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef?.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef?.current;\n    },\n  }));\n\n  const fileInput = (\n    <FileInputElement\n      ref={domRef}\n      styles={inputStyles}\n      isDisabled={isDisabled}\n      mods={{\n        selected: !!fileName,\n        'drag-hover': dragHover,\n        ...getValidationMods({ isInvalid, isValid }),\n      }}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === 'Space') {\n          inputRef?.current?.click();\n        }\n      }}\n    >\n      <input\n        ref={inputRef}\n        id={id}\n        name={name}\n        accept={accept}\n        data-qa={qa || 'FileInput'}\n        data-input-type=\"fileinput\"\n        data-element=\"Input\"\n        disabled={isDisabled}\n        type=\"file\"\n        multiple={false}\n        tabIndex={-1}\n        onChange={onLocalChange}\n        onDragEnter={() => {\n          setDragHover(true);\n        }}\n        onDragLeave={() => {\n          setDragHover(false);\n        }}\n        onDrop={() => {\n          setDragHover(false);\n        }}\n        {...inputProps}\n      />\n      <div data-element=\"Button\">\n        {t('fileInput.chooseFile', 'Choose file')}\n      </div>\n      <div data-element={fileName ? 'Value' : 'Placeholder'}>\n        {fileName ||\n          placeholder ||\n          t('fileInput.noFileSelected', 'No file selected')}\n      </div>\n      <ValidationIndicator isInvalid={isInvalid} isValid={isValid} />\n    </FileInputElement>\n  );\n\n  return wrapWithField(fileInput, domRef, {\n    ...props,\n  });\n}\n\n/**\n * FileInputs are file inputs that allow users to select local files to\n * upload them to the server.\n */\nconst _FileInput = forwardRef(FileInput);\n\n_FileInput.displayName = 'FileInput';\n\nexport { _FileInput as FileInput };\n"],"mappings":"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"}
+{"version":3,"file":"FileInput.js","names":["createFocusableRef","useControlledState","BaseProps","BlockStyleProps","CONTAINER_STYLES","ContainerStyleProps","PositionStyleProps","Styles","tasty","forwardRef","RefObject","useEffect","useImperativeHandle","useRef","useState","useEvent","useI18n","FieldBaseProps","useCombinedRefs","extractStyles","Action","getValidationMods","useFieldProps","ValidationIndicator","wrapWithField","ChangeEvent","AriaTextFieldProps","Props","FileInputElement","qa","styles","display","position","preset","padding","gap","flow","placeItems","fill","disabled","border","valid","invalid","radius","cursor","overflow","whiteSpace","Button","pressed","color","transition","Placeholder","textOverflow","width","Value","State","ValidationIcon","$","fontSize","Input","top","right","bottom","left","opacity","zIndex","CubeFileInputProps","form","name","size","inputRef","HTMLInputElement","inputStyles","type","inputProps","accept","value","defaultValue","onChange","placeholder","extractFileNameFromValue","split","pop","undefined","FileInput","allProps","ref","t","props","defaultValidationTrigger","id","isDisabled","isInvalid","isValid","otherProps","dragHover","setDragHover","currentValue","setValue","selection","setSelection","fileName","reader","FileReader","domRef","current","abort","onLocalChange","event","file","target","files","commit","next","nextReader","onload","String","result","readAsText","select","getInputElement","fileInput","selected","e","key","click","_FileInput","displayName"],"sources":["../../../../src/components/fields/FileInput/FileInput.tsx"],"sourcesContent":["import { createFocusableRef } from '@react-spectrum/utils';\nimport { useControlledState } from '@react-stately/utils';\nimport {\n  BaseProps,\n  BlockStyleProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  PositionStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  forwardRef,\n  RefObject,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal/hooks/use-event';\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { Action } from '../../actions';\nimport {\n  getValidationMods,\n  useFieldProps,\n  ValidationIndicator,\n  wrapWithField,\n} from '../../form';\n\nimport type { ChangeEvent } from 'react';\nimport type { AriaTextFieldProps } from 'react-aria';\nimport type { Props } from '../../../props';\n\nconst FileInputElement = tasty(Action, {\n  qa: 'FileInputWrapper',\n  styles: {\n    display: 'inline-flex',\n    position: 'relative',\n    preset: 't3',\n    padding: '.5x 1x',\n    gap: '1x',\n    flow: 'row',\n    placeItems: 'center start',\n    fill: {\n      '': '#surface',\n      'drag-hover': '#primary.16',\n      ':hover': '#primary.08',\n      disabled: '#disabled-surface',\n    },\n    border: {\n      '': true,\n      valid: '#success-text.50',\n      invalid: '#danger-text.50',\n      ':focus-within & :focus-visible': '#primary-text',\n    },\n    radius: true,\n    cursor: '$pointer',\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n\n    Button: {\n      radius: true,\n      border: {\n        '': '#clear',\n        pressed: '#primary.30',\n      },\n      fill: '#primary.12',\n      color: {\n        '': '#primary',\n        disabled: '#dark.30',\n      },\n      padding: '.5x (1.5x - 1px)',\n      transition: 'theme',\n    },\n\n    Placeholder: {\n      color: '#dark-02',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis',\n      width: 'max 100%',\n      overflow: 'hidden',\n    },\n\n    Value: {\n      color: '#dark-02',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis',\n      width: 'max 100%',\n      overflow: 'hidden',\n    },\n\n    State: {\n      display: 'flex',\n      placeItems: 'center',\n    },\n\n    ValidationIcon: {\n      $: '> State >',\n      display: 'grid',\n      placeItems: 'center',\n      width: 'min 2x',\n      fontSize: '$icon-size',\n    },\n\n    Input: {\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      radius: '$content-radius',\n      opacity: 0.01,\n      cursor: '$pointer',\n      zIndex: 10,\n    },\n  },\n});\n\nexport interface CubeFileInputProps\n  extends BaseProps,\n    PositionStyleProps,\n    ContainerStyleProps,\n    BlockStyleProps,\n    AriaTextFieldProps,\n    FieldBaseProps<string | null | undefined> {\n  /** The form instance; redeclared for the same reason as in `Checkbox`. */\n  form?: FieldBaseProps['form'];\n  /** Field name; modern forms also accept nested tuple paths. */\n  name?: FieldBaseProps['name'];\n  /**\n   * The size of the input\n   * @default default\n   */\n  size?: 'small' | 'default' | 'large' | string;\n  /** The input ref */\n  inputRef?: RefObject<HTMLInputElement>;\n  /** Style map for the input */\n  inputStyles?: Styles;\n  /**\n   * The type of the input\n   * @default file\n   */\n  type?: 'file' | 'text';\n  /** Direct input props */\n  inputProps?: Props;\n  /** The file types that the input should accept */\n  accept?: string;\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  placeholder?: string;\n}\n\nfunction extractFileNameFromValue(value?: string) {\n  return typeof value === 'string'\n    ? (value as string).split('\\\\')?.pop()\n    : undefined;\n}\n\nfunction FileInput(allProps: CubeFileInputProps, ref) {\n  const { t } = useI18n();\n\n  const props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onChange',\n  });\n\n  let {\n    id,\n    name,\n    qa,\n    value,\n    onChange,\n    placeholder,\n    inputRef,\n    isDisabled,\n    isInvalid,\n    isValid,\n    inputStyles,\n    type = 'file',\n    inputProps,\n    accept,\n    form,\n    ...otherProps\n  } = props;\n\n  const [dragHover, setDragHover] = useState(false);\n  const [currentValue, setValue] = useControlledState(\n    value,\n    props.defaultValue ?? '',\n    onChange,\n  );\n  const [selection, setSelection] = useState<{\n    value: string;\n    name: string;\n  }>();\n  const fileName =\n    type === 'file'\n      ? extractFileNameFromValue(currentValue)\n      : currentValue === selection?.value\n        ? selection?.name\n        : undefined;\n  const reader = useRef<FileReader | null>(null);\n\n  let domRef = useRef(null);\n\n  inputRef = useCombinedRefs(inputRef);\n\n  useEffect(() => {\n    // Browsers only allow clearing a file input programmatically. A reset or\n    // external value replacement must also release the old native selection.\n    if (inputRef.current && currentValue !== selection?.value) {\n      inputRef.current.value = '';\n    }\n  }, [currentValue, selection, inputRef]);\n  useEffect(() => () => reader.current?.abort(), [type]);\n\n  const onLocalChange = useEvent((event: ChangeEvent<HTMLInputElement>) => {\n    reader.current?.abort();\n    const file = event.target.files?.[0];\n    const name = file?.name ?? '';\n    const commit = (next: string) => {\n      setSelection({ value: next, name });\n      setValue(next);\n    };\n    if (type === 'file') {\n      commit(event.target.value);\n    } else if (file) {\n      const nextReader = new FileReader();\n      reader.current = nextReader;\n      nextReader.onload = () => commit(String(nextReader.result ?? ''));\n      nextReader.readAsText(file);\n    } else {\n      commit('');\n    }\n  });\n\n  let styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef?.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef?.current;\n    },\n  }));\n\n  const fileInput = (\n    <FileInputElement\n      ref={domRef}\n      styles={inputStyles}\n      isDisabled={isDisabled}\n      mods={{\n        selected: !!fileName,\n        'drag-hover': dragHover,\n        ...getValidationMods({ isInvalid, isValid }),\n      }}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === 'Space') {\n          inputRef?.current?.click();\n        }\n      }}\n    >\n      <input\n        ref={inputRef}\n        id={id}\n        name={name}\n        accept={accept}\n        data-qa={qa || 'FileInput'}\n        data-input-type=\"fileinput\"\n        data-element=\"Input\"\n        disabled={isDisabled}\n        type=\"file\"\n        multiple={false}\n        tabIndex={-1}\n        onChange={onLocalChange}\n        onDragEnter={() => {\n          setDragHover(true);\n        }}\n        onDragLeave={() => {\n          setDragHover(false);\n        }}\n        onDrop={() => {\n          setDragHover(false);\n        }}\n        {...inputProps}\n      />\n      <div data-element=\"Button\">\n        {t('fileInput.chooseFile', 'Choose file')}\n      </div>\n      <div data-element={fileName ? 'Value' : 'Placeholder'}>\n        {fileName ||\n          placeholder ||\n          t('fileInput.noFileSelected', 'No file selected')}\n      </div>\n      <ValidationIndicator isInvalid={isInvalid} isValid={isValid} />\n    </FileInputElement>\n  );\n\n  return wrapWithField(fileInput, domRef, {\n    ...props,\n  });\n}\n\n/**\n * FileInputs are file inputs that allow users to select local files to\n * upload them to the server.\n */\nconst _FileInput = forwardRef(FileInput);\n\n_FileInput.displayName = 'FileInput';\n\nexport { _FileInput as FileInput };\n"],"mappings":"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"}