@cube-dev/ui-kit 0.0.0-canary-bef9600 → 0.0.0-canary-e3f8a1a

package/dist/components/fields/NumberInput/StepButton.js

@@ -1,5 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bef9600 | Cube Dev Team */
-import { useI18n } from "../../../i18n/useI18n.js";
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e3f8a1a | Cube Dev Team */
 import { Button } from "../../actions/Button/Button.js";
 import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { c } from "react/compiler-runtime";
@@ -26,61 +25,52 @@ const StepButtonElement = tasty(Button, {
 	}
 });
 /**
-* Buttons for NumberField.
+* Buttons for NumberField. Their names come from `useNumberField`, which
+* `NumberInput` gives the translated labels.
 */
 function StepButton(props) {
-	const $ = c(14);
-	const { t } = useI18n();
-	let t0;
-	if ($[0] !== props.direction || $[1] !== t) {
-		t0 = props.direction === "up" ? t("numberInput.stepUp", "Step up") : t("numberInput.stepDown", "Step down");
-		$[0] = props.direction;
-		$[1] = t;
-		$[2] = t0;
-	} else t0 = $[2];
-	const label = t0;
-	const t1 = props.direction === "up";
-	const t2 = props.direction === "down";
-	let t3;
-	if ($[3] !== t1 || $[4] !== t2) {
-		t3 = {
-			up: t1,
-			down: t2
+	const $ = c(10);
+	const t0 = props.direction === "up";
+	const t1 = props.direction === "down";
+	let t2;
+	if ($[0] !== t0 || $[1] !== t1) {
+		t2 = {
+			up: t0,
+			down: t1
 		};
-		$[3] = t1;
-		$[4] = t2;
-		$[5] = t3;
-	} else t3 = $[5];
+		$[0] = t0;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = { fontSize: "$local-size" };
+		$[3] = t3;
+	} else t3 = $[3];
 	let t4;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = { fontSize: "$local-size" };
-		$[6] = t4;
-	} else t4 = $[6];
-	let t5;
-	if ($[7] !== props.direction) {
-		t5 = /* @__PURE__ */ jsx(DirectionIcon, {
+	if ($[4] !== props.direction) {
+		t4 = /* @__PURE__ */ jsx(DirectionIcon, {
 			to: props.direction,
-			styles: t4
+			styles: t3
 		});
-		$[7] = props.direction;
-		$[8] = t5;
-	} else t5 = $[8];
-	let t6;
-	if ($[9] !== label || $[10] !== props || $[11] !== t3 || $[12] !== t5) {
-		t6 = /* @__PURE__ */ jsx(StepButtonElement, {
+		$[4] = props.direction;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== props || $[7] !== t2 || $[8] !== t4) {
+		t5 = /* @__PURE__ */ jsx(StepButtonElement, {
 			type: "clear",
-			mods: t3,
-			"aria-label": label,
+			mods: t2,
+			"data-popover-keep-on-press": true,
 			...props,
-			children: t5
+			children: t4
 		});
-		$[9] = label;
-		$[10] = props;
-		$[11] = t3;
-		$[12] = t5;
-		$[13] = t6;
-	} else t6 = $[13];
-	return t6;
+		$[6] = props;
+		$[7] = t2;
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	return t5;
 }
 
 //#endregion

package/dist/components/fields/NumberInput/StepButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepButton.js","names":["Styles","tasty","useI18n","CaretDownIcon","CaretUpIcon","DirectionIcon","Button","StepButtonElement","type","styles","width","height","radius","down","padding","$size","Icon","StepButton","props","$","_c","t","t0","direction","label","t1","t2","t3","up","t4","Symbol","for","fontSize","t5","t6"],"sources":["../../../../src/components/fields/NumberInput/StepButton.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\n\nimport { useI18n } from '../../../i18n';\nimport { CaretDownIcon } from '../../../icons/CaretDownIcon';\nimport { CaretUpIcon } from '../../../icons/CaretUpIcon';\nimport { DirectionIcon } from '../../../icons/DirectionIcon';\nimport { Button } from '../../actions/Button/Button';\n\nconst StepButtonElement = tasty(Button, {\n  type: 'clear',\n  styles: {\n    width: '($local-size * 1.25)',\n    height: 'auto',\n    radius: {\n      '': '0 (1r - 1bw) 0 0',\n      down: '0 0 (1r - 1bw) 0',\n    },\n    padding: 0,\n\n    $size: 'inherit',\n    '$local-size': '(($size - 2bw) / 2)',\n\n    Icon: {\n      width: 'auto',\n      height: 'auto',\n    },\n  },\n});\n\n/**\n * Buttons for NumberField.\n */\nexport function StepButton(props) {\n  const { t } = useI18n();\n\n  const label =\n    props.direction === 'up'\n      ? t('numberInput.stepUp', 'Step up')\n      : t('numberInput.stepDown', 'Step down');\n\n  return (\n    <StepButtonElement\n      type=\"clear\"\n      mods={{\n        up: props.direction === 'up',\n        down: props.direction === 'down',\n      }}\n      aria-label={label}\n      {...props}\n    >\n      <DirectionIcon\n        to={props.direction}\n        styles={{ fontSize: '$local-size' }}\n      />\n    </StepButtonElement>\n  );\n}\n"],"mappings":";;;;;;;;;AAQA,MAAMO,oBAAoBN,MAAMK,QAAQ;CACtCE,MAAM;CACNC,QAAQ;EACNC,OAAO;EACPC,QAAQ;EACRC,QAAQ;GACN,IAAI;GACJC,MAAM;GACP;EACDC,SAAS;EAETC,OAAO;EACP,eAAe;EAEfC,MAAM;GACJN,OAAO;GACPC,QAAQ;GACV;EACF;CACD,CAAC;;;;AAKF,SAAOM,WAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CACL,MAAA,EAAAC,MAAcnB,SAAS;CAAC,IAAAoB;AAAA,KAAAH,EAAA,OAAAD,MAAAK,aAAAJ,EAAA,OAAAE,GAAA;AAGtBC,OAAAJ,MAAKK,cAAe,OAChBF,EAAE,sBAAsB,UACc,GAAtCA,EAAE,wBAAwB,YAAY;AAAAF,IAAA,KAAAD,MAAAK;AAAAJ,IAAA,KAAAE;AAAAF,IAAA,KAAAG;OAAAA,MAAAH,EAAA;CAH5C,MAAAK,QACEF;CAQQ,MAAAG,KAAAP,MAAKK,cAAe;CAClB,MAAAG,KAAAR,MAAKK,cAAe;CAAM,IAAAI;AAAA,KAAAR,EAAA,OAAAM,MAAAN,EAAA,OAAAO,IAAA;AAF5BC,OAAA;GAAAC,IACAH;GAAwBZ,MACtBa;GACP;AAAAP,IAAA,KAAAM;AAAAN,IAAA,KAAAO;AAAAP,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;CAAA,IAAAU;AAAA,KAAAV,EAAA,OAAAW,OAAAC,IAAA,4BAAA,EAAA;AAMSF,OAAA,EAAAG,UAAY,eAAe;AAAAb,IAAA,KAAAU;OAAAA,MAAAV,EAAA;CAAA,IAAAc;AAAA,KAAAd,EAAA,OAAAD,MAAAK,WAAA;AAFrCU,OAAA,oBAAC;GACK,IAAAf,MAAKK;GACD,QAAAM;IACR;AAAAV,IAAA,KAAAD,MAAAK;AAAAJ,IAAA,KAAAc;OAAAA,MAAAd,EAAA;CAAA,IAAAe;AAAA,KAAAf,EAAA,OAAAK,SAAAL,EAAA,QAAAD,SAAAC,EAAA,QAAAQ,MAAAR,EAAA,QAAAc,IAAA;AAZJC,OAAA,oBAAC;GACM,MAAA;GACC,MAAAP;GAIMH,cAAAA;GAAK,GACbN;aAEJe;IAIkB;AAAAd,IAAA,KAAAK;AAAAL,IAAA,MAAAD;AAAAC,IAAA,MAAAQ;AAAAR,IAAA,MAAAc;AAAAd,IAAA,MAAAe;OAAAA,MAAAf,EAAA;AAAA,QAbpBe"}
+{"version":3,"file":"StepButton.js","names":["tasty","DirectionIcon","Button","StepButtonElement","type","styles","width","height","radius","down","padding","$size","Icon","StepButton","props","$","_c","t0","direction","t1","t2","up","t3","Symbol","for","fontSize","t4","t5"],"sources":["../../../../src/components/fields/NumberInput/StepButton.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { DirectionIcon } from '../../../icons/DirectionIcon';\nimport { Button } from '../../actions/Button/Button';\n\nconst StepButtonElement = tasty(Button, {\n  type: 'clear',\n  styles: {\n    width: '($local-size * 1.25)',\n    height: 'auto',\n    radius: {\n      '': '0 (1r - 1bw) 0 0',\n      down: '0 0 (1r - 1bw) 0',\n    },\n    padding: 0,\n\n    $size: 'inherit',\n    '$local-size': '(($size - 2bw) / 2)',\n\n    Icon: {\n      width: 'auto',\n      height: 'auto',\n    },\n  },\n});\n\n/**\n * Buttons for NumberField. Their names come from `useNumberField`, which\n * `NumberInput` gives the translated labels.\n */\nexport function StepButton(props) {\n  return (\n    <StepButtonElement\n      type=\"clear\"\n      mods={{\n        up: props.direction === 'up',\n        down: props.direction === 'down',\n      }}\n      // Stepping is an edit, not a choice: a press must not close a popover\n      // the field sits in.\n      data-popover-keep-on-press\n      {...props}\n    >\n      <DirectionIcon\n        to={props.direction}\n        styles={{ fontSize: '$local-size' }}\n      />\n    </StepButtonElement>\n  );\n}\n"],"mappings":";;;;;;;;AAKA,MAAMG,oBAAoBH,MAAME,QAAQ;CACtCE,MAAM;CACNC,QAAQ;EACNC,OAAO;EACPC,QAAQ;EACRC,QAAQ;GACN,IAAI;GACJC,MAAM;GACP;EACDC,SAAS;EAETC,OAAO;EACP,eAAe;EAEfC,MAAM;GACJN,OAAO;GACPC,QAAQ;GACV;EACF;CACD,CAAC;;;;;AAMF,SAAOM,WAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAKK,MAAAC,KAAAH,MAAKI,cAAe;CAClB,MAAAC,KAAAL,MAAKI,cAAe;CAAM,IAAAE;AAAA,KAAAL,EAAA,OAAAE,MAAAF,EAAA,OAAAI,IAAA;AAF5BC,OAAA;GAAAC,IACAJ;GAAwBR,MACtBU;GACP;AAAAJ,IAAA,KAAAE;AAAAF,IAAA,KAAAI;AAAAJ,IAAA,KAAAK;OAAAA,MAAAL,EAAA;CAAA,IAAAO;AAAA,KAAAP,EAAA,OAAAQ,OAAAC,IAAA,4BAAA,EAAA;AAQSF,OAAA,EAAAG,UAAY,eAAe;AAAAV,IAAA,KAAAO;OAAAA,MAAAP,EAAA;CAAA,IAAAW;AAAA,KAAAX,EAAA,OAAAD,MAAAI,WAAA;AAFrCQ,OAAA,oBAAC;GACK,IAAAZ,MAAKI;GACD,QAAAI;IACR;AAAAP,IAAA,KAAAD,MAAAI;AAAAH,IAAA,KAAAW;OAAAA,MAAAX,EAAA;CAAA,IAAAY;AAAA,KAAAZ,EAAA,OAAAD,SAAAC,EAAA,OAAAK,MAAAL,EAAA,OAAAW,IAAA;AAdJC,OAAA,oBAAC;GACM,MAAA;GACC,MAAAP;GAMN,8BAAA;GAA0B,GACtBN;aAEJY;IAIkB;AAAAX,IAAA,KAAAD;AAAAC,IAAA,KAAAK;AAAAL,IAAA,KAAAW;AAAAX,IAAA,KAAAY;OAAAA,MAAAZ,EAAA;AAAA,QAfpBY"}

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

@@ -1,8 +1,7 @@
 
 import { TextFieldKeyboardProps } from "../../../shared/form.js";
-import { WithNullableValue } from "../../../utils/react/nullableValue.js";
 import { CubeBufferedValueProps, CubeTextInputBaseProps } from "../TextInput/TextInputBase.js";
-import "../TextInput/index.js";
+import { WithNullableValue } from "../../../utils/react/nullableValue.js";
 import * as react from "react";
 import { AriaTextFieldProps } from "react-aria";
 

package/dist/components/fields/PasswordInput/PasswordInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bef9600 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e3f8a1a | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useBufferedValue } from "../../../utils/react/useBufferedValue.js";
@@ -10,6 +10,7 @@ import { EyeInvisibleIcon } from "../../../icons/EyeInvisibleIcon.js";
 import { castNullableStringValue } from "../../../utils/react/nullableValue.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { TextInputBase } from "../TextInput/TextInputBase.js";
+import { useDisplayedValidation } from "../TextInput/displayed-validation.js";
 import { c } from "react/compiler-runtime";
 import { forwardRef, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -17,7 +18,7 @@ import { useTextField } from "react-aria";
 
 //#region src/components/fields/PasswordInput/PasswordInput.tsx
 function PasswordInput(rawProps, ref) {
-	const $ = c(39);
+	const $ = c(19);
 	const { t } = useI18n();
 	let t0;
 	if ($[0] !== rawProps) {
@@ -44,121 +45,86 @@ function PasswordInput(rawProps, ref) {
 		isDisabled: rest.isDisabled,
 		isReadOnly: rest.isReadOnly
 	});
-	const t2 = buffered.value;
-	const t3 = buffered.onChange;
-	const t4 = chain(rest.onBlur, buffered.reset);
-	let t5;
-	if ($[3] !== buffered.onChange || $[4] !== buffered.value || $[5] !== rest || $[6] !== t4 || $[7] !== type) {
-		t5 = {
-			...rest,
-			value: t2,
-			onChange: t3,
-			onBlur: t4,
-			type
+	const displayedValidation = useDisplayedValidation();
+	const { labelProps, inputProps, ...validation } = useTextField(displayedValidation.trackTouched({
+		...rest,
+		value: buffered.value,
+		onChange: buffered.onChange,
+		onBlur: chain(rest.onBlur, buffered.reset),
+		type
+	}), inputRef);
+	let t2;
+	if ($[3] !== labelProps || $[4] !== userLabelProps) {
+		t2 = mergeProps$1(labelProps, userLabelProps);
+		$[3] = labelProps;
+		$[4] = userLabelProps;
+		$[5] = t2;
+	} else t2 = $[5];
+	const mergedLabelProps = t2;
+	let t3;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = () => {
+			setType(_temp2);
 		};
-		$[3] = buffered.onChange;
-		$[4] = buffered.value;
-		$[5] = rest;
-		$[6] = t4;
-		$[7] = type;
+		$[6] = t3;
+	} else t3 = $[6];
+	const toggleType = t3;
+	const t4 = rest.isDisabled;
+	let t5;
+	if ($[7] !== t) {
+		t5 = t("passwordInput.showPassword", "Show password");
+		$[7] = t;
 		$[8] = t5;
 	} else t5 = $[8];
-	const { labelProps, inputProps } = useTextField(t5, inputRef);
-	let t6;
-	if ($[9] !== labelProps || $[10] !== userLabelProps) {
-		t6 = mergeProps$1(labelProps, userLabelProps);
-		$[9] = labelProps;
-		$[10] = userLabelProps;
-		$[11] = t6;
-	} else t6 = $[11];
-	const mergedLabelProps = t6;
+	const t6 = type === "text";
 	let t7;
-	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = () => {
-			setType(_temp2);
-		};
-		$[12] = t7;
-	} else t7 = $[12];
-	const toggleType = t7;
-	const t8 = rest.isDisabled;
-	let t9;
-	if ($[13] !== t) {
-		t9 = t("passwordInput.toggleMasking", "Toggle masking");
-		$[13] = t;
-		$[14] = t9;
-	} else t9 = $[14];
-	let t10;
-	if ($[15] !== type) {
-		t10 = type === "password" ? /* @__PURE__ */ jsx(EyeInvisibleIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {});
-		$[15] = type;
-		$[16] = t10;
-	} else t10 = $[16];
-	let t11;
-	if ($[17] !== t10 || $[18] !== t9) {
-		t11 = /* @__PURE__ */ jsx(ItemAction, {
-			tooltip: t9,
-			icon: t10,
+	if ($[9] !== type) {
+		t7 = type === "password" ? /* @__PURE__ */ jsx(EyeInvisibleIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {});
+		$[9] = type;
+		$[10] = t7;
+	} else t7 = $[10];
+	let t8;
+	if ($[11] !== t5 || $[12] !== t6 || $[13] !== t7) {
+		t8 = /* @__PURE__ */ jsx(ItemAction, {
+			tooltip: t5,
+			"aria-pressed": t6,
+			icon: t7,
 			onPress: toggleType
 		});
-		$[17] = t10;
-		$[18] = t9;
-		$[19] = t11;
-	} else t11 = $[19];
-	let t12;
-	if ($[20] !== rest.isDisabled || $[21] !== t11) {
-		t12 = /* @__PURE__ */ jsx(ItemActionProvider, {
-			isDisabled: t8,
-			children: t11
-		});
-		$[20] = rest.isDisabled;
-		$[21] = t11;
-		$[22] = t12;
-	} else t12 = $[22];
-	let t13;
-	if ($[23] !== suffix || $[24] !== t12) {
-		t13 = /* @__PURE__ */ jsxs(Fragment$1, { children: [suffix, t12] });
-		$[23] = suffix;
-		$[24] = t12;
-		$[25] = t13;
-	} else t13 = $[25];
-	const wrappedSuffix = t13;
-	let t14;
-	if ($[26] !== inputProps || $[27] !== userInputProps) {
-		t14 = mergeProps$1(inputProps, { "data-input-type": "passwordinput" }, userInputProps);
-		$[26] = inputProps;
-		$[27] = userInputProps;
-		$[28] = t14;
-	} else t14 = $[28];
-	let t15;
-	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
-		t15 = { paddingRight: "4x" };
-		$[29] = t15;
-	} else t15 = $[29];
-	let t16;
-	if ($[30] !== inputRef || $[31] !== mergedLabelProps || $[32] !== multiLine || $[33] !== ref || $[34] !== rest || $[35] !== t14 || $[36] !== type || $[37] !== wrappedSuffix) {
-		t16 = /* @__PURE__ */ jsx(TextInputBase, {
-			ref,
-			labelProps: mergedLabelProps,
-			inputProps: t14,
-			inputRef,
-			inputStyles: t15,
-			type,
-			suffixPosition: "after",
-			suffix: wrappedSuffix,
-			multiLine,
-			...rest
-		});
-		$[30] = inputRef;
-		$[31] = mergedLabelProps;
-		$[32] = multiLine;
-		$[33] = ref;
-		$[34] = rest;
-		$[35] = t14;
-		$[36] = type;
-		$[37] = wrappedSuffix;
-		$[38] = t16;
-	} else t16 = $[38];
-	return t16;
+		$[11] = t5;
+		$[12] = t6;
+		$[13] = t7;
+		$[14] = t8;
+	} else t8 = $[14];
+	const wrappedSuffix = /* @__PURE__ */ jsxs(Fragment$1, { children: [suffix, /* @__PURE__ */ jsx(ItemActionProvider, {
+		isDisabled: t4,
+		children: t8
+	})] });
+	let t9;
+	if ($[15] !== inputProps || $[16] !== userInputProps) {
+		t9 = mergeProps$1(inputProps, { "data-input-type": "passwordinput" }, userInputProps);
+		$[15] = inputProps;
+		$[16] = userInputProps;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = { paddingRight: "4x" };
+		$[18] = t10;
+	} else t10 = $[18];
+	return /* @__PURE__ */ jsx(TextInputBase, {
+		ref,
+		labelProps: mergedLabelProps,
+		inputProps: t9,
+		inputRef,
+		inputStyles: t10,
+		type,
+		suffixPosition: "after",
+		suffix: wrappedSuffix,
+		multiLine,
+		...rest,
+		...displayedValidation.getDisplayedValidation(rest, validation)
+	});
 }
 /**
 * PasswordInputs are password inputs that allow users to input passwords or code entries

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

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","names":["ForwardedRef","forwardRef","RefObject","useRef","useState","AriaTextFieldProps","useTextField","useI18n","EyeIcon","EyeInvisibleIcon","chain","mergeProps","useBufferedValue","castNullableStringValue","WithNullableValue","ItemAction","ItemActionProvider","useFieldProps","CubeBufferedValueProps","CubeTextInputBaseProps","TextInputBase","TextFieldKeyboardProps","CubePasswordInputProps","Omit","validate","PasswordInput","rawProps","ref","$","_c","t","t0","t1","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","type","setType","labelProps","userLabelProps","inputProps","userInputProps","suffix","multiLine","inputRef","propsInputRef","form","isBuffered","rest","localInputRef","buffered","value","onChange","isDisabled","isReadOnly","t2","t3","t4","onBlur","reset","t5","HTMLInputElement","t6","mergedLabelProps","t7","_temp2","toggleType","t8","t9","t10","t11","t12","t13","wrappedSuffix","t14","t15","paddingRight","t16","type_0","toString","_PasswordInput","cubeInputType","displayName"],"sources":["../../../../src/components/fields/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, RefObject, useRef, useState } from 'react';\nimport { AriaTextFieldProps, useTextField } from 'react-aria';\n\nimport { useI18n } from '../../../i18n';\nimport { EyeIcon } from '../../../icons/EyeIcon';\nimport { EyeInvisibleIcon } from '../../../icons/EyeInvisibleIcon';\nimport { chain, mergeProps, useBufferedValue } from '../../../utils/react';\nimport {\n  castNullableStringValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { ItemAction, ItemActionProvider } from '../../actions';\nimport { useFieldProps } from '../../form';\nimport {\n  CubeBufferedValueProps,\n  CubeTextInputBaseProps,\n  TextInputBase,\n} from '../TextInput';\n\nimport type { TextFieldKeyboardProps } from '../../../shared/form';\n\nexport interface CubePasswordInputProps\n  extends WithNullableValue<Omit<CubeTextInputBaseProps, 'validate'>>,\n    CubeBufferedValueProps,\n    TextFieldKeyboardProps {\n  validate?: AriaTextFieldProps['validate'];\n}\n\nfunction PasswordInput(\n  rawProps: CubePasswordInputProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n\n  rawProps = castNullableStringValue(rawProps);\n  let props = useFieldProps(rawProps, {\n    defaultValidationTrigger: 'onBlur',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value?.toString() ?? '',\n      onChange,\n    }),\n  });\n\n  let [type, setType] = useState('password');\n  let {\n    labelProps: userLabelProps,\n    inputProps: userInputProps,\n    suffix,\n    multiLine,\n    inputRef: propsInputRef,\n    // The form instance, not the DOM `form` id `useTextField` forwards.\n    form,\n    isBuffered,\n    ...rest\n  } = props;\n  let localInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n  let inputRef = propsInputRef ?? localInputRef;\n\n  // Hold the typed text locally until the controlled value catches up — see `useBufferedValue`.\n  let buffered = useBufferedValue(rest.value, rest.onChange, {\n    isBuffered,\n    isDisabled: rest.isDisabled,\n    isReadOnly: rest.isReadOnly,\n  });\n\n  let { labelProps, inputProps } = useTextField(\n    {\n      ...rest,\n      value: buffered.value,\n      onChange: buffered.onChange,\n      onBlur: chain(rest.onBlur, buffered.reset),\n      type,\n    },\n    inputRef as RefObject<HTMLInputElement | null>,\n  );\n\n  // Merge user-provided labelProps with aria labelProps\n  const mergedLabelProps = mergeProps(labelProps, userLabelProps);\n\n  const toggleType = () => {\n    setType((type) => (type === 'password' ? 'text' : 'password'));\n  };\n\n  const wrappedSuffix = (\n    <>\n      {suffix}\n      {/*\n        The disabled state travels through the provider rather than as a prop on\n        the action. Both disable it, but the provider marks the state as\n        INHERITED from the field, and `current` paints from the colour it\n        inherits — which a disabled field has already faded — so a second fade\n        would multiply the two down to roughly a tenth opacity. No `type` is\n        passed, so the `context` mod stays off and the toggle keeps its margins.\n      */}\n      <ItemActionProvider isDisabled={rest.isDisabled}>\n        <ItemAction\n          // No `type` — the default `current` type inherits the input's own text\n          // color, so the toggle follows the field's theme, validation state and\n          // disabled state rather than staying opaque against faded text.\n          tooltip={t('passwordInput.toggleMasking', 'Toggle masking')}\n          icon={type === 'password' ? <EyeInvisibleIcon /> : <EyeIcon />}\n          onPress={toggleType}\n        />\n      </ItemActionProvider>\n    </>\n  );\n\n  return (\n    <TextInputBase\n      ref={ref}\n      labelProps={mergedLabelProps}\n      inputProps={mergeProps(\n        inputProps,\n        { 'data-input-type': 'passwordinput' },\n        userInputProps,\n      )}\n      inputRef={inputRef}\n      inputStyles={{ paddingRight: '4x' }}\n      type={type}\n      suffixPosition=\"after\"\n      suffix={wrappedSuffix}\n      multiLine={multiLine}\n      {...rest}\n    />\n  );\n}\n\n/**\n * PasswordInputs are password inputs that allow users to input passwords or code entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nconst _PasswordInput = forwardRef(PasswordInput);\n\n(_PasswordInput as any).cubeInputType = 'Text';\n_PasswordInput.displayName = 'PasswordInput';\n\nexport { _PasswordInput as PasswordInput };\n"],"mappings":"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"}
+{"version":3,"file":"PasswordInput.js","names":["ForwardedRef","forwardRef","RefObject","useRef","useState","AriaTextFieldProps","useTextField","useI18n","EyeIcon","EyeInvisibleIcon","chain","mergeProps","useBufferedValue","castNullableStringValue","WithNullableValue","ItemAction","ItemActionProvider","useFieldProps","useDisplayedValidation","CubeBufferedValueProps","CubeTextInputBaseProps","TextInputBase","TextFieldKeyboardProps","CubePasswordInputProps","Omit","validate","PasswordInput","rawProps","ref","$","_c","t","t0","t1","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","type","setType","labelProps","userLabelProps","inputProps","userInputProps","suffix","multiLine","inputRef","propsInputRef","form","isBuffered","rest","localInputRef","buffered","value","onChange","isDisabled","isReadOnly","displayedValidation","validation","trackTouched","onBlur","reset","HTMLInputElement","t2","mergedLabelProps","t3","_temp2","toggleType","t4","t5","t6","t7","t8","wrappedSuffix","t9","t10","paddingRight","getDisplayedValidation","type_0","toString","_PasswordInput","cubeInputType","displayName"],"sources":["../../../../src/components/fields/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, RefObject, useRef, useState } from 'react';\nimport { AriaTextFieldProps, useTextField } from 'react-aria';\n\nimport { useI18n } from '../../../i18n';\nimport { EyeIcon } from '../../../icons/EyeIcon';\nimport { EyeInvisibleIcon } from '../../../icons/EyeInvisibleIcon';\nimport { chain, mergeProps, useBufferedValue } from '../../../utils/react';\nimport {\n  castNullableStringValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { ItemAction } from '../../actions/ItemAction/ItemAction';\nimport { ItemActionProvider } from '../../actions/ItemActionContext';\nimport { useFieldProps } from '../../form';\nimport { useDisplayedValidation } from '../TextInput/displayed-validation';\nimport {\n  CubeBufferedValueProps,\n  CubeTextInputBaseProps,\n  TextInputBase,\n} from '../TextInput/TextInputBase';\n\nimport type { TextFieldKeyboardProps } from '../../../shared/form';\n\nexport interface CubePasswordInputProps\n  extends WithNullableValue<Omit<CubeTextInputBaseProps, 'validate'>>,\n    CubeBufferedValueProps,\n    TextFieldKeyboardProps {\n  validate?: AriaTextFieldProps['validate'];\n}\n\nfunction PasswordInput(\n  rawProps: CubePasswordInputProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n\n  rawProps = castNullableStringValue(rawProps);\n  let props = useFieldProps(rawProps, {\n    defaultValidationTrigger: 'onBlur',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value?.toString() ?? '',\n      onChange,\n    }),\n  });\n\n  let [type, setType] = useState('password');\n  let {\n    labelProps: userLabelProps,\n    inputProps: userInputProps,\n    suffix,\n    multiLine,\n    inputRef: propsInputRef,\n    // The form instance, not the DOM `form` id `useTextField` forwards.\n    form,\n    isBuffered,\n    ...rest\n  } = props;\n  let localInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n  let inputRef = propsInputRef ?? localInputRef;\n\n  // Hold the typed text locally until the controlled value catches up — see `useBufferedValue`.\n  let buffered = useBufferedValue(rest.value, rest.onChange, {\n    isBuffered,\n    isDisabled: rest.isDisabled,\n    isReadOnly: rest.isReadOnly,\n  });\n\n  let displayedValidation = useDisplayedValidation();\n  let { labelProps, inputProps, ...validation } = useTextField(\n    displayedValidation.trackTouched({\n      ...rest,\n      value: buffered.value,\n      onChange: buffered.onChange,\n      onBlur: chain(rest.onBlur, buffered.reset),\n      type,\n    }),\n    inputRef as RefObject<HTMLInputElement | null>,\n  );\n\n  // Merge user-provided labelProps with aria labelProps\n  const mergedLabelProps = mergeProps(labelProps, userLabelProps);\n\n  const toggleType = () => {\n    setType((type) => (type === 'password' ? 'text' : 'password'));\n  };\n\n  const wrappedSuffix = (\n    <>\n      {suffix}\n      {/*\n        The disabled state travels through the provider rather than as a prop on\n        the action. Both disable it, but the provider marks the state as\n        INHERITED from the field, and `current` paints from the colour it\n        inherits — which a disabled field has already faded — so a second fade\n        would multiply the two down to roughly a tenth opacity. No `type` is\n        passed, so the `context` mod stays off and the toggle keeps its margins.\n      */}\n      <ItemActionProvider isDisabled={rest.isDisabled}>\n        <ItemAction\n          // No `type` — the default `current` type inherits the input's own text\n          // color, so the toggle follows the field's theme, validation state and\n          // disabled state rather than staying opaque against faded text.\n          // A toggle button keeps one name and reports its state with\n          // `aria-pressed`: pressed means the password is shown.\n          tooltip={t('passwordInput.showPassword', 'Show password')}\n          aria-pressed={type === 'text'}\n          icon={type === 'password' ? <EyeInvisibleIcon /> : <EyeIcon />}\n          onPress={toggleType}\n        />\n      </ItemActionProvider>\n    </>\n  );\n\n  return (\n    <TextInputBase\n      ref={ref}\n      labelProps={mergedLabelProps}\n      inputProps={mergeProps(\n        inputProps,\n        { 'data-input-type': 'passwordinput' },\n        userInputProps,\n      )}\n      inputRef={inputRef}\n      inputStyles={{ paddingRight: '4x' }}\n      type={type}\n      suffixPosition=\"after\"\n      suffix={wrappedSuffix}\n      multiLine={multiLine}\n      {...rest}\n      {...displayedValidation.getDisplayedValidation(rest, validation)}\n    />\n  );\n}\n\n/**\n * PasswordInputs are password inputs that allow users to input passwords or code entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nconst _PasswordInput = forwardRef(PasswordInput);\n\n(_PasswordInput as any).cubeInputType = 'Text';\n_PasswordInput.displayName = 'PasswordInput';\n\nexport { _PasswordInput as PasswordInput };\n"],"mappings":"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"}

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

@@ -16,7 +16,7 @@ import { ListState, Section } from "react-stately";
 interface CubePickerProps<T> extends Omit<CubeListBoxProps<T>, 'size' | 'shape' | 'emptyLabel' | 'isFocusWithin'>, Omit<CubeItemProps, 'children' | 'size' | 'tooltip'>, BasePropsWithoutChildren, BaseStyleProps, OuterStyleProps, ColorStyleProps, FieldBaseProps<string | number | readonly (string | number)[] | null | undefined>, Pick<CubeItemButtonProps, 'type' | 'theme' | 'icon' | 'rightIcon' | 'prefix' | 'suffix' | 'hotkeys' | 'shape'> {
   /** Accessible name for the picker trigger when there is no visible label. */
   'aria-label'?: string;
-  /** Ids of elements that also describe the trigger, beside the field's own description and message. */
+  /** Ids of elements that also describe the trigger, beside the displayed value and the field's own description and message. */
   'aria-describedby'?: string;
   /** Placeholder text when no selection is made */
   placeholder?: string;

package/dist/components/fields/Picker/Picker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bef9600 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e3f8a1a | Cube Dev Team */
 import { extractStyles, mergeStyleLayers } from "../../../utils/styles.js";
 import { _Text } from "../../content/Text.js";
 import { isTextOnly } from "../../../utils/react/isTextOnly.js";
@@ -22,7 +22,7 @@ import { ListBox } from "../ListBox/ListBox.js";
 import { TriggerActions } from "../TriggerActions.js";
 import { processSelectionArray } from "../../../utils/selection.js";
 import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
-import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { FocusScope, mergeProps, useLabel } from "react-aria";
 import { Section, useListState } from "react-stately";
@@ -66,6 +66,7 @@ const Picker = forwardRef(function Picker(props, ref) {
 	const [internalSelectedKeys, setInternalSelectedKeys] = useState(defaultSelectedKeys ?? []);
 	const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 	const triggerRef = useRef(null);
+	const valueId = useId();
 	const { labelProps, fieldProps: triggerLabelProps } = useLabel({
 		id: props.id,
 		label,
@@ -256,6 +257,8 @@ const Picker = forwardRef(function Picker(props, ref) {
 			onPress: clearValue
 		}) : /* @__PURE__ */ jsx(ItemActionIcon, { children: /* @__PURE__ */ jsx(DirectionIcon, { to: isPopoverOpen ? "top" : "bottom" }) })
 	});
+	const triggerValueId = triggerContent ? valueId : void 0;
+	const triggerDescribedBy = [triggerValueId, ariaDescribedBy].filter(Boolean).join(" ") || void 0;
 	const triggerElement = /* @__PURE__ */ jsx(_ItemButton, {
 		ref: triggerRef,
 		"data-popover-trigger": true,
@@ -282,7 +285,9 @@ const Picker = forwardRef(function Picker(props, ref) {
 		styles: triggerStyles,
 		...keyboardProps,
 		...mergeProps(triggerLabelProps, { id }),
-		"aria-describedby": ariaDescribedBy,
+		labelProps: triggerValueId ? { id: triggerValueId } : void 0,
+		"aria-haspopup": "dialog",
+		"aria-describedby": triggerDescribedBy,
 		children: triggerContent
 	});
 	const handleSelectionChange = useEvent((selection) => {