@cube-dev/ui-kit 0.196.0 → 0.198.0

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { castNullableNumberValue } from "../../../utils/react/nullableValue.js";
@@ -12,7 +12,6 @@ import { forwardRef, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps, useKeyboard, useLocale, useNumberField } from "react-aria";
 import { useNumberFieldState } from "react-stately";
-
 //#region src/components/fields/NumberInput/NumberInput.tsx
 const StyledTextInputBase = tasty(TextInputBase, { inputStyles: { textAlign: "right" } });
 const StepperContainer = tasty({ styles: {
@@ -24,7 +23,7 @@ const StepperContainer = tasty({ styles: {
 	margin: "(.5x - 1bw) left"
 } });
 function NumberInput(rawProps, ref) {
-	const $ = c(51);
+	const $ = c(52);
 	const { t } = useI18n();
 	let t0;
 	if ($[0] !== rawProps) {
@@ -33,103 +32,108 @@ function NumberInput(rawProps, ref) {
 		$[1] = t0;
 	} else t0 = $[1];
 	rawProps = t0;
-	const props = useFieldProps(rawProps);
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { showsValidateErrors: true };
+		$[2] = t1;
+	} else t1 = $[2];
+	const props = useFieldProps(rawProps, t1);
 	let { hideStepper, suffix, value, defaultValue, onChange, inputRef, labelProps: userLabelProps, inputProps: userInputProps, wrapperProps, ...otherProps } = props;
 	const showStepper = !hideStepper;
 	const { locale } = useLocale();
 	const displayedValidation = useDisplayedValidation();
-	let t1;
-	if ($[2] !== displayedValidation || $[3] !== props) {
-		t1 = displayedValidation.trackTouched(props);
-		$[2] = displayedValidation;
-		$[3] = props;
-		$[4] = t1;
-	} else t1 = $[4];
-	const ariaProps = t1;
 	let t2;
-	if ($[5] !== ariaProps || $[6] !== locale) {
-		t2 = {
+	if ($[3] !== displayedValidation || $[4] !== props) {
+		t2 = displayedValidation.trackTouched(props);
+		$[3] = displayedValidation;
+		$[4] = props;
+		$[5] = t2;
+	} else t2 = $[5];
+	const ariaProps = t2;
+	let t3;
+	if ($[6] !== ariaProps || $[7] !== locale) {
+		t3 = {
 			...ariaProps,
 			locale
 		};
-		$[5] = ariaProps;
-		$[6] = locale;
-		$[7] = t2;
-	} else t2 = $[7];
-	const state = useNumberFieldState(t2);
+		$[6] = ariaProps;
+		$[7] = locale;
+		$[8] = t3;
+	} else t3 = $[8];
+	const state = useNumberFieldState(t3);
 	const localInputRef = useRef(null);
 	inputRef = inputRef ?? localInputRef;
-	let t3;
-	if ($[8] !== ariaProps) {
-		t3 = {
+	let t4;
+	if ($[9] !== ariaProps) {
+		t4 = {
 			...ariaProps,
 			onKeyDown: void 0,
 			onKeyUp: void 0
 		};
-		$[8] = ariaProps;
-		$[9] = t3;
-	} else t3 = $[9];
-	const { groupProps: ariaGroupProps, labelProps, inputProps, incrementButtonProps, decrementButtonProps, ...validation } = useNumberField(t3, state, inputRef);
-	let t4;
-	if ($[10] !== ariaGroupProps || $[11] !== wrapperProps) {
-		t4 = mergeProps$1(ariaGroupProps, wrapperProps);
-		$[10] = ariaGroupProps;
-		$[11] = wrapperProps;
-		$[12] = t4;
-	} else t4 = $[12];
-	const groupProps = t4;
-	const fieldLabel = props["aria-label"] || (typeof props.label === "string" ? props.label : "");
+		$[9] = ariaProps;
+		$[10] = t4;
+	} else t4 = $[10];
+	const { groupProps: ariaGroupProps, labelProps, inputProps, incrementButtonProps, decrementButtonProps, ...validation } = useNumberField(t4, state, inputRef);
 	let t5;
-	if ($[13] !== fieldLabel || $[14] !== props.incrementAriaLabel || $[15] !== t) {
-		t5 = props.incrementAriaLabel ?? (fieldLabel ? t("numberInput.stepUp", "Increase {{label}}", { label: fieldLabel }) : t("numberInput.increase", "Increase"));
-		$[13] = fieldLabel;
-		$[14] = props.incrementAriaLabel;
-		$[15] = t;
-		$[16] = t5;
-	} else t5 = $[16];
-	const stepUpLabel = t5;
+	if ($[11] !== ariaGroupProps || $[12] !== wrapperProps) {
+		t5 = mergeProps$1(ariaGroupProps, wrapperProps);
+		$[11] = ariaGroupProps;
+		$[12] = wrapperProps;
+		$[13] = t5;
+	} else t5 = $[13];
+	const groupProps = t5;
+	const fieldLabel = props["aria-label"] || (typeof props.label === "string" ? props.label : "");
 	let t6;
-	if ($[17] !== fieldLabel || $[18] !== props.decrementAriaLabel || $[19] !== t) {
-		t6 = props.decrementAriaLabel ?? (fieldLabel ? t("numberInput.stepDown", "Decrease {{label}}", { label: fieldLabel }) : t("numberInput.decrease", "Decrease"));
-		$[17] = fieldLabel;
-		$[18] = props.decrementAriaLabel;
-		$[19] = t;
-		$[20] = t6;
-	} else t6 = $[20];
-	const stepDownLabel = t6;
+	if ($[14] !== fieldLabel || $[15] !== props.incrementAriaLabel || $[16] !== t) {
+		t6 = props.incrementAriaLabel ?? (fieldLabel ? t("numberInput.stepUp", "Increase {{label}}", { label: fieldLabel }) : t("numberInput.increase", "Increase"));
+		$[14] = fieldLabel;
+		$[15] = props.incrementAriaLabel;
+		$[16] = t;
+		$[17] = t6;
+	} else t6 = $[17];
+	const stepUpLabel = t6;
 	let t7;
-	if ($[21] !== inputProps || $[22] !== props) {
-		t7 = (event) => {
+	if ($[18] !== fieldLabel || $[19] !== props.decrementAriaLabel || $[20] !== t) {
+		t7 = props.decrementAriaLabel ?? (fieldLabel ? t("numberInput.stepDown", "Decrease {{label}}", { label: fieldLabel }) : t("numberInput.decrease", "Decrease"));
+		$[18] = fieldLabel;
+		$[19] = props.decrementAriaLabel;
+		$[20] = t;
+		$[21] = t7;
+	} else t7 = $[21];
+	const stepDownLabel = t7;
+	let t8;
+	if ($[22] !== inputProps || $[23] !== props) {
+		t8 = (event) => {
 			inputProps.onKeyDown?.(event);
 			event.defaultPrevented = event.isDefaultPrevented();
 			if (event.key !== "Enter") event.continuePropagation();
 			props.onKeyDown?.(event);
 		};
-		$[21] = inputProps;
-		$[22] = props;
-		$[23] = t7;
-	} else t7 = $[23];
-	let t8;
-	if ($[24] !== props.isDisabled || $[25] !== props.onKeyUp || $[26] !== t7) {
-		t8 = {
+		$[22] = inputProps;
+		$[23] = props;
+		$[24] = t8;
+	} else t8 = $[24];
+	let t9;
+	if ($[25] !== props.isDisabled || $[26] !== props.onKeyUp || $[27] !== t8) {
+		t9 = {
 			isDisabled: props.isDisabled,
-			onKeyDown: t7,
+			onKeyDown: t8,
 			onKeyUp: props.onKeyUp
 		};
-		$[24] = props.isDisabled;
-		$[25] = props.onKeyUp;
-		$[26] = t7;
+		$[25] = props.isDisabled;
+		$[26] = props.onKeyUp;
 		$[27] = t8;
-	} else t8 = $[27];
-	const { keyboardProps } = useKeyboard(t8);
-	let t9;
-	if ($[28] !== labelProps || $[29] !== userLabelProps) {
-		t9 = mergeProps$1(labelProps, userLabelProps);
-		$[28] = labelProps;
-		$[29] = userLabelProps;
-		$[30] = t9;
-	} else t9 = $[30];
-	const mergedLabelProps = t9;
+		$[28] = t9;
+	} else t9 = $[28];
+	const { keyboardProps } = useKeyboard(t9);
+	let t10;
+	if ($[29] !== labelProps || $[30] !== userLabelProps) {
+		t10 = mergeProps$1(labelProps, userLabelProps);
+		$[29] = labelProps;
+		$[30] = userLabelProps;
+		$[31] = t10;
+	} else t10 = $[31];
+	const mergedLabelProps = t10;
 	const steppers = showStepper ? /* @__PURE__ */ jsxs(StepperContainer, { children: [/* @__PURE__ */ jsx(StepButton, {
 		isDisabled: props.isDisabled,
 		direction: "up",
@@ -144,54 +148,54 @@ function NumberInput(rawProps, ref) {
 		size: otherProps.size
 	})] }) : void 0;
 	const T0 = StyledTextInputBase;
-	const t10 = otherProps;
-	const t11 = displayedValidation.getDisplayedValidation(otherProps, validation);
-	let t12;
-	if ($[31] !== inputProps || $[32] !== keyboardProps || $[33] !== props.id || $[34] !== userInputProps) {
-		t12 = mergeProps$1(mergeProps({
+	const t11 = otherProps;
+	const t12 = displayedValidation.getDisplayedValidation(otherProps, validation);
+	let t13;
+	if ($[32] !== inputProps || $[33] !== keyboardProps || $[34] !== props.id || $[35] !== userInputProps) {
+		t13 = mergeProps$1(mergeProps({
 			...inputProps,
 			...keyboardProps
 		}, { id: props.id }), { "data-input-type": "numberinput" }, userInputProps);
-		$[31] = inputProps;
-		$[32] = keyboardProps;
-		$[33] = props.id;
-		$[34] = userInputProps;
-		$[35] = t12;
-	} else t12 = $[35];
-	let t13;
-	if ($[36] !== props.suffixPosition || $[37] !== showStepper || $[38] !== steppers || $[39] !== suffix) {
-		t13 = showStepper ? props.suffixPosition === "after" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [steppers, suffix] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [suffix, steppers] }) : suffix;
-		$[36] = props.suffixPosition;
-		$[37] = showStepper;
-		$[38] = steppers;
-		$[39] = suffix;
-		$[40] = t13;
-	} else t13 = $[40];
+		$[32] = inputProps;
+		$[33] = keyboardProps;
+		$[34] = props.id;
+		$[35] = userInputProps;
+		$[36] = t13;
+	} else t13 = $[36];
 	let t14;
-	if ($[41] !== T0 || $[42] !== groupProps || $[43] !== inputRef || $[44] !== mergedLabelProps || $[45] !== otherProps || $[46] !== ref || $[47] !== t11 || $[48] !== t12 || $[49] !== t13) {
-		t14 = /* @__PURE__ */ jsx(T0, {
-			...t10,
+	if ($[37] !== props.suffixPosition || $[38] !== showStepper || $[39] !== steppers || $[40] !== suffix) {
+		t14 = showStepper ? props.suffixPosition === "after" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [steppers, suffix] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [suffix, steppers] }) : suffix;
+		$[37] = props.suffixPosition;
+		$[38] = showStepper;
+		$[39] = steppers;
+		$[40] = suffix;
+		$[41] = t14;
+	} else t14 = $[41];
+	let t15;
+	if ($[42] !== T0 || $[43] !== groupProps || $[44] !== inputRef || $[45] !== mergedLabelProps || $[46] !== otherProps || $[47] !== ref || $[48] !== t12 || $[49] !== t13 || $[50] !== t14) {
+		t15 = /* @__PURE__ */ jsx(T0, {
 			...t11,
+			...t12,
 			ref,
 			labelProps: mergedLabelProps,
-			inputProps: t12,
+			inputProps: t13,
 			inputRef,
 			wrapperProps: groupProps,
 			suffixPosition: "after",
-			suffix: t13
+			suffix: t14
 		});
-		$[41] = T0;
-		$[42] = groupProps;
-		$[43] = inputRef;
-		$[44] = mergedLabelProps;
-		$[45] = otherProps;
-		$[46] = ref;
-		$[47] = t11;
+		$[42] = T0;
+		$[43] = groupProps;
+		$[44] = inputRef;
+		$[45] = mergedLabelProps;
+		$[46] = otherProps;
+		$[47] = ref;
 		$[48] = t12;
 		$[49] = t13;
 		$[50] = t14;
-	} else t14 = $[50];
-	return t14;
+		$[51] = t15;
+	} else t15 = $[51];
+	return t15;
 }
 /**
 * NumberFields allow users to enter a number and increment or decrement the value using stepper buttons.
@@ -199,7 +203,7 @@ function NumberInput(rawProps, ref) {
 const _NumberInput = forwardRef(NumberInput);
 _NumberInput.cubeInputType = "Number";
 _NumberInput.displayName = "NumberInput";
-
 //#endregion
-export { _NumberInput };
+export { _NumberInput as NumberInput };
+
 //# sourceMappingURL=NumberInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","names":["tasty","ForwardedRef","forwardRef","KeyboardEvent","RefObject","useRef","AriaNumberFieldProps","mergeProps","mergeAriaProps","useKeyboard","useLocale","useNumberField","useNumberFieldState","useI18n","castNullableNumberValue","WithNullableValue","useFieldProps","useDisplayedValidation","CubeTextInputBaseProps","TextInputBase","StepButton","TextInputDOMEvents","FieldBaseProps","TextFieldKeyboardProps","CubeNumberInputProps","Omit","field","hideStepper","suffixPosition","StyledTextInputBase","inputStyles","textAlign","StepperContainer","styles","display","gridColumns","gridRows","flow","placeSelf","margin","NumberInput","rawProps","ref","$","_c","t","t0","props","suffix","value","defaultValue","onChange","inputRef","labelProps","userLabelProps","inputProps","userInputProps","wrapperProps","otherProps","showStepper","locale","displayedValidation","t1","trackTouched","ariaProps","t2","state","localInputRef","t3","onKeyDown","undefined","onKeyUp","groupProps","ariaGroupProps","incrementButtonProps","decrementButtonProps","validation","HTMLInputElement","t4","fieldLabel","label","t5","incrementAriaLabel","stepUpLabel","t6","decrementAriaLabel","stepDownLabel","t7","event","defaultPrevented","isDefaultPrevented","key","continuePropagation","t8","isDisabled","keyboardProps","t9","mergedLabelProps","steppers","size","T0","t11","getDisplayedValidation","t12","id","t13","t14","_NumberInput","cubeInputType","displayName"],"sources":["../../../../src/components/fields/NumberInput/NumberInput.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  RefObject,\n  useRef,\n} from 'react';\nimport {\n  AriaNumberFieldProps,\n  mergeProps as mergeAriaProps,\n  useKeyboard,\n  useLocale,\n  useNumberField,\n} from 'react-aria';\nimport { useNumberFieldState } from 'react-stately';\n\nimport { useI18n } from '../../../i18n';\nimport { mergeProps } from '../../../utils/react';\nimport {\n  castNullableNumberValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { useFieldProps } from '../../form';\nimport { useDisplayedValidation } from '../TextInput/displayed-validation';\nimport {\n  CubeTextInputBaseProps,\n  TextInputBase,\n} from '../TextInput/TextInputBase';\n\nimport { StepButton } from './StepButton';\n\nimport type { TextInputDOMEvents } from '@react-types/shared';\nimport type {\n  FieldBaseProps,\n  TextFieldKeyboardProps,\n} from '../../../shared/form';\n\nexport interface CubeNumberInputProps\n  extends Omit<\n      CubeTextInputBaseProps,\n      | 'defaultValue'\n      | 'value'\n      | 'onChange'\n      | 'field'\n      | 'validate'\n      | 'onFocus'\n      | 'onBlur'\n      | keyof TextInputDOMEvents\n    >,\n    Omit<\n      AriaNumberFieldProps,\n      'form' | 'name' | 'errorMessage' | 'onKeyDown' | 'onKeyUp'\n    >,\n    TextFieldKeyboardProps {\n  field?: FieldBaseProps<number | null | undefined>['field'];\n  /** Whether or to hide stepper */\n  hideStepper?: boolean;\n  /**\n   * Whether the suffix goes before or after the stepper buttons. Defaults to\n   * `before`, so a unit sits next to the number. The validation and loading\n   * icons always come before both.\n   */\n  suffixPosition?: 'before' | 'after';\n}\n\nconst StyledTextInputBase = tasty(TextInputBase, {\n  inputStyles: {\n    textAlign: 'right',\n  },\n});\n\nconst StepperContainer = tasty({\n  styles: {\n    display: 'grid',\n    gridColumns: '1sf',\n    gridRows: '1sf 1sf',\n    flow: 'column',\n    placeSelf: 'stretch',\n    margin: '(.5x - 1bw) left',\n  },\n});\n\nfunction NumberInput(\n  rawProps: WithNullableValue<CubeNumberInputProps>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n\n  // `NaN` is the number field's own empty value.\n  rawProps = castNullableNumberValue(rawProps);\n  let props = useFieldProps(rawProps);\n\n  let {\n    hideStepper,\n    suffix,\n    value,\n    defaultValue,\n    onChange,\n    inputRef,\n    labelProps: userLabelProps,\n    inputProps: userInputProps,\n    wrapperProps,\n    ...otherProps\n  } = props;\n  let showStepper = !hideStepper;\n  let { locale } = useLocale();\n  // The state commits typed text on blur and Enter, so its `onChange` is the\n  // change `validate` sees.\n  let displayedValidation = useDisplayedValidation();\n  let ariaProps = displayedValidation.trackTouched(props);\n  let state = useNumberFieldState({ ...ariaProps, locale });\n  let localInputRef = useRef<HTMLInputElement>(null);\n\n  inputRef = inputRef ?? localInputRef;\n\n  let {\n    groupProps: ariaGroupProps,\n    labelProps,\n    inputProps,\n    incrementButtonProps,\n    decrementButtonProps,\n    ...validation\n  } = useNumberField(\n    { ...ariaProps, onKeyDown: undefined, onKeyUp: undefined },\n    state,\n    inputRef as RefObject<HTMLInputElement>,\n  );\n  let groupProps = mergeProps(ariaGroupProps, wrapperProps);\n\n  // React Aria names each stepper after the field: a text label goes into the\n  // name, any other label is composed in through the `aria-labelledby` it sets.\n  // The UI Kit strings take the label the same way, so they replace React\n  // Aria's own without losing the field name. Without a text label the name\n  // has to read on its own, so it has strings of its own rather than an\n  // empty `{{label}}` slot.\n  let fieldLabel =\n    props['aria-label'] || (typeof props.label === 'string' ? props.label : '');\n  let stepUpLabel =\n    props.incrementAriaLabel ??\n    (fieldLabel\n      ? t('numberInput.stepUp', 'Increase {{label}}', { label: fieldLabel })\n      : t('numberInput.increase', 'Increase'));\n  let stepDownLabel =\n    props.decrementAriaLabel ??\n    (fieldLabel\n      ? t('numberInput.stepDown', 'Decrease {{label}}', { label: fieldLabel })\n      : t('numberInput.decrease', 'Decrease'));\n  // Keep native commits and user callbacks inside one Aria event wrapper so\n  // continuePropagation can still undo the native shortcut's propagation stop.\n  let { keyboardProps } = useKeyboard({\n    isDisabled: props.isDisabled,\n    onKeyDown: (event) => {\n      inputProps.onKeyDown?.(event as KeyboardEvent<HTMLInputElement>);\n      event.defaultPrevented = event.isDefaultPrevented();\n      // NumberInput historically lets every key except Enter reach ancestors.\n      if (event.key !== 'Enter') event.continuePropagation();\n      props.onKeyDown?.(event);\n    },\n    onKeyUp: props.onKeyUp,\n  });\n\n  // Merge user-provided labelProps with aria labelProps\n  const mergedLabelProps = mergeProps(labelProps, userLabelProps);\n\n  const steppers = showStepper ? (\n    <StepperContainer>\n      <StepButton\n        isDisabled={props.isDisabled}\n        direction=\"up\"\n        {...incrementButtonProps}\n        aria-label={stepUpLabel}\n        size={otherProps.size}\n      />\n      <StepButton\n        isDisabled={props.isDisabled}\n        direction=\"down\"\n        {...decrementButtonProps}\n        aria-label={stepDownLabel}\n        size={otherProps.size}\n      />\n    </StepperContainer>\n  ) : undefined;\n\n  return (\n    <StyledTextInputBase\n      {...otherProps}\n      {...displayedValidation.getDisplayedValidation(otherProps, validation)}\n      ref={ref}\n      labelProps={mergedLabelProps}\n      inputProps={mergeProps(\n        // `useNumberField` seeds its input id once. Merging the current id\n        // through react-aria's own `mergeProps` updates that seed, so the\n        // input, its label and the steppers' `aria-controls` follow the id\n        // when the form binding changes after mount.\n        mergeAriaProps({ ...inputProps, ...keyboardProps }, { id: props.id }),\n        { 'data-input-type': 'numberinput' },\n        userInputProps,\n      )}\n      inputRef={inputRef}\n      wrapperProps={groupProps}\n      // The validation/loading icon always comes first; `suffixPosition`\n      // places the suffix against the steppers instead.\n      suffixPosition=\"after\"\n      suffix={\n        showStepper ? (\n          props.suffixPosition === 'after' ? (\n            <>\n              {steppers}\n              {suffix}\n            </>\n          ) : (\n            <>\n              {suffix}\n              {steppers}\n            </>\n          )\n        ) : (\n          suffix\n        )\n      }\n    />\n  );\n}\n\n/**\n * NumberFields allow users to enter a number and increment or decrement the value using stepper buttons.\n */\nconst _NumberInput = forwardRef(NumberInput);\n\n(_NumberInput as any).cubeInputType = 'Number';\n\n_NumberInput.displayName = 'NumberInput';\n\nexport { _NumberInput as NumberInput };\nexport type { AriaNumberFieldProps };\n"],"mappings":"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"}
+{"version":3,"file":"NumberInput.js","names":["tasty","ForwardedRef","forwardRef","KeyboardEvent","RefObject","useRef","AriaNumberFieldProps","mergeProps","mergeAriaProps","useKeyboard","useLocale","useNumberField","useNumberFieldState","useI18n","castNullableNumberValue","WithNullableValue","useFieldProps","useDisplayedValidation","CubeTextInputBaseProps","TextInputBase","StepButton","TextInputDOMEvents","FieldBaseProps","TextFieldKeyboardProps","CubeNumberInputProps","Omit","field","hideStepper","suffixPosition","StyledTextInputBase","inputStyles","textAlign","StepperContainer","styles","display","gridColumns","gridRows","flow","placeSelf","margin","NumberInput","rawProps","ref","$","_c","t","t0","t1","Symbol","for","showsValidateErrors","props","suffix","value","defaultValue","onChange","inputRef","labelProps","userLabelProps","inputProps","userInputProps","wrapperProps","otherProps","showStepper","locale","displayedValidation","t2","trackTouched","ariaProps","t3","state","localInputRef","t4","onKeyDown","undefined","onKeyUp","groupProps","ariaGroupProps","incrementButtonProps","decrementButtonProps","validation","HTMLInputElement","t5","fieldLabel","label","t6","incrementAriaLabel","stepUpLabel","t7","decrementAriaLabel","stepDownLabel","t8","event","defaultPrevented","isDefaultPrevented","key","continuePropagation","t9","isDisabled","keyboardProps","t10","mergedLabelProps","steppers","size","T0","t12","getDisplayedValidation","t13","id","t14","t15","_NumberInput","cubeInputType","displayName","_c","mergeProps","mergeAriaProps"],"sources":["../../../../src/components/fields/NumberInput/NumberInput.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  RefObject,\n  useRef,\n} from 'react';\nimport {\n  AriaNumberFieldProps,\n  mergeProps as mergeAriaProps,\n  useKeyboard,\n  useLocale,\n  useNumberField,\n} from 'react-aria';\nimport { useNumberFieldState } from 'react-stately';\n\nimport { useI18n } from '../../../i18n';\nimport { mergeProps } from '../../../utils/react';\nimport {\n  castNullableNumberValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { useFieldProps } from '../../form';\nimport { useDisplayedValidation } from '../TextInput/displayed-validation';\nimport {\n  CubeTextInputBaseProps,\n  TextInputBase,\n} from '../TextInput/TextInputBase';\n\nimport { StepButton } from './StepButton';\n\nimport type { TextInputDOMEvents } from '@react-types/shared';\nimport type {\n  FieldBaseProps,\n  TextFieldKeyboardProps,\n} from '../../../shared/form';\n\nexport interface CubeNumberInputProps\n  extends\n    Omit<\n      CubeTextInputBaseProps,\n      | 'defaultValue'\n      | 'value'\n      | 'onChange'\n      | 'field'\n      | 'validate'\n      | 'onFocus'\n      | 'onBlur'\n      | keyof TextInputDOMEvents\n    >,\n    Omit<\n      AriaNumberFieldProps,\n      'form' | 'name' | 'errorMessage' | 'onKeyDown' | 'onKeyUp'\n    >,\n    TextFieldKeyboardProps {\n  field?: FieldBaseProps<number | null | undefined>['field'];\n  /** Whether or to hide stepper */\n  hideStepper?: boolean;\n  /**\n   * Whether the suffix goes before or after the stepper buttons. Defaults to\n   * `before`, so a unit sits next to the number. The validation and loading\n   * icons always come before both.\n   */\n  suffixPosition?: 'before' | 'after';\n}\n\nconst StyledTextInputBase = tasty(TextInputBase, {\n  inputStyles: {\n    textAlign: 'right',\n  },\n});\n\nconst StepperContainer = tasty({\n  styles: {\n    display: 'grid',\n    gridColumns: '1sf',\n    gridRows: '1sf 1sf',\n    flow: 'column',\n    placeSelf: 'stretch',\n    margin: '(.5x - 1bw) left',\n  },\n});\n\nfunction NumberInput(\n  rawProps: WithNullableValue<CubeNumberInputProps>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n\n  // `NaN` is the number field's own empty value.\n  rawProps = castNullableNumberValue(rawProps);\n  let props = useFieldProps(rawProps, { showsValidateErrors: true });\n\n  let {\n    hideStepper,\n    suffix,\n    value,\n    defaultValue,\n    onChange,\n    inputRef,\n    labelProps: userLabelProps,\n    inputProps: userInputProps,\n    wrapperProps,\n    ...otherProps\n  } = props;\n  let showStepper = !hideStepper;\n  let { locale } = useLocale();\n  // The state commits typed text on blur and Enter, so its `onChange` is the\n  // change `validate` sees.\n  let displayedValidation = useDisplayedValidation();\n  let ariaProps = displayedValidation.trackTouched(props);\n  let state = useNumberFieldState({ ...ariaProps, locale });\n  let localInputRef = useRef<HTMLInputElement>(null);\n\n  inputRef = inputRef ?? localInputRef;\n\n  let {\n    groupProps: ariaGroupProps,\n    labelProps,\n    inputProps,\n    incrementButtonProps,\n    decrementButtonProps,\n    ...validation\n  } = useNumberField(\n    { ...ariaProps, onKeyDown: undefined, onKeyUp: undefined },\n    state,\n    inputRef as RefObject<HTMLInputElement>,\n  );\n  let groupProps = mergeProps(ariaGroupProps, wrapperProps);\n\n  // React Aria names each stepper after the field: a text label goes into the\n  // name, any other label is composed in through the `aria-labelledby` it sets.\n  // The UI Kit strings take the label the same way, so they replace React\n  // Aria's own without losing the field name. Without a text label the name\n  // has to read on its own, so it has strings of its own rather than an\n  // empty `{{label}}` slot.\n  let fieldLabel =\n    props['aria-label'] || (typeof props.label === 'string' ? props.label : '');\n  let stepUpLabel =\n    props.incrementAriaLabel ??\n    (fieldLabel\n      ? t('numberInput.stepUp', 'Increase {{label}}', { label: fieldLabel })\n      : t('numberInput.increase', 'Increase'));\n  let stepDownLabel =\n    props.decrementAriaLabel ??\n    (fieldLabel\n      ? t('numberInput.stepDown', 'Decrease {{label}}', { label: fieldLabel })\n      : t('numberInput.decrease', 'Decrease'));\n  // Keep native commits and user callbacks inside one Aria event wrapper so\n  // continuePropagation can still undo the native shortcut's propagation stop.\n  let { keyboardProps } = useKeyboard({\n    isDisabled: props.isDisabled,\n    onKeyDown: (event) => {\n      inputProps.onKeyDown?.(event as KeyboardEvent<HTMLInputElement>);\n      event.defaultPrevented = event.isDefaultPrevented();\n      // NumberInput historically lets every key except Enter reach ancestors.\n      if (event.key !== 'Enter') event.continuePropagation();\n      props.onKeyDown?.(event);\n    },\n    onKeyUp: props.onKeyUp,\n  });\n\n  // Merge user-provided labelProps with aria labelProps\n  const mergedLabelProps = mergeProps(labelProps, userLabelProps);\n\n  const steppers = showStepper ? (\n    <StepperContainer>\n      <StepButton\n        isDisabled={props.isDisabled}\n        direction=\"up\"\n        {...incrementButtonProps}\n        aria-label={stepUpLabel}\n        size={otherProps.size}\n      />\n      <StepButton\n        isDisabled={props.isDisabled}\n        direction=\"down\"\n        {...decrementButtonProps}\n        aria-label={stepDownLabel}\n        size={otherProps.size}\n      />\n    </StepperContainer>\n  ) : undefined;\n\n  return (\n    <StyledTextInputBase\n      {...otherProps}\n      {...displayedValidation.getDisplayedValidation(otherProps, validation)}\n      ref={ref}\n      labelProps={mergedLabelProps}\n      inputProps={mergeProps(\n        // `useNumberField` seeds its input id once. Merging the current id\n        // through react-aria's own `mergeProps` updates that seed, so the\n        // input, its label and the steppers' `aria-controls` follow the id\n        // when the form binding changes after mount.\n        mergeAriaProps({ ...inputProps, ...keyboardProps }, { id: props.id }),\n        { 'data-input-type': 'numberinput' },\n        userInputProps,\n      )}\n      inputRef={inputRef}\n      wrapperProps={groupProps}\n      // The validation/loading icon always comes first; `suffixPosition`\n      // places the suffix against the steppers instead.\n      suffixPosition=\"after\"\n      suffix={\n        showStepper ? (\n          props.suffixPosition === 'after' ? (\n            <>\n              {steppers}\n              {suffix}\n            </>\n          ) : (\n            <>\n              {suffix}\n              {steppers}\n            </>\n          )\n        ) : (\n          suffix\n        )\n      }\n    />\n  );\n}\n\n/**\n * NumberFields allow users to enter a number and increment or decrement the value using stepper buttons.\n */\nconst _NumberInput = forwardRef(NumberInput);\n\n(_NumberInput as any).cubeInputType = 'Number';\n\n_NumberInput.displayName = 'NumberInput';\n\nexport { _NumberInput as NumberInput };\nexport type { AriaNumberFieldProps };\n"],"mappings":"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"}

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

@@ -1,10 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 import { Button } from "../../actions/Button/Button.js";
 import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/fields/NumberInput/StepButton.tsx
 const StepButtonElement = tasty(Button, {
 	type: "clear",
@@ -72,7 +71,7 @@ function StepButton(props) {
 	} else t5 = $[9];
 	return t5;
 }
-
 //#endregion
 export { StepButton };
+
 //# sourceMappingURL=StepButton.js.map

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

@@ -1 +1 @@
-{"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"}
+{"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","_c"],"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;EACR;EACAC,SAAS;EAETC,OAAO;EACP,eAAe;EAEfC,MAAM;GACJN,OAAO;GACPC,QAAQ;EACV;CACF;AACF,CAAC;;;;;AAMD,SAAOM,WAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAKK,MAAAC,KAAAH,MAAKI,cAAe;CAClB,MAAAC,KAAAL,MAAKI,cAAe;CAAM,IAAAE;CAAA,IAAAL,EAAA,OAAAE,MAAAF,EAAA,OAAAI,IAAA;EAF5BC,KAAA;GAAAC,IACAJ;GAAwBR,MACtBU;EACR;EAACJ,EAAA,KAAAE;EAAAF,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAQ,OAAAC,IAAA,2BAAA,GAAA;EAQSF,KAAA,EAAAG,UAAY,cAAc;EAACV,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,OAAAD,MAAAI,WAAA;EAFrCQ,KAAA,oBAAC,eAAD;GACM,IAAAZ,MAAKI;GACD,QAAAI;EAA2B,CAAA;EACnCP,EAAA,KAAAD,MAAAI;EAAAH,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,OAAAD,SAAAC,EAAA,OAAAK,MAAAL,EAAA,OAAAW,IAAA;EAdJC,KAAA,oBAAC,mBAAD;GACO,MAAA;GACC,MAAAP;GAMN,8BAAA;GAA0B,GACtBN;GAEJY,UAAAA;EAXgB,CAAA;EAeEX,EAAA,KAAAD;EAAAC,EAAA,KAAAK;EAAAL,EAAA,KAAAW;EAAAX,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,OAfpBY;AAeoB"}

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

@@ -2,11 +2,9 @@
 import { TextFieldKeyboardProps } from "../../../shared/form.js";
 import { CubeBufferedValueProps, CubeTextInputBaseProps } from "../TextInput/TextInputBase.js";
 import { WithNullableValue } from "../../../utils/react/nullableValue.js";
-import * as react from "react";
 import { AriaTextFieldProps } from "react-aria";
-
 //#region src/components/fields/PasswordInput/PasswordInput.d.ts
-interface CubePasswordInputProps extends WithNullableValue<Omit<CubeTextInputBaseProps, 'validate'>>, CubeBufferedValueProps, TextFieldKeyboardProps {
+export interface CubePasswordInputProps extends WithNullableValue<Omit<CubeTextInputBaseProps, 'validate'>>, CubeBufferedValueProps, TextFieldKeyboardProps {
   validate?: AriaTextFieldProps['validate'];
 }
 /**
@@ -14,7 +12,7 @@ interface CubePasswordInputProps extends WithNullableValue<Omit<CubeTextInputBas
  * with a keyboard. Various decorations can be displayed around the field to
  * communicate the entry requirements.
  */
-declare const _PasswordInput: react.ForwardRefExoticComponent<CubePasswordInputProps & react.RefAttributes<HTMLElement>>;
+declare const _PasswordInput: import("react").ForwardRefExoticComponent<CubePasswordInputProps & import("react").RefAttributes<HTMLElement>>;
 //#endregion
-export { CubePasswordInputProps, _PasswordInput };
+export { _PasswordInput as PasswordInput };
 //# sourceMappingURL=PasswordInput.d.ts.map

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | 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";
@@ -15,7 +15,6 @@ import { c } from "react/compiler-runtime";
 import { forwardRef, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useTextField } from "react-aria";
-
 //#region src/components/fields/PasswordInput/PasswordInput.tsx
 function PasswordInput(rawProps, ref) {
 	const $ = c(19);
@@ -31,6 +30,7 @@ function PasswordInput(rawProps, ref) {
 	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = {
 			defaultValidationTrigger: "onBlur",
+			showsValidateErrors: true,
 			valuePropsMapper: _temp
 		};
 		$[2] = t1;
@@ -144,7 +144,7 @@ function _temp(t0) {
 const _PasswordInput = forwardRef(PasswordInput);
 _PasswordInput.cubeInputType = "Text";
 _PasswordInput.displayName = "PasswordInput";
-
 //#endregion
-export { _PasswordInput };
+export { _PasswordInput as PasswordInput };
+
 //# sourceMappingURL=PasswordInput.js.map

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","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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"}
+{"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","showsValidateErrors","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","_c","mergeProps"],"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\n    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    showsValidateErrors: true,\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

@@ -5,15 +5,14 @@ import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import "../../content/Item/index.js";
 import { CubeItemButtonProps } from "../../actions/ItemButton/ItemButton.js";
 import "../../actions/index.js";
-import { CubeItemProps } from "../../content/Item/Item.js";
+import { CubeItemBaseProps as CubeItemProps } from "../../content/Item/Item.js";
 import { CubeListBoxProps, ListBox } from "../ListBox/ListBox.js";
 import { BasePropsWithoutChildren, BaseStyleProps, ColorStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
 import { ForwardedRef, MutableRefObject, ReactElement, ReactNode, RefObject } from "react";
 import { Placement } from "react-aria";
 import { ListState, Section } from "react-stately";
-
 //#region src/components/fields/Picker/Picker.d.ts
-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'> {
+export 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 displayed value and the field's own description and message. */
@@ -107,7 +106,7 @@ interface CubePickerProps<T> extends Omit<CubeListBoxProps<T>, 'size' | 'shape'
   /** Callback called when the popover open state changes */
   onOpenChange?: (isOpen: boolean) => void;
 }
-declare const Picker: (<T>(props: CubePickerProps<T> & {
+export declare const Picker: (<T>(props: CubePickerProps<T> & {
   ref?: ForwardedRef<HTMLElement>;
 }) => ReactElement) & {
   Item: typeof ListBox.Item;
@@ -115,5 +114,4 @@ declare const Picker: (<T>(props: CubePickerProps<T> & {
   Action: typeof ItemAction;
 };
 //#endregion
-export { CubePickerProps, Picker };
 //# sourceMappingURL=Picker.d.ts.map

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

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 import { extractStyles, mergeStyleLayers } from "../../../utils/styles.js";
-import { _Text } from "../../content/Text.js";
+import { Text as _Text } from "../../content/Text.js";
 import { isTextOnly } from "../../../utils/react/isTextOnly.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useWarn } from "../../../_internal/hooks/use-warn.js";
@@ -9,7 +9,7 @@ import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { ItemActionIcon } from "../../actions/ItemActionsWrapper.js";
-import { _ItemButton } from "../../actions/ItemButton/ItemButton.js";
+import { ItemButton as _ItemButton } from "../../actions/ItemButton/ItemButton.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
 import { Dialog } from "../../overlays/Dialog/Dialog.js";
 import { allowOverlayKeysToPropagate } from "../../../utils/react/overlayKeyPropagation.js";
@@ -26,7 +26,6 @@ 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";
-
 //#region src/components/fields/Picker/Picker.tsx
 const PROP_STYLES = [
 	...BASE_STYLES,
@@ -50,9 +49,10 @@ const Picker = forwardRef(function Picker(props, ref) {
 		if (props.selectionMode === "multiple") fieldProps.selectedKeys = value || [];
 		else fieldProps.selectedKey = value ?? null;
 		fieldProps.onSelectionChange = (key) => {
-			if (props.selectionMode === "multiple") if (key === "all") onChange("all");
-			else onChange(key ? Array.isArray(key) ? key : [key] : []);
-			else onChange(Array.isArray(key) ? key[0] : key);
+			if (props.selectionMode === "multiple") {
+				if (key === "all") onChange("all");
+				else onChange(key ? Array.isArray(key) ? key : [key] : []);
+			} else onChange(Array.isArray(key) ? key[0] : key);
 		};
 		return fieldProps;
 	} });
@@ -318,7 +318,8 @@ const Picker = forwardRef(function Picker(props, ref) {
 	const handleOptionClick = useEvent((key_2) => {
 		if (selectionMode === "multiple" && isCheckable || key_2 === "__ALL__") handleOpenChange(false);
 	});
-	return wrapWithField(/* @__PURE__ */ jsx(PickerWrapper, {
+	const pickerField = /* @__PURE__ */ jsx(PickerWrapper, {
+		ref,
 		styles,
 		...filterBaseProps(otherProps, { eventProps: true }),
 		children: /* @__PURE__ */ jsxs(DialogTrigger, {
@@ -383,7 +384,8 @@ const Picker = forwardRef(function Picker(props, ref) {
 				})
 			})]
 		})
-	}), ref, {
+	});
+	return wrapWithField(pickerField, {
 		...props,
 		labelProps: mergeProps(labelProps, props.labelProps)
 	});
@@ -396,7 +398,7 @@ Object.defineProperty(Picker, "cubeInputType", {
 	enumerable: false,
 	configurable: false
 });
-
 //#endregion
 export { Picker };
+
 //# sourceMappingURL=Picker.js.map