@cube-dev/ui-kit 0.196.0 → 0.198.0

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

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","names":["createCalendar","FocusableRef","BaseProps","CONTAINER_STYLES","ContainerStyleProps","Styles","forwardRef","useRef","AriaDateFieldProps","DateValue","useDateField","useLocale","useDateFieldState","FieldBaseProps","mergeProps","extractStyles","useFieldProps","wrapWithField","DateInputBase","DatePickerSegment","parseAbsoluteDate","DEFAULT_DATE_PROPS","formatSegments","useFocusManagerRef","ReactElement","Ref","CubeDateInputProps","Omit","T","wrapperStyles","inputStyles","styles","size","DateInput","rawProps","ref","HTMLElement","props","defaultValidationTrigger","valuePropsMapper","value","onChange","Object","assign","qa","autoFocus","isDisabled","isReadOnly","isRequired","isValid","useLocaleProp","domRef","locale","state","segments","fieldRef","labelProps","fieldProps","component","isInvalid","map","segment","i","_DateInput","displayName"],"sources":["../../../../src/components/fields/DatePicker/DateInput.tsx"],"sourcesContent":["import { createCalendar } from '@internationalized/date';\nimport { 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  AriaDateFieldProps,\n  DateValue,\n  useDateField,\n  useLocale,\n} from 'react-aria';\nimport { useDateFieldState } 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 { parseAbsoluteDate } from './parseDate';\nimport { DEFAULT_DATE_PROPS } from './props';\nimport { formatSegments, useFocusManagerRef } from './utils';\n\nimport type { ReactElement, Ref } from 'react';\n\nexport interface CubeDateInputProps<T extends DateValue = DateValue>\n  extends Omit<AriaDateFieldProps<T>, 'errorMessage' | 'form' | 'name'>,\n    BaseProps,\n    ContainerStyleProps,\n    FieldBaseProps<T | null | undefined> {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  useLocale?: boolean;\n}\n\nfunction DateInput<T extends DateValue>(\n  rawProps: CubeDateInputProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  let props = useFieldProps(rawProps, {\n    defaultValidationTrigger: 'onBlur',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: typeof value === 'string' ? parseAbsoluteDate(value) : value,\n      onChange,\n    }),\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  let {\n    qa,\n    autoFocus,\n    isDisabled,\n    inputStyles,\n    wrapperStyles,\n    isReadOnly,\n    isRequired,\n    isValid,\n    size = 'medium',\n    useLocale: useLocaleProp,\n  } = props;\n\n  let styles = extractStyles(props, CONTAINER_STYLES, wrapperStyles);\n\n  let domRef = useFocusManagerRef(ref);\n  let { locale } = useLocale();\n  let state = useDateFieldState({\n    ...props,\n    locale: useLocaleProp ? locale : 'en-US',\n    createCalendar,\n  });\n\n  if (useLocaleProp == null) {\n    state.segments = formatSegments(state.segments);\n  }\n\n  let fieldRef = useRef(null);\n  let { labelProps, fieldProps } = useDateField(props, state, fieldRef);\n\n  const component = (\n    <DateInputBase\n      ref={fieldRef}\n      qa={qa || 'DateInput'}\n      inputType=\"dateinput\"\n      size={size}\n      fieldProps={fieldProps}\n      isDisabled={isDisabled}\n      autoFocus={autoFocus}\n      isInvalid={state.isInvalid}\n      isValid={isValid}\n      styles={wrapperStyles}\n      inputStyles={inputStyles}\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(component, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\n/**\n * DateInputs allow users to enter and edit date and time values using a keyboard.\n * Each part of a date value is displayed in an individually editable segment.\n */\nconst _DateInput = forwardRef(DateInput) as <T extends DateValue = DateValue>(\n  props: CubeDateInputProps<T> & { ref?: Ref<HTMLElement> },\n) => ReactElement | null;\n\n(_DateInput as any).displayName = 'DateInput';\n\nexport { _DateInput as DateInput };\n"],"mappings":";;;;;;;;;;;;;;;;;;AA0CA,SAASiC,UACPC,UACAC,KACA;CACA,IAAIE,QAAQrB,cAAckB,UAAU;EAClCI,0BAA0B;EAC1BC,mBAAmB,EAAEC,OAAOC,gBAAgB;GAC1CD,OAAO,OAAOA,UAAU,WAAWpB,kBAAkBoB,MAAM,GAAGA;GAC9DC;GACD;EACF,CAAC;AACFJ,SAAQK,OAAOC,OAAO,EAAE,EAAEtB,oBAAoBgB,MAAM;CAEpD,IAAI,EACFO,IACAC,WACAC,YACAhB,aACAD,eACAkB,YACAC,YACAC,SACAjB,OAAO,UACPrB,WAAWuC,kBACTb;AAEStB,eAAcsB,OAAOlC,kBAAkB0B,cAAc;CAElE,IAAIsB,SAAS5B,mBAAmBY,IAAI;CACpC,IAAI,EAAEiB,WAAWzC,WAAW;CAC5B,IAAI0C,QAAQzC,kBAAkB;EAC5B,GAAGyB;EACHe,QAAQF,gBAAgBE,SAAS;EACjCpD;EACD,CAAC;AAEF,KAAIkD,iBAAiB,KACnBG,OAAMC,WAAWhC,eAAe+B,MAAMC,SAAS;CAGjD,IAAIC,WAAWhD,OAAO,KAAK;CAC3B,IAAI,EAAEiD,YAAYC,eAAe/C,aAAa2B,OAAOgB,OAAOE,SAAS;AA6BrE,QAAOtC,cA1BL,oBAAC;EACC,KAAKsC;EACL,IAAIX,MAAM;EACV,WAAU;EACJZ;EACMyB;EACAX;EACDD;EACX,WAAWQ,MAAMM;EACRV;EACT,QAAQpB;EACKC;YAEZuB,MAAMC,SAASM,KAAKC,SAASC,MAC5B,oBAAC;GAEUD;GACFR;GACKP;GACAC;GACAC;KALPc,EAOR,CAAC;GAEL,EAE+BX,QAAQ;EACtC,GAAGd;EACHmB,YAAY1C,aAAWuB,MAAMmB,YAAYA,WAAU;EACpD,CAAC;;;;;;AAOJ,MAAMO,aAAazD,WAAW2B,UAAU;AAIxC,AAAC8B,WAAmBC,cAAc"}
+{"version":3,"file":"DateInput.js","names":["createCalendar","FocusableRef","BaseProps","CONTAINER_STYLES","ContainerStyleProps","Styles","forwardRef","useRef","AriaDateFieldProps","DateValue","useDateField","useLocale","useDateFieldState","FieldBaseProps","mergeProps","extractStyles","useFieldProps","wrapWithField","DateInputBase","DatePickerSegment","parseAbsoluteDate","DEFAULT_DATE_PROPS","formatSegments","useFocusManagerRef","ReactElement","Ref","CubeDateInputProps","Omit","T","wrapperStyles","inputStyles","styles","size","DateInput","rawProps","ref","HTMLElement","props","defaultValidationTrigger","valuePropsMapper","value","onChange","Object","assign","qa","autoFocus","isDisabled","isReadOnly","isRequired","isValid","useLocaleProp","domRef","HTMLDivElement","locale","state","segments","fieldRef","labelProps","fieldProps","component","isInvalid","map","segment","i","_DateInput","displayName","DateInputBase","mergeProps"],"sources":["../../../../src/components/fields/DatePicker/DateInput.tsx"],"sourcesContent":["import { createCalendar } from '@internationalized/date';\nimport { 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  AriaDateFieldProps,\n  DateValue,\n  useDateField,\n  useLocale,\n} from 'react-aria';\nimport { useDateFieldState } 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 { parseAbsoluteDate } from './parseDate';\nimport { DEFAULT_DATE_PROPS } from './props';\nimport { formatSegments, useFocusManagerRef } from './utils';\n\nimport type { ReactElement, Ref } from 'react';\n\nexport interface CubeDateInputProps<T extends DateValue = DateValue>\n  extends\n    Omit<AriaDateFieldProps<T>, 'errorMessage' | 'form' | 'name'>,\n    BaseProps,\n    ContainerStyleProps,\n    FieldBaseProps<T | null | undefined> {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  useLocale?: boolean;\n}\n\nfunction DateInput<T extends DateValue>(\n  rawProps: CubeDateInputProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  let props = useFieldProps(rawProps, {\n    defaultValidationTrigger: 'onBlur',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: typeof value === 'string' ? parseAbsoluteDate(value) : value,\n      onChange,\n    }),\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  let {\n    qa,\n    autoFocus,\n    isDisabled,\n    inputStyles,\n    wrapperStyles,\n    isReadOnly,\n    isRequired,\n    isValid,\n    size = 'medium',\n    useLocale: useLocaleProp,\n  } = props;\n\n  let styles = extractStyles(props, CONTAINER_STYLES, wrapperStyles);\n\n  let domRef = useRef<HTMLDivElement>(null);\n\n  useFocusManagerRef(ref, domRef);\n  let { locale } = useLocale();\n  let state = useDateFieldState({\n    ...props,\n    locale: useLocaleProp ? locale : 'en-US',\n    createCalendar,\n  });\n\n  if (useLocaleProp == null) {\n    state.segments = formatSegments(state.segments);\n  }\n\n  let fieldRef = useRef(null);\n  let { labelProps, fieldProps } = useDateField(props, state, fieldRef);\n\n  const component = (\n    <DateInputBase\n      ref={fieldRef}\n      wrapperRef={domRef}\n      qa={qa || 'DateInput'}\n      inputType=\"dateinput\"\n      size={size}\n      fieldProps={fieldProps}\n      isDisabled={isDisabled}\n      autoFocus={autoFocus}\n      isInvalid={state.isInvalid}\n      isValid={isValid}\n      styles={wrapperStyles}\n      inputStyles={inputStyles}\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(component, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\n/**\n * DateInputs allow users to enter and edit date and time values using a keyboard.\n * Each part of a date value is displayed in an individually editable segment.\n */\nconst _DateInput = forwardRef(DateInput) as <T extends DateValue = DateValue>(\n  props: CubeDateInputProps<T> & { ref?: Ref<HTMLElement> },\n) => ReactElement | null;\n\n(_DateInput as any).displayName = 'DateInput';\n\nexport { _DateInput as DateInput };\n"],"mappings":";;;;;;;;;;;;;;;;;AA2CA,SAASiC,UACPC,UACAC,KACA;CACA,IAAIE,QAAQrB,cAAckB,UAAU;EAClCI,0BAA0B;EAC1BC,mBAAmB,EAAEC,OAAOC,gBAAgB;GAC1CD,OAAO,OAAOA,UAAU,WAAWpB,kBAAkBoB,KAAK,IAAIA;GAC9DC;EACF;CACF,CAAC;CACDJ,QAAQK,OAAOC,OAAO,CAAC,GAAGtB,oBAAoBgB,KAAK;CAEnD,IAAI,EACFO,IACAC,WACAC,YACAhB,aACAD,eACAkB,YACAC,YACAC,SACAjB,OAAO,UACPrB,WAAWuC,kBACTb;CAEStB,cAAcsB,OAAOlC,kBAAkB0B,aAAa;CAEjE,IAAIsB,SAAS5C,OAAuB,IAAI;CAExCgB,mBAAmBY,KAAKgB,MAAM;CAC9B,IAAI,EAAEE,WAAW1C,UAAU;CAC3B,IAAI2C,QAAQ1C,kBAAkB;EAC5B,GAAGyB;EACHgB,QAAQH,gBAAgBG,SAAS;EACjCrD;CACF,CAAC;CAED,IAAIkD,iBAAiB,MACnBI,MAAMC,WAAWjC,eAAegC,MAAMC,QAAQ;CAGhD,IAAIC,WAAWjD,OAAO,IAAI;CAC1B,IAAI,EAAEkD,YAAYC,eAAehD,aAAa2B,OAAOiB,OAAOE,QAAQ;CAEpE,MAAMG,YACJ,oBAACO,gBAAD;EACE,KAAKV;EACL,YAAYL;EACZ,IAAIP,MAAM;EACV,WAAU;EACJZ;EACM0B;EACAZ;EACDD;EACX,WAAWS,MAAMM;EACRX;EACT,QAAQpB;EACKC;EAEZwB,UAAAA,MAAMC,SAASM,KAAKC,SAASC,MAC5B,oBAAC,mBAAD;GAEWD;GACFR;GACKR;GACAC;GACAC;EAAW,GALlBe,CAKkB,CAE1B;CACY,CAAA;CAGjB,OAAO9C,cAAc0C,WAAW;EAC9B,GAAGtB;EACHoB,YAAY3C,aAAWuB,MAAMoB,YAAYA,UAAU;CACrD,CAAC;AACH;;;;;AAMA,MAAMO,aAAa1D,WAAW2B,SAAS;AAIvC,WAAoBgC,cAAc"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
@@ -10,7 +10,6 @@ import React, { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useFocusRing } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-
 //#region src/components/fields/DatePicker/DateInputBase.tsx
 const DateInputWrapperElement = tasty({
 	qa: "DateInputWrapper",
@@ -35,9 +34,9 @@ const DateInputElement = tasty({
 	}
 });
 function DateInputBase(props, ref) {
-	const $ = c(44);
+	const $ = c(48);
 	const inputRef = useRef(null);
-	const { qa, inputType, isDisabled, inputStyles, children, fieldProps, style, disableFocusRing, autoFocus, isInvalid, isValid, isLoading, size: t0, suffix } = props;
+	const { qa, inputType, isDisabled, inputStyles, children, fieldProps, style, disableFocusRing, autoFocus, isInvalid, isValid, isLoading, size: t0, suffix, wrapperRef } = props;
 	const size = t0 === void 0 ? "medium" : t0;
 	let t1;
 	if ($[0] !== props) {
@@ -112,33 +111,39 @@ function DateInputBase(props, ref) {
 		$[20] = t11;
 	} else t11 = $[20];
 	let t12;
-	if ($[21] !== ref) {
-		t12 = mergeRefs(ref, inputRef);
-		$[21] = ref;
+	if ($[21] !== autoFocus) {
+		t12 = autoFocus ? { "data-autofocus": "" } : void 0;
+		$[21] = autoFocus;
 		$[22] = t12;
 	} else t12 = $[22];
 	let t13;
-	if ($[23] !== children || $[24] !== inputStyles || $[25] !== size || $[26] !== t12) {
-		t13 = /* @__PURE__ */ jsx("div", {
+	if ($[23] !== ref) {
+		t13 = mergeRefs(ref, inputRef);
+		$[23] = ref;
+		$[24] = t13;
+	} else t13 = $[24];
+	let t14;
+	if ($[25] !== children || $[26] !== inputStyles || $[27] !== size || $[28] !== t13) {
+		t14 = /* @__PURE__ */ jsx("div", {
 			"data-element": "Contents",
 			role: "presentation",
 			children: /* @__PURE__ */ jsx(DateInputElement, {
-				ref: t12,
+				ref: t13,
 				"data-size": size,
 				role: "presentation",
 				styles: inputStyles,
 				children
 			})
 		});
-		$[23] = children;
-		$[24] = inputStyles;
-		$[25] = size;
-		$[26] = t12;
-		$[27] = t13;
-	} else t13 = $[27];
-	let t14;
-	if ($[28] !== isInvalid || $[29] !== isLoading || $[30] !== isValid || $[31] !== showValidationIndicator || $[32] !== suffix) {
-		t14 = showValidationIndicator || suffix ? /* @__PURE__ */ jsxs("div", {
+		$[25] = children;
+		$[26] = inputStyles;
+		$[27] = size;
+		$[28] = t13;
+		$[29] = t14;
+	} else t14 = $[29];
+	let t15;
+	if ($[30] !== isInvalid || $[31] !== isLoading || $[32] !== isValid || $[33] !== showValidationIndicator || $[34] !== suffix) {
+		t15 = showValidationIndicator || suffix ? /* @__PURE__ */ jsxs("div", {
 			"data-element": "Suffix",
 			children: [/* @__PURE__ */ jsx(ValidationIndicator, {
 				isInvalid,
@@ -146,41 +151,45 @@ function DateInputBase(props, ref) {
 				isLoading
 			}), suffix]
 		}) : null;
-		$[28] = isInvalid;
-		$[29] = isLoading;
-		$[30] = isValid;
-		$[31] = showValidationIndicator;
-		$[32] = suffix;
-		$[33] = t14;
-	} else t14 = $[33];
-	let t15;
-	if ($[34] !== size || $[35] !== style || $[36] !== styles || $[37] !== t11 || $[38] !== t13 || $[39] !== t14 || $[40] !== t4 || $[41] !== t5 || $[42] !== t9) {
-		t15 = /* @__PURE__ */ jsxs(DateInputWrapperElement, {
+		$[30] = isInvalid;
+		$[31] = isLoading;
+		$[32] = isValid;
+		$[33] = showValidationIndicator;
+		$[34] = suffix;
+		$[35] = t15;
+	} else t15 = $[35];
+	let t16;
+	if ($[36] !== size || $[37] !== style || $[38] !== styles || $[39] !== t11 || $[40] !== t12 || $[41] !== t14 || $[42] !== t15 || $[43] !== t4 || $[44] !== t5 || $[45] !== t9 || $[46] !== wrapperRef) {
+		t16 = /* @__PURE__ */ jsxs(DateInputWrapperElement, {
+			ref: wrapperRef,
 			qa: t4,
 			styles,
 			"data-size": size,
 			"data-input-type": t5,
 			mods: t9,
 			...t11,
+			...t12,
 			style,
-			children: [t13, t14]
+			children: [t14, t15]
 		});
-		$[34] = size;
-		$[35] = style;
-		$[36] = styles;
-		$[37] = t11;
-		$[38] = t13;
-		$[39] = t14;
-		$[40] = t4;
-		$[41] = t5;
-		$[42] = t9;
-		$[43] = t15;
-	} else t15 = $[43];
-	return t15;
+		$[36] = size;
+		$[37] = style;
+		$[38] = styles;
+		$[39] = t11;
+		$[40] = t12;
+		$[41] = t14;
+		$[42] = t15;
+		$[43] = t4;
+		$[44] = t5;
+		$[45] = t9;
+		$[46] = wrapperRef;
+		$[47] = t16;
+	} else t16 = $[47];
+	return t16;
 }
 const _DateInputBase = React.forwardRef(DateInputBase);
 _DateInputBase.displayName = "DateInputBase";
-
 //#endregion
-export { _DateInputBase };
+export { _DateInputBase as DateInputBase };
+
 //# sourceMappingURL=DateInputBase.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DateInputBase.js","names":["mergeRefs","CONTAINER_STYLES","ContainerStyleProps","Styles","tasty","React","useRef","useFocusRing","mergeProps","extractStyles","getValidationMods","hasValidationIndicator","ValidationIndicator","DEFAULT_INPUT_STYLES","INPUT_WRAPPER_STYLES","Props","DateInputWrapperElement","qa","role","styles","display","DateInputElement","height","flow","placeItems","CubeDateAtomInputProps","inputType","isDisabled","children","ReactNode","fieldProps","style","CSSProperties","disableFocusRing","autoFocus","inputStyles","size","isInvalid","isValid","isLoading","suffix","DateInputBase","props","ref","$","_c","inputRef","t0","undefined","t1","t2","isTextInput","within","focusProps","isFocused","t3","showValidationIndicator","t4","t5","t6","t7","t8","t9","disabled","focused","t10","t11","t12","t13","t14","t15","_DateInputBase","forwardRef","displayName"],"sources":["../../../../src/components/fields/DatePicker/DateInputBase.tsx"],"sourcesContent":["import { mergeRefs } from '@react-aria/utils';\nimport {\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport React, { useRef } from 'react';\nimport { useFocusRing } from 'react-aria';\n\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport {\n  getValidationMods,\n  hasValidationIndicator,\n  ValidationIndicator,\n} from '../../form';\nimport {\n  DEFAULT_INPUT_STYLES,\n  INPUT_WRAPPER_STYLES,\n} from '../TextInput/TextInputBase';\n\nimport type { Props } from '../../../props';\n\nconst DateInputWrapperElement = tasty({\n  qa: 'DateInputWrapper',\n  role: 'presentation',\n  styles: {\n    // eslint-disable-next-line tasty/no-style-spread -- input wrapper base shared with TextInput, ComboBox, SearchComboBox and FilterListBox\n    ...INPUT_WRAPPER_STYLES,\n    display: 'flex',\n  },\n});\n\nconst DateInputElement = tasty({\n  role: 'presentation',\n  styles: {\n    // eslint-disable-next-line tasty/no-style-spread -- input base shared with TextInput, ComboBox, SearchComboBox and FilterListBox\n    ...DEFAULT_INPUT_STYLES,\n    height: {\n      '': '($size-md - 2bw)',\n      'size=small': '($size-sm - 2bw)',\n      'size=large': '($size-lg - 2bw)',\n    },\n    display: 'flex',\n    flow: 'row',\n    placeItems: 'center start',\n  },\n});\n\ninterface CubeDateAtomInputProps extends ContainerStyleProps {\n  qa?: string;\n  inputType?: string;\n  isDisabled?: boolean;\n  children?: React.ReactNode;\n  fieldProps?: Props;\n  style?: React.CSSProperties;\n  disableFocusRing?: boolean;\n  autoFocus?: boolean;\n  styles?: Styles;\n  inputStyles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  isInvalid?: boolean;\n  isValid?: boolean;\n  isLoading?: boolean;\n  suffix?: React.ReactNode;\n}\n\nfunction DateInputBase(props: CubeDateAtomInputProps, ref) {\n  let inputRef = useRef(null);\n  let {\n    qa,\n    inputType,\n    isDisabled,\n    inputStyles,\n    children,\n    fieldProps,\n    style,\n    disableFocusRing,\n    autoFocus,\n    isInvalid,\n    isValid,\n    isLoading,\n    size = 'medium',\n    suffix,\n  } = props;\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let { focusProps, isFocused } = useFocusRing({\n    isTextInput: true,\n    within: true,\n    autoFocus,\n  });\n\n  const showValidationIndicator = hasValidationIndicator({\n    isInvalid,\n    isValid,\n    isLoading,\n  });\n\n  return (\n    <DateInputWrapperElement\n      qa={qa || 'DateTimeInput'}\n      styles={styles}\n      data-size={size}\n      data-input-type={inputType ? inputType : 'datetimeinput'}\n      mods={{\n        disabled: isDisabled,\n        focused: isFocused && !disableFocusRing,\n        ...getValidationMods({ isInvalid, isValid }),\n        suffix: showValidationIndicator || !!suffix,\n      }}\n      {...mergeProps(fieldProps ?? {}, focusProps)}\n      style={style}\n    >\n      <div data-element=\"Contents\" role=\"presentation\">\n        <DateInputElement\n          ref={mergeRefs(ref, inputRef)}\n          data-size={size}\n          role=\"presentation\"\n          styles={inputStyles}\n        >\n          {children}\n        </DateInputElement>\n      </div>\n      {showValidationIndicator || suffix ? (\n        <div data-element=\"Suffix\">\n          <ValidationIndicator\n            isInvalid={isInvalid}\n            isValid={isValid}\n            isLoading={isLoading}\n          />\n          {suffix}\n        </div>\n      ) : null}\n    </DateInputWrapperElement>\n  );\n}\n\nconst _DateInputBase = React.forwardRef(DateInputBase);\n\n_DateInputBase.displayName = 'DateInputBase';\n\nexport { _DateInputBase as DateInputBase };\n"],"mappings":"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"}
+{"version":3,"file":"DateInputBase.js","names":["mergeRefs","CONTAINER_STYLES","ContainerStyleProps","Styles","tasty","React","useRef","useFocusRing","mergeProps","extractStyles","getValidationMods","hasValidationIndicator","ValidationIndicator","DEFAULT_INPUT_STYLES","INPUT_WRAPPER_STYLES","Props","DateInputWrapperElement","qa","role","styles","display","DateInputElement","height","flow","placeItems","CubeDateAtomInputProps","inputType","isDisabled","children","ReactNode","fieldProps","style","CSSProperties","disableFocusRing","autoFocus","inputStyles","size","isInvalid","isValid","isLoading","suffix","wrapperRef","Ref","HTMLDivElement","DateInputBase","props","ref","$","_c","inputRef","t0","undefined","t1","t2","isTextInput","within","focusProps","isFocused","t3","showValidationIndicator","t4","t5","t6","t7","t8","t9","disabled","focused","t10","t11","t12","t13","t14","t15","t16","_DateInputBase","forwardRef","displayName","_c","mergeProps"],"sources":["../../../../src/components/fields/DatePicker/DateInputBase.tsx"],"sourcesContent":["import { mergeRefs } from '@react-aria/utils';\nimport {\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport React, { useRef } from 'react';\nimport { useFocusRing } from 'react-aria';\n\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport {\n  getValidationMods,\n  hasValidationIndicator,\n  ValidationIndicator,\n} from '../../form';\nimport {\n  DEFAULT_INPUT_STYLES,\n  INPUT_WRAPPER_STYLES,\n} from '../TextInput/TextInputBase';\n\nimport type { Props } from '../../../props';\n\nconst DateInputWrapperElement = tasty({\n  qa: 'DateInputWrapper',\n  role: 'presentation',\n  styles: {\n    // eslint-disable-next-line tasty/no-style-spread -- input wrapper base shared with TextInput, ComboBox, SearchComboBox and FilterListBox\n    ...INPUT_WRAPPER_STYLES,\n    display: 'flex',\n  },\n});\n\nconst DateInputElement = tasty({\n  role: 'presentation',\n  styles: {\n    // eslint-disable-next-line tasty/no-style-spread -- input base shared with TextInput, ComboBox, SearchComboBox and FilterListBox\n    ...DEFAULT_INPUT_STYLES,\n    height: {\n      '': '($size-md - 2bw)',\n      'size=small': '($size-sm - 2bw)',\n      'size=large': '($size-lg - 2bw)',\n    },\n    display: 'flex',\n    flow: 'row',\n    placeItems: 'center start',\n  },\n});\n\ninterface CubeDateAtomInputProps extends ContainerStyleProps {\n  qa?: string;\n  inputType?: string;\n  isDisabled?: boolean;\n  children?: React.ReactNode;\n  fieldProps?: Props;\n  style?: React.CSSProperties;\n  disableFocusRing?: boolean;\n  autoFocus?: boolean;\n  styles?: Styles;\n  inputStyles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  isInvalid?: boolean;\n  isValid?: boolean;\n  isLoading?: boolean;\n  suffix?: React.ReactNode;\n  /** The input box, the picker's own element. */\n  wrapperRef?: React.Ref<HTMLDivElement>;\n}\n\nfunction DateInputBase(props: CubeDateAtomInputProps, ref) {\n  let inputRef = useRef(null);\n  let {\n    qa,\n    inputType,\n    isDisabled,\n    inputStyles,\n    children,\n    fieldProps,\n    style,\n    disableFocusRing,\n    autoFocus,\n    isInvalid,\n    isValid,\n    isLoading,\n    size = 'medium',\n    suffix,\n    wrapperRef,\n  } = props;\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let { focusProps, isFocused } = useFocusRing({\n    isTextInput: true,\n    within: true,\n    autoFocus,\n  });\n\n  const showValidationIndicator = hasValidationIndicator({\n    isInvalid,\n    isValid,\n    isLoading,\n  });\n\n  return (\n    <DateInputWrapperElement\n      ref={wrapperRef}\n      qa={qa || 'DateTimeInput'}\n      styles={styles}\n      data-size={size}\n      data-input-type={inputType ? inputType : 'datetimeinput'}\n      mods={{\n        disabled: isDisabled,\n        focused: isFocused && !disableFocusRing,\n        ...getValidationMods({ isInvalid, isValid }),\n        suffix: showValidationIndicator || !!suffix,\n      }}\n      {...mergeProps(fieldProps ?? {}, focusProps)}\n      // For a dialog kept mounted while closed, which focuses the field's\n      // first segment on every open, as `Button` marks itself.\n      {...(autoFocus ? { 'data-autofocus': '' } : undefined)}\n      style={style}\n    >\n      <div data-element=\"Contents\" role=\"presentation\">\n        <DateInputElement\n          ref={mergeRefs(ref, inputRef)}\n          data-size={size}\n          role=\"presentation\"\n          styles={inputStyles}\n        >\n          {children}\n        </DateInputElement>\n      </div>\n      {showValidationIndicator || suffix ? (\n        <div data-element=\"Suffix\">\n          <ValidationIndicator\n            isInvalid={isInvalid}\n            isValid={isValid}\n            isLoading={isLoading}\n          />\n          {suffix}\n        </div>\n      ) : null}\n    </DateInputWrapperElement>\n  );\n}\n\nconst _DateInputBase = React.forwardRef(DateInputBase);\n\n_DateInputBase.displayName = 'DateInputBase';\n\nexport { _DateInputBase as DateInputBase };\n"],"mappings":"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"}

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

@@ -3,13 +3,10 @@ import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import { DateFieldBase } from "./types.js";
 import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
-import * as react from "react";
 import { RefObject } from "react";
 import { AriaDatePickerProps, DateValue, Placement } from "react-aria";
-import * as _react_types_shared0 from "@react-types/shared";
-
 //#region src/components/fields/DatePicker/DatePicker.d.ts
-interface CubeDatePickerProps<T extends DateValue = DateValue> extends Omit<AriaDatePickerProps<T>, 'errorMessage' | 'form' | 'name' | keyof DateFieldBase<T>>, DateFieldBase<T>, BaseProps, ContainerStyleProps, FieldBaseProps<T | null | undefined> {
+export interface CubeDatePickerProps<T extends DateValue = DateValue> extends Omit<AriaDatePickerProps<T>, 'errorMessage' | 'form' | 'name' | keyof DateFieldBase<T>>, DateFieldBase<T>, BaseProps, ContainerStyleProps, FieldBaseProps<T | null | undefined> {
   wrapperStyles?: Styles;
   inputStyles?: Styles;
   triggerStyles?: Styles;
@@ -34,7 +31,7 @@ interface CubeDatePickerProps<T extends DateValue = DateValue> extends Omit<Aria
   placement?: Placement;
   useLocale?: boolean;
 }
-declare const _DatePicker: react.ForwardRefExoticComponent<CubeDatePickerProps<DateValue> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
+declare const _DatePicker: import("react").ForwardRefExoticComponent<CubeDatePickerProps<DateValue> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;
 //#endregion
-export { CubeDatePickerProps, _DatePicker };
+export { _DatePicker as DatePicker };
 //# sourceMappingURL=DatePicker.d.ts.map

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | 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 { c } from "react/compiler-runtime";
@@ -19,7 +19,6 @@ import { forwardRef, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useDatePicker, useFocusRing } from "react-aria";
 import { useDatePickerState } from "react-stately";
-
 //#region src/components/fields/DatePicker/DatePicker.tsx
 function DatePicker(rawProps, ref) {
 	const $ = c(60);
@@ -49,7 +48,8 @@ function DatePicker(rawProps, ref) {
 		shouldCloseOnSelect: () => !state.hasTime
 	});
 	const { isOpen, setOpen } = state;
-	const domRef = useFocusManagerRef(ref);
+	const domRef = useRef(null);
+	useFocusManagerRef(ref, domRef);
 	let t2;
 	if ($[4] !== autoFocus) {
 		t2 = {
@@ -179,11 +179,13 @@ function DatePicker(rawProps, ref) {
 		$[42] = t14;
 	} else t14 = $[42];
 	let t15;
-	if ($[43] !== focusProps || $[44] !== groupProps || $[45] !== isDisabled || $[46] !== isFocusedButton || $[47] !== isInvalid || $[48] !== isValid || $[49] !== size || $[50] !== styles || $[51] !== t13 || $[52] !== t14 || $[53] !== t4) {
+	if ($[43] !== autoFocus || $[44] !== focusProps || $[45] !== groupProps || $[46] !== isDisabled || $[47] !== isFocusedButton || $[48] !== isInvalid || $[49] !== isValid || $[50] !== size || $[51] !== styles || $[52] !== t13 || $[53] !== t14 || $[54] !== t4) {
 		t15 = /* @__PURE__ */ jsx(_DateInputBase, {
 			ref: targetRef,
+			wrapperRef: domRef,
 			qa: t4,
 			inputType: "datepicker",
+			autoFocus,
 			styles,
 			disableFocusRing: isFocusedButton,
 			isDisabled,
@@ -195,28 +197,28 @@ function DatePicker(rawProps, ref) {
 			suffix: t13,
 			children: t14
 		});
-		$[43] = focusProps;
-		$[44] = groupProps;
-		$[45] = isDisabled;
-		$[46] = isFocusedButton;
-		$[47] = isInvalid;
-		$[48] = isValid;
-		$[49] = size;
-		$[50] = styles;
-		$[51] = t13;
-		$[52] = t14;
-		$[53] = t4;
-		$[54] = t15;
-	} else t15 = $[54];
+		$[43] = autoFocus;
+		$[44] = focusProps;
+		$[45] = groupProps;
+		$[46] = isDisabled;
+		$[47] = isFocusedButton;
+		$[48] = isInvalid;
+		$[49] = isValid;
+		$[50] = size;
+		$[51] = styles;
+		$[52] = t13;
+		$[53] = t14;
+		$[54] = t4;
+		$[55] = t15;
+	} else t15 = $[55];
 	const component = t15;
 	let t16;
-	if ($[55] !== component || $[56] !== domRef || $[57] !== labelProps || $[58] !== props) {
-		t16 = wrapWithField(component, domRef, {
+	if ($[56] !== component || $[57] !== labelProps || $[58] !== props) {
+		t16 = wrapWithField(component, {
 			...props,
 			labelProps: mergeProps$1(props.labelProps, labelProps)
 		});
-		$[55] = component;
-		$[56] = domRef;
+		$[56] = component;
 		$[57] = labelProps;
 		$[58] = props;
 		$[59] = t16;
@@ -225,7 +227,7 @@ function DatePicker(rawProps, ref) {
 }
 const _DatePicker = forwardRef(DatePicker);
 _DatePicker.displayName = "DatePicker";
-
 //#endregion
-export { _DatePicker };
+export { _DatePicker as DatePicker };
+
 //# sourceMappingURL=DatePicker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","names":["FocusableRef","BaseProps","CONTAINER_STYLES","ContainerStyleProps","Styles","forwardRef","RefObject","useRef","AriaDatePickerProps","DateValue","Placement","useDatePicker","useFocusRing","useDatePickerState","useI18n","FieldBaseProps","mergeProps","extractStyles","mergeStyleLayers","useFieldProps","wrapWithField","Calendar","Dialog","DialogTrigger","DateInputBase","DatePickerButton","DatePickerInput","DEFAULT_DATE_PROPS","TimeInput","DateFieldBase","useFocusManagerRef","CubeDatePickerProps","Omit","T","wrapperStyles","inputStyles","triggerStyles","styles","size","maxVisibleMonths","shouldFlip","targetRef","HTMLElement","placement","useLocale","DatePicker","rawProps","ref","$","_c","t","t0","Symbol","for","defaultValidationTrigger","props","t1","Object","assign","qa","placeholderValue","isDisabled","isInvalid","isValid","useLocaleProp","autoFocus","state","shouldCloseOnSelect","hasTime","isOpen","setOpen","domRef","t2","within","isTextInput","focusProps","t3","isFocused","isFocusedButton","focusPropsButton","groupProps","labelProps","fieldProps","buttonProps","dialogProps","calendarProps","placeholder","undefined","timePlaceholder","timeMinValue","minValue","timeMaxValue","maxValue","timeGranularity","granularity","showTimeField","t4","t5","t6","t7","t8","t9","t10","t11","hideTimeZone","hourCycle","setTimeValue","timeValue","t12","t13","t14","t15","component","t16","_DatePicker","displayName"],"sources":["../../../../src/components/fields/DatePicker/DatePicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n} from '@tenphi/tasty';\nimport { forwardRef, RefObject, useRef } from 'react';\nimport {\n  AriaDatePickerProps,\n  DateValue,\n  Placement,\n  useDatePicker,\n  useFocusRing,\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, mergeStyleLayers } from '../../../utils/styles';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Calendar } from '../../other/Calendar/Calendar';\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\nexport interface CubeDatePickerProps<T extends DateValue = DateValue>\n  extends Omit<\n      AriaDatePickerProps<T>,\n      'errorMessage' | 'form' | 'name' | keyof DateFieldBase<T>\n    >,\n    DateFieldBase<T>,\n    BaseProps,\n    ContainerStyleProps,\n    FieldBaseProps<T | null | undefined> {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  triggerStyles?: 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 DatePicker<T extends DateValue>(\n  rawProps: CubeDatePickerProps<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    placeholderValue,\n    isDisabled,\n    isInvalid,\n    isValid,\n    useLocale: useLocaleProp,\n    autoFocus,\n  } = props;\n  let targetRef = useRef<HTMLDivElement>(null);\n  let state = useDatePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime,\n  });\n  let { isOpen, setOpen } = state;\n\n  let domRef = useFocusManagerRef(ref);\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 {\n    groupProps,\n    labelProps,\n    fieldProps,\n    buttonProps,\n    dialogProps,\n    calendarProps,\n  } = useDatePicker(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 || 'DatePicker'}\n      inputType=\"datepicker\"\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={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            isDisabled={isDisabled}\n          />\n          <Dialog {...dialogProps} width=\"max-content\" overflow=\"auto\">\n            <Calendar {...calendarProps} />\n            {showTimeField && (\n              <TimeInput\n                padding=\"1x\"\n                label={t('datePicker.time', 'Time')}\n                value={state.timeValue}\n                placeholderValue={timePlaceholder}\n                granularity={timeGranularity}\n                minValue={timeMinValue}\n                maxValue={timeMaxValue}\n                hourCycle={props.hourCycle}\n                hideTimeZone={props.hideTimeZone}\n                onChange={state.setTimeValue}\n              />\n            )}\n          </Dialog>\n        </DialogTrigger>\n      }\n    >\n      <DatePickerInput useLocale={useLocaleProp} {...fieldProps} />\n    </DateInputBase>\n  );\n\n  return wrapWithField(component, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _DatePicker = forwardRef(DatePicker);\n\n_DatePicker.displayName = 'DatePicker';\n\nexport { _DatePicker as DatePicker };\n"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","names":["FocusableRef","BaseProps","CONTAINER_STYLES","ContainerStyleProps","Styles","forwardRef","RefObject","useRef","AriaDatePickerProps","DateValue","Placement","useDatePicker","useFocusRing","useDatePickerState","useI18n","FieldBaseProps","mergeProps","extractStyles","mergeStyleLayers","useFieldProps","wrapWithField","Calendar","Dialog","DialogTrigger","DateInputBase","DatePickerButton","DatePickerInput","DEFAULT_DATE_PROPS","TimeInput","DateFieldBase","useFocusManagerRef","CubeDatePickerProps","Omit","T","wrapperStyles","inputStyles","triggerStyles","styles","size","maxVisibleMonths","shouldFlip","targetRef","HTMLElement","placement","useLocale","DatePicker","rawProps","ref","$","_c","t","t0","Symbol","for","defaultValidationTrigger","props","t1","Object","assign","qa","placeholderValue","isDisabled","isInvalid","isValid","useLocaleProp","autoFocus","state","shouldCloseOnSelect","hasTime","isOpen","setOpen","domRef","t2","within","isTextInput","focusProps","t3","isFocused","isFocusedButton","focusPropsButton","groupProps","labelProps","fieldProps","buttonProps","dialogProps","calendarProps","placeholder","undefined","timePlaceholder","timeMinValue","minValue","timeMaxValue","maxValue","timeGranularity","granularity","showTimeField","t4","t5","t6","t7","t8","t9","t10","t11","hideTimeZone","hourCycle","setTimeValue","timeValue","t12","t13","t14","t15","component","t16","_DatePicker","displayName","_c","mergeProps","Calendar","TimeInput","DateInputBase"],"sources":["../../../../src/components/fields/DatePicker/DatePicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n} from '@tenphi/tasty';\nimport { forwardRef, RefObject, useRef } from 'react';\nimport {\n  AriaDatePickerProps,\n  DateValue,\n  Placement,\n  useDatePicker,\n  useFocusRing,\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, mergeStyleLayers } from '../../../utils/styles';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Calendar } from '../../other/Calendar/Calendar';\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\nexport interface CubeDatePickerProps<T extends DateValue = DateValue>\n  extends\n    Omit<\n      AriaDatePickerProps<T>,\n      'errorMessage' | 'form' | 'name' | keyof DateFieldBase<T>\n    >,\n    DateFieldBase<T>,\n    BaseProps,\n    ContainerStyleProps,\n    FieldBaseProps<T | null | undefined> {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  triggerStyles?: 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 DatePicker<T extends DateValue>(\n  rawProps: CubeDatePickerProps<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    placeholderValue,\n    isDisabled,\n    isInvalid,\n    isValid,\n    useLocale: useLocaleProp,\n    autoFocus,\n  } = props;\n  let targetRef = useRef<HTMLDivElement>(null);\n  let state = useDatePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime,\n  });\n  let { isOpen, setOpen } = state;\n\n  let domRef = useRef<HTMLDivElement>(null);\n\n  useFocusManagerRef(ref, domRef);\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 {\n    groupProps,\n    labelProps,\n    fieldProps,\n    buttonProps,\n    dialogProps,\n    calendarProps,\n  } = useDatePicker(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 || 'DatePicker'}\n      inputType=\"datepicker\"\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={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            isDisabled={isDisabled}\n          />\n          <Dialog {...dialogProps} width=\"max-content\" overflow=\"auto\">\n            <Calendar {...calendarProps} />\n            {showTimeField && (\n              <TimeInput\n                padding=\"1x\"\n                label={t('datePicker.time', 'Time')}\n                value={state.timeValue}\n                placeholderValue={timePlaceholder}\n                granularity={timeGranularity}\n                minValue={timeMinValue}\n                maxValue={timeMaxValue}\n                hourCycle={props.hourCycle}\n                hideTimeZone={props.hideTimeZone}\n                onChange={state.setTimeValue}\n              />\n            )}\n          </Dialog>\n        </DialogTrigger>\n      }\n    >\n      <DatePickerInput useLocale={useLocaleProp} {...fieldProps} />\n    </DateInputBase>\n  );\n\n  return wrapWithField(component, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _DatePicker = forwardRef(DatePicker);\n\n_DatePicker.displayName = 'DatePicker';\n\nexport { _DatePicker as DatePicker };\n"],"mappings":"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"}

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

@@ -1,11 +1,10 @@
-/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 import { ItemActionProvider } from "../../actions/ItemActionContext.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { CalendarIcon } from "../../../icons/CalendarIcon.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/fields/DatePicker/DatePickerButton.tsx
 const StyledDatePickerButton = tasty(ItemAction, { icon: /* @__PURE__ */ jsx(CalendarIcon, {}) });
 /**
@@ -67,7 +66,7 @@ function DatePickerButton(t0) {
 	} else t3 = $[9];
 	return t3;
 }
-
 //#endregion
 export { DatePickerButton };
+
 //# sourceMappingURL=DatePickerButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePickerButton.js","names":["tasty","CalendarIcon","CubeItemActionProps","ItemAction","ItemActionProvider","StyledDatePickerButton","icon","CubeDatePickerButtonProps","isReadOnly","DatePickerButton","t0","$","_c","isDisabled","props","t1","undefined","t2","t3"],"sources":["../../../../src/components/fields/DatePicker/DatePickerButton.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { CalendarIcon } from '../../../icons/CalendarIcon';\nimport {\n  CubeItemActionProps,\n  ItemAction,\n  ItemActionProvider,\n} from '../../actions';\n\nconst StyledDatePickerButton = tasty(ItemAction, {\n  icon: <CalendarIcon />,\n});\n\nexport interface CubeDatePickerButtonProps extends CubeItemActionProps {\n  /** Whether the surrounding field is read-only. Disables the button on its own. */\n  isReadOnly?: boolean;\n}\n\n/**\n * The calendar button every date field renders in its suffix.\n *\n * The two reasons it can be disabled travel through different channels, and the\n * split matters because the default `current` type paints from the colour it\n * inherits:\n *\n * - A disabled FIELD goes through `ItemActionProvider`, which marks the state\n *   inherited. The field has already faded its text to a translucent `#dark.30`,\n *   so the button must NOT fade again — doing both multiplied down to `.12`, all\n *   but invisible.\n * - READ-ONLY leaves the field's text fully opaque, so nothing has faded yet and\n *   the button really is disabled on its own. It stays a prop and fades itself;\n *   routed as inherited it would render at full strength and look enabled while\n *   no longer responding.\n *\n * Handled here rather than at the five call sites so the distinction cannot be\n * dropped by the next one. No `type` is passed to the provider, so the `context`\n * mod stays off and the button keeps its margins.\n */\nexport function DatePickerButton({\n  isDisabled,\n  isReadOnly,\n  ...props\n}: CubeDatePickerButtonProps) {\n  return (\n    <ItemActionProvider isDisabled={isDisabled}>\n      <StyledDatePickerButton\n        {...props}\n        isDisabled={isReadOnly && !isDisabled ? true : undefined}\n      />\n    </ItemActionProvider>\n  );\n}\n"],"mappings":";;;;;;;;;AASA,MAAMK,yBAAyBL,MAAMG,YAAY,EAC/CG,MAAM,oBAAC,iBAAY,EACpB,CAAC;;;;;;;;;;;;;;;;;;;;;AA2BF,SAAOG,iBAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAA,IAAAC;CAAA,IAAAL;CAAA,IAAAM;AAAA,KAAAH,EAAA,OAAAD,IAAA;AAA0B,GAAA,CAAAG,YAAAL,eAAAM,SAAAJ;AAILC,IAAA,KAAAD;AAAAC,IAAA,KAAAE;AAAAF,IAAA,KAAAH;AAAAG,IAAA,KAAAG;QAAA;AAAAD,eAAAF,EAAA;AAAAH,eAAAG,EAAA;AAAAG,UAAAH,EAAA;;CAKR,MAAAI,KAAAP,cAAA,CAAeK,aAAf,OAAAG;CAA4C,IAAAC;AAAA,KAAAN,EAAA,OAAAG,SAAAH,EAAA,OAAAI,IAAA;AAF1DE,OAAA,oBAAC;GAAsB,GACjBH;GACQ,YAAAC;IACZ;AAAAJ,IAAA,KAAAG;AAAAH,IAAA,KAAAI;AAAAJ,IAAA,KAAAM;OAAAA,MAAAN,EAAA;CAAA,IAAAO;AAAA,KAAAP,EAAA,OAAAE,cAAAF,EAAA,OAAAM,IAAA;AAJJC,OAAA,oBAAC;GAA+BL;aAC9BI;IAImB;AAAAN,IAAA,KAAAE;AAAAF,IAAA,KAAAM;AAAAN,IAAA,KAAAO;OAAAA,MAAAP,EAAA;AAAA,QALrBO"}
+{"version":3,"file":"DatePickerButton.js","names":["tasty","CalendarIcon","CubeItemActionProps","ItemAction","ItemActionProvider","StyledDatePickerButton","icon","CubeDatePickerButtonProps","isReadOnly","DatePickerButton","t0","$","_c","isDisabled","props","t1","undefined","t2","t3","_c"],"sources":["../../../../src/components/fields/DatePicker/DatePickerButton.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { CalendarIcon } from '../../../icons/CalendarIcon';\nimport {\n  CubeItemActionProps,\n  ItemAction,\n  ItemActionProvider,\n} from '../../actions';\n\nconst StyledDatePickerButton = tasty(ItemAction, {\n  icon: <CalendarIcon />,\n});\n\nexport interface CubeDatePickerButtonProps extends CubeItemActionProps {\n  /** Whether the surrounding field is read-only. Disables the button on its own. */\n  isReadOnly?: boolean;\n}\n\n/**\n * The calendar button every date field renders in its suffix.\n *\n * The two reasons it can be disabled travel through different channels, and the\n * split matters because the default `current` type paints from the colour it\n * inherits:\n *\n * - A disabled FIELD goes through `ItemActionProvider`, which marks the state\n *   inherited. The field has already faded its text to a translucent `#dark.30`,\n *   so the button must NOT fade again — doing both multiplied down to `.12`, all\n *   but invisible.\n * - READ-ONLY leaves the field's text fully opaque, so nothing has faded yet and\n *   the button really is disabled on its own. It stays a prop and fades itself;\n *   routed as inherited it would render at full strength and look enabled while\n *   no longer responding.\n *\n * Handled here rather than at the five call sites so the distinction cannot be\n * dropped by the next one. No `type` is passed to the provider, so the `context`\n * mod stays off and the button keeps its margins.\n */\nexport function DatePickerButton({\n  isDisabled,\n  isReadOnly,\n  ...props\n}: CubeDatePickerButtonProps) {\n  return (\n    <ItemActionProvider isDisabled={isDisabled}>\n      <StyledDatePickerButton\n        {...props}\n        isDisabled={isReadOnly && !isDisabled ? true : undefined}\n      />\n    </ItemActionProvider>\n  );\n}\n"],"mappings":";;;;;;;;AASA,MAAMK,yBAAyBL,MAAMG,YAAY,EAC/CG,MAAM,oBAAC,cAAD,CAAa,CAAA,EACrB,CAAC;;;;;;;;;;;;;;;;;;;;;AA2BD,SAAOG,iBAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAL;CAAA,IAAAM;CAAA,IAAAH,EAAA,OAAAD,IAAA;EAA0B,CAAA,CAAAG,YAAAL,YAAA,GAAAM,SAAAJ;EAILC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAH;EAAAG,EAAA,KAAAG;CAAA,OAAA;EAAAD,aAAAF,EAAA;EAAAH,aAAAG,EAAA;EAAAG,QAAAH,EAAA;CAAA;CAKR,MAAAI,KAAAP,cAAA,CAAeK,aAAf,OAAAG,KAAAA;CAA4C,IAAAC;CAAA,IAAAN,EAAA,OAAAG,SAAAH,EAAA,OAAAI,IAAA;EAF1DE,KAAA,oBAAC,wBAAD;GAAuB,GACjBH;GACQ,YAAAC;EAA4C,CAAA;EACxDJ,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAE,cAAAF,EAAA,OAAAM,IAAA;EAJJC,KAAA,oBAAC,oBAAD;GAAgCL;GAC9BI,UAAAA;EADiB,CAAA;EAKEN,EAAA,KAAAE;EAAAF,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,OALrBO;AAKqB"}

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

@@ -1,7 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { tasty } from "@tenphi/tasty";
-
 //#region src/components/fields/DatePicker/DatePickerElement.tsx
 const DatePickerElement = tasty(Space, { styles: {
 	gap: 0,
@@ -11,7 +10,7 @@ const DatePickerElement = tasty(Space, { styles: {
 	},
 	radius: true
 } });
-
 //#endregion
 export { DatePickerElement };
+
 //# sourceMappingURL=DatePickerElement.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePickerElement.js","names":["tasty","Space","DatePickerElement","styles","gap","outline","focused","radius"],"sources":["../../../../src/components/fields/DatePicker/DatePickerElement.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { Space } from '../../layout/Space';\n\nexport const DatePickerElement = tasty(Space, {\n  styles: {\n    gap: 0,\n    outline: {\n      '': '#purple-03.0',\n      focused: '#purple-03',\n    },\n    radius: true,\n  },\n});\n"],"mappings":";;;;;AAIA,MAAaE,oBAAoBF,MAAMC,OAAO,EAC5CE,QAAQ;CACNC,KAAK;CACLC,SAAS;EACP,IAAI;EACJC,SAAS;EACV;CACDC,QAAQ;CACV,EACD,CAAC"}
+{"version":3,"file":"DatePickerElement.js","names":["tasty","Space","DatePickerElement","styles","gap","outline","focused","radius"],"sources":["../../../../src/components/fields/DatePicker/DatePickerElement.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { Space } from '../../layout/Space';\n\nexport const DatePickerElement = tasty(Space, {\n  styles: {\n    gap: 0,\n    outline: {\n      '': '#purple-03.0',\n      focused: '#purple-03',\n    },\n    radius: true,\n  },\n});\n"],"mappings":";;;;AAIA,MAAaE,oBAAoBF,MAAMC,OAAO,EAC5CE,QAAQ;CACNC,KAAK;CACLC,SAAS;EACP,IAAI;EACJC,SAAS;CACX;CACAC,QAAQ;AACV,EACF,CAAC"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { DatePickerSegment } from "./DatePickerSegment.js";
 import { formatSegments } from "./utils.js";
@@ -8,7 +8,6 @@ import { jsx } from "react/jsx-runtime";
 import { useDateField, useFocusWithin, useLocale } from "react-aria";
 import { useDateFieldState } from "react-stately";
 import { createCalendar } from "@internationalized/date";
-
 //#region src/components/fields/DatePicker/DatePickerInput.tsx
 const DateInputElement = tasty({
 	role: "presentation",
@@ -48,7 +47,7 @@ function DatePickerInput(props) {
 		}, i))
 	});
 }
-
 //#endregion
 export { DatePickerInput };
+
 //# sourceMappingURL=DatePickerInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePickerInput.js","names":["createCalendar","tasty","useRef","AriaDatePickerProps","DateValue","useDateField","useFocusWithin","useLocale","DateSegment","useDateFieldState","mergeProps","DatePickerSegment","DateFieldBase","Granularity","formatSegments","DateInputElement","role","styles","display","flow","placeItems","CubeDatePickerInputProps","Omit","T","minValue","maxValue","placeholderValue","hideValidationIcon","maxGranularity","DatePickerInput","props","isDisabled","isReadOnly","isRequired","useLocaleProp","ref","locale","state","undefined","segments","focusWithinProps","onFocusWithin","onFocus","onBlurWithin","onBlur","fieldProps","map","segment","i"],"sources":["../../../../src/components/fields/DatePicker/DatePickerInput.tsx"],"sourcesContent":["import { createCalendar } from '@internationalized/date';\nimport { tasty } from '@tenphi/tasty';\nimport { useRef } from 'react';\nimport {\n  AriaDatePickerProps,\n  DateValue,\n  useDateField,\n  useFocusWithin,\n  useLocale,\n} from 'react-aria';\nimport { DateSegment, useDateFieldState } from 'react-stately';\n\nimport { mergeProps } from '../../../utils/react';\n\nimport { DatePickerSegment } from './DatePickerSegment';\nimport { DateFieldBase, Granularity } from './types';\nimport { formatSegments } from './utils';\n\nconst DateInputElement = tasty({\n  role: 'presentation',\n  styles: {\n    display: 'flex',\n    flow: 'row',\n    placeItems: 'center start',\n  },\n});\n\ninterface CubeDatePickerInputProps<T extends DateValue>\n  extends Omit<\n      AriaDatePickerProps<T>,\n      'errorMessage' | 'form' | keyof DateFieldBase<T>\n    >,\n    Omit<DateFieldBase<T>, 'minValue' | 'maxValue' | 'placeholderValue'> {\n  minValue?: DateValue | null;\n  maxValue?: DateValue | null;\n  placeholderValue?: T | null;\n  hideValidationIcon?: boolean;\n  maxGranularity?: Granularity;\n  useLocale?: boolean;\n}\n\nexport function DatePickerInput<T extends DateValue>(\n  props: CubeDatePickerInputProps<T>,\n) {\n  let { isDisabled, isReadOnly, isRequired, useLocale: useLocaleProp } = props;\n  let ref = useRef(null);\n  let { locale } = useLocale();\n  let state = useDateFieldState({\n    ...props,\n    minValue: props.minValue ?? undefined,\n    maxValue: props.maxValue ?? undefined,\n    placeholderValue: props.placeholderValue ?? undefined,\n    locale: useLocaleProp ? locale : 'en-US',\n    createCalendar,\n  });\n\n  if (useLocaleProp == null) {\n    state.segments = formatSegments(state.segments);\n  }\n\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithin: props.onFocus,\n    onBlurWithin: props.onBlur,\n  });\n\n  let { fieldProps } = useDateField(props, state, ref);\n\n  return (\n    <DateInputElement ref={ref} {...mergeProps(fieldProps, focusWithinProps)}>\n      {state.segments.map((segment: DateSegment, i: number) => (\n        <DatePickerSegment\n          key={i}\n          segment={segment}\n          state={state}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isRequired={isRequired}\n        />\n      ))}\n    </DateInputElement>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAkBA,MAAMe,mBAAmBd,MAAM;CAC7Be,MAAM;CACNC,QAAQ;EACNC,SAAS;EACTC,MAAM;EACNC,YAAY;EACd;CACD,CAAC;AAgBF,SAAgBS,gBACdC,OACA;CACA,IAAI,EAAEC,YAAYC,YAAYC,YAAY1B,WAAW2B,kBAAkBJ;CACvE,IAAIK,MAAMjC,OAAO,KAAK;CACtB,IAAI,EAAEkC,WAAW7B,WAAW;CAC5B,IAAI8B,QAAQ5B,kBAAkB;EAC5B,GAAGqB;EACHN,UAAUM,MAAMN,YAAYc;EAC5Bb,UAAUK,MAAML,YAAYa;EAC5BZ,kBAAkBI,MAAMJ,oBAAoBY;EAC5CF,QAAQF,gBAAgBE,SAAS;EACjCpC;EACD,CAAC;AAEF,KAAIkC,iBAAiB,KACnBG,OAAME,WAAWzB,eAAeuB,MAAME,SAAS;CAGjD,MAAM,EAAEC,qBAAqBlC,eAAe;EAC1CmC,eAAeX,MAAMY;EACrBC,cAAcb,MAAMc;EACrB,CAAC;CAEF,IAAI,EAAEC,eAAexC,aAAayB,OAAOO,OAAOF,IAAI;AAEpD,QACE,oBAAC;EAAsBA;EAAK,GAAIzB,aAAWmC,YAAYL,iBAAiB;YACrEH,MAAME,SAASO,KAAKC,SAAsBC,MACzC,oBAAC;GAEUD;GACFV;GACKN;GACAC;GACAC;KALPe,EAOR,CAAC;GACe"}
+{"version":3,"file":"DatePickerInput.js","names":["createCalendar","tasty","useRef","AriaDatePickerProps","DateValue","useDateField","useFocusWithin","useLocale","DateSegment","useDateFieldState","mergeProps","DatePickerSegment","DateFieldBase","Granularity","formatSegments","DateInputElement","role","styles","display","flow","placeItems","CubeDatePickerInputProps","Omit","T","minValue","maxValue","placeholderValue","hideValidationIcon","maxGranularity","DatePickerInput","props","isDisabled","isReadOnly","isRequired","useLocaleProp","ref","locale","state","undefined","segments","focusWithinProps","onFocusWithin","onFocus","onBlurWithin","onBlur","fieldProps","map","segment","i","mergeProps"],"sources":["../../../../src/components/fields/DatePicker/DatePickerInput.tsx"],"sourcesContent":["import { createCalendar } from '@internationalized/date';\nimport { tasty } from '@tenphi/tasty';\nimport { useRef } from 'react';\nimport {\n  AriaDatePickerProps,\n  DateValue,\n  useDateField,\n  useFocusWithin,\n  useLocale,\n} from 'react-aria';\nimport { DateSegment, useDateFieldState } from 'react-stately';\n\nimport { mergeProps } from '../../../utils/react';\n\nimport { DatePickerSegment } from './DatePickerSegment';\nimport { DateFieldBase, Granularity } from './types';\nimport { formatSegments } from './utils';\n\nconst DateInputElement = tasty({\n  role: 'presentation',\n  styles: {\n    display: 'flex',\n    flow: 'row',\n    placeItems: 'center start',\n  },\n});\n\ninterface CubeDatePickerInputProps<T extends DateValue>\n  extends\n    Omit<\n      AriaDatePickerProps<T>,\n      'errorMessage' | 'form' | keyof DateFieldBase<T>\n    >,\n    Omit<DateFieldBase<T>, 'minValue' | 'maxValue' | 'placeholderValue'> {\n  minValue?: DateValue | null;\n  maxValue?: DateValue | null;\n  placeholderValue?: T | null;\n  hideValidationIcon?: boolean;\n  maxGranularity?: Granularity;\n  useLocale?: boolean;\n}\n\nexport function DatePickerInput<T extends DateValue>(\n  props: CubeDatePickerInputProps<T>,\n) {\n  let { isDisabled, isReadOnly, isRequired, useLocale: useLocaleProp } = props;\n  let ref = useRef(null);\n  let { locale } = useLocale();\n  let state = useDateFieldState({\n    ...props,\n    minValue: props.minValue ?? undefined,\n    maxValue: props.maxValue ?? undefined,\n    placeholderValue: props.placeholderValue ?? undefined,\n    locale: useLocaleProp ? locale : 'en-US',\n    createCalendar,\n  });\n\n  if (useLocaleProp == null) {\n    state.segments = formatSegments(state.segments);\n  }\n\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithin: props.onFocus,\n    onBlurWithin: props.onBlur,\n  });\n\n  let { fieldProps } = useDateField(props, state, ref);\n\n  return (\n    <DateInputElement ref={ref} {...mergeProps(fieldProps, focusWithinProps)}>\n      {state.segments.map((segment: DateSegment, i: number) => (\n        <DatePickerSegment\n          key={i}\n          segment={segment}\n          state={state}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isRequired={isRequired}\n        />\n      ))}\n    </DateInputElement>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAkBA,MAAMe,mBAAmBd,MAAM;CAC7Be,MAAM;CACNC,QAAQ;EACNC,SAAS;EACTC,MAAM;EACNC,YAAY;CACd;AACF,CAAC;AAiBD,SAAgBS,gBACdC,OACA;CACA,IAAI,EAAEC,YAAYC,YAAYC,YAAY1B,WAAW2B,kBAAkBJ;CACvE,IAAIK,MAAMjC,OAAO,IAAI;CACrB,IAAI,EAAEkC,WAAW7B,UAAU;CAC3B,IAAI8B,QAAQ5B,kBAAkB;EAC5B,GAAGqB;EACHN,UAAUM,MAAMN,YAAYc,KAAAA;EAC5Bb,UAAUK,MAAML,YAAYa,KAAAA;EAC5BZ,kBAAkBI,MAAMJ,oBAAoBY,KAAAA;EAC5CF,QAAQF,gBAAgBE,SAAS;EACjCpC;CACF,CAAC;CAED,IAAIkC,iBAAiB,MACnBG,MAAME,WAAWzB,eAAeuB,MAAME,QAAQ;CAGhD,MAAM,EAAEC,qBAAqBlC,eAAe;EAC1CmC,eAAeX,MAAMY;EACrBC,cAAcb,MAAMc;CACtB,CAAC;CAED,IAAI,EAAEC,eAAexC,aAAayB,OAAOO,OAAOF,GAAG;CAEnD,OACE,oBAAC,kBAAD;EAAuBA;EAAK,GAAIzB,aAAWmC,YAAYL,gBAAgB;EACpEH,UAAAA,MAAME,SAASO,KAAKC,SAAsBC,MACzC,oBAAC,mBAAD;GAEWD;GACFV;GACKN;GACAC;GACAC;EAAW,GALlBe,CAKkB,CAE1B;CACe,CAAA;AAEtB"}

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

@@ -1,10 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useDateSegment } from "react-aria";
-
 //#region src/components/fields/DatePicker/DatePickerSegment.tsx
 const LiteralSegmentElement = tasty({
 	qa: "LiteralSegment",
@@ -150,7 +149,7 @@ function EditableSegment(t0) {
 	} else t6 = $[15];
 	return t6;
 }
-
 //#endregion
 export { DatePickerSegment };
+
 //# sourceMappingURL=DatePickerSegment.js.map