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

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

@@ -1 +1 @@
-{"version":3,"file":"ListBoxPopover.js","names":["getEventTarget","isFocusWithin","Key","Styles","tasty","React","CSSProperties","ReactNode","RefObject","useCallback","useEffect","useRef","useInteractOutside","useOverlay","useOverlayPosition","useEvent","useI18n","mergeProps","mergeRefs","DisplayTransition","useModalLayerRef","Portal","ListBox","ListBoxPopoverProps","isOpen","triggerRef","HTMLElement","popoverRef","HTMLDivElement","listBoxRef","direction","shouldFlip","overlayOffset","containerPadding","comboBoxWidth","listBoxId","overlayStyles","listBoxStyles","optionStyles","optionHighlight","sectionStyles","headingStyles","listGap","selectedKey","selectionMode","selectedKeys","isCheckable","shouldCloseOnTriggerInteraction","isDisabled","disabledKeys","Iterable","items","children","listStateRef","onSelectionChange","selection","onClose","label","ariaLabel","ariaLabelledby","compositeFocusProps","onFocus","e","FocusEvent","onBlur","filter","nodes","size","emptyLabel","positionTargetRef","Element","positionApiRef","updatePosition","CONTROL_SELECTOR","LAYER_SELECTOR","DISABLED_SELECTOR","isOutsideControl","el","trigger","control","closest","contains","matches","layer","ListBoxPopoverWrapper","qa","styles","position","zIndex","ListBoxPopoverElement","display","gridRows","gridColumns","width","height","overflow","fill","radius","shadow","padding","border","hide","hidden","boxSizing","transition","translate","transformOrigin","scale","opacity","ListBoxPopover","props","$","_c","t","t0","t1","t2","undefined","mergedPopoverRef","layerRef","overlayScrollRef","t3","t4","t5","t6","targetRef","overlayRef","scrollRef","placement","offset","overlayProps","overlayPositionProps","t7","style","t8","maxHeight","maxWidth","positionStyle","t10","t9","current","t11","menuTriggerEl","dismissEl","getOutsidePressBehavior","t12","el_0","behavior","setTimeout","t13","shouldCloseOnBlur","isDismissable","shouldCloseOnInteractOutside","overlayBehaviorProps","t14","event","preventDefault","preserveOutsidePressFocus","t15","t16","ref","onInteractOutsideStart","onInteractOutside","t17","split","placementDirection","transitionRefHolder","t18","Symbol","for","node","setScrollRef","t19","t20","phase","isShown","isExiting","transitionRef","open","overlayContent"],"sources":["../../../../src/components/fields/ListBoxPopover/ListBoxPopover.tsx"],"sourcesContent":["import { getEventTarget, isFocusWithin } from '@react-aria/utils';\nimport { Key } from '@react-types/shared';\nimport { Styles, tasty } from '@tenphi/tasty';\nimport React, {\n  CSSProperties,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\nimport { useInteractOutside, useOverlay, useOverlayPosition } from 'react-aria';\n\nimport { useEvent } from '../../../_internal/hooks/use-event';\nimport { useI18n } from '../../../i18n';\nimport { mergeProps } from '../../../utils/react';\nimport { mergeRefs } from '../../../utils/react/useCombinedRefs';\nimport { DisplayTransition } from '../../helpers';\nimport { useModalLayerRef } from '../../overlays/Modal/modal-containment';\nimport { Portal } from '../../portal';\nimport { ListBox } from '../ListBox/ListBox';\n\nexport interface ListBoxPopoverProps {\n  isOpen: boolean;\n  triggerRef: RefObject<HTMLElement>;\n  popoverRef: RefObject<HTMLDivElement>;\n  listBoxRef: RefObject<HTMLDivElement>;\n  direction: 'bottom' | 'top';\n  shouldFlip: boolean;\n  overlayOffset: number;\n  containerPadding: number;\n  /** Min width (px) for the overlay; usually the trigger's width. */\n  comboBoxWidth?: number;\n  /** Stable id used for the ListBox element and aria-controls wiring. */\n  listBoxId: string;\n  overlayStyles?: Styles;\n  listBoxStyles?: Styles;\n  optionStyles?: Styles;\n  /** Substring to highlight within each option's (text) children. */\n  optionHighlight?: string;\n  sectionStyles?: Styles;\n  headingStyles?: Styles;\n  /** Space between options, in pixels. Defaults to a hairline (`1bw`). */\n  listGap?: number;\n  selectedKey?: Key | null;\n  /**\n   * `'multiple'` lets the list hold several selected options. The list then\n   * reports the whole new selection on every toggle and never closes itself;\n   * the caller decides what a toggle means. Defaults to `'single'`.\n   */\n  selectionMode?: 'single' | 'multiple';\n  /** The selected keys in `'multiple'` mode. Ignored in `'single'` mode. */\n  selectedKeys?: Key[];\n  /** Whether options show a checkbox. Only applies in `'multiple'` mode. */\n  isCheckable?: boolean;\n  /**\n   * Whether a click inside the element `triggerRef` points at closes the\n   * popover, like any other outside click. Pass `false` when that element is\n   * where the user keeps working with the list open, such as an input that\n   * picks several options in a row. Only this popover is affected; others\n   * still close. Defaults to `true`.\n   */\n  shouldCloseOnTriggerInteraction?: boolean;\n  isDisabled?: boolean;\n  disabledKeys?: Iterable<Key>;\n  items?: Iterable<any>;\n  children: ReactNode;\n  /** Ref through which the ListBox exposes its internal list state. */\n  listStateRef: RefObject<any>;\n  onSelectionChange: (selection: Key | Key[] | null) => void;\n  onClose: () => void;\n  label?: ReactNode;\n  ariaLabel?: string;\n  /**\n   * Ids of the elements that name the field, read after `label` or\n   * `ariaLabel`. Without either, they alone name the list, in place of the\n   * generic \"Options\".\n   */\n  ariaLabelledby?: string;\n  compositeFocusProps: {\n    onFocus: (e: React.FocusEvent) => void;\n    onBlur: (e: React.FocusEvent) => void;\n  };\n  /** Collection node filter applied to the ListBox. */\n  filter?: (nodes: Iterable<any>) => Iterable<any>;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  /**\n   * Label shown when the list is empty (no items / no filter results).\n   * Forwarded to the inner ListBox.\n   */\n  emptyLabel?: ReactNode;\n  /**\n   * Element to anchor the overlay to geometrically. Defaults to `triggerRef`.\n   * Use this to anchor to something other than the trigger (e.g. the caret in\n   * a textarea) while keeping `triggerRef` for outside-click/dismiss logic.\n   */\n  positionTargetRef?: RefObject<Element | null>;\n  /**\n   * Receives an imperative handle exposing `updatePosition()` so the caller can\n   * force the overlay to re-anchor (e.g. when the caret moves).\n   */\n  positionApiRef?: RefObject<{ updatePosition: () => void } | null>;\n}\n\n// The controls an outside press reaches: a button, a link, a form control,\n// anything with `tabindex`, or something inside one.\nconst CONTROL_SELECTOR =\n  'button, a[href], input, select, textarea, [tabindex], [contenteditable]:not([contenteditable=\"false\"])';\n\n// The layer a field sits in: a dialog, popover or tray, otherwise the page.\nconst LAYER_SELECTOR =\n  '[role=\"dialog\"], [role=\"alertdialog\"], [data-overlay-layer]';\n\nconst DISABLED_SELECTOR = ':disabled, [aria-disabled=\"true\"]';\n\n// An enabled control apart from the field, in the field's own layer. A press\n// anywhere else counts as blank space and keeps the field's focus and draft:\n// on the field itself, on a dialog's surface, on a disabled control, or\n// outside the field's layer, which stays open.\nfunction isOutsideControl(el: Element, trigger: HTMLElement | null) {\n  const control = el.closest(CONTROL_SELECTOR);\n\n  if (\n    control == null ||\n    trigger == null ||\n    control.contains(trigger) ||\n    trigger.contains(control) ||\n    control.matches(`${LAYER_SELECTOR}, ${DISABLED_SELECTOR}`)\n  ) {\n    return false;\n  }\n\n  const layer = trigger.closest(LAYER_SELECTOR);\n\n  return layer == null || layer.contains(control);\n}\n\nconst ListBoxPopoverWrapper = tasty({\n  qa: 'ComboBoxOverlayWrapper',\n  styles: {\n    position: 'absolute',\n    zIndex: 1000,\n  },\n});\n\nconst ListBoxPopoverElement = tasty({\n  qa: 'ComboBoxOverlay',\n  styles: {\n    display: 'grid',\n    gridRows: '1sf',\n    gridColumns: '1sf',\n    width: '$overlay-min-width max-content 50vw',\n    height: 'initial max-content (50vh - 5x)',\n    overflow: 'auto',\n    fill: '#surface',\n    radius: '1cr',\n    shadow: true,\n    padding: '0',\n    border: '#border',\n    hide: {\n      '': false,\n      hidden: true,\n    },\n    boxSizing: 'border-box',\n    transition:\n      'translate $transition ease-out, scale $transition ease-out, theme $transition ease-out',\n    translate: {\n      '': '0 0',\n      'open & [data-placement=\"top\"]': '0 0',\n      '!open & [data-placement=\"top\"]': '0 1x',\n      'open & ([data-placement=\"bottom\"] | ![data-placement])': '0 0',\n      '!open & ([data-placement=\"bottom\"] | ![data-placement])': '0 -1x',\n    },\n    transformOrigin: {\n      '': 'top center',\n      '[data-placement=\"top\"]': 'bottom center',\n    },\n    scale: {\n      '': '1 1',\n      '!open': '1 .9',\n    },\n    opacity: {\n      '': 1,\n      '!open': 0.001,\n    },\n\n    '$overlay-min-width': 'min 30x',\n  },\n});\n\nexport const ListBoxPopover = function ListBoxPopover(\n  props: ListBoxPopoverProps,\n) {\n  const { t } = useI18n();\n  const {\n    isOpen,\n    triggerRef,\n    popoverRef,\n    listBoxRef,\n    direction,\n    shouldFlip,\n    overlayOffset,\n    containerPadding,\n    comboBoxWidth,\n    listBoxId,\n    overlayStyles,\n    listBoxStyles,\n    optionStyles,\n    optionHighlight,\n    sectionStyles,\n    headingStyles,\n    listGap,\n    selectedKey,\n    selectionMode = 'single',\n    selectedKeys,\n    isCheckable,\n    shouldCloseOnTriggerInteraction = true,\n    isDisabled,\n    disabledKeys,\n    items,\n    children,\n    listStateRef,\n    onSelectionChange,\n    onClose,\n    label,\n    ariaLabel,\n    ariaLabelledby,\n    compositeFocusProps,\n    filter,\n    size = 'medium',\n    emptyLabel,\n    positionTargetRef,\n    positionApiRef,\n  } = props;\n\n  const mergedPopoverRef = popoverRef;\n\n  // Opened inside a modal, the list stays readable while the modal hides the\n  // page.\n  const layerRef = useModalLayerRef();\n\n  // Ref to the inner scrollable element (the visible popover). react-aria\n  // measures this for its flip/shrink math and writes maxHeight onto the\n  // overlay (positioning wrapper); we forward that maxHeight to this element\n  // below so the scroll container actually shrinks instead of overflowing.\n  const overlayScrollRef = useRef<HTMLDivElement | null>(null);\n\n  // Overlay positioning — anchor to the explicit position target when given\n  // (e.g. a caret anchor), otherwise to the trigger. `triggerRef` is still\n  // used below for outside-click/dismiss behavior.\n  const {\n    overlayProps: overlayPositionProps,\n    placement,\n    updatePosition,\n  } = useOverlayPosition({\n    targetRef: (positionTargetRef ?? triggerRef) as any,\n    overlayRef: mergedPopoverRef as any,\n    scrollRef: overlayScrollRef as any,\n    placement: `${direction} start` as any,\n    shouldFlip,\n    isOpen,\n    offset: overlayOffset,\n    containerPadding: containerPadding,\n  });\n\n  // Keep positioning (top/left/zIndex) on the wrapper, but split out the\n  // available-space cap so it can be applied to the inner scroll element.\n  const { maxHeight, maxWidth, ...positionStyle } =\n    (overlayPositionProps.style ?? {}) as CSSProperties;\n\n  // Expose updatePosition so callers can re-anchor on demand (e.g. caret move).\n  useEffect(() => {\n    if (positionApiRef) {\n      positionApiRef.current = { updatePosition };\n    }\n    return () => {\n      if (positionApiRef) {\n        positionApiRef.current = null;\n      }\n    };\n  }, [positionApiRef, updatePosition]);\n\n  const getOutsidePressBehavior = (el: Element) => {\n    const menuTriggerEl = el.closest('[data-popover-trigger]');\n    if (menuTriggerEl) {\n      return menuTriggerEl === triggerRef.current ? 'consume' : 'ignore';\n    }\n    if (\n      (!shouldCloseOnTriggerInteraction && triggerRef.current?.contains(el)) ||\n      el.closest('[data-popover-keep]')\n    ) {\n      return 'ignore';\n    }\n    // The press reaches an outside control, so a checkbox toggles, a text\n    // field takes focus and a native Save button saves on the first click.\n    // A UI Kit Button passes from any layer, unless it is disabled.\n    const dismissEl = el.closest('[data-popover-dismiss]');\n\n    if (\n      isOutsideControl(el, triggerRef.current) ||\n      (dismissEl != null && !dismissEl.matches(DISABLED_SELECTOR))\n    ) {\n      return 'pass';\n    }\n    return 'consume';\n  };\n\n  // Overlay behavior (dismiss on outside click, escape)\n  const { overlayProps: overlayBehaviorProps } = useOverlay(\n    {\n      onClose,\n      shouldCloseOnBlur: true,\n      isOpen,\n      isDismissable: true,\n      shouldCloseOnInteractOutside: (el) => {\n        const behavior = getOutsidePressBehavior(el);\n        if (behavior === 'pass') {\n          // Leave the control's press intact and close after its action.\n          setTimeout(onClose, 0);\n        }\n        return behavior === 'consume';\n      },\n    },\n    mergedPopoverRef as any,\n  );\n\n  const preserveOutsidePressFocus = useEvent((event: PointerEvent) => {\n    if (\n      (isFocusWithin(triggerRef.current) ||\n        isFocusWithin(mergedPopoverRef.current)) &&\n      getOutsidePressBehavior(getEventTarget(event) as Element) === 'consume'\n    ) {\n      event.preventDefault();\n    }\n  });\n\n  // Aria now permits outside presses to move focus. A passed press moves it\n  // to its control, and the field settles its draft on blur, as on Tab. A\n  // consumed press, such as one on blank space or a dialog's backdrop, must\n  // only dismiss this list: the field keeps focus and its draft.\n  useInteractOutside({\n    ref: mergedPopoverRef,\n    isDisabled: !isOpen,\n    onInteractOutsideStart: preserveOutsidePressFocus,\n    onInteractOutside: preserveOutsidePressFocus,\n  });\n\n  // Extract primary placement direction for consistent styling\n  const placementDirection = placement?.split(' ')[0] || direction;\n\n  // Hold the DisplayTransition ref so we can bind the same node to both the\n  // transition listener and our scroll ref via a single stable callback.\n  const transitionRefHolder = useRef<\n    ((node: HTMLElement | null) => void) | null\n  >(null);\n  const setScrollRef = useCallback((node: HTMLElement | null) => {\n    overlayScrollRef.current = node as HTMLDivElement | null;\n    transitionRefHolder.current?.(node);\n  }, []);\n\n  const overlayContent = (\n    <DisplayTransition isShown={isOpen}>\n      {({ phase, isShown, isExiting, ref: transitionRef }) => {\n        transitionRefHolder.current = transitionRef;\n        return (\n          <ListBoxPopoverWrapper\n            {...mergeProps(\n              { ...overlayPositionProps, style: positionStyle },\n              overlayBehaviorProps,\n              compositeFocusProps,\n            )}\n            ref={mergeRefs(mergedPopoverRef, layerRef)}\n            style={positionStyle}\n            // A press on the list while it fades out must not close the\n            // overlay under it (CUB-5293) — see `Overlay`.\n            data-react-aria-top-layer={isExiting || undefined}\n          >\n            <ListBoxPopoverElement\n              ref={setScrollRef}\n              data-placement={placementDirection}\n              data-phase={phase}\n              mods={{\n                open: isShown,\n                hidden: phase === 'unmounted',\n              }}\n              styles={overlayStyles}\n              style={{\n                '--overlay-min-width': comboBoxWidth\n                  ? `${comboBoxWidth}px`\n                  : undefined,\n                maxHeight,\n                maxWidth,\n              }}\n            >\n              <ListBox\n                isBare\n                ref={listBoxRef}\n                disableSelectionToggle\n                id={listBoxId}\n                aria-label={\n                  ariaLabel ||\n                  (typeof label === 'string'\n                    ? label\n                    : ariaLabelledby\n                      ? undefined\n                      : t('listBoxPopover.options', 'Options'))\n                }\n                aria-labelledby={ariaLabelledby}\n                // Left unset in single mode, as before this prop existed: an\n                // explicit `'single'` switches on ListBox's no-toggle branch,\n                // which changes what re-picking the selected option does.\n                selectionMode={\n                  selectionMode === 'multiple' ? 'multiple' : undefined\n                }\n                selectedKey={\n                  selectionMode === 'single' ? selectedKey : undefined\n                }\n                selectedKeys={\n                  selectionMode === 'multiple' ? selectedKeys : undefined\n                }\n                isCheckable={\n                  selectionMode === 'multiple' ? isCheckable : undefined\n                }\n                isDisabled={isDisabled}\n                disabledKeys={disabledKeys}\n                shouldUseVirtualFocus={true}\n                items={items as any}\n                filter={filter}\n                styles={listBoxStyles}\n                optionStyles={optionStyles}\n                optionHighlight={optionHighlight}\n                sectionStyles={sectionStyles}\n                headingStyles={headingStyles}\n                listGap={listGap}\n                stateRef={listStateRef}\n                shape=\"popover\"\n                emptyLabel={emptyLabel}\n                onSelectionChange={onSelectionChange}\n              >\n                {children as any}\n              </ListBox>\n            </ListBoxPopoverElement>\n          </ListBoxPopoverWrapper>\n        );\n      }}\n    </DisplayTransition>\n  );\n\n  return <Portal>{overlayContent}</Portal>;\n};\n"],"mappings":"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"}
+{"version":3,"file":"ListBoxPopover.js","names":["getEventTarget","isFocusWithin","Key","Styles","tasty","React","CSSProperties","ReactNode","RefObject","useCallback","useEffect","useRef","useInteractOutside","useOverlay","useOverlayPosition","useEvent","useI18n","mergeProps","mergeRefs","DisplayTransition","useModalLayerRef","Portal","ListBox","ListBoxPopoverProps","isOpen","triggerRef","HTMLElement","popoverRef","HTMLDivElement","listBoxRef","direction","shouldFlip","overlayOffset","containerPadding","comboBoxWidth","listBoxId","overlayStyles","listBoxStyles","optionStyles","optionHighlight","sectionStyles","headingStyles","listGap","selectedKey","selectionMode","selectedKeys","isCheckable","shouldCloseOnTriggerInteraction","isDisabled","disabledKeys","Iterable","items","children","listStateRef","onSelectionChange","selection","onClose","label","ariaLabel","ariaLabelledby","compositeFocusProps","onFocus","e","FocusEvent","onBlur","filter","nodes","size","emptyLabel","positionTargetRef","Element","positionApiRef","updatePosition","CONTROL_SELECTOR","LAYER_SELECTOR","DISABLED_SELECTOR","isOutsideControl","el","trigger","control","closest","contains","matches","layer","ListBoxPopoverWrapper","qa","styles","position","zIndex","ListBoxPopoverElement","display","gridRows","gridColumns","width","height","overflow","fill","radius","shadow","padding","border","hide","hidden","boxSizing","transition","translate","transformOrigin","scale","opacity","ListBoxPopover","props","$","_c","t","t0","t1","t2","undefined","mergedPopoverRef","layerRef","overlayScrollRef","t3","t4","t5","t6","targetRef","overlayRef","scrollRef","placement","offset","overlayProps","overlayPositionProps","t7","style","t8","maxHeight","maxWidth","positionStyle","t10","t9","current","t11","menuTriggerEl","dismissEl","getOutsidePressBehavior","t12","el_0","behavior","setTimeout","t13","shouldCloseOnBlur","isDismissable","shouldCloseOnInteractOutside","overlayBehaviorProps","t14","event","preventDefault","preserveOutsidePressFocus","t15","t16","ref","onInteractOutsideStart","onInteractOutside","t17","split","placementDirection","transitionRefHolder","t18","Symbol","for","node","setScrollRef","t19","t20","phase","isShown","isExiting","transitionRef","open","overlayContent"],"sources":["../../../../src/components/fields/ListBoxPopover/ListBoxPopover.tsx"],"sourcesContent":["import { getEventTarget, isFocusWithin } from '@react-aria/utils';\nimport { Key } from '@react-types/shared';\nimport { Styles, tasty } from '@tenphi/tasty';\nimport React, {\n  CSSProperties,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\nimport { useInteractOutside, useOverlay, useOverlayPosition } from 'react-aria';\n\nimport { useEvent } from '../../../_internal/hooks/use-event';\nimport { useI18n } from '../../../i18n';\nimport { mergeProps } from '../../../utils/react';\nimport { mergeRefs } from '../../../utils/react/useCombinedRefs';\nimport { DisplayTransition } from '../../helpers';\nimport { useModalLayerRef } from '../../overlays/Modal/modal-containment';\nimport { Portal } from '../../portal';\nimport { ListBox } from '../ListBox/ListBox';\n\nexport interface ListBoxPopoverProps {\n  isOpen: boolean;\n  triggerRef: RefObject<HTMLElement>;\n  popoverRef: RefObject<HTMLDivElement>;\n  listBoxRef: RefObject<HTMLDivElement>;\n  direction: 'bottom' | 'top';\n  shouldFlip: boolean;\n  overlayOffset: number;\n  containerPadding: number;\n  /** Min width (px) for the overlay; usually the trigger's width. */\n  comboBoxWidth?: number;\n  /** Stable id used for the ListBox element and aria-controls wiring. */\n  listBoxId: string;\n  overlayStyles?: Styles;\n  listBoxStyles?: Styles;\n  optionStyles?: Styles;\n  /** Substring to highlight within each option's (text) children. */\n  optionHighlight?: string;\n  sectionStyles?: Styles;\n  headingStyles?: Styles;\n  /** Space between options, in pixels. Defaults to a hairline (`1bw`). */\n  listGap?: number;\n  selectedKey?: Key | null;\n  /**\n   * `'multiple'` lets the list hold several selected options. The list then\n   * reports the whole new selection on every toggle and never closes itself;\n   * the caller decides what a toggle means. Defaults to `'single'`.\n   */\n  selectionMode?: 'single' | 'multiple';\n  /** The selected keys in `'multiple'` mode. Ignored in `'single'` mode. */\n  selectedKeys?: Key[];\n  /** Whether options show a checkbox. Only applies in `'multiple'` mode. */\n  isCheckable?: boolean;\n  /**\n   * Whether a click inside the element `triggerRef` points at closes the\n   * popover, like any other outside click. Pass `false` when that element is\n   * where the user keeps working with the list open, such as an input that\n   * picks several options in a row. Only this popover is affected; others\n   * still close. Defaults to `true`.\n   */\n  shouldCloseOnTriggerInteraction?: boolean;\n  isDisabled?: boolean;\n  disabledKeys?: Iterable<Key>;\n  items?: Iterable<any>;\n  children: ReactNode;\n  /** Ref through which the ListBox exposes its internal list state. */\n  listStateRef: RefObject<any>;\n  onSelectionChange: (selection: Key | Key[] | null) => void;\n  onClose: () => void;\n  label?: ReactNode;\n  ariaLabel?: string;\n  /**\n   * Ids of the elements that name the field, read after `label` or\n   * `ariaLabel`. Without either, they alone name the list, in place of the\n   * generic \"Options\".\n   */\n  ariaLabelledby?: string;\n  compositeFocusProps: {\n    onFocus: (e: React.FocusEvent) => void;\n    onBlur: (e: React.FocusEvent) => void;\n  };\n  /** Collection node filter applied to the ListBox. */\n  filter?: (nodes: Iterable<any>) => Iterable<any>;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  /**\n   * Label shown when the list is empty (no items / no filter results).\n   * Forwarded to the inner ListBox.\n   */\n  emptyLabel?: ReactNode;\n  /**\n   * Element to anchor the overlay to geometrically. Defaults to `triggerRef`.\n   * Use this to anchor to something other than the trigger (e.g. the caret in\n   * a textarea) while keeping `triggerRef` for outside-click/dismiss logic.\n   */\n  positionTargetRef?: RefObject<Element | null>;\n  /**\n   * Receives an imperative handle exposing `updatePosition()` so the caller can\n   * force the overlay to re-anchor (e.g. when the caret moves).\n   */\n  positionApiRef?: RefObject<{ updatePosition: () => void } | null>;\n}\n\n// The controls an outside press reaches: a button, a link, a form control,\n// anything with `tabindex`, or something inside one.\nconst CONTROL_SELECTOR =\n  'button, a[href], input, select, textarea, [tabindex], [contenteditable]:not([contenteditable=\"false\"])';\n\n// The layer a field sits in: a dialog, popover or tray, otherwise the page.\nconst LAYER_SELECTOR =\n  '[role=\"dialog\"], [role=\"alertdialog\"], [data-overlay-layer]';\n\nconst DISABLED_SELECTOR = ':disabled, [aria-disabled=\"true\"]';\n\n// An enabled control apart from the field, in the field's own layer. A press\n// anywhere else counts as blank space and keeps the field's focus and draft:\n// on the field itself, on a dialog's surface, on a disabled control, or\n// outside the field's layer, which stays open.\nfunction isOutsideControl(el: Element, trigger: HTMLElement | null) {\n  const control = el.closest(CONTROL_SELECTOR);\n\n  if (\n    control == null ||\n    trigger == null ||\n    control.contains(trigger) ||\n    trigger.contains(control) ||\n    control.matches(`${LAYER_SELECTOR}, ${DISABLED_SELECTOR}`)\n  ) {\n    return false;\n  }\n\n  const layer = trigger.closest(LAYER_SELECTOR);\n\n  return layer == null || layer.contains(control);\n}\n\nconst ListBoxPopoverWrapper = tasty({\n  qa: 'ComboBoxOverlayWrapper',\n  styles: {\n    position: 'absolute',\n    zIndex: 1000,\n  },\n});\n\nconst ListBoxPopoverElement = tasty({\n  qa: 'ComboBoxOverlay',\n  styles: {\n    display: 'grid',\n    gridRows: '1sf',\n    gridColumns: '1sf',\n    width: '$overlay-min-width max-content 50vw',\n    height: 'initial max-content (50vh - 5x)',\n    overflow: 'auto',\n    fill: '#surface',\n    radius: '1cr',\n    shadow: true,\n    padding: '0',\n    border: '#border',\n    hide: {\n      '': false,\n      hidden: true,\n    },\n    boxSizing: 'border-box',\n    transition:\n      'translate $transition ease-out, scale $transition ease-out, theme $transition ease-out',\n    translate: {\n      '': '0 0',\n      'open & [data-placement=\"top\"]': '0 0',\n      '!open & [data-placement=\"top\"]': '0 1x',\n      'open & ([data-placement=\"bottom\"] | ![data-placement])': '0 0',\n      '!open & ([data-placement=\"bottom\"] | ![data-placement])': '0 -1x',\n    },\n    transformOrigin: {\n      '': 'top center',\n      '[data-placement=\"top\"]': 'bottom center',\n    },\n    scale: {\n      '': '1 1',\n      '!open': '1 .9',\n    },\n    opacity: {\n      '': 1,\n      '!open': 0.001,\n    },\n\n    '$overlay-min-width': 'min 30x',\n  },\n});\n\nexport const ListBoxPopover = function ListBoxPopover(\n  props: ListBoxPopoverProps,\n) {\n  const { t } = useI18n();\n  const {\n    isOpen,\n    triggerRef,\n    popoverRef,\n    listBoxRef,\n    direction,\n    shouldFlip,\n    overlayOffset,\n    containerPadding,\n    comboBoxWidth,\n    listBoxId,\n    overlayStyles,\n    listBoxStyles,\n    optionStyles,\n    optionHighlight,\n    sectionStyles,\n    headingStyles,\n    listGap,\n    selectedKey,\n    selectionMode = 'single',\n    selectedKeys,\n    isCheckable,\n    shouldCloseOnTriggerInteraction = true,\n    isDisabled,\n    disabledKeys,\n    items,\n    children,\n    listStateRef,\n    onSelectionChange,\n    onClose,\n    label,\n    ariaLabel,\n    ariaLabelledby,\n    compositeFocusProps,\n    filter,\n    size = 'medium',\n    emptyLabel,\n    positionTargetRef,\n    positionApiRef,\n  } = props;\n\n  const mergedPopoverRef = popoverRef;\n\n  // Opened inside a modal, the list stays readable while the modal hides the\n  // page.\n  const layerRef = useModalLayerRef();\n\n  // Ref to the inner scrollable element (the visible popover). react-aria\n  // measures this for its flip/shrink math and writes maxHeight onto the\n  // overlay (positioning wrapper); we forward that maxHeight to this element\n  // below so the scroll container actually shrinks instead of overflowing.\n  const overlayScrollRef = useRef<HTMLDivElement | null>(null);\n\n  // Overlay positioning — anchor to the explicit position target when given\n  // (e.g. a caret anchor), otherwise to the trigger. `triggerRef` is still\n  // used below for outside-click/dismiss behavior.\n  const {\n    overlayProps: overlayPositionProps,\n    placement,\n    updatePosition,\n  } = useOverlayPosition({\n    targetRef: (positionTargetRef ?? triggerRef) as any,\n    overlayRef: mergedPopoverRef as any,\n    scrollRef: overlayScrollRef as any,\n    placement: `${direction} start` as any,\n    shouldFlip,\n    isOpen,\n    offset: overlayOffset,\n    containerPadding: containerPadding,\n  });\n\n  // Keep positioning (top/left/zIndex) on the wrapper, but split out the\n  // available-space cap so it can be applied to the inner scroll element.\n  const { maxHeight, maxWidth, ...positionStyle } =\n    (overlayPositionProps.style ?? {}) as CSSProperties;\n\n  // Expose updatePosition so callers can re-anchor on demand (e.g. caret move).\n  useEffect(() => {\n    if (positionApiRef) {\n      positionApiRef.current = { updatePosition };\n    }\n    return () => {\n      if (positionApiRef) {\n        positionApiRef.current = null;\n      }\n    };\n  }, [positionApiRef, updatePosition]);\n\n  const getOutsidePressBehavior = (el: Element) => {\n    const menuTriggerEl = el.closest('[data-popover-trigger]');\n    if (menuTriggerEl) {\n      return menuTriggerEl === triggerRef.current ? 'consume' : 'ignore';\n    }\n    if (\n      (!shouldCloseOnTriggerInteraction && triggerRef.current?.contains(el)) ||\n      el.closest('[data-popover-keep]')\n    ) {\n      return 'ignore';\n    }\n    // The press reaches an outside control, so a checkbox toggles, a text\n    // field takes focus and a native Save button saves on the first click.\n    // A UI Kit Button passes from any layer, unless it is disabled.\n    const dismissEl = el.closest('[data-popover-dismiss]');\n\n    if (\n      isOutsideControl(el, triggerRef.current) ||\n      (dismissEl != null && !dismissEl.matches(DISABLED_SELECTOR))\n    ) {\n      return 'pass';\n    }\n    return 'consume';\n  };\n\n  // Overlay behavior (dismiss on outside click, escape)\n  const { overlayProps: overlayBehaviorProps } = useOverlay(\n    {\n      onClose,\n      shouldCloseOnBlur: true,\n      isOpen,\n      isDismissable: true,\n      shouldCloseOnInteractOutside: (el) => {\n        const behavior = getOutsidePressBehavior(el);\n        if (behavior === 'pass') {\n          // Leave the control's press intact and close after its action.\n          setTimeout(onClose, 0);\n        }\n        return behavior === 'consume';\n      },\n    },\n    mergedPopoverRef as any,\n  );\n\n  const preserveOutsidePressFocus = useEvent((event: PointerEvent) => {\n    if (\n      (isFocusWithin(triggerRef.current) ||\n        isFocusWithin(mergedPopoverRef.current)) &&\n      getOutsidePressBehavior(getEventTarget(event) as Element) === 'consume'\n    ) {\n      event.preventDefault();\n    }\n  });\n\n  // Aria now permits outside presses to move focus. A passed press moves it\n  // to its control, and the field settles its draft on blur, as on Tab. A\n  // consumed press, such as one on blank space or a dialog's backdrop, must\n  // only dismiss this list: the field keeps focus and its draft.\n  useInteractOutside({\n    ref: mergedPopoverRef,\n    isDisabled: !isOpen,\n    onInteractOutsideStart: preserveOutsidePressFocus,\n    onInteractOutside: preserveOutsidePressFocus,\n  });\n\n  // Extract primary placement direction for consistent styling\n  const placementDirection = placement?.split(' ')[0] || direction;\n\n  // Hold the DisplayTransition ref so we can bind the same node to both the\n  // transition listener and our scroll ref via a single stable callback.\n  const transitionRefHolder = useRef<\n    ((node: HTMLElement | null) => void) | null\n  >(null);\n  const setScrollRef = useCallback((node: HTMLElement | null) => {\n    overlayScrollRef.current = node as HTMLDivElement | null;\n    transitionRefHolder.current?.(node);\n  }, []);\n\n  const overlayContent = (\n    <DisplayTransition isShown={isOpen}>\n      {({ phase, isShown, isExiting, ref: transitionRef }) => {\n        transitionRefHolder.current = transitionRef;\n        return (\n          <ListBoxPopoverWrapper\n            {...mergeProps(\n              { ...overlayPositionProps, style: positionStyle },\n              overlayBehaviorProps,\n              compositeFocusProps,\n            )}\n            ref={mergeRefs(mergedPopoverRef, layerRef)}\n            style={positionStyle}\n            // A press on the list while it fades out must not close the\n            // overlay under it (CUB-5293) — see `Overlay`.\n            data-react-aria-top-layer={isExiting || undefined}\n          >\n            <ListBoxPopoverElement\n              ref={setScrollRef}\n              data-placement={placementDirection}\n              data-phase={phase}\n              mods={{\n                open: isShown,\n                hidden: phase === 'unmounted',\n              }}\n              styles={overlayStyles}\n              style={{\n                '--overlay-min-width': comboBoxWidth\n                  ? `${comboBoxWidth}px`\n                  : undefined,\n                maxHeight,\n                maxWidth,\n              }}\n            >\n              <ListBox\n                isBare\n                ref={listBoxRef}\n                disableSelectionToggle\n                id={listBoxId}\n                aria-label={\n                  ariaLabel ||\n                  (typeof label === 'string'\n                    ? label\n                    : ariaLabelledby\n                      ? undefined\n                      : t('listBoxPopover.options', 'Options'))\n                }\n                aria-labelledby={ariaLabelledby}\n                selectionMode={selectionMode}\n                selectedKey={\n                  selectionMode === 'single' ? selectedKey : undefined\n                }\n                selectedKeys={\n                  selectionMode === 'multiple' ? selectedKeys : undefined\n                }\n                isCheckable={\n                  selectionMode === 'multiple' ? isCheckable : undefined\n                }\n                isDisabled={isDisabled}\n                disabledKeys={disabledKeys}\n                // As in Select: a large field opens large options, a small\n                // one medium options, which stay easy to pick.\n                size={size === 'large' ? 'large' : 'medium'}\n                shouldUseVirtualFocus={true}\n                items={items as any}\n                filter={filter}\n                styles={listBoxStyles}\n                optionStyles={optionStyles}\n                optionHighlight={optionHighlight}\n                sectionStyles={sectionStyles}\n                headingStyles={headingStyles}\n                listGap={listGap}\n                stateRef={listStateRef}\n                shape=\"popover\"\n                emptyLabel={emptyLabel}\n                onSelectionChange={onSelectionChange}\n              >\n                {children as any}\n              </ListBox>\n            </ListBoxPopoverElement>\n          </ListBoxPopoverWrapper>\n        );\n      }}\n    </DisplayTransition>\n  );\n\n  return <Portal>{overlayContent}</Portal>;\n};\n"],"mappings":"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"}

package/dist/components/fields/ListBoxPopover/listNavigation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bef9600 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e3f8a1a | Cube Dev Team */
 //#region src/components/fields/ListBoxPopover/listNavigation.ts
 /**
 * Walks a collection (possibly nested under sections) and collects the keys of

package/dist/components/fields/ListBoxPopover/useCompositeFocus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bef9600 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e3f8a1a | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { useEffect, useRef } from "react";

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

@@ -1,7 +1,6 @@
 
 import { FieldBaseProps, TextFieldKeyboardProps } from "../../../shared/form.js";
 import { CubeTextInputBaseProps } from "../TextInput/TextInputBase.js";
-import "../TextInput/index.js";
 import * as react from "react";
 import { AriaNumberFieldProps as AriaNumberFieldProps$1 } from "react-aria";
 import { TextInputDOMEvents } from "@react-types/shared";

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

@@ -1,8 +1,10 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bef9600 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e3f8a1a | Cube Dev Team */
 import { 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 === "after" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [steppers, suffix] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [suffix, steppers] }) : 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","suffixPosition","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","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   * 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  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      // The validation/loading icon always comes first; `suffixPosition`\n      // places the suffix against the steppers instead.\n      suffixPosition=\"after\"\n      suffix={\n        showStepper ? (\n          props.suffixPosition === 'after' ? (\n            <>\n              {steppers}\n              {suffix}\n            </>\n          ) : (\n            <>\n              {suffix}\n              {steppers}\n            </>\n          )\n        ) : (\n          suffix\n        )\n      }\n    />\n  );\n}\n\n/**\n * NumberFields allow users to enter a number and increment or decrement the value using stepper buttons.\n */\nconst _NumberInput = forwardRef(NumberInput);\n\n(_NumberInput as any).cubeInputType = 'Number';\n\n_NumberInput.displayName = 'NumberInput';\n\nexport { _NumberInput as NumberInput };\nexport type { AriaNumberFieldProps };\n"],"mappings":"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"}
+{"version":3,"file":"NumberInput.js","names":["tasty","ForwardedRef","forwardRef","KeyboardEvent","RefObject","useRef","AriaNumberFieldProps","mergeProps","mergeAriaProps","useKeyboard","useLocale","useNumberField","useNumberFieldState","useI18n","castNullableNumberValue","WithNullableValue","useFieldProps","useDisplayedValidation","CubeTextInputBaseProps","TextInputBase","StepButton","TextInputDOMEvents","FieldBaseProps","TextFieldKeyboardProps","CubeNumberInputProps","Omit","field","hideStepper","suffixPosition","StyledTextInputBase","inputStyles","textAlign","StepperContainer","styles","display","gridColumns","gridRows","flow","placeSelf","margin","NumberInput","rawProps","ref","$","_c","t","t0","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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"}