@cube-dev/ui-kit 0.201.0 → 0.203.0

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

@@ -1 +1 @@
-{"version":3,"file":"DateInputBase.js","names":["mergeRefs","CONTAINER_STYLES","ContainerStyleProps","mergeStyles","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  mergeStyles,\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: mergeStyles(INPUT_WRAPPER_STYLES, {\n    display: 'flex',\n  }),\n});\n\nconst DateInputElement = tasty({\n  role: 'presentation',\n  styles: mergeStyles(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      // oxlint-disable-next-line tasty/no-style-prop -- forwards the consumer's public `style` prop\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","mergeStyles","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","isReadOnly","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","t10","disabled","readonly","focused","t11","t12","t13","t14","t15","t16","t17","_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  mergeStyles,\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: mergeStyles(INPUT_WRAPPER_STYLES, {\n    display: 'flex',\n  }),\n});\n\nconst DateInputElement = tasty({\n  role: 'presentation',\n  styles: mergeStyles(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  isReadOnly?: 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    isReadOnly,\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        readonly: !!isReadOnly,\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      // oxlint-disable-next-line tasty/no-style-prop -- forwards the consumer's public `style` prop\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

@@ -1,12 +1,13 @@
 
 import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
+import { FieldLayoutStyleProps } from "../../form/field-layout.js";
 import { DateFieldBase } from "./types.js";
-import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
+import { BaseProps, Styles } from "@tenphi/tasty";
 import { RefObject } from "react";
 import { AriaDatePickerProps, DateValue, Placement } from "react-aria";
 //#region src/components/fields/DatePicker/DatePicker.d.ts
-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> {
+export interface CubeDatePickerProps<T extends DateValue = DateValue> extends Omit<AriaDatePickerProps<T>, 'errorMessage' | 'form' | 'name' | keyof DateFieldBase<T>>, DateFieldBase<T>, BaseProps, FieldLayoutStyleProps, FieldBaseProps<T | null | undefined> {
   wrapperStyles?: Styles;
   inputStyles?: Styles;
   triggerStyles?: Styles;

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

@@ -1,10 +1,10 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
-import { extractStyles, mergeStyleLayers } from "../../../utils/styles.js";
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 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 { splitFieldLayout } from "../../form/field-layout.js";
 import { DialogTrigger } from "../../overlays/Dialog/DialogTrigger.js";
 import { DateInputBase as _DateInputBase } from "./DateInputBase.js";
 import { DEFAULT_DATE_PROPS } from "./props.js";
@@ -14,14 +14,13 @@ 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";
-import { CONTAINER_STYLES } from "@tenphi/tasty";
 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);
+	const $ = c(10);
 	const { t } = useI18n();
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -29,18 +28,9 @@ function DatePicker(rawProps, ref) {
 		$[0] = t0;
 	} else t0 = $[0];
 	let props = useFieldProps(rawProps, t0);
-	let t1;
-	if ($[1] !== props) {
-		props = Object.assign({}, DEFAULT_DATE_PROPS, props);
-		t1 = mergeStyleLayers(extractStyles(props, CONTAINER_STYLES), props.wrapperStyles);
-		$[1] = props;
-		$[2] = t1;
-		$[3] = props;
-	} else {
-		t1 = $[2];
-		props = $[3];
-	}
-	const styles = t1;
+	props = Object.assign({}, DEFAULT_DATE_PROPS, props);
+	const fieldLayout = splitFieldLayout(props, { overStyles: props.wrapperStyles });
+	const styles = fieldLayout.styles;
 	const { qa, size, placeholderValue, isDisabled, isInvalid, isValid, useLocale: useLocaleProp, autoFocus } = props;
 	const targetRef = useRef(null);
 	let state = useDatePickerState({
@@ -50,28 +40,16 @@ function DatePicker(rawProps, ref) {
 	const { isOpen, setOpen } = state;
 	const domRef = useRef(null);
 	useFocusManagerRef(ref, domRef);
-	let t2;
-	if ($[4] !== autoFocus) {
-		t2 = {
-			within: true,
-			isTextInput: true,
-			autoFocus
-		};
-		$[4] = autoFocus;
-		$[5] = t2;
-	} else t2 = $[5];
-	const { focusProps } = useFocusRing(t2);
-	let t3;
-	if ($[6] !== autoFocus) {
-		t3 = {
-			within: false,
-			isTextInput: false,
-			autoFocus
-		};
-		$[6] = autoFocus;
-		$[7] = t3;
-	} else t3 = $[7];
-	const { isFocused: isFocusedButton, focusProps: focusPropsButton } = useFocusRing(t3);
+	const { focusProps } = useFocusRing({
+		within: true,
+		isTextInput: true,
+		autoFocus
+	});
+	const { isFocused: isFocusedButton, focusProps: focusPropsButton } = useFocusRing({
+		within: false,
+		isTextInput: false,
+		autoFocus
+	});
 	const { groupProps, labelProps, fieldProps, buttonProps, dialogProps, calendarProps } = useDatePicker(props, state, targetRef);
 	const placeholder = placeholderValue ?? void 0;
 	const timePlaceholder = placeholder && "hour" in placeholder ? placeholder : void 0;
@@ -79,151 +57,84 @@ function DatePicker(rawProps, ref) {
 	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 t4 = qa || "DatePicker";
-	const t5 = props.placement ?? "bottom right";
-	const t6 = props.targetRef ?? targetRef;
-	const t7 = props.shouldFlip;
-	let t8;
-	if ($[8] !== buttonProps || $[9] !== focusPropsButton) {
-		t8 = mergeProps$1(buttonProps, focusPropsButton);
-		$[8] = buttonProps;
-		$[9] = focusPropsButton;
-		$[10] = t8;
-	} else t8 = $[10];
-	let t9;
-	if ($[11] !== isDisabled || $[12] !== size || $[13] !== t8) {
-		t9 = /* @__PURE__ */ jsx(DatePickerButton, {
-			size,
-			...t8,
-			isDisabled
-		});
-		$[11] = isDisabled;
-		$[12] = size;
-		$[13] = t8;
-		$[14] = t9;
-	} else t9 = $[14];
-	let t10;
-	if ($[15] !== calendarProps) {
-		t10 = /* @__PURE__ */ jsx(_Calendar, { ...calendarProps });
-		$[15] = calendarProps;
-		$[16] = t10;
-	} else t10 = $[16];
-	let t11;
-	if ($[17] !== props.hideTimeZone || $[18] !== props.hourCycle || $[19] !== showTimeField || $[20] !== state.setTimeValue || $[21] !== state.timeValue || $[22] !== t || $[23] !== timeGranularity || $[24] !== timeMaxValue || $[25] !== timeMinValue || $[26] !== timePlaceholder) {
-		t11 = 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
-		});
-		$[17] = props.hideTimeZone;
-		$[18] = props.hourCycle;
-		$[19] = showTimeField;
-		$[20] = state.setTimeValue;
-		$[21] = state.timeValue;
-		$[22] = t;
-		$[23] = timeGranularity;
-		$[24] = timeMaxValue;
-		$[25] = timeMinValue;
-		$[26] = timePlaceholder;
-		$[27] = t11;
-	} else t11 = $[27];
-	let t12;
-	if ($[28] !== dialogProps || $[29] !== t10 || $[30] !== t11) {
-		t12 = /* @__PURE__ */ jsxs(Dialog, {
+	const t1 = props.isReadOnly;
+	const t2 = props.shouldFlip;
+	let t3;
+	if ($[1] !== buttonProps || $[2] !== focusPropsButton) {
+		t3 = mergeProps$1(buttonProps, focusPropsButton);
+		$[1] = buttonProps;
+		$[2] = focusPropsButton;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== calendarProps) {
+		t4 = /* @__PURE__ */ jsx(_Calendar, { ...calendarProps });
+		$[4] = calendarProps;
+		$[5] = t4;
+	} else t4 = $[5];
+	const t5 = showTimeField && /* @__PURE__ */ jsx(_TimeInput, {
+		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
+	});
+	let t6;
+	if ($[6] !== dialogProps || $[7] !== t4 || $[8] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Dialog, {
 			...dialogProps,
 			width: "max-content",
 			overflow: "auto",
-			children: [t10, t11]
+			children: [t4, t5]
 		});
-		$[28] = dialogProps;
-		$[29] = t10;
-		$[30] = t11;
-		$[31] = t12;
-	} else t12 = $[31];
-	let t13;
-	if ($[32] !== isOpen || $[33] !== props.shouldFlip || $[34] !== setOpen || $[35] !== t12 || $[36] !== t5 || $[37] !== t6 || $[38] !== t9) {
-		t13 = /* @__PURE__ */ jsxs(DialogTrigger, {
+		$[6] = dialogProps;
+		$[7] = t4;
+		$[8] = t5;
+		$[9] = t6;
+	} else t6 = $[9];
+	const component = /* @__PURE__ */ jsx(_DateInputBase, {
+		ref: targetRef,
+		wrapperRef: domRef,
+		qa: qa || "DatePicker",
+		inputType: "datepicker",
+		autoFocus,
+		styles,
+		disableFocusRing: isFocusedButton,
+		isDisabled,
+		isReadOnly: t1,
+		isInvalid,
+		isValid,
+		size,
+		fieldProps: groupProps,
+		...focusProps,
+		suffix: /* @__PURE__ */ jsxs(DialogTrigger, {
 			hideArrow: true,
 			type: "popover",
-			placement: t5,
-			targetRef: t6,
+			placement: props.placement ?? "bottom right",
+			targetRef: props.targetRef ?? targetRef,
 			isOpen,
-			shouldFlip: t7,
+			shouldFlip: t2,
 			onOpenChange: setOpen,
-			children: [t9, t12]
-		});
-		$[32] = isOpen;
-		$[33] = props.shouldFlip;
-		$[34] = setOpen;
-		$[35] = t12;
-		$[36] = t5;
-		$[37] = t6;
-		$[38] = t9;
-		$[39] = t13;
-	} else t13 = $[39];
-	let t14;
-	if ($[40] !== fieldProps || $[41] !== useLocaleProp) {
-		t14 = /* @__PURE__ */ jsx(DatePickerInput, {
+			children: [/* @__PURE__ */ jsx(DatePickerButton, {
+				size,
+				...t3,
+				isDisabled
+			}), t6]
+		}),
+		children: /* @__PURE__ */ jsx(DatePickerInput, {
 			useLocale: useLocaleProp,
 			...fieldProps
-		});
-		$[40] = fieldProps;
-		$[41] = useLocaleProp;
-		$[42] = t14;
-	} else t14 = $[42];
-	let t15;
-	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,
-			isInvalid,
-			isValid,
-			size,
-			fieldProps: groupProps,
-			...focusProps,
-			suffix: t13,
-			children: t14
-		});
-		$[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 ($[56] !== component || $[57] !== labelProps || $[58] !== props) {
-		t16 = wrapWithField(component, {
-			...props,
-			labelProps: mergeProps$1(props.labelProps, labelProps)
-		});
-		$[56] = component;
-		$[57] = labelProps;
-		$[58] = props;
-		$[59] = t16;
-	} else t16 = $[59];
-	return t16;
+		})
+	});
+	return wrapWithField(component, {
+		...props,
+		...fieldLayout.field,
+		labelProps: mergeProps$1(props.labelProps, labelProps)
+	});
 }
 const _DatePicker = forwardRef(DatePicker);
 _DatePicker.displayName = "DatePicker";

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","_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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"}
+{"version":3,"file":"DatePicker.js","names":["FocusableRef","BaseProps","Styles","forwardRef","RefObject","useRef","AriaDatePickerProps","DateValue","Placement","useDatePicker","useFocusRing","useDatePickerState","useI18n","FieldBaseProps","mergeProps","useFieldProps","wrapWithField","FieldLayoutStyleProps","splitFieldLayout","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","Object","assign","fieldLayout","overStyles","qa","placeholderValue","isDisabled","isInvalid","isValid","useLocaleProp","autoFocus","state","shouldCloseOnSelect","hasTime","isOpen","setOpen","domRef","focusProps","within","isTextInput","isFocused","isFocusedButton","focusPropsButton","groupProps","labelProps","fieldProps","buttonProps","dialogProps","calendarProps","placeholder","undefined","timePlaceholder","timeMinValue","minValue","timeMaxValue","maxValue","timeGranularity","granularity","showTimeField","t1","isReadOnly","t2","t3","t4","t5","timeValue","hourCycle","hideTimeZone","setTimeValue","t6","component","field","_DatePicker","displayName","_c","mergeProps","Calendar","TimeInput","DateInputBase"],"sources":["../../../../src/components/fields/DatePicker/DatePicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { BaseProps, Styles } 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 { useFieldProps, wrapWithField } from '../../form';\nimport {\n  FieldLayoutStyleProps,\n  splitFieldLayout,\n} from '../../form/field-layout';\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    FieldLayoutStyleProps,\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  // `wrapperStyles` styles the same box as `styles` and wins over it.\n  const fieldLayout = splitFieldLayout(props, {\n    overStyles: props.wrapperStyles,\n  });\n  const styles = fieldLayout.styles;\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      isReadOnly={props.isReadOnly}\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                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    ...fieldLayout.field,\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,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { ItemActionProvider } from "../../actions/ItemActionContext.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { CalendarIcon } from "../../../icons/CalendarIcon.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { tasty } from "@tenphi/tasty";
 //#region src/components/fields/DatePicker/DatePickerElement.tsx

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.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/DatePickerSegment.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";

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

@@ -1,12 +1,13 @@
 
 import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
+import { FieldLayoutStyleProps } from "../../form/field-layout.js";
 import { DateFieldBase } from "./types.js";
-import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
+import { BaseProps, Styles } from "@tenphi/tasty";
 import { ReactElement, Ref, RefObject } from "react";
 import { AriaDateRangePickerProps, DateValue, Placement } from "react-aria";
 //#region src/components/fields/DatePicker/DateRangePicker.d.ts
-export interface CubeDateRangePickerProps<T extends DateValue = DateValue> extends Omit<AriaDateRangePickerProps<T>, 'errorMessage' | 'form' | 'name' | keyof DateFieldBase<T>>, BaseProps, DateFieldBase<T>, ContainerStyleProps, FieldBaseProps<{
+export interface CubeDateRangePickerProps<T extends DateValue = DateValue> extends Omit<AriaDateRangePickerProps<T>, 'errorMessage' | 'form' | 'name' | keyof DateFieldBase<T>>, BaseProps, DateFieldBase<T>, FieldLayoutStyleProps, FieldBaseProps<{
   start: T;
   end: T;
 } | null | undefined> {