@wordpress/preferences 3.35.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/build/components/preference-base-option/index.js +11 -10
  3. package/build/components/preference-base-option/index.js.map +1 -1
  4. package/build/components/preference-toggle-control/index.js +2 -2
  5. package/build/components/preference-toggle-control/index.js.map +1 -1
  6. package/build/components/preference-toggle-menu-item/index.js +5 -4
  7. package/build/components/preference-toggle-menu-item/index.js.map +1 -1
  8. package/build/components/preferences-modal/index.js +5 -4
  9. package/build/components/preferences-modal/index.js.map +1 -1
  10. package/build/components/preferences-modal-section/index.js +17 -12
  11. package/build/components/preferences-modal-section/index.js.map +1 -1
  12. package/build/components/preferences-modal-tabs/index.js +78 -56
  13. package/build/components/preferences-modal-tabs/index.js.map +1 -1
  14. package/build-module/components/preference-base-option/index.js +12 -10
  15. package/build-module/components/preference-base-option/index.js.map +1 -1
  16. package/build-module/components/preference-toggle-control/index.js +2 -2
  17. package/build-module/components/preference-toggle-control/index.js.map +1 -1
  18. package/build-module/components/preference-toggle-menu-item/index.js +5 -4
  19. package/build-module/components/preference-toggle-menu-item/index.js.map +1 -1
  20. package/build-module/components/preferences-modal/index.js +5 -4
  21. package/build-module/components/preferences-modal/index.js.map +1 -1
  22. package/build-module/components/preferences-modal-section/index.js +18 -12
  23. package/build-module/components/preferences-modal-section/index.js.map +1 -1
  24. package/build-module/components/preferences-modal-tabs/index.js +79 -56
  25. package/build-module/components/preferences-modal-tabs/index.js.map +1 -1
  26. package/build-style/style-rtl.css +4 -4
  27. package/build-style/style.css +4 -4
  28. package/package.json +13 -12
  29. package/src/components/preferences-modal-tabs/style.scss +4 -5
package/CHANGELOG.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
+ ## 4.0.0 (2024-05-31)
6
+
7
+ ### Breaking Changes
8
+
9
+ - Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
10
+
5
11
  ## 3.35.0 (2024-05-16)
6
12
 
7
13
  ### Internal
@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _react = require("react");
8
7
  var _components = require("@wordpress/components");
8
+ var _jsxRuntime = require("react/jsx-runtime");
9
9
  /**
10
10
  * WordPress dependencies
11
11
  */
@@ -17,15 +17,16 @@ function BaseOption({
17
17
  onChange,
18
18
  children
19
19
  }) {
20
- return (0, _react.createElement)("div", {
21
- className: "preference-base-option"
22
- }, (0, _react.createElement)(_components.ToggleControl, {
23
- __nextHasNoMarginBottom: true,
24
- help: help,
25
- label: label,
26
- checked: isChecked,
27
- onChange: onChange
28
- }), children);
20
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
21
+ className: "preference-base-option",
22
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
23
+ __nextHasNoMarginBottom: true,
24
+ help: help,
25
+ label: label,
26
+ checked: isChecked,
27
+ onChange: onChange
28
+ }), children]
29
+ });
29
30
  }
30
31
  var _default = exports.default = BaseOption;
31
32
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["_components","require","BaseOption","help","label","isChecked","onChange","children","_react","createElement","className","ToggleControl","__nextHasNoMarginBottom","checked","_default","exports","default"],"sources":["@wordpress/preferences/src/components/preference-base-option/index.js"],"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=\"preference-base-option\">\n\t\t\t<ToggleControl\n\t\t\t\t__nextHasNoMarginBottom\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"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGA,SAASC,UAAUA,CAAE;EAAEC,IAAI;EAAEC,KAAK;EAAEC,SAAS;EAAEC,QAAQ;EAAEC;AAAS,CAAC,EAAG;EACrE,OACC,IAAAC,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAwB,GACtC,IAAAF,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAW,aAAa;IACbC,uBAAuB;IACvBT,IAAI,EAAGA,IAAM;IACbC,KAAK,EAAGA,KAAO;IACfS,OAAO,EAAGR,SAAW;IACrBC,QAAQ,EAAGA;EAAU,CACrB,CAAC,EACAC,QACE,CAAC;AAER;AAAC,IAAAO,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcd,UAAU","ignoreList":[]}
1
+ {"version":3,"names":["_components","require","_jsxRuntime","BaseOption","help","label","isChecked","onChange","children","jsxs","className","jsx","ToggleControl","__nextHasNoMarginBottom","checked","_default","exports","default"],"sources":["@wordpress/preferences/src/components/preference-base-option/index.js"],"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=\"preference-base-option\">\n\t\t\t<ToggleControl\n\t\t\t\t__nextHasNoMarginBottom\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"],"mappings":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAAsD,IAAAC,WAAA,GAAAD,OAAA;AAHtD;AACA;AACA;;AAGA,SAASE,UAAUA,CAAE;EAAEC,IAAI;EAAEC,KAAK;EAAEC,SAAS;EAAEC,QAAQ;EAAEC;AAAS,CAAC,EAAG;EACrE,oBACC,IAAAN,WAAA,CAAAO,IAAA;IAAKC,SAAS,EAAC,wBAAwB;IAAAF,QAAA,gBACtC,IAAAN,WAAA,CAAAS,GAAA,EAACX,WAAA,CAAAY,aAAa;MACbC,uBAAuB;MACvBT,IAAI,EAAGA,IAAM;MACbC,KAAK,EAAGA,KAAO;MACfS,OAAO,EAAGR,SAAW;MACrBC,QAAQ,EAAGA;IAAU,CACrB,CAAC,EACAC,QAAQ;EAAA,CACN,CAAC;AAER;AAAC,IAAAO,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcd,UAAU","ignoreList":[]}
@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = void 0;
8
- var _react = require("react");
9
8
  var _data = require("@wordpress/data");
10
9
  var _store = require("../../store");
11
10
  var _preferenceBaseOption = _interopRequireDefault(require("../preference-base-option"));
11
+ var _jsxRuntime = require("react/jsx-runtime");
12
12
  /**
13
13
  * WordPress dependencies
14
14
  */
@@ -32,7 +32,7 @@ function PreferenceToggleControl(props) {
32
32
  onToggle();
33
33
  toggle(scope, featureName);
34
34
  };
35
- return (0, _react.createElement)(_preferenceBaseOption.default, {
35
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_preferenceBaseOption.default, {
36
36
  onChange: onChange,
37
37
  isChecked: isChecked,
38
38
  ...remainingProps
@@ -1 +1 @@
1
- {"version":3,"names":["_data","require","_store","_preferenceBaseOption","_interopRequireDefault","PreferenceToggleControl","props","scope","featureName","onToggle","remainingProps","isChecked","useSelect","select","preferencesStore","get","toggle","useDispatch","onChange","_react","createElement","default","_default","exports"],"sources":["@wordpress/preferences/src/components/preference-toggle-control/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as preferencesStore } from '../../store';\nimport PreferenceBaseOption from '../preference-base-option';\n\nfunction PreferenceToggleControl( props ) {\n\tconst {\n\t\tscope,\n\t\tfeatureName,\n\t\tonToggle = () => {},\n\t\t...remainingProps\n\t} = props;\n\tconst isChecked = useSelect(\n\t\t( select ) => !! select( preferencesStore ).get( scope, featureName ),\n\t\t[ scope, featureName ]\n\t);\n\tconst { toggle } = useDispatch( preferencesStore );\n\tconst onChange = () => {\n\t\tonToggle();\n\t\ttoggle( scope, featureName );\n\t};\n\n\treturn (\n\t\t<PreferenceBaseOption\n\t\t\tonChange={ onChange }\n\t\t\tisChecked={ isChecked }\n\t\t\t{ ...remainingProps }\n\t\t/>\n\t);\n}\n\nexport default PreferenceToggleControl;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,qBAAA,GAAAC,sBAAA,CAAAH,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAIA,SAASI,uBAAuBA,CAAEC,KAAK,EAAG;EACzC,MAAM;IACLC,KAAK;IACLC,WAAW;IACXC,QAAQ,GAAGA,CAAA,KAAM,CAAC,CAAC;IACnB,GAAGC;EACJ,CAAC,GAAGJ,KAAK;EACT,MAAMK,SAAS,GAAG,IAAAC,eAAS,EACxBC,MAAM,IAAM,CAAC,CAAEA,MAAM,CAAEC,YAAiB,CAAC,CAACC,GAAG,CAAER,KAAK,EAAEC,WAAY,CAAC,EACrE,CAAED,KAAK,EAAEC,WAAW,CACrB,CAAC;EACD,MAAM;IAAEQ;EAAO,CAAC,GAAG,IAAAC,iBAAW,EAAEH,YAAiB,CAAC;EAClD,MAAMI,QAAQ,GAAGA,CAAA,KAAM;IACtBT,QAAQ,CAAC,CAAC;IACVO,MAAM,CAAET,KAAK,EAAEC,WAAY,CAAC;EAC7B,CAAC;EAED,OACC,IAAAW,MAAA,CAAAC,aAAA,EAACjB,qBAAA,CAAAkB,OAAoB;IACpBH,QAAQ,EAAGA,QAAU;IACrBP,SAAS,EAAGA,SAAW;IAAA,GAClBD;EAAc,CACnB,CAAC;AAEJ;AAAC,IAAAY,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAEchB,uBAAuB","ignoreList":[]}
1
+ {"version":3,"names":["_data","require","_store","_preferenceBaseOption","_interopRequireDefault","_jsxRuntime","PreferenceToggleControl","props","scope","featureName","onToggle","remainingProps","isChecked","useSelect","select","preferencesStore","get","toggle","useDispatch","onChange","jsx","default","_default","exports"],"sources":["@wordpress/preferences/src/components/preference-toggle-control/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as preferencesStore } from '../../store';\nimport PreferenceBaseOption from '../preference-base-option';\n\nfunction PreferenceToggleControl( props ) {\n\tconst {\n\t\tscope,\n\t\tfeatureName,\n\t\tonToggle = () => {},\n\t\t...remainingProps\n\t} = props;\n\tconst isChecked = useSelect(\n\t\t( select ) => !! select( preferencesStore ).get( scope, featureName ),\n\t\t[ scope, featureName ]\n\t);\n\tconst { toggle } = useDispatch( preferencesStore );\n\tconst onChange = () => {\n\t\tonToggle();\n\t\ttoggle( scope, featureName );\n\t};\n\n\treturn (\n\t\t<PreferenceBaseOption\n\t\t\tonChange={ onChange }\n\t\t\tisChecked={ isChecked }\n\t\t\t{ ...remainingProps }\n\t\t/>\n\t);\n}\n\nexport default PreferenceToggleControl;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,qBAAA,GAAAC,sBAAA,CAAAH,OAAA;AAA6D,IAAAI,WAAA,GAAAJ,OAAA;AAT7D;AACA;AACA;;AAGA;AACA;AACA;;AAIA,SAASK,uBAAuBA,CAAEC,KAAK,EAAG;EACzC,MAAM;IACLC,KAAK;IACLC,WAAW;IACXC,QAAQ,GAAGA,CAAA,KAAM,CAAC,CAAC;IACnB,GAAGC;EACJ,CAAC,GAAGJ,KAAK;EACT,MAAMK,SAAS,GAAG,IAAAC,eAAS,EACxBC,MAAM,IAAM,CAAC,CAAEA,MAAM,CAAEC,YAAiB,CAAC,CAACC,GAAG,CAAER,KAAK,EAAEC,WAAY,CAAC,EACrE,CAAED,KAAK,EAAEC,WAAW,CACrB,CAAC;EACD,MAAM;IAAEQ;EAAO,CAAC,GAAG,IAAAC,iBAAW,EAAEH,YAAiB,CAAC;EAClD,MAAMI,QAAQ,GAAGA,CAAA,KAAM;IACtBT,QAAQ,CAAC,CAAC;IACVO,MAAM,CAAET,KAAK,EAAEC,WAAY,CAAC;EAC7B,CAAC;EAED,oBACC,IAAAJ,WAAA,CAAAe,GAAA,EAACjB,qBAAA,CAAAkB,OAAoB;IACpBF,QAAQ,EAAGA,QAAU;IACrBP,SAAS,EAAGA,SAAW;IAAA,GAClBD;EAAc,CACnB,CAAC;AAEJ;AAAC,IAAAW,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAEcf,uBAAuB","ignoreList":[]}
@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = PreferenceToggleMenuItem;
7
- var _react = require("react");
8
7
  var _data = require("@wordpress/data");
9
8
  var _components = require("@wordpress/components");
10
9
  var _i18n = require("@wordpress/i18n");
11
10
  var _icons = require("@wordpress/icons");
12
11
  var _a11y = require("@wordpress/a11y");
13
12
  var _store = require("../../store");
13
+ var _jsxRuntime = require("react/jsx-runtime");
14
14
  /**
15
15
  * WordPress dependencies
16
16
  */
@@ -46,7 +46,7 @@ function PreferenceToggleMenuItem({
46
46
  (0, _a11y.speak)(message);
47
47
  }
48
48
  };
49
- return (0, _react.createElement)(_components.MenuItem, {
49
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
50
50
  icon: isActive && _icons.check,
51
51
  isSelected: isActive,
52
52
  onClick: () => {
@@ -59,7 +59,8 @@ function PreferenceToggleMenuItem({
59
59
  role: "menuitemcheckbox",
60
60
  info: info,
61
61
  shortcut: shortcut,
62
- disabled: disabled
63
- }, label);
62
+ disabled: disabled,
63
+ children: label
64
+ });
64
65
  }
65
66
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["_data","require","_components","_i18n","_icons","_a11y","_store","PreferenceToggleMenuItem","scope","name","label","info","messageActivated","messageDeactivated","shortcut","handleToggling","onToggle","disabled","isActive","useSelect","select","preferencesStore","get","toggle","useDispatch","speakMessage","message","sprintf","__","speak","_react","createElement","MenuItem","icon","check","isSelected","onClick","role"],"sources":["@wordpress/preferences/src/components/preference-toggle-menu-item/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { MenuItem } from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { check } from '@wordpress/icons';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { store as preferencesStore } from '../../store';\n\nexport default function PreferenceToggleMenuItem( {\n\tscope,\n\tname,\n\tlabel,\n\tinfo,\n\tmessageActivated,\n\tmessageDeactivated,\n\tshortcut,\n\thandleToggling = true,\n\tonToggle = () => null,\n\tdisabled = false,\n} ) {\n\tconst isActive = useSelect(\n\t\t( select ) => !! select( preferencesStore ).get( scope, name ),\n\t\t[ scope, name ]\n\t);\n\tconst { toggle } = useDispatch( preferencesStore );\n\tconst speakMessage = () => {\n\t\tif ( isActive ) {\n\t\t\tconst message =\n\t\t\t\tmessageDeactivated ||\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %s: preference name, e.g. 'Fullscreen mode' */\n\t\t\t\t\t__( 'Preference deactivated - %s' ),\n\t\t\t\t\tlabel\n\t\t\t\t);\n\t\t\tspeak( message );\n\t\t} else {\n\t\t\tconst message =\n\t\t\t\tmessageActivated ||\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %s: preference name, e.g. 'Fullscreen mode' */\n\t\t\t\t\t__( 'Preference activated - %s' ),\n\t\t\t\t\tlabel\n\t\t\t\t);\n\t\t\tspeak( message );\n\t\t}\n\t};\n\n\treturn (\n\t\t<MenuItem\n\t\t\ticon={ isActive && check }\n\t\t\tisSelected={ isActive }\n\t\t\tonClick={ () => {\n\t\t\t\tonToggle();\n\t\t\t\tif ( handleToggling ) {\n\t\t\t\t\ttoggle( scope, name );\n\t\t\t\t}\n\t\t\t\tspeakMessage();\n\t\t\t} }\n\t\t\trole=\"menuitemcheckbox\"\n\t\t\tinfo={ info }\n\t\t\tshortcut={ shortcut }\n\t\t\tdisabled={ disabled }\n\t\t>\n\t\t\t{ label }\n\t\t</MenuItem>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAKA,IAAAK,MAAA,GAAAL,OAAA;AAZA;AACA;AACA;;AAOA;AACA;AACA;;AAGe,SAASM,wBAAwBA,CAAE;EACjDC,KAAK;EACLC,IAAI;EACJC,KAAK;EACLC,IAAI;EACJC,gBAAgB;EAChBC,kBAAkB;EAClBC,QAAQ;EACRC,cAAc,GAAG,IAAI;EACrBC,QAAQ,GAAGA,CAAA,KAAM,IAAI;EACrBC,QAAQ,GAAG;AACZ,CAAC,EAAG;EACH,MAAMC,QAAQ,GAAG,IAAAC,eAAS,EACvBC,MAAM,IAAM,CAAC,CAAEA,MAAM,CAAEC,YAAiB,CAAC,CAACC,GAAG,CAAEd,KAAK,EAAEC,IAAK,CAAC,EAC9D,CAAED,KAAK,EAAEC,IAAI,CACd,CAAC;EACD,MAAM;IAAEc;EAAO,CAAC,GAAG,IAAAC,iBAAW,EAAEH,YAAiB,CAAC;EAClD,MAAMI,YAAY,GAAGA,CAAA,KAAM;IAC1B,IAAKP,QAAQ,EAAG;MACf,MAAMQ,OAAO,GACZb,kBAAkB,IAClB,IAAAc,aAAO,GACN;MACA,IAAAC,QAAE,EAAE,6BAA8B,CAAC,EACnClB,KACD,CAAC;MACF,IAAAmB,WAAK,EAAEH,OAAQ,CAAC;IACjB,CAAC,MAAM;MACN,MAAMA,OAAO,GACZd,gBAAgB,IAChB,IAAAe,aAAO,GACN;MACA,IAAAC,QAAE,EAAE,2BAA4B,CAAC,EACjClB,KACD,CAAC;MACF,IAAAmB,WAAK,EAAEH,OAAQ,CAAC;IACjB;EACD,CAAC;EAED,OACC,IAAAI,MAAA,CAAAC,aAAA,EAAC7B,WAAA,CAAA8B,QAAQ;IACRC,IAAI,EAAGf,QAAQ,IAAIgB,YAAO;IAC1BC,UAAU,EAAGjB,QAAU;IACvBkB,OAAO,EAAGA,CAAA,KAAM;MACfpB,QAAQ,CAAC,CAAC;MACV,IAAKD,cAAc,EAAG;QACrBQ,MAAM,CAAEf,KAAK,EAAEC,IAAK,CAAC;MACtB;MACAgB,YAAY,CAAC,CAAC;IACf,CAAG;IACHY,IAAI,EAAC,kBAAkB;IACvB1B,IAAI,EAAGA,IAAM;IACbG,QAAQ,EAAGA,QAAU;IACrBG,QAAQ,EAAGA;EAAU,GAEnBP,KACO,CAAC;AAEb","ignoreList":[]}
1
+ {"version":3,"names":["_data","require","_components","_i18n","_icons","_a11y","_store","_jsxRuntime","PreferenceToggleMenuItem","scope","name","label","info","messageActivated","messageDeactivated","shortcut","handleToggling","onToggle","disabled","isActive","useSelect","select","preferencesStore","get","toggle","useDispatch","speakMessage","message","sprintf","__","speak","jsx","MenuItem","icon","check","isSelected","onClick","role","children"],"sources":["@wordpress/preferences/src/components/preference-toggle-menu-item/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { MenuItem } from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { check } from '@wordpress/icons';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { store as preferencesStore } from '../../store';\n\nexport default function PreferenceToggleMenuItem( {\n\tscope,\n\tname,\n\tlabel,\n\tinfo,\n\tmessageActivated,\n\tmessageDeactivated,\n\tshortcut,\n\thandleToggling = true,\n\tonToggle = () => null,\n\tdisabled = false,\n} ) {\n\tconst isActive = useSelect(\n\t\t( select ) => !! select( preferencesStore ).get( scope, name ),\n\t\t[ scope, name ]\n\t);\n\tconst { toggle } = useDispatch( preferencesStore );\n\tconst speakMessage = () => {\n\t\tif ( isActive ) {\n\t\t\tconst message =\n\t\t\t\tmessageDeactivated ||\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %s: preference name, e.g. 'Fullscreen mode' */\n\t\t\t\t\t__( 'Preference deactivated - %s' ),\n\t\t\t\t\tlabel\n\t\t\t\t);\n\t\t\tspeak( message );\n\t\t} else {\n\t\t\tconst message =\n\t\t\t\tmessageActivated ||\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %s: preference name, e.g. 'Fullscreen mode' */\n\t\t\t\t\t__( 'Preference activated - %s' ),\n\t\t\t\t\tlabel\n\t\t\t\t);\n\t\t\tspeak( message );\n\t\t}\n\t};\n\n\treturn (\n\t\t<MenuItem\n\t\t\ticon={ isActive && check }\n\t\t\tisSelected={ isActive }\n\t\t\tonClick={ () => {\n\t\t\t\tonToggle();\n\t\t\t\tif ( handleToggling ) {\n\t\t\t\t\ttoggle( scope, name );\n\t\t\t\t}\n\t\t\t\tspeakMessage();\n\t\t\t} }\n\t\t\trole=\"menuitemcheckbox\"\n\t\t\tinfo={ info }\n\t\t\tshortcut={ shortcut }\n\t\t\tdisabled={ disabled }\n\t\t>\n\t\t\t{ label }\n\t\t</MenuItem>\n\t);\n}\n"],"mappings":";;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAKA,IAAAK,MAAA,GAAAL,OAAA;AAAwD,IAAAM,WAAA,GAAAN,OAAA;AAZxD;AACA;AACA;;AAOA;AACA;AACA;;AAGe,SAASO,wBAAwBA,CAAE;EACjDC,KAAK;EACLC,IAAI;EACJC,KAAK;EACLC,IAAI;EACJC,gBAAgB;EAChBC,kBAAkB;EAClBC,QAAQ;EACRC,cAAc,GAAG,IAAI;EACrBC,QAAQ,GAAGA,CAAA,KAAM,IAAI;EACrBC,QAAQ,GAAG;AACZ,CAAC,EAAG;EACH,MAAMC,QAAQ,GAAG,IAAAC,eAAS,EACvBC,MAAM,IAAM,CAAC,CAAEA,MAAM,CAAEC,YAAiB,CAAC,CAACC,GAAG,CAAEd,KAAK,EAAEC,IAAK,CAAC,EAC9D,CAAED,KAAK,EAAEC,IAAI,CACd,CAAC;EACD,MAAM;IAAEc;EAAO,CAAC,GAAG,IAAAC,iBAAW,EAAEH,YAAiB,CAAC;EAClD,MAAMI,YAAY,GAAGA,CAAA,KAAM;IAC1B,IAAKP,QAAQ,EAAG;MACf,MAAMQ,OAAO,GACZb,kBAAkB,IAClB,IAAAc,aAAO,GACN;MACA,IAAAC,QAAE,EAAE,6BAA8B,CAAC,EACnClB,KACD,CAAC;MACF,IAAAmB,WAAK,EAAEH,OAAQ,CAAC;IACjB,CAAC,MAAM;MACN,MAAMA,OAAO,GACZd,gBAAgB,IAChB,IAAAe,aAAO,GACN;MACA,IAAAC,QAAE,EAAE,2BAA4B,CAAC,EACjClB,KACD,CAAC;MACF,IAAAmB,WAAK,EAAEH,OAAQ,CAAC;IACjB;EACD,CAAC;EAED,oBACC,IAAApB,WAAA,CAAAwB,GAAA,EAAC7B,WAAA,CAAA8B,QAAQ;IACRC,IAAI,EAAGd,QAAQ,IAAIe,YAAO;IAC1BC,UAAU,EAAGhB,QAAU;IACvBiB,OAAO,EAAGA,CAAA,KAAM;MACfnB,QAAQ,CAAC,CAAC;MACV,IAAKD,cAAc,EAAG;QACrBQ,MAAM,CAAEf,KAAK,EAAEC,IAAK,CAAC;MACtB;MACAgB,YAAY,CAAC,CAAC;IACf,CAAG;IACHW,IAAI,EAAC,kBAAkB;IACvBzB,IAAI,EAAGA,IAAM;IACbG,QAAQ,EAAGA,QAAU;IACrBG,QAAQ,EAAGA,QAAU;IAAAoB,QAAA,EAEnB3B;EAAK,CACE,CAAC;AAEb","ignoreList":[]}
@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = PreferencesModal;
7
- var _react = require("react");
8
7
  var _components = require("@wordpress/components");
9
8
  var _i18n = require("@wordpress/i18n");
9
+ var _jsxRuntime = require("react/jsx-runtime");
10
10
  /**
11
11
  * WordPress dependencies
12
12
  */
@@ -15,10 +15,11 @@ function PreferencesModal({
15
15
  closeModal,
16
16
  children
17
17
  }) {
18
- return (0, _react.createElement)(_components.Modal, {
18
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
19
19
  className: "preferences-modal",
20
20
  title: (0, _i18n.__)('Preferences'),
21
- onRequestClose: closeModal
22
- }, children);
21
+ onRequestClose: closeModal,
22
+ children: children
23
+ });
23
24
  }
24
25
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["_components","require","_i18n","PreferencesModal","closeModal","children","_react","createElement","Modal","className","title","__","onRequestClose"],"sources":["@wordpress/preferences/src/components/preferences-modal/index.js"],"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=\"preferences-modal\"\n\t\t\ttitle={ __( 'Preferences' ) }\n\t\t\tonRequestClose={ closeModal }\n\t\t>\n\t\t\t{ children }\n\t\t</Modal>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAIe,SAASE,gBAAgBA,CAAE;EAAEC,UAAU;EAAEC;AAAS,CAAC,EAAG;EACpE,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACP,WAAA,CAAAQ,KAAK;IACLC,SAAS,EAAC,mBAAmB;IAC7BC,KAAK,EAAG,IAAAC,QAAE,EAAE,aAAc,CAAG;IAC7BC,cAAc,EAAGR;EAAY,GAE3BC,QACI,CAAC;AAEV","ignoreList":[]}
1
+ {"version":3,"names":["_components","require","_i18n","_jsxRuntime","PreferencesModal","closeModal","children","jsx","Modal","className","title","__","onRequestClose"],"sources":["@wordpress/preferences/src/components/preferences-modal/index.js"],"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=\"preferences-modal\"\n\t\t\ttitle={ __( 'Preferences' ) }\n\t\t\tonRequestClose={ closeModal }\n\t\t>\n\t\t\t{ children }\n\t\t</Modal>\n\t);\n}\n"],"mappings":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAAqC,IAAAE,WAAA,GAAAF,OAAA;AAJrC;AACA;AACA;;AAIe,SAASG,gBAAgBA,CAAE;EAAEC,UAAU;EAAEC;AAAS,CAAC,EAAG;EACpE,oBACC,IAAAH,WAAA,CAAAI,GAAA,EAACP,WAAA,CAAAQ,KAAK;IACLC,SAAS,EAAC,mBAAmB;IAC7BC,KAAK,EAAG,IAAAC,QAAE,EAAE,aAAc,CAAG;IAC7BC,cAAc,EAAGP,UAAY;IAAAC,QAAA,EAE3BA;EAAQ,CACJ,CAAC;AAEV","ignoreList":[]}
@@ -4,21 +4,26 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _react = require("react");
7
+ var _jsxRuntime = require("react/jsx-runtime");
8
8
  const Section = ({
9
9
  description,
10
10
  title,
11
11
  children
12
- }) => (0, _react.createElement)("fieldset", {
13
- className: "preferences-modal__section"
14
- }, (0, _react.createElement)("legend", {
15
- className: "preferences-modal__section-legend"
16
- }, (0, _react.createElement)("h2", {
17
- className: "preferences-modal__section-title"
18
- }, title), description && (0, _react.createElement)("p", {
19
- className: "preferences-modal__section-description"
20
- }, description)), (0, _react.createElement)("div", {
21
- className: "preferences-modal__section-content"
22
- }, children));
12
+ }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
13
+ className: "preferences-modal__section",
14
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("legend", {
15
+ className: "preferences-modal__section-legend",
16
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
17
+ className: "preferences-modal__section-title",
18
+ children: title
19
+ }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
20
+ className: "preferences-modal__section-description",
21
+ children: description
22
+ })]
23
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
24
+ className: "preferences-modal__section-content",
25
+ children: children
26
+ })]
27
+ });
23
28
  var _default = exports.default = Section;
24
29
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["Section","description","title","children","_react","createElement","className","_default","exports","default"],"sources":["@wordpress/preferences/src/components/preferences-modal-section/index.js"],"sourcesContent":["const Section = ( { description, title, children } ) => (\n\t<fieldset className=\"preferences-modal__section\">\n\t\t<legend className=\"preferences-modal__section-legend\">\n\t\t\t<h2 className=\"preferences-modal__section-title\">{ title }</h2>\n\t\t\t{ description && (\n\t\t\t\t<p className=\"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<div className=\"preferences-modal__section-content\">{ children }</div>\n\t</fieldset>\n);\n\nexport default Section;\n"],"mappings":";;;;;;;AAAA,MAAMA,OAAO,GAAGA,CAAE;EAAEC,WAAW;EAAEC,KAAK;EAAEC;AAAS,CAAC,KACjD,IAAAC,MAAA,CAAAC,aAAA;EAAUC,SAAS,EAAC;AAA4B,GAC/C,IAAAF,MAAA,CAAAC,aAAA;EAAQC,SAAS,EAAC;AAAmC,GACpD,IAAAF,MAAA,CAAAC,aAAA;EAAIC,SAAS,EAAC;AAAkC,GAAGJ,KAAW,CAAC,EAC7DD,WAAW,IACZ,IAAAG,MAAA,CAAAC,aAAA;EAAGC,SAAS,EAAC;AAAwC,GAClDL,WACA,CAEG,CAAC,EACT,IAAAG,MAAA,CAAAC,aAAA;EAAKC,SAAS,EAAC;AAAoC,GAAGH,QAAe,CAC5D,CACV;AAAC,IAAAI,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaT,OAAO","ignoreList":[]}
1
+ {"version":3,"names":["Section","description","title","children","_jsxRuntime","jsxs","className","jsx","_default","exports","default"],"sources":["@wordpress/preferences/src/components/preferences-modal-section/index.js"],"sourcesContent":["const Section = ( { description, title, children } ) => (\n\t<fieldset className=\"preferences-modal__section\">\n\t\t<legend className=\"preferences-modal__section-legend\">\n\t\t\t<h2 className=\"preferences-modal__section-title\">{ title }</h2>\n\t\t\t{ description && (\n\t\t\t\t<p className=\"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<div className=\"preferences-modal__section-content\">{ children }</div>\n\t</fieldset>\n);\n\nexport default Section;\n"],"mappings":";;;;;;;AAAA,MAAMA,OAAO,GAAGA,CAAE;EAAEC,WAAW;EAAEC,KAAK;EAAEC;AAAS,CAAC,kBACjD,IAAAC,WAAA,CAAAC,IAAA;EAAUC,SAAS,EAAC,4BAA4B;EAAAH,QAAA,gBAC/C,IAAAC,WAAA,CAAAC,IAAA;IAAQC,SAAS,EAAC,mCAAmC;IAAAH,QAAA,gBACpD,IAAAC,WAAA,CAAAG,GAAA;MAAID,SAAS,EAAC,kCAAkC;MAAAH,QAAA,EAAGD;IAAK,CAAM,CAAC,EAC7DD,WAAW,iBACZ,IAAAG,WAAA,CAAAG,GAAA;MAAGD,SAAS,EAAC,wCAAwC;MAAAH,QAAA,EAClDF;IAAW,CACX,CACH;EAAA,CACM,CAAC,eACT,IAAAG,WAAA,CAAAG,GAAA;IAAKD,SAAS,EAAC,oCAAoC;IAAAH,QAAA,EAAGA;EAAQ,CAAO,CAAC;AAAA,CAC7D,CACV;AAAC,IAAAK,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaV,OAAO","ignoreList":[]}
@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = PreferencesModalTabs;
7
- var _react = require("react");
8
7
  var _compose = require("@wordpress/compose");
9
8
  var _components = require("@wordpress/components");
10
9
  var _element = require("@wordpress/element");
11
10
  var _icons = require("@wordpress/icons");
12
11
  var _i18n = require("@wordpress/i18n");
13
12
  var _lockUnlock = require("../../lock-unlock");
13
+ var _jsxRuntime = require("react/jsx-runtime");
14
14
  /**
15
15
  * WordPress dependencies
16
16
  */
@@ -66,63 +66,85 @@ function PreferencesModalTabs({
66
66
  let modalContent;
67
67
  // We render different components based on the viewport size.
68
68
  if (isLargeViewport) {
69
- modalContent = (0, _react.createElement)("div", {
70
- className: "preferences__tabs"
71
- }, (0, _react.createElement)(Tabs, {
72
- defaultTabId: activeMenu !== PREFERENCES_MENU ? activeMenu : undefined,
73
- onSelect: setActiveMenu,
74
- orientation: "vertical"
75
- }, (0, _react.createElement)(Tabs.TabList, {
76
- className: "preferences__tabs-tablist"
77
- }, tabs.map(tab => (0, _react.createElement)(Tabs.Tab, {
78
- tabId: tab.name,
79
- key: tab.name,
80
- className: "preferences__tabs-tab"
81
- }, tab.title))), tabs.map(tab => (0, _react.createElement)(Tabs.TabPanel, {
82
- tabId: tab.name,
83
- key: tab.name,
84
- className: "preferences__tabs-tabpanel",
85
- focusable: false
86
- }, sectionsContentMap[tab.name] || null))));
69
+ modalContent = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
70
+ className: "preferences__tabs",
71
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tabs, {
72
+ defaultTabId: activeMenu !== PREFERENCES_MENU ? activeMenu : undefined,
73
+ onSelect: setActiveMenu,
74
+ orientation: "vertical",
75
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.TabList, {
76
+ className: "preferences__tabs-tablist",
77
+ children: tabs.map(tab => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.Tab, {
78
+ tabId: tab.name,
79
+ className: "preferences__tabs-tab",
80
+ children: tab.title
81
+ }, tab.name))
82
+ }), tabs.map(tab => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.TabPanel, {
83
+ tabId: tab.name,
84
+ className: "preferences__tabs-tabpanel",
85
+ focusable: false,
86
+ children: sectionsContentMap[tab.name] || null
87
+ }, tab.name))]
88
+ })
89
+ });
87
90
  } else {
88
- modalContent = (0, _react.createElement)(_components.__experimentalNavigatorProvider, {
91
+ modalContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalNavigatorProvider, {
89
92
  initialPath: "/",
90
- className: "preferences__provider"
91
- }, (0, _react.createElement)(_components.__experimentalNavigatorScreen, {
92
- path: "/"
93
- }, (0, _react.createElement)(_components.Card, {
94
- isBorderless: true,
95
- size: "small"
96
- }, (0, _react.createElement)(_components.CardBody, null, (0, _react.createElement)(_components.__experimentalItemGroup, null, tabs.map(tab => {
97
- return (0, _react.createElement)(_components.__experimentalNavigatorButton, {
98
- key: tab.name,
99
- path: tab.name,
100
- as: _components.__experimentalItem,
101
- isAction: true
102
- }, (0, _react.createElement)(_components.__experimentalHStack, {
103
- justify: "space-between"
104
- }, (0, _react.createElement)(_components.FlexItem, null, (0, _react.createElement)(_components.__experimentalTruncate, null, tab.title)), (0, _react.createElement)(_components.FlexItem, null, (0, _react.createElement)(_icons.Icon, {
105
- icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight
106
- }))));
107
- }))))), sections.length && sections.map(section => {
108
- return (0, _react.createElement)(_components.__experimentalNavigatorScreen, {
109
- key: `${section.name}-menu`,
110
- path: section.name
111
- }, (0, _react.createElement)(_components.Card, {
112
- isBorderless: true,
113
- size: "large"
114
- }, (0, _react.createElement)(_components.CardHeader, {
115
- isBorderless: false,
116
- justify: "left",
117
- size: "small",
118
- gap: "6"
119
- }, (0, _react.createElement)(_components.__experimentalNavigatorBackButton, {
120
- icon: (0, _i18n.isRTL)() ? _icons.chevronRight : _icons.chevronLeft,
121
- label: (0, _i18n.__)('Back')
122
- }), (0, _react.createElement)(_components.__experimentalText, {
123
- size: "16"
124
- }, section.tabLabel)), (0, _react.createElement)(_components.CardBody, null, section.content)));
125
- }));
93
+ className: "preferences__provider",
94
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNavigatorScreen, {
95
+ path: "/",
96
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Card, {
97
+ isBorderless: true,
98
+ size: "small",
99
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CardBody, {
100
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalItemGroup, {
101
+ children: tabs.map(tab => {
102
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNavigatorButton, {
103
+ path: tab.name,
104
+ as: _components.__experimentalItem,
105
+ isAction: true,
106
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
107
+ justify: "space-between",
108
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
109
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalTruncate, {
110
+ children: tab.title
111
+ })
112
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
113
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
114
+ icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight
115
+ })
116
+ })]
117
+ })
118
+ }, tab.name);
119
+ })
120
+ })
121
+ })
122
+ })
123
+ }), sections.length && sections.map(section => {
124
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNavigatorScreen, {
125
+ path: section.name,
126
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Card, {
127
+ isBorderless: true,
128
+ size: "large",
129
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.CardHeader, {
130
+ isBorderless: false,
131
+ justify: "left",
132
+ size: "small",
133
+ gap: "6",
134
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNavigatorBackButton, {
135
+ icon: (0, _i18n.isRTL)() ? _icons.chevronRight : _icons.chevronLeft,
136
+ label: (0, _i18n.__)('Back')
137
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
138
+ size: "16",
139
+ children: section.tabLabel
140
+ })]
141
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CardBody, {
142
+ children: section.content
143
+ })]
144
+ })
145
+ }, `${section.name}-menu`);
146
+ })]
147
+ });
126
148
  }
127
149
  return modalContent;
128
150
  }
@@ -1 +1 @@
1
- {"version":3,"names":["_compose","require","_components","_element","_icons","_i18n","_lockUnlock","Tabs","unlock","componentsPrivateApis","PREFERENCES_MENU","PreferencesModalTabs","sections","isLargeViewport","useViewportMatch","activeMenu","setActiveMenu","useState","tabs","sectionsContentMap","useMemo","mappedTabs","length","reduce","accumulator","name","tabLabel","title","content","push","modalContent","_react","createElement","className","defaultTabId","undefined","onSelect","orientation","TabList","map","tab","Tab","tabId","key","TabPanel","focusable","__experimentalNavigatorProvider","initialPath","__experimentalNavigatorScreen","path","Card","isBorderless","size","CardBody","__experimentalItemGroup","__experimentalNavigatorButton","as","Item","isAction","__experimentalHStack","justify","FlexItem","__experimentalTruncate","Icon","icon","isRTL","chevronLeft","chevronRight","section","CardHeader","gap","__experimentalNavigatorBackButton","label","__","__experimentalText"],"sources":["@wordpress/preferences/src/components/preferences-modal-tabs/index.js"],"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\tCard,\n\tCardHeader,\n\tCardBody,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useMemo, useState } from '@wordpress/element';\nimport { chevronLeft, chevronRight, Icon } from '@wordpress/icons';\nimport { isRTL, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\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 `Tabs` 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\tlet modalContent;\n\t// We render different components based on the viewport size.\n\tif ( isLargeViewport ) {\n\t\tmodalContent = (\n\t\t\t<div className=\"preferences__tabs\">\n\t\t\t\t<Tabs\n\t\t\t\t\tdefaultTabId={\n\t\t\t\t\t\tactiveMenu !== PREFERENCES_MENU ? activeMenu : undefined\n\t\t\t\t\t}\n\t\t\t\t\tonSelect={ setActiveMenu }\n\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t>\n\t\t\t\t\t<Tabs.TabList className=\"preferences__tabs-tablist\">\n\t\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t\t<Tabs.Tab\n\t\t\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\t\tclassName=\"preferences__tabs-tab\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\tclassName=\"preferences__tabs-tabpanel\"\n\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sectionsContentMap[ tab.name ] || null }\n\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t) ) }\n\t\t\t\t</Tabs>\n\t\t\t</div>\n\t\t);\n\t} else {\n\t\tmodalContent = (\n\t\t\t<NavigatorProvider\n\t\t\t\tinitialPath=\"/\"\n\t\t\t\tclassName=\"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\tlabel={ __( 'Back' ) }\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"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["_compose","require","_components","_element","_icons","_i18n","_lockUnlock","_jsxRuntime","Tabs","unlock","componentsPrivateApis","PREFERENCES_MENU","PreferencesModalTabs","sections","isLargeViewport","useViewportMatch","activeMenu","setActiveMenu","useState","tabs","sectionsContentMap","useMemo","mappedTabs","length","reduce","accumulator","name","tabLabel","title","content","push","modalContent","jsx","className","children","jsxs","defaultTabId","undefined","onSelect","orientation","TabList","map","tab","Tab","tabId","TabPanel","focusable","__experimentalNavigatorProvider","initialPath","__experimentalNavigatorScreen","path","Card","isBorderless","size","CardBody","__experimentalItemGroup","__experimentalNavigatorButton","as","Item","isAction","__experimentalHStack","justify","FlexItem","__experimentalTruncate","Icon","icon","isRTL","chevronLeft","chevronRight","section","CardHeader","gap","__experimentalNavigatorBackButton","label","__","__experimentalText"],"sources":["@wordpress/preferences/src/components/preferences-modal-tabs/index.js"],"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\tCard,\n\tCardHeader,\n\tCardBody,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useMemo, useState } from '@wordpress/element';\nimport { chevronLeft, chevronRight, Icon } from '@wordpress/icons';\nimport { isRTL, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\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 `Tabs` 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\tlet modalContent;\n\t// We render different components based on the viewport size.\n\tif ( isLargeViewport ) {\n\t\tmodalContent = (\n\t\t\t<div className=\"preferences__tabs\">\n\t\t\t\t<Tabs\n\t\t\t\t\tdefaultTabId={\n\t\t\t\t\t\tactiveMenu !== PREFERENCES_MENU ? activeMenu : undefined\n\t\t\t\t\t}\n\t\t\t\t\tonSelect={ setActiveMenu }\n\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t>\n\t\t\t\t\t<Tabs.TabList className=\"preferences__tabs-tablist\">\n\t\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t\t<Tabs.Tab\n\t\t\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\t\tclassName=\"preferences__tabs-tab\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\tclassName=\"preferences__tabs-tabpanel\"\n\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sectionsContentMap[ tab.name ] || null }\n\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t) ) }\n\t\t\t\t</Tabs>\n\t\t\t</div>\n\t\t);\n\t} else {\n\t\tmodalContent = (\n\t\t\t<NavigatorProvider\n\t\t\t\tinitialPath=\"/\"\n\t\t\t\tclassName=\"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\tlabel={ __( 'Back' ) }\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"],"mappings":"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","ignoreList":[]}
@@ -1,8 +1,9 @@
1
- import { createElement } from "react";
2
1
  /**
3
2
  * WordPress dependencies
4
3
  */
5
4
  import { ToggleControl } from '@wordpress/components';
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ import { jsxs as _jsxs } from "react/jsx-runtime";
6
7
  function BaseOption({
7
8
  help,
8
9
  label,
@@ -10,15 +11,16 @@ function BaseOption({
10
11
  onChange,
11
12
  children
12
13
  }) {
13
- return createElement("div", {
14
- className: "preference-base-option"
15
- }, createElement(ToggleControl, {
16
- __nextHasNoMarginBottom: true,
17
- help: help,
18
- label: label,
19
- checked: isChecked,
20
- onChange: onChange
21
- }), children);
14
+ return /*#__PURE__*/_jsxs("div", {
15
+ className: "preference-base-option",
16
+ children: [/*#__PURE__*/_jsx(ToggleControl, {
17
+ __nextHasNoMarginBottom: true,
18
+ help: help,
19
+ label: label,
20
+ checked: isChecked,
21
+ onChange: onChange
22
+ }), children]
23
+ });
22
24
  }
23
25
  export default BaseOption;
24
26
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["ToggleControl","BaseOption","help","label","isChecked","onChange","children","createElement","className","__nextHasNoMarginBottom","checked"],"sources":["@wordpress/preferences/src/components/preference-base-option/index.js"],"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=\"preference-base-option\">\n\t\t\t<ToggleControl\n\t\t\t\t__nextHasNoMarginBottom\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"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,uBAAuB;AAErD,SAASC,UAAUA,CAAE;EAAEC,IAAI;EAAEC,KAAK;EAAEC,SAAS;EAAEC,QAAQ;EAAEC;AAAS,CAAC,EAAG;EACrE,OACCC,aAAA;IAAKC,SAAS,EAAC;EAAwB,GACtCD,aAAA,CAACP,aAAa;IACbS,uBAAuB;IACvBP,IAAI,EAAGA,IAAM;IACbC,KAAK,EAAGA,KAAO;IACfO,OAAO,EAAGN,SAAW;IACrBC,QAAQ,EAAGA;EAAU,CACrB,CAAC,EACAC,QACE,CAAC;AAER;AAEA,eAAeL,UAAU","ignoreList":[]}
1
+ {"version":3,"names":["ToggleControl","jsx","_jsx","jsxs","_jsxs","BaseOption","help","label","isChecked","onChange","children","className","__nextHasNoMarginBottom","checked"],"sources":["@wordpress/preferences/src/components/preference-base-option/index.js"],"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=\"preference-base-option\">\n\t\t\t<ToggleControl\n\t\t\t\t__nextHasNoMarginBottom\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"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,uBAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEtD,SAASC,UAAUA,CAAE;EAAEC,IAAI;EAAEC,KAAK;EAAEC,SAAS;EAAEC,QAAQ;EAAEC;AAAS,CAAC,EAAG;EACrE,oBACCN,KAAA;IAAKO,SAAS,EAAC,wBAAwB;IAAAD,QAAA,gBACtCR,IAAA,CAACF,aAAa;MACbY,uBAAuB;MACvBN,IAAI,EAAGA,IAAM;MACbC,KAAK,EAAGA,KAAO;MACfM,OAAO,EAAGL,SAAW;MACrBC,QAAQ,EAAGA;IAAU,CACrB,CAAC,EACAC,QAAQ;EAAA,CACN,CAAC;AAER;AAEA,eAAeL,UAAU","ignoreList":[]}
@@ -1,4 +1,3 @@
1
- import { createElement } from "react";
2
1
  /**
3
2
  * WordPress dependencies
4
3
  */
@@ -9,6 +8,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
9
8
  */
10
9
  import { store as preferencesStore } from '../../store';
11
10
  import PreferenceBaseOption from '../preference-base-option';
11
+ import { jsx as _jsx } from "react/jsx-runtime";
12
12
  function PreferenceToggleControl(props) {
13
13
  const {
14
14
  scope,
@@ -24,7 +24,7 @@ function PreferenceToggleControl(props) {
24
24
  onToggle();
25
25
  toggle(scope, featureName);
26
26
  };
27
- return createElement(PreferenceBaseOption, {
27
+ return /*#__PURE__*/_jsx(PreferenceBaseOption, {
28
28
  onChange: onChange,
29
29
  isChecked: isChecked,
30
30
  ...remainingProps
@@ -1 +1 @@
1
- {"version":3,"names":["useSelect","useDispatch","store","preferencesStore","PreferenceBaseOption","PreferenceToggleControl","props","scope","featureName","onToggle","remainingProps","isChecked","select","get","toggle","onChange","createElement"],"sources":["@wordpress/preferences/src/components/preference-toggle-control/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as preferencesStore } from '../../store';\nimport PreferenceBaseOption from '../preference-base-option';\n\nfunction PreferenceToggleControl( props ) {\n\tconst {\n\t\tscope,\n\t\tfeatureName,\n\t\tonToggle = () => {},\n\t\t...remainingProps\n\t} = props;\n\tconst isChecked = useSelect(\n\t\t( select ) => !! select( preferencesStore ).get( scope, featureName ),\n\t\t[ scope, featureName ]\n\t);\n\tconst { toggle } = useDispatch( preferencesStore );\n\tconst onChange = () => {\n\t\tonToggle();\n\t\ttoggle( scope, featureName );\n\t};\n\n\treturn (\n\t\t<PreferenceBaseOption\n\t\t\tonChange={ onChange }\n\t\t\tisChecked={ isChecked }\n\t\t\t{ ...remainingProps }\n\t\t/>\n\t);\n}\n\nexport default PreferenceToggleControl;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;;AAExD;AACA;AACA;AACA,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,aAAa;AACvD,OAAOC,oBAAoB,MAAM,2BAA2B;AAE5D,SAASC,uBAAuBA,CAAEC,KAAK,EAAG;EACzC,MAAM;IACLC,KAAK;IACLC,WAAW;IACXC,QAAQ,GAAGA,CAAA,KAAM,CAAC,CAAC;IACnB,GAAGC;EACJ,CAAC,GAAGJ,KAAK;EACT,MAAMK,SAAS,GAAGX,SAAS,CACxBY,MAAM,IAAM,CAAC,CAAEA,MAAM,CAAET,gBAAiB,CAAC,CAACU,GAAG,CAAEN,KAAK,EAAEC,WAAY,CAAC,EACrE,CAAED,KAAK,EAAEC,WAAW,CACrB,CAAC;EACD,MAAM;IAAEM;EAAO,CAAC,GAAGb,WAAW,CAAEE,gBAAiB,CAAC;EAClD,MAAMY,QAAQ,GAAGA,CAAA,KAAM;IACtBN,QAAQ,CAAC,CAAC;IACVK,MAAM,CAAEP,KAAK,EAAEC,WAAY,CAAC;EAC7B,CAAC;EAED,OACCQ,aAAA,CAACZ,oBAAoB;IACpBW,QAAQ,EAAGA,QAAU;IACrBJ,SAAS,EAAGA,SAAW;IAAA,GAClBD;EAAc,CACnB,CAAC;AAEJ;AAEA,eAAeL,uBAAuB","ignoreList":[]}
1
+ {"version":3,"names":["useSelect","useDispatch","store","preferencesStore","PreferenceBaseOption","jsx","_jsx","PreferenceToggleControl","props","scope","featureName","onToggle","remainingProps","isChecked","select","get","toggle","onChange"],"sources":["@wordpress/preferences/src/components/preference-toggle-control/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as preferencesStore } from '../../store';\nimport PreferenceBaseOption from '../preference-base-option';\n\nfunction PreferenceToggleControl( props ) {\n\tconst {\n\t\tscope,\n\t\tfeatureName,\n\t\tonToggle = () => {},\n\t\t...remainingProps\n\t} = props;\n\tconst isChecked = useSelect(\n\t\t( select ) => !! select( preferencesStore ).get( scope, featureName ),\n\t\t[ scope, featureName ]\n\t);\n\tconst { toggle } = useDispatch( preferencesStore );\n\tconst onChange = () => {\n\t\tonToggle();\n\t\ttoggle( scope, featureName );\n\t};\n\n\treturn (\n\t\t<PreferenceBaseOption\n\t\t\tonChange={ onChange }\n\t\t\tisChecked={ isChecked }\n\t\t\t{ ...remainingProps }\n\t\t/>\n\t);\n}\n\nexport default PreferenceToggleControl;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;;AAExD;AACA;AACA;AACA,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,aAAa;AACvD,OAAOC,oBAAoB,MAAM,2BAA2B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE7D,SAASC,uBAAuBA,CAAEC,KAAK,EAAG;EACzC,MAAM;IACLC,KAAK;IACLC,WAAW;IACXC,QAAQ,GAAGA,CAAA,KAAM,CAAC,CAAC;IACnB,GAAGC;EACJ,CAAC,GAAGJ,KAAK;EACT,MAAMK,SAAS,GAAGb,SAAS,CACxBc,MAAM,IAAM,CAAC,CAAEA,MAAM,CAAEX,gBAAiB,CAAC,CAACY,GAAG,CAAEN,KAAK,EAAEC,WAAY,CAAC,EACrE,CAAED,KAAK,EAAEC,WAAW,CACrB,CAAC;EACD,MAAM;IAAEM;EAAO,CAAC,GAAGf,WAAW,CAAEE,gBAAiB,CAAC;EAClD,MAAMc,QAAQ,GAAGA,CAAA,KAAM;IACtBN,QAAQ,CAAC,CAAC;IACVK,MAAM,CAAEP,KAAK,EAAEC,WAAY,CAAC;EAC7B,CAAC;EAED,oBACCJ,IAAA,CAACF,oBAAoB;IACpBa,QAAQ,EAAGA,QAAU;IACrBJ,SAAS,EAAGA,SAAW;IAAA,GAClBD;EAAc,CACnB,CAAC;AAEJ;AAEA,eAAeL,uBAAuB","ignoreList":[]}
@@ -1,4 +1,3 @@
1
- import { createElement } from "react";
2
1
  /**
3
2
  * WordPress dependencies
4
3
  */
@@ -12,6 +11,7 @@ import { speak } from '@wordpress/a11y';
12
11
  * Internal dependencies
13
12
  */
14
13
  import { store as preferencesStore } from '../../store';
14
+ import { jsx as _jsx } from "react/jsx-runtime";
15
15
  export default function PreferenceToggleMenuItem({
16
16
  scope,
17
17
  name,
@@ -39,7 +39,7 @@ export default function PreferenceToggleMenuItem({
39
39
  speak(message);
40
40
  }
41
41
  };
42
- return createElement(MenuItem, {
42
+ return /*#__PURE__*/_jsx(MenuItem, {
43
43
  icon: isActive && check,
44
44
  isSelected: isActive,
45
45
  onClick: () => {
@@ -52,7 +52,8 @@ export default function PreferenceToggleMenuItem({
52
52
  role: "menuitemcheckbox",
53
53
  info: info,
54
54
  shortcut: shortcut,
55
- disabled: disabled
56
- }, label);
55
+ disabled: disabled,
56
+ children: label
57
+ });
57
58
  }
58
59
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["useSelect","useDispatch","MenuItem","__","sprintf","check","speak","store","preferencesStore","PreferenceToggleMenuItem","scope","name","label","info","messageActivated","messageDeactivated","shortcut","handleToggling","onToggle","disabled","isActive","select","get","toggle","speakMessage","message","createElement","icon","isSelected","onClick","role"],"sources":["@wordpress/preferences/src/components/preference-toggle-menu-item/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { MenuItem } from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { check } from '@wordpress/icons';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { store as preferencesStore } from '../../store';\n\nexport default function PreferenceToggleMenuItem( {\n\tscope,\n\tname,\n\tlabel,\n\tinfo,\n\tmessageActivated,\n\tmessageDeactivated,\n\tshortcut,\n\thandleToggling = true,\n\tonToggle = () => null,\n\tdisabled = false,\n} ) {\n\tconst isActive = useSelect(\n\t\t( select ) => !! select( preferencesStore ).get( scope, name ),\n\t\t[ scope, name ]\n\t);\n\tconst { toggle } = useDispatch( preferencesStore );\n\tconst speakMessage = () => {\n\t\tif ( isActive ) {\n\t\t\tconst message =\n\t\t\t\tmessageDeactivated ||\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %s: preference name, e.g. 'Fullscreen mode' */\n\t\t\t\t\t__( 'Preference deactivated - %s' ),\n\t\t\t\t\tlabel\n\t\t\t\t);\n\t\t\tspeak( message );\n\t\t} else {\n\t\t\tconst message =\n\t\t\t\tmessageActivated ||\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %s: preference name, e.g. 'Fullscreen mode' */\n\t\t\t\t\t__( 'Preference activated - %s' ),\n\t\t\t\t\tlabel\n\t\t\t\t);\n\t\t\tspeak( message );\n\t\t}\n\t};\n\n\treturn (\n\t\t<MenuItem\n\t\t\ticon={ isActive && check }\n\t\t\tisSelected={ isActive }\n\t\t\tonClick={ () => {\n\t\t\t\tonToggle();\n\t\t\t\tif ( handleToggling ) {\n\t\t\t\t\ttoggle( scope, name );\n\t\t\t\t}\n\t\t\t\tspeakMessage();\n\t\t\t} }\n\t\t\trole=\"menuitemcheckbox\"\n\t\t\tinfo={ info }\n\t\t\tshortcut={ shortcut }\n\t\t\tdisabled={ disabled }\n\t\t>\n\t\t\t{ label }\n\t\t</MenuItem>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AAC7C,SAASC,KAAK,QAAQ,kBAAkB;AACxC,SAASC,KAAK,QAAQ,iBAAiB;;AAEvC;AACA;AACA;AACA,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,aAAa;AAEvD,eAAe,SAASC,wBAAwBA,CAAE;EACjDC,KAAK;EACLC,IAAI;EACJC,KAAK;EACLC,IAAI;EACJC,gBAAgB;EAChBC,kBAAkB;EAClBC,QAAQ;EACRC,cAAc,GAAG,IAAI;EACrBC,QAAQ,GAAGA,CAAA,KAAM,IAAI;EACrBC,QAAQ,GAAG;AACZ,CAAC,EAAG;EACH,MAAMC,QAAQ,GAAGpB,SAAS,CACvBqB,MAAM,IAAM,CAAC,CAAEA,MAAM,CAAEb,gBAAiB,CAAC,CAACc,GAAG,CAAEZ,KAAK,EAAEC,IAAK,CAAC,EAC9D,CAAED,KAAK,EAAEC,IAAI,CACd,CAAC;EACD,MAAM;IAAEY;EAAO,CAAC,GAAGtB,WAAW,CAAEO,gBAAiB,CAAC;EAClD,MAAMgB,YAAY,GAAGA,CAAA,KAAM;IAC1B,IAAKJ,QAAQ,EAAG;MACf,MAAMK,OAAO,GACZV,kBAAkB,IAClBX,OAAO,EACN;MACAD,EAAE,CAAE,6BAA8B,CAAC,EACnCS,KACD,CAAC;MACFN,KAAK,CAAEmB,OAAQ,CAAC;IACjB,CAAC,MAAM;MACN,MAAMA,OAAO,GACZX,gBAAgB,IAChBV,OAAO,EACN;MACAD,EAAE,CAAE,2BAA4B,CAAC,EACjCS,KACD,CAAC;MACFN,KAAK,CAAEmB,OAAQ,CAAC;IACjB;EACD,CAAC;EAED,OACCC,aAAA,CAACxB,QAAQ;IACRyB,IAAI,EAAGP,QAAQ,IAAIf,KAAO;IAC1BuB,UAAU,EAAGR,QAAU;IACvBS,OAAO,EAAGA,CAAA,KAAM;MACfX,QAAQ,CAAC,CAAC;MACV,IAAKD,cAAc,EAAG;QACrBM,MAAM,CAAEb,KAAK,EAAEC,IAAK,CAAC;MACtB;MACAa,YAAY,CAAC,CAAC;IACf,CAAG;IACHM,IAAI,EAAC,kBAAkB;IACvBjB,IAAI,EAAGA,IAAM;IACbG,QAAQ,EAAGA,QAAU;IACrBG,QAAQ,EAAGA;EAAU,GAEnBP,KACO,CAAC;AAEb","ignoreList":[]}
1
+ {"version":3,"names":["useSelect","useDispatch","MenuItem","__","sprintf","check","speak","store","preferencesStore","jsx","_jsx","PreferenceToggleMenuItem","scope","name","label","info","messageActivated","messageDeactivated","shortcut","handleToggling","onToggle","disabled","isActive","select","get","toggle","speakMessage","message","icon","isSelected","onClick","role","children"],"sources":["@wordpress/preferences/src/components/preference-toggle-menu-item/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { MenuItem } from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { check } from '@wordpress/icons';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { store as preferencesStore } from '../../store';\n\nexport default function PreferenceToggleMenuItem( {\n\tscope,\n\tname,\n\tlabel,\n\tinfo,\n\tmessageActivated,\n\tmessageDeactivated,\n\tshortcut,\n\thandleToggling = true,\n\tonToggle = () => null,\n\tdisabled = false,\n} ) {\n\tconst isActive = useSelect(\n\t\t( select ) => !! select( preferencesStore ).get( scope, name ),\n\t\t[ scope, name ]\n\t);\n\tconst { toggle } = useDispatch( preferencesStore );\n\tconst speakMessage = () => {\n\t\tif ( isActive ) {\n\t\t\tconst message =\n\t\t\t\tmessageDeactivated ||\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %s: preference name, e.g. 'Fullscreen mode' */\n\t\t\t\t\t__( 'Preference deactivated - %s' ),\n\t\t\t\t\tlabel\n\t\t\t\t);\n\t\t\tspeak( message );\n\t\t} else {\n\t\t\tconst message =\n\t\t\t\tmessageActivated ||\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %s: preference name, e.g. 'Fullscreen mode' */\n\t\t\t\t\t__( 'Preference activated - %s' ),\n\t\t\t\t\tlabel\n\t\t\t\t);\n\t\t\tspeak( message );\n\t\t}\n\t};\n\n\treturn (\n\t\t<MenuItem\n\t\t\ticon={ isActive && check }\n\t\t\tisSelected={ isActive }\n\t\t\tonClick={ () => {\n\t\t\t\tonToggle();\n\t\t\t\tif ( handleToggling ) {\n\t\t\t\t\ttoggle( scope, name );\n\t\t\t\t}\n\t\t\t\tspeakMessage();\n\t\t\t} }\n\t\t\trole=\"menuitemcheckbox\"\n\t\t\tinfo={ info }\n\t\t\tshortcut={ shortcut }\n\t\t\tdisabled={ disabled }\n\t\t>\n\t\t\t{ label }\n\t\t</MenuItem>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AAC7C,SAASC,KAAK,QAAQ,kBAAkB;AACxC,SAASC,KAAK,QAAQ,iBAAiB;;AAEvC;AACA;AACA;AACA,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAExD,eAAe,SAASC,wBAAwBA,CAAE;EACjDC,KAAK;EACLC,IAAI;EACJC,KAAK;EACLC,IAAI;EACJC,gBAAgB;EAChBC,kBAAkB;EAClBC,QAAQ;EACRC,cAAc,GAAG,IAAI;EACrBC,QAAQ,GAAGA,CAAA,KAAM,IAAI;EACrBC,QAAQ,GAAG;AACZ,CAAC,EAAG;EACH,MAAMC,QAAQ,GAAGtB,SAAS,CACvBuB,MAAM,IAAM,CAAC,CAAEA,MAAM,CAAEf,gBAAiB,CAAC,CAACgB,GAAG,CAAEZ,KAAK,EAAEC,IAAK,CAAC,EAC9D,CAAED,KAAK,EAAEC,IAAI,CACd,CAAC;EACD,MAAM;IAAEY;EAAO,CAAC,GAAGxB,WAAW,CAAEO,gBAAiB,CAAC;EAClD,MAAMkB,YAAY,GAAGA,CAAA,KAAM;IAC1B,IAAKJ,QAAQ,EAAG;MACf,MAAMK,OAAO,GACZV,kBAAkB,IAClBb,OAAO,EACN;MACAD,EAAE,CAAE,6BAA8B,CAAC,EACnCW,KACD,CAAC;MACFR,KAAK,CAAEqB,OAAQ,CAAC;IACjB,CAAC,MAAM;MACN,MAAMA,OAAO,GACZX,gBAAgB,IAChBZ,OAAO,EACN;MACAD,EAAE,CAAE,2BAA4B,CAAC,EACjCW,KACD,CAAC;MACFR,KAAK,CAAEqB,OAAQ,CAAC;IACjB;EACD,CAAC;EAED,oBACCjB,IAAA,CAACR,QAAQ;IACR0B,IAAI,EAAGN,QAAQ,IAAIjB,KAAO;IAC1BwB,UAAU,EAAGP,QAAU;IACvBQ,OAAO,EAAGA,CAAA,KAAM;MACfV,QAAQ,CAAC,CAAC;MACV,IAAKD,cAAc,EAAG;QACrBM,MAAM,CAAEb,KAAK,EAAEC,IAAK,CAAC;MACtB;MACAa,YAAY,CAAC,CAAC;IACf,CAAG;IACHK,IAAI,EAAC,kBAAkB;IACvBhB,IAAI,EAAGA,IAAM;IACbG,QAAQ,EAAGA,QAAU;IACrBG,QAAQ,EAAGA,QAAU;IAAAW,QAAA,EAEnBlB;EAAK,CACE,CAAC;AAEb","ignoreList":[]}
@@ -1,17 +1,18 @@
1
- import { createElement } from "react";
2
1
  /**
3
2
  * WordPress dependencies
4
3
  */
5
4
  import { Modal } from '@wordpress/components';
6
5
  import { __ } from '@wordpress/i18n';
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
7
  export default function PreferencesModal({
8
8
  closeModal,
9
9
  children
10
10
  }) {
11
- return createElement(Modal, {
11
+ return /*#__PURE__*/_jsx(Modal, {
12
12
  className: "preferences-modal",
13
13
  title: __('Preferences'),
14
- onRequestClose: closeModal
15
- }, children);
14
+ onRequestClose: closeModal,
15
+ children: children
16
+ });
16
17
  }
17
18
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["Modal","__","PreferencesModal","closeModal","children","createElement","className","title","onRequestClose"],"sources":["@wordpress/preferences/src/components/preferences-modal/index.js"],"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=\"preferences-modal\"\n\t\t\ttitle={ __( 'Preferences' ) }\n\t\t\tonRequestClose={ closeModal }\n\t\t>\n\t\t\t{ children }\n\t\t</Modal>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,KAAK,QAAQ,uBAAuB;AAC7C,SAASC,EAAE,QAAQ,iBAAiB;AAEpC,eAAe,SAASC,gBAAgBA,CAAE;EAAEC,UAAU;EAAEC;AAAS,CAAC,EAAG;EACpE,OACCC,aAAA,CAACL,KAAK;IACLM,SAAS,EAAC,mBAAmB;IAC7BC,KAAK,EAAGN,EAAE,CAAE,aAAc,CAAG;IAC7BO,cAAc,EAAGL;EAAY,GAE3BC,QACI,CAAC;AAEV","ignoreList":[]}
1
+ {"version":3,"names":["Modal","__","jsx","_jsx","PreferencesModal","closeModal","children","className","title","onRequestClose"],"sources":["@wordpress/preferences/src/components/preferences-modal/index.js"],"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=\"preferences-modal\"\n\t\t\ttitle={ __( 'Preferences' ) }\n\t\t\tonRequestClose={ closeModal }\n\t\t>\n\t\t\t{ children }\n\t\t</Modal>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,KAAK,QAAQ,uBAAuB;AAC7C,SAASC,EAAE,QAAQ,iBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAErC,eAAe,SAASC,gBAAgBA,CAAE;EAAEC,UAAU;EAAEC;AAAS,CAAC,EAAG;EACpE,oBACCH,IAAA,CAACH,KAAK;IACLO,SAAS,EAAC,mBAAmB;IAC7BC,KAAK,EAAGP,EAAE,CAAE,aAAc,CAAG;IAC7BQ,cAAc,EAAGJ,UAAY;IAAAC,QAAA,EAE3BA;EAAQ,CACJ,CAAC;AAEV","ignoreList":[]}
@@ -1,18 +1,24 @@
1
- import { createElement } from "react";
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { jsxs as _jsxs } from "react/jsx-runtime";
2
3
  const Section = ({
3
4
  description,
4
5
  title,
5
6
  children
6
- }) => createElement("fieldset", {
7
- className: "preferences-modal__section"
8
- }, createElement("legend", {
9
- className: "preferences-modal__section-legend"
10
- }, createElement("h2", {
11
- className: "preferences-modal__section-title"
12
- }, title), description && createElement("p", {
13
- className: "preferences-modal__section-description"
14
- }, description)), createElement("div", {
15
- className: "preferences-modal__section-content"
16
- }, children));
7
+ }) => /*#__PURE__*/_jsxs("fieldset", {
8
+ className: "preferences-modal__section",
9
+ children: [/*#__PURE__*/_jsxs("legend", {
10
+ className: "preferences-modal__section-legend",
11
+ children: [/*#__PURE__*/_jsx("h2", {
12
+ className: "preferences-modal__section-title",
13
+ children: title
14
+ }), description && /*#__PURE__*/_jsx("p", {
15
+ className: "preferences-modal__section-description",
16
+ children: description
17
+ })]
18
+ }), /*#__PURE__*/_jsx("div", {
19
+ className: "preferences-modal__section-content",
20
+ children: children
21
+ })]
22
+ });
17
23
  export default Section;
18
24
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["Section","description","title","children","createElement","className"],"sources":["@wordpress/preferences/src/components/preferences-modal-section/index.js"],"sourcesContent":["const Section = ( { description, title, children } ) => (\n\t<fieldset className=\"preferences-modal__section\">\n\t\t<legend className=\"preferences-modal__section-legend\">\n\t\t\t<h2 className=\"preferences-modal__section-title\">{ title }</h2>\n\t\t\t{ description && (\n\t\t\t\t<p className=\"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<div className=\"preferences-modal__section-content\">{ children }</div>\n\t</fieldset>\n);\n\nexport default Section;\n"],"mappings":";AAAA,MAAMA,OAAO,GAAGA,CAAE;EAAEC,WAAW;EAAEC,KAAK;EAAEC;AAAS,CAAC,KACjDC,aAAA;EAAUC,SAAS,EAAC;AAA4B,GAC/CD,aAAA;EAAQC,SAAS,EAAC;AAAmC,GACpDD,aAAA;EAAIC,SAAS,EAAC;AAAkC,GAAGH,KAAW,CAAC,EAC7DD,WAAW,IACZG,aAAA;EAAGC,SAAS,EAAC;AAAwC,GAClDJ,WACA,CAEG,CAAC,EACTG,aAAA;EAAKC,SAAS,EAAC;AAAoC,GAAGF,QAAe,CAC5D,CACV;AAED,eAAeH,OAAO","ignoreList":[]}
1
+ {"version":3,"names":["Section","description","title","children","_jsxs","className","_jsx"],"sources":["@wordpress/preferences/src/components/preferences-modal-section/index.js"],"sourcesContent":["const Section = ( { description, title, children } ) => (\n\t<fieldset className=\"preferences-modal__section\">\n\t\t<legend className=\"preferences-modal__section-legend\">\n\t\t\t<h2 className=\"preferences-modal__section-title\">{ title }</h2>\n\t\t\t{ description && (\n\t\t\t\t<p className=\"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<div className=\"preferences-modal__section-content\">{ children }</div>\n\t</fieldset>\n);\n\nexport default Section;\n"],"mappings":";;AAAA,MAAMA,OAAO,GAAGA,CAAE;EAAEC,WAAW;EAAEC,KAAK;EAAEC;AAAS,CAAC,kBACjDC,KAAA;EAAUC,SAAS,EAAC,4BAA4B;EAAAF,QAAA,gBAC/CC,KAAA;IAAQC,SAAS,EAAC,mCAAmC;IAAAF,QAAA,gBACpDG,IAAA;MAAID,SAAS,EAAC,kCAAkC;MAAAF,QAAA,EAAGD;IAAK,CAAM,CAAC,EAC7DD,WAAW,iBACZK,IAAA;MAAGD,SAAS,EAAC,wCAAwC;MAAAF,QAAA,EAClDF;IAAW,CACX,CACH;EAAA,CACM,CAAC,eACTK,IAAA;IAAKD,SAAS,EAAC,oCAAoC;IAAAF,QAAA,EAAGA;EAAQ,CAAO,CAAC;AAAA,CAC7D,CACV;AAED,eAAeH,OAAO","ignoreList":[]}
@@ -1,4 +1,3 @@
1
- import { createElement } from "react";
2
1
  /**
3
2
  * WordPress dependencies
4
3
  */
@@ -12,6 +11,8 @@ import { isRTL, __ } from '@wordpress/i18n';
12
11
  * Internal dependencies
13
12
  */
14
13
  import { unlock } from '../../lock-unlock';
14
+ import { jsx as _jsx } from "react/jsx-runtime";
15
+ import { jsxs as _jsxs } from "react/jsx-runtime";
15
16
  const {
16
17
  Tabs
17
18
  } = unlock(componentsPrivateApis);
@@ -59,63 +60,85 @@ export default function PreferencesModalTabs({
59
60
  let modalContent;
60
61
  // We render different components based on the viewport size.
61
62
  if (isLargeViewport) {
62
- modalContent = createElement("div", {
63
- className: "preferences__tabs"
64
- }, createElement(Tabs, {
65
- defaultTabId: activeMenu !== PREFERENCES_MENU ? activeMenu : undefined,
66
- onSelect: setActiveMenu,
67
- orientation: "vertical"
68
- }, createElement(Tabs.TabList, {
69
- className: "preferences__tabs-tablist"
70
- }, tabs.map(tab => createElement(Tabs.Tab, {
71
- tabId: tab.name,
72
- key: tab.name,
73
- className: "preferences__tabs-tab"
74
- }, tab.title))), tabs.map(tab => createElement(Tabs.TabPanel, {
75
- tabId: tab.name,
76
- key: tab.name,
77
- className: "preferences__tabs-tabpanel",
78
- focusable: false
79
- }, sectionsContentMap[tab.name] || null))));
63
+ modalContent = /*#__PURE__*/_jsx("div", {
64
+ className: "preferences__tabs",
65
+ children: /*#__PURE__*/_jsxs(Tabs, {
66
+ defaultTabId: activeMenu !== PREFERENCES_MENU ? activeMenu : undefined,
67
+ onSelect: setActiveMenu,
68
+ orientation: "vertical",
69
+ children: [/*#__PURE__*/_jsx(Tabs.TabList, {
70
+ className: "preferences__tabs-tablist",
71
+ children: tabs.map(tab => /*#__PURE__*/_jsx(Tabs.Tab, {
72
+ tabId: tab.name,
73
+ className: "preferences__tabs-tab",
74
+ children: tab.title
75
+ }, tab.name))
76
+ }), tabs.map(tab => /*#__PURE__*/_jsx(Tabs.TabPanel, {
77
+ tabId: tab.name,
78
+ className: "preferences__tabs-tabpanel",
79
+ focusable: false,
80
+ children: sectionsContentMap[tab.name] || null
81
+ }, tab.name))]
82
+ })
83
+ });
80
84
  } else {
81
- modalContent = createElement(NavigatorProvider, {
85
+ modalContent = /*#__PURE__*/_jsxs(NavigatorProvider, {
82
86
  initialPath: "/",
83
- className: "preferences__provider"
84
- }, createElement(NavigatorScreen, {
85
- path: "/"
86
- }, createElement(Card, {
87
- isBorderless: true,
88
- size: "small"
89
- }, createElement(CardBody, null, createElement(ItemGroup, null, tabs.map(tab => {
90
- return createElement(NavigatorButton, {
91
- key: tab.name,
92
- path: tab.name,
93
- as: Item,
94
- isAction: true
95
- }, createElement(HStack, {
96
- justify: "space-between"
97
- }, createElement(FlexItem, null, createElement(Truncate, null, tab.title)), createElement(FlexItem, null, createElement(Icon, {
98
- icon: isRTL() ? chevronLeft : chevronRight
99
- }))));
100
- }))))), sections.length && sections.map(section => {
101
- return createElement(NavigatorScreen, {
102
- key: `${section.name}-menu`,
103
- path: section.name
104
- }, createElement(Card, {
105
- isBorderless: true,
106
- size: "large"
107
- }, createElement(CardHeader, {
108
- isBorderless: false,
109
- justify: "left",
110
- size: "small",
111
- gap: "6"
112
- }, createElement(NavigatorBackButton, {
113
- icon: isRTL() ? chevronRight : chevronLeft,
114
- label: __('Back')
115
- }), createElement(Text, {
116
- size: "16"
117
- }, section.tabLabel)), createElement(CardBody, null, section.content)));
118
- }));
87
+ className: "preferences__provider",
88
+ children: [/*#__PURE__*/_jsx(NavigatorScreen, {
89
+ path: "/",
90
+ children: /*#__PURE__*/_jsx(Card, {
91
+ isBorderless: true,
92
+ size: "small",
93
+ children: /*#__PURE__*/_jsx(CardBody, {
94
+ children: /*#__PURE__*/_jsx(ItemGroup, {
95
+ children: tabs.map(tab => {
96
+ return /*#__PURE__*/_jsx(NavigatorButton, {
97
+ path: tab.name,
98
+ as: Item,
99
+ isAction: true,
100
+ children: /*#__PURE__*/_jsxs(HStack, {
101
+ justify: "space-between",
102
+ children: [/*#__PURE__*/_jsx(FlexItem, {
103
+ children: /*#__PURE__*/_jsx(Truncate, {
104
+ children: tab.title
105
+ })
106
+ }), /*#__PURE__*/_jsx(FlexItem, {
107
+ children: /*#__PURE__*/_jsx(Icon, {
108
+ icon: isRTL() ? chevronLeft : chevronRight
109
+ })
110
+ })]
111
+ })
112
+ }, tab.name);
113
+ })
114
+ })
115
+ })
116
+ })
117
+ }), sections.length && sections.map(section => {
118
+ return /*#__PURE__*/_jsx(NavigatorScreen, {
119
+ path: section.name,
120
+ children: /*#__PURE__*/_jsxs(Card, {
121
+ isBorderless: true,
122
+ size: "large",
123
+ children: [/*#__PURE__*/_jsxs(CardHeader, {
124
+ isBorderless: false,
125
+ justify: "left",
126
+ size: "small",
127
+ gap: "6",
128
+ children: [/*#__PURE__*/_jsx(NavigatorBackButton, {
129
+ icon: isRTL() ? chevronRight : chevronLeft,
130
+ label: __('Back')
131
+ }), /*#__PURE__*/_jsx(Text, {
132
+ size: "16",
133
+ children: section.tabLabel
134
+ })]
135
+ }), /*#__PURE__*/_jsx(CardBody, {
136
+ children: section.content
137
+ })]
138
+ })
139
+ }, `${section.name}-menu`);
140
+ })]
141
+ });
119
142
  }
120
143
  return modalContent;
121
144
  }
@@ -1 +1 @@
1
- {"version":3,"names":["useViewportMatch","__experimentalNavigatorProvider","NavigatorProvider","__experimentalNavigatorScreen","NavigatorScreen","__experimentalNavigatorButton","NavigatorButton","__experimentalNavigatorBackButton","NavigatorBackButton","__experimentalItemGroup","ItemGroup","__experimentalItem","Item","__experimentalHStack","HStack","__experimentalText","Text","__experimentalTruncate","Truncate","FlexItem","Card","CardHeader","CardBody","privateApis","componentsPrivateApis","useMemo","useState","chevronLeft","chevronRight","Icon","isRTL","__","unlock","Tabs","PREFERENCES_MENU","PreferencesModalTabs","sections","isLargeViewport","activeMenu","setActiveMenu","tabs","sectionsContentMap","mappedTabs","length","reduce","accumulator","name","tabLabel","title","content","push","modalContent","createElement","className","defaultTabId","undefined","onSelect","orientation","TabList","map","tab","Tab","tabId","key","TabPanel","focusable","initialPath","path","isBorderless","size","as","isAction","justify","icon","section","gap","label"],"sources":["@wordpress/preferences/src/components/preferences-modal-tabs/index.js"],"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\tCard,\n\tCardHeader,\n\tCardBody,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useMemo, useState } from '@wordpress/element';\nimport { chevronLeft, chevronRight, Icon } from '@wordpress/icons';\nimport { isRTL, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\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 `Tabs` 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\tlet modalContent;\n\t// We render different components based on the viewport size.\n\tif ( isLargeViewport ) {\n\t\tmodalContent = (\n\t\t\t<div className=\"preferences__tabs\">\n\t\t\t\t<Tabs\n\t\t\t\t\tdefaultTabId={\n\t\t\t\t\t\tactiveMenu !== PREFERENCES_MENU ? activeMenu : undefined\n\t\t\t\t\t}\n\t\t\t\t\tonSelect={ setActiveMenu }\n\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t>\n\t\t\t\t\t<Tabs.TabList className=\"preferences__tabs-tablist\">\n\t\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t\t<Tabs.Tab\n\t\t\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\t\tclassName=\"preferences__tabs-tab\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\tclassName=\"preferences__tabs-tabpanel\"\n\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sectionsContentMap[ tab.name ] || null }\n\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t) ) }\n\t\t\t\t</Tabs>\n\t\t\t</div>\n\t\t);\n\t} else {\n\t\tmodalContent = (\n\t\t\t<NavigatorProvider\n\t\t\t\tinitialPath=\"/\"\n\t\t\t\tclassName=\"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\tlabel={ __( 'Back' ) }\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"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["useViewportMatch","__experimentalNavigatorProvider","NavigatorProvider","__experimentalNavigatorScreen","NavigatorScreen","__experimentalNavigatorButton","NavigatorButton","__experimentalNavigatorBackButton","NavigatorBackButton","__experimentalItemGroup","ItemGroup","__experimentalItem","Item","__experimentalHStack","HStack","__experimentalText","Text","__experimentalTruncate","Truncate","FlexItem","Card","CardHeader","CardBody","privateApis","componentsPrivateApis","useMemo","useState","chevronLeft","chevronRight","Icon","isRTL","__","unlock","jsx","_jsx","jsxs","_jsxs","Tabs","PREFERENCES_MENU","PreferencesModalTabs","sections","isLargeViewport","activeMenu","setActiveMenu","tabs","sectionsContentMap","mappedTabs","length","reduce","accumulator","name","tabLabel","title","content","push","modalContent","className","children","defaultTabId","undefined","onSelect","orientation","TabList","map","tab","Tab","tabId","TabPanel","focusable","initialPath","path","isBorderless","size","as","isAction","justify","icon","section","gap","label"],"sources":["@wordpress/preferences/src/components/preferences-modal-tabs/index.js"],"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\tCard,\n\tCardHeader,\n\tCardBody,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useMemo, useState } from '@wordpress/element';\nimport { chevronLeft, chevronRight, Icon } from '@wordpress/icons';\nimport { isRTL, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\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 `Tabs` 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\tlet modalContent;\n\t// We render different components based on the viewport size.\n\tif ( isLargeViewport ) {\n\t\tmodalContent = (\n\t\t\t<div className=\"preferences__tabs\">\n\t\t\t\t<Tabs\n\t\t\t\t\tdefaultTabId={\n\t\t\t\t\t\tactiveMenu !== PREFERENCES_MENU ? activeMenu : undefined\n\t\t\t\t\t}\n\t\t\t\t\tonSelect={ setActiveMenu }\n\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t>\n\t\t\t\t\t<Tabs.TabList className=\"preferences__tabs-tablist\">\n\t\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t\t<Tabs.Tab\n\t\t\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\t\tclassName=\"preferences__tabs-tab\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\tclassName=\"preferences__tabs-tabpanel\"\n\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sectionsContentMap[ tab.name ] || null }\n\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t) ) }\n\t\t\t\t</Tabs>\n\t\t\t</div>\n\t\t);\n\t} else {\n\t\tmodalContent = (\n\t\t\t<NavigatorProvider\n\t\t\t\tinitialPath=\"/\"\n\t\t\t\tclassName=\"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\tlabel={ __( 'Back' ) }\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"],"mappings":"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","ignoreList":[]}
@@ -135,11 +135,14 @@
135
135
  }
136
136
 
137
137
  .preferences__tabs-tablist {
138
- position: absolute;
138
+ position: absolute !important;
139
139
  top: 84px;
140
140
  right: 16px;
141
141
  width: 160px;
142
142
  }
143
+ .preferences__tabs-tablist::after {
144
+ content: none !important;
145
+ }
143
146
 
144
147
  .preferences__tabs-tab {
145
148
  border-radius: 2px;
@@ -150,9 +153,6 @@
150
153
  box-shadow: none;
151
154
  font-weight: 500;
152
155
  }
153
- .preferences__tabs-tab[aria-selected=true]::after {
154
- content: none;
155
- }
156
156
  .preferences__tabs-tab[role=tab]:focus:not(:disabled) {
157
157
  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
158
158
  outline: 2px solid transparent;
@@ -135,11 +135,14 @@
135
135
  }
136
136
 
137
137
  .preferences__tabs-tablist {
138
- position: absolute;
138
+ position: absolute !important;
139
139
  top: 84px;
140
140
  left: 16px;
141
141
  width: 160px;
142
142
  }
143
+ .preferences__tabs-tablist::after {
144
+ content: none !important;
145
+ }
143
146
 
144
147
  .preferences__tabs-tab {
145
148
  border-radius: 2px;
@@ -150,9 +153,6 @@
150
153
  box-shadow: none;
151
154
  font-weight: 500;
152
155
  }
153
- .preferences__tabs-tab[aria-selected=true]::after {
154
- content: none;
155
- }
156
156
  .preferences__tabs-tab[role=tab]:focus:not(:disabled) {
157
157
  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
158
158
  outline: 2px solid transparent;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/preferences",
3
- "version": "3.35.0",
3
+ "version": "4.0.0",
4
4
  "description": "Utilities for managing WordPress preferences.",
5
5
  "author": "The WordPress Contributors",
6
6
  "license": "GPL-2.0-or-later",
@@ -21,7 +21,8 @@
21
21
  "url": "https://github.com/WordPress/gutenberg/issues"
22
22
  },
23
23
  "engines": {
24
- "node": ">=12"
24
+ "node": ">=18.12.0",
25
+ "npm": ">=8.19.2"
25
26
  },
26
27
  "main": "build/index.js",
27
28
  "module": "build-module/index.js",
@@ -29,15 +30,15 @@
29
30
  "sideEffects": false,
30
31
  "dependencies": {
31
32
  "@babel/runtime": "^7.16.0",
32
- "@wordpress/a11y": "^3.58.0",
33
- "@wordpress/components": "^27.6.0",
34
- "@wordpress/compose": "^6.35.0",
35
- "@wordpress/data": "^9.28.0",
36
- "@wordpress/deprecated": "^3.58.0",
37
- "@wordpress/element": "^5.35.0",
38
- "@wordpress/i18n": "^4.58.0",
39
- "@wordpress/icons": "^9.49.0",
40
- "@wordpress/private-apis": "^0.40.0",
33
+ "@wordpress/a11y": "^4.0.0",
34
+ "@wordpress/components": "^28.0.0",
35
+ "@wordpress/compose": "^7.0.0",
36
+ "@wordpress/data": "^10.0.0",
37
+ "@wordpress/deprecated": "^4.0.0",
38
+ "@wordpress/element": "^6.0.0",
39
+ "@wordpress/i18n": "^5.0.0",
40
+ "@wordpress/icons": "^10.0.0",
41
+ "@wordpress/private-apis": "^1.0.0",
41
42
  "clsx": "^2.1.1"
42
43
  },
43
44
  "peerDependencies": {
@@ -47,5 +48,5 @@
47
48
  "publishConfig": {
48
49
  "access": "public"
49
50
  },
50
- "gitHead": "42f38f287506a6b3ed8ccba839b18ad066821044"
51
+ "gitHead": "2f30cddff15723ac7017fd009fc5913b7b419400"
51
52
  }
@@ -1,12 +1,15 @@
1
1
  $vertical-tabs-width: 160px;
2
2
 
3
3
  .preferences__tabs-tablist {
4
- position: absolute;
4
+ position: absolute !important;
5
5
  top: $header-height + $grid-unit-30;
6
6
  // Aligns button text instead of button box.
7
7
  left: $grid-unit-20;
8
8
  width: $vertical-tabs-width;
9
9
 
10
+ &::after {
11
+ content: none !important;
12
+ }
10
13
  }
11
14
 
12
15
  .preferences__tabs-tab {
@@ -19,10 +22,6 @@ $vertical-tabs-width: 160px;
19
22
  font-weight: 500;
20
23
  }
21
24
 
22
- &[aria-selected="true"]::after {
23
- content: none;
24
- }
25
-
26
25
  &[role="tab"]:focus:not(:disabled) {
27
26
  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
28
27
  // Windows high contrast mode.