@wordpress/components 23.9.0 → 24.0.0

package/build-module/navigable-container/container.js

@@ -1,12 +1,18 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
-// @ts-nocheck
+
+/**
+ * External dependencies
+ */
 
 /**
  * WordPress dependencies
  */
 import { Component, forwardRef } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
+/**
+ * Internal dependencies
+ */
 
 const noop = () => {};
 
@@ -25,8 +31,8 @@ function cycleValue(value, total, offset) {
 }
 
 class NavigableContainer extends Component {
-  constructor() {
-    super(...arguments);
+  constructor(args) {
+    super(args);
     this.onKeyDown = this.onKeyDown.bind(this);
     this.bindContainer = this.bindContainer.bind(this);
     this.getFocusableContext = this.getFocusableContext.bind(this);
@@ -34,18 +40,24 @@ class NavigableContainer extends Component {
   }
 
   componentDidMount() {
-    // We use DOM event listeners instead of React event listeners
+    if (!this.container) {
+      return;
+    } // We use DOM event listeners instead of React event listeners
     // because we want to catch events from the underlying DOM tree
     // The React Tree can be different from the DOM tree when using
     // portals. Block Toolbars for instance are rendered in a separate
     // React Trees.
+
+
     this.container.addEventListener('keydown', this.onKeyDown);
-    this.container.addEventListener('focus', this.onFocus);
   }
 
   componentWillUnmount() {
+    if (!this.container) {
+      return;
+    }
+
     this.container.removeEventListener('keydown', this.onKeyDown);
-    this.container.removeEventListener('focus', this.onFocus);
   }
 
   bindContainer(ref) {
@@ -62,6 +74,10 @@ class NavigableContainer extends Component {
   }
 
   getFocusableContext(target) {
+    if (!this.container) {
+      return null;
+    }
+
     const {
       onlyBrowserTabstops
     } = this.props;
@@ -81,14 +97,12 @@ class NavigableContainer extends Component {
   }
 
   getFocusableIndex(focusables, target) {
-    const directIndex = focusables.indexOf(target);
-
-    if (directIndex !== -1) {
-      return directIndex;
-    }
+    return focusables.indexOf(target);
   }
 
   onKeyDown(event) {
+    var _event$target2, _event$target2$ownerD;
+
     if (this.props.onKeyDown) {
       this.props.onKeyDown(event);
     }
@@ -105,19 +119,18 @@ class NavigableContainer extends Component {
     const offset = eventToOffset(event); // eventToOffset returns undefined if the event is not handled by the component.
 
     if (offset !== undefined && stopNavigationEvents) {
+      var _event$target;
+
       // Prevents arrow key handlers bound to the document directly interfering.
       event.stopImmediatePropagation(); // When navigating a collection of items, prevent scroll containers
       // from scrolling. The preventDefault also prevents Voiceover from
       // 'handling' the event, as voiceover will try to use arrow keys
       // for highlighting text.
 
-      const targetRole = event.target.getAttribute('role');
-      const targetHasMenuItemRole = MENU_ITEM_ROLES.includes(targetRole); // `preventDefault()` on tab to avoid having the browser move the focus
-      // after this component has already moved it.
+      const targetRole = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.getAttribute('role');
+      const targetHasMenuItemRole = !!targetRole && MENU_ITEM_ROLES.includes(targetRole);
 
-      const isTab = event.code === 'Tab';
-
-      if (targetHasMenuItemRole || isTab) {
+      if (targetHasMenuItemRole) {
         event.preventDefault();
       }
     }
@@ -126,7 +139,13 @@ class NavigableContainer extends Component {
       return;
     }
 
-    const context = getFocusableContext(event.target.ownerDocument.activeElement);
+    const activeElement = (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : (_event$target2$ownerD = _event$target2.ownerDocument) === null || _event$target2$ownerD === void 0 ? void 0 : _event$target2$ownerD.activeElement;
+
+    if (!activeElement) {
+      return;
+    }
+
+    const context = getFocusableContext(activeElement);
 
     if (!context) {
       return;
@@ -140,7 +159,12 @@ class NavigableContainer extends Component {
 
     if (nextIndex >= 0 && nextIndex < focusables.length) {
       focusables[nextIndex].focus();
-      onNavigate(nextIndex, focusables[nextIndex]);
+      onNavigate(nextIndex, focusables[nextIndex]); // `preventDefault()` on tab to avoid having the browser move the focus
+      // after this component has already moved it.
+
+      if (event.code === 'Tab') {
+        event.preventDefault();
+      }
     }
   }
 

package/build-module/navigable-container/container.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigable-container/container.js"],"names":["Component","forwardRef","focus","noop","MENU_ITEM_ROLES","cycleValue","value","total","offset","nextValue","NavigableContainer","constructor","arguments","onKeyDown","bind","bindContainer","getFocusableContext","getFocusableIndex","componentDidMount","container","addEventListener","onFocus","componentWillUnmount","removeEventListener","ref","forwardedRef","props","current","target","onlyBrowserTabstops","finder","tabbable","focusable","focusables","find","index","directIndex","indexOf","event","cycle","eventToOffset","onNavigate","stopNavigationEvents","undefined","stopImmediatePropagation","targetRole","getAttribute","targetHasMenuItemRole","includes","isTab","code","preventDefault","context","ownerDocument","activeElement","nextIndex","length","render","children","restProps","forwardedNavigableContainer","displayName"],"mappings":";;AAAA;;AACA;AACA;AACA;AACA,SAASA,SAAT,EAAoBC,UAApB,QAAsC,oBAAtC;AACA,SAASC,KAAT,QAAsB,gBAAtB;;AAEA,MAAMC,IAAI,GAAG,MAAM,CAAE,CAArB;;AACA,MAAMC,eAAe,GAAG,CAAE,UAAF,EAAc,eAAd,EAA+B,kBAA/B,CAAxB;;AAEA,SAASC,UAAT,CAAqBC,KAArB,EAA4BC,KAA5B,EAAmCC,MAAnC,EAA4C;AAC3C,QAAMC,SAAS,GAAGH,KAAK,GAAGE,MAA1B;;AACA,MAAKC,SAAS,GAAG,CAAjB,EAAqB;AACpB,WAAOF,KAAK,GAAGE,SAAf;AACA,GAFD,MAEO,IAAKA,SAAS,IAAIF,KAAlB,EAA0B;AAChC,WAAOE,SAAS,GAAGF,KAAnB;AACA;;AAED,SAAOE,SAAP;AACA;;AAED,MAAMC,kBAAN,SAAiCV,SAAjC,CAA2C;AAC1CW,EAAAA,WAAW,GAAG;AACb,UAAO,GAAGC,SAAV;AACA,SAAKC,SAAL,GAAiB,KAAKA,SAAL,CAAeC,IAAf,CAAqB,IAArB,CAAjB;AACA,SAAKC,aAAL,GAAqB,KAAKA,aAAL,CAAmBD,IAAnB,CAAyB,IAAzB,CAArB;AAEA,SAAKE,mBAAL,GAA2B,KAAKA,mBAAL,CAAyBF,IAAzB,CAA+B,IAA/B,CAA3B;AACA,SAAKG,iBAAL,GAAyB,KAAKA,iBAAL,CAAuBH,IAAvB,CAA6B,IAA7B,CAAzB;AACA;;AAEDI,EAAAA,iBAAiB,GAAG;AACnB;AACA;AACA;AACA;AACA;AACA,SAAKC,SAAL,CAAeC,gBAAf,CAAiC,SAAjC,EAA4C,KAAKP,SAAjD;AACA,SAAKM,SAAL,CAAeC,gBAAf,CAAiC,OAAjC,EAA0C,KAAKC,OAA/C;AACA;;AAEDC,EAAAA,oBAAoB,GAAG;AACtB,SAAKH,SAAL,CAAeI,mBAAf,CAAoC,SAApC,EAA+C,KAAKV,SAApD;AACA,SAAKM,SAAL,CAAeI,mBAAf,CAAoC,OAApC,EAA6C,KAAKF,OAAlD;AACA;;AAEDN,EAAAA,aAAa,CAAES,GAAF,EAAQ;AACpB,UAAM;AAAEC,MAAAA;AAAF,QAAmB,KAAKC,KAA9B;AACA,SAAKP,SAAL,GAAiBK,GAAjB;;AAEA,QAAK,OAAOC,YAAP,KAAwB,UAA7B,EAA0C;AACzCA,MAAAA,YAAY,CAAED,GAAF,CAAZ;AACA,KAFD,MAEO,IAAKC,YAAY,IAAI,aAAaA,YAAlC,EAAiD;AACvDA,MAAAA,YAAY,CAACE,OAAb,GAAuBH,GAAvB;AACA;AACD;;AAEDR,EAAAA,mBAAmB,CAAEY,MAAF,EAAW;AAC7B,UAAM;AAAEC,MAAAA;AAAF,QAA0B,KAAKH,KAArC;AACA,UAAMI,MAAM,GAAGD,mBAAmB,GAAG3B,KAAK,CAAC6B,QAAT,GAAoB7B,KAAK,CAAC8B,SAA5D;AACA,UAAMC,UAAU,GAAGH,MAAM,CAACI,IAAP,CAAa,KAAKf,SAAlB,CAAnB;AAEA,UAAMgB,KAAK,GAAG,KAAKlB,iBAAL,CAAwBgB,UAAxB,EAAoCL,MAApC,CAAd;;AACA,QAAKO,KAAK,GAAG,CAAC,CAAT,IAAcP,MAAnB,EAA4B;AAC3B,aAAO;AAAEO,QAAAA,KAAF;AAASP,QAAAA,MAAT;AAAiBK,QAAAA;AAAjB,OAAP;AACA;;AACD,WAAO,IAAP;AACA;;AAEDhB,EAAAA,iBAAiB,CAAEgB,UAAF,EAAcL,MAAd,EAAuB;AACvC,UAAMQ,WAAW,GAAGH,UAAU,CAACI,OAAX,CAAoBT,MAApB,CAApB;;AACA,QAAKQ,WAAW,KAAK,CAAC,CAAtB,EAA0B;AACzB,aAAOA,WAAP;AACA;AACD;;AAEDvB,EAAAA,SAAS,CAAEyB,KAAF,EAAU;AAClB,QAAK,KAAKZ,KAAL,CAAWb,SAAhB,EAA4B;AAC3B,WAAKa,KAAL,CAAWb,SAAX,CAAsByB,KAAtB;AACA;;AAED,UAAM;AAAEtB,MAAAA;AAAF,QAA0B,IAAhC;AACA,UAAM;AACLuB,MAAAA,KAAK,GAAG,IADH;AAELC,MAAAA,aAFK;AAGLC,MAAAA,UAAU,GAAGtC,IAHR;AAILuC,MAAAA;AAJK,QAKF,KAAKhB,KALT;AAOA,UAAMlB,MAAM,GAAGgC,aAAa,CAAEF,KAAF,CAA5B,CAbkB,CAelB;;AACA,QAAK9B,MAAM,KAAKmC,SAAX,IAAwBD,oBAA7B,EAAoD;AACnD;AACAJ,MAAAA,KAAK,CAACM,wBAAN,GAFmD,CAInD;AACA;AACA;AACA;;AACA,YAAMC,UAAU,GAAGP,KAAK,CAACV,MAAN,CAAakB,YAAb,CAA2B,MAA3B,CAAnB;AACA,YAAMC,qBAAqB,GAC1B3C,eAAe,CAAC4C,QAAhB,CAA0BH,UAA1B,CADD,CATmD,CAYnD;AACA;;AACA,YAAMI,KAAK,GAAGX,KAAK,CAACY,IAAN,KAAe,KAA7B;;AAEA,UAAKH,qBAAqB,IAAIE,KAA9B,EAAsC;AACrCX,QAAAA,KAAK,CAACa,cAAN;AACA;AACD;;AAED,QAAK,CAAE3C,MAAP,EAAgB;AACf;AACA;;AAED,UAAM4C,OAAO,GAAGpC,mBAAmB,CAClCsB,KAAK,CAACV,MAAN,CAAayB,aAAb,CAA2BC,aADO,CAAnC;;AAGA,QAAK,CAAEF,OAAP,EAAiB;AAChB;AACA;;AAED,UAAM;AAAEjB,MAAAA,KAAF;AAASF,MAAAA;AAAT,QAAwBmB,OAA9B;AACA,UAAMG,SAAS,GAAGhB,KAAK,GACpBlC,UAAU,CAAE8B,KAAF,EAASF,UAAU,CAACuB,MAApB,EAA4BhD,MAA5B,CADU,GAEpB2B,KAAK,GAAG3B,MAFX;;AAGA,QAAK+C,SAAS,IAAI,CAAb,IAAkBA,SAAS,GAAGtB,UAAU,CAACuB,MAA9C,EAAuD;AACtDvB,MAAAA,UAAU,CAAEsB,SAAF,CAAV,CAAwBrD,KAAxB;AACAuC,MAAAA,UAAU,CAAEc,SAAF,EAAatB,UAAU,CAAEsB,SAAF,CAAvB,CAAV;AACA;AACD;;AAEDE,EAAAA,MAAM,GAAG;AACR,UAAM;AACLC,MAAAA,QADK;AAELhB,MAAAA,oBAFK;AAGLF,MAAAA,aAHK;AAILC,MAAAA,UAJK;AAKL5B,MAAAA,SALK;AAML0B,MAAAA,KANK;AAOLV,MAAAA,mBAPK;AAQLJ,MAAAA,YARK;AASL,SAAGkC;AATE,QAUF,KAAKjC,KAVT;AAWA,WACC;AAAK,MAAA,GAAG,EAAG,KAAKX;AAAhB,OAAqC4C,SAArC,GACGD,QADH,CADD;AAKA;;AAlIyC;;AAqI3C,MAAME,2BAA2B,GAAG,CAAElC,KAAF,EAASF,GAAT,KAAkB;AACrD,SAAO,cAAC,kBAAD,eAAyBE,KAAzB;AAAiC,IAAA,YAAY,EAAGF;AAAhD,KAAP;AACA,CAFD;;AAGAoC,2BAA2B,CAACC,WAA5B,GAA0C,oBAA1C;AAEA,eAAe5D,UAAU,CAAE2D,2BAAF,CAAzB","sourcesContent":["// @ts-nocheck\n/**\n * WordPress dependencies\n */\nimport { Component, forwardRef } from '@wordpress/element';\nimport { focus } from '@wordpress/dom';\n\nconst noop = () => {};\nconst MENU_ITEM_ROLES = [ 'menuitem', 'menuitemradio', 'menuitemcheckbox' ];\n\nfunction cycleValue( value, total, offset ) {\n\tconst nextValue = value + offset;\n\tif ( nextValue < 0 ) {\n\t\treturn total + nextValue;\n\t} else if ( nextValue >= total ) {\n\t\treturn nextValue - total;\n\t}\n\n\treturn nextValue;\n}\n\nclass NavigableContainer extends Component {\n\tconstructor() {\n\t\tsuper( ...arguments );\n\t\tthis.onKeyDown = this.onKeyDown.bind( this );\n\t\tthis.bindContainer = this.bindContainer.bind( this );\n\n\t\tthis.getFocusableContext = this.getFocusableContext.bind( this );\n\t\tthis.getFocusableIndex = this.getFocusableIndex.bind( this );\n\t}\n\n\tcomponentDidMount() {\n\t\t// We use DOM event listeners instead of React event listeners\n\t\t// because we want to catch events from the underlying DOM tree\n\t\t// The React Tree can be different from the DOM tree when using\n\t\t// portals. Block Toolbars for instance are rendered in a separate\n\t\t// React Trees.\n\t\tthis.container.addEventListener( 'keydown', this.onKeyDown );\n\t\tthis.container.addEventListener( 'focus', this.onFocus );\n\t}\n\n\tcomponentWillUnmount() {\n\t\tthis.container.removeEventListener( 'keydown', this.onKeyDown );\n\t\tthis.container.removeEventListener( 'focus', this.onFocus );\n\t}\n\n\tbindContainer( ref ) {\n\t\tconst { forwardedRef } = this.props;\n\t\tthis.container = ref;\n\n\t\tif ( typeof forwardedRef === 'function' ) {\n\t\t\tforwardedRef( ref );\n\t\t} else if ( forwardedRef && 'current' in forwardedRef ) {\n\t\t\tforwardedRef.current = ref;\n\t\t}\n\t}\n\n\tgetFocusableContext( target ) {\n\t\tconst { onlyBrowserTabstops } = this.props;\n\t\tconst finder = onlyBrowserTabstops ? focus.tabbable : focus.focusable;\n\t\tconst focusables = finder.find( this.container );\n\n\t\tconst index = this.getFocusableIndex( focusables, target );\n\t\tif ( index > -1 && target ) {\n\t\t\treturn { index, target, focusables };\n\t\t}\n\t\treturn null;\n\t}\n\n\tgetFocusableIndex( focusables, target ) {\n\t\tconst directIndex = focusables.indexOf( target );\n\t\tif ( directIndex !== -1 ) {\n\t\t\treturn directIndex;\n\t\t}\n\t}\n\n\tonKeyDown( event ) {\n\t\tif ( this.props.onKeyDown ) {\n\t\t\tthis.props.onKeyDown( event );\n\t\t}\n\n\t\tconst { getFocusableContext } = this;\n\t\tconst {\n\t\t\tcycle = true,\n\t\t\teventToOffset,\n\t\t\tonNavigate = noop,\n\t\t\tstopNavigationEvents,\n\t\t} = this.props;\n\n\t\tconst offset = eventToOffset( event );\n\n\t\t// eventToOffset returns undefined if the event is not handled by the component.\n\t\tif ( offset !== undefined && stopNavigationEvents ) {\n\t\t\t// Prevents arrow key handlers bound to the document directly interfering.\n\t\t\tevent.stopImmediatePropagation();\n\n\t\t\t// When navigating a collection of items, prevent scroll containers\n\t\t\t// from scrolling. The preventDefault also prevents Voiceover from\n\t\t\t// 'handling' the event, as voiceover will try to use arrow keys\n\t\t\t// for highlighting text.\n\t\t\tconst targetRole = event.target.getAttribute( 'role' );\n\t\t\tconst targetHasMenuItemRole =\n\t\t\t\tMENU_ITEM_ROLES.includes( targetRole );\n\n\t\t\t// `preventDefault()` on tab to avoid having the browser move the focus\n\t\t\t// after this component has already moved it.\n\t\t\tconst isTab = event.code === 'Tab';\n\n\t\t\tif ( targetHasMenuItemRole || isTab ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t}\n\n\t\tif ( ! offset ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst context = getFocusableContext(\n\t\t\tevent.target.ownerDocument.activeElement\n\t\t);\n\t\tif ( ! context ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { index, focusables } = context;\n\t\tconst nextIndex = cycle\n\t\t\t? cycleValue( index, focusables.length, offset )\n\t\t\t: index + offset;\n\t\tif ( nextIndex >= 0 && nextIndex < focusables.length ) {\n\t\t\tfocusables[ nextIndex ].focus();\n\t\t\tonNavigate( nextIndex, focusables[ nextIndex ] );\n\t\t}\n\t}\n\n\trender() {\n\t\tconst {\n\t\t\tchildren,\n\t\t\tstopNavigationEvents,\n\t\t\teventToOffset,\n\t\t\tonNavigate,\n\t\t\tonKeyDown,\n\t\t\tcycle,\n\t\t\tonlyBrowserTabstops,\n\t\t\tforwardedRef,\n\t\t\t...restProps\n\t\t} = this.props;\n\t\treturn (\n\t\t\t<div ref={ this.bindContainer } { ...restProps }>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t);\n\t}\n}\n\nconst forwardedNavigableContainer = ( props, ref ) => {\n\treturn <NavigableContainer { ...props } forwardedRef={ ref } />;\n};\nforwardedNavigableContainer.displayName = 'NavigableContainer';\n\nexport default forwardRef( forwardedNavigableContainer );\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigable-container/container.tsx"],"names":["Component","forwardRef","focus","noop","MENU_ITEM_ROLES","cycleValue","value","total","offset","nextValue","NavigableContainer","constructor","args","onKeyDown","bind","bindContainer","getFocusableContext","getFocusableIndex","componentDidMount","container","addEventListener","componentWillUnmount","removeEventListener","ref","forwardedRef","props","current","target","onlyBrowserTabstops","finder","tabbable","focusable","focusables","find","index","indexOf","event","cycle","eventToOffset","onNavigate","stopNavigationEvents","undefined","stopImmediatePropagation","targetRole","getAttribute","targetHasMenuItemRole","includes","preventDefault","activeElement","ownerDocument","context","nextIndex","length","code","render","children","restProps","forwardedNavigableContainer","displayName"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { Component, forwardRef } from '@wordpress/element';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport type { NavigableContainerProps } from './types';\n\nconst noop = () => {};\nconst MENU_ITEM_ROLES = [ 'menuitem', 'menuitemradio', 'menuitemcheckbox' ];\n\nfunction cycleValue( value: number, total: number, offset: number ) {\n\tconst nextValue = value + offset;\n\tif ( nextValue < 0 ) {\n\t\treturn total + nextValue;\n\t} else if ( nextValue >= total ) {\n\t\treturn nextValue - total;\n\t}\n\n\treturn nextValue;\n}\n\nclass NavigableContainer extends Component< NavigableContainerProps > {\n\tcontainer?: HTMLDivElement;\n\n\tconstructor( args: NavigableContainerProps ) {\n\t\tsuper( args );\n\t\tthis.onKeyDown = this.onKeyDown.bind( this );\n\t\tthis.bindContainer = this.bindContainer.bind( this );\n\n\t\tthis.getFocusableContext = this.getFocusableContext.bind( this );\n\t\tthis.getFocusableIndex = this.getFocusableIndex.bind( this );\n\t}\n\n\tcomponentDidMount() {\n\t\tif ( ! this.container ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// We use DOM event listeners instead of React event listeners\n\t\t// because we want to catch events from the underlying DOM tree\n\t\t// The React Tree can be different from the DOM tree when using\n\t\t// portals. Block Toolbars for instance are rendered in a separate\n\t\t// React Trees.\n\t\tthis.container.addEventListener( 'keydown', this.onKeyDown );\n\t}\n\n\tcomponentWillUnmount() {\n\t\tif ( ! this.container ) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.container.removeEventListener( 'keydown', this.onKeyDown );\n\t}\n\n\tbindContainer( ref: HTMLDivElement ) {\n\t\tconst { forwardedRef } = this.props;\n\t\tthis.container = ref;\n\n\t\tif ( typeof forwardedRef === 'function' ) {\n\t\t\tforwardedRef( ref );\n\t\t} else if ( forwardedRef && 'current' in forwardedRef ) {\n\t\t\tforwardedRef.current = ref;\n\t\t}\n\t}\n\n\tgetFocusableContext( target: Element ) {\n\t\tif ( ! this.container ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst { onlyBrowserTabstops } = this.props;\n\t\tconst finder = onlyBrowserTabstops ? focus.tabbable : focus.focusable;\n\t\tconst focusables = finder.find( this.container ) as HTMLElement[];\n\n\t\tconst index = this.getFocusableIndex( focusables, target );\n\t\tif ( index > -1 && target ) {\n\t\t\treturn { index, target, focusables };\n\t\t}\n\t\treturn null;\n\t}\n\n\tgetFocusableIndex( focusables: Element[], target: Element ) {\n\t\treturn focusables.indexOf( target );\n\t}\n\n\tonKeyDown( event: KeyboardEvent ) {\n\t\tif ( this.props.onKeyDown ) {\n\t\t\tthis.props.onKeyDown( event );\n\t\t}\n\n\t\tconst { getFocusableContext } = this;\n\t\tconst {\n\t\t\tcycle = true,\n\t\t\teventToOffset,\n\t\t\tonNavigate = noop,\n\t\t\tstopNavigationEvents,\n\t\t} = this.props;\n\n\t\tconst offset = eventToOffset( event );\n\n\t\t// eventToOffset returns undefined if the event is not handled by the component.\n\t\tif ( offset !== undefined && stopNavigationEvents ) {\n\t\t\t// Prevents arrow key handlers bound to the document directly interfering.\n\t\t\tevent.stopImmediatePropagation();\n\n\t\t\t// When navigating a collection of items, prevent scroll containers\n\t\t\t// from scrolling. The preventDefault also prevents Voiceover from\n\t\t\t// 'handling' the event, as voiceover will try to use arrow keys\n\t\t\t// for highlighting text.\n\t\t\tconst targetRole = (\n\t\t\t\tevent.target as HTMLDivElement | null\n\t\t\t )?.getAttribute( 'role' );\n\t\t\tconst targetHasMenuItemRole =\n\t\t\t\t!! targetRole && MENU_ITEM_ROLES.includes( targetRole );\n\n\t\t\tif ( targetHasMenuItemRole ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t}\n\n\t\tif ( ! offset ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst activeElement = ( event.target as HTMLElement | null )\n\t\t\t?.ownerDocument?.activeElement;\n\t\tif ( ! activeElement ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst context = getFocusableContext( activeElement );\n\t\tif ( ! context ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { index, focusables } = context;\n\t\tconst nextIndex = cycle\n\t\t\t? cycleValue( index, focusables.length, offset )\n\t\t\t: index + offset;\n\n\t\tif ( nextIndex >= 0 && nextIndex < focusables.length ) {\n\t\t\tfocusables[ nextIndex ].focus();\n\t\t\tonNavigate( nextIndex, focusables[ nextIndex ] );\n\n\t\t\t// `preventDefault()` on tab to avoid having the browser move the focus\n\t\t\t// after this component has already moved it.\n\t\t\tif ( event.code === 'Tab' ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t}\n\t}\n\n\trender() {\n\t\tconst {\n\t\t\tchildren,\n\t\t\tstopNavigationEvents,\n\t\t\teventToOffset,\n\t\t\tonNavigate,\n\t\t\tonKeyDown,\n\t\t\tcycle,\n\t\t\tonlyBrowserTabstops,\n\t\t\tforwardedRef,\n\t\t\t...restProps\n\t\t} = this.props;\n\t\treturn (\n\t\t\t<div ref={ this.bindContainer } { ...restProps }>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t);\n\t}\n}\n\nconst forwardedNavigableContainer = (\n\tprops: NavigableContainerProps,\n\tref: ForwardedRef< HTMLDivElement >\n) => {\n\treturn <NavigableContainer { ...props } forwardedRef={ ref } />;\n};\nforwardedNavigableContainer.displayName = 'NavigableContainer';\n\nexport default forwardRef( forwardedNavigableContainer );\n"]}

package/build-module/navigable-container/index.js

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 /**
  * Internal Dependencies
  */

package/build-module/navigable-container/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigable-container/index.js"],"names":["default","NavigableMenu","TabbableContainer"],"mappings":"AAAA;;AACA;AACA;AACA;AACA,SAASA,OAAO,IAAIC,aAApB,QAAyC,QAAzC;AACA,SAASD,OAAO,IAAIE,iBAApB,QAA6C,YAA7C","sourcesContent":["// @ts-nocheck\n/**\n * Internal Dependencies\n */\nexport { default as NavigableMenu } from './menu';\nexport { default as TabbableContainer } from './tabbable';\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigable-container/index.tsx"],"names":["default","NavigableMenu","TabbableContainer"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAO,IAAIC,aAApB,QAAyC,QAAzC;AACA,SAASD,OAAO,IAAIE,iBAApB,QAA6C,YAA7C","sourcesContent":["/**\n * Internal Dependencies\n */\nexport { default as NavigableMenu } from './menu';\nexport { default as TabbableContainer } from './tabbable';\n"]}

package/build-module/navigable-container/menu.js

@@ -1,6 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
-// @ts-nocheck
+
+/**
+ * External dependencies
+ */
 
 /**
  * WordPress dependencies
@@ -11,7 +14,7 @@ import { forwardRef } from '@wordpress/element';
  */
 
 import NavigableContainer from './container';
-export function NavigableMenu(_ref, ref) {
+export function UnforwardedNavigableMenu(_ref, ref) {
   let {
     role = 'menu',
     orientation = 'vertical',
@@ -45,6 +48,8 @@ export function NavigableMenu(_ref, ref) {
       // in an offset.
       return 0;
     }
+
+    return undefined;
   };
 
   return createElement(NavigableContainer, _extends({
@@ -52,9 +57,36 @@ export function NavigableMenu(_ref, ref) {
     stopNavigationEvents: true,
     onlyBrowserTabstops: false,
     role: role,
-    "aria-orientation": role === 'presentation' ? null : orientation,
+    "aria-orientation": role !== 'presentation' && (orientation === 'vertical' || orientation === 'horizontal') ? orientation : undefined,
     eventToOffset: eventToOffset
   }, rest));
 }
-export default forwardRef(NavigableMenu);
+/**
+ * A container for a navigable menu.
+ *
+ *  ```jsx
+ *  import {
+ *    NavigableMenu,
+ *    Button,
+ *  } from '@wordpress/components';
+ *
+ *  function onNavigate( index, target ) {
+ *    console.log( `Navigates to ${ index }`, target );
+ *  }
+ *
+ *  const MyNavigableContainer = () => (
+ *    <div>
+ *      <span>Navigable Menu:</span>
+ *      <NavigableMenu onNavigate={ onNavigate } orientation="horizontal">
+ *        <Button variant="secondary">Item 1</Button>
+ *        <Button variant="secondary">Item 2</Button>
+ *        <Button variant="secondary">Item 3</Button>
+ *      </NavigableMenu>
+ *    </div>
+ *  );
+ *  ```
+ */
+
+export const NavigableMenu = forwardRef(UnforwardedNavigableMenu);
+export default NavigableMenu;
 //# sourceMappingURL=menu.js.map

package/build-module/navigable-container/menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigable-container/menu.js"],"names":["forwardRef","NavigableContainer","NavigableMenu","ref","role","orientation","rest","eventToOffset","evt","code","next","previous","includes"],"mappings":";;AAAA;;AAEA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AACA,OAAOC,kBAAP,MAA+B,aAA/B;AAEA,OAAO,SAASC,aAAT,OAENC,GAFM,EAGL;AAAA,MAFD;AAAEC,IAAAA,IAAI,GAAG,MAAT;AAAiBC,IAAAA,WAAW,GAAG,UAA/B;AAA2C,OAAGC;AAA9C,GAEC;;AACD,QAAMC,aAAa,GAAKC,GAAF,IAAW;AAChC,UAAM;AAAEC,MAAAA;AAAF,QAAWD,GAAjB;AAEA,QAAIE,IAAI,GAAG,CAAE,WAAF,CAAX;AACA,QAAIC,QAAQ,GAAG,CAAE,SAAF,CAAf;;AAEA,QAAKN,WAAW,KAAK,YAArB,EAAoC;AACnCK,MAAAA,IAAI,GAAG,CAAE,YAAF,CAAP;AACAC,MAAAA,QAAQ,GAAG,CAAE,WAAF,CAAX;AACA;;AAED,QAAKN,WAAW,KAAK,MAArB,EAA8B;AAC7BK,MAAAA,IAAI,GAAG,CAAE,YAAF,EAAgB,WAAhB,CAAP;AACAC,MAAAA,QAAQ,GAAG,CAAE,WAAF,EAAe,SAAf,CAAX;AACA;;AAED,QAAKD,IAAI,CAACE,QAAL,CAAeH,IAAf,CAAL,EAA6B;AAC5B,aAAO,CAAP;AACA,KAFD,MAEO,IAAKE,QAAQ,CAACC,QAAT,CAAmBH,IAAnB,CAAL,EAAiC;AACvC,aAAO,CAAC,CAAR;AACA,KAFM,MAEA,IACN,CAAE,WAAF,EAAe,SAAf,EAA0B,WAA1B,EAAuC,YAAvC,EAAsDG,QAAtD,CACCH,IADD,CADM,EAIL;AACD;AACA;AACA;AACA,aAAO,CAAP;AACA;AACD,GA9BD;;AAgCA,SACC,cAAC,kBAAD;AACC,IAAA,GAAG,EAAGN,GADP;AAEC,IAAA,oBAAoB,MAFrB;AAGC,IAAA,mBAAmB,EAAG,KAHvB;AAIC,IAAA,IAAI,EAAGC,IAJR;AAKC,wBAAmBA,IAAI,KAAK,cAAT,GAA0B,IAA1B,GAAiCC,WALrD;AAMC,IAAA,aAAa,EAAGE;AANjB,KAOMD,IAPN,EADD;AAWA;AAED,eAAeN,UAAU,CAAEE,aAAF,CAAzB","sourcesContent":["// @ts-nocheck\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport NavigableContainer from './container';\n\nexport function NavigableMenu(\n\t{ role = 'menu', orientation = 'vertical', ...rest },\n\tref\n) {\n\tconst eventToOffset = ( evt ) => {\n\t\tconst { code } = evt;\n\n\t\tlet next = [ 'ArrowDown' ];\n\t\tlet previous = [ 'ArrowUp' ];\n\n\t\tif ( orientation === 'horizontal' ) {\n\t\t\tnext = [ 'ArrowRight' ];\n\t\t\tprevious = [ 'ArrowLeft' ];\n\t\t}\n\n\t\tif ( orientation === 'both' ) {\n\t\t\tnext = [ 'ArrowRight', 'ArrowDown' ];\n\t\t\tprevious = [ 'ArrowLeft', 'ArrowUp' ];\n\t\t}\n\n\t\tif ( next.includes( code ) ) {\n\t\t\treturn 1;\n\t\t} else if ( previous.includes( code ) ) {\n\t\t\treturn -1;\n\t\t} else if (\n\t\t\t[ 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight' ].includes(\n\t\t\t\tcode\n\t\t\t)\n\t\t) {\n\t\t\t// Key press should be handled, e.g. have event propagation and\n\t\t\t// default behavior handled by NavigableContainer but not result\n\t\t\t// in an offset.\n\t\t\treturn 0;\n\t\t}\n\t};\n\n\treturn (\n\t\t<NavigableContainer\n\t\t\tref={ ref }\n\t\t\tstopNavigationEvents\n\t\t\tonlyBrowserTabstops={ false }\n\t\t\trole={ role }\n\t\t\taria-orientation={ role === 'presentation' ? null : orientation }\n\t\t\teventToOffset={ eventToOffset }\n\t\t\t{ ...rest }\n\t\t/>\n\t);\n}\n\nexport default forwardRef( NavigableMenu );\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigable-container/menu.tsx"],"names":["forwardRef","NavigableContainer","UnforwardedNavigableMenu","ref","role","orientation","rest","eventToOffset","evt","code","next","previous","includes","undefined","NavigableMenu"],"mappings":";;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AACA,OAAOC,kBAAP,MAA+B,aAA/B;AAGA,OAAO,SAASC,wBAAT,OAENC,GAFM,EAGL;AAAA,MAFD;AAAEC,IAAAA,IAAI,GAAG,MAAT;AAAiBC,IAAAA,WAAW,GAAG,UAA/B;AAA2C,OAAGC;AAA9C,GAEC;;AACD,QAAMC,aAAa,GAAKC,GAAF,IAA0B;AAC/C,UAAM;AAAEC,MAAAA;AAAF,QAAWD,GAAjB;AAEA,QAAIE,IAAI,GAAG,CAAE,WAAF,CAAX;AACA,QAAIC,QAAQ,GAAG,CAAE,SAAF,CAAf;;AAEA,QAAKN,WAAW,KAAK,YAArB,EAAoC;AACnCK,MAAAA,IAAI,GAAG,CAAE,YAAF,CAAP;AACAC,MAAAA,QAAQ,GAAG,CAAE,WAAF,CAAX;AACA;;AAED,QAAKN,WAAW,KAAK,MAArB,EAA8B;AAC7BK,MAAAA,IAAI,GAAG,CAAE,YAAF,EAAgB,WAAhB,CAAP;AACAC,MAAAA,QAAQ,GAAG,CAAE,WAAF,EAAe,SAAf,CAAX;AACA;;AAED,QAAKD,IAAI,CAACE,QAAL,CAAeH,IAAf,CAAL,EAA6B;AAC5B,aAAO,CAAP;AACA,KAFD,MAEO,IAAKE,QAAQ,CAACC,QAAT,CAAmBH,IAAnB,CAAL,EAAiC;AACvC,aAAO,CAAC,CAAR;AACA,KAFM,MAEA,IACN,CAAE,WAAF,EAAe,SAAf,EAA0B,WAA1B,EAAuC,YAAvC,EAAsDG,QAAtD,CACCH,IADD,CADM,EAIL;AACD;AACA;AACA;AACA,aAAO,CAAP;AACA;;AAED,WAAOI,SAAP;AACA,GAhCD;;AAkCA,SACC,cAAC,kBAAD;AACC,IAAA,GAAG,EAAGV,GADP;AAEC,IAAA,oBAAoB,MAFrB;AAGC,IAAA,mBAAmB,EAAG,KAHvB;AAIC,IAAA,IAAI,EAAGC,IAJR;AAKC,wBACCA,IAAI,KAAK,cAAT,KACEC,WAAW,KAAK,UAAhB,IAA8BA,WAAW,KAAK,YADhD,IAEGA,WAFH,GAGGQ,SATL;AAWC,IAAA,aAAa,EAAGN;AAXjB,KAYMD,IAZN,EADD;AAgBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMQ,aAAa,GAAGd,UAAU,CAAEE,wBAAF,CAAhC;AAEP,eAAeY,aAAf","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport NavigableContainer from './container';\nimport type { NavigableMenuProps } from './types';\n\nexport function UnforwardedNavigableMenu(\n\t{ role = 'menu', orientation = 'vertical', ...rest }: NavigableMenuProps,\n\tref: ForwardedRef< any >\n) {\n\tconst eventToOffset = ( evt: KeyboardEvent ) => {\n\t\tconst { code } = evt;\n\n\t\tlet next = [ 'ArrowDown' ];\n\t\tlet previous = [ 'ArrowUp' ];\n\n\t\tif ( orientation === 'horizontal' ) {\n\t\t\tnext = [ 'ArrowRight' ];\n\t\t\tprevious = [ 'ArrowLeft' ];\n\t\t}\n\n\t\tif ( orientation === 'both' ) {\n\t\t\tnext = [ 'ArrowRight', 'ArrowDown' ];\n\t\t\tprevious = [ 'ArrowLeft', 'ArrowUp' ];\n\t\t}\n\n\t\tif ( next.includes( code ) ) {\n\t\t\treturn 1;\n\t\t} else if ( previous.includes( code ) ) {\n\t\t\treturn -1;\n\t\t} else if (\n\t\t\t[ 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight' ].includes(\n\t\t\t\tcode\n\t\t\t)\n\t\t) {\n\t\t\t// Key press should be handled, e.g. have event propagation and\n\t\t\t// default behavior handled by NavigableContainer but not result\n\t\t\t// in an offset.\n\t\t\treturn 0;\n\t\t}\n\n\t\treturn undefined;\n\t};\n\n\treturn (\n\t\t<NavigableContainer\n\t\t\tref={ ref }\n\t\t\tstopNavigationEvents\n\t\t\tonlyBrowserTabstops={ false }\n\t\t\trole={ role }\n\t\t\taria-orientation={\n\t\t\t\trole !== 'presentation' &&\n\t\t\t\t( orientation === 'vertical' || orientation === 'horizontal' )\n\t\t\t\t\t? orientation\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\teventToOffset={ eventToOffset }\n\t\t\t{ ...rest }\n\t\t/>\n\t);\n}\n\n/**\n * A container for a navigable menu.\n *\n *  ```jsx\n *  import {\n *    NavigableMenu,\n *    Button,\n *  } from '@wordpress/components';\n *\n *  function onNavigate( index, target ) {\n *    console.log( `Navigates to ${ index }`, target );\n *  }\n *\n *  const MyNavigableContainer = () => (\n *    <div>\n *      <span>Navigable Menu:</span>\n *      <NavigableMenu onNavigate={ onNavigate } orientation=\"horizontal\">\n *        <Button variant=\"secondary\">Item 1</Button>\n *        <Button variant=\"secondary\">Item 2</Button>\n *        <Button variant=\"secondary\">Item 3</Button>\n *      </NavigableMenu>\n *    </div>\n *  );\n *  ```\n */\nexport const NavigableMenu = forwardRef( UnforwardedNavigableMenu );\n\nexport default NavigableMenu;\n"]}

package/build-module/navigable-container/tabbable.js

@@ -1,6 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
-// @ts-nocheck
+
+/**
+ * External dependencies
+ */
 
 /**
  * WordPress dependencies
@@ -11,7 +14,7 @@ import { forwardRef } from '@wordpress/element';
  */
 
 import NavigableContainer from './container';
-export function TabbableContainer(_ref, ref) {
+export function UnforwardedTabbableContainer(_ref, ref) {
   let {
     eventToOffset,
     ...props
@@ -41,6 +44,8 @@ export function TabbableContainer(_ref, ref) {
     if (eventToOffset) {
       return eventToOffset(evt);
     }
+
+    return undefined;
   };
 
   return createElement(NavigableContainer, _extends({
@@ -50,5 +55,41 @@ export function TabbableContainer(_ref, ref) {
     eventToOffset: innerEventToOffset
   }, props));
 }
-export default forwardRef(TabbableContainer);
+/**
+ * A container for tabbable elements.
+ *
+ *  ```jsx
+ *  import {
+ *    TabbableContainer,
+ *    Button,
+ *  } from '@wordpress/components';
+ *
+ *  function onNavigate( index, target ) {
+ *    console.log( `Navigates to ${ index }`, target );
+ *  }
+ *
+ *  const MyTabbableContainer = () => (
+ *    <div>
+ *      <span>Tabbable Container:</span>
+ *      <TabbableContainer onNavigate={ onNavigate }>
+ *        <Button variant="secondary" tabIndex="0">
+ *          Section 1
+ *        </Button>
+ *        <Button variant="secondary" tabIndex="0">
+ *          Section 2
+ *        </Button>
+ *        <Button variant="secondary" tabIndex="0">
+ *          Section 3
+ *        </Button>
+ *        <Button variant="secondary" tabIndex="0">
+ *          Section 4
+ *        </Button>
+ *      </TabbableContainer>
+ *    </div>
+ *  );
+ *  ```
+ */
+
+export const TabbableContainer = forwardRef(UnforwardedTabbableContainer);
+export default TabbableContainer;
 //# sourceMappingURL=tabbable.js.map

package/build-module/navigable-container/tabbable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigable-container/tabbable.js"],"names":["forwardRef","NavigableContainer","TabbableContainer","ref","eventToOffset","props","innerEventToOffset","evt","code","shiftKey"],"mappings":";;AAAA;;AACA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AACA,OAAOC,kBAAP,MAA+B,aAA/B;AAEA,OAAO,SAASC,iBAAT,OAAyDC,GAAzD,EAA+D;AAAA,MAAnC;AAAEC,IAAAA,aAAF;AAAiB,OAAGC;AAApB,GAAmC;;AACrE,QAAMC,kBAAkB,GAAKC,GAAF,IAAW;AACrC,UAAM;AAAEC,MAAAA,IAAF;AAAQC,MAAAA;AAAR,QAAqBF,GAA3B;;AACA,QAAK,UAAUC,IAAf,EAAsB;AACrB,aAAOC,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAAvB;AACA,KAJoC,CAMrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,QAAKL,aAAL,EAAqB;AACpB,aAAOA,aAAa,CAAEG,GAAF,CAApB;AACA;AACD,GApBD;;AAsBA,SACC,cAAC,kBAAD;AACC,IAAA,GAAG,EAAGJ,GADP;AAEC,IAAA,oBAAoB,MAFrB;AAGC,IAAA,mBAAmB,MAHpB;AAIC,IAAA,aAAa,EAAGG;AAJjB,KAKMD,KALN,EADD;AASA;AAED,eAAeL,UAAU,CAAEE,iBAAF,CAAzB","sourcesContent":["// @ts-nocheck\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport NavigableContainer from './container';\n\nexport function TabbableContainer( { eventToOffset, ...props }, ref ) {\n\tconst innerEventToOffset = ( evt ) => {\n\t\tconst { code, shiftKey } = evt;\n\t\tif ( 'Tab' === code ) {\n\t\t\treturn shiftKey ? -1 : 1;\n\t\t}\n\n\t\t// Allow custom handling of keys besides Tab.\n\t\t//\n\t\t// By default, TabbableContainer will move focus forward on Tab and\n\t\t// backward on Shift+Tab. The handler below will be used for all other\n\t\t// events. The semantics for `eventToOffset`'s return\n\t\t// values are the following:\n\t\t//\n\t\t// - +1: move focus forward\n\t\t// - -1: move focus backward\n\t\t// -  0: don't move focus, but acknowledge event and thus stop it\n\t\t// - undefined: do nothing, let the event propagate.\n\t\tif ( eventToOffset ) {\n\t\t\treturn eventToOffset( evt );\n\t\t}\n\t};\n\n\treturn (\n\t\t<NavigableContainer\n\t\t\tref={ ref }\n\t\t\tstopNavigationEvents\n\t\t\tonlyBrowserTabstops\n\t\t\teventToOffset={ innerEventToOffset }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default forwardRef( TabbableContainer );\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigable-container/tabbable.tsx"],"names":["forwardRef","NavigableContainer","UnforwardedTabbableContainer","ref","eventToOffset","props","innerEventToOffset","evt","code","shiftKey","undefined","TabbableContainer"],"mappings":";;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AACA,OAAOC,kBAAP,MAA+B,aAA/B;AAGA,OAAO,SAASC,4BAAT,OAENC,GAFM,EAGL;AAAA,MAFD;AAAEC,IAAAA,aAAF;AAAiB,OAAGC;AAApB,GAEC;;AACD,QAAMC,kBAAkB,GAAKC,GAAF,IAA0B;AACpD,UAAM;AAAEC,MAAAA,IAAF;AAAQC,MAAAA;AAAR,QAAqBF,GAA3B;;AACA,QAAK,UAAUC,IAAf,EAAsB;AACrB,aAAOC,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAAvB;AACA,KAJmD,CAMpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,QAAKL,aAAL,EAAqB;AACpB,aAAOA,aAAa,CAAEG,GAAF,CAApB;AACA;;AAED,WAAOG,SAAP;AACA,GAtBD;;AAwBA,SACC,cAAC,kBAAD;AACC,IAAA,GAAG,EAAGP,GADP;AAEC,IAAA,oBAAoB,MAFrB;AAGC,IAAA,mBAAmB,MAHpB;AAIC,IAAA,aAAa,EAAGG;AAJjB,KAKMD,KALN,EADD;AASA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMM,iBAAiB,GAAGX,UAAU,CAAEE,4BAAF,CAApC;AAEP,eAAeS,iBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport NavigableContainer from './container';\nimport type { TabbableContainerProps } from './types';\n\nexport function UnforwardedTabbableContainer(\n\t{ eventToOffset, ...props }: TabbableContainerProps,\n\tref: ForwardedRef< any >\n) {\n\tconst innerEventToOffset = ( evt: KeyboardEvent ) => {\n\t\tconst { code, shiftKey } = evt;\n\t\tif ( 'Tab' === code ) {\n\t\t\treturn shiftKey ? -1 : 1;\n\t\t}\n\n\t\t// Allow custom handling of keys besides Tab.\n\t\t//\n\t\t// By default, TabbableContainer will move focus forward on Tab and\n\t\t// backward on Shift+Tab. The handler below will be used for all other\n\t\t// events. The semantics for `eventToOffset`'s return\n\t\t// values are the following:\n\t\t//\n\t\t// - +1: move focus forward\n\t\t// - -1: move focus backward\n\t\t// -  0: don't move focus, but acknowledge event and thus stop it\n\t\t// - undefined: do nothing, let the event propagate.\n\t\tif ( eventToOffset ) {\n\t\t\treturn eventToOffset( evt );\n\t\t}\n\n\t\treturn undefined;\n\t};\n\n\treturn (\n\t\t<NavigableContainer\n\t\t\tref={ ref }\n\t\t\tstopNavigationEvents\n\t\t\tonlyBrowserTabstops\n\t\t\teventToOffset={ innerEventToOffset }\n\t\t\t{ ...props }\n\t\t/>\n\t);\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 );\n\nexport default TabbableContainer;\n"]}

package/build-module/navigable-container/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build-module/navigable-container/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/build-module/palette-edit/index.js

@@ -4,12 +4,13 @@ import { createElement, Fragment } from "@wordpress/element";
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { paramCase as kebabCase } from 'change-case';
 /**
  * WordPress dependencies
  */
 
-import { useState, useRef, useEffect, useCallback } from '@wordpress/element';
+import { useState, useRef, useEffect, useCallback, useMemo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { lineSolid, moreVertical, plus } from '@wordpress/icons';
 import { __experimentalUseFocusOutside as useFocusOutside, useDebounce } from '@wordpress/compose';
@@ -86,14 +87,19 @@ function ColorPickerPopover(_ref2) {
     isGradient,
     element,
     onChange,
+    popoverProps: receivedPopoverProps,
     onClose = () => {}
   } = _ref2;
-  return createElement(Popover, {
-    placement: "left-start",
+  const popoverProps = useMemo(() => ({
+    shift: true,
     offset: 20,
-    className: "components-palette-edit__popover",
+    placement: 'left-start',
+    ...receivedPopoverProps,
+    className: classnames('components-palette-edit__popover', receivedPopoverProps === null || receivedPopoverProps === void 0 ? void 0 : receivedPopoverProps.className)
+  }), [receivedPopoverProps]);
+  return createElement(Popover, _extends({}, popoverProps, {
     onClose: onClose
-  }, !isGradient && createElement(ColorPicker, {
+  }), !isGradient && createElement(ColorPicker, {
     color: element.color,
     enableAlpha: true,
     onChange: newColor => {
@@ -124,15 +130,24 @@ function Option(_ref3) {
     onStartEditing,
     onRemove,
     onStopEditing,
+    popoverProps: receivedPopoverProps,
     slugPrefix,
     isGradient
   } = _ref3;
   const focusOutsideProps = useFocusOutside(onStopEditing);
-  const value = isGradient ? element.gradient : element.color;
+  const value = isGradient ? element.gradient : element.color; // Use internal state instead of a ref to make sure that the component
+  // re-renders when the popover's anchor updates.
+
+  const [popoverAnchor, setPopoverAnchor] = useState(null);
+  const popoverProps = useMemo(() => ({ ...receivedPopoverProps,
+    // Use the custom palette color item as the popover anchor.
+    anchor: popoverAnchor
+  }), [popoverAnchor, receivedPopoverProps]);
   return createElement(PaletteItem, _extends({
     className: isEditing ? 'is-selected' : undefined,
     as: "div",
-    onClick: onStartEditing
+    onClick: onStartEditing,
+    ref: setPopoverAnchor
   }, isEditing ? { ...focusOutsideProps
   } : {
     style: {
@@ -160,7 +175,8 @@ function Option(_ref3) {
   }))), isEditing && createElement(ColorPickerPopover, {
     isGradient: isGradient,
     onChange: onChange,
-    element: element
+    element: element,
+    popoverProps: popoverProps
   }));
 }
 
@@ -182,7 +198,8 @@ function PaletteEditListView(_ref5) {
     setEditingElement,
     canOnlyChangeValues,
     slugPrefix,
-    isGradient
+    isGradient,
+    popoverProps
   } = _ref5;
   // When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.
   const elementsReference = useRef();
@@ -242,7 +259,8 @@ function PaletteEditListView(_ref5) {
         setEditingElement(null);
       }
     },
-    slugPrefix: slugPrefix
+    slugPrefix: slugPrefix,
+    popoverProps: popoverProps
   }))));
 }
 
@@ -278,7 +296,8 @@ export function PaletteEdit(_ref6) {
     emptyMessage,
     canOnlyChangeValues,
     canReset,
-    slugPrefix = ''
+    slugPrefix = '',
+    popoverProps
   } = _ref6;
   const isGradient = !!gradients;
   const elements = isGradient ? gradients : colors;
@@ -375,7 +394,8 @@ export function PaletteEdit(_ref6) {
     editingElement: editingElement,
     setEditingElement: setEditingElement,
     slugPrefix: slugPrefix,
-    isGradient: isGradient
+    isGradient: isGradient,
+    popoverProps: popoverProps
   }), !isEditing && editingElement !== null && createElement(ColorPickerPopover, {
     isGradient: isGradient,
     onClose: () => setEditingElement(null),
@@ -389,7 +409,8 @@ export function PaletteEdit(_ref6) {
         return currentElement;
       }));
     },
-    element: elements[editingElement !== null && editingElement !== void 0 ? editingElement : -1]
+    element: elements[editingElement !== null && editingElement !== void 0 ? editingElement : -1],
+    popoverProps: popoverProps
   }), !isEditing && (isGradient ? createElement(GradientPicker, {
     __nextHasNoMargin: true,
     gradients: gradients,