react-aria/dist/private/focus/useFocusRing.mjs.map

Spectrum UI components in React

{"mappings":";;;;;;;;;AAuCO,SAAS,0CAAa,QAA4B,CAAC,CAAC;IACzD,IAAI,aAAC,YAAY,oBAAO,WAAW,UAAE,MAAM,EAAC,GAAG;IAC/C,IAAI,QAAQ,CAAA,GAAA,aAAK,EAAE;QACjB,WAAW;QACX,gBAAgB,aAAa,CAAA,GAAA,yCAAa;IAC5C;IACA,IAAI,CAAC,WAAW,WAAW,GAAG,CAAA,GAAA,eAAO,EAAE;IACvC,IAAI,CAAC,qBAAqB,gBAAgB,GAAG,CAAA,GAAA,eAAO,EAClD,IAAM,MAAM,OAAO,CAAC,SAAS,IAAI,MAAM,OAAO,CAAC,cAAc;IAG/D,IAAI,cAAc,CAAA,GAAA,kBAAU,EAC1B,IAAM,gBAAgB,MAAM,OAAO,CAAC,SAAS,IAAI,MAAM,OAAO,CAAC,cAAc,GAC7E,EAAE;IAGJ,IAAI,gBAAgB,CAAA,GAAA,kBAAU,EAC5B,CAAA;QACE,MAAM,OAAO,CAAC,SAAS,GAAG;QAC1B,MAAM,OAAO,CAAC,cAAc,GAAG,CAAA,GAAA,yCAAa;QAC5C,WAAW;QACX;IACF,GACA;QAAC;KAAY;IAGf,CAAA,GAAA,yCAAsB,EACpB,CAAA;QACE,MAAM,OAAO,CAAC,cAAc,GAAG;QAC/B;IACF,GACA;QAAC;QAAa;KAAU,EACxB;QAAC,SAAS;qBAAW;IAAW;IAGlC,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAO,EAAE;QAC1B,YAAY;uBACZ;IACF;IAEA,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,yCAAa,EAAE;QACtC,YAAY,CAAC;QACb,qBAAqB;IACvB;IAEA,OAAO;mBACL;QACA,gBAAgB;QAChB,YAAY,SAAS,mBAAmB;IAC1C;AACF","sources":["packages/react-aria/src/focus/useFocusRing.ts"],"sourcesContent":["import {DOMAttributes} from '@react-types/shared';\nimport {isFocusVisible, useFocusVisibleListener} from '../interactions/useFocusVisible';\nimport {useCallback, useRef, useState} from 'react';\nimport {useFocus} from '../interactions/useFocus';\nimport {useFocusWithin} from '../interactions/useFocusWithin';\n\nexport interface AriaFocusRingProps {\n  /**\n   * Whether to show the focus ring when something\n   * inside the container element has focus (true), or\n   * only if the container itself has focus (false).\n   *\n   * @default 'false'\n   */\n  within?: boolean;\n\n  /** Whether the element is a text input. */\n  isTextInput?: boolean;\n\n  /** Whether the element will be auto focused. */\n  autoFocus?: boolean;\n}\n\nexport interface FocusRingAria {\n  /** Whether the element is currently focused. */\n  isFocused: boolean;\n\n  /** Whether keyboard focus should be visible. */\n  isFocusVisible: boolean;\n\n  /** Props to apply to the container element with the focus ring. */\n  focusProps: DOMAttributes;\n}\n\n/**\n * Determines whether a focus ring should be shown to indicate keyboard focus.\n * Focus rings are visible only when the user is interacting with a keyboard,\n * not with a mouse, touch, or other input methods.\n */\nexport function useFocusRing(props: AriaFocusRingProps = {}): FocusRingAria {\n  let {autoFocus = false, isTextInput, within} = props;\n  let state = useRef({\n    isFocused: false,\n    isFocusVisible: autoFocus || isFocusVisible()\n  });\n  let [isFocused, setFocused] = useState(false);\n  let [isFocusVisibleState, setFocusVisible] = useState(\n    () => state.current.isFocused && state.current.isFocusVisible\n  );\n\n  let updateState = useCallback(\n    () => setFocusVisible(state.current.isFocused && state.current.isFocusVisible),\n    []\n  );\n\n  let onFocusChange = useCallback(\n    isFocused => {\n      state.current.isFocused = isFocused;\n      state.current.isFocusVisible = isFocusVisible();\n      setFocused(isFocused);\n      updateState();\n    },\n    [updateState]\n  );\n\n  useFocusVisibleListener(\n    isFocusVisible => {\n      state.current.isFocusVisible = isFocusVisible;\n      updateState();\n    },\n    [isTextInput, isFocused],\n    {enabled: isFocused, isTextInput}\n  );\n\n  let {focusProps} = useFocus({\n    isDisabled: within,\n    onFocusChange\n  });\n\n  let {focusWithinProps} = useFocusWithin({\n    isDisabled: !within,\n    onFocusWithinChange: onFocusChange\n  });\n\n  return {\n    isFocused,\n    isFocusVisible: isFocusVisibleState,\n    focusProps: within ? focusWithinProps : focusProps\n  };\n}\n"],"names":[],"version":3,"file":"useFocusRing.mjs.map"}