@cube-dev/ui-kit 0.201.0 → 0.203.0

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

@@ -1,9 +1,10 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";
+import { settleOverlayKey } from "../../../utils/react/overlayKeyPropagation.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 { TextInputBase as _TextInputBase } from "../TextInput/TextInputBase.js";
 import { useDisplayedValidation } from "../TextInput/displayed-validation.js";
 import { StepButton } from "./StepButton.js";
 import { c } from "react/compiler-runtime";
@@ -13,7 +14,7 @@ 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 StyledTextInputBase = tasty(_TextInputBase, { inputStyles: { textAlign: "right" } });
 const StepperContainer = tasty({ styles: {
 	display: "grid",
 	gridColumns: "1sf",
@@ -23,7 +24,7 @@ const StepperContainer = tasty({ styles: {
 	margin: "(.5x - 1bw) left"
 } });
 function NumberInput(rawProps, ref) {
-	const $ = c(52);
+	const $ = c(57);
 	const { t } = useI18n();
 	let t0;
 	if ($[0] !== rawProps) {
@@ -108,6 +109,7 @@ function NumberInput(rawProps, ref) {
 			event.defaultPrevented = event.isDefaultPrevented();
 			if (event.key !== "Enter") event.continuePropagation();
 			props.onKeyDown?.(event);
+			if (event.isDefaultPrevented()) settleOverlayKey(event);
 		};
 		$[22] = inputProps;
 		$[23] = props;
@@ -139,13 +141,15 @@ function NumberInput(rawProps, ref) {
 		direction: "up",
 		...incrementButtonProps,
 		"aria-label": stepUpLabel,
-		size: otherProps.size
+		size: otherProps.size,
+		isPlain: otherProps.shape === "plain"
 	}), /* @__PURE__ */ jsx(StepButton, {
 		isDisabled: props.isDisabled,
 		direction: "down",
 		...decrementButtonProps,
 		"aria-label": stepDownLabel,
-		size: otherProps.size
+		size: otherProps.size,
+		isPlain: otherProps.shape === "plain"
 	})] }) : void 0;
 	const T0 = StyledTextInputBase;
 	const t11 = otherProps;
@@ -172,8 +176,21 @@ function NumberInput(rawProps, ref) {
 		$[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, {
+	if ($[42] !== props.isDisabled || $[43] !== props.name || $[44] !== state) {
+		t15 = props.name ? /* @__PURE__ */ jsx("input", {
+			type: "hidden",
+			name: props.name,
+			value: isNaN(state.numberValue) ? "" : state.numberValue,
+			disabled: props.isDisabled
+		}) : null;
+		$[42] = props.isDisabled;
+		$[43] = props.name;
+		$[44] = state;
+		$[45] = t15;
+	} else t15 = $[45];
+	let t16;
+	if ($[46] !== T0 || $[47] !== groupProps || $[48] !== inputRef || $[49] !== mergedLabelProps || $[50] !== otherProps || $[51] !== ref || $[52] !== t12 || $[53] !== t13 || $[54] !== t14 || $[55] !== t15) {
+		t16 = /* @__PURE__ */ jsx(T0, {
 			...t11,
 			...t12,
 			ref,
@@ -182,20 +199,22 @@ function NumberInput(rawProps, ref) {
 			inputRef,
 			wrapperProps: groupProps,
 			suffixPosition: "after",
-			suffix: t14
+			suffix: t14,
+			children: t15
 		});
-		$[42] = T0;
-		$[43] = groupProps;
-		$[44] = inputRef;
-		$[45] = mergedLabelProps;
-		$[46] = otherProps;
-		$[47] = ref;
-		$[48] = t12;
-		$[49] = t13;
-		$[50] = t14;
-		$[51] = t15;
-	} else t15 = $[51];
-	return t15;
+		$[46] = T0;
+		$[47] = groupProps;
+		$[48] = inputRef;
+		$[49] = mergedLabelProps;
+		$[50] = otherProps;
+		$[51] = ref;
+		$[52] = t12;
+		$[53] = t13;
+		$[54] = t14;
+		$[55] = t15;
+		$[56] = t16;
+	} else t16 = $[56];
+	return t16;
 }
 /**
 * 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","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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"}
+{"version":3,"file":"NumberInput.js","names":["tasty","ForwardedRef","forwardRef","KeyboardEvent","RefObject","useRef","AriaNumberFieldProps","mergeProps","mergeAriaProps","useKeyboard","useLocale","useNumberField","useNumberFieldState","useI18n","castNullableNumberValue","WithNullableValue","settleOverlayKey","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","shape","T0","t12","getDisplayedValidation","t13","id","t14","t15","name","isNaN","numberValue","t16","_NumberInput","cubeInputType","displayName","TextInputBase","_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 { settleOverlayKey } from '../../../utils/react/overlayKeyPropagation';\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      // Number handling never prevents `Escape` or `Tab`, so a prevented one\n      // is the caller's and stops here, as in every other field. An\n      // unprevented one already goes on, unless the caller stopped it.\n      if (event.isDefaultPrevented()) settleOverlayKey(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        isPlain={otherProps.shape === 'plain'}\n      />\n      <StepButton\n        isDisabled={props.isDisabled}\n        direction=\"down\"\n        {...decrementButtonProps}\n        aria-label={stepDownLabel}\n        size={otherProps.size}\n        isPlain={otherProps.shape === 'plain'}\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      {/* `useNumberField` keeps `name` off the input, whose text is formatted, so a native `<form>` submits the number from here. */}\n      {props.name ? (\n        <input\n          type=\"hidden\"\n          name={props.name}\n          value={isNaN(state.numberValue) ? '' : state.numberValue}\n          disabled={props.isDisabled}\n        />\n      ) : null}\n    </StyledTextInputBase>\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,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { Button } from "../../actions/Button/Button.js";
 import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { c } from "react/compiler-runtime";
@@ -12,7 +12,8 @@ const StepButtonElement = tasty(Button, {
 		height: "auto",
 		radius: {
 			"": "0 (1r - 1bw) 0 0",
-			down: "0 0 (1r - 1bw) 0"
+			down: "0 0 (1r - 1bw) 0",
+			plain: 0
 		},
 		padding: 0,
 		$size: "inherit",
@@ -27,49 +28,63 @@ const StepButtonElement = tasty(Button, {
 * Buttons for NumberField. Their names come from `useNumberField`, which
 * `NumberInput` gives the translated labels.
 */
-function StepButton(props) {
-	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
-		};
+function StepButton(t0) {
+	const $ = c(14);
+	let isPlain;
+	let props;
+	if ($[0] !== t0) {
+		({isPlain, ...props} = t0);
 		$[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];
+		$[1] = isPlain;
+		$[2] = props;
+	} else {
+		isPlain = $[1];
+		props = $[2];
+	}
+	const t1 = props.direction === "up";
+	const t2 = props.direction === "down";
+	const t3 = !!isPlain;
 	let t4;
-	if ($[4] !== props.direction) {
-		t4 = /* @__PURE__ */ jsx(DirectionIcon, {
+	if ($[3] !== t1 || $[4] !== t2 || $[5] !== t3) {
+		t4 = {
+			up: t1,
+			down: t2,
+			plain: t3
+		};
+		$[3] = t1;
+		$[4] = t2;
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = { fontSize: "$local-size" };
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== props.direction) {
+		t6 = /* @__PURE__ */ jsx(DirectionIcon, {
 			to: props.direction,
-			styles: t3
+			styles: t5
 		});
-		$[4] = props.direction;
-		$[5] = t4;
-	} else t4 = $[5];
-	let t5;
-	if ($[6] !== props || $[7] !== t2 || $[8] !== t4) {
-		t5 = /* @__PURE__ */ jsx(StepButtonElement, {
+		$[8] = props.direction;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== props || $[11] !== t4 || $[12] !== t6) {
+		t7 = /* @__PURE__ */ jsx(StepButtonElement, {
 			type: "clear",
-			mods: t2,
+			mods: t4,
 			"data-popover-keep-on-press": true,
 			...props,
-			children: t4
+			children: t6
 		});
-		$[6] = props;
-		$[7] = t2;
-		$[8] = t4;
-		$[9] = t5;
-	} else t5 = $[9];
-	return t5;
+		$[10] = props;
+		$[11] = t4;
+		$[12] = t6;
+		$[13] = t7;
+	} else t7 = $[13];
+	return t7;
 }
 //#endregion
 export { StepButton };

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","_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"}
+{"version":3,"file":"StepButton.js","names":["tasty","DirectionIcon","Button","StepButtonElement","type","styles","width","height","radius","down","plain","padding","$size","Icon","StepButton","t0","$","_c","isPlain","props","t1","direction","t2","t3","t4","up","t5","Symbol","for","fontSize","t6","t7","_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      // A plain field box is square.\n      plain: 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({ isPlain, ...props }) {\n  return (\n    <StepButtonElement\n      type=\"clear\"\n      mods={{\n        up: props.direction === 'up',\n        down: props.direction === 'down',\n        plain: !!isPlain,\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;GAENC,OAAO;EACT;EACAC,SAAS;EAETC,OAAO;EACP,eAAe;EAEfC,MAAM;GACJP,OAAO;GACPC,QAAQ;EACV;CACF;AACF,CAAC;;;;;AAMD,SAAOO,WAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAH,EAAA,OAAAD,IAAA;EAAoB,CAAA,CAAAG,SAAA,GAAAC,SAAAJ;EAAqBC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAA;EAAAD,UAAAF,EAAA;EAAAG,QAAAH,EAAA;CAAA;CAKpC,MAAAI,KAAAD,MAAKE,cAAe;CAClB,MAAAC,KAAAH,MAAKE,cAAe;CACnB,MAAAE,KAAA,CAAC,CAACL;CAAO,IAAAM;CAAA,IAAAR,EAAA,OAAAI,MAAAJ,EAAA,OAAAM,MAAAN,EAAA,OAAAO,IAAA;EAHZC,KAAA;GAAAC,IACAL;GAAwBX,MACtBa;GAA0BZ,OACzBa;EACT;EAACP,EAAA,KAAAI;EAAAJ,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,OAAAW,OAAAC,IAAA,2BAAA,GAAA;EAQSF,KAAA,EAAAG,UAAY,cAAc;EAACb,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,OAAAG,MAAAE,WAAA;EAFrCS,KAAA,oBAAC,eAAD;GACM,IAAAX,MAAKE;GACD,QAAAK;EAA2B,CAAA;EACnCV,EAAA,KAAAG,MAAAE;EAAAL,EAAA,KAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,QAAAG,SAAAH,EAAA,QAAAQ,MAAAR,EAAA,QAAAc,IAAA;EAfJC,KAAA,oBAAC,mBAAD;GACO,MAAA;GACC,MAAAP;GAON,8BAAA;GAA0B,GACtBL;GAEJW,UAAAA;EAZgB,CAAA;EAgBEd,EAAA,MAAAG;EAAAH,EAAA,MAAAQ;EAAAR,EAAA,MAAAc;EAAAd,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OAhBpBe;AAgBoB"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useBufferedValue } from "../../../utils/react/useBufferedValue.js";
@@ -7,9 +7,10 @@ import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { EyeIcon } from "../../../icons/EyeIcon.js";
 import { EyeInvisibleIcon } from "../../../icons/EyeInvisibleIcon.js";
+import { withOverlayKeys } from "../../../utils/react/overlayKeyPropagation.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 { TextInputBase as _TextInputBase } from "../TextInput/TextInputBase.js";
 import { useDisplayedValidation } from "../TextInput/displayed-validation.js";
 import { c } from "react/compiler-runtime";
 import { forwardRef, useRef, useState } from "react";
@@ -51,6 +52,7 @@ function PasswordInput(rawProps, ref) {
 		value: buffered.value,
 		onChange: buffered.onChange,
 		onBlur: chain(rest.onBlur, buffered.reset),
+		onKeyDown: withOverlayKeys(rest.onKeyDown),
 		type
 	}), inputRef);
 	let t2;
@@ -112,7 +114,7 @@ function PasswordInput(rawProps, ref) {
 		t10 = { paddingRight: "4x" };
 		$[18] = t10;
 	} else t10 = $[18];
-	return /* @__PURE__ */ jsx(TextInputBase, {
+	return /* @__PURE__ */ jsx(_TextInputBase, {
 		ref,
 		labelProps: mergedLabelProps,
 		inputProps: t9,

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","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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"}
+{"version":3,"file":"PasswordInput.js","names":["ForwardedRef","forwardRef","RefObject","useRef","useState","AriaTextFieldProps","useTextField","useI18n","EyeIcon","EyeInvisibleIcon","chain","mergeProps","useBufferedValue","castNullableStringValue","WithNullableValue","withOverlayKeys","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","onKeyDown","HTMLInputElement","t2","mergedLabelProps","t3","_temp2","toggleType","t4","t5","t6","t7","t8","wrappedSuffix","t9","t10","paddingRight","getDisplayedValidation","type_0","toString","_PasswordInput","cubeInputType","displayName","_c","mergeProps","TextInputBase"],"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 { withOverlayKeys } from '../../../utils/react/overlayKeyPropagation';\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      onKeyDown: withOverlayKeys(rest.onKeyDown),\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":";;;;;;;;;;;;;;;;;;;AAgCA,SAAA2B,cAAAC,UAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAIE,MAAA,EAAAC,MAAczB,QAAQ;CAAE,IAAA0B;CAAA,IAAAH,EAAA,OAAAF,UAAA;EAEbK,KAAApB,wBAAwBe,QAAQ;EAACE,EAAA,KAAAF;EAAAE,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAA5CF,WAAWA;CAAH,IAAAM;CAAA,IAAAJ,EAAA,OAAAK,OAAAC,IAAA,2BAAA,GAAA;EAC4BF,KAAA;GAAAG,0BACR;GAAQC,qBACb;GAAIC,kBACPC;EAIpB;EAACV,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAPD,MAAAW,QAAYvB,cAAcU,UAAUM,EAOnC;CAED,MAAA,CAAAQ,MAAAC,WAAsBvC,SAAS,UAAU;CACzC,MAAA,EAAAwC,YAAAC,gBAAAC,YAAAC,gBAAAC,QAAAC,WAAAC,UAAAC,eAAAC,MAAAC,YAAA,GAAAC,SAUIb;CACJ,MAAAc,gBAAoBpD,OAA+C,IAAI;CACvE,MAAA+C,WAAeC,iBAAAI;CAGf,MAAAC,WAAe5C,iBAAiB0C,KAAIG,OAAQH,KAAII,UAAW;EAAAL;EAAAM,YAE7CL,KAAIK;EAAWC,YACfN,KAAIM;CAClB,CAAC;CAED,MAAAC,sBAA0B1C,uBAAuB;CACjD,MAAA,EAAAyB,YAAAE,YAAA,GAAAgB,eAAgDxD,aAC9CuD,oBAAmBE,aAAc;EAAA,GAC5BT;EAAIG,OACAD,SAAQC;EAAMC,UACXF,SAAQE;EAASM,QACnBtD,MAAM4C,KAAIU,QAASR,SAAQS,KAAM;EAACC,WAC/BnD,gBAAgBuC,KAAIY,SAAU;EAACxB;CAE5C,CAAC,GACDQ,QACF;CAAE,IAAAkB;CAAA,IAAAtC,EAAA,OAAAc,cAAAd,EAAA,OAAAe,gBAAA;EAGuBuB,KAAAzD,aAAWiC,YAAYC,cAAc;EAACf,EAAA,KAAAc;EAAAd,EAAA,KAAAe;EAAAf,EAAA,KAAAsC;CAAA,OAAAA,KAAAtC,EAAA;CAA/D,MAAAuC,mBAAyBD;CAAuC,IAAAE;CAAA,IAAAxC,EAAA,OAAAK,OAAAC,IAAA,2BAAA,GAAA;EAE7CkC,WAAA;GACjB3B,QAAQ4B,MAAqD;EAAC;EAC/DzC,EAAA,KAAAwC;CAAA,OAAAA,KAAAxC,EAAA;CAFD,MAAA0C,aAAmBF;CAeiB,MAAAG,KAAAnB,KAAIK;CAAW,IAAAe;CAAA,IAAA5C,EAAA,OAAAE,GAAA;EAOlC0C,KAAA1C,EAAE,8BAA8B,eAAe;EAACF,EAAA,KAAAE;EAAAF,EAAA,KAAA4C;CAAA,OAAAA,KAAA5C,EAAA;CAC3C,MAAA6C,KAAAjC,SAAS;CAAM,IAAAkC;CAAA,IAAA9C,EAAA,OAAAY,MAAA;EACvBkC,KAAAlC,SAAS,aAAa,oBAAC,kBAAD,CAAiB,CAAA,IAAM,oBAAC,SAAD,CAAQ,CAAA;EAAGZ,EAAA,KAAAY;EAAAZ,EAAA,MAAA8C;CAAA,OAAAA,KAAA9C,EAAA;CAAA,IAAA+C;CAAA,IAAA/C,EAAA,QAAA4C,MAAA5C,EAAA,QAAA6C,MAAA7C,EAAA,QAAA8C,IAAA;EARhEC,KAAA,oBAAC,YAAD;GAMW,SAAAH;GACK,gBAAAC;GACR,MAAAC;GACGJ,SAAAA;EAAU,CAAA;EACnB1C,EAAA,MAAA4C;EAAA5C,EAAA,MAAA6C;EAAA7C,EAAA,MAAA8C;EAAA9C,EAAA,MAAA+C;CAAA,OAAAA,KAAA/C,EAAA;CAtBR,MAAAgD,gBACE,qBAAA,YAAA,EAAA,UAAA,CACG9B,QASD,oBAAC,oBAAD;EAAgC,YAAAyB;EAC9BI,UAAAA;CADiB,CAAA,CAYE,EAAA,CAAA;CAEvB,IAAAE;CAAA,IAAAjD,EAAA,QAAAgB,cAAAhB,EAAA,QAAAiB,gBAAA;EAMcgC,KAAApE,aACVmC,YACA,EAAA,mBAAqB,gBAAgB,GACrCC,cACF;EAACjB,EAAA,MAAAgB;EAAAhB,EAAA,MAAAiB;EAAAjB,EAAA,MAAAiD;CAAA,OAAAA,KAAAjD,EAAA;CAAA,IAAAkD;CAAA,IAAAlD,EAAA,QAAAK,OAAAC,IAAA,2BAAA,GAAA;EAEY4C,MAAA,EAAAC,cAAgB,KAAK;EAACnD,EAAA,MAAAkD;CAAA,OAAAA,MAAAlD,EAAA;CAAA,OATrC,oBAAC4D,gBAAD;EACO7D;EACOwC,YAAAA;EACA,YAAAU;EAKF7B;EACG,aAAA8B;EACPtC;EACS,gBAAA;EACPoC,QAAAA;EACG7B;EAAS,GAChBK;EAAI,GACJO,oBAAmBqB,uBAAwB5B,MAAMQ,UAAU;CAAC,CAAA;AAChE;;;;;;AAtGN,SAAAS,OAAAY,QAAA;CAAA,OAuDuBzC,WAAS,aAAT,SAAA;AAAyC;AAvDhE,SAAAF,MAAAP,IAAA;CAUuB,MAAA,EAAAwB,OAAAC,aAAAzB;CAAmB,OAAM;EAAAwB,OACnCA,OAAK2B,SAAiB,KAAtB;EAAuB1B;CAEhC;AAAC;AAkGL,MAAM2B,iBAAiBpF,WAAW0B,aAAa;AAE/C,eAAwB2D,gBAAgB;AACxCD,eAAeE,cAAc"}

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

@@ -6,13 +6,14 @@ import "../../content/Item/index.js";
 import { CubeItemButtonProps } from "../../actions/ItemButton/ItemButton.js";
 import "../../actions/index.js";
 import { CubeItemBaseProps as CubeItemProps } from "../../content/Item/Item.js";
+import { FieldLayoutStyleProps } from "../../form/field-layout.js";
 import { CubeListBoxProps, ListBox } from "../ListBox/ListBox.js";
-import { BasePropsWithoutChildren, BaseStyleProps, ColorStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
+import { BasePropsWithoutChildren, ContainerStyleProps, 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
-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'> {
+export interface CubePickerProps<T> extends Omit<CubeListBoxProps<T>, 'size' | 'shape' | 'emptyLabel' | 'isFocusWithin'>, Omit<CubeItemProps, 'children' | 'size' | 'tooltip' | keyof ContainerStyleProps>, BasePropsWithoutChildren, FieldLayoutStyleProps, 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. */
@@ -49,7 +50,12 @@ export interface CubePickerProps<T> extends Omit<CubeListBoxProps<T>, 'size' | '
   placement?: Placement;
   /** Minimum padding in pixels between the popover and viewport edges */
   containerPadding?: number;
-  /** Tooltip for the trigger button (separate from `labelTooltip`) */
+  /**
+   * Tooltip for the trigger. The info badge next to the field's label is
+   * `labelTooltip`.
+   */
+  tooltip?: CubeItemProps['tooltip'];
+  /** @deprecated Use `tooltip`. */
   triggerTooltip?: CubeItemProps['tooltip'];
   /** Description for the trigger button (separate from field description) */
   triggerDescription?: CubeItemProps['description'];

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

@@ -1,5 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
-import { extractStyles, mergeStyleLayers } from "../../../utils/styles.js";
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
+import { mergeStyleLayers } from "../../../utils/styles.js";
 import { Text as _Text } from "../../content/Text.js";
 import { isTextOnly } from "../../../utils/react/isTextOnly.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
@@ -15,23 +15,20 @@ import { Dialog } from "../../overlays/Dialog/Dialog.js";
 import { allowOverlayKeysToPropagate } from "../../../utils/react/overlayKeyPropagation.js";
 import { getValidationTheme } from "../../form/validation/resolve-validation-props.js";
 import { getValidationIcon } from "../../form/validation/ValidationIndicator.js";
+import { TRIGGER_TOOLTIP_WARNING } from "../../form/legacy-tooltip.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
+import { splitFieldLayout } from "../../form/field-layout.js";
 import { DialogTrigger } from "../../overlays/Dialog/DialogTrigger.js";
 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 { filterBaseProps, tasty } from "@tenphi/tasty";
 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,
-	...OUTER_STYLES,
-	...COLOR_STYLES
-];
 const PickerWrapper = tasty({
 	qa: "PickerWrapper",
 	styles: {
@@ -56,8 +53,10 @@ const Picker = forwardRef(function Picker(props, ref) {
 		};
 		return fieldProps;
 	} });
-	let { id, qa, label, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, extra, icon, rightIcon, prefix, suffix, actions, hotkeys, triggerTooltip, triggerDescription, labelStyles, isRequired, necessityIndicator, isInvalid, isValid, isDisabled, isLoading, message, mods: externalMods, description, descriptionPlacement, placeholder, size = "medium", styles, listBoxStyles, popoverStyles, type = "outline", theme = "default", shape, labelSuffix, shouldFocusWrap, children, shouldFlip = true, targetRef, placement = "bottom start", containerPadding = 8, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = "single", listStateRef, focusOnHover, showSelectAll, selectAllLabel = t("picker.all", "All"), items, header, footer, headerStyles, footerStyles, triggerStyles, renderSummary, isCheckable, allValueProps, listStyles, optionStyles, sectionStyles, headingStyles, listGap, listRef, disallowEmptySelection, shouldUseVirtualFocus, onEscape, onOptionClick, isClearable, clearLabel, onClear, sortSelectedToTop, onOpenChange, listStateRef: externalListStateRef, ...otherProps } = props;
-	styles = extractStyles(otherProps, PROP_STYLES, styles);
+	let { id, qa, label, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, extra, icon, rightIcon, prefix, suffix, actions, hotkeys, tooltip, triggerTooltip, triggerDescription, labelStyles, isRequired, necessityIndicator, isInvalid, isValid, isDisabled, isLoading, message, mods: externalMods, description, descriptionPlacement, placeholder, size = "medium", styles, listBoxStyles, popoverStyles, type = "outline", theme = "default", shape, labelSuffix, shouldFocusWrap, children, shouldFlip = true, targetRef, placement = "bottom start", containerPadding = 8, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = "single", listStateRef, focusOnHover, showSelectAll, selectAllLabel = t("picker.all", "All"), items, header, footer, headerStyles, footerStyles, triggerStyles, renderSummary, isCheckable, allValueProps, listStyles, optionStyles, sectionStyles, headingStyles, listGap, listRef, disallowEmptySelection, shouldUseVirtualFocus, onEscape, onOptionClick, isClearable, clearLabel, onClear, sortSelectedToTop, onOpenChange, listStateRef: externalListStateRef, ...otherProps } = props;
+	const fieldLayout = splitFieldLayout(props);
+	styles = fieldLayout.styles;
+	useWarn(triggerTooltip !== void 0, TRIGGER_TOOLTIP_WARNING);
 	useWarn(isCheckable === false && selectionMode === "single", {
 		key: ["picker-checkable-single-mode"],
 		args: ["CubeUIKit: isCheckable=false is not recommended in single selection mode as it may confuse users about selection behavior."]
@@ -279,7 +278,7 @@ const Picker = forwardRef(function Picker(props, ref) {
 		prefix,
 		suffix,
 		hotkeys,
-		tooltip: triggerTooltip,
+		tooltip: tooltip ?? triggerTooltip,
 		description: triggerDescription,
 		descriptionPlacement,
 		styles: triggerStyles,
@@ -387,6 +386,8 @@ const Picker = forwardRef(function Picker(props, ref) {
 	});
 	return wrapWithField(pickerField, {
 		...props,
+		...fieldLayout.field,
+		tooltip: void 0,
 		labelProps: mergeProps(labelProps, props.labelProps)
 	});
 });