: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
function UnforwardedTreeGridRow({
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("tr", {
"aria-posinset": positionInSet,
"aria-expanded": isExpanded,
* `TreeGridRow` is used to create a tree hierarchy.
* It is not a visually styled component, but instead helps with adding
* keyboard navigation and roving tab index behaviors to tree grid structures.
* @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}
const TreeGridRow = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTreeGridRow);
/* harmony default export */ const tree_grid_row = (TreeGridRow);
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/roving-tab-index-item.js
const RovingTabIndexItem = (0,external_wp_element_namespaceObject.forwardRef)(function UnforwardedRovingTabIndexItem({
const localRef = (0,external_wp_element_namespaceObject.useRef)();
const ref = forwardedRef || localRef;
// @ts-expect-error - We actually want to throw an error if this is undefined.
} = useRovingTabIndexContext();
if (lastFocusedElement) {
tabIndex = lastFocusedElement === (
// TODO: The original implementation simply used `ref.current` here, assuming
// that a forwarded ref would always be an object, which is not necessarily true.
// This workaround maintains the original runtime behavior in a type-safe way,
// but should be revisited.
'current' in ref ? ref.current : undefined) ? 0 : -1;
const onFocus = event => setLastFocusedElement?.(event.target);
if (typeof children === 'function') {
return children(allProps);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, {
/* harmony default export */ const roving_tab_index_item = (RovingTabIndexItem);
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/item.js
function UnforwardedTreeGridItem({
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(roving_tab_index_item, {
* `TreeGridItem` is used to create a tree hierarchy.
* It is not a visually styled component, but instead helps with adding
* keyboard navigation and roving tab index behaviors to tree grid structures.
* @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}
const TreeGridItem = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTreeGridItem);
/* harmony default export */ const tree_grid_item = (TreeGridItem);
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/cell.js
function UnforwardedTreeGridCell({
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("td", {
children: withoutGridItem ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
}) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tree_grid_item, {
* `TreeGridCell` is used to create a tree hierarchy.
* It is not a visually styled component, but instead helps with adding
* keyboard navigation and roving tab index behaviors to tree grid structures.
* @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}
const TreeGridCell = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTreeGridCell);
/* harmony default export */ const cell = (TreeGridCell);
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/isolated-event-container/index.js
function stopPropagation(event) {
const IsolatedEventContainer = (0,external_wp_element_namespaceObject.forwardRef)((props, ref) => {
external_wp_deprecated_default()('wp.components.IsolatedEventContainer', {
// Disable reason: this stops certain events from propagating outside of the component.
// - onMouseDown is disabled as this can cause interactions with other DOM elements.
/* eslint-disable jsx-a11y/no-static-element-interactions */
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
onMouseDown: stopPropagation
/* eslint-enable jsx-a11y/no-static-element-interactions */
/* harmony default export */ const isolated_event_container = (IsolatedEventContainer);
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/use-slot-fills.js
function useSlotFills(name) {
const registry = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context);
return (0,external_wp_compose_namespaceObject.useObservableValue)(registry.fills, name);
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/z-stack/styles.js
function z_stack_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
const ZStackChildView = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
} : 0)("&:not( :first-of-type ){", ({
}) => /*#__PURE__*/emotion_react_browser_esm_css({
marginInlineStart: offsetAmount
}, true ? "" : 0, true ? "" : 0), ";}", ({
}) => /*#__PURE__*/emotion_react_browser_esm_css({
}, true ? "" : 0, true ? "" : 0), ";" + ( true ? "" : 0));
var z_stack_styles_ref = true ? {
styles: "grid-row-start:1;grid-column-start:1"
const ZStackView = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
} : 0)("display:inline-grid;grid-auto-flow:column;position:relative;&>", ZStackChildView, "{position:relative;justify-self:start;", ({
}) => isLayered ? // When `isLayered` is true, all items overlap in the same grid cell
z_stack_styles_ref : undefined, ";}" + ( true ? "" : 0));
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/z-stack/component.js
function UnconnectedZStack(props, forwardedRef) {
} = useContextSystem(props, 'ZStack');
const validChildren = getValidChildren(children);
const childrenLastIndex = validChildren.length - 1;
const clonedChildren = validChildren.map((child, index) => {
const zIndex = isReversed ? childrenLastIndex - index : index;
// Only when the component is layered, the offset needs to be multiplied by
// the item's index, so that items can correctly stack at the right distance
const offsetAmount = isLayered ? offset * index : offset;
const key = (0,external_wp_element_namespaceObject.isValidElement)(child) ? child.key : index;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ZStackChildView, {
offsetAmount: offsetAmount,
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ZStackView, {
* `ZStack` allows you to stack things along the Z-axis.
* import { __experimentalZStack as ZStack } from '@wordpress/components';
* <ZStack offset={ 20 } isLayered>
const ZStack = contextConnect(UnconnectedZStack, 'ZStack');
/* harmony default export */ const z_stack_component = (ZStack);
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/navigate-regions/index.js
const defaultShortcuts = {
function useNavigateRegions(shortcuts = defaultShortcuts) {
const ref = (0,external_wp_element_namespaceObject.useRef)(null);
const [isFocusingRegions, setIsFocusingRegions] = (0,external_wp_element_namespaceObject.useState)(false);
function focusRegion(offset) {
var _ref$current$querySel;
const regions = Array.from((_ref$current$querySel = ref.current?.querySelectorAll('[role="region"][tabindex="-1"]')) !== null && _ref$current$querySel !== void 0 ? _ref$current$querySel : []);
let nextRegion = regions[0];
// Based off the current element, use closest to determine the wrapping region since this operates up the DOM. Also, match tabindex to avoid edge cases with regions we do not want.
const wrappingRegion = ref.current?.ownerDocument?.activeElement?.closest('[role="region"][tabindex="-1"]');
const selectedIndex = wrappingRegion ? regions.indexOf(wrappingRegion) : -1;
if (selectedIndex !== -1) {
let nextIndex = selectedIndex + offset;
nextIndex = nextIndex === -1 ? regions.length - 1 : nextIndex;
nextIndex = nextIndex === regions.length ? 0 : nextIndex;
nextRegion = regions[nextIndex];
setIsFocusingRegions(true);
const clickRef = (0,external_wp_compose_namespaceObject.useRefEffect)(element => {
setIsFocusingRegions(false);
element.addEventListener('click', onClick);
element.removeEventListener('click', onClick);
}, [setIsFocusingRegions]);
ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, clickRef]),
className: isFocusingRegions ? 'is-focusing-regions' : '',
if (shortcuts.previous.some(({
return external_wp_keycodes_namespaceObject.isKeyboardEvent[modifier](event, character);
} else if (shortcuts.next.some(({
return external_wp_keycodes_namespaceObject.isKeyboardEvent[modifier](event, character);
* `navigateRegions` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html)
* adding keyboard navigation to switch between the different DOM elements marked as "regions" (role="region").
* These regions should be focusable (By adding a tabIndex attribute for example). For better accessibility,
* these elements must be properly labelled to briefly describe the purpose of the content in the region.
* For more details, see "Landmark Roles" in the [WAI-ARIA specification](https://www.w3.org/TR/wai-aria/)
* and "Landmark Regions" in the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/).
* import { navigateRegions } from '@wordpress/components';
* const MyComponentWithNavigateRegions = navigateRegions( () => (
* <div role="region" tabIndex="-1" aria-label="Header">
* <div role="region" tabIndex="-1" aria-label="Content">
* <div role="region" tabIndex="-1" aria-label="Sidebar">
/* harmony default export */ const navigate_regions = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(Component => ({
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
...useNavigateRegions(shortcuts),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, {
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-constrained-tabbing/index.js
* `withConstrainedTabbing` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html)
* adding the ability to constrain keyboard navigation with the Tab key within a component.
* For accessibility reasons, some UI components need to constrain Tab navigation, for example
* modal dialogs or similar UI. Use of this component is recommended only in cases where a way to
* navigate away from the wrapped component is implemented by other means, usually by pressing
* the Escape key or using a specific UI control, e.g. a "Close" button.
const withConstrainedTabbing = (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => function ComponentWithConstrainedTabbing(props) {
const ref = (0,external_wp_compose_namespaceObject.useConstrainedTabbing)();
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WrappedComponent, {
}, 'withConstrainedTabbing');
/* harmony default export */ const with_constrained_tabbing = (withConstrainedTabbing);
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-fallback-styles/index.js
/* harmony default export */ const with_fallback_styles = (mapNodeToProps => (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => {
return class extends external_wp_element_namespaceObject.Component {
this.nodeRef = this.props.node;
fallbackStyles: undefined,
grabStylesCompleted: false
this.bindRef = this.bindRef.bind(this);
this.grabFallbackStyles();
this.grabFallbackStyles();
if (this.nodeRef && !grabStylesCompleted) {
const newFallbackStyles = mapNodeToProps(this.nodeRef, this.props);
if (!es6_default()(newFallbackStyles, fallbackStyles)) {
fallbackStyles: newFallbackStyles,
grabStylesCompleted: Object.values(newFallbackStyles).every(Boolean)