@wordpress/components
Version:
UI components for WordPress.
226 lines (200 loc) • 18.4 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";
function _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)."; }
/**
* External dependencies
*/
import { css } from '@emotion/react';
/**
* WordPress dependencies
*/
import { useMemo, useState, useCallback, useReducer, useRef, useEffect } from '@wordpress/element';
import isShallowEqual from '@wordpress/is-shallow-equal';
/**
* Internal dependencies
*/
import { contextConnect, useContextSystem } from '../../ui/context';
import { useCx } from '../../utils/hooks/use-cx';
import { View } from '../../view';
import { NavigatorContext } from '../context';
import { patternMatch, findParent } from '../utils/router';
const MAX_HISTORY_LENGTH = 50;
function screensReducer() {
let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
let action = arguments.length > 1 ? arguments[1] : undefined;
switch (action.type) {
case 'add':
return [...state, action.screen];
case 'remove':
return state.filter(s => s.id !== action.screen.id);
}
return state;
}
var _ref = process.env.NODE_ENV === "production" ? {
name: "15bx5k",
styles: "overflow-x:hidden"
} : {
name: "192ebb7-classes",
styles: "overflow-x:hidden;label:classes;",
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbmF2aWdhdG9yL25hdmlnYXRvci1wcm92aWRlci9jb21wb25lbnQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVQWSIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL25hdmlnYXRvci9uYXZpZ2F0b3ItcHJvdmlkZXIvY29tcG9uZW50LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB0eXBlIHsgRm9yd2FyZGVkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIFdvcmRQcmVzcyBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHtcblx0dXNlTWVtbyxcblx0dXNlU3RhdGUsXG5cdHVzZUNhbGxiYWNrLFxuXHR1c2VSZWR1Y2VyLFxuXHR1c2VSZWYsXG5cdHVzZUVmZmVjdCxcbn0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcbmltcG9ydCBpc1NoYWxsb3dFcXVhbCBmcm9tICdAd29yZHByZXNzL2lzLXNoYWxsb3ctZXF1YWwnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQge1xuXHRjb250ZXh0Q29ubmVjdCxcblx0dXNlQ29udGV4dFN5c3RlbSxcblx0V29yZFByZXNzQ29tcG9uZW50UHJvcHMsXG59IGZyb20gJy4uLy4uL3VpL2NvbnRleHQnO1xuaW1wb3J0IHsgdXNlQ3ggfSBmcm9tICcuLi8uLi91dGlscy9ob29rcy91c2UtY3gnO1xuaW1wb3J0IHsgVmlldyB9IGZyb20gJy4uLy4uL3ZpZXcnO1xuaW1wb3J0IHsgTmF2aWdhdG9yQ29udGV4dCB9IGZyb20gJy4uL2NvbnRleHQnO1xuaW1wb3J0IHR5cGUge1xuXHROYXZpZ2F0b3JQcm92aWRlclByb3BzLFxuXHROYXZpZ2F0b3JMb2NhdGlvbixcblx0TmF2aWdhdG9yQ29udGV4dCBhcyBOYXZpZ2F0b3JDb250ZXh0VHlwZSxcblx0U2NyZWVuLFxufSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBwYXR0ZXJuTWF0Y2gsIGZpbmRQYXJlbnQgfSBmcm9tICcuLi91dGlscy9yb3V0ZXInO1xuXG50eXBlIE1hdGNoZWRQYXRoID0gUmV0dXJuVHlwZTwgdHlwZW9mIHBhdHRlcm5NYXRjaCA+O1xudHlwZSBTY3JlZW5BY3Rpb24gPSB7IHR5cGU6IHN0cmluZzsgc2NyZWVuOiBTY3JlZW4gfTtcblxuY29uc3QgTUFYX0hJU1RPUllfTEVOR1RIID0gNTA7XG5cbmZ1bmN0aW9uIHNjcmVlbnNSZWR1Y2VyKFxuXHRzdGF0ZTogU2NyZWVuW10gPSBbXSxcblx0YWN0aW9uOiBTY3JlZW5BY3Rpb25cbik6IFNjcmVlbltdIHtcblx0c3dpdGNoICggYWN0aW9uLnR5cGUgKSB7XG5cdFx0Y2FzZSAnYWRkJzpcblx0XHRcdHJldHVybiBbIC4uLnN0YXRlLCBhY3Rpb24uc2NyZWVuIF07XG5cdFx0Y2FzZSAncmVtb3ZlJzpcblx0XHRcdHJldHVybiBzdGF0ZS5maWx0ZXIoICggczogU2NyZWVuICkgPT4gcy5pZCAhPT0gYWN0aW9uLnNjcmVlbi5pZCApO1xuXHR9XG5cblx0cmV0dXJuIHN0YXRlO1xufVxuXG5mdW5jdGlvbiBVbmNvbm5lY3RlZE5hdmlnYXRvclByb3ZpZGVyKFxuXHRwcm9wczogV29yZFByZXNzQ29tcG9uZW50UHJvcHM8IE5hdmlnYXRvclByb3ZpZGVyUHJvcHMsICdkaXYnID4sXG5cdGZvcndhcmRlZFJlZjogRm9yd2FyZGVkUmVmPCBhbnkgPlxuKSB7XG5cdGNvbnN0IHsgaW5pdGlhbFBhdGgsIGNoaWxkcmVuLCBjbGFzc05hbWUsIC4uLm90aGVyUHJvcHMgfSA9XG5cdFx0dXNlQ29udGV4dFN5c3RlbSggcHJvcHMsICdOYXZpZ2F0b3JQcm92aWRlcicgKTtcblxuXHRjb25zdCBbIGxvY2F0aW9uSGlzdG9yeSwgc2V0TG9jYXRpb25IaXN0b3J5IF0gPSB1c2VTdGF0ZTxcblx0XHROYXZpZ2F0b3JMb2NhdGlvbltdXG5cdD4oIFtcblx0XHR7XG5cdFx0XHRwYXRoOiBpbml0aWFsUGF0aCxcblx0XHR9LFxuXHRdICk7XG5cdGNvbnN0IGN1cnJlbnRMb2NhdGlvbkhpc3RvcnkgPSB1c2VSZWY8IE5hdmlnYXRvckxvY2F0aW9uW10gPiggW10gKTtcblx0Y29uc3QgWyBzY3JlZW5zLCBkaXNwYXRjaCBdID0gdXNlUmVkdWNlciggc2NyZWVuc1JlZHVjZXIsIFtdICk7XG5cdGNvbnN0IGN1cnJlbnRTY3JlZW5zID0gdXNlUmVmPCBTY3JlZW5bXSA+KCBbXSApO1xuXHR1c2VFZmZlY3QoICgpID0+IHtcblx0XHRjdXJyZW50U2NyZWVucy5jdXJyZW50ID0gc2NyZWVucztcblx0fSwgWyBzY3JlZW5zIF0gKTtcblx0dXNlRWZmZWN0KCAoKSA9PiB7XG5cdFx0Y3VycmVudExvY2F0aW9uSGlzdG9yeS5jdXJyZW50ID0gbG9jYXRpb25IaXN0b3J5O1xuXHR9LCBbIGxvY2F0aW9uSGlzdG9yeSBdICk7XG5cdGNvbnN0IGN1cnJlbnRNYXRjaCA9IHVzZVJlZjwgTWF0Y2hlZFBhdGggPigpO1xuXHRjb25zdCBtYXRjaGVkUGF0aCA9IHVzZU1lbW8oICgpID0+IHtcblx0XHRsZXQgY3VycmVudFBhdGg6IHN0cmluZyB8IHVuZGVmaW5lZDtcblx0XHRpZiAoXG5cdFx0XHRsb2NhdGlvbkhpc3RvcnkubGVuZ3RoID09PSAwIHx8XG5cdFx0XHQoIGN1cnJlbnRQYXRoID1cblx0XHRcdFx0bG9jYXRpb25IaXN0b3J5WyBsb2NhdGlvbkhpc3RvcnkubGVuZ3RoIC0gMSBdLnBhdGggKSA9PT1cblx0XHRcdFx0dW5kZWZpbmVkXG5cdFx0KSB7XG5cdFx0XHRjdXJyZW50TWF0Y2guY3VycmVudCA9IHVuZGVmaW5lZDtcblx0XHRcdHJldHVybiB1bmRlZmluZWQ7XG5cdFx0fVxuXG5cdFx0Y29uc3QgcmVzb2x2ZVBhdGggPSAoIHBhdGg6IHN0cmluZyApID0+IHtcblx0XHRcdGNvbnN0IG5ld01hdGNoID0gcGF0dGVybk1hdGNoKCBwYXRoLCBzY3JlZW5zICk7XG5cblx0XHRcdC8vIElmIHRoZSBuZXcgbWF0Y2ggaXMgdGhlIHNhbWUgYXMgdGhlIGN1cnJlbnQgbWF0Y2gsXG5cdFx0XHQvLyByZXR1cm4gdGhlIHByZXZpb3VzIG9uZSBmb3IgcGVyZm9ybWFuY2UgcmVhc29ucy5cblx0XHRcdGlmIChcblx0XHRcdFx0Y3VycmVudE1hdGNoLmN1cnJlbnQgJiZcblx0XHRcdFx0bmV3TWF0Y2ggJiZcblx0XHRcdFx0aXNTaGFsbG93RXF1YWwoXG5cdFx0XHRcdFx0bmV3TWF0Y2gucGFyYW1zLFxuXHRcdFx0XHRcdGN1cnJlbnRNYXRjaC5jdXJyZW50LnBhcmFtc1xuXHRcdFx0XHQpICYmXG5cdFx0XHRcdG5ld01hdGNoLmlkID09PSBjdXJyZW50TWF0Y2guY3VycmVudC5pZFxuXHRcdFx0KSB7XG5cdFx0XHRcdHJldHVybiBjdXJyZW50TWF0Y2guY3VycmVudDtcblx0XHRcdH1cblxuXHRcdFx0cmV0dXJuIG5ld01hdGNoO1xuXHRcdH07XG5cblx0XHRjb25zdCBuZXdNYXRjaCA9IHJlc29sdmVQYXRoKCBjdXJyZW50UGF0aCApO1xuXHRcdGN1cnJlbnRNYXRjaC5jdXJyZW50ID0gbmV3TWF0Y2g7XG5cdFx0cmV0dXJuIG5ld01hdGNoO1xuXHR9LCBbIHNjcmVlbnMsIGxvY2F0aW9uSGlzdG9yeSBdICk7XG5cblx0Y29uc3QgYWRkU2NyZWVuID0gdXNlQ2FsbGJhY2soXG5cdFx0KCBzY3JlZW46IFNjcmVlbiApID0+IGRpc3BhdGNoKCB7IHR5cGU6ICdhZGQnLCBzY3JlZW4gfSApLFxuXHRcdFtdXG5cdCk7XG5cblx0Y29uc3QgcmVtb3ZlU2NyZWVuID0gdXNlQ2FsbGJhY2soXG5cdFx0KCBzY3JlZW46IFNjcmVlbiApID0+IGRpc3BhdGNoKCB7IHR5cGU6ICdyZW1vdmUnLCBzY3JlZW4gfSApLFxuXHRcdFtdXG5cdCk7XG5cblx0Y29uc3QgZ29CYWNrOiBOYXZpZ2F0b3JDb250ZXh0VHlwZVsgJ2dvQmFjaycgXSA9IHVzZUNhbGxiYWNrKCAoKSA9PiB7XG5cdFx0c2V0TG9jYXRpb25IaXN0b3J5KCAoIHByZXZMb2NhdGlvbkhpc3RvcnkgKSA9PiB7XG5cdFx0XHRpZiAoIHByZXZMb2NhdGlvbkhpc3RvcnkubGVuZ3RoIDw9IDEgKSB7XG5cdFx0XHRcdHJldHVybiBwcmV2TG9jYXRpb25IaXN0b3J5O1xuXHRcdFx0fVxuXHRcdFx0cmV0dXJuIFtcblx0XHRcdFx0Li4ucHJldkxvY2F0aW9uSGlzdG9yeS5zbGljZSggMCwgLTIgKSxcblx0XHRcdFx0e1xuXHRcdFx0XHRcdC4uLnByZXZMb2NhdGlvbkhpc3RvcnlbIHByZXZMb2NhdGlvbkhpc3RvcnkubGVuZ3RoIC0gMiBdLFxuXHRcdFx0XHRcdGlzQmFjazogdHJ1ZSxcblx0XHRcdFx0XHRoYXNSZXN0b3JlZEZvY3VzOiBmYWxzZSxcblx0XHRcdFx0fSxcblx0XHRcdF07XG5cdFx0fSApO1xuXHR9LCBbXSApO1xuXG5cdGNvbnN0IGdvVG86IE5hdmlnYXRvckNvbnRleHRUeXBlWyAnZ29UbycgXSA9IHVzZUNhbGxiYWNrKFxuXHRcdCggcGF0aCwgb3B0aW9ucyA9IHt9ICkgPT4ge1xuXHRcdFx0Y29uc3Qge1xuXHRcdFx0XHRmb2N1c1RhcmdldFNlbGVjdG9yLFxuXHRcdFx0XHRpc0JhY2sgPSBmYWxzZSxcblx0XHRcdFx0c2tpcEZvY3VzID0gZmFsc2UsXG5cdFx0XHRcdC4uLnJlc3RPcHRpb25zXG5cdFx0XHR9ID0gb3B0aW9ucztcblxuXHRcdFx0Y29uc3QgaXNOYXZpZ2F0aW5nVG9QcmV2aW91c1BhdGggPVxuXHRcdFx0XHRpc0JhY2sgJiZcblx0XHRcdFx0Y3VycmVudExvY2F0aW9uSGlzdG9yeS5jdXJyZW50Lmxlbmd0aCA+IDEgJiZcblx0XHRcdFx0Y3VycmVudExvY2F0aW9uSGlzdG9yeS5jdXJyZW50W1xuXHRcdFx0XHRcdGN1cnJlbnRMb2NhdGlvbkhpc3RvcnkuY3VycmVudC5sZW5ndGggLSAyXG5cdFx0XHRcdF0ucGF0aCA9PT0gcGF0aDtcblxuXHRcdFx0aWYgKCBpc05hdmlnYXRpbmdUb1ByZXZpb3VzUGF0aCApIHtcblx0XHRcdFx0Z29CYWNrKCk7XG5cdFx0XHRcdHJldHVybjtcblx0XHRcdH1cblxuXHRcdFx0c2V0TG9jYXRpb25IaXN0b3J5KCAoIHByZXZMb2NhdGlvbkhpc3RvcnkgKSA9PiB7XG5cdFx0XHRcdGNvbnN0IG5ld0xvY2F0aW9uID0ge1xuXHRcdFx0XHRcdC4uLnJlc3RPcHRpb25zLFxuXHRcdFx0XHRcdHBhdGgsXG5cdFx0XHRcdFx0aXNCYWNrLFxuXHRcdFx0XHRcdGhhc1Jlc3RvcmVkRm9jdXM6IGZhbHNlLFxuXHRcdFx0XHRcdHNraXBGb2N1cyxcblx0XHRcdFx0fTtcblxuXHRcdFx0XHRpZiAoIHByZXZMb2NhdGlvbkhpc3RvcnkubGVuZ3RoIDwgMSApIHtcblx0XHRcdFx0XHRyZXR1cm4gWyBuZXdMb2NhdGlvbiBdO1xuXHRcdFx0XHR9XG5cblx0XHRcdFx0cmV0dXJuIFtcblx0XHRcdFx0XHQuLi5wcmV2TG9jYXRpb25IaXN0b3J5LnNsaWNlKFxuXHRcdFx0XHRcdFx0cHJldkxvY2F0aW9uSGlzdG9yeS5sZW5ndGggPiBNQVhfSElTVE9SWV9MRU5HVEggLSAxXG5cdFx0XHRcdFx0XHRcdD8gMVxuXHRcdFx0XHRcdFx0XHQ6IDAsXG5cdFx0XHRcdFx0XHQtMVxuXHRcdFx0XHRcdCksXG5cdFx0XHRcdFx0Ly8gQXNzaWduIGBmb2N1c1RhcmdldFNlbGVjdG9yYCB0byB0aGUgcHJldmlvdXMgbG9jYXRpb24gaW4gaGlzdG9yeVxuXHRcdFx0XHRcdC8vICh0aGUgb25lIHdlIGp1c3QgbmF2aWdhdGVkIGZyb20pLlxuXHRcdFx0XHRcdHtcblx0XHRcdFx0XHRcdC4uLnByZXZMb2NhdGlvbkhpc3RvcnlbXG5cdFx0XHRcdFx0XHRcdHByZXZMb2NhdGlvbkhpc3RvcnkubGVuZ3RoIC0gMVxuXHRcdFx0XHRcdFx0XSxcblx0XHRcdFx0XHRcdGZvY3VzVGFyZ2V0U2VsZWN0b3IsXG5cdFx0XHRcdFx0fSxcblx0XHRcdFx0XHRuZXdMb2NhdGlvbixcblx0XHRcdFx0XTtcblx0XHRcdH0gKTtcblx0XHR9LFxuXHRcdFsgZ29CYWNrIF1cblx0KTtcblxuXHRjb25zdCBnb1RvUGFyZW50OiBOYXZpZ2F0b3JDb250ZXh0VHlwZVsgJ2dvVG9QYXJlbnQnIF0gPVxuXHRcdHVzZUNhbGxiYWNrKCAoKSA9PiB7XG5cdFx0XHRjb25zdCBjdXJyZW50UGF0aCA9XG5cdFx0XHRcdGN1cnJlbnRMb2NhdGlvbkhpc3RvcnkuY3VycmVudFtcblx0XHRcdFx0XHRjdXJyZW50TG9jYXRpb25IaXN0b3J5LmN1cnJlbnQubGVuZ3RoIC0gMVxuXHRcdFx0XHRdLnBhdGg7XG5cdFx0XHRpZiAoIGN1cnJlbnRQYXRoID09PSB1bmRlZmluZWQgKSB7XG5cdFx0XHRcdHJldHVybjtcblx0XHRcdH1cblx0XHRcdGNvbnN0IHBhcmVudFBhdGggPSBmaW5kUGFyZW50KFxuXHRcdFx0XHRjdXJyZW50UGF0aCxcblx0XHRcdFx0Y3VycmVudFNjcmVlbnMuY3VycmVudFxuXHRcdFx0KTtcblx0XHRcdGlmICggcGFyZW50UGF0aCA9PT0gdW5kZWZpbmVkICkge1xuXHRcdFx0XHRyZXR1cm47XG5cdFx0XHR9XG5cdFx0XHRnb1RvKCBwYXJlbnRQYXRoLCB7IGlzQmFjazogdHJ1ZSB9ICk7XG5cdFx0fSwgWyBnb1RvIF0gKTtcblxuXHRjb25zdCBuYXZpZ2F0b3JDb250ZXh0VmFsdWU6IE5hdmlnYXRvckNvbnRleHRUeXBlID0gdXNlTWVtbyhcblx0XHQoKSA9PiAoIHtcblx0XHRcdGxvY2F0aW9uOiB7XG5cdFx0XHRcdC4uLmxvY2F0aW9uSGlzdG9yeVsgbG9jYXRpb25IaXN0b3J5Lmxlbmd0aCAtIDEgXSxcblx0XHRcdFx0aXNJbml0aWFsOiBsb2NhdGlvbkhpc3RvcnkubGVuZ3RoID09PSAxLFxuXHRcdFx0fSxcblx0XHRcdHBhcmFtczogbWF0Y2hlZFBhdGggPyBtYXRjaGVkUGF0aC5wYXJhbXMgOiB7fSxcblx0XHRcdG1hdGNoOiBtYXRjaGVkUGF0aCA/IG1hdGNoZWRQYXRoLmlkIDogdW5kZWZpbmVkLFxuXHRcdFx0Z29Ubyxcblx0XHRcdGdvQmFjayxcblx0XHRcdGdvVG9QYXJlbnQsXG5cdFx0XHRhZGRTY3JlZW4sXG5cdFx0XHRyZW1vdmVTY3JlZW4sXG5cdFx0fSApLFxuXHRcdFtcblx0XHRcdGxvY2F0aW9uSGlzdG9yeSxcblx0XHRcdG1hdGNoZWRQYXRoLFxuXHRcdFx0Z29Ubyxcblx0XHRcdGdvQmFjayxcblx0XHRcdGdvVG9QYXJlbnQsXG5cdFx0XHRhZGRTY3JlZW4sXG5cdFx0XHRyZW1vdmVTY3JlZW4sXG5cdFx0XVxuXHQpO1xuXG5cdGNvbnN0IGN4ID0gdXNlQ3goKTtcblx0Y29uc3QgY2xhc3NlcyA9IHVzZU1lbW8oXG5cdFx0Ly8gUHJldmVudHMgaG9yaXpvbnRhbCBvdmVyZmxvdyB3aGlsZSBhbmltYXRpbmcgc2NyZWVuIHRyYW5zaXRpb25zLlxuXHRcdCgpID0+IGN4KCBjc3MoIHsgb3ZlcmZsb3dYOiAnaGlkZGVuJyB9ICksIGNsYXNzTmFtZSApLFxuXHRcdFsgY2xhc3NOYW1lLCBjeCBdXG5cdCk7XG5cblx0cmV0dXJuIChcblx0XHQ8VmlldyByZWY9eyBmb3J3YXJkZWRSZWYgfSBjbGFzc05hbWU9eyBjbGFzc2VzIH0geyAuLi5vdGhlclByb3BzIH0+XG5cdFx0XHQ8TmF2aWdhdG9yQ29udGV4dC5Qcm92aWRlciB2YWx1ZT17IG5hdmlnYXRvckNvbnRleHRWYWx1ZSB9PlxuXHRcdFx0XHR7IGNoaWxkcmVuIH1cblx0XHRcdDwvTmF2aWdhdG9yQ29udGV4dC5Qcm92aWRlcj5cblx0XHQ8L1ZpZXc+XG5cdCk7XG59XG5cbi8qKlxuICogVGhlIGBOYXZpZ2F0b3JQcm92aWRlcmAgY29tcG9uZW50IGFsbG93cyByZW5kZXJpbmcgbmVzdGVkIHZpZXdzL3BhbmVscy9tZW51c1xuICogKHZpYSB0aGUgYE5hdmlnYXRvclNjcmVlbmAgY29tcG9uZW50IGFuZCBuYXZpZ2F0ZSBiZXR3ZWVuIHRoZXNlIGRpZmZlcmVudFxuICogdmlldyAodmlhIHRoZSBgTmF2aWdhdG9yQnV0dG9uYCBhbmQgYE5hdmlnYXRvckJhY2tCdXR0b25gIGNvbXBvbmVudHMgb3IgdGhlXG4gKiBgdXNlTmF2aWdhdG9yYCBob29rKS5cbiAqXG4gKiBAZXhhbXBsZVxuICogYGBganN4XG4gKiBpbXBvcnQge1xuICogICBfX2V4cGVyaW1lbnRhbE5hdmlnYXRvclByb3ZpZGVyIGFzIE5hdmlnYXRvclByb3ZpZGVyLFxuICogICBfX2V4cGVyaW1lbnRhbE5hdmlnYXRvclNjcmVlbiBhcyBOYXZpZ2F0b3JTY3JlZW4sXG4gKiAgIF9fZXhwZXJpbWVudGFsTmF2aWdhdG9yQnV0dG9uIGFzIE5hdmlnYXRvckJ1dHRvbixcbiAqICAgX19leHBlcmltZW50YWxOYXZpZ2F0b3JCYWNrQnV0dG9uIGFzIE5hdmlnYXRvckJhY2tCdXR0b24sXG4gKiB9IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9uZW50cyc7XG4gKlxuICogY29uc3QgTXlOYXZpZ2F0aW9uID0gKCkgPT4gKFxuICogICA8TmF2aWdhdG9yUHJvdmlkZXIgaW5pdGlhbFBhdGg9XCIvXCI+XG4gKiAgICAgPE5hdmlnYXRvclNjcmVlbiBwYXRoPVwiL1wiPlxuICogICAgICAgPHA+VGhpcyBpcyB0aGUgaG9tZSBzY3JlZW4uPC9wPlxuICogICAgICAgIDxOYXZpZ2F0b3JCdXR0b24gcGF0aD1cIi9jaGlsZFwiPlxuICogICAgICAgICAgTmF2aWdhdGUgdG8gY2hpbGQgc2NyZWVuLlxuICogICAgICAgPC9OYXZpZ2F0b3JCdXR0b24+XG4gKiAgICAgPC9OYXZpZ2F0b3JTY3JlZW4+XG4gKlxuICogICAgIDxOYXZpZ2F0b3JTY3JlZW4gcGF0aD1cIi9jaGlsZFwiPlxuICogICAgICAgPHA+VGhpcyBpcyB0aGUgY2hpbGQgc2NyZWVuLjwvcD5cbiAqICAgICAgIDxOYXZpZ2F0b3JCYWNrQnV0dG9uPlxuICogICAgICAgICBHbyBiYWNrXG4gKiAgICAgICA8L05hdmlnYXRvckJhY2tCdXR0b24+XG4gKiAgICAgPC9OYXZpZ2F0b3JTY3JlZW4+XG4gKiAgIDwvTmF2aWdhdG9yUHJvdmlkZXI+XG4gKiApO1xuICogYGBgXG4gKi9cbmV4cG9ydCBjb25zdCBOYXZpZ2F0b3JQcm92aWRlciA9IGNvbnRleHRDb25uZWN0KFxuXHRVbmNvbm5lY3RlZE5hdmlnYXRvclByb3ZpZGVyLFxuXHQnTmF2aWdhdG9yUHJvdmlkZXInXG4pO1xuXG5leHBvcnQgZGVmYXVsdCBOYXZpZ2F0b3JQcm92aWRlcjtcbiJdfQ== */",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
function UnconnectedNavigatorProvider(props, forwardedRef) {
const {
initialPath,
children,
className,
...otherProps
} = useContextSystem(props, 'NavigatorProvider');
const [locationHistory, setLocationHistory] = useState([{
path: initialPath
}]);
const currentLocationHistory = useRef([]);
const [screens, dispatch] = useReducer(screensReducer, []);
const currentScreens = useRef([]);
useEffect(() => {
currentScreens.current = screens;
}, [screens]);
useEffect(() => {
currentLocationHistory.current = locationHistory;
}, [locationHistory]);
const currentMatch = useRef();
const matchedPath = useMemo(() => {
let currentPath;
if (locationHistory.length === 0 || (currentPath = locationHistory[locationHistory.length - 1].path) === undefined) {
currentMatch.current = undefined;
return undefined;
}
const resolvePath = path => {
const newMatch = patternMatch(path, screens); // If the new match is the same as the current match,
// return the previous one for performance reasons.
if (currentMatch.current && newMatch && isShallowEqual(newMatch.params, currentMatch.current.params) && newMatch.id === currentMatch.current.id) {
return currentMatch.current;
}
return newMatch;
};
const newMatch = resolvePath(currentPath);
currentMatch.current = newMatch;
return newMatch;
}, [screens, locationHistory]);
const addScreen = useCallback(screen => dispatch({
type: 'add',
screen
}), []);
const removeScreen = useCallback(screen => dispatch({
type: 'remove',
screen
}), []);
const goBack = useCallback(() => {
setLocationHistory(prevLocationHistory => {
if (prevLocationHistory.length <= 1) {
return prevLocationHistory;
}
return [...prevLocationHistory.slice(0, -2), { ...prevLocationHistory[prevLocationHistory.length - 2],
isBack: true,
hasRestoredFocus: false
}];
});
}, []);
const goTo = useCallback(function (path) {
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
const {
focusTargetSelector,
isBack = false,
skipFocus = false,
...restOptions
} = options;
const isNavigatingToPreviousPath = isBack && currentLocationHistory.current.length > 1 && currentLocationHistory.current[currentLocationHistory.current.length - 2].path === path;
if (isNavigatingToPreviousPath) {
goBack();
return;
}
setLocationHistory(prevLocationHistory => {
const newLocation = { ...restOptions,
path,
isBack,
hasRestoredFocus: false,
skipFocus
};
if (prevLocationHistory.length < 1) {
return [newLocation];
}
return [...prevLocationHistory.slice(prevLocationHistory.length > MAX_HISTORY_LENGTH - 1 ? 1 : 0, -1), // Assign `focusTargetSelector` to the previous location in history
// (the one we just navigated from).
{ ...prevLocationHistory[prevLocationHistory.length - 1],
focusTargetSelector
}, newLocation];
});
}, [goBack]);
const goToParent = useCallback(() => {
const currentPath = currentLocationHistory.current[currentLocationHistory.current.length - 1].path;
if (currentPath === undefined) {
return;
}
const parentPath = findParent(currentPath, currentScreens.current);
if (parentPath === undefined) {
return;
}
goTo(parentPath, {
isBack: true
});
}, [goTo]);
const navigatorContextValue = useMemo(() => ({
location: { ...locationHistory[locationHistory.length - 1],
isInitial: locationHistory.length === 1
},
params: matchedPath ? matchedPath.params : {},
match: matchedPath ? matchedPath.id : undefined,
goTo,
goBack,
goToParent,
addScreen,
removeScreen
}), [locationHistory, matchedPath, goTo, goBack, goToParent, addScreen, removeScreen]);
const cx = useCx();
const classes = useMemo( // Prevents horizontal overflow while animating screen transitions.
() => cx(_ref, className), [className, cx]);
return createElement(View, _extends({
ref: forwardedRef,
className: classes
}, otherProps), createElement(NavigatorContext.Provider, {
value: navigatorContextValue
}, children));
}
/**
* The `NavigatorProvider` component allows rendering nested views/panels/menus
* (via the `NavigatorScreen` component and navigate between these different
* view (via the `NavigatorButton` and `NavigatorBackButton` components or the
* `useNavigator` hook).
*
* @example
* ```jsx
* import {
* __experimentalNavigatorProvider as NavigatorProvider,
* __experimentalNavigatorScreen as NavigatorScreen,
* __experimentalNavigatorButton as NavigatorButton,
* __experimentalNavigatorBackButton as NavigatorBackButton,
* } from '@wordpress/components';
*
* const MyNavigation = () => (
* <NavigatorProvider initialPath="/">
* <NavigatorScreen path="/">
* <p>This is the home screen.</p>
* <NavigatorButton path="/child">
* Navigate to child screen.
* </NavigatorButton>
* </NavigatorScreen>
*
* <NavigatorScreen path="/child">
* <p>This is the child screen.</p>
* <NavigatorBackButton>
* Go back
* </NavigatorBackButton>
* </NavigatorScreen>
* </NavigatorProvider>
* );
* ```
*/
export const NavigatorProvider = contextConnect(UnconnectedNavigatorProvider, 'NavigatorProvider');
export default NavigatorProvider;
//# sourceMappingURL=component.js.map