@cube-dev/ui-kit 0.182.0 → 0.183.0

package/dist/components/fields/CommandTextArea/useCaretAnchor.js

@@ -1,5 +1,6 @@
-/** @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 { getCaretRect } from "./caretPosition.js";
+import { c } from "react-compiler-runtime";
 import { useEffect, useLayoutEffect, useRef } from "react";
 
 //#region src/components/fields/CommandTextArea/useCaretAnchor.ts
@@ -10,57 +11,95 @@ import { useEffect, useLayoutEffect, useRef } from "react";
 * `getBoundingClientRect`, while interaction/outside-click stays on the
 * wrapper via a separate `triggerRef`.
 */
-function useCaretAnchor({ inputRef, wrapperRef, caret, value, isActive }) {
+function useCaretAnchor(t0) {
+	const $ = c(15);
+	const { inputRef, wrapperRef, caret, value, isActive } = t0;
 	const anchorRef = useRef(null);
 	const positionApiRef = useRef(null);
-	useEffect(() => {
-		const wrapper = wrapperRef.current;
-		if (!wrapper) return;
-		const anchor = document.createElement("span");
-		anchor.setAttribute("data-caret-anchor", "");
-		anchor.style.position = "absolute";
-		anchor.style.top = "0";
-		anchor.style.left = "0";
-		anchor.style.width = "0";
-		anchor.style.height = "0";
-		anchor.style.pointerEvents = "none";
-		anchor.style.overflow = "hidden";
-		anchor.style.opacity = "0";
-		wrapper.appendChild(anchor);
-		anchorRef.current = anchor;
-		return () => {
-			anchor.remove();
-			anchorRef.current = null;
+	let t1;
+	let t2;
+	if ($[0] !== wrapperRef) {
+		t1 = () => {
+			const wrapper = wrapperRef.current;
+			if (!wrapper) return;
+			const anchor = document.createElement("span");
+			anchor.setAttribute("data-caret-anchor", "");
+			anchor.style.position = "absolute";
+			anchor.style.top = "0";
+			anchor.style.left = "0";
+			anchor.style.width = "0";
+			anchor.style.height = "0";
+			anchor.style.pointerEvents = "none";
+			anchor.style.overflow = "hidden";
+			anchor.style.opacity = "0";
+			wrapper.appendChild(anchor);
+			anchorRef.current = anchor;
+			return () => {
+				anchor.remove();
+				anchorRef.current = null;
+			};
 		};
-	}, [wrapperRef]);
-	useLayoutEffect(() => {
-		const anchor = anchorRef.current;
-		const wrapper = wrapperRef.current;
-		const input = inputRef.current;
-		if (!anchor || !wrapper || !input) return;
-		if (!isActive) {
-			anchor.style.transform = "translate(0px, 0px)";
-			return;
-		}
-		const rect = getCaretRect(input, caret);
-		if (!rect) return;
-		const wrapperRect = wrapper.getBoundingClientRect();
-		const x = rect.left - wrapperRect.left;
-		const y = rect.top - wrapperRect.top;
-		anchor.style.transform = `translate(${x}px, ${y}px)`;
-		anchor.style.height = `${rect.height}px`;
-		positionApiRef.current?.updatePosition();
-	}, [
-		caret,
-		value,
-		isActive,
-		inputRef,
-		wrapperRef
-	]);
-	return {
-		anchorRef,
-		positionApiRef
-	};
+		t2 = [wrapperRef];
+		$[0] = wrapperRef;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	useEffect(t1, t2);
+	let t3;
+	if ($[3] !== caret || $[4] !== inputRef || $[5] !== isActive || $[6] !== wrapperRef) {
+		t3 = () => {
+			const anchor_0 = anchorRef.current;
+			const wrapper_0 = wrapperRef.current;
+			const input = inputRef.current;
+			if (!anchor_0 || !wrapper_0 || !input) return;
+			if (!isActive) {
+				anchor_0.style.transform = "translate(0px, 0px)";
+				return;
+			}
+			const rect = getCaretRect(input, caret);
+			if (!rect) return;
+			const wrapperRect = wrapper_0.getBoundingClientRect();
+			const x = rect.left - wrapperRect.left;
+			const y = rect.top - wrapperRect.top;
+			anchor_0.style.transform = `translate(${x}px, ${y}px)`;
+			anchor_0.style.height = `${rect.height}px`;
+			positionApiRef.current?.updatePosition();
+		};
+		$[3] = caret;
+		$[4] = inputRef;
+		$[5] = isActive;
+		$[6] = wrapperRef;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== caret || $[9] !== inputRef || $[10] !== isActive || $[11] !== value || $[12] !== wrapperRef) {
+		t4 = [
+			caret,
+			value,
+			isActive,
+			inputRef,
+			wrapperRef
+		];
+		$[8] = caret;
+		$[9] = inputRef;
+		$[10] = isActive;
+		$[11] = value;
+		$[12] = wrapperRef;
+		$[13] = t4;
+	} else t4 = $[13];
+	useLayoutEffect(t3, t4);
+	let t5;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = {
+			anchorRef,
+			positionApiRef
+		};
+		$[14] = t5;
+	} else t5 = $[14];
+	return t5;
 }
 
 //#endregion

package/dist/components/fields/CommandTextArea/useCaretAnchor.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCaretAnchor.js","names":[],"sources":["../../../../src/components/fields/CommandTextArea/useCaretAnchor.ts"],"sourcesContent":["import { RefObject, useEffect, useLayoutEffect, useRef } from 'react';\n\nimport { CaretRect, getCaretRect } from './caretPosition';\n\nexport interface CaretAnchorApi {\n  updatePosition: () => void;\n}\n\nexport interface UseCaretAnchorOptions {\n  inputRef: RefObject<HTMLTextAreaElement>;\n  wrapperRef: RefObject<HTMLElement>;\n  caret: number;\n  value: string;\n  isActive: boolean;\n}\n\nexport interface UseCaretAnchorResult {\n  /** A real (zero-size) element positioned at the caret; used as the popover's\n   * geometric anchor. `null` until the wrapper mounts. */\n  anchorRef: RefObject<HTMLElement | null>;\n  /** Imperative handle to force the popover to re-position. */\n  positionApiRef: RefObject<CaretAnchorApi | null>;\n}\n\n/**\n * Keeps a zero-size \"caret anchor\" element positioned at the textarea's caret\n * (both axes), inside the (position: relative) input wrapper. The anchor is a\n * real DOM node so react-aria's `useOverlayPosition` can measure it with\n * `getBoundingClientRect`, while interaction/outside-click stays on the\n * wrapper via a separate `triggerRef`.\n */\nexport function useCaretAnchor({\n  inputRef,\n  wrapperRef,\n  caret,\n  value,\n  isActive,\n}: UseCaretAnchorOptions): UseCaretAnchorResult {\n  const anchorRef = useRef<HTMLElement | null>(null);\n  const positionApiRef = useRef<CaretAnchorApi | null>(null);\n\n  // Lazily create the anchor element inside the wrapper and clean it up on\n  // unmount. It is not managed by React so the shared TextInputBase structure\n  // stays untouched.\n  useEffect(() => {\n    const wrapper = wrapperRef.current;\n    if (!wrapper) return;\n\n    const anchor = document.createElement('span');\n    anchor.setAttribute('data-caret-anchor', '');\n    anchor.style.position = 'absolute';\n    anchor.style.top = '0';\n    anchor.style.left = '0';\n    anchor.style.width = '0';\n    anchor.style.height = '0';\n    anchor.style.pointerEvents = 'none';\n    // Off the flow so it never affects layout or a11y.\n    anchor.style.overflow = 'hidden';\n    anchor.style.opacity = '0';\n    wrapper.appendChild(anchor);\n    anchorRef.current = anchor;\n\n    return () => {\n      anchor.remove();\n      anchorRef.current = null;\n    };\n  }, [wrapperRef]);\n\n  // Position the anchor at the caret whenever the caret/value/active state\n  // changes, then nudge the popover to re-anchor.\n  useLayoutEffect(() => {\n    const anchor = anchorRef.current;\n    const wrapper = wrapperRef.current;\n    const input = inputRef.current;\n    if (!anchor || !wrapper || !input) return;\n\n    if (!isActive) {\n      // Reset to the wrapper's origin when not active so a stale position is\n      // never measured if the popover reopens without a caret move.\n      anchor.style.transform = 'translate(0px, 0px)';\n      return;\n    }\n\n    const rect = getCaretRect(input, caret);\n    if (!rect) return;\n\n    const wrapperRect = wrapper.getBoundingClientRect();\n    // Position relative to the wrapper's border-box (it's position: relative).\n    const x = rect.left - wrapperRect.left;\n    const y = rect.top - wrapperRect.top;\n    anchor.style.transform = `translate(${x}px, ${y}px)`;\n    // Give it a real height so cross-axis centering uses the caret line.\n    anchor.style.height = `${rect.height}px`;\n\n    positionApiRef.current?.updatePosition();\n  }, [caret, value, isActive, inputRef, wrapperRef]);\n\n  return { anchorRef, positionApiRef };\n}\n"],"mappings":";;;;;;;;;;;;AA+BA,SAAgB,eAAe,EAC7B,UACA,YACA,OACA,OACA,YAC8C;CAC9C,MAAM,YAAY,OAA2B,KAAK;CAClD,MAAM,iBAAiB,OAA8B,KAAK;AAK1D,iBAAgB;EACd,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,QAAS;EAEd,MAAM,SAAS,SAAS,cAAc,OAAO;AAC7C,SAAO,aAAa,qBAAqB,GAAG;AAC5C,SAAO,MAAM,WAAW;AACxB,SAAO,MAAM,MAAM;AACnB,SAAO,MAAM,OAAO;AACpB,SAAO,MAAM,QAAQ;AACrB,SAAO,MAAM,SAAS;AACtB,SAAO,MAAM,gBAAgB;AAE7B,SAAO,MAAM,WAAW;AACxB,SAAO,MAAM,UAAU;AACvB,UAAQ,YAAY,OAAO;AAC3B,YAAU,UAAU;AAEpB,eAAa;AACX,UAAO,QAAQ;AACf,aAAU,UAAU;;IAErB,CAAC,WAAW,CAAC;AAIhB,uBAAsB;EACpB,MAAM,SAAS,UAAU;EACzB,MAAM,UAAU,WAAW;EAC3B,MAAM,QAAQ,SAAS;AACvB,MAAI,CAAC,UAAU,CAAC,WAAW,CAAC,MAAO;AAEnC,MAAI,CAAC,UAAU;AAGb,UAAO,MAAM,YAAY;AACzB;;EAGF,MAAM,OAAO,aAAa,OAAO,MAAM;AACvC,MAAI,CAAC,KAAM;EAEX,MAAM,cAAc,QAAQ,uBAAuB;EAEnD,MAAM,IAAI,KAAK,OAAO,YAAY;EAClC,MAAM,IAAI,KAAK,MAAM,YAAY;AACjC,SAAO,MAAM,YAAY,aAAa,EAAE,MAAM,EAAE;AAEhD,SAAO,MAAM,SAAS,GAAG,KAAK,OAAO;AAErC,iBAAe,SAAS,gBAAgB;IACvC;EAAC;EAAO;EAAO;EAAU;EAAU;EAAW,CAAC;AAElD,QAAO;EAAE;EAAW;EAAgB"}
+{"version":3,"file":"useCaretAnchor.js","names":["RefObject","useEffect","useLayoutEffect","useRef","CaretRect","getCaretRect","CaretAnchorApi","updatePosition","UseCaretAnchorOptions","inputRef","HTMLTextAreaElement","wrapperRef","HTMLElement","caret","value","isActive","UseCaretAnchorResult","anchorRef","positionApiRef","useCaretAnchor","t0","$","_c","t1","t2","wrapper","current","anchor","document","createElement","setAttribute","style","position","top","left","width","height","pointerEvents","overflow","opacity","appendChild","remove","t3","anchor_0","wrapper_0","input","transform","rect","wrapperRect","getBoundingClientRect","x","y","t4","t5","Symbol","for"],"sources":["../../../../src/components/fields/CommandTextArea/useCaretAnchor.ts"],"sourcesContent":["import { RefObject, useEffect, useLayoutEffect, useRef } from 'react';\n\nimport { CaretRect, getCaretRect } from './caretPosition';\n\nexport interface CaretAnchorApi {\n  updatePosition: () => void;\n}\n\nexport interface UseCaretAnchorOptions {\n  inputRef: RefObject<HTMLTextAreaElement>;\n  wrapperRef: RefObject<HTMLElement>;\n  caret: number;\n  value: string;\n  isActive: boolean;\n}\n\nexport interface UseCaretAnchorResult {\n  /** A real (zero-size) element positioned at the caret; used as the popover's\n   * geometric anchor. `null` until the wrapper mounts. */\n  anchorRef: RefObject<HTMLElement | null>;\n  /** Imperative handle to force the popover to re-position. */\n  positionApiRef: RefObject<CaretAnchorApi | null>;\n}\n\n/**\n * Keeps a zero-size \"caret anchor\" element positioned at the textarea's caret\n * (both axes), inside the (position: relative) input wrapper. The anchor is a\n * real DOM node so react-aria's `useOverlayPosition` can measure it with\n * `getBoundingClientRect`, while interaction/outside-click stays on the\n * wrapper via a separate `triggerRef`.\n */\nexport function useCaretAnchor({\n  inputRef,\n  wrapperRef,\n  caret,\n  value,\n  isActive,\n}: UseCaretAnchorOptions): UseCaretAnchorResult {\n  const anchorRef = useRef<HTMLElement | null>(null);\n  const positionApiRef = useRef<CaretAnchorApi | null>(null);\n\n  // Lazily create the anchor element inside the wrapper and clean it up on\n  // unmount. It is not managed by React so the shared TextInputBase structure\n  // stays untouched.\n  useEffect(() => {\n    const wrapper = wrapperRef.current;\n    if (!wrapper) return;\n\n    const anchor = document.createElement('span');\n    anchor.setAttribute('data-caret-anchor', '');\n    anchor.style.position = 'absolute';\n    anchor.style.top = '0';\n    anchor.style.left = '0';\n    anchor.style.width = '0';\n    anchor.style.height = '0';\n    anchor.style.pointerEvents = 'none';\n    // Off the flow so it never affects layout or a11y.\n    anchor.style.overflow = 'hidden';\n    anchor.style.opacity = '0';\n    wrapper.appendChild(anchor);\n    anchorRef.current = anchor;\n\n    return () => {\n      anchor.remove();\n      anchorRef.current = null;\n    };\n  }, [wrapperRef]);\n\n  // Position the anchor at the caret whenever the caret/value/active state\n  // changes, then nudge the popover to re-anchor.\n  useLayoutEffect(() => {\n    const anchor = anchorRef.current;\n    const wrapper = wrapperRef.current;\n    const input = inputRef.current;\n    if (!anchor || !wrapper || !input) return;\n\n    if (!isActive) {\n      // Reset to the wrapper's origin when not active so a stale position is\n      // never measured if the popover reopens without a caret move.\n      anchor.style.transform = 'translate(0px, 0px)';\n      return;\n    }\n\n    const rect = getCaretRect(input, caret);\n    if (!rect) return;\n\n    const wrapperRect = wrapper.getBoundingClientRect();\n    // Position relative to the wrapper's border-box (it's position: relative).\n    const x = rect.left - wrapperRect.left;\n    const y = rect.top - wrapperRect.top;\n    anchor.style.transform = `translate(${x}px, ${y}px)`;\n    // Give it a real height so cross-axis centering uses the caret line.\n    anchor.style.height = `${rect.height}px`;\n\n    positionApiRef.current?.updatePosition();\n  }, [caret, value, isActive, inputRef, wrapperRef]);\n\n  return { anchorRef, positionApiRef };\n}\n"],"mappings":";;;;;;;;;;;;;AA+BA,SAAOmB,eAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAwB,MAAA,EAAAb,UAAAE,YAAAE,OAAAC,OAAAC,aAAAK;CAO7B,MAAAH,YAAkBd,OAA2B,KAAK;CAClD,MAAAe,iBAAuBf,OAA8B,KAAK;CAAC,IAAAoB;CAAA,IAAAC;AAAA,KAAAH,EAAA,OAAAV,YAAA;AAKjDY,aAAA;GACR,MAAAE,UAAgBd,WAAUe;AAC1B,OAAI,CAACD,QAAO;GAEZ,MAAAE,SAAeC,SAAQC,cAAe,OAAO;AAC7CF,UAAMG,aAAc,qBAAqB,GAAG;AAC5CH,UAAMI,MAAMC,WAAY;AACxBL,UAAMI,MAAME,MAAO;AACnBN,UAAMI,MAAMG,OAAQ;AACpBP,UAAMI,MAAMI,QAAS;AACrBR,UAAMI,MAAMK,SAAU;AACtBT,UAAMI,MAAMM,gBAAiB;AAE7BV,UAAMI,MAAMO,WAAY;AACxBX,UAAMI,MAAMQ,UAAW;AACvBd,WAAOe,YAAab,OAAO;AAC3BV,aAASS,UAAWC;AAAH,gBAEV;AACLA,WAAMc,QAAS;AACfxB,cAASS,UAAW;;;AAErBF,OAAA,CAACb,WAAW;AAAAU,IAAA,KAAAV;AAAAU,IAAA,KAAAE;AAAAF,IAAA,KAAAG;QAAA;AAAAD,OAAAF,EAAA;AAAAG,OAAAH,EAAA;;AAtBfpB,WAAUsB,IAsBPC,GAAa;CAAA,IAAAkB;AAAA,KAAArB,EAAA,OAAAR,SAAAQ,EAAA,OAAAZ,YAAAY,EAAA,OAAAN,YAAAM,EAAA,OAAAV,YAAA;AAIA+B,aAAA;GACd,MAAAC,WAAe1B,UAASS;GACxB,MAAAkB,YAAgBjC,WAAUe;GAC1B,MAAAmB,QAAcpC,SAAQiB;AACtB,OAAI,CAACC,YAAD,CAAYF,aAAZ,CAAwBoB,MAAK;AAEjC,OAAI,CAAC9B,UAAQ;AAGXY,aAAMI,MAAMe,YAAa;AAAH;;GAIxB,MAAAC,OAAa1C,aAAawC,OAAOhC,MAAM;AACvC,OAAI,CAACkC,KAAI;GAET,MAAAC,cAAoBvB,UAAOwB,uBAAwB;GAEnD,MAAAC,IAAUH,KAAIb,OAAQc,YAAWd;GACjC,MAAAiB,IAAUJ,KAAId,MAAOe,YAAWf;AAChCN,YAAMI,MAAMe,YAAa,aAAaI,EAAC,MAAOC,EAAC;AAE/CxB,YAAMI,MAAMK,SAAU,GAAGW,KAAIX,OAAO;AAEpClB,kBAAcQ,SAAwBnB,gBAAE;;AACzCc,IAAA,KAAAR;AAAAQ,IAAA,KAAAZ;AAAAY,IAAA,KAAAN;AAAAM,IAAA,KAAAV;AAAAU,IAAA,KAAAqB;OAAAA,MAAArB,EAAA;CAAA,IAAA+B;AAAA,KAAA/B,EAAA,OAAAR,SAAAQ,EAAA,OAAAZ,YAAAY,EAAA,QAAAN,YAAAM,EAAA,QAAAP,SAAAO,EAAA,QAAAV,YAAA;AAAEyC,OAAA;GAACvC;GAAOC;GAAOC;GAAUN;GAAUE;GAAW;AAAAU,IAAA,KAAAR;AAAAQ,IAAA,KAAAZ;AAAAY,IAAA,MAAAN;AAAAM,IAAA,MAAAP;AAAAO,IAAA,MAAAV;AAAAU,IAAA,MAAA+B;OAAAA,MAAA/B,EAAA;AAzBjDnB,iBAAgBwC,IAyBbU,GAA+C;CAAA,IAAAC;AAAA,KAAAhC,EAAA,QAAAiC,OAAAC,IAAA,4BAAA,EAAA;AAE3CF,OAAA;GAAApC;GAAAC;GAA6B;AAAAG,IAAA,MAAAgC;OAAAA,MAAAhC,EAAA;AAAA,QAA7BgC"}

package/dist/components/fields/DatePicker/DateInput.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 { useFieldProps } from "../../form/Form/use-field/use-field-props.js";

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

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","names":["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 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  props: CubeDateInputProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useFieldProps(props, {\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,SAAS,UACP,OACA,KACA;AACA,SAAQ,cAAc,OAAO;EAC3B,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GAC1C,OAAO,OAAO,UAAU,WAAW,kBAAkB,MAAM,GAAG;GAC9D;GACD;EACF,CAAC;AACF,SAAQ,OAAO,OAAO,EAAE,EAAE,oBAAoB,MAAM;CAEpD,IAAI,EACF,IACA,WACA,YACA,aACA,eACA,YACA,YACA,SACA,OAAO,UACP,WAAW,kBACT;AAES,eAAc,OAAO,kBAAkB,cAAc;CAElE,IAAI,SAAS,mBAAmB,IAAI;CACpC,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,IAAI,WAAW,OAAO,KAAK;CAC3B,IAAI,EAAE,YAAY,eAAe,aAAa,OAAO,OAAO,SAAS;AA6BrE,QAAO,cA1BL,oBAACA;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACJ;EACM;EACA;EACD;EACX,WAAW,MAAM;EACR;EACT,QAAQ;EACK;YAEZ,MAAM,SAAS,KAAK,SAAS,MAC5B,oBAAC;GAEU;GACF;GACK;GACA;GACA;KALP,EAML,CACF;GACY,EAGc,QAAQ;EACtC,GAAG;EACH,YAAYC,aAAW,MAAM,YAAY,WAAW;EACrD,CAAC;;;;;;AAOJ,MAAM,aAAa,WAAW,UAAU;AAIxC,AAAC,WAAmB,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","props","ref","HTMLElement","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  props: CubeDateInputProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useFieldProps(props, {\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,OACAC,KACA;AACAD,SAAQlB,cAAckB,OAAO;EAC3BG,0BAA0B;EAC1BC,mBAAmB,EAAEC,OAAOC,gBAAgB;GAC1CD,OAAO,OAAOA,UAAU,WAAWnB,kBAAkBmB,MAAM,GAAGA;GAC9DC;GACD;EACF,CAAC;AACFN,SAAQO,OAAOC,OAAO,EAAE,EAAErB,oBAAoBa,MAAM;CAEpD,IAAI,EACFS,IACAC,WACAC,YACAf,aACAD,eACAiB,YACAC,YACAC,SACAhB,OAAO,UACPrB,WAAWsC,kBACTf;AAESnB,eAAcmB,OAAO/B,kBAAkB0B,cAAc;CAElE,IAAIqB,SAAS3B,mBAAmBY,IAAI;CACpC,IAAI,EAAEgB,WAAWxC,WAAW;CAC5B,IAAIyC,QAAQxC,kBAAkB;EAC5B,GAAGsB;EACHiB,QAAQF,gBAAgBE,SAAS;EACjCnD;EACD,CAAC;AAEF,KAAIiD,iBAAiB,KACnBG,OAAMC,WAAW/B,eAAe8B,MAAMC,SAAS;CAGjD,IAAIC,WAAW/C,OAAO,KAAK;CAC3B,IAAI,EAAEgD,YAAYC,eAAe9C,aAAawB,OAAOkB,OAAOE,SAAS;AA6BrE,QAAOrC,cA1BL,oBAAC;EACC,KAAKqC;EACL,IAAIX,MAAM;EACV,WAAU;EACJX;EACMwB;EACAX;EACDD;EACX,WAAWQ,MAAMM;EACRV;EACT,QAAQnB;EACKC;YAEZsB,MAAMC,SAASM,KAAKC,SAASC,MAC5B,oBAAC;GAEUD;GACFR;GACKP;GACAC;GACAC;KALPc,EAOR,CAAC;GAEL,EAE+BX,QAAQ;EACtC,GAAGhB;EACHqB,YAAYzC,aAAWoB,MAAMqB,YAAYA,WAAU;EACpD,CAAC;;;;;;AAOJ,MAAMO,aAAaxD,WAAW2B,UAAU;AAIxC,AAAC6B,WAAmBC,cAAc"}

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

@@ -1,9 +1,10 @@
-/** @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 { getValidationMods } from "../../form/validation/resolve-validation-props.js";
 import { ValidationIndicator, hasValidationIndicator } from "../../form/validation/ValidationIndicator.js";
 import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES } from "../TextInput/TextInputBase.js";
+import { c } from "react-compiler-runtime";
 import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
 import React, { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -34,54 +35,148 @@ const DateInputElement = tasty({
 	}
 });
 function DateInputBase(props, ref) {
-	let inputRef = useRef(null);
-	let { qa, inputType, isDisabled, inputStyles, children, fieldProps, style, disableFocusRing, autoFocus, isInvalid, isValid, isLoading, size = "medium", suffix } = props;
-	let styles = extractStyles(props, CONTAINER_STYLES);
-	let { focusProps, isFocused } = useFocusRing({
-		isTextInput: true,
-		within: true,
-		autoFocus
-	});
-	const showValidationIndicator = hasValidationIndicator({
-		isInvalid,
-		isValid,
-		isLoading
-	});
-	return /* @__PURE__ */ jsxs(DateInputWrapperElement, {
-		qa: qa || "DateTimeInput",
-		styles,
-		"data-size": size,
-		"data-input-type": inputType ? inputType : "datetimeinput",
-		mods: {
+	const $ = c(44);
+	const inputRef = useRef(null);
+	const { qa, inputType, isDisabled, inputStyles, children, fieldProps, style, disableFocusRing, autoFocus, isInvalid, isValid, isLoading, size: t0, suffix } = props;
+	const size = t0 === void 0 ? "medium" : t0;
+	let t1;
+	if ($[0] !== props) {
+		t1 = extractStyles(props, CONTAINER_STYLES);
+		$[0] = props;
+		$[1] = t1;
+	} else t1 = $[1];
+	const styles = t1;
+	let t2;
+	if ($[2] !== autoFocus) {
+		t2 = {
+			isTextInput: true,
+			within: true,
+			autoFocus
+		};
+		$[2] = autoFocus;
+		$[3] = t2;
+	} else t2 = $[3];
+	const { focusProps, isFocused } = useFocusRing(t2);
+	let t3;
+	if ($[4] !== isInvalid || $[5] !== isLoading || $[6] !== isValid) {
+		t3 = hasValidationIndicator({
+			isInvalid,
+			isValid,
+			isLoading
+		});
+		$[4] = isInvalid;
+		$[5] = isLoading;
+		$[6] = isValid;
+		$[7] = t3;
+	} else t3 = $[7];
+	const showValidationIndicator = t3;
+	const t4 = qa || "DateTimeInput";
+	const t5 = inputType ? inputType : "datetimeinput";
+	const t6 = isFocused && !disableFocusRing;
+	let t7;
+	if ($[8] !== isInvalid || $[9] !== isValid) {
+		t7 = getValidationMods({
+			isInvalid,
+			isValid
+		});
+		$[8] = isInvalid;
+		$[9] = isValid;
+		$[10] = t7;
+	} else t7 = $[10];
+	const t8 = showValidationIndicator || !!suffix;
+	let t9;
+	if ($[11] !== isDisabled || $[12] !== t6 || $[13] !== t7 || $[14] !== t8) {
+		t9 = {
 			disabled: isDisabled,
-			focused: isFocused && !disableFocusRing,
-			...getValidationMods({
-				isInvalid,
-				isValid
-			}),
-			suffix: showValidationIndicator || !!suffix
-		},
-		...mergeProps$1(fieldProps ?? {}, focusProps),
-		style,
-		children: [/* @__PURE__ */ jsx("div", {
+			focused: t6,
+			...t7,
+			suffix: t8
+		};
+		$[11] = isDisabled;
+		$[12] = t6;
+		$[13] = t7;
+		$[14] = t8;
+		$[15] = t9;
+	} else t9 = $[15];
+	let t10;
+	if ($[16] !== fieldProps) {
+		t10 = fieldProps ?? {};
+		$[16] = fieldProps;
+		$[17] = t10;
+	} else t10 = $[17];
+	let t11;
+	if ($[18] !== focusProps || $[19] !== t10) {
+		t11 = mergeProps$1(t10, focusProps);
+		$[18] = focusProps;
+		$[19] = t10;
+		$[20] = t11;
+	} else t11 = $[20];
+	let t12;
+	if ($[21] !== ref) {
+		t12 = mergeRefs(ref, inputRef);
+		$[21] = ref;
+		$[22] = t12;
+	} else t12 = $[22];
+	let t13;
+	if ($[23] !== children || $[24] !== inputStyles || $[25] !== size || $[26] !== t12) {
+		t13 = /* @__PURE__ */ jsx("div", {
 			"data-element": "Contents",
 			role: "presentation",
 			children: /* @__PURE__ */ jsx(DateInputElement, {
-				ref: mergeRefs(ref, inputRef),
+				ref: t12,
 				"data-size": size,
 				role: "presentation",
 				styles: inputStyles,
 				children
 			})
-		}), showValidationIndicator || suffix ? /* @__PURE__ */ jsxs("div", {
+		});
+		$[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", {
 			"data-element": "Suffix",
 			children: [/* @__PURE__ */ jsx(ValidationIndicator, {
 				isInvalid,
 				isValid,
 				isLoading
 			}), suffix]
-		}) : null]
-	});
+		}) : 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, {
+			qa: t4,
+			styles,
+			"data-size": size,
+			"data-input-type": t5,
+			mods: t9,
+			...t11,
+			style,
+			children: [t13, t14]
+		});
+		$[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;
 }
 const _DateInputBase = React.forwardRef(DateInputBase);
 _DateInputBase.displayName = "DateInputBase";

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

@@ -1 +1 @@
-{"version":3,"file":"DateInputBase.js","names":["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    ...INPUT_WRAPPER_STYLES,\n    display: 'flex',\n  },\n});\n\nconst DateInputElement = tasty({\n  role: 'presentation',\n  styles: {\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":";;;;;;;;;;;;;AAwBA,MAAM,0BAA0B,MAAM;CACpC,IAAI;CACJ,MAAM;CACN,QAAQ;EACN,GAAG;EACH,SAAS;EACV;CACF,CAAC;AAEF,MAAM,mBAAmB,MAAM;CAC7B,MAAM;CACN,QAAQ;EACN,GAAG;EACH,QAAQ;GACN,IAAI;GACJ,cAAc;GACd,cAAc;GACf;EACD,SAAS;EACT,MAAM;EACN,YAAY;EACb;CACF,CAAC;AAoBF,SAAS,cAAc,OAA+B,KAAK;CACzD,IAAI,WAAW,OAAO,KAAK;CAC3B,IAAI,EACF,IACA,WACA,YACA,aACA,UACA,YACA,OACA,kBACA,WACA,WACA,SACA,WACA,OAAO,UACP,WACE;CAEJ,IAAI,SAAS,cAAc,OAAO,iBAAiB;CAEnD,IAAI,EAAE,YAAY,cAAc,aAAa;EAC3C,aAAa;EACb,QAAQ;EACR;EACD,CAAC;CAEF,MAAM,0BAA0B,uBAAuB;EACrD;EACA;EACA;EACD,CAAC;AAEF,QACE,qBAAC;EACC,IAAI,MAAM;EACF;EACR,aAAW;EACX,mBAAiB,YAAY,YAAY;EACzC,MAAM;GACJ,UAAU;GACV,SAAS,aAAa,CAAC;GACvB,GAAG,kBAAkB;IAAE;IAAW;IAAS,CAAC;GAC5C,QAAQ,2BAA2B,CAAC,CAAC;GACtC;EACD,GAAIA,aAAW,cAAc,EAAE,EAAE,WAAW;EACrC;aAEP,oBAAC;GAAI,gBAAa;GAAW,MAAK;aAChC,oBAAC;IACC,KAAK,UAAU,KAAK,SAAS;IAC7B,aAAW;IACX,MAAK;IACL,QAAQ;IAEP;KACgB;IACf,EACL,2BAA2B,SAC1B,qBAAC;GAAI,gBAAa;cAChB,oBAAC;IACY;IACF;IACE;KACX,EACD;IACG,GACJ;GACoB;;AAI9B,MAAM,iBAAiB,MAAM,WAAW,cAAc;AAEtD,eAAe,cAAc"}
+{"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    ...INPUT_WRAPPER_STYLES,\n    display: 'flex',\n  },\n});\n\nconst DateInputElement = tasty({\n  role: 'presentation',\n  styles: {\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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"}