return Object(external_wp_element_["createElement"])(toolbar_item["a" /* default */], toggleProps, renderDropdownMenu);
return renderDropdownMenu(toggleProps);
/* harmony default export */ var toolbar_group_collapsed = (ToolbarGroupCollapsed);
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar-group/index.js
* Renders a collapsible group of controls
* The `controls` prop accepts an array of sets. A set is an array of controls.
* Controls have the following shape:
* For convenience it is also possible to pass only an array of controls. It is
* then assumed this is the only set.
* Either `controls` or `children` is required, otherwise this components
* @param {Object} props Component props.
* @param {Array} [props.controls] The controls to render in this toolbar.
* @param {WPElement} [props.children] Any other things to render inside the toolbar besides the controls.
* @param {string} [props.className] Class to set on the container div.
* @param {boolean} [props.isCollapsed] Turns ToolbarGroup into a dropdown menu.
* @param {string} [props.title] ARIA label for dropdown menu if is collapsed.
function ToolbarGroup(_ref) {
var _ref$controls = _ref.controls,
controls = _ref$controls === void 0 ? [] : _ref$controls,
children = _ref.children,
className = _ref.className,
isCollapsed = _ref.isCollapsed,
props = Object(objectWithoutProperties["a" /* default */])(_ref, ["controls", "children", "className", "isCollapsed", "title"]);
// It'll contain state if `ToolbarGroup` is being used within
// `<Toolbar label="label" />`
var accessibleToolbarState = Object(external_wp_element_["useContext"])(toolbar_context["a" /* default */]);
if ((!controls || !controls.length) && !children) {
var finalClassName = classnames_default()( // Unfortunately, there's legacy code referencing to `.components-toolbar`
// So we can't get rid of it
accessibleToolbarState ? 'components-toolbar-group' : 'components-toolbar', className); // Normalize controls to nested array of objects (sets of controls)
var controlSets = controls;
if (!Array.isArray(controlSets[0])) {
controlSets = [controlSets];
return Object(external_wp_element_["createElement"])(toolbar_group_collapsed, Object(esm_extends["a" /* default */])({
className: finalClassName,
return Object(external_wp_element_["createElement"])(toolbar_group_container, Object(esm_extends["a" /* default */])({
className: finalClassName
}, props), Object(external_lodash_["flatMap"])(controlSets, function (controlSet, indexOfSet) {
return controlSet.map(function (control, indexOfControl) {
return Object(external_wp_element_["createElement"])(toolbar_button, Object(esm_extends["a" /* default */])({
key: [indexOfSet, indexOfControl].join(),
containerClassName: indexOfSet > 0 && indexOfControl === 0 ? 'has-left-divider' : null
/* harmony default export */ var toolbar_group = (ToolbarGroup);
// CONCATENATED MODULE: ./node_modules/reakit/es/Toolbar/ToolbarState.js
function useToolbarState(initialState) {
if (initialState === void 0) {
var _useSealedState = useSealedState(initialState),
_useSealedState$orien = _useSealedState.orientation,
orientation = _useSealedState$orien === void 0 ? "horizontal" : _useSealedState$orien,
sealed = Object(_rollupPluginBabelHelpers_1f0bf8c2["a" /* _ */])(_useSealedState, ["orientation"]);
return useCompositeState(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({
// EXTERNAL MODULE: ./node_modules/reakit/es/__keys-ae468c11.js
var _keys_ae468c11 = __webpack_require__("mjVI");
// CONCATENATED MODULE: ./node_modules/reakit/es/Toolbar/Toolbar.js
var useToolbar = Object(createHook["a" /* createHook */])({
keys: _keys_ae468c11["a" /* T */],
useProps: function useProps(options, htmlProps) {
return Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({
"aria-orientation": options.orientation
var Toolbar = Object(createComponent["a" /* createComponent */])({
useCreateElement: function useCreateElement$1(type, props, children) {
false ? undefined : void 0;
return Object(useCreateElement["a" /* useCreateElement */])(type, props, children);
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar-container.js
function ToolbarContainer(_ref, ref) {
props = Object(objectWithoutProperties["a" /* default */])(_ref, ["label"]);
// https://reakit.io/docs/basic-concepts/#state-hooks
// Passing baseId for server side rendering (which includes snapshots)
// If an id prop is passed to Toolbar, toolbar items will use it as a base for their ids
var toolbarState = useToolbarState({
rtl: Object(external_wp_i18n_["isRTL"])()
return (// This will provide state for `ToolbarButton`'s
Object(external_wp_element_["createElement"])(toolbar_context["a" /* default */].Provider, {
}, Object(external_wp_element_["createElement"])(Toolbar, Object(esm_extends["a" /* default */])({
}, toolbarState, props)))
/* harmony default export */ var toolbar_container = (Object(external_wp_element_["forwardRef"])(ToolbarContainer));
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/index.js
* To add controls, simply pass `ToolbarButton` components as children.
* @param {Object} props Component props.
* @param {string} [props.className] Class to set on the container div.
* @param {string} [props.label] ARIA label for toolbar container.
* @param {Object} ref React Element ref.
function toolbar_Toolbar(_ref, ref) {
var className = _ref.className,
props = Object(objectWithoutProperties["a" /* default */])(_ref, ["className", "label"]);
external_wp_deprecated_default()('Using Toolbar without label prop', {
alternative: 'ToolbarGroup component',
link: 'https://developer.wordpress.org/block-editor/components/toolbar/'
return Object(external_wp_element_["createElement"])(toolbar_group, Object(esm_extends["a" /* default */])({}, props, {
} // `ToolbarGroup` already uses components-toolbar for compatibility reasons
var finalClassName = classnames_default()('components-accessible-toolbar', className);
return Object(external_wp_element_["createElement"])(toolbar_container, Object(esm_extends["a" /* default */])({
className: finalClassName,
/* harmony default export */ var toolbar = (Object(external_wp_element_["forwardRef"])(toolbar_Toolbar));
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/roving-tab-index-context.js
var RovingTabIndexContext = Object(external_wp_element_["createContext"])();
var roving_tab_index_context_useRovingTabIndexContext = function useRovingTabIndexContext() {
return Object(external_wp_element_["useContext"])(RovingTabIndexContext);
var RovingTabIndexProvider = RovingTabIndexContext.Provider;
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/roving-tab-index.js
* Provider for adding roving tab index behaviors to tree grid structures.
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md
* @param {Object} props Component props.
* @param {WPElement} props.children Children to be rendered
function RovingTabIndex(_ref) {
var children = _ref.children;
var _useState = Object(external_wp_element_["useState"])(),
_useState2 = Object(slicedToArray["a" /* default */])(_useState, 2),
lastFocusedElement = _useState2[0],
setLastFocusedElement = _useState2[1]; // Use `useMemo` to avoid creation of a new object for the providerValue
// on every render. Only create a new object when the `lastFocusedElement`
var providerValue = Object(external_wp_element_["useMemo"])(function () {
lastFocusedElement: lastFocusedElement,
setLastFocusedElement: setLastFocusedElement
}, [lastFocusedElement]);
return Object(external_wp_element_["createElement"])(RovingTabIndexProvider, {
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/index.js
* Return focusables in a row element, excluding those from other branches
* @param {Element} rowElement The DOM element representing the row.
* @return {?Array} The array of focusables in the row.
function getRowFocusables(rowElement) {
var focusablesInRow = external_wp_dom_["focus"].focusable.find(rowElement);
if (!focusablesInRow || !focusablesInRow.length) {
return focusablesInRow.filter(function (focusable) {
return focusable.closest('[role="row"]') === rowElement;
* Renders both a table and tbody element, used to create a tree hierarchy.
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md
* @param {Object} props Component props.
* @param {WPElement} props.children Children to be rendered.
* @param {Object} ref A ref to the underlying DOM table element.
function TreeGrid(_ref, ref) {
var children = _ref.children,
props = Object(objectWithoutProperties["a" /* default */])(_ref, ["children"]);
var onKeyDown = Object(external_wp_element_["useCallback"])(function (event) {
var keyCode = event.keyCode,
shiftKey = event.shiftKey;
var hasModifierKeyPressed = metaKey || ctrlKey || altKey || shiftKey;
if (hasModifierKeyPressed || !Object(external_lodash_["includes"])([external_wp_keycodes_["UP"], external_wp_keycodes_["DOWN"], external_wp_keycodes_["LEFT"], external_wp_keycodes_["RIGHT"]], keyCode)) {
} // The event will be handled, stop propagation.
var _document = document,
activeElement = _document.activeElement;
var treeGridElement = event.currentTarget;
if (!treeGridElement.contains(activeElement)) {
} // Calculate the columnIndex of the active element.
var activeRow = activeElement.closest('[role="row"]');
var focusablesInRow = getRowFocusables(activeRow);
var currentColumnIndex = focusablesInRow.indexOf(activeElement);
if (Object(external_lodash_["includes"])([external_wp_keycodes_["LEFT"], external_wp_keycodes_["RIGHT"]], keyCode)) {
// Calculate to the next element.
if (keyCode === external_wp_keycodes_["LEFT"]) {
nextIndex = Math.max(0, currentColumnIndex - 1);
nextIndex = Math.min(currentColumnIndex + 1, focusablesInRow.length - 1);
} // Focus is either at the left or right edge of the grid. Do nothing.
if (nextIndex === currentColumnIndex) {
// Prevent key use for anything else. For example, Voiceover
// will start reading text on continued use of left/right arrow
} // Focus the next element.
focusablesInRow[nextIndex].focus(); // Prevent key use for anything else. This ensures Voiceover
// doesn't try to handle key navigation.
} else if (Object(external_lodash_["includes"])([external_wp_keycodes_["UP"], external_wp_keycodes_["DOWN"]], keyCode)) {
// Calculate the rowIndex of the next row.
var rows = Array.from(treeGridElement.querySelectorAll('[role="row"]'));
var currentRowIndex = rows.indexOf(activeRow);
if (keyCode === external_wp_keycodes_["UP"]) {
nextRowIndex = Math.max(0, currentRowIndex - 1);
nextRowIndex = Math.min(currentRowIndex + 1, rows.length - 1);
} // Focus is either at the top or bottom edge of the grid. Do nothing.
if (nextRowIndex === currentRowIndex) {
// Prevent key use for anything else. For example, Voiceover
// will start navigating horizontally when reaching the vertical
} // Get the focusables in the next row.
var focusablesInNextRow = getRowFocusables(rows[nextRowIndex]); // If for some reason there are no focusables in the next row, do nothing.
if (!focusablesInNextRow || !focusablesInNextRow.length) {
// Prevent key use for anything else. For example, Voiceover
// will still focus text when using arrow keys, while this
// component should limit navigation to focusables.
} // Try to focus the element in the next row that's at a similar column to the activeElement.
var _nextIndex = Math.min(currentColumnIndex, focusablesInNextRow.length - 1);
focusablesInNextRow[_nextIndex].focus(); // Prevent key use for anything else. This ensures Voiceover
It is recommended that you Edit text format, this type of Fix handles quite a lot in one request
