@cube-dev/ui-kit 0.181.0 → 0.183.0

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

@@ -1 +1 @@
-{"version":3,"file":"ListBoxPopover.js","names":["mergeProps"],"sources":["../../../../src/components/fields/ListBoxPopover/ListBoxPopover.tsx"],"sourcesContent":["import { 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 { useOverlay, useOverlayPosition } from 'react-aria';\n\nimport { useI18n } from '../../../i18n';\nimport { mergeProps } from '../../../utils/react';\nimport { DisplayTransition } from '../../helpers';\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  selectedKey?: Key | null;\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  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\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    selectedKey,\n    isDisabled,\n    disabledKeys,\n    items,\n    children,\n    listStateRef,\n    onSelectionChange,\n    onClose,\n    label,\n    ariaLabel,\n    compositeFocusProps,\n    filter,\n    size = 'medium',\n    emptyLabel,\n    positionTargetRef,\n    positionApiRef,\n  } = props;\n\n  const mergedPopoverRef = popoverRef;\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  // 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 menuTriggerEl = el.closest('[data-popover-trigger]');\n        if (!menuTriggerEl) {\n          if (el.closest('[data-popover-keep]')) return false;\n          // Plain interactive controls (Button, ItemButton) opt in via\n          // `data-popover-dismiss` to dismiss us without losing their click\n          // to useOverlay's stopPropagation. Schedule the close after the\n          // click finishes so the button's onPress runs first.\n          if (el.closest('[data-popover-dismiss]')) {\n            setTimeout(onClose, 0);\n            return false;\n          }\n          return true;\n        }\n        if (menuTriggerEl === triggerRef?.current) return true;\n        return false;\n      },\n    },\n    mergedPopoverRef as any,\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, ref: transitionRef }) => {\n        transitionRefHolder.current = transitionRef;\n        return (\n          <ListBoxPopoverWrapper\n            {...mergeProps(\n              { ...overlayPositionProps, style: positionStyle },\n              overlayBehaviorProps,\n              compositeFocusProps,\n            )}\n            ref={mergedPopoverRef}\n            style={positionStyle}\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                ref={listBoxRef}\n                disableSelectionToggle\n                id={listBoxId}\n                aria-label={\n                  ariaLabel ||\n                  (typeof label === 'string'\n                    ? label\n                    : t('listBoxPopover.options', 'Options'))\n                }\n                selectedKey={selectedKey}\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                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":["Key","Styles","tasty","React","CSSProperties","ReactNode","RefObject","useCallback","useEffect","useRef","useOverlay","useOverlayPosition","useI18n","mergeProps","DisplayTransition","Portal","ListBox","ListBoxPopoverProps","isOpen","triggerRef","HTMLElement","popoverRef","HTMLDivElement","listBoxRef","direction","shouldFlip","overlayOffset","containerPadding","comboBoxWidth","listBoxId","overlayStyles","listBoxStyles","optionStyles","optionHighlight","sectionStyles","headingStyles","selectedKey","isDisabled","disabledKeys","Iterable","items","children","listStateRef","onSelectionChange","selection","onClose","label","ariaLabel","compositeFocusProps","onFocus","e","FocusEvent","onBlur","filter","nodes","size","emptyLabel","positionTargetRef","Element","positionApiRef","updatePosition","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","undefined","mergedPopoverRef","overlayScrollRef","t1","t2","t3","t4","targetRef","overlayRef","scrollRef","placement","offset","overlayProps","overlayPositionProps","t5","style","t6","maxHeight","maxWidth","positionStyle","t7","t8","current","t9","el","menuTriggerEl","closest","setTimeout","t10","shouldCloseOnBlur","isDismissable","shouldCloseOnInteractOutside","overlayBehaviorProps","t11","split","placementDirection","transitionRefHolder","t12","Symbol","for","node","setScrollRef","t13","t14","phase","isShown","ref","transitionRef","open","overlayContent"],"sources":["../../../../src/components/fields/ListBoxPopover/ListBoxPopover.tsx"],"sourcesContent":["import { 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 { useOverlay, useOverlayPosition } from 'react-aria';\n\nimport { useI18n } from '../../../i18n';\nimport { mergeProps } from '../../../utils/react';\nimport { DisplayTransition } from '../../helpers';\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  selectedKey?: Key | null;\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  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\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    selectedKey,\n    isDisabled,\n    disabledKeys,\n    items,\n    children,\n    listStateRef,\n    onSelectionChange,\n    onClose,\n    label,\n    ariaLabel,\n    compositeFocusProps,\n    filter,\n    size = 'medium',\n    emptyLabel,\n    positionTargetRef,\n    positionApiRef,\n  } = props;\n\n  const mergedPopoverRef = popoverRef;\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  // 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 menuTriggerEl = el.closest('[data-popover-trigger]');\n        if (!menuTriggerEl) {\n          if (el.closest('[data-popover-keep]')) return false;\n          // Plain interactive controls (Button, ItemButton) opt in via\n          // `data-popover-dismiss` to dismiss us without losing their click\n          // to useOverlay's stopPropagation. Schedule the close after the\n          // click finishes so the button's onPress runs first.\n          if (el.closest('[data-popover-dismiss]')) {\n            setTimeout(onClose, 0);\n            return false;\n          }\n          return true;\n        }\n        if (menuTriggerEl === triggerRef?.current) return true;\n        return false;\n      },\n    },\n    mergedPopoverRef as any,\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, ref: transitionRef }) => {\n        transitionRefHolder.current = transitionRef;\n        return (\n          <ListBoxPopoverWrapper\n            {...mergeProps(\n              { ...overlayPositionProps, style: positionStyle },\n              overlayBehaviorProps,\n              compositeFocusProps,\n            )}\n            ref={mergedPopoverRef}\n            style={positionStyle}\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                ref={listBoxRef}\n                disableSelectionToggle\n                id={listBoxId}\n                aria-label={\n                  ariaLabel ||\n                  (typeof label === 'string'\n                    ? label\n                    : t('listBoxPopover.options', 'Options'))\n                }\n                selectedKey={selectedKey}\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                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.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | 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/listNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"listNavigation.js","names":[],"sources":["../../../../src/components/fields/ListBoxPopover/listNavigation.ts"],"sourcesContent":["import { Key } from '@react-types/shared';\n\n/**\n * Minimal view of a React Stately list state. Kept structural (no imports from\n * `react-stately`) so the helpers can be used from any collection-backed\n * component without dragging extra types in.\n */\nexport interface ListStateLike {\n  selectionManager: {\n    focusedKey: Key | null;\n    setFocusedKey: (key: Key | null) => void;\n  };\n  collection: Iterable<any>;\n  disabledKeys?: Set<Key>;\n  lastFocusSourceRef?: { current: 'keyboard' | 'mouse' | 'other' };\n}\n\nexport type NavigationDirection = 1 | -1;\nexport type NavigationEdge = 'first' | 'last';\n\n/**\n * Walks a collection (possibly nested under sections) and collects the keys of\n * selectable items, skipping disabled ones. Mirrors the inline walker that\n * used to live in `useComboBoxKeyboard`.\n */\nexport function collectVisibleKeys(\n  nodes: Iterable<any>,\n  out: Key[],\n  disabledKeys?: Set<Key>,\n): void {\n  for (const node of nodes) {\n    if (node.type === 'item') {\n      if (!disabledKeys?.has(node.key)) {\n        out.push(node.key);\n      }\n    } else if (node.childNodes) {\n      collectVisibleKeys(node.childNodes, out, disabledKeys);\n    }\n  }\n}\n\n/** Convenience: returns the flat list of selectable keys for a list state. */\nexport function getVisibleKeys(listState: ListStateLike): Key[] {\n  const keys: Key[] = [];\n  collectVisibleKeys(\n    listState.collection,\n    keys,\n    listState.disabledKeys as Set<Key> | undefined,\n  );\n  return keys;\n}\n\n/**\n * Computes the next key to focus when navigating with ArrowUp/ArrowDown.\n *\n * - If `fromKey` is omitted, reads `selectionManager.focusedKey`.\n * - When nothing is focused (or the focused key is no longer visible), falls\n *   back to the first/last visible key depending on `direction`.\n * - When the current key is the boundary, either returns `null` (default) or\n *   wraps to the opposite edge when `opts.wrap` is true.\n */\nexport function getNextVisibleKey(\n  listState: ListStateLike,\n  direction: NavigationDirection,\n  opts?: { wrap?: boolean; fromKey?: Key | null },\n): Key | null {\n  const visibleKeys = getVisibleKeys(listState);\n  if (visibleKeys.length === 0) return null;\n\n  const isForward = direction === 1;\n  const currentKey = opts?.fromKey ?? listState.selectionManager.focusedKey;\n\n  if (currentKey == null) {\n    return isForward ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];\n  }\n\n  const currentIndex = visibleKeys.indexOf(currentKey);\n\n  if (currentIndex === -1) {\n    // Focused item was filtered out — restart from the matching edge.\n    return isForward ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];\n  }\n\n  const newIndex = currentIndex + direction;\n  if (newIndex >= 0 && newIndex < visibleKeys.length) {\n    return visibleKeys[newIndex];\n  }\n\n  if (opts?.wrap) {\n    return isForward ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];\n  }\n\n  return null;\n}\n\n/** Returns the first or last selectable key. */\nexport function getEdgeVisibleKey(\n  listState: ListStateLike,\n  edge: NavigationEdge,\n): Key | null {\n  const visibleKeys = getVisibleKeys(listState);\n  if (visibleKeys.length === 0) return null;\n  return edge === 'first'\n    ? visibleKeys[0]\n    : visibleKeys[visibleKeys.length - 1];\n}\n\n/**\n * Marks a focus change as keyboard-driven so the underlying ListBox scrolls the\n * highlighted option into view. No-op when the list state doesn't expose a\n * `lastFocusSourceRef`.\n */\nexport function markKeyboardFocus(listState: ListStateLike): void {\n  if (listState.lastFocusSourceRef) {\n    listState.lastFocusSourceRef.current = 'keyboard';\n  }\n}\n\nexport type TextFilterFn = (textValue: string, inputValue: string) => boolean;\n\n/** Options controlling how {@link filterCollectionNodes} matches nodes. */\nexport interface FilterCollectionOptions {\n  /**\n   * Also match against a node's plain-text `children` and `description` props\n   * in addition to its `textValue`. Defaults to `false` so the search stays\n   * consistent with the visible `textValue` (which is what components like\n   * ComboBox document). Components that surface `children`/`description` in the\n   * option list (e.g. CommandTextArea) can opt in.\n   */\n  matchExtraFields?: boolean;\n}\n\n/**\n * Collects the strings a node can be matched against. Always includes the\n * node's `textValue`; when `matchExtraFields` is set, also includes any\n * plain-text `children` and `description` props. Non-string children/description\n * (e.g. React elements) are ignored since we can't reliably read their text.\n */\nfunction getSearchableStrings(node: any, matchExtraFields: boolean): string[] {\n  const strings: string[] = [];\n\n  if (node.textValue) {\n    strings.push(node.textValue);\n  }\n\n  if (matchExtraFields) {\n    const props = node.props;\n    if (props) {\n      if (typeof props.children === 'string') {\n        strings.push(props.children);\n      }\n      if (typeof props.description === 'string') {\n        strings.push(props.description);\n      }\n    }\n  }\n\n  return strings.length > 0 ? strings : [node.textValue || ''];\n}\n\n/** True when the term matches any of the node's searchable strings. */\nfunction nodeMatchesTerm(\n  node: any,\n  term: string,\n  textFilterFn: TextFilterFn,\n  matchExtraFields: boolean,\n): boolean {\n  return getSearchableStrings(node, matchExtraFields).some((text) =>\n    textFilterFn(text, term),\n  );\n}\n\n/**\n * Filters collection nodes by a search term while preserving section structure.\n * By default a node matches only when the term matches its `textValue`; pass\n * `{ matchExtraFields: true }` to also match its plain-text `children` and\n * `description`. Sections whose children all fail the filter are dropped.\n */\nexport function filterCollectionNodes(\n  nodes: Iterable<any>,\n  term: string,\n  textFilterFn: TextFilterFn,\n  options: FilterCollectionOptions = {},\n): Iterable<any> {\n  if (!term) {\n    return nodes;\n  }\n\n  const matchExtraFields = options.matchExtraFields ?? false;\n\n  return [...nodes]\n    .map((node: any) => {\n      if (node.type === 'section' && node.childNodes) {\n        const filteredChildren = [...node.childNodes].filter((child: any) =>\n          nodeMatchesTerm(child, term, textFilterFn, matchExtraFields),\n        );\n\n        if (filteredChildren.length === 0) {\n          return null;\n        }\n\n        return {\n          ...node,\n          childNodes: filteredChildren,\n          hasChildNodes: true,\n        };\n      }\n\n      return nodeMatchesTerm(node, term, textFilterFn, matchExtraFields)\n        ? node\n        : null;\n    })\n    .filter(Boolean);\n}\n"],"mappings":";;;;;;;AAyBA,SAAgB,mBACd,OACA,KACA,cACM;AACN,MAAK,MAAM,QAAQ,MACjB,KAAI,KAAK,SAAS,QAChB;MAAI,CAAC,cAAc,IAAI,KAAK,IAAI,CAC9B,KAAI,KAAK,KAAK,IAAI;YAEX,KAAK,WACd,oBAAmB,KAAK,YAAY,KAAK,aAAa;;;AAM5D,SAAgB,eAAe,WAAiC;CAC9D,MAAM,OAAc,EAAE;AACtB,oBACE,UAAU,YACV,MACA,UAAU,aACX;AACD,QAAO;;;;;;;;;;;AAYT,SAAgB,kBACd,WACA,WACA,MACY;CACZ,MAAM,cAAc,eAAe,UAAU;AAC7C,KAAI,YAAY,WAAW,EAAG,QAAO;CAErC,MAAM,YAAY,cAAc;CAChC,MAAM,aAAa,MAAM,WAAW,UAAU,iBAAiB;AAE/D,KAAI,cAAc,KAChB,QAAO,YAAY,YAAY,KAAK,YAAY,YAAY,SAAS;CAGvE,MAAM,eAAe,YAAY,QAAQ,WAAW;AAEpD,KAAI,iBAAiB,GAEnB,QAAO,YAAY,YAAY,KAAK,YAAY,YAAY,SAAS;CAGvE,MAAM,WAAW,eAAe;AAChC,KAAI,YAAY,KAAK,WAAW,YAAY,OAC1C,QAAO,YAAY;AAGrB,KAAI,MAAM,KACR,QAAO,YAAY,YAAY,KAAK,YAAY,YAAY,SAAS;AAGvE,QAAO;;;AAIT,SAAgB,kBACd,WACA,MACY;CACZ,MAAM,cAAc,eAAe,UAAU;AAC7C,KAAI,YAAY,WAAW,EAAG,QAAO;AACrC,QAAO,SAAS,UACZ,YAAY,KACZ,YAAY,YAAY,SAAS;;;;;;;AAQvC,SAAgB,kBAAkB,WAAgC;AAChE,KAAI,UAAU,mBACZ,WAAU,mBAAmB,UAAU;;;;;;;;AAwB3C,SAAS,qBAAqB,MAAW,kBAAqC;CAC5E,MAAM,UAAoB,EAAE;AAE5B,KAAI,KAAK,UACP,SAAQ,KAAK,KAAK,UAAU;AAG9B,KAAI,kBAAkB;EACpB,MAAM,QAAQ,KAAK;AACnB,MAAI,OAAO;AACT,OAAI,OAAO,MAAM,aAAa,SAC5B,SAAQ,KAAK,MAAM,SAAS;AAE9B,OAAI,OAAO,MAAM,gBAAgB,SAC/B,SAAQ,KAAK,MAAM,YAAY;;;AAKrC,QAAO,QAAQ,SAAS,IAAI,UAAU,CAAC,KAAK,aAAa,GAAG;;;AAI9D,SAAS,gBACP,MACA,MACA,cACA,kBACS;AACT,QAAO,qBAAqB,MAAM,iBAAiB,CAAC,MAAM,SACxD,aAAa,MAAM,KAAK,CACzB;;;;;;;;AASH,SAAgB,sBACd,OACA,MACA,cACA,UAAmC,EAAE,EACtB;AACf,KAAI,CAAC,KACH,QAAO;CAGT,MAAM,mBAAmB,QAAQ,oBAAoB;AAErD,QAAO,CAAC,GAAG,MAAM,CACd,KAAK,SAAc;AAClB,MAAI,KAAK,SAAS,aAAa,KAAK,YAAY;GAC9C,MAAM,mBAAmB,CAAC,GAAG,KAAK,WAAW,CAAC,QAAQ,UACpD,gBAAgB,OAAO,MAAM,cAAc,iBAAiB,CAC7D;AAED,OAAI,iBAAiB,WAAW,EAC9B,QAAO;AAGT,UAAO;IACL,GAAG;IACH,YAAY;IACZ,eAAe;IAChB;;AAGH,SAAO,gBAAgB,MAAM,MAAM,cAAc,iBAAiB,GAC9D,OACA;GACJ,CACD,OAAO,QAAQ"}
+{"version":3,"file":"listNavigation.js","names":["Key","ListStateLike","selectionManager","focusedKey","setFocusedKey","key","collection","Iterable","disabledKeys","Set","lastFocusSourceRef","current","NavigationDirection","NavigationEdge","collectVisibleKeys","nodes","out","node","type","has","push","childNodes","getVisibleKeys","listState","keys","getNextVisibleKey","direction","opts","wrap","fromKey","visibleKeys","length","isForward","currentKey","currentIndex","indexOf","newIndex","getEdgeVisibleKey","edge","markKeyboardFocus","TextFilterFn","textValue","inputValue","FilterCollectionOptions","matchExtraFields","getSearchableStrings","strings","props","children","description","nodeMatchesTerm","term","textFilterFn","some","text","filterCollectionNodes","options","map","filteredChildren","filter","child","hasChildNodes","Boolean"],"sources":["../../../../src/components/fields/ListBoxPopover/listNavigation.ts"],"sourcesContent":["import { Key } from '@react-types/shared';\n\n/**\n * Minimal view of a React Stately list state. Kept structural (no imports from\n * `react-stately`) so the helpers can be used from any collection-backed\n * component without dragging extra types in.\n */\nexport interface ListStateLike {\n  selectionManager: {\n    focusedKey: Key | null;\n    setFocusedKey: (key: Key | null) => void;\n  };\n  collection: Iterable<any>;\n  disabledKeys?: Set<Key>;\n  lastFocusSourceRef?: { current: 'keyboard' | 'mouse' | 'other' };\n}\n\nexport type NavigationDirection = 1 | -1;\nexport type NavigationEdge = 'first' | 'last';\n\n/**\n * Walks a collection (possibly nested under sections) and collects the keys of\n * selectable items, skipping disabled ones. Mirrors the inline walker that\n * used to live in `useComboBoxKeyboard`.\n */\nexport function collectVisibleKeys(\n  nodes: Iterable<any>,\n  out: Key[],\n  disabledKeys?: Set<Key>,\n): void {\n  for (const node of nodes) {\n    if (node.type === 'item') {\n      if (!disabledKeys?.has(node.key)) {\n        out.push(node.key);\n      }\n    } else if (node.childNodes) {\n      collectVisibleKeys(node.childNodes, out, disabledKeys);\n    }\n  }\n}\n\n/** Convenience: returns the flat list of selectable keys for a list state. */\nexport function getVisibleKeys(listState: ListStateLike): Key[] {\n  const keys: Key[] = [];\n  collectVisibleKeys(\n    listState.collection,\n    keys,\n    listState.disabledKeys as Set<Key> | undefined,\n  );\n  return keys;\n}\n\n/**\n * Computes the next key to focus when navigating with ArrowUp/ArrowDown.\n *\n * - If `fromKey` is omitted, reads `selectionManager.focusedKey`.\n * - When nothing is focused (or the focused key is no longer visible), falls\n *   back to the first/last visible key depending on `direction`.\n * - When the current key is the boundary, either returns `null` (default) or\n *   wraps to the opposite edge when `opts.wrap` is true.\n */\nexport function getNextVisibleKey(\n  listState: ListStateLike,\n  direction: NavigationDirection,\n  opts?: { wrap?: boolean; fromKey?: Key | null },\n): Key | null {\n  const visibleKeys = getVisibleKeys(listState);\n  if (visibleKeys.length === 0) return null;\n\n  const isForward = direction === 1;\n  const currentKey = opts?.fromKey ?? listState.selectionManager.focusedKey;\n\n  if (currentKey == null) {\n    return isForward ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];\n  }\n\n  const currentIndex = visibleKeys.indexOf(currentKey);\n\n  if (currentIndex === -1) {\n    // Focused item was filtered out — restart from the matching edge.\n    return isForward ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];\n  }\n\n  const newIndex = currentIndex + direction;\n  if (newIndex >= 0 && newIndex < visibleKeys.length) {\n    return visibleKeys[newIndex];\n  }\n\n  if (opts?.wrap) {\n    return isForward ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];\n  }\n\n  return null;\n}\n\n/** Returns the first or last selectable key. */\nexport function getEdgeVisibleKey(\n  listState: ListStateLike,\n  edge: NavigationEdge,\n): Key | null {\n  const visibleKeys = getVisibleKeys(listState);\n  if (visibleKeys.length === 0) return null;\n  return edge === 'first'\n    ? visibleKeys[0]\n    : visibleKeys[visibleKeys.length - 1];\n}\n\n/**\n * Marks a focus change as keyboard-driven so the underlying ListBox scrolls the\n * highlighted option into view. No-op when the list state doesn't expose a\n * `lastFocusSourceRef`.\n */\nexport function markKeyboardFocus(listState: ListStateLike): void {\n  if (listState.lastFocusSourceRef) {\n    listState.lastFocusSourceRef.current = 'keyboard';\n  }\n}\n\nexport type TextFilterFn = (textValue: string, inputValue: string) => boolean;\n\n/** Options controlling how {@link filterCollectionNodes} matches nodes. */\nexport interface FilterCollectionOptions {\n  /**\n   * Also match against a node's plain-text `children` and `description` props\n   * in addition to its `textValue`. Defaults to `false` so the search stays\n   * consistent with the visible `textValue` (which is what components like\n   * ComboBox document). Components that surface `children`/`description` in the\n   * option list (e.g. CommandTextArea) can opt in.\n   */\n  matchExtraFields?: boolean;\n}\n\n/**\n * Collects the strings a node can be matched against. Always includes the\n * node's `textValue`; when `matchExtraFields` is set, also includes any\n * plain-text `children` and `description` props. Non-string children/description\n * (e.g. React elements) are ignored since we can't reliably read their text.\n */\nfunction getSearchableStrings(node: any, matchExtraFields: boolean): string[] {\n  const strings: string[] = [];\n\n  if (node.textValue) {\n    strings.push(node.textValue);\n  }\n\n  if (matchExtraFields) {\n    const props = node.props;\n    if (props) {\n      if (typeof props.children === 'string') {\n        strings.push(props.children);\n      }\n      if (typeof props.description === 'string') {\n        strings.push(props.description);\n      }\n    }\n  }\n\n  return strings.length > 0 ? strings : [node.textValue || ''];\n}\n\n/** True when the term matches any of the node's searchable strings. */\nfunction nodeMatchesTerm(\n  node: any,\n  term: string,\n  textFilterFn: TextFilterFn,\n  matchExtraFields: boolean,\n): boolean {\n  return getSearchableStrings(node, matchExtraFields).some((text) =>\n    textFilterFn(text, term),\n  );\n}\n\n/**\n * Filters collection nodes by a search term while preserving section structure.\n * By default a node matches only when the term matches its `textValue`; pass\n * `{ matchExtraFields: true }` to also match its plain-text `children` and\n * `description`. Sections whose children all fail the filter are dropped.\n */\nexport function filterCollectionNodes(\n  nodes: Iterable<any>,\n  term: string,\n  textFilterFn: TextFilterFn,\n  options: FilterCollectionOptions = {},\n): Iterable<any> {\n  if (!term) {\n    return nodes;\n  }\n\n  const matchExtraFields = options.matchExtraFields ?? false;\n\n  return [...nodes]\n    .map((node: any) => {\n      if (node.type === 'section' && node.childNodes) {\n        const filteredChildren = [...node.childNodes].filter((child: any) =>\n          nodeMatchesTerm(child, term, textFilterFn, matchExtraFields),\n        );\n\n        if (filteredChildren.length === 0) {\n          return null;\n        }\n\n        return {\n          ...node,\n          childNodes: filteredChildren,\n          hasChildNodes: true,\n        };\n      }\n\n      return nodeMatchesTerm(node, term, textFilterFn, matchExtraFields)\n        ? node\n        : null;\n    })\n    .filter(Boolean);\n}\n"],"mappings":";;;;;;;AAyBA,SAAgBc,mBACdC,OACAC,KACAR,cACM;AACN,MAAK,MAAMS,QAAQF,MACjB,KAAIE,KAAKC,SAAS,QAChB;MAAI,CAACV,cAAcW,IAAIF,KAAKZ,IAAI,CAC9BW,KAAII,KAAKH,KAAKZ,IAAI;YAEXY,KAAKI,WACdP,oBAAmBG,KAAKI,YAAYL,KAAKR,aAAa;;;AAM5D,SAAgBc,eAAeC,WAAiC;CAC9D,MAAMC,OAAc,EAAE;AACtBV,oBACES,UAAUjB,YACVkB,MACAD,UAAUf,aACX;AACD,QAAOgB;;;;;;;;;;;AAYT,SAAgBC,kBACdF,WACAG,WACAC,MACY;CACZ,MAAMG,cAAcR,eAAeC,UAAU;AAC7C,KAAIO,YAAYC,WAAW,EAAG,QAAO;CAErC,MAAMC,YAAYN,cAAc;CAChC,MAAMO,aAAaN,MAAME,WAAWN,UAAUrB,iBAAiBC;AAE/D,KAAI8B,cAAc,KAChB,QAAOD,YAAYF,YAAY,KAAKA,YAAYA,YAAYC,SAAS;CAGvE,MAAMG,eAAeJ,YAAYK,QAAQF,WAAW;AAEpD,KAAIC,iBAAiB,GAEnB,QAAOF,YAAYF,YAAY,KAAKA,YAAYA,YAAYC,SAAS;CAGvE,MAAMK,WAAWF,eAAeR;AAChC,KAAIU,YAAY,KAAKA,WAAWN,YAAYC,OAC1C,QAAOD,YAAYM;AAGrB,KAAIT,MAAMC,KACR,QAAOI,YAAYF,YAAY,KAAKA,YAAYA,YAAYC,SAAS;AAGvE,QAAO;;;AAIT,SAAgBM,kBACdd,WACAe,MACY;CACZ,MAAMR,cAAcR,eAAeC,UAAU;AAC7C,KAAIO,YAAYC,WAAW,EAAG,QAAO;AACrC,QAAOO,SAAS,UACZR,YAAY,KACZA,YAAYA,YAAYC,SAAS;;;;;;;AAQvC,SAAgBQ,kBAAkBhB,WAAgC;AAChE,KAAIA,UAAUb,mBACZa,WAAUb,mBAAmBC,UAAU;;;;;;;;AAwB3C,SAASkC,qBAAqB5B,MAAW2B,kBAAqC;CAC5E,MAAME,UAAoB,EAAE;AAE5B,KAAI7B,KAAKwB,UACPK,SAAQ1B,KAAKH,KAAKwB,UAAU;AAG9B,KAAIG,kBAAkB;EACpB,MAAMG,QAAQ9B,KAAK8B;AACnB,MAAIA,OAAO;AACT,OAAI,OAAOA,MAAMC,aAAa,SAC5BF,SAAQ1B,KAAK2B,MAAMC,SAAS;AAE9B,OAAI,OAAOD,MAAME,gBAAgB,SAC/BH,SAAQ1B,KAAK2B,MAAME,YAAY;;;AAKrC,QAAOH,QAAQf,SAAS,IAAIe,UAAU,CAAC7B,KAAKwB,aAAa,GAAG;;;AAI9D,SAASS,gBACPjC,MACAkC,MACAC,cACAR,kBACS;AACT,QAAOC,qBAAqB5B,MAAM2B,iBAAiB,CAACS,MAAMC,SACxDF,aAAaE,MAAMH,KACrB,CAAC;;;;;;;;AASH,SAAgBI,sBACdxC,OACAoC,MACAC,cACAI,UAAmC,EAAE,EACtB;AACf,KAAI,CAACL,KACH,QAAOpC;CAGT,MAAM6B,mBAAmBY,QAAQZ,oBAAoB;AAErD,QAAO,CAAC,GAAG7B,MAAM,CACd0C,KAAKxC,SAAc;AAClB,MAAIA,KAAKC,SAAS,aAAaD,KAAKI,YAAY;GAC9C,MAAMqC,mBAAmB,CAAC,GAAGzC,KAAKI,WAAW,CAACsC,QAAQC,UACpDV,gBAAgBU,OAAOT,MAAMC,cAAcR,iBAC7C,CAAC;AAED,OAAIc,iBAAiB3B,WAAW,EAC9B,QAAO;AAGT,UAAO;IACL,GAAGd;IACHI,YAAYqC;IACZG,eAAe;IAChB;;AAGH,SAAOX,gBAAgBjC,MAAMkC,MAAMC,cAAcR,iBAAiB,GAC9D3B,OACA;GACJ,CACD0C,OAAOG,QAAQ"}

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

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
-import { useCallback, useEffect, useRef } from "react";
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
+import { c } from "react-compiler-runtime";
+import { useEffect, useRef } from "react";
 
 //#region src/components/fields/ListBoxPopover/useCompositeFocus.ts
 /**
@@ -11,41 +12,68 @@ import { useCallback, useEffect, useRef } from "react";
 * Focus checks are deferred to the next animation frame to tolerate the
 * synchronous focus shuffles React Aria and portals perform on selection.
 */
-function useCompositeFocus({ wrapperRef, popoverRef, onFocus, onBlur, isDisabled }) {
+function useCompositeFocus(t0) {
+	const $ = c(12);
+	const { wrapperRef, popoverRef, onFocus, onBlur, isDisabled } = t0;
 	const wasInsideRef = useRef(false);
 	const rafRef = useRef(null);
-	const checkFocus = useCallback(() => {
-		if (isDisabled) return;
-		const activeElement = document.activeElement;
-		const isInside = (wrapperRef.current?.contains(activeElement) ?? false) || (popoverRef.current?.contains(activeElement) ?? false);
-		if (isInside !== wasInsideRef.current) {
-			wasInsideRef.current = isInside;
-			if (isInside) onFocus?.();
-			else onBlur?.();
-		}
-	}, [
-		wrapperRef,
-		popoverRef,
-		onFocus,
-		onBlur,
-		isDisabled
-	]);
-	const handleFocusOrBlur = useCallback((e) => {
-		if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
-		rafRef.current = requestAnimationFrame(() => {
-			rafRef.current = null;
-			checkFocus();
-		});
-	}, [checkFocus]);
-	useEffect(() => {
-		return () => {
+	let t1;
+	if ($[0] !== isDisabled || $[1] !== onBlur || $[2] !== onFocus || $[3] !== popoverRef || $[4] !== wrapperRef) {
+		t1 = () => {
+			if (isDisabled) return;
+			const activeElement = document.activeElement;
+			const isInside = (wrapperRef.current?.contains(activeElement) ?? false) || (popoverRef.current?.contains(activeElement) ?? false);
+			if (isInside !== wasInsideRef.current) {
+				wasInsideRef.current = isInside;
+				if (isInside) onFocus?.();
+				else onBlur?.();
+			}
+		};
+		$[0] = isDisabled;
+		$[1] = onBlur;
+		$[2] = onFocus;
+		$[3] = popoverRef;
+		$[4] = wrapperRef;
+		$[5] = t1;
+	} else t1 = $[5];
+	const checkFocus = t1;
+	let t2;
+	if ($[6] !== checkFocus) {
+		t2 = (e) => {
+			if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+			rafRef.current = requestAnimationFrame(() => {
+				rafRef.current = null;
+				checkFocus();
+			});
+		};
+		$[6] = checkFocus;
+		$[7] = t2;
+	} else t2 = $[7];
+	const handleFocusOrBlur = t2;
+	let t3;
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = () => () => {
 			if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
 		};
-	}, []);
-	return { compositeFocusProps: {
-		onFocus: handleFocusOrBlur,
-		onBlur: handleFocusOrBlur
-	} };
+		t4 = [];
+		$[8] = t3;
+		$[9] = t4;
+	} else {
+		t3 = $[8];
+		t4 = $[9];
+	}
+	useEffect(t3, t4);
+	let t5;
+	if ($[10] !== handleFocusOrBlur) {
+		t5 = { compositeFocusProps: {
+			onFocus: handleFocusOrBlur,
+			onBlur: handleFocusOrBlur
+		} };
+		$[10] = handleFocusOrBlur;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
 }
 
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"useCompositeFocus.js","names":[],"sources":["../../../../src/components/fields/ListBoxPopover/useCompositeFocus.ts"],"sourcesContent":["import React, { RefObject, useCallback, useEffect, useRef } from 'react';\n\nexport interface UseCompositeFocusProps {\n  wrapperRef: RefObject<HTMLElement>;\n  popoverRef: RefObject<HTMLElement>;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  isDisabled?: boolean;\n}\n\nexport interface UseCompositeFocusReturn {\n  compositeFocusProps: {\n    onFocus: (e: React.FocusEvent) => void;\n    onBlur: (e: React.FocusEvent) => void;\n  };\n}\n\n/**\n * Tracks focus across a wrapper element and its (portaled) popover as a single\n * logical focus scope. Fires `onFocus` when focus enters either and `onBlur`\n * when it leaves both — essential for components whose overlay is portaled, so\n * that clicking an option does not look like a blur of the whole component.\n *\n * Focus checks are deferred to the next animation frame to tolerate the\n * synchronous focus shuffles React Aria and portals perform on selection.\n */\nexport function useCompositeFocus({\n  wrapperRef,\n  popoverRef,\n  onFocus,\n  onBlur,\n  isDisabled,\n}: UseCompositeFocusProps): UseCompositeFocusReturn {\n  const wasInsideRef = useRef(false);\n  const rafRef = useRef<number | null>(null);\n\n  const checkFocus = useCallback(() => {\n    if (isDisabled) return;\n\n    const activeElement = document.activeElement;\n    const isInside =\n      (wrapperRef.current?.contains(activeElement) ?? false) ||\n      (popoverRef.current?.contains(activeElement) ?? false);\n\n    if (isInside !== wasInsideRef.current) {\n      wasInsideRef.current = isInside;\n      if (isInside) {\n        onFocus?.();\n      } else {\n        onBlur?.();\n      }\n    }\n  }, [wrapperRef, popoverRef, onFocus, onBlur, isDisabled]);\n\n  const handleFocusOrBlur = useCallback(\n    (e: React.FocusEvent) => {\n      // Cancel any pending check\n      if (rafRef.current !== null) {\n        cancelAnimationFrame(rafRef.current);\n      }\n\n      // Schedule focus check for next frame\n      rafRef.current = requestAnimationFrame(() => {\n        rafRef.current = null;\n        checkFocus();\n      });\n    },\n    [checkFocus],\n  );\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      if (rafRef.current !== null) {\n        cancelAnimationFrame(rafRef.current);\n      }\n    };\n  }, []);\n\n  return {\n    compositeFocusProps: {\n      onFocus: handleFocusOrBlur,\n      onBlur: handleFocusOrBlur,\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;AA0BA,SAAgB,kBAAkB,EAChC,YACA,YACA,SACA,QACA,cACkD;CAClD,MAAM,eAAe,OAAO,MAAM;CAClC,MAAM,SAAS,OAAsB,KAAK;CAE1C,MAAM,aAAa,kBAAkB;AACnC,MAAI,WAAY;EAEhB,MAAM,gBAAgB,SAAS;EAC/B,MAAM,YACH,WAAW,SAAS,SAAS,cAAc,IAAI,WAC/C,WAAW,SAAS,SAAS,cAAc,IAAI;AAElD,MAAI,aAAa,aAAa,SAAS;AACrC,gBAAa,UAAU;AACvB,OAAI,SACF,YAAW;OAEX,WAAU;;IAGb;EAAC;EAAY;EAAY;EAAS;EAAQ;EAAW,CAAC;CAEzD,MAAM,oBAAoB,aACvB,MAAwB;AAEvB,MAAI,OAAO,YAAY,KACrB,sBAAqB,OAAO,QAAQ;AAItC,SAAO,UAAU,4BAA4B;AAC3C,UAAO,UAAU;AACjB,eAAY;IACZ;IAEJ,CAAC,WAAW,CACb;AAGD,iBAAgB;AACd,eAAa;AACX,OAAI,OAAO,YAAY,KACrB,sBAAqB,OAAO,QAAQ;;IAGvC,EAAE,CAAC;AAEN,QAAO,EACL,qBAAqB;EACnB,SAAS;EACT,QAAQ;EACT,EACF"}
+{"version":3,"file":"useCompositeFocus.js","names":["React","RefObject","useCallback","useEffect","useRef","UseCompositeFocusProps","wrapperRef","HTMLElement","popoverRef","onFocus","onBlur","isDisabled","UseCompositeFocusReturn","compositeFocusProps","e","FocusEvent","useCompositeFocus","t0","$","_c","wasInsideRef","rafRef","t1","activeElement","document","isInside","current","contains","checkFocus","t2","cancelAnimationFrame","requestAnimationFrame","handleFocusOrBlur","t3","t4","Symbol","for","t5"],"sources":["../../../../src/components/fields/ListBoxPopover/useCompositeFocus.ts"],"sourcesContent":["import React, { RefObject, useCallback, useEffect, useRef } from 'react';\n\nexport interface UseCompositeFocusProps {\n  wrapperRef: RefObject<HTMLElement>;\n  popoverRef: RefObject<HTMLElement>;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  isDisabled?: boolean;\n}\n\nexport interface UseCompositeFocusReturn {\n  compositeFocusProps: {\n    onFocus: (e: React.FocusEvent) => void;\n    onBlur: (e: React.FocusEvent) => void;\n  };\n}\n\n/**\n * Tracks focus across a wrapper element and its (portaled) popover as a single\n * logical focus scope. Fires `onFocus` when focus enters either and `onBlur`\n * when it leaves both — essential for components whose overlay is portaled, so\n * that clicking an option does not look like a blur of the whole component.\n *\n * Focus checks are deferred to the next animation frame to tolerate the\n * synchronous focus shuffles React Aria and portals perform on selection.\n */\nexport function useCompositeFocus({\n  wrapperRef,\n  popoverRef,\n  onFocus,\n  onBlur,\n  isDisabled,\n}: UseCompositeFocusProps): UseCompositeFocusReturn {\n  const wasInsideRef = useRef(false);\n  const rafRef = useRef<number | null>(null);\n\n  const checkFocus = useCallback(() => {\n    if (isDisabled) return;\n\n    const activeElement = document.activeElement;\n    const isInside =\n      (wrapperRef.current?.contains(activeElement) ?? false) ||\n      (popoverRef.current?.contains(activeElement) ?? false);\n\n    if (isInside !== wasInsideRef.current) {\n      wasInsideRef.current = isInside;\n      if (isInside) {\n        onFocus?.();\n      } else {\n        onBlur?.();\n      }\n    }\n  }, [wrapperRef, popoverRef, onFocus, onBlur, isDisabled]);\n\n  const handleFocusOrBlur = useCallback(\n    (e: React.FocusEvent) => {\n      // Cancel any pending check\n      if (rafRef.current !== null) {\n        cancelAnimationFrame(rafRef.current);\n      }\n\n      // Schedule focus check for next frame\n      rafRef.current = requestAnimationFrame(() => {\n        rafRef.current = null;\n        checkFocus();\n      });\n    },\n    [checkFocus],\n  );\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      if (rafRef.current !== null) {\n        cancelAnimationFrame(rafRef.current);\n      }\n    };\n  }, []);\n\n  return {\n    compositeFocusProps: {\n      onFocus: handleFocusOrBlur,\n      onBlur: handleFocusOrBlur,\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;AA0BA,SAAOgB,kBAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAA2B,MAAA,EAAAb,YAAAE,YAAAC,SAAAC,QAAAC,eAAAM;CAOhC,MAAAG,eAAqBhB,OAAO,MAAM;CAClC,MAAAiB,SAAejB,OAAsB,KAAK;CAAC,IAAAkB;AAAA,KAAAJ,EAAA,OAAAP,cAAAO,EAAA,OAAAR,UAAAQ,EAAA,OAAAT,WAAAS,EAAA,OAAAV,cAAAU,EAAA,OAAAZ,YAAA;AAEZgB,aAAA;AAC7B,OAAIX,WAAU;GAEd,MAAAY,gBAAsBC,SAAQD;GAC9B,MAAAE,YACGnB,WAAUoB,SAAkBC,SAACJ,cAAuB,IAApD,WACAf,WAAUkB,SAAkBC,SAACJ,cAAuB,IAApD;AAEH,OAAIE,aAAaL,aAAYM,SAAQ;AACnCN,iBAAYM,UAAWD;AACvB,QAAIA,SACFhB,YAAW;QAEXC,WAAU;;;AAGfQ,IAAA,KAAAP;AAAAO,IAAA,KAAAR;AAAAQ,IAAA,KAAAT;AAAAS,IAAA,KAAAV;AAAAU,IAAA,KAAAZ;AAAAY,IAAA,KAAAI;OAAAA,MAAAJ,EAAA;CAhBD,MAAAU,aAAmBN;CAgBuC,IAAAO;AAAA,KAAAX,EAAA,OAAAU,YAAA;AAGxDC,QAAAf,MAAA;AAEE,OAAIO,OAAMK,YAAa,KACrBI,sBAAqBT,OAAMK,QAAS;AAItCL,UAAMK,UAAWK,4BAAsB;AACrCV,WAAMK,UAAW;AACjBE,gBAAY;KAFA;;AAIfV,IAAA,KAAAU;AAAAV,IAAA,KAAAW;OAAAA,MAAAX,EAAA;CAZH,MAAAc,oBAA0BH;CAcxB,IAAAI;CAAA,IAAAC;AAAA,KAAAhB,EAAA,OAAAiB,OAAAC,IAAA,4BAAA,EAAA;AAGQH,mBACD;AACL,OAAIZ,OAAMK,YAAa,KACrBI,sBAAqBT,OAAMK,QAAS;;AAGvCQ,OAAA,EAAE;AAAAhB,IAAA,KAAAe;AAAAf,IAAA,KAAAgB;QAAA;AAAAD,OAAAf,EAAA;AAAAgB,OAAAhB,EAAA;;AANLf,WAAU8B,IAMPC,GAAG;CAAA,IAAAG;AAAA,KAAAnB,EAAA,QAAAc,mBAAA;AAECK,OAAA,EAAAxB,qBACgB;GAAAJ,SACVuB;GAAiBtB,QAClBsB;GACV,EACD;AAAAd,IAAA,MAAAc;AAAAd,IAAA,MAAAmB;OAAAA,MAAAnB,EAAA;AAAA,QALMmB"}

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

@@ -1,9 +1,10 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.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 { StepButton } from "./StepButton.js";
+import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { forwardRef, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -21,40 +22,129 @@ const StepperContainer = tasty({ styles: {
 	margin: "(.5x - 1bw) left"
 } });
 function NumberInput(props, ref) {
-	props = castNullableNumberValue(props);
+	const $ = c(38);
+	let t0;
+	if ($[0] !== props) {
+		t0 = castNullableNumberValue(props);
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	props = t0;
 	props = useFieldProps(props);
-	let { hideStepper, suffix, value, defaultValue, onChange, inputRef, labelProps: userLabelProps, inputProps: userInputProps, ...otherProps } = props;
-	let showStepper = !hideStepper;
-	let { locale } = useLocale();
-	let state = useNumberFieldState({
-		...props,
-		locale
-	});
-	let localInputRef = useRef(null);
+	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];
+	}
+	const showStepper = !hideStepper;
+	const { locale } = useLocale();
+	let t1;
+	if ($[9] !== locale || $[10] !== props) {
+		t1 = {
+			...props,
+			locale
+		};
+		$[9] = locale;
+		$[10] = props;
+		$[11] = t1;
+	} else t1 = $[11];
+	const state = useNumberFieldState(t1);
+	const localInputRef = useRef(null);
 	inputRef = inputRef ?? localInputRef;
-	let { groupProps, labelProps, inputProps, incrementButtonProps, decrementButtonProps } = useNumberField(props, state, inputRef);
-	const mergedLabelProps = mergeProps$1(labelProps, userLabelProps);
-	const steppers = 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;
-	return /* @__PURE__ */ jsx(StyledTextInputBase, {
-		...otherProps,
-		ref,
-		labelProps: mergedLabelProps,
-		inputProps: mergeProps$1(mergeProps(inputProps, { id: props.id }), { "data-input-type": "numberinput" }, userInputProps),
-		inputRef,
-		wrapperProps: groupProps,
-		suffixPosition: "after",
-		suffix: showStepper ? props.suffixPosition === "before" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [suffix, steppers] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [steppers, suffix] }) : suffix
-	});
+	const { groupProps, labelProps, inputProps, incrementButtonProps, decrementButtonProps } = useNumberField(props, state, inputRef);
+	let t2;
+	if ($[12] !== labelProps || $[13] !== userLabelProps) {
+		t2 = mergeProps$1(labelProps, userLabelProps);
+		$[12] = labelProps;
+		$[13] = userLabelProps;
+		$[14] = t2;
+	} else t2 = $[14];
+	const mergedLabelProps = t2;
+	let t3;
+	if ($[15] !== decrementButtonProps || $[16] !== incrementButtonProps || $[17] !== otherProps || $[18] !== props.isDisabled || $[19] !== showStepper) {
+		t3 = 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;
+		$[15] = decrementButtonProps;
+		$[16] = incrementButtonProps;
+		$[17] = otherProps;
+		$[18] = props.isDisabled;
+		$[19] = showStepper;
+		$[20] = t3;
+	} else t3 = $[20];
+	const steppers = t3;
+	const t4 = otherProps;
+	let t5;
+	if ($[21] !== inputProps || $[22] !== props.id || $[23] !== userInputProps) {
+		t5 = mergeProps$1(mergeProps(inputProps, { id: props.id }), { "data-input-type": "numberinput" }, userInputProps);
+		$[21] = inputProps;
+		$[22] = props.id;
+		$[23] = userInputProps;
+		$[24] = t5;
+	} else t5 = $[24];
+	let t6;
+	if ($[25] !== props.suffixPosition || $[26] !== showStepper || $[27] !== steppers || $[28] !== suffix) {
+		t6 = showStepper ? props.suffixPosition === "before" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [suffix, steppers] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [steppers, suffix] }) : suffix;
+		$[25] = props.suffixPosition;
+		$[26] = showStepper;
+		$[27] = steppers;
+		$[28] = suffix;
+		$[29] = t6;
+	} else t6 = $[29];
+	let t7;
+	if ($[30] !== groupProps || $[31] !== inputRef || $[32] !== mergedLabelProps || $[33] !== otherProps || $[34] !== ref || $[35] !== t5 || $[36] !== t6) {
+		t7 = /* @__PURE__ */ jsx(StyledTextInputBase, {
+			...t4,
+			ref,
+			labelProps: mergedLabelProps,
+			inputProps: t5,
+			inputRef,
+			wrapperProps: groupProps,
+			suffixPosition: "after",
+			suffix: t6
+		});
+		$[30] = groupProps;
+		$[31] = inputRef;
+		$[32] = mergedLabelProps;
+		$[33] = otherProps;
+		$[34] = ref;
+		$[35] = t5;
+		$[36] = t6;
+		$[37] = t7;
+	} else t7 = $[37];
+	return t7;
 }
 /**
 * 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":["mergeProps","mergeAriaProps"],"sources":["../../../../src/components/fields/NumberInput/NumberInput.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, RefObject, useRef } from 'react';\nimport {\n  AriaNumberFieldProps,\n  mergeProps as mergeAriaProps,\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 { FieldBaseProps } from '../../../shared/form';\n\nexport interface CubeNumberInputProps\n  extends Omit<\n      CubeTextInputBaseProps,\n      'defaultValue' | 'value' | 'onChange' | 'field'\n    >,\n    Omit<AriaNumberFieldProps, 'validate' | 'form' | 'name'> {\n  field?: FieldBaseProps<number | null | undefined>['field'];\n  /** Whether or to hide stepper */\n  hideStepper?: boolean;\n}\n\nconst StyledTextInputBase = tasty(TextInputBase, {\n  inputStyles: {\n    textAlign: 'right',\n  },\n});\n\nconst StepperContainer = tasty({\n  styles: {\n    display: 'grid',\n    gridColumns: '1sf',\n    gridRows: '1sf 1sf',\n    flow: 'column',\n    placeSelf: 'stretch',\n    margin: '(.5x - 1bw) left',\n  },\n});\n\nfunction NumberInput(\n  props: WithNullableValue<CubeNumberInputProps>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  props = castNullableNumberValue(props);\n  props = useFieldProps(props);\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(props, state, inputRef as RefObject<HTMLInputElement>);\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, { id: props.id }),\n        { 'data-input-type': 'numberinput' },\n        userInputProps,\n      )}\n      inputRef={inputRef}\n      wrapperProps={groupProps}\n      suffixPosition=\"after\"\n      suffix={\n        showStepper ? (\n          props.suffixPosition === 'before' ? (\n            <>\n              {suffix}\n              {steppers}\n            </>\n          ) : (\n            <>\n              {steppers}\n              {suffix}\n            </>\n          )\n        ) : (\n          suffix\n        )\n      }\n    />\n  );\n}\n\n/**\n * NumberFields allow users to enter a number and increment or decrement the value using stepper buttons.\n */\nconst _NumberInput = forwardRef(NumberInput);\n\n(_NumberInput as any).cubeInputType = 'Number';\n\n_NumberInput.displayName = 'NumberInput';\n\nexport { _NumberInput as NumberInput };\nexport type { AriaNumberFieldProps };\n"],"mappings":";;;;;;;;;;;;;AAiCA,MAAM,sBAAsB,MAAM,eAAe,EAC/C,aAAa,EACX,WAAW,SACZ,EACF,CAAC;AAEF,MAAM,mBAAmB,MAAM,EAC7B,QAAQ;CACN,SAAS;CACT,aAAa;CACb,UAAU;CACV,MAAM;CACN,WAAW;CACX,QAAQ;CACT,EACF,CAAC;AAEF,SAAS,YACP,OACA,KACA;AACA,SAAQ,wBAAwB,MAAM;AACtC,SAAQ,cAAc,MAAM;CAE5B,IAAI,EACF,aACA,QACA,OACA,cACA,UACA,UACA,YAAY,gBACZ,YAAY,gBACZ,GAAG,eACD;CACJ,IAAI,cAAc,CAAC;CACnB,IAAI,EAAE,WAAW,WAAW;CAC5B,IAAI,QAAQ,oBAAoB;EAAE,GAAG;EAAO;EAAQ,CAAC;CACrD,IAAI,gBAAgB,OAAyB,KAAK;AAElD,YAAW,YAAY;CAEvB,IAAI,EACF,YACA,YACA,YACA,sBACA,yBACE,eAAe,OAAO,OAAO,SAAwC;CAGzE,MAAM,mBAAmBA,aAAW,YAAY,eAAe;CAE/D,MAAM,WAAW,cACf,qBAAC,+BACC,oBAAC;EACC,YAAY,MAAM;EAClB,WAAU;EACV,GAAI;EACJ,MAAM,WAAW;GACjB,EACF,oBAAC;EACC,YAAY,MAAM;EAClB,WAAU;EACV,GAAI;EACJ,MAAM,WAAW;GACjB,IACe,GACjB;AAEJ,QACE,oBAAC;EACC,GAAI;EACC;EACL,YAAY;EACZ,YAAYA,aAKVC,WAAe,YAAY,EAAE,IAAI,MAAM,IAAI,CAAC,EAC5C,EAAE,mBAAmB,eAAe,EACpC,eACD;EACS;EACV,cAAc;EACd,gBAAe;EACf,QACE,cACE,MAAM,mBAAmB,WACvB,8CACG,QACA,YACA,GAEH,8CACG,UACA,UACA,GAGL;GAGJ;;;;;AAON,MAAM,eAAe,WAAW,YAAY;AAE5C,AAAC,aAAqB,gBAAgB;AAEtC,aAAa,cAAc"}
+{"version":3,"file":"NumberInput.js","names":["tasty","ForwardedRef","forwardRef","RefObject","useRef","AriaNumberFieldProps","mergeProps","mergeAriaProps","useLocale","useNumberField","useNumberFieldState","castNullableNumberValue","WithNullableValue","useFieldProps","CubeTextInputBaseProps","TextInputBase","StepButton","FieldBaseProps","CubeNumberInputProps","Omit","field","hideStepper","StyledTextInputBase","inputStyles","textAlign","StepperContainer","styles","display","gridColumns","gridRows","flow","placeSelf","margin","NumberInput","props","ref","$","_c","t0","inputRef","otherProps","suffix","userInputProps","userLabelProps","t1","t2","value","defaultValue","onChange","t3","labelProps","t4","inputProps","t5","t6","showStepper","locale","state","localInputRef","groupProps","incrementButtonProps","decrementButtonProps","HTMLInputElement","mergedLabelProps","isDisabled","size","undefined","steppers","id","suffixPosition","t7","_NumberInput","cubeInputType","displayName"],"sources":["../../../../src/components/fields/NumberInput/NumberInput.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, RefObject, useRef } from 'react';\nimport {\n  AriaNumberFieldProps,\n  mergeProps as mergeAriaProps,\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 { FieldBaseProps } from '../../../shared/form';\n\nexport interface CubeNumberInputProps\n  extends Omit<\n      CubeTextInputBaseProps,\n      'defaultValue' | 'value' | 'onChange' | 'field'\n    >,\n    Omit<AriaNumberFieldProps, 'validate' | 'form' | 'name'> {\n  field?: FieldBaseProps<number | null | undefined>['field'];\n  /** Whether or to hide stepper */\n  hideStepper?: boolean;\n}\n\nconst StyledTextInputBase = tasty(TextInputBase, {\n  inputStyles: {\n    textAlign: 'right',\n  },\n});\n\nconst StepperContainer = tasty({\n  styles: {\n    display: 'grid',\n    gridColumns: '1sf',\n    gridRows: '1sf 1sf',\n    flow: 'column',\n    placeSelf: 'stretch',\n    margin: '(.5x - 1bw) left',\n  },\n});\n\nfunction NumberInput(\n  props: WithNullableValue<CubeNumberInputProps>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  props = castNullableNumberValue(props);\n  props = useFieldProps(props);\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(props, state, inputRef as RefObject<HTMLInputElement>);\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, { id: props.id }),\n        { 'data-input-type': 'numberinput' },\n        userInputProps,\n      )}\n      inputRef={inputRef}\n      wrapperProps={groupProps}\n      suffixPosition=\"after\"\n      suffix={\n        showStepper ? (\n          props.suffixPosition === 'before' ? (\n            <>\n              {suffix}\n              {steppers}\n            </>\n          ) : (\n            <>\n              {steppers}\n              {suffix}\n            </>\n          )\n        ) : (\n          suffix\n        )\n      }\n    />\n  );\n}\n\n/**\n * NumberFields allow users to enter a number and increment or decrement the value using stepper buttons.\n */\nconst _NumberInput = forwardRef(NumberInput);\n\n(_NumberInput as any).cubeInputType = 'Number';\n\n_NumberInput.displayName = 'NumberInput';\n\nexport { _NumberInput as NumberInput };\nexport type { AriaNumberFieldProps };\n"],"mappings":"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"}

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

@@ -1,7 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { useI18n } from "../../../i18n/useI18n.js";
 import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { Button } from "../../actions/index.js";
+import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { jsx } from "react/jsx-runtime";
 
@@ -29,22 +30,59 @@ const StepButtonElement = tasty(Button, {
 * Buttons for NumberField.
 */
 function StepButton(props) {
+	const $ = c(14);
 	const { t } = useI18n();
-	const label = props.direction === "up" ? t("numberInput.stepUp", "Step up") : t("numberInput.stepDown", "Step down");
-	return /* @__PURE__ */ jsx(StepButtonElement, {
-		preventDefault: true,
-		type: "clear",
-		mods: {
-			up: props.direction === "up",
-			down: props.direction === "down"
-		},
-		label,
-		...props,
-		children: /* @__PURE__ */ jsx(DirectionIcon, {
+	let t0;
+	if ($[0] !== props.direction || $[1] !== t) {
+		t0 = props.direction === "up" ? t("numberInput.stepUp", "Step up") : t("numberInput.stepDown", "Step down");
+		$[0] = props.direction;
+		$[1] = t;
+		$[2] = t0;
+	} else t0 = $[2];
+	const label = t0;
+	const t1 = props.direction === "up";
+	const t2 = props.direction === "down";
+	let t3;
+	if ($[3] !== t1 || $[4] !== t2) {
+		t3 = {
+			up: t1,
+			down: t2
+		};
+		$[3] = t1;
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = { fontSize: "$local-size" };
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== props.direction) {
+		t5 = /* @__PURE__ */ jsx(DirectionIcon, {
 			to: props.direction,
-			styles: { fontSize: "$local-size" }
-		})
-	});
+			styles: t4
+		});
+		$[7] = props.direction;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== label || $[10] !== props || $[11] !== t3 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsx(StepButtonElement, {
+			preventDefault: true,
+			type: "clear",
+			mods: t3,
+			label,
+			...props,
+			children: t5
+		});
+		$[9] = label;
+		$[10] = props;
+		$[11] = t3;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	return t6;
 }
 
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"StepButton.js","names":[],"sources":["../../../../src/components/fields/NumberInput/StepButton.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\n\nimport { useI18n } from '../../../i18n';\nimport { CaretDownIcon } from '../../../icons/CaretDownIcon';\nimport { CaretUpIcon } from '../../../icons/CaretUpIcon';\nimport { DirectionIcon } from '../../../icons/DirectionIcon';\nimport { Button } from '../../actions';\n\nconst StepButtonElement = tasty(Button, {\n  preventDefault: true,\n  type: 'clear',\n  styles: {\n    width: '($local-size * 1.25)',\n    height: 'auto',\n    radius: {\n      '': '0 (1r - 1bw) 0 0',\n      down: '0 0 (1r - 1bw) 0',\n    },\n    padding: 0,\n\n    $size: 'inherit',\n    '$local-size': '(($size - 2bw) / 2)',\n\n    Icon: {\n      width: 'auto',\n      height: 'auto',\n    },\n  },\n});\n\n/**\n * Buttons for NumberField.\n */\nexport function StepButton(props) {\n  const { t } = useI18n();\n\n  const label =\n    props.direction === 'up'\n      ? t('numberInput.stepUp', 'Step up')\n      : t('numberInput.stepDown', 'Step down');\n\n  return (\n    <StepButtonElement\n      preventDefault\n      type=\"clear\"\n      mods={{\n        up: props.direction === 'up',\n        down: props.direction === 'down',\n      }}\n      label={label}\n      {...props}\n    >\n      <DirectionIcon\n        to={props.direction}\n        styles={{ fontSize: '$local-size' }}\n      />\n    </StepButtonElement>\n  );\n}\n"],"mappings":";;;;;;;;AAQA,MAAM,oBAAoB,MAAM,QAAQ;CACtC,gBAAgB;CAChB,MAAM;CACN,QAAQ;EACN,OAAO;EACP,QAAQ;EACR,QAAQ;GACN,IAAI;GACJ,MAAM;GACP;EACD,SAAS;EAET,OAAO;EACP,eAAe;EAEf,MAAM;GACJ,OAAO;GACP,QAAQ;GACT;EACF;CACF,CAAC;;;;AAKF,SAAgB,WAAW,OAAO;CAChC,MAAM,EAAE,MAAM,SAAS;CAEvB,MAAM,QACJ,MAAM,cAAc,OAChB,EAAE,sBAAsB,UAAU,GAClC,EAAE,wBAAwB,YAAY;AAE5C,QACE,oBAAC;EACC;EACA,MAAK;EACL,MAAM;GACJ,IAAI,MAAM,cAAc;GACxB,MAAM,MAAM,cAAc;GAC3B;EACM;EACP,GAAI;YAEJ,oBAAC;GACC,IAAI,MAAM;GACV,QAAQ,EAAE,UAAU,eAAe;IACnC;GACgB"}
+{"version":3,"file":"StepButton.js","names":["Styles","tasty","useI18n","CaretDownIcon","CaretUpIcon","DirectionIcon","Button","StepButtonElement","preventDefault","type","styles","width","height","radius","down","padding","$size","Icon","StepButton","props","$","_c","t","t0","direction","label","t1","t2","t3","up","t4","Symbol","for","fontSize","t5","t6"],"sources":["../../../../src/components/fields/NumberInput/StepButton.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\n\nimport { useI18n } from '../../../i18n';\nimport { CaretDownIcon } from '../../../icons/CaretDownIcon';\nimport { CaretUpIcon } from '../../../icons/CaretUpIcon';\nimport { DirectionIcon } from '../../../icons/DirectionIcon';\nimport { Button } from '../../actions';\n\nconst StepButtonElement = tasty(Button, {\n  preventDefault: true,\n  type: 'clear',\n  styles: {\n    width: '($local-size * 1.25)',\n    height: 'auto',\n    radius: {\n      '': '0 (1r - 1bw) 0 0',\n      down: '0 0 (1r - 1bw) 0',\n    },\n    padding: 0,\n\n    $size: 'inherit',\n    '$local-size': '(($size - 2bw) / 2)',\n\n    Icon: {\n      width: 'auto',\n      height: 'auto',\n    },\n  },\n});\n\n/**\n * Buttons for NumberField.\n */\nexport function StepButton(props) {\n  const { t } = useI18n();\n\n  const label =\n    props.direction === 'up'\n      ? t('numberInput.stepUp', 'Step up')\n      : t('numberInput.stepDown', 'Step down');\n\n  return (\n    <StepButtonElement\n      preventDefault\n      type=\"clear\"\n      mods={{\n        up: props.direction === 'up',\n        down: props.direction === 'down',\n      }}\n      label={label}\n      {...props}\n    >\n      <DirectionIcon\n        to={props.direction}\n        styles={{ fontSize: '$local-size' }}\n      />\n    </StepButtonElement>\n  );\n}\n"],"mappings":";;;;;;;;;AAQA,MAAMO,oBAAoBN,MAAMK,QAAQ;CACtCE,gBAAgB;CAChBC,MAAM;CACNC,QAAQ;EACNC,OAAO;EACPC,QAAQ;EACRC,QAAQ;GACN,IAAI;GACJC,MAAM;GACP;EACDC,SAAS;EAETC,OAAO;EACP,eAAe;EAEfC,MAAM;GACJN,OAAO;GACPC,QAAQ;GACV;EACF;CACD,CAAC;;;;AAKF,SAAOM,WAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CACL,MAAA,EAAAC,MAAcpB,SAAS;CAAC,IAAAqB;AAAA,KAAAH,EAAA,OAAAD,MAAAK,aAAAJ,EAAA,OAAAE,GAAA;AAGtBC,OAAAJ,MAAKK,cAAe,OAChBF,EAAE,sBAAsB,UACc,GAAtCA,EAAE,wBAAwB,YAAY;AAAAF,IAAA,KAAAD,MAAAK;AAAAJ,IAAA,KAAAE;AAAAF,IAAA,KAAAG;OAAAA,MAAAH,EAAA;CAH5C,MAAAK,QACEF;CASQ,MAAAG,KAAAP,MAAKK,cAAe;CAClB,MAAAG,KAAAR,MAAKK,cAAe;CAAM,IAAAI;AAAA,KAAAR,EAAA,OAAAM,MAAAN,EAAA,OAAAO,IAAA;AAF5BC,OAAA;GAAAC,IACAH;GAAwBZ,MACtBa;GACP;AAAAP,IAAA,KAAAM;AAAAN,IAAA,KAAAO;AAAAP,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;CAAA,IAAAU;AAAA,KAAAV,EAAA,OAAAW,OAAAC,IAAA,4BAAA,EAAA;AAMSF,OAAA,EAAAG,UAAY,eAAe;AAAAb,IAAA,KAAAU;OAAAA,MAAAV,EAAA;CAAA,IAAAc;AAAA,KAAAd,EAAA,OAAAD,MAAAK,WAAA;AAFrCU,OAAA,oBAAC;GACK,IAAAf,MAAKK;GACD,QAAAM;IACR;AAAAV,IAAA,KAAAD,MAAAK;AAAAJ,IAAA,KAAAc;OAAAA,MAAAd,EAAA;CAAA,IAAAe;AAAA,KAAAf,EAAA,OAAAK,SAAAL,EAAA,QAAAD,SAAAC,EAAA,QAAAQ,MAAAR,EAAA,QAAAc,IAAA;AAbJC,OAAA,oBAAC;GACC,gBAAA;GACK,MAAA;GACC,MAAAP;GAICH;GAAK,GACRN;aAEJe;IAIkB;AAAAd,IAAA,KAAAK;AAAAL,IAAA,MAAAD;AAAAC,IAAA,MAAAQ;AAAAR,IAAA,MAAAc;AAAAd,IAAA,MAAAe;OAAAA,MAAAf,EAAA;AAAA,QAdpBe"}