@acronis-platform/ui-react 4.1.0 → 5.1.0

package/dist/components/ui/input-select/input-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-select.js","names":[],"sources":["../../../../src/components/ui/input-select/input-select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Select as SelectPrimitive } from '@base-ui/react/select';\nimport {\n  CheckIcon,\n  ChevronDownIcon,\n  ChevronRightIcon,\n  CircleWarningIcon,\n  InboxIcon,\n  MagnifierIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// The next-gen select, themed by the dedicated `--ui-input-select-*` tier (global /\n// normal / error / dropdown). It composes Base UI `Select` and adds the field\n// furniture (label, required, description, error) and the dropdown machinery\n// (in-dropdown search, sections/groups, single + multiple items, loading/empty/error\n// status). The trigger box wires each state to its own token — idle / hover / open\n// (`data-popup-open`) + focus ring / disabled — and switches to the error border +\n// `--ui-focus-error` ring when `aria-invalid` is set. Selection mode (single vs\n// multiple) flows from the `multiple` prop on the root via `InputSelectModeContext`:\n// single items toggle the row background and show a trailing check; multiple items\n// keep the row background and show a leading checkbox.\n\nconst InputSelectModeContext = React.createContext(false);\n\ninterface InputSelectFilterContextValue {\n  /** Current in-dropdown search query. */\n  query: string;\n  /** Update the search query. */\n  setQuery: (query: string) => void;\n}\n\nconst InputSelectFilterContext =\n  React.createContext<InputSelectFilterContextValue | null>(null);\n\n/**\n * Read the live in-dropdown search query (and its setter) from the nearest\n * `InputSelect`. Flat item lists filter themselves; use this for hierarchical\n * (tree) dropdowns that need to compute their own visibility.\n */\nfunction useInputSelectFilter(): InputSelectFilterContextValue {\n  const context = React.useContext(InputSelectFilterContext);\n  if (!context) {\n    throw new Error('useInputSelectFilter must be used within <InputSelect>.');\n  }\n  return context;\n}\n\nfunction InputSelect<Value, Multiple extends boolean | undefined = false>(\n  props: SelectPrimitive.Root.Props<Value, Multiple>\n) {\n  const { onOpenChange } = props;\n  const [query, setQuery] = React.useState('');\n  const filter = React.useMemo(() => ({ query, setQuery }), [query]);\n\n  // Reset the query when the popup closes so it reopens unfiltered.\n  const handleOpenChange = React.useCallback<\n    NonNullable<SelectPrimitive.Root.Props<Value, Multiple>['onOpenChange']>\n  >(\n    (open, eventDetails) => {\n      onOpenChange?.(open, eventDetails);\n      if (!open) {\n        setQuery('');\n      }\n    },\n    [onOpenChange]\n  );\n\n  return (\n    <InputSelectModeContext.Provider value={Boolean(props.multiple)}>\n      <InputSelectFilterContext.Provider value={filter}>\n        <SelectPrimitive.Root {...props} onOpenChange={handleOpenChange} />\n      </InputSelectFilterContext.Provider>\n    </InputSelectModeContext.Provider>\n  );\n}\nInputSelect.displayName = 'InputSelect';\n\nconst InputSelectGroup = SelectPrimitive.Group;\n\n/** Vertical field stack: label, trigger, description/error. */\nconst InputSelectField = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex min-w-[var(--ui-input-select-global-container-width-min)] flex-col gap-[var(--ui-input-select-global-container-gap)]',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectField.displayName = 'InputSelectField';\n\nconst InputSelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> & {\n    /** Appends a required `*` after the label text. */\n    required?: boolean;\n  }\n>(({ className, children, required, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\n      'flex gap-[var(--ui-input-select-global-container-label-gap)] text-sm leading-4 text-[var(--ui-input-select-global-label-color-idle)] data-[disabled]:text-[var(--ui-input-select-global-label-color-disabled)]',\n      className\n    )}\n    {...props}\n  >\n    {children}\n    {required && (\n      <span\n        aria-hidden=\"true\"\n        className=\"text-[var(--ui-input-select-global-required-color)]\"\n      >\n        *\n      </span>\n    )}\n  </SelectPrimitive.Label>\n));\nInputSelectLabel.displayName = 'InputSelectLabel';\n\nconst InputSelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      'group flex h-[var(--ui-input-select-global-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-select-global-box-gap)] rounded-[var(--ui-input-select-global-box-border-radius)] border bg-[var(--ui-input-select-global-box-color-idle)] border-[var(--ui-input-select-normal-box-border-color-idle)] px-[var(--ui-input-select-global-box-padding-x)] text-sm leading-6 text-[var(--ui-input-select-global-value-color-idle)] outline-none transition-colors',\n      'not-data-[disabled]:hover:bg-[var(--ui-input-select-global-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-input-select-normal-box-border-color-hover)]',\n      'focus-visible:border-[var(--ui-input-select-normal-box-border-color-hover)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n      'data-[popup-open]:border-[var(--ui-input-select-normal-box-border-color-hover)] data-[popup-open]:ring-[3px] data-[popup-open]:ring-[var(--ui-focus-primary)]',\n      'data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--ui-input-select-normal-box-border-color-disabled)] data-[disabled]:bg-[var(--ui-input-select-global-box-color-disabled)] data-[disabled]:text-[var(--ui-input-select-global-value-color-disabled)]',\n      // Error treatment (driven by `aria-invalid`).\n      'aria-invalid:border-[var(--ui-input-select-error-box-border-color-idle)] not-data-[disabled]:aria-invalid:hover:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:focus-visible:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:focus-visible:ring-[var(--ui-focus-error)] aria-invalid:data-[popup-open]:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:data-[popup-open]:ring-[var(--ui-focus-error)]',\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon className=\"flex size-[var(--ui-input-select-global-icon-box-size)] shrink-0 items-center justify-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] group-data-[disabled]:text-[var(--ui-input-select-normal-icon-expand-color-disabled)]\">\n      <ChevronDownIcon\n        size={16}\n        className=\"transition-transform group-data-[popup-open]:rotate-180\"\n      />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n));\nInputSelectTrigger.displayName = 'InputSelectTrigger';\n\nconst InputSelectValue = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Value>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Value\n    ref={ref}\n    className={cn(\n      'min-w-0 flex-1 truncate text-start text-[var(--ui-input-select-global-value-color-idle)] data-[placeholder]:text-[var(--ui-input-select-global-placeholder-color-idle)]',\n      'group-data-[disabled]:!text-[var(--ui-input-select-global-value-color-disabled)] group-data-[disabled]:data-[placeholder]:!text-[var(--ui-input-select-global-placeholder-color-disabled)]',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectValue.displayName = 'InputSelectValue';\n\nconst InputSelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Popup>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Popup> & {\n    sideOffset?: number;\n    align?: SelectPrimitive.Positioner.Props['align'];\n    side?: SelectPrimitive.Positioner.Props['side'];\n    /**\n     * Container to portal the dropdown into. Defaults to the document body;\n     * pass an element to scope the portal (e.g. a shadow root, so the popup\n     * inherits styles defined there).\n     */\n    portalContainer?: SelectPrimitive.Portal.Props['container'];\n  }\n>(\n  (\n    {\n      className,\n      children,\n      sideOffset = 4,\n      align = 'start',\n      side = 'bottom',\n      portalContainer,\n      ...props\n    },\n    ref\n  ) => {\n    const ctxContainer = usePortalContainer();\n    const resolvedContainer = portalContainer ?? ctxContainer;\n\n    return (\n    <SelectPrimitive.Portal container={resolvedContainer}>\n      <SelectPrimitive.Positioner\n        sideOffset={sideOffset}\n        align={align}\n        side={side}\n        alignItemWithTrigger={false}\n        className=\"z-50 outline-none\"\n      >\n        <SelectPrimitive.Popup\n          ref={ref}\n          className={cn(\n            'max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-y-auto rounded-[var(--ui-input-select-dropdown-container-border-radius)] border border-[var(--ui-input-select-dropdown-container-border-color)] bg-[var(--ui-input-select-dropdown-container-color)] py-[var(--ui-input-select-dropdown-container-padding-y)] text-sm shadow-md outline-none',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n    );\n  }\n);\nInputSelectContent.displayName = 'InputSelectContent';\n\n/**\n * In-dropdown search row (magnifier + input). By default it drives the\n * `InputSelect` filter context — flat `InputSelectItem`s filter themselves, and\n * tree dropdowns read the query via `useInputSelectFilter`. Pass `value`/`onChange`\n * to control the query externally.\n */\nconst InputSelectSearch = React.forwardRef<\n  HTMLInputElement,\n  React.ComponentPropsWithoutRef<'input'>\n>(({ className, value, onChange, onKeyDown, ...props }, ref) => {\n  const filter = React.useContext(InputSelectFilterContext);\n  const setQuery = filter?.setQuery;\n  const controlled = value !== undefined;\n\n  // When the query is controlled externally, the consumer's `value` is the\n  // source of truth for what's displayed, so keep the internal filter context\n  // (what flat items match against) synced to it. A prop-driven value change —\n  // a \"clear\" button resetting to '', a debounced/transformed value — doesn't\n  // fire `onChange`, so driving the filter off raw DOM events alone would leave\n  // `filter.query` stale and hide every item against a query the box no longer\n  // shows. `setQuery` is a stable state setter, so this runs only when `value`\n  // changes.\n  React.useEffect(() => {\n    if (controlled) {\n      setQuery?.(String(value ?? ''));\n    }\n  }, [controlled, value, setQuery]);\n\n  return (\n    <div className=\"flex items-center gap-[var(--ui-input-select-dropdown-dropdown-search-gap)] px-[var(--ui-input-select-dropdown-dropdown-search-padding-x)] py-[var(--ui-input-select-dropdown-dropdown-search-padding-y)]\">\n      <MagnifierIcon\n        size={16}\n        className=\"shrink-0 text-[var(--ui-glyph-on-surface-primary)]\"\n      />\n      <input\n        ref={ref}\n        type=\"search\"\n        value={value ?? filter?.query ?? ''}\n        onChange={(event) => {\n          onChange?.(event);\n          // Uncontrolled: the input's value *is* the filter query, so write it\n          // straight through. Controlled: the effect above syncs the filter to\n          // the consumer's `value` once it re-renders, avoiding a flash of raw\n          // typed text when the consumer debounces or transforms the value.\n          if (!controlled) {\n            filter?.setQuery(event.currentTarget.value);\n          }\n        }}\n        // Base UI Select's typeahead would consume printable keys before they\n        // reach this input, so stop those from bubbling — but let navigation and\n        // selection keys (Arrow*/Home/End/Enter/Escape, all multi-char `key`\n        // names) through so the user can move from the search box into the\n        // filtered list and pick a result with the keyboard.\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          if (event.key.length === 1) {\n            event.stopPropagation();\n          }\n        }}\n        className={cn(\n          'min-w-0 flex-1 border-0 bg-transparent p-0 text-sm leading-6 text-[var(--ui-input-select-dropdown-dropdown-search-label-color-value)] outline-none placeholder:text-[var(--ui-input-select-dropdown-dropdown-search-label-color-placeholder)] [&::-webkit-search-cancel-button]:appearance-none',\n          className\n        )}\n        {...props}\n      />\n    </div>\n  );\n});\nInputSelectSearch.displayName = 'InputSelectSearch';\n\n/** A section (group) of items with an optional header. Divided by a top border. */\nconst InputSelectSection = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Group\n    ref={ref}\n    className={cn(\n      'flex flex-col border-t border-[var(--ui-input-select-dropdown-section-container-border-color)] py-[var(--ui-input-select-dropdown-section-container-padding-y)] first:border-t-0',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectSection.displayName = 'InputSelectSection';\n\nconst InputSelectSectionLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.GroupLabel>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.GroupLabel>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.GroupLabel\n    ref={ref}\n    className={cn(\n      'px-[var(--ui-input-select-dropdown-section-container-header-padding-x)] py-[var(--ui-input-select-dropdown-section-container-header-padding-y)] text-sm font-semibold leading-6 text-[var(--ui-input-select-dropdown-section-label-group-color)]',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectSectionLabel.displayName = 'InputSelectSectionLabel';\n\n/**\n * Width (px) of the leading nesting spacer for a 1-based tree `indent` level, per\n * the Figma \"InputSelectDropdownTenants\" spec: level 1 reserves 16 px (enough for a\n * single chevron) and each deeper level adds 24 px — 16 / 40 / 64 for levels 1–3.\n * The tenant icon therefore starts at the same x-position whether or not the row is\n * expandable, because the chevron lives right-aligned inside this reserved space.\n */\nconst NESTING_BASE = 16;\nconst NESTING_STEP = 24;\nfunction nestingWidth(indent: number): number {\n  return NESTING_BASE + (indent - 1) * NESTING_STEP;\n}\n\nexport interface InputSelectItemProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {\n  /** Optional leading icon rendered before the label text. Colored by `--ui-input-select-dropdown-item-global-icon-tenant`. */\n  icon?: React.ReactNode;\n  /** 1-based nesting level (0 / omitted = no indent). Levels 1–3 reserve 16 / 40 / 64 px. */\n  indent?: number;\n  /**\n   * Text used to match the in-dropdown search query. Defaults to the string\n   * `children`. When a query is active and this text doesn't match, the row hides\n   * itself — unless `hidden` is passed explicitly (tree dropdowns compute their own\n   * visibility). Rows stay mounted while hidden to keep Base UI's selection index\n   * stable.\n   */\n  textValue?: string;\n}\n\nconst InputSelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  InputSelectItemProps\n>(({ className, children, icon, indent, textValue, hidden, ...props }, ref) => {\n  const multiple = React.useContext(InputSelectModeContext);\n  const filter = React.useContext(InputSelectFilterContext);\n  const query = filter?.query.trim().toLowerCase() ?? '';\n  const label = textValue ?? (typeof children === 'string' ? children : undefined);\n  const autoHidden =\n    query.length > 0 && label !== undefined && !label.toLowerCase().includes(query);\n  return (\n    <SelectPrimitive.Item\n      ref={ref}\n      hidden={hidden ?? autoHidden}\n      className={cn(\n        'group/item relative flex cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none',\n        'bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]',\n        // Single-select rows tint when selected; multiple-select rows keep the\n        // unselected background (the leading checkbox carries the state).\n        !multiple &&\n          'data-[selected]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-idle)] data-[selected]:data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-hover)]',\n        'data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-disabled)]',\n        className\n      )}\n      {...props}\n    >\n      {multiple && (\n        <span\n          aria-hidden=\"true\"\n          className=\"flex size-[var(--ui-checkbox-global-box-size)] shrink-0 items-center justify-center rounded-[var(--ui-checkbox-global-box-border-radius)] border-[length:var(--ui-checkbox-global-box-border-width)] border-[var(--ui-checkbox-unchecked-box-border-color-idle)] bg-[var(--ui-checkbox-unchecked-box-color-idle)] text-transparent group-data-[selected]/item:border-[var(--ui-checkbox-checked-box-border-color-idle)] group-data-[selected]/item:bg-[var(--ui-checkbox-checked-box-color-idle)] group-data-[selected]/item:text-[var(--ui-checkbox-checked-icon-color-idle)]\"\n        >\n          <CheckIcon size={16} />\n        </span>\n      )}\n      {typeof indent === 'number' && indent > 0 && (\n        <span\n          aria-hidden=\"true\"\n          className=\"size-4 shrink-0\"\n          style={{ minWidth: nestingWidth(indent) }}\n        />\n      )}\n      {icon && (\n        <span className=\"flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-tenant)]\">\n          {icon}\n        </span>\n      )}\n      <SelectPrimitive.ItemText className=\"min-w-0 flex-1 truncate\">\n        {children}\n      </SelectPrimitive.ItemText>\n      {!multiple && (\n        <SelectPrimitive.ItemIndicator className=\"flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-checked)]\">\n          <CheckIcon size={16} />\n        </SelectPrimitive.ItemIndicator>\n      )}\n    </SelectPrimitive.Item>\n  );\n});\nInputSelectItem.displayName = 'InputSelectItem';\n\nexport interface InputSelectExpanderProps\n  extends React.ComponentPropsWithoutRef<'button'> {\n  /** Whether the group is currently expanded. */\n  expanded: boolean;\n  /** Called when the user clicks the row to toggle expand/collapse. */\n  onToggle: () => void;\n  /** Optional leading icon rendered after the chevron. */\n  icon?: React.ReactNode;\n  /** 1-based nesting level (0 / omitted = level 1). Levels 1–3 reserve 16 / 40 / 64 px; the chevron sits right-aligned inside. */\n  indent?: number;\n}\n\n/**\n * A non-selectable row that acts as an expand/collapse toggle for a tree group.\n * Visually identical to `InputSelectItem` but is **not** a `SelectPrimitive.Item`,\n * so clicking it won't set the select value.\n *\n * When collapsing a group, keep its child `InputSelectItem`s mounted and toggle\n * their `hidden` prop rather than unmounting them: Base UI's Select tracks the\n * selection by list index, so removing the selected row from the DOM makes a\n * sibling inherit its index and render a phantom check. `hidden` rows keep the\n * indices stable and are skipped by keyboard navigation.\n */\nconst InputSelectExpander = React.forwardRef<\n  HTMLButtonElement,\n  InputSelectExpanderProps\n>(({ className, children, expanded, onToggle, icon, indent, ...props }, ref) => (\n  <button\n    ref={ref}\n    type=\"button\"\n    onClick={onToggle}\n    aria-expanded={expanded}\n    className={cn(\n      'group/item relative flex w-full cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] text-start leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none',\n      'bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] hover:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]',\n      className\n    )}\n    {...props}\n  >\n    <span\n      aria-hidden=\"true\"\n      className=\"flex shrink-0 items-center justify-end text-[var(--ui-input-select-dropdown-item-global-icon-collapse)]\"\n      style={{\n        minWidth:\n          typeof indent === 'number' && indent > 0 ? nestingWidth(indent) : NESTING_BASE,\n      }}\n    >\n      {expanded ? <ChevronDownIcon size={16} /> : <ChevronRightIcon size={16} />}\n    </span>\n    {icon && (\n      <span className=\"flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-tenant)]\">\n        {icon}\n      </span>\n    )}\n    <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n  </button>\n));\nInputSelectExpander.displayName = 'InputSelectExpander';\n\nconst InputSelectDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.ComponentPropsWithoutRef<'p'>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\n      'text-xs leading-4 text-[var(--ui-input-select-normal-description-color-idle)]',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectDescription.displayName = 'InputSelectDescription';\n\nconst InputSelectError = React.forwardRef<\n  HTMLParagraphElement,\n  React.ComponentPropsWithoutRef<'p'>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\n      'text-xs leading-4 text-[var(--ui-input-select-error-error-msg-color)]',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectError.displayName = 'InputSelectError';\n\nexport interface InputSelectStatusProps\n  extends React.ComponentPropsWithoutRef<'div'> {\n  /** Which status to show. Drives the leading icon. */\n  variant: 'loading' | 'empty' | 'error';\n  /** Optional trailing action (e.g. a \"Try again\" button) — shown for `error`. */\n  action?: React.ReactNode;\n}\n\n/** Loading / empty / error status row shown instead of items inside the dropdown. */\nconst InputSelectStatus = React.forwardRef<HTMLDivElement, InputSelectStatusProps>(\n  ({ className, variant, children, action, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex min-h-[var(--ui-input-select-dropdown-container-status-width-min)] flex-col items-center justify-center gap-[var(--ui-input-select-dropdown-container-status-gap)] border-t border-[var(--ui-input-select-dropdown-section-container-border-color)] px-[var(--ui-input-select-dropdown-container-status-padding-x)] py-[var(--ui-input-select-dropdown-container-status-padding-y)] text-center text-sm leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)]',\n        className\n      )}\n      {...props}\n    >\n      {variant === 'loading' && (\n        <span\n          aria-hidden=\"true\"\n          className=\"size-6 animate-spin rounded-full border-2 border-[var(--ui-glyph-on-surface-primary)] border-t-transparent\"\n        />\n      )}\n      {variant === 'empty' && <InboxIcon size={24} className=\"text-[var(--ui-glyph-on-status-info)]\" />}\n      {variant === 'error' && <CircleWarningIcon size={24} className=\"text-[var(--ui-glyph-on-status-warning)]\" />}\n      {children}\n      {variant === 'error' && action}\n    </div>\n  )\n);\nInputSelectStatus.displayName = 'InputSelectStatus';\n\nexport {\n  InputSelect,\n  InputSelectField,\n  InputSelectLabel,\n  InputSelectTrigger,\n  InputSelectValue,\n  InputSelectContent,\n  InputSelectSearch,\n  InputSelectGroup,\n  InputSelectSection,\n  InputSelectSectionLabel,\n  InputSelectItem,\n  InputSelectExpander,\n  InputSelectDescription,\n  InputSelectError,\n  InputSelectStatus,\n  useInputSelectFilter,\n};\n"],"mappings":"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"}
+{"version":3,"file":"input-select.js","names":[],"sources":["../../../../src/components/ui/input-select/input-select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Select as SelectPrimitive } from '@base-ui/react/select';\nimport {\n  CheckIcon,\n  ChevronDownIcon,\n  ChevronRightIcon,\n  CircleWarningIcon,\n  InboxIcon,\n  MagnifierIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// The next-gen select, themed by the dedicated `--ui-input-select-*` tier (global /\n// normal / error / dropdown). It composes Base UI `Select` and adds the field\n// furniture (label, required, description, error) and the dropdown machinery\n// (in-dropdown search, sections/groups, single + multiple items, loading/empty/error\n// status). The trigger box wires each state to its own token — idle / hover / open\n// (`data-popup-open`) + focus ring / disabled — and switches to the error border +\n// `--ui-focus-error` ring when `aria-invalid` is set. Selection mode (single vs\n// multiple) flows from the `multiple` prop on the root via `InputSelectModeContext`:\n// single items toggle the row background and show a trailing check; multiple items\n// keep the row background and show a leading checkbox.\n\nconst InputSelectModeContext = React.createContext(false);\n\ninterface InputSelectFilterContextValue {\n  /** Current in-dropdown search query. */\n  query: string;\n  /** Update the search query. */\n  setQuery: (query: string) => void;\n}\n\nconst InputSelectFilterContext =\n  React.createContext<InputSelectFilterContextValue | null>(null);\n\n/**\n * Read the live in-dropdown search query (and its setter) from the nearest\n * `InputSelect`. Flat item lists filter themselves; use this for hierarchical\n * (tree) dropdowns that need to compute their own visibility.\n */\nfunction useInputSelectFilter(): InputSelectFilterContextValue {\n  const context = React.useContext(InputSelectFilterContext);\n  if (!context) {\n    throw new Error('useInputSelectFilter must be used within <InputSelect>.');\n  }\n  return context;\n}\n\nfunction InputSelect<Value, Multiple extends boolean | undefined = false>(\n  props: SelectPrimitive.Root.Props<Value, Multiple>\n) {\n  const { onOpenChange } = props;\n  const [query, setQuery] = React.useState('');\n  const filter = React.useMemo(() => ({ query, setQuery }), [query]);\n\n  // Reset the query when the popup closes so it reopens unfiltered, via two paths.\n  // 1. `onOpenChange` — the only path in uncontrolled mode, where Base UI owns the\n  //    open state and reports every real transition. A consumer that calls\n  //    `eventDetails.cancel()` keeps the popup open (Base UI skips its own state\n  //    update too), so the query must survive that.\n  // 2. The `open` prop transitioning true -> false — needed in controlled mode,\n  //    where a consumer can flip its own state directly (e.g. an external toggle\n  //    button whose click handler runs after it cancelled Base UI's outside-press\n  //    close) without `onOpenChange` ever firing for that transition. A cancelled\n  //    close leaves `open` at `true`, so this path preserves the query too.\n  const handleOpenChange = React.useCallback<\n    NonNullable<SelectPrimitive.Root.Props<Value, Multiple>['onOpenChange']>\n  >(\n    (open, eventDetails) => {\n      onOpenChange?.(open, eventDetails);\n      if (!open && !eventDetails.isCanceled) {\n        setQuery('');\n      }\n    },\n    [onOpenChange]\n  );\n\n  const controlledOpen = props.open;\n  const previousOpenRef = React.useRef(controlledOpen);\n  React.useEffect(() => {\n    if (previousOpenRef.current && controlledOpen === false) {\n      setQuery('');\n    }\n    previousOpenRef.current = controlledOpen;\n  }, [controlledOpen]);\n\n  return (\n    <InputSelectModeContext.Provider value={Boolean(props.multiple)}>\n      <InputSelectFilterContext.Provider value={filter}>\n        <SelectPrimitive.Root {...props} onOpenChange={handleOpenChange} />\n      </InputSelectFilterContext.Provider>\n    </InputSelectModeContext.Provider>\n  );\n}\nInputSelect.displayName = 'InputSelect';\n\nconst InputSelectGroup = SelectPrimitive.Group;\n\n/** Vertical field stack: label, trigger, description/error. */\nconst InputSelectField = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex min-w-[var(--ui-input-select-global-container-width-min)] flex-col gap-[var(--ui-input-select-global-container-gap)]',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectField.displayName = 'InputSelectField';\n\nconst InputSelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> & {\n    /** Appends a required `*` after the label text. */\n    required?: boolean;\n  }\n>(({ className, children, required, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\n      'flex gap-[var(--ui-input-select-global-container-label-gap)] text-sm leading-4 text-[var(--ui-input-select-global-label-color-idle)] data-[disabled]:text-[var(--ui-input-select-global-label-color-disabled)]',\n      className\n    )}\n    {...props}\n  >\n    {children}\n    {required && (\n      <span\n        aria-hidden=\"true\"\n        className=\"text-[var(--ui-input-select-global-required-color)]\"\n      >\n        *\n      </span>\n    )}\n  </SelectPrimitive.Label>\n));\nInputSelectLabel.displayName = 'InputSelectLabel';\n\nconst InputSelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      'group flex h-[var(--ui-input-select-global-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-select-global-box-gap)] rounded-[var(--ui-input-select-global-box-border-radius)] border bg-[var(--ui-input-select-global-box-color-idle)] border-[var(--ui-input-select-normal-box-border-color-idle)] px-[var(--ui-input-select-global-box-padding-x)] text-sm leading-6 text-[var(--ui-input-select-global-value-color-idle)] outline-none transition-colors',\n      'not-data-[disabled]:hover:bg-[var(--ui-input-select-global-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-input-select-normal-box-border-color-hover)]',\n      'focus-visible:border-[var(--ui-input-select-normal-box-border-color-hover)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n      'data-[popup-open]:border-[var(--ui-input-select-normal-box-border-color-hover)] data-[popup-open]:ring-[3px] data-[popup-open]:ring-[var(--ui-focus-primary)]',\n      'data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--ui-input-select-normal-box-border-color-disabled)] data-[disabled]:bg-[var(--ui-input-select-global-box-color-disabled)] data-[disabled]:text-[var(--ui-input-select-global-value-color-disabled)]',\n      // Error treatment (driven by `aria-invalid`).\n      'aria-invalid:border-[var(--ui-input-select-error-box-border-color-idle)] not-data-[disabled]:aria-invalid:hover:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:focus-visible:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:focus-visible:ring-[var(--ui-focus-error)] aria-invalid:data-[popup-open]:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:data-[popup-open]:ring-[var(--ui-focus-error)]',\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon className=\"flex size-[var(--ui-input-select-global-icon-box-size)] shrink-0 items-center justify-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] group-data-[disabled]:text-[var(--ui-input-select-normal-icon-expand-color-disabled)]\">\n      <ChevronDownIcon\n        size={16}\n        className=\"transition-transform group-data-[popup-open]:rotate-180\"\n      />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n));\nInputSelectTrigger.displayName = 'InputSelectTrigger';\n\nconst InputSelectValue = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Value>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Value\n    ref={ref}\n    className={cn(\n      'min-w-0 flex-1 truncate text-start text-[var(--ui-input-select-global-value-color-idle)] data-[placeholder]:text-[var(--ui-input-select-global-placeholder-color-idle)]',\n      'group-data-[disabled]:!text-[var(--ui-input-select-global-value-color-disabled)] group-data-[disabled]:data-[placeholder]:!text-[var(--ui-input-select-global-placeholder-color-disabled)]',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectValue.displayName = 'InputSelectValue';\n\nconst InputSelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Popup>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Popup> & {\n    sideOffset?: number;\n    align?: SelectPrimitive.Positioner.Props['align'];\n    side?: SelectPrimitive.Positioner.Props['side'];\n    /**\n     * Offset in px along the alignment axis (perpendicular to `side`). Defaults\n     * to Base UI's own `0` when omitted — pass a value to nudge the dropdown\n     * along the trigger's edge without changing its `align`.\n     */\n    alignOffset?: SelectPrimitive.Positioner.Props['alignOffset'];\n    /**\n     * Collision-avoidance strategy. Defaults to Base UI's own flip/shift\n     * behavior, which may move the dropdown off the requested `side`/`align`\n     * when it doesn't fit. Pass `{ side: 'none', fallbackAxisSide: 'none' }`\n     * alongside an explicit `side`/`align` to lock the popup to that placement\n     * with no auto-flip fallback (e.g. \"always to the right, no matter what\":\n     * `side=\"right\" sideOffset={20} collisionAvoidance={{ side: 'none',\n     * fallbackAxisSide: 'none' }}`).\n     */\n    collisionAvoidance?: SelectPrimitive.Positioner.Props['collisionAvoidance'];\n    /**\n     * Element (or ref/getter) the popup positions itself against, overriding\n     * the default of anchoring to `InputSelectTrigger`. Use when the visible\n     * trigger isn't the element Base UI tracks internally — e.g. an external\n     * button drives a hidden trigger, and the popup should align with the\n     * button instead of the hidden trigger's layout position.\n     */\n    anchor?: SelectPrimitive.Positioner.Props['anchor'];\n    /**\n     * Container to portal the dropdown into. Defaults to the nearest\n     * `PortalContainerProvider`, or `document.body` when there is none; pass an\n     * element to scope the portal explicitly (e.g. a shadow root, so the popup\n     * inherits styles defined there).\n     */\n    portalContainer?: SelectPrimitive.Portal.Props['container'];\n    /**\n     * Render the dropdown chrome like `PopoverContent` (`--ui-popover-container-*`\n     * tokens, no shadow, fade/zoom/slide enter-exit animation) instead of the\n     * default `--ui-input-select-dropdown-container-*` tokens + static `shadow-md`.\n     * See `components/ui/popover/popover.tsx`.\n     */\n    isPopoverStyled?: boolean;\n  }\n>(\n  (\n    {\n      className,\n      children,\n      sideOffset = 4,\n      align = 'start',\n      side = 'bottom',\n      alignOffset,\n      collisionAvoidance,\n      anchor,\n      portalContainer,\n      isPopoverStyled = false,\n      ...props\n    },\n    ref\n  ) => {\n    const ctxContainer = usePortalContainer();\n    const resolvedContainer = portalContainer ?? ctxContainer;\n\n    return (\n    <SelectPrimitive.Portal container={resolvedContainer}>\n      <SelectPrimitive.Positioner\n        sideOffset={sideOffset}\n        align={align}\n        side={side}\n        alignOffset={alignOffset}\n        collisionAvoidance={collisionAvoidance}\n        anchor={anchor}\n        alignItemWithTrigger={false}\n        className=\"z-50 outline-none\"\n      >\n        <SelectPrimitive.Popup\n          ref={ref}\n          className={cn(\n            'max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-y-auto py-[var(--ui-input-select-dropdown-container-padding-y)] text-sm outline-none',\n            // Keep the border/radius/background token references and the animation\n            // classes below in sync with PopoverContent's container in popover.tsx —\n            // but deliberately NOT its sizing (`min-w`/`max-w`) or `text-foreground`:\n            // the dropdown keeps its own `--anchor-width`/`--available-height` sizing\n            // and default text color whether or not `isPopoverStyled` is set.\n            isPopoverStyled\n              ? [\n                  'rounded-[var(--ui-popover-container-border-radius)] border-[length:var(--ui-popover-container-border-width)] border-solid border-[var(--ui-popover-container-border-color)] bg-[var(--ui-popover-container-color)]',\n                  'duration-200 data-[open]:animate-in data-[closed]:animate-out data-[open]:fade-in-0 data-[closed]:fade-out-0 data-[open]:zoom-in-95 data-[closed]:zoom-out-95',\n                  'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2',\n                ]\n              : 'rounded-[var(--ui-input-select-dropdown-container-border-radius)] border border-[var(--ui-input-select-dropdown-container-border-color)] bg-[var(--ui-input-select-dropdown-container-color)] shadow-md',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n    );\n  }\n);\nInputSelectContent.displayName = 'InputSelectContent';\n\n/**\n * In-dropdown search row (magnifier + input). By default it drives the\n * `InputSelect` filter context — flat `InputSelectItem`s filter themselves, and\n * tree dropdowns read the query via `useInputSelectFilter`. Pass `value`/`onChange`\n * to control the query externally.\n */\nconst InputSelectSearch = React.forwardRef<\n  HTMLInputElement,\n  React.ComponentPropsWithoutRef<'input'>\n>(({ className, value, onChange, onKeyDown, ...props }, ref) => {\n  const filter = React.useContext(InputSelectFilterContext);\n  const setQuery = filter?.setQuery;\n  const controlled = value !== undefined;\n\n  // When the query is controlled externally, the consumer's `value` is the\n  // source of truth for what's displayed, so keep the internal filter context\n  // (what flat items match against) synced to it. A prop-driven value change —\n  // a \"clear\" button resetting to '', a debounced/transformed value — doesn't\n  // fire `onChange`, so driving the filter off raw DOM events alone would leave\n  // `filter.query` stale and hide every item against a query the box no longer\n  // shows. `setQuery` is a stable state setter, so this runs only when `value`\n  // changes.\n  React.useEffect(() => {\n    if (controlled) {\n      setQuery?.(String(value ?? ''));\n    }\n  }, [controlled, value, setQuery]);\n\n  return (\n    <div className=\"flex items-center gap-[var(--ui-input-select-dropdown-dropdown-search-gap)] px-[var(--ui-input-select-dropdown-dropdown-search-padding-x)] py-[var(--ui-input-select-dropdown-dropdown-search-padding-y)]\">\n      <MagnifierIcon\n        size={16}\n        className=\"shrink-0 text-[var(--ui-glyph-on-surface-primary)]\"\n      />\n      <input\n        ref={ref}\n        type=\"search\"\n        value={value ?? filter?.query ?? ''}\n        onChange={(event) => {\n          onChange?.(event);\n          // Uncontrolled: the input's value *is* the filter query, so write it\n          // straight through. Controlled: the effect above syncs the filter to\n          // the consumer's `value` once it re-renders, avoiding a flash of raw\n          // typed text when the consumer debounces or transforms the value.\n          if (!controlled) {\n            filter?.setQuery(event.currentTarget.value);\n          }\n        }}\n        // Base UI Select's typeahead would consume printable keys before they\n        // reach this input, so stop those from bubbling — but let navigation and\n        // selection keys (Arrow*/Home/End/Enter/Escape, all multi-char `key`\n        // names) through so the user can move from the search box into the\n        // filtered list and pick a result with the keyboard.\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          if (event.key.length === 1) {\n            event.stopPropagation();\n          }\n        }}\n        className={cn(\n          'min-w-0 flex-1 border-0 bg-transparent p-0 text-sm leading-6 text-[var(--ui-input-select-dropdown-dropdown-search-label-color-value)] outline-none placeholder:text-[var(--ui-input-select-dropdown-dropdown-search-label-color-placeholder)] [&::-webkit-search-cancel-button]:appearance-none',\n          className\n        )}\n        {...props}\n      />\n    </div>\n  );\n});\nInputSelectSearch.displayName = 'InputSelectSearch';\n\n/** A section (group) of items with an optional header. Divided by a top border. */\nconst InputSelectSection = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Group\n    ref={ref}\n    className={cn(\n      'flex flex-col border-t border-[var(--ui-input-select-dropdown-section-container-border-color)] py-[var(--ui-input-select-dropdown-section-container-padding-y)] first:border-t-0',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectSection.displayName = 'InputSelectSection';\n\nconst InputSelectSectionLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.GroupLabel>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.GroupLabel>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.GroupLabel\n    ref={ref}\n    className={cn(\n      'px-[var(--ui-input-select-dropdown-section-container-header-padding-x)] py-[var(--ui-input-select-dropdown-section-container-header-padding-y)] text-sm font-semibold leading-6 text-[var(--ui-input-select-dropdown-section-label-group-color)]',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectSectionLabel.displayName = 'InputSelectSectionLabel';\n\n/**\n * Width (px) of the leading nesting spacer for a 1-based tree `indent` level, per\n * the Figma \"InputSelectDropdownTenants\" spec: level 1 reserves 16 px (enough for a\n * single chevron) and each deeper level adds 24 px — 16 / 40 / 64 for levels 1–3.\n * The tenant icon therefore starts at the same x-position whether or not the row is\n * expandable, because the chevron lives right-aligned inside this reserved space.\n */\nconst NESTING_BASE = 16;\nconst NESTING_STEP = 24;\nfunction nestingWidth(indent: number): number {\n  return NESTING_BASE + (indent - 1) * NESTING_STEP;\n}\n\nexport interface InputSelectItemProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {\n  /** Optional leading icon rendered before the label text. Colored by `--ui-input-select-dropdown-item-global-icon-tenant`. */\n  icon?: React.ReactNode;\n  /** 1-based nesting level (0 / omitted = no indent). Levels 1–3 reserve 16 / 40 / 64 px. */\n  indent?: number;\n  /**\n   * Text used to match the in-dropdown search query. Defaults to the string\n   * `children`. When a query is active and this text doesn't match, the row hides\n   * itself — unless `hidden` is passed explicitly (tree dropdowns compute their own\n   * visibility). Rows stay mounted while hidden to keep Base UI's selection index\n   * stable.\n   */\n  textValue?: string;\n}\n\nconst InputSelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  InputSelectItemProps\n>(({ className, children, icon, indent, textValue, hidden, ...props }, ref) => {\n  const multiple = React.useContext(InputSelectModeContext);\n  const filter = React.useContext(InputSelectFilterContext);\n  const query = filter?.query.trim().toLowerCase() ?? '';\n  const label = textValue ?? (typeof children === 'string' ? children : undefined);\n  const autoHidden =\n    query.length > 0 && label !== undefined && !label.toLowerCase().includes(query);\n  return (\n    <SelectPrimitive.Item\n      ref={ref}\n      hidden={hidden ?? autoHidden}\n      className={cn(\n        'group/item relative flex cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none',\n        'bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]',\n        // Single-select rows tint when selected; multiple-select rows keep the\n        // unselected background (the leading checkbox carries the state).\n        !multiple &&\n          'data-[selected]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-idle)] data-[selected]:data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-hover)]',\n        'data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-disabled)]',\n        className\n      )}\n      {...props}\n    >\n      {multiple && (\n        <span\n          aria-hidden=\"true\"\n          className=\"flex size-[var(--ui-checkbox-global-box-size)] shrink-0 items-center justify-center rounded-[var(--ui-checkbox-global-box-border-radius)] border-[length:var(--ui-checkbox-global-box-border-width)] border-[var(--ui-checkbox-unchecked-box-border-color-idle)] bg-[var(--ui-checkbox-unchecked-box-color-idle)] text-transparent group-data-[selected]/item:border-[var(--ui-checkbox-checked-box-border-color-idle)] group-data-[selected]/item:bg-[var(--ui-checkbox-checked-box-color-idle)] group-data-[selected]/item:text-[var(--ui-checkbox-checked-icon-color-idle)]\"\n        >\n          <CheckIcon size={16} />\n        </span>\n      )}\n      {typeof indent === 'number' && indent > 0 && (\n        <span\n          aria-hidden=\"true\"\n          className=\"size-4 shrink-0\"\n          style={{ minWidth: nestingWidth(indent) }}\n        />\n      )}\n      {icon && (\n        <span className=\"flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-tenant)]\">\n          {icon}\n        </span>\n      )}\n      <SelectPrimitive.ItemText className=\"min-w-0 flex-1 truncate\">\n        {children}\n      </SelectPrimitive.ItemText>\n      {!multiple && (\n        <SelectPrimitive.ItemIndicator className=\"flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-checked)]\">\n          <CheckIcon size={16} />\n        </SelectPrimitive.ItemIndicator>\n      )}\n    </SelectPrimitive.Item>\n  );\n});\nInputSelectItem.displayName = 'InputSelectItem';\n\nexport interface InputSelectExpanderProps\n  extends React.ComponentPropsWithoutRef<'button'> {\n  /** Whether the group is currently expanded. */\n  expanded: boolean;\n  /** Called when the user clicks the row to toggle expand/collapse. */\n  onToggle: () => void;\n  /** Optional leading icon rendered after the chevron. */\n  icon?: React.ReactNode;\n  /** 1-based nesting level (0 / omitted = level 1). Levels 1–3 reserve 16 / 40 / 64 px; the chevron sits right-aligned inside. */\n  indent?: number;\n}\n\n/**\n * A non-selectable row that acts as an expand/collapse toggle for a tree group.\n * Visually identical to `InputSelectItem` but is **not** a `SelectPrimitive.Item`,\n * so clicking it won't set the select value.\n *\n * When collapsing a group, keep its child `InputSelectItem`s mounted and toggle\n * their `hidden` prop rather than unmounting them: Base UI's Select tracks the\n * selection by list index, so removing the selected row from the DOM makes a\n * sibling inherit its index and render a phantom check. `hidden` rows keep the\n * indices stable and are skipped by keyboard navigation.\n */\nconst InputSelectExpander = React.forwardRef<\n  HTMLButtonElement,\n  InputSelectExpanderProps\n>(({ className, children, expanded, onToggle, icon, indent, ...props }, ref) => (\n  <button\n    ref={ref}\n    type=\"button\"\n    onClick={onToggle}\n    aria-expanded={expanded}\n    className={cn(\n      'group/item relative flex w-full cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] text-start leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none',\n      'bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] hover:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]',\n      className\n    )}\n    {...props}\n  >\n    <span\n      aria-hidden=\"true\"\n      className=\"flex shrink-0 items-center justify-end text-[var(--ui-input-select-dropdown-item-global-icon-collapse)]\"\n      style={{\n        minWidth:\n          typeof indent === 'number' && indent > 0 ? nestingWidth(indent) : NESTING_BASE,\n      }}\n    >\n      {expanded ? <ChevronDownIcon size={16} /> : <ChevronRightIcon size={16} />}\n    </span>\n    {icon && (\n      <span className=\"flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-tenant)]\">\n        {icon}\n      </span>\n    )}\n    <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n  </button>\n));\nInputSelectExpander.displayName = 'InputSelectExpander';\n\nconst InputSelectDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.ComponentPropsWithoutRef<'p'>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\n      'text-xs leading-4 text-[var(--ui-input-select-normal-description-color-idle)]',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectDescription.displayName = 'InputSelectDescription';\n\nconst InputSelectError = React.forwardRef<\n  HTMLParagraphElement,\n  React.ComponentPropsWithoutRef<'p'>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\n      'text-xs leading-4 text-[var(--ui-input-select-error-error-msg-color)]',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectError.displayName = 'InputSelectError';\n\nexport interface InputSelectStatusProps\n  extends React.ComponentPropsWithoutRef<'div'> {\n  /** Which status to show. Drives the leading icon. */\n  variant: 'loading' | 'empty' | 'error';\n  /** Optional trailing action (e.g. a \"Try again\" button) — shown for `error`. */\n  action?: React.ReactNode;\n}\n\n/** Loading / empty / error status row shown instead of items inside the dropdown. */\nconst InputSelectStatus = React.forwardRef<HTMLDivElement, InputSelectStatusProps>(\n  ({ className, variant, children, action, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex min-h-[var(--ui-input-select-dropdown-container-status-width-min)] flex-col items-center justify-center gap-[var(--ui-input-select-dropdown-container-status-gap)] border-t border-[var(--ui-input-select-dropdown-section-container-border-color)] px-[var(--ui-input-select-dropdown-container-status-padding-x)] py-[var(--ui-input-select-dropdown-container-status-padding-y)] text-center text-sm leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)]',\n        className\n      )}\n      {...props}\n    >\n      {variant === 'loading' && (\n        <span\n          aria-hidden=\"true\"\n          className=\"size-6 animate-spin rounded-full border-2 border-[var(--ui-glyph-on-surface-primary)] border-t-transparent\"\n        />\n      )}\n      {variant === 'empty' && <InboxIcon size={24} className=\"text-[var(--ui-glyph-on-status-info)]\" />}\n      {variant === 'error' && <CircleWarningIcon size={24} className=\"text-[var(--ui-glyph-on-status-warning)]\" />}\n      {children}\n      {variant === 'error' && action}\n    </div>\n  )\n);\nInputSelectStatus.displayName = 'InputSelectStatus';\n\nexport {\n  InputSelect,\n  InputSelectField,\n  InputSelectLabel,\n  InputSelectTrigger,\n  InputSelectValue,\n  InputSelectContent,\n  InputSelectSearch,\n  InputSelectGroup,\n  InputSelectSection,\n  InputSelectSectionLabel,\n  InputSelectItem,\n  InputSelectExpander,\n  InputSelectDescription,\n  InputSelectError,\n  InputSelectStatus,\n  useInputSelectFilter,\n};\n"],"mappings":"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"}

package/dist/components/ui/line-chart/line-chart.js

@@ -2,10 +2,10 @@
 import { cn as e } from "../../../lib/utils.js";
 import { cva as t } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
 import { ChartContainer as n, ChartLegend as r, ChartLegendContent as i, ChartTooltip as a, ChartTooltipContent as o } from "../chart/chart.js";
-import { CHART_LABEL_MARGIN as s, resolveAnimation as c, resolveAxisDomain as l, resolveBrushProps as u, resolveChartReferenceValue as ee, resolveLabelFillClass as te, resolveReferenceLineProps as ne, resolveRotatedTickAnchor as d, resolveXAxisHeight as f, resolveXAxisTitle as p, resolveYAxisTitle as m, toLabelFormatter as h, toReferenceLineList as g } from "../chart/chart-format.js";
-import * as _ from "react";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
-import { Area as b, Brush as x, CartesianGrid as re, ComposedChart as ie, LabelList as ae, Line as oe, LineChart as se, ReferenceLine as ce, XAxis as le, YAxis as ue } from "recharts";
+import { CHART_LABEL_MARGIN as s, dropProjectionPayload as c, resolveAnimation as l, resolveAxisDomain as u, resolveBrushProps as d, resolveChartReferenceValue as f, resolveLabelFillClass as p, resolveReferenceLineProps as ee, resolveRotatedTickAnchor as te, resolveXAxisHeight as ne, resolveXAxisTitle as re, resolveYAxisTitle as ie, toLabelFormatter as ae, toReferenceLineList as oe } from "../chart/chart-format.js";
+import * as m from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { Area as se, Brush as ce, CartesianGrid as le, ComposedChart as ue, LabelList as de, Line as v, LineChart as fe, ReferenceLine as y, Text as pe, XAxis as me, YAxis as he, usePlotArea as b, useXAxisScale as x } from "recharts";
 //#region src/components/ui/line-chart/line-chart.tsx
 var S = t("", {
 	variants: {
@@ -27,7 +27,43 @@ var S = t("", {
 		curve: "monotone",
 		lineStyle: "solid"
 	}
-}), C = "__band_";
+});
+function ge({ projectionStart: e, prevTick: t, clipId: n, dataKeys: r }) {
+	let i = x(), a = b();
+	if (!i || !a) return null;
+	let o = i(t), s = i(e);
+	if (o == null || s == null) return null;
+	let c = (o + s) / 2, { x: l, y: u, width: d, height: f } = a, p = r.map((e, t) => `.actual-${n}-${t}{clip-path:url(#${n}-actual)}.proj-${n}-${t}{clip-path:url(#${n}-projection)}`).join("");
+	return /* @__PURE__ */ _(h, { children: [
+		/* @__PURE__ */ _("defs", { children: [/* @__PURE__ */ g("clipPath", {
+			id: `${n}-actual`,
+			children: /* @__PURE__ */ g("rect", {
+				x: l,
+				y: u,
+				width: c - l,
+				height: f
+			})
+		}), /* @__PURE__ */ g("clipPath", {
+			id: `${n}-projection`,
+			children: /* @__PURE__ */ g("rect", {
+				x: c,
+				y: u,
+				width: l + d - c,
+				height: f
+			})
+		})] }),
+		/* @__PURE__ */ g("style", { children: p }),
+		/* @__PURE__ */ g("line", {
+			x1: c,
+			y1: u,
+			x2: c,
+			y2: u + f,
+			stroke: "var(--ui-border-on-surface-border)",
+			strokeDasharray: "4 4"
+		})
+	] });
+}
+var C = "__band_";
 function w(e) {
 	return e?.filter((e) => !String(e.dataKey).startsWith(C));
 }
@@ -37,132 +73,204 @@ function T(e) {
 			...t,
 			payload: w(t.payload)
 		};
-		return typeof e == "function" ? _.createElement(e, n) : _.cloneElement(e, n);
+		return typeof e == "function" ? /* @__PURE__ */ g(e, { ...n }) : m.cloneElement(e, n);
 	};
 }
-var E = _.forwardRef(({ className: t, config: E, palette: D, data: O, dataKeys: k, comparisonKeys: A, deltaBands: j, xKey: M, xAxisLabel: N, yAxisLabel: P, yUnit: F, curve: I = "monotone", lineStyle: L = "solid", strokeWidth: R = 2, showDots: z = !0, dotSize: B = 3, showActiveDot: V, connectNulls: H = !1, lineSettings: U, referenceLine: de, showGrid: fe = !0, showTooltip: pe = !0, showLegend: me = !0, showXAxis: he = !0, showYAxis: ge = !0, xTickFormatter: W, yTickFormatter: _e, xAxisAngle: G, xAxisInterval: ve, yAxisTickCount: ye, yAxisDomain: be, gridDashed: xe, gridHorizontal: Se, gridVertical: Ce, tooltipContent: K, animate: we, animationDuration: Te, animationBegin: Ee, animationEasing: De, showLabels: q = !1, labelPosition: Oe, labelFormatter: ke, showBrush: Ae = !1, brushHeight: je, brushAriaLabel: Me, ...Ne }, Pe) => {
-	let J = c({
-		animate: we,
-		animationDuration: Te,
-		animationBegin: Ee,
-		animationEasing: De
-	}), Fe = Oe ?? "top", Ie = l(be), Le = g(de), Y = (e) => U?.[e]?.color ?? `var(--color-${e})`, X = (e) => U?.[e]?.curveType ?? I ?? "monotone", Re = q || Object.values(U ?? {}).some((e) => e.showLabel), ze = f(N, G), Z = _.useMemo(() => K ? T(K) : void 0, [K]), Be = p(N), Ve = m(P), Q = (j ?? []).map(([e, t], n) => ({
+function _e(e) {
+	return function(t) {
+		let n = {
+			...t,
+			payload: c(t.payload)
+		};
+		return typeof e == "function" ? /* @__PURE__ */ g(e, { ...n }) : m.cloneElement(e, n);
+	};
+}
+var E = m.forwardRef(({ className: t, config: h, palette: b, data: x, dataKeys: E, comparisonKeys: D, deltaBands: ve, xKey: O, xAxisLabel: k, yAxisLabel: A, yUnit: ye, curve: j = "monotone", lineStyle: M = "solid", strokeWidth: N = 2, showDots: P = !1, dotSize: be = 3, showActiveDot: xe, connectNulls: F = !1, lineSettings: I, referenceLine: Se, projectionStart: L, showGrid: Ce = !0, showTooltip: we = !0, showLegend: Te = !0, showXAxis: Ee = !0, showYAxis: De = !0, xTickFormatter: R, yTickFormatter: Oe, xAxisAngle: z, xAxisInterval: ke, yAxisTickCount: Ae, yAxisDomain: je, gridDashed: Me, gridHorizontal: Ne, gridVertical: Pe, tooltipContent: B, animate: Fe, animationDuration: Ie, animationBegin: Le, animationEasing: Re, showLabels: V = !1, labelPosition: ze, labelFormatter: Be, showBrush: Ve = !1, brushHeight: He, brushAriaLabel: Ue, ...We }, Ge) => {
+	let H = l({
+		animate: Fe,
+		animationDuration: Ie,
+		animationBegin: Le,
+		animationEasing: Re
+	}), Ke = ze ?? "top", qe = u(je), Je = oe(Se), U = (e) => I?.[e]?.color ?? `var(--color-${e})`, W = (e) => I?.[e]?.curveType ?? j ?? "monotone", Ye = V || Object.values(I ?? {}).some((e) => e.showLabel), G = ne(k, z), K = m.useMemo(() => L === void 0 ? -1 : x.findIndex((e) => e[O] === L), [
+		L,
+		x,
+		O
+	]), q = K > 0, J = m.useMemo(() => {
+		if (!q) return;
+		let e = new Set(x.slice(K).map((e) => e[O]));
+		return ({ payload: t, index: n, ...r }) => /* @__PURE__ */ g(pe, {
+			...r,
+			fontSize: 12,
+			className: e.has(t.value) ? "fill-[var(--ui-text-on-surface-disabled)]" : "fill-muted-foreground",
+			children: R ? R(t.value, n) : t.value
+		});
+	}, [
+		q,
+		K,
+		x,
+		O,
+		R
+	]), Y = m.useMemo(() => q ? x.map((e) => ({
+		...e,
+		...Object.fromEntries(E.map((t) => [`_proj_${t}`, e[t]]))
+	})) : x, [
+		q,
+		x,
+		E
+	]), X = m.useMemo(() => {
+		if (!(K <= 0)) return x[K - 1]?.[O];
+	}, [
+		K,
+		x,
+		O
+	]), Z = `line-proj-${m.useId().replace(/:/g, "")}`, Xe = m.useMemo(() => {
+		if (!B) return;
+		let e = T(B);
+		return q ? _e(e) : e;
+	}, [B, q]), Ze = re(k), Qe = ie(A), Q = (ve ?? []).map(([e, t], n) => ({
 		field: `${C}${n}`,
 		current: e,
 		comparison: t
-	})), $ = Q.length > 0, He = Z ?? ($ ? ((e) => /* @__PURE__ */ v(o, {
+	})), $ = Q.length > 0, $e = Xe ?? ($ || q ? ((e) => /* @__PURE__ */ g(o, {
 		active: e.active,
 		label: e.label,
-		payload: w(e.payload)
-	})) : /* @__PURE__ */ v(o, {})), Ue = $ ? ((e) => /* @__PURE__ */ v(i, {
+		payload: c(w(e.payload))
+	})) : /* @__PURE__ */ g(o, {})), et = $ || q ? ((e) => /* @__PURE__ */ g(i, {
 		verticalAlign: e.verticalAlign,
-		payload: w(e.payload)
-	})) : /* @__PURE__ */ v(i, {}), We = Q.length ? O.map((e) => {
+		payload: c(w(e.payload))
+	})) : /* @__PURE__ */ g(i, {}), tt = Q.length ? Y.map((e) => {
 		let t = { ...e };
 		for (let { field: n, current: r, comparison: i } of Q) {
 			let a = e[r], o = e[i];
 			t[n] = typeof a == "number" && typeof o == "number" ? [Math.min(a, o), Math.max(a, o)] : void 0;
 		}
 		return t;
-	}) : O, Ge = Q.length > 0 ? ie : se;
-	return /* @__PURE__ */ v("div", {
-		ref: Pe,
-		"data-curve": I,
-		"data-line-style": L,
+	}) : Y, nt = Q.length > 0 ? ue : fe;
+	return /* @__PURE__ */ g("div", {
+		ref: Ge,
+		"data-curve": j,
+		"data-line-style": M,
 		className: e(S({
-			curve: I,
-			lineStyle: L
+			curve: j,
+			lineStyle: M
 		}), t),
-		...Ne,
-		children: /* @__PURE__ */ v(n, {
-			config: E,
-			palette: D,
+		...We,
+		children: /* @__PURE__ */ g(n, {
+			config: h,
+			palette: b,
 			className: "size-full [&_.recharts-label]:fill-foreground",
-			children: /* @__PURE__ */ y(Ge, {
-				data: We,
-				margin: Re ? s : void 0,
+			children: /* @__PURE__ */ _(nt, {
+				data: tt,
+				margin: Ye ? s : void 0,
 				children: [
-					fe && /* @__PURE__ */ v(re, {
-						horizontal: Se ?? !0,
-						vertical: Ce ?? !1,
-						strokeDasharray: xe ? "3 3" : void 0
+					Ce && /* @__PURE__ */ g(le, {
+						horizontal: Ne ?? !0,
+						vertical: Pe ?? !1,
+						strokeDasharray: Me ? "3 3" : void 0
 					}),
-					/* @__PURE__ */ v(le, {
-						dataKey: M,
+					/* @__PURE__ */ g(me, {
+						dataKey: O,
 						type: "category",
-						hide: !he,
+						hide: !Ee,
 						tickLine: !1,
 						axisLine: !1,
 						tickMargin: 8,
-						tickFormatter: W,
-						angle: G,
-						interval: ve,
-						textAnchor: d(G),
-						height: ze,
-						label: Be
+						tickFormatter: J ? void 0 : R,
+						tick: J,
+						angle: z,
+						interval: ke,
+						textAnchor: te(z),
+						height: G,
+						label: Ze
 					}),
-					/* @__PURE__ */ v(ue, {
+					/* @__PURE__ */ g(he, {
 						type: "number",
-						hide: !ge,
+						hide: !De,
 						tickLine: !1,
 						axisLine: !1,
-						unit: F,
-						tickFormatter: _e,
-						tickCount: ye,
-						domain: Ie,
-						width: P ? 72 : void 0,
-						label: Ve
+						unit: ye,
+						tickFormatter: Oe,
+						tickCount: Ae,
+						domain: qe,
+						width: A ? 72 : void 0,
+						label: Qe
+					}),
+					we && /* @__PURE__ */ g(a, { content: $e }),
+					Te && /* @__PURE__ */ g(r, { content: et }),
+					q && X != null && /* @__PURE__ */ g(ge, {
+						projectionStart: L,
+						prevTick: X,
+						clipId: Z,
+						dataKeys: E
 					}),
-					pe && /* @__PURE__ */ v(a, { content: He }),
-					me && /* @__PURE__ */ v(r, { content: Ue }),
-					Q.map(({ field: e, current: t }) => /* @__PURE__ */ v(b, {
+					Q.map(({ field: e, current: t }) => /* @__PURE__ */ g(se, {
 						dataKey: e,
-						type: X(t),
+						type: W(t),
 						stroke: "none",
-						fill: Y(t),
+						fill: U(t),
 						fillOpacity: .12,
-						connectNulls: H,
+						connectNulls: F,
 						dot: !1,
 						activeDot: !1,
-						...J,
+						clipPath: q ? `url(#${Z}-actual)` : void 0,
+						...H,
 						legendType: "none",
 						tooltipType: "none"
 					}, e)),
-					k.map((e) => {
-						let t = A?.includes(e), n = U?.[e], r = !t && (n?.showDots ?? z), i = n?.dotSize ?? B, a = !t && (V ?? r), o = n?.dashed ?? L === "dashed", s = n?.showLabel ?? q, c = n?.labelPosition ?? Fe;
-						return /* @__PURE__ */ v(oe, {
-							type: X(e),
+					E.map((e, t) => {
+						let n = D?.includes(e), r = I?.[e], i = !n && (r?.showDots ?? P), a = r?.dotSize ?? be, o = !n && (xe ?? i), s = r?.dashed ?? M === "dashed", c = r?.showLabel ?? V, l = r?.labelPosition ?? Ke;
+						return /* @__PURE__ */ g(v, {
+							className: q && !n ? `actual-${Z}-${t}` : void 0,
+							type: W(e),
 							dataKey: e,
-							stroke: Y(e),
-							strokeWidth: n?.strokeWidth ?? R,
-							strokeDasharray: t || o ? "5 5" : void 0,
-							strokeOpacity: t ? .5 : void 0,
-							dot: r ? { r: i } : !1,
-							activeDot: a ? { r: i + 2 } : !1,
-							connectNulls: H,
-							...J,
-							children: s && /* @__PURE__ */ v(ae, {
+							stroke: U(e),
+							strokeWidth: r?.strokeWidth ?? N,
+							strokeDasharray: n || s ? "5 5" : void 0,
+							strokeOpacity: n ? .5 : void 0,
+							dot: i ? { r: a } : !1,
+							activeDot: o ? { r: a + 2 } : !1,
+							connectNulls: F,
+							...H,
+							children: c && /* @__PURE__ */ g(de, {
 								dataKey: e,
-								position: c,
-								formatter: h(ke),
-								className: te(c),
+								position: l,
+								formatter: ae(Be),
+								className: p(l),
 								fontSize: 12
 							})
 						}, e);
 					}),
-					Le.map((e, t) => {
-						let n = ee(e, O, k);
-						return n === void 0 ? null : /* @__PURE__ */ v(ce, {
+					q && E.map((e, t) => {
+						if (D?.includes(e)) return null;
+						let n = I?.[e];
+						return /* @__PURE__ */ g(v, {
+							className: `proj-${Z}-${t}`,
+							type: W(e),
+							dataKey: `_proj_${e}`,
+							name: e,
+							stroke: U(e),
+							strokeWidth: n?.strokeWidth ?? N,
+							strokeDasharray: "5 5",
+							dot: !1,
+							activeDot: !1,
+							legendType: "none",
+							tooltipType: "none",
+							...H
+						}, `_proj_${e}`);
+					}),
+					Je.map((e, t) => {
+						let n = f(e, x, E);
+						return n === void 0 ? null : /* @__PURE__ */ g(y, {
 							y: n,
-							...ne(e.label, e.labelPosition)
+							...ee(e.label, e.labelPosition)
 						}, `${e.label ?? "ref"}-${t}`);
 					}),
-					Ae && /* @__PURE__ */ v(x, {
-						dataKey: M,
-						tickFormatter: W,
-						...u({
-							brushHeight: je,
-							brushAriaLabel: Me
+					Ve && /* @__PURE__ */ g(ce, {
+						dataKey: O,
+						tickFormatter: R,
+						...d({
+							brushHeight: He,
+							brushAriaLabel: Ue
 						})
 					})
 				]