@wordpress/components/build/navigable-container/tabbable.cjs.map

UI components for WordPress.

{
  "version": 3,
  "sources": ["../../src/navigable-container/tabbable.tsx"],
  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport NavigableContainer from './container';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport function UnforwardedTabbableContainer({\n  eventToOffset,\n  ...props\n}, ref) {\n  const innerEventToOffset = evt => {\n    const {\n      code,\n      shiftKey\n    } = evt;\n    if ('Tab' === code) {\n      return shiftKey ? -1 : 1;\n    }\n\n    // Allow custom handling of keys besides Tab.\n    //\n    // By default, TabbableContainer will move focus forward on Tab and\n    // backward on Shift+Tab. The handler below will be used for all other\n    // events. The semantics for `eventToOffset`'s return\n    // values are the following:\n    //\n    // - +1: move focus forward\n    // - -1: move focus backward\n    // -  0: don't move focus, but acknowledge event and thus stop it\n    // - undefined: do nothing, let the event propagate.\n    if (eventToOffset) {\n      return eventToOffset(evt);\n    }\n    return undefined;\n  };\n  return /*#__PURE__*/_jsx(NavigableContainer, {\n    ref: ref,\n    stopNavigationEvents: true,\n    onlyBrowserTabstops: true,\n    eventToOffset: innerEventToOffset,\n    ...props\n  });\n}\n\n/**\n * A container for tabbable elements.\n *\n *  ```jsx\n *  import {\n *    TabbableContainer,\n *    Button,\n *  } from '@wordpress/components';\n *\n *  function onNavigate( index, target ) {\n *    console.log( `Navigates to ${ index }`, target );\n *  }\n *\n *  const MyTabbableContainer = () => (\n *    <div>\n *      <span>Tabbable Container:</span>\n *      <TabbableContainer onNavigate={ onNavigate }>\n *        <Button variant=\"secondary\" tabIndex=\"0\">\n *          Section 1\n *        </Button>\n *        <Button variant=\"secondary\" tabIndex=\"0\">\n *          Section 2\n *        </Button>\n *        <Button variant=\"secondary\" tabIndex=\"0\">\n *          Section 3\n *        </Button>\n *        <Button variant=\"secondary\" tabIndex=\"0\">\n *          Section 4\n *        </Button>\n *      </TabbableContainer>\n *    </div>\n *  );\n *  ```\n */\nexport const TabbableContainer = forwardRef(UnforwardedTabbableContainer);\nTabbableContainer.displayName = 'TabbableContainer';\nexport default TabbableContainer;"],
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,qBAA2B;AAK3B,uBAA+B;AAC/B,yBAA4B;AACrB,SAAS,6BAA6B;AAAA,EAC3C;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,QAAM,qBAAqB,SAAO;AAChC,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,IACF,IAAI;AACJ,QAAI,UAAU,MAAM;AAClB,aAAO,WAAW,KAAK;AAAA,IACzB;AAaA,QAAI,eAAe;AACjB,aAAO,cAAc,GAAG;AAAA,IAC1B;AACA,WAAO;AAAA,EACT;AACA,SAAoB,uCAAAA,KAAK,iBAAAC,SAAoB;AAAA,IAC3C;AAAA,IACA,sBAAsB;AAAA,IACtB,qBAAqB;AAAA,IACrB,eAAe;AAAA,IACf,GAAG;AAAA,EACL,CAAC;AACH;AAoCO,IAAM,wBAAoB,2BAAW,4BAA4B;AACxE,kBAAkB,cAAc;AAChC,IAAO,mBAAQ;",
  "names": ["_jsx", "NavigableContainer"]
}