@cube-dev/ui-kit 0.182.0 → 0.183.0

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";
@@ -13,6 +13,7 @@ import { _TimeInput } from "./TimeInput.js";
 import { _Calendar } from "../../other/Calendar/Calendar.js";
 import { DatePickerButton } from "./DatePickerButton.js";
 import { DatePickerInput } from "./DatePickerInput.js";
+import { c } from "react-compiler-runtime";
 import { CONTAINER_STYLES } from "@tenphi/tasty";
 import { forwardRef, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -21,88 +22,212 @@ import { useDatePickerState } from "react-stately";
 
 //#region src/components/fields/DatePicker/DatePicker.tsx
 function DatePicker(props, ref) {
+	const $ = c(61);
 	const { t } = useI18n();
-	props = useFieldProps(props, { defaultValidationTrigger: "onBlur" });
-	props = Object.assign({}, DEFAULT_DATE_PROPS, props);
-	let styles = {
-		...extractStyles(props, CONTAINER_STYLES),
-		...props.wrapperStyles
-	};
-	let { qa, size, placeholderValue, isDisabled, isInvalid, isValid, useLocale: useLocaleProp, autoFocus } = props;
-	let targetRef = useRef(null);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { defaultValidationTrigger: "onBlur" };
+		$[0] = t0;
+	} else t0 = $[0];
+	props = useFieldProps(props, t0);
+	let t1;
+	if ($[1] !== props) {
+		props = Object.assign({}, DEFAULT_DATE_PROPS, props);
+		t1 = extractStyles(props, CONTAINER_STYLES);
+		$[1] = props;
+		$[2] = t1;
+		$[3] = props;
+	} else {
+		t1 = $[2];
+		props = $[3];
+	}
+	let t2;
+	if ($[4] !== props.wrapperStyles || $[5] !== t1) {
+		t2 = {
+			...t1,
+			...props.wrapperStyles
+		};
+		$[4] = props.wrapperStyles;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	const styles = t2;
+	const { qa, size, placeholderValue, isDisabled, isInvalid, isValid, useLocale: useLocaleProp, autoFocus } = props;
+	const targetRef = useRef(null);
 	let state = useDatePickerState({
 		...props,
 		shouldCloseOnSelect: () => !state.hasTime
 	});
-	let { isOpen, setOpen } = state;
-	let domRef = useFocusManagerRef(ref);
-	let { isFocused, focusProps } = useFocusRing({
-		within: true,
-		isTextInput: true,
-		autoFocus
-	});
-	let { isFocused: isFocusedButton, focusProps: focusPropsButton } = useFocusRing({
-		within: false,
-		isTextInput: false,
-		autoFocus
-	});
-	let { groupProps, labelProps, fieldProps, buttonProps, dialogProps, calendarProps } = useDatePicker(props, state, targetRef);
-	let placeholder = placeholderValue;
-	let timePlaceholder = placeholder && "hour" in placeholder ? placeholder : void 0;
-	let timeMinValue = props.minValue && "hour" in props.minValue ? props.minValue : void 0;
-	let timeMaxValue = props.maxValue && "hour" in props.maxValue ? props.maxValue : void 0;
-	let timeGranularity = state.granularity === "hour" || state.granularity === "minute" || state.granularity === "second" ? state.granularity : null;
-	let showTimeField = !!timeGranularity;
-	return wrapWithField(/* @__PURE__ */ jsx(_DateInputBase, {
-		ref: targetRef,
-		qa: qa || "DatePicker",
-		inputType: "datepicker",
-		styles,
-		disableFocusRing: isFocusedButton,
-		isDisabled,
-		isInvalid,
-		isValid,
-		size,
-		fieldProps: groupProps,
-		...focusProps,
-		suffix: /* @__PURE__ */ jsxs(DialogTrigger, {
+	const { isOpen, setOpen } = state;
+	const domRef = useFocusManagerRef(ref);
+	let t3;
+	if ($[7] !== autoFocus) {
+		t3 = {
+			within: true,
+			isTextInput: true,
+			autoFocus
+		};
+		$[7] = autoFocus;
+		$[8] = t3;
+	} else t3 = $[8];
+	const { focusProps } = useFocusRing(t3);
+	let t4;
+	if ($[9] !== autoFocus) {
+		t4 = {
+			within: false,
+			isTextInput: false,
+			autoFocus
+		};
+		$[9] = autoFocus;
+		$[10] = t4;
+	} else t4 = $[10];
+	const { isFocused: isFocusedButton, focusProps: focusPropsButton } = useFocusRing(t4);
+	const { groupProps, labelProps, fieldProps, buttonProps, dialogProps, calendarProps } = useDatePicker(props, state, targetRef);
+	const placeholder = placeholderValue;
+	const timePlaceholder = placeholder && "hour" in placeholder ? placeholder : void 0;
+	const timeMinValue = props.minValue && "hour" in props.minValue ? props.minValue : void 0;
+	const timeMaxValue = props.maxValue && "hour" in props.maxValue ? props.maxValue : void 0;
+	const timeGranularity = state.granularity === "hour" || state.granularity === "minute" || state.granularity === "second" ? state.granularity : null;
+	const showTimeField = !!timeGranularity;
+	const t5 = qa || "DatePicker";
+	const t6 = props.shouldFlip;
+	let t7;
+	if ($[11] !== buttonProps || $[12] !== focusPropsButton) {
+		t7 = mergeProps$1(buttonProps, focusPropsButton);
+		$[11] = buttonProps;
+		$[12] = focusPropsButton;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== isDisabled || $[15] !== size || $[16] !== t7) {
+		t8 = /* @__PURE__ */ jsx(DatePickerButton, {
+			size,
+			...t7,
+			isDisabled
+		});
+		$[14] = isDisabled;
+		$[15] = size;
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== calendarProps) {
+		t9 = /* @__PURE__ */ jsx(_Calendar, { ...calendarProps });
+		$[18] = calendarProps;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== props.hideTimeZone || $[21] !== props.hourCycle || $[22] !== showTimeField || $[23] !== state.setTimeValue || $[24] !== state.timeValue || $[25] !== t || $[26] !== timeGranularity || $[27] !== timeMaxValue || $[28] !== timeMinValue || $[29] !== timePlaceholder) {
+		t10 = showTimeField && /* @__PURE__ */ jsx(_TimeInput, {
+			padding: "1x",
+			label: t("datePicker.time", "Time"),
+			value: state.timeValue,
+			placeholderValue: timePlaceholder,
+			granularity: timeGranularity,
+			minValue: timeMinValue,
+			maxValue: timeMaxValue,
+			hourCycle: props.hourCycle,
+			hideTimeZone: props.hideTimeZone,
+			onChange: state.setTimeValue
+		});
+		$[20] = props.hideTimeZone;
+		$[21] = props.hourCycle;
+		$[22] = showTimeField;
+		$[23] = state.setTimeValue;
+		$[24] = state.timeValue;
+		$[25] = t;
+		$[26] = timeGranularity;
+		$[27] = timeMaxValue;
+		$[28] = timeMinValue;
+		$[29] = timePlaceholder;
+		$[30] = t10;
+	} else t10 = $[30];
+	let t11;
+	if ($[31] !== dialogProps || $[32] !== t10 || $[33] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(Dialog, {
+			...dialogProps,
+			width: "max-content",
+			children: [t9, t10]
+		});
+		$[31] = dialogProps;
+		$[32] = t10;
+		$[33] = t9;
+		$[34] = t11;
+	} else t11 = $[34];
+	let t12;
+	if ($[35] !== isOpen || $[36] !== props.shouldFlip || $[37] !== setOpen || $[38] !== t11 || $[39] !== t8) {
+		t12 = /* @__PURE__ */ jsxs(DialogTrigger, {
 			hideArrow: true,
 			type: "popover",
 			mobileType: "tray",
 			placement: "bottom right",
 			targetRef,
 			isOpen,
-			shouldFlip: props.shouldFlip,
+			shouldFlip: t6,
 			onOpenChange: setOpen,
-			children: [/* @__PURE__ */ jsx(DatePickerButton, {
-				size,
-				...mergeProps$1(buttonProps, focusPropsButton),
-				isDisabled
-			}), /* @__PURE__ */ jsxs(Dialog, {
-				...dialogProps,
-				width: "max-content",
-				children: [/* @__PURE__ */ jsx(_Calendar, { ...calendarProps }), showTimeField && /* @__PURE__ */ jsx(_TimeInput, {
-					padding: "1x",
-					label: t("datePicker.time", "Time"),
-					value: state.timeValue,
-					placeholderValue: timePlaceholder,
-					granularity: timeGranularity,
-					minValue: timeMinValue,
-					maxValue: timeMaxValue,
-					hourCycle: props.hourCycle,
-					hideTimeZone: props.hideTimeZone,
-					onChange: state.setTimeValue
-				})]
-			})]
-		}),
-		children: /* @__PURE__ */ jsx(DatePickerInput, {
+			children: [t8, t11]
+		});
+		$[35] = isOpen;
+		$[36] = props.shouldFlip;
+		$[37] = setOpen;
+		$[38] = t11;
+		$[39] = t8;
+		$[40] = t12;
+	} else t12 = $[40];
+	let t13;
+	if ($[41] !== fieldProps || $[42] !== useLocaleProp) {
+		t13 = /* @__PURE__ */ jsx(DatePickerInput, {
 			useLocale: useLocaleProp,
 			...fieldProps
-		})
-	}), domRef, {
-		...props,
-		labelProps: mergeProps$1(props.labelProps, labelProps)
-	});
+		});
+		$[41] = fieldProps;
+		$[42] = useLocaleProp;
+		$[43] = t13;
+	} else t13 = $[43];
+	let t14;
+	if ($[44] !== focusProps || $[45] !== groupProps || $[46] !== isDisabled || $[47] !== isFocusedButton || $[48] !== isInvalid || $[49] !== isValid || $[50] !== size || $[51] !== styles || $[52] !== t12 || $[53] !== t13 || $[54] !== t5) {
+		t14 = /* @__PURE__ */ jsx(_DateInputBase, {
+			ref: targetRef,
+			qa: t5,
+			inputType: "datepicker",
+			styles,
+			disableFocusRing: isFocusedButton,
+			isDisabled,
+			isInvalid,
+			isValid,
+			size,
+			fieldProps: groupProps,
+			...focusProps,
+			suffix: t12,
+			children: t13
+		});
+		$[44] = focusProps;
+		$[45] = groupProps;
+		$[46] = isDisabled;
+		$[47] = isFocusedButton;
+		$[48] = isInvalid;
+		$[49] = isValid;
+		$[50] = size;
+		$[51] = styles;
+		$[52] = t12;
+		$[53] = t13;
+		$[54] = t5;
+		$[55] = t14;
+	} else t14 = $[55];
+	const component = t14;
+	let t15;
+	if ($[56] !== component || $[57] !== domRef || $[58] !== labelProps || $[59] !== props) {
+		t15 = wrapWithField(component, domRef, {
+			...props,
+			labelProps: mergeProps$1(props.labelProps, labelProps)
+		});
+		$[56] = component;
+		$[57] = domRef;
+		$[58] = labelProps;
+		$[59] = props;
+		$[60] = t15;
+	} else t15 = $[60];
+	return t15;
 }
 const _DatePicker = forwardRef(DatePicker);
 _DatePicker.displayName = "DatePicker";

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","names":["DateInputBase","mergeProps","Calendar","TimeInput"],"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, useRef } from 'react';\nimport {\n  AriaDatePickerProps,\n  DateValue,\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 } from '../../../utils/styles';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Calendar } from '../../other/Calendar/Calendar';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { 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<AriaDatePickerProps<T>, 'errorMessage' | 'form' | 'name'>,\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  useLocale?: boolean;\n}\n\nfunction DatePicker<T extends DateValue>(\n  props: CubeDatePickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n\n  props = useFieldProps(props, {\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: Styles = {\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;\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          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            isDisabled={isDisabled}\n          />\n          <Dialog {...dialogProps} width=\"max-content\">\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":";;;;;;;;;;;;;;;;;;;;;;AAgDA,SAAS,WACP,OACA,KACA;CACA,MAAM,EAAE,MAAM,SAAS;AAEvB,SAAQ,cAAc,OAAO,EAC3B,0BAA0B,UAC3B,CAAC;AACF,SAAQ,OAAO,OAAO,EAAE,EAAE,oBAAoB,MAAM;CAQpD,IAAI,SAAiB;EACnB,GAAG,cAAc,OAAO,iBAAiB;EACzC,GAAG,MAAM;EACV;CAED,IAAI,EACF,IACA,MACA,kBACA,YACA,WACA,SACA,WAAW,eACX,cACE;CACJ,IAAI,YAAY,OAAuB,KAAK;CAC5C,IAAI,QAAQ,mBAAmB;EAC7B,GAAG;EACH,2BAA2B,CAAC,MAAM;EACnC,CAAC;CACF,IAAI,EAAE,QAAQ,YAAY;CAE1B,IAAI,SAAS,mBAAmB,IAAI;CAEpC,IAAI,EAAE,WAAW,eAAe,aAAa;EAC3C,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEF,IAAI,EAAE,WAAW,iBAAiB,YAAY,qBAC5C,aAAa;EACX,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEJ,IAAI,EACF,YACA,YACA,YACA,aACA,aACA,kBACE,cAAc,OAAO,OAAO,UAAU;CAE1C,IAAI,cAAqC;CACzC,IAAI,kBACF,eAAe,UAAU,cAAc,cAAc;CACvD,IAAI,eACF,MAAM,YAAY,UAAU,MAAM,WAAW,MAAM,WAAW;CAChE,IAAI,eACF,MAAM,YAAY,UAAU,MAAM,WAAW,MAAM,WAAW;CAChE,IAAI,kBACF,MAAM,gBAAgB,UACtB,MAAM,gBAAgB,YACtB,MAAM,gBAAgB,WAClB,MAAM,cACN;CACN,IAAI,gBAAgB,CAAC,CAAC;AAwDtB,QAAO,cApDL,oBAACA;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACF;EACR,kBAAkB;EACN;EACD;EACF;EACH;EACN,YAAY;EACZ,GAAI;EACJ,QACE,qBAAC;GACC;GACA,MAAK;GACL,YAAW;GACX,WAAU;GACC;GACH;GACR,YAAY,MAAM;GAClB,cAAc;cAEd,oBAAC;IACO;IACN,GAAIC,aAAW,aAAa,iBAAiB;IACjC;KACZ,EACF,qBAAC;IAAO,GAAI;IAAa,OAAM;eAC7B,oBAACC,aAAS,GAAI,gBAAiB,EAC9B,iBACC,oBAACC;KACC,SAAQ;KACR,OAAO,EAAE,mBAAmB,OAAO;KACnC,OAAO,MAAM;KACb,kBAAkB;KAClB,aAAa;KACb,UAAU;KACV,UAAU;KACV,WAAW,MAAM;KACjB,cAAc,MAAM;KACpB,UAAU,MAAM;MAChB;KAEG;IACK;YAGlB,oBAAC;GAAgB,WAAW;GAAe,GAAI;IAAc;GAC/C,EAGc,QAAQ;EACtC,GAAG;EACH,YAAYF,aAAW,MAAM,YAAY,WAAW;EACrD,CAAC;;AAGJ,MAAM,cAAc,WAAW,WAAW;AAE1C,YAAY,cAAc"}
+{"version":3,"file":"DatePicker.js","names":["FocusableRef","BaseProps","CONTAINER_STYLES","ContainerStyleProps","Styles","forwardRef","useRef","AriaDatePickerProps","DateValue","useDatePicker","useFocusRing","useDatePickerState","useI18n","FieldBaseProps","mergeProps","extractStyles","useFieldProps","wrapWithField","Calendar","Dialog","DialogTrigger","DateInputBase","DatePickerButton","DatePickerInput","DEFAULT_DATE_PROPS","TimeInput","DateFieldBase","useFocusManagerRef","CubeDatePickerProps","Omit","T","wrapperStyles","inputStyles","triggerStyles","styles","size","maxVisibleMonths","shouldFlip","useLocale","DatePicker","props","ref","$","_c","t","t0","Symbol","for","defaultValidationTrigger","t1","Object","assign","t2","qa","placeholderValue","isDisabled","isInvalid","isValid","useLocaleProp","autoFocus","targetRef","state","shouldCloseOnSelect","hasTime","isOpen","setOpen","domRef","t3","within","isTextInput","focusProps","t4","isFocused","isFocusedButton","focusPropsButton","groupProps","labelProps","fieldProps","buttonProps","dialogProps","calendarProps","placeholder","timePlaceholder","undefined","timeMinValue","minValue","timeMaxValue","maxValue","timeGranularity","granularity","showTimeField","t5","t6","t7","t8","t9","t10","hideTimeZone","hourCycle","setTimeValue","timeValue","t11","t12","t13","t14","component","t15","_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, useRef } from 'react';\nimport {\n  AriaDatePickerProps,\n  DateValue,\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 } from '../../../utils/styles';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Calendar } from '../../other/Calendar/Calendar';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { 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<AriaDatePickerProps<T>, 'errorMessage' | 'form' | 'name'>,\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  useLocale?: boolean;\n}\n\nfunction DatePicker<T extends DateValue>(\n  props: CubeDatePickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n\n  props = useFieldProps(props, {\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: Styles = {\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;\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          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            isDisabled={isDisabled}\n          />\n          <Dialog {...dialogProps} width=\"max-content\">\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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"}

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

@@ -1,7 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.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";
 
@@ -27,14 +28,44 @@ const StyledDatePickerButton = tasty(ItemAction, { icon: /* @__PURE__ */ jsx(Cal
 * dropped by the next one. No `type` is passed to the provider, so the `context`
 * mod stays off and the button keeps its margins.
 */
-function DatePickerButton({ isDisabled, isReadOnly, ...props }) {
-	return /* @__PURE__ */ jsx(ItemActionProvider, {
-		isDisabled,
-		children: /* @__PURE__ */ jsx(StyledDatePickerButton, {
+function DatePickerButton(t0) {
+	const $ = c(10);
+	let isDisabled;
+	let isReadOnly;
+	let props;
+	if ($[0] !== t0) {
+		({isDisabled, isReadOnly, ...props} = t0);
+		$[0] = t0;
+		$[1] = isDisabled;
+		$[2] = isReadOnly;
+		$[3] = props;
+	} else {
+		isDisabled = $[1];
+		isReadOnly = $[2];
+		props = $[3];
+	}
+	const t1 = isReadOnly && !isDisabled ? true : void 0;
+	let t2;
+	if ($[4] !== props || $[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx(StyledDatePickerButton, {
 			...props,
-			isDisabled: isReadOnly && !isDisabled ? true : void 0
-		})
-	});
+			isDisabled: t1
+		});
+		$[4] = props;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== isDisabled || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsx(ItemActionProvider, {
+			isDisabled,
+			children: t2
+		});
+		$[7] = isDisabled;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
 }
 
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"DatePickerButton.js","names":[],"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,MAAM,yBAAyB,MAAM,YAAY,EAC/C,MAAM,oBAAC,iBAAe,EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;AA2BF,SAAgB,iBAAiB,EAC/B,YACA,YACA,GAAG,SACyB;AAC5B,QACE,oBAAC;EAA+B;YAC9B,oBAAC;GACC,GAAI;GACJ,YAAY,cAAc,CAAC,aAAa,OAAO;IAC/C;GACiB"}
+{"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { tasty } from "@tenphi/tasty";
 

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

@@ -1 +1 @@
-{"version":3,"file":"DatePickerElement.js","names":[],"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,MAAa,oBAAoB,MAAM,OAAO,EAC5C,QAAQ;CACN,KAAK;CACL,SAAS;EACP,IAAI;EACJ,SAAS;EACV;CACD,QAAQ;CACT,EACF,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;EACV;CACDC,QAAQ;CACV,EACD,CAAC"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { DatePickerSegment } from "./DatePickerSegment.js";
 import { formatSegments } from "./utils.js";

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

@@ -1 +1 @@
-{"version":3,"file":"DatePickerInput.js","names":["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 Omit<AriaDatePickerProps<T>, 'errorMessage' | 'form'>,\n    DateFieldBase<T> {\n  hideValidationIcon?: boolean;\n  maxGranularity?: Granularity;\n  useLocale?: boolean;\n  onFocus?: () => void;\n  onBlur?: () => void;\n}\n\nexport function DatePickerInput<T extends DateValue>(\n  props: CubeDatePickerInputProps<T>,\n) {\n  let { isDisabled, isReadOnly, isRequired, useLocale: useLocaleProp } = props;\n  let ref = useRef(null);\n  let { locale } = useLocale();\n  let state = useDateFieldState({\n    ...props,\n    locale: useLocaleProp ? locale : 'en-US',\n    createCalendar,\n  });\n\n  if (useLocaleProp == null) {\n    state.segments = formatSegments(state.segments);\n  }\n\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: (isFocused) => {\n      if (isFocused) {\n        props.onFocus?.();\n      } else {\n        props.onBlur?.();\n      }\n    },\n  });\n\n  let { fieldProps } = useDateField(props, state, ref);\n\n  return (\n    <DateInputElement ref={ref} {...mergeProps(fieldProps, focusWithinProps)}>\n      {state.segments.map((segment: DateSegment, i: number) => (\n        <DatePickerSegment\n          key={i}\n          segment={segment}\n          state={state}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isRequired={isRequired}\n        />\n      ))}\n    </DateInputElement>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAkBA,MAAM,mBAAmB,MAAM;CAC7B,MAAM;CACN,QAAQ;EACN,SAAS;EACT,MAAM;EACN,YAAY;EACb;CACF,CAAC;AAYF,SAAgB,gBACd,OACA;CACA,IAAI,EAAE,YAAY,YAAY,YAAY,WAAW,kBAAkB;CACvE,IAAI,MAAM,OAAO,KAAK;CACtB,IAAI,EAAE,WAAW,WAAW;CAC5B,IAAI,QAAQ,kBAAkB;EAC5B,GAAG;EACH,QAAQ,gBAAgB,SAAS;EACjC;EACD,CAAC;AAEF,KAAI,iBAAiB,KACnB,OAAM,WAAW,eAAe,MAAM,SAAS;CAGjD,MAAM,EAAE,qBAAqB,eAAe,EAC1C,sBAAsB,cAAc;AAClC,MAAI,UACF,OAAM,WAAW;MAEjB,OAAM,UAAU;IAGrB,CAAC;CAEF,IAAI,EAAE,eAAe,aAAa,OAAO,OAAO,IAAI;AAEpD,QACE,oBAAC;EAAsB;EAAK,GAAIA,aAAW,YAAY,iBAAiB;YACrE,MAAM,SAAS,KAAK,SAAsB,MACzC,oBAAC;GAEU;GACF;GACK;GACA;GACA;KALP,EAML,CACF;GACe"}
+{"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","hideValidationIcon","maxGranularity","onFocus","onBlur","DatePickerInput","props","isDisabled","isReadOnly","isRequired","useLocaleProp","ref","locale","state","segments","focusWithinProps","onFocusWithinChange","isFocused","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<AriaDatePickerProps<T>, 'errorMessage' | 'form'>,\n    DateFieldBase<T> {\n  hideValidationIcon?: boolean;\n  maxGranularity?: Granularity;\n  useLocale?: boolean;\n  onFocus?: () => void;\n  onBlur?: () => void;\n}\n\nexport function DatePickerInput<T extends DateValue>(\n  props: CubeDatePickerInputProps<T>,\n) {\n  let { isDisabled, isReadOnly, isRequired, useLocale: useLocaleProp } = props;\n  let ref = useRef(null);\n  let { locale } = useLocale();\n  let state = useDateFieldState({\n    ...props,\n    locale: useLocaleProp ? locale : 'en-US',\n    createCalendar,\n  });\n\n  if (useLocaleProp == null) {\n    state.segments = formatSegments(state.segments);\n  }\n\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: (isFocused) => {\n      if (isFocused) {\n        props.onFocus?.();\n      } else {\n        props.onBlur?.();\n      }\n    },\n  });\n\n  let { fieldProps } = useDateField(props, state, ref);\n\n  return (\n    <DateInputElement ref={ref} {...mergeProps(fieldProps, focusWithinProps)}>\n      {state.segments.map((segment: DateSegment, i: number) => (\n        <DatePickerSegment\n          key={i}\n          segment={segment}\n          state={state}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isRequired={isRequired}\n        />\n      ))}\n    </DateInputElement>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAkBA,MAAMe,mBAAmBd,MAAM;CAC7Be,MAAM;CACNC,QAAQ;EACNC,SAAS;EACTC,MAAM;EACNC,YAAY;EACd;CACD,CAAC;AAYF,SAAgBQ,gBACdC,OACA;CACA,IAAI,EAAEC,YAAYC,YAAYC,YAAYzB,WAAW0B,kBAAkBJ;CACvE,IAAIK,MAAMhC,OAAO,KAAK;CACtB,IAAI,EAAEiC,WAAW5B,WAAW;CAC5B,IAAI6B,QAAQ3B,kBAAkB;EAC5B,GAAGoB;EACHM,QAAQF,gBAAgBE,SAAS;EACjCnC;EACD,CAAC;AAEF,KAAIiC,iBAAiB,KACnBG,OAAMC,WAAWvB,eAAesB,MAAMC,SAAS;CAGjD,MAAM,EAAEC,qBAAqBhC,eAAe,EAC1CiC,sBAAsBC,cAAc;AAClC,MAAIA,UACFX,OAAMH,WAAW;MAEjBG,OAAMF,UAAU;IAGrB,CAAC;CAEF,IAAI,EAAEc,eAAepC,aAAawB,OAAOO,OAAOF,IAAI;AAEpD,QACE,oBAAC;EAAsBA;EAAK,GAAIxB,aAAW+B,YAAYH,iBAAiB;YACrEF,MAAMC,SAASK,KAAKC,SAAsBC,MACzC,oBAAC;GAEUD;GACFP;GACKN;GACAC;GACAC;KALPY,EAOR,CAAC;GACe"}

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

@@ -1,4 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.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";
@@ -32,43 +33,122 @@ const EditableSegmentElement = tasty({
 		Placeholder: { opacity: "$disabled-opacity" }
 	}
 });
-function DatePickerSegment({ segment, state, ...otherProps }) {
+function DatePickerSegment(t0) {
+	const $ = c(10);
+	let otherProps;
+	let segment;
+	let state;
+	if ($[0] !== t0) {
+		({segment, state, ...otherProps} = t0);
+		$[0] = t0;
+		$[1] = otherProps;
+		$[2] = segment;
+		$[3] = state;
+	} else {
+		otherProps = $[1];
+		segment = $[2];
+		state = $[3];
+	}
 	switch (segment.type) {
-		case "literal": return /* @__PURE__ */ jsx(LiteralSegment, { segment });
-		default: return /* @__PURE__ */ jsx(EditableSegment, {
-			segment,
-			state,
-			...otherProps
-		});
+		case "literal": {
+			let t1;
+			if ($[4] !== segment) {
+				t1 = /* @__PURE__ */ jsx(LiteralSegment, { segment });
+				$[4] = segment;
+				$[5] = t1;
+			} else t1 = $[5];
+			return t1;
+		}
+		default: {
+			let t1;
+			if ($[6] !== otherProps || $[7] !== segment || $[8] !== state) {
+				t1 = /* @__PURE__ */ jsx(EditableSegment, {
+					segment,
+					state,
+					...otherProps
+				});
+				$[6] = otherProps;
+				$[7] = segment;
+				$[8] = state;
+				$[9] = t1;
+			} else t1 = $[9];
+			return t1;
+		}
 	}
 }
-function LiteralSegment({ segment }) {
-	return /* @__PURE__ */ jsx(LiteralSegmentElement, {
-		"data-type": segment.type === "literal" ? void 0 : segment.type,
-		children: segment.text
-	});
+function LiteralSegment(t0) {
+	const $ = c(3);
+	const { segment } = t0;
+	const t1 = segment.type === "literal" ? void 0 : segment.type;
+	let t2;
+	if ($[0] !== segment.text || $[1] !== t1) {
+		t2 = /* @__PURE__ */ jsx(LiteralSegmentElement, {
+			"data-type": t1,
+			children: segment.text
+		});
+		$[0] = segment.text;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	return t2;
 }
-function EditableSegment({ segment, state }) {
-	let ref = useRef(null);
-	let { segmentProps } = useDateSegment(segment, state, ref);
-	return /* @__PURE__ */ jsx(EditableSegmentElement, {
-		...segmentProps,
-		ref,
-		mods: {
+function EditableSegment(t0) {
+	const $ = c(16);
+	const { segment, state } = t0;
+	const ref = useRef(null);
+	const { segmentProps } = useDateSegment(segment, state, ref);
+	const t1 = !segment.isEditable;
+	let t2;
+	if ($[0] !== segment.isPlaceholder || $[1] !== t1) {
+		t2 = {
 			placeholder: segment.isPlaceholder,
-			"read-only": !segment.isEditable
-		},
-		style: {
+			"read-only": t1
+		};
+		$[0] = segment.isPlaceholder;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	const t3 = segment.maxValue != null ? `calc(${String(segment.maxValue).length + "ch"})` : void 0;
+	let t4;
+	if ($[3] !== segmentProps.style || $[4] !== t3) {
+		t4 = {
 			...segmentProps.style,
-			minWidth: segment.maxValue != null ? `calc(${String(segment.maxValue).length + "ch"})` : void 0
-		},
-		"data-testid": segment.type,
-		children: segment.isPlaceholder ? /* @__PURE__ */ jsx("span", {
+			minWidth: t3
+		};
+		$[3] = segmentProps.style;
+		$[4] = t3;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== segment.isPlaceholder || $[7] !== segment.placeholder || $[8] !== segment.text) {
+		t5 = segment.isPlaceholder ? /* @__PURE__ */ jsx("span", {
 			"data-element": "Placeholder",
 			"aria-hidden": "true",
 			children: segment.placeholder
-		}) : segment.text
-	});
+		}) : segment.text;
+		$[6] = segment.isPlaceholder;
+		$[7] = segment.placeholder;
+		$[8] = segment.text;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== segment.type || $[11] !== segmentProps || $[12] !== t2 || $[13] !== t4 || $[14] !== t5) {
+		t6 = /* @__PURE__ */ jsx(EditableSegmentElement, {
+			...segmentProps,
+			ref,
+			mods: t2,
+			style: t4,
+			"data-testid": segment.type,
+			children: t5
+		});
+		$[10] = segment.type;
+		$[11] = segmentProps;
+		$[12] = t2;
+		$[13] = t4;
+		$[14] = t5;
+		$[15] = t6;
+	} else t6 = $[15];
+	return t6;
 }
 
 //#endregion