@sanity/ui 4.0.7 → 4.1.1

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.
Files changed (66) hide show
  1. package/dist/{arrow-CL8xmdbg.js → arrow-DKn5YKdy.js} +6 -5
  2. package/dist/arrow-DKn5YKdy.js.map +1 -0
  3. package/dist/autocomplete.d.ts +2 -2
  4. package/dist/autocomplete.d.ts.map +1 -1
  5. package/dist/autocomplete.js +37 -41
  6. package/dist/autocomplete.js.map +1 -1
  7. package/dist/breadcrumbs.d.ts +2 -2
  8. package/dist/breadcrumbs.d.ts.map +1 -1
  9. package/dist/breadcrumbs.js +30 -32
  10. package/dist/breadcrumbs.js.map +1 -1
  11. package/dist/{button-DQH2KIbq.js → button-Dh_M2fYx.js} +10 -10
  12. package/dist/button-Dh_M2fYx.js.map +1 -0
  13. package/dist/button-dnqMFkWg.d.ts.map +1 -1
  14. package/dist/code.d.ts +2 -2
  15. package/dist/code.d.ts.map +1 -1
  16. package/dist/{factory-BA3gEfyI.js → factory-BzXTX8_Q.js} +2 -2
  17. package/dist/{factory-BA3gEfyI.js.map → factory-BzXTX8_Q.js.map} +1 -1
  18. package/dist/{flex-CySCBzQm.js → flex-DmbDG2ks.js} +2 -2
  19. package/dist/{flex-CySCBzQm.js.map → flex-DmbDG2ks.js.map} +1 -1
  20. package/dist/{getElementRef-5HZQ-Owu.js → getElementRef-Jw7gY0eV.js} +13 -2
  21. package/dist/getElementRef-Jw7gY0eV.js.map +1 -0
  22. package/dist/{grid-I2TNptX-.js → grid-6JSgMj1O.js} +2 -2
  23. package/dist/{grid-I2TNptX-.js.map → grid-6JSgMj1O.js.map} +1 -1
  24. package/dist/{hotkeys-BPlacpG8.js → hotkeys-uSArGPzR.js} +28 -28
  25. package/dist/hotkeys-uSArGPzR.js.map +1 -0
  26. package/dist/index.d.ts +156 -156
  27. package/dist/index.d.ts.map +1 -1
  28. package/dist/index.js +317 -351
  29. package/dist/index.js.map +1 -1
  30. package/dist/layer-BfwisMR6.js +61 -0
  31. package/dist/layer-BfwisMR6.js.map +1 -0
  32. package/dist/layer-ChlP9Ik6.d.ts.map +1 -1
  33. package/dist/menu.d.ts +6 -6
  34. package/dist/menu.d.ts.map +1 -1
  35. package/dist/menu.js +50 -38
  36. package/dist/menu.js.map +1 -1
  37. package/dist/{popover-CEbjxiPx.js → popover-myCXZV_F.js} +34 -33
  38. package/dist/popover-myCXZV_F.js.map +1 -0
  39. package/dist/popover.js +1 -1
  40. package/dist/{stack-BGFEokua.js → stack-rsNFPq2-.js} +2 -2
  41. package/dist/{stack-BGFEokua.js.map → stack-rsNFPq2-.js.map} +1 -1
  42. package/dist/styles.css +408 -0
  43. package/dist/{textInput-B6ZZJSOj.js → textInput-DAaORuky.js} +38 -50
  44. package/dist/textInput-DAaORuky.js.map +1 -0
  45. package/dist/theme.d.ts +33 -33
  46. package/dist/theme.d.ts.map +1 -1
  47. package/dist/theme.js +1 -1
  48. package/dist/toast.d.ts +4 -4
  49. package/dist/toast.d.ts.map +1 -1
  50. package/dist/toast.js +80 -76
  51. package/dist/toast.js.map +1 -1
  52. package/dist/tooltip.d.ts +5 -5
  53. package/dist/tooltip.d.ts.map +1 -1
  54. package/dist/tooltip.js +97 -99
  55. package/dist/tooltip.js.map +1 -1
  56. package/dist/{useLayer-jUJIz8mh.js → useLayer-D1usxIE0.js} +2 -2
  57. package/dist/{useLayer-jUJIz8mh.js.map → useLayer-D1usxIE0.js.map} +1 -1
  58. package/package.json +10 -9
  59. package/dist/arrow-CL8xmdbg.js.map +0 -1
  60. package/dist/button-DQH2KIbq.js.map +0 -1
  61. package/dist/getElementRef-5HZQ-Owu.js.map +0 -1
  62. package/dist/hotkeys-BPlacpG8.js.map +0 -1
  63. package/dist/layer-DGn7KJIB.js +0 -61
  64. package/dist/layer-DGn7KJIB.js.map +0 -1
  65. package/dist/popover-CEbjxiPx.js.map +0 -1
  66. package/dist/textInput-B6ZZJSOj.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"autocomplete.js","names":["() => {\n // Calling the `onSelect` in a timeout is a fix to\n // allow the `click` event to propagate in some cases\n setTimeout(() => {\n onSelect(value)\n }, 0)\n }","useCallback(() => {\n // Calling the `onSelect` in a timeout is a fix to\n // allow the `click` event to propagate in some cases\n setTimeout(() => {\n onSelect(value)\n }, 0)\n }, [onSelect, value])","(event: React.KeyboardEvent<HTMLLIElement>) => {\n if (event.key === 'Enter' && !_isEnterToClickElement(event.currentTarget)) {\n handleClick()\n }\n }","useCallback(\n (event: React.KeyboardEvent<HTMLLIElement>) => {\n if (event.key === 'Enter' && !_isEnterToClickElement(event.currentTarget)) {\n handleClick()\n }\n },\n [handleClick],\n )","<li\n aria-selected={selected}\n data-ui=\"AutocompleteOption\"\n id={id}\n // oxlint-disable-next-line no-noninteractive-element-to-interactive-role, prefer-tag-over-role\n role=\"option\"\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n >\n {children}\n </li>","border = true","fontSize = 2","listBox = EMPTY_RECORD","paddingProp = 3","popover = EMPTY_RECORD","radius = 2","renderValue = DEFAULT_RENDER_VALUE","{\n activeValue: valueProp || null,\n focused: false,\n listFocused: false,\n query: null,\n value: valueProp || null,\n }","valueProp || null","({value}: BaseAutocompleteOption) => (\n <Card data-as=\"button\" padding={paddingProp} radius={2} tone=\"inherit\">\n <Text size={fontSize} textOverflow=\"ellipsis\">\n {value}\n </Text>\n </Card>\n )","{value}: BaseAutocompleteOption","value","useCallback(\n ({value}: BaseAutocompleteOption) => (\n <Card data-as=\"button\" padding={paddingProp} radius={2} tone=\"inherit\">\n <Text size={fontSize} textOverflow=\"ellipsis\">\n {value}\n </Text>\n </Card>\n ),\n [fontSize, paddingProp],\n )","(node: HTMLInputElement | null) => {\n startTransition(() => _setInputElement(node))\n }","useCallback((node: HTMLInputElement | null) => {\n startTransition(() => _setInputElement(node))\n }, [])","() => inputElement","[inputElement]","value !== null ? options.find((o) => o.value === value) : undefined","useMemo(\n () => (value !== null ? options.find((o) => o.value === value) : undefined),\n [options, value],\n )","options.filter((option) => (query ? filterOption(query, option) : true))","(option) => (query ? filterOption(query, option) : true)","useMemo(\n () => options.filter((option) => (query ? filterOption(query, option) : true)),\n [filterOption, options, query],\n )","(event: FocusEvent<HTMLInputElement>) => {\n setTimeout(() => {\n // NOTE: This is a workaround for a bug that may happen in Chrome (clicking the scrollbar\n // closes the results in certain situations):\n // - Do not handle blur if the mouse is within the popover\n if (popoverMouseWithinRef.current) {\n return\n }\n\n const elements: HTMLElement[] = (relatedElements || []).concat(\n rootElementRef.current ? [rootElementRef.current] : [],\n resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : [],\n )\n\n let focusInside = false\n\n if (document.activeElement) {\n for (const e of elements) {\n if (e === document.activeElement || e.contains(document.activeElement)) {\n focusInside = true\n break\n }\n }\n }\n\n // oxlint-disable-next-line no-unnecessary-boolean-literal-compare\n if (focusInside === false) {\n dispatch({type: 'root/blur'})\n popoverMouseWithinRef.current = false\n if (onQueryChange) onQueryChange(null)\n if (onBlur) onBlur(event)\n }\n }, 0)\n }","useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n setTimeout(() => {\n // NOTE: This is a workaround for a bug that may happen in Chrome (clicking the scrollbar\n // closes the results in certain situations):\n // - Do not handle blur if the mouse is within the popover\n if (popoverMouseWithinRef.current) {\n return\n }\n\n const elements: HTMLElement[] = (relatedElements || []).concat(\n rootElementRef.current ? [rootElementRef.current] : [],\n resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : [],\n )\n\n let focusInside = false\n\n if (document.activeElement) {\n for (const e of elements) {\n if (e === document.activeElement || e.contains(document.activeElement)) {\n focusInside = true\n break\n }\n }\n }\n\n // oxlint-disable-next-line no-unnecessary-boolean-literal-compare\n if (focusInside === false) {\n dispatch({type: 'root/blur'})\n popoverMouseWithinRef.current = false\n if (onQueryChange) onQueryChange(null)\n if (onBlur) onBlur(event)\n }\n }, 0)\n },\n [onBlur, onQueryChange, relatedElements],\n )","(event: FocusEvent<HTMLDivElement>) => {\n const listBoxElement = listBoxElementRef.current\n const focusedElement = event.target instanceof HTMLElement ? event.target : null\n const listFocused = listBoxElement?.contains(focusedElement) || false\n\n if (listFocused !== listFocusedRef.current) {\n listFocusedRef.current = listFocused\n\n dispatch({type: 'root/setListFocused', listFocused})\n }\n }","event","listFocused","useCallback((event: FocusEvent<HTMLDivElement>) => {\n const listBoxElement = listBoxElementRef.current\n const focusedElement = event.target instanceof HTMLElement ? event.target : null\n const listFocused = listBoxElement?.contains(focusedElement) || false\n\n if (listFocused !== listFocusedRef.current) {\n listFocusedRef.current = listFocused\n\n dispatch({type: 'root/setListFocused', listFocused})\n }\n }, [])","(v: string) => {\n dispatch({type: 'value/change', value: v})\n\n popoverMouseWithinRef.current = false\n\n if (onSelect) onSelect(v)\n\n valueRef.current = v\n\n if (onChange) onChange(v)\n if (onQueryChange) onQueryChange(null)\n\n inputElementRef.current?.focus()\n }","useCallback(\n (v: string) => {\n dispatch({type: 'value/change', value: v})\n\n popoverMouseWithinRef.current = false\n\n if (onSelect) onSelect(v)\n\n valueRef.current = v\n\n if (onChange) onChange(v)\n if (onQueryChange) onQueryChange(null)\n\n inputElementRef.current?.focus()\n },\n [onChange, onSelect, onQueryChange],\n )","(event: KeyboardEvent<HTMLElement>) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault()\n\n if (!filteredOptionsLen) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1\n const nextActiveOption = filteredOptions[(activeIndex + 1) % filteredOptionsLen]\n\n if (nextActiveOption) {\n dispatch({type: 'root/setActiveValue', value: nextActiveOption.value, listFocused: true})\n }\n\n return\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault()\n\n if (!filteredOptionsLen) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1\n const nextActiveOption =\n filteredOptions[\n activeIndex === -1\n ? filteredOptionsLen - 1\n : (filteredOptionsLen + activeIndex - 1) % filteredOptionsLen\n ]\n\n if (nextActiveOption) {\n dispatch({type: 'root/setActiveValue', value: nextActiveOption.value, listFocused: true})\n }\n\n return\n }\n\n if (event.key === 'Escape') {\n dispatch({type: 'root/escape'})\n popoverMouseWithinRef.current = false\n if (onQueryChange) onQueryChange(null)\n inputElementRef.current?.focus()\n\n return\n }\n\n // oxlint-disable-next-line no-unsafe-type-assertion\n const target = event.target as Node\n const listEl = listBoxElementRef.current\n\n if (\n (listEl === target || listEl?.contains(target)) &&\n !AUTOCOMPLETE_LISTBOX_IGNORE_KEYS.includes(event.key)\n ) {\n inputElementRef.current?.focus()\n\n return\n }\n }","o","activeOption","activeIndex","nextActiveOption","useCallback(\n (event: KeyboardEvent<HTMLElement>) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault()\n\n if (!filteredOptionsLen) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1\n const nextActiveOption = filteredOptions[(activeIndex + 1) % filteredOptionsLen]\n\n if (nextActiveOption) {\n dispatch({type: 'root/setActiveValue', value: nextActiveOption.value, listFocused: true})\n }\n\n return\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault()\n\n if (!filteredOptionsLen) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1\n const nextActiveOption =\n filteredOptions[\n activeIndex === -1\n ? filteredOptionsLen - 1\n : (filteredOptionsLen + activeIndex - 1) % filteredOptionsLen\n ]\n\n if (nextActiveOption) {\n dispatch({type: 'root/setActiveValue', value: nextActiveOption.value, listFocused: true})\n }\n\n return\n }\n\n if (event.key === 'Escape') {\n dispatch({type: 'root/escape'})\n popoverMouseWithinRef.current = false\n if (onQueryChange) onQueryChange(null)\n inputElementRef.current?.focus()\n\n return\n }\n\n // oxlint-disable-next-line no-unsafe-type-assertion\n const target = event.target as Node\n const listEl = listBoxElementRef.current\n\n if (\n (listEl === target || listEl?.contains(target)) &&\n !AUTOCOMPLETE_LISTBOX_IGNORE_KEYS.includes(event.key)\n ) {\n inputElementRef.current?.focus()\n\n return\n }\n },\n [activeValue, filteredOptions, filteredOptionsLen, onQueryChange],\n )","(event: ChangeEvent<HTMLInputElement>) => {\n const nextQuery = event.currentTarget.value\n\n dispatch({type: 'input/change', query: nextQuery})\n\n if (onQueryChange) onQueryChange(nextQuery)\n }","useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const nextQuery = event.currentTarget.value\n\n dispatch({type: 'input/change', query: nextQuery})\n\n if (onQueryChange) onQueryChange(nextQuery)\n },\n [onQueryChange],\n )","() => {\n dispatch({\n type: 'root/open',\n query: value ? renderValue(value, currentOption) : '',\n })\n }","useCallback(() => {\n dispatch({\n type: 'root/open',\n query: value ? renderValue(value, currentOption) : '',\n })\n }, [currentOption, renderValue, value])","(event: FocusEvent<HTMLInputElement>) => {\n if (!focused) {\n dispatch({type: 'input/focus'})\n\n if (onFocus) onFocus(event)\n if (openOnFocus) dispatchOpen()\n }\n }","useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n if (!focused) {\n dispatch({type: 'input/focus'})\n\n if (onFocus) onFocus(event)\n if (openOnFocus) dispatchOpen()\n }\n },\n [focused, onFocus, openOnFocus, dispatchOpen],\n )","() => {\n popoverMouseWithinRef.current = true\n }","useCallback(() => {\n popoverMouseWithinRef.current = true\n }, [])","() => {\n popoverMouseWithinRef.current = false\n }","useCallback(() => {\n popoverMouseWithinRef.current = false\n }, [])","() => {\n dispatch({type: 'root/clear'})\n valueRef.current = ''\n if (onChange) onChange('')\n if (onQueryChange) onQueryChange(null)\n inputElementRef.current?.focus()\n }","useCallback(() => {\n dispatch({type: 'root/clear'})\n valueRef.current = ''\n if (onChange) onChange('')\n if (onQueryChange) onQueryChange(null)\n inputElementRef.current?.focus()\n }, [onChange, onQueryChange])","() => {\n dispatch({type: 'input/focus'})\n }","useCallback(() => {\n dispatch({type: 'input/focus'})\n }, [])","() => {\n // If `valueProp` changed\n if (valueProp !== valuePropRef.current) {\n valuePropRef.current = valueProp\n\n if (valueProp !== undefined) {\n dispatch({type: 'value/change', value: valueProp})\n valueRef.current = valueProp\n }\n\n return\n }\n\n // If `valueProp` is not equal to `value`\n if (valueProp !== valueRef.current) {\n valueRef.current = valueProp || null\n\n dispatch({type: 'value/change', value: valueProp || null})\n }\n }","[valueProp]","() => {\n if (!focused && valueRef.current) {\n dispatch({type: 'root/setActiveValue', value: valueRef.current})\n }\n }","[focused]","() => {\n const listElement = listBoxElementRef.current\n\n if (!listElement) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n\n if (activeOption) {\n const activeIndex = filteredOptions.indexOf(activeOption)\n // oxlint-disable-next-line no-unsafe-type-assertion\n const activeItemElement = listElement.childNodes[activeIndex] as HTMLLIElement | undefined\n\n if (activeItemElement) {\n if (_hasFocus(activeItemElement)) {\n // already focused\n return\n }\n\n focusFirstDescendant(activeItemElement)\n }\n }\n }","[activeValue, filteredOptions]","useMemo(() => {\n if (!loading && !disabled && value) {\n return {\n 'aria-label': 'Clear',\n 'onFocus': handleClearButtonFocus,\n }\n }\n\n return undefined\n }, [disabled, handleClearButtonFocus, loading, value])","{\n 'aria-label': 'Clear',\n 'onFocus': handleClearButtonFocus,\n }","(v) => {\n if (v === 0) return 0\n if (v === 1) return 1\n if (v === 2) return 1\n\n return v - 2\n }","(v) => Math.max(v - 1, 0)","(event: MouseEvent<HTMLButtonElement>) => {\n dispatchOpen()\n\n if (openButtonProps.onClick) openButtonProps.onClick(event)\n\n _raf(() => inputElementRef.current?.focus())\n }","openButtonProps.onClick","useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n dispatchOpen()\n\n if (openButtonProps.onClick) openButtonProps.onClick(event)\n\n _raf(() => inputElementRef.current?.focus())\n },\n [openButtonProps, dispatchOpen],\n )","!disabled && !readOnly && openButton ? (\n <Box aria-hidden={expanded} padding={openButtonBoxPadding}>\n <Button\n aria-label=\"Open\"\n disabled={expanded}\n fontSize={fontSize}\n icon={ChevronDownIcon}\n mode=\"bleed\"\n padding={openButtonPadding}\n {...openButtonProps}\n onClick={handleOpenClick}\n />\n </Box>\n ) : undefined","useMemo(\n () =>\n !disabled && !readOnly && openButton ? (\n <Box aria-hidden={expanded} padding={openButtonBoxPadding}>\n <Button\n aria-label=\"Open\"\n disabled={expanded}\n fontSize={fontSize}\n icon={ChevronDownIcon}\n mode=\"bleed\"\n padding={openButtonPadding}\n {...openButtonProps}\n onClick={handleOpenClick}\n />\n </Box>\n ) : undefined,\n [\n disabled,\n expanded,\n fontSize,\n handleOpenClick,\n openButton,\n openButtonBoxPadding,\n openButtonPadding,\n openButtonProps,\n readOnly,\n ],\n )","useMemo(() => {\n if (query === null) {\n if (value !== null) {\n return renderValue(value, currentOption)\n }\n\n return ''\n }\n\n return query\n }, [currentOption, query, renderValue, value])","renderValue(value, currentOption)","(event: KeyboardEvent<HTMLDivElement>) => {\n // If the focus is currently in the list, move focus to the input element\n if (event.key === 'Tab') {\n if (listFocused) inputElementRef.current?.focus()\n }\n }","useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n // If the focus is currently in the list, move focus to the input element\n if (event.key === 'Tab') {\n if (listFocused) inputElementRef.current?.focus()\n }\n },\n [listFocused],\n )","useMemo(() => {\n if (filteredOptions.length === 0) return null\n\n return (\n <ListBox\n data-ui=\"AutoComplete__results\"\n onKeyDown={handleListBoxKeyDown}\n padding={1}\n {...listBox}\n tabIndex={-1}\n >\n <Stack\n as=\"ul\"\n aria-multiselectable={false}\n data-ui=\"AutoComplete__resultsList\"\n id={listBoxId}\n ref={listBoxElementRef}\n // oxlint-disable-next-line prefer-tag-over-role\n role=\"listbox\"\n gap={1}\n >\n {filteredOptions.map((option) => {\n const active =\n activeValue !== null ? option.value === activeValue : currentOption === option\n\n return (\n <AutocompleteOption\n id={`${id}-option-${option.value}`}\n key={option.value}\n onSelect={handleOptionSelect}\n selected={active}\n value={option.value}\n >\n {cloneElement(renderOption(option), {\n disabled: loading,\n selected: active,\n tabIndex: listFocused && active ? 0 : -1,\n })}\n </AutocompleteOption>\n )\n })}\n </Stack>\n </ListBox>\n )\n }, [\n activeValue,\n currentOption,\n filteredOptions,\n handleOptionSelect,\n handleListBoxKeyDown,\n id,\n listBox,\n listBoxId,\n listFocused,\n loading,\n renderOption,\n ])","filteredOptions.map((option) => {\n const active =\n activeValue !== null ? option.value === activeValue : currentOption === option\n\n return (\n <AutocompleteOption\n id={`${id}-option-${option.value}`}\n key={option.value}\n onSelect={handleOptionSelect}\n selected={active}\n value={option.value}\n >\n {cloneElement(renderOption(option), {\n disabled: loading,\n selected: active,\n tabIndex: listFocused && active ? 0 : -1,\n })}\n </AutocompleteOption>\n )\n })","(option) => {\n const active =\n activeValue !== null ? option.value === activeValue : currentOption === option\n\n return (\n <AutocompleteOption\n id={`${id}-option-${option.value}`}\n key={option.value}\n onSelect={handleOptionSelect}\n selected={active}\n value={option.value}\n >\n {cloneElement(renderOption(option), {\n disabled: loading,\n selected: active,\n tabIndex: listFocused && active ? 0 : -1,\n })}\n </AutocompleteOption>\n )\n }","option","<Stack\n as=\"ul\"\n aria-multiselectable={false}\n data-ui=\"AutoComplete__resultsList\"\n id={listBoxId}\n ref={listBoxElementRef}\n // oxlint-disable-next-line prefer-tag-over-role\n role=\"listbox\"\n gap={1}\n >\n {filteredOptions.map((option) => {\n const active =\n activeValue !== null ? option.value === activeValue : currentOption === option\n\n return (\n <AutocompleteOption\n id={`${id}-option-${option.value}`}\n key={option.value}\n onSelect={handleOptionSelect}\n selected={active}\n value={option.value}\n >\n {cloneElement(renderOption(option), {\n disabled: loading,\n selected: active,\n tabIndex: listFocused && active ? 0 : -1,\n })}\n </AutocompleteOption>\n )\n })}\n </Stack>","<ListBox\n data-ui=\"AutoComplete__results\"\n onKeyDown={handleListBoxKeyDown}\n padding={1}\n {...listBox}\n tabIndex={-1}\n >\n <Stack\n as=\"ul\"\n aria-multiselectable={false}\n data-ui=\"AutoComplete__resultsList\"\n id={listBoxId}\n ref={listBoxElementRef}\n // oxlint-disable-next-line prefer-tag-over-role\n role=\"listbox\"\n gap={1}\n >\n {filteredOptions.map((option) => {\n const active =\n activeValue !== null ? option.value === activeValue : currentOption === option\n\n return (\n <AutocompleteOption\n id={`${id}-option-${option.value}`}\n key={option.value}\n onSelect={handleOptionSelect}\n selected={active}\n value={option.value}\n >\n {cloneElement(renderOption(option), {\n disabled: loading,\n selected: active,\n tabIndex: listFocused && active ? 0 : -1,\n })}\n </AutocompleteOption>\n )\n })}\n </Stack>\n </ListBox>","useMemo(() => {\n if (renderPopover) {\n return (\n <RenderPopover\n content={content}\n hidden={!expanded}\n inputElement={inputElement}\n onMouseEnter={handlePopoverMouseEnter}\n onMouseLeave={handlePopoverMouseLeave}\n resultsPopoverElementRef={resultsPopoverElementRef}\n renderPopover={renderPopover}\n />\n )\n }\n\n if (filteredOptionsLen === 0) {\n return null\n }\n\n return (\n <Popover\n arrow={false}\n constrainSize\n content={content}\n fallbackPlacements={AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS}\n matchReferenceWidth\n onMouseEnter={handlePopoverMouseEnter}\n onMouseLeave={handlePopoverMouseLeave}\n open={expanded}\n overflow=\"auto\"\n placement={AUTOCOMPLETE_POPOVER_PLACEMENT}\n portal\n radius={radius}\n ref={resultsPopoverElementRef}\n referenceElement={inputElement}\n {...popover}\n />\n )\n }, [\n content,\n expanded,\n filteredOptionsLen,\n handlePopoverMouseEnter,\n handlePopoverMouseLeave,\n inputElement,\n popover,\n radius,\n renderPopover,\n ])","<RenderPopover\n content={content}\n hidden={!expanded}\n inputElement={inputElement}\n onMouseEnter={handlePopoverMouseEnter}\n onMouseLeave={handlePopoverMouseLeave}\n resultsPopoverElementRef={resultsPopoverElementRef}\n renderPopover={renderPopover}\n />","!expanded","<Popover\n arrow={false}\n constrainSize\n content={content}\n fallbackPlacements={AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS}\n matchReferenceWidth\n onMouseEnter={handlePopoverMouseEnter}\n onMouseLeave={handlePopoverMouseLeave}\n open={expanded}\n overflow=\"auto\"\n placement={AUTOCOMPLETE_POPOVER_PLACEMENT}\n portal\n radius={radius}\n ref={resultsPopoverElementRef}\n referenceElement={inputElement}\n {...popover}\n />","loading && <SpinnerIcon className={spinnerIcon} />","<TextInput\n {...restProps}\n aria-activedescendant={activeItemId}\n aria-autocomplete=\"list\"\n aria-expanded={expanded}\n aria-owns={listBoxId}\n autoCapitalize=\"off\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n border={border}\n clearButton={clearButton}\n customValidity={customValidity}\n disabled={disabled}\n fontSize={fontSize}\n icon={icon}\n iconRight={loading && <SpinnerIcon className={spinnerIcon} />}\n id={id}\n inputMode=\"search\"\n onChange={handleInputChange}\n onClear={handleClearButtonClick}\n onFocus={handleInputFocus}\n padding={padding}\n prefix={prefix}\n radius={radius}\n readOnly={readOnly}\n ref={setInputElement}\n // oxlint-disable-next-line prefer-tag-over-role, role-has-required-aria-props\n role=\"combobox\"\n spellCheck={false}\n suffix={suffix || openButtonNode}\n value={inputValue}\n />","suffix || openButtonNode","<StyledAutocomplete\n data-ui=\"Autocomplete\"\n onBlur={handleRootBlur}\n onFocus={handleRootFocus}\n onKeyDown={handleRootKeyDown}\n ref={rootElementRef}\n >\n <TextInput\n {...restProps}\n aria-activedescendant={activeItemId}\n aria-autocomplete=\"list\"\n aria-expanded={expanded}\n aria-owns={listBoxId}\n autoCapitalize=\"off\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n border={border}\n clearButton={clearButton}\n customValidity={customValidity}\n disabled={disabled}\n fontSize={fontSize}\n icon={icon}\n iconRight={loading && <SpinnerIcon className={spinnerIcon} />}\n id={id}\n inputMode=\"search\"\n onChange={handleInputChange}\n onClear={handleClearButtonClick}\n onFocus={handleInputFocus}\n padding={padding}\n prefix={prefix}\n radius={radius}\n readOnly={readOnly}\n ref={setInputElement}\n // oxlint-disable-next-line prefer-tag-over-role, role-has-required-aria-props\n role=\"combobox\"\n spellCheck={false}\n suffix={suffix || openButtonNode}\n value={inputValue}\n />\n {results}\n </StyledAutocomplete>","v"],"sources":["../src/core/components/autocomplete/autocomplete.styles.tsx","../src/core/components/autocomplete/autocompleteOption.tsx","../src/core/components/autocomplete/autocompleteReducer.ts","../src/core/components/autocomplete/constants.ts","../src/core/components/autocomplete/autocomplete.tsx"],"sourcesContent":["import {styled} from 'styled-components'\n\nimport {Box} from '../../primitives/box/box'\n\n/**\n * @internal\n */\nexport const StyledAutocomplete = styled.div`\n line-height: 0;\n`\n\n/**\n * @internal\n */\nexport const ListBox = styled(Box)`\n & > ul {\n list-style: none;\n padding: 0;\n margin: 0;\n }\n`\n","import {useCallback} from 'react'\n\nimport {_isEnterToClickElement} from '../../helpers/element'\n\nexport interface AutocompleteOptionProps {\n children: React.ReactNode\n id: string\n onSelect: (v: string) => void\n selected: boolean\n value: string\n}\n\nexport function AutocompleteOption(props: AutocompleteOptionProps): React.JSX.Element {\n const {children, id, onSelect, selected, value} = props\n\n const handleClick = useCallback(() => {\n // Calling the `onSelect` in a timeout is a fix to\n // allow the `click` event to propagate in some cases\n setTimeout(() => {\n onSelect(value)\n }, 0)\n }, [onSelect, value])\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLLIElement>) => {\n if (event.key === 'Enter' && !_isEnterToClickElement(event.currentTarget)) {\n handleClick()\n }\n },\n [handleClick],\n )\n\n return (\n <li\n aria-selected={selected}\n data-ui=\"AutocompleteOption\"\n id={id}\n // oxlint-disable-next-line no-noninteractive-element-to-interactive-role, prefer-tag-over-role\n role=\"option\"\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n >\n {children}\n </li>\n )\n}\n","import {AutocompleteMsg, AutocompleteState} from './types'\n\n/**\n * @internal\n */\nexport function autocompleteReducer(\n state: AutocompleteState,\n msg: AutocompleteMsg,\n): AutocompleteState {\n if (msg.type === 'input/change') {\n return {...state, activeValue: null, focused: true, query: msg.query}\n }\n\n if (msg.type === 'input/focus') {\n return {...state, focused: true}\n }\n\n if (msg.type === 'root/blur') {\n return {...state, focused: false, query: null}\n }\n\n if (msg.type === 'root/clear') {\n return {...state, activeValue: null, query: null, value: null}\n }\n\n if (msg.type === 'root/escape') {\n return {...state, focused: false, query: null}\n }\n\n if (msg.type === 'root/open') {\n return {...state, query: state.query || msg.query}\n }\n\n if (msg.type === 'root/setActiveValue') {\n return {...state, activeValue: msg.value, listFocused: msg.listFocused || state.listFocused}\n }\n\n if (msg.type === 'root/setListFocused') {\n return {...state, listFocused: msg.listFocused}\n }\n\n if (msg.type === 'value/change') {\n return {...state, activeValue: msg.value, query: null, value: msg.value}\n }\n\n return state\n}\n","import {Placement} from '../../types/placement'\n\n/**\n * @internal\n */\nexport const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [\n 'Control',\n 'Shift',\n 'Alt',\n 'Enter',\n 'Home',\n 'End',\n 'PageUp',\n 'PageDown',\n 'Meta',\n 'Tab',\n 'CapsLock',\n]\n\n/**\n * @internal\n */\nexport const AUTOCOMPLETE_POPOVER_PLACEMENT: Placement = 'bottom-start'\n\n/**\n * @internal\n */\nexport const AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS: Placement[] = ['bottom-start', 'top-start']\n","import {ChevronDownIcon} from '@sanity/icons/ChevronDown'\nimport {SpinnerIcon} from '@sanity/icons/Spinner'\nimport {\n ChangeEvent,\n cloneElement,\n ElementType,\n FocusEvent,\n HTMLProps,\n KeyboardEvent,\n MouseEvent,\n ReactNode,\n Ref,\n startTransition,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useReducer,\n useRef,\n useState,\n} from 'react'\n\nimport {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'\nimport {_raf} from '../../helpers/animation'\nimport {_hasFocus, focusFirstDescendant} from '../../helpers/focus'\nimport {Box, BoxProps} from '../../primitives/box/box'\nimport {Button} from '../../primitives/button/button'\nimport {Card} from '../../primitives/card/card'\nimport {Popover, PopoverProps} from '../../primitives/popover/popover'\nimport {Stack} from '../../primitives/stack/stack'\nimport {Text} from '../../primitives/text/text'\nimport {TextInput} from '../../primitives/textInput/textInput'\nimport {_getArrayProp} from '../../styles/helpers'\nimport {Radius} from '../../types/radius'\nimport {ListBox, StyledAutocomplete} from './autocomplete.styles'\nimport {AutocompleteOption} from './autocompleteOption'\nimport {autocompleteReducer} from './autocompleteReducer'\nimport {\n AUTOCOMPLETE_LISTBOX_IGNORE_KEYS,\n AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS,\n AUTOCOMPLETE_POPOVER_PLACEMENT,\n} from './constants'\nimport {AutocompleteOpenButtonProps, BaseAutocompleteOption} from './types'\n\nimport {spinnerIcon} from '../../primitives/spinner/spinner.css'\n\n/**\n * @public\n */\nexport interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseAutocompleteOption> {\n border?: boolean\n customValidity?: string\n filterOption?: (query: string, option: Option) => boolean\n fontSize?: number | number[]\n // oxlint-disable-next-line no-redundant-type-constituents\n icon?: ElementType | ReactNode\n id: string\n /** @beta */\n listBox?: BoxProps\n loading?: boolean\n onChange?: (value: string) => void\n onQueryChange?: (query: string | null) => void\n onSelect?: (value: string) => void\n /** @beta */\n openButton?: boolean | AutocompleteOpenButtonProps\n /** @beta */\n openOnFocus?: boolean\n /** The options to render. */\n options?: Option[]\n padding?: number | number[]\n popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> &\n Omit<HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'ref' | 'width'>\n prefix?: ReactNode\n radius?: Radius | Radius[]\n /** @beta */\n relatedElements?: HTMLElement[]\n /** The callback function for rendering each option. */\n renderOption?: (option: Option) => React.JSX.Element\n /** @beta */\n renderPopover?: (\n props: {\n content: React.JSX.Element | null\n hidden: boolean\n inputElement: HTMLInputElement | null\n onMouseEnter: () => void\n onMouseLeave: () => void\n },\n ref: Ref<HTMLDivElement>,\n ) => ReactNode\n renderValue?: (value: string, option?: Option) => string\n suffix?: ReactNode\n /** The current value. */\n value?: string\n}\n\nconst DEFAULT_RENDER_VALUE = (value: string, option?: BaseAutocompleteOption) =>\n option ? option.value : value\n\nconst DEFAULT_FILTER_OPTION = (query: string, option: BaseAutocompleteOption) =>\n option.value.toLowerCase().indexOf(query.toLowerCase()) > -1\n\n/**\n * The Autocomplete component is typically used for search components.\n * It consists of a text input for writing a query, and properties for rendering suggestions.\n *\n * @public\n */\nexport function Autocomplete<Option extends BaseAutocompleteOption>(\n props: AutocompleteProps<Option> &\n Omit<\n HTMLProps<HTMLInputElement>,\n | 'aria-activedescendant'\n | 'aria-autocomplete'\n | 'aria-expanded'\n | 'aria-owns'\n | 'as'\n | 'autoCapitalize'\n | 'autoComplete'\n | 'autoCorrect'\n | 'id'\n | 'inputMode'\n | 'onChange'\n | 'onSelect'\n | 'popover'\n | 'prefix'\n | 'role'\n | 'spellCheck'\n | 'type'\n | 'value'\n >,\n) {\n const {\n border = true,\n customValidity,\n disabled,\n filterOption: filterOptionProp,\n fontSize = 2,\n icon,\n id,\n listBox = EMPTY_RECORD,\n loading,\n onBlur,\n onChange,\n onFocus,\n onQueryChange,\n onSelect,\n openButton,\n openOnFocus,\n options: optionsProp,\n padding: paddingProp = 3,\n popover = EMPTY_RECORD,\n prefix,\n radius = 2,\n readOnly,\n ref: forwardedRef,\n relatedElements,\n renderOption: renderOptionProp,\n renderPopover,\n renderValue = DEFAULT_RENDER_VALUE,\n suffix,\n value: valueProp,\n ...restProps\n } = props\n\n const [state, dispatch] = useReducer(autocompleteReducer, {\n activeValue: valueProp || null,\n focused: false,\n listFocused: false,\n query: null,\n value: valueProp || null,\n })\n\n const {activeValue, focused, listFocused, query, value} = state\n\n const defaultRenderOption = useCallback(\n ({value}: BaseAutocompleteOption) => (\n <Card data-as=\"button\" padding={paddingProp} radius={2} tone=\"inherit\">\n <Text size={fontSize} textOverflow=\"ellipsis\">\n {value}\n </Text>\n </Card>\n ),\n [fontSize, paddingProp],\n )\n\n const renderOption =\n typeof renderOptionProp === 'function' ? renderOptionProp : defaultRenderOption\n\n const filterOption =\n typeof filterOptionProp === 'function' ? filterOptionProp : DEFAULT_FILTER_OPTION\n\n // Element refs\n const rootElementRef = useRef<HTMLDivElement | null>(null)\n const resultsPopoverElementRef = useRef<HTMLDivElement | null>(null)\n const inputElementRef = useRef<HTMLInputElement | null>(null)\n const listBoxElementRef = useRef<HTMLUListElement | null>(null)\n // Element refs that need to be accessed during render\n const [inputElement, _setInputElement] = useState<HTMLInputElement | null>(null)\n /**\n * The startTransition wrapper here is to avoid an issue when on React 18 where this error can happen:\n * >Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.\n * This doesn't happen on React 19 due to automatic batching of all state updates, the startTransition wrapper here gives a type of batching for 18 users in a way that still works with 19.\n * NOTE: The startTransition wrapper is not needed in UI v4, since the baseline there is React 19.\n */\n const setInputElement = useCallback((node: HTMLInputElement | null) => {\n startTransition(() => _setInputElement(node))\n }, [])\n\n // Value refs\n const listFocusedRef = useRef(false)\n const valueRef = useRef(value)\n const valuePropRef = useRef(valueProp)\n const popoverMouseWithinRef = useRef(false)\n\n // Forward inputElement state to inputElementRef\n useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n inputElementRef,\n () => inputElement,\n [inputElement],\n )\n // Forward inputElement to parent\n useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n forwardedRef,\n () => inputElement,\n [inputElement],\n )\n\n const listBoxId = `${id}-listbox`\n const options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY\n const padding = _getArrayProp(paddingProp)\n const currentOption = useMemo(\n () => (value !== null ? options.find((o) => o.value === value) : undefined),\n [options, value],\n )\n const filteredOptions = useMemo(\n () => options.filter((option) => (query ? filterOption(query, option) : true)),\n [filterOption, options, query],\n )\n const filteredOptionsLen = filteredOptions.length\n const activeItemId = activeValue ? `${id}-option-${activeValue}` : undefined\n const expanded = (query !== null && loading) || (focused && query !== null)\n\n const handleRootBlur = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n setTimeout(() => {\n // NOTE: This is a workaround for a bug that may happen in Chrome (clicking the scrollbar\n // closes the results in certain situations):\n // - Do not handle blur if the mouse is within the popover\n if (popoverMouseWithinRef.current) {\n return\n }\n\n const elements: HTMLElement[] = (relatedElements || []).concat(\n rootElementRef.current ? [rootElementRef.current] : [],\n resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : [],\n )\n\n let focusInside = false\n\n if (document.activeElement) {\n for (const e of elements) {\n if (e === document.activeElement || e.contains(document.activeElement)) {\n focusInside = true\n break\n }\n }\n }\n\n // oxlint-disable-next-line no-unnecessary-boolean-literal-compare\n if (focusInside === false) {\n dispatch({type: 'root/blur'})\n popoverMouseWithinRef.current = false\n if (onQueryChange) onQueryChange(null)\n if (onBlur) onBlur(event)\n }\n }, 0)\n },\n [onBlur, onQueryChange, relatedElements],\n )\n\n const handleRootFocus = useCallback((event: FocusEvent<HTMLDivElement>) => {\n const listBoxElement = listBoxElementRef.current\n const focusedElement = event.target instanceof HTMLElement ? event.target : null\n const listFocused = listBoxElement?.contains(focusedElement) || false\n\n if (listFocused !== listFocusedRef.current) {\n listFocusedRef.current = listFocused\n\n dispatch({type: 'root/setListFocused', listFocused})\n }\n }, [])\n\n const handleOptionSelect = useCallback(\n (v: string) => {\n dispatch({type: 'value/change', value: v})\n\n popoverMouseWithinRef.current = false\n\n if (onSelect) onSelect(v)\n\n valueRef.current = v\n\n if (onChange) onChange(v)\n if (onQueryChange) onQueryChange(null)\n\n inputElementRef.current?.focus()\n },\n [onChange, onSelect, onQueryChange],\n )\n\n const handleRootKeyDown = useCallback(\n (event: KeyboardEvent<HTMLElement>) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault()\n\n if (!filteredOptionsLen) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1\n const nextActiveOption = filteredOptions[(activeIndex + 1) % filteredOptionsLen]\n\n if (nextActiveOption) {\n dispatch({type: 'root/setActiveValue', value: nextActiveOption.value, listFocused: true})\n }\n\n return\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault()\n\n if (!filteredOptionsLen) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1\n const nextActiveOption =\n filteredOptions[\n activeIndex === -1\n ? filteredOptionsLen - 1\n : (filteredOptionsLen + activeIndex - 1) % filteredOptionsLen\n ]\n\n if (nextActiveOption) {\n dispatch({type: 'root/setActiveValue', value: nextActiveOption.value, listFocused: true})\n }\n\n return\n }\n\n if (event.key === 'Escape') {\n dispatch({type: 'root/escape'})\n popoverMouseWithinRef.current = false\n if (onQueryChange) onQueryChange(null)\n inputElementRef.current?.focus()\n\n return\n }\n\n // oxlint-disable-next-line no-unsafe-type-assertion\n const target = event.target as Node\n const listEl = listBoxElementRef.current\n\n if (\n (listEl === target || listEl?.contains(target)) &&\n !AUTOCOMPLETE_LISTBOX_IGNORE_KEYS.includes(event.key)\n ) {\n inputElementRef.current?.focus()\n\n return\n }\n },\n [activeValue, filteredOptions, filteredOptionsLen, onQueryChange],\n )\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const nextQuery = event.currentTarget.value\n\n dispatch({type: 'input/change', query: nextQuery})\n\n if (onQueryChange) onQueryChange(nextQuery)\n },\n [onQueryChange],\n )\n\n const dispatchOpen = useCallback(() => {\n dispatch({\n type: 'root/open',\n query: value ? renderValue(value, currentOption) : '',\n })\n }, [currentOption, renderValue, value])\n\n const handleInputFocus = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n if (!focused) {\n dispatch({type: 'input/focus'})\n\n if (onFocus) onFocus(event)\n if (openOnFocus) dispatchOpen()\n }\n },\n [focused, onFocus, openOnFocus, dispatchOpen],\n )\n\n const handlePopoverMouseEnter = useCallback(() => {\n popoverMouseWithinRef.current = true\n }, [])\n\n const handlePopoverMouseLeave = useCallback(() => {\n popoverMouseWithinRef.current = false\n }, [])\n\n const handleClearButtonClick = useCallback(() => {\n dispatch({type: 'root/clear'})\n valueRef.current = ''\n if (onChange) onChange('')\n if (onQueryChange) onQueryChange(null)\n inputElementRef.current?.focus()\n }, [onChange, onQueryChange])\n\n const handleClearButtonFocus = useCallback(() => {\n dispatch({type: 'input/focus'})\n }, [])\n\n // Change the value when `value` prop changes\n useEffect(() => {\n // If `valueProp` changed\n if (valueProp !== valuePropRef.current) {\n valuePropRef.current = valueProp\n\n if (valueProp !== undefined) {\n dispatch({type: 'value/change', value: valueProp})\n valueRef.current = valueProp\n }\n\n return\n }\n\n // If `valueProp` is not equal to `value`\n if (valueProp !== valueRef.current) {\n valueRef.current = valueProp || null\n\n dispatch({type: 'value/change', value: valueProp || null})\n }\n }, [valueProp])\n\n // Reset active item when closing\n useEffect(() => {\n if (!focused && valueRef.current) {\n dispatch({type: 'root/setActiveValue', value: valueRef.current})\n }\n }, [focused])\n\n // Focus the selected item\n useEffect(() => {\n const listElement = listBoxElementRef.current\n\n if (!listElement) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n\n if (activeOption) {\n const activeIndex = filteredOptions.indexOf(activeOption)\n // oxlint-disable-next-line no-unsafe-type-assertion\n const activeItemElement = listElement.childNodes[activeIndex] as HTMLLIElement | undefined\n\n if (activeItemElement) {\n if (_hasFocus(activeItemElement)) {\n // already focused\n return\n }\n\n focusFirstDescendant(activeItemElement)\n }\n }\n }, [activeValue, filteredOptions])\n\n const clearButton = useMemo(() => {\n if (!loading && !disabled && value) {\n return {\n 'aria-label': 'Clear',\n 'onFocus': handleClearButtonFocus,\n }\n }\n\n return undefined\n }, [disabled, handleClearButtonFocus, loading, value])\n\n const openButtonBoxPadding = padding.map((v) => {\n if (v === 0) return 0\n if (v === 1) return 1\n if (v === 2) return 1\n\n return v - 2\n })\n const openButtonPadding = padding.map((v) => Math.max(v - 1, 0))\n const openButtonProps: AutocompleteOpenButtonProps = useMemo(\n () => (typeof openButton === 'object' ? openButton : EMPTY_RECORD),\n [openButton],\n )\n\n const handleOpenClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n dispatchOpen()\n\n if (openButtonProps.onClick) openButtonProps.onClick(event)\n\n _raf(() => inputElementRef.current?.focus())\n },\n [openButtonProps, dispatchOpen],\n )\n\n const openButtonNode = useMemo(\n () =>\n !disabled && !readOnly && openButton ? (\n <Box aria-hidden={expanded} padding={openButtonBoxPadding}>\n <Button\n aria-label=\"Open\"\n disabled={expanded}\n fontSize={fontSize}\n icon={ChevronDownIcon}\n mode=\"bleed\"\n padding={openButtonPadding}\n {...openButtonProps}\n onClick={handleOpenClick}\n />\n </Box>\n ) : undefined,\n [\n disabled,\n expanded,\n fontSize,\n handleOpenClick,\n openButton,\n openButtonBoxPadding,\n openButtonPadding,\n openButtonProps,\n readOnly,\n ],\n )\n\n const inputValue = useMemo(() => {\n if (query === null) {\n if (value !== null) {\n return renderValue(value, currentOption)\n }\n\n return ''\n }\n\n return query\n }, [currentOption, query, renderValue, value])\n\n const handleListBoxKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n // If the focus is currently in the list, move focus to the input element\n if (event.key === 'Tab') {\n if (listFocused) inputElementRef.current?.focus()\n }\n },\n [listFocused],\n )\n\n const content = useMemo(() => {\n if (filteredOptions.length === 0) return null\n\n return (\n <ListBox\n data-ui=\"AutoComplete__results\"\n onKeyDown={handleListBoxKeyDown}\n padding={1}\n {...listBox}\n tabIndex={-1}\n >\n <Stack\n as=\"ul\"\n aria-multiselectable={false}\n data-ui=\"AutoComplete__resultsList\"\n id={listBoxId}\n ref={listBoxElementRef}\n // oxlint-disable-next-line prefer-tag-over-role\n role=\"listbox\"\n gap={1}\n >\n {filteredOptions.map((option) => {\n const active =\n activeValue !== null ? option.value === activeValue : currentOption === option\n\n return (\n <AutocompleteOption\n id={`${id}-option-${option.value}`}\n key={option.value}\n onSelect={handleOptionSelect}\n selected={active}\n value={option.value}\n >\n {cloneElement(renderOption(option), {\n disabled: loading,\n selected: active,\n tabIndex: listFocused && active ? 0 : -1,\n })}\n </AutocompleteOption>\n )\n })}\n </Stack>\n </ListBox>\n )\n }, [\n activeValue,\n currentOption,\n filteredOptions,\n handleOptionSelect,\n handleListBoxKeyDown,\n id,\n listBox,\n listBoxId,\n listFocused,\n loading,\n renderOption,\n ])\n\n const results = useMemo(() => {\n if (renderPopover) {\n return (\n <RenderPopover\n content={content}\n hidden={!expanded}\n inputElement={inputElement}\n onMouseEnter={handlePopoverMouseEnter}\n onMouseLeave={handlePopoverMouseLeave}\n resultsPopoverElementRef={resultsPopoverElementRef}\n renderPopover={renderPopover}\n />\n )\n }\n\n if (filteredOptionsLen === 0) {\n return null\n }\n\n return (\n <Popover\n arrow={false}\n constrainSize\n content={content}\n fallbackPlacements={AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS}\n matchReferenceWidth\n onMouseEnter={handlePopoverMouseEnter}\n onMouseLeave={handlePopoverMouseLeave}\n open={expanded}\n overflow=\"auto\"\n placement={AUTOCOMPLETE_POPOVER_PLACEMENT}\n portal\n radius={radius}\n ref={resultsPopoverElementRef}\n referenceElement={inputElement}\n {...popover}\n />\n )\n }, [\n content,\n expanded,\n filteredOptionsLen,\n handlePopoverMouseEnter,\n handlePopoverMouseLeave,\n inputElement,\n popover,\n radius,\n renderPopover,\n ])\n\n return (\n <StyledAutocomplete\n data-ui=\"Autocomplete\"\n onBlur={handleRootBlur}\n onFocus={handleRootFocus}\n onKeyDown={handleRootKeyDown}\n ref={rootElementRef}\n >\n <TextInput\n {...restProps}\n aria-activedescendant={activeItemId}\n aria-autocomplete=\"list\"\n aria-expanded={expanded}\n aria-owns={listBoxId}\n autoCapitalize=\"off\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n border={border}\n clearButton={clearButton}\n customValidity={customValidity}\n disabled={disabled}\n fontSize={fontSize}\n icon={icon}\n iconRight={loading && <SpinnerIcon className={spinnerIcon} />}\n id={id}\n inputMode=\"search\"\n onChange={handleInputChange}\n onClear={handleClearButtonClick}\n onFocus={handleInputFocus}\n padding={padding}\n prefix={prefix}\n radius={radius}\n readOnly={readOnly}\n ref={setInputElement}\n // oxlint-disable-next-line prefer-tag-over-role, role-has-required-aria-props\n role=\"combobox\"\n spellCheck={false}\n suffix={suffix || openButtonNode}\n value={inputValue}\n />\n {results}\n </StyledAutocomplete>\n )\n}\n\nfunction RenderPopover({\n renderPopover,\n content,\n hidden,\n inputElement,\n onMouseEnter,\n onMouseLeave,\n resultsPopoverElementRef,\n}: {\n renderPopover: Exclude<AutocompleteProps['renderPopover'], undefined>\n resultsPopoverElementRef: Parameters<Exclude<AutocompleteProps['renderPopover'], undefined>>[1]\n} & Parameters<Exclude<AutocompleteProps['renderPopover'], undefined>>[0]) {\n return renderPopover(\n {\n content,\n hidden,\n inputElement,\n onMouseEnter,\n onMouseLeave,\n },\n resultsPopoverElementRef,\n )\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"autocomplete.js","names":["() => {\n // Calling the `onSelect` in a timeout is a fix to\n // allow the `click` event to propagate in some cases\n setTimeout(() => {\n onSelect(value)\n }, 0)\n }","useCallback(() => {\n // Calling the `onSelect` in a timeout is a fix to\n // allow the `click` event to propagate in some cases\n setTimeout(() => {\n onSelect(value)\n }, 0)\n }, [onSelect, value])","(event: React.KeyboardEvent<HTMLLIElement>) => {\n if (event.key === 'Enter' && !_isEnterToClickElement(event.currentTarget)) {\n handleClick()\n }\n }","useCallback(\n (event: React.KeyboardEvent<HTMLLIElement>) => {\n if (event.key === 'Enter' && !_isEnterToClickElement(event.currentTarget)) {\n handleClick()\n }\n },\n [handleClick],\n )","<li\n aria-selected={selected}\n data-ui=\"AutocompleteOption\"\n id={id}\n // oxlint-disable-next-line no-noninteractive-element-to-interactive-role, prefer-tag-over-role\n role=\"option\"\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n >\n {children}\n </li>","border = true","fontSize = 2","listBox = EMPTY_RECORD","paddingProp = 3","popover = EMPTY_RECORD","radius = 2","renderValue = DEFAULT_RENDER_VALUE","{\n activeValue: valueProp || null,\n focused: false,\n listFocused: false,\n query: null,\n value: valueProp || null,\n }","valueProp || null","({value}: BaseAutocompleteOption) => (\n <Card data-as=\"button\" padding={paddingProp} radius={2} tone=\"inherit\">\n <Text size={fontSize} textOverflow=\"ellipsis\">\n {value}\n </Text>\n </Card>\n )","{value}: BaseAutocompleteOption","value","useCallback(\n ({value}: BaseAutocompleteOption) => (\n <Card data-as=\"button\" padding={paddingProp} radius={2} tone=\"inherit\">\n <Text size={fontSize} textOverflow=\"ellipsis\">\n {value}\n </Text>\n </Card>\n ),\n [fontSize, paddingProp],\n )","(node: HTMLInputElement | null) => {\n startTransition(() => _setInputElement(node))\n }","useCallback((node: HTMLInputElement | null) => {\n startTransition(() => _setInputElement(node))\n }, [])","() => inputElement","[inputElement]","value !== null ? options.find((o) => o.value === value) : undefined","useMemo(\n () => (value !== null ? options.find((o) => o.value === value) : undefined),\n [options, value],\n )","options.filter((option) => (query ? filterOption(query, option) : true))","(option) => (query ? filterOption(query, option) : true)","useMemo(\n () => options.filter((option) => (query ? filterOption(query, option) : true)),\n [filterOption, options, query],\n )","(event: FocusEvent<HTMLInputElement>) => {\n setTimeout(() => {\n // NOTE: This is a workaround for a bug that may happen in Chrome (clicking the scrollbar\n // closes the results in certain situations):\n // - Do not handle blur if the mouse is within the popover\n if (popoverMouseWithinRef.current) {\n return\n }\n\n const elements: HTMLElement[] = (relatedElements || []).concat(\n rootElementRef.current ? [rootElementRef.current] : [],\n resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : [],\n )\n\n let focusInside = false\n\n if (document.activeElement) {\n for (const e of elements) {\n if (e === document.activeElement || e.contains(document.activeElement)) {\n focusInside = true\n break\n }\n }\n }\n\n // oxlint-disable-next-line no-unnecessary-boolean-literal-compare\n if (focusInside === false) {\n dispatch({type: 'root/blur'})\n popoverMouseWithinRef.current = false\n if (onQueryChange) onQueryChange(null)\n if (onBlur) onBlur(event)\n }\n }, 0)\n }","useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n setTimeout(() => {\n // NOTE: This is a workaround for a bug that may happen in Chrome (clicking the scrollbar\n // closes the results in certain situations):\n // - Do not handle blur if the mouse is within the popover\n if (popoverMouseWithinRef.current) {\n return\n }\n\n const elements: HTMLElement[] = (relatedElements || []).concat(\n rootElementRef.current ? [rootElementRef.current] : [],\n resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : [],\n )\n\n let focusInside = false\n\n if (document.activeElement) {\n for (const e of elements) {\n if (e === document.activeElement || e.contains(document.activeElement)) {\n focusInside = true\n break\n }\n }\n }\n\n // oxlint-disable-next-line no-unnecessary-boolean-literal-compare\n if (focusInside === false) {\n dispatch({type: 'root/blur'})\n popoverMouseWithinRef.current = false\n if (onQueryChange) onQueryChange(null)\n if (onBlur) onBlur(event)\n }\n }, 0)\n },\n [onBlur, onQueryChange, relatedElements],\n )","(event: FocusEvent<HTMLDivElement>) => {\n const listBoxElement = listBoxElementRef.current\n const focusedElement = event.target instanceof HTMLElement ? event.target : null\n const listFocused = listBoxElement?.contains(focusedElement) || false\n\n if (listFocused !== listFocusedRef.current) {\n listFocusedRef.current = listFocused\n\n dispatch({type: 'root/setListFocused', listFocused})\n }\n }","event","listFocused","useCallback((event: FocusEvent<HTMLDivElement>) => {\n const listBoxElement = listBoxElementRef.current\n const focusedElement = event.target instanceof HTMLElement ? event.target : null\n const listFocused = listBoxElement?.contains(focusedElement) || false\n\n if (listFocused !== listFocusedRef.current) {\n listFocusedRef.current = listFocused\n\n dispatch({type: 'root/setListFocused', listFocused})\n }\n }, [])","(v: string) => {\n dispatch({type: 'value/change', value: v})\n\n popoverMouseWithinRef.current = false\n\n if (onSelect) onSelect(v)\n\n valueRef.current = v\n\n if (onChange) onChange(v)\n if (onQueryChange) onQueryChange(null)\n\n inputElementRef.current?.focus()\n }","useCallback(\n (v: string) => {\n dispatch({type: 'value/change', value: v})\n\n popoverMouseWithinRef.current = false\n\n if (onSelect) onSelect(v)\n\n valueRef.current = v\n\n if (onChange) onChange(v)\n if (onQueryChange) onQueryChange(null)\n\n inputElementRef.current?.focus()\n },\n [onChange, onSelect, onQueryChange],\n )","(event: KeyboardEvent<HTMLElement>) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault()\n\n if (!filteredOptionsLen) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1\n const nextActiveOption = filteredOptions[(activeIndex + 1) % filteredOptionsLen]\n\n if (nextActiveOption) {\n dispatch({type: 'root/setActiveValue', value: nextActiveOption.value, listFocused: true})\n }\n\n return\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault()\n\n if (!filteredOptionsLen) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1\n const nextActiveOption =\n filteredOptions[\n activeIndex === -1\n ? filteredOptionsLen - 1\n : (filteredOptionsLen + activeIndex - 1) % filteredOptionsLen\n ]\n\n if (nextActiveOption) {\n dispatch({type: 'root/setActiveValue', value: nextActiveOption.value, listFocused: true})\n }\n\n return\n }\n\n if (event.key === 'Escape') {\n dispatch({type: 'root/escape'})\n popoverMouseWithinRef.current = false\n if (onQueryChange) onQueryChange(null)\n inputElementRef.current?.focus()\n\n return\n }\n\n // oxlint-disable-next-line no-unsafe-type-assertion\n const target = event.target as Node\n const listEl = listBoxElementRef.current\n\n if (\n (listEl === target || listEl?.contains(target)) &&\n !AUTOCOMPLETE_LISTBOX_IGNORE_KEYS.includes(event.key)\n ) {\n inputElementRef.current?.focus()\n\n return\n }\n }","o","activeOption","activeIndex","nextActiveOption","useCallback(\n (event: KeyboardEvent<HTMLElement>) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault()\n\n if (!filteredOptionsLen) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1\n const nextActiveOption = filteredOptions[(activeIndex + 1) % filteredOptionsLen]\n\n if (nextActiveOption) {\n dispatch({type: 'root/setActiveValue', value: nextActiveOption.value, listFocused: true})\n }\n\n return\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault()\n\n if (!filteredOptionsLen) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1\n const nextActiveOption =\n filteredOptions[\n activeIndex === -1\n ? filteredOptionsLen - 1\n : (filteredOptionsLen + activeIndex - 1) % filteredOptionsLen\n ]\n\n if (nextActiveOption) {\n dispatch({type: 'root/setActiveValue', value: nextActiveOption.value, listFocused: true})\n }\n\n return\n }\n\n if (event.key === 'Escape') {\n dispatch({type: 'root/escape'})\n popoverMouseWithinRef.current = false\n if (onQueryChange) onQueryChange(null)\n inputElementRef.current?.focus()\n\n return\n }\n\n // oxlint-disable-next-line no-unsafe-type-assertion\n const target = event.target as Node\n const listEl = listBoxElementRef.current\n\n if (\n (listEl === target || listEl?.contains(target)) &&\n !AUTOCOMPLETE_LISTBOX_IGNORE_KEYS.includes(event.key)\n ) {\n inputElementRef.current?.focus()\n\n return\n }\n },\n [activeValue, filteredOptions, filteredOptionsLen, onQueryChange],\n )","(event: ChangeEvent<HTMLInputElement>) => {\n const nextQuery = event.currentTarget.value\n\n dispatch({type: 'input/change', query: nextQuery})\n\n if (onQueryChange) onQueryChange(nextQuery)\n }","useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const nextQuery = event.currentTarget.value\n\n dispatch({type: 'input/change', query: nextQuery})\n\n if (onQueryChange) onQueryChange(nextQuery)\n },\n [onQueryChange],\n )","() => {\n dispatch({\n type: 'root/open',\n query: value ? renderValue(value, currentOption) : '',\n })\n }","useCallback(() => {\n dispatch({\n type: 'root/open',\n query: value ? renderValue(value, currentOption) : '',\n })\n }, [currentOption, renderValue, value])","(event: FocusEvent<HTMLInputElement>) => {\n if (!focused) {\n dispatch({type: 'input/focus'})\n\n if (onFocus) onFocus(event)\n if (openOnFocus) dispatchOpen()\n }\n }","useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n if (!focused) {\n dispatch({type: 'input/focus'})\n\n if (onFocus) onFocus(event)\n if (openOnFocus) dispatchOpen()\n }\n },\n [focused, onFocus, openOnFocus, dispatchOpen],\n )","() => {\n popoverMouseWithinRef.current = true\n }","useCallback(() => {\n popoverMouseWithinRef.current = true\n }, [])","() => {\n popoverMouseWithinRef.current = false\n }","useCallback(() => {\n popoverMouseWithinRef.current = false\n }, [])","() => {\n dispatch({type: 'root/clear'})\n valueRef.current = ''\n if (onChange) onChange('')\n if (onQueryChange) onQueryChange(null)\n inputElementRef.current?.focus()\n }","useCallback(() => {\n dispatch({type: 'root/clear'})\n valueRef.current = ''\n if (onChange) onChange('')\n if (onQueryChange) onQueryChange(null)\n inputElementRef.current?.focus()\n }, [onChange, onQueryChange])","() => {\n dispatch({type: 'input/focus'})\n }","useCallback(() => {\n dispatch({type: 'input/focus'})\n }, [])","() => {\n // If `valueProp` changed\n if (valueProp !== valuePropRef.current) {\n valuePropRef.current = valueProp\n\n if (valueProp !== undefined) {\n dispatch({type: 'value/change', value: valueProp})\n valueRef.current = valueProp\n }\n\n return\n }\n\n // If `valueProp` is not equal to `value`\n if (valueProp !== valueRef.current) {\n valueRef.current = valueProp || null\n\n dispatch({type: 'value/change', value: valueProp || null})\n }\n }","[valueProp]","() => {\n if (!focused && valueRef.current) {\n dispatch({type: 'root/setActiveValue', value: valueRef.current})\n }\n }","[focused]","() => {\n const listElement = listBoxElementRef.current\n\n if (!listElement) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n\n if (activeOption) {\n const activeIndex = filteredOptions.indexOf(activeOption)\n // oxlint-disable-next-line no-unsafe-type-assertion\n const activeItemElement = listElement.childNodes[activeIndex] as HTMLLIElement | undefined\n\n if (activeItemElement) {\n if (_hasFocus(activeItemElement)) {\n // already focused\n return\n }\n\n focusFirstDescendant(activeItemElement)\n }\n }\n }","[activeValue, filteredOptions]","useMemo(() => {\n if (!loading && !disabled && value) {\n return {\n 'aria-label': 'Clear',\n 'onFocus': handleClearButtonFocus,\n }\n }\n\n return undefined\n }, [disabled, handleClearButtonFocus, loading, value])","{\n 'aria-label': 'Clear',\n 'onFocus': handleClearButtonFocus,\n }","(v) => {\n if (v === 0) return 0\n if (v === 1) return 1\n if (v === 2) return 1\n\n return v - 2\n }","(v) => Math.max(v - 1, 0)","(event: MouseEvent<HTMLButtonElement>) => {\n dispatchOpen()\n\n if (openButtonProps.onClick) openButtonProps.onClick(event)\n\n _raf(() => inputElementRef.current?.focus())\n }","openButtonProps.onClick","useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n dispatchOpen()\n\n if (openButtonProps.onClick) openButtonProps.onClick(event)\n\n _raf(() => inputElementRef.current?.focus())\n },\n [openButtonProps, dispatchOpen],\n )","!disabled && !readOnly && openButton ? (\n <Box aria-hidden={expanded} padding={openButtonBoxPadding}>\n <Button\n aria-label=\"Open\"\n disabled={expanded}\n fontSize={fontSize}\n icon={ChevronDownIcon}\n mode=\"bleed\"\n padding={openButtonPadding}\n {...openButtonProps}\n onClick={handleOpenClick}\n />\n </Box>\n ) : undefined","useMemo(\n () =>\n !disabled && !readOnly && openButton ? (\n <Box aria-hidden={expanded} padding={openButtonBoxPadding}>\n <Button\n aria-label=\"Open\"\n disabled={expanded}\n fontSize={fontSize}\n icon={ChevronDownIcon}\n mode=\"bleed\"\n padding={openButtonPadding}\n {...openButtonProps}\n onClick={handleOpenClick}\n />\n </Box>\n ) : undefined,\n [\n disabled,\n expanded,\n fontSize,\n handleOpenClick,\n openButton,\n openButtonBoxPadding,\n openButtonPadding,\n openButtonProps,\n readOnly,\n ],\n )","useMemo(() => {\n if (query === null) {\n if (value !== null) {\n return renderValue(value, currentOption)\n }\n\n return ''\n }\n\n return query\n }, [currentOption, query, renderValue, value])","renderValue(value, currentOption)","(event: KeyboardEvent<HTMLDivElement>) => {\n // If the focus is currently in the list, move focus to the input element\n if (event.key === 'Tab') {\n if (listFocused) inputElementRef.current?.focus()\n }\n }","useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n // If the focus is currently in the list, move focus to the input element\n if (event.key === 'Tab') {\n if (listFocused) inputElementRef.current?.focus()\n }\n },\n [listFocused],\n )","useMemo(() => {\n if (filteredOptions.length === 0) return null\n\n return (\n <Box\n data-ui=\"AutoComplete__results\"\n onKeyDown={handleListBoxKeyDown}\n padding={1}\n {...listBox}\n className={clsx(autocompleteListBox, listBox?.className)}\n tabIndex={-1}\n >\n <Stack\n as=\"ul\"\n aria-multiselectable={false}\n data-ui=\"AutoComplete__resultsList\"\n id={listBoxId}\n ref={listBoxElementRef}\n // oxlint-disable-next-line prefer-tag-over-role\n role=\"listbox\"\n gap={1}\n >\n {filteredOptions.map((option) => {\n const active =\n activeValue !== null ? option.value === activeValue : currentOption === option\n\n return (\n <AutocompleteOption\n key={option.value}\n id={`${id}-option-${option.value}`}\n onSelect={handleOptionSelect}\n selected={active}\n value={option.value}\n >\n {cloneElement(renderOption(option), {\n disabled: loading,\n selected: active,\n tabIndex: listFocused && active ? 0 : -1,\n })}\n </AutocompleteOption>\n )\n })}\n </Stack>\n </Box>\n )\n }, [\n activeValue,\n currentOption,\n filteredOptions,\n handleOptionSelect,\n handleListBoxKeyDown,\n id,\n listBox,\n listBoxId,\n listFocused,\n loading,\n renderOption,\n ])","clsx(autocompleteListBox, listBox?.className)","listBox?.className","filteredOptions.map((option) => {\n const active =\n activeValue !== null ? option.value === activeValue : currentOption === option\n\n return (\n <AutocompleteOption\n key={option.value}\n id={`${id}-option-${option.value}`}\n onSelect={handleOptionSelect}\n selected={active}\n value={option.value}\n >\n {cloneElement(renderOption(option), {\n disabled: loading,\n selected: active,\n tabIndex: listFocused && active ? 0 : -1,\n })}\n </AutocompleteOption>\n )\n })","(option) => {\n const active =\n activeValue !== null ? option.value === activeValue : currentOption === option\n\n return (\n <AutocompleteOption\n key={option.value}\n id={`${id}-option-${option.value}`}\n onSelect={handleOptionSelect}\n selected={active}\n value={option.value}\n >\n {cloneElement(renderOption(option), {\n disabled: loading,\n selected: active,\n tabIndex: listFocused && active ? 0 : -1,\n })}\n </AutocompleteOption>\n )\n }","option","<Stack\n as=\"ul\"\n aria-multiselectable={false}\n data-ui=\"AutoComplete__resultsList\"\n id={listBoxId}\n ref={listBoxElementRef}\n // oxlint-disable-next-line prefer-tag-over-role\n role=\"listbox\"\n gap={1}\n >\n {filteredOptions.map((option) => {\n const active =\n activeValue !== null ? option.value === activeValue : currentOption === option\n\n return (\n <AutocompleteOption\n key={option.value}\n id={`${id}-option-${option.value}`}\n onSelect={handleOptionSelect}\n selected={active}\n value={option.value}\n >\n {cloneElement(renderOption(option), {\n disabled: loading,\n selected: active,\n tabIndex: listFocused && active ? 0 : -1,\n })}\n </AutocompleteOption>\n )\n })}\n </Stack>","<Box\n data-ui=\"AutoComplete__results\"\n onKeyDown={handleListBoxKeyDown}\n padding={1}\n {...listBox}\n className={clsx(autocompleteListBox, listBox?.className)}\n tabIndex={-1}\n >\n <Stack\n as=\"ul\"\n aria-multiselectable={false}\n data-ui=\"AutoComplete__resultsList\"\n id={listBoxId}\n ref={listBoxElementRef}\n // oxlint-disable-next-line prefer-tag-over-role\n role=\"listbox\"\n gap={1}\n >\n {filteredOptions.map((option) => {\n const active =\n activeValue !== null ? option.value === activeValue : currentOption === option\n\n return (\n <AutocompleteOption\n key={option.value}\n id={`${id}-option-${option.value}`}\n onSelect={handleOptionSelect}\n selected={active}\n value={option.value}\n >\n {cloneElement(renderOption(option), {\n disabled: loading,\n selected: active,\n tabIndex: listFocused && active ? 0 : -1,\n })}\n </AutocompleteOption>\n )\n })}\n </Stack>\n </Box>","useMemo(() => {\n if (renderPopover) {\n return (\n <RenderPopover\n content={content}\n hidden={!expanded}\n inputElement={inputElement}\n onMouseEnter={handlePopoverMouseEnter}\n onMouseLeave={handlePopoverMouseLeave}\n resultsPopoverElementRef={resultsPopoverElementRef}\n renderPopover={renderPopover}\n />\n )\n }\n\n if (filteredOptionsLen === 0) {\n return null\n }\n\n return (\n <Popover\n arrow={false}\n constrainSize\n content={content}\n fallbackPlacements={AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS}\n matchReferenceWidth\n onMouseEnter={handlePopoverMouseEnter}\n onMouseLeave={handlePopoverMouseLeave}\n open={expanded}\n overflow=\"auto\"\n placement={AUTOCOMPLETE_POPOVER_PLACEMENT}\n portal\n radius={radius}\n ref={resultsPopoverElementRef}\n referenceElement={inputElement}\n {...popover}\n />\n )\n }, [\n content,\n expanded,\n filteredOptionsLen,\n handlePopoverMouseEnter,\n handlePopoverMouseLeave,\n inputElement,\n popover,\n radius,\n renderPopover,\n ])","<RenderPopover\n content={content}\n hidden={!expanded}\n inputElement={inputElement}\n onMouseEnter={handlePopoverMouseEnter}\n onMouseLeave={handlePopoverMouseLeave}\n resultsPopoverElementRef={resultsPopoverElementRef}\n renderPopover={renderPopover}\n />","!expanded","<Popover\n arrow={false}\n constrainSize\n content={content}\n fallbackPlacements={AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS}\n matchReferenceWidth\n onMouseEnter={handlePopoverMouseEnter}\n onMouseLeave={handlePopoverMouseLeave}\n open={expanded}\n overflow=\"auto\"\n placement={AUTOCOMPLETE_POPOVER_PLACEMENT}\n portal\n radius={radius}\n ref={resultsPopoverElementRef}\n referenceElement={inputElement}\n {...popover}\n />","loading && <SpinnerIcon className={spinnerIcon} />","<TextInput\n {...restProps}\n aria-activedescendant={activeItemId}\n aria-autocomplete=\"list\"\n aria-expanded={expanded}\n aria-owns={listBoxId}\n autoCapitalize=\"off\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n border={border}\n clearButton={clearButton}\n customValidity={customValidity}\n disabled={disabled}\n fontSize={fontSize}\n icon={icon}\n iconRight={loading && <SpinnerIcon className={spinnerIcon} />}\n id={id}\n inputMode=\"search\"\n onChange={handleInputChange}\n onClear={handleClearButtonClick}\n onFocus={handleInputFocus}\n padding={padding}\n prefix={prefix}\n radius={radius}\n readOnly={readOnly}\n ref={setInputElement}\n // oxlint-disable-next-line prefer-tag-over-role, role-has-required-aria-props\n role=\"combobox\"\n spellCheck={false}\n suffix={suffix || openButtonNode}\n value={inputValue}\n />","suffix || openButtonNode","<div\n className={autocomplete}\n data-ui=\"Autocomplete\"\n onBlur={handleRootBlur}\n onFocus={handleRootFocus}\n onKeyDown={handleRootKeyDown}\n ref={rootElementRef}\n >\n <TextInput\n {...restProps}\n aria-activedescendant={activeItemId}\n aria-autocomplete=\"list\"\n aria-expanded={expanded}\n aria-owns={listBoxId}\n autoCapitalize=\"off\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n border={border}\n clearButton={clearButton}\n customValidity={customValidity}\n disabled={disabled}\n fontSize={fontSize}\n icon={icon}\n iconRight={loading && <SpinnerIcon className={spinnerIcon} />}\n id={id}\n inputMode=\"search\"\n onChange={handleInputChange}\n onClear={handleClearButtonClick}\n onFocus={handleInputFocus}\n padding={padding}\n prefix={prefix}\n radius={radius}\n readOnly={readOnly}\n ref={setInputElement}\n // oxlint-disable-next-line prefer-tag-over-role, role-has-required-aria-props\n role=\"combobox\"\n spellCheck={false}\n suffix={suffix || openButtonNode}\n value={inputValue}\n />\n {results}\n </div>","v"],"sources":["../src/core/components/autocomplete/autocompleteOption.tsx","../src/core/components/autocomplete/autocompleteReducer.ts","../src/core/components/autocomplete/constants.ts","../src/core/components/autocomplete/autocomplete.css.ts","../src/core/components/autocomplete/autocomplete.tsx"],"sourcesContent":["import {useCallback} from 'react'\n\nimport {_isEnterToClickElement} from '../../helpers/element'\n\nexport interface AutocompleteOptionProps {\n children: React.ReactNode\n id: string\n onSelect: (v: string) => void\n selected: boolean\n value: string\n}\n\nexport function AutocompleteOption(props: AutocompleteOptionProps): React.JSX.Element {\n const {children, id, onSelect, selected, value} = props\n\n const handleClick = useCallback(() => {\n // Calling the `onSelect` in a timeout is a fix to\n // allow the `click` event to propagate in some cases\n setTimeout(() => {\n onSelect(value)\n }, 0)\n }, [onSelect, value])\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLLIElement>) => {\n if (event.key === 'Enter' && !_isEnterToClickElement(event.currentTarget)) {\n handleClick()\n }\n },\n [handleClick],\n )\n\n return (\n <li\n aria-selected={selected}\n data-ui=\"AutocompleteOption\"\n id={id}\n // oxlint-disable-next-line no-noninteractive-element-to-interactive-role, prefer-tag-over-role\n role=\"option\"\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n >\n {children}\n </li>\n )\n}\n","import {AutocompleteMsg, AutocompleteState} from './types'\n\n/**\n * @internal\n */\nexport function autocompleteReducer(\n state: AutocompleteState,\n msg: AutocompleteMsg,\n): AutocompleteState {\n if (msg.type === 'input/change') {\n return {...state, activeValue: null, focused: true, query: msg.query}\n }\n\n if (msg.type === 'input/focus') {\n return {...state, focused: true}\n }\n\n if (msg.type === 'root/blur') {\n return {...state, focused: false, query: null}\n }\n\n if (msg.type === 'root/clear') {\n return {...state, activeValue: null, query: null, value: null}\n }\n\n if (msg.type === 'root/escape') {\n return {...state, focused: false, query: null}\n }\n\n if (msg.type === 'root/open') {\n return {...state, query: state.query || msg.query}\n }\n\n if (msg.type === 'root/setActiveValue') {\n return {...state, activeValue: msg.value, listFocused: msg.listFocused || state.listFocused}\n }\n\n if (msg.type === 'root/setListFocused') {\n return {...state, listFocused: msg.listFocused}\n }\n\n if (msg.type === 'value/change') {\n return {...state, activeValue: msg.value, query: null, value: msg.value}\n }\n\n return state\n}\n","import {Placement} from '../../types/placement'\n\n/**\n * @internal\n */\nexport const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [\n 'Control',\n 'Shift',\n 'Alt',\n 'Enter',\n 'Home',\n 'End',\n 'PageUp',\n 'PageDown',\n 'Meta',\n 'Tab',\n 'CapsLock',\n]\n\n/**\n * @internal\n */\nexport const AUTOCOMPLETE_POPOVER_PLACEMENT: Placement = 'bottom-start'\n\n/**\n * @internal\n */\nexport const AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS: Placement[] = ['bottom-start', 'top-start']\n","import {globalStyle, style} from '@vanilla-extract/css'\n\nexport const autocomplete = style({\n lineHeight: 0,\n})\n\nexport const autocompleteListBox = style({})\n\nglobalStyle(`${autocompleteListBox} > ul`, {\n listStyle: 'none',\n padding: 0,\n margin: 0,\n})\n","import {ChevronDownIcon} from '@sanity/icons/ChevronDown'\nimport {SpinnerIcon} from '@sanity/icons/Spinner'\nimport {clsx} from 'clsx/lite'\nimport {\n ChangeEvent,\n cloneElement,\n ElementType,\n FocusEvent,\n HTMLProps,\n KeyboardEvent,\n MouseEvent,\n ReactNode,\n Ref,\n startTransition,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useReducer,\n useRef,\n useState,\n} from 'react'\n\nimport {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'\nimport {_raf} from '../../helpers/animation'\nimport {_hasFocus, focusFirstDescendant} from '../../helpers/focus'\nimport {Box, BoxProps} from '../../primitives/box/box'\nimport {Button} from '../../primitives/button/button'\nimport {Card} from '../../primitives/card/card'\nimport {Popover, PopoverProps} from '../../primitives/popover/popover'\nimport {Stack} from '../../primitives/stack/stack'\nimport {Text} from '../../primitives/text/text'\nimport {TextInput} from '../../primitives/textInput/textInput'\nimport {_getArrayProp} from '../../styles/helpers'\nimport {Radius} from '../../types/radius'\nimport {AutocompleteOption} from './autocompleteOption'\nimport {autocompleteReducer} from './autocompleteReducer'\nimport {\n AUTOCOMPLETE_LISTBOX_IGNORE_KEYS,\n AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS,\n AUTOCOMPLETE_POPOVER_PLACEMENT,\n} from './constants'\nimport {AutocompleteOpenButtonProps, BaseAutocompleteOption} from './types'\n\nimport {spinnerIcon} from '../../primitives/spinner/spinner.css'\nimport {autocomplete, autocompleteListBox} from './autocomplete.css'\n\n/**\n * @public\n */\nexport interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseAutocompleteOption> {\n border?: boolean\n customValidity?: string\n filterOption?: (query: string, option: Option) => boolean\n fontSize?: number | number[]\n // oxlint-disable-next-line no-redundant-type-constituents\n icon?: ElementType | ReactNode\n id: string\n /** @beta */\n listBox?: BoxProps\n loading?: boolean\n onChange?: (value: string) => void\n onQueryChange?: (query: string | null) => void\n onSelect?: (value: string) => void\n /** @beta */\n openButton?: boolean | AutocompleteOpenButtonProps\n /** @beta */\n openOnFocus?: boolean\n /** The options to render. */\n options?: Option[]\n padding?: number | number[]\n popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> &\n Omit<HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'ref' | 'width'>\n prefix?: ReactNode\n radius?: Radius | Radius[]\n /** @beta */\n relatedElements?: HTMLElement[]\n /** The callback function for rendering each option. */\n renderOption?: (option: Option) => React.JSX.Element\n /** @beta */\n renderPopover?: (\n props: {\n content: React.JSX.Element | null\n hidden: boolean\n inputElement: HTMLInputElement | null\n onMouseEnter: () => void\n onMouseLeave: () => void\n },\n ref: Ref<HTMLDivElement>,\n ) => ReactNode\n renderValue?: (value: string, option?: Option) => string\n suffix?: ReactNode\n /** The current value. */\n value?: string\n}\n\nconst DEFAULT_RENDER_VALUE = (value: string, option?: BaseAutocompleteOption) =>\n option ? option.value : value\n\nconst DEFAULT_FILTER_OPTION = (query: string, option: BaseAutocompleteOption) =>\n option.value.toLowerCase().indexOf(query.toLowerCase()) > -1\n\n/**\n * The Autocomplete component is typically used for search components.\n * It consists of a text input for writing a query, and properties for rendering suggestions.\n *\n * @public\n */\nexport function Autocomplete<Option extends BaseAutocompleteOption>(\n props: AutocompleteProps<Option> &\n Omit<\n HTMLProps<HTMLInputElement>,\n | 'aria-activedescendant'\n | 'aria-autocomplete'\n | 'aria-expanded'\n | 'aria-owns'\n | 'as'\n | 'autoCapitalize'\n | 'autoComplete'\n | 'autoCorrect'\n | 'id'\n | 'inputMode'\n | 'onChange'\n | 'onSelect'\n | 'popover'\n | 'prefix'\n | 'role'\n | 'spellCheck'\n | 'type'\n | 'value'\n >,\n) {\n const {\n border = true,\n customValidity,\n disabled,\n filterOption: filterOptionProp,\n fontSize = 2,\n icon,\n id,\n listBox = EMPTY_RECORD,\n loading,\n onBlur,\n onChange,\n onFocus,\n onQueryChange,\n onSelect,\n openButton,\n openOnFocus,\n options: optionsProp,\n padding: paddingProp = 3,\n popover = EMPTY_RECORD,\n prefix,\n radius = 2,\n readOnly,\n ref: forwardedRef,\n relatedElements,\n renderOption: renderOptionProp,\n renderPopover,\n renderValue = DEFAULT_RENDER_VALUE,\n suffix,\n value: valueProp,\n ...restProps\n } = props\n\n const [state, dispatch] = useReducer(autocompleteReducer, {\n activeValue: valueProp || null,\n focused: false,\n listFocused: false,\n query: null,\n value: valueProp || null,\n })\n\n const {activeValue, focused, listFocused, query, value} = state\n\n const defaultRenderOption = useCallback(\n ({value}: BaseAutocompleteOption) => (\n <Card data-as=\"button\" padding={paddingProp} radius={2} tone=\"inherit\">\n <Text size={fontSize} textOverflow=\"ellipsis\">\n {value}\n </Text>\n </Card>\n ),\n [fontSize, paddingProp],\n )\n\n const renderOption =\n typeof renderOptionProp === 'function' ? renderOptionProp : defaultRenderOption\n\n const filterOption =\n typeof filterOptionProp === 'function' ? filterOptionProp : DEFAULT_FILTER_OPTION\n\n // Element refs\n const rootElementRef = useRef<HTMLDivElement | null>(null)\n const resultsPopoverElementRef = useRef<HTMLDivElement | null>(null)\n const inputElementRef = useRef<HTMLInputElement | null>(null)\n const listBoxElementRef = useRef<HTMLUListElement | null>(null)\n // Element refs that need to be accessed during render\n const [inputElement, _setInputElement] = useState<HTMLInputElement | null>(null)\n /**\n * The startTransition wrapper here is to avoid an issue when on React 18 where this error can happen:\n * >Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.\n * This doesn't happen on React 19 due to automatic batching of all state updates, the startTransition wrapper here gives a type of batching for 18 users in a way that still works with 19.\n * NOTE: The startTransition wrapper is not needed in UI v4, since the baseline there is React 19.\n */\n const setInputElement = useCallback((node: HTMLInputElement | null) => {\n startTransition(() => _setInputElement(node))\n }, [])\n\n // Value refs\n const listFocusedRef = useRef(false)\n const valueRef = useRef(value)\n const valuePropRef = useRef(valueProp)\n const popoverMouseWithinRef = useRef(false)\n\n // Forward inputElement state to inputElementRef\n useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n inputElementRef,\n () => inputElement,\n [inputElement],\n )\n // Forward inputElement to parent\n useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n forwardedRef,\n () => inputElement,\n [inputElement],\n )\n\n const listBoxId = `${id}-listbox`\n const options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY\n const padding = _getArrayProp(paddingProp)\n const currentOption = useMemo(\n () => (value !== null ? options.find((o) => o.value === value) : undefined),\n [options, value],\n )\n const filteredOptions = useMemo(\n () => options.filter((option) => (query ? filterOption(query, option) : true)),\n [filterOption, options, query],\n )\n const filteredOptionsLen = filteredOptions.length\n const activeItemId = activeValue ? `${id}-option-${activeValue}` : undefined\n const expanded = (query !== null && loading) || (focused && query !== null)\n\n const handleRootBlur = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n setTimeout(() => {\n // NOTE: This is a workaround for a bug that may happen in Chrome (clicking the scrollbar\n // closes the results in certain situations):\n // - Do not handle blur if the mouse is within the popover\n if (popoverMouseWithinRef.current) {\n return\n }\n\n const elements: HTMLElement[] = (relatedElements || []).concat(\n rootElementRef.current ? [rootElementRef.current] : [],\n resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : [],\n )\n\n let focusInside = false\n\n if (document.activeElement) {\n for (const e of elements) {\n if (e === document.activeElement || e.contains(document.activeElement)) {\n focusInside = true\n break\n }\n }\n }\n\n // oxlint-disable-next-line no-unnecessary-boolean-literal-compare\n if (focusInside === false) {\n dispatch({type: 'root/blur'})\n popoverMouseWithinRef.current = false\n if (onQueryChange) onQueryChange(null)\n if (onBlur) onBlur(event)\n }\n }, 0)\n },\n [onBlur, onQueryChange, relatedElements],\n )\n\n const handleRootFocus = useCallback((event: FocusEvent<HTMLDivElement>) => {\n const listBoxElement = listBoxElementRef.current\n const focusedElement = event.target instanceof HTMLElement ? event.target : null\n const listFocused = listBoxElement?.contains(focusedElement) || false\n\n if (listFocused !== listFocusedRef.current) {\n listFocusedRef.current = listFocused\n\n dispatch({type: 'root/setListFocused', listFocused})\n }\n }, [])\n\n const handleOptionSelect = useCallback(\n (v: string) => {\n dispatch({type: 'value/change', value: v})\n\n popoverMouseWithinRef.current = false\n\n if (onSelect) onSelect(v)\n\n valueRef.current = v\n\n if (onChange) onChange(v)\n if (onQueryChange) onQueryChange(null)\n\n inputElementRef.current?.focus()\n },\n [onChange, onSelect, onQueryChange],\n )\n\n const handleRootKeyDown = useCallback(\n (event: KeyboardEvent<HTMLElement>) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault()\n\n if (!filteredOptionsLen) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1\n const nextActiveOption = filteredOptions[(activeIndex + 1) % filteredOptionsLen]\n\n if (nextActiveOption) {\n dispatch({type: 'root/setActiveValue', value: nextActiveOption.value, listFocused: true})\n }\n\n return\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault()\n\n if (!filteredOptionsLen) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1\n const nextActiveOption =\n filteredOptions[\n activeIndex === -1\n ? filteredOptionsLen - 1\n : (filteredOptionsLen + activeIndex - 1) % filteredOptionsLen\n ]\n\n if (nextActiveOption) {\n dispatch({type: 'root/setActiveValue', value: nextActiveOption.value, listFocused: true})\n }\n\n return\n }\n\n if (event.key === 'Escape') {\n dispatch({type: 'root/escape'})\n popoverMouseWithinRef.current = false\n if (onQueryChange) onQueryChange(null)\n inputElementRef.current?.focus()\n\n return\n }\n\n // oxlint-disable-next-line no-unsafe-type-assertion\n const target = event.target as Node\n const listEl = listBoxElementRef.current\n\n if (\n (listEl === target || listEl?.contains(target)) &&\n !AUTOCOMPLETE_LISTBOX_IGNORE_KEYS.includes(event.key)\n ) {\n inputElementRef.current?.focus()\n\n return\n }\n },\n [activeValue, filteredOptions, filteredOptionsLen, onQueryChange],\n )\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const nextQuery = event.currentTarget.value\n\n dispatch({type: 'input/change', query: nextQuery})\n\n if (onQueryChange) onQueryChange(nextQuery)\n },\n [onQueryChange],\n )\n\n const dispatchOpen = useCallback(() => {\n dispatch({\n type: 'root/open',\n query: value ? renderValue(value, currentOption) : '',\n })\n }, [currentOption, renderValue, value])\n\n const handleInputFocus = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n if (!focused) {\n dispatch({type: 'input/focus'})\n\n if (onFocus) onFocus(event)\n if (openOnFocus) dispatchOpen()\n }\n },\n [focused, onFocus, openOnFocus, dispatchOpen],\n )\n\n const handlePopoverMouseEnter = useCallback(() => {\n popoverMouseWithinRef.current = true\n }, [])\n\n const handlePopoverMouseLeave = useCallback(() => {\n popoverMouseWithinRef.current = false\n }, [])\n\n const handleClearButtonClick = useCallback(() => {\n dispatch({type: 'root/clear'})\n valueRef.current = ''\n if (onChange) onChange('')\n if (onQueryChange) onQueryChange(null)\n inputElementRef.current?.focus()\n }, [onChange, onQueryChange])\n\n const handleClearButtonFocus = useCallback(() => {\n dispatch({type: 'input/focus'})\n }, [])\n\n // Change the value when `value` prop changes\n useEffect(() => {\n // If `valueProp` changed\n if (valueProp !== valuePropRef.current) {\n valuePropRef.current = valueProp\n\n if (valueProp !== undefined) {\n dispatch({type: 'value/change', value: valueProp})\n valueRef.current = valueProp\n }\n\n return\n }\n\n // If `valueProp` is not equal to `value`\n if (valueProp !== valueRef.current) {\n valueRef.current = valueProp || null\n\n dispatch({type: 'value/change', value: valueProp || null})\n }\n }, [valueProp])\n\n // Reset active item when closing\n useEffect(() => {\n if (!focused && valueRef.current) {\n dispatch({type: 'root/setActiveValue', value: valueRef.current})\n }\n }, [focused])\n\n // Focus the selected item\n useEffect(() => {\n const listElement = listBoxElementRef.current\n\n if (!listElement) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n\n if (activeOption) {\n const activeIndex = filteredOptions.indexOf(activeOption)\n // oxlint-disable-next-line no-unsafe-type-assertion\n const activeItemElement = listElement.childNodes[activeIndex] as HTMLLIElement | undefined\n\n if (activeItemElement) {\n if (_hasFocus(activeItemElement)) {\n // already focused\n return\n }\n\n focusFirstDescendant(activeItemElement)\n }\n }\n }, [activeValue, filteredOptions])\n\n const clearButton = useMemo(() => {\n if (!loading && !disabled && value) {\n return {\n 'aria-label': 'Clear',\n 'onFocus': handleClearButtonFocus,\n }\n }\n\n return undefined\n }, [disabled, handleClearButtonFocus, loading, value])\n\n const openButtonBoxPadding = padding.map((v) => {\n if (v === 0) return 0\n if (v === 1) return 1\n if (v === 2) return 1\n\n return v - 2\n })\n const openButtonPadding = padding.map((v) => Math.max(v - 1, 0))\n const openButtonProps: AutocompleteOpenButtonProps = useMemo(\n () => (typeof openButton === 'object' ? openButton : EMPTY_RECORD),\n [openButton],\n )\n\n const handleOpenClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n dispatchOpen()\n\n if (openButtonProps.onClick) openButtonProps.onClick(event)\n\n _raf(() => inputElementRef.current?.focus())\n },\n [openButtonProps, dispatchOpen],\n )\n\n const openButtonNode = useMemo(\n () =>\n !disabled && !readOnly && openButton ? (\n <Box aria-hidden={expanded} padding={openButtonBoxPadding}>\n <Button\n aria-label=\"Open\"\n disabled={expanded}\n fontSize={fontSize}\n icon={ChevronDownIcon}\n mode=\"bleed\"\n padding={openButtonPadding}\n {...openButtonProps}\n onClick={handleOpenClick}\n />\n </Box>\n ) : undefined,\n [\n disabled,\n expanded,\n fontSize,\n handleOpenClick,\n openButton,\n openButtonBoxPadding,\n openButtonPadding,\n openButtonProps,\n readOnly,\n ],\n )\n\n const inputValue = useMemo(() => {\n if (query === null) {\n if (value !== null) {\n return renderValue(value, currentOption)\n }\n\n return ''\n }\n\n return query\n }, [currentOption, query, renderValue, value])\n\n const handleListBoxKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n // If the focus is currently in the list, move focus to the input element\n if (event.key === 'Tab') {\n if (listFocused) inputElementRef.current?.focus()\n }\n },\n [listFocused],\n )\n\n const content = useMemo(() => {\n if (filteredOptions.length === 0) return null\n\n return (\n <Box\n data-ui=\"AutoComplete__results\"\n onKeyDown={handleListBoxKeyDown}\n padding={1}\n {...listBox}\n className={clsx(autocompleteListBox, listBox?.className)}\n tabIndex={-1}\n >\n <Stack\n as=\"ul\"\n aria-multiselectable={false}\n data-ui=\"AutoComplete__resultsList\"\n id={listBoxId}\n ref={listBoxElementRef}\n // oxlint-disable-next-line prefer-tag-over-role\n role=\"listbox\"\n gap={1}\n >\n {filteredOptions.map((option) => {\n const active =\n activeValue !== null ? option.value === activeValue : currentOption === option\n\n return (\n <AutocompleteOption\n key={option.value}\n id={`${id}-option-${option.value}`}\n onSelect={handleOptionSelect}\n selected={active}\n value={option.value}\n >\n {cloneElement(renderOption(option), {\n disabled: loading,\n selected: active,\n tabIndex: listFocused && active ? 0 : -1,\n })}\n </AutocompleteOption>\n )\n })}\n </Stack>\n </Box>\n )\n }, [\n activeValue,\n currentOption,\n filteredOptions,\n handleOptionSelect,\n handleListBoxKeyDown,\n id,\n listBox,\n listBoxId,\n listFocused,\n loading,\n renderOption,\n ])\n\n const results = useMemo(() => {\n if (renderPopover) {\n return (\n <RenderPopover\n content={content}\n hidden={!expanded}\n inputElement={inputElement}\n onMouseEnter={handlePopoverMouseEnter}\n onMouseLeave={handlePopoverMouseLeave}\n resultsPopoverElementRef={resultsPopoverElementRef}\n renderPopover={renderPopover}\n />\n )\n }\n\n if (filteredOptionsLen === 0) {\n return null\n }\n\n return (\n <Popover\n arrow={false}\n constrainSize\n content={content}\n fallbackPlacements={AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS}\n matchReferenceWidth\n onMouseEnter={handlePopoverMouseEnter}\n onMouseLeave={handlePopoverMouseLeave}\n open={expanded}\n overflow=\"auto\"\n placement={AUTOCOMPLETE_POPOVER_PLACEMENT}\n portal\n radius={radius}\n ref={resultsPopoverElementRef}\n referenceElement={inputElement}\n {...popover}\n />\n )\n }, [\n content,\n expanded,\n filteredOptionsLen,\n handlePopoverMouseEnter,\n handlePopoverMouseLeave,\n inputElement,\n popover,\n radius,\n renderPopover,\n ])\n\n return (\n // The handlers only observe focus and key events bubbling from the input and\n // list box, which carry the roles; the wrapper itself is not interactive.\n // oxlint-disable-next-line no-static-element-interactions\n <div\n className={autocomplete}\n data-ui=\"Autocomplete\"\n onBlur={handleRootBlur}\n onFocus={handleRootFocus}\n onKeyDown={handleRootKeyDown}\n ref={rootElementRef}\n >\n <TextInput\n {...restProps}\n aria-activedescendant={activeItemId}\n aria-autocomplete=\"list\"\n aria-expanded={expanded}\n aria-owns={listBoxId}\n autoCapitalize=\"off\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n border={border}\n clearButton={clearButton}\n customValidity={customValidity}\n disabled={disabled}\n fontSize={fontSize}\n icon={icon}\n iconRight={loading && <SpinnerIcon className={spinnerIcon} />}\n id={id}\n inputMode=\"search\"\n onChange={handleInputChange}\n onClear={handleClearButtonClick}\n onFocus={handleInputFocus}\n padding={padding}\n prefix={prefix}\n radius={radius}\n readOnly={readOnly}\n ref={setInputElement}\n // oxlint-disable-next-line prefer-tag-over-role, role-has-required-aria-props\n role=\"combobox\"\n spellCheck={false}\n suffix={suffix || openButtonNode}\n value={inputValue}\n />\n {results}\n </div>\n )\n}\n\nfunction RenderPopover({\n renderPopover,\n content,\n hidden,\n inputElement,\n onMouseEnter,\n onMouseLeave,\n resultsPopoverElementRef,\n}: {\n renderPopover: Exclude<AutocompleteProps['renderPopover'], undefined>\n resultsPopoverElementRef: Parameters<Exclude<AutocompleteProps['renderPopover'], undefined>>[1]\n} & Parameters<Exclude<AutocompleteProps['renderPopover'], undefined>>[0]) {\n return renderPopover(\n {\n content,\n hidden,\n inputElement,\n onMouseEnter,\n onMouseLeave,\n },\n resultsPopoverElementRef,\n )\n}\n"],"mappings":"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"}
@@ -13,6 +13,6 @@ interface BreadcrumbsProps {
13
13
  /**
14
14
  * @beta
15
15
  */
16
- declare function Breadcrumbs(props: BreadcrumbsProps & Omit<React.HTMLProps<HTMLOListElement>, 'as' | 'type'>): import("react").JSX.Element;
17
- export { Breadcrumbs, type BreadcrumbsProps };
16
+ export declare function Breadcrumbs(props: BreadcrumbsProps & Omit<React.HTMLProps<HTMLOListElement>, 'as' | 'type'>): import("react").JSX.Element;
17
+ export type { BreadcrumbsProps };
18
18
  //# sourceMappingURL=breadcrumbs.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"breadcrumbs.d.ts","names":[],"sources":["../src/core/components/breadcrumbs/breadcrumbs.tsx"],"mappings":"AAaA;;;UAAiB;EACf;EACA,YAAY,MAAM;EAClB;;;;EAIA;;;;;iBAMc,YACd,OAAO,mBAAmB,KAAK,MAAM,UAAU,oDAAiC,IAAA"}
1
+ {"version":3,"file":"breadcrumbs.d.ts","names":[],"sources":["../src/core/components/breadcrumbs/breadcrumbs.tsx"],"mappings":"AAgBA;;;UAAiB;EACf;EACA,YAAY,MAAM;EAClB;;;;EAIA;;;;;wBAMc,YACd,OAAO,mBAAmB,KAAK,MAAM,UAAU,oDAAiC,IAAA"}
@@ -1,39 +1,33 @@
1
1
  "use client";
2
2
  import { n as _getArrayProp } from "./helpers-C8xxXAQC.js";
3
- import { y as Box } from "./useLayer-jUJIz8mh.js";
4
- import { n as Text, t as Stack } from "./stack-BGFEokua.js";
5
- import { t as Button } from "./button-DQH2KIbq.js";
6
- import { t as Popover } from "./popover-CEbjxiPx.js";
3
+ import { y as Box } from "./useLayer-D1usxIE0.js";
4
+ import { n as Text, t as Stack } from "./stack-rsNFPq2-.js";
5
+ import { t as Button } from "./button-Dh_M2fYx.js";
6
+ import { t as Popover } from "./popover-myCXZV_F.js";
7
7
  import { t as useClickOutsideEvent } from "./useClickOutsideEvent-wGLGWBZN.js";
8
8
  import { c } from "react/compiler-runtime";
9
+ import { clsx } from "clsx/lite";
9
10
  import { Children, Fragment, isValidElement, useRef, useState } from "react";
10
- import { styled } from "styled-components";
11
11
  import { jsx, jsxs } from "react/jsx-runtime";
12
- const StyledBreadcrumbs = styled.ol.withConfig({
13
- displayName: "StyledBreadcrumbs",
14
- componentId: "sc-dcv451-0"
15
- })`margin:0;padding:0;display:flex;list-style:none;align-items:center;white-space:nowrap;line-height:0;`, ExpandButton = styled(Button).withConfig({
16
- displayName: "ExpandButton",
17
- componentId: "sc-dcv451-1"
18
- })`appearance:none;margin:-4px;`;
12
+ var breadcrumbs = "_1alqbl40", expandButton = "_1alqbl41";
19
13
  /**
20
14
  * @beta
21
15
  */
22
16
  function Breadcrumbs(props) {
23
- let $ = c(30), children, maxLength, ref, restProps, separator, t0;
24
- $[0] === props ? (children = $[1], maxLength = $[2], ref = $[3], restProps = $[4], separator = $[5], t0 = $[6]) : ({children, gap: t0, maxLength, ref, separator, ...restProps} = props, $[0] = props, $[1] = children, $[2] = maxLength, $[3] = ref, $[4] = restProps, $[5] = separator, $[6] = t0);
17
+ let $ = c(34), children, className, maxLength, ref, restProps, separator, t0;
18
+ $[0] === props ? (children = $[1], className = $[2], maxLength = $[3], ref = $[4], restProps = $[5], separator = $[6], t0 = $[7]) : ({children, className, gap: t0, maxLength, ref, separator, ...restProps} = props, $[0] = props, $[1] = children, $[2] = className, $[3] = maxLength, $[4] = ref, $[5] = restProps, $[6] = separator, $[7] = t0);
25
19
  let gap = t0 === void 0 ? 2 : t0, t1;
26
- $[7] === gap ? t1 = $[8] : (t1 = _getArrayProp(gap), $[7] = gap, $[8] = t1);
20
+ $[8] === gap ? t1 = $[9] : (t1 = _getArrayProp(gap), $[8] = gap, $[9] = t1);
27
21
  let space = t1, [open, setOpen] = useState(!1), expandElementRef = useRef(null), popoverElementRef = useRef(null), t2;
28
- $[9] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => setOpen(!1), $[9] = t2) : t2 = $[9];
22
+ $[10] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => setOpen(!1), $[10] = t2) : t2 = $[10];
29
23
  let collapse = t2, t3;
30
- $[10] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => setOpen(!0), $[10] = t3) : t3 = $[10];
24
+ $[11] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => setOpen(!0), $[11] = t3) : t3 = $[11];
31
25
  let expand = t3, t4;
32
- $[11] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => [expandElementRef.current, popoverElementRef.current], $[11] = t4) : t4 = $[11], useClickOutsideEvent(collapse, t4);
26
+ $[12] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => [expandElementRef.current, popoverElementRef.current], $[12] = t4) : t4 = $[12], useClickOutsideEvent(collapse, t4);
33
27
  let t5;
34
- $[12] === children ? t5 = $[13] : (t5 = Children.toArray(children).filter(isValidElement), $[12] = children, $[13] = t5);
28
+ $[13] === children ? t5 = $[14] : (t5 = Children.toArray(children).filter(isValidElement), $[13] = children, $[14] = t5);
35
29
  let rawItems = t5, t6;
36
- $[14] !== maxLength || $[15] !== open || $[16] !== rawItems || $[17] !== space ? (t6 = {
30
+ $[15] !== maxLength || $[16] !== open || $[17] !== rawItems || $[18] !== space ? (t6 = {
37
31
  collapse,
38
32
  expand,
39
33
  expandElementRef,
@@ -42,11 +36,13 @@ function Breadcrumbs(props) {
42
36
  popoverElementRef,
43
37
  rawItems,
44
38
  space
45
- }, $[14] = maxLength, $[15] = open, $[16] = rawItems, $[17] = space, $[18] = t6) : t6 = $[18];
39
+ }, $[15] = maxLength, $[16] = open, $[17] = rawItems, $[18] = space, $[19] = t6) : t6 = $[19];
46
40
  let items = useItems(t6), t7;
47
- if ($[19] !== items || $[20] !== separator || $[21] !== space) {
48
- let t8;
49
- $[23] !== separator || $[24] !== space ? (t8 = (item, itemIndex) => /* @__PURE__ */ jsxs(Fragment, { children: [itemIndex > 0 && /* @__PURE__ */ jsx(Box, {
41
+ $[20] === className ? t7 = $[21] : (t7 = clsx(breadcrumbs, className), $[20] = className, $[21] = t7);
42
+ let t8;
43
+ if ($[22] !== items || $[23] !== separator || $[24] !== space) {
44
+ let t9;
45
+ $[26] !== separator || $[27] !== space ? (t9 = (item, itemIndex) => /* @__PURE__ */ jsxs(Fragment, { children: [itemIndex > 0 && /* @__PURE__ */ jsx(Box, {
50
46
  "aria-hidden": !0,
51
47
  as: "li",
52
48
  paddingX: space,
@@ -57,15 +53,16 @@ function Breadcrumbs(props) {
57
53
  }), /* @__PURE__ */ jsx(Box, {
58
54
  as: "li",
59
55
  children: item
60
- })] }, itemIndex), $[23] = separator, $[24] = space, $[25] = t8) : t8 = $[25], t7 = items.map(t8), $[19] = items, $[20] = separator, $[21] = space, $[22] = t7;
61
- } else t7 = $[22];
62
- let t8;
63
- return $[26] !== ref || $[27] !== restProps || $[28] !== t7 ? (t8 = /* @__PURE__ */ jsx(StyledBreadcrumbs, {
56
+ })] }, itemIndex), $[26] = separator, $[27] = space, $[28] = t9) : t9 = $[28], t8 = items.map(t9), $[22] = items, $[23] = separator, $[24] = space, $[25] = t8;
57
+ } else t8 = $[25];
58
+ let t9;
59
+ return $[29] !== ref || $[30] !== restProps || $[31] !== t7 || $[32] !== t8 ? (t9 = /* @__PURE__ */ jsx("ol", {
60
+ className: t7,
64
61
  "data-ui": "Breadcrumbs",
65
- ...restProps,
66
62
  ref,
67
- children: t7
68
- }), $[26] = ref, $[27] = restProps, $[28] = t7, $[29] = t8) : t8 = $[29], t8;
63
+ ...restProps,
64
+ children: t8
65
+ }), $[29] = ref, $[30] = restProps, $[31] = t7, $[32] = t8, $[33] = t9) : t9 = $[33], t9;
69
66
  }
70
67
  function useItems(t0) {
71
68
  let $ = c(28), { collapse, expand, expandElementRef, maxLength, open, popoverElementRef, rawItems, space } = t0, len = rawItems.length;
@@ -83,7 +80,8 @@ function useItems(t0) {
83
80
  children: t3
84
81
  }), $[16] = space, $[17] = t3, $[18] = t4) : t4 = $[18];
85
82
  let t5 = open ? collapse : expand, t6;
86
- $[19] !== expandElementRef || $[20] !== open || $[21] !== t5 ? (t6 = /* @__PURE__ */ jsx(ExpandButton, {
83
+ $[19] !== expandElementRef || $[20] !== open || $[21] !== t5 ? (t6 = /* @__PURE__ */ jsx(Button, {
84
+ className: expandButton,
87
85
  fontSize: 1,
88
86
  mode: "bleed",
89
87
  onClick: t5,
@@ -1 +1 @@
1
- {"version":3,"file":"breadcrumbs.js","names":["gap = 2","_getArrayProp(gap)","() => setOpen(false)","useCallback(() => setOpen(false), [])","() => setOpen(true)","useCallback(() => setOpen(true), [])","() => [expandElementRef.current, popoverElementRef.current]","Children.toArray(children).filter(isValidElement)","useMemo(() => Children.toArray(children).filter(isValidElement), [children])","{\n collapse,\n expand,\n expandElementRef,\n maxLength,\n open,\n popoverElementRef,\n rawItems,\n space,\n }","items.map((item, itemIndex) => (\n // oxlint-disable-next-line no-array-index-key\n <Fragment key={itemIndex}>\n {itemIndex > 0 && (\n <Box aria-hidden as=\"li\" paddingX={space}>\n {separator || <Text muted>/</Text>}\n </Box>\n )}\n <Box as=\"li\">{item}</Box>\n </Fragment>\n ))","(item, itemIndex) => (\n // oxlint-disable-next-line no-array-index-key\n <Fragment key={itemIndex}>\n {itemIndex > 0 && (\n <Box aria-hidden as=\"li\" paddingX={space}>\n {separator || <Text muted>/</Text>}\n </Box>\n )}\n <Box as=\"li\">{item}</Box>\n </Fragment>\n )","<StyledBreadcrumbs data-ui=\"Breadcrumbs\" {...restProps} ref={ref}>\n {items.map((item, itemIndex) => (\n // oxlint-disable-next-line no-array-index-key\n <Fragment key={itemIndex}>\n {itemIndex > 0 && (\n <Box aria-hidden as=\"li\" paddingX={space}>\n {separator || <Text muted>/</Text>}\n </Box>\n )}\n <Box as=\"li\">{item}</Box>\n </Fragment>\n ))}\n </StyledBreadcrumbs>","{\n collapse,\n expand,\n expandElementRef,\n maxLength,\n open,\n popoverElementRef,\n rawItems,\n space,\n}: {\n collapse: () => void\n expand: () => void\n expandElementRef: React.RefObject<HTMLButtonElement | null>\n maxLength: number | undefined\n open: boolean\n popoverElementRef: React.RefObject<HTMLDivElement | null>\n // oxlint-disable-next-line no-unnecessary-type-arguments\n rawItems: React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[]\n space: number[]\n}","[\n ...rawItems.slice(0, beforeLength - 1),\n <Popover\n constrainSize\n content={\n <Stack as=\"ol\" overflow=\"auto\" padding={space} gap={space}>\n {rawItems.slice(beforeLength - 1, len - afterLength)}\n </Stack>\n }\n key=\"button\"\n open={open}\n placement=\"top\"\n portal\n ref={popoverElementRef}\n >\n <ExpandButton\n fontSize={1}\n mode=\"bleed\"\n onClick={open ? collapse : expand}\n padding={1}\n ref={expandElementRef}\n selected={open}\n text=\"…\"\n />\n </Popover>,\n ...rawItems.slice(len - afterLength),\n ]","rawItems.slice(beforeLength - 1, len - afterLength)","<Stack as=\"ol\" overflow=\"auto\" padding={space} gap={space}>\n {rawItems.slice(beforeLength - 1, len - afterLength)}\n </Stack>","<ExpandButton\n fontSize={1}\n mode=\"bleed\"\n onClick={open ? collapse : expand}\n padding={1}\n ref={expandElementRef}\n selected={open}\n text=\"…\"\n />","open ? collapse : expand","<Popover\n constrainSize\n content={\n <Stack as=\"ol\" overflow=\"auto\" padding={space} gap={space}>\n {rawItems.slice(beforeLength - 1, len - afterLength)}\n </Stack>\n }\n key=\"button\"\n open={open}\n placement=\"top\"\n portal\n ref={popoverElementRef}\n >\n <ExpandButton\n fontSize={1}\n mode=\"bleed\"\n onClick={open ? collapse : expand}\n padding={1}\n ref={expandElementRef}\n selected={open}\n text=\"…\"\n />\n </Popover>","rawItems.slice(0, beforeLength - 1)"],"sources":["../src/core/components/breadcrumbs/breadcrumbs.styles.ts","../src/core/components/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import {styled} from 'styled-components'\n\nimport {Button} from '../../primitives/button/button'\n\nexport const StyledBreadcrumbs = styled.ol`\n margin: 0;\n padding: 0;\n display: flex;\n list-style: none;\n align-items: center;\n white-space: nowrap;\n line-height: 0;\n`\n\nexport const ExpandButton = styled(Button)`\n appearance: none;\n margin: -4px;\n`\n","import {Children, Fragment, isValidElement, useCallback, useMemo, useRef, useState} from 'react'\n\nimport {useClickOutsideEvent} from '../../hooks/useClickOutsideEvent'\nimport {Box} from '../../primitives/box/box'\nimport {Popover} from '../../primitives/popover/popover'\nimport {Stack} from '../../primitives/stack/stack'\nimport {Text} from '../../primitives/text/text'\nimport {_getArrayProp} from '../../styles/helpers'\nimport {ExpandButton, StyledBreadcrumbs} from './breadcrumbs.styles'\n\n/**\n * @beta\n */\nexport interface BreadcrumbsProps {\n maxLength?: number\n separator?: React.ReactNode\n gap?: number | number[]\n /**\n * @deprecated Use `gap` instead.\n */\n space?: never\n}\n\n/**\n * @beta\n */\nexport function Breadcrumbs(\n props: BreadcrumbsProps & Omit<React.HTMLProps<HTMLOListElement>, 'as' | 'type'>,\n) {\n const {children, gap = 2, maxLength, ref, separator, ...restProps} = props\n const space = _getArrayProp(gap)\n const [open, setOpen] = useState(false)\n const expandElementRef = useRef<HTMLButtonElement | null>(null)\n const popoverElementRef = useRef<HTMLDivElement | null>(null)\n\n const collapse = useCallback(() => setOpen(false), [])\n const expand = useCallback(() => setOpen(true), [])\n\n useClickOutsideEvent(collapse, () => [expandElementRef.current, popoverElementRef.current])\n\n const rawItems = useMemo(() => Children.toArray(children).filter(isValidElement), [children])\n\n const items = useItems({\n collapse,\n expand,\n expandElementRef,\n maxLength,\n open,\n popoverElementRef,\n rawItems,\n space,\n })\n\n return (\n <StyledBreadcrumbs data-ui=\"Breadcrumbs\" {...restProps} ref={ref}>\n {items.map((item, itemIndex) => (\n // oxlint-disable-next-line no-array-index-key\n <Fragment key={itemIndex}>\n {itemIndex > 0 && (\n <Box aria-hidden as=\"li\" paddingX={space}>\n {separator || <Text muted>/</Text>}\n </Box>\n )}\n <Box as=\"li\">{item}</Box>\n </Fragment>\n ))}\n </StyledBreadcrumbs>\n )\n}\n\nfunction useItems({\n collapse,\n expand,\n expandElementRef,\n maxLength,\n open,\n popoverElementRef,\n rawItems,\n space,\n}: {\n collapse: () => void\n expand: () => void\n expandElementRef: React.RefObject<HTMLButtonElement | null>\n maxLength: number | undefined\n open: boolean\n popoverElementRef: React.RefObject<HTMLDivElement | null>\n // oxlint-disable-next-line no-unnecessary-type-arguments\n rawItems: React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[]\n space: number[]\n}) {\n const len = rawItems.length\n\n if (maxLength && len > maxLength) {\n const beforeLength = Math.ceil(maxLength / 2)\n const afterLength = Math.floor(maxLength / 2)\n\n return [\n ...rawItems.slice(0, beforeLength - 1),\n <Popover\n constrainSize\n content={\n <Stack as=\"ol\" overflow=\"auto\" padding={space} gap={space}>\n {rawItems.slice(beforeLength - 1, len - afterLength)}\n </Stack>\n }\n key=\"button\"\n open={open}\n placement=\"top\"\n portal\n ref={popoverElementRef}\n >\n <ExpandButton\n fontSize={1}\n mode=\"bleed\"\n onClick={open ? collapse : expand}\n padding={1}\n ref={expandElementRef}\n selected={open}\n text=\"…\"\n />\n </Popover>,\n ...rawItems.slice(len - afterLength),\n ]\n }\n\n return rawItems\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"breadcrumbs.js","names":["gap = 2","_getArrayProp(gap)","() => setOpen(false)","useCallback(() => setOpen(false), [])","() => setOpen(true)","useCallback(() => setOpen(true), [])","() => [expandElementRef.current, popoverElementRef.current]","Children.toArray(children).filter(isValidElement)","useMemo(() => Children.toArray(children).filter(isValidElement), [children])","{\n collapse,\n expand,\n expandElementRef,\n maxLength,\n open,\n popoverElementRef,\n rawItems,\n space,\n }","clsx(breadcrumbs, className)","items.map((item, itemIndex) => (\n // oxlint-disable-next-line no-array-index-key\n <Fragment key={itemIndex}>\n {itemIndex > 0 && (\n <Box aria-hidden as=\"li\" paddingX={space}>\n {separator || <Text muted>/</Text>}\n </Box>\n )}\n <Box as=\"li\">{item}</Box>\n </Fragment>\n ))","(item, itemIndex) => (\n // oxlint-disable-next-line no-array-index-key\n <Fragment key={itemIndex}>\n {itemIndex > 0 && (\n <Box aria-hidden as=\"li\" paddingX={space}>\n {separator || <Text muted>/</Text>}\n </Box>\n )}\n <Box as=\"li\">{item}</Box>\n </Fragment>\n )","<ol className={clsx(breadcrumbs, className)} data-ui=\"Breadcrumbs\" ref={ref} {...restProps}>\n {items.map((item, itemIndex) => (\n // oxlint-disable-next-line no-array-index-key\n <Fragment key={itemIndex}>\n {itemIndex > 0 && (\n <Box aria-hidden as=\"li\" paddingX={space}>\n {separator || <Text muted>/</Text>}\n </Box>\n )}\n <Box as=\"li\">{item}</Box>\n </Fragment>\n ))}\n </ol>","{\n collapse,\n expand,\n expandElementRef,\n maxLength,\n open,\n popoverElementRef,\n rawItems,\n space,\n}: {\n collapse: () => void\n expand: () => void\n expandElementRef: React.RefObject<HTMLButtonElement | null>\n maxLength: number | undefined\n open: boolean\n popoverElementRef: React.RefObject<HTMLDivElement | null>\n // oxlint-disable-next-line no-unnecessary-type-arguments\n rawItems: React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[]\n space: number[]\n}","[\n ...rawItems.slice(0, beforeLength - 1),\n <Popover\n key=\"button\"\n constrainSize\n content={\n <Stack as=\"ol\" overflow=\"auto\" padding={space} gap={space}>\n {rawItems.slice(beforeLength - 1, len - afterLength)}\n </Stack>\n }\n open={open}\n placement=\"top\"\n portal\n ref={popoverElementRef}\n >\n <Button\n className={expandButton}\n fontSize={1}\n mode=\"bleed\"\n onClick={open ? collapse : expand}\n padding={1}\n ref={expandElementRef}\n selected={open}\n text=\"…\"\n />\n </Popover>,\n ...rawItems.slice(len - afterLength),\n ]","rawItems.slice(beforeLength - 1, len - afterLength)","<Stack as=\"ol\" overflow=\"auto\" padding={space} gap={space}>\n {rawItems.slice(beforeLength - 1, len - afterLength)}\n </Stack>","<Button\n className={expandButton}\n fontSize={1}\n mode=\"bleed\"\n onClick={open ? collapse : expand}\n padding={1}\n ref={expandElementRef}\n selected={open}\n text=\"…\"\n />","open ? collapse : expand","<Popover\n key=\"button\"\n constrainSize\n content={\n <Stack as=\"ol\" overflow=\"auto\" padding={space} gap={space}>\n {rawItems.slice(beforeLength - 1, len - afterLength)}\n </Stack>\n }\n open={open}\n placement=\"top\"\n portal\n ref={popoverElementRef}\n >\n <Button\n className={expandButton}\n fontSize={1}\n mode=\"bleed\"\n onClick={open ? collapse : expand}\n padding={1}\n ref={expandElementRef}\n selected={open}\n text=\"…\"\n />\n </Popover>","rawItems.slice(0, beforeLength - 1)"],"sources":["../src/core/components/breadcrumbs/breadcrumbs.css.ts","../src/core/components/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import {style} from '@vanilla-extract/css'\n\nexport const breadcrumbs = style({\n margin: 0,\n padding: 0,\n display: 'flex',\n listStyle: 'none',\n alignItems: 'center',\n whiteSpace: 'nowrap',\n lineHeight: 0,\n})\n\nexport const expandButton = style({\n appearance: 'none',\n selectors: {\n '&&': {\n margin: -4,\n },\n },\n})\n","import {clsx} from 'clsx/lite'\nimport {Children, Fragment, isValidElement, useCallback, useMemo, useRef, useState} from 'react'\n\nimport {useClickOutsideEvent} from '../../hooks/useClickOutsideEvent'\nimport {Box} from '../../primitives/box/box'\nimport {Button} from '../../primitives/button/button'\nimport {Popover} from '../../primitives/popover/popover'\nimport {Stack} from '../../primitives/stack/stack'\nimport {Text} from '../../primitives/text/text'\nimport {_getArrayProp} from '../../styles/helpers'\n\nimport {breadcrumbs, expandButton} from './breadcrumbs.css'\n\n/**\n * @beta\n */\nexport interface BreadcrumbsProps {\n maxLength?: number\n separator?: React.ReactNode\n gap?: number | number[]\n /**\n * @deprecated Use `gap` instead.\n */\n space?: never\n}\n\n/**\n * @beta\n */\nexport function Breadcrumbs(\n props: BreadcrumbsProps & Omit<React.HTMLProps<HTMLOListElement>, 'as' | 'type'>,\n) {\n const {children, className, gap = 2, maxLength, ref, separator, ...restProps} = props\n const space = _getArrayProp(gap)\n const [open, setOpen] = useState(false)\n const expandElementRef = useRef<HTMLButtonElement | null>(null)\n const popoverElementRef = useRef<HTMLDivElement | null>(null)\n\n const collapse = useCallback(() => setOpen(false), [])\n const expand = useCallback(() => setOpen(true), [])\n\n useClickOutsideEvent(collapse, () => [expandElementRef.current, popoverElementRef.current])\n\n const rawItems = useMemo(() => Children.toArray(children).filter(isValidElement), [children])\n\n const items = useItems({\n collapse,\n expand,\n expandElementRef,\n maxLength,\n open,\n popoverElementRef,\n rawItems,\n space,\n })\n\n return (\n <ol className={clsx(breadcrumbs, className)} data-ui=\"Breadcrumbs\" ref={ref} {...restProps}>\n {items.map((item, itemIndex) => (\n // oxlint-disable-next-line no-array-index-key\n <Fragment key={itemIndex}>\n {itemIndex > 0 && (\n <Box aria-hidden as=\"li\" paddingX={space}>\n {separator || <Text muted>/</Text>}\n </Box>\n )}\n <Box as=\"li\">{item}</Box>\n </Fragment>\n ))}\n </ol>\n )\n}\n\nfunction useItems({\n collapse,\n expand,\n expandElementRef,\n maxLength,\n open,\n popoverElementRef,\n rawItems,\n space,\n}: {\n collapse: () => void\n expand: () => void\n expandElementRef: React.RefObject<HTMLButtonElement | null>\n maxLength: number | undefined\n open: boolean\n popoverElementRef: React.RefObject<HTMLDivElement | null>\n // oxlint-disable-next-line no-unnecessary-type-arguments\n rawItems: React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[]\n space: number[]\n}) {\n const len = rawItems.length\n\n if (maxLength && len > maxLength) {\n const beforeLength = Math.ceil(maxLength / 2)\n const afterLength = Math.floor(maxLength / 2)\n\n return [\n ...rawItems.slice(0, beforeLength - 1),\n <Popover\n key=\"button\"\n constrainSize\n content={\n <Stack as=\"ol\" overflow=\"auto\" padding={space} gap={space}>\n {rawItems.slice(beforeLength - 1, len - afterLength)}\n </Stack>\n }\n open={open}\n placement=\"top\"\n portal\n ref={popoverElementRef}\n >\n <Button\n className={expandButton}\n fontSize={1}\n mode=\"bleed\"\n onClick={open ? collapse : expand}\n padding={1}\n ref={expandElementRef}\n selected={open}\n text=\"…\"\n />\n </Popover>,\n ...rawItems.slice(len - afterLength),\n ]\n }\n\n return rawItems\n}\n"],"mappings":"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"}
@@ -1,8 +1,8 @@
1
1
  import { n as _getArrayProp } from "./helpers-C8xxXAQC.js";
2
2
  import { t as getTheme_v2 } from "./getTheme_v2-y09KqtEb.js";
3
- import { _ as useTheme_v2, h as _cardColorStyle, m as focusRingStyle, p as focusRingBorderStyle, v as responsiveRadiusStyle, y as Box } from "./useLayer-jUJIz8mh.js";
4
- import { t as Flex } from "./flex-CySCBzQm.js";
5
- import { n as Text } from "./stack-BGFEokua.js";
3
+ import { _ as useTheme_v2, h as _cardColorStyle, m as focusRingStyle, p as focusRingBorderStyle, v as responsiveRadiusStyle, y as Box } from "./useLayer-D1usxIE0.js";
4
+ import { t as Flex } from "./flex-DmbDG2ks.js";
5
+ import { n as Text } from "./stack-rsNFPq2-.js";
6
6
  import { c } from "react/compiler-runtime";
7
7
  import { SpinnerIcon } from "@sanity/icons/Spinner";
8
8
  import { isValidElement } from "react";
@@ -76,11 +76,8 @@ function buttonColorStyles(props) {
76
76
  }
77
77
  const StyledButton = /* @__PURE__ */ styled.button.withConfig({
78
78
  displayName: "StyledButton",
79
- componentId: "sc-gom2qw-0"
80
- })(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles), LoadingBox = styled.div.withConfig({
81
- displayName: "LoadingBox",
82
- componentId: "sc-gom2qw-1"
83
- })`position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background-color:var(--card-bg-color);border-radius:inherit;z-index:1;box-shadow:inherit;`;
79
+ componentId: "sc-8ulm26-0"
80
+ })(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
84
81
  function ButtonComponent(props) {
85
82
  let $ = c(87), IconComponent, IconRightComponent, children, disabled, loading, paddingBottomProp, paddingLeftProp, paddingRightProp, paddingTopProp, paddingXProp, paddingYProp, ref, restProps, selected, t0, t1, t2, t3, t4, t5, t6, t7, t8, text, textAlign, textWeight, width;
86
83
  $[0] === props ? (IconComponent = $[1], IconRightComponent = $[2], children = $[3], disabled = $[4], loading = $[5], paddingBottomProp = $[6], paddingLeftProp = $[7], paddingRightProp = $[8], paddingTopProp = $[9], paddingXProp = $[10], paddingYProp = $[11], ref = $[12], restProps = $[13], selected = $[14], t0 = $[15], t1 = $[16], t2 = $[17], t3 = $[18], t4 = $[19], t5 = $[20], t6 = $[21], t7 = $[22], t8 = $[23], text = $[24], textAlign = $[25], textWeight = $[26], width = $[27]) : ({children, disabled, ref, fontSize: t0, icon: IconComponent, iconRight: IconRightComponent, justify: t1, loading, mode: t2, padding: t3, paddingX: paddingXProp, paddingY: paddingYProp, paddingTop: paddingTopProp, paddingBottom: paddingBottomProp, paddingLeft: paddingLeftProp, paddingRight: paddingRightProp, radius: t4, selected, gap: t5, text, textAlign, textWeight, tone: t6, type: t7, muted: t8, width, ...restProps} = props, $[0] = props, $[1] = IconComponent, $[2] = IconRightComponent, $[3] = children, $[4] = disabled, $[5] = loading, $[6] = paddingBottomProp, $[7] = paddingLeftProp, $[8] = paddingRightProp, $[9] = paddingTopProp, $[10] = paddingXProp, $[11] = paddingYProp, $[12] = ref, $[13] = restProps, $[14] = selected, $[15] = t0, $[16] = t1, $[17] = t2, $[18] = t3, $[19] = t4, $[20] = t5, $[21] = t6, $[22] = t7, $[23] = t8, $[24] = text, $[25] = textAlign, $[26] = textWeight, $[27] = width);
@@ -115,7 +112,10 @@ function ButtonComponent(props) {
115
112
  paddingRight
116
113
  }, $[48] = padding, $[49] = paddingBottom, $[50] = paddingLeft, $[51] = paddingRight, $[52] = paddingTop, $[53] = paddingX, $[54] = paddingY, $[55] = t19) : t19 = $[55];
117
114
  let boxProps = t19, t20 = !!(loading || disabled), t21 = selected ? "" : void 0, t22 = !!(loading || disabled), t23;
118
- $[56] === loading ? t23 = $[57] : (t23 = !!loading && /* @__PURE__ */ jsx(LoadingBox, { children: /* @__PURE__ */ jsx(Spinner, {}) }), $[56] = loading, $[57] = t23);
115
+ $[56] === loading ? t23 = $[57] : (t23 = !!loading && /* @__PURE__ */ jsx("div", {
116
+ className: "_2mi48t0",
117
+ children: /* @__PURE__ */ jsx(Spinner, {})
118
+ }), $[56] = loading, $[57] = t23);
119
119
  let t24;
120
120
  $[58] !== IconComponent || $[59] !== IconRightComponent || $[60] !== boxProps || $[61] !== button || $[62] !== fontSize || $[63] !== justify || $[64] !== muted || $[65] !== spacing || $[66] !== text || $[67] !== textAlign || $[68] !== textWeight ? (t24 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsx(Box, {
121
121
  as: "span",
@@ -176,4 +176,4 @@ function ButtonComponent(props) {
176
176
  const Button = ButtonComponent;
177
177
  export { Spinner as n, spinnerIcon as r, Button as t };
178
178
 
179
- //# sourceMappingURL=button-DQH2KIbq.js.map
179
+ //# sourceMappingURL=button-Dh_M2fYx.js.map