fix: prevent asset conflicts between React and Grid.js versions

Add coexistence checks to all enqueue methods to prevent loading
both React and Grid.js assets simultaneously.

Changes:
- ReactAdmin.php: Only enqueue React assets when ?react=1
- Init.php: Skip Grid.js when React active on admin pages
- Form.php, Coupon.php, Access.php: Restore classic assets when ?react=0
- Customer.php, Product.php, License.php: Add coexistence checks

Now the toggle between Classic and React versions works correctly.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
dwindown
2026-04-18 17:02:14 +07:00
parent bd9cdac02e
commit e8fbfb14c1
74973 changed files with 6658406 additions and 71 deletions

View File

@@ -0,0 +1,64 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.NavigationBackButton = void 0;
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _context = require("../context");
var _navigationStyles = require("../styles/navigation-styles");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function UnforwardedNavigationBackButton({
backButtonLabel,
className,
href,
onClick,
parentMenu
}, ref) {
const {
setActiveMenu,
navigationTree
} = (0, _context.useNavigationContext)();
const classes = (0, _classnames.default)('components-navigation__back-button', className);
const parentMenuTitle = parentMenu !== undefined ? navigationTree.getMenu(parentMenu)?.title : undefined;
const handleOnClick = event => {
if (typeof onClick === 'function') {
onClick(event);
}
const animationDirection = (0, _i18n.isRTL)() ? 'left' : 'right';
if (parentMenu && !event.defaultPrevented) {
setActiveMenu(parentMenu, animationDirection);
}
};
const icon = (0, _i18n.isRTL)() ? _icons.chevronRight : _icons.chevronLeft;
return (0, _react.createElement)(_navigationStyles.MenuBackButtonUI, {
className: classes,
href: href,
variant: "tertiary",
ref: ref,
onClick: handleOnClick
}, (0, _react.createElement)(_icons.Icon, {
icon: icon
}), backButtonLabel || parentMenuTitle || (0, _i18n.__)('Back'));
}
const NavigationBackButton = (0, _element.forwardRef)(UnforwardedNavigationBackButton);
exports.NavigationBackButton = NavigationBackButton;
var _default = NavigationBackButton;
exports.default = _default;
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_classnames","_interopRequireDefault","require","_element","_i18n","_icons","_context","_navigationStyles","UnforwardedNavigationBackButton","backButtonLabel","className","href","onClick","parentMenu","ref","setActiveMenu","navigationTree","useNavigationContext","classes","classnames","parentMenuTitle","undefined","getMenu","title","handleOnClick","event","animationDirection","isRTL","defaultPrevented","icon","chevronRight","chevronLeft","_react","createElement","MenuBackButtonUI","variant","Icon","__","NavigationBackButton","forwardRef","exports","_default","default"],"sources":["@wordpress/components/src/navigation/back-button/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { __, isRTL } from '@wordpress/i18n';\nimport { Icon, chevronLeft, chevronRight } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { useNavigationContext } from '../context';\nimport { MenuBackButtonUI } from '../styles/navigation-styles';\n\nimport type { NavigationBackButtonProps } from '../types';\n\nfunction UnforwardedNavigationBackButton(\n\t{\n\t\tbackButtonLabel,\n\t\tclassName,\n\t\thref,\n\t\tonClick,\n\t\tparentMenu,\n\t}: NavigationBackButtonProps,\n\tref: React.ForwardedRef< HTMLAnchorElement | HTMLButtonElement >\n) {\n\tconst { setActiveMenu, navigationTree } = useNavigationContext();\n\n\tconst classes = classnames(\n\t\t'components-navigation__back-button',\n\t\tclassName\n\t);\n\n\tconst parentMenuTitle =\n\t\tparentMenu !== undefined\n\t\t\t? navigationTree.getMenu( parentMenu )?.title\n\t\t\t: undefined;\n\n\tconst handleOnClick: React.MouseEventHandler< HTMLElement > = ( event ) => {\n\t\tif ( typeof onClick === 'function' ) {\n\t\t\tonClick( event );\n\t\t}\n\n\t\tconst animationDirection = isRTL() ? 'left' : 'right';\n\t\tif ( parentMenu && ! event.defaultPrevented ) {\n\t\t\tsetActiveMenu( parentMenu, animationDirection );\n\t\t}\n\t};\n\tconst icon = isRTL() ? chevronRight : chevronLeft;\n\treturn (\n\t\t<MenuBackButtonUI\n\t\t\tclassName={ classes }\n\t\t\thref={ href }\n\t\t\tvariant=\"tertiary\"\n\t\t\tref={ ref }\n\t\t\tonClick={ handleOnClick }\n\t\t>\n\t\t\t<Icon icon={ icon } />\n\t\t\t{ backButtonLabel || parentMenuTitle || __( 'Back' ) }\n\t\t</MenuBackButtonUI>\n\t);\n}\n\nexport const NavigationBackButton = forwardRef(\n\tUnforwardedNavigationBackButton\n);\n\nexport default NavigationBackButton;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAIA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAKA,IAAAI,QAAA,GAAAJ,OAAA;AACA,IAAAK,iBAAA,GAAAL,OAAA;AAfA;AACA;AACA;;AAEA;AACA;AACA;;AAKA;AACA;AACA;;AAMA,SAASM,+BAA+BA,CACvC;EACCC,eAAe;EACfC,SAAS;EACTC,IAAI;EACJC,OAAO;EACPC;AAC0B,CAAC,EAC5BC,GAAgE,EAC/D;EACD,MAAM;IAAEC,aAAa;IAAEC;EAAe,CAAC,GAAG,IAAAC,6BAAoB,EAAC,CAAC;EAEhE,MAAMC,OAAO,GAAG,IAAAC,mBAAU,EACzB,oCAAoC,EACpCT,SACD,CAAC;EAED,MAAMU,eAAe,GACpBP,UAAU,KAAKQ,SAAS,GACrBL,cAAc,CAACM,OAAO,CAAET,UAAW,CAAC,EAAEU,KAAK,GAC3CF,SAAS;EAEb,MAAMG,aAAqD,GAAKC,KAAK,IAAM;IAC1E,IAAK,OAAOb,OAAO,KAAK,UAAU,EAAG;MACpCA,OAAO,CAAEa,KAAM,CAAC;IACjB;IAEA,MAAMC,kBAAkB,GAAG,IAAAC,WAAK,EAAC,CAAC,GAAG,MAAM,GAAG,OAAO;IACrD,IAAKd,UAAU,IAAI,CAAEY,KAAK,CAACG,gBAAgB,EAAG;MAC7Cb,aAAa,CAAEF,UAAU,EAAEa,kBAAmB,CAAC;IAChD;EACD,CAAC;EACD,MAAMG,IAAI,GAAG,IAAAF,WAAK,EAAC,CAAC,GAAGG,mBAAY,GAAGC,kBAAW;EACjD,OACC,IAAAC,MAAA,CAAAC,aAAA,EAAC1B,iBAAA,CAAA2B,gBAAgB;IAChBxB,SAAS,EAAGQ,OAAS;IACrBP,IAAI,EAAGA,IAAM;IACbwB,OAAO,EAAC,UAAU;IAClBrB,GAAG,EAAGA,GAAK;IACXF,OAAO,EAAGY;EAAe,GAEzB,IAAAQ,MAAA,CAAAC,aAAA,EAAC5B,MAAA,CAAA+B,IAAI;IAACP,IAAI,EAAGA;EAAM,CAAE,CAAC,EACpBpB,eAAe,IAAIW,eAAe,IAAI,IAAAiB,QAAE,EAAE,MAAO,CAClC,CAAC;AAErB;AAEO,MAAMC,oBAAoB,GAAG,IAAAC,mBAAU,EAC7C/B,+BACD,CAAC;AAACgC,OAAA,CAAAF,oBAAA,GAAAA,oBAAA;AAAA,IAAAG,QAAA,GAEaH,oBAAoB;AAAAE,OAAA,CAAAE,OAAA,GAAAD,QAAA"}

View File

@@ -0,0 +1,11 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SEARCH_FOCUS_DELAY = exports.ROOT_MENU = void 0;
const ROOT_MENU = 'root';
exports.ROOT_MENU = ROOT_MENU;
const SEARCH_FOCUS_DELAY = 100;
exports.SEARCH_FOCUS_DELAY = SEARCH_FOCUS_DELAY;
//# sourceMappingURL=constants.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["ROOT_MENU","exports","SEARCH_FOCUS_DELAY"],"sources":["@wordpress/components/src/navigation/constants.tsx"],"sourcesContent":["export const ROOT_MENU = 'root';\nexport const SEARCH_FOCUS_DELAY = 100;\n"],"mappings":";;;;;;AAAO,MAAMA,SAAS,GAAG,MAAM;AAACC,OAAA,CAAAD,SAAA,GAAAA,SAAA;AACzB,MAAME,kBAAkB,GAAG,GAAG;AAACD,OAAA,CAAAC,kBAAA,GAAAA,kBAAA"}

View File

@@ -0,0 +1,41 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useNavigationContext = exports.NavigationContext = void 0;
var _element = require("@wordpress/element");
var _constants = require("./constants");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const noop = () => {};
const defaultIsEmpty = () => false;
const defaultGetter = () => undefined;
const NavigationContext = (0, _element.createContext)({
activeItem: undefined,
activeMenu: _constants.ROOT_MENU,
setActiveMenu: noop,
navigationTree: {
items: {},
getItem: defaultGetter,
addItem: noop,
removeItem: noop,
menus: {},
getMenu: defaultGetter,
addMenu: noop,
removeMenu: noop,
childMenu: {},
traverseMenu: noop,
isMenuEmpty: defaultIsEmpty
}
});
exports.NavigationContext = NavigationContext;
const useNavigationContext = () => (0, _element.useContext)(NavigationContext);
exports.useNavigationContext = useNavigationContext;
//# sourceMappingURL=context.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_element","require","_constants","noop","defaultIsEmpty","defaultGetter","undefined","NavigationContext","createContext","activeItem","activeMenu","ROOT_MENU","setActiveMenu","navigationTree","items","getItem","addItem","removeItem","menus","getMenu","addMenu","removeMenu","childMenu","traverseMenu","isMenuEmpty","exports","useNavigationContext","useContext"],"sources":["@wordpress/components/src/navigation/context.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ROOT_MENU } from './constants';\n\nimport type { NavigationContext as NavigationContextType } from './types';\n\nconst noop = () => {};\nconst defaultIsEmpty = () => false;\nconst defaultGetter = () => undefined;\n\nexport const NavigationContext = createContext< NavigationContextType >( {\n\tactiveItem: undefined,\n\tactiveMenu: ROOT_MENU,\n\tsetActiveMenu: noop,\n\n\tnavigationTree: {\n\t\titems: {},\n\t\tgetItem: defaultGetter,\n\t\taddItem: noop,\n\t\tremoveItem: noop,\n\n\t\tmenus: {},\n\t\tgetMenu: defaultGetter,\n\t\taddMenu: noop,\n\t\tremoveMenu: noop,\n\t\tchildMenu: {},\n\t\ttraverseMenu: noop,\n\t\tisMenuEmpty: defaultIsEmpty,\n\t},\n} );\nexport const useNavigationContext = () => useContext( NavigationContext );\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,UAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAKA,MAAME,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AACrB,MAAMC,cAAc,GAAGA,CAAA,KAAM,KAAK;AAClC,MAAMC,aAAa,GAAGA,CAAA,KAAMC,SAAS;AAE9B,MAAMC,iBAAiB,GAAG,IAAAC,sBAAa,EAA2B;EACxEC,UAAU,EAAEH,SAAS;EACrBI,UAAU,EAAEC,oBAAS;EACrBC,aAAa,EAAET,IAAI;EAEnBU,cAAc,EAAE;IACfC,KAAK,EAAE,CAAC,CAAC;IACTC,OAAO,EAAEV,aAAa;IACtBW,OAAO,EAAEb,IAAI;IACbc,UAAU,EAAEd,IAAI;IAEhBe,KAAK,EAAE,CAAC,CAAC;IACTC,OAAO,EAAEd,aAAa;IACtBe,OAAO,EAAEjB,IAAI;IACbkB,UAAU,EAAElB,IAAI;IAChBmB,SAAS,EAAE,CAAC,CAAC;IACbC,YAAY,EAAEpB,IAAI;IAClBqB,WAAW,EAAEpB;EACd;AACD,CAAE,CAAC;AAACqB,OAAA,CAAAlB,iBAAA,GAAAA,iBAAA;AACG,MAAMmB,oBAAoB,GAAGA,CAAA,KAAM,IAAAC,mBAAU,EAAEpB,iBAAkB,CAAC;AAACkB,OAAA,CAAAC,oBAAA,GAAAA,oBAAA"}

View File

@@ -0,0 +1,18 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useNavigationGroupContext = exports.NavigationGroupContext = void 0;
var _element = require("@wordpress/element");
/**
* WordPress dependencies
*/
const NavigationGroupContext = (0, _element.createContext)({
group: undefined
});
exports.NavigationGroupContext = NavigationGroupContext;
const useNavigationGroupContext = () => (0, _element.useContext)(NavigationGroupContext);
exports.useNavigationGroupContext = useNavigationGroupContext;
//# sourceMappingURL=context.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_element","require","NavigationGroupContext","createContext","group","undefined","exports","useNavigationGroupContext","useContext"],"sources":["@wordpress/components/src/navigation/group/context.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { NavigationGroupContext as NavigationGroupContextType } from '../types';\n\nexport const NavigationGroupContext =\n\tcreateContext< NavigationGroupContextType >( { group: undefined } );\n\nexport const useNavigationGroupContext = () =>\n\tuseContext( NavigationGroupContext );\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAQO,MAAMC,sBAAsB,GAClC,IAAAC,sBAAa,EAAgC;EAAEC,KAAK,EAAEC;AAAU,CAAE,CAAC;AAACC,OAAA,CAAAJ,sBAAA,GAAAA,sBAAA;AAE9D,MAAMK,yBAAyB,GAAGA,CAAA,KACxC,IAAAC,mBAAU,EAAEN,sBAAuB,CAAC;AAACI,OAAA,CAAAC,yBAAA,GAAAA,yBAAA"}

View File

@@ -0,0 +1,66 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.NavigationGroup = NavigationGroup;
exports.default = void 0;
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _element = require("@wordpress/element");
var _context = require("./context");
var _navigationStyles = require("../styles/navigation-styles");
var _context2 = require("../context");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
let uniqueId = 0;
function NavigationGroup({
children,
className,
title
}) {
const [groupId] = (0, _element.useState)(`group-${++uniqueId}`);
const {
navigationTree: {
items
}
} = (0, _context2.useNavigationContext)();
const context = {
group: groupId
};
// Keep the children rendered to make sure invisible items are included in the navigation tree.
if (!Object.values(items).some(item => item.group === groupId && item._isVisible)) {
return (0, _react.createElement)(_context.NavigationGroupContext.Provider, {
value: context
}, children);
}
const groupTitleId = `components-navigation__group-title-${groupId}`;
const classes = (0, _classnames.default)('components-navigation__group', className);
return (0, _react.createElement)(_context.NavigationGroupContext.Provider, {
value: context
}, (0, _react.createElement)("li", {
className: classes
}, title && (0, _react.createElement)(_navigationStyles.GroupTitleUI, {
className: "components-navigation__group-title",
id: groupTitleId,
level: 3
}, title), (0, _react.createElement)("ul", {
"aria-labelledby": groupTitleId,
role: "group"
}, children)));
}
var _default = NavigationGroup;
exports.default = _default;
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_classnames","_interopRequireDefault","require","_element","_context","_navigationStyles","_context2","uniqueId","NavigationGroup","children","className","title","groupId","useState","navigationTree","items","useNavigationContext","context","group","Object","values","some","item","_isVisible","_react","createElement","NavigationGroupContext","Provider","value","groupTitleId","classes","classnames","GroupTitleUI","id","level","role","_default","exports","default"],"sources":["@wordpress/components/src/navigation/group/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { NavigationGroupContext } from './context';\nimport { GroupTitleUI } from '../styles/navigation-styles';\nimport { useNavigationContext } from '../context';\n\nimport type { NavigationGroupProps } from '../types';\n\nlet uniqueId = 0;\n\nexport function NavigationGroup( {\n\tchildren,\n\tclassName,\n\ttitle,\n}: NavigationGroupProps ) {\n\tconst [ groupId ] = useState( `group-${ ++uniqueId }` );\n\tconst {\n\t\tnavigationTree: { items },\n\t} = useNavigationContext();\n\n\tconst context = { group: groupId };\n\n\t// Keep the children rendered to make sure invisible items are included in the navigation tree.\n\tif (\n\t\t! Object.values( items ).some(\n\t\t\t( item ) => item.group === groupId && item._isVisible\n\t\t)\n\t) {\n\t\treturn (\n\t\t\t<NavigationGroupContext.Provider value={ context }>\n\t\t\t\t{ children }\n\t\t\t</NavigationGroupContext.Provider>\n\t\t);\n\t}\n\n\tconst groupTitleId = `components-navigation__group-title-${ groupId }`;\n\tconst classes = classnames( 'components-navigation__group', className );\n\n\treturn (\n\t\t<NavigationGroupContext.Provider value={ context }>\n\t\t\t<li className={ classes }>\n\t\t\t\t{ title && (\n\t\t\t\t\t<GroupTitleUI\n\t\t\t\t\t\tclassName=\"components-navigation__group-title\"\n\t\t\t\t\t\tid={ groupTitleId }\n\t\t\t\t\t\tlevel={ 3 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ title }\n\t\t\t\t\t</GroupTitleUI>\n\t\t\t\t) }\n\t\t\t\t<ul aria-labelledby={ groupTitleId } role=\"group\">\n\t\t\t\t\t{ children }\n\t\t\t\t</ul>\n\t\t\t</li>\n\t\t</NavigationGroupContext.Provider>\n\t);\n}\n\nexport default NavigationGroup;\n"],"mappings":";;;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAOA,IAAIK,QAAQ,GAAG,CAAC;AAET,SAASC,eAAeA,CAAE;EAChCC,QAAQ;EACRC,SAAS;EACTC;AACqB,CAAC,EAAG;EACzB,MAAM,CAAEC,OAAO,CAAE,GAAG,IAAAC,iBAAQ,EAAG,SAAS,EAAEN,QAAU,EAAE,CAAC;EACvD,MAAM;IACLO,cAAc,EAAE;MAAEC;IAAM;EACzB,CAAC,GAAG,IAAAC,8BAAoB,EAAC,CAAC;EAE1B,MAAMC,OAAO,GAAG;IAAEC,KAAK,EAAEN;EAAQ,CAAC;;EAElC;EACA,IACC,CAAEO,MAAM,CAACC,MAAM,CAAEL,KAAM,CAAC,CAACM,IAAI,CAC1BC,IAAI,IAAMA,IAAI,CAACJ,KAAK,KAAKN,OAAO,IAAIU,IAAI,CAACC,UAC5C,CAAC,EACA;IACD,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACrB,QAAA,CAAAsB,sBAAsB,CAACC,QAAQ;MAACC,KAAK,EAAGX;IAAS,GAC/CR,QAC8B,CAAC;EAEpC;EAEA,MAAMoB,YAAY,GAAI,sCAAsCjB,OAAS,EAAC;EACtE,MAAMkB,OAAO,GAAG,IAAAC,mBAAU,EAAE,8BAA8B,EAAErB,SAAU,CAAC;EAEvE,OACC,IAAAc,MAAA,CAAAC,aAAA,EAACrB,QAAA,CAAAsB,sBAAsB,CAACC,QAAQ;IAACC,KAAK,EAAGX;EAAS,GACjD,IAAAO,MAAA,CAAAC,aAAA;IAAIf,SAAS,EAAGoB;EAAS,GACtBnB,KAAK,IACN,IAAAa,MAAA,CAAAC,aAAA,EAACpB,iBAAA,CAAA2B,YAAY;IACZtB,SAAS,EAAC,oCAAoC;IAC9CuB,EAAE,EAAGJ,YAAc;IACnBK,KAAK,EAAG;EAAG,GAETvB,KACW,CACd,EACD,IAAAa,MAAA,CAAAC,aAAA;IAAI,mBAAkBI,YAAc;IAACM,IAAI,EAAC;EAAO,GAC9C1B,QACC,CACD,CAC4B,CAAC;AAEpC;AAAC,IAAA2B,QAAA,GAEc5B,eAAe;AAAA6B,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

View File

@@ -0,0 +1,131 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Navigation = Navigation;
exports.default = void 0;
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _animate = require("../animate");
var _constants = require("./constants");
var _context = require("./context");
var _navigationStyles = require("./styles/navigation-styles");
var _useCreateNavigationTree = require("./use-create-navigation-tree");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const noop = () => {};
/**
* Render a navigation list with optional groupings and hierarchy.
*
* ```jsx
* import {
* __experimentalNavigation as Navigation,
* __experimentalNavigationGroup as NavigationGroup,
* __experimentalNavigationItem as NavigationItem,
* __experimentalNavigationMenu as NavigationMenu,
* } from '@wordpress/components';
*
* const MyNavigation = () => (
* <Navigation>
* <NavigationMenu title="Home">
* <NavigationGroup title="Group 1">
* <NavigationItem item="item-1" title="Item 1" />
* <NavigationItem item="item-2" title="Item 2" />
* </NavigationGroup>
* <NavigationGroup title="Group 2">
* <NavigationItem
* item="item-3"
* navigateToMenu="category"
* title="Category"
* />
* </NavigationGroup>
* </NavigationMenu>
*
* <NavigationMenu
* backButtonLabel="Home"
* menu="category"
* parentMenu="root"
* title="Category"
* >
* <NavigationItem badge="1" item="child-1" title="Child 1" />
* <NavigationItem item="child-2" title="Child 2" />
* </NavigationMenu>
* </Navigation>
* );
* ```
*/
function Navigation({
activeItem,
activeMenu = _constants.ROOT_MENU,
children,
className,
onActivateMenu = noop
}) {
const [menu, setMenu] = (0, _element.useState)(activeMenu);
const [slideOrigin, setSlideOrigin] = (0, _element.useState)();
const navigationTree = (0, _useCreateNavigationTree.useCreateNavigationTree)();
const defaultSlideOrigin = (0, _i18n.isRTL)() ? 'right' : 'left';
const setActiveMenu = (menuId, slideInOrigin = defaultSlideOrigin) => {
if (!navigationTree.getMenu(menuId)) {
return;
}
setSlideOrigin(slideInOrigin);
setMenu(menuId);
onActivateMenu(menuId);
};
// Used to prevent the sliding animation on mount
const isMounted = (0, _element.useRef)(false);
(0, _element.useEffect)(() => {
if (!isMounted.current) {
isMounted.current = true;
}
}, []);
(0, _element.useEffect)(() => {
if (activeMenu !== menu) {
setActiveMenu(activeMenu);
}
// Ignore exhaustive-deps here, as it would require either a larger refactor or some questionable workarounds.
// See https://github.com/WordPress/gutenberg/pull/41612 for context.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [activeMenu]);
const context = {
activeItem,
activeMenu: menu,
setActiveMenu,
navigationTree
};
const classes = (0, _classnames.default)('components-navigation', className);
const animateClassName = (0, _animate.getAnimateClassName)({
type: 'slide-in',
origin: slideOrigin
});
return (0, _react.createElement)(_navigationStyles.NavigationUI, {
className: classes
}, (0, _react.createElement)("div", {
key: menu,
className: animateClassName ? (0, _classnames.default)({
[animateClassName]: isMounted.current && slideOrigin
}) : undefined
}, (0, _react.createElement)(_context.NavigationContext.Provider, {
value: context
}, children)));
}
var _default = Navigation;
exports.default = _default;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,25 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = NavigationItemBaseContent;
var _react = require("react");
var _navigationStyles = require("../styles/navigation-styles");
/**
* Internal dependencies
*/
function NavigationItemBaseContent(props) {
const {
badge,
title
} = props;
return (0, _react.createElement)(_react.Fragment, null, title && (0, _react.createElement)(_navigationStyles.ItemTitleUI, {
className: "components-navigation__item-title",
as: "span"
}, title), badge && (0, _react.createElement)(_navigationStyles.ItemBadgeUI, {
className: "components-navigation__item-badge"
}, badge));
}
//# sourceMappingURL=base-content.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_navigationStyles","require","NavigationItemBaseContent","props","badge","title","_react","createElement","Fragment","ItemTitleUI","className","as","ItemBadgeUI"],"sources":["@wordpress/components/src/navigation/item/base-content.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { ItemBadgeUI, ItemTitleUI } from '../styles/navigation-styles';\n\nimport type { NavigationItemBaseContentProps } from '../types';\n\nexport default function NavigationItemBaseContent(\n\tprops: NavigationItemBaseContentProps\n) {\n\tconst { badge, title } = props;\n\n\treturn (\n\t\t<>\n\t\t\t{ title && (\n\t\t\t\t<ItemTitleUI\n\t\t\t\t\tclassName=\"components-navigation__item-title\"\n\t\t\t\t\tas=\"span\"\n\t\t\t\t>\n\t\t\t\t\t{ title }\n\t\t\t\t</ItemTitleUI>\n\t\t\t) }\n\n\t\t\t{ badge && (\n\t\t\t\t<ItemBadgeUI className=\"components-navigation__item-badge\">\n\t\t\t\t\t{ badge }\n\t\t\t\t</ItemBadgeUI>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,iBAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAKe,SAASC,yBAAyBA,CAChDC,KAAqC,EACpC;EACD,MAAM;IAAEC,KAAK;IAAEC;EAAM,CAAC,GAAGF,KAAK;EAE9B,OACC,IAAAG,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAE,QAAA,QACGH,KAAK,IACN,IAAAC,MAAA,CAAAC,aAAA,EAACP,iBAAA,CAAAS,WAAW;IACXC,SAAS,EAAC,mCAAmC;IAC7CC,EAAE,EAAC;EAAM,GAEPN,KACU,CACb,EAECD,KAAK,IACN,IAAAE,MAAA,CAAAC,aAAA,EAACP,iBAAA,CAAAY,WAAW;IAACF,SAAS,EAAC;EAAmC,GACvDN,KACU,CAEb,CAAC;AAEL"}

View File

@@ -0,0 +1,50 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = NavigationItemBase;
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _element = require("@wordpress/element");
var _context = require("../context");
var _useNavigationTreeItem = require("./use-navigation-tree-item");
var _navigationStyles = require("../styles/navigation-styles");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
let uniqueId = 0;
function NavigationItemBase(props) {
// Also avoid to pass the `title` and `href` props to the ItemBaseUI styled component.
const {
children,
className,
title,
href,
...restProps
} = props;
const [itemId] = (0, _element.useState)(`item-${++uniqueId}`);
(0, _useNavigationTreeItem.useNavigationTreeItem)(itemId, props);
const {
navigationTree
} = (0, _context.useNavigationContext)();
if (!navigationTree.getItem(itemId)?._isVisible) {
return null;
}
const classes = (0, _classnames.default)('components-navigation__item', className);
return (0, _react.createElement)(_navigationStyles.ItemBaseUI, {
className: classes,
...restProps
}, children);
}
//# sourceMappingURL=base.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_classnames","_interopRequireDefault","require","_element","_context","_useNavigationTreeItem","_navigationStyles","uniqueId","NavigationItemBase","props","children","className","title","href","restProps","itemId","useState","useNavigationTreeItem","navigationTree","useNavigationContext","getItem","_isVisible","classes","classnames","_react","createElement","ItemBaseUI"],"sources":["@wordpress/components/src/navigation/item/base.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useNavigationContext } from '../context';\nimport { useNavigationTreeItem } from './use-navigation-tree-item';\nimport { ItemBaseUI } from '../styles/navigation-styles';\n\nimport type { NavigationItemBaseProps } from '../types';\n\nlet uniqueId = 0;\n\nexport default function NavigationItemBase( props: NavigationItemBaseProps ) {\n\t// Also avoid to pass the `title` and `href` props to the ItemBaseUI styled component.\n\tconst { children, className, title, href, ...restProps } = props;\n\n\tconst [ itemId ] = useState( `item-${ ++uniqueId }` );\n\n\tuseNavigationTreeItem( itemId, props );\n\tconst { navigationTree } = useNavigationContext();\n\n\tif ( ! navigationTree.getItem( itemId )?._isVisible ) {\n\t\treturn null;\n\t}\n\n\tconst classes = classnames( 'components-navigation__item', className );\n\n\treturn (\n\t\t<ItemBaseUI className={ classes } { ...restProps }>\n\t\t\t{ children }\n\t\t</ItemBaseUI>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,sBAAA,GAAAH,OAAA;AACA,IAAAI,iBAAA,GAAAJ,OAAA;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAOA,IAAIK,QAAQ,GAAG,CAAC;AAED,SAASC,kBAAkBA,CAAEC,KAA8B,EAAG;EAC5E;EACA,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,KAAK;IAAEC,IAAI;IAAE,GAAGC;EAAU,CAAC,GAAGL,KAAK;EAEhE,MAAM,CAAEM,MAAM,CAAE,GAAG,IAAAC,iBAAQ,EAAG,QAAQ,EAAET,QAAU,EAAE,CAAC;EAErD,IAAAU,4CAAqB,EAAEF,MAAM,EAAEN,KAAM,CAAC;EACtC,MAAM;IAAES;EAAe,CAAC,GAAG,IAAAC,6BAAoB,EAAC,CAAC;EAEjD,IAAK,CAAED,cAAc,CAACE,OAAO,CAAEL,MAAO,CAAC,EAAEM,UAAU,EAAG;IACrD,OAAO,IAAI;EACZ;EAEA,MAAMC,OAAO,GAAG,IAAAC,mBAAU,EAAE,6BAA6B,EAAEZ,SAAU,CAAC;EAEtE,OACC,IAAAa,MAAA,CAAAC,aAAA,EAACnB,iBAAA,CAAAoB,UAAU;IAACf,SAAS,EAAGW,OAAS;IAAA,GAAMR;EAAS,GAC7CJ,QACS,CAAC;AAEf"}

View File

@@ -0,0 +1,98 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.NavigationItem = NavigationItem;
exports.default = void 0;
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _icons = require("@wordpress/icons");
var _i18n = require("@wordpress/i18n");
var _button = _interopRequireDefault(require("../../button"));
var _context = require("../context");
var _navigationStyles = require("../styles/navigation-styles");
var _baseContent = _interopRequireDefault(require("./base-content"));
var _base = _interopRequireDefault(require("./base"));
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const noop = () => {};
function NavigationItem(props) {
const {
badge,
children,
className,
href,
item,
navigateToMenu,
onClick = noop,
title,
icon,
hideIfTargetMenuEmpty,
isText,
...restProps
} = props;
const {
activeItem,
setActiveMenu,
navigationTree: {
isMenuEmpty
}
} = (0, _context.useNavigationContext)();
// If hideIfTargetMenuEmpty prop is true
// And the menu we are supposed to navigate to
// Is marked as empty, then we skip rendering the item.
if (hideIfTargetMenuEmpty && navigateToMenu && isMenuEmpty(navigateToMenu)) {
return null;
}
const isActive = item && activeItem === item;
const classes = (0, _classnames.default)(className, {
'is-active': isActive
});
const onItemClick = event => {
if (navigateToMenu) {
setActiveMenu(navigateToMenu);
}
onClick(event);
};
const navigationIcon = (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight;
const baseProps = children ? props : {
...props,
onClick: undefined
};
const itemProps = isText ? restProps : {
as: _button.default,
href,
onClick: onItemClick,
'aria-current': isActive ? 'page' : undefined,
...restProps
};
return (0, _react.createElement)(_base.default, {
...baseProps,
className: classes
}, children || (0, _react.createElement)(_navigationStyles.ItemUI, {
...itemProps
}, icon && (0, _react.createElement)(_navigationStyles.ItemIconUI, null, (0, _react.createElement)(_icons.Icon, {
icon: icon
})), (0, _react.createElement)(_baseContent.default, {
title: title,
badge: badge
}), navigateToMenu && (0, _react.createElement)(_icons.Icon, {
icon: navigationIcon
})));
}
var _default = NavigationItem;
exports.default = _default;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,52 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useNavigationTreeItem = void 0;
var _element = require("@wordpress/element");
var _context = require("../context");
var _context2 = require("../group/context");
var _context3 = require("../menu/context");
var _utils = require("../utils");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const useNavigationTreeItem = (itemId, props) => {
const {
activeMenu,
navigationTree: {
addItem,
removeItem
}
} = (0, _context.useNavigationContext)();
const {
group
} = (0, _context2.useNavigationGroupContext)();
const {
menu,
search
} = (0, _context3.useNavigationMenuContext)();
(0, _element.useEffect)(() => {
const isMenuActive = activeMenu === menu;
const isItemVisible = !search || props.title !== undefined && (0, _utils.normalizedSearch)(props.title, search);
addItem(itemId, {
...props,
group,
menu,
_isVisible: isMenuActive && isItemVisible
});
return () => {
removeItem(itemId);
};
// Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/41639
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [activeMenu, search]);
};
exports.useNavigationTreeItem = useNavigationTreeItem;
//# sourceMappingURL=use-navigation-tree-item.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_element","require","_context","_context2","_context3","_utils","useNavigationTreeItem","itemId","props","activeMenu","navigationTree","addItem","removeItem","useNavigationContext","group","useNavigationGroupContext","menu","search","useNavigationMenuContext","useEffect","isMenuActive","isItemVisible","title","undefined","normalizedSearch","_isVisible","exports"],"sources":["@wordpress/components/src/navigation/item/use-navigation-tree-item.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useNavigationContext } from '../context';\nimport { useNavigationGroupContext } from '../group/context';\nimport { useNavigationMenuContext } from '../menu/context';\nimport { normalizedSearch } from '../utils';\n\nimport type { NavigationItemProps } from '../types';\n\nexport const useNavigationTreeItem = (\n\titemId: string,\n\tprops: NavigationItemProps\n) => {\n\tconst {\n\t\tactiveMenu,\n\t\tnavigationTree: { addItem, removeItem },\n\t} = useNavigationContext();\n\tconst { group } = useNavigationGroupContext();\n\tconst { menu, search } = useNavigationMenuContext();\n\n\tuseEffect( () => {\n\t\tconst isMenuActive = activeMenu === menu;\n\t\tconst isItemVisible =\n\t\t\t! search ||\n\t\t\t( props.title !== undefined &&\n\t\t\t\tnormalizedSearch( props.title, search ) );\n\n\t\taddItem( itemId, {\n\t\t\t...props,\n\t\t\tgroup,\n\t\t\tmenu,\n\t\t\t_isVisible: isMenuActive && isItemVisible,\n\t\t} );\n\n\t\treturn () => {\n\t\t\tremoveItem( itemId );\n\t\t};\n\t\t// Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/41639\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ activeMenu, search ] );\n};\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAXA;AACA;AACA;;AAGA;AACA;AACA;;AAQO,MAAMK,qBAAqB,GAAGA,CACpCC,MAAc,EACdC,KAA0B,KACtB;EACJ,MAAM;IACLC,UAAU;IACVC,cAAc,EAAE;MAAEC,OAAO;MAAEC;IAAW;EACvC,CAAC,GAAG,IAAAC,6BAAoB,EAAC,CAAC;EAC1B,MAAM;IAAEC;EAAM,CAAC,GAAG,IAAAC,mCAAyB,EAAC,CAAC;EAC7C,MAAM;IAAEC,IAAI;IAAEC;EAAO,CAAC,GAAG,IAAAC,kCAAwB,EAAC,CAAC;EAEnD,IAAAC,kBAAS,EAAE,MAAM;IAChB,MAAMC,YAAY,GAAGX,UAAU,KAAKO,IAAI;IACxC,MAAMK,aAAa,GAClB,CAAEJ,MAAM,IACNT,KAAK,CAACc,KAAK,KAAKC,SAAS,IAC1B,IAAAC,uBAAgB,EAAEhB,KAAK,CAACc,KAAK,EAAEL,MAAO,CAAG;IAE3CN,OAAO,CAAEJ,MAAM,EAAE;MAChB,GAAGC,KAAK;MACRM,KAAK;MACLE,IAAI;MACJS,UAAU,EAAEL,YAAY,IAAIC;IAC7B,CAAE,CAAC;IAEH,OAAO,MAAM;MACZT,UAAU,CAAEL,MAAO,CAAC;IACrB,CAAC;IACD;IACA;EACD,CAAC,EAAE,CAAEE,UAAU,EAAEQ,MAAM,CAAG,CAAC;AAC5B,CAAC;AAACS,OAAA,CAAApB,qBAAA,GAAAA,qBAAA"}

View File

@@ -0,0 +1,19 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useNavigationMenuContext = exports.NavigationMenuContext = void 0;
var _element = require("@wordpress/element");
/**
* WordPress dependencies
*/
const NavigationMenuContext = (0, _element.createContext)({
menu: undefined,
search: ''
});
exports.NavigationMenuContext = NavigationMenuContext;
const useNavigationMenuContext = () => (0, _element.useContext)(NavigationMenuContext);
exports.useNavigationMenuContext = useNavigationMenuContext;
//# sourceMappingURL=context.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_element","require","NavigationMenuContext","createContext","menu","undefined","search","exports","useNavigationMenuContext","useContext"],"sources":["@wordpress/components/src/navigation/menu/context.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { NavigationMenuContext as NavigationMenuContextType } from '../types';\n\nexport const NavigationMenuContext = createContext< NavigationMenuContextType >(\n\t{\n\t\tmenu: undefined,\n\t\tsearch: '',\n\t}\n);\nexport const useNavigationMenuContext = () =>\n\tuseContext( NavigationMenuContext );\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAQO,MAAMC,qBAAqB,GAAG,IAAAC,sBAAa,EACjD;EACCC,IAAI,EAAEC,SAAS;EACfC,MAAM,EAAE;AACT,CACD,CAAC;AAACC,OAAA,CAAAL,qBAAA,GAAAA,qBAAA;AACK,MAAMM,wBAAwB,GAAGA,CAAA,KACvC,IAAAC,mBAAU,EAAEP,qBAAsB,CAAC;AAACK,OAAA,CAAAC,wBAAA,GAAAA,wBAAA"}

View File

@@ -0,0 +1,91 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.NavigationMenu = NavigationMenu;
exports.default = void 0;
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _element = require("@wordpress/element");
var _constants = require("../constants");
var _context = require("./context");
var _context2 = require("../context");
var _useNavigationTreeMenu = require("./use-navigation-tree-menu");
var _backButton = _interopRequireDefault(require("../back-button"));
var _menuTitle = _interopRequireDefault(require("./menu-title"));
var _searchNoResultsFound = _interopRequireDefault(require("./search-no-results-found"));
var _navigableContainer = require("../../navigable-container");
var _navigationStyles = require("../styles/navigation-styles");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function NavigationMenu(props) {
const {
backButtonLabel,
children,
className,
hasSearch,
menu = _constants.ROOT_MENU,
onBackButtonClick,
onSearch: setControlledSearch,
parentMenu,
search: controlledSearch,
isSearchDebouncing,
title,
titleAction
} = props;
const [uncontrolledSearch, setUncontrolledSearch] = (0, _element.useState)('');
(0, _useNavigationTreeMenu.useNavigationTreeMenu)(props);
const {
activeMenu
} = (0, _context2.useNavigationContext)();
const context = {
menu,
search: uncontrolledSearch
};
// Keep the children rendered to make sure invisible items are included in the navigation tree.
if (activeMenu !== menu) {
return (0, _react.createElement)(_context.NavigationMenuContext.Provider, {
value: context
}, children);
}
const isControlledSearch = !!setControlledSearch;
const search = isControlledSearch ? controlledSearch : uncontrolledSearch;
const onSearch = isControlledSearch ? setControlledSearch : setUncontrolledSearch;
const menuTitleId = `components-navigation__menu-title-${menu}`;
const classes = (0, _classnames.default)('components-navigation__menu', className);
return (0, _react.createElement)(_context.NavigationMenuContext.Provider, {
value: context
}, (0, _react.createElement)(_navigationStyles.MenuUI, {
className: classes
}, (parentMenu || onBackButtonClick) && (0, _react.createElement)(_backButton.default, {
backButtonLabel: backButtonLabel,
parentMenu: parentMenu,
onClick: onBackButtonClick
}), title && (0, _react.createElement)(_menuTitle.default, {
hasSearch: hasSearch,
onSearch: onSearch,
search: search,
title: title,
titleAction: titleAction
}), (0, _react.createElement)(_navigableContainer.NavigableMenu, null, (0, _react.createElement)("ul", {
"aria-labelledby": menuTitleId
}, children, search && !isSearchDebouncing && (0, _react.createElement)(_searchNoResultsFound.default, {
search: search
})))));
}
var _default = NavigationMenu;
exports.default = _default;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,92 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _withSpokenMessages = _interopRequireDefault(require("../../higher-order/with-spoken-messages"));
var _context = require("./context");
var _context2 = require("../context");
var _navigationStyles = require("../styles/navigation-styles");
var _constants = require("../constants");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function MenuTitleSearch({
debouncedSpeak,
onCloseSearch,
onSearch,
search,
title
}) {
const {
navigationTree: {
items
}
} = (0, _context2.useNavigationContext)();
const {
menu
} = (0, _context.useNavigationMenuContext)();
const inputRef = (0, _element.useRef)(null);
// Wait for the slide-in animation to complete before autofocusing the input.
// This prevents scrolling to the input during the animation.
(0, _element.useEffect)(() => {
const delayedFocus = setTimeout(() => {
inputRef.current?.focus();
}, _constants.SEARCH_FOCUS_DELAY);
return () => {
clearTimeout(delayedFocus);
};
}, []);
(0, _element.useEffect)(() => {
if (!search) {
return;
}
const count = Object.values(items).filter(item => item._isVisible).length;
const resultsFoundMessage = (0, _i18n.sprintf)( /* translators: %d: number of results. */
(0, _i18n._n)('%d result found.', '%d results found.', count), count);
debouncedSpeak(resultsFoundMessage);
// Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/44090
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [items, search]);
const onClose = () => {
onSearch?.('');
onCloseSearch();
};
const onKeyDown = event => {
if (event.code === 'Escape' && !event.defaultPrevented) {
event.preventDefault();
onClose();
}
};
const inputId = `components-navigation__menu-title-search-${menu}`;
const placeholder = (0, _i18n.sprintf)( /* translators: placeholder for menu search box. %s: menu title */
(0, _i18n.__)('Search %s'), title?.toLowerCase()).trim();
return (0, _react.createElement)("div", {
className: "components-navigation__menu-title-search"
}, (0, _react.createElement)(_navigationStyles.MenuTitleSearchUI, {
autoComplete: "off",
className: "components-navigation__menu-search-input",
id: inputId,
onChange: value => onSearch?.(value),
onKeyDown: onKeyDown,
placeholder: placeholder,
onClose: onClose,
ref: inputRef,
type: "search",
value: search
}));
}
var _default = (0, _withSpokenMessages.default)(MenuTitleSearch);
exports.default = _default;
//# sourceMappingURL=menu-title-search.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,81 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = NavigationMenuTitle;
var _react = require("react");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _animate = require("../../animate");
var _button = _interopRequireDefault(require("../../button"));
var _menuTitleSearch = _interopRequireDefault(require("./menu-title-search"));
var _navigationStyles = require("../styles/navigation-styles");
var _context = require("./context");
var _constants = require("../constants");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function NavigationMenuTitle({
hasSearch,
onSearch,
search,
title,
titleAction
}) {
const [isSearching, setIsSearching] = (0, _element.useState)(false);
const {
menu
} = (0, _context.useNavigationMenuContext)();
const searchButtonRef = (0, _element.useRef)(null);
if (!title) {
return null;
}
const onCloseSearch = () => {
setIsSearching(false);
// Wait for the slide-in animation to complete before focusing the search button.
// eslint-disable-next-line @wordpress/react-no-unsafe-timeout
setTimeout(() => {
searchButtonRef.current?.focus();
}, _constants.SEARCH_FOCUS_DELAY);
};
const menuTitleId = `components-navigation__menu-title-${menu}`;
/* translators: search button label for menu search box. %s: menu title */
const searchButtonLabel = (0, _i18n.sprintf)((0, _i18n.__)('Search in %s'), title);
return (0, _react.createElement)(_navigationStyles.MenuTitleUI, {
className: "components-navigation__menu-title"
}, !isSearching && (0, _react.createElement)(_navigationStyles.GroupTitleUI, {
as: "h2",
className: "components-navigation__menu-title-heading",
level: 3
}, (0, _react.createElement)("span", {
id: menuTitleId
}, title), (hasSearch || titleAction) && (0, _react.createElement)(_navigationStyles.MenuTitleActionsUI, null, titleAction, hasSearch && (0, _react.createElement)(_button.default, {
size: "small",
variant: "tertiary",
label: searchButtonLabel,
onClick: () => setIsSearching(true),
ref: searchButtonRef
}, (0, _react.createElement)(_icons.Icon, {
icon: _icons.search
})))), isSearching && (0, _react.createElement)("div", {
className: (0, _animate.getAnimateClassName)({
type: 'slide-in',
origin: 'left'
})
}, (0, _react.createElement)(_menuTitleSearch.default, {
onCloseSearch: onCloseSearch,
onSearch: onSearch,
search: search,
title: title
})));
}
//# sourceMappingURL=menu-title.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,33 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = NavigationSearchNoResultsFound;
var _react = require("react");
var _i18n = require("@wordpress/i18n");
var _context = require("../context");
var _navigationStyles = require("../styles/navigation-styles");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function NavigationSearchNoResultsFound({
search
}) {
const {
navigationTree: {
items
}
} = (0, _context.useNavigationContext)();
const resultsCount = Object.values(items).filter(item => item._isVisible).length;
if (!search || !!resultsCount) {
return null;
}
return (0, _react.createElement)(_navigationStyles.ItemBaseUI, null, (0, _react.createElement)(_navigationStyles.ItemUI, null, (0, _i18n.__)('No results found.'), " "));
}
//# sourceMappingURL=search-no-results-found.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_i18n","require","_context","_navigationStyles","NavigationSearchNoResultsFound","search","navigationTree","items","useNavigationContext","resultsCount","Object","values","filter","item","_isVisible","length","_react","createElement","ItemBaseUI","ItemUI","__"],"sources":["@wordpress/components/src/navigation/menu/search-no-results-found.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useNavigationContext } from '../context';\nimport { ItemBaseUI, ItemUI } from '../styles/navigation-styles';\n\nimport type { NavigationSearchNoResultsFoundProps } from '../types';\n\nexport default function NavigationSearchNoResultsFound( {\n\tsearch,\n}: NavigationSearchNoResultsFoundProps ) {\n\tconst {\n\t\tnavigationTree: { items },\n\t} = useNavigationContext();\n\n\tconst resultsCount = Object.values( items ).filter(\n\t\t( item ) => item._isVisible\n\t).length;\n\n\tif ( ! search || !! resultsCount ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ItemBaseUI>\n\t\t\t<ItemUI>{ __( 'No results found.' ) } </ItemUI>\n\t\t</ItemBaseUI>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAMe,SAASG,8BAA8BA,CAAE;EACvDC;AACoC,CAAC,EAAG;EACxC,MAAM;IACLC,cAAc,EAAE;MAAEC;IAAM;EACzB,CAAC,GAAG,IAAAC,6BAAoB,EAAC,CAAC;EAE1B,MAAMC,YAAY,GAAGC,MAAM,CAACC,MAAM,CAAEJ,KAAM,CAAC,CAACK,MAAM,CAC/CC,IAAI,IAAMA,IAAI,CAACC,UAClB,CAAC,CAACC,MAAM;EAER,IAAK,CAAEV,MAAM,IAAI,CAAC,CAAEI,YAAY,EAAG;IAClC,OAAO,IAAI;EACZ;EAEA,OACC,IAAAO,MAAA,CAAAC,aAAA,EAACd,iBAAA,CAAAe,UAAU,QACV,IAAAF,MAAA,CAAAC,aAAA,EAACd,iBAAA,CAAAgB,MAAM,QAAG,IAAAC,QAAE,EAAE,mBAAoB,CAAC,EAAE,GAAS,CACnC,CAAC;AAEf"}

View File

@@ -0,0 +1,39 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useNavigationTreeMenu = void 0;
var _element = require("@wordpress/element");
var _context = require("../context");
var _constants = require("../constants");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const useNavigationTreeMenu = props => {
const {
navigationTree: {
addMenu,
removeMenu
}
} = (0, _context.useNavigationContext)();
const key = props.menu || _constants.ROOT_MENU;
(0, _element.useEffect)(() => {
addMenu(key, {
...props,
menu: key
});
return () => {
removeMenu(key);
};
// Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/44090
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
};
exports.useNavigationTreeMenu = useNavigationTreeMenu;
//# sourceMappingURL=use-navigation-tree-menu.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_element","require","_context","_constants","useNavigationTreeMenu","props","navigationTree","addMenu","removeMenu","useNavigationContext","key","menu","ROOT_MENU","useEffect","exports"],"sources":["@wordpress/components/src/navigation/menu/use-navigation-tree-menu.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useNavigationContext } from '../context';\nimport { ROOT_MENU } from '../constants';\n\nimport type { NavigationMenuProps } from '../types';\n\nexport const useNavigationTreeMenu = ( props: NavigationMenuProps ) => {\n\tconst {\n\t\tnavigationTree: { addMenu, removeMenu },\n\t} = useNavigationContext();\n\n\tconst key = props.menu || ROOT_MENU;\n\tuseEffect( () => {\n\t\taddMenu( key, { ...props, menu: key } );\n\n\t\treturn () => {\n\t\t\tremoveMenu( key );\n\t\t};\n\t\t// Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/44090\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n};\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAMO,MAAMG,qBAAqB,GAAKC,KAA0B,IAAM;EACtE,MAAM;IACLC,cAAc,EAAE;MAAEC,OAAO;MAAEC;IAAW;EACvC,CAAC,GAAG,IAAAC,6BAAoB,EAAC,CAAC;EAE1B,MAAMC,GAAG,GAAGL,KAAK,CAACM,IAAI,IAAIC,oBAAS;EACnC,IAAAC,kBAAS,EAAE,MAAM;IAChBN,OAAO,CAAEG,GAAG,EAAE;MAAE,GAAGL,KAAK;MAAEM,IAAI,EAAED;IAAI,CAAE,CAAC;IAEvC,OAAO,MAAM;MACZF,UAAU,CAAEE,GAAI,CAAC;IAClB,CAAC;IACD;IACA;EACD,CAAC,EAAE,EAAG,CAAC;AACR,CAAC;AAACI,OAAA,CAAAV,qBAAA,GAAAA,qBAAA"}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
//# sourceMappingURL=types.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,98 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useCreateNavigationTree = void 0;
var _element = require("@wordpress/element");
var _useNavigationTreeNodes = require("./use-navigation-tree-nodes");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const useCreateNavigationTree = () => {
const {
nodes: items,
getNode: getItem,
addNode: addItem,
removeNode: removeItem
} = (0, _useNavigationTreeNodes.useNavigationTreeNodes)();
const {
nodes: menus,
getNode: getMenu,
addNode: addMenu,
removeNode: removeMenu
} = (0, _useNavigationTreeNodes.useNavigationTreeNodes)();
/**
* Stores direct nested menus of menus
* This makes it easy to traverse menu tree
*
* Key is the menu prop of the menu
* Value is an array of menu keys
*/
const [childMenu, setChildMenu] = (0, _element.useState)({});
const getChildMenu = menu => childMenu[menu] || [];
const traverseMenu = (startMenu, callback) => {
const visited = [];
let queue = [startMenu];
let current;
while (queue.length > 0) {
// Type cast to string is safe because of the `length > 0` check above.
current = getMenu(queue.shift());
if (!current || visited.includes(current.menu)) {
continue;
}
visited.push(current.menu);
queue = [...queue, ...getChildMenu(current.menu)];
if (callback(current) === false) {
break;
}
}
};
const isMenuEmpty = menuToCheck => {
let isEmpty = true;
traverseMenu(menuToCheck, current => {
if (!current.isEmpty) {
isEmpty = false;
return false;
}
return undefined;
});
return isEmpty;
};
return {
items,
getItem,
addItem,
removeItem,
menus,
getMenu,
addMenu: (key, value) => {
setChildMenu(state => {
const newState = {
...state
};
if (!value.parentMenu) {
return newState;
}
if (!newState[value.parentMenu]) {
newState[value.parentMenu] = [];
}
newState[value.parentMenu].push(key);
return newState;
});
addMenu(key, value);
},
removeMenu,
childMenu,
traverseMenu,
isMenuEmpty
};
};
exports.useCreateNavigationTree = useCreateNavigationTree;
//# sourceMappingURL=use-create-navigation-tree.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,41 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useNavigationTreeNodes = useNavigationTreeNodes;
var _element = require("@wordpress/element");
/**
* WordPress dependencies
*/
function useNavigationTreeNodes() {
const [nodes, setNodes] = (0, _element.useState)({});
const getNode = key => nodes[key];
const addNode = (key, value) => {
const {
children,
...newNode
} = value;
return setNodes(original => ({
...original,
[key]: newNode
}));
};
const removeNode = key => {
return setNodes(original => {
const {
[key]: removedNode,
...remainingNodes
} = original;
return remainingNodes;
});
};
return {
nodes,
getNode,
addNode,
removeNode
};
}
//# sourceMappingURL=use-navigation-tree-nodes.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_element","require","useNavigationTreeNodes","nodes","setNodes","useState","getNode","key","addNode","value","children","newNode","original","removeNode","removedNode","remainingNodes"],"sources":["@wordpress/components/src/navigation/use-navigation-tree-nodes.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\nexport function useNavigationTreeNodes<\n\tTNode extends { children?: React.ReactNode; [ key: string ]: unknown },\n>() {\n\tconst [ nodes, setNodes ] = useState<\n\t\tRecord< string, Omit< TNode, 'children' > >\n\t>( {} );\n\n\tconst getNode = ( key: string ) => nodes[ key ];\n\n\tconst addNode = ( key: string, value: TNode ) => {\n\t\tconst { children, ...newNode } = value;\n\t\treturn setNodes( ( original ) => ( {\n\t\t\t...original,\n\t\t\t[ key ]: newNode,\n\t\t} ) );\n\t};\n\n\tconst removeNode = ( key: keyof typeof nodes ) => {\n\t\treturn setNodes( ( original ) => {\n\t\t\tconst { [ key ]: removedNode, ...remainingNodes } = original;\n\t\t\treturn remainingNodes;\n\t\t} );\n\t};\n\n\treturn { nodes, getNode, addNode, removeNode };\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGO,SAASC,sBAAsBA,CAAA,EAElC;EACH,MAAM,CAAEC,KAAK,EAAEC,QAAQ,CAAE,GAAG,IAAAC,iBAAQ,EAEjC,CAAC,CAAE,CAAC;EAEP,MAAMC,OAAO,GAAKC,GAAW,IAAMJ,KAAK,CAAEI,GAAG,CAAE;EAE/C,MAAMC,OAAO,GAAGA,CAAED,GAAW,EAAEE,KAAY,KAAM;IAChD,MAAM;MAAEC,QAAQ;MAAE,GAAGC;IAAQ,CAAC,GAAGF,KAAK;IACtC,OAAOL,QAAQ,CAAIQ,QAAQ,KAAQ;MAClC,GAAGA,QAAQ;MACX,CAAEL,GAAG,GAAII;IACV,CAAC,CAAG,CAAC;EACN,CAAC;EAED,MAAME,UAAU,GAAKN,GAAuB,IAAM;IACjD,OAAOH,QAAQ,CAAIQ,QAAQ,IAAM;MAChC,MAAM;QAAE,CAAEL,GAAG,GAAIO,WAAW;QAAE,GAAGC;MAAe,CAAC,GAAGH,QAAQ;MAC5D,OAAOG,cAAc;IACtB,CAAE,CAAC;EACJ,CAAC;EAED,OAAO;IAAEZ,KAAK;IAAEG,OAAO;IAAEE,OAAO;IAAEK;EAAW,CAAC;AAC/C"}

View File

@@ -0,0 +1,18 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.normalizedSearch = exports.normalizeInput = void 0;
var _removeAccents = _interopRequireDefault(require("remove-accents"));
/**
* External dependencies
*/
// @see packages/block-editor/src/components/inserter/search-items.js
const normalizeInput = input => (0, _removeAccents.default)(input).replace(/^\//, '').toLowerCase();
exports.normalizeInput = normalizeInput;
const normalizedSearch = (title, search) => -1 !== normalizeInput(title).indexOf(normalizeInput(search));
exports.normalizedSearch = normalizedSearch;
//# sourceMappingURL=utils.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_removeAccents","_interopRequireDefault","require","normalizeInput","input","removeAccents","replace","toLowerCase","exports","normalizedSearch","title","search","indexOf"],"sources":["@wordpress/components/src/navigation/utils.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport removeAccents from 'remove-accents';\n\n// @see packages/block-editor/src/components/inserter/search-items.js\nexport const normalizeInput = ( input: string ) =>\n\tremoveAccents( input ).replace( /^\\//, '' ).toLowerCase();\n\nexport const normalizedSearch = ( title: string, search: string ) =>\n\t-1 !== normalizeInput( title ).indexOf( normalizeInput( search ) );\n"],"mappings":";;;;;;;AAGA,IAAAA,cAAA,GAAAC,sBAAA,CAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACO,MAAMC,cAAc,GAAKC,KAAa,IAC5C,IAAAC,sBAAa,EAAED,KAAM,CAAC,CAACE,OAAO,CAAE,KAAK,EAAE,EAAG,CAAC,CAACC,WAAW,CAAC,CAAC;AAACC,OAAA,CAAAL,cAAA,GAAAA,cAAA;AAEpD,MAAMM,gBAAgB,GAAGA,CAAEC,KAAa,EAAEC,MAAc,KAC9D,CAAC,CAAC,KAAKR,cAAc,CAAEO,KAAM,CAAC,CAACE,OAAO,CAAET,cAAc,CAAEQ,MAAO,CAAE,CAAC;AAACH,OAAA,CAAAC,gBAAA,GAAAA,gBAAA"}