@cube-dev/ui-kit 0.201.0 → 0.203.0

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

@@ -1 +1 @@
-{"version":3,"file":"TimeInput.js","names":["FocusableRef","BaseProps","CONTAINER_STYLES","ContainerStyleProps","Styles","forwardRef","useRef","AriaTimeFieldProps","DateValue","TimeValue","useTimeField","useTimeFieldState","FieldBaseProps","mergeProps","extractStyles","useFieldProps","wrapWithField","DateInputBase","DatePickerSegment","DEFAULT_TIME_PROPS","Granularity","useFocusManagerRef","CubeTimeInputProps","Omit","wrapperStyles","inputStyles","styles","size","value","minValue","maxValue","isDateUnavailable","date","placeholderValue","hourCycle","granularity","hideTimeZone","onChange","TimeInput","rawProps","ref","$","_c","t0","Symbol","for","defaultValidationTrigger","props","Object","assign","qa","autoFocus","isDisabled","isReadOnly","isRequired","isInvalid","isValid","t1","labelProps","userLabelProps","undefined","domRef","timeProps","state","locale","fieldRef","fieldProps","timeInput","segments","map","segment","i","_TimeInput","displayName","_c","DateInputBase","mergeProps"],"sources":["../../../../src/components/fields/DatePicker/TimeInput.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport {\n  AriaTimeFieldProps,\n  DateValue,\n  TimeValue,\n  useTimeField,\n} from 'react-aria';\nimport { useTimeFieldState } from 'react-stately';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, wrapWithField } from '../../form';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerSegment } from './DatePickerSegment';\nimport { DEFAULT_TIME_PROPS } from './props';\nimport { Granularity } from './types';\nimport { useFocusManagerRef } from './utils';\n\nexport interface CubeTimeInputProps<T extends TimeValue = TimeValue>\n  extends\n    Omit<\n      AriaTimeFieldProps<TimeValue>,\n      'errorMessage' | 'form' | 'name' | 'value' | 'onChange' | 'granularity'\n    >,\n    BaseProps,\n    ContainerStyleProps,\n    FieldBaseProps<TimeValue | null | undefined> {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  value?: TimeValue | null;\n  /** The minimum allowed date that a user may select. */\n  minValue?: TimeValue;\n  /** The maximum allowed date that a user may select. */\n  maxValue?: TimeValue;\n  /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */\n  isDateUnavailable?: (date: DateValue) => boolean;\n  /** A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight. */\n  placeholderValue?: TimeValue;\n  /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */\n  hourCycle?: 12 | 24;\n  /** Determines the smallest unit that is displayed in the date picker. By default, this is `\"day\"` for dates, and `\"minute\"` for times. */\n  granularity?: Granularity;\n  /**\n   * Whether to hide the time zone abbreviation.\n   * @default false\n   */\n  hideTimeZone?: boolean;\n  onChange?: (value: TimeValue) => void;\n}\n\nfunction TimeInput<T extends TimeValue>(\n  rawProps: CubeTimeInputProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  let props = useFieldProps(rawProps, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_TIME_PROPS, props);\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let {\n    qa,\n    inputStyles,\n    wrapperStyles,\n    autoFocus,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    isInvalid,\n    isValid,\n    size = 'medium',\n    labelProps: userLabelProps,\n  } = props;\n\n  let domRef = useRef<HTMLDivElement>(null);\n\n  useFocusManagerRef(ref, domRef);\n  let timeProps = {\n    ...props,\n    granularity: props.granularity === 'day' ? undefined : props.granularity,\n    // Aria clears with null; retain the kit's legacy nonnullable callback\n    // declaration while forwarding exactly the same values as before.\n    onChange: props.onChange as AriaTimeFieldProps<TimeValue>['onChange'],\n  };\n  let state = useTimeFieldState({ ...timeProps, locale: 'en-US' });\n\n  let fieldRef = useRef(null);\n  let { labelProps, fieldProps } = useTimeField(timeProps, state, fieldRef);\n\n  const timeInput = (\n    <DateInputBase\n      ref={fieldRef}\n      wrapperRef={domRef}\n      qa={qa || 'TimeInput'}\n      inputType=\"timeinput\"\n      size={size}\n      fieldProps={fieldProps}\n      isDisabled={isDisabled}\n      autoFocus={autoFocus}\n      inputStyles={inputStyles}\n      styles={wrapperStyles}\n      isInvalid={isInvalid}\n      isValid={isValid}\n    >\n      {state.segments.map((segment, i) => (\n        <DatePickerSegment\n          key={i}\n          segment={segment}\n          state={state}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isRequired={isRequired}\n        />\n      ))}\n    </DateInputBase>\n  );\n\n  return wrapWithField(timeInput, {\n    ...props,\n    labelProps: mergeProps(labelProps, userLabelProps),\n  });\n}\n\n/**\n * TimeFields allow users to enter and edit time values using a keyboard.\n * Each part of the time is displayed in an individually editable segment.\n */\nconst _TimeInput = forwardRef(TimeInput);\n\n_TimeInput.displayName = 'TimeInput';\n\nexport { _TimeInput as TimeInput };\n"],"mappings":";;;;;;;;;;;;;;;;AA6DA,SAAAsC,UAAAC,UAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAG,OAAAC,IAAA,2BAAA,GAAA;EAIsCF,KAAA,EAAAG,0BACR,SAC5B;EAACL,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAFD,IAAAM,QAAYhC,cAAcwB,UAAUI,EAEnC;CACDI,QAAQC,OAAMC,OAAQ,CAAC,GAAG9B,oBAAoB4B,KAAK;CAEtCjC,cAAciC,OAAO7C,gBAAgB;CAElD,MAAA,EAAAgD,IAAAzB,aAAAD,eAAA2B,WAAAC,YAAAC,YAAAC,YAAAC,WAAAC,SAAA7B,MAAA8B,IAAAC,YAAAC,mBAYIZ;CAFF,MAAApB,OAAA8B,OAAAG,KAAAA,IAAA,WAAAH;CAIF,MAAAI,SAAavD,OAAuB,IAAI;CAExCe,mBAAmBmB,KAAKqB,MAAM;CAC9B,MAAAC,YAAgB;EAAA,GACXf;EAAKZ,aACKY,MAAKZ,gBAAiB,QAAtByB,KAAAA,IAA0Cb,MAAKZ;EAAYE,UAG9DU,MAAKV;CACjB;CACA,MAAA0B,QAAYpD,kBAAkB;EAAA,GAAKmD;EAASE,QAAU;CAAQ,CAAC;CAE/D,MAAAC,WAAe3D,OAAO,IAAI;CAC1B,MAAA,EAAAoD,YAAAQ,eAAiCxD,aAAaoD,WAAWC,OAAOE,QAAQ;CAExE,MAAAE,YACE,oBAACQ,gBAAD;EACOV,KAAAA;EACOJ,YAAAA;EACR,IAAAX,MAAA;EACM,WAAA;EACJvB;EACMuC;EACAd;EACDD;EACE1B;EACLD,QAAAA;EACG+B;EACFC;EAERO,UAAAA,MAAKK,SAASC,KAAKC,SAAAC,MAClB,oBAAC,mBAAD;GAEWD;GACFP;GACKX;GACAC;GACAC;EAAU,GALjBiB,CAKiB,CAEzB;CAvBW,CAAA;CAyBd,OAEKvD,cAAcmD,WAAW;EAAA,GAC3BpB;EAAKW,YACI7C,aAAW6C,YAAYC,cAAc;CACnD,CAAC;AAAC;;;;;AAOJ,MAAMa,aAAanE,WAAWiC,SAAS;AAEvCkC,WAAWC,cAAc"}
+{"version":3,"file":"TimeInput.js","names":["FocusableRef","BaseProps","Styles","forwardRef","useRef","AriaTimeFieldProps","DateValue","TimeValue","useTimeField","useTimeFieldState","FieldBaseProps","mergeProps","useFieldProps","wrapWithField","FieldLayoutStyleProps","splitFieldLayout","DateInputBase","DatePickerSegment","DEFAULT_TIME_PROPS","Granularity","useFocusManagerRef","CubeTimeInputProps","Omit","wrapperStyles","inputStyles","styles","size","value","minValue","maxValue","isDateUnavailable","date","placeholderValue","hourCycle","granularity","hideTimeZone","onChange","TimeInput","rawProps","ref","$","_c","t0","Symbol","for","defaultValidationTrigger","props","Object","assign","field","overStyles","qa","autoFocus","isDisabled","isReadOnly","isRequired","isInvalid","isValid","t1","labelProps","userLabelProps","undefined","domRef","timeProps","state","locale","fieldRef","fieldProps","timeInput","segments","map","segment","i","_TimeInput","displayName","_c","DateInputBase","mergeProps"],"sources":["../../../../src/components/fields/DatePicker/TimeInput.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { BaseProps, Styles } from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport {\n  AriaTimeFieldProps,\n  DateValue,\n  TimeValue,\n  useTimeField,\n} from 'react-aria';\nimport { useTimeFieldState } from 'react-stately';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport {\n  FieldLayoutStyleProps,\n  splitFieldLayout,\n} from '../../form/field-layout';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerSegment } from './DatePickerSegment';\nimport { DEFAULT_TIME_PROPS } from './props';\nimport { Granularity } from './types';\nimport { useFocusManagerRef } from './utils';\n\nexport interface CubeTimeInputProps<T extends TimeValue = TimeValue>\n  extends\n    Omit<\n      AriaTimeFieldProps<TimeValue>,\n      'errorMessage' | 'form' | 'name' | 'value' | 'onChange' | 'granularity'\n    >,\n    BaseProps,\n    FieldLayoutStyleProps,\n    FieldBaseProps<TimeValue | null | undefined> {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  value?: TimeValue | null;\n  /** The minimum allowed date that a user may select. */\n  minValue?: TimeValue;\n  /** The maximum allowed date that a user may select. */\n  maxValue?: TimeValue;\n  /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */\n  isDateUnavailable?: (date: DateValue) => boolean;\n  /** A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight. */\n  placeholderValue?: TimeValue;\n  /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */\n  hourCycle?: 12 | 24;\n  /** Determines the smallest unit that is displayed in the date picker. By default, this is `\"day\"` for dates, and `\"minute\"` for times. */\n  granularity?: Granularity;\n  /**\n   * Whether to hide the time zone abbreviation.\n   * @default false\n   */\n  hideTimeZone?: boolean;\n  onChange?: (value: TimeValue) => void;\n}\n\nfunction TimeInput<T extends TimeValue>(\n  rawProps: CubeTimeInputProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  let props = useFieldProps(rawProps, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_TIME_PROPS, props);\n\n  // `wrapperStyles` styles the same box as `styles` and wins over it.\n  const { styles, field } = splitFieldLayout(props, {\n    overStyles: props.wrapperStyles,\n  });\n\n  let {\n    qa,\n    inputStyles,\n    autoFocus,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    isInvalid,\n    isValid,\n    size = 'medium',\n    labelProps: userLabelProps,\n  } = props;\n\n  let domRef = useRef<HTMLDivElement>(null);\n\n  useFocusManagerRef(ref, domRef);\n  let timeProps = {\n    ...props,\n    granularity: props.granularity === 'day' ? undefined : props.granularity,\n    // Aria clears with null; retain the kit's legacy nonnullable callback\n    // declaration while forwarding exactly the same values as before.\n    onChange: props.onChange as AriaTimeFieldProps<TimeValue>['onChange'],\n  };\n  let state = useTimeFieldState({ ...timeProps, locale: 'en-US' });\n\n  let fieldRef = useRef(null);\n  let { labelProps, fieldProps } = useTimeField(timeProps, state, fieldRef);\n\n  const timeInput = (\n    <DateInputBase\n      ref={fieldRef}\n      wrapperRef={domRef}\n      qa={qa || 'TimeInput'}\n      inputType=\"timeinput\"\n      size={size}\n      fieldProps={fieldProps}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      autoFocus={autoFocus}\n      inputStyles={inputStyles}\n      styles={styles}\n      isInvalid={isInvalid}\n      isValid={isValid}\n    >\n      {state.segments.map((segment, i) => (\n        <DatePickerSegment\n          key={i}\n          segment={segment}\n          state={state}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isRequired={isRequired}\n        />\n      ))}\n    </DateInputBase>\n  );\n\n  return wrapWithField(timeInput, {\n    ...props,\n    ...field,\n    labelProps: mergeProps(labelProps, userLabelProps),\n  });\n}\n\n/**\n * TimeFields allow users to enter and edit time values using a keyboard.\n * Each part of the time is displayed in an individually editable segment.\n */\nconst _TimeInput = forwardRef(TimeInput);\n\n_TimeInput.displayName = 'TimeInput';\n\nexport { _TimeInput as TimeInput };\n"],"mappings":";;;;;;;;;;;;;;;AA2DA,SAAAqC,UAAAC,UAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAG,OAAAC,IAAA,2BAAA,GAAA;EAIsCF,KAAA,EAAAG,0BACR,SAC5B;EAACL,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAFD,IAAAM,QAAYlC,cAAc0B,UAAUI,EAEnC;CACDI,QAAQC,OAAMC,OAAQ,CAAC,GAAG9B,oBAAoB4B,KAAK;CAGnD,MAAA,EAAArB,QAAAwB,UAA0BlC,iBAAiB+B,OAAO,EAAAI,YACpCJ,MAAKvB,cACnB,CAAC;CAED,MAAA,EAAA4B,IAAA3B,aAAA4B,WAAAC,YAAAC,YAAAC,YAAAC,WAAAC,SAAA/B,MAAAgC,IAAAC,YAAAC,mBAWId;CAFF,MAAApB,OAAAgC,OAAAG,KAAAA,IAAA,WAAAH;CAIF,MAAAI,SAAa1D,OAAuB,IAAI;CAExCgB,mBAAmBmB,KAAKuB,MAAM;CAC9B,MAAAC,YAAgB;EAAA,GACXjB;EAAKZ,aACKY,MAAKZ,gBAAiB,QAAtB2B,KAAAA,IAA0Cf,MAAKZ;EAAYE,UAG9DU,MAAKV;CACjB;CACA,MAAA4B,QAAYvD,kBAAkB;EAAA,GAAKsD;EAASE,QAAU;CAAQ,CAAC;CAE/D,MAAAC,WAAe9D,OAAO,IAAI;CAC1B,MAAA,EAAAuD,YAAAQ,eAAiC3D,aAAauD,WAAWC,OAAOE,QAAQ;CAExE,MAAAE,YACE,oBAACQ,gBAAD;EACOV,KAAAA;EACOJ,YAAAA;EACR,IAAAX,MAAA;EACM,WAAA;EACJzB;EACMyC;EACAd;EACAC;EACDF;EACE5B;EACLC;EACG+B;EACFC;EAERO,UAAAA,MAAKK,SAASC,KAAKC,SAAAC,MAClB,oBAAC,mBAAD;GAEWD;GACFP;GACKX;GACAC;GACAC;EAAU,GALjBiB,CAKiB,CAEzB;CAxBW,CAAA;CA0Bd,OAEK3D,cAAcuD,WAAW;EAAA,GAC3BtB;EAAK,GACLG;EAAKU,YACIhD,aAAWgD,YAAYC,cAAc;CACnD,CAAC;AAAC;;;;;AAOJ,MAAMa,aAAatE,WAAWkC,SAAS;AAEvCoC,WAAWC,cAAc"}

package/dist/components/fields/DatePicker/WeekPicker.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 { PeriodPicker } from "./PeriodPicker.js";
 import { c } from "react/compiler-runtime";
 import { forwardRef } from "react";

package/dist/components/fields/DatePicker/YearPicker.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 { PeriodPicker } from "./PeriodPicker.js";
 import { c } from "react/compiler-runtime";
 import { forwardRef } from "react";

package/dist/components/fields/DatePicker/parseDate.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 { parseAbsolute } from "@internationalized/date";
 //#region src/components/fields/DatePicker/parseDate.ts
 const ZONELESS_ISO_DATE = /^\d{4}-\d{2}-\d{2}(?:[Tt ]\d{2}:\d{2}(?::\d{2}(?:\.\d+)?)?)?$/;

package/dist/components/fields/DatePicker/period.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 { CalendarDate, startOfMonth, startOfWeek, startOfYear, toCalendarDate } from "@internationalized/date";
 //#region src/components/fields/DatePicker/period.ts
 const MS_PER_DAY = 864e5;

package/dist/components/fields/DatePicker/props.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 */
 //#region src/components/fields/DatePicker/props.ts
 const DEFAULT_DATE_PROPS = {
 	granularity: "day",

package/dist/components/fields/DatePicker/utils.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 { useImperativeHandle } from "react";
 import { createDOMRef } from "@react-spectrum/utils";

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

@@ -2,11 +2,12 @@
 import { Props } from "../../../props.js";
 import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
-import { BaseProps, BlockStyleProps, ContainerStyleProps, PositionStyleProps, Styles } from "@tenphi/tasty";
+import { FieldLayoutStyleProps } from "../../form/field-layout.js";
+import { BaseProps, Styles } from "@tenphi/tasty";
 import { RefObject } from "react";
 import { AriaTextFieldProps } from "react-aria";
 //#region src/components/fields/FileInput/FileInput.d.ts
-export interface CubeFileInputProps extends BaseProps, PositionStyleProps, ContainerStyleProps, BlockStyleProps, Omit<AriaTextFieldProps, 'form' | 'name' | 'errorMessage'>, FieldBaseProps<string | null | undefined> {
+export interface CubeFileInputProps extends BaseProps, FieldLayoutStyleProps, Omit<AriaTextFieldProps, 'form' | 'name' | 'errorMessage'>, FieldBaseProps<string | null | undefined> {
   /**
    * The size of the input
    * @default default

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

@@ -1,5 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
-import { extractStyles } from "../../../utils/styles.js";
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
@@ -9,8 +8,9 @@ import { getValidationMods } from "../../form/validation/resolve-validation-prop
 import { ValidationIndicator } from "../../form/validation/ValidationIndicator.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 { c } from "react/compiler-runtime";
-import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
+import { tasty } from "@tenphi/tasty";
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createFocusableRef, unwrapDOMRef } from "@react-spectrum/utils";
@@ -98,7 +98,7 @@ function extractFileNameFromValue(value) {
 	return typeof value === "string" ? value.split("\\")?.pop() : void 0;
 }
 function FileInput(allProps, ref) {
-	const $ = c(84);
+	const $ = c(63);
 	const { t } = useI18n();
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -106,7 +106,7 @@ function FileInput(allProps, ref) {
 		$[0] = t0;
 	} else t0 = $[0];
 	const props = useFieldProps(allProps, t0);
-	const { id, name, qa, value, onChange, placeholder, inputRef: inputRefProp, isDisabled, isInvalid, isValid, inputStyles, type: t1, inputProps, accept, form, ...otherProps } = props;
+	const { id, name, qa, value, onChange, placeholder, inputRef: inputRefProp, isDisabled, isInvalid, isValid, inputStyles, type: t1, inputProps, accept } = props;
 	const type = t1 === void 0 ? "file" : t1;
 	const [dragHover, setDragHover] = useState(false);
 	const [currentValue, setValue] = useControlledState(value, props.defaultValue ?? "", onChange);
@@ -185,7 +185,7 @@ function FileInput(allProps, ref) {
 		$[19] = t7;
 	} else t7 = $[19];
 	const onLocalChange = useEvent(t7);
-	extractStyles(otherProps, CONTAINER_STYLES);
+	const { styles, field } = splitFieldLayout(props, { overStyles: inputStyles });
 	const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy } = props;
 	const labelId = props.labelProps?.id ?? `${id}-label`;
 	const triggerId = `${id}-trigger`;
@@ -255,7 +255,7 @@ function FileInput(allProps, ref) {
 	let t16;
 	let t17;
 	let t18;
-	if ($[35] !== setDragHover) {
+	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
 		t16 = () => {
 			setDragHover(true);
 		};
@@ -265,17 +265,16 @@ function FileInput(allProps, ref) {
 		t18 = () => {
 			setDragHover(false);
 		};
-		$[35] = setDragHover;
-		$[36] = t16;
-		$[37] = t17;
-		$[38] = t18;
+		$[35] = t16;
+		$[36] = t17;
+		$[37] = t18;
 	} else {
-		t16 = $[36];
-		t17 = $[37];
-		t18 = $[38];
+		t16 = $[35];
+		t17 = $[36];
+		t18 = $[37];
 	}
 	let t19;
-	if ($[39] !== accept || $[40] !== id || $[41] !== inputProps || $[42] !== inputRef || $[43] !== isDisabled || $[44] !== name || $[45] !== onLocalChange || $[46] !== t15 || $[47] !== t16 || $[48] !== t17 || $[49] !== t18) {
+	if ($[38] !== accept || $[39] !== id || $[40] !== inputProps || $[41] !== inputRef || $[42] !== isDisabled || $[43] !== name || $[44] !== onLocalChange || $[45] !== t15) {
 		t19 = /* @__PURE__ */ jsx("input", {
 			ref: inputRef,
 			id,
@@ -294,113 +293,85 @@ function FileInput(allProps, ref) {
 			onDrop: t18,
 			...inputProps
 		});
-		$[39] = accept;
-		$[40] = id;
-		$[41] = inputProps;
-		$[42] = inputRef;
-		$[43] = isDisabled;
-		$[44] = name;
-		$[45] = onLocalChange;
-		$[46] = t15;
-		$[47] = t16;
-		$[48] = t17;
-		$[49] = t18;
-		$[50] = t19;
-	} else t19 = $[50];
+		$[38] = accept;
+		$[39] = id;
+		$[40] = inputProps;
+		$[41] = inputRef;
+		$[42] = isDisabled;
+		$[43] = name;
+		$[44] = onLocalChange;
+		$[45] = t15;
+		$[46] = t19;
+	} else t19 = $[46];
 	let t20;
-	if ($[51] !== t) {
+	if ($[47] !== t) {
 		t20 = t("fileInput.chooseFile", "Choose file");
-		$[51] = t;
-		$[52] = t20;
-	} else t20 = $[52];
+		$[47] = t;
+		$[48] = t20;
+	} else t20 = $[48];
 	let t21;
-	if ($[53] !== chooseFileId || $[54] !== t20) {
+	if ($[49] !== chooseFileId || $[50] !== t20) {
 		t21 = /* @__PURE__ */ jsx("div", {
 			id: chooseFileId,
 			"data-element": "Button",
 			children: t20
 		});
-		$[53] = chooseFileId;
-		$[54] = t20;
-		$[55] = t21;
-	} else t21 = $[55];
+		$[49] = chooseFileId;
+		$[50] = t20;
+		$[51] = t21;
+	} else t21 = $[51];
 	const t22 = fileName ? "Value" : "Placeholder";
 	let t23;
-	if ($[56] !== fileName || $[57] !== placeholder || $[58] !== t) {
+	if ($[52] !== fileName || $[53] !== placeholder || $[54] !== t) {
 		t23 = fileName || placeholder || t("fileInput.noFileSelected", "No file selected");
-		$[56] = fileName;
-		$[57] = placeholder;
-		$[58] = t;
-		$[59] = t23;
-	} else t23 = $[59];
+		$[52] = fileName;
+		$[53] = placeholder;
+		$[54] = t;
+		$[55] = t23;
+	} else t23 = $[55];
 	let t24;
-	if ($[60] !== fileNameId || $[61] !== t22 || $[62] !== t23) {
+	if ($[56] !== fileNameId || $[57] !== t22 || $[58] !== t23) {
 		t24 = /* @__PURE__ */ jsx("div", {
 			id: fileNameId,
 			"data-element": t22,
 			children: t23
 		});
-		$[60] = fileNameId;
-		$[61] = t22;
-		$[62] = t23;
-		$[63] = t24;
-	} else t24 = $[63];
+		$[56] = fileNameId;
+		$[57] = t22;
+		$[58] = t23;
+		$[59] = t24;
+	} else t24 = $[59];
 	let t25;
-	if ($[64] !== isInvalid || $[65] !== isValid) {
+	if ($[60] !== isInvalid || $[61] !== isValid) {
 		t25 = /* @__PURE__ */ jsx(ValidationIndicator, {
 			isInvalid,
 			isValid
 		});
-		$[64] = isInvalid;
-		$[65] = isValid;
-		$[66] = t25;
-	} else t25 = $[66];
-	let t26;
-	if ($[67] !== ariaDescribedBy || $[68] !== ariaLabel || $[69] !== inputStyles || $[70] !== isDisabled || $[71] !== t10 || $[72] !== t13 || $[73] !== t14 || $[74] !== t19 || $[75] !== t21 || $[76] !== t24 || $[77] !== t25 || $[78] !== triggerId) {
-		t26 = /* @__PURE__ */ jsxs(FileInputElement, {
-			ref: actionRef,
-			id: triggerId,
-			"aria-label": ariaLabel,
-			"aria-labelledby": t10,
-			"aria-describedby": ariaDescribedBy,
-			styles: inputStyles,
-			isDisabled,
-			mods: t13,
-			onKeyDown: t14,
-			children: [
-				t19,
-				t21,
-				t24,
-				t25
-			]
-		});
-		$[67] = ariaDescribedBy;
-		$[68] = ariaLabel;
-		$[69] = inputStyles;
-		$[70] = isDisabled;
-		$[71] = t10;
-		$[72] = t13;
-		$[73] = t14;
-		$[74] = t19;
-		$[75] = t21;
-		$[76] = t24;
-		$[77] = t25;
-		$[78] = triggerId;
-		$[79] = t26;
-	} else t26 = $[79];
-	const fileInput = t26;
-	let t27;
-	if ($[80] !== fileInput || $[81] !== labelId || $[82] !== props) {
-		t27 = wrapWithField(fileInput, {
-			...props,
-			labelProps: mergeProps(props.labelProps, { id: labelId })
-		});
-		$[80] = fileInput;
-		$[81] = labelId;
-		$[82] = props;
-		$[83] = t27;
-	} else t27 = $[83];
-	return t27;
+		$[60] = isInvalid;
+		$[61] = isValid;
+		$[62] = t25;
+	} else t25 = $[62];
+	return wrapWithField(/* @__PURE__ */ jsxs(FileInputElement, {
+		ref: actionRef,
+		id: triggerId,
+		"aria-label": ariaLabel,
+		"aria-labelledby": t10,
+		"aria-describedby": ariaDescribedBy,
+		styles,
+		isDisabled,
+		mods: t13,
+		onKeyDown: t14,
+		children: [
+			t19,
+			t21,
+			t24,
+			t25
+		]
+	}), {
+		...props,
+		...field,
+		labelProps: mergeProps(props.labelProps, { id: labelId })
+	});
 }
 /**
 * FileInputs are file inputs that allow users to select local files to

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

@@ -1 +1 @@
-{"version":3,"file":"FileInput.js","names":["createFocusableRef","unwrapDOMRef","useControlledState","BaseProps","BlockStyleProps","CONTAINER_STYLES","ContainerStyleProps","PositionStyleProps","Styles","tasty","forwardRef","RefObject","useEffect","useImperativeHandle","useRef","useState","useEvent","useI18n","FieldBaseProps","mergeProps","useCombinedRefs","extractStyles","Action","getValidationMods","useFieldProps","ValidationIndicator","wrapWithField","AriaLabelingProps","FocusableRefValue","ChangeEvent","AriaTextFieldProps","Props","FileInputElement","qa","styles","display","position","preset","padding","gap","flow","placeItems","fill","disabled","border","valid","invalid","radius","cursor","overflow","whiteSpace","Button","pressed","color","transition","Placeholder","textOverflow","width","Value","State","ValidationIcon","$","fontSize","Input","top","right","bottom","left","opacity","zIndex","CubeFileInputProps","Omit","size","inputRef","HTMLInputElement","inputStyles","type","inputProps","accept","value","defaultValue","onChange","placeholder","extractFileNameFromValue","split","pop","undefined","FileInput","allProps","ref","_c","t","t0","Symbol","for","defaultValidationTrigger","props","id","name","inputRefProp","isDisabled","isInvalid","isValid","t1","form","otherProps","dragHover","setDragHover","currentValue","setValue","selection","setSelection","t2","fileName","reader","actionRef","t3","current","t4","t5","abort","t6","t7","event","file","target","files","name_0","commit","next","nextReader","FileReader","onload","String","result","readAsText","onLocalChange","ariaLabel","ariaLabelledBy","ariaDescribedBy","labelId","labelProps","triggerId","chooseFileId","fileNameId","nameSource","label","t8","select","getInputElement","t9","filter","Boolean","t10","join","t11","t12","t13","selected","t14","e","key","click","t15","t16","t17","t18","t19","t20","t21","t22","t23","t24","t25","t26","fileInput","t27","_FileInput","displayName","_c"],"sources":["../../../../src/components/fields/FileInput/FileInput.tsx"],"sourcesContent":["import { createFocusableRef, unwrapDOMRef } from '@react-spectrum/utils';\nimport { useControlledState } from '@react-stately/utils';\nimport {\n  BaseProps,\n  BlockStyleProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  PositionStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  forwardRef,\n  RefObject,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal/hooks/use-event';\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { Action } from '../../actions';\nimport {\n  getValidationMods,\n  useFieldProps,\n  ValidationIndicator,\n  wrapWithField,\n} from '../../form';\n\nimport type { AriaLabelingProps, FocusableRefValue } from '@react-types/shared';\nimport type { ChangeEvent } from 'react';\nimport type { AriaTextFieldProps } from 'react-aria';\nimport type { Props } from '../../../props';\n\nconst FileInputElement = tasty(Action, {\n  qa: 'FileInputWrapper',\n  styles: {\n    display: 'inline-flex',\n    position: 'relative',\n    preset: 't3',\n    padding: '.5x 1x',\n    gap: '1x',\n    flow: 'row',\n    placeItems: 'center start',\n    fill: {\n      '': '#surface',\n      'drag-hover': '#primary.16',\n      ':hover': '#primary.08',\n      disabled: '#disabled-surface',\n    },\n    border: {\n      '': true,\n      valid: '#success-text.50',\n      invalid: '#danger-text.50',\n      ':focus-within & :focus-visible': '#primary-text',\n    },\n    radius: true,\n    cursor: '$pointer',\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n\n    Button: {\n      radius: true,\n      border: {\n        '': '#clear',\n        pressed: '#primary.30',\n      },\n      fill: '#primary.12',\n      color: {\n        '': '#primary',\n        disabled: '#dark.30',\n      },\n      padding: '.5x (1.5x - 1bw)',\n      transition: 'theme',\n    },\n\n    Placeholder: {\n      color: '#dark-02',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis',\n      width: 'max 100%',\n      overflow: 'hidden',\n    },\n\n    Value: {\n      color: '#dark-02',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis',\n      width: 'max 100%',\n      overflow: 'hidden',\n    },\n\n    State: {\n      display: 'flex',\n      placeItems: 'center',\n    },\n\n    ValidationIcon: {\n      $: '> State >',\n      display: 'grid',\n      placeItems: 'center',\n      width: 'min 2x',\n      fontSize: '$icon-size',\n    },\n\n    Input: {\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      radius: '$content-radius',\n      opacity: 0.01,\n      cursor: '$pointer',\n      zIndex: 10,\n    },\n  },\n});\n\nexport interface CubeFileInputProps\n  extends\n    BaseProps,\n    PositionStyleProps,\n    ContainerStyleProps,\n    BlockStyleProps,\n    Omit<AriaTextFieldProps, 'form' | 'name' | 'errorMessage'>,\n    FieldBaseProps<string | null | undefined> {\n  /**\n   * The size of the input\n   * @default default\n   */\n  size?: 'small' | 'default' | 'large' | string;\n  /** The input ref */\n  inputRef?: RefObject<HTMLInputElement | null>;\n  /** Style map for the input */\n  inputStyles?: Styles;\n  /**\n   * The type of the input\n   * @default file\n   */\n  type?: 'file' | 'text';\n  /** Direct input props */\n  inputProps?: Props;\n  /** The file types that the input should accept */\n  accept?: string;\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  placeholder?: string;\n}\n\nfunction extractFileNameFromValue(value?: string) {\n  return typeof value === 'string'\n    ? (value as string).split('\\\\')?.pop()\n    : undefined;\n}\n\nfunction FileInput(allProps: CubeFileInputProps, ref) {\n  const { t } = useI18n();\n\n  const props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onChange',\n  });\n\n  let {\n    id,\n    name,\n    qa,\n    value,\n    onChange,\n    placeholder,\n    inputRef: inputRefProp,\n    isDisabled,\n    isInvalid,\n    isValid,\n    inputStyles,\n    type = 'file',\n    inputProps,\n    accept,\n    form,\n    ...otherProps\n  } = props;\n\n  const [dragHover, setDragHover] = useState(false);\n  const [currentValue, setValue] = useControlledState(\n    value,\n    props.defaultValue ?? '',\n    onChange,\n  );\n  const [selection, setSelection] = useState<{\n    value: string;\n    name: string;\n  }>();\n  const fileName =\n    type === 'file'\n      ? extractFileNameFromValue(currentValue)\n      : currentValue === selection?.value\n        ? selection?.name\n        : undefined;\n  const reader = useRef<FileReader | null>(null);\n\n  // `Action` hands its ref a focusable handle, not the element.\n  const actionRef = useRef<FocusableRefValue<HTMLElement>>(null);\n\n  const inputRef = useCombinedRefs(inputRefProp);\n\n  useEffect(() => {\n    // Browsers only allow clearing a file input programmatically. A reset or\n    // external value replacement must also release the old native selection.\n    if (inputRef.current && currentValue !== selection?.value) {\n      inputRef.current.value = '';\n    }\n  }, [currentValue, selection, inputRef]);\n  useEffect(() => () => reader.current?.abort(), [type]);\n\n  const onLocalChange = useEvent((event: ChangeEvent<HTMLInputElement>) => {\n    reader.current?.abort();\n    const file = event.target.files?.[0];\n    const name = file?.name ?? '';\n    const commit = (next: string) => {\n      setSelection({ value: next, name });\n      setValue(next);\n    };\n    if (type === 'file') {\n      commit(event.target.value);\n    } else if (file) {\n      const nextReader = new FileReader();\n      reader.current = nextReader;\n      nextReader.onload = () => commit(String(nextReader.result ?? ''));\n      nextReader.readAsText(file);\n    } else {\n      commit('');\n    }\n  });\n\n  let styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  // The button is the control: the label points at the hidden native input so\n  // that clicking it opens the file dialog, but the button is what takes focus.\n  // So it names itself — the label, or its own `aria-label`, then what it says\n  // — and takes the field's description and message.\n  const {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n  } = props as AriaLabelingProps;\n  // A caller's own label id is kept: the trigger refers to whichever it is.\n  const labelId = props.labelProps?.id ?? `${id}-label`;\n  const triggerId = `${id}-trigger`;\n  const chooseFileId = `${id}-choose-file`;\n  const fileNameId = `${id}-file-name`;\n  const nameSource =\n    ariaLabelledBy ?? (props.label ? labelId : ariaLabel ? triggerId : null);\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(unwrapDOMRef(actionRef), inputRef),\n    select() {\n      if (inputRef?.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef?.current;\n    },\n  }));\n\n  const fileInput = (\n    <FileInputElement\n      ref={actionRef}\n      id={triggerId}\n      aria-label={ariaLabel}\n      aria-labelledby={[nameSource, chooseFileId, fileNameId]\n        .filter(Boolean)\n        .join(' ')}\n      aria-describedby={ariaDescribedBy}\n      styles={inputStyles}\n      isDisabled={isDisabled}\n      mods={{\n        selected: !!fileName,\n        'drag-hover': dragHover,\n        ...getValidationMods({ isInvalid, isValid }),\n      }}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === 'Space') {\n          inputRef?.current?.click();\n        }\n      }}\n    >\n      <input\n        ref={inputRef}\n        id={id}\n        name={name}\n        accept={accept}\n        data-qa={qa || 'FileInput'}\n        data-input-type=\"fileinput\"\n        data-element=\"Input\"\n        disabled={isDisabled}\n        type=\"file\"\n        multiple={false}\n        tabIndex={-1}\n        onChange={onLocalChange}\n        onDragEnter={() => {\n          setDragHover(true);\n        }}\n        onDragLeave={() => {\n          setDragHover(false);\n        }}\n        onDrop={() => {\n          setDragHover(false);\n        }}\n        {...inputProps}\n      />\n      <div id={chooseFileId} data-element=\"Button\">\n        {t('fileInput.chooseFile', 'Choose file')}\n      </div>\n      <div id={fileNameId} data-element={fileName ? 'Value' : 'Placeholder'}>\n        {fileName ||\n          placeholder ||\n          t('fileInput.noFileSelected', 'No file selected')}\n      </div>\n      <ValidationIndicator isInvalid={isInvalid} isValid={isValid} />\n    </FileInputElement>\n  );\n\n  return wrapWithField(fileInput, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, { id: labelId }),\n  });\n}\n\n/**\n * FileInputs are file inputs that allow users to select local files to\n * upload them to the server.\n */\nconst _FileInput = forwardRef(FileInput);\n\n_FileInput.displayName = 'FileInput';\n\nexport { _FileInput as FileInput };\n"],"mappings":";;;;;;;;;;;;;;;;;;AAsCA,MAAMgC,mBAAmBvB,MAAMa,QAAQ;CACrCW,IAAI;CACJC,QAAQ;EACNC,SAAS;EACTC,UAAU;EACVC,QAAQ;EACRC,SAAS;EACTC,KAAK;EACLC,MAAM;EACNC,YAAY;EACZC,MAAM;GACJ,IAAI;GACJ,cAAc;GACd,UAAU;GACVC,UAAU;EACZ;EACAC,QAAQ;GACN,IAAI;GACJC,OAAO;GACPC,SAAS;GACT,kCAAkC;EACpC;EACAC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACVC,YAAY;EAEZC,QAAQ;GACNJ,QAAQ;GACRH,QAAQ;IACN,IAAI;IACJQ,SAAS;GACX;GACAV,MAAM;GACNW,OAAO;IACL,IAAI;IACJV,UAAU;GACZ;GACAL,SAAS;GACTgB,YAAY;EACd;EAEAC,aAAa;GACXF,OAAO;GACPH,YAAY;GACZM,cAAc;GACdC,OAAO;GACPR,UAAU;EACZ;EAEAS,OAAO;GACLL,OAAO;GACPH,YAAY;GACZM,cAAc;GACdC,OAAO;GACPR,UAAU;EACZ;EAEAU,OAAO;GACLxB,SAAS;GACTM,YAAY;EACd;EAEAmB,gBAAgB;GACdC,GAAG;GACH1B,SAAS;GACTM,YAAY;GACZgB,OAAO;GACPK,UAAU;EACZ;EAEAC,OAAO;GACL3B,UAAU;GACV4B,KAAK;GACLC,OAAO;GACPC,QAAQ;GACRC,MAAM;GACNpB,QAAQ;GACRqB,SAAS;GACTpB,QAAQ;GACRqB,QAAQ;EACV;CACF;AACF,CAAC;AAkCD,SAASc,yBAAyBJ,OAAgB;CAChD,OAAO,OAAOA,UAAU,WACnBA,MAAiBK,MAAM,IAAI,CAAC,EAAEC,IAAI,IACnCC,KAAAA;AACN;AAEA,SAAAC,UAAAC,UAAAC,KAAA;CAAA,MAAA5B,IAAA6B,EAAA,EAAA;CACE,MAAA,EAAAC,MAAc1E,QAAQ;CAAE,IAAA2E;CAAA,IAAA/B,EAAA,OAAAgC,OAAAC,IAAA,2BAAA,GAAA;EAEcF,KAAA,EAAAG,0BACV,WAC5B;EAAClC,EAAA,KAAA+B;CAAA,OAAAA,KAAA/B,EAAA;CAFD,MAAAmC,QAAcxE,cAAcgE,UAAUI,EAErC;CAED,MAAA,EAAAK,IAAAC,MAAAjE,IAAA8C,OAAAE,UAAAC,aAAAT,UAAA0B,cAAAC,YAAAC,WAAAC,SAAA3B,aAAAC,MAAA2B,IAAA1B,YAAAC,QAAA0B,MAAA,GAAAC,eAiBIT;CALF,MAAApB,OAAA2B,OAAAjB,KAAAA,IAAA,SAAAiB;CAOF,MAAA,CAAAG,WAAAC,gBAAkC5F,SAAS,KAAK;CAChD,MAAA,CAAA6F,cAAAC,YAAiC3G,mBAC/B6E,OACAiB,MAAKhB,gBAAL,IACAC,QACF;CACA,MAAA,CAAA6B,WAAAC,gBAAkChG,SAG/B;CAAE,IAAAiG;CAAA,IAAAnD,EAAA,OAAA+C,gBAAA/C,EAAA,OAAAiD,WAAAZ,QAAArC,EAAA,OAAAiD,WAAA/B,SAAAlB,EAAA,OAAAe,MAAA;EAEHoC,KAAApC,SAAS,SACLO,yBAAyByB,YAGf,IAFVA,iBAAiBE,WAAS/B,QACxB+B,WAASZ,OADXZ,KAAAA;EAEWzB,EAAA,KAAA+C;EAAA/C,EAAA,KAAAiD,WAAAZ;EAAArC,EAAA,KAAAiD,WAAA/B;EAAAlB,EAAA,KAAAe;EAAAf,EAAA,KAAAmD;CAAA,OAAAA,KAAAnD,EAAA;CALjB,MAAAoD,WACED;CAKF,MAAAE,SAAepG,OAA0B,IAAI;CAG7C,MAAAqG,YAAkBrG,OAAuC,IAAI;CAE7D,MAAA2D,WAAiBrD,gBAAgB+E,YAAY;CAAE,IAAAiB;CAAA,IAAAvD,EAAA,OAAA+C,gBAAA/C,EAAA,OAAAY,YAAAZ,EAAA,OAAAiD,WAAA/B,OAAA;EAErCqC,WAAA;GAGR,IAAI3C,SAAQ4C,WAAYT,iBAAiBE,WAAS/B,OAChDN,SAAQ4C,QAAQtC,QAAS;EAC1B;EACFlB,EAAA,KAAA+C;EAAA/C,EAAA,KAAAY;EAAAZ,EAAA,KAAAiD,WAAA/B;EAAAlB,EAAA,KAAAuD;CAAA,OAAAA,KAAAvD,EAAA;CAAA,IAAAyD;CAAA,IAAAzD,EAAA,QAAA+C,gBAAA/C,EAAA,QAAAY,YAAAZ,EAAA,QAAAiD,WAAA;EAAEQ,KAAA;GAACV;GAAcE;GAAWrC;EAAQ;EAACZ,EAAA,MAAA+C;EAAA/C,EAAA,MAAAY;EAAAZ,EAAA,MAAAiD;EAAAjD,EAAA,MAAAyD;CAAA,OAAAA,KAAAzD,EAAA;CANtCjD,UAAUwG,IAMPE,EAAmC;CAAC,IAAAC;CAAA,IAAA1D,EAAA,QAAAgC,OAAAC,IAAA,2BAAA,GAAA;EAC7ByB,iBAAYL,OAAMG,SAAeG,MAAC;EAAC3D,EAAA,MAAA0D;CAAA,OAAAA,KAAA1D,EAAA;CAAA,IAAA4D;CAAA,IAAA5D,EAAA,QAAAe,MAAA;EAAE6C,KAAA,CAAC7C,IAAI;EAACf,EAAA,MAAAe;EAAAf,EAAA,MAAA4D;CAAA,OAAAA,KAAA5D,EAAA;CAArDjD,UAAU2G,IAAqCE,EAAM;CAAC,IAAAC;CAAA,IAAA7D,EAAA,QAAAgD,YAAAhD,EAAA,QAAAe,MAAA;EAEvB8C,MAAAC,UAAA;GAC7BT,OAAMG,SAAeG,MAAC;GACtB,MAAAI,OAAaD,MAAKE,OAAOC,QAAW;GACpC,MAAAC,SAAaH,MAAI1B,QAAJ;GACb,MAAA8B,UAAeC,SAAA;IACblB,aAAa;KAAAhC,OAASkD;KAAI/B,MAAEA;IAAK,CAAC;IAClCW,SAASoB,IAAI;GAAC;GAEhB,IAAIrD,SAAS,QACXoD,OAAOL,MAAKE,OAAO9C,KAAM;QACpB,IAAI6C,MAAI;IACb,MAAAM,aAAmB,IAAIC,WAAW;IAClCjB,OAAMG,UAAWa;IACjBA,WAAUE,eAAgBJ,OAAOK,OAAOH,WAAUI,UAAV,EAAuB,CAAC;IAChEJ,WAAUK,WAAYX,IAAI;GAAC,OAE3BI,OAAO,EAAE;EACV;EACFnE,EAAA,MAAAgD;EAAAhD,EAAA,MAAAe;EAAAf,EAAA,MAAA6D;CAAA,OAAAA,KAAA7D,EAAA;CAlBD,MAAA2E,gBAAsBxH,SAAS0G,EAkB9B;CAEYrG,cAAcoF,YAAYpG,gBAAgB;CAMvD,MAAA,EAAA,cAAAoI,WAAA,mBAAAC,gBAAA,oBAAAC,oBAII3C;CAEJ,MAAA4C,UAAgB5C,MAAK6C,YAAe5C,MAApB,GAA2BA,GAAE;CAC7C,MAAA6C,YAAkB,GAAG7C,GAAE;CACvB,MAAA8C,eAAqB,GAAG9C,GAAE;CAC1B,MAAA+C,aAAmB,GAAG/C,GAAE;CACxB,MAAAgD,aACEP,mBAAmB1C,MAAKkD,QAALN,UAAwBH,YAAAK,YAAA;CAA8B,IAAAK;CAAA,IAAAtF,EAAA,QAAAY,UAAA;EAGlD0E,YAAO;GAAA,GAC3BnJ,mBAAmBC,aAAakH,SAAS,GAAG1C,QAAQ;GAAC2E,SAAA;IAEtD,IAAI3E,UAAQ4C,SACV5C,SAAQ4C,QAAQ+B,OAAQ;GACzB;GAAAC,kBAAA;IAAA,OAGM5E,UAAQ4C;GAAS;EAE5B;EAAExD,EAAA,MAAAY;EAAAZ,EAAA,MAAAsF;CAAA,OAAAA,KAAAtF,EAAA;CAVFhD,oBAAoB4E,KAAK0D,EAUvB;CAAC,IAAAG;CAAA,IAAAzF,EAAA,QAAAkF,gBAAAlF,EAAA,QAAAmF,cAAAnF,EAAA,QAAAoF,YAAA;EAOkBK,KAAA;GAACL;GAAYF;GAAcC;EAAU,CAAC,CAAAO,OAC7CC,OAAO;EAAC3F,EAAA,MAAAkF;EAAAlF,EAAA,MAAAmF;EAAAnF,EAAA,MAAAoF;EAAApF,EAAA,MAAAyF;CAAA,OAAAA,KAAAzF,EAAA;CADD,MAAA4F,MAAAH,GACCI,KACV,GAAG;CAKC,MAAAC,MAAA,CAAC,CAAC1C;CAAQ,IAAA2C;CAAA,IAAA/F,EAAA,QAAAwC,aAAAxC,EAAA,QAAAyC,SAAA;EAEjBsD,MAAArI,kBAAkB;GAAA8E;GAAAC;EAAqB,CAAC;EAACzC,EAAA,MAAAwC;EAAAxC,EAAA,MAAAyC;EAAAzC,EAAA,MAAA+F;CAAA,OAAAA,MAAA/F,EAAA;CAAA,IAAAgG;CAAA,IAAAhG,EAAA,QAAA6C,aAAA7C,EAAA,QAAA8F,OAAA9F,EAAA,QAAA+F,KAAA;EAHxCC,MAAA;GAAAC,UACMH;GAAU,cACNjD;GAAS,GACpBkD;EACL;EAAC/F,EAAA,MAAA6C;EAAA7C,EAAA,MAAA8F;EAAA9F,EAAA,MAAA+F;EAAA/F,EAAA,MAAAgG;CAAA,OAAAA,MAAAhG,EAAA;CAAA,IAAAkG;CAAA,IAAAlG,EAAA,QAAAY,UAAA;EACUsF,OAAAC,MAAA;GACT,IAAIA,EAACC,QAAS,WAAWD,EAACC,QAAS,SACjCxF,UAAQ4C,SAAgB6C,MAAC;EAC1B;EACFrG,EAAA,MAAAY;EAAAZ,EAAA,MAAAkG;CAAA,OAAAA,MAAAlG,EAAA;CAOU,MAAAsG,MAAAlI,MAAA;CAAiB,IAAAmI;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAzG,EAAA,QAAA8C,cAAA;EAQbyD,YAAA;GACXzD,aAAa,IAAI;EAAC;EAEP0D,YAAA;GACX1D,aAAa,KAAK;EAAC;EAEb2D,YAAA;GACN3D,aAAa,KAAK;EAAC;EACpB9C,EAAA,MAAA8C;EAAA9C,EAAA,MAAAuG;EAAAvG,EAAA,MAAAwG;EAAAxG,EAAA,MAAAyG;CAAA,OAAA;EAAAF,MAAAvG,EAAA;EAAAwG,MAAAxG,EAAA;EAAAyG,MAAAzG,EAAA;CAAA;CAAA,IAAA0G;CAAA,IAAA1G,EAAA,QAAAiB,UAAAjB,EAAA,QAAAoC,MAAApC,EAAA,QAAAgB,cAAAhB,EAAA,QAAAY,YAAAZ,EAAA,QAAAuC,cAAAvC,EAAA,QAAAqC,QAAArC,EAAA,QAAA2E,iBAAA3E,EAAA,QAAAsG,OAAAtG,EAAA,QAAAuG,OAAAvG,EAAA,QAAAwG,OAAAxG,EAAA,QAAAyG,KAAA;EArBHC,MAAA,oBAAA,SAAA;GACO9F,KAAAA;GACDwB;GACEC;GACEpB;GACC,WAAAqF;GACO,mBAAA;GACH,gBAAA;GACH/D,UAAAA;GACL,MAAA;GACK,UAAA;GACA,UAAA;GACAoC,UAAAA;GACG,aAAA4B;GAGA,aAAAC;GAGL,QAAAC;GAEP,GACGzF;EAAU,CAAA;EACdhB,EAAA,MAAAiB;EAAAjB,EAAA,MAAAoC;EAAApC,EAAA,MAAAgB;EAAAhB,EAAA,MAAAY;EAAAZ,EAAA,MAAAuC;EAAAvC,EAAA,MAAAqC;EAAArC,EAAA,MAAA2E;EAAA3E,EAAA,MAAAsG;EAAAtG,EAAA,MAAAuG;EAAAvG,EAAA,MAAAwG;EAAAxG,EAAA,MAAAyG;EAAAzG,EAAA,MAAA0G;CAAA,OAAAA,MAAA1G,EAAA;CAAA,IAAA2G;CAAA,IAAA3G,EAAA,QAAA8B,GAAA;EAEC6E,MAAA7E,EAAE,wBAAwB,aAAa;EAAC9B,EAAA,MAAA8B;EAAA9B,EAAA,MAAA2G;CAAA,OAAAA,MAAA3G,EAAA;CAAA,IAAA4G;CAAA,IAAA5G,EAAA,QAAAkF,gBAAAlF,EAAA,QAAA2G,KAAA;EAD3CC,MAAA,oBAAA,OAAA;GAAS1B,IAAAA;GAA2B,gBAAA;GACjCyB,UAAAA;EACG,CAAA;EAAA3G,EAAA,MAAAkF;EAAAlF,EAAA,MAAA2G;EAAA3G,EAAA,MAAA4G;CAAA,OAAAA,MAAA5G,EAAA;CAC6B,MAAA6G,MAAAzD,WAAA,UAAA;CAAkC,IAAA0D;CAAA,IAAA9G,EAAA,QAAAoD,YAAApD,EAAA,QAAAqB,eAAArB,EAAA,QAAA8B,GAAA;EAClEgF,MAAA1D,YAAA/B,eAECS,EAAE,4BAA4B,kBAAkB;EAAC9B,EAAA,MAAAoD;EAAApD,EAAA,MAAAqB;EAAArB,EAAA,MAAA8B;EAAA9B,EAAA,MAAA8G;CAAA,OAAAA,MAAA9G,EAAA;CAAA,IAAA+G;CAAA,IAAA/G,EAAA,QAAAmF,cAAAnF,EAAA,QAAA6G,OAAA7G,EAAA,QAAA8G,KAAA;EAHrDC,MAAA,oBAAA,OAAA;GAAS5B,IAAAA;GAA0B,gBAAA0B;GAChCC,UAAAA;EAGG,CAAA;EAAA9G,EAAA,MAAAmF;EAAAnF,EAAA,MAAA6G;EAAA7G,EAAA,MAAA8G;EAAA9G,EAAA,MAAA+G;CAAA,OAAAA,MAAA/G,EAAA;CAAA,IAAAgH;CAAA,IAAAhH,EAAA,QAAAwC,aAAAxC,EAAA,QAAAyC,SAAA;EACNuE,MAAA,oBAAC,qBAAD;GAAgCxE;GAAoBC;EAAO,CAAA;EAAIzC,EAAA,MAAAwC;EAAAxC,EAAA,MAAAyC;EAAAzC,EAAA,MAAAgH;CAAA,OAAAA,MAAAhH,EAAA;CAAA,IAAAiH;CAAA,IAAAjH,EAAA,QAAA8E,mBAAA9E,EAAA,QAAA4E,aAAA5E,EAAA,QAAAc,eAAAd,EAAA,QAAAuC,cAAAvC,EAAA,QAAA4F,OAAA5F,EAAA,QAAAgG,OAAAhG,EAAA,QAAAkG,OAAAlG,EAAA,QAAA0G,OAAA1G,EAAA,QAAA4G,OAAA5G,EAAA,QAAA+G,OAAA/G,EAAA,QAAAgH,OAAAhH,EAAA,QAAAiF,WAAA;EArDjEgC,MAAA,qBAAC,kBAAD;GACO3D,KAAAA;GACD2B,IAAAA;GACQL,cAAAA;GACK,mBAAAgB;GAGCd,oBAAAA;GACVhE,QAAAA;GACIyB;GACN,MAAAyD;GAKK,WAAAE;GAfb,UAAA;IAqBEQ;IAwBAE;IAGAG;IAKAC;GArDe;;EAsDEhH,EAAA,MAAA8E;EAAA9E,EAAA,MAAA4E;EAAA5E,EAAA,MAAAc;EAAAd,EAAA,MAAAuC;EAAAvC,EAAA,MAAA4F;EAAA5F,EAAA,MAAAgG;EAAAhG,EAAA,MAAAkG;EAAAlG,EAAA,MAAA0G;EAAA1G,EAAA,MAAA4G;EAAA5G,EAAA,MAAA+G;EAAA/G,EAAA,MAAAgH;EAAAhH,EAAA,MAAAiF;EAAAjF,EAAA,MAAAiH;CAAA,OAAAA,MAAAjH,EAAA;CAvDrB,MAAAkH,YACED;CAuDA,IAAAE;CAAA,IAAAnH,EAAA,QAAAkH,aAAAlH,EAAA,QAAA+E,WAAA/E,EAAA,QAAAmC,OAAA;EAEKgF,MAAAtJ,cAAcqJ,WAAW;GAAA,GAC3B/E;GAAK6C,YACI1H,WAAW6E,MAAK6C,YAAa,EAAA5C,IAAM2C,QAAQ,CAAC;EAC1D,CAAC;EAAC/E,EAAA,MAAAkH;EAAAlH,EAAA,MAAA+E;EAAA/E,EAAA,MAAAmC;EAAAnC,EAAA,MAAAmH;CAAA,OAAAA,MAAAnH,EAAA;CAAA,OAHKmH;AAGL;;;;;AAOJ,MAAMC,aAAavK,WAAW6E,SAAS;AAEvC0F,WAAWC,cAAc"}
+{"version":3,"file":"FileInput.js","names":["createFocusableRef","unwrapDOMRef","useControlledState","BaseProps","Styles","tasty","forwardRef","RefObject","useEffect","useImperativeHandle","useRef","useState","useEvent","useI18n","FieldBaseProps","mergeProps","useCombinedRefs","Action","getValidationMods","useFieldProps","ValidationIndicator","wrapWithField","FieldLayoutStyleProps","splitFieldLayout","AriaLabelingProps","FocusableRefValue","ChangeEvent","AriaTextFieldProps","Props","FileInputElement","qa","styles","display","position","preset","padding","gap","flow","placeItems","fill","disabled","border","valid","invalid","radius","cursor","overflow","whiteSpace","Button","pressed","color","transition","Placeholder","textOverflow","width","Value","State","ValidationIcon","$","fontSize","Input","top","right","bottom","left","opacity","zIndex","CubeFileInputProps","Omit","size","inputRef","HTMLInputElement","inputStyles","type","inputProps","accept","value","defaultValue","onChange","placeholder","extractFileNameFromValue","split","pop","undefined","FileInput","allProps","ref","_c","t","t0","Symbol","for","defaultValidationTrigger","props","id","name","inputRefProp","isDisabled","isInvalid","isValid","t1","dragHover","setDragHover","currentValue","setValue","selection","setSelection","t2","fileName","reader","actionRef","t3","current","t4","t5","abort","t6","t7","event","file","target","files","name_0","commit","next","nextReader","FileReader","onload","String","result","readAsText","onLocalChange","field","overStyles","ariaLabel","ariaLabelledBy","ariaDescribedBy","labelId","labelProps","triggerId","chooseFileId","fileNameId","nameSource","label","t8","select","getInputElement","t9","filter","Boolean","t10","join","t11","t12","t13","selected","t14","e","key","click","t15","t16","t17","t18","t19","t20","t21","t22","t23","t24","t25","fileInput","_FileInput","displayName","_c"],"sources":["../../../../src/components/fields/FileInput/FileInput.tsx"],"sourcesContent":["import { createFocusableRef, unwrapDOMRef } from '@react-spectrum/utils';\nimport { useControlledState } from '@react-stately/utils';\nimport { BaseProps, Styles, tasty } from '@tenphi/tasty';\nimport {\n  forwardRef,\n  RefObject,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal/hooks/use-event';\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { Action } from '../../actions';\nimport {\n  getValidationMods,\n  useFieldProps,\n  ValidationIndicator,\n  wrapWithField,\n} from '../../form';\nimport {\n  FieldLayoutStyleProps,\n  splitFieldLayout,\n} from '../../form/field-layout';\n\nimport type { AriaLabelingProps, FocusableRefValue } from '@react-types/shared';\nimport type { ChangeEvent } from 'react';\nimport type { AriaTextFieldProps } from 'react-aria';\nimport type { Props } from '../../../props';\n\nconst FileInputElement = tasty(Action, {\n  qa: 'FileInputWrapper',\n  styles: {\n    display: 'inline-flex',\n    position: 'relative',\n    preset: 't3',\n    padding: '.5x 1x',\n    gap: '1x',\n    flow: 'row',\n    placeItems: 'center start',\n    fill: {\n      '': '#surface',\n      'drag-hover': '#primary.16',\n      ':hover': '#primary.08',\n      disabled: '#disabled-surface',\n    },\n    border: {\n      '': true,\n      valid: '#success-text.50',\n      invalid: '#danger-text.50',\n      ':focus-within & :focus-visible': '#primary-text',\n    },\n    radius: true,\n    cursor: '$pointer',\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n\n    Button: {\n      radius: true,\n      border: {\n        '': '#clear',\n        pressed: '#primary.30',\n      },\n      fill: '#primary.12',\n      color: {\n        '': '#primary',\n        disabled: '#dark.30',\n      },\n      padding: '.5x (1.5x - 1bw)',\n      transition: 'theme',\n    },\n\n    Placeholder: {\n      color: '#dark-02',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis',\n      width: 'max 100%',\n      overflow: 'hidden',\n    },\n\n    Value: {\n      color: '#dark-02',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis',\n      width: 'max 100%',\n      overflow: 'hidden',\n    },\n\n    State: {\n      display: 'flex',\n      placeItems: 'center',\n    },\n\n    ValidationIcon: {\n      $: '> State >',\n      display: 'grid',\n      placeItems: 'center',\n      width: 'min 2x',\n      fontSize: '$icon-size',\n    },\n\n    Input: {\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      radius: '$content-radius',\n      opacity: 0.01,\n      cursor: '$pointer',\n      zIndex: 10,\n    },\n  },\n});\n\nexport interface CubeFileInputProps\n  extends\n    BaseProps,\n    FieldLayoutStyleProps,\n    Omit<AriaTextFieldProps, 'form' | 'name' | 'errorMessage'>,\n    FieldBaseProps<string | null | undefined> {\n  /**\n   * The size of the input\n   * @default default\n   */\n  size?: 'small' | 'default' | 'large' | string;\n  /** The input ref */\n  inputRef?: RefObject<HTMLInputElement | null>;\n  /** Style map for the input */\n  inputStyles?: Styles;\n  /**\n   * The type of the input\n   * @default file\n   */\n  type?: 'file' | 'text';\n  /** Direct input props */\n  inputProps?: Props;\n  /** The file types that the input should accept */\n  accept?: string;\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  placeholder?: string;\n}\n\nfunction extractFileNameFromValue(value?: string) {\n  return typeof value === 'string'\n    ? (value as string).split('\\\\')?.pop()\n    : undefined;\n}\n\nfunction FileInput(allProps: CubeFileInputProps, ref) {\n  const { t } = useI18n();\n\n  const props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onChange',\n  });\n\n  let {\n    id,\n    name,\n    qa,\n    value,\n    onChange,\n    placeholder,\n    inputRef: inputRefProp,\n    isDisabled,\n    isInvalid,\n    isValid,\n    inputStyles,\n    type = 'file',\n    inputProps,\n    accept,\n    form,\n  } = props;\n\n  const [dragHover, setDragHover] = useState(false);\n  const [currentValue, setValue] = useControlledState(\n    value,\n    props.defaultValue ?? '',\n    onChange,\n  );\n  const [selection, setSelection] = useState<{\n    value: string;\n    name: string;\n  }>();\n  const fileName =\n    type === 'file'\n      ? extractFileNameFromValue(currentValue)\n      : currentValue === selection?.value\n        ? selection?.name\n        : undefined;\n  const reader = useRef<FileReader | null>(null);\n\n  // `Action` hands its ref a focusable handle, not the element.\n  const actionRef = useRef<FocusableRefValue<HTMLElement>>(null);\n\n  const inputRef = useCombinedRefs(inputRefProp);\n\n  useEffect(() => {\n    // Browsers only allow clearing a file input programmatically. A reset or\n    // external value replacement must also release the old native selection.\n    if (inputRef.current && currentValue !== selection?.value) {\n      inputRef.current.value = '';\n    }\n  }, [currentValue, selection, inputRef]);\n  useEffect(() => () => reader.current?.abort(), [type]);\n\n  const onLocalChange = useEvent((event: ChangeEvent<HTMLInputElement>) => {\n    reader.current?.abort();\n    const file = event.target.files?.[0];\n    const name = file?.name ?? '';\n    const commit = (next: string) => {\n      setSelection({ value: next, name });\n      setValue(next);\n    };\n    if (type === 'file') {\n      commit(event.target.value);\n    } else if (file) {\n      const nextReader = new FileReader();\n      reader.current = nextReader;\n      nextReader.onload = () => commit(String(nextReader.result ?? ''));\n      nextReader.readAsText(file);\n    } else {\n      commit('');\n    }\n  });\n\n  // The button is the root, so `inputStyles` styles the same element and wins\n  // over `styles`, as `wrapperStyles` does on the date pickers.\n  const { styles, field } = splitFieldLayout(props, {\n    overStyles: inputStyles,\n  });\n\n  // The button is the control: the label points at the hidden native input so\n  // that clicking it opens the file dialog, but the button is what takes focus.\n  // So it names itself — the label, or its own `aria-label`, then what it says\n  // — and takes the field's description and message.\n  const {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n  } = props as AriaLabelingProps;\n  // A caller's own label id is kept: the trigger refers to whichever it is.\n  const labelId = props.labelProps?.id ?? `${id}-label`;\n  const triggerId = `${id}-trigger`;\n  const chooseFileId = `${id}-choose-file`;\n  const fileNameId = `${id}-file-name`;\n  const nameSource =\n    ariaLabelledBy ?? (props.label ? labelId : ariaLabel ? triggerId : null);\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(unwrapDOMRef(actionRef), inputRef),\n    select() {\n      if (inputRef?.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef?.current;\n    },\n  }));\n\n  const fileInput = (\n    <FileInputElement\n      ref={actionRef}\n      id={triggerId}\n      aria-label={ariaLabel}\n      aria-labelledby={[nameSource, chooseFileId, fileNameId]\n        .filter(Boolean)\n        .join(' ')}\n      aria-describedby={ariaDescribedBy}\n      styles={styles}\n      isDisabled={isDisabled}\n      mods={{\n        selected: !!fileName,\n        'drag-hover': dragHover,\n        ...getValidationMods({ isInvalid, isValid }),\n      }}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === 'Space') {\n          inputRef?.current?.click();\n        }\n      }}\n    >\n      <input\n        ref={inputRef}\n        id={id}\n        name={name}\n        accept={accept}\n        data-qa={qa || 'FileInput'}\n        data-input-type=\"fileinput\"\n        data-element=\"Input\"\n        disabled={isDisabled}\n        type=\"file\"\n        multiple={false}\n        tabIndex={-1}\n        onChange={onLocalChange}\n        onDragEnter={() => {\n          setDragHover(true);\n        }}\n        onDragLeave={() => {\n          setDragHover(false);\n        }}\n        onDrop={() => {\n          setDragHover(false);\n        }}\n        {...inputProps}\n      />\n      <div id={chooseFileId} data-element=\"Button\">\n        {t('fileInput.chooseFile', 'Choose file')}\n      </div>\n      <div id={fileNameId} data-element={fileName ? 'Value' : 'Placeholder'}>\n        {fileName ||\n          placeholder ||\n          t('fileInput.noFileSelected', 'No file selected')}\n      </div>\n      <ValidationIndicator isInvalid={isInvalid} isValid={isValid} />\n    </FileInputElement>\n  );\n\n  return wrapWithField(fileInput, {\n    ...props,\n    ...field,\n    labelProps: mergeProps(props.labelProps, { id: labelId }),\n  });\n}\n\n/**\n * FileInputs are file inputs that allow users to select local files to\n * upload them to the server.\n */\nconst _FileInput = forwardRef(FileInput);\n\n_FileInput.displayName = 'FileInput';\n\nexport { _FileInput as FileInput };\n"],"mappings":"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"}

package/dist/components/fields/FilterListBox/FilterListBox.js

@@ -1,5 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
-import { extractStyles } 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 { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
@@ -8,77 +7,19 @@ import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
 import { LoadingIcon } from "../../../icons/LoadingIcon.js";
 import { CollectionItem as _CollectionItem } from "../../CollectionItem.js";
 import { useI18n } from "../../../i18n/useI18n.js";
-import { StyledHeader } from "../../actions/Menu/styled.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.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 { ListBox } from "../ListBox/ListBox.js";
 import { getListBoxOptionId } from "../ListBox/optionId.js";
 import { getEdgeVisibleKey, getNextVisibleKey, markKeyboardFocus } from "../ListBoxPopover/listNavigation.js";
-import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES } from "../TextInput/TextInputBase.js";
-import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, mergeStyles, tasty } from "@tenphi/tasty";
+import { FilterListBoxWrapperElement, SearchInputElement, SearchWrapperElement, StyledHeaderWithoutBorder } from "./styled.js";
 import { cloneElement, forwardRef, isValidElement, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useFilter, useFocusWithin, useId as useId$1, useKeyboard } from "react-aria";
 import { Section, useListState } from "react-stately";
 //#region src/components/fields/FilterListBox/FilterListBox.tsx
-const FilterListBoxWrapperElement = tasty({ styles: {
-	display: "grid",
-	flow: "column",
-	gridColumns: "1sf",
-	gridRows: "max-content max-content 1sf",
-	gap: 0,
-	position: "relative",
-	radius: true,
-	color: "#dark-02",
-	transition: "theme",
-	outline: {
-		"": "#purple-03.0",
-		"invalid & focused": "#danger.50",
-		focused: "#purple-03"
-	},
-	border: {
-		"": true,
-		focused: "#primary-text",
-		valid: "#success-text.50",
-		invalid: "#danger-text.50",
-		disabled: true,
-		popover: false
-	}
-} });
-const SearchWrapperElement = tasty({
-	qa: "FilterListBoxSearchWrapper",
-	styles: mergeStyles(INPUT_WRAPPER_STYLES, {
-		border: "bottom",
-		radius: "1r top",
-		fill: "#clear",
-		height: "($size + 1x)",
-		$size: {
-			"": "$size-md",
-			"size=small": "$size-sm",
-			"size=medium": "$size-md",
-			"size=large": "$size-lg"
-		}
-	})
-});
-const SearchInputElement = tasty({
-	as: "input",
-	styles: mergeStyles(DEFAULT_INPUT_STYLES, {
-		fill: "#clear",
-		padding: {
-			"": ".5x 1.5x",
-			prefix: "0 1.5x 0 .5x",
-			suffix: ".5x .5x .5x 1.5x",
-			"prefix & suffix": "0 .5x 0 .5x"
-		}
-	})
-});
-const StyledHeaderWithoutBorder = tasty(StyledHeader, { styles: { border: false } });
-const PROP_STYLES = [
-	...BASE_STYLES,
-	...OUTER_STYLES,
-	...COLOR_STYLES
-];
 const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 	props = useFieldProps(props, { valuePropsMapper: ({ value, onChange }) => {
 		const fieldProps = {};
@@ -93,7 +34,7 @@ const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 		return fieldProps;
 	} });
 	const { t } = useI18n();
-	let { qa, label, extra, id, labelStyles, isRequired, necessityIndicator, isInvalid, isValid, isDisabled, isLoading, isLoadingItems, searchPlaceholder = t("filterListBox.searchPlaceholder", "Search..."), autoFocus, filter, mods: externalMods, emptyLabel, searchInputStyles, listStyles, optionStyles, sectionStyles, headingStyles, listGap, searchInputRef, listRef, message, description, styles, focusOnHover, shouldFocusWrap, labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, onSelectionChange: externalOnSelectionChange, allowsCustomValue = false, showSelectAll, selectAllLabel, header, footer, size = "medium", headerStyles, footerStyles, listBoxStyles, items, children: renderChildren, onEscape, isCheckable, onOptionClick, selectionMode = "single", allValueProps, customValueProps, newCustomValueProps, searchValue: controlledSearchValue, onSearchChange, _internalCollection, isReorderable = false, onReorder, form, ...otherProps } = props;
+	let { qa, label, extra, id, labelStyles, isRequired, necessityIndicator, isInvalid, isValid, isDisabled, isLoading, isLoadingItems, searchPlaceholder = t("filterListBox.searchPlaceholder", "Search..."), autoFocus, filter, mods: externalMods, emptyLabel, searchInputStyles, listStyles, optionStyles, sectionStyles, headingStyles, listGap, searchInputRef, listRef, message, description, styles, focusOnHover, shouldFocusWrap, labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, onSelectionChange: externalOnSelectionChange, allowsCustomValue = false, showSelectAll, selectAllLabel, header, footer, size = "medium", headerStyles, footerStyles, listBoxStyles, items, children: renderChildren, onEscape, isCheckable, onOptionClick, selectionMode = "single", allValueProps, customValueProps, newCustomValueProps, searchValue: controlledSearchValue, onSearchChange, _internalCollection, isReorderable = false, onReorder, form } = props;
 	let children = renderChildren;
 	const renderFn = renderChildren;
 	if (items && typeof renderFn === "function") try {
@@ -263,7 +204,8 @@ const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 		contains,
 		t
 	]);
-	styles = extractStyles(otherProps, PROP_STYLES, styles);
+	const fieldLayout = splitFieldLayout(props, { fillHeightOnFlex: true });
+	styles = fieldLayout.styles;
 	searchInputRef = useCombinedRefs(searchInputRef);
 	listRef = useCombinedRefs(listRef);
 	const { isFocused, focusProps } = useFocus$1();
@@ -537,7 +479,10 @@ const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 			})
 		]
 	});
-	return wrapWithField(filterListBoxField, props);
+	return wrapWithField(filterListBoxField, {
+		...props,
+		...fieldLayout.field
+	});
 });
 FilterListBox.Item = _CollectionItem;
 FilterListBox.Section = Section;