@stackone/malachite 2.27.0 → 2.27.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/COMPONENTS.md +1 -1
- package/dist/components/Dropdown.js +188 -195
- package/dist/components/Dropdown.js.map +1 -1
- package/dist/components/MultiSelect.js +412 -382
- package/dist/components/MultiSelect.js.map +1 -1
- package/dist/components/SelectionBar.js +38 -38
- package/dist/components/SelectionBar.js.map +1 -1
- package/dist/components/truncatedLines.js +16 -0
- package/dist/components/truncatedLines.js.map +1 -0
- package/dist/tailwind.css.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelect.js","sources":["../../src/components/MultiSelect.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useId,\n useLayoutEffect,\n useInsertionEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport type { Control, FieldPath, FieldValues } from 'react-hook-form';\nimport BaseFormComponent, {\n type RequiredIndicator,\n type RightSideContent,\n useFormFieldIds,\n} from './BaseFormComponent';\nimport CaretDownIcon from './CustomIcons/CaretDownIcon';\nimport InfoFilledIcon from './CustomIcons/InfoFilledIcon';\nimport SearchIcon from './CustomIcons/SearchIcon';\nimport LoadingInput from './LoadingInput';\nimport Spinner from './Spinner';\nimport Tag from './Tag';\nimport Tooltip from './Tooltip';\nimport { CONTROL_TEXT_SIZE, CONTROL_TEXT_SIZE_CLASS } from './controlTextSize';\nimport { controlWidthStyle } from './controlWidth';\nimport { DROPDOWN_TRIGGER_ATTR, getTriggerVisual } from './dropdownTriggerStyle';\nimport { pushEscapeLayer } from './escapeLayers';\nimport {\n MENU_MAX_HEIGHT_PX,\n MENU_SPECS,\n type MenuGeometry,\n measureMenuGeometry,\n} from './floatingMenuGeometry';\nimport { ensureMultiSelectPanelStyles } from './optionRowStyles';\nimport { overlayIdentity } from './portalOverlay';\nimport { useTopLayer } from './topLayer';\n\nconst EMPTY_MESSAGE_STYLE: React.CSSProperties = {\n padding: '8px 10px',\n color: 'var(--malachite-text-secondary, rgb(123, 123, 123))',\n};\n\nexport type MultiSelectSize = 'small' | 'medium' | 'large';\n\n// Mirrors Dropdown, which is what Figma specs a select as.\nconst TRIGGER_SIZE_HEIGHT: Record<MultiSelectSize, string> = {\n small: 'h-[var(--malachite-control-height-small,28px)]',\n medium: 'h-[var(--malachite-control-height-medium,32px)]',\n large: 'h-[var(--malachite-control-height-large,42px)]',\n};\n\nconst TRIGGER_SIZE_CLASSES: Record<MultiSelectSize, string> = {\n small: `${TRIGGER_SIZE_HEIGHT.small} gap-[6px] px-2.5 ${CONTROL_TEXT_SIZE_CLASS.small} rounded-[var(--malachite-radius-10,10px)]`,\n medium: `${TRIGGER_SIZE_HEIGHT.medium} gap-[8px] px-3 ${CONTROL_TEXT_SIZE_CLASS.medium} rounded-xl`,\n large: `${TRIGGER_SIZE_HEIGHT.large} gap-[10px] px-4 ${CONTROL_TEXT_SIZE_CLASS.large} rounded-[var(--malachite-radius-xxl,14px)]`,\n};\n\nexport interface MultiSelectOption {\n value: string;\n label: React.ReactNode;\n searchText?: string;\n /** Prevent toggling or removing this option — used for mandatory/locked selections */\n disabled?: boolean;\n /** Right-aligned badge shown in the dropdown only (not in chips) */\n badge?: React.ReactNode;\n /** Description text for this option */\n description?: string;\n /** How description renders — 'icon': info icon with tooltip, 'subtitle': text below label, 'hover': tooltip on label. Default: 'icon' */\n descriptionMode?: 'icon' | 'subtitle' | 'hover';\n /** Custom icon for 'icon' mode. Default: built-in ⓘ */\n descriptionIcon?: React.ReactNode;\n /** Truncate subtitle after N lines. Only applies to 'subtitle' mode */\n descriptionMaxLines?: number;\n}\n\ninterface MultiSelectBaseProps {\n options: MultiSelectOption[];\n /** Controlled value. When provided, component is fully controlled. */\n value?: string[];\n /** Initial value for uncontrolled usage (like Dropdown's defaultValue). */\n defaultValue?: string[];\n onChange?: (next: string[]) => void;\n placeholder?: string;\n renderTrigger?: (selected: MultiSelectOption[]) => React.ReactNode;\n searchable?: boolean;\n /** 'large' (42px) for form inputs; 'medium' (32px) for toolbar chips; 'small' (28px) beside a title. */\n size?: MultiSelectSize;\n width?: string | number;\n minWidth?: number;\n disabled?: boolean;\n error?: boolean;\n loading?: boolean;\n label?: string;\n description?: string;\n tooltip?: string;\n hint?: string;\n rightSideContent?: RightSideContent;\n required?: boolean;\n requiredIndicator?: RequiredIndicator;\n /** Show selected values as chips instead of \"N selected\" text */\n chips?: boolean;\n /** Show × button on each chip to remove it (only when chips=true) */\n chipsRemovable?: boolean;\n /** Max visible chips. 'auto' = show all chips. Number = hard limit with \"+N\" badge */\n chipsMax?: number | 'auto';\n /** Search input inside the trigger field instead of external search bar */\n inlineSearch?: boolean;\n /**\n * Called with the query as typed, and with `''` whenever the component clears it — on\n * select, and on close — so a consumer's request stays in step with what is on screen.\n *\n * For a list too large to load in full: fire the request here and pass the results back\n * as `options`. Pair it with `localFilter={false}`, or the component filters the answer\n * the server already filtered. Debouncing is left to the caller, who is the only one who\n * knows what a request costs.\n */\n onSearchChange?: (query: string) => void;\n /**\n * Whether this component filters `options` itself. Default true.\n *\n * Set false when the options already reflect the query. A server commonly matches on\n * fields the label does not contain — an account found by its owner's email, say — and\n * filtering again here would hide precisely those matches.\n */\n localFilter?: boolean;\n className?: string;\n style?: React.CSSProperties;\n /** Names the trigger from the light DOM, where `htmlFor` cannot reach into the shadow root. */\n id?: string;\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n}\n\n// When formControl is provided, name is required for form registration\nexport type MultiSelectProps =\n | (MultiSelectBaseProps & {\n formControl: Control<FieldValues, unknown>;\n name: string;\n })\n | (MultiSelectBaseProps & {\n formControl?: undefined;\n name?: string;\n });\n\nconst AUTO_SEARCHABLE_THRESHOLD = 10;\n\nconst KEY_ARROW_DOWN = 'ArrowDown';\nconst KEY_ARROW_UP = 'ArrowUp';\nconst KEY_ENTER = 'Enter';\nconst KEY_BACKSPACE = 'Backspace';\nconst NAV_KEYS = new Set([KEY_ARROW_DOWN, KEY_ARROW_UP, KEY_ENTER]);\n\n// Nesting interactive elements inside <button> is invalid HTML —\n// combobox for text input (inline search), group for chip buttons, button otherwise\ninterface TriggerElementProps extends React.HTMLAttributes<HTMLElement> {\n triggerRole: 'combobox' | 'group' | 'button';\n disabled: boolean;\n children: React.ReactNode;\n}\n\nconst TriggerElement = React.forwardRef<HTMLButtonElement | HTMLDivElement, TriggerElementProps>(\n ({ triggerRole, disabled, children, ...props }, ref) => {\n if (triggerRole !== 'button') {\n return (\n <div\n ref={ref as React.Ref<HTMLDivElement>}\n role={triggerRole}\n tabIndex={disabled ? -1 : 0}\n {...(props as React.HTMLAttributes<HTMLDivElement>)}\n >\n {children}\n </div>\n );\n }\n return (\n <button\n ref={ref as React.Ref<HTMLButtonElement>}\n type=\"button\"\n disabled={disabled}\n {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n >\n {children}\n </button>\n );\n },\n);\nTriggerElement.displayName = 'TriggerElement';\n\nconst MultiSelect: React.FC<MultiSelectProps> = ({\n options,\n value: controlledValue,\n defaultValue,\n onChange,\n placeholder = 'Select',\n renderTrigger,\n searchable,\n size = 'large',\n width = 'auto',\n minWidth,\n disabled = false,\n error = false,\n loading = false,\n label,\n name,\n description,\n tooltip,\n hint,\n rightSideContent,\n required = false,\n requiredIndicator,\n formControl,\n chips = false,\n chipsRemovable = true,\n chipsMax = 'auto',\n inlineSearch = false,\n onSearchChange,\n localFilter = true,\n className = '',\n style,\n id,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n}) => {\n // Stable IDs for aria-activedescendant and aria-controls\n const instanceId = useId();\n const listboxId = `${instanceId}-listbox`;\n const getOptionId = (index: number) => `${instanceId}-option-${index}`;\n const { controlId, labelId, descriptionId, hintId, describedBy } = useFormFieldIds({\n id,\n label,\n description,\n hint,\n });\n\n // Mount-only initial value — matches native <input defaultValue> semantics\n const [internalValue, setInternalValue] = useState<string[]>(() => defaultValue ?? []);\n const isControlled = controlledValue !== undefined;\n const value = isControlled ? controlledValue : internalValue;\n\n const [open, setOpen] = useState(false);\n const [position, setPosition] = useState<MenuGeometry | null>(null);\n const [search, setSearch] = useState('');\n const [highlightedIndex, setHighlightedIndex] = useState(-1);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const inlineInputRef = useRef<HTMLInputElement>(null);\n const popoverRef = useRef<HTMLDivElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n\n useTopLayer(popoverRef, open);\n\n const optionRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n // Set lookup — `value.includes(...)` inside a filter or a per-row render is O(n),\n // making selection checks O(options x value) on every pass.\n const selectedValues = useMemo(() => new Set(value), [value]);\n\n const selectedOptions = useMemo(\n () => options.filter((o) => selectedValues.has(o.value)),\n [options, selectedValues],\n );\n\n const maxVisibleChips = typeof chipsMax === 'number' ? chipsMax : undefined;\n\n const filteredOptions = useMemo(() => {\n // The options already answer the query when the consumer is fetching them.\n if (!localFilter) return options;\n const query = search.trim().toLowerCase();\n if (!query) return options;\n return options.filter((o) => {\n const text = o.searchText ?? (typeof o.label === 'string' ? o.label : '');\n return text.toLowerCase().includes(query);\n });\n }, [options, search, localFilter]);\n\n // Programmatic search clears (after Enter) should preserve highlight position\n const isUserSearching = useRef(false);\n\n /**\n * Every change to the query goes through here, including the programmatic clears on\n * select and on close, so `onSearchChange` cannot fall out of step with what the list is\n * showing: a consumer left holding the previous query would keep serving results for a\n * search the component has already forgotten.\n *\n * The ref mirrors the state so a repeated clear does not fire the callback again — the\n * close effect runs on every close, whether or not anything was typed.\n */\n const searchRef = useRef('');\n const updateSearch = useCallback(\n (next: string, fromUser: boolean) => {\n if (searchRef.current === next) return;\n searchRef.current = next;\n if (fromUser) isUserSearching.current = true;\n setSearch(next);\n onSearchChange?.(next);\n },\n [onSearchChange],\n );\n\n const handleSearchChange = useCallback(\n (newSearch: string) => updateSearch(newSearch, true),\n [updateSearch],\n );\n\n const clearSearch = useCallback(() => updateSearch('', false), [updateSearch]);\n // biome-ignore lint/correctness/useExhaustiveDependencies: search triggers the effect, ref gates it\n useEffect(() => {\n if (isUserSearching.current) {\n setHighlightedIndex(-1);\n isUserSearching.current = false;\n }\n }, [search]);\n\n // A consumer fetching its options always needs the input, however few results came\n // back: auto-hiding it on a short list would take the search away mid-typing, exactly\n // when the query has narrowed the list to a handful.\n const isSearchable =\n searchable ?? (onSearchChange !== undefined || options.length > AUTO_SEARCHABLE_THRESHOLD);\n\n // Inline search replaces the external search bar\n const showSearch = inlineSearch ? false : isSearchable;\n\n const updatePosition = useCallback(() => {\n const trigger = triggerRef.current;\n if (!trigger) return;\n\n const geometry = measureMenuGeometry(popoverRef.current, {\n triggerRect: trigger.getBoundingClientRect(),\n preset: 'standard',\n minWidth,\n viewportWidth: window.innerWidth,\n viewportHeight: window.innerHeight,\n });\n\n setPosition(geometry);\n }, [minWidth]);\n\n useEffect(() => {\n if (!open) {\n clearSearch();\n setHighlightedIndex(-1);\n setPosition(null);\n return;\n }\n updatePosition();\n // Auto-focus inline search so user can type immediately\n if (inlineSearch) inlineInputRef.current?.focus();\n\n const handleScrollOrResize = () => updatePosition();\n const handleClickOutside = (e: MouseEvent) => {\n const path = e.composedPath();\n const trigger = triggerRef.current;\n const popover = popoverRef.current;\n if ((!trigger || !path.includes(trigger)) && (!popover || !path.includes(popover))) {\n setOpen(false);\n }\n };\n // ESC via the shared layer stack: closes only the topmost overlay.\n const popEscapeLayer = pushEscapeLayer(() => setOpen(false));\n window.addEventListener('scroll', handleScrollOrResize, true);\n window.addEventListener('resize', handleScrollOrResize);\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n window.removeEventListener('scroll', handleScrollOrResize, true);\n window.removeEventListener('resize', handleScrollOrResize);\n document.removeEventListener('mousedown', handleClickOutside);\n popEscapeLayer();\n };\n }, [open, updatePosition, inlineSearch, clearSearch]);\n\n useLayoutEffect(() => {\n if (!open) {\n return;\n }\n updatePosition();\n\n const popover = popoverRef.current;\n if (!popover || typeof ResizeObserver === 'undefined') {\n return;\n }\n const observer = new ResizeObserver(() => updatePosition());\n observer.observe(popover);\n return () => observer.disconnect();\n }, [open, updatePosition]);\n\n const updateValue = useCallback(\n (next: string[]) => {\n if (!isControlled) setInternalValue(next);\n onChange?.(next);\n },\n [isControlled, onChange],\n );\n\n const isOptionDisabled = useCallback(\n (optionValue: string) => {\n return options.some((o) => o.value === optionValue && o.disabled);\n },\n [options],\n );\n\n const toggle = useCallback(\n (optionValue: string) => {\n if (isOptionDisabled(optionValue)) return;\n if (value.includes(optionValue)) {\n updateValue(value.filter((v) => v !== optionValue));\n } else {\n updateValue([...value, optionValue]);\n }\n },\n [value, updateValue, isOptionDisabled],\n );\n\n const disabledValues = useMemo(() => {\n const locked = new Set<string>();\n for (const option of options) {\n if (option.disabled) {\n locked.add(option.value);\n }\n }\n return locked;\n }, [options]);\n\n const clearAll = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation();\n // Keep disabled (locked) options when clearing\n const locked = value.filter((v) => disabledValues.has(v));\n updateValue(locked);\n },\n [updateValue, value, disabledValues],\n );\n\n const removeChip = useCallback(\n (optionValue: string, e: React.MouseEvent) => {\n e.stopPropagation();\n if (isOptionDisabled(optionValue)) return;\n updateValue(value.filter((v) => v !== optionValue));\n },\n [value, updateValue, isOptionDisabled],\n );\n\n // Inline input lives inside trigger button — stopPropagation prevents\n // the keypress from firing twice (input → button bubble)\n const handleOptionNavigation = useCallback(\n (e: React.KeyboardEvent) => {\n if (!NAV_KEYS.has(e.key)) return;\n\n e.preventDefault();\n e.stopPropagation();\n\n if (!open) {\n setOpen(true);\n return;\n }\n\n const optionCount = filteredOptions.length;\n if (optionCount === 0) return;\n\n // Manual scroll within the list container — scrollIntoView can scroll the page\n const scrollToOption = (index: number) => {\n requestAnimationFrame(() => {\n const el = optionRefs.current[index];\n const container = listRef.current;\n if (!el || !container) return;\n\n const elTop = el.offsetTop;\n const elBottom = elTop + el.offsetHeight;\n const containerTop = container.scrollTop;\n const containerBottom = containerTop + container.clientHeight;\n\n if (elBottom > containerBottom) {\n container.scrollTo({\n top: elBottom - container.clientHeight,\n behavior: 'smooth',\n });\n } else if (elTop < containerTop) {\n container.scrollTo({ top: elTop, behavior: 'smooth' });\n }\n });\n };\n\n const moveHighlight = (direction: 1 | -1) => {\n let nextIndex = highlightedIndex;\n for (let i = 0; i < optionCount; i++) {\n nextIndex =\n direction === 1\n ? nextIndex < optionCount - 1\n ? nextIndex + 1\n : 0\n : nextIndex > 0\n ? nextIndex - 1\n : optionCount - 1;\n if (!filteredOptions[nextIndex]?.disabled) {\n scrollToOption(nextIndex);\n setHighlightedIndex(nextIndex);\n return;\n }\n }\n };\n\n const selectHighlighted = () => {\n if (highlightedIndex < 0 || highlightedIndex >= optionCount) {\n return;\n }\n if (filteredOptions[highlightedIndex]?.disabled) return;\n const selectedValue = filteredOptions[highlightedIndex].value;\n toggle(selectedValue);\n clearSearch();\n // After clearing search, filteredOptions resets to the full list —\n // re-locate the selected option so the highlight stays on it\n const newIndex = options.findIndex((o) => o.value === selectedValue);\n setHighlightedIndex(newIndex >= 0 ? newIndex : -1);\n scrollToOption(newIndex >= 0 ? newIndex : 0);\n requestAnimationFrame(() => inlineInputRef.current?.focus());\n };\n\n switch (e.key) {\n case KEY_ARROW_DOWN:\n moveHighlight(1);\n break;\n case KEY_ARROW_UP:\n moveHighlight(-1);\n break;\n case KEY_ENTER:\n selectHighlighted();\n break;\n }\n },\n [open, filteredOptions, highlightedIndex, toggle, options, clearSearch],\n );\n\n const handleSearchKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n // Empty backspace removes last chip for quick corrections\n if (e.key === KEY_BACKSPACE && search === '' && value.length > 0) {\n e.preventDefault();\n updateValue(value.slice(0, -1));\n // Keep focus on input so user stays in the dropdown context\n requestAnimationFrame(() => inlineInputRef.current?.focus());\n return;\n }\n handleOptionNavigation(e);\n },\n [handleOptionNavigation, search, value, updateValue],\n );\n\n const clearable = selectedOptions.length > 0 && !disabled && !loading;\n\n const triggerVisual = getTriggerVisual({\n disabled,\n error,\n open,\n loading,\n hasSelection: selectedOptions.length > 0,\n });\n\n // Inline search input shared between chip mode and empty state\n const inlineSearchInput = useMemo(() => {\n if (!inlineSearch) return null;\n return (\n <input\n ref={inlineInputRef}\n type=\"text\"\n value={search}\n onChange={(e) => handleSearchChange(e.target.value)}\n onKeyDown={handleSearchKeyDown}\n placeholder={selectedOptions.length === 0 ? placeholder : ''}\n // Inherits rather than naming a rung: an input does not take the parent's\n // font by default, and the trigger already sets the one its tier calls for.\n className=\"flex-1 w-full min-w-[40px] border-none outline-none bg-transparent text-[length:inherit] p-0 text-[var(--malachite-text-primary,rgb(10,10,10))]\"\n onMouseDown={(e) => {\n // Prevent trigger blur while keeping dropdown open\n e.preventDefault();\n }}\n />\n );\n }, [\n inlineSearch,\n search,\n handleSearchChange,\n handleSearchKeyDown,\n selectedOptions.length,\n placeholder,\n ]);\n\n const triggerLabel = useMemo(() => {\n if (renderTrigger && selectedOptions.length > 0) {\n return renderTrigger(selectedOptions);\n }\n\n // Chips give users direct visibility and removal of selected values\n if (chips && selectedOptions.length > 0) {\n const visible =\n maxVisibleChips != null\n ? selectedOptions.slice(0, maxVisibleChips)\n : selectedOptions;\n const remaining = selectedOptions.length - visible.length;\n return (\n <div\n className=\"flex items-center gap-1 overflow-hidden min-w-0 flex-1\"\n style={{ flexWrap: 'nowrap' }}\n >\n {visible.map((opt) => {\n const optDisabled = disabledValues.has(opt.value);\n return (\n <Tag\n key={opt.value}\n value={opt.label}\n type=\"default\"\n textTransform=\"none\"\n onRemove={\n chipsRemovable && !disabled && !optDisabled\n ? (e) => removeChip(opt.value, e)\n : undefined\n }\n className=\"shrink-0\"\n />\n );\n })}\n {remaining > 0 && (\n <span className=\"shrink-0 text-xs text-[var(--malachite-text-secondary,rgb(123,123,123))]\">\n +{remaining}\n </span>\n )}\n {inlineSearchInput}\n </div>\n );\n }\n\n if (inlineSearch && selectedOptions.length === 0) {\n return inlineSearchInput;\n }\n\n if (selectedOptions.length === 0) {\n return <span className=\"text-[var(--malachite-text-placeholder)]\">{placeholder}</span>;\n }\n if (selectedOptions.length === 1) {\n return <span>{selectedOptions[0].label}</span>;\n }\n return <span>{`${selectedOptions.length} selected`}</span>;\n }, [\n selectedOptions,\n renderTrigger,\n chips,\n maxVisibleChips,\n chipsRemovable,\n disabled,\n removeChip,\n inlineSearch,\n inlineSearchInput,\n placeholder,\n disabledValues,\n ]);\n\n const emptyMessage = options.length === 0 ? 'No options available' : 'No results found';\n\n useInsertionEffect(() => {\n if (open) {\n ensureMultiSelectPanelStyles();\n }\n }, [open]);\n\n const popoverStyle: React.CSSProperties = {\n position: 'fixed',\n top: position?.top ?? 0,\n left: position?.left ?? 0,\n width: position?.width,\n background: MENU_SPECS.standard.background,\n border: MENU_SPECS.standard.border,\n borderRadius: MENU_SPECS.standard.radius,\n boxShadow: MENU_SPECS.standard.shadow,\n padding: MENU_SPECS.standard.padding,\n display: 'flex',\n flexDirection: 'column',\n gap: 4,\n maxHeight: position?.maxHeight ?? MENU_MAX_HEIGHT_PX,\n fontSize: CONTROL_TEXT_SIZE[size],\n visibility: position ? 'visible' : 'hidden',\n opacity: position ? 1 : 0,\n };\n\n // Form wrapper only when form-specific props are provided (backwards compatible).\n // `rightSideContent` renders inside it, so omitting it here would drop the link silently.\n const hasFormWrapper = !!(\n description ||\n tooltip ||\n hint ||\n rightSideContent ||\n name ||\n formControl ||\n required\n );\n\n // Only the form wrapper renders a <label>, so aria-labelledby has a target only when it\n // is present; without it the trigger falls back to aria-label or it would have no name.\n const hasLabelElement = hasFormWrapper && !!label;\n\n const coreComponent = (\n <>\n <div className=\"relative\" style={controlWidthStyle(width)}>\n {/* Nesting <input> inside <button> is invalid HTML — use div[role=combobox] for inline search */}\n <TriggerElement\n ref={triggerRef}\n id={controlId}\n triggerRole={\n inlineSearch ? 'combobox' : chips && chipsRemovable ? 'group' : 'button'\n }\n disabled={disabled || loading}\n {...{ [DROPDOWN_TRIGGER_ATTR]: '' }}\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n aria-controls={open ? listboxId : undefined}\n aria-activedescendant={\n inlineSearch && open && highlightedIndex >= 0\n ? getOptionId(highlightedIndex)\n : undefined\n }\n // aria-labelledby outranks aria-label in the accessible-name algorithm, so\n // the generated one has to be dropped for a caller's aria-label to apply.\n aria-labelledby={\n ariaLabelledBy ?? (hasLabelElement && !ariaLabel ? labelId : undefined)\n }\n aria-label={ariaLabel ?? (hasLabelElement ? undefined : label)}\n aria-invalid={error || undefined}\n aria-required={required || undefined}\n aria-describedby={describedBy}\n aria-busy={loading || undefined}\n onClick={() => {\n if (!(disabled || loading)) setOpen((v) => !v);\n }}\n onKeyDown={handleOptionNavigation}\n style={{\n transition: 'border-color 0.15s ease, box-shadow 0.15s ease',\n ...triggerVisual,\n ...style,\n }}\n className={`w-full ${TRIGGER_SIZE_CLASSES[size]} border border-solid flex items-center font-normal text-[var(--malachite-text-primary)] ${disabled || loading ? 'cursor-not-allowed' : 'cursor-pointer'} ${className}`}\n >\n <span\n className={`flex-1 min-w-0 text-left ${inlineSearch ? 'flex' : 'truncate'} ${clearable ? 'pr-[18px]' : ''}`}\n >\n {triggerLabel}\n </span>\n {loading ? (\n <span className=\"flex items-center justify-center shrink-0 size-[14px]\">\n <Spinner size=\"xxxsmall\" />\n </span>\n ) : (\n <CaretDownIcon\n size={13}\n className=\"shrink-0\"\n style={{\n color: open\n ? 'var(--malachite-text-primary, rgb(10, 10, 10))'\n : 'var(--malachite-text-placeholder, rgb(187, 187, 187))',\n transition: 'transform 0.2s ease, color 0.2s ease',\n transform: open ? 'rotate(180deg)' : 'rotate(0deg)',\n }}\n />\n )}\n </TriggerElement>\n {clearable && (\n <button\n type=\"button\"\n aria-label=\"Clear selection\"\n onClick={clearAll}\n className=\"absolute top-0 bottom-0 right-[28px] flex items-center justify-center px-[2px] leading-none bg-transparent border-none text-[var(--malachite-text-placeholder)] hover:text-[var(--malachite-text-primary)] cursor-pointer\"\n >\n ×\n </button>\n )}\n </div>\n {open &&\n createPortal(\n <div\n ref={popoverRef}\n id={listboxId}\n role=\"listbox\"\n aria-multiselectable=\"true\"\n {...overlayIdentity('multiselect')}\n style={popoverStyle}\n >\n {/* Inline styles, not Tailwind: this portals into document.body, outside the\n Shadow DOM the malachite stylesheet is adopted into. */}\n {showSearch && (\n <div\n style={{\n display: 'flex',\n alignItems: 'center',\n gap: 8,\n background: 'var(--malachite-tag-default-background, #f1f1f1)',\n borderRadius: 8,\n height: 32,\n flexShrink: 0,\n padding: '0 12px',\n }}\n >\n <SearchIcon\n size={13}\n style={{\n color: 'var(--malachite-text-placeholder, rgb(187, 187, 187))',\n flexShrink: 0,\n }}\n />\n <input\n type=\"text\"\n value={search}\n onChange={(e) => handleSearchChange(e.target.value)}\n onKeyDown={handleOptionNavigation}\n placeholder=\"Search\"\n aria-label=\"Search options\"\n autoFocus\n style={{\n flex: 1,\n background: 'transparent',\n border: 'none',\n outline: 'none',\n font: 'inherit',\n color: 'var(--malachite-text-primary, rgb(10, 10, 10))',\n minWidth: 0,\n }}\n />\n </div>\n )}\n {showSearch && (\n <div\n aria-hidden=\"true\"\n style={{\n height: 1,\n width: '100%',\n background: 'var(--malachite-card-border, rgb(232, 232, 232))',\n flexShrink: 0,\n }}\n />\n )}\n <div\n ref={listRef}\n style={{\n display: 'flex',\n flexDirection: 'column',\n gap: 2,\n overflowY: 'auto',\n overscrollBehavior: 'contain',\n minHeight: 0,\n flex: 1,\n scrollbarWidth: 'thin',\n scrollbarColor:\n 'var(--malachite-text-placeholder, rgb(187, 187, 187)) transparent',\n }}\n >\n {filteredOptions.length === 0 ? (\n // `role=\"listbox\"` admits only option/group children.\n <div role=\"presentation\" style={EMPTY_MESSAGE_STYLE}>\n {emptyMessage}\n </div>\n ) : (\n filteredOptions.map((option, index) => {\n const checked = selectedValues.has(option.value);\n const highlighted = index === highlightedIndex;\n const optLocked = !!option.disabled;\n return (\n <button\n key={option.value}\n id={getOptionId(index)}\n ref={(el) => {\n optionRefs.current[index] = el;\n }}\n type=\"button\"\n role=\"option\"\n aria-selected={checked}\n aria-disabled={optLocked || undefined}\n onClick={() => {\n toggle(option.value);\n clearSearch();\n inlineInputRef.current?.focus();\n }}\n // Exception to \"no JS for styling\": the highlight IS\n // the keyboard cursor, so a bare :hover rule would\n // light a second row the keyboard has left.\n onMouseEnter={() => setHighlightedIndex(index)}\n onMouseLeave={() => {\n if (highlightedIndex === index)\n setHighlightedIndex(-1);\n }}\n className=\"malachite-multiselect-option\"\n data-checked={checked}\n data-highlighted={highlighted}\n data-disabled={optLocked}\n style={{\n display: 'flex',\n alignItems: 'center',\n width: '100%',\n // The list scrolls; unpinned, rows compress instead.\n flexShrink: 0,\n border: 'none',\n textAlign: 'left',\n borderRadius: 8,\n padding: '8px 10px',\n font: 'inherit',\n cursor: optLocked ? 'not-allowed' : 'pointer',\n opacity: optLocked ? 0.6 : 1,\n color: checked\n ? 'var(--malachite-accent-foreground, rgb(2, 122, 66))'\n : 'var(--malachite-text-primary, rgb(10, 10, 10))',\n }}\n >\n {(() => {\n const mode = option.description\n ? (option.descriptionMode ?? 'icon')\n : null;\n const isSubtitle = mode === 'subtitle';\n const labelEl = (\n <span\n style={{\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }}\n >\n {option.label}\n </span>\n );\n\n return (\n <span\n style={{\n flex: 1,\n minWidth: 0,\n display: 'flex',\n flexDirection: isSubtitle\n ? 'column'\n : 'row',\n alignItems: isSubtitle\n ? 'flex-start'\n : 'center',\n gap: isSubtitle ? 2 : 6,\n }}\n >\n {mode === 'hover' ? (\n <Tooltip\n text={option.description}\n delay={0.6}\n maxWidth={420}\n >\n {labelEl}\n </Tooltip>\n ) : (\n labelEl\n )}\n\n {mode === 'icon' && (\n <Tooltip\n text={option.description}\n delay={0.6}\n maxWidth={420}\n >\n <span\n style={{\n cursor: 'help',\n color: 'var(--malachite-text-placeholder, rgb(187, 187, 187))',\n }}\n aria-label=\"More information\"\n onClick={(e) =>\n e.stopPropagation()\n }\n >\n {option.descriptionIcon ?? (\n <InfoFilledIcon size={14} />\n )}\n </span>\n </Tooltip>\n )}\n\n {mode === 'subtitle' && (\n <span\n style={{\n fontSize: 12,\n color: 'var(--malachite-text-secondary, rgb(123, 123, 123))',\n whiteSpace: 'normal',\n lineHeight: 1.3,\n ...(option.descriptionMaxLines\n ? {\n display:\n '-webkit-box',\n WebkitLineClamp:\n option.descriptionMaxLines,\n WebkitBoxOrient:\n 'vertical' as const,\n overflow: 'hidden',\n }\n : {}),\n }}\n >\n {option.description}\n </span>\n )}\n </span>\n );\n })()}\n {option.badge && (\n <span\n style={{\n marginLeft: 'auto',\n flexShrink: 0,\n paddingLeft: 8,\n }}\n >\n {option.badge}\n </span>\n )}\n </button>\n );\n })\n )}\n </div>\n </div>,\n document.body,\n )}\n </>\n );\n\n if (!hasFormWrapper) {\n return coreComponent;\n }\n\n return (\n <BaseFormComponent\n label={label}\n hint={hint}\n rightSideContent={rightSideContent}\n tooltip={tooltip}\n name={(name ?? '') as FieldPath<FieldValues>}\n required={required}\n requiredIndicator={requiredIndicator}\n loading={loading}\n formControl={formControl}\n description={description}\n controlId={controlId}\n labelId={labelId}\n descriptionId={descriptionId}\n hintId={hintId}\n loadingComponent={\n width === undefined ? (\n <LoadingInput heightClass={TRIGGER_SIZE_HEIGHT[size]} />\n ) : (\n <div style={controlWidthStyle(width)}>\n <LoadingInput heightClass={TRIGGER_SIZE_HEIGHT[size]} />\n </div>\n )\n }\n >\n {coreComponent}\n </BaseFormComponent>\n );\n};\n\nexport default MultiSelect;\n"],"names":["EMPTY_MESSAGE_STYLE","TRIGGER_SIZE_HEIGHT","TRIGGER_SIZE_CLASSES","CONTROL_TEXT_SIZE_CLASS","AUTO_SEARCHABLE_THRESHOLD","KEY_ARROW_DOWN","KEY_ARROW_UP","KEY_ENTER","KEY_BACKSPACE","NAV_KEYS","TriggerElement","React","triggerRole","disabled","children","props","ref","jsx","MultiSelect","options","controlledValue","defaultValue","onChange","placeholder","renderTrigger","searchable","size","width","minWidth","error","loading","label","name","description","tooltip","hint","rightSideContent","required","requiredIndicator","formControl","chips","chipsRemovable","chipsMax","inlineSearch","onSearchChange","localFilter","className","style","id","ariaLabel","ariaLabelledBy","instanceId","useId","listboxId","getOptionId","index","controlId","labelId","descriptionId","hintId","describedBy","useFormFieldIds","internalValue","setInternalValue","useState","isControlled","value","open","setOpen","position","setPosition","search","setSearch","highlightedIndex","setHighlightedIndex","triggerRef","useRef","inlineInputRef","popoverRef","listRef","useTopLayer","optionRefs","selectedValues","useMemo","selectedOptions","o","maxVisibleChips","filteredOptions","query","isUserSearching","searchRef","updateSearch","useCallback","next","fromUser","handleSearchChange","newSearch","clearSearch","useEffect","isSearchable","showSearch","updatePosition","trigger","geometry","measureMenuGeometry","_a","handleScrollOrResize","handleClickOutside","e","path","popover","popEscapeLayer","pushEscapeLayer","useLayoutEffect","observer","updateValue","isOptionDisabled","optionValue","toggle","v","disabledValues","locked","option","clearAll","removeChip","handleOptionNavigation","optionCount","scrollToOption","el","container","elTop","elBottom","containerTop","containerBottom","moveHighlight","direction","nextIndex","i","selectHighlighted","selectedValue","newIndex","handleSearchKeyDown","clearable","triggerVisual","getTriggerVisual","inlineSearchInput","triggerLabel","visible","remaining","jsxs","opt","optDisabled","Tag","emptyMessage","useInsertionEffect","ensureMultiSelectPanelStyles","popoverStyle","MENU_SPECS","MENU_MAX_HEIGHT_PX","CONTROL_TEXT_SIZE","hasFormWrapper","hasLabelElement","coreComponent","Fragment","controlWidthStyle","DROPDOWN_TRIGGER_ATTR","Spinner","CaretDownIcon","createPortal","overlayIdentity","SearchIcon","checked","highlighted","optLocked","mode","isSubtitle","labelEl","Tooltip","InfoFilledIcon","BaseFormComponent","LoadingInput"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MultiSelect.js","sources":["../../src/components/MultiSelect.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useId,\n useLayoutEffect,\n useInsertionEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport type { Control, FieldPath, FieldValues } from 'react-hook-form';\nimport BaseFormComponent, {\n type RequiredIndicator,\n type RightSideContent,\n useFormFieldIds,\n} from './BaseFormComponent';\nimport CaretDownIcon from './CustomIcons/CaretDownIcon';\nimport InfoFilledIcon from './CustomIcons/InfoFilledIcon';\nimport SearchIcon from './CustomIcons/SearchIcon';\nimport LoadingInput from './LoadingInput';\nimport Spinner from './Spinner';\nimport Tag from './Tag';\nimport Tooltip from './Tooltip';\nimport { CONTROL_TEXT_SIZE, CONTROL_TEXT_SIZE_CLASS } from './controlTextSize';\nimport { controlWidthStyle } from './controlWidth';\nimport { DROPDOWN_TRIGGER_ATTR, getTriggerVisual } from './dropdownTriggerStyle';\nimport { pushEscapeLayer } from './escapeLayers';\nimport {\n MENU_MAX_HEIGHT_PX,\n MENU_SPECS,\n type MenuGeometry,\n measureMenuGeometry,\n} from './floatingMenuGeometry';\nimport { ensureMultiSelectPanelStyles } from './optionRowStyles';\nimport { overlayIdentity } from './portalOverlay';\nimport { useTopLayer } from './topLayer';\nimport { isClamped, isCut, tooltipLines } from './truncatedLines';\n\nconst EMPTY_MESSAGE_STYLE: React.CSSProperties = {\n padding: '8px 10px',\n color: 'var(--malachite-text-secondary, rgb(123, 123, 123))',\n};\n\nexport type MultiSelectSize = 'small' | 'medium' | 'large';\n\n// Mirrors Dropdown, which is what Figma specs a select as.\nconst TRIGGER_SIZE_HEIGHT: Record<MultiSelectSize, string> = {\n small: 'h-[var(--malachite-control-height-small,28px)]',\n medium: 'h-[var(--malachite-control-height-medium,32px)]',\n large: 'h-[var(--malachite-control-height-large,42px)]',\n};\n\nconst TRIGGER_SIZE_CLASSES: Record<MultiSelectSize, string> = {\n small: `${TRIGGER_SIZE_HEIGHT.small} gap-[6px] px-2.5 ${CONTROL_TEXT_SIZE_CLASS.small} rounded-[var(--malachite-radius-10,10px)]`,\n medium: `${TRIGGER_SIZE_HEIGHT.medium} gap-[8px] px-3 ${CONTROL_TEXT_SIZE_CLASS.medium} rounded-xl`,\n large: `${TRIGGER_SIZE_HEIGHT.large} gap-[10px] px-4 ${CONTROL_TEXT_SIZE_CLASS.large} rounded-[var(--malachite-radius-xxl,14px)]`,\n};\n\nexport interface MultiSelectOption {\n value: string;\n label: React.ReactNode;\n searchText?: string;\n /** Prevent toggling or removing this option — used for mandatory/locked selections */\n disabled?: boolean;\n /** Right-aligned badge shown in the dropdown only (not in chips) */\n badge?: React.ReactNode;\n /** Description text for this option */\n description?: string;\n /** How description renders — 'icon': info icon with tooltip, 'subtitle': text below label, 'hover': tooltip on label. Default: 'icon' */\n descriptionMode?: 'icon' | 'subtitle' | 'hover';\n /** Custom icon for 'icon' mode. Default: built-in ⓘ */\n descriptionIcon?: React.ReactNode;\n /** Truncate subtitle after N lines. Only applies to 'subtitle' mode */\n descriptionMaxLines?: number;\n}\n\ninterface MultiSelectBaseProps {\n options: MultiSelectOption[];\n /** Controlled value. When provided, component is fully controlled. */\n value?: string[];\n /** Initial value for uncontrolled usage (like Dropdown's defaultValue). */\n defaultValue?: string[];\n onChange?: (next: string[]) => void;\n placeholder?: string;\n renderTrigger?: (selected: MultiSelectOption[]) => React.ReactNode;\n searchable?: boolean;\n /** 'large' (42px) for form inputs; 'medium' (32px) for toolbar chips; 'small' (28px) beside a title. */\n size?: MultiSelectSize;\n width?: string | number;\n minWidth?: number;\n disabled?: boolean;\n error?: boolean;\n loading?: boolean;\n label?: string;\n description?: string;\n tooltip?: string;\n hint?: string;\n rightSideContent?: RightSideContent;\n required?: boolean;\n requiredIndicator?: RequiredIndicator;\n /** Show selected values as chips instead of \"N selected\" text */\n chips?: boolean;\n /** Show × button on each chip to remove it (only when chips=true) */\n chipsRemovable?: boolean;\n /** Max visible chips. 'auto' = show all chips. Number = hard limit with \"+N\" badge */\n chipsMax?: number | 'auto';\n /** Search input inside the trigger field instead of external search bar */\n inlineSearch?: boolean;\n /**\n * Called with the query as typed, and with `''` whenever the component clears it — on\n * select, and on close — so a consumer's request stays in step with what is on screen.\n *\n * For a list too large to load in full: fire the request here and pass the results back\n * as `options`. Pair it with `localFilter={false}`, or the component filters the answer\n * the server already filtered. Debouncing is left to the caller, who is the only one who\n * knows what a request costs.\n */\n onSearchChange?: (query: string) => void;\n /**\n * Whether this component filters `options` itself. Default true.\n *\n * Set false when the options already reflect the query. A server commonly matches on\n * fields the label does not contain — an account found by its owner's email, say — and\n * filtering again here would hide precisely those matches.\n */\n localFilter?: boolean;\n className?: string;\n style?: React.CSSProperties;\n /** Names the trigger from the light DOM, where `htmlFor` cannot reach into the shadow root. */\n id?: string;\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n}\n\n// When formControl is provided, name is required for form registration\nexport type MultiSelectProps =\n | (MultiSelectBaseProps & {\n formControl: Control<FieldValues, unknown>;\n name: string;\n })\n | (MultiSelectBaseProps & {\n formControl?: undefined;\n name?: string;\n });\n\nconst AUTO_SEARCHABLE_THRESHOLD = 10;\n\nconst KEY_ARROW_DOWN = 'ArrowDown';\nconst KEY_ARROW_UP = 'ArrowUp';\nconst KEY_ENTER = 'Enter';\nconst KEY_BACKSPACE = 'Backspace';\nconst NAV_KEYS = new Set([KEY_ARROW_DOWN, KEY_ARROW_UP, KEY_ENTER]);\n\n// Nesting interactive elements inside <button> is invalid HTML —\n// combobox for text input (inline search), group for chip buttons, button otherwise\ninterface TriggerElementProps extends React.HTMLAttributes<HTMLElement> {\n triggerRole: 'combobox' | 'group' | 'button';\n disabled: boolean;\n children: React.ReactNode;\n}\n\nconst TriggerElement = React.forwardRef<HTMLButtonElement | HTMLDivElement, TriggerElementProps>(\n ({ triggerRole, disabled, children, ...props }, ref) => {\n if (triggerRole !== 'button') {\n return (\n <div\n ref={ref as React.Ref<HTMLDivElement>}\n role={triggerRole}\n tabIndex={disabled ? -1 : 0}\n {...(props as React.HTMLAttributes<HTMLDivElement>)}\n >\n {children}\n </div>\n );\n }\n return (\n <button\n ref={ref as React.Ref<HTMLButtonElement>}\n type=\"button\"\n disabled={disabled}\n {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n >\n {children}\n </button>\n );\n },\n);\nTriggerElement.displayName = 'TriggerElement';\n\nconst OPTION_TOOLTIP_DELAY = 0.6;\nconst OPTION_TOOLTIP_MAX_WIDTH = 420;\n\nconst MultiSelectOptionContent: React.FC<{ option: MultiSelectOption }> = ({ option }) => {\n const labelRef = useRef<HTMLSpanElement>(null);\n const subtitleRef = useRef<HTMLSpanElement>(null);\n const mode = option.description ? (option.descriptionMode ?? 'icon') : null;\n const isSubtitle = mode === 'subtitle';\n\n // Seeded all-cut: `Tooltip` skips `shouldShow` when its text is empty.\n const [cutLines, setCutLines] = useState({ label: true, subtitle: true });\n const measureLines = () => {\n const label = isCut(labelRef.current);\n const subtitle = isClamped(subtitleRef.current);\n if (!label && !subtitle && mode !== 'hover') {\n return false;\n }\n setCutLines({ label, subtitle });\n return true;\n };\n const showsDescription = mode === 'hover' || (isSubtitle && cutLines.subtitle);\n\n const withTooltip = (children: React.ReactNode) => (\n <Tooltip\n text={tooltipLines([\n ['label', cutLines.label && option.label],\n ['description', showsDescription && option.description],\n ])}\n shouldShow={measureLines}\n delay={OPTION_TOOLTIP_DELAY}\n maxWidth={OPTION_TOOLTIP_MAX_WIDTH}\n triggerAs=\"span\"\n isShrinkable\n describesTrigger={mode === 'hover'}\n >\n {children}\n </Tooltip>\n );\n\n const labelEl = (\n <span\n ref={labelRef}\n style={{\n display: 'block',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }}\n >\n {option.label}\n </span>\n );\n\n if (isSubtitle) {\n return withTooltip(\n <span\n style={{\n flex: 1,\n minWidth: 0,\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'stretch',\n gap: 2,\n }}\n >\n {labelEl}\n <span\n ref={subtitleRef}\n style={{\n fontSize: 12,\n color: 'var(--malachite-text-secondary, rgb(123, 123, 123))',\n whiteSpace: 'normal',\n lineHeight: 1.3,\n ...(option.descriptionMaxLines\n ? {\n display: '-webkit-box',\n WebkitLineClamp: option.descriptionMaxLines,\n WebkitBoxOrient: 'vertical' as const,\n overflow: 'hidden',\n }\n : {}),\n }}\n >\n {option.description}\n </span>\n </span>,\n );\n }\n\n return (\n <span\n style={{\n flex: 1,\n minWidth: 0,\n display: 'flex',\n alignItems: 'center',\n gap: 6,\n }}\n >\n {withTooltip(labelEl)}\n {mode === 'icon' && (\n <Tooltip\n text={option.description}\n delay={OPTION_TOOLTIP_DELAY}\n maxWidth={OPTION_TOOLTIP_MAX_WIDTH}\n >\n <span\n style={{\n cursor: 'help',\n color: 'var(--malachite-text-placeholder, rgb(187, 187, 187))',\n }}\n aria-label=\"More information\"\n onClick={(e) => e.stopPropagation()}\n >\n {option.descriptionIcon ?? <InfoFilledIcon size={14} />}\n </span>\n </Tooltip>\n )}\n </span>\n );\n};\n\nconst MultiSelect: React.FC<MultiSelectProps> = ({\n options,\n value: controlledValue,\n defaultValue,\n onChange,\n placeholder = 'Select',\n renderTrigger,\n searchable,\n size = 'large',\n width = 'auto',\n minWidth,\n disabled = false,\n error = false,\n loading = false,\n label,\n name,\n description,\n tooltip,\n hint,\n rightSideContent,\n required = false,\n requiredIndicator,\n formControl,\n chips = false,\n chipsRemovable = true,\n chipsMax = 'auto',\n inlineSearch = false,\n onSearchChange,\n localFilter = true,\n className = '',\n style,\n id,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n}) => {\n // Stable IDs for aria-activedescendant and aria-controls\n const instanceId = useId();\n const listboxId = `${instanceId}-listbox`;\n const getOptionId = (index: number) => `${instanceId}-option-${index}`;\n const { controlId, labelId, descriptionId, hintId, describedBy } = useFormFieldIds({\n id,\n label,\n description,\n hint,\n });\n\n // Mount-only initial value — matches native <input defaultValue> semantics\n const [internalValue, setInternalValue] = useState<string[]>(() => defaultValue ?? []);\n const isControlled = controlledValue !== undefined;\n const value = isControlled ? controlledValue : internalValue;\n\n const [open, setOpen] = useState(false);\n const [position, setPosition] = useState<MenuGeometry | null>(null);\n const [search, setSearch] = useState('');\n const [highlightedIndex, setHighlightedIndex] = useState(-1);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const inlineInputRef = useRef<HTMLInputElement>(null);\n const popoverRef = useRef<HTMLDivElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n\n useTopLayer(popoverRef, open);\n\n const optionRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n // Set lookup — `value.includes(...)` inside a filter or a per-row render is O(n),\n // making selection checks O(options x value) on every pass.\n const selectedValues = useMemo(() => new Set(value), [value]);\n\n const selectedOptions = useMemo(\n () => options.filter((o) => selectedValues.has(o.value)),\n [options, selectedValues],\n );\n\n const maxVisibleChips = typeof chipsMax === 'number' ? chipsMax : undefined;\n\n const filteredOptions = useMemo(() => {\n // The options already answer the query when the consumer is fetching them.\n if (!localFilter) return options;\n const query = search.trim().toLowerCase();\n if (!query) return options;\n return options.filter((o) => {\n const text = o.searchText ?? (typeof o.label === 'string' ? o.label : '');\n return text.toLowerCase().includes(query);\n });\n }, [options, search, localFilter]);\n\n // Programmatic search clears (after Enter) should preserve highlight position\n const isUserSearching = useRef(false);\n\n /**\n * Every change to the query goes through here, including the programmatic clears on\n * select and on close, so `onSearchChange` cannot fall out of step with what the list is\n * showing: a consumer left holding the previous query would keep serving results for a\n * search the component has already forgotten.\n *\n * The ref mirrors the state so a repeated clear does not fire the callback again — the\n * close effect runs on every close, whether or not anything was typed.\n */\n const searchRef = useRef('');\n const updateSearch = useCallback(\n (next: string, fromUser: boolean) => {\n if (searchRef.current === next) return;\n searchRef.current = next;\n if (fromUser) isUserSearching.current = true;\n setSearch(next);\n onSearchChange?.(next);\n },\n [onSearchChange],\n );\n\n const handleSearchChange = useCallback(\n (newSearch: string) => updateSearch(newSearch, true),\n [updateSearch],\n );\n\n const clearSearch = useCallback(() => updateSearch('', false), [updateSearch]);\n // biome-ignore lint/correctness/useExhaustiveDependencies: search triggers the effect, ref gates it\n useEffect(() => {\n if (isUserSearching.current) {\n setHighlightedIndex(-1);\n isUserSearching.current = false;\n }\n }, [search]);\n\n // A consumer fetching its options always needs the input, however few results came\n // back: auto-hiding it on a short list would take the search away mid-typing, exactly\n // when the query has narrowed the list to a handful.\n const isSearchable =\n searchable ?? (onSearchChange !== undefined || options.length > AUTO_SEARCHABLE_THRESHOLD);\n\n // Inline search replaces the external search bar\n const showSearch = inlineSearch ? false : isSearchable;\n\n const updatePosition = useCallback(() => {\n const trigger = triggerRef.current;\n if (!trigger) return;\n\n const geometry = measureMenuGeometry(popoverRef.current, {\n triggerRect: trigger.getBoundingClientRect(),\n preset: 'standard',\n minWidth,\n viewportWidth: window.innerWidth,\n viewportHeight: window.innerHeight,\n });\n\n setPosition(geometry);\n }, [minWidth]);\n\n useEffect(() => {\n if (!open) {\n clearSearch();\n setHighlightedIndex(-1);\n setPosition(null);\n return;\n }\n updatePosition();\n // Auto-focus inline search so user can type immediately\n if (inlineSearch) inlineInputRef.current?.focus();\n\n const handleScrollOrResize = () => updatePosition();\n const handleClickOutside = (e: MouseEvent) => {\n const path = e.composedPath();\n const trigger = triggerRef.current;\n const popover = popoverRef.current;\n if ((!trigger || !path.includes(trigger)) && (!popover || !path.includes(popover))) {\n setOpen(false);\n }\n };\n // ESC via the shared layer stack: closes only the topmost overlay.\n const popEscapeLayer = pushEscapeLayer(() => setOpen(false));\n window.addEventListener('scroll', handleScrollOrResize, true);\n window.addEventListener('resize', handleScrollOrResize);\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n window.removeEventListener('scroll', handleScrollOrResize, true);\n window.removeEventListener('resize', handleScrollOrResize);\n document.removeEventListener('mousedown', handleClickOutside);\n popEscapeLayer();\n };\n }, [open, updatePosition, inlineSearch, clearSearch]);\n\n useLayoutEffect(() => {\n if (!open) {\n return;\n }\n updatePosition();\n\n const popover = popoverRef.current;\n if (!popover || typeof ResizeObserver === 'undefined') {\n return;\n }\n const observer = new ResizeObserver(() => updatePosition());\n observer.observe(popover);\n return () => observer.disconnect();\n }, [open, updatePosition]);\n\n const updateValue = useCallback(\n (next: string[]) => {\n if (!isControlled) setInternalValue(next);\n onChange?.(next);\n },\n [isControlled, onChange],\n );\n\n const isOptionDisabled = useCallback(\n (optionValue: string) => {\n return options.some((o) => o.value === optionValue && o.disabled);\n },\n [options],\n );\n\n const toggle = useCallback(\n (optionValue: string) => {\n if (isOptionDisabled(optionValue)) return;\n if (value.includes(optionValue)) {\n updateValue(value.filter((v) => v !== optionValue));\n } else {\n updateValue([...value, optionValue]);\n }\n },\n [value, updateValue, isOptionDisabled],\n );\n\n const disabledValues = useMemo(() => {\n const locked = new Set<string>();\n for (const option of options) {\n if (option.disabled) {\n locked.add(option.value);\n }\n }\n return locked;\n }, [options]);\n\n const clearAll = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation();\n // Keep disabled (locked) options when clearing\n const locked = value.filter((v) => disabledValues.has(v));\n updateValue(locked);\n },\n [updateValue, value, disabledValues],\n );\n\n const removeChip = useCallback(\n (optionValue: string, e: React.MouseEvent) => {\n e.stopPropagation();\n if (isOptionDisabled(optionValue)) return;\n updateValue(value.filter((v) => v !== optionValue));\n },\n [value, updateValue, isOptionDisabled],\n );\n\n // Inline input lives inside trigger button — stopPropagation prevents\n // the keypress from firing twice (input → button bubble)\n const handleOptionNavigation = useCallback(\n (e: React.KeyboardEvent) => {\n if (!NAV_KEYS.has(e.key)) return;\n\n e.preventDefault();\n e.stopPropagation();\n\n if (!open) {\n setOpen(true);\n return;\n }\n\n const optionCount = filteredOptions.length;\n if (optionCount === 0) return;\n\n // Manual scroll within the list container — scrollIntoView can scroll the page\n const scrollToOption = (index: number) => {\n requestAnimationFrame(() => {\n const el = optionRefs.current[index];\n const container = listRef.current;\n if (!el || !container) return;\n\n const elTop = el.offsetTop;\n const elBottom = elTop + el.offsetHeight;\n const containerTop = container.scrollTop;\n const containerBottom = containerTop + container.clientHeight;\n\n if (elBottom > containerBottom) {\n container.scrollTo({\n top: elBottom - container.clientHeight,\n behavior: 'smooth',\n });\n } else if (elTop < containerTop) {\n container.scrollTo({ top: elTop, behavior: 'smooth' });\n }\n });\n };\n\n const moveHighlight = (direction: 1 | -1) => {\n let nextIndex = highlightedIndex;\n for (let i = 0; i < optionCount; i++) {\n nextIndex =\n direction === 1\n ? nextIndex < optionCount - 1\n ? nextIndex + 1\n : 0\n : nextIndex > 0\n ? nextIndex - 1\n : optionCount - 1;\n if (!filteredOptions[nextIndex]?.disabled) {\n scrollToOption(nextIndex);\n setHighlightedIndex(nextIndex);\n return;\n }\n }\n };\n\n const selectHighlighted = () => {\n if (highlightedIndex < 0 || highlightedIndex >= optionCount) {\n return;\n }\n if (filteredOptions[highlightedIndex]?.disabled) return;\n const selectedValue = filteredOptions[highlightedIndex].value;\n toggle(selectedValue);\n clearSearch();\n // After clearing search, filteredOptions resets to the full list —\n // re-locate the selected option so the highlight stays on it\n const newIndex = options.findIndex((o) => o.value === selectedValue);\n setHighlightedIndex(newIndex >= 0 ? newIndex : -1);\n scrollToOption(newIndex >= 0 ? newIndex : 0);\n requestAnimationFrame(() => inlineInputRef.current?.focus());\n };\n\n switch (e.key) {\n case KEY_ARROW_DOWN:\n moveHighlight(1);\n break;\n case KEY_ARROW_UP:\n moveHighlight(-1);\n break;\n case KEY_ENTER:\n selectHighlighted();\n break;\n }\n },\n [open, filteredOptions, highlightedIndex, toggle, options, clearSearch],\n );\n\n const handleSearchKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n // Empty backspace removes last chip for quick corrections\n if (e.key === KEY_BACKSPACE && search === '' && value.length > 0) {\n e.preventDefault();\n updateValue(value.slice(0, -1));\n // Keep focus on input so user stays in the dropdown context\n requestAnimationFrame(() => inlineInputRef.current?.focus());\n return;\n }\n handleOptionNavigation(e);\n },\n [handleOptionNavigation, search, value, updateValue],\n );\n\n const clearable = selectedOptions.length > 0 && !disabled && !loading;\n\n const triggerVisual = getTriggerVisual({\n disabled,\n error,\n open,\n loading,\n hasSelection: selectedOptions.length > 0,\n });\n\n // Inline search input shared between chip mode and empty state\n const inlineSearchInput = useMemo(() => {\n if (!inlineSearch) return null;\n return (\n <input\n ref={inlineInputRef}\n type=\"text\"\n value={search}\n onChange={(e) => handleSearchChange(e.target.value)}\n onKeyDown={handleSearchKeyDown}\n placeholder={selectedOptions.length === 0 ? placeholder : ''}\n // Inherits rather than naming a rung: an input does not take the parent's\n // font by default, and the trigger already sets the one its tier calls for.\n className=\"flex-1 w-full min-w-[40px] border-none outline-none bg-transparent text-[length:inherit] p-0 text-[var(--malachite-text-primary,rgb(10,10,10))]\"\n onMouseDown={(e) => {\n // Prevent trigger blur while keeping dropdown open\n e.preventDefault();\n }}\n />\n );\n }, [\n inlineSearch,\n search,\n handleSearchChange,\n handleSearchKeyDown,\n selectedOptions.length,\n placeholder,\n ]);\n\n const triggerLabel = useMemo(() => {\n if (renderTrigger && selectedOptions.length > 0) {\n return renderTrigger(selectedOptions);\n }\n\n // Chips give users direct visibility and removal of selected values\n if (chips && selectedOptions.length > 0) {\n const visible =\n maxVisibleChips != null\n ? selectedOptions.slice(0, maxVisibleChips)\n : selectedOptions;\n const remaining = selectedOptions.length - visible.length;\n return (\n <div\n className=\"flex items-center gap-1 overflow-hidden min-w-0 flex-1\"\n style={{ flexWrap: 'nowrap' }}\n >\n {visible.map((opt) => {\n const optDisabled = disabledValues.has(opt.value);\n return (\n <Tag\n key={opt.value}\n value={opt.label}\n type=\"default\"\n textTransform=\"none\"\n onRemove={\n chipsRemovable && !disabled && !optDisabled\n ? (e) => removeChip(opt.value, e)\n : undefined\n }\n className=\"shrink-0\"\n />\n );\n })}\n {remaining > 0 && (\n <span className=\"shrink-0 text-xs text-[var(--malachite-text-secondary,rgb(123,123,123))]\">\n +{remaining}\n </span>\n )}\n {inlineSearchInput}\n </div>\n );\n }\n\n if (inlineSearch && selectedOptions.length === 0) {\n return inlineSearchInput;\n }\n\n if (selectedOptions.length === 0) {\n return <span className=\"text-[var(--malachite-text-placeholder)]\">{placeholder}</span>;\n }\n if (selectedOptions.length === 1) {\n return <span>{selectedOptions[0].label}</span>;\n }\n return <span>{`${selectedOptions.length} selected`}</span>;\n }, [\n selectedOptions,\n renderTrigger,\n chips,\n maxVisibleChips,\n chipsRemovable,\n disabled,\n removeChip,\n inlineSearch,\n inlineSearchInput,\n placeholder,\n disabledValues,\n ]);\n\n const emptyMessage = options.length === 0 ? 'No options available' : 'No results found';\n\n useInsertionEffect(() => {\n if (open) {\n ensureMultiSelectPanelStyles();\n }\n }, [open]);\n\n const popoverStyle: React.CSSProperties = {\n position: 'fixed',\n top: position?.top ?? 0,\n left: position?.left ?? 0,\n width: position?.width,\n background: MENU_SPECS.standard.background,\n border: MENU_SPECS.standard.border,\n borderRadius: MENU_SPECS.standard.radius,\n boxShadow: MENU_SPECS.standard.shadow,\n padding: MENU_SPECS.standard.padding,\n display: 'flex',\n flexDirection: 'column',\n gap: 4,\n maxHeight: position?.maxHeight ?? MENU_MAX_HEIGHT_PX,\n fontSize: CONTROL_TEXT_SIZE[size],\n visibility: position ? 'visible' : 'hidden',\n opacity: position ? 1 : 0,\n };\n\n // Form wrapper only when form-specific props are provided (backwards compatible).\n // `rightSideContent` renders inside it, so omitting it here would drop the link silently.\n const hasFormWrapper = !!(\n description ||\n tooltip ||\n hint ||\n rightSideContent ||\n name ||\n formControl ||\n required\n );\n\n // Only the form wrapper renders a <label>, so aria-labelledby has a target only when it\n // is present; without it the trigger falls back to aria-label or it would have no name.\n const hasLabelElement = hasFormWrapper && !!label;\n\n const coreComponent = (\n <>\n <div className=\"relative\" style={controlWidthStyle(width)}>\n {/* Nesting <input> inside <button> is invalid HTML — use div[role=combobox] for inline search */}\n <TriggerElement\n ref={triggerRef}\n id={controlId}\n triggerRole={\n inlineSearch ? 'combobox' : chips && chipsRemovable ? 'group' : 'button'\n }\n disabled={disabled || loading}\n {...{ [DROPDOWN_TRIGGER_ATTR]: '' }}\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n aria-controls={open ? listboxId : undefined}\n aria-activedescendant={\n inlineSearch && open && highlightedIndex >= 0\n ? getOptionId(highlightedIndex)\n : undefined\n }\n // aria-labelledby outranks aria-label in the accessible-name algorithm, so\n // the generated one has to be dropped for a caller's aria-label to apply.\n aria-labelledby={\n ariaLabelledBy ?? (hasLabelElement && !ariaLabel ? labelId : undefined)\n }\n aria-label={ariaLabel ?? (hasLabelElement ? undefined : label)}\n aria-invalid={error || undefined}\n aria-required={required || undefined}\n aria-describedby={describedBy}\n aria-busy={loading || undefined}\n onClick={() => {\n if (!(disabled || loading)) setOpen((v) => !v);\n }}\n onKeyDown={handleOptionNavigation}\n style={{\n transition: 'border-color 0.15s ease, box-shadow 0.15s ease',\n ...triggerVisual,\n ...style,\n }}\n className={`w-full ${TRIGGER_SIZE_CLASSES[size]} border border-solid flex items-center font-normal text-[var(--malachite-text-primary)] ${disabled || loading ? 'cursor-not-allowed' : 'cursor-pointer'} ${className}`}\n >\n <span\n className={`flex-1 min-w-0 text-left ${inlineSearch ? 'flex' : 'truncate'} ${clearable ? 'pr-[18px]' : ''}`}\n >\n {triggerLabel}\n </span>\n {loading ? (\n <span className=\"flex items-center justify-center shrink-0 size-[14px]\">\n <Spinner size=\"xxxsmall\" />\n </span>\n ) : (\n <CaretDownIcon\n size={13}\n className=\"shrink-0\"\n style={{\n color: open\n ? 'var(--malachite-text-primary, rgb(10, 10, 10))'\n : 'var(--malachite-text-placeholder, rgb(187, 187, 187))',\n transition: 'transform 0.2s ease, color 0.2s ease',\n transform: open ? 'rotate(180deg)' : 'rotate(0deg)',\n }}\n />\n )}\n </TriggerElement>\n {clearable && (\n <button\n type=\"button\"\n aria-label=\"Clear selection\"\n onClick={clearAll}\n className=\"absolute top-0 bottom-0 right-[28px] flex items-center justify-center px-[2px] leading-none bg-transparent border-none text-[var(--malachite-text-placeholder)] hover:text-[var(--malachite-text-primary)] cursor-pointer\"\n >\n ×\n </button>\n )}\n </div>\n {open &&\n createPortal(\n <div\n ref={popoverRef}\n id={listboxId}\n role=\"listbox\"\n aria-multiselectable=\"true\"\n {...overlayIdentity('multiselect')}\n style={popoverStyle}\n >\n {/* Inline styles, not Tailwind: this portals into document.body, outside the\n Shadow DOM the malachite stylesheet is adopted into. */}\n {showSearch && (\n <div\n style={{\n display: 'flex',\n alignItems: 'center',\n gap: 8,\n background: 'var(--malachite-tag-default-background, #f1f1f1)',\n borderRadius: 8,\n height: 32,\n flexShrink: 0,\n padding: '0 12px',\n }}\n >\n <SearchIcon\n size={13}\n style={{\n color: 'var(--malachite-text-placeholder, rgb(187, 187, 187))',\n flexShrink: 0,\n }}\n />\n <input\n type=\"text\"\n value={search}\n onChange={(e) => handleSearchChange(e.target.value)}\n onKeyDown={handleOptionNavigation}\n placeholder=\"Search\"\n aria-label=\"Search options\"\n autoFocus\n style={{\n flex: 1,\n background: 'transparent',\n border: 'none',\n outline: 'none',\n font: 'inherit',\n color: 'var(--malachite-text-primary, rgb(10, 10, 10))',\n minWidth: 0,\n }}\n />\n </div>\n )}\n {showSearch && (\n <div\n aria-hidden=\"true\"\n style={{\n height: 1,\n width: '100%',\n background: 'var(--malachite-card-border, rgb(232, 232, 232))',\n flexShrink: 0,\n }}\n />\n )}\n <div\n ref={listRef}\n style={{\n display: 'flex',\n flexDirection: 'column',\n gap: 2,\n overflowY: 'auto',\n overscrollBehavior: 'contain',\n minHeight: 0,\n flex: 1,\n scrollbarWidth: 'thin',\n scrollbarColor:\n 'var(--malachite-text-placeholder, rgb(187, 187, 187)) transparent',\n }}\n >\n {filteredOptions.length === 0 ? (\n // `role=\"listbox\"` admits only option/group children.\n <div role=\"presentation\" style={EMPTY_MESSAGE_STYLE}>\n {emptyMessage}\n </div>\n ) : (\n filteredOptions.map((option, index) => {\n const checked = selectedValues.has(option.value);\n const highlighted = index === highlightedIndex;\n const optLocked = !!option.disabled;\n return (\n <button\n key={option.value}\n id={getOptionId(index)}\n ref={(el) => {\n optionRefs.current[index] = el;\n }}\n type=\"button\"\n role=\"option\"\n aria-selected={checked}\n aria-disabled={optLocked || undefined}\n onClick={() => {\n toggle(option.value);\n clearSearch();\n inlineInputRef.current?.focus();\n }}\n // Exception to \"no JS for styling\": the highlight IS\n // the keyboard cursor, so a bare :hover rule would\n // light a second row the keyboard has left.\n onMouseEnter={() => setHighlightedIndex(index)}\n onMouseLeave={() => {\n if (highlightedIndex === index)\n setHighlightedIndex(-1);\n }}\n className=\"malachite-multiselect-option\"\n data-checked={checked}\n data-highlighted={highlighted}\n data-disabled={optLocked}\n style={{\n display: 'flex',\n alignItems: 'center',\n width: '100%',\n // The list scrolls; unpinned, rows compress instead.\n flexShrink: 0,\n border: 'none',\n textAlign: 'left',\n borderRadius: 8,\n padding: '8px 10px',\n font: 'inherit',\n cursor: optLocked ? 'not-allowed' : 'pointer',\n opacity: optLocked ? 0.6 : 1,\n color: checked\n ? 'var(--malachite-accent-foreground, rgb(2, 122, 66))'\n : 'var(--malachite-text-primary, rgb(10, 10, 10))',\n }}\n >\n <MultiSelectOptionContent option={option} />\n {option.badge && (\n <span\n style={{\n marginLeft: 'auto',\n flexShrink: 0,\n paddingLeft: 8,\n }}\n >\n {option.badge}\n </span>\n )}\n </button>\n );\n })\n )}\n </div>\n </div>,\n document.body,\n )}\n </>\n );\n\n if (!hasFormWrapper) {\n return coreComponent;\n }\n\n return (\n <BaseFormComponent\n label={label}\n hint={hint}\n rightSideContent={rightSideContent}\n tooltip={tooltip}\n name={(name ?? '') as FieldPath<FieldValues>}\n required={required}\n requiredIndicator={requiredIndicator}\n loading={loading}\n formControl={formControl}\n description={description}\n controlId={controlId}\n labelId={labelId}\n descriptionId={descriptionId}\n hintId={hintId}\n loadingComponent={\n width === undefined ? (\n <LoadingInput heightClass={TRIGGER_SIZE_HEIGHT[size]} />\n ) : (\n <div style={controlWidthStyle(width)}>\n <LoadingInput heightClass={TRIGGER_SIZE_HEIGHT[size]} />\n </div>\n )\n }\n >\n {coreComponent}\n </BaseFormComponent>\n );\n};\n\nexport default MultiSelect;\n"],"names":["EMPTY_MESSAGE_STYLE","TRIGGER_SIZE_HEIGHT","TRIGGER_SIZE_CLASSES","CONTROL_TEXT_SIZE_CLASS","AUTO_SEARCHABLE_THRESHOLD","KEY_ARROW_DOWN","KEY_ARROW_UP","KEY_ENTER","KEY_BACKSPACE","NAV_KEYS","TriggerElement","React","triggerRole","disabled","children","props","ref","jsx","OPTION_TOOLTIP_DELAY","OPTION_TOOLTIP_MAX_WIDTH","MultiSelectOptionContent","option","labelRef","useRef","subtitleRef","mode","isSubtitle","cutLines","setCutLines","useState","measureLines","label","isCut","subtitle","isClamped","showsDescription","withTooltip","Tooltip","tooltipLines","labelEl","jsxs","e","InfoFilledIcon","MultiSelect","options","controlledValue","defaultValue","onChange","placeholder","renderTrigger","searchable","size","width","minWidth","error","loading","name","description","tooltip","hint","rightSideContent","required","requiredIndicator","formControl","chips","chipsRemovable","chipsMax","inlineSearch","onSearchChange","localFilter","className","style","id","ariaLabel","ariaLabelledBy","instanceId","useId","listboxId","getOptionId","index","controlId","labelId","descriptionId","hintId","describedBy","useFormFieldIds","internalValue","setInternalValue","isControlled","value","open","setOpen","position","setPosition","search","setSearch","highlightedIndex","setHighlightedIndex","triggerRef","inlineInputRef","popoverRef","listRef","useTopLayer","optionRefs","selectedValues","useMemo","selectedOptions","o","maxVisibleChips","filteredOptions","query","isUserSearching","searchRef","updateSearch","useCallback","next","fromUser","handleSearchChange","newSearch","clearSearch","useEffect","isSearchable","showSearch","updatePosition","trigger","geometry","measureMenuGeometry","_a","handleScrollOrResize","handleClickOutside","path","popover","popEscapeLayer","pushEscapeLayer","useLayoutEffect","observer","updateValue","isOptionDisabled","optionValue","toggle","v","disabledValues","locked","clearAll","removeChip","handleOptionNavigation","optionCount","scrollToOption","el","container","elTop","elBottom","containerTop","containerBottom","moveHighlight","direction","nextIndex","i","selectHighlighted","selectedValue","newIndex","handleSearchKeyDown","clearable","triggerVisual","getTriggerVisual","inlineSearchInput","triggerLabel","visible","remaining","opt","optDisabled","Tag","emptyMessage","useInsertionEffect","ensureMultiSelectPanelStyles","popoverStyle","MENU_SPECS","MENU_MAX_HEIGHT_PX","CONTROL_TEXT_SIZE","hasFormWrapper","hasLabelElement","coreComponent","Fragment","controlWidthStyle","DROPDOWN_TRIGGER_ATTR","Spinner","CaretDownIcon","createPortal","overlayIdentity","SearchIcon","checked","highlighted","optLocked","BaseFormComponent","LoadingInput"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuCA,MAAMA,KAA2C;AAAA,EAC7C,SAAS;AAAA,EACT,OAAO;AACX,GAKMC,IAAuD;AAAA,EACzD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACX,GAEMC,KAAwD;AAAA,EAC1D,OAAO,GAAGD,EAAoB,KAAK,qBAAqBE,GAAwB,KAAK;AAAA,EACrF,QAAQ,GAAGF,EAAoB,MAAM,mBAAmBE,GAAwB,MAAM;AAAA,EACtF,OAAO,GAAGF,EAAoB,KAAK,oBAAoBE,GAAwB,KAAK;AACxF,GAyFMC,KAA4B,IAE5BC,KAAiB,aACjBC,KAAe,WACfC,KAAY,SACZC,KAAgB,aAChBC,KAAW,oBAAI,IAAI,CAACJ,IAAgBC,IAAcC,EAAS,CAAC,GAU5DG,KAAiBC,GAAM;AAAA,EACzB,CAAC,EAAE,aAAAC,GAAa,UAAAC,GAAU,UAAAC,GAAU,GAAGC,EAAA,GAASC,MACxCJ,MAAgB,WAEZ,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAD;AAAA,MACA,MAAMJ;AAAA,MACN,UAAUC,IAAW,KAAK;AAAA,MACzB,GAAIE;AAAA,MAEJ,UAAAD;AAAA,IAAA;AAAA,EAAA,IAKT,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAD;AAAA,MACA,MAAK;AAAA,MACL,UAAAH;AAAA,MACC,GAAIE;AAAA,MAEJ,UAAAD;AAAA,IAAA;AAAA,EAAA;AAIjB;AACAJ,GAAe,cAAc;AAE7B,MAAMQ,KAAuB,KACvBC,KAA2B,KAE3BC,KAAoE,CAAC,EAAE,QAAAC,QAAa;AACtF,QAAMC,IAAWC,EAAwB,IAAI,GACvCC,IAAcD,EAAwB,IAAI,GAC1CE,IAAOJ,EAAO,cAAeA,EAAO,mBAAmB,SAAU,MACjEK,IAAaD,MAAS,YAGtB,CAACE,GAAUC,CAAW,IAAIC,EAAS,EAAE,OAAO,IAAM,UAAU,IAAM,GAClEC,IAAe,MAAM;AACvB,UAAMC,IAAQC,GAAMV,EAAS,OAAO,GAC9BW,IAAWC,GAAUV,EAAY,OAAO;AAC9C,WAAI,CAACO,KAAS,CAACE,KAAYR,MAAS,UACzB,MAEXG,EAAY,EAAE,OAAAG,GAAO,UAAAE,GAAU,GACxB;AAAA,EACX,GACME,IAAmBV,MAAS,WAAYC,KAAcC,EAAS,UAE/DS,IAAc,CAACtB,MACjB,gBAAAG;AAAA,IAACoB;AAAA,IAAA;AAAA,MACG,MAAMC,GAAa;AAAA,QACf,CAAC,SAASX,EAAS,SAASN,EAAO,KAAK;AAAA,QACxC,CAAC,eAAec,KAAoBd,EAAO,WAAW;AAAA,MAAA,CACzD;AAAA,MACD,YAAYS;AAAA,MACZ,OAAOZ;AAAA,MACP,UAAUC;AAAA,MACV,WAAU;AAAA,MACV,cAAY;AAAA,MACZ,kBAAkBM,MAAS;AAAA,MAE1B,UAAAX;AAAA,IAAA;AAAA,EAAA,GAIHyB,IACF,gBAAAtB;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKK;AAAA,MACL,OAAO;AAAA,QACH,SAAS;AAAA,QACT,UAAU;AAAA,QACV,cAAc;AAAA,QACd,YAAY;AAAA,MAAA;AAAA,MAGf,UAAAD,EAAO;AAAA,IAAA;AAAA,EAAA;AAIhB,SAAIK,IACOU;AAAA,IACH,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,OAAO;AAAA,UACH,MAAM;AAAA,UACN,UAAU;AAAA,UACV,SAAS;AAAA,UACT,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,KAAK;AAAA,QAAA;AAAA,QAGR,UAAA;AAAA,UAAAD;AAAA,UACD,gBAAAtB;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,KAAKO;AAAA,cACL,OAAO;AAAA,gBACH,UAAU;AAAA,gBACV,OAAO;AAAA,gBACP,YAAY;AAAA,gBACZ,YAAY;AAAA,gBACZ,GAAIH,EAAO,sBACL;AAAA,kBACI,SAAS;AAAA,kBACT,iBAAiBA,EAAO;AAAA,kBACxB,iBAAiB;AAAA,kBACjB,UAAU;AAAA,gBAAA,IAEd,CAAA;AAAA,cAAC;AAAA,cAGV,UAAAA,EAAO;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IAAA;AAAA,EACJ,IAKJ,gBAAAmB;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,OAAO;AAAA,QACH,MAAM;AAAA,QACN,UAAU;AAAA,QACV,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,KAAK;AAAA,MAAA;AAAA,MAGR,UAAA;AAAA,QAAAJ,EAAYG,CAAO;AAAA,QACnBd,MAAS,UACN,gBAAAR;AAAA,UAACoB;AAAA,UAAA;AAAA,YACG,MAAMhB,EAAO;AAAA,YACb,OAAOH;AAAA,YACP,UAAUC;AAAA,YAEV,UAAA,gBAAAF;AAAA,cAAC;AAAA,cAAA;AAAA,gBACG,OAAO;AAAA,kBACH,QAAQ;AAAA,kBACR,OAAO;AAAA,gBAAA;AAAA,gBAEX,cAAW;AAAA,gBACX,SAAS,CAACwB,MAAMA,EAAE,gBAAA;AAAA,gBAEjB,UAAApB,EAAO,mBAAmB,gBAAAJ,EAACyB,IAAA,EAAe,MAAM,GAAA,CAAI;AAAA,cAAA;AAAA,YAAA;AAAA,UACzD;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAIhB,GAEMC,KAA0C,CAAC;AAAA,EAC7C,SAAAC;AAAA,EACA,OAAOC;AAAA,EACP,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,eAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,UAAAxC,IAAW;AAAA,EACX,OAAAyC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,OAAAxB;AAAA,EACA,MAAAyB;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,mBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC,KAAQ;AAAA,EACR,gBAAAC,KAAiB;AAAA,EACjB,UAAAC,KAAW;AAAA,EACX,cAAAC,IAAe;AAAA,EACf,gBAAAC;AAAA,EACA,aAAAC,KAAc;AAAA,EACd,WAAAC,KAAY;AAAA,EACZ,OAAAC;AAAA,EACA,IAAAC;AAAA,EACA,cAAcC;AAAA,EACd,mBAAmBC;AACvB,MAAM;AAEF,QAAMC,KAAaC,GAAA,GACbC,KAAY,GAAGF,EAAU,YACzBG,KAAc,CAACC,MAAkB,GAAGJ,EAAU,WAAWI,CAAK,IAC9D,EAAE,WAAAC,IAAW,SAAAC,IAAS,eAAAC,IAAe,QAAAC,IAAQ,aAAAC,GAAA,IAAgBC,GAAgB;AAAA,IAC/E,IAAAb;AAAA,IACA,OAAAzC;AAAA,IACA,aAAA0B;AAAA,IACA,MAAAE;AAAA,EAAA,CACH,GAGK,CAAC2B,IAAeC,EAAgB,IAAI1D,EAAmB,MAAMiB,KAAgB,EAAE,GAC/E0C,KAAe3C,MAAoB,QACnC4C,IAAQD,KAAe3C,IAAkByC,IAEzC,CAACI,GAAMC,CAAO,IAAI9D,EAAS,EAAK,GAChC,CAAC+D,GAAUC,EAAW,IAAIhE,EAA8B,IAAI,GAC5D,CAACiE,GAAQC,EAAS,IAAIlE,EAAS,EAAE,GACjC,CAACmE,GAAkBC,CAAmB,IAAIpE,EAAS,EAAE,GACrDqE,KAAa3E,EAA0B,IAAI,GAC3C4E,IAAiB5E,EAAyB,IAAI,GAC9C6E,IAAa7E,EAAuB,IAAI,GACxC8E,KAAU9E,EAAuB,IAAI;AAE3C,EAAA+E,GAAYF,GAAYV,CAAI;AAE5B,QAAMa,KAAahF,EAAqC,EAAE,GAIpDiF,KAAiBC,EAAQ,MAAM,IAAI,IAAIhB,CAAK,GAAG,CAACA,CAAK,CAAC,GAEtDiB,IAAkBD;AAAA,IACpB,MAAM7D,EAAQ,OAAO,CAAC+D,MAAMH,GAAe,IAAIG,EAAE,KAAK,CAAC;AAAA,IACvD,CAAC/D,GAAS4D,EAAc;AAAA,EAAA,GAGtBI,KAAkB,OAAO1C,MAAa,WAAWA,KAAW,QAE5D2C,IAAkBJ,EAAQ,MAAM;AAElC,QAAI,CAACpC,GAAa,QAAOzB;AACzB,UAAMkE,IAAQhB,EAAO,KAAA,EAAO,YAAA;AAC5B,WAAKgB,IACElE,EAAQ,OAAO,CAAC+D,OACNA,EAAE,eAAe,OAAOA,EAAE,SAAU,WAAWA,EAAE,QAAQ,KAC1D,cAAc,SAASG,CAAK,CAC3C,IAJkBlE;AAAA,EAKvB,GAAG,CAACA,GAASkD,GAAQzB,EAAW,CAAC,GAG3B0C,KAAkBxF,EAAO,EAAK,GAW9ByF,KAAYzF,EAAO,EAAE,GACrB0F,IAAeC;AAAA,IACjB,CAACC,GAAcC,MAAsB;AACjC,MAAIJ,GAAU,YAAYG,MAC1BH,GAAU,UAAUG,GAChBC,SAA0B,UAAU,KACxCrB,GAAUoB,CAAI,GACd/C,KAAA,QAAAA,EAAiB+C;AAAA,IACrB;AAAA,IACA,CAAC/C,CAAc;AAAA,EAAA,GAGbiD,KAAqBH;AAAA,IACvB,CAACI,MAAsBL,EAAaK,GAAW,EAAI;AAAA,IACnD,CAACL,CAAY;AAAA,EAAA,GAGXM,IAAcL,EAAY,MAAMD,EAAa,IAAI,EAAK,GAAG,CAACA,CAAY,CAAC;AAE7E,EAAAO,GAAU,MAAM;AACZ,IAAIT,GAAgB,YAChBd,EAAoB,EAAE,GACtBc,GAAgB,UAAU;AAAA,EAElC,GAAG,CAACjB,CAAM,CAAC;AAKX,QAAM2B,KACFvE,MAAekB,MAAmB,UAAaxB,EAAQ,SAASxC,KAG9DsH,KAAavD,IAAe,KAAQsD,IAEpCE,IAAiBT,EAAY,MAAM;AACrC,UAAMU,IAAU1B,GAAW;AAC3B,QAAI,CAAC0B,EAAS;AAEd,UAAMC,IAAWC,GAAoB1B,EAAW,SAAS;AAAA,MACrD,aAAawB,EAAQ,sBAAA;AAAA,MACrB,QAAQ;AAAA,MACR,UAAAvE;AAAA,MACA,eAAe,OAAO;AAAA,MACtB,gBAAgB,OAAO;AAAA,IAAA,CAC1B;AAED,IAAAwC,GAAYgC,CAAQ;AAAA,EACxB,GAAG,CAACxE,CAAQ,CAAC;AAEb,EAAAmE,GAAU,MAAM;;AACZ,QAAI,CAAC9B,GAAM;AACP,MAAA6B,EAAA,GACAtB,EAAoB,EAAE,GACtBJ,GAAY,IAAI;AAChB;AAAA,IACJ;AACA,IAAA8B,EAAA,GAEIxD,OAAc4D,IAAA5B,EAAe,YAAf,QAAA4B,EAAwB;AAE1C,UAAMC,IAAuB,MAAML,EAAA,GAC7BM,IAAqB,CAACxF,MAAkB;AAC1C,YAAMyF,IAAOzF,EAAE,aAAA,GACTmF,IAAU1B,GAAW,SACrBiC,IAAU/B,EAAW;AAC3B,OAAK,CAACwB,KAAW,CAACM,EAAK,SAASN,CAAO,OAAO,CAACO,KAAW,CAACD,EAAK,SAASC,CAAO,MAC5ExC,EAAQ,EAAK;AAAA,IAErB,GAEMyC,IAAiBC,GAAgB,MAAM1C,EAAQ,EAAK,CAAC;AAC3D,kBAAO,iBAAiB,UAAUqC,GAAsB,EAAI,GAC5D,OAAO,iBAAiB,UAAUA,CAAoB,GACtD,SAAS,iBAAiB,aAAaC,CAAkB,GAClD,MAAM;AACT,aAAO,oBAAoB,UAAUD,GAAsB,EAAI,GAC/D,OAAO,oBAAoB,UAAUA,CAAoB,GACzD,SAAS,oBAAoB,aAAaC,CAAkB,GAC5DG,EAAA;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC1C,GAAMiC,GAAgBxD,GAAcoD,CAAW,CAAC,GAEpDe,GAAgB,MAAM;AAClB,QAAI,CAAC5C;AACD;AAEJ,IAAAiC,EAAA;AAEA,UAAMQ,IAAU/B,EAAW;AAC3B,QAAI,CAAC+B,KAAW,OAAO,iBAAmB;AACtC;AAEJ,UAAMI,IAAW,IAAI,eAAe,MAAMZ,GAAgB;AAC1D,WAAAY,EAAS,QAAQJ,CAAO,GACjB,MAAMI,EAAS,WAAA;AAAA,EAC1B,GAAG,CAAC7C,GAAMiC,CAAc,CAAC;AAEzB,QAAMa,IAActB;AAAA,IAChB,CAACC,MAAmB;AAChB,MAAK3B,MAAcD,GAAiB4B,CAAI,GACxCpE,KAAA,QAAAA,EAAWoE;AAAA,IACf;AAAA,IACA,CAAC3B,IAAczC,CAAQ;AAAA,EAAA,GAGrB0F,IAAmBvB;AAAA,IACrB,CAACwB,MACU9F,EAAQ,KAAK,CAAC+D,MAAMA,EAAE,UAAU+B,KAAe/B,EAAE,QAAQ;AAAA,IAEpE,CAAC/D,CAAO;AAAA,EAAA,GAGN+F,KAASzB;AAAA,IACX,CAACwB,MAAwB;AACrB,MAAID,EAAiBC,CAAW,MAC5BjD,EAAM,SAASiD,CAAW,IAC1BF,EAAY/C,EAAM,OAAO,CAACmD,MAAMA,MAAMF,CAAW,CAAC,IAElDF,EAAY,CAAC,GAAG/C,GAAOiD,CAAW,CAAC;AAAA,IAE3C;AAAA,IACA,CAACjD,GAAO+C,GAAaC,CAAgB;AAAA,EAAA,GAGnCI,IAAiBpC,EAAQ,MAAM;AACjC,UAAMqC,wBAAa,IAAA;AACnB,eAAWzH,KAAUuB;AACjB,MAAIvB,EAAO,YACPyH,EAAO,IAAIzH,EAAO,KAAK;AAG/B,WAAOyH;AAAA,EACX,GAAG,CAAClG,CAAO,CAAC,GAENmG,KAAW7B;AAAA,IACb,CAAC,MAAwB;AACrB,QAAE,gBAAA;AAEF,YAAM4B,IAASrD,EAAM,OAAO,CAACmD,MAAMC,EAAe,IAAID,CAAC,CAAC;AACxD,MAAAJ,EAAYM,CAAM;AAAA,IACtB;AAAA,IACA,CAACN,GAAa/C,GAAOoD,CAAc;AAAA,EAAA,GAGjCG,KAAa9B;AAAA,IACf,CAACwB,GAAqBjG,MAAwB;AAE1C,MADAA,EAAE,gBAAA,GACE,CAAAgG,EAAiBC,CAAW,KAChCF,EAAY/C,EAAM,OAAO,CAACmD,MAAMA,MAAMF,CAAW,CAAC;AAAA,IACtD;AAAA,IACA,CAACjD,GAAO+C,GAAaC,CAAgB;AAAA,EAAA,GAKnCQ,IAAyB/B;AAAA,IAC3B,CAAC,MAA2B;AACxB,UAAI,CAACzG,GAAS,IAAI,EAAE,GAAG,EAAG;AAK1B,UAHA,EAAE,eAAA,GACF,EAAE,gBAAA,GAEE,CAACiF,GAAM;AACP,QAAAC,EAAQ,EAAI;AACZ;AAAA,MACJ;AAEA,YAAMuD,IAAcrC,EAAgB;AACpC,UAAIqC,MAAgB,EAAG;AAGvB,YAAMC,IAAiB,CAACpE,MAAkB;AACtC,8BAAsB,MAAM;AACxB,gBAAMqE,IAAK7C,GAAW,QAAQxB,CAAK,GAC7BsE,IAAYhD,GAAQ;AAC1B,cAAI,CAAC+C,KAAM,CAACC,EAAW;AAEvB,gBAAMC,IAAQF,EAAG,WACXG,KAAWD,IAAQF,EAAG,cACtBI,KAAeH,EAAU,WACzBI,KAAkBD,KAAeH,EAAU;AAEjD,UAAIE,KAAWE,KACXJ,EAAU,SAAS;AAAA,YACf,KAAKE,KAAWF,EAAU;AAAA,YAC1B,UAAU;AAAA,UAAA,CACb,IACMC,IAAQE,MACfH,EAAU,SAAS,EAAE,KAAKC,GAAO,UAAU,UAAU;AAAA,QAE7D,CAAC;AAAA,MACL,GAEMI,IAAgB,CAACC,MAAsB;;AACzC,YAAIC,IAAY5D;AAChB,iBAAS6D,IAAI,GAAGA,IAAIX,GAAaW;AAS7B,cARAD,IACID,MAAc,IACRC,IAAYV,IAAc,IACtBU,IAAY,IACZ,IACJA,IAAY,IACVA,IAAY,IACZV,IAAc,GACtB,GAACnB,IAAAlB,EAAgB+C,CAAS,MAAzB,QAAA7B,EAA4B,WAAU;AACvC,YAAAoB,EAAeS,CAAS,GACxB3D,EAAoB2D,CAAS;AAC7B;AAAA,UACJ;AAAA,MAER,GAEME,IAAoB,MAAM;;AAI5B,YAHI9D,IAAmB,KAAKA,KAAoBkD,MAG5CnB,IAAAlB,EAAgBb,CAAgB,MAAhC,QAAA+B,EAAmC,SAAU;AACjD,cAAMgC,IAAgBlD,EAAgBb,CAAgB,EAAE;AACxD,QAAA2C,GAAOoB,CAAa,GACpBxC,EAAA;AAGA,cAAMyC,IAAWpH,EAAQ,UAAU,CAAC+D,MAAMA,EAAE,UAAUoD,CAAa;AACnE,QAAA9D,EAAoB+D,KAAY,IAAIA,IAAW,EAAE,GACjDb,EAAea,KAAY,IAAIA,IAAW,CAAC,GAC3C,sBAAsB,MAAA;;AAAM,kBAAAjC,IAAA5B,EAAe,YAAf,gBAAA4B,EAAwB;AAAA,SAAO;AAAA,MAC/D;AAEA,cAAQ,EAAE,KAAA;AAAA,QACN,KAAK1H;AACD,UAAAqJ,EAAc,CAAC;AACf;AAAA,QACJ,KAAKpJ;AACD,UAAAoJ,EAAc,EAAE;AAChB;AAAA,QACJ,KAAKnJ;AACD,UAAAuJ,EAAA;AACA;AAAA,MAAA;AAAA,IAEZ;AAAA,IACA,CAACpE,GAAMmB,GAAiBb,GAAkB2C,IAAQ/F,GAAS2E,CAAW;AAAA,EAAA,GAGpE0C,KAAsB/C;AAAA,IACxB,CAAC,MAA6C;AAE1C,UAAI,EAAE,QAAQ1G,MAAiBsF,MAAW,MAAML,EAAM,SAAS,GAAG;AAC9D,UAAE,eAAA,GACF+C,EAAY/C,EAAM,MAAM,GAAG,EAAE,CAAC,GAE9B,sBAAsB,MAAA;;AAAM,kBAAAsC,IAAA5B,EAAe,YAAf,gBAAA4B,EAAwB;AAAA,SAAO;AAC3D;AAAA,MACJ;AACA,MAAAkB,EAAuB,CAAC;AAAA,IAC5B;AAAA,IACA,CAACA,GAAwBnD,GAAQL,GAAO+C,CAAW;AAAA,EAAA,GAGjD0B,KAAYxD,EAAgB,SAAS,KAAK,CAAC7F,KAAY,CAAC0C,GAExD4G,KAAgBC,GAAiB;AAAA,IACnC,UAAAvJ;AAAA,IACA,OAAAyC;AAAA,IACA,MAAAoC;AAAA,IACA,SAAAnC;AAAA,IACA,cAAcmD,EAAgB,SAAS;AAAA,EAAA,CAC1C,GAGK2D,KAAoB5D,EAAQ,MACzBtC,IAED,gBAAAlD;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKkF;AAAA,MACL,MAAK;AAAA,MACL,OAAOL;AAAA,MACP,UAAU,CAAC,MAAMuB,GAAmB,EAAE,OAAO,KAAK;AAAA,MAClD,WAAW4C;AAAA,MACX,aAAavD,EAAgB,WAAW,IAAI1D,IAAc;AAAA,MAG1D,WAAU;AAAA,MACV,aAAa,CAAC,MAAM;AAEhB,UAAE,eAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAAA,IAfkB,MAkB3B;AAAA,IACCmB;AAAA,IACA2B;AAAA,IACAuB;AAAA,IACA4C;AAAA,IACAvD,EAAgB;AAAA,IAChB1D;AAAA,EAAA,CACH,GAEKsH,KAAe7D,EAAQ,MAAM;AAC/B,QAAIxD,KAAiByD,EAAgB,SAAS;AAC1C,aAAOzD,EAAcyD,CAAe;AAIxC,QAAI1C,MAAS0C,EAAgB,SAAS,GAAG;AACrC,YAAM6D,IACF3D,MAAmB,OACbF,EAAgB,MAAM,GAAGE,EAAe,IACxCF,GACJ8D,IAAY9D,EAAgB,SAAS6D,EAAQ;AACnD,aACI,gBAAA/H;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,OAAO,EAAE,UAAU,SAAA;AAAA,UAElB,UAAA;AAAA,YAAA+H,EAAQ,IAAI,CAACE,MAAQ;AAClB,oBAAMC,IAAc7B,EAAe,IAAI4B,EAAI,KAAK;AAChD,qBACI,gBAAAxJ;AAAA,gBAAC0J;AAAA,gBAAA;AAAA,kBAEG,OAAOF,EAAI;AAAA,kBACX,MAAK;AAAA,kBACL,eAAc;AAAA,kBACd,UACIxG,MAAkB,CAACpD,KAAY,CAAC6J,IAC1B,CAACjI,MAAMuG,GAAWyB,EAAI,OAAOhI,CAAC,IAC9B;AAAA,kBAEV,WAAU;AAAA,gBAAA;AAAA,gBATLgI,EAAI;AAAA,cAAA;AAAA,YAYrB,CAAC;AAAA,YACAD,IAAY,KACT,gBAAAhI,EAAC,QAAA,EAAK,WAAU,4EAA2E,UAAA;AAAA,cAAA;AAAA,cACrFgI;AAAA,YAAA,GACN;AAAA,YAEHH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGb;AAEA,WAAIlG,KAAgBuC,EAAgB,WAAW,IACpC2D,KAGP3D,EAAgB,WAAW,IACpB,gBAAAzF,EAAC,QAAA,EAAK,WAAU,4CAA4C,UAAA+B,GAAY,IAE/E0D,EAAgB,WAAW,IACpB,gBAAAzF,EAAC,QAAA,EAAM,UAAAyF,EAAgB,CAAC,EAAE,OAAM,IAEpC,gBAAAzF,EAAC,QAAA,EAAM,UAAA,GAAGyF,EAAgB,MAAM,aAAY;AAAA,EACvD,GAAG;AAAA,IACCA;AAAA,IACAzD;AAAA,IACAe;AAAA,IACA4C;AAAA,IACA3C;AAAA,IACApD;AAAA,IACAmI;AAAA,IACA7E;AAAA,IACAkG;AAAA,IACArH;AAAA,IACA6F;AAAA,EAAA,CACH,GAEK+B,KAAehI,EAAQ,WAAW,IAAI,yBAAyB;AAErE,EAAAiI,GAAmB,MAAM;AACrB,IAAInF,KACAoF,GAAA;AAAA,EAER,GAAG,CAACpF,CAAI,CAAC;AAET,QAAMqF,KAAoC;AAAA,IACtC,UAAU;AAAA,IACV,MAAKnF,KAAA,gBAAAA,EAAU,QAAO;AAAA,IACtB,OAAMA,KAAA,gBAAAA,EAAU,SAAQ;AAAA,IACxB,OAAOA,KAAA,gBAAAA,EAAU;AAAA,IACjB,YAAYoF,EAAW,SAAS;AAAA,IAChC,QAAQA,EAAW,SAAS;AAAA,IAC5B,cAAcA,EAAW,SAAS;AAAA,IAClC,WAAWA,EAAW,SAAS;AAAA,IAC/B,SAASA,EAAW,SAAS;AAAA,IAC7B,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK;AAAA,IACL,YAAWpF,KAAA,gBAAAA,EAAU,cAAaqF;AAAA,IAClC,UAAUC,GAAkB/H,CAAI;AAAA,IAChC,YAAYyC,IAAW,YAAY;AAAA,IACnC,SAASA,IAAW,IAAI;AAAA,EAAA,GAKtBuF,KAAiB,CAAC,EACpB1H,KACAC,MACAC,KACAC,MACAJ,MACAO,MACAF,IAKEuH,KAAkBD,MAAkB,CAAC,CAACpJ,GAEtCsJ,KACF,gBAAA7I,EAAA8I,IAAA,EACI,UAAA;AAAA,IAAA,gBAAA9I,EAAC,SAAI,WAAU,YAAW,OAAO+I,GAAkBnI,CAAK,GAEpD,UAAA;AAAA,MAAA,gBAAAZ;AAAA,QAAC9B;AAAA,QAAA;AAAA,UACG,KAAKwF;AAAA,UACL,IAAIlB;AAAA,UACJ,aACIb,IAAe,aAAaH,MAASC,KAAiB,UAAU;AAAA,UAEpE,UAAUpD,KAAY0C;AAAA,UAChB,CAACiI,EAAqB,GAAG;AAAA,UAC/B,iBAAc;AAAA,UACd,iBAAe9F;AAAA,UACf,iBAAeA,IAAOb,KAAY;AAAA,UAClC,yBACIV,KAAgBuB,KAAQM,KAAoB,IACtClB,GAAYkB,CAAgB,IAC5B;AAAA,UAIV,mBACItB,OAAmB0G,MAAmB,CAAC3G,KAAYQ,KAAU;AAAA,UAEjE,cAAYR,OAAc2G,KAAkB,SAAYrJ;AAAA,UACxD,gBAAcuB,KAAS;AAAA,UACvB,iBAAeO,KAAY;AAAA,UAC3B,oBAAkBuB;AAAA,UAClB,aAAW7B,KAAW;AAAA,UACtB,SAAS,MAAM;AACX,YAAM1C,KAAY0C,OAAkB,CAACqF,MAAM,CAACA,CAAC;AAAA,UACjD;AAAA,UACA,WAAWK;AAAA,UACX,OAAO;AAAA,YACH,YAAY;AAAA,YACZ,GAAGkB;AAAA,YACH,GAAG5F;AAAA,UAAA;AAAA,UAEP,WAAW,UAAUrE,GAAqBiD,CAAI,CAAC,2FAA2FtC,KAAY0C,IAAU,uBAAuB,gBAAgB,IAAIe,EAAS;AAAA,UAEpN,UAAA;AAAA,YAAA,gBAAArD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACG,WAAW,4BAA4BkD,IAAe,SAAS,UAAU,IAAI+F,KAAY,cAAc,EAAE;AAAA,gBAExG,UAAAI;AAAA,cAAA;AAAA,YAAA;AAAA,YAEJ/G,IACG,gBAAAtC,EAAC,QAAA,EAAK,WAAU,yDACZ,4BAACwK,IAAA,EAAQ,MAAK,WAAA,CAAW,EAAA,CAC7B,IAEA,gBAAAxK;AAAA,cAACyK;AAAA,cAAA;AAAA,gBACG,MAAM;AAAA,gBACN,WAAU;AAAA,gBACV,OAAO;AAAA,kBACH,OAAOhG,IACD,mDACA;AAAA,kBACN,YAAY;AAAA,kBACZ,WAAWA,IAAO,mBAAmB;AAAA,gBAAA;AAAA,cACzC;AAAA,YAAA;AAAA,UACJ;AAAA,QAAA;AAAA,MAAA;AAAA,MAGPwE,MACG,gBAAAjJ;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAK;AAAA,UACL,cAAW;AAAA,UACX,SAAS8H;AAAA,UACT,WAAU;AAAA,UACb,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED,GAER;AAAA,IACCrD,KACGiG;AAAA,MACI,gBAAAnJ;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,KAAK4D;AAAA,UACL,IAAIvB;AAAA,UACJ,MAAK;AAAA,UACL,wBAAqB;AAAA,UACpB,GAAG+G,GAAgB,aAAa;AAAA,UACjC,OAAOb;AAAA,UAIN,UAAA;AAAA,YAAArD,MACG,gBAAAlF;AAAA,cAAC;AAAA,cAAA;AAAA,gBACG,OAAO;AAAA,kBACH,SAAS;AAAA,kBACT,YAAY;AAAA,kBACZ,KAAK;AAAA,kBACL,YAAY;AAAA,kBACZ,cAAc;AAAA,kBACd,QAAQ;AAAA,kBACR,YAAY;AAAA,kBACZ,SAAS;AAAA,gBAAA;AAAA,gBAGb,UAAA;AAAA,kBAAA,gBAAAvB;AAAA,oBAAC4K;AAAA,oBAAA;AAAA,sBACG,MAAM;AAAA,sBACN,OAAO;AAAA,wBACH,OAAO;AAAA,wBACP,YAAY;AAAA,sBAAA;AAAA,oBAChB;AAAA,kBAAA;AAAA,kBAEJ,gBAAA5K;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACG,MAAK;AAAA,sBACL,OAAO6E;AAAA,sBACP,UAAU,CAAC,MAAMuB,GAAmB,EAAE,OAAO,KAAK;AAAA,sBAClD,WAAW4B;AAAA,sBACX,aAAY;AAAA,sBACZ,cAAW;AAAA,sBACX,WAAS;AAAA,sBACT,OAAO;AAAA,wBACH,MAAM;AAAA,wBACN,YAAY;AAAA,wBACZ,QAAQ;AAAA,wBACR,SAAS;AAAA,wBACT,MAAM;AAAA,wBACN,OAAO;AAAA,wBACP,UAAU;AAAA,sBAAA;AAAA,oBACd;AAAA,kBAAA;AAAA,gBACJ;AAAA,cAAA;AAAA,YAAA;AAAA,YAGPvB,MACG,gBAAAzG;AAAA,cAAC;AAAA,cAAA;AAAA,gBACG,eAAY;AAAA,gBACZ,OAAO;AAAA,kBACH,QAAQ;AAAA,kBACR,OAAO;AAAA,kBACP,YAAY;AAAA,kBACZ,YAAY;AAAA,gBAAA;AAAA,cAChB;AAAA,YAAA;AAAA,YAGR,gBAAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACG,KAAKoF;AAAA,gBACL,OAAO;AAAA,kBACH,SAAS;AAAA,kBACT,eAAe;AAAA,kBACf,KAAK;AAAA,kBACL,WAAW;AAAA,kBACX,oBAAoB;AAAA,kBACpB,WAAW;AAAA,kBACX,MAAM;AAAA,kBACN,gBAAgB;AAAA,kBAChB,gBACI;AAAA,gBAAA;AAAA,gBAGP,YAAgB,WAAW;AAAA;AAAA,oCAEvB,OAAA,EAAI,MAAK,gBAAe,OAAOrG,IAC3B,UAAA4K,GAAA,CACL;AAAA,oBAEA/D,EAAgB,IAAI,CAACxF,GAAQ0D,MAAU;AACnC,wBAAM+G,IAAUtF,GAAe,IAAInF,EAAO,KAAK,GACzC0K,IAAchH,MAAUiB,GACxBgG,IAAY,CAAC,CAAC3K,EAAO;AAC3B,yBACI,gBAAAmB;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBAEG,IAAIsC,GAAYC,CAAK;AAAA,sBACrB,KAAK,CAACqE,MAAO;AACT,wBAAA7C,GAAW,QAAQxB,CAAK,IAAIqE;AAAA,sBAChC;AAAA,sBACA,MAAK;AAAA,sBACL,MAAK;AAAA,sBACL,iBAAe0C;AAAA,sBACf,iBAAeE,KAAa;AAAA,sBAC5B,SAAS,MAAM;;AACX,wBAAArD,GAAOtH,EAAO,KAAK,GACnBkG,EAAA,IACAQ,IAAA5B,EAAe,YAAf,QAAA4B,EAAwB;AAAA,sBAC5B;AAAA,sBAIA,cAAc,MAAM9B,EAAoBlB,CAAK;AAAA,sBAC7C,cAAc,MAAM;AAChB,wBAAIiB,MAAqBjB,KACrBkB,EAAoB,EAAE;AAAA,sBAC9B;AAAA,sBACA,WAAU;AAAA,sBACV,gBAAc6F;AAAA,sBACd,oBAAkBC;AAAA,sBAClB,iBAAeC;AAAA,sBACf,OAAO;AAAA,wBACH,SAAS;AAAA,wBACT,YAAY;AAAA,wBACZ,OAAO;AAAA;AAAA,wBAEP,YAAY;AAAA,wBACZ,QAAQ;AAAA,wBACR,WAAW;AAAA,wBACX,cAAc;AAAA,wBACd,SAAS;AAAA,wBACT,MAAM;AAAA,wBACN,QAAQA,IAAY,gBAAgB;AAAA,wBACpC,SAASA,IAAY,MAAM;AAAA,wBAC3B,OAAOF,IACD,wDACA;AAAA,sBAAA;AAAA,sBAGV,UAAA;AAAA,wBAAA,gBAAA7K,EAACG,MAAyB,QAAAC,GAAgB;AAAA,wBACzCA,EAAO,SACJ,gBAAAJ;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BACG,OAAO;AAAA,8BACH,YAAY;AAAA,8BACZ,YAAY;AAAA,8BACZ,aAAa;AAAA,4BAAA;AAAA,4BAGhB,UAAAI,EAAO;AAAA,0BAAA;AAAA,wBAAA;AAAA,sBACZ;AAAA,oBAAA;AAAA,oBAtDCA,EAAO;AAAA,kBAAA;AAAA,gBA0DxB,CAAC;AAAA,cAAA;AAAA,YAAA;AAAA,UAET;AAAA,QAAA;AAAA,MAAA;AAAA,MAEJ,SAAS;AAAA,IAAA;AAAA,EACb,GACR;AAGJ,SAAK8J,KAKD,gBAAAlK;AAAA,IAACgL;AAAA,IAAA;AAAA,MACG,OAAAlK;AAAA,MACA,MAAA4B;AAAA,MACA,kBAAAC;AAAA,MACA,SAAAF;AAAA,MACA,MAAOF,MAAQ;AAAA,MACf,UAAAK;AAAA,MACA,mBAAAC;AAAA,MACA,SAAAP;AAAA,MACA,aAAAQ;AAAA,MACA,aAAAN;AAAA,MACA,WAAAuB;AAAA,MACA,SAAAC;AAAA,MACA,eAAAC;AAAA,MACA,QAAAC;AAAA,MACA,kBACI/B,MAAU,SACN,gBAAAnC,EAACiL,MAAa,aAAajM,EAAoBkD,CAAI,GAAG,IAEtD,gBAAAlC,EAAC,SAAI,OAAOsK,GAAkBnI,CAAK,GAC/B,UAAA,gBAAAnC,EAACiL,MAAa,aAAajM,EAAoBkD,CAAI,EAAA,CAAG,EAAA,CAC1D;AAAA,MAIP,UAAAkI;AAAA,IAAA;AAAA,EAAA,IA7BEA;AAgCf;"}
|
|
@@ -1,56 +1,56 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useRef as m, useState as
|
|
3
|
-
import { PILL_TRANSITION_MS as
|
|
4
|
-
import { useAdoptedStyleSheet as
|
|
5
|
-
const T = (r) => String(r.value) === "" ? r.label : `${r.value} ${r.label}`,
|
|
1
|
+
import { jsxs as n, jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as m, useState as I, useEffect as A, Fragment as S } from "react";
|
|
3
|
+
import { PILL_TRANSITION_MS as C, PILL_SHADOW as g, PILL_SURFACE as k, PILL_MUTED_TEXT as _, PILL_DIVIDER as O, PILL_BUTTON_BASE as R, PILL_BUTTON_CLASS as D, PILL_NOTICE_SHADOW as H, PILL_NOTICE_SLEEVE as M, PILL_NOTICE_TEXT as j, PILL_TRACK_CLASS as B, PILL_SHEET_ID as F, PILL_SHEET_CSS as U } from "./selectionBarChrome.js";
|
|
4
|
+
import { useAdoptedStyleSheet as V } from "./useAdoptedStyleSheet.js";
|
|
5
|
+
const T = (r) => String(r.value) === "" ? r.label : `${r.value} ${r.label}`, b = (r) => r.map(T).join(", "), w = (r, i) => r === void 0 || r === "" ? b(i) : `${r} ${b(i)}`.trim(), K = ({
|
|
6
6
|
open: r,
|
|
7
|
-
counts:
|
|
8
|
-
actions:
|
|
9
|
-
placement:
|
|
7
|
+
counts: i,
|
|
8
|
+
actions: v,
|
|
9
|
+
placement: N = "sticky",
|
|
10
10
|
notice: d,
|
|
11
|
-
"aria-label":
|
|
11
|
+
"aria-label": E = "Pending changes",
|
|
12
12
|
"aria-labelledby": L,
|
|
13
|
-
className:
|
|
13
|
+
className: P = ""
|
|
14
14
|
}) => {
|
|
15
|
-
const o = m(null), [
|
|
16
|
-
|
|
15
|
+
const o = m(null), [f, h] = I(r), [s, p] = I(r), a = m(null), t = m(null);
|
|
16
|
+
V(o, U, F), A(() => {
|
|
17
17
|
var e;
|
|
18
18
|
if (r)
|
|
19
|
-
|
|
20
|
-
a.current = null,
|
|
19
|
+
h(!0), t.current && (clearTimeout(t.current), t.current = null), a.current = requestAnimationFrame(() => {
|
|
20
|
+
a.current = null, p(!0);
|
|
21
21
|
});
|
|
22
22
|
else {
|
|
23
23
|
const c = document.activeElement;
|
|
24
|
-
c instanceof HTMLElement && ((e = o.current) != null && e.contains(c)) && c.blur(),
|
|
25
|
-
|
|
26
|
-
},
|
|
24
|
+
c instanceof HTMLElement && ((e = o.current) != null && e.contains(c)) && c.blur(), p(!1), t.current = setTimeout(() => {
|
|
25
|
+
t.current = null, h(!1);
|
|
26
|
+
}, C);
|
|
27
27
|
}
|
|
28
28
|
return () => {
|
|
29
|
-
a.current !== null && (cancelAnimationFrame(a.current), a.current = null),
|
|
29
|
+
a.current !== null && (cancelAnimationFrame(a.current), a.current = null), t.current && (clearTimeout(t.current), t.current = null);
|
|
30
30
|
};
|
|
31
31
|
}, [r]);
|
|
32
|
-
const
|
|
33
|
-
|
|
32
|
+
const y = N === "sticky", u = d !== void 0 && d !== "", x = `sticky bottom-0 z-30${f ? " pt-4 pb-6" : ""}`, $ = /* @__PURE__ */ n("div", { className: k, style: { boxShadow: g }, children: [
|
|
33
|
+
i.length > 0 && /* @__PURE__ */ l(
|
|
34
34
|
"p",
|
|
35
35
|
{
|
|
36
36
|
"aria-hidden": "true",
|
|
37
37
|
className: "m-0 flex items-center gap-2 text-[13px] leading-[1.6] tracking-[0.13px]",
|
|
38
|
-
children:
|
|
39
|
-
c > 0 && /* @__PURE__ */ l("span", { className:
|
|
38
|
+
children: i.map((e, c) => /* @__PURE__ */ n(S, { children: [
|
|
39
|
+
c > 0 && /* @__PURE__ */ l("span", { className: _, children: "•" }),
|
|
40
40
|
/* @__PURE__ */ l("span", { children: T(e) })
|
|
41
41
|
] }, e.label))
|
|
42
42
|
}
|
|
43
43
|
),
|
|
44
|
-
|
|
45
|
-
e.dividerBefore && /* @__PURE__ */ l("span", { "aria-hidden": "true", className: `${
|
|
46
|
-
/* @__PURE__ */
|
|
44
|
+
v.map((e) => /* @__PURE__ */ n(S, { children: [
|
|
45
|
+
e.dividerBefore && /* @__PURE__ */ l("span", { "aria-hidden": "true", className: `${O} ${_}`, children: "|" }),
|
|
46
|
+
/* @__PURE__ */ n(
|
|
47
47
|
"button",
|
|
48
48
|
{
|
|
49
49
|
type: "button",
|
|
50
50
|
disabled: e.disabled,
|
|
51
51
|
tabIndex: s ? void 0 : -1,
|
|
52
52
|
onClick: e.onClick,
|
|
53
|
-
className: `${
|
|
53
|
+
className: `${R} ${D}--${e.emphasis ?? "secondary"}`,
|
|
54
54
|
children: [
|
|
55
55
|
e.icon && e.iconPosition !== "end" && /* @__PURE__ */ l("span", { "aria-hidden": "true", className: "flex items-center", children: e.icon }),
|
|
56
56
|
e.label,
|
|
@@ -62,30 +62,30 @@ const T = (r) => String(r.value) === "" ? r.label : `${r.value} ${r.label}`, _ =
|
|
|
62
62
|
] });
|
|
63
63
|
return (
|
|
64
64
|
// The live region has to exist BEFORE its text changes or the first announcement is dropped.
|
|
65
|
-
/* @__PURE__ */
|
|
65
|
+
/* @__PURE__ */ n(
|
|
66
66
|
"div",
|
|
67
67
|
{
|
|
68
68
|
ref: o,
|
|
69
|
-
className: `${
|
|
69
|
+
className: `${B} pointer-events-none flex w-full justify-center ${y ? x : "relative"} ${P}`.trim(),
|
|
70
70
|
style: { opacity: s ? 1 : 0 },
|
|
71
71
|
children: [
|
|
72
|
-
/* @__PURE__ */ l("p", { className: "sr-only", role: "status", children: s ?
|
|
73
|
-
|
|
72
|
+
/* @__PURE__ */ l("p", { className: "sr-only", role: "status", children: s ? w(d, i) : "" }),
|
|
73
|
+
f && /* @__PURE__ */ l(
|
|
74
74
|
"div",
|
|
75
75
|
{
|
|
76
76
|
role: "group",
|
|
77
|
-
"aria-label": L ? void 0 :
|
|
77
|
+
"aria-label": L ? void 0 : E,
|
|
78
78
|
"aria-labelledby": L,
|
|
79
79
|
"aria-hidden": s ? void 0 : !0,
|
|
80
80
|
className: s ? "pointer-events-auto" : void 0,
|
|
81
|
-
children: /* @__PURE__ */
|
|
81
|
+
children: /* @__PURE__ */ n(
|
|
82
82
|
"div",
|
|
83
83
|
{
|
|
84
|
-
className: u ?
|
|
85
|
-
style: u ? { boxShadow:
|
|
84
|
+
className: u ? M : void 0,
|
|
85
|
+
style: u ? { boxShadow: H } : void 0,
|
|
86
86
|
children: [
|
|
87
|
-
u && /* @__PURE__ */ l("p", { "aria-hidden": "true", className:
|
|
88
|
-
|
|
87
|
+
u && /* @__PURE__ */ l("p", { "aria-hidden": "true", className: j, children: d }),
|
|
88
|
+
$
|
|
89
89
|
]
|
|
90
90
|
}
|
|
91
91
|
)
|
|
@@ -97,7 +97,7 @@ const T = (r) => String(r.value) === "" ? r.label : `${r.value} ${r.label}`, _ =
|
|
|
97
97
|
);
|
|
98
98
|
};
|
|
99
99
|
export {
|
|
100
|
-
|
|
101
|
-
|
|
100
|
+
K as SelectionBar,
|
|
101
|
+
K as default
|
|
102
102
|
};
|
|
103
103
|
//# sourceMappingURL=SelectionBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectionBar.js","sources":["../../src/components/SelectionBar.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useRef, useState } from 'react';\nimport {\n PILL_BUTTON_BASE,\n PILL_BUTTON_CLASS,\n PILL_DIVIDER,\n PILL_MUTED_TEXT,\n PILL_NOTICE_SHADOW,\n PILL_NOTICE_SLEEVE,\n PILL_NOTICE_TEXT,\n PILL_SHADOW,\n PILL_SHEET_CSS,\n PILL_SHEET_ID,\n PILL_SURFACE,\n PILL_TRACK_CLASS,\n PILL_TRANSITION_MS,\n type SelectionBarCount,\n type SelectionBarEmphasis,\n} from './selectionBarChrome';\nimport { useAdoptedStyleSheet } from './useAdoptedStyleSheet';\n\nexport type { SelectionBarCount, SelectionBarEmphasis };\n\nexport interface SelectionBarAction {\n label: string;\n onClick: () => void;\n /** 'primary' commits the pending change; 'secondary' (the default) is a filled chip;\n * 'quiet' is unfilled and takes a wash on hover. */\n emphasis?: SelectionBarEmphasis;\n icon?: React.ReactNode;\n iconPosition?: 'start' | 'end';\n disabled?: boolean;\n /** Renders a separator glyph before this action. */\n dividerBefore?: boolean;\n}\n\nexport interface SelectionBarProps {\n /** Drives the mount: the bar animates in on true and animates out on false. */\n open: boolean;\n counts: SelectionBarCount[];\n actions: SelectionBarAction[];\n /** 'sticky' keeps the bar in view while its container scrolls; render it as the last child\n * of that content, with no `overflow: hidden` on any ancestor. */\n placement?: 'sticky' | 'inline';\n /**\n * Wraps the bar in a warning sleeve carrying this message, for state the bar is\n * reporting rather than an action it offers — e.g. that the selection is unsaved.\n * It leads the announcement. An empty string renders no sleeve.\n */\n notice?: string;\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n className?: string;\n}\n\n/** A count reads as one phrase; an empty `value` carries a bare message instead. */\nconst countText = (count: SelectionBarCount): string =>\n String(count.value) === '' ? count.label : `${count.value} ${count.label}`;\n\nconst summarise = (counts: SelectionBarCount[]): string => counts.map(countText).join(', ');\n\n/** A notice is the reason the bar is up, so it leads the announcement. */\nconst announcement = (notice: string | undefined, counts: SelectionBarCount[]): string =>\n notice === undefined || notice === ''\n ? summarise(counts)\n : `${notice} ${summarise(counts)}`.trim();\n\n/**\n * A bar reporting a pending, not-yet-written selection and the actions that resolve it. Every\n * action destroys the button just pressed, so an `onClick` that ends the pending state must\n * also move focus.\n */\nexport const SelectionBar: React.FC<SelectionBarProps> = ({\n open,\n counts,\n actions,\n placement = 'sticky',\n notice,\n 'aria-label': ariaLabel = 'Pending changes',\n 'aria-labelledby': ariaLabelledBy,\n className = '',\n}) => {\n const trackRef = useRef<HTMLDivElement>(null);\n const [isMounted, setIsMounted] = useState(open);\n const [isVisible, setIsVisible] = useState(open);\n const frameRef = useRef<number | null>(null);\n const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n useAdoptedStyleSheet(trackRef, PILL_SHEET_CSS, PILL_SHEET_ID);\n\n useEffect(() => {\n if (open) {\n setIsMounted(true);\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n timerRef.current = null;\n }\n frameRef.current = requestAnimationFrame(() => {\n frameRef.current = null;\n setIsVisible(true);\n });\n } else {\n // The browser refuses `aria-hidden` on a subtree still holding focus, so a caller\n // that forgets to move it would trap the keyboard here.\n const active = document.activeElement;\n if (active instanceof HTMLElement && trackRef.current?.contains(active)) {\n active.blur();\n }\n setIsVisible(false);\n timerRef.current = setTimeout(() => {\n timerRef.current = null;\n setIsMounted(false);\n }, PILL_TRANSITION_MS);\n }\n return () => {\n if (frameRef.current !== null) {\n cancelAnimationFrame(frameRef.current);\n frameRef.current = null;\n }\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n timerRef.current = null;\n }\n };\n }, [open]);\n\n const isSticky = placement === 'sticky';\n const hasNotice = notice !== undefined && notice !== '';\n\n const pill = (\n <div className={PILL_SURFACE} style={{ boxShadow: PILL_SHADOW }}>\n {counts.length > 0 && (\n <p\n aria-hidden=\"true\"\n className=\"m-0 flex items-center gap-2 text-[13px] leading-[1.6] tracking-[0.13px]\"\n >\n {counts.map((count, index) => (\n <Fragment key={count.label}>\n {index > 0 && <span className={PILL_MUTED_TEXT}>•</span>}\n <span>{countText(count)}</span>\n </Fragment>\n ))}\n </p>\n )}\n {actions.map((action) => (\n <Fragment key={action.label}>\n {action.dividerBefore && (\n <span aria-hidden=\"true\" className={`${PILL_DIVIDER} ${PILL_MUTED_TEXT}`}>\n |\n </span>\n )}\n <button\n type=\"button\"\n disabled={action.disabled}\n tabIndex={isVisible ? undefined : -1}\n onClick={action.onClick}\n className={`${PILL_BUTTON_BASE} ${PILL_BUTTON_CLASS}--${action.emphasis ?? 'secondary'}`}\n >\n {action.icon && action.iconPosition !== 'end' && (\n <span aria-hidden=\"true\" className=\"flex items-center\">\n {action.icon}\n </span>\n )}\n {action.label}\n {action.icon && action.iconPosition === 'end' && (\n <span aria-hidden=\"true\" className=\"flex items-center\">\n {action.icon}\n </span>\n )}\n </button>\n </Fragment>\n ))}\n </div>\n );\n\n return (\n // The live region has to exist BEFORE its text changes or the first announcement is dropped.\n <div\n ref={trackRef}\n className={`${PILL_TRACK_CLASS} pointer-events-none flex w-full justify-center ${isSticky ? 'sticky bottom-6 z-30' : 'relative'} ${className}`.trim()}\n style={{ opacity: isVisible ? 1 : 0 }}\n >\n <p className=\"sr-only\" role=\"status\">\n {isVisible ? announcement(notice, counts) : ''}\n </p>\n {isMounted && (\n <div\n role=\"group\"\n aria-label={ariaLabelledBy ? undefined : ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-hidden={isVisible ? undefined : true}\n className={isVisible ? 'pointer-events-auto' : undefined}\n >\n {/* Keep the wrapper stable: changing the pill's parent remounts it and drops focus\n from the action that raised the notice. */}\n <div\n className={hasNotice ? PILL_NOTICE_SLEEVE : undefined}\n style={hasNotice ? { boxShadow: PILL_NOTICE_SHADOW } : undefined}\n >\n {hasNotice && (\n <p aria-hidden=\"true\" className={PILL_NOTICE_TEXT}>\n {notice}\n </p>\n )}\n {pill}\n </div>\n </div>\n )}\n </div>\n );\n};\n\nexport default SelectionBar;\n"],"names":["countText","count","summarise","counts","announcement","notice","SelectionBar","open","actions","placement","ariaLabel","ariaLabelledBy","className","trackRef","useRef","isMounted","setIsMounted","useState","isVisible","setIsVisible","frameRef","timerRef","useAdoptedStyleSheet","PILL_SHEET_CSS","PILL_SHEET_ID","useEffect","active","_a","PILL_TRANSITION_MS","isSticky","hasNotice","pill","PILL_SURFACE","PILL_SHADOW","jsx","index","Fragment","PILL_MUTED_TEXT","action","PILL_DIVIDER","jsxs","PILL_BUTTON_BASE","PILL_BUTTON_CLASS","PILL_TRACK_CLASS","PILL_NOTICE_SLEEVE","PILL_NOTICE_SHADOW","PILL_NOTICE_TEXT"],"mappings":";;;;AAuDA,MAAMA,IAAY,CAACC,MACf,OAAOA,EAAM,KAAK,MAAM,KAAKA,EAAM,QAAQ,GAAGA,EAAM,KAAK,IAAIA,EAAM,KAAK,IAEtEC,IAAY,CAACC,MAAwCA,EAAO,IAAIH,CAAS,EAAE,KAAK,IAAI,GAGpFI,IAAe,CAACC,GAA4BF,MAC9CE,MAAW,UAAaA,MAAW,KAC7BH,EAAUC,CAAM,IAChB,GAAGE,CAAM,IAAIH,EAAUC,CAAM,CAAC,GAAG,KAAA,GAO9BG,IAA4C,CAAC;AAAA,EACtD,MAAAC;AAAA,EACA,QAAAJ;AAAA,EACA,SAAAK;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,QAAAJ;AAAA,EACA,cAAcK,IAAY;AAAA,EAC1B,mBAAmBC;AAAA,EACnB,WAAAC,IAAY;AAChB,MAAM;AACF,QAAMC,IAAWC,EAAuB,IAAI,GACtC,CAACC,GAAWC,CAAY,IAAIC,EAASV,CAAI,GACzC,CAACW,GAAWC,CAAY,IAAIF,EAASV,CAAI,GACzCa,IAAWN,EAAsB,IAAI,GACrCO,IAAWP,EAA6C,IAAI;AAElE,EAAAQ,EAAqBT,GAAUU,GAAgBC,CAAa,GAE5DC,EAAU,MAAM;;AACZ,QAAIlB;AACA,MAAAS,EAAa,EAAI,GACbK,EAAS,YACT,aAAaA,EAAS,OAAO,GAC7BA,EAAS,UAAU,OAEvBD,EAAS,UAAU,sBAAsB,MAAM;AAC3C,QAAAA,EAAS,UAAU,MACnBD,EAAa,EAAI;AAAA,MACrB,CAAC;AAAA,SACE;AAGH,YAAMO,IAAS,SAAS;AACxB,MAAIA,aAAkB,iBAAeC,IAAAd,EAAS,YAAT,QAAAc,EAAkB,SAASD,OAC5DA,EAAO,KAAA,GAEXP,EAAa,EAAK,GAClBE,EAAS,UAAU,WAAW,MAAM;AAChC,QAAAA,EAAS,UAAU,MACnBL,EAAa,EAAK;AAAA,MACtB,GAAGY,CAAkB;AAAA,IACzB;AACA,WAAO,MAAM;AACT,MAAIR,EAAS,YAAY,SACrB,qBAAqBA,EAAS,OAAO,GACrCA,EAAS,UAAU,OAEnBC,EAAS,YACT,aAAaA,EAAS,OAAO,GAC7BA,EAAS,UAAU;AAAA,IAE3B;AAAA,EACJ,GAAG,CAACd,CAAI,CAAC;AAET,QAAMsB,IAAWpB,MAAc,UACzBqB,IAAYzB,MAAW,UAAaA,MAAW,IAE/C0B,sBACD,OAAA,EAAI,WAAWC,GAAc,OAAO,EAAE,WAAWC,EAAA,GAC7C,UAAA;AAAA,IAAA9B,EAAO,SAAS,KACb,gBAAA+B;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,eAAY;AAAA,QACZ,WAAU;AAAA,QAET,YAAO,IAAI,CAACjC,GAAOkC,wBACfC,GAAA,EACI,UAAA;AAAA,UAAAD,IAAQ,KAAK,gBAAAD,EAAC,QAAA,EAAK,WAAWG,GAAiB,UAAA,KAAC;AAAA,UACjD,gBAAAH,EAAC,QAAA,EAAM,UAAAlC,EAAUC,CAAK,EAAA,CAAE;AAAA,QAAA,EAAA,GAFbA,EAAM,KAGrB,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,IAGRO,EAAQ,IAAI,CAAC8B,wBACTF,GAAA,EACI,UAAA;AAAA,MAAAE,EAAO,iBACJ,gBAAAJ,EAAC,QAAA,EAAK,eAAY,QAAO,WAAW,GAAGK,CAAY,IAAIF,CAAe,IAAI,UAAA,KAE1E;AAAA,MAEJ,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAK;AAAA,UACL,UAAUF,EAAO;AAAA,UACjB,UAAUpB,IAAY,SAAY;AAAA,UAClC,SAASoB,EAAO;AAAA,UAChB,WAAW,GAAGG,CAAgB,IAAIC,CAAiB,KAAKJ,EAAO,YAAY,WAAW;AAAA,UAErF,UAAA;AAAA,YAAAA,EAAO,QAAQA,EAAO,iBAAiB,SACpC,gBAAAJ,EAAC,QAAA,EAAK,eAAY,QAAO,WAAU,qBAC9B,UAAAI,EAAO,MACZ;AAAA,YAEHA,EAAO;AAAA,YACPA,EAAO,QAAQA,EAAO,iBAAiB,SACpC,gBAAAJ,EAAC,QAAA,EAAK,eAAY,QAAO,WAAU,qBAC9B,UAAAI,EAAO,KAAA,CACZ;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAER,EAAA,GAxBWA,EAAO,KAyBtB,CACH;AAAA,EAAA,GACL;AAGJ;AAAA;AAAA,IAEI,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAK3B;AAAA,QACL,WAAW,GAAG8B,CAAgB,mDAAmDd,IAAW,yBAAyB,UAAU,IAAIjB,CAAS,GAAG,KAAA;AAAA,QAC/I,OAAO,EAAE,SAASM,IAAY,IAAI,EAAA;AAAA,QAElC,UAAA;AAAA,UAAA,gBAAAgB,EAAC,KAAA,EAAE,WAAU,WAAU,MAAK,UACvB,cAAY9B,EAAaC,GAAQF,CAAM,IAAI,GAAA,CAChD;AAAA,UACCY,KACG,gBAAAmB;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,MAAK;AAAA,cACL,cAAYvB,IAAiB,SAAYD;AAAA,cACzC,mBAAiBC;AAAA,cACjB,eAAaO,IAAY,SAAY;AAAA,cACrC,WAAWA,IAAY,wBAAwB;AAAA,cAI/C,UAAA,gBAAAsB;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,WAAWV,IAAYc,IAAqB;AAAA,kBAC5C,OAAOd,IAAY,EAAE,WAAWe,MAAuB;AAAA,kBAEtD,UAAA;AAAA,oBAAAf,uBACI,KAAA,EAAE,eAAY,QAAO,WAAWgB,GAC5B,UAAAzC,GACL;AAAA,oBAEH0B;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACL;AAAA,UAAA;AAAA,QACJ;AAAA,MAAA;AAAA,IAAA;AAAA;AAIhB;"}
|
|
1
|
+
{"version":3,"file":"SelectionBar.js","sources":["../../src/components/SelectionBar.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useRef, useState } from 'react';\nimport {\n PILL_BUTTON_BASE,\n PILL_BUTTON_CLASS,\n PILL_DIVIDER,\n PILL_MUTED_TEXT,\n PILL_NOTICE_SHADOW,\n PILL_NOTICE_SLEEVE,\n PILL_NOTICE_TEXT,\n PILL_SHADOW,\n PILL_SHEET_CSS,\n PILL_SHEET_ID,\n PILL_SURFACE,\n PILL_TRACK_CLASS,\n PILL_TRANSITION_MS,\n type SelectionBarCount,\n type SelectionBarEmphasis,\n} from './selectionBarChrome';\nimport { useAdoptedStyleSheet } from './useAdoptedStyleSheet';\n\nexport type { SelectionBarCount, SelectionBarEmphasis };\n\nexport interface SelectionBarAction {\n label: string;\n onClick: () => void;\n /** 'primary' commits the pending change; 'secondary' (the default) is a filled chip;\n * 'quiet' is unfilled and takes a wash on hover. */\n emphasis?: SelectionBarEmphasis;\n icon?: React.ReactNode;\n iconPosition?: 'start' | 'end';\n disabled?: boolean;\n /** Renders a separator glyph before this action. */\n dividerBefore?: boolean;\n}\n\nexport interface SelectionBarProps {\n /** Drives the mount: the bar animates in on true and animates out on false. */\n open: boolean;\n counts: SelectionBarCount[];\n actions: SelectionBarAction[];\n /** 'sticky' keeps the bar in view while its container scrolls; render it as the last child\n * of that content, with no `overflow: hidden` on any ancestor. */\n placement?: 'sticky' | 'inline';\n /**\n * Wraps the bar in a warning sleeve carrying this message, for state the bar is\n * reporting rather than an action it offers — e.g. that the selection is unsaved.\n * It leads the announcement. An empty string renders no sleeve.\n */\n notice?: string;\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n className?: string;\n}\n\n/** A count reads as one phrase; an empty `value` carries a bare message instead. */\nconst countText = (count: SelectionBarCount): string =>\n String(count.value) === '' ? count.label : `${count.value} ${count.label}`;\n\nconst summarise = (counts: SelectionBarCount[]): string => counts.map(countText).join(', ');\n\n/** A notice is the reason the bar is up, so it leads the announcement. */\nconst announcement = (notice: string | undefined, counts: SelectionBarCount[]): string =>\n notice === undefined || notice === ''\n ? summarise(counts)\n : `${notice} ${summarise(counts)}`.trim();\n\n/**\n * A bar reporting a pending, not-yet-written selection and the actions that resolve it. Every\n * action destroys the button just pressed, so an `onClick` that ends the pending state must\n * also move focus.\n */\nexport const SelectionBar: React.FC<SelectionBarProps> = ({\n open,\n counts,\n actions,\n placement = 'sticky',\n notice,\n 'aria-label': ariaLabel = 'Pending changes',\n 'aria-labelledby': ariaLabelledBy,\n className = '',\n}) => {\n const trackRef = useRef<HTMLDivElement>(null);\n const [isMounted, setIsMounted] = useState(open);\n const [isVisible, setIsVisible] = useState(open);\n const frameRef = useRef<number | null>(null);\n const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n useAdoptedStyleSheet(trackRef, PILL_SHEET_CSS, PILL_SHEET_ID);\n\n useEffect(() => {\n if (open) {\n setIsMounted(true);\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n timerRef.current = null;\n }\n frameRef.current = requestAnimationFrame(() => {\n frameRef.current = null;\n setIsVisible(true);\n });\n } else {\n // The browser refuses `aria-hidden` on a subtree still holding focus, so a caller\n // that forgets to move it would trap the keyboard here.\n const active = document.activeElement;\n if (active instanceof HTMLElement && trackRef.current?.contains(active)) {\n active.blur();\n }\n setIsVisible(false);\n timerRef.current = setTimeout(() => {\n timerRef.current = null;\n setIsMounted(false);\n }, PILL_TRANSITION_MS);\n }\n return () => {\n if (frameRef.current !== null) {\n cancelAnimationFrame(frameRef.current);\n frameRef.current = null;\n }\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n timerRef.current = null;\n }\n };\n }, [open]);\n\n const isSticky = placement === 'sticky';\n const hasNotice = notice !== undefined && notice !== '';\n const stickyClass = `sticky bottom-0 z-30${isMounted ? ' pt-4 pb-6' : ''}`;\n\n const pill = (\n <div className={PILL_SURFACE} style={{ boxShadow: PILL_SHADOW }}>\n {counts.length > 0 && (\n <p\n aria-hidden=\"true\"\n className=\"m-0 flex items-center gap-2 text-[13px] leading-[1.6] tracking-[0.13px]\"\n >\n {counts.map((count, index) => (\n <Fragment key={count.label}>\n {index > 0 && <span className={PILL_MUTED_TEXT}>•</span>}\n <span>{countText(count)}</span>\n </Fragment>\n ))}\n </p>\n )}\n {actions.map((action) => (\n <Fragment key={action.label}>\n {action.dividerBefore && (\n <span aria-hidden=\"true\" className={`${PILL_DIVIDER} ${PILL_MUTED_TEXT}`}>\n |\n </span>\n )}\n <button\n type=\"button\"\n disabled={action.disabled}\n tabIndex={isVisible ? undefined : -1}\n onClick={action.onClick}\n className={`${PILL_BUTTON_BASE} ${PILL_BUTTON_CLASS}--${action.emphasis ?? 'secondary'}`}\n >\n {action.icon && action.iconPosition !== 'end' && (\n <span aria-hidden=\"true\" className=\"flex items-center\">\n {action.icon}\n </span>\n )}\n {action.label}\n {action.icon && action.iconPosition === 'end' && (\n <span aria-hidden=\"true\" className=\"flex items-center\">\n {action.icon}\n </span>\n )}\n </button>\n </Fragment>\n ))}\n </div>\n );\n\n return (\n // The live region has to exist BEFORE its text changes or the first announcement is dropped.\n <div\n ref={trackRef}\n className={`${PILL_TRACK_CLASS} pointer-events-none flex w-full justify-center ${isSticky ? stickyClass : 'relative'} ${className}`.trim()}\n style={{ opacity: isVisible ? 1 : 0 }}\n >\n <p className=\"sr-only\" role=\"status\">\n {isVisible ? announcement(notice, counts) : ''}\n </p>\n {isMounted && (\n <div\n role=\"group\"\n aria-label={ariaLabelledBy ? undefined : ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-hidden={isVisible ? undefined : true}\n className={isVisible ? 'pointer-events-auto' : undefined}\n >\n {/* Keep the wrapper stable: changing the pill's parent remounts it and drops focus\n from the action that raised the notice. */}\n <div\n className={hasNotice ? PILL_NOTICE_SLEEVE : undefined}\n style={hasNotice ? { boxShadow: PILL_NOTICE_SHADOW } : undefined}\n >\n {hasNotice && (\n <p aria-hidden=\"true\" className={PILL_NOTICE_TEXT}>\n {notice}\n </p>\n )}\n {pill}\n </div>\n </div>\n )}\n </div>\n );\n};\n\nexport default SelectionBar;\n"],"names":["countText","count","summarise","counts","announcement","notice","SelectionBar","open","actions","placement","ariaLabel","ariaLabelledBy","className","trackRef","useRef","isMounted","setIsMounted","useState","isVisible","setIsVisible","frameRef","timerRef","useAdoptedStyleSheet","PILL_SHEET_CSS","PILL_SHEET_ID","useEffect","active","_a","PILL_TRANSITION_MS","isSticky","hasNotice","stickyClass","pill","PILL_SURFACE","PILL_SHADOW","jsx","index","Fragment","PILL_MUTED_TEXT","action","PILL_DIVIDER","jsxs","PILL_BUTTON_BASE","PILL_BUTTON_CLASS","PILL_TRACK_CLASS","PILL_NOTICE_SLEEVE","PILL_NOTICE_SHADOW","PILL_NOTICE_TEXT"],"mappings":"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"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { jsx as s } from "react/jsx-runtime";
|
|
2
|
+
const r = (t) => !!t && t.scrollWidth > t.clientWidth, p = (t) => !!t && t.scrollHeight > t.clientHeight, l = {
|
|
3
|
+
display: "flex",
|
|
4
|
+
flexDirection: "column",
|
|
5
|
+
gap: 4
|
|
6
|
+
}, h = (t) => {
|
|
7
|
+
var o;
|
|
8
|
+
const n = t.filter(([, i]) => !!i);
|
|
9
|
+
return n.length < 2 ? (o = n[0]) == null ? void 0 : o[1] : /* @__PURE__ */ s("span", { style: l, children: n.map(([i, e]) => /* @__PURE__ */ s("span", { children: e }, i)) });
|
|
10
|
+
};
|
|
11
|
+
export {
|
|
12
|
+
p as isClamped,
|
|
13
|
+
r as isCut,
|
|
14
|
+
h as tooltipLines
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=truncatedLines.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"truncatedLines.js","sources":["../../src/components/truncatedLines.tsx"],"sourcesContent":["import type React from 'react';\n\nexport const isCut = (el: HTMLElement | null) => !!el && el.scrollWidth > el.clientWidth;\n\nexport const isClamped = (el: HTMLElement | null) => !!el && el.scrollHeight > el.clientHeight;\n\n// Portaled to document.body, outside the shadow root: styling here has to be inline.\nconst TOOLTIP_LINES_STYLE: React.CSSProperties = {\n display: 'flex',\n flexDirection: 'column',\n gap: 4,\n};\n\n/** Keyed by slot, not by text: two lines can carry the same string. */\nexport const tooltipLines = (\n lines: ReadonlyArray<readonly [slot: string, text: React.ReactNode]>,\n): React.ReactNode => {\n const shown = lines.filter(([, text]) => Boolean(text));\n if (shown.length < 2) {\n return shown[0]?.[1];\n }\n return (\n <span style={TOOLTIP_LINES_STYLE}>\n {shown.map(([slot, text]) => (\n <span key={slot}>{text}</span>\n ))}\n </span>\n );\n};\n"],"names":["isCut","el","isClamped","TOOLTIP_LINES_STYLE","tooltipLines","lines","shown","text","_a","slot","jsx"],"mappings":";AAEO,MAAMA,IAAQ,CAACC,MAA2B,CAAC,CAACA,KAAMA,EAAG,cAAcA,EAAG,aAEhEC,IAAY,CAACD,MAA2B,CAAC,CAACA,KAAMA,EAAG,eAAeA,EAAG,cAG5EE,IAA2C;AAAA,EAC7C,SAAS;AAAA,EACT,eAAe;AAAA,EACf,KAAK;AACT,GAGaC,IAAe,CACxBC,MACkB;;AAClB,QAAMC,IAAQD,EAAM,OAAO,CAAC,CAAA,EAAGE,CAAI,MAAM,EAAQA,CAAK;AACtD,SAAID,EAAM,SAAS,KACRE,IAAAF,EAAM,CAAC,MAAP,gBAAAE,EAAW,uBAGjB,QAAA,EAAK,OAAOL,GACR,UAAAG,EAAM,IAAI,CAAC,CAACG,GAAMF,CAAI,MACnB,gBAAAG,EAAC,QAAA,EAAiB,UAAAH,EAAA,GAAPE,CAAY,CAC1B,GACL;AAER;"}
|