@wordpress/interface 4.2.3 → 4.2.4-next.a55ed9455a.0

package/build/components/fullscreen-mode/index.js

@@ -18,7 +18,7 @@ const FullscreenMode = _ref => {
     let isSticky = false; // `is-fullscreen-mode` is set in PHP as a body class by Gutenberg, and this causes
     // `sticky-menu` to be applied by WordPress and prevents the admin menu being scrolled
     // even if `is-fullscreen-mode` is then removed. Let's remove `sticky-menu` here as
-    // a consequence of the FullscreenMode setup
+    // a consequence of the FullscreenMode setup.
 
     if (document.body.classList.contains('sticky-menu')) {
       isSticky = true;

package/build/components/fullscreen-mode/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/interface/src/components/fullscreen-mode/index.js"],"names":["FullscreenMode","isActive","isSticky","document","body","classList","contains","remove","add"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,MAAMA,cAAc,GAAG,QAAoB;AAAA,MAAlB;AAAEC,IAAAA;AAAF,GAAkB;AAC1C,0BAAW,MAAM;AAChB,QAAIC,QAAQ,GAAG,KAAf,CADgB,CAEhB;AACA;AACA;AACA;;AACA,QAAKC,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBC,QAAxB,CAAkC,aAAlC,CAAL,EAAyD;AACxDJ,MAAAA,QAAQ,GAAG,IAAX;AACAC,MAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBE,MAAxB,CAAgC,aAAhC;AACA;;AAED,WAAO,MAAM;AACZ,UAAKL,QAAL,EAAgB;AACfC,QAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBG,GAAxB,CAA6B,aAA7B;AACA;AACD,KAJD;AAKA,GAhBD,EAgBG,EAhBH;AAkBA,0BAAW,MAAM;AAChB,QAAKP,QAAL,EAAgB;AACfE,MAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBG,GAAxB,CAA6B,oBAA7B;AACA,KAFD,MAEO;AACNL,MAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBE,MAAxB,CAAgC,oBAAhC;AACA;;AAED,WAAO,MAAM;AACZ,UAAKN,QAAL,EAAgB;AACfE,QAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBE,MAAxB,CAAgC,oBAAhC;AACA;AACD,KAJD;AAKA,GAZD,EAYG,CAAEN,QAAF,CAZH;AAcA,SAAO,IAAP;AACA,CAlCD;;eAmCeD,c","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\nconst FullscreenMode = ( { isActive } ) => {\n\tuseEffect( () => {\n\t\tlet isSticky = false;\n\t\t// `is-fullscreen-mode` is set in PHP as a body class by Gutenberg, and this causes\n\t\t// `sticky-menu` to be applied by WordPress and prevents the admin menu being scrolled\n\t\t// even if `is-fullscreen-mode` is then removed. Let's remove `sticky-menu` here as\n\t\t// a consequence of the FullscreenMode setup\n\t\tif ( document.body.classList.contains( 'sticky-menu' ) ) {\n\t\t\tisSticky = true;\n\t\t\tdocument.body.classList.remove( 'sticky-menu' );\n\t\t}\n\n\t\treturn () => {\n\t\t\tif ( isSticky ) {\n\t\t\t\tdocument.body.classList.add( 'sticky-menu' );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tif ( isActive ) {\n\t\t\tdocument.body.classList.add( 'is-fullscreen-mode' );\n\t\t} else {\n\t\t\tdocument.body.classList.remove( 'is-fullscreen-mode' );\n\t\t}\n\n\t\treturn () => {\n\t\t\tif ( isActive ) {\n\t\t\t\tdocument.body.classList.remove( 'is-fullscreen-mode' );\n\t\t\t}\n\t\t};\n\t}, [ isActive ] );\n\n\treturn null;\n};\nexport default FullscreenMode;\n"]}
+{"version":3,"sources":["@wordpress/interface/src/components/fullscreen-mode/index.js"],"names":["FullscreenMode","isActive","isSticky","document","body","classList","contains","remove","add"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,MAAMA,cAAc,GAAG,QAAoB;AAAA,MAAlB;AAAEC,IAAAA;AAAF,GAAkB;AAC1C,0BAAW,MAAM;AAChB,QAAIC,QAAQ,GAAG,KAAf,CADgB,CAEhB;AACA;AACA;AACA;;AACA,QAAKC,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBC,QAAxB,CAAkC,aAAlC,CAAL,EAAyD;AACxDJ,MAAAA,QAAQ,GAAG,IAAX;AACAC,MAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBE,MAAxB,CAAgC,aAAhC;AACA;;AAED,WAAO,MAAM;AACZ,UAAKL,QAAL,EAAgB;AACfC,QAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBG,GAAxB,CAA6B,aAA7B;AACA;AACD,KAJD;AAKA,GAhBD,EAgBG,EAhBH;AAkBA,0BAAW,MAAM;AAChB,QAAKP,QAAL,EAAgB;AACfE,MAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBG,GAAxB,CAA6B,oBAA7B;AACA,KAFD,MAEO;AACNL,MAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBE,MAAxB,CAAgC,oBAAhC;AACA;;AAED,WAAO,MAAM;AACZ,UAAKN,QAAL,EAAgB;AACfE,QAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBE,MAAxB,CAAgC,oBAAhC;AACA;AACD,KAJD;AAKA,GAZD,EAYG,CAAEN,QAAF,CAZH;AAcA,SAAO,IAAP;AACA,CAlCD;;eAmCeD,c","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\nconst FullscreenMode = ( { isActive } ) => {\n\tuseEffect( () => {\n\t\tlet isSticky = false;\n\t\t// `is-fullscreen-mode` is set in PHP as a body class by Gutenberg, and this causes\n\t\t// `sticky-menu` to be applied by WordPress and prevents the admin menu being scrolled\n\t\t// even if `is-fullscreen-mode` is then removed. Let's remove `sticky-menu` here as\n\t\t// a consequence of the FullscreenMode setup.\n\t\tif ( document.body.classList.contains( 'sticky-menu' ) ) {\n\t\t\tisSticky = true;\n\t\t\tdocument.body.classList.remove( 'sticky-menu' );\n\t\t}\n\n\t\treturn () => {\n\t\t\tif ( isSticky ) {\n\t\t\t\tdocument.body.classList.add( 'sticky-menu' );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tif ( isActive ) {\n\t\t\tdocument.body.classList.add( 'is-fullscreen-mode' );\n\t\t} else {\n\t\t\tdocument.body.classList.remove( 'is-fullscreen-mode' );\n\t\t}\n\n\t\treturn () => {\n\t\t\tif ( isActive ) {\n\t\t\t\tdocument.body.classList.remove( 'is-fullscreen-mode' );\n\t\t\t}\n\t\t};\n\t}, [ isActive ] );\n\n\treturn null;\n};\nexport default FullscreenMode;\n"]}

package/build/components/index.js

@@ -53,6 +53,30 @@ Object.defineProperty(exports, "PinnedItems", {
     return _pinnedItems.default;
   }
 });
+Object.defineProperty(exports, "PreferencesModal", {
+  enumerable: true,
+  get: function () {
+    return _preferencesModal.default;
+  }
+});
+Object.defineProperty(exports, "PreferencesModalSection", {
+  enumerable: true,
+  get: function () {
+    return _preferencesModalSection.default;
+  }
+});
+Object.defineProperty(exports, "PreferencesModalTabs", {
+  enumerable: true,
+  get: function () {
+    return _preferencesModalTabs.default;
+  }
+});
+Object.defineProperty(exports, "___unstablePreferencesModalBaseOption", {
+  enumerable: true,
+  get: function () {
+    return _preferencesModalBaseOption.default;
+  }
+});
 
 var _complementaryArea = _interopRequireDefault(require("./complementary-area"));
 
@@ -69,4 +93,12 @@ var _moreMenuDropdown = _interopRequireDefault(require("./more-menu-dropdown"));
 var _moreMenuFeatureToggle = _interopRequireDefault(require("./more-menu-feature-toggle"));
 
 var _actionItem = _interopRequireDefault(require("./action-item"));
+
+var _preferencesModal = _interopRequireDefault(require("./preferences-modal"));
+
+var _preferencesModalTabs = _interopRequireDefault(require("./preferences-modal-tabs"));
+
+var _preferencesModalSection = _interopRequireDefault(require("./preferences-modal-section"));
+
+var _preferencesModalBaseOption = _interopRequireDefault(require("./preferences-modal-base-option"));
 //# sourceMappingURL=index.js.map

package/build/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/interface/src/components/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["export { default as ComplementaryArea } from './complementary-area';\nexport { default as ComplementaryAreaMoreMenuItem } from './complementary-area-more-menu-item';\nexport { default as FullscreenMode } from './fullscreen-mode';\nexport { default as InterfaceSkeleton } from './interface-skeleton';\nexport { default as PinnedItems } from './pinned-items';\nexport { default as MoreMenuDropdown } from './more-menu-dropdown';\nexport { default as MoreMenuFeatureToggle } from './more-menu-feature-toggle';\nexport { default as ActionItem } from './action-item';\n"]}
+{"version":3,"sources":["@wordpress/interface/src/components/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["export { default as ComplementaryArea } from './complementary-area';\nexport { default as ComplementaryAreaMoreMenuItem } from './complementary-area-more-menu-item';\nexport { default as FullscreenMode } from './fullscreen-mode';\nexport { default as InterfaceSkeleton } from './interface-skeleton';\nexport { default as PinnedItems } from './pinned-items';\nexport { default as MoreMenuDropdown } from './more-menu-dropdown';\nexport { default as MoreMenuFeatureToggle } from './more-menu-feature-toggle';\nexport { default as ActionItem } from './action-item';\nexport { default as PreferencesModal } from './preferences-modal';\nexport { default as PreferencesModalTabs } from './preferences-modal-tabs';\nexport { default as PreferencesModalSection } from './preferences-modal-section';\nexport { default as ___unstablePreferencesModalBaseOption } from './preferences-modal-base-option';\n"]}

package/build/components/preferences-modal/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PreferencesModal;
+
+var _element = require("@wordpress/element");
+
+var _components = require("@wordpress/components");
+
+var _i18n = require("@wordpress/i18n");
+
+/**
+ * WordPress dependencies
+ */
+function PreferencesModal(_ref) {
+  let {
+    closeModal,
+    children
+  } = _ref;
+  return (0, _element.createElement)(_components.Modal, {
+    className: "interface-preferences-modal",
+    title: (0, _i18n.__)('Preferences'),
+    closeLabel: (0, _i18n.__)('Close'),
+    onRequestClose: closeModal
+  }, children);
+}
+//# sourceMappingURL=index.js.map

package/build/components/preferences-modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/interface/src/components/preferences-modal/index.js"],"names":["PreferencesModal","closeModal","children"],"mappings":";;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;AAIe,SAASA,gBAAT,OAAsD;AAAA,MAA3B;AAAEC,IAAAA,UAAF;AAAcC,IAAAA;AAAd,GAA2B;AACpE,SACC,4BAAC,iBAAD;AACC,IAAA,SAAS,EAAC,6BADX;AAEC,IAAA,KAAK,EAAG,cAAI,aAAJ,CAFT;AAGC,IAAA,UAAU,EAAG,cAAI,OAAJ,CAHd;AAIC,IAAA,cAAc,EAAGD;AAJlB,KAMGC,QANH,CADD;AAUA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Modal } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\nexport default function PreferencesModal( { closeModal, children } ) {\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"interface-preferences-modal\"\n\t\t\ttitle={ __( 'Preferences' ) }\n\t\t\tcloseLabel={ __( 'Close' ) }\n\t\t\tonRequestClose={ closeModal }\n\t\t>\n\t\t\t{ children }\n\t\t</Modal>\n\t);\n}\n"]}

package/build/components/preferences-modal-base-option/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _components = require("@wordpress/components");
+
+/**
+ * WordPress dependencies
+ */
+function BaseOption(_ref) {
+  let {
+    help,
+    label,
+    isChecked,
+    onChange,
+    children
+  } = _ref;
+  return (0, _element.createElement)("div", {
+    className: "interface-preferences-modal__option"
+  }, (0, _element.createElement)(_components.ToggleControl, {
+    help: help,
+    label: label,
+    checked: isChecked,
+    onChange: onChange
+  }), children);
+}
+
+var _default = BaseOption;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/build/components/preferences-modal-base-option/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/interface/src/components/preferences-modal-base-option/index.js"],"names":["BaseOption","help","label","isChecked","onChange","children"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,SAASA,UAAT,OAAsE;AAAA,MAAjD;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,KAAR;AAAeC,IAAAA,SAAf;AAA0BC,IAAAA,QAA1B;AAAoCC,IAAAA;AAApC,GAAiD;AACrE,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,yBAAD;AACC,IAAA,IAAI,EAAGJ,IADR;AAEC,IAAA,KAAK,EAAGC,KAFT;AAGC,IAAA,OAAO,EAAGC,SAHX;AAIC,IAAA,QAAQ,EAAGC;AAJZ,IADD,EAOGC,QAPH,CADD;AAWA;;eAEcL,U","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ToggleControl } from '@wordpress/components';\n\nfunction BaseOption( { help, label, isChecked, onChange, children } ) {\n\treturn (\n\t\t<div className=\"interface-preferences-modal__option\">\n\t\t\t<ToggleControl\n\t\t\t\thelp={ help }\n\t\t\t\tlabel={ label }\n\t\t\t\tchecked={ isChecked }\n\t\t\t\tonChange={ onChange }\n\t\t\t/>\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\nexport default BaseOption;\n"]}

package/build/components/preferences-modal-section/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+const Section = _ref => {
+  let {
+    description,
+    title,
+    children
+  } = _ref;
+  return (0, _element.createElement)("fieldset", {
+    className: "interface-preferences-modal__section"
+  }, (0, _element.createElement)("legend", null, (0, _element.createElement)("h2", {
+    className: "interface-preferences-modal__section-title"
+  }, title), description && (0, _element.createElement)("p", {
+    className: "interface-preferences-modal__section-description"
+  }, description)), children);
+};
+
+var _default = Section;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/build/components/preferences-modal-section/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/interface/src/components/preferences-modal-section/index.js"],"names":["Section","description","title","children"],"mappings":";;;;;;;;;AAAA,MAAMA,OAAO,GAAG;AAAA,MAAE;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,KAAf;AAAsBC,IAAAA;AAAtB,GAAF;AAAA,SACf;AAAU,IAAA,SAAS,EAAC;AAApB,KACC,4CACC;AAAI,IAAA,SAAS,EAAC;AAAd,KACGD,KADH,CADD,EAIGD,WAAW,IACZ;AAAG,IAAA,SAAS,EAAC;AAAb,KACGA,WADH,CALF,CADD,EAWGE,QAXH,CADe;AAAA,CAAhB;;eAgBeH,O","sourcesContent":["const Section = ( { description, title, children } ) => (\n\t<fieldset className=\"interface-preferences-modal__section\">\n\t\t<legend>\n\t\t\t<h2 className=\"interface-preferences-modal__section-title\">\n\t\t\t\t{ title }\n\t\t\t</h2>\n\t\t\t{ description && (\n\t\t\t\t<p className=\"interface-preferences-modal__section-description\">\n\t\t\t\t\t{ description }\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</legend>\n\t\t{ children }\n\t</fieldset>\n);\n\nexport default Section;\n"]}

package/build/components/preferences-modal-tabs/index.js

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PreferencesModalTabs;
+
+var _element = require("@wordpress/element");
+
+var _compose = require("@wordpress/compose");
+
+var _components = require("@wordpress/components");
+
+var _icons = require("@wordpress/icons");
+
+var _i18n = require("@wordpress/i18n");
+
+/**
+ * WordPress dependencies
+ */
+const PREFERENCES_MENU = 'preferences-menu';
+
+function PreferencesModalTabs(_ref) {
+  let {
+    sections
+  } = _ref;
+  const isLargeViewport = (0, _compose.useViewportMatch)('medium'); // This is also used to sync the two different rendered components
+  // between small and large viewports.
+
+  const [activeMenu, setActiveMenu] = (0, _element.useState)(PREFERENCES_MENU);
+  /**
+   * Create helper objects from `sections` for easier data handling.
+   * `tabs` is used for creating the `TabPanel` and `sectionsContentMap`
+   * is used for easier access to active tab's content.
+   */
+
+  const {
+    tabs,
+    sectionsContentMap
+  } = (0, _element.useMemo)(() => {
+    let mappedTabs = {
+      tabs: [],
+      sectionsContentMap: {}
+    };
+
+    if (sections.length) {
+      mappedTabs = sections.reduce((accumulator, _ref2) => {
+        let {
+          name,
+          tabLabel: title,
+          content
+        } = _ref2;
+        accumulator.tabs.push({
+          name,
+          title
+        });
+        accumulator.sectionsContentMap[name] = content;
+        return accumulator;
+      }, {
+        tabs: [],
+        sectionsContentMap: {}
+      });
+    }
+
+    return mappedTabs;
+  }, [sections]);
+  const getCurrentTab = (0, _element.useCallback)(tab => sectionsContentMap[tab.name] || null, [sectionsContentMap]);
+  let modalContent; // We render different components based on the viewport size.
+
+  if (isLargeViewport) {
+    modalContent = (0, _element.createElement)(_components.TabPanel, {
+      className: "interface-preferences__tabs",
+      tabs: tabs,
+      initialTabName: activeMenu !== PREFERENCES_MENU ? activeMenu : undefined,
+      onSelect: setActiveMenu,
+      orientation: "vertical"
+    }, getCurrentTab);
+  } else {
+    modalContent = (0, _element.createElement)(_components.__experimentalNavigatorProvider, {
+      initialPath: "/",
+      className: "interface-preferences__provider"
+    }, (0, _element.createElement)(_components.__experimentalNavigatorScreen, {
+      path: "/"
+    }, (0, _element.createElement)(_components.Card, {
+      isBorderless: true,
+      size: "small"
+    }, (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_components.__experimentalItemGroup, null, tabs.map(tab => {
+      return (0, _element.createElement)(_components.__experimentalNavigatorButton, {
+        key: tab.name,
+        path: tab.name,
+        as: _components.__experimentalItem,
+        isAction: true
+      }, (0, _element.createElement)(_components.__experimentalHStack, {
+        justify: "space-between"
+      }, (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_components.__experimentalTruncate, null, tab.title)), (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_icons.Icon, {
+        icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight
+      }))));
+    }))))), sections.length && sections.map(section => {
+      return (0, _element.createElement)(_components.__experimentalNavigatorScreen, {
+        key: `${section.name}-menu`,
+        path: section.name
+      }, (0, _element.createElement)(_components.Card, {
+        isBorderless: true,
+        size: "large"
+      }, (0, _element.createElement)(_components.CardHeader, {
+        isBorderless: false,
+        justify: "left",
+        size: "small",
+        gap: "6"
+      }, (0, _element.createElement)(_components.__experimentalNavigatorBackButton, {
+        icon: (0, _i18n.isRTL)() ? _icons.chevronRight : _icons.chevronLeft,
+        "aria-label": (0, _i18n.__)('Navigate to the previous view')
+      }), (0, _element.createElement)(_components.__experimentalText, {
+        size: "16"
+      }, section.tabLabel)), (0, _element.createElement)(_components.CardBody, null, section.content)));
+    }));
+  }
+
+  return modalContent;
+}
+//# sourceMappingURL=index.js.map

package/build/components/preferences-modal-tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/interface/src/components/preferences-modal-tabs/index.js"],"names":["PREFERENCES_MENU","PreferencesModalTabs","sections","isLargeViewport","activeMenu","setActiveMenu","tabs","sectionsContentMap","mappedTabs","length","reduce","accumulator","name","tabLabel","title","content","push","getCurrentTab","tab","modalContent","undefined","map","Item","chevronLeft","chevronRight","section"],"mappings":";;;;;;;AAoBA;;AAjBA;;AACA;;AAiBA;;AACA;;AAtBA;AACA;AACA;AAsBA,MAAMA,gBAAgB,GAAG,kBAAzB;;AAEe,SAASC,oBAAT,OAA8C;AAAA,MAAf;AAAEC,IAAAA;AAAF,GAAe;AAC5D,QAAMC,eAAe,GAAG,+BAAkB,QAAlB,CAAxB,CAD4D,CAG5D;AACA;;AACA,QAAM,CAAEC,UAAF,EAAcC,aAAd,IAAgC,uBAAUL,gBAAV,CAAtC;AACA;AACD;AACA;AACA;AACA;;AACC,QAAM;AAAEM,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAA+B,sBAAS,MAAM;AACnD,QAAIC,UAAU,GAAG;AAChBF,MAAAA,IAAI,EAAE,EADU;AAEhBC,MAAAA,kBAAkB,EAAE;AAFJ,KAAjB;;AAIA,QAAKL,QAAQ,CAACO,MAAd,EAAuB;AACtBD,MAAAA,UAAU,GAAGN,QAAQ,CAACQ,MAAT,CACZ,CAAEC,WAAF,YAAuD;AAAA,YAAxC;AAAEC,UAAAA,IAAF;AAAQC,UAAAA,QAAQ,EAAEC,KAAlB;AAAyBC,UAAAA;AAAzB,SAAwC;AACtDJ,QAAAA,WAAW,CAACL,IAAZ,CAAiBU,IAAjB,CAAuB;AAAEJ,UAAAA,IAAF;AAAQE,UAAAA;AAAR,SAAvB;AACAH,QAAAA,WAAW,CAACJ,kBAAZ,CAAgCK,IAAhC,IAAyCG,OAAzC;AACA,eAAOJ,WAAP;AACA,OALW,EAMZ;AAAEL,QAAAA,IAAI,EAAE,EAAR;AAAYC,QAAAA,kBAAkB,EAAE;AAAhC,OANY,CAAb;AAQA;;AACD,WAAOC,UAAP;AACA,GAhBoC,EAgBlC,CAAEN,QAAF,CAhBkC,CAArC;AAkBA,QAAMe,aAAa,GAAG,0BACnBC,GAAF,IAAWX,kBAAkB,CAAEW,GAAG,CAACN,IAAN,CAAlB,IAAkC,IADxB,EAErB,CAAEL,kBAAF,CAFqB,CAAtB;AAKA,MAAIY,YAAJ,CAlC4D,CAmC5D;;AACA,MAAKhB,eAAL,EAAuB;AACtBgB,IAAAA,YAAY,GACX,4BAAC,oBAAD;AACC,MAAA,SAAS,EAAC,6BADX;AAEC,MAAA,IAAI,EAAGb,IAFR;AAGC,MAAA,cAAc,EACbF,UAAU,KAAKJ,gBAAf,GAAkCI,UAAlC,GAA+CgB,SAJjD;AAMC,MAAA,QAAQ,EAAGf,aANZ;AAOC,MAAA,WAAW,EAAC;AAPb,OASGY,aATH,CADD;AAaA,GAdD,MAcO;AACNE,IAAAA,YAAY,GACX,4BAAC,2CAAD;AACC,MAAA,WAAW,EAAC,GADb;AAEC,MAAA,SAAS,EAAC;AAFX,OAIC,4BAAC,yCAAD;AAAiB,MAAA,IAAI,EAAC;AAAtB,OACC,4BAAC,gBAAD;AAAM,MAAA,YAAY,MAAlB;AAAmB,MAAA,IAAI,EAAC;AAAxB,OACC,4BAAC,oBAAD,QACC,4BAAC,mCAAD,QACGb,IAAI,CAACe,GAAL,CAAYH,GAAF,IAAW;AACtB,aACC,4BAAC,yCAAD;AACC,QAAA,GAAG,EAAGA,GAAG,CAACN,IADX;AAEC,QAAA,IAAI,EAAGM,GAAG,CAACN,IAFZ;AAGC,QAAA,EAAE,EAAGU,8BAHN;AAIC,QAAA,QAAQ;AAJT,SAMC,4BAAC,gCAAD;AAAQ,QAAA,OAAO,EAAC;AAAhB,SACC,4BAAC,oBAAD,QACC,4BAAC,kCAAD,QACGJ,GAAG,CAACJ,KADP,CADD,CADD,EAMC,4BAAC,oBAAD,QACC,4BAAC,WAAD;AACC,QAAA,IAAI,EACH,qBACGS,kBADH,GAEGC;AAJL,QADD,CAND,CAND,CADD;AAyBA,KA1BC,CADH,CADD,CADD,CADD,CAJD,EAuCGtB,QAAQ,CAACO,MAAT,IACDP,QAAQ,CAACmB,GAAT,CAAgBI,OAAF,IAAe;AAC5B,aACC,4BAAC,yCAAD;AACC,QAAA,GAAG,EAAI,GAAGA,OAAO,CAACb,IAAM,OADzB;AAEC,QAAA,IAAI,EAAGa,OAAO,CAACb;AAFhB,SAIC,4BAAC,gBAAD;AAAM,QAAA,YAAY,MAAlB;AAAmB,QAAA,IAAI,EAAC;AAAxB,SACC,4BAAC,sBAAD;AACC,QAAA,YAAY,EAAG,KADhB;AAEC,QAAA,OAAO,EAAC,MAFT;AAGC,QAAA,IAAI,EAAC,OAHN;AAIC,QAAA,GAAG,EAAC;AAJL,SAMC,4BAAC,6CAAD;AACC,QAAA,IAAI,EACH,qBACGY,mBADH,GAEGD,kBAJL;AAMC,sBAAa,cACZ,+BADY;AANd,QAND,EAgBC,4BAAC,8BAAD;AAAM,QAAA,IAAI,EAAC;AAAX,SACGE,OAAO,CAACZ,QADX,CAhBD,CADD,EAqBC,4BAAC,oBAAD,QAAYY,OAAO,CAACV,OAApB,CArBD,CAJD,CADD;AA8BA,KA/BD,CAxCF,CADD;AA2EA;;AAED,SAAOI,YAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\t__experimentalNavigatorProvider as NavigatorProvider,\n\t__experimentalNavigatorScreen as NavigatorScreen,\n\t__experimentalNavigatorButton as NavigatorButton,\n\t__experimentalNavigatorBackButton as NavigatorBackButton,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalHStack as HStack,\n\t__experimentalText as Text,\n\t__experimentalTruncate as Truncate,\n\tFlexItem,\n\tTabPanel,\n\tCard,\n\tCardHeader,\n\tCardBody,\n} from '@wordpress/components';\nimport { useMemo, useCallback, useState } from '@wordpress/element';\nimport { chevronLeft, chevronRight, Icon } from '@wordpress/icons';\nimport { isRTL, __ } from '@wordpress/i18n';\n\nconst PREFERENCES_MENU = 'preferences-menu';\n\nexport default function PreferencesModalTabs( { sections } ) {\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\n\t// This is also used to sync the two different rendered components\n\t// between small and large viewports.\n\tconst [ activeMenu, setActiveMenu ] = useState( PREFERENCES_MENU );\n\t/**\n\t * Create helper objects from `sections` for easier data handling.\n\t * `tabs` is used for creating the `TabPanel` and `sectionsContentMap`\n\t * is used for easier access to active tab's content.\n\t */\n\tconst { tabs, sectionsContentMap } = useMemo( () => {\n\t\tlet mappedTabs = {\n\t\t\ttabs: [],\n\t\t\tsectionsContentMap: {},\n\t\t};\n\t\tif ( sections.length ) {\n\t\t\tmappedTabs = sections.reduce(\n\t\t\t\t( accumulator, { name, tabLabel: title, content } ) => {\n\t\t\t\t\taccumulator.tabs.push( { name, title } );\n\t\t\t\t\taccumulator.sectionsContentMap[ name ] = content;\n\t\t\t\t\treturn accumulator;\n\t\t\t\t},\n\t\t\t\t{ tabs: [], sectionsContentMap: {} }\n\t\t\t);\n\t\t}\n\t\treturn mappedTabs;\n\t}, [ sections ] );\n\n\tconst getCurrentTab = useCallback(\n\t\t( tab ) => sectionsContentMap[ tab.name ] || null,\n\t\t[ sectionsContentMap ]\n\t);\n\n\tlet modalContent;\n\t// We render different components based on the viewport size.\n\tif ( isLargeViewport ) {\n\t\tmodalContent = (\n\t\t\t<TabPanel\n\t\t\t\tclassName=\"interface-preferences__tabs\"\n\t\t\t\ttabs={ tabs }\n\t\t\t\tinitialTabName={\n\t\t\t\t\tactiveMenu !== PREFERENCES_MENU ? activeMenu : undefined\n\t\t\t\t}\n\t\t\t\tonSelect={ setActiveMenu }\n\t\t\t\torientation=\"vertical\"\n\t\t\t>\n\t\t\t\t{ getCurrentTab }\n\t\t\t</TabPanel>\n\t\t);\n\t} else {\n\t\tmodalContent = (\n\t\t\t<NavigatorProvider\n\t\t\t\tinitialPath=\"/\"\n\t\t\t\tclassName=\"interface-preferences__provider\"\n\t\t\t>\n\t\t\t\t<NavigatorScreen path=\"/\">\n\t\t\t\t\t<Card isBorderless size=\"small\">\n\t\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t\t{ tabs.map( ( tab ) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<NavigatorButton\n\t\t\t\t\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\t\t\t\t\tpath={ tab.name }\n\t\t\t\t\t\t\t\t\t\t\tas={ Item }\n\t\t\t\t\t\t\t\t\t\t\tisAction\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Truncate>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tisRTL()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? chevronLeft\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: chevronRight\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t\t\t</NavigatorButton>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t\t</CardBody>\n\t\t\t\t\t</Card>\n\t\t\t\t</NavigatorScreen>\n\t\t\t\t{ sections.length &&\n\t\t\t\t\tsections.map( ( section ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<NavigatorScreen\n\t\t\t\t\t\t\t\tkey={ `${ section.name }-menu` }\n\t\t\t\t\t\t\t\tpath={ section.name }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Card isBorderless size=\"large\">\n\t\t\t\t\t\t\t\t\t<CardHeader\n\t\t\t\t\t\t\t\t\t\tisBorderless={ false }\n\t\t\t\t\t\t\t\t\t\tjustify=\"left\"\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\tgap=\"6\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<NavigatorBackButton\n\t\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\t\tisRTL()\n\t\t\t\t\t\t\t\t\t\t\t\t\t? chevronRight\n\t\t\t\t\t\t\t\t\t\t\t\t\t: chevronLeft\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\taria-label={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t'Navigate to the previous view'\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<Text size=\"16\">\n\t\t\t\t\t\t\t\t\t\t\t{ section.tabLabel }\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t\t\t<CardBody>{ section.content }</CardBody>\n\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t</NavigatorScreen>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t</NavigatorProvider>\n\t\t);\n\t}\n\n\treturn modalContent;\n}\n"]}

package/build-module/components/fullscreen-mode/index.js

@@ -11,7 +11,7 @@ const FullscreenMode = _ref => {
     let isSticky = false; // `is-fullscreen-mode` is set in PHP as a body class by Gutenberg, and this causes
     // `sticky-menu` to be applied by WordPress and prevents the admin menu being scrolled
     // even if `is-fullscreen-mode` is then removed. Let's remove `sticky-menu` here as
-    // a consequence of the FullscreenMode setup
+    // a consequence of the FullscreenMode setup.
 
     if (document.body.classList.contains('sticky-menu')) {
       isSticky = true;

package/build-module/components/fullscreen-mode/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/interface/src/components/fullscreen-mode/index.js"],"names":["useEffect","FullscreenMode","isActive","isSticky","document","body","classList","contains","remove","add"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,oBAA1B;;AAEA,MAAMC,cAAc,GAAG,QAAoB;AAAA,MAAlB;AAAEC,IAAAA;AAAF,GAAkB;AAC1CF,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAIG,QAAQ,GAAG,KAAf,CADgB,CAEhB;AACA;AACA;AACA;;AACA,QAAKC,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBC,QAAxB,CAAkC,aAAlC,CAAL,EAAyD;AACxDJ,MAAAA,QAAQ,GAAG,IAAX;AACAC,MAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBE,MAAxB,CAAgC,aAAhC;AACA;;AAED,WAAO,MAAM;AACZ,UAAKL,QAAL,EAAgB;AACfC,QAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBG,GAAxB,CAA6B,aAA7B;AACA;AACD,KAJD;AAKA,GAhBQ,EAgBN,EAhBM,CAAT;AAkBAT,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKE,QAAL,EAAgB;AACfE,MAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBG,GAAxB,CAA6B,oBAA7B;AACA,KAFD,MAEO;AACNL,MAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBE,MAAxB,CAAgC,oBAAhC;AACA;;AAED,WAAO,MAAM;AACZ,UAAKN,QAAL,EAAgB;AACfE,QAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBE,MAAxB,CAAgC,oBAAhC;AACA;AACD,KAJD;AAKA,GAZQ,EAYN,CAAEN,QAAF,CAZM,CAAT;AAcA,SAAO,IAAP;AACA,CAlCD;;AAmCA,eAAeD,cAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\nconst FullscreenMode = ( { isActive } ) => {\n\tuseEffect( () => {\n\t\tlet isSticky = false;\n\t\t// `is-fullscreen-mode` is set in PHP as a body class by Gutenberg, and this causes\n\t\t// `sticky-menu` to be applied by WordPress and prevents the admin menu being scrolled\n\t\t// even if `is-fullscreen-mode` is then removed. Let's remove `sticky-menu` here as\n\t\t// a consequence of the FullscreenMode setup\n\t\tif ( document.body.classList.contains( 'sticky-menu' ) ) {\n\t\t\tisSticky = true;\n\t\t\tdocument.body.classList.remove( 'sticky-menu' );\n\t\t}\n\n\t\treturn () => {\n\t\t\tif ( isSticky ) {\n\t\t\t\tdocument.body.classList.add( 'sticky-menu' );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tif ( isActive ) {\n\t\t\tdocument.body.classList.add( 'is-fullscreen-mode' );\n\t\t} else {\n\t\t\tdocument.body.classList.remove( 'is-fullscreen-mode' );\n\t\t}\n\n\t\treturn () => {\n\t\t\tif ( isActive ) {\n\t\t\t\tdocument.body.classList.remove( 'is-fullscreen-mode' );\n\t\t\t}\n\t\t};\n\t}, [ isActive ] );\n\n\treturn null;\n};\nexport default FullscreenMode;\n"]}
+{"version":3,"sources":["@wordpress/interface/src/components/fullscreen-mode/index.js"],"names":["useEffect","FullscreenMode","isActive","isSticky","document","body","classList","contains","remove","add"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,oBAA1B;;AAEA,MAAMC,cAAc,GAAG,QAAoB;AAAA,MAAlB;AAAEC,IAAAA;AAAF,GAAkB;AAC1CF,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAIG,QAAQ,GAAG,KAAf,CADgB,CAEhB;AACA;AACA;AACA;;AACA,QAAKC,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBC,QAAxB,CAAkC,aAAlC,CAAL,EAAyD;AACxDJ,MAAAA,QAAQ,GAAG,IAAX;AACAC,MAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBE,MAAxB,CAAgC,aAAhC;AACA;;AAED,WAAO,MAAM;AACZ,UAAKL,QAAL,EAAgB;AACfC,QAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBG,GAAxB,CAA6B,aAA7B;AACA;AACD,KAJD;AAKA,GAhBQ,EAgBN,EAhBM,CAAT;AAkBAT,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKE,QAAL,EAAgB;AACfE,MAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBG,GAAxB,CAA6B,oBAA7B;AACA,KAFD,MAEO;AACNL,MAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBE,MAAxB,CAAgC,oBAAhC;AACA;;AAED,WAAO,MAAM;AACZ,UAAKN,QAAL,EAAgB;AACfE,QAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBE,MAAxB,CAAgC,oBAAhC;AACA;AACD,KAJD;AAKA,GAZQ,EAYN,CAAEN,QAAF,CAZM,CAAT;AAcA,SAAO,IAAP;AACA,CAlCD;;AAmCA,eAAeD,cAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\nconst FullscreenMode = ( { isActive } ) => {\n\tuseEffect( () => {\n\t\tlet isSticky = false;\n\t\t// `is-fullscreen-mode` is set in PHP as a body class by Gutenberg, and this causes\n\t\t// `sticky-menu` to be applied by WordPress and prevents the admin menu being scrolled\n\t\t// even if `is-fullscreen-mode` is then removed. Let's remove `sticky-menu` here as\n\t\t// a consequence of the FullscreenMode setup.\n\t\tif ( document.body.classList.contains( 'sticky-menu' ) ) {\n\t\t\tisSticky = true;\n\t\t\tdocument.body.classList.remove( 'sticky-menu' );\n\t\t}\n\n\t\treturn () => {\n\t\t\tif ( isSticky ) {\n\t\t\t\tdocument.body.classList.add( 'sticky-menu' );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tif ( isActive ) {\n\t\t\tdocument.body.classList.add( 'is-fullscreen-mode' );\n\t\t} else {\n\t\t\tdocument.body.classList.remove( 'is-fullscreen-mode' );\n\t\t}\n\n\t\treturn () => {\n\t\t\tif ( isActive ) {\n\t\t\t\tdocument.body.classList.remove( 'is-fullscreen-mode' );\n\t\t\t}\n\t\t};\n\t}, [ isActive ] );\n\n\treturn null;\n};\nexport default FullscreenMode;\n"]}

package/build-module/components/index.js

@@ -6,4 +6,8 @@ export { default as PinnedItems } from './pinned-items';
 export { default as MoreMenuDropdown } from './more-menu-dropdown';
 export { default as MoreMenuFeatureToggle } from './more-menu-feature-toggle';
 export { default as ActionItem } from './action-item';
+export { default as PreferencesModal } from './preferences-modal';
+export { default as PreferencesModalTabs } from './preferences-modal-tabs';
+export { default as PreferencesModalSection } from './preferences-modal-section';
+export { default as ___unstablePreferencesModalBaseOption } from './preferences-modal-base-option';
 //# sourceMappingURL=index.js.map

package/build-module/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/interface/src/components/index.js"],"names":["default","ComplementaryArea","ComplementaryAreaMoreMenuItem","FullscreenMode","InterfaceSkeleton","PinnedItems","MoreMenuDropdown","MoreMenuFeatureToggle","ActionItem"],"mappings":"AAAA,SAASA,OAAO,IAAIC,iBAApB,QAA6C,sBAA7C;AACA,SAASD,OAAO,IAAIE,6BAApB,QAAyD,qCAAzD;AACA,SAASF,OAAO,IAAIG,cAApB,QAA0C,mBAA1C;AACA,SAASH,OAAO,IAAII,iBAApB,QAA6C,sBAA7C;AACA,SAASJ,OAAO,IAAIK,WAApB,QAAuC,gBAAvC;AACA,SAASL,OAAO,IAAIM,gBAApB,QAA4C,sBAA5C;AACA,SAASN,OAAO,IAAIO,qBAApB,QAAiD,4BAAjD;AACA,SAASP,OAAO,IAAIQ,UAApB,QAAsC,eAAtC","sourcesContent":["export { default as ComplementaryArea } from './complementary-area';\nexport { default as ComplementaryAreaMoreMenuItem } from './complementary-area-more-menu-item';\nexport { default as FullscreenMode } from './fullscreen-mode';\nexport { default as InterfaceSkeleton } from './interface-skeleton';\nexport { default as PinnedItems } from './pinned-items';\nexport { default as MoreMenuDropdown } from './more-menu-dropdown';\nexport { default as MoreMenuFeatureToggle } from './more-menu-feature-toggle';\nexport { default as ActionItem } from './action-item';\n"]}
+{"version":3,"sources":["@wordpress/interface/src/components/index.js"],"names":["default","ComplementaryArea","ComplementaryAreaMoreMenuItem","FullscreenMode","InterfaceSkeleton","PinnedItems","MoreMenuDropdown","MoreMenuFeatureToggle","ActionItem","PreferencesModal","PreferencesModalTabs","PreferencesModalSection","___unstablePreferencesModalBaseOption"],"mappings":"AAAA,SAASA,OAAO,IAAIC,iBAApB,QAA6C,sBAA7C;AACA,SAASD,OAAO,IAAIE,6BAApB,QAAyD,qCAAzD;AACA,SAASF,OAAO,IAAIG,cAApB,QAA0C,mBAA1C;AACA,SAASH,OAAO,IAAII,iBAApB,QAA6C,sBAA7C;AACA,SAASJ,OAAO,IAAIK,WAApB,QAAuC,gBAAvC;AACA,SAASL,OAAO,IAAIM,gBAApB,QAA4C,sBAA5C;AACA,SAASN,OAAO,IAAIO,qBAApB,QAAiD,4BAAjD;AACA,SAASP,OAAO,IAAIQ,UAApB,QAAsC,eAAtC;AACA,SAASR,OAAO,IAAIS,gBAApB,QAA4C,qBAA5C;AACA,SAAST,OAAO,IAAIU,oBAApB,QAAgD,0BAAhD;AACA,SAASV,OAAO,IAAIW,uBAApB,QAAmD,6BAAnD;AACA,SAASX,OAAO,IAAIY,qCAApB,QAAiE,iCAAjE","sourcesContent":["export { default as ComplementaryArea } from './complementary-area';\nexport { default as ComplementaryAreaMoreMenuItem } from './complementary-area-more-menu-item';\nexport { default as FullscreenMode } from './fullscreen-mode';\nexport { default as InterfaceSkeleton } from './interface-skeleton';\nexport { default as PinnedItems } from './pinned-items';\nexport { default as MoreMenuDropdown } from './more-menu-dropdown';\nexport { default as MoreMenuFeatureToggle } from './more-menu-feature-toggle';\nexport { default as ActionItem } from './action-item';\nexport { default as PreferencesModal } from './preferences-modal';\nexport { default as PreferencesModalTabs } from './preferences-modal-tabs';\nexport { default as PreferencesModalSection } from './preferences-modal-section';\nexport { default as ___unstablePreferencesModalBaseOption } from './preferences-modal-base-option';\n"]}

package/build-module/components/preferences-modal/index.js

@@ -0,0 +1,20 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+export default function PreferencesModal(_ref) {
+  let {
+    closeModal,
+    children
+  } = _ref;
+  return createElement(Modal, {
+    className: "interface-preferences-modal",
+    title: __('Preferences'),
+    closeLabel: __('Close'),
+    onRequestClose: closeModal
+  }, children);
+}
+//# sourceMappingURL=index.js.map

package/build-module/components/preferences-modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/interface/src/components/preferences-modal/index.js"],"names":["Modal","__","PreferencesModal","closeModal","children"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,KAAT,QAAsB,uBAAtB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA,eAAe,SAASC,gBAAT,OAAsD;AAAA,MAA3B;AAAEC,IAAAA,UAAF;AAAcC,IAAAA;AAAd,GAA2B;AACpE,SACC,cAAC,KAAD;AACC,IAAA,SAAS,EAAC,6BADX;AAEC,IAAA,KAAK,EAAGH,EAAE,CAAE,aAAF,CAFX;AAGC,IAAA,UAAU,EAAGA,EAAE,CAAE,OAAF,CAHhB;AAIC,IAAA,cAAc,EAAGE;AAJlB,KAMGC,QANH,CADD;AAUA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Modal } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\nexport default function PreferencesModal( { closeModal, children } ) {\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"interface-preferences-modal\"\n\t\t\ttitle={ __( 'Preferences' ) }\n\t\t\tcloseLabel={ __( 'Close' ) }\n\t\t\tonRequestClose={ closeModal }\n\t\t>\n\t\t\t{ children }\n\t\t</Modal>\n\t);\n}\n"]}

package/build-module/components/preferences-modal-base-option/index.js

@@ -0,0 +1,27 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { ToggleControl } from '@wordpress/components';
+
+function BaseOption(_ref) {
+  let {
+    help,
+    label,
+    isChecked,
+    onChange,
+    children
+  } = _ref;
+  return createElement("div", {
+    className: "interface-preferences-modal__option"
+  }, createElement(ToggleControl, {
+    help: help,
+    label: label,
+    checked: isChecked,
+    onChange: onChange
+  }), children);
+}
+
+export default BaseOption;
+//# sourceMappingURL=index.js.map

package/build-module/components/preferences-modal-base-option/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/interface/src/components/preferences-modal-base-option/index.js"],"names":["ToggleControl","BaseOption","help","label","isChecked","onChange","children"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,uBAA9B;;AAEA,SAASC,UAAT,OAAsE;AAAA,MAAjD;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,KAAR;AAAeC,IAAAA,SAAf;AAA0BC,IAAAA,QAA1B;AAAoCC,IAAAA;AAApC,GAAiD;AACrE,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,aAAD;AACC,IAAA,IAAI,EAAGJ,IADR;AAEC,IAAA,KAAK,EAAGC,KAFT;AAGC,IAAA,OAAO,EAAGC,SAHX;AAIC,IAAA,QAAQ,EAAGC;AAJZ,IADD,EAOGC,QAPH,CADD;AAWA;;AAED,eAAeL,UAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ToggleControl } from '@wordpress/components';\n\nfunction BaseOption( { help, label, isChecked, onChange, children } ) {\n\treturn (\n\t\t<div className=\"interface-preferences-modal__option\">\n\t\t\t<ToggleControl\n\t\t\t\thelp={ help }\n\t\t\t\tlabel={ label }\n\t\t\t\tchecked={ isChecked }\n\t\t\t\tonChange={ onChange }\n\t\t\t/>\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\nexport default BaseOption;\n"]}

package/build-module/components/preferences-modal-section/index.js

@@ -0,0 +1,19 @@
+import { createElement } from "@wordpress/element";
+
+const Section = _ref => {
+  let {
+    description,
+    title,
+    children
+  } = _ref;
+  return createElement("fieldset", {
+    className: "interface-preferences-modal__section"
+  }, createElement("legend", null, createElement("h2", {
+    className: "interface-preferences-modal__section-title"
+  }, title), description && createElement("p", {
+    className: "interface-preferences-modal__section-description"
+  }, description)), children);
+};
+
+export default Section;
+//# sourceMappingURL=index.js.map

package/build-module/components/preferences-modal-section/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/interface/src/components/preferences-modal-section/index.js"],"names":["Section","description","title","children"],"mappings":";;AAAA,MAAMA,OAAO,GAAG;AAAA,MAAE;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,KAAf;AAAsBC,IAAAA;AAAtB,GAAF;AAAA,SACf;AAAU,IAAA,SAAS,EAAC;AAApB,KACC,8BACC;AAAI,IAAA,SAAS,EAAC;AAAd,KACGD,KADH,CADD,EAIGD,WAAW,IACZ;AAAG,IAAA,SAAS,EAAC;AAAb,KACGA,WADH,CALF,CADD,EAWGE,QAXH,CADe;AAAA,CAAhB;;AAgBA,eAAeH,OAAf","sourcesContent":["const Section = ( { description, title, children } ) => (\n\t<fieldset className=\"interface-preferences-modal__section\">\n\t\t<legend>\n\t\t\t<h2 className=\"interface-preferences-modal__section-title\">\n\t\t\t\t{ title }\n\t\t\t</h2>\n\t\t\t{ description && (\n\t\t\t\t<p className=\"interface-preferences-modal__section-description\">\n\t\t\t\t\t{ description }\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</legend>\n\t\t{ children }\n\t</fieldset>\n);\n\nexport default Section;\n"]}

package/build-module/components/preferences-modal-tabs/index.js

@@ -0,0 +1,110 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch } from '@wordpress/compose';
+import { __experimentalNavigatorProvider as NavigatorProvider, __experimentalNavigatorScreen as NavigatorScreen, __experimentalNavigatorButton as NavigatorButton, __experimentalNavigatorBackButton as NavigatorBackButton, __experimentalItemGroup as ItemGroup, __experimentalItem as Item, __experimentalHStack as HStack, __experimentalText as Text, __experimentalTruncate as Truncate, FlexItem, TabPanel, Card, CardHeader, CardBody } from '@wordpress/components';
+import { useMemo, useCallback, useState } from '@wordpress/element';
+import { chevronLeft, chevronRight, Icon } from '@wordpress/icons';
+import { isRTL, __ } from '@wordpress/i18n';
+const PREFERENCES_MENU = 'preferences-menu';
+export default function PreferencesModalTabs(_ref) {
+  let {
+    sections
+  } = _ref;
+  const isLargeViewport = useViewportMatch('medium'); // This is also used to sync the two different rendered components
+  // between small and large viewports.
+
+  const [activeMenu, setActiveMenu] = useState(PREFERENCES_MENU);
+  /**
+   * Create helper objects from `sections` for easier data handling.
+   * `tabs` is used for creating the `TabPanel` and `sectionsContentMap`
+   * is used for easier access to active tab's content.
+   */
+
+  const {
+    tabs,
+    sectionsContentMap
+  } = useMemo(() => {
+    let mappedTabs = {
+      tabs: [],
+      sectionsContentMap: {}
+    };
+
+    if (sections.length) {
+      mappedTabs = sections.reduce((accumulator, _ref2) => {
+        let {
+          name,
+          tabLabel: title,
+          content
+        } = _ref2;
+        accumulator.tabs.push({
+          name,
+          title
+        });
+        accumulator.sectionsContentMap[name] = content;
+        return accumulator;
+      }, {
+        tabs: [],
+        sectionsContentMap: {}
+      });
+    }
+
+    return mappedTabs;
+  }, [sections]);
+  const getCurrentTab = useCallback(tab => sectionsContentMap[tab.name] || null, [sectionsContentMap]);
+  let modalContent; // We render different components based on the viewport size.
+
+  if (isLargeViewport) {
+    modalContent = createElement(TabPanel, {
+      className: "interface-preferences__tabs",
+      tabs: tabs,
+      initialTabName: activeMenu !== PREFERENCES_MENU ? activeMenu : undefined,
+      onSelect: setActiveMenu,
+      orientation: "vertical"
+    }, getCurrentTab);
+  } else {
+    modalContent = createElement(NavigatorProvider, {
+      initialPath: "/",
+      className: "interface-preferences__provider"
+    }, createElement(NavigatorScreen, {
+      path: "/"
+    }, createElement(Card, {
+      isBorderless: true,
+      size: "small"
+    }, createElement(CardBody, null, createElement(ItemGroup, null, tabs.map(tab => {
+      return createElement(NavigatorButton, {
+        key: tab.name,
+        path: tab.name,
+        as: Item,
+        isAction: true
+      }, createElement(HStack, {
+        justify: "space-between"
+      }, createElement(FlexItem, null, createElement(Truncate, null, tab.title)), createElement(FlexItem, null, createElement(Icon, {
+        icon: isRTL() ? chevronLeft : chevronRight
+      }))));
+    }))))), sections.length && sections.map(section => {
+      return createElement(NavigatorScreen, {
+        key: `${section.name}-menu`,
+        path: section.name
+      }, createElement(Card, {
+        isBorderless: true,
+        size: "large"
+      }, createElement(CardHeader, {
+        isBorderless: false,
+        justify: "left",
+        size: "small",
+        gap: "6"
+      }, createElement(NavigatorBackButton, {
+        icon: isRTL() ? chevronRight : chevronLeft,
+        "aria-label": __('Navigate to the previous view')
+      }), createElement(Text, {
+        size: "16"
+      }, section.tabLabel)), createElement(CardBody, null, section.content)));
+    }));
+  }
+
+  return modalContent;
+}
+//# sourceMappingURL=index.js.map

package/build-module/components/preferences-modal-tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/interface/src/components/preferences-modal-tabs/index.js"],"names":["useViewportMatch","__experimentalNavigatorProvider","NavigatorProvider","__experimentalNavigatorScreen","NavigatorScreen","__experimentalNavigatorButton","NavigatorButton","__experimentalNavigatorBackButton","NavigatorBackButton","__experimentalItemGroup","ItemGroup","__experimentalItem","Item","__experimentalHStack","HStack","__experimentalText","Text","__experimentalTruncate","Truncate","FlexItem","TabPanel","Card","CardHeader","CardBody","useMemo","useCallback","useState","chevronLeft","chevronRight","Icon","isRTL","__","PREFERENCES_MENU","PreferencesModalTabs","sections","isLargeViewport","activeMenu","setActiveMenu","tabs","sectionsContentMap","mappedTabs","length","reduce","accumulator","name","tabLabel","title","content","push","getCurrentTab","tab","modalContent","undefined","map","section"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\t__experimentalNavigatorProvider as NavigatorProvider,\n\t__experimentalNavigatorScreen as NavigatorScreen,\n\t__experimentalNavigatorButton as NavigatorButton,\n\t__experimentalNavigatorBackButton as NavigatorBackButton,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalHStack as HStack,\n\t__experimentalText as Text,\n\t__experimentalTruncate as Truncate,\n\tFlexItem,\n\tTabPanel,\n\tCard,\n\tCardHeader,\n\tCardBody,\n} from '@wordpress/components';\nimport { useMemo, useCallback, useState } from '@wordpress/element';\nimport { chevronLeft, chevronRight, Icon } from '@wordpress/icons';\nimport { isRTL, __ } from '@wordpress/i18n';\n\nconst PREFERENCES_MENU = 'preferences-menu';\n\nexport default function PreferencesModalTabs( { sections } ) {\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\n\t// This is also used to sync the two different rendered components\n\t// between small and large viewports.\n\tconst [ activeMenu, setActiveMenu ] = useState( PREFERENCES_MENU );\n\t/**\n\t * Create helper objects from `sections` for easier data handling.\n\t * `tabs` is used for creating the `TabPanel` and `sectionsContentMap`\n\t * is used for easier access to active tab's content.\n\t */\n\tconst { tabs, sectionsContentMap } = useMemo( () => {\n\t\tlet mappedTabs = {\n\t\t\ttabs: [],\n\t\t\tsectionsContentMap: {},\n\t\t};\n\t\tif ( sections.length ) {\n\t\t\tmappedTabs = sections.reduce(\n\t\t\t\t( accumulator, { name, tabLabel: title, content } ) => {\n\t\t\t\t\taccumulator.tabs.push( { name, title } );\n\t\t\t\t\taccumulator.sectionsContentMap[ name ] = content;\n\t\t\t\t\treturn accumulator;\n\t\t\t\t},\n\t\t\t\t{ tabs: [], sectionsContentMap: {} }\n\t\t\t);\n\t\t}\n\t\treturn mappedTabs;\n\t}, [ sections ] );\n\n\tconst getCurrentTab = useCallback(\n\t\t( tab ) => sectionsContentMap[ tab.name ] || null,\n\t\t[ sectionsContentMap ]\n\t);\n\n\tlet modalContent;\n\t// We render different components based on the viewport size.\n\tif ( isLargeViewport ) {\n\t\tmodalContent = (\n\t\t\t<TabPanel\n\t\t\t\tclassName=\"interface-preferences__tabs\"\n\t\t\t\ttabs={ tabs }\n\t\t\t\tinitialTabName={\n\t\t\t\t\tactiveMenu !== PREFERENCES_MENU ? activeMenu : undefined\n\t\t\t\t}\n\t\t\t\tonSelect={ setActiveMenu }\n\t\t\t\torientation=\"vertical\"\n\t\t\t>\n\t\t\t\t{ getCurrentTab }\n\t\t\t</TabPanel>\n\t\t);\n\t} else {\n\t\tmodalContent = (\n\t\t\t<NavigatorProvider\n\t\t\t\tinitialPath=\"/\"\n\t\t\t\tclassName=\"interface-preferences__provider\"\n\t\t\t>\n\t\t\t\t<NavigatorScreen path=\"/\">\n\t\t\t\t\t<Card isBorderless size=\"small\">\n\t\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t\t{ tabs.map( ( tab ) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<NavigatorButton\n\t\t\t\t\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\t\t\t\t\tpath={ tab.name }\n\t\t\t\t\t\t\t\t\t\t\tas={ Item }\n\t\t\t\t\t\t\t\t\t\t\tisAction\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Truncate>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tisRTL()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? chevronLeft\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: chevronRight\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t\t\t</NavigatorButton>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t\t</CardBody>\n\t\t\t\t\t</Card>\n\t\t\t\t</NavigatorScreen>\n\t\t\t\t{ sections.length &&\n\t\t\t\t\tsections.map( ( section ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<NavigatorScreen\n\t\t\t\t\t\t\t\tkey={ `${ section.name }-menu` }\n\t\t\t\t\t\t\t\tpath={ section.name }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Card isBorderless size=\"large\">\n\t\t\t\t\t\t\t\t\t<CardHeader\n\t\t\t\t\t\t\t\t\t\tisBorderless={ false }\n\t\t\t\t\t\t\t\t\t\tjustify=\"left\"\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\tgap=\"6\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<NavigatorBackButton\n\t\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\t\tisRTL()\n\t\t\t\t\t\t\t\t\t\t\t\t\t? chevronRight\n\t\t\t\t\t\t\t\t\t\t\t\t\t: chevronLeft\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\taria-label={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t'Navigate to the previous view'\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<Text size=\"16\">\n\t\t\t\t\t\t\t\t\t\t\t{ section.tabLabel }\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t\t\t<CardBody>{ section.content }</CardBody>\n\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t</NavigatorScreen>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t</NavigatorProvider>\n\t\t);\n\t}\n\n\treturn modalContent;\n}\n"]}