@sanity/ui/dist/index.mjs.map

The Sanity UI components.

{"version":3,"file":"index.mjs","sources":["../src/core/helpers/animation.ts","../src/core/helpers/focus.ts","../src/core/hooks/useClickOutside.ts","../src/core/hooks/useElementRect/useElementRect.ts","../src/core/hooks/useForwardedRef.ts","../src/core/utils/errorBoundary.tsx","../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","../src/core/components/breadcrumbs/breadcrumbs.styles.ts","../src/core/components/breadcrumbs/breadcrumbs.tsx","../src/core/components/dialog/styles.ts","../src/core/components/dialog/dialogContext.ts","../src/core/components/dialog/useDialog.ts","../src/core/components/dialog/dialog.tsx","../src/core/components/dialog/dialogProvider.tsx","../src/core/components/menu/menuButton.tsx","../src/core/components/skeleton/styles.ts","../src/core/components/skeleton/skeleton.tsx","../src/core/components/skeleton/textSkeleton.tsx","../src/core/components/tab/tabPanel.tsx","../src/core/components/toast/styles.ts","../src/core/components/toast/toast.tsx","../src/core/hooks/useMounted.ts","../src/core/components/toast/toastContext.ts","../src/core/components/toast/toastLayer.tsx","../src/core/components/toast/toastState.ts","../src/core/components/toast/toastProvider.tsx","../src/core/components/toast/useToast.ts","../src/core/components/tree/helpers.ts","../src/core/components/tree/treeContext.ts","../src/core/components/tree/tree.tsx","../src/core/components/tree/style.ts","../src/core/components/tree/useTree.ts","../src/core/components/tree/treeGroup.tsx","../src/core/components/tree/treeItem.tsx"],"sourcesContent":["/**\n * @internal\n */\nexport function _raf(fn: () => void): () => void {\n  const frameId = requestAnimationFrame(fn)\n\n  return () => {\n    cancelAnimationFrame(frameId)\n  }\n}\n\n/**\n * @internal\n */\nexport function _raf2(fn: () => void): () => void {\n  let innerDispose: (() => void) | null = null\n\n  const outerDispose = _raf(() => {\n    innerDispose = _raf(fn)\n  })\n\n  return () => {\n    if (innerDispose) innerDispose()\n\n    outerDispose()\n  }\n}\n","import {\n  isHTMLAnchorElement,\n  isHTMLButtonElement,\n  isHTMLElement,\n  isHTMLInputElement,\n  isHTMLSelectElement,\n  isHTMLTextAreaElement,\n} from './element'\n\n// export const globalFocusState = {\n//   IgnoreUtilFocusChanges: false,\n// }\n\n/**\n * @internal\n */\nexport function _hasFocus(element: HTMLElement): boolean {\n  return Boolean(document.activeElement) && element.contains(document.activeElement)\n}\n\n/**\n * @internal\n */\nexport function isFocusable(element: HTMLElement): boolean {\n  if (\n    element.tabIndex > 0 ||\n    (element.tabIndex === 0 && element.getAttribute('tabIndex') !== null)\n  ) {\n    return true\n  }\n\n  if (isHTMLAnchorElement(element)) {\n    return Boolean(element.href) && element.rel !== 'ignore'\n  }\n\n  if (isHTMLInputElement(element)) {\n    return element.type !== 'hidden' && element.type !== 'file' && !element.disabled\n  }\n\n  if (\n    isHTMLButtonElement(element) ||\n    isHTMLSelectElement(element) ||\n    isHTMLTextAreaElement(element)\n  ) {\n    return !element.disabled\n  }\n\n  return false\n}\n\n/**\n * @internal\n */\nexport function attemptFocus(element: HTMLElement): boolean {\n  if (!isFocusable(element)) {\n    return false\n  }\n\n  // globalFocusState.IgnoreUtilFocusChanges = true\n\n  try {\n    element.focus()\n  } catch {\n    // ignore\n  }\n\n  // globalFocusState.IgnoreUtilFocusChanges = false\n\n  return document.activeElement === element\n}\n\n/**\n * @internal\n */\nexport function focusFirstDescendant(element: HTMLElement): boolean {\n  for (let i = 0; i < element.childNodes.length; i++) {\n    const child = element.childNodes[i]\n\n    if (isHTMLElement(child) && (attemptFocus(child) || focusFirstDescendant(child))) {\n      return true\n    }\n  }\n\n  return false\n}\n\n/**\n * @internal\n */\nexport function focusLastDescendant(element: HTMLElement): boolean {\n  for (let i = element.childNodes.length - 1; i >= 0; i--) {\n    const child = element.childNodes[i]\n\n    if (isHTMLElement(child) && (attemptFocus(child) || focusLastDescendant(child))) {\n      return true\n    }\n  }\n\n  return false\n}\n","import {useEffect, useRef, useState} from 'react'\n\nimport {EMPTY_ARRAY} from '../constants'\n\n/**\n * @public\n */\nexport type ClickOutsideListener = (event: MouseEvent) => void\n\n/**\n * @public\n */\nexport type ClickOutsideElements = (HTMLElement | null | (HTMLElement | null)[])[]\n\nfunction _getElements(\n  element: HTMLElement | null,\n  elementsArg: ClickOutsideElements,\n): HTMLElement[] {\n  const ret = [element]\n\n  for (const el of elementsArg) {\n    if (Array.isArray(el)) {\n      ret.push(...el)\n    } else {\n      ret.push(el)\n    }\n  }\n\n  return ret.filter(Boolean) as HTMLElement[]\n}\n\n/**\n * @public\n * @deprecated replaced by the new `useClickOutsideEvent` hook, instead of:\n * ```tsx\n * const [button, setButtonElement] = useState(null)\n * useClickOutside((event) => {}, [button])\n * return <button ref={setButtonElement} />\n * ```\n * do:\n * ```tsx\n * const buttonRef = useRef()\n * useClickOutsideEvent((event) => {}, () => [buttonRef.current])\n * return <button ref={buttonRef} />\n * ```\n */\nexport function useClickOutside(\n  listener: ClickOutsideListener,\n  elementsArg: ClickOutsideElements = EMPTY_ARRAY,\n  boundaryElement?: HTMLElement | null,\n): (el: HTMLElement | null) => void {\n  const [element, setElement] = useState<HTMLElement | null>(null)\n  const [elements, setElements] = useState(() => _getElements(element, elementsArg))\n  const elementsRef = useRef(elements)\n\n  useEffect(() => {\n    const prevElements = elementsRef.current\n    const nextElements = _getElements(element, elementsArg)\n\n    if (prevElements.length !== nextElements.length) {\n      setElements(nextElements)\n      elementsRef.current = nextElements\n\n      return\n    }\n\n    for (const el of prevElements) {\n      if (!nextElements.includes(el)) {\n        setElements(nextElements)\n        elementsRef.current = nextElements\n\n        return\n      }\n    }\n\n    for (const el of nextElements) {\n      if (!prevElements.includes(el)) {\n        setElements(nextElements)\n        elementsRef.current = nextElements\n\n        return\n      }\n    }\n  }, [element, elementsArg])\n\n  useEffect(() => {\n    if (!listener) return undefined\n\n    const handleWindowMouseDown = (evt: MouseEvent) => {\n      const target = evt.target\n\n      if (!(target instanceof Node)) {\n        return\n      }\n\n      if (boundaryElement && !boundaryElement.contains(target)) {\n        return\n      }\n\n      for (const el of elements) {\n        if (target === el || el.contains(target)) {\n          return\n        }\n      }\n\n      listener(evt)\n    }\n\n    window.addEventListener('mousedown', handleWindowMouseDown)\n\n    return () => {\n      window.removeEventListener('mousedown', handleWindowMouseDown)\n    }\n  }, [boundaryElement, listener, elements])\n\n  return setElement\n}\n","import {useElementSize} from '../useElementSize'\n\n/**\n * Subscribe to the rect of a DOM element.\n * @beta\n *\n * @deprecated Use `useElementSize` instead\n */\nexport function useElementRect(element: HTMLElement | null): DOMRectReadOnly | null {\n  const elementSize = useElementSize(element)\n\n  return elementSize?._contentRect || null\n}\n","import {useImperativeHandle, useRef} from 'react'\n\n/**\n * @beta\n * @deprecated use `useImperativeHandle` instead\n * @example\n * ```diff\n * -const ref = useForwardedRef(forwardedRef)\n * +const ref = useRef(null)\n * +useImperativeHandle(forwardedRef, () => ref.current)\n * ```\n */\nexport function useForwardedRef<T>(ref: React.ForwardedRef<T>): React.MutableRefObject<T | null> {\n  const innerRef = useRef<T | null>(null)\n\n  useImperativeHandle(ref, () => innerRef.current!)\n\n  return innerRef\n}\n","import {Component, PropsWithChildren} from 'react'\n\nimport {Code} from '../primitives/code'\n\n/**\n * DO NOT USE IN PRODUCTION\n * @beta\n */\nexport type ErrorBoundaryProps = PropsWithChildren<{\n  onCatch: (params: {error: Error; info: React.ErrorInfo}) => void\n}>\n\n/**\n * DO NOT USE IN PRODUCTION\n * @beta\n */\nexport interface ErrorBoundaryState {\n  error: Error | null\n}\n\n/**\n * DO NOT USE IN PRODUCTION\n * @beta\n */\nexport class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  state: ErrorBoundaryState = {error: null}\n\n  static getDerivedStateFromError(error: Error): ErrorBoundaryState {\n    // Update state so the next render will show the fallback UI.\n    return {error}\n  }\n\n  componentDidCatch(error: Error, info: React.ErrorInfo): void {\n    this.props.onCatch({error, info})\n  }\n\n  render(): React.ReactNode {\n    const {error} = this.state\n\n    if (error) {\n      const message = typeof error?.message === 'string' ? error.message : 'Error'\n\n      return <Code>{message}</Code>\n    }\n\n    return this.props.children\n  }\n}\n","import {SpinnerIcon} from '@sanity/icons'\nimport {keyframes, styled} from 'styled-components'\n\nimport {Box} from '../../primitives'\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\nconst rotate = keyframes`\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n`\n\n/**\n * @internal\n */\nexport const AnimatedSpinnerIcon = styled(SpinnerIcon)`\n  animation: ${rotate} 500ms linear infinite;\n`\n","import {useCallback} from 'react'\n\nimport {_isEnterToClickElement} from '../../helpers'\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      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'\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'\nimport {\n  ChangeEvent,\n  cloneElement,\n  ElementType,\n  FocusEvent,\n  forwardRef,\n  HTMLProps,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n  Ref,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useReducer,\n  useRef,\n} from 'react'\n\nimport {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'\nimport {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'\nimport {useArrayProp} from '../../hooks'\nimport {\n  Box,\n  BoxProps,\n  Button,\n  Card,\n  Popover,\n  PopoverProps,\n  Stack,\n  Text,\n  TextInput,\n} from '../../primitives'\nimport {Radius} from '../../types'\nimport {AnimatedSpinnerIcon, 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\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  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\nconst InnerAutocomplete = forwardRef(function InnerAutocomplete<\n  Option extends BaseAutocompleteOption,\n>(\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      | 'ref'\n      | 'role'\n      | 'spellCheck'\n      | 'type'\n      | 'value'\n    >,\n  forwardedRef: React.ForwardedRef<HTMLInputElement>,\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    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<HTMLDivElement | null>(null)\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 ref to parent\n  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n    forwardedRef,\n    () => inputElementRef.current,\n  )\n\n  const listBoxId = `${id}-listbox`\n  const options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY\n  const padding = useArrayProp(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        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      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      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 = useMemo(\n    () =>\n      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    [padding],\n  )\n  const openButtonPadding = useMemo(() => padding.map((v) => Math.max(v - 1, 0)), [padding])\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 input = (\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 && AnimatedSpinnerIcon}\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={inputElementRef}\n      role=\"combobox\"\n      spellCheck={false}\n      suffix={suffix || openButtonNode}\n      value={inputValue}\n    />\n  )\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          role=\"listbox\"\n          space={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 renderPopover(\n        {\n          content,\n          hidden: !expanded,\n          inputElement: inputElementRef.current,\n          onMouseEnter: handlePopoverMouseEnter,\n          onMouseLeave: handlePopoverMouseLeave,\n        },\n        resultsPopoverElementRef,\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={inputElementRef.current}\n        {...popover}\n      />\n    )\n  }, [\n    content,\n    expanded,\n    filteredOptionsLen,\n    handlePopoverMouseEnter,\n    handlePopoverMouseLeave,\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      {input}\n      {results}\n    </StyledAutocomplete>\n  )\n})\n\nInnerAutocomplete.displayName = 'ForwardRef(Autocomplete)'\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 const Autocomplete = InnerAutocomplete as <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      | 'ref'\n      | 'role'\n      | 'spellCheck'\n      | 'type'\n      | 'value'\n    > & {\n      ref?: Ref<HTMLInputElement>\n    },\n) => React.JSX.Element\n","import {styled} from 'styled-components'\n\nimport {Button} from '../../primitives'\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 {\n  Children,\n  forwardRef,\n  Fragment,\n  isValidElement,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport {useArrayProp, useClickOutsideEvent} from '../../hooks'\nimport {Box, Popover, Stack, Text} from '../../primitives'\nimport {ExpandButton, StyledBreadcrumbs} from './breadcrumbs.styles'\n\n/**\n * @beta\n */\nexport interface BreadcrumbsProps {\n  maxLength?: number\n  separator?: React.ReactNode\n  space?: number | number[]\n}\n\n/**\n * @beta\n */\nexport const Breadcrumbs = forwardRef(function Breadcrumbs(\n  props: BreadcrumbsProps & Omit<React.HTMLProps<HTMLOListElement>, 'as' | 'ref' | 'type'>,\n  ref: React.ForwardedRef<HTMLOListElement>,\n) {\n  const {children, maxLength, separator, space: spaceRaw = 2, ...restProps} = props\n  const space = useArrayProp(spaceRaw)\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 = useMemo(() => {\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} space={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  }, [collapse, expand, maxLength, open, rawItems, space])\n\n  return (\n    <StyledBreadcrumbs data-ui=\"Breadcrumbs\" {...restProps} ref={ref}>\n      {items.map((item, itemIndex) => (\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})\nBreadcrumbs.displayName = 'ForwardRef(Breadcrumbs)'\n","import {CSSObject, getTheme_v2} from '@sanity/ui/theme'\nimport {css} from 'styled-components'\n\nimport {_responsive, ThemeProps} from '../../styles'\nimport {DialogPosition} from '../../types'\n\n/**\n * @internal\n */\nexport interface ResponsiveDialogPositionStyleProps {\n  $position: DialogPosition[]\n}\n\nexport function dialogStyle({theme}: ThemeProps): CSSObject {\n  const {color} = getTheme_v2(theme)\n\n  return {\n    '&:not([hidden])': {\n      display: 'flex',\n    },\n\n    'top': 0,\n    'left': 0,\n    'right': 0,\n    'bottom': 0,\n    'alignItems': 'center',\n    'justifyContent': 'center',\n    'outline': 'none',\n    'background': color.backdrop,\n  }\n}\n\nexport function responsiveDialogPositionStyle(\n  props: ResponsiveDialogPositionStyleProps & ThemeProps,\n): CSSObject[] {\n  const {media} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$position, (position) => ({'&&': {position}}))\n}\n\n/**\n * @internal\n */\nexport interface AnimationDialogStyleProps {\n  $animate: boolean\n}\n\nexport function animationDialogStyle(props: AnimationDialogStyleProps): ReturnType<typeof css> {\n  if (!props.$animate) return css``\n\n  return css`\n    @keyframes zoomIn {\n      from {\n        opacity: 0;\n        transform: scale(0.95);\n      }\n      to {\n        opacity: 1;\n        transform: scale(1);\n      }\n    }\n    @keyframes fadeIn {\n      from {\n        opacity: 0;\n      }\n      to {\n        opacity: 1;\n      }\n    }\n\n    animation: fadeIn 200ms ease-out;\n    // Animates the dialog card.\n    & > [data-ui='DialogCard'] {\n      animation: zoomIn 200ms ease-out;\n    }\n  `\n}\n","import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'\nimport {DialogPosition} from '../../types'\n\n/**\n * This API might change. DO NOT USE IN PRODUCTION.\n * @beta\n */\nexport interface DialogContextValue {\n  version: 0.0\n  position?: DialogPosition | DialogPosition[]\n  zOffset?: number | number[]\n}\n\n/**\n * @internal\n */\nexport const DialogContext = createGlobalScopedContext<DialogContextValue>(\n  '@sanity/ui/context/dialog',\n  {version: 0.0},\n)\n","import {useContext} from 'react'\n\nimport {DialogContext, DialogContextValue} from './dialogContext'\n\n/**\n * This API might change. DO NOT USE IN PRODUCTION.\n * @beta\n */\nexport function useDialog(): DialogContextValue {\n  return useContext(DialogContext)\n}\n","import {CloseIcon} from '@sanity/icons'\nimport {ThemeColorSchemeKey} from '@sanity/ui/theme'\nimport {forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'\nimport {styled} from 'styled-components'\n\nimport {\n  containsOrEqualsElement,\n  focusFirstDescendant,\n  focusLastDescendant,\n  isHTMLElement,\n} from '../../helpers'\nimport {\n  useArrayProp,\n  useClickOutsideEvent,\n  useGlobalKeyDown,\n  usePrefersReducedMotion,\n} from '../../hooks'\nimport {Box, Button, Card, Container, Flex, Text} from '../../primitives'\nimport {ResponsivePaddingProps, ResponsiveWidthProps} from '../../primitives/types'\nimport {responsivePaddingStyle, ResponsivePaddingStyleProps} from '../../styles/internal'\nimport {useTheme_v2} from '../../theme'\nimport {DialogPosition, Radius} from '../../types'\nimport {Layer, LayerProps, Portal, useBoundaryElement, useLayer, usePortal} from '../../utils'\nimport {\n  animationDialogStyle,\n  AnimationDialogStyleProps,\n  dialogStyle,\n  responsiveDialogPositionStyle,\n  ResponsiveDialogPositionStyleProps,\n} from './styles'\nimport {useDialog} from './useDialog'\n\n/**\n * @public\n */\nexport interface DialogProps extends ResponsivePaddingProps, ResponsiveWidthProps {\n  /**\n   * @beta\n   */\n  __unstable_autoFocus?: boolean\n  /**\n   * @beta\n   */\n  __unstable_hideCloseButton?: boolean\n  cardRadius?: Radius | Radius[]\n  cardShadow?: number | number[]\n  contentRef?: React.ForwardedRef<HTMLDivElement>\n  footer?: React.ReactNode\n  header?: React.ReactNode\n  id: string\n  /** A callback that fires when the dialog becomes the top layer when it was not the top layer before. */\n  onActivate?: LayerProps['onActivate']\n  onClickOutside?: () => void\n  onClose?: () => void\n  portal?: string\n  position?: DialogPosition | DialogPosition[]\n  scheme?: ThemeColorSchemeKey\n  zOffset?: number | number[]\n  /**\n   * Whether the dialog should animate in on mount.\n   *\n   * @beta\n   * @defaultValue false\n   */\n  animate?: boolean\n}\n\ninterface DialogCardProps extends ResponsiveWidthProps {\n  /**\n   * @beta\n   */\n  __unstable_autoFocus: boolean\n  /**\n   * @beta\n   */\n  __unstable_hideCloseButton: boolean\n  children: React.ReactNode\n  contentRef?: React.ForwardedRef<HTMLDivElement>\n  footer: React.ReactNode\n  header: React.ReactNode\n  id: string\n  onClickOutside?: () => void\n  onClose?: () => void\n  portal?: string\n  radius: Radius | Radius[]\n  scheme?: ThemeColorSchemeKey\n  shadow: number | number[]\n}\n\nfunction isTargetWithinScope(\n  boundaryElement: HTMLElement | null,\n  portalElement: HTMLElement | null,\n  target: Node,\n): boolean {\n  if (!boundaryElement || !portalElement) return true\n\n  return (\n    containsOrEqualsElement(boundaryElement, target) ||\n    containsOrEqualsElement(portalElement, target)\n  )\n}\n\nconst StyledDialog = styled(Layer)<\n  ResponsiveDialogPositionStyleProps & ResponsivePaddingStyleProps & AnimationDialogStyleProps\n>(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle)\n\nconst DialogContainer = styled(Container)`\n  &:not([hidden]) {\n    display: flex;\n  }\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n`\n\nconst DialogCardRoot = styled(Card)`\n  &:not([hidden]) {\n    display: flex;\n  }\n  width: 100%;\n  min-height: 0;\n  max-height: 100%;\n  overflow: hidden;\n  overflow: clip;\n`\n\nconst DialogLayout = styled(Flex)`\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n`\n\nconst DialogHeader = styled(Box)`\n  position: relative;\n  z-index: 2;\n`\n\nconst DialogContent = styled(Box)`\n  position: relative;\n  z-index: 1;\n  overflow: auto;\n  outline: none;\n`\n\nconst DialogFooter = styled(Box)`\n  position: relative;\n  z-index: 3;\n`\n\nconst DialogCard = forwardRef(function DialogCard(\n  props: DialogCardProps,\n  forwardedRef: React.ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    __unstable_autoFocus: autoFocus,\n    __unstable_hideCloseButton: hideCloseButton,\n    children,\n    contentRef: forwardedContentRef,\n    footer,\n    header,\n    id,\n    onClickOutside,\n    onClose,\n    portal: portalProp,\n    radius: radiusProp,\n    scheme,\n    shadow: shadowProp,\n    width: widthProp,\n  } = props\n  const portal = usePortal()\n  const portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element\n  const boundaryElement = useBoundaryElement().element\n  const radius = useArrayProp(radiusProp)\n  const shadow = useArrayProp(shadowProp)\n  const width = useArrayProp(widthProp)\n  const ref = useRef<HTMLDivElement | null>(null)\n  const contentRef = useRef<HTMLDivElement | null>(null)\n  const layer = useLayer()\n  const {isTopLayer} = layer\n  const labelId = `${id}_label`\n  const showCloseButton = Boolean(onClose) && hideCloseButton === false\n  const showHeader = Boolean(header) || showCloseButton\n\n  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)\n  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(\n    forwardedContentRef,\n    () => contentRef.current,\n  )\n\n  useEffect(() => {\n    if (!autoFocus) return\n\n    // On mount: focus the first focusable element\n    if (ref.current) {\n      focusFirstDescendant(ref.current)\n    }\n  }, [autoFocus, ref])\n\n  useGlobalKeyDown(\n    useCallback(\n      (event: KeyboardEvent) => {\n        if (!isTopLayer || !onClose) return\n\n        const target = document.activeElement\n\n        if (target && !isTargetWithinScope(boundaryElement, portalElement, target)) {\n          // Ignore key presses when the focused element is outside of scope\n          return\n        }\n\n        if (event.key === 'Escape') {\n          event.preventDefault()\n          event.stopPropagation()\n          onClose()\n        }\n      },\n      [boundaryElement, isTopLayer, onClose, portalElement],\n    ),\n  )\n\n  useClickOutsideEvent(\n    isTopLayer &&\n      onClickOutside &&\n      ((event) => {\n        const target = event.target as Node | null\n\n        if (target && !isTargetWithinScope(boundaryElement, portalElement, target)) {\n          // Ignore clicks outside of the scope\n          return\n        }\n\n        onClickOutside()\n      }),\n    () => [ref.current],\n  )\n\n  return (\n    <DialogContainer data-ui=\"DialogCard\" width={width}>\n      <DialogCardRoot radius={radius} ref={ref} scheme={scheme} shadow={shadow}>\n        <DialogLayout direction=\"column\">\n          {showHeader && (\n            <DialogHeader>\n              <Flex align=\"flex-start\" padding={3}>\n                <Box flex={1} padding={2}>\n                  {header && (\n                    <Text id={labelId} size={1} weight=\"semibold\">\n                      {header}\n                    </Text>\n                  )}\n                </Box>\n                {showCloseButton && (\n                  <Box flex=\"none\">\n                    <Button\n                      aria-label=\"Close dialog\"\n                      disabled={!onClose}\n                      icon={CloseIcon}\n                      mode=\"bleed\"\n                      onClick={onClose}\n                      padding={2}\n                    />\n                  </Box>\n                )}\n              </Flex>\n            </DialogHeader>\n          )}\n\n          <DialogContent flex={1} ref={contentRef} tabIndex={-1}>\n            {children}\n          </DialogContent>\n\n          {footer && <DialogFooter>{footer}</DialogFooter>}\n        </DialogLayout>\n      </DialogCardRoot>\n    </DialogContainer>\n  )\n})\n\nDialogCard.displayName = 'ForwardRef(DialogCard)'\n\n/**\n * The Dialog component.\n *\n * @public\n */\nexport const Dialog = forwardRef(function Dialog(\n  props: DialogProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'id' | 'width'>,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const dialog = useDialog()\n  const {layer} = useTheme_v2()\n  const {\n    __unstable_autoFocus: autoFocus = true,\n    __unstable_hideCloseButton: hideCloseButton = false,\n    cardRadius: cardRadiusProp = 4,\n    cardShadow = 3,\n    children,\n    contentRef,\n    footer,\n    header,\n    id,\n    onActivate,\n    onClickOutside,\n    onClose,\n    onFocus,\n    padding: paddingProp = 3,\n    portal: portalProp,\n    position: _positionProp,\n    scheme,\n    width: widthProp = 0,\n    zOffset: _zOffsetProp,\n    animate: _animate = false,\n    ...restProps\n  } = props\n  const positionProp = _positionProp ?? (dialog.position || 'fixed')\n  const zOffsetProp = _zOffsetProp ?? (dialog.zOffset || layer.dialog.zOffset)\n  const prefersReducedMotion = usePrefersReducedMotion()\n  const animate = prefersReducedMotion ? false : _animate\n  const portal = usePortal()\n  const portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element\n  const boundaryElement = useBoundaryElement().element\n  const cardRadius = useArrayProp(cardRadiusProp)\n  const padding = useArrayProp(paddingProp)\n  const position = useArrayProp(positionProp)\n  const width = useArrayProp(widthProp)\n  const zOffset = useArrayProp(zOffsetProp)\n  const preDivRef = useRef<HTMLDivElement | null>(null)\n  const postDivRef = useRef<HTMLDivElement | null>(null)\n  const cardRef = useRef<HTMLDivElement | null>(null)\n  const focusedElementRef = useRef<HTMLElement | null>(null)\n\n  const handleFocus = useCallback(\n    (event: React.FocusEvent<HTMLDivElement>) => {\n      onFocus?.(event)\n\n      const target = event.target\n      const cardElement = cardRef.current\n\n      if (cardElement && target === preDivRef.current) {\n        focusLastDescendant(cardElement)\n\n        return\n      }\n\n      if (cardElement && target === postDivRef.current) {\n        focusFirstDescendant(cardElement)\n\n        return\n      }\n\n      if (isHTMLElement(event.target)) {\n        focusedElementRef.current = event.target\n      }\n    },\n    [onFocus],\n  )\n\n  const labelId = `${id}_label`\n\n  const rootClickTimeoutRef = useRef<NodeJS.Timeout>(undefined)\n\n  // If the resulting active element (a.k.a. focused element) is not withing scope when clicking\n  // within the dialog, then we want to focus the previously interactive element in the dialog instead.\n  // This is to allow the user to tab or close the dialog by pressing escape.\n  const handleRootClick = useCallback(() => {\n    if (rootClickTimeoutRef.current) {\n      clearTimeout(rootClickTimeoutRef.current)\n    }\n\n    rootClickTimeoutRef.current = setTimeout(() => {\n      const activeElement = document.activeElement\n\n      if (activeElement && !isTargetWithinScope(boundaryElement, portalElement, activeElement)) {\n        const target = focusedElementRef.current\n\n        if (!target || !document.body.contains(target)) {\n          // No previously focused element, or it's not in the document anymore\n          const cardElement = cardRef.current\n          if (cardElement) focusFirstDescendant(cardElement)\n\n          return\n        }\n\n        target.focus()\n      }\n    }, 0)\n  }, [boundaryElement, portalElement])\n\n  return (\n    <Portal __unstable_name={portalProp}>\n      <StyledDialog\n        {...restProps}\n