@cube-dev/ui-kit 0.195.0 → 0.196.0

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

@@ -1,8 +1,10 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.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";
 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 { StepButton } from "./StepButton.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";
@@ -22,7 +24,8 @@ const StepperContainer = tasty({ styles: {
 	margin: "(.5x - 1bw) left"
 } });
 function NumberInput(rawProps, ref) {
-	const $ = c(48);
+	const $ = c(51);
+	const { t } = useI18n();
 	let t0;
 	if ($[0] !== rawProps) {
 		t0 = castNullableNumberValue(rawProps);
@@ -31,159 +34,164 @@ function NumberInput(rawProps, ref) {
 	} else t0 = $[1];
 	rawProps = t0;
 	const props = useFieldProps(rawProps);
-	let hideStepper;
-	let inputRef;
-	let otherProps;
-	let suffix;
-	let userInputProps;
-	let userLabelProps;
-	if ($[2] !== props) {
-		let { hideStepper: t1, suffix: t2, value, defaultValue, onChange, inputRef: t3, labelProps: t4, inputProps: t5, ...t6 } = props;
-		hideStepper = t1;
-		suffix = t2;
-		inputRef = t3;
-		userLabelProps = t4;
-		userInputProps = t5;
-		otherProps = t6;
-		$[2] = props;
-		$[3] = hideStepper;
-		$[4] = inputRef;
-		$[5] = otherProps;
-		$[6] = suffix;
-		$[7] = userInputProps;
-		$[8] = userLabelProps;
-	} else {
-		hideStepper = $[3];
-		inputRef = $[4];
-		otherProps = $[5];
-		suffix = $[6];
-		userInputProps = $[7];
-		userLabelProps = $[8];
-	}
+	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 ($[9] !== locale || $[10] !== props) {
-		t1 = {
-			...props,
+	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 = {
+			...ariaProps,
 			locale
 		};
-		$[9] = locale;
-		$[10] = props;
-		$[11] = t1;
-	} else t1 = $[11];
-	const state = useNumberFieldState(t1);
+		$[5] = ariaProps;
+		$[6] = locale;
+		$[7] = t2;
+	} else t2 = $[7];
+	const state = useNumberFieldState(t2);
 	const localInputRef = useRef(null);
 	inputRef = inputRef ?? localInputRef;
-	let t2;
-	if ($[12] !== props) {
-		t2 = {
-			...props,
+	let t3;
+	if ($[8] !== ariaProps) {
+		t3 = {
+			...ariaProps,
 			onKeyDown: void 0,
 			onKeyUp: void 0
 		};
-		$[12] = props;
-		$[13] = t2;
-	} else t2 = $[13];
-	const { groupProps, labelProps, inputProps, incrementButtonProps, decrementButtonProps } = useNumberField(t2, state, inputRef);
-	let t3;
-	if ($[14] !== inputProps || $[15] !== props) {
-		t3 = (event) => {
+		$[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 : "");
+	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;
+	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;
+	let t7;
+	if ($[21] !== inputProps || $[22] !== props) {
+		t7 = (event) => {
 			inputProps.onKeyDown?.(event);
 			event.defaultPrevented = event.isDefaultPrevented();
 			if (event.key !== "Enter") event.continuePropagation();
 			props.onKeyDown?.(event);
 		};
-		$[14] = inputProps;
-		$[15] = props;
-		$[16] = t3;
-	} else t3 = $[16];
-	let t4;
-	if ($[17] !== props.isDisabled || $[18] !== props.onKeyUp || $[19] !== t3) {
-		t4 = {
+		$[21] = inputProps;
+		$[22] = props;
+		$[23] = t7;
+	} else t7 = $[23];
+	let t8;
+	if ($[24] !== props.isDisabled || $[25] !== props.onKeyUp || $[26] !== t7) {
+		t8 = {
 			isDisabled: props.isDisabled,
-			onKeyDown: t3,
+			onKeyDown: t7,
 			onKeyUp: props.onKeyUp
 		};
-		$[17] = props.isDisabled;
-		$[18] = props.onKeyUp;
-		$[19] = t3;
-		$[20] = t4;
-	} else t4 = $[20];
-	const { keyboardProps } = useKeyboard(t4);
-	let t5;
-	if ($[21] !== labelProps || $[22] !== userLabelProps) {
-		t5 = mergeProps$1(labelProps, userLabelProps);
-		$[21] = labelProps;
-		$[22] = userLabelProps;
-		$[23] = t5;
-	} else t5 = $[23];
-	const mergedLabelProps = t5;
-	let t6;
-	if ($[24] !== decrementButtonProps || $[25] !== incrementButtonProps || $[26] !== otherProps || $[27] !== props.isDisabled || $[28] !== showStepper) {
-		t6 = showStepper ? /* @__PURE__ */ jsxs(StepperContainer, { children: [/* @__PURE__ */ jsx(StepButton, {
-			isDisabled: props.isDisabled,
-			direction: "up",
-			...incrementButtonProps,
-			size: otherProps.size
-		}), /* @__PURE__ */ jsx(StepButton, {
-			isDisabled: props.isDisabled,
-			direction: "down",
-			...decrementButtonProps,
-			size: otherProps.size
-		})] }) : void 0;
-		$[24] = decrementButtonProps;
-		$[25] = incrementButtonProps;
-		$[26] = otherProps;
-		$[27] = props.isDisabled;
-		$[28] = showStepper;
-		$[29] = t6;
-	} else t6 = $[29];
-	const steppers = t6;
-	const t7 = otherProps;
-	let t8;
-	if ($[30] !== inputProps || $[31] !== keyboardProps || $[32] !== props.id || $[33] !== userInputProps) {
-		t8 = mergeProps$1(mergeProps({
+		$[24] = props.isDisabled;
+		$[25] = props.onKeyUp;
+		$[26] = t7;
+		$[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;
+	const steppers = showStepper ? /* @__PURE__ */ jsxs(StepperContainer, { children: [/* @__PURE__ */ jsx(StepButton, {
+		isDisabled: props.isDisabled,
+		direction: "up",
+		...incrementButtonProps,
+		"aria-label": stepUpLabel,
+		size: otherProps.size
+	}), /* @__PURE__ */ jsx(StepButton, {
+		isDisabled: props.isDisabled,
+		direction: "down",
+		...decrementButtonProps,
+		"aria-label": stepDownLabel,
+		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({
 			...inputProps,
 			...keyboardProps
 		}, { id: props.id }), { "data-input-type": "numberinput" }, userInputProps);
-		$[30] = inputProps;
-		$[31] = keyboardProps;
-		$[32] = props.id;
-		$[33] = userInputProps;
-		$[34] = t8;
-	} else t8 = $[34];
-	let t9;
-	if ($[35] !== props.suffixPosition || $[36] !== showStepper || $[37] !== steppers || $[38] !== suffix) {
-		t9 = showStepper ? props.suffixPosition === "before" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [suffix, steppers] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [steppers, suffix] }) : suffix;
-		$[35] = props.suffixPosition;
-		$[36] = showStepper;
-		$[37] = steppers;
-		$[38] = suffix;
-		$[39] = t9;
-	} else t9 = $[39];
-	let t10;
-	if ($[40] !== groupProps || $[41] !== inputRef || $[42] !== mergedLabelProps || $[43] !== otherProps || $[44] !== ref || $[45] !== t8 || $[46] !== t9) {
-		t10 = /* @__PURE__ */ jsx(StyledTextInputBase, {
-			...t7,
+		$[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];
+	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,
+			...t11,
 			ref,
 			labelProps: mergedLabelProps,
-			inputProps: t8,
+			inputProps: t12,
 			inputRef,
 			wrapperProps: groupProps,
 			suffixPosition: "after",
-			suffix: t9
+			suffix: t13
 		});
-		$[40] = groupProps;
-		$[41] = inputRef;
-		$[42] = mergedLabelProps;
-		$[43] = otherProps;
-		$[44] = ref;
-		$[45] = t8;
-		$[46] = t9;
-		$[47] = t10;
-	} else t10 = $[47];
-	return t10;
+		$[41] = T0;
+		$[42] = groupProps;
+		$[43] = inputRef;
+		$[44] = mergedLabelProps;
+		$[45] = otherProps;
+		$[46] = ref;
+		$[47] = t11;
+		$[48] = t12;
+		$[49] = t13;
+		$[50] = t14;
+	} else t14 = $[50];
+	return t14;
 }
 /**
 * NumberFields allow users to enter a number and increment or decrement the value using stepper buttons.

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","castNullableNumberValue","WithNullableValue","useFieldProps","CubeTextInputBaseProps","TextInputBase","StepButton","TextInputDOMEvents","FieldBaseProps","TextFieldKeyboardProps","CubeNumberInputProps","Omit","field","hideStepper","StyledTextInputBase","inputStyles","textAlign","StepperContainer","styles","display","gridColumns","gridRows","flow","placeSelf","margin","NumberInput","rawProps","ref","$","_c","t0","props","inputRef","otherProps","suffix","userInputProps","userLabelProps","t1","t2","value","defaultValue","onChange","t3","labelProps","t4","inputProps","t5","t6","showStepper","locale","state","localInputRef","onKeyDown","undefined","onKeyUp","groupProps","incrementButtonProps","decrementButtonProps","HTMLInputElement","event","defaultPrevented","isDefaultPrevented","key","continuePropagation","isDisabled","keyboardProps","mergedLabelProps","size","steppers","t8","id","t9","suffixPosition","t10","_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 { mergeProps } from '../../../utils/react';\nimport {\n  castNullableNumberValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { useFieldProps } from '../../form';\nimport { CubeTextInputBaseProps, TextInputBase } from '../TextInput';\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\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  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    ...otherProps\n  } = props;\n  let showStepper = !hideStepper;\n  let { locale } = useLocale();\n  let state = useNumberFieldState({ ...props, locale });\n  let localInputRef = useRef<HTMLInputElement>(null);\n\n  inputRef = inputRef ?? localInputRef;\n\n  let {\n    groupProps,\n    labelProps,\n    inputProps,\n    incrementButtonProps,\n    decrementButtonProps,\n  } = useNumberField(\n    { ...props, onKeyDown: undefined, onKeyUp: undefined },\n    state,\n    inputRef as RefObject<HTMLInputElement>,\n  );\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        size={otherProps.size}\n      />\n      <StepButton\n        isDisabled={props.isDisabled}\n        direction=\"down\"\n        {...decrementButtonProps}\n        size={otherProps.size}\n      />\n    </StepperContainer>\n  ) : undefined;\n\n  return (\n    <StyledTextInputBase\n      {...otherProps}\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      suffixPosition=\"after\"\n      suffix={\n        showStepper ? (\n          props.suffixPosition === 'before' ? (\n            <>\n              {suffix}\n              {steppers}\n            </>\n          ) : (\n            <>\n              {steppers}\n              {suffix}\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","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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"}

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

@@ -1,5 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
-import { useI18n } from "../../../i18n/useI18n.js";
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | 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";