@cube-dev/ui-kit 0.208.0 → 0.209.0

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.209.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";
@@ -8,9 +8,10 @@ import { getValidationMods } from "../../form/validation/resolve-validation-prop
 import { wrapWithField } from "../../form/wrapper.js";
 import { splitFieldLayout } from "../../form/field-layout.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
-import { ValidationIndicator } from "../../form/validation/ValidationIndicator.js";
+import { ValidationIndicator, hasValidationIndicator } from "../../form/validation/ValidationIndicator.js";
+import { INPUT_WRAPPER_STYLES } from "../TextInput/TextInputBase.js";
 import { c } from "react/compiler-runtime";
-import { tasty } from "@tenphi/tasty";
+import { mergeStyles, 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";
@@ -18,69 +19,70 @@ import { useControlledState } from "@react-stately/utils";
 //#region src/components/fields/FileInput/FileInput.tsx
 const FileInputElement = tasty(Action, {
 	qa: "FileInputWrapper",
-	styles: {
-		display: "inline-flex",
-		position: "relative",
-		preset: "t3",
-		padding: ".5x 1x",
-		gap: "1x",
+	styles: mergeStyles(INPUT_WRAPPER_STYLES, {
+		display: "flex",
 		flow: "row",
 		placeItems: "center start",
-		fill: {
-			"": "#surface",
-			"drag-hover": "#primary.16",
-			":hover": "#primary.08",
-			disabled: "#disabled-surface"
+		gap: "1x",
+		width: "100%",
+		textAlign: "start",
+		padding: {
+			"": "0 (1x - 1bw) 0 (($size - 3x) / 2)",
+			suffix: "0 0 0 (($size - 3x) / 2)"
 		},
-		border: {
-			"": true,
-			valid: "#success-text.50",
-			invalid: "#danger-text.50",
-			":focus-within & :focus-visible": "#primary-text"
+		backgroundClip: "padding-box",
+		cursor: {
+			"": "$pointer",
+			disabled: "default"
 		},
-		radius: true,
-		cursor: "$pointer",
 		overflow: "hidden",
 		whiteSpace: "nowrap",
+		border: { "drag-hover": "#primary-accent-text" },
 		Button: {
-			radius: true,
-			border: {
-				"": "#clear",
-				pressed: "#primary.30"
+			display: "grid",
+			placeItems: "center",
+			flexShrink: 0,
+			height: "(3x - 2bw)",
+			padding: "0 1x",
+			preset: "t3m",
+			radius: "(1r - 1bw)",
+			fill: {
+				"": "#primary-accent-surface.12",
+				"hovered | drag-hover": "#primary-accent-surface.18",
+				pressed: "#primary-accent-surface.24"
 			},
-			fill: "#primary.12",
 			color: {
-				"": "#primary",
-				disabled: "#dark.30"
+				"": "#primary-accent-text",
+				disabled: "#primary-accent-disabled-text"
 			},
-			padding: ".5x (1.5x - 1bw)",
 			transition: "theme"
 		},
 		Placeholder: {
-			color: "#dark-02",
+			flexGrow: 1,
 			whiteSpace: "nowrap",
 			textOverflow: "ellipsis",
-			width: "max 100%",
-			overflow: "hidden"
+			overflow: "hidden",
+			color: {
+				"": "#surface-text-soft-2",
+				disabled: "#disabled-surface-text"
+			}
 		},
 		Value: {
-			color: "#dark-02",
+			flexGrow: 1,
 			whiteSpace: "nowrap",
 			textOverflow: "ellipsis",
-			width: "max 100%",
-			overflow: "hidden"
+			overflow: "hidden",
+			color: {
+				"": "#surface-text-soft",
+				disabled: "#disabled-surface-text"
+			}
 		},
 		State: {
+			$: ">",
 			display: "flex",
 			placeItems: "center"
 		},
-		ValidationIcon: {
-			$: "> State >",
-			display: "grid",
-			placeItems: "center",
-			width: "min 2x",
-			fontSize: "$icon-size"
-		},
+		ValidationIcon: { $: "> State >" },
 		Input: {
 			position: "absolute",
 			top: 0,
@@ -88,16 +90,20 @@ const FileInputElement = tasty(Action, {
 			bottom: 0,
 			left: 0,
 			opacity: .01,
-			cursor: "$pointer",
-			zIndex: 10
+			cursor: {
+				"": "$pointer",
+				disabled: "default"
+			},
+			zIndex: 10,
+			"&::file-selector-button": { cursor: "inherit" }
 		}
-	}
+	})
 });
 function extractFileNameFromValue(value) {
 	return typeof value === "string" ? value.split("\\")?.pop() : void 0;
 }
 function FileInput(allProps, ref) {
-	const $ = c(63);
+	const $ = c(68);
 	const { t } = useI18n();
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -105,37 +111,38 @@ 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 } = props;
+	const { id, name, qa, value, onChange, placeholder, inputRef: inputRefProp, isDisabled, isInvalid, isValid, inputStyles, type: t1, inputProps, accept, size: t2 } = props;
 	const type = t1 === void 0 ? "file" : t1;
+	const size = t2 === void 0 ? "default" : t2;
 	const [dragHover, setDragHover] = useState(false);
 	const [currentValue, setValue] = useControlledState(value, props.defaultValue ?? "", onChange);
 	const [selection, setSelection] = useState();
-	let t2;
+	let t3;
 	if ($[1] !== currentValue || $[2] !== selection?.name || $[3] !== selection?.value || $[4] !== type) {
-		t2 = type === "file" ? extractFileNameFromValue(currentValue) : currentValue === selection?.value ? selection?.name : void 0;
+		t3 = type === "file" ? extractFileNameFromValue(currentValue) : currentValue === selection?.value ? selection?.name : void 0;
 		$[1] = currentValue;
 		$[2] = selection?.name;
 		$[3] = selection?.value;
 		$[4] = type;
-		$[5] = t2;
-	} else t2 = $[5];
-	const fileName = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	const fileName = t3;
 	const reader = useRef(null);
 	const actionRef = useRef(null);
 	const inputRef = useCombinedRefs(inputRefProp);
-	let t3;
+	let t4;
 	if ($[6] !== currentValue || $[7] !== inputRef || $[8] !== selection?.value) {
-		t3 = () => {
+		t4 = () => {
 			if (inputRef.current && currentValue !== selection?.value) inputRef.current.value = "";
 		};
 		$[6] = currentValue;
 		$[7] = inputRef;
 		$[8] = selection?.value;
-		$[9] = t3;
-	} else t3 = $[9];
-	let t4;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
 	if ($[10] !== currentValue || $[11] !== inputRef || $[12] !== selection) {
-		t4 = [
+		t5 = [
 			currentValue,
 			selection,
 			inputRef
@@ -143,24 +150,24 @@ function FileInput(allProps, ref) {
 		$[10] = currentValue;
 		$[11] = inputRef;
 		$[12] = selection;
-		$[13] = t4;
-	} else t4 = $[13];
-	useEffect(t3, t4);
-	let t5;
-	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = () => () => reader.current?.abort();
-		$[14] = t5;
-	} else t5 = $[14];
+		$[13] = t5;
+	} else t5 = $[13];
+	useEffect(t4, t5);
 	let t6;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = () => () => reader.current?.abort();
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
 	if ($[15] !== type) {
-		t6 = [type];
+		t7 = [type];
 		$[15] = type;
-		$[16] = t6;
-	} else t6 = $[16];
-	useEffect(t5, t6);
-	let t7;
+		$[16] = t7;
+	} else t7 = $[16];
+	useEffect(t6, t7);
+	let t8;
 	if ($[17] !== setValue || $[18] !== type) {
-		t7 = (event) => {
+		t8 = (event) => {
 			reader.current?.abort();
 			const file = event.target.files?.[0];
 			const name_0 = file?.name ?? "";
@@ -181,9 +188,9 @@ function FileInput(allProps, ref) {
 		};
 		$[17] = setValue;
 		$[18] = type;
-		$[19] = t7;
-	} else t7 = $[19];
-	const onLocalChange = useEvent(t7);
+		$[19] = t8;
+	} else t8 = $[19];
+	const onLocalChange = useEvent(t8);
 	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`;
@@ -191,9 +198,9 @@ function FileInput(allProps, ref) {
 	const chooseFileId = `${id}-choose-file`;
 	const fileNameId = `${id}-file-name`;
 	const nameSource = ariaLabelledBy ?? (props.label ? labelId : ariaLabel ? triggerId : null);
-	let t8;
+	let t9;
 	if ($[20] !== inputRef) {
-		t8 = () => ({
+		t9 = () => ({
 			...createFocusableRef(unwrapDOMRef(actionRef), inputRef),
 			select() {
 				if (inputRef?.current) inputRef.current.select();
@@ -203,12 +210,12 @@ function FileInput(allProps, ref) {
 			}
 		});
 		$[20] = inputRef;
-		$[21] = t8;
-	} else t8 = $[21];
-	useImperativeHandle(ref, t8);
-	let t9;
+		$[21] = t9;
+	} else t9 = $[21];
+	useImperativeHandle(ref, t9);
+	let t10;
 	if ($[22] !== chooseFileId || $[23] !== fileNameId || $[24] !== nameSource) {
-		t9 = [
+		t10 = [
 			nameSource,
 			chooseFileId,
 			fileNameId
@@ -216,70 +223,85 @@ function FileInput(allProps, ref) {
 		$[22] = chooseFileId;
 		$[23] = fileNameId;
 		$[24] = nameSource;
-		$[25] = t9;
-	} else t9 = $[25];
-	const t10 = t9.join(" ");
-	const t11 = !!fileName;
-	let t12;
+		$[25] = t10;
+	} else t10 = $[25];
+	const t11 = t10.join(" ");
+	const t12 = !!fileName;
+	const t13 = dragHover && !isDisabled;
+	let t14;
 	if ($[26] !== isInvalid || $[27] !== isValid) {
-		t12 = getValidationMods({
+		t14 = hasValidationIndicator({
 			isInvalid,
 			isValid
 		});
 		$[26] = isInvalid;
 		$[27] = isValid;
-		$[28] = t12;
-	} else t12 = $[28];
-	let t13;
-	if ($[29] !== dragHover || $[30] !== t11 || $[31] !== t12) {
-		t13 = {
-			selected: t11,
-			"drag-hover": dragHover,
-			...t12
-		};
-		$[29] = dragHover;
-		$[30] = t11;
-		$[31] = t12;
-		$[32] = t13;
-	} else t13 = $[32];
-	let t14;
-	if ($[33] !== inputRef) {
-		t14 = (e) => {
-			if (e.key === "Enter" || e.key === "Space") inputRef?.current?.click();
-		};
-		$[33] = inputRef;
-		$[34] = t14;
-	} else t14 = $[34];
-	const t15 = qa || "FileInput";
+		$[28] = t14;
+	} else t14 = $[28];
+	let t15;
+	if ($[29] !== isInvalid || $[30] !== isValid) {
+		t15 = getValidationMods({
+			isInvalid,
+			isValid
+		});
+		$[29] = isInvalid;
+		$[30] = isValid;
+		$[31] = t15;
+	} else t15 = $[31];
 	let t16;
+	if ($[32] !== size || $[33] !== t12 || $[34] !== t13 || $[35] !== t14 || $[36] !== t15) {
+		t16 = {
+			size,
+			selected: t12,
+			"drag-hover": t13,
+			suffix: t14,
+			...t15
+		};
+		$[32] = size;
+		$[33] = t12;
+		$[34] = t13;
+		$[35] = t14;
+		$[36] = t15;
+		$[37] = t16;
+	} else t16 = $[37];
 	let t17;
-	let t18;
-	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
-		t16 = () => {
+	if ($[38] !== inputRef) {
+		t17 = (e) => {
+			if (!e.repeat && (e.key === "Enter" || e.key === " ")) inputRef?.current?.click();
+		};
+		$[38] = inputRef;
+		$[39] = t17;
+	} else t17 = $[39];
+	const t18 = qa || "FileInput";
+	let t19;
+	let t20;
+	let t21;
+	if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
+		t19 = () => {
 			setDragHover(true);
 		};
-		t17 = () => {
+		t20 = () => {
 			setDragHover(false);
 		};
-		t18 = () => {
+		t21 = () => {
 			setDragHover(false);
 		};
-		$[35] = t16;
-		$[36] = t17;
-		$[37] = t18;
+		$[40] = t19;
+		$[41] = t20;
+		$[42] = t21;
 	} else {
-		t16 = $[35];
-		t17 = $[36];
-		t18 = $[37];
+		t19 = $[40];
+		t20 = $[41];
+		t21 = $[42];
 	}
-	let t19;
-	if ($[38] !== accept || $[39] !== id || $[40] !== inputProps || $[41] !== inputRef || $[42] !== isDisabled || $[43] !== name || $[44] !== onLocalChange || $[45] !== t15) {
-		t19 = /* @__PURE__ */ jsx("input", {
+	let t22;
+	if ($[43] !== accept || $[44] !== id || $[45] !== inputProps || $[46] !== inputRef || $[47] !== isDisabled || $[48] !== name || $[49] !== onLocalChange || $[50] !== t18) {
+		t22 = /* @__PURE__ */ jsx("input", {
 			ref: inputRef,
 			id,
 			name,
 			accept,
-			"data-qa": t15,
+			"data-qa": t18,
 			"data-input-type": "fileinput",
 			"data-element": "Input",
 			disabled: isDisabled,
@@ -287,84 +309,84 @@ function FileInput(allProps, ref) {
 			multiple: false,
 			tabIndex: -1,
 			onChange: onLocalChange,
-			onDragEnter: t16,
-			onDragLeave: t17,
-			onDrop: t18,
+			onDragEnter: t19,
+			onDragLeave: t20,
+			onDrop: t21,
 			...inputProps
 		});
-		$[38] = accept;
-		$[39] = id;
-		$[40] = inputProps;
-		$[41] = inputRef;
-		$[42] = isDisabled;
-		$[43] = name;
-		$[44] = onLocalChange;
-		$[45] = t15;
-		$[46] = t19;
-	} else t19 = $[46];
-	let t20;
-	if ($[47] !== t) {
-		t20 = t("fileInput.chooseFile", "Choose file");
-		$[47] = t;
-		$[48] = t20;
-	} else t20 = $[48];
-	let t21;
-	if ($[49] !== chooseFileId || $[50] !== t20) {
-		t21 = /* @__PURE__ */ jsx("div", {
+		$[43] = accept;
+		$[44] = id;
+		$[45] = inputProps;
+		$[46] = inputRef;
+		$[47] = isDisabled;
+		$[48] = name;
+		$[49] = onLocalChange;
+		$[50] = t18;
+		$[51] = t22;
+	} else t22 = $[51];
+	let t23;
+	if ($[52] !== t) {
+		t23 = t("fileInput.chooseFile", "Choose file");
+		$[52] = t;
+		$[53] = t23;
+	} else t23 = $[53];
+	let t24;
+	if ($[54] !== chooseFileId || $[55] !== t23) {
+		t24 = /* @__PURE__ */ jsx("div", {
 			id: chooseFileId,
 			"data-element": "Button",
-			children: t20
+			children: t23
 		});
-		$[49] = chooseFileId;
-		$[50] = t20;
-		$[51] = t21;
-	} else t21 = $[51];
-	const t22 = fileName ? "Value" : "Placeholder";
-	let t23;
-	if ($[52] !== fileName || $[53] !== placeholder || $[54] !== t) {
-		t23 = fileName || placeholder || t("fileInput.noFileSelected", "No file selected");
-		$[52] = fileName;
-		$[53] = placeholder;
-		$[54] = t;
+		$[54] = chooseFileId;
 		$[55] = t23;
-	} else t23 = $[55];
-	let t24;
-	if ($[56] !== fileNameId || $[57] !== t22 || $[58] !== t23) {
-		t24 = /* @__PURE__ */ jsx("div", {
+		$[56] = t24;
+	} else t24 = $[56];
+	const t25 = fileName ? "Value" : "Placeholder";
+	let t26;
+	if ($[57] !== fileName || $[58] !== placeholder || $[59] !== t) {
+		t26 = fileName || placeholder || t("fileInput.noFileSelected", "No file selected");
+		$[57] = fileName;
+		$[58] = placeholder;
+		$[59] = t;
+		$[60] = t26;
+	} else t26 = $[60];
+	let t27;
+	if ($[61] !== fileNameId || $[62] !== t25 || $[63] !== t26) {
+		t27 = /* @__PURE__ */ jsx("div", {
 			id: fileNameId,
-			"data-element": t22,
-			children: t23
+			"data-element": t25,
+			children: t26
 		});
-		$[56] = fileNameId;
-		$[57] = t22;
-		$[58] = t23;
-		$[59] = t24;
-	} else t24 = $[59];
-	let t25;
-	if ($[60] !== isInvalid || $[61] !== isValid) {
-		t25 = /* @__PURE__ */ jsx(ValidationIndicator, {
+		$[61] = fileNameId;
+		$[62] = t25;
+		$[63] = t26;
+		$[64] = t27;
+	} else t27 = $[64];
+	let t28;
+	if ($[65] !== isInvalid || $[66] !== isValid) {
+		t28 = /* @__PURE__ */ jsx(ValidationIndicator, {
 			isInvalid,
 			isValid
 		});
-		$[60] = isInvalid;
-		$[61] = isValid;
-		$[62] = t25;
-	} else t25 = $[62];
+		$[65] = isInvalid;
+		$[66] = isValid;
+		$[67] = t28;
+	} else t28 = $[67];
 	return wrapWithField(/* @__PURE__ */ jsxs(FileInputElement, {
 		ref: actionRef,
 		id: triggerId,
 		"aria-label": ariaLabel,
-		"aria-labelledby": t10,
+		"aria-labelledby": t11,
 		"aria-describedby": ariaDescribedBy,
 		styles,
 		isDisabled,
-		mods: t13,
-		onKeyDown: t14,
+		mods: t16,
+		onKeyDown: t17,
 		children: [
-			t19,
-			t21,
+			t22,
 			t24,
-			t25
+			t27,
+			t28
 		]
 	}), {
 		...props,

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

@@ -1 +1 @@
-{"version":3,"file":"FileInput.js","names":["createFocusableRef","unwrapDOMRef","useControlledState","BaseProps","Styles","tasty","forwardRef","RefObject","useEffect","useImperativeHandle","useRef","useState","useEvent","useI18n","FieldBaseProps","mergeProps","useCombinedRefs","Action","FieldLayoutStyleProps","splitFieldLayout","useFieldProps","getValidationMods","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","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/useI18n';\nimport { FieldBaseProps } from '../../../shared/form';\nimport { mergeProps } from '../../../utils/react/mergeProps';\nimport { useCombinedRefs } from '../../../utils/react/useCombinedRefs';\nimport { Action } from '../../actions/Action/Action';\nimport {\n  FieldLayoutStyleProps,\n  splitFieldLayout,\n} from '../../form/field-layout';\nimport { useFieldProps } from '../../form/Form/use-field/use-field-props';\nimport { getValidationMods } from '../../form/validation/resolve-validation-props';\nimport { ValidationIndicator } from '../../form/validation/ValidationIndicator';\nimport { wrapWithField } from '../../form/wrapper';\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      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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"}
+{"version":3,"file":"FileInput.js","names":["createFocusableRef","unwrapDOMRef","useControlledState","BaseProps","mergeStyles","Styles","tasty","forwardRef","RefObject","useEffect","useImperativeHandle","useRef","useState","useEvent","useI18n","FieldBaseProps","mergeProps","useCombinedRefs","Action","FieldLayoutStyleProps","splitFieldLayout","useFieldProps","getValidationMods","hasValidationIndicator","ValidationIndicator","wrapWithField","INPUT_WRAPPER_STYLES","AriaLabelingProps","FocusableRefValue","ChangeEvent","AriaTextFieldProps","Props","FileInputElement","qa","styles","display","flow","placeItems","gap","width","textAlign","padding","suffix","backgroundClip","cursor","disabled","overflow","whiteSpace","border","Button","flexShrink","height","preset","radius","fill","pressed","color","transition","Placeholder","flexGrow","textOverflow","Value","State","$","ValidationIcon","Input","position","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","t2","dragHover","setDragHover","currentValue","setValue","selection","setSelection","t3","fileName","reader","actionRef","t4","current","t5","t6","abort","t7","t8","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","t9","select","getInputElement","t10","filter","Boolean","t11","join","t12","t13","t14","t15","t16","selected","t17","e","repeat","key","click","t18","t19","t20","t21","t22","t23","t24","t25","t26","t27","t28","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, mergeStyles, 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/useI18n';\nimport { FieldBaseProps } from '../../../shared/form';\nimport { mergeProps } from '../../../utils/react/mergeProps';\nimport { useCombinedRefs } from '../../../utils/react/useCombinedRefs';\nimport { Action } from '../../actions/Action/Action';\nimport {\n  FieldLayoutStyleProps,\n  splitFieldLayout,\n} from '../../form/field-layout';\nimport { useFieldProps } from '../../form/Form/use-field/use-field-props';\nimport { getValidationMods } from '../../form/validation/resolve-validation-props';\nimport {\n  hasValidationIndicator,\n  ValidationIndicator,\n} from '../../form/validation/ValidationIndicator';\nimport { wrapWithField } from '../../form/wrapper';\nimport { INPUT_WRAPPER_STYLES } from '../TextInput/TextInputBase';\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\n// The input box is the one every text field draws (`INPUT_WRAPPER_STYLES`):\n// its fill, border, radius and `$size` height per `size`, so the field lines\n// up with the inputs around it. The box itself is the button that opens the\n// file dialog, so it holds a \"Choose file\" chip, the file name and the state.\nconst FileInputElement = tasty(Action, {\n  qa: 'FileInputWrapper',\n  styles: mergeStyles(INPUT_WRAPPER_STYLES, {\n    display: 'flex',\n    flow: 'row',\n    placeItems: 'center start',\n    gap: '1x',\n    // A button sizes to its content even as a flex box, so it is told to\n    // fill the field, as the other inputs do.\n    width: '100%',\n    textAlign: 'start',\n    // The chip sits as far from the left edge as from the top and bottom. The\n    // validation icon (`suffix`) takes a text input's cell at the right edge.\n    padding: {\n      '': '0 (1x - 1bw) 0 (($size - 3x) / 2)',\n      suffix: '0 0 0 (($size - 3x) / 2)',\n    },\n    // The shared box clips its fill to the content box, which the padding\n    // would leave unpainted.\n    backgroundClip: 'padding-box',\n    cursor: {\n      '': '$pointer',\n      disabled: 'default',\n    },\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n    // A file dragged over the box marks it as the drop target, over its\n    // validation color.\n    border: {\n      'drag-hover': '#primary-accent-text',\n    },\n\n    Button: {\n      display: 'grid',\n      placeItems: 'center',\n      flexShrink: 0,\n      // The tallest an action gets inside a field (`$action-size`), at every\n      // size, so the label's line fits in a small box too.\n      height: '(3x - 2bw)',\n      padding: '0 1x',\n      preset: 't3m',\n      radius: '(1r - 1bw)',\n      fill: {\n        '': '#primary-accent-surface.12',\n        'hovered | drag-hover': '#primary-accent-surface.18',\n        pressed: '#primary-accent-surface.24',\n      },\n      // The accent text token, not the accent fill: it keeps AA contrast on\n      // the tinted chip in every scheme.\n      color: {\n        '': '#primary-accent-text',\n        disabled: '#primary-accent-disabled-text',\n      },\n      transition: 'theme',\n    },\n\n    // Both take the room left beside the chip, on one line that ends in an\n    // ellipsis. The placeholder is softer than a file name, and still AA.\n    Placeholder: {\n      flexGrow: 1,\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis',\n      overflow: 'hidden',\n      color: {\n        '': '#surface-text-soft-2',\n        disabled: '#disabled-surface-text',\n      },\n    },\n\n    Value: {\n      flexGrow: 1,\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis',\n      overflow: 'hidden',\n      color: {\n        '': '#surface-text-soft',\n        disabled: '#disabled-surface-text',\n      },\n    },\n\n    State: {\n      $: '>',\n      display: 'flex',\n      placeItems: 'center',\n    },\n\n    ValidationIcon: {\n      $: '> State >',\n    },\n\n    Input: {\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      opacity: 0.01,\n      cursor: {\n        '': '$pointer',\n        disabled: 'default',\n      },\n      zIndex: 10,\n\n      // The browser's own button sits over the chip and keeps its arrow.\n      '&::file-selector-button': {\n        cursor: 'inherit',\n      },\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    size = 'default',\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        size,\n        selected: !!fileName,\n        // A disabled input takes no drop.\n        'drag-hover': dragHover && !isDisabled,\n        suffix: hasValidationIndicator({ isInvalid, isValid }),\n        ...getValidationMods({ isInvalid, isValid }),\n      }}\n      onKeyDown={(e) => {\n        // The button's own click doesn't reach the input inside it. A held\n        // key opens the dialog once.\n        if (!e.repeat && (e.key === 'Enter' || e.key === ' ')) {\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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"}