--- a/wp/wp-includes/js/dist/components.js Fri Sep 05 18:40:08 2025 +0200
+++ b/wp/wp-includes/js/dist/components.js Fri Sep 05 18:52:52 2025 +0200
@@ -142,12 +142,230 @@
/***/ }),
-/***/ 2287:
+/***/ 83:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+/**
+ * @license React
+ * use-sync-external-store-shim.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+var React = __webpack_require__(1609);
+function is(x, y) {
+ return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
+}
+var objectIs = "function" === typeof Object.is ? Object.is : is,
+ useState = React.useState,
+ useEffect = React.useEffect,
+ useLayoutEffect = React.useLayoutEffect,
+ useDebugValue = React.useDebugValue;
+function useSyncExternalStore$2(subscribe, getSnapshot) {
+ var value = getSnapshot(),
+ _useState = useState({ inst: { value: value, getSnapshot: getSnapshot } }),
+ inst = _useState[0].inst,
+ forceUpdate = _useState[1];
+ useLayoutEffect(
+ function () {
+ inst.value = value;
+ inst.getSnapshot = getSnapshot;
+ checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+ },
+ [subscribe, value, getSnapshot]
+ );
+ useEffect(
+ function () {
+ checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+ return subscribe(function () {
+ checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+ });
+ },
+ [subscribe]
+ );
+ useDebugValue(value);
+ return value;
+}
+function checkIfSnapshotChanged(inst) {
+ var latestGetSnapshot = inst.getSnapshot;
+ inst = inst.value;
+ try {
+ var nextValue = latestGetSnapshot();
+ return !objectIs(inst, nextValue);
+ } catch (error) {
+ return !0;
+ }
+}
+function useSyncExternalStore$1(subscribe, getSnapshot) {
+ return getSnapshot();
+}
+var shim =
+ "undefined" === typeof window ||
+ "undefined" === typeof window.document ||
+ "undefined" === typeof window.document.createElement
+ ? useSyncExternalStore$1
+ : useSyncExternalStore$2;
+exports.useSyncExternalStore =
+ void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim;
+
+
+/***/ }),
+
+/***/ 422:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+"use strict";
+
+
+if (true) {
+ module.exports = __webpack_require__(83);
+} else {}
+
+
+/***/ }),
+
+/***/ 1178:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+"use strict";
+
+
+if (true) {
+ module.exports = __webpack_require__(2950);
+} else {}
+
+
+/***/ }),
+
+/***/ 1609:
+/***/ ((module) => {
+
+"use strict";
+module.exports = window["React"];
+
+/***/ }),
+
+/***/ 1880:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+"use strict";
+
+
+var reactIs = __webpack_require__(1178);
+
+/**
+ * Copyright 2015, Yahoo! Inc.
+ * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
+ */
+var REACT_STATICS = {
+ childContextTypes: true,
+ contextType: true,
+ contextTypes: true,
+ defaultProps: true,
+ displayName: true,
+ getDefaultProps: true,
+ getDerivedStateFromError: true,
+ getDerivedStateFromProps: true,
+ mixins: true,
+ propTypes: true,
+ type: true
+};
+var KNOWN_STATICS = {
+ name: true,
+ length: true,
+ prototype: true,
+ caller: true,
+ callee: true,
+ arguments: true,
+ arity: true
+};
+var FORWARD_REF_STATICS = {
+ '$$typeof': true,
+ render: true,
+ defaultProps: true,
+ displayName: true,
+ propTypes: true
+};
+var MEMO_STATICS = {
+ '$$typeof': true,
+ compare: true,
+ defaultProps: true,
+ displayName: true,
+ propTypes: true,
+ type: true
+};
+var TYPE_STATICS = {};
+TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
+TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
+
+function getStatics(component) {
+ // React v16.11 and below
+ if (reactIs.isMemo(component)) {
+ return MEMO_STATICS;
+ } // React v16.12 and above
+
+
+ return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;
+}
+
+var defineProperty = Object.defineProperty;
+var getOwnPropertyNames = Object.getOwnPropertyNames;
+var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
+var getPrototypeOf = Object.getPrototypeOf;
+var objectPrototype = Object.prototype;
+function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {
+ if (typeof sourceComponent !== 'string') {
+ // don't hoist over string (html) components
+ if (objectPrototype) {
+ var inheritedComponent = getPrototypeOf(sourceComponent);
+
+ if (inheritedComponent && inheritedComponent !== objectPrototype) {
+ hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);
+ }
+ }
+
+ var keys = getOwnPropertyNames(sourceComponent);
+
+ if (getOwnPropertySymbols) {
+ keys = keys.concat(getOwnPropertySymbols(sourceComponent));
+ }
+
+ var targetStatics = getStatics(targetComponent);
+ var sourceStatics = getStatics(sourceComponent);
+
+ for (var i = 0; i < keys.length; ++i) {
+ var key = keys[i];
+
+ if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {
+ var descriptor = getOwnPropertyDescriptor(sourceComponent, key);
+
+ try {
+ // Avoid failures from read-only properties
+ defineProperty(targetComponent, key, descriptor);
+ } catch (e) {}
+ }
+ }
+ }
+
+ return targetComponent;
+}
+
+module.exports = hoistNonReactStatics;
+
+
+/***/ }),
+
+/***/ 2950:
/***/ ((__unused_webpack_module, exports) => {
"use strict";
-var __webpack_unused_export__;
-/** @license React v17.0.2
+/** @license React v16.13.1
* react-is.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
@@ -155,25 +373,13 @@
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
-var b=60103,c=60106,d=60107,e=60108,f=60114,g=60109,h=60110,k=60112,l=60113,m=60120,n=60115,p=60116,q=60121,r=60122,u=60117,v=60129,w=60131;
-if("function"===typeof Symbol&&Symbol.for){var x=Symbol.for;b=x("react.element");c=x("react.portal");d=x("react.fragment");e=x("react.strict_mode");f=x("react.profiler");g=x("react.provider");h=x("react.context");k=x("react.forward_ref");l=x("react.suspense");m=x("react.suspense_list");n=x("react.memo");p=x("react.lazy");q=x("react.block");r=x("react.server.block");u=x("react.fundamental");v=x("react.debug_trace_mode");w=x("react.legacy_hidden")}
-function y(a){if("object"===typeof a&&null!==a){var t=a.$$typeof;switch(t){case b:switch(a=a.type,a){case d:case f:case e:case l:case m:return a;default:switch(a=a&&a.$$typeof,a){case h:case k:case p:case n:case g:return a;default:return t}}case c:return t}}}var z=g,A=b,B=k,C=d,D=p,E=n,F=c,G=f,H=e,I=l;__webpack_unused_export__=h;__webpack_unused_export__=z;__webpack_unused_export__=A;__webpack_unused_export__=B;__webpack_unused_export__=C;__webpack_unused_export__=D;__webpack_unused_export__=E;__webpack_unused_export__=F;__webpack_unused_export__=G;__webpack_unused_export__=H;
-__webpack_unused_export__=I;__webpack_unused_export__=function(){return!1};__webpack_unused_export__=function(){return!1};__webpack_unused_export__=function(a){return y(a)===h};__webpack_unused_export__=function(a){return y(a)===g};__webpack_unused_export__=function(a){return"object"===typeof a&&null!==a&&a.$$typeof===b};__webpack_unused_export__=function(a){return y(a)===k};__webpack_unused_export__=function(a){return y(a)===d};__webpack_unused_export__=function(a){return y(a)===p};__webpack_unused_export__=function(a){return y(a)===n};
-__webpack_unused_export__=function(a){return y(a)===c};__webpack_unused_export__=function(a){return y(a)===f};__webpack_unused_export__=function(a){return y(a)===e};__webpack_unused_export__=function(a){return y(a)===l};__webpack_unused_export__=function(a){return"string"===typeof a||"function"===typeof a||a===d||a===f||a===v||a===e||a===l||a===m||a===w||"object"===typeof a&&null!==a&&(a.$$typeof===p||a.$$typeof===n||a.$$typeof===g||a.$$typeof===h||a.$$typeof===k||a.$$typeof===u||a.$$typeof===q||a[0]===r)?!0:!1};
-__webpack_unused_export__=y;
-
-
-/***/ }),
-
-/***/ 1915:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-"use strict";
-
-
-if (true) {
- /* unused reexport */ __webpack_require__(2287);
-} else {}
+
+var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
+Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
+function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}exports.AsyncMode=l;exports.ConcurrentMode=m;exports.ContextConsumer=k;exports.ContextProvider=h;exports.Element=c;exports.ForwardRef=n;exports.Fragment=e;exports.Lazy=t;exports.Memo=r;exports.Portal=d;
+exports.Profiler=g;exports.StrictMode=f;exports.Suspense=p;exports.isAsyncMode=function(a){return A(a)||z(a)===l};exports.isConcurrentMode=A;exports.isContextConsumer=function(a){return z(a)===k};exports.isContextProvider=function(a){return z(a)===h};exports.isElement=function(a){return"object"===typeof a&&null!==a&&a.$$typeof===c};exports.isForwardRef=function(a){return z(a)===n};exports.isFragment=function(a){return z(a)===e};exports.isLazy=function(a){return z(a)===t};
+exports.isMemo=function(a){return z(a)===r};exports.isPortal=function(a){return z(a)===d};exports.isProfiler=function(a){return z(a)===g};exports.isStrictMode=function(a){return z(a)===f};exports.isSuspense=function(a){return z(a)===p};
+exports.isValidElementType=function(a){return"string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};exports.typeOf=z;
/***/ }),
@@ -866,265 +1072,6 @@
/***/ }),
-/***/ 1880:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-"use strict";
-
-
-var reactIs = __webpack_require__(1178);
-
-/**
- * Copyright 2015, Yahoo! Inc.
- * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
- */
-var REACT_STATICS = {
- childContextTypes: true,
- contextType: true,
- contextTypes: true,
- defaultProps: true,
- displayName: true,
- getDefaultProps: true,
- getDerivedStateFromError: true,
- getDerivedStateFromProps: true,
- mixins: true,
- propTypes: true,
- type: true
-};
-var KNOWN_STATICS = {
- name: true,
- length: true,
- prototype: true,
- caller: true,
- callee: true,
- arguments: true,
- arity: true
-};
-var FORWARD_REF_STATICS = {
- '$$typeof': true,
- render: true,
- defaultProps: true,
- displayName: true,
- propTypes: true
-};
-var MEMO_STATICS = {
- '$$typeof': true,
- compare: true,
- defaultProps: true,
- displayName: true,
- propTypes: true,
- type: true
-};
-var TYPE_STATICS = {};
-TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
-TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
-
-function getStatics(component) {
- // React v16.11 and below
- if (reactIs.isMemo(component)) {
- return MEMO_STATICS;
- } // React v16.12 and above
-
-
- return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;
-}
-
-var defineProperty = Object.defineProperty;
-var getOwnPropertyNames = Object.getOwnPropertyNames;
-var getOwnPropertySymbols = Object.getOwnPropertySymbols;
-var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
-var getPrototypeOf = Object.getPrototypeOf;
-var objectPrototype = Object.prototype;
-function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {
- if (typeof sourceComponent !== 'string') {
- // don't hoist over string (html) components
- if (objectPrototype) {
- var inheritedComponent = getPrototypeOf(sourceComponent);
-
- if (inheritedComponent && inheritedComponent !== objectPrototype) {
- hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);
- }
- }
-
- var keys = getOwnPropertyNames(sourceComponent);
-
- if (getOwnPropertySymbols) {
- keys = keys.concat(getOwnPropertySymbols(sourceComponent));
- }
-
- var targetStatics = getStatics(targetComponent);
- var sourceStatics = getStatics(sourceComponent);
-
- for (var i = 0; i < keys.length; ++i) {
- var key = keys[i];
-
- if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {
- var descriptor = getOwnPropertyDescriptor(sourceComponent, key);
-
- try {
- // Avoid failures from read-only properties
- defineProperty(targetComponent, key, descriptor);
- } catch (e) {}
- }
- }
- }
-
- return targetComponent;
-}
-
-module.exports = hoistNonReactStatics;
-
-
-/***/ }),
-
-/***/ 2950:
-/***/ ((__unused_webpack_module, exports) => {
-
-"use strict";
-/** @license React v16.13.1
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
-Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
-function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}exports.AsyncMode=l;exports.ConcurrentMode=m;exports.ContextConsumer=k;exports.ContextProvider=h;exports.Element=c;exports.ForwardRef=n;exports.Fragment=e;exports.Lazy=t;exports.Memo=r;exports.Portal=d;
-exports.Profiler=g;exports.StrictMode=f;exports.Suspense=p;exports.isAsyncMode=function(a){return A(a)||z(a)===l};exports.isConcurrentMode=A;exports.isContextConsumer=function(a){return z(a)===k};exports.isContextProvider=function(a){return z(a)===h};exports.isElement=function(a){return"object"===typeof a&&null!==a&&a.$$typeof===c};exports.isForwardRef=function(a){return z(a)===n};exports.isFragment=function(a){return z(a)===e};exports.isLazy=function(a){return z(a)===t};
-exports.isMemo=function(a){return z(a)===r};exports.isPortal=function(a){return z(a)===d};exports.isProfiler=function(a){return z(a)===g};exports.isStrictMode=function(a){return z(a)===f};exports.isSuspense=function(a){return z(a)===p};
-exports.isValidElementType=function(a){return"string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};exports.typeOf=z;
-
-
-/***/ }),
-
-/***/ 1178:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-"use strict";
-
-
-if (true) {
- module.exports = __webpack_require__(2950);
-} else {}
-
-
-/***/ }),
-
-/***/ 628:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-"use strict";
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-
-
-var ReactPropTypesSecret = __webpack_require__(4067);
-
-function emptyFunction() {}
-function emptyFunctionWithReset() {}
-emptyFunctionWithReset.resetWarningCache = emptyFunction;
-
-module.exports = function() {
- function shim(props, propName, componentName, location, propFullName, secret) {
- if (secret === ReactPropTypesSecret) {
- // It is still safe when called from React.
- return;
- }
- var err = new Error(
- 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
- 'Use PropTypes.checkPropTypes() to call them. ' +
- 'Read more at http://fb.me/use-check-prop-types'
- );
- err.name = 'Invariant Violation';
- throw err;
- };
- shim.isRequired = shim;
- function getShim() {
- return shim;
- };
- // Important!
- // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
- var ReactPropTypes = {
- array: shim,
- bigint: shim,
- bool: shim,
- func: shim,
- number: shim,
- object: shim,
- string: shim,
- symbol: shim,
-
- any: shim,
- arrayOf: getShim,
- element: shim,
- elementType: shim,
- instanceOf: getShim,
- node: shim,
- objectOf: getShim,
- oneOf: getShim,
- oneOfType: getShim,
- shape: getShim,
- exact: getShim,
-
- checkPropTypes: emptyFunctionWithReset,
- resetWarningCache: emptyFunction
- };
-
- ReactPropTypes.PropTypes = ReactPropTypes;
-
- return ReactPropTypes;
-};
-
-
-/***/ }),
-
-/***/ 5826:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-if (false) { var throwOnDirectAccess, ReactIs; } else {
- // By explicitly using `prop-types` you are opting into new production behavior.
- // http://fb.me/prop-types-in-prod
- module.exports = __webpack_require__(628)();
-}
-
-
-/***/ }),
-
-/***/ 4067:
-/***/ ((module) => {
-
-"use strict";
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-
-
-var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
-
-module.exports = ReactPropTypesSecret;
-
-
-/***/ }),
-
/***/ 9681:
/***/ ((module) => {
@@ -1611,46 +1558,6 @@
module.exports.remove = removeAccents;
-/***/ }),
-
-/***/ 8477:
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
-
-"use strict";
-/**
- * @license React
- * use-sync-external-store-shim.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var e=__webpack_require__(1609);function h(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var k="function"===typeof Object.is?Object.is:h,l=e.useState,m=e.useEffect,n=e.useLayoutEffect,p=e.useDebugValue;function q(a,b){var d=b(),f=l({inst:{value:d,getSnapshot:b}}),c=f[0].inst,g=f[1];n(function(){c.value=d;c.getSnapshot=b;r(c)&&g({inst:c})},[a,d,b]);m(function(){r(c)&&g({inst:c});return a(function(){r(c)&&g({inst:c})})},[a]);p(d);return d}
-function r(a){var b=a.getSnapshot;a=a.value;try{var d=b();return!k(a,d)}catch(f){return!0}}function t(a,b){return b()}var u="undefined"===typeof window||"undefined"===typeof window.document||"undefined"===typeof window.document.createElement?t:q;exports.useSyncExternalStore=void 0!==e.useSyncExternalStore?e.useSyncExternalStore:u;
-
-
-/***/ }),
-
-/***/ 422:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-"use strict";
-
-
-if (true) {
- module.exports = __webpack_require__(8477);
-} else {}
-
-
-/***/ }),
-
-/***/ 1609:
-/***/ ((module) => {
-
-"use strict";
-module.exports = window["React"];
-
/***/ })
/******/ });
@@ -1757,7 +1664,7 @@
/******/
/************************************************************************/
var __webpack_exports__ = {};
-// This entry need to be wrapped in an IIFE because it need to be in strict mode.
+// This entry needs to be wrapped in an IIFE because it needs to be in strict mode.
(() => {
"use strict";
// ESM COMPAT FLAG
@@ -1765,11 +1672,15 @@
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
+ AlignmentMatrixControl: () => (/* reexport */ alignment_matrix_control),
AnglePickerControl: () => (/* reexport */ angle_picker_control),
Animate: () => (/* reexport */ animate),
Autocomplete: () => (/* reexport */ Autocomplete),
BaseControl: () => (/* reexport */ base_control),
BlockQuotation: () => (/* reexport */ external_wp_primitives_namespaceObject.BlockQuotation),
+ BorderBoxControl: () => (/* reexport */ border_box_control_component),
+ BorderControl: () => (/* reexport */ border_control_component),
+ BoxControl: () => (/* reexport */ box_control),
Button: () => (/* reexport */ build_module_button),
ButtonGroup: () => (/* reexport */ button_group),
Card: () => (/* reexport */ card_component),
@@ -1785,8 +1696,9 @@
ColorPalette: () => (/* reexport */ color_palette),
ColorPicker: () => (/* reexport */ LegacyAdapter),
ComboboxControl: () => (/* reexport */ combobox_control),
+ Composite: () => (/* reexport */ Composite),
CustomGradientPicker: () => (/* reexport */ custom_gradient_picker),
- CustomSelectControl: () => (/* reexport */ StableCustomSelectControl),
+ CustomSelectControl: () => (/* reexport */ custom_select_control),
Dashicon: () => (/* reexport */ dashicon),
DatePicker: () => (/* reexport */ date),
DateTimePicker: () => (/* reexport */ build_module_date_time),
@@ -1825,6 +1737,7 @@
MenuItemsChoice: () => (/* reexport */ menu_items_choice),
Modal: () => (/* reexport */ modal),
NavigableMenu: () => (/* reexport */ navigable_container_menu),
+ Navigator: () => (/* reexport */ navigator_Navigator),
Notice: () => (/* reexport */ build_module_notice),
NoticeList: () => (/* reexport */ list),
Panel: () => (/* reexport */ panel),
@@ -1894,11 +1807,11 @@
__experimentalNavigationGroup: () => (/* reexport */ group),
__experimentalNavigationItem: () => (/* reexport */ navigation_item),
__experimentalNavigationMenu: () => (/* reexport */ navigation_menu),
- __experimentalNavigatorBackButton: () => (/* reexport */ navigator_back_button_component),
- __experimentalNavigatorButton: () => (/* reexport */ navigator_button_component),
- __experimentalNavigatorProvider: () => (/* reexport */ navigator_provider_component),
- __experimentalNavigatorScreen: () => (/* reexport */ navigator_screen_component),
- __experimentalNavigatorToParentButton: () => (/* reexport */ navigator_to_parent_button_component),
+ __experimentalNavigatorBackButton: () => (/* reexport */ legacy_NavigatorBackButton),
+ __experimentalNavigatorButton: () => (/* reexport */ legacy_NavigatorButton),
+ __experimentalNavigatorProvider: () => (/* reexport */ NavigatorProvider),
+ __experimentalNavigatorScreen: () => (/* reexport */ legacy_NavigatorScreen),
+ __experimentalNavigatorToParentButton: () => (/* reexport */ legacy_NavigatorToParentButton),
__experimentalNumberControl: () => (/* reexport */ number_control),
__experimentalPaletteEdit: () => (/* reexport */ palette_edit),
__experimentalParseQuantityAndUnitFromRawValue: () => (/* reexport */ parseQuantityAndUnitFromRawValue),
@@ -1923,7 +1836,7 @@
__experimentalTruncate: () => (/* reexport */ truncate_component),
__experimentalUnitControl: () => (/* reexport */ unit_control),
__experimentalUseCustomUnits: () => (/* reexport */ useCustomUnits),
- __experimentalUseNavigator: () => (/* reexport */ use_navigator),
+ __experimentalUseNavigator: () => (/* reexport */ useNavigator),
__experimentalUseSlot: () => (/* reexport */ useSlot),
__experimentalUseSlotFills: () => (/* reexport */ useSlotFills),
__experimentalVStack: () => (/* reexport */ v_stack_component),
@@ -1936,7 +1849,6 @@
__unstableDisclosureContent: () => (/* reexport */ disclosure_DisclosureContent),
__unstableGetAnimateClassName: () => (/* reexport */ getAnimateClassName),
__unstableMotion: () => (/* reexport */ motion),
- __unstableMotionContext: () => (/* reexport */ MotionContext),
__unstableUseAutocompleteProps: () => (/* reexport */ useAutocompleteProps),
__unstableUseCompositeState: () => (/* reexport */ useCompositeState),
__unstableUseNavigateRegions: () => (/* reexport */ useNavigateRegions),
@@ -1944,6 +1856,7 @@
navigateRegions: () => (/* reexport */ navigate_regions),
privateApis: () => (/* reexport */ privateApis),
useBaseControlProps: () => (/* reexport */ useBaseControlProps),
+ useNavigator: () => (/* reexport */ useNavigator),
withConstrainedTabbing: () => (/* reexport */ with_constrained_tabbing),
withFallbackStyles: () => (/* reexport */ with_fallback_styles),
withFilters: () => (/* reexport */ withFilters),
@@ -1970,35 +1883,23 @@
var toggle_group_control_option_base_styles_namespaceObject = {};
__webpack_require__.r(toggle_group_control_option_base_styles_namespaceObject);
__webpack_require__.d(toggle_group_control_option_base_styles_namespaceObject, {
- ButtonContentView: () => (ButtonContentView),
- LabelView: () => (LabelView),
- ou: () => (backdropView),
+ Rp: () => (ButtonContentView),
+ y0: () => (LabelView),
uG: () => (buttonView),
eh: () => (labelBlock)
});
-;// CONCATENATED MODULE: external ["wp","primitives"]
+;// external ["wp","primitives"]
const external_wp_primitives_namespaceObject = window["wp"]["primitives"];
-;// CONCATENATED MODULE: ./node_modules/clsx/dist/clsx.mjs
+;// ./node_modules/clsx/dist/clsx.mjs
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f)}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}/* harmony default export */ const dist_clsx = (clsx);
-;// CONCATENATED MODULE: external ["wp","i18n"]
+;// external ["wp","i18n"]
const external_wp_i18n_namespaceObject = window["wp"]["i18n"];
-;// CONCATENATED MODULE: external ["wp","compose"]
+;// external ["wp","compose"]
const external_wp_compose_namespaceObject = window["wp"]["compose"];
-// EXTERNAL MODULE: external "React"
-var external_React_ = __webpack_require__(1609);
-var external_React_namespaceObject = /*#__PURE__*/__webpack_require__.t(external_React_, 2);
-var external_React_default = /*#__PURE__*/__webpack_require__.n(external_React_);
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/SHA3WOPI.js
-"use client";
-
-// src/focusable/focusable-context.ts
-
-var FocusableContext = (0,external_React_.createContext)(true);
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/4R3V3JGP.js
+;// external ["wp","element"]
+const external_wp_element_namespaceObject = window["wp"]["element"];
+;// ./node_modules/@ariakit/react-core/esm/__chunks/3YLGPPWQ.js
"use client";
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
@@ -2007,7 +1908,7 @@
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var _4R3V3JGP_spreadValues = (a, b) => {
+var _3YLGPPWQ_spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
@@ -2018,7 +1919,7 @@
}
return a;
};
-var _4R3V3JGP_spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var _3YLGPPWQ_spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
var target = {};
for (var prop in source)
@@ -2034,35 +1935,35 @@
-;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/4R3V3JGP.js
-"use client";
-var _4R3V3JGP_defProp = Object.defineProperty;
-var _4R3V3JGP_defProps = Object.defineProperties;
-var _4R3V3JGP_getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var _4R3V3JGP_getOwnPropSymbols = Object.getOwnPropertySymbols;
-var _4R3V3JGP_hasOwnProp = Object.prototype.hasOwnProperty;
-var _4R3V3JGP_propIsEnum = Object.prototype.propertyIsEnumerable;
-var _4R3V3JGP_defNormalProp = (obj, key, value) => key in obj ? _4R3V3JGP_defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var _chunks_4R3V3JGP_spreadValues = (a, b) => {
+;// ./node_modules/@ariakit/core/esm/__chunks/3YLGPPWQ.js
+"use client";
+var _3YLGPPWQ_defProp = Object.defineProperty;
+var _3YLGPPWQ_defProps = Object.defineProperties;
+var _3YLGPPWQ_getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var _3YLGPPWQ_getOwnPropSymbols = Object.getOwnPropertySymbols;
+var _3YLGPPWQ_hasOwnProp = Object.prototype.hasOwnProperty;
+var _3YLGPPWQ_propIsEnum = Object.prototype.propertyIsEnumerable;
+var _3YLGPPWQ_defNormalProp = (obj, key, value) => key in obj ? _3YLGPPWQ_defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var _chunks_3YLGPPWQ_spreadValues = (a, b) => {
for (var prop in b || (b = {}))
- if (_4R3V3JGP_hasOwnProp.call(b, prop))
- _4R3V3JGP_defNormalProp(a, prop, b[prop]);
- if (_4R3V3JGP_getOwnPropSymbols)
- for (var prop of _4R3V3JGP_getOwnPropSymbols(b)) {
- if (_4R3V3JGP_propIsEnum.call(b, prop))
- _4R3V3JGP_defNormalProp(a, prop, b[prop]);
+ if (_3YLGPPWQ_hasOwnProp.call(b, prop))
+ _3YLGPPWQ_defNormalProp(a, prop, b[prop]);
+ if (_3YLGPPWQ_getOwnPropSymbols)
+ for (var prop of _3YLGPPWQ_getOwnPropSymbols(b)) {
+ if (_3YLGPPWQ_propIsEnum.call(b, prop))
+ _3YLGPPWQ_defNormalProp(a, prop, b[prop]);
}
return a;
};
-var _chunks_4R3V3JGP_spreadProps = (a, b) => _4R3V3JGP_defProps(a, _4R3V3JGP_getOwnPropDescs(b));
-var _4R3V3JGP_objRest = (source, exclude) => {
+var _chunks_3YLGPPWQ_spreadProps = (a, b) => _3YLGPPWQ_defProps(a, _3YLGPPWQ_getOwnPropDescs(b));
+var _3YLGPPWQ_objRest = (source, exclude) => {
var target = {};
for (var prop in source)
- if (_4R3V3JGP_hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+ if (_3YLGPPWQ_hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
- if (source != null && _4R3V3JGP_getOwnPropSymbols)
- for (var prop of _4R3V3JGP_getOwnPropSymbols(source)) {
- if (exclude.indexOf(prop) < 0 && _4R3V3JGP_propIsEnum.call(source, prop))
+ if (source != null && _3YLGPPWQ_getOwnPropSymbols)
+ for (var prop of _3YLGPPWQ_getOwnPropSymbols(source)) {
+ if (exclude.indexOf(prop) < 0 && _3YLGPPWQ_propIsEnum.call(source, prop))
target[prop] = source[prop];
}
return target;
@@ -2070,7 +1971,7 @@
-;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/Y3OOHFCN.js
+;// ./node_modules/@ariakit/core/esm/__chunks/PBFD2E7P.js
"use client";
@@ -2078,21 +1979,15 @@
function noop(..._) {
}
function shallowEqual(a, b) {
- if (a === b)
- return true;
- if (!a)
- return false;
- if (!b)
- return false;
- if (typeof a !== "object")
- return false;
- if (typeof b !== "object")
- return false;
+ if (a === b) return true;
+ if (!a) return false;
+ if (!b) return false;
+ if (typeof a !== "object") return false;
+ if (typeof b !== "object") return false;
const aKeys = Object.keys(a);
const bKeys = Object.keys(b);
const { length } = aKeys;
- if (bKeys.length !== length)
- return false;
+ if (bKeys.length !== length) return false;
for (const key of aKeys) {
if (a[key] !== b[key]) {
return false;
@@ -2100,7 +1995,7 @@
}
return true;
}
-function Y3OOHFCN_applyState(argument, currentValue) {
+function applyState(argument, currentValue) {
if (isUpdater(argument)) {
const value = isLazyValue(currentValue) ? currentValue() : currentValue;
return argument(value);
@@ -2117,14 +2012,10 @@
return typeof arg === "object" && arg != null;
}
function isEmpty(arg) {
- if (Array.isArray(arg))
- return !arg.length;
- if (isObject(arg))
- return !Object.keys(arg).length;
- if (arg == null)
- return true;
- if (arg === "")
- return true;
+ if (Array.isArray(arg)) return !arg.length;
+ if (isObject(arg)) return !Object.keys(arg).length;
+ if (arg == null) return true;
+ if (arg === "") return true;
return false;
}
function isInteger(arg) {
@@ -2133,7 +2024,7 @@
}
return String(Math.floor(Number(arg))) === arg;
}
-function Y3OOHFCN_hasOwnProperty(object, prop) {
+function PBFD2E7P_hasOwnProperty(object, prop) {
if (typeof Object.hasOwn === "function") {
return Object.hasOwn(object, prop);
}
@@ -2155,9 +2046,9 @@
return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
}
function omit(object, keys) {
- const result = _chunks_4R3V3JGP_spreadValues({}, object);
+ const result = _chunks_3YLGPPWQ_spreadValues({}, object);
for (const key of keys) {
- if (Y3OOHFCN_hasOwnProperty(result, key)) {
+ if (PBFD2E7P_hasOwnProperty(result, key)) {
delete result[key];
}
}
@@ -2166,7 +2057,7 @@
function pick(object, paths) {
const result = {};
for (const key of paths) {
- if (Y3OOHFCN_hasOwnProperty(object, key)) {
+ if (PBFD2E7P_hasOwnProperty(object, key)) {
result[key] = object[key];
}
}
@@ -2186,10 +2077,8 @@
return () => cancelAnimationFrame(raf);
}
function invariant(condition, message) {
- if (condition)
- return;
- if (typeof message !== "string")
- throw new Error("Invariant failed");
+ if (condition) return;
+ if (typeof message !== "string") throw new Error("Invariant failed");
throw new Error(message);
}
function getKeys(obj) {
@@ -2197,24 +2086,35 @@
}
function isFalsyBooleanCallback(booleanOrCallback, ...args) {
const result = typeof booleanOrCallback === "function" ? booleanOrCallback(...args) : booleanOrCallback;
- if (result == null)
- return false;
+ if (result == null) return false;
return !result;
}
function disabledFromProps(props) {
return props.disabled || props["aria-disabled"] === true || props["aria-disabled"] === "true";
}
+function removeUndefinedValues(obj) {
+ const result = {};
+ for (const key in obj) {
+ if (obj[key] !== void 0) {
+ result[key] = obj[key];
+ }
+ }
+ return result;
+}
function defaultValue(...values) {
for (const value of values) {
- if (value !== void 0)
- return value;
+ if (value !== void 0) return value;
}
return void 0;
}
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/XM66DUTO.js
+// EXTERNAL MODULE: external "React"
+var external_React_ = __webpack_require__(1609);
+var external_React_namespaceObject = /*#__PURE__*/__webpack_require__.t(external_React_, 2);
+var external_React_default = /*#__PURE__*/__webpack_require__.n(external_React_);
+;// ./node_modules/@ariakit/react-core/esm/__chunks/SK3NAZA3.js
"use client";
@@ -2229,24 +2129,21 @@
}
}
function isValidElementWithRef(element) {
- if (!element)
- return false;
- if (!(0,external_React_.isValidElement)(element))
- return false;
- if (!("ref" in element))
- return false;
- return true;
+ if (!element) return false;
+ if (!(0,external_React_.isValidElement)(element)) return false;
+ if ("ref" in element.props) return true;
+ if ("ref" in element) return true;
+ return false;
}
function getRefProperty(element) {
- if (!isValidElementWithRef(element))
- return null;
- return element.ref;
+ if (!isValidElementWithRef(element)) return null;
+ const props = _3YLGPPWQ_spreadValues({}, element.props);
+ return props.ref || element.ref;
}
function mergeProps(base, overrides) {
- const props = _4R3V3JGP_spreadValues({}, base);
+ const props = _3YLGPPWQ_spreadValues({}, base);
for (const key in overrides) {
- if (!Y3OOHFCN_hasOwnProperty(overrides, key))
- continue;
+ if (!PBFD2E7P_hasOwnProperty(overrides, key)) continue;
if (key === "className") {
const prop = "className";
props[prop] = base[prop] ? `${base[prop]} ${overrides[prop]}` : overrides[prop];
@@ -2254,7 +2151,7 @@
}
if (key === "style") {
const prop = "style";
- props[prop] = base[prop] ? _4R3V3JGP_spreadValues(_4R3V3JGP_spreadValues({}, base[prop]), overrides[prop]) : overrides[prop];
+ props[prop] = base[prop] ? _3YLGPPWQ_spreadValues(_3YLGPPWQ_spreadValues({}, base[prop]), overrides[prop]) : overrides[prop];
continue;
}
const overrideValue = overrides[key];
@@ -2275,7 +2172,7 @@
-;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/DLOEKDPY.js
+;// ./node_modules/@ariakit/core/esm/__chunks/DTR5TSDJ.js
"use client";
// src/utils/dom.ts
@@ -2284,14 +2181,18 @@
var _a;
return typeof window !== "undefined" && !!((_a = window.document) == null ? void 0 : _a.createElement);
}
-function DLOEKDPY_getDocument(node) {
- return node ? node.ownerDocument || node : document;
+function getDocument(node) {
+ if (!node) return document;
+ if ("self" in node) return node.document;
+ return node.ownerDocument || document;
}
function getWindow(node) {
- return DLOEKDPY_getDocument(node).defaultView || window;
+ if (!node) return self;
+ if ("self" in node) return node.self;
+ return getDocument(node).defaultView || window;
}
function getActiveElement(node, activeDescendant = false) {
- const { activeElement } = DLOEKDPY_getDocument(node);
+ const { activeElement } = getDocument(node);
if (!(activeElement == null ? void 0 : activeElement.nodeName)) {
return null;
}
@@ -2304,7 +2205,7 @@
if (activeDescendant) {
const id = activeElement.getAttribute("aria-activedescendant");
if (id) {
- const element = DLOEKDPY_getDocument(activeElement).getElementById(id);
+ const element = getDocument(activeElement).getElementById(id);
if (element) {
return element;
}
@@ -2320,8 +2221,7 @@
}
function isButton(element) {
const tagName = element.tagName.toLowerCase();
- if (tagName === "button")
- return true;
+ if (tagName === "button") return true;
if (tagName === "input" && element.type) {
return buttonInputTypes.indexOf(element.type) !== -1;
}
@@ -2335,30 +2235,14 @@
"reset",
"submit"
];
-function matches(element, selectors) {
- if ("matches" in element) {
- return element.matches(selectors);
- }
- if ("msMatchesSelector" in element) {
- return element.msMatchesSelector(selectors);
- }
- return element.webkitMatchesSelector(selectors);
-}
function isVisible(element) {
+ if (typeof element.checkVisibility === "function") {
+ return element.checkVisibility();
+ }
const htmlElement = element;
return htmlElement.offsetWidth > 0 || htmlElement.offsetHeight > 0 || element.getClientRects().length > 0;
}
-function DLOEKDPY_closest(element, selectors) {
- if ("closest" in element)
- return element.closest(selectors);
- do {
- if (matches(element, selectors))
- return element;
- element = element.parentElement || element.parentNode;
- } while (element !== null && element.nodeType === 1);
- return null;
-}
-function DLOEKDPY_isTextField(element) {
+function isTextField(element) {
try {
const isTextInput = element instanceof HTMLInputElement && element.selectionStart !== null;
const isTextArea = element.tagName === "TEXTAREA";
@@ -2367,6 +2251,40 @@
return false;
}
}
+function isTextbox(element) {
+ return element.isContentEditable || isTextField(element);
+}
+function getTextboxValue(element) {
+ if (isTextField(element)) {
+ return element.value;
+ }
+ if (element.isContentEditable) {
+ const range = getDocument(element).createRange();
+ range.selectNodeContents(element);
+ return range.toString();
+ }
+ return "";
+}
+function getTextboxSelection(element) {
+ let start = 0;
+ let end = 0;
+ if (isTextField(element)) {
+ start = element.selectionStart || 0;
+ end = element.selectionEnd || 0;
+ } else if (element.isContentEditable) {
+ const selection = getDocument(element).getSelection();
+ if ((selection == null ? void 0 : selection.rangeCount) && selection.anchorNode && contains(element, selection.anchorNode) && selection.focusNode && contains(element, selection.focusNode)) {
+ const range = selection.getRangeAt(0);
+ const nextRange = range.cloneRange();
+ nextRange.selectNodeContents(element);
+ nextRange.setEnd(range.startContainer, range.startOffset);
+ start = nextRange.toString().length;
+ nextRange.setEnd(range.endContainer, range.endOffset);
+ end = nextRange.toString().length;
+ }
+ }
+ return { start, end };
+}
function getPopupRole(element, fallback) {
const allowedPopupRoles = ["dialog", "menu", "listbox", "tree", "grid"];
const role = element == null ? void 0 : element.getAttribute("role");
@@ -2380,61 +2298,38 @@
const itemRoleByPopupRole = {
menu: "menuitem",
listbox: "option",
- tree: "treeitem",
- grid: "gridcell"
+ tree: "treeitem"
};
const popupRole = getPopupRole(element);
- if (!popupRole)
- return fallback;
+ if (!popupRole) return fallback;
const key = popupRole;
return (_a = itemRoleByPopupRole[key]) != null ? _a : fallback;
}
-function getTextboxSelection(element) {
- let start = 0;
- let end = 0;
- if (DLOEKDPY_isTextField(element)) {
- start = element.selectionStart || 0;
- end = element.selectionEnd || 0;
- } else if (element.isContentEditable) {
- const selection = DLOEKDPY_getDocument(element).getSelection();
- if ((selection == null ? void 0 : selection.rangeCount) && selection.anchorNode && contains(element, selection.anchorNode) && selection.focusNode && contains(element, selection.focusNode)) {
- const range = selection.getRangeAt(0);
- const nextRange = range.cloneRange();
- nextRange.selectNodeContents(element);
- nextRange.setEnd(range.startContainer, range.startOffset);
- start = nextRange.toString().length;
- nextRange.setEnd(range.endContainer, range.endOffset);
- end = nextRange.toString().length;
- }
- }
- return { start, end };
-}
function scrollIntoViewIfNeeded(element, arg) {
if (isPartiallyHidden(element) && "scrollIntoView" in element) {
element.scrollIntoView(arg);
}
}
function getScrollingElement(element) {
- if (!element)
- return null;
+ if (!element) return null;
+ const isScrollableOverflow = (overflow) => {
+ if (overflow === "auto") return true;
+ if (overflow === "scroll") return true;
+ return false;
+ };
if (element.clientHeight && element.scrollHeight > element.clientHeight) {
const { overflowY } = getComputedStyle(element);
- const isScrollable = overflowY !== "visible" && overflowY !== "hidden";
- if (isScrollable)
- return element;
+ if (isScrollableOverflow(overflowY)) return element;
} else if (element.clientWidth && element.scrollWidth > element.clientWidth) {
const { overflowX } = getComputedStyle(element);
- const isScrollable = overflowX !== "visible" && overflowX !== "hidden";
- if (isScrollable)
- return element;
+ if (isScrollableOverflow(overflowX)) return element;
}
return getScrollingElement(element.parentElement) || document.scrollingElement || document.body;
}
function isPartiallyHidden(element) {
const elementRect = element.getBoundingClientRect();
const scroller = getScrollingElement(element);
- if (!scroller)
- return false;
+ if (!scroller) return false;
const scrollerRect = scroller.getBoundingClientRect();
const isHTML = scroller.tagName === "HTML";
const scrollerTop = isHTML ? scrollerRect.top + scroller.scrollTop : scrollerRect.top;
@@ -2452,10 +2347,39 @@
element.setSelectionRange(...args);
}
}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/MHPO2BXA.js
+function sortBasedOnDOMPosition(items, getElement) {
+ const pairs = items.map((item, index) => [index, item]);
+ let isOrderDifferent = false;
+ pairs.sort(([indexA, a], [indexB, b]) => {
+ const elementA = getElement(a);
+ const elementB = getElement(b);
+ if (elementA === elementB) return 0;
+ if (!elementA || !elementB) return 0;
+ if (isElementPreceding(elementA, elementB)) {
+ if (indexA > indexB) {
+ isOrderDifferent = true;
+ }
+ return -1;
+ }
+ if (indexA < indexB) {
+ isOrderDifferent = true;
+ }
+ return 1;
+ });
+ if (isOrderDifferent) {
+ return pairs.map(([_, item]) => item);
+ }
+ return items;
+}
+function isElementPreceding(a, b) {
+ return Boolean(
+ b.compareDocumentPosition(a) & Node.DOCUMENT_POSITION_PRECEDING
+ );
+}
+
+
+
+;// ./node_modules/@ariakit/core/esm/__chunks/QAGXQEUG.js
"use client";
@@ -2464,8 +2388,7 @@
return canUseDOM && !!navigator.maxTouchPoints;
}
function isApple() {
- if (!canUseDOM)
- return false;
+ if (!canUseDOM) return false;
return /mac|iphone|ipad|ipod/i.test(navigator.platform);
}
function isSafari() {
@@ -2480,7 +2403,7 @@
-;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/utils/events.js
+;// ./node_modules/@ariakit/core/esm/utils/events.js
"use client";
@@ -2497,35 +2420,24 @@
}
function isOpeningInNewTab(event) {
const element = event.currentTarget;
- if (!element)
- return false;
+ if (!element) return false;
const isAppleDevice = isApple();
- if (isAppleDevice && !event.metaKey)
- return false;
- if (!isAppleDevice && !event.ctrlKey)
- return false;
+ if (isAppleDevice && !event.metaKey) return false;
+ if (!isAppleDevice && !event.ctrlKey) return false;
const tagName = element.tagName.toLowerCase();
- if (tagName === "a")
- return true;
- if (tagName === "button" && element.type === "submit")
- return true;
- if (tagName === "input" && element.type === "submit")
- return true;
+ if (tagName === "a") return true;
+ if (tagName === "button" && element.type === "submit") return true;
+ if (tagName === "input" && element.type === "submit") return true;
return false;
}
function isDownloading(event) {
const element = event.currentTarget;
- if (!element)
- return false;
+ if (!element) return false;
const tagName = element.tagName.toLowerCase();
- if (!event.altKey)
- return false;
- if (tagName === "a")
- return true;
- if (tagName === "button" && element.type === "submit")
- return true;
- if (tagName === "input" && element.type === "submit")
- return true;
+ if (!event.altKey) return false;
+ if (tagName === "a") return true;
+ if (tagName === "button" && element.type === "submit") return true;
+ if (tagName === "input" && element.type === "submit") return true;
return false;
}
function fireEvent(element, type, eventInit) {
@@ -2535,7 +2447,7 @@
function fireBlurEvent(element, eventInit) {
const event = new FocusEvent("blur", eventInit);
const defaultAllowed = element.dispatchEvent(event);
- const bubbleInit = _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, eventInit), { bubbles: true });
+ const bubbleInit = _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, eventInit), { bubbles: true });
element.dispatchEvent(new FocusEvent("focusout", bubbleInit));
return defaultAllowed;
}
@@ -2559,20 +2471,32 @@
const relatedTarget = event.relatedTarget;
return !relatedTarget || !contains(containerElement, relatedTarget);
}
-function queueBeforeEvent(element, type, callback) {
- const raf = requestAnimationFrame(() => {
- element.removeEventListener(type, callImmediately, true);
+function getInputType(event) {
+ const nativeEvent = "nativeEvent" in event ? event.nativeEvent : event;
+ if (!nativeEvent) return;
+ if (!("inputType" in nativeEvent)) return;
+ if (typeof nativeEvent.inputType !== "string") return;
+ return nativeEvent.inputType;
+}
+function queueBeforeEvent(element, type, callback, timeout) {
+ const createTimer = (callback2) => {
+ if (timeout) {
+ const timerId2 = setTimeout(callback2, timeout);
+ return () => clearTimeout(timerId2);
+ }
+ const timerId = requestAnimationFrame(callback2);
+ return () => cancelAnimationFrame(timerId);
+ };
+ const cancelTimer = createTimer(() => {
+ element.removeEventListener(type, callSync, true);
callback();
});
- const callImmediately = () => {
- cancelAnimationFrame(raf);
+ const callSync = () => {
+ cancelTimer();
callback();
};
- element.addEventListener(type, callImmediately, {
- once: true,
- capture: true
- });
- return raf;
+ element.addEventListener(type, callSync, { once: true, capture: true });
+ return cancelTimer;
}
function addGlobalEventListener(type, listener, options, scope = window) {
const children = [];
@@ -2588,13 +2512,15 @@
scope.document.removeEventListener(type, listener, options);
} catch (e) {
}
- children.forEach((remove) => remove());
+ for (const remove of children) {
+ remove();
+ }
};
return removeEventListener;
}
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/6O5OEQGF.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/ABQUS43J.js
"use client";
@@ -2604,8 +2530,7 @@
-
-var _React = _4R3V3JGP_spreadValues({}, external_React_namespaceObject);
+var _React = _3YLGPPWQ_spreadValues({}, external_React_namespaceObject);
var useReactId = _React.useId;
var useReactDeferredValue = _React.useDeferredValue;
var useReactInsertionEffect = _React.useInsertionEffect;
@@ -2651,35 +2576,42 @@
return (_a = ref.current) == null ? void 0 : _a.call(ref, ...args);
}, []);
}
+function useTransactionState(callback) {
+ const [state, setState] = (0,external_React_.useState)(null);
+ useSafeLayoutEffect(() => {
+ if (state == null) return;
+ if (!callback) return;
+ let prevState = null;
+ callback((prev) => {
+ prevState = prev;
+ return state;
+ });
+ return () => {
+ callback(prevState);
+ };
+ }, [state, callback]);
+ return [state, setState];
+}
function useMergeRefs(...refs) {
return (0,external_React_.useMemo)(() => {
- if (!refs.some(Boolean))
- return;
+ if (!refs.some(Boolean)) return;
return (value) => {
- refs.forEach((ref) => setRef(ref, value));
+ for (const ref of refs) {
+ setRef(ref, value);
+ }
};
}, refs);
}
-function useRefId(ref, deps) {
- const [id, setId] = useState(void 0);
- useSafeLayoutEffect(() => {
- var _a;
- setId((_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.id);
- }, deps);
- return id;
-}
function useId(defaultId) {
if (useReactId) {
const reactId = useReactId();
- if (defaultId)
- return defaultId;
+ if (defaultId) return defaultId;
return reactId;
}
const [id, setId] = (0,external_React_.useState)(defaultId);
useSafeLayoutEffect(() => {
- if (defaultId || id)
- return;
- const random = Math.random().toString(36).substr(2, 6);
+ if (defaultId || id) return;
+ const random = Math.random().toString(36).slice(2, 8);
setId(`id-${random}`);
}, [defaultId, id]);
return defaultId || id;
@@ -2697,8 +2629,7 @@
}
function useTagName(refOrElement, type) {
const stringOrUndefined = (type2) => {
- if (typeof type2 !== "string")
- return;
+ if (typeof type2 !== "string") return;
return type2;
};
const [tagName, setTagName] = (0,external_React_.useState)(() => stringOrUndefined(type));
@@ -2709,14 +2640,20 @@
return tagName;
}
function useAttribute(refOrElement, attributeName, defaultValue) {
- const [attribute, setAttribute] = useState(defaultValue);
- useSafeLayoutEffect(() => {
+ const initialValue = useInitialValue(defaultValue);
+ const [attribute, setAttribute] = (0,external_React_.useState)(initialValue);
+ (0,external_React_.useEffect)(() => {
const element = refOrElement && "current" in refOrElement ? refOrElement.current : refOrElement;
- const value = element == null ? void 0 : element.getAttribute(attributeName);
- if (value == null)
- return;
- setAttribute(value);
- }, [refOrElement, attributeName]);
+ if (!element) return;
+ const callback = () => {
+ const value = element.getAttribute(attributeName);
+ setAttribute(value == null ? initialValue : value);
+ };
+ const observer = new MutationObserver(callback);
+ observer.observe(element, { attributeFilter: [attributeName] });
+ callback();
+ return () => observer.disconnect();
+ }, [refOrElement, attributeName, initialValue]);
return attribute;
}
function useUpdateEffect(effect, deps) {
@@ -2749,39 +2686,6 @@
[]
);
}
-function useControlledState(defaultState, state, setState) {
- const [localState, setLocalState] = useState(defaultState);
- const nextState = state !== void 0 ? state : localState;
- const stateRef = useLiveRef(state);
- const setStateRef = useLiveRef(setState);
- const nextStateRef = useLiveRef(nextState);
- const setNextState = useCallback((prevValue) => {
- const setStateProp = setStateRef.current;
- if (setStateProp) {
- if (isSetNextState(setStateProp)) {
- setStateProp(prevValue);
- } else {
- const nextValue = applyState(prevValue, nextStateRef.current);
- nextStateRef.current = nextValue;
- setStateProp(nextValue);
- }
- }
- if (stateRef.current === void 0) {
- setLocalState(prevValue);
- }
- }, []);
- defineSetNextState(setNextState);
- return [nextState, setNextState];
-}
-var SET_NEXT_STATE = Symbol("setNextState");
-function isSetNextState(arg) {
- return arg[SET_NEXT_STATE] === true;
-}
-function defineSetNextState(arg) {
- if (!isSetNextState(arg)) {
- Object.defineProperty(arg, SET_NEXT_STATE, { value: true });
- }
-}
function useForceUpdate() {
return (0,external_React_.useReducer)(() => [], []);
}
@@ -2800,7 +2704,7 @@
},
[...deps, props.wrapElement]
);
- return _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { wrapElement });
+ return _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { wrapElement });
}
function usePortalRef(portalProp = false, portalRefProp) {
const [portalNode, setPortalNode] = (0,external_React_.useState)(null);
@@ -2812,7 +2716,7 @@
const parent = props.onLoadedMetadataCapture;
const onLoadedMetadataCapture = (0,external_React_.useMemo)(() => {
return Object.assign(() => {
- }, _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, parent), { [key]: value }));
+ }, _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, parent), { [key]: value }));
}, [parent, key, value]);
return [parent == null ? void 0 : parent[key], { onLoadedMetadataCapture }];
}
@@ -2838,8 +2742,7 @@
return movementX || movementY || "production" === "test";
}
function setMouseMoving(event) {
- if (!hasMouseMovement(event))
- return;
+ if (!hasMouseMovement(event)) return;
mouseMoving = true;
}
function resetMouseMoving() {
@@ -2848,9 +2751,915 @@
-;// CONCATENATED MODULE: external "ReactJSXRuntime"
+;// ./node_modules/@ariakit/core/esm/__chunks/BCALMBPZ.js
+"use client";
+
+
+
+// src/utils/store.ts
+function getInternal(store, key) {
+ const internals = store.__unstableInternals;
+ invariant(internals, "Invalid store");
+ return internals[key];
+}
+function createStore(initialState, ...stores) {
+ let state = initialState;
+ let prevStateBatch = state;
+ let lastUpdate = Symbol();
+ let destroy = noop;
+ const instances = /* @__PURE__ */ new Set();
+ const updatedKeys = /* @__PURE__ */ new Set();
+ const setups = /* @__PURE__ */ new Set();
+ const listeners = /* @__PURE__ */ new Set();
+ const batchListeners = /* @__PURE__ */ new Set();
+ const disposables = /* @__PURE__ */ new WeakMap();
+ const listenerKeys = /* @__PURE__ */ new WeakMap();
+ const storeSetup = (callback) => {
+ setups.add(callback);
+ return () => setups.delete(callback);
+ };
+ const storeInit = () => {
+ const initialized = instances.size;
+ const instance = Symbol();
+ instances.add(instance);
+ const maybeDestroy = () => {
+ instances.delete(instance);
+ if (instances.size) return;
+ destroy();
+ };
+ if (initialized) return maybeDestroy;
+ const desyncs = getKeys(state).map(
+ (key) => chain(
+ ...stores.map((store) => {
+ var _a;
+ const storeState = (_a = store == null ? void 0 : store.getState) == null ? void 0 : _a.call(store);
+ if (!storeState) return;
+ if (!PBFD2E7P_hasOwnProperty(storeState, key)) return;
+ return sync(store, [key], (state2) => {
+ setState(
+ key,
+ state2[key],
+ // @ts-expect-error - Not public API. This is just to prevent
+ // infinite loops.
+ true
+ );
+ });
+ })
+ )
+ );
+ const teardowns = [];
+ for (const setup2 of setups) {
+ teardowns.push(setup2());
+ }
+ const cleanups = stores.map(init);
+ destroy = chain(...desyncs, ...teardowns, ...cleanups);
+ return maybeDestroy;
+ };
+ const sub = (keys, listener, set = listeners) => {
+ set.add(listener);
+ listenerKeys.set(listener, keys);
+ return () => {
+ var _a;
+ (_a = disposables.get(listener)) == null ? void 0 : _a();
+ disposables.delete(listener);
+ listenerKeys.delete(listener);
+ set.delete(listener);
+ };
+ };
+ const storeSubscribe = (keys, listener) => sub(keys, listener);
+ const storeSync = (keys, listener) => {
+ disposables.set(listener, listener(state, state));
+ return sub(keys, listener);
+ };
+ const storeBatch = (keys, listener) => {
+ disposables.set(listener, listener(state, prevStateBatch));
+ return sub(keys, listener, batchListeners);
+ };
+ const storePick = (keys) => createStore(pick(state, keys), finalStore);
+ const storeOmit = (keys) => createStore(omit(state, keys), finalStore);
+ const getState = () => state;
+ const setState = (key, value, fromStores = false) => {
+ var _a;
+ if (!PBFD2E7P_hasOwnProperty(state, key)) return;
+ const nextValue = applyState(value, state[key]);
+ if (nextValue === state[key]) return;
+ if (!fromStores) {
+ for (const store of stores) {
+ (_a = store == null ? void 0 : store.setState) == null ? void 0 : _a.call(store, key, nextValue);
+ }
+ }
+ const prevState = state;
+ state = _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, state), { [key]: nextValue });
+ const thisUpdate = Symbol();
+ lastUpdate = thisUpdate;
+ updatedKeys.add(key);
+ const run = (listener, prev, uKeys) => {
+ var _a2;
+ const keys = listenerKeys.get(listener);
+ const updated = (k) => uKeys ? uKeys.has(k) : k === key;
+ if (!keys || keys.some(updated)) {
+ (_a2 = disposables.get(listener)) == null ? void 0 : _a2();
+ disposables.set(listener, listener(state, prev));
+ }
+ };
+ for (const listener of listeners) {
+ run(listener, prevState);
+ }
+ queueMicrotask(() => {
+ if (lastUpdate !== thisUpdate) return;
+ const snapshot = state;
+ for (const listener of batchListeners) {
+ run(listener, prevStateBatch, updatedKeys);
+ }
+ prevStateBatch = snapshot;
+ updatedKeys.clear();
+ });
+ };
+ const finalStore = {
+ getState,
+ setState,
+ __unstableInternals: {
+ setup: storeSetup,
+ init: storeInit,
+ subscribe: storeSubscribe,
+ sync: storeSync,
+ batch: storeBatch,
+ pick: storePick,
+ omit: storeOmit
+ }
+ };
+ return finalStore;
+}
+function setup(store, ...args) {
+ if (!store) return;
+ return getInternal(store, "setup")(...args);
+}
+function init(store, ...args) {
+ if (!store) return;
+ return getInternal(store, "init")(...args);
+}
+function subscribe(store, ...args) {
+ if (!store) return;
+ return getInternal(store, "subscribe")(...args);
+}
+function sync(store, ...args) {
+ if (!store) return;
+ return getInternal(store, "sync")(...args);
+}
+function batch(store, ...args) {
+ if (!store) return;
+ return getInternal(store, "batch")(...args);
+}
+function omit2(store, ...args) {
+ if (!store) return;
+ return getInternal(store, "omit")(...args);
+}
+function pick2(store, ...args) {
+ if (!store) return;
+ return getInternal(store, "pick")(...args);
+}
+function mergeStore(...stores) {
+ const initialState = stores.reduce((state, store2) => {
+ var _a;
+ const nextState = (_a = store2 == null ? void 0 : store2.getState) == null ? void 0 : _a.call(store2);
+ if (!nextState) return state;
+ return Object.assign(state, nextState);
+ }, {});
+ const store = createStore(initialState, ...stores);
+ return Object.assign({}, ...stores, store);
+}
+function throwOnConflictingProps(props, store) {
+ if (true) return;
+ if (!store) return;
+ const defaultKeys = Object.entries(props).filter(([key, value]) => key.startsWith("default") && value !== void 0).map(([key]) => {
+ var _a;
+ const stateKey = key.replace("default", "");
+ return `${((_a = stateKey[0]) == null ? void 0 : _a.toLowerCase()) || ""}${stateKey.slice(1)}`;
+ });
+ if (!defaultKeys.length) return;
+ const storeState = store.getState();
+ const conflictingProps = defaultKeys.filter(
+ (key) => PBFD2E7P_hasOwnProperty(storeState, key)
+ );
+ if (!conflictingProps.length) return;
+ throw new Error(
+ `Passing a store prop in conjunction with a default state is not supported.
+
+const store = useSelectStore();
+<SelectProvider store={store} defaultValue="Apple" />
+ ^ ^
+
+Instead, pass the default state to the topmost store:
+
+const store = useSelectStore({ defaultValue: "Apple" });
+<SelectProvider store={store} />
+
+See https://github.com/ariakit/ariakit/pull/2745 for more details.
+
+If there's a particular need for this, please submit a feature request at https://github.com/ariakit/ariakit
+`
+ );
+}
+
+
+
+// EXTERNAL MODULE: ./node_modules/use-sync-external-store/shim/index.js
+var shim = __webpack_require__(422);
+;// ./node_modules/@ariakit/react-core/esm/__chunks/YV4JVR4I.js
+"use client";
+
+
+
+// src/utils/store.tsx
+
+
+
+
+var { useSyncExternalStore } = shim;
+var noopSubscribe = () => () => {
+};
+function useStoreState(store, keyOrSelector = identity) {
+ const storeSubscribe = external_React_.useCallback(
+ (callback) => {
+ if (!store) return noopSubscribe();
+ return subscribe(store, null, callback);
+ },
+ [store]
+ );
+ const getSnapshot = () => {
+ const key = typeof keyOrSelector === "string" ? keyOrSelector : null;
+ const selector = typeof keyOrSelector === "function" ? keyOrSelector : null;
+ const state = store == null ? void 0 : store.getState();
+ if (selector) return selector(state);
+ if (!state) return;
+ if (!key) return;
+ if (!PBFD2E7P_hasOwnProperty(state, key)) return;
+ return state[key];
+ };
+ return useSyncExternalStore(storeSubscribe, getSnapshot, getSnapshot);
+}
+function useStoreStateObject(store, object) {
+ const objRef = external_React_.useRef(
+ {}
+ );
+ const storeSubscribe = external_React_.useCallback(
+ (callback) => {
+ if (!store) return noopSubscribe();
+ return subscribe(store, null, callback);
+ },
+ [store]
+ );
+ const getSnapshot = () => {
+ const state = store == null ? void 0 : store.getState();
+ let updated = false;
+ const obj = objRef.current;
+ for (const prop in object) {
+ const keyOrSelector = object[prop];
+ if (typeof keyOrSelector === "function") {
+ const value = keyOrSelector(state);
+ if (value !== obj[prop]) {
+ obj[prop] = value;
+ updated = true;
+ }
+ }
+ if (typeof keyOrSelector === "string") {
+ if (!state) continue;
+ if (!PBFD2E7P_hasOwnProperty(state, keyOrSelector)) continue;
+ const value = state[keyOrSelector];
+ if (value !== obj[prop]) {
+ obj[prop] = value;
+ updated = true;
+ }
+ }
+ }
+ if (updated) {
+ objRef.current = _3YLGPPWQ_spreadValues({}, obj);
+ }
+ return objRef.current;
+ };
+ return useSyncExternalStore(storeSubscribe, getSnapshot, getSnapshot);
+}
+function useStoreProps(store, props, key, setKey) {
+ const value = PBFD2E7P_hasOwnProperty(props, key) ? props[key] : void 0;
+ const setValue = setKey ? props[setKey] : void 0;
+ const propsRef = useLiveRef({ value, setValue });
+ useSafeLayoutEffect(() => {
+ return sync(store, [key], (state, prev) => {
+ const { value: value2, setValue: setValue2 } = propsRef.current;
+ if (!setValue2) return;
+ if (state[key] === prev[key]) return;
+ if (state[key] === value2) return;
+ setValue2(state[key]);
+ });
+ }, [store, key]);
+ useSafeLayoutEffect(() => {
+ if (value === void 0) return;
+ store.setState(key, value);
+ return batch(store, [key], () => {
+ if (value === void 0) return;
+ store.setState(key, value);
+ });
+ });
+}
+function YV4JVR4I_useStore(createStore, props) {
+ const [store, setStore] = external_React_.useState(() => createStore(props));
+ useSafeLayoutEffect(() => init(store), [store]);
+ const useState2 = external_React_.useCallback(
+ (keyOrSelector) => useStoreState(store, keyOrSelector),
+ [store]
+ );
+ const memoizedStore = external_React_.useMemo(
+ () => _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, store), { useState: useState2 }),
+ [store, useState2]
+ );
+ const updateStore = useEvent(() => {
+ setStore((store2) => createStore(_3YLGPPWQ_spreadValues(_3YLGPPWQ_spreadValues({}, props), store2.getState())));
+ });
+ return [memoizedStore, updateStore];
+}
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/C3IKGW5T.js
+"use client";
+
+
+
+// src/collection/collection-store.ts
+
+function useCollectionStoreProps(store, update, props) {
+ useUpdateEffect(update, [props.store]);
+ useStoreProps(store, props, "items", "setItems");
+ return store;
+}
+function useCollectionStore(props = {}) {
+ const [store, update] = useStore(Core.createCollectionStore, props);
+ return useCollectionStoreProps(store, update, props);
+}
+
+
+
+;// ./node_modules/@ariakit/core/esm/__chunks/CYQWQL4J.js
+"use client";
+
+
+
+
+
+// src/collection/collection-store.ts
+function getCommonParent(items) {
+ var _a;
+ const firstItem = items.find((item) => !!item.element);
+ const lastItem = [...items].reverse().find((item) => !!item.element);
+ let parentElement = (_a = firstItem == null ? void 0 : firstItem.element) == null ? void 0 : _a.parentElement;
+ while (parentElement && (lastItem == null ? void 0 : lastItem.element)) {
+ const parent = parentElement;
+ if (lastItem && parent.contains(lastItem.element)) {
+ return parentElement;
+ }
+ parentElement = parentElement.parentElement;
+ }
+ return getDocument(parentElement).body;
+}
+function getPrivateStore(store) {
+ return store == null ? void 0 : store.__unstablePrivateStore;
+}
+function createCollectionStore(props = {}) {
+ var _a;
+ throwOnConflictingProps(props, props.store);
+ const syncState = (_a = props.store) == null ? void 0 : _a.getState();
+ const items = defaultValue(
+ props.items,
+ syncState == null ? void 0 : syncState.items,
+ props.defaultItems,
+ []
+ );
+ const itemsMap = new Map(items.map((item) => [item.id, item]));
+ const initialState = {
+ items,
+ renderedItems: defaultValue(syncState == null ? void 0 : syncState.renderedItems, [])
+ };
+ const syncPrivateStore = getPrivateStore(props.store);
+ const privateStore = createStore(
+ { items, renderedItems: initialState.renderedItems },
+ syncPrivateStore
+ );
+ const collection = createStore(initialState, props.store);
+ const sortItems = (renderedItems) => {
+ const sortedItems = sortBasedOnDOMPosition(renderedItems, (i) => i.element);
+ privateStore.setState("renderedItems", sortedItems);
+ collection.setState("renderedItems", sortedItems);
+ };
+ setup(collection, () => init(privateStore));
+ setup(privateStore, () => {
+ return batch(privateStore, ["items"], (state) => {
+ collection.setState("items", state.items);
+ });
+ });
+ setup(privateStore, () => {
+ return batch(privateStore, ["renderedItems"], (state) => {
+ let firstRun = true;
+ let raf = requestAnimationFrame(() => {
+ const { renderedItems } = collection.getState();
+ if (state.renderedItems === renderedItems) return;
+ sortItems(state.renderedItems);
+ });
+ if (typeof IntersectionObserver !== "function") {
+ return () => cancelAnimationFrame(raf);
+ }
+ const ioCallback = () => {
+ if (firstRun) {
+ firstRun = false;
+ return;
+ }
+ cancelAnimationFrame(raf);
+ raf = requestAnimationFrame(() => sortItems(state.renderedItems));
+ };
+ const root = getCommonParent(state.renderedItems);
+ const observer = new IntersectionObserver(ioCallback, { root });
+ for (const item of state.renderedItems) {
+ if (!item.element) continue;
+ observer.observe(item.element);
+ }
+ return () => {
+ cancelAnimationFrame(raf);
+ observer.disconnect();
+ };
+ });
+ });
+ const mergeItem = (item, setItems, canDeleteFromMap = false) => {
+ let prevItem;
+ setItems((items2) => {
+ const index = items2.findIndex(({ id }) => id === item.id);
+ const nextItems = items2.slice();
+ if (index !== -1) {
+ prevItem = items2[index];
+ const nextItem = _chunks_3YLGPPWQ_spreadValues(_chunks_3YLGPPWQ_spreadValues({}, prevItem), item);
+ nextItems[index] = nextItem;
+ itemsMap.set(item.id, nextItem);
+ } else {
+ nextItems.push(item);
+ itemsMap.set(item.id, item);
+ }
+ return nextItems;
+ });
+ const unmergeItem = () => {
+ setItems((items2) => {
+ if (!prevItem) {
+ if (canDeleteFromMap) {
+ itemsMap.delete(item.id);
+ }
+ return items2.filter(({ id }) => id !== item.id);
+ }
+ const index = items2.findIndex(({ id }) => id === item.id);
+ if (index === -1) return items2;
+ const nextItems = items2.slice();
+ nextItems[index] = prevItem;
+ itemsMap.set(item.id, prevItem);
+ return nextItems;
+ });
+ };
+ return unmergeItem;
+ };
+ const registerItem = (item) => mergeItem(
+ item,
+ (getItems) => privateStore.setState("items", getItems),
+ true
+ );
+ return _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, collection), {
+ registerItem,
+ renderItem: (item) => chain(
+ registerItem(item),
+ mergeItem(
+ item,
+ (getItems) => privateStore.setState("renderedItems", getItems)
+ )
+ ),
+ item: (id) => {
+ if (!id) return null;
+ let item = itemsMap.get(id);
+ if (!item) {
+ const { items: items2 } = privateStore.getState();
+ item = items2.find((item2) => item2.id === id);
+ if (item) {
+ itemsMap.set(id, item);
+ }
+ }
+ return item || null;
+ },
+ // @ts-expect-error Internal
+ __unstablePrivateStore: privateStore
+ });
+}
+
+
+
+;// ./node_modules/@ariakit/core/esm/__chunks/7PRQYBBV.js
+"use client";
+
+// src/utils/array.ts
+function toArray(arg) {
+ if (Array.isArray(arg)) {
+ return arg;
+ }
+ return typeof arg !== "undefined" ? [arg] : [];
+}
+function addItemToArray(array, item, index = -1) {
+ if (!(index in array)) {
+ return [...array, item];
+ }
+ return [...array.slice(0, index), item, ...array.slice(index)];
+}
+function flatten2DArray(array) {
+ const flattened = [];
+ for (const row of array) {
+ flattened.push(...row);
+ }
+ return flattened;
+}
+function reverseArray(array) {
+ return array.slice().reverse();
+}
+
+
+
+;// ./node_modules/@ariakit/core/esm/__chunks/AJZ4BYF3.js
+"use client";
+
+
+
+
+
+
+// src/composite/composite-store.ts
+var NULL_ITEM = { id: null };
+function findFirstEnabledItem(items, excludeId) {
+ return items.find((item) => {
+ if (excludeId) {
+ return !item.disabled && item.id !== excludeId;
+ }
+ return !item.disabled;
+ });
+}
+function getEnabledItems(items, excludeId) {
+ return items.filter((item) => {
+ if (excludeId) {
+ return !item.disabled && item.id !== excludeId;
+ }
+ return !item.disabled;
+ });
+}
+function getItemsInRow(items, rowId) {
+ return items.filter((item) => item.rowId === rowId);
+}
+function flipItems(items, activeId, shouldInsertNullItem = false) {
+ const index = items.findIndex((item) => item.id === activeId);
+ return [
+ ...items.slice(index + 1),
+ ...shouldInsertNullItem ? [NULL_ITEM] : [],
+ ...items.slice(0, index)
+ ];
+}
+function groupItemsByRows(items) {
+ const rows = [];
+ for (const item of items) {
+ const row = rows.find((currentRow) => {
+ var _a;
+ return ((_a = currentRow[0]) == null ? void 0 : _a.rowId) === item.rowId;
+ });
+ if (row) {
+ row.push(item);
+ } else {
+ rows.push([item]);
+ }
+ }
+ return rows;
+}
+function getMaxRowLength(array) {
+ let maxLength = 0;
+ for (const { length } of array) {
+ if (length > maxLength) {
+ maxLength = length;
+ }
+ }
+ return maxLength;
+}
+function createEmptyItem(rowId) {
+ return {
+ id: "__EMPTY_ITEM__",
+ disabled: true,
+ rowId
+ };
+}
+function normalizeRows(rows, activeId, focusShift) {
+ const maxLength = getMaxRowLength(rows);
+ for (const row of rows) {
+ for (let i = 0; i < maxLength; i += 1) {
+ const item = row[i];
+ if (!item || focusShift && item.disabled) {
+ const isFirst = i === 0;
+ const previousItem = isFirst && focusShift ? findFirstEnabledItem(row) : row[i - 1];
+ row[i] = previousItem && activeId !== previousItem.id && focusShift ? previousItem : createEmptyItem(previousItem == null ? void 0 : previousItem.rowId);
+ }
+ }
+ }
+ return rows;
+}
+function verticalizeItems(items) {
+ const rows = groupItemsByRows(items);
+ const maxLength = getMaxRowLength(rows);
+ const verticalized = [];
+ for (let i = 0; i < maxLength; i += 1) {
+ for (const row of rows) {
+ const item = row[i];
+ if (item) {
+ verticalized.push(_chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, item), {
+ // If there's no rowId, it means that it's not a grid composite, but
+ // a single row instead. So, instead of verticalizing it, that is,
+ // assigning a different rowId based on the column index, we keep it
+ // undefined so they will be part of the same row. This is useful
+ // when using up/down on one-dimensional composites.
+ rowId: item.rowId ? `${i}` : void 0
+ }));
+ }
+ }
+ }
+ return verticalized;
+}
+function createCompositeStore(props = {}) {
+ var _a;
+ const syncState = (_a = props.store) == null ? void 0 : _a.getState();
+ const collection = createCollectionStore(props);
+ const activeId = defaultValue(
+ props.activeId,
+ syncState == null ? void 0 : syncState.activeId,
+ props.defaultActiveId
+ );
+ const initialState = _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, collection.getState()), {
+ id: defaultValue(
+ props.id,
+ syncState == null ? void 0 : syncState.id,
+ `id-${Math.random().toString(36).slice(2, 8)}`
+ ),
+ activeId,
+ baseElement: defaultValue(syncState == null ? void 0 : syncState.baseElement, null),
+ includesBaseElement: defaultValue(
+ props.includesBaseElement,
+ syncState == null ? void 0 : syncState.includesBaseElement,
+ activeId === null
+ ),
+ moves: defaultValue(syncState == null ? void 0 : syncState.moves, 0),
+ orientation: defaultValue(
+ props.orientation,
+ syncState == null ? void 0 : syncState.orientation,
+ "both"
+ ),
+ rtl: defaultValue(props.rtl, syncState == null ? void 0 : syncState.rtl, false),
+ virtualFocus: defaultValue(
+ props.virtualFocus,
+ syncState == null ? void 0 : syncState.virtualFocus,
+ false
+ ),
+ focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, false),
+ focusWrap: defaultValue(props.focusWrap, syncState == null ? void 0 : syncState.focusWrap, false),
+ focusShift: defaultValue(props.focusShift, syncState == null ? void 0 : syncState.focusShift, false)
+ });
+ const composite = createStore(initialState, collection, props.store);
+ setup(
+ composite,
+ () => sync(composite, ["renderedItems", "activeId"], (state) => {
+ composite.setState("activeId", (activeId2) => {
+ var _a2;
+ if (activeId2 !== void 0) return activeId2;
+ return (_a2 = findFirstEnabledItem(state.renderedItems)) == null ? void 0 : _a2.id;
+ });
+ })
+ );
+ const getNextId = (direction = "next", options = {}) => {
+ var _a2, _b;
+ const defaultState = composite.getState();
+ const {
+ skip = 0,
+ activeId: activeId2 = defaultState.activeId,
+ focusShift = defaultState.focusShift,
+ focusLoop = defaultState.focusLoop,
+ focusWrap = defaultState.focusWrap,
+ includesBaseElement = defaultState.includesBaseElement,
+ renderedItems = defaultState.renderedItems,
+ rtl = defaultState.rtl
+ } = options;
+ const isVerticalDirection = direction === "up" || direction === "down";
+ const isNextDirection = direction === "next" || direction === "down";
+ const canReverse = isNextDirection ? rtl && !isVerticalDirection : !rtl || isVerticalDirection;
+ const canShift = focusShift && !skip;
+ let items = !isVerticalDirection ? renderedItems : flatten2DArray(
+ normalizeRows(groupItemsByRows(renderedItems), activeId2, canShift)
+ );
+ items = canReverse ? reverseArray(items) : items;
+ items = isVerticalDirection ? verticalizeItems(items) : items;
+ if (activeId2 == null) {
+ return (_a2 = findFirstEnabledItem(items)) == null ? void 0 : _a2.id;
+ }
+ const activeItem = items.find((item) => item.id === activeId2);
+ if (!activeItem) {
+ return (_b = findFirstEnabledItem(items)) == null ? void 0 : _b.id;
+ }
+ const isGrid = items.some((item) => item.rowId);
+ const activeIndex = items.indexOf(activeItem);
+ const nextItems = items.slice(activeIndex + 1);
+ const nextItemsInRow = getItemsInRow(nextItems, activeItem.rowId);
+ if (skip) {
+ const nextEnabledItemsInRow = getEnabledItems(nextItemsInRow, activeId2);
+ const nextItem2 = nextEnabledItemsInRow.slice(skip)[0] || // If we can't find an item, just return the last one.
+ nextEnabledItemsInRow[nextEnabledItemsInRow.length - 1];
+ return nextItem2 == null ? void 0 : nextItem2.id;
+ }
+ const canLoop = focusLoop && (isVerticalDirection ? focusLoop !== "horizontal" : focusLoop !== "vertical");
+ const canWrap = isGrid && focusWrap && (isVerticalDirection ? focusWrap !== "horizontal" : focusWrap !== "vertical");
+ const hasNullItem = isNextDirection ? (!isGrid || isVerticalDirection) && canLoop && includesBaseElement : isVerticalDirection ? includesBaseElement : false;
+ if (canLoop) {
+ const loopItems = canWrap && !hasNullItem ? items : getItemsInRow(items, activeItem.rowId);
+ const sortedItems = flipItems(loopItems, activeId2, hasNullItem);
+ const nextItem2 = findFirstEnabledItem(sortedItems, activeId2);
+ return nextItem2 == null ? void 0 : nextItem2.id;
+ }
+ if (canWrap) {
+ const nextItem2 = findFirstEnabledItem(
+ // We can use nextItems, which contains all the next items, including
+ // items from other rows, to wrap between rows. However, if there is a
+ // null item (the composite container), we'll only use the next items in
+ // the row. So moving next from the last item will focus on the
+ // composite container. On grid composites, horizontal navigation never
+ // focuses on the composite container, only vertical.
+ hasNullItem ? nextItemsInRow : nextItems,
+ activeId2
+ );
+ const nextId = hasNullItem ? (nextItem2 == null ? void 0 : nextItem2.id) || null : nextItem2 == null ? void 0 : nextItem2.id;
+ return nextId;
+ }
+ const nextItem = findFirstEnabledItem(nextItemsInRow, activeId2);
+ if (!nextItem && hasNullItem) {
+ return null;
+ }
+ return nextItem == null ? void 0 : nextItem.id;
+ };
+ return _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues(_chunks_3YLGPPWQ_spreadValues({}, collection), composite), {
+ setBaseElement: (element) => composite.setState("baseElement", element),
+ setActiveId: (id) => composite.setState("activeId", id),
+ move: (id) => {
+ if (id === void 0) return;
+ composite.setState("activeId", id);
+ composite.setState("moves", (moves) => moves + 1);
+ },
+ first: () => {
+ var _a2;
+ return (_a2 = findFirstEnabledItem(composite.getState().renderedItems)) == null ? void 0 : _a2.id;
+ },
+ last: () => {
+ var _a2;
+ return (_a2 = findFirstEnabledItem(reverseArray(composite.getState().renderedItems))) == null ? void 0 : _a2.id;
+ },
+ next: (options) => {
+ if (options !== void 0 && typeof options === "number") {
+ options = { skip: options };
+ }
+ return getNextId("next", options);
+ },
+ previous: (options) => {
+ if (options !== void 0 && typeof options === "number") {
+ options = { skip: options };
+ }
+ return getNextId("previous", options);
+ },
+ down: (options) => {
+ if (options !== void 0 && typeof options === "number") {
+ options = { skip: options };
+ }
+ return getNextId("down", options);
+ },
+ up: (options) => {
+ if (options !== void 0 && typeof options === "number") {
+ options = { skip: options };
+ }
+ return getNextId("up", options);
+ }
+ });
+}
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/4CMBR7SL.js
+"use client";
+
+
+
+
+
+// src/composite/composite-store.ts
+
+function useCompositeStoreOptions(props) {
+ const id = useId(props.id);
+ return _3YLGPPWQ_spreadValues({ id }, props);
+}
+function useCompositeStoreProps(store, update, props) {
+ store = useCollectionStoreProps(store, update, props);
+ useStoreProps(store, props, "activeId", "setActiveId");
+ useStoreProps(store, props, "includesBaseElement");
+ useStoreProps(store, props, "virtualFocus");
+ useStoreProps(store, props, "orientation");
+ useStoreProps(store, props, "rtl");
+ useStoreProps(store, props, "focusLoop");
+ useStoreProps(store, props, "focusWrap");
+ useStoreProps(store, props, "focusShift");
+ return store;
+}
+function useCompositeStore(props = {}) {
+ props = useCompositeStoreOptions(props);
+ const [store, update] = YV4JVR4I_useStore(createCompositeStore, props);
+ return useCompositeStoreProps(store, update, props);
+}
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/5VQZOHHZ.js
+"use client";
+
+// src/composite/utils.ts
+
+var _5VQZOHHZ_NULL_ITEM = { id: null };
+function _5VQZOHHZ_flipItems(items, activeId, shouldInsertNullItem = false) {
+ const index = items.findIndex((item) => item.id === activeId);
+ return [
+ ...items.slice(index + 1),
+ ...shouldInsertNullItem ? [_5VQZOHHZ_NULL_ITEM] : [],
+ ...items.slice(0, index)
+ ];
+}
+function _5VQZOHHZ_findFirstEnabledItem(items, excludeId) {
+ return items.find((item) => {
+ if (excludeId) {
+ return !item.disabled && item.id !== excludeId;
+ }
+ return !item.disabled;
+ });
+}
+function getEnabledItem(store, id) {
+ if (!id) return null;
+ return store.item(id) || null;
+}
+function _5VQZOHHZ_groupItemsByRows(items) {
+ const rows = [];
+ for (const item of items) {
+ const row = rows.find((currentRow) => {
+ var _a;
+ return ((_a = currentRow[0]) == null ? void 0 : _a.rowId) === item.rowId;
+ });
+ if (row) {
+ row.push(item);
+ } else {
+ rows.push([item]);
+ }
+ }
+ return rows;
+}
+function selectTextField(element, collapseToEnd = false) {
+ if (isTextField(element)) {
+ element.setSelectionRange(
+ collapseToEnd ? element.value.length : 0,
+ element.value.length
+ );
+ } else if (element.isContentEditable) {
+ const selection = getDocument(element).getSelection();
+ selection == null ? void 0 : selection.selectAllChildren(element);
+ if (collapseToEnd) {
+ selection == null ? void 0 : selection.collapseToEnd();
+ }
+ }
+}
+var FOCUS_SILENTLY = Symbol("FOCUS_SILENTLY");
+function focusSilently(element) {
+ element[FOCUS_SILENTLY] = true;
+ element.focus({ preventScroll: true });
+}
+function silentlyFocused(element) {
+ const isSilentlyFocused = element[FOCUS_SILENTLY];
+ delete element[FOCUS_SILENTLY];
+ return isSilentlyFocused;
+}
+function isItem(store, element, exclude) {
+ if (!element) return false;
+ if (element === exclude) return false;
+ const item = store.item(element.id);
+ if (!item) return false;
+ if (exclude && item.element === exclude) return false;
+ return true;
+}
+
+
+
+;// external "ReactJSXRuntime"
const external_ReactJSXRuntime_namespaceObject = window["ReactJSXRuntime"];
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/3ORBWXWF.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/LMDWO4NN.js
"use client";
@@ -2859,48 +3668,25 @@
// src/utils/system.tsx
-
-function isRenderProp(children) {
- return typeof children === "function";
-}
function forwardRef2(render) {
- const Role = React.forwardRef((props, ref) => render(__spreadProps(__spreadValues({}, props), { ref })));
+ const Role = external_React_.forwardRef((props, ref) => render(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { ref })));
Role.displayName = render.displayName || render.name;
return Role;
}
function memo2(Component, propsAreEqual) {
- const Role = React.memo(Component, propsAreEqual);
- Role.displayName = Component.displayName || Component.name;
- return Role;
-}
-function createComponent(render) {
- const Role = (props, ref) => render(_4R3V3JGP_spreadValues({ ref }, props));
- return external_React_.forwardRef(Role);
-}
-function createMemoComponent(render) {
- const Role = createComponent(render);
- return external_React_.memo(Role);
-}
-function _3ORBWXWF_createElement(Type, props) {
- const _a = props, { as: As, wrapElement, render } = _a, rest = __objRest(_a, ["as", "wrapElement", "render"]);
+ return external_React_.memo(Component, propsAreEqual);
+}
+function LMDWO4NN_createElement(Type, props) {
+ const _a = props, { wrapElement, render } = _a, rest = __objRest(_a, ["wrapElement", "render"]);
+ const mergedRef = useMergeRefs(props.ref, getRefProperty(render));
let element;
- const mergedRef = useMergeRefs(props.ref, getRefProperty(render));
- if (false) {}
- if (As && typeof As !== "string") {
- element = /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(As, _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, rest), { render }));
- } else if (external_React_.isValidElement(render)) {
- const renderProps = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, render.props), { ref: mergedRef });
+ if (external_React_.isValidElement(render)) {
+ const renderProps = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, render.props), { ref: mergedRef });
element = external_React_.cloneElement(render, mergeProps(rest, renderProps));
} else if (render) {
element = render(rest);
- } else if (isRenderProp(props.children)) {
- if (false) {}
- const _b = rest, { children } = _b, otherProps = __objRest(_b, ["children"]);
- element = props.children(otherProps);
- } else if (As) {
- element = /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(As, _4R3V3JGP_spreadValues({}, rest));
} else {
- element = /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Type, _4R3V3JGP_spreadValues({}, rest));
+ element = /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Type, _3YLGPPWQ_spreadValues({}, rest));
}
if (wrapElement) {
return wrapElement(element);
@@ -2909,15 +3695,9 @@
}
function createHook(useProps) {
const useRole = (props = {}) => {
- const htmlProps = useProps(props);
- const copy = {};
- for (const prop in htmlProps) {
- if (Y3OOHFCN_hasOwnProperty(htmlProps, prop) && htmlProps[prop] !== void 0) {
- copy[prop] = htmlProps[prop];
- }
- }
- return copy;
- };
+ return useProps(props);
+ };
+ useRole.displayName = useProps.name;
return useRole;
}
function createStoreContext(providers = [], scopedProviders = []) {
@@ -2927,27 +3707,25 @@
const useScopedContext = (onlyScoped = false) => {
const scoped = external_React_.useContext(scopedContext);
const store = useContext2();
- if (onlyScoped)
- return scoped;
+ if (onlyScoped) return scoped;
return scoped || store;
};
const useProviderContext = () => {
const scoped = external_React_.useContext(scopedContext);
const store = useContext2();
- if (scoped && scoped === store)
- return;
+ if (scoped && scoped === store) return;
return store;
};
const ContextProvider = (props) => {
return providers.reduceRight(
- (children, Provider) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Provider, _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { children })),
- /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(context.Provider, _4R3V3JGP_spreadValues({}, props))
+ (children, Provider) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Provider, _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { children })),
+ /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(context.Provider, _3YLGPPWQ_spreadValues({}, props))
);
};
const ScopedContextProvider = (props) => {
- return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(ContextProvider, _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { children: scopedProviders.reduceRight(
- (children, Provider) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Provider, _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { children })),
- /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(scopedContext.Provider, _4R3V3JGP_spreadValues({}, props))
+ return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(ContextProvider, _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { children: scopedProviders.reduceRight(
+ (children, Provider) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Provider, _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { children })),
+ /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(scopedContext.Provider, _3YLGPPWQ_spreadValues({}, props))
) }));
};
return {
@@ -2963,55 +3741,87 @@
-;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/utils/focus.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/VDHZ5F7K.js
+"use client";
+
+
+// src/collection/collection-context.tsx
+var ctx = createStoreContext();
+var useCollectionContext = ctx.useContext;
+var useCollectionScopedContext = ctx.useScopedContext;
+var useCollectionProviderContext = ctx.useProviderContext;
+var CollectionContextProvider = ctx.ContextProvider;
+var CollectionScopedContextProvider = ctx.ScopedContextProvider;
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/P7GR5CS5.js
+"use client";
+
+
+
+// src/composite/composite-context.tsx
+
+var P7GR5CS5_ctx = createStoreContext(
+ [CollectionContextProvider],
+ [CollectionScopedContextProvider]
+);
+var useCompositeContext = P7GR5CS5_ctx.useContext;
+var useCompositeScopedContext = P7GR5CS5_ctx.useScopedContext;
+var useCompositeProviderContext = P7GR5CS5_ctx.useProviderContext;
+var CompositeContextProvider = P7GR5CS5_ctx.ContextProvider;
+var CompositeScopedContextProvider = P7GR5CS5_ctx.ScopedContextProvider;
+var CompositeItemContext = (0,external_React_.createContext)(
+ void 0
+);
+var CompositeRowContext = (0,external_React_.createContext)(
+ void 0
+);
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/SWN3JYXT.js
+"use client";
+
+// src/focusable/focusable-context.tsx
+
+var FocusableContext = (0,external_React_.createContext)(true);
+
+
+
+;// ./node_modules/@ariakit/core/esm/utils/focus.js
"use client";
// src/utils/focus.ts
-var selector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false'])";
+var selector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], summary, iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false'])";
function hasNegativeTabIndex(element) {
- const tabIndex = parseInt(element.getAttribute("tabindex") || "0", 10);
+ const tabIndex = Number.parseInt(element.getAttribute("tabindex") || "0", 10);
return tabIndex < 0;
}
function isFocusable(element) {
- if (!matches(element, selector))
- return false;
- if (!isVisible(element))
- return false;
- if (DLOEKDPY_closest(element, "[inert]"))
- return false;
+ if (!element.matches(selector)) return false;
+ if (!isVisible(element)) return false;
+ if (element.closest("[inert]")) return false;
return true;
}
function isTabbable(element) {
- if (!isFocusable(element))
- return false;
- if (hasNegativeTabIndex(element))
- return false;
- if (!("form" in element))
- return true;
- if (!element.form)
- return true;
- if (element.checked)
- return true;
- if (element.type !== "radio")
- return true;
+ if (!isFocusable(element)) return false;
+ if (hasNegativeTabIndex(element)) return false;
+ if (!("form" in element)) return true;
+ if (!element.form) return true;
+ if (element.checked) return true;
+ if (element.type !== "radio") return true;
const radioGroup = element.form.elements.namedItem(element.name);
- if (!radioGroup)
- return true;
- if (!("length" in radioGroup))
- return true;
+ if (!radioGroup) return true;
+ if (!("length" in radioGroup)) return true;
const activeElement = getActiveElement(element);
- if (!activeElement)
- return true;
- if (activeElement === element)
- return true;
- if (!("form" in activeElement))
- return true;
- if (activeElement.form !== element.form)
- return true;
- if (activeElement.name !== element.name)
- return true;
+ if (!activeElement) return true;
+ if (activeElement === element) return true;
+ if (!("form" in activeElement)) return true;
+ if (activeElement.form !== element.form) return true;
+ if (activeElement.name !== element.name) return true;
return false;
}
function getAllFocusableIn(container, includeContainer) {
@@ -3121,34 +3931,26 @@
}
function getClosestFocusable(element) {
while (element && !isFocusable(element)) {
- element = closest(element, selector);
+ element = element.closest(selector);
}
return element || null;
}
function hasFocus(element) {
const activeElement = getActiveElement(element);
- if (!activeElement)
- return false;
- if (activeElement === element)
- return true;
+ if (!activeElement) return false;
+ if (activeElement === element) return true;
const activeDescendant = activeElement.getAttribute("aria-activedescendant");
- if (!activeDescendant)
- return false;
+ if (!activeDescendant) return false;
return activeDescendant === element.id;
}
function hasFocusWithin(element) {
const activeElement = getActiveElement(element);
- if (!activeElement)
- return false;
- if (contains(element, activeElement))
- return true;
+ if (!activeElement) return false;
+ if (contains(element, activeElement)) return true;
const activeDescendant = activeElement.getAttribute("aria-activedescendant");
- if (!activeDescendant)
- return false;
- if (!("id" in element))
- return false;
- if (activeDescendant === element.id)
- return true;
+ if (!activeDescendant) return false;
+ if (!("id" in element)) return false;
+ if (activeDescendant === element.id) return true;
return !!element.querySelector(`#${CSS.escape(activeDescendant)}`);
}
function focusIfNeeded(element) {
@@ -3164,7 +3966,9 @@
}
function disableFocusIn(container, includeContainer) {
const tabbableElements = getAllTabbableIn(container, includeContainer);
- tabbableElements.forEach(disableFocus);
+ for (const element of tabbableElements) {
+ disableFocus(element);
+ }
}
function restoreFocusIn(container) {
const elements = container.querySelectorAll("[data-tabindex]");
@@ -3180,32 +3984,35 @@
if (container.hasAttribute("data-tabindex")) {
restoreTabIndex(container);
}
- elements.forEach(restoreTabIndex);
+ for (const element of elements) {
+ restoreTabIndex(element);
+ }
}
function focusIntoView(element, options) {
if (!("scrollIntoView" in element)) {
element.focus();
} else {
element.focus({ preventScroll: true });
- element.scrollIntoView(_chunks_4R3V3JGP_spreadValues({ block: "nearest", inline: "nearest" }, options));
- }
-}
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/KK7H3W2B.js
-"use client";
-
-
-
-
-
-// src/focusable/focusable.ts
-
-
-
-
-
-
+ element.scrollIntoView(_chunks_3YLGPPWQ_spreadValues({ block: "nearest", inline: "nearest" }, options));
+ }
+}
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/LVA2YJMS.js
+"use client";
+
+
+
+
+
+// src/focusable/focusable.tsx
+
+
+
+
+
+
+var TagName = "div";
var isSafariBrowser = isSafari();
var alwaysFocusVisibleInputTypes = [
"text",
@@ -3222,25 +4029,29 @@
"datetime",
"datetime-local"
];
+var safariFocusAncestorSymbol = Symbol("safariFocusAncestor");
+function isSafariFocusAncestor(element) {
+ if (!element) return false;
+ return !!element[safariFocusAncestorSymbol];
+}
+function markSafariFocusAncestor(element, value) {
+ if (!element) return;
+ element[safariFocusAncestorSymbol] = value;
+}
function isAlwaysFocusVisible(element) {
const { tagName, readOnly, type } = element;
- if (tagName === "TEXTAREA" && !readOnly)
- return true;
- if (tagName === "SELECT" && !readOnly)
- return true;
+ if (tagName === "TEXTAREA" && !readOnly) return true;
+ if (tagName === "SELECT" && !readOnly) return true;
if (tagName === "INPUT" && !readOnly) {
return alwaysFocusVisibleInputTypes.includes(type);
}
- if (element.isContentEditable)
+ if (element.isContentEditable) return true;
+ const role = element.getAttribute("role");
+ if (role === "combobox" && element.dataset.name) {
return true;
+ }
return false;
}
-function isAlwaysFocusVisibleDelayed(element) {
- const role = element.getAttribute("role");
- if (role !== "combobox")
- return false;
- return !!element.dataset.name;
-}
function getLabels(element) {
if ("labels" in element) {
return element.labels;
@@ -3255,13 +4066,11 @@
return false;
}
function isNativeTabbable(tagName) {
- if (!tagName)
- return true;
- return tagName === "button" || tagName === "input" || tagName === "select" || tagName === "textarea" || tagName === "a";
+ if (!tagName) return true;
+ return tagName === "button" || tagName === "summary" || tagName === "input" || tagName === "select" || tagName === "textarea" || tagName === "a";
}
function supportsDisabledAttribute(tagName) {
- if (!tagName)
- return true;
+ if (!tagName) return true;
return tagName === "button" || tagName === "input" || tagName === "select" || tagName === "textarea";
}
function getTabIndex(focusable, trulyDisabled, nativeTabbable, supportsDisabled, tabIndexProp) {
@@ -3282,8 +4091,7 @@
function useDisableEvent(onEvent, disabled) {
return useEvent((event) => {
onEvent == null ? void 0 : onEvent(event);
- if (event.defaultPrevented)
- return;
+ if (event.defaultPrevented) return;
if (disabled) {
event.stopPropagation();
event.preventDefault();
@@ -3300,16 +4108,13 @@
}
}
function onGlobalKeyDown(event) {
- if (event.metaKey)
- return;
- if (event.ctrlKey)
- return;
- if (event.altKey)
- return;
+ if (event.metaKey) return;
+ if (event.ctrlKey) return;
+ if (event.altKey) return;
isKeyboardModality = true;
}
var useFocusable = createHook(
- (_a) => {
+ function useFocusable2(_a) {
var _b = _a, {
focusable = true,
accessibleWhenDisabled,
@@ -3323,29 +4128,26 @@
]);
const ref = (0,external_React_.useRef)(null);
(0,external_React_.useEffect)(() => {
- if (!focusable)
- return;
+ if (!focusable) return;
addGlobalEventListener("mousedown", onGlobalMouseDown, true);
addGlobalEventListener("keydown", onGlobalKeyDown, true);
}, [focusable]);
if (isSafariBrowser) {
(0,external_React_.useEffect)(() => {
- if (!focusable)
- return;
+ if (!focusable) return;
const element = ref.current;
- if (!element)
- return;
- if (!isNativeCheckboxOrRadio(element))
- return;
+ if (!element) return;
+ if (!isNativeCheckboxOrRadio(element)) return;
const labels = getLabels(element);
- if (!labels)
- return;
+ if (!labels) return;
const onMouseUp = () => queueMicrotask(() => element.focus());
- labels.forEach((label) => label.addEventListener("mouseup", onMouseUp));
+ for (const label of labels) {
+ label.addEventListener("mouseup", onMouseUp);
+ }
return () => {
- labels.forEach(
- (label) => label.removeEventListener("mouseup", onMouseUp)
- );
+ for (const label of labels) {
+ label.removeEventListener("mouseup", onMouseUp);
+ }
};
}, [focusable]);
}
@@ -3353,22 +4155,17 @@
const trulyDisabled = !!disabled && !accessibleWhenDisabled;
const [focusVisible, setFocusVisible] = (0,external_React_.useState)(false);
(0,external_React_.useEffect)(() => {
- if (!focusable)
- return;
+ if (!focusable) return;
if (trulyDisabled && focusVisible) {
setFocusVisible(false);
}
}, [focusable, trulyDisabled, focusVisible]);
(0,external_React_.useEffect)(() => {
- if (!focusable)
- return;
- if (!focusVisible)
- return;
+ if (!focusable) return;
+ if (!focusVisible) return;
const element = ref.current;
- if (!element)
- return;
- if (typeof IntersectionObserver === "undefined")
- return;
+ if (!element) return;
+ if (typeof IntersectionObserver === "undefined") return;
const observer = new IntersectionObserver(() => {
if (!isFocusable(element)) {
setFocusVisible(false);
@@ -3389,27 +4186,24 @@
const onMouseDownProp = props.onMouseDown;
const onMouseDown = useEvent((event) => {
onMouseDownProp == null ? void 0 : onMouseDownProp(event);
- if (event.defaultPrevented)
- return;
- if (!focusable)
- return;
+ if (event.defaultPrevented) return;
+ if (!focusable) return;
const element = event.currentTarget;
- if (!isSafariBrowser)
- return;
- if (isPortalEvent(event))
- return;
- if (!isButton(element) && !isNativeCheckboxOrRadio(element))
- return;
+ if (!isSafariBrowser) return;
+ if (isPortalEvent(event)) return;
+ if (!isButton(element) && !isNativeCheckboxOrRadio(element)) return;
let receivedFocus = false;
const onFocus = () => {
receivedFocus = true;
};
const options = { capture: true, once: true };
element.addEventListener("focusin", onFocus, options);
+ const focusableContainer = getClosestFocusable(element.parentElement);
+ markSafariFocusAncestor(focusableContainer, true);
queueBeforeEvent(element, "mouseup", () => {
element.removeEventListener("focusin", onFocus, true);
- if (receivedFocus)
- return;
+ markSafariFocusAncestor(focusableContainer, false);
+ if (receivedFocus) return;
focusIfNeeded(element);
});
});
@@ -3417,47 +4211,34 @@
if (currentTarget) {
event.currentTarget = currentTarget;
}
- if (!focusable)
- return;
+ if (!focusable) return;
const element = event.currentTarget;
- if (!element)
- return;
- if (!hasFocus(element))
- return;
+ if (!element) return;
+ if (!hasFocus(element)) return;
onFocusVisible == null ? void 0 : onFocusVisible(event);
- if (event.defaultPrevented)
- return;
+ if (event.defaultPrevented) return;
+ element.dataset.focusVisible = "true";
setFocusVisible(true);
};
const onKeyDownCaptureProp = props.onKeyDownCapture;
- const onKeyDownCapture = useEvent(
- (event) => {
- onKeyDownCaptureProp == null ? void 0 : onKeyDownCaptureProp(event);
- if (event.defaultPrevented)
- return;
- if (!focusable)
- return;
- if (focusVisible)
- return;
- if (event.metaKey)
- return;
- if (event.altKey)
- return;
- if (event.ctrlKey)
- return;
- if (!isSelfTarget(event))
- return;
- const element = event.currentTarget;
- queueMicrotask(() => handleFocusVisible(event, element));
- }
- );
+ const onKeyDownCapture = useEvent((event) => {
+ onKeyDownCaptureProp == null ? void 0 : onKeyDownCaptureProp(event);
+ if (event.defaultPrevented) return;
+ if (!focusable) return;
+ if (focusVisible) return;
+ if (event.metaKey) return;
+ if (event.altKey) return;
+ if (event.ctrlKey) return;
+ if (!isSelfTarget(event)) return;
+ const element = event.currentTarget;
+ const applyFocusVisible = () => handleFocusVisible(event, element);
+ queueBeforeEvent(element, "focusout", applyFocusVisible);
+ });
const onFocusCaptureProp = props.onFocusCapture;
const onFocusCapture = useEvent((event) => {
onFocusCaptureProp == null ? void 0 : onFocusCaptureProp(event);
- if (event.defaultPrevented)
- return;
- if (!focusable)
- return;
+ if (event.defaultPrevented) return;
+ if (!focusable) return;
if (!isSelfTarget(event)) {
setFocusVisible(false);
return;
@@ -3465,8 +4246,6 @@
const element = event.currentTarget;
const applyFocusVisible = () => handleFocusVisible(event, element);
if (isKeyboardModality || isAlwaysFocusVisible(event.target)) {
- queueMicrotask(applyFocusVisible);
- } else if (isAlwaysFocusVisibleDelayed(event.target)) {
queueBeforeEvent(event.target, "focusout", applyFocusVisible);
} else {
setFocusVisible(false);
@@ -3475,38 +4254,36 @@
const onBlurProp = props.onBlur;
const onBlur = useEvent((event) => {
onBlurProp == null ? void 0 : onBlurProp(event);
- if (!focusable)
- return;
- if (!isFocusEventOutside(event))
- return;
+ if (!focusable) return;
+ if (!isFocusEventOutside(event)) return;
setFocusVisible(false);
});
const autoFocusOnShow = (0,external_React_.useContext)(FocusableContext);
const autoFocusRef = useEvent((element) => {
- if (!focusable)
- return;
- if (!autoFocus)
- return;
- if (!element)
- return;
- if (!autoFocusOnShow)
- return;
+ if (!focusable) return;
+ if (!autoFocus) return;
+ if (!element) return;
+ if (!autoFocusOnShow) return;
queueMicrotask(() => {
- if (hasFocus(element))
- return;
- if (!isFocusable(element))
- return;
+ if (hasFocus(element)) return;
+ if (!isFocusable(element)) return;
element.focus();
});
});
- const tagName = useTagName(ref, props.as);
+ const tagName = useTagName(ref);
const nativeTabbable = focusable && isNativeTabbable(tagName);
const supportsDisabled = focusable && supportsDisabledAttribute(tagName);
- const style = trulyDisabled ? _4R3V3JGP_spreadValues({ pointerEvents: "none" }, props.style) : props.style;
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
- "data-focus-visible": focusable && focusVisible ? "" : void 0,
- "data-autofocus": autoFocus ? true : void 0,
- "aria-disabled": disabled ? true : void 0
+ const styleProp = props.style;
+ const style = (0,external_React_.useMemo)(() => {
+ if (trulyDisabled) {
+ return _3YLGPPWQ_spreadValues({ pointerEvents: "none" }, styleProp);
+ }
+ return styleProp;
+ }, [trulyDisabled, styleProp]);
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
+ "data-focus-visible": focusable && focusVisible || void 0,
+ "data-autofocus": autoFocus || void 0,
+ "aria-disabled": disabled || void 0
}, props), {
ref: useMergeRefs(ref, autoFocusRef, props.ref),
style,
@@ -3528,33 +4305,706 @@
onFocusCapture,
onBlur
});
+ return removeUndefinedValues(props);
+ }
+);
+var Focusable = forwardRef2(function Focusable2(props) {
+ const htmlProps = useFocusable(props);
+ return LMDWO4NN_createElement(TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/ITI7HKP4.js
+"use client";
+
+
+
+
+
+
+
+// src/composite/composite.tsx
+
+
+
+
+
+
+
+var ITI7HKP4_TagName = "div";
+function isGrid(items) {
+ return items.some((item) => !!item.rowId);
+}
+function isPrintableKey(event) {
+ const target = event.target;
+ if (target && !isTextField(target)) return false;
+ return event.key.length === 1 && !event.ctrlKey && !event.metaKey;
+}
+function isModifierKey(event) {
+ return event.key === "Shift" || event.key === "Control" || event.key === "Alt" || event.key === "Meta";
+}
+function useKeyboardEventProxy(store, onKeyboardEvent, previousElementRef) {
+ return useEvent((event) => {
+ var _a;
+ onKeyboardEvent == null ? void 0 : onKeyboardEvent(event);
+ if (event.defaultPrevented) return;
+ if (event.isPropagationStopped()) return;
+ if (!isSelfTarget(event)) return;
+ if (isModifierKey(event)) return;
+ if (isPrintableKey(event)) return;
+ const state = store.getState();
+ const activeElement = (_a = getEnabledItem(store, state.activeId)) == null ? void 0 : _a.element;
+ if (!activeElement) return;
+ const _b = event, { view } = _b, eventInit = __objRest(_b, ["view"]);
+ const previousElement = previousElementRef == null ? void 0 : previousElementRef.current;
+ if (activeElement !== previousElement) {
+ activeElement.focus();
+ }
+ if (!fireKeyboardEvent(activeElement, event.type, eventInit)) {
+ event.preventDefault();
+ }
+ if (event.currentTarget.contains(activeElement)) {
+ event.stopPropagation();
+ }
+ });
+}
+function findFirstEnabledItemInTheLastRow(items) {
+ return _5VQZOHHZ_findFirstEnabledItem(
+ flatten2DArray(reverseArray(_5VQZOHHZ_groupItemsByRows(items)))
+ );
+}
+function useScheduleFocus(store) {
+ const [scheduled, setScheduled] = (0,external_React_.useState)(false);
+ const schedule = (0,external_React_.useCallback)(() => setScheduled(true), []);
+ const activeItem = store.useState(
+ (state) => getEnabledItem(store, state.activeId)
+ );
+ (0,external_React_.useEffect)(() => {
+ const activeElement = activeItem == null ? void 0 : activeItem.element;
+ if (!scheduled) return;
+ if (!activeElement) return;
+ setScheduled(false);
+ activeElement.focus({ preventScroll: true });
+ }, [activeItem, scheduled]);
+ return schedule;
+}
+var useComposite = createHook(
+ function useComposite2(_a) {
+ var _b = _a, {
+ store,
+ composite = true,
+ focusOnMove = composite,
+ moveOnKeyPress = true
+ } = _b, props = __objRest(_b, [
+ "store",
+ "composite",
+ "focusOnMove",
+ "moveOnKeyPress"
+ ]);
+ const context = useCompositeProviderContext();
+ store = store || context;
+ invariant(
+ store,
+ false && 0
+ );
+ const ref = (0,external_React_.useRef)(null);
+ const previousElementRef = (0,external_React_.useRef)(null);
+ const scheduleFocus = useScheduleFocus(store);
+ const moves = store.useState("moves");
+ const [, setBaseElement] = useTransactionState(
+ composite ? store.setBaseElement : null
+ );
+ (0,external_React_.useEffect)(() => {
+ var _a2;
+ if (!store) return;
+ if (!moves) return;
+ if (!composite) return;
+ if (!focusOnMove) return;
+ const { activeId: activeId2 } = store.getState();
+ const itemElement = (_a2 = getEnabledItem(store, activeId2)) == null ? void 0 : _a2.element;
+ if (!itemElement) return;
+ focusIntoView(itemElement);
+ }, [store, moves, composite, focusOnMove]);
+ useSafeLayoutEffect(() => {
+ if (!store) return;
+ if (!moves) return;
+ if (!composite) return;
+ const { baseElement, activeId: activeId2 } = store.getState();
+ const isSelfAcive = activeId2 === null;
+ if (!isSelfAcive) return;
+ if (!baseElement) return;
+ const previousElement = previousElementRef.current;
+ previousElementRef.current = null;
+ if (previousElement) {
+ fireBlurEvent(previousElement, { relatedTarget: baseElement });
+ }
+ if (!hasFocus(baseElement)) {
+ baseElement.focus();
+ }
+ }, [store, moves, composite]);
+ const activeId = store.useState("activeId");
+ const virtualFocus = store.useState("virtualFocus");
+ useSafeLayoutEffect(() => {
+ var _a2;
+ if (!store) return;
+ if (!composite) return;
+ if (!virtualFocus) return;
+ const previousElement = previousElementRef.current;
+ previousElementRef.current = null;
+ if (!previousElement) return;
+ const activeElement = (_a2 = getEnabledItem(store, activeId)) == null ? void 0 : _a2.element;
+ const relatedTarget = activeElement || getActiveElement(previousElement);
+ if (relatedTarget === previousElement) return;
+ fireBlurEvent(previousElement, { relatedTarget });
+ }, [store, activeId, virtualFocus, composite]);
+ const onKeyDownCapture = useKeyboardEventProxy(
+ store,
+ props.onKeyDownCapture,
+ previousElementRef
+ );
+ const onKeyUpCapture = useKeyboardEventProxy(
+ store,
+ props.onKeyUpCapture,
+ previousElementRef
+ );
+ const onFocusCaptureProp = props.onFocusCapture;
+ const onFocusCapture = useEvent((event) => {
+ onFocusCaptureProp == null ? void 0 : onFocusCaptureProp(event);
+ if (event.defaultPrevented) return;
+ if (!store) return;
+ const { virtualFocus: virtualFocus2 } = store.getState();
+ if (!virtualFocus2) return;
+ const previousActiveElement = event.relatedTarget;
+ const isSilentlyFocused = silentlyFocused(event.currentTarget);
+ if (isSelfTarget(event) && isSilentlyFocused) {
+ event.stopPropagation();
+ previousElementRef.current = previousActiveElement;
+ }
+ });
+ const onFocusProp = props.onFocus;
+ const onFocus = useEvent((event) => {
+ onFocusProp == null ? void 0 : onFocusProp(event);
+ if (event.defaultPrevented) return;
+ if (!composite) return;
+ if (!store) return;
+ const { relatedTarget } = event;
+ const { virtualFocus: virtualFocus2 } = store.getState();
+ if (virtualFocus2) {
+ if (isSelfTarget(event) && !isItem(store, relatedTarget)) {
+ queueMicrotask(scheduleFocus);
+ }
+ } else if (isSelfTarget(event)) {
+ store.setActiveId(null);
+ }
+ });
+ const onBlurCaptureProp = props.onBlurCapture;
+ const onBlurCapture = useEvent((event) => {
+ var _a2;
+ onBlurCaptureProp == null ? void 0 : onBlurCaptureProp(event);
+ if (event.defaultPrevented) return;
+ if (!store) return;
+ const { virtualFocus: virtualFocus2, activeId: activeId2 } = store.getState();
+ if (!virtualFocus2) return;
+ const activeElement = (_a2 = getEnabledItem(store, activeId2)) == null ? void 0 : _a2.element;
+ const nextActiveElement = event.relatedTarget;
+ const nextActiveElementIsItem = isItem(store, nextActiveElement);
+ const previousElement = previousElementRef.current;
+ previousElementRef.current = null;
+ if (isSelfTarget(event) && nextActiveElementIsItem) {
+ if (nextActiveElement === activeElement) {
+ if (previousElement && previousElement !== nextActiveElement) {
+ fireBlurEvent(previousElement, event);
+ }
+ } else if (activeElement) {
+ fireBlurEvent(activeElement, event);
+ } else if (previousElement) {
+ fireBlurEvent(previousElement, event);
+ }
+ event.stopPropagation();
+ } else {
+ const targetIsItem = isItem(store, event.target);
+ if (!targetIsItem && activeElement) {
+ fireBlurEvent(activeElement, event);
+ }
+ }
+ });
+ const onKeyDownProp = props.onKeyDown;
+ const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress);
+ const onKeyDown = useEvent((event) => {
+ var _a2;
+ onKeyDownProp == null ? void 0 : onKeyDownProp(event);
+ if (event.defaultPrevented) return;
+ if (!store) return;
+ if (!isSelfTarget(event)) return;
+ const { orientation, renderedItems, activeId: activeId2 } = store.getState();
+ const activeItem = getEnabledItem(store, activeId2);
+ if ((_a2 = activeItem == null ? void 0 : activeItem.element) == null ? void 0 : _a2.isConnected) return;
+ const isVertical = orientation !== "horizontal";
+ const isHorizontal = orientation !== "vertical";
+ const grid = isGrid(renderedItems);
+ const isHorizontalKey = event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Home" || event.key === "End";
+ if (isHorizontalKey && isTextField(event.currentTarget)) return;
+ const up = () => {
+ if (grid) {
+ const item = findFirstEnabledItemInTheLastRow(renderedItems);
+ return item == null ? void 0 : item.id;
+ }
+ return store == null ? void 0 : store.last();
+ };
+ const keyMap = {
+ ArrowUp: (grid || isVertical) && up,
+ ArrowRight: (grid || isHorizontal) && store.first,
+ ArrowDown: (grid || isVertical) && store.first,
+ ArrowLeft: (grid || isHorizontal) && store.last,
+ Home: store.first,
+ End: store.last,
+ PageUp: store.first,
+ PageDown: store.last
+ };
+ const action = keyMap[event.key];
+ if (action) {
+ const id = action();
+ if (id !== void 0) {
+ if (!moveOnKeyPressProp(event)) return;
+ event.preventDefault();
+ store.move(id);
+ }
+ }
+ });
+ props = useWrapElement(
+ props,
+ (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(CompositeContextProvider, { value: store, children: element }),
+ [store]
+ );
+ const activeDescendant = store.useState((state) => {
+ var _a2;
+ if (!store) return;
+ if (!composite) return;
+ if (!state.virtualFocus) return;
+ return (_a2 = getEnabledItem(store, state.activeId)) == null ? void 0 : _a2.id;
+ });
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
+ "aria-activedescendant": activeDescendant
+ }, props), {
+ ref: useMergeRefs(ref, setBaseElement, props.ref),
+ onKeyDownCapture,
+ onKeyUpCapture,
+ onFocusCapture,
+ onFocus,
+ onBlurCapture,
+ onKeyDown
+ });
+ const focusable = store.useState(
+ (state) => composite && (state.virtualFocus || state.activeId === null)
+ );
+ props = useFocusable(_3YLGPPWQ_spreadValues({ focusable }, props));
return props;
}
);
-var Focusable = createComponent((props) => {
- props = useFocusable(props);
- return _3ORBWXWF_createElement("div", props);
-});
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/NWCBQ4CV.js
-"use client";
-
-
-
-
-
-// src/command/command.ts
-
-
-
-
-
+var ITI7HKP4_Composite = forwardRef2(function Composite2(props) {
+ const htmlProps = useComposite(props);
+ return LMDWO4NN_createElement(ITI7HKP4_TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@wordpress/components/build-module/composite/context.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+const CompositeContext = (0,external_wp_element_namespaceObject.createContext)({});
+const context_useCompositeContext = () => (0,external_wp_element_namespaceObject.useContext)(CompositeContext);
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/7HVFURXT.js
+"use client";
+
+// src/group/group-label-context.tsx
+
+var GroupLabelContext = (0,external_React_.createContext)(void 0);
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/36LIF33V.js
+"use client";
+
+
+
+
+
+// src/group/group.tsx
+
+
+
+var _36LIF33V_TagName = "div";
+var useGroup = createHook(
+ function useGroup2(props) {
+ const [labelId, setLabelId] = (0,external_React_.useState)();
+ props = useWrapElement(
+ props,
+ (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(GroupLabelContext.Provider, { value: setLabelId, children: element }),
+ []
+ );
+ props = _3YLGPPWQ_spreadValues({
+ role: "group",
+ "aria-labelledby": labelId
+ }, props);
+ return removeUndefinedValues(props);
+ }
+);
+var Group = forwardRef2(function Group2(props) {
+ const htmlProps = useGroup(props);
+ return LMDWO4NN_createElement(_36LIF33V_TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/YORGHBM4.js
+"use client";
+
+
+
+
+// src/composite/composite-group.tsx
+var YORGHBM4_TagName = "div";
+var useCompositeGroup = createHook(
+ function useCompositeGroup2(_a) {
+ var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
+ props = useGroup(props);
+ return props;
+ }
+);
+var YORGHBM4_CompositeGroup = forwardRef2(function CompositeGroup2(props) {
+ const htmlProps = useCompositeGroup(props);
+ return LMDWO4NN_createElement(YORGHBM4_TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@wordpress/components/build-module/composite/group.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+const CompositeGroup = (0,external_wp_element_namespaceObject.forwardRef)(function CompositeGroup(props, ref) {
+ var _props$store;
+ const context = context_useCompositeContext();
+
+ // @ts-expect-error The store prop is undocumented and only used by the
+ // legacy compat layer. The `store` prop is documented, but its type is
+ // obfuscated to discourage its use outside of the component's internals.
+ const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store;
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(YORGHBM4_CompositeGroup, {
+ store: store,
+ ...props,
+ ref: ref
+ });
+});
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/YUOJWFSO.js
+"use client";
+
+
+
+
+
+// src/group/group-label.tsx
+
+
+var YUOJWFSO_TagName = "div";
+var useGroupLabel = createHook(
+ function useGroupLabel2(props) {
+ const setLabelId = (0,external_React_.useContext)(GroupLabelContext);
+ const id = useId(props.id);
+ useSafeLayoutEffect(() => {
+ setLabelId == null ? void 0 : setLabelId(id);
+ return () => setLabelId == null ? void 0 : setLabelId(void 0);
+ }, [setLabelId, id]);
+ props = _3YLGPPWQ_spreadValues({
+ id,
+ "aria-hidden": true
+ }, props);
+ return removeUndefinedValues(props);
+ }
+);
+var GroupLabel = forwardRef2(function GroupLabel2(props) {
+ const htmlProps = useGroupLabel(props);
+ return LMDWO4NN_createElement(YUOJWFSO_TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/SWSPTQMT.js
+"use client";
+
+
+
+
+// src/composite/composite-group-label.tsx
+var SWSPTQMT_TagName = "div";
+var useCompositeGroupLabel = createHook(function useCompositeGroupLabel2(_a) {
+ var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
+ props = useGroupLabel(props);
+ return props;
+});
+var SWSPTQMT_CompositeGroupLabel = forwardRef2(function CompositeGroupLabel2(props) {
+ const htmlProps = useCompositeGroupLabel(props);
+ return LMDWO4NN_createElement(SWSPTQMT_TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@wordpress/components/build-module/composite/group-label.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+const CompositeGroupLabel = (0,external_wp_element_namespaceObject.forwardRef)(function CompositeGroupLabel(props, ref) {
+ var _props$store;
+ const context = context_useCompositeContext();
+
+ // @ts-expect-error The store prop is undocumented and only used by the
+ // legacy compat layer. The `store` prop is documented, but its type is
+ // obfuscated to discourage its use outside of the component's internals.
+ const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store;
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SWSPTQMT_CompositeGroupLabel, {
+ store: store,
+ ...props,
+ ref: ref
+ });
+});
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/UQQRIHDV.js
+"use client";
+
+
+
+
+
+// src/composite/composite-hover.tsx
+
+
+
+
+var UQQRIHDV_TagName = "div";
+function getMouseDestination(event) {
+ const relatedTarget = event.relatedTarget;
+ if ((relatedTarget == null ? void 0 : relatedTarget.nodeType) === Node.ELEMENT_NODE) {
+ return relatedTarget;
+ }
+ return null;
+}
+function hoveringInside(event) {
+ const nextElement = getMouseDestination(event);
+ if (!nextElement) return false;
+ return contains(event.currentTarget, nextElement);
+}
+var symbol = Symbol("composite-hover");
+function movingToAnotherItem(event) {
+ let dest = getMouseDestination(event);
+ if (!dest) return false;
+ do {
+ if (PBFD2E7P_hasOwnProperty(dest, symbol) && dest[symbol]) return true;
+ dest = dest.parentElement;
+ } while (dest);
+ return false;
+}
+var useCompositeHover = createHook(
+ function useCompositeHover2(_a) {
+ var _b = _a, {
+ store,
+ focusOnHover = true,
+ blurOnHoverEnd = !!focusOnHover
+ } = _b, props = __objRest(_b, [
+ "store",
+ "focusOnHover",
+ "blurOnHoverEnd"
+ ]);
+ const context = useCompositeContext();
+ store = store || context;
+ invariant(
+ store,
+ false && 0
+ );
+ const isMouseMoving = useIsMouseMoving();
+ const onMouseMoveProp = props.onMouseMove;
+ const focusOnHoverProp = useBooleanEvent(focusOnHover);
+ const onMouseMove = useEvent((event) => {
+ onMouseMoveProp == null ? void 0 : onMouseMoveProp(event);
+ if (event.defaultPrevented) return;
+ if (!isMouseMoving()) return;
+ if (!focusOnHoverProp(event)) return;
+ if (!hasFocusWithin(event.currentTarget)) {
+ const baseElement = store == null ? void 0 : store.getState().baseElement;
+ if (baseElement && !hasFocus(baseElement)) {
+ baseElement.focus();
+ }
+ }
+ store == null ? void 0 : store.setActiveId(event.currentTarget.id);
+ });
+ const onMouseLeaveProp = props.onMouseLeave;
+ const blurOnHoverEndProp = useBooleanEvent(blurOnHoverEnd);
+ const onMouseLeave = useEvent((event) => {
+ var _a2;
+ onMouseLeaveProp == null ? void 0 : onMouseLeaveProp(event);
+ if (event.defaultPrevented) return;
+ if (!isMouseMoving()) return;
+ if (hoveringInside(event)) return;
+ if (movingToAnotherItem(event)) return;
+ if (!focusOnHoverProp(event)) return;
+ if (!blurOnHoverEndProp(event)) return;
+ store == null ? void 0 : store.setActiveId(null);
+ (_a2 = store == null ? void 0 : store.getState().baseElement) == null ? void 0 : _a2.focus();
+ });
+ const ref = (0,external_React_.useCallback)((element) => {
+ if (!element) return;
+ element[symbol] = true;
+ }, []);
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), {
+ ref: useMergeRefs(ref, props.ref),
+ onMouseMove,
+ onMouseLeave
+ });
+ return removeUndefinedValues(props);
+ }
+);
+var UQQRIHDV_CompositeHover = memo2(
+ forwardRef2(function CompositeHover2(props) {
+ const htmlProps = useCompositeHover(props);
+ return LMDWO4NN_createElement(UQQRIHDV_TagName, htmlProps);
+ })
+);
+
+
+
+;// ./node_modules/@wordpress/components/build-module/composite/hover.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+const CompositeHover = (0,external_wp_element_namespaceObject.forwardRef)(function CompositeHover(props, ref) {
+ var _props$store;
+ const context = context_useCompositeContext();
+
+ // @ts-expect-error The store prop is undocumented and only used by the
+ // legacy compat layer. The `store` prop is documented, but its type is
+ // obfuscated to discourage its use outside of the component's internals.
+ const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store;
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(UQQRIHDV_CompositeHover, {
+ store: store,
+ ...props,
+ ref: ref
+ });
+});
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/RZ4GPYOB.js
+"use client";
+
+
+
+
+
+// src/collection/collection-item.tsx
+
+
+var RZ4GPYOB_TagName = "div";
+var useCollectionItem = createHook(
+ function useCollectionItem2(_a) {
+ var _b = _a, {
+ store,
+ shouldRegisterItem = true,
+ getItem = identity,
+ element: element
+ } = _b, props = __objRest(_b, [
+ "store",
+ "shouldRegisterItem",
+ "getItem",
+ // @ts-expect-error This prop may come from a collection renderer.
+ "element"
+ ]);
+ const context = useCollectionContext();
+ store = store || context;
+ const id = useId(props.id);
+ const ref = (0,external_React_.useRef)(element);
+ (0,external_React_.useEffect)(() => {
+ const element2 = ref.current;
+ if (!id) return;
+ if (!element2) return;
+ if (!shouldRegisterItem) return;
+ const item = getItem({ id, element: element2 });
+ return store == null ? void 0 : store.renderItem(item);
+ }, [id, shouldRegisterItem, getItem, store]);
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), {
+ ref: useMergeRefs(ref, props.ref)
+ });
+ return removeUndefinedValues(props);
+ }
+);
+var CollectionItem = forwardRef2(function CollectionItem2(props) {
+ const htmlProps = useCollectionItem(props);
+ return LMDWO4NN_createElement(RZ4GPYOB_TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/KUU7WJ55.js
+"use client";
+
+
+
+
+
+// src/command/command.tsx
+
+
+
+
+
+var KUU7WJ55_TagName = "button";
function isNativeClick(event) {
- if (!event.isTrusted)
- return false;
+ if (!event.isTrusted) return false;
const element = event.currentTarget;
if (event.key === "Enter") {
return isButton(element) || element.tagName === "SUMMARY" || element.tagName === "A";
@@ -3564,41 +5014,30 @@
}
return false;
}
-var symbol = Symbol("command");
+var KUU7WJ55_symbol = Symbol("command");
var useCommand = createHook(
- (_a) => {
+ function useCommand2(_a) {
var _b = _a, { clickOnEnter = true, clickOnSpace = true } = _b, props = __objRest(_b, ["clickOnEnter", "clickOnSpace"]);
const ref = (0,external_React_.useRef)(null);
- const tagName = useTagName(ref, props.as);
- const type = props.type;
- const [isNativeButton, setIsNativeButton] = (0,external_React_.useState)(
- () => !!tagName && isButton({ tagName, type })
- );
+ const [isNativeButton, setIsNativeButton] = (0,external_React_.useState)(false);
(0,external_React_.useEffect)(() => {
- if (!ref.current)
- return;
+ if (!ref.current) return;
setIsNativeButton(isButton(ref.current));
}, []);
const [active, setActive] = (0,external_React_.useState)(false);
const activeRef = (0,external_React_.useRef)(false);
const disabled = disabledFromProps(props);
- const [isDuplicate, metadataProps] = useMetadataProps(props, symbol, true);
+ const [isDuplicate, metadataProps] = useMetadataProps(props, KUU7WJ55_symbol, true);
const onKeyDownProp = props.onKeyDown;
const onKeyDown = useEvent((event) => {
onKeyDownProp == null ? void 0 : onKeyDownProp(event);
const element = event.currentTarget;
- if (event.defaultPrevented)
- return;
- if (isDuplicate)
- return;
- if (disabled)
- return;
- if (!isSelfTarget(event))
- return;
- if (DLOEKDPY_isTextField(element))
- return;
- if (element.isContentEditable)
- return;
+ if (event.defaultPrevented) return;
+ if (isDuplicate) return;
+ if (disabled) return;
+ if (!isSelfTarget(event)) return;
+ if (isTextField(element)) return;
+ if (element.isContentEditable) return;
const isEnter = clickOnEnter && event.key === "Enter";
const isSpace = clickOnSpace && event.key === " ";
const shouldPreventEnter = event.key === "Enter" && !clickOnEnter;
@@ -3632,14 +5071,10 @@
const onKeyUpProp = props.onKeyUp;
const onKeyUp = useEvent((event) => {
onKeyUpProp == null ? void 0 : onKeyUpProp(event);
- if (event.defaultPrevented)
- return;
- if (isDuplicate)
- return;
- if (disabled)
- return;
- if (event.metaKey)
- return;
+ if (event.defaultPrevented) return;
+ if (isDuplicate) return;
+ if (disabled) return;
+ if (event.metaKey) return;
const isSpace = clickOnSpace && event.key === " ";
if (activeRef.current && isSpace) {
activeRef.current = false;
@@ -3652,8 +5087,8 @@
}
}
});
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues(_4R3V3JGP_spreadValues({
- "data-active": active ? "" : void 0,
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues(_3YLGPPWQ_spreadValues({
+ "data-active": active || void 0,
type: isNativeButton ? "button" : void 0
}, metadataProps), props), {
ref: useMergeRefs(ref, props.ref),
@@ -3664,505 +5099,14 @@
return props;
}
);
-var Command = createComponent((props) => {
- props = useCommand(props);
- return _3ORBWXWF_createElement("button", props);
-});
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/4UUKJZ4V.js
-"use client";
-
-
-// src/collection/collection-context.tsx
-var ctx = createStoreContext();
-var useCollectionContext = ctx.useContext;
-var useCollectionScopedContext = ctx.useScopedContext;
-var useCollectionProviderContext = ctx.useProviderContext;
-var CollectionContextProvider = ctx.ContextProvider;
-var CollectionScopedContextProvider = ctx.ScopedContextProvider;
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/UH3I23HL.js
-"use client";
-
-
-
-
-
-// src/collection/collection-item.ts
-
-
-var useCollectionItem = createHook(
- (_a) => {
- var _b = _a, {
- store,
- shouldRegisterItem = true,
- getItem = identity,
- element: element
- } = _b, props = __objRest(_b, [
- "store",
- "shouldRegisterItem",
- "getItem",
- // @ts-expect-error This prop may come from a collection renderer.
- "element"
- ]);
- const context = useCollectionContext();
- store = store || context;
- const id = useId(props.id);
- const ref = (0,external_React_.useRef)(element);
- (0,external_React_.useEffect)(() => {
- const element2 = ref.current;
- if (!id)
- return;
- if (!element2)
- return;
- if (!shouldRegisterItem)
- return;
- const item = getItem({ id, element: element2 });
- return store == null ? void 0 : store.renderItem(item);
- }, [id, shouldRegisterItem, getItem, store]);
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
- ref: useMergeRefs(ref, props.ref)
- });
- return props;
- }
-);
-var CollectionItem = createComponent(
- (props) => {
- const htmlProps = useCollectionItem(props);
- return _3ORBWXWF_createElement("div", htmlProps);
- }
-);
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/3IEDWLST.js
-"use client";
-
-// src/composite/utils.ts
-
-var NULL_ITEM = { id: null };
-function flipItems(items, activeId, shouldInsertNullItem = false) {
- const index = items.findIndex((item) => item.id === activeId);
- return [
- ...items.slice(index + 1),
- ...shouldInsertNullItem ? [NULL_ITEM] : [],
- ...items.slice(0, index)
- ];
-}
-function findFirstEnabledItem(items, excludeId) {
- return items.find((item) => {
- if (excludeId) {
- return !item.disabled && item.id !== excludeId;
- }
- return !item.disabled;
- });
-}
-function getEnabledItem(store, id) {
- if (!id)
- return null;
- return store.item(id) || null;
-}
-function groupItemsByRows(items) {
- const rows = [];
- for (const item of items) {
- const row = rows.find((currentRow) => {
- var _a;
- return ((_a = currentRow[0]) == null ? void 0 : _a.rowId) === item.rowId;
- });
- if (row) {
- row.push(item);
- } else {
- rows.push([item]);
- }
- }
- return rows;
-}
-function selectTextField(element, collapseToEnd = false) {
- if (isTextField(element)) {
- element.setSelectionRange(
- collapseToEnd ? element.value.length : 0,
- element.value.length
- );
- } else if (element.isContentEditable) {
- const selection = getDocument(element).getSelection();
- selection == null ? void 0 : selection.selectAllChildren(element);
- if (collapseToEnd) {
- selection == null ? void 0 : selection.collapseToEnd();
- }
- }
-}
-var FOCUS_SILENTLY = Symbol("FOCUS_SILENTLY");
-function focusSilently(element) {
- element[FOCUS_SILENTLY] = true;
- element.focus({ preventScroll: true });
-}
-function silentlyFocused(element) {
- const isSilentlyFocused = element[FOCUS_SILENTLY];
- delete element[FOCUS_SILENTLY];
- return isSilentlyFocused;
-}
-function isItem(store, element, exclude) {
- if (!element)
- return false;
- if (element === exclude)
- return false;
- const item = store.item(element.id);
- if (!item)
- return false;
- if (exclude && item.element === exclude)
- return false;
- return true;
-}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/IB7YUKH5.js
-"use client";
-
-
-
-// src/composite/composite-context.tsx
-
-var IB7YUKH5_ctx = createStoreContext(
- [CollectionContextProvider],
- [CollectionScopedContextProvider]
-);
-var useCompositeContext = IB7YUKH5_ctx.useContext;
-var useCompositeScopedContext = IB7YUKH5_ctx.useScopedContext;
-var useCompositeProviderContext = IB7YUKH5_ctx.useProviderContext;
-var CompositeContextProvider = IB7YUKH5_ctx.ContextProvider;
-var CompositeScopedContextProvider = IB7YUKH5_ctx.ScopedContextProvider;
-var CompositeItemContext = (0,external_React_.createContext)(
- void 0
-);
-var CompositeRowContext = (0,external_React_.createContext)(
- void 0
-);
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/EAHJFCU4.js
-"use client";
-
-
-
-// src/utils/store.ts
-function getInternal(store, key) {
- const internals = store.__unstableInternals;
- invariant(internals, "Invalid store");
- return internals[key];
-}
-function createStore(initialState, ...stores) {
- let state = initialState;
- let prevStateBatch = state;
- let lastUpdate = Symbol();
- let destroy = noop;
- const instances = /* @__PURE__ */ new Set();
- const updatedKeys = /* @__PURE__ */ new Set();
- const setups = /* @__PURE__ */ new Set();
- const listeners = /* @__PURE__ */ new Set();
- const batchListeners = /* @__PURE__ */ new Set();
- const disposables = /* @__PURE__ */ new WeakMap();
- const listenerKeys = /* @__PURE__ */ new WeakMap();
- const storeSetup = (callback) => {
- setups.add(callback);
- return () => setups.delete(callback);
- };
- const storeInit = () => {
- const initialized = instances.size;
- const instance = Symbol();
- instances.add(instance);
- const maybeDestroy = () => {
- instances.delete(instance);
- if (instances.size)
- return;
- destroy();
- };
- if (initialized)
- return maybeDestroy;
- const desyncs = getKeys(state).map(
- (key) => chain(
- ...stores.map((store) => {
- var _a;
- const storeState = (_a = store == null ? void 0 : store.getState) == null ? void 0 : _a.call(store);
- if (!storeState)
- return;
- if (!Y3OOHFCN_hasOwnProperty(storeState, key))
- return;
- return sync(store, [key], (state2) => {
- setState(
- key,
- state2[key],
- // @ts-expect-error - Not public API. This is just to prevent
- // infinite loops.
- true
- );
- });
- })
- )
- );
- const teardowns = [];
- setups.forEach((setup2) => teardowns.push(setup2()));
- const cleanups = stores.map(init);
- destroy = chain(...desyncs, ...teardowns, ...cleanups);
- return maybeDestroy;
- };
- const sub = (keys, listener, set = listeners) => {
- set.add(listener);
- listenerKeys.set(listener, keys);
- return () => {
- var _a;
- (_a = disposables.get(listener)) == null ? void 0 : _a();
- disposables.delete(listener);
- listenerKeys.delete(listener);
- set.delete(listener);
- };
- };
- const storeSubscribe = (keys, listener) => sub(keys, listener);
- const storeSync = (keys, listener) => {
- disposables.set(listener, listener(state, state));
- return sub(keys, listener);
- };
- const storeBatch = (keys, listener) => {
- disposables.set(listener, listener(state, prevStateBatch));
- return sub(keys, listener, batchListeners);
- };
- const storePick = (keys) => createStore(pick(state, keys), finalStore);
- const storeOmit = (keys) => createStore(omit(state, keys), finalStore);
- const getState = () => state;
- const setState = (key, value, fromStores = false) => {
- if (!Y3OOHFCN_hasOwnProperty(state, key))
- return;
- const nextValue = Y3OOHFCN_applyState(value, state[key]);
- if (nextValue === state[key])
- return;
- if (!fromStores) {
- stores.forEach((store) => {
- var _a;
- (_a = store == null ? void 0 : store.setState) == null ? void 0 : _a.call(store, key, nextValue);
- });
- }
- const prevState = state;
- state = _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, state), { [key]: nextValue });
- const thisUpdate = Symbol();
- lastUpdate = thisUpdate;
- updatedKeys.add(key);
- const run = (listener, prev, uKeys) => {
- var _a;
- const keys = listenerKeys.get(listener);
- const updated = (k) => uKeys ? uKeys.has(k) : k === key;
- if (!keys || keys.some(updated)) {
- (_a = disposables.get(listener)) == null ? void 0 : _a();
- disposables.set(listener, listener(state, prev));
- }
- };
- listeners.forEach((listener) => {
- run(listener, prevState);
- });
- queueMicrotask(() => {
- if (lastUpdate !== thisUpdate)
- return;
- const snapshot = state;
- batchListeners.forEach((listener) => {
- run(listener, prevStateBatch, updatedKeys);
- });
- prevStateBatch = snapshot;
- updatedKeys.clear();
- });
- };
- const finalStore = {
- getState,
- setState,
- __unstableInternals: {
- setup: storeSetup,
- init: storeInit,
- subscribe: storeSubscribe,
- sync: storeSync,
- batch: storeBatch,
- pick: storePick,
- omit: storeOmit
- }
- };
- return finalStore;
-}
-function setup(store, ...args) {
- if (!store)
- return;
- return getInternal(store, "setup")(...args);
-}
-function init(store, ...args) {
- if (!store)
- return;
- return getInternal(store, "init")(...args);
-}
-function subscribe(store, ...args) {
- if (!store)
- return;
- return getInternal(store, "subscribe")(...args);
-}
-function sync(store, ...args) {
- if (!store)
- return;
- return getInternal(store, "sync")(...args);
-}
-function batch(store, ...args) {
- if (!store)
- return;
- return getInternal(store, "batch")(...args);
-}
-function omit2(store, ...args) {
- if (!store)
- return;
- return getInternal(store, "omit")(...args);
-}
-function pick2(store, ...args) {
- if (!store)
- return;
- return getInternal(store, "pick")(...args);
-}
-function mergeStore(...stores) {
- const initialState = stores.reduce((state, store2) => {
- var _a;
- const nextState = (_a = store2 == null ? void 0 : store2.getState) == null ? void 0 : _a.call(store2);
- if (!nextState)
- return state;
- return _chunks_4R3V3JGP_spreadValues(_chunks_4R3V3JGP_spreadValues({}, state), nextState);
- }, {});
- const store = createStore(initialState, ...stores);
- return store;
-}
-function throwOnConflictingProps(props, store) {
- if (true)
- return;
- if (!store)
- return;
- const defaultKeys = Object.entries(props).filter(([key, value]) => key.startsWith("default") && value !== void 0).map(([key]) => {
- var _a;
- const stateKey = key.replace("default", "");
- return `${((_a = stateKey[0]) == null ? void 0 : _a.toLowerCase()) || ""}${stateKey.slice(1)}`;
- });
- if (!defaultKeys.length)
- return;
- const storeState = store.getState();
- const conflictingProps = defaultKeys.filter(
- (key) => Y3OOHFCN_hasOwnProperty(storeState, key)
- );
- if (!conflictingProps.length)
- return;
- throw new Error(
- `Passing a store prop in conjunction with a default state is not supported.
-
-const store = useSelectStore();
-<SelectProvider store={store} defaultValue="Apple" />
- ^ ^
-
-Instead, pass the default state to the topmost store:
-
-const store = useSelectStore({ defaultValue: "Apple" });
-<SelectProvider store={store} />
-
-See https://github.com/ariakit/ariakit/pull/2745 for more details.
-
-If there's a particular need for this, please submit a feature request at https://github.com/ariakit/ariakit
-`
- );
-}
-
-
-
-// EXTERNAL MODULE: ./node_modules/use-sync-external-store/shim/index.js
-var shim = __webpack_require__(422);
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/EKQEJRUF.js
-"use client";
-
-
-
-// src/utils/store.tsx
-
-
-
-
-var { useSyncExternalStore } = shim;
-var noopSubscribe = () => () => {
-};
-function useStoreState(store, keyOrSelector = identity) {
- const storeSubscribe = external_React_.useCallback(
- (callback) => {
- if (!store)
- return noopSubscribe();
- return subscribe(store, null, callback);
- },
- [store]
- );
- const getSnapshot = () => {
- const key = typeof keyOrSelector === "string" ? keyOrSelector : null;
- const selector = typeof keyOrSelector === "function" ? keyOrSelector : null;
- const state = store == null ? void 0 : store.getState();
- if (selector)
- return selector(state);
- if (!state)
- return;
- if (!key)
- return;
- if (!Y3OOHFCN_hasOwnProperty(state, key))
- return;
- return state[key];
- };
- return useSyncExternalStore(storeSubscribe, getSnapshot, getSnapshot);
-}
-function useStoreProps(store, props, key, setKey) {
- const value = Y3OOHFCN_hasOwnProperty(props, key) ? props[key] : void 0;
- const setValue = setKey ? props[setKey] : void 0;
- const propsRef = useLiveRef({ value, setValue });
- useSafeLayoutEffect(() => {
- return sync(store, [key], (state, prev) => {
- const { value: value2, setValue: setValue2 } = propsRef.current;
- if (!setValue2)
- return;
- if (state[key] === prev[key])
- return;
- if (state[key] === value2)
- return;
- setValue2(state[key]);
- });
- }, [store, key]);
- useSafeLayoutEffect(() => {
- if (value === void 0)
- return;
- store.setState(key, value);
- return batch(store, [key], () => {
- if (value === void 0)
- return;
- store.setState(key, value);
- });
- });
-}
-function EKQEJRUF_useStore(createStore, props) {
- const [store, setStore] = external_React_.useState(() => createStore(props));
- useSafeLayoutEffect(() => init(store), [store]);
- const useState2 = external_React_.useCallback(
- (keyOrSelector) => useStoreState(store, keyOrSelector),
- [store]
- );
- const memoizedStore = external_React_.useMemo(
- () => _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, store), { useState: useState2 }),
- [store, useState2]
- );
- const updateStore = useEvent(() => {
- setStore((store2) => createStore(_4R3V3JGP_spreadValues(_4R3V3JGP_spreadValues({}, props), store2.getState())));
- });
- return [memoizedStore, updateStore];
-}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/QZLXIDNP.js
+var Command = forwardRef2(function Command2(props) {
+ const htmlProps = useCommand(props);
+ return LMDWO4NN_createElement(KUU7WJ55_TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/P2CTZE2T.js
"use client";
@@ -4179,11 +5123,10 @@
+
+var P2CTZE2T_TagName = "button";
function isEditableElement(element) {
- if (element.isContentEditable)
- return true;
- if (DLOEKDPY_isTextField(element))
- return true;
+ if (isTextbox(element)) return true;
return element.tagName === "INPUT" && !isButton(element);
}
function getNextPageOffset(scrollingElement, pageUp = false) {
@@ -4205,27 +5148,21 @@
}
function findNextPageItemId(element, store, next, pageUp = false) {
var _a;
- if (!store)
- return;
- if (!next)
- return;
+ if (!store) return;
+ if (!next) return;
const { renderedItems } = store.getState();
const scrollingElement = getScrollingElement(element);
- if (!scrollingElement)
- return;
+ if (!scrollingElement) return;
const nextPageOffset = getNextPageOffset(scrollingElement, pageUp);
let id;
let prevDifference;
for (let i = 0; i < renderedItems.length; i += 1) {
const previousId = id;
id = next(i);
- if (!id)
- break;
- if (id === previousId)
- continue;
+ if (!id) break;
+ if (id === previousId) continue;
const itemElement = (_a = getEnabledItem(store, id)) == null ? void 0 : _a.element;
- if (!itemElement)
- continue;
+ if (!itemElement) continue;
const itemOffset = getItemOffset(itemElement, pageUp);
const difference = itemOffset - nextPageOffset;
const absDifference = Math.abs(difference);
@@ -4240,43 +5177,11 @@
return id;
}
function targetIsAnotherItem(event, store) {
- if (isSelfTarget(event))
- return false;
+ if (isSelfTarget(event)) return false;
return isItem(store, event.target);
}
-function useRole(ref, props) {
- const roleProp = props.role;
- const [role, setRole] = (0,external_React_.useState)(roleProp);
- useSafeLayoutEffect(() => {
- const element = ref.current;
- if (!element)
- return;
- setRole(element.getAttribute("role") || roleProp);
- }, [roleProp]);
- return role;
-}
-function requiresAriaSelected(role) {
- return role === "option" || role === "treeitem";
-}
-function supportsAriaSelected(role) {
- if (role === "option")
- return true;
- if (role === "tab")
- return true;
- if (role === "treeitem")
- return true;
- if (role === "gridcell")
- return true;
- if (role === "row")
- return true;
- if (role === "columnheader")
- return true;
- if (role === "rowheader")
- return true;
- return false;
-}
var useCompositeItem = createHook(
- (_a) => {
+ function useCompositeItem2(_a) {
var _b = _a, {
store,
rowId: rowIdProp,
@@ -4301,25 +5206,65 @@
const id = useId(props.id);
const ref = (0,external_React_.useRef)(null);
const row = (0,external_React_.useContext)(CompositeRowContext);
- const rowId = useStoreState(store, (state) => {
- if (rowIdProp)
- return rowIdProp;
- if (!state)
- return;
- if (!(row == null ? void 0 : row.baseElement))
- return;
- if (row.baseElement !== state.baseElement)
- return;
- return row.id;
- });
const disabled = disabledFromProps(props);
const trulyDisabled = disabled && !props.accessibleWhenDisabled;
+ const {
+ rowId,
+ baseElement,
+ isActiveItem,
+ ariaSetSize,
+ ariaPosInSet,
+ isTabbable
+ } = useStoreStateObject(store, {
+ rowId(state) {
+ if (rowIdProp) return rowIdProp;
+ if (!state) return;
+ if (!(row == null ? void 0 : row.baseElement)) return;
+ if (row.baseElement !== state.baseElement) return;
+ return row.id;
+ },
+ baseElement(state) {
+ return (state == null ? void 0 : state.baseElement) || void 0;
+ },
+ isActiveItem(state) {
+ return !!state && state.activeId === id;
+ },
+ ariaSetSize(state) {
+ if (ariaSetSizeProp != null) return ariaSetSizeProp;
+ if (!state) return;
+ if (!(row == null ? void 0 : row.ariaSetSize)) return;
+ if (row.baseElement !== state.baseElement) return;
+ return row.ariaSetSize;
+ },
+ ariaPosInSet(state) {
+ if (ariaPosInSetProp != null) return ariaPosInSetProp;
+ if (!state) return;
+ if (!(row == null ? void 0 : row.ariaPosInSet)) return;
+ if (row.baseElement !== state.baseElement) return;
+ const itemsInRow = state.renderedItems.filter(
+ (item) => item.rowId === rowId
+ );
+ return row.ariaPosInSet + itemsInRow.findIndex((item) => item.id === id);
+ },
+ isTabbable(state) {
+ if (!(state == null ? void 0 : state.renderedItems.length)) return true;
+ if (state.virtualFocus) return false;
+ if (tabbable) return true;
+ if (state.activeId === null) return false;
+ const item = store == null ? void 0 : store.item(state.activeId);
+ if (item == null ? void 0 : item.disabled) return true;
+ if (!(item == null ? void 0 : item.element)) return true;
+ return state.activeId === id;
+ }
+ });
const getItem = (0,external_React_.useCallback)(
(item) => {
- const nextItem = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, item), {
+ var _a2;
+ const nextItem = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, item), {
id: id || item.id,
rowId,
- disabled: !!trulyDisabled
+ disabled: !!trulyDisabled,
+ children: (_a2 = item.element) == null ? void 0 : _a2.textContent
});
if (getItemProp) {
return getItemProp(nextItem);
@@ -4332,28 +5277,26 @@
const hasFocusedComposite = (0,external_React_.useRef)(false);
const onFocus = useEvent((event) => {
onFocusProp == null ? void 0 : onFocusProp(event);
- if (event.defaultPrevented)
- return;
- if (isPortalEvent(event))
- return;
- if (!id)
- return;
- if (!store)
- return;
- const { activeId, virtualFocus: virtualFocus2, baseElement: baseElement2 } = store.getState();
- if (targetIsAnotherItem(event, store))
- return;
- if (activeId !== id) {
- store.setActiveId(id);
- }
- if (!virtualFocus2)
- return;
- if (!isSelfTarget(event))
- return;
- if (isEditableElement(event.currentTarget))
- return;
- if (!(baseElement2 == null ? void 0 : baseElement2.isConnected))
- return;
+ if (event.defaultPrevented) return;
+ if (isPortalEvent(event)) return;
+ if (!id) return;
+ if (!store) return;
+ if (targetIsAnotherItem(event, store)) return;
+ const { virtualFocus, baseElement: baseElement2 } = store.getState();
+ store.setActiveId(id);
+ if (isTextbox(event.currentTarget)) {
+ selectTextField(event.currentTarget);
+ }
+ if (!virtualFocus) return;
+ if (!isSelfTarget(event)) return;
+ if (isEditableElement(event.currentTarget)) return;
+ if (!(baseElement2 == null ? void 0 : baseElement2.isConnected)) return;
+ if (isSafari() && event.currentTarget.hasAttribute("data-autofocus")) {
+ event.currentTarget.scrollIntoView({
+ block: "nearest",
+ inline: "nearest"
+ });
+ }
hasFocusedComposite.current = true;
const fromComposite = event.relatedTarget === baseElement2 || isItem(store, event.relatedTarget);
if (fromComposite) {
@@ -4365,8 +5308,7 @@
const onBlurCaptureProp = props.onBlurCapture;
const onBlurCapture = useEvent((event) => {
onBlurCaptureProp == null ? void 0 : onBlurCaptureProp(event);
- if (event.defaultPrevented)
- return;
+ if (event.defaultPrevented) return;
const state = store == null ? void 0 : store.getState();
if ((state == null ? void 0 : state.virtualFocus) && hasFocusedComposite.current) {
hasFocusedComposite.current = false;
@@ -4379,12 +5321,9 @@
const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress);
const onKeyDown = useEvent((event) => {
onKeyDownProp == null ? void 0 : onKeyDownProp(event);
- if (event.defaultPrevented)
- return;
- if (!isSelfTarget(event))
- return;
- if (!store)
- return;
+ if (event.defaultPrevented) return;
+ if (!isSelfTarget(event)) return;
+ if (!store) return;
const { currentTarget } = event;
const state = store.getState();
const item = store.item(id);
@@ -4392,14 +5331,10 @@
const isVertical = state.orientation !== "horizontal";
const isHorizontal = state.orientation !== "vertical";
const canHomeEnd = () => {
- if (isGrid)
- return true;
- if (isHorizontal)
- return true;
- if (!state.baseElement)
- return true;
- if (!DLOEKDPY_isTextField(state.baseElement))
- return true;
+ if (isGrid) return true;
+ if (isHorizontal) return true;
+ if (!state.baseElement) return true;
+ if (!isTextField(state.baseElement)) return true;
return false;
};
const keyMap = {
@@ -4408,16 +5343,14 @@
ArrowDown: (isGrid || isVertical) && store.down,
ArrowLeft: (isGrid || isHorizontal) && store.previous,
Home: () => {
- if (!canHomeEnd())
- return;
+ if (!canHomeEnd()) return;
if (!isGrid || event.ctrlKey) {
return store == null ? void 0 : store.first();
}
return store == null ? void 0 : store.previous(-1);
},
End: () => {
- if (!canHomeEnd())
- return;
+ if (!canHomeEnd()) return;
if (!isGrid || event.ctrlKey) {
return store == null ? void 0 : store.last();
}
@@ -4432,19 +5365,25 @@
};
const action = keyMap[event.key];
if (action) {
+ if (isTextbox(currentTarget)) {
+ const selection = getTextboxSelection(currentTarget);
+ const isLeft = isHorizontal && event.key === "ArrowLeft";
+ const isRight = isHorizontal && event.key === "ArrowRight";
+ const isUp = isVertical && event.key === "ArrowUp";
+ const isDown = isVertical && event.key === "ArrowDown";
+ if (isRight || isDown) {
+ const { length: valueLength } = getTextboxValue(currentTarget);
+ if (selection.end !== valueLength) return;
+ } else if ((isLeft || isUp) && selection.start !== 0) return;
+ }
const nextId = action();
if (preventScrollOnKeyDownProp(event) || nextId !== void 0) {
- if (!moveOnKeyPressProp(event))
- return;
+ if (!moveOnKeyPressProp(event)) return;
event.preventDefault();
store.move(nextId);
}
}
});
- const baseElement = useStoreState(
- store,
- (state) => (state == null ? void 0 : state.baseElement) || void 0
- );
const providerValue = (0,external_React_.useMemo)(
() => ({ id, baseElement }),
[id, baseElement]
@@ -4454,58 +5393,9 @@
(element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(CompositeItemContext.Provider, { value: providerValue, children: element }),
[providerValue]
);
- const isActiveItem = useStoreState(
- store,
- (state) => !!state && state.activeId === id
- );
- const virtualFocus = useStoreState(store, "virtualFocus");
- const role = useRole(ref, props);
- let ariaSelected;
- if (isActiveItem) {
- if (requiresAriaSelected(role)) {
- ariaSelected = true;
- } else if (virtualFocus && supportsAriaSelected(role)) {
- ariaSelected = true;
- }
- }
- const ariaSetSize = useStoreState(store, (state) => {
- if (ariaSetSizeProp != null)
- return ariaSetSizeProp;
- if (!state)
- return;
- if (!(row == null ? void 0 : row.ariaSetSize))
- return;
- if (row.baseElement !== state.baseElement)
- return;
- return row.ariaSetSize;
- });
- const ariaPosInSet = useStoreState(store, (state) => {
- if (ariaPosInSetProp != null)
- return ariaPosInSetProp;
- if (!state)
- return;
- if (!(row == null ? void 0 : row.ariaPosInSet))
- return;
- if (row.baseElement !== state.baseElement)
- return;
- const itemsInRow = state.renderedItems.filter(
- (item) => item.rowId === rowId
- );
- return row.ariaPosInSet + itemsInRow.findIndex((item) => item.id === id);
- });
- const isTabbable = useStoreState(store, (state) => {
- if (!(state == null ? void 0 : state.renderedItems.length))
- return true;
- if (state.virtualFocus)
- return false;
- if (tabbable)
- return true;
- return state.activeId === id;
- });
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
id,
- "aria-selected": ariaSelected,
- "data-active-item": isActiveItem ? "" : void 0
+ "data-active-item": isActiveItem || void 0
}, props), {
ref: useMergeRefs(ref, props.ref),
tabIndex: isTabbable ? props.tabIndex : -1,
@@ -4514,29 +5404,530 @@
onKeyDown
});
props = useCommand(props);
- props = useCollectionItem(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
+ props = useCollectionItem(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
store
}, props), {
getItem,
- shouldRegisterItem: !!id ? props.shouldRegisterItem : false
+ shouldRegisterItem: id ? props.shouldRegisterItem : false
+ }));
+ return removeUndefinedValues(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), {
+ "aria-setsize": ariaSetSize,
+ "aria-posinset": ariaPosInSet
}));
- return _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
+ }
+);
+var P2CTZE2T_CompositeItem = memo2(
+ forwardRef2(function CompositeItem2(props) {
+ const htmlProps = useCompositeItem(props);
+ return LMDWO4NN_createElement(P2CTZE2T_TagName, htmlProps);
+ })
+);
+
+
+
+;// ./node_modules/@wordpress/components/build-module/composite/item.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+const CompositeItem = (0,external_wp_element_namespaceObject.forwardRef)(function CompositeItem(props, ref) {
+ var _props$store;
+ const context = context_useCompositeContext();
+
+ // @ts-expect-error The store prop is undocumented and only used by the
+ // legacy compat layer. The `store` prop is documented, but its type is
+ // obfuscated to discourage its use outside of the component's internals.
+ const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store;
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(P2CTZE2T_CompositeItem, {
+ store: store,
+ ...props,
+ ref: ref
+ });
+});
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/J2LQO3EC.js
+"use client";
+
+
+
+
+
+// src/composite/composite-row.tsx
+
+
+
+var J2LQO3EC_TagName = "div";
+var useCompositeRow = createHook(
+ function useCompositeRow2(_a) {
+ var _b = _a, {
+ store,
"aria-setsize": ariaSetSize,
"aria-posinset": ariaPosInSet
- });
- }
-);
-var CompositeItem = createMemoComponent(
- (props) => {
- const htmlProps = useCompositeItem(props);
- return _3ORBWXWF_createElement("button", htmlProps);
- }
-);
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/Z5IGYIPT.js
+ } = _b, props = __objRest(_b, [
+ "store",
+ "aria-setsize",
+ "aria-posinset"
+ ]);
+ const context = useCompositeContext();
+ store = store || context;
+ invariant(
+ store,
+ false && 0
+ );
+ const id = useId(props.id);
+ const baseElement = store.useState(
+ (state) => state.baseElement || void 0
+ );
+ const providerValue = (0,external_React_.useMemo)(
+ () => ({ id, baseElement, ariaSetSize, ariaPosInSet }),
+ [id, baseElement, ariaSetSize, ariaPosInSet]
+ );
+ props = useWrapElement(
+ props,
+ (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(CompositeRowContext.Provider, { value: providerValue, children: element }),
+ [providerValue]
+ );
+ props = _3YLGPPWQ_spreadValues({ id }, props);
+ return removeUndefinedValues(props);
+ }
+);
+var J2LQO3EC_CompositeRow = forwardRef2(function CompositeRow2(props) {
+ const htmlProps = useCompositeRow(props);
+ return LMDWO4NN_createElement(J2LQO3EC_TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@wordpress/components/build-module/composite/row.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+const CompositeRow = (0,external_wp_element_namespaceObject.forwardRef)(function CompositeRow(props, ref) {
+ var _props$store;
+ const context = context_useCompositeContext();
+
+ // @ts-expect-error The store prop is undocumented and only used by the
+ // legacy compat layer. The `store` prop is documented, but its type is
+ // obfuscated to discourage its use outside of the component's internals.
+ const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store;
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(J2LQO3EC_CompositeRow, {
+ store: store,
+ ...props,
+ ref: ref
+ });
+});
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/T7VMP3TM.js
+"use client";
+
+
+
+
+
+
+// src/composite/composite-typeahead.tsx
+
+
+
+
+var T7VMP3TM_TagName = "div";
+var chars = "";
+function clearChars() {
+ chars = "";
+}
+function isValidTypeaheadEvent(event) {
+ const target = event.target;
+ if (target && isTextField(target)) return false;
+ if (event.key === " " && chars.length) return true;
+ return event.key.length === 1 && !event.ctrlKey && !event.altKey && !event.metaKey && /^[\p{Letter}\p{Number}]$/u.test(event.key);
+}
+function isSelfTargetOrItem(event, items) {
+ if (isSelfTarget(event)) return true;
+ const target = event.target;
+ if (!target) return false;
+ const isItem = items.some((item) => item.element === target);
+ return isItem;
+}
+function T7VMP3TM_getEnabledItems(items) {
+ return items.filter((item) => !item.disabled);
+}
+function itemTextStartsWith(item, text) {
+ var _a;
+ const itemText = ((_a = item.element) == null ? void 0 : _a.textContent) || item.children || // The composite item object itself doesn't include a value property, but
+ // other components like Select do. Since CompositeTypeahead is a generic
+ // component that can be used with those as well, we also consider the value
+ // property as a fallback for the typeahead text content.
+ "value" in item && item.value;
+ if (!itemText) return false;
+ return normalizeString(itemText).trim().toLowerCase().startsWith(text.toLowerCase());
+}
+function getSameInitialItems(items, char, activeId) {
+ if (!activeId) return items;
+ const activeItem = items.find((item) => item.id === activeId);
+ if (!activeItem) return items;
+ if (!itemTextStartsWith(activeItem, char)) return items;
+ if (chars !== char && itemTextStartsWith(activeItem, chars)) return items;
+ chars = char;
+ return _5VQZOHHZ_flipItems(
+ items.filter((item) => itemTextStartsWith(item, chars)),
+ activeId
+ ).filter((item) => item.id !== activeId);
+}
+var useCompositeTypeahead = createHook(function useCompositeTypeahead2(_a) {
+ var _b = _a, { store, typeahead = true } = _b, props = __objRest(_b, ["store", "typeahead"]);
+ const context = useCompositeContext();
+ store = store || context;
+ invariant(
+ store,
+ false && 0
+ );
+ const onKeyDownCaptureProp = props.onKeyDownCapture;
+ const cleanupTimeoutRef = (0,external_React_.useRef)(0);
+ const onKeyDownCapture = useEvent((event) => {
+ onKeyDownCaptureProp == null ? void 0 : onKeyDownCaptureProp(event);
+ if (event.defaultPrevented) return;
+ if (!typeahead) return;
+ if (!store) return;
+ if (!isValidTypeaheadEvent(event)) {
+ return clearChars();
+ }
+ const { renderedItems, items, activeId, id } = store.getState();
+ let enabledItems = T7VMP3TM_getEnabledItems(
+ items.length > renderedItems.length ? items : renderedItems
+ );
+ const document = getDocument(event.currentTarget);
+ const selector = `[data-offscreen-id="${id}"]`;
+ const offscreenItems = document.querySelectorAll(selector);
+ for (const element of offscreenItems) {
+ const disabled = element.ariaDisabled === "true" || "disabled" in element && !!element.disabled;
+ enabledItems.push({ id: element.id, element, disabled });
+ }
+ if (offscreenItems.length) {
+ enabledItems = sortBasedOnDOMPosition(enabledItems, (i) => i.element);
+ }
+ if (!isSelfTargetOrItem(event, enabledItems)) return clearChars();
+ event.preventDefault();
+ window.clearTimeout(cleanupTimeoutRef.current);
+ cleanupTimeoutRef.current = window.setTimeout(() => {
+ chars = "";
+ }, 500);
+ const char = event.key.toLowerCase();
+ chars += char;
+ enabledItems = getSameInitialItems(enabledItems, char, activeId);
+ const item = enabledItems.find((item2) => itemTextStartsWith(item2, chars));
+ if (item) {
+ store.move(item.id);
+ } else {
+ clearChars();
+ }
+ });
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), {
+ onKeyDownCapture
+ });
+ return removeUndefinedValues(props);
+});
+var T7VMP3TM_CompositeTypeahead = forwardRef2(function CompositeTypeahead2(props) {
+ const htmlProps = useCompositeTypeahead(props);
+ return LMDWO4NN_createElement(T7VMP3TM_TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@wordpress/components/build-module/composite/typeahead.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+const CompositeTypeahead = (0,external_wp_element_namespaceObject.forwardRef)(function CompositeTypeahead(props, ref) {
+ var _props$store;
+ const context = context_useCompositeContext();
+
+ // @ts-expect-error The store prop is undocumented and only used by the
+ // legacy compat layer. The `store` prop is documented, but its type is
+ // obfuscated to discourage its use outside of the component's internals.
+ const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store;
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(T7VMP3TM_CompositeTypeahead, {
+ store: store,
+ ...props,
+ ref: ref
+ });
+});
+
+;// ./node_modules/@wordpress/components/build-module/composite/index.js
+/**
+ * Composite is a component that may contain navigable items represented by
+ * Composite.Item. It's inspired by the WAI-ARIA Composite Role and implements
+ * all the keyboard navigation mechanisms to ensure that there's only one
+ * tab stop for the whole Composite element. This means that it can behave as
+ * a roving tabindex or aria-activedescendant container.
+ *
+ * @see https://ariakit.org/components/composite
+ */
+
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+
+
+
+
+/**
+ * Renders a widget based on the WAI-ARIA [`composite`](https://w3c.github.io/aria/#composite)
+ * role, which provides a single tab stop on the page and arrow key navigation
+ * through the focusable descendants.
+ *
+ * @example
+ * ```jsx
+ * import { Composite } from '@wordpress/components';
+ *
+ * <Composite>
+ * <Composite.Item>Item 1</Composite.Item>
+ * <Composite.Item>Item 2</Composite.Item>
+ * </Composite>
+ * ```
+ */
+const Composite = Object.assign((0,external_wp_element_namespaceObject.forwardRef)(function Composite({
+ // Composite store props
+ activeId,
+ defaultActiveId,
+ setActiveId,
+ focusLoop = false,
+ focusWrap = false,
+ focusShift = false,
+ virtualFocus = false,
+ orientation = 'both',
+ rtl = (0,external_wp_i18n_namespaceObject.isRTL)(),
+ // Composite component props
+ children,
+ disabled = false,
+ // Rest props
+ ...props
+}, ref) {
+ // @ts-expect-error The store prop is undocumented and only used by the
+ // legacy compat layer.
+ const storeProp = props.store;
+ const internalStore = useCompositeStore({
+ activeId,
+ defaultActiveId,
+ setActiveId,
+ focusLoop,
+ focusWrap,
+ focusShift,
+ virtualFocus,
+ orientation,
+ rtl
+ });
+ const store = storeProp !== null && storeProp !== void 0 ? storeProp : internalStore;
+ const contextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
+ store
+ }), [store]);
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ITI7HKP4_Composite, {
+ disabled: disabled,
+ store: store,
+ ...props,
+ ref: ref,
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CompositeContext.Provider, {
+ value: contextValue,
+ children: children
+ })
+ });
+}), {
+ /**
+ * Renders a group element for composite items.
+ *
+ * @example
+ * ```jsx
+ * import { Composite } from '@wordpress/components';
+ *
+ * <Composite>
+ * <Composite.Group>
+ * <Composite.GroupLabel>Label</Composite.GroupLabel>
+ * <Composite.Item>Item 1</Composite.Item>
+ * <Composite.Item>Item 2</Composite.Item>
+ * </CompositeGroup>
+ * </Composite>
+ * ```
+ */
+ Group: Object.assign(CompositeGroup, {
+ displayName: 'Composite.Group'
+ }),
+ /**
+ * Renders a label in a composite group. This component must be wrapped with
+ * `Composite.Group` so the `aria-labelledby` prop is properly set on the
+ * composite group element.
+ *
+ * @example
+ * ```jsx
+ * import { Composite } from '@wordpress/components';
+ *
+ * <Composite>
+ * <Composite.Group>
+ * <Composite.GroupLabel>Label</Composite.GroupLabel>
+ * <Composite.Item>Item 1</Composite.Item>
+ * <Composite.Item>Item 2</Composite.Item>
+ * </CompositeGroup>
+ * </Composite>
+ * ```
+ */
+ GroupLabel: Object.assign(CompositeGroupLabel, {
+ displayName: 'Composite.GroupLabel'
+ }),
+ /**
+ * Renders a composite item.
+ *
+ * @example
+ * ```jsx
+ * import { Composite } from '@wordpress/components';
+ *
+ * <Composite>
+ * <Composite.Item>Item 1</Composite.Item>
+ * <Composite.Item>Item 2</Composite.Item>
+ * <Composite.Item>Item 3</Composite.Item>
+ * </Composite>
+ * ```
+ */
+ Item: Object.assign(CompositeItem, {
+ displayName: 'Composite.Item'
+ }),
+ /**
+ * Renders a composite row. Wrapping `Composite.Item` elements within
+ * `Composite.Row` will create a two-dimensional composite widget, such as a
+ * grid.
+ *
+ * @example
+ * ```jsx
+ * import { Composite } from '@wordpress/components';
+ *
+ * <Composite>
+ * <Composite.Row>
+ * <Composite.Item>Item 1.1</Composite.Item>
+ * <Composite.Item>Item 1.2</Composite.Item>
+ * <Composite.Item>Item 1.3</Composite.Item>
+ * </Composite.Row>
+ * <Composite.Row>
+ * <Composite.Item>Item 2.1</Composite.Item>
+ * <Composite.Item>Item 2.2</Composite.Item>
+ * <Composite.Item>Item 2.3</Composite.Item>
+ * </Composite.Row>
+ * </Composite>
+ * ```
+ */
+ Row: Object.assign(CompositeRow, {
+ displayName: 'Composite.Row'
+ }),
+ /**
+ * Renders an element in a composite widget that receives focus on mouse move
+ * and loses focus to the composite base element on mouse leave. This should
+ * be combined with the `Composite.Item` component.
+ *
+ * @example
+ * ```jsx
+ * import { Composite } from '@wordpress/components';
+ *
+ * <Composite>
+ * <Composite.Hover render={ <Composite.Item /> }>
+ * Item 1
+ * </Composite.Hover>
+ * <Composite.Hover render={ <Composite.Item /> }>
+ * Item 2
+ * </Composite.Hover>
+ * </Composite>
+ * ```
+ */
+ Hover: Object.assign(CompositeHover, {
+ displayName: 'Composite.Hover'
+ }),
+ /**
+ * Renders a component that adds typeahead functionality to composite
+ * components. Hitting printable character keys will move focus to the next
+ * composite item that begins with the input characters.
+ *
+ * @example
+ * ```jsx
+ * import { Composite } from '@wordpress/components';
+ *
+ * <Composite render={ <CompositeTypeahead /> }>
+ * <Composite.Item>Item 1</Composite.Item>
+ * <Composite.Item>Item 2</Composite.Item>
+ * </Composite>
+ * ```
+ */
+ Typeahead: Object.assign(CompositeTypeahead, {
+ displayName: 'Composite.Typeahead'
+ }),
+ /**
+ * The React context used by the composite components. It can be used by
+ * to access the composite store, and to forward the context when composite
+ * sub-components are rendered across portals (ie. `SlotFill` components)
+ * that would not otherwise forward the context to the `Fill` children.
+ *
+ * @example
+ * ```jsx
+ * import { Composite } from '@wordpress/components';
+ * import { useContext } from '@wordpress/element';
+ *
+ * const compositeContext = useContext( Composite.Context );
+ * ```
+ */
+ Context: Object.assign(CompositeContext, {
+ displayName: 'Composite.Context'
+ })
+});
+
+;// ./node_modules/@ariakit/core/esm/__chunks/RCQ5P4YE.js
"use client";
@@ -4569,16 +5960,14 @@
setup(
disclosure,
() => sync(disclosure, ["animated", "animating"], (state) => {
- if (state.animated)
- return;
+ if (state.animated) return;
disclosure.setState("animating", false);
})
);
setup(
disclosure,
() => subscribe(disclosure, ["open"], () => {
- if (!disclosure.getState().animated)
- return;
+ if (!disclosure.getState().animated) return;
disclosure.setState("animating", true);
})
);
@@ -4588,7 +5977,8 @@
disclosure.setState("mounted", state.open || state.animating);
})
);
- return _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, disclosure), {
+ return _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, disclosure), {
+ disclosure: props.disclosure,
setOpen: (value) => disclosure.setState("open", value),
show: () => disclosure.setState("open", true),
hide: () => disclosure.setState("open", false),
@@ -4601,7 +5991,7 @@
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/SFCBA2JZ.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/WYCIER3C.js
"use client";
@@ -4613,16 +6003,16 @@
useStoreProps(store, props, "open", "setOpen");
useStoreProps(store, props, "mounted", "setMounted");
useStoreProps(store, props, "animated");
- return store;
+ return Object.assign(store, { disclosure: props.disclosure });
}
function useDisclosureStore(props = {}) {
- const [store, update] = EKQEJRUF_useStore(createDisclosureStore, props);
+ const [store, update] = YV4JVR4I_useStore(createDisclosureStore, props);
return useDisclosureStoreProps(store, update, props);
}
-;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/SX2XFD6A.js
+;// ./node_modules/@ariakit/core/esm/__chunks/FZZ2AVHF.js
"use client";
@@ -4633,7 +6023,7 @@
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/ZSELSBRM.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/BM6PGYQY.js
"use client";
@@ -4644,13 +6034,13 @@
return useDisclosureStoreProps(store, update, props);
}
function useDialogStore(props = {}) {
- const [store, update] = EKQEJRUF_useStore(createDialogStore, props);
+ const [store, update] = YV4JVR4I_useStore(createDialogStore, props);
return useDialogStoreProps(store, update, props);
}
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/MG4P3223.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/O2PQ2652.js
"use client";
@@ -4660,9 +6050,8 @@
function usePopoverStoreProps(store, update, props) {
useUpdateEffect(update, [props.popover]);
- store = useDialogStoreProps(store, update, props);
useStoreProps(store, props, "placement");
- return store;
+ return useDialogStoreProps(store, update, props);
}
function usePopoverStore(props = {}) {
const [store, update] = useStore(Core.createPopoverStore, props);
@@ -4671,7 +6060,7 @@
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/ZU7LQC5V.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/FTXTWCCT.js
"use client";
@@ -4679,11 +6068,10 @@
// src/hovercard/hovercard-store.ts
function useHovercardStoreProps(store, update, props) {
- store = usePopoverStoreProps(store, update, props);
useStoreProps(store, props, "timeout");
useStoreProps(store, props, "showTimeout");
useStoreProps(store, props, "hideTimeout");
- return store;
+ return usePopoverStoreProps(store, update, props);
}
function useHovercardStore(props = {}) {
const [store, update] = useStore(Core.createHovercardStore, props);
@@ -4692,7 +6080,7 @@
-;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/AF6IUUFN.js
+;// ./node_modules/@ariakit/core/esm/__chunks/ME2CUF3F.js
"use client";
@@ -4703,7 +6091,7 @@
function createPopoverStore(_a = {}) {
var _b = _a, {
popover: otherPopover
- } = _b, props = _4R3V3JGP_objRest(_b, [
+ } = _b, props = _3YLGPPWQ_objRest(_b, [
"popover"
]);
const store = mergeStore(
@@ -4718,13 +6106,13 @@
);
throwOnConflictingProps(props, store);
const syncState = store == null ? void 0 : store.getState();
- const dialog = createDialogStore(_chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, props), { store }));
+ const dialog = createDialogStore(_chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, props), { store }));
const placement = defaultValue(
props.placement,
syncState == null ? void 0 : syncState.placement,
"bottom"
);
- const initialState = _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, dialog.getState()), {
+ const initialState = _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, dialog.getState()), {
placement,
currentPlacement: placement,
anchorElement: defaultValue(syncState == null ? void 0 : syncState.anchorElement, null),
@@ -4733,7 +6121,7 @@
rendered: Symbol("rendered")
});
const popover = createStore(initialState, dialog, store);
- return _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues(_chunks_4R3V3JGP_spreadValues({}, dialog), popover), {
+ return _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues(_chunks_3YLGPPWQ_spreadValues({}, dialog), popover), {
setAnchorElement: (element) => popover.setState("anchorElement", element),
setPopoverElement: (element) => popover.setState("popoverElement", element),
setArrowElement: (element) => popover.setState("arrowElement", element),
@@ -4743,7 +6131,7 @@
-;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/SOLWE6E5.js
+;// ./node_modules/@ariakit/core/esm/__chunks/JTLIIJ4U.js
"use client";
@@ -4754,7 +6142,7 @@
function createHovercardStore(props = {}) {
var _a;
const syncState = (_a = props.store) == null ? void 0 : _a.getState();
- const popover = createPopoverStore(_chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, props), {
+ const popover = createPopoverStore(_chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, props), {
placement: defaultValue(
props.placement,
syncState == null ? void 0 : syncState.placement,
@@ -4762,21 +6150,21 @@
)
}));
const timeout = defaultValue(props.timeout, syncState == null ? void 0 : syncState.timeout, 500);
- const initialState = _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, popover.getState()), {
+ const initialState = _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, popover.getState()), {
timeout,
showTimeout: defaultValue(props.showTimeout, syncState == null ? void 0 : syncState.showTimeout),
hideTimeout: defaultValue(props.hideTimeout, syncState == null ? void 0 : syncState.hideTimeout),
autoFocusOnShow: defaultValue(syncState == null ? void 0 : syncState.autoFocusOnShow, false)
});
const hovercard = createStore(initialState, popover, props.store);
- return _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues(_chunks_4R3V3JGP_spreadValues({}, popover), hovercard), {
+ return _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues(_chunks_3YLGPPWQ_spreadValues({}, popover), hovercard), {
setAutoFocusOnShow: (value) => hovercard.setState("autoFocusOnShow", value)
});
}
-;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/tooltip/tooltip-store.js
+;// ./node_modules/@ariakit/core/esm/tooltip/tooltip-store.js
"use client";
@@ -4789,8 +6177,9 @@
// src/tooltip/tooltip-store.ts
function createTooltipStore(props = {}) {
var _a;
+ if (false) {}
const syncState = (_a = props.store) == null ? void 0 : _a.getState();
- const hovercard = createHovercardStore(_chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, props), {
+ const hovercard = createHovercardStore(_chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, props), {
placement: defaultValue(
props.placement,
syncState == null ? void 0 : syncState.placement,
@@ -4798,16 +6187,16 @@
),
hideTimeout: defaultValue(props.hideTimeout, syncState == null ? void 0 : syncState.hideTimeout, 0)
}));
- const initialState = _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, hovercard.getState()), {
+ const initialState = _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, hovercard.getState()), {
type: defaultValue(props.type, syncState == null ? void 0 : syncState.type, "description"),
skipTimeout: defaultValue(props.skipTimeout, syncState == null ? void 0 : syncState.skipTimeout, 300)
});
const tooltip = createStore(initialState, hovercard, props.store);
- return _chunks_4R3V3JGP_spreadValues(_chunks_4R3V3JGP_spreadValues({}, hovercard), tooltip);
-}
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/2QMN5E6B.js
+ return _chunks_3YLGPPWQ_spreadValues(_chunks_3YLGPPWQ_spreadValues({}, hovercard), tooltip);
+}
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/YTDK2NGG.js
"use client";
@@ -4815,24 +6204,24 @@
// src/tooltip/tooltip-store.ts
function useTooltipStoreProps(store, update, props) {
- store = useHovercardStoreProps(store, update, props);
useStoreProps(store, props, "type");
useStoreProps(store, props, "skipTimeout");
- return store;
+ return useHovercardStoreProps(store, update, props);
}
function useTooltipStore(props = {}) {
- const [store, update] = EKQEJRUF_useStore(createTooltipStore, props);
+ const [store, update] = YV4JVR4I_useStore(createTooltipStore, props);
return useTooltipStoreProps(store, update, props);
}
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/FSFPRQFR.js
-"use client";
-
-
-// src/role/role.ts
-var FSFPRQFR_elements = [
+;// ./node_modules/@ariakit/react-core/esm/__chunks/XL7CSKGW.js
+"use client";
+
+
+// src/role/role.tsx
+var XL7CSKGW_TagName = "div";
+var XL7CSKGW_elements = [
"a",
"button",
"details",
@@ -4856,22 +6245,27 @@
"section",
"select",
"span",
+ "summary",
"textarea",
"ul",
"svg"
];
-var FSFPRQFR_useRole = createHook((props) => {
- return props;
-});
-var Role = createComponent((props) => {
- return _3ORBWXWF_createElement("div", props);
-});
-if (false) {}
+var useRole = createHook(
+ function useRole2(props) {
+ return props;
+ }
+);
+var Role = forwardRef2(
+ // @ts-expect-error
+ function Role2(props) {
+ return LMDWO4NN_createElement(XL7CSKGW_TagName, props);
+ }
+);
Object.assign(
Role,
- FSFPRQFR_elements.reduce((acc, element) => {
- acc[element] = createComponent((props) => {
- return _3ORBWXWF_createElement(element, props);
+ XL7CSKGW_elements.reduce((acc, element) => {
+ acc[element] = forwardRef2(function Role3(props) {
+ return LMDWO4NN_createElement(element, props);
});
return acc;
}, {})
@@ -4879,91 +6273,92 @@
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/OAYFXAQ2.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/S6EF7IVO.js
"use client";
// src/disclosure/disclosure-context.tsx
-var OAYFXAQ2_ctx = createStoreContext();
-var useDisclosureContext = OAYFXAQ2_ctx.useContext;
-var useDisclosureScopedContext = OAYFXAQ2_ctx.useScopedContext;
-var useDisclosureProviderContext = OAYFXAQ2_ctx.useProviderContext;
-var DisclosureContextProvider = OAYFXAQ2_ctx.ContextProvider;
-var DisclosureScopedContextProvider = OAYFXAQ2_ctx.ScopedContextProvider;
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/G6BJYYBK.js
+var S6EF7IVO_ctx = createStoreContext();
+var useDisclosureContext = S6EF7IVO_ctx.useContext;
+var useDisclosureScopedContext = S6EF7IVO_ctx.useScopedContext;
+var useDisclosureProviderContext = S6EF7IVO_ctx.useProviderContext;
+var DisclosureContextProvider = S6EF7IVO_ctx.ContextProvider;
+var DisclosureScopedContextProvider = S6EF7IVO_ctx.ScopedContextProvider;
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/RS7LB2H4.js
"use client";
// src/dialog/dialog-context.tsx
-var G6BJYYBK_ctx = createStoreContext(
+var RS7LB2H4_ctx = createStoreContext(
[DisclosureContextProvider],
[DisclosureScopedContextProvider]
);
-var useDialogContext = G6BJYYBK_ctx.useContext;
-var useDialogScopedContext = G6BJYYBK_ctx.useScopedContext;
-var useDialogProviderContext = G6BJYYBK_ctx.useProviderContext;
-var DialogContextProvider = G6BJYYBK_ctx.ContextProvider;
-var DialogScopedContextProvider = G6BJYYBK_ctx.ScopedContextProvider;
+var useDialogContext = RS7LB2H4_ctx.useContext;
+var useDialogScopedContext = RS7LB2H4_ctx.useScopedContext;
+var useDialogProviderContext = RS7LB2H4_ctx.useProviderContext;
+var DialogContextProvider = RS7LB2H4_ctx.ContextProvider;
+var DialogScopedContextProvider = RS7LB2H4_ctx.ScopedContextProvider;
var DialogHeadingContext = (0,external_React_.createContext)(void 0);
var DialogDescriptionContext = (0,external_React_.createContext)(void 0);
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/7H5KSHHF.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/MTZPJQMC.js
"use client";
// src/popover/popover-context.tsx
-var _7H5KSHHF_ctx = createStoreContext(
+var MTZPJQMC_ctx = createStoreContext(
[DialogContextProvider],
[DialogScopedContextProvider]
);
-var usePopoverContext = _7H5KSHHF_ctx.useContext;
-var usePopoverScopedContext = _7H5KSHHF_ctx.useScopedContext;
-var usePopoverProviderContext = _7H5KSHHF_ctx.useProviderContext;
-var PopoverContextProvider = _7H5KSHHF_ctx.ContextProvider;
-var PopoverScopedContextProvider = _7H5KSHHF_ctx.ScopedContextProvider;
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/TI7CMBHW.js
+var usePopoverContext = MTZPJQMC_ctx.useContext;
+var usePopoverScopedContext = MTZPJQMC_ctx.useScopedContext;
+var usePopoverProviderContext = MTZPJQMC_ctx.useProviderContext;
+var PopoverContextProvider = MTZPJQMC_ctx.ContextProvider;
+var PopoverScopedContextProvider = MTZPJQMC_ctx.ScopedContextProvider;
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/EM5CXX6A.js
"use client";
// src/hovercard/hovercard-context.tsx
-var TI7CMBHW_ctx = createStoreContext(
+var EM5CXX6A_ctx = createStoreContext(
[PopoverContextProvider],
[PopoverScopedContextProvider]
);
-var useHovercardContext = TI7CMBHW_ctx.useContext;
-var useHovercardScopedContext = TI7CMBHW_ctx.useScopedContext;
-var useHovercardProviderContext = TI7CMBHW_ctx.useProviderContext;
-var HovercardContextProvider = TI7CMBHW_ctx.ContextProvider;
-var HovercardScopedContextProvider = TI7CMBHW_ctx.ScopedContextProvider;
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/7X4DYKYU.js
-"use client";
-
-
-
-
-
-
-// src/hovercard/hovercard-anchor.ts
-
-
-
+var useHovercardContext = EM5CXX6A_ctx.useContext;
+var useHovercardScopedContext = EM5CXX6A_ctx.useScopedContext;
+var useHovercardProviderContext = EM5CXX6A_ctx.useProviderContext;
+var HovercardContextProvider = EM5CXX6A_ctx.ContextProvider;
+var HovercardScopedContextProvider = EM5CXX6A_ctx.ScopedContextProvider;
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/BYC7LY2E.js
+"use client";
+
+
+
+
+
+
+// src/hovercard/hovercard-anchor.tsx
+
+
+
+var BYC7LY2E_TagName = "a";
var useHovercardAnchor = createHook(
- (_a) => {
+ function useHovercardAnchor2(_a) {
var _b = _a, { store, showOnHover = true } = _b, props = __objRest(_b, ["store", "showOnHover"]);
const context = useHovercardProviderContext();
store = store || context;
@@ -4976,13 +6371,10 @@
(0,external_React_.useEffect)(() => () => window.clearTimeout(showTimeoutRef.current), []);
(0,external_React_.useEffect)(() => {
const onMouseLeave = (event) => {
- if (!store)
- return;
+ if (!store) return;
const { anchorElement } = store.getState();
- if (!anchorElement)
- return;
- if (event.target !== anchorElement)
- return;
+ if (!anchorElement) return;
+ if (event.target !== anchorElement) return;
window.clearTimeout(showTimeoutRef.current);
showTimeoutRef.current = 0;
};
@@ -4991,114 +6383,116 @@
const onMouseMoveProp = props.onMouseMove;
const showOnHoverProp = useBooleanEvent(showOnHover);
const isMouseMoving = useIsMouseMoving();
- const onMouseMove = useEvent(
- (event) => {
- onMouseMoveProp == null ? void 0 : onMouseMoveProp(event);
- if (disabled)
- return;
- if (!store)
- return;
- if (event.defaultPrevented)
- return;
- if (showTimeoutRef.current)
- return;
- if (!isMouseMoving())
- return;
- if (!showOnHoverProp(event))
- return;
- const element = event.currentTarget;
- store.setAnchorElement(element);
- store.setDisclosureElement(element);
- const { showTimeout, timeout } = store.getState();
- const showHovercard = () => {
- showTimeoutRef.current = 0;
- if (!isMouseMoving())
- return;
- store == null ? void 0 : store.setAnchorElement(element);
- store == null ? void 0 : store.show();
- queueMicrotask(() => {
- store == null ? void 0 : store.setDisclosureElement(element);
- });
- };
- const timeoutMs = showTimeout != null ? showTimeout : timeout;
- if (timeoutMs === 0) {
- showHovercard();
- } else {
- showTimeoutRef.current = window.setTimeout(showHovercard, timeoutMs);
- }
- }
- );
+ const onMouseMove = useEvent((event) => {
+ onMouseMoveProp == null ? void 0 : onMouseMoveProp(event);
+ if (disabled) return;
+ if (!store) return;
+ if (event.defaultPrevented) return;
+ if (showTimeoutRef.current) return;
+ if (!isMouseMoving()) return;
+ if (!showOnHoverProp(event)) return;
+ const element = event.currentTarget;
+ store.setAnchorElement(element);
+ store.setDisclosureElement(element);
+ const { showTimeout, timeout } = store.getState();
+ const showHovercard = () => {
+ showTimeoutRef.current = 0;
+ if (!isMouseMoving()) return;
+ store == null ? void 0 : store.setAnchorElement(element);
+ store == null ? void 0 : store.show();
+ queueMicrotask(() => {
+ store == null ? void 0 : store.setDisclosureElement(element);
+ });
+ };
+ const timeoutMs = showTimeout != null ? showTimeout : timeout;
+ if (timeoutMs === 0) {
+ showHovercard();
+ } else {
+ showTimeoutRef.current = window.setTimeout(showHovercard, timeoutMs);
+ }
+ });
+ const onClickProp = props.onClick;
+ const onClick = useEvent((event) => {
+ onClickProp == null ? void 0 : onClickProp(event);
+ if (!store) return;
+ window.clearTimeout(showTimeoutRef.current);
+ showTimeoutRef.current = 0;
+ });
const ref = (0,external_React_.useCallback)(
(element) => {
- if (!store)
- return;
+ if (!store) return;
const { anchorElement } = store.getState();
- if (anchorElement == null ? void 0 : anchorElement.isConnected)
- return;
+ if (anchorElement == null ? void 0 : anchorElement.isConnected) return;
store.setAnchorElement(element);
},
[store]
);
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), {
ref: useMergeRefs(ref, props.ref),
- onMouseMove
+ onMouseMove,
+ onClick
});
props = useFocusable(props);
return props;
}
);
-var HovercardAnchor = createComponent(
- (props) => {
- const htmlProps = useHovercardAnchor(props);
- return _3ORBWXWF_createElement("a", htmlProps);
- }
-);
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/MNFF5YOJ.js
+var HovercardAnchor = forwardRef2(function HovercardAnchor2(props) {
+ const htmlProps = useHovercardAnchor(props);
+ return LMDWO4NN_createElement(BYC7LY2E_TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/F4IYJ42G.js
"use client";
// src/tooltip/tooltip-context.tsx
-var MNFF5YOJ_ctx = createStoreContext(
+var F4IYJ42G_ctx = createStoreContext(
[HovercardContextProvider],
[HovercardScopedContextProvider]
);
-var useTooltipContext = MNFF5YOJ_ctx.useContext;
-var useTooltipScopedContext = MNFF5YOJ_ctx.useScopedContext;
-var useTooltipProviderContext = MNFF5YOJ_ctx.useProviderContext;
-var TooltipContextProvider = MNFF5YOJ_ctx.ContextProvider;
-var TooltipScopedContextProvider = MNFF5YOJ_ctx.ScopedContextProvider;
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/tooltip/tooltip-anchor.js
-"use client";
-
-
-
-
-
-
-
-
-
-
-
-
-
-// src/tooltip/tooltip-anchor.ts
-
-
-
+var useTooltipContext = F4IYJ42G_ctx.useContext;
+var useTooltipScopedContext = F4IYJ42G_ctx.useScopedContext;
+var useTooltipProviderContext = F4IYJ42G_ctx.useProviderContext;
+var TooltipContextProvider = F4IYJ42G_ctx.ContextProvider;
+var TooltipScopedContextProvider = F4IYJ42G_ctx.ScopedContextProvider;
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/tooltip/tooltip-anchor.js
+"use client";
+
+
+
+
+
+
+
+
+
+
+
+
+
+// src/tooltip/tooltip-anchor.tsx
+
+
+
+var tooltip_anchor_TagName = "div";
var globalStore = createStore({
activeStore: null
});
+function createRemoveStoreCallback(store) {
+ return () => {
+ const { activeStore } = globalStore.getState();
+ if (activeStore !== store) return;
+ globalStore.setState("activeStore", null);
+ };
+}
var useTooltipAnchor = createHook(
- (_a) => {
+ function useTooltipAnchor2(_a) {
var _b = _a, { store, showOnHover = true } = _b, props = __objRest(_b, ["store", "showOnHover"]);
const context = useTooltipProviderContext();
store = store || context;
@@ -5109,30 +6503,33 @@
const canShowOnHoverRef = (0,external_React_.useRef)(false);
(0,external_React_.useEffect)(() => {
return sync(store, ["mounted"], (state) => {
- if (state.mounted)
- return;
+ if (state.mounted) return;
canShowOnHoverRef.current = false;
});
}, [store]);
(0,external_React_.useEffect)(() => {
- return sync(store, ["mounted", "skipTimeout"], (state) => {
- if (!store)
- return;
- if (state.mounted) {
- const { activeStore } = globalStore.getState();
- if (activeStore !== store) {
- activeStore == null ? void 0 : activeStore.hide();
+ if (!store) return;
+ return chain(
+ // Immediately remove the current store from the global store when
+ // the component unmounts. This is useful, for example, to avoid
+ // showing tooltips immediately on serial tests.
+ createRemoveStoreCallback(store),
+ sync(store, ["mounted", "skipTimeout"], (state) => {
+ if (!store) return;
+ if (state.mounted) {
+ const { activeStore } = globalStore.getState();
+ if (activeStore !== store) {
+ activeStore == null ? void 0 : activeStore.hide();
+ }
+ return globalStore.setState("activeStore", store);
}
- return globalStore.setState("activeStore", store);
- }
- const id = setTimeout(() => {
- const { activeStore } = globalStore.getState();
- if (activeStore !== store)
- return;
- globalStore.setState("activeStore", null);
- }, state.skipTimeout);
- return () => clearTimeout(id);
- });
+ const id = setTimeout(
+ createRemoveStoreCallback(store),
+ state.skipTimeout
+ );
+ return () => clearTimeout(id);
+ })
+ );
}, [store]);
const onMouseEnterProp = props.onMouseEnter;
const onMouseEnter = useEvent((event) => {
@@ -5142,17 +6539,16 @@
const onFocusVisibleProp = props.onFocusVisible;
const onFocusVisible = useEvent((event) => {
onFocusVisibleProp == null ? void 0 : onFocusVisibleProp(event);
- if (event.defaultPrevented)
- return;
+ if (event.defaultPrevented) return;
store == null ? void 0 : store.setAnchorElement(event.currentTarget);
store == null ? void 0 : store.show();
});
const onBlurProp = props.onBlur;
const onBlur = useEvent((event) => {
onBlurProp == null ? void 0 : onBlurProp(event);
- if (event.defaultPrevented)
- return;
+ if (event.defaultPrevented) return;
const { activeStore } = globalStore.getState();
+ canShowOnHoverRef.current = false;
if (activeStore === store) {
globalStore.setState("activeStore", null);
}
@@ -5162,24 +6558,20 @@
var _a2;
return (_a2 = state.contentElement) == null ? void 0 : _a2.id;
});
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
- "aria-labelledby": type === "label" ? contentId : void 0,
- "aria-describedby": type === "description" ? contentId : void 0
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
+ "aria-labelledby": type === "label" ? contentId : void 0
}, props), {
onMouseEnter,
onFocusVisible,
onBlur
});
- props = useHovercardAnchor(_4R3V3JGP_spreadValues({
+ props = useHovercardAnchor(_3YLGPPWQ_spreadValues({
store,
- showOnHover: (event) => {
- if (!canShowOnHoverRef.current)
- return false;
- if (isFalsyBooleanCallback(showOnHover, event))
- return false;
+ showOnHover(event) {
+ if (!canShowOnHoverRef.current) return false;
+ if (isFalsyBooleanCallback(showOnHover, event)) return false;
const { activeStore } = globalStore.getState();
- if (!activeStore)
- return true;
+ if (!activeStore) return true;
store == null ? void 0 : store.show();
return false;
}
@@ -5187,14 +6579,13 @@
return props;
}
);
-var TooltipAnchor = createComponent((props) => {
+var TooltipAnchor = forwardRef2(function TooltipAnchor2(props) {
const htmlProps = useTooltipAnchor(props);
- return _3ORBWXWF_createElement("div", htmlProps);
-});
-if (false) {}
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/YMV43K4F.js
+ return LMDWO4NN_createElement(tooltip_anchor_TagName, htmlProps);
+});
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/X7QOZUD3.js
"use client";
// src/hovercard/utils/polygon.ts
@@ -5212,8 +6603,7 @@
const where = (yi - yj) * (x - xi) - (xi - xj) * (y - yi);
if (yj < yi) {
if (y >= yj && y < yi) {
- if (where === 0)
- return true;
+ if (where === 0) return true;
if (where > 0) {
if (y === yj) {
if (y > vy) {
@@ -5226,8 +6616,7 @@
}
} else if (yi < yj) {
if (y > yi && y <= yj) {
- if (where === 0)
- return true;
+ if (where === 0) return true;
if (where < 0) {
if (y === yj) {
if (y < vy) {
@@ -5238,7 +6627,7 @@
}
}
}
- } else if (y == yi && (x >= xj && x <= xi || x >= xi && x <= xj)) {
+ } else if (y === yi && (x >= xj && x <= xi || x >= xi && x <= xj)) {
return true;
}
}
@@ -5281,28 +6670,23 @@
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/MKDDWKFK.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/63XF7ACK.js
"use client";
// src/dialog/utils/is-backdrop.ts
-function MKDDWKFK_isBackdrop(element, ...ids) {
- if (!element)
- return false;
+function _63XF7ACK_isBackdrop(element, ...ids) {
+ if (!element) return false;
const backdrop = element.getAttribute("data-backdrop");
- if (backdrop == null)
- return false;
- if (backdrop === "")
- return true;
- if (backdrop === "true")
- return true;
- if (!ids.length)
- return true;
+ if (backdrop == null) return false;
+ if (backdrop === "") return true;
+ if (backdrop === "true") return true;
+ if (!ids.length) return true;
return ids.some((id) => backdrop === id);
}
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/X6WIMZJE.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/K2ZF5NU7.js
"use client";
// src/dialog/utils/orchestrate.ts
@@ -5330,8 +6714,7 @@
elementCleanups.set(key, nextCleanup);
return () => {
const isCurrent = elementCleanups.get(key) === nextCleanup;
- if (!isCurrent)
- return;
+ if (!isCurrent) return;
cleanup();
elementCleanups.set(key, prevCleanup);
};
@@ -5366,9 +6749,8 @@
return orchestrate(element, property, setup);
}
function assignStyle(element, style) {
- if (!element)
- return () => {
- };
+ if (!element) return () => {
+ };
const setup = () => {
const prevStyle = element.style.cssText;
Object.assign(element.style, style);
@@ -5379,9 +6761,8 @@
return orchestrate(element, "style", setup);
}
function setCSSProperty(element, property, value) {
- if (!element)
- return () => {
- };
+ if (!element) return () => {
+ };
const setup = () => {
const previousValue = element.style.getPropertyValue(property);
element.style.setProperty(property, value);
@@ -5398,7 +6779,7 @@
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/72E5EPFF.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/AOUGVQZ3.js
"use client";
@@ -5410,41 +6791,32 @@
return `__ariakit-dialog-snapshot-${id}`;
}
function inSnapshot(id, element) {
- const doc = DLOEKDPY_getDocument(element);
+ const doc = getDocument(element);
const propertyName = getSnapshotPropertyName(id);
- if (!doc.body[propertyName])
- return true;
+ if (!doc.body[propertyName]) return true;
do {
- if (element === doc.body)
- return false;
- if (!!element[propertyName])
- return true;
- if (!element.parentElement)
- return false;
+ if (element === doc.body) return false;
+ if (element[propertyName]) return true;
+ if (!element.parentElement) return false;
element = element.parentElement;
} while (true);
}
function isValidElement(id, element, ignoredElements) {
- if (ignoreTags.includes(element.tagName))
- return false;
- if (!inSnapshot(id, element))
- return false;
+ if (ignoreTags.includes(element.tagName)) return false;
+ if (!inSnapshot(id, element)) return false;
return !ignoredElements.some(
(enabledElement) => enabledElement && contains(element, enabledElement)
);
}
-function _72E5EPFF_walkTreeOutside(id, elements, callback, ancestorCallback) {
+function AOUGVQZ3_walkTreeOutside(id, elements, callback, ancestorCallback) {
for (let element of elements) {
- if (!(element == null ? void 0 : element.isConnected))
- continue;
+ if (!(element == null ? void 0 : element.isConnected)) continue;
const hasAncestorAlready = elements.some((maybeAncestor) => {
- if (!maybeAncestor)
- return false;
- if (maybeAncestor === element)
- return false;
+ if (!maybeAncestor) return false;
+ if (maybeAncestor === element) return false;
return maybeAncestor.contains(element);
});
- const doc = DLOEKDPY_getDocument(element);
+ const doc = getDocument(element);
const originalElement = element;
while (element.parentElement && element !== doc.body) {
ancestorCallback == null ? void 0 : ancestorCallback(element.parentElement, originalElement);
@@ -5460,21 +6832,22 @@
}
}
function createWalkTreeSnapshot(id, elements) {
- const { body } = DLOEKDPY_getDocument(elements[0]);
+ const { body } = getDocument(elements[0]);
const cleanups = [];
const markElement = (element) => {
cleanups.push(setProperty(element, getSnapshotPropertyName(id), true));
};
- _72E5EPFF_walkTreeOutside(id, elements, markElement);
- return chain(
- setProperty(body, getSnapshotPropertyName(id), true),
- () => cleanups.forEach((fn) => fn())
- );
-}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/TL67WVI6.js
+ AOUGVQZ3_walkTreeOutside(id, elements, markElement);
+ return chain(setProperty(body, getSnapshotPropertyName(id), true), () => {
+ for (const cleanup of cleanups) {
+ cleanup();
+ }
+ });
+}
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/2PGBN2Y4.js
"use client";
@@ -5499,44 +6872,43 @@
}
function isElementMarked(element, id) {
const ancestorProperty = getPropertyName(id, true);
- if (element[ancestorProperty])
- return true;
+ if (element[ancestorProperty]) return true;
const elementProperty = getPropertyName(id);
do {
- if (element[elementProperty])
- return true;
- if (!element.parentElement)
- return false;
+ if (element[elementProperty]) return true;
+ if (!element.parentElement) return false;
element = element.parentElement;
} while (true);
}
function markTreeOutside(id, elements) {
const cleanups = [];
const ids = elements.map((el) => el == null ? void 0 : el.id);
- _72E5EPFF_walkTreeOutside(
+ AOUGVQZ3_walkTreeOutside(
id,
elements,
(element) => {
- if (MKDDWKFK_isBackdrop(element, ...ids))
- return;
+ if (_63XF7ACK_isBackdrop(element, ...ids)) return;
cleanups.unshift(markElement(element, id));
},
(ancestor, element) => {
const isAnotherDialogAncestor = element.hasAttribute("data-dialog") && element.id !== id;
- if (isAnotherDialogAncestor)
- return;
+ if (isAnotherDialogAncestor) return;
cleanups.unshift(markAncestor(ancestor, id));
}
);
const restoreAccessibilityTree = () => {
- cleanups.forEach((fn) => fn());
+ for (const cleanup of cleanups) {
+ cleanup();
+ }
};
return restoreAccessibilityTree;
}
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/CLE7NTOY.js
+;// external "ReactDOM"
+const external_ReactDOM_namespaceObject = window["ReactDOM"];
+;// ./node_modules/@ariakit/react-core/esm/__chunks/VGCJ63VH.js
"use client";
@@ -5549,11 +6921,13 @@
+
+var VGCJ63VH_TagName = "div";
function afterTimeout(timeoutMs, cb) {
const timeoutId = setTimeout(cb, timeoutMs);
return () => clearTimeout(timeoutId);
}
-function CLE7NTOY_afterPaint(cb) {
+function VGCJ63VH_afterPaint(cb) {
let raf = requestAnimationFrame(() => {
raf = requestAnimationFrame(cb);
});
@@ -5561,116 +6935,155 @@
}
function parseCSSTime(...times) {
return times.join(", ").split(", ").reduce((longestTime, currentTimeString) => {
- const currentTime = parseFloat(currentTimeString || "0s") * 1e3;
- if (currentTime > longestTime)
- return currentTime;
+ const multiplier = currentTimeString.endsWith("ms") ? 1 : 1e3;
+ const currentTime = Number.parseFloat(currentTimeString || "0s") * multiplier;
+ if (currentTime > longestTime) return currentTime;
return longestTime;
}, 0);
}
function isHidden(mounted, hidden, alwaysVisible) {
return !alwaysVisible && hidden !== false && (!mounted || !!hidden);
}
-var useDisclosureContent = createHook(
- (_a) => {
- var _b = _a, { store, alwaysVisible } = _b, props = __objRest(_b, ["store", "alwaysVisible"]);
- const context = useDisclosureProviderContext();
- store = store || context;
- invariant(
- store,
- false && 0
- );
- const id = useId(props.id);
- const [transition, setTransition] = (0,external_React_.useState)(null);
- const open = store.useState("open");
- const mounted = store.useState("mounted");
- const animated = store.useState("animated");
- const contentElement = store.useState("contentElement");
- useSafeLayoutEffect(() => {
- if (!animated)
- return;
- if (!(contentElement == null ? void 0 : contentElement.isConnected)) {
- setTransition(null);
- return;
- }
- return CLE7NTOY_afterPaint(() => {
- setTransition(open ? "enter" : "leave");
- });
- }, [animated, contentElement, open]);
- useSafeLayoutEffect(() => {
- if (!store)
- return;
- if (!animated)
- return;
- if (!contentElement)
- return;
- if (!transition)
- return;
- if (transition === "enter" && !open)
- return;
- if (transition === "leave" && open)
- return;
- if (typeof animated === "number") {
- const timeoutMs2 = animated;
- return afterTimeout(timeoutMs2, store.stopAnimation);
- }
- const {
- transitionDuration,
- animationDuration,
- transitionDelay,
- animationDelay
- } = getComputedStyle(contentElement);
- const delay = parseCSSTime(transitionDelay, animationDelay);
- const duration = parseCSSTime(transitionDuration, animationDuration);
- const timeoutMs = delay + duration;
- if (!timeoutMs)
- return;
- return afterTimeout(timeoutMs, store.stopAnimation);
- }, [store, animated, contentElement, open, transition]);
- props = useWrapElement(
- props,
- (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(DialogScopedContextProvider, { value: store, children: element }),
- [store]
- );
- const hidden = isHidden(mounted, props.hidden, alwaysVisible);
- const style = hidden ? _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props.style), { display: "none" }) : props.style;
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
- id,
- "data-enter": transition === "enter" ? "" : void 0,
- "data-leave": transition === "leave" ? "" : void 0,
- hidden
- }, props), {
- ref: useMergeRefs(id ? store.setContentElement : null, props.ref),
- style
- });
- return props;
- }
-);
-var DisclosureContentImpl = createComponent(
- (props) => {
- const htmlProps = useDisclosureContent(props);
- return _3ORBWXWF_createElement("div", htmlProps);
- }
-);
-var DisclosureContent = createComponent(
- (_a) => {
- var _b = _a, { unmountOnHide } = _b, props = __objRest(_b, ["unmountOnHide"]);
- const context = useDisclosureProviderContext();
- const store = props.store || context;
- const mounted = useStoreState(
- store,
- (state) => !unmountOnHide || (state == null ? void 0 : state.mounted)
- );
- if (mounted === false)
- return null;
- return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(DisclosureContentImpl, _4R3V3JGP_spreadValues({}, props));
- }
-);
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/LWHPHW7Q.js
-"use client";
+var useDisclosureContent = createHook(function useDisclosureContent2(_a) {
+ var _b = _a, { store, alwaysVisible } = _b, props = __objRest(_b, ["store", "alwaysVisible"]);
+ const context = useDisclosureProviderContext();
+ store = store || context;
+ invariant(
+ store,
+ false && 0
+ );
+ const ref = (0,external_React_.useRef)(null);
+ const id = useId(props.id);
+ const [transition, setTransition] = (0,external_React_.useState)(null);
+ const open = store.useState("open");
+ const mounted = store.useState("mounted");
+ const animated = store.useState("animated");
+ const contentElement = store.useState("contentElement");
+ const otherElement = useStoreState(store.disclosure, "contentElement");
+ useSafeLayoutEffect(() => {
+ if (!ref.current) return;
+ store == null ? void 0 : store.setContentElement(ref.current);
+ }, [store]);
+ useSafeLayoutEffect(() => {
+ let previousAnimated;
+ store == null ? void 0 : store.setState("animated", (animated2) => {
+ previousAnimated = animated2;
+ return true;
+ });
+ return () => {
+ if (previousAnimated === void 0) return;
+ store == null ? void 0 : store.setState("animated", previousAnimated);
+ };
+ }, [store]);
+ useSafeLayoutEffect(() => {
+ if (!animated) return;
+ if (!(contentElement == null ? void 0 : contentElement.isConnected)) {
+ setTransition(null);
+ return;
+ }
+ return VGCJ63VH_afterPaint(() => {
+ setTransition(open ? "enter" : mounted ? "leave" : null);
+ });
+ }, [animated, contentElement, open, mounted]);
+ useSafeLayoutEffect(() => {
+ if (!store) return;
+ if (!animated) return;
+ if (!transition) return;
+ if (!contentElement) return;
+ const stopAnimation = () => store == null ? void 0 : store.setState("animating", false);
+ const stopAnimationSync = () => (0,external_ReactDOM_namespaceObject.flushSync)(stopAnimation);
+ if (transition === "leave" && open) return;
+ if (transition === "enter" && !open) return;
+ if (typeof animated === "number") {
+ const timeout2 = animated;
+ return afterTimeout(timeout2, stopAnimationSync);
+ }
+ const {
+ transitionDuration,
+ animationDuration,
+ transitionDelay,
+ animationDelay
+ } = getComputedStyle(contentElement);
+ const {
+ transitionDuration: transitionDuration2 = "0",
+ animationDuration: animationDuration2 = "0",
+ transitionDelay: transitionDelay2 = "0",
+ animationDelay: animationDelay2 = "0"
+ } = otherElement ? getComputedStyle(otherElement) : {};
+ const delay = parseCSSTime(
+ transitionDelay,
+ animationDelay,
+ transitionDelay2,
+ animationDelay2
+ );
+ const duration = parseCSSTime(
+ transitionDuration,
+ animationDuration,
+ transitionDuration2,
+ animationDuration2
+ );
+ const timeout = delay + duration;
+ if (!timeout) {
+ if (transition === "enter") {
+ store.setState("animated", false);
+ }
+ stopAnimation();
+ return;
+ }
+ const frameRate = 1e3 / 60;
+ const maxTimeout = Math.max(timeout - frameRate, 0);
+ return afterTimeout(maxTimeout, stopAnimationSync);
+ }, [store, animated, contentElement, otherElement, open, transition]);
+ props = useWrapElement(
+ props,
+ (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(DialogScopedContextProvider, { value: store, children: element }),
+ [store]
+ );
+ const hidden = isHidden(mounted, props.hidden, alwaysVisible);
+ const styleProp = props.style;
+ const style = (0,external_React_.useMemo)(() => {
+ if (hidden) {
+ return _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, styleProp), { display: "none" });
+ }
+ return styleProp;
+ }, [hidden, styleProp]);
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
+ id,
+ "data-open": open || void 0,
+ "data-enter": transition === "enter" || void 0,
+ "data-leave": transition === "leave" || void 0,
+ hidden
+ }, props), {
+ ref: useMergeRefs(id ? store.setContentElement : null, ref, props.ref),
+ style
+ });
+ return removeUndefinedValues(props);
+});
+var DisclosureContentImpl = forwardRef2(function DisclosureContentImpl2(props) {
+ const htmlProps = useDisclosureContent(props);
+ return LMDWO4NN_createElement(VGCJ63VH_TagName, htmlProps);
+});
+var DisclosureContent = forwardRef2(function DisclosureContent2(_a) {
+ var _b = _a, {
+ unmountOnHide
+ } = _b, props = __objRest(_b, [
+ "unmountOnHide"
+ ]);
+ const context = useDisclosureProviderContext();
+ const store = props.store || context;
+ const mounted = useStoreState(
+ store,
+ (state) => !unmountOnHide || (state == null ? void 0 : state.mounted)
+ );
+ if (mounted === false) return null;
+ return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(DisclosureContentImpl, _3YLGPPWQ_spreadValues({}, props));
+});
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/63FEHJZV.js
+"use client";
+
@@ -5684,61 +7097,67 @@
function DialogBackdrop({
store,
backdrop,
- backdropProps,
alwaysVisible,
hidden
}) {
const ref = (0,external_React_.useRef)(null);
const disclosure = useDisclosureStore({ disclosure: store });
- const contentElement = store.useState("contentElement");
- useSafeLayoutEffect(() => {
+ const contentElement = useStoreState(store, "contentElement");
+ (0,external_React_.useEffect)(() => {
const backdrop2 = ref.current;
const dialog = contentElement;
- if (!backdrop2)
- return;
- if (!dialog)
- return;
+ if (!backdrop2) return;
+ if (!dialog) return;
backdrop2.style.zIndex = getComputedStyle(dialog).zIndex;
}, [contentElement]);
useSafeLayoutEffect(() => {
const id = contentElement == null ? void 0 : contentElement.id;
- if (!id)
- return;
+ if (!id) return;
const backdrop2 = ref.current;
- if (!backdrop2)
- return;
+ if (!backdrop2) return;
return markAncestor(backdrop2, id);
}, [contentElement]);
- if (hidden != null) {
- backdropProps = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, backdropProps), { hidden });
- }
- const props = useDisclosureContent(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
+ const props = useDisclosureContent({
+ ref,
store: disclosure,
role: "presentation",
"data-backdrop": (contentElement == null ? void 0 : contentElement.id) || "",
- alwaysVisible
- }, backdropProps), {
- ref: useMergeRefs(backdropProps == null ? void 0 : backdropProps.ref, ref),
- style: _4R3V3JGP_spreadValues({
+ alwaysVisible,
+ hidden: hidden != null ? hidden : void 0,
+ style: {
position: "fixed",
top: 0,
right: 0,
bottom: 0,
left: 0
- }, backdropProps == null ? void 0 : backdropProps.style)
- }));
- if (!backdrop)
- return null;
+ }
+ });
+ if (!backdrop) return null;
if ((0,external_React_.isValidElement)(backdrop)) {
- return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Role, _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { render: backdrop }));
+ return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Role, _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { render: backdrop }));
}
const Component = typeof backdrop !== "boolean" ? backdrop : "div";
- return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Role, _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { render: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, {}) }));
-}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/BULCTPRV.js
+ return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Role, _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { render: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, {}) }));
+}
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/IGR4SXG2.js
+"use client";
+
+// src/dialog/utils/is-focus-trap.ts
+function isFocusTrap(element, ...ids) {
+ if (!element) return false;
+ const attr = element.getAttribute("data-focus-trap");
+ if (attr == null) return false;
+ if (!ids.length) return true;
+ if (attr === "") return false;
+ return ids.some((id) => attr === id);
+}
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/ESSM74HH.js
"use client";
@@ -5752,19 +7171,20 @@
const cleanups = [];
const ids = elements.map((el) => el == null ? void 0 : el.id);
walkTreeOutside(id, elements, (element) => {
- if (isBackdrop(element, ...ids))
- return;
+ if (isBackdrop(element, ...ids)) return;
cleanups.unshift(hideElementFromAccessibilityTree(element));
});
const restoreAccessibilityTree = () => {
- cleanups.forEach((fn) => fn());
+ for (const cleanup of cleanups) {
+ cleanup();
+ }
};
return restoreAccessibilityTree;
}
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/677M2CI3.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/677M2CI3.js
"use client";
// src/dialog/utils/supports-inert.ts
@@ -5774,8 +7194,9 @@
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/TQYOGOE2.js
-"use client";
+;// ./node_modules/@ariakit/react-core/esm/__chunks/KZAQFFOU.js
+"use client";
+
@@ -5787,16 +7208,20 @@
function disableTree(element, ignoredElements) {
- if (!("style" in element))
- return noop;
+ if (!("style" in element)) return noop;
if (supportsInert()) {
return setProperty(element, "inert", true);
}
const tabbableElements = getAllTabbableIn(element, true);
const enableElements = tabbableElements.map((element2) => {
- if (ignoredElements == null ? void 0 : ignoredElements.some((el) => el && contains(el, element2)))
- return noop;
- return setAttribute(element2, "tabindex", "-1");
+ if (ignoredElements == null ? void 0 : ignoredElements.some((el) => el && contains(el, element2))) return noop;
+ const restoreFocusMethod = orchestrate(element2, "focus", () => {
+ element2.focus = noop;
+ return () => {
+ delete element2.focus;
+ };
+ });
+ return chain(setAttribute(element2, "tabindex", "-1"), restoreFocusMethod);
});
return chain(
...enableElements,
@@ -5811,22 +7236,31 @@
function disableTreeOutside(id, elements) {
const cleanups = [];
const ids = elements.map((el) => el == null ? void 0 : el.id);
- _72E5EPFF_walkTreeOutside(id, elements, (element) => {
- if (MKDDWKFK_isBackdrop(element, ...ids))
- return;
- cleanups.unshift(disableTree(element, elements));
- });
+ AOUGVQZ3_walkTreeOutside(
+ id,
+ elements,
+ (element) => {
+ if (_63XF7ACK_isBackdrop(element, ...ids)) return;
+ if (isFocusTrap(element, ...ids)) return;
+ cleanups.unshift(disableTree(element, elements));
+ },
+ (element) => {
+ if (!element.hasAttribute("role")) return;
+ if (elements.some((el) => el && contains(el, element))) return;
+ cleanups.unshift(setAttribute(element, "role", "none"));
+ }
+ );
const restoreTreeOutside = () => {
- cleanups.forEach((fn) => fn());
+ for (const cleanup of cleanups) {
+ cleanup();
+ }
};
return restoreTreeOutside;
}
-;// CONCATENATED MODULE: external "ReactDOM"
-const external_ReactDOM_namespaceObject = window["ReactDOM"];
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/CS347UVZ.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/YKJECYU7.js
"use client";
@@ -5842,22 +7276,17 @@
}) {
const [updated, retry] = useForceUpdate();
const isRootDialog = (0,external_React_.useCallback)(() => {
- if (!enabled)
- return false;
- if (!contentElement)
- return false;
- const { body } = DLOEKDPY_getDocument(contentElement);
+ if (!enabled) return false;
+ if (!contentElement) return false;
+ const { body } = getDocument(contentElement);
const id = body.getAttribute(attribute);
return !id || id === contentId;
}, [updated, enabled, contentElement, attribute, contentId]);
(0,external_React_.useEffect)(() => {
- if (!enabled)
- return;
- if (!contentId)
- return;
- if (!contentElement)
- return;
- const { body } = DLOEKDPY_getDocument(contentElement);
+ if (!enabled) return;
+ if (!contentId) return;
+ if (!contentElement) return;
+ const { body } = getDocument(contentElement);
if (isRootDialog()) {
body.setAttribute(attribute, contentId);
return () => body.removeAttribute(attribute);
@@ -5871,7 +7300,7 @@
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/6BJGLK2C.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/BGQ3KQ5M.js
"use client";
@@ -5894,15 +7323,13 @@
enabled
});
(0,external_React_.useEffect)(() => {
- if (!isRootDialog())
- return;
- if (!contentElement)
- return;
- const doc = DLOEKDPY_getDocument(contentElement);
+ if (!isRootDialog()) return;
+ if (!contentElement) return;
+ const doc = getDocument(contentElement);
const win = getWindow(contentElement);
const { documentElement, body } = doc;
const cssScrollbarWidth = documentElement.style.getPropertyValue("--scrollbar-width");
- const scrollbarWidth = cssScrollbarWidth ? parseInt(cssScrollbarWidth) : win.innerWidth - documentElement.clientWidth;
+ const scrollbarWidth = cssScrollbarWidth ? Number.parseInt(cssScrollbarWidth) : win.innerWidth - documentElement.clientWidth;
const setScrollbarWidthProperty = () => setCSSProperty(
documentElement,
"--scrollbar-width",
@@ -5929,7 +7356,7 @@
return () => {
restoreStyle();
if (true) {
- win.scrollTo(scrollX, scrollY);
+ win.scrollTo({ left: scrollX, top: scrollY, behavior: "instant" });
}
};
};
@@ -5943,7 +7370,7 @@
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/IUB2BTEK.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/TOU75OXH.js
"use client";
@@ -5969,10 +7396,8 @@
useSafeLayoutEffect(() => {
return sync(store, ["open", "contentElement"], (state) => {
var _a;
- if (!state.open)
- return;
- if (!state.contentElement)
- return;
+ if (!state.open) return;
+ if (!state.contentElement) return;
return (_a = context.add) == null ? void 0 : _a.call(context, store);
});
}, [store, context]);
@@ -5986,7 +7411,7 @@
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/OOBDFMJL.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/HLTQOHKZ.js
"use client";
// src/dialog/utils/use-previous-mouse-down-ref.ts
@@ -6009,8 +7434,10 @@
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/XHJGS6Z5.js
-"use client";
+;// ./node_modules/@ariakit/react-core/esm/__chunks/WBDYNH73.js
+"use client";
+
+
@@ -6021,18 +7448,15 @@
function isInDocument(target) {
- if (target.tagName === "HTML")
- return true;
- return contains(DLOEKDPY_getDocument(target).body, target);
+ if (target.tagName === "HTML") return true;
+ return contains(getDocument(target).body, target);
}
function isDisclosure(disclosure, target) {
- if (!disclosure)
- return false;
- if (contains(disclosure, target))
- return true;
+ if (!disclosure) return false;
+ if (contains(disclosure, target)) return true;
const activeId = target.getAttribute("aria-activedescendant");
if (activeId) {
- const activeElement = DLOEKDPY_getDocument(disclosure).getElementById(activeId);
+ const activeElement = getDocument(disclosure).getElementById(activeId);
if (activeElement) {
return contains(disclosure, activeElement);
}
@@ -6040,11 +7464,9 @@
return false;
}
function isMouseEventOnDialog(event, dialog) {
- if (!("clientY" in event))
- return false;
+ if (!("clientY" in event)) return false;
const rect = dialog.getBoundingClientRect();
- if (rect.width === 0 || rect.height === 0)
- return false;
+ if (rect.width === 0 || rect.height === 0) return false;
return rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width;
}
function useEventOutside({
@@ -6055,16 +7477,13 @@
domReady
}) {
const callListener = useEvent(listener);
- const open = store.useState("open");
+ const open = useStoreState(store, "open");
const focusedRef = (0,external_React_.useRef)(false);
useSafeLayoutEffect(() => {
- if (!open)
- return;
- if (!domReady)
- return;
+ if (!open) return;
+ if (!domReady) return;
const { contentElement } = store.getState();
- if (!contentElement)
- return;
+ if (!contentElement) return;
const onFocus = () => {
focusedRef.current = true;
};
@@ -6072,28 +7491,20 @@
return () => contentElement.removeEventListener("focusin", onFocus, true);
}, [store, open, domReady]);
(0,external_React_.useEffect)(() => {
- if (!open)
- return;
+ if (!open) return;
const onEvent = (event) => {
const { contentElement, disclosureElement } = store.getState();
const target = event.target;
- if (!contentElement)
- return;
- if (!target)
- return;
- if (!isInDocument(target))
- return;
- if (contains(contentElement, target))
- return;
- if (isDisclosure(disclosureElement, target))
- return;
- if (target.hasAttribute("data-focus-trap"))
- return;
- if (isMouseEventOnDialog(event, contentElement))
- return;
+ if (!contentElement) return;
+ if (!target) return;
+ if (!isInDocument(target)) return;
+ if (contains(contentElement, target)) return;
+ if (isDisclosure(disclosureElement, target)) return;
+ if (target.hasAttribute("data-focus-trap")) return;
+ if (isMouseEventOnDialog(event, contentElement)) return;
const focused = focusedRef.current;
- if (focused && !isElementMarked(target, contentElement.id))
- return;
+ if (focused && !isElementMarked(target, contentElement.id)) return;
+ if (isSafariFocusAncestor(target)) return;
callListener(event);
};
return addGlobalEventListener(type, onEvent, capture);
@@ -6106,43 +7517,35 @@
return !!hideOnInteractOutside;
}
function useHideOnInteractOutside(store, hideOnInteractOutside, domReady) {
- const open = store.useState("open");
+ const open = useStoreState(store, "open");
const previousMouseDownRef = usePreviousMouseDownRef(open);
const props = { store, domReady, capture: true };
- useEventOutside(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
+ useEventOutside(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), {
type: "click",
listener: (event) => {
const { contentElement } = store.getState();
const previousMouseDown = previousMouseDownRef.current;
- if (!previousMouseDown)
- return;
- if (!isVisible(previousMouseDown))
- return;
- if (!isElementMarked(previousMouseDown, contentElement == null ? void 0 : contentElement.id))
- return;
- if (!shouldHideOnInteractOutside(hideOnInteractOutside, event))
- return;
+ if (!previousMouseDown) return;
+ if (!isVisible(previousMouseDown)) return;
+ if (!isElementMarked(previousMouseDown, contentElement == null ? void 0 : contentElement.id)) return;
+ if (!shouldHideOnInteractOutside(hideOnInteractOutside, event)) return;
store.hide();
}
}));
- useEventOutside(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
+ useEventOutside(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), {
type: "focusin",
listener: (event) => {
const { contentElement } = store.getState();
- if (!contentElement)
- return;
- if (event.target === DLOEKDPY_getDocument(contentElement))
- return;
- if (!shouldHideOnInteractOutside(hideOnInteractOutside, event))
- return;
+ if (!contentElement) return;
+ if (event.target === getDocument(contentElement)) return;
+ if (!shouldHideOnInteractOutside(hideOnInteractOutside, event)) return;
store.hide();
}
}));
- useEventOutside(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
+ useEventOutside(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), {
type: "contextmenu",
listener: (event) => {
- if (!shouldHideOnInteractOutside(hideOnInteractOutside, event))
- return;
+ if (!shouldHideOnInteractOutside(hideOnInteractOutside, event)) return;
store.hide();
}
}));
@@ -6150,13 +7553,13 @@
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/6GXEOXGT.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/6GXEOXGT.js
"use client";
// src/dialog/utils/prepend-hidden-dismiss.ts
function prependHiddenDismiss(container, onClick) {
- const document = DLOEKDPY_getDocument(container);
+ const document = getDocument(container);
const button = document.createElement("button");
button.type = "button";
button.tabIndex = -1;
@@ -6183,7 +7586,7 @@
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/HPP6CWMY.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/ZWYATQFU.js
"use client";
@@ -6192,37 +7595,33 @@
// src/focusable/focusable-container.tsx
-var useFocusableContainer = createHook(
- (_a) => {
- var _b = _a, { autoFocusOnShow = true } = _b, props = __objRest(_b, ["autoFocusOnShow"]);
- props = useWrapElement(
- props,
- (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(FocusableContext.Provider, { value: autoFocusOnShow, children: element }),
- [autoFocusOnShow]
- );
- return props;
- }
-);
-var FocusableContainer = createComponent(
- (props) => {
- const htmlProps = useFocusableContainer(props);
- return _3ORBWXWF_createElement("div", htmlProps);
- }
-);
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/XPF5GU3Q.js
-"use client";
-
-// src/heading/heading-context.ts
+var ZWYATQFU_TagName = "div";
+var useFocusableContainer = createHook(function useFocusableContainer2(_a) {
+ var _b = _a, { autoFocusOnShow = true } = _b, props = __objRest(_b, ["autoFocusOnShow"]);
+ props = useWrapElement(
+ props,
+ (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(FocusableContext.Provider, { value: autoFocusOnShow, children: element }),
+ [autoFocusOnShow]
+ );
+ return props;
+});
+var FocusableContainer = forwardRef2(function FocusableContainer2(props) {
+ const htmlProps = useFocusableContainer(props);
+ return LMDWO4NN_createElement(ZWYATQFU_TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/CZ4GFWYL.js
+"use client";
+
+// src/heading/heading-context.tsx
var HeadingContext = (0,external_React_.createContext)(0);
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/UYRJLDVS.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/5M6RIVE2.js
"use client";
@@ -6240,79 +7639,81 @@
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/BG6HZDS7.js
-"use client";
-
-
-
-// src/visually-hidden/visually-hidden.ts
-var useVisuallyHidden = createHook((props) => {
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
- style: _4R3V3JGP_spreadValues({
- border: 0,
- clip: "rect(0 0 0 0)",
- height: "1px",
- margin: "-1px",
- overflow: "hidden",
- padding: 0,
- position: "absolute",
- whiteSpace: "nowrap",
- width: "1px"
- }, props.style)
- });
- return props;
-});
-var VisuallyHidden = createComponent(
- (props) => {
- const htmlProps = useVisuallyHidden(props);
- return _3ORBWXWF_createElement("span", htmlProps);
- }
-);
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/CHKJ74UC.js
-"use client";
-
-
-
-
-// src/focus-trap/focus-trap.ts
-var useFocusTrap = createHook((props) => {
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
- "data-focus-trap": "",
- tabIndex: 0,
- "aria-hidden": true
- }, props), {
- style: _4R3V3JGP_spreadValues({
- // Prevents unintended scroll jumps.
- position: "fixed",
- top: 0,
- left: 0
- }, props.style)
- });
- props = useVisuallyHidden(props);
- return props;
-});
-var FocusTrap = createComponent((props) => {
+;// ./node_modules/@ariakit/react-core/esm/__chunks/XX67R432.js
+"use client";
+
+
+
+// src/visually-hidden/visually-hidden.tsx
+var XX67R432_TagName = "span";
+var useVisuallyHidden = createHook(
+ function useVisuallyHidden2(props) {
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), {
+ style: _3YLGPPWQ_spreadValues({
+ border: 0,
+ clip: "rect(0 0 0 0)",
+ height: "1px",
+ margin: "-1px",
+ overflow: "hidden",
+ padding: 0,
+ position: "absolute",
+ whiteSpace: "nowrap",
+ width: "1px"
+ }, props.style)
+ });
+ return props;
+ }
+);
+var VisuallyHidden = forwardRef2(function VisuallyHidden2(props) {
+ const htmlProps = useVisuallyHidden(props);
+ return LMDWO4NN_createElement(XX67R432_TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/W3VI7GFU.js
+"use client";
+
+
+
+
+// src/focus-trap/focus-trap.tsx
+var W3VI7GFU_TagName = "span";
+var useFocusTrap = createHook(
+ function useFocusTrap2(props) {
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
+ "data-focus-trap": "",
+ tabIndex: 0,
+ "aria-hidden": true
+ }, props), {
+ style: _3YLGPPWQ_spreadValues({
+ // Prevents unintended scroll jumps.
+ position: "fixed",
+ top: 0,
+ left: 0
+ }, props.style)
+ });
+ props = useVisuallyHidden(props);
+ return props;
+ }
+);
+var FocusTrap = forwardRef2(function FocusTrap2(props) {
const htmlProps = useFocusTrap(props);
- return _3ORBWXWF_createElement("span", htmlProps);
-});
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/7452U3HH.js
-"use client";
-
-// src/portal/portal-context.ts
+ return LMDWO4NN_createElement(W3VI7GFU_TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/AOQQTIBO.js
+"use client";
+
+// src/portal/portal-context.tsx
var PortalContext = (0,external_React_.createContext)(null);
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/JPXNJYSO.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/O37CNYMR.js
"use client";
@@ -6328,12 +7729,13 @@
+var O37CNYMR_TagName = "div";
function getRootElement(element) {
- return DLOEKDPY_getDocument(element).body;
+ return getDocument(element).body;
}
function getPortalElement(element, portalElement) {
if (!portalElement) {
- return DLOEKDPY_getDocument(element).createElement("div");
+ return getDocument(element).createElement("div");
}
if (typeof portalElement === "function") {
return portalElement(element);
@@ -6341,238 +7743,229 @@
return portalElement;
}
function getRandomId(prefix = "id") {
- return `${prefix ? `${prefix}-` : ""}${Math.random().toString(36).substr(2, 6)}`;
+ return `${prefix ? `${prefix}-` : ""}${Math.random().toString(36).slice(2, 8)}`;
}
function queueFocus(element) {
queueMicrotask(() => {
element == null ? void 0 : element.focus();
});
}
-var usePortal = createHook(
- (_a) => {
- var _b = _a, {
- preserveTabOrder,
- preserveTabOrderAnchor,
- portalElement,
- portalRef,
- portal = true
- } = _b, props = __objRest(_b, [
- "preserveTabOrder",
- "preserveTabOrderAnchor",
- "portalElement",
- "portalRef",
- "portal"
- ]);
- const ref = (0,external_React_.useRef)(null);
- const refProp = useMergeRefs(ref, props.ref);
- const context = (0,external_React_.useContext)(PortalContext);
- const [portalNode, setPortalNode] = (0,external_React_.useState)(null);
- const [anchorPortalNode, setAnchorPortalNode] = (0,external_React_.useState)(null);
- const outerBeforeRef = (0,external_React_.useRef)(null);
- const innerBeforeRef = (0,external_React_.useRef)(null);
- const innerAfterRef = (0,external_React_.useRef)(null);
- const outerAfterRef = (0,external_React_.useRef)(null);
- useSafeLayoutEffect(() => {
- const element = ref.current;
- if (!element || !portal) {
- setPortalNode(null);
- return;
- }
- const portalEl = getPortalElement(element, portalElement);
- if (!portalEl) {
- setPortalNode(null);
- return;
- }
- const isPortalInDocument = portalEl.isConnected;
- if (!isPortalInDocument) {
- const rootElement = context || getRootElement(element);
- rootElement.appendChild(portalEl);
- }
- if (!portalEl.id) {
- portalEl.id = element.id ? `portal/${element.id}` : getRandomId();
- }
- setPortalNode(portalEl);
- setRef(portalRef, portalEl);
- if (isPortalInDocument)
- return;
- return () => {
- portalEl.remove();
- setRef(portalRef, null);
- };
- }, [portal, portalElement, context, portalRef]);
- useSafeLayoutEffect(() => {
- if (!preserveTabOrder)
- return;
- if (!preserveTabOrderAnchor)
- return;
- const doc = DLOEKDPY_getDocument(preserveTabOrderAnchor);
- const element = doc.createElement("span");
- element.style.position = "fixed";
- preserveTabOrderAnchor.insertAdjacentElement("afterend", element);
- setAnchorPortalNode(element);
- return () => {
- element.remove();
- setAnchorPortalNode(null);
- };
- }, [preserveTabOrder, preserveTabOrderAnchor]);
- (0,external_React_.useEffect)(() => {
- if (!portalNode)
- return;
- if (!preserveTabOrder)
- return;
- let raf = 0;
- const onFocus = (event) => {
- if (!isFocusEventOutside(event))
- return;
- const focusing = event.type === "focusin";
- cancelAnimationFrame(raf);
- if (focusing) {
- return restoreFocusIn(portalNode);
- }
- raf = requestAnimationFrame(() => {
- disableFocusIn(portalNode, true);
- });
- };
- portalNode.addEventListener("focusin", onFocus, true);
- portalNode.addEventListener("focusout", onFocus, true);
- return () => {
- cancelAnimationFrame(raf);
- portalNode.removeEventListener("focusin", onFocus, true);
- portalNode.removeEventListener("focusout", onFocus, true);
- };
- }, [portalNode, preserveTabOrder]);
- props = useWrapElement(
- props,
- (element) => {
- element = // While the portal node is not in the DOM, we need to pass the
- // current context to the portal context, otherwise it's going to
- // reset to the body element on nested portals.
- /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(PortalContext.Provider, { value: portalNode || context, children: element });
- if (!portal)
- return element;
- if (!portalNode) {
- return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(
- "span",
- {
- ref: refProp,
- id: props.id,
- style: { position: "fixed" },
- hidden: true
- }
- );
- }
- element = /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { children: [
- preserveTabOrder && portalNode && /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(
- FocusTrap,
- {
- ref: innerBeforeRef,
- className: "__focus-trap-inner-before",
- onFocus: (event) => {
- if (isFocusEventOutside(event, portalNode)) {
- queueFocus(getNextTabbable());
- } else {
- queueFocus(outerBeforeRef.current);
- }
+var usePortal = createHook(function usePortal2(_a) {
+ var _b = _a, {
+ preserveTabOrder,
+ preserveTabOrderAnchor,
+ portalElement,
+ portalRef,
+ portal = true
+ } = _b, props = __objRest(_b, [
+ "preserveTabOrder",
+ "preserveTabOrderAnchor",
+ "portalElement",
+ "portalRef",
+ "portal"
+ ]);
+ const ref = (0,external_React_.useRef)(null);
+ const refProp = useMergeRefs(ref, props.ref);
+ const context = (0,external_React_.useContext)(PortalContext);
+ const [portalNode, setPortalNode] = (0,external_React_.useState)(null);
+ const [anchorPortalNode, setAnchorPortalNode] = (0,external_React_.useState)(
+ null
+ );
+ const outerBeforeRef = (0,external_React_.useRef)(null);
+ const innerBeforeRef = (0,external_React_.useRef)(null);
+ const innerAfterRef = (0,external_React_.useRef)(null);
+ const outerAfterRef = (0,external_React_.useRef)(null);
+ useSafeLayoutEffect(() => {
+ const element = ref.current;
+ if (!element || !portal) {
+ setPortalNode(null);
+ return;
+ }
+ const portalEl = getPortalElement(element, portalElement);
+ if (!portalEl) {
+ setPortalNode(null);
+ return;
+ }
+ const isPortalInDocument = portalEl.isConnected;
+ if (!isPortalInDocument) {
+ const rootElement = context || getRootElement(element);
+ rootElement.appendChild(portalEl);
+ }
+ if (!portalEl.id) {
+ portalEl.id = element.id ? `portal/${element.id}` : getRandomId();
+ }
+ setPortalNode(portalEl);
+ setRef(portalRef, portalEl);
+ if (isPortalInDocument) return;
+ return () => {
+ portalEl.remove();
+ setRef(portalRef, null);
+ };
+ }, [portal, portalElement, context, portalRef]);
+ useSafeLayoutEffect(() => {
+ if (!portal) return;
+ if (!preserveTabOrder) return;
+ if (!preserveTabOrderAnchor) return;
+ const doc = getDocument(preserveTabOrderAnchor);
+ const element = doc.createElement("span");
+ element.style.position = "fixed";
+ preserveTabOrderAnchor.insertAdjacentElement("afterend", element);
+ setAnchorPortalNode(element);
+ return () => {
+ element.remove();
+ setAnchorPortalNode(null);
+ };
+ }, [portal, preserveTabOrder, preserveTabOrderAnchor]);
+ (0,external_React_.useEffect)(() => {
+ if (!portalNode) return;
+ if (!preserveTabOrder) return;
+ let raf = 0;
+ const onFocus = (event) => {
+ if (!isFocusEventOutside(event)) return;
+ const focusing = event.type === "focusin";
+ cancelAnimationFrame(raf);
+ if (focusing) {
+ return restoreFocusIn(portalNode);
+ }
+ raf = requestAnimationFrame(() => {
+ disableFocusIn(portalNode, true);
+ });
+ };
+ portalNode.addEventListener("focusin", onFocus, true);
+ portalNode.addEventListener("focusout", onFocus, true);
+ return () => {
+ cancelAnimationFrame(raf);
+ portalNode.removeEventListener("focusin", onFocus, true);
+ portalNode.removeEventListener("focusout", onFocus, true);
+ };
+ }, [portalNode, preserveTabOrder]);
+ props = useWrapElement(
+ props,
+ (element) => {
+ element = // While the portal node is not in the DOM, we need to pass the
+ // current context to the portal context, otherwise it's going to
+ // reset to the body element on nested portals.
+ /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(PortalContext.Provider, { value: portalNode || context, children: element });
+ if (!portal) return element;
+ if (!portalNode) {
+ return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(
+ "span",
+ {
+ ref: refProp,
+ id: props.id,
+ style: { position: "fixed" },
+ hidden: true
+ }
+ );
+ }
+ element = /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { children: [
+ preserveTabOrder && portalNode && /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(
+ FocusTrap,
+ {
+ ref: innerBeforeRef,
+ "data-focus-trap": props.id,
+ className: "__focus-trap-inner-before",
+ onFocus: (event) => {
+ if (isFocusEventOutside(event, portalNode)) {
+ queueFocus(getNextTabbable());
+ } else {
+ queueFocus(outerBeforeRef.current);
}
}
- ),
- element,
- preserveTabOrder && portalNode && /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(
- FocusTrap,
- {
- ref: innerAfterRef,
- className: "__focus-trap-inner-after",
- onFocus: (event) => {
- if (isFocusEventOutside(event, portalNode)) {
- queueFocus(getPreviousTabbable());
- } else {
- queueFocus(outerAfterRef.current);
- }
+ }
+ ),
+ element,
+ preserveTabOrder && portalNode && /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(
+ FocusTrap,
+ {
+ ref: innerAfterRef,
+ "data-focus-trap": props.id,
+ className: "__focus-trap-inner-after",
+ onFocus: (event) => {
+ if (isFocusEventOutside(event, portalNode)) {
+ queueFocus(getPreviousTabbable());
+ } else {
+ queueFocus(outerAfterRef.current);
}
}
- )
- ] });
- if (portalNode) {
- element = (0,external_ReactDOM_namespaceObject.createPortal)(element, portalNode);
- }
- let preserveTabOrderElement = /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { children: [
- preserveTabOrder && portalNode && /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(
- FocusTrap,
- {
- ref: outerBeforeRef,
- className: "__focus-trap-outer-before",
- onFocus: (event) => {
- const fromOuter = event.relatedTarget === outerAfterRef.current;
- if (!fromOuter && isFocusEventOutside(event, portalNode)) {
- queueFocus(innerBeforeRef.current);
- } else {
- queueFocus(getPreviousTabbable());
- }
+ }
+ )
+ ] });
+ if (portalNode) {
+ element = (0,external_ReactDOM_namespaceObject.createPortal)(element, portalNode);
+ }
+ let preserveTabOrderElement = /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { children: [
+ preserveTabOrder && portalNode && /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(
+ FocusTrap,
+ {
+ ref: outerBeforeRef,
+ "data-focus-trap": props.id,
+ className: "__focus-trap-outer-before",
+ onFocus: (event) => {
+ const fromOuter = event.relatedTarget === outerAfterRef.current;
+ if (!fromOuter && isFocusEventOutside(event, portalNode)) {
+ queueFocus(innerBeforeRef.current);
+ } else {
+ queueFocus(getPreviousTabbable());
}
}
- ),
- preserveTabOrder && // We're using position: fixed here so that the browser doesn't
- // add margin to the element when setting gap on a parent element.
- /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { "aria-owns": portalNode == null ? void 0 : portalNode.id, style: { position: "fixed" } }),
- preserveTabOrder && portalNode && /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(
- FocusTrap,
- {
- ref: outerAfterRef,
- className: "__focus-trap-outer-after",
- onFocus: (event) => {
- if (isFocusEventOutside(event, portalNode)) {
- queueFocus(innerAfterRef.current);
- } else {
- const nextTabbable = getNextTabbable();
- if (nextTabbable === innerBeforeRef.current) {
- requestAnimationFrame(() => {
- var _a2;
- return (_a2 = getNextTabbable()) == null ? void 0 : _a2.focus();
- });
- return;
- }
- queueFocus(nextTabbable);
- }
+ }
+ ),
+ preserveTabOrder && // We're using position: fixed here so that the browser doesn't
+ // add margin to the element when setting gap on a parent element.
+ /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { "aria-owns": portalNode == null ? void 0 : portalNode.id, style: { position: "fixed" } }),
+ preserveTabOrder && portalNode && /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(
+ FocusTrap,
+ {
+ ref: outerAfterRef,
+ "data-focus-trap": props.id,
+ className: "__focus-trap-outer-after",
+ onFocus: (event) => {
+ if (isFocusEventOutside(event, portalNode)) {
+ queueFocus(innerAfterRef.current);
+ } else {
+ const nextTabbable = getNextTabbable();
+ if (nextTabbable === innerBeforeRef.current) {
+ requestAnimationFrame(() => {
+ var _a2;
+ return (_a2 = getNextTabbable()) == null ? void 0 : _a2.focus();
+ });
+ return;
+ }
+ queueFocus(nextTabbable);
}
}
- )
- ] });
- if (anchorPortalNode && preserveTabOrder) {
- preserveTabOrderElement = (0,external_ReactDOM_namespaceObject.createPortal)(
- preserveTabOrderElement,
- anchorPortalNode
- );
- }
- return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { children: [
+ }
+ )
+ ] });
+ if (anchorPortalNode && preserveTabOrder) {
+ preserveTabOrderElement = (0,external_ReactDOM_namespaceObject.createPortal)(
preserveTabOrderElement,
- element
- ] });
- },
- [
- portalNode,
- context,
- portal,
- props.id,
- preserveTabOrder,
- anchorPortalNode
- ]
- );
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
- ref: refProp
- });
- return props;
- }
-);
-var Portal = createComponent((props) => {
+ anchorPortalNode
+ );
+ }
+ return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { children: [
+ preserveTabOrderElement,
+ element
+ ] });
+ },
+ [portalNode, context, portal, props.id, preserveTabOrder, anchorPortalNode]
+ );
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), {
+ ref: refProp
+ });
+ return props;
+});
+var Portal = forwardRef2(function Portal2(props) {
const htmlProps = usePortal(props);
- return _3ORBWXWF_createElement("div", htmlProps);
-});
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/NERBASET.js
-"use client";
+ return LMDWO4NN_createElement(O37CNYMR_TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/JC64G2H7.js
+"use client";
+
@@ -6601,436 +7994,401 @@
-var NERBASET_isSafariBrowser = isSafari();
+var JC64G2H7_TagName = "div";
+var JC64G2H7_isSafariBrowser = isSafari();
function isAlreadyFocusingAnotherElement(dialog) {
const activeElement = getActiveElement();
- if (!activeElement)
- return false;
- if (dialog && contains(dialog, activeElement))
- return false;
- if (isFocusable(activeElement))
- return true;
+ if (!activeElement) return false;
+ if (dialog && contains(dialog, activeElement)) return false;
+ if (isFocusable(activeElement)) return true;
return false;
}
function getElementFromProp(prop, focusable = false) {
- if (!prop)
- return null;
+ if (!prop) return null;
const element = "current" in prop ? prop.current : prop;
- if (!element)
- return null;
- if (focusable)
- return isFocusable(element) ? element : null;
+ if (!element) return null;
+ if (focusable) return isFocusable(element) ? element : null;
return element;
}
-var useDialog = createHook(
- (_a) => {
- var _b = _a, {
- store: storeProp,
- open: openProp,
- onClose,
- focusable = true,
- modal = true,
- portal = !!modal,
- backdrop = !!modal,
- backdropProps,
- hideOnEscape = true,
- hideOnInteractOutside = true,
- getPersistentElements,
- preventBodyScroll = !!modal,
- autoFocusOnShow = true,
- autoFocusOnHide = true,
- initialFocus,
- finalFocus,
- unmountOnHide
- } = _b, props = __objRest(_b, [
- "store",
- "open",
- "onClose",
- "focusable",
- "modal",
- "portal",
- "backdrop",
- "backdropProps",
- "hideOnEscape",
- "hideOnInteractOutside",
- "getPersistentElements",
- "preventBodyScroll",
- "autoFocusOnShow",
- "autoFocusOnHide",
- "initialFocus",
- "finalFocus",
- "unmountOnHide"
- ]);
- const context = useDialogProviderContext();
- const ref = (0,external_React_.useRef)(null);
- const store = useDialogStore({
- store: storeProp || context,
- open: openProp,
- setOpen(open2) {
- if (open2)
- return;
- const dialog = ref.current;
- if (!dialog)
- return;
- const event = new Event("close", { bubbles: false, cancelable: true });
- if (onClose) {
- dialog.addEventListener("close", onClose, { once: true });
- }
- dialog.dispatchEvent(event);
- if (!event.defaultPrevented)
- return;
- store.setOpen(true);
- }
- });
- const { portalRef, domReady } = usePortalRef(portal, props.portalRef);
- const preserveTabOrderProp = props.preserveTabOrder;
- const preserveTabOrder = store.useState(
- (state) => preserveTabOrderProp && !modal && state.mounted
- );
- const id = useId(props.id);
- const open = store.useState("open");
- const mounted = store.useState("mounted");
- const contentElement = store.useState("contentElement");
- const hidden = isHidden(mounted, props.hidden, props.alwaysVisible);
- usePreventBodyScroll(contentElement, id, preventBodyScroll && !hidden);
- useHideOnInteractOutside(store, hideOnInteractOutside, domReady);
- const { wrapElement, nestedDialogs } = useNestedDialogs(store);
- props = useWrapElement(props, wrapElement, [wrapElement]);
- if (false) {}
- useSafeLayoutEffect(() => {
- if (!open)
- return;
+var useDialog = createHook(function useDialog2(_a) {
+ var _b = _a, {
+ store: storeProp,
+ open: openProp,
+ onClose,
+ focusable = true,
+ modal = true,
+ portal = !!modal,
+ backdrop = !!modal,
+ hideOnEscape = true,
+ hideOnInteractOutside = true,
+ getPersistentElements,
+ preventBodyScroll = !!modal,
+ autoFocusOnShow = true,
+ autoFocusOnHide = true,
+ initialFocus,
+ finalFocus,
+ unmountOnHide,
+ unstable_treeSnapshotKey
+ } = _b, props = __objRest(_b, [
+ "store",
+ "open",
+ "onClose",
+ "focusable",
+ "modal",
+ "portal",
+ "backdrop",
+ "hideOnEscape",
+ "hideOnInteractOutside",
+ "getPersistentElements",
+ "preventBodyScroll",
+ "autoFocusOnShow",
+ "autoFocusOnHide",
+ "initialFocus",
+ "finalFocus",
+ "unmountOnHide",
+ "unstable_treeSnapshotKey"
+ ]);
+ const context = useDialogProviderContext();
+ const ref = (0,external_React_.useRef)(null);
+ const store = useDialogStore({
+ store: storeProp || context,
+ open: openProp,
+ setOpen(open2) {
+ if (open2) return;
const dialog = ref.current;
- const activeElement = getActiveElement(dialog, true);
- if (!activeElement)
- return;
- if (activeElement.tagName === "BODY")
- return;
- if (dialog && contains(dialog, activeElement))
- return;
- store.setDisclosureElement(activeElement);
- }, [store, open]);
- if (NERBASET_isSafariBrowser) {
- (0,external_React_.useEffect)(() => {
- if (!mounted)
- return;
- const { disclosureElement } = store.getState();
- if (!disclosureElement)
- return;
- if (!isButton(disclosureElement))
- return;
- const onMouseDown = () => {
- let receivedFocus = false;
- const onFocus = () => {
- receivedFocus = true;
- };
- const options = { capture: true, once: true };
- disclosureElement.addEventListener("focusin", onFocus, options);
- queueBeforeEvent(disclosureElement, "mouseup", () => {
- disclosureElement.removeEventListener("focusin", onFocus, true);
- if (receivedFocus)
- return;
- focusIfNeeded(disclosureElement);
- });
- };
- disclosureElement.addEventListener("mousedown", onMouseDown);
- return () => {
- disclosureElement.removeEventListener("mousedown", onMouseDown);
- };
- }, [store, mounted]);
- }
+ if (!dialog) return;
+ const event = new Event("close", { bubbles: false, cancelable: true });
+ if (onClose) {
+ dialog.addEventListener("close", onClose, { once: true });
+ }
+ dialog.dispatchEvent(event);
+ if (!event.defaultPrevented) return;
+ store.setOpen(true);
+ }
+ });
+ const { portalRef, domReady } = usePortalRef(portal, props.portalRef);
+ const preserveTabOrderProp = props.preserveTabOrder;
+ const preserveTabOrder = useStoreState(
+ store,
+ (state) => preserveTabOrderProp && !modal && state.mounted
+ );
+ const id = useId(props.id);
+ const open = useStoreState(store, "open");
+ const mounted = useStoreState(store, "mounted");
+ const contentElement = useStoreState(store, "contentElement");
+ const hidden = isHidden(mounted, props.hidden, props.alwaysVisible);
+ usePreventBodyScroll(contentElement, id, preventBodyScroll && !hidden);
+ useHideOnInteractOutside(store, hideOnInteractOutside, domReady);
+ const { wrapElement, nestedDialogs } = useNestedDialogs(store);
+ props = useWrapElement(props, wrapElement, [wrapElement]);
+ useSafeLayoutEffect(() => {
+ if (!open) return;
+ const dialog = ref.current;
+ const activeElement = getActiveElement(dialog, true);
+ if (!activeElement) return;
+ if (activeElement.tagName === "BODY") return;
+ if (dialog && contains(dialog, activeElement)) return;
+ store.setDisclosureElement(activeElement);
+ }, [store, open]);
+ if (JC64G2H7_isSafariBrowser) {
(0,external_React_.useEffect)(() => {
- if (!modal)
- return;
- if (!mounted)
- return;
- if (!domReady)
- return;
- const dialog = ref.current;
- if (!dialog)
- return;
- const existingDismiss = dialog.querySelector("[data-dialog-dismiss]");
- if (existingDismiss)
- return;
- return prependHiddenDismiss(dialog, store.hide);
- }, [store, modal, mounted, domReady]);
- useSafeLayoutEffect(() => {
- if (open)
- return;
- if (!mounted)
- return;
- if (!domReady)
- return;
- const dialog = ref.current;
- if (!dialog)
- return;
- return disableTree(dialog);
- }, [open, mounted, domReady]);
- const canTakeTreeSnapshot = open && domReady;
- useSafeLayoutEffect(() => {
- if (!id)
- return;
- if (!canTakeTreeSnapshot)
- return;
- const dialog = ref.current;
- return createWalkTreeSnapshot(id, [dialog]);
- }, [id, canTakeTreeSnapshot]);
- const getPersistentElementsProp = useEvent(getPersistentElements);
- useSafeLayoutEffect(() => {
- if (!id)
- return;
- if (!canTakeTreeSnapshot)
- return;
+ if (!mounted) return;
const { disclosureElement } = store.getState();
- const dialog = ref.current;
- const persistentElements = getPersistentElementsProp() || [];
- const allElements = [
- dialog,
- ...persistentElements,
- ...nestedDialogs.map((dialog2) => dialog2.getState().contentElement)
- ];
- if (modal) {
- return chain(
- markTreeOutside(id, allElements),
- disableTreeOutside(id, allElements)
- );
- }
- return markTreeOutside(id, [disclosureElement, ...allElements]);
- }, [
- id,
- store,
- canTakeTreeSnapshot,
- getPersistentElementsProp,
- nestedDialogs,
- modal
- ]);
- const mayAutoFocusOnShow = !!autoFocusOnShow;
- const autoFocusOnShowProp = useBooleanEvent(autoFocusOnShow);
- const [autoFocusEnabled, setAutoFocusEnabled] = (0,external_React_.useState)(false);
- (0,external_React_.useEffect)(() => {
- if (!open)
+ if (!disclosureElement) return;
+ if (!isButton(disclosureElement)) return;
+ const onMouseDown = () => {
+ let receivedFocus = false;
+ const onFocus = () => {
+ receivedFocus = true;
+ };
+ const options = { capture: true, once: true };
+ disclosureElement.addEventListener("focusin", onFocus, options);
+ queueBeforeEvent(disclosureElement, "mouseup", () => {
+ disclosureElement.removeEventListener("focusin", onFocus, true);
+ if (receivedFocus) return;
+ focusIfNeeded(disclosureElement);
+ });
+ };
+ disclosureElement.addEventListener("mousedown", onMouseDown);
+ return () => {
+ disclosureElement.removeEventListener("mousedown", onMouseDown);
+ };
+ }, [store, mounted]);
+ }
+ (0,external_React_.useEffect)(() => {
+ if (!mounted) return;
+ if (!domReady) return;
+ const dialog = ref.current;
+ if (!dialog) return;
+ const win = getWindow(dialog);
+ const viewport = win.visualViewport || win;
+ const setViewportHeight = () => {
+ var _a2, _b2;
+ const height = (_b2 = (_a2 = win.visualViewport) == null ? void 0 : _a2.height) != null ? _b2 : win.innerHeight;
+ dialog.style.setProperty("--dialog-viewport-height", `${height}px`);
+ };
+ setViewportHeight();
+ viewport.addEventListener("resize", setViewportHeight);
+ return () => {
+ viewport.removeEventListener("resize", setViewportHeight);
+ };
+ }, [mounted, domReady]);
+ (0,external_React_.useEffect)(() => {
+ if (!modal) return;
+ if (!mounted) return;
+ if (!domReady) return;
+ const dialog = ref.current;
+ if (!dialog) return;
+ const existingDismiss = dialog.querySelector("[data-dialog-dismiss]");
+ if (existingDismiss) return;
+ return prependHiddenDismiss(dialog, store.hide);
+ }, [store, modal, mounted, domReady]);
+ useSafeLayoutEffect(() => {
+ if (!supportsInert()) return;
+ if (open) return;
+ if (!mounted) return;
+ if (!domReady) return;
+ const dialog = ref.current;
+ if (!dialog) return;
+ return disableTree(dialog);
+ }, [open, mounted, domReady]);
+ const canTakeTreeSnapshot = open && domReady;
+ useSafeLayoutEffect(() => {
+ if (!id) return;
+ if (!canTakeTreeSnapshot) return;
+ const dialog = ref.current;
+ return createWalkTreeSnapshot(id, [dialog]);
+ }, [id, canTakeTreeSnapshot, unstable_treeSnapshotKey]);
+ const getPersistentElementsProp = useEvent(getPersistentElements);
+ useSafeLayoutEffect(() => {
+ if (!id) return;
+ if (!canTakeTreeSnapshot) return;
+ const { disclosureElement } = store.getState();
+ const dialog = ref.current;
+ const persistentElements = getPersistentElementsProp() || [];
+ const allElements = [
+ dialog,
+ ...persistentElements,
+ ...nestedDialogs.map((dialog2) => dialog2.getState().contentElement)
+ ];
+ if (modal) {
+ return chain(
+ markTreeOutside(id, allElements),
+ disableTreeOutside(id, allElements)
+ );
+ }
+ return markTreeOutside(id, [disclosureElement, ...allElements]);
+ }, [
+ id,
+ store,
+ canTakeTreeSnapshot,
+ getPersistentElementsProp,
+ nestedDialogs,
+ modal,
+ unstable_treeSnapshotKey
+ ]);
+ const mayAutoFocusOnShow = !!autoFocusOnShow;
+ const autoFocusOnShowProp = useBooleanEvent(autoFocusOnShow);
+ const [autoFocusEnabled, setAutoFocusEnabled] = (0,external_React_.useState)(false);
+ (0,external_React_.useEffect)(() => {
+ if (!open) return;
+ if (!mayAutoFocusOnShow) return;
+ if (!domReady) return;
+ if (!(contentElement == null ? void 0 : contentElement.isConnected)) return;
+ const element = getElementFromProp(initialFocus, true) || // If no initial focus is specified, we try to focus the first element
+ // with the autofocus attribute. If it's an Ariakit component, the
+ // Focusable component will consume the autoFocus prop and add the
+ // data-autofocus attribute to the element instead.
+ contentElement.querySelector(
+ "[data-autofocus=true],[autofocus]"
+ ) || // We have to fallback to the first focusable element otherwise portaled
+ // dialogs with preserveTabOrder set to true will not receive focus
+ // properly because the elements aren't tabbable until the dialog receives
+ // focus.
+ getFirstTabbableIn(contentElement, true, portal && preserveTabOrder) || // Finally, we fallback to the dialog element itself.
+ contentElement;
+ const isElementFocusable = isFocusable(element);
+ if (!autoFocusOnShowProp(isElementFocusable ? element : null)) return;
+ setAutoFocusEnabled(true);
+ queueMicrotask(() => {
+ element.focus();
+ if (!JC64G2H7_isSafariBrowser) return;
+ element.scrollIntoView({ block: "nearest", inline: "nearest" });
+ });
+ }, [
+ open,
+ mayAutoFocusOnShow,
+ domReady,
+ contentElement,
+ initialFocus,
+ portal,
+ preserveTabOrder,
+ autoFocusOnShowProp
+ ]);
+ const mayAutoFocusOnHide = !!autoFocusOnHide;
+ const autoFocusOnHideProp = useBooleanEvent(autoFocusOnHide);
+ const [hasOpened, setHasOpened] = (0,external_React_.useState)(false);
+ (0,external_React_.useEffect)(() => {
+ if (!open) return;
+ setHasOpened(true);
+ return () => setHasOpened(false);
+ }, [open]);
+ const focusOnHide = (0,external_React_.useCallback)(
+ (dialog, retry = true) => {
+ const { disclosureElement } = store.getState();
+ if (isAlreadyFocusingAnotherElement(dialog)) return;
+ let element = getElementFromProp(finalFocus) || disclosureElement;
+ if (element == null ? void 0 : element.id) {
+ const doc = getDocument(element);
+ const selector = `[aria-activedescendant="${element.id}"]`;
+ const composite = doc.querySelector(selector);
+ if (composite) {
+ element = composite;
+ }
+ }
+ if (element && !isFocusable(element)) {
+ const maybeParentDialog = element.closest("[data-dialog]");
+ if (maybeParentDialog == null ? void 0 : maybeParentDialog.id) {
+ const doc = getDocument(maybeParentDialog);
+ const selector = `[aria-controls~="${maybeParentDialog.id}"]`;
+ const control = doc.querySelector(selector);
+ if (control) {
+ element = control;
+ }
+ }
+ }
+ const isElementFocusable = element && isFocusable(element);
+ if (!isElementFocusable && retry) {
+ requestAnimationFrame(() => focusOnHide(dialog, false));
return;
- if (!mayAutoFocusOnShow)
- return;
- if (!domReady)
- return;
- if (!(contentElement == null ? void 0 : contentElement.isConnected))
- return;
- const element = getElementFromProp(initialFocus, true) || // If no initial focus is specified, we try to focus the first element
- // with the autofocus attribute. If it's an Ariakit component, the
- // Focusable component will consume the autoFocus prop and add the
- // data-autofocus attribute to the element instead.
- contentElement.querySelector(
- "[data-autofocus=true],[autofocus]"
- ) || // We have to fallback to the first focusable element otherwise portaled
- // dialogs with preserveTabOrder set to true will not receive focus
- // properly because the elements aren't tabbable until the dialog
- // receives focus.
- getFirstTabbableIn(contentElement, true, portal && preserveTabOrder) || // Finally, we fallback to the dialog element itself.
- contentElement;
- const isElementFocusable = isFocusable(element);
- if (!autoFocusOnShowProp(isElementFocusable ? element : null))
- return;
- setAutoFocusEnabled(true);
- queueMicrotask(() => {
- element.focus();
- if (!NERBASET_isSafariBrowser)
- return;
- element.scrollIntoView({ block: "nearest", inline: "nearest" });
- });
- }, [
- open,
- mayAutoFocusOnShow,
- domReady,
- contentElement,
- initialFocus,
- portal,
- preserveTabOrder,
- autoFocusOnShowProp
- ]);
- const mayAutoFocusOnHide = !!autoFocusOnHide;
- const autoFocusOnHideProp = useBooleanEvent(autoFocusOnHide);
- const [hasOpened, setHasOpened] = (0,external_React_.useState)(false);
- (0,external_React_.useEffect)(() => {
- if (!open)
- return;
- setHasOpened(true);
- return () => setHasOpened(false);
- }, [open]);
- const focusOnHide = (0,external_React_.useCallback)(
- (dialog, retry = true) => {
- const { disclosureElement } = store.getState();
- if (isAlreadyFocusingAnotherElement(dialog))
- return;
- let element = getElementFromProp(finalFocus) || disclosureElement;
- if (element == null ? void 0 : element.id) {
- const doc = DLOEKDPY_getDocument(element);
- const selector = `[aria-activedescendant="${element.id}"]`;
- const composite = doc.querySelector(selector);
- if (composite) {
- element = composite;
- }
- }
- if (element && !isFocusable(element)) {
- const maybeParentDialog = DLOEKDPY_closest(element, "[data-dialog]");
- if (maybeParentDialog && maybeParentDialog.id) {
- const doc = DLOEKDPY_getDocument(maybeParentDialog);
- const selector = `[aria-controls~="${maybeParentDialog.id}"]`;
- const control = doc.querySelector(selector);
- if (control) {
- element = control;
- }
- }
- }
- const isElementFocusable = element && isFocusable(element);
- if (!isElementFocusable && retry) {
- requestAnimationFrame(() => focusOnHide(dialog, false));
- return;
- }
- if (!autoFocusOnHideProp(isElementFocusable ? element : null))
- return;
- if (!isElementFocusable)
- return;
- element == null ? void 0 : element.focus();
- },
- [store, finalFocus, autoFocusOnHideProp]
- );
- useSafeLayoutEffect(() => {
- if (open)
- return;
- if (!hasOpened)
- return;
- if (!mayAutoFocusOnHide)
- return;
- const dialog = ref.current;
- focusOnHide(dialog);
- }, [open, hasOpened, domReady, mayAutoFocusOnHide, focusOnHide]);
- (0,external_React_.useEffect)(() => {
- if (!hasOpened)
+ }
+ if (!autoFocusOnHideProp(isElementFocusable ? element : null)) return;
+ if (!isElementFocusable) return;
+ element == null ? void 0 : element.focus();
+ },
+ [store, finalFocus, autoFocusOnHideProp]
+ );
+ const focusedOnHideRef = (0,external_React_.useRef)(false);
+ useSafeLayoutEffect(() => {
+ if (open) return;
+ if (!hasOpened) return;
+ if (!mayAutoFocusOnHide) return;
+ const dialog = ref.current;
+ focusedOnHideRef.current = true;
+ focusOnHide(dialog);
+ }, [open, hasOpened, domReady, mayAutoFocusOnHide, focusOnHide]);
+ (0,external_React_.useEffect)(() => {
+ if (!hasOpened) return;
+ if (!mayAutoFocusOnHide) return;
+ const dialog = ref.current;
+ return () => {
+ if (focusedOnHideRef.current) {
+ focusedOnHideRef.current = false;
return;
- if (!mayAutoFocusOnHide)
- return;
+ }
+ focusOnHide(dialog);
+ };
+ }, [hasOpened, mayAutoFocusOnHide, focusOnHide]);
+ const hideOnEscapeProp = useBooleanEvent(hideOnEscape);
+ (0,external_React_.useEffect)(() => {
+ if (!domReady) return;
+ if (!mounted) return;
+ const onKeyDown = (event) => {
+ if (event.key !== "Escape") return;
+ if (event.defaultPrevented) return;
const dialog = ref.current;
- return () => focusOnHide(dialog);
- }, [hasOpened, mayAutoFocusOnHide, focusOnHide]);
- const hideOnEscapeProp = useBooleanEvent(hideOnEscape);
- (0,external_React_.useEffect)(() => {
- if (!domReady)
- return;
- if (!mounted)
- return;
- const onKeyDown = (event) => {
- if (event.key !== "Escape")
- return;
- if (event.defaultPrevented)
- return;
- const dialog = ref.current;
- if (!dialog)
- return;
- if (isElementMarked(dialog))
- return;
- const target = event.target;
- if (!target)
- return;
- const { disclosureElement } = store.getState();
- const isValidTarget = () => {
- if (target.tagName === "BODY")
- return true;
- if (contains(dialog, target))
- return true;
- if (!disclosureElement)
- return true;
- if (contains(disclosureElement, target))
- return true;
- return false;
- };
- if (!isValidTarget())
- return;
- if (!hideOnEscapeProp(event))
- return;
- store.hide();
+ if (!dialog) return;
+ if (isElementMarked(dialog)) return;
+ const target = event.target;
+ if (!target) return;
+ const { disclosureElement } = store.getState();
+ const isValidTarget = () => {
+ if (target.tagName === "BODY") return true;
+ if (contains(dialog, target)) return true;
+ if (!disclosureElement) return true;
+ if (contains(disclosureElement, target)) return true;
+ return false;
};
- return addGlobalEventListener("keydown", onKeyDown, true);
- }, [store, domReady, mounted, hideOnEscapeProp]);
- props = useWrapElement(
- props,
- (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(HeadingLevel, { level: modal ? 1 : void 0, children: element }),
- [modal]
- );
- const hiddenProp = props.hidden;
- const alwaysVisible = props.alwaysVisible;
- props = useWrapElement(
- props,
- (element) => {
- if (!backdrop)
- return element;
- return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { children: [
- /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(
- DialogBackdrop,
- {
- store,
- backdrop,
- backdropProps,
- hidden: hiddenProp,
- alwaysVisible
- }
- ),
- element
- ] });
- },
- [store, backdrop, backdropProps, hiddenProp, alwaysVisible]
- );
- const [headingId, setHeadingId] = (0,external_React_.useState)();
- const [descriptionId, setDescriptionId] = (0,external_React_.useState)();
- props = useWrapElement(
- props,
- (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(DialogScopedContextProvider, { value: store, children: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(DialogHeadingContext.Provider, { value: setHeadingId, children: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(DialogDescriptionContext.Provider, { value: setDescriptionId, children: element }) }) }),
- [store]
- );
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
- id,
- "data-dialog": "",
- role: "dialog",
- tabIndex: focusable ? -1 : void 0,
- "aria-labelledby": headingId,
- "aria-describedby": descriptionId
- }, props), {
- ref: useMergeRefs(ref, props.ref)
- });
- props = useFocusableContainer(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
- autoFocusOnShow: autoFocusEnabled
- }));
- props = useDisclosureContent(_4R3V3JGP_spreadValues({ store }, props));
- props = useFocusable(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { focusable }));
- props = usePortal(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({ portal }, props), { portalRef, preserveTabOrder }));
- return props;
- }
-);
+ if (!isValidTarget()) return;
+ if (!hideOnEscapeProp(event)) return;
+ store.hide();
+ };
+ return addGlobalEventListener("keydown", onKeyDown, true);
+ }, [store, domReady, mounted, hideOnEscapeProp]);
+ props = useWrapElement(
+ props,
+ (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(HeadingLevel, { level: modal ? 1 : void 0, children: element }),
+ [modal]
+ );
+ const hiddenProp = props.hidden;
+ const alwaysVisible = props.alwaysVisible;
+ props = useWrapElement(
+ props,
+ (element) => {
+ if (!backdrop) return element;
+ return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { children: [
+ /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(
+ DialogBackdrop,
+ {
+ store,
+ backdrop,
+ hidden: hiddenProp,
+ alwaysVisible
+ }
+ ),
+ element
+ ] });
+ },
+ [store, backdrop, hiddenProp, alwaysVisible]
+ );
+ const [headingId, setHeadingId] = (0,external_React_.useState)();
+ const [descriptionId, setDescriptionId] = (0,external_React_.useState)();
+ props = useWrapElement(
+ props,
+ (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(DialogScopedContextProvider, { value: store, children: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(DialogHeadingContext.Provider, { value: setHeadingId, children: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(DialogDescriptionContext.Provider, { value: setDescriptionId, children: element }) }) }),
+ [store]
+ );
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
+ id,
+ "data-dialog": "",
+ role: "dialog",
+ tabIndex: focusable ? -1 : void 0,
+ "aria-labelledby": headingId,
+ "aria-describedby": descriptionId
+ }, props), {
+ ref: useMergeRefs(ref, props.ref)
+ });
+ props = useFocusableContainer(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), {
+ autoFocusOnShow: autoFocusEnabled
+ }));
+ props = useDisclosureContent(_3YLGPPWQ_spreadValues({ store }, props));
+ props = useFocusable(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { focusable }));
+ props = usePortal(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ portal }, props), { portalRef, preserveTabOrder }));
+ return props;
+});
function createDialogComponent(Component, useProviderContext = useDialogProviderContext) {
- return createComponent((props) => {
+ return forwardRef2(function DialogComponent(props) {
const context = useProviderContext();
const store = props.store || context;
const mounted = useStoreState(
store,
(state) => !props.unmountOnHide || (state == null ? void 0 : state.mounted) || !!props.open
);
- if (!mounted)
- return null;
- return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, _4R3V3JGP_spreadValues({}, props));
+ if (!mounted) return null;
+ return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, _3YLGPPWQ_spreadValues({}, props));
});
}
var Dialog = createDialogComponent(
- createComponent((props) => {
+ forwardRef2(function Dialog2(props) {
const htmlProps = useDialog(props);
- return _3ORBWXWF_createElement("div", htmlProps);
+ return LMDWO4NN_createElement(JC64G2H7_TagName, htmlProps);
}),
useDialogProviderContext
);
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
+
+
+
+;// ./node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
const floating_ui_utils_sides = (/* unused pure expression or super */ null && (['top', 'right', 'bottom', 'left']));
const alignments = (/* unused pure expression or super */ null && (['start', 'end']));
const floating_ui_utils_placements = /*#__PURE__*/(/* unused pure expression or super */ null && (floating_ui_utils_sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), [])));
@@ -7156,7 +8514,7 @@
-;// CONCATENATED MODULE: ./node_modules/@floating-ui/core/dist/floating-ui.core.mjs
+;// ./node_modules/@floating-ui/core/dist/floating-ui.core.mjs
@@ -8169,7 +9527,7 @@
-;// CONCATENATED MODULE: ./node_modules/@floating-ui/dom/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
+;// ./node_modules/@floating-ui/dom/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
/**
* Custom positioning reference element.
* @see https://floating-ui.com/docs/virtual-elements
@@ -8289,18 +9647,30 @@
};
}
function dist_floating_ui_utils_rectToClientRect(rect) {
- return {
- ...rect,
- top: rect.y,
- left: rect.x,
- right: rect.x + rect.width,
- bottom: rect.y + rect.height
- };
-}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@floating-ui/dom/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
+ const {
+ x,
+ y,
+ width,
+ height
+ } = rect;
+ return {
+ width,
+ height,
+ top: y,
+ left: x,
+ right: x + width,
+ bottom: y + height,
+ x,
+ y
+ };
+}
+
+
+
+;// ./node_modules/@floating-ui/dom/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
+function hasWindow() {
+ return typeof window !== 'undefined';
+}
function getNodeName(node) {
if (isNode(node)) {
return (node.nodeName || '').toLowerCase();
@@ -8319,17 +9689,25 @@
return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
}
function isNode(value) {
+ if (!hasWindow()) {
+ return false;
+ }
return value instanceof Node || value instanceof floating_ui_utils_dom_getWindow(value).Node;
}
function isElement(value) {
+ if (!hasWindow()) {
+ return false;
+ }
return value instanceof Element || value instanceof floating_ui_utils_dom_getWindow(value).Element;
}
function isHTMLElement(value) {
+ if (!hasWindow()) {
+ return false;
+ }
return value instanceof HTMLElement || value instanceof floating_ui_utils_dom_getWindow(value).HTMLElement;
}
function isShadowRoot(value) {
- // Browsers without `ShadowRoot` support.
- if (typeof ShadowRoot === 'undefined') {
+ if (!hasWindow() || typeof ShadowRoot === 'undefined') {
return false;
}
return value instanceof ShadowRoot || value instanceof floating_ui_utils_dom_getWindow(value).ShadowRoot;
@@ -8346,21 +9724,32 @@
function isTableElement(element) {
return ['table', 'td', 'th'].includes(getNodeName(element));
}
-function isContainingBlock(element) {
+function isTopLayer(element) {
+ return [':popover-open', ':modal'].some(selector => {
+ try {
+ return element.matches(selector);
+ } catch (e) {
+ return false;
+ }
+ });
+}
+function isContainingBlock(elementOrCss) {
const webkit = isWebKit();
- const css = floating_ui_utils_dom_getComputedStyle(element);
+ const css = isElement(elementOrCss) ? floating_ui_utils_dom_getComputedStyle(elementOrCss) : elementOrCss;
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
- return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
+ // https://drafts.csswg.org/css-transforms-2/#individual-transforms
+ return ['transform', 'translate', 'scale', 'rotate', 'perspective'].some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
}
function getContainingBlock(element) {
let currentNode = getParentNode(element);
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
if (isContainingBlock(currentNode)) {
return currentNode;
- } else {
- currentNode = getParentNode(currentNode);
- }
+ } else if (isTopLayer(currentNode)) {
+ return null;
+ }
+ currentNode = getParentNode(currentNode);
}
return null;
}
@@ -8382,8 +9771,8 @@
};
}
return {
- scrollLeft: element.pageXOffset,
- scrollTop: element.pageYOffset
+ scrollLeft: element.scrollX,
+ scrollTop: element.scrollY
};
}
function getParentNode(node) {
@@ -8423,14 +9812,18 @@
const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
const win = floating_ui_utils_dom_getWindow(scrollableAncestor);
if (isBody) {
- return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], win.frameElement && traverseIframes ? getOverflowAncestors(win.frameElement) : []);
+ const frameElement = getFrameElement(win);
+ return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
}
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
+function getFrameElement(win) {
+ return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
+}
+
+
+
+;// ./node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
@@ -8565,7 +9958,7 @@
}
const topLayerSelectors = [':popover-open', ':modal'];
-function isTopLayer(floating) {
+function floating_ui_dom_isTopLayer(floating) {
return topLayerSelectors.some(selector => {
try {
return floating.matches(selector);
@@ -8584,7 +9977,7 @@
} = _ref;
const isFixed = strategy === 'fixed';
const documentElement = getDocumentElement(offsetParent);
- const topLayer = elements ? isTopLayer(elements.floating) : false;
+ const topLayer = elements ? floating_ui_dom_isTopLayer(elements.floating) : false;
if (offsetParent === documentElement || topLayer && isFixed) {
return rect;
}
@@ -8832,7 +10225,7 @@
// such as table ancestors and cross browser bugs.
function getOffsetParent(element, polyfill) {
const window = floating_ui_utils_dom_getWindow(element);
- if (!isHTMLElement(element) || isTopLayer(element)) {
+ if (!isHTMLElement(element) || floating_ui_dom_isTopLayer(element)) {
return window;
}
let offsetParent = getTrueOffsetParent(element, polyfill);
@@ -9111,7 +10504,7 @@
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/IRX7SFUJ.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/T6C2RYFI.js
"use client";
@@ -9124,6 +10517,7 @@
+var T6C2RYFI_TagName = "div";
function createDOMRect(x = 0, y = 0, width = 0, height = 0) {
if (typeof DOMRect === "function") {
return new DOMRect(x, y, width, height);
@@ -9138,11 +10532,10 @@
bottom: y + height,
left: x
};
- return _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, rect), { toJSON: () => rect });
+ return _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, rect), { toJSON: () => rect });
}
function getDOMRect(anchorRect) {
- if (!anchorRect)
- return createDOMRect();
+ if (!anchorRect) return createDOMRect();
const { x, y, width, height } = anchorRect;
return createDOMRect(x, y, width, height);
}
@@ -9181,8 +10574,7 @@
});
}
function getFlipMiddleware(props) {
- if (props.flip === false)
- return;
+ if (props.flip === false) return;
const fallbackPlacements = typeof props.flip === "string" ? props.flip.split(" ") : void 0;
invariant(
!fallbackPlacements || fallbackPlacements.every(isValidPlacement),
@@ -9194,8 +10586,7 @@
});
}
function getShiftMiddleware(props) {
- if (!props.slide && !props.overlap)
- return;
+ if (!props.slide && !props.overlap) return;
return floating_ui_dom_shift({
mainAxis: props.slide,
crossAxis: props.overlap,
@@ -9234,15 +10625,14 @@
});
}
function getArrowMiddleware(arrowElement, props) {
- if (!arrowElement)
- return;
+ if (!arrowElement) return;
return floating_ui_dom_arrow({
element: arrowElement,
padding: props.arrowPadding
});
}
var usePopover = createHook(
- (_a) => {
+ function usePopover2(_a) {
var _b = _a, {
store,
modal = false,
@@ -9296,27 +10686,30 @@
const placement = store.useState("placement");
const mounted = store.useState("mounted");
const rendered = store.useState("rendered");
+ const defaultArrowElementRef = (0,external_React_.useRef)(null);
const [positioned, setPositioned] = (0,external_React_.useState)(false);
const { portalRef, domReady } = usePortalRef(portal, props.portalRef);
const getAnchorRectProp = useEvent(getAnchorRect);
const updatePositionProp = useEvent(updatePosition);
const hasCustomUpdatePosition = !!updatePosition;
useSafeLayoutEffect(() => {
- if (!(popoverElement == null ? void 0 : popoverElement.isConnected))
- return;
+ if (!(popoverElement == null ? void 0 : popoverElement.isConnected)) return;
popoverElement.style.setProperty(
"--popover-overflow-padding",
`${overflowPadding}px`
);
const anchor = getAnchorElement(anchorElement, getAnchorRectProp);
const updatePosition2 = async () => {
- if (!mounted)
- return;
+ if (!mounted) return;
+ if (!arrowElement) {
+ defaultArrowElementRef.current = defaultArrowElementRef.current || document.createElement("div");
+ }
+ const arrow2 = arrowElement || defaultArrowElementRef.current;
const middleware = [
- getOffsetMiddleware(arrowElement, { gutter, shift: shift2 }),
+ getOffsetMiddleware(arrow2, { gutter, shift: shift2 }),
getFlipMiddleware({ flip: flip2, overflowPadding }),
getShiftMiddleware({ slide, shift: shift2, overlap, overflowPadding }),
- getArrowMiddleware(arrowElement, { arrowPadding }),
+ getArrowMiddleware(arrow2, { arrowPadding }),
getSizeMiddleware({
sameWidth,
fitViewport,
@@ -9337,13 +10730,26 @@
left: "0",
transform: `translate3d(${x}px,${y}px,0)`
});
- if (arrowElement && pos.middlewareData.arrow) {
+ if (arrow2 && pos.middlewareData.arrow) {
const { x: arrowX, y: arrowY } = pos.middlewareData.arrow;
- const dir = pos.placement.split("-")[0];
- Object.assign(arrowElement.style, {
+ const side = pos.placement.split("-")[0];
+ const centerX = arrow2.clientWidth / 2;
+ const centerY = arrow2.clientHeight / 2;
+ const originX = arrowX != null ? arrowX + centerX : -centerX;
+ const originY = arrowY != null ? arrowY + centerY : -centerY;
+ popoverElement.style.setProperty(
+ "--popover-transform-origin",
+ {
+ top: `${originX}px calc(100% + ${centerY}px)`,
+ bottom: `${originX}px ${-centerY}px`,
+ left: `calc(100% + ${centerX}px) ${originY}px`,
+ right: `${-centerX}px ${originY}px`
+ }[side]
+ );
+ Object.assign(arrow2.style, {
left: arrowX != null ? `${arrowX}px` : "",
top: arrowY != null ? `${arrowY}px` : "",
- [dir]: "100%"
+ [side]: "100%"
});
}
};
@@ -9388,14 +10794,10 @@
updatePositionProp
]);
useSafeLayoutEffect(() => {
- if (!mounted)
- return;
- if (!domReady)
- return;
- if (!(popoverElement == null ? void 0 : popoverElement.isConnected))
- return;
- if (!(contentElement == null ? void 0 : contentElement.isConnected))
- return;
+ if (!mounted) return;
+ if (!domReady) return;
+ if (!(popoverElement == null ? void 0 : popoverElement.isConnected)) return;
+ if (!(contentElement == null ? void 0 : contentElement.isConnected)) return;
const applyZIndex = () => {
popoverElement.style.zIndex = getComputedStyle(contentElement).zIndex;
};
@@ -9410,10 +10812,8 @@
props,
(element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(
"div",
- _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
- role: "presentation"
- }, wrapperProps), {
- style: _4R3V3JGP_spreadValues({
+ _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, wrapperProps), {
+ style: _3YLGPPWQ_spreadValues({
// https://floating-ui.com/docs/computeposition#initial-layout
position,
top: 0,
@@ -9431,18 +10831,18 @@
(element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(PopoverScopedContextProvider, { value: store, children: element }),
[store]
);
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
// data-placing is not part of the public API. We're setting this here so
// we can wait for the popover to be positioned before other components
// move focus into it. For example, this attribute is observed by the
// Combobox component with the autoSelect behavior.
- "data-placing": !positioned ? "" : void 0
+ "data-placing": !positioned || void 0
}, props), {
- style: _4R3V3JGP_spreadValues({
+ style: _3YLGPPWQ_spreadValues({
position: "relative"
}, props.style)
});
- props = useDialog(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
+ props = useDialog(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
store,
modal,
portal,
@@ -9456,17 +10856,16 @@
}
);
var Popover = createDialogComponent(
- createComponent((props) => {
+ forwardRef2(function Popover2(props) {
const htmlProps = usePopover(props);
- return _3ORBWXWF_createElement("div", htmlProps);
+ return LMDWO4NN_createElement(T6C2RYFI_TagName, htmlProps);
}),
usePopoverProviderContext
);
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/QWSZGSIG.js
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/KQKDTOT4.js
"use client";
@@ -9484,15 +10883,12 @@
+var KQKDTOT4_TagName = "div";
function isMovingOnHovercard(target, card, anchor, nested) {
- if (hasFocusWithin(card))
- return true;
- if (!target)
- return false;
- if (contains(card, target))
- return true;
- if (anchor && contains(anchor, target))
- return true;
+ if (hasFocusWithin(card)) return true;
+ if (!target) return false;
+ if (contains(card, target)) return true;
+ if (anchor && contains(anchor, target)) return true;
if (nested == null ? void 0 : nested.some((card2) => isMovingOnHovercard(target, card2, anchor))) {
return true;
}
@@ -9514,8 +10910,7 @@
const onFocusProp = props.onFocus;
const onFocus = useEvent((event) => {
onFocusProp == null ? void 0 : onFocusProp(event);
- if (event.defaultPrevented)
- return;
+ if (event.defaultPrevented) return;
setAutoFocusOnHide(true);
});
const finalFocusRef = (0,external_React_.useRef)(null);
@@ -9524,7 +10919,7 @@
finalFocusRef.current = state.anchorElement;
});
}, []);
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
autoFocusOnHide,
finalFocus: finalFocusRef
}, props), {
@@ -9534,7 +10929,7 @@
}
var NestedHovercardContext = (0,external_React_.createContext)(null);
var useHovercard = createHook(
- (_a) => {
+ function useHovercard2(_a) {
var _b = _a, {
store,
modal = false,
@@ -9561,6 +10956,7 @@
const hideTimeoutRef = (0,external_React_.useRef)(0);
const enterPointRef = (0,external_React_.useRef)(null);
const { portalRef, domReady } = usePortalRef(portal, props.portalRef);
+ const isMouseMoving = useIsMouseMoving();
const mayHideOnHoverOutside = !!hideOnHoverOutside;
const hideOnHoverOutsideProp = useBooleanEvent(hideOnHoverOutside);
const mayDisablePointerEvents = !!disablePointerEventsOnApproach;
@@ -9570,18 +10966,14 @@
const open = store.useState("open");
const mounted = store.useState("mounted");
(0,external_React_.useEffect)(() => {
- if (!domReady)
- return;
- if (!mounted)
- return;
- if (!mayHideOnHoverOutside && !mayDisablePointerEvents)
- return;
+ if (!domReady) return;
+ if (!mounted) return;
+ if (!mayHideOnHoverOutside && !mayDisablePointerEvents) return;
const element = ref.current;
- if (!element)
- return;
+ if (!element) return;
const onMouseMove = (event) => {
- if (!store)
- return;
+ if (!store) return;
+ if (!isMouseMoving()) return;
const { anchorElement, hideTimeout, timeout } = store.getState();
const enterPoint = enterPointRef.current;
const [target] = event.composedPath();
@@ -9592,22 +10984,19 @@
hideTimeoutRef.current = 0;
return;
}
- if (hideTimeoutRef.current)
- return;
+ if (hideTimeoutRef.current) return;
if (enterPoint) {
const currentPoint = getEventPoint(event);
const polygon = getElementPolygon(element, enterPoint);
if (isPointInPolygon(currentPoint, polygon)) {
enterPointRef.current = currentPoint;
- if (!disablePointerEventsProp(event))
- return;
+ if (!disablePointerEventsProp(event)) return;
event.preventDefault();
event.stopPropagation();
return;
}
}
- if (!hideOnHoverOutsideProp(event))
- return;
+ if (!hideOnHoverOutsideProp(event)) return;
hideTimeoutRef.current = window.setTimeout(() => {
hideTimeoutRef.current = 0;
store == null ? void 0 : store.hide();
@@ -9619,6 +11008,7 @@
);
}, [
store,
+ isMouseMoving,
domReady,
mounted,
mayHideOnHoverOutside,
@@ -9628,23 +11018,17 @@
hideOnHoverOutsideProp
]);
(0,external_React_.useEffect)(() => {
- if (!domReady)
- return;
- if (!mounted)
- return;
- if (!mayDisablePointerEvents)
- return;
+ if (!domReady) return;
+ if (!mounted) return;
+ if (!mayDisablePointerEvents) return;
const disableEvent = (event) => {
const element = ref.current;
- if (!element)
- return;
+ if (!element) return;
const enterPoint = enterPointRef.current;
- if (!enterPoint)
- return;
+ if (!enterPoint) return;
const polygon = getElementPolygon(element, enterPoint);
if (isPointInPolygon(getEventPoint(event), polygon)) {
- if (!disablePointerEventsProp(event))
- return;
+ if (!disablePointerEventsProp(event)) return;
event.preventDefault();
event.stopPropagation();
}
@@ -9658,16 +11042,13 @@
);
}, [domReady, mounted, mayDisablePointerEvents, disablePointerEventsProp]);
(0,external_React_.useEffect)(() => {
- if (!domReady)
- return;
- if (open)
- return;
+ if (!domReady) return;
+ if (open) return;
store == null ? void 0 : store.setAutoFocusOnShow(false);
}, [store, domReady, open]);
const openRef = useLiveRef(open);
(0,external_React_.useEffect)(() => {
- if (!domReady)
- return;
+ if (!domReady) return;
return () => {
if (!openRef.current) {
store == null ? void 0 : store.setAutoFocusOnShow(false);
@@ -9676,17 +11057,12 @@
}, [store, domReady]);
const registerOnParent = (0,external_React_.useContext)(NestedHovercardContext);
useSafeLayoutEffect(() => {
- if (modal)
- return;
- if (!portal)
- return;
- if (!mounted)
- return;
- if (!domReady)
- return;
+ if (modal) return;
+ if (!portal) return;
+ if (!mounted) return;
+ if (!domReady) return;
const element = ref.current;
- if (!element)
- return;
+ if (!element) return;
return registerOnParent == null ? void 0 : registerOnParent(element);
}, [modal, portal, mounted, domReady]);
const registerNestedHovercard = (0,external_React_.useCallback)(
@@ -9707,14 +11083,14 @@
(element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(HovercardScopedContextProvider, { value: store, children: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(NestedHovercardContext.Provider, { value: registerNestedHovercard, children: element }) }),
[store, registerNestedHovercard]
);
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), {
ref: useMergeRefs(ref, props.ref)
});
- props = useAutoFocusOnHide(_4R3V3JGP_spreadValues({ store }, props));
+ props = useAutoFocusOnHide(_3YLGPPWQ_spreadValues({ store }, props));
const autoFocusOnShow = store.useState(
(state) => modal || state.autoFocusOnShow
);
- props = usePopover(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
+ props = usePopover(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
store,
modal,
portal,
@@ -9722,8 +11098,7 @@
}, props), {
portalRef,
hideOnEscape(event) {
- if (isFalsyBooleanCallback(hideOnEscape, event))
- return false;
+ if (isFalsyBooleanCallback(hideOnEscape, event)) return false;
requestAnimationFrame(() => {
requestAnimationFrame(() => {
store == null ? void 0 : store.hide();
@@ -9736,18 +11111,18 @@
}
);
var Hovercard = createDialogComponent(
- createComponent((props) => {
+ forwardRef2(function Hovercard2(props) {
const htmlProps = useHovercard(props);
- return _3ORBWXWF_createElement("div", htmlProps);
+ return LMDWO4NN_createElement(KQKDTOT4_TagName, htmlProps);
}),
useHovercardProviderContext
);
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/tooltip/tooltip.js
-"use client";
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/tooltip/tooltip.js
+"use client";
+
@@ -9794,8 +11169,9 @@
+var tooltip_TagName = "div";
var useTooltip = createHook(
- (_a) => {
+ function useTooltip2(_a) {
var _b = _a, {
store,
portal = true,
@@ -9825,30 +11201,24 @@
const role = store.useState(
(state) => state.type === "description" ? "tooltip" : "none"
);
- props = _4R3V3JGP_spreadValues({ role }, props);
- props = useHovercard(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
+ props = _3YLGPPWQ_spreadValues({ role }, props);
+ props = useHovercard(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), {
store,
portal,
gutter,
preserveTabOrder,
- hideOnHoverOutside: (event) => {
- if (isFalsyBooleanCallback(hideOnHoverOutside, event))
- return false;
+ hideOnHoverOutside(event) {
+ if (isFalsyBooleanCallback(hideOnHoverOutside, event)) return false;
const anchorElement = store == null ? void 0 : store.getState().anchorElement;
- if (!anchorElement)
- return true;
- if ("focusVisible" in anchorElement.dataset)
- return false;
+ if (!anchorElement) return true;
+ if ("focusVisible" in anchorElement.dataset) return false;
return true;
},
hideOnInteractOutside: (event) => {
- if (isFalsyBooleanCallback(hideOnInteractOutside, event))
- return false;
+ if (isFalsyBooleanCallback(hideOnInteractOutside, event)) return false;
const anchorElement = store == null ? void 0 : store.getState().anchorElement;
- if (!anchorElement)
- return true;
- if (contains(anchorElement, event.target))
- return false;
+ if (!anchorElement) return true;
+ if (contains(anchorElement, event.target)) return false;
return true;
}
}));
@@ -9856,21 +11226,18 @@
}
);
var Tooltip = createDialogComponent(
- createComponent((props) => {
+ forwardRef2(function Tooltip2(props) {
const htmlProps = useTooltip(props);
- return _3ORBWXWF_createElement("div", htmlProps);
+ return LMDWO4NN_createElement(tooltip_TagName, htmlProps);
}),
useTooltipProviderContext
);
-if (false) {}
-
-
-;// CONCATENATED MODULE: external ["wp","element"]
-const external_wp_element_namespaceObject = window["wp"]["element"];
-;// CONCATENATED MODULE: external ["wp","deprecated"]
+
+
+;// external ["wp","deprecated"]
const external_wp_deprecated_namespaceObject = window["wp"]["deprecated"];
var external_wp_deprecated_default = /*#__PURE__*/__webpack_require__.n(external_wp_deprecated_namespaceObject);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/shortcut/index.js
+;// ./node_modules/@wordpress/components/build-module/shortcut/index.js
/**
* Internal dependencies
@@ -9914,11 +11281,10 @@
}
/* harmony default export */ const build_module_shortcut = (Shortcut);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/popover/utils.js
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
+;// ./node_modules/@wordpress/components/build-module/popover/utils.js
+/**
+ * External dependencies
+ */
/**
* Internal dependencies
@@ -10164,24 +11530,23 @@
*/
const computePopoverPosition = c => c === null || Number.isNaN(c) ? undefined : Math.round(c);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tooltip/index.js
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/tooltip/index.js
+/**
+ * External dependencies
+ */
+
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -10200,6 +11565,7 @@
function UnforwardedTooltip(props, ref) {
const {
children,
+ className,
delay = TOOLTIP_DELAY,
hideOnClick = true,
placement,
@@ -10238,23 +11604,38 @@
placement: computedPlacement,
showTimeout: delay
});
+ const mounted = useStoreState(tooltipStore, 'mounted');
if (isNestedInTooltip) {
return isOnlyChild ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Role, {
...restProps,
render: children
}) : children;
}
+
+ // TODO: this is a temporary workaround to minimize the effects of the
+ // Ariakit upgrade. Ariakit doesn't pass the `aria-describedby` prop to
+ // the tooltip anchor anymore since 0.4.0, so we need to add it manually.
+ // The `aria-describedby` attribute is added only if the anchor doesn't have
+ // one already, and if the tooltip text is not the same as the anchor's
+ // `aria-label`
+ // See: https://github.com/WordPress/gutenberg/pull/64066
+ // See: https://github.com/WordPress/gutenberg/pull/65989
+ function addDescribedById(element) {
+ return describedById && mounted && element.props['aria-describedby'] === undefined && element.props['aria-label'] !== text ? (0,external_wp_element_namespaceObject.cloneElement)(element, {
+ 'aria-describedby': describedById
+ }) : element;
+ }
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(TooltipInternalContext.Provider, {
value: CONTEXT_VALUE,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TooltipAnchor, {
onClick: hideOnClick ? tooltipStore.hide : undefined,
store: tooltipStore,
- render: isOnlyChild ? children : undefined,
+ render: isOnlyChild ? addDescribedById(children) : undefined,
ref: ref,
children: isOnlyChild ? undefined : children
}), isOnlyChild && (text || shortcut) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Tooltip, {
...restProps,
- className: "components-tooltip",
+ className: dist_clsx('components-tooltip', className),
unmountOnHide: true,
gutter: 4,
id: describedById,
@@ -10270,7 +11651,7 @@
const tooltip_Tooltip = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTooltip);
/* harmony default export */ const tooltip = (tooltip_Tooltip);
-;// CONCATENATED MODULE: external ["wp","warning"]
+;// external ["wp","warning"]
const external_wp_warning_namespaceObject = window["wp"]["warning"];
var external_wp_warning_default = /*#__PURE__*/__webpack_require__.n(external_wp_warning_namespaceObject);
// EXTERNAL MODULE: ./node_modules/deepmerge/dist/cjs.js
@@ -10279,7 +11660,7 @@
// EXTERNAL MODULE: ./node_modules/fast-deep-equal/es6/index.js
var es6 = __webpack_require__(7734);
var es6_default = /*#__PURE__*/__webpack_require__.n(es6);
-;// CONCATENATED MODULE: ./node_modules/is-plain-object/dist/is-plain-object.mjs
+;// ./node_modules/is-plain-object/dist/is-plain-object.mjs
/*!
* is-plain-object <https://github.com/jonschlinkert/is-plain-object>
*
@@ -10315,7 +11696,7 @@
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.js
+;// ./node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.js
/**
* WordPress dependencies
*/
@@ -10324,48 +11705,49 @@
/**
* A `React.useEffect` that will not run on the first render.
* Source:
- * https://github.com/ariakit/ariakit/blob/reakit/packages/reakit-utils/src/useUpdateEffect.ts
+ * https://github.com/ariakit/ariakit/blob/main/packages/ariakit-react-core/src/utils/hooks.ts
*
* @param {import('react').EffectCallback} effect
* @param {import('react').DependencyList} deps
*/
function use_update_effect_useUpdateEffect(effect, deps) {
- const mounted = (0,external_wp_element_namespaceObject.useRef)(false);
+ const mountedRef = (0,external_wp_element_namespaceObject.useRef)(false);
(0,external_wp_element_namespaceObject.useEffect)(() => {
- if (mounted.current) {
+ if (mountedRef.current) {
return effect();
}
- mounted.current = true;
+ mountedRef.current = true;
return undefined;
- // Disable reasons:
// 1. This hook needs to pass a dep list that isn't an array literal
// 2. `effect` is missing from the array, and will need to be added carefully to avoid additional warnings
// see https://github.com/WordPress/gutenberg/pull/41166
- // eslint-disable-next-line react-hooks/exhaustive-deps
}, deps);
+ (0,external_wp_element_namespaceObject.useEffect)(() => () => {
+ mountedRef.current = false;
+ }, []);
}
/* harmony default export */ const use_update_effect = (use_update_effect_useUpdateEffect);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/context/context-system-provider.js
-/**
- * External dependencies
- */
-
-
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
-
-const ComponentsContext = (0,external_wp_element_namespaceObject.createContext)( /** @type {Record<string, any>} */{});
+;// ./node_modules/@wordpress/components/build-module/context/context-system-provider.js
+/**
+ * External dependencies
+ */
+
+
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+const ComponentsContext = (0,external_wp_element_namespaceObject.createContext)(/** @type {Record<string, any>} */{});
const useComponentsContext = () => (0,external_wp_element_namespaceObject.useContext)(ComponentsContext);
/**
@@ -10444,7 +11826,7 @@
};
const ContextSystemProvider = (0,external_wp_element_namespaceObject.memo)(BaseContextSystemProvider);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/context/constants.js
+;// ./node_modules/@wordpress/components/build-module/context/constants.js
const COMPONENT_NAMESPACE = 'data-wp-component';
const CONNECTED_NAMESPACE = 'data-wp-c16t';
@@ -10454,7 +11836,7 @@
*/
const CONNECT_STATIC_NAMESPACE = '__contextSystemKey__';
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/context/utils.js
+;// ./node_modules/@wordpress/components/build-module/context/utils.js
/**
* Internal dependencies
*/
@@ -10495,7 +11877,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/tslib/tslib.es6.mjs
+;// ./node_modules/tslib/tslib.es6.mjs
/******************************************************************************
Copyright (c) Microsoft Corporation.
@@ -10510,7 +11892,7 @@
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
@@ -10621,8 +12003,8 @@
}
function __generator(thisArg, body) {
- var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
- return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+ return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
@@ -10726,8 +12108,9 @@
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
- return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
- function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+ return i = Object.create((typeof AsyncIterator === "function" ? AsyncIterator : Object).prototype), verb("next"), verb("throw"), verb("return", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;
+ function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }
+ function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }
function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
@@ -10760,10 +12143,19 @@
o["default"] = v;
};
+var ownKeys = function(o) {
+ ownKeys = Object.getOwnPropertyNames || function (o) {
+ var ar = [];
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+ return ar;
+ };
+ return ownKeys(o);
+};
+
function __importStar(mod) {
if (mod && mod.__esModule) return mod;
var result = {};
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
}
@@ -10793,16 +12185,18 @@
function __addDisposableResource(env, value, async) {
if (value !== null && value !== void 0) {
if (typeof value !== "object" && typeof value !== "function") throw new TypeError("Object expected.");
- var dispose;
+ var dispose, inner;
if (async) {
- if (!Symbol.asyncDispose) throw new TypeError("Symbol.asyncDispose is not defined.");
- dispose = value[Symbol.asyncDispose];
+ if (!Symbol.asyncDispose) throw new TypeError("Symbol.asyncDispose is not defined.");
+ dispose = value[Symbol.asyncDispose];
}
if (dispose === void 0) {
- if (!Symbol.dispose) throw new TypeError("Symbol.dispose is not defined.");
- dispose = value[Symbol.dispose];
+ if (!Symbol.dispose) throw new TypeError("Symbol.dispose is not defined.");
+ dispose = value[Symbol.dispose];
+ if (async) inner = dispose;
}
if (typeof dispose !== "function") throw new TypeError("Object not disposable.");
+ if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };
env.stack.push({ value: value, dispose: dispose, async: async });
}
else if (async) {
@@ -10821,28 +12215,46 @@
env.error = env.hasError ? new _SuppressedError(e, env.error, "An error was suppressed during disposal.") : e;
env.hasError = true;
}
+ var r, s = 0;
function next() {
- while (env.stack.length) {
- var rec = env.stack.pop();
+ while (r = env.stack.pop()) {
try {
- var result = rec.dispose && rec.dispose.call(rec.value);
- if (rec.async) return Promise.resolve(result).then(next, function(e) { fail(e); return next(); });
+ if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);
+ if (r.dispose) {
+ var result = r.dispose.call(r.value);
+ if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });
+ }
+ else s |= 1;
}
catch (e) {
- fail(e);
- }
- }
+ fail(e);
+ }
+ }
+ if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();
if (env.hasError) throw env.error;
}
return next();
}
+function __rewriteRelativeImportExtension(path, preserveJsx) {
+ if (typeof path === "string" && /^\.\.?\//.test(path)) {
+ return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
+ return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
+ });
+ }
+ return path;
+}
+
/* harmony default export */ const tslib_es6 = ({
__extends,
__assign,
__rest,
__decorate,
__param,
+ __esDecorate,
+ __runInitializers,
+ __propKey,
+ __setFunctionName,
__metadata,
__awaiter,
__generator,
@@ -10865,9 +12277,10 @@
__classPrivateFieldIn,
__addDisposableResource,
__disposeResources,
-});
-
-;// CONCATENATED MODULE: ./node_modules/lower-case/dist.es2015/index.js
+ __rewriteRelativeImportExtension,
+});
+
+;// ./node_modules/lower-case/dist.es2015/index.js
/**
* Source: ftp://ftp.unicode.org/Public/UCD/latest/ucd/SpecialCasing.txt
*/
@@ -10916,7 +12329,7 @@
return str.toLowerCase();
}
-;// CONCATENATED MODULE: ./node_modules/no-case/dist.es2015/index.js
+;// ./node_modules/no-case/dist.es2015/index.js
// Support camel case ("camelCase" -> "camel Case" and "CAMELCase" -> "CAMEL Case").
var DEFAULT_SPLIT_REGEXP = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g];
@@ -10948,7 +12361,7 @@
return re.reduce(function (input, re) { return input.replace(re, value); }, input);
}
-;// CONCATENATED MODULE: ./node_modules/dot-case/dist.es2015/index.js
+;// ./node_modules/dot-case/dist.es2015/index.js
function dotCase(input, options) {
@@ -10956,7 +12369,7 @@
return noCase(input, __assign({ delimiter: "." }, options));
}
-;// CONCATENATED MODULE: ./node_modules/param-case/dist.es2015/index.js
+;// ./node_modules/param-case/dist.es2015/index.js
function paramCase(input, options) {
@@ -10964,7 +12377,7 @@
return dotCase(input, __assign({ delimiter: "-" }, options));
}
-;// CONCATENATED MODULE: ./node_modules/memize/dist/index.js
+;// ./node_modules/memize/dist/index.js
/**
* Memize options object.
*
@@ -11126,7 +12539,7 @@
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/context/get-styled-class-name-from-key.js
+;// ./node_modules/@wordpress/components/build-module/context/get-styled-class-name-from-key.js
/**
* External dependencies
*/
@@ -11145,7 +12558,7 @@
}
const getStyledClassNameFromKey = memize(getStyledClassName);
-;// CONCATENATED MODULE: ./node_modules/@emotion/sheet/dist/emotion-sheet.browser.esm.js
+;// ./node_modules/@emotion/sheet/dist/emotion-sheet.browser.esm.js
/*
Based off glamor's StyleSheet, thanks Sunil ❤️
@@ -11287,7 +12700,7 @@
-;// CONCATENATED MODULE: ./node_modules/stylis/src/Utility.js
+;// ./node_modules/stylis/src/Utility.js
/**
* @param {number}
* @return {number}
@@ -11404,7 +12817,7 @@
return array.map(callback).join('')
}
-;// CONCATENATED MODULE: ./node_modules/stylis/src/Tokenizer.js
+;// ./node_modules/stylis/src/Tokenizer.js
var line = 1
@@ -11652,7 +13065,7 @@
return slice(index, position)
}
-;// CONCATENATED MODULE: ./node_modules/stylis/src/Enum.js
+;// ./node_modules/stylis/src/Enum.js
var Enum_MS = '-ms-'
var Enum_MOZ = '-moz-'
var Enum_WEBKIT = '-webkit-'
@@ -11674,7 +13087,7 @@
var COUNTER_STYLE = '@counter-style'
var FONT_FEATURE_VALUES = '@font-feature-values'
-;// CONCATENATED MODULE: ./node_modules/stylis/src/Serializer.js
+;// ./node_modules/stylis/src/Serializer.js
@@ -11711,7 +13124,7 @@
return Utility_strlen(children = Serializer_serialize(element.children, callback)) ? element.return = element.value + '{' + children + '}' : ''
}
-;// CONCATENATED MODULE: ./node_modules/stylis/src/Middleware.js
+;// ./node_modules/stylis/src/Middleware.js
@@ -11821,7 +13234,7 @@
}
}
-;// CONCATENATED MODULE: ./node_modules/stylis/src/Parser.js
+;// ./node_modules/stylis/src/Parser.js
@@ -12014,7 +13427,7 @@
return node(value, root, parent, Enum_DECLARATION, Utility_substr(value, 0, length), Utility_substr(value, length + 1, -1), length)
}
-;// CONCATENATED MODULE: ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js
+;// ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js
@@ -12569,7 +13982,7 @@
/* harmony default export */ const emotion_cache_browser_esm = (createCache);
-;// CONCATENATED MODULE: ./node_modules/@emotion/hash/dist/emotion-hash.esm.js
+;// ./node_modules/@emotion/hash/dist/emotion-hash.esm.js
/* eslint-disable */
// Inspired by https://github.com/garycourt/murmurhash-js
// Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86
@@ -12626,7 +14039,7 @@
/* harmony default export */ const emotion_hash_esm = (murmur2);
-;// CONCATENATED MODULE: ./node_modules/@emotion/unitless/dist/emotion-unitless.esm.js
+;// ./node_modules/@emotion/unitless/dist/emotion-unitless.esm.js
var unitlessKeys = {
animationIterationCount: 1,
borderImageOutset: 1,
@@ -12678,7 +14091,7 @@
/* harmony default export */ const emotion_unitless_esm = (unitlessKeys);
-;// CONCATENATED MODULE: ./node_modules/@emotion/serialize/node_modules/@emotion/memoize/dist/emotion-memoize.esm.js
+;// ./node_modules/@emotion/memoize/dist/emotion-memoize.esm.js
function memoize(fn) {
var cache = Object.create(null);
return function (arg) {
@@ -12689,7 +14102,7 @@
-;// CONCATENATED MODULE: ./node_modules/@emotion/serialize/dist/emotion-serialize.browser.esm.js
+;// ./node_modules/@emotion/serialize/dist/emotion-serialize.browser.esm.js
@@ -12938,7 +14351,7 @@
-;// CONCATENATED MODULE: ./node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.browser.esm.js
+;// ./node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.browser.esm.js
@@ -12952,7 +14365,7 @@
-;// CONCATENATED MODULE: ./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js
+;// ./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js
@@ -13166,7 +14579,7 @@
-;// CONCATENATED MODULE: ./node_modules/@emotion/utils/dist/emotion-utils.browser.esm.js
+;// ./node_modules/@emotion/utils/dist/emotion-utils.browser.esm.js
var isBrowser = "object" !== 'undefined';
function emotion_utils_browser_esm_getRegisteredStyles(registered, registeredStyles, classNames) {
var rawClassName = '';
@@ -13212,7 +14625,7 @@
-;// CONCATENATED MODULE: ./node_modules/@emotion/css/create-instance/dist/emotion-css-create-instance.esm.js
+;// ./node_modules/@emotion/css/create-instance/dist/emotion-css-create-instance.esm.js
@@ -13356,7 +14769,7 @@
/* harmony default export */ const emotion_css_create_instance_esm = (createEmotion);
-;// CONCATENATED MODULE: ./node_modules/@emotion/css/dist/emotion-css.esm.js
+;// ./node_modules/@emotion/css/dist/emotion-css.esm.js
@@ -13378,7 +14791,7 @@
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/hooks/use-cx.js
+;// ./node_modules/@wordpress/components/build-module/utils/hooks/use-cx.js
/**
* External dependencies
*/
@@ -13434,7 +14847,7 @@
return cx;
};
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/context/use-context-system.js
+;// ./node_modules/@wordpress/components/build-module/context/use-context-system.js
/**
* WordPress dependencies
*/
@@ -13507,7 +14920,7 @@
return finalComponentProps;
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/context/context-connect.js
+;// ./node_modules/@wordpress/components/build-module/context/context-connect.js
/**
* External dependencies
*/
@@ -13625,7 +15038,7 @@
return false;
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/visually-hidden/styles.js
+;// ./node_modules/@wordpress/components/build-module/visually-hidden/styles.js
/**
* External dependencies
*/
@@ -13644,38 +15057,23 @@
wordWrap: 'normal'
};
-;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/extends.js
+;// ./node_modules/@babel/runtime/helpers/esm/extends.js
function extends_extends() {
- extends_extends = Object.assign ? Object.assign.bind() : function (target) {
- for (var i = 1; i < arguments.length; i++) {
- var source = arguments[i];
- for (var key in source) {
- if (Object.prototype.hasOwnProperty.call(source, key)) {
- target[key] = source[key];
- }
- }
- }
- return target;
- };
- return extends_extends.apply(this, arguments);
-}
-;// CONCATENATED MODULE: ./node_modules/@emotion/styled/node_modules/@emotion/memoize/dist/emotion-memoize.esm.js
-function emotion_memoize_esm_memoize(fn) {
- var cache = Object.create(null);
- return function (arg) {
- if (cache[arg] === undefined) cache[arg] = fn(arg);
- return cache[arg];
- };
-}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@emotion/styled/node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js
+ return extends_extends = Object.assign ? Object.assign.bind() : function (n) {
+ for (var e = 1; e < arguments.length; e++) {
+ var t = arguments[e];
+ for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+ }
+ return n;
+ }, extends_extends.apply(null, arguments);
+}
+
+;// ./node_modules/@emotion/styled/node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js
var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
-var isPropValid = /* #__PURE__ */emotion_memoize_esm_memoize(function (prop) {
+var isPropValid = /* #__PURE__ */memoize(function (prop) {
return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
/* o */
&& prop.charCodeAt(1) === 110
@@ -13687,7 +15085,7 @@
-;// CONCATENATED MODULE: ./node_modules/@emotion/styled/base/dist/emotion-styled-base.browser.esm.js
+;// ./node_modules/@emotion/styled/base/dist/emotion-styled-base.browser.esm.js
@@ -13856,7 +15254,7 @@
/* harmony default export */ const emotion_styled_base_browser_esm = (createStyled);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/view/component.js
+;// ./node_modules/@wordpress/components/build-module/view/component.js
/**
* External dependencies
@@ -13906,7 +15304,7 @@
});
/* harmony default export */ const component = (View);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/visually-hidden/component.js
+;// ./node_modules/@wordpress/components/build-module/visually-hidden/component.js
/**
* External dependencies
*/
@@ -13953,7 +15351,7 @@
const component_VisuallyHidden = contextConnect(UnconnectedVisuallyHidden, 'VisuallyHidden');
/* harmony default export */ const visually_hidden_component = (component_VisuallyHidden);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/utils.js
+;// ./node_modules/@wordpress/components/build-module/alignment-matrix-control/utils.js
/**
* WordPress dependencies
*/
@@ -14046,7 +15444,7 @@
// EXTERNAL MODULE: ./node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js
var hoist_non_react_statics_cjs = __webpack_require__(1880);
-;// CONCATENATED MODULE: ./node_modules/@emotion/react/dist/emotion-react.browser.esm.js
+;// ./node_modules/@emotion/react/dist/emotion-react.browser.esm.js
@@ -14413,7 +15811,49 @@
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/colors-values.js
+;// ./node_modules/@wordpress/components/build-module/utils/space.js
+/**
+ * The argument value for the `space()` utility function.
+ *
+ * When this is a number or a numeric string, it will be interpreted as a
+ * multiplier for the grid base value (4px). For example, `space( 2 )` will be 8px.
+ *
+ * Otherwise, it will be interpreted as a literal CSS length value. For example,
+ * `space( 'auto' )` will be 'auto', and `space( '2px' )` will be 2px.
+ */
+
+const GRID_BASE = '4px';
+
+/**
+ * A function that handles numbers, numeric strings, and unit values.
+ *
+ * When given a number or a numeric string, it will return the grid-based
+ * value as a factor of GRID_BASE, defined above.
+ *
+ * When given a unit value or one of the named CSS values like `auto`,
+ * it will simply return the value back.
+ *
+ * @param value A number, numeric string, or a unit value.
+ */
+function space(value) {
+ if (typeof value === 'undefined') {
+ return undefined;
+ }
+
+ // Handle empty strings, if it's the number 0 this still works.
+ if (!value) {
+ return '0';
+ }
+ const asInt = typeof value === 'number' ? value : Number(value);
+
+ // Test if the input has a unit, was NaN, or was one of the named CSS values (like `auto`), in which case just use that value.
+ if (typeof window !== 'undefined' && window.CSS?.supports?.('margin', value.toString()) || Number.isNaN(asInt)) {
+ return value.toString();
+ }
+ return `calc(${GRID_BASE} * ${value})`;
+}
+
+;// ./node_modules/@wordpress/components/build-module/utils/colors-values.js
/**
* Internal dependencies
*/
@@ -14486,6 +15926,9 @@
*/
gray: GRAY,
// TODO: Stop exporting this when everything is migrated to `theme` or `ui`
+ /**
+ * @deprecated Prefer theme-ready variables in `COLORS.theme`.
+ */
white,
alert: ALERT,
/**
@@ -14501,7 +15944,86 @@
});
/* harmony default export */ const colors_values = ((/* unused pure expression or super */ null && (COLORS)));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/styles/alignment-matrix-control-styles.js
+;// ./node_modules/@wordpress/components/build-module/utils/config-values.js
+/**
+ * Internal dependencies
+ */
+
+
+const CONTROL_HEIGHT = '36px';
+const CONTROL_PROPS = {
+ // These values should be shared with TextControl.
+ controlPaddingX: 12,
+ controlPaddingXSmall: 8,
+ controlPaddingXLarge: 12 * 1.3334,
+ // TODO: Deprecate
+
+ controlBoxShadowFocus: `0 0 0 0.5px ${COLORS.theme.accent}`,
+ controlHeight: CONTROL_HEIGHT,
+ controlHeightXSmall: `calc( ${CONTROL_HEIGHT} * 0.6 )`,
+ controlHeightSmall: `calc( ${CONTROL_HEIGHT} * 0.8 )`,
+ controlHeightLarge: `calc( ${CONTROL_HEIGHT} * 1.2 )`,
+ controlHeightXLarge: `calc( ${CONTROL_HEIGHT} * 1.4 )`
+};
+
+// Using Object.assign to avoid creating circular references when emitting
+// TypeScript type declarations.
+/* harmony default export */ const config_values = (Object.assign({}, CONTROL_PROPS, {
+ colorDivider: 'rgba(0, 0, 0, 0.1)',
+ colorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',
+ colorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',
+ colorScrollbarTrack: 'rgba(0, 0, 0, 0.04)',
+ elevationIntensity: 1,
+ radiusXSmall: '1px',
+ radiusSmall: '2px',
+ radiusMedium: '4px',
+ radiusLarge: '8px',
+ radiusFull: '9999px',
+ radiusRound: '50%',
+ borderWidth: '1px',
+ borderWidthFocus: '1.5px',
+ borderWidthTab: '4px',
+ spinnerSize: 16,
+ fontSize: '13px',
+ fontSizeH1: 'calc(2.44 * 13px)',
+ fontSizeH2: 'calc(1.95 * 13px)',
+ fontSizeH3: 'calc(1.56 * 13px)',
+ fontSizeH4: 'calc(1.25 * 13px)',
+ fontSizeH5: '13px',
+ fontSizeH6: 'calc(0.8 * 13px)',
+ fontSizeInputMobile: '16px',
+ fontSizeMobile: '15px',
+ fontSizeSmall: 'calc(0.92 * 13px)',
+ fontSizeXSmall: 'calc(0.75 * 13px)',
+ fontLineHeightBase: '1.4',
+ fontWeight: 'normal',
+ fontWeightHeading: '600',
+ gridBase: '4px',
+ cardPaddingXSmall: `${space(2)}`,
+ cardPaddingSmall: `${space(4)}`,
+ cardPaddingMedium: `${space(4)} ${space(6)}`,
+ cardPaddingLarge: `${space(6)} ${space(8)}`,
+ elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`,
+ elevationSmall: `0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)`,
+ elevationMedium: `0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02)`,
+ elevationLarge: `0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02)`,
+ surfaceBackgroundColor: COLORS.white,
+ surfaceBackgroundSubtleColor: '#F3F3F3',
+ surfaceBackgroundTintColor: '#F5F5F5',
+ surfaceBorderColor: 'rgba(0, 0, 0, 0.1)',
+ surfaceBorderBoldColor: 'rgba(0, 0, 0, 0.15)',
+ surfaceBorderSubtleColor: 'rgba(0, 0, 0, 0.05)',
+ surfaceBackgroundTertiaryColor: COLORS.white,
+ surfaceColor: COLORS.white,
+ transitionDuration: '200ms',
+ transitionDurationFast: '160ms',
+ transitionDurationFaster: '120ms',
+ transitionDurationFastest: '100ms',
+ transitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)',
+ transitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)'
+}));
+
+;// ./node_modules/@wordpress/components/build-module/alignment-matrix-control/styles.js
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
@@ -14514,73 +16036,59 @@
* Internal dependencies
*/
-var _ref = true ? {
- name: "93uojk",
- styles: "border-radius:2px;box-sizing:border-box;direction:ltr;display:grid;grid-template-columns:repeat( 3, 1fr );outline:none"
-} : 0;
-const rootBase = () => {
- return _ref;
-};
-const rootSize = ({
+// Grid structure
+
+const rootBase = ({
size = 92
-}) => {
- return /*#__PURE__*/emotion_react_browser_esm_css("grid-template-rows:repeat( 3, calc( ", size, "px / 3 ) );width:", size, "px;" + ( true ? "" : 0), true ? "" : 0);
-};
-const Root = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
- target: "ecapk1j3"
-} : 0)(rootBase, ";border:1px solid transparent;cursor:pointer;grid-template-columns:auto;", rootSize, ";" + ( true ? "" : 0));
-const Row = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
- target: "ecapk1j2"
+}) => /*#__PURE__*/emotion_react_browser_esm_css("direction:ltr;display:grid;grid-template-columns:repeat( 3, 1fr );grid-template-rows:repeat( 3, 1fr );box-sizing:border-box;width:", size, "px;aspect-ratio:1;border-radius:", config_values.radiusMedium, ";outline:none;" + ( true ? "" : 0), true ? "" : 0);
+var _ref = true ? {
+ name: "e0dnmk",
+ styles: "cursor:pointer"
+} : 0;
+const GridContainer = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
+ target: "e1r95csn3"
+} : 0)(rootBase, " border:1px solid transparent;", props => props.disablePointerEvents ? /*#__PURE__*/emotion_react_browser_esm_css( true ? "" : 0, true ? "" : 0) : _ref, ";" + ( true ? "" : 0));
+const GridRow = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
+ target: "e1r95csn2"
} : 0)( true ? {
- name: "1x5gbbj",
- styles: "box-sizing:border-box;display:grid;grid-template-columns:repeat( 3, 1fr )"
+ name: "1fbxn64",
+ styles: "grid-column:1/-1;box-sizing:border-box;display:grid;grid-template-columns:repeat( 3, 1fr )"
} : 0);
-const pointActive = ({
- isActive
-}) => {
- const boxShadow = isActive ? `0 0 0 2px ${COLORS.gray[900]}` : null;
- const pointColor = isActive ? COLORS.gray[900] : COLORS.gray[400];
- const pointColorHover = isActive ? COLORS.gray[900] : COLORS.theme.accent;
- return /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:", boxShadow, ";color:", pointColor, ";*:hover>&{color:", pointColorHover, ";}" + ( true ? "" : 0), true ? "" : 0);
-};
-const pointBase = props => {
- return /*#__PURE__*/emotion_react_browser_esm_css("background:currentColor;box-sizing:border-box;display:grid;margin:auto;@media not ( prefers-reduced-motion ){transition:all 120ms linear;}", pointActive(props), ";" + ( true ? "" : 0), true ? "" : 0);
-};
-const Point = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
- target: "ecapk1j1"
-} : 0)("height:6px;width:6px;", pointBase, ";" + ( true ? "" : 0));
+
+// Cell
const Cell = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
- target: "ecapk1j0"
+ target: "e1r95csn1"
} : 0)( true ? {
- name: "rjf3ub",
- styles: "appearance:none;border:none;box-sizing:border-box;margin:0;display:flex;position:relative;outline:none;align-items:center;justify-content:center;padding:0"
+ name: "e2kws5",
+ styles: "position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding:0;appearance:none;border:none;outline:none"
} : 0);
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/cell.js
-/**
- * Internal dependencies
- */
-
-
-
-
-/**
- * Internal dependencies
- */
-
+const POINT_SIZE = 6;
+const Point = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
+ target: "e1r95csn0"
+} : 0)("display:block;contain:strict;box-sizing:border-box;width:", POINT_SIZE, "px;aspect-ratio:1;margin:auto;color:", COLORS.theme.gray[400], ";border:", POINT_SIZE / 2, "px solid currentColor;", Cell, "[data-active-item] &{color:", COLORS.gray[900], ";transform:scale( calc( 5 / 3 ) );}", Cell, ":not([data-active-item]):hover &{color:", COLORS.theme.accent, ";}", Cell, "[data-focus-visible] &{outline:1px solid ", COLORS.theme.accent, ";outline-offset:1px;}@media not ( prefers-reduced-motion ){transition-property:color,transform;transition-duration:120ms;transition-timing-function:linear;}" + ( true ? "" : 0));
+
+;// ./node_modules/@wordpress/components/build-module/alignment-matrix-control/cell.js
+/**
+ * Internal dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
function cell_Cell({
id,
- isActive = false,
value,
...props
}) {
- const tooltipText = ALIGNMENT_LABEL[value];
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, {
- text: tooltipText,
- children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(CompositeItem, {
+ text: ALIGNMENT_LABEL[value],
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Composite.Item, {
id: id,
render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Cell, {
...props,
@@ -14589,1071 +16097,140 @@
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, {
children: value
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Point, {
- isActive: isActive,
role: "presentation"
})]
})
});
}
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/Y6GYTNQ2.js
-"use client";
-
-
-
-// src/collection/collection-store.ts
-
-function useCollectionStoreProps(store, update, props) {
- useUpdateEffect(update, [props.store]);
- useStoreProps(store, props, "items", "setItems");
- return store;
-}
-function useCollectionStore(props = {}) {
- const [store, update] = useStore(Core.createCollectionStore, props);
- return useCollectionStoreProps(store, update, props);
-}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/22K762VQ.js
-"use client";
-
-
-
-
-
-// src/collection/collection-store.ts
-function isElementPreceding(a, b) {
- return Boolean(
- b.compareDocumentPosition(a) & Node.DOCUMENT_POSITION_PRECEDING
- );
-}
-function sortBasedOnDOMPosition(items) {
- const pairs = items.map((item, index) => [index, item]);
- let isOrderDifferent = false;
- pairs.sort(([indexA, a], [indexB, b]) => {
- const elementA = a.element;
- const elementB = b.element;
- if (elementA === elementB)
- return 0;
- if (!elementA || !elementB)
- return 0;
- if (isElementPreceding(elementA, elementB)) {
- if (indexA > indexB) {
- isOrderDifferent = true;
- }
- return -1;
- }
- if (indexA < indexB) {
- isOrderDifferent = true;
- }
- return 1;
- });
- if (isOrderDifferent) {
- return pairs.map(([_, item]) => item);
- }
- return items;
-}
-function getCommonParent(items) {
- var _a;
- const firstItem = items.find((item) => !!item.element);
- const lastItem = [...items].reverse().find((item) => !!item.element);
- let parentElement = (_a = firstItem == null ? void 0 : firstItem.element) == null ? void 0 : _a.parentElement;
- while (parentElement && (lastItem == null ? void 0 : lastItem.element)) {
- const parent = parentElement;
- if (lastItem && parent.contains(lastItem.element)) {
- return parentElement;
- }
- parentElement = parentElement.parentElement;
- }
- return DLOEKDPY_getDocument(parentElement).body;
-}
-function getPrivateStore(store) {
- return store == null ? void 0 : store.__unstablePrivateStore;
-}
-function createCollectionStore(props = {}) {
- var _a;
- throwOnConflictingProps(props, props.store);
- const syncState = (_a = props.store) == null ? void 0 : _a.getState();
- const items = defaultValue(
- props.items,
- syncState == null ? void 0 : syncState.items,
- props.defaultItems,
- []
- );
- const itemsMap = new Map(items.map((item) => [item.id, item]));
- const initialState = {
- items,
- renderedItems: defaultValue(syncState == null ? void 0 : syncState.renderedItems, [])
- };
- const syncPrivateStore = getPrivateStore(props.store);
- const privateStore = createStore(
- { items, renderedItems: initialState.renderedItems },
- syncPrivateStore
- );
- const collection = createStore(initialState, props.store);
- const sortItems = (renderedItems) => {
- const sortedItems = sortBasedOnDOMPosition(renderedItems);
- privateStore.setState("renderedItems", sortedItems);
- collection.setState("renderedItems", sortedItems);
- };
- setup(collection, () => init(privateStore));
- setup(privateStore, () => {
- return batch(privateStore, ["items"], (state) => {
- collection.setState("items", state.items);
- });
- });
- setup(privateStore, () => {
- return batch(privateStore, ["renderedItems"], (state) => {
- let firstRun = true;
- let raf = requestAnimationFrame(() => {
- const { renderedItems } = collection.getState();
- if (state.renderedItems === renderedItems)
- return;
- sortItems(state.renderedItems);
- });
- if (typeof IntersectionObserver !== "function") {
- return () => cancelAnimationFrame(raf);
- }
- const ioCallback = () => {
- if (firstRun) {
- firstRun = false;
- return;
- }
- cancelAnimationFrame(raf);
- raf = requestAnimationFrame(() => sortItems(state.renderedItems));
- };
- const root = getCommonParent(state.renderedItems);
- const observer = new IntersectionObserver(ioCallback, { root });
- for (const item of state.renderedItems) {
- if (!item.element)
- continue;
- observer.observe(item.element);
- }
- return () => {
- cancelAnimationFrame(raf);
- observer.disconnect();
- };
- });
- });
- const mergeItem = (item, setItems, canDeleteFromMap = false) => {
- let prevItem;
- setItems((items2) => {
- const index = items2.findIndex(({ id }) => id === item.id);
- const nextItems = items2.slice();
- if (index !== -1) {
- prevItem = items2[index];
- const nextItem = _chunks_4R3V3JGP_spreadValues(_chunks_4R3V3JGP_spreadValues({}, prevItem), item);
- nextItems[index] = nextItem;
- itemsMap.set(item.id, nextItem);
- } else {
- nextItems.push(item);
- itemsMap.set(item.id, item);
- }
- return nextItems;
- });
- const unmergeItem = () => {
- setItems((items2) => {
- if (!prevItem) {
- if (canDeleteFromMap) {
- itemsMap.delete(item.id);
- }
- return items2.filter(({ id }) => id !== item.id);
- }
- const index = items2.findIndex(({ id }) => id === item.id);
- if (index === -1)
- return items2;
- const nextItems = items2.slice();
- nextItems[index] = prevItem;
- itemsMap.set(item.id, prevItem);
- return nextItems;
- });
- };
- return unmergeItem;
- };
- const registerItem = (item) => mergeItem(
- item,
- (getItems) => privateStore.setState("items", getItems),
- true
- );
- return _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, collection), {
- registerItem,
- renderItem: (item) => chain(
- registerItem(item),
- mergeItem(
- item,
- (getItems) => privateStore.setState("renderedItems", getItems)
- )
- ),
- item: (id) => {
- if (!id)
- return null;
- let item = itemsMap.get(id);
- if (!item) {
- const { items: items2 } = collection.getState();
- item = items2.find((item2) => item2.id === id);
- if (item) {
- itemsMap.set(id, item);
- }
- }
- return item || null;
- },
- // @ts-expect-error Internal
- __unstablePrivateStore: privateStore
- });
-}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/7PRQYBBV.js
-"use client";
-
-// src/utils/array.ts
-function toArray(arg) {
- if (Array.isArray(arg)) {
- return arg;
- }
- return typeof arg !== "undefined" ? [arg] : [];
-}
-function addItemToArray(array, item, index = -1) {
- if (!(index in array)) {
- return [...array, item];
- }
- return [...array.slice(0, index), item, ...array.slice(index)];
-}
-function flatten2DArray(array) {
- const flattened = [];
- for (const row of array) {
- flattened.push(...row);
- }
- return flattened;
-}
-function reverseArray(array) {
- return array.slice().reverse();
-}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/IERTEJ3A.js
-"use client";
-
-
-
-
-
-
-// src/composite/composite-store.ts
-var IERTEJ3A_NULL_ITEM = { id: null };
-function IERTEJ3A_findFirstEnabledItem(items, excludeId) {
- return items.find((item) => {
- if (excludeId) {
- return !item.disabled && item.id !== excludeId;
- }
- return !item.disabled;
- });
-}
-function getEnabledItems(items, excludeId) {
- return items.filter((item) => {
- if (excludeId) {
- return !item.disabled && item.id !== excludeId;
- }
- return !item.disabled;
- });
-}
-function getOppositeOrientation(orientation) {
- if (orientation === "vertical")
- return "horizontal";
- if (orientation === "horizontal")
- return "vertical";
- return;
-}
-function getItemsInRow(items, rowId) {
- return items.filter((item) => item.rowId === rowId);
-}
-function IERTEJ3A_flipItems(items, activeId, shouldInsertNullItem = false) {
- const index = items.findIndex((item) => item.id === activeId);
- return [
- ...items.slice(index + 1),
- ...shouldInsertNullItem ? [IERTEJ3A_NULL_ITEM] : [],
- ...items.slice(0, index)
- ];
-}
-function IERTEJ3A_groupItemsByRows(items) {
- const rows = [];
- for (const item of items) {
- const row = rows.find((currentRow) => {
- var _a;
- return ((_a = currentRow[0]) == null ? void 0 : _a.rowId) === item.rowId;
- });
- if (row) {
- row.push(item);
- } else {
- rows.push([item]);
- }
- }
- return rows;
-}
-function getMaxRowLength(array) {
- let maxLength = 0;
- for (const { length } of array) {
- if (length > maxLength) {
- maxLength = length;
- }
- }
- return maxLength;
-}
-function createEmptyItem(rowId) {
- return {
- id: "__EMPTY_ITEM__",
- disabled: true,
- rowId
- };
-}
-function normalizeRows(rows, activeId, focusShift) {
- const maxLength = getMaxRowLength(rows);
- for (const row of rows) {
- for (let i = 0; i < maxLength; i += 1) {
- const item = row[i];
- if (!item || focusShift && item.disabled) {
- const isFirst = i === 0;
- const previousItem = isFirst && focusShift ? IERTEJ3A_findFirstEnabledItem(row) : row[i - 1];
- row[i] = previousItem && activeId !== previousItem.id && focusShift ? previousItem : createEmptyItem(previousItem == null ? void 0 : previousItem.rowId);
- }
- }
- }
- return rows;
-}
-function verticalizeItems(items) {
- const rows = IERTEJ3A_groupItemsByRows(items);
- const maxLength = getMaxRowLength(rows);
- const verticalized = [];
- for (let i = 0; i < maxLength; i += 1) {
- for (const row of rows) {
- const item = row[i];
- if (item) {
- verticalized.push(_chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, item), {
- // If there's no rowId, it means that it's not a grid composite, but
- // a single row instead. So, instead of verticalizing it, that is,
- // assigning a different rowId based on the column index, we keep it
- // undefined so they will be part of the same row. This is useful
- // when using up/down on one-dimensional composites.
- rowId: item.rowId ? `${i}` : void 0
- }));
- }
- }
- }
- return verticalized;
-}
-function createCompositeStore(props = {}) {
- var _a;
- const syncState = (_a = props.store) == null ? void 0 : _a.getState();
- const collection = createCollectionStore(props);
- const activeId = defaultValue(
- props.activeId,
- syncState == null ? void 0 : syncState.activeId,
- props.defaultActiveId
- );
- const initialState = _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, collection.getState()), {
- activeId,
- baseElement: defaultValue(syncState == null ? void 0 : syncState.baseElement, null),
- includesBaseElement: defaultValue(
- props.includesBaseElement,
- syncState == null ? void 0 : syncState.includesBaseElement,
- activeId === null
- ),
- moves: defaultValue(syncState == null ? void 0 : syncState.moves, 0),
- orientation: defaultValue(
- props.orientation,
- syncState == null ? void 0 : syncState.orientation,
- "both"
- ),
- rtl: defaultValue(props.rtl, syncState == null ? void 0 : syncState.rtl, false),
- virtualFocus: defaultValue(
- props.virtualFocus,
- syncState == null ? void 0 : syncState.virtualFocus,
- false
- ),
- focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, false),
- focusWrap: defaultValue(props.focusWrap, syncState == null ? void 0 : syncState.focusWrap, false),
- focusShift: defaultValue(props.focusShift, syncState == null ? void 0 : syncState.focusShift, false)
- });
- const composite = createStore(initialState, collection, props.store);
- setup(
- composite,
- () => sync(composite, ["renderedItems", "activeId"], (state) => {
- composite.setState("activeId", (activeId2) => {
- var _a2;
- if (activeId2 !== void 0)
- return activeId2;
- return (_a2 = IERTEJ3A_findFirstEnabledItem(state.renderedItems)) == null ? void 0 : _a2.id;
- });
- })
- );
- const getNextId = (items, orientation, hasNullItem, skip) => {
- var _a2, _b;
- const { activeId: activeId2, rtl, focusLoop, focusWrap, includesBaseElement } = composite.getState();
- const isHorizontal = orientation !== "vertical";
- const isRTL = rtl && isHorizontal;
- const allItems = isRTL ? reverseArray(items) : items;
- if (activeId2 == null) {
- return (_a2 = IERTEJ3A_findFirstEnabledItem(allItems)) == null ? void 0 : _a2.id;
- }
- const activeItem = allItems.find((item) => item.id === activeId2);
- if (!activeItem) {
- return (_b = IERTEJ3A_findFirstEnabledItem(allItems)) == null ? void 0 : _b.id;
- }
- const isGrid = !!activeItem.rowId;
- const activeIndex = allItems.indexOf(activeItem);
- const nextItems = allItems.slice(activeIndex + 1);
- const nextItemsInRow = getItemsInRow(nextItems, activeItem.rowId);
- if (skip !== void 0) {
- const nextEnabledItemsInRow = getEnabledItems(nextItemsInRow, activeId2);
- const nextItem2 = nextEnabledItemsInRow.slice(skip)[0] || // If we can't find an item, just return the last one.
- nextEnabledItemsInRow[nextEnabledItemsInRow.length - 1];
- return nextItem2 == null ? void 0 : nextItem2.id;
- }
- const oppositeOrientation = getOppositeOrientation(
- // If it's a grid and orientation is not set, it's a next/previous call,
- // which is inherently horizontal. up/down will call next with orientation
- // set to vertical by default (see below on up/down methods).
- isGrid ? orientation || "horizontal" : orientation
- );
- const canLoop = focusLoop && focusLoop !== oppositeOrientation;
- const canWrap = isGrid && focusWrap && focusWrap !== oppositeOrientation;
- hasNullItem = hasNullItem || !isGrid && canLoop && includesBaseElement;
- if (canLoop) {
- const loopItems = canWrap && !hasNullItem ? allItems : getItemsInRow(allItems, activeItem.rowId);
- const sortedItems = IERTEJ3A_flipItems(loopItems, activeId2, hasNullItem);
- const nextItem2 = IERTEJ3A_findFirstEnabledItem(sortedItems, activeId2);
- return nextItem2 == null ? void 0 : nextItem2.id;
- }
- if (canWrap) {
- const nextItem2 = IERTEJ3A_findFirstEnabledItem(
- // We can use nextItems, which contains all the next items, including
- // items from other rows, to wrap between rows. However, if there is a
- // null item (the composite container), we'll only use the next items in
- // the row. So moving next from the last item will focus on the
- // composite container. On grid composites, horizontal navigation never
- // focuses on the composite container, only vertical.
- hasNullItem ? nextItemsInRow : nextItems,
- activeId2
- );
- const nextId = hasNullItem ? (nextItem2 == null ? void 0 : nextItem2.id) || null : nextItem2 == null ? void 0 : nextItem2.id;
- return nextId;
- }
- const nextItem = IERTEJ3A_findFirstEnabledItem(nextItemsInRow, activeId2);
- if (!nextItem && hasNullItem) {
- return null;
- }
- return nextItem == null ? void 0 : nextItem.id;
- };
- return _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues(_chunks_4R3V3JGP_spreadValues({}, collection), composite), {
- setBaseElement: (element) => composite.setState("baseElement", element),
- setActiveId: (id) => composite.setState("activeId", id),
- move: (id) => {
- if (id === void 0)
- return;
- composite.setState("activeId", id);
- composite.setState("moves", (moves) => moves + 1);
- },
- first: () => {
- var _a2;
- return (_a2 = IERTEJ3A_findFirstEnabledItem(composite.getState().renderedItems)) == null ? void 0 : _a2.id;
- },
- last: () => {
- var _a2;
- return (_a2 = IERTEJ3A_findFirstEnabledItem(reverseArray(composite.getState().renderedItems))) == null ? void 0 : _a2.id;
- },
- next: (skip) => {
- const { renderedItems, orientation } = composite.getState();
- return getNextId(renderedItems, orientation, false, skip);
- },
- previous: (skip) => {
- var _a2;
- const { renderedItems, orientation, includesBaseElement } = composite.getState();
- const isGrid = !!((_a2 = IERTEJ3A_findFirstEnabledItem(renderedItems)) == null ? void 0 : _a2.rowId);
- const hasNullItem = !isGrid && includesBaseElement;
- return getNextId(
- reverseArray(renderedItems),
- orientation,
- hasNullItem,
- skip
- );
- },
- down: (skip) => {
- const {
- activeId: activeId2,
- renderedItems,
- focusShift,
- focusLoop,
- includesBaseElement
- } = composite.getState();
- const shouldShift = focusShift && !skip;
- const verticalItems = verticalizeItems(
- flatten2DArray(
- normalizeRows(IERTEJ3A_groupItemsByRows(renderedItems), activeId2, shouldShift)
- )
- );
- const canLoop = focusLoop && focusLoop !== "horizontal";
- const hasNullItem = canLoop && includesBaseElement;
- return getNextId(verticalItems, "vertical", hasNullItem, skip);
- },
- up: (skip) => {
- const { activeId: activeId2, renderedItems, focusShift, includesBaseElement } = composite.getState();
- const shouldShift = focusShift && !skip;
- const verticalItems = verticalizeItems(
- reverseArray(
- flatten2DArray(
- normalizeRows(
- IERTEJ3A_groupItemsByRows(renderedItems),
- activeId2,
- shouldShift
- )
- )
- )
- );
- const hasNullItem = includesBaseElement;
- return getNextId(verticalItems, "vertical", hasNullItem, skip);
- }
- });
-}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/7GBW5FLS.js
-"use client";
-
-
-
-// src/composite/composite-store.ts
-
-function useCompositeStoreProps(store, update, props) {
- store = useCollectionStoreProps(store, update, props);
- useStoreProps(store, props, "activeId", "setActiveId");
- useStoreProps(store, props, "includesBaseElement");
- useStoreProps(store, props, "virtualFocus");
- useStoreProps(store, props, "orientation");
- useStoreProps(store, props, "rtl");
- useStoreProps(store, props, "focusLoop");
- useStoreProps(store, props, "focusWrap");
- useStoreProps(store, props, "focusShift");
- return store;
-}
-function useCompositeStore(props = {}) {
- const [store, update] = EKQEJRUF_useStore(createCompositeStore, props);
- return useCompositeStoreProps(store, update, props);
-}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/7QTPYGNZ.js
-"use client";
-
-
-
-
-
-
-
-// src/composite/composite.tsx
-
-
-
-
-
-
-
-function isGrid(items) {
- return items.some((item) => !!item.rowId);
-}
-function isPrintableKey(event) {
- const target = event.target;
- if (target && !DLOEKDPY_isTextField(target))
- return false;
- return event.key.length === 1 && !event.ctrlKey && !event.metaKey;
-}
-function isModifierKey(event) {
- return event.key === "Shift" || event.key === "Control" || event.key === "Alt" || event.key === "Meta";
-}
-function useKeyboardEventProxy(store, onKeyboardEvent, previousElementRef) {
- return useEvent((event) => {
- var _a;
- onKeyboardEvent == null ? void 0 : onKeyboardEvent(event);
- if (event.defaultPrevented)
- return;
- if (event.isPropagationStopped())
- return;
- if (!isSelfTarget(event))
- return;
- if (isModifierKey(event))
- return;
- if (isPrintableKey(event))
- return;
- const state = store.getState();
- const activeElement = (_a = getEnabledItem(store, state.activeId)) == null ? void 0 : _a.element;
- if (!activeElement)
- return;
- const _b = event, { view } = _b, eventInit = __objRest(_b, ["view"]);
- const previousElement = previousElementRef == null ? void 0 : previousElementRef.current;
- if (activeElement !== previousElement) {
- activeElement.focus();
- }
- if (!fireKeyboardEvent(activeElement, event.type, eventInit)) {
- event.preventDefault();
- }
- if (event.currentTarget.contains(activeElement)) {
- event.stopPropagation();
- }
- });
-}
-function findFirstEnabledItemInTheLastRow(items) {
- return findFirstEnabledItem(
- flatten2DArray(reverseArray(groupItemsByRows(items)))
- );
-}
-function useScheduleFocus(store) {
- const [scheduled, setScheduled] = (0,external_React_.useState)(false);
- const schedule = (0,external_React_.useCallback)(() => setScheduled(true), []);
- const activeItem = store.useState(
- (state) => getEnabledItem(store, state.activeId)
- );
- (0,external_React_.useEffect)(() => {
- const activeElement = activeItem == null ? void 0 : activeItem.element;
- if (!scheduled)
- return;
- if (!activeElement)
- return;
- setScheduled(false);
- activeElement.focus({ preventScroll: true });
- }, [activeItem, scheduled]);
- return schedule;
-}
-var useComposite = createHook(
- (_a) => {
- var _b = _a, {
- store,
- composite = true,
- focusOnMove = composite,
- moveOnKeyPress = true
- } = _b, props = __objRest(_b, [
- "store",
- "composite",
- "focusOnMove",
- "moveOnKeyPress"
- ]);
- const context = useCompositeProviderContext();
- store = store || context;
- invariant(
- store,
- false && 0
- );
- const previousElementRef = (0,external_React_.useRef)(null);
- const scheduleFocus = useScheduleFocus(store);
- const moves = store.useState("moves");
- (0,external_React_.useEffect)(() => {
- var _a2;
- if (!store)
- return;
- if (!moves)
- return;
- if (!composite)
- return;
- if (!focusOnMove)
- return;
- const { activeId: activeId2 } = store.getState();
- const itemElement = (_a2 = getEnabledItem(store, activeId2)) == null ? void 0 : _a2.element;
- if (!itemElement)
- return;
- focusIntoView(itemElement);
- }, [store, moves, composite, focusOnMove]);
- useSafeLayoutEffect(() => {
- if (!store)
- return;
- if (!moves)
- return;
- if (!composite)
- return;
- const { baseElement, activeId: activeId2 } = store.getState();
- const isSelfAcive = activeId2 === null;
- if (!isSelfAcive)
- return;
- if (!baseElement)
- return;
- const previousElement = previousElementRef.current;
- previousElementRef.current = null;
- if (previousElement) {
- fireBlurEvent(previousElement, { relatedTarget: baseElement });
- }
- if (!hasFocus(baseElement)) {
- baseElement.focus();
- }
- }, [store, moves, composite]);
- const activeId = store.useState("activeId");
- const virtualFocus = store.useState("virtualFocus");
- useSafeLayoutEffect(() => {
- var _a2;
- if (!store)
- return;
- if (!composite)
- return;
- if (!virtualFocus)
- return;
- const previousElement = previousElementRef.current;
- previousElementRef.current = null;
- if (!previousElement)
- return;
- const activeElement = (_a2 = getEnabledItem(store, activeId)) == null ? void 0 : _a2.element;
- const relatedTarget = activeElement || getActiveElement(previousElement);
- if (relatedTarget === previousElement)
- return;
- fireBlurEvent(previousElement, { relatedTarget });
- }, [store, activeId, virtualFocus, composite]);
- const onKeyDownCapture = useKeyboardEventProxy(
- store,
- props.onKeyDownCapture,
- previousElementRef
- );
- const onKeyUpCapture = useKeyboardEventProxy(
- store,
- props.onKeyUpCapture,
- previousElementRef
- );
- const onFocusCaptureProp = props.onFocusCapture;
- const onFocusCapture = useEvent((event) => {
- onFocusCaptureProp == null ? void 0 : onFocusCaptureProp(event);
- if (event.defaultPrevented)
- return;
- if (!store)
- return;
- const { virtualFocus: virtualFocus2 } = store.getState();
- if (!virtualFocus2)
- return;
- const previousActiveElement = event.relatedTarget;
- const isSilentlyFocused = silentlyFocused(event.currentTarget);
- if (isSelfTarget(event) && isSilentlyFocused) {
- event.stopPropagation();
- previousElementRef.current = previousActiveElement;
- }
- });
- const onFocusProp = props.onFocus;
- const onFocus = useEvent((event) => {
- onFocusProp == null ? void 0 : onFocusProp(event);
- if (event.defaultPrevented)
- return;
- if (!composite)
- return;
- if (!store)
- return;
- const { relatedTarget } = event;
- const { virtualFocus: virtualFocus2 } = store.getState();
- if (virtualFocus2) {
- if (isSelfTarget(event) && !isItem(store, relatedTarget)) {
- queueMicrotask(scheduleFocus);
- }
- } else if (isSelfTarget(event)) {
- store.setActiveId(null);
- }
- });
- const onBlurCaptureProp = props.onBlurCapture;
- const onBlurCapture = useEvent((event) => {
- var _a2;
- onBlurCaptureProp == null ? void 0 : onBlurCaptureProp(event);
- if (event.defaultPrevented)
- return;
- if (!store)
- return;
- const { virtualFocus: virtualFocus2, activeId: activeId2 } = store.getState();
- if (!virtualFocus2)
- return;
- const activeElement = (_a2 = getEnabledItem(store, activeId2)) == null ? void 0 : _a2.element;
- const nextActiveElement = event.relatedTarget;
- const nextActiveElementIsItem = isItem(store, nextActiveElement);
- const previousElement = previousElementRef.current;
- previousElementRef.current = null;
- if (isSelfTarget(event) && nextActiveElementIsItem) {
- if (nextActiveElement === activeElement) {
- if (previousElement && previousElement !== nextActiveElement) {
- fireBlurEvent(previousElement, event);
- }
- } else if (activeElement) {
- fireBlurEvent(activeElement, event);
- } else if (previousElement) {
- fireBlurEvent(previousElement, event);
- }
- event.stopPropagation();
- } else {
- const targetIsItem = isItem(store, event.target);
- if (!targetIsItem && activeElement) {
- fireBlurEvent(activeElement, event);
- }
- }
- });
- const onKeyDownProp = props.onKeyDown;
- const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress);
- const onKeyDown = useEvent((event) => {
- var _a2;
- onKeyDownProp == null ? void 0 : onKeyDownProp(event);
- if (event.defaultPrevented)
- return;
- if (!store)
- return;
- if (!isSelfTarget(event))
- return;
- const { orientation, items, renderedItems, activeId: activeId2 } = store.getState();
- const activeItem = getEnabledItem(store, activeId2);
- if ((_a2 = activeItem == null ? void 0 : activeItem.element) == null ? void 0 : _a2.isConnected)
- return;
- const isVertical = orientation !== "horizontal";
- const isHorizontal = orientation !== "vertical";
- const grid = isGrid(renderedItems);
- const isHorizontalKey = event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Home" || event.key === "End";
- if (isHorizontalKey && DLOEKDPY_isTextField(event.currentTarget))
- return;
- const up = () => {
- if (grid) {
- const item = items && findFirstEnabledItemInTheLastRow(items);
- return item == null ? void 0 : item.id;
- }
- return store == null ? void 0 : store.last();
- };
- const keyMap = {
- ArrowUp: (grid || isVertical) && up,
- ArrowRight: (grid || isHorizontal) && store.first,
- ArrowDown: (grid || isVertical) && store.first,
- ArrowLeft: (grid || isHorizontal) && store.last,
- Home: store.first,
- End: store.last,
- PageUp: store.first,
- PageDown: store.last
- };
- const action = keyMap[event.key];
- if (action) {
- const id = action();
- if (id !== void 0) {
- if (!moveOnKeyPressProp(event))
- return;
- event.preventDefault();
- store.move(id);
- }
- }
- });
- props = useWrapElement(
- props,
- (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(CompositeContextProvider, { value: store, children: element }),
- [store]
- );
- const activeDescendant = store.useState((state) => {
- var _a2;
- if (!store)
- return;
- if (!composite)
- return;
- if (!state.virtualFocus)
- return;
- return (_a2 = getEnabledItem(store, state.activeId)) == null ? void 0 : _a2.id;
- });
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
- "aria-activedescendant": activeDescendant
- }, props), {
- ref: useMergeRefs(composite ? store.setBaseElement : null, props.ref),
- onKeyDownCapture,
- onKeyUpCapture,
- onFocusCapture,
- onFocus,
- onBlurCapture,
- onKeyDown
- });
- const focusable = store.useState(
- (state) => composite && (state.virtualFocus || state.activeId === null)
- );
- props = useFocusable(_4R3V3JGP_spreadValues({ focusable }, props));
- return props;
- }
-);
-var Composite = createComponent((props) => {
- const htmlProps = useComposite(props);
- return _3ORBWXWF_createElement("div", htmlProps);
-});
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/BNUFNEVY.js
-"use client";
-
-
-
-
-
-// src/composite/composite-row.tsx
-
-
-
-var useCompositeRow = createHook(
- (_a) => {
- var _b = _a, {
- store,
- "aria-setsize": ariaSetSize,
- "aria-posinset": ariaPosInSet
- } = _b, props = __objRest(_b, [
- "store",
- "aria-setsize",
- "aria-posinset"
- ]);
- const context = useCompositeContext();
- store = store || context;
- invariant(
- store,
- false && 0
- );
- const id = useId(props.id);
- const baseElement = store.useState(
- (state) => state.baseElement || void 0
- );
- const providerValue = (0,external_React_.useMemo)(
- () => ({ id, baseElement, ariaSetSize, ariaPosInSet }),
- [id, baseElement, ariaSetSize, ariaPosInSet]
- );
- props = useWrapElement(
- props,
- (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(CompositeRowContext.Provider, { value: providerValue, children: element }),
- [providerValue]
- );
- props = _4R3V3JGP_spreadValues({ id }, props);
- return props;
- }
-);
-var CompositeRow = createComponent((props) => {
- const htmlProps = useCompositeRow(props);
- return _3ORBWXWF_createElement("div", htmlProps);
-});
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js
-
-function alignment_matrix_control_icon_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-/**
- * External dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
-const alignment_matrix_control_icon_styles_rootSize = () => {
- const padding = 1.5;
- const size = 24;
- return /*#__PURE__*/emotion_react_browser_esm_css({
- gridTemplateRows: `repeat( 3, calc( ${size - padding * 2}px / 3))`,
- padding,
- maxHeight: size,
- maxWidth: size
- }, true ? "" : 0, true ? "" : 0);
-};
-const rootPointerEvents = ({
- disablePointerEvents
-}) => {
- return /*#__PURE__*/emotion_react_browser_esm_css({
- pointerEvents: disablePointerEvents ? 'none' : undefined
- }, true ? "" : 0, true ? "" : 0);
-};
-const Wrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
- target: "erowt52"
-} : 0)( true ? {
- name: "ogl07i",
- styles: "box-sizing:border-box;padding:2px"
-} : 0);
-const alignment_matrix_control_icon_styles_Root = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
- target: "erowt51"
-} : 0)("transform-origin:top left;height:100%;width:100%;", rootBase, ";", alignment_matrix_control_icon_styles_rootSize, ";", rootPointerEvents, ";" + ( true ? "" : 0));
-const alignment_matrix_control_icon_styles_pointActive = ({
- isActive
-}) => {
- const boxShadow = isActive ? `0 0 0 1px currentColor` : null;
- return /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:", boxShadow, ";color:currentColor;*:hover>&{color:currentColor;}" + ( true ? "" : 0), true ? "" : 0);
-};
-const alignment_matrix_control_icon_styles_Point = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
- target: "erowt50"
-} : 0)("height:2px;width:2px;", pointBase, ";", alignment_matrix_control_icon_styles_pointActive, ";" + ( true ? "" : 0));
-const alignment_matrix_control_icon_styles_Cell = Cell;
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/icon.js
-/**
- * External dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/alignment-matrix-control/icon.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
const BASE_SIZE = 24;
+const GRID_CELL_SIZE = 7;
+const GRID_PADDING = (BASE_SIZE - 3 * GRID_CELL_SIZE) / 2;
+const DOT_SIZE = 2;
+const DOT_SIZE_SELECTED = 4;
function AlignmentMatrixControlIcon({
className,
disablePointerEvents = true,
- size = BASE_SIZE,
+ size,
+ width,
+ height,
style = {},
value = 'center',
...props
}) {
- const alignIndex = getAlignmentIndex(value);
- const scale = (size / BASE_SIZE).toFixed(2);
- const classes = dist_clsx('component-alignment-matrix-control-icon', className);
- const styles = {
- ...style,
- transform: `scale(${scale})`
- };
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(alignment_matrix_control_icon_styles_Root, {
+ var _ref, _ref2;
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
+ xmlns: "http://www.w3.org/2000/svg",
+ viewBox: `0 0 ${BASE_SIZE} ${BASE_SIZE}`,
+ width: (_ref = size !== null && size !== void 0 ? size : width) !== null && _ref !== void 0 ? _ref : BASE_SIZE,
+ height: (_ref2 = size !== null && size !== void 0 ? size : height) !== null && _ref2 !== void 0 ? _ref2 : BASE_SIZE,
+ role: "presentation",
+ className: dist_clsx('component-alignment-matrix-control-icon', className),
+ style: {
+ pointerEvents: disablePointerEvents ? 'none' : undefined,
+ ...style
+ },
...props,
- className: classes,
- disablePointerEvents: disablePointerEvents,
- role: "presentation",
- style: styles,
children: ALIGNMENTS.map((align, index) => {
- const isActive = alignIndex === index;
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(alignment_matrix_control_icon_styles_Cell, {
- children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(alignment_matrix_control_icon_styles_Point, {
- isActive: isActive
- })
+ const dotSize = getAlignmentIndex(value) === index ? DOT_SIZE_SELECTED : DOT_SIZE;
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Rect, {
+ x: GRID_PADDING + index % 3 * GRID_CELL_SIZE + (GRID_CELL_SIZE - dotSize) / 2,
+ y: GRID_PADDING + Math.floor(index / 3) * GRID_CELL_SIZE + (GRID_CELL_SIZE - dotSize) / 2,
+ width: dotSize,
+ height: dotSize,
+ fill: "currentColor"
}, align);
})
});
}
/* harmony default export */ const icon = (AlignmentMatrixControlIcon);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/index.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
-
-
-
-
-
-/**
- *
+;// ./node_modules/@wordpress/components/build-module/alignment-matrix-control/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+
+function UnforwardedAlignmentMatrixControl({
+ className,
+ id,
+ label = (0,external_wp_i18n_namespaceObject.__)('Alignment Matrix Control'),
+ defaultValue = 'center center',
+ value,
+ onChange,
+ width = 92,
+ ...props
+}) {
+ const baseId = (0,external_wp_compose_namespaceObject.useInstanceId)(UnforwardedAlignmentMatrixControl, 'alignment-matrix-control', id);
+ const setActiveId = (0,external_wp_element_namespaceObject.useCallback)(nextActiveId => {
+ const nextValue = getItemValue(baseId, nextActiveId);
+ if (nextValue) {
+ onChange?.(nextValue);
+ }
+ }, [baseId, onChange]);
+ const classes = dist_clsx('component-alignment-matrix-control', className);
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Composite, {
+ defaultActiveId: getItemId(baseId, defaultValue),
+ activeId: getItemId(baseId, value),
+ setActiveId: setActiveId,
+ rtl: (0,external_wp_i18n_namespaceObject.isRTL)(),
+ render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridContainer, {
+ ...props,
+ "aria-label": label,
+ className: classes,
+ id: baseId,
+ role: "grid",
+ size: width
+ }),
+ children: GRID.map((cells, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Composite.Row, {
+ render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridRow, {
+ role: "row"
+ }),
+ children: cells.map(cell => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(cell_Cell, {
+ id: getItemId(baseId, cell),
+ value: cell
+ }, cell))
+ }, index))
+ });
+}
+
+/**
* AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
*
* ```jsx
- * import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
+ * import { AlignmentMatrixControl } from '@wordpress/components';
* import { useState } from '@wordpress/element';
*
* const Example = () => {
@@ -15668,60 +16245,23 @@
* };
* ```
*/
-function AlignmentMatrixControl({
- className,
- id,
- label = (0,external_wp_i18n_namespaceObject.__)('Alignment Matrix Control'),
- defaultValue = 'center center',
- value,
- onChange,
- width = 92,
- ...props
-}) {
- const baseId = (0,external_wp_compose_namespaceObject.useInstanceId)(AlignmentMatrixControl, 'alignment-matrix-control', id);
- const compositeStore = useCompositeStore({
- defaultActiveId: getItemId(baseId, defaultValue),
- activeId: getItemId(baseId, value),
- setActiveId: nextActiveId => {
- const nextValue = getItemValue(baseId, nextActiveId);
- if (nextValue) {
- onChange?.(nextValue);
- }
- },
- rtl: (0,external_wp_i18n_namespaceObject.isRTL)()
- });
- const activeId = compositeStore.useState('activeId');
- const classes = dist_clsx('component-alignment-matrix-control', className);
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Composite, {
- store: compositeStore,
- render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Root, {
- ...props,
- "aria-label": label,
- className: classes,
- id: baseId,
- role: "grid",
- size: width
- }),
- children: GRID.map((cells, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CompositeRow, {
- render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Row, {
- role: "row"
- }),
- children: cells.map(cell => {
- const cellId = getItemId(baseId, cell);
- const isActive = cellId === activeId;
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(cell_Cell, {
- id: cellId,
- isActive: isActive,
- value: cell
- }, cell);
- })
- }, index))
- });
-}
-AlignmentMatrixControl.Icon = icon;
+const AlignmentMatrixControl = Object.assign(UnforwardedAlignmentMatrixControl, {
+ /**
+ * Render an alignment matrix as an icon.
+ *
+ * ```jsx
+ * import { AlignmentMatrixControl } from '@wordpress/components';
+ *
+ * <Icon icon={<AlignmentMatrixControl.Icon value="top left" />} />
+ * ```
+ */
+ Icon: Object.assign(icon, {
+ displayName: 'AlignmentMatrixControl.Icon'
+ })
+});
/* harmony default export */ const alignment_matrix_control = (AlignmentMatrixControl);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/animate/index.js
+;// ./node_modules/@wordpress/components/build-module/animate/index.js
/**
* External dependencies
*/
@@ -15796,7 +16336,7 @@
}
/* harmony default export */ const animate = (Animate);
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs
+;// ./node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs
/**
@@ -15810,14 +16350,14 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/MotionContext/index.mjs
+;// ./node_modules/framer-motion/dist/es/context/MotionContext/index.mjs
const MotionContext = (0,external_React_.createContext)({});
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/PresenceContext.mjs
+;// ./node_modules/framer-motion/dist/es/context/PresenceContext.mjs
/**
@@ -15827,12 +16367,12 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/is-browser.mjs
+;// ./node_modules/framer-motion/dist/es/utils/is-browser.mjs
const is_browser_isBrowser = typeof document !== "undefined";
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/use-isomorphic-effect.mjs
+;// ./node_modules/framer-motion/dist/es/utils/use-isomorphic-effect.mjs
@@ -15840,14 +16380,14 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/LazyContext.mjs
+;// ./node_modules/framer-motion/dist/es/context/LazyContext.mjs
const LazyContext = (0,external_React_.createContext)({ strict: false });
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/camel-to-dash.mjs
+;// ./node_modules/framer-motion/dist/es/render/dom/utils/camel-to-dash.mjs
/**
* Convert camelCase to dash-case properties.
*/
@@ -15855,7 +16395,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/optimized-appear/data-id.mjs
+;// ./node_modules/framer-motion/dist/es/animation/optimized-appear/data-id.mjs
const optimizedAppearDataId = "framerAppearId";
@@ -15863,7 +16403,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/GlobalConfig.mjs
+;// ./node_modules/framer-motion/dist/es/utils/GlobalConfig.mjs
const MotionGlobalConfig = {
skipAnimations: false,
useManualTiming: false,
@@ -15871,7 +16411,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/frameloop/render-step.mjs
+;// ./node_modules/framer-motion/dist/es/frameloop/render-step.mjs
class Queue {
constructor() {
this.order = [];
@@ -15977,7 +16517,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/frameloop/batcher.mjs
+;// ./node_modules/framer-motion/dist/es/frameloop/batcher.mjs
@@ -16044,14 +16584,14 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/frameloop/microtask.mjs
+;// ./node_modules/framer-motion/dist/es/frameloop/microtask.mjs
const { schedule: microtask, cancel: cancelMicrotask } = createRenderBatcher(queueMicrotask, false);
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/use-visual-element.mjs
+;// ./node_modules/framer-motion/dist/es/motion/utils/use-visual-element.mjs
@@ -16129,7 +16669,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/is-ref-object.mjs
+;// ./node_modules/framer-motion/dist/es/utils/is-ref-object.mjs
function isRefObject(ref) {
return (ref &&
typeof ref === "object" &&
@@ -16138,7 +16678,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/use-motion-ref.mjs
+;// ./node_modules/framer-motion/dist/es/motion/utils/use-motion-ref.mjs
@@ -16173,7 +16713,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/is-variant-label.mjs
+;// ./node_modules/framer-motion/dist/es/render/utils/is-variant-label.mjs
/**
* Decides if the supplied variable is variant label
*/
@@ -16183,7 +16723,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/is-animation-controls.mjs
+;// ./node_modules/framer-motion/dist/es/animation/utils/is-animation-controls.mjs
function isAnimationControls(v) {
return (v !== null &&
typeof v === "object" &&
@@ -16192,7 +16732,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/variant-props.mjs
+;// ./node_modules/framer-motion/dist/es/render/utils/variant-props.mjs
const variantPriorityOrder = [
"animate",
"whileInView",
@@ -16206,7 +16746,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/is-controlling-variants.mjs
+;// ./node_modules/framer-motion/dist/es/render/utils/is-controlling-variants.mjs
@@ -16221,7 +16761,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/MotionContext/utils.mjs
+;// ./node_modules/framer-motion/dist/es/context/MotionContext/utils.mjs
@@ -16240,7 +16780,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/MotionContext/create.mjs
+;// ./node_modules/framer-motion/dist/es/context/MotionContext/create.mjs
@@ -16255,7 +16795,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/definitions.mjs
+;// ./node_modules/framer-motion/dist/es/motion/features/definitions.mjs
const featureProps = {
animation: [
"animate",
@@ -16285,7 +16825,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/load-features.mjs
+;// ./node_modules/framer-motion/dist/es/motion/features/load-features.mjs
function loadFeatures(features) {
@@ -16299,14 +16839,14 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/LayoutGroupContext.mjs
+;// ./node_modules/framer-motion/dist/es/context/LayoutGroupContext.mjs
const LayoutGroupContext = (0,external_React_.createContext)({});
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/SwitchLayoutGroupContext.mjs
+;// ./node_modules/framer-motion/dist/es/context/SwitchLayoutGroupContext.mjs
/**
@@ -16316,12 +16856,12 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/symbol.mjs
+;// ./node_modules/framer-motion/dist/es/motion/utils/symbol.mjs
const motionComponentSymbol = Symbol.for("motionComponentSymbol");
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/index.mjs
+;// ./node_modules/framer-motion/dist/es/motion/index.mjs
@@ -16400,7 +16940,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/motion-proxy.mjs
+;// ./node_modules/framer-motion/dist/es/render/dom/motion-proxy.mjs
/**
@@ -16449,7 +16989,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/lowercase-elements.mjs
+;// ./node_modules/framer-motion/dist/es/render/svg/lowercase-elements.mjs
/**
* We keep these listed seperately as we use the lowercase tag names as part
* of the runtime bundle to detect SVG components
@@ -16484,7 +17024,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/is-svg-component.mjs
+;// ./node_modules/framer-motion/dist/es/render/dom/utils/is-svg-component.mjs
function isSVGComponent(Component) {
@@ -16516,7 +17056,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/styles/scale-correction.mjs
+;// ./node_modules/framer-motion/dist/es/projection/styles/scale-correction.mjs
const scaleCorrectors = {};
function addScaleCorrector(correctors) {
Object.assign(scaleCorrectors, correctors);
@@ -16524,7 +17064,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/utils/transform.mjs
+;// ./node_modules/framer-motion/dist/es/render/html/utils/transform.mjs
/**
* Generate a list of every possible transform key.
*/
@@ -16554,7 +17094,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/is-forced-motion-value.mjs
+;// ./node_modules/framer-motion/dist/es/motion/utils/is-forced-motion-value.mjs
@@ -16567,12 +17107,12 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/utils/is-motion-value.mjs
+;// ./node_modules/framer-motion/dist/es/value/utils/is-motion-value.mjs
const isMotionValue = (value) => Boolean(value && value.getVelocity);
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/utils/build-transform.mjs
+;// ./node_modules/framer-motion/dist/es/render/html/utils/build-transform.mjs
const translateAlias = {
@@ -16619,7 +17159,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/is-css-variable.mjs
+;// ./node_modules/framer-motion/dist/es/render/dom/utils/is-css-variable.mjs
const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
const isCSSVariableName = checkStringStartsWith("--");
const startsAsVariableToken = checkStringStartsWith("var(--");
@@ -16634,7 +17174,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/get-as-type.mjs
+;// ./node_modules/framer-motion/dist/es/render/dom/value-types/get-as-type.mjs
/**
* Provided a value and a ValueType, returns the value as that value type.
*/
@@ -16646,7 +17186,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/clamp.mjs
+;// ./node_modules/framer-motion/dist/es/utils/clamp.mjs
const clamp_clamp = (min, max, v) => {
if (v > max)
return max;
@@ -16657,7 +17197,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/types/numbers/index.mjs
+;// ./node_modules/framer-motion/dist/es/value/types/numbers/index.mjs
const number = {
@@ -16676,7 +17216,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/types/utils.mjs
+;// ./node_modules/framer-motion/dist/es/value/types/utils.mjs
/**
* TODO: When we move from string as a source of truth to data models
* everything in this folder should probably be referred to as models vs types
@@ -16693,7 +17233,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/types/numbers/units.mjs
+;// ./node_modules/framer-motion/dist/es/value/types/numbers/units.mjs
const createUnitType = (unit) => ({
@@ -16714,7 +17254,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/type-int.mjs
+;// ./node_modules/framer-motion/dist/es/render/dom/value-types/type-int.mjs
const type_int_int = {
@@ -16724,7 +17264,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/number.mjs
+;// ./node_modules/framer-motion/dist/es/render/dom/value-types/number.mjs
@@ -16800,7 +17340,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/utils/build-styles.mjs
+;// ./node_modules/framer-motion/dist/es/render/html/utils/build-styles.mjs
@@ -16876,7 +17416,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/utils/create-render-state.mjs
+;// ./node_modules/framer-motion/dist/es/render/html/utils/create-render-state.mjs
const createHtmlRenderState = () => ({
style: {},
transform: {},
@@ -16886,7 +17426,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/use-props.mjs
+;// ./node_modules/framer-motion/dist/es/render/html/use-props.mjs
@@ -16945,7 +17485,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/valid-prop.mjs
+;// ./node_modules/framer-motion/dist/es/motion/utils/valid-prop.mjs
/**
* A list of all valid MotionProps.
*
@@ -17004,7 +17544,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/filter-props.mjs
+;// ./node_modules/framer-motion/dist/es/render/dom/utils/filter-props.mjs
let shouldForward = (key) => !isValidMotionProp(key);
@@ -17065,7 +17605,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/utils/transform-origin.mjs
+;// ./node_modules/framer-motion/dist/es/render/svg/utils/transform-origin.mjs
function calcOrigin(origin, offset, size) {
@@ -17085,7 +17625,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/utils/path.mjs
+;// ./node_modules/framer-motion/dist/es/render/svg/utils/path.mjs
const dashKeys = {
@@ -17119,7 +17659,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/utils/build-attrs.mjs
+;// ./node_modules/framer-motion/dist/es/render/svg/utils/build-attrs.mjs
@@ -17173,7 +17713,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/utils/create-render-state.mjs
+;// ./node_modules/framer-motion/dist/es/render/svg/utils/create-render-state.mjs
const createSvgRenderState = () => ({
@@ -17183,12 +17723,12 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/utils/is-svg-tag.mjs
+;// ./node_modules/framer-motion/dist/es/render/svg/utils/is-svg-tag.mjs
const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/use-props.mjs
+;// ./node_modules/framer-motion/dist/es/render/svg/use-props.mjs
@@ -17214,7 +17754,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/use-render.mjs
+;// ./node_modules/framer-motion/dist/es/render/dom/use-render.mjs
@@ -17249,7 +17789,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/utils/render.mjs
+;// ./node_modules/framer-motion/dist/es/render/html/utils/render.mjs
function renderHTML(element, { style, vars }, styleProp, projection) {
Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
// Loop over any CSS variables and assign those.
@@ -17260,7 +17800,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/utils/camel-case-attrs.mjs
+;// ./node_modules/framer-motion/dist/es/render/svg/utils/camel-case-attrs.mjs
/**
* A set of attribute names that are always read/written as camel case.
*/
@@ -17292,7 +17832,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/utils/render.mjs
+;// ./node_modules/framer-motion/dist/es/render/svg/utils/render.mjs
@@ -17306,7 +17846,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/utils/scrape-motion-values.mjs
+;// ./node_modules/framer-motion/dist/es/render/html/utils/scrape-motion-values.mjs
@@ -17328,7 +17868,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/utils/scrape-motion-values.mjs
+;// ./node_modules/framer-motion/dist/es/render/svg/utils/scrape-motion-values.mjs
@@ -17349,7 +17889,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/resolve-variants.mjs
+;// ./node_modules/framer-motion/dist/es/render/utils/resolve-variants.mjs
function getValueState(visualElement) {
const state = [{}, {}];
visualElement === null || visualElement === void 0 ? void 0 : visualElement.values.forEach((value, key) => {
@@ -17387,7 +17927,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/use-constant.mjs
+;// ./node_modules/framer-motion/dist/es/utils/use-constant.mjs
/**
@@ -17407,14 +17947,14 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/is-keyframes-target.mjs
+;// ./node_modules/framer-motion/dist/es/animation/utils/is-keyframes-target.mjs
const isKeyframesTarget = (v) => {
return Array.isArray(v);
};
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/resolve-value.mjs
+;// ./node_modules/framer-motion/dist/es/utils/resolve-value.mjs
const isCustomValue = (v) => {
@@ -17427,7 +17967,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/utils/resolve-motion-value.mjs
+;// ./node_modules/framer-motion/dist/es/value/utils/resolve-motion-value.mjs
@@ -17445,7 +17985,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/use-visual-state.mjs
+;// ./node_modules/framer-motion/dist/es/motion/utils/use-visual-state.mjs
@@ -17528,12 +18068,12 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/noop.mjs
+;// ./node_modules/framer-motion/dist/es/utils/noop.mjs
const noop_noop = (any) => any;
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/frameloop/frame.mjs
+;// ./node_modules/framer-motion/dist/es/frameloop/frame.mjs
@@ -17541,7 +18081,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/config-motion.mjs
+;// ./node_modules/framer-motion/dist/es/render/svg/config-motion.mjs
@@ -17583,7 +18123,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/config-motion.mjs
+;// ./node_modules/framer-motion/dist/es/render/html/config-motion.mjs
@@ -17597,7 +18137,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/create-config.mjs
+;// ./node_modules/framer-motion/dist/es/render/dom/utils/create-config.mjs
@@ -17618,7 +18158,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/events/add-dom-event.mjs
+;// ./node_modules/framer-motion/dist/es/events/add-dom-event.mjs
function addDomEvent(target, eventName, handler, options = { passive: true }) {
target.addEventListener(eventName, handler, options);
return () => target.removeEventListener(eventName, handler);
@@ -17626,7 +18166,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/events/utils/is-primary-pointer.mjs
+;// ./node_modules/framer-motion/dist/es/events/utils/is-primary-pointer.mjs
const isPrimaryPointer = (event) => {
if (event.pointerType === "mouse") {
return typeof event.button !== "number" || event.button <= 0;
@@ -17646,7 +18186,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/events/event-info.mjs
+;// ./node_modules/framer-motion/dist/es/events/event-info.mjs
function extractEventInfo(event, pointType = "page") {
@@ -17663,7 +18203,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/events/add-pointer-event.mjs
+;// ./node_modules/framer-motion/dist/es/events/add-pointer-event.mjs
@@ -17673,7 +18213,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/pipe.mjs
+;// ./node_modules/framer-motion/dist/es/utils/pipe.mjs
/**
* Pipe
* Compose other transformers to run linearily
@@ -17686,7 +18226,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/drag/utils/lock.mjs
+;// ./node_modules/framer-motion/dist/es/gestures/drag/utils/lock.mjs
function createLock(name) {
let lock = null;
return () => {
@@ -17741,7 +18281,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/Feature.mjs
+;// ./node_modules/framer-motion/dist/es/motion/features/Feature.mjs
class Feature {
constructor(node) {
this.isMounted = false;
@@ -17752,7 +18292,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/hover.mjs
+;// ./node_modules/framer-motion/dist/es/gestures/hover.mjs
@@ -17787,7 +18327,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/focus.mjs
+;// ./node_modules/framer-motion/dist/es/gestures/focus.mjs
@@ -17830,7 +18370,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/utils/is-node-or-child.mjs
+;// ./node_modules/framer-motion/dist/es/gestures/utils/is-node-or-child.mjs
/**
* Recursively traverse up the tree to check whether the provided child node
* is the parent or a descendant of it.
@@ -17852,7 +18392,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/press.mjs
+;// ./node_modules/framer-motion/dist/es/gestures/press.mjs
@@ -17984,7 +18524,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/viewport/observers.mjs
+;// ./node_modules/framer-motion/dist/es/motion/features/viewport/observers.mjs
/**
* Map an IntersectionHandler callback to an element. We only ever make one handler for one
* element, so even though these handlers might all be triggered by different
@@ -18035,7 +18575,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/viewport/index.mjs
+;// ./node_modules/framer-motion/dist/es/motion/features/viewport/index.mjs
@@ -18109,7 +18649,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/gestures.mjs
+;// ./node_modules/framer-motion/dist/es/motion/features/gestures.mjs
@@ -18132,7 +18672,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/shallow-compare.mjs
+;// ./node_modules/framer-motion/dist/es/utils/shallow-compare.mjs
function shallowCompare(next, prev) {
if (!Array.isArray(prev))
return false;
@@ -18148,7 +18688,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/resolve-dynamic-variants.mjs
+;// ./node_modules/framer-motion/dist/es/render/utils/resolve-dynamic-variants.mjs
function resolveVariant(visualElement, definition, custom) {
@@ -18158,7 +18698,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/time-conversion.mjs
+;// ./node_modules/framer-motion/dist/es/utils/time-conversion.mjs
/**
* Converts seconds to milliseconds
*
@@ -18170,7 +18710,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/default-transitions.mjs
+;// ./node_modules/framer-motion/dist/es/animation/utils/default-transitions.mjs
const underDampedSpring = {
@@ -18212,7 +18752,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/transitions.mjs
+;// ./node_modules/framer-motion/dist/es/animation/utils/transitions.mjs
/**
* Decide whether a transition is defined on a given Transition.
* This filters out orchestration options and returns true
@@ -18229,14 +18769,14 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/use-instant-transition-state.mjs
+;// ./node_modules/framer-motion/dist/es/utils/use-instant-transition-state.mjs
const instantAnimationState = {
current: false,
};
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/waapi/utils/get-final-keyframe.mjs
+;// ./node_modules/framer-motion/dist/es/animation/animators/waapi/utils/get-final-keyframe.mjs
const isNotNull = (value) => value !== null;
function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) {
const resolvedKeyframes = keyframes.filter(isNotNull);
@@ -18250,7 +18790,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/frameloop/sync-time.mjs
+;// ./node_modules/framer-motion/dist/es/frameloop/sync-time.mjs
@@ -18283,7 +18823,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/is-zero-value-string.mjs
+;// ./node_modules/framer-motion/dist/es/utils/is-zero-value-string.mjs
/**
* Check if the value is a zero value string like "0px" or "0%"
*/
@@ -18291,7 +18831,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/is-none.mjs
+;// ./node_modules/framer-motion/dist/es/animation/utils/is-none.mjs
function isNone(value) {
@@ -18308,7 +18848,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/errors.mjs
+;// ./node_modules/framer-motion/dist/es/utils/errors.mjs
let warning = noop_noop;
@@ -18317,7 +18857,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/is-numerical-string.mjs
+;// ./node_modules/framer-motion/dist/es/utils/is-numerical-string.mjs
/**
* Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1"
*/
@@ -18325,7 +18865,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/css-variables-conversion.mjs
+;// ./node_modules/framer-motion/dist/es/render/dom/utils/css-variables-conversion.mjs
@@ -18369,7 +18909,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/unit-conversion.mjs
+;// ./node_modules/framer-motion/dist/es/render/dom/utils/unit-conversion.mjs
@@ -18436,7 +18976,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/test.mjs
+;// ./node_modules/framer-motion/dist/es/render/dom/value-types/test.mjs
/**
* Tests a provided value against a ValueType
*/
@@ -18444,7 +18984,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/type-auto.mjs
+;// ./node_modules/framer-motion/dist/es/render/dom/value-types/type-auto.mjs
/**
* ValueType for "auto"
*/
@@ -18455,7 +18995,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/dimensions.mjs
+;// ./node_modules/framer-motion/dist/es/render/dom/value-types/dimensions.mjs
@@ -18472,7 +19012,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/KeyframesResolver.mjs
+;// ./node_modules/framer-motion/dist/es/render/utils/KeyframesResolver.mjs
@@ -18638,7 +19178,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/types/color/utils.mjs
+;// ./node_modules/framer-motion/dist/es/value/types/color/utils.mjs
/**
@@ -18663,7 +19203,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/types/color/rgba.mjs
+;// ./node_modules/framer-motion/dist/es/value/types/color/rgba.mjs
@@ -18690,7 +19230,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/types/color/hex.mjs
+;// ./node_modules/framer-motion/dist/es/value/types/color/hex.mjs
@@ -18732,7 +19272,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/types/color/hsla.mjs
+;// ./node_modules/framer-motion/dist/es/value/types/color/hsla.mjs
@@ -18756,7 +19296,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/types/color/index.mjs
+;// ./node_modules/framer-motion/dist/es/value/types/color/index.mjs
@@ -18786,7 +19326,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/types/complex/index.mjs
+;// ./node_modules/framer-motion/dist/es/value/types/complex/index.mjs
@@ -18878,7 +19418,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/types/complex/filter.mjs
+;// ./node_modules/framer-motion/dist/es/value/types/complex/filter.mjs
@@ -18910,7 +19450,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/defaults.mjs
+;// ./node_modules/framer-motion/dist/es/render/dom/value-types/defaults.mjs
@@ -18942,7 +19482,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/animatable-none.mjs
+;// ./node_modules/framer-motion/dist/es/render/dom/value-types/animatable-none.mjs
@@ -18959,7 +19499,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/utils/make-none-animatable.mjs
+;// ./node_modules/framer-motion/dist/es/render/html/utils/make-none-animatable.mjs
@@ -18991,7 +19531,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/DOMKeyframesResolver.mjs
+;// ./node_modules/framer-motion/dist/es/render/dom/DOMKeyframesResolver.mjs
@@ -19120,7 +19660,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/memo.mjs
+;// ./node_modules/framer-motion/dist/es/utils/memo.mjs
function memo(callback) {
let result;
return () => {
@@ -19132,7 +19672,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/is-animatable.mjs
+;// ./node_modules/framer-motion/dist/es/animation/utils/is-animatable.mjs
/**
@@ -19164,7 +19704,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/utils/can-animate.mjs
+;// ./node_modules/framer-motion/dist/es/animation/animators/utils/can-animate.mjs
@@ -19206,7 +19746,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/BaseAnimation.mjs
+;// ./node_modules/framer-motion/dist/es/animation/animators/BaseAnimation.mjs
@@ -19292,7 +19832,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/velocity-per-second.mjs
+;// ./node_modules/framer-motion/dist/es/utils/velocity-per-second.mjs
/*
Convert velocity into velocity per second
@@ -19305,7 +19845,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/generators/utils/velocity.mjs
+;// ./node_modules/framer-motion/dist/es/animation/generators/utils/velocity.mjs
const velocitySampleDuration = 5; // ms
@@ -19316,7 +19856,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/generators/spring/find.mjs
+;// ./node_modules/framer-motion/dist/es/animation/generators/spring/find.mjs
@@ -19407,7 +19947,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/generators/spring/index.mjs
+;// ./node_modules/framer-motion/dist/es/animation/generators/spring/index.mjs
@@ -19540,7 +20080,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/generators/inertia.mjs
+;// ./node_modules/framer-motion/dist/es/animation/generators/inertia.mjs
@@ -19629,7 +20169,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/cubic-bezier.mjs
+;// ./node_modules/framer-motion/dist/es/easing/cubic-bezier.mjs
/*
@@ -19682,7 +20222,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/ease.mjs
+;// ./node_modules/framer-motion/dist/es/easing/ease.mjs
const easeIn = cubicBezier(0.42, 0, 1, 1);
@@ -19691,28 +20231,28 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/utils/is-easing-array.mjs
+;// ./node_modules/framer-motion/dist/es/easing/utils/is-easing-array.mjs
const isEasingArray = (ease) => {
return Array.isArray(ease) && typeof ease[0] !== "number";
};
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/modifiers/mirror.mjs
+;// ./node_modules/framer-motion/dist/es/easing/modifiers/mirror.mjs
// Accepts an easing function and returns a new one that outputs mirrored values for
// the second half of the animation. Turns easeIn into easeInOut.
const mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/modifiers/reverse.mjs
+;// ./node_modules/framer-motion/dist/es/easing/modifiers/reverse.mjs
// Accepts an easing function and returns a new one that outputs reversed values.
// Turns easeIn into easeOut.
const reverseEasing = (easing) => (p) => 1 - easing(1 - p);
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/circ.mjs
+;// ./node_modules/framer-motion/dist/es/easing/circ.mjs
@@ -19722,7 +20262,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/back.mjs
+;// ./node_modules/framer-motion/dist/es/easing/back.mjs
@@ -19733,14 +20273,14 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/anticipate.mjs
+;// ./node_modules/framer-motion/dist/es/easing/anticipate.mjs
const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/utils/map.mjs
+;// ./node_modules/framer-motion/dist/es/easing/utils/map.mjs
@@ -19779,7 +20319,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/progress.mjs
+;// ./node_modules/framer-motion/dist/es/utils/progress.mjs
/*
Progress within given range
@@ -19799,7 +20339,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/mix/number.mjs
+;// ./node_modules/framer-motion/dist/es/utils/mix/number.mjs
/*
Value in range from progress
@@ -19827,7 +20367,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/hsla-to-rgba.mjs
+;// ./node_modules/framer-motion/dist/es/utils/hsla-to-rgba.mjs
// Adapted from https://gist.github.com/mjackson/5311256
function hueToRgb(p, q, t) {
if (t < 0)
@@ -19871,7 +20411,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/mix/color.mjs
+;// ./node_modules/framer-motion/dist/es/utils/mix/color.mjs
@@ -19914,7 +20454,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/mix/visibility.mjs
+;// ./node_modules/framer-motion/dist/es/utils/mix/visibility.mjs
const invisibleValues = new Set(["none", "hidden"]);
/**
* Returns a function that, when provided a progress value between 0 and 1,
@@ -19932,7 +20472,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/mix/complex.mjs
+;// ./node_modules/framer-motion/dist/es/utils/mix/complex.mjs
@@ -20030,7 +20570,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/mix/index.mjs
+;// ./node_modules/framer-motion/dist/es/utils/mix/index.mjs
@@ -20046,7 +20586,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/interpolate.mjs
+;// ./node_modules/framer-motion/dist/es/utils/interpolate.mjs
@@ -20123,7 +20663,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/offsets/fill.mjs
+;// ./node_modules/framer-motion/dist/es/utils/offsets/fill.mjs
@@ -20137,7 +20677,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/offsets/default.mjs
+;// ./node_modules/framer-motion/dist/es/utils/offsets/default.mjs
function defaultOffset(arr) {
@@ -20148,14 +20688,14 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/offsets/time.mjs
+;// ./node_modules/framer-motion/dist/es/utils/offsets/time.mjs
function convertOffsetToTimes(offset, duration) {
return offset.map((o) => o * duration);
}
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/generators/keyframes.mjs
+;// ./node_modules/framer-motion/dist/es/animation/generators/keyframes.mjs
@@ -20208,7 +20748,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/generators/utils/calc-duration.mjs
+;// ./node_modules/framer-motion/dist/es/animation/generators/utils/calc-duration.mjs
/**
* Implement a practical max duration for keyframe generation
* to prevent infinite loops
@@ -20227,7 +20767,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/drivers/driver-frameloop.mjs
+;// ./node_modules/framer-motion/dist/es/animation/animators/drivers/driver-frameloop.mjs
@@ -20246,7 +20786,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs
+;// ./node_modules/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs
@@ -20628,12 +21168,12 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/utils/is-bezier-definition.mjs
+;// ./node_modules/framer-motion/dist/es/easing/utils/is-bezier-definition.mjs
const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/waapi/easing.mjs
+;// ./node_modules/framer-motion/dist/es/animation/animators/waapi/easing.mjs
function isWaapiSupportedEasing(easing) {
@@ -20675,7 +21215,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/waapi/index.mjs
+;// ./node_modules/framer-motion/dist/es/animation/animators/waapi/index.mjs
function animateStyle(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease, times, } = {}) {
@@ -20700,7 +21240,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/AcceleratedAnimation.mjs
+;// ./node_modules/framer-motion/dist/es/animation/animators/AcceleratedAnimation.mjs
@@ -20997,7 +21537,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/interfaces/motion-value.mjs
+;// ./node_modules/framer-motion/dist/es/animation/interfaces/motion-value.mjs
@@ -21108,7 +21648,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/use-will-change/is.mjs
+;// ./node_modules/framer-motion/dist/es/value/use-will-change/is.mjs
function isWillChangeMotionValue(value) {
@@ -21117,7 +21657,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/array.mjs
+;// ./node_modules/framer-motion/dist/es/utils/array.mjs
function addUniqueItem(arr, item) {
if (arr.indexOf(item) === -1)
arr.push(item);
@@ -21140,7 +21680,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/subscription-manager.mjs
+;// ./node_modules/framer-motion/dist/es/utils/subscription-manager.mjs
class SubscriptionManager {
@@ -21182,7 +21722,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/index.mjs
+;// ./node_modules/framer-motion/dist/es/value/index.mjs
@@ -21501,7 +22041,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/setters.mjs
+;// ./node_modules/framer-motion/dist/es/render/utils/setters.mjs
@@ -21530,7 +22070,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/interfaces/visual-element-target.mjs
+;// ./node_modules/framer-motion/dist/es/animation/interfaces/visual-element-target.mjs
@@ -21613,7 +22153,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/interfaces/visual-element-variant.mjs
+;// ./node_modules/framer-motion/dist/es/animation/interfaces/visual-element-variant.mjs
@@ -21681,7 +22221,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/interfaces/visual-element.mjs
+;// ./node_modules/framer-motion/dist/es/animation/interfaces/visual-element.mjs
@@ -21712,7 +22252,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/animation-state.mjs
+;// ./node_modules/framer-motion/dist/es/render/utils/animation-state.mjs
@@ -22038,7 +22578,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/animation/index.mjs
+;// ./node_modules/framer-motion/dist/es/motion/features/animation/index.mjs
@@ -22078,7 +22618,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/animation/exit.mjs
+;// ./node_modules/framer-motion/dist/es/motion/features/animation/exit.mjs
let id = 0;
@@ -22111,7 +22651,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/animations.mjs
+;// ./node_modules/framer-motion/dist/es/motion/features/animations.mjs
@@ -22126,7 +22666,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/distance.mjs
+;// ./node_modules/framer-motion/dist/es/utils/distance.mjs
const distance = (a, b) => Math.abs(a - b);
function distance2D(a, b) {
// Multi-dimensional
@@ -22137,7 +22677,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/pan/PanSession.mjs
+;// ./node_modules/framer-motion/dist/es/gestures/pan/PanSession.mjs
@@ -22295,7 +22835,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/geometry/delta-calc.mjs
+;// ./node_modules/framer-motion/dist/es/projection/geometry/delta-calc.mjs
function calcLength(axis) {
@@ -22338,7 +22878,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/drag/utils/constraints.mjs
+;// ./node_modules/framer-motion/dist/es/gestures/drag/utils/constraints.mjs
@@ -22469,7 +23009,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/geometry/models.mjs
+;// ./node_modules/framer-motion/dist/es/projection/geometry/models.mjs
const createAxisDelta = () => ({
translate: 0,
scale: 1,
@@ -22488,14 +23028,14 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/utils/each-axis.mjs
+;// ./node_modules/framer-motion/dist/es/projection/utils/each-axis.mjs
function eachAxis(callback) {
return [callback("x"), callback("y")];
}
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/geometry/conversion.mjs
+;// ./node_modules/framer-motion/dist/es/projection/geometry/conversion.mjs
/**
* Bounding boxes tend to be defined as top, left, right, bottom. For various operations
* it's easier to consider each axis individually. This function returns a bounding box
@@ -22530,7 +23070,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/utils/has-transform.mjs
+;// ./node_modules/framer-motion/dist/es/projection/utils/has-transform.mjs
function isIdentityScale(scale) {
return scale === undefined || scale === 1;
}
@@ -22558,7 +23098,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/geometry/delta-apply.mjs
+;// ./node_modules/framer-motion/dist/es/projection/geometry/delta-apply.mjs
@@ -22682,7 +23222,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/utils/measure.mjs
+;// ./node_modules/framer-motion/dist/es/projection/utils/measure.mjs
@@ -22701,7 +23241,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/get-context-window.mjs
+;// ./node_modules/framer-motion/dist/es/utils/get-context-window.mjs
// Fixes https://github.com/framer/motion/issues/2270
const getContextWindow = ({ current }) => {
return current ? current.ownerDocument.defaultView : null;
@@ -22709,7 +23249,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/drag/VisualElementDragControls.mjs
+;// ./node_modules/framer-motion/dist/es/gestures/drag/VisualElementDragControls.mjs
@@ -23195,7 +23735,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/drag/index.mjs
+;// ./node_modules/framer-motion/dist/es/gestures/drag/index.mjs
@@ -23224,7 +23764,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/pan/index.mjs
+;// ./node_modules/framer-motion/dist/es/gestures/pan/index.mjs
@@ -23276,7 +23816,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs
+;// ./node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs
@@ -23344,7 +23884,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/node/state.mjs
+;// ./node_modules/framer-motion/dist/es/projection/node/state.mjs
/**
* This should only ever be modified on the client otherwise it'll
* persist through server requests. If we need instanced states we
@@ -23365,7 +23905,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/styles/scale-border-radius.mjs
+;// ./node_modules/framer-motion/dist/es/projection/styles/scale-border-radius.mjs
function pixelsToPercent(pixels, axis) {
@@ -23408,7 +23948,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/styles/scale-box-shadow.mjs
+;// ./node_modules/framer-motion/dist/es/projection/styles/scale-box-shadow.mjs
@@ -23445,7 +23985,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/layout/MeasureLayout.mjs
+;// ./node_modules/framer-motion/dist/es/motion/features/layout/MeasureLayout.mjs
@@ -23580,7 +24120,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/animation/mix-values.mjs
+;// ./node_modules/framer-motion/dist/es/projection/animation/mix-values.mjs
@@ -23675,7 +24215,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/geometry/copy.mjs
+;// ./node_modules/framer-motion/dist/es/projection/geometry/copy.mjs
/**
* Reset an axis to the provided origin box.
*
@@ -23697,7 +24237,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/geometry/delta-remove.mjs
+;// ./node_modules/framer-motion/dist/es/projection/geometry/delta-remove.mjs
@@ -23753,7 +24293,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/geometry/utils.mjs
+;// ./node_modules/framer-motion/dist/es/projection/geometry/utils.mjs
function isAxisDeltaZero(delta) {
@@ -23780,7 +24320,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/shared/stack.mjs
+;// ./node_modules/framer-motion/dist/es/projection/shared/stack.mjs
class NodeStack {
@@ -23894,7 +24434,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/styles/transform.mjs
+;// ./node_modules/framer-motion/dist/es/projection/styles/transform.mjs
function buildProjectionTransform(delta, treeScale, latestTransform) {
let transform = "";
/**
@@ -23945,12 +24485,12 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/compare-by-depth.mjs
+;// ./node_modules/framer-motion/dist/es/render/utils/compare-by-depth.mjs
const compareByDepth = (a, b) => a.depth - b.depth;
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/flat-tree.mjs
+;// ./node_modules/framer-motion/dist/es/render/utils/flat-tree.mjs
@@ -23976,7 +24516,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/delay.mjs
+;// ./node_modules/framer-motion/dist/es/utils/delay.mjs
@@ -23998,7 +24538,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/debug/record.mjs
+;// ./node_modules/framer-motion/dist/es/debug/record.mjs
function record(data) {
if (window.MotionDebug) {
window.MotionDebug.record(data);
@@ -24007,14 +24547,14 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/is-svg-element.mjs
+;// ./node_modules/framer-motion/dist/es/render/dom/utils/is-svg-element.mjs
function isSVGElement(element) {
return element instanceof SVGElement && element.tagName !== "svg";
}
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/interfaces/single-value.mjs
+;// ./node_modules/framer-motion/dist/es/animation/interfaces/single-value.mjs
@@ -24027,7 +24567,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/node/create-projection-node.mjs
+;// ./node_modules/framer-motion/dist/es/projection/node/create-projection-node.mjs
@@ -25554,7 +26094,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/node/DocumentProjectionNode.mjs
+;// ./node_modules/framer-motion/dist/es/projection/node/DocumentProjectionNode.mjs
@@ -25569,7 +26109,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/node/HTMLProjectionNode.mjs
+;// ./node_modules/framer-motion/dist/es/projection/node/HTMLProjectionNode.mjs
@@ -25598,7 +26138,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/drag.mjs
+;// ./node_modules/framer-motion/dist/es/motion/features/drag.mjs
@@ -25617,14 +26157,14 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/reduced-motion/state.mjs
+;// ./node_modules/framer-motion/dist/es/utils/reduced-motion/state.mjs
// Does this device prefer reduced motion? Returns `null` server-side.
const prefersReducedMotion = { current: null };
const hasReducedMotionListener = { current: false };
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/reduced-motion/index.mjs
+;// ./node_modules/framer-motion/dist/es/utils/reduced-motion/index.mjs
@@ -25645,7 +26185,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/motion-values.mjs
+;// ./node_modules/framer-motion/dist/es/render/utils/motion-values.mjs
@@ -25712,12 +26252,12 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/store.mjs
+;// ./node_modules/framer-motion/dist/es/render/store.mjs
const visualElementStore = new WeakMap();
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/find.mjs
+;// ./node_modules/framer-motion/dist/es/render/dom/value-types/find.mjs
@@ -25734,7 +26274,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/VisualElement.mjs
+;// ./node_modules/framer-motion/dist/es/render/VisualElement.mjs
@@ -26271,7 +26811,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/DOMVisualElement.mjs
+;// ./node_modules/framer-motion/dist/es/render/dom/DOMVisualElement.mjs
@@ -26301,7 +26841,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/HTMLVisualElement.mjs
+;// ./node_modules/framer-motion/dist/es/render/html/HTMLVisualElement.mjs
@@ -26362,7 +26902,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/SVGVisualElement.mjs
+;// ./node_modules/framer-motion/dist/es/render/svg/SVGVisualElement.mjs
@@ -26411,7 +26951,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/create-visual-element.mjs
+;// ./node_modules/framer-motion/dist/es/render/dom/create-visual-element.mjs
@@ -26428,7 +26968,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/layout.mjs
+;// ./node_modules/framer-motion/dist/es/motion/features/layout.mjs
@@ -26441,7 +26981,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/motion.mjs
+;// ./node_modules/framer-motion/dist/es/render/dom/motion.mjs
@@ -26485,7 +27025,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/use-is-mounted.mjs
+;// ./node_modules/framer-motion/dist/es/utils/use-is-mounted.mjs
@@ -26502,7 +27042,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/use-force-update.mjs
+;// ./node_modules/framer-motion/dist/es/utils/use-force-update.mjs
@@ -26523,7 +27063,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs
+;// ./node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs
@@ -26601,7 +27141,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs
+;// ./node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs
@@ -26660,7 +27200,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/use-unmount-effect.mjs
+;// ./node_modules/framer-motion/dist/es/utils/use-unmount-effect.mjs
function useUnmountEffect(callback) {
@@ -26669,7 +27209,7 @@
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs
+;// ./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs
@@ -26836,7 +27376,7 @@
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/use-responsive-value.js
+;// ./node_modules/@wordpress/components/build-module/utils/use-responsive-value.js
/**
* WordPress dependencies
*/
@@ -26888,49 +27428,7 @@
index >= array.length ? array.length - 1 : index];
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/space.js
-/**
- * The argument value for the `space()` utility function.
- *
- * When this is a number or a numeric string, it will be interpreted as a
- * multiplier for the grid base value (4px). For example, `space( 2 )` will be 8px.
- *
- * Otherwise, it will be interpreted as a literal CSS length value. For example,
- * `space( 'auto' )` will be 'auto', and `space( '2px' )` will be 2px.
- */
-
-const GRID_BASE = '4px';
-
-/**
- * A function that handles numbers, numeric strings, and unit values.
- *
- * When given a number or a numeric string, it will return the grid-based
- * value as a factor of GRID_BASE, defined above.
- *
- * When given a unit value or one of the named CSS values like `auto`,
- * it will simply return the value back.
- *
- * @param value A number, numeric string, or a unit value.
- */
-function space(value) {
- if (typeof value === 'undefined') {
- return undefined;
- }
-
- // Handle empty strings, if it's the number 0 this still works.
- if (!value) {
- return '0';
- }
- const asInt = typeof value === 'number' ? value : Number(value);
-
- // Test if the input has a unit, was NaN, or was one of the named CSS values (like `auto`), in which case just use that value.
- if (typeof window !== 'undefined' && window.CSS?.supports?.('margin', value.toString()) || Number.isNaN(asInt)) {
- return value.toString();
- }
- return `calc(${GRID_BASE} * ${value})`;
-}
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/styles.js
+;// ./node_modules/@wordpress/components/build-module/flex/styles.js
function styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
* External dependencies
@@ -26970,7 +27468,7 @@
styles: ">*{min-width:0;}"
} : 0;
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/flex/hook.js
+;// ./node_modules/@wordpress/components/build-module/flex/flex/hook.js
/**
* External dependencies
*/
@@ -27042,7 +27540,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/context.js
+;// ./node_modules/@wordpress/components/build-module/flex/context.js
/**
* WordPress dependencies
*/
@@ -27052,7 +27550,7 @@
});
const useFlexContext = () => (0,external_wp_element_namespaceObject.useContext)(FlexContext);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/flex/component.js
+;// ./node_modules/@wordpress/components/build-module/flex/flex/component.js
/**
* External dependencies
*/
@@ -27112,7 +27610,7 @@
const component_Flex = contextConnect(UnconnectedFlex, 'Flex');
/* harmony default export */ const flex_component = (component_Flex);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/flex-item/hook.js
+;// ./node_modules/@wordpress/components/build-module/flex/flex-item/hook.js
/**
* External dependencies
*/
@@ -27147,7 +27645,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/flex-block/hook.js
+;// ./node_modules/@wordpress/components/build-module/flex/flex-block/hook.js
/**
* Internal dependencies
*/
@@ -27163,7 +27661,7 @@
return flexItemProps;
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/flex-block/component.js
+;// ./node_modules/@wordpress/components/build-module/flex/flex-block/component.js
/**
* External dependencies
*/
@@ -27203,7 +27701,7 @@
const FlexBlock = contextConnect(UnconnectedFlexBlock, 'FlexBlock');
/* harmony default export */ const flex_block_component = (FlexBlock);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/rtl.js
+;// ./node_modules/@wordpress/components/build-module/utils/rtl.js
/**
* External dependencies
*/
@@ -27292,20 +27790,22 @@
*/
rtl.watch = () => (0,external_wp_i18n_namespaceObject.isRTL)();
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/spacer/hook.js
-/**
- * External dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
-
-
-
-const isDefined = o => typeof o !== 'undefined' && o !== null;
+;// ./node_modules/@wordpress/components/build-module/spacer/hook.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+function isDefined(o) {
+ return typeof o !== 'undefined' && o !== null;
+}
function useSpacer(props) {
const {
className,
@@ -27341,7 +27841,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/spacer/component.js
+;// ./node_modules/@wordpress/components/build-module/spacer/component.js
/**
* External dependencies
*/
@@ -27389,7 +27889,7 @@
const Spacer = contextConnect(UnconnectedSpacer, 'Spacer');
/* harmony default export */ const spacer_component = (Spacer);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/plus.js
+;// ./node_modules/@wordpress/icons/build-module/library/plus.js
/**
* WordPress dependencies
*/
@@ -27404,7 +27904,7 @@
});
/* harmony default export */ const library_plus = (plus);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/reset.js
+;// ./node_modules/@wordpress/icons/build-module/library/reset.js
/**
* WordPress dependencies
*/
@@ -27419,7 +27919,7 @@
});
/* harmony default export */ const library_reset = (reset_reset);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/flex-item/component.js
+;// ./node_modules/@wordpress/components/build-module/flex/flex-item/component.js
/**
* External dependencies
*/
@@ -27459,7 +27959,7 @@
const FlexItem = contextConnect(UnconnectedFlexItem, 'FlexItem');
/* harmony default export */ const flex_item_component = (FlexItem);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/truncate/styles.js
+;// ./node_modules/@wordpress/components/build-module/truncate/styles.js
function truncate_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
* External dependencies
@@ -27470,7 +27970,7 @@
styles: "display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"
} : 0;
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/values.js
+;// ./node_modules/@wordpress/components/build-module/utils/values.js
/* eslint-disable jsdoc/valid-types */
/**
* Determines if a value is null or undefined.
@@ -27534,7 +28034,7 @@
return typeof value === 'string' ? stringToNumber(value) : value;
};
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/truncate/utils.js
+;// ./node_modules/@wordpress/components/build-module/truncate/utils.js
/**
* Internal dependencies
*/
@@ -27607,7 +28107,7 @@
return truncatedContent;
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/truncate/hook.js
+;// ./node_modules/@wordpress/components/build-module/truncate/hook.js
/**
* External dependencies
*/
@@ -27664,13 +28164,13 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/colord/index.mjs
+;// ./node_modules/colord/index.mjs
var colord_r={grad:.9,turn:360,rad:360/(2*Math.PI)},t=function(r){return"string"==typeof r?r.length>0:"number"==typeof r},colord_n=function(r,t,n){return void 0===t&&(t=0),void 0===n&&(n=Math.pow(10,t)),Math.round(n*r)/n+0},colord_e=function(r,t,n){return void 0===t&&(t=0),void 0===n&&(n=1),r>n?n:r>t?r:t},u=function(r){return(r=isFinite(r)?r%360:0)>0?r:r+360},colord_a=function(r){return{r:colord_e(r.r,0,255),g:colord_e(r.g,0,255),b:colord_e(r.b,0,255),a:colord_e(r.a)}},colord_o=function(r){return{r:colord_n(r.r),g:colord_n(r.g),b:colord_n(r.b),a:colord_n(r.a,3)}},i=/^#([0-9a-f]{3,8})$/i,s=function(r){var t=r.toString(16);return t.length<2?"0"+t:t},h=function(r){var t=r.r,n=r.g,e=r.b,u=r.a,a=Math.max(t,n,e),o=a-Math.min(t,n,e),i=o?a===t?(n-e)/o:a===n?2+(e-t)/o:4+(t-n)/o:0;return{h:60*(i<0?i+6:i),s:a?o/a*100:0,v:a/255*100,a:u}},b=function(r){var t=r.h,n=r.s,e=r.v,u=r.a;t=t/360*6,n/=100,e/=100;var a=Math.floor(t),o=e*(1-n),i=e*(1-(t-a)*n),s=e*(1-(1-t+a)*n),h=a%6;return{r:255*[e,i,o,o,s,e][h],g:255*[s,e,e,i,o,o][h],b:255*[o,o,s,e,e,i][h],a:u}},g=function(r){return{h:u(r.h),s:colord_e(r.s,0,100),l:colord_e(r.l,0,100),a:colord_e(r.a)}},d=function(r){return{h:colord_n(r.h),s:colord_n(r.s),l:colord_n(r.l),a:colord_n(r.a,3)}},f=function(r){return b((n=(t=r).s,{h:t.h,s:(n*=((e=t.l)<50?e:100-e)/100)>0?2*n/(e+n)*100:0,v:e+n,a:t.a}));var t,n,e},c=function(r){return{h:(t=h(r)).h,s:(u=(200-(n=t.s))*(e=t.v)/100)>0&&u<200?n*e/100/(u<=100?u:200-u)*100:0,l:u/2,a:t.a};var t,n,e,u},l=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,p=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,v=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,m=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,y={string:[[function(r){var t=i.exec(r);return t?(r=t[1]).length<=4?{r:parseInt(r[0]+r[0],16),g:parseInt(r[1]+r[1],16),b:parseInt(r[2]+r[2],16),a:4===r.length?colord_n(parseInt(r[3]+r[3],16)/255,2):1}:6===r.length||8===r.length?{r:parseInt(r.substr(0,2),16),g:parseInt(r.substr(2,2),16),b:parseInt(r.substr(4,2),16),a:8===r.length?colord_n(parseInt(r.substr(6,2),16)/255,2):1}:null:null},"hex"],[function(r){var t=v.exec(r)||m.exec(r);return t?t[2]!==t[4]||t[4]!==t[6]?null:colord_a({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:void 0===t[7]?1:Number(t[7])/(t[8]?100:1)}):null},"rgb"],[function(t){var n=l.exec(t)||p.exec(t);if(!n)return null;var e,u,a=g({h:(e=n[1],u=n[2],void 0===u&&(u="deg"),Number(e)*(colord_r[u]||1)),s:Number(n[3]),l:Number(n[4]),a:void 0===n[5]?1:Number(n[5])/(n[6]?100:1)});return f(a)},"hsl"]],object:[[function(r){var n=r.r,e=r.g,u=r.b,o=r.a,i=void 0===o?1:o;return t(n)&&t(e)&&t(u)?colord_a({r:Number(n),g:Number(e),b:Number(u),a:Number(i)}):null},"rgb"],[function(r){var n=r.h,e=r.s,u=r.l,a=r.a,o=void 0===a?1:a;if(!t(n)||!t(e)||!t(u))return null;var i=g({h:Number(n),s:Number(e),l:Number(u),a:Number(o)});return f(i)},"hsl"],[function(r){var n=r.h,a=r.s,o=r.v,i=r.a,s=void 0===i?1:i;if(!t(n)||!t(a)||!t(o))return null;var h=function(r){return{h:u(r.h),s:colord_e(r.s,0,100),v:colord_e(r.v,0,100),a:colord_e(r.a)}}({h:Number(n),s:Number(a),v:Number(o),a:Number(s)});return b(h)},"hsv"]]},N=function(r,t){for(var n=0;n<t.length;n++){var e=t[n][0](r);if(e)return[e,t[n][1]]}return[null,void 0]},x=function(r){return"string"==typeof r?N(r.trim(),y.string):"object"==typeof r&&null!==r?N(r,y.object):[null,void 0]},I=function(r){return x(r)[1]},M=function(r,t){var n=c(r);return{h:n.h,s:colord_e(n.s+100*t,0,100),l:n.l,a:n.a}},H=function(r){return(299*r.r+587*r.g+114*r.b)/1e3/255},$=function(r,t){var n=c(r);return{h:n.h,s:n.s,l:colord_e(n.l+100*t,0,100),a:n.a}},j=function(){function r(r){this.parsed=x(r)[0],this.rgba=this.parsed||{r:0,g:0,b:0,a:1}}return r.prototype.isValid=function(){return null!==this.parsed},r.prototype.brightness=function(){return colord_n(H(this.rgba),2)},r.prototype.isDark=function(){return H(this.rgba)<.5},r.prototype.isLight=function(){return H(this.rgba)>=.5},r.prototype.toHex=function(){return r=colord_o(this.rgba),t=r.r,e=r.g,u=r.b,i=(a=r.a)<1?s(colord_n(255*a)):"","#"+s(t)+s(e)+s(u)+i;var r,t,e,u,a,i},r.prototype.toRgb=function(){return colord_o(this.rgba)},r.prototype.toRgbString=function(){return r=colord_o(this.rgba),t=r.r,n=r.g,e=r.b,(u=r.a)<1?"rgba("+t+", "+n+", "+e+", "+u+")":"rgb("+t+", "+n+", "+e+")";var r,t,n,e,u},r.prototype.toHsl=function(){return d(c(this.rgba))},r.prototype.toHslString=function(){return r=d(c(this.rgba)),t=r.h,n=r.s,e=r.l,(u=r.a)<1?"hsla("+t+", "+n+"%, "+e+"%, "+u+")":"hsl("+t+", "+n+"%, "+e+"%)";var r,t,n,e,u},r.prototype.toHsv=function(){return r=h(this.rgba),{h:colord_n(r.h),s:colord_n(r.s),v:colord_n(r.v),a:colord_n(r.a,3)};var r},r.prototype.invert=function(){return w({r:255-(r=this.rgba).r,g:255-r.g,b:255-r.b,a:r.a});var r},r.prototype.saturate=function(r){return void 0===r&&(r=.1),w(M(this.rgba,r))},r.prototype.desaturate=function(r){return void 0===r&&(r=.1),w(M(this.rgba,-r))},r.prototype.grayscale=function(){return w(M(this.rgba,-1))},r.prototype.lighten=function(r){return void 0===r&&(r=.1),w($(this.rgba,r))},r.prototype.darken=function(r){return void 0===r&&(r=.1),w($(this.rgba,-r))},r.prototype.rotate=function(r){return void 0===r&&(r=15),this.hue(this.hue()+r)},r.prototype.alpha=function(r){return"number"==typeof r?w({r:(t=this.rgba).r,g:t.g,b:t.b,a:r}):colord_n(this.rgba.a,3);var t},r.prototype.hue=function(r){var t=c(this.rgba);return"number"==typeof r?w({h:r,s:t.s,l:t.l,a:t.a}):colord_n(t.h)},r.prototype.isEqual=function(r){return this.toHex()===w(r).toHex()},r}(),w=function(r){return r instanceof j?r:new j(r)},S=[],k=function(r){r.forEach(function(r){S.indexOf(r)<0&&(r(j,y),S.push(r))})},E=function(){return new j({r:255*Math.random(),g:255*Math.random(),b:255*Math.random()})};
-;// CONCATENATED MODULE: ./node_modules/colord/plugins/names.mjs
+;// ./node_modules/colord/plugins/names.mjs
/* harmony default export */ function names(e,f){var a={white:"#ffffff",bisque:"#ffe4c4",blue:"#0000ff",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",antiquewhite:"#faebd7",aqua:"#00ffff",azure:"#f0ffff",whitesmoke:"#f5f5f5",papayawhip:"#ffefd5",plum:"#dda0dd",blanchedalmond:"#ffebcd",black:"#000000",gold:"#ffd700",goldenrod:"#daa520",gainsboro:"#dcdcdc",cornsilk:"#fff8dc",cornflowerblue:"#6495ed",burlywood:"#deb887",aquamarine:"#7fffd4",beige:"#f5f5dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkkhaki:"#bdb76b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",peachpuff:"#ffdab9",darkmagenta:"#8b008b",darkred:"#8b0000",darkorchid:"#9932cc",darkorange:"#ff8c00",darkslateblue:"#483d8b",gray:"#808080",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",deeppink:"#ff1493",deepskyblue:"#00bfff",wheat:"#f5deb3",firebrick:"#b22222",floralwhite:"#fffaf0",ghostwhite:"#f8f8ff",darkviolet:"#9400d3",magenta:"#ff00ff",green:"#008000",dodgerblue:"#1e90ff",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",blueviolet:"#8a2be2",forestgreen:"#228b22",lawngreen:"#7cfc00",indianred:"#cd5c5c",indigo:"#4b0082",fuchsia:"#ff00ff",brown:"#a52a2a",maroon:"#800000",mediumblue:"#0000cd",lightcoral:"#f08080",darkturquoise:"#00ced1",lightcyan:"#e0ffff",ivory:"#fffff0",lightyellow:"#ffffe0",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",linen:"#faf0e6",mediumaquamarine:"#66cdaa",lemonchiffon:"#fffacd",lime:"#00ff00",khaki:"#f0e68c",mediumseagreen:"#3cb371",limegreen:"#32cd32",mediumspringgreen:"#00fa9a",lightskyblue:"#87cefa",lightblue:"#add8e6",midnightblue:"#191970",lightpink:"#ffb6c1",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",mintcream:"#f5fffa",lightslategray:"#778899",lightslategrey:"#778899",navajowhite:"#ffdead",navy:"#000080",mediumvioletred:"#c71585",powderblue:"#b0e0e6",palegoldenrod:"#eee8aa",oldlace:"#fdf5e6",paleturquoise:"#afeeee",mediumturquoise:"#48d1cc",mediumorchid:"#ba55d3",rebeccapurple:"#663399",lightsteelblue:"#b0c4de",mediumslateblue:"#7b68ee",thistle:"#d8bfd8",tan:"#d2b48c",orchid:"#da70d6",mediumpurple:"#9370db",purple:"#800080",pink:"#ffc0cb",skyblue:"#87ceeb",springgreen:"#00ff7f",palegreen:"#98fb98",red:"#ff0000",yellow:"#ffff00",slateblue:"#6a5acd",lavenderblush:"#fff0f5",peru:"#cd853f",palevioletred:"#db7093",violet:"#ee82ee",teal:"#008080",slategray:"#708090",slategrey:"#708090",aliceblue:"#f0f8ff",darkseagreen:"#8fbc8f",darkolivegreen:"#556b2f",greenyellow:"#adff2f",seagreen:"#2e8b57",seashell:"#fff5ee",tomato:"#ff6347",silver:"#c0c0c0",sienna:"#a0522d",lavender:"#e6e6fa",lightgreen:"#90ee90",orange:"#ffa500",orangered:"#ff4500",steelblue:"#4682b4",royalblue:"#4169e1",turquoise:"#40e0d0",yellowgreen:"#9acd32",salmon:"#fa8072",saddlebrown:"#8b4513",sandybrown:"#f4a460",rosybrown:"#bc8f8f",darksalmon:"#e9967a",lightgoldenrodyellow:"#fafad2",snow:"#fffafa",lightgrey:"#d3d3d3",lightgray:"#d3d3d3",dimgray:"#696969",dimgrey:"#696969",olivedrab:"#6b8e23",olive:"#808000"},r={};for(var d in a)r[a[d]]=d;var l={};e.prototype.toName=function(f){if(!(this.rgba.a||this.rgba.r||this.rgba.g||this.rgba.b))return"transparent";var d,i,n=r[this.toHex()];if(n)return n;if(null==f?void 0:f.closest){var o=this.toRgb(),t=1/0,b="black";if(!l.length)for(var c in a)l[c]=new e(a[c]).toRgb();for(var g in a){var u=(d=o,i=l[g],Math.pow(d.r-i.r,2)+Math.pow(d.g-i.g,2)+Math.pow(d.b-i.b,2));u<t&&(t=u,b=g)}return b}};f.string.push([function(f){var r=f.toLowerCase(),d="transparent"===r?"#0000":a[r];return d?new e(d).toRgb():null},"name"])}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/colors.js
+;// ./node_modules/@wordpress/components/build-module/utils/colors.js
/**
* External dependencies
*/
@@ -27788,90 +28288,7 @@
return result === '#000000' ? 'dark' : 'light';
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/config-values.js
-/**
- * Internal dependencies
- */
-
-
-const CONTROL_HEIGHT = '36px';
-const CONTROL_PADDING_X = '12px';
-const CONTROL_PROPS = {
- controlSurfaceColor: COLORS.white,
- controlTextActiveColor: COLORS.theme.accent,
- controlPaddingX: CONTROL_PADDING_X,
- controlPaddingXLarge: `calc(${CONTROL_PADDING_X} * 1.3334)`,
- controlPaddingXSmall: `calc(${CONTROL_PADDING_X} / 1.3334)`,
- controlBackgroundColor: COLORS.white,
- controlBorderRadius: '2px',
- controlBoxShadow: 'transparent',
- controlBoxShadowFocus: `0 0 0 0.5px ${COLORS.theme.accent}`,
- controlDestructiveBorderColor: COLORS.alert.red,
- controlHeight: CONTROL_HEIGHT,
- controlHeightXSmall: `calc( ${CONTROL_HEIGHT} * 0.6 )`,
- controlHeightSmall: `calc( ${CONTROL_HEIGHT} * 0.8 )`,
- controlHeightLarge: `calc( ${CONTROL_HEIGHT} * 1.2 )`,
- controlHeightXLarge: `calc( ${CONTROL_HEIGHT} * 1.4 )`
-};
-const TOGGLE_GROUP_CONTROL_PROPS = {
- toggleGroupControlBackgroundColor: CONTROL_PROPS.controlBackgroundColor,
- toggleGroupControlBorderColor: COLORS.ui.border,
- toggleGroupControlBackdropBackgroundColor: CONTROL_PROPS.controlSurfaceColor,
- toggleGroupControlBackdropBorderColor: COLORS.ui.border,
- toggleGroupControlButtonColorActive: CONTROL_PROPS.controlBackgroundColor
-};
-
-// Using Object.assign to avoid creating circular references when emitting
-// TypeScript type declarations.
-/* harmony default export */ const config_values = (Object.assign({}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
- colorDivider: 'rgba(0, 0, 0, 0.1)',
- colorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',
- colorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',
- colorScrollbarTrack: 'rgba(0, 0, 0, 0.04)',
- elevationIntensity: 1,
- radiusBlockUi: '2px',
- borderWidth: '1px',
- borderWidthFocus: '1.5px',
- borderWidthTab: '4px',
- spinnerSize: 16,
- fontSize: '13px',
- fontSizeH1: 'calc(2.44 * 13px)',
- fontSizeH2: 'calc(1.95 * 13px)',
- fontSizeH3: 'calc(1.56 * 13px)',
- fontSizeH4: 'calc(1.25 * 13px)',
- fontSizeH5: '13px',
- fontSizeH6: 'calc(0.8 * 13px)',
- fontSizeInputMobile: '16px',
- fontSizeMobile: '15px',
- fontSizeSmall: 'calc(0.92 * 13px)',
- fontSizeXSmall: 'calc(0.75 * 13px)',
- fontLineHeightBase: '1.4',
- fontWeight: 'normal',
- fontWeightHeading: '600',
- gridBase: '4px',
- cardBorderRadius: '2px',
- cardPaddingXSmall: `${space(2)}`,
- cardPaddingSmall: `${space(4)}`,
- cardPaddingMedium: `${space(4)} ${space(6)}`,
- cardPaddingLarge: `${space(6)} ${space(8)}`,
- popoverShadow: `0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1)`,
- surfaceBackgroundColor: COLORS.white,
- surfaceBackgroundSubtleColor: '#F3F3F3',
- surfaceBackgroundTintColor: '#F5F5F5',
- surfaceBorderColor: 'rgba(0, 0, 0, 0.1)',
- surfaceBorderBoldColor: 'rgba(0, 0, 0, 0.15)',
- surfaceBorderSubtleColor: 'rgba(0, 0, 0, 0.05)',
- surfaceBackgroundTertiaryColor: COLORS.white,
- surfaceColor: COLORS.white,
- transitionDuration: '200ms',
- transitionDurationFast: '160ms',
- transitionDurationFaster: '120ms',
- transitionDurationFastest: '100ms',
- transitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)',
- transitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)'
-}));
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/text/styles.js
+;// ./node_modules/@wordpress/components/build-module/text/styles.js
function text_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
* External dependencies
@@ -27882,7 +28299,7 @@
* Internal dependencies
*/
-const Text = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.gray[900], ";line-height:", config_values.fontLineHeightBase, ";margin:0;text-wrap:balance;text-wrap:pretty;" + ( true ? "" : 0), true ? "" : 0);
+const Text = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.theme.foreground, ";line-height:", config_values.fontLineHeightBase, ";margin:0;text-wrap:balance;text-wrap:pretty;" + ( true ? "" : 0), true ? "" : 0);
const styles_block = true ? {
name: "4zleql",
styles: "display:block"
@@ -27890,7 +28307,7 @@
const positive = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.alert.green, ";" + ( true ? "" : 0), true ? "" : 0);
const destructive = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.alert.red, ";" + ( true ? "" : 0), true ? "" : 0);
const muted = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.gray[700], ";" + ( true ? "" : 0), true ? "" : 0);
-const highlighterText = /*#__PURE__*/emotion_react_browser_esm_css("mark{background:", COLORS.alert.yellow, ";border-radius:2px;box-shadow:0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset;}" + ( true ? "" : 0), true ? "" : 0);
+const highlighterText = /*#__PURE__*/emotion_react_browser_esm_css("mark{background:", COLORS.alert.yellow, ";border-radius:", config_values.radiusSmall, ";box-shadow:0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset;}" + ( true ? "" : 0), true ? "" : 0);
const upperCase = true ? {
name: "50zrmy",
styles: "text-transform:uppercase"
@@ -27898,7 +28315,7 @@
// EXTERNAL MODULE: ./node_modules/highlight-words-core/dist/index.js
var dist = __webpack_require__(9664);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/text/utils.js
+;// ./node_modules/@wordpress/components/build-module/text/utils.js
/**
* External dependencies
*/
@@ -27927,7 +28344,7 @@
* @property {string | Record<string, unknown>} [highlightClassName=''] Classname to apply to highlighted text or a Record of classnames to apply to given text (which should be the key).
* @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [highlightStyle={}] Styles to apply to highlighted text.
* @property {keyof JSX.IntrinsicElements} [highlightTag='mark'] Tag to use for the highlighted text.
- * @property {import('highlight-words-core').FindAllArgs['sanitize']} [sanitize] Custom `santize` function to pass to `highlight-words-core`.
+ * @property {import('highlight-words-core').FindAllArgs['sanitize']} [sanitize] Custom `sanitize` function to pass to `highlight-words-core`.
* @property {string[]} [searchWords=[]] Words to search for and highlight.
* @property {string} [unhighlightClassName=''] Classname to apply to unhighlighted text.
* @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [unhighlightStyle] Style to apply to unhighlighted text.
@@ -28042,7 +28459,7 @@
return textContent;
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/font-size.js
+;// ./node_modules/@wordpress/components/build-module/utils/font-size.js
/**
* External dependencies
*/
@@ -28083,7 +28500,7 @@
return config_values[headingSize];
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/text/get-line-height.js
+;// ./node_modules/@wordpress/components/build-module/text/get-line-height.js
/**
* External dependencies
*/
@@ -28118,7 +28535,7 @@
return value;
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/text/hook.js
+;// ./node_modules/@wordpress/components/build-module/text/hook.js
function hook_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
* External dependencies
@@ -28208,6 +28625,8 @@
sx.optimalTextColor = null;
if (optimizeReadabilityFor) {
const isOptimalTextColorDark = getOptimalTextShade(optimizeReadabilityFor) === 'dark';
+
+ // Should not use theme colors
sx.optimalTextColor = isOptimalTextColorDark ? /*#__PURE__*/emotion_react_browser_esm_css({
color: COLORS.gray[900]
}, true ? "" : 0, true ? "" : 0) : /*#__PURE__*/emotion_react_browser_esm_css({
@@ -28254,7 +28673,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/text/component.js
+;// ./node_modules/@wordpress/components/build-module/text/component.js
/**
* Internal dependencies
*/
@@ -28295,7 +28714,7 @@
const component_Text = contextConnect(UnconnectedText, 'Text');
/* harmony default export */ const text_component = (component_Text);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/base-label.js
+;// ./node_modules/@wordpress/components/build-module/utils/base-label.js
function base_label_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
* External dependencies
@@ -28309,7 +28728,7 @@
styles: "font-size:11px;font-weight:500;line-height:1.4;text-transform:uppercase"
} : 0;
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/styles/input-control-styles.js
+;// ./node_modules/@wordpress/components/build-module/input-control/styles/input-control-styles.js
function input_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
@@ -28325,15 +28744,14 @@
-
const Prefix = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
- target: "em5sgkm7"
+ target: "em5sgkm8"
} : 0)( true ? {
name: "pvvbxf",
styles: "box-sizing:border-box;display:block"
} : 0);
const Suffix = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
- target: "em5sgkm6"
+ target: "em5sgkm7"
} : 0)( true ? {
name: "jgf79h",
styles: "align-items:center;align-self:stretch;box-sizing:border-box;display:flex"
@@ -28351,13 +28769,13 @@
return COLORS.ui.border;
};
const BackdropUI = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
- target: "em5sgkm5"
+ target: "em5sgkm6"
} : 0)("&&&{box-sizing:border-box;border-color:", backdropBorderColor, ";border-radius:inherit;border-style:solid;border-width:1px;bottom:0;left:0;margin:0;padding:0;pointer-events:none;position:absolute;right:0;top:0;", rtl({
paddingLeft: 2
}), ";}" + ( true ? "" : 0));
-const input_control_styles_Root = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? {
- target: "em5sgkm4"
-} : 0)("box-sizing:border-box;position:relative;border-radius:2px;padding-top:0;&:focus-within:not( :has( :is( ", Prefix, ", ", Suffix, " ):focus-within ) ){", BackdropUI, "{border-color:", COLORS.ui.borderFocus, ";box-shadow:", config_values.controlBoxShadowFocus, ";outline:2px solid transparent;outline-offset:-2px;}}" + ( true ? "" : 0));
+const Root = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? {
+ target: "em5sgkm5"
+} : 0)("box-sizing:border-box;position:relative;border-radius:", config_values.radiusSmall, ";padding-top:0;&:focus-within:not( :has( :is( ", Prefix, ", ", Suffix, " ):focus-within ) ){", BackdropUI, "{border-color:", COLORS.ui.borderFocus, ";box-shadow:", config_values.controlBoxShadowFocus, ";outline:2px solid transparent;outline-offset:-2px;}}" + ( true ? "" : 0));
const containerDisabledStyles = ({
disabled
}) => {
@@ -28390,7 +28808,7 @@
}, true ? "" : 0, true ? "" : 0);
};
const Container = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
- target: "em5sgkm3"
+ target: "em5sgkm4"
} : 0)("align-items:center;box-sizing:border-box;border-radius:inherit;display:flex;flex:1;position:relative;", containerDisabledStyles, " ", containerWidthStyles, ";" + ( true ? "" : 0));
const disabledStyles = ({
disabled
@@ -28428,29 +28846,29 @@
height: 40,
lineHeight: 1,
minHeight: 40,
- paddingLeft: space(4),
- paddingRight: space(4)
+ paddingLeft: config_values.controlPaddingX,
+ paddingRight: config_values.controlPaddingX
},
small: {
height: 24,
lineHeight: 1,
minHeight: 24,
- paddingLeft: space(2),
- paddingRight: space(2)
+ paddingLeft: config_values.controlPaddingXSmall,
+ paddingRight: config_values.controlPaddingXSmall
},
compact: {
height: 32,
lineHeight: 1,
minHeight: 32,
- paddingLeft: space(2),
- paddingRight: space(2)
+ paddingLeft: config_values.controlPaddingXSmall,
+ paddingRight: config_values.controlPaddingXSmall
},
'__unstable-large': {
height: 40,
lineHeight: 1,
minHeight: 40,
- paddingLeft: space(4),
- paddingRight: space(4)
+ paddingLeft: config_values.controlPaddingX,
+ paddingRight: config_values.controlPaddingX
}
};
if (!__next40pxDefaultSize) {
@@ -28489,23 +28907,51 @@
// https://github.com/WordPress/gutenberg/issues/18483
const Input = /*#__PURE__*/emotion_styled_base_browser_esm("input", true ? {
+ target: "em5sgkm3"
+} : 0)("&&&{background-color:transparent;box-sizing:border-box;border:none;box-shadow:none!important;color:", COLORS.theme.foreground, ";display:block;font-family:inherit;margin:0;outline:none;width:100%;", dragStyles, " ", disabledStyles, " ", fontSizeStyles, " ", sizeStyles, " ", customPaddings, " &::-webkit-input-placeholder{color:", COLORS.ui.darkGrayPlaceholder, ";}&::-moz-placeholder{color:", COLORS.ui.darkGrayPlaceholder, ";}&:-ms-input-placeholder{color:", COLORS.ui.darkGrayPlaceholder, ";}&[type='email'],&[type='url']{direction:ltr;}}" + ( true ? "" : 0));
+const BaseLabel = /*#__PURE__*/emotion_styled_base_browser_esm(text_component, true ? {
target: "em5sgkm2"
-} : 0)("&&&{background-color:transparent;box-sizing:border-box;border:none;box-shadow:none!important;color:", COLORS.theme.foreground, ";display:block;font-family:inherit;margin:0;outline:none;width:100%;", dragStyles, " ", disabledStyles, " ", fontSizeStyles, " ", sizeStyles, " ", customPaddings, " &::-webkit-input-placeholder{line-height:normal;}}" + ( true ? "" : 0));
-const BaseLabel = /*#__PURE__*/emotion_styled_base_browser_esm(text_component, true ? {
- target: "em5sgkm1"
} : 0)("&&&{", baseLabelTypography, ";box-sizing:border-box;display:block;padding-top:0;padding-bottom:0;max-width:100%;z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}" + ( true ? "" : 0));
const Label = props => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BaseLabel, {
...props,
as: "label"
});
const LabelWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_item_component, true ? {
- target: "em5sgkm0"
+ target: "em5sgkm1"
} : 0)( true ? {
name: "1b6uupn",
styles: "max-width:calc( 100% - 10px )"
} : 0);
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/backdrop.js
+const prefixSuffixWrapperStyles = ({
+ variant = 'default',
+ size,
+ __next40pxDefaultSize,
+ isPrefix
+}) => {
+ const {
+ paddingLeft: padding
+ } = getSizeConfig({
+ inputSize: size,
+ __next40pxDefaultSize
+ });
+ const paddingProperty = isPrefix ? 'paddingInlineStart' : 'paddingInlineEnd';
+ if (variant === 'default') {
+ return /*#__PURE__*/emotion_react_browser_esm_css({
+ [paddingProperty]: padding
+ }, true ? "" : 0, true ? "" : 0);
+ }
+
+ // If variant is 'icon' or 'control'
+ return /*#__PURE__*/emotion_react_browser_esm_css({
+ display: 'flex',
+ [paddingProperty]: padding - 4
+ }, true ? "" : 0, true ? "" : 0);
+};
+const PrefixSuffixWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
+ target: "em5sgkm0"
+} : 0)(prefixSuffixWrapperStyles, ";" + ( true ? "" : 0));
+
+;// ./node_modules/@wordpress/components/build-module/input-control/backdrop.js
/**
* WordPress dependencies
*/
@@ -28529,7 +28975,7 @@
const MemoizedBackdrop = (0,external_wp_element_namespaceObject.memo)(Backdrop);
/* harmony default export */ const backdrop = (MemoizedBackdrop);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/label.js
+;// ./node_modules/@wordpress/components/build-module/input-control/label.js
/**
* Internal dependencies
*/
@@ -28561,7 +29007,7 @@
});
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/use-deprecated-props.js
+;// ./node_modules/@wordpress/components/build-module/utils/use-deprecated-props.js
function useDeprecated36pxDefaultSizeProp(props) {
const {
__next36pxDefaultSize,
@@ -28574,21 +29020,20 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/input-base.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/input-control/input-base.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -28640,27 +29085,22 @@
} = useDeprecated36pxDefaultSizeProp(useContextSystem(props, 'InputBase'));
const id = useUniqueId(idProp);
const hideLabel = hideLabelFromVision || !label;
- const {
- paddingLeft,
- paddingRight
- } = getSizeConfig({
- inputSize: size,
- __next40pxDefaultSize
- });
const prefixSuffixContextValue = (0,external_wp_element_namespaceObject.useMemo)(() => {
return {
InputControlPrefixWrapper: {
- paddingLeft
+ __next40pxDefaultSize,
+ size
},
InputControlSuffixWrapper: {
- paddingRight
- }
- };
- }, [paddingLeft, paddingRight]);
+ __next40pxDefaultSize,
+ size
+ }
+ };
+ }, [__next40pxDefaultSize, size]);
return (
/*#__PURE__*/
// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.
- (0,external_ReactJSXRuntime_namespaceObject.jsxs)(input_control_styles_Root, {
+ (0,external_ReactJSXRuntime_namespaceObject.jsxs)(Root, {
...restProps,
...getUIFlexProps(labelPosition),
className: className,
@@ -28702,7 +29142,7 @@
*/
/* harmony default export */ const input_base = (contextConnect(InputBase, 'InputBase'));
-;// CONCATENATED MODULE: ./node_modules/@use-gesture/core/dist/maths-0ab39ae9.esm.js
+;// ./node_modules/@use-gesture/core/dist/maths-0ab39ae9.esm.js
function maths_0ab39ae9_esm_clamp(v, min, max) {
return Math.max(min, Math.min(v, max));
}
@@ -28743,7 +29183,7 @@
-;// CONCATENATED MODULE: ./node_modules/@use-gesture/core/dist/actions-fe213e88.esm.js
+;// ./node_modules/@use-gesture/core/dist/actions-fe213e88.esm.js
function _toPrimitive(input, hint) {
@@ -28777,7 +29217,7 @@
return obj;
}
-function ownKeys(e, r) {
+function actions_fe213e88_esm_ownKeys(e, r) {
var t = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(e);
@@ -28790,9 +29230,9 @@
function _objectSpread2(e) {
for (var r = 1; r < arguments.length; r++) {
var t = null != arguments[r] ? arguments[r] : {};
- r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+ r % 2 ? actions_fe213e88_esm_ownKeys(Object(t), !0).forEach(function (r) {
_defineProperty(e, r, t[r]);
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : actions_fe213e88_esm_ownKeys(Object(t)).forEach(function (r) {
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
});
}
@@ -30143,7 +30583,7 @@
-;// CONCATENATED MODULE: ./node_modules/@use-gesture/core/dist/use-gesture-core.esm.js
+;// ./node_modules/@use-gesture/core/dist/use-gesture-core.esm.js
@@ -30464,7 +30904,7 @@
-;// CONCATENATED MODULE: ./node_modules/@use-gesture/react/dist/use-gesture-react.esm.js
+;// ./node_modules/@use-gesture/react/dist/use-gesture-react.esm.js
@@ -30547,7 +30987,7 @@
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/utils.js
+;// ./node_modules/@wordpress/components/build-module/input-control/utils.js
/**
* External dependencies
*/
@@ -30603,7 +31043,7 @@
return dragCursor;
}
function useDraft(props) {
- const refPreviousValue = (0,external_wp_element_namespaceObject.useRef)(props.value);
+ const previousValueRef = (0,external_wp_element_namespaceObject.useRef)(props.value);
const [draft, setDraft] = (0,external_wp_element_namespaceObject.useState)({});
const value = draft.value !== undefined ? draft.value : props.value;
@@ -30613,8 +31053,8 @@
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
const {
current: previousValue
- } = refPreviousValue;
- refPreviousValue.current = props.value;
+ } = previousValueRef;
+ previousValueRef.current = props.value;
if (draft.value !== undefined && !draft.isStale) {
setDraft({
...draft,
@@ -30643,7 +31083,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/reducer/state.js
+;// ./node_modules/@wordpress/components/build-module/input-control/reducer/state.js
/**
* External dependencies
*/
@@ -30663,7 +31103,7 @@
value: ''
};
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/reducer/actions.js
+;// ./node_modules/@wordpress/components/build-module/input-control/reducer/actions.js
/**
* External dependencies
*/
@@ -30684,7 +31124,7 @@
const PRESS_UP = 'PRESS_UP';
const RESET = 'RESET';
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/reducer/reducer.js
+;// ./node_modules/@wordpress/components/build-module/input-control/reducer/reducer.js
/**
* External dependencies
*/
@@ -30861,8 +31301,8 @@
const pressUp = createKeyEvent(PRESS_UP);
const pressDown = createKeyEvent(PRESS_DOWN);
const pressEnter = createKeyEvent(PRESS_ENTER);
- const currentState = (0,external_wp_element_namespaceObject.useRef)(state);
- const refProps = (0,external_wp_element_namespaceObject.useRef)({
+ const currentStateRef = (0,external_wp_element_namespaceObject.useRef)(state);
+ const refPropsRef = (0,external_wp_element_namespaceObject.useRef)({
value: initialState.value,
onChangeHandler
});
@@ -30870,8 +31310,8 @@
// Freshens refs to props and state so that subsequent effects have access
// to their latest values without their changes causing effect runs.
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
- currentState.current = state;
- refProps.current = {
+ currentStateRef.current = state;
+ refPropsRef.current = {
value: initialState.value,
onChangeHandler
};
@@ -30879,17 +31319,17 @@
// Propagates the latest state through onChange.
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
- if (currentState.current._event !== undefined && state.value !== refProps.current.value && !state.isDirty) {
+ if (currentStateRef.current._event !== undefined && state.value !== refPropsRef.current.value && !state.isDirty) {
var _state$value;
- refProps.current.onChangeHandler((_state$value = state.value) !== null && _state$value !== void 0 ? _state$value : '', {
- event: currentState.current._event
+ refPropsRef.current.onChangeHandler((_state$value = state.value) !== null && _state$value !== void 0 ? _state$value : '', {
+ event: currentStateRef.current._event
});
}
}, [state.value, state.isDirty]);
// Updates the state from props.
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
- if (initialState.value !== currentState.current.value && !currentState.current.isDirty) {
+ if (initialState.value !== currentStateRef.current.value && !currentStateRef.current.isDirty) {
var _initialState$value;
dispatch({
type: CONTROL,
@@ -30915,7 +31355,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/with-ignore-ime-events.js
+;// ./node_modules/@wordpress/components/build-module/utils/with-ignore-ime-events.js
/**
* A higher-order function that wraps a keydown event handler to ensure it is not an IME event.
*
@@ -30944,7 +31384,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/input-field.js
+;// ./node_modules/@wordpress/components/build-module/input-control/input-field.js
/**
* External dependencies
*/
@@ -31145,7 +31585,7 @@
const ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(InputField);
/* harmony default export */ const input_field = (ForwardedComponent);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/font-values.js
+;// ./node_modules/@wordpress/components/build-module/utils/font-values.js
/* harmony default export */ const font_values = ({
'default.fontFamily': "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
'default.fontSize': '13px',
@@ -31153,7 +31593,7 @@
mobileTextMinFontSize: '16px'
});
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/font.js
+;// ./node_modules/@wordpress/components/build-module/utils/font.js
/**
* Internal dependencies
*/
@@ -31169,7 +31609,7 @@
return (_FONT$value = font_values[value]) !== null && _FONT$value !== void 0 ? _FONT$value : '';
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/box-sizing.js
+;// ./node_modules/@wordpress/components/build-module/utils/box-sizing.js
function box_sizing_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
* External dependencies
@@ -31180,7 +31620,7 @@
styles: "box-sizing:border-box;*,*::before,*::after{box-sizing:inherit;}"
} : 0;
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/base-control/styles/base-control-styles.js
+;// ./node_modules/@wordpress/components/build-module/base-control/styles/base-control-styles.js
function base_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
@@ -31194,7 +31634,7 @@
*/
-const base_control_styles_Wrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
+const Wrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
target: "ej5x27r4"
} : 0)("font-family:", font('default.fontFamily'), ";font-size:", font('default.fontSize'), ";", boxSizingReset, ";" + ( true ? "" : 0));
const deprecatedMarginField = ({
@@ -31205,7 +31645,7 @@
const StyledField = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
target: "ej5x27r3"
} : 0)(deprecatedMarginField, " .components-panel__row &{margin-bottom:inherit;}" + ( true ? "" : 0));
-const labelStyles = /*#__PURE__*/emotion_react_browser_esm_css(baseLabelTypography, ";display:inline-block;margin-bottom:", space(2), ";padding:0;" + ( true ? "" : 0), true ? "" : 0);
+const labelStyles = /*#__PURE__*/emotion_react_browser_esm_css(baseLabelTypography, ";display:block;margin-bottom:", space(2), ";padding:0;" + ( true ? "" : 0), true ? "" : 0);
const StyledLabel = /*#__PURE__*/emotion_styled_base_browser_esm("label", true ? {
target: "ej5x27r2"
} : 0)(labelStyles, ";" + ( true ? "" : 0));
@@ -31225,48 +31665,29 @@
target: "ej5x27r0"
} : 0)(labelStyles, ";" + ( true ? "" : 0));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/base-control/index.js
-/**
- * External dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
-
-
-
-
-
-
-/**
- * `BaseControl` is a component used to generate labels and help text for components handling user inputs.
- *
- * ```jsx
- * import { BaseControl, useBaseControlProps } from '@wordpress/components';
- *
- * // Render a `BaseControl` for a textarea input
- * const MyCustomTextareaControl = ({ children, ...baseProps }) => (
- * // `useBaseControlProps` is a convenience hook to get the props for the `BaseControl`
- * // and the inner control itself. Namely, it takes care of generating a unique `id`,
- * // properly associating it with the `label` and `help` elements.
- * const { baseControlProps, controlProps } = useBaseControlProps( baseProps );
- *
- * return (
- * <BaseControl { ...baseControlProps } __nextHasNoMarginBottom={ true }>
- * <textarea { ...controlProps }>
- * { children }
- * </textarea>
- * </BaseControl>
- * );
- * );
- * ```
- */
+;// ./node_modules/@wordpress/components/build-module/base-control/index.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
const UnconnectedBaseControl = props => {
const {
__nextHasNoMarginBottom = false,
+ __associatedWPComponentName = 'BaseControl',
id,
label,
hideLabelFromVision = false,
@@ -31274,7 +31695,14 @@
className,
children
} = useContextSystem(props, 'BaseControl');
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(base_control_styles_Wrapper, {
+ if (!__nextHasNoMarginBottom) {
+ external_wp_deprecated_default()(`Bottom margin styles for wp.components.${__associatedWPComponentName}`, {
+ since: '6.7',
+ version: '7.0',
+ hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.'
+ });
+ }
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Wrapper, {
className: className,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(StyledField, {
className: "components-base-control__field"
@@ -31303,54 +31731,106 @@
})]
});
};
-
-/**
- * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.
- *
- * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,
- * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would
- * otherwise use if the `label` prop was passed.
- *
- * @example
- * import { BaseControl } from '@wordpress/components';
- *
- * const MyBaseControl = () => (
- * <BaseControl help="This button is already accessibly labeled.">
- * <BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
- * <Button>Select an author</Button>
- * </BaseControl>
- * );
- */
-const VisualLabel = ({
- className,
- children,
- ...props
-}) => {
+const UnforwardedVisualLabel = (props, ref) => {
+ const {
+ className,
+ children,
+ ...restProps
+ } = props;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledVisualLabel, {
- ...props,
+ ref: ref,
+ ...restProps,
className: dist_clsx('components-base-control__label', className),
children: children
});
};
+const VisualLabel = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedVisualLabel);
+
+/**
+ * `BaseControl` is a component used to generate labels and help text for components handling user inputs.
+ *
+ * ```jsx
+ * import { BaseControl, useBaseControlProps } from '@wordpress/components';
+ *
+ * // Render a `BaseControl` for a textarea input
+ * const MyCustomTextareaControl = ({ children, ...baseProps }) => (
+ * // `useBaseControlProps` is a convenience hook to get the props for the `BaseControl`
+ * // and the inner control itself. Namely, it takes care of generating a unique `id`,
+ * // properly associating it with the `label` and `help` elements.
+ * const { baseControlProps, controlProps } = useBaseControlProps( baseProps );
+ *
+ * return (
+ * <BaseControl { ...baseControlProps } __nextHasNoMarginBottom>
+ * <textarea { ...controlProps }>
+ * { children }
+ * </textarea>
+ * </BaseControl>
+ * );
+ * );
+ * ```
+ */
const BaseControl = Object.assign(contextConnectWithoutRef(UnconnectedBaseControl, 'BaseControl'), {
+ /**
+ * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.
+ *
+ * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,
+ * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would
+ * otherwise use if the `label` prop was passed.
+ *
+ * ```jsx
+ * import { BaseControl } from '@wordpress/components';
+ *
+ * const MyBaseControl = () => (
+ * <BaseControl
+ * __nextHasNoMarginBottom
+ * help="This button is already accessibly labeled."
+ * >
+ * <BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
+ * <Button>Select an author</Button>
+ * </BaseControl>
+ * );
+ * ```
+ */
VisualLabel
});
/* harmony default export */ const base_control = (BaseControl);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/index.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
+;// ./node_modules/@wordpress/components/build-module/utils/deprecated-36px-size.js
+/**
+ * WordPress dependencies
+ */
+
+function maybeWarnDeprecated36pxSize({
+ componentName,
+ __next40pxDefaultSize,
+ size,
+ __shouldNotWarnDeprecated36pxSize
+}) {
+ if (__shouldNotWarnDeprecated36pxSize || __next40pxDefaultSize || size !== undefined && size !== 'default') {
+ return;
+ }
+ external_wp_deprecated_default()(`36px default size for wp.components.${componentName}`, {
+ since: '6.8',
+ version: '7.1',
+ hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.'
+ });
+}
+
+;// ./node_modules/@wordpress/components/build-module/input-control/index.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
+
@@ -31367,6 +31847,7 @@
function UnforwardedInputControl(props, ref) {
const {
__next40pxDefaultSize,
+ __shouldNotWarnDeprecated36pxSize,
__unstableStateReducer: stateReducer = state => state,
__unstableInputWidth,
className,
@@ -31397,6 +31878,12 @@
const helpProp = !!help ? {
'aria-describedby': `${id}__help`
} : {};
+ maybeWarnDeprecated36pxSize({
+ componentName: 'InputControl',
+ __next40pxDefaultSize,
+ size,
+ __shouldNotWarnDeprecated36pxSize
+ });
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, {
className: classes,
help: help,
@@ -31426,8 +31913,8 @@
isPressEnterToChange: isPressEnterToChange,
onKeyDown: onKeyDown,
onValidate: onValidate,
- paddingInlineStart: prefix ? space(2) : undefined,
- paddingInlineEnd: suffix ? space(2) : undefined,
+ paddingInlineStart: prefix ? space(1) : undefined,
+ paddingInlineEnd: suffix ? space(1) : undefined,
ref: ref,
size: size,
stateReducer: stateReducer,
@@ -31450,6 +31937,7 @@
*
* return (
* <InputControl
+ * __next40pxDefaultSize
* value={ value }
* onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
* />
@@ -31460,7 +31948,7 @@
const InputControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedInputControl);
/* harmony default export */ const input_control = (InputControl);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dashicon/index.js
+;// ./node_modules/@wordpress/components/build-module/dashicon/index.js
/**
* @typedef OwnProps
@@ -31504,22 +31992,31 @@
}
/* harmony default export */ const dashicon = (Dashicon);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/icon/index.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
-
+;// ./node_modules/@wordpress/components/build-module/icon/index.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+/**
+ * Renders a raw icon without any initial styling or wrappers.
+ *
+ * ```jsx
+ * import { wordpress } from '@wordpress/icons';
+ *
+ * <Icon icon={ wordpress } />
+ * ```
+ */
function Icon({
icon = null,
size = 'string' === typeof icon ? 20 : 24,
@@ -31565,23 +32062,21 @@
}
/* harmony default export */ const build_module_icon = (Icon);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/button/index.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-/**
- * Internal dependencies
- */
-
-
+;// ./node_modules/@wordpress/components/build-module/button/index.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -31589,6 +32084,7 @@
const disabledEventsOnDisabledButton = ['onMouseDown', 'onClick'];
function button_useDeprecatedProps({
+ __experimentalIsFocusable,
isDefault,
isPrimary,
isSecondary,
@@ -31598,13 +32094,16 @@
isSmall,
size,
variant,
+ describedBy,
...otherProps
}) {
let computedSize = size;
let computedVariant = variant;
const newProps = {
+ accessibleWhenDisabled: __experimentalIsFocusable,
// @todo Mark `isPressed` as deprecated
- 'aria-pressed': isPressed
+ 'aria-pressed': isPressed,
+ description: describedBy
};
if (isSmall) {
var _computedSize;
@@ -31644,6 +32143,7 @@
function UnforwardedButton(props, ref) {
const {
__next40pxDefaultSize,
+ accessibleWhenDisabled,
isBusy,
isDestructive,
className,
@@ -31659,8 +32159,7 @@
size = 'default',
text,
variant,
- __experimentalIsFocusable: isFocusable,
- describedBy,
+ description,
...buttonOrAnchorProps
} = button_useDeprecatedProps(props);
const {
@@ -31695,8 +32194,8 @@
'has-text': !!icon && (hasChildren || text),
'has-icon': !!icon
});
- const trulyDisabled = disabled && !isFocusable;
- const Tag = href !== undefined && !trulyDisabled ? 'a' : 'button';
+ const trulyDisabled = disabled && !accessibleWhenDisabled;
+ const Tag = href !== undefined && !disabled ? 'a' : 'button';
const buttonProps = Tag === 'button' ? {
type: 'button',
disabled: trulyDisabled,
@@ -31709,7 +32208,7 @@
target
} : {};
const disableEventProps = {};
- if (disabled && isFocusable) {
+ if (disabled && accessibleWhenDisabled) {
// In this case, the button will be disabled, but still focusable and
// perceivable by screen reader users.
buttonProps['aria-disabled'] = true;
@@ -31736,7 +32235,7 @@
!children?.length &&
// The tooltip is not explicitly disabled.
false !== showTooltip);
- const descriptionId = describedBy ? instanceId : undefined;
+ const descriptionId = description ? instanceId : undefined;
const describedById = additionalProps['aria-describedby'] || descriptionId;
const commonProps = {
className: classes,
@@ -31774,7 +32273,7 @@
// In order to make sure that the tooltip doesn't show when it shouldn't,
// we don't pass the props to the `Tooltip` component.
const tooltipProps = shouldShowTooltip ? {
- text: children?.length && describedBy ? describedBy : label,
+ text: children?.length && description ? description : label,
shortcut,
placement: tooltipPosition &&
// Convert legacy `position` values to be used with the new `placement` prop
@@ -31784,10 +32283,10 @@
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, {
...tooltipProps,
children: element
- }), describedBy && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, {
+ }), description && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
id: descriptionId,
- children: describedBy
+ children: description
})
})]
});
@@ -31811,7 +32310,7 @@
const Button = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedButton);
/* harmony default export */ const build_module_button = (Button);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/number-control/styles/number-control-styles.js
+;// ./node_modules/@wordpress/components/build-module/number-control/styles/number-control-styles.js
function number_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
@@ -31848,7 +32347,7 @@
smallSpinButtons
};
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/math.js
+;// ./node_modules/@wordpress/components/build-module/utils/math.js
/**
* Parses and retrieves a number value.
*
@@ -31869,7 +32368,7 @@
* @return {number} The sum of values.
*/
function add(...args) {
- return args.reduce( /** @type {(sum:number, arg: number|string) => number} */
+ return args.reduce(/** @type {(sum:number, arg: number|string) => number} */
(sum, arg) => sum + getNumber(arg), 0);
}
@@ -31881,7 +32380,7 @@
* @return {number} The difference of the values.
*/
function subtract(...args) {
- return args.reduce( /** @type {(diff:number, arg: number|string, index:number) => number} */
+ return args.reduce(/** @type {(diff:number, arg: number|string, index:number) => number} */
(diff, arg, index) => {
const value = getNumber(arg);
return index === 0 ? value : diff - value;
@@ -31933,7 +32432,7 @@
return precision ? getNumber(clampedValue.toFixed(precision)) : clampedValue;
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/h-stack/utils.js
+;// ./node_modules/@wordpress/components/build-module/h-stack/utils.js
/**
* External dependencies
*/
@@ -32045,7 +32544,7 @@
return alignmentProps;
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/get-valid-children.js
+;// ./node_modules/@wordpress/components/build-module/utils/get-valid-children.js
/**
* External dependencies
*/
@@ -32069,7 +32568,7 @@
return external_wp_element_namespaceObject.Children.toArray(children).filter(child => (0,external_wp_element_namespaceObject.isValidElement)(child));
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/h-stack/hook.js
+;// ./node_modules/@wordpress/components/build-module/h-stack/hook.js
/**
* External dependencies
*/
@@ -32122,7 +32621,7 @@
return flexProps;
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/h-stack/component.js
+;// ./node_modules/@wordpress/components/build-module/h-stack/component.js
/**
* Internal dependencies
*/
@@ -32164,24 +32663,23 @@
const HStack = contextConnect(UnconnectedHStack, 'HStack');
/* harmony default export */ const h_stack_component = (HStack);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/number-control/index.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/number-control/index.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -32214,8 +32712,15 @@
size = 'default',
suffix,
onChange = number_control_noop,
+ __shouldNotWarnDeprecated36pxSize,
...restProps
} = useDeprecated36pxDefaultSizeProp(props);
+ maybeWarnDeprecated36pxSize({
+ componentName: 'NumberControl',
+ size,
+ __next40pxDefaultSize: restProps.__next40pxDefaultSize,
+ __shouldNotWarnDeprecated36pxSize
+ });
if (hideHTMLArrows) {
external_wp_deprecated_default()('wp.components.NumberControl hideHTMLArrows prop ', {
alternative: 'spinControls="none"',
@@ -32340,8 +32845,8 @@
hideHTMLArrows: spinControls !== 'native',
isDragEnabled: isDragEnabled,
label: label,
- max: max,
- min: min,
+ max: max === Infinity ? undefined : max,
+ min: min === -Infinity ? undefined : min,
ref: mergedRef,
required: required,
step: step,
@@ -32355,6 +32860,7 @@
return (_stateReducerProp = stateReducerProp?.(baseState, action)) !== null && _stateReducerProp !== void 0 ? _stateReducerProp : baseState;
},
size: size,
+ __shouldNotWarnDeprecated36pxSize: true,
suffix: spinControls === 'custom' ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [suffix, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, {
marginBottom: 0,
@@ -32383,7 +32889,7 @@
const NumberControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedNumberControl);
/* harmony default export */ const number_control = (NumberControl);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/angle-picker-control/styles/angle-picker-control-styles.js
+;// ./node_modules/@wordpress/components/build-module/angle-picker-control/styles/angle-picker-control-styles.js
function angle_picker_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
@@ -32401,7 +32907,7 @@
const INNER_CIRCLE_SIZE = 6;
const CircleRoot = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
target: "eln3bjz3"
-} : 0)("border-radius:50%;border:", config_values.borderWidth, " solid ", COLORS.ui.border, ";box-sizing:border-box;cursor:grab;height:", CIRCLE_SIZE, "px;overflow:hidden;width:", CIRCLE_SIZE, "px;:active{cursor:grabbing;}" + ( true ? "" : 0));
+} : 0)("border-radius:", config_values.radiusRound, ";border:", config_values.borderWidth, " solid ", COLORS.ui.border, ";box-sizing:border-box;cursor:grab;height:", CIRCLE_SIZE, "px;overflow:hidden;width:", CIRCLE_SIZE, "px;:active{cursor:grabbing;}" + ( true ? "" : 0));
const CircleIndicatorWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
target: "eln3bjz2"
} : 0)( true ? {
@@ -32410,12 +32916,12 @@
} : 0);
const CircleIndicator = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
target: "eln3bjz1"
-} : 0)("background:", COLORS.theme.accent, ";border-radius:50%;box-sizing:border-box;display:block;left:50%;top:4px;transform:translateX( -50% );position:absolute;width:", INNER_CIRCLE_SIZE, "px;height:", INNER_CIRCLE_SIZE, "px;" + ( true ? "" : 0));
+} : 0)("background:", COLORS.theme.accent, ";border-radius:", config_values.radiusRound, ";box-sizing:border-box;display:block;left:50%;top:4px;transform:translateX( -50% );position:absolute;width:", INNER_CIRCLE_SIZE, "px;height:", INNER_CIRCLE_SIZE, "px;" + ( true ? "" : 0));
const UnitText = /*#__PURE__*/emotion_styled_base_browser_esm(text_component, true ? {
target: "eln3bjz0"
} : 0)("color:", COLORS.theme.accent, ";margin-right:", space(3), ";" + ( true ? "" : 0));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/angle-picker-control/angle-circle.js
+;// ./node_modules/@wordpress/components/build-module/angle-picker-control/angle-circle.js
/**
* WordPress dependencies
*/
@@ -32433,14 +32939,14 @@
...props
}) {
const angleCircleRef = (0,external_wp_element_namespaceObject.useRef)(null);
- const angleCircleCenter = (0,external_wp_element_namespaceObject.useRef)();
- const previousCursorValue = (0,external_wp_element_namespaceObject.useRef)();
+ const angleCircleCenterRef = (0,external_wp_element_namespaceObject.useRef)();
+ const previousCursorValueRef = (0,external_wp_element_namespaceObject.useRef)();
const setAngleCircleCenter = () => {
if (angleCircleRef.current === null) {
return;
}
const rect = angleCircleRef.current.getBoundingClientRect();
- angleCircleCenter.current = {
+ angleCircleCenterRef.current = {
x: rect.x + rect.width / 2,
y: rect.y + rect.height / 2
};
@@ -32455,11 +32961,11 @@
event.preventDefault();
// Input control needs to lose focus and by preventDefault above, it doesn't.
event.target?.focus();
- if (angleCircleCenter.current !== undefined && onChange !== undefined) {
+ if (angleCircleCenterRef.current !== undefined && onChange !== undefined) {
const {
x: centerX,
y: centerY
- } = angleCircleCenter.current;
+ } = angleCircleCenterRef.current;
onChange(getAngle(centerX, centerY, event.clientX, event.clientY));
}
};
@@ -32476,13 +32982,13 @@
});
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (isDragging) {
- if (previousCursorValue.current === undefined) {
- previousCursorValue.current = document.body.style.cursor;
+ if (previousCursorValueRef.current === undefined) {
+ previousCursorValueRef.current = document.body.style.cursor;
}
document.body.style.cursor = 'grabbing';
} else {
- document.body.style.cursor = previousCursorValue.current || '';
- previousCursorValue.current = undefined;
+ document.body.style.cursor = previousCursorValueRef.current || '';
+ previousCursorValueRef.current = undefined;
}
}, [isDragging]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CircleRoot, {
@@ -32514,23 +33020,22 @@
}
/* harmony default export */ const angle_circle = (AngleCircle);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/angle-picker-control/index.js
-/**
- * External dependencies
- */
-
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/angle-picker-control/index.js
+/**
+ * External dependencies
+ */
+
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -32564,12 +33069,12 @@
gap: 2,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_block_component, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(number_control, {
+ __next40pxDefaultSize: true,
label: label,
className: "components-angle-picker-control__input-field",
max: 360,
min: 0,
onChange: handleOnNumberChange,
- size: "__unstable-large",
step: "1",
value: value,
spinControls: "none",
@@ -32615,13 +33120,13 @@
// EXTERNAL MODULE: ./node_modules/remove-accents/index.js
var remove_accents = __webpack_require__(9681);
var remove_accents_default = /*#__PURE__*/__webpack_require__.n(remove_accents);
-;// CONCATENATED MODULE: external ["wp","richText"]
+;// external ["wp","richText"]
const external_wp_richText_namespaceObject = window["wp"]["richText"];
-;// CONCATENATED MODULE: external ["wp","a11y"]
+;// external ["wp","a11y"]
const external_wp_a11y_namespaceObject = window["wp"]["a11y"];
-;// CONCATENATED MODULE: external ["wp","keycodes"]
+;// external ["wp","keycodes"]
const external_wp_keycodes_namespaceObject = window["wp"]["keycodes"];
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/strings.js
+;// ./node_modules/@wordpress/components/build-module/utils/strings.js
/**
* External dependencies
*/
@@ -32683,7 +33188,7 @@
return string.replace(/[\\^$.*+?()[\]{}|]/g, '\\$&');
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/autocomplete/get-default-use-items.js
+;// ./node_modules/@wordpress/components/build-module/autocomplete/get-default-use-items.js
/**
* External dependencies
*/
@@ -32774,7 +33279,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
+;// ./node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
@@ -33049,7 +33554,7 @@
-;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/close.js
+;// ./node_modules/@wordpress/icons/build-module/library/close.js
/**
* WordPress dependencies
*/
@@ -33059,12 +33564,12 @@
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
- d: "M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"
+ d: "m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z"
})
});
/* harmony default export */ const library_close = (close_close);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/scroll-lock/index.js
+;// ./node_modules/@wordpress/components/build-module/scroll-lock/index.js
/**
* WordPress dependencies
*/
@@ -33144,7 +33649,7 @@
}
/* harmony default export */ const scroll_lock = (ScrollLock);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/slot-fill-context.js
+;// ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/slot-fill-context.js
/**
* WordPress dependencies
*/
@@ -33172,7 +33677,7 @@
const SlotFillContext = (0,external_wp_element_namespaceObject.createContext)(initialContextValue);
/* harmony default export */ const slot_fill_context = (SlotFillContext);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/use-slot.js
+;// ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/use-slot.js
/**
* WordPress dependencies
*/
@@ -33186,134 +33691,79 @@
function useSlot(name) {
const registry = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context);
const slot = (0,external_wp_compose_namespaceObject.useObservableValue)(registry.slots, name);
- const api = (0,external_wp_element_namespaceObject.useMemo)(() => ({
- updateSlot: fillProps => registry.updateSlot(name, fillProps),
- unregisterSlot: ref => registry.unregisterSlot(name, ref),
- registerFill: ref => registry.registerFill(name, ref),
- unregisterFill: ref => registry.unregisterFill(name, ref)
- }), [name, registry]);
- return {
- ...slot,
- ...api
- };
-}
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/context.js
-/**
- * WordPress dependencies
- */
+ return {
+ ...slot
+ };
+}
+
+;// ./node_modules/@wordpress/components/build-module/slot-fill/context.js
+/**
+ * WordPress dependencies
+ */
+
+
/**
* Internal dependencies
*/
const initialValue = {
+ slots: (0,external_wp_compose_namespaceObject.observableMap)(),
+ fills: (0,external_wp_compose_namespaceObject.observableMap)(),
registerSlot: () => {},
unregisterSlot: () => {},
registerFill: () => {},
unregisterFill: () => {},
- getSlot: () => undefined,
- getFills: () => [],
- subscribe: () => () => {}
+ updateFill: () => {}
};
const context_SlotFillContext = (0,external_wp_element_namespaceObject.createContext)(initialValue);
/* harmony default export */ const context = (context_SlotFillContext);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/use-slot.js
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
-/**
- * React hook returning the active slot given a name.
- *
- * @param name Slot name.
- * @return Slot object.
- */
-const use_slot_useSlot = name => {
- const {
- getSlot,
- subscribe
- } = (0,external_wp_element_namespaceObject.useContext)(context);
- return (0,external_wp_element_namespaceObject.useSyncExternalStore)(subscribe, () => getSlot(name), () => getSlot(name));
-};
-/* harmony default export */ const use_slot = (use_slot_useSlot);
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/fill.js
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/slot-fill/fill.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
function Fill({
name,
children
}) {
- const {
- registerFill,
- unregisterFill
- } = (0,external_wp_element_namespaceObject.useContext)(context);
- const slot = use_slot(name);
- const ref = (0,external_wp_element_namespaceObject.useRef)({
- name,
- children
- });
+ const registry = (0,external_wp_element_namespaceObject.useContext)(context);
+ const instanceRef = (0,external_wp_element_namespaceObject.useRef)({});
+ const childrenRef = (0,external_wp_element_namespaceObject.useRef)(children);
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
- const refValue = ref.current;
- registerFill(name, refValue);
- return () => unregisterFill(name, refValue);
- // Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
- // We'll leave them as-is until a more detailed investigation/refactor can be performed.
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
- (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
- ref.current.children = children;
- if (slot) {
- slot.forceUpdate();
- }
- // Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
- // We'll leave them as-is until a more detailed investigation/refactor can be performed.
- // eslint-disable-next-line react-hooks/exhaustive-deps
+ childrenRef.current = children;
}, [children]);
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
- if (name === ref.current.name) {
- // Ignore initial effect.
- return;
- }
- unregisterFill(ref.current.name, ref.current);
- ref.current.name = name;
- registerFill(name, ref.current);
- // Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
- // We'll leave them as-is until a more detailed investigation/refactor can be performed.
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [name]);
+ const instance = instanceRef.current;
+ registry.registerFill(name, instance, childrenRef.current);
+ return () => registry.unregisterFill(name, instance);
+ }, [registry, name]);
+ (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
+ registry.updateFill(name, instanceRef.current, childrenRef.current);
+ });
return null;
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/slot.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/slot-fill/slot.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
/**
@@ -33325,94 +33775,61 @@
function isFunction(maybeFunc) {
return typeof maybeFunc === 'function';
}
-class SlotComponent extends external_wp_element_namespaceObject.Component {
- constructor(props) {
- super(props);
- this.isUnmounted = false;
- }
- componentDidMount() {
- const {
- registerSlot
- } = this.props;
- this.isUnmounted = false;
- registerSlot(this.props.name, this);
- }
- componentWillUnmount() {
- const {
- unregisterSlot
- } = this.props;
- this.isUnmounted = true;
- unregisterSlot(this.props.name, this);
- }
- componentDidUpdate(prevProps) {
- const {
- name,
- unregisterSlot,
- registerSlot
- } = this.props;
- if (prevProps.name !== name) {
- unregisterSlot(prevProps.name, this);
- registerSlot(name, this);
- }
- }
- forceUpdate() {
- if (this.isUnmounted) {
- return;
- }
- super.forceUpdate();
- }
- render() {
- var _getFills;
- const {
- children,
- name,
- fillProps = {},
- getFills
- } = this.props;
- const fills = ((_getFills = getFills(name, this)) !== null && _getFills !== void 0 ? _getFills : []).map(fill => {
- const fillChildren = isFunction(fill.children) ? fill.children(fillProps) : fill.children;
- return external_wp_element_namespaceObject.Children.map(fillChildren, (child, childIndex) => {
- if (!child || typeof child === 'string') {
- return child;
- }
- let childKey = childIndex;
- if (typeof child === 'object' && 'key' in child && child?.key) {
- childKey = child.key;
- }
- return (0,external_wp_element_namespaceObject.cloneElement)(child, {
- key: childKey
- });
- });
- }).filter(
- // In some cases fills are rendered only when some conditions apply.
- // This ensures that we only use non-empty fills when rendering, i.e.,
- // it allows us to render wrappers only when the fills are actually present.
- element => !(0,external_wp_element_namespaceObject.isEmptyElement)(element));
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
- children: isFunction(children) ? children(fills) : fills
- });
- }
-}
-const Slot = props => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(context.Consumer, {
- children: ({
- registerSlot,
- unregisterSlot,
- getFills
- }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SlotComponent, {
- ...props,
- registerSlot: registerSlot,
- unregisterSlot: unregisterSlot,
- getFills: getFills
- })
-});
+function addKeysToChildren(children) {
+ return external_wp_element_namespaceObject.Children.map(children, (child, childIndex) => {
+ if (!child || typeof child === 'string') {
+ return child;
+ }
+ let childKey = childIndex;
+ if (typeof child === 'object' && 'key' in child && child?.key) {
+ childKey = child.key;
+ }
+ return (0,external_wp_element_namespaceObject.cloneElement)(child, {
+ key: childKey
+ });
+ });
+}
+function Slot(props) {
+ var _useObservableValue;
+ const registry = (0,external_wp_element_namespaceObject.useContext)(context);
+ const instanceRef = (0,external_wp_element_namespaceObject.useRef)({});
+ const {
+ name,
+ children,
+ fillProps = {}
+ } = props;
+ (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
+ const instance = instanceRef.current;
+ registry.registerSlot(name, instance);
+ return () => registry.unregisterSlot(name, instance);
+ }, [registry, name]);
+ let fills = (_useObservableValue = (0,external_wp_compose_namespaceObject.useObservableValue)(registry.fills, name)) !== null && _useObservableValue !== void 0 ? _useObservableValue : [];
+ const currentSlot = (0,external_wp_compose_namespaceObject.useObservableValue)(registry.slots, name);
+
+ // Fills should only be rendered in the currently registered instance of the slot.
+ if (currentSlot !== instanceRef.current) {
+ fills = [];
+ }
+ const renderedFills = fills.map(fill => {
+ const fillChildren = isFunction(fill.children) ? fill.children(fillProps) : fill.children;
+ return addKeysToChildren(fillChildren);
+ }).filter(
+ // In some cases fills are rendered only when some conditions apply.
+ // This ensures that we only use non-empty fills when rendering, i.e.,
+ // it allows us to render wrappers only when the fills are actually present.
+ element => !(0,external_wp_element_namespaceObject.isEmptyElement)(element));
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
+ children: isFunction(children) ? children(renderedFills) : renderedFills
+ });
+}
/* harmony default export */ const slot = (Slot);
-;// CONCATENATED MODULE: ./node_modules/uuid/dist/esm-browser/native.js
+;// ./node_modules/@wordpress/components/node_modules/uuid/dist/esm-browser/native.js
const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
/* harmony default export */ const esm_browser_native = ({
randomUUID
});
-;// CONCATENATED MODULE: ./node_modules/uuid/dist/esm-browser/rng.js
+;// ./node_modules/@wordpress/components/node_modules/uuid/dist/esm-browser/rng.js
// Unique ID creation requires a high quality random # generator. In the browser we therefore
// require the crypto API and do not support built-in fallback to lower quality random number
// generators (like Math.random()).
@@ -33431,7 +33848,7 @@
return getRandomValues(rnds8);
}
-;// CONCATENATED MODULE: ./node_modules/uuid/dist/esm-browser/stringify.js
+;// ./node_modules/@wordpress/components/node_modules/uuid/dist/esm-browser/stringify.js
/**
* Convert array of 16 byte values to UUID string format of the form:
@@ -33465,7 +33882,7 @@
}
/* harmony default export */ const esm_browser_stringify = ((/* unused pure expression or super */ null && (stringify_stringify)));
-;// CONCATENATED MODULE: ./node_modules/uuid/dist/esm-browser/v4.js
+;// ./node_modules/@wordpress/components/node_modules/uuid/dist/esm-browser/v4.js
@@ -33495,7 +33912,7 @@
}
/* harmony default export */ const esm_browser_v4 = (v4);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/style-provider/index.js
+;// ./node_modules/@wordpress/components/build-module/style-provider/index.js
/**
* External dependencies
*/
@@ -33546,58 +33963,37 @@
}
/* harmony default export */ const style_provider = (StyleProvider);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/fill.js
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
-
-
-function fill_useForceUpdate() {
- const [, setState] = (0,external_wp_element_namespaceObject.useState)({});
- const mounted = (0,external_wp_element_namespaceObject.useRef)(true);
+;// ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/fill.js
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+function fill_Fill({
+ name,
+ children
+}) {
+ var _slot$fillProps;
+ const registry = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context);
+ const slot = (0,external_wp_compose_namespaceObject.useObservableValue)(registry.slots, name);
+ const instanceRef = (0,external_wp_element_namespaceObject.useRef)({});
+
+ // We register fills so we can keep track of their existence.
+ // Slots can use the `useSlotFills` hook to know if there're already fills
+ // registered so they can choose to render themselves or not.
(0,external_wp_element_namespaceObject.useEffect)(() => {
- mounted.current = true;
- return () => {
- mounted.current = false;
- };
- }, []);
- return () => {
- if (mounted.current) {
- setState({});
- }
- };
-}
-function fill_Fill(props) {
- var _slot$fillProps;
- const {
- name,
- children
- } = props;
- const {
- registerFill,
- unregisterFill,
- ...slot
- } = useSlot(name);
- const rerender = fill_useForceUpdate();
- const ref = (0,external_wp_element_namespaceObject.useRef)({
- rerender
- });
- (0,external_wp_element_namespaceObject.useEffect)(() => {
- // We register fills so we can keep track of their existence.
- // Some Slot implementations need to know if there're already fills
- // registered so they can choose to render themselves or not.
- registerFill(ref);
- return () => {
- unregisterFill(ref);
- };
- }, [registerFill, unregisterFill]);
- if (!slot.ref || !slot.ref.current) {
+ const instance = instanceRef.current;
+ registry.registerFill(name, instance);
+ return () => registry.unregisterFill(name, instance);
+ }, [registry, name]);
+ if (!slot || !slot.ref.current) {
return null;
}
@@ -33612,7 +34008,7 @@
return (0,external_wp_element_namespaceObject.createPortal)(wrappedChildren, slot.ref.current);
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/slot.js
+;// ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/slot.js
/**
* External dependencies
*/
@@ -33636,31 +34032,26 @@
as,
// `children` is not allowed. However, if it is passed,
// it will be displayed as is, so remove `children`.
- // @ts-ignore
children,
...restProps
} = props;
- const {
- registerSlot,
- unregisterSlot,
- ...registry
- } = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context);
+ const registry = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context);
const ref = (0,external_wp_element_namespaceObject.useRef)(null);
+
+ // We don't want to unregister and register the slot whenever
+ // `fillProps` change, which would cause the fill to be re-mounted. Instead,
+ // we can just update the slot (see hook below).
+ // For more context, see https://github.com/WordPress/gutenberg/pull/44403#discussion_r994415973
+ const fillPropsRef = (0,external_wp_element_namespaceObject.useRef)(fillProps);
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
- registerSlot(name, ref, fillProps);
- return () => {
- unregisterSlot(name, ref);
- };
- // Ignore reason: We don't want to unregister and register the slot whenever
- // `fillProps` change, which would cause the fill to be re-mounted. Instead,
- // we can just update the slot (see hook below).
- // For more context, see https://github.com/WordPress/gutenberg/pull/44403#discussion_r994415973
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [registerSlot, unregisterSlot, name]);
- // fillProps may be an update that interacts with the layout, so we
- // useLayoutEffect.
+ fillPropsRef.current = fillProps;
+ }, [fillProps]);
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
- registry.updateSlot(name, fillProps);
+ registry.registerSlot(name, ref, fillPropsRef.current);
+ return () => registry.unregisterSlot(name, ref);
+ }, [registry, name]);
+ (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
+ registry.updateSlot(name, ref, fillPropsRef.current);
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, {
as: as,
@@ -33670,10 +34061,10 @@
}
/* harmony default export */ const bubbles_virtually_slot = ((0,external_wp_element_namespaceObject.forwardRef)(slot_Slot));
-;// CONCATENATED MODULE: external ["wp","isShallowEqual"]
+;// external ["wp","isShallowEqual"]
const external_wp_isShallowEqual_namespaceObject = window["wp"]["isShallowEqual"];
var external_wp_isShallowEqual_default = /*#__PURE__*/__webpack_require__.n(external_wp_isShallowEqual_namespaceObject);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/slot-fill-provider.js
+;// ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/slot-fill-provider.js
/**
* WordPress dependencies
*/
@@ -33690,34 +34081,39 @@
const slots = (0,external_wp_compose_namespaceObject.observableMap)();
const fills = (0,external_wp_compose_namespaceObject.observableMap)();
const registerSlot = (name, ref, fillProps) => {
- const slot = slots.get(name);
slots.set(name, {
- ...slot,
- ref: ref || slot?.ref,
- fillProps: fillProps || slot?.fillProps || {}
+ ref,
+ fillProps
});
};
const unregisterSlot = (name, ref) => {
+ const slot = slots.get(name);
+ if (!slot) {
+ return;
+ }
+
// Make sure we're not unregistering a slot registered by another element
// See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412
- if (slots.get(name)?.ref === ref) {
- slots.delete(name);
- }
- };
- const updateSlot = (name, fillProps) => {
+ if (slot.ref !== ref) {
+ return;
+ }
+ slots.delete(name);
+ };
+ const updateSlot = (name, ref, fillProps) => {
const slot = slots.get(name);
if (!slot) {
return;
}
+ if (slot.ref !== ref) {
+ return;
+ }
if (external_wp_isShallowEqual_default()(slot.fillProps, fillProps)) {
return;
}
- slot.fillProps = fillProps;
- const slotFills = fills.get(name);
- if (slotFills) {
- // Force update fills.
- slotFills.forEach(fill => fill.current.rerender());
- }
+ slots.set(name, {
+ ref,
+ fillProps
+ });
};
const registerFill = (name, ref) => {
fills.set(name, [...(fills.get(name) || []), ref]);
@@ -33749,92 +34145,77 @@
});
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/provider.js
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
+;// ./node_modules/@wordpress/components/build-module/slot-fill/provider.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
function provider_createSlotRegistry() {
- const slots = {};
- const fills = {};
- let listeners = [];
- function registerSlot(name, slot) {
- const previousSlot = slots[name];
- slots[name] = slot;
- triggerListeners();
-
- // Sometimes the fills are registered after the initial render of slot
- // But before the registerSlot call, we need to rerender the slot.
- forceUpdateSlot(name);
-
- // If a new instance of a slot is being mounted while another with the
- // same name exists, force its update _after_ the new slot has been
- // assigned into the instance, such that its own rendering of children
- // will be empty (the new Slot will subsume all fills for this name).
- if (previousSlot) {
- previousSlot.forceUpdate();
- }
- }
- function registerFill(name, instance) {
- fills[name] = [...(fills[name] || []), instance];
- forceUpdateSlot(name);
+ const slots = (0,external_wp_compose_namespaceObject.observableMap)();
+ const fills = (0,external_wp_compose_namespaceObject.observableMap)();
+ function registerSlot(name, instance) {
+ slots.set(name, instance);
}
function unregisterSlot(name, instance) {
// If a previous instance of a Slot by this name unmounts, do nothing,
// as the slot and its fills should only be removed for the current
// known instance.
- if (slots[name] !== instance) {
- return;
- }
- delete slots[name];
- triggerListeners();
+ if (slots.get(name) !== instance) {
+ return;
+ }
+ slots.delete(name);
+ }
+ function registerFill(name, instance, children) {
+ fills.set(name, [...(fills.get(name) || []), {
+ instance,
+ children
+ }]);
}
function unregisterFill(name, instance) {
- var _fills$name$filter;
- fills[name] = (_fills$name$filter = fills[name]?.filter(fill => fill !== instance)) !== null && _fills$name$filter !== void 0 ? _fills$name$filter : [];
- forceUpdateSlot(name);
- }
- function getSlot(name) {
- return slots[name];
- }
- function getFills(name, slotInstance) {
- // Fills should only be returned for the current instance of the slot
- // in which they occupy.
- if (slots[name] !== slotInstance) {
- return [];
- }
- return fills[name];
- }
- function forceUpdateSlot(name) {
- const slot = getSlot(name);
- if (slot) {
- slot.forceUpdate();
- }
- }
- function triggerListeners() {
- listeners.forEach(listener => listener());
- }
- function subscribe(listener) {
- listeners.push(listener);
- return () => {
- listeners = listeners.filter(l => l !== listener);
- };
- }
- return {
+ const fillsForName = fills.get(name);
+ if (!fillsForName) {
+ return;
+ }
+ fills.set(name, fillsForName.filter(fill => fill.instance !== instance));
+ }
+ function updateFill(name, instance, children) {
+ const fillsForName = fills.get(name);
+ if (!fillsForName) {
+ return;
+ }
+ const fillForInstance = fillsForName.find(f => f.instance === instance);
+ if (!fillForInstance) {
+ return;
+ }
+ if (fillForInstance.children === children) {
+ return;
+ }
+ fills.set(name, fillsForName.map(f => {
+ if (f.instance === instance) {
+ // Replace with new record with updated `children`.
+ return {
+ instance,
+ children
+ };
+ }
+ return f;
+ }));
+ }
+ return {
+ slots,
+ fills,
registerSlot,
unregisterSlot,
registerFill,
unregisterFill,
- getSlot,
- getFills,
- subscribe
+ updateFill
};
}
function provider_SlotFillProvider({
@@ -33848,21 +34229,19 @@
}
/* harmony default export */ const provider = (provider_SlotFillProvider);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/index.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
-
+;// ./node_modules/@wordpress/components/build-module/slot-fill/index.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
@@ -33917,6 +34296,7 @@
})
});
}
+Provider.displayName = 'SlotFillProvider';
function createSlotFill(key) {
const baseName = typeof key === 'symbol' ? key.description : key;
const FillComponent = props => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(slot_fill_Fill, {
@@ -33929,22 +34309,19 @@
...props
});
SlotComponent.displayName = `${baseName}Slot`;
+ /**
+ * @deprecated 6.8.0
+ * Please use `slotFill.name` instead of `slotFill.Slot.__unstableName`.
+ */
SlotComponent.__unstableName = key;
return {
+ name: key,
Fill: FillComponent,
Slot: SlotComponent
};
}
-const createPrivateSlotFill = name => {
- const privateKey = Symbol(name);
- const privateSlotFill = createSlotFill(privateKey);
- return {
- privateKey,
- ...privateSlotFill
- };
-};
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/popover/overlay-middlewares.js
+
+;// ./node_modules/@wordpress/components/build-module/popover/overlay-middlewares.js
/**
* External dependencies
*/
@@ -33982,21 +34359,19 @@
})];
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/popover/index.js
-/**
- * External dependencies
- */
-
-
-
-// eslint-disable-next-line no-restricted-imports
-
-// eslint-disable-next-line no-restricted-imports
-
-
-/**
- * WordPress dependencies
- */
+;// ./node_modules/@wordpress/components/build-module/popover/index.js
+/**
+ * External dependencies
+ */
+
+
+
+
+
+/**
+ * WordPress dependencies
+ */
+
@@ -34020,8 +34395,6 @@
* @type {string}
*/
-
-
const SLOT_NAME = 'Popover';
// An SVG displaying a triangle facing down, filled with a solid
@@ -34075,6 +34448,7 @@
shift = false,
inline = false,
variant,
+ style: contentStyle,
// Deprecated props
__unstableForcePosition,
anchorRef,
@@ -34243,6 +34617,7 @@
} = (0,external_wp_element_namespaceObject.useMemo)(() => placementToMotionAnimationProps(computedPlacement), [computedPlacement]);
const animationProps = shouldAnimate ? {
style: {
+ ...contentStyle,
...motionInlineStyles,
...style
},
@@ -34250,7 +34625,10 @@
...otherMotionProps
} : {
animate: false,
- style
+ style: {
+ ...contentStyle,
+ ...style
+ }
};
// When Floating UI has finished positioning and Framer Motion has finished animating
@@ -34275,8 +34653,10 @@
children: headerTitle
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
className: "components-popover__close",
+ size: "small",
icon: library_close,
- onClick: onClose
+ onClick: onClose,
+ label: (0,external_wp_i18n_namespaceObject.__)('Close')
})]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "components-popover__content",
@@ -34299,7 +34679,7 @@
children: content
});
} else if (!inline) {
- content = (0,external_wp_element_namespaceObject.createPortal)( /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyleProvider, {
+ content = (0,external_wp_element_namespaceObject.createPortal)(/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyleProvider, {
document: document,
children: content
}), getPopoverFallbackContainer());
@@ -34355,26 +34735,24 @@
popover_Popover.__unstableSlotNameProvider = slotNameContext.Provider;
/* harmony default export */ const popover = (popover_Popover);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/autocomplete/autocompleter-ui.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-
-
-/**
- * Internal dependencies
- */
-
-
+;// ./node_modules/@wordpress/components/build-module/autocomplete/autocompleter-ui.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -34397,11 +34775,15 @@
children: items.map((option, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
id: `components-autocomplete-item-${instanceId}-${option.key}`,
role: "option",
+ __next40pxDefaultSize: true,
"aria-selected": index === selectedIndex,
+ accessibleWhenDisabled: true,
disabled: option.isDisabled,
className: dist_clsx('components-autocomplete__result', className, {
+ // Unused, for backwards compatibility.
'is-selected': index === selectedIndex
}),
+ variant: index === selectedIndex ? 'primary' : undefined,
onClick: () => onSelect(option),
children: option.label
}, option.key))
@@ -34447,10 +34829,10 @@
}
if (!!options.length) {
if (filterValue) {
- debouncedSpeak((0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of results. */
+ debouncedSpeak((0,external_wp_i18n_namespaceObject.sprintf)(/* translators: %d: number of results. */
(0,external_wp_i18n_namespaceObject._n)('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', options.length), options.length), 'assertive');
} else {
- debouncedSpeak((0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of results. */
+ debouncedSpeak((0,external_wp_i18n_namespaceObject.sprintf)(/* translators: %d: number of results. */
(0,external_wp_i18n_namespaceObject._n)('Initial %d result loaded. Type to filter all available results. Use up and down arrow keys to navigate.', 'Initial %d results loaded. Type to filter all available results. Use up and down arrow keys to navigate.', options.length), options.length), 'assertive');
}
} else {
@@ -34460,9 +34842,8 @@
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
onChangeOptions(items);
announce(items);
- // Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
+ // We want to avoid introducing unexpected side effects.
// See https://github.com/WordPress/gutenberg/pull/41820
- // eslint-disable-next-line react-hooks/exhaustive-deps
}, [items]);
if (items.length === 0) {
return null;
@@ -34483,7 +34864,7 @@
listBoxId: listBoxId,
className: className
})
- }), contentRef.current && needsA11yCompat && (0,external_ReactDOM_namespaceObject.createPortal)( /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ListBox, {
+ }), contentRef.current && needsA11yCompat && (0,external_ReactDOM_namespaceObject.createPortal)(/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ListBox, {
items: items,
onSelect: onSelect,
selectedIndex: selectedIndex,
@@ -34511,32 +34892,27 @@
document.removeEventListener('mousedown', listener);
document.removeEventListener('touchstart', listener);
};
- // Disable reason: `ref` is a ref object and should not be included in a
- // hook's dependency list.
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [handler]);
-}
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/autocomplete/index.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-
-
-/**
- * Internal dependencies
- */
-
-
+ }, [handler, ref]);
+}
+
+;// ./node_modules/@wordpress/components/build-module/autocomplete/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -34569,6 +34945,9 @@
return '';
};
const EMPTY_FILTERED_OPTIONS = [];
+
+// Used for generating the instance ID
+const AUTOCOMPLETE_HOOK_REFERENCE = {};
function useAutocomplete({
record,
onChange,
@@ -34576,13 +34955,13 @@
completers,
contentRef
}) {
- const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(useAutocomplete);
+ const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(AUTOCOMPLETE_HOOK_REFERENCE);
const [selectedIndex, setSelectedIndex] = (0,external_wp_element_namespaceObject.useState)(0);
const [filteredOptions, setFilteredOptions] = (0,external_wp_element_namespaceObject.useState)(EMPTY_FILTERED_OPTIONS);
const [filterValue, setFilterValue] = (0,external_wp_element_namespaceObject.useState)('');
const [autocompleter, setAutocompleter] = (0,external_wp_element_namespaceObject.useState)(null);
const [AutocompleterUI, setAutocompleterUI] = (0,external_wp_element_namespaceObject.useState)(null);
- const backspacing = (0,external_wp_element_namespaceObject.useRef)(false);
+ const backspacingRef = (0,external_wp_element_namespaceObject.useRef)(false);
function insertCompletion(replacement) {
if (autocompleter === null) {
return;
@@ -34642,7 +35021,7 @@
setFilteredOptions(options);
}
function handleKeyDown(event) {
- backspacing.current = event.key === 'Backspace';
+ backspacingRef.current = event.key === 'Backspace';
if (!autocompleter) {
return;
}
@@ -34757,7 +35136,7 @@
//
// Ex: "Some text @marcelo sekkkk" <--- "kkkk" caused a mismatch, but
// if the user presses backspace here, it will show the completion popup again.
- const matchingWhileBackspacing = backspacing.current && wordsFromTrigger.length <= 3;
+ const matchingWhileBackspacing = backspacingRef.current && wordsFromTrigger.length <= 3;
if (mismatch && !(matchingWhileBackspacing || hasOneTriggerWord)) {
if (autocompleter) {
reset();
@@ -34790,9 +35169,8 @@
setAutocompleter(completer);
setAutocompleterUI(() => completer !== autocompleter ? getAutoCompleterUI(completer) : AutocompleterUI);
setFilterValue(query === null ? '' : query);
- // Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
+ // We want to avoid introducing unexpected side effects.
// See https://github.com/WordPress/gutenberg/pull/41820
- // eslint-disable-next-line react-hooks/exhaustive-deps
}, [textContent]);
const {
key: selectedKey = ''
@@ -34888,7 +35266,7 @@
});
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/base-control/hooks.js
+;// ./node_modules/@wordpress/components/build-module/base-control/hooks.js
/**
* WordPress dependencies
*/
@@ -34927,7 +35305,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/link.js
+;// ./node_modules/@wordpress/icons/build-module/library/link.js
/**
* WordPress dependencies
*/
@@ -34942,7 +35320,7 @@
});
/* harmony default export */ const library_link = (link_link);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/link-off.js
+;// ./node_modules/@wordpress/icons/build-module/library/link-off.js
/**
* WordPress dependencies
*/
@@ -34957,7 +35335,7 @@
});
/* harmony default export */ const link_off = (linkOff);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/styles.js
+;// ./node_modules/@wordpress/components/build-module/border-box-control/styles.js
function border_box_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
* External dependencies
@@ -35008,7 +35386,7 @@
marginLeft: 'auto'
})(), ";" + ( true ? "" : 0), true ? "" : 0);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-linked-button/hook.js
+;// ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-linked-button/hook.js
/**
* WordPress dependencies
*/
@@ -35038,18 +35416,16 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-linked-button/component.js
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
-
+;// ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-linked-button/component.js
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -35061,25 +35437,20 @@
...buttonProps
} = useBorderBoxControlLinkedButton(props);
const label = isLinked ? (0,external_wp_i18n_namespaceObject.__)('Unlink sides') : (0,external_wp_i18n_namespaceObject.__)('Link sides');
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, {
- text: label,
- children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, {
- className: className,
- children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
- ...buttonProps,
- size: "small",
- icon: isLinked ? library_link : link_off,
- iconSize: 24,
- "aria-label": label,
- ref: forwardedRef
- })
- })
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
+ ...buttonProps,
+ size: "small",
+ icon: isLinked ? library_link : link_off,
+ iconSize: 24,
+ label: label,
+ ref: forwardedRef,
+ className: className
});
};
const ConnectedBorderBoxControlLinkedButton = contextConnect(BorderBoxControlLinkedButton, 'BorderBoxControlLinkedButton');
/* harmony default export */ const border_box_control_linked_button_component = (ConnectedBorderBoxControlLinkedButton);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-visualizer/hook.js
+;// ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-visualizer/hook.js
/**
* WordPress dependencies
*/
@@ -35111,11 +35482,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-visualizer/component.js
-/**
- * WordPress dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-visualizer/component.js
/**
* Internal dependencies
*/
@@ -35136,22 +35503,7 @@
const ConnectedBorderBoxControlVisualizer = contextConnect(BorderBoxControlVisualizer, 'BorderBoxControlVisualizer');
/* harmony default export */ const border_box_control_visualizer_component = (ConnectedBorderBoxControlVisualizer);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/close-small.js
-/**
- * WordPress dependencies
- */
-
-
-const closeSmall = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
- xmlns: "http://www.w3.org/2000/svg",
- viewBox: "0 0 24 24",
- children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
- d: "M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"
- })
-});
-/* harmony default export */ const close_small = (closeSmall);
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/line-solid.js
+;// ./node_modules/@wordpress/icons/build-module/library/line-solid.js
/**
* WordPress dependencies
*/
@@ -35166,7 +35518,7 @@
});
/* harmony default export */ const line_solid = (lineSolid);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/line-dashed.js
+;// ./node_modules/@wordpress/icons/build-module/library/line-dashed.js
/**
* WordPress dependencies
*/
@@ -35183,7 +35535,7 @@
});
/* harmony default export */ const line_dashed = (lineDashed);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/line-dotted.js
+;// ./node_modules/@wordpress/icons/build-module/library/line-dotted.js
/**
* WordPress dependencies
*/
@@ -35200,78 +35552,7 @@
});
/* harmony default export */ const line_dotted = (lineDotted);
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/DeprecatedLayoutGroupContext.mjs
-
-
-/**
- * Note: Still used by components generated by old versions of Framer
- *
- * @deprecated
- */
-const DeprecatedLayoutGroupContext = (0,external_React_.createContext)(null);
-
-
-
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/node/group.mjs
-const notify = (node) => !node.isLayoutDirty && node.willUpdate(false);
-function nodeGroup() {
- const nodes = new Set();
- const subscriptions = new WeakMap();
- const dirtyAll = () => nodes.forEach(notify);
- return {
- add: (node) => {
- nodes.add(node);
- subscriptions.set(node, node.addEventListener("willUpdate", dirtyAll));
- },
- remove: (node) => {
- nodes.delete(node);
- const unsubscribe = subscriptions.get(node);
- if (unsubscribe) {
- unsubscribe();
- subscriptions.delete(node);
- }
- dirtyAll();
- },
- dirty: dirtyAll,
- };
-}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/components/LayoutGroup/index.mjs
-
-
-
-
-
-
-
-const shouldInheritGroup = (inherit) => inherit === true;
-const shouldInheritId = (inherit) => shouldInheritGroup(inherit === true) || inherit === "id";
-const LayoutGroup = ({ children, id, inherit = true }) => {
- const layoutGroupContext = (0,external_React_.useContext)(LayoutGroupContext);
- const deprecatedLayoutGroupContext = (0,external_React_.useContext)(DeprecatedLayoutGroupContext);
- const [forceRender, key] = use_force_update_useForceUpdate();
- const context = (0,external_React_.useRef)(null);
- const upstreamId = layoutGroupContext.id || deprecatedLayoutGroupContext;
- if (context.current === null) {
- if (shouldInheritId(inherit) && upstreamId) {
- id = id ? upstreamId + "-" + id : upstreamId;
- }
- context.current = {
- id,
- group: shouldInheritGroup(inherit)
- ? layoutGroupContext.group || nodeGroup()
- : nodeGroup(),
- };
- }
- const memoizedContext = (0,external_React_.useMemo)(() => ({ ...context.current, forceRender }), [key]);
- return ((0,external_ReactJSXRuntime_namespaceObject.jsx)(LayoutGroupContext.Provider, { value: memoizedContext, children: children }));
-};
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/styles.js
+;// ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/styles.js
function toggle_group_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
@@ -35286,7 +35567,7 @@
isBlock,
isDeselectable,
size
-}) => /*#__PURE__*/emotion_react_browser_esm_css("background:", COLORS.ui.background, ";border:1px solid transparent;border-radius:", config_values.controlBorderRadius, ";display:inline-flex;min-width:0;position:relative;", toggleGroupControlSize(size), " ", !isDeselectable && enclosingBorders(isBlock), ";" + ( true ? "" : 0), true ? "" : 0);
+}) => /*#__PURE__*/emotion_react_browser_esm_css("background:", COLORS.ui.background, ";border:1px solid transparent;border-radius:", config_values.radiusSmall, ";display:inline-flex;min-width:0;position:relative;", toggleGroupControlSize(size), " ", !isDeselectable && enclosingBorders(isBlock), "@media not ( prefers-reduced-motion ){&[data-indicator-animated]::before{transition-property:transform,border-radius;transition-duration:0.2s;transition-timing-function:ease-out;}}&::before{content:'';position:absolute;pointer-events:none;background:", COLORS.theme.foreground, ";outline:2px solid transparent;outline-offset:-3px;--antialiasing-factor:100;border-radius:calc(\n\t\t\t\t", config_values.radiusXSmall, " /\n\t\t\t\t\t(\n\t\t\t\t\t\tvar( --selected-width, 0 ) /\n\t\t\t\t\t\t\tvar( --antialiasing-factor )\n\t\t\t\t\t)\n\t\t\t)/", config_values.radiusXSmall, ";left:-1px;width:calc( var( --antialiasing-factor ) * 1px );height:calc( var( --selected-height, 0 ) * 1px );transform-origin:left top;transform:translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(\n\t\t\t\tcalc(\n\t\t\t\t\tvar( --selected-width, 0 ) / var( --antialiasing-factor )\n\t\t\t\t)\n\t\t\t);}" + ( true ? "" : 0), true ? "" : 0);
const enclosingBorders = isBlock => {
const enclosingBorder = /*#__PURE__*/emotion_react_browser_esm_css("border-color:", COLORS.ui.border, ";" + ( true ? "" : 0), true ? "" : 0);
return /*#__PURE__*/emotion_react_browser_esm_css(isBlock && enclosingBorder, " &:hover{border-color:", COLORS.ui.borderHover, ";}&:focus-within{border-color:", COLORS.ui.borderFocus, ";box-shadow:", config_values.controlBoxShadowFocus, ";z-index:1;outline:2px solid transparent;outline-offset:-2px;}" + ( true ? "" : 0), true ? "" : 0);
@@ -35317,7 +35598,7 @@
styles: "display:flex"
} : 0);
-;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/radio/radio-store.js
+;// ./node_modules/@ariakit/core/esm/radio/radio-store.js
"use client";
@@ -35329,13 +35610,13 @@
// src/radio/radio-store.ts
function createRadioStore(_a = {}) {
- var props = _4R3V3JGP_objRest(_a, []);
+ var props = _3YLGPPWQ_objRest(_a, []);
var _a2;
const syncState = (_a2 = props.store) == null ? void 0 : _a2.getState();
- const composite = createCompositeStore(_chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, props), {
+ const composite = createCompositeStore(_chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, props), {
focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, true)
}));
- const initialState = _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, composite.getState()), {
+ const initialState = _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, composite.getState()), {
value: defaultValue(
props.value,
syncState == null ? void 0 : syncState.value,
@@ -35344,13 +35625,13 @@
)
});
const radio = createStore(initialState, composite, props.store);
- return _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues(_chunks_4R3V3JGP_spreadValues({}, composite), radio), {
+ return _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues(_chunks_3YLGPPWQ_spreadValues({}, composite), radio), {
setValue: (value) => radio.setState("value", value)
});
}
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/LEIRFLRL.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/4BXJGRNH.js
"use client";
@@ -35363,31 +35644,31 @@
return store;
}
function useRadioStore(props = {}) {
- const [store, update] = EKQEJRUF_useStore(createRadioStore, props);
+ const [store, update] = YV4JVR4I_useStore(createRadioStore, props);
return useRadioStoreProps(store, update, props);
}
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/XEV62JUQ.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/UVUMR3WP.js
"use client";
// src/radio/radio-context.tsx
-var XEV62JUQ_ctx = createStoreContext(
+var UVUMR3WP_ctx = createStoreContext(
[CompositeContextProvider],
[CompositeScopedContextProvider]
);
-var useRadioContext = XEV62JUQ_ctx.useContext;
-var useRadioScopedContext = XEV62JUQ_ctx.useScopedContext;
-var useRadioProviderContext = XEV62JUQ_ctx.useProviderContext;
-var RadioContextProvider = XEV62JUQ_ctx.ContextProvider;
-var RadioScopedContextProvider = XEV62JUQ_ctx.ScopedContextProvider;
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/radio/radio-group.js
+var useRadioContext = UVUMR3WP_ctx.useContext;
+var useRadioScopedContext = UVUMR3WP_ctx.useScopedContext;
+var useRadioProviderContext = UVUMR3WP_ctx.useProviderContext;
+var RadioContextProvider = UVUMR3WP_ctx.ContextProvider;
+var RadioScopedContextProvider = UVUMR3WP_ctx.ScopedContextProvider;
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/radio/radio-group.js
"use client";
@@ -35404,8 +35685,9 @@
// src/radio/radio-group.tsx
+var radio_group_TagName = "div";
var useRadioGroup = createHook(
- (_a) => {
+ function useRadioGroup2(_a) {
var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
const context = useRadioProviderContext();
store = store || context;
@@ -35418,21 +35700,20 @@
(element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(RadioScopedContextProvider, { value: store, children: element }),
[store]
);
- props = _4R3V3JGP_spreadValues({
+ props = _3YLGPPWQ_spreadValues({
role: "radiogroup"
}, props);
- props = useComposite(_4R3V3JGP_spreadValues({ store }, props));
+ props = useComposite(_3YLGPPWQ_spreadValues({ store }, props));
return props;
}
);
-var RadioGroup = createComponent((props) => {
+var RadioGroup = forwardRef2(function RadioGroup2(props) {
const htmlProps = useRadioGroup(props);
- return _3ORBWXWF_createElement("div", htmlProps);
-});
-if (false) {}
-
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/context.js
+ return LMDWO4NN_createElement(radio_group_TagName, htmlProps);
+});
+
+
+;// ./node_modules/@wordpress/components/build-module/toggle-group-control/context.js
/**
* WordPress dependencies
*/
@@ -35446,7 +35727,7 @@
const useToggleGroupControlContext = () => (0,external_wp_element_namespaceObject.useContext)(ToggleGroupControlContext);
/* harmony default export */ const toggle_group_control_context = (ToggleGroupControlContext);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/utils.js
+;// ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/utils.js
/**
* WordPress dependencies
*/
@@ -35465,20 +35746,20 @@
* @param valueProp The received `value`
*/
function useComputeControlledOrUncontrolledValue(valueProp) {
- const isInitialRender = (0,external_wp_element_namespaceObject.useRef)(true);
+ const isInitialRenderRef = (0,external_wp_element_namespaceObject.useRef)(true);
const prevValueProp = (0,external_wp_compose_namespaceObject.usePrevious)(valueProp);
- const prevIsControlled = (0,external_wp_element_namespaceObject.useRef)(false);
+ const prevIsControlledRef = (0,external_wp_element_namespaceObject.useRef)(false);
(0,external_wp_element_namespaceObject.useEffect)(() => {
- if (isInitialRender.current) {
- isInitialRender.current = false;
+ if (isInitialRenderRef.current) {
+ isInitialRenderRef.current = false;
}
}, []);
// Assume the component is being used in controlled mode on the first re-render
// that has a different `valueProp` from the previous render.
- const isControlled = prevIsControlled.current || !isInitialRender.current && prevValueProp !== valueProp;
+ const isControlled = prevIsControlledRef.current || !isInitialRenderRef.current && prevValueProp !== valueProp;
(0,external_wp_element_namespaceObject.useEffect)(() => {
- prevIsControlled.current = isControlled;
+ prevIsControlledRef.current = isControlled;
}, [isControlled]);
if (isControlled) {
// When in controlled mode, use `''` instead of `undefined`
@@ -35495,17 +35776,17 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/as-radio-group.js
-/**
- * External dependencies
- */
-
-// eslint-disable-next-line no-restricted-imports
-
-
-/**
- * WordPress dependencies
- */
+;// ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/as-radio-group.js
+/**
+ * External dependencies
+ */
+
+
+
+/**
+ * WordPress dependencies
+ */
+
@@ -35524,6 +35805,7 @@
size,
value: valueProp,
id: idProp,
+ setSelectedElement,
...otherProps
}, forwardedRef) {
const generatedId = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleGroupControlAsRadioGroup, 'toggle-group-control-as-radio-group');
@@ -35546,17 +35828,29 @@
const radio = useRadioStore({
defaultValue,
value,
- setValue: wrappedOnChangeProp
- });
- const selectedValue = radio.useState('value');
+ setValue: wrappedOnChangeProp,
+ rtl: (0,external_wp_i18n_namespaceObject.isRTL)()
+ });
+ const selectedValue = useStoreState(radio, 'value');
const setValue = radio.setValue;
+
+ // Ensures that the active id is also reset after the value is "reset" by the consumer.
+ (0,external_wp_element_namespaceObject.useEffect)(() => {
+ if (selectedValue === '') {
+ radio.setActiveId(undefined);
+ }
+ }, [radio, selectedValue]);
const groupContextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
+ activeItemIsNotFirstItem: () => radio.getState().activeId !== radio.first(),
baseId,
isBlock: !isAdaptiveWidth,
size,
+ // @ts-expect-error - This is wrong and we should fix it.
value: selectedValue,
- setValue
- }), [baseId, isAdaptiveWidth, size, selectedValue, setValue]);
+ // @ts-expect-error - This is wrong and we should fix it.
+ setValue,
+ setSelectedElement
+ }), [baseId, isAdaptiveWidth, radio, selectedValue, setSelectedElement, setValue, size]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_context.Provider, {
value: groupContextValue,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RadioGroup, {
@@ -35572,7 +35866,7 @@
}
const ToggleGroupControlAsRadioGroup = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleGroupControlAsRadioGroup);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/hooks/use-controlled-value.js
+;// ./node_modules/@wordpress/components/build-module/utils/hooks/use-controlled-value.js
/**
* WordPress dependencies
*/
@@ -35609,7 +35903,7 @@
return [value, setValue];
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/as-button-group.js
+;// ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/as-button-group.js
/**
* WordPress dependencies
*/
@@ -35632,6 +35926,7 @@
size,
value: valueProp,
id: idProp,
+ setSelectedElement,
...otherProps
}, forwardedRef) {
const generatedId = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleGroupControlAsButtonGroup, 'toggle-group-control-as-button-group');
@@ -35656,8 +35951,9 @@
setValue: setSelectedValue,
isBlock: !isAdaptiveWidth,
isDeselectable: true,
- size
- }), [baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size]);
+ size,
+ setSelectedElement
+ }), [baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size, setSelectedElement]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_context.Provider, {
value: groupContextValue,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, {
@@ -35671,23 +35967,273 @@
}
const ToggleGroupControlAsButtonGroup = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleGroupControlAsButtonGroup);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/component.js
-/**
- * External dependencies
- */
-
-// eslint-disable-next-line no-restricted-imports
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
+;// ./node_modules/@wordpress/components/build-module/utils/element-rect.js
+/* eslint-disable jsdoc/require-param */
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * The position and dimensions of an element, relative to its offset parent.
+ */
+
+/**
+ * An `ElementOffsetRect` object with all values set to zero.
+ */
+const NULL_ELEMENT_OFFSET_RECT = {
+ element: undefined,
+ top: 0,
+ right: 0,
+ bottom: 0,
+ left: 0,
+ width: 0,
+ height: 0
+};
+
+/**
+ * Returns the position and dimensions of an element, relative to its offset
+ * parent, with subpixel precision. Values reflect the real measures before any
+ * potential scaling distortions along the X and Y axes.
+ *
+ * Useful in contexts where plain `getBoundingClientRect` calls or `ResizeObserver`
+ * entries are not suitable, such as when the element is transformed, and when
+ * `element.offset<Top|Left|Width|Height>` methods are not precise enough.
+ *
+ * **Note:** in some contexts, like when the scale is 0, this method will fail
+ * because it's impossible to calculate a scaling ratio. When that happens, it
+ * will return `undefined`.
+ */
+function getElementOffsetRect(element) {
+ var _offsetParent$getBoun, _offsetParent$scrollL, _offsetParent$scrollT;
+ // Position and dimension values computed with `getBoundingClientRect` have
+ // subpixel precision, but are affected by distortions since they represent
+ // the "real" measures, or in other words, the actual final values as rendered
+ // by the browser.
+ const rect = element.getBoundingClientRect();
+ if (rect.width === 0 || rect.height === 0) {
+ return;
+ }
+ const offsetParent = element.offsetParent;
+ const offsetParentRect = (_offsetParent$getBoun = offsetParent?.getBoundingClientRect()) !== null && _offsetParent$getBoun !== void 0 ? _offsetParent$getBoun : NULL_ELEMENT_OFFSET_RECT;
+ const offsetParentScrollX = (_offsetParent$scrollL = offsetParent?.scrollLeft) !== null && _offsetParent$scrollL !== void 0 ? _offsetParent$scrollL : 0;
+ const offsetParentScrollY = (_offsetParent$scrollT = offsetParent?.scrollTop) !== null && _offsetParent$scrollT !== void 0 ? _offsetParent$scrollT : 0;
+
+ // Computed widths and heights have subpixel precision, and are not affected
+ // by distortions.
+ const computedWidth = parseFloat(getComputedStyle(element).width);
+ const computedHeight = parseFloat(getComputedStyle(element).height);
+
+ // We can obtain the current scale factor for the element by comparing "computed"
+ // dimensions with the "real" ones.
+ const scaleX = computedWidth / rect.width;
+ const scaleY = computedHeight / rect.height;
+ return {
+ element,
+ // To obtain the adjusted values for the position:
+ // 1. Compute the element's position relative to the offset parent.
+ // 2. Correct for the scale factor.
+ // 3. Adjust for the scroll position of the offset parent.
+ top: (rect.top - offsetParentRect?.top) * scaleY + offsetParentScrollY,
+ right: (offsetParentRect?.right - rect.right) * scaleX - offsetParentScrollX,
+ bottom: (offsetParentRect?.bottom - rect.bottom) * scaleY - offsetParentScrollY,
+ left: (rect.left - offsetParentRect?.left) * scaleX + offsetParentScrollX,
+ // Computed dimensions don't need any adjustments.
+ width: computedWidth,
+ height: computedHeight
+ };
+}
+const POLL_RATE = 100;
+
+/**
+ * Tracks the position and dimensions of an element, relative to its offset
+ * parent. The element can be changed dynamically.
+ *
+ * When no element is provided (`null` or `undefined`), the hook will return
+ * a "null" rect, in which all values are `0` and `element` is `undefined`.
+ *
+ * **Note:** sometimes, the measurement will fail (see `getElementOffsetRect`'s
+ * documentation for more details). When that happens, this hook will attempt
+ * to measure again after a frame, and if that fails, it will poll every 100
+ * milliseconds until it succeeds.
+ */
+function useTrackElementOffsetRect(targetElement, deps = []) {
+ const [indicatorPosition, setIndicatorPosition] = (0,external_wp_element_namespaceObject.useState)(NULL_ELEMENT_OFFSET_RECT);
+ const intervalRef = (0,external_wp_element_namespaceObject.useRef)();
+ const measure = (0,external_wp_compose_namespaceObject.useEvent)(() => {
+ // Check that the targetElement is still attached to the DOM, in case
+ // it was removed since the last `measure` call.
+ if (targetElement && targetElement.isConnected) {
+ const elementOffsetRect = getElementOffsetRect(targetElement);
+ if (elementOffsetRect) {
+ setIndicatorPosition(elementOffsetRect);
+ clearInterval(intervalRef.current);
+ return true;
+ }
+ } else {
+ clearInterval(intervalRef.current);
+ }
+ return false;
+ });
+ const setElement = (0,external_wp_compose_namespaceObject.useResizeObserver)(() => {
+ if (!measure()) {
+ requestAnimationFrame(() => {
+ if (!measure()) {
+ intervalRef.current = setInterval(measure, POLL_RATE);
+ }
+ });
+ }
+ });
+ (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
+ setElement(targetElement);
+ if (!targetElement) {
+ setIndicatorPosition(NULL_ELEMENT_OFFSET_RECT);
+ }
+ }, [setElement, targetElement]);
+
+ // Escape hatch to force a remeasurement when something else changes rather
+ // than the target elements' ref or size (for example, the target element
+ // can change its position within the tablist).
+ (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
+ measure();
+ // `measure` is a stable function, so it's safe to omit it from the deps array.
+ // deps can't be statically analyzed by ESLint
+ }, deps);
+ return indicatorPosition;
+}
+
+/* eslint-enable jsdoc/require-param */
+
+;// ./node_modules/@wordpress/components/build-module/utils/hooks/use-on-value-update.js
+/* eslint-disable jsdoc/require-param */
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Context object for the `onUpdate` callback of `useOnValueUpdate`.
+ */
+
+/**
+ * Calls the `onUpdate` callback when the `value` changes.
+ */
+function useOnValueUpdate(
+/**
+ * The value to watch for changes.
+ */
+value,
+/**
+ * Callback to fire when the value changes.
+ */
+onUpdate) {
+ const previousValueRef = (0,external_wp_element_namespaceObject.useRef)(value);
+ const updateCallbackEvent = (0,external_wp_compose_namespaceObject.useEvent)(onUpdate);
+ (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
+ if (previousValueRef.current !== value) {
+ updateCallbackEvent({
+ previousValue: previousValueRef.current
+ });
+ previousValueRef.current = value;
+ }
+ }, [updateCallbackEvent, value]);
+}
+/* eslint-enable jsdoc/require-param */
+
+;// ./node_modules/@wordpress/components/build-module/utils/hooks/use-animated-offset-rect.js
+/* eslint-disable jsdoc/require-param */
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+/**
+ * A utility used to animate something in a container component based on the "offset
+ * rect" (position relative to the container and size) of a subelement. For example,
+ * this is useful to render an indicator for the selected option of a component, and
+ * to animate it when the selected option changes.
+ *
+ * Takes in a container element and the up-to-date "offset rect" of the target
+ * subelement, obtained with `useTrackElementOffsetRect`. Then it does the following:
+ *
+ * - Adds CSS variables with rect information to the container, so that the indicator
+ * can be rendered and animated with them. These are kept up-to-date, enabling CSS
+ * transitions on change.
+ * - Sets an attribute (`data-subelement-animated` by default) when the tracked
+ * element changes, so that the target (e.g. the indicator) can be animated to its
+ * new size and position.
+ * - Removes the attribute when the animation is done.
+ *
+ * The need for the attribute is due to the fact that the rect might update in
+ * situations other than when the tracked element changes, e.g. the tracked element
+ * might be resized. In such cases, there is no need to animate the indicator, and
+ * the change in size or position of the indicator needs to be reflected immediately.
+ */
+function useAnimatedOffsetRect(
+/**
+ * The container element.
+ */
+container,
+/**
+ * The rect of the tracked element.
+ */
+rect, {
+ prefix = 'subelement',
+ dataAttribute = `${prefix}-animated`,
+ transitionEndFilter = () => true,
+ roundRect = false
+} = {}) {
+ const setProperties = (0,external_wp_compose_namespaceObject.useEvent)(() => {
+ Object.keys(rect).forEach(property => property !== 'element' && container?.style.setProperty(`--${prefix}-${property}`, String(roundRect ? Math.floor(rect[property]) : rect[property])));
+ });
+ (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
+ setProperties();
+ }, [rect, setProperties]);
+ useOnValueUpdate(rect.element, ({
+ previousValue
+ }) => {
+ // Only enable the animation when moving from one element to another.
+ if (rect.element && previousValue) {
+ container?.setAttribute(`data-${dataAttribute}`, '');
+ }
+ });
+ (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
+ function onTransitionEnd(event) {
+ if (transitionEndFilter(event)) {
+ container?.removeAttribute(`data-${dataAttribute}`);
+ }
+ }
+ container?.addEventListener('transitionend', onTransitionEnd);
+ return () => container?.removeEventListener('transitionend', onTransitionEnd);
+ }, [dataAttribute, container, transitionEndFilter]);
+}
+/* eslint-enable jsdoc/require-param */
+
+;// ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/component.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
@@ -35702,6 +36248,7 @@
const {
__nextHasNoMarginBottom = false,
__next40pxDefaultSize = false,
+ __shouldNotWarnDeprecated36pxSize,
className,
isAdaptiveWidth = false,
isBlock = false,
@@ -35715,8 +36262,17 @@
children,
...otherProps
} = useContextSystem(props, 'ToggleGroupControl');
- const baseId = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleGroupControl, 'toggle-group-control');
const normalizedSize = __next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;
+ const [selectedElement, setSelectedElement] = (0,external_wp_element_namespaceObject.useState)();
+ const [controlElement, setControlElement] = (0,external_wp_element_namespaceObject.useState)();
+ const refs = (0,external_wp_compose_namespaceObject.useMergeRefs)([setControlElement, forwardedRef]);
+ const selectedRect = useTrackElementOffsetRect(value !== null && value !== undefined ? selectedElement : undefined);
+ useAnimatedOffsetRect(controlElement, selectedRect, {
+ prefix: 'selected',
+ dataAttribute: 'indicator-animated',
+ transitionEndFilter: event => event.pseudoElement === '::before',
+ roundRect: true
+ });
const cx = useCx();
const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(toggleGroupControl({
isBlock,
@@ -35724,26 +36280,31 @@
size: normalizedSize
}), isBlock && toggle_group_control_styles_block, className), [className, cx, isBlock, isDeselectable, normalizedSize]);
const MainControl = isDeselectable ? ToggleGroupControlAsButtonGroup : ToggleGroupControlAsRadioGroup;
+ maybeWarnDeprecated36pxSize({
+ componentName: 'ToggleGroupControl',
+ size,
+ __next40pxDefaultSize,
+ __shouldNotWarnDeprecated36pxSize
+ });
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(base_control, {
help: help,
__nextHasNoMarginBottom: __nextHasNoMarginBottom,
+ __associatedWPComponentName: "ToggleGroupControl",
children: [!hideLabelFromVision && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(VisualLabelWrapper, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control.VisualLabel, {
children: label
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MainControl, {
...otherProps,
+ setSelectedElement: setSelectedElement,
className: classes,
isAdaptiveWidth: isAdaptiveWidth,
label: label,
onChange: onChange,
- ref: forwardedRef,
+ ref: refs,
size: normalizedSize,
value: value,
- children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LayoutGroup, {
- id: baseId,
- children: children
- })
+ children: children
})]
});
}
@@ -35769,7 +36330,13 @@
*
* function Example() {
* return (
- * <ToggleGroupControl label="my label" value="vertical" isBlock>
+ * <ToggleGroupControl
+ * label="my label"
+ * value="vertical"
+ * isBlock
+ * __nextHasNoMarginBottom
+ * __next40pxDefaultSize
+ * >
* <ToggleGroupControlOption value="horizontal" label="Horizontal" />
* <ToggleGroupControlOption value="vertical" label="Vertical" />
* </ToggleGroupControl>
@@ -35780,21 +36347,21 @@
const ToggleGroupControl = contextConnect(UnconnectedToggleGroupControl, 'ToggleGroupControl');
/* harmony default export */ const toggle_group_control_component = (ToggleGroupControl);
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/JL6IRDFK.js
-"use client";
-
-
-
-
-
-
-
-// src/radio/radio.ts
-
-
+;// ./node_modules/@ariakit/react-core/esm/__chunks/NLEBE274.js
+"use client";
+
+
+
+
+
+
+
+// src/radio/radio.tsx
+
+
+var NLEBE274_TagName = "input";
function getIsChecked(value, storeValue) {
- if (storeValue === void 0)
- return;
+ if (storeValue === void 0) return;
if (value != null && storeValue != null) {
return storeValue === value;
}
@@ -35803,116 +36370,116 @@
function isNativeRadio(tagName, type) {
return tagName === "input" && (!type || type === "radio");
}
-var useRadio = createHook(
- (_a) => {
- var _b = _a, { store, name, value, checked } = _b, props = __objRest(_b, ["store", "name", "value", "checked"]);
- const context = useRadioContext();
- store = store || context;
- const id = useId(props.id);
- const ref = (0,external_React_.useRef)(null);
- const isChecked = useStoreState(
- store,
- (state) => checked != null ? checked : getIsChecked(value, state == null ? void 0 : state.value)
- );
- (0,external_React_.useEffect)(() => {
- if (!id)
- return;
- if (!isChecked)
- return;
- const isActiveItem = (store == null ? void 0 : store.getState().activeId) === id;
- if (isActiveItem)
- return;
- store == null ? void 0 : store.setActiveId(id);
- }, [store, isChecked, id]);
- const onChangeProp = props.onChange;
- const tagName = useTagName(ref, props.as || "input");
- const nativeRadio = isNativeRadio(tagName, props.type);
- const disabled = disabledFromProps(props);
- const [propertyUpdated, schedulePropertyUpdate] = useForceUpdate();
- (0,external_React_.useEffect)(() => {
- const element = ref.current;
- if (!element)
- return;
- if (nativeRadio)
- return;
- if (isChecked !== void 0) {
- element.checked = isChecked;
- }
- if (name !== void 0) {
- element.name = name;
- }
- if (value !== void 0) {
- element.value = `${value}`;
- }
- }, [propertyUpdated, nativeRadio, isChecked, name, value]);
- const onChange = useEvent((event) => {
- if (disabled) {
- event.preventDefault();
- event.stopPropagation();
- return;
- }
- if (!nativeRadio) {
- event.currentTarget.checked = true;
- schedulePropertyUpdate();
- }
- onChangeProp == null ? void 0 : onChangeProp(event);
- if (event.defaultPrevented)
- return;
- store == null ? void 0 : store.setValue(value);
- });
- const onClickProp = props.onClick;
- const onClick = useEvent((event) => {
- onClickProp == null ? void 0 : onClickProp(event);
- if (event.defaultPrevented)
- return;
- if (nativeRadio)
- return;
- onChange(event);
- });
- const onFocusProp = props.onFocus;
- const onFocus = useEvent((event) => {
- onFocusProp == null ? void 0 : onFocusProp(event);
- if (event.defaultPrevented)
- return;
- if (!nativeRadio)
- return;
- if (!store)
- return;
- const { moves, activeId } = store.getState();
- if (!moves)
- return;
- if (id && activeId !== id)
- return;
- onChange(event);
- });
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
- id,
- role: !nativeRadio ? "radio" : void 0,
- type: nativeRadio ? "radio" : void 0,
- "aria-checked": isChecked
- }, props), {
- ref: useMergeRefs(ref, props.ref),
- onChange,
- onClick,
- onFocus
- });
- props = useCompositeItem(_4R3V3JGP_spreadValues({ store, clickOnEnter: !nativeRadio }, props));
- return _4R3V3JGP_spreadValues({
- name: nativeRadio ? name : void 0,
- value: nativeRadio ? value : void 0,
- checked: isChecked
- }, props);
- }
-);
-var Radio = createMemoComponent((props) => {
- const htmlProps = useRadio(props);
- return _3ORBWXWF_createElement("input", htmlProps);
-});
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option-base/styles.js
+var useRadio = createHook(function useRadio2(_a) {
+ var _b = _a, {
+ store,
+ name,
+ value,
+ checked
+ } = _b, props = __objRest(_b, [
+ "store",
+ "name",
+ "value",
+ "checked"
+ ]);
+ const context = useRadioContext();
+ store = store || context;
+ const id = useId(props.id);
+ const ref = (0,external_React_.useRef)(null);
+ const isChecked = useStoreState(
+ store,
+ (state) => checked != null ? checked : getIsChecked(value, state == null ? void 0 : state.value)
+ );
+ (0,external_React_.useEffect)(() => {
+ if (!id) return;
+ if (!isChecked) return;
+ const isActiveItem = (store == null ? void 0 : store.getState().activeId) === id;
+ if (isActiveItem) return;
+ store == null ? void 0 : store.setActiveId(id);
+ }, [store, isChecked, id]);
+ const onChangeProp = props.onChange;
+ const tagName = useTagName(ref, NLEBE274_TagName);
+ const nativeRadio = isNativeRadio(tagName, props.type);
+ const disabled = disabledFromProps(props);
+ const [propertyUpdated, schedulePropertyUpdate] = useForceUpdate();
+ (0,external_React_.useEffect)(() => {
+ const element = ref.current;
+ if (!element) return;
+ if (nativeRadio) return;
+ if (isChecked !== void 0) {
+ element.checked = isChecked;
+ }
+ if (name !== void 0) {
+ element.name = name;
+ }
+ if (value !== void 0) {
+ element.value = `${value}`;
+ }
+ }, [propertyUpdated, nativeRadio, isChecked, name, value]);
+ const onChange = useEvent((event) => {
+ if (disabled) {
+ event.preventDefault();
+ event.stopPropagation();
+ return;
+ }
+ if ((store == null ? void 0 : store.getState().value) === value) return;
+ if (!nativeRadio) {
+ event.currentTarget.checked = true;
+ schedulePropertyUpdate();
+ }
+ onChangeProp == null ? void 0 : onChangeProp(event);
+ if (event.defaultPrevented) return;
+ store == null ? void 0 : store.setValue(value);
+ });
+ const onClickProp = props.onClick;
+ const onClick = useEvent((event) => {
+ onClickProp == null ? void 0 : onClickProp(event);
+ if (event.defaultPrevented) return;
+ if (nativeRadio) return;
+ onChange(event);
+ });
+ const onFocusProp = props.onFocus;
+ const onFocus = useEvent((event) => {
+ onFocusProp == null ? void 0 : onFocusProp(event);
+ if (event.defaultPrevented) return;
+ if (!nativeRadio) return;
+ if (!store) return;
+ const { moves, activeId } = store.getState();
+ if (!moves) return;
+ if (id && activeId !== id) return;
+ onChange(event);
+ });
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
+ id,
+ role: !nativeRadio ? "radio" : void 0,
+ type: nativeRadio ? "radio" : void 0,
+ "aria-checked": isChecked
+ }, props), {
+ ref: useMergeRefs(ref, props.ref),
+ onChange,
+ onClick,
+ onFocus
+ });
+ props = useCompositeItem(_3YLGPPWQ_spreadValues({
+ store,
+ clickOnEnter: !nativeRadio
+ }, props));
+ return removeUndefinedValues(_3YLGPPWQ_spreadValues({
+ name: nativeRadio ? name : void 0,
+ value: nativeRadio ? value : void 0,
+ checked: isChecked
+ }, props));
+});
+var Radio = memo2(
+ forwardRef2(function Radio2(props) {
+ const htmlProps = useRadio(props);
+ return LMDWO4NN_createElement(NLEBE274_TagName, htmlProps);
+ })
+);
+
+
+
+;// ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option-base/styles.js
function toggle_group_control_option_base_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
@@ -35938,11 +36505,11 @@
isIcon,
isPressed,
size
-}) => /*#__PURE__*/emotion_react_browser_esm_css("align-items:center;appearance:none;background:transparent;border:none;border-radius:", config_values.controlBorderRadius, ";color:", COLORS.gray[700], ";fill:currentColor;cursor:pointer;display:flex;font-family:inherit;height:100%;justify-content:center;line-height:100%;outline:none;padding:0 12px;position:relative;text-align:center;@media not ( prefers-reduced-motion ){transition:background ", config_values.transitionDurationFast, " linear,color ", config_values.transitionDurationFast, " linear,font-weight 60ms linear;}user-select:none;width:100%;z-index:2;&::-moz-focus-inner{border:0;}&:active{background:", config_values.toggleGroupControlBackgroundColor, ";}", isDeselectable && deselectable, " ", isIcon && isIconStyles({
+}) => /*#__PURE__*/emotion_react_browser_esm_css("align-items:center;appearance:none;background:transparent;border:none;border-radius:", config_values.radiusXSmall, ";color:", COLORS.theme.gray[700], ";fill:currentColor;cursor:pointer;display:flex;font-family:inherit;height:100%;justify-content:center;line-height:100%;outline:none;padding:0 12px;position:relative;text-align:center;@media not ( prefers-reduced-motion ){transition:background ", config_values.transitionDurationFast, " linear,color ", config_values.transitionDurationFast, " linear,font-weight 60ms linear;}user-select:none;width:100%;z-index:2;&::-moz-focus-inner{border:0;}&[disabled]{opacity:0.4;cursor:default;}&:active{background:", COLORS.ui.background, ";}", isDeselectable && deselectable, " ", isIcon && isIconStyles({
size
}), " ", isPressed && pressed, ";" + ( true ? "" : 0), true ? "" : 0);
-const pressed = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.white, ";&:active{background:transparent;}" + ( true ? "" : 0), true ? "" : 0);
-const deselectable = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.gray[900], ";&:focus{box-shadow:inset 0 0 0 1px ", COLORS.white, ",0 0 0 ", config_values.borderWidthFocus, " ", COLORS.theme.accent, ";outline:2px solid transparent;}" + ( true ? "" : 0), true ? "" : 0);
+const pressed = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.theme.foregroundInverted, ";&:active{background:transparent;}" + ( true ? "" : 0), true ? "" : 0);
+const deselectable = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.theme.foreground, ";&:focus{box-shadow:inset 0 0 0 1px ", COLORS.ui.background, ",0 0 0 ", config_values.borderWidthFocus, " ", COLORS.theme.accent, ";outline:2px solid transparent;}" + ( true ? "" : 0), true ? "" : 0);
const ButtonContentView = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
target: "et6ln9s0"
} : 0)("display:flex;font-size:", config_values.fontSize, ";line-height:1;" + ( true ? "" : 0));
@@ -35953,31 +36520,25 @@
default: '30px',
'__unstable-large': '32px'
};
- return /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.gray[900], ";height:", iconButtonSizes[size], ";aspect-ratio:1;padding-left:0;padding-right:0;" + ( true ? "" : 0), true ? "" : 0);
-};
-const backdropView = /*#__PURE__*/emotion_react_browser_esm_css("background:", COLORS.gray[900], ";border-radius:", config_values.controlBorderRadius, ";position:absolute;inset:0;z-index:1;outline:2px solid transparent;outline-offset:-3px;" + ( true ? "" : 0), true ? "" : 0);
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option-base/component.js
-/**
- * External dependencies
- */
-
-// eslint-disable-next-line no-restricted-imports
-
-// eslint-disable-next-line no-restricted-imports
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
-
+ return /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.theme.foreground, ";height:", iconButtonSizes[size], ";aspect-ratio:1;padding-left:0;padding-right:0;" + ( true ? "" : 0), true ? "" : 0);
+};
+
+;// ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option-base/component.js
+/**
+ * External dependencies
+ */
+
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -35986,13 +36547,9 @@
const {
- ButtonContentView: component_ButtonContentView,
- LabelView: component_LabelView
+ /* ButtonContentView */ "Rp": component_ButtonContentView,
+ /* LabelView */ "y0": component_LabelView
} = toggle_group_control_option_base_styles_namespaceObject;
-const REDUCED_MOTION_TRANSITION_CONFIG = {
- duration: 0
-};
-const LAYOUT_ID = 'toggle-group-backdrop-shared-layout-id';
const WithToolTip = ({
showTooltip,
text,
@@ -36010,7 +36567,6 @@
});
};
function ToggleGroupControlOptionBase(props, forwardedRef) {
- const shouldReduceMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)();
const toggleGroupControlContext = useToggleGroupControlContext();
const id = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleGroupControlOptionBase, toggleGroupControlContext.baseId || 'toggle-group-control-option-base');
const buttonProps = useContextSystem({
@@ -36028,7 +36584,7 @@
value,
children,
showTooltip = false,
- onFocus: onFocusProp,
+ disabled,
...otherButtonProps
} = buttonProps;
const isPressed = toggleGroupControlContext.value === value;
@@ -36040,7 +36596,6 @@
isPressed,
size
}), className), [cx, isDeselectable, isIcon, isPressed, size, className]);
- const backdropClasses = (0,external_wp_element_namespaceObject.useMemo)(() => cx(backdropView), [cx]);
const buttonOnClick = () => {
if (isDeselectable && isPressed) {
toggleGroupControlContext.setValue(undefined);
@@ -36054,14 +36609,21 @@
'data-value': value,
ref: forwardedRef
};
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(component_LabelView, {
+ const labelRef = (0,external_wp_element_namespaceObject.useRef)(null);
+ (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
+ if (isPressed && labelRef.current) {
+ toggleGroupControlContext.setSelectedElement(labelRef.current);
+ }
+ }, [isPressed, toggleGroupControlContext]);
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component_LabelView, {
+ ref: labelRef,
className: labelViewClasses,
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WithToolTip, {
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WithToolTip, {
showTooltip: showTooltip,
text: otherButtonProps['aria-label'],
children: isDeselectable ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("button", {
...commonProps,
- onFocus: onFocusProp,
+ disabled: disabled,
"aria-pressed": isPressed,
type: "button",
onClick: buttonOnClick,
@@ -36069,32 +36631,26 @@
children: children
})
}) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Radio, {
+ disabled: disabled,
+ onFocusVisible: () => {
+ const selectedValueIsEmpty = toggleGroupControlContext.value === null || toggleGroupControlContext.value === '';
+
+ // Conditions ensure that the first visible focus to a radio group
+ // without a selected option will not automatically select the option.
+ if (!selectedValueIsEmpty || toggleGroupControlContext.activeItemIsNotFirstItem?.()) {
+ toggleGroupControlContext.setValue(value);
+ }
+ },
render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("button", {
type: "button",
- ...commonProps,
- onFocus: event => {
- onFocusProp?.(event);
- if (event.defaultPrevented) {
- return;
- }
- toggleGroupControlContext.setValue(value);
- }
+ ...commonProps
}),
value: value,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component_ButtonContentView, {
children: children
})
})
- }), isPressed ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(motion.div, {
- layout: true,
- layoutRoot: true,
- children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(motion.div, {
- className: backdropClasses,
- transition: shouldReduceMotion ? REDUCED_MOTION_TRANSITION_CONFIG : undefined,
- role: "presentation",
- layoutId: LAYOUT_ID
- })
- }) : null]
+ })
});
}
@@ -36122,7 +36678,7 @@
const ConnectedToggleGroupControlOptionBase = contextConnect(ToggleGroupControlOptionBase, 'ToggleGroupControlOptionBase');
/* harmony default export */ const toggle_group_control_option_base_component = (ConnectedToggleGroupControlOptionBase);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option-icon/component.js
+;// ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option-icon/component.js
/**
* External dependencies
*/
@@ -36170,27 +36726,27 @@
* import { formatLowercase, formatUppercase } from '@wordpress/icons';
*
* function Example() {
- * return (
- * <ToggleGroupControl>
- * <ToggleGroupControlOptionIcon
- * value="uppercase"
- * label="Uppercase"
- * icon={ formatUppercase }
- * />
- * <ToggleGroupControlOptionIcon
- * value="lowercase"
- * label="Lowercase"
- * icon={ formatLowercase }
- * />
- * </ToggleGroupControl>
- * );
+ * return (
+ * <ToggleGroupControl __nextHasNoMarginBottom __next40pxDefaultSize>
+ * <ToggleGroupControlOptionIcon
+ * value="uppercase"
+ * label="Uppercase"
+ * icon={ formatUppercase }
+ * />
+ * <ToggleGroupControlOptionIcon
+ * value="lowercase"
+ * label="Lowercase"
+ * icon={ formatLowercase }
+ * />
+ * </ToggleGroupControl>
+ * );
* }
* ```
*/
const ToggleGroupControlOptionIcon = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleGroupControlOptionIcon);
/* harmony default export */ const toggle_group_control_option_icon_component = (ToggleGroupControlOptionIcon);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/border-control-style-picker/component.js
+;// ./node_modules/@wordpress/components/build-module/border-control/border-control-style-picker/component.js
/**
* WordPress dependencies
*/
@@ -36239,7 +36795,7 @@
const BorderControlStylePicker = contextConnect(UnconnectedBorderControlStylePicker, 'BorderControlStylePicker');
/* harmony default export */ const border_control_style_picker_component = (BorderControlStylePicker);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-indicator/index.js
+;// ./node_modules/@wordpress/components/build-module/color-indicator/index.js
/**
* External dependencies
*/
@@ -36283,25 +36839,24 @@
const ColorIndicator = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedColorIndicator);
/* harmony default export */ const color_indicator = (ColorIndicator);
-;// CONCATENATED MODULE: ./node_modules/colord/plugins/a11y.mjs
+;// ./node_modules/colord/plugins/a11y.mjs
var a11y_o=function(o){var t=o/255;return t<.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)},a11y_t=function(t){return.2126*a11y_o(t.r)+.7152*a11y_o(t.g)+.0722*a11y_o(t.b)};/* harmony default export */ function a11y(o){o.prototype.luminance=function(){return o=a11y_t(this.rgba),void 0===(r=2)&&(r=0),void 0===n&&(n=Math.pow(10,r)),Math.round(n*o)/n+0;var o,r,n},o.prototype.contrast=function(r){void 0===r&&(r="#FFF");var n,a,i,e,v,u,d,c=r instanceof o?r:new o(r);return e=this.rgba,v=c.toRgb(),u=a11y_t(e),d=a11y_t(v),n=u>d?(u+.05)/(d+.05):(d+.05)/(u+.05),void 0===(a=2)&&(a=0),void 0===i&&(i=Math.pow(10,a)),Math.floor(i*n)/i+0},o.prototype.isReadable=function(o,t){return void 0===o&&(o="#FFF"),void 0===t&&(t={}),this.contrast(o)>=(e=void 0===(i=(r=t).size)?"normal":i,"AAA"===(a=void 0===(n=r.level)?"AA":n)&&"normal"===e?7:"AA"===a&&"large"===e?3:4.5);var r,n,a,i,e}}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dropdown/index.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/dropdown/index.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -36432,21 +36987,21 @@
const Dropdown = contextConnect(UnconnectedDropdown, 'Dropdown');
/* harmony default export */ const dropdown = (Dropdown);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/input-suffix-wrapper.js
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
+;// ./node_modules/@wordpress/components/build-module/input-control/input-suffix-wrapper.js
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
function UnconnectedInputControlSuffixWrapper(props, forwardedRef) {
const derivedProps = useContextSystem(props, 'InputControlSuffixWrapper');
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, {
- marginBottom: 0,
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PrefixSuffixWrapper, {
...derivedProps,
ref: forwardedRef
});
@@ -36470,15 +37025,17 @@
const InputControlSuffixWrapper = contextConnect(UnconnectedInputControlSuffixWrapper, 'InputControlSuffixWrapper');
/* harmony default export */ const input_suffix_wrapper = (InputControlSuffixWrapper);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/select-control/styles/select-control-styles.js
-
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
+;// ./node_modules/@wordpress/components/build-module/select-control/styles/select-control-styles.js
+
+function select_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
@@ -36489,10 +37046,23 @@
if (!disabled) {
return '';
}
- return /*#__PURE__*/emotion_react_browser_esm_css({
- color: COLORS.ui.textDisabled
- }, true ? "" : 0, true ? "" : 0);
-};
+ return /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.ui.textDisabled, ";cursor:default;" + ( true ? "" : 0), true ? "" : 0);
+};
+var select_control_styles_ref2 = true ? {
+ name: "1lv1yo7",
+ styles: "display:inline-flex"
+} : 0;
+const inputBaseVariantStyles = ({
+ variant
+}) => {
+ if (variant === 'minimal') {
+ return select_control_styles_ref2;
+ }
+ return '';
+};
+const StyledInputBase = /*#__PURE__*/emotion_styled_base_browser_esm(input_base, true ? {
+ target: "e1mv6sxx3"
+} : 0)("color:", COLORS.theme.foreground, ";cursor:pointer;", select_control_styles_disabledStyles, " ", inputBaseVariantStyles, ";" + ( true ? "" : 0));
const select_control_styles_sizeStyles = ({
__next40pxDefaultSize,
multiple,
@@ -36542,10 +37112,10 @@
selectSize = 'default'
}) => {
const padding = {
- default: 16,
- small: 8,
- compact: 8,
- '__unstable-large': 16
+ default: config_values.controlPaddingX,
+ small: config_values.controlPaddingXSmall,
+ compact: config_values.controlPaddingXSmall,
+ '__unstable-large': config_values.controlPaddingX
};
if (!__next40pxDefaultSize) {
padding.default = padding.compact;
@@ -36567,23 +37137,35 @@
overflow: multiple ? 'auto' : 'hidden'
};
};
+var select_control_styles_ref = true ? {
+ name: "n1jncc",
+ styles: "field-sizing:content"
+} : 0;
+const variantStyles = ({
+ variant
+}) => {
+ if (variant === 'minimal') {
+ return select_control_styles_ref;
+ }
+ return '';
+};
// TODO: Resolve need to use &&& to increase specificity
// https://github.com/WordPress/gutenberg/issues/18483
const Select = /*#__PURE__*/emotion_styled_base_browser_esm("select", true ? {
target: "e1mv6sxx2"
-} : 0)("&&&{appearance:none;background:transparent;box-sizing:border-box;border:none;box-shadow:none!important;color:", COLORS.gray[900], ";display:block;font-family:inherit;margin:0;width:100%;max-width:none;cursor:pointer;white-space:nowrap;text-overflow:ellipsis;", select_control_styles_disabledStyles, ";", fontSizeStyles, ";", select_control_styles_sizeStyles, ";", sizePaddings, ";", overflowStyles, ";}" + ( true ? "" : 0));
+} : 0)("&&&{appearance:none;background:transparent;box-sizing:border-box;border:none;box-shadow:none!important;color:currentColor;cursor:inherit;display:block;font-family:inherit;margin:0;width:100%;max-width:none;white-space:nowrap;text-overflow:ellipsis;", fontSizeStyles, ";", select_control_styles_sizeStyles, ";", sizePaddings, ";", overflowStyles, " ", variantStyles, ";}" + ( true ? "" : 0));
const DownArrowWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
target: "e1mv6sxx1"
-} : 0)("margin-inline-end:", space(-1), ";line-height:0;" + ( true ? "" : 0));
+} : 0)("margin-inline-end:", space(-1), ";line-height:0;path{fill:currentColor;}" + ( true ? "" : 0));
const InputControlSuffixWrapperWithClickThrough = /*#__PURE__*/emotion_styled_base_browser_esm(input_suffix_wrapper, true ? {
target: "e1mv6sxx0"
} : 0)("position:absolute;pointer-events:none;", rtl({
right: 0
}), ";" + ( true ? "" : 0));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/icon/index.js
+;// ./node_modules/@wordpress/icons/build-module/icon/index.js
/**
* WordPress dependencies
*/
@@ -36595,7 +37177,7 @@
* Return an SVG icon.
*
* @param {IconProps} props icon is the SVG component to render
- * size is a number specifiying the icon size in pixels
+ * size is a number specifying the icon size in pixels
* Other props will be passed to wrapped SVG component
* @param {import('react').ForwardedRef<HTMLElement>} ref The forwarded ref to the SVG element.
*
@@ -36615,7 +37197,7 @@
}
/* harmony default export */ const icons_build_module_icon = ((0,external_wp_element_namespaceObject.forwardRef)(icon_Icon));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-down.js
+;// ./node_modules/@wordpress/icons/build-module/library/chevron-down.js
/**
* WordPress dependencies
*/
@@ -36630,7 +37212,7 @@
});
/* harmony default export */ const chevron_down = (chevronDown);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/select-control/chevron-down.js
+;// ./node_modules/@wordpress/components/build-module/select-control/chevron-down.js
/**
* WordPress dependencies
*/
@@ -36653,7 +37235,7 @@
};
/* harmony default export */ const select_control_chevron_down = (SelectControlChevronDown);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/select-control/index.js
+;// ./node_modules/@wordpress/components/build-module/select-control/index.js
/**
* External dependencies
*/
@@ -36679,6 +37261,23 @@
const id = `inspector-select-control-${instanceId}`;
return idProp || id;
}
+function SelectOptions({
+ options
+}) {
+ return options.map(({
+ id,
+ label,
+ value,
+ ...optionProps
+ }, index) => {
+ const key = id || `${label}-${value}-${index}`;
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("option", {
+ value: value,
+ ...optionProps,
+ children: label
+ }, key);
+ });
+}
function UnforwardedSelectControl(props, ref) {
const {
className,
@@ -36696,8 +37295,10 @@
children,
prefix,
suffix,
+ variant = 'default',
__next40pxDefaultSize = false,
__nextHasNoMarginBottom = false,
+ __shouldNotWarnDeprecated36pxSize,
...restProps
} = useDeprecated36pxDefaultSizeProp(props);
const id = select_control_useUniqueId(idProp);
@@ -36725,20 +37326,30 @@
});
};
const classes = dist_clsx('components-select-control', className);
+ maybeWarnDeprecated36pxSize({
+ componentName: 'SelectControl',
+ __next40pxDefaultSize,
+ size,
+ __shouldNotWarnDeprecated36pxSize
+ });
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, {
help: help,
id: id,
__nextHasNoMarginBottom: __nextHasNoMarginBottom,
- children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(input_base, {
+ __associatedWPComponentName: "SelectControl",
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledInputBase, {
className: classes,
disabled: disabled,
hideLabelFromVision: hideLabelFromVision,
id: id,
+ isBorderless: variant === 'minimal',
label: label,
size: size,
suffix: suffix || !multiple && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(select_control_chevron_down, {}),
prefix: prefix,
labelPosition: labelPosition,
+ __unstableInputWidth: variant === 'minimal' ? 'auto' : undefined,
+ variant: variant,
__next40pxDefaultSize: __next40pxDefaultSize,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Select, {
...restProps,
@@ -36752,14 +37363,9 @@
ref: ref,
selectSize: size,
value: valueProp,
- children: children || options.map((option, index) => {
- const key = option.id || `${option.label}-${option.value}-${index}`;
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("option", {
- value: option.value,
- disabled: option.disabled,
- hidden: option.hidden,
- children: option.label
- }, key);
+ variant: variant,
+ children: children || /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectOptions, {
+ options: options
})
})
})
@@ -36779,6 +37385,8 @@
*
* return (
* <SelectControl
+ * __next40pxDefaultSize
+ * __nextHasNoMarginBottom
* label="Size"
* value={ size }
* options={ [
@@ -36795,7 +37403,7 @@
const SelectControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSelectControl);
/* harmony default export */ const select_control = (SelectControl);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/hooks/use-controlled-state.js
+;// ./node_modules/@wordpress/components/build-module/utils/hooks/use-controlled-state.js
/**
* WordPress dependencies
*/
@@ -36846,7 +37454,7 @@
*
* @return {[T | "", (nextState: T) => void]} The controlled value and the value setter.
*/
-function use_controlled_state_useControlledState(currentState, options = defaultOptions) {
+function useControlledState(currentState, options = defaultOptions) {
const {
initial,
fallback
@@ -36878,9 +37486,9 @@
return [state, setState];
}
-/* harmony default export */ const use_controlled_state = (use_controlled_state_useControlledState);
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/utils.js
+/* harmony default export */ const use_controlled_state = (useControlledState);
+
+;// ./node_modules/@wordpress/components/build-module/range-control/utils.js
/**
* WordPress dependencies
*/
@@ -36937,7 +37545,7 @@
return [state, setState];
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/styles/range-control-styles.js
+;// ./node_modules/@wordpress/components/build-module/range-control/styles/range-control-styles.js
function range_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
@@ -36981,7 +37589,8 @@
}
return '';
};
-const range_control_styles_Wrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
+const range_control_styles_Wrapper = /*#__PURE__*/emotion_styled_base_browser_esm('div', true ? {
+ shouldForwardProp: prop => !['color', '__nextHasNoMarginBottom', 'marks'].includes(prop),
target: "e1epgpqk13"
} : 0)("display:block;flex:1;position:relative;width:100%;", wrapperColor, ";", rangeHeight, ";", wrapperMargin, ";" + ( true ? "" : 0));
const BeforeIconWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
@@ -37008,7 +37617,7 @@
};
const Rail = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
target: "e1epgpqk10"
-} : 0)("background-color:", COLORS.gray[300], ";left:0;pointer-events:none;right:0;display:block;height:", railHeight, "px;position:absolute;margin-top:", (rangeHeightValue - railHeight) / 2, "px;top:0;border-radius:", railHeight, "px;", railBackgroundColor, ";" + ( true ? "" : 0));
+} : 0)("background-color:", COLORS.gray[300], ";left:0;pointer-events:none;right:0;display:block;height:", railHeight, "px;position:absolute;margin-top:", (rangeHeightValue - railHeight) / 2, "px;top:0;border-radius:", config_values.radiusFull, ";", railBackgroundColor, ";" + ( true ? "" : 0));
const trackBackgroundColor = ({
disabled,
trackColor
@@ -37023,28 +37632,16 @@
};
const Track = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
target: "e1epgpqk9"
-} : 0)("background-color:currentColor;border-radius:", railHeight, "px;height:", railHeight, "px;pointer-events:none;display:block;position:absolute;margin-top:", (rangeHeightValue - railHeight) / 2, "px;top:0;", trackBackgroundColor, ";" + ( true ? "" : 0));
+} : 0)("background-color:currentColor;border-radius:", config_values.radiusFull, ";height:", railHeight, "px;pointer-events:none;display:block;position:absolute;margin-top:", (rangeHeightValue - railHeight) / 2, "px;top:0;.is-marked &{@media not ( prefers-reduced-motion ){transition:width ease 0.1s;}}", trackBackgroundColor, ";" + ( true ? "" : 0));
const MarksWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
target: "e1epgpqk8"
} : 0)( true ? {
- name: "l7tjj5",
- styles: "display:block;pointer-events:none;position:relative;width:100%;user-select:none"
+ name: "g5kg28",
+ styles: "display:block;pointer-events:none;position:relative;width:100%;user-select:none;margin-top:17px"
} : 0);
-const markFill = ({
- disabled,
- isFilled
-}) => {
- let backgroundColor = isFilled ? 'currentColor' : COLORS.gray[300];
- if (disabled) {
- backgroundColor = COLORS.gray[400];
- }
- return /*#__PURE__*/emotion_react_browser_esm_css({
- backgroundColor
- }, true ? "" : 0, true ? "" : 0);
-};
const Mark = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
target: "e1epgpqk7"
-} : 0)("height:", thumbSize, "px;left:0;position:absolute;top:-4px;width:1px;", markFill, ";" + ( true ? "" : 0));
+} : 0)("position:absolute;left:0;top:-4px;height:4px;width:2px;transform:translateX( -50% );background-color:", COLORS.ui.background, ";z-index:1;" + ( true ? "" : 0));
const markLabelFill = ({
isFilled
}) => {
@@ -37054,13 +37651,19 @@
};
const MarkLabel = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
target: "e1epgpqk6"
-} : 0)("color:", COLORS.gray[300], ";left:0;font-size:11px;position:absolute;top:12px;transform:translateX( -50% );white-space:nowrap;", markLabelFill, ";" + ( true ? "" : 0));
+} : 0)("color:", COLORS.gray[300], ";font-size:11px;position:absolute;top:8px;white-space:nowrap;", rtl({
+ left: 0
+}), ";", rtl({
+ transform: 'translateX( -50% )'
+}, {
+ transform: 'translateX( 50% )'
+}), ";", markLabelFill, ";" + ( true ? "" : 0));
const thumbColor = ({
disabled
}) => disabled ? /*#__PURE__*/emotion_react_browser_esm_css("background-color:", COLORS.gray[400], ";" + ( true ? "" : 0), true ? "" : 0) : /*#__PURE__*/emotion_react_browser_esm_css("background-color:", COLORS.theme.accent, ";" + ( true ? "" : 0), true ? "" : 0);
const ThumbWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
target: "e1epgpqk5"
-} : 0)("align-items:center;display:flex;height:", thumbSize, "px;justify-content:center;margin-top:", (rangeHeightValue - thumbSize) / 2, "px;outline:0;pointer-events:none;position:absolute;top:0;user-select:none;width:", thumbSize, "px;border-radius:50%;", thumbColor, ";", rtl({
+} : 0)("align-items:center;display:flex;height:", thumbSize, "px;justify-content:center;margin-top:", (rangeHeightValue - thumbSize) / 2, "px;outline:0;pointer-events:none;position:absolute;top:0;user-select:none;width:", thumbSize, "px;border-radius:", config_values.radiusRound, ";z-index:3;.is-marked &{@media not ( prefers-reduced-motion ){transition:left ease 0.1s;}}", thumbColor, ";", rtl({
marginLeft: -10
}), ";", rtl({
transform: 'translateX( 4.5px )'
@@ -37070,20 +37673,18 @@
const thumbFocus = ({
isFocused
}) => {
- return isFocused ? /*#__PURE__*/emotion_react_browser_esm_css("&::before{content:' ';position:absolute;background-color:", COLORS.theme.accent, ";opacity:0.4;border-radius:50%;height:", thumbSize + 8, "px;width:", thumbSize + 8, "px;top:-4px;left:-4px;}" + ( true ? "" : 0), true ? "" : 0) : '';
+ return isFocused ? /*#__PURE__*/emotion_react_browser_esm_css("&::before{content:' ';position:absolute;background-color:", COLORS.theme.accent, ";opacity:0.4;border-radius:", config_values.radiusRound, ";height:", thumbSize + 8, "px;width:", thumbSize + 8, "px;top:-4px;left:-4px;}" + ( true ? "" : 0), true ? "" : 0) : '';
};
const Thumb = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
target: "e1epgpqk4"
-} : 0)("align-items:center;border-radius:50%;height:100%;outline:0;position:absolute;user-select:none;width:100%;", thumbColor, ";", thumbFocus, ";" + ( true ? "" : 0));
+} : 0)("align-items:center;border-radius:", config_values.radiusRound, ";height:100%;outline:0;position:absolute;user-select:none;width:100%;box-shadow:", config_values.elevationXSmall, ";", thumbColor, ";", thumbFocus, ";" + ( true ? "" : 0));
const InputRange = /*#__PURE__*/emotion_styled_base_browser_esm("input", true ? {
target: "e1epgpqk3"
} : 0)("box-sizing:border-box;cursor:pointer;display:block;height:100%;left:0;margin:0 -", thumbSize / 2, "px;opacity:0;outline:none;position:absolute;right:0;top:0;width:calc( 100% + ", thumbSize, "px );" + ( true ? "" : 0));
const tooltipShow = ({
show
}) => {
- return /*#__PURE__*/emotion_react_browser_esm_css({
- opacity: show ? 1 : 0
- }, true ? "" : 0, true ? "" : 0);
+ return /*#__PURE__*/emotion_react_browser_esm_css("display:", show ? 'inline-block' : 'none', ";opacity:", show ? 1 : 0, ";@media not ( prefers-reduced-motion ){transition:opacity 120ms ease,display 120ms ease allow-discrete;}@starting-style{opacity:0;}" + ( true ? "" : 0), true ? "" : 0);
};
var range_control_styles_ref = true ? {
name: "1cypxip",
@@ -37104,7 +37705,7 @@
};
const range_control_styles_Tooltip = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
target: "e1epgpqk2"
-} : 0)("background:rgba( 0, 0, 0, 0.8 );border-radius:2px;color:white;display:inline-block;font-size:12px;min-width:32px;opacity:0;padding:4px 8px;pointer-events:none;position:absolute;text-align:center;user-select:none;line-height:1.4;@media not ( prefers-reduced-motion ){transition:opacity 120ms ease;}", tooltipShow, ";", tooltipPosition, ";", rtl({
+} : 0)("background:rgba( 0, 0, 0, 0.8 );border-radius:", config_values.radiusSmall, ";color:white;font-size:12px;min-width:32px;padding:4px 8px;pointer-events:none;position:absolute;text-align:center;user-select:none;line-height:1.4;", tooltipShow, ";", tooltipPosition, ";", rtl({
transform: 'translateX(-50%)'
}, {
transform: 'translateX(50%)'
@@ -37123,7 +37724,7 @@
marginLeft: 8
}), ";" + ( true ? "" : 0));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/input-range.js
+;// ./node_modules/@wordpress/components/build-module/range-control/input-range.js
/**
* WordPress dependencies
*/
@@ -37155,17 +37756,15 @@
const input_range_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(input_range_InputRange);
/* harmony default export */ const input_range = (input_range_ForwardedComponent);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/mark.js
-/**
- * External dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
-
+;// ./node_modules/@wordpress/components/build-module/range-control/mark.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
function RangeMark(props) {
@@ -37183,7 +37782,6 @@
...otherProps,
"aria-hidden": "true",
className: classes,
- isFilled: isFilled,
style: style
}), label && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MarkLabel, {
"aria-hidden": "true",
@@ -37195,17 +37793,15 @@
});
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/rail.js
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
-
+;// ./node_modules/@wordpress/components/build-module/range-control/rail.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
@@ -37301,7 +37897,7 @@
return placedMarks;
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/tooltip.js
+;// ./node_modules/@wordpress/components/build-module/range-control/tooltip.js
/**
* External dependencies
*/
@@ -37340,7 +37936,7 @@
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(range_control_styles_Tooltip, {
...restProps,
- "aria-hidden": show,
+ "aria-hidden": "false",
className: classes,
position: position,
show: show,
@@ -37371,7 +37967,7 @@
return position;
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/index.js
+;// ./node_modules/@wordpress/components/build-module/range-control/index.js
/**
* External dependencies
*/
@@ -37400,6 +37996,23 @@
const range_control_noop = () => {};
+
+/**
+ * Computes the value that `RangeControl` should reset to when pressing
+ * the reset button.
+ */
+function computeResetValue({
+ resetFallbackValue,
+ initialPosition
+}) {
+ if (resetFallbackValue !== undefined) {
+ return !Number.isNaN(resetFallbackValue) ? resetFallbackValue : null;
+ }
+ if (initialPosition !== undefined) {
+ return !Number.isNaN(initialPosition) ? initialPosition : null;
+ }
+ return null;
+}
function UnforwardedRangeControl(props, forwardedRef) {
const {
__nextHasNoMarginBottom = false,
@@ -37433,6 +38046,7 @@
trackColor,
value: valueProp,
withInputField = true,
+ __shouldNotWarnDeprecated36pxSize,
...otherProps
} = props;
const [value, setValue] = useControlledRangeValue({
@@ -37498,12 +38112,10 @@
}
};
const handleOnReset = () => {
- let resetValue = parseFloat(`${resetFallbackValue}`);
- let onChangeResetValue = resetValue;
- if (isNaN(resetValue)) {
- resetValue = null;
- onChangeResetValue = undefined;
- }
+ // Reset to `resetFallbackValue` if defined, otherwise set internal value
+ // to `null` — which, if propagated to the `value` prop, will cause
+ // the value to be reset to the `initialPosition` prop if defined.
+ const resetValue = Number.isNaN(resetFallbackValue) ? null : resetFallbackValue !== null && resetFallbackValue !== void 0 ? resetFallbackValue : null;
setValue(resetValue);
/**
@@ -37519,7 +38131,7 @@
* preserve the undefined callback argument, except when a
* resetFallbackValue is defined.
*/
- onChange(onChangeResetValue);
+ onChange(resetValue !== null && resetValue !== void 0 ? resetValue : undefined);
};
const handleShowTooltip = () => setShowTooltip(true);
const handleHideTooltip = () => setShowTooltip(false);
@@ -37536,8 +38148,17 @@
const offsetStyle = {
[(0,external_wp_i18n_namespaceObject.isRTL)() ? 'right' : 'left']: fillValueOffset
};
+
+ // Add default size deprecation warning.
+ maybeWarnDeprecated36pxSize({
+ componentName: 'RangeControl',
+ __next40pxDefaultSize,
+ size: undefined,
+ __shouldNotWarnDeprecated36pxSize
+ });
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, {
__nextHasNoMarginBottom: __nextHasNoMarginBottom,
+ __associatedWPComponentName: "RangeControl",
className: classes,
label: label,
hideLabelFromVision: hideLabelFromVision,
@@ -37627,11 +38248,22 @@
step: step
// @ts-expect-error TODO: Investigate if the `null` value is necessary
,
- value: inputSliderValue
+ value: inputSliderValue,
+ __shouldNotWarnDeprecated36pxSize: true
}), allowReset && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ActionRightWrapper, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
- className: "components-range-control__reset",
- disabled: disabled || value === undefined,
+ className: "components-range-control__reset"
+ // If the RangeControl itself is disabled, the reset button shouldn't be in the tab sequence.
+ ,
+ accessibleWhenDisabled: !disabled
+ // The reset button should be disabled if RangeControl itself is disabled,
+ // or if the current `value` is equal to the value that would be currently
+ // assigned when clicking the button.
+ ,
+ disabled: disabled || value === computeResetValue({
+ resetFallbackValue,
+ initialPosition
+ }),
variant: "secondary",
size: "small",
onClick: handleOnReset,
@@ -37653,6 +38285,8 @@
* const [ isChecked, setChecked ] = useState( true );
* return (
* <RangeControl
+ * __nextHasNoMarginBottom
+ * __next40pxDefaultSize
* help="Please select how transparent you would like this."
* initialPosition={50}
* label="Opacity"
@@ -37667,16 +38301,15 @@
const RangeControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedRangeControl);
/* harmony default export */ const range_control = (RangeControl);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/styles.js
-
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/color-picker/styles.js
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
@@ -37686,13 +38319,13 @@
const NumberControlWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? {
- target: "ez9hsf47"
+ target: "ez9hsf46"
} : 0)("width:", space(24), ";" + ( true ? "" : 0));
const styles_SelectControl = /*#__PURE__*/emotion_styled_base_browser_esm(select_control, true ? {
- target: "ez9hsf46"
-} : 0)("margin-left:", space(-2), ";width:5em;" + ( true ? "" : 0));
+ target: "ez9hsf45"
+} : 0)("margin-left:", space(-2), ";" + ( true ? "" : 0));
const styles_RangeControl = /*#__PURE__*/emotion_styled_base_browser_esm(range_control, true ? {
- target: "ez9hsf45"
+ target: "ez9hsf44"
} : 0)("flex:1;margin-right:", space(2), ";" + ( true ? "" : 0));
// Make the Hue circle picker not go out of the bar.
@@ -37702,22 +38335,19 @@
margin-left: ${space(1)};
}`;
const AuxiliaryColorArtefactWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
- target: "ez9hsf44"
+ target: "ez9hsf43"
} : 0)("padding-top:", space(2), ";padding-right:0;padding-left:0;padding-bottom:0;" + ( true ? "" : 0));
const AuxiliaryColorArtefactHStackHeader = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component, true ? {
- target: "ez9hsf43"
+ target: "ez9hsf42"
} : 0)("padding-left:", space(4), ";padding-right:", space(4), ";" + ( true ? "" : 0));
const ColorInputWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? {
- target: "ez9hsf42"
+ target: "ez9hsf41"
} : 0)("padding-top:", space(4), ";padding-left:", space(4), ";padding-right:", space(3), ";padding-bottom:", space(5), ";" + ( true ? "" : 0));
const ColorfulWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
- target: "ez9hsf41"
-} : 0)(boxSizingReset, ";width:216px;.react-colorful{display:flex;flex-direction:column;align-items:center;width:216px;height:auto;}.react-colorful__saturation{width:100%;border-radius:0;height:216px;margin-bottom:", space(4), ";border-bottom:none;}.react-colorful__hue,.react-colorful__alpha{width:184px;height:16px;border-radius:16px;margin-bottom:", space(2), ";}.react-colorful__pointer{height:16px;width:16px;border:none;box-shadow:0 0 2px 0 rgba( 0, 0, 0, 0.25 );outline:2px solid transparent;}.react-colorful__pointer-fill{box-shadow:inset 0 0 0 ", config_values.borderWidthFocus, " #fff;}", interactiveHueStyles, ";" + ( true ? "" : 0));
-const CopyButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? {
target: "ez9hsf40"
-} : 0)("&&&&&{min-width:", space(6), ";padding:0;>svg{margin-right:0;}}" + ( true ? "" : 0));
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/copy.js
+} : 0)(boxSizingReset, ";width:216px;.react-colorful{display:flex;flex-direction:column;align-items:center;width:216px;height:auto;}.react-colorful__saturation{width:100%;border-radius:0;height:216px;margin-bottom:", space(4), ";border-bottom:none;}.react-colorful__hue,.react-colorful__alpha{width:184px;height:16px;border-radius:", config_values.radiusFull, ";margin-bottom:", space(2), ";}.react-colorful__pointer{height:16px;width:16px;border:none;box-shadow:0 0 2px 0 rgba( 0, 0, 0, 0.25 );outline:2px solid transparent;}.react-colorful__pointer-fill{box-shadow:inset 0 0 0 ", config_values.borderWidthFocus, " #fff;}", interactiveHueStyles, ";" + ( true ? "" : 0));
+
+;// ./node_modules/@wordpress/icons/build-module/library/copy.js
/**
* WordPress dependencies
*/
@@ -37734,7 +38364,7 @@
});
/* harmony default export */ const library_copy = (copy_copy);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/color-copy-button.js
+;// ./node_modules/@wordpress/components/build-module/color-picker/color-copy-button.js
/**
* WordPress dependencies
*/
@@ -37755,7 +38385,7 @@
colorType
} = props;
const [copiedColor, setCopiedColor] = (0,external_wp_element_namespaceObject.useState)(null);
- const copyTimer = (0,external_wp_element_namespaceObject.useRef)();
+ const copyTimerRef = (0,external_wp_element_namespaceObject.useRef)();
const copyRef = (0,external_wp_compose_namespaceObject.useCopyToClipboard)(() => {
switch (colorType) {
case 'hsl':
@@ -37773,29 +38403,31 @@
}
}
}, () => {
- if (copyTimer.current) {
- clearTimeout(copyTimer.current);
+ if (copyTimerRef.current) {
+ clearTimeout(copyTimerRef.current);
}
setCopiedColor(color.toHex());
- copyTimer.current = setTimeout(() => {
+ copyTimerRef.current = setTimeout(() => {
setCopiedColor(null);
- copyTimer.current = undefined;
+ copyTimerRef.current = undefined;
}, 3000);
});
(0,external_wp_element_namespaceObject.useEffect)(() => {
- // Clear copyTimer on component unmount.
+ // Clear copyTimerRef on component unmount.
return () => {
- if (copyTimer.current) {
- clearTimeout(copyTimer.current);
+ if (copyTimerRef.current) {
+ clearTimeout(copyTimerRef.current);
}
};
}, []);
+ const label = copiedColor === color.toHex() ? (0,external_wp_i18n_namespaceObject.__)('Copied!') : (0,external_wp_i18n_namespaceObject.__)('Copy');
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, {
delay: 0,
hideOnClick: false,
- text: copiedColor === color.toHex() ? (0,external_wp_i18n_namespaceObject.__)('Copied!') : (0,external_wp_i18n_namespaceObject.__)('Copy'),
- children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CopyButton, {
- size: "small",
+ text: label,
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Button, {
+ size: "compact",
+ "aria-label": label,
ref: copyRef,
icon: library_copy,
showTooltip: false
@@ -37803,12 +38435,49 @@
});
};
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/input-with-slider.js
-/**
- * Internal dependencies
- */
-
-
+;// ./node_modules/@wordpress/components/build-module/input-control/input-prefix-wrapper.js
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+function UnconnectedInputControlPrefixWrapper(props, forwardedRef) {
+ const derivedProps = useContextSystem(props, 'InputControlPrefixWrapper');
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PrefixSuffixWrapper, {
+ ...derivedProps,
+ isPrefix: true,
+ ref: forwardedRef
+ });
+}
+
+/**
+ * A convenience wrapper for the `prefix` when you want to apply
+ * standard padding in accordance with the size variant.
+ *
+ * ```jsx
+ * import {
+ * __experimentalInputControl as InputControl,
+ * __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+ * } from '@wordpress/components';
+ *
+ * <InputControl
+ * prefix={<InputControlPrefixWrapper>@</InputControlPrefixWrapper>}
+ * />
+ * ```
+ */
+const InputControlPrefixWrapper = contextConnect(UnconnectedInputControlPrefixWrapper, 'InputControlPrefixWrapper');
+/* harmony default export */ const input_prefix_wrapper = (InputControlPrefixWrapper);
+
+;// ./node_modules/@wordpress/components/build-module/color-picker/input-with-slider.js
+/**
+ * Internal dependencies
+ */
@@ -37837,23 +38506,24 @@
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, {
spacing: 4,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NumberControlWrapper, {
+ __next40pxDefaultSize: true,
min: min,
max: max,
label: label,
hideLabelFromVision: true,
value: value,
onChange: onNumberControlChange,
- prefix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, {
- as: text_component,
- paddingLeft: space(4),
- color: COLORS.theme.accent,
- lineHeight: 1,
- children: abbreviation
+ prefix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(input_prefix_wrapper, {
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(text_component, {
+ color: COLORS.theme.accent,
+ lineHeight: 1,
+ children: abbreviation
+ })
}),
- spinControls: "none",
- size: "__unstable-large"
+ spinControls: "none"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_RangeControl, {
__nextHasNoMarginBottom: true,
+ __next40pxDefaultSize: true,
label: label,
hideLabelFromVision: true,
min: min,
@@ -37868,17 +38538,15 @@
});
};
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/rgb-input.js
-/**
- * External dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
-
+;// ./node_modules/@wordpress/components/build-module/color-picker/rgb-input.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
const RgbInput = ({
@@ -37945,22 +38613,20 @@
});
};
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/hsl-input.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
-
+;// ./node_modules/@wordpress/components/build-module/color-picker/hsl-input.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
const HslInput = ({
@@ -38052,21 +38718,20 @@
});
};
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/hex-input.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/color-picker/hex-input.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
@@ -38098,12 +38763,12 @@
};
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputControl, {
- prefix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, {
- as: text_component,
- marginLeft: space(4),
- color: COLORS.theme.accent,
- lineHeight: 1,
- children: "#"
+ prefix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(input_prefix_wrapper, {
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(text_component, {
+ color: COLORS.theme.accent,
+ lineHeight: 1,
+ children: "#"
+ })
}),
value: color.toHex().slice(1).toUpperCase(),
onChange: handleChange,
@@ -38116,7 +38781,7 @@
});
};
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/color-input.js
+;// ./node_modules/@wordpress/components/build-module/color-picker/color-input.js
/**
* Internal dependencies
*/
@@ -38152,11 +38817,11 @@
}
};
-;// CONCATENATED MODULE: ./node_modules/react-colorful/dist/index.mjs
+;// ./node_modules/react-colorful/dist/index.mjs
function dist_u(){return(dist_u=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}function dist_c(e,r){if(null==e)return{};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r.indexOf(t=a[n])>=0||(o[t]=e[t]);return o}function dist_i(e){var t=(0,external_React_.useRef)(e),n=(0,external_React_.useRef)(function(e){t.current&&t.current(e)});return t.current=e,n.current}var dist_s=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=1),e>t?t:e<r?r:e},dist_f=function(e){return"touches"in e},dist_v=function(e){return e&&e.ownerDocument.defaultView||self},dist_d=function(e,r,t){var n=e.getBoundingClientRect(),o=dist_f(r)?function(e,r){for(var t=0;t<e.length;t++)if(e[t].identifier===r)return e[t];return e[0]}(r.touches,t):r;return{left:dist_s((o.pageX-(n.left+dist_v(e).pageXOffset))/n.width),top:dist_s((o.pageY-(n.top+dist_v(e).pageYOffset))/n.height)}},dist_h=function(e){!dist_f(e)&&e.preventDefault()},dist_m=external_React_.memo(function(o){var a=o.onMove,l=o.onKey,s=dist_c(o,["onMove","onKey"]),m=(0,external_React_.useRef)(null),g=dist_i(a),p=dist_i(l),b=(0,external_React_.useRef)(null),_=(0,external_React_.useRef)(!1),x=(0,external_React_.useMemo)(function(){var e=function(e){dist_h(e),(dist_f(e)?e.touches.length>0:e.buttons>0)&&m.current?g(dist_d(m.current,e,b.current)):t(!1)},r=function(){return t(!1)};function t(t){var n=_.current,o=dist_v(m.current),a=t?o.addEventListener:o.removeEventListener;a(n?"touchmove":"mousemove",e),a(n?"touchend":"mouseup",r)}return[function(e){var r=e.nativeEvent,n=m.current;if(n&&(dist_h(r),!function(e,r){return r&&!dist_f(e)}(r,_.current)&&n)){if(dist_f(r)){_.current=!0;var o=r.changedTouches||[];o.length&&(b.current=o[0].identifier)}n.focus(),g(dist_d(n,r,b.current)),t(!0)}},function(e){var r=e.which||e.keyCode;r<37||r>40||(e.preventDefault(),p({left:39===r?.05:37===r?-.05:0,top:40===r?.05:38===r?-.05:0}))},t]},[p,g]),C=x[0],E=x[1],H=x[2];return (0,external_React_.useEffect)(function(){return H},[H]),external_React_.createElement("div",dist_u({},s,{onTouchStart:C,onMouseDown:C,className:"react-colorful__interactive",ref:m,onKeyDown:E,tabIndex:0,role:"slider"}))}),dist_g=function(e){return e.filter(Boolean).join(" ")},dist_p=function(r){var t=r.color,n=r.left,o=r.top,a=void 0===o?.5:o,l=dist_g(["react-colorful__pointer",r.className]);return external_React_.createElement("div",{className:l,style:{top:100*a+"%",left:100*n+"%"}},external_React_.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},dist_b=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=Math.pow(10,r)),Math.round(t*e)/t},_={grad:.9,turn:360,rad:360/(2*Math.PI)},dist_x=function(e){return L(C(e))},C=function(e){return"#"===e[0]&&(e=e.substring(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:4===e.length?dist_b(parseInt(e[3]+e[3],16)/255,2):1}:{r:parseInt(e.substring(0,2),16),g:parseInt(e.substring(2,4),16),b:parseInt(e.substring(4,6),16),a:8===e.length?dist_b(parseInt(e.substring(6,8),16)/255,2):1}},dist_E=function(e,r){return void 0===r&&(r="deg"),Number(e)*(_[r]||1)},dist_H=function(e){var r=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?dist_N({h:dist_E(r[1],r[2]),s:Number(r[3]),l:Number(r[4]),a:void 0===r[5]?1:Number(r[5])/(r[6]?100:1)}):{h:0,s:0,v:0,a:1}},dist_M=dist_H,dist_N=function(e){var r=e.s,t=e.l;return{h:e.h,s:(r*=(t<50?t:100-t)/100)>0?2*r/(t+r)*100:0,v:t+r,a:e.a}},dist_w=function(e){return K(dist_I(e))},dist_y=function(e){var r=e.s,t=e.v,n=e.a,o=(200-r)*t/100;return{h:dist_b(e.h),s:dist_b(o>0&&o<200?r*t/100/(o<=100?o:200-o)*100:0),l:dist_b(o/2),a:dist_b(n,2)}},q=function(e){var r=dist_y(e);return"hsl("+r.h+", "+r.s+"%, "+r.l+"%)"},dist_k=function(e){var r=dist_y(e);return"hsla("+r.h+", "+r.s+"%, "+r.l+"%, "+r.a+")"},dist_I=function(e){var r=e.h,t=e.s,n=e.v,o=e.a;r=r/360*6,t/=100,n/=100;var a=Math.floor(r),l=n*(1-t),u=n*(1-(r-a)*t),c=n*(1-(1-r+a)*t),i=a%6;return{r:dist_b(255*[n,u,l,l,c,n][i]),g:dist_b(255*[c,n,n,u,l,l][i]),b:dist_b(255*[l,l,c,n,n,u][i]),a:dist_b(o,2)}},O=function(e){var r=/hsva?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?A({h:dist_E(r[1],r[2]),s:Number(r[3]),v:Number(r[4]),a:void 0===r[5]?1:Number(r[5])/(r[6]?100:1)}):{h:0,s:0,v:0,a:1}},dist_j=O,z=function(e){var r=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?L({r:Number(r[1])/(r[2]?100/255:1),g:Number(r[3])/(r[4]?100/255:1),b:Number(r[5])/(r[6]?100/255:1),a:void 0===r[7]?1:Number(r[7])/(r[8]?100:1)}):{h:0,s:0,v:0,a:1}},B=z,D=function(e){var r=e.toString(16);return r.length<2?"0"+r:r},K=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=o<1?D(dist_b(255*o)):"";return"#"+D(r)+D(t)+D(n)+a},L=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=Math.max(r,t,n),l=a-Math.min(r,t,n),u=l?a===r?(t-n)/l:a===t?2+(n-r)/l:4+(r-t)/l:0;return{h:dist_b(60*(u<0?u+6:u)),s:dist_b(a?l/a*100:0),v:dist_b(a/255*100),a:o}},A=function(e){return{h:dist_b(e.h),s:dist_b(e.s),v:dist_b(e.v),a:dist_b(e.a,2)}},dist_S=external_React_.memo(function(r){var t=r.hue,n=r.onChange,o=dist_g(["react-colorful__hue",r.className]);return external_React_.createElement("div",{className:o},external_React_.createElement(dist_m,{onMove:function(e){n({h:360*e.left})},onKey:function(e){n({h:dist_s(t+360*e.left,0,360)})},"aria-label":"Hue","aria-valuenow":dist_b(t),"aria-valuemax":"360","aria-valuemin":"0"},external_React_.createElement(dist_p,{className:"react-colorful__hue-pointer",left:t/360,color:q({h:t,s:100,v:100,a:1})})))}),T=external_React_.memo(function(r){var t=r.hsva,n=r.onChange,o={backgroundColor:q({h:t.h,s:100,v:100,a:1})};return external_React_.createElement("div",{className:"react-colorful__saturation",style:o},external_React_.createElement(dist_m,{onMove:function(e){n({s:100*e.left,v:100-100*e.top})},onKey:function(e){n({s:dist_s(t.s+100*e.left,0,100),v:dist_s(t.v-100*e.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+dist_b(t.s)+"%, Brightness "+dist_b(t.v)+"%"},external_React_.createElement(dist_p,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:q(t)})))}),F=function(e,r){if(e===r)return!0;for(var t in e)if(e[t]!==r[t])return!1;return!0},P=function(e,r){return e.replace(/\s/g,"")===r.replace(/\s/g,"")},X=function(e,r){return e.toLowerCase()===r.toLowerCase()||F(C(e),C(r))};function Y(e,t,l){var u=dist_i(l),c=(0,external_React_.useState)(function(){return e.toHsva(t)}),s=c[0],f=c[1],v=(0,external_React_.useRef)({color:t,hsva:s});(0,external_React_.useEffect)(function(){if(!e.equal(t,v.current.color)){var r=e.toHsva(t);v.current={hsva:r,color:t},f(r)}},[t,e]),(0,external_React_.useEffect)(function(){var r;F(s,v.current.hsva)||e.equal(r=e.fromHsva(s),v.current.color)||(v.current={hsva:s,color:r},u(r))},[s,e,u]);var d=(0,external_React_.useCallback)(function(e){f(function(r){return Object.assign({},r,e)})},[]);return[s,d]}var R,dist_V="undefined"!=typeof window?external_React_.useLayoutEffect:external_React_.useEffect,dist_$=function(){return R||( true?__webpack_require__.nc:0)},G=function(e){R=e},J=new Map,Q=function(e){dist_V(function(){var r=e.current?e.current.ownerDocument:document;if(void 0!==r&&!J.has(r)){var t=r.createElement("style");t.innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}',J.set(r,t);var n=dist_$();n&&t.setAttribute("nonce",n),r.head.appendChild(t)}},[])},U=function(t){var n=t.className,o=t.colorModel,a=t.color,l=void 0===a?o.defaultColor:a,i=t.onChange,s=dist_c(t,["className","colorModel","color","onChange"]),f=(0,external_React_.useRef)(null);Q(f);var v=Y(o,l,i),d=v[0],h=v[1],m=dist_g(["react-colorful",n]);return external_React_.createElement("div",dist_u({},s,{ref:f,className:m}),external_React_.createElement(T,{hsva:d,onChange:h}),external_React_.createElement(dist_S,{hue:d.h,onChange:h,className:"react-colorful__last-control"}))},W={defaultColor:"000",toHsva:dist_x,fromHsva:function(e){return dist_w({h:e.h,s:e.s,v:e.v,a:1})},equal:X},Z=function(r){return e.createElement(U,dist_u({},r,{colorModel:W}))},ee=function(r){var t=r.className,n=r.hsva,o=r.onChange,a={backgroundImage:"linear-gradient(90deg, "+dist_k(Object.assign({},n,{a:0}))+", "+dist_k(Object.assign({},n,{a:1}))+")"},l=dist_g(["react-colorful__alpha",t]),u=dist_b(100*n.a);return external_React_.createElement("div",{className:l},external_React_.createElement("div",{className:"react-colorful__alpha-gradient",style:a}),external_React_.createElement(dist_m,{onMove:function(e){o({a:e.left})},onKey:function(e){o({a:dist_s(n.a+e.left)})},"aria-label":"Alpha","aria-valuetext":u+"%","aria-valuenow":u,"aria-valuemin":"0","aria-valuemax":"100"},external_React_.createElement(dist_p,{className:"react-colorful__alpha-pointer",left:n.a,color:dist_k(n)})))},re=function(t){var n=t.className,o=t.colorModel,a=t.color,l=void 0===a?o.defaultColor:a,i=t.onChange,s=dist_c(t,["className","colorModel","color","onChange"]),f=(0,external_React_.useRef)(null);Q(f);var v=Y(o,l,i),d=v[0],h=v[1],m=dist_g(["react-colorful",n]);return external_React_.createElement("div",dist_u({},s,{ref:f,className:m}),external_React_.createElement(T,{hsva:d,onChange:h}),external_React_.createElement(dist_S,{hue:d.h,onChange:h}),external_React_.createElement(ee,{hsva:d,onChange:h,className:"react-colorful__last-control"}))},te={defaultColor:"0001",toHsva:dist_x,fromHsva:dist_w,equal:X},ne=function(r){return e.createElement(re,dist_u({},r,{colorModel:te}))},oe={defaultColor:{h:0,s:0,l:0,a:1},toHsva:dist_N,fromHsva:dist_y,equal:F},ae=function(r){return e.createElement(re,dist_u({},r,{colorModel:oe}))},le={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:dist_H,fromHsva:dist_k,equal:P},ue=function(r){return e.createElement(re,dist_u({},r,{colorModel:le}))},ce={defaultColor:{h:0,s:0,l:0},toHsva:function(e){return dist_N({h:e.h,s:e.s,l:e.l,a:1})},fromHsva:function(e){return{h:(r=dist_y(e)).h,s:r.s,l:r.l};var r},equal:F},ie=function(r){return e.createElement(U,dist_u({},r,{colorModel:ce}))},se={defaultColor:"hsl(0, 0%, 0%)",toHsva:dist_M,fromHsva:q,equal:P},fe=function(r){return e.createElement(U,dist_u({},r,{colorModel:se}))},ve={defaultColor:{h:0,s:0,v:0,a:1},toHsva:function(e){return e},fromHsva:A,equal:F},de=function(r){return e.createElement(re,dist_u({},r,{colorModel:ve}))},he={defaultColor:"hsva(0, 0%, 0%, 1)",toHsva:O,fromHsva:function(e){var r=A(e);return"hsva("+r.h+", "+r.s+"%, "+r.v+"%, "+r.a+")"},equal:P},me=function(r){return e.createElement(re,dist_u({},r,{colorModel:he}))},ge={defaultColor:{h:0,s:0,v:0},toHsva:function(e){return{h:e.h,s:e.s,v:e.v,a:1}},fromHsva:function(e){var r=A(e);return{h:r.h,s:r.s,v:r.v}},equal:F},pe=function(r){return e.createElement(U,dist_u({},r,{colorModel:ge}))},be={defaultColor:"hsv(0, 0%, 0%)",toHsva:dist_j,fromHsva:function(e){var r=A(e);return"hsv("+r.h+", "+r.s+"%, "+r.v+"%)"},equal:P},_e=function(r){return e.createElement(U,dist_u({},r,{colorModel:be}))},xe={defaultColor:{r:0,g:0,b:0,a:1},toHsva:L,fromHsva:dist_I,equal:F},Ce=function(r){return e.createElement(re,dist_u({},r,{colorModel:xe}))},Ee={defaultColor:"rgba(0, 0, 0, 1)",toHsva:z,fromHsva:function(e){var r=dist_I(e);return"rgba("+r.r+", "+r.g+", "+r.b+", "+r.a+")"},equal:P},He=function(r){return external_React_.createElement(re,dist_u({},r,{colorModel:Ee}))},Me={defaultColor:{r:0,g:0,b:0},toHsva:function(e){return L({r:e.r,g:e.g,b:e.b,a:1})},fromHsva:function(e){return{r:(r=dist_I(e)).r,g:r.g,b:r.b};var r},equal:F},Ne=function(r){return e.createElement(U,dist_u({},r,{colorModel:Me}))},we={defaultColor:"rgb(0, 0, 0)",toHsva:B,fromHsva:function(e){var r=dist_I(e);return"rgb("+r.r+", "+r.g+", "+r.b+")"},equal:P},ye=function(r){return external_React_.createElement(U,dist_u({},r,{colorModel:we}))},qe=/^#?([0-9A-F]{3,8})$/i,ke=function(r){var t=r.color,l=void 0===t?"":t,s=r.onChange,f=r.onBlur,v=r.escape,d=r.validate,h=r.format,m=r.process,g=dist_c(r,["color","onChange","onBlur","escape","validate","format","process"]),p=o(function(){return v(l)}),b=p[0],_=p[1],x=dist_i(s),C=dist_i(f),E=a(function(e){var r=v(e.target.value);_(r),d(r)&&x(m?m(r):r)},[v,m,d,x]),H=a(function(e){d(e.target.value)||_(v(l)),C(e)},[l,v,d,C]);return n(function(){_(v(l))},[l,v]),e.createElement("input",dist_u({},g,{value:h?h(b):b,spellCheck:"false",onChange:E,onBlur:H}))},Ie=function(e){return"#"+e},Oe=function(r){var t=r.prefixed,n=r.alpha,o=dist_c(r,["prefixed","alpha"]),l=a(function(e){return e.replace(/([^0-9A-F]+)/gi,"").substring(0,n?8:6)},[n]),i=a(function(e){return function(e,r){var t=qe.exec(e),n=t?t[1].length:0;return 3===n||6===n||!!r&&4===n||!!r&&8===n}(e,n)},[n]);return e.createElement(ke,dist_u({},o,{escape:l,format:t?Ie:void 0,process:Ie,validate:i}))};
//# sourceMappingURL=index.module.js.map
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/picker.js
+;// ./node_modules/@wordpress/components/build-module/color-picker/picker.js
/**
* External dependencies
*/
@@ -38203,25 +38868,24 @@
});
};
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/component.js
-/**
- * External dependencies
- */
-
-
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/color-picker/component.js
+/**
+ * External dependencies
+ */
+
+
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -38240,13 +38904,6 @@
label: 'Hex',
value: 'hex'
}];
-
-// `isBorderless` is still experimental and not a public prop for InputControl yet.
-const BORDERLESS_SELECT_CONTROL_CONTEXT = {
- InputBase: {
- isBorderless: true
- }
-};
const UnconnectedColorPicker = (props, forwardedRef) => {
const {
enableAlpha = false,
@@ -38281,16 +38938,15 @@
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(AuxiliaryColorArtefactWrapper, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(AuxiliaryColorArtefactHStackHeader, {
justify: "space-between",
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ContextSystemProvider, {
- value: BORDERLESS_SELECT_CONTROL_CONTEXT,
- children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_SelectControl, {
- __nextHasNoMarginBottom: true,
- options: options,
- value: colorType,
- onChange: nextColorType => setColorType(nextColorType),
- label: (0,external_wp_i18n_namespaceObject.__)('Color format'),
- hideLabelFromVision: true
- })
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_SelectControl, {
+ __nextHasNoMarginBottom: true,
+ size: "compact",
+ options: options,
+ value: colorType,
+ onChange: nextColorType => setColorType(nextColorType),
+ label: (0,external_wp_i18n_namespaceObject.__)('Color format'),
+ hideLabelFromVision: true,
+ variant: "minimal"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorCopyButton, {
color: safeColordColor,
colorType: copyFormat || colorType
@@ -38311,7 +38967,7 @@
const ColorPicker = contextConnect(UnconnectedColorPicker, 'ColorPicker');
/* harmony default export */ const color_picker_component = (ColorPicker);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/use-deprecated-props.js
+;// ./node_modules/@wordpress/components/build-module/color-picker/use-deprecated-props.js
/**
* External dependencies
*/
@@ -38379,7 +39035,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/legacy-adapter.js
+;// ./node_modules/@wordpress/components/build-module/color-picker/legacy-adapter.js
/**
* Internal dependencies
*/
@@ -38392,7 +39048,7 @@
});
};
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker-context.js
+;// ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker-context.js
/**
* WordPress dependencies
*/
@@ -38404,7 +39060,7 @@
const CircularOptionPickerContext = (0,external_wp_element_namespaceObject.createContext)({});
-;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/check.js
+;// ./node_modules/@wordpress/icons/build-module/library/check.js
/**
* WordPress dependencies
*/
@@ -38419,23 +39075,21 @@
});
/* harmony default export */ const library_check = (check);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker-option.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-/**
- * Internal dependencies
- */
-
-
+;// ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker-option.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -38443,12 +39097,14 @@
function UnforwardedOptionAsButton(props, forwardedRef) {
const {
isPressed,
+ label,
...additionalProps
} = props;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
...additionalProps,
"aria-pressed": isPressed,
- ref: forwardedRef
+ ref: forwardedRef,
+ label: label
});
}
const OptionAsButton = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedOptionAsButton);
@@ -38456,21 +39112,29 @@
const {
id,
isSelected,
- compositeStore,
+ label,
...additionalProps
} = props;
- const activeId = compositeStore.useState('activeId');
- if (isSelected && !activeId) {
- compositeStore.setActiveId(id);
- }
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CompositeItem, {
+ const {
+ setActiveId,
+ activeId
+ } = (0,external_wp_element_namespaceObject.useContext)(CircularOptionPickerContext);
+ (0,external_wp_element_namespaceObject.useEffect)(() => {
+ if (isSelected && !activeId) {
+ // The setTimeout call is necessary to make sure that this update
+ // doesn't get overridden by `Composite`'s internal logic, which picks
+ // an initial active item if one is not specifically set.
+ window.setTimeout(() => setActiveId?.(id), 0);
+ }
+ }, [isSelected, setActiveId, activeId, id]);
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Composite.Item, {
render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
...additionalProps,
role: "option",
"aria-selected": !!isSelected,
- ref: forwardedRef
+ ref: forwardedRef,
+ label: label
}),
- store: compositeStore,
id: id
});
}
@@ -38484,35 +39148,35 @@
}) {
const {
baseId,
- compositeStore
+ setActiveId
} = (0,external_wp_element_namespaceObject.useContext)(CircularOptionPickerContext);
const id = (0,external_wp_compose_namespaceObject.useInstanceId)(Option, baseId || 'components-circular-option-picker__option');
const commonProps = {
id,
className: 'components-circular-option-picker__option',
+ __next40pxDefaultSize: true,
...additionalProps
};
- const optionControl = compositeStore ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(OptionAsOption, {
+ const isListbox = setActiveId !== undefined;
+ const optionControl = isListbox ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(OptionAsOption, {
...commonProps,
- compositeStore: compositeStore,
+ label: tooltipText,
isSelected: isSelected
}) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(OptionAsButton, {
...commonProps,
+ label: tooltipText,
isPressed: isSelected
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: dist_clsx(className, 'components-circular-option-picker__option-wrapper'),
- children: [tooltipText ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, {
- text: tooltipText,
- children: optionControl
- }) : optionControl, isSelected && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, {
+ children: [optionControl, isSelected && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, {
icon: library_check,
...selectedIconProps
})]
});
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker-option-group.js
+;// ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker-option-group.js
/**
* External dependencies
*/
@@ -38536,7 +39200,7 @@
});
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker-actions.js
+;// ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker-actions.js
/**
* External dependencies
*/
@@ -38576,6 +39240,7 @@
...additionalProps
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
+ __next40pxDefaultSize: true,
className: dist_clsx('components-circular-option-picker__clear', className),
variant: "tertiary",
...additionalProps,
@@ -38583,15 +39248,16 @@
});
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
+;// ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
@@ -38628,7 +39294,6 @@
* style={ { backgroundColor: color, color } }
* isSelected={ index === currentColor }
* onClick={ () => setCurrentColor( index ) }
- * aria-label={ name }
* />
* );
* } ) }
@@ -38650,7 +39315,6 @@
* ```
*/
-
function ListboxCircularOptionPicker(props) {
const {
actions,
@@ -38661,23 +39325,24 @@
children,
...additionalProps
} = props;
- const compositeStore = useCompositeStore({
- focusLoop: loop,
- rtl: (0,external_wp_i18n_namespaceObject.isRTL)()
- });
- const compositeContext = {
+ const [activeId, setActiveId] = (0,external_wp_element_namespaceObject.useState)(undefined);
+ const contextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
baseId,
- compositeStore
- };
+ activeId,
+ setActiveId
+ }), [baseId, activeId, setActiveId]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: className,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(CircularOptionPickerContext.Provider, {
- value: compositeContext,
+ value: contextValue,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Composite, {
...additionalProps,
id: baseId,
- store: compositeStore,
+ focusLoop: loop,
+ rtl: (0,external_wp_i18n_namespaceObject.isRTL)(),
role: "listbox",
+ activeId: activeId,
+ setActiveId: setActiveId,
children: options
}), children, actions]
})
@@ -38691,13 +39356,15 @@
baseId,
...additionalProps
} = props;
+ const contextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
+ baseId
+ }), [baseId]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
...additionalProps,
+ role: "group",
id: baseId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(CircularOptionPickerContext.Provider, {
- value: {
- baseId
- },
+ value: contextValue,
children: [options, children, actions]
})
});
@@ -38736,17 +39403,44 @@
CircularOptionPicker.DropdownLinkAction = DropdownLinkAction;
/* harmony default export */ const circular_option_picker = (CircularOptionPicker);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/circular-option-picker/index.js
-/**
- * Internal dependencies
- */
+;// ./node_modules/@wordpress/components/build-module/circular-option-picker/index.js
+/**
+ * Internal dependencies
+ */
+
/* harmony default export */ const build_module_circular_option_picker = (circular_option_picker);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/v-stack/hook.js
+;// ./node_modules/@wordpress/components/build-module/circular-option-picker/utils.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Computes the common props for the CircularOptionPicker.
+ */
+function getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby) {
+ const metaProps = asButtons ? {
+ asButtons: true
+ } : {
+ asButtons: false,
+ loop
+ };
+ const labelProps = {
+ 'aria-labelledby': ariaLabelledby,
+ 'aria-label': ariaLabelledby ? undefined : ariaLabel || (0,external_wp_i18n_namespaceObject.__)('Custom color picker')
+ };
+ return {
+ metaProps,
+ labelProps
+ };
+}
+
+;// ./node_modules/@wordpress/components/build-module/v-stack/hook.js
/**
* Internal dependencies
*/
@@ -38768,7 +39462,7 @@
return hStackProps;
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/v-stack/component.js
+;// ./node_modules/@wordpress/components/build-module/v-stack/component.js
/**
* External dependencies
*/
@@ -38815,7 +39509,7 @@
const VStack = contextConnect(UnconnectedVStack, 'VStack');
/* harmony default export */ const v_stack_component = (VStack);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/truncate/component.js
+;// ./node_modules/@wordpress/components/build-module/truncate/component.js
/**
* External dependencies
*/
@@ -38860,7 +39554,7 @@
const component_Truncate = contextConnect(UnconnectedTruncate, 'Truncate');
/* harmony default export */ const truncate_component = (component_Truncate);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/heading/hook.js
+;// ./node_modules/@wordpress/components/build-module/heading/hook.js
/**
* Internal dependencies
*/
@@ -38873,7 +39567,7 @@
const {
as: asProp,
level = 2,
- color = COLORS.gray[900],
+ color = COLORS.theme.foreground,
isBlock = true,
weight = config_values.fontWeightHeading,
...otherProps
@@ -38899,7 +39593,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/heading/component.js
+;// ./node_modules/@wordpress/components/build-module/heading/component.js
/**
* External dependencies
*/
@@ -38934,7 +39628,7 @@
const Heading = contextConnect(UnconnectedHeading, 'Heading');
/* harmony default export */ const heading_component = (Heading);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-palette/styles.js
+;// ./node_modules/@wordpress/components/build-module/color-palette/styles.js
function color_palette_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
@@ -38952,7 +39646,7 @@
styles: "text-transform:uppercase;line-height:24px;font-weight:500;&&&{font-size:11px;margin-bottom:0;}"
} : 0);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dropdown/styles.js
+;// ./node_modules/@wordpress/components/build-module/dropdown/styles.js
/**
* External dependencies
@@ -38978,7 +39672,7 @@
target: "eovvns30"
} : 0)("margin-left:", space(-2), ";margin-right:", space(-2), ";&:first-of-type{margin-top:", space(-2), ";}&:last-of-type{margin-bottom:", space(-2), ";}", padding, ";" + ( true ? "" : 0));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dropdown/dropdown-content-wrapper.js
+;// ./node_modules/@wordpress/components/build-module/dropdown/dropdown-content-wrapper.js
/**
* External dependencies
*/
@@ -39024,7 +39718,7 @@
const DropdownContentWrapper = contextConnect(UnconnectedDropdownContentWrapper, 'DropdownContentWrapper');
/* harmony default export */ const dropdown_content_wrapper = (DropdownContentWrapper);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-palette/utils.js
+;// ./node_modules/@wordpress/components/build-module/color-palette/utils.js
/**
* External dependencies
*/
@@ -39042,12 +39736,24 @@
*/
k([names, a11y]);
+
+/**
+ * Checks if a color value is a simple CSS color.
+ *
+ * @param value The color value to check.
+ * @return A boolean indicating whether the color value is a simple CSS color.
+ */
+const isSimpleCSSColor = value => {
+ const valueIsCssVariable = /var\(/.test(value !== null && value !== void 0 ? value : '');
+ const valueIsColorMix = /color-mix\(/.test(value !== null && value !== void 0 ? value : '');
+ return !valueIsCssVariable && !valueIsColorMix;
+};
const extractColorNameFromCurrentValue = (currentValue, colors = [], showMultiplePalettes = false) => {
if (!currentValue) {
return '';
}
- const currentValueIsCssVariable = /^var\(/.test(currentValue);
- const normalizedCurrentValue = currentValueIsCssVariable ? currentValue : w(currentValue).toHex();
+ const currentValueIsSimpleColor = currentValue ? isSimpleCSSColor(currentValue) : false;
+ const normalizedCurrentValue = currentValueIsSimpleColor ? w(currentValue).toHex() : currentValue;
// Normalize format of `colors` to simplify the following loop
@@ -39061,7 +39767,7 @@
name: colorName,
color: colorValue
} of paletteColors) {
- const normalizedColorValue = currentValueIsCssVariable ? colorValue : w(colorValue).toHex();
+ const normalizedColorValue = currentValueIsSimpleColor ? w(colorValue).toHex() : colorValue;
if (normalizedCurrentValue === normalizedColorValue) {
return colorName;
}
@@ -39087,8 +39793,7 @@
* @return The background color value computed from a element.
*/
const normalizeColorValue = (value, element) => {
- const currentValueIsCssVariable = /^var\(/.test(value !== null && value !== void 0 ? value : '');
- if (!currentValueIsCssVariable || element === null) {
+ if (!value || !element || isSimpleCSSColor(value)) {
return value;
}
const {
@@ -39101,27 +39806,26 @@
return computedBackgroundColor ? w(computedBackgroundColor).toHex() : value;
};
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-palette/index.js
-/**
- * External dependencies
- */
-
-
-
-
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/color-palette/index.js
+/**
+ * External dependencies
+ */
+
+
+
+
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -39159,12 +39863,7 @@
backgroundColor: color,
color
},
- onClick: isSelected ? clearColor : () => onChange(color, index),
- "aria-label": name ?
- // translators: %s: The name of the color e.g: "vivid red".
- (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Color: %s'), name) :
- // translators: %s: color hex code e.g: "#f00".
- (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Color code: %s'), color)
+ onClick: isSelected ? clearColor : () => onChange(color, index)
}, `${color}-${index}`);
});
}, [colors, value, onChange, clearColor]);
@@ -39276,8 +39975,8 @@
// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
const displayValue = value?.replace(/^var\((.+)\)$/, '$1');
const customColorAccessibleLabel = !!displayValue ? (0,external_wp_i18n_namespaceObject.sprintf)(
- // translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".
- (0,external_wp_i18n_namespaceObject.__)('Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), buttonLabelName, displayValue) : (0,external_wp_i18n_namespaceObject.__)('Custom color picker.');
+ // translators: 1: The name of the color e.g: "vivid red". 2: The color's hex code e.g: "#f00".
+ (0,external_wp_i18n_namespaceObject.__)('Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), buttonLabelName, displayValue) : (0,external_wp_i18n_namespaceObject.__)('Custom color picker');
const paletteCommonProps = {
clearColor,
onChange,
@@ -39285,35 +39984,14 @@
};
const actions = !!clearable && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.ButtonAction, {
onClick: clearColor,
+ accessibleWhenDisabled: true,
+ disabled: !value,
children: (0,external_wp_i18n_namespaceObject.__)('Clear')
});
- let metaProps;
- if (asButtons) {
- metaProps = {
- asButtons: true
- };
- } else {
- const _metaProps = {
- asButtons: false,
- loop
- };
- if (ariaLabel) {
- metaProps = {
- ..._metaProps,
- 'aria-label': ariaLabel
- };
- } else if (ariaLabelledby) {
- metaProps = {
- ..._metaProps,
- 'aria-labelledby': ariaLabelledby
- };
- } else {
- metaProps = {
- ..._metaProps,
- 'aria-label': (0,external_wp_i18n_namespaceObject.__)('Custom color picker.')
- };
- }
- }
+ const {
+ metaProps,
+ labelProps
+ } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, {
spacing: 3,
ref: forwardedRef,
@@ -39352,8 +40030,9 @@
})]
})]
})
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker, {
+ }), (colors.length > 0 || actions) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker, {
...metaProps,
+ ...labelProps,
actions: actions,
options: hasMultipleColorOrigins ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MultiplePalettes, {
...paletteCommonProps,
@@ -39396,7 +40075,7 @@
const ColorPalette = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedColorPalette);
/* harmony default export */ const color_palette = (ColorPalette);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/unit-control/styles/unit-control-styles.js
+;// ./node_modules/@wordpress/components/build-module/unit-control/styles/unit-control-styles.js
/**
* External dependencies
@@ -39423,8 +40102,8 @@
selectSize
}) => {
const sizes = {
- small: /*#__PURE__*/emotion_react_browser_esm_css("box-sizing:border-box;padding:2px 1px;width:20px;color:", COLORS.gray[800], ";font-size:8px;line-height:1;letter-spacing:-0.5px;text-transform:uppercase;text-align-last:center;" + ( true ? "" : 0), true ? "" : 0),
- default: /*#__PURE__*/emotion_react_browser_esm_css("box-sizing:border-box;min-width:24px;max-width:48px;height:24px;margin-inline-end:", space(2), ";padding:", space(1), ";color:", COLORS.theme.accent, ";font-size:13px;line-height:1;text-align-last:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" + ( true ? "" : 0), true ? "" : 0)
+ small: /*#__PURE__*/emotion_react_browser_esm_css("box-sizing:border-box;padding:2px 1px;width:20px;font-size:8px;line-height:1;letter-spacing:-0.5px;text-transform:uppercase;text-align-last:center;&:not( :disabled ){color:", COLORS.gray[800], ";}" + ( true ? "" : 0), true ? "" : 0),
+ default: /*#__PURE__*/emotion_react_browser_esm_css("box-sizing:border-box;min-width:24px;max-width:48px;height:24px;margin-inline-end:", space(2), ";padding:", space(1), ";font-size:13px;line-height:1;text-align-last:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;field-sizing:content;&:not( :disabled ){color:", COLORS.theme.accent, ";}" + ( true ? "" : 0), true ? "" : 0)
};
return sizes[selectSize];
};
@@ -39439,15 +40118,15 @@
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0
})(), " &:not(:disabled):hover{background-color:", COLORS.gray[100], ";}&:focus{border:1px solid ", COLORS.ui.borderFocus, ";box-shadow:inset 0 0 0 ", config_values.borderWidth + ' ' + COLORS.ui.borderFocus, ";outline-offset:0;outline:2px solid transparent;z-index:1;}" + ( true ? "" : 0), true ? "" : 0),
- default: /*#__PURE__*/emotion_react_browser_esm_css("display:flex;justify-content:center;align-items:center;&:hover{color:", COLORS.ui.borderFocus, ";box-shadow:inset 0 0 0 ", config_values.borderWidth + ' ' + COLORS.ui.borderFocus, ";outline:", config_values.borderWidth, " solid transparent;}&:focus{box-shadow:0 0 0 ", config_values.borderWidthFocus + ' ' + COLORS.ui.borderFocus, ";outline:", config_values.borderWidthFocus, " solid transparent;}" + ( true ? "" : 0), true ? "" : 0)
+ default: /*#__PURE__*/emotion_react_browser_esm_css("display:flex;justify-content:center;align-items:center;&:where( :not( :disabled ) ):hover{box-shadow:0 0 0 ", config_values.borderWidth + ' ' + COLORS.ui.borderFocus, ";outline:", config_values.borderWidth, " solid transparent;}&:focus{box-shadow:0 0 0 ", config_values.borderWidthFocus + ' ' + COLORS.ui.borderFocus, ";outline:", config_values.borderWidthFocus, " solid transparent;}" + ( true ? "" : 0), true ? "" : 0)
};
return sizes[selectSize];
};
const UnitSelect = /*#__PURE__*/emotion_styled_base_browser_esm("select", true ? {
target: "e1bagdl30"
-} : 0)("&&&{appearance:none;background:transparent;border-radius:2px;border:none;display:block;outline:none;margin:0;min-height:auto;font-family:inherit;", baseUnitLabelStyles, ";", unitSelectSizes, ";&:not( :disabled ){cursor:pointer;}}" + ( true ? "" : 0));
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/styles.js
+} : 0)("&&&{appearance:none;background:transparent;border-radius:", config_values.radiusXSmall, ";border:none;display:block;outline:none;margin:0;min-height:auto;font-family:inherit;", baseUnitLabelStyles, ";", unitSelectSizes, ";&:not( :disabled ){cursor:pointer;}}" + ( true ? "" : 0));
+
+;// ./node_modules/@wordpress/components/build-module/border-control/styles.js
function border_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
* External dependencies
@@ -39461,10 +40140,6 @@
-const styles_labelStyles = true ? {
- name: "f3vz0n",
- styles: "font-weight:500"
-} : 0;
const focusBoxShadow = /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:inset ", config_values.controlBoxShadowFocus, ";" + ( true ? "" : 0), true ? "" : 0);
const borderControl = /*#__PURE__*/emotion_react_browser_esm_css("border:0;padding:0;margin:0;", boxSizingReset, ";" + ( true ? "" : 0), true ? "" : 0);
const innerWrapper = () => /*#__PURE__*/emotion_react_browser_esm_css(ValueInput, "{flex:1 1 40%;}&& ", UnitSelect, "{min-height:0;}" + ( true ? "" : 0), true ? "" : 0);
@@ -39495,22 +40170,25 @@
const {
style
} = border || {};
- return /*#__PURE__*/emotion_react_browser_esm_css("border-radius:9999px;border:2px solid transparent;", style ? colorIndicatorBorder(border) : undefined, " width:", size === '__unstable-large' ? '24px' : '22px', ";height:", size === '__unstable-large' ? '24px' : '22px', ";padding:", size === '__unstable-large' ? '2px' : '1px', ";&>span{height:", space(4), ";width:", space(4), ";background:linear-gradient(\n\t\t\t\t-45deg,\n\t\t\t\ttransparent 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 52%,\n\t\t\t\ttransparent 52%\n\t\t\t);}" + ( true ? "" : 0), true ? "" : 0);
+ return /*#__PURE__*/emotion_react_browser_esm_css("border-radius:", config_values.radiusFull, ";border:2px solid transparent;", style ? colorIndicatorBorder(border) : undefined, " width:", size === '__unstable-large' ? '24px' : '22px', ";height:", size === '__unstable-large' ? '24px' : '22px', ";padding:", size === '__unstable-large' ? '2px' : '1px', ";&>span{height:", space(4), ";width:", space(4), ";background:linear-gradient(\n\t\t\t\t-45deg,\n\t\t\t\ttransparent 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 52%,\n\t\t\t\ttransparent 52%\n\t\t\t);}" + ( true ? "" : 0), true ? "" : 0);
};
// Must equal $color-palette-circle-size from:
// @wordpress/components/src/circular-option-picker/style.scss
const swatchSize = 28;
const swatchGap = 12;
-const borderControlPopoverControls = /*#__PURE__*/emotion_react_browser_esm_css("width:", swatchSize * 6 + swatchGap * 5, "px;>div:first-of-type>", StyledLabel, "{margin-bottom:0;", styles_labelStyles, ";}&& ", StyledLabel, "+button:not( .has-text ){min-width:24px;padding:0;}" + ( true ? "" : 0), true ? "" : 0);
+const borderControlPopoverControls = /*#__PURE__*/emotion_react_browser_esm_css("width:", swatchSize * 6 + swatchGap * 5, "px;>div:first-of-type>", StyledLabel, "{margin-bottom:0;}&& ", StyledLabel, "+button:not( .has-text ){min-width:24px;padding:0;}" + ( true ? "" : 0), true ? "" : 0);
const borderControlPopoverContent = /*#__PURE__*/emotion_react_browser_esm_css( true ? "" : 0, true ? "" : 0);
const borderColorIndicator = /*#__PURE__*/emotion_react_browser_esm_css( true ? "" : 0, true ? "" : 0);
-const resetButton = /*#__PURE__*/emotion_react_browser_esm_css("justify-content:center;width:100%;&&{border-top:", config_values.borderWidth, " solid ", COLORS.gray[400], ";border-top-left-radius:0;border-top-right-radius:0;height:40px;}" + ( true ? "" : 0), true ? "" : 0);
+const resetButtonWrapper = true ? {
+ name: "1ghe26v",
+ styles: "display:flex;justify-content:flex-end;margin-top:12px"
+} : 0;
const borderSlider = () => /*#__PURE__*/emotion_react_browser_esm_css("flex:1 1 60%;", rtl({
marginRight: space(3)
})(), ";" + ( true ? "" : 0), true ? "" : 0);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/unit-control/utils.js
+;// ./node_modules/@wordpress/components/build-module/unit-control/utils.js
/**
* WordPress dependencies
*/
@@ -39907,7 +40585,7 @@
return unitsToReturn;
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/border-control-dropdown/hook.js
+;// ./node_modules/@wordpress/components/build-module/border-control/border-control-dropdown/hook.js
/**
* WordPress dependencies
*/
@@ -39977,8 +40655,8 @@
const popoverContentClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
return cx(borderControlPopoverContent);
}, [cx]);
- const resetButtonClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
- return cx(resetButton);
+ const resetButtonWrapperClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
+ return cx(resetButtonWrapper);
}, [cx]);
return {
...otherProps,
@@ -39994,30 +40672,25 @@
onReset,
popoverContentClassName,
popoverControlsClassName,
- resetButtonClassName,
+ resetButtonWrapperClassName,
size,
__experimentalIsRenderedInSidebar
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/border-control-dropdown/component.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
-
-
-
+;// ./node_modules/@wordpress/components/build-module/border-control/border-control-dropdown/component.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
@@ -40058,30 +40731,30 @@
if (colorObject) {
const ariaLabelValue = getAriaLabelColorValue(colorObject.color);
return style ? (0,external_wp_i18n_namespaceObject.sprintf)(
- // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:". %3$s: The current border style selection e.g. "solid".
- 'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".', colorObject.name, ariaLabelValue, style) : (0,external_wp_i18n_namespaceObject.sprintf)(
- // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
- 'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, ariaLabelValue);
+ // translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g.: "#f00:". 3: The current border style selection e.g. "solid".
+ (0,external_wp_i18n_namespaceObject.__)('Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".'), colorObject.name, ariaLabelValue, style) : (0,external_wp_i18n_namespaceObject.sprintf)(
+ // translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g.: "#f00:".
+ (0,external_wp_i18n_namespaceObject.__)('Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), colorObject.name, ariaLabelValue);
}
if (colorValue) {
const ariaLabelValue = getAriaLabelColorValue(colorValue);
return style ? (0,external_wp_i18n_namespaceObject.sprintf)(
- // translators: %1$s: The color's hex code e.g.: "#f00:". %2$s: The current border style selection e.g. "solid".
- 'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".', ariaLabelValue, style) : (0,external_wp_i18n_namespaceObject.sprintf)(
- // translators: %1$s: The color's hex code e.g: "#f00".
- 'Border color and style picker. The currently selected color has a value of "%1$s".', ariaLabelValue);
+ // translators: 1: The color's hex code e.g.: "#f00:". 2: The current border style selection e.g. "solid".
+ (0,external_wp_i18n_namespaceObject.__)('Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".'), ariaLabelValue, style) : (0,external_wp_i18n_namespaceObject.sprintf)(
+ // translators: %s: The color's hex code e.g: "#f00".
+ (0,external_wp_i18n_namespaceObject.__)('Border color and style picker. The currently selected color has a value of "%s".'), ariaLabelValue);
}
return (0,external_wp_i18n_namespaceObject.__)('Border color and style picker.');
}
if (colorObject) {
return (0,external_wp_i18n_namespaceObject.sprintf)(
- // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g: "#f00".
- 'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, getAriaLabelColorValue(colorObject.color));
+ // translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g: "#f00".
+ (0,external_wp_i18n_namespaceObject.__)('Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), colorObject.name, getAriaLabelColorValue(colorObject.color));
}
if (colorValue) {
return (0,external_wp_i18n_namespaceObject.sprintf)(
- // translators: %1$s: The color's hex code e.g: "#f00".
- 'Border color picker. The currently selected color has a value of "%1$s".', getAriaLabelColorValue(colorValue));
+ // translators: %s: The color's hex code e.g: "#f00".
+ (0,external_wp_i18n_namespaceObject.__)('Border color picker. The currently selected color has a value of "%s".'), getAriaLabelColorValue(colorValue));
}
return (0,external_wp_i18n_namespaceObject.__)('Border color picker.');
};
@@ -40101,8 +40774,7 @@
onStyleChange,
popoverContentClassName,
popoverControlsClassName,
- resetButtonClassName,
- showDropdownHeader,
+ resetButtonWrapperClassName,
size,
__unstablePopoverProps,
...otherProps
@@ -40113,7 +40785,7 @@
} = border || {};
const colorObject = getColorObject(color, colors);
const toggleAriaLabel = getToggleAriaLabel(color, colorObject, style, enableStyle);
- const showResetButton = color || style && style !== 'none';
+ const enableResetButton = color || style && style !== 'none';
const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined;
const renderToggle = ({
onToggle
@@ -40124,7 +40796,7 @@
tooltipPosition: dropdownPosition,
label: (0,external_wp_i18n_namespaceObject.__)('Border color and style picker'),
showTooltip: true,
- __next40pxDefaultSize: size === '__unstable-large' ? true : false,
+ __next40pxDefaultSize: size === '__unstable-large',
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: indicatorWrapperClassName,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_indicator, {
@@ -40133,24 +40805,13 @@
})
})
});
- const renderContent = ({
- onClose
- }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_content_wrapper, {
+ const renderContent = () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(dropdown_content_wrapper, {
paddingSize: "medium",
- children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, {
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, {
className: popoverControlsClassName,
spacing: 6,
- children: [showDropdownHeader ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, {
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledLabel, {
- children: (0,external_wp_i18n_namespaceObject.__)('Border color')
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
- size: "small",
- label: (0,external_wp_i18n_namespaceObject.__)('Close border color'),
- icon: close_small,
- onClick: onClose
- })]
- }) : undefined, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_palette, {
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_palette, {
className: popoverContentClassName,
value: color,
onChange: onColorChange,
@@ -40164,19 +40825,20 @@
value: style,
onChange: onStyleChange
})]
- })
- }), showResetButton && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_content_wrapper, {
- paddingSize: "none",
- children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
- className: resetButtonClassName,
- variant: "tertiary",
- onClick: () => {
- onReset();
- onClose();
- },
- children: (0,external_wp_i18n_namespaceObject.__)('Reset')
- })
- })]
+ }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
+ className: resetButtonWrapperClassName,
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
+ variant: "tertiary",
+ onClick: () => {
+ onReset();
+ },
+ disabled: !enableResetButton,
+ accessibleWhenDisabled: true,
+ __next40pxDefaultSize: true,
+ children: (0,external_wp_i18n_namespaceObject.__)('Reset')
+ })
+ })]
+ })
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown, {
renderToggle: renderToggle,
@@ -40191,7 +40853,7 @@
const ConnectedBorderControlDropdown = contextConnect(BorderControlDropdown, 'BorderControlDropdown');
/* harmony default export */ const border_control_dropdown_component = (ConnectedBorderControlDropdown);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/unit-control/unit-select-control.js
+;// ./node_modules/@wordpress/components/build-module/unit-control/unit-select-control.js
/**
* External dependencies
*/
@@ -40251,23 +40913,24 @@
}
/* harmony default export */ const unit_select_control = ((0,external_wp_element_namespaceObject.forwardRef)(UnitSelectControl));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/unit-control/index.js
-/**
- * External dependencies
- */
-
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-/**
- * Internal dependencies
- */
+;// ./node_modules/@wordpress/components/build-module/unit-control/index.js
+/**
+ * External dependencies
+ */
+
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
+
@@ -40296,8 +40959,15 @@
units: unitsProp = CSS_UNITS,
value: valueProp,
onFocus: onFocusProp,
+ __shouldNotWarnDeprecated36pxSize,
...props
} = useDeprecated36pxDefaultSizeProp(unitControlProps);
+ maybeWarnDeprecated36pxSize({
+ componentName: 'UnitControl',
+ __next40pxDefaultSize: props.__next40pxDefaultSize,
+ size,
+ __shouldNotWarnDeprecated36pxSize
+ });
if ('unit' in unitControlProps) {
external_wp_deprecated_default()('UnitControl unit prop', {
since: '5.6',
@@ -40366,10 +41036,10 @@
if (!disableUnits && isUnitSelectTabbable && units.length) {
handleOnKeyDown = event => {
props.onKeyDown?.(event);
- // Unless the meta key was pressed (to avoid interfering with
- // shortcuts, e.g. pastes), moves focus to the unit select if a key
+ // Unless the meta or ctrl key was pressed (to avoid interfering with
+ // shortcuts, e.g. pastes), move focus to the unit select if a key
// matches the first character of a unit.
- if (!event.metaKey && reFirstCharacterOfUnits.test(event.key)) {
+ if (!event.metaKey && !event.ctrlKey && reFirstCharacterOfUnits.test(event.key)) {
refInputSuffix.current?.focus();
}
};
@@ -40400,6 +41070,7 @@
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ValueInput, {
...props,
+ __shouldNotWarnDeprecated36pxSize: true,
autoComplete: autoComplete,
className: classes,
disabled: disabled,
@@ -40430,7 +41101,7 @@
* const Example = () => {
* const [ value, setValue ] = useState( '10px' );
*
- * return <UnitControl onChange={ setValue } value={ value } />;
+ * return <UnitControl __next40pxDefaultSize onChange={ setValue } value={ value } />;
* };
* ```
*/
@@ -40438,15 +41109,17 @@
/* harmony default export */ const unit_control = (UnitControl);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/border-control/hook.js
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
+;// ./node_modules/@wordpress/components/build-module/border-control/border-control/hook.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
@@ -40472,8 +41145,15 @@
width,
__experimentalIsRenderedInSidebar = false,
__next40pxDefaultSize,
+ __shouldNotWarnDeprecated36pxSize,
...otherProps
} = useContextSystem(props, 'BorderControl');
+ maybeWarnDeprecated36pxSize({
+ componentName: 'BorderControl',
+ __next40pxDefaultSize,
+ size,
+ __shouldNotWarnDeprecated36pxSize
+ });
const computedSize = size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
const [widthValue, originalWidthUnit] = parseQuantityAndUnitFromRawValue(border?.width);
const widthUnit = originalWidthUnit || 'px';
@@ -40570,7 +41250,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/border-control/component.js
+;// ./node_modules/@wordpress/components/build-module/border-control/border-control/component.js
/**
* WordPress dependencies
*/
@@ -40646,19 +41326,24 @@
spacing: 4,
className: innerWrapperClassName,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(unit_control, {
- prefix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_control_dropdown_component, {
- border: border,
- colors: colors,
- __unstablePopoverProps: __unstablePopoverProps,
- disableCustomColors: disableCustomColors,
- enableAlpha: enableAlpha,
- enableStyle: enableStyle,
- isStyleSettable: isStyleSettable,
- onChange: onBorderChange,
- previousStyleSelection: previousStyleSelection,
- showDropdownHeader: showDropdownHeader,
- __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
- size: size
+ __next40pxDefaultSize: __next40pxDefaultSize,
+ __shouldNotWarnDeprecated36pxSize: true,
+ prefix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, {
+ marginRight: 1,
+ marginBottom: 0,
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_control_dropdown_component, {
+ border: border,
+ colors: colors,
+ __unstablePopoverProps: __unstablePopoverProps,
+ disableCustomColors: disableCustomColors,
+ enableAlpha: enableAlpha,
+ enableStyle: enableStyle,
+ isStyleSettable: isStyleSettable,
+ onChange: onBorderChange,
+ previousStyleSelection: previousStyleSelection,
+ __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+ size: size
+ })
}),
label: (0,external_wp_i18n_namespaceObject.__)('Border width'),
hideLabelFromVision: true,
@@ -40681,7 +41366,8 @@
step: ['px', '%'].includes(widthUnit) ? 1 : 0.1,
value: widthValue || undefined,
withInputField: false,
- __next40pxDefaultSize: __next40pxDefaultSize
+ __next40pxDefaultSize: __next40pxDefaultSize,
+ __shouldNotWarnDeprecated36pxSize: true
})]
})]
});
@@ -40698,7 +41384,7 @@
* a "shape" abstraction.
*
* ```jsx
- * import { __experimentalBorderControl as BorderControl } from '@wordpress/components';
+ * import { BorderControl } from '@wordpress/components';
* import { __ } from '@wordpress/i18n';
*
* const colors = [
@@ -40712,6 +41398,7 @@
*
* return (
* <BorderControl
+ * __next40pxDefaultSize
* colors={ colors }
* label={ __( 'Border' ) }
* onChange={ onChange }
@@ -40724,7 +41411,7 @@
const BorderControl = contextConnect(UnconnectedBorderControl, 'BorderControl');
/* harmony default export */ const border_control_component = (BorderControl);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/grid/utils.js
+;// ./node_modules/@wordpress/components/build-module/grid/utils.js
/**
* External dependencies
*/
@@ -40779,7 +41466,7 @@
return alignmentProps;
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/grid/hook.js
+;// ./node_modules/@wordpress/components/build-module/grid/hook.js
/**
* External dependencies
*/
@@ -40844,7 +41531,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/grid/component.js
+;// ./node_modules/@wordpress/components/build-module/grid/component.js
/**
* External dependencies
*/
@@ -40888,7 +41575,7 @@
const Grid = contextConnect(UnconnectedGrid, 'Grid');
/* harmony default export */ const grid_component = (Grid);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-split-controls/hook.js
+;// ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-split-controls/hook.js
/**
* WordPress dependencies
*/
@@ -40935,18 +41622,17 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-split-controls/component.js
-/**
- * WordPress dependencies
- */
-
-
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-split-controls/component.js
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -40988,13 +41674,14 @@
enableStyle,
isCompact: true,
__experimentalIsRenderedInSidebar,
- size
+ size,
+ __shouldNotWarnDeprecated36pxSize: true
};
const mergedRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([setPopoverAnchor, forwardedRef]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(grid_component, {
...otherProps,
ref: mergedRef,
- gap: 4,
+ gap: 3,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_box_control_visualizer_component, {
value: value,
size: size
@@ -41035,7 +41722,7 @@
const ConnectedBorderBoxControlSplitControls = contextConnect(BorderBoxControlSplitControls, 'BorderBoxControlSplitControls');
/* harmony default export */ const border_box_control_split_controls_component = (ConnectedBorderBoxControlSplitControls);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/unit-values.js
+;// ./node_modules/@wordpress/components/build-module/utils/unit-values.js
const UNITED_VALUE_REGEX = /^([\d.\-+]*)\s*(fr|cm|mm|Q|in|pc|pt|px|em|ex|ch|rem|lh|vw|vh|vmin|vmax|%|cap|ic|rlh|vi|vb|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx|svw|lvw|dvw|svh|lvh|dvh|svi|lvi|dvi|svb|lvb|dvb|svmin|lvmin|dvmin|svmax|lvmax|dvmax)?$/;
/**
@@ -41069,7 +41756,7 @@
return `${value}${unit}`;
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/utils.js
+;// ./node_modules/@wordpress/components/build-module/border-box-control/utils.js
/**
* External dependencies
*/
@@ -41218,15 +41905,16 @@
return currentMode;
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control/hook.js
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
+;// ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control/hook.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
@@ -41244,6 +41932,11 @@
__next40pxDefaultSize,
...otherProps
} = useContextSystem(props, 'BorderBoxControl');
+ maybeWarnDeprecated36pxSize({
+ componentName: 'BorderBoxControl',
+ __next40pxDefaultSize,
+ size
+ });
const computedSize = size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
const mixedBorders = hasMixedBorders(value);
const splitBorders = hasSplitBorders(value);
@@ -41335,18 +42028,17 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control/component.js
-/**
- * WordPress dependencies
- */
-
-
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control/component.js
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -41434,6 +42126,7 @@
withSlider: true,
width: size === '__unstable-large' ? '116px' : '110px',
__experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+ __shouldNotWarnDeprecated36pxSize: true,
size: size
}) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_box_control_split_controls_component, {
colors: colors,
@@ -41456,22 +42149,11 @@
};
/**
- * The `BorderBoxControl` effectively has two view states. The first, a "linked"
- * view, allows configuration of a flat border via a single `BorderControl`.
- * The second, a "split" view, contains a `BorderControl` for each side
- * as well as a visualizer for the currently selected borders. Each view also
- * contains a button to toggle between the two.
- *
- * When switching from the "split" view to "linked", if the individual side
- * borders are not consistent, the "linked" view will display any border
- * properties selections that are consistent while showing a mixed state for
- * those that aren't. For example, if all borders had the same color and style
- * but different widths, then the border dropdown in the "linked" view's
- * `BorderControl` would show that consistent color and style but the "linked"
- * view's width input would show "Mixed" placeholder text.
- *
- * ```jsx
- * import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
+ * An input control for the color, style, and width of the border of a box. The
+ * border can be customized as a whole, or individually for each side of the box.
+ *
+ * ```jsx
+ * import { BorderBoxControl } from '@wordpress/components';
* import { __ } from '@wordpress/i18n';
*
* const colors = [
@@ -41495,6 +42177,7 @@
*
* return (
* <BorderBoxControl
+ * __next40pxDefaultSize
* colors={ colors }
* label={ __( 'Borders' ) }
* onChange={ onChange }
@@ -41507,180 +42190,33 @@
const BorderBoxControl = contextConnect(UnconnectedBorderBoxControl, 'BorderBoxControl');
/* harmony default export */ const border_box_control_component = (BorderBoxControl);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/styles/box-control-icon-styles.js
-
-function box_control_icon_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-/**
- * External dependencies
- */
-
-const box_control_icon_styles_Root = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
- target: "e1j5nr4z8"
-} : 0)( true ? {
- name: "1w884gc",
- styles: "box-sizing:border-box;display:block;width:24px;height:24px;position:relative;padding:4px"
-} : 0);
-const Viewbox = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
- target: "e1j5nr4z7"
-} : 0)( true ? {
- name: "i6vjox",
- styles: "box-sizing:border-box;display:block;position:relative;width:100%;height:100%"
-} : 0);
-const strokeFocus = ({
- isFocused
-}) => {
- return /*#__PURE__*/emotion_react_browser_esm_css({
- backgroundColor: 'currentColor',
- opacity: isFocused ? 1 : 0.3
- }, true ? "" : 0, true ? "" : 0);
-};
-const Stroke = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
- target: "e1j5nr4z6"
-} : 0)("box-sizing:border-box;display:block;pointer-events:none;position:absolute;", strokeFocus, ";" + ( true ? "" : 0));
-const VerticalStroke = /*#__PURE__*/emotion_styled_base_browser_esm(Stroke, true ? {
- target: "e1j5nr4z5"
-} : 0)( true ? {
- name: "1k2w39q",
- styles: "bottom:3px;top:3px;width:2px"
-} : 0);
-const HorizontalStroke = /*#__PURE__*/emotion_styled_base_browser_esm(Stroke, true ? {
- target: "e1j5nr4z4"
-} : 0)( true ? {
- name: "1q9b07k",
- styles: "height:2px;left:3px;right:3px"
-} : 0);
-const TopStroke = /*#__PURE__*/emotion_styled_base_browser_esm(HorizontalStroke, true ? {
- target: "e1j5nr4z3"
-} : 0)( true ? {
- name: "abcix4",
- styles: "top:0"
-} : 0);
-const RightStroke = /*#__PURE__*/emotion_styled_base_browser_esm(VerticalStroke, true ? {
- target: "e1j5nr4z2"
-} : 0)( true ? {
- name: "1wf8jf",
- styles: "right:0"
-} : 0);
-const BottomStroke = /*#__PURE__*/emotion_styled_base_browser_esm(HorizontalStroke, true ? {
- target: "e1j5nr4z1"
-} : 0)( true ? {
- name: "8tapst",
- styles: "bottom:0"
-} : 0);
-const LeftStroke = /*#__PURE__*/emotion_styled_base_browser_esm(VerticalStroke, true ? {
- target: "e1j5nr4z0"
-} : 0)( true ? {
- name: "1ode3cm",
- styles: "left:0"
-} : 0);
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/icon.js
-/**
- * Internal dependencies
- */
-
-
-
-
-const BASE_ICON_SIZE = 24;
-function BoxControlIcon({
- size = 24,
- side = 'all',
- sides,
- ...props
-}) {
- const isSideDisabled = value => sides?.length && !sides.includes(value);
- const hasSide = value => {
- if (isSideDisabled(value)) {
- return false;
- }
- return side === 'all' || side === value;
- };
- const top = hasSide('top') || hasSide('vertical');
- const right = hasSide('right') || hasSide('horizontal');
- const bottom = hasSide('bottom') || hasSide('vertical');
- const left = hasSide('left') || hasSide('horizontal');
-
- // Simulates SVG Icon scaling.
- const scale = size / BASE_ICON_SIZE;
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(box_control_icon_styles_Root, {
- style: {
- transform: `scale(${scale})`
- },
- ...props,
- children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Viewbox, {
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TopStroke, {
- isFocused: top
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RightStroke, {
- isFocused: right
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BottomStroke, {
- isFocused: bottom
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LeftStroke, {
- isFocused: left
- })]
- })
- });
-}
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/styles/box-control-styles.js
-
-function box_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-
-
-
-
-
-const StyledUnitControl = /*#__PURE__*/emotion_styled_base_browser_esm(unit_control, true ? {
- target: "e1jovhle5"
-} : 0)( true ? {
- name: "1ejyr19",
- styles: "max-width:90px"
-} : 0);
-const InputWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component, true ? {
- target: "e1jovhle4"
-} : 0)( true ? {
- name: "1j1lmoi",
- styles: "grid-column:1/span 3"
-} : 0);
-const ResetButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? {
- target: "e1jovhle3"
-} : 0)( true ? {
- name: "tkya7b",
- styles: "grid-area:1/2;justify-self:end"
-} : 0);
-const LinkedButtonWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
- target: "e1jovhle2"
-} : 0)( true ? {
- name: "1dfa8al",
- styles: "grid-area:1/3;justify-self:end"
-} : 0);
-const FlexedBoxControlIcon = /*#__PURE__*/emotion_styled_base_browser_esm(BoxControlIcon, true ? {
- target: "e1jovhle1"
-} : 0)( true ? {
- name: "ou8xsw",
- styles: "flex:0 0 auto"
-} : 0);
-const FlexedRangeControl = /*#__PURE__*/emotion_styled_base_browser_esm(range_control, true ? {
- target: "e1jovhle0"
-} : 0)("width:100%;margin-inline-end:", space(2), ";" + ( true ? "" : 0));
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/utils.js
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
+;// ./node_modules/@wordpress/icons/build-module/library/settings.js
+/**
+ * WordPress dependencies
+ */
+
+
+const settings = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_primitives_namespaceObject.SVG, {
+ xmlns: "http://www.w3.org/2000/svg",
+ viewBox: "0 0 24 24",
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
+ d: "m19 7.5h-7.628c-.3089-.87389-1.1423-1.5-2.122-1.5-.97966 0-1.81309.62611-2.12197 1.5h-2.12803v1.5h2.12803c.30888.87389 1.14231 1.5 2.12197 1.5.9797 0 1.8131-.62611 2.122-1.5h7.628z"
+ }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
+ d: "m19 15h-2.128c-.3089-.8739-1.1423-1.5-2.122-1.5s-1.8131.6261-2.122 1.5h-7.628v1.5h7.628c.3089.8739 1.1423 1.5 2.122 1.5s1.8131-.6261 2.122-1.5h2.128z"
+ })]
+});
+/* harmony default export */ const library_settings = (settings);
+
+;// ./node_modules/@wordpress/components/build-module/box-control/utils.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
const CUSTOM_VALUE_SETTINGS = {
px: {
@@ -41802,7 +42338,6 @@
bottom: (0,external_wp_i18n_namespaceObject.__)('Bottom side'),
left: (0,external_wp_i18n_namespaceObject.__)('Left side'),
right: (0,external_wp_i18n_namespaceObject.__)('Right side'),
- mixed: (0,external_wp_i18n_namespaceObject.__)('Mixed'),
vertical: (0,external_wp_i18n_namespaceObject.__)('Top and bottom sides'),
horizontal: (0,external_wp_i18n_namespaceObject.__)('Left and right sides')
};
@@ -41826,43 +42361,31 @@
}
/**
- * Gets the 'all' input value and unit from values data.
+ * Gets the merged input value and unit from values data.
*
* @param values Box values.
- * @param selectedUnits Box units.
* @param availableSides Available box sides to evaluate.
*
* @return A value + unit for the 'all' input.
*/
-function getAllValue(values = {}, selectedUnits, availableSides = ALL_SIDES) {
+function getMergedValue(values = {}, availableSides = ALL_SIDES) {
const sides = normalizeSides(availableSides);
- const parsedQuantitiesAndUnits = sides.map(side => parseQuantityAndUnitFromRawValue(values[side]));
- const allParsedQuantities = parsedQuantitiesAndUnits.map(value => {
- var _value$;
- return (_value$ = value[0]) !== null && _value$ !== void 0 ? _value$ : '';
- });
- const allParsedUnits = parsedQuantitiesAndUnits.map(value => value[1]);
- const commonQuantity = allParsedQuantities.every(v => v === allParsedQuantities[0]) ? allParsedQuantities[0] : '';
-
- /**
- * The typeof === 'number' check is important. On reset actions, the incoming value
- * may be null or an empty string.
- *
- * Also, the value may also be zero (0), which is considered a valid unit value.
- *
- * typeof === 'number' is more specific for these cases, rather than relying on a
- * simple truthy check.
- */
- let commonUnit;
- if (typeof commonQuantity === 'number') {
- commonUnit = utils_mode(allParsedUnits);
- } else {
- var _getAllUnitFallback;
- // Set meaningful unit selection if no commonQuantity and user has previously
- // selected units without assigning values while controls were unlinked.
- commonUnit = (_getAllUnitFallback = getAllUnitFallback(selectedUnits)) !== null && _getAllUnitFallback !== void 0 ? _getAllUnitFallback : utils_mode(allParsedUnits);
- }
- return [commonQuantity, commonUnit].join('');
+ if (sides.every(side => values[side] === values[sides[0]])) {
+ return values[sides[0]];
+ }
+ return undefined;
+}
+
+/**
+ * Checks if the values are mixed.
+ *
+ * @param values Box values.
+ * @param availableSides Available box sides to evaluate.
+ * @return Whether the values are mixed.
+ */
+function isValueMixed(values = {}, availableSides = ALL_SIDES) {
+ const sides = normalizeSides(availableSides);
+ return sides.some(side => values[side] !== values[sides[0]]);
}
/**
@@ -41880,21 +42403,6 @@
}
/**
- * Checks to determine if values are mixed.
- *
- * @param values Box values.
- * @param selectedUnits Box units.
- * @param sides Available box sides to evaluate.
- *
- * @return Whether values are mixed.
- */
-function isValuesMixed(values = {}, selectedUnits, sides = ALL_SIDES) {
- const allValue = getAllValue(values, selectedUnits, sides);
- const isMixed = isNaN(parseFloat(allValue));
- return isMixed;
-}
-
-/**
* Checks to determine if values are defined.
*
* @param values Box values.
@@ -41902,7 +42410,7 @@
* @return Whether values are mixed.
*/
function isValuesDefined(values) {
- return values !== undefined && Object.values(values).filter(
+ return values && Object.values(values).filter(
// Switching units when input is empty causes values only
// containing units. This gives false positive on mixed values
// unless filtered.
@@ -41954,6 +42462,8 @@
* Applies a value to an object representing top, right, bottom and left sides
* while taking into account any custom side configuration.
*
+ * @deprecated
+ *
* @param currentValues The current values for each side.
* @param newValue The value to apply to the sides object.
* @param sides Array defining valid sides.
@@ -41961,6 +42471,10 @@
* @return Object containing the updated values for each side.
*/
function applyValueToSides(currentValues, newValue, sides) {
+ external_wp_deprecated_default()('applyValueToSides', {
+ since: '6.8',
+ version: '7.0'
+ });
const newValues = {
...currentValues
};
@@ -41982,119 +42496,309 @@
return newValues;
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/all-input-control.js
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-
-
-
-
-
-
-const all_input_control_noop = () => {};
-function AllInputControl({
- __next40pxDefaultSize,
- onChange = all_input_control_noop,
- onFocus = all_input_control_noop,
- values,
+/**
+ * Return the allowed sides based on the sides configuration.
+ *
+ * @param sides Sides configuration.
+ * @return Allowed sides.
+ */
+function getAllowedSides(sides) {
+ const allowedSides = new Set(!sides ? ALL_SIDES : []);
+ sides?.forEach(allowedSide => {
+ if (allowedSide === 'vertical') {
+ allowedSides.add('top');
+ allowedSides.add('bottom');
+ } else if (allowedSide === 'horizontal') {
+ allowedSides.add('right');
+ allowedSides.add('left');
+ } else {
+ allowedSides.add(allowedSide);
+ }
+ });
+ return allowedSides;
+}
+
+/**
+ * Checks if a value is a preset value.
+ *
+ * @param value The value to check.
+ * @param presetKey The preset key to check against.
+ * @return Whether the value is a preset value.
+ */
+function isValuePreset(value, presetKey) {
+ return value.startsWith(`var:preset|${presetKey}|`);
+}
+
+/**
+ * Returns the index of the preset value in the presets array.
+ *
+ * @param value The value to check.
+ * @param presetKey The preset key to check against.
+ * @param presets The array of presets to search.
+ * @return The index of the preset value in the presets array.
+ */
+function getPresetIndexFromValue(value, presetKey, presets) {
+ if (!isValuePreset(value, presetKey)) {
+ return undefined;
+ }
+ const match = value.match(new RegExp(`^var:preset\\|${presetKey}\\|(.+)$`));
+ if (!match) {
+ return undefined;
+ }
+ const slug = match[1];
+ const index = presets.findIndex(preset => {
+ return preset.slug === slug;
+ });
+ return index !== -1 ? index : undefined;
+}
+
+/**
+ * Returns the preset value from the index.
+ *
+ * @param index The index of the preset value in the presets array.
+ * @param presetKey The preset key to check against.
+ * @param presets The array of presets to search.
+ * @return The preset value from the index.
+ */
+function getPresetValueFromIndex(index, presetKey, presets) {
+ const preset = presets[index];
+ return `var:preset|${presetKey}|${preset.slug}`;
+}
+
+;// ./node_modules/@wordpress/components/build-module/box-control/styles/box-control-icon-styles.js
+
+function box_control_icon_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+/**
+ * External dependencies
+ */
+
+const box_control_icon_styles_Root = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
+ target: "e1j5nr4z8"
+} : 0)( true ? {
+ name: "1w884gc",
+ styles: "box-sizing:border-box;display:block;width:24px;height:24px;position:relative;padding:4px"
+} : 0);
+const Viewbox = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
+ target: "e1j5nr4z7"
+} : 0)( true ? {
+ name: "i6vjox",
+ styles: "box-sizing:border-box;display:block;position:relative;width:100%;height:100%"
+} : 0);
+const strokeFocus = ({
+ isFocused
+}) => {
+ return /*#__PURE__*/emotion_react_browser_esm_css({
+ backgroundColor: 'currentColor',
+ opacity: isFocused ? 1 : 0.3
+ }, true ? "" : 0, true ? "" : 0);
+};
+const Stroke = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
+ target: "e1j5nr4z6"
+} : 0)("box-sizing:border-box;display:block;pointer-events:none;position:absolute;", strokeFocus, ";" + ( true ? "" : 0));
+const VerticalStroke = /*#__PURE__*/emotion_styled_base_browser_esm(Stroke, true ? {
+ target: "e1j5nr4z5"
+} : 0)( true ? {
+ name: "1k2w39q",
+ styles: "bottom:3px;top:3px;width:2px"
+} : 0);
+const HorizontalStroke = /*#__PURE__*/emotion_styled_base_browser_esm(Stroke, true ? {
+ target: "e1j5nr4z4"
+} : 0)( true ? {
+ name: "1q9b07k",
+ styles: "height:2px;left:3px;right:3px"
+} : 0);
+const TopStroke = /*#__PURE__*/emotion_styled_base_browser_esm(HorizontalStroke, true ? {
+ target: "e1j5nr4z3"
+} : 0)( true ? {
+ name: "abcix4",
+ styles: "top:0"
+} : 0);
+const RightStroke = /*#__PURE__*/emotion_styled_base_browser_esm(VerticalStroke, true ? {
+ target: "e1j5nr4z2"
+} : 0)( true ? {
+ name: "1wf8jf",
+ styles: "right:0"
+} : 0);
+const BottomStroke = /*#__PURE__*/emotion_styled_base_browser_esm(HorizontalStroke, true ? {
+ target: "e1j5nr4z1"
+} : 0)( true ? {
+ name: "8tapst",
+ styles: "bottom:0"
+} : 0);
+const LeftStroke = /*#__PURE__*/emotion_styled_base_browser_esm(VerticalStroke, true ? {
+ target: "e1j5nr4z0"
+} : 0)( true ? {
+ name: "1ode3cm",
+ styles: "left:0"
+} : 0);
+
+;// ./node_modules/@wordpress/components/build-module/box-control/icon.js
+/**
+ * Internal dependencies
+ */
+
+
+
+const BASE_ICON_SIZE = 24;
+function BoxControlIcon({
+ size = 24,
+ side = 'all',
sides,
- selectedUnits,
- setSelectedUnits,
...props
}) {
- var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;
- const inputId = (0,external_wp_compose_namespaceObject.useInstanceId)(AllInputControl, 'box-control-input-all');
- const allValue = getAllValue(values, selectedUnits, sides);
- const hasValues = isValuesDefined(values);
- const isMixed = hasValues && isValuesMixed(values, selectedUnits, sides);
- const allPlaceholder = isMixed ? LABELS.mixed : undefined;
- const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(allValue);
- const handleOnFocus = event => {
- onFocus(event, {
- side: 'all'
- });
- };
- const onValueChange = next => {
- const isNumeric = next !== undefined && !isNaN(parseFloat(next));
- const nextValue = isNumeric ? next : undefined;
- const nextValues = applyValueToSides(values, nextValue, sides);
- onChange(nextValues);
- };
- const sliderOnChange = next => {
- onValueChange(next !== undefined ? [next, parsedUnit].join('') : undefined);
- };
-
- // Set selected unit so it can be used as fallback by unlinked controls
- // when individual sides do not have a value containing a unit.
- const handleOnUnitChange = unit => {
- const newUnits = applyValueToSides(selectedUnits, unit, sides);
- setSelectedUnits(newUnits);
- };
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, {
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledUnitControl, {
- ...props,
- __next40pxDefaultSize: __next40pxDefaultSize,
- className: "component-box-control__unit-control",
- disableUnits: isMixed,
- id: inputId,
- isPressEnterToChange: true,
- value: allValue,
- onChange: onValueChange,
- onUnitChange: handleOnUnitChange,
- onFocus: handleOnFocus,
- placeholder: allPlaceholder,
- label: LABELS.all,
- hideLabelFromVision: true
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedRangeControl, {
- __nextHasNoMarginBottom: true,
- __next40pxDefaultSize: __next40pxDefaultSize,
- "aria-controls": inputId,
- label: LABELS.all,
- hideLabelFromVision: true,
- onChange: sliderOnChange,
- min: 0,
- max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[parsedUnit !== null && parsedUnit !== void 0 ? parsedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,
- step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[parsedUnit !== null && parsedUnit !== void 0 ? parsedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,
- value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0,
- withInputField: false
- })]
- });
-}
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/input-controls.js
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-
-
-
-
-
-
-const input_controls_noop = () => {};
-function BoxInputControls({
+ const isSideDisabled = value => sides?.length && !sides.includes(value);
+ const hasSide = value => {
+ if (isSideDisabled(value)) {
+ return false;
+ }
+ return side === 'all' || side === value;
+ };
+ const top = hasSide('top') || hasSide('vertical');
+ const right = hasSide('right') || hasSide('horizontal');
+ const bottom = hasSide('bottom') || hasSide('vertical');
+ const left = hasSide('left') || hasSide('horizontal');
+
+ // Simulates SVG Icon scaling.
+ const scale = size / BASE_ICON_SIZE;
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(box_control_icon_styles_Root, {
+ style: {
+ transform: `scale(${scale})`
+ },
+ ...props,
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Viewbox, {
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TopStroke, {
+ isFocused: top
+ }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RightStroke, {
+ isFocused: right
+ }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BottomStroke, {
+ isFocused: bottom
+ }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LeftStroke, {
+ isFocused: left
+ })]
+ })
+ });
+}
+
+;// ./node_modules/@wordpress/components/build-module/box-control/styles/box-control-styles.js
+
+function box_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+
+const StyledUnitControl = /*#__PURE__*/emotion_styled_base_browser_esm(unit_control, true ? {
+ target: "e1jovhle5"
+} : 0)( true ? {
+ name: "1ejyr19",
+ styles: "max-width:90px"
+} : 0);
+const InputWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component, true ? {
+ target: "e1jovhle4"
+} : 0)( true ? {
+ name: "1j1lmoi",
+ styles: "grid-column:1/span 3"
+} : 0);
+const ResetButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? {
+ target: "e1jovhle3"
+} : 0)( true ? {
+ name: "tkya7b",
+ styles: "grid-area:1/2;justify-self:end"
+} : 0);
+const LinkedButtonWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
+ target: "e1jovhle2"
+} : 0)( true ? {
+ name: "1dfa8al",
+ styles: "grid-area:1/3;justify-self:end"
+} : 0);
+const FlexedBoxControlIcon = /*#__PURE__*/emotion_styled_base_browser_esm(BoxControlIcon, true ? {
+ target: "e1jovhle1"
+} : 0)( true ? {
+ name: "ou8xsw",
+ styles: "flex:0 0 auto"
+} : 0);
+const FlexedRangeControl = /*#__PURE__*/emotion_styled_base_browser_esm(range_control, true ? {
+ target: "e1jovhle0"
+} : 0)("width:100%;margin-inline-end:", space(2), ";" + ( true ? "" : 0));
+
+;// ./node_modules/@wordpress/components/build-module/box-control/input-control.js
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+
+const box_control_input_control_noop = () => {};
+function getSidesToModify(side, sides, isAlt) {
+ const allowedSides = getAllowedSides(sides);
+ let modifiedSides = [];
+ switch (side) {
+ case 'all':
+ modifiedSides = ['top', 'bottom', 'left', 'right'];
+ break;
+ case 'horizontal':
+ modifiedSides = ['left', 'right'];
+ break;
+ case 'vertical':
+ modifiedSides = ['top', 'bottom'];
+ break;
+ default:
+ modifiedSides = [side];
+ }
+ if (isAlt) {
+ switch (side) {
+ case 'top':
+ modifiedSides.push('bottom');
+ break;
+ case 'bottom':
+ modifiedSides.push('top');
+ break;
+ case 'left':
+ modifiedSides.push('left');
+ break;
+ case 'right':
+ modifiedSides.push('right');
+ break;
+ }
+ }
+ return modifiedSides.filter(s => allowedSides.has(s));
+}
+function BoxInputControl({
__next40pxDefaultSize,
- onChange = input_controls_noop,
- onFocus = input_controls_noop,
+ onChange = box_control_input_control_noop,
+ onFocus = box_control_input_control_noop,
values,
selectedUnits,
setSelectedUnits,
sides,
+ side,
+ min = 0,
+ presets,
+ presetKey,
...props
}) {
- const generatedId = (0,external_wp_compose_namespaceObject.useInstanceId)(BoxInputControls, 'box-control-input');
- const createHandleOnFocus = side => event => {
+ var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;
+ const defaultValuesToModify = getSidesToModify(side, sides);
+ const handleOnFocus = event => {
onFocus(event, {
side
});
@@ -42102,14 +42806,22 @@
const handleOnChange = nextValues => {
onChange(nextValues);
};
- const handleOnValueChange = (side, next, extra) => {
+ const handleRawOnValueChange = next => {
+ const nextValues = {
+ ...values
+ };
+ defaultValuesToModify.forEach(modifiedSide => {
+ nextValues[modifiedSide] = next;
+ });
+ handleOnChange(nextValues);
+ };
+ const handleOnValueChange = (next, extra) => {
const nextValues = {
...values
};
const isNumeric = next !== undefined && !isNaN(parseFloat(next));
const nextValue = isNumeric ? next : undefined;
- nextValues[side] = nextValue;
-
+ const modifiedSides = getSidesToModify(side, sides,
/**
* Supports changing pair sides. For example, holding the ALT key
* when changing the TOP will also update BOTTOM.
@@ -42117,209 +42829,130 @@
// @ts-expect-error - TODO: event.altKey is only present when the change event was
// triggered by a keyboard event. Should this feature be implemented differently so
// it also works with drag events?
- if (extra?.event.altKey) {
- switch (side) {
- case 'top':
- nextValues.bottom = nextValue;
- break;
- case 'bottom':
- nextValues.top = nextValue;
- break;
- case 'left':
- nextValues.right = nextValue;
- break;
- case 'right':
- nextValues.left = nextValue;
- break;
- }
- }
+ !!extra?.event.altKey);
+ modifiedSides.forEach(modifiedSide => {
+ nextValues[modifiedSide] = nextValue;
+ });
handleOnChange(nextValues);
};
- const createHandleOnUnitChange = side => next => {
+ const handleOnUnitChange = next => {
const newUnits = {
...selectedUnits
};
- newUnits[side] = next;
+ defaultValuesToModify.forEach(modifiedSide => {
+ newUnits[modifiedSide] = next;
+ });
setSelectedUnits(newUnits);
};
-
- // Filter sides if custom configuration provided, maintaining default order.
- const filteredSides = sides?.length ? ALL_SIDES.filter(side => sides.includes(side)) : ALL_SIDES;
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
- children: filteredSides.map(side => {
- var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;
- const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(values[side]);
- const computedUnit = values[side] ? parsedUnit : selectedUnits[side];
- const inputId = [generatedId, side].join('-');
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(InputWrapper, {
- expanded: true,
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedBoxControlIcon, {
- side: side,
- sides: sides
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, {
- placement: "top-end",
- text: LABELS[side],
- children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledUnitControl, {
- ...props,
- __next40pxDefaultSize: __next40pxDefaultSize,
- className: "component-box-control__unit-control",
- id: inputId,
- isPressEnterToChange: true,
- value: [parsedQuantity, computedUnit].join(''),
- onChange: (nextValue, extra) => handleOnValueChange(side, nextValue, extra),
- onUnitChange: createHandleOnUnitChange(side),
- onFocus: createHandleOnFocus(side),
- label: LABELS[side],
- hideLabelFromVision: true
- })
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedRangeControl, {
- __nextHasNoMarginBottom: true,
+ const mergedValue = getMergedValue(values, defaultValuesToModify);
+ const hasValues = isValuesDefined(values);
+ const isMixed = hasValues && defaultValuesToModify.length > 1 && isValueMixed(values, defaultValuesToModify);
+ const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(mergedValue);
+ const computedUnit = hasValues ? parsedUnit : selectedUnits[defaultValuesToModify[0]];
+ const generatedId = (0,external_wp_compose_namespaceObject.useInstanceId)(BoxInputControl, 'box-control-input');
+ const inputId = [generatedId, side].join('-');
+ const isMixedUnit = defaultValuesToModify.length > 1 && mergedValue === undefined && defaultValuesToModify.some(s => selectedUnits[s] !== computedUnit);
+ const usedValue = mergedValue === undefined && computedUnit ? computedUnit : mergedValue;
+ const mixedPlaceholder = isMixed || isMixedUnit ? (0,external_wp_i18n_namespaceObject.__)('Mixed') : undefined;
+ const hasPresets = presets && presets.length > 0 && presetKey;
+ const hasPresetValue = hasPresets && mergedValue !== undefined && !isMixed && isValuePreset(mergedValue, presetKey);
+ const [showCustomValueControl, setShowCustomValueControl] = (0,external_wp_element_namespaceObject.useState)(!hasPresets || !hasPresetValue && !isMixed && mergedValue !== undefined);
+ const presetIndex = hasPresetValue ? getPresetIndexFromValue(mergedValue, presetKey, presets) : undefined;
+ const marks = hasPresets ? [{
+ value: 0,
+ label: '',
+ tooltip: (0,external_wp_i18n_namespaceObject.__)('None')
+ }].concat(presets.map((preset, index) => {
+ var _preset$name;
+ return {
+ value: index + 1,
+ label: '',
+ tooltip: (_preset$name = preset.name) !== null && _preset$name !== void 0 ? _preset$name : preset.slug
+ };
+ })) : [];
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(InputWrapper, {
+ expanded: true,
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedBoxControlIcon, {
+ side: side,
+ sides: sides
+ }), showCustomValueControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, {
+ placement: "top-end",
+ text: LABELS[side],
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledUnitControl, {
+ ...props,
+ min: min,
+ __shouldNotWarnDeprecated36pxSize: true,
__next40pxDefaultSize: __next40pxDefaultSize,
- "aria-controls": inputId,
+ className: "component-box-control__unit-control",
+ id: inputId,
+ isPressEnterToChange: true,
+ disableUnits: isMixed || isMixedUnit,
+ value: usedValue,
+ onChange: handleOnValueChange,
+ onUnitChange: handleOnUnitChange,
+ onFocus: handleOnFocus,
label: LABELS[side],
- hideLabelFromVision: true,
- onChange: newValue => {
- handleOnValueChange(side, newValue !== undefined ? [newValue, computedUnit].join('') : undefined);
- },
- min: 0,
- max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,
- step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,
- value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0,
- withInputField: false
- })]
- }, `box-control-${side}`);
- })
- });
-}
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/axial-input-controls.js
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-
-
-
-
-
-
-
-const groupedSides = ['vertical', 'horizontal'];
-function AxialInputControls({
- __next40pxDefaultSize,
- onChange,
- onFocus,
- values,
- selectedUnits,
- setSelectedUnits,
- sides,
- ...props
-}) {
- const generatedId = (0,external_wp_compose_namespaceObject.useInstanceId)(AxialInputControls, `box-control-input`);
- const createHandleOnFocus = side => event => {
- if (!onFocus) {
- return;
- }
- onFocus(event, {
- side
- });
- };
- const handleOnValueChange = (side, next) => {
- if (!onChange) {
- return;
- }
- const nextValues = {
- ...values
- };
- const isNumeric = next !== undefined && !isNaN(parseFloat(next));
- const nextValue = isNumeric ? next : undefined;
- if (side === 'vertical') {
- nextValues.top = nextValue;
- nextValues.bottom = nextValue;
- }
- if (side === 'horizontal') {
- nextValues.left = nextValue;
- nextValues.right = nextValue;
- }
- onChange(nextValues);
- };
- const createHandleOnUnitChange = side => next => {
- const newUnits = {
- ...selectedUnits
- };
- if (side === 'vertical') {
- newUnits.top = next;
- newUnits.bottom = next;
- }
- if (side === 'horizontal') {
- newUnits.left = next;
- newUnits.right = next;
- }
- setSelectedUnits(newUnits);
- };
-
- // Filter sides if custom configuration provided, maintaining default order.
- const filteredSides = sides?.length ? groupedSides.filter(side => sides.includes(side)) : groupedSides;
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
- children: filteredSides.map(side => {
- var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;
- const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(side === 'vertical' ? values.top : values.left);
- const selectedUnit = side === 'vertical' ? selectedUnits.top : selectedUnits.left;
- const inputId = [generatedId, side].join('-');
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(InputWrapper, {
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedBoxControlIcon, {
- side: side,
- sides: sides
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, {
- placement: "top-end",
- text: LABELS[side],
- children: /*#__PURE__*/(0,external_React_.createElement)(StyledUnitControl, {
- ...props,
- __next40pxDefaultSize: __next40pxDefaultSize,
- className: "component-box-control__unit-control",
- id: inputId,
- isPressEnterToChange: true,
- value: [parsedQuantity, selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : parsedUnit].join(''),
- onChange: newValue => handleOnValueChange(side, newValue),
- onUnitChange: createHandleOnUnitChange(side),
- onFocus: createHandleOnFocus(side),
- label: LABELS[side],
- hideLabelFromVision: true,
- key: side
- })
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedRangeControl, {
- __nextHasNoMarginBottom: true,
- __next40pxDefaultSize: __next40pxDefaultSize,
- "aria-controls": inputId,
- label: LABELS[side],
- hideLabelFromVision: true,
- onChange: newValue => handleOnValueChange(side, newValue !== undefined ? [newValue, selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : parsedUnit].join('') : undefined),
- min: 0,
- max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,
- step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,
- value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0,
- withInputField: false
- })]
- }, side);
- })
- });
-}
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/linked-button.js
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
+ placeholder: mixedPlaceholder,
+ hideLabelFromVision: true
+ })
+ }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedRangeControl, {
+ __nextHasNoMarginBottom: true,
+ __next40pxDefaultSize: __next40pxDefaultSize,
+ __shouldNotWarnDeprecated36pxSize: true,
+ "aria-controls": inputId,
+ label: LABELS[side],
+ hideLabelFromVision: true,
+ onChange: newValue => {
+ handleOnValueChange(newValue !== undefined ? [newValue, computedUnit].join('') : undefined);
+ },
+ min: isFinite(min) ? min : 0,
+ max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,
+ step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,
+ value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0,
+ withInputField: false
+ })]
+ }), hasPresets && !showCustomValueControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedRangeControl, {
+ __next40pxDefaultSize: true,
+ className: "spacing-sizes-control__range-control",
+ value: presetIndex !== undefined ? presetIndex + 1 : 0,
+ onChange: newIndex => {
+ const newValue = newIndex === 0 || newIndex === undefined ? undefined : getPresetValueFromIndex(newIndex - 1, presetKey, presets);
+ handleRawOnValueChange(newValue);
+ },
+ withInputField: false,
+ "aria-valuenow": presetIndex !== undefined ? presetIndex + 1 : 0,
+ "aria-valuetext": marks[presetIndex !== undefined ? presetIndex + 1 : 0].tooltip,
+ renderTooltipContent: index => marks[!index ? 0 : index].tooltip,
+ min: 0,
+ max: marks.length - 1,
+ marks: marks,
+ label: LABELS[side],
+ hideLabelFromVision: true,
+ __nextHasNoMarginBottom: true
+ }), hasPresets && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
+ label: showCustomValueControl ? (0,external_wp_i18n_namespaceObject.__)('Use size preset') : (0,external_wp_i18n_namespaceObject.__)('Set custom size'),
+ icon: library_settings,
+ onClick: () => {
+ setShowCustomValueControl(!showCustomValueControl);
+ },
+ isPressed: showCustomValueControl,
+ size: "small",
+ iconSize: 24
+ })]
+ }, `box-control-${side}`);
+}
+
+;// ./node_modules/@wordpress/components/build-module/box-control/linked-button.js
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
function LinkedButton({
@@ -42327,32 +42960,28 @@
...props
}) {
const label = isLinked ? (0,external_wp_i18n_namespaceObject.__)('Unlink sides') : (0,external_wp_i18n_namespaceObject.__)('Link sides');
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, {
- text: label,
- children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
- ...props,
- className: "component-box-control__linked-button",
- size: "small",
- icon: isLinked ? library_link : link_off,
- iconSize: 24,
- "aria-label": label
- })
- });
-}
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/index.js
-/**
- * WordPress dependencies
- */
-
-
-
-
-/**
- * Internal dependencies
- */
-
-
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
+ ...props,
+ className: "component-box-control__linked-button",
+ size: "small",
+ icon: isLinked ? library_link : link_off,
+ iconSize: 24,
+ label: label
+ });
+}
+
+;// ./node_modules/@wordpress/components/build-module/box-control/index.js
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -42373,27 +43002,28 @@
}
/**
- * BoxControl components let users set values for Top, Right, Bottom, and Left.
- * This can be used as an input control for values like `padding` or `margin`.
- *
- * ```jsx
- * import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const Example = () => {
- * const [ values, setValues ] = useState( {
- * top: '50px',
- * left: '10%',
- * right: '10%',
- * bottom: '50px',
- * } );
- *
- * return (
- * <BoxControl
- * values={ values }
- * onChange={ ( nextValues ) => setValues( nextValues ) }
- * />
- * );
+ * A control that lets users set values for top, right, bottom, and left. Can be
+ * used as an input control for values like `padding` or `margin`.
+ *
+ * ```jsx
+ * import { useState } from 'react';
+ * import { BoxControl } from '@wordpress/components';
+ *
+ * function Example() {
+ * const [ values, setValues ] = useState( {
+ * top: '50px',
+ * left: '10%',
+ * right: '10%',
+ * bottom: '50px',
+ * } );
+ *
+ * return (
+ * <BoxControl
+ * __next40pxDefaultSize
+ * values={ values }
+ * onChange={ setValues }
+ * />
+ * );
* };
* ```
*/
@@ -42409,6 +43039,8 @@
splitOnAxis = false,
allowReset = true,
resetValues = DEFAULT_VALUES,
+ presets,
+ presetKey,
onMouseOver,
onMouseOut
}) {
@@ -42419,7 +43051,7 @@
const hasInitialValue = isValuesDefined(valuesProp);
const hasOneSide = sides?.length === 1;
const [isDirty, setIsDirty] = (0,external_wp_element_namespaceObject.useState)(hasInitialValue);
- const [isLinked, setIsLinked] = (0,external_wp_element_namespaceObject.useState)(!hasInitialValue || !isValuesMixed(inputValues) || hasOneSide);
+ const [isLinked, setIsLinked] = (0,external_wp_element_namespaceObject.useState)(!hasInitialValue || !isValueMixed(inputValues) || hasOneSide);
const [side, setSide] = (0,external_wp_element_namespaceObject.useState)(getInitialSide(isLinked, splitOnAxis));
// Tracking selected units via internal state allows filtering of CSS unit
@@ -42454,6 +43086,8 @@
setIsDirty(false);
};
const inputControlProps = {
+ onMouseOver,
+ onMouseOut,
...inputProps,
onChange: handleOnChange,
onFocus: handleOnFocus,
@@ -42463,10 +43097,21 @@
setSelectedUnits,
sides,
values: inputValues,
- onMouseOver,
- onMouseOut,
- __next40pxDefaultSize
- };
+ __next40pxDefaultSize,
+ presets,
+ presetKey
+ };
+ maybeWarnDeprecated36pxSize({
+ componentName: 'BoxControl',
+ __next40pxDefaultSize,
+ size: undefined
+ });
+ const sidesToRender = getAllowedSides(sides);
+ if (presets && !presetKey || !presets && presetKey) {
+ const definedProp = presets ? 'presets' : 'presetKey';
+ const missingProp = presets ? 'presetKey' : 'presets';
+ true ? external_wp_warning_default()(`wp.components.BoxControl: the '${missingProp}' prop is required when the '${definedProp}' prop is defined.`) : 0;
+ }
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(grid_component, {
id: id,
columns: 3,
@@ -42476,23 +43121,23 @@
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BaseControl.VisualLabel, {
id: headingId,
children: label
- }), isLinked && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(InputWrapper, {
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedBoxControlIcon, {
- side: side,
- sides: sides
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AllInputControl, {
+ }), isLinked && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputWrapper, {
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BoxInputControl, {
+ side: "all",
...inputControlProps
- })]
+ })
}), !hasOneSide && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LinkedButtonWrapper, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LinkedButton, {
onClick: toggleLinked,
isLinked: isLinked
})
- }), !isLinked && splitOnAxis && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AxialInputControls, {
+ }), !isLinked && splitOnAxis && ['vertical', 'horizontal'].map(axis => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BoxInputControl, {
+ side: axis,
...inputControlProps
- }), !isLinked && !splitOnAxis && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BoxInputControls, {
+ }, axis)), !isLinked && !splitOnAxis && Array.from(sidesToRender).map(axis => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BoxInputControl, {
+ side: axis,
...inputControlProps
- }), allowReset && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ResetButton, {
+ }, axis)), allowReset && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ResetButton, {
className: "component-box-control__reset-button",
variant: "secondary",
size: "small",
@@ -42505,14 +43150,15 @@
/* harmony default export */ const box_control = (BoxControl);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/button-group/index.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
+;// ./node_modules/@wordpress/components/build-module/button-group/index.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
/**
@@ -42522,9 +43168,16 @@
function UnforwardedButtonGroup(props, ref) {
const {
className,
+ __shouldNotWarnDeprecated,
...restProps
} = props;
const classes = dist_clsx('components-button-group', className);
+ if (!__shouldNotWarnDeprecated) {
+ external_wp_deprecated_default()('wp.components.ButtonGroup', {
+ since: '6.8',
+ alternative: 'wp.components.__experimentalToggleGroupControl'
+ });
+ }
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
ref: ref,
role: "group",
@@ -42537,6 +43190,8 @@
* ButtonGroup can be used to group any related buttons together. To emphasize
* related buttons, a group should share a common container.
*
+ * @deprecated Use `ToggleGroupControl` instead.
+ *
* ```jsx
* import { Button, ButtonGroup } from '@wordpress/components';
*
@@ -42551,7 +43206,7 @@
const ButtonGroup = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedButtonGroup);
/* harmony default export */ const button_group = (ButtonGroup);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/elevation/styles.js
+;// ./node_modules/@wordpress/components/build-module/elevation/styles.js
function elevation_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
* External dependencies
@@ -42562,7 +43217,7 @@
styles: "background:transparent;display:block;margin:0!important;pointer-events:none;position:absolute;will-change:box-shadow"
} : 0;
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/elevation/hook.js
+;// ./node_modules/@wordpress/components/build-module/elevation/hook.js
/**
* External dependencies
*/
@@ -42638,7 +43293,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/elevation/component.js
+;// ./node_modules/@wordpress/components/build-module/elevation/component.js
/**
* External dependencies
*/
@@ -42685,7 +43340,7 @@
const component_Elevation = contextConnect(UnconnectedElevation, 'Elevation');
/* harmony default export */ const elevation_component = (component_Elevation);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/styles.js
+;// ./node_modules/@wordpress/components/build-module/card/styles.js
function card_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
* External dependencies
@@ -42701,7 +43356,7 @@
// (as opposed to the `border` property), the value of the border radius needs
// to be adjusted by removing 1px (this is because the `box-shadow` renders
// as an "outer radius").
-const adjustedBorderRadius = `calc(${config_values.cardBorderRadius} - 1px)`;
+const adjustedBorderRadius = `calc(${config_values.radiusLarge} - 1px)`;
const Card = /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:0 0 0 1px ", config_values.surfaceBorderColor, ";outline:none;" + ( true ? "" : 0), true ? "" : 0);
const Header = true ? {
name: "1showjb",
@@ -42750,7 +43405,7 @@
};
const shady = /*#__PURE__*/emotion_react_browser_esm_css("background-color:", COLORS.ui.backgroundDisabled, ";" + ( true ? "" : 0), true ? "" : 0);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/surface/styles.js
+;// ./node_modules/@wordpress/components/build-module/surface/styles.js
/**
* External dependencies
*/
@@ -42815,7 +43470,7 @@
}
};
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/surface/hook.js
+;// ./node_modules/@wordpress/components/build-module/surface/hook.js
/**
* WordPress dependencies
*/
@@ -42856,7 +43511,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card/hook.js
+;// ./node_modules/@wordpress/components/build-module/card/card/hook.js
/**
* WordPress dependencies
*/
@@ -42922,20 +43577,19 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card/component.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/card/card/component.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
@@ -42954,9 +43608,9 @@
size,
...otherProps
} = useCard(props);
- const elevationBorderRadius = isRounded ? config_values.cardBorderRadius : 0;
+ const elevationBorderRadius = isRounded ? config_values.radiusLarge : 0;
const cx = useCx();
- const elevationClassName = (0,external_wp_element_namespaceObject.useMemo)(() => cx( /*#__PURE__*/emotion_react_browser_esm_css({
+ const elevationClassName = (0,external_wp_element_namespaceObject.useMemo)(() => cx(/*#__PURE__*/emotion_react_browser_esm_css({
borderRadius: elevationBorderRadius
}, true ? "" : 0, true ? "" : 0)), [cx, elevationBorderRadius]);
const contextProviderValue = (0,external_wp_element_namespaceObject.useMemo)(() => {
@@ -43026,7 +43680,7 @@
const component_Card = contextConnect(UnconnectedCard, 'Card');
/* harmony default export */ const card_component = (component_Card);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/scrollable/styles.js
+;// ./node_modules/@wordpress/components/build-module/scrollable/styles.js
function scrollable_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
* External dependencies
@@ -43063,7 +43717,7 @@
styles: "overflow-y:auto"
} : 0;
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/scrollable/hook.js
+;// ./node_modules/@wordpress/components/build-module/scrollable/hook.js
/**
* WordPress dependencies
*/
@@ -43091,7 +43745,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/scrollable/component.js
+;// ./node_modules/@wordpress/components/build-module/scrollable/component.js
/**
* External dependencies
*/
@@ -43130,7 +43784,7 @@
const component_Scrollable = contextConnect(UnconnectedScrollable, 'Scrollable');
/* harmony default export */ const scrollable_component = (component_Scrollable);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-body/hook.js
+;// ./node_modules/@wordpress/components/build-module/card/card-body/hook.js
/**
* WordPress dependencies
*/
@@ -43162,7 +43816,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-body/component.js
+;// ./node_modules/@wordpress/components/build-module/card/card-body/component.js
/**
* External dependencies
*/
@@ -43210,31 +43864,31 @@
const CardBody = contextConnect(UnconnectedCardBody, 'CardBody');
/* harmony default export */ const card_body_component = (CardBody);
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/YZEJGRDQ.js
-"use client";
-
-
-
-// src/separator/separator.ts
+;// ./node_modules/@ariakit/react-core/esm/__chunks/A3CZKICO.js
+"use client";
+
+
+
+// src/separator/separator.tsx
+var A3CZKICO_TagName = "hr";
var useSeparator = createHook(
- (_a) => {
+ function useSeparator2(_a) {
var _b = _a, { orientation = "horizontal" } = _b, props = __objRest(_b, ["orientation"]);
- props = _4R3V3JGP_spreadValues({
+ props = _3YLGPPWQ_spreadValues({
role: "separator",
"aria-orientation": orientation
}, props);
return props;
}
);
-var Separator = createComponent((props) => {
+var Separator = forwardRef2(function Separator2(props) {
const htmlProps = useSeparator(props);
- return _3ORBWXWF_createElement("hr", htmlProps);
-});
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/divider/styles.js
+ return LMDWO4NN_createElement(A3CZKICO_TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@wordpress/components/build-module/divider/styles.js
function divider_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
@@ -43297,11 +43951,10 @@
target: "e19on6iw0"
} : 0)("border:0;margin:0;", renderDisplay, " ", renderBorder, " ", renderSize, " ", renderMargin, ";" + ( true ? "" : 0));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/divider/component.js
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
+;// ./node_modules/@wordpress/components/build-module/divider/component.js
+/**
+ * External dependencies
+ */
/**
@@ -43344,7 +43997,7 @@
const component_Divider = contextConnect(UnconnectedDivider, 'Divider');
/* harmony default export */ const divider_component = (component_Divider);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-divider/hook.js
+;// ./node_modules/@wordpress/components/build-module/card/card-divider/hook.js
/**
* WordPress dependencies
*/
@@ -43372,7 +44025,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-divider/component.js
+;// ./node_modules/@wordpress/components/build-module/card/card-divider/component.js
/**
* External dependencies
*/
@@ -43410,7 +44063,7 @@
const CardDivider = contextConnect(UnconnectedCardDivider, 'CardDivider');
/* harmony default export */ const card_divider_component = (CardDivider);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-footer/hook.js
+;// ./node_modules/@wordpress/components/build-module/card/card-footer/hook.js
/**
* WordPress dependencies
*/
@@ -43443,7 +44096,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-footer/component.js
+;// ./node_modules/@wordpress/components/build-module/card/card-footer/component.js
/**
* External dependencies
*/
@@ -43479,7 +44132,7 @@
const CardFooter = contextConnect(UnconnectedCardFooter, 'CardFooter');
/* harmony default export */ const card_footer_component = (CardFooter);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-header/hook.js
+;// ./node_modules/@wordpress/components/build-module/card/card-header/hook.js
/**
* WordPress dependencies
*/
@@ -43510,7 +44163,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-header/component.js
+;// ./node_modules/@wordpress/components/build-module/card/card-header/component.js
/**
* External dependencies
*/
@@ -43546,7 +44199,7 @@
const CardHeader = contextConnect(UnconnectedCardHeader, 'CardHeader');
/* harmony default export */ const card_header_component = (CardHeader);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-media/hook.js
+;// ./node_modules/@wordpress/components/build-module/card/card-media/hook.js
/**
* WordPress dependencies
*/
@@ -43574,7 +44227,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-media/component.js
+;// ./node_modules/@wordpress/components/build-module/card/card-media/component.js
/**
* External dependencies
*/
@@ -43616,23 +44269,22 @@
const CardMedia = contextConnect(UnconnectedCardMedia, 'CardMedia');
/* harmony default export */ const card_media_component = (CardMedia);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/checkbox-control/index.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/checkbox-control/index.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -43647,6 +44299,7 @@
* const [ isChecked, setChecked ] = useState( true );
* return (
* <CheckboxControl
+ * __nextHasNoMarginBottom
* label="Is author"
* help="Is the user a author or not?"
* checked={ isChecked }
@@ -43694,6 +44347,7 @@
const onChangeValue = event => onChange(event.target.checked);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, {
__nextHasNoMarginBottom: __nextHasNoMarginBottom,
+ __associatedWPComponentName: "CheckboxControl",
label: heading,
id: id,
help: help && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
@@ -43736,7 +44390,7 @@
}
/* harmony default export */ const checkbox_control = (CheckboxControl);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/clipboard-button/index.js
+;// ./node_modules/@wordpress/components/build-module/clipboard-button/index.js
/**
* External dependencies
*/
@@ -43767,20 +44421,22 @@
since: '5.8',
alternative: 'wp.compose.useCopyToClipboard'
});
- const timeoutId = (0,external_wp_element_namespaceObject.useRef)();
+ const timeoutIdRef = (0,external_wp_element_namespaceObject.useRef)();
const ref = (0,external_wp_compose_namespaceObject.useCopyToClipboard)(text, () => {
onCopy();
- if (timeoutId.current) {
- clearTimeout(timeoutId.current);
+ if (timeoutIdRef.current) {
+ clearTimeout(timeoutIdRef.current);
}
if (onFinishCopy) {
- timeoutId.current = setTimeout(() => onFinishCopy(), TIMEOUT);
+ timeoutIdRef.current = setTimeout(() => onFinishCopy(), TIMEOUT);
}
});
(0,external_wp_element_namespaceObject.useEffect)(() => {
- if (timeoutId.current) {
- clearTimeout(timeoutId.current);
- }
+ return () => {
+ if (timeoutIdRef.current) {
+ clearTimeout(timeoutIdRef.current);
+ }
+ };
}, []);
const classes = dist_clsx('components-clipboard-button', className);
@@ -43802,7 +44458,7 @@
});
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/more-vertical.js
+;// ./node_modules/@wordpress/icons/build-module/library/more-vertical.js
/**
* WordPress dependencies
*/
@@ -43817,7 +44473,7 @@
});
/* harmony default export */ const more_vertical = (moreVertical);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/item-group/styles.js
+;// ./node_modules/@wordpress/components/build-module/item-group/styles.js
function item_group_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
* External dependencies
@@ -43841,7 +44497,7 @@
} : 0;
const bordered = /*#__PURE__*/emotion_react_browser_esm_css("border:1px solid ", config_values.surfaceBorderColor, ";" + ( true ? "" : 0), true ? "" : 0);
const separated = /*#__PURE__*/emotion_react_browser_esm_css(">*:not( marquee )>*{border-bottom:1px solid ", config_values.surfaceBorderColor, ";}>*:last-of-type>*:not( :focus ){border-bottom-color:transparent;}" + ( true ? "" : 0), true ? "" : 0);
-const styles_borderRadius = config_values.controlBorderRadius;
+const styles_borderRadius = config_values.radiusSmall;
const styles_spacedAround = /*#__PURE__*/emotion_react_browser_esm_css("border-radius:", styles_borderRadius, ";" + ( true ? "" : 0), true ? "" : 0);
const styles_rounded = /*#__PURE__*/emotion_react_browser_esm_css("border-radius:", styles_borderRadius, ";>*:first-of-type>*{border-top-left-radius:", styles_borderRadius, ";border-top-right-radius:", styles_borderRadius, ";}>*:last-of-type>*{border-bottom-left-radius:", styles_borderRadius, ";border-bottom-right-radius:", styles_borderRadius, ";}" + ( true ? "" : 0), true ? "" : 0);
const baseFontHeight = `calc(${config_values.fontSize} * ${config_values.fontLineHeightBase})`;
@@ -43857,12 +44513,122 @@
const paddingYSmall = `calc((${config_values.controlHeightSmall} - ${baseFontHeight} - 2px) / 2)`;
const paddingYLarge = `calc((${config_values.controlHeightLarge} - ${baseFontHeight} - 2px) / 2)`;
const itemSizes = {
- small: /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingYSmall, " ", config_values.controlPaddingXSmall, ";" + ( true ? "" : 0), true ? "" : 0),
- medium: /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingY, " ", config_values.controlPaddingX, ";" + ( true ? "" : 0), true ? "" : 0),
- large: /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingYLarge, " ", config_values.controlPaddingXLarge, ";" + ( true ? "" : 0), true ? "" : 0)
-};
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/item-group/item-group/hook.js
+ small: /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingYSmall, " ", config_values.controlPaddingXSmall, "px;" + ( true ? "" : 0), true ? "" : 0),
+ medium: /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingY, " ", config_values.controlPaddingX, "px;" + ( true ? "" : 0), true ? "" : 0),
+ large: /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingYLarge, " ", config_values.controlPaddingXLarge, "px;" + ( true ? "" : 0), true ? "" : 0)
+};
+
+;// ./node_modules/@wordpress/components/build-module/item-group/context.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+const ItemGroupContext = (0,external_wp_element_namespaceObject.createContext)({
+ size: 'medium'
+});
+const useItemGroupContext = () => (0,external_wp_element_namespaceObject.useContext)(ItemGroupContext);
+
+;// ./node_modules/@wordpress/components/build-module/item-group/item/hook.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+function useItem(props) {
+ const {
+ as: asProp,
+ className,
+ onClick,
+ role = 'listitem',
+ size: sizeProp,
+ ...otherProps
+ } = useContextSystem(props, 'Item');
+ const {
+ spacedAround,
+ size: contextSize
+ } = useItemGroupContext();
+ const size = sizeProp || contextSize;
+ const as = asProp || (typeof onClick !== 'undefined' ? 'button' : 'div');
+ const cx = useCx();
+ const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx((as === 'button' || as === 'a') && unstyledButton(as), itemSizes[size] || itemSizes.medium, item, spacedAround && styles_spacedAround, className), [as, className, cx, size, spacedAround]);
+ const wrapperClassName = cx(itemWrapper);
+ return {
+ as,
+ className: classes,
+ onClick,
+ wrapperClassName,
+ role,
+ ...otherProps
+ };
+}
+
+;// ./node_modules/@wordpress/components/build-module/item-group/item/component.js
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+function UnconnectedItem(props, forwardedRef) {
+ const {
+ role,
+ wrapperClassName,
+ ...otherProps
+ } = useItem(props);
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
+ role: role,
+ className: wrapperClassName,
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, {
+ ...otherProps,
+ ref: forwardedRef
+ })
+ });
+}
+
+/**
+ * `Item` is used in combination with `ItemGroup` to display a list of items
+ * grouped and styled together.
+ *
+ * ```jsx
+ * import {
+ * __experimentalItemGroup as ItemGroup,
+ * __experimentalItem as Item,
+ * } from '@wordpress/components';
+ *
+ * function Example() {
+ * return (
+ * <ItemGroup>
+ * <Item>Code</Item>
+ * <Item>is</Item>
+ * <Item>Poetry</Item>
+ * </ItemGroup>
+ * );
+ * }
+ * ```
+ */
+const component_Item = contextConnect(UnconnectedItem, 'Item');
+/* harmony default export */ const item_component = (component_Item);
+
+;// ./node_modules/@wordpress/components/build-module/item-group/item-group/hook.js
/**
* Internal dependencies
*/
@@ -43894,22 +44660,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/item-group/context.js
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
-const ItemGroupContext = (0,external_wp_element_namespaceObject.createContext)({
- size: 'medium'
-});
-const useItemGroupContext = () => (0,external_wp_element_namespaceObject.useContext)(ItemGroupContext);
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/item-group/item-group/component.js
+;// ./node_modules/@wordpress/components/build-module/item-group/item-group/component.js
/**
* External dependencies
*/
@@ -43971,7 +44722,7 @@
const ItemGroup = contextConnect(UnconnectedItemGroup, 'ItemGroup');
/* harmony default export */ const item_group_component = (ItemGroup);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/constants.js
+;// ./node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/constants.js
const GRADIENT_MARKERS_WIDTH = 16;
const INSERT_POINT_WIDTH = 16;
const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10;
@@ -43980,7 +44731,7 @@
const KEYBOARD_CONTROL_POINT_VARIATION = MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;
const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER = (INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH) / 2;
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/utils.js
+;// ./node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/utils.js
/**
* Internal dependencies
*/
@@ -44137,26 +44888,24 @@
return Math.round(clampPercent(absolutePositionValue * 100 / width));
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/control-points.js
-/**
- * External dependencies
- */
-
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-
-/**
- * Internal dependencies
- */
-
-
+;// ./node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/control-points.js
+/**
+ * External dependencies
+ */
+
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -44177,11 +44926,12 @@
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
"aria-label": (0,external_wp_i18n_namespaceObject.sprintf)(
- // translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).
+ // translators: 1: gradient position e.g: 70. 2: gradient color code e.g: rgb(52,121,151).
(0,external_wp_i18n_namespaceObject.__)('Gradient control point at position %1$s%% with color code %2$s.'), position, color),
"aria-describedby": descriptionId,
"aria-haspopup": "true",
"aria-expanded": isOpen,
+ __next40pxDefaultSize: true,
className: dist_clsx('components-custom-gradient-picker__control-point-button', {
'is-active': isOpen
}),
@@ -44225,9 +44975,9 @@
onStopControlPointChange,
__experimentalIsRenderedInSidebar
}) {
- const controlPointMoveState = (0,external_wp_element_namespaceObject.useRef)();
+ const controlPointMoveStateRef = (0,external_wp_element_namespaceObject.useRef)();
const onMouseMove = event => {
- if (controlPointMoveState.current === undefined || gradientPickerDomRef.current === null) {
+ if (controlPointMoveStateRef.current === undefined || gradientPickerDomRef.current === null) {
return;
}
const relativePosition = getHorizontalRelativeGradientPosition(event.clientX, gradientPickerDomRef.current);
@@ -44235,18 +44985,18 @@
initialPosition,
index,
significantMoveHappened
- } = controlPointMoveState.current;
+ } = controlPointMoveStateRef.current;
if (!significantMoveHappened && Math.abs(initialPosition - relativePosition) >= MINIMUM_SIGNIFICANT_MOVE) {
- controlPointMoveState.current.significantMoveHappened = true;
+ controlPointMoveStateRef.current.significantMoveHappened = true;
}
onChange(updateControlPointPosition(controlPoints, index, relativePosition));
};
const cleanEventListeners = () => {
- if (window && window.removeEventListener && controlPointMoveState.current && controlPointMoveState.current.listenersActivated) {
+ if (window && window.removeEventListener && controlPointMoveStateRef.current && controlPointMoveStateRef.current.listenersActivated) {
window.removeEventListener('mousemove', onMouseMove);
window.removeEventListener('mouseup', cleanEventListeners);
onStopControlPointChange();
- controlPointMoveState.current.listenersActivated = false;
+ controlPointMoveStateRef.current.listenersActivated = false;
}
};
@@ -44271,7 +45021,7 @@
onToggle
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ControlPointButton, {
onClick: () => {
- if (controlPointMoveState.current && controlPointMoveState.current.significantMoveHappened) {
+ if (controlPointMoveStateRef.current && controlPointMoveStateRef.current.significantMoveHappened) {
return;
}
if (isOpen) {
@@ -44283,7 +45033,7 @@
},
onMouseDown: () => {
if (window && window.addEventListener) {
- controlPointMoveState.current = {
+ controlPointMoveStateRef.current = {
initialPosition,
index,
significantMoveHappened: false,
@@ -44362,6 +45112,7 @@
isOpen,
onToggle
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
+ __next40pxDefaultSize: true,
"aria-expanded": isOpen,
"aria-haspopup": "true",
onClick: () => {
@@ -44399,21 +45150,20 @@
ControlPoints.InsertPoint = InsertPoint;
/* harmony default export */ const control_points = (ControlPoints);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/index.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
@@ -44569,7 +45319,7 @@
// EXTERNAL MODULE: ./node_modules/gradient-parser/build/node.js
var build_node = __webpack_require__(8924);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/constants.js
+;// ./node_modules/@wordpress/components/build-module/custom-gradient-picker/constants.js
/**
* WordPress dependencies
*/
@@ -44602,7 +45352,7 @@
'left top': 315
};
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/serializer.js
+;// ./node_modules/@wordpress/components/build-module/custom-gradient-picker/serializer.js
/**
* External dependencies
*/
@@ -44660,7 +45410,7 @@
return `${type}(${[serializedOrientation, ...serializedColorStops].filter(Boolean).join(',')})`;
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/utils.js
+;// ./node_modules/@wordpress/components/build-module/custom-gradient-picker/utils.js
/**
* External dependencies
*/
@@ -44761,7 +45511,7 @@
}
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/styles/custom-gradient-picker-styles.js
+;// ./node_modules/@wordpress/components/build-module/custom-gradient-picker/styles/custom-gradient-picker-styles.js
function custom_gradient_picker_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
@@ -44785,20 +45535,19 @@
styles: "flex-grow:5"
} : 0);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/index.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/custom-gradient-picker/index.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
@@ -44899,6 +45648,7 @@
function CustomGradientPicker({
value,
onChange,
+ enableAlpha = true,
__experimentalIsRenderedInSidebar = false
}) {
const {
@@ -44927,6 +45677,7 @@
className: "components-custom-gradient-picker",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CustomGradientBar, {
__experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+ disableAlpha: !enableAlpha,
background: background,
hasGradient: hasGradient,
value: controlPoints,
@@ -44954,18 +45705,17 @@
}
/* harmony default export */ const custom_gradient_picker = (CustomGradientPicker);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/gradient-picker/index.js
-/**
- * WordPress dependencies
- */
-
-
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/gradient-picker/index.js
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -45048,7 +45798,7 @@
})
});
}
-function gradient_picker_Component(props) {
+function Component(props) {
const {
asButtons,
loop,
@@ -45064,79 +45814,57 @@
}) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SingleOrigin, {
...additionalProps
});
- let metaProps;
- if (asButtons) {
- metaProps = {
- asButtons: true
- };
- } else {
- const _metaProps = {
- asButtons: false,
- loop
- };
- if (ariaLabel) {
- metaProps = {
- ..._metaProps,
- 'aria-label': ariaLabel
- };
- } else if (ariaLabelledby) {
- metaProps = {
- ..._metaProps,
- 'aria-labelledby': ariaLabelledby
- };
- } else {
- metaProps = {
- ..._metaProps,
- 'aria-label': (0,external_wp_i18n_namespaceObject.__)('Custom color picker.')
- };
- }
- }
+ const {
+ metaProps,
+ labelProps
+ } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker, {
...metaProps,
+ ...labelProps,
actions: actions,
options: options
});
}
/**
- * GradientPicker is a React component that renders a color gradient picker to
+ * GradientPicker is a React component that renders a color gradient picker to
* define a multi step gradient. There's either a _linear_ or a _radial_ type
* available.
*
* ```jsx
- *import { GradientPicker } from '@wordpress/components';
- *import { useState } from '@wordpress/element';
- *
- *const myGradientPicker = () => {
- * const [ gradient, setGradient ] = useState( null );
- *
- * return (
- * <GradientPicker
- * value={ gradient }
- * onChange={ ( currentGradient ) => setGradient( currentGradient ) }
- * gradients={ [
- * {
- * name: 'JShine',
- * gradient:
- * 'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
- * slug: 'jshine',
- * },
- * {
- * name: 'Moonlit Asteroid',
- * gradient:
- * 'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
- * slug: 'moonlit-asteroid',
- * },
- * {
- * name: 'Rastafarie',
- * gradient:
- * 'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
- * slug: 'rastafari',
- * },
- * ] }
- * />
- * );
- *};
+ * import { useState } from 'react';
+ * import { GradientPicker } from '@wordpress/components';
+ *
+ * const MyGradientPicker = () => {
+ * const [ gradient, setGradient ] = useState( null );
+ *
+ * return (
+ * <GradientPicker
+ * value={ gradient }
+ * onChange={ ( currentGradient ) => setGradient( currentGradient ) }
+ * gradients={ [
+ * {
+ * name: 'JShine',
+ * gradient:
+ * 'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
+ * slug: 'jshine',
+ * },
+ * {
+ * name: 'Moonlit Asteroid',
+ * gradient:
+ * 'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
+ * slug: 'moonlit-asteroid',
+ * },
+ * {
+ * name: 'Rastafarie',
+ * gradient:
+ * 'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
+ * slug: 'rastafari',
+ * },
+ * ] }
+ * />
+ * );
+ * };
*```
*
*/
@@ -45146,6 +45874,7 @@
onChange,
value,
clearable = true,
+ enableAlpha = true,
disableCustomGradients = false,
__experimentalIsRenderedInSidebar,
headingLevel = 2,
@@ -45156,9 +45885,10 @@
spacing: gradients.length ? 4 : 0,
children: [!disableCustomGradients && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(custom_gradient_picker, {
__experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+ enableAlpha: enableAlpha,
value: value,
onChange: onChange
- }), (gradients.length > 0 || clearable) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(gradient_picker_Component, {
+ }), (gradients.length > 0 || clearable) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, {
...additionalProps,
className: className,
clearGradient: clearGradient,
@@ -45167,6 +45897,8 @@
value: value,
actions: clearable && !disableCustomGradients && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.ButtonAction, {
onClick: clearGradient,
+ accessibleWhenDisabled: true,
+ disabled: !value,
children: (0,external_wp_i18n_namespaceObject.__)('Clear')
}),
headingLevel: headingLevel
@@ -45175,7 +45907,7 @@
}
/* harmony default export */ const gradient_picker = (GradientPicker);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/menu.js
+;// ./node_modules/@wordpress/icons/build-module/library/menu.js
/**
* WordPress dependencies
*/
@@ -45190,9 +45922,9 @@
});
/* harmony default export */ const library_menu = (menu);
-;// CONCATENATED MODULE: external ["wp","dom"]
+;// external ["wp","dom"]
const external_wp_dom_namespaceObject = window["wp"]["dom"];
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigable-container/container.js
+;// ./node_modules/@wordpress/components/build-module/navigable-container/container.js
/**
* External dependencies
*/
@@ -45362,7 +46094,7 @@
forwardedNavigableContainer.displayName = 'NavigableContainer';
/* harmony default export */ const container = ((0,external_wp_element_namespaceObject.forwardRef)(forwardedNavigableContainer));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigable-container/menu.js
+;// ./node_modules/@wordpress/components/build-module/navigable-container/menu.js
/**
* External dependencies
*/
@@ -45447,21 +46179,20 @@
const NavigableMenu = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedNavigableMenu);
/* harmony default export */ const navigable_container_menu = (NavigableMenu);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dropdown-menu/index.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/dropdown-menu/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
@@ -45579,6 +46310,7 @@
...mergedMenuProps,
role: "menu",
children: [dropdown_menu_isFunction(children) ? children(props) : null, controlSets?.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
+ __next40pxDefaultSize: true,
onClick: event => {
event.stopPropagation();
props.onClose();
@@ -45595,6 +46327,7 @@
label: control.label,
"aria-checked": control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.isActive : undefined,
role: control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.role : 'menuitem',
+ accessibleWhenDisabled: true,
disabled: control.isDisabled,
children: control.title
}, [indexOfSet, indexOfControl].join())))]
@@ -45689,15 +46422,13 @@
const DropdownMenu = contextConnectWithoutRef(UnconnectedDropdownMenu, 'DropdownMenu');
/* harmony default export */ const dropdown_menu = (DropdownMenu);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/palette-edit/styles.js
+;// ./node_modules/@wordpress/components/build-module/palette-edit/styles.js
function palette_edit_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
* External dependencies
*/
-
-
/**
* Internal dependencies
*/
@@ -45710,22 +46441,11 @@
const IndicatorStyled = /*#__PURE__*/emotion_styled_base_browser_esm(color_indicator, true ? {
- target: "e1lpqc909"
+ target: "e1lpqc908"
} : 0)("&&{flex-shrink:0;width:", space(6), ";height:", space(6), ";}" + ( true ? "" : 0));
const NameInputControl = /*#__PURE__*/emotion_styled_base_browser_esm(input_control, true ? {
- target: "e1lpqc908"
-} : 0)(Container, "{background:", COLORS.gray[100], ";border-radius:", config_values.controlBorderRadius, ";", Input, Input, Input, Input, "{height:", space(8), ";}", BackdropUI, BackdropUI, BackdropUI, "{border-color:transparent;box-shadow:none;}}" + ( true ? "" : 0));
-const buttonStyleReset = ({
- as
-}) => {
- if (as === 'button') {
- return /*#__PURE__*/emotion_react_browser_esm_css("display:flex;align-items:center;width:100%;appearance:none;background:transparent;border:none;border-radius:0;padding:0;cursor:pointer;&:hover{color:", COLORS.theme.accent, ";}" + ( true ? "" : 0), true ? "" : 0);
- }
- return null;
-};
-const PaletteItem = /*#__PURE__*/emotion_styled_base_browser_esm(component, true ? {
target: "e1lpqc907"
-} : 0)(buttonStyleReset, " padding-block:3px;padding-inline-start:", space(3), ";border:1px solid ", config_values.surfaceBorderColor, ";border-bottom-color:transparent;font-size:", font('default.fontSize'), ";&:focus-visible{border-color:transparent;box-shadow:0 0 0 var( --wp-admin-border-width-focus ) ", COLORS.theme.accent, ";outline:2px solid transparent;outline-offset:0;}border-top-left-radius:", config_values.controlBorderRadius, ";border-top-right-radius:", config_values.controlBorderRadius, ";&+&{border-top-left-radius:0;border-top-right-radius:0;}&:last-child{border-bottom-left-radius:", config_values.controlBorderRadius, ";border-bottom-right-radius:", config_values.controlBorderRadius, ";border-bottom-color:", config_values.surfaceBorderColor, ";}&.is-selected+&{border-top-color:transparent;}&.is-selected{border-color:", COLORS.theme.accent, ";}" + ( true ? "" : 0));
+} : 0)(Container, "{background:", COLORS.gray[100], ";border-radius:", config_values.radiusXSmall, ";", Input, Input, Input, Input, "{height:", space(8), ";}", BackdropUI, BackdropUI, BackdropUI, "{border-color:transparent;box-shadow:none;}}" + ( true ? "" : 0));
const NameContainer = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
target: "e1lpqc906"
} : 0)("line-height:", space(8), ";margin-left:", space(2), ";margin-right:", space(2), ";white-space:nowrap;overflow:hidden;" + ( true ? "" : 0));
@@ -45751,25 +46471,23 @@
target: "e1lpqc900"
} : 0)("&&{margin-top:", space(1), ";}" + ( true ? "" : 0));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/palette-edit/index.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-
-/**
- * Internal dependencies
- */
-
-
+;// ./node_modules/@wordpress/components/build-module/palette-edit/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -45793,6 +46511,7 @@
label
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NameInputControl, {
+ size: "compact",
label: label,
hideLabelFromVision: true,
value: value,
@@ -45800,6 +46519,28 @@
});
}
+/*
+ * Deduplicates the slugs of the provided elements.
+ */
+function deduplicateElementSlugs(elements) {
+ const slugCounts = {};
+ return elements.map(element => {
+ var _newSlug;
+ let newSlug;
+ const {
+ slug
+ } = element;
+ slugCounts[slug] = (slugCounts[slug] || 0) + 1;
+ if (slugCounts[slug] > 1) {
+ newSlug = `${slug}-${slugCounts[slug] - 1}`;
+ }
+ return {
+ ...element,
+ slug: (_newSlug = newSlug) !== null && _newSlug !== void 0 ? _newSlug : slug
+ };
+ });
+}
+
/**
* Returns a name and slug for a palette item. The name takes the format "Color + id".
* To ensure there are no duplicate ids, this function checks all slugs.
@@ -45826,7 +46567,7 @@
return previousValue;
}, 1);
return {
- name: (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: is an id for a custom color */
+ name: (0,external_wp_i18n_namespaceObject.sprintf)(/* translators: %s: is an id for a custom color */
(0,external_wp_i18n_namespaceObject.__)('Color %s'), position),
slug: `${slugPrefix}color-${position}`
};
@@ -45896,12 +46637,13 @@
// Use the custom palette color item as the popover anchor.
anchor: popoverAnchor
}), [popoverAnchor, receivedPopoverProps]);
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(PaletteItem, {
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(item_component, {
ref: setPopoverAnchor,
- as: "div",
+ size: "small",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, {
justify: "flex-start",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
+ size: "small",
onClick: () => {
setIsEditingColor(true);
},
@@ -45956,15 +46698,17 @@
addColorRef
}) {
// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.
- const elementsReference = (0,external_wp_element_namespaceObject.useRef)();
+ const elementsReferenceRef = (0,external_wp_element_namespaceObject.useRef)();
(0,external_wp_element_namespaceObject.useEffect)(() => {
- elementsReference.current = elements;
+ elementsReferenceRef.current = elements;
}, [elements]);
- const debounceOnChange = (0,external_wp_compose_namespaceObject.useDebounce)(onChange, 100);
+ const debounceOnChange = (0,external_wp_compose_namespaceObject.useDebounce)(updatedElements => onChange(deduplicateElementSlugs(updatedElements)), 100);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(v_stack_component, {
spacing: 3,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(item_group_component, {
isRounded: true,
+ isBordered: true,
+ isSeparated: true,
children: elements.map((element, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(palette_edit_Option, {
isGradient: isGradient,
canOnlyChangeValues: canOnlyChangeValues,
@@ -46098,6 +46842,7 @@
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(navigable_container_menu, {
role: "menu",
children: [!isEditing && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
+ __next40pxDefaultSize: true,
variant: "tertiary",
onClick: () => {
setIsEditing(true);
@@ -46106,6 +46851,7 @@
className: "components-palette-edit__menu-button",
children: (0,external_wp_i18n_namespaceObject.__)('Show details')
}), !canOnlyChangeValues && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
+ __next40pxDefaultSize: true,
variant: "tertiary",
onClick: () => {
setEditingElement(null);
@@ -46116,6 +46862,8 @@
className: "components-palette-edit__menu-button",
children: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Remove all gradients') : (0,external_wp_i18n_namespaceObject.__)('Remove all colors')
}), canReset && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
+ __next40pxDefaultSize: true,
+ className: "components-palette-edit__menu-button",
variant: "tertiary",
onClick: () => {
setEditingElement(null);
@@ -46172,7 +46920,22 @@
}
/* harmony default export */ const palette_edit = (PaletteEdit);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/combobox-control/styles.js
+;// ./node_modules/@wordpress/icons/build-module/library/close-small.js
+/**
+ * WordPress dependencies
+ */
+
+
+const closeSmall = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
+ xmlns: "http://www.w3.org/2000/svg",
+ viewBox: "0 0 24 24",
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
+ d: "M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"
+ })
+});
+/* harmony default export */ const close_small = (closeSmall);
+
+;// ./node_modules/@wordpress/components/build-module/combobox-control/styles.js
/**
* External dependencies
@@ -46192,7 +46955,7 @@
target: "evuatpg0"
} : 0)("height:38px;padding-left:", space(2), ";padding-right:", space(2), ";", deprecatedDefaultSize, ";" + ( true ? "" : 0));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-token-field/token-input.js
+;// ./node_modules/@wordpress/components/build-module/form-token-field/token-input.js
/**
* External dependencies
*/
@@ -46263,20 +47026,20 @@
const TokenInput = (0,external_wp_element_namespaceObject.forwardRef)(UnForwardedTokenInput);
/* harmony default export */ const token_input = (TokenInput);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-token-field/suggestions-list.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/form-token-field/suggestions-list.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
const handleMouseDown = e => {
// By preventing default here, we will not lose focus of <input> when clicking a suggestion.
@@ -46333,12 +47096,12 @@
suggestionAfterMatch: transformedSuggestion.substring(indexOfMatch + matchText.length)
};
};
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("ul", {
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("ul", {
ref: listRef,
className: "components-form-token-field__suggestions-list",
id: `components-form-token-suggestions-${instanceId}`,
role: "listbox",
- children: suggestions.map((suggestion, index) => {
+ children: [suggestions.map((suggestion, index) => {
const matchText = computeSuggestionMatch(suggestion);
const isSelected = index === selectedIndex;
const isDisabled = typeof suggestion === 'object' && suggestion?.disabled;
@@ -46376,12 +47139,15 @@
children: output
}, key);
/* eslint-enable jsx-a11y/click-events-have-key-events */
- })
+ }), suggestions.length === 0 && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("li", {
+ className: "components-form-token-field__suggestion is-empty",
+ children: (0,external_wp_i18n_namespaceObject.__)('No items found')
+ })]
});
}
/* harmony default export */ const suggestions_list = (SuggestionsList);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-focus-outside/index.js
+;// ./node_modules/@wordpress/components/build-module/higher-order/with-focus-outside/index.js
/**
* WordPress dependencies
*/
@@ -46400,24 +47166,113 @@
});
}, 'withFocusOutside'));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/combobox-control/index.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-
-
-/**
- * Internal dependencies
- */
+;// ./node_modules/@wordpress/components/build-module/spinner/styles.js
+
+function spinner_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+/**
+ * External dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
+
+const spinAnimation = emotion_react_browser_esm_keyframes`
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+ `;
+const StyledSpinner = /*#__PURE__*/emotion_styled_base_browser_esm("svg", true ? {
+ target: "ea4tfvq2"
+} : 0)("width:", config_values.spinnerSize, "px;height:", config_values.spinnerSize, "px;display:inline-block;margin:5px 11px 0;position:relative;color:", COLORS.theme.accent, ";overflow:visible;opacity:1;background-color:transparent;" + ( true ? "" : 0));
+const commonPathProps = true ? {
+ name: "9s4963",
+ styles: "fill:transparent;stroke-width:1.5px"
+} : 0;
+const SpinnerTrack = /*#__PURE__*/emotion_styled_base_browser_esm("circle", true ? {
+ target: "ea4tfvq1"
+} : 0)(commonPathProps, ";stroke:", COLORS.gray[300], ";" + ( true ? "" : 0));
+const SpinnerIndicator = /*#__PURE__*/emotion_styled_base_browser_esm("path", true ? {
+ target: "ea4tfvq0"
+} : 0)(commonPathProps, ";stroke:currentColor;stroke-linecap:round;transform-origin:50% 50%;animation:1.4s linear infinite both ", spinAnimation, ";" + ( true ? "" : 0));
+
+;// ./node_modules/@wordpress/components/build-module/spinner/index.js
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+function UnforwardedSpinner({
+ className,
+ ...props
+}, forwardedRef) {
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(StyledSpinner, {
+ className: dist_clsx('components-spinner', className),
+ viewBox: "0 0 100 100",
+ width: "16",
+ height: "16",
+ xmlns: "http://www.w3.org/2000/svg",
+ role: "presentation",
+ focusable: "false",
+ ...props,
+ ref: forwardedRef,
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SpinnerTrack, {
+ cx: "50",
+ cy: "50",
+ r: "50",
+ vectorEffect: "non-scaling-stroke"
+ }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SpinnerIndicator, {
+ d: "m 50 0 a 50 50 0 0 1 50 50",
+ vectorEffect: "non-scaling-stroke"
+ })]
+ });
+}
+/**
+ * `Spinner` is a component used to notify users that their action is being processed.
+ *
+ * ```js
+ * import { Spinner } from '@wordpress/components';
+ *
+ * function Example() {
+ * return <Spinner />;
+ * }
+ * ```
+ */
+const Spinner = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSpinner);
+/* harmony default export */ const spinner = (Spinner);
+
+;// ./node_modules/@wordpress/components/build-module/combobox-control/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+
+
+/**
+ * Internal dependencies
+ */
+
@@ -46472,6 +47327,8 @@
* const [ filteredOptions, setFilteredOptions ] = useState( options );
* return (
* <ComboboxControl
+ * __next40pxDefaultSize
+ * __nextHasNoMarginBottom
* label="Font Size"
* value={ fontSize }
* onChange={ setFontSize }
@@ -46504,11 +47361,13 @@
help,
allowReset = true,
className,
+ isLoading = false,
messages = {
selected: (0,external_wp_i18n_namespaceObject.__)('Item selected.')
},
__experimentalRenderItem,
- expandOnFocus = true
+ expandOnFocus = true,
+ placeholder
} = useDeprecated36pxDefaultSizeProp(props);
const [value, setValue] = useControlledValue({
value: valueProp,
@@ -46622,6 +47481,13 @@
inputContainer.current?.focus();
};
+ // Stop propagation of the keydown event when pressing Enter on the Reset
+ // button to prevent calling the onKeydown callback on the container div
+ // element which actually sets the selected suggestion.
+ const handleResetStopPropagation = event => {
+ event.stopPropagation();
+ };
+
// Update current selections when the filter input changes.
(0,external_wp_element_namespaceObject.useEffect)(() => {
const hasMatchingSuggestions = matchingSuggestions.length > 0;
@@ -46636,11 +47502,16 @@
(0,external_wp_element_namespaceObject.useEffect)(() => {
const hasMatchingSuggestions = matchingSuggestions.length > 0;
if (isExpanded) {
- const message = hasMatchingSuggestions ? (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of results. */
+ const message = hasMatchingSuggestions ? (0,external_wp_i18n_namespaceObject.sprintf)(/* translators: %d: number of results. */
(0,external_wp_i18n_namespaceObject._n)('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', matchingSuggestions.length), matchingSuggestions.length) : (0,external_wp_i18n_namespaceObject.__)('No results.');
(0,external_wp_a11y_namespaceObject.speak)(message, 'polite');
}
}, [matchingSuggestions, isExpanded]);
+ maybeWarnDeprecated36pxSize({
+ componentName: 'ComboboxControl',
+ __next40pxDefaultSize,
+ size: undefined
+ });
// Disable reason: There is no appropriate role which describes the
// input container intended accessible usability.
@@ -46650,6 +47521,7 @@
onFocusOutside: onFocusOutside,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, {
__nextHasNoMarginBottom: __nextHasNoMarginBottom,
+ __associatedWPComponentName: "ComboboxControl",
className: dist_clsx(className, 'components-combobox-control'),
label: label,
id: `components-form-token-input-${instanceId}`,
@@ -46666,6 +47538,7 @@
className: "components-combobox-control__input",
instanceId: instanceId,
ref: inputContainer,
+ placeholder: placeholder,
value: isExpanded ? inputValue : currentLabel,
onFocus: onFocus,
onBlur: onBlur,
@@ -46674,16 +47547,18 @@
selectedSuggestionIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),
onChange: onInputChange
})
- }), allowReset && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_item_component, {
- children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
- className: "components-combobox-control__reset",
- icon: close_small,
- disabled: !value,
- onClick: handleOnReset,
- label: (0,external_wp_i18n_namespaceObject.__)('Reset')
- })
+ }), isLoading && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spinner, {}), allowReset && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
+ size: "small",
+ icon: close_small
+ // Disable reason: Focus returns to input field when reset is clicked.
+ // eslint-disable-next-line no-restricted-syntax
+ ,
+ disabled: !value,
+ onClick: handleOnReset,
+ onKeyDown: handleResetStopPropagation,
+ label: (0,external_wp_i18n_namespaceObject.__)('Reset')
})]
- }), isExpanded && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(suggestions_list, {
+ }), isExpanded && !isLoading && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(suggestions_list, {
instanceId: instanceId
// The empty string for `value` here is not actually used, but is
// just a quick way to satisfy the TypeScript requirements of SuggestionsList.
@@ -46708,71 +47583,7 @@
}
/* harmony default export */ const combobox_control = (ComboboxControl);
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/3X3MDQGM.js
-"use client";
-
-// src/group/group-label-context.ts
-
-var GroupLabelContext = (0,external_React_.createContext)(void 0);
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/R2QZ3KXH.js
-"use client";
-
-
-
-
-
-// src/group/group.tsx
-
-
-var useGroup = createHook((props) => {
- const [labelId, setLabelId] = (0,external_React_.useState)();
- props = useWrapElement(
- props,
- (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(GroupLabelContext.Provider, { value: setLabelId, children: element }),
- []
- );
- props = _4R3V3JGP_spreadValues({
- role: "group",
- "aria-labelledby": labelId
- }, props);
- return props;
-});
-var Group = createComponent((props) => {
- const htmlProps = useGroup(props);
- return _3ORBWXWF_createElement("div", htmlProps);
-});
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/636A7WVS.js
-"use client";
-
-
-
-
-// src/composite/composite-group.ts
-var useCompositeGroup = createHook(
- (_a) => {
- var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
- props = useGroup(props);
- return props;
- }
-);
-var CompositeGroup = createComponent(
- (props) => {
- const htmlProps = useCompositeGroup(props);
- return _3ORBWXWF_createElement("div", htmlProps);
- }
-);
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/composite/legacy/index.js
+;// ./node_modules/@wordpress/components/build-module/composite/legacy/index.js
/**
* Composite is a component that may contain navigable items represented by
* CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements
@@ -46780,18 +47591,29 @@
* tab stop for the whole Composite element. This means that it can behave as
* a roving tabindex or aria-activedescendant container.
*
+ * This file aims at providing components that are as close as possible to the
+ * original `reakit`-based implementation (which was removed from the codebase),
+ * although it is recommended that consumers of the package switch to the stable,
+ * un-prefixed, `ariakit`-based version of `Composite`.
+ *
* @see https://ariakit.org/components/composite
*/
/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
// Legacy composite components can either provide state through a
@@ -46819,15 +47641,29 @@
}
return legacyProps;
}
+const LEGACY_TO_NEW_DISPLAY_NAME = {
+ __unstableComposite: 'Composite',
+ __unstableCompositeGroup: 'Composite.Group or Composite.Row',
+ __unstableCompositeItem: 'Composite.Item',
+ __unstableUseCompositeState: 'Composite'
+};
function proxyComposite(ProxiedComponent, propMap = {}) {
- const displayName = ProxiedComponent.displayName;
+ var _ProxiedComponent$dis;
+ const displayName = (_ProxiedComponent$dis = ProxiedComponent.displayName) !== null && _ProxiedComponent$dis !== void 0 ? _ProxiedComponent$dis : '';
const Component = legacyProps => {
+ external_wp_deprecated_default()(`wp.components.${displayName}`, {
+ since: '6.7',
+ alternative: LEGACY_TO_NEW_DISPLAY_NAME.hasOwnProperty(displayName) ? LEGACY_TO_NEW_DISPLAY_NAME[displayName] : undefined
+ });
const {
store,
...rest
} = mapLegacyStatePropsToComponentProps(legacyProps);
- const props = rest;
- props.id = (0,external_wp_compose_namespaceObject.useInstanceId)(store, props.baseId, props.id);
+ let props = rest;
+ props = {
+ ...props,
+ id: (0,external_wp_compose_namespaceObject.useInstanceId)(store, props.baseId, props.id)
+ };
Object.entries(propMap).forEach(([from, to]) => {
if (props.hasOwnProperty(from)) {
Object.assign(props, {
@@ -46850,26 +47686,57 @@
// `CompositeRow`, but this has been split into two different
// components. We handle that difference by checking on the
// provided role, and returning the appropriate component.
-const unproxiedCompositeGroup = (0,external_wp_element_namespaceObject.forwardRef)(({
+const UnproxiedCompositeGroup = (0,external_wp_element_namespaceObject.forwardRef)(({
role,
...props
}, ref) => {
- const Component = role === 'row' ? CompositeRow : CompositeGroup;
+ const Component = role === 'row' ? Composite.Row : Composite.Group;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, {
ref: ref,
role: role,
...props
});
});
-unproxiedCompositeGroup.displayName = 'CompositeGroup';
-const legacy_Composite = proxyComposite(Composite, {
+
+/**
+ * _Note: please use the `Composite` component instead._
+ *
+ * @deprecated
+ */
+const legacy_Composite = proxyComposite(Object.assign(Composite, {
+ displayName: '__unstableComposite'
+}), {
baseId: 'id'
});
-const legacy_CompositeGroup = proxyComposite(unproxiedCompositeGroup);
-const legacy_CompositeItem = proxyComposite(CompositeItem, {
+/**
+ * _Note: please use the `Composite.Row` or `Composite.Group` components instead._
+ *
+ * @deprecated
+ */
+const legacy_CompositeGroup = proxyComposite(Object.assign(UnproxiedCompositeGroup, {
+ displayName: '__unstableCompositeGroup'
+}));
+/**
+ * _Note: please use the `Composite.Item` component instead._
+ *
+ * @deprecated
+ */
+const legacy_CompositeItem = proxyComposite(Object.assign(Composite.Item, {
+ displayName: '__unstableCompositeItem'
+}), {
focusable: 'accessibleWhenDisabled'
});
+
+/**
+ * _Note: please use the `Composite` component instead._
+ *
+ * @deprecated
+ */
function useCompositeState(legacyStateOptions = {}) {
+ external_wp_deprecated_default()(`wp.components.__unstableUseCompositeState`, {
+ since: '6.7',
+ alternative: LEGACY_TO_NEW_DISPLAY_NAME.__unstableUseCompositeState
+ });
const {
baseId,
currentId: defaultActiveId,
@@ -46895,7 +47762,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/modal/aria-helper.js
+;// ./node_modules/@wordpress/components/build-module/modal/aria-helper.js
const LIVE_REGION_ARIA_ROLES = new Set(['alert', 'status', 'log', 'marquee', 'timer']);
const hiddenElementsByDepth = [];
@@ -46935,7 +47802,7 @@
*/
function elementShouldBeHidden(element) {
const role = element.getAttribute('role');
- return !(element.tagName === 'SCRIPT' || element.hasAttribute('aria-hidden') || element.hasAttribute('aria-live') || role && LIVE_REGION_ARIA_ROLES.has(role));
+ return !(element.tagName === 'SCRIPT' || element.hasAttribute('hidden') || element.hasAttribute('aria-hidden') || element.hasAttribute('aria-live') || role && LIVE_REGION_ARIA_ROLES.has(role));
}
/**
@@ -46951,23 +47818,95 @@
}
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/modal/index.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-
-
-/**
- * Internal dependencies
- */
+;// ./node_modules/@wordpress/components/build-module/modal/use-modal-exit-animation.js
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+// Animation duration (ms) extracted to JS in order to be used on a setTimeout.
+const FRAME_ANIMATION_DURATION = config_values.transitionDuration;
+const FRAME_ANIMATION_DURATION_NUMBER = Number.parseInt(config_values.transitionDuration);
+const EXIT_ANIMATION_NAME = 'components-modal__disappear-animation';
+function useModalExitAnimation() {
+ const frameRef = (0,external_wp_element_namespaceObject.useRef)();
+ const [isAnimatingOut, setIsAnimatingOut] = (0,external_wp_element_namespaceObject.useState)(false);
+ const isReducedMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)();
+ const closeModal = (0,external_wp_element_namespaceObject.useCallback)(() => new Promise(closeModalResolve => {
+ // Grab a "stable" reference of the frame element, since
+ // the value held by the react ref might change at runtime.
+ const frameEl = frameRef.current;
+ if (isReducedMotion) {
+ closeModalResolve();
+ return;
+ }
+ if (!frameEl) {
+ true ? external_wp_warning_default()("wp.components.Modal: the Modal component can't be closed with an exit animation because of a missing reference to the modal frame element.") : 0;
+ closeModalResolve();
+ return;
+ }
+ let handleAnimationEnd;
+ const startAnimation = () => new Promise(animationResolve => {
+ handleAnimationEnd = e => {
+ if (e.animationName === EXIT_ANIMATION_NAME) {
+ animationResolve();
+ }
+ };
+ frameEl.addEventListener('animationend', handleAnimationEnd);
+ setIsAnimatingOut(true);
+ });
+ const animationTimeout = () => new Promise(timeoutResolve => {
+ setTimeout(() => timeoutResolve(),
+ // Allow an extra 20% of the animation duration for the
+ // animationend event to fire, in case the animation frame is
+ // slightly delayes by some other events in the event loop.
+ FRAME_ANIMATION_DURATION_NUMBER * 1.2);
+ });
+ Promise.race([startAnimation(), animationTimeout()]).then(() => {
+ if (handleAnimationEnd) {
+ frameEl.removeEventListener('animationend', handleAnimationEnd);
+ }
+ setIsAnimatingOut(false);
+ closeModalResolve();
+ });
+ }), [isReducedMotion]);
+ return {
+ overlayClassname: isAnimatingOut ? 'is-animating-out' : undefined,
+ frameRef,
+ frameStyle: {
+ '--modal-frame-animation-duration': `${FRAME_ANIMATION_DURATION}`
+ },
+ closeModal
+ };
+}
+
+;// ./node_modules/@wordpress/components/build-module/modal/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
@@ -46975,8 +47914,7 @@
// Used to track and dismiss the prior modal when another opens unless nested.
-
-const ModalContext = (0,external_wp_element_namespaceObject.createContext)([]);
+const ModalContext = (0,external_wp_element_namespaceObject.createContext)(new Set());
// Used to track body class names applied while modals are open.
const bodyOpenClasses = new Map();
@@ -46999,7 +47937,7 @@
closeButtonLabel,
children,
style,
- overlayClassName,
+ overlayClassName: overlayClassnameProp,
className,
contentLabel,
onKeyDown,
@@ -47054,31 +47992,37 @@
}, []);
// Keeps a fresh ref for the subsequent effect.
- const refOnRequestClose = (0,external_wp_element_namespaceObject.useRef)();
+ const onRequestCloseRef = (0,external_wp_element_namespaceObject.useRef)();
(0,external_wp_element_namespaceObject.useEffect)(() => {
- refOnRequestClose.current = onRequestClose;
+ onRequestCloseRef.current = onRequestClose;
}, [onRequestClose]);
// The list of `onRequestClose` callbacks of open (non-nested) Modals. Only
// one should remain open at a time and the list enables closing prior ones.
const dismissers = (0,external_wp_element_namespaceObject.useContext)(ModalContext);
// Used for the tracking and dismissing any nested modals.
- const nestedDismissers = (0,external_wp_element_namespaceObject.useRef)([]);
+ const [nestedDismissers] = (0,external_wp_element_namespaceObject.useState)(() => new Set());
// Updates the stack tracking open modals at this level and calls
// onRequestClose for any prior and/or nested modals as applicable.
(0,external_wp_element_namespaceObject.useEffect)(() => {
- dismissers.push(refOnRequestClose);
- const [first, second] = dismissers;
- if (second) {
- first?.current?.();
- }
- const nested = nestedDismissers.current;
+ // add this modal instance to the dismissers set
+ dismissers.add(onRequestCloseRef);
+ // request that all the other modals close themselves
+ for (const dismisser of dismissers) {
+ if (dismisser !== onRequestCloseRef) {
+ dismisser.current?.();
+ }
+ }
return () => {
- nested[0]?.current?.();
- dismissers.shift();
- };
- }, [dismissers]);
+ // request that all the nested modals close themselves
+ for (const dismisser of nestedDismissers) {
+ dismisser.current?.();
+ }
+ // remove this modal instance from the dismissers set
+ dismissers.delete(onRequestCloseRef);
+ };
+ }, [dismissers, nestedDismissers]);
// Adds/removes the value of bodyOpenClassName to body element.
(0,external_wp_element_namespaceObject.useEffect)(() => {
@@ -47097,6 +48041,12 @@
}
};
}, [bodyOpenClassName]);
+ const {
+ closeModal,
+ frameRef,
+ frameStyle,
+ overlayClassname
+ } = useModalExitAnimation();
// Calls the isContentScrollable callback when the Modal children container resizes.
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
@@ -47113,9 +48063,7 @@
function handleEscapeKeyDown(event) {
if (shouldCloseOnEsc && (event.code === 'Escape' || event.key === 'Escape') && !event.defaultPrevented) {
event.preventDefault();
- if (onRequestClose) {
- onRequestClose(event);
- }
+ closeModal().then(() => onRequestClose(event));
}
}
const onContentContainerScroll = (0,external_wp_element_namespaceObject.useCallback)(e => {
@@ -47149,7 +48097,7 @@
const isSameTarget = target === pressTarget;
pressTarget = null;
if (button === 0 && isSameTarget) {
- onRequestClose();
+ closeModal().then(() => onRequestClose());
}
}
};
@@ -47158,15 +48106,18 @@
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, forwardedRef]),
- className: dist_clsx('components-modal__screen-overlay', overlayClassName),
+ className: dist_clsx('components-modal__screen-overlay', overlayClassname, overlayClassnameProp),
onKeyDown: withIgnoreIMEEvents(handleEscapeKeyDown),
...(shouldCloseOnClickOutside ? overlayPressHandlers : {}),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(style_provider, {
document: document,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: dist_clsx('components-modal__frame', sizeClass, className),
- style: style,
- ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([constrainedTabbingRef, focusReturnRef, focusOnMount !== 'firstContentElement' ? focusOnMountRef : null]),
+ style: {
+ ...frameStyle,
+ ...style
+ },
+ ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([frameRef, constrainedTabbingRef, focusReturnRef, focusOnMount !== 'firstContentElement' ? focusOnMountRef : null]),
role: role,
"aria-label": contentLabel,
"aria-labelledby": contentLabel ? undefined : headingId,
@@ -47197,10 +48148,16 @@
className: "components-modal__header-heading",
children: title
})]
- }), headerActions, isDismissible && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
- onClick: onRequestClose,
- icon: library_close,
- label: closeButtonLabel || (0,external_wp_i18n_namespaceObject.__)('Close')
+ }), headerActions, isDismissible && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, {
+ marginBottom: 0,
+ marginLeft: 2
+ }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
+ size: "compact",
+ onClick: event => closeModal().then(() => onRequestClose(event)),
+ icon: library_close,
+ label: closeButtonLabel || (0,external_wp_i18n_namespaceObject.__)('Close')
+ })]
})]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([childrenContainerRef, focusOnMount === 'firstContentElement' ? focusOnMountRef : null]),
@@ -47210,8 +48167,8 @@
})
})
});
- return (0,external_wp_element_namespaceObject.createPortal)( /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ModalContext.Provider, {
- value: nestedDismissers.current,
+ return (0,external_wp_element_namespaceObject.createPortal)(/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ModalContext.Provider, {
+ value: nestedDismissers,
children: modal
}), document.body);
}
@@ -47250,7 +48207,7 @@
const Modal = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedModal);
/* harmony default export */ const modal = (Modal);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/confirm-dialog/styles.js
+;// ./node_modules/@wordpress/components/build-module/confirm-dialog/styles.js
function confirm_dialog_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
* External dependencies
@@ -47270,18 +48227,16 @@
styles: "&&{z-index:1000001;}"
} : 0;
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/confirm-dialog/component.js
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
-
+;// ./node_modules/@wordpress/components/build-module/confirm-dialog/component.js
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -47438,4385 +48393,1723 @@
const ConfirmDialog = contextConnect(UnconnectedConfirmDialog, 'ConfirmDialog');
/* harmony default export */ const confirm_dialog_component = (ConfirmDialog);
-// EXTERNAL MODULE: ./node_modules/prop-types/index.js
-var prop_types = __webpack_require__(5826);
-var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
-// EXTERNAL MODULE: ./node_modules/downshift/node_modules/react-is/index.js
-var react_is = __webpack_require__(1915);
-;// CONCATENATED MODULE: ./node_modules/compute-scroll-into-view/dist/index.mjs
-function dist_t(t){return"object"==typeof t&&null!=t&&1===t.nodeType}function dist_e(t,e){return(!e||"hidden"!==t)&&"visible"!==t&&"clip"!==t}function dist_n(t,n){if(t.clientHeight<t.scrollHeight||t.clientWidth<t.scrollWidth){var r=getComputedStyle(t,null);return dist_e(r.overflowY,n)||dist_e(r.overflowX,n)||function(t){var e=function(t){if(!t.ownerDocument||!t.ownerDocument.defaultView)return null;try{return t.ownerDocument.defaultView.frameElement}catch(t){return null}}(t);return!!e&&(e.clientHeight<t.scrollHeight||e.clientWidth<t.scrollWidth)}(t)}return!1}function dist_r(t,e,n,r,i,o,l,d){return o<t&&l>e||o>t&&l<e?0:o<=t&&d<=n||l>=e&&d>=n?o-t-r:l>e&&d<n||o<t&&d>n?l-e+i:0}var compute_scroll_into_view_dist_i=function(e,i){var o=window,l=i.scrollMode,d=i.block,f=i.inline,h=i.boundary,u=i.skipOverflowHiddenElements,s="function"==typeof h?h:function(t){return t!==h};if(!dist_t(e))throw new TypeError("Invalid target");for(var a,c,g=document.scrollingElement||document.documentElement,p=[],m=e;dist_t(m)&&s(m);){if((m=null==(c=(a=m).parentElement)?a.getRootNode().host||null:c)===g){p.push(m);break}null!=m&&m===document.body&&dist_n(m)&&!dist_n(document.documentElement)||null!=m&&dist_n(m,u)&&p.push(m)}for(var w=o.visualViewport?o.visualViewport.width:innerWidth,v=o.visualViewport?o.visualViewport.height:innerHeight,W=window.scrollX||pageXOffset,H=window.scrollY||pageYOffset,b=e.getBoundingClientRect(),y=b.height,E=b.width,M=b.top,V=b.right,x=b.bottom,I=b.left,C="start"===d||"nearest"===d?M:"end"===d?x:M+y/2,R="center"===f?I+E/2:"end"===f?V:I,T=[],k=0;k<p.length;k++){var B=p[k],D=B.getBoundingClientRect(),O=D.height,X=D.width,Y=D.top,L=D.right,S=D.bottom,j=D.left;if("if-needed"===l&&M>=0&&I>=0&&x<=v&&V<=w&&M>=Y&&x<=S&&I>=j&&V<=L)return T;var N=getComputedStyle(B),q=parseInt(N.borderLeftWidth,10),z=parseInt(N.borderTopWidth,10),A=parseInt(N.borderRightWidth,10),F=parseInt(N.borderBottomWidth,10),G=0,J=0,K="offsetWidth"in B?B.offsetWidth-B.clientWidth-q-A:0,P="offsetHeight"in B?B.offsetHeight-B.clientHeight-z-F:0,Q="offsetWidth"in B?0===B.offsetWidth?0:X/B.offsetWidth:0,U="offsetHeight"in B?0===B.offsetHeight?0:O/B.offsetHeight:0;if(g===B)G="start"===d?C:"end"===d?C-v:"nearest"===d?dist_r(H,H+v,v,z,F,H+C,H+C+y,y):C-v/2,J="start"===f?R:"center"===f?R-w/2:"end"===f?R-w:dist_r(W,W+w,w,q,A,W+R,W+R+E,E),G=Math.max(0,G+H),J=Math.max(0,J+W);else{G="start"===d?C-Y-z:"end"===d?C-S+F+P:"nearest"===d?dist_r(Y,S,O,z,F+P,C,C+y,y):C-(Y+O/2)+P/2,J="start"===f?R-j-q:"center"===f?R-(j+X/2)+K/2:"end"===f?R-L+A+K:dist_r(j,L,X,q,A+K,R,R+E,E);var Z=B.scrollLeft,$=B.scrollTop;C+=$-(G=Math.max(0,Math.min($+G/U,B.scrollHeight-O/U+P))),R+=Z-(J=Math.max(0,Math.min(Z+J/Q,B.scrollWidth-X/Q+K)))}T.push({el:B,top:G,left:J})}return T};
-//# sourceMappingURL=index.mjs.map
-
-;// CONCATENATED MODULE: ./node_modules/downshift/dist/downshift.esm.js
-
-
-
-
-
-
-let idCounter = 0;
-/**
- * Accepts a parameter and returns it if it's a function
- * or a noop function if it's not. This allows us to
- * accept a callback, but not worry about it if it's not
- * passed.
- * @param {Function} cb the callback
- * @return {Function} a function
- */
-
-function cbToCb(cb) {
- return typeof cb === 'function' ? cb : downshift_esm_noop;
-}
-
-function downshift_esm_noop() {}
-/**
- * Scroll node into view if necessary
- * @param {HTMLElement} node the element that should scroll into view
- * @param {HTMLElement} menuNode the menu element of the component
- */
-
-
-function scrollIntoView(node, menuNode) {
- if (!node) {
- return;
- }
-
- const actions = compute_scroll_into_view_dist_i(node, {
- boundary: menuNode,
- block: 'nearest',
- scrollMode: 'if-needed'
- });
- actions.forEach(_ref => {
- let {
- el,
- top,
- left
- } = _ref;
- el.scrollTop = top;
- el.scrollLeft = left;
- });
-}
-/**
- * @param {HTMLElement} parent the parent node
- * @param {HTMLElement} child the child node
- * @param {Window} environment The window context where downshift renders.
- * @return {Boolean} whether the parent is the child or the child is in the parent
- */
-
-
-function isOrContainsNode(parent, child, environment) {
- const result = parent === child || child instanceof environment.Node && parent.contains && parent.contains(child);
- return result;
-}
-/**
- * Simple debounce implementation. Will call the given
- * function once after the time given has passed since
- * it was last called.
- * @param {Function} fn the function to call after the time
- * @param {Number} time the time to wait
- * @return {Function} the debounced function
- */
-
-
-function debounce(fn, time) {
- let timeoutId;
-
- function cancel() {
- if (timeoutId) {
- clearTimeout(timeoutId);
- }
- }
-
- function wrapper() {
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
- args[_key] = arguments[_key];
- }
-
- cancel();
- timeoutId = setTimeout(() => {
- timeoutId = null;
- fn(...args);
- }, time);
- }
-
- wrapper.cancel = cancel;
- return wrapper;
-}
-/**
- * This is intended to be used to compose event handlers.
- * They are executed in order until one of them sets
- * `event.preventDownshiftDefault = true`.
- * @param {...Function} fns the event handler functions
- * @return {Function} the event handler to add to an element
- */
-
-
-function callAllEventHandlers() {
- for (var _len2 = arguments.length, fns = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
- fns[_key2] = arguments[_key2];
- }
-
- return function (event) {
- for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
- args[_key3 - 1] = arguments[_key3];
- }
-
- return fns.some(fn => {
- if (fn) {
- fn(event, ...args);
- }
-
- return event.preventDownshiftDefault || event.hasOwnProperty('nativeEvent') && event.nativeEvent.preventDownshiftDefault;
- });
- };
-}
-
-function handleRefs() {
- for (var _len4 = arguments.length, refs = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
- refs[_key4] = arguments[_key4];
- }
-
- return node => {
- refs.forEach(ref => {
- if (typeof ref === 'function') {
- ref(node);
- } else if (ref) {
- ref.current = node;
- }
- });
- };
-}
-/**
- * This generates a unique ID for an instance of Downshift
- * @return {String} the unique ID
- */
-
-
-function generateId() {
- return String(idCounter++);
-}
-/**
- * Resets idCounter to 0. Used for SSR.
- */
-
-
-function resetIdCounter() {
- idCounter = 0;
-}
-/**
- * Default implementation for status message. Only added when menu is open.
- * Will specify if there are results in the list, and if so, how many,
- * and what keys are relevant.
- *
- * @param {Object} param the downshift state and other relevant properties
- * @return {String} the a11y status message
- */
-
-
-function getA11yStatusMessage$1(_ref2) {
- let {
- isOpen,
- resultCount,
- previousResultCount
- } = _ref2;
-
- if (!isOpen) {
- return '';
- }
-
- if (!resultCount) {
- return 'No results are available.';
- }
-
- if (resultCount !== previousResultCount) {
- return `${resultCount} result${resultCount === 1 ? ' is' : 's are'} available, use up and down arrow keys to navigate. Press Enter key to select.`;
- }
-
- return '';
-}
-/**
- * Takes an argument and if it's an array, returns the first item in the array
- * otherwise returns the argument
- * @param {*} arg the maybe-array
- * @param {*} defaultValue the value if arg is falsey not defined
- * @return {*} the arg or it's first item
- */
-
-
-function unwrapArray(arg, defaultValue) {
- arg = Array.isArray(arg) ?
- /* istanbul ignore next (preact) */
- arg[0] : arg;
-
- if (!arg && defaultValue) {
- return defaultValue;
- } else {
- return arg;
- }
-}
-/**
- * @param {Object} element (P)react element
- * @return {Boolean} whether it's a DOM element
- */
-
-
-function isDOMElement(element) {
-
-
- return typeof element.type === 'string';
-}
-/**
- * @param {Object} element (P)react element
- * @return {Object} the props
- */
-
-
-function getElementProps(element) {
-
- return element.props;
-}
-/**
- * Throws a helpful error message for required properties. Useful
- * to be used as a default in destructuring or object params.
- * @param {String} fnName the function name
- * @param {String} propName the prop name
- */
-
-
-function requiredProp(fnName, propName) {
- // eslint-disable-next-line no-console
- console.error(`The property "${propName}" is required in "${fnName}"`);
-}
-
-const stateKeys = (/* unused pure expression or super */ null && (['highlightedIndex', 'inputValue', 'isOpen', 'selectedItem', 'type']));
-/**
- * @param {Object} state the state object
- * @return {Object} state that is relevant to downshift
- */
-
-function pickState(state) {
- if (state === void 0) {
- state = {};
- }
-
- const result = {};
- stateKeys.forEach(k => {
- if (state.hasOwnProperty(k)) {
- result[k] = state[k];
- }
- });
- return result;
-}
-/**
- * This will perform a shallow merge of the given state object
- * with the state coming from props
- * (for the controlled component scenario)
- * This is used in state updater functions so they're referencing
- * the right state regardless of where it comes from.
- *
- * @param {Object} state The state of the component/hook.
- * @param {Object} props The props that may contain controlled values.
- * @returns {Object} The merged controlled state.
- */
-
-
-function getState(state, props) {
- return Object.keys(state).reduce((prevState, key) => {
- prevState[key] = isControlledProp(props, key) ? props[key] : state[key];
- return prevState;
- }, {});
-}
-/**
- * This determines whether a prop is a "controlled prop" meaning it is
- * state which is controlled by the outside of this component rather
- * than within this component.
- *
- * @param {Object} props The props that may contain controlled values.
- * @param {String} key the key to check
- * @return {Boolean} whether it is a controlled controlled prop
- */
-
-
-function isControlledProp(props, key) {
- return props[key] !== undefined;
-}
-/**
- * Normalizes the 'key' property of a KeyboardEvent in IE/Edge
- * @param {Object} event a keyboardEvent object
- * @return {String} keyboard key
- */
-
-
-function normalizeArrowKey(event) {
- const {
- key,
- keyCode
- } = event;
- /* istanbul ignore next (ie) */
-
- if (keyCode >= 37 && keyCode <= 40 && key.indexOf('Arrow') !== 0) {
- return `Arrow${key}`;
- }
-
- return key;
-}
-/**
- * Simple check if the value passed is object literal
- * @param {*} obj any things
- * @return {Boolean} whether it's object literal
- */
-
-
-function downshift_esm_isPlainObject(obj) {
- return Object.prototype.toString.call(obj) === '[object Object]';
-}
-/**
- * Returns the new index in the list, in a circular way. If next value is out of bonds from the total,
- * it will wrap to either 0 or itemCount - 1.
- *
- * @param {number} moveAmount Number of positions to move. Negative to move backwards, positive forwards.
- * @param {number} baseIndex The initial position to move from.
- * @param {number} itemCount The total number of items.
- * @param {Function} getItemNodeFromIndex Used to check if item is disabled.
- * @param {boolean} circular Specify if navigation is circular. Default is true.
- * @returns {number} The new index after the move.
- */
-
-
-function getNextWrappingIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) {
- if (circular === void 0) {
- circular = true;
- }
-
- if (itemCount === 0) {
- return -1;
- }
-
- const itemsLastIndex = itemCount - 1;
-
- if (typeof baseIndex !== 'number' || baseIndex < 0 || baseIndex >= itemCount) {
- baseIndex = moveAmount > 0 ? -1 : itemsLastIndex + 1;
- }
-
- let newIndex = baseIndex + moveAmount;
-
- if (newIndex < 0) {
- newIndex = circular ? itemsLastIndex : 0;
- } else if (newIndex > itemsLastIndex) {
- newIndex = circular ? 0 : itemsLastIndex;
- }
-
- const nonDisabledNewIndex = getNextNonDisabledIndex(moveAmount, newIndex, itemCount, getItemNodeFromIndex, circular);
-
- if (nonDisabledNewIndex === -1) {
- return baseIndex >= itemCount ? -1 : baseIndex;
- }
-
- return nonDisabledNewIndex;
-}
-/**
- * Returns the next index in the list of an item that is not disabled.
- *
- * @param {number} moveAmount Number of positions to move. Negative to move backwards, positive forwards.
- * @param {number} baseIndex The initial position to move from.
- * @param {number} itemCount The total number of items.
- * @param {Function} getItemNodeFromIndex Used to check if item is disabled.
- * @param {boolean} circular Specify if navigation is circular. Default is true.
- * @returns {number} The new index. Returns baseIndex if item is not disabled. Returns next non-disabled item otherwise. If no non-disabled found it will return -1.
- */
-
-
-function getNextNonDisabledIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) {
- const currentElementNode = getItemNodeFromIndex(baseIndex);
-
- if (!currentElementNode || !currentElementNode.hasAttribute('disabled')) {
- return baseIndex;
- }
-
- if (moveAmount > 0) {
- for (let index = baseIndex + 1; index < itemCount; index++) {
- if (!getItemNodeFromIndex(index).hasAttribute('disabled')) {
- return index;
- }
- }
- } else {
- for (let index = baseIndex - 1; index >= 0; index--) {
- if (!getItemNodeFromIndex(index).hasAttribute('disabled')) {
- return index;
- }
- }
- }
-
- if (circular) {
- return moveAmount > 0 ? getNextNonDisabledIndex(1, 0, itemCount, getItemNodeFromIndex, false) : getNextNonDisabledIndex(-1, itemCount - 1, itemCount, getItemNodeFromIndex, false);
- }
-
- return -1;
-}
-/**
- * Checks if event target is within the downshift elements.
- *
- * @param {EventTarget} target Target to check.
- * @param {HTMLElement[]} downshiftElements The elements that form downshift (list, toggle button etc).
- * @param {Window} environment The window context where downshift renders.
- * @param {boolean} checkActiveElement Whether to also check activeElement.
- *
- * @returns {boolean} Whether or not the target is within downshift elements.
- */
-
-
-function targetWithinDownshift(target, downshiftElements, environment, checkActiveElement) {
- if (checkActiveElement === void 0) {
- checkActiveElement = true;
- }
-
- return downshiftElements.some(contextNode => contextNode && (isOrContainsNode(contextNode, target, environment) || checkActiveElement && isOrContainsNode(contextNode, environment.document.activeElement, environment)));
-} // eslint-disable-next-line import/no-mutable-exports
-
-
-let validateControlledUnchanged = (/* unused pure expression or super */ null && (downshift_esm_noop));
-/* istanbul ignore next */
-
-if (false) {}
-
-const cleanupStatus = debounce(documentProp => {
- getStatusDiv(documentProp).textContent = '';
-}, 500);
-/**
- * @param {String} status the status message
- * @param {Object} documentProp document passed by the user.
- */
-
-function setStatus(status, documentProp) {
- const div = getStatusDiv(documentProp);
-
- if (!status) {
- return;
- }
-
- div.textContent = status;
- cleanupStatus(documentProp);
-}
-/**
- * Get the status node or create it if it does not already exist.
- * @param {Object} documentProp document passed by the user.
- * @return {HTMLElement} the status node.
- */
-
-
-function getStatusDiv(documentProp) {
- if (documentProp === void 0) {
- documentProp = document;
- }
-
- let statusDiv = documentProp.getElementById('a11y-status-message');
-
- if (statusDiv) {
- return statusDiv;
- }
-
- statusDiv = documentProp.createElement('div');
- statusDiv.setAttribute('id', 'a11y-status-message');
- statusDiv.setAttribute('role', 'status');
- statusDiv.setAttribute('aria-live', 'polite');
- statusDiv.setAttribute('aria-relevant', 'additions text');
- Object.assign(statusDiv.style, {
- border: '0',
- clip: 'rect(0 0 0 0)',
- height: '1px',
- margin: '-1px',
- overflow: 'hidden',
- padding: '0',
- position: 'absolute',
- width: '1px'
- });
- documentProp.body.appendChild(statusDiv);
- return statusDiv;
-}
-
-const unknown = false ? 0 : 0;
-const mouseUp = false ? 0 : 1;
-const itemMouseEnter = false ? 0 : 2;
-const keyDownArrowUp = false ? 0 : 3;
-const keyDownArrowDown = false ? 0 : 4;
-const keyDownEscape = false ? 0 : 5;
-const keyDownEnter = false ? 0 : 6;
-const keyDownHome = false ? 0 : 7;
-const keyDownEnd = false ? 0 : 8;
-const clickItem = false ? 0 : 9;
-const blurInput = false ? 0 : 10;
-const changeInput = false ? 0 : 11;
-const keyDownSpaceButton = false ? 0 : 12;
-const clickButton = false ? 0 : 13;
-const blurButton = false ? 0 : 14;
-const controlledPropUpdatedSelectedItem = false ? 0 : 15;
-const touchEnd = false ? 0 : 16;
-
-var stateChangeTypes$3 = /*#__PURE__*/Object.freeze({
- __proto__: null,
- unknown: unknown,
- mouseUp: mouseUp,
- itemMouseEnter: itemMouseEnter,
- keyDownArrowUp: keyDownArrowUp,
- keyDownArrowDown: keyDownArrowDown,
- keyDownEscape: keyDownEscape,
- keyDownEnter: keyDownEnter,
- keyDownHome: keyDownHome,
- keyDownEnd: keyDownEnd,
- clickItem: clickItem,
- blurInput: blurInput,
- changeInput: changeInput,
- keyDownSpaceButton: keyDownSpaceButton,
- clickButton: clickButton,
- blurButton: blurButton,
- controlledPropUpdatedSelectedItem: controlledPropUpdatedSelectedItem,
- touchEnd: touchEnd
-});
-
-/* eslint camelcase:0 */
-
-const Downshift = /*#__PURE__*/(/* unused pure expression or super */ null && ((() => {
- class Downshift extends Component {
- constructor(_props) {
- var _this;
-
- super(_props);
- _this = this;
- this.id = this.props.id || `downshift-${generateId()}`;
- this.menuId = this.props.menuId || `${this.id}-menu`;
- this.labelId = this.props.labelId || `${this.id}-label`;
- this.inputId = this.props.inputId || `${this.id}-input`;
-
- this.getItemId = this.props.getItemId || (index => `${this.id}-item-${index}`);
-
- this.input = null;
- this.items = [];
- this.itemCount = null;
- this.previousResultCount = 0;
- this.timeoutIds = [];
-
- this.internalSetTimeout = (fn, time) => {
- const id = setTimeout(() => {
- this.timeoutIds = this.timeoutIds.filter(i => i !== id);
- fn();
- }, time);
- this.timeoutIds.push(id);
- };
-
- this.setItemCount = count => {
- this.itemCount = count;
- };
-
- this.unsetItemCount = () => {
- this.itemCount = null;
- };
-
- this.setHighlightedIndex = function (highlightedIndex, otherStateToSet) {
- if (highlightedIndex === void 0) {
- highlightedIndex = _this.props.defaultHighlightedIndex;
- }
-
- if (otherStateToSet === void 0) {
- otherStateToSet = {};
- }
-
- otherStateToSet = pickState(otherStateToSet);
-
- _this.internalSetState({
- highlightedIndex,
- ...otherStateToSet
- });
- };
-
- this.clearSelection = cb => {
- this.internalSetState({
- selectedItem: null,
- inputValue: '',
- highlightedIndex: this.props.defaultHighlightedIndex,
- isOpen: this.props.defaultIsOpen
- }, cb);
- };
-
- this.selectItem = (item, otherStateToSet, cb) => {
- otherStateToSet = pickState(otherStateToSet);
- this.internalSetState({
- isOpen: this.props.defaultIsOpen,
- highlightedIndex: this.props.defaultHighlightedIndex,
- selectedItem: item,
- inputValue: this.props.itemToString(item),
- ...otherStateToSet
- }, cb);
- };
-
- this.selectItemAtIndex = (itemIndex, otherStateToSet, cb) => {
- const item = this.items[itemIndex];
-
- if (item == null) {
- return;
- }
-
- this.selectItem(item, otherStateToSet, cb);
- };
-
- this.selectHighlightedItem = (otherStateToSet, cb) => {
- return this.selectItemAtIndex(this.getState().highlightedIndex, otherStateToSet, cb);
- };
-
- this.internalSetState = (stateToSet, cb) => {
- let isItemSelected, onChangeArg;
- const onStateChangeArg = {};
- const isStateToSetFunction = typeof stateToSet === 'function'; // we want to call `onInputValueChange` before the `setState` call
- // so someone controlling the `inputValue` state gets notified of
- // the input change as soon as possible. This avoids issues with
- // preserving the cursor position.
- // See https://github.com/downshift-js/downshift/issues/217 for more info.
-
- if (!isStateToSetFunction && stateToSet.hasOwnProperty('inputValue')) {
- this.props.onInputValueChange(stateToSet.inputValue, { ...this.getStateAndHelpers(),
- ...stateToSet
- });
- }
-
- return this.setState(state => {
- state = this.getState(state);
- let newStateToSet = isStateToSetFunction ? stateToSet(state) : stateToSet; // Your own function that could modify the state that will be set.
-
- newStateToSet = this.props.stateReducer(state, newStateToSet); // checks if an item is selected, regardless of if it's different from
- // what was selected before
- // used to determine if onSelect and onChange callbacks should be called
-
- isItemSelected = newStateToSet.hasOwnProperty('selectedItem'); // this keeps track of the object we want to call with setState
-
- const nextState = {}; // this is just used to tell whether the state changed
- // and we're trying to update that state. OR if the selection has changed and we're
- // trying to update the selection
-
- if (isItemSelected && newStateToSet.selectedItem !== state.selectedItem) {
- onChangeArg = newStateToSet.selectedItem;
- }
-
- newStateToSet.type = newStateToSet.type || unknown;
- Object.keys(newStateToSet).forEach(key => {
- // onStateChangeArg should only have the state that is
- // actually changing
- if (state[key] !== newStateToSet[key]) {
- onStateChangeArg[key] = newStateToSet[key];
- } // the type is useful for the onStateChangeArg
- // but we don't actually want to set it in internal state.
- // this is an undocumented feature for now... Not all internalSetState
- // calls support it and I'm not certain we want them to yet.
- // But it enables users controlling the isOpen state to know when
- // the isOpen state changes due to mouseup events which is quite handy.
-
-
- if (key === 'type') {
- return;
- }
-
- newStateToSet[key]; // if it's coming from props, then we don't care to set it internally
-
- if (!isControlledProp(this.props, key)) {
- nextState[key] = newStateToSet[key];
- }
- }); // if stateToSet is a function, then we weren't able to call onInputValueChange
- // earlier, so we'll call it now that we know what the inputValue state will be.
-
- if (isStateToSetFunction && newStateToSet.hasOwnProperty('inputValue')) {
- this.props.onInputValueChange(newStateToSet.inputValue, { ...this.getStateAndHelpers(),
- ...newStateToSet
- });
- }
-
- return nextState;
- }, () => {
- // call the provided callback if it's a function
- cbToCb(cb)(); // only call the onStateChange and onChange callbacks if
- // we have relevant information to pass them.
-
- const hasMoreStateThanType = Object.keys(onStateChangeArg).length > 1;
-
- if (hasMoreStateThanType) {
- this.props.onStateChange(onStateChangeArg, this.getStateAndHelpers());
- }
-
- if (isItemSelected) {
- this.props.onSelect(stateToSet.selectedItem, this.getStateAndHelpers());
- }
-
- if (onChangeArg !== undefined) {
- this.props.onChange(onChangeArg, this.getStateAndHelpers());
- } // this is currently undocumented and therefore subject to change
- // We'll try to not break it, but just be warned.
-
-
- this.props.onUserAction(onStateChangeArg, this.getStateAndHelpers());
- });
- };
-
- this.rootRef = node => this._rootNode = node;
-
- this.getRootProps = function (_temp, _temp2) {
- let {
- refKey = 'ref',
- ref,
- ...rest
- } = _temp === void 0 ? {} : _temp;
- let {
- suppressRefError = false
- } = _temp2 === void 0 ? {} : _temp2;
- // this is used in the render to know whether the user has called getRootProps.
- // It uses that to know whether to apply the props automatically
- _this.getRootProps.called = true;
- _this.getRootProps.refKey = refKey;
- _this.getRootProps.suppressRefError = suppressRefError;
-
- const {
- isOpen
- } = _this.getState();
-
- return {
- [refKey]: handleRefs(ref, _this.rootRef),
- role: 'combobox',
- 'aria-expanded': isOpen,
- 'aria-haspopup': 'listbox',
- 'aria-owns': isOpen ? _this.menuId : null,
- 'aria-labelledby': _this.labelId,
- ...rest
- };
- };
-
- this.keyDownHandlers = {
- ArrowDown(event) {
- event.preventDefault();
-
- if (this.getState().isOpen) {
- const amount = event.shiftKey ? 5 : 1;
- this.moveHighlightedIndex(amount, {
- type: keyDownArrowDown
- });
- } else {
- this.internalSetState({
- isOpen: true,
- type: keyDownArrowDown
- }, () => {
- const itemCount = this.getItemCount();
-
- if (itemCount > 0) {
- const {
- highlightedIndex
- } = this.getState();
- const nextHighlightedIndex = getNextWrappingIndex(1, highlightedIndex, itemCount, index => this.getItemNodeFromIndex(index));
- this.setHighlightedIndex(nextHighlightedIndex, {
- type: keyDownArrowDown
- });
- }
- });
- }
- },
-
- ArrowUp(event) {
- event.preventDefault();
-
- if (this.getState().isOpen) {
- const amount = event.shiftKey ? -5 : -1;
- this.moveHighlightedIndex(amount, {
- type: keyDownArrowUp
- });
- } else {
- this.internalSetState({
- isOpen: true,
- type: keyDownArrowUp
- }, () => {
- const itemCount = this.getItemCount();
-
- if (itemCount > 0) {
- const {
- highlightedIndex
- } = this.getState();
- const nextHighlightedIndex = getNextWrappingIndex(-1, highlightedIndex, itemCount, index => this.getItemNodeFromIndex(index));
- this.setHighlightedIndex(nextHighlightedIndex, {
- type: keyDownArrowUp
- });
- }
- });
- }
- },
-
- Enter(event) {
- if (event.which === 229) {
- return;
- }
-
- const {
- isOpen,
- highlightedIndex
- } = this.getState();
-
- if (isOpen && highlightedIndex != null) {
- event.preventDefault();
- const item = this.items[highlightedIndex];
- const itemNode = this.getItemNodeFromIndex(highlightedIndex);
-
- if (item == null || itemNode && itemNode.hasAttribute('disabled')) {
- return;
- }
-
- this.selectHighlightedItem({
- type: keyDownEnter
- });
- }
- },
-
- Escape(event) {
- event.preventDefault();
- this.reset({
- type: keyDownEscape,
- ...(!this.state.isOpen && {
- selectedItem: null,
- inputValue: ''
- })
- });
- }
-
- };
- this.buttonKeyDownHandlers = { ...this.keyDownHandlers,
-
- ' '(event) {
- event.preventDefault();
- this.toggleMenu({
- type: keyDownSpaceButton
- });
- }
-
- };
- this.inputKeyDownHandlers = { ...this.keyDownHandlers,
-
- Home(event) {
- const {
- isOpen
- } = this.getState();
-
- if (!isOpen) {
- return;
- }
-
- event.preventDefault();
- const itemCount = this.getItemCount();
-
- if (itemCount <= 0 || !isOpen) {
- return;
- } // get next non-disabled starting downwards from 0 if that's disabled.
-
-
- const newHighlightedIndex = getNextNonDisabledIndex(1, 0, itemCount, index => this.getItemNodeFromIndex(index), false);
- this.setHighlightedIndex(newHighlightedIndex, {
- type: keyDownHome
- });
- },
-
- End(event) {
- const {
- isOpen
- } = this.getState();
-
- if (!isOpen) {
- return;
- }
-
- event.preventDefault();
- const itemCount = this.getItemCount();
-
- if (itemCount <= 0 || !isOpen) {
- return;
- } // get next non-disabled starting upwards from last index if that's disabled.
-
-
- const newHighlightedIndex = getNextNonDisabledIndex(-1, itemCount - 1, itemCount, index => this.getItemNodeFromIndex(index), false);
- this.setHighlightedIndex(newHighlightedIndex, {
- type: keyDownEnd
- });
- }
-
- };
-
- this.getToggleButtonProps = function (_temp3) {
- let {
- onClick,
- onPress,
- onKeyDown,
- onKeyUp,
- onBlur,
- ...rest
- } = _temp3 === void 0 ? {} : _temp3;
-
- const {
- isOpen
- } = _this.getState();
-
- const enabledEventHandlers = {
- onClick: callAllEventHandlers(onClick, _this.buttonHandleClick),
- onKeyDown: callAllEventHandlers(onKeyDown, _this.buttonHandleKeyDown),
- onKeyUp: callAllEventHandlers(onKeyUp, _this.buttonHandleKeyUp),
- onBlur: callAllEventHandlers(onBlur, _this.buttonHandleBlur)
- };
- const eventHandlers = rest.disabled ? {} : enabledEventHandlers;
- return {
- type: 'button',
- role: 'button',
- 'aria-label': isOpen ? 'close menu' : 'open menu',
- 'aria-haspopup': true,
- 'data-toggle': true,
- ...eventHandlers,
- ...rest
- };
- };
-
- this.buttonHandleKeyUp = event => {
- // Prevent click event from emitting in Firefox
- event.preventDefault();
- };
-
- this.buttonHandleKeyDown = event => {
- const key = normalizeArrowKey(event);
-
- if (this.buttonKeyDownHandlers[key]) {
- this.buttonKeyDownHandlers[key].call(this, event);
- }
- };
-
- this.buttonHandleClick = event => {
- event.preventDefault(); // handle odd case for Safari and Firefox which
- // don't give the button the focus properly.
-
- /* istanbul ignore if (can't reasonably test this) */
-
- if (this.props.environment.document.activeElement === this.props.environment.document.body) {
- event.target.focus();
- } // to simplify testing components that use downshift, we'll not wrap this in a setTimeout
- // if the NODE_ENV is test. With the proper build system, this should be dead code eliminated
- // when building for production and should therefore have no impact on production code.
-
-
- if (false) {} else {
- // Ensure that toggle of menu occurs after the potential blur event in iOS
- this.internalSetTimeout(() => this.toggleMenu({
- type: clickButton
- }));
- }
- };
-
- this.buttonHandleBlur = event => {
- const blurTarget = event.target; // Save blur target for comparison with activeElement later
- // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not body element
-
- this.internalSetTimeout(() => {
- if (!this.isMouseDown && (this.props.environment.document.activeElement == null || this.props.environment.document.activeElement.id !== this.inputId) && this.props.environment.document.activeElement !== blurTarget // Do nothing if we refocus the same element again (to solve issue in Safari on iOS)
- ) {
- this.reset({
- type: blurButton
- });
+;// ./node_modules/@ariakit/react-core/esm/__chunks/VEVQD5MH.js
+"use client";
+
+
+
+
+// src/combobox/combobox-context.tsx
+
+var ComboboxListRoleContext = (0,external_React_.createContext)(
+ void 0
+);
+var VEVQD5MH_ctx = createStoreContext(
+ [PopoverContextProvider, CompositeContextProvider],
+ [PopoverScopedContextProvider, CompositeScopedContextProvider]
+);
+var useComboboxContext = VEVQD5MH_ctx.useContext;
+var useComboboxScopedContext = VEVQD5MH_ctx.useScopedContext;
+var useComboboxProviderContext = VEVQD5MH_ctx.useProviderContext;
+var ComboboxContextProvider = VEVQD5MH_ctx.ContextProvider;
+var ComboboxScopedContextProvider = VEVQD5MH_ctx.ScopedContextProvider;
+var ComboboxItemValueContext = (0,external_React_.createContext)(
+ void 0
+);
+var ComboboxItemCheckedContext = (0,external_React_.createContext)(false);
+
+
+
+;// ./node_modules/@ariakit/core/esm/select/select-store.js
+"use client";
+
+
+
+
+
+
+
+
+
+
+
+// src/select/select-store.ts
+function createSelectStore(_a = {}) {
+ var _b = _a, {
+ combobox
+ } = _b, props = _3YLGPPWQ_objRest(_b, [
+ "combobox"
+ ]);
+ const store = mergeStore(
+ props.store,
+ omit2(combobox, [
+ "value",
+ "items",
+ "renderedItems",
+ "baseElement",
+ "arrowElement",
+ "anchorElement",
+ "contentElement",
+ "popoverElement",
+ "disclosureElement"
+ ])
+ );
+ throwOnConflictingProps(props, store);
+ const syncState = store.getState();
+ const composite = createCompositeStore(_chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, props), {
+ store,
+ virtualFocus: defaultValue(
+ props.virtualFocus,
+ syncState.virtualFocus,
+ true
+ ),
+ includesBaseElement: defaultValue(
+ props.includesBaseElement,
+ syncState.includesBaseElement,
+ false
+ ),
+ activeId: defaultValue(
+ props.activeId,
+ syncState.activeId,
+ props.defaultActiveId,
+ null
+ ),
+ orientation: defaultValue(
+ props.orientation,
+ syncState.orientation,
+ "vertical"
+ )
+ }));
+ const popover = createPopoverStore(_chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, props), {
+ store,
+ placement: defaultValue(
+ props.placement,
+ syncState.placement,
+ "bottom-start"
+ )
+ }));
+ const initialValue = new String("");
+ const initialState = _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues(_chunks_3YLGPPWQ_spreadValues({}, composite.getState()), popover.getState()), {
+ value: defaultValue(
+ props.value,
+ syncState.value,
+ props.defaultValue,
+ initialValue
+ ),
+ setValueOnMove: defaultValue(
+ props.setValueOnMove,
+ syncState.setValueOnMove,
+ false
+ ),
+ labelElement: defaultValue(syncState.labelElement, null),
+ selectElement: defaultValue(syncState.selectElement, null),
+ listElement: defaultValue(syncState.listElement, null)
+ });
+ const select = createStore(initialState, composite, popover, store);
+ setup(
+ select,
+ () => sync(select, ["value", "items"], (state) => {
+ if (state.value !== initialValue) return;
+ if (!state.items.length) return;
+ const item = state.items.find(
+ (item2) => !item2.disabled && item2.value != null
+ );
+ if ((item == null ? void 0 : item.value) == null) return;
+ select.setState("value", item.value);
+ })
+ );
+ setup(
+ select,
+ () => sync(select, ["mounted"], (state) => {
+ if (state.mounted) return;
+ select.setState("activeId", initialState.activeId);
+ })
+ );
+ setup(
+ select,
+ () => sync(select, ["mounted", "items", "value"], (state) => {
+ if (combobox) return;
+ if (state.mounted) return;
+ const values = toArray(state.value);
+ const lastValue = values[values.length - 1];
+ if (lastValue == null) return;
+ const item = state.items.find(
+ (item2) => !item2.disabled && item2.value === lastValue
+ );
+ if (!item) return;
+ select.setState("activeId", item.id);
+ })
+ );
+ setup(
+ select,
+ () => batch(select, ["setValueOnMove", "moves"], (state) => {
+ const { mounted, value, activeId } = select.getState();
+ if (!state.setValueOnMove && mounted) return;
+ if (Array.isArray(value)) return;
+ if (!state.moves) return;
+ if (!activeId) return;
+ const item = composite.item(activeId);
+ if (!item || item.disabled || item.value == null) return;
+ select.setState("value", item.value);
+ })
+ );
+ return _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues(_chunks_3YLGPPWQ_spreadValues(_chunks_3YLGPPWQ_spreadValues({}, composite), popover), select), {
+ combobox,
+ setValue: (value) => select.setState("value", value),
+ setLabelElement: (element) => select.setState("labelElement", element),
+ setSelectElement: (element) => select.setState("selectElement", element),
+ setListElement: (element) => select.setState("listElement", element)
+ });
+}
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/S5WQ44SQ.js
+"use client";
+
+
+
+
+
+
+
+// src/select/select-store.ts
+
+function useSelectStoreOptions(props) {
+ const combobox = useComboboxProviderContext();
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), {
+ combobox: props.combobox !== void 0 ? props.combobox : combobox
+ });
+ return useCompositeStoreOptions(props);
+}
+function useSelectStoreProps(store, update, props) {
+ useUpdateEffect(update, [props.combobox]);
+ useStoreProps(store, props, "value", "setValue");
+ useStoreProps(store, props, "setValueOnMove");
+ return Object.assign(
+ usePopoverStoreProps(
+ useCompositeStoreProps(store, update, props),
+ update,
+ props
+ ),
+ { combobox: props.combobox }
+ );
+}
+function useSelectStore(props = {}) {
+ props = useSelectStoreOptions(props);
+ const [store, update] = YV4JVR4I_useStore(createSelectStore, props);
+ return useSelectStoreProps(store, update, props);
+}
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/KPEX55MY.js
+"use client";
+
+
+
+
+// src/select/select-context.tsx
+
+var KPEX55MY_ctx = createStoreContext(
+ [PopoverContextProvider, CompositeContextProvider],
+ [PopoverScopedContextProvider, CompositeScopedContextProvider]
+);
+var useSelectContext = KPEX55MY_ctx.useContext;
+var useSelectScopedContext = KPEX55MY_ctx.useScopedContext;
+var useSelectProviderContext = KPEX55MY_ctx.useProviderContext;
+var SelectContextProvider = KPEX55MY_ctx.ContextProvider;
+var SelectScopedContextProvider = KPEX55MY_ctx.ScopedContextProvider;
+var SelectItemCheckedContext = (0,external_React_.createContext)(false);
+var SelectHeadingContext = (0,external_React_.createContext)(null);
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/select/select-label.js
+"use client";
+
+
+
+
+
+
+
+
+
+
+
+// src/select/select-label.tsx
+
+var select_label_TagName = "div";
+var useSelectLabel = createHook(
+ function useSelectLabel2(_a) {
+ var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
+ const context = useSelectProviderContext();
+ store = store || context;
+ invariant(
+ store,
+ false && 0
+ );
+ const id = useId(props.id);
+ const onClickProp = props.onClick;
+ const onClick = useEvent((event) => {
+ onClickProp == null ? void 0 : onClickProp(event);
+ if (event.defaultPrevented) return;
+ queueMicrotask(() => {
+ const select = store == null ? void 0 : store.getState().selectElement;
+ select == null ? void 0 : select.focus();
+ });
+ });
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
+ id
+ }, props), {
+ ref: useMergeRefs(store.setLabelElement, props.ref),
+ onClick,
+ style: _3YLGPPWQ_spreadValues({
+ cursor: "default"
+ }, props.style)
+ });
+ return removeUndefinedValues(props);
+ }
+);
+var SelectLabel = memo2(
+ forwardRef2(function SelectLabel2(props) {
+ const htmlProps = useSelectLabel(props);
+ return LMDWO4NN_createElement(select_label_TagName, htmlProps);
+ })
+);
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/X5NMLKT6.js
+"use client";
+
+
+
+
+
+// src/button/button.tsx
+
+
+var X5NMLKT6_TagName = "button";
+var useButton = createHook(
+ function useButton2(props) {
+ const ref = (0,external_React_.useRef)(null);
+ const tagName = useTagName(ref, X5NMLKT6_TagName);
+ const [isNativeButton, setIsNativeButton] = (0,external_React_.useState)(
+ () => !!tagName && isButton({ tagName, type: props.type })
+ );
+ (0,external_React_.useEffect)(() => {
+ if (!ref.current) return;
+ setIsNativeButton(isButton(ref.current));
+ }, []);
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
+ role: !isNativeButton && tagName !== "a" ? "button" : void 0
+ }, props), {
+ ref: useMergeRefs(ref, props.ref)
+ });
+ props = useCommand(props);
+ return props;
+ }
+);
+var X5NMLKT6_Button = forwardRef2(function Button2(props) {
+ const htmlProps = useButton(props);
+ return LMDWO4NN_createElement(X5NMLKT6_TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/P4IRICAX.js
+"use client";
+
+
+
+
+
+
+// src/disclosure/disclosure.tsx
+
+
+var P4IRICAX_TagName = "button";
+var P4IRICAX_symbol = Symbol("disclosure");
+var useDisclosure = createHook(
+ function useDisclosure2(_a) {
+ var _b = _a, { store, toggleOnClick = true } = _b, props = __objRest(_b, ["store", "toggleOnClick"]);
+ const context = useDisclosureProviderContext();
+ store = store || context;
+ invariant(
+ store,
+ false && 0
+ );
+ const ref = (0,external_React_.useRef)(null);
+ const [expanded, setExpanded] = (0,external_React_.useState)(false);
+ const disclosureElement = store.useState("disclosureElement");
+ const open = store.useState("open");
+ (0,external_React_.useEffect)(() => {
+ let isCurrentDisclosure = disclosureElement === ref.current;
+ if (!(disclosureElement == null ? void 0 : disclosureElement.isConnected)) {
+ store == null ? void 0 : store.setDisclosureElement(ref.current);
+ isCurrentDisclosure = true;
+ }
+ setExpanded(open && isCurrentDisclosure);
+ }, [disclosureElement, store, open]);
+ const onClickProp = props.onClick;
+ const toggleOnClickProp = useBooleanEvent(toggleOnClick);
+ const [isDuplicate, metadataProps] = useMetadataProps(props, P4IRICAX_symbol, true);
+ const onClick = useEvent((event) => {
+ onClickProp == null ? void 0 : onClickProp(event);
+ if (event.defaultPrevented) return;
+ if (isDuplicate) return;
+ if (!toggleOnClickProp(event)) return;
+ store == null ? void 0 : store.setDisclosureElement(event.currentTarget);
+ store == null ? void 0 : store.toggle();
+ });
+ const contentElement = store.useState("contentElement");
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues(_3YLGPPWQ_spreadValues({
+ "aria-expanded": expanded,
+ "aria-controls": contentElement == null ? void 0 : contentElement.id
+ }, metadataProps), props), {
+ ref: useMergeRefs(ref, props.ref),
+ onClick
+ });
+ props = useButton(props);
+ return props;
+ }
+);
+var Disclosure = forwardRef2(function Disclosure2(props) {
+ const htmlProps = useDisclosure(props);
+ return LMDWO4NN_createElement(P4IRICAX_TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/AXB53BZF.js
+"use client";
+
+
+
+
+
+// src/dialog/dialog-disclosure.tsx
+
+
+var AXB53BZF_TagName = "button";
+var useDialogDisclosure = createHook(
+ function useDialogDisclosure2(_a) {
+ var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
+ const context = useDialogProviderContext();
+ store = store || context;
+ invariant(
+ store,
+ false && 0
+ );
+ const contentElement = store.useState("contentElement");
+ props = _3YLGPPWQ_spreadValues({
+ "aria-haspopup": getPopupRole(contentElement, "dialog")
+ }, props);
+ props = useDisclosure(_3YLGPPWQ_spreadValues({ store }, props));
+ return props;
+ }
+);
+var DialogDisclosure = forwardRef2(function DialogDisclosure2(props) {
+ const htmlProps = useDialogDisclosure(props);
+ return LMDWO4NN_createElement(AXB53BZF_TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/OMU7RWRV.js
+"use client";
+
+
+
+
+
+// src/popover/popover-anchor.tsx
+var OMU7RWRV_TagName = "div";
+var usePopoverAnchor = createHook(
+ function usePopoverAnchor2(_a) {
+ var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
+ const context = usePopoverProviderContext();
+ store = store || context;
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), {
+ ref: useMergeRefs(store == null ? void 0 : store.setAnchorElement, props.ref)
+ });
+ return props;
+ }
+);
+var PopoverAnchor = forwardRef2(function PopoverAnchor2(props) {
+ const htmlProps = usePopoverAnchor(props);
+ return LMDWO4NN_createElement(OMU7RWRV_TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/QYJ6MIDR.js
+"use client";
+
+
+
+
+
+
+
+// src/popover/popover-disclosure.tsx
+
+
+var QYJ6MIDR_TagName = "button";
+var usePopoverDisclosure = createHook(function usePopoverDisclosure2(_a) {
+ var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
+ const context = usePopoverProviderContext();
+ store = store || context;
+ invariant(
+ store,
+ false && 0
+ );
+ const onClickProp = props.onClick;
+ const onClick = useEvent((event) => {
+ store == null ? void 0 : store.setAnchorElement(event.currentTarget);
+ onClickProp == null ? void 0 : onClickProp(event);
+ });
+ props = useWrapElement(
+ props,
+ (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(PopoverScopedContextProvider, { value: store, children: element }),
+ [store]
+ );
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), {
+ onClick
+ });
+ props = usePopoverAnchor(_3YLGPPWQ_spreadValues({ store }, props));
+ props = useDialogDisclosure(_3YLGPPWQ_spreadValues({ store }, props));
+ return props;
+});
+var PopoverDisclosure = forwardRef2(function PopoverDisclosure2(props) {
+ const htmlProps = usePopoverDisclosure(props);
+ return LMDWO4NN_createElement(QYJ6MIDR_TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/DR55NYVS.js
+"use client";
+
+
+
+
+// src/popover/popover-disclosure-arrow.tsx
+
+
+
+var DR55NYVS_TagName = "span";
+var pointsMap = {
+ top: "4,10 8,6 12,10",
+ right: "6,4 10,8 6,12",
+ bottom: "4,6 8,10 12,6",
+ left: "10,4 6,8 10,12"
+};
+var usePopoverDisclosureArrow = createHook(function usePopoverDisclosureArrow2(_a) {
+ var _b = _a, { store, placement } = _b, props = __objRest(_b, ["store", "placement"]);
+ const context = usePopoverContext();
+ store = store || context;
+ invariant(
+ store,
+ false && 0
+ );
+ const position = store.useState((state) => placement || state.placement);
+ const dir = position.split("-")[0];
+ const points = pointsMap[dir];
+ const children = (0,external_React_.useMemo)(
+ () => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(
+ "svg",
+ {
+ display: "block",
+ fill: "none",
+ stroke: "currentColor",
+ strokeLinecap: "round",
+ strokeLinejoin: "round",
+ strokeWidth: 1.5,
+ viewBox: "0 0 16 16",
+ height: "1em",
+ width: "1em",
+ children: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)("polyline", { points })
+ }
+ ),
+ [points]
+ );
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
+ children,
+ "aria-hidden": true
+ }, props), {
+ style: _3YLGPPWQ_spreadValues({
+ width: "1em",
+ height: "1em",
+ pointerEvents: "none"
+ }, props.style)
+ });
+ return removeUndefinedValues(props);
+});
+var PopoverDisclosureArrow = forwardRef2(
+ function PopoverDisclosureArrow2(props) {
+ const htmlProps = usePopoverDisclosureArrow(props);
+ return LMDWO4NN_createElement(DR55NYVS_TagName, htmlProps);
+ }
+);
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/UD53QJDV.js
+"use client";
+
+
+
+
+
+// src/select/select-arrow.tsx
+var UD53QJDV_TagName = "span";
+var useSelectArrow = createHook(
+ function useSelectArrow2(_a) {
+ var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
+ const context = useSelectContext();
+ store = store || context;
+ props = usePopoverDisclosureArrow(_3YLGPPWQ_spreadValues({ store }, props));
+ return props;
+ }
+);
+var SelectArrow = forwardRef2(function SelectArrow2(props) {
+ const htmlProps = useSelectArrow(props);
+ return LMDWO4NN_createElement(UD53QJDV_TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/select/select.js
+"use client";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// src/select/select.tsx
+
+
+
+
+
+
+var select_TagName = "button";
+function getSelectedValues(select) {
+ return Array.from(select.selectedOptions).map((option) => option.value);
+}
+function nextWithValue(store, next) {
+ return () => {
+ const nextId = next();
+ if (!nextId) return;
+ let i = 0;
+ let nextItem = store.item(nextId);
+ const firstItem = nextItem;
+ while (nextItem && nextItem.value == null) {
+ const nextId2 = next(++i);
+ if (!nextId2) return;
+ nextItem = store.item(nextId2);
+ if (nextItem === firstItem) break;
+ }
+ return nextItem == null ? void 0 : nextItem.id;
+ };
+}
+var useSelect = createHook(function useSelect2(_a) {
+ var _b = _a, {
+ store,
+ name,
+ form,
+ required,
+ showOnKeyDown = true,
+ moveOnKeyDown = true,
+ toggleOnPress = true,
+ toggleOnClick = toggleOnPress
+ } = _b, props = __objRest(_b, [
+ "store",
+ "name",
+ "form",
+ "required",
+ "showOnKeyDown",
+ "moveOnKeyDown",
+ "toggleOnPress",
+ "toggleOnClick"
+ ]);
+ const context = useSelectProviderContext();
+ store = store || context;
+ invariant(
+ store,
+ false && 0
+ );
+ const onKeyDownProp = props.onKeyDown;
+ const showOnKeyDownProp = useBooleanEvent(showOnKeyDown);
+ const moveOnKeyDownProp = useBooleanEvent(moveOnKeyDown);
+ const placement = store.useState("placement");
+ const dir = placement.split("-")[0];
+ const value = store.useState("value");
+ const multiSelectable = Array.isArray(value);
+ const onKeyDown = useEvent((event) => {
+ var _a2;
+ onKeyDownProp == null ? void 0 : onKeyDownProp(event);
+ if (event.defaultPrevented) return;
+ if (!store) return;
+ const { orientation, items: items2, activeId } = store.getState();
+ const isVertical = orientation !== "horizontal";
+ const isHorizontal = orientation !== "vertical";
+ const isGrid = !!((_a2 = items2.find((item) => !item.disabled && item.value != null)) == null ? void 0 : _a2.rowId);
+ const moveKeyMap = {
+ ArrowUp: (isGrid || isVertical) && nextWithValue(store, store.up),
+ ArrowRight: (isGrid || isHorizontal) && nextWithValue(store, store.next),
+ ArrowDown: (isGrid || isVertical) && nextWithValue(store, store.down),
+ ArrowLeft: (isGrid || isHorizontal) && nextWithValue(store, store.previous)
+ };
+ const getId = moveKeyMap[event.key];
+ if (getId && moveOnKeyDownProp(event)) {
+ event.preventDefault();
+ store.move(getId());
+ }
+ const isTopOrBottom = dir === "top" || dir === "bottom";
+ const isLeft = dir === "left";
+ const isRight = dir === "right";
+ const canShowKeyMap = {
+ ArrowDown: isTopOrBottom,
+ ArrowUp: isTopOrBottom,
+ ArrowLeft: isLeft,
+ ArrowRight: isRight
+ };
+ const canShow = canShowKeyMap[event.key];
+ if (canShow && showOnKeyDownProp(event)) {
+ event.preventDefault();
+ store.move(activeId);
+ queueBeforeEvent(event.currentTarget, "keyup", store.show);
+ }
+ });
+ props = useWrapElement(
+ props,
+ (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectScopedContextProvider, { value: store, children: element }),
+ [store]
+ );
+ const [autofill, setAutofill] = (0,external_React_.useState)(false);
+ const nativeSelectChangedRef = (0,external_React_.useRef)(false);
+ (0,external_React_.useEffect)(() => {
+ const nativeSelectChanged = nativeSelectChangedRef.current;
+ nativeSelectChangedRef.current = false;
+ if (nativeSelectChanged) return;
+ setAutofill(false);
+ }, [value]);
+ const labelId = store.useState((state) => {
+ var _a2;
+ return (_a2 = state.labelElement) == null ? void 0 : _a2.id;
+ });
+ const label = props["aria-label"];
+ const labelledBy = props["aria-labelledby"] || labelId;
+ const items = store.useState((state) => {
+ if (!name) return;
+ return state.items;
+ });
+ const values = (0,external_React_.useMemo)(() => {
+ return [...new Set(items == null ? void 0 : items.map((i) => i.value).filter((v) => v != null))];
+ }, [items]);
+ props = useWrapElement(
+ props,
+ (element) => {
+ if (!name) return element;
+ return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { children: [
+ /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsxs)(
+ "select",
+ {
+ style: {
+ border: 0,
+ clip: "rect(0 0 0 0)",
+ height: "1px",
+ margin: "-1px",
+ overflow: "hidden",
+ padding: 0,
+ position: "absolute",
+ whiteSpace: "nowrap",
+ width: "1px"
+ },
+ tabIndex: -1,
+ "aria-hidden": true,
+ "aria-label": label,
+ "aria-labelledby": labelledBy,
+ name,
+ form,
+ required,
+ value,
+ multiple: multiSelectable,
+ onFocus: () => {
+ var _a2;
+ return (_a2 = store == null ? void 0 : store.getState().selectElement) == null ? void 0 : _a2.focus();
+ },
+ onChange: (event) => {
+ nativeSelectChangedRef.current = true;
+ setAutofill(true);
+ store == null ? void 0 : store.setValue(
+ multiSelectable ? getSelectedValues(event.target) : event.target.value
+ );
+ },
+ children: [
+ toArray(value).map((value2) => {
+ if (value2 == null) return null;
+ if (values.includes(value2)) return null;
+ return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)("option", { value: value2, children: value2 }, value2);
+ }),
+ values.map((value2) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)("option", { value: value2, children: value2 }, value2))
+ ]
}
- });
- };
-
- this.getLabelProps = props => {
- return {
- htmlFor: this.inputId,
- id: this.labelId,
- ...props
- };
- };
-
- this.getInputProps = function (_temp4) {
- let {
- onKeyDown,
- onBlur,
- onChange,
- onInput,
- onChangeText,
- ...rest
- } = _temp4 === void 0 ? {} : _temp4;
- let onChangeKey;
- let eventHandlers = {};
- /* istanbul ignore next (preact) */
-
- {
- onChangeKey = 'onChange';
- }
-
- const {
- inputValue,
- isOpen,
- highlightedIndex
- } = _this.getState();
-
- if (!rest.disabled) {
- eventHandlers = {
- [onChangeKey]: callAllEventHandlers(onChange, onInput, _this.inputHandleChange),
- onKeyDown: callAllEventHandlers(onKeyDown, _this.inputHandleKeyDown),
- onBlur: callAllEventHandlers(onBlur, _this.inputHandleBlur)
- };
- }
-
- return {
- 'aria-autocomplete': 'list',
- 'aria-activedescendant': isOpen && typeof highlightedIndex === 'number' && highlightedIndex >= 0 ? _this.getItemId(highlightedIndex) : null,
- 'aria-controls': isOpen ? _this.menuId : null,
- 'aria-labelledby': _this.labelId,
- // https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
- // revert back since autocomplete="nope" is ignored on latest Chrome and Opera
- autoComplete: 'off',
- value: inputValue,
- id: _this.inputId,
- ...eventHandlers,
- ...rest
- };
- };
-
- this.inputHandleKeyDown = event => {
- const key = normalizeArrowKey(event);
-
- if (key && this.inputKeyDownHandlers[key]) {
- this.inputKeyDownHandlers[key].call(this, event);
- }
- };
-
- this.inputHandleChange = event => {
- this.internalSetState({
- type: changeInput,
- isOpen: true,
- inputValue: event.target.value,
- highlightedIndex: this.props.defaultHighlightedIndex
- });
- };
-
- this.inputHandleBlur = () => {
- // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not the body element
- this.internalSetTimeout(() => {
- const downshiftButtonIsActive = this.props.environment.document && !!this.props.environment.document.activeElement && !!this.props.environment.document.activeElement.dataset && this.props.environment.document.activeElement.dataset.toggle && this._rootNode && this._rootNode.contains(this.props.environment.document.activeElement);
-
- if (!this.isMouseDown && !downshiftButtonIsActive) {
- this.reset({
- type: blurInput
- });
- }
- });
- };
-
- this.menuRef = node => {
- this._menuNode = node;
- };
-
- this.getMenuProps = function (_temp5, _temp6) {
- let {
- refKey = 'ref',
- ref,
- ...props
- } = _temp5 === void 0 ? {} : _temp5;
- let {
- suppressRefError = false
- } = _temp6 === void 0 ? {} : _temp6;
- _this.getMenuProps.called = true;
- _this.getMenuProps.refKey = refKey;
- _this.getMenuProps.suppressRefError = suppressRefError;
- return {
- [refKey]: handleRefs(ref, _this.menuRef),
- role: 'listbox',
- 'aria-labelledby': props && props['aria-label'] ? null : _this.labelId,
- id: _this.menuId,
- ...props
- };
- };
-
- this.getItemProps = function (_temp7) {
- let {
- onMouseMove,
- onMouseDown,
- onClick,
- onPress,
- index,
- item = true ?
- /* istanbul ignore next */
- undefined : 0,
- ...rest
- } = _temp7 === void 0 ? {} : _temp7;
-
- if (index === undefined) {
- _this.items.push(item);
-
- index = _this.items.indexOf(item);
- } else {
- _this.items[index] = item;
- }
-
- const onSelectKey = 'onClick';
- const customClickHandler = onClick;
- const enabledEventHandlers = {
- // onMouseMove is used over onMouseEnter here. onMouseMove
- // is only triggered on actual mouse movement while onMouseEnter
- // can fire on DOM changes, interrupting keyboard navigation
- onMouseMove: callAllEventHandlers(onMouseMove, () => {
- if (index === _this.getState().highlightedIndex) {
- return;
- }
-
- _this.setHighlightedIndex(index, {
- type: itemMouseEnter
- }); // We never want to manually scroll when changing state based
- // on `onMouseMove` because we will be moving the element out
- // from under the user which is currently scrolling/moving the
- // cursor
-
-
- _this.avoidScrolling = true;
-
- _this.internalSetTimeout(() => _this.avoidScrolling = false, 250);
- }),
- onMouseDown: callAllEventHandlers(onMouseDown, event => {
- // This prevents the activeElement from being changed
- // to the item so it can remain with the current activeElement
- // which is a more common use case.
- event.preventDefault();
- }),
- [onSelectKey]: callAllEventHandlers(customClickHandler, () => {
- _this.selectItemAtIndex(index, {
- type: clickItem
- });
- })
- }; // Passing down the onMouseDown handler to prevent redirect
- // of the activeElement if clicking on disabled items
-
- const eventHandlers = rest.disabled ? {
- onMouseDown: enabledEventHandlers.onMouseDown
- } : enabledEventHandlers;
- return {
- id: _this.getItemId(index),
- role: 'option',
- 'aria-selected': _this.getState().highlightedIndex === index,
- ...eventHandlers,
- ...rest
- };
- };
-
- this.clearItems = () => {
- this.items = [];
- };
-
- this.reset = function (otherStateToSet, cb) {
- if (otherStateToSet === void 0) {
- otherStateToSet = {};
- }
-
- otherStateToSet = pickState(otherStateToSet);
-
- _this.internalSetState(_ref => {
- let {
- selectedItem
- } = _ref;
- return {
- isOpen: _this.props.defaultIsOpen,
- highlightedIndex: _this.props.defaultHighlightedIndex,
- inputValue: _this.props.itemToString(selectedItem),
- ...otherStateToSet
- };
- }, cb);
- };
-
- this.toggleMenu = function (otherStateToSet, cb) {
- if (otherStateToSet === void 0) {
- otherStateToSet = {};
- }
-
- otherStateToSet = pickState(otherStateToSet);
-
- _this.internalSetState(_ref2 => {
- let {
- isOpen
- } = _ref2;
- return {
- isOpen: !isOpen,
- ...(isOpen && {
- highlightedIndex: _this.props.defaultHighlightedIndex
- }),
- ...otherStateToSet
- };
- }, () => {
- const {
- isOpen,
- highlightedIndex
- } = _this.getState();
-
- if (isOpen) {
- if (_this.getItemCount() > 0 && typeof highlightedIndex === 'number') {
- _this.setHighlightedIndex(highlightedIndex, otherStateToSet);
- }
- }
-
- cbToCb(cb)();
- });
- };
-
- this.openMenu = cb => {
- this.internalSetState({
- isOpen: true
- }, cb);
- };
-
- this.closeMenu = cb => {
- this.internalSetState({
- isOpen: false
- }, cb);
- };
-
- this.updateStatus = debounce(() => {
- const state = this.getState();
- const item = this.items[state.highlightedIndex];
- const resultCount = this.getItemCount();
- const status = this.props.getA11yStatusMessage({
- itemToString: this.props.itemToString,
- previousResultCount: this.previousResultCount,
- resultCount,
- highlightedItem: item,
- ...state
- });
- this.previousResultCount = resultCount;
- setStatus(status, this.props.environment.document);
- }, 200);
- // fancy destructuring + defaults + aliases
- // this basically says each value of state should either be set to
- // the initial value or the default value if the initial value is not provided
- const {
- defaultHighlightedIndex,
- initialHighlightedIndex: _highlightedIndex = defaultHighlightedIndex,
- defaultIsOpen,
- initialIsOpen: _isOpen = defaultIsOpen,
- initialInputValue: _inputValue = '',
- initialSelectedItem: _selectedItem = null
- } = this.props;
-
- const _state = this.getState({
- highlightedIndex: _highlightedIndex,
- isOpen: _isOpen,
- inputValue: _inputValue,
- selectedItem: _selectedItem
- });
-
- if (_state.selectedItem != null && this.props.initialInputValue === undefined) {
- _state.inputValue = this.props.itemToString(_state.selectedItem);
- }
-
- this.state = _state;
- }
-
- /**
- * Clear all running timeouts
- */
- internalClearTimeouts() {
- this.timeoutIds.forEach(id => {
- clearTimeout(id);
- });
- this.timeoutIds = [];
- }
- /**
- * Gets the state based on internal state or props
- * If a state value is passed via props, then that
- * is the value given, otherwise it's retrieved from
- * stateToMerge
- *
- * @param {Object} stateToMerge defaults to this.state
- * @return {Object} the state
- */
-
-
- getState(stateToMerge) {
- if (stateToMerge === void 0) {
- stateToMerge = this.state;
- }
-
- return getState(stateToMerge, this.props);
- }
-
- getItemCount() {
- // things read better this way. They're in priority order:
- // 1. `this.itemCount`
- // 2. `this.props.itemCount`
- // 3. `this.items.length`
- let itemCount = this.items.length;
-
- if (this.itemCount != null) {
- itemCount = this.itemCount;
- } else if (this.props.itemCount !== undefined) {
- itemCount = this.props.itemCount;
- }
-
- return itemCount;
- }
-
- getItemNodeFromIndex(index) {
- return this.props.environment.document.getElementById(this.getItemId(index));
- }
-
- scrollHighlightedItemIntoView() {
- /* istanbul ignore else (react-native) */
- {
- const node = this.getItemNodeFromIndex(this.getState().highlightedIndex);
- this.props.scrollIntoView(node, this._menuNode);
- }
- }
-
- moveHighlightedIndex(amount, otherStateToSet) {
- const itemCount = this.getItemCount();
- const {
- highlightedIndex
- } = this.getState();
-
- if (itemCount > 0) {
- const nextHighlightedIndex = getNextWrappingIndex(amount, highlightedIndex, itemCount, index => this.getItemNodeFromIndex(index));
- this.setHighlightedIndex(nextHighlightedIndex, otherStateToSet);
- }
- }
-
- getStateAndHelpers() {
- const {
- highlightedIndex,
- inputValue,
- selectedItem,
- isOpen
- } = this.getState();
- const {
- itemToString
- } = this.props;
- const {
- id
- } = this;
- const {
- getRootProps,
- getToggleButtonProps,
- getLabelProps,
- getMenuProps,
- getInputProps,
- getItemProps,
- openMenu,
- closeMenu,
- toggleMenu,
- selectItem,
- selectItemAtIndex,
- selectHighlightedItem,
- setHighlightedIndex,
- clearSelection,
- clearItems,
- reset,
- setItemCount,
- unsetItemCount,
- internalSetState: setState
- } = this;
- return {
- // prop getters
- getRootProps,
- getToggleButtonProps,
- getLabelProps,
- getMenuProps,
- getInputProps,
- getItemProps,
- // actions
- reset,
- openMenu,
- closeMenu,
- toggleMenu,
- selectItem,
- selectItemAtIndex,
- selectHighlightedItem,
- setHighlightedIndex,
- clearSelection,
- clearItems,
- setItemCount,
- unsetItemCount,
- setState,
- // props
- itemToString,
- // derived
- id,
- // state
- highlightedIndex,
- inputValue,
- isOpen,
- selectedItem
- };
- } //////////////////////////// ROOT
-
-
- componentDidMount() {
- /* istanbul ignore if (react-native) */
- if (false) {}
- /* istanbul ignore if (react-native) */
-
-
- {
- // this.isMouseDown helps us track whether the mouse is currently held down.
- // This is useful when the user clicks on an item in the list, but holds the mouse
- // down long enough for the list to disappear (because the blur event fires on the input)
- // this.isMouseDown is used in the blur handler on the input to determine whether the blur event should
- // trigger hiding the menu.
- const onMouseDown = () => {
- this.isMouseDown = true;
- };
-
- const onMouseUp = event => {
- this.isMouseDown = false; // if the target element or the activeElement is within a downshift node
- // then we don't want to reset downshift
-
- const contextWithinDownshift = targetWithinDownshift(event.target, [this._rootNode, this._menuNode], this.props.environment);
-
- if (!contextWithinDownshift && this.getState().isOpen) {
- this.reset({
- type: mouseUp
- }, () => this.props.onOuterClick(this.getStateAndHelpers()));
- }
- }; // Touching an element in iOS gives focus and hover states, but touching out of
- // the element will remove hover, and persist the focus state, resulting in the
- // blur event not being triggered.
- // this.isTouchMove helps us track whether the user is tapping or swiping on a touch screen.
- // If the user taps outside of Downshift, the component should be reset,
- // but not if the user is swiping
-
-
- const onTouchStart = () => {
- this.isTouchMove = false;
- };
-
- const onTouchMove = () => {
- this.isTouchMove = true;
- };
-
- const onTouchEnd = event => {
- const contextWithinDownshift = targetWithinDownshift(event.target, [this._rootNode, this._menuNode], this.props.environment, false);
-
- if (!this.isTouchMove && !contextWithinDownshift && this.getState().isOpen) {
- this.reset({
- type: touchEnd
- }, () => this.props.onOuterClick(this.getStateAndHelpers()));
+ ),
+ element
+ ] });
+ },
+ [
+ store,
+ label,
+ labelledBy,
+ name,
+ form,
+ required,
+ value,
+ multiSelectable,
+ values
+ ]
+ );
+ const children = /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { children: [
+ value,
+ /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectArrow, {})
+ ] });
+ const contentElement = store.useState("contentElement");
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
+ role: "combobox",
+ "aria-autocomplete": "none",
+ "aria-labelledby": labelId,
+ "aria-haspopup": getPopupRole(contentElement, "listbox"),
+ "data-autofill": autofill || void 0,
+ "data-name": name,
+ children
+ }, props), {
+ ref: useMergeRefs(store.setSelectElement, props.ref),
+ onKeyDown
+ });
+ props = usePopoverDisclosure(_3YLGPPWQ_spreadValues({ store, toggleOnClick }, props));
+ props = useCompositeTypeahead(_3YLGPPWQ_spreadValues({ store }, props));
+ return props;
+});
+var select_Select = forwardRef2(function Select2(props) {
+ const htmlProps = useSelect(props);
+ return LMDWO4NN_createElement(select_TagName, htmlProps);
+});
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/XRBJGF7I.js
+"use client";
+
+
+
+
+
+
+
+
+// src/select/select-list.tsx
+
+
+
+
+var XRBJGF7I_TagName = "div";
+var SelectListContext = (0,external_React_.createContext)(null);
+var useSelectList = createHook(
+ function useSelectList2(_a) {
+ var _b = _a, {
+ store,
+ resetOnEscape = true,
+ hideOnEnter = true,
+ focusOnMove = true,
+ composite,
+ alwaysVisible
+ } = _b, props = __objRest(_b, [
+ "store",
+ "resetOnEscape",
+ "hideOnEnter",
+ "focusOnMove",
+ "composite",
+ "alwaysVisible"
+ ]);
+ const context = useSelectContext();
+ store = store || context;
+ invariant(
+ store,
+ false && 0
+ );
+ const id = useId(props.id);
+ const value = store.useState("value");
+ const multiSelectable = Array.isArray(value);
+ const [defaultValue, setDefaultValue] = (0,external_React_.useState)(value);
+ const mounted = store.useState("mounted");
+ (0,external_React_.useEffect)(() => {
+ if (mounted) return;
+ setDefaultValue(value);
+ }, [mounted, value]);
+ resetOnEscape = resetOnEscape && !multiSelectable;
+ const onKeyDownProp = props.onKeyDown;
+ const resetOnEscapeProp = useBooleanEvent(resetOnEscape);
+ const hideOnEnterProp = useBooleanEvent(hideOnEnter);
+ const onKeyDown = useEvent((event) => {
+ onKeyDownProp == null ? void 0 : onKeyDownProp(event);
+ if (event.defaultPrevented) return;
+ if (event.key === "Escape" && resetOnEscapeProp(event)) {
+ store == null ? void 0 : store.setValue(defaultValue);
+ }
+ if (event.key === " " || event.key === "Enter") {
+ if (isSelfTarget(event) && hideOnEnterProp(event)) {
+ event.preventDefault();
+ store == null ? void 0 : store.hide();
+ }
+ }
+ });
+ const headingContext = (0,external_React_.useContext)(SelectHeadingContext);
+ const headingState = (0,external_React_.useState)();
+ const [headingId, setHeadingId] = headingContext || headingState;
+ const headingContextValue = (0,external_React_.useMemo)(
+ () => [headingId, setHeadingId],
+ [headingId]
+ );
+ const [childStore, setChildStore] = (0,external_React_.useState)(null);
+ const setStore = (0,external_React_.useContext)(SelectListContext);
+ (0,external_React_.useEffect)(() => {
+ if (!setStore) return;
+ setStore(store);
+ return () => setStore(null);
+ }, [setStore, store]);
+ props = useWrapElement(
+ props,
+ (element2) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectScopedContextProvider, { value: store, children: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectListContext.Provider, { value: setChildStore, children: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectHeadingContext.Provider, { value: headingContextValue, children: element2 }) }) }),
+ [store, headingContextValue]
+ );
+ const hasCombobox = !!store.combobox;
+ composite = composite != null ? composite : !hasCombobox && childStore !== store;
+ const [element, setElement] = useTransactionState(
+ composite ? store.setListElement : null
+ );
+ const role = useAttribute(element, "role", props.role);
+ const isCompositeRole = role === "listbox" || role === "menu" || role === "tree" || role === "grid";
+ const ariaMultiSelectable = composite || isCompositeRole ? multiSelectable || void 0 : void 0;
+ const hidden = isHidden(mounted, props.hidden, alwaysVisible);
+ const style = hidden ? _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props.style), { display: "none" }) : props.style;
+ if (composite) {
+ props = _3YLGPPWQ_spreadValues({
+ role: "listbox",
+ "aria-multiselectable": ariaMultiSelectable
+ }, props);
+ }
+ const labelId = store.useState(
+ (state) => {
+ var _a2;
+ return headingId || ((_a2 = state.labelElement) == null ? void 0 : _a2.id);
+ }
+ );
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
+ id,
+ "aria-labelledby": labelId,
+ hidden
+ }, props), {
+ ref: useMergeRefs(setElement, props.ref),
+ style,
+ onKeyDown
+ });
+ props = useComposite(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ store }, props), { composite }));
+ props = useCompositeTypeahead(_3YLGPPWQ_spreadValues({ store, typeahead: !hasCombobox }, props));
+ return props;
+ }
+);
+var SelectList = forwardRef2(function SelectList2(props) {
+ const htmlProps = useSelectList(props);
+ return LMDWO4NN_createElement(XRBJGF7I_TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/select/select-popover.js
+"use client";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// src/select/select-popover.tsx
+var select_popover_TagName = "div";
+var useSelectPopover = createHook(
+ function useSelectPopover2(_a) {
+ var _b = _a, { store, alwaysVisible } = _b, props = __objRest(_b, ["store", "alwaysVisible"]);
+ const context = useSelectProviderContext();
+ store = store || context;
+ props = useSelectList(_3YLGPPWQ_spreadValues({ store, alwaysVisible }, props));
+ props = usePopover(_3YLGPPWQ_spreadValues({ store, alwaysVisible }, props));
+ return props;
+ }
+);
+var SelectPopover = createDialogComponent(
+ forwardRef2(function SelectPopover2(props) {
+ const htmlProps = useSelectPopover(props);
+ return LMDWO4NN_createElement(select_popover_TagName, htmlProps);
+ }),
+ useSelectProviderContext
+);
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/YF2ICFG4.js
+"use client";
+
+
+
+
+
+
+
+
+// src/select/select-item.tsx
+
+
+
+
+
+var YF2ICFG4_TagName = "div";
+function isSelected(storeValue, itemValue) {
+ if (itemValue == null) return;
+ if (storeValue == null) return false;
+ if (Array.isArray(storeValue)) {
+ return storeValue.includes(itemValue);
+ }
+ return storeValue === itemValue;
+}
+var useSelectItem = createHook(
+ function useSelectItem2(_a) {
+ var _b = _a, {
+ store,
+ value,
+ getItem: getItemProp,
+ hideOnClick,
+ setValueOnClick = value != null,
+ preventScrollOnKeyDown = true,
+ focusOnHover = true
+ } = _b, props = __objRest(_b, [
+ "store",
+ "value",
+ "getItem",
+ "hideOnClick",
+ "setValueOnClick",
+ "preventScrollOnKeyDown",
+ "focusOnHover"
+ ]);
+ var _a2;
+ const context = useSelectScopedContext();
+ store = store || context;
+ invariant(
+ store,
+ false && 0
+ );
+ const id = useId(props.id);
+ const disabled = disabledFromProps(props);
+ const { listElement, multiSelectable, selected, autoFocus } = useStoreStateObject(store, {
+ listElement: "listElement",
+ multiSelectable(state) {
+ return Array.isArray(state.value);
+ },
+ selected(state) {
+ return isSelected(state.value, value);
+ },
+ autoFocus(state) {
+ if (value == null) return false;
+ if (state.value == null) return false;
+ if (state.activeId !== id && (store == null ? void 0 : store.item(state.activeId))) {
+ return false;
+ }
+ if (Array.isArray(state.value)) {
+ return state.value[state.value.length - 1] === value;
+ }
+ return state.value === value;
+ }
+ });
+ const getItem = (0,external_React_.useCallback)(
+ (item) => {
+ const nextItem = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, item), {
+ value: disabled ? void 0 : value,
+ children: value
+ });
+ if (getItemProp) {
+ return getItemProp(nextItem);
+ }
+ return nextItem;
+ },
+ [disabled, value, getItemProp]
+ );
+ hideOnClick = hideOnClick != null ? hideOnClick : value != null && !multiSelectable;
+ const onClickProp = props.onClick;
+ const setValueOnClickProp = useBooleanEvent(setValueOnClick);
+ const hideOnClickProp = useBooleanEvent(hideOnClick);
+ const onClick = useEvent((event) => {
+ onClickProp == null ? void 0 : onClickProp(event);
+ if (event.defaultPrevented) return;
+ if (isDownloading(event)) return;
+ if (isOpeningInNewTab(event)) return;
+ if (setValueOnClickProp(event) && value != null) {
+ store == null ? void 0 : store.setValue((prevValue) => {
+ if (!Array.isArray(prevValue)) return value;
+ if (prevValue.includes(value)) {
+ return prevValue.filter((v) => v !== value);
}
- };
-
- const {
- environment
- } = this.props;
- environment.addEventListener('mousedown', onMouseDown);
- environment.addEventListener('mouseup', onMouseUp);
- environment.addEventListener('touchstart', onTouchStart);
- environment.addEventListener('touchmove', onTouchMove);
- environment.addEventListener('touchend', onTouchEnd);
-
- this.cleanup = () => {
- this.internalClearTimeouts();
- this.updateStatus.cancel();
- environment.removeEventListener('mousedown', onMouseDown);
- environment.removeEventListener('mouseup', onMouseUp);
- environment.removeEventListener('touchstart', onTouchStart);
- environment.removeEventListener('touchmove', onTouchMove);
- environment.removeEventListener('touchend', onTouchEnd);
- };
- }
- }
-
- shouldScroll(prevState, prevProps) {
- const {
- highlightedIndex: currentHighlightedIndex
- } = this.props.highlightedIndex === undefined ? this.getState() : this.props;
- const {
- highlightedIndex: prevHighlightedIndex
- } = prevProps.highlightedIndex === undefined ? prevState : prevProps;
- const scrollWhenOpen = currentHighlightedIndex && this.getState().isOpen && !prevState.isOpen;
- const scrollWhenNavigating = currentHighlightedIndex !== prevHighlightedIndex;
- return scrollWhenOpen || scrollWhenNavigating;
- }
-
- componentDidUpdate(prevProps, prevState) {
- if (false) {}
-
- if (isControlledProp(this.props, 'selectedItem') && this.props.selectedItemChanged(prevProps.selectedItem, this.props.selectedItem)) {
- this.internalSetState({
- type: controlledPropUpdatedSelectedItem,
- inputValue: this.props.itemToString(this.props.selectedItem)
- });
- }
-
- if (!this.avoidScrolling && this.shouldScroll(prevState, prevProps)) {
- this.scrollHighlightedItemIntoView();
- }
- /* istanbul ignore else (react-native) */
-
-
- {
- this.updateStatus();
- }
- }
-
- componentWillUnmount() {
- this.cleanup(); // avoids memory leak
- }
-
- render() {
- const children = unwrapArray(this.props.children, downshift_esm_noop); // because the items are rerendered every time we call the children
- // we clear this out each render and it will be populated again as
- // getItemProps is called.
-
- this.clearItems(); // we reset this so we know whether the user calls getRootProps during
- // this render. If they do then we don't need to do anything,
- // if they don't then we need to clone the element they return and
- // apply the props for them.
-
- this.getRootProps.called = false;
- this.getRootProps.refKey = undefined;
- this.getRootProps.suppressRefError = undefined; // we do something similar for getMenuProps
-
- this.getMenuProps.called = false;
- this.getMenuProps.refKey = undefined;
- this.getMenuProps.suppressRefError = undefined; // we do something similar for getLabelProps
-
- this.getLabelProps.called = false; // and something similar for getInputProps
-
- this.getInputProps.called = false;
- const element = unwrapArray(children(this.getStateAndHelpers()));
-
- if (!element) {
- return null;
- }
-
- if (this.getRootProps.called || this.props.suppressRefError) {
- if (false) {}
-
- return element;
- } else if (isDOMElement(element)) {
- // they didn't apply the root props, but we can clone
- // this and apply the props ourselves
- return /*#__PURE__*/cloneElement(element, this.getRootProps(getElementProps(element)));
- }
- /* istanbul ignore else */
-
-
- if (false) {}
- /* istanbul ignore next */
-
-
- return undefined;
- }
-
- }
-
- Downshift.defaultProps = {
- defaultHighlightedIndex: null,
- defaultIsOpen: false,
- getA11yStatusMessage: getA11yStatusMessage$1,
- itemToString: i => {
- if (i == null) {
- return '';
- }
-
- if (false) {}
-
- return String(i);
- },
- onStateChange: downshift_esm_noop,
- onInputValueChange: downshift_esm_noop,
- onUserAction: downshift_esm_noop,
- onChange: downshift_esm_noop,
- onSelect: downshift_esm_noop,
- onOuterClick: downshift_esm_noop,
- selectedItemChanged: (prevItem, item) => prevItem !== item,
- environment:
- /* istanbul ignore next (ssr) */
- typeof window === 'undefined' ? {} : window,
- stateReducer: (state, stateToSet) => stateToSet,
- suppressRefError: false,
- scrollIntoView
- };
- Downshift.stateChangeTypes = stateChangeTypes$3;
- return Downshift;
-})()));
-
- false ? 0 : void 0;
-var Downshift$1 = (/* unused pure expression or super */ null && (Downshift));
-
-function validateGetMenuPropsCalledCorrectly(node, _ref3) {
- let {
- refKey
- } = _ref3;
-
- if (!node) {
- // eslint-disable-next-line no-console
- console.error(`downshift: The ref prop "${refKey}" from getMenuProps was not applied correctly on your menu element.`);
- }
-}
-
-function validateGetRootPropsCalledCorrectly(element, _ref4) {
- let {
- refKey
- } = _ref4;
- const refKeySpecified = refKey !== 'ref';
- const isComposite = !isDOMElement(element);
-
- if (isComposite && !refKeySpecified && !isForwardRef(element)) {
- // eslint-disable-next-line no-console
- console.error('downshift: You returned a non-DOM element. You must specify a refKey in getRootProps');
- } else if (!isComposite && refKeySpecified) {
- // eslint-disable-next-line no-console
- console.error(`downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified "${refKey}"`);
- }
-
- if (!isForwardRef(element) && !getElementProps(element)[refKey]) {
- // eslint-disable-next-line no-console
- console.error(`downshift: You must apply the ref prop "${refKey}" from getRootProps onto your root element.`);
- }
-}
-
-const dropdownDefaultStateValues = {
- highlightedIndex: -1,
- isOpen: false,
- selectedItem: null,
- inputValue: ''
-};
-
-function callOnChangeProps(action, state, newState) {
- const {
- props,
- type
- } = action;
- const changes = {};
- Object.keys(state).forEach(key => {
- invokeOnChangeHandler(key, action, state, newState);
-
- if (newState[key] !== state[key]) {
- changes[key] = newState[key];
- }
- });
-
- if (props.onStateChange && Object.keys(changes).length) {
- props.onStateChange({
- type,
- ...changes
- });
- }
-}
-
-function invokeOnChangeHandler(key, action, state, newState) {
- const {
- props,
- type
- } = action;
- const handler = `on${capitalizeString(key)}Change`;
-
- if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) {
- props[handler]({
- type,
- ...newState
- });
- }
-}
-/**
- * Default state reducer that returns the changes.
- *
- * @param {Object} s state.
- * @param {Object} a action with changes.
- * @returns {Object} changes.
- */
-
-
-function stateReducer(s, a) {
- return a.changes;
-}
-/**
- * Returns a message to be added to aria-live region when item is selected.
- *
- * @param {Object} selectionParameters Parameters required to build the message.
- * @returns {string} The a11y message.
- */
-
-
-function getA11ySelectionMessage(selectionParameters) {
- const {
- selectedItem,
- itemToString: itemToStringLocal
- } = selectionParameters;
- return selectedItem ? `${itemToStringLocal(selectedItem)} has been selected.` : '';
-}
-/**
- * Debounced call for updating the a11y message.
- */
-
-
-const updateA11yStatus = debounce((getA11yMessage, document) => {
- setStatus(getA11yMessage(), document);
-}, 200); // istanbul ignore next
-
-const downshift_esm_useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? external_React_.useLayoutEffect : external_React_.useEffect;
-
-function useElementIds(_ref) {
- let {
- id = `downshift-${generateId()}`,
- labelId,
- menuId,
- getItemId,
- toggleButtonId,
- inputId
- } = _ref;
- const elementIdsRef = (0,external_React_.useRef)({
- labelId: labelId || `${id}-label`,
- menuId: menuId || `${id}-menu`,
- getItemId: getItemId || (index => `${id}-item-${index}`),
- toggleButtonId: toggleButtonId || `${id}-toggle-button`,
- inputId: inputId || `${id}-input`
- });
- return elementIdsRef.current;
-}
-
-function getItemIndex(index, item, items) {
- if (index !== undefined) {
- return index;
- }
-
- if (items.length === 0) {
- return -1;
- }
-
- return items.indexOf(item);
-}
-
-function itemToString(item) {
- return item ? String(item) : '';
-}
-
-function isAcceptedCharacterKey(key) {
- return /^\S{1}$/.test(key);
-}
-
-function capitalizeString(string) {
- return `${string.slice(0, 1).toUpperCase()}${string.slice(1)}`;
-}
-
-function downshift_esm_useLatestRef(val) {
- const ref = (0,external_React_.useRef)(val); // technically this is not "concurrent mode safe" because we're manipulating
- // the value during render (so it's not idempotent). However, the places this
- // hook is used is to support memoizing callbacks which will be called
- // *during* render, so we need the latest values *during* render.
- // If not for this, then we'd probably want to use useLayoutEffect instead.
-
- ref.current = val;
- return ref;
-}
-/**
- * Computes the controlled state using a the previous state, props,
- * two reducers, one from downshift and an optional one from the user.
- * Also calls the onChange handlers for state values that have changed.
- *
- * @param {Function} reducer Reducer function from downshift.
- * @param {Object} initialState Initial state of the hook.
- * @param {Object} props The hook props.
- * @returns {Array} An array with the state and an action dispatcher.
- */
-
-
-function useEnhancedReducer(reducer, initialState, props) {
- const prevStateRef = (0,external_React_.useRef)();
- const actionRef = (0,external_React_.useRef)();
- const enhancedReducer = (0,external_React_.useCallback)((state, action) => {
- actionRef.current = action;
- state = getState(state, action.props);
- const changes = reducer(state, action);
- const newState = action.props.stateReducer(state, { ...action,
- changes
- });
- return newState;
- }, [reducer]);
- const [state, dispatch] = (0,external_React_.useReducer)(enhancedReducer, initialState);
- const propsRef = downshift_esm_useLatestRef(props);
- const dispatchWithProps = (0,external_React_.useCallback)(action => dispatch({
- props: propsRef.current,
- ...action
- }), [propsRef]);
- const action = actionRef.current;
- (0,external_React_.useEffect)(() => {
- if (action && prevStateRef.current && prevStateRef.current !== state) {
- callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
- }
-
- prevStateRef.current = state;
- }, [state, props, action]);
- return [state, dispatchWithProps];
-}
-/**
- * Wraps the useEnhancedReducer and applies the controlled prop values before
- * returning the new state.
- *
- * @param {Function} reducer Reducer function from downshift.
- * @param {Object} initialState Initial state of the hook.
- * @param {Object} props The hook props.
- * @returns {Array} An array with the state and an action dispatcher.
- */
-
-
-function useControlledReducer$1(reducer, initialState, props) {
- const [state, dispatch] = useEnhancedReducer(reducer, initialState, props);
- return [getState(state, props), dispatch];
-}
-
-const defaultProps$3 = {
- itemToString,
- stateReducer,
- getA11ySelectionMessage,
- scrollIntoView,
- circularNavigation: false,
- environment:
- /* istanbul ignore next (ssr) */
- typeof window === 'undefined' ? {} : window
-};
-
-function getDefaultValue$1(props, propKey, defaultStateValues) {
- if (defaultStateValues === void 0) {
- defaultStateValues = dropdownDefaultStateValues;
- }
-
- const defaultValue = props[`default${capitalizeString(propKey)}`];
-
- if (defaultValue !== undefined) {
- return defaultValue;
- }
-
- return defaultStateValues[propKey];
-}
-
-function getInitialValue$1(props, propKey, defaultStateValues) {
- if (defaultStateValues === void 0) {
- defaultStateValues = dropdownDefaultStateValues;
- }
-
- const value = props[propKey];
-
- if (value !== undefined) {
- return value;
- }
-
- const initialValue = props[`initial${capitalizeString(propKey)}`];
-
- if (initialValue !== undefined) {
- return initialValue;
- }
-
- return getDefaultValue$1(props, propKey, defaultStateValues);
-}
-
-function getInitialState$2(props) {
- const selectedItem = getInitialValue$1(props, 'selectedItem');
- const isOpen = getInitialValue$1(props, 'isOpen');
- const highlightedIndex = getInitialValue$1(props, 'highlightedIndex');
- const inputValue = getInitialValue$1(props, 'inputValue');
- return {
- highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.indexOf(selectedItem) : highlightedIndex,
- isOpen,
- selectedItem,
- inputValue
- };
-}
-
-function getHighlightedIndexOnOpen(props, state, offset, getItemNodeFromIndex) {
- const {
- items,
- initialHighlightedIndex,
- defaultHighlightedIndex
+ return [...prevValue, value];
+ });
+ }
+ if (hideOnClickProp(event)) {
+ store == null ? void 0 : store.hide();
+ }
+ });
+ props = useWrapElement(
+ props,
+ (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectItemCheckedContext.Provider, { value: selected != null ? selected : false, children: element }),
+ [selected]
+ );
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
+ id,
+ role: getPopupItemRole(listElement),
+ "aria-selected": selected,
+ children: value
+ }, props), {
+ autoFocus: (_a2 = props.autoFocus) != null ? _a2 : autoFocus,
+ onClick
+ });
+ props = useCompositeItem(_3YLGPPWQ_spreadValues({
+ store,
+ getItem,
+ preventScrollOnKeyDown
+ }, props));
+ const focusOnHoverProp = useBooleanEvent(focusOnHover);
+ props = useCompositeHover(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
+ store
+ }, props), {
+ // We have to disable focusOnHover when the popup is closed, otherwise
+ // the active item will change to null (the container) when the popup is
+ // closed by clicking on an item.
+ focusOnHover(event) {
+ if (!focusOnHoverProp(event)) return false;
+ const state = store == null ? void 0 : store.getState();
+ return !!(state == null ? void 0 : state.open);
+ }
+ }));
+ return props;
+ }
+);
+var SelectItem = memo2(
+ forwardRef2(function SelectItem2(props) {
+ const htmlProps = useSelectItem(props);
+ return LMDWO4NN_createElement(YF2ICFG4_TagName, htmlProps);
+ })
+);
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/EYKMH5G5.js
+"use client";
+
+// src/checkbox/checkbox-checked-context.tsx
+
+var CheckboxCheckedContext = (0,external_React_.createContext)(false);
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/5JCRYSSV.js
+"use client";
+
+
+
+
+// src/checkbox/checkbox-check.tsx
+
+
+
+var _5JCRYSSV_TagName = "span";
+var checkmark = /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(
+ "svg",
+ {
+ display: "block",
+ fill: "none",
+ stroke: "currentColor",
+ strokeLinecap: "round",
+ strokeLinejoin: "round",
+ strokeWidth: 1.5,
+ viewBox: "0 0 16 16",
+ height: "1em",
+ width: "1em",
+ children: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)("polyline", { points: "4,8 7,12 12,4" })
+ }
+);
+function getChildren(props) {
+ if (props.checked) {
+ return props.children || checkmark;
+ }
+ if (typeof props.children === "function") {
+ return props.children;
+ }
+ return null;
+}
+var useCheckboxCheck = createHook(
+ function useCheckboxCheck2(_a) {
+ var _b = _a, { store, checked } = _b, props = __objRest(_b, ["store", "checked"]);
+ const context = (0,external_React_.useContext)(CheckboxCheckedContext);
+ checked = checked != null ? checked : context;
+ const children = getChildren({ checked, children: props.children });
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
+ "aria-hidden": true
+ }, props), {
+ children,
+ style: _3YLGPPWQ_spreadValues({
+ width: "1em",
+ height: "1em",
+ pointerEvents: "none"
+ }, props.style)
+ });
+ return removeUndefinedValues(props);
+ }
+);
+var CheckboxCheck = forwardRef2(function CheckboxCheck2(props) {
+ const htmlProps = useCheckboxCheck(props);
+ return LMDWO4NN_createElement(_5JCRYSSV_TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/select/select-item-check.js
+"use client";
+
+
+
+
+
+
+
+
+
+
+
+
+
+// src/select/select-item-check.tsx
+
+var select_item_check_TagName = "span";
+var useSelectItemCheck = createHook(
+ function useSelectItemCheck2(_a) {
+ var _b = _a, { store, checked } = _b, props = __objRest(_b, ["store", "checked"]);
+ const context = (0,external_React_.useContext)(SelectItemCheckedContext);
+ checked = checked != null ? checked : context;
+ props = useCheckboxCheck(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { checked }));
+ return props;
+ }
+);
+var SelectItemCheck = forwardRef2(function SelectItemCheck2(props) {
+ const htmlProps = useSelectItemCheck(props);
+ return LMDWO4NN_createElement(select_item_check_TagName, htmlProps);
+});
+
+
+;// ./node_modules/@wordpress/components/build-module/custom-select-control-v2/styles.js
+
+function custom_select_control_v2_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+/**
+ * External dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+// TODO: extract to common utils and apply to relevant components
+const ANIMATION_PARAMS = {
+ SLIDE_AMOUNT: '2px',
+ DURATION: '400ms',
+ EASING: 'cubic-bezier( 0.16, 1, 0.3, 1 )'
+};
+const INLINE_PADDING = {
+ compact: config_values.controlPaddingXSmall,
+ small: config_values.controlPaddingXSmall,
+ default: config_values.controlPaddingX
+};
+const getSelectSize = (size, heightProperty) => {
+ const sizes = {
+ compact: {
+ [heightProperty]: 32,
+ paddingInlineStart: INLINE_PADDING.compact,
+ paddingInlineEnd: INLINE_PADDING.compact + chevronIconSize
+ },
+ default: {
+ [heightProperty]: 40,
+ paddingInlineStart: INLINE_PADDING.default,
+ paddingInlineEnd: INLINE_PADDING.default + chevronIconSize
+ },
+ small: {
+ [heightProperty]: 24,
+ paddingInlineStart: INLINE_PADDING.small,
+ paddingInlineEnd: INLINE_PADDING.small + chevronIconSize
+ }
+ };
+ return sizes[size] || sizes.default;
+};
+const getSelectItemSize = size => {
+ // Used to visually align the checkmark with the chevron
+ const checkmarkCorrection = 6;
+ const sizes = {
+ compact: {
+ paddingInlineStart: INLINE_PADDING.compact,
+ paddingInlineEnd: INLINE_PADDING.compact - checkmarkCorrection
+ },
+ default: {
+ paddingInlineStart: INLINE_PADDING.default,
+ paddingInlineEnd: INLINE_PADDING.default - checkmarkCorrection
+ },
+ small: {
+ paddingInlineStart: INLINE_PADDING.small,
+ paddingInlineEnd: INLINE_PADDING.small - checkmarkCorrection
+ }
+ };
+ return sizes[size] || sizes.default;
+};
+const styles_Select = /*#__PURE__*/emotion_styled_base_browser_esm(select_Select, true ? {
+ // Do not forward `hasCustomRenderProp` to the underlying Ariakit.Select component
+ shouldForwardProp: prop => prop !== 'hasCustomRenderProp',
+ target: "e1p3eej77"
+} : 0)(({
+ size,
+ hasCustomRenderProp
+}) => /*#__PURE__*/emotion_react_browser_esm_css("display:block;background-color:", COLORS.theme.background, ";border:none;color:", COLORS.theme.foreground, ";cursor:pointer;font-family:inherit;text-align:start;user-select:none;width:100%;&[data-focus-visible]{outline:none;}", getSelectSize(size, hasCustomRenderProp ? 'minHeight' : 'height'), " ", !hasCustomRenderProp && truncateStyles, " ", fontSizeStyles({
+ inputSize: size
+}), ";" + ( true ? "" : 0), true ? "" : 0), true ? "" : 0);
+const slideDownAndFade = emotion_react_browser_esm_keyframes({
+ '0%': {
+ opacity: 0,
+ transform: `translateY(-${ANIMATION_PARAMS.SLIDE_AMOUNT})`
+ },
+ '100%': {
+ opacity: 1,
+ transform: 'translateY(0)'
+ }
+});
+const styles_SelectPopover = /*#__PURE__*/emotion_styled_base_browser_esm(SelectPopover, true ? {
+ target: "e1p3eej76"
+} : 0)("display:flex;flex-direction:column;background-color:", COLORS.theme.background, ";border-radius:", config_values.radiusSmall, ";border:1px solid ", COLORS.theme.foreground, ";box-shadow:", config_values.elevationMedium, ";z-index:1000000;max-height:min( var( --popover-available-height, 400px ), 400px );overflow:auto;overscroll-behavior:contain;min-width:min-content;&[data-open]{@media not ( prefers-reduced-motion ){animation-duration:", ANIMATION_PARAMS.DURATION, ";animation-timing-function:", ANIMATION_PARAMS.EASING, ";animation-name:", slideDownAndFade, ";will-change:transform,opacity;}}&[data-focus-visible]{outline:none;}" + ( true ? "" : 0));
+const styles_SelectItem = /*#__PURE__*/emotion_styled_base_browser_esm(SelectItem, true ? {
+ target: "e1p3eej75"
+} : 0)(({
+ size
+}) => /*#__PURE__*/emotion_react_browser_esm_css("cursor:default;display:flex;align-items:center;justify-content:space-between;font-size:", config_values.fontSize, ";line-height:28px;padding-block:", space(2), ";scroll-margin:", space(1), ";user-select:none;&[aria-disabled='true']{cursor:not-allowed;}&[data-active-item]{background-color:", COLORS.theme.gray[300], ";}", getSelectItemSize(size), ";" + ( true ? "" : 0), true ? "" : 0), true ? "" : 0);
+const truncateStyles = true ? {
+ name: "1h52dri",
+ styles: "overflow:hidden;text-overflow:ellipsis;white-space:nowrap"
+} : 0;
+const SelectedExperimentalHintWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
+ target: "e1p3eej74"
+} : 0)(truncateStyles, ";" + ( true ? "" : 0));
+const SelectedExperimentalHintItem = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
+ target: "e1p3eej73"
+} : 0)("color:", COLORS.theme.gray[600], ";margin-inline-start:", space(2), ";" + ( true ? "" : 0));
+const WithHintItemWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
+ target: "e1p3eej72"
+} : 0)("display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;flex:1;column-gap:", space(4), ";" + ( true ? "" : 0));
+const WithHintItemHint = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
+ target: "e1p3eej71"
+} : 0)("color:", COLORS.theme.gray[600], ";text-align:initial;line-height:", config_values.fontLineHeightBase, ";padding-inline-end:", space(1), ";margin-block:", space(1), ";" + ( true ? "" : 0));
+const SelectedItemCheck = /*#__PURE__*/emotion_styled_base_browser_esm(SelectItemCheck, true ? {
+ target: "e1p3eej70"
+} : 0)("display:flex;align-items:center;margin-inline-start:", space(2), ";align-self:start;margin-block-start:2px;font-size:0;", WithHintItemWrapper, "~&,&:not(:empty){font-size:24px;}" + ( true ? "" : 0));
+
+;// ./node_modules/@wordpress/components/build-module/custom-select-control-v2/custom-select.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+
+const CustomSelectContext = (0,external_wp_element_namespaceObject.createContext)(undefined);
+function defaultRenderSelectedValue(value) {
+ const isValueEmpty = Array.isArray(value) ? value.length === 0 : value === undefined || value === null;
+ if (isValueEmpty) {
+ return (0,external_wp_i18n_namespaceObject.__)('Select an item');
+ }
+ if (Array.isArray(value)) {
+ return value.length === 1 ? value[0] :
+ // translators: %s: number of items selected (it will always be 2 or more items)
+ (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('%s items selected'), value.length);
+ }
+ return value;
+}
+const CustomSelectButton = ({
+ renderSelectedValue,
+ size = 'default',
+ store,
+ ...restProps
+}) => {
+ const {
+ value: currentValue
+ } = useStoreState(store);
+ const computedRenderSelectedValue = (0,external_wp_element_namespaceObject.useMemo)(() => renderSelectedValue !== null && renderSelectedValue !== void 0 ? renderSelectedValue : defaultRenderSelectedValue, [renderSelectedValue]);
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_Select, {
+ ...restProps,
+ size: size,
+ hasCustomRenderProp: !!renderSelectedValue,
+ store: store,
+ children: computedRenderSelectedValue(currentValue)
+ });
+};
+function _CustomSelect(props) {
+ const {
+ children,
+ hideLabelFromVision = false,
+ label,
+ size,
+ store,
+ className,
+ isLegacy = false,
+ ...restProps
} = props;
- const {
- selectedItem,
- highlightedIndex
- } = state;
-
- if (items.length === 0) {
- return -1;
- } // initialHighlightedIndex will give value to highlightedIndex on initial state only.
-
-
- if (initialHighlightedIndex !== undefined && highlightedIndex === initialHighlightedIndex) {
- return initialHighlightedIndex;
- }
-
- if (defaultHighlightedIndex !== undefined) {
- return defaultHighlightedIndex;
- }
-
- if (selectedItem) {
- if (offset === 0) {
- return items.indexOf(selectedItem);
- }
-
- return getNextWrappingIndex(offset, items.indexOf(selectedItem), items.length, getItemNodeFromIndex, false);
- }
-
- if (offset === 0) {
- return -1;
- }
-
- return offset < 0 ? items.length - 1 : 0;
-}
-/**
- * Reuse the movement tracking of mouse and touch events.
- *
- * @param {boolean} isOpen Whether the dropdown is open or not.
- * @param {Array<Object>} downshiftElementRefs Downshift element refs to track movement (toggleButton, menu etc.)
- * @param {Object} environment Environment where component/hook exists.
- * @param {Function} handleBlur Handler on blur from mouse or touch.
- * @returns {Object} Ref containing whether mouseDown or touchMove event is happening
- */
-
-
-function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) {
- const mouseAndTouchTrackersRef = (0,external_React_.useRef)({
- isMouseDown: false,
- isTouchMove: false
- });
- (0,external_React_.useEffect)(() => {
- // The same strategy for checking if a click occurred inside or outside downsift
- // as in downshift.js.
- const onMouseDown = () => {
- mouseAndTouchTrackersRef.current.isMouseDown = true;
- };
-
- const onMouseUp = event => {
- mouseAndTouchTrackersRef.current.isMouseDown = false;
-
- if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(ref => ref.current), environment)) {
- handleBlur();
- }
- };
-
- const onTouchStart = () => {
- mouseAndTouchTrackersRef.current.isTouchMove = false;
- };
-
- const onTouchMove = () => {
- mouseAndTouchTrackersRef.current.isTouchMove = true;
- };
-
- const onTouchEnd = event => {
- if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(ref => ref.current), environment, false)) {
- handleBlur();
- }
- };
-
- environment.addEventListener('mousedown', onMouseDown);
- environment.addEventListener('mouseup', onMouseUp);
- environment.addEventListener('touchstart', onTouchStart);
- environment.addEventListener('touchmove', onTouchMove);
- environment.addEventListener('touchend', onTouchEnd);
- return function cleanup() {
- environment.removeEventListener('mousedown', onMouseDown);
- environment.removeEventListener('mouseup', onMouseUp);
- environment.removeEventListener('touchstart', onTouchStart);
- environment.removeEventListener('touchmove', onTouchMove);
- environment.removeEventListener('touchend', onTouchEnd);
- }; // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [isOpen, environment]);
- return mouseAndTouchTrackersRef;
-}
-/* istanbul ignore next */
-// eslint-disable-next-line import/no-mutable-exports
-
-
-let useGetterPropsCalledChecker = () => downshift_esm_noop;
-/**
- * Custom hook that checks if getter props are called correctly.
- *
- * @param {...any} propKeys Getter prop names to be handled.
- * @returns {Function} Setter function called inside getter props to set call information.
- */
-
-/* istanbul ignore next */
-
-
-if (false) {}
-
-function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref2) {
- let {
- isInitialMount,
- highlightedIndex,
- items,
- environment,
+ const onSelectPopoverKeyDown = (0,external_wp_element_namespaceObject.useCallback)(e => {
+ if (isLegacy) {
+ e.stopPropagation();
+ }
+ }, [isLegacy]);
+ const contextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
+ store,
+ size
+ }), [store, size]);
+ return (
+ /*#__PURE__*/
+ // Where should `restProps` be forwarded to?
+ (0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
+ className: className,
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectLabel, {
+ store: store,
+ render: hideLabelFromVision ?
+ /*#__PURE__*/
+ // @ts-expect-error `children` are passed via the render prop
+ (0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, {}) :
+ /*#__PURE__*/
+ // @ts-expect-error `children` are passed via the render prop
+ (0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control.VisualLabel, {
+ as: "div"
+ }),
+ children: label
+ }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(input_base, {
+ __next40pxDefaultSize: true,
+ size: size,
+ suffix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(select_control_chevron_down, {}),
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CustomSelectButton, {
+ ...restProps,
+ size: size,
+ store: store
+ // Match legacy behavior (move selection rather than open the popover)
+ ,
+ showOnKeyDown: !isLegacy
+ }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_SelectPopover, {
+ gutter: 12,
+ store: store,
+ sameWidth: true,
+ slide: false,
+ onKeyDown: onSelectPopoverKeyDown
+ // Match legacy behavior
+ ,
+ flip: !isLegacy,
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CustomSelectContext.Provider, {
+ value: contextValue,
+ children: children
+ })
+ })]
+ })]
+ })
+ );
+}
+/* harmony default export */ const custom_select = (_CustomSelect);
+
+;// ./node_modules/@wordpress/components/build-module/custom-select-control-v2/item.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+function CustomSelectItem({
+ children,
+ ...props
+}) {
+ var _customSelectContext$;
+ const customSelectContext = (0,external_wp_element_namespaceObject.useContext)(CustomSelectContext);
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_SelectItem, {
+ store: customSelectContext?.store,
+ size: (_customSelectContext$ = customSelectContext?.size) !== null && _customSelectContext$ !== void 0 ? _customSelectContext$ : 'default',
+ ...props,
+ children: [children !== null && children !== void 0 ? children : props.value, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectedItemCheck, {
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, {
+ icon: library_check
+ })
+ })]
+ });
+}
+CustomSelectItem.displayName = 'CustomSelectControlV2.Item';
+/* harmony default export */ const custom_select_control_v2_item = (CustomSelectItem);
+
+;// ./node_modules/@wordpress/components/build-module/custom-select-control/index.js
+/**
+ * External dependencies
+ */
+
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+
+function custom_select_control_useDeprecatedProps({
+ __experimentalShowSelectedHint,
+ ...otherProps
+}) {
+ return {
+ showSelectedHint: __experimentalShowSelectedHint,
+ ...otherProps
+ };
+}
+
+// The removal of `__experimentalHint` in favour of `hint` doesn't happen in
+// the `useDeprecatedProps` hook in order not to break consumers that rely
+// on object identity (see https://github.com/WordPress/gutenberg/pull/63248#discussion_r1672213131)
+function applyOptionDeprecations({
+ __experimentalHint,
+ ...rest
+}) {
+ return {
+ hint: __experimentalHint,
...rest
- } = _ref2;
- // Sets a11y status message on changes in state.
- (0,external_React_.useEffect)(() => {
- if (isInitialMount || false) {
- return;
- }
-
- updateA11yStatus(() => getA11yMessage({
- highlightedIndex,
- highlightedItem: items[highlightedIndex],
- resultCount: items.length,
- ...rest
- }), environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
- }, dependencyArray);
-}
-
-function useScrollIntoView(_ref3) {
- let {
- highlightedIndex,
- isOpen,
- itemRefs,
- getItemNodeFromIndex,
- menuElement,
- scrollIntoView: scrollIntoViewProp
- } = _ref3;
- // used not to scroll on highlight by mouse.
- const shouldScrollRef = (0,external_React_.useRef)(true); // Scroll on highlighted item if change comes from keyboard.
-
- downshift_esm_useIsomorphicLayoutEffect(() => {
- if (highlightedIndex < 0 || !isOpen || !Object.keys(itemRefs.current).length) {
- return;
- }
-
- if (shouldScrollRef.current === false) {
- shouldScrollRef.current = true;
- } else {
- scrollIntoViewProp(getItemNodeFromIndex(highlightedIndex), menuElement);
- } // eslint-disable-next-line react-hooks/exhaustive-deps
-
- }, [highlightedIndex]);
- return shouldScrollRef;
-} // eslint-disable-next-line import/no-mutable-exports
-
-
-let useControlPropsValidator = downshift_esm_noop;
-/* istanbul ignore next */
-
-if (false) {}
-
-/* eslint-disable complexity */
-
-function downshiftCommonReducer(state, action, stateChangeTypes) {
- const {
- type,
- props
- } = action;
- let changes;
-
- switch (type) {
- case stateChangeTypes.ItemMouseMove:
- changes = {
- highlightedIndex: action.disabled ? -1 : action.index
- };
- break;
-
- case stateChangeTypes.MenuMouseLeave:
- changes = {
- highlightedIndex: -1
- };
- break;
-
- case stateChangeTypes.ToggleButtonClick:
- case stateChangeTypes.FunctionToggleMenu:
- changes = {
- isOpen: !state.isOpen,
- highlightedIndex: state.isOpen ? -1 : getHighlightedIndexOnOpen(props, state, 0)
- };
- break;
-
- case stateChangeTypes.FunctionOpenMenu:
- changes = {
- isOpen: true,
- highlightedIndex: getHighlightedIndexOnOpen(props, state, 0)
- };
- break;
-
- case stateChangeTypes.FunctionCloseMenu:
- changes = {
- isOpen: false
- };
- break;
-
- case stateChangeTypes.FunctionSetHighlightedIndex:
- changes = {
- highlightedIndex: action.highlightedIndex
- };
- break;
-
- case stateChangeTypes.FunctionSetInputValue:
- changes = {
- inputValue: action.inputValue
- };
- break;
-
- case stateChangeTypes.FunctionReset:
- changes = {
- highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
- isOpen: getDefaultValue$1(props, 'isOpen'),
- selectedItem: getDefaultValue$1(props, 'selectedItem'),
- inputValue: getDefaultValue$1(props, 'inputValue')
+ };
+}
+function getDescribedBy(currentValue, describedBy) {
+ if (describedBy) {
+ return describedBy;
+ }
+
+ // translators: %s: The selected option.
+ return (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Currently selected: %s'), currentValue);
+}
+function CustomSelectControl(props) {
+ const {
+ __next40pxDefaultSize = false,
+ __shouldNotWarnDeprecated36pxSize,
+ describedBy,
+ options,
+ onChange,
+ size = 'default',
+ value,
+ className: classNameProp,
+ showSelectedHint = false,
+ ...restProps
+ } = custom_select_control_useDeprecatedProps(props);
+ maybeWarnDeprecated36pxSize({
+ componentName: 'CustomSelectControl',
+ __next40pxDefaultSize,
+ size,
+ __shouldNotWarnDeprecated36pxSize
+ });
+ const descriptionId = (0,external_wp_compose_namespaceObject.useInstanceId)(CustomSelectControl, 'custom-select-control__description');
+
+ // Forward props + store from v2 implementation
+ const store = useSelectStore({
+ async setValue(nextValue) {
+ const nextOption = options.find(item => item.name === nextValue);
+ if (!onChange || !nextOption) {
+ return;
+ }
+
+ // Executes the logic in a microtask after the popup is closed.
+ // This is simply to ensure the isOpen state matches the one from the
+ // previous legacy implementation.
+ await Promise.resolve();
+ const state = store.getState();
+ const changeObject = {
+ highlightedIndex: state.renderedItems.findIndex(item => item.value === nextValue),
+ inputValue: '',
+ isOpen: state.open,
+ selectedItem: nextOption,
+ type: ''
};
- break;
-
- default:
- throw new Error('Reducer called without proper action type.');
- }
-
- return { ...state,
- ...changes
- };
-}
-/* eslint-enable complexity */
-
-function getItemIndexByCharacterKey(_a) {
- var keysSoFar = _a.keysSoFar, highlightedIndex = _a.highlightedIndex, items = _a.items, itemToString = _a.itemToString, getItemNodeFromIndex = _a.getItemNodeFromIndex;
- var lowerCasedKeysSoFar = keysSoFar.toLowerCase();
- for (var index = 0; index < items.length; index++) {
- var offsetIndex = (index + highlightedIndex + 1) % items.length;
- var item = items[offsetIndex];
- if (item !== undefined &&
- itemToString(item)
- .toLowerCase()
- .startsWith(lowerCasedKeysSoFar)) {
- var element = getItemNodeFromIndex(offsetIndex);
- if (!(element === null || element === void 0 ? void 0 : element.hasAttribute('disabled'))) {
- return offsetIndex;
- }
- }
- }
- return highlightedIndex;
-}
-var propTypes$2 = {
- items: (prop_types_default()).array.isRequired,
- itemToString: (prop_types_default()).func,
- getA11yStatusMessage: (prop_types_default()).func,
- getA11ySelectionMessage: (prop_types_default()).func,
- circularNavigation: (prop_types_default()).bool,
- highlightedIndex: (prop_types_default()).number,
- defaultHighlightedIndex: (prop_types_default()).number,
- initialHighlightedIndex: (prop_types_default()).number,
- isOpen: (prop_types_default()).bool,
- defaultIsOpen: (prop_types_default()).bool,
- initialIsOpen: (prop_types_default()).bool,
- selectedItem: (prop_types_default()).any,
- initialSelectedItem: (prop_types_default()).any,
- defaultSelectedItem: (prop_types_default()).any,
- id: (prop_types_default()).string,
- labelId: (prop_types_default()).string,
- menuId: (prop_types_default()).string,
- getItemId: (prop_types_default()).func,
- toggleButtonId: (prop_types_default()).string,
- stateReducer: (prop_types_default()).func,
- onSelectedItemChange: (prop_types_default()).func,
- onHighlightedIndexChange: (prop_types_default()).func,
- onStateChange: (prop_types_default()).func,
- onIsOpenChange: (prop_types_default()).func,
- environment: prop_types_default().shape({
- addEventListener: (prop_types_default()).func,
- removeEventListener: (prop_types_default()).func,
- document: prop_types_default().shape({
- getElementById: (prop_types_default()).func,
- activeElement: (prop_types_default()).any,
- body: (prop_types_default()).any
- })
- })
-};
-/**
- * Default implementation for status message. Only added when menu is open.
- * Will specift if there are results in the list, and if so, how many,
- * and what keys are relevant.
- *
- * @param {Object} param the downshift state and other relevant properties
- * @return {String} the a11y status message
- */
-function getA11yStatusMessage(_a) {
- var isOpen = _a.isOpen, resultCount = _a.resultCount, previousResultCount = _a.previousResultCount;
- if (!isOpen) {
- return '';
- }
- if (!resultCount) {
- return 'No results are available.';
- }
- if (resultCount !== previousResultCount) {
- return "".concat(resultCount, " result").concat(resultCount === 1 ? ' is' : 's are', " available, use up and down arrow keys to navigate. Press Enter or Space Bar keys to select.");
- }
- return '';
-}
-var defaultProps$2 = __assign(__assign({}, defaultProps$3), { getA11yStatusMessage: getA11yStatusMessage });
-// eslint-disable-next-line import/no-mutable-exports
-var validatePropTypes$2 = downshift_esm_noop;
-/* istanbul ignore next */
-if (false) {}
-
-const MenuKeyDownArrowDown = false ? 0 : 0;
-const MenuKeyDownArrowUp = false ? 0 : 1;
-const MenuKeyDownEscape = false ? 0 : 2;
-const MenuKeyDownHome = false ? 0 : 3;
-const MenuKeyDownEnd = false ? 0 : 4;
-const MenuKeyDownEnter = false ? 0 : 5;
-const MenuKeyDownSpaceButton = false ? 0 : 6;
-const MenuKeyDownCharacter = false ? 0 : 7;
-const MenuBlur = false ? 0 : 8;
-const MenuMouseLeave$1 = false ? 0 : 9;
-const ItemMouseMove$1 = false ? 0 : 10;
-const ItemClick$1 = false ? 0 : 11;
-const ToggleButtonClick$1 = false ? 0 : 12;
-const ToggleButtonKeyDownArrowDown = false ? 0 : 13;
-const ToggleButtonKeyDownArrowUp = false ? 0 : 14;
-const ToggleButtonKeyDownCharacter = false ? 0 : 15;
-const FunctionToggleMenu$1 = false ? 0 : 16;
-const FunctionOpenMenu$1 = false ? 0 : 17;
-const FunctionCloseMenu$1 = false ? 0 : 18;
-const FunctionSetHighlightedIndex$1 = false ? 0 : 19;
-const FunctionSelectItem$1 = false ? 0 : 20;
-const FunctionSetInputValue$1 = false ? 0 : 21;
-const FunctionReset$2 = false ? 0 : 22;
-
-var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
- __proto__: null,
- MenuKeyDownArrowDown: MenuKeyDownArrowDown,
- MenuKeyDownArrowUp: MenuKeyDownArrowUp,
- MenuKeyDownEscape: MenuKeyDownEscape,
- MenuKeyDownHome: MenuKeyDownHome,
- MenuKeyDownEnd: MenuKeyDownEnd,
- MenuKeyDownEnter: MenuKeyDownEnter,
- MenuKeyDownSpaceButton: MenuKeyDownSpaceButton,
- MenuKeyDownCharacter: MenuKeyDownCharacter,
- MenuBlur: MenuBlur,
- MenuMouseLeave: MenuMouseLeave$1,
- ItemMouseMove: ItemMouseMove$1,
- ItemClick: ItemClick$1,
- ToggleButtonClick: ToggleButtonClick$1,
- ToggleButtonKeyDownArrowDown: ToggleButtonKeyDownArrowDown,
- ToggleButtonKeyDownArrowUp: ToggleButtonKeyDownArrowUp,
- ToggleButtonKeyDownCharacter: ToggleButtonKeyDownCharacter,
- FunctionToggleMenu: FunctionToggleMenu$1,
- FunctionOpenMenu: FunctionOpenMenu$1,
- FunctionCloseMenu: FunctionCloseMenu$1,
- FunctionSetHighlightedIndex: FunctionSetHighlightedIndex$1,
- FunctionSelectItem: FunctionSelectItem$1,
- FunctionSetInputValue: FunctionSetInputValue$1,
- FunctionReset: FunctionReset$2
-});
-
-/* eslint-disable complexity */
-
-function downshiftSelectReducer(state, action) {
- const {
- type,
- props,
- shiftKey
- } = action;
- let changes;
-
- switch (type) {
- case ItemClick$1:
- changes = {
- isOpen: getDefaultValue$1(props, 'isOpen'),
- highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
- selectedItem: props.items[action.index]
- };
- break;
-
- case ToggleButtonKeyDownCharacter:
- {
- const lowercasedKey = action.key;
- const inputValue = `${state.inputValue}${lowercasedKey}`;
- const itemIndex = getItemIndexByCharacterKey({
- keysSoFar: inputValue,
- highlightedIndex: state.selectedItem ? props.items.indexOf(state.selectedItem) : -1,
- items: props.items,
- itemToString: props.itemToString,
- getItemNodeFromIndex: action.getItemNodeFromIndex
- });
- changes = {
- inputValue,
- ...(itemIndex >= 0 && {
- selectedItem: props.items[itemIndex]
- })
- };
- }
- break;
-
- case ToggleButtonKeyDownArrowDown:
- changes = {
- highlightedIndex: getHighlightedIndexOnOpen(props, state, 1, action.getItemNodeFromIndex),
- isOpen: true
- };
- break;
-
- case ToggleButtonKeyDownArrowUp:
- changes = {
- highlightedIndex: getHighlightedIndexOnOpen(props, state, -1, action.getItemNodeFromIndex),
- isOpen: true
- };
- break;
-
- case MenuKeyDownEnter:
- case MenuKeyDownSpaceButton:
- changes = {
- isOpen: getDefaultValue$1(props, 'isOpen'),
- highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
- ...(state.highlightedIndex >= 0 && {
- selectedItem: props.items[state.highlightedIndex]
- })
- };
- break;
-
- case MenuKeyDownHome:
- changes = {
- highlightedIndex: getNextNonDisabledIndex(1, 0, props.items.length, action.getItemNodeFromIndex, false)
- };
- break;
-
- case MenuKeyDownEnd:
- changes = {
- highlightedIndex: getNextNonDisabledIndex(-1, props.items.length - 1, props.items.length, action.getItemNodeFromIndex, false)
- };
- break;
-
- case MenuKeyDownEscape:
- changes = {
- isOpen: false,
- highlightedIndex: -1
- };
- break;
-
- case MenuBlur:
- changes = {
- isOpen: false,
- highlightedIndex: -1
- };
- break;
-
- case MenuKeyDownCharacter:
- {
- const lowercasedKey = action.key;
- const inputValue = `${state.inputValue}${lowercasedKey}`;
- const highlightedIndex = getItemIndexByCharacterKey({
- keysSoFar: inputValue,
- highlightedIndex: state.highlightedIndex,
- items: props.items,
- itemToString: props.itemToString,
- getItemNodeFromIndex: action.getItemNodeFromIndex
- });
- changes = {
- inputValue,
- ...(highlightedIndex >= 0 && {
- highlightedIndex
- })
- };
- }
- break;
-
- case MenuKeyDownArrowDown:
- changes = {
- highlightedIndex: getNextWrappingIndex(shiftKey ? 5 : 1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, props.circularNavigation)
- };
- break;
-
- case MenuKeyDownArrowUp:
- changes = {
- highlightedIndex: getNextWrappingIndex(shiftKey ? -5 : -1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, props.circularNavigation)
- };
- break;
-
- case FunctionSelectItem$1:
- changes = {
- selectedItem: action.selectedItem
- };
- break;
-
- default:
- return downshiftCommonReducer(state, action, stateChangeTypes$2);
- }
-
- return { ...state,
- ...changes
- };
-}
-/* eslint-enable complexity */
-
-/* eslint-disable max-statements */
-useSelect.stateChangeTypes = stateChangeTypes$2;
-
-function useSelect(userProps) {
- if (userProps === void 0) {
- userProps = {};
- }
-
- validatePropTypes$2(userProps, useSelect); // Props defaults and destructuring.
-
- const props = { ...defaultProps$2,
- ...userProps
- };
- const {
- items,
- scrollIntoView,
- environment,
- initialIsOpen,
- defaultIsOpen,
- itemToString,
- getA11ySelectionMessage,
- getA11yStatusMessage
- } = props; // Initial state depending on controlled props.
-
- const initialState = getInitialState$2(props);
- const [state, dispatch] = useControlledReducer$1(downshiftSelectReducer, initialState, props);
- const {
- isOpen,
- highlightedIndex,
- selectedItem,
- inputValue
- } = state; // Element efs.
-
- const toggleButtonRef = (0,external_React_.useRef)(null);
- const menuRef = (0,external_React_.useRef)(null);
- const itemRefs = (0,external_React_.useRef)({}); // used not to trigger menu blur action in some scenarios.
-
- const shouldBlurRef = (0,external_React_.useRef)(true); // used to keep the inputValue clearTimeout object between renders.
-
- const clearTimeoutRef = (0,external_React_.useRef)(null); // prevent id re-generation between renders.
-
- const elementIds = useElementIds(props); // used to keep track of how many items we had on previous cycle.
-
- const previousResultCountRef = (0,external_React_.useRef)();
- const isInitialMountRef = (0,external_React_.useRef)(true); // utility callback to get item element.
-
- const latest = downshift_esm_useLatestRef({
- state,
- props
- }); // Some utils.
-
- const getItemNodeFromIndex = (0,external_React_.useCallback)(index => itemRefs.current[elementIds.getItemId(index)], [elementIds]); // Effects.
- // Sets a11y status message on changes in state.
-
- useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], {
- isInitialMount: isInitialMountRef.current,
- previousResultCount: previousResultCountRef.current,
- items,
- environment,
- itemToString,
- ...state
- }); // Sets a11y status message on changes in selectedItem.
-
- useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], {
- isInitialMount: isInitialMountRef.current,
- previousResultCount: previousResultCountRef.current,
- items,
- environment,
- itemToString,
- ...state
- }); // Scroll on highlighted item if change comes from keyboard.
-
- const shouldScrollRef = useScrollIntoView({
- menuElement: menuRef.current,
- highlightedIndex,
- isOpen,
- itemRefs,
- scrollIntoView,
- getItemNodeFromIndex
- }); // Sets cleanup for the keysSoFar callback, debounded after 500ms.
-
- (0,external_React_.useEffect)(() => {
- // init the clean function here as we need access to dispatch.
- clearTimeoutRef.current = debounce(outerDispatch => {
- outerDispatch({
- type: FunctionSetInputValue$1,
- inputValue: ''
- });
- }, 500); // Cancel any pending debounced calls on mount
-
- return () => {
- clearTimeoutRef.current.cancel();
- };
- }, []); // Invokes the keysSoFar callback set up above.
-
- (0,external_React_.useEffect)(() => {
- if (!inputValue) {
- return;
- }
-
- clearTimeoutRef.current(dispatch);
- }, [dispatch, inputValue]);
- useControlPropsValidator({
- isInitialMount: isInitialMountRef.current,
- props,
- state
- });
- /* Controls the focus on the menu or the toggle button. */
-
- (0,external_React_.useEffect)(() => {
- // Don't focus menu on first render.
- if (isInitialMountRef.current) {
- // Unless it was initialised as open.
- if ((initialIsOpen || defaultIsOpen || isOpen) && menuRef.current) {
- menuRef.current.focus();
- }
-
- return;
- } // Focus menu on open.
-
-
- if (isOpen) {
- // istanbul ignore else
- if (menuRef.current) {
- menuRef.current.focus();
- }
-
- return;
- } // Focus toggleButton on close, but not if it was closed with (Shift+)Tab.
-
-
- if (environment.document.activeElement === menuRef.current) {
- // istanbul ignore else
- if (toggleButtonRef.current) {
- shouldBlurRef.current = false;
- toggleButtonRef.current.focus();
- }
- } // eslint-disable-next-line react-hooks/exhaustive-deps
-
- }, [isOpen]);
- (0,external_React_.useEffect)(() => {
- if (isInitialMountRef.current) {
- return;
- }
-
- previousResultCountRef.current = items.length;
- }); // Add mouse/touch events to document.
-
- const mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment, () => {
- dispatch({
- type: MenuBlur
- });
- });
- const setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps'); // Make initial ref false.
-
- (0,external_React_.useEffect)(() => {
- isInitialMountRef.current = false;
- }, []); // Reset itemRefs on close.
-
- (0,external_React_.useEffect)(() => {
- if (!isOpen) {
- itemRefs.current = {};
- }
- }, [isOpen]); // Event handler functions.
-
- const toggleButtonKeyDownHandlers = (0,external_React_.useMemo)(() => ({
- ArrowDown(event) {
- event.preventDefault();
- dispatch({
- type: ToggleButtonKeyDownArrowDown,
- getItemNodeFromIndex,
- shiftKey: event.shiftKey
- });
- },
-
- ArrowUp(event) {
- event.preventDefault();
- dispatch({
- type: ToggleButtonKeyDownArrowUp,
- getItemNodeFromIndex,
- shiftKey: event.shiftKey
- });
- }
-
- }), [dispatch, getItemNodeFromIndex]);
- const menuKeyDownHandlers = (0,external_React_.useMemo)(() => ({
- ArrowDown(event) {
- event.preventDefault();
- dispatch({
- type: MenuKeyDownArrowDown,
- getItemNodeFromIndex,
- shiftKey: event.shiftKey
- });
- },
-
- ArrowUp(event) {
- event.preventDefault();
- dispatch({
- type: MenuKeyDownArrowUp,
- getItemNodeFromIndex,
- shiftKey: event.shiftKey
- });
- },
-
- Home(event) {
- event.preventDefault();
- dispatch({
- type: MenuKeyDownHome,
- getItemNodeFromIndex
- });
- },
-
- End(event) {
- event.preventDefault();
- dispatch({
- type: MenuKeyDownEnd,
- getItemNodeFromIndex
- });
- },
-
- Escape() {
- dispatch({
- type: MenuKeyDownEscape
- });
- },
-
- Enter(event) {
- event.preventDefault();
- dispatch({
- type: MenuKeyDownEnter
- });
- },
-
- ' '(event) {
- event.preventDefault();
- dispatch({
- type: MenuKeyDownSpaceButton
- });
- }
-
- }), [dispatch, getItemNodeFromIndex]); // Action functions.
-
- const toggleMenu = (0,external_React_.useCallback)(() => {
- dispatch({
- type: FunctionToggleMenu$1
- });
- }, [dispatch]);
- const closeMenu = (0,external_React_.useCallback)(() => {
- dispatch({
- type: FunctionCloseMenu$1
- });
- }, [dispatch]);
- const openMenu = (0,external_React_.useCallback)(() => {
- dispatch({
- type: FunctionOpenMenu$1
- });
- }, [dispatch]);
- const setHighlightedIndex = (0,external_React_.useCallback)(newHighlightedIndex => {
- dispatch({
- type: FunctionSetHighlightedIndex$1,
- highlightedIndex: newHighlightedIndex
- });
- }, [dispatch]);
- const selectItem = (0,external_React_.useCallback)(newSelectedItem => {
- dispatch({
- type: FunctionSelectItem$1,
- selectedItem: newSelectedItem
- });
- }, [dispatch]);
- const reset = (0,external_React_.useCallback)(() => {
- dispatch({
- type: FunctionReset$2
- });
- }, [dispatch]);
- const setInputValue = (0,external_React_.useCallback)(newInputValue => {
- dispatch({
- type: FunctionSetInputValue$1,
- inputValue: newInputValue
- });
- }, [dispatch]); // Getter functions.
-
- const getLabelProps = (0,external_React_.useCallback)(labelProps => ({
- id: elementIds.labelId,
- htmlFor: elementIds.toggleButtonId,
- ...labelProps
- }), [elementIds]);
- const getMenuProps = (0,external_React_.useCallback)(function (_temp, _temp2) {
- let {
- onMouseLeave,
- refKey = 'ref',
- onKeyDown,
- onBlur,
- ref,
- ...rest
- } = _temp === void 0 ? {} : _temp;
- let {
- suppressRefError = false
- } = _temp2 === void 0 ? {} : _temp2;
- const latestState = latest.current.state;
-
- const menuHandleKeyDown = event => {
- const key = normalizeArrowKey(event);
-
- if (key && menuKeyDownHandlers[key]) {
- menuKeyDownHandlers[key](event);
- } else if (isAcceptedCharacterKey(key)) {
- dispatch({
- type: MenuKeyDownCharacter,
- key,
- getItemNodeFromIndex
- });
- }
- };
-
- const menuHandleBlur = () => {
- // if the blur was a result of selection, we don't trigger this action.
- if (shouldBlurRef.current === false) {
- shouldBlurRef.current = true;
- return;
- }
-
- const shouldBlur = !mouseAndTouchTrackersRef.current.isMouseDown;
- /* istanbul ignore else */
-
- if (shouldBlur) {
- dispatch({
- type: MenuBlur
- });
- }
- };
-
- const menuHandleMouseLeave = () => {
- dispatch({
- type: MenuMouseLeave$1
- });
- };
-
- setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
- return {
- [refKey]: handleRefs(ref, menuNode => {
- menuRef.current = menuNode;
- }),
- id: elementIds.menuId,
- role: 'listbox',
- 'aria-labelledby': elementIds.labelId,
- tabIndex: -1,
- ...(latestState.isOpen && latestState.highlightedIndex > -1 && {
- 'aria-activedescendant': elementIds.getItemId(latestState.highlightedIndex)
- }),
- onMouseLeave: callAllEventHandlers(onMouseLeave, menuHandleMouseLeave),
- onKeyDown: callAllEventHandlers(onKeyDown, menuHandleKeyDown),
- onBlur: callAllEventHandlers(onBlur, menuHandleBlur),
- ...rest
- };
- }, [dispatch, latest, menuKeyDownHandlers, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds, getItemNodeFromIndex]);
- const getToggleButtonProps = (0,external_React_.useCallback)(function (_temp3, _temp4) {
- let {
- onClick,
- onKeyDown,
- refKey = 'ref',
- ref,
- ...rest
- } = _temp3 === void 0 ? {} : _temp3;
- let {
- suppressRefError = false
- } = _temp4 === void 0 ? {} : _temp4;
-
- const toggleButtonHandleClick = () => {
- dispatch({
- type: ToggleButtonClick$1
- });
- };
-
- const toggleButtonHandleKeyDown = event => {
- const key = normalizeArrowKey(event);
-
- if (key && toggleButtonKeyDownHandlers[key]) {
- toggleButtonKeyDownHandlers[key](event);
- } else if (isAcceptedCharacterKey(key)) {
- dispatch({
- type: ToggleButtonKeyDownCharacter,
- key,
- getItemNodeFromIndex
- });
- }
- };
-
- const toggleProps = {
- [refKey]: handleRefs(ref, toggleButtonNode => {
- toggleButtonRef.current = toggleButtonNode;
- }),
- id: elementIds.toggleButtonId,
- 'aria-haspopup': 'listbox',
- 'aria-expanded': latest.current.state.isOpen,
- 'aria-labelledby': `${elementIds.labelId} ${elementIds.toggleButtonId}`,
- ...rest
- };
-
- if (!rest.disabled) {
- toggleProps.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick);
- toggleProps.onKeyDown = callAllEventHandlers(onKeyDown, toggleButtonHandleKeyDown);
- }
-
- setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
- return toggleProps;
- }, [dispatch, latest, toggleButtonKeyDownHandlers, setGetterPropCallInfo, elementIds, getItemNodeFromIndex]);
- const getItemProps = (0,external_React_.useCallback)(function (_temp5) {
- let {
- item,
- index,
- onMouseMove,
- onClick,
- refKey = 'ref',
- ref,
- disabled,
- ...rest
- } = _temp5 === void 0 ? {} : _temp5;
- const {
- state: latestState,
- props: latestProps
- } = latest.current;
-
- const itemHandleMouseMove = () => {
- if (index === latestState.highlightedIndex) {
- return;
- }
-
- shouldScrollRef.current = false;
- dispatch({
- type: ItemMouseMove$1,
- index,
- disabled
- });
- };
-
- const itemHandleClick = () => {
- dispatch({
- type: ItemClick$1,
- index
- });
- };
-
- const itemIndex = getItemIndex(index, item, latestProps.items);
-
- if (itemIndex < 0) {
- throw new Error('Pass either item or item index in getItemProps!');
- }
-
- const itemProps = {
- disabled,
- role: 'option',
- 'aria-selected': `${itemIndex === latestState.highlightedIndex}`,
- id: elementIds.getItemId(itemIndex),
- [refKey]: handleRefs(ref, itemNode => {
- if (itemNode) {
- itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
- }
- }),
- ...rest
- };
-
- if (!disabled) {
- itemProps.onClick = callAllEventHandlers(onClick, itemHandleClick);
- }
-
- itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
- return itemProps;
- }, [dispatch, latest, shouldScrollRef, elementIds]);
- return {
- // prop getters.
- getToggleButtonProps,
- getLabelProps,
- getMenuProps,
- getItemProps,
- // actions.
- toggleMenu,
- openMenu,
- closeMenu,
- setHighlightedIndex,
- selectItem,
- reset,
- setInputValue,
- // state.
- highlightedIndex,
- isOpen,
- selectedItem,
- inputValue
- };
-}
-
-const InputKeyDownArrowDown = false ? 0 : 0;
-const InputKeyDownArrowUp = false ? 0 : 1;
-const InputKeyDownEscape = false ? 0 : 2;
-const InputKeyDownHome = false ? 0 : 3;
-const InputKeyDownEnd = false ? 0 : 4;
-const InputKeyDownEnter = false ? 0 : 5;
-const InputChange = false ? 0 : 6;
-const InputBlur = false ? 0 : 7;
-const MenuMouseLeave = false ? 0 : 8;
-const ItemMouseMove = false ? 0 : 9;
-const ItemClick = false ? 0 : 10;
-const ToggleButtonClick = false ? 0 : 11;
-const FunctionToggleMenu = false ? 0 : 12;
-const FunctionOpenMenu = false ? 0 : 13;
-const FunctionCloseMenu = false ? 0 : 14;
-const FunctionSetHighlightedIndex = false ? 0 : 15;
-const FunctionSelectItem = false ? 0 : 16;
-const FunctionSetInputValue = false ? 0 : 17;
-const FunctionReset$1 = false ? 0 : 18;
-const ControlledPropUpdatedSelectedItem = false ? 0 : 19;
-
-var stateChangeTypes$1 = /*#__PURE__*/Object.freeze({
- __proto__: null,
- InputKeyDownArrowDown: InputKeyDownArrowDown,
- InputKeyDownArrowUp: InputKeyDownArrowUp,
- InputKeyDownEscape: InputKeyDownEscape,
- InputKeyDownHome: InputKeyDownHome,
- InputKeyDownEnd: InputKeyDownEnd,
- InputKeyDownEnter: InputKeyDownEnter,
- InputChange: InputChange,
- InputBlur: InputBlur,
- MenuMouseLeave: MenuMouseLeave,
- ItemMouseMove: ItemMouseMove,
- ItemClick: ItemClick,
- ToggleButtonClick: ToggleButtonClick,
- FunctionToggleMenu: FunctionToggleMenu,
- FunctionOpenMenu: FunctionOpenMenu,
- FunctionCloseMenu: FunctionCloseMenu,
- FunctionSetHighlightedIndex: FunctionSetHighlightedIndex,
- FunctionSelectItem: FunctionSelectItem,
- FunctionSetInputValue: FunctionSetInputValue,
- FunctionReset: FunctionReset$1,
- ControlledPropUpdatedSelectedItem: ControlledPropUpdatedSelectedItem
-});
-
-function getInitialState$1(props) {
- const initialState = getInitialState$2(props);
- const {
- selectedItem
- } = initialState;
- let {
- inputValue
- } = initialState;
-
- if (inputValue === '' && selectedItem && props.defaultInputValue === undefined && props.initialInputValue === undefined && props.inputValue === undefined) {
- inputValue = props.itemToString(selectedItem);
- }
-
- return { ...initialState,
- inputValue
- };
-}
-
-const propTypes$1 = {
- items: (prop_types_default()).array.isRequired,
- itemToString: (prop_types_default()).func,
- getA11yStatusMessage: (prop_types_default()).func,
- getA11ySelectionMessage: (prop_types_default()).func,
- circularNavigation: (prop_types_default()).bool,
- highlightedIndex: (prop_types_default()).number,
- defaultHighlightedIndex: (prop_types_default()).number,
- initialHighlightedIndex: (prop_types_default()).number,
- isOpen: (prop_types_default()).bool,
- defaultIsOpen: (prop_types_default()).bool,
- initialIsOpen: (prop_types_default()).bool,
- selectedItem: (prop_types_default()).any,
- initialSelectedItem: (prop_types_default()).any,
- defaultSelectedItem: (prop_types_default()).any,
- inputValue: (prop_types_default()).string,
- defaultInputValue: (prop_types_default()).string,
- initialInputValue: (prop_types_default()).string,
- id: (prop_types_default()).string,
- labelId: (prop_types_default()).string,
- menuId: (prop_types_default()).string,
- getItemId: (prop_types_default()).func,
- inputId: (prop_types_default()).string,
- toggleButtonId: (prop_types_default()).string,
- stateReducer: (prop_types_default()).func,
- onSelectedItemChange: (prop_types_default()).func,
- onHighlightedIndexChange: (prop_types_default()).func,
- onStateChange: (prop_types_default()).func,
- onIsOpenChange: (prop_types_default()).func,
- onInputValueChange: (prop_types_default()).func,
- environment: prop_types_default().shape({
- addEventListener: (prop_types_default()).func,
- removeEventListener: (prop_types_default()).func,
- document: prop_types_default().shape({
- getElementById: (prop_types_default()).func,
- activeElement: (prop_types_default()).any,
- body: (prop_types_default()).any
- })
- })
-};
-/**
- * The useCombobox version of useControlledReducer, which also
- * checks if the controlled prop selectedItem changed between
- * renders. If so, it will also update inputValue with its
- * string equivalent. It uses the common useEnhancedReducer to
- * compute the rest of the state.
- *
- * @param {Function} reducer Reducer function from downshift.
- * @param {Object} initialState Initial state of the hook.
- * @param {Object} props The hook props.
- * @returns {Array} An array with the state and an action dispatcher.
- */
-
-function useControlledReducer(reducer, initialState, props) {
- const previousSelectedItemRef = (0,external_React_.useRef)();
- const [state, dispatch] = useEnhancedReducer(reducer, initialState, props); // ToDo: if needed, make same approach as selectedItemChanged from Downshift.
-
- (0,external_React_.useEffect)(() => {
- if (isControlledProp(props, 'selectedItem')) {
- if (previousSelectedItemRef.current !== props.selectedItem) {
- dispatch({
- type: ControlledPropUpdatedSelectedItem,
- inputValue: props.itemToString(props.selectedItem)
- });
- }
-
- previousSelectedItemRef.current = state.selectedItem === previousSelectedItemRef.current ? props.selectedItem : state.selectedItem;
- }
- });
- return [getState(state, props), dispatch];
-} // eslint-disable-next-line import/no-mutable-exports
-
-
-let validatePropTypes$1 = downshift_esm_noop;
-/* istanbul ignore next */
-
-if (false) {}
-
-const defaultProps$1 = { ...defaultProps$3,
- getA11yStatusMessage: getA11yStatusMessage$1,
- circularNavigation: true
-};
-
-/* eslint-disable complexity */
-
-function downshiftUseComboboxReducer(state, action) {
- const {
- type,
- props,
- shiftKey
- } = action;
- let changes;
-
- switch (type) {
- case ItemClick:
- changes = {
- isOpen: getDefaultValue$1(props, 'isOpen'),
- highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
- selectedItem: props.items[action.index],
- inputValue: props.itemToString(props.items[action.index])
- };
- break;
-
- case InputKeyDownArrowDown:
- if (state.isOpen) {
- changes = {
- highlightedIndex: getNextWrappingIndex(shiftKey ? 5 : 1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, props.circularNavigation)
- };
- } else {
- changes = {
- highlightedIndex: getHighlightedIndexOnOpen(props, state, 1, action.getItemNodeFromIndex),
- isOpen: props.items.length >= 0
- };
- }
-
- break;
-
- case InputKeyDownArrowUp:
- if (state.isOpen) {
- changes = {
- highlightedIndex: getNextWrappingIndex(shiftKey ? -5 : -1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, props.circularNavigation)
- };
- } else {
- changes = {
- highlightedIndex: getHighlightedIndexOnOpen(props, state, -1, action.getItemNodeFromIndex),
- isOpen: props.items.length >= 0
- };
- }
-
- break;
-
- case InputKeyDownEnter:
- changes = { ...(state.isOpen && state.highlightedIndex >= 0 && {
- selectedItem: props.items[state.highlightedIndex],
- isOpen: getDefaultValue$1(props, 'isOpen'),
- highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
- inputValue: props.itemToString(props.items[state.highlightedIndex])
- })
- };
- break;
-
- case InputKeyDownEscape:
- changes = {
- isOpen: false,
- highlightedIndex: -1,
- ...(!state.isOpen && {
- selectedItem: null,
- inputValue: ''
- })
- };
- break;
-
- case InputKeyDownHome:
- changes = {
- highlightedIndex: getNextNonDisabledIndex(1, 0, props.items.length, action.getItemNodeFromIndex, false)
- };
- break;
-
- case InputKeyDownEnd:
- changes = {
- highlightedIndex: getNextNonDisabledIndex(-1, props.items.length - 1, props.items.length, action.getItemNodeFromIndex, false)
- };
- break;
-
- case InputBlur:
- changes = {
- isOpen: false,
- highlightedIndex: -1,
- ...(state.highlightedIndex >= 0 && action.selectItem && {
- selectedItem: props.items[state.highlightedIndex],
- inputValue: props.itemToString(props.items[state.highlightedIndex])
- })
- };
- break;
-
- case InputChange:
- changes = {
- isOpen: true,
- highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
- inputValue: action.inputValue
- };
- break;
-
- case FunctionSelectItem:
- changes = {
- selectedItem: action.selectedItem,
- inputValue: props.itemToString(action.selectedItem)
- };
- break;
-
- case ControlledPropUpdatedSelectedItem:
- changes = {
- inputValue: action.inputValue
- };
- break;
-
- default:
- return downshiftCommonReducer(state, action, stateChangeTypes$1);
- }
-
- return { ...state,
- ...changes
- };
-}
-/* eslint-enable complexity */
-
-/* eslint-disable max-statements */
-useCombobox.stateChangeTypes = stateChangeTypes$1;
-
-function useCombobox(userProps) {
- if (userProps === void 0) {
- userProps = {};
- }
-
- validatePropTypes$1(userProps, useCombobox); // Props defaults and destructuring.
-
- const props = { ...defaultProps$1,
- ...userProps
- };
- const {
- initialIsOpen,
- defaultIsOpen,
- items,
- scrollIntoView,
- environment,
- getA11yStatusMessage,
- getA11ySelectionMessage,
- itemToString
- } = props; // Initial state depending on controlled props.
-
- const initialState = getInitialState$1(props);
- const [state, dispatch] = useControlledReducer(downshiftUseComboboxReducer, initialState, props);
- const {
- isOpen,
- highlightedIndex,
- selectedItem,
- inputValue
- } = state; // Element refs.
-
- const menuRef = (0,external_React_.useRef)(null);
- const itemRefs = (0,external_React_.useRef)({});
- const inputRef = (0,external_React_.useRef)(null);
- const toggleButtonRef = (0,external_React_.useRef)(null);
- const comboboxRef = (0,external_React_.useRef)(null);
- const isInitialMountRef = (0,external_React_.useRef)(true); // prevent id re-generation between renders.
-
- const elementIds = useElementIds(props); // used to keep track of how many items we had on previous cycle.
-
- const previousResultCountRef = (0,external_React_.useRef)(); // utility callback to get item element.
-
- const latest = downshift_esm_useLatestRef({
- state,
- props
- });
- const getItemNodeFromIndex = (0,external_React_.useCallback)(index => itemRefs.current[elementIds.getItemId(index)], [elementIds]); // Effects.
- // Sets a11y status message on changes in state.
-
- useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], {
- isInitialMount: isInitialMountRef.current,
- previousResultCount: previousResultCountRef.current,
- items,
- environment,
- itemToString,
- ...state
- }); // Sets a11y status message on changes in selectedItem.
-
- useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], {
- isInitialMount: isInitialMountRef.current,
- previousResultCount: previousResultCountRef.current,
- items,
- environment,
- itemToString,
- ...state
- }); // Scroll on highlighted item if change comes from keyboard.
-
- const shouldScrollRef = useScrollIntoView({
- menuElement: menuRef.current,
- highlightedIndex,
- isOpen,
- itemRefs,
- scrollIntoView,
- getItemNodeFromIndex
- });
- useControlPropsValidator({
- isInitialMount: isInitialMountRef.current,
- props,
- state
- }); // Focus the input on first render if required.
-
- (0,external_React_.useEffect)(() => {
- const focusOnOpen = initialIsOpen || defaultIsOpen || isOpen;
-
- if (focusOnOpen && inputRef.current) {
- inputRef.current.focus();
- } // eslint-disable-next-line react-hooks/exhaustive-deps
-
- }, []);
- (0,external_React_.useEffect)(() => {
- if (isInitialMountRef.current) {
- return;
- }
-
- previousResultCountRef.current = items.length;
- }); // Add mouse/touch events to document.
-
- const mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [comboboxRef, menuRef, toggleButtonRef], environment, () => {
- dispatch({
- type: InputBlur,
- selectItem: false
- });
- });
- const setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getComboboxProps', 'getMenuProps'); // Make initial ref false.
-
- (0,external_React_.useEffect)(() => {
- isInitialMountRef.current = false;
- }, []); // Reset itemRefs on close.
-
- (0,external_React_.useEffect)(() => {
- if (!isOpen) {
- itemRefs.current = {};
- }
- }, [isOpen]);
- /* Event handler functions */
-
- const inputKeyDownHandlers = (0,external_React_.useMemo)(() => ({
- ArrowDown(event) {
- event.preventDefault();
- dispatch({
- type: InputKeyDownArrowDown,
- shiftKey: event.shiftKey,
- getItemNodeFromIndex
- });
- },
-
- ArrowUp(event) {
- event.preventDefault();
- dispatch({
- type: InputKeyDownArrowUp,
- shiftKey: event.shiftKey,
- getItemNodeFromIndex
- });
- },
-
- Home(event) {
- if (!latest.current.state.isOpen) {
- return;
- }
-
- event.preventDefault();
- dispatch({
- type: InputKeyDownHome,
- getItemNodeFromIndex
- });
- },
-
- End(event) {
- if (!latest.current.state.isOpen) {
- return;
- }
-
- event.preventDefault();
- dispatch({
- type: InputKeyDownEnd,
- getItemNodeFromIndex
- });
- },
-
- Escape(event) {
- const latestState = latest.current.state;
-
- if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) {
- event.preventDefault();
- dispatch({
- type: InputKeyDownEscape
- });
- }
- },
-
- Enter(event) {
- const latestState = latest.current.state; // if closed or no highlighted index, do nothing.
-
- if (!latestState.isOpen || latestState.highlightedIndex < 0 || event.which === 229 // if IME composing, wait for next Enter keydown event.
- ) {
- return;
- }
-
- event.preventDefault();
- dispatch({
- type: InputKeyDownEnter,
- getItemNodeFromIndex
- });
- }
-
- }), [dispatch, latest, getItemNodeFromIndex]); // Getter props.
-
- const getLabelProps = (0,external_React_.useCallback)(labelProps => ({
- id: elementIds.labelId,
- htmlFor: elementIds.inputId,
- ...labelProps
- }), [elementIds]);
- const getMenuProps = (0,external_React_.useCallback)(function (_temp, _temp2) {
- let {
- onMouseLeave,
- refKey = 'ref',
- ref,
- ...rest
- } = _temp === void 0 ? {} : _temp;
- let {
- suppressRefError = false
- } = _temp2 === void 0 ? {} : _temp2;
- setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
- return {
- [refKey]: handleRefs(ref, menuNode => {
- menuRef.current = menuNode;
- }),
- id: elementIds.menuId,
- role: 'listbox',
- 'aria-labelledby': elementIds.labelId,
- onMouseLeave: callAllEventHandlers(onMouseLeave, () => {
- dispatch({
- type: MenuMouseLeave
- });
- }),
- ...rest
- };
- }, [dispatch, setGetterPropCallInfo, elementIds]);
- const getItemProps = (0,external_React_.useCallback)(function (_temp3) {
- let {
- item,
- index,
- refKey = 'ref',
- ref,
- onMouseMove,
- onMouseDown,
- onClick,
- onPress,
- disabled,
- ...rest
- } = _temp3 === void 0 ? {} : _temp3;
- const {
- props: latestProps,
- state: latestState
- } = latest.current;
- const itemIndex = getItemIndex(index, item, latestProps.items);
-
- if (itemIndex < 0) {
- throw new Error('Pass either item or item index in getItemProps!');
- }
-
- const onSelectKey = 'onClick';
- const customClickHandler = onClick;
-
- const itemHandleMouseMove = () => {
- if (index === latestState.highlightedIndex) {
- return;
- }
-
- shouldScrollRef.current = false;
- dispatch({
- type: ItemMouseMove,
- index,
- disabled
- });
- };
-
- const itemHandleClick = () => {
- dispatch({
- type: ItemClick,
- index
- });
- };
-
- const itemHandleMouseDown = e => e.preventDefault();
-
- return {
- [refKey]: handleRefs(ref, itemNode => {
- if (itemNode) {
- itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
- }
- }),
- disabled,
- role: 'option',
- 'aria-selected': `${itemIndex === latestState.highlightedIndex}`,
- id: elementIds.getItemId(itemIndex),
- ...(!disabled && {
- [onSelectKey]: callAllEventHandlers(customClickHandler, itemHandleClick)
- }),
- onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
- onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown),
- ...rest
- };
- }, [dispatch, latest, shouldScrollRef, elementIds]);
- const getToggleButtonProps = (0,external_React_.useCallback)(function (_temp4) {
- let {
- onClick,
- onPress,
- refKey = 'ref',
- ref,
- ...rest
- } = _temp4 === void 0 ? {} : _temp4;
-
- const toggleButtonHandleClick = () => {
- dispatch({
- type: ToggleButtonClick
- });
-
- if (!latest.current.state.isOpen && inputRef.current) {
- inputRef.current.focus();
- }
- };
-
- return {
- [refKey]: handleRefs(ref, toggleButtonNode => {
- toggleButtonRef.current = toggleButtonNode;
- }),
- id: elementIds.toggleButtonId,
- tabIndex: -1,
- ...(!rest.disabled && { ...({
- onClick: callAllEventHandlers(onClick, toggleButtonHandleClick)
- })
- }),
- ...rest
- };
- }, [dispatch, latest, elementIds]);
- const getInputProps = (0,external_React_.useCallback)(function (_temp5, _temp6) {
- let {
- onKeyDown,
- onChange,
- onInput,
- onBlur,
- onChangeText,
- refKey = 'ref',
- ref,
- ...rest
- } = _temp5 === void 0 ? {} : _temp5;
- let {
- suppressRefError = false
- } = _temp6 === void 0 ? {} : _temp6;
- setGetterPropCallInfo('getInputProps', suppressRefError, refKey, inputRef);
- const latestState = latest.current.state;
-
- const inputHandleKeyDown = event => {
- const key = normalizeArrowKey(event);
-
- if (key && inputKeyDownHandlers[key]) {
- inputKeyDownHandlers[key](event);
- }
- };
-
- const inputHandleChange = event => {
- dispatch({
- type: InputChange,
- inputValue: event.target.value
- });
- };
-
- const inputHandleBlur = () => {
- /* istanbul ignore else */
- if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
- dispatch({
- type: InputBlur,
- selectItem: true
- });
- }
- };
- /* istanbul ignore next (preact) */
-
-
- const onChangeKey = 'onChange';
- let eventHandlers = {};
-
- if (!rest.disabled) {
- eventHandlers = {
- [onChangeKey]: callAllEventHandlers(onChange, onInput, inputHandleChange),
- onKeyDown: callAllEventHandlers(onKeyDown, inputHandleKeyDown),
- onBlur: callAllEventHandlers(onBlur, inputHandleBlur)
- };
- }
-
- return {
- [refKey]: handleRefs(ref, inputNode => {
- inputRef.current = inputNode;
- }),
- id: elementIds.inputId,
- 'aria-autocomplete': 'list',
- 'aria-controls': elementIds.menuId,
- ...(latestState.isOpen && latestState.highlightedIndex > -1 && {
- 'aria-activedescendant': elementIds.getItemId(latestState.highlightedIndex)
- }),
- 'aria-labelledby': elementIds.labelId,
- // https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
- // revert back since autocomplete="nope" is ignored on latest Chrome and Opera
- autoComplete: 'off',
- value: latestState.inputValue,
- ...eventHandlers,
- ...rest
- };
- }, [dispatch, inputKeyDownHandlers, latest, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds]);
- const getComboboxProps = (0,external_React_.useCallback)(function (_temp7, _temp8) {
- let {
- refKey = 'ref',
- ref,
- ...rest
- } = _temp7 === void 0 ? {} : _temp7;
- let {
- suppressRefError = false
- } = _temp8 === void 0 ? {} : _temp8;
- setGetterPropCallInfo('getComboboxProps', suppressRefError, refKey, comboboxRef);
- return {
- [refKey]: handleRefs(ref, comboboxNode => {
- comboboxRef.current = comboboxNode;
- }),
- role: 'combobox',
- 'aria-haspopup': 'listbox',
- 'aria-owns': elementIds.menuId,
- 'aria-expanded': latest.current.state.isOpen,
- ...rest
- };
- }, [latest, setGetterPropCallInfo, elementIds]); // returns
-
- const toggleMenu = (0,external_React_.useCallback)(() => {
- dispatch({
- type: FunctionToggleMenu
- });
- }, [dispatch]);
- const closeMenu = (0,external_React_.useCallback)(() => {
- dispatch({
- type: FunctionCloseMenu
- });
- }, [dispatch]);
- const openMenu = (0,external_React_.useCallback)(() => {
- dispatch({
- type: FunctionOpenMenu
- });
- }, [dispatch]);
- const setHighlightedIndex = (0,external_React_.useCallback)(newHighlightedIndex => {
- dispatch({
- type: FunctionSetHighlightedIndex,
- highlightedIndex: newHighlightedIndex
- });
- }, [dispatch]);
- const selectItem = (0,external_React_.useCallback)(newSelectedItem => {
- dispatch({
- type: FunctionSelectItem,
- selectedItem: newSelectedItem
- });
- }, [dispatch]);
- const setInputValue = (0,external_React_.useCallback)(newInputValue => {
- dispatch({
- type: FunctionSetInputValue,
- inputValue: newInputValue
- });
- }, [dispatch]);
- const reset = (0,external_React_.useCallback)(() => {
- dispatch({
- type: FunctionReset$1
- });
- }, [dispatch]);
- return {
- // prop getters.
- getItemProps,
- getLabelProps,
- getMenuProps,
- getInputProps,
- getComboboxProps,
- getToggleButtonProps,
- // actions.
- toggleMenu,
- openMenu,
- closeMenu,
- setHighlightedIndex,
- setInputValue,
- selectItem,
- reset,
- // state.
- highlightedIndex,
- isOpen,
- selectedItem,
- inputValue
- };
-}
-
-const defaultStateValues = {
- activeIndex: -1,
- selectedItems: []
-};
-/**
- * Returns the initial value for a state key in the following order:
- * 1. controlled prop, 2. initial prop, 3. default prop, 4. default
- * value from Downshift.
- *
- * @param {Object} props Props passed to the hook.
- * @param {string} propKey Props key to generate the value for.
- * @returns {any} The initial value for that prop.
- */
-
-function getInitialValue(props, propKey) {
- return getInitialValue$1(props, propKey, defaultStateValues);
-}
-/**
- * Returns the default value for a state key in the following order:
- * 1. controlled prop, 2. default prop, 3. default value from Downshift.
- *
- * @param {Object} props Props passed to the hook.
- * @param {string} propKey Props key to generate the value for.
- * @returns {any} The initial value for that prop.
- */
-
-
-function getDefaultValue(props, propKey) {
- return getDefaultValue$1(props, propKey, defaultStateValues);
-}
-/**
- * Gets the initial state based on the provided props. It uses initial, default
- * and controlled props related to state in order to compute the initial value.
- *
- * @param {Object} props Props passed to the hook.
- * @returns {Object} The initial state.
- */
-
-
-function getInitialState(props) {
- const activeIndex = getInitialValue(props, 'activeIndex');
- const selectedItems = getInitialValue(props, 'selectedItems');
- return {
- activeIndex,
- selectedItems
- };
-}
-/**
- * Returns true if dropdown keydown operation is permitted. Should not be
- * allowed on keydown with modifier keys (ctrl, alt, shift, meta), on
- * input element with text content that is either highlighted or selection
- * cursor is not at the starting position.
- *
- * @param {KeyboardEvent} event The event from keydown.
- * @returns {boolean} Whether the operation is allowed.
- */
-
-
-function isKeyDownOperationPermitted(event) {
- if (event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) {
- return false;
- }
-
- const element = event.target;
-
- if (element instanceof HTMLInputElement && // if element is a text input
- element.value !== '' && ( // and we have text in it
- // and cursor is either not at the start or is currently highlighting text.
- element.selectionStart !== 0 || element.selectionEnd !== 0)) {
- return false;
- }
-
- return true;
-}
-/**
- * Returns a message to be added to aria-live region when item is removed.
- *
- * @param {Object} selectionParameters Parameters required to build the message.
- * @returns {string} The a11y message.
- */
-
-
-function getA11yRemovalMessage(selectionParameters) {
- const {
- removedSelectedItem,
- itemToString: itemToStringLocal
- } = selectionParameters;
- return `${itemToStringLocal(removedSelectedItem)} has been removed.`;
-}
-
-const propTypes = {
- selectedItems: (prop_types_default()).array,
- initialSelectedItems: (prop_types_default()).array,
- defaultSelectedItems: (prop_types_default()).array,
- itemToString: (prop_types_default()).func,
- getA11yRemovalMessage: (prop_types_default()).func,
- stateReducer: (prop_types_default()).func,
- activeIndex: (prop_types_default()).number,
- initialActiveIndex: (prop_types_default()).number,
- defaultActiveIndex: (prop_types_default()).number,
- onActiveIndexChange: (prop_types_default()).func,
- onSelectedItemsChange: (prop_types_default()).func,
- keyNavigationNext: (prop_types_default()).string,
- keyNavigationPrevious: (prop_types_default()).string,
- environment: prop_types_default().shape({
- addEventListener: (prop_types_default()).func,
- removeEventListener: (prop_types_default()).func,
- document: prop_types_default().shape({
- getElementById: (prop_types_default()).func,
- activeElement: (prop_types_default()).any,
- body: (prop_types_default()).any
- })
- })
-};
-const defaultProps = {
- itemToString: defaultProps$3.itemToString,
- stateReducer: defaultProps$3.stateReducer,
- environment: defaultProps$3.environment,
- getA11yRemovalMessage,
- keyNavigationNext: 'ArrowRight',
- keyNavigationPrevious: 'ArrowLeft'
-}; // eslint-disable-next-line import/no-mutable-exports
-
-let validatePropTypes = downshift_esm_noop;
-/* istanbul ignore next */
-
-if (false) {}
-
-const SelectedItemClick = false ? 0 : 0;
-const SelectedItemKeyDownDelete = false ? 0 : 1;
-const SelectedItemKeyDownBackspace = false ? 0 : 2;
-const SelectedItemKeyDownNavigationNext = false ? 0 : 3;
-const SelectedItemKeyDownNavigationPrevious = false ? 0 : 4;
-const DropdownKeyDownNavigationPrevious = false ? 0 : 5;
-const DropdownKeyDownBackspace = false ? 0 : 6;
-const DropdownClick = false ? 0 : 7;
-const FunctionAddSelectedItem = false ? 0 : 8;
-const FunctionRemoveSelectedItem = false ? 0 : 9;
-const FunctionSetSelectedItems = false ? 0 : 10;
-const FunctionSetActiveIndex = false ? 0 : 11;
-const FunctionReset = false ? 0 : 12;
-
-var stateChangeTypes = /*#__PURE__*/Object.freeze({
- __proto__: null,
- SelectedItemClick: SelectedItemClick,
- SelectedItemKeyDownDelete: SelectedItemKeyDownDelete,
- SelectedItemKeyDownBackspace: SelectedItemKeyDownBackspace,
- SelectedItemKeyDownNavigationNext: SelectedItemKeyDownNavigationNext,
- SelectedItemKeyDownNavigationPrevious: SelectedItemKeyDownNavigationPrevious,
- DropdownKeyDownNavigationPrevious: DropdownKeyDownNavigationPrevious,
- DropdownKeyDownBackspace: DropdownKeyDownBackspace,
- DropdownClick: DropdownClick,
- FunctionAddSelectedItem: FunctionAddSelectedItem,
- FunctionRemoveSelectedItem: FunctionRemoveSelectedItem,
- FunctionSetSelectedItems: FunctionSetSelectedItems,
- FunctionSetActiveIndex: FunctionSetActiveIndex,
- FunctionReset: FunctionReset
-});
-
-/* eslint-disable complexity */
-
-function downshiftMultipleSelectionReducer(state, action) {
- const {
- type,
- index,
- props,
- selectedItem
- } = action;
- const {
- activeIndex,
- selectedItems
- } = state;
- let changes;
-
- switch (type) {
- case SelectedItemClick:
- changes = {
- activeIndex: index
- };
- break;
-
- case SelectedItemKeyDownNavigationPrevious:
- changes = {
- activeIndex: activeIndex - 1 < 0 ? 0 : activeIndex - 1
- };
- break;
-
- case SelectedItemKeyDownNavigationNext:
- changes = {
- activeIndex: activeIndex + 1 >= selectedItems.length ? -1 : activeIndex + 1
- };
- break;
-
- case SelectedItemKeyDownBackspace:
- case SelectedItemKeyDownDelete:
- {
- let newActiveIndex = activeIndex;
-
- if (selectedItems.length === 1) {
- newActiveIndex = -1;
- } else if (activeIndex === selectedItems.length - 1) {
- newActiveIndex = selectedItems.length - 2;
- }
-
- changes = {
- selectedItems: [...selectedItems.slice(0, activeIndex), ...selectedItems.slice(activeIndex + 1)],
- ...{
- activeIndex: newActiveIndex
- }
- };
- break;
- }
-
- case DropdownKeyDownNavigationPrevious:
- changes = {
- activeIndex: selectedItems.length - 1
- };
- break;
-
- case DropdownKeyDownBackspace:
- changes = {
- selectedItems: selectedItems.slice(0, selectedItems.length - 1)
- };
- break;
-
- case FunctionAddSelectedItem:
- changes = {
- selectedItems: [...selectedItems, selectedItem]
- };
- break;
-
- case DropdownClick:
- changes = {
- activeIndex: -1
- };
- break;
-
- case FunctionRemoveSelectedItem:
- {
- let newActiveIndex = activeIndex;
- const selectedItemIndex = selectedItems.indexOf(selectedItem);
-
- if (selectedItemIndex >= 0) {
- if (selectedItems.length === 1) {
- newActiveIndex = -1;
- } else if (selectedItemIndex === selectedItems.length - 1) {
- newActiveIndex = selectedItems.length - 2;
- }
-
- changes = {
- selectedItems: [...selectedItems.slice(0, selectedItemIndex), ...selectedItems.slice(selectedItemIndex + 1)],
- activeIndex: newActiveIndex
- };
- }
-
- break;
- }
-
- case FunctionSetSelectedItems:
- {
- const {
- selectedItems: newSelectedItems
- } = action;
- changes = {
- selectedItems: newSelectedItems
- };
- break;
- }
-
- case FunctionSetActiveIndex:
- {
- const {
- activeIndex: newActiveIndex
- } = action;
- changes = {
- activeIndex: newActiveIndex
- };
- break;
- }
-
- case FunctionReset:
- changes = {
- activeIndex: getDefaultValue(props, 'activeIndex'),
- selectedItems: getDefaultValue(props, 'selectedItems')
- };
- break;
-
- default:
- throw new Error('Reducer called without proper action type.');
- }
-
- return { ...state,
- ...changes
- };
-}
-
-useMultipleSelection.stateChangeTypes = stateChangeTypes;
-
-function useMultipleSelection(userProps) {
- if (userProps === void 0) {
- userProps = {};
- }
-
- validatePropTypes(userProps, useMultipleSelection); // Props defaults and destructuring.
-
- const props = { ...defaultProps,
- ...userProps
- };
- const {
- getA11yRemovalMessage,
- itemToString,
- environment,
- keyNavigationNext,
- keyNavigationPrevious
- } = props; // Reducer init.
-
- const [state, dispatch] = useControlledReducer$1(downshiftMultipleSelectionReducer, getInitialState(props), props);
- const {
- activeIndex,
- selectedItems
- } = state; // Refs.
-
- const isInitialMountRef = (0,external_React_.useRef)(true);
- const dropdownRef = (0,external_React_.useRef)(null);
- const previousSelectedItemsRef = (0,external_React_.useRef)(selectedItems);
- const selectedItemRefs = (0,external_React_.useRef)();
- selectedItemRefs.current = [];
- const latest = downshift_esm_useLatestRef({
- state,
- props
- }); // Effects.
-
- /* Sets a11y status message on changes in selectedItem. */
-
- (0,external_React_.useEffect)(() => {
- if (isInitialMountRef.current) {
- return;
- }
-
- if (selectedItems.length < previousSelectedItemsRef.current.length) {
- const removedSelectedItem = previousSelectedItemsRef.current.find(item => selectedItems.indexOf(item) < 0);
- setStatus(getA11yRemovalMessage({
- itemToString,
- resultCount: selectedItems.length,
- removedSelectedItem,
- activeIndex,
- activeSelectedItem: selectedItems[activeIndex]
- }), environment.document);
- }
-
- previousSelectedItemsRef.current = selectedItems; // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [selectedItems.length]); // Sets focus on active item.
-
- (0,external_React_.useEffect)(() => {
- if (isInitialMountRef.current) {
- return;
- }
-
- if (activeIndex === -1 && dropdownRef.current) {
- dropdownRef.current.focus();
- } else if (selectedItemRefs.current[activeIndex]) {
- selectedItemRefs.current[activeIndex].focus();
- }
- }, [activeIndex]);
- useControlPropsValidator({
- isInitialMount: isInitialMountRef.current,
- props,
- state
- });
- const setGetterPropCallInfo = useGetterPropsCalledChecker('getDropdownProps'); // Make initial ref false.
-
- (0,external_React_.useEffect)(() => {
- isInitialMountRef.current = false;
- }, []); // Event handler functions.
-
- const selectedItemKeyDownHandlers = (0,external_React_.useMemo)(() => ({
- [keyNavigationPrevious]() {
- dispatch({
- type: SelectedItemKeyDownNavigationPrevious
- });
- },
-
- [keyNavigationNext]() {
- dispatch({
- type: SelectedItemKeyDownNavigationNext
- });
- },
-
- Delete() {
- dispatch({
- type: SelectedItemKeyDownDelete
- });
- },
-
- Backspace() {
- dispatch({
- type: SelectedItemKeyDownBackspace
- });
- }
-
- }), [dispatch, keyNavigationNext, keyNavigationPrevious]);
- const dropdownKeyDownHandlers = (0,external_React_.useMemo)(() => ({
- [keyNavigationPrevious](event) {
- if (isKeyDownOperationPermitted(event)) {
- dispatch({
- type: DropdownKeyDownNavigationPrevious
- });
- }
- },
-
- Backspace(event) {
- if (isKeyDownOperationPermitted(event)) {
- dispatch({
- type: DropdownKeyDownBackspace
- });
- }
- }
-
- }), [dispatch, keyNavigationPrevious]); // Getter props.
-
- const getSelectedItemProps = (0,external_React_.useCallback)(function (_temp) {
- let {
- refKey = 'ref',
- ref,
- onClick,
- onKeyDown,
- selectedItem,
- index,
- ...rest
- } = _temp === void 0 ? {} : _temp;
- const {
- state: latestState
- } = latest.current;
- const itemIndex = getItemIndex(index, selectedItem, latestState.selectedItems);
-
- if (itemIndex < 0) {
- throw new Error('Pass either selectedItem or index in getSelectedItemProps!');
- }
-
- const selectedItemHandleClick = () => {
- dispatch({
- type: SelectedItemClick,
- index
- });
- };
-
- const selectedItemHandleKeyDown = event => {
- const key = normalizeArrowKey(event);
-
- if (key && selectedItemKeyDownHandlers[key]) {
- selectedItemKeyDownHandlers[key](event);
- }
- };
-
- return {
- [refKey]: handleRefs(ref, selectedItemNode => {
- if (selectedItemNode) {
- selectedItemRefs.current.push(selectedItemNode);
- }
- }),
- tabIndex: index === latestState.activeIndex ? 0 : -1,
- onClick: callAllEventHandlers(onClick, selectedItemHandleClick),
- onKeyDown: callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown),
- ...rest
- };
- }, [dispatch, latest, selectedItemKeyDownHandlers]);
- const getDropdownProps = (0,external_React_.useCallback)(function (_temp2, _temp3) {
- let {
- refKey = 'ref',
- ref,
- onKeyDown,
- onClick,
- preventKeyAction = false,
- ...rest
- } = _temp2 === void 0 ? {} : _temp2;
- let {
- suppressRefError = false
- } = _temp3 === void 0 ? {} : _temp3;
- setGetterPropCallInfo('getDropdownProps', suppressRefError, refKey, dropdownRef);
-
- const dropdownHandleKeyDown = event => {
- const key = normalizeArrowKey(event);
-
- if (key && dropdownKeyDownHandlers[key]) {
- dropdownKeyDownHandlers[key](event);
- }
- };
-
- const dropdownHandleClick = () => {
- dispatch({
- type: DropdownClick
- });
- };
-
- return {
- [refKey]: handleRefs(ref, dropdownNode => {
- if (dropdownNode) {
- dropdownRef.current = dropdownNode;
- }
- }),
- ...(!preventKeyAction && {
- onKeyDown: callAllEventHandlers(onKeyDown, dropdownHandleKeyDown),
- onClick: callAllEventHandlers(onClick, dropdownHandleClick)
- }),
- ...rest
- };
- }, [dispatch, dropdownKeyDownHandlers, setGetterPropCallInfo]); // returns
-
- const addSelectedItem = (0,external_React_.useCallback)(selectedItem => {
- dispatch({
- type: FunctionAddSelectedItem,
- selectedItem
- });
- }, [dispatch]);
- const removeSelectedItem = (0,external_React_.useCallback)(selectedItem => {
- dispatch({
- type: FunctionRemoveSelectedItem,
- selectedItem
- });
- }, [dispatch]);
- const setSelectedItems = (0,external_React_.useCallback)(newSelectedItems => {
- dispatch({
- type: FunctionSetSelectedItems,
- selectedItems: newSelectedItems
- });
- }, [dispatch]);
- const setActiveIndex = (0,external_React_.useCallback)(newActiveIndex => {
- dispatch({
- type: FunctionSetActiveIndex,
- activeIndex: newActiveIndex
- });
- }, [dispatch]);
- const reset = (0,external_React_.useCallback)(() => {
- dispatch({
- type: FunctionReset
- });
- }, [dispatch]);
- return {
- getSelectedItemProps,
- getDropdownProps,
- addSelectedItem,
- removeSelectedItem,
- setSelectedItems,
- setActiveIndex,
- reset,
- selectedItems,
- activeIndex
- };
-}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-select-control/index.js
-// @ts-nocheck
-/**
- * External dependencies
- */
-
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-/**
- * Internal dependencies
- */
-
-
-
-
-
-
-
-
-const custom_select_control_itemToString = item => item?.name;
-// This is needed so that in Windows, where
-// the menu does not necessarily open on
-// key up/down, you can still switch between
-// options with the menu closed.
-const custom_select_control_stateReducer = ({
- selectedItem
-}, {
- type,
- changes,
- props: {
- items
- }
-}) => {
- switch (type) {
- case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:
- // If we already have a selected item, try to select the next one,
- // without circular navigation. Otherwise, select the first item.
- return {
- selectedItem: items[selectedItem ? Math.min(items.indexOf(selectedItem) + 1, items.length - 1) : 0]
- };
- case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:
- // If we already have a selected item, try to select the previous one,
- // without circular navigation. Otherwise, select the last item.
- return {
- selectedItem: items[selectedItem ? Math.max(items.indexOf(selectedItem) - 1, 0) : items.length - 1]
- };
- default:
- return changes;
- }
-};
-function CustomSelectControl(props) {
- const {
- /** Start opting into the larger default height that will become the default size in a future version. */
- __next40pxDefaultSize = false,
- className,
- hideLabelFromVision,
- label,
- describedBy,
- options: items,
- onChange: onSelectedItemChange,
- /** @type {import('../select-control/types').SelectControlProps.size} */
- size = 'default',
- value: _selectedItem,
- onMouseOver,
- onMouseOut,
- onFocus,
- onBlur,
- __experimentalShowSelectedHint = false
- } = useDeprecated36pxDefaultSizeProp(props);
- const {
- getLabelProps,
- getToggleButtonProps,
- getMenuProps,
- getItemProps,
- isOpen,
- highlightedIndex,
- selectedItem
- } = useSelect({
- initialSelectedItem: items[0],
- items,
- itemToString: custom_select_control_itemToString,
- onSelectedItemChange,
- ...(typeof _selectedItem !== 'undefined' && _selectedItem !== null ? {
- selectedItem: _selectedItem
- } : undefined),
- stateReducer: custom_select_control_stateReducer
- });
- function getDescribedBy() {
- if (describedBy) {
- return describedBy;
- }
- if (!selectedItem) {
- return (0,external_wp_i18n_namespaceObject.__)('No selection');
- }
-
- // translators: %s: The selected option.
- return (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Currently selected: %s'), selectedItem.name);
- }
- let menuProps = getMenuProps({
- className: 'components-custom-select-control__menu',
- 'aria-hidden': !isOpen
- });
- const onKeyDownHandler = (0,external_wp_element_namespaceObject.useCallback)(e => {
- e.stopPropagation();
- menuProps?.onKeyDown?.(e);
- }, [menuProps]);
-
- // We need this here, because the null active descendant is not fully ARIA compliant.
- if (menuProps['aria-activedescendant']?.startsWith('downshift-null')) {
- const {
- 'aria-activedescendant': ariaActivedescendant,
- ...restMenuProps
- } = menuProps;
- menuProps = restMenuProps;
- }
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
- className: dist_clsx('components-custom-select-control', className),
- children: [hideLabelFromVision ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, {
- as: "label",
- ...getLabelProps(),
- children: label
- }) :
- /*#__PURE__*/
- /* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */
- (0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledLabel, {
- ...getLabelProps({
- className: 'components-custom-select-control__label'
- }),
- children: label
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(input_base, {
- __next40pxDefaultSize: __next40pxDefaultSize,
- size: size,
- suffix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(select_control_chevron_down, {}),
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Select, {
- onMouseOver: onMouseOver,
- onMouseOut: onMouseOut,
- as: "button",
- onFocus: onFocus,
- onBlur: onBlur,
- selectSize: size,
- __next40pxDefaultSize: __next40pxDefaultSize,
- ...getToggleButtonProps({
- // This is needed because some speech recognition software don't support `aria-labelledby`.
- 'aria-label': label,
- 'aria-labelledby': undefined,
- className: 'components-custom-select-control__button',
- describedBy: getDescribedBy()
- }),
- children: [custom_select_control_itemToString(selectedItem), __experimentalShowSelectedHint && selectedItem.__experimentalHint && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
- className: "components-custom-select-control__hint",
- children: selectedItem.__experimentalHint
- })]
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
- className: "components-custom-select-control__menu-wrapper",
- children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("ul", {
- ...menuProps,
- onKeyDown: onKeyDownHandler,
- children: isOpen && items.map((item, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("li", {
- ...getItemProps({
- item,
- index,
- className: dist_clsx(item.className, 'components-custom-select-control__item', {
- 'is-highlighted': index === highlightedIndex,
- 'has-hint': !!item.__experimentalHint,
- 'is-next-40px-default-size': __next40pxDefaultSize
- }),
- style: item.style
- }),
- children: [item.name, item.__experimentalHint && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
- className: "components-custom-select-control__item-hint",
- children: item.__experimentalHint
- }), item === selectedItem && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, {
- icon: library_check,
- className: "components-custom-select-control__item-icon"
- })]
- }, item.key))
- })
+ onChange(changeObject);
+ },
+ value: value?.name,
+ // Setting the first option as a default value when no value is provided
+ // is already done natively by the underlying Ariakit component,
+ // but doing this explicitly avoids the `onChange` callback from firing
+ // on initial render, thus making this implementation closer to the v1.
+ defaultValue: options[0]?.name
+ });
+ const children = options.map(applyOptionDeprecations).map(({
+ name,
+ key,
+ hint,
+ style,
+ className
+ }) => {
+ const withHint = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(WithHintItemWrapper, {
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
+ children: name
+ }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WithHintItemHint, {
+ // Keeping the classname for legacy reasons
+ className: "components-custom-select-control__item-hint",
+ children: hint
})]
+ });
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(custom_select_control_v2_item, {
+ value: name,
+ children: hint ? withHint : name,
+ style: style,
+ className: dist_clsx(className,
+ // Keeping the classnames for legacy reasons
+ 'components-custom-select-control__item', {
+ 'has-hint': hint
+ })
+ }, key);
+ });
+ const currentValue = useStoreState(store, 'value');
+ const renderSelectedValueHint = () => {
+ const selectedOptionHint = options?.map(applyOptionDeprecations)?.find(({
+ name
+ }) => currentValue === name)?.hint;
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(SelectedExperimentalHintWrapper, {
+ children: [currentValue, selectedOptionHint && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectedExperimentalHintItem, {
+ // Keeping the classname for legacy reasons
+ className: "components-custom-select-control__hint",
+ children: selectedOptionHint
+ })]
+ });
+ };
+ const translatedSize = (() => {
+ if (__next40pxDefaultSize && size === 'default' || size === '__unstable-large') {
+ return 'default';
+ }
+ if (!__next40pxDefaultSize && size === 'default') {
+ return 'compact';
+ }
+ return size;
+ })();
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(custom_select, {
+ "aria-describedby": descriptionId,
+ renderSelectedValue: showSelectedHint ? renderSelectedValueHint : undefined,
+ size: translatedSize,
+ store: store,
+ className: dist_clsx(
+ // Keeping the classname for legacy reasons
+ 'components-custom-select-control', classNameProp),
+ isLegacy: true,
+ ...restProps,
+ children: children
+ }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, {
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
+ id: descriptionId,
+ children: getDescribedBy(currentValue, describedBy)
+ })
})]
});
}
-function StableCustomSelectControl(props) {
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CustomSelectControl, {
- ...props,
- __experimentalShowSelectedHint: false
- });
-}
-
-;// CONCATENATED MODULE: ./node_modules/use-lilius/build/index.es.js
-
-
+/* harmony default export */ const custom_select_control = (CustomSelectControl);
+
+;// ./node_modules/date-fns/toDate.mjs
/**
* @name toDate
* @category Common Helpers
@@ -51873,6 +50166,42 @@
}
}
+// Fallback for modularized imports:
+/* harmony default export */ const date_fns_toDate = ((/* unused pure expression or super */ null && (toDate)));
+
+;// ./node_modules/date-fns/startOfDay.mjs
+
+
+/**
+ * @name startOfDay
+ * @category Day Helpers
+ * @summary Return the start of a day for the given date.
+ *
+ * @description
+ * Return the start of a day for the given date.
+ * The result will be in the local timezone.
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ *
+ * @param date - The original date
+ *
+ * @returns The start of a day
+ *
+ * @example
+ * // The start of a day for 2 September 2014 11:55:00:
+ * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Tue Sep 02 2014 00:00:00
+ */
+function startOfDay(date) {
+ const _date = toDate(date);
+ _date.setHours(0, 0, 0, 0);
+ return _date;
+}
+
+// Fallback for modularized imports:
+/* harmony default export */ const date_fns_startOfDay = ((/* unused pure expression or super */ null && (startOfDay)));
+
+;// ./node_modules/date-fns/constructFrom.mjs
/**
* @name constructFrom
* @category Generic Helpers
@@ -51911,36 +50240,12 @@
}
}
-/**
- * @name addDays
- * @category Day Helpers
- * @summary Add the specified number of days to the given date.
- *
- * @description
- * Add the specified number of days to the given date.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param date - The date to be changed
- * @param amount - The amount of days to be added.
- *
- * @returns The new date with the days added
- *
- * @example
- * // Add 10 days to 1 September 2014:
- * const result = addDays(new Date(2014, 8, 1), 10)
- * //=> Thu Sep 11 2014 00:00:00
- */
-function addDays(date, amount) {
- const _date = toDate(date);
- if (isNaN(amount)) return constructFrom(date, NaN);
- if (!amount) {
- // If 0 days, no-op to avoid changing times in the hour before end of DST
- return _date;
- }
- _date.setDate(_date.getDate() + amount);
- return _date;
-}
+// Fallback for modularized imports:
+/* harmony default export */ const date_fns_constructFrom = ((/* unused pure expression or super */ null && (constructFrom)));
+
+;// ./node_modules/date-fns/addMonths.mjs
+
+
/**
* @name addMonths
@@ -52007,701 +50312,11 @@
}
}
-let index_es_defaultOptions = {};
-
-function getDefaultOptions() {
- return index_es_defaultOptions;
-}
-
-/**
- * The {@link startOfWeek} function options.
- */
-
-/**
- * @name startOfWeek
- * @category Week Helpers
- * @summary Return the start of a week for the given date.
- *
- * @description
- * Return the start of a week for the given date.
- * The result will be in the local timezone.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param date - The original date
- * @param options - An object with options
- *
- * @returns The start of a week
- *
- * @example
- * // The start of a week for 2 September 2014 11:55:00:
- * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0))
- * //=> Sun Aug 31 2014 00:00:00
- *
- * @example
- * // If the week starts on Monday, the start of the week for 2 September 2014 11:55:00:
- * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 })
- * //=> Mon Sep 01 2014 00:00:00
- */
-function startOfWeek(date, options) {
- const defaultOptions = getDefaultOptions();
- const weekStartsOn =
- options?.weekStartsOn ??
- options?.locale?.options?.weekStartsOn ??
- defaultOptions.weekStartsOn ??
- defaultOptions.locale?.options?.weekStartsOn ??
- 0;
-
- const _date = toDate(date);
- const day = _date.getDay();
- const diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
-
- _date.setDate(_date.getDate() - diff);
- _date.setHours(0, 0, 0, 0);
- return _date;
-}
-
-/**
- * @name startOfDay
- * @category Day Helpers
- * @summary Return the start of a day for the given date.
- *
- * @description
- * Return the start of a day for the given date.
- * The result will be in the local timezone.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param date - The original date
- *
- * @returns The start of a day
- *
- * @example
- * // The start of a day for 2 September 2014 11:55:00:
- * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))
- * //=> Tue Sep 02 2014 00:00:00
- */
-function startOfDay(date) {
- const _date = toDate(date);
- _date.setHours(0, 0, 0, 0);
- return _date;
-}
-
-/**
- * @name addWeeks
- * @category Week Helpers
- * @summary Add the specified number of weeks to the given date.
- *
- * @description
- * Add the specified number of week to the given date.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param date - The date to be changed
- * @param amount - The amount of weeks to be added.
- *
- * @returns The new date with the weeks added
- *
- * @example
- * // Add 4 weeks to 1 September 2014:
- * const result = addWeeks(new Date(2014, 8, 1), 4)
- * //=> Mon Sep 29 2014 00:00:00
- */
-function addWeeks(date, amount) {
- const days = amount * 7;
- return addDays(date, days);
-}
-
-/**
- * @name addYears
- * @category Year Helpers
- * @summary Add the specified number of years to the given date.
- *
- * @description
- * Add the specified number of years to the given date.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param date - The date to be changed
- * @param amount - The amount of years to be added.
- *
- * @returns The new date with the years added
- *
- * @example
- * // Add 5 years to 1 September 2014:
- * const result = addYears(new Date(2014, 8, 1), 5)
- * //=> Sun Sep 01 2019 00:00:00
- */
-function addYears(date, amount) {
- return addMonths(date, amount * 12);
-}
-
-/**
- * @name endOfMonth
- * @category Month Helpers
- * @summary Return the end of a month for the given date.
- *
- * @description
- * Return the end of a month for the given date.
- * The result will be in the local timezone.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param date - The original date
- *
- * @returns The end of a month
- *
- * @example
- * // The end of a month for 2 September 2014 11:55:00:
- * const result = endOfMonth(new Date(2014, 8, 2, 11, 55, 0))
- * //=> Tue Sep 30 2014 23:59:59.999
- */
-function endOfMonth(date) {
- const _date = toDate(date);
- const month = _date.getMonth();
- _date.setFullYear(_date.getFullYear(), month + 1, 0);
- _date.setHours(23, 59, 59, 999);
- return _date;
-}
-
-/**
- * The {@link eachDayOfInterval} function options.
- */
-
-/**
- * @name eachDayOfInterval
- * @category Interval Helpers
- * @summary Return the array of dates within the specified time interval.
- *
- * @description
- * Return the array of dates within the specified time interval.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param interval - The interval.
- * @param options - An object with options.
- *
- * @returns The array with starts of days from the day of the interval start to the day of the interval end
- *
- * @example
- * // Each day between 6 October 2014 and 10 October 2014:
- * const result = eachDayOfInterval({
- * start: new Date(2014, 9, 6),
- * end: new Date(2014, 9, 10)
- * })
- * //=> [
- * // Mon Oct 06 2014 00:00:00,
- * // Tue Oct 07 2014 00:00:00,
- * // Wed Oct 08 2014 00:00:00,
- * // Thu Oct 09 2014 00:00:00,
- * // Fri Oct 10 2014 00:00:00
- * // ]
- */
-function eachDayOfInterval(interval, options) {
- const startDate = toDate(interval.start);
- const endDate = toDate(interval.end);
-
- let reversed = +startDate > +endDate;
- const endTime = reversed ? +startDate : +endDate;
- const currentDate = reversed ? endDate : startDate;
- currentDate.setHours(0, 0, 0, 0);
-
- let step = options?.step ?? 1;
- if (!step) return [];
- if (step < 0) {
- step = -step;
- reversed = !reversed;
- }
-
- const dates = [];
-
- while (+currentDate <= endTime) {
- dates.push(toDate(currentDate));
- currentDate.setDate(currentDate.getDate() + step);
- currentDate.setHours(0, 0, 0, 0);
- }
-
- return reversed ? dates.reverse() : dates;
-}
-
-/**
- * The {@link eachMonthOfInterval} function options.
- */
-
-/**
- * @name eachMonthOfInterval
- * @category Interval Helpers
- * @summary Return the array of months within the specified time interval.
- *
- * @description
- * Return the array of months within the specified time interval.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param interval - The interval
- *
- * @returns The array with starts of months from the month of the interval start to the month of the interval end
- *
- * @example
- * // Each month between 6 February 2014 and 10 August 2014:
- * const result = eachMonthOfInterval({
- * start: new Date(2014, 1, 6),
- * end: new Date(2014, 7, 10)
- * })
- * //=> [
- * // Sat Feb 01 2014 00:00:00,
- * // Sat Mar 01 2014 00:00:00,
- * // Tue Apr 01 2014 00:00:00,
- * // Thu May 01 2014 00:00:00,
- * // Sun Jun 01 2014 00:00:00,
- * // Tue Jul 01 2014 00:00:00,
- * // Fri Aug 01 2014 00:00:00
- * // ]
- */
-function eachMonthOfInterval(interval, options) {
- const startDate = toDate(interval.start);
- const endDate = toDate(interval.end);
-
- let reversed = +startDate > +endDate;
- const endTime = reversed ? +startDate : +endDate;
- const currentDate = reversed ? endDate : startDate;
- currentDate.setHours(0, 0, 0, 0);
- currentDate.setDate(1);
-
- let step = options?.step ?? 1;
- if (!step) return [];
- if (step < 0) {
- step = -step;
- reversed = !reversed;
- }
-
- const dates = [];
-
- while (+currentDate <= endTime) {
- dates.push(toDate(currentDate));
- currentDate.setMonth(currentDate.getMonth() + step);
- }
-
- return reversed ? dates.reverse() : dates;
-}
-
-/**
- * The {@link eachWeekOfInterval} function options.
- */
-
-/**
- * @name eachWeekOfInterval
- * @category Interval Helpers
- * @summary Return the array of weeks within the specified time interval.
- *
- * @description
- * Return the array of weeks within the specified time interval.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param interval - The interval.
- * @param options - An object with options.
- *
- * @returns The array with starts of weeks from the week of the interval start to the week of the interval end
- *
- * @example
- * // Each week within interval 6 October 2014 - 23 November 2014:
- * const result = eachWeekOfInterval({
- * start: new Date(2014, 9, 6),
- * end: new Date(2014, 10, 23)
- * })
- * //=> [
- * // Sun Oct 05 2014 00:00:00,
- * // Sun Oct 12 2014 00:00:00,
- * // Sun Oct 19 2014 00:00:00,
- * // Sun Oct 26 2014 00:00:00,
- * // Sun Nov 02 2014 00:00:00,
- * // Sun Nov 09 2014 00:00:00,
- * // Sun Nov 16 2014 00:00:00,
- * // Sun Nov 23 2014 00:00:00
- * // ]
- */
-function eachWeekOfInterval(interval, options) {
- const startDate = toDate(interval.start);
- const endDate = toDate(interval.end);
-
- let reversed = +startDate > +endDate;
- const startDateWeek = reversed
- ? startOfWeek(endDate, options)
- : startOfWeek(startDate, options);
- const endDateWeek = reversed
- ? startOfWeek(startDate, options)
- : startOfWeek(endDate, options);
-
- // Some timezones switch DST at midnight, making start of day unreliable in these timezones, 3pm is a safe bet
- startDateWeek.setHours(15);
- endDateWeek.setHours(15);
-
- const endTime = +endDateWeek.getTime();
- let currentDate = startDateWeek;
-
- let step = options?.step ?? 1;
- if (!step) return [];
- if (step < 0) {
- step = -step;
- reversed = !reversed;
- }
-
- const dates = [];
-
- while (+currentDate <= endTime) {
- currentDate.setHours(0);
- dates.push(toDate(currentDate));
- currentDate = addWeeks(currentDate, step);
- currentDate.setHours(15);
- }
-
- return reversed ? dates.reverse() : dates;
-}
-
-/**
- * @name startOfMonth
- * @category Month Helpers
- * @summary Return the start of a month for the given date.
- *
- * @description
- * Return the start of a month for the given date.
- * The result will be in the local timezone.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param date - The original date
- *
- * @returns The start of a month
- *
- * @example
- * // The start of a month for 2 September 2014 11:55:00:
- * const result = startOfMonth(new Date(2014, 8, 2, 11, 55, 0))
- * //=> Mon Sep 01 2014 00:00:00
- */
-function startOfMonth(date) {
- const _date = toDate(date);
- _date.setDate(1);
- _date.setHours(0, 0, 0, 0);
- return _date;
-}
-
-/**
- * The {@link endOfWeek} function options.
- */
-
-/**
- * @name endOfWeek
- * @category Week Helpers
- * @summary Return the end of a week for the given date.
- *
- * @description
- * Return the end of a week for the given date.
- * The result will be in the local timezone.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param date - The original date
- * @param options - An object with options
- *
- * @returns The end of a week
- *
- * @example
- * // The end of a week for 2 September 2014 11:55:00:
- * const result = endOfWeek(new Date(2014, 8, 2, 11, 55, 0))
- * //=> Sat Sep 06 2014 23:59:59.999
- *
- * @example
- * // If the week starts on Monday, the end of the week for 2 September 2014 11:55:00:
- * const result = endOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 })
- * //=> Sun Sep 07 2014 23:59:59.999
- */
-function endOfWeek(date, options) {
- const defaultOptions = getDefaultOptions();
- const weekStartsOn =
- options?.weekStartsOn ??
- options?.locale?.options?.weekStartsOn ??
- defaultOptions.weekStartsOn ??
- defaultOptions.locale?.options?.weekStartsOn ??
- 0;
-
- const _date = toDate(date);
- const day = _date.getDay();
- const diff = (day < weekStartsOn ? -7 : 0) + 6 - (day - weekStartsOn);
-
- _date.setDate(_date.getDate() + diff);
- _date.setHours(23, 59, 59, 999);
- return _date;
-}
-
-/**
- * @name getDaysInMonth
- * @category Month Helpers
- * @summary Get the number of days in a month of the given date.
- *
- * @description
- * Get the number of days in a month of the given date.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param date - The given date
- *
- * @returns The number of days in a month
- *
- * @example
- * // How many days are in February 2000?
- * const result = getDaysInMonth(new Date(2000, 1))
- * //=> 29
- */
-function getDaysInMonth(date) {
- const _date = toDate(date);
- const year = _date.getFullYear();
- const monthIndex = _date.getMonth();
- const lastDayOfMonth = constructFrom(date, 0);
- lastDayOfMonth.setFullYear(year, monthIndex + 1, 0);
- lastDayOfMonth.setHours(0, 0, 0, 0);
- return lastDayOfMonth.getDate();
-}
-
-/**
- * @name isAfter
- * @category Common Helpers
- * @summary Is the first date after the second one?
- *
- * @description
- * Is the first date after the second one?
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param date - The date that should be after the other one to return true
- * @param dateToCompare - The date to compare with
- *
- * @returns The first date is after the second date
- *
- * @example
- * // Is 10 July 1989 after 11 February 1987?
- * const result = isAfter(new Date(1989, 6, 10), new Date(1987, 1, 11))
- * //=> true
- */
-function isAfter(date, dateToCompare) {
- const _date = toDate(date);
- const _dateToCompare = toDate(dateToCompare);
- return _date.getTime() > _dateToCompare.getTime();
-}
-
-/**
- * @name isBefore
- * @category Common Helpers
- * @summary Is the first date before the second one?
- *
- * @description
- * Is the first date before the second one?
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param date - The date that should be before the other one to return true
- * @param dateToCompare - The date to compare with
- *
- * @returns The first date is before the second date
- *
- * @example
- * // Is 10 July 1989 before 11 February 1987?
- * const result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11))
- * //=> false
- */
-function isBefore(date, dateToCompare) {
- const _date = toDate(date);
- const _dateToCompare = toDate(dateToCompare);
- return +_date < +_dateToCompare;
-}
-
-/**
- * @name isEqual
- * @category Common Helpers
- * @summary Are the given dates equal?
- *
- * @description
- * Are the given dates equal?
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param dateLeft - The first date to compare
- * @param dateRight - The second date to compare
- *
- * @returns The dates are equal
- *
- * @example
- * // Are 2 July 2014 06:30:45.000 and 2 July 2014 06:30:45.500 equal?
- * const result = isEqual(
- * new Date(2014, 6, 2, 6, 30, 45, 0),
- * new Date(2014, 6, 2, 6, 30, 45, 500)
- * )
- * //=> false
- */
-function isEqual(leftDate, rightDate) {
- const _dateLeft = toDate(leftDate);
- const _dateRight = toDate(rightDate);
- return +_dateLeft === +_dateRight;
-}
-
-/**
- * @name setMonth
- * @category Month Helpers
- * @summary Set the month to the given date.
- *
- * @description
- * Set the month to the given date.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param date - The date to be changed
- * @param month - The month index to set (0-11)
- *
- * @returns The new date with the month set
- *
- * @example
- * // Set February to 1 September 2014:
- * const result = setMonth(new Date(2014, 8, 1), 1)
- * //=> Sat Feb 01 2014 00:00:00
- */
-function setMonth(date, month) {
- const _date = toDate(date);
- const year = _date.getFullYear();
- const day = _date.getDate();
-
- const dateWithDesiredMonth = constructFrom(date, 0);
- dateWithDesiredMonth.setFullYear(year, month, 15);
- dateWithDesiredMonth.setHours(0, 0, 0, 0);
- const daysInMonth = getDaysInMonth(dateWithDesiredMonth);
- // Set the last day of the new month
- // if the original date was the last day of the longer month
- _date.setMonth(month, Math.min(day, daysInMonth));
- return _date;
-}
-
-/**
- * @name set
- * @category Common Helpers
- * @summary Set date values to a given date.
- *
- * @description
- * Set date values to a given date.
- *
- * Sets time values to date from object `values`.
- * A value is not set if it is undefined or null or doesn't exist in `values`.
- *
- * Note about bundle size: `set` does not internally use `setX` functions from date-fns but instead opts
- * to use native `Date#setX` methods. If you use this function, you may not want to include the
- * other `setX` functions that date-fns provides if you are concerned about the bundle size.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param date - The date to be changed
- * @param values - The date values to be set
- *
- * @returns The new date with options set
- *
- * @example
- * // Transform 1 September 2014 into 20 October 2015 in a single line:
- * const result = set(new Date(2014, 8, 20), { year: 2015, month: 9, date: 20 })
- * //=> Tue Oct 20 2015 00:00:00
- *
- * @example
- * // Set 12 PM to 1 September 2014 01:23:45 to 1 September 2014 12:00:00:
- * const result = set(new Date(2014, 8, 1, 1, 23, 45), { hours: 12 })
- * //=> Mon Sep 01 2014 12:23:45
- */
-
-function set(date, values) {
- let _date = toDate(date);
-
- // Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date
- if (isNaN(+_date)) {
- return constructFrom(date, NaN);
- }
-
- if (values.year != null) {
- _date.setFullYear(values.year);
- }
-
- if (values.month != null) {
- _date = setMonth(_date, values.month);
- }
-
- if (values.date != null) {
- _date.setDate(values.date);
- }
-
- if (values.hours != null) {
- _date.setHours(values.hours);
- }
-
- if (values.minutes != null) {
- _date.setMinutes(values.minutes);
- }
-
- if (values.seconds != null) {
- _date.setSeconds(values.seconds);
- }
-
- if (values.milliseconds != null) {
- _date.setMilliseconds(values.milliseconds);
- }
-
- return _date;
-}
-
-/**
- * @name setYear
- * @category Year Helpers
- * @summary Set the year to the given date.
- *
- * @description
- * Set the year to the given date.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param date - The date to be changed
- * @param year - The year of the new date
- *
- * @returns The new date with the year set
- *
- * @example
- * // Set year 2013 to 1 September 2014:
- * const result = setYear(new Date(2014, 8, 1), 2013)
- * //=> Sun Sep 01 2013 00:00:00
- */
-function setYear(date, year) {
- const _date = toDate(date);
-
- // Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date
- if (isNaN(+_date)) {
- return constructFrom(date, NaN);
- }
-
- _date.setFullYear(year);
- return _date;
-}
-
-/**
- * @name startOfToday
- * @category Day Helpers
- * @summary Return the start of today.
- * @pure false
- *
- * @description
- * Return the start of today.
- *
- * @returns The start of today
- *
- * @example
- * // If today is 6 October 2014:
- * const result = startOfToday()
- * //=> Mon Oct 6 2014 00:00:00
- */
-function startOfToday() {
- return startOfDay(Date.now());
-}
+// Fallback for modularized imports:
+/* harmony default export */ const date_fns_addMonths = ((/* unused pure expression or super */ null && (addMonths)));
+
+;// ./node_modules/date-fns/subMonths.mjs
+
/**
* @name subMonths
@@ -52727,385 +50342,10 @@
return addMonths(date, -amount);
}
-/**
- * @name subYears
- * @category Year Helpers
- * @summary Subtract the specified number of years from the given date.
- *
- * @description
- * Subtract the specified number of years from the given date.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param date - The date to be changed
- * @param amount - The amount of years to be subtracted.
- *
- * @returns The new date with the years subtracted
- *
- * @example
- * // Subtract 5 years from 1 September 2014:
- * const result = subYears(new Date(2014, 8, 1), 5)
- * //=> Tue Sep 01 2009 00:00:00
- */
-function subYears(date, amount) {
- return addYears(date, -amount);
-}
-
-var Month;
-(function (Month) {
- Month[Month["JANUARY"] = 0] = "JANUARY";
- Month[Month["FEBRUARY"] = 1] = "FEBRUARY";
- Month[Month["MARCH"] = 2] = "MARCH";
- Month[Month["APRIL"] = 3] = "APRIL";
- Month[Month["MAY"] = 4] = "MAY";
- Month[Month["JUNE"] = 5] = "JUNE";
- Month[Month["JULY"] = 6] = "JULY";
- Month[Month["AUGUST"] = 7] = "AUGUST";
- Month[Month["SEPTEMBER"] = 8] = "SEPTEMBER";
- Month[Month["OCTOBER"] = 9] = "OCTOBER";
- Month[Month["NOVEMBER"] = 10] = "NOVEMBER";
- Month[Month["DECEMBER"] = 11] = "DECEMBER";
-})(Month || (Month = {}));
-var Day;
-(function (Day) {
- Day[Day["SUNDAY"] = 0] = "SUNDAY";
- Day[Day["MONDAY"] = 1] = "MONDAY";
- Day[Day["TUESDAY"] = 2] = "TUESDAY";
- Day[Day["WEDNESDAY"] = 3] = "WEDNESDAY";
- Day[Day["THURSDAY"] = 4] = "THURSDAY";
- Day[Day["FRIDAY"] = 5] = "FRIDAY";
- Day[Day["SATURDAY"] = 6] = "SATURDAY";
-})(Day || (Day = {}));
-var inRange = function (date, min, max) {
- return (isEqual(date, min) || isAfter(date, min)) && (isEqual(date, max) || isBefore(date, max));
-};
-var index_es_clearTime = function (date) { return set(date, { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 }); };
-var useLilius = function (_a) {
- var _b = _a === void 0 ? {} : _a, _c = _b.weekStartsOn, weekStartsOn = _c === void 0 ? Day.SUNDAY : _c, _d = _b.viewing, initialViewing = _d === void 0 ? new Date() : _d, _e = _b.selected, initialSelected = _e === void 0 ? [] : _e, _f = _b.numberOfMonths, numberOfMonths = _f === void 0 ? 1 : _f;
- var _g = (0,external_React_.useState)(initialViewing), viewing = _g[0], setViewing = _g[1];
- var viewToday = (0,external_React_.useCallback)(function () { return setViewing(startOfToday()); }, [setViewing]);
- var viewMonth = (0,external_React_.useCallback)(function (month) { return setViewing(function (v) { return setMonth(v, month); }); }, []);
- var viewPreviousMonth = (0,external_React_.useCallback)(function () { return setViewing(function (v) { return subMonths(v, 1); }); }, []);
- var viewNextMonth = (0,external_React_.useCallback)(function () { return setViewing(function (v) { return addMonths(v, 1); }); }, []);
- var viewYear = (0,external_React_.useCallback)(function (year) { return setViewing(function (v) { return setYear(v, year); }); }, []);
- var viewPreviousYear = (0,external_React_.useCallback)(function () { return setViewing(function (v) { return subYears(v, 1); }); }, []);
- var viewNextYear = (0,external_React_.useCallback)(function () { return setViewing(function (v) { return addYears(v, 1); }); }, []);
- var _h = (0,external_React_.useState)(initialSelected.map(index_es_clearTime)), selected = _h[0], setSelected = _h[1];
- var clearSelected = function () { return setSelected([]); };
- var isSelected = (0,external_React_.useCallback)(function (date) { return selected.findIndex(function (s) { return isEqual(s, date); }) > -1; }, [selected]);
- var select = (0,external_React_.useCallback)(function (date, replaceExisting) {
- if (replaceExisting) {
- setSelected(Array.isArray(date) ? date : [date]);
- }
- else {
- setSelected(function (selectedItems) { return selectedItems.concat(Array.isArray(date) ? date : [date]); });
- }
- }, []);
- var deselect = (0,external_React_.useCallback)(function (date) {
- return setSelected(function (selectedItems) {
- return Array.isArray(date)
- ? selectedItems.filter(function (s) { return !date.map(function (d) { return d.getTime(); }).includes(s.getTime()); })
- : selectedItems.filter(function (s) { return !isEqual(s, date); });
- });
- }, []);
- var toggle = (0,external_React_.useCallback)(function (date, replaceExisting) { return (isSelected(date) ? deselect(date) : select(date, replaceExisting)); }, [deselect, isSelected, select]);
- var selectRange = (0,external_React_.useCallback)(function (start, end, replaceExisting) {
- if (replaceExisting) {
- setSelected(eachDayOfInterval({ start: start, end: end }));
- }
- else {
- setSelected(function (selectedItems) { return selectedItems.concat(eachDayOfInterval({ start: start, end: end })); });
- }
- }, []);
- var deselectRange = (0,external_React_.useCallback)(function (start, end) {
- setSelected(function (selectedItems) {
- return selectedItems.filter(function (s) {
- return !eachDayOfInterval({ start: start, end: end })
- .map(function (d) { return d.getTime(); })
- .includes(s.getTime());
- });
- });
- }, []);
- var calendar = (0,external_React_.useMemo)(function () {
- return eachMonthOfInterval({
- start: startOfMonth(viewing),
- end: endOfMonth(addMonths(viewing, numberOfMonths - 1)),
- }).map(function (month) {
- return eachWeekOfInterval({
- start: startOfMonth(month),
- end: endOfMonth(month),
- }, { weekStartsOn: weekStartsOn }).map(function (week) {
- return eachDayOfInterval({
- start: startOfWeek(week, { weekStartsOn: weekStartsOn }),
- end: endOfWeek(week, { weekStartsOn: weekStartsOn }),
- });
- });
- });
- }, [viewing, weekStartsOn, numberOfMonths]);
- return {
- clearTime: index_es_clearTime,
- inRange: inRange,
- viewing: viewing,
- setViewing: setViewing,
- viewToday: viewToday,
- viewMonth: viewMonth,
- viewPreviousMonth: viewPreviousMonth,
- viewNextMonth: viewNextMonth,
- viewYear: viewYear,
- viewPreviousYear: viewPreviousYear,
- viewNextYear: viewNextYear,
- selected: selected,
- setSelected: setSelected,
- clearSelected: clearSelected,
- isSelected: isSelected,
- select: select,
- deselect: deselect,
- toggle: toggle,
- selectRange: selectRange,
- deselectRange: deselectRange,
- calendar: calendar,
- };
-};
-
-
-
-;// CONCATENATED MODULE: ./node_modules/date-fns/toDate.mjs
-/**
- * @name toDate
- * @category Common Helpers
- * @summary Convert the given argument to an instance of Date.
- *
- * @description
- * Convert the given argument to an instance of Date.
- *
- * If the argument is an instance of Date, the function returns its clone.
- *
- * If the argument is a number, it is treated as a timestamp.
- *
- * If the argument is none of the above, the function returns Invalid Date.
- *
- * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param argument - The value to convert
- *
- * @returns The parsed date in the local time zone
- *
- * @example
- * // Clone the date:
- * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))
- * //=> Tue Feb 11 2014 11:30:30
- *
- * @example
- * // Convert the timestamp to date:
- * const result = toDate(1392098430000)
- * //=> Tue Feb 11 2014 11:30:30
- */
-function toDate_toDate(argument) {
- const argStr = Object.prototype.toString.call(argument);
-
- // Clone the date
- if (
- argument instanceof Date ||
- (typeof argument === "object" && argStr === "[object Date]")
- ) {
- // Prevent the date to lose the milliseconds when passed to new Date() in IE10
- return new argument.constructor(+argument);
- } else if (
- typeof argument === "number" ||
- argStr === "[object Number]" ||
- typeof argument === "string" ||
- argStr === "[object String]"
- ) {
- // TODO: Can we get rid of as?
- return new Date(argument);
- } else {
- // TODO: Can we get rid of as?
- return new Date(NaN);
- }
-}
-
// Fallback for modularized imports:
-/* harmony default export */ const date_fns_toDate = ((/* unused pure expression or super */ null && (toDate_toDate)));
-
-;// CONCATENATED MODULE: ./node_modules/date-fns/startOfDay.mjs
-
-
-/**
- * @name startOfDay
- * @category Day Helpers
- * @summary Return the start of a day for the given date.
- *
- * @description
- * Return the start of a day for the given date.
- * The result will be in the local timezone.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param date - The original date
- *
- * @returns The start of a day
- *
- * @example
- * // The start of a day for 2 September 2014 11:55:00:
- * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))
- * //=> Tue Sep 02 2014 00:00:00
- */
-function startOfDay_startOfDay(date) {
- const _date = toDate_toDate(date);
- _date.setHours(0, 0, 0, 0);
- return _date;
-}
-
-// Fallback for modularized imports:
-/* harmony default export */ const date_fns_startOfDay = ((/* unused pure expression or super */ null && (startOfDay_startOfDay)));
-
-;// CONCATENATED MODULE: ./node_modules/date-fns/constructFrom.mjs
-/**
- * @name constructFrom
- * @category Generic Helpers
- * @summary Constructs a date using the reference date and the value
- *
- * @description
- * The function constructs a new date using the constructor from the reference
- * date and the given value. It helps to build generic functions that accept
- * date extensions.
- *
- * It defaults to `Date` if the passed reference date is a number or a string.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param date - The reference date to take constructor from
- * @param value - The value to create the date
- *
- * @returns Date initialized using the given date and value
- *
- * @example
- * import { constructFrom } from 'date-fns'
- *
- * // A function that clones a date preserving the original type
- * function cloneDate<DateType extends Date(date: DateType): DateType {
- * return constructFrom(
- * date, // Use contrustor from the given date
- * date.getTime() // Use the date value to create a new date
- * )
- * }
- */
-function constructFrom_constructFrom(date, value) {
- if (date instanceof Date) {
- return new date.constructor(value);
- } else {
- return new Date(value);
- }
-}
-
-// Fallback for modularized imports:
-/* harmony default export */ const date_fns_constructFrom = ((/* unused pure expression or super */ null && (constructFrom_constructFrom)));
-
-;// CONCATENATED MODULE: ./node_modules/date-fns/addMonths.mjs
-
-
-
-/**
- * @name addMonths
- * @category Month Helpers
- * @summary Add the specified number of months to the given date.
- *
- * @description
- * Add the specified number of months to the given date.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param date - The date to be changed
- * @param amount - The amount of months to be added.
- *
- * @returns The new date with the months added
- *
- * @example
- * // Add 5 months to 1 September 2014:
- * const result = addMonths(new Date(2014, 8, 1), 5)
- * //=> Sun Feb 01 2015 00:00:00
- *
- * // Add one month to 30 January 2023:
- * const result = addMonths(new Date(2023, 0, 30), 1)
- * //=> Tue Feb 28 2023 00:00:00
- */
-function addMonths_addMonths(date, amount) {
- const _date = toDate_toDate(date);
- if (isNaN(amount)) return constructFrom_constructFrom(date, NaN);
- if (!amount) {
- // If 0 months, no-op to avoid changing times in the hour before end of DST
- return _date;
- }
- const dayOfMonth = _date.getDate();
-
- // The JS Date object supports date math by accepting out-of-bounds values for
- // month, day, etc. For example, new Date(2020, 0, 0) returns 31 Dec 2019 and
- // new Date(2020, 13, 1) returns 1 Feb 2021. This is *almost* the behavior we
- // want except that dates will wrap around the end of a month, meaning that
- // new Date(2020, 13, 31) will return 3 Mar 2021 not 28 Feb 2021 as desired. So
- // we'll default to the end of the desired month by adding 1 to the desired
- // month and using a date of 0 to back up one day to the end of the desired
- // month.
- const endOfDesiredMonth = constructFrom_constructFrom(date, _date.getTime());
- endOfDesiredMonth.setMonth(_date.getMonth() + amount + 1, 0);
- const daysInMonth = endOfDesiredMonth.getDate();
- if (dayOfMonth >= daysInMonth) {
- // If we're already at the end of the month, then this is the correct date
- // and we're done.
- return endOfDesiredMonth;
- } else {
- // Otherwise, we now know that setting the original day-of-month value won't
- // cause an overflow, so set the desired day-of-month. Note that we can't
- // just set the date of `endOfDesiredMonth` because that object may have had
- // its time changed in the unusual case where where a DST transition was on
- // the last day of the month and its local time was in the hour skipped or
- // repeated next to a DST transition. So we use `date` instead which is
- // guaranteed to still have the original time.
- _date.setFullYear(
- endOfDesiredMonth.getFullYear(),
- endOfDesiredMonth.getMonth(),
- dayOfMonth,
- );
- return _date;
- }
-}
-
-// Fallback for modularized imports:
-/* harmony default export */ const date_fns_addMonths = ((/* unused pure expression or super */ null && (addMonths_addMonths)));
-
-;// CONCATENATED MODULE: ./node_modules/date-fns/subMonths.mjs
-
-
-/**
- * @name subMonths
- * @category Month Helpers
- * @summary Subtract the specified number of months from the given date.
- *
- * @description
- * Subtract the specified number of months from the given date.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param date - The date to be changed
- * @param amount - The amount of months to be subtracted.
- *
- * @returns The new date with the months subtracted
- *
- * @example
- * // Subtract 5 months from 1 February 2015:
- * const result = subMonths(new Date(2015, 1, 1), 5)
- * //=> Mon Sep 01 2014 00:00:00
- */
-function subMonths_subMonths(date, amount) {
- return addMonths_addMonths(date, -amount);
-}
-
-// Fallback for modularized imports:
-/* harmony default export */ const date_fns_subMonths = ((/* unused pure expression or super */ null && (subMonths_subMonths)));
-
-;// CONCATENATED MODULE: ./node_modules/date-fns/locale/en-US/_lib/formatDistance.mjs
+/* harmony default export */ const date_fns_subMonths = ((/* unused pure expression or super */ null && (subMonths)));
+
+;// ./node_modules/date-fns/locale/en-US/_lib/formatDistance.mjs
const formatDistanceLocale = {
lessThanXSeconds: {
one: "less than a second",
@@ -53208,7 +50448,7 @@
return result;
};
-;// CONCATENATED MODULE: ./node_modules/date-fns/locale/_lib/buildFormatLongFn.mjs
+;// ./node_modules/date-fns/locale/_lib/buildFormatLongFn.mjs
function buildFormatLongFn(args) {
return (options = {}) => {
// TODO: Remove String()
@@ -53218,7 +50458,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/date-fns/locale/en-US/_lib/formatLong.mjs
+;// ./node_modules/date-fns/locale/en-US/_lib/formatLong.mjs
const dateFormats = {
@@ -53259,7 +50499,7 @@
}),
};
-;// CONCATENATED MODULE: ./node_modules/date-fns/locale/en-US/_lib/formatRelative.mjs
+;// ./node_modules/date-fns/locale/en-US/_lib/formatRelative.mjs
const formatRelativeLocale = {
lastWeek: "'last' eeee 'at' p",
yesterday: "'yesterday at' p",
@@ -53272,7 +50512,7 @@
const formatRelative = (token, _date, _baseDate, _options) =>
formatRelativeLocale[token];
-;// CONCATENATED MODULE: ./node_modules/date-fns/locale/_lib/buildLocalizeFn.mjs
+;// ./node_modules/date-fns/locale/_lib/buildLocalizeFn.mjs
/* eslint-disable no-unused-vars */
/**
@@ -53338,7 +50578,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/date-fns/locale/en-US/_lib/localize.mjs
+;// ./node_modules/date-fns/locale/en-US/_lib/localize.mjs
const eraValues = {
@@ -53527,7 +50767,7 @@
}),
};
-;// CONCATENATED MODULE: ./node_modules/date-fns/locale/_lib/buildMatchFn.mjs
+;// ./node_modules/date-fns/locale/_lib/buildMatchFn.mjs
function buildMatchFn(args) {
return (string, options = {}) => {
const width = options.width;
@@ -53586,7 +50826,7 @@
return undefined;
}
-;// CONCATENATED MODULE: ./node_modules/date-fns/locale/_lib/buildMatchPatternFn.mjs
+;// ./node_modules/date-fns/locale/_lib/buildMatchPatternFn.mjs
function buildMatchPatternFn(args) {
return (string, options = {}) => {
const matchResult = string.match(args.matchPattern);
@@ -53608,7 +50848,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/date-fns/locale/en-US/_lib/match.mjs
+;// ./node_modules/date-fns/locale/en-US/_lib/match.mjs
@@ -53742,7 +50982,7 @@
}),
};
-;// CONCATENATED MODULE: ./node_modules/date-fns/locale/en-US.mjs
+;// ./node_modules/date-fns/locale/en-US.mjs
@@ -53773,10 +51013,10 @@
// Fallback for modularized imports:
/* harmony default export */ const en_US = ((/* unused pure expression or super */ null && (enUS)));
-;// CONCATENATED MODULE: ./node_modules/date-fns/_lib/defaultOptions.mjs
+;// ./node_modules/date-fns/_lib/defaultOptions.mjs
let defaultOptions_defaultOptions = {};
-function defaultOptions_getDefaultOptions() {
+function getDefaultOptions() {
return defaultOptions_defaultOptions;
}
@@ -53784,7 +51024,7 @@
defaultOptions_defaultOptions = newOptions;
}
-;// CONCATENATED MODULE: ./node_modules/date-fns/constants.mjs
+;// ./node_modules/date-fns/constants.mjs
/**
* @module constants
* @summary Useful constants
@@ -53989,7 +51229,7 @@
*/
const secondsInQuarter = secondsInMonth * 3;
-;// CONCATENATED MODULE: ./node_modules/date-fns/_lib/getTimezoneOffsetInMilliseconds.mjs
+;// ./node_modules/date-fns/_lib/getTimezoneOffsetInMilliseconds.mjs
/**
@@ -54004,7 +51244,7 @@
* This function returns the timezone offset in milliseconds that takes seconds in account.
*/
function getTimezoneOffsetInMilliseconds(date) {
- const _date = toDate_toDate(date);
+ const _date = toDate(date);
const utcDate = new Date(
Date.UTC(
_date.getFullYear(),
@@ -54020,7 +51260,7 @@
return +date - +utcDate;
}
-;// CONCATENATED MODULE: ./node_modules/date-fns/differenceInCalendarDays.mjs
+;// ./node_modules/date-fns/differenceInCalendarDays.mjs
@@ -54058,8 +51298,8 @@
* //=> 1
*/
function differenceInCalendarDays(dateLeft, dateRight) {
- const startOfDayLeft = startOfDay_startOfDay(dateLeft);
- const startOfDayRight = startOfDay_startOfDay(dateRight);
+ const startOfDayLeft = startOfDay(dateLeft);
+ const startOfDayRight = startOfDay(dateRight);
const timestampLeft =
+startOfDayLeft - getTimezoneOffsetInMilliseconds(startOfDayLeft);
@@ -54075,7 +51315,7 @@
// Fallback for modularized imports:
/* harmony default export */ const date_fns_differenceInCalendarDays = ((/* unused pure expression or super */ null && (differenceInCalendarDays)));
-;// CONCATENATED MODULE: ./node_modules/date-fns/startOfYear.mjs
+;// ./node_modules/date-fns/startOfYear.mjs
@@ -54100,8 +51340,8 @@
* //=> Wed Jan 01 2014 00:00:00
*/
function startOfYear(date) {
- const cleanDate = toDate_toDate(date);
- const _date = constructFrom_constructFrom(date, 0);
+ const cleanDate = toDate(date);
+ const _date = constructFrom(date, 0);
_date.setFullYear(cleanDate.getFullYear(), 0, 1);
_date.setHours(0, 0, 0, 0);
return _date;
@@ -54110,7 +51350,7 @@
// Fallback for modularized imports:
/* harmony default export */ const date_fns_startOfYear = ((/* unused pure expression or super */ null && (startOfYear)));
-;// CONCATENATED MODULE: ./node_modules/date-fns/getDayOfYear.mjs
+;// ./node_modules/date-fns/getDayOfYear.mjs
@@ -54135,7 +51375,7 @@
* //=> 183
*/
function getDayOfYear(date) {
- const _date = toDate_toDate(date);
+ const _date = toDate(date);
const diff = differenceInCalendarDays(_date, startOfYear(_date));
const dayOfYear = diff + 1;
return dayOfYear;
@@ -54144,7 +51384,7 @@
// Fallback for modularized imports:
/* harmony default export */ const date_fns_getDayOfYear = ((/* unused pure expression or super */ null && (getDayOfYear)));
-;// CONCATENATED MODULE: ./node_modules/date-fns/startOfWeek.mjs
+;// ./node_modules/date-fns/startOfWeek.mjs
@@ -54178,8 +51418,8 @@
* const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 })
* //=> Mon Sep 01 2014 00:00:00
*/
-function startOfWeek_startOfWeek(date, options) {
- const defaultOptions = defaultOptions_getDefaultOptions();
+function startOfWeek(date, options) {
+ const defaultOptions = getDefaultOptions();
const weekStartsOn =
options?.weekStartsOn ??
options?.locale?.options?.weekStartsOn ??
@@ -54187,7 +51427,7 @@
defaultOptions.locale?.options?.weekStartsOn ??
0;
- const _date = toDate_toDate(date);
+ const _date = toDate(date);
const day = _date.getDay();
const diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
@@ -54197,9 +51437,9 @@
}
// Fallback for modularized imports:
-/* harmony default export */ const date_fns_startOfWeek = ((/* unused pure expression or super */ null && (startOfWeek_startOfWeek)));
-
-;// CONCATENATED MODULE: ./node_modules/date-fns/startOfISOWeek.mjs
+/* harmony default export */ const date_fns_startOfWeek = ((/* unused pure expression or super */ null && (startOfWeek)));
+
+;// ./node_modules/date-fns/startOfISOWeek.mjs
/**
@@ -54225,13 +51465,13 @@
* //=> Mon Sep 01 2014 00:00:00
*/
function startOfISOWeek(date) {
- return startOfWeek_startOfWeek(date, { weekStartsOn: 1 });
+ return startOfWeek(date, { weekStartsOn: 1 });
}
// Fallback for modularized imports:
/* harmony default export */ const date_fns_startOfISOWeek = ((/* unused pure expression or super */ null && (startOfISOWeek)));
-;// CONCATENATED MODULE: ./node_modules/date-fns/getISOWeekYear.mjs
+;// ./node_modules/date-fns/getISOWeekYear.mjs
@@ -54259,15 +51499,15 @@
* //=> 2004
*/
function getISOWeekYear(date) {
- const _date = toDate_toDate(date);
+ const _date = toDate(date);
const year = _date.getFullYear();
- const fourthOfJanuaryOfNextYear = constructFrom_constructFrom(date, 0);
+ const fourthOfJanuaryOfNextYear = constructFrom(date, 0);
fourthOfJanuaryOfNextYear.setFullYear(year + 1, 0, 4);
fourthOfJanuaryOfNextYear.setHours(0, 0, 0, 0);
const startOfNextYear = startOfISOWeek(fourthOfJanuaryOfNextYear);
- const fourthOfJanuaryOfThisYear = constructFrom_constructFrom(date, 0);
+ const fourthOfJanuaryOfThisYear = constructFrom(date, 0);
fourthOfJanuaryOfThisYear.setFullYear(year, 0, 4);
fourthOfJanuaryOfThisYear.setHours(0, 0, 0, 0);
const startOfThisYear = startOfISOWeek(fourthOfJanuaryOfThisYear);
@@ -54284,7 +51524,7 @@
// Fallback for modularized imports:
/* harmony default export */ const date_fns_getISOWeekYear = ((/* unused pure expression or super */ null && (getISOWeekYear)));
-;// CONCATENATED MODULE: ./node_modules/date-fns/startOfISOWeekYear.mjs
+;// ./node_modules/date-fns/startOfISOWeekYear.mjs
@@ -54314,7 +51554,7 @@
*/
function startOfISOWeekYear(date) {
const year = getISOWeekYear(date);
- const fourthOfJanuary = constructFrom_constructFrom(date, 0);
+ const fourthOfJanuary = constructFrom(date, 0);
fourthOfJanuary.setFullYear(year, 0, 4);
fourthOfJanuary.setHours(0, 0, 0, 0);
return startOfISOWeek(fourthOfJanuary);
@@ -54323,7 +51563,7 @@
// Fallback for modularized imports:
/* harmony default export */ const date_fns_startOfISOWeekYear = ((/* unused pure expression or super */ null && (startOfISOWeekYear)));
-;// CONCATENATED MODULE: ./node_modules/date-fns/getISOWeek.mjs
+;// ./node_modules/date-fns/getISOWeek.mjs
@@ -54351,7 +51591,7 @@
* //=> 53
*/
function getISOWeek(date) {
- const _date = toDate_toDate(date);
+ const _date = toDate(date);
const diff = +startOfISOWeek(_date) - +startOfISOWeekYear(_date);
// Round the number of weeks to the nearest integer because the number of
@@ -54363,7 +51603,7 @@
// Fallback for modularized imports:
/* harmony default export */ const date_fns_getISOWeek = ((/* unused pure expression or super */ null && (getISOWeek)));
-;// CONCATENATED MODULE: ./node_modules/date-fns/getWeekYear.mjs
+;// ./node_modules/date-fns/getWeekYear.mjs
@@ -54410,10 +51650,10 @@
* //=> 2004
*/
function getWeekYear(date, options) {
- const _date = toDate_toDate(date);
+ const _date = toDate(date);
const year = _date.getFullYear();
- const defaultOptions = defaultOptions_getDefaultOptions();
+ const defaultOptions = getDefaultOptions();
const firstWeekContainsDate =
options?.firstWeekContainsDate ??
options?.locale?.options?.firstWeekContainsDate ??
@@ -54421,15 +51661,15 @@
defaultOptions.locale?.options?.firstWeekContainsDate ??
1;
- const firstWeekOfNextYear = constructFrom_constructFrom(date, 0);
+ const firstWeekOfNextYear = constructFrom(date, 0);
firstWeekOfNextYear.setFullYear(year + 1, 0, firstWeekContainsDate);
firstWeekOfNextYear.setHours(0, 0, 0, 0);
- const startOfNextYear = startOfWeek_startOfWeek(firstWeekOfNextYear, options);
-
- const firstWeekOfThisYear = constructFrom_constructFrom(date, 0);
+ const startOfNextYear = startOfWeek(firstWeekOfNextYear, options);
+
+ const firstWeekOfThisYear = constructFrom(date, 0);
firstWeekOfThisYear.setFullYear(year, 0, firstWeekContainsDate);
firstWeekOfThisYear.setHours(0, 0, 0, 0);
- const startOfThisYear = startOfWeek_startOfWeek(firstWeekOfThisYear, options);
+ const startOfThisYear = startOfWeek(firstWeekOfThisYear, options);
if (_date.getTime() >= startOfNextYear.getTime()) {
return year + 1;
@@ -54443,7 +51683,7 @@
// Fallback for modularized imports:
/* harmony default export */ const date_fns_getWeekYear = ((/* unused pure expression or super */ null && (getWeekYear)));
-;// CONCATENATED MODULE: ./node_modules/date-fns/startOfWeekYear.mjs
+;// ./node_modules/date-fns/startOfWeekYear.mjs
@@ -54490,7 +51730,7 @@
* //=> Mon Jan 03 2005 00:00:00
*/
function startOfWeekYear(date, options) {
- const defaultOptions = defaultOptions_getDefaultOptions();
+ const defaultOptions = getDefaultOptions();
const firstWeekContainsDate =
options?.firstWeekContainsDate ??
options?.locale?.options?.firstWeekContainsDate ??
@@ -54499,17 +51739,17 @@
1;
const year = getWeekYear(date, options);
- const firstWeek = constructFrom_constructFrom(date, 0);
+ const firstWeek = constructFrom(date, 0);
firstWeek.setFullYear(year, 0, firstWeekContainsDate);
firstWeek.setHours(0, 0, 0, 0);
- const _date = startOfWeek_startOfWeek(firstWeek, options);
+ const _date = startOfWeek(firstWeek, options);
return _date;
}
// Fallback for modularized imports:
/* harmony default export */ const date_fns_startOfWeekYear = ((/* unused pure expression or super */ null && (startOfWeekYear)));
-;// CONCATENATED MODULE: ./node_modules/date-fns/getWeek.mjs
+;// ./node_modules/date-fns/getWeek.mjs
@@ -54557,8 +51797,8 @@
*/
function getWeek(date, options) {
- const _date = toDate_toDate(date);
- const diff = +startOfWeek_startOfWeek(_date, options) - +startOfWeekYear(_date, options);
+ const _date = toDate(date);
+ const diff = +startOfWeek(_date, options) - +startOfWeekYear(_date, options);
// Round the number of weeks to the nearest integer because the number of
// milliseconds in a week is not constant (e.g. it's different in the week of
@@ -54569,14 +51809,14 @@
// Fallback for modularized imports:
/* harmony default export */ const date_fns_getWeek = ((/* unused pure expression or super */ null && (getWeek)));
-;// CONCATENATED MODULE: ./node_modules/date-fns/_lib/addLeadingZeros.mjs
+;// ./node_modules/date-fns/_lib/addLeadingZeros.mjs
function addLeadingZeros(number, targetLength) {
const sign = number < 0 ? "-" : "";
const output = Math.abs(number).toString().padStart(targetLength, "0");
return sign + output;
}
-;// CONCATENATED MODULE: ./node_modules/date-fns/_lib/format/lightFormatters.mjs
+;// ./node_modules/date-fns/_lib/format/lightFormatters.mjs
/*
@@ -54670,7 +51910,7 @@
},
};
-;// CONCATENATED MODULE: ./node_modules/date-fns/_lib/format/formatters.mjs
+;// ./node_modules/date-fns/_lib/format/formatters.mjs
@@ -55448,7 +52688,7 @@
return sign + hours + delimiter + minutes;
}
-;// CONCATENATED MODULE: ./node_modules/date-fns/_lib/format/longFormatters.mjs
+;// ./node_modules/date-fns/_lib/format/longFormatters.mjs
const dateLongFormatter = (pattern, formatLong) => {
switch (pattern) {
case "P":
@@ -55514,7 +52754,7 @@
P: dateTimeLongFormatter,
};
-;// CONCATENATED MODULE: ./node_modules/date-fns/_lib/protectedTokens.mjs
+;// ./node_modules/date-fns/_lib/protectedTokens.mjs
const dayOfYearTokenRE = /^D+$/;
const weekYearTokenRE = /^Y+$/;
@@ -55539,7 +52779,7 @@
return `Use \`${token.toLowerCase()}\` instead of \`${token}\` (in \`${format}\`) for formatting ${subject} to the input \`${input}\`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md`;
}
-;// CONCATENATED MODULE: ./node_modules/date-fns/isDate.mjs
+;// ./node_modules/date-fns/isDate.mjs
/**
* @name isDate
* @category Common Helpers
@@ -55583,7 +52823,7 @@
// Fallback for modularized imports:
/* harmony default export */ const date_fns_isDate = ((/* unused pure expression or super */ null && (isDate)));
-;// CONCATENATED MODULE: ./node_modules/date-fns/isValid.mjs
+;// ./node_modules/date-fns/isValid.mjs
@@ -55624,14 +52864,14 @@
if (!isDate(date) && typeof date !== "number") {
return false;
}
- const _date = toDate_toDate(date);
+ const _date = toDate(date);
return !isNaN(Number(_date));
}
// Fallback for modularized imports:
/* harmony default export */ const date_fns_isValid = ((/* unused pure expression or super */ null && (isValid)));
-;// CONCATENATED MODULE: ./node_modules/date-fns/format.mjs
+;// ./node_modules/date-fns/format.mjs
@@ -55959,7 +53199,7 @@
* //=> "3 o'clock"
*/
function format(date, formatStr, options) {
- const defaultOptions = defaultOptions_getDefaultOptions();
+ const defaultOptions = getDefaultOptions();
const locale = options?.locale ?? defaultOptions.locale ?? enUS;
const firstWeekContainsDate =
@@ -55976,7 +53216,7 @@
defaultOptions.locale?.options?.weekStartsOn ??
0;
- const originalDate = toDate_toDate(date);
+ const originalDate = toDate(date);
if (!isValid(originalDate)) {
throw new RangeError("Invalid time value");
@@ -56065,7 +53305,7 @@
// Fallback for modularized imports:
/* harmony default export */ const date_fns_format = ((/* unused pure expression or super */ null && (format)));
-;// CONCATENATED MODULE: ./node_modules/date-fns/isSameMonth.mjs
+;// ./node_modules/date-fns/isSameMonth.mjs
/**
@@ -56094,8 +53334,8 @@
* //=> false
*/
function isSameMonth(dateLeft, dateRight) {
- const _dateLeft = toDate_toDate(dateLeft);
- const _dateRight = toDate_toDate(dateRight);
+ const _dateLeft = toDate(dateLeft);
+ const _dateRight = toDate(dateRight);
return (
_dateLeft.getFullYear() === _dateRight.getFullYear() &&
_dateLeft.getMonth() === _dateRight.getMonth()
@@ -56105,7 +53345,7 @@
// Fallback for modularized imports:
/* harmony default export */ const date_fns_isSameMonth = ((/* unused pure expression or super */ null && (isSameMonth)));
-;// CONCATENATED MODULE: ./node_modules/date-fns/isEqual.mjs
+;// ./node_modules/date-fns/isEqual.mjs
/**
@@ -56131,16 +53371,16 @@
* )
* //=> false
*/
-function isEqual_isEqual(leftDate, rightDate) {
- const _dateLeft = toDate_toDate(leftDate);
- const _dateRight = toDate_toDate(rightDate);
+function isEqual(leftDate, rightDate) {
+ const _dateLeft = toDate(leftDate);
+ const _dateRight = toDate(rightDate);
return +_dateLeft === +_dateRight;
}
// Fallback for modularized imports:
-/* harmony default export */ const date_fns_isEqual = ((/* unused pure expression or super */ null && (isEqual_isEqual)));
-
-;// CONCATENATED MODULE: ./node_modules/date-fns/isSameDay.mjs
+/* harmony default export */ const date_fns_isEqual = ((/* unused pure expression or super */ null && (isEqual)));
+
+;// ./node_modules/date-fns/isSameDay.mjs
/**
@@ -56174,8 +53414,8 @@
* //=> false
*/
function isSameDay(dateLeft, dateRight) {
- const dateLeftStartOfDay = startOfDay_startOfDay(dateLeft);
- const dateRightStartOfDay = startOfDay_startOfDay(dateRight);
+ const dateLeftStartOfDay = startOfDay(dateLeft);
+ const dateRightStartOfDay = startOfDay(dateRight);
return +dateLeftStartOfDay === +dateRightStartOfDay;
}
@@ -56183,7 +53423,7 @@
// Fallback for modularized imports:
/* harmony default export */ const date_fns_isSameDay = ((/* unused pure expression or super */ null && (isSameDay)));
-;// CONCATENATED MODULE: ./node_modules/date-fns/addDays.mjs
+;// ./node_modules/date-fns/addDays.mjs
@@ -56207,9 +53447,9 @@
* const result = addDays(new Date(2014, 8, 1), 10)
* //=> Thu Sep 11 2014 00:00:00
*/
-function addDays_addDays(date, amount) {
- const _date = toDate_toDate(date);
- if (isNaN(amount)) return constructFrom_constructFrom(date, NaN);
+function addDays(date, amount) {
+ const _date = toDate(date);
+ if (isNaN(amount)) return constructFrom(date, NaN);
if (!amount) {
// If 0 days, no-op to avoid changing times in the hour before end of DST
return _date;
@@ -56219,9 +53459,9 @@
}
// Fallback for modularized imports:
-/* harmony default export */ const date_fns_addDays = ((/* unused pure expression or super */ null && (addDays_addDays)));
-
-;// CONCATENATED MODULE: ./node_modules/date-fns/addWeeks.mjs
+/* harmony default export */ const date_fns_addDays = ((/* unused pure expression or super */ null && (addDays)));
+
+;// ./node_modules/date-fns/addWeeks.mjs
/**
@@ -56244,15 +53484,15 @@
* const result = addWeeks(new Date(2014, 8, 1), 4)
* //=> Mon Sep 29 2014 00:00:00
*/
-function addWeeks_addWeeks(date, amount) {
+function addWeeks(date, amount) {
const days = amount * 7;
- return addDays_addDays(date, days);
+ return addDays(date, days);
}
// Fallback for modularized imports:
-/* harmony default export */ const date_fns_addWeeks = ((/* unused pure expression or super */ null && (addWeeks_addWeeks)));
-
-;// CONCATENATED MODULE: ./node_modules/date-fns/subWeeks.mjs
+/* harmony default export */ const date_fns_addWeeks = ((/* unused pure expression or super */ null && (addWeeks)));
+
+;// ./node_modules/date-fns/subWeeks.mjs
/**
@@ -56276,13 +53516,13 @@
* //=> Mon Aug 04 2014 00:00:00
*/
function subWeeks(date, amount) {
- return addWeeks_addWeeks(date, -amount);
+ return addWeeks(date, -amount);
}
// Fallback for modularized imports:
/* harmony default export */ const date_fns_subWeeks = ((/* unused pure expression or super */ null && (subWeeks)));
-;// CONCATENATED MODULE: ./node_modules/date-fns/endOfWeek.mjs
+;// ./node_modules/date-fns/endOfWeek.mjs
@@ -56316,8 +53556,8 @@
* const result = endOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 })
* //=> Sun Sep 07 2014 23:59:59.999
*/
-function endOfWeek_endOfWeek(date, options) {
- const defaultOptions = defaultOptions_getDefaultOptions();
+function endOfWeek(date, options) {
+ const defaultOptions = getDefaultOptions();
const weekStartsOn =
options?.weekStartsOn ??
options?.locale?.options?.weekStartsOn ??
@@ -56325,7 +53565,7 @@
defaultOptions.locale?.options?.weekStartsOn ??
0;
- const _date = toDate_toDate(date);
+ const _date = toDate(date);
const day = _date.getDay();
const diff = (day < weekStartsOn ? -7 : 0) + 6 - (day - weekStartsOn);
@@ -56335,9 +53575,9 @@
}
// Fallback for modularized imports:
-/* harmony default export */ const date_fns_endOfWeek = ((/* unused pure expression or super */ null && (endOfWeek_endOfWeek)));
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/arrow-right.js
+/* harmony default export */ const date_fns_endOfWeek = ((/* unused pure expression or super */ null && (endOfWeek)));
+
+;// ./node_modules/@wordpress/icons/build-module/library/arrow-right.js
/**
* WordPress dependencies
*/
@@ -56352,7 +53592,7 @@
});
/* harmony default export */ const arrow_right = (arrowRight);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/arrow-left.js
+;// ./node_modules/@wordpress/icons/build-module/library/arrow-left.js
/**
* WordPress dependencies
*/
@@ -56367,11 +53607,799 @@
});
/* harmony default export */ const arrow_left = (arrowLeft);
-;// CONCATENATED MODULE: external ["wp","date"]
+;// external ["wp","date"]
const external_wp_date_namespaceObject = window["wp"]["date"];
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/date/styles.js
-
-function date_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+;// ./node_modules/date-fns/isAfter.mjs
+
+
+/**
+ * @name isAfter
+ * @category Common Helpers
+ * @summary Is the first date after the second one?
+ *
+ * @description
+ * Is the first date after the second one?
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ *
+ * @param date - The date that should be after the other one to return true
+ * @param dateToCompare - The date to compare with
+ *
+ * @returns The first date is after the second date
+ *
+ * @example
+ * // Is 10 July 1989 after 11 February 1987?
+ * const result = isAfter(new Date(1989, 6, 10), new Date(1987, 1, 11))
+ * //=> true
+ */
+function isAfter(date, dateToCompare) {
+ const _date = toDate(date);
+ const _dateToCompare = toDate(dateToCompare);
+ return _date.getTime() > _dateToCompare.getTime();
+}
+
+// Fallback for modularized imports:
+/* harmony default export */ const date_fns_isAfter = ((/* unused pure expression or super */ null && (isAfter)));
+
+;// ./node_modules/date-fns/isBefore.mjs
+
+
+/**
+ * @name isBefore
+ * @category Common Helpers
+ * @summary Is the first date before the second one?
+ *
+ * @description
+ * Is the first date before the second one?
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ *
+ * @param date - The date that should be before the other one to return true
+ * @param dateToCompare - The date to compare with
+ *
+ * @returns The first date is before the second date
+ *
+ * @example
+ * // Is 10 July 1989 before 11 February 1987?
+ * const result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11))
+ * //=> false
+ */
+function isBefore(date, dateToCompare) {
+ const _date = toDate(date);
+ const _dateToCompare = toDate(dateToCompare);
+ return +_date < +_dateToCompare;
+}
+
+// Fallback for modularized imports:
+/* harmony default export */ const date_fns_isBefore = ((/* unused pure expression or super */ null && (isBefore)));
+
+;// ./node_modules/date-fns/getDaysInMonth.mjs
+
+
+
+/**
+ * @name getDaysInMonth
+ * @category Month Helpers
+ * @summary Get the number of days in a month of the given date.
+ *
+ * @description
+ * Get the number of days in a month of the given date.
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ *
+ * @param date - The given date
+ *
+ * @returns The number of days in a month
+ *
+ * @example
+ * // How many days are in February 2000?
+ * const result = getDaysInMonth(new Date(2000, 1))
+ * //=> 29
+ */
+function getDaysInMonth(date) {
+ const _date = toDate(date);
+ const year = _date.getFullYear();
+ const monthIndex = _date.getMonth();
+ const lastDayOfMonth = constructFrom(date, 0);
+ lastDayOfMonth.setFullYear(year, monthIndex + 1, 0);
+ lastDayOfMonth.setHours(0, 0, 0, 0);
+ return lastDayOfMonth.getDate();
+}
+
+// Fallback for modularized imports:
+/* harmony default export */ const date_fns_getDaysInMonth = ((/* unused pure expression or super */ null && (getDaysInMonth)));
+
+;// ./node_modules/date-fns/setMonth.mjs
+
+
+
+
+/**
+ * @name setMonth
+ * @category Month Helpers
+ * @summary Set the month to the given date.
+ *
+ * @description
+ * Set the month to the given date.
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ *
+ * @param date - The date to be changed
+ * @param month - The month index to set (0-11)
+ *
+ * @returns The new date with the month set
+ *
+ * @example
+ * // Set February to 1 September 2014:
+ * const result = setMonth(new Date(2014, 8, 1), 1)
+ * //=> Sat Feb 01 2014 00:00:00
+ */
+function setMonth(date, month) {
+ const _date = toDate(date);
+ const year = _date.getFullYear();
+ const day = _date.getDate();
+
+ const dateWithDesiredMonth = constructFrom(date, 0);
+ dateWithDesiredMonth.setFullYear(year, month, 15);
+ dateWithDesiredMonth.setHours(0, 0, 0, 0);
+ const daysInMonth = getDaysInMonth(dateWithDesiredMonth);
+ // Set the last day of the new month
+ // if the original date was the last day of the longer month
+ _date.setMonth(month, Math.min(day, daysInMonth));
+ return _date;
+}
+
+// Fallback for modularized imports:
+/* harmony default export */ const date_fns_setMonth = ((/* unused pure expression or super */ null && (setMonth)));
+
+;// ./node_modules/date-fns/set.mjs
+
+
+
+
+/**
+ * @name set
+ * @category Common Helpers
+ * @summary Set date values to a given date.
+ *
+ * @description
+ * Set date values to a given date.
+ *
+ * Sets time values to date from object `values`.
+ * A value is not set if it is undefined or null or doesn't exist in `values`.
+ *
+ * Note about bundle size: `set` does not internally use `setX` functions from date-fns but instead opts
+ * to use native `Date#setX` methods. If you use this function, you may not want to include the
+ * other `setX` functions that date-fns provides if you are concerned about the bundle size.
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ *
+ * @param date - The date to be changed
+ * @param values - The date values to be set
+ *
+ * @returns The new date with options set
+ *
+ * @example
+ * // Transform 1 September 2014 into 20 October 2015 in a single line:
+ * const result = set(new Date(2014, 8, 20), { year: 2015, month: 9, date: 20 })
+ * //=> Tue Oct 20 2015 00:00:00
+ *
+ * @example
+ * // Set 12 PM to 1 September 2014 01:23:45 to 1 September 2014 12:00:00:
+ * const result = set(new Date(2014, 8, 1, 1, 23, 45), { hours: 12 })
+ * //=> Mon Sep 01 2014 12:23:45
+ */
+
+function set(date, values) {
+ let _date = toDate(date);
+
+ // Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date
+ if (isNaN(+_date)) {
+ return constructFrom(date, NaN);
+ }
+
+ if (values.year != null) {
+ _date.setFullYear(values.year);
+ }
+
+ if (values.month != null) {
+ _date = setMonth(_date, values.month);
+ }
+
+ if (values.date != null) {
+ _date.setDate(values.date);
+ }
+
+ if (values.hours != null) {
+ _date.setHours(values.hours);
+ }
+
+ if (values.minutes != null) {
+ _date.setMinutes(values.minutes);
+ }
+
+ if (values.seconds != null) {
+ _date.setSeconds(values.seconds);
+ }
+
+ if (values.milliseconds != null) {
+ _date.setMilliseconds(values.milliseconds);
+ }
+
+ return _date;
+}
+
+// Fallback for modularized imports:
+/* harmony default export */ const date_fns_set = ((/* unused pure expression or super */ null && (set)));
+
+;// ./node_modules/date-fns/startOfToday.mjs
+
+
+/**
+ * @name startOfToday
+ * @category Day Helpers
+ * @summary Return the start of today.
+ * @pure false
+ *
+ * @description
+ * Return the start of today.
+ *
+ * @returns The start of today
+ *
+ * @example
+ * // If today is 6 October 2014:
+ * const result = startOfToday()
+ * //=> Mon Oct 6 2014 00:00:00
+ */
+function startOfToday() {
+ return startOfDay(Date.now());
+}
+
+// Fallback for modularized imports:
+/* harmony default export */ const date_fns_startOfToday = ((/* unused pure expression or super */ null && (startOfToday)));
+
+;// ./node_modules/date-fns/setYear.mjs
+
+
+
+/**
+ * @name setYear
+ * @category Year Helpers
+ * @summary Set the year to the given date.
+ *
+ * @description
+ * Set the year to the given date.
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ *
+ * @param date - The date to be changed
+ * @param year - The year of the new date
+ *
+ * @returns The new date with the year set
+ *
+ * @example
+ * // Set year 2013 to 1 September 2014:
+ * const result = setYear(new Date(2014, 8, 1), 2013)
+ * //=> Sun Sep 01 2013 00:00:00
+ */
+function setYear(date, year) {
+ const _date = toDate(date);
+
+ // Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date
+ if (isNaN(+_date)) {
+ return constructFrom(date, NaN);
+ }
+
+ _date.setFullYear(year);
+ return _date;
+}
+
+// Fallback for modularized imports:
+/* harmony default export */ const date_fns_setYear = ((/* unused pure expression or super */ null && (setYear)));
+
+;// ./node_modules/date-fns/addYears.mjs
+
+
+/**
+ * @name addYears
+ * @category Year Helpers
+ * @summary Add the specified number of years to the given date.
+ *
+ * @description
+ * Add the specified number of years to the given date.
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ *
+ * @param date - The date to be changed
+ * @param amount - The amount of years to be added.
+ *
+ * @returns The new date with the years added
+ *
+ * @example
+ * // Add 5 years to 1 September 2014:
+ * const result = addYears(new Date(2014, 8, 1), 5)
+ * //=> Sun Sep 01 2019 00:00:00
+ */
+function addYears(date, amount) {
+ return addMonths(date, amount * 12);
+}
+
+// Fallback for modularized imports:
+/* harmony default export */ const date_fns_addYears = ((/* unused pure expression or super */ null && (addYears)));
+
+;// ./node_modules/date-fns/subYears.mjs
+
+
+/**
+ * @name subYears
+ * @category Year Helpers
+ * @summary Subtract the specified number of years from the given date.
+ *
+ * @description
+ * Subtract the specified number of years from the given date.
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ *
+ * @param date - The date to be changed
+ * @param amount - The amount of years to be subtracted.
+ *
+ * @returns The new date with the years subtracted
+ *
+ * @example
+ * // Subtract 5 years from 1 September 2014:
+ * const result = subYears(new Date(2014, 8, 1), 5)
+ * //=> Tue Sep 01 2009 00:00:00
+ */
+function subYears(date, amount) {
+ return addYears(date, -amount);
+}
+
+// Fallback for modularized imports:
+/* harmony default export */ const date_fns_subYears = ((/* unused pure expression or super */ null && (subYears)));
+
+;// ./node_modules/date-fns/eachDayOfInterval.mjs
+
+
+/**
+ * The {@link eachDayOfInterval} function options.
+ */
+
+/**
+ * @name eachDayOfInterval
+ * @category Interval Helpers
+ * @summary Return the array of dates within the specified time interval.
+ *
+ * @description
+ * Return the array of dates within the specified time interval.
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ *
+ * @param interval - The interval.
+ * @param options - An object with options.
+ *
+ * @returns The array with starts of days from the day of the interval start to the day of the interval end
+ *
+ * @example
+ * // Each day between 6 October 2014 and 10 October 2014:
+ * const result = eachDayOfInterval({
+ * start: new Date(2014, 9, 6),
+ * end: new Date(2014, 9, 10)
+ * })
+ * //=> [
+ * // Mon Oct 06 2014 00:00:00,
+ * // Tue Oct 07 2014 00:00:00,
+ * // Wed Oct 08 2014 00:00:00,
+ * // Thu Oct 09 2014 00:00:00,
+ * // Fri Oct 10 2014 00:00:00
+ * // ]
+ */
+function eachDayOfInterval(interval, options) {
+ const startDate = toDate(interval.start);
+ const endDate = toDate(interval.end);
+
+ let reversed = +startDate > +endDate;
+ const endTime = reversed ? +startDate : +endDate;
+ const currentDate = reversed ? endDate : startDate;
+ currentDate.setHours(0, 0, 0, 0);
+
+ let step = options?.step ?? 1;
+ if (!step) return [];
+ if (step < 0) {
+ step = -step;
+ reversed = !reversed;
+ }
+
+ const dates = [];
+
+ while (+currentDate <= endTime) {
+ dates.push(toDate(currentDate));
+ currentDate.setDate(currentDate.getDate() + step);
+ currentDate.setHours(0, 0, 0, 0);
+ }
+
+ return reversed ? dates.reverse() : dates;
+}
+
+// Fallback for modularized imports:
+/* harmony default export */ const date_fns_eachDayOfInterval = ((/* unused pure expression or super */ null && (eachDayOfInterval)));
+
+;// ./node_modules/date-fns/eachMonthOfInterval.mjs
+
+
+/**
+ * The {@link eachMonthOfInterval} function options.
+ */
+
+/**
+ * @name eachMonthOfInterval
+ * @category Interval Helpers
+ * @summary Return the array of months within the specified time interval.
+ *
+ * @description
+ * Return the array of months within the specified time interval.
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ *
+ * @param interval - The interval
+ *
+ * @returns The array with starts of months from the month of the interval start to the month of the interval end
+ *
+ * @example
+ * // Each month between 6 February 2014 and 10 August 2014:
+ * const result = eachMonthOfInterval({
+ * start: new Date(2014, 1, 6),
+ * end: new Date(2014, 7, 10)
+ * })
+ * //=> [
+ * // Sat Feb 01 2014 00:00:00,
+ * // Sat Mar 01 2014 00:00:00,
+ * // Tue Apr 01 2014 00:00:00,
+ * // Thu May 01 2014 00:00:00,
+ * // Sun Jun 01 2014 00:00:00,
+ * // Tue Jul 01 2014 00:00:00,
+ * // Fri Aug 01 2014 00:00:00
+ * // ]
+ */
+function eachMonthOfInterval(interval, options) {
+ const startDate = toDate(interval.start);
+ const endDate = toDate(interval.end);
+
+ let reversed = +startDate > +endDate;
+ const endTime = reversed ? +startDate : +endDate;
+ const currentDate = reversed ? endDate : startDate;
+ currentDate.setHours(0, 0, 0, 0);
+ currentDate.setDate(1);
+
+ let step = options?.step ?? 1;
+ if (!step) return [];
+ if (step < 0) {
+ step = -step;
+ reversed = !reversed;
+ }
+
+ const dates = [];
+
+ while (+currentDate <= endTime) {
+ dates.push(toDate(currentDate));
+ currentDate.setMonth(currentDate.getMonth() + step);
+ }
+
+ return reversed ? dates.reverse() : dates;
+}
+
+// Fallback for modularized imports:
+/* harmony default export */ const date_fns_eachMonthOfInterval = ((/* unused pure expression or super */ null && (eachMonthOfInterval)));
+
+;// ./node_modules/date-fns/startOfMonth.mjs
+
+
+/**
+ * @name startOfMonth
+ * @category Month Helpers
+ * @summary Return the start of a month for the given date.
+ *
+ * @description
+ * Return the start of a month for the given date.
+ * The result will be in the local timezone.
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ *
+ * @param date - The original date
+ *
+ * @returns The start of a month
+ *
+ * @example
+ * // The start of a month for 2 September 2014 11:55:00:
+ * const result = startOfMonth(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Mon Sep 01 2014 00:00:00
+ */
+function startOfMonth(date) {
+ const _date = toDate(date);
+ _date.setDate(1);
+ _date.setHours(0, 0, 0, 0);
+ return _date;
+}
+
+// Fallback for modularized imports:
+/* harmony default export */ const date_fns_startOfMonth = ((/* unused pure expression or super */ null && (startOfMonth)));
+
+;// ./node_modules/date-fns/endOfMonth.mjs
+
+
+/**
+ * @name endOfMonth
+ * @category Month Helpers
+ * @summary Return the end of a month for the given date.
+ *
+ * @description
+ * Return the end of a month for the given date.
+ * The result will be in the local timezone.
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ *
+ * @param date - The original date
+ *
+ * @returns The end of a month
+ *
+ * @example
+ * // The end of a month for 2 September 2014 11:55:00:
+ * const result = endOfMonth(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Tue Sep 30 2014 23:59:59.999
+ */
+function endOfMonth(date) {
+ const _date = toDate(date);
+ const month = _date.getMonth();
+ _date.setFullYear(_date.getFullYear(), month + 1, 0);
+ _date.setHours(23, 59, 59, 999);
+ return _date;
+}
+
+// Fallback for modularized imports:
+/* harmony default export */ const date_fns_endOfMonth = ((/* unused pure expression or super */ null && (endOfMonth)));
+
+;// ./node_modules/date-fns/eachWeekOfInterval.mjs
+
+
+
+
+/**
+ * The {@link eachWeekOfInterval} function options.
+ */
+
+/**
+ * @name eachWeekOfInterval
+ * @category Interval Helpers
+ * @summary Return the array of weeks within the specified time interval.
+ *
+ * @description
+ * Return the array of weeks within the specified time interval.
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ *
+ * @param interval - The interval.
+ * @param options - An object with options.
+ *
+ * @returns The array with starts of weeks from the week of the interval start to the week of the interval end
+ *
+ * @example
+ * // Each week within interval 6 October 2014 - 23 November 2014:
+ * const result = eachWeekOfInterval({
+ * start: new Date(2014, 9, 6),
+ * end: new Date(2014, 10, 23)
+ * })
+ * //=> [
+ * // Sun Oct 05 2014 00:00:00,
+ * // Sun Oct 12 2014 00:00:00,
+ * // Sun Oct 19 2014 00:00:00,
+ * // Sun Oct 26 2014 00:00:00,
+ * // Sun Nov 02 2014 00:00:00,
+ * // Sun Nov 09 2014 00:00:00,
+ * // Sun Nov 16 2014 00:00:00,
+ * // Sun Nov 23 2014 00:00:00
+ * // ]
+ */
+function eachWeekOfInterval(interval, options) {
+ const startDate = toDate(interval.start);
+ const endDate = toDate(interval.end);
+
+ let reversed = +startDate > +endDate;
+ const startDateWeek = reversed
+ ? startOfWeek(endDate, options)
+ : startOfWeek(startDate, options);
+ const endDateWeek = reversed
+ ? startOfWeek(startDate, options)
+ : startOfWeek(endDate, options);
+
+ // Some timezones switch DST at midnight, making start of day unreliable in these timezones, 3pm is a safe bet
+ startDateWeek.setHours(15);
+ endDateWeek.setHours(15);
+
+ const endTime = +endDateWeek.getTime();
+ let currentDate = startDateWeek;
+
+ let step = options?.step ?? 1;
+ if (!step) return [];
+ if (step < 0) {
+ step = -step;
+ reversed = !reversed;
+ }
+
+ const dates = [];
+
+ while (+currentDate <= endTime) {
+ currentDate.setHours(0);
+ dates.push(toDate(currentDate));
+ currentDate = addWeeks(currentDate, step);
+ currentDate.setHours(15);
+ }
+
+ return reversed ? dates.reverse() : dates;
+}
+
+// Fallback for modularized imports:
+/* harmony default export */ const date_fns_eachWeekOfInterval = ((/* unused pure expression or super */ null && (eachWeekOfInterval)));
+
+;// ./node_modules/@wordpress/components/build-module/date-time/date/use-lilius/index.js
+/**
+ * This source is a local copy of the use-lilius library, since the original
+ * library is not actively maintained.
+ * @see https://github.com/WordPress/gutenberg/discussions/64968
+ *
+ * use-lilius@2.0.5
+ * https://github.com/Avarios/use-lilius
+ *
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2021-Present Danny Tatom
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+let Month = /*#__PURE__*/function (Month) {
+ Month[Month["JANUARY"] = 0] = "JANUARY";
+ Month[Month["FEBRUARY"] = 1] = "FEBRUARY";
+ Month[Month["MARCH"] = 2] = "MARCH";
+ Month[Month["APRIL"] = 3] = "APRIL";
+ Month[Month["MAY"] = 4] = "MAY";
+ Month[Month["JUNE"] = 5] = "JUNE";
+ Month[Month["JULY"] = 6] = "JULY";
+ Month[Month["AUGUST"] = 7] = "AUGUST";
+ Month[Month["SEPTEMBER"] = 8] = "SEPTEMBER";
+ Month[Month["OCTOBER"] = 9] = "OCTOBER";
+ Month[Month["NOVEMBER"] = 10] = "NOVEMBER";
+ Month[Month["DECEMBER"] = 11] = "DECEMBER";
+ return Month;
+}({});
+let Day = /*#__PURE__*/function (Day) {
+ Day[Day["SUNDAY"] = 0] = "SUNDAY";
+ Day[Day["MONDAY"] = 1] = "MONDAY";
+ Day[Day["TUESDAY"] = 2] = "TUESDAY";
+ Day[Day["WEDNESDAY"] = 3] = "WEDNESDAY";
+ Day[Day["THURSDAY"] = 4] = "THURSDAY";
+ Day[Day["FRIDAY"] = 5] = "FRIDAY";
+ Day[Day["SATURDAY"] = 6] = "SATURDAY";
+ return Day;
+}({});
+const inRange = (date, min, max) => (isEqual(date, min) || isAfter(date, min)) && (isEqual(date, max) || isBefore(date, max));
+const use_lilius_clearTime = date => set(date, {
+ hours: 0,
+ minutes: 0,
+ seconds: 0,
+ milliseconds: 0
+});
+const useLilius = ({
+ weekStartsOn = Day.SUNDAY,
+ viewing: initialViewing = new Date(),
+ selected: initialSelected = [],
+ numberOfMonths = 1
+} = {}) => {
+ const [viewing, setViewing] = (0,external_wp_element_namespaceObject.useState)(initialViewing);
+ const viewToday = (0,external_wp_element_namespaceObject.useCallback)(() => setViewing(startOfToday()), [setViewing]);
+ const viewMonth = (0,external_wp_element_namespaceObject.useCallback)(month => setViewing(v => setMonth(v, month)), []);
+ const viewPreviousMonth = (0,external_wp_element_namespaceObject.useCallback)(() => setViewing(v => subMonths(v, 1)), []);
+ const viewNextMonth = (0,external_wp_element_namespaceObject.useCallback)(() => setViewing(v => addMonths(v, 1)), []);
+ const viewYear = (0,external_wp_element_namespaceObject.useCallback)(year => setViewing(v => setYear(v, year)), []);
+ const viewPreviousYear = (0,external_wp_element_namespaceObject.useCallback)(() => setViewing(v => subYears(v, 1)), []);
+ const viewNextYear = (0,external_wp_element_namespaceObject.useCallback)(() => setViewing(v => addYears(v, 1)), []);
+ const [selected, setSelected] = (0,external_wp_element_namespaceObject.useState)(initialSelected.map(use_lilius_clearTime));
+ const clearSelected = () => setSelected([]);
+ const isSelected = (0,external_wp_element_namespaceObject.useCallback)(date => selected.findIndex(s => isEqual(s, date)) > -1, [selected]);
+ const select = (0,external_wp_element_namespaceObject.useCallback)((date, replaceExisting) => {
+ if (replaceExisting) {
+ setSelected(Array.isArray(date) ? date : [date]);
+ } else {
+ setSelected(selectedItems => selectedItems.concat(Array.isArray(date) ? date : [date]));
+ }
+ }, []);
+ const deselect = (0,external_wp_element_namespaceObject.useCallback)(date => setSelected(selectedItems => Array.isArray(date) ? selectedItems.filter(s => !date.map(d => d.getTime()).includes(s.getTime())) : selectedItems.filter(s => !isEqual(s, date))), []);
+ const toggle = (0,external_wp_element_namespaceObject.useCallback)((date, replaceExisting) => isSelected(date) ? deselect(date) : select(date, replaceExisting), [deselect, isSelected, select]);
+ const selectRange = (0,external_wp_element_namespaceObject.useCallback)((start, end, replaceExisting) => {
+ if (replaceExisting) {
+ setSelected(eachDayOfInterval({
+ start,
+ end
+ }));
+ } else {
+ setSelected(selectedItems => selectedItems.concat(eachDayOfInterval({
+ start,
+ end
+ })));
+ }
+ }, []);
+ const deselectRange = (0,external_wp_element_namespaceObject.useCallback)((start, end) => {
+ setSelected(selectedItems => selectedItems.filter(s => !eachDayOfInterval({
+ start,
+ end
+ }).map(d => d.getTime()).includes(s.getTime())));
+ }, []);
+ const calendar = (0,external_wp_element_namespaceObject.useMemo)(() => eachMonthOfInterval({
+ start: startOfMonth(viewing),
+ end: endOfMonth(addMonths(viewing, numberOfMonths - 1))
+ }).map(month => eachWeekOfInterval({
+ start: startOfMonth(month),
+ end: endOfMonth(month)
+ }, {
+ weekStartsOn
+ }).map(week => eachDayOfInterval({
+ start: startOfWeek(week, {
+ weekStartsOn
+ }),
+ end: endOfWeek(week, {
+ weekStartsOn
+ })
+ }))), [viewing, weekStartsOn, numberOfMonths]);
+ return {
+ clearTime: use_lilius_clearTime,
+ inRange,
+ viewing,
+ setViewing,
+ viewToday,
+ viewMonth,
+ viewPreviousMonth,
+ viewNextMonth,
+ viewYear,
+ viewPreviousYear,
+ viewNextYear,
+ selected,
+ setSelected,
+ clearSelected,
+ isSelected,
+ select,
+ deselect,
+ toggle,
+ selectRange,
+ deselectRange,
+ calendar
+ };
+};
+
+;// ./node_modules/@wordpress/components/build-module/date-time/date/styles.js
+
/**
* External dependencies
*/
@@ -56386,10 +54414,7 @@
const styles_Wrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
target: "e105ri6r5"
-} : 0)( true ? {
- name: "1khn195",
- styles: "box-sizing:border-box"
-} : 0);
+} : 0)(boxSizingReset, ";" + ( true ? "" : 0));
const Navigator = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component, true ? {
target: "e105ri6r4"
} : 0)("margin-bottom:", space(4), ";" + ( true ? "" : 0));
@@ -56401,7 +54426,7 @@
} : 0)("column-gap:", space(2), ";display:grid;grid-template-columns:0.5fr repeat( 5, 1fr ) 0.5fr;justify-items:center;row-gap:", space(2), ";" + ( true ? "" : 0));
const DayOfWeek = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
target: "e105ri6r1"
-} : 0)("color:", COLORS.gray[700], ";font-size:", config_values.fontSize, ";line-height:", config_values.fontLineHeightBase, ";&:nth-of-type( 1 ){justify-self:start;}&:nth-of-type( 7 ){justify-self:end;}" + ( true ? "" : 0));
+} : 0)("color:", COLORS.theme.gray[700], ";font-size:", config_values.fontSize, ";line-height:", config_values.fontLineHeightBase, ";&:nth-of-type( 1 ){justify-self:start;}&:nth-of-type( 7 ){justify-self:end;}" + ( true ? "" : 0));
const DayButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? {
shouldForwardProp: prop => !['column', 'isSelected', 'isToday', 'hasEvents'].includes(prop),
target: "e105ri6r0"
@@ -56411,29 +54436,51 @@
justify-self: end;
`, " ", props => props.disabled && `
pointer-events: none;
- `, " &&&{border-radius:100%;height:", space(7), ";width:", space(7), ";", props => props.isSelected && `
- background: ${COLORS.theme.accent};
- color: ${COLORS.white};
+ `, " &&&{border-radius:", config_values.radiusRound, ";height:", space(7), ";width:", space(7), ";", props => props.isSelected && `
+ background: ${COLORS.theme.accent};
+
+ &,
+ &:hover:not(:disabled, [aria-disabled=true]) {
+ color: ${COLORS.theme.accentInverted};
+ }
+
+ &:focus:not(:disabled),
+ &:focus:not(:disabled) {
+ border: ${config_values.borderWidthFocus} solid currentColor;
+ }
+
+ /* Highlight the selected day for high-contrast mode */
+ &::after {
+ content: '';
+ position: absolute;
+ pointer-events: none;
+ inset: 0;
+ border-radius: inherit;
+ border: 1px solid transparent;
+ }
`, " ", props => !props.isSelected && props.isToday && `
- background: ${COLORS.gray[200]};
+ background: ${COLORS.theme.gray[200]};
`, ";}", props => props.hasEvents && `
::before {
- background: ${props.isSelected ? COLORS.white : COLORS.theme.accent};
- border-radius: 2px;
- bottom: 2px;
+ border: 2px solid ${props.isSelected ? COLORS.theme.accentInverted : COLORS.theme.accent};
+ border-radius: ${config_values.radiusRound};
content: " ";
- height: 4px;
left: 50%;
- margin-left: -2px;
position: absolute;
- width: 4px;
+ transform: translate(-50%, 9px);
}
`, ";" + ( true ? "" : 0));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/utils.js
-/**
- * External dependencies
- */
+;// ./node_modules/@wordpress/components/build-module/date-time/utils.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
/**
@@ -56446,17 +54493,71 @@
if (typeof input === 'string') {
return new Date(input);
}
- return toDate_toDate(input);
-}
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/constants.js
+ return toDate(input);
+}
+
+/**
+ * Converts a 12-hour time to a 24-hour time.
+ * @param hours
+ * @param isPm
+ */
+function from12hTo24h(hours, isPm) {
+ return isPm ? (hours % 12 + 12) % 24 : hours % 12;
+}
+
+/**
+ * Converts a 24-hour time to a 12-hour time.
+ * @param hours
+ */
+function from24hTo12h(hours) {
+ return hours % 12 || 12;
+}
+
+/**
+ * Creates an InputControl reducer used to pad an input so that it is always a
+ * given width. For example, the hours and minutes inputs are padded to 2 so
+ * that '4' appears as '04'.
+ *
+ * @param pad How many digits the value should be.
+ */
+function buildPadInputStateReducer(pad) {
+ return (state, action) => {
+ const nextState = {
+ ...state
+ };
+ if (action.type === COMMIT || action.type === PRESS_UP || action.type === PRESS_DOWN) {
+ if (nextState.value !== undefined) {
+ nextState.value = nextState.value.toString().padStart(pad, '0');
+ }
+ }
+ return nextState;
+ };
+}
+
+/**
+ * Validates the target of a React event to ensure it is an input element and
+ * that the input is valid.
+ * @param event
+ */
+function validateInputElementTarget(event) {
+ var _ownerDocument$defaul;
+ // `instanceof` checks need to get the instance definition from the
+ // corresponding window object — therefore, the following logic makes
+ // the component work correctly even when rendered inside an iframe.
+ const HTMLInputElementInstance = (_ownerDocument$defaul = event.target?.ownerDocument.defaultView?.HTMLInputElement) !== null && _ownerDocument$defaul !== void 0 ? _ownerDocument$defaul : HTMLInputElement;
+ if (!(event.target instanceof HTMLInputElementInstance)) {
+ return false;
+ }
+ return event.target.validity.valid;
+}
+
+;// ./node_modules/@wordpress/components/build-module/date-time/constants.js
const TIMEZONELESS_FORMAT = "yyyy-MM-dd'T'HH:mm:ss";
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/date/index.js
-/**
- * External dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/date-time/date/index.js
+/**
+ * External dependencies
+ */
/**
* WordPress dependencies
@@ -56495,7 +54596,6 @@
* ```
*/
-
function DatePicker({
currentDate,
onChange,
@@ -56514,14 +54614,14 @@
viewPreviousMonth,
viewNextMonth
} = useLilius({
- selected: [startOfDay_startOfDay(date)],
- viewing: startOfDay_startOfDay(date),
+ selected: [startOfDay(date)],
+ viewing: startOfDay(date),
weekStartsOn
});
// Used to implement a roving tab index. Tracks the day that receives focus
// when the user tabs into the calendar.
- const [focusable, setFocusable] = (0,external_wp_element_namespaceObject.useState)(startOfDay_startOfDay(date));
+ const [focusable, setFocusable] = (0,external_wp_element_namespaceObject.useState)(startOfDay(date));
// Allows us to only programmatically focus() a day when focus was already
// within the calendar. This stops us stealing focus from e.g. a TimePicker
@@ -56532,9 +54632,9 @@
const [prevCurrentDate, setPrevCurrentDate] = (0,external_wp_element_namespaceObject.useState)(currentDate);
if (currentDate !== prevCurrentDate) {
setPrevCurrentDate(currentDate);
- setSelected([startOfDay_startOfDay(date)]);
- setViewing(startOfDay_startOfDay(date));
- setFocusable(startOfDay_startOfDay(date));
+ setSelected([startOfDay(date)]);
+ setViewing(startOfDay(date));
+ setFocusable(startOfDay(date));
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_Wrapper, {
className: "components-datetime__date",
@@ -56547,9 +54647,10 @@
"aria-label": (0,external_wp_i18n_namespaceObject.__)('View previous month'),
onClick: () => {
viewPreviousMonth();
- setFocusable(subMonths_subMonths(focusable, 1));
- onMonthPreviewed?.(format(subMonths_subMonths(viewing, 1), TIMEZONELESS_FORMAT));
- }
+ setFocusable(subMonths(focusable, 1));
+ onMonthPreviewed?.(format(subMonths(viewing, 1), TIMEZONELESS_FORMAT));
+ },
+ size: "compact"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(NavigatorHeading, {
level: 3,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("strong", {
@@ -56561,9 +54662,10 @@
"aria-label": (0,external_wp_i18n_namespaceObject.__)('View next month'),
onClick: () => {
viewNextMonth();
- setFocusable(addMonths_addMonths(focusable, 1));
- onMonthPreviewed?.(format(addMonths_addMonths(viewing, 1), TIMEZONELESS_FORMAT));
- }
+ setFocusable(addMonths(focusable, 1));
+ onMonthPreviewed?.(format(addMonths(viewing, 1), TIMEZONELESS_FORMAT));
+ },
+ size: "compact"
})]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Calendar, {
onFocus: () => setIsFocusWithinCalendar(true),
@@ -56578,7 +54680,7 @@
day: day,
column: index + 1,
isSelected: isSelected(day),
- isFocusable: isEqual_isEqual(day, focusable),
+ isFocusable: isEqual(day, focusable),
isFocusAllowed: isFocusWithinCalendar,
isToday: isSameDay(day, new Date()),
isInvalid: isInvalidDate ? isInvalidDate(day) : false,
@@ -56593,28 +54695,28 @@
onKeyDown: event => {
let nextFocusable;
if (event.key === 'ArrowLeft') {
- nextFocusable = addDays_addDays(day, (0,external_wp_i18n_namespaceObject.isRTL)() ? 1 : -1);
+ nextFocusable = addDays(day, (0,external_wp_i18n_namespaceObject.isRTL)() ? 1 : -1);
}
if (event.key === 'ArrowRight') {
- nextFocusable = addDays_addDays(day, (0,external_wp_i18n_namespaceObject.isRTL)() ? -1 : 1);
+ nextFocusable = addDays(day, (0,external_wp_i18n_namespaceObject.isRTL)() ? -1 : 1);
}
if (event.key === 'ArrowUp') {
nextFocusable = subWeeks(day, 1);
}
if (event.key === 'ArrowDown') {
- nextFocusable = addWeeks_addWeeks(day, 1);
+ nextFocusable = addWeeks(day, 1);
}
if (event.key === 'PageUp') {
- nextFocusable = subMonths_subMonths(day, 1);
+ nextFocusable = subMonths(day, 1);
}
if (event.key === 'PageDown') {
- nextFocusable = addMonths_addMonths(day, 1);
+ nextFocusable = addMonths(day, 1);
}
if (event.key === 'Home') {
- nextFocusable = startOfWeek_startOfWeek(day);
+ nextFocusable = startOfWeek(day);
}
if (event.key === 'End') {
- nextFocusable = startOfDay_startOfDay(endOfWeek_endOfWeek(day));
+ nextFocusable = startOfDay(endOfWeek(day));
}
if (nextFocusable) {
event.preventDefault();
@@ -56653,9 +54755,9 @@
}
// isFocusAllowed is not a dep as there is no point calling focus() on
// an already focused element.
- // eslint-disable-next-line react-hooks/exhaustive-deps
}, [isFocusable]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DayButton, {
+ __next40pxDefaultSize: true,
ref: ref,
className: "components-datetime__date__day" // Unused, for backwards compatibility.
,
@@ -56693,7 +54795,7 @@
}
/* harmony default export */ const date = (DatePicker);
-;// CONCATENATED MODULE: ./node_modules/date-fns/startOfMinute.mjs
+;// ./node_modules/date-fns/startOfMinute.mjs
/**
@@ -56717,7 +54819,7 @@
* //=> Mon Dec 01 2014 22:15:00
*/
function startOfMinute(date) {
- const _date = toDate_toDate(date);
+ const _date = toDate(date);
_date.setSeconds(0, 0);
return _date;
}
@@ -56725,198 +54827,7 @@
// Fallback for modularized imports:
/* harmony default export */ const date_fns_startOfMinute = ((/* unused pure expression or super */ null && (startOfMinute)));
-;// CONCATENATED MODULE: ./node_modules/date-fns/getDaysInMonth.mjs
-
-
-
-/**
- * @name getDaysInMonth
- * @category Month Helpers
- * @summary Get the number of days in a month of the given date.
- *
- * @description
- * Get the number of days in a month of the given date.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param date - The given date
- *
- * @returns The number of days in a month
- *
- * @example
- * // How many days are in February 2000?
- * const result = getDaysInMonth(new Date(2000, 1))
- * //=> 29
- */
-function getDaysInMonth_getDaysInMonth(date) {
- const _date = toDate_toDate(date);
- const year = _date.getFullYear();
- const monthIndex = _date.getMonth();
- const lastDayOfMonth = constructFrom_constructFrom(date, 0);
- lastDayOfMonth.setFullYear(year, monthIndex + 1, 0);
- lastDayOfMonth.setHours(0, 0, 0, 0);
- return lastDayOfMonth.getDate();
-}
-
-// Fallback for modularized imports:
-/* harmony default export */ const date_fns_getDaysInMonth = ((/* unused pure expression or super */ null && (getDaysInMonth_getDaysInMonth)));
-
-;// CONCATENATED MODULE: ./node_modules/date-fns/setMonth.mjs
-
-
-
-
-/**
- * @name setMonth
- * @category Month Helpers
- * @summary Set the month to the given date.
- *
- * @description
- * Set the month to the given date.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param date - The date to be changed
- * @param month - The month index to set (0-11)
- *
- * @returns The new date with the month set
- *
- * @example
- * // Set February to 1 September 2014:
- * const result = setMonth(new Date(2014, 8, 1), 1)
- * //=> Sat Feb 01 2014 00:00:00
- */
-function setMonth_setMonth(date, month) {
- const _date = toDate_toDate(date);
- const year = _date.getFullYear();
- const day = _date.getDate();
-
- const dateWithDesiredMonth = constructFrom_constructFrom(date, 0);
- dateWithDesiredMonth.setFullYear(year, month, 15);
- dateWithDesiredMonth.setHours(0, 0, 0, 0);
- const daysInMonth = getDaysInMonth_getDaysInMonth(dateWithDesiredMonth);
- // Set the last day of the new month
- // if the original date was the last day of the longer month
- _date.setMonth(month, Math.min(day, daysInMonth));
- return _date;
-}
-
-// Fallback for modularized imports:
-/* harmony default export */ const date_fns_setMonth = ((/* unused pure expression or super */ null && (setMonth_setMonth)));
-
-;// CONCATENATED MODULE: ./node_modules/date-fns/set.mjs
-
-
-
-
-/**
- * @name set
- * @category Common Helpers
- * @summary Set date values to a given date.
- *
- * @description
- * Set date values to a given date.
- *
- * Sets time values to date from object `values`.
- * A value is not set if it is undefined or null or doesn't exist in `values`.
- *
- * Note about bundle size: `set` does not internally use `setX` functions from date-fns but instead opts
- * to use native `Date#setX` methods. If you use this function, you may not want to include the
- * other `setX` functions that date-fns provides if you are concerned about the bundle size.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param date - The date to be changed
- * @param values - The date values to be set
- *
- * @returns The new date with options set
- *
- * @example
- * // Transform 1 September 2014 into 20 October 2015 in a single line:
- * const result = set(new Date(2014, 8, 20), { year: 2015, month: 9, date: 20 })
- * //=> Tue Oct 20 2015 00:00:00
- *
- * @example
- * // Set 12 PM to 1 September 2014 01:23:45 to 1 September 2014 12:00:00:
- * const result = set(new Date(2014, 8, 1, 1, 23, 45), { hours: 12 })
- * //=> Mon Sep 01 2014 12:23:45
- */
-
-function set_set(date, values) {
- let _date = toDate_toDate(date);
-
- // Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date
- if (isNaN(+_date)) {
- return constructFrom_constructFrom(date, NaN);
- }
-
- if (values.year != null) {
- _date.setFullYear(values.year);
- }
-
- if (values.month != null) {
- _date = setMonth_setMonth(_date, values.month);
- }
-
- if (values.date != null) {
- _date.setDate(values.date);
- }
-
- if (values.hours != null) {
- _date.setHours(values.hours);
- }
-
- if (values.minutes != null) {
- _date.setMinutes(values.minutes);
- }
-
- if (values.seconds != null) {
- _date.setSeconds(values.seconds);
- }
-
- if (values.milliseconds != null) {
- _date.setMilliseconds(values.milliseconds);
- }
-
- return _date;
-}
-
-// Fallback for modularized imports:
-/* harmony default export */ const date_fns_set = ((/* unused pure expression or super */ null && (set_set)));
-
-;// CONCATENATED MODULE: ./node_modules/date-fns/setHours.mjs
-
-
-/**
- * @name setHours
- * @category Hour Helpers
- * @summary Set the hours to the given date.
- *
- * @description
- * Set the hours to the given date.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param date - The date to be changed
- * @param hours - The hours of the new date
- *
- * @returns The new date with the hours set
- *
- * @example
- * // Set 4 hours to 1 September 2014 11:30:00:
- * const result = setHours(new Date(2014, 8, 1, 11, 30), 4)
- * //=> Mon Sep 01 2014 04:30:00
- */
-function setHours(date, hours) {
- const _date = toDate_toDate(date);
- _date.setHours(hours);
- return _date;
-}
-
-// Fallback for modularized imports:
-/* harmony default export */ const date_fns_setHours = ((/* unused pure expression or super */ null && (setHours)));
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/time/styles.js
+;// ./node_modules/@wordpress/components/build-module/date-time/time/styles.js
function time_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
@@ -56950,7 +54861,7 @@
} : 0)(baseInput, " width:", space(9), ";&&& ", Input, "{padding-right:0;}&&& ", BackdropUI, "{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0;}" + ( true ? "" : 0));
const TimeSeparator = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
target: "evcr2315"
-} : 0)("border-top:", config_values.borderWidth, " solid ", COLORS.gray[700], ";border-bottom:", config_values.borderWidth, " solid ", COLORS.gray[700], ";line-height:calc(\n\t\t", config_values.controlHeight, " - ", config_values.borderWidth, " * 2\n\t);display:inline-block;" + ( true ? "" : 0));
+} : 0)("border-top:", config_values.borderWidth, " solid ", COLORS.gray[700], ";border-bottom:", config_values.borderWidth, " solid ", COLORS.gray[700], ";font-size:", config_values.fontSize, ";line-height:calc(\n\t\t", config_values.controlHeight, " - ", config_values.borderWidth, " * 2\n\t);display:inline-block;" + ( true ? "" : 0));
const MinutesInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? {
target: "evcr2314"
} : 0)(baseInput, " width:", space(9), ";&&& ", Input, "{padding-left:0;}&&& ", BackdropUI, "{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;}" + ( true ? "" : 0));
@@ -56976,7 +54887,7 @@
styles: "text-decoration:underline dotted"
} : 0);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/time/timezone.js
+;// ./node_modules/@wordpress/components/build-module/date-time/time/timezone.js
/**
* WordPress dependencies
*/
@@ -57031,59 +54942,241 @@
};
/* harmony default export */ const timezone = (timezone_TimeZone);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/time/index.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-function from12hTo24h(hours, isPm) {
- return isPm ? (hours % 12 + 12) % 24 : hours % 12;
-}
-
-/**
- * Creates an InputControl reducer used to pad an input so that it is always a
- * given width. For example, the hours and minutes inputs are padded to 2 so
- * that '4' appears as '04'.
- *
- * @param pad How many digits the value should be.
- */
-function buildPadInputStateReducer(pad) {
- return (state, action) => {
- const nextState = {
- ...state
- };
- if (action.type === COMMIT || action.type === PRESS_UP || action.type === PRESS_DOWN) {
- if (nextState.value !== undefined) {
- nextState.value = nextState.value.toString().padStart(pad, '0');
- }
- }
- return nextState;
- };
-}
+;// ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option/component.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+function UnforwardedToggleGroupControlOption(props, ref) {
+ const {
+ label,
+ ...restProps
+ } = props;
+ const optionLabel = restProps['aria-label'] || label;
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_option_base_component, {
+ ...restProps,
+ "aria-label": optionLabel,
+ ref: ref,
+ children: label
+ });
+}
+
+/**
+ * `ToggleGroupControlOption` is a form component and is meant to be used as a
+ * child of `ToggleGroupControl`.
+ *
+ * ```jsx
+ * import {
+ * __experimentalToggleGroupControl as ToggleGroupControl,
+ * __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+ * } from '@wordpress/components';
+ *
+ * function Example() {
+ * return (
+ * <ToggleGroupControl
+ * label="my label"
+ * value="vertical"
+ * isBlock
+ * __nextHasNoMarginBottom
+ * __next40pxDefaultSize
+ * >
+ * <ToggleGroupControlOption value="horizontal" label="Horizontal" />
+ * <ToggleGroupControlOption value="vertical" label="Vertical" />
+ * </ToggleGroupControl>
+ * );
+ * }
+ * ```
+ */
+const ToggleGroupControlOption = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleGroupControlOption);
+/* harmony default export */ const toggle_group_control_option_component = (ToggleGroupControlOption);
+
+;// ./node_modules/@wordpress/components/build-module/date-time/time/time-input/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+
+
+function TimeInput({
+ value: valueProp,
+ defaultValue,
+ is12Hour,
+ label,
+ minutesProps,
+ onChange
+}) {
+ const [value = {
+ hours: new Date().getHours(),
+ minutes: new Date().getMinutes()
+ }, setValue] = useControlledValue({
+ value: valueProp,
+ onChange,
+ defaultValue
+ });
+ const dayPeriod = parseDayPeriod(value.hours);
+ const hours12Format = from24hTo12h(value.hours);
+ const buildNumberControlChangeCallback = method => {
+ return (_value, {
+ event
+ }) => {
+ if (!validateInputElementTarget(event)) {
+ return;
+ }
+
+ // We can safely assume value is a number if target is valid.
+ const numberValue = Number(_value);
+ setValue({
+ ...value,
+ [method]: method === 'hours' && is12Hour ? from12hTo24h(numberValue, dayPeriod === 'PM') : numberValue
+ });
+ };
+ };
+ const buildAmPmChangeCallback = _value => {
+ return () => {
+ if (dayPeriod === _value) {
+ return;
+ }
+ setValue({
+ ...value,
+ hours: from12hTo24h(hours12Format, _value === 'PM')
+ });
+ };
+ };
+ function parseDayPeriod(_hours) {
+ return _hours < 12 ? 'AM' : 'PM';
+ }
+ const Wrapper = label ? Fieldset : external_wp_element_namespaceObject.Fragment;
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Wrapper, {
+ children: [label && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control.VisualLabel, {
+ as: "legend",
+ children: label
+ }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, {
+ alignment: "left",
+ expanded: false,
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(TimeWrapper, {
+ className: "components-datetime__time-field components-datetime__time-field-time" // Unused, for backwards compatibility.
+ ,
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(HoursInput, {
+ className: "components-datetime__time-field-hours-input" // Unused, for backwards compatibility.
+ ,
+ label: (0,external_wp_i18n_namespaceObject.__)('Hours'),
+ hideLabelFromVision: true,
+ __next40pxDefaultSize: true,
+ value: String(is12Hour ? hours12Format : value.hours).padStart(2, '0'),
+ step: 1,
+ min: is12Hour ? 1 : 0,
+ max: is12Hour ? 12 : 23,
+ required: true,
+ spinControls: "none",
+ isPressEnterToChange: true,
+ isDragEnabled: false,
+ isShiftStepEnabled: false,
+ onChange: buildNumberControlChangeCallback('hours'),
+ __unstableStateReducer: buildPadInputStateReducer(2)
+ }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TimeSeparator, {
+ className: "components-datetime__time-separator" // Unused, for backwards compatibility.
+ ,
+ "aria-hidden": "true",
+ children: ":"
+ }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MinutesInput, {
+ className: dist_clsx('components-datetime__time-field-minutes-input',
+ // Unused, for backwards compatibility.
+ minutesProps?.className),
+ label: (0,external_wp_i18n_namespaceObject.__)('Minutes'),
+ hideLabelFromVision: true,
+ __next40pxDefaultSize: true,
+ value: String(value.minutes).padStart(2, '0'),
+ step: 1,
+ min: 0,
+ max: 59,
+ required: true,
+ spinControls: "none",
+ isPressEnterToChange: true,
+ isDragEnabled: false,
+ isShiftStepEnabled: false,
+ onChange: (...args) => {
+ buildNumberControlChangeCallback('minutes')(...args);
+ minutesProps?.onChange?.(...args);
+ },
+ __unstableStateReducer: buildPadInputStateReducer(2),
+ ...minutesProps
+ })]
+ }), is12Hour && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(toggle_group_control_component, {
+ __next40pxDefaultSize: true,
+ __nextHasNoMarginBottom: true,
+ isBlock: true,
+ label: (0,external_wp_i18n_namespaceObject.__)('Select AM or PM'),
+ hideLabelFromVision: true,
+ value: dayPeriod,
+ onChange: newValue => {
+ buildAmPmChangeCallback(newValue)();
+ },
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_option_component, {
+ value: "AM",
+ label: (0,external_wp_i18n_namespaceObject.__)('AM')
+ }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_option_component, {
+ value: "PM",
+ label: (0,external_wp_i18n_namespaceObject.__)('PM')
+ })]
+ })]
+ })]
+ });
+}
+/* harmony default export */ const time_input = ((/* unused pure expression or super */ null && (TimeInput)));
+
+;// ./node_modules/@wordpress/components/build-module/date-time/time/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+
+
+
+
+
+
+const VALID_DATE_ORDERS = ['dmy', 'mdy', 'ymd'];
/**
* TimePicker is a React component that renders a clock for time selection.
@@ -57108,7 +55201,9 @@
function TimePicker({
is12Hour,
currentTime,
- onChange
+ onChange,
+ dateOrder: dateOrderProp,
+ hideLabelFromVision = false
}) {
const [date, setDate] = (0,external_wp_element_namespaceObject.useState)(() =>
// Truncate the date at the minutes, see: #15495.
@@ -57119,47 +55214,68 @@
(0,external_wp_element_namespaceObject.useEffect)(() => {
setDate(currentTime ? startOfMinute(inputToDate(currentTime)) : new Date());
}, [currentTime]);
+ const monthOptions = [{
+ value: '01',
+ label: (0,external_wp_i18n_namespaceObject.__)('January')
+ }, {
+ value: '02',
+ label: (0,external_wp_i18n_namespaceObject.__)('February')
+ }, {
+ value: '03',
+ label: (0,external_wp_i18n_namespaceObject.__)('March')
+ }, {
+ value: '04',
+ label: (0,external_wp_i18n_namespaceObject.__)('April')
+ }, {
+ value: '05',
+ label: (0,external_wp_i18n_namespaceObject.__)('May')
+ }, {
+ value: '06',
+ label: (0,external_wp_i18n_namespaceObject.__)('June')
+ }, {
+ value: '07',
+ label: (0,external_wp_i18n_namespaceObject.__)('July')
+ }, {
+ value: '08',
+ label: (0,external_wp_i18n_namespaceObject.__)('August')
+ }, {
+ value: '09',
+ label: (0,external_wp_i18n_namespaceObject.__)('September')
+ }, {
+ value: '10',
+ label: (0,external_wp_i18n_namespaceObject.__)('October')
+ }, {
+ value: '11',
+ label: (0,external_wp_i18n_namespaceObject.__)('November')
+ }, {
+ value: '12',
+ label: (0,external_wp_i18n_namespaceObject.__)('December')
+ }];
const {
day,
month,
year,
minutes,
- hours,
- am
+ hours
} = (0,external_wp_element_namespaceObject.useMemo)(() => ({
day: format(date, 'dd'),
month: format(date, 'MM'),
year: format(date, 'yyyy'),
minutes: format(date, 'mm'),
- hours: format(date, is12Hour ? 'hh' : 'HH'),
+ hours: format(date, 'HH'),
am: format(date, 'a')
- }), [date, is12Hour]);
+ }), [date]);
const buildNumberControlChangeCallback = method => {
const callback = (value, {
event
}) => {
- var _ownerDocument$defaul;
- // `instanceof` checks need to get the instance definition from the
- // corresponding window object — therefore, the following logic makes
- // the component work correctly even when rendered inside an iframe.
- const HTMLInputElementInstance = (_ownerDocument$defaul = event.target?.ownerDocument.defaultView?.HTMLInputElement) !== null && _ownerDocument$defaul !== void 0 ? _ownerDocument$defaul : HTMLInputElement;
- if (!(event.target instanceof HTMLInputElementInstance)) {
- return;
- }
- if (!event.target.validity.valid) {
+ if (!validateInputElementTarget(event)) {
return;
}
// We can safely assume value is a number if target is valid.
- let numberValue = Number(value);
-
- // If the 12-hour format is being used and the 'PM' period is
- // selected, then the incoming value (which ranges 1-12) should be
- // increased by 12 to match the expected 24-hour format.
- if (method === 'hours' && is12Hour) {
- numberValue = from12hTo24h(numberValue, am === 'PM');
- }
- const newDate = set_set(date, {
+ const numberValue = Number(value);
+ const newDate = set(date, {
[method]: numberValue
});
setDate(newDate);
@@ -57167,17 +55283,17 @@
};
return callback;
};
- function buildAmPmChangeCallback(value) {
- return () => {
- if (am === value) {
- return;
- }
- const parsedHours = parseInt(hours, 10);
- const newDate = setHours(date, from12hTo24h(parsedHours, value === 'PM'));
- setDate(newDate);
- onChange?.(format(newDate, TIMEZONELESS_FORMAT));
- };
- }
+ const onTimeInputChangeCallback = ({
+ hours: newHours,
+ minutes: newMinutes
+ }) => {
+ const newDate = set(date, {
+ hours: newHours,
+ minutes: newMinutes
+ });
+ setDate(newDate);
+ onChange?.(format(newDate, TIMEZONELESS_FORMAT));
+ };
const dayField = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DayInput, {
className: "components-datetime__time-field components-datetime__time-field-day" // Unused, for backwards compatibility.
,
@@ -57194,7 +55310,7 @@
isDragEnabled: false,
isShiftStepEnabled: false,
onChange: buildNumberControlChangeCallback('date')
- });
+ }, "day");
const monthField = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MonthSelectWrapper, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(select_control, {
className: "components-datetime__time-field components-datetime__time-field-month" // Unused, for backwards compatibility.
@@ -57204,55 +55320,54 @@
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
value: month,
- options: [{
- value: '01',
- label: (0,external_wp_i18n_namespaceObject.__)('January')
- }, {
- value: '02',
- label: (0,external_wp_i18n_namespaceObject.__)('February')
- }, {
- value: '03',
- label: (0,external_wp_i18n_namespaceObject.__)('March')
- }, {
- value: '04',
- label: (0,external_wp_i18n_namespaceObject.__)('April')
- }, {
- value: '05',
- label: (0,external_wp_i18n_namespaceObject.__)('May')
- }, {
- value: '06',
- label: (0,external_wp_i18n_namespaceObject.__)('June')
- }, {
- value: '07',
- label: (0,external_wp_i18n_namespaceObject.__)('July')
- }, {
- value: '08',
- label: (0,external_wp_i18n_namespaceObject.__)('August')
- }, {
- value: '09',
- label: (0,external_wp_i18n_namespaceObject.__)('September')
- }, {
- value: '10',
- label: (0,external_wp_i18n_namespaceObject.__)('October')
- }, {
- value: '11',
- label: (0,external_wp_i18n_namespaceObject.__)('November')
- }, {
- value: '12',
- label: (0,external_wp_i18n_namespaceObject.__)('December')
- }],
+ options: monthOptions,
onChange: value => {
- const newDate = setMonth_setMonth(date, Number(value) - 1);
+ const newDate = setMonth(date, Number(value) - 1);
setDate(newDate);
onChange?.(format(newDate, TIMEZONELESS_FORMAT));
}
})
+ }, "month");
+ const yearField = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(YearInput, {
+ className: "components-datetime__time-field components-datetime__time-field-year" // Unused, for backwards compatibility.
+ ,
+ label: (0,external_wp_i18n_namespaceObject.__)('Year'),
+ hideLabelFromVision: true,
+ __next40pxDefaultSize: true,
+ value: year,
+ step: 1,
+ min: 1,
+ max: 9999,
+ required: true,
+ spinControls: "none",
+ isPressEnterToChange: true,
+ isDragEnabled: false,
+ isShiftStepEnabled: false,
+ onChange: buildNumberControlChangeCallback('year'),
+ __unstableStateReducer: buildPadInputStateReducer(4)
+ }, "year");
+ const defaultDateOrder = is12Hour ? 'mdy' : 'dmy';
+ const dateOrder = dateOrderProp && VALID_DATE_ORDERS.includes(dateOrderProp) ? dateOrderProp : defaultDateOrder;
+ const fields = dateOrder.split('').map(field => {
+ switch (field) {
+ case 'd':
+ return dayField;
+ case 'm':
+ return monthField;
+ case 'y':
+ return yearField;
+ default:
+ return null;
+ }
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(time_styles_Wrapper, {
className: "components-datetime__time" // Unused, for backwards compatibility.
,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Fieldset, {
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control.VisualLabel, {
+ children: [hideLabelFromVision ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, {
+ as: "legend",
+ children: (0,external_wp_i18n_namespaceObject.__)('Time')
+ }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control.VisualLabel, {
as: "legend",
className: "components-datetime__time-legend" // Unused, for backwards compatibility.
,
@@ -57260,107 +55375,62 @@
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, {
className: "components-datetime__time-wrapper" // Unused, for backwards compatibility.
,
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(TimeWrapper, {
- className: "components-datetime__time-field components-datetime__time-field-time" // Unused, for backwards compatibility.
- ,
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(HoursInput, {
- className: "components-datetime__time-field-hours-input" // Unused, for backwards compatibility.
- ,
- label: (0,external_wp_i18n_namespaceObject.__)('Hours'),
- hideLabelFromVision: true,
- __next40pxDefaultSize: true,
- value: hours,
- step: 1,
- min: is12Hour ? 1 : 0,
- max: is12Hour ? 12 : 23,
- required: true,
- spinControls: "none",
- isPressEnterToChange: true,
- isDragEnabled: false,
- isShiftStepEnabled: false,
- onChange: buildNumberControlChangeCallback('hours'),
- __unstableStateReducer: buildPadInputStateReducer(2)
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TimeSeparator, {
- className: "components-datetime__time-separator" // Unused, for backwards compatibility.
- ,
- "aria-hidden": "true",
- children: ":"
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MinutesInput, {
- className: "components-datetime__time-field-minutes-input" // Unused, for backwards compatibility.
- ,
- label: (0,external_wp_i18n_namespaceObject.__)('Minutes'),
- hideLabelFromVision: true,
- __next40pxDefaultSize: true,
- value: minutes,
- step: 1,
- min: 0,
- max: 59,
- required: true,
- spinControls: "none",
- isPressEnterToChange: true,
- isDragEnabled: false,
- isShiftStepEnabled: false,
- onChange: buildNumberControlChangeCallback('minutes'),
- __unstableStateReducer: buildPadInputStateReducer(2)
- })]
- }), is12Hour && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(button_group, {
- className: "components-datetime__time-field components-datetime__time-field-am-pm" // Unused, for backwards compatibility.
- ,
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
- className: "components-datetime__time-am-button" // Unused, for backwards compatibility.
- ,
- variant: am === 'AM' ? 'primary' : 'secondary',
- __next40pxDefaultSize: true,
- onClick: buildAmPmChangeCallback('AM'),
- children: (0,external_wp_i18n_namespaceObject.__)('AM')
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
- className: "components-datetime__time-pm-button" // Unused, for backwards compatibility.
- ,
- variant: am === 'PM' ? 'primary' : 'secondary',
- __next40pxDefaultSize: true,
- onClick: buildAmPmChangeCallback('PM'),
- children: (0,external_wp_i18n_namespaceObject.__)('PM')
- })]
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TimeInput, {
+ value: {
+ hours: Number(hours),
+ minutes: Number(minutes)
+ },
+ is12Hour: is12Hour,
+ onChange: onTimeInputChangeCallback
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, {}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(timezone, {})]
})]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Fieldset, {
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control.VisualLabel, {
+ children: [hideLabelFromVision ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, {
+ as: "legend",
+ children: (0,external_wp_i18n_namespaceObject.__)('Date')
+ }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control.VisualLabel, {
as: "legend",
className: "components-datetime__time-legend" // Unused, for backwards compatibility.
,
children: (0,external_wp_i18n_namespaceObject.__)('Date')
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, {
+ }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(h_stack_component, {
className: "components-datetime__time-wrapper" // Unused, for backwards compatibility.
,
- children: [is12Hour ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
- children: [monthField, dayField]
- }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
- children: [dayField, monthField]
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(YearInput, {
- className: "components-datetime__time-field components-datetime__time-field-year" // Unused, for backwards compatibility.
- ,
- label: (0,external_wp_i18n_namespaceObject.__)('Year'),
- hideLabelFromVision: true,
- __next40pxDefaultSize: true,
- value: year,
- step: 1,
- min: 1,
- max: 9999,
- required: true,
- spinControls: "none",
- isPressEnterToChange: true,
- isDragEnabled: false,
- isShiftStepEnabled: false,
- onChange: buildNumberControlChangeCallback('year'),
- __unstableStateReducer: buildPadInputStateReducer(4)
- })]
+ children: fields
})]
})]
});
}
+
+/**
+ * A component to input a time.
+ *
+ * Values are passed as an object in 24-hour format (`{ hours: number, minutes: number }`).
+ *
+ * ```jsx
+ * import { TimePicker } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyTimeInput = () => {
+ * const [ time, setTime ] = useState( { hours: 13, minutes: 30 } );
+ *
+ * return (
+ * <TimePicker.TimeInput
+ * value={ time }
+ * onChange={ setTime }
+ * label="Time"
+ * />
+ * );
+ * };
+ * ```
+ */
+TimePicker.TimeInput = TimeInput;
+Object.assign(TimePicker.TimeInput, {
+ displayName: 'TimePicker.TimeInput'
+});
/* harmony default export */ const date_time_time = (TimePicker);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/date-time/styles.js
+;// ./node_modules/@wordpress/components/build-module/date-time/date-time/styles.js
function date_time_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
@@ -57378,20 +55448,19 @@
styles: "box-sizing:border-box"
} : 0);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/date-time/index.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-
+;// ./node_modules/@wordpress/components/build-module/date-time/date-time/index.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
@@ -57401,6 +55470,7 @@
function UnforwardedDateTimePicker({
currentDate,
is12Hour,
+ dateOrder,
isInvalidDate,
onMonthPreviewed = date_time_noop,
onChange,
@@ -57415,7 +55485,8 @@
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(date_time_time, {
currentTime: currentDate,
onChange: onChange,
- is12Hour: is12Hour
+ is12Hour: is12Hour,
+ dateOrder: dateOrder
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(date, {
currentDate: currentDate,
onChange: onChange,
@@ -57453,7 +55524,7 @@
const DateTimePicker = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedDateTimePicker);
/* harmony default export */ const date_time = (DateTimePicker);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/index.js
+;// ./node_modules/@wordpress/components/build-module/date-time/index.js
/**
* Internal dependencies
*/
@@ -57463,7 +55534,7 @@
/* harmony default export */ const build_module_date_time = (date_time);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dimension-control/sizes.js
+;// ./node_modules/@wordpress/components/build-module/dimension-control/sizes.js
/**
* Sizes
*
@@ -57507,30 +55578,41 @@
slug: 'xlarge'
}]);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dimension-control/index.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
-
-
-
-
+;// ./node_modules/@wordpress/components/build-module/dimension-control/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+
+
+const dimension_control_CONTEXT_VALUE = {
+ BaseControl: {
+ // Temporary during deprecation grace period: Overrides the underlying `__associatedWPComponentName`
+ // via the context system to override the value set by SelectControl.
+ _overrides: {
+ __associatedWPComponentName: 'DimensionControl'
+ }
+ }
+};
/**
* `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.
*
- * This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+ * @deprecated
*
* ```jsx
* import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
@@ -57541,6 +55623,8 @@
*
* return (
* <DimensionControl
+ * __next40pxDefaultSize
+ * __nextHasNoMarginBottom
* label={ 'Padding' }
* icon={ 'desktop' }
* onChange={ ( value ) => setPaddingSize( value ) }
@@ -57553,6 +55637,7 @@
function DimensionControl(props) {
const {
__next40pxDefaultSize = false,
+ __nextHasNoMarginBottom = false,
label,
value,
sizes = dimension_control_sizes,
@@ -57560,6 +55645,15 @@
onChange,
className = ''
} = props;
+ external_wp_deprecated_default()('wp.components.DimensionControl', {
+ since: '6.7',
+ version: '7.0'
+ });
+ maybeWarnDeprecated36pxSize({
+ componentName: 'DimensionControl',
+ __next40pxDefaultSize,
+ size: undefined
+ });
const onChangeSpacingSize = val => {
const theSize = findSizeBySlug(sizes, val);
if (!theSize || value === theSize.slug) {
@@ -57586,19 +55680,24 @@
icon: icon
}), label]
});
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(select_control, {
- __next40pxDefaultSize: __next40pxDefaultSize,
- className: dist_clsx(className, 'block-editor-dimension-control'),
- label: selectLabel,
- hideLabelFromVision: false,
- value: value,
- onChange: onChangeSpacingSize,
- options: formatSizesAsOptions(sizes)
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ContextSystemProvider, {
+ value: dimension_control_CONTEXT_VALUE,
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(select_control, {
+ __next40pxDefaultSize: __next40pxDefaultSize,
+ __shouldNotWarnDeprecated36pxSize: true,
+ __nextHasNoMarginBottom: __nextHasNoMarginBottom,
+ className: dist_clsx(className, 'block-editor-dimension-control'),
+ label: selectLabel,
+ hideLabelFromVision: false,
+ value: value,
+ onChange: onChangeSpacingSize,
+ options: formatSizesAsOptions(sizes)
+ })
});
}
/* harmony default export */ const dimension_control = (DimensionControl);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/disabled/styles/disabled-styles.js
+;// ./node_modules/@wordpress/components/build-module/disabled/styles/disabled-styles.js
function disabled_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
* External dependencies
@@ -57609,7 +55708,7 @@
styles: "position:relative;pointer-events:none;&::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;}*{pointer-events:none;}"
} : 0;
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/disabled/index.js
+;// ./node_modules/@wordpress/components/build-module/disabled/index.js
/**
* WordPress dependencies
*/
@@ -57644,7 +55743,14 @@
* const MyDisabled = () => {
* const [ isDisabled, setIsDisabled ] = useState( true );
*
- * let input = <TextControl label="Input" onChange={ () => {} } />;
+ * let input = (
+ * <TextControl
+ * __next40pxDefaultSize
+ * __nextHasNoMarginBottom
+ * label="Input"
+ * onChange={ () => {} }
+ * />
+ * );
* if ( isDisabled ) {
* input = <Disabled>{ input }</Disabled>;
* }
@@ -57686,11 +55792,10 @@
Disabled.Consumer = Consumer;
/* harmony default export */ const disabled = (Disabled);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/disclosure/index.js
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
+;// ./node_modules/@wordpress/components/build-module/disclosure/index.js
+/**
+ * External dependencies
+ */
/**
@@ -57724,22 +55829,20 @@
const disclosure_DisclosureContent = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedDisclosureContent);
/* harmony default export */ const disclosure = ((/* unused pure expression or super */ null && (disclosure_DisclosureContent)));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/draggable/index.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
-
+;// ./node_modules/@wordpress/components/build-module/draggable/index.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
const dragImageClass = 'components-draggable__invisible-drag-image';
const cloneWrapperClass = 'components-draggable__clone';
@@ -57798,7 +55901,7 @@
__experimentalDragComponent: dragComponent
}) {
const dragComponentRef = (0,external_wp_element_namespaceObject.useRef)(null);
- const cleanup = (0,external_wp_element_namespaceObject.useRef)(() => {});
+ const cleanupRef = (0,external_wp_element_namespaceObject.useRef)(() => {});
/**
* Removes the element clone, resets cursor, and removes drag listener.
@@ -57807,7 +55910,7 @@
*/
function end(event) {
event.preventDefault();
- cleanup.current();
+ cleanupRef.current();
if (onDragEnd) {
onDragEnd(event);
}
@@ -57921,7 +56024,7 @@
if (onDragStart) {
onDragStart(event);
}
- cleanup.current = () => {
+ cleanupRef.current = () => {
// Remove drag clone.
if (cloneWrapper && cloneWrapper.parentNode) {
cloneWrapper.parentNode.removeChild(cloneWrapper);
@@ -57936,7 +56039,7 @@
};
}
(0,external_wp_element_namespaceObject.useEffect)(() => () => {
- cleanup.current();
+ cleanupRef.current();
}, []);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [children({
@@ -57954,7 +56057,7 @@
}
/* harmony default export */ const draggable = (Draggable);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/upload.js
+;// ./node_modules/@wordpress/icons/build-module/library/upload.js
/**
* WordPress dependencies
*/
@@ -57969,100 +56072,24 @@
});
/* harmony default export */ const library_upload = (upload);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/drop-zone/index.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-
-
-/**
- * Internal dependencies
- */
-
-
-
-const drop_zone_backdrop = {
- hidden: {
- opacity: 0
- },
- show: {
- opacity: 1,
- transition: {
- type: 'tween',
- duration: 0.2,
- delay: 0,
- delayChildren: 0.1
- }
- },
- exit: {
- opacity: 0,
- transition: {
- duration: 0.2,
- delayChildren: 0
- }
- }
-};
-const foreground = {
- hidden: {
- opacity: 0,
- scale: 0.9
- },
- show: {
- opacity: 1,
- scale: 1,
- transition: {
- duration: 0.1
- }
- },
- exit: {
- opacity: 0,
- scale: 0.9
- }
-};
-function DropIndicator({
- label
-}) {
- const disableMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)();
- const children = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(motion.div, {
- variants: drop_zone_backdrop,
- initial: disableMotion ? 'show' : 'hidden',
- animate: "show",
- exit: disableMotion ? 'show' : 'exit',
- className: "components-drop-zone__content"
- // Without this, when this div is shown,
- // Safari calls a onDropZoneLeave causing a loop because of this bug
- // https://bugs.webkit.org/show_bug.cgi?id=66547
- ,
- style: {
- pointerEvents: 'none'
- },
- children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(motion.div, {
- variants: foreground,
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, {
- icon: library_upload,
- className: "components-drop-zone__content-icon"
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
- className: "components-drop-zone__content-text",
- children: label ? label : (0,external_wp_i18n_namespaceObject.__)('Drop files to upload')
- })]
- })
- });
- if (disableMotion) {
- return children;
- }
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AnimatePresence, {
- children: children
- });
-}
+;// ./node_modules/@wordpress/components/build-module/drop-zone/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+
+
+/**
+ * Internal dependencies
+ */
/**
* `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.
@@ -58093,19 +56120,23 @@
onFilesDrop,
onHTMLDrop,
onDrop,
+ isEligible = () => true,
...restProps
}) {
const [isDraggingOverDocument, setIsDraggingOverDocument] = (0,external_wp_element_namespaceObject.useState)();
const [isDraggingOverElement, setIsDraggingOverElement] = (0,external_wp_element_namespaceObject.useState)();
- const [type, setType] = (0,external_wp_element_namespaceObject.useState)();
+ const [isActive, setIsActive] = (0,external_wp_element_namespaceObject.useState)();
const ref = (0,external_wp_compose_namespaceObject.__experimentalUseDropZone)({
onDrop(event) {
- const files = event.dataTransfer ? (0,external_wp_dom_namespaceObject.getFilesFromDataTransfer)(event.dataTransfer) : [];
- const html = event.dataTransfer?.getData('text/html');
+ if (!event.dataTransfer) {
+ return;
+ }
+ const files = (0,external_wp_dom_namespaceObject.getFilesFromDataTransfer)(event.dataTransfer);
+ const html = event.dataTransfer.getData('text/html');
/**
* From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
- * The order of the checks is important to recognise the HTML drop.
+ * The order of the checks is important to recognize the HTML drop.
*/
if (html && onHTMLDrop) {
onHTMLDrop(html);
@@ -58117,25 +56148,29 @@
},
onDragStart(event) {
setIsDraggingOverDocument(true);
- let _type = 'default';
+ if (!event.dataTransfer) {
+ return;
+ }
/**
* From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
- * The order of the checks is important to recognise the HTML drop.
+ * The order of the checks is important to recognize the HTML drop.
*/
- if (event.dataTransfer?.types.includes('text/html')) {
- _type = 'html';
+ if (event.dataTransfer.types.includes('text/html')) {
+ setIsActive(!!onHTMLDrop);
} else if (
// Check for the types because sometimes the files themselves
// are only available on drop.
- event.dataTransfer?.types.includes('Files') || (event.dataTransfer ? (0,external_wp_dom_namespaceObject.getFilesFromDataTransfer)(event.dataTransfer) : []).length > 0) {
- _type = 'file';
- }
- setType(_type);
+ event.dataTransfer.types.includes('Files') || (0,external_wp_dom_namespaceObject.getFilesFromDataTransfer)(event.dataTransfer).length > 0) {
+ setIsActive(!!onFilesDrop);
+ } else {
+ setIsActive(!!onDrop && isEligible(event.dataTransfer));
+ }
},
onDragEnd() {
+ setIsDraggingOverElement(false);
setIsDraggingOverDocument(false);
- setType(undefined);
+ setIsActive(undefined);
},
onDragEnter() {
setIsDraggingOverElement(true);
@@ -58145,23 +56180,32 @@
}
});
const classes = dist_clsx('components-drop-zone', className, {
- 'is-active': (isDraggingOverDocument || isDraggingOverElement) && (type === 'file' && onFilesDrop || type === 'html' && onHTMLDrop || type === 'default' && onDrop),
+ 'is-active': isActive,
'is-dragging-over-document': isDraggingOverDocument,
- 'is-dragging-over-element': isDraggingOverElement,
- [`is-dragging-${type}`]: !!type
+ 'is-dragging-over-element': isDraggingOverElement
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
...restProps,
ref: ref,
className: classes,
- children: isDraggingOverElement && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DropIndicator, {
- label: label
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
+ className: "components-drop-zone__content",
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
+ className: "components-drop-zone__content-inner",
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, {
+ icon: library_upload,
+ className: "components-drop-zone__content-icon"
+ }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
+ className: "components-drop-zone__content-text",
+ children: label ? label : (0,external_wp_i18n_namespaceObject.__)('Drop files to upload')
+ })]
+ })
})
});
}
/* harmony default export */ const drop_zone = (DropZoneComponent);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/drop-zone/provider.js
+;// ./node_modules/@wordpress/components/build-module/drop-zone/provider.js
/**
* WordPress dependencies
*/
@@ -58176,7 +56220,7 @@
return children;
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/swatch.js
+;// ./node_modules/@wordpress/icons/build-module/library/swatch.js
/**
* WordPress dependencies
*/
@@ -58191,7 +56235,7 @@
});
/* harmony default export */ const library_swatch = (swatch);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/duotone-picker/utils.js
+;// ./node_modules/@wordpress/components/build-module/duotone-picker/utils.js
/**
* External dependencies
*/
@@ -58284,7 +56328,7 @@
}) => color);
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/duotone-picker/duotone-swatch.js
+;// ./node_modules/@wordpress/components/build-module/duotone-picker/duotone-swatch.js
/**
* WordPress dependencies
*/
@@ -58308,20 +56352,17 @@
}
/* harmony default export */ const duotone_swatch = (DuotoneSwatch);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/duotone-picker/color-list-picker/index.js
-/**
- * WordPress dependencies
- */
-
-
-
-
-/**
- * Internal dependencies
- */
-
-
-
+;// ./node_modules/@wordpress/components/build-module/duotone-picker/color-list-picker/index.js
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -58342,23 +56383,19 @@
const contentId = `${idRoot}__content`;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
+ __next40pxDefaultSize: true,
className: "components-color-list-picker__swatch-button",
+ id: labelId,
onClick: () => setIsOpen(prev => !prev),
"aria-expanded": isOpen,
"aria-controls": contentId,
- children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, {
- justify: "flex-start",
- spacing: 2,
- children: [value ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_indicator, {
- colorValue: value,
- className: "components-color-list-picker__swatch-color"
- }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
- icon: library_swatch
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
- id: labelId,
- children: label
- })]
- })
+ icon: value ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_indicator, {
+ colorValue: value,
+ className: "components-color-list-picker__swatch-color"
+ }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
+ icon: library_swatch
+ }),
+ text: label
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
role: "group",
id: contentId,
@@ -58403,7 +56440,7 @@
}
/* harmony default export */ const color_list_picker = (ColorListPicker);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/duotone-picker/custom-duotone-bar.js
+;// ./node_modules/@wordpress/components/build-module/duotone-picker/custom-duotone-bar.js
/**
* Internal dependencies
*/
@@ -58431,22 +56468,21 @@
});
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/duotone-picker/duotone-picker.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/duotone-picker/duotone-picker.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -58542,40 +56578,20 @@
}
}, slug);
});
- let metaProps;
- if (asButtons) {
- metaProps = {
- asButtons: true
- };
- } else {
- const _metaProps = {
- asButtons: false,
- loop
- };
- if (ariaLabel) {
- metaProps = {
- ..._metaProps,
- 'aria-label': ariaLabel
- };
- } else if (ariaLabelledby) {
- metaProps = {
- ..._metaProps,
- 'aria-labelledby': ariaLabelledby
- };
- } else {
- metaProps = {
- ..._metaProps,
- 'aria-label': (0,external_wp_i18n_namespaceObject.__)('Custom color picker.')
- };
- }
- }
+ const {
+ metaProps,
+ labelProps
+ } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);
const options = unsetable ? [unsetOption, ...duotoneOptions] : duotoneOptions;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker, {
...otherProps,
...metaProps,
+ ...labelProps,
options: options,
actions: !!clearable && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.ButtonAction, {
onClick: () => onChange(undefined),
+ accessibleWhenDisabled: true,
+ disabled: !value,
children: (0,external_wp_i18n_namespaceObject.__)('Clear')
}),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, {
@@ -58611,21 +56627,20 @@
}
/* harmony default export */ const duotone_picker = (DuotonePicker);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/external-link/index.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/external-link/index.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
function UnforwardedExternalLink(props, ref) {
const {
@@ -58649,29 +56664,25 @@
props.onClick(event);
}
};
- return (
- /*#__PURE__*/
- /* eslint-disable react/jsx-no-target-blank */
- (0,external_ReactJSXRuntime_namespaceObject.jsxs)("a", {
- ...additionalProps,
- className: classes,
- href: href,
- onClick: onClickHandler,
- target: "_blank",
- rel: optimizedRel,
- ref: ref,
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
- className: "components-external-link__contents",
- children: children
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
- className: "components-external-link__icon",
- "aria-label": /* translators: accessibility text */
- (0,external_wp_i18n_namespaceObject.__)('(opens in a new tab)'),
- children: "\u2197"
- })]
- })
- /* eslint-enable react/jsx-no-target-blank */
- );
+ return /*#__PURE__*/ /* eslint-disable react/jsx-no-target-blank */(0,external_ReactJSXRuntime_namespaceObject.jsxs)("a", {
+ ...additionalProps,
+ className: classes,
+ href: href,
+ onClick: onClickHandler,
+ target: "_blank",
+ rel: optimizedRel,
+ ref: ref,
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
+ className: "components-external-link__contents",
+ children: children
+ }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
+ className: "components-external-link__icon",
+ "aria-label": /* translators: accessibility text */
+ (0,external_wp_i18n_namespaceObject.__)('(opens in a new tab)'),
+ children: "\u2197"
+ })]
+ })
+ /* eslint-enable react/jsx-no-target-blank */;
}
/**
@@ -58688,7 +56699,7 @@
const ExternalLink = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedExternalLink);
/* harmony default export */ const external_link = (ExternalLink);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/utils.js
+;// ./node_modules/@wordpress/components/build-module/focal-point-picker/utils.js
const INITIAL_BOUNDS = {
width: 200,
height: 170
@@ -58729,7 +56740,7 @@
return Math.round(fraction * 100);
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/styles/focal-point-picker-style.js
+;// ./node_modules/@wordpress/components/build-module/focal-point-picker/styles/focal-point-picker-style.js
function focal_point_picker_style_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
@@ -58751,7 +56762,7 @@
} : 0);
const MediaContainer = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
target: "eeew7dm7"
-} : 0)("align-items:center;border-radius:", config_values.radiusBlockUi, ";cursor:pointer;display:inline-flex;justify-content:center;margin:auto;position:relative;height:100%;&:after{border-radius:inherit;bottom:0;box-shadow:inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );content:'';left:0;pointer-events:none;position:absolute;right:0;top:0;}img,video{border-radius:inherit;box-sizing:border-box;display:block;height:auto;margin:0;max-height:100%;max-width:100%;pointer-events:none;user-select:none;width:auto;}" + ( true ? "" : 0));
+} : 0)("align-items:center;border-radius:", config_values.radiusSmall, ";cursor:pointer;display:inline-flex;justify-content:center;margin:auto;position:relative;height:100%;&:after{border-radius:inherit;bottom:0;box-shadow:inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );content:'';left:0;pointer-events:none;position:absolute;right:0;top:0;}img,video{border-radius:inherit;box-sizing:border-box;display:block;height:auto;margin:0;max-height:100%;max-width:100%;pointer-events:none;user-select:none;width:auto;}" + ( true ? "" : 0));
const MediaPlaceholder = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
target: "eeew7dm6"
} : 0)("background:", COLORS.gray[100], ";border-radius:inherit;box-sizing:border-box;height:", INITIAL_BOUNDS.height, "px;max-width:280px;min-width:", INITIAL_BOUNDS.width, "px;width:100%;" + ( true ? "" : 0));
@@ -58806,16 +56817,15 @@
styles: "width:1px;top:1px;bottom:1px"
} : 0);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/controls.js
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/focal-point-picker/controls.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
@@ -58824,7 +56834,6 @@
const controls_noop = () => {};
function FocalPointPickerControls({
__nextHasNoMarginBottom,
- __next40pxDefaultSize,
hasHelpText,
onChange = controls_noop,
point = {
@@ -58852,14 +56861,12 @@
hasHelpText: hasHelpText,
gap: 4,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FocalPointUnitControl, {
- __next40pxDefaultSize: __next40pxDefaultSize,
label: (0,external_wp_i18n_namespaceObject.__)('Left'),
"aria-label": (0,external_wp_i18n_namespaceObject.__)('Focal point left position'),
value: [valueX, '%'].join(''),
onChange: next => handleChange(next, 'x'),
dragDirection: "e"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FocalPointUnitControl, {
- __next40pxDefaultSize: __next40pxDefaultSize,
label: (0,external_wp_i18n_namespaceObject.__)('Top'),
"aria-label": (0,external_wp_i18n_namespaceObject.__)('Focal point top position'),
value: [valueY, '%'].join(''),
@@ -58870,6 +56877,7 @@
}
function FocalPointUnitControl(props) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(focal_point_picker_style_StyledUnitControl, {
+ __next40pxDefaultSize: true,
className: "focal-point-picker__controls-position-unit-control",
labelPosition: "top",
max: TEXTCONTROL_MAX,
@@ -58882,15 +56890,19 @@
});
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/styles/focal-point-style.js
-
-/**
- * External dependencies
+;// ./node_modules/@wordpress/components/build-module/focal-point-picker/styles/focal-point-style.js
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
*/
const PointerCircle = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
target: "e19snlhg0"
-} : 0)("background-color:transparent;cursor:grab;height:40px;margin:-20px 0 0 -20px;position:absolute;user-select:none;width:40px;will-change:transform;z-index:10000;background:rgba( 255, 255, 255, 0.4 );border:1px solid rgba( 255, 255, 255, 0.4 );border-radius:50%;backdrop-filter:blur( 16px ) saturate( 180% );box-shadow:rgb( 0 0 0 / 10% ) 0px 0px 8px;@media not ( prefers-reduced-motion ){transition:transform 100ms linear;}", ({
+} : 0)("background-color:transparent;cursor:grab;height:40px;margin:-20px 0 0 -20px;position:absolute;user-select:none;width:40px;will-change:transform;z-index:10000;background:rgba( 255, 255, 255, 0.4 );border:1px solid rgba( 255, 255, 255, 0.4 );border-radius:", config_values.radiusRound, ";backdrop-filter:blur( 16px ) saturate( 180% );box-shadow:rgb( 0 0 0 / 10% ) 0px 0px 8px;@media not ( prefers-reduced-motion ){transition:transform 100ms linear;}", ({
isDragging
}) => isDragging && `
box-shadow: rgb( 0 0 0 / 12% ) 0px 0px 10px;
@@ -58898,7 +56910,7 @@
cursor: grabbing;
`, ";" + ( true ? "" : 0));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/focal-point.js
+;// ./node_modules/@wordpress/components/build-module/focal-point-picker/focal-point.js
/**
* Internal dependencies
*/
@@ -58924,11 +56936,10 @@
});
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/grid.js
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/focal-point-picker/grid.js
+/**
+ * Internal dependencies
+ */
function FocalPointPickerGrid({
@@ -58962,7 +56973,7 @@
});
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/media.js
+;// ./node_modules/@wordpress/components/build-module/focal-point-picker/media.js
/**
* External dependencies
*/
@@ -59011,23 +57022,22 @@
});
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/index.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/focal-point-picker/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -59072,6 +57082,7 @@
* return (
* <>
* <FocalPointPicker
+ * __nextHasNoMarginBottom
* url={ url }
* value={ focalPoint }
* onDragStart={ setFocalPoint }
@@ -59086,7 +57097,6 @@
*/
function FocalPointPicker({
__nextHasNoMarginBottom,
- __next40pxDefaultSize = false,
autoPlay = true,
className,
help,
@@ -59251,6 +57261,7 @@
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(base_control, {
...restProps,
__nextHasNoMarginBottom: __nextHasNoMarginBottom,
+ __associatedWPComponentName: "FocalPointPicker",
label: label,
id: id,
help: help,
@@ -59284,7 +57295,6 @@
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FocalPointPickerControls, {
__nextHasNoMarginBottom: __nextHasNoMarginBottom,
- __next40pxDefaultSize: __next40pxDefaultSize,
hasHelpText: !!help,
point: {
x,
@@ -59298,7 +57308,7 @@
}
/* harmony default export */ const focal_point_picker = (FocalPointPicker);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focusable-iframe/index.js
+;// ./node_modules/@wordpress/components/build-module/focusable-iframe/index.js
/**
* WordPress dependencies
*/
@@ -59327,29 +57337,7 @@
});
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/settings.js
-/**
- * WordPress dependencies
- */
-
-
-
-const settings = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_primitives_namespaceObject.SVG, {
- xmlns: "http://www.w3.org/2000/svg",
- viewBox: "0 0 24 24",
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
- d: "m19 7.5h-7.628c-.3089-.87389-1.1423-1.5-2.122-1.5-.97966 0-1.81309.62611-2.12197 1.5h-2.12803v1.5h2.12803c.30888.87389 1.14231 1.5 2.12197 1.5.9797 0 1.8131-.62611 2.122-1.5h7.628z"
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
- d: "m19 15h-2.128c-.3089-.8739-1.1423-1.5-2.122-1.5s-1.8131.6261-2.122 1.5h-7.628v1.5h7.628c.3089.8739 1.1423 1.5 2.122 1.5s1.8131-.6261 2.122-1.5h2.128z"
- })]
-});
-/* harmony default export */ const library_settings = (settings);
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/font-size-picker/utils.js
-/**
- * WordPress dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/font-size-picker/utils.js
/**
* Internal dependencies
*/
@@ -59388,7 +57376,7 @@
return areAllSizesSameUnit ? firstUnit : null;
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/font-size-picker/styles.js
+;// ./node_modules/@wordpress/components/build-module/font-size-picker/styles.js
function font_size_picker_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
@@ -59406,8 +57394,8 @@
const styles_Container = /*#__PURE__*/emotion_styled_base_browser_esm("fieldset", true ? {
target: "e8tqeku4"
} : 0)( true ? {
- name: "1t1ytme",
- styles: "border:0;margin:0;padding:0"
+ name: "k2q51s",
+ styles: "border:0;margin:0;padding:0;display:contents"
} : 0);
const styles_Header = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component, true ? {
target: "e8tqeku3"
@@ -59422,7 +57410,7 @@
target: "e8tqeku0"
} : 0)("color:", COLORS.gray[700], ";" + ( true ? "" : 0));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/font-size-picker/font-size-picker-select.js
+;// ./node_modules/@wordpress/components/build-module/font-size-picker/font-size-picker-select.js
/**
* WordPress dependencies
*/
@@ -59440,20 +57428,14 @@
name: (0,external_wp_i18n_namespaceObject.__)('Default'),
value: undefined
};
-const CUSTOM_OPTION = {
- key: 'custom',
- name: (0,external_wp_i18n_namespaceObject.__)('Custom')
-};
const FontSizePickerSelect = props => {
var _options$find;
const {
__next40pxDefaultSize,
fontSizes,
value,
- disableCustomFontSizes,
size,
- onChange,
- onSelectCustom
+ onChange
} = props;
const areAllSizesSameUnit = !!getCommonSizeUnit(fontSizes);
const options = [DEFAULT_OPTION, ...fontSizes.map(fontSize => {
@@ -59470,12 +57452,13 @@
key: fontSize.slug,
name: fontSize.name || fontSize.slug,
value: fontSize.size,
- __experimentalHint: hint
- };
- }), ...(disableCustomFontSizes ? [] : [CUSTOM_OPTION])];
- const selectedOption = value ? (_options$find = options.find(option => option.value === value)) !== null && _options$find !== void 0 ? _options$find : CUSTOM_OPTION : DEFAULT_OPTION;
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CustomSelectControl, {
+ hint
+ };
+ })];
+ const selectedOption = (_options$find = options.find(option => option.value === value)) !== null && _options$find !== void 0 ? _options$find : DEFAULT_OPTION;
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(custom_select_control, {
__next40pxDefaultSize: __next40pxDefaultSize,
+ __shouldNotWarnDeprecated36pxSize: true,
className: "components-font-size-picker__select",
label: (0,external_wp_i18n_namespaceObject.__)('Font size'),
hideLabelFromVision: true,
@@ -59484,75 +57467,18 @@
(0,external_wp_i18n_namespaceObject.__)('Currently selected font size: %s'), selectedOption.name),
options: options,
value: selectedOption,
- __experimentalShowSelectedHint: true,
+ showSelectedHint: true,
onChange: ({
selectedItem
}) => {
- if (selectedItem === CUSTOM_OPTION) {
- onSelectCustom();
- } else {
- onChange(selectedItem.value);
- }
+ onChange(selectedItem.value);
},
size: size
});
};
/* harmony default export */ const font_size_picker_select = (FontSizePickerSelect);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option/component.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
-
-
-function UnforwardedToggleGroupControlOption(props, ref) {
- const {
- label,
- ...restProps
- } = props;
- const optionLabel = restProps['aria-label'] || label;
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_option_base_component, {
- ...restProps,
- "aria-label": optionLabel,
- ref: ref,
- children: label
- });
-}
-
-/**
- * `ToggleGroupControlOption` is a form component and is meant to be used as a
- * child of `ToggleGroupControl`.
- *
- * ```jsx
- * import {
- * __experimentalToggleGroupControl as ToggleGroupControl,
- * __experimentalToggleGroupControlOption as ToggleGroupControlOption,
- * } from '@wordpress/components';
- *
- * function Example() {
- * return (
- * <ToggleGroupControl label="my label" value="vertical" isBlock>
- * <ToggleGroupControlOption value="horizontal" label="Horizontal" />
- * <ToggleGroupControlOption value="vertical" label="Vertical" />
- * </ToggleGroupControl>
- * );
- * }
- * ```
- */
-const ToggleGroupControlOption = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleGroupControlOption);
-/* harmony default export */ const toggle_group_control_option_component = (ToggleGroupControlOption);
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/font-size-picker/constants.js
+;// ./node_modules/@wordpress/components/build-module/font-size-picker/constants.js
/**
* WordPress dependencies
*/
@@ -59579,7 +57505,7 @@
*/
const T_SHIRT_NAMES = [(0,external_wp_i18n_namespaceObject.__)('Small'), (0,external_wp_i18n_namespaceObject.__)('Medium'), (0,external_wp_i18n_namespaceObject.__)('Large'), (0,external_wp_i18n_namespaceObject.__)('Extra Large'), (0,external_wp_i18n_namespaceObject.__)('Extra Extra Large')];
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/font-size-picker/font-size-picker-toggle-group.js
+;// ./node_modules/@wordpress/components/build-module/font-size-picker/font-size-picker-toggle-group.js
/**
* WordPress dependencies
*/
@@ -59602,6 +57528,7 @@
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_component, {
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: __next40pxDefaultSize,
+ __shouldNotWarnDeprecated36pxSize: true,
label: (0,external_wp_i18n_namespaceObject.__)('Font size'),
hideLabelFromVision: true,
value: value,
@@ -59618,7 +57545,7 @@
};
/* harmony default export */ const font_size_picker_toggle_group = (FontSizePickerToggleGroup);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/font-size-picker/index.js
+;// ./node_modules/@wordpress/components/build-module/font-size-picker/index.js
/**
* External dependencies
*/
@@ -59647,6 +57574,7 @@
const DEFAULT_UNITS = ['px', 'em', 'rem', 'vw', 'vh'];
+const MAX_TOGGLE_GROUP_SIZES = 5;
const UnforwardedFontSizePicker = (props, ref) => {
const {
__next40pxDefaultSize = false,
@@ -59663,26 +57591,37 @@
const units = useCustomUnits({
availableUnits: unitsProp
});
- const shouldUseSelectControl = fontSizes.length > 5;
const selectedFontSize = fontSizes.find(fontSize => fontSize.size === value);
const isCustomValue = !!value && !selectedFontSize;
- const [showCustomValueControl, setShowCustomValueControl] = (0,external_wp_element_namespaceObject.useState)(!disableCustomFontSizes && isCustomValue);
+
+ // Initially request a custom picker if the value is not from the predef list.
+ const [userRequestedCustom, setUserRequestedCustom] = (0,external_wp_element_namespaceObject.useState)(isCustomValue);
+ let currentPickerType;
+ if (!disableCustomFontSizes && userRequestedCustom) {
+ // While showing the custom value picker, switch back to predef only if
+ // `disableCustomFontSizes` is set to `true`.
+ currentPickerType = 'custom';
+ } else {
+ currentPickerType = fontSizes.length > MAX_TOGGLE_GROUP_SIZES ? 'select' : 'togglegroup';
+ }
const headerHint = (0,external_wp_element_namespaceObject.useMemo)(() => {
- if (showCustomValueControl) {
- return (0,external_wp_i18n_namespaceObject.__)('Custom');
- }
- if (!shouldUseSelectControl) {
- if (selectedFontSize) {
- return selectedFontSize.name || T_SHIRT_NAMES[fontSizes.indexOf(selectedFontSize)];
- }
- return '';
- }
- const commonUnit = getCommonSizeUnit(fontSizes);
- if (commonUnit) {
- return `(${commonUnit})`;
+ switch (currentPickerType) {
+ case 'custom':
+ return (0,external_wp_i18n_namespaceObject.__)('Custom');
+ case 'togglegroup':
+ if (selectedFontSize) {
+ return selectedFontSize.name || T_SHIRT_NAMES[fontSizes.indexOf(selectedFontSize)];
+ }
+ break;
+ case 'select':
+ const commonUnit = getCommonSizeUnit(fontSizes);
+ if (commonUnit) {
+ return `(${commonUnit})`;
+ }
+ break;
}
return '';
- }, [showCustomValueControl, shouldUseSelectControl, selectedFontSize, fontSizes]);
+ }, [currentPickerType, selectedFontSize, fontSizes]);
if (fontSizes.length === 0 && disableCustomFontSizes) {
return null;
}
@@ -59694,6 +57633,11 @@
const [valueQuantity, valueUnit] = parseQuantityAndUnitFromRawValue(value, units);
const isValueUnitRelative = !!valueUnit && ['em', 'rem', 'vw', 'vh'].includes(valueUnit);
const isDisabled = value === undefined;
+ maybeWarnDeprecated36pxSize({
+ componentName: 'FontSizePicker',
+ __next40pxDefaultSize,
+ size
+ });
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_Container, {
ref: ref,
className: "components-font-size-picker",
@@ -59710,17 +57654,15 @@
children: headerHint
})]
}), !disableCustomFontSizes && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(HeaderToggle, {
- label: showCustomValueControl ? (0,external_wp_i18n_namespaceObject.__)('Use size preset') : (0,external_wp_i18n_namespaceObject.__)('Set custom size'),
+ label: currentPickerType === 'custom' ? (0,external_wp_i18n_namespaceObject.__)('Use size preset') : (0,external_wp_i18n_namespaceObject.__)('Set custom size'),
icon: library_settings,
- onClick: () => {
- setShowCustomValueControl(!showCustomValueControl);
- },
- isPressed: showCustomValueControl,
+ onClick: () => setUserRequestedCustom(!userRequestedCustom),
+ isPressed: currentPickerType === 'custom',
size: "small"
})]
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
- children: [!!fontSizes.length && shouldUseSelectControl && !showCustomValueControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(font_size_picker_select, {
+ children: [currentPickerType === 'select' && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(font_size_picker_select, {
__next40pxDefaultSize: __next40pxDefaultSize,
fontSizes: fontSizes,
value: value,
@@ -59733,8 +57675,8 @@
onChange?.(hasUnits ? newValue : Number(newValue), fontSizes.find(fontSize => fontSize.size === newValue));
}
},
- onSelectCustom: () => setShowCustomValueControl(true)
- }), !shouldUseSelectControl && !showCustomValueControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(font_size_picker_toggle_group, {
+ onSelectCustom: () => setUserRequestedCustom(true)
+ }), currentPickerType === 'togglegroup' && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(font_size_picker_toggle_group, {
fontSizes: fontSizes,
value: value,
__next40pxDefaultSize: __next40pxDefaultSize,
@@ -59746,17 +57688,19 @@
onChange?.(hasUnits ? newValue : Number(newValue), fontSizes.find(fontSize => fontSize.size === newValue));
}
}
- }), !disableCustomFontSizes && showCustomValueControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(flex_component, {
+ }), currentPickerType === 'custom' && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(flex_component, {
className: "components-font-size-picker__custom-size-control",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_item_component, {
isBlock: true,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(unit_control, {
__next40pxDefaultSize: __next40pxDefaultSize,
+ __shouldNotWarnDeprecated36pxSize: true,
label: (0,external_wp_i18n_namespaceObject.__)('Custom'),
labelPosition: "top",
hideLabelFromVision: true,
value: value,
onChange: newValue => {
+ setUserRequestedCustom(true);
if (newValue === undefined) {
onChange?.(undefined);
} else {
@@ -59775,6 +57719,7 @@
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(range_control, {
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: __next40pxDefaultSize,
+ __shouldNotWarnDeprecated36pxSize: true,
className: "components-font-size-picker__custom-input",
label: (0,external_wp_i18n_namespaceObject.__)('Custom Size'),
hideLabelFromVision: true,
@@ -59782,6 +57727,7 @@
initialPosition: fallbackFontSize,
withInputField: false,
onChange: newValue => {
+ setUserRequestedCustom(true);
if (newValue === undefined) {
onChange?.(undefined);
} else if (hasUnits) {
@@ -59798,7 +57744,7 @@
}), withReset && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_item_component, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Button, {
disabled: isDisabled,
- __experimentalIsFocusable: true,
+ accessibleWhenDisabled: true,
onClick: () => {
onChange?.(undefined);
},
@@ -59815,26 +57761,27 @@
const FontSizePicker = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedFontSizePicker);
/* harmony default export */ const font_size_picker = (FontSizePicker);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-file-upload/index.js
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
-
-
-/**
- * FormFileUpload is a component that allows users to select files from their local device.
+;// ./node_modules/@wordpress/components/build-module/form-file-upload/index.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+/**
+ * FormFileUpload allows users to select files from their local device.
*
* ```jsx
* import { FormFileUpload } from '@wordpress/components';
*
* const MyFormFileUpload = () => (
* <FormFileUpload
+ * __next40pxDefaultSize
* accept="image/*"
* onChange={ ( event ) => console.log( event.currentTarget.files ) }
* >
@@ -59843,6 +57790,7 @@
* );
* ```
*/
+
function FormFileUpload({
accept,
children,
@@ -59856,6 +57804,14 @@
const openFileDialog = () => {
ref.current?.click();
};
+ if (!render) {
+ maybeWarnDeprecated36pxSize({
+ componentName: 'FormFileUpload',
+ __next40pxDefaultSize: props.__next40pxDefaultSize,
+ // @ts-expect-error - We don't "officially" support all Button props but this likely happens.
+ size: props.size
+ });
+ }
const ui = render ? render({
openFileDialog
}) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
@@ -59863,6 +57819,12 @@
...props,
children: children
});
+ // @todo: Temporary fix a bug that prevents Chromium browsers from selecting ".heic" files
+ // from the file upload. See https://core.trac.wordpress.org/ticket/62268#comment:4.
+ // This can be removed once the Chromium fix is in the stable channel.
+ // Prevent Safari from adding "image/heic" and "image/heif" to the accept attribute.
+ const isSafari = globalThis.window?.navigator.userAgent.includes('Safari') && !globalThis.window?.navigator.userAgent.includes('Chrome') && !globalThis.window?.navigator.userAgent.includes('Chromium');
+ const compatAccept = !isSafari && !!accept?.includes('image/*') ? `${accept}, image/heic, image/heif` : accept;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "components-form-file-upload",
children: [ui, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("input", {
@@ -59872,7 +57834,7 @@
style: {
display: 'none'
},
- accept: accept,
+ accept: compatAccept,
onChange: onChange,
onClick: onClick,
"data-testid": "form-file-upload-input"
@@ -59881,43 +57843,22 @@
}
/* harmony default export */ const form_file_upload = (FormFileUpload);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-toggle/index.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/form-toggle/index.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
const form_toggle_noop = () => {};
-
-/**
- * FormToggle switches a single setting on or off.
- *
- * ```jsx
- * import { FormToggle } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const MyFormToggle = () => {
- * const [ isChecked, setChecked ] = useState( true );
- *
- * return (
- * <FormToggle
- * checked={ isChecked }
- * onChange={ () => setChecked( ( state ) => ! state ) }
- * />
- * );
- * };
- * ```
- */
-function FormToggle(props, ref) {
+function UnforwardedFormToggle(props, ref) {
const {
className,
checked,
@@ -59948,25 +57889,45 @@
})]
});
}
-/* harmony default export */ const form_toggle = ((0,external_wp_element_namespaceObject.forwardRef)(FormToggle));
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-token-field/token.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-/**
- * Internal dependencies
- */
-
+
+/**
+ * FormToggle switches a single setting on or off.
+ *
+ * ```jsx
+ * import { FormToggle } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyFormToggle = () => {
+ * const [ isChecked, setChecked ] = useState( true );
+ *
+ * return (
+ * <FormToggle
+ * checked={ isChecked }
+ * onChange={ () => setChecked( ( state ) => ! state ) }
+ * />
+ * );
+ * };
+ * ```
+ */
+const FormToggle = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedFormToggle);
+/* harmony default export */ const form_toggle = (FormToggle);
+
+;// ./node_modules/@wordpress/components/build-module/form-token-field/token.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -59997,7 +57958,7 @@
value
});
const transformedValue = displayTransform(value);
- const termPositionAndCount = (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */
+ const termPositionAndCount = (0,external_wp_i18n_namespaceObject.sprintf)(/* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */
(0,external_wp_i18n_namespaceObject.__)('%1$s (%2$s of %3$s)'), transformedValue, termPosition, termsCount);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("span", {
className: tokenClasses,
@@ -60016,8 +57977,12 @@
})]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
className: "components-form-token-field__remove-token",
+ size: "small",
icon: close_small,
- onClick: !disabled ? onClick : undefined,
+ onClick: !disabled ? onClick : undefined
+ // Disable reason: Even when FormTokenField itself is accessibly disabled, token reset buttons shouldn't be in the tab sequence.
+ // eslint-disable-next-line no-restricted-syntax
+ ,
disabled: disabled,
label: messages.remove,
"aria-describedby": `components-form-token-field__token-text-${instanceId}`
@@ -60025,7 +57990,7 @@
});
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-token-field/styles.js
+;// ./node_modules/@wordpress/components/build-module/form-token-field/styles.js
/**
* External dependencies
@@ -60047,14 +58012,15 @@
target: "ehq8nmi0"
} : 0)("padding:7px;", boxSizingReset, " ", deprecatedPaddings, ";" + ( true ? "" : 0));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-token-field/index.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
+;// ./node_modules/@wordpress/components/build-module/form-token-field/index.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
@@ -60121,6 +58087,18 @@
__nextHasNoMarginBottom = false,
tokenizeOnBlur = false
} = useDeprecated36pxDefaultSizeProp(props);
+ if (!__nextHasNoMarginBottom) {
+ external_wp_deprecated_default()('Bottom margin styles for wp.components.FormTokenField', {
+ since: '6.7',
+ version: '7.0',
+ hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.'
+ });
+ }
+ maybeWarnDeprecated36pxSize({
+ componentName: 'FormTokenField',
+ size: undefined,
+ __next40pxDefaultSize
+ });
const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(FormTokenField);
// We reset to these initial values again in the onBlur
@@ -60148,15 +58126,12 @@
}
// TODO: updateSuggestions() should first be refactored so its actual deps are clearer.
- // eslint-disable-next-line react-hooks/exhaustive-deps
}, [suggestions, prevSuggestions, value, prevValue]);
(0,external_wp_element_namespaceObject.useEffect)(() => {
updateSuggestions();
- // eslint-disable-next-line react-hooks/exhaustive-deps
}, [incompleteTokenValue]);
(0,external_wp_element_namespaceObject.useEffect)(() => {
updateSuggestions();
- // eslint-disable-next-line react-hooks/exhaustive-deps
}, [__experimentalAutoSelectFirstMatch]);
if (disabled && isActive) {
setIsActive(false);
@@ -60489,7 +58464,7 @@
}
}
if (inputHasMinimumChars) {
- const message = hasMatchingSuggestions ? (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of results. */
+ const message = hasMatchingSuggestions ? (0,external_wp_i18n_namespaceObject.sprintf)(/* translators: %d: number of results. */
(0,external_wp_i18n_namespaceObject._n)('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', matchingSuggestions.length), matchingSuggestions.length) : (0,external_wp_i18n_namespaceObject.__)('No results.');
debouncedSpeak(message, 'assertive');
}
@@ -60604,7 +58579,7 @@
}
/* harmony default export */ const form_token_field = (FormTokenField);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/guide/icons.js
+;// ./node_modules/@wordpress/components/build-module/guide/icons.js
/**
* WordPress dependencies
*/
@@ -60622,7 +58597,7 @@
})
});
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/guide/page-control.js
+;// ./node_modules/@wordpress/components/build-module/guide/page-control.js
/**
* WordPress dependencies
*/
@@ -60648,8 +58623,9 @@
// Set aria-current="step" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current
"aria-current": page === currentPage ? 'step' : undefined,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
+ size: "small",
icon: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PageControlIcon, {}),
- "aria-label": (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: 1: current page number 2: total number of pages */
+ "aria-label": (0,external_wp_i18n_namespaceObject.sprintf)(/* translators: 1: current page number 2: total number of pages */
(0,external_wp_i18n_namespaceObject.__)('Page %1$d of %2$d'), page + 1, numberOfPages),
onClick: () => setCurrentPage(page)
}, page)
@@ -60657,23 +58633,22 @@
});
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/guide/index.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/guide/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -60788,16 +58763,19 @@
className: "components-guide__back-button",
variant: "tertiary",
onClick: goBack,
+ __next40pxDefaultSize: true,
children: (0,external_wp_i18n_namespaceObject.__)('Previous')
}), canGoForward && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
className: "components-guide__forward-button",
variant: "primary",
onClick: goForward,
+ __next40pxDefaultSize: true,
children: (0,external_wp_i18n_namespaceObject.__)('Next')
}), !canGoForward && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
className: "components-guide__finish-button",
variant: "primary",
onClick: onFinish,
+ __next40pxDefaultSize: true,
children: finishButtonText
})]
})]
@@ -60806,7 +58784,7 @@
}
/* harmony default export */ const guide = (Guide);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/guide/page.js
+;// ./node_modules/@wordpress/components/build-module/guide/page.js
/**
* WordPress dependencies
*/
@@ -60829,7 +58807,7 @@
});
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/button/deprecated.js
+;// ./node_modules/@wordpress/components/build-module/button/deprecated.js
/**
* External dependencies
*/
@@ -60868,151 +58846,16 @@
}
/* harmony default export */ const deprecated = ((0,external_wp_element_namespaceObject.forwardRef)(UnforwardedIconButton));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/item-group/item/hook.js
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
-
-
-
-
-function useItem(props) {
- const {
- as: asProp,
- className,
- onClick,
- role = 'listitem',
- size: sizeProp,
- ...otherProps
- } = useContextSystem(props, 'Item');
- const {
- spacedAround,
- size: contextSize
- } = useItemGroupContext();
- const size = sizeProp || contextSize;
- const as = asProp || (typeof onClick !== 'undefined' ? 'button' : 'div');
- const cx = useCx();
- const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx((as === 'button' || as === 'a') && unstyledButton(as), itemSizes[size] || itemSizes.medium, item, spacedAround && styles_spacedAround, className), [as, className, cx, size, spacedAround]);
- const wrapperClassName = cx(itemWrapper);
- return {
- as,
- className: classes,
- onClick,
- wrapperClassName,
- role,
- ...otherProps
- };
-}
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/item-group/item/component.js
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-
-
-
-
-function UnconnectedItem(props, forwardedRef) {
- const {
- role,
- wrapperClassName,
- ...otherProps
- } = useItem(props);
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
- role: role,
- className: wrapperClassName,
- children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, {
- ...otherProps,
- ref: forwardedRef
- })
- });
-}
-
-/**
- * `Item` is used in combination with `ItemGroup` to display a list of items
- * grouped and styled together.
- *
- * ```jsx
- * import {
- * __experimentalItemGroup as ItemGroup,
- * __experimentalItem as Item,
- * } from '@wordpress/components';
- *
- * function Example() {
- * return (
- * <ItemGroup>
- * <Item>Code</Item>
- * <Item>is</Item>
- * <Item>Poetry</Item>
- * </ItemGroup>
- * );
- * }
- * ```
- */
-const component_Item = contextConnect(UnconnectedItem, 'Item');
-/* harmony default export */ const item_component = (component_Item);
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/input-prefix-wrapper.js
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-
-
-function UnconnectedInputControlPrefixWrapper(props, forwardedRef) {
- const derivedProps = useContextSystem(props, 'InputControlPrefixWrapper');
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, {
- marginBottom: 0,
- ...derivedProps,
- ref: forwardedRef
- });
-}
-
-/**
- * A convenience wrapper for the `prefix` when you want to apply
- * standard padding in accordance with the size variant.
- *
- * ```jsx
- * import {
- * __experimentalInputControl as InputControl,
- * __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
- * } from '@wordpress/components';
- *
- * <InputControl
- * prefix={<InputControlPrefixWrapper>@</InputControlPrefixWrapper>}
- * />
- * ```
- */
-const InputControlPrefixWrapper = contextConnect(UnconnectedInputControlPrefixWrapper, 'InputControlPrefixWrapper');
-/* harmony default export */ const input_prefix_wrapper = (InputControlPrefixWrapper);
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/keyboard-shortcuts/index.js
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
-
+;// ./node_modules/@wordpress/components/build-module/keyboard-shortcuts/index.js
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
function KeyboardShortcut({
target,
@@ -61088,22 +58931,21 @@
}
/* harmony default export */ const keyboard_shortcuts = (KeyboardShortcuts);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/menu-group/index.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/menu-group/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
/**
* `MenuGroup` wraps a series of related `MenuItem` components into a common
@@ -61151,22 +58993,21 @@
}
/* harmony default export */ const menu_group = (MenuGroup);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/menu-item/index.js
-/**
- * External dependencies
- */
-
-
-
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/menu-item/index.js
+/**
+ * External dependencies
+ */
+
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
@@ -61205,6 +59046,7 @@
});
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(build_module_button, {
+ __next40pxDefaultSize: true,
ref: ref
// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked
,
@@ -61251,16 +59093,15 @@
const MenuItem = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedMenuItem);
/* harmony default export */ const menu_item = (MenuItem);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/menu-items-choice/index.js
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/menu-items-choice/index.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
const menu_items_choice_noop = () => {};
@@ -61330,7 +59171,7 @@
}
/* harmony default export */ const menu_items_choice = (MenuItemsChoice);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigable-container/tabbable.js
+;// ./node_modules/@wordpress/components/build-module/navigable-container/tabbable.js
/**
* External dependencies
*/
@@ -61420,11 +59261,11 @@
const TabbableContainer = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTabbableContainer);
/* harmony default export */ const tabbable = (TabbableContainer);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/constants.js
+;// ./node_modules/@wordpress/components/build-module/navigation/constants.js
const ROOT_MENU = 'root';
const SEARCH_FOCUS_DELAY = 100;
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/context.js
+;// ./node_modules/@wordpress/components/build-module/navigation/context.js
/**
* WordPress dependencies
*/
@@ -61457,7 +59298,7 @@
});
const useNavigationContext = () => (0,external_wp_element_namespaceObject.useContext)(NavigationContext);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/styles/navigation-styles.js
+;// ./node_modules/@wordpress/components/build-module/navigation/styles/navigation-styles.js
function navigation_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
@@ -61510,11 +59351,11 @@
} : 0)("min-height:", space(12), ";align-items:center;color:inherit;display:flex;justify-content:space-between;margin-bottom:", space(2), ";padding:", () => (0,external_wp_i18n_namespaceObject.isRTL)() ? `${space(1)} ${space(4)} ${space(1)} ${space(2)}` : `${space(1)} ${space(2)} ${space(1)} ${space(4)}`, ";" + ( true ? "" : 0));
const ItemBaseUI = /*#__PURE__*/emotion_styled_base_browser_esm("li", true ? {
target: "eeiismy4"
-} : 0)("border-radius:2px;color:inherit;margin-bottom:0;>button,>a.components-button,>a{width:100%;color:inherit;opacity:0.7;padding:", space(2), " ", space(4), ";", rtl({
+} : 0)("border-radius:", config_values.radiusSmall, ";color:inherit;margin-bottom:0;>button,>a.components-button,>a{width:100%;color:inherit;opacity:0.7;padding:", space(2), " ", space(4), ";", rtl({
textAlign: 'left'
}, {
textAlign: 'right'
-}), " &:hover,&:focus:not( [aria-disabled='true'] ):active,&:active:not( [aria-disabled='true'] ):active{color:inherit;opacity:1;}}&.is-active{background-color:", COLORS.theme.accent, ";color:", COLORS.white, ";>button,>a{color:", COLORS.white, ";opacity:1;}}>svg path{color:", COLORS.gray[600], ";}" + ( true ? "" : 0));
+}), " &:hover,&:focus:not( [aria-disabled='true'] ):active,&:active:not( [aria-disabled='true'] ):active{color:inherit;opacity:1;}}&.is-active{background-color:", COLORS.theme.accent, ";color:", COLORS.theme.accentInverted, ";>button,.components-button:hover,>a{color:", COLORS.theme.accentInverted, ";opacity:1;}}>svg path{color:", COLORS.gray[600], ";}" + ( true ? "" : 0));
const ItemUI = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
target: "eeiismy3"
} : 0)("display:flex;align-items:center;height:auto;min-height:40px;margin:0;padding:", space(1.5), " ", space(4), ";font-weight:400;line-height:20px;width:100%;color:inherit;opacity:0.7;" + ( true ? "" : 0));
@@ -61523,12 +59364,12 @@
} : 0)("display:flex;margin-right:", space(2), ";" + ( true ? "" : 0));
const ItemBadgeUI = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
target: "eeiismy1"
-} : 0)("margin-left:", () => (0,external_wp_i18n_namespaceObject.isRTL)() ? '0' : space(2), ";margin-right:", () => (0,external_wp_i18n_namespaceObject.isRTL)() ? space(2) : '0', ";display:inline-flex;padding:", space(1), " ", space(3), ";border-radius:2px;@keyframes fade-in{from{opacity:0;}to{opacity:1;}}@media not ( prefers-reduced-motion ){animation:fade-in 250ms ease-out;}" + ( true ? "" : 0));
+} : 0)("margin-left:", () => (0,external_wp_i18n_namespaceObject.isRTL)() ? '0' : space(2), ";margin-right:", () => (0,external_wp_i18n_namespaceObject.isRTL)() ? space(2) : '0', ";display:inline-flex;padding:", space(1), " ", space(3), ";border-radius:", config_values.radiusSmall, ";@keyframes fade-in{from{opacity:0;}to{opacity:1;}}@media not ( prefers-reduced-motion ){animation:fade-in 250ms ease-out;}" + ( true ? "" : 0));
const ItemTitleUI = /*#__PURE__*/emotion_styled_base_browser_esm(text_component, true ? {
target: "eeiismy0"
} : 0)(() => (0,external_wp_i18n_namespaceObject.isRTL)() ? 'margin-left: auto;' : 'margin-right: auto;', " font-size:14px;line-height:20px;color:inherit;" + ( true ? "" : 0));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/use-navigation-tree-nodes.js
+;// ./node_modules/@wordpress/components/build-module/navigation/use-navigation-tree-nodes.js
/**
* WordPress dependencies
*/
@@ -61563,7 +59404,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/use-create-navigation-tree.js
+;// ./node_modules/@wordpress/components/build-module/navigation/use-create-navigation-tree.js
/**
* WordPress dependencies
*/
@@ -61654,15 +59495,16 @@
};
};
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/index.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
+;// ./node_modules/@wordpress/components/build-module/navigation/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
@@ -61730,6 +59572,11 @@
const [slideOrigin, setSlideOrigin] = (0,external_wp_element_namespaceObject.useState)();
const navigationTree = useCreateNavigationTree();
const defaultSlideOrigin = (0,external_wp_i18n_namespaceObject.isRTL)() ? 'right' : 'left';
+ external_wp_deprecated_default()('wp.components.Navigation (and all subcomponents)', {
+ since: '6.8',
+ version: '7.1',
+ alternative: 'wp.components.Navigator'
+ });
const setActiveMenu = (menuId, slideInOrigin = defaultSlideOrigin) => {
if (!navigationTree.getMenu(menuId)) {
return;
@@ -61740,19 +59587,18 @@
};
// Used to prevent the sliding animation on mount
- const isMounted = (0,external_wp_element_namespaceObject.useRef)(false);
+ const isMountedRef = (0,external_wp_element_namespaceObject.useRef)(false);
(0,external_wp_element_namespaceObject.useEffect)(() => {
- if (!isMounted.current) {
- isMounted.current = true;
+ if (!isMountedRef.current) {
+ isMountedRef.current = true;
}
}, []);
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (activeMenu !== menu) {
setActiveMenu(activeMenu);
}
- // Ignore exhaustive-deps here, as it would require either a larger refactor or some questionable workarounds.
+ // Not adding deps for now, as it would require either a larger refactor or some questionable workarounds.
// See https://github.com/WordPress/gutenberg/pull/41612 for context.
- // eslint-disable-next-line react-hooks/exhaustive-deps
}, [activeMenu]);
const context = {
activeItem,
@@ -61769,7 +59615,7 @@
className: classes,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: animateClassName ? dist_clsx({
- [animateClassName]: isMounted.current && slideOrigin
+ [animateClassName]: isMountedRef.current && slideOrigin
}) : undefined,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigationContext.Provider, {
value: context,
@@ -61780,7 +59626,7 @@
}
/* harmony default export */ const navigation = (Navigation);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-right.js
+;// ./node_modules/@wordpress/icons/build-module/library/chevron-right.js
/**
* WordPress dependencies
*/
@@ -61795,7 +59641,7 @@
});
/* harmony default export */ const chevron_right = (chevronRight);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-left.js
+;// ./node_modules/@wordpress/icons/build-module/library/chevron-left.js
/**
* WordPress dependencies
*/
@@ -61810,22 +59656,21 @@
});
/* harmony default export */ const chevron_left = (chevronLeft);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/back-button/index.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/navigation/back-button/index.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -61853,6 +59698,7 @@
};
const icon = (0,external_wp_i18n_namespaceObject.isRTL)() ? chevron_right : chevron_left;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(MenuBackButtonUI, {
+ __next40pxDefaultSize: true,
className: classes,
href: href,
variant: "tertiary",
@@ -61870,7 +59716,7 @@
const NavigationBackButton = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedNavigationBackButton);
/* harmony default export */ const back_button = (NavigationBackButton);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/group/context.js
+;// ./node_modules/@wordpress/components/build-module/navigation/group/context.js
/**
* WordPress dependencies
*/
@@ -61885,21 +59731,20 @@
});
const useNavigationGroupContext = () => (0,external_wp_element_namespaceObject.useContext)(NavigationGroupContext);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/group/index.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/navigation/group/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
@@ -61952,12 +59797,10 @@
}
/* harmony default export */ const group = (NavigationGroup);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/item/base-content.js
-/**
- * Internal dependencies
- */
-
-
+;// ./node_modules/@wordpress/components/build-module/navigation/item/base-content.js
+/**
+ * Internal dependencies
+ */
function NavigationItemBaseContent(props) {
@@ -61977,7 +59820,7 @@
});
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/menu/context.js
+;// ./node_modules/@wordpress/components/build-module/navigation/menu/context.js
/**
* WordPress dependencies
*/
@@ -61993,7 +59836,7 @@
});
const useNavigationMenuContext = () => (0,external_wp_element_namespaceObject.useContext)(NavigationMenuContext);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/utils.js
+;// ./node_modules/@wordpress/components/build-module/navigation/utils.js
/**
* External dependencies
*/
@@ -62003,7 +59846,7 @@
const normalizeInput = input => remove_accents_default()(input).replace(/^\//, '').toLowerCase();
const normalizedSearch = (title, search) => -1 !== normalizeInput(title).indexOf(normalizeInput(search));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/item/use-navigation-tree-item.js
+;// ./node_modules/@wordpress/components/build-module/navigation/item/use-navigation-tree-item.js
/**
* WordPress dependencies
*/
@@ -62043,12 +59886,12 @@
return () => {
removeItem(itemId);
};
- // Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/41639
- // eslint-disable-next-line react-hooks/exhaustive-deps
+ // Not adding deps for now, as it would require either a larger refactor.
+ // See https://github.com/WordPress/gutenberg/pull/41639
}, [activeMenu, search]);
};
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/item/base.js
+;// ./node_modules/@wordpress/components/build-module/navigation/item/base.js
/**
* External dependencies
*/
@@ -62092,22 +59935,21 @@
});
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/item/index.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/navigation/item/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -62165,6 +60007,7 @@
};
const itemProps = isText ? restProps : {
as: build_module_button,
+ __next40pxDefaultSize: 'as' in restProps ? restProps.as === undefined : true,
href,
onClick: onItemClick,
'aria-current': isActive ? 'page' : undefined,
@@ -62190,7 +60033,7 @@
}
/* harmony default export */ const navigation_item = (NavigationItem);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/menu/use-navigation-tree-menu.js
+;// ./node_modules/@wordpress/components/build-module/navigation/menu/use-navigation-tree-menu.js
/**
* WordPress dependencies
*/
@@ -62217,12 +60060,12 @@
return () => {
removeMenu(key);
};
- // Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/44090
- // eslint-disable-next-line react-hooks/exhaustive-deps
+ // Not adding deps for now, as it would require either a larger refactor
+ // See https://github.com/WordPress/gutenberg/pull/44090
}, []);
};
-;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/search.js
+;// ./node_modules/@wordpress/icons/build-module/library/search.js
/**
* WordPress dependencies
*/
@@ -62237,7 +60080,7 @@
});
/* harmony default export */ const library_search = (search);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-spoken-messages/index.js
+;// ./node_modules/@wordpress/components/build-module/higher-order/with-spoken-messages/index.js
/**
* WordPress dependencies
*/
@@ -62247,8 +60090,7 @@
/** @typedef {import('react').ComponentType} ComponentType */
/**
- * A Higher Order Component used to be provide speak and debounced speak
- * functions.
+ * A Higher Order Component used to provide speak and debounced speak functions.
*
* @see https://developer.wordpress.org/block-editor/packages/packages-a11y/#speak
*
@@ -62263,7 +60105,7 @@
debouncedSpeak: (0,external_wp_compose_namespaceObject.useDebounce)(external_wp_a11y_namespaceObject.speak, 500)
}), 'withSpokenMessages'));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/search-control/styles.js
+;// ./node_modules/@wordpress/components/build-module/search-control/styles.js
/**
* External dependencies
@@ -62287,15 +60129,16 @@
target: "effl84m0"
} : 0)("input[type='search']{&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{-webkit-appearance:none;}}&:not( :focus-within ){--wp-components-color-background:", COLORS.theme.gray[100], ";}" + ( true ? "" : 0));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/search-control/index.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
+;// ./node_modules/@wordpress/components/build-module/search-control/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
@@ -62319,6 +60162,11 @@
icon: library_search
});
}
+ if (onClose) {
+ external_wp_deprecated_default()('`onClose` prop in wp.components.SearchControl', {
+ since: '6.8'
+ });
+ }
const onReset = () => {
onChange('');
searchRef.current?.focus();
@@ -62344,17 +60192,21 @@
}, forwardedRef) {
// @ts-expect-error The `disabled` prop is not yet supported in the SearchControl component.
// Work with the design team (@WordPress/gutenberg-design) if you need this feature.
- delete restProps.disabled;
+ const {
+ disabled,
+ ...filteredRestProps
+ } = restProps;
const searchRef = (0,external_wp_element_namespaceObject.useRef)(null);
const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(SearchControl, 'components-search-control');
const contextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
- // Overrides the underlying BaseControl `__nextHasNoMarginBottom` via the context system
- // to provide backwards compatibile margin for SearchControl.
- // (In a standard InputControl, the BaseControl `__nextHasNoMarginBottom` is always set to true.)
BaseControl: {
+ // Overrides the underlying BaseControl `__nextHasNoMarginBottom` via the context system
+ // to provide backwards compatible margin for SearchControl.
+ // (In a standard InputControl, the BaseControl `__nextHasNoMarginBottom` is always set to true.)
_overrides: {
__nextHasNoMarginBottom
- }
+ },
+ __associatedWPComponentName: 'SearchControl'
},
// `isBorderless` is still experimental and not a public prop for InputControl yet.
InputBase: {
@@ -62385,7 +60237,7 @@
onClose: onClose
})
}),
- ...restProps
+ ...filteredRestProps
})
});
}
@@ -62413,7 +60265,7 @@
const SearchControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSearchControl);
/* harmony default export */ const search_control = (SearchControl);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/menu/menu-title-search.js
+;// ./node_modules/@wordpress/components/build-module/navigation/menu/menu-title-search.js
/**
* WordPress dependencies
*/
@@ -62462,11 +60314,11 @@
return;
}
const count = Object.values(items).filter(item => item._isVisible).length;
- const resultsFoundMessage = (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of results. */
+ const resultsFoundMessage = (0,external_wp_i18n_namespaceObject.sprintf)(/* translators: %d: number of results. */
(0,external_wp_i18n_namespaceObject._n)('%d result found.', '%d results found.', count), count);
debouncedSpeak(resultsFoundMessage);
- // Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/44090
- // eslint-disable-next-line react-hooks/exhaustive-deps
+ // Not adding deps for now, as it would require either a larger refactor.
+ // See https://github.com/WordPress/gutenberg/pull/44090
}, [items, search]);
const onClose = () => {
onSearch?.('');
@@ -62479,7 +60331,7 @@
}
};
const inputId = `components-navigation__menu-title-search-${menu}`;
- const placeholder = (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: placeholder for menu search box. %s: menu title */
+ const placeholder = (0,external_wp_i18n_namespaceObject.sprintf)(/* translators: placeholder for menu search box. %s: menu title */
(0,external_wp_i18n_namespaceObject.__)('Search %s'), title?.toLowerCase()).trim();
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MenuTitleSearchControlWrapper, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(search_control, {
@@ -62497,18 +60349,17 @@
}
/* harmony default export */ const menu_title_search = (with_spoken_messages(MenuTitleSearch));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/menu/menu-title.js
-/**
- * WordPress dependencies
- */
-
-
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/navigation/menu/menu-title.js
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -62579,16 +60430,15 @@
});
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/menu/search-no-results-found.js
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/navigation/menu/search-no-results-found.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
@@ -62611,21 +60461,20 @@
});
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/menu/index.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/navigation/menu/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
@@ -62703,7 +60552,7 @@
}
/* harmony default export */ const navigation_menu = (NavigationMenu);
-;// CONCATENATED MODULE: ./node_modules/path-to-regexp/dist.es2015/index.js
+;// ./node_modules/path-to-regexp/dist.es2015/index.js
/**
* Tokenize input string.
*/
@@ -62799,8 +60648,7 @@
function dist_es2015_parse(str, options) {
if (options === void 0) { options = {}; }
var tokens = lexer(str);
- var _a = options.prefixes, prefixes = _a === void 0 ? "./" : _a;
- var defaultPattern = "[^".concat(escapeString(options.delimiter || "/#?"), "]+?");
+ var _a = options.prefixes, prefixes = _a === void 0 ? "./" : _a, _b = options.delimiter, delimiter = _b === void 0 ? "/#?" : _b;
var result = [];
var key = 0;
var i = 0;
@@ -62824,6 +60672,24 @@
}
return result;
};
+ var isSafe = function (value) {
+ for (var _i = 0, delimiter_1 = delimiter; _i < delimiter_1.length; _i++) {
+ var char = delimiter_1[_i];
+ if (value.indexOf(char) > -1)
+ return true;
+ }
+ return false;
+ };
+ var safePattern = function (prefix) {
+ var prev = result[result.length - 1];
+ var prevText = prefix || (prev && typeof prev === "string" ? prev : "");
+ if (prev && !prevText) {
+ throw new TypeError("Must have text between two parameters, missing text after \"".concat(prev.name, "\""));
+ }
+ if (!prevText || isSafe(prevText))
+ return "[^".concat(escapeString(delimiter), "]+?");
+ return "(?:(?!".concat(escapeString(prevText), ")[^").concat(escapeString(delimiter), "])+?");
+ };
while (i < tokens.length) {
var char = tryConsume("CHAR");
var name = tryConsume("NAME");
@@ -62842,7 +60708,7 @@
name: name || key++,
prefix: prefix,
suffix: "",
- pattern: pattern || defaultPattern,
+ pattern: pattern || safePattern(prefix),
modifier: tryConsume("MODIFIER") || "",
});
continue;
@@ -62865,7 +60731,7 @@
mustConsume("CLOSE");
result.push({
name: name_1 || (pattern_1 ? key++ : ""),
- pattern: name_1 && !pattern_1 ? defaultPattern : pattern_1,
+ pattern: name_1 && !pattern_1 ? safePattern(prefix) : pattern_1,
prefix: prefix,
suffix: suffix,
modifier: tryConsume("MODIFIER") || "",
@@ -63058,11 +60924,9 @@
}
else {
if (token.modifier === "+" || token.modifier === "*") {
- route += "((?:".concat(token.pattern, ")").concat(token.modifier, ")");
+ throw new TypeError("Can not repeat \"".concat(token.name, "\" without a prefix and suffix"));
}
- else {
- route += "(".concat(token.pattern, ")").concat(token.modifier);
- }
+ route += "(".concat(token.pattern, ")").concat(token.modifier);
}
}
else {
@@ -63104,7 +60968,7 @@
return stringToRegexp(path, keys, options);
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/utils/router.js
+;// ./node_modules/@wordpress/components/build-module/navigator/utils/router.js
/**
* External dependencies
*/
@@ -63150,7 +61014,7 @@
return parentPath;
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/context.js
+;// ./node_modules/@wordpress/components/build-module/navigator/context.js
/**
* WordPress dependencies
*/
@@ -63171,75 +61035,120 @@
};
const NavigatorContext = (0,external_wp_element_namespaceObject.createContext)(context_initialContextValue);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/styles.js
+;// ./node_modules/@wordpress/components/build-module/navigator/styles.js
function navigator_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
* External dependencies
*/
-const navigatorProviderWrapper = true ? {
- name: "xpkswc",
- styles: "overflow-x:hidden;contain:content"
+const navigatorWrapper = true ? {
+ name: "1br0vvk",
+ styles: "position:relative;overflow-x:clip;contain:layout;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;align-items:start"
} : 0;
-const fadeInFromRight = emotion_react_browser_esm_keyframes({
- '0%': {
- opacity: 0,
- transform: `translateX( 50px )`
- },
- '100%': {
- opacity: 1,
- transform: 'none'
- }
-});
-const fadeInFromLeft = emotion_react_browser_esm_keyframes({
- '0%': {
- opacity: 0,
- transform: `translateX( -50px )`
- },
- '100%': {
- opacity: 1,
- transform: 'none'
- }
-});
-const navigatorScreenAnimation = ({
- isInitial,
- isBack,
- isRTL
-}) => {
- if (isInitial && !isBack) {
- return;
- }
- const animationName = isRTL && isBack || !isRTL && !isBack ? fadeInFromRight : fadeInFromLeft;
- return /*#__PURE__*/emotion_react_browser_esm_css("animation-duration:0.14s;animation-timing-function:ease-in-out;will-change:transform,opacity;animation-name:", animationName, ";@media ( prefers-reduced-motion ){animation-duration:0s;}" + ( true ? "" : 0), true ? "" : 0);
-};
-const navigatorScreen = props => /*#__PURE__*/emotion_react_browser_esm_css("overflow-x:auto;max-height:100%;", navigatorScreenAnimation(props), ";" + ( true ? "" : 0), true ? "" : 0);
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/navigator-provider/component.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
-
-
-
-
-
-
-
-const MAX_HISTORY_LENGTH = 50;
+const fadeIn = emotion_react_browser_esm_keyframes({
+ from: {
+ opacity: 0
+ }
+});
+const fadeOut = emotion_react_browser_esm_keyframes({
+ to: {
+ opacity: 0
+ }
+});
+const slideFromRight = emotion_react_browser_esm_keyframes({
+ from: {
+ transform: 'translateX(100px)'
+ }
+});
+const slideToLeft = emotion_react_browser_esm_keyframes({
+ to: {
+ transform: 'translateX(-80px)'
+ }
+});
+const slideFromLeft = emotion_react_browser_esm_keyframes({
+ from: {
+ transform: 'translateX(-100px)'
+ }
+});
+const slideToRight = emotion_react_browser_esm_keyframes({
+ to: {
+ transform: 'translateX(80px)'
+ }
+});
+const FADE = {
+ DURATION: 70,
+ EASING: 'linear',
+ DELAY: {
+ IN: 70,
+ OUT: 40
+ }
+};
+const SLIDE = {
+ DURATION: 300,
+ EASING: 'cubic-bezier(0.33, 0, 0, 1)'
+};
+const TOTAL_ANIMATION_DURATION = {
+ IN: Math.max(FADE.DURATION + FADE.DELAY.IN, SLIDE.DURATION),
+ OUT: Math.max(FADE.DURATION + FADE.DELAY.OUT, SLIDE.DURATION)
+};
+const ANIMATION_END_NAMES = {
+ end: {
+ in: slideFromRight.name,
+ out: slideToLeft.name
+ },
+ start: {
+ in: slideFromLeft.name,
+ out: slideToRight.name
+ }
+};
+const ANIMATION = {
+ end: {
+ in: /*#__PURE__*/emotion_react_browser_esm_css(FADE.DURATION, "ms ", FADE.EASING, " ", FADE.DELAY.IN, "ms both ", fadeIn, ",", SLIDE.DURATION, "ms ", SLIDE.EASING, " both ", slideFromRight, ";" + ( true ? "" : 0), true ? "" : 0),
+ out: /*#__PURE__*/emotion_react_browser_esm_css(FADE.DURATION, "ms ", FADE.EASING, " ", FADE.DELAY.OUT, "ms both ", fadeOut, ",", SLIDE.DURATION, "ms ", SLIDE.EASING, " both ", slideToLeft, ";" + ( true ? "" : 0), true ? "" : 0)
+ },
+ start: {
+ in: /*#__PURE__*/emotion_react_browser_esm_css(FADE.DURATION, "ms ", FADE.EASING, " ", FADE.DELAY.IN, "ms both ", fadeIn, ",", SLIDE.DURATION, "ms ", SLIDE.EASING, " both ", slideFromLeft, ";" + ( true ? "" : 0), true ? "" : 0),
+ out: /*#__PURE__*/emotion_react_browser_esm_css(FADE.DURATION, "ms ", FADE.EASING, " ", FADE.DELAY.OUT, "ms both ", fadeOut, ",", SLIDE.DURATION, "ms ", SLIDE.EASING, " both ", slideToRight, ";" + ( true ? "" : 0), true ? "" : 0)
+ }
+};
+const navigatorScreenAnimation = /*#__PURE__*/emotion_react_browser_esm_css("z-index:1;&[data-animation-type='out']{z-index:0;}@media not ( prefers-reduced-motion ){&:not( [data-skip-animation] ){", ['start', 'end'].map(direction => ['in', 'out'].map(type => /*#__PURE__*/emotion_react_browser_esm_css("&[data-animation-direction='", direction, "'][data-animation-type='", type, "']{animation:", ANIMATION[direction][type], ";}" + ( true ? "" : 0), true ? "" : 0))), ";}}" + ( true ? "" : 0), true ? "" : 0);
+const navigatorScreen = true ? {
+ name: "14di7zd",
+ styles: "overflow-x:auto;max-height:100%;box-sizing:border-box;position:relative;grid-column:1/-1;grid-row:1/-1"
+} : 0;
+
+;// ./node_modules/@wordpress/components/build-module/navigator/navigator/component.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+
+
+
+
function addScreen({
screens
}, screen) {
+ if (screens.some(s => s.path === screen.path)) {
+ true ? external_wp_warning_default()(`Navigator: a screen with path ${screen.path} already exists.
+The screen with id ${screen.id} will not be added.`) : 0;
+ return screens;
+ }
return [...screens, screen];
}
function removeScreen({
@@ -63247,72 +61156,88 @@
}, screen) {
return screens.filter(s => s.id !== screen.id);
}
-function goBack({
- locationHistory
-}) {
- if (locationHistory.length <= 1) {
- return locationHistory;
- }
- return [...locationHistory.slice(0, -2), {
- ...locationHistory[locationHistory.length - 2],
- isBack: true,
- hasRestoredFocus: false
- }];
-}
function goTo(state, path, options = {}) {
- const {
- locationHistory
+ var _focusSelectorsCopy2;
+ const {
+ focusSelectors
} = state;
- const {
- focusTargetSelector,
+ const currentLocation = {
+ ...state.currentLocation
+ };
+ const {
+ // Default assignments
isBack = false,
skipFocus = false,
- replace = false,
+ // Extract to avoid forwarding
+ replace,
+ focusTargetSelector,
+ // Rest
...restOptions
} = options;
- const isNavigatingToSamePath = locationHistory.length > 0 && locationHistory[locationHistory.length - 1].path === path;
- if (isNavigatingToSamePath) {
- return locationHistory;
- }
- const isNavigatingToPreviousPath = isBack && locationHistory.length > 1 && locationHistory[locationHistory.length - 2].path === path;
- if (isNavigatingToPreviousPath) {
- return goBack(state);
- }
- const newLocation = {
- ...restOptions,
- path,
- isBack,
- hasRestoredFocus: false,
- skipFocus
- };
- if (locationHistory.length === 0) {
- return replace ? [] : [newLocation];
- }
- const newLocationHistory = locationHistory.slice(locationHistory.length > MAX_HISTORY_LENGTH - 1 ? 1 : 0, -1);
- if (!replace) {
- newLocationHistory.push(
- // Assign `focusTargetSelector` to the previous location in history
- // (the one we just navigated from).
- {
- ...locationHistory[locationHistory.length - 1],
- focusTargetSelector
- });
- }
- newLocationHistory.push(newLocation);
- return newLocationHistory;
+ if (currentLocation.path === path) {
+ return {
+ currentLocation,
+ focusSelectors
+ };
+ }
+ let focusSelectorsCopy;
+ function getFocusSelectorsCopy() {
+ var _focusSelectorsCopy;
+ focusSelectorsCopy = (_focusSelectorsCopy = focusSelectorsCopy) !== null && _focusSelectorsCopy !== void 0 ? _focusSelectorsCopy : new Map(state.focusSelectors);
+ return focusSelectorsCopy;
+ }
+
+ // Set a focus selector that will be used when navigating
+ // back to the current location.
+ if (focusTargetSelector && currentLocation.path) {
+ getFocusSelectorsCopy().set(currentLocation.path, focusTargetSelector);
+ }
+
+ // Get the focus selector for the new location.
+ let currentFocusSelector;
+ if (focusSelectors.get(path)) {
+ if (isBack) {
+ // Use the found focus selector only when navigating back.
+ currentFocusSelector = focusSelectors.get(path);
+ }
+ // Make a copy of the focusSelectors map to remove the focus selector
+ // only if necessary (ie. a focus selector was found).
+ getFocusSelectorsCopy().delete(path);
+ }
+ return {
+ currentLocation: {
+ ...restOptions,
+ isInitial: false,
+ path,
+ isBack,
+ hasRestoredFocus: false,
+ focusTargetSelector: currentFocusSelector,
+ skipFocus
+ },
+ focusSelectors: (_focusSelectorsCopy2 = focusSelectorsCopy) !== null && _focusSelectorsCopy2 !== void 0 ? _focusSelectorsCopy2 : focusSelectors
+ };
}
function goToParent(state, options = {}) {
const {
- locationHistory,
- screens
+ screens,
+ focusSelectors
} = state;
- const currentPath = locationHistory[locationHistory.length - 1].path;
+ const currentLocation = {
+ ...state.currentLocation
+ };
+ const currentPath = currentLocation.path;
if (currentPath === undefined) {
- return locationHistory;
+ return {
+ currentLocation,
+ focusSelectors
+ };
}
const parentPath = findParent(currentPath, screens);
if (parentPath === undefined) {
- return locationHistory;
+ return {
+ currentLocation,
+ focusSelectors
+ };
}
return goTo(state, parentPath, {
...options,
@@ -63322,8 +61247,10 @@
function routerReducer(state, action) {
let {
screens,
- locationHistory,
- matchedPath
+ currentLocation,
+ matchedPath,
+ focusSelectors,
+ ...restState
} = state;
switch (action.type) {
case 'add':
@@ -63332,24 +61259,27 @@
case 'remove':
screens = removeScreen(state, action.screen);
break;
- case 'goback':
- locationHistory = goBack(state);
- break;
case 'goto':
- locationHistory = goTo(state, action.path, action.options);
+ ({
+ currentLocation,
+ focusSelectors
+ } = goTo(state, action.path, action.options));
break;
case 'gotoparent':
- locationHistory = goToParent(state, action.options);
+ ({
+ currentLocation,
+ focusSelectors
+ } = goToParent(state, action.options));
break;
}
// Return early in case there is no change
- if (screens === state.screens && locationHistory === state.locationHistory) {
+ if (screens === state.screens && currentLocation === state.currentLocation) {
return state;
}
// Compute the matchedPath
- const currentPath = locationHistory.length > 0 ? locationHistory[locationHistory.length - 1].path : undefined;
+ const currentPath = currentLocation.path;
matchedPath = currentPath !== undefined ? patternMatch(currentPath, screens) : undefined;
// If the new match is the same as the previous match,
@@ -63358,40 +61288,55 @@
matchedPath = state.matchedPath;
}
return {
+ ...restState,
screens,
- locationHistory,
- matchedPath
- };
-}
-function UnconnectedNavigatorProvider(props, forwardedRef) {
- const {
- initialPath,
+ currentLocation,
+ matchedPath,
+ focusSelectors
+ };
+}
+function UnconnectedNavigator(props, forwardedRef) {
+ const {
+ initialPath: initialPathProp,
children,
className,
...otherProps
- } = useContextSystem(props, 'NavigatorProvider');
- const [routerState, dispatch] = (0,external_wp_element_namespaceObject.useReducer)(routerReducer, initialPath, path => ({
+ } = useContextSystem(props, 'Navigator');
+ const [routerState, dispatch] = (0,external_wp_element_namespaceObject.useReducer)(routerReducer, initialPathProp, path => ({
screens: [],
- locationHistory: [{
- path
- }],
- matchedPath: undefined
+ currentLocation: {
+ path,
+ isInitial: true
+ },
+ matchedPath: undefined,
+ focusSelectors: new Map(),
+ initialPath: initialPathProp
}));
// The methods are constant forever, create stable references to them.
const methods = (0,external_wp_element_namespaceObject.useMemo)(() => ({
- goBack: () => dispatch({
- type: 'goback'
+ // Note: calling goBack calls `goToParent` internally, as it was established
+ // that `goBack` should behave like `goToParent`, and `goToParent` should
+ // be marked as deprecated.
+ goBack: options => dispatch({
+ type: 'gotoparent',
+ options
}),
goTo: (path, options) => dispatch({
type: 'goto',
path,
options
}),
- goToParent: options => dispatch({
- type: 'gotoparent',
- options
- }),
+ goToParent: options => {
+ external_wp_deprecated_default()(`wp.components.useNavigator().goToParent`, {
+ since: '6.7',
+ alternative: 'wp.components.useNavigator().goBack'
+ });
+ dispatch({
+ type: 'gotoparent',
+ options
+ });
+ },
addScreen: screen => dispatch({
type: 'add',
screen
@@ -63402,23 +61347,20 @@
})
}), []);
const {
- locationHistory,
+ currentLocation,
matchedPath
} = routerState;
const navigatorContextValue = (0,external_wp_element_namespaceObject.useMemo)(() => {
var _matchedPath$params;
return {
- location: {
- ...locationHistory[locationHistory.length - 1],
- isInitial: locationHistory.length === 1
- },
+ location: currentLocation,
params: (_matchedPath$params = matchedPath?.params) !== null && _matchedPath$params !== void 0 ? _matchedPath$params : {},
match: matchedPath?.id,
...methods
};
- }, [locationHistory, matchedPath, methods]);
+ }, [currentLocation, matchedPath, methods]);
const cx = useCx();
- const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(navigatorProviderWrapper, className), [className, cx]);
+ const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(navigatorWrapper, className), [className, cx]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, {
ref: forwardedRef,
className: classes,
@@ -63429,12 +61371,441 @@
})
});
}
+const component_Navigator = contextConnect(UnconnectedNavigator, 'Navigator');
+
+;// external ["wp","escapeHtml"]
+const external_wp_escapeHtml_namespaceObject = window["wp"]["escapeHtml"];
+;// ./node_modules/@wordpress/components/build-module/navigator/navigator-screen/use-screen-animate-presence.js
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+// Possible values:
+// - 'INITIAL': the initial state
+// - 'ANIMATING_IN': start enter animation
+// - 'IN': enter animation has ended
+// - 'ANIMATING_OUT': start exit animation
+// - 'OUT': the exit animation has ended
+
+// Allow an extra 20% of the total animation duration to account for potential
+// event loop delays.
+const ANIMATION_TIMEOUT_MARGIN = 1.2;
+const isEnterAnimation = (animationDirection, animationStatus, animationName) => animationStatus === 'ANIMATING_IN' && animationName === ANIMATION_END_NAMES[animationDirection].in;
+const isExitAnimation = (animationDirection, animationStatus, animationName) => animationStatus === 'ANIMATING_OUT' && animationName === ANIMATION_END_NAMES[animationDirection].out;
+function useScreenAnimatePresence({
+ isMatch,
+ skipAnimation,
+ isBack,
+ onAnimationEnd
+}) {
+ const isRTL = (0,external_wp_i18n_namespaceObject.isRTL)();
+ const prefersReducedMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)();
+ const [animationStatus, setAnimationStatus] = (0,external_wp_element_namespaceObject.useState)('INITIAL');
+
+ // Start enter and exit animations when the screen is selected or deselected.
+ // The animation status is set to `IN` or `OUT` immediately if the animation
+ // should be skipped.
+ const becameSelected = animationStatus !== 'ANIMATING_IN' && animationStatus !== 'IN' && isMatch;
+ const becameUnselected = animationStatus !== 'ANIMATING_OUT' && animationStatus !== 'OUT' && !isMatch;
+ (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
+ if (becameSelected) {
+ setAnimationStatus(skipAnimation || prefersReducedMotion ? 'IN' : 'ANIMATING_IN');
+ } else if (becameUnselected) {
+ setAnimationStatus(skipAnimation || prefersReducedMotion ? 'OUT' : 'ANIMATING_OUT');
+ }
+ }, [becameSelected, becameUnselected, skipAnimation, prefersReducedMotion]);
+
+ // Animation attributes (derived state).
+ const animationDirection = isRTL && isBack || !isRTL && !isBack ? 'end' : 'start';
+ const isAnimatingIn = animationStatus === 'ANIMATING_IN';
+ const isAnimatingOut = animationStatus === 'ANIMATING_OUT';
+ let animationType;
+ if (isAnimatingIn) {
+ animationType = 'in';
+ } else if (isAnimatingOut) {
+ animationType = 'out';
+ }
+ const onScreenAnimationEnd = (0,external_wp_element_namespaceObject.useCallback)(e => {
+ onAnimationEnd?.(e);
+ if (isExitAnimation(animationDirection, animationStatus, e.animationName)) {
+ // When the exit animation ends on an unselected screen, set the
+ // status to 'OUT' to remove the screen contents from the DOM.
+ setAnimationStatus('OUT');
+ } else if (isEnterAnimation(animationDirection, animationStatus, e.animationName)) {
+ // When the enter animation ends on a selected screen, set the
+ // status to 'IN' to ensure the screen is rendered in the DOM.
+ setAnimationStatus('IN');
+ }
+ }, [onAnimationEnd, animationStatus, animationDirection]);
+
+ // Fallback timeout to ensure that the logic is applied even if the
+ // `animationend` event is not triggered.
+ (0,external_wp_element_namespaceObject.useEffect)(() => {
+ let animationTimeout;
+ if (isAnimatingOut) {
+ animationTimeout = window.setTimeout(() => {
+ setAnimationStatus('OUT');
+ animationTimeout = undefined;
+ }, TOTAL_ANIMATION_DURATION.OUT * ANIMATION_TIMEOUT_MARGIN);
+ } else if (isAnimatingIn) {
+ animationTimeout = window.setTimeout(() => {
+ setAnimationStatus('IN');
+ animationTimeout = undefined;
+ }, TOTAL_ANIMATION_DURATION.IN * ANIMATION_TIMEOUT_MARGIN);
+ }
+ return () => {
+ if (animationTimeout) {
+ window.clearTimeout(animationTimeout);
+ animationTimeout = undefined;
+ }
+ };
+ }, [isAnimatingOut, isAnimatingIn]);
+ return {
+ animationStyles: navigatorScreenAnimation,
+ // Render the screen's contents in the DOM not only when the screen is
+ // selected, but also while it is animating out.
+ shouldRenderScreen: isMatch || animationStatus === 'IN' || animationStatus === 'ANIMATING_OUT',
+ screenProps: {
+ onAnimationEnd: onScreenAnimationEnd,
+ 'data-animation-direction': animationDirection,
+ 'data-animation-type': animationType,
+ 'data-skip-animation': skipAnimation || undefined
+ }
+ };
+}
+
+;// ./node_modules/@wordpress/components/build-module/navigator/navigator-screen/component.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+
+
+
+function UnconnectedNavigatorScreen(props, forwardedRef) {
+ if (!/^\//.test(props.path)) {
+ true ? external_wp_warning_default()('wp.components.Navigator.Screen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.') : 0;
+ }
+ const screenId = (0,external_wp_element_namespaceObject.useId)();
+ const {
+ children,
+ className,
+ path,
+ onAnimationEnd: onAnimationEndProp,
+ ...otherProps
+ } = useContextSystem(props, 'Navigator.Screen');
+ const {
+ location,
+ match,
+ addScreen,
+ removeScreen
+ } = (0,external_wp_element_namespaceObject.useContext)(NavigatorContext);
+ const {
+ isInitial,
+ isBack,
+ focusTargetSelector,
+ skipFocus
+ } = location;
+ const isMatch = match === screenId;
+ const wrapperRef = (0,external_wp_element_namespaceObject.useRef)(null);
+ const skipAnimationAndFocusRestoration = !!isInitial && !isBack;
+
+ // Register / unregister screen with the navigator context.
+ (0,external_wp_element_namespaceObject.useEffect)(() => {
+ const screen = {
+ id: screenId,
+ path: (0,external_wp_escapeHtml_namespaceObject.escapeAttribute)(path)
+ };
+ addScreen(screen);
+ return () => removeScreen(screen);
+ }, [screenId, path, addScreen, removeScreen]);
+
+ // Animation.
+ const {
+ animationStyles,
+ shouldRenderScreen,
+ screenProps
+ } = useScreenAnimatePresence({
+ isMatch,
+ isBack,
+ onAnimationEnd: onAnimationEndProp,
+ skipAnimation: skipAnimationAndFocusRestoration
+ });
+ const cx = useCx();
+ const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(navigatorScreen, animationStyles, className), [className, cx, animationStyles]);
+
+ // Focus restoration
+ const locationRef = (0,external_wp_element_namespaceObject.useRef)(location);
+ (0,external_wp_element_namespaceObject.useEffect)(() => {
+ locationRef.current = location;
+ }, [location]);
+ (0,external_wp_element_namespaceObject.useEffect)(() => {
+ const wrapperEl = wrapperRef.current;
+ // Only attempt to restore focus:
+ // - if the current location is not the initial one (to avoid moving focus on page load)
+ // - when the screen becomes visible
+ // - if the wrapper ref has been assigned
+ // - if focus hasn't already been restored for the current location
+ // - if the `skipFocus` option is not set to `true`. This is useful when we trigger the navigation outside of NavigatorScreen.
+ if (skipAnimationAndFocusRestoration || !isMatch || !wrapperEl || locationRef.current.hasRestoredFocus || skipFocus) {
+ return;
+ }
+ const activeElement = wrapperEl.ownerDocument.activeElement;
+
+ // If an element is already focused within the wrapper do not focus the
+ // element. This prevents inputs or buttons from losing focus unnecessarily.
+ if (wrapperEl.contains(activeElement)) {
+ return;
+ }
+ let elementToFocus = null;
+
+ // When navigating back, if a selector is provided, use it to look for the
+ // target element (assumed to be a node inside the current NavigatorScreen)
+ if (isBack && focusTargetSelector) {
+ elementToFocus = wrapperEl.querySelector(focusTargetSelector);
+ }
+
+ // If the previous query didn't run or find any element to focus, fallback
+ // to the first tabbable element in the screen (or the screen itself).
+ if (!elementToFocus) {
+ const [firstTabbable] = external_wp_dom_namespaceObject.focus.tabbable.find(wrapperEl);
+ elementToFocus = firstTabbable !== null && firstTabbable !== void 0 ? firstTabbable : wrapperEl;
+ }
+ locationRef.current.hasRestoredFocus = true;
+ elementToFocus.focus();
+ }, [skipAnimationAndFocusRestoration, isMatch, isBack, focusTargetSelector, skipFocus]);
+ const mergedWrapperRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([forwardedRef, wrapperRef]);
+ return shouldRenderScreen ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, {
+ ref: mergedWrapperRef,
+ className: classes,
+ ...screenProps,
+ ...otherProps,
+ children: children
+ }) : null;
+}
+const NavigatorScreen = contextConnect(UnconnectedNavigatorScreen, 'Navigator.Screen');
+
+;// ./node_modules/@wordpress/components/build-module/navigator/use-navigator.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * Retrieves a `navigator` instance. This hook provides advanced functionality,
+ * such as imperatively navigating to a new location (with options like
+ * navigating back or skipping focus restoration) and accessing the current
+ * location and path parameters.
+ */
+function useNavigator() {
+ const {
+ location,
+ params,
+ goTo,
+ goBack,
+ goToParent
+ } = (0,external_wp_element_namespaceObject.useContext)(NavigatorContext);
+ return {
+ location,
+ goTo,
+ goBack,
+ goToParent,
+ params
+ };
+}
+
+;// ./node_modules/@wordpress/components/build-module/navigator/navigator-button/hook.js
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+const cssSelectorForAttribute = (attrName, attrValue) => `[${attrName}="${attrValue}"]`;
+function useNavigatorButton(props) {
+ const {
+ path,
+ onClick,
+ as = build_module_button,
+ attributeName = 'id',
+ ...otherProps
+ } = useContextSystem(props, 'Navigator.Button');
+ const escapedPath = (0,external_wp_escapeHtml_namespaceObject.escapeAttribute)(path);
+ const {
+ goTo
+ } = useNavigator();
+ const handleClick = (0,external_wp_element_namespaceObject.useCallback)(e => {
+ e.preventDefault();
+ goTo(escapedPath, {
+ focusTargetSelector: cssSelectorForAttribute(attributeName, escapedPath)
+ });
+ onClick?.(e);
+ }, [goTo, onClick, attributeName, escapedPath]);
+ return {
+ as,
+ onClick: handleClick,
+ ...otherProps,
+ [attributeName]: escapedPath
+ };
+}
+
+;// ./node_modules/@wordpress/components/build-module/navigator/navigator-button/component.js
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+function UnconnectedNavigatorButton(props, forwardedRef) {
+ const navigatorButtonProps = useNavigatorButton(props);
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, {
+ ref: forwardedRef,
+ ...navigatorButtonProps
+ });
+}
+const NavigatorButton = contextConnect(UnconnectedNavigatorButton, 'Navigator.Button');
+
+;// ./node_modules/@wordpress/components/build-module/navigator/navigator-back-button/hook.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+function useNavigatorBackButton(props) {
+ const {
+ onClick,
+ as = build_module_button,
+ ...otherProps
+ } = useContextSystem(props, 'Navigator.BackButton');
+ const {
+ goBack
+ } = useNavigator();
+ const handleClick = (0,external_wp_element_namespaceObject.useCallback)(e => {
+ e.preventDefault();
+ goBack();
+ onClick?.(e);
+ }, [goBack, onClick]);
+ return {
+ as,
+ onClick: handleClick,
+ ...otherProps
+ };
+}
+
+;// ./node_modules/@wordpress/components/build-module/navigator/navigator-back-button/component.js
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+function UnconnectedNavigatorBackButton(props, forwardedRef) {
+ const navigatorBackButtonProps = useNavigatorBackButton(props);
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, {
+ ref: forwardedRef,
+ ...navigatorBackButtonProps
+ });
+}
+const NavigatorBackButton = contextConnect(UnconnectedNavigatorBackButton, 'Navigator.BackButton');
+
+;// ./node_modules/@wordpress/components/build-module/navigator/navigator-to-parent-button/component.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+function UnconnectedNavigatorToParentButton(props, forwardedRef) {
+ external_wp_deprecated_default()('wp.components.NavigatorToParentButton', {
+ since: '6.7',
+ alternative: 'wp.components.Navigator.BackButton'
+ });
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigatorBackButton, {
+ ref: forwardedRef,
+ ...props
+ });
+}
+
+/**
+ * @deprecated
+ */
+const NavigatorToParentButton = contextConnect(UnconnectedNavigatorToParentButton, 'Navigator.ToParentButton');
+
+;// ./node_modules/@wordpress/components/build-module/navigator/legacy.js
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+
/**
* The `NavigatorProvider` component allows rendering nested views/panels/menus
- * (via the `NavigatorScreen` component and navigate between these different
- * view (via the `NavigatorButton` and `NavigatorBackButton` components or the
- * `useNavigator` hook).
+ * (via the `NavigatorScreen` component and navigate between them
+ * (via the `NavigatorButton` and `NavigatorBackButton` components).
*
* ```jsx
* import {
@@ -63463,125 +61834,14 @@
* );
* ```
*/
-const NavigatorProvider = contextConnect(UnconnectedNavigatorProvider, 'NavigatorProvider');
-/* harmony default export */ const navigator_provider_component = (NavigatorProvider);
-
-;// CONCATENATED MODULE: external ["wp","escapeHtml"]
-const external_wp_escapeHtml_namespaceObject = window["wp"]["escapeHtml"];
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/navigator-screen/component.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-
-
-/**
- * Internal dependencies
- */
-
-
-
-
-
-
-
-function UnconnectedNavigatorScreen(props, forwardedRef) {
- const screenId = (0,external_wp_element_namespaceObject.useId)();
- const {
- children,
- className,
- path,
- ...otherProps
- } = useContextSystem(props, 'NavigatorScreen');
- const {
- location,
- match,
- addScreen,
- removeScreen
- } = (0,external_wp_element_namespaceObject.useContext)(NavigatorContext);
- const isMatch = match === screenId;
- const wrapperRef = (0,external_wp_element_namespaceObject.useRef)(null);
- (0,external_wp_element_namespaceObject.useEffect)(() => {
- const screen = {
- id: screenId,
- path: (0,external_wp_escapeHtml_namespaceObject.escapeAttribute)(path)
- };
- addScreen(screen);
- return () => removeScreen(screen);
- }, [screenId, path, addScreen, removeScreen]);
- const isRTL = (0,external_wp_i18n_namespaceObject.isRTL)();
- const {
- isInitial,
- isBack
- } = location;
- const cx = useCx();
- const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(navigatorScreen({
- isInitial,
- isBack,
- isRTL
- }), className), [className, cx, isInitial, isBack, isRTL]);
- const locationRef = (0,external_wp_element_namespaceObject.useRef)(location);
- (0,external_wp_element_namespaceObject.useEffect)(() => {
- locationRef.current = location;
- }, [location]);
-
- // Focus restoration
- const isInitialLocation = location.isInitial && !location.isBack;
- (0,external_wp_element_namespaceObject.useEffect)(() => {
- // Only attempt to restore focus:
- // - if the current location is not the initial one (to avoid moving focus on page load)
- // - when the screen becomes visible
- // - if the wrapper ref has been assigned
- // - if focus hasn't already been restored for the current location
- // - if the `skipFocus` option is not set to `true`. This is useful when we trigger the navigation outside of NavigatorScreen.
- if (isInitialLocation || !isMatch || !wrapperRef.current || locationRef.current.hasRestoredFocus || location.skipFocus) {
- return;
- }
- const activeElement = wrapperRef.current.ownerDocument.activeElement;
-
- // If an element is already focused within the wrapper do not focus the
- // element. This prevents inputs or buttons from losing focus unnecessarily.
- if (wrapperRef.current.contains(activeElement)) {
- return;
- }
- let elementToFocus = null;
-
- // When navigating back, if a selector is provided, use it to look for the
- // target element (assumed to be a node inside the current NavigatorScreen)
- if (location.isBack && location.focusTargetSelector) {
- elementToFocus = wrapperRef.current.querySelector(location.focusTargetSelector);
- }
-
- // If the previous query didn't run or find any element to focus, fallback
- // to the first tabbable element in the screen (or the screen itself).
- if (!elementToFocus) {
- const [firstTabbable] = external_wp_dom_namespaceObject.focus.tabbable.find(wrapperRef.current);
- elementToFocus = firstTabbable !== null && firstTabbable !== void 0 ? firstTabbable : wrapperRef.current;
- }
- locationRef.current.hasRestoredFocus = true;
- elementToFocus.focus();
- }, [isInitialLocation, isMatch, location.isBack, location.focusTargetSelector, location.skipFocus]);
- const mergedWrapperRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([forwardedRef, wrapperRef]);
- return isMatch ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, {
- ref: mergedWrapperRef,
- className: classes,
- ...otherProps,
- children: children
- }) : null;
-}
+const NavigatorProvider = Object.assign(component_Navigator, {
+ displayName: 'NavigatorProvider'
+});
/**
* The `NavigatorScreen` component represents a single view/screen/panel and
* should be used in combination with the `NavigatorProvider`, the
- * `NavigatorButton` and the `NavigatorBackButton` components (or the `useNavigator`
- * hook).
+ * `NavigatorButton` and the `NavigatorBackButton` components.
*
* @example
* ```jsx
@@ -63611,107 +61871,14 @@
* );
* ```
*/
-const NavigatorScreen = contextConnect(UnconnectedNavigatorScreen, 'NavigatorScreen');
-/* harmony default export */ const navigator_screen_component = (NavigatorScreen);
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/use-navigator.js
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
-/**
- * Retrieves a `navigator` instance.
- */
-function useNavigator() {
- const {
- location,
- params,
- goTo,
- goBack,
- goToParent
- } = (0,external_wp_element_namespaceObject.useContext)(NavigatorContext);
- return {
- location,
- goTo,
- goBack,
- goToParent,
- params
- };
-}
-/* harmony default export */ const use_navigator = (useNavigator);
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/navigator-button/hook.js
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
-
-
-
-const cssSelectorForAttribute = (attrName, attrValue) => `[${attrName}="${attrValue}"]`;
-function useNavigatorButton(props) {
- const {
- path,
- onClick,
- as = build_module_button,
- attributeName = 'id',
- ...otherProps
- } = useContextSystem(props, 'NavigatorButton');
- const escapedPath = (0,external_wp_escapeHtml_namespaceObject.escapeAttribute)(path);
- const {
- goTo
- } = use_navigator();
- const handleClick = (0,external_wp_element_namespaceObject.useCallback)(e => {
- e.preventDefault();
- goTo(escapedPath, {
- focusTargetSelector: cssSelectorForAttribute(attributeName, escapedPath)
- });
- onClick?.(e);
- }, [goTo, onClick, attributeName, escapedPath]);
- return {
- as,
- onClick: handleClick,
- ...otherProps,
- [attributeName]: escapedPath
- };
-}
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/navigator-button/component.js
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-
-
-
-
-function UnconnectedNavigatorButton(props, forwardedRef) {
- const navigatorButtonProps = useNavigatorButton(props);
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, {
- ref: forwardedRef,
- ...navigatorButtonProps
- });
-}
+const legacy_NavigatorScreen = Object.assign(NavigatorScreen, {
+ displayName: 'NavigatorScreen'
+});
/**
* The `NavigatorButton` component can be used to navigate to a screen and should
* be used in combination with the `NavigatorProvider`, the `NavigatorScreen`
- * and the `NavigatorBackButton` components (or the `useNavigator` hook).
+ * and the `NavigatorBackButton` components.
*
* @example
* ```jsx
@@ -63741,75 +61908,14 @@
* );
* ```
*/
-const NavigatorButton = contextConnect(UnconnectedNavigatorButton, 'NavigatorButton');
-/* harmony default export */ const navigator_button_component = (NavigatorButton);
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/navigator-back-button/hook.js
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
-
-
-
-function useNavigatorBackButton(props) {
- const {
- onClick,
- as = build_module_button,
- goToParent: goToParentProp = false,
- ...otherProps
- } = useContextSystem(props, 'NavigatorBackButton');
- const {
- goBack,
- goToParent
- } = use_navigator();
- const handleClick = (0,external_wp_element_namespaceObject.useCallback)(e => {
- e.preventDefault();
- if (goToParentProp) {
- goToParent();
- } else {
- goBack();
- }
- onClick?.(e);
- }, [goToParentProp, goToParent, goBack, onClick]);
- return {
- as,
- onClick: handleClick,
- ...otherProps
- };
-}
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/navigator-back-button/component.js
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-
-
-
-
-function UnconnectedNavigatorBackButton(props, forwardedRef) {
- const navigatorBackButtonProps = useNavigatorBackButton(props);
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, {
- ref: forwardedRef,
- ...navigatorBackButtonProps
- });
-}
+const legacy_NavigatorButton = Object.assign(NavigatorButton, {
+ displayName: 'NavigatorButton'
+});
/**
* The `NavigatorBackButton` component can be used to navigate to a screen and
* should be used in combination with the `NavigatorProvider`, the
- * `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator`
- * hook).
+ * `NavigatorScreen` and the `NavigatorButton` components.
*
* @example
* ```jsx
@@ -63832,95 +61938,177 @@
* <NavigatorScreen path="/child">
* <p>This is the child screen.</p>
* <NavigatorBackButton>
- * Go back
+ * Go back (to parent)
* </NavigatorBackButton>
* </NavigatorScreen>
* </NavigatorProvider>
* );
* ```
*/
-const NavigatorBackButton = contextConnect(UnconnectedNavigatorBackButton, 'NavigatorBackButton');
-/* harmony default export */ const navigator_back_button_component = (NavigatorBackButton);
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/navigator-to-parent-button/component.js
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-
-
-
-
-function UnconnectedNavigatorToParentButton(props, forwardedRef) {
- const navigatorToParentButtonProps = useNavigatorBackButton({
- ...props,
- goToParent: true
- });
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, {
- ref: forwardedRef,
- ...navigatorToParentButtonProps
- });
-}
-
-/*
- * The `NavigatorToParentButton` component can be used to navigate to a screen and
- * should be used in combination with the `NavigatorProvider`, the
- * `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator`
- * hook).
- *
- * @example
- * ```jsx
- * import {
- * __experimentalNavigatorProvider as NavigatorProvider,
- * __experimentalNavigatorScreen as NavigatorScreen,
- * __experimentalNavigatorButton as NavigatorButton,
- * __experimentalNavigatorToParentButton as NavigatorToParentButton,
- * } from '@wordpress/components';
+const legacy_NavigatorBackButton = Object.assign(NavigatorBackButton, {
+ displayName: 'NavigatorBackButton'
+});
+
+/**
+ * _Note: this component is deprecated. Please use the `NavigatorBackButton`
+ * component instead._
+ *
+ * @deprecated
+ */
+const legacy_NavigatorToParentButton = Object.assign(NavigatorToParentButton, {
+ displayName: 'NavigatorToParentButton'
+});
+
+;// ./node_modules/@wordpress/components/build-module/navigator/index.js
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+
+/**
+ * The `Navigator` component allows rendering nested views/panels/menus
+ * (via the `Navigator.Screen` component) and navigate between them
+ * (via the `Navigator.Button` and `Navigator.BackButton` components).
+ *
+ * ```jsx
+ * import { Navigator } from '@wordpress/components';
*
* const MyNavigation = () => (
- * <NavigatorProvider initialPath="/">
- * <NavigatorScreen path="/">
+ * <Navigator initialPath="/">
+ * <Navigator.Screen path="/">
* <p>This is the home screen.</p>
- * <NavigatorButton path="/child">
+ * <Navigator.Button path="/child">
* Navigate to child screen.
- * </NavigatorButton>
- * </NavigatorScreen>
- *
- * <NavigatorScreen path="/child">
+ * </Navigator.Button>
+ * </Navigator.Screen>
+ *
+ * <Navigator.Screen path="/child">
* <p>This is the child screen.</p>
- * <NavigatorToParentButton>
- * Go to parent
- * </NavigatorToParentButton>
- * </NavigatorScreen>
- * </NavigatorProvider>
+ * <Navigator.BackButton>
+ * Go back
+ * </Navigator.BackButton>
+ * </Navigator.Screen>
+ * </Navigator>
* );
* ```
*/
-const NavigatorToParentButton = contextConnect(UnconnectedNavigatorToParentButton, 'NavigatorToParentButton');
-/* harmony default export */ const navigator_to_parent_button_component = (NavigatorToParentButton);
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/notice/index.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-
-/**
- * Internal dependencies
- */
-
+const navigator_Navigator = Object.assign(component_Navigator, {
+ /**
+ * The `Navigator.Screen` component represents a single view/screen/panel and
+ * should be used in combination with the `Navigator`, the `Navigator.Button`
+ * and the `Navigator.BackButton` components.
+ *
+ * @example
+ * ```jsx
+ * import { Navigator } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ * <Navigator initialPath="/">
+ * <Navigator.Screen path="/">
+ * <p>This is the home screen.</p>
+ * <Navigator.Button path="/child">
+ * Navigate to child screen.
+ * </Navigator.Button>
+ * </Navigator.Screen>
+ *
+ * <Navigator.Screen path="/child">
+ * <p>This is the child screen.</p>
+ * <Navigator.BackButton>
+ * Go back
+ * </Navigator.BackButton>
+ * </Navigator.Screen>
+ * </Navigator>
+ * );
+ * ```
+ */
+ Screen: Object.assign(NavigatorScreen, {
+ displayName: 'Navigator.Screen'
+ }),
+ /**
+ * The `Navigator.Button` component can be used to navigate to a screen and
+ * should be used in combination with the `Navigator`, the `Navigator.Screen`
+ * and the `Navigator.BackButton` components.
+ *
+ * @example
+ * ```jsx
+ * import { Navigator } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ * <Navigator initialPath="/">
+ * <Navigator.Screen path="/">
+ * <p>This is the home screen.</p>
+ * <Navigator.Button path="/child">
+ * Navigate to child screen.
+ * </Navigator.Button>
+ * </Navigator.Screen>
+ *
+ * <Navigator.Screen path="/child">
+ * <p>This is the child screen.</p>
+ * <Navigator.BackButton>
+ * Go back
+ * </Navigator.BackButton>
+ * </Navigator.Screen>
+ * </Navigator>
+ * );
+ * ```
+ */
+ Button: Object.assign(NavigatorButton, {
+ displayName: 'Navigator.Button'
+ }),
+ /**
+ * The `Navigator.BackButton` component can be used to navigate to a screen and
+ * should be used in combination with the `Navigator`, the `Navigator.Screen`
+ * and the `Navigator.Button` components.
+ *
+ * @example
+ * ```jsx
+ * import { Navigator } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ * <Navigator initialPath="/">
+ * <Navigator.Screen path="/">
+ * <p>This is the home screen.</p>
+ * <Navigator.Button path="/child">
+ * Navigate to child screen.
+ * </Navigator.Button>
+ * </Navigator.Screen>
+ *
+ * <Navigator.Screen path="/child">
+ * <p>This is the child screen.</p>
+ * <Navigator.BackButton>
+ * Go back
+ * </Navigator.BackButton>
+ * </Navigator.Screen>
+ * </Navigator>
+ * );
+ * ```
+ */
+ BackButton: Object.assign(NavigatorBackButton, {
+ displayName: 'Navigator.BackButton'
+ })
+});
+
+;// ./node_modules/@wordpress/components/build-module/notice/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -64027,6 +62215,7 @@
computedVariant = 'primary';
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
+ __next40pxDefaultSize: true,
href: url,
variant: computedVariant,
onClick: url ? undefined : onClick,
@@ -64036,6 +62225,7 @@
})
})]
}), isDismissible && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
+ size: "small",
className: "components-notice__dismiss",
icon: library_close,
label: (0,external_wp_i18n_namespaceObject.__)('Close'),
@@ -64045,7 +62235,7 @@
}
/* harmony default export */ const build_module_notice = (Notice);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/notice/list.js
+;// ./node_modules/@wordpress/components/build-module/notice/list.js
/**
* External dependencies
*/
@@ -64110,8 +62300,7 @@
}
/* harmony default export */ const list = (NoticeList);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/panel/header.js
-
+;// ./node_modules/@wordpress/components/build-module/panel/header.js
/**
* Internal dependencies
@@ -64135,21 +62324,20 @@
}
/* harmony default export */ const panel_header = (PanelHeader);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/panel/index.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/panel/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
function UnforwardedPanel({
@@ -64186,7 +62374,7 @@
const Panel = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedPanel);
/* harmony default export */ const panel = (Panel);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-up.js
+;// ./node_modules/@wordpress/icons/build-module/library/chevron-up.js
/**
* WordPress dependencies
*/
@@ -64201,23 +62389,22 @@
});
/* harmony default export */ const chevron_up = (chevronUp);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/panel/body.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/panel/body.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -64299,6 +62486,7 @@
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("h2", {
className: "components-panel__body-title",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(build_module_button, {
+ __next40pxDefaultSize: true,
className: "components-panel__body-toggle",
"aria-expanded": isOpened,
ref: ref,
@@ -64320,7 +62508,7 @@
const PanelBody = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedPanelBody);
/* harmony default export */ const body = (PanelBody);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/panel/row.js
+;// ./node_modules/@wordpress/components/build-module/panel/row.js
/**
* External dependencies
*/
@@ -64353,24 +62541,23 @@
const PanelRow = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedPanelRow);
/* harmony default export */ const row = (PanelRow);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/placeholder/index.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/placeholder/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+
+/**
+ * Internal dependencies
+ */
const PlaceholderIllustration = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
@@ -64453,7 +62640,7 @@
}
/* harmony default export */ const placeholder = (Placeholder);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/progress-bar/styles.js
+;// ./node_modules/@wordpress/components/build-module/progress-bar/styles.js
function progress_bar_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
@@ -64463,36 +62650,44 @@
/**
- * Internal dependencies
- */
-
-const animateProgressBar = emotion_react_browser_esm_keyframes({
- '0%': {
- left: '-50%'
- },
- '100%': {
- left: '100%'
- }
-});
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+function animateProgressBar(isRtl = false) {
+ const animationDirection = isRtl ? 'right' : 'left';
+ return emotion_react_browser_esm_keyframes({
+ '0%': {
+ [animationDirection]: '-50%'
+ },
+ '100%': {
+ [animationDirection]: '100%'
+ }
+ });
+}
// Width of the indicator for the indeterminate progress bar
const INDETERMINATE_TRACK_WIDTH = 50;
const styles_Track = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
target: "e15u147w2"
-} : 0)("position:relative;overflow:hidden;height:", config_values.borderWidthFocus, ";background-color:color-mix(\n\t\tin srgb,\n\t\t", COLORS.theme.foreground, ",\n\t\ttransparent 90%\n\t);border-radius:", config_values.radiusBlockUi, ";outline:2px solid transparent;outline-offset:2px;:where( & ){width:160px;}" + ( true ? "" : 0));
+} : 0)("position:relative;overflow:hidden;height:", config_values.borderWidthFocus, ";background-color:color-mix(\n\t\tin srgb,\n\t\t", COLORS.theme.foreground, ",\n\t\ttransparent 90%\n\t);border-radius:", config_values.radiusFull, ";outline:2px solid transparent;outline-offset:2px;:where( & ){width:160px;}" + ( true ? "" : 0));
var progress_bar_styles_ref = true ? {
name: "152sa26",
styles: "width:var(--indicator-width);transition:width 0.4s ease-in-out"
} : 0;
const Indicator = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
target: "e15u147w1"
-} : 0)("display:inline-block;position:absolute;top:0;height:100%;border-radius:", config_values.radiusBlockUi, ";background-color:color-mix(\n\t\tin srgb,\n\t\t", COLORS.theme.foreground, ",\n\t\ttransparent 10%\n\t);outline:2px solid transparent;outline-offset:-2px;", ({
+} : 0)("display:inline-block;position:absolute;top:0;height:100%;border-radius:", config_values.radiusFull, ";background-color:color-mix(\n\t\tin srgb,\n\t\t", COLORS.theme.foreground, ",\n\t\ttransparent 10%\n\t);outline:2px solid transparent;outline-offset:-2px;", ({
isIndeterminate
}) => isIndeterminate ? /*#__PURE__*/emotion_react_browser_esm_css({
animationDuration: '1.5s',
animationTimingFunction: 'ease-in-out',
animationIterationCount: 'infinite',
- animationName: animateProgressBar,
+ animationName: animateProgressBar((0,external_wp_i18n_namespaceObject.isRTL)()),
width: `${INDETERMINATE_TRACK_WIDTH}%`
}, true ? "" : 0, true ? "" : 0) : progress_bar_styles_ref, ";" + ( true ? "" : 0));
const ProgressElement = /*#__PURE__*/emotion_styled_base_browser_esm("progress", true ? {
@@ -64502,21 +62697,20 @@
styles: "position:absolute;top:0;left:0;opacity:0;width:100%;height:100%"
} : 0);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/progress-bar/index.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/progress-bar/index.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
function UnforwardedProgressBar(props, ref) {
@@ -64561,7 +62755,7 @@
const ProgressBar = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedProgressBar);
/* harmony default export */ const progress_bar = (ProgressBar);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/query-controls/terms.js
+;// ./node_modules/@wordpress/components/build-module/query-controls/terms.js
/**
* Internal dependencies
*/
@@ -64613,21 +62807,32 @@
return fillWithChildren(termsByParent['0'] || []);
}
-;// CONCATENATED MODULE: external ["wp","htmlEntities"]
+;// external ["wp","htmlEntities"]
const external_wp_htmlEntities_namespaceObject = window["wp"]["htmlEntities"];
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-select/index.js
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
-
-
+;// ./node_modules/@wordpress/components/build-module/tree-select/index.js
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+const tree_select_CONTEXT_VALUE = {
+ BaseControl: {
+ // Temporary during deprecation grace period: Overrides the underlying `__associatedWPComponentName`
+ // via the context system to override the value set by SelectControl.
+ _overrides: {
+ __associatedWPComponentName: 'TreeSelect'
+ }
+ }
+};
function getSelectOptions(tree, level = 0) {
return tree.flatMap(treeNode => [{
value: treeNode.id,
@@ -64636,17 +62841,19 @@
}
/**
- * TreeSelect component is used to generate select input fields.
- *
- * ```jsx
+ * Generates a hierarchical select input.
+ *
+ * ```jsx
+ * import { useState } from 'react';
* import { TreeSelect } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
*
* const MyTreeSelect = () => {
* const [ page, setPage ] = useState( 'p21' );
*
* return (
* <TreeSelect
+ * __nextHasNoMarginBottom
+ * __next40pxDefaultSize
* label="Parent page"
* noOptionLabel="No parent page"
* onChange={ ( newPage ) => setPage( newPage ) }
@@ -64682,7 +62889,6 @@
* }
* ```
*/
-
function TreeSelect(props) {
const {
label,
@@ -64698,17 +62904,26 @@
label: noOptionLabel
}, ...getSelectOptions(tree)].filter(option => !!option);
}, [noOptionLabel, tree]);
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectControl, {
- label,
- options,
- onChange,
- value: selectedId,
- ...restProps
+ maybeWarnDeprecated36pxSize({
+ componentName: 'TreeSelect',
+ size: restProps.size,
+ __next40pxDefaultSize: restProps.__next40pxDefaultSize
+ });
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ContextSystemProvider, {
+ value: tree_select_CONTEXT_VALUE,
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectControl, {
+ __shouldNotWarnDeprecated36pxSize: true,
+ label,
+ options,
+ onChange,
+ value: selectedId,
+ ...restProps
+ })
});
}
/* harmony default export */ const tree_select = (TreeSelect);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/query-controls/author-select.js
+;// ./node_modules/@wordpress/components/build-module/query-controls/author-select.js
/**
* Internal dependencies
*/
@@ -64738,7 +62953,7 @@
});
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/query-controls/category-select.js
+;// ./node_modules/@wordpress/components/build-module/query-controls/category-select.js
/**
* Internal dependencies
*/
@@ -64774,7 +62989,7 @@
});
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/query-controls/index.js
+;// ./node_modules/@wordpress/components/build-module/query-controls/index.js
/**
* WordPress dependencies
*/
@@ -64799,6 +63014,21 @@
function isMultipleCategorySelection(props) {
return 'categorySuggestions' in props;
}
+const defaultOrderByOptions = [{
+ label: (0,external_wp_i18n_namespaceObject.__)('Newest to oldest'),
+ value: 'date/desc'
+}, {
+ label: (0,external_wp_i18n_namespaceObject.__)('Oldest to newest'),
+ value: 'date/asc'
+}, {
+ /* translators: Label for ordering posts by title in ascending order. */
+ label: (0,external_wp_i18n_namespaceObject.__)('A → Z'),
+ value: 'title/asc'
+}, {
+ /* translators: Label for ordering posts by title in descending order. */
+ label: (0,external_wp_i18n_namespaceObject.__)('Z → A'),
+ value: 'title/desc'
+}];
/**
* Controls to query for posts.
@@ -64806,7 +63036,7 @@
* ```jsx
* const MyQueryControls = () => (
* <QueryControls
- * { ...{ maxItems, minItems, numberOfItems, order, orderBy } }
+ * { ...{ maxItems, minItems, numberOfItems, order, orderBy, orderByOptions } }
* onOrderByChange={ ( newOrderBy ) => {
* updateQuery( { orderBy: newOrderBy } )
* }
@@ -64826,12 +63056,12 @@
* ```
*/
function QueryControls({
- __next40pxDefaultSize = false,
authorList,
selectedAuthorId,
numberOfItems,
order,
orderBy,
+ orderByOptions = defaultOrderByOptions,
maxItems = DEFAULT_MAX_ITEMS,
minItems = DEFAULT_MIN_ITEMS,
onAuthorChange,
@@ -64847,24 +63077,10 @@
className: "components-query-controls",
children: [onOrderChange && onOrderByChange && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(select_control, {
__nextHasNoMarginBottom: true,
- __next40pxDefaultSize: __next40pxDefaultSize,
+ __next40pxDefaultSize: true,
label: (0,external_wp_i18n_namespaceObject.__)('Order by'),
- value: `${orderBy}/${order}`,
- options: [{
- label: (0,external_wp_i18n_namespaceObject.__)('Newest to oldest'),
- value: 'date/desc'
- }, {
- label: (0,external_wp_i18n_namespaceObject.__)('Oldest to newest'),
- value: 'date/asc'
- }, {
- /* translators: Label for ordering posts by title in ascending order. */
- label: (0,external_wp_i18n_namespaceObject.__)('A → Z'),
- value: 'title/asc'
- }, {
- /* translators: Label for ordering posts by title in descending order. */
- label: (0,external_wp_i18n_namespaceObject.__)('Z → A'),
- value: 'title/desc'
- }],
+ value: orderBy === undefined || order === undefined ? undefined : `${orderBy}/${order}`,
+ options: orderByOptions,
onChange: value => {
if (typeof value !== 'string') {
return;
@@ -64878,14 +63094,14 @@
}
}
}, "query-controls-order-select"), isSingleCategorySelection(props) && props.categoriesList && props.onCategoryChange && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CategorySelect, {
- __next40pxDefaultSize: __next40pxDefaultSize,
+ __next40pxDefaultSize: true,
categoriesList: props.categoriesList,
label: (0,external_wp_i18n_namespaceObject.__)('Category'),
noOptionLabel: (0,external_wp_i18n_namespaceObject._x)('All', 'categories'),
selectedCategoryId: props.selectedCategoryId,
onChange: props.onCategoryChange
}, "query-controls-category-select"), isMultipleCategorySelection(props) && props.categorySuggestions && props.onCategoryChange && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(form_token_field, {
- __next40pxDefaultSize: __next40pxDefaultSize,
+ __next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
label: (0,external_wp_i18n_namespaceObject.__)('Categories'),
value: props.selectedCategories && props.selectedCategories.map(item => ({
@@ -64900,7 +63116,7 @@
onChange: props.onCategoryChange,
maxSuggestions: MAX_CATEGORIES_SUGGESTIONS
}, "query-controls-categories-select"), onAuthorChange && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AuthorSelect, {
- __next40pxDefaultSize: __next40pxDefaultSize,
+ __next40pxDefaultSize: true,
authorList: authorList,
label: (0,external_wp_i18n_namespaceObject.__)('Author'),
noOptionLabel: (0,external_wp_i18n_namespaceObject._x)('All', 'authors'),
@@ -64908,7 +63124,7 @@
onChange: onAuthorChange
}, "query-controls-author-select"), onNumberOfItemsChange && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(range_control, {
__nextHasNoMarginBottom: true,
- __next40pxDefaultSize: __next40pxDefaultSize,
+ __next40pxDefaultSize: true,
label: (0,external_wp_i18n_namespaceObject.__)('Number of items'),
value: numberOfItems,
onChange: onNumberOfItemsChange,
@@ -64920,11 +63136,10 @@
}
/* harmony default export */ const query_controls = (QueryControls);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/radio-group/context.js
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
+;// ./node_modules/@wordpress/components/build-module/radio-group/context.js
+/**
+ * External dependencies
+ */
/**
* WordPress dependencies
@@ -64935,21 +63150,21 @@
disabled: undefined
});
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/radio-group/radio.js
-/**
- * WordPress dependencies
- */
-
-
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-
-
-/**
- * Internal dependencies
- */
+;// ./node_modules/@wordpress/components/build-module/radio-group/radio.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * External dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
@@ -64962,8 +63177,13 @@
store,
disabled
} = (0,external_wp_element_namespaceObject.useContext)(RadioGroupContext);
- const selectedValue = store?.useState('value');
+ const selectedValue = useStoreState(store, 'value');
const isChecked = selectedValue !== undefined && selectedValue === value;
+ maybeWarnDeprecated36pxSize({
+ componentName: 'Radio',
+ size: undefined,
+ __next40pxDefaultSize: props.__next40pxDefaultSize
+ });
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Radio, {
disabled: disabled,
store: store,
@@ -64983,16 +63203,17 @@
const radio_Radio = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedRadio);
/* harmony default export */ const radio_group_radio = (radio_Radio);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/radio-group/index.js
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-
-
-/**
- * WordPress dependencies
- */
+;// ./node_modules/@wordpress/components/build-module/radio-group/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
/**
@@ -65015,17 +63236,23 @@
defaultValue: defaultChecked,
setValue: newValue => {
onChange?.(newValue !== null && newValue !== void 0 ? newValue : undefined);
- }
+ },
+ rtl: (0,external_wp_i18n_namespaceObject.isRTL)()
});
const contextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
store: radioStore,
disabled
}), [radioStore, disabled]);
+ external_wp_deprecated_default()('wp.components.__experimentalRadioGroup', {
+ alternative: 'wp.components.RadioControl or wp.components.__experimentalToggleGroupControl',
+ since: '6.8'
+ });
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RadioGroupContext.Provider, {
value: contextValue,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RadioGroup, {
store: radioStore,
render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(button_group, {
+ __shouldNotWarnDeprecated: true,
children: children
}),
"aria-label": label,
@@ -65041,21 +63268,33 @@
const radio_group_RadioGroup = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedRadioGroup);
/* harmony default export */ const radio_group = (radio_group_RadioGroup);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/radio-control/index.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
-
+;// ./node_modules/@wordpress/components/build-module/radio-control/index.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+function generateOptionDescriptionId(radioGroupId, index) {
+ return `${radioGroupId}-${index}-option-description`;
+}
+function generateOptionId(radioGroupId, index) {
+ return `${radioGroupId}-${index}`;
+}
+function generateHelpId(radioGroupId) {
+ return `${radioGroupId}__help`;
+}
/**
* Render a user interface to select the user type using radio inputs.
@@ -65082,8 +63321,6 @@
* };
* ```
*/
-
-
function RadioControl(props) {
const {
label,
@@ -65093,47 +63330,63 @@
onChange,
hideLabelFromVision,
options = [],
+ id: preferredId,
...additionalProps
} = props;
- const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(RadioControl);
- const id = `inspector-radio-control-${instanceId}`;
+ const id = (0,external_wp_compose_namespaceObject.useInstanceId)(RadioControl, 'inspector-radio-control', preferredId);
const onChangeValue = event => onChange(event.target.value);
if (!options?.length) {
return null;
}
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, {
- __nextHasNoMarginBottom: true,
- label: label,
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("fieldset", {
id: id,
- hideLabelFromVision: hideLabelFromVision,
- help: help,
className: dist_clsx(className, 'components-radio-control'),
- children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(v_stack_component, {
- spacing: 1,
+ "aria-describedby": !!help ? generateHelpId(id) : undefined,
+ children: [hideLabelFromVision ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, {
+ as: "legend",
+ children: label
+ }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control.VisualLabel, {
+ as: "legend",
+ children: label
+ }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(v_stack_component, {
+ spacing: 3,
+ className: dist_clsx('components-radio-control__group-wrapper', {
+ 'has-help': !!help
+ }),
children: options.map((option, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "components-radio-control__option",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("input", {
- id: `${id}-${index}`,
+ id: generateOptionId(id, index),
className: "components-radio-control__input",
type: "radio",
name: id,
value: option.value,
onChange: onChangeValue,
checked: option.value === selected,
- "aria-describedby": !!help ? `${id}__help` : undefined,
+ "aria-describedby": !!option.description ? generateOptionDescriptionId(id, index) : undefined,
...additionalProps
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("label", {
className: "components-radio-control__label",
- htmlFor: `${id}-${index}`,
+ htmlFor: generateOptionId(id, index),
children: option.label
- })]
- }, `${id}-${index}`))
- })
+ }), !!option.description ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledHelp, {
+ __nextHasNoMarginBottom: true,
+ id: generateOptionDescriptionId(id, index),
+ className: "components-radio-control__option-description",
+ children: option.description
+ }) : null]
+ }, generateOptionId(id, index)))
+ }), !!help && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledHelp, {
+ __nextHasNoMarginBottom: true,
+ id: generateHelpId(id),
+ className: "components-base-control__help",
+ children: help
+ })]
});
}
/* harmony default export */ const radio_control = (RadioControl);
-;// CONCATENATED MODULE: ./node_modules/re-resizable/lib/resizer.js
+;// ./node_modules/re-resizable/lib/resizer.js
var resizer_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
@@ -65207,7 +63460,7 @@
}(external_React_.PureComponent));
-;// CONCATENATED MODULE: ./node_modules/re-resizable/lib/index.js
+;// ./node_modules/re-resizable/lib/index.js
var lib_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
@@ -65965,7 +64218,7 @@
}(external_React_.PureComponent));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/utils.js
+;// ./node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/utils.js
/**
* WordPress dependencies
*/
@@ -66171,7 +64424,7 @@
return undefined;
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js
+;// ./node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js
function resize_tooltip_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
@@ -66197,7 +64450,7 @@
} : 0);
const resize_tooltip_styles_Tooltip = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
target: "e1wq7y4k1"
-} : 0)("background:", COLORS.theme.foreground, ";border-radius:2px;box-sizing:border-box;font-family:", font('default.fontFamily'), ";font-size:12px;color:", COLORS.theme.foregroundInverted, ";padding:4px 8px;position:relative;" + ( true ? "" : 0));
+} : 0)("background:", COLORS.theme.foreground, ";border-radius:", config_values.radiusSmall, ";box-sizing:border-box;font-family:", font('default.fontFamily'), ";font-size:12px;color:", COLORS.theme.foregroundInverted, ";padding:4px 8px;position:relative;" + ( true ? "" : 0));
// TODO: Resolve need to use &&& to increase specificity
// https://github.com/WordPress/gutenberg/issues/18483
@@ -66206,7 +64459,7 @@
target: "e1wq7y4k0"
} : 0)("&&&{color:", COLORS.theme.foregroundInverted, ";display:block;font-size:13px;line-height:1.4;white-space:nowrap;}" + ( true ? "" : 0));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/label.js
+;// ./node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/label.js
/**
* External dependencies
*/
@@ -66283,20 +64536,19 @@
const label_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(resize_tooltip_label_Label);
/* harmony default export */ const resize_tooltip_label = (label_ForwardedComponent);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/index.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/index.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
@@ -66345,21 +64597,20 @@
const resize_tooltip_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(ResizeTooltip);
/* harmony default export */ const resize_tooltip = (resize_tooltip_ForwardedComponent);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/resizable-box/index.js
-/**
- * WordPress dependencies
- */
-
-
-/**
- * External dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/resizable-box/index.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * External dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
const HANDLE_CLASS_NAME = 'components-resizable-box__handle';
@@ -66404,7 +64655,15 @@
...props
}, ref) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Resizable, {
- className: dist_clsx('components-resizable-box__container', showHandle && 'has-show-handle', className),
+ className: dist_clsx('components-resizable-box__container', showHandle && 'has-show-handle', className)
+ // Add a focusable element within the drag handle. Unfortunately,
+ // `re-resizable` does not make them properly focusable by default,
+ // causing focus to move the the block wrapper which triggers block
+ // drag.
+ ,
+ handleComponent: Object.fromEntries(Object.keys(HANDLE_CLASSES).map(key => [key, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
+ tabIndex: -1
+ }, key)])),
handleClasses: HANDLE_CLASSES,
handleStyles: HANDLE_STYLES,
ref: ref,
@@ -66417,7 +64676,7 @@
const ResizableBox = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedResizableBox);
/* harmony default export */ const resizable_box = (ResizableBox);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/responsive-wrapper/index.js
+;// ./node_modules/@wordpress/components/build-module/responsive-wrapper/index.js
/**
* External dependencies
*/
@@ -66477,17 +64736,16 @@
}
/* harmony default export */ const responsive_wrapper = (ResponsiveWrapper);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/sandbox/index.js
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/sandbox/index.js
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
const observeAndResizeJS = function () {
const {
@@ -66693,21 +64951,18 @@
iframe?.removeEventListener('load', tryNoForceSandBox, false);
defaultView?.removeEventListener('message', checkMessageForResize);
};
- // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
+ // Passing `exhaustive-deps` will likely involve a more detailed refactor.
// See https://github.com/WordPress/gutenberg/pull/44378
- // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
(0,external_wp_element_namespaceObject.useEffect)(() => {
trySandBox();
- // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
+ // Passing `exhaustive-deps` will likely involve a more detailed refactor.
// See https://github.com/WordPress/gutenberg/pull/44378
- // eslint-disable-next-line react-hooks/exhaustive-deps
}, [title, styles, scripts]);
(0,external_wp_element_namespaceObject.useEffect)(() => {
trySandBox(true);
- // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
+ // Passing `exhaustive-deps` will likely involve a more detailed refactor.
// See https://github.com/WordPress/gutenberg/pull/44378
- // eslint-disable-next-line react-hooks/exhaustive-deps
}, [html, type]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("iframe", {
ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, (0,external_wp_compose_namespaceObject.useFocusableIframe)()]),
@@ -66722,25 +64977,24 @@
}
/* harmony default export */ const sandbox = (SandBox);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/snackbar/index.js
-/**
- * External dependencies
- */
-
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/snackbar/index.js
+/**
+ * External dependencies
+ */
+
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+
+/**
+ * Internal dependencies
+ */
const NOTICE_TIMEOUT = 10000;
@@ -66796,12 +65050,12 @@
// The `onDismiss/onRemove` can have unstable references,
// trigger side-effect cleanup, and reset timers.
- const callbackRefs = (0,external_wp_element_namespaceObject.useRef)({
+ const callbacksRef = (0,external_wp_element_namespaceObject.useRef)({
onDismiss,
onRemove
});
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
- callbackRefs.current = {
+ callbacksRef.current = {
onDismiss,
onRemove
};
@@ -66810,8 +65064,8 @@
// Only set up the timeout dismiss if we're not explicitly dismissing.
const timeoutHandle = setTimeout(() => {
if (!explicitDismiss) {
- callbackRefs.current.onDismiss?.();
- callbackRefs.current.onRemove?.();
+ callbacksRef.current.onDismiss?.();
+ callbacksRef.current.onRemove?.();
}
}, NOTICE_TIMEOUT);
return () => clearTimeout(timeoutHandle);
@@ -66848,8 +65102,9 @@
url
}, index) => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
+ __next40pxDefaultSize: true,
href: url,
- variant: "tertiary",
+ variant: "link",
onClick: event => onActionClick(event, onClick),
className: "components-snackbar__action",
children: label
@@ -66882,22 +65137,21 @@
const Snackbar = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSnackbar);
/* harmony default export */ const snackbar = (Snackbar);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/snackbar/list.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/snackbar/list.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -66989,96 +65243,7 @@
}
/* harmony default export */ const snackbar_list = (SnackbarList);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/spinner/styles.js
-
-function spinner_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-/**
- * External dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
-const spinAnimation = emotion_react_browser_esm_keyframes`
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
- `;
-const StyledSpinner = /*#__PURE__*/emotion_styled_base_browser_esm("svg", true ? {
- target: "ea4tfvq2"
-} : 0)("width:", config_values.spinnerSize, "px;height:", config_values.spinnerSize, "px;display:inline-block;margin:5px 11px 0;position:relative;color:", COLORS.theme.accent, ";overflow:visible;opacity:1;background-color:transparent;" + ( true ? "" : 0));
-const commonPathProps = true ? {
- name: "9s4963",
- styles: "fill:transparent;stroke-width:1.5px"
-} : 0;
-const SpinnerTrack = /*#__PURE__*/emotion_styled_base_browser_esm("circle", true ? {
- target: "ea4tfvq1"
-} : 0)(commonPathProps, ";stroke:", COLORS.gray[300], ";" + ( true ? "" : 0));
-const SpinnerIndicator = /*#__PURE__*/emotion_styled_base_browser_esm("path", true ? {
- target: "ea4tfvq0"
-} : 0)(commonPathProps, ";stroke:currentColor;stroke-linecap:round;transform-origin:50% 50%;animation:1.4s linear infinite both ", spinAnimation, ";" + ( true ? "" : 0));
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/spinner/index.js
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-
-function UnforwardedSpinner({
- className,
- ...props
-}, forwardedRef) {
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(StyledSpinner, {
- className: dist_clsx('components-spinner', className),
- viewBox: "0 0 100 100",
- width: "16",
- height: "16",
- xmlns: "http://www.w3.org/2000/svg",
- role: "presentation",
- focusable: "false",
- ...props,
- ref: forwardedRef,
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SpinnerTrack, {
- cx: "50",
- cy: "50",
- r: "50",
- vectorEffect: "non-scaling-stroke"
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SpinnerIndicator, {
- d: "m 50 0 a 50 50 0 0 1 50 50",
- vectorEffect: "non-scaling-stroke"
- })]
- });
-}
-/**
- * `Spinner` is a component used to notify users that their action is being processed.
- *
- * ```js
- * import { Spinner } from '@wordpress/components';
- *
- * function Example() {
- * return <Spinner />;
- * }
- * ```
- */
-const Spinner = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSpinner);
-/* harmony default export */ const spinner = (Spinner);
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/surface/component.js
+;// ./node_modules/@wordpress/components/build-module/surface/component.js
/**
* External dependencies
*/
@@ -67121,7 +65286,7 @@
const component_Surface = contextConnect(UnconnectedSurface, 'Surface');
/* harmony default export */ const surface_component = (component_Surface);
-;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/tab/tab-store.js
+;// ./node_modules/@ariakit/core/esm/tab/tab-store.js
"use client";
@@ -67132,10 +65297,43 @@
// src/tab/tab-store.ts
-function createTabStore(props = {}) {
- var _a;
- const syncState = (_a = props.store) == null ? void 0 : _a.getState();
- const composite = createCompositeStore(_chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, props), {
+function createTabStore(_a = {}) {
+ var _b = _a, {
+ composite: parentComposite,
+ combobox
+ } = _b, props = _3YLGPPWQ_objRest(_b, [
+ "composite",
+ "combobox"
+ ]);
+ const independentKeys = [
+ "items",
+ "renderedItems",
+ "moves",
+ "orientation",
+ "virtualFocus",
+ "includesBaseElement",
+ "baseElement",
+ "focusLoop",
+ "focusShift",
+ "focusWrap"
+ ];
+ const store = mergeStore(
+ props.store,
+ omit2(parentComposite, independentKeys),
+ omit2(combobox, independentKeys)
+ );
+ const syncState = store == null ? void 0 : store.getState();
+ const composite = createCompositeStore(_chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, props), {
+ store,
+ // We need to explicitly set the default value of `includesBaseElement` to
+ // `false` since we don't want the composite store to default it to `true`
+ // when the activeId state is null, which could be the case when rendering
+ // combobox with tab.
+ includesBaseElement: defaultValue(
+ props.includesBaseElement,
+ syncState == null ? void 0 : syncState.includesBaseElement,
+ false
+ ),
orientation: defaultValue(
props.orientation,
syncState == null ? void 0 : syncState.orientation,
@@ -67144,12 +65342,11 @@
focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, true)
}));
const panels = createCollectionStore();
- const initialState = _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, composite.getState()), {
+ const initialState = _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, composite.getState()), {
selectedId: defaultValue(
props.selectedId,
syncState == null ? void 0 : syncState.selectedId,
- props.defaultSelectedId,
- void 0
+ props.defaultSelectedId
),
selectOnMove: defaultValue(
props.selectOnMove,
@@ -67157,38 +65354,36 @@
true
)
});
- const tab = createStore(initialState, composite, props.store);
+ const tab = createStore(initialState, composite, store);
setup(
tab,
() => sync(tab, ["moves"], () => {
const { activeId, selectOnMove } = tab.getState();
- if (!selectOnMove)
- return;
- if (!activeId)
- return;
+ if (!selectOnMove) return;
+ if (!activeId) return;
const tabItem = composite.item(activeId);
- if (!tabItem)
- return;
- if (tabItem.dimmed)
+ if (!tabItem) return;
+ if (tabItem.dimmed) return;
+ if (tabItem.disabled) return;
+ tab.setState("selectedId", tabItem.id);
+ })
+ );
+ let syncActiveId = true;
+ setup(
+ tab,
+ () => batch(tab, ["selectedId"], (state, prev) => {
+ if (!syncActiveId) {
+ syncActiveId = true;
return;
- if (tabItem.disabled)
- return;
- tab.setState("selectedId", tabItem.id);
+ }
+ if (parentComposite && state.selectedId === prev.selectedId) return;
+ tab.setState("activeId", state.selectedId);
})
);
setup(
tab,
- () => batch(
- tab,
- ["selectedId"],
- (state) => tab.setState("activeId", state.selectedId)
- )
- );
- setup(
- tab,
() => sync(tab, ["selectedId", "renderedItems"], (state) => {
- if (state.selectedId !== void 0)
- return;
+ if (state.selectedId !== void 0) return;
const { activeId, renderedItems } = tab.getState();
const tabItem = composite.item(activeId);
if (tabItem && !tabItem.disabled && !tabItem.dimmed) {
@@ -67205,25 +65400,42 @@
tab,
() => sync(tab, ["renderedItems"], (state) => {
const tabs = state.renderedItems;
- if (!tabs.length)
- return;
+ if (!tabs.length) return;
return sync(panels, ["renderedItems"], (state2) => {
const items = state2.renderedItems;
const hasOrphanPanels = items.some((panel) => !panel.tabId);
- if (!hasOrphanPanels)
- return;
+ if (!hasOrphanPanels) return;
items.forEach((panel, i) => {
- if (panel.tabId)
- return;
+ if (panel.tabId) return;
const tabItem = tabs[i];
- if (!tabItem)
- return;
- panels.renderItem(_chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, panel), { tabId: tabItem.id }));
- });
- });
- })
- );
- return _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues(_chunks_4R3V3JGP_spreadValues({}, composite), tab), {
+ if (!tabItem) return;
+ panels.renderItem(_chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, panel), { tabId: tabItem.id }));
+ });
+ });
+ })
+ );
+ let selectedIdFromSelectedValue = null;
+ setup(tab, () => {
+ const backupSelectedId = () => {
+ selectedIdFromSelectedValue = tab.getState().selectedId;
+ };
+ const restoreSelectedId = () => {
+ syncActiveId = false;
+ tab.setState("selectedId", selectedIdFromSelectedValue);
+ };
+ if (parentComposite && "setSelectElement" in parentComposite) {
+ return chain(
+ sync(parentComposite, ["value"], backupSelectedId),
+ sync(parentComposite, ["mounted"], restoreSelectedId)
+ );
+ }
+ if (!combobox) return;
+ return chain(
+ sync(combobox, ["selectedValue"], backupSelectedId),
+ sync(combobox, ["mounted"], restoreSelectedId)
+ );
+ });
+ return _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues(_chunks_3YLGPPWQ_spreadValues({}, composite), tab), {
panels,
setSelectedId: (id) => tab.setState("selectedId", id),
select: (id) => {
@@ -67234,8 +65446,10 @@
}
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/CQMDBRG5.js
-"use client";
+;// ./node_modules/@ariakit/react-core/esm/__chunks/PY4NZ6HS.js
+"use client";
+
+
@@ -67245,39 +65459,49 @@
function useTabStoreProps(store, update, props) {
+ useUpdateEffect(update, [props.composite, props.combobox]);
store = useCompositeStoreProps(store, update, props);
useStoreProps(store, props, "selectedId", "setSelectedId");
useStoreProps(store, props, "selectOnMove");
- const [panels, updatePanels] = EKQEJRUF_useStore(() => store.panels, {});
+ const [panels, updatePanels] = YV4JVR4I_useStore(() => store.panels, {});
useUpdateEffect(updatePanels, [store, updatePanels]);
- return (0,external_React_.useMemo)(() => _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, store), { panels }), [store, panels]);
+ return Object.assign(
+ (0,external_React_.useMemo)(() => _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, store), { panels }), [store, panels]),
+ { composite: props.composite, combobox: props.combobox }
+ );
}
function useTabStore(props = {}) {
- const [store, update] = EKQEJRUF_useStore(createTabStore, props);
+ const combobox = useComboboxContext();
+ const composite = useSelectContext() || combobox;
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), {
+ composite: props.composite !== void 0 ? props.composite : composite,
+ combobox: props.combobox !== void 0 ? props.combobox : combobox
+ });
+ const [store, update] = YV4JVR4I_useStore(createTabStore, props);
return useTabStoreProps(store, update, props);
}
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/4B73HROV.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/UYGDZTLQ.js
"use client";
// src/tab/tab-context.tsx
-var _4B73HROV_ctx = createStoreContext(
+var UYGDZTLQ_ctx = createStoreContext(
[CompositeContextProvider],
[CompositeScopedContextProvider]
);
-var useTabContext = _4B73HROV_ctx.useContext;
-var useTabScopedContext = _4B73HROV_ctx.useScopedContext;
-var useTabProviderContext = _4B73HROV_ctx.useProviderContext;
-var TabContextProvider = _4B73HROV_ctx.ContextProvider;
-var TabScopedContextProvider = _4B73HROV_ctx.ScopedContextProvider;
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/tab/tab-list.js
+var useTabContext = UYGDZTLQ_ctx.useContext;
+var useTabScopedContext = UYGDZTLQ_ctx.useScopedContext;
+var useTabProviderContext = UYGDZTLQ_ctx.useProviderContext;
+var TabContextProvider = UYGDZTLQ_ctx.ContextProvider;
+var TabScopedContextProvider = UYGDZTLQ_ctx.ScopedContextProvider;
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/tab/tab-list.js
"use client";
@@ -67294,126 +65518,164 @@
// src/tab/tab-list.tsx
-var useTabList = createHook((_a) => {
- var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
- const context = useTabProviderContext();
+var tab_list_TagName = "div";
+var useTabList = createHook(
+ function useTabList2(_a) {
+ var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
+ const context = useTabProviderContext();
+ store = store || context;
+ invariant(
+ store,
+ false && 0
+ );
+ const orientation = store.useState(
+ (state) => state.orientation === "both" ? void 0 : state.orientation
+ );
+ props = useWrapElement(
+ props,
+ (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(TabScopedContextProvider, { value: store, children: element }),
+ [store]
+ );
+ if (store.composite) {
+ props = _3YLGPPWQ_spreadValues({
+ focusable: false
+ }, props);
+ }
+ props = _3YLGPPWQ_spreadValues({
+ role: "tablist",
+ "aria-orientation": orientation
+ }, props);
+ props = useComposite(_3YLGPPWQ_spreadValues({ store }, props));
+ return props;
+ }
+);
+var TabList = forwardRef2(function TabList2(props) {
+ const htmlProps = useTabList(props);
+ return LMDWO4NN_createElement(tab_list_TagName, htmlProps);
+});
+
+
+;// ./node_modules/@ariakit/react-core/esm/tab/tab.js
+"use client";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// src/tab/tab.tsx
+
+
+
+var tab_TagName = "button";
+var useTab = createHook(function useTab2(_a) {
+ var _b = _a, {
+ store,
+ getItem: getItemProp
+ } = _b, props = __objRest(_b, [
+ "store",
+ "getItem"
+ ]);
+ var _a2;
+ const context = useTabScopedContext();
store = store || context;
invariant(
store,
false && 0
);
- const orientation = store.useState(
- (state) => state.orientation === "both" ? void 0 : state.orientation
- );
- props = useWrapElement(
- props,
- (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(TabScopedContextProvider, { value: store, children: element }),
- [store]
- );
- props = _4R3V3JGP_spreadValues({
- role: "tablist",
- "aria-orientation": orientation
- }, props);
- props = useComposite(_4R3V3JGP_spreadValues({ store }, props));
+ const defaultId = useId();
+ const id = props.id || defaultId;
+ const dimmed = disabledFromProps(props);
+ const getItem = (0,external_React_.useCallback)(
+ (item) => {
+ const nextItem = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, item), { dimmed });
+ if (getItemProp) {
+ return getItemProp(nextItem);
+ }
+ return nextItem;
+ },
+ [dimmed, getItemProp]
+ );
+ const onClickProp = props.onClick;
+ const onClick = useEvent((event) => {
+ onClickProp == null ? void 0 : onClickProp(event);
+ if (event.defaultPrevented) return;
+ store == null ? void 0 : store.setSelectedId(id);
+ });
+ const panelId = store.panels.useState(
+ (state) => {
+ var _a3;
+ return (_a3 = state.items.find((item) => item.tabId === id)) == null ? void 0 : _a3.id;
+ }
+ );
+ const shouldRegisterItem = defaultId ? props.shouldRegisterItem : false;
+ const isActive = store.useState((state) => !!id && state.activeId === id);
+ const selected = store.useState((state) => !!id && state.selectedId === id);
+ const hasActiveItem = store.useState((state) => !!store.item(state.activeId));
+ const canRegisterComposedItem = isActive || selected && !hasActiveItem;
+ const accessibleWhenDisabled = selected || ((_a2 = props.accessibleWhenDisabled) != null ? _a2 : true);
+ const isWithinVirtualFocusComposite = useStoreState(
+ store.combobox || store.composite,
+ "virtualFocus"
+ );
+ if (isWithinVirtualFocusComposite) {
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), {
+ tabIndex: -1
+ });
+ }
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
+ id,
+ role: "tab",
+ "aria-selected": selected,
+ "aria-controls": panelId || void 0
+ }, props), {
+ onClick
+ });
+ if (store.composite) {
+ const defaultProps = {
+ id,
+ accessibleWhenDisabled,
+ store: store.composite,
+ shouldRegisterItem: canRegisterComposedItem && shouldRegisterItem,
+ rowId: props.rowId,
+ render: props.render
+ };
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), {
+ render: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(
+ P2CTZE2T_CompositeItem,
+ _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, defaultProps), {
+ render: store.combobox && store.composite !== store.combobox ? /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(P2CTZE2T_CompositeItem, _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, defaultProps), { store: store.combobox })) : defaultProps.render
+ })
+ )
+ });
+ }
+ props = useCompositeItem(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
+ store
+ }, props), {
+ accessibleWhenDisabled,
+ getItem,
+ shouldRegisterItem
+ }));
return props;
});
-var tab_list_TabList = createComponent((props) => {
- const htmlProps = useTabList(props);
- return _3ORBWXWF_createElement("div", htmlProps);
-});
-if (false) {}
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/tab/tab.js
-"use client";
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-// src/tab/tab.ts
-
-
-var useTab = createHook(
- (_a) => {
- var _b = _a, {
- store,
- accessibleWhenDisabled = true,
- getItem: getItemProp
- } = _b, props = __objRest(_b, [
- "store",
- "accessibleWhenDisabled",
- "getItem"
- ]);
- const context = useTabScopedContext();
- store = store || context;
- invariant(
- store,
- false && 0
- );
- const defaultId = useId();
- const id = props.id || defaultId;
- const dimmed = disabledFromProps(props);
- const getItem = (0,external_React_.useCallback)(
- (item) => {
- const nextItem = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, item), { dimmed });
- if (getItemProp) {
- return getItemProp(nextItem);
- }
- return nextItem;
- },
- [dimmed, getItemProp]
- );
- const onClickProp = props.onClick;
- const onClick = useEvent((event) => {
- onClickProp == null ? void 0 : onClickProp(event);
- if (event.defaultPrevented)
- return;
- store == null ? void 0 : store.setSelectedId(id);
- });
- const panelId = store.panels.useState(
- (state) => {
- var _a2;
- return (_a2 = state.items.find((item) => item.tabId === id)) == null ? void 0 : _a2.id;
- }
- );
- const selected = store.useState((state) => !!id && state.selectedId === id);
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
- id,
- role: "tab",
- "aria-selected": selected,
- "aria-controls": panelId || void 0
- }, props), {
- onClick
- });
- props = useCompositeItem(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
- store
- }, props), {
- accessibleWhenDisabled,
- getItem,
- shouldRegisterItem: !!defaultId ? props.shouldRegisterItem : false
- }));
- return props;
- }
-);
-var Tab = createMemoComponent((props) => {
- const htmlProps = useTab(props);
- return _3ORBWXWF_createElement("button", htmlProps);
-});
-if (false) {}
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/tab/tab-panel.js
+var Tab = memo2(
+ forwardRef2(function Tab2(props) {
+ const htmlProps = useTab(props);
+ return LMDWO4NN_createElement(tab_TagName, htmlProps);
+ })
+);
+
+
+;// ./node_modules/@ariakit/react-core/esm/tab/tab-panel.js
"use client";
@@ -67436,9 +65698,24 @@
+var tab_panel_TagName = "div";
var useTabPanel = createHook(
- (_a) => {
- var _b = _a, { store, tabId: tabIdProp, getItem: getItemProp } = _b, props = __objRest(_b, ["store", "tabId", "getItem"]);
+ function useTabPanel2(_a) {
+ var _b = _a, {
+ store,
+ unmountOnHide,
+ tabId: tabIdProp,
+ getItem: getItemProp,
+ scrollRestoration,
+ scrollElement
+ } = _b, props = __objRest(_b, [
+ "store",
+ "unmountOnHide",
+ "tabId",
+ "getItem",
+ "scrollRestoration",
+ "scrollElement"
+ ]);
const context = useTabProviderContext();
store = store || context;
invariant(
@@ -67447,17 +65724,68 @@
);
const ref = (0,external_React_.useRef)(null);
const id = useId(props.id);
+ const tabId = useStoreState(
+ store.panels,
+ () => {
+ var _a2;
+ return tabIdProp || ((_a2 = store == null ? void 0 : store.panels.item(id)) == null ? void 0 : _a2.tabId);
+ }
+ );
+ const open = useStoreState(
+ store,
+ (state) => !!tabId && state.selectedId === tabId
+ );
+ const disclosure = useDisclosureStore({ open });
+ const mounted = useStoreState(disclosure, "mounted");
+ const scrollPositionRef = (0,external_React_.useRef)(
+ /* @__PURE__ */ new Map()
+ );
+ const getScrollElement = useEvent(() => {
+ const panelElement = ref.current;
+ if (!panelElement) return null;
+ if (!scrollElement) return panelElement;
+ if (typeof scrollElement === "function") {
+ return scrollElement(panelElement);
+ }
+ if ("current" in scrollElement) {
+ return scrollElement.current;
+ }
+ return scrollElement;
+ });
+ (0,external_React_.useEffect)(() => {
+ var _a2, _b2;
+ if (!scrollRestoration) return;
+ if (!mounted) return;
+ const element = getScrollElement();
+ if (!element) return;
+ if (scrollRestoration === "reset") {
+ element.scroll(0, 0);
+ return;
+ }
+ if (!tabId) return;
+ const position = scrollPositionRef.current.get(tabId);
+ element.scroll((_a2 = position == null ? void 0 : position.x) != null ? _a2 : 0, (_b2 = position == null ? void 0 : position.y) != null ? _b2 : 0);
+ const onScroll = () => {
+ scrollPositionRef.current.set(tabId, {
+ x: element.scrollLeft,
+ y: element.scrollTop
+ });
+ };
+ element.addEventListener("scroll", onScroll);
+ return () => {
+ element.removeEventListener("scroll", onScroll);
+ };
+ }, [scrollRestoration, mounted, tabId, getScrollElement, store]);
const [hasTabbableChildren, setHasTabbableChildren] = (0,external_React_.useState)(false);
(0,external_React_.useEffect)(() => {
const element = ref.current;
- if (!element)
- return;
+ if (!element) return;
const tabbable = getAllTabbableIn(element);
setHasTabbableChildren(!!tabbable.length);
}, []);
const getItem = (0,external_React_.useCallback)(
(item) => {
- const nextItem = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, item), { id: id || item.id, tabId: tabIdProp });
+ const nextItem = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, item), { id: id || item.id, tabId: tabIdProp });
if (getItemProp) {
return getItemProp(nextItem);
}
@@ -67465,58 +65793,71 @@
},
[id, tabIdProp, getItemProp]
);
+ const onKeyDownProp = props.onKeyDown;
+ const onKeyDown = useEvent((event) => {
+ onKeyDownProp == null ? void 0 : onKeyDownProp(event);
+ if (event.defaultPrevented) return;
+ if (!(store == null ? void 0 : store.composite)) return;
+ const keyMap = {
+ ArrowLeft: store.previous,
+ ArrowRight: store.next,
+ Home: store.first,
+ End: store.last
+ };
+ const action = keyMap[event.key];
+ if (!action) return;
+ const { selectedId } = store.getState();
+ const nextId = action({ activeId: selectedId });
+ if (!nextId) return;
+ event.preventDefault();
+ store.move(nextId);
+ });
props = useWrapElement(
props,
(element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(TabScopedContextProvider, { value: store, children: element }),
[store]
);
- const tabId = store.panels.useState(
- () => {
- var _a2;
- return tabIdProp || ((_a2 = store == null ? void 0 : store.panels.item(id)) == null ? void 0 : _a2.tabId);
- }
- );
- const open = store.useState(
- (state) => !!tabId && state.selectedId === tabId
- );
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
id,
role: "tabpanel",
"aria-labelledby": tabId || void 0
}, props), {
- ref: useMergeRefs(ref, props.ref)
- });
- const disclosure = useDisclosureStore({ open });
- props = useFocusable(_4R3V3JGP_spreadValues({ focusable: !hasTabbableChildren }, props));
- props = useDisclosureContent(_4R3V3JGP_spreadValues({ store: disclosure }, props));
- props = useCollectionItem(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({ store: store.panels }, props), { getItem }));
+ children: unmountOnHide && !mounted ? null : props.children,
+ ref: useMergeRefs(ref, props.ref),
+ onKeyDown
+ });
+ props = useFocusable(_3YLGPPWQ_spreadValues({
+ // If the tab panel is rendered as part of another composite widget such
+ // as combobox, it should not be focusable.
+ focusable: !store.composite && !hasTabbableChildren
+ }, props));
+ props = useDisclosureContent(_3YLGPPWQ_spreadValues({ store: disclosure }, props));
+ props = useCollectionItem(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ store: store.panels }, props), { getItem }));
return props;
}
);
-var TabPanel = createComponent((props) => {
+var TabPanel = forwardRef2(function TabPanel2(props) {
const htmlProps = useTabPanel(props);
- return _3ORBWXWF_createElement("div", htmlProps);
-});
-if (false) {}
-
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tab-panel/index.js
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
+ return LMDWO4NN_createElement(tab_panel_TagName, htmlProps);
+});
+
+
+;// ./node_modules/@wordpress/components/build-module/tab-panel/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -67601,9 +65942,10 @@
},
orientation,
selectOnMove,
- defaultSelectedId: prependInstanceId(initialTabName)
- });
- const selectedTabName = extractTabName(tabStore.useState('selectedId'));
+ defaultSelectedId: prependInstanceId(initialTabName),
+ rtl: (0,external_wp_i18n_namespaceObject.isRTL)()
+ });
+ const selectedTabName = extractTabName(useStoreState(tabStore, 'selectedId'));
const setTabStoreSelectedId = (0,external_wp_element_namespaceObject.useCallback)(tabName => {
tabStore.setState('selectedId', prependInstanceId(tabName));
}, [prependInstanceId, tabStore]);
@@ -67661,7 +66003,7 @@
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: className,
ref: ref,
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tab_list_TabList, {
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TabList, {
store: tabStore,
className: "components-tab-panel__tabs",
children: tabs.map(tab => {
@@ -67673,6 +66015,7 @@
disabled: tab.disabled,
"aria-controls": `${prependInstanceId(tab.name)}-view`,
render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
+ __next40pxDefaultSize: true,
icon: tab.icon,
label: tab.icon && tab.title,
showTooltip: !!tab.icon
@@ -67692,22 +66035,23 @@
const tab_panel_TabPanel = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTabPanel);
/* harmony default export */ const tab_panel = (tab_panel_TabPanel);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/text-control/index.js
-/**
- * External dependencies
- */
-
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
+;// ./node_modules/@wordpress/components/build-module/text-control/index.js
+/**
+ * External dependencies
+ */
+
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
+
function UnforwardedTextControl(props, ref) {
@@ -67726,8 +66070,14 @@
} = props;
const id = (0,external_wp_compose_namespaceObject.useInstanceId)(TextControl, 'inspector-text-control', idProp);
const onChangeValue = event => onChange(event.target.value);
+ maybeWarnDeprecated36pxSize({
+ componentName: 'TextControl',
+ size: undefined,
+ __next40pxDefaultSize
+ });
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, {
__nextHasNoMarginBottom: __nextHasNoMarginBottom,
+ __associatedWPComponentName: "TextControl",
label: label,
hideLabelFromVision: hideLabelFromVision,
id: id,
@@ -67760,6 +66110,8 @@
*
* return (
* <TextControl
+ * __nextHasNoMarginBottom
+ * __next40pxDefaultSize
* label="Additional CSS Class"
* value={ className }
* onChange={ ( value ) => setClassName( value ) }
@@ -67771,21 +66123,7 @@
const TextControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTextControl);
/* harmony default export */ const text_control = (TextControl);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/input/base.js
-/**
- * External dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
-
-const inputStyleNeutral = /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:0 0 0 transparent;border-radius:", config_values.radiusBlockUi, ";border:", config_values.borderWidth, " solid ", COLORS.ui.border, ";@media not ( prefers-reduced-motion ){transition:box-shadow 0.1s linear;}" + ( true ? "" : 0), true ? "" : 0);
-const inputStyleFocus = /*#__PURE__*/emotion_react_browser_esm_css("border-color:", COLORS.theme.accent, ";box-shadow:0 0 0 calc( ", config_values.borderWidthFocus, " - ", config_values.borderWidth, " ) ", COLORS.theme.accent, ";outline:2px solid transparent;" + ( true ? "" : 0), true ? "" : 0);
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/breakpoint-values.js
+;// ./node_modules/@wordpress/components/build-module/utils/breakpoint-values.js
/* harmony default export */ const breakpoint_values = ({
huge: '1440px',
wide: '1280px',
@@ -67799,7 +66137,7 @@
'zoomed-in': '280px'
});
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/breakpoint.js
+;// ./node_modules/@wordpress/components/build-module/utils/breakpoint.js
/**
* Internal dependencies
*/
@@ -67811,36 +66149,28 @@
*/
const breakpoint = point => `@media (min-width: ${breakpoint_values[point]})`;
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/input/input-control.js
-/**
- * External dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
-
-
-
-const inputControl = /*#__PURE__*/emotion_react_browser_esm_css("display:block;font-family:", font('default.fontFamily'), ";padding:6px 8px;", inputStyleNeutral, ";font-size:", font('mobileTextMinFontSize'), ";line-height:normal;", breakpoint('small'), "{font-size:", font('default.fontSize'), ";line-height:normal;}&:focus{", inputStyleFocus, ";}&::-webkit-input-placeholder{color:", COLORS.ui.darkGrayPlaceholder, ";}&::-moz-placeholder{opacity:1;color:", COLORS.ui.darkGrayPlaceholder, ";}&:-ms-input-placeholder{color:", COLORS.ui.darkGrayPlaceholder, ";}.is-dark-theme &{&::-webkit-input-placeholder{color:", COLORS.ui.lightGrayPlaceholder, ";}&::-moz-placeholder{opacity:1;color:", COLORS.ui.lightGrayPlaceholder, ";}&:-ms-input-placeholder{color:", COLORS.ui.lightGrayPlaceholder, ";}}" + ( true ? "" : 0), true ? "" : 0);
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/textarea-control/styles/textarea-control-styles.js
-
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/textarea-control/styles/textarea-control-styles.js
+
+/**
+ * External dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+const inputStyleNeutral = /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:0 0 0 transparent;border-radius:", config_values.radiusSmall, ";border:", config_values.borderWidth, " solid ", COLORS.ui.border, ";@media not ( prefers-reduced-motion ){transition:box-shadow 0.1s linear;}" + ( true ? "" : 0), true ? "" : 0);
+const inputStyleFocus = /*#__PURE__*/emotion_react_browser_esm_css("border-color:", COLORS.theme.accent, ";box-shadow:0 0 0 calc( ", config_values.borderWidthFocus, " - ", config_values.borderWidth, " ) ", COLORS.theme.accent, ";outline:2px solid transparent;" + ( true ? "" : 0), true ? "" : 0);
const StyledTextarea = /*#__PURE__*/emotion_styled_base_browser_esm("textarea", true ? {
target: "e1w5nnrk0"
-} : 0)("width:100%;", inputControl, ";" + ( true ? "" : 0));
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/textarea-control/index.js
+} : 0)("width:100%;display:block;font-family:", font('default.fontFamily'), ";line-height:20px;padding:9px 11px;", inputStyleNeutral, ";font-size:", font('mobileTextMinFontSize'), ";", breakpoint('small'), "{font-size:", font('default.fontSize'), ";}&:focus{", inputStyleFocus, ";}&::-webkit-input-placeholder{color:", COLORS.ui.darkGrayPlaceholder, ";}&::-moz-placeholder{color:", COLORS.ui.darkGrayPlaceholder, ";}&:-ms-input-placeholder{color:", COLORS.ui.darkGrayPlaceholder, ";}.is-dark-theme &{&::-webkit-input-placeholder{color:", COLORS.ui.lightGrayPlaceholder, ";}&::-moz-placeholder{color:", COLORS.ui.lightGrayPlaceholder, ";}&:-ms-input-placeholder{color:", COLORS.ui.lightGrayPlaceholder, ";}}" + ( true ? "" : 0));
+
+;// ./node_modules/@wordpress/components/build-module/textarea-control/index.js
/**
* WordPress dependencies
*/
@@ -67870,6 +66200,7 @@
const onChangeValue = event => onChange(event.target.value);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, {
__nextHasNoMarginBottom: __nextHasNoMarginBottom,
+ __associatedWPComponentName: "TextareaControl",
label: label,
hideLabelFromVision: hideLabelFromVision,
id: id,
@@ -67902,6 +66233,7 @@
*
* return (
* <TextareaControl
+ * __nextHasNoMarginBottom
* label="Text"
* help="Enter some text"
* value={ text }
@@ -67914,16 +66246,15 @@
const TextareaControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTextareaControl);
/* harmony default export */ const textarea_control = (TextareaControl);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/text-highlight/index.js
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/text-highlight/index.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
/**
@@ -67959,7 +66290,7 @@
};
/* harmony default export */ const text_highlight = (TextHighlight);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/tip.js
+;// ./node_modules/@wordpress/icons/build-module/library/tip.js
/**
* WordPress dependencies
*/
@@ -67974,16 +66305,15 @@
});
/* harmony default export */ const library_tip = (tip);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tip/index.js
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/tip/index.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
function Tip(props) {
const {
@@ -68000,52 +66330,32 @@
}
/* harmony default export */ const build_module_tip = (Tip);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-control/index.js
-/**
- * External dependencies
- */
-
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
-
-
-
-
-
-
-/**
- * ToggleControl is used to generate a toggle user interface.
- *
- * ```jsx
- * import { ToggleControl } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const MyToggleControl = () => {
- * const [ value, setValue ] = useState( false );
- *
- * return (
- * <ToggleControl
- * label="Fixed Background"
- * checked={ value }
- * onChange={ () => setValue( ( state ) => ! state ) }
- * />
- * );
- * };
- * ```
- */
-
-
-function ToggleControl({
+;// ./node_modules/@wordpress/components/build-module/toggle-control/index.js
+/**
+ * External dependencies
+ */
+
+
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+
+
+function UnforwardedToggleControl({
__nextHasNoMarginBottom,
label,
checked,
@@ -68063,6 +66373,13 @@
const classes = cx('components-toggle-control', className, !__nextHasNoMarginBottom && /*#__PURE__*/emotion_react_browser_esm_css({
marginBottom: space(3)
}, true ? "" : 0, true ? "" : 0));
+ if (!__nextHasNoMarginBottom) {
+ external_wp_deprecated_default()('Bottom margin styles for wp.components.ToggleControl', {
+ since: '6.7',
+ version: '7.0',
+ hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.'
+ });
+ }
let describedBy, helpLabel;
if (help) {
if (typeof help === 'function') {
@@ -68081,12 +66398,15 @@
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, {
id: id,
- help: helpLabel,
+ help: helpLabel && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
+ className: "components-toggle-control__help",
+ children: helpLabel
+ }),
className: classes,
__nextHasNoMarginBottom: true,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, {
justify: "flex-start",
- spacing: 3,
+ spacing: 2,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(form_toggle, {
id: id,
checked: checked,
@@ -68097,62 +66417,88 @@
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_block_component, {
as: "label",
htmlFor: id,
- className: "components-toggle-control__label",
+ className: dist_clsx('components-toggle-control__label', {
+ 'is-disabled': disabled
+ }),
children: label
})]
})
});
}
-/* harmony default export */ const toggle_control = ((0,external_wp_element_namespaceObject.forwardRef)(ToggleControl));
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/SOK7T35T.js
+
+/**
+ * ToggleControl is used to generate a toggle user interface.
+ *
+ * ```jsx
+ * import { ToggleControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyToggleControl = () => {
+ * const [ value, setValue ] = useState( false );
+ *
+ * return (
+ * <ToggleControl
+ * __nextHasNoMarginBottom
+ * label="Fixed Background"
+ * checked={ value }
+ * onChange={ () => setValue( ( state ) => ! state ) }
+ * />
+ * );
+ * };
+ * ```
+ */
+const ToggleControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleControl);
+/* harmony default export */ const toggle_control = (ToggleControl);
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/A3WPL2ZJ.js
"use client";
// src/toolbar/toolbar-context.tsx
-var SOK7T35T_ctx = createStoreContext(
+var A3WPL2ZJ_ctx = createStoreContext(
[CompositeContextProvider],
[CompositeScopedContextProvider]
);
-var useToolbarContext = SOK7T35T_ctx.useContext;
-var useToolbarScopedContext = SOK7T35T_ctx.useScopedContext;
-var useToolbarProviderContext = SOK7T35T_ctx.useProviderContext;
-var ToolbarContextProvider = SOK7T35T_ctx.ContextProvider;
-var ToolbarScopedContextProvider = SOK7T35T_ctx.ScopedContextProvider;
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/7NHUGSTF.js
-"use client";
-
-
-
-
-
-// src/toolbar/toolbar-item.ts
+var useToolbarContext = A3WPL2ZJ_ctx.useContext;
+var useToolbarScopedContext = A3WPL2ZJ_ctx.useScopedContext;
+var useToolbarProviderContext = A3WPL2ZJ_ctx.useProviderContext;
+var ToolbarContextProvider = A3WPL2ZJ_ctx.ContextProvider;
+var ToolbarScopedContextProvider = A3WPL2ZJ_ctx.ScopedContextProvider;
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/BOLVLGVE.js
+"use client";
+
+
+
+
+
+// src/toolbar/toolbar-item.tsx
+var BOLVLGVE_TagName = "button";
var useToolbarItem = createHook(
- (_a) => {
+ function useToolbarItem2(_a) {
var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
const context = useToolbarContext();
store = store || context;
- props = useCompositeItem(_4R3V3JGP_spreadValues({ store }, props));
+ props = useCompositeItem(_3YLGPPWQ_spreadValues({ store }, props));
return props;
}
);
-var ToolbarItem = createMemoComponent((props) => {
- const htmlProps = useToolbarItem(props);
- return _3ORBWXWF_createElement("button", htmlProps);
-});
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar-context/index.js
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
+var ToolbarItem = memo2(
+ forwardRef2(function ToolbarItem2(props) {
+ const htmlProps = useToolbarItem(props);
+ return LMDWO4NN_createElement(BOLVLGVE_TagName, htmlProps);
+ })
+);
+
+
+
+;// ./node_modules/@wordpress/components/build-module/toolbar/toolbar-context/index.js
+/**
+ * External dependencies
+ */
/**
* WordPress dependencies
@@ -68161,11 +66507,10 @@
const ToolbarContext = (0,external_wp_element_namespaceObject.createContext)(undefined);
/* harmony default export */ const toolbar_context = (ToolbarContext);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar-item/index.js
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
+;// ./node_modules/@wordpress/components/build-module/toolbar/toolbar-item/index.js
+/**
+ * External dependencies
+ */
/**
* WordPress dependencies
@@ -68210,6 +66555,7 @@
children: children
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ToolbarItem, {
+ accessibleWhenDisabled: true,
...allProps,
store: accessibleToolbarStore,
render: render
@@ -68217,7 +66563,7 @@
}
/* harmony default export */ const toolbar_item = ((0,external_wp_element_namespaceObject.forwardRef)(toolbar_item_ToolbarItem));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar-button/toolbar-button-container.js
+;// ./node_modules/@wordpress/components/build-module/toolbar/toolbar-button/toolbar-button-container.js
/**
* Internal dependencies
@@ -68232,57 +66578,67 @@
});
/* harmony default export */ const toolbar_button_container = (ToolbarButtonContainer);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar-button/index.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
-
-
-
-
-function UnforwardedToolbarButton({
- children,
- className,
- containerClassName,
- extraProps,
- isActive,
+;// ./node_modules/@wordpress/components/build-module/toolbar/toolbar-button/index.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+function toolbar_button_useDeprecatedProps({
isDisabled,
- title,
- ...props
-}, ref) {
+ ...otherProps
+}) {
+ return {
+ disabled: isDisabled,
+ ...otherProps
+ };
+}
+function UnforwardedToolbarButton(props, ref) {
+ const {
+ children,
+ className,
+ containerClassName,
+ extraProps,
+ isActive,
+ title,
+ ...restProps
+ } = toolbar_button_useDeprecatedProps(props);
const accessibleToolbarState = (0,external_wp_element_namespaceObject.useContext)(toolbar_context);
if (!accessibleToolbarState) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toolbar_button_container, {
className: containerClassName,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
ref: ref,
- icon: props.icon,
+ icon: restProps.icon,
+ size: "compact",
label: title,
- shortcut: props.shortcut,
- "data-subscript": props.subscript,
+ shortcut: restProps.shortcut,
+ "data-subscript": restProps.subscript,
onClick: event => {
event.stopPropagation();
- // TODO: Possible bug; maybe use onClick instead of props.onClick.
- if (props.onClick) {
- props.onClick(event);
+ // TODO: Possible bug; maybe use onClick instead of restProps.onClick.
+ if (restProps.onClick) {
+ restProps.onClick(event);
}
},
className: dist_clsx('components-toolbar__control', className),
isPressed: isActive,
- disabled: isDisabled,
+ accessibleWhenDisabled: true,
"data-toolbar-item": true,
...extraProps,
- ...props,
+ ...restProps,
children: children
})
});
@@ -68294,12 +66650,12 @@
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toolbar_item, {
className: dist_clsx('components-toolbar-button', className),
...extraProps,
- ...props,
+ ...restProps,
ref: ref,
children: toolbarItemProps => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
+ size: "compact",
label: title,
isPressed: isActive,
- disabled: isDisabled,
...toolbarItemProps,
children: children
})
@@ -68330,7 +66686,7 @@
const ToolbarButton = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToolbarButton);
/* harmony default export */ const toolbar_button = (ToolbarButton);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar-group/toolbar-group-container.js
+;// ./node_modules/@wordpress/components/build-module/toolbar/toolbar-group/toolbar-group-container.js
/**
* Internal dependencies
@@ -68347,7 +66703,7 @@
});
/* harmony default export */ const toolbar_group_container = (ToolbarGroupContainer);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar-group/toolbar-group-collapsed.js
+;// ./node_modules/@wordpress/components/build-module/toolbar/toolbar-group/toolbar-group-collapsed.js
/**
* WordPress dependencies
*/
@@ -68386,21 +66742,20 @@
}
/* harmony default export */ const toolbar_group_collapsed = (ToolbarGroupCollapsed);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar-group/index.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/toolbar/toolbar-group/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
@@ -68486,7 +66841,7 @@
}
/* harmony default export */ const toolbar_group = (ToolbarGroup);
-;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/toolbar/toolbar-store.js
+;// ./node_modules/@ariakit/core/esm/toolbar/toolbar-store.js
"use client";
@@ -68500,7 +66855,7 @@
function createToolbarStore(props = {}) {
var _a;
const syncState = (_a = props.store) == null ? void 0 : _a.getState();
- return createCompositeStore(_chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, props), {
+ return createCompositeStore(_chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, props), {
orientation: defaultValue(
props.orientation,
syncState == null ? void 0 : syncState.orientation,
@@ -68511,7 +66866,7 @@
}
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/BPNXFCFY.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/7M5THDKH.js
"use client";
@@ -68522,13 +66877,13 @@
return useCompositeStoreProps(store, update, props);
}
function useToolbarStore(props = {}) {
- const [store, update] = EKQEJRUF_useStore(createToolbarStore, props);
+ const [store, update] = YV4JVR4I_useStore(createToolbarStore, props);
return useToolbarStoreProps(store, update, props);
}
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/toolbar/toolbar.js
+;// ./node_modules/@ariakit/react-core/esm/toolbar/toolbar.js
"use client";
@@ -68548,8 +66903,9 @@
// src/toolbar/toolbar.tsx
+var toolbar_TagName = "div";
var useToolbar = createHook(
- (_a) => {
+ function useToolbar2(_a) {
var _b = _a, {
store: storeProp,
orientation: orientationProp,
@@ -68580,26 +66936,24 @@
(element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(ToolbarScopedContextProvider, { value: store, children: element }),
[store]
);
- props = _4R3V3JGP_spreadValues({
+ props = _3YLGPPWQ_spreadValues({
role: "toolbar",
"aria-orientation": orientation
}, props);
- props = useComposite(_4R3V3JGP_spreadValues({ store }, props));
+ props = useComposite(_3YLGPPWQ_spreadValues({ store }, props));
return props;
}
);
-var Toolbar = createComponent((props) => {
+var Toolbar = forwardRef2(function Toolbar2(props) {
const htmlProps = useToolbar(props);
- return _3ORBWXWF_createElement("div", htmlProps);
-});
-if (false) {}
-
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar/toolbar-container.js
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
+ return LMDWO4NN_createElement(toolbar_TagName, htmlProps);
+});
+
+
+;// ./node_modules/@wordpress/components/build-module/toolbar/toolbar/toolbar-container.js
+/**
+ * External dependencies
+ */
/**
* WordPress dependencies
@@ -68637,7 +66991,7 @@
const ToolbarContainer = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToolbarContainer);
/* harmony default export */ const toolbar_container = (ToolbarContainer);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar/index.js
+;// ./node_modules/@wordpress/components/build-module/toolbar/toolbar/index.js
/**
* External dependencies
*/
@@ -68672,6 +67026,9 @@
},
Dropdown: {
variant: 'toolbar'
+ },
+ Menu: {
+ variant: 'toolbar'
}
};
}, [isVariantDefined]);
@@ -68728,7 +67085,7 @@
const toolbar_Toolbar = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToolbar);
/* harmony default export */ const toolbar = (toolbar_Toolbar);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar-dropdown-menu/index.js
+;// ./node_modules/@wordpress/components/build-module/toolbar/toolbar-dropdown-menu/index.js
/**
* WordPress dependencies
*/
@@ -68770,7 +67127,7 @@
}
/* harmony default export */ const toolbar_dropdown_menu = ((0,external_wp_element_namespaceObject.forwardRef)(ToolbarDropdownMenu));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/styles.js
+;// ./node_modules/@wordpress/components/build-module/tools-panel/styles.js
function tools_panel_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
@@ -68788,7 +67145,7 @@
const toolsPanelGrid = {
columns: columns => /*#__PURE__*/emotion_react_browser_esm_css("grid-template-columns:", `repeat( ${columns}, minmax(0, 1fr) )`, ";" + ( true ? "" : 0), true ? "" : 0),
- spacing: /*#__PURE__*/emotion_react_browser_esm_css("column-gap:", space(2), ";row-gap:", space(4), ";" + ( true ? "" : 0), true ? "" : 0),
+ spacing: /*#__PURE__*/emotion_react_browser_esm_css("column-gap:", space(4), ";row-gap:", space(4), ";" + ( true ? "" : 0), true ? "" : 0),
item: {
fullWidth: true ? {
name: "18iuzk9",
@@ -68816,7 +67173,7 @@
name: "1pmxm02",
styles: "font-size:inherit;font-weight:500;line-height:normal;&&{margin:0;}"
} : 0;
-const ToolsPanelItem = /*#__PURE__*/emotion_react_browser_esm_css(toolsPanelGrid.item.fullWidth, "&>div,&>fieldset{padding-bottom:0;margin-bottom:0;max-width:100%;}&& ", base_control_styles_Wrapper, "{margin-bottom:0;", StyledField, ":last-child{margin-bottom:0;}}", StyledHelp, "{margin-bottom:0;}&& ", LabelWrapper, "{label{line-height:1.4em;}}" + ( true ? "" : 0), true ? "" : 0);
+const ToolsPanelItem = /*#__PURE__*/emotion_react_browser_esm_css(toolsPanelGrid.item.fullWidth, "&>div,&>fieldset{padding-bottom:0;margin-bottom:0;max-width:100%;}&& ", Wrapper, "{margin-bottom:0;", StyledField, ":last-child{margin-bottom:0;}}", StyledHelp, "{margin-bottom:0;}&& ", LabelWrapper, "{label{line-height:1.4em;}}" + ( true ? "" : 0), true ? "" : 0);
const ToolsPanelItemPlaceholder = true ? {
name: "eivff4",
styles: "display:none"
@@ -68832,7 +67189,7 @@
}), " text-transform:uppercase;" + ( true ? "" : 0));
const DefaultControlsItem = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.gray[900], ";&&[aria-disabled='true']{color:", COLORS.gray[700], ";opacity:1;&:hover{color:", COLORS.gray[700], ";}", ResetLabel, "{opacity:0.3;}}" + ( true ? "" : 0), true ? "" : 0);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/context.js
+;// ./node_modules/@wordpress/components/build-module/tools-panel/context.js
/**
* WordPress dependencies
*/
@@ -68860,7 +67217,7 @@
});
const useToolsPanelContext = () => (0,external_wp_element_namespaceObject.useContext)(ToolsPanelContext);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel-header/hook.js
+;// ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel-header/hook.js
/**
* WordPress dependencies
*/
@@ -68910,23 +67267,21 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel-header/component.js
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-/**
- * Internal dependencies
- */
-
-
+;// ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel-header/component.js
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
@@ -68991,7 +67346,7 @@
// translators: %s: The name of the control being hidden and reset e.g. "Padding".
(0,external_wp_i18n_namespaceObject.__)('Hide and reset %s'), label) : (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s: The name of the control to display e.g. "Padding".
- (0,external_wp_i18n_namespaceObject.__)('Show %s'), label);
+ (0,external_wp_i18n_namespaceObject._x)('Show %s', 'input control'), label);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(menu_item, {
icon: isSelected ? library_check : null,
isSelected: isSelected,
@@ -69056,7 +67411,7 @@
},
toggleProps: {
size: 'small',
- describedBy: dropdownMenuDescriptionText
+ description: dropdownMenuDescriptionText
},
children: () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(menu_group, {
@@ -69093,7 +67448,7 @@
const ConnectedToolsPanelHeader = contextConnect(component_ToolsPanelHeader, 'ToolsPanelHeader');
/* harmony default export */ const tools_panel_header_component = (ConnectedToolsPanelHeader);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel/hook.js
+;// ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel/hook.js
/**
* WordPress dependencies
*/
@@ -69106,20 +67461,27 @@
const DEFAULT_COLUMNS = 2;
+function emptyMenuItems() {
+ return {
+ default: {},
+ optional: {}
+ };
+}
+function emptyState() {
+ return {
+ panelItems: [],
+ menuItemOrder: [],
+ menuItems: emptyMenuItems()
+ };
+}
const generateMenuItems = ({
panelItems,
shouldReset,
currentMenuItems,
menuItemOrder
}) => {
- const newMenuItems = {
- default: {},
- optional: {}
- };
- const menuItems = {
- default: {},
- optional: {}
- };
+ const newMenuItems = emptyMenuItems();
+ const menuItems = emptyMenuItems();
panelItems.forEach(({
hasValue,
isShownByDefault,
@@ -69158,7 +67520,128 @@
});
return menuItems;
};
-const isMenuItemTypeEmpty = obj => obj && Object.keys(obj).length === 0;
+function panelItemsReducer(panelItems, action) {
+ switch (action.type) {
+ case 'REGISTER_PANEL':
+ {
+ const newItems = [...panelItems];
+ // If an item with this label has already been registered, remove it
+ // first. This can happen when an item is moved between the default
+ // and optional groups.
+ const existingIndex = newItems.findIndex(oldItem => oldItem.label === action.item.label);
+ if (existingIndex !== -1) {
+ newItems.splice(existingIndex, 1);
+ }
+ newItems.push(action.item);
+ return newItems;
+ }
+ case 'UNREGISTER_PANEL':
+ {
+ const index = panelItems.findIndex(item => item.label === action.label);
+ if (index !== -1) {
+ const newItems = [...panelItems];
+ newItems.splice(index, 1);
+ return newItems;
+ }
+ return panelItems;
+ }
+ default:
+ return panelItems;
+ }
+}
+function menuItemOrderReducer(menuItemOrder, action) {
+ switch (action.type) {
+ case 'REGISTER_PANEL':
+ {
+ // Track the initial order of item registration. This is used for
+ // maintaining menu item order later.
+ if (menuItemOrder.includes(action.item.label)) {
+ return menuItemOrder;
+ }
+ return [...menuItemOrder, action.item.label];
+ }
+ default:
+ return menuItemOrder;
+ }
+}
+function menuItemsReducer(state, action) {
+ switch (action.type) {
+ case 'REGISTER_PANEL':
+ case 'UNREGISTER_PANEL':
+ // generate new menu items from original `menuItems` and updated `panelItems` and `menuItemOrder`
+ return generateMenuItems({
+ currentMenuItems: state.menuItems,
+ panelItems: state.panelItems,
+ menuItemOrder: state.menuItemOrder,
+ shouldReset: false
+ });
+ case 'RESET_ALL':
+ return generateMenuItems({
+ panelItems: state.panelItems,
+ menuItemOrder: state.menuItemOrder,
+ shouldReset: true
+ });
+ case 'UPDATE_VALUE':
+ {
+ const oldValue = state.menuItems[action.group][action.label];
+ if (action.value === oldValue) {
+ return state.menuItems;
+ }
+ return {
+ ...state.menuItems,
+ [action.group]: {
+ ...state.menuItems[action.group],
+ [action.label]: action.value
+ }
+ };
+ }
+ case 'TOGGLE_VALUE':
+ {
+ const currentItem = state.panelItems.find(item => item.label === action.label);
+ if (!currentItem) {
+ return state.menuItems;
+ }
+ const menuGroup = currentItem.isShownByDefault ? 'default' : 'optional';
+ const newMenuItems = {
+ ...state.menuItems,
+ [menuGroup]: {
+ ...state.menuItems[menuGroup],
+ [action.label]: !state.menuItems[menuGroup][action.label]
+ }
+ };
+ return newMenuItems;
+ }
+ default:
+ return state.menuItems;
+ }
+}
+function panelReducer(state, action) {
+ const panelItems = panelItemsReducer(state.panelItems, action);
+ const menuItemOrder = menuItemOrderReducer(state.menuItemOrder, action);
+ // `menuItemsReducer` is a bit unusual because it generates new state from original `menuItems`
+ // and the updated `panelItems` and `menuItemOrder`.
+ const menuItems = menuItemsReducer({
+ panelItems,
+ menuItemOrder,
+ menuItems: state.menuItems
+ }, action);
+ return {
+ panelItems,
+ menuItemOrder,
+ menuItems
+ };
+}
+function resetAllFiltersReducer(filters, action) {
+ switch (action.type) {
+ case 'REGISTER':
+ return [...filters, action.filter];
+ case 'UNREGISTER':
+ return filters.filter(f => f !== action.filter);
+ default:
+ return filters;
+ }
+}
+const isMenuItemTypeEmpty = obj => Object.keys(obj).length === 0;
function useToolsPanel(props) {
const {
className,
@@ -69171,46 +67654,32 @@
__experimentalLastVisibleItemClass,
...otherProps
} = useContextSystem(props, 'ToolsPanel');
- const isResetting = (0,external_wp_element_namespaceObject.useRef)(false);
- const wasResetting = isResetting.current;
-
- // `isResetting` is cleared via this hook to effectively batch together
+ const isResettingRef = (0,external_wp_element_namespaceObject.useRef)(false);
+ const wasResetting = isResettingRef.current;
+
+ // `isResettingRef` is cleared via this hook to effectively batch together
// the resetAll task. Without this, the flag is cleared after the first
// control updates and forces a rerender with subsequent controls then
// believing they need to reset, unfortunately using stale data.
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (wasResetting) {
- isResetting.current = false;
+ isResettingRef.current = false;
}
}, [wasResetting]);
// Allow panel items to register themselves.
- const [panelItems, setPanelItems] = (0,external_wp_element_namespaceObject.useState)([]);
- const [menuItemOrder, setMenuItemOrder] = (0,external_wp_element_namespaceObject.useState)([]);
- const [resetAllFilters, setResetAllFilters] = (0,external_wp_element_namespaceObject.useState)([]);
+ const [{
+ panelItems,
+ menuItems
+ }, panelDispatch] = (0,external_wp_element_namespaceObject.useReducer)(panelReducer, undefined, emptyState);
+ const [resetAllFilters, dispatchResetAllFilters] = (0,external_wp_element_namespaceObject.useReducer)(resetAllFiltersReducer, []);
const registerPanelItem = (0,external_wp_element_namespaceObject.useCallback)(item => {
// Add item to panel items.
- setPanelItems(items => {
- const newItems = [...items];
- // If an item with this label has already been registered, remove it
- // first. This can happen when an item is moved between the default
- // and optional groups.
- const existingIndex = newItems.findIndex(oldItem => oldItem.label === item.label);
- if (existingIndex !== -1) {
- newItems.splice(existingIndex, 1);
- }
- return [...newItems, item];
- });
-
- // Track the initial order of item registration. This is used for
- // maintaining menu item order later.
- setMenuItemOrder(items => {
- if (items.includes(item.label)) {
- return items;
- }
- return [...items, item.label];
- });
- }, [setPanelItems, setMenuItemOrder]);
+ panelDispatch({
+ type: 'REGISTER_PANEL',
+ item
+ });
+ }, []);
// Panels need to deregister on unmount to avoid orphans in menu state.
// This is an issue when panel items are being injected via SlotFills.
@@ -69219,130 +67688,90 @@
// controls, e.g. both panels have a "padding" control, the
// deregistration of the first panel doesn't occur until after the
// registration of the next.
- setPanelItems(items => {
- const newItems = [...items];
- const index = newItems.findIndex(item => item.label === label);
- if (index !== -1) {
- newItems.splice(index, 1);
- }
- return newItems;
- });
- }, [setPanelItems]);
- const registerResetAllFilter = (0,external_wp_element_namespaceObject.useCallback)(newFilter => {
- setResetAllFilters(filters => {
- return [...filters, newFilter];
- });
- }, [setResetAllFilters]);
- const deregisterResetAllFilter = (0,external_wp_element_namespaceObject.useCallback)(filterToRemove => {
- setResetAllFilters(filters => {
- return filters.filter(filter => filter !== filterToRemove);
- });
- }, [setResetAllFilters]);
-
- // Manage and share display state of menu items representing child controls.
- const [menuItems, setMenuItems] = (0,external_wp_element_namespaceObject.useState)({
- default: {},
- optional: {}
- });
-
- // Setup menuItems state as panel items register themselves.
- (0,external_wp_element_namespaceObject.useEffect)(() => {
- setMenuItems(prevState => {
- const items = generateMenuItems({
- panelItems,
- shouldReset: false,
- currentMenuItems: prevState,
- menuItemOrder
- });
- return items;
- });
- }, [panelItems, setMenuItems, menuItemOrder]);
+ panelDispatch({
+ type: 'UNREGISTER_PANEL',
+ label
+ });
+ }, []);
+ const registerResetAllFilter = (0,external_wp_element_namespaceObject.useCallback)(filter => {
+ dispatchResetAllFilters({
+ type: 'REGISTER',
+ filter
+ });
+ }, []);
+ const deregisterResetAllFilter = (0,external_wp_element_namespaceObject.useCallback)(filter => {
+ dispatchResetAllFilters({
+ type: 'UNREGISTER',
+ filter
+ });
+ }, []);
// Updates the status of the panel’s menu items. For default items the
// value represents whether it differs from the default and for optional
// items whether the item is shown.
const flagItemCustomization = (0,external_wp_element_namespaceObject.useCallback)((value, label, group = 'default') => {
- setMenuItems(items => {
- const newState = {
- ...items,
- [group]: {
- ...items[group],
- [label]: value
- }
- };
- return newState;
- });
- }, [setMenuItems]);
+ panelDispatch({
+ type: 'UPDATE_VALUE',
+ group,
+ label,
+ value
+ });
+ }, []);
// Whether all optional menu items are hidden or not must be tracked
// in order to later determine if the panel display is empty and handle
// conditional display of a plus icon to indicate the presence of further
// menu items.
- const [areAllOptionalControlsHidden, setAreAllOptionalControlsHidden] = (0,external_wp_element_namespaceObject.useState)(false);
- (0,external_wp_element_namespaceObject.useEffect)(() => {
- if (isMenuItemTypeEmpty(menuItems?.default) && !isMenuItemTypeEmpty(menuItems?.optional)) {
- const allControlsHidden = !Object.entries(menuItems.optional).some(([, isSelected]) => isSelected);
- setAreAllOptionalControlsHidden(allControlsHidden);
- }
- }, [menuItems, setAreAllOptionalControlsHidden]);
+ const areAllOptionalControlsHidden = (0,external_wp_element_namespaceObject.useMemo)(() => {
+ return isMenuItemTypeEmpty(menuItems.default) && !isMenuItemTypeEmpty(menuItems.optional) && Object.values(menuItems.optional).every(isSelected => !isSelected);
+ }, [menuItems]);
const cx = useCx();
const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
const wrapperStyle = hasInnerWrapper && ToolsPanelWithInnerWrapper(DEFAULT_COLUMNS);
- const emptyStyle = isMenuItemTypeEmpty(menuItems?.default) && areAllOptionalControlsHidden && ToolsPanelHiddenInnerWrapper;
+ const emptyStyle = areAllOptionalControlsHidden && ToolsPanelHiddenInnerWrapper;
return cx(ToolsPanel(DEFAULT_COLUMNS), wrapperStyle, emptyStyle, className);
- }, [areAllOptionalControlsHidden, className, cx, hasInnerWrapper, menuItems]);
+ }, [areAllOptionalControlsHidden, className, cx, hasInnerWrapper]);
// Toggle the checked state of a menu item which is then used to determine
// display of the item within the panel.
const toggleItem = (0,external_wp_element_namespaceObject.useCallback)(label => {
- const currentItem = panelItems.find(item => item.label === label);
- if (!currentItem) {
- return;
- }
- const menuGroup = currentItem.isShownByDefault ? 'default' : 'optional';
- const newMenuItems = {
- ...menuItems,
- [menuGroup]: {
- ...menuItems[menuGroup],
- [label]: !menuItems[menuGroup][label]
- }
- };
- setMenuItems(newMenuItems);
- }, [menuItems, panelItems, setMenuItems]);
+ panelDispatch({
+ type: 'TOGGLE_VALUE',
+ label
+ });
+ }, []);
// Resets display of children and executes resetAll callback if available.
const resetAllItems = (0,external_wp_element_namespaceObject.useCallback)(() => {
if (typeof resetAll === 'function') {
- isResetting.current = true;
+ isResettingRef.current = true;
resetAll(resetAllFilters);
}
// Turn off display of all non-default items.
- const resetMenuItems = generateMenuItems({
- panelItems,
- menuItemOrder,
- shouldReset: true
- });
- setMenuItems(resetMenuItems);
- }, [panelItems, resetAllFilters, resetAll, setMenuItems, menuItemOrder]);
+ panelDispatch({
+ type: 'RESET_ALL'
+ });
+ }, [resetAllFilters, resetAll]);
// Assist ItemGroup styling when there are potentially hidden placeholder
// items by identifying first & last items that are toggled on for display.
const getFirstVisibleItemLabel = items => {
const optionalItems = menuItems.optional || {};
- const firstItem = items.find(item => item.isShownByDefault || !!optionalItems[item.label]);
+ const firstItem = items.find(item => item.isShownByDefault || optionalItems[item.label]);
return firstItem?.label;
};
const firstDisplayedItem = getFirstVisibleItemLabel(panelItems);
const lastDisplayedItem = getFirstVisibleItemLabel([...panelItems].reverse());
+ const hasMenuItems = panelItems.length > 0;
const panelContext = (0,external_wp_element_namespaceObject.useMemo)(() => ({
areAllOptionalControlsHidden,
deregisterPanelItem,
deregisterResetAllFilter,
firstDisplayedItem,
flagItemCustomization,
- hasMenuItems: !!panelItems.length,
- isResetting: isResetting.current,
+ hasMenuItems,
+ isResetting: isResettingRef.current,
lastDisplayedItem,
menuItems,
panelId,
@@ -69351,7 +67780,7 @@
shouldRenderPlaceholderItems,
__experimentalFirstVisibleItemClass,
__experimentalLastVisibleItemClass
- }), [areAllOptionalControlsHidden, deregisterPanelItem, deregisterResetAllFilter, firstDisplayedItem, flagItemCustomization, lastDisplayedItem, menuItems, panelId, panelItems, registerResetAllFilter, registerPanelItem, shouldRenderPlaceholderItems, __experimentalFirstVisibleItemClass, __experimentalLastVisibleItemClass]);
+ }), [areAllOptionalControlsHidden, deregisterPanelItem, deregisterResetAllFilter, firstDisplayedItem, flagItemCustomization, lastDisplayedItem, menuItems, panelId, hasMenuItems, registerResetAllFilter, registerPanelItem, shouldRenderPlaceholderItems, __experimentalFirstVisibleItemClass, __experimentalLastVisibleItemClass]);
return {
...otherProps,
headingLevel,
@@ -69362,15 +67791,14 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel/component.js
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel/component.js
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
@@ -69435,6 +67863,7 @@
* onDeselect={ () => setHeight() }
* >
* <UnitControl
+ * __next40pxDefaultSize
* label={ __( 'Height' ) }
* onChange={ setHeight }
* value={ height }
@@ -69446,6 +67875,7 @@
* onDeselect={ () => setWidth() }
* >
* <UnitControl
+ * __next40pxDefaultSize
* label={ __( 'Width' ) }
* onChange={ setWidth }
* value={ width }
@@ -69459,7 +67889,7 @@
const component_ToolsPanel = contextConnect(UnconnectedToolsPanel, 'ToolsPanel');
/* harmony default export */ const tools_panel_component = (component_ToolsPanel);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel-item/hook.js
+;// ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel-item/hook.js
/**
* WordPress dependencies
*/
@@ -69504,11 +67934,9 @@
// hasValue is a new function on every render, so do not add it as a
// dependency to the useCallback hook! If needed, we should use a ref.
- // eslint-disable-next-line react-hooks/exhaustive-deps
const hasValueCallback = (0,external_wp_element_namespaceObject.useCallback)(hasValue, [panelId]);
// resetAllFilter is a new function on every render, so do not add it as a
// dependency to the useCallback hook! If needed, we should use a ref.
- // eslint-disable-next-line react-hooks/exhaustive-deps
const resetAllFilterCallback = (0,external_wp_element_namespaceObject.useCallback)(resetAllFilter, [panelId]);
const previousPanelId = (0,external_wp_compose_namespaceObject.usePrevious)(currentPanelId);
const hasMatchingPanel = currentPanelId === panelId || currentPanelId === null;
@@ -69597,7 +68025,7 @@
};
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel-item/component.js
+;// ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel-item/component.js
/**
* External dependencies
*/
@@ -69633,7 +68061,7 @@
const component_ToolsPanelItem = contextConnect(UnconnectedToolsPanelItem, 'ToolsPanelItem');
/* harmony default export */ const tools_panel_item_component = (component_ToolsPanelItem);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/roving-tab-index-context.js
+;// ./node_modules/@wordpress/components/build-module/tree-grid/roving-tab-index-context.js
/**
* WordPress dependencies
*/
@@ -69642,7 +68070,7 @@
const useRovingTabIndexContext = () => (0,external_wp_element_namespaceObject.useContext)(RovingTabIndexContext);
const RovingTabIndexProvider = RovingTabIndexContext.Provider;
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/roving-tab-index.js
+;// ./node_modules/@wordpress/components/build-module/tree-grid/roving-tab-index.js
/**
* WordPress dependencies
*/
@@ -69677,7 +68105,7 @@
});
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/index.js
+;// ./node_modules/@wordpress/components/build-module/tree-grid/index.js
/**
* WordPress dependencies
*/
@@ -69997,7 +68425,7 @@
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/row.js
+;// ./node_modules/@wordpress/components/build-module/tree-grid/row.js
/**
* WordPress dependencies
*/
@@ -70037,7 +68465,7 @@
const TreeGridRow = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTreeGridRow);
/* harmony default export */ const tree_grid_row = (TreeGridRow);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/roving-tab-index-item.js
+;// ./node_modules/@wordpress/components/build-module/tree-grid/roving-tab-index-item.js
/**
* WordPress dependencies
*/
@@ -70089,7 +68517,7 @@
});
/* harmony default export */ const roving_tab_index_item = (RovingTabIndexItem);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/item.js
+;// ./node_modules/@wordpress/components/build-module/tree-grid/item.js
/**
* WordPress dependencies
*/
@@ -70121,16 +68549,15 @@
const TreeGridItem = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTreeGridItem);
/* harmony default export */ const tree_grid_item = (TreeGridItem);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/cell.js
-/**
- * WordPress dependencies
- */
-
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/tree-grid/cell.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
function UnforwardedTreeGridCell({
@@ -70142,7 +68569,10 @@
...props,
role: "gridcell",
children: withoutGridItem ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
- children: children
+ children: typeof children === 'function' ? children({
+ ...props,
+ ref
+ }) : children
}) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tree_grid_item, {
ref: ref,
children: children
@@ -70160,7 +68590,7 @@
const TreeGridCell = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTreeGridCell);
/* harmony default export */ const cell = (TreeGridCell);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/isolated-event-container/index.js
+;// ./node_modules/@wordpress/components/build-module/isolated-event-container/index.js
/**
* External dependencies
*/
@@ -70191,7 +68621,7 @@
});
/* harmony default export */ const isolated_event_container = (IsolatedEventContainer);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/use-slot-fills.js
+;// ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/use-slot-fills.js
/**
* WordPress dependencies
*/
@@ -70207,7 +68637,7 @@
return (0,external_wp_compose_namespaceObject.useObservableValue)(registry.fills, name);
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/z-stack/styles.js
+;// ./node_modules/@wordpress/components/build-module/z-stack/styles.js
function z_stack_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
@@ -70236,7 +68666,7 @@
}) => isLayered ? // When `isLayered` is true, all items overlap in the same grid cell
z_stack_styles_ref : undefined, ";}" + ( true ? "" : 0));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/z-stack/component.js
+;// ./node_modules/@wordpress/components/build-module/z-stack/component.js
/**
* External dependencies
*/
@@ -70305,7 +68735,7 @@
const ZStack = contextConnect(UnconnectedZStack, 'ZStack');
/* harmony default export */ const z_stack_component = (ZStack);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/navigate-regions/index.js
+;// ./node_modules/@wordpress/components/build-module/higher-order/navigate-regions/index.js
/**
* WordPress dependencies
*/
@@ -70422,7 +68852,7 @@
})
}), 'navigateRegions'));
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-constrained-tabbing/index.js
+;// ./node_modules/@wordpress/components/build-module/higher-order/with-constrained-tabbing/index.js
/**
* WordPress dependencies
*/
@@ -70449,16 +68879,15 @@
}, 'withConstrainedTabbing');
/* harmony default export */ const with_constrained_tabbing = (withConstrainedTabbing);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-fallback-styles/index.js
-/**
- * External dependencies
- */
-
-
-/**
- * WordPress dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/higher-order/with-fallback-styles/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
@@ -70513,9 +68942,9 @@
};
}, 'withFallbackStyles'));
-;// CONCATENATED MODULE: external ["wp","hooks"]
+;// external ["wp","hooks"]
const external_wp_hooks_namespaceObject = window["wp"]["hooks"];
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-filters/index.js
+;// ./node_modules/@wordpress/components/build-module/higher-order/with-filters/index.js
/**
* WordPress dependencies
*/
@@ -70645,7 +69074,7 @@
}, 'withFilters');
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-focus-return/index.js
+;// ./node_modules/@wordpress/components/build-module/higher-order/with-focus-return/index.js
/**
* WordPress dependencies
*/
@@ -70676,7 +69105,7 @@
* describing the component and the
* focus return characteristics.
*
- * @return Higher Order Component with the focus restauration behaviour.
+ * @return Higher Order Component with the focus restoration behaviour.
*/
/* harmony default export */ const with_focus_return = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(
// @ts-expect-error TODO: Reconcile with intended `createHigherOrderComponent` types
@@ -70711,7 +69140,7 @@
return children;
};
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-notices/index.js
+;// ./node_modules/@wordpress/components/build-module/higher-order/with-notices/index.js
/**
* External dependencies
*/
@@ -70815,24 +69244,24 @@
return Component;
}, 'withNotices'));
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/YGMEBI3A.js
-"use client";
-
-
-
-
-
-// src/menu/menu-context.ts
-
-var YGMEBI3A_menu = createStoreContext(
+;// ./node_modules/@ariakit/react-core/esm/__chunks/B2J376ND.js
+"use client";
+
+
+
+
+
+// src/menu/menu-context.tsx
+
+var B2J376ND_menu = createStoreContext(
[CompositeContextProvider, HovercardContextProvider],
[CompositeScopedContextProvider, HovercardScopedContextProvider]
);
-var useMenuContext = YGMEBI3A_menu.useContext;
-var useMenuScopedContext = YGMEBI3A_menu.useScopedContext;
-var useMenuProviderContext = YGMEBI3A_menu.useProviderContext;
-var MenuContextProvider = YGMEBI3A_menu.ContextProvider;
-var MenuScopedContextProvider = YGMEBI3A_menu.ScopedContextProvider;
+var useMenuContext = B2J376ND_menu.useContext;
+var useMenuScopedContext = B2J376ND_menu.useScopedContext;
+var useMenuProviderContext = B2J376ND_menu.useProviderContext;
+var MenuContextProvider = B2J376ND_menu.ContextProvider;
+var MenuScopedContextProvider = B2J376ND_menu.ScopedContextProvider;
var useMenuBarContext = (/* unused pure expression or super */ null && (useMenubarContext));
var useMenuBarScopedContext = (/* unused pure expression or super */ null && (useMenubarScopedContext));
var useMenuBarProviderContext = (/* unused pure expression or super */ null && (useMenubarProviderContext));
@@ -70844,157 +69273,29 @@
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/6XBVQI3K.js
-"use client";
-
-// src/checkbox/checkbox-checked-context.ts
-
-var CheckboxCheckedContext = (0,external_React_.createContext)(false);
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/MW2F7SEA.js
-"use client";
-
-
-
-
-// src/checkbox/checkbox-check.tsx
-
-
-var checkmark = /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(
- "svg",
- {
- display: "block",
- fill: "none",
- stroke: "currentColor",
- strokeLinecap: "round",
- strokeLinejoin: "round",
- strokeWidth: "1.5pt",
- viewBox: "0 0 16 16",
- height: "1em",
- width: "1em",
- children: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)("polyline", { points: "4,8 7,12 12,4" })
- }
-);
-function getChildren(props) {
- if (props.checked) {
- return props.children || checkmark;
- }
- if (typeof props.children === "function") {
- return props.children;
- }
- return null;
-}
-var useCheckboxCheck = createHook(
- (_a) => {
- var _b = _a, { store, checked } = _b, props = __objRest(_b, ["store", "checked"]);
- const context = (0,external_React_.useContext)(CheckboxCheckedContext);
- checked = checked != null ? checked : context;
- const children = getChildren({ checked, children: props.children });
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
- "aria-hidden": true
- }, props), {
- children,
- style: _4R3V3JGP_spreadValues({
- width: "1em",
- height: "1em",
- pointerEvents: "none"
- }, props.style)
- });
- return props;
- }
-);
-var CheckboxCheck = createComponent((props) => {
- const htmlProps = useCheckboxCheck(props);
- return _3ORBWXWF_createElement("span", htmlProps);
-});
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/menu/menu-item-check.js
-"use client";
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-// src/menu/menu-item-check.ts
-
-var useMenuItemCheck = createHook(
- (_a) => {
- var _b = _a, { store, checked } = _b, props = __objRest(_b, ["store", "checked"]);
- const context = (0,external_React_.useContext)(MenuItemCheckedContext);
- checked = checked != null ? checked : context;
- props = useCheckboxCheck(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { checked }));
- return props;
- }
-);
-var MenuItemCheck = createComponent((props) => {
- const htmlProps = useMenuItemCheck(props);
- return _3ORBWXWF_createElement("span", htmlProps);
-});
-if (false) {}
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/KA4GX64Z.js
-"use client";
-
-
-
-// src/menubar/menubar-context.ts
+;// ./node_modules/@ariakit/react-core/esm/__chunks/62UHHO2X.js
+"use client";
+
+
+
+// src/menubar/menubar-context.tsx
var menubar = createStoreContext(
[CompositeContextProvider],
[CompositeScopedContextProvider]
);
-var KA4GX64Z_useMenubarContext = menubar.useContext;
-var KA4GX64Z_useMenubarScopedContext = menubar.useScopedContext;
-var KA4GX64Z_useMenubarProviderContext = menubar.useProviderContext;
-var KA4GX64Z_MenubarContextProvider = menubar.ContextProvider;
-var KA4GX64Z_MenubarScopedContextProvider = menubar.ScopedContextProvider;
-var KA4GX64Z_MenuItemCheckedContext = (0,external_React_.createContext)(
+var _62UHHO2X_useMenubarContext = menubar.useContext;
+var _62UHHO2X_useMenubarScopedContext = menubar.useScopedContext;
+var _62UHHO2X_useMenubarProviderContext = menubar.useProviderContext;
+var _62UHHO2X_MenubarContextProvider = menubar.ContextProvider;
+var _62UHHO2X_MenubarScopedContextProvider = menubar.ScopedContextProvider;
+var _62UHHO2X_MenuItemCheckedContext = (0,external_React_.createContext)(
void 0
);
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/W76OTZCC.js
-"use client";
-
-
-
-
-// src/combobox/combobox-context.tsx
-
-var W76OTZCC_ctx = createStoreContext(
- [PopoverContextProvider, CompositeContextProvider],
- [PopoverScopedContextProvider, CompositeScopedContextProvider]
-);
-var useComboboxContext = W76OTZCC_ctx.useContext;
-var useComboboxScopedContext = W76OTZCC_ctx.useScopedContext;
-var useComboboxProviderContext = W76OTZCC_ctx.useProviderContext;
-var ComboboxContextProvider = W76OTZCC_ctx.ContextProvider;
-var ComboboxScopedContextProvider = W76OTZCC_ctx.ScopedContextProvider;
-var ComboboxItemValueContext = (0,external_React_.createContext)(
- void 0
-);
-var ComboboxItemCheckedContext = (0,external_React_.createContext)(false);
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/menu/menu-store.js
+;// ./node_modules/@ariakit/core/esm/menu/menu-store.js
"use client";
@@ -71014,7 +69315,7 @@
combobox,
parent,
menubar
- } = _b, props = _4R3V3JGP_objRest(_b, [
+ } = _b, props = _3YLGPPWQ_objRest(_b, [
"combobox",
"parent",
"menubar"
@@ -71033,7 +69334,7 @@
);
throwOnConflictingProps(props, store);
const syncState = store.getState();
- const composite = createCompositeStore(_chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, props), {
+ const composite = createCompositeStore(_chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, props), {
store,
orientation: defaultValue(
props.orientation,
@@ -71041,7 +69342,7 @@
"vertical"
)
}));
- const hovercard = createHovercardStore(_chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, props), {
+ const hovercard = createHovercardStore(_chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, props), {
store,
placement: defaultValue(
props.placement,
@@ -71055,7 +69356,7 @@
),
hideTimeout: defaultValue(props.hideTimeout, syncState.hideTimeout, 0)
}));
- const initialState = _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues(_chunks_4R3V3JGP_spreadValues({}, composite.getState()), hovercard.getState()), {
+ const initialState = _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues(_chunks_3YLGPPWQ_spreadValues({}, composite.getState()), hovercard.getState()), {
initialFocus: defaultValue(syncState.initialFocus, "container"),
values: defaultValue(
props.values,
@@ -71068,8 +69369,7 @@
setup(
menu,
() => sync(menu, ["mounted"], (state) => {
- if (state.mounted)
- return;
+ if (state.mounted) return;
menu.setState("activeId", null);
})
);
@@ -71082,7 +69382,7 @@
);
})
);
- return _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues(_chunks_4R3V3JGP_spreadValues(_chunks_4R3V3JGP_spreadValues({}, composite), hovercard), menu), {
+ return _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues(_chunks_3YLGPPWQ_spreadValues(_chunks_3YLGPPWQ_spreadValues({}, composite), hovercard), menu), {
combobox,
parent,
menubar,
@@ -71093,18 +69393,14 @@
setInitialFocus: (value) => menu.setState("initialFocus", value),
setValues: (values) => menu.setState("values", values),
setValue: (name, value) => {
- if (name === "__proto__")
- return;
- if (name === "constructor")
- return;
- if (Array.isArray(name))
- return;
+ if (name === "__proto__") return;
+ if (name === "constructor") return;
+ if (Array.isArray(name)) return;
menu.setState("values", (values) => {
const prevValue = values[name];
- const nextValue = Y3OOHFCN_applyState(value, prevValue);
- if (nextValue === prevValue)
- return values;
- return _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, values), {
+ const nextValue = applyState(value, prevValue);
+ if (nextValue === prevValue) return values;
+ return _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, values), {
[name]: nextValue !== void 0 && nextValue
});
});
@@ -71113,7 +69409,7 @@
}
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/XJXP7ZSQ.js
+;// ./node_modules/@ariakit/react-core/esm/__chunks/MRTXKBQF.js
"use client";
@@ -71128,368 +69424,1177 @@
function useMenuStoreProps(store, update, props) {
useUpdateEffect(update, [props.combobox, props.parent, props.menubar]);
- store = useCompositeStoreProps(store, update, props);
- store = useHovercardStoreProps(store, update, props);
useStoreProps(store, props, "values", "setValues");
- return Object.assign(store, {
- combobox: props.combobox,
- parent: props.parent,
- menubar: props.menubar
- });
+ return Object.assign(
+ useHovercardStoreProps(
+ useCompositeStoreProps(store, update, props),
+ update,
+ props
+ ),
+ {
+ combobox: props.combobox,
+ parent: props.parent,
+ menubar: props.menubar
+ }
+ );
}
function useMenuStore(props = {}) {
const parent = useMenuContext();
- const menubar = KA4GX64Z_useMenubarContext();
+ const menubar = _62UHHO2X_useMenubarContext();
const combobox = useComboboxProviderContext();
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), {
parent: props.parent !== void 0 ? props.parent : parent,
menubar: props.menubar !== void 0 ? props.menubar : menubar,
combobox: props.combobox !== void 0 ? props.combobox : combobox
});
- const [store, update] = EKQEJRUF_useStore(createMenuStore, props);
+ const [store, update] = YV4JVR4I_useStore(createMenuStore, props);
return useMenuStoreProps(store, update, props);
}
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/VDNZBO4W.js
-"use client";
-
-
-
-
-
-// src/button/button.ts
-
-
-var useButton = createHook((props) => {
- const ref = (0,external_React_.useRef)(null);
- const tagName = useTagName(ref, props.as || "button");
- const [isNativeButton, setIsNativeButton] = (0,external_React_.useState)(
- () => !!tagName && isButton({ tagName, type: props.type })
- );
- (0,external_React_.useEffect)(() => {
- if (!ref.current)
- return;
- setIsNativeButton(isButton(ref.current));
- }, []);
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
- role: !isNativeButton && tagName !== "a" ? "button" : void 0
- }, props), {
- ref: useMergeRefs(ref, props.ref)
- });
- props = useCommand(props);
- return props;
-});
-var VDNZBO4W_Button = createComponent((props) => {
- const htmlProps = useButton(props);
- return _3ORBWXWF_createElement("button", htmlProps);
-});
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/BHEJ6NUH.js
-"use client";
-
-
-
-
-
-
-// src/disclosure/disclosure.ts
-
-
-var BHEJ6NUH_symbol = Symbol("disclosure");
-var useDisclosure = createHook(
- (_a) => {
- var _b = _a, { store, toggleOnClick = true } = _b, props = __objRest(_b, ["store", "toggleOnClick"]);
- const context = useDisclosureProviderContext();
- store = store || context;
- invariant(
+;// ./node_modules/@wordpress/components/build-module/menu/context.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+const context_Context = (0,external_wp_element_namespaceObject.createContext)(undefined);
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/MVIULMNR.js
+"use client";
+
+
+
+
+
+
+
+
+
+// src/menu/menu-item.tsx
+
+
+
+
+var MVIULMNR_TagName = "div";
+function menuHasFocus(baseElement, items, currentTarget) {
+ var _a;
+ if (!baseElement) return false;
+ if (hasFocusWithin(baseElement)) return true;
+ const expandedItem = items == null ? void 0 : items.find((item) => {
+ var _a2;
+ if (item.element === currentTarget) return false;
+ return ((_a2 = item.element) == null ? void 0 : _a2.getAttribute("aria-expanded")) === "true";
+ });
+ const expandedMenuId = (_a = expandedItem == null ? void 0 : expandedItem.element) == null ? void 0 : _a.getAttribute("aria-controls");
+ if (!expandedMenuId) return false;
+ const doc = getDocument(baseElement);
+ const expandedMenu = doc.getElementById(expandedMenuId);
+ if (!expandedMenu) return false;
+ if (hasFocusWithin(expandedMenu)) return true;
+ return !!expandedMenu.querySelector("[role=menuitem][aria-expanded=true]");
+}
+var useMenuItem = createHook(
+ function useMenuItem2(_a) {
+ var _b = _a, {
store,
- false && 0
- );
- const ref = (0,external_React_.useRef)(null);
- const [expanded, setExpanded] = (0,external_React_.useState)(false);
- const disclosureElement = store.useState("disclosureElement");
- const open = store.useState("open");
- (0,external_React_.useEffect)(() => {
- let isCurrentDisclosure = disclosureElement === ref.current;
- if (!(disclosureElement == null ? void 0 : disclosureElement.isConnected)) {
- store == null ? void 0 : store.setDisclosureElement(ref.current);
- isCurrentDisclosure = true;
- }
- setExpanded(open && isCurrentDisclosure);
- }, [disclosureElement, store, open]);
- const onClickProp = props.onClick;
- const toggleOnClickProp = useBooleanEvent(toggleOnClick);
- const [isDuplicate, metadataProps] = useMetadataProps(props, BHEJ6NUH_symbol, true);
- const onClick = useEvent((event) => {
- onClickProp == null ? void 0 : onClickProp(event);
- if (event.defaultPrevented)
- return;
- if (isDuplicate)
- return;
- if (!toggleOnClickProp(event))
- return;
- store == null ? void 0 : store.setDisclosureElement(event.currentTarget);
- store == null ? void 0 : store.toggle();
- });
- const contentElement = store.useState("contentElement");
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues(_4R3V3JGP_spreadValues({
- "aria-expanded": expanded,
- "aria-controls": contentElement == null ? void 0 : contentElement.id
- }, metadataProps), props), {
- ref: useMergeRefs(ref, props.ref),
- onClick
- });
- props = useButton(props);
- return props;
- }
-);
-var Disclosure = createComponent((props) => {
- const htmlProps = useDisclosure(props);
- return _3ORBWXWF_createElement("button", htmlProps);
-});
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/H3TG2CZP.js
-"use client";
-
-
-
-
-
-// src/dialog/dialog-disclosure.ts
-
-
-var useDialogDisclosure = createHook(
- (_a) => {
- var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
- const context = useDialogProviderContext();
- store = store || context;
- invariant(
- store,
- false && 0
- );
- const contentElement = store.useState("contentElement");
- props = _4R3V3JGP_spreadValues({
- "aria-haspopup": getPopupRole(contentElement, "dialog")
- }, props);
- props = useDisclosure(_4R3V3JGP_spreadValues({ store }, props));
- return props;
- }
-);
-var DialogDisclosure = createComponent(
- (props) => {
- const htmlProps = useDialogDisclosure(props);
- return _3ORBWXWF_createElement("button", htmlProps);
- }
-);
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/JCH6MLL2.js
-"use client";
-
-
-
-
-
-// src/popover/popover-anchor.ts
-var usePopoverAnchor = createHook(
- (_a) => {
- var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
- const context = usePopoverProviderContext();
- store = store || context;
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
- ref: useMergeRefs(store == null ? void 0 : store.setAnchorElement, props.ref)
- });
- return props;
- }
-);
-var PopoverAnchor = createComponent((props) => {
- const htmlProps = usePopoverAnchor(props);
- return _3ORBWXWF_createElement("div", htmlProps);
-});
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/4ZEZYKUR.js
-"use client";
-
-
-
-
-
-
-
-// src/popover/popover-disclosure.tsx
-
-
-var usePopoverDisclosure = createHook(
- (_a) => {
- var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
- const context = usePopoverProviderContext();
- store = store || context;
+ hideOnClick = true,
+ preventScrollOnKeyDown = true,
+ focusOnHover,
+ blurOnHoverEnd
+ } = _b, props = __objRest(_b, [
+ "store",
+ "hideOnClick",
+ "preventScrollOnKeyDown",
+ "focusOnHover",
+ "blurOnHoverEnd"
+ ]);
+ const menuContext = useMenuScopedContext(true);
+ const menubarContext = _62UHHO2X_useMenubarScopedContext();
+ store = store || menuContext || menubarContext;
invariant(
store,
false && 0
);
const onClickProp = props.onClick;
+ const hideOnClickProp = useBooleanEvent(hideOnClick);
+ const hideMenu = "hideAll" in store ? store.hideAll : void 0;
+ const isWithinMenu = !!hideMenu;
const onClick = useEvent((event) => {
- store == null ? void 0 : store.setAnchorElement(event.currentTarget);
onClickProp == null ? void 0 : onClickProp(event);
+ if (event.defaultPrevented) return;
+ if (isDownloading(event)) return;
+ if (isOpeningInNewTab(event)) return;
+ if (!hideMenu) return;
+ const popupType = event.currentTarget.getAttribute("aria-haspopup");
+ if (popupType === "menu") return;
+ if (!hideOnClickProp(event)) return;
+ hideMenu();
+ });
+ const contentElement = useStoreState(
+ store,
+ (state) => "contentElement" in state ? state.contentElement : null
+ );
+ const role = getPopupItemRole(contentElement, "menuitem");
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
+ role
+ }, props), {
+ onClick
+ });
+ props = useCompositeItem(_3YLGPPWQ_spreadValues({
+ store,
+ preventScrollOnKeyDown
+ }, props));
+ props = useCompositeHover(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
+ store
+ }, props), {
+ focusOnHover(event) {
+ const getFocusOnHover = () => {
+ if (typeof focusOnHover === "function") return focusOnHover(event);
+ if (focusOnHover != null) return focusOnHover;
+ return true;
+ };
+ if (!store) return false;
+ if (!getFocusOnHover()) return false;
+ const { baseElement, items } = store.getState();
+ if (isWithinMenu) {
+ if (event.currentTarget.hasAttribute("aria-expanded")) {
+ event.currentTarget.focus();
+ }
+ return true;
+ }
+ if (menuHasFocus(baseElement, items, event.currentTarget)) {
+ event.currentTarget.focus();
+ return true;
+ }
+ return false;
+ },
+ blurOnHoverEnd(event) {
+ if (typeof blurOnHoverEnd === "function") return blurOnHoverEnd(event);
+ if (blurOnHoverEnd != null) return blurOnHoverEnd;
+ return isWithinMenu;
+ }
+ }));
+ return props;
+ }
+);
+var MVIULMNR_MenuItem = memo2(
+ forwardRef2(function MenuItem2(props) {
+ const htmlProps = useMenuItem(props);
+ return LMDWO4NN_createElement(MVIULMNR_TagName, htmlProps);
+ })
+);
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/RNCDFVMF.js
+"use client";
+
+
+// src/checkbox/checkbox-context.tsx
+var RNCDFVMF_ctx = createStoreContext();
+var useCheckboxContext = RNCDFVMF_ctx.useContext;
+var useCheckboxScopedContext = RNCDFVMF_ctx.useScopedContext;
+var useCheckboxProviderContext = RNCDFVMF_ctx.useProviderContext;
+var CheckboxContextProvider = RNCDFVMF_ctx.ContextProvider;
+var CheckboxScopedContextProvider = RNCDFVMF_ctx.ScopedContextProvider;
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/ASMQKSDT.js
+"use client";
+
+
+
+
+
+
+
+
+// src/checkbox/checkbox.tsx
+
+
+
+var ASMQKSDT_TagName = "input";
+function setMixed(element, mixed) {
+ if (mixed) {
+ element.indeterminate = true;
+ } else if (element.indeterminate) {
+ element.indeterminate = false;
+ }
+}
+function isNativeCheckbox(tagName, type) {
+ return tagName === "input" && (!type || type === "checkbox");
+}
+function getPrimitiveValue(value) {
+ if (Array.isArray(value)) {
+ return value.toString();
+ }
+ return value;
+}
+var useCheckbox = createHook(
+ function useCheckbox2(_a) {
+ var _b = _a, {
+ store,
+ name,
+ value: valueProp,
+ checked: checkedProp,
+ defaultChecked
+ } = _b, props = __objRest(_b, [
+ "store",
+ "name",
+ "value",
+ "checked",
+ "defaultChecked"
+ ]);
+ const context = useCheckboxContext();
+ store = store || context;
+ const [_checked, setChecked] = (0,external_React_.useState)(defaultChecked != null ? defaultChecked : false);
+ const checked = useStoreState(store, (state) => {
+ if (checkedProp !== void 0) return checkedProp;
+ if ((state == null ? void 0 : state.value) === void 0) return _checked;
+ if (valueProp != null) {
+ if (Array.isArray(state.value)) {
+ const primitiveValue = getPrimitiveValue(valueProp);
+ return state.value.includes(primitiveValue);
+ }
+ return state.value === valueProp;
+ }
+ if (Array.isArray(state.value)) return false;
+ if (typeof state.value === "boolean") return state.value;
+ return false;
+ });
+ const ref = (0,external_React_.useRef)(null);
+ const tagName = useTagName(ref, ASMQKSDT_TagName);
+ const nativeCheckbox = isNativeCheckbox(tagName, props.type);
+ const mixed = checked ? checked === "mixed" : void 0;
+ const isChecked = checked === "mixed" ? false : checked;
+ const disabled = disabledFromProps(props);
+ const [propertyUpdated, schedulePropertyUpdate] = useForceUpdate();
+ (0,external_React_.useEffect)(() => {
+ const element = ref.current;
+ if (!element) return;
+ setMixed(element, mixed);
+ if (nativeCheckbox) return;
+ element.checked = isChecked;
+ if (name !== void 0) {
+ element.name = name;
+ }
+ if (valueProp !== void 0) {
+ element.value = `${valueProp}`;
+ }
+ }, [propertyUpdated, mixed, nativeCheckbox, isChecked, name, valueProp]);
+ const onChangeProp = props.onChange;
+ const onChange = useEvent((event) => {
+ if (disabled) {
+ event.stopPropagation();
+ event.preventDefault();
+ return;
+ }
+ setMixed(event.currentTarget, mixed);
+ if (!nativeCheckbox) {
+ event.currentTarget.checked = !event.currentTarget.checked;
+ schedulePropertyUpdate();
+ }
+ onChangeProp == null ? void 0 : onChangeProp(event);
+ if (event.defaultPrevented) return;
+ const elementChecked = event.currentTarget.checked;
+ setChecked(elementChecked);
+ store == null ? void 0 : store.setValue((prevValue) => {
+ if (valueProp == null) return elementChecked;
+ const primitiveValue = getPrimitiveValue(valueProp);
+ if (!Array.isArray(prevValue)) {
+ return prevValue === primitiveValue ? false : primitiveValue;
+ }
+ if (elementChecked) {
+ if (prevValue.includes(primitiveValue)) {
+ return prevValue;
+ }
+ return [...prevValue, primitiveValue];
+ }
+ return prevValue.filter((v) => v !== primitiveValue);
+ });
+ });
+ const onClickProp = props.onClick;
+ const onClick = useEvent((event) => {
+ onClickProp == null ? void 0 : onClickProp(event);
+ if (event.defaultPrevented) return;
+ if (nativeCheckbox) return;
+ onChange(event);
});
props = useWrapElement(
props,
- (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(PopoverScopedContextProvider, { value: store, children: element }),
- [store]
- );
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
+ (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(CheckboxCheckedContext.Provider, { value: isChecked, children: element }),
+ [isChecked]
+ );
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
+ role: !nativeCheckbox ? "checkbox" : void 0,
+ type: nativeCheckbox ? "checkbox" : void 0,
+ "aria-checked": checked
+ }, props), {
+ ref: useMergeRefs(ref, props.ref),
+ onChange,
onClick
});
- props = usePopoverAnchor(_4R3V3JGP_spreadValues({ store }, props));
- props = useDialogDisclosure(_4R3V3JGP_spreadValues({ store }, props));
+ props = useCommand(_3YLGPPWQ_spreadValues({ clickOnEnter: !nativeCheckbox }, props));
+ return removeUndefinedValues(_3YLGPPWQ_spreadValues({
+ name: nativeCheckbox ? name : void 0,
+ value: nativeCheckbox ? valueProp : void 0,
+ checked: isChecked
+ }, props));
+ }
+);
+var Checkbox = forwardRef2(function Checkbox2(props) {
+ const htmlProps = useCheckbox(props);
+ return LMDWO4NN_createElement(ASMQKSDT_TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@ariakit/core/esm/checkbox/checkbox-store.js
+"use client";
+
+
+
+
+// src/checkbox/checkbox-store.ts
+function createCheckboxStore(props = {}) {
+ var _a;
+ throwOnConflictingProps(props, props.store);
+ const syncState = (_a = props.store) == null ? void 0 : _a.getState();
+ const initialState = {
+ value: defaultValue(
+ props.value,
+ syncState == null ? void 0 : syncState.value,
+ props.defaultValue,
+ false
+ )
+ };
+ const checkbox = createStore(initialState, props.store);
+ return _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, checkbox), {
+ setValue: (value) => checkbox.setState("value", value)
+ });
+}
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/HAVBGUA3.js
+"use client";
+
+
+
+// src/checkbox/checkbox-store.ts
+
+function useCheckboxStoreProps(store, update, props) {
+ useUpdateEffect(update, [props.store]);
+ useStoreProps(store, props, "value", "setValue");
+ return store;
+}
+function useCheckboxStore(props = {}) {
+ const [store, update] = YV4JVR4I_useStore(createCheckboxStore, props);
+ return useCheckboxStoreProps(store, update, props);
+}
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/menu/menu-item-checkbox.js
+"use client";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// src/menu/menu-item-checkbox.tsx
+
+
+var menu_item_checkbox_TagName = "div";
+function menu_item_checkbox_getPrimitiveValue(value) {
+ if (Array.isArray(value)) {
+ return value.toString();
+ }
+ return value;
+}
+function getValue(storeValue, value, checked) {
+ if (value === void 0) {
+ if (Array.isArray(storeValue)) return storeValue;
+ return !!checked;
+ }
+ const primitiveValue = menu_item_checkbox_getPrimitiveValue(value);
+ if (!Array.isArray(storeValue)) {
+ if (checked) {
+ return primitiveValue;
+ }
+ return storeValue === primitiveValue ? false : storeValue;
+ }
+ if (checked) {
+ if (storeValue.includes(primitiveValue)) {
+ return storeValue;
+ }
+ return [...storeValue, primitiveValue];
+ }
+ return storeValue.filter((v) => v !== primitiveValue);
+}
+var useMenuItemCheckbox = createHook(
+ function useMenuItemCheckbox2(_a) {
+ var _b = _a, {
+ store,
+ name,
+ value,
+ checked,
+ defaultChecked: defaultCheckedProp,
+ hideOnClick = false
+ } = _b, props = __objRest(_b, [
+ "store",
+ "name",
+ "value",
+ "checked",
+ "defaultChecked",
+ "hideOnClick"
+ ]);
+ const context = useMenuScopedContext();
+ store = store || context;
+ invariant(
+ store,
+ false && 0
+ );
+ const defaultChecked = useInitialValue(defaultCheckedProp);
+ (0,external_React_.useEffect)(() => {
+ store == null ? void 0 : store.setValue(name, (prevValue = []) => {
+ if (!defaultChecked) return prevValue;
+ return getValue(prevValue, value, true);
+ });
+ }, [store, name, value, defaultChecked]);
+ (0,external_React_.useEffect)(() => {
+ if (checked === void 0) return;
+ store == null ? void 0 : store.setValue(name, (prevValue) => {
+ return getValue(prevValue, value, checked);
+ });
+ }, [store, name, value, checked]);
+ const checkboxStore = useCheckboxStore({
+ value: store.useState((state) => state.values[name]),
+ setValue(internalValue) {
+ store == null ? void 0 : store.setValue(name, () => {
+ if (checked === void 0) return internalValue;
+ const nextValue = getValue(internalValue, value, checked);
+ if (!Array.isArray(nextValue)) return nextValue;
+ if (!Array.isArray(internalValue)) return nextValue;
+ if (shallowEqual(internalValue, nextValue)) return internalValue;
+ return nextValue;
+ });
+ }
+ });
+ props = _3YLGPPWQ_spreadValues({
+ role: "menuitemcheckbox"
+ }, props);
+ props = useCheckbox(_3YLGPPWQ_spreadValues({
+ store: checkboxStore,
+ name,
+ value,
+ checked
+ }, props));
+ props = useMenuItem(_3YLGPPWQ_spreadValues({ store, hideOnClick }, props));
return props;
}
);
-var PopoverDisclosure = createComponent(
- (props) => {
- const htmlProps = usePopoverDisclosure(props);
- return _3ORBWXWF_createElement("button", htmlProps);
- }
-);
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/346FK57L.js
-"use client";
-
-
-
-
-
-
-// src/composite/composite-typeahead.ts
-
-
-
-
-var chars = "";
-function clearChars() {
- chars = "";
-}
-function isValidTypeaheadEvent(event) {
- const target = event.target;
- if (target && DLOEKDPY_isTextField(target))
- return false;
- if (event.key === " " && chars.length)
- return true;
- return event.key.length === 1 && !event.ctrlKey && !event.altKey && !event.metaKey && /^[\p{Letter}\p{Number}]$/u.test(event.key);
-}
-function isSelfTargetOrItem(event, items) {
- if (isSelfTarget(event))
- return true;
- const target = event.target;
- if (!target)
- return false;
- const isItem = items.some((item) => item.element === target);
- return isItem;
-}
-function _346FK57L_getEnabledItems(items) {
- return items.filter((item) => !item.disabled);
-}
-function itemTextStartsWith(item, text) {
- var _a;
- const itemText = ((_a = item.element) == null ? void 0 : _a.textContent) || item.children;
- if (!itemText)
- return false;
- return normalizeString(itemText).trim().toLowerCase().startsWith(text.toLowerCase());
-}
-function getSameInitialItems(items, char, activeId) {
- if (!activeId)
- return items;
- const activeItem = items.find((item) => item.id === activeId);
- if (!activeItem)
- return items;
- if (!itemTextStartsWith(activeItem, char))
- return items;
- if (chars !== char && itemTextStartsWith(activeItem, chars))
- return items;
- chars = char;
- return flipItems(
- items.filter((item) => itemTextStartsWith(item, chars)),
- activeId
- ).filter((item) => item.id !== activeId);
-}
-var useCompositeTypeahead = createHook(
- (_a) => {
- var _b = _a, { store, typeahead = true } = _b, props = __objRest(_b, ["store", "typeahead"]);
- const context = useCompositeContext();
+var MenuItemCheckbox = memo2(
+ forwardRef2(function MenuItemCheckbox2(props) {
+ const htmlProps = useMenuItemCheckbox(props);
+ return LMDWO4NN_createElement(menu_item_checkbox_TagName, htmlProps);
+ })
+);
+
+
+;// ./node_modules/@ariakit/react-core/esm/menu/menu-item-radio.js
+"use client";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// src/menu/menu-item-radio.tsx
+
+
+
+var menu_item_radio_TagName = "div";
+function menu_item_radio_getValue(prevValue, value, checked) {
+ if (checked === void 0) return prevValue;
+ if (checked) return value;
+ return prevValue;
+}
+var useMenuItemRadio = createHook(
+ function useMenuItemRadio2(_a) {
+ var _b = _a, {
+ store,
+ name,
+ value,
+ checked,
+ onChange: onChangeProp,
+ hideOnClick = false
+ } = _b, props = __objRest(_b, [
+ "store",
+ "name",
+ "value",
+ "checked",
+ "onChange",
+ "hideOnClick"
+ ]);
+ const context = useMenuScopedContext();
store = store || context;
invariant(
store,
false && 0
);
- const onKeyDownCaptureProp = props.onKeyDownCapture;
- const cleanupTimeoutRef = (0,external_React_.useRef)(0);
- const onKeyDownCapture = useEvent(
- (event) => {
- onKeyDownCaptureProp == null ? void 0 : onKeyDownCaptureProp(event);
- if (event.defaultPrevented)
- return;
- if (!typeahead)
- return;
- if (!store)
- return;
- const { items, activeId } = store.getState();
- if (!isValidTypeaheadEvent(event))
- return clearChars();
- let enabledItems = _346FK57L_getEnabledItems(items);
- if (!isSelfTargetOrItem(event, enabledItems))
- return clearChars();
- event.preventDefault();
- window.clearTimeout(cleanupTimeoutRef.current);
- cleanupTimeoutRef.current = window.setTimeout(() => {
- chars = "";
- }, 500);
- const char = event.key.toLowerCase();
- chars += char;
- enabledItems = getSameInitialItems(enabledItems, char, activeId);
- const item = enabledItems.find(
- (item2) => itemTextStartsWith(item2, chars)
- );
- if (item) {
- store.move(item.id);
- } else {
- clearChars();
- }
- }
- );
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
- onKeyDownCapture
- });
+ const defaultChecked = useInitialValue(props.defaultChecked);
+ (0,external_React_.useEffect)(() => {
+ store == null ? void 0 : store.setValue(name, (prevValue = false) => {
+ return menu_item_radio_getValue(prevValue, value, defaultChecked);
+ });
+ }, [store, name, value, defaultChecked]);
+ (0,external_React_.useEffect)(() => {
+ if (checked === void 0) return;
+ store == null ? void 0 : store.setValue(name, (prevValue) => {
+ return menu_item_radio_getValue(prevValue, value, checked);
+ });
+ }, [store, name, value, checked]);
+ const isChecked = store.useState((state) => state.values[name] === value);
+ props = useWrapElement(
+ props,
+ (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(MenuItemCheckedContext.Provider, { value: !!isChecked, children: element }),
+ [isChecked]
+ );
+ props = _3YLGPPWQ_spreadValues({
+ role: "menuitemradio"
+ }, props);
+ props = useRadio(_3YLGPPWQ_spreadValues({
+ name,
+ value,
+ checked: isChecked,
+ onChange(event) {
+ onChangeProp == null ? void 0 : onChangeProp(event);
+ if (event.defaultPrevented) return;
+ const element = event.currentTarget;
+ store == null ? void 0 : store.setValue(name, (prevValue) => {
+ return menu_item_radio_getValue(prevValue, value, checked != null ? checked : element.checked);
+ });
+ }
+ }, props));
+ props = useMenuItem(_3YLGPPWQ_spreadValues({ store, hideOnClick }, props));
+ return props;
+ }
+);
+var MenuItemRadio = memo2(
+ forwardRef2(function MenuItemRadio2(props) {
+ const htmlProps = useMenuItemRadio(props);
+ return LMDWO4NN_createElement(menu_item_radio_TagName, htmlProps);
+ })
+);
+
+
+;// ./node_modules/@ariakit/react-core/esm/menu/menu-group.js
+"use client";
+
+
+
+
+
+
+
+
+// src/menu/menu-group.tsx
+var menu_group_TagName = "div";
+var useMenuGroup = createHook(
+ function useMenuGroup2(props) {
+ props = useCompositeGroup(props);
+ return props;
+ }
+);
+var menu_group_MenuGroup = forwardRef2(function MenuGroup2(props) {
+ const htmlProps = useMenuGroup(props);
+ return LMDWO4NN_createElement(menu_group_TagName, htmlProps);
+});
+
+
+;// ./node_modules/@ariakit/react-core/esm/menu/menu-group-label.js
+"use client";
+
+
+
+
+
+
+
+
+// src/menu/menu-group-label.tsx
+var menu_group_label_TagName = "div";
+var useMenuGroupLabel = createHook(
+ function useMenuGroupLabel2(props) {
+ props = useCompositeGroupLabel(props);
+ return props;
+ }
+);
+var MenuGroupLabel = forwardRef2(function MenuGroupLabel2(props) {
+ const htmlProps = useMenuGroupLabel(props);
+ return LMDWO4NN_createElement(menu_group_label_TagName, htmlProps);
+});
+
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/TP7N7UIH.js
+"use client";
+
+
+
+
+
+// src/composite/composite-separator.tsx
+
+var TP7N7UIH_TagName = "hr";
+var useCompositeSeparator = createHook(function useCompositeSeparator2(_a) {
+ var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
+ const context = useCompositeContext();
+ store = store || context;
+ invariant(
+ store,
+ false && 0
+ );
+ const orientation = store.useState(
+ (state) => state.orientation === "horizontal" ? "vertical" : "horizontal"
+ );
+ props = useSeparator(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { orientation }));
+ return props;
+});
+var CompositeSeparator = forwardRef2(function CompositeSeparator2(props) {
+ const htmlProps = useCompositeSeparator(props);
+ return LMDWO4NN_createElement(TP7N7UIH_TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/menu/menu-separator.js
+"use client";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// src/menu/menu-separator.tsx
+var menu_separator_TagName = "hr";
+var useMenuSeparator = createHook(
+ function useMenuSeparator2(_a) {
+ var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
+ const context = useMenuContext();
+ store = store || context;
+ props = useCompositeSeparator(_3YLGPPWQ_spreadValues({ store }, props));
return props;
}
);
-var CompositeTypeahead = createComponent(
- (props) => {
- const htmlProps = useCompositeTypeahead(props);
- return _3ORBWXWF_createElement("div", htmlProps);
- }
-);
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/menu/menu-button.js
+var MenuSeparator = forwardRef2(function MenuSeparator2(props) {
+ const htmlProps = useMenuSeparator(props);
+ return LMDWO4NN_createElement(menu_separator_TagName, htmlProps);
+});
+
+
+;// ./node_modules/@wordpress/components/build-module/menu/styles.js
+
+function menu_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+/**
+ * External dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+const styles_ANIMATION_PARAMS = {
+ SCALE_AMOUNT_OUTER: 0.82,
+ SCALE_AMOUNT_CONTENT: 0.9,
+ DURATION: {
+ IN: '400ms',
+ OUT: '200ms'
+ },
+ EASING: 'cubic-bezier(0.33, 0, 0, 1)'
+};
+const CONTENT_WRAPPER_PADDING = space(1);
+const ITEM_PADDING_BLOCK = space(2);
+const ITEM_PADDING_INLINE = space(3);
+
+// TODO:
+// - border color and divider color are different from COLORS.theme variables
+// - lighter text color is not defined in COLORS.theme, should it be?
+// - lighter background color is not defined in COLORS.theme, should it be?
+const DEFAULT_BORDER_COLOR = COLORS.theme.gray[300];
+const DIVIDER_COLOR = COLORS.theme.gray[200];
+const LIGHTER_TEXT_COLOR = COLORS.theme.gray[700];
+const LIGHT_BACKGROUND_COLOR = COLORS.theme.gray[100];
+const TOOLBAR_VARIANT_BORDER_COLOR = COLORS.theme.foreground;
+const DEFAULT_BOX_SHADOW = `0 0 0 ${config_values.borderWidth} ${DEFAULT_BORDER_COLOR}, ${config_values.elevationMedium}`;
+const TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${config_values.borderWidth} ${TOOLBAR_VARIANT_BORDER_COLOR}`;
+const GRID_TEMPLATE_COLS = 'minmax( 0, max-content ) 1fr';
+const PopoverOuterWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
+ target: "e1wg7tti14"
+} : 0)("position:relative;background-color:", COLORS.ui.background, ";border-radius:", config_values.radiusMedium, ";", props => /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:", props.variant === 'toolbar' ? TOOLBAR_VARIANT_BOX_SHADOW : DEFAULT_BOX_SHADOW, ";" + ( true ? "" : 0), true ? "" : 0), " overflow:hidden;@media not ( prefers-reduced-motion ){transition-property:transform,opacity;transition-timing-function:", styles_ANIMATION_PARAMS.EASING, ";transition-duration:", styles_ANIMATION_PARAMS.DURATION.IN, ";will-change:transform,opacity;opacity:0;&:has( [data-enter] ){opacity:1;}&:has( [data-leave] ){transition-duration:", styles_ANIMATION_PARAMS.DURATION.OUT, ";}&:has( [data-side='bottom'] ),&:has( [data-side='top'] ){transform:scaleY( ", styles_ANIMATION_PARAMS.SCALE_AMOUNT_OUTER, " );}&:has( [data-side='bottom'] ){transform-origin:top;}&:has( [data-side='top'] ){transform-origin:bottom;}&:has( [data-enter][data-side='bottom'] ),&:has( [data-enter][data-side='top'] ),&:has( [data-leave][data-side='bottom'] ),&:has( [data-leave][data-side='top'] ){transform:scaleY( 1 );}}" + ( true ? "" : 0));
+const PopoverInnerWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
+ target: "e1wg7tti13"
+} : 0)("position:relative;z-index:1000000;display:grid;grid-template-columns:", GRID_TEMPLATE_COLS, ";grid-template-rows:auto;box-sizing:border-box;min-width:160px;max-width:320px;max-height:var( --popover-available-height );padding:", CONTENT_WRAPPER_PADDING, ";overscroll-behavior:contain;overflow:auto;outline:2px solid transparent!important;@media not ( prefers-reduced-motion ){transition:inherit;transform-origin:inherit;&[data-side='bottom'],&[data-side='top']{transform:scaleY(\n\t\t\t\tcalc(\n\t\t\t\t\t1 / ", styles_ANIMATION_PARAMS.SCALE_AMOUNT_OUTER, " *\n\t\t\t\t\t\t", styles_ANIMATION_PARAMS.SCALE_AMOUNT_CONTENT, "\n\t\t\t\t)\n\t\t\t);}&[data-enter][data-side='bottom'],&[data-enter][data-side='top'],&[data-leave][data-side='bottom'],&[data-leave][data-side='top']{transform:scaleY( 1 );}}" + ( true ? "" : 0));
+const baseItem = /*#__PURE__*/emotion_react_browser_esm_css("all:unset;position:relative;min-height:", space(10), ";box-sizing:border-box;grid-column:1/-1;display:grid;grid-template-columns:", GRID_TEMPLATE_COLS, ";align-items:center;@supports ( grid-template-columns: subgrid ){grid-template-columns:subgrid;}font-size:", font('default.fontSize'), ";font-family:inherit;font-weight:normal;line-height:20px;color:", COLORS.theme.foreground, ";border-radius:", config_values.radiusSmall, ";padding-block:", ITEM_PADDING_BLOCK, ";padding-inline:", ITEM_PADDING_INLINE, ";scroll-margin:", CONTENT_WRAPPER_PADDING, ";user-select:none;outline:none;&[aria-disabled='true']{color:", COLORS.ui.textDisabled, ";cursor:not-allowed;}&[data-active-item]:not( [data-focus-visible] ):not(\n\t\t\t[aria-disabled='true']\n\t\t){background-color:", COLORS.theme.accent, ";color:", COLORS.theme.accentInverted, ";}&[data-focus-visible]{box-shadow:0 0 0 1.5px ", COLORS.theme.accent, ";outline:2px solid transparent;}&:active,&[data-active]{}", PopoverInnerWrapper, ":not(:focus) &:not(:focus)[aria-expanded=\"true\"]{background-color:", LIGHT_BACKGROUND_COLOR, ";color:", COLORS.theme.foreground, ";}svg{fill:currentColor;}" + ( true ? "" : 0), true ? "" : 0);
+const styles_Item = /*#__PURE__*/emotion_styled_base_browser_esm(MVIULMNR_MenuItem, true ? {
+ target: "e1wg7tti12"
+} : 0)(baseItem, ";" + ( true ? "" : 0));
+const styles_CheckboxItem = /*#__PURE__*/emotion_styled_base_browser_esm(MenuItemCheckbox, true ? {
+ target: "e1wg7tti11"
+} : 0)(baseItem, ";" + ( true ? "" : 0));
+const styles_RadioItem = /*#__PURE__*/emotion_styled_base_browser_esm(MenuItemRadio, true ? {
+ target: "e1wg7tti10"
+} : 0)(baseItem, ";" + ( true ? "" : 0));
+const ItemPrefixWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
+ target: "e1wg7tti9"
+} : 0)("grid-column:1;", styles_CheckboxItem, ">&,", styles_RadioItem, ">&{min-width:", space(6), ";}", styles_CheckboxItem, ">&,", styles_RadioItem, ">&,&:not( :empty ){margin-inline-end:", space(2), ";}display:flex;align-items:center;justify-content:center;color:", LIGHTER_TEXT_COLOR, ";[data-active-item]:not( [data-focus-visible] )>&,[aria-disabled='true']>&{color:inherit;}" + ( true ? "" : 0));
+const ItemContentWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
+ target: "e1wg7tti8"
+} : 0)("grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:", space(3), ";pointer-events:none;" + ( true ? "" : 0));
+const ItemChildrenWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
+ target: "e1wg7tti7"
+} : 0)("flex:1;display:inline-flex;flex-direction:column;gap:", space(1), ";" + ( true ? "" : 0));
+const ItemSuffixWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
+ target: "e1wg7tti6"
+} : 0)("flex:0 1 fit-content;min-width:0;width:fit-content;display:flex;align-items:center;justify-content:center;gap:", space(3), ";color:", LIGHTER_TEXT_COLOR, ";[data-active-item]:not( [data-focus-visible] ) *:not(", PopoverInnerWrapper, ") &,[aria-disabled='true'] *:not(", PopoverInnerWrapper, ") &{color:inherit;}" + ( true ? "" : 0));
+const styles_Group = /*#__PURE__*/emotion_styled_base_browser_esm(menu_group_MenuGroup, true ? {
+ target: "e1wg7tti5"
+} : 0)( true ? {
+ name: "49aokf",
+ styles: "display:contents"
+} : 0);
+const styles_GroupLabel = /*#__PURE__*/emotion_styled_base_browser_esm(MenuGroupLabel, true ? {
+ target: "e1wg7tti4"
+} : 0)("grid-column:1/-1;padding-block-start:", space(3), ";padding-block-end:", space(2), ";padding-inline:", ITEM_PADDING_INLINE, ";" + ( true ? "" : 0));
+const styles_Separator = /*#__PURE__*/emotion_styled_base_browser_esm(MenuSeparator, true ? {
+ target: "e1wg7tti3"
+} : 0)("grid-column:1/-1;border:none;height:", config_values.borderWidth, ";background-color:", props => props.variant === 'toolbar' ? TOOLBAR_VARIANT_BORDER_COLOR : DIVIDER_COLOR, ";margin-block:", space(2), ";margin-inline:", ITEM_PADDING_INLINE, ";outline:2px solid transparent;" + ( true ? "" : 0));
+const SubmenuChevronIcon = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_icon, true ? {
+ target: "e1wg7tti2"
+} : 0)("width:", space(1.5), ";", rtl({
+ transform: `scaleX(1)`
+}, {
+ transform: `scaleX(-1)`
+}), ";" + ( true ? "" : 0));
+const styles_ItemLabel = /*#__PURE__*/emotion_styled_base_browser_esm(truncate_component, true ? {
+ target: "e1wg7tti1"
+} : 0)("font-size:", font('default.fontSize'), ";line-height:20px;color:inherit;" + ( true ? "" : 0));
+const styles_ItemHelpText = /*#__PURE__*/emotion_styled_base_browser_esm(truncate_component, true ? {
+ target: "e1wg7tti0"
+} : 0)("font-size:", font('helpText.fontSize'), ";line-height:16px;color:", LIGHTER_TEXT_COLOR, ";overflow-wrap:anywhere;[data-active-item]:not( [data-focus-visible] ) *:not( ", PopoverInnerWrapper, " ) &,[aria-disabled='true'] *:not( ", PopoverInnerWrapper, " ) &{color:inherit;}" + ( true ? "" : 0));
+
+;// ./node_modules/@wordpress/components/build-module/menu/item.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+const item_Item = (0,external_wp_element_namespaceObject.forwardRef)(function Item({
+ prefix,
+ suffix,
+ children,
+ disabled = false,
+ hideOnClick = true,
+ store,
+ ...props
+}, ref) {
+ const menuContext = (0,external_wp_element_namespaceObject.useContext)(context_Context);
+ if (!menuContext?.store) {
+ throw new Error('Menu.Item can only be rendered inside a Menu component');
+ }
+
+ // In most cases, the menu store will be retrieved from context (ie. the store
+ // created by the top-level menu component). But in rare cases (ie.
+ // `Menu.SubmenuTriggerItem`), the context store wouldn't be correct. This is
+ // why the component accepts a `store` prop to override the context store.
+ const computedStore = store !== null && store !== void 0 ? store : menuContext.store;
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_Item, {
+ ref: ref,
+ ...props,
+ accessibleWhenDisabled: true,
+ disabled: disabled,
+ hideOnClick: hideOnClick,
+ store: computedStore,
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemPrefixWrapper, {
+ children: prefix
+ }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(ItemContentWrapper, {
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemChildrenWrapper, {
+ children: children
+ }), suffix && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemSuffixWrapper, {
+ children: suffix
+ })]
+ })]
+ });
+});
+
+;// ./node_modules/@ariakit/react-core/esm/menu/menu-item-check.js
+"use client";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// src/menu/menu-item-check.tsx
+
+var menu_item_check_TagName = "span";
+var useMenuItemCheck = createHook(
+ function useMenuItemCheck2(_a) {
+ var _b = _a, { store, checked } = _b, props = __objRest(_b, ["store", "checked"]);
+ const context = (0,external_React_.useContext)(MenuItemCheckedContext);
+ checked = checked != null ? checked : context;
+ props = useCheckboxCheck(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { checked }));
+ return props;
+ }
+);
+var MenuItemCheck = forwardRef2(function MenuItemCheck2(props) {
+ const htmlProps = useMenuItemCheck(props);
+ return LMDWO4NN_createElement(menu_item_check_TagName, htmlProps);
+});
+
+
+;// ./node_modules/@wordpress/components/build-module/menu/checkbox-item.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+const CheckboxItem = (0,external_wp_element_namespaceObject.forwardRef)(function CheckboxItem({
+ suffix,
+ children,
+ disabled = false,
+ hideOnClick = false,
+ ...props
+}, ref) {
+ const menuContext = (0,external_wp_element_namespaceObject.useContext)(context_Context);
+ if (!menuContext?.store) {
+ throw new Error('Menu.CheckboxItem can only be rendered inside a Menu component');
+ }
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_CheckboxItem, {
+ ref: ref,
+ ...props,
+ accessibleWhenDisabled: true,
+ disabled: disabled,
+ hideOnClick: hideOnClick,
+ store: menuContext.store,
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MenuItemCheck, {
+ store: menuContext.store,
+ render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemPrefixWrapper, {})
+ // Override some ariakit inline styles
+ ,
+ style: {
+ width: 'auto',
+ height: 'auto'
+ },
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, {
+ icon: library_check,
+ size: 24
+ })
+ }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(ItemContentWrapper, {
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemChildrenWrapper, {
+ children: children
+ }), suffix && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemSuffixWrapper, {
+ children: suffix
+ })]
+ })]
+ });
+});
+
+;// ./node_modules/@wordpress/components/build-module/menu/radio-item.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+const radioCheck = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
+ xmlns: "http://www.w3.org/2000/svg",
+ viewBox: "0 0 24 24",
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Circle, {
+ cx: 12,
+ cy: 12,
+ r: 3
+ })
+});
+const RadioItem = (0,external_wp_element_namespaceObject.forwardRef)(function RadioItem({
+ suffix,
+ children,
+ disabled = false,
+ hideOnClick = false,
+ ...props
+}, ref) {
+ const menuContext = (0,external_wp_element_namespaceObject.useContext)(context_Context);
+ if (!menuContext?.store) {
+ throw new Error('Menu.RadioItem can only be rendered inside a Menu component');
+ }
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_RadioItem, {
+ ref: ref,
+ ...props,
+ accessibleWhenDisabled: true,
+ disabled: disabled,
+ hideOnClick: hideOnClick,
+ store: menuContext.store,
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MenuItemCheck, {
+ store: menuContext.store,
+ render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemPrefixWrapper, {})
+ // Override some ariakit inline styles
+ ,
+ style: {
+ width: 'auto',
+ height: 'auto'
+ },
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, {
+ icon: radioCheck,
+ size: 24
+ })
+ }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(ItemContentWrapper, {
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemChildrenWrapper, {
+ children: children
+ }), suffix && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemSuffixWrapper, {
+ children: suffix
+ })]
+ })]
+ });
+});
+
+;// ./node_modules/@wordpress/components/build-module/menu/group.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+const group_Group = (0,external_wp_element_namespaceObject.forwardRef)(function Group(props, ref) {
+ const menuContext = (0,external_wp_element_namespaceObject.useContext)(context_Context);
+ if (!menuContext?.store) {
+ throw new Error('Menu.Group can only be rendered inside a Menu component');
+ }
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_Group, {
+ ref: ref,
+ ...props,
+ store: menuContext.store
+ });
+});
+
+;// ./node_modules/@wordpress/components/build-module/menu/group-label.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+const group_label_GroupLabel = (0,external_wp_element_namespaceObject.forwardRef)(function Group(props, ref) {
+ const menuContext = (0,external_wp_element_namespaceObject.useContext)(context_Context);
+ if (!menuContext?.store) {
+ throw new Error('Menu.GroupLabel can only be rendered inside a Menu component');
+ }
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_GroupLabel, {
+ ref: ref,
+ render:
+ /*#__PURE__*/
+ // @ts-expect-error The `children` prop is passed
+ (0,external_ReactJSXRuntime_namespaceObject.jsx)(text_component, {
+ upperCase: true,
+ variant: "muted",
+ size: "11px",
+ weight: 500,
+ lineHeight: "16px"
+ }),
+ ...props,
+ store: menuContext.store
+ });
+});
+
+;// ./node_modules/@wordpress/components/build-module/menu/separator.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+const separator_Separator = (0,external_wp_element_namespaceObject.forwardRef)(function Separator(props, ref) {
+ const menuContext = (0,external_wp_element_namespaceObject.useContext)(context_Context);
+ if (!menuContext?.store) {
+ throw new Error('Menu.Separator can only be rendered inside a Menu component');
+ }
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_Separator, {
+ ref: ref,
+ ...props,
+ store: menuContext.store,
+ variant: menuContext.variant
+ });
+});
+
+;// ./node_modules/@wordpress/components/build-module/menu/item-label.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+const ItemLabel = (0,external_wp_element_namespaceObject.forwardRef)(function ItemLabel(props, ref) {
+ const menuContext = (0,external_wp_element_namespaceObject.useContext)(context_Context);
+ if (!menuContext?.store) {
+ throw new Error('Menu.ItemLabel can only be rendered inside a Menu component');
+ }
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_ItemLabel, {
+ numberOfLines: 1,
+ ref: ref,
+ ...props
+ });
+});
+
+;// ./node_modules/@wordpress/components/build-module/menu/item-help-text.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+const ItemHelpText = (0,external_wp_element_namespaceObject.forwardRef)(function ItemHelpText(props, ref) {
+ const menuContext = (0,external_wp_element_namespaceObject.useContext)(context_Context);
+ if (!menuContext?.store) {
+ throw new Error('Menu.ItemHelpText can only be rendered inside a Menu component');
+ }
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_ItemHelpText, {
+ numberOfLines: 2,
+ ref: ref,
+ ...props
+ });
+});
+
+;// ./node_modules/@ariakit/react-core/esm/menu/menu-button.js
"use client";
@@ -71522,6 +70627,7 @@
+var menu_button_TagName = "button";
function getInitialFocus(event, dir) {
const keyMap = {
ArrowDown: dir === "bottom" || dir === "top" ? "first" : false,
@@ -71533,16 +70639,24 @@
}
function hasActiveItem(items, excludeElement) {
return !!(items == null ? void 0 : items.some((item) => {
- if (!item.element)
- return false;
- if (item.element === excludeElement)
- return false;
+ if (!item.element) return false;
+ if (item.element === excludeElement) return false;
return item.element.getAttribute("aria-expanded") === "true";
}));
}
var useMenuButton = createHook(
- (_a) => {
- var _b = _a, { store, focusable, accessibleWhenDisabled, showOnHover } = _b, props = __objRest(_b, ["store", "focusable", "accessibleWhenDisabled", "showOnHover"]);
+ function useMenuButton2(_a) {
+ var _b = _a, {
+ store,
+ focusable,
+ accessibleWhenDisabled,
+ showOnHover
+ } = _b, props = __objRest(_b, [
+ "store",
+ "focusable",
+ "accessibleWhenDisabled",
+ "showOnHover"
+ ]);
const context = useMenuProviderContext();
store = store || context;
invariant(
@@ -71557,8 +70671,7 @@
const disabled = disabledFromProps(props);
const showMenu = () => {
const trigger = ref.current;
- if (!trigger)
- return;
+ if (!trigger) return;
store == null ? void 0 : store.setDisclosureElement(trigger);
store == null ? void 0 : store.setAnchorElement(trigger);
store == null ? void 0 : store.show();
@@ -71566,31 +70679,26 @@
const onFocusProp = props.onFocus;
const onFocus = useEvent((event) => {
onFocusProp == null ? void 0 : onFocusProp(event);
- if (disabled)
- return;
- if (event.defaultPrevented)
- return;
+ if (disabled) return;
+ if (event.defaultPrevented) return;
store == null ? void 0 : store.setAutoFocusOnShow(false);
store == null ? void 0 : store.setActiveId(null);
- if (!parentMenubar)
- return;
- if (!parentIsMenubar)
- return;
+ if (!parentMenubar) return;
+ if (!parentIsMenubar) return;
const { items } = parentMenubar.getState();
if (hasActiveItem(items, event.currentTarget)) {
showMenu();
}
});
- const dir = store.useState(
+ const dir = useStoreState(
+ store,
(state) => state.placement.split("-")[0]
);
const onKeyDownProp = props.onKeyDown;
const onKeyDown = useEvent((event) => {
onKeyDownProp == null ? void 0 : onKeyDownProp(event);
- if (disabled)
- return;
- if (event.defaultPrevented)
- return;
+ if (disabled) return;
+ if (event.defaultPrevented) return;
const initialFocus = getInitialFocus(event, dir);
if (initialFocus) {
event.preventDefault();
@@ -71602,10 +70710,8 @@
const onClickProp = props.onClick;
const onClick = useEvent((event) => {
onClickProp == null ? void 0 : onClickProp(event);
- if (event.defaultPrevented)
- return;
- if (!store)
- return;
+ if (event.defaultPrevented) return;
+ if (!store) return;
const isKeyboardClick = !event.detail;
const { open } = store.getState();
if (!open || isKeyboardClick) {
@@ -71624,7 +70730,7 @@
[store]
);
if (hasParentMenu) {
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), {
render: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Role.div, { render: props.render })
});
}
@@ -71635,7 +70741,7 @@
);
const role = hasParentMenu || parentIsMenubar ? getPopupItemRole(parentContentElement, "menuitem") : void 0;
const contentElement = store.useState("contentElement");
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
id,
role,
"aria-haspopup": getPopupRole(contentElement, "menu")
@@ -71645,55 +70751,86 @@
onKeyDown,
onClick
});
- props = useHovercardAnchor(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
+ props = useHovercardAnchor(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
store,
focusable,
accessibleWhenDisabled
}, props), {
showOnHover: (event) => {
const getShowOnHover = () => {
- if (typeof showOnHover === "function")
- return showOnHover(event);
- if (showOnHover != null)
- return showOnHover;
- if (hasParentMenu)
- return true;
- if (!parentMenubar)
- return false;
+ if (typeof showOnHover === "function") return showOnHover(event);
+ if (showOnHover != null) return showOnHover;
+ if (hasParentMenu) return true;
+ if (!parentMenubar) return false;
const { items } = parentMenubar.getState();
return parentIsMenubar && hasActiveItem(items);
};
const canShowOnHover = getShowOnHover();
- if (!canShowOnHover)
- return false;
+ if (!canShowOnHover) return false;
const parent = parentIsMenubar ? parentMenubar : parentMenu;
- if (!parent)
- return true;
+ if (!parent) return true;
parent.setActiveId(event.currentTarget.id);
return true;
}
}));
- props = usePopoverDisclosure(_4R3V3JGP_spreadValues({
+ props = usePopoverDisclosure(_3YLGPPWQ_spreadValues({
store,
toggleOnClick: !hasParentMenu,
focusable,
accessibleWhenDisabled
}, props));
- props = useCompositeTypeahead(_4R3V3JGP_spreadValues({
+ props = useCompositeTypeahead(_3YLGPPWQ_spreadValues({
store,
typeahead: parentIsMenubar
}, props));
return props;
}
);
-var MenuButton = createComponent((props) => {
+var MenuButton = forwardRef2(function MenuButton2(props) {
const htmlProps = useMenuButton(props);
- return _3ORBWXWF_createElement("button", htmlProps);
-});
-if (false) {}
-
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-right-small.js
+ return LMDWO4NN_createElement(menu_button_TagName, htmlProps);
+});
+
+
+;// ./node_modules/@wordpress/components/build-module/menu/trigger-button.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+const TriggerButton = (0,external_wp_element_namespaceObject.forwardRef)(function TriggerButton({
+ children,
+ disabled = false,
+ ...props
+}, ref) {
+ const menuContext = (0,external_wp_element_namespaceObject.useContext)(context_Context);
+ if (!menuContext?.store) {
+ throw new Error('Menu.TriggerButton can only be rendered inside a Menu component');
+ }
+ if (menuContext.store.parent) {
+ throw new Error('Menu.TriggerButton should not be rendered inside a nested Menu component. Use Menu.SubmenuTriggerItem instead.');
+ }
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MenuButton, {
+ ref: ref,
+ ...props,
+ disabled: disabled,
+ store: menuContext.store,
+ children: children
+ });
+});
+
+;// ./node_modules/@wordpress/icons/build-module/library/chevron-right-small.js
/**
* WordPress dependencies
*/
@@ -71708,7 +70845,58 @@
});
/* harmony default export */ const chevron_right_small = (chevronRightSmall);
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/HHNFDKU2.js
+;// ./node_modules/@wordpress/components/build-module/menu/submenu-trigger-item.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+const SubmenuTriggerItem = (0,external_wp_element_namespaceObject.forwardRef)(function SubmenuTriggerItem({
+ suffix,
+ ...otherProps
+}, ref) {
+ const menuContext = (0,external_wp_element_namespaceObject.useContext)(context_Context);
+ if (!menuContext?.store.parent) {
+ throw new Error('Menu.SubmenuTriggerItem can only be rendered inside a nested Menu component');
+ }
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MenuButton, {
+ ref: ref,
+ accessibleWhenDisabled: true,
+ store: menuContext.store,
+ render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(item_Item, {
+ ...otherProps,
+ // The menu item needs to register and be part of the parent menu.
+ // Without specifying the store explicitly, the `Item` component
+ // would otherwise read the store via context and pick up the one from
+ // the sub-menu `Menu` component.
+ store: menuContext.store.parent,
+ suffix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
+ children: [suffix, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SubmenuChevronIcon, {
+ "aria-hidden": "true",
+ icon: chevron_right_small,
+ size: 24,
+ preserveAspectRatio: "xMidYMid slice"
+ })]
+ })
+ })
+ });
+});
+
+;// ./node_modules/@ariakit/react-core/esm/__chunks/ASGALOAX.js
"use client";
@@ -71723,6 +70911,7 @@
+var ASGALOAX_TagName = "div";
function useAriaLabelledBy(_a) {
var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
const [id, setId] = (0,external_React_.useState)(void 0);
@@ -71731,11 +70920,9 @@
const contentElement = useStoreState(store, "contentElement");
(0,external_React_.useEffect)(() => {
const disclosure = disclosureElement;
- if (!disclosure)
- return;
+ if (!disclosure) return;
const menu = contentElement;
- if (!menu)
- return;
+ if (!menu) return;
const menuLabel = label || menu.hasAttribute("aria-label");
if (menuLabel) {
setId(void 0);
@@ -71746,7 +70933,7 @@
return id;
}
var useMenuList = createHook(
- (_a) => {
+ function useMenuList2(_a) {
var _b = _a, { store, alwaysVisible, composite } = _b, props = __objRest(_b, ["store", "alwaysVisible", "composite"]);
const context = useMenuProviderContext();
store = store || context;
@@ -71772,8 +70959,7 @@
);
const onKeyDown = useEvent((event) => {
onKeyDownProp == null ? void 0 : onKeyDownProp(event);
- if (event.defaultPrevented)
- return;
+ if (event.defaultPrevented) return;
if (hasParentMenu || parentMenubar && !isHorizontal) {
const hideMap = {
ArrowRight: () => dir === "left" && !isHorizontal,
@@ -71791,23 +70977,19 @@
if (parentMenubar) {
const keyMap = {
ArrowRight: () => {
- if (!isMenubarHorizontal)
- return;
+ if (!isMenubarHorizontal) return;
return parentMenubar.next();
},
ArrowLeft: () => {
- if (!isMenubarHorizontal)
- return;
+ if (!isMenubarHorizontal) return;
return parentMenubar.previous();
},
ArrowDown: () => {
- if (isMenubarHorizontal)
- return;
+ if (isMenubarHorizontal) return;
return parentMenubar.next();
},
ArrowUp: () => {
- if (isMenubarHorizontal)
- return;
+ if (isMenubarHorizontal) return;
return parentMenubar.previous();
}
};
@@ -71825,11 +71007,11 @@
(element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(MenuScopedContextProvider, { value: store, children: element }),
[store]
);
- const ariaLabelledBy = useAriaLabelledBy(_4R3V3JGP_spreadValues({ store }, props));
+ const ariaLabelledBy = useAriaLabelledBy(_3YLGPPWQ_spreadValues({ store }, props));
const mounted = store.useState("mounted");
const hidden = isHidden(mounted, props.hidden, alwaysVisible);
- const style = hidden ? _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props.style), { display: "none" }) : props.style;
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
+ const style = hidden ? _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props.style), { display: "none" }) : props.style;
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
id,
"aria-labelledby": ariaLabelledBy,
hidden
@@ -71841,26 +71023,26 @@
const hasCombobox = !!store.combobox;
composite = composite != null ? composite : !hasCombobox;
if (composite) {
- props = _4R3V3JGP_spreadValues({
+ props = _3YLGPPWQ_spreadValues({
role: "menu",
"aria-orientation": orientation
}, props);
}
- props = useComposite(_4R3V3JGP_spreadValues({ store, composite }, props));
- props = useCompositeTypeahead(_4R3V3JGP_spreadValues({ store, typeahead: !hasCombobox }, props));
+ props = useComposite(_3YLGPPWQ_spreadValues({ store, composite }, props));
+ props = useCompositeTypeahead(_3YLGPPWQ_spreadValues({ store, typeahead: !hasCombobox }, props));
return props;
}
);
-var MenuList = createComponent((props) => {
+var MenuList = forwardRef2(function MenuList2(props) {
const htmlProps = useMenuList(props);
- return _3ORBWXWF_createElement("div", htmlProps);
-});
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/menu/menu.js
-"use client";
+ return LMDWO4NN_createElement(ASGALOAX_TagName, htmlProps);
+});
+
+
+
+;// ./node_modules/@ariakit/react-core/esm/menu/menu.js
+"use client";
+
@@ -71915,1277 +71097,289 @@
-var useMenu = createHook(
- (_a) => {
- var _b = _a, {
- store,
- modal: modalProp = false,
- portal = !!modalProp,
- hideOnEscape = true,
- autoFocusOnShow = true,
- hideOnHoverOutside,
- alwaysVisible
- } = _b, props = __objRest(_b, [
- "store",
- "modal",
- "portal",
- "hideOnEscape",
- "autoFocusOnShow",
- "hideOnHoverOutside",
- "alwaysVisible"
- ]);
- const context = useMenuProviderContext();
- store = store || context;
- invariant(
- store,
- false && 0
- );
- const ref = (0,external_React_.useRef)(null);
- const parentMenu = store.parent;
- const parentMenubar = store.menubar;
- const hasParentMenu = !!parentMenu;
- const parentIsMenubar = !!parentMenubar && !hasParentMenu;
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
- ref: useMergeRefs(ref, props.ref)
- });
- const _a2 = useMenuList(
- _4R3V3JGP_spreadValues({ store, alwaysVisible }, props)
- ), { "aria-labelledby": ariaLabelledBy } = _a2, menuListProps = __objRest(_a2, ["aria-labelledby"]);
- props = menuListProps;
- const [initialFocusRef, setInitialFocusRef] = (0,external_React_.useState)();
- const autoFocusOnShowState = store.useState("autoFocusOnShow");
- const initialFocus = store.useState("initialFocus");
- const baseElement = store.useState("baseElement");
- const items = store.useState("renderedItems");
- (0,external_React_.useEffect)(() => {
- let cleaning = false;
- setInitialFocusRef((prevInitialFocusRef) => {
- var _a3, _b2, _c;
- if (cleaning)
- return;
- if (!autoFocusOnShowState)
- return;
- if ((_a3 = prevInitialFocusRef == null ? void 0 : prevInitialFocusRef.current) == null ? void 0 : _a3.isConnected)
- return prevInitialFocusRef;
- const ref2 = (0,external_React_.createRef)();
- switch (initialFocus) {
- case "first":
- ref2.current = ((_b2 = items.find((item) => !item.disabled && item.element)) == null ? void 0 : _b2.element) || null;
- break;
- case "last":
- ref2.current = ((_c = [...items].reverse().find((item) => !item.disabled && item.element)) == null ? void 0 : _c.element) || null;
- break;
- default:
- ref2.current = baseElement;
- }
- return ref2;
- });
- return () => {
- cleaning = true;
+var menu_TagName = "div";
+var useMenu = createHook(function useMenu2(_a) {
+ var _b = _a, {
+ store,
+ modal: modalProp = false,
+ portal = !!modalProp,
+ hideOnEscape = true,
+ autoFocusOnShow = true,
+ hideOnHoverOutside,
+ alwaysVisible
+ } = _b, props = __objRest(_b, [
+ "store",
+ "modal",
+ "portal",
+ "hideOnEscape",
+ "autoFocusOnShow",
+ "hideOnHoverOutside",
+ "alwaysVisible"
+ ]);
+ const context = useMenuProviderContext();
+ store = store || context;
+ invariant(
+ store,
+ false && 0
+ );
+ const ref = (0,external_React_.useRef)(null);
+ const parentMenu = store.parent;
+ const parentMenubar = store.menubar;
+ const hasParentMenu = !!parentMenu;
+ const parentIsMenubar = !!parentMenubar && !hasParentMenu;
+ props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), {
+ ref: useMergeRefs(ref, props.ref)
+ });
+ const _a2 = useMenuList(_3YLGPPWQ_spreadValues({
+ store,
+ alwaysVisible
+ }, props)), { "aria-labelledby": ariaLabelledBy } = _a2, menuListProps = __objRest(_a2, ["aria-labelledby"]);
+ props = menuListProps;
+ const [initialFocusRef, setInitialFocusRef] = (0,external_React_.useState)();
+ const autoFocusOnShowState = store.useState("autoFocusOnShow");
+ const initialFocus = store.useState("initialFocus");
+ const baseElement = store.useState("baseElement");
+ const items = store.useState("renderedItems");
+ (0,external_React_.useEffect)(() => {
+ let cleaning = false;
+ setInitialFocusRef((prevInitialFocusRef) => {
+ var _a3, _b2, _c;
+ if (cleaning) return;
+ if (!autoFocusOnShowState) return;
+ if ((_a3 = prevInitialFocusRef == null ? void 0 : prevInitialFocusRef.current) == null ? void 0 : _a3.isConnected) return prevInitialFocusRef;
+ const ref2 = (0,external_React_.createRef)();
+ switch (initialFocus) {
+ case "first":
+ ref2.current = ((_b2 = items.find((item) => !item.disabled && item.element)) == null ? void 0 : _b2.element) || null;
+ break;
+ case "last":
+ ref2.current = ((_c = [...items].reverse().find((item) => !item.disabled && item.element)) == null ? void 0 : _c.element) || null;
+ break;
+ default:
+ ref2.current = baseElement;
+ }
+ return ref2;
+ });
+ return () => {
+ cleaning = true;
+ };
+ }, [store, autoFocusOnShowState, initialFocus, items, baseElement]);
+ const modal = hasParentMenu ? false : modalProp;
+ const mayAutoFocusOnShow = !!autoFocusOnShow;
+ const canAutoFocusOnShow = !!initialFocusRef || !!props.initialFocus || !!modal;
+ const contentElement = useStoreState(
+ store.combobox || store,
+ "contentElement"
+ );
+ const parentContentElement = useStoreState(
+ (parentMenu == null ? void 0 : parentMenu.combobox) || parentMenu,
+ "contentElement"
+ );
+ const preserveTabOrderAnchor = (0,external_React_.useMemo)(() => {
+ if (!parentContentElement) return;
+ if (!contentElement) return;
+ const role = contentElement.getAttribute("role");
+ const parentRole = parentContentElement.getAttribute("role");
+ const parentIsMenuOrMenubar = parentRole === "menu" || parentRole === "menubar";
+ if (parentIsMenuOrMenubar && role === "menu") return;
+ return parentContentElement;
+ }, [contentElement, parentContentElement]);
+ if (preserveTabOrderAnchor !== void 0) {
+ props = _3YLGPPWQ_spreadValues({
+ preserveTabOrderAnchor
+ }, props);
+ }
+ props = useHovercard(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({
+ store,
+ alwaysVisible,
+ initialFocus: initialFocusRef,
+ autoFocusOnShow: mayAutoFocusOnShow ? canAutoFocusOnShow && autoFocusOnShow : autoFocusOnShowState || !!modal
+ }, props), {
+ hideOnEscape(event) {
+ if (isFalsyBooleanCallback(hideOnEscape, event)) return false;
+ store == null ? void 0 : store.hideAll();
+ return true;
+ },
+ hideOnHoverOutside(event) {
+ const disclosureElement = store == null ? void 0 : store.getState().disclosureElement;
+ const getHideOnHoverOutside = () => {
+ if (typeof hideOnHoverOutside === "function") {
+ return hideOnHoverOutside(event);
+ }
+ if (hideOnHoverOutside != null) return hideOnHoverOutside;
+ if (hasParentMenu) return true;
+ if (!parentIsMenubar) return false;
+ if (!disclosureElement) return true;
+ if (hasFocusWithin(disclosureElement)) return false;
+ return true;
};
- }, [store, autoFocusOnShowState, initialFocus, items, baseElement]);
- const modal = hasParentMenu ? false : modalProp;
- const mayAutoFocusOnShow = !!autoFocusOnShow;
- const canAutoFocusOnShow = !!initialFocusRef || !!props.initialFocus || !!modal;
- const contentElement = useStoreState(
- store.combobox || store,
- "contentElement"
- );
- const parentContentElement = useStoreState(
- (parentMenu == null ? void 0 : parentMenu.combobox) || parentMenu,
- "contentElement"
- );
- const preserveTabOrderAnchor = (0,external_React_.useMemo)(() => {
- if (!parentContentElement)
- return;
- if (!contentElement)
- return;
- const role = contentElement.getAttribute("role");
- const parentRole = parentContentElement.getAttribute("role");
- const parentIsMenuOrMenubar = parentRole === "menu" || parentRole === "menubar";
- if (parentIsMenuOrMenubar && role === "menu")
- return;
- return parentContentElement;
- }, [contentElement, parentContentElement]);
- if (preserveTabOrderAnchor !== void 0) {
- props = _4R3V3JGP_spreadValues({
- preserveTabOrderAnchor
- }, props);
- }
- props = useHovercard(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
- store,
- alwaysVisible,
- initialFocus: initialFocusRef,
- autoFocusOnShow: mayAutoFocusOnShow ? canAutoFocusOnShow && autoFocusOnShow : autoFocusOnShowState || !!modal
- }, props), {
- hideOnEscape: (event) => {
- if (isFalsyBooleanCallback(hideOnEscape, event))
- return false;
- store == null ? void 0 : store.hideAll();
- return true;
- },
- hideOnHoverOutside: (event) => {
- const disclosureElement = store == null ? void 0 : store.getState().disclosureElement;
- const getHideOnHoverOutside = () => {
- if (typeof hideOnHoverOutside === "function") {
- return hideOnHoverOutside(event);
- }
- if (hideOnHoverOutside != null)
- return hideOnHoverOutside;
- if (hasParentMenu)
- return true;
- if (!parentIsMenubar)
- return false;
- if (!disclosureElement)
- return true;
- if (hasFocusWithin(disclosureElement))
- return false;
- return true;
- };
- if (!getHideOnHoverOutside())
- return false;
- if (event.defaultPrevented)
- return true;
- if (!hasParentMenu)
- return true;
- if (!disclosureElement)
- return true;
- fireEvent(disclosureElement, "mouseout", event);
- if (!hasFocusWithin(disclosureElement))
- return true;
- requestAnimationFrame(() => {
- if (hasFocusWithin(disclosureElement))
- return;
- store == null ? void 0 : store.hide();
- });
- return false;
- },
- modal,
- portal,
- backdrop: hasParentMenu ? false : props.backdrop
- }));
- props = _4R3V3JGP_spreadValues({
- "aria-labelledby": ariaLabelledBy
- }, props);
- return props;
- }
-);
+ if (!getHideOnHoverOutside()) return false;
+ if (event.defaultPrevented) return true;
+ if (!hasParentMenu) return true;
+ if (!disclosureElement) return true;
+ fireEvent(disclosureElement, "mouseout", event);
+ if (!hasFocusWithin(disclosureElement)) return true;
+ requestAnimationFrame(() => {
+ if (hasFocusWithin(disclosureElement)) return;
+ store == null ? void 0 : store.hide();
+ });
+ return false;
+ },
+ modal,
+ portal,
+ backdrop: hasParentMenu ? false : props.backdrop
+ }));
+ props = _3YLGPPWQ_spreadValues({
+ "aria-labelledby": ariaLabelledBy
+ }, props);
+ return props;
+});
var Menu = createDialogComponent(
- createComponent((props) => {
+ forwardRef2(function Menu2(props) {
const htmlProps = useMenu(props);
- return _3ORBWXWF_createElement("div", htmlProps);
+ return LMDWO4NN_createElement(menu_TagName, htmlProps);
}),
useMenuProviderContext
);
-if (false) {}
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/G6ONQ5EH.js
-"use client";
-
-
-
-
-
-// src/composite/composite-hover.ts
-
-
-
-
-function getMouseDestination(event) {
- const relatedTarget = event.relatedTarget;
- if ((relatedTarget == null ? void 0 : relatedTarget.nodeType) === Node.ELEMENT_NODE) {
- return relatedTarget;
- }
- return null;
-}
-function hoveringInside(event) {
- const nextElement = getMouseDestination(event);
- if (!nextElement)
- return false;
- return contains(event.currentTarget, nextElement);
-}
-var G6ONQ5EH_symbol = Symbol("composite-hover");
-function movingToAnotherItem(event) {
- let dest = getMouseDestination(event);
- if (!dest)
- return false;
- do {
- if (Y3OOHFCN_hasOwnProperty(dest, G6ONQ5EH_symbol) && dest[G6ONQ5EH_symbol])
- return true;
- dest = dest.parentElement;
- } while (dest);
- return false;
-}
-var useCompositeHover = createHook(
- (_a) => {
- var _b = _a, {
- store,
- focusOnHover = true,
- blurOnHoverEnd = !!focusOnHover
- } = _b, props = __objRest(_b, [
- "store",
- "focusOnHover",
- "blurOnHoverEnd"
- ]);
- const context = useCompositeContext();
- store = store || context;
- invariant(
- store,
- false && 0
- );
- const isMouseMoving = useIsMouseMoving();
- const onMouseMoveProp = props.onMouseMove;
- const focusOnHoverProp = useBooleanEvent(focusOnHover);
- const onMouseMove = useEvent((event) => {
- onMouseMoveProp == null ? void 0 : onMouseMoveProp(event);
- if (event.defaultPrevented)
- return;
- if (!isMouseMoving())
- return;
- if (!focusOnHoverProp(event))
- return;
- if (!hasFocusWithin(event.currentTarget)) {
- const baseElement = store == null ? void 0 : store.getState().baseElement;
- if (baseElement && !hasFocus(baseElement)) {
- baseElement.focus();
- }
- }
- store == null ? void 0 : store.setActiveId(event.currentTarget.id);
- });
- const onMouseLeaveProp = props.onMouseLeave;
- const blurOnHoverEndProp = useBooleanEvent(blurOnHoverEnd);
- const onMouseLeave = useEvent((event) => {
- var _a2;
- onMouseLeaveProp == null ? void 0 : onMouseLeaveProp(event);
- if (event.defaultPrevented)
- return;
- if (!isMouseMoving())
- return;
- if (hoveringInside(event))
- return;
- if (movingToAnotherItem(event))
- return;
- if (!focusOnHoverProp(event))
- return;
- if (!blurOnHoverEndProp(event))
- return;
- store == null ? void 0 : store.setActiveId(null);
- (_a2 = store == null ? void 0 : store.getState().baseElement) == null ? void 0 : _a2.focus();
- });
- const ref = (0,external_React_.useCallback)((element) => {
- if (!element)
- return;
- element[G6ONQ5EH_symbol] = true;
- }, []);
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
- ref: useMergeRefs(ref, props.ref),
- onMouseMove,
- onMouseLeave
- });
- return props;
- }
-);
-var CompositeHover = createMemoComponent(
- (props) => {
- const htmlProps = useCompositeHover(props);
- return _3ORBWXWF_createElement("div", htmlProps);
- }
-);
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/Y6467XPW.js
-"use client";
-
-
-
-
-
-
-
-
-
-// src/menu/menu-item.ts
-
-
-
-
-function menuHasFocus(baseElement, items, currentTarget) {
- var _a;
- if (!baseElement)
- return false;
- if (hasFocusWithin(baseElement))
- return true;
- const expandedItem = items == null ? void 0 : items.find((item) => {
- var _a2;
- if (item.element === currentTarget)
- return false;
- return ((_a2 = item.element) == null ? void 0 : _a2.getAttribute("aria-expanded")) === "true";
- });
- const expandedMenuId = (_a = expandedItem == null ? void 0 : expandedItem.element) == null ? void 0 : _a.getAttribute("aria-controls");
- if (!expandedMenuId)
- return false;
- const doc = DLOEKDPY_getDocument(baseElement);
- const expandedMenu = doc.getElementById(expandedMenuId);
- if (!expandedMenu)
- return false;
- if (hasFocusWithin(expandedMenu))
+
+
+;// ./node_modules/@wordpress/components/build-module/menu/popover.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+const menu_popover_Popover = (0,external_wp_element_namespaceObject.forwardRef)(function Popover({
+ gutter,
+ children,
+ shift,
+ modal = true,
+ ...otherProps
+}, ref) {
+ const menuContext = (0,external_wp_element_namespaceObject.useContext)(context_Context);
+
+ // Extract the side from the applied placement — useful for animations.
+ // Using `currentPlacement` instead of `placement` to make sure that we
+ // use the final computed placement (including "flips" etc).
+ const appliedPlacementSide = useStoreState(menuContext?.store, 'currentPlacement')?.split('-')[0];
+ const hideOnEscape = (0,external_wp_element_namespaceObject.useCallback)(event => {
+ // Pressing Escape can cause unexpected consequences (ie. exiting
+ // full screen mode on MacOs, close parent modals...).
+ event.preventDefault();
+ // Returning `true` causes the menu to hide.
return true;
- return !!expandedMenu.querySelector("[role=menuitem][aria-expanded=true]");
-}
-var useMenuItem = createHook(
- (_a) => {
- var _b = _a, {
- store,
- hideOnClick = true,
- preventScrollOnKeyDown = true,
- focusOnHover,
- blurOnHoverEnd
- } = _b, props = __objRest(_b, [
- "store",
- "hideOnClick",
- "preventScrollOnKeyDown",
- "focusOnHover",
- "blurOnHoverEnd"
- ]);
- const menuContext = useMenuScopedContext(true);
- const menubarContext = KA4GX64Z_useMenubarScopedContext();
- store = store || menuContext || menubarContext;
- invariant(
- store,
- false && 0
- );
- const onClickProp = props.onClick;
- const hideOnClickProp = useBooleanEvent(hideOnClick);
- const hideMenu = "hideAll" in store ? store.hideAll : void 0;
- const isWithinMenu = !!hideMenu;
- const onClick = useEvent((event) => {
- onClickProp == null ? void 0 : onClickProp(event);
- if (event.defaultPrevented)
- return;
- if (isDownloading(event))
- return;
- if (isOpeningInNewTab(event))
- return;
- if (!hideMenu)
- return;
- const popupType = event.currentTarget.getAttribute("aria-haspopup");
- if (popupType === "menu")
- return;
- if (!hideOnClickProp(event))
- return;
- hideMenu();
- });
- const contentElement = useStoreState(
- store,
- (state) => "contentElement" in state ? state.contentElement : null
- );
- const role = getPopupItemRole(contentElement, "menuitem");
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
- role
- }, props), {
- onClick
- });
- props = useCompositeItem(_4R3V3JGP_spreadValues({ store, preventScrollOnKeyDown }, props));
- props = useCompositeHover(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
- store
- }, props), {
- focusOnHover(event) {
- const getFocusOnHover = () => {
- if (typeof focusOnHover === "function")
- return focusOnHover(event);
- if (focusOnHover != null)
- return focusOnHover;
- return true;
- };
- if (!store)
- return false;
- if (!getFocusOnHover())
- return false;
- const { baseElement, items } = store.getState();
- if (isWithinMenu) {
- if (event.currentTarget.hasAttribute("aria-expanded")) {
- event.currentTarget.focus();
- }
- return true;
- }
- if (menuHasFocus(baseElement, items, event.currentTarget)) {
- event.currentTarget.focus();
- return true;
- }
- return false;
- },
- blurOnHoverEnd(event) {
- if (typeof blurOnHoverEnd === "function")
- return blurOnHoverEnd(event);
- if (blurOnHoverEnd != null)
- return blurOnHoverEnd;
- return isWithinMenu;
- }
- }));
- return props;
- }
-);
-var Y6467XPW_MenuItem = createMemoComponent((props) => {
- const htmlProps = useMenuItem(props);
- return _3ORBWXWF_createElement("div", htmlProps);
-});
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/checkbox/checkbox-store.js
-"use client";
-
-
-
-
-// src/checkbox/checkbox-store.ts
-function createCheckboxStore(props = {}) {
- var _a;
- throwOnConflictingProps(props, props.store);
- const syncState = (_a = props.store) == null ? void 0 : _a.getState();
- const initialState = {
- value: defaultValue(
- props.value,
- syncState == null ? void 0 : syncState.value,
- props.defaultValue,
- false
- )
- };
- const checkbox = createStore(initialState, props.store);
- return _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, checkbox), {
- setValue: (value) => checkbox.setState("value", value)
- });
-}
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/JIZ5C2JK.js
-"use client";
-
-
-
-// src/checkbox/checkbox-store.ts
-
-function useCheckboxStoreProps(store, update, props) {
- useUpdateEffect(update, [props.store]);
- useStoreProps(store, props, "value", "setValue");
- return store;
-}
-function useCheckboxStore(props = {}) {
- const [store, update] = EKQEJRUF_useStore(createCheckboxStore, props);
- return useCheckboxStoreProps(store, update, props);
-}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/VPR2WHQV.js
-"use client";
-
-
-// src/checkbox/checkbox-context.tsx
-var VPR2WHQV_ctx = createStoreContext();
-var useCheckboxContext = VPR2WHQV_ctx.useContext;
-var useCheckboxScopedContext = VPR2WHQV_ctx.useScopedContext;
-var useCheckboxProviderContext = VPR2WHQV_ctx.useProviderContext;
-var CheckboxContextProvider = VPR2WHQV_ctx.ContextProvider;
-var CheckboxScopedContextProvider = VPR2WHQV_ctx.ScopedContextProvider;
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/3AHQ6JCP.js
-"use client";
-
-
-
-
-
-
-
-
-// src/checkbox/checkbox.tsx
-
-
-
-function setMixed(element, mixed) {
- if (mixed) {
- element.indeterminate = true;
- } else if (element.indeterminate) {
- element.indeterminate = false;
- }
-}
-function isNativeCheckbox(tagName, type) {
- return tagName === "input" && (!type || type === "checkbox");
-}
-function getPrimitiveValue(value) {
- if (Array.isArray(value)) {
- return value.toString();
- }
- return value;
-}
-var useCheckbox = createHook(
- (_a) => {
- var _b = _a, {
- store,
- name,
- value: valueProp,
- checked: checkedProp,
- defaultChecked
- } = _b, props = __objRest(_b, [
- "store",
- "name",
- "value",
- "checked",
- "defaultChecked"
- ]);
- const context = useCheckboxContext();
- store = store || context;
- const [_checked, setChecked] = (0,external_React_.useState)(defaultChecked != null ? defaultChecked : false);
- const checked = useStoreState(store, (state) => {
- if (checkedProp !== void 0)
- return checkedProp;
- if ((state == null ? void 0 : state.value) === void 0)
- return _checked;
- if (valueProp != null) {
- if (Array.isArray(state.value)) {
- const primitiveValue = getPrimitiveValue(valueProp);
- return state.value.includes(primitiveValue);
- }
- return state.value === valueProp;
- }
- if (Array.isArray(state.value))
- return false;
- if (typeof state.value === "boolean")
- return state.value;
- return false;
- });
- const ref = (0,external_React_.useRef)(null);
- const tagName = useTagName(ref, props.as || "input");
- const nativeCheckbox = isNativeCheckbox(tagName, props.type);
- const mixed = checked ? checked === "mixed" : void 0;
- const isChecked = checked === "mixed" ? false : checked;
- const disabled = disabledFromProps(props);
- const [propertyUpdated, schedulePropertyUpdate] = useForceUpdate();
- (0,external_React_.useEffect)(() => {
- const element = ref.current;
- if (!element)
- return;
- setMixed(element, mixed);
- if (nativeCheckbox)
- return;
- element.checked = isChecked;
- if (name !== void 0) {
- element.name = name;
- }
- if (valueProp !== void 0) {
- element.value = `${valueProp}`;
- }
- }, [propertyUpdated, mixed, nativeCheckbox, isChecked, name, valueProp]);
- const onChangeProp = props.onChange;
- const onChange = useEvent((event) => {
- if (disabled) {
- event.stopPropagation();
- event.preventDefault();
- return;
- }
- setMixed(event.currentTarget, mixed);
- if (!nativeCheckbox) {
- event.currentTarget.checked = !event.currentTarget.checked;
- schedulePropertyUpdate();
- }
- onChangeProp == null ? void 0 : onChangeProp(event);
- if (event.defaultPrevented)
- return;
- const elementChecked = event.currentTarget.checked;
- setChecked(elementChecked);
- store == null ? void 0 : store.setValue((prevValue) => {
- if (valueProp == null)
- return elementChecked;
- const primitiveValue = getPrimitiveValue(valueProp);
- if (!Array.isArray(prevValue)) {
- return prevValue === primitiveValue ? false : primitiveValue;
- }
- if (elementChecked) {
- if (prevValue.includes(primitiveValue)) {
- return prevValue;
- }
- return [...prevValue, primitiveValue];
- }
- return prevValue.filter((v) => v !== primitiveValue);
- });
- });
- const onClickProp = props.onClick;
- const onClick = useEvent((event) => {
- onClickProp == null ? void 0 : onClickProp(event);
- if (event.defaultPrevented)
- return;
- if (nativeCheckbox)
- return;
- onChange(event);
- });
- props = useWrapElement(
- props,
- (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(CheckboxCheckedContext.Provider, { value: isChecked, children: element }),
- [isChecked]
- );
- props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
- role: !nativeCheckbox ? "checkbox" : void 0,
- type: nativeCheckbox ? "checkbox" : void 0,
- "aria-checked": checked
- }, props), {
- ref: useMergeRefs(ref, props.ref),
- onChange,
- onClick
- });
- props = useCommand(_4R3V3JGP_spreadValues({ clickOnEnter: !nativeCheckbox }, props));
- return _4R3V3JGP_spreadValues({
- name: nativeCheckbox ? name : void 0,
- value: nativeCheckbox ? valueProp : void 0,
- checked: isChecked
- }, props);
- }
-);
-var Checkbox = createComponent((props) => {
- const htmlProps = useCheckbox(props);
- return _3ORBWXWF_createElement("input", htmlProps);
-});
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/menu/menu-item-checkbox.js
-"use client";
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-// src/menu/menu-item-checkbox.ts
-
-
-function menu_item_checkbox_getPrimitiveValue(value) {
- if (Array.isArray(value)) {
- return value.toString();
- }
- return value;
-}
-function getValue(storeValue, value, checked) {
- if (value === void 0) {
- if (Array.isArray(storeValue))
- return storeValue;
- return !!checked;
- }
- const primitiveValue = menu_item_checkbox_getPrimitiveValue(value);
- if (!Array.isArray(storeValue)) {
- if (checked) {
- return primitiveValue;
- }
- return storeValue === primitiveValue ? false : storeValue;
- }
- if (checked) {
- if (storeValue.includes(primitiveValue)) {
- return storeValue;
- }
- return [...storeValue, primitiveValue];
- }
- return storeValue.filter((v) => v !== primitiveValue);
-}
-var useMenuItemCheckbox = createHook(
- (_a) => {
- var _b = _a, {
- store,
- name,
- value,
- checked,
- defaultChecked: defaultCheckedProp,
- hideOnClick = false
- } = _b, props = __objRest(_b, [
- "store",
- "name",
- "value",
- "checked",
- "defaultChecked",
- "hideOnClick"
- ]);
- const context = useMenuScopedContext();
- store = store || context;
- invariant(
- store,
- false && 0
- );
- const defaultChecked = useInitialValue(defaultCheckedProp);
- (0,external_React_.useEffect)(() => {
- store == null ? void 0 : store.setValue(name, (prevValue = []) => {
- if (!defaultChecked)
- return prevValue;
- return getValue(prevValue, value, true);
- });
- }, [store, name, value, defaultChecked]);
- (0,external_React_.useEffect)(() => {
- if (checked === void 0)
- return;
- store == null ? void 0 : store.setValue(name, (prevValue) => {
- return getValue(prevValue, value, checked);
- });
- }, [store, name, value, checked]);
- const checkboxStore = useCheckboxStore({
- value: store.useState((state) => state.values[name]),
- setValue(internalValue) {
- store == null ? void 0 : store.setValue(name, () => {
- if (checked === void 0)
- return internalValue;
- const nextValue = getValue(internalValue, value, checked);
- if (!Array.isArray(nextValue))
- return nextValue;
- if (!Array.isArray(internalValue))
- return nextValue;
- if (shallowEqual(internalValue, nextValue))
- return internalValue;
- return nextValue;
- });
- }
- });
- props = _4R3V3JGP_spreadValues({
- role: "menuitemcheckbox"
- }, props);
- props = useCheckbox(_4R3V3JGP_spreadValues({
- store: checkboxStore,
- name,
- value,
- checked
- }, props));
- props = useMenuItem(_4R3V3JGP_spreadValues({ store, hideOnClick }, props));
- return props;
- }
-);
-var MenuItemCheckbox = createMemoComponent(
- (props) => {
- const htmlProps = useMenuItemCheckbox(props);
- return _3ORBWXWF_createElement("div", htmlProps);
- }
-);
-if (false) {}
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/menu/menu-item-radio.js
-"use client";
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-// src/menu/menu-item-radio.tsx
-
-
-
-function menu_item_radio_getValue(prevValue, value, checked) {
- if (checked === void 0)
- return prevValue;
- if (checked)
- return value;
- return prevValue;
-}
-var useMenuItemRadio = createHook(
- (_a) => {
- var _b = _a, {
- store,
- name,
- value,
- checked,
- onChange: onChangeProp,
- hideOnClick = false
- } = _b, props = __objRest(_b, [
- "store",
- "name",
- "value",
- "checked",
- "onChange",
- "hideOnClick"
- ]);
- const context = useMenuScopedContext();
- store = store || context;
- invariant(
- store,
- false && 0
- );
- const defaultChecked = useInitialValue(props.defaultChecked);
- (0,external_React_.useEffect)(() => {
- store == null ? void 0 : store.setValue(name, (prevValue = false) => {
- return menu_item_radio_getValue(prevValue, value, defaultChecked);
- });
- }, [store, name, value, defaultChecked]);
- (0,external_React_.useEffect)(() => {
- if (checked === void 0)
- return;
- store == null ? void 0 : store.setValue(name, (prevValue) => {
- return menu_item_radio_getValue(prevValue, value, checked);
- });
- }, [store, name, value, checked]);
- const isChecked = store.useState((state) => state.values[name] === value);
- props = useWrapElement(
- props,
- (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(MenuItemCheckedContext.Provider, { value: !!isChecked, children: element }),
- [isChecked]
- );
- props = _4R3V3JGP_spreadValues({
- role: "menuitemradio"
- }, props);
- props = useRadio(_4R3V3JGP_spreadValues({
- name,
- value,
- checked: isChecked,
- onChange: (event) => {
- onChangeProp == null ? void 0 : onChangeProp(event);
- if (event.defaultPrevented)
- return;
- const element = event.currentTarget;
- store == null ? void 0 : store.setValue(name, (prevValue) => {
- return menu_item_radio_getValue(prevValue, value, checked != null ? checked : element.checked);
- });
- }
- }, props));
- props = useMenuItem(_4R3V3JGP_spreadValues({ store, hideOnClick }, props));
- return props;
- }
-);
-var MenuItemRadio = createMemoComponent(
- (props) => {
- const htmlProps = useMenuItemRadio(props);
- return _3ORBWXWF_createElement("div", htmlProps);
- }
-);
-if (false) {}
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/menu/menu-group.js
-"use client";
-
-
-
-
-
-
-
-
-// src/menu/menu-group.ts
-var useMenuGroup = createHook((props) => {
- props = useCompositeGroup(props);
- return props;
-});
-var menu_group_MenuGroup = createComponent((props) => {
- const htmlProps = useMenuGroup(props);
- return _3ORBWXWF_createElement("div", htmlProps);
-});
-if (false) {}
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/ENRQQ6LK.js
-"use client";
-
-
-
-
-
-// src/composite/composite-separator.ts
-
-var useCompositeSeparator = createHook(
- (_a) => {
- var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
- const context = useCompositeContext();
- store = store || context;
- invariant(
- store,
- false && 0
- );
- const orientation = store.useState(
- (state) => state.orientation === "horizontal" ? "vertical" : "horizontal"
- );
- props = useSeparator(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { orientation }));
- return props;
- }
-);
-var CompositeSeparator = createComponent(
- (props) => {
- const htmlProps = useCompositeSeparator(props);
- return _3ORBWXWF_createElement("hr", htmlProps);
- }
-);
-if (false) {}
-
-
-
-;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/menu/menu-separator.js
-"use client";
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-// src/menu/menu-separator.ts
-var useMenuSeparator = createHook(
- (_a) => {
- var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
- const context = useMenuContext();
- store = store || context;
- props = useCompositeSeparator(_4R3V3JGP_spreadValues({ store }, props));
- return props;
- }
-);
-var MenuSeparator = createComponent((props) => {
- const htmlProps = useMenuSeparator(props);
- return _3ORBWXWF_createElement("hr", htmlProps);
-});
-if (false) {}
-
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dropdown-menu-v2/styles.js
-
-function dropdown_menu_v2_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-
-
-/**
- * Internal dependencies
- */
-
-
-
-
-const ANIMATION_PARAMS = {
- SLIDE_AMOUNT: '2px',
- DURATION: '400ms',
- EASING: 'cubic-bezier( 0.16, 1, 0.3, 1 )'
-};
-const CONTENT_WRAPPER_PADDING = space(1);
-const ITEM_PADDING_BLOCK = space(2);
-const ITEM_PADDING_INLINE = space(3);
-
-// TODO:
-// - those values are different from saved variables?
-// - should bring this into the config, and make themeable
-// - border color and divider color are different?
-const DEFAULT_BORDER_COLOR = COLORS.gray[300];
-const DIVIDER_COLOR = COLORS.gray[200];
-const TOOLBAR_VARIANT_BORDER_COLOR = COLORS.gray['900'];
-const DEFAULT_BOX_SHADOW = `0 0 0 ${config_values.borderWidth} ${DEFAULT_BORDER_COLOR}, ${config_values.popoverShadow}`;
-const TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${config_values.borderWidth} ${TOOLBAR_VARIANT_BORDER_COLOR}`;
-const GRID_TEMPLATE_COLS = 'minmax( 0, max-content ) 1fr';
-const slideUpAndFade = emotion_react_browser_esm_keyframes({
- '0%': {
- opacity: 0,
- transform: `translateY(${ANIMATION_PARAMS.SLIDE_AMOUNT})`
- },
- '100%': {
- opacity: 1,
- transform: 'translateY(0)'
- }
-});
-const slideRightAndFade = emotion_react_browser_esm_keyframes({
- '0%': {
- opacity: 0,
- transform: `translateX(-${ANIMATION_PARAMS.SLIDE_AMOUNT})`
- },
- '100%': {
- opacity: 1,
- transform: 'translateX(0)'
- }
-});
-const slideDownAndFade = emotion_react_browser_esm_keyframes({
- '0%': {
- opacity: 0,
- transform: `translateY(-${ANIMATION_PARAMS.SLIDE_AMOUNT})`
- },
- '100%': {
- opacity: 1,
- transform: 'translateY(0)'
- }
-});
-const slideLeftAndFade = emotion_react_browser_esm_keyframes({
- '0%': {
- opacity: 0,
- transform: `translateX(${ANIMATION_PARAMS.SLIDE_AMOUNT})`
- },
- '100%': {
- opacity: 1,
- transform: 'translateX(0)'
- }
-});
-const dropdown_menu_v2_styles_DropdownMenu = /*#__PURE__*/emotion_styled_base_browser_esm(Menu, true ? {
- target: "e1kdzosf12"
-} : 0)("position:relative;z-index:1000000;display:grid;grid-template-columns:", GRID_TEMPLATE_COLS, ";grid-template-rows:auto;box-sizing:border-box;min-width:160px;max-width:320px;max-height:var( --popover-available-height );padding:", CONTENT_WRAPPER_PADDING, ";background-color:", COLORS.ui.background, ";border-radius:4px;", props => /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:", props.variant === 'toolbar' ? TOOLBAR_VARIANT_BOX_SHADOW : DEFAULT_BOX_SHADOW, ";" + ( true ? "" : 0), true ? "" : 0), " overscroll-behavior:contain;overflow:auto;outline:2px solid transparent!important;animation-duration:", ANIMATION_PARAMS.DURATION, ";animation-timing-function:", ANIMATION_PARAMS.EASING, ";will-change:transform,opacity;animation-name:", slideDownAndFade, ";&[data-side='right']{animation-name:", slideLeftAndFade, ";}&[data-side='bottom']{animation-name:", slideUpAndFade, ";}&[data-side='left']{animation-name:", slideRightAndFade, ";}@media ( prefers-reduced-motion ){animation-duration:0s;}" + ( true ? "" : 0));
-const baseItem = /*#__PURE__*/emotion_react_browser_esm_css("all:unset;position:relative;min-height:", space(10), ";box-sizing:border-box;grid-column:1/-1;display:grid;grid-template-columns:", GRID_TEMPLATE_COLS, ";align-items:center;@supports ( grid-template-columns: subgrid ){grid-template-columns:subgrid;}font-size:", font('default.fontSize'), ";font-family:inherit;font-weight:normal;line-height:20px;color:", COLORS.gray[900], ";border-radius:", config_values.radiusBlockUi, ";padding-block:", ITEM_PADDING_BLOCK, ";padding-inline:", ITEM_PADDING_INLINE, ";scroll-margin:", CONTENT_WRAPPER_PADDING, ";user-select:none;outline:none;&[aria-disabled='true']{color:", COLORS.ui.textDisabled, ";cursor:not-allowed;}&[data-active-item]:not( [data-focus-visible] ):not(\n\t\t\t[aria-disabled='true']\n\t\t){background-color:", COLORS.theme.accent, ";color:", COLORS.white, ";}&[data-focus-visible]{box-shadow:0 0 0 1.5px ", COLORS.theme.accent, ";outline:2px solid transparent;}&:active,&[data-active]{}", dropdown_menu_v2_styles_DropdownMenu, ":not(:focus) &:not(:focus)[aria-expanded=\"true\"]{background-color:", COLORS.gray[100], ";color:", COLORS.gray[900], ";}svg{fill:currentColor;}" + ( true ? "" : 0), true ? "" : 0);
-const styles_DropdownMenuItem = /*#__PURE__*/emotion_styled_base_browser_esm(Y6467XPW_MenuItem, true ? {
- target: "e1kdzosf11"
-} : 0)(baseItem, ";" + ( true ? "" : 0));
-const styles_DropdownMenuCheckboxItem = /*#__PURE__*/emotion_styled_base_browser_esm(MenuItemCheckbox, true ? {
- target: "e1kdzosf10"
-} : 0)(baseItem, ";" + ( true ? "" : 0));
-const styles_DropdownMenuRadioItem = /*#__PURE__*/emotion_styled_base_browser_esm(MenuItemRadio, true ? {
- target: "e1kdzosf9"
-} : 0)(baseItem, ";" + ( true ? "" : 0));
-const ItemPrefixWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
- target: "e1kdzosf8"
-} : 0)("grid-column:1;", styles_DropdownMenuCheckboxItem, ">&,", styles_DropdownMenuRadioItem, ">&{min-width:", space(6), ";}", styles_DropdownMenuCheckboxItem, ">&,", styles_DropdownMenuRadioItem, ">&,&:not( :empty ){margin-inline-end:", space(2), ";}display:flex;align-items:center;justify-content:center;color:", COLORS.gray['700'], ";[data-active-item]:not( [data-focus-visible] )>&,[aria-disabled='true']>&{color:inherit;}" + ( true ? "" : 0));
-const DropdownMenuItemContentWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
- target: "e1kdzosf7"
-} : 0)("grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:", space(3), ";pointer-events:none;" + ( true ? "" : 0));
-const DropdownMenuItemChildrenWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
- target: "e1kdzosf6"
-} : 0)("flex:1;display:inline-flex;flex-direction:column;gap:", space(1), ";" + ( true ? "" : 0));
-const ItemSuffixWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
- target: "e1kdzosf5"
-} : 0)("flex:0 1 fit-content;min-width:0;width:fit-content;display:flex;align-items:center;justify-content:center;gap:", space(3), ";color:", COLORS.gray['700'], ";[data-active-item]:not( [data-focus-visible] ) *:not(", dropdown_menu_v2_styles_DropdownMenu, ") &,[aria-disabled='true'] *:not(", dropdown_menu_v2_styles_DropdownMenu, ") &{color:inherit;}" + ( true ? "" : 0));
-const styles_DropdownMenuGroup = /*#__PURE__*/emotion_styled_base_browser_esm(menu_group_MenuGroup, true ? {
- target: "e1kdzosf4"
-} : 0)( true ? {
- name: "49aokf",
- styles: "display:contents"
-} : 0);
-const styles_DropdownMenuSeparator = /*#__PURE__*/emotion_styled_base_browser_esm(MenuSeparator, true ? {
- target: "e1kdzosf3"
-} : 0)("grid-column:1/-1;border:none;height:", config_values.borderWidth, ";background-color:", props => props.variant === 'toolbar' ? TOOLBAR_VARIANT_BORDER_COLOR : DIVIDER_COLOR, ";margin-block:", space(2), ";margin-inline:", ITEM_PADDING_INLINE, ";outline:2px solid transparent;" + ( true ? "" : 0));
-const SubmenuChevronIcon = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_icon, true ? {
- target: "e1kdzosf2"
-} : 0)("width:", space(1.5), ";", rtl({
- transform: `scaleX(1)`
-}, {
- transform: `scaleX(-1)`
-}), ";" + ( true ? "" : 0));
-const styles_DropdownMenuItemLabel = /*#__PURE__*/emotion_styled_base_browser_esm(truncate_component, true ? {
- target: "e1kdzosf1"
-} : 0)("font-size:", font('default.fontSize'), ";line-height:20px;color:inherit;" + ( true ? "" : 0));
-const styles_DropdownMenuItemHelpText = /*#__PURE__*/emotion_styled_base_browser_esm(truncate_component, true ? {
- target: "e1kdzosf0"
-} : 0)("font-size:", font('helpText.fontSize'), ";line-height:16px;color:", COLORS.gray['700'], ";[data-active-item]:not( [data-focus-visible] ) *:not( ", dropdown_menu_v2_styles_DropdownMenu, " ) &,[aria-disabled='true'] *:not( ", dropdown_menu_v2_styles_DropdownMenu, " ) &{color:inherit;}" + ( true ? "" : 0));
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dropdown-menu-v2/index.js
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-
-
-/**
- * Internal dependencies
- */
-
-
-
-
-
-
-const DropdownMenuContext = (0,external_wp_element_namespaceObject.createContext)(undefined);
-const DropdownMenuItem = (0,external_wp_element_namespaceObject.forwardRef)(function DropdownMenuItem({
- prefix,
- suffix,
- children,
- hideOnClick = true,
- ...props
-}, ref) {
- const dropdownMenuContext = (0,external_wp_element_namespaceObject.useContext)(DropdownMenuContext);
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_DropdownMenuItem, {
+ }, []);
+ const computedDirection = useStoreState(menuContext?.store, 'rtl') ? 'rtl' : 'ltr';
+ const wrapperProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({
+ dir: computedDirection,
+ style: {
+ direction: computedDirection
+ }
+ }), [computedDirection]);
+ if (!menuContext?.store) {
+ throw new Error('Menu.Popover can only be rendered inside a Menu component');
+ }
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Menu, {
+ ...otherProps,
ref: ref,
- ...props,
- accessibleWhenDisabled: true,
- hideOnClick: hideOnClick,
- store: dropdownMenuContext?.store,
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemPrefixWrapper, {
- children: prefix
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(DropdownMenuItemContentWrapper, {
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DropdownMenuItemChildrenWrapper, {
- children: children
- }), suffix && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemSuffixWrapper, {
- children: suffix
- })]
- })]
- });
-});
-const DropdownMenuCheckboxItem = (0,external_wp_element_namespaceObject.forwardRef)(function DropdownMenuCheckboxItem({
- suffix,
- children,
- hideOnClick = false,
- ...props
-}, ref) {
- const dropdownMenuContext = (0,external_wp_element_namespaceObject.useContext)(DropdownMenuContext);
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_DropdownMenuCheckboxItem, {
- ref: ref,
- ...props,
- accessibleWhenDisabled: true,
- hideOnClick: hideOnClick,
- store: dropdownMenuContext?.store,
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MenuItemCheck, {
- store: dropdownMenuContext?.store,
- render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemPrefixWrapper, {})
- // Override some ariakit inline styles
- ,
- style: {
- width: 'auto',
- height: 'auto'
- },
- children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
- icon: library_check,
- size: 24
+ modal: modal,
+ store: menuContext.store
+ // Root menu has an 8px distance from its trigger,
+ // otherwise 0 (which causes the submenu to slightly overlap)
+ ,
+ gutter: gutter !== null && gutter !== void 0 ? gutter : menuContext.store.parent ? 0 : 8
+ // Align nested menu by the same (but opposite) amount
+ // as the menu container's padding.
+ ,
+ shift: shift !== null && shift !== void 0 ? shift : menuContext.store.parent ? -4 : 0,
+ hideOnHoverOutside: false,
+ "data-side": appliedPlacementSide,
+ wrapperProps: wrapperProps,
+ hideOnEscape: hideOnEscape,
+ unmountOnHide: true,
+ render: renderProps =>
+ /*#__PURE__*/
+ // Two wrappers are needed for the entry animation, where the menu
+ // container scales with a different factor than its contents.
+ // The {...renderProps} are passed to the inner wrapper, so that the
+ // menu element is the direct parent of the menu item elements.
+ (0,external_ReactJSXRuntime_namespaceObject.jsx)(PopoverOuterWrapper, {
+ variant: menuContext.variant,
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PopoverInnerWrapper, {
+ ...renderProps
})
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(DropdownMenuItemContentWrapper, {
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DropdownMenuItemChildrenWrapper, {
- children: children
- }), suffix && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemSuffixWrapper, {
- children: suffix
- })]
- })]
- });
-});
-const radioCheck = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
- xmlns: "http://www.w3.org/2000/svg",
- viewBox: "0 0 24 24",
- children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Circle, {
- cx: 12,
- cy: 12,
- r: 3
- })
-});
-const DropdownMenuRadioItem = (0,external_wp_element_namespaceObject.forwardRef)(function DropdownMenuRadioItem({
- suffix,
- children,
- hideOnClick = false,
- ...props
-}, ref) {
- const dropdownMenuContext = (0,external_wp_element_namespaceObject.useContext)(DropdownMenuContext);
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_DropdownMenuRadioItem, {
- ref: ref,
- ...props,
- accessibleWhenDisabled: true,
- hideOnClick: hideOnClick,
- store: dropdownMenuContext?.store,
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MenuItemCheck, {
- store: dropdownMenuContext?.store,
- render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemPrefixWrapper, {})
- // Override some ariakit inline styles
- ,
- style: {
- width: 'auto',
- height: 'auto'
- },
- children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
- icon: radioCheck,
- size: 24
- })
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(DropdownMenuItemContentWrapper, {
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DropdownMenuItemChildrenWrapper, {
- children: children
- }), suffix && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemSuffixWrapper, {
- children: suffix
- })]
- })]
- });
-});
-const DropdownMenuGroup = (0,external_wp_element_namespaceObject.forwardRef)(function DropdownMenuGroup(props, ref) {
- const dropdownMenuContext = (0,external_wp_element_namespaceObject.useContext)(DropdownMenuContext);
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_DropdownMenuGroup, {
- ref: ref,
- ...props,
- store: dropdownMenuContext?.store
- });
-});
-const dropdown_menu_v2_UnconnectedDropdownMenu = (props, ref) => {
- var _props$placement;
- const {
- // Store props
+ }),
+ children: children
+ });
+});
+
+;// ./node_modules/@wordpress/components/build-module/menu/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const UnconnectedMenu = props => {
+ const {
+ children,
+ defaultOpen = false,
open,
- defaultOpen = false,
onOpenChange,
placement,
- // Menu trigger props
- trigger,
- // Menu props
- gutter,
- children,
- shift,
- modal = true,
// From internal components context
- variant,
- // Rest
- ...otherProps
- } = useContextSystem(props, 'DropdownMenu');
- const parentContext = (0,external_wp_element_namespaceObject.useContext)(DropdownMenuContext);
- const computedDirection = (0,external_wp_i18n_namespaceObject.isRTL)() ? 'rtl' : 'ltr';
+ variant
+ } = useContextSystem(props, 'Menu');
+ const parentContext = (0,external_wp_element_namespaceObject.useContext)(context_Context);
+ const rtl = (0,external_wp_i18n_namespaceObject.isRTL)();
// If an explicit value for the `placement` prop is not passed,
- // apply a default placement of `bottom-start` for the root dropdown,
- // and of `right-start` for nested dropdowns.
- let computedPlacement = (_props$placement = props.placement) !== null && _props$placement !== void 0 ? _props$placement : parentContext?.store ? 'right-start' : 'bottom-start';
+ // apply a default placement of `bottom-start` for the root menu popover,
+ // and of `right-start` for nested menu popovers.
+ let computedPlacement = placement !== null && placement !== void 0 ? placement : parentContext?.store ? 'right-start' : 'bottom-start';
// Swap left/right in case of RTL direction
- if (computedDirection === 'rtl') {
+ if (rtl) {
if (/right/.test(computedPlacement)) {
computedPlacement = computedPlacement.replace('right', 'left');
} else if (/left/.test(computedPlacement)) {
computedPlacement = computedPlacement.replace('left', 'right');
}
}
- const dropdownMenuStore = useMenuStore({
+ const menuStore = useMenuStore({
parent: parentContext?.store,
open,
defaultOpen,
@@ -73194,98 +71388,131 @@
setOpen(willBeOpen) {
onOpenChange?.(willBeOpen);
},
- rtl: computedDirection === 'rtl'
+ rtl
});
const contextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
- store: dropdownMenuStore,
+ store: menuStore,
variant
- }), [dropdownMenuStore, variant]);
-
- // Extract the side from the applied placement — useful for animations.
- const appliedPlacementSide = dropdownMenuStore.useState('placement').split('-')[0];
- if (dropdownMenuStore.parent && !((0,external_wp_element_namespaceObject.isValidElement)(trigger) && DropdownMenuItem === trigger.type)) {
- // eslint-disable-next-line no-console
- console.warn('For nested DropdownMenus, the `trigger` should always be a `DropdownMenuItem`.');
- }
- const hideOnEscape = (0,external_wp_element_namespaceObject.useCallback)(event => {
- // Pressing Escape can cause unexpected consequences (ie. exiting
- // full screen mode on MacOs, close parent modals...).
- event.preventDefault();
- // Returning `true` causes the menu to hide.
- return true;
- }, []);
- const wrapperProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({
- dir: computedDirection,
- style: {
- direction: computedDirection
- }
- }), [computedDirection]);
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
- children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MenuButton, {
- ref: ref,
- store: dropdownMenuStore,
- render: dropdownMenuStore.parent ? (0,external_wp_element_namespaceObject.cloneElement)(trigger, {
- // Add submenu arrow, unless a `suffix` is explicitly specified
- suffix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
- children: [trigger.props.suffix, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SubmenuChevronIcon, {
- "aria-hidden": "true",
- icon: chevron_right_small,
- size: 24,
- preserveAspectRatio: "xMidYMid slice"
- })]
- })
- }) : trigger
- }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_menu_v2_styles_DropdownMenu, {
- ...otherProps,
- modal: modal,
- store: dropdownMenuStore
- // Root menu has an 8px distance from its trigger,
- // otherwise 0 (which causes the submenu to slightly overlap)
- ,
- gutter: gutter !== null && gutter !== void 0 ? gutter : dropdownMenuStore.parent ? 0 : 8
- // Align nested menu by the same (but opposite) amount
- // as the menu container's padding.
- ,
- shift: shift !== null && shift !== void 0 ? shift : dropdownMenuStore.parent ? -4 : 0,
- hideOnHoverOutside: false,
- "data-side": appliedPlacementSide,
- variant: variant,
- wrapperProps: wrapperProps,
- hideOnEscape: hideOnEscape,
- unmountOnHide: true,
- children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DropdownMenuContext.Provider, {
- value: contextValue,
- children: children
- })
- })]
- });
-};
-const dropdown_menu_v2_DropdownMenu = contextConnect(dropdown_menu_v2_UnconnectedDropdownMenu, 'DropdownMenu');
-const DropdownMenuSeparator = (0,external_wp_element_namespaceObject.forwardRef)(function DropdownMenuSeparator(props, ref) {
- const dropdownMenuContext = (0,external_wp_element_namespaceObject.useContext)(DropdownMenuContext);
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_DropdownMenuSeparator, {
- ref: ref,
- ...props,
- store: dropdownMenuContext?.store,
- variant: dropdownMenuContext?.variant
- });
-});
-const DropdownMenuItemLabel = (0,external_wp_element_namespaceObject.forwardRef)(function DropdownMenuItemLabel(props, ref) {
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_DropdownMenuItemLabel, {
- numberOfLines: 1,
- ref: ref,
- ...props
- });
-});
-const DropdownMenuItemHelpText = (0,external_wp_element_namespaceObject.forwardRef)(function DropdownMenuItemHelpText(props, ref) {
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_DropdownMenuItemHelpText, {
- numberOfLines: 2,
- ref: ref,
- ...props
- });
-});
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/theme/styles.js
+ }), [menuStore, variant]);
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(context_Context.Provider, {
+ value: contextValue,
+ children: children
+ });
+};
+
+/**
+ * Menu is a collection of React components that combine to render
+ * ARIA-compliant [menu](https://www.w3.org/WAI/ARIA/apg/patterns/menu/) and
+ * [menu button](https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/) patterns.
+ *
+ * `Menu` itself is a wrapper component and context provider.
+ * It is responsible for managing the state of the menu and its items, and for
+ * rendering the `Menu.TriggerButton` (or the `Menu.SubmenuTriggerItem`)
+ * component, and the `Menu.Popover` component.
+ */
+const menu_Menu = Object.assign(contextConnectWithoutRef(UnconnectedMenu, 'Menu'), {
+ Context: Object.assign(context_Context, {
+ displayName: 'Menu.Context'
+ }),
+ /**
+ * Renders a menu item inside the `Menu.Popover` or `Menu.Group` components.
+ *
+ * It can optionally contain one instance of the `Menu.ItemLabel` component
+ * and one instance of the `Menu.ItemHelpText` component.
+ */
+ Item: Object.assign(item_Item, {
+ displayName: 'Menu.Item'
+ }),
+ /**
+ * Renders a radio menu item inside the `Menu.Popover` or `Menu.Group`
+ * components.
+ *
+ * It can optionally contain one instance of the `Menu.ItemLabel` component
+ * and one instance of the `Menu.ItemHelpText` component.
+ */
+ RadioItem: Object.assign(RadioItem, {
+ displayName: 'Menu.RadioItem'
+ }),
+ /**
+ * Renders a checkbox menu item inside the `Menu.Popover` or `Menu.Group`
+ * components.
+ *
+ * It can optionally contain one instance of the `Menu.ItemLabel` component
+ * and one instance of the `Menu.ItemHelpText` component.
+ */
+ CheckboxItem: Object.assign(CheckboxItem, {
+ displayName: 'Menu.CheckboxItem'
+ }),
+ /**
+ * Renders a group for menu items.
+ *
+ * It should contain one instance of `Menu.GroupLabel` and one or more
+ * instances of `Menu.Item`, `Menu.RadioItem`, or `Menu.CheckboxItem`.
+ */
+ Group: Object.assign(group_Group, {
+ displayName: 'Menu.Group'
+ }),
+ /**
+ * Renders a label in a menu group.
+ *
+ * This component should be wrapped with `Menu.Group` so the
+ * `aria-labelledby` is correctly set on the group element.
+ */
+ GroupLabel: Object.assign(group_label_GroupLabel, {
+ displayName: 'Menu.GroupLabel'
+ }),
+ /**
+ * Renders a divider between menu items or menu groups.
+ */
+ Separator: Object.assign(separator_Separator, {
+ displayName: 'Menu.Separator'
+ }),
+ /**
+ * Renders a menu item's label text. It should be wrapped with `Menu.Item`,
+ * `Menu.RadioItem`, or `Menu.CheckboxItem`.
+ */
+ ItemLabel: Object.assign(ItemLabel, {
+ displayName: 'Menu.ItemLabel'
+ }),
+ /**
+ * Renders a menu item's help text. It should be wrapped with `Menu.Item`,
+ * `Menu.RadioItem`, or `Menu.CheckboxItem`.
+ */
+ ItemHelpText: Object.assign(ItemHelpText, {
+ displayName: 'Menu.ItemHelpText'
+ }),
+ /**
+ * Renders a dropdown menu element that's controlled by a sibling
+ * `Menu.TriggerButton` component. It renders a popover and automatically
+ * focuses on items when the menu is shown.
+ *
+ * The only valid children of `Menu.Popover` are `Menu.Item`,
+ * `Menu.RadioItem`, `Menu.CheckboxItem`, `Menu.Group`, `Menu.Separator`,
+ * and `Menu` (for nested dropdown menus).
+ */
+ Popover: Object.assign(menu_popover_Popover, {
+ displayName: 'Menu.Popover'
+ }),
+ /**
+ * Renders a menu button that toggles the visibility of a sibling
+ * `Menu.Popover` component when clicked or when using arrow keys.
+ */
+ TriggerButton: Object.assign(TriggerButton, {
+ displayName: 'Menu.TriggerButton'
+ }),
+ /**
+ * Renders a menu item that toggles the visibility of a sibling
+ * `Menu.Popover` component when clicked or when using arrow keys.
+ *
+ * This component is used to create a nested dropdown menu.
+ */
+ SubmenuTriggerItem: Object.assign(SubmenuTriggerItem, {
+ displayName: 'Menu.SubmenuTriggerItem'
+ })
+});
+/* harmony default export */ const build_module_menu = ((/* unused pure expression or super */ null && (menu_Menu)));
+
+;// ./node_modules/@wordpress/components/build-module/theme/styles.js
function theme_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
@@ -73311,7 +71538,7 @@
styles: "color:var( --wp-components-color-foreground, currentColor )"
} : 0);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/theme/color-algorithms.js
+;// ./node_modules/@wordpress/components/build-module/theme/color-algorithms.js
/**
* External dependencies
*/
@@ -73417,7 +71644,7 @@
return result;
}
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/theme/index.js
+;// ./node_modules/@wordpress/components/build-module/theme/index.js
/**
* WordPress dependencies
*/
@@ -73469,7 +71696,7 @@
}
/* harmony default export */ const theme = (Theme);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tabs/context.js
+;// ./node_modules/@wordpress/components/build-module/tabs/context.js
/**
* WordPress dependencies
*/
@@ -73482,40 +71709,51 @@
const TabsContext = (0,external_wp_element_namespaceObject.createContext)(undefined);
const useTabsContext = () => (0,external_wp_element_namespaceObject.useContext)(TabsContext);
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tabs/styles.js
-
-/**
- * External dependencies
- */
-
-// eslint-disable-next-line no-restricted-imports
-
-
-/**
- * Internal dependencies
- */
-
-
-const TabListWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
+;// ./node_modules/@wordpress/components/build-module/tabs/styles.js
+
+function tabs_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+/**
+ * External dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+const StyledTabList = /*#__PURE__*/emotion_styled_base_browser_esm(TabList, true ? {
+ target: "enfox0g4"
+} : 0)("display:flex;align-items:stretch;overflow-x:auto;&[aria-orientation='vertical']{flex-direction:column;}:where( [aria-orientation='horizontal'] ){width:fit-content;}--direction-factor:1;--direction-start:left;--direction-end:right;--selected-start:var( --selected-left, 0 );&:dir( rtl ){--direction-factor:-1;--direction-start:right;--direction-end:left;--selected-start:var( --selected-right, 0 );}@media not ( prefers-reduced-motion ){&[data-indicator-animated]::before{transition-property:transform,border-radius,border-block;transition-duration:0.2s;transition-timing-function:ease-out;}}position:relative;&::before{content:'';position:absolute;pointer-events:none;transform-origin:var( --direction-start ) top;outline:2px solid transparent;outline-offset:-1px;}--antialiasing-factor:100;&[aria-orientation='horizontal']{--fade-width:4rem;--fade-gradient-base:transparent 0%,black var( --fade-width );--fade-gradient-composed:var( --fade-gradient-base ),black 60%,transparent 50%;&.is-overflowing-first{mask-image:linear-gradient(\n\t\t\t\tto var( --direction-end ),\n\t\t\t\tvar( --fade-gradient-base )\n\t\t\t);}&.is-overflowing-last{mask-image:linear-gradient(\n\t\t\t\tto var( --direction-start ),\n\t\t\t\tvar( --fade-gradient-base )\n\t\t\t);}&.is-overflowing-first.is-overflowing-last{mask-image:linear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\tvar( --fade-gradient-composed )\n\t\t\t\t),linear-gradient( to left, var( --fade-gradient-composed ) );}&::before{bottom:0;height:0;width:calc( var( --antialiasing-factor ) * 1px );transform:translateX(\n\t\t\t\t\tcalc(\n\t\t\t\t\t\tvar( --selected-start ) * var( --direction-factor ) *\n\t\t\t\t\t\t\t1px\n\t\t\t\t\t)\n\t\t\t\t) scaleX(\n\t\t\t\t\tcalc(\n\t\t\t\t\t\tvar( --selected-width, 0 ) /\n\t\t\t\t\t\t\tvar( --antialiasing-factor )\n\t\t\t\t\t)\n\t\t\t\t);border-bottom:var( --wp-admin-border-width-focus ) solid ", COLORS.theme.accent, ";}}&[aria-orientation='vertical']{&::before{border-radius:", config_values.radiusSmall, "/calc(\n\t\t\t\t\t", config_values.radiusSmall, " /\n\t\t\t\t\t\t(\n\t\t\t\t\t\t\tvar( --selected-height, 0 ) /\n\t\t\t\t\t\t\t\tvar( --antialiasing-factor )\n\t\t\t\t\t\t)\n\t\t\t\t);top:0;left:0;width:100%;height:calc( var( --antialiasing-factor ) * 1px );transform:translateY( calc( var( --selected-top, 0 ) * 1px ) ) scaleY(\n\t\t\t\t\tcalc(\n\t\t\t\t\t\tvar( --selected-height, 0 ) /\n\t\t\t\t\t\t\tvar( --antialiasing-factor )\n\t\t\t\t\t)\n\t\t\t\t);background-color:color-mix(\n\t\t\t\tin srgb,\n\t\t\t\t", COLORS.theme.accent, ",\n\t\t\t\ttransparent 96%\n\t\t\t);}&[data-select-on-move='true']:has(\n\t\t\t\t:is( :focus-visible, [data-focus-visible] )\n\t\t\t)::before{box-sizing:border-box;border:var( --wp-admin-border-width-focus ) solid ", COLORS.theme.accent, ";border-block-width:calc(\n\t\t\t\tvar( --wp-admin-border-width-focus, 1px ) /\n\t\t\t\t\t(\n\t\t\t\t\t\tvar( --selected-height, 0 ) /\n\t\t\t\t\t\t\tvar( --antialiasing-factor )\n\t\t\t\t\t)\n\t\t\t);}}" + ( true ? "" : 0));
+const styles_Tab = /*#__PURE__*/emotion_styled_base_browser_esm(Tab, true ? {
+ target: "enfox0g3"
+} : 0)("&{border-radius:0;background:transparent;border:none;box-shadow:none;flex:1 0 auto;white-space:nowrap;display:flex;align-items:center;cursor:pointer;line-height:1.2;font-weight:400;color:", COLORS.theme.foreground, ";position:relative;&[aria-disabled='true']{cursor:default;color:", COLORS.ui.textDisabled, ";}&:not( [aria-disabled='true'] ):is( :hover, [data-focus-visible] ){color:", COLORS.theme.accent, ";}&:focus:not( :disabled ){box-shadow:none;outline:none;}&::after{position:absolute;pointer-events:none;outline:var( --wp-admin-border-width-focus ) solid ", COLORS.theme.accent, ";border-radius:", config_values.radiusSmall, ";opacity:0;@media not ( prefers-reduced-motion ){transition:opacity 0.1s linear;}}&[data-focus-visible]::after{opacity:1;}}[aria-orientation='horizontal'] &{padding-inline:", space(4), ";height:", space(12), ";scroll-margin:24px;&::after{content:'';inset:", space(3), ";}}[aria-orientation='vertical'] &{padding:", space(2), " ", space(3), ";min-height:", space(10), ";&[aria-selected='true']{color:", COLORS.theme.accent, ";fill:currentColor;}}[aria-orientation='vertical'][data-select-on-move='false'] &::after{content:'';inset:var( --wp-admin-border-width-focus );}" + ( true ? "" : 0));
+const TabChildren = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
target: "enfox0g2"
-} : 0)("position:relative;display:flex;align-items:stretch;flex-direction:row;&[aria-orientation='vertical']{flex-direction:column;}@media not ( prefers-reduced-motion: reduce ){&.is-animation-enabled::after{transition-property:left,top,width,height;transition-duration:0.2s;transition-timing-function:ease-out;}}&::after{content:'';position:absolute;pointer-events:none;outline:2px solid transparent;outline-offset:-1px;}&:not( [aria-orientation='vertical'] )::after{left:var( --indicator-left );bottom:0;width:var( --indicator-width );height:0;border-bottom:var( --wp-admin-border-width-focus ) solid ", COLORS.theme.accent, ";}&[aria-orientation='vertical']::after{opacity:0;right:0;top:var( --indicator-top );height:var( --indicator-height );border-right:var( --wp-admin-border-width-focus ) solid ", COLORS.theme.accent, ";}" + ( true ? "" : 0));
-const styles_Tab = /*#__PURE__*/emotion_styled_base_browser_esm(Tab, true ? {
+} : 0)( true ? {
+ name: "9at4z3",
+ styles: "flex-grow:1;display:flex;align-items:center;[aria-orientation='horizontal'] &{justify-content:center;}[aria-orientation='vertical'] &{justify-content:start;}"
+} : 0);
+const TabChevron = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_icon, true ? {
target: "enfox0g1"
-} : 0)("&{display:inline-flex;align-items:center;position:relative;border-radius:0;height:", space(12), ";background:transparent;border:none;box-shadow:none;cursor:pointer;padding:3px ", space(4), ";margin-left:0;font-weight:500;&[aria-disabled='true']{cursor:default;opacity:0.3;}&:hover{color:", COLORS.theme.accent, ";}&:focus:not( :disabled ){position:relative;box-shadow:none;outline:none;}&::before{content:'';position:absolute;top:", space(3), ";right:", space(3), ";bottom:", space(3), ";left:", space(3), ";pointer-events:none;box-shadow:0 0 0 var( --wp-admin-border-width-focus ) ", COLORS.theme.accent, ";border-radius:2px;opacity:0;@media not ( prefers-reduced-motion ){transition:opacity 0.1s linear;}}&:focus-visible::before{opacity:1;outline:2px solid transparent;}}" + ( true ? "" : 0));
+} : 0)("flex-shrink:0;margin-inline-end:", space(-1), ";[aria-orientation='horizontal'] &{display:none;}opacity:0;[role='tab']:is( [aria-selected='true'], [data-focus-visible], :hover ) &{opacity:1;}@media not ( prefers-reduced-motion ){[data-select-on-move='true'] [role='tab']:is( [aria-selected='true'], ) &{transition:opacity 0.15s 0.15s linear;}}&:dir( rtl ){rotate:180deg;}" + ( true ? "" : 0));
const styles_TabPanel = /*#__PURE__*/emotion_styled_base_browser_esm(TabPanel, true ? {
target: "enfox0g0"
-} : 0)("&:focus{box-shadow:none;outline:none;}&:focus-visible{border-radius:2px;box-shadow:0 0 0 var( --wp-admin-border-width-focus ) ", COLORS.theme.accent, ";outline:2px solid transparent;outline-offset:0;}" + ( true ? "" : 0));
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tabs/tab.js
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
+} : 0)("&:focus{box-shadow:none;outline:none;}&[data-focus-visible]{box-shadow:0 0 0 var( --wp-admin-border-width-focus ) ", COLORS.theme.accent, ";outline:2px solid transparent;outline-offset:0;}" + ( true ? "" : 0));
+
+;// ./node_modules/@wordpress/components/build-module/tabs/tab.js
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
+
@@ -73528,148 +71766,204 @@
render,
...otherProps
}, ref) {
- const context = useTabsContext();
- if (!context) {
- true ? external_wp_warning_default()('`Tabs.Tab` must be wrapped in a `Tabs` component.') : 0;
- return null;
- }
+ var _useTabsContext;
const {
store,
instanceId
- } = context;
+ } = (_useTabsContext = useTabsContext()) !== null && _useTabsContext !== void 0 ? _useTabsContext : {};
+ if (!store) {
+ true ? external_wp_warning_default()('`Tabs.Tab` must be wrapped in a `Tabs` component.') : 0;
+ return null;
+ }
const instancedTabId = `${instanceId}-${tabId}`;
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_Tab, {
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_Tab, {
ref: ref,
store: store,
id: instancedTabId,
disabled: disabled,
render: render,
...otherProps,
- children: children
- });
-});
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tabs/tablist.js
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
-
-
-
-
-function useTrackElementOffset(targetElement, onUpdate) {
- const [indicatorPosition, setIndicatorPosition] = (0,external_wp_element_namespaceObject.useState)({
- left: 0,
- top: 0,
- width: 0,
- height: 0
- });
-
- // TODO: replace with useEventCallback or similar when officially available.
- const updateCallbackRef = (0,external_wp_element_namespaceObject.useRef)(onUpdate);
+ children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TabChildren, {
+ children: children
+ }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TabChevron, {
+ icon: chevron_right
+ })]
+ });
+});
+
+;// ./node_modules/@wordpress/components/build-module/tabs/use-track-overflow.js
+/* eslint-disable jsdoc/require-param */
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Tracks if an element contains overflow and on which end by tracking the
+ * first and last child elements with an `IntersectionObserver` in relation
+ * to the parent element.
+ *
+ * Note that the returned value will only indicate whether the first or last
+ * element is currently "going out of bounds" but not whether it happens on
+ * the X or Y axis.
+ */
+function useTrackOverflow(parent, children) {
+ const [first, setFirst] = (0,external_wp_element_namespaceObject.useState)(false);
+ const [last, setLast] = (0,external_wp_element_namespaceObject.useState)(false);
+ const [observer, setObserver] = (0,external_wp_element_namespaceObject.useState)();
+ const callback = (0,external_wp_compose_namespaceObject.useEvent)(entries => {
+ for (const entry of entries) {
+ if (entry.target === children.first) {
+ setFirst(!entry.isIntersecting);
+ }
+ if (entry.target === children.last) {
+ setLast(!entry.isIntersecting);
+ }
+ }
+ });
+ (0,external_wp_element_namespaceObject.useEffect)(() => {
+ if (!parent || !window.IntersectionObserver) {
+ return;
+ }
+ const newObserver = new IntersectionObserver(callback, {
+ root: parent,
+ threshold: 0.9
+ });
+ setObserver(newObserver);
+ return () => newObserver.disconnect();
+ }, [callback, parent]);
+ (0,external_wp_element_namespaceObject.useEffect)(() => {
+ if (!observer) {
+ return;
+ }
+ if (children.first) {
+ observer.observe(children.first);
+ }
+ if (children.last) {
+ observer.observe(children.last);
+ }
+ return () => {
+ if (children.first) {
+ observer.unobserve(children.first);
+ }
+ if (children.last) {
+ observer.unobserve(children.last);
+ }
+ };
+ }, [children.first, children.last, observer]);
+ return {
+ first,
+ last
+ };
+}
+/* eslint-enable jsdoc/require-param */
+
+;// ./node_modules/@wordpress/components/build-module/tabs/tablist.js
+/**
+ * External dependencies
+ */
+
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+
+
+const DEFAULT_SCROLL_MARGIN = 24;
+
+/**
+ * Scrolls a given parent element so that a given rect is visible.
+ *
+ * The scroll is updated initially and whenever the rect changes.
+ */
+function useScrollRectIntoView(parent, rect, {
+ margin = DEFAULT_SCROLL_MARGIN
+} = {}) {
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
- updateCallbackRef.current = onUpdate;
- });
- const observedElementRef = (0,external_wp_element_namespaceObject.useRef)();
- const resizeObserverRef = (0,external_wp_element_namespaceObject.useRef)();
- (0,external_wp_element_namespaceObject.useEffect)(() => {
- if (targetElement === observedElementRef.current) {
- return;
- }
- observedElementRef.current = targetElement !== null && targetElement !== void 0 ? targetElement : undefined;
- function updateIndicator(element) {
- setIndicatorPosition({
- // Workaround to prevent unwanted scrollbars, see:
- // https://github.com/WordPress/gutenberg/pull/61979
- left: Math.max(element.offsetLeft - 1, 0),
- top: Math.max(element.offsetTop - 1, 0),
- width: parseFloat(getComputedStyle(element).width),
- height: parseFloat(getComputedStyle(element).height)
- });
- updateCallbackRef.current?.();
- }
-
- // Set up a ResizeObserver.
- if (!resizeObserverRef.current) {
- resizeObserverRef.current = new ResizeObserver(() => {
- if (observedElementRef.current) {
- updateIndicator(observedElementRef.current);
- }
- });
+ if (!parent || !rect) {
+ return;
}
const {
- current: resizeObserver
- } = resizeObserverRef;
-
- // Observe new element.
- if (targetElement) {
- updateIndicator(targetElement);
- resizeObserver.observe(targetElement);
- }
- return () => {
- // Unobserve previous element.
- if (observedElementRef.current) {
- resizeObserver.unobserve(observedElementRef.current);
- }
- };
- }, [targetElement]);
- return indicatorPosition;
-}
-function useOnValueUpdate(value, onUpdate) {
- const previousValueRef = (0,external_wp_element_namespaceObject.useRef)(value);
-
- // TODO: replace with useEventCallback or similar when officially available.
- const updateCallbackRef = (0,external_wp_element_namespaceObject.useRef)(onUpdate);
- (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
- updateCallbackRef.current = onUpdate;
- });
- (0,external_wp_element_namespaceObject.useEffect)(() => {
- if (previousValueRef.current !== value) {
- updateCallbackRef.current({
- previousValue: previousValueRef.current
- });
- previousValueRef.current = value;
- }
- }, [value]);
-}
-const TabList = (0,external_wp_element_namespaceObject.forwardRef)(function TabList({
+ scrollLeft: parentScroll
+ } = parent;
+ const parentWidth = parent.getBoundingClientRect().width;
+ const {
+ left: childLeft,
+ width: childWidth
+ } = rect;
+ const parentRightEdge = parentScroll + parentWidth;
+ const childRightEdge = childLeft + childWidth;
+ const rightOverflow = childRightEdge + margin - parentRightEdge;
+ const leftOverflow = parentScroll - (childLeft - margin);
+ let scrollLeft = null;
+ if (leftOverflow > 0) {
+ scrollLeft = parentScroll - leftOverflow;
+ } else if (rightOverflow > 0) {
+ scrollLeft = parentScroll + rightOverflow;
+ }
+ if (scrollLeft !== null) {
+ /**
+ * The optional chaining is used here to avoid unit test failures.
+ * It can be removed when JSDOM supports `Element` scroll methods.
+ * See: https://github.com/WordPress/gutenberg/pull/66498#issuecomment-2441146096
+ */
+ parent.scroll?.({
+ left: scrollLeft
+ });
+ }
+ }, [margin, parent, rect]);
+}
+const tablist_TabList = (0,external_wp_element_namespaceObject.forwardRef)(function TabList({
children,
...otherProps
}, ref) {
- const context = useTabsContext();
- const selectedId = context?.store.useState('selectedId');
- const indicatorPosition = useTrackElementOffset(context?.store.item(selectedId)?.element);
- const [animationEnabled, setAnimationEnabled] = (0,external_wp_element_namespaceObject.useState)(false);
- useOnValueUpdate(selectedId, ({
- previousValue
- }) => previousValue && setAnimationEnabled(true));
- if (!context) {
- true ? external_wp_warning_default()('`Tabs.TabList` must be wrapped in a `Tabs` component.') : 0;
- return null;
- }
+ var _useTabsContext;
const {
store
- } = context;
- const {
- activeId,
- selectOnMove
- } = store.useState();
- const {
- setActiveId
- } = store;
+ } = (_useTabsContext = useTabsContext()) !== null && _useTabsContext !== void 0 ? _useTabsContext : {};
+ const selectedId = useStoreState(store, 'selectedId');
+ const activeId = useStoreState(store, 'activeId');
+ const selectOnMove = useStoreState(store, 'selectOnMove');
+ const items = useStoreState(store, 'items');
+ const [parent, setParent] = (0,external_wp_element_namespaceObject.useState)();
+ const refs = (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, setParent]);
+ const selectedItem = store?.item(selectedId);
+ const renderedItems = useStoreState(store, 'renderedItems');
+ const selectedItemIndex = renderedItems && selectedItem ? renderedItems.indexOf(selectedItem) : -1;
+ // Use selectedItemIndex as a dependency to force recalculation when the
+ // selected item index changes (elements are swapped / added / removed).
+ const selectedRect = useTrackElementOffsetRect(selectedItem?.element, [selectedItemIndex]);
+
+ // Track overflow to show scroll hints.
+ const overflow = useTrackOverflow(parent, {
+ first: items?.at(0)?.element,
+ last: items?.at(-1)?.element
+ });
+
+ // Size, position, and animate the indicator.
+ useAnimatedOffsetRect(parent, selectedRect, {
+ prefix: 'selected',
+ dataAttribute: 'indicator-animated',
+ transitionEndFilter: event => event.pseudoElement === '::before',
+ roundRect: true
+ });
+
+ // Make sure selected tab is scrolled into view.
+ useScrollRectIntoView(parent, selectedRect);
const onBlur = () => {
if (!selectOnMove) {
return;
@@ -73680,38 +71974,42 @@
// that the selected tab will receive keyboard focus when tabbing back into
// the tablist.
if (selectedId !== activeId) {
- setActiveId(selectedId);
- }
- };
- return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tab_list_TabList, {
- ref: ref,
+ store?.setActiveId(selectedId);
+ }
+ };
+ if (!store) {
+ true ? external_wp_warning_default()('`Tabs.TabList` must be wrapped in a `Tabs` component.') : 0;
+ return null;
+ }
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledTabList, {
+ ref: refs,
store: store,
- render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TabListWrapper, {
- onTransitionEnd: event => {
- if (event.pseudoElement === '::after') {
- setAnimationEnabled(false);
- }
- }
- }),
+ render: props => {
+ var _props$tabIndex;
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
+ ...props,
+ // Fallback to -1 to prevent browsers from making the tablist
+ // tabbable when it is a scrolling container.
+ tabIndex: (_props$tabIndex = props.tabIndex) !== null && _props$tabIndex !== void 0 ? _props$tabIndex : -1
+ });
+ },
onBlur: onBlur,
+ "data-select-on-move": selectOnMove ? 'true' : 'false',
...otherProps,
- style: {
- '--indicator-left': `${indicatorPosition.left}px`,
- '--indicator-top': `${indicatorPosition.top}px`,
- '--indicator-width': `${indicatorPosition.width}px`,
- '--indicator-height': `${indicatorPosition.height}px`,
- ...otherProps.style
- },
- className: dist_clsx(animationEnabled ? 'is-animation-enabled' : '', otherProps.className),
+ className: dist_clsx(overflow.first && 'is-overflowing-first', overflow.last && 'is-overflowing-last', otherProps.className),
children: children
});
});
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tabs/tabpanel.js
-/**
- * WordPress dependencies
- */
-
+;// ./node_modules/@wordpress/components/build-module/tabs/tabpanel.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
/**
@@ -73729,6 +72027,7 @@
...otherProps
}, ref) {
const context = useTabsContext();
+ const selectedId = useStoreState(context?.store, 'selectedId');
if (!context) {
true ? external_wp_warning_default()('`Tabs.TabPanel` must be wrapped in a `Tabs` component.') : 0;
return null;
@@ -73738,7 +72037,6 @@
instanceId
} = context;
const instancedTabId = `${instanceId}-${tabId}`;
- const selectedId = store.useState(state => state.selectedId);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_TabPanel, {
ref: ref,
store: store
@@ -73754,150 +72052,80 @@
});
});
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tabs/index.js
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-
-
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
-
-
-
-
-
-function Tabs({
+;// ./node_modules/@wordpress/components/build-module/tabs/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+
+function externalToInternalTabId(externalId, instanceId) {
+ return externalId && `${instanceId}-${externalId}`;
+}
+function internalToExternalTabId(internalId, instanceId) {
+ return typeof internalId === 'string' ? internalId.replace(`${instanceId}-`, '') : internalId;
+}
+
+/**
+ * Tabs is a collection of React components that combine to render
+ * an [ARIA-compliant tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
+ *
+ * Tabs organizes content across different screens, data sets, and interactions.
+ * It has two sections: a list of tabs, and the view to show when a tab is chosen.
+ *
+ * `Tabs` itself is a wrapper component and context provider.
+ * It is responsible for managing the state of the tabs, and rendering one instance of the `Tabs.TabList` component and one or more instances of the `Tab.TabPanel` component.
+ */
+const Tabs = Object.assign(function Tabs({
selectOnMove = true,
defaultTabId,
orientation = 'horizontal',
onSelect,
children,
- selectedTabId
+ selectedTabId,
+ activeTabId,
+ defaultActiveTabId,
+ onActiveTabIdChange
}) {
const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(Tabs, 'tabs');
const store = useTabStore({
selectOnMove,
orientation,
- defaultSelectedId: defaultTabId && `${instanceId}-${defaultTabId}`,
- setSelectedId: selectedId => {
- const strippedDownId = typeof selectedId === 'string' ? selectedId.replace(`${instanceId}-`, '') : selectedId;
- onSelect?.(strippedDownId);
- },
- selectedId: selectedTabId && `${instanceId}-${selectedTabId}`
- });
- const isControlled = selectedTabId !== undefined;
+ defaultSelectedId: externalToInternalTabId(defaultTabId, instanceId),
+ setSelectedId: newSelectedId => {
+ onSelect?.(internalToExternalTabId(newSelectedId, instanceId));
+ },
+ selectedId: externalToInternalTabId(selectedTabId, instanceId),
+ defaultActiveId: externalToInternalTabId(defaultActiveTabId, instanceId),
+ setActiveId: newActiveId => {
+ onActiveTabIdChange?.(internalToExternalTabId(newActiveId, instanceId));
+ },
+ activeId: externalToInternalTabId(activeTabId, instanceId),
+ rtl: (0,external_wp_i18n_namespaceObject.isRTL)()
+ });
const {
items,
- selectedId,
activeId
- } = store.useState();
- const {
- setSelectedId,
+ } = useStoreState(store);
+ const {
setActiveId
} = store;
-
- // Keep track of whether tabs have been populated. This is used to prevent
- // certain effects from firing too early while tab data and relevant
- // variables are undefined during the initial render.
- const tabsHavePopulated = (0,external_wp_element_namespaceObject.useRef)(false);
- if (items.length > 0) {
- tabsHavePopulated.current = true;
- }
- const selectedTab = items.find(item => item.id === selectedId);
- const firstEnabledTab = items.find(item => {
- // Ariakit internally refers to disabled tabs as `dimmed`.
- return !item.dimmed;
- });
- const initialTab = items.find(item => item.id === `${instanceId}-${defaultTabId}`);
-
- // Handle selecting the initial tab.
- (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
- if (isControlled) {
- return;
- }
-
- // Wait for the denoted initial tab to be declared before making a
- // selection. This ensures that if a tab is declared lazily it can
- // still receive initial selection, as well as ensuring no tab is
- // selected if an invalid `defaultTabId` is provided.
- if (defaultTabId && !initialTab) {
- return;
- }
-
- // If the currently selected tab is missing (i.e. removed from the DOM),
- // fall back to the initial tab or the first enabled tab if there is
- // one. Otherwise, no tab should be selected.
- if (!items.find(item => item.id === selectedId)) {
- if (initialTab && !initialTab.dimmed) {
- setSelectedId(initialTab?.id);
- return;
- }
- if (firstEnabledTab) {
- setSelectedId(firstEnabledTab.id);
- } else if (tabsHavePopulated.current) {
- setSelectedId(null);
- }
- }
- }, [firstEnabledTab, initialTab, defaultTabId, isControlled, items, selectedId, setSelectedId]);
-
- // Handle the currently selected tab becoming disabled.
- (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
- if (!selectedTab?.dimmed) {
- return;
- }
-
- // In controlled mode, we trust that disabling tabs is done
- // intentionally, and don't select a new tab automatically.
- if (isControlled) {
- setSelectedId(null);
- return;
- }
-
- // If the currently selected tab becomes disabled, fall back to the
- // `defaultTabId` if possible. Otherwise select the first
- // enabled tab (if there is one).
- if (initialTab && !initialTab.dimmed) {
- setSelectedId(initialTab.id);
- return;
- }
- if (firstEnabledTab) {
- setSelectedId(firstEnabledTab.id);
- }
- }, [firstEnabledTab, initialTab, isControlled, selectedTab?.dimmed, setSelectedId]);
-
- // Clear `selectedId` if the active tab is removed from the DOM in controlled mode.
- (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
- if (!isControlled) {
- return;
- }
-
- // Once the tabs have populated, if the `selectedTabId` still can't be
- // found, clear the selection.
- if (tabsHavePopulated.current && !!selectedTabId && !selectedTab) {
- setSelectedId(null);
- }
- }, [isControlled, selectedTab, selectedTabId, setSelectedId]);
(0,external_wp_element_namespaceObject.useEffect)(() => {
- // If there is no active tab, fallback to place focus on the first enabled tab
- // so there is always an active element
- if (selectedTabId === null && !activeId && firstEnabledTab?.id) {
- setActiveId(firstEnabledTab.id);
- }
- }, [selectedTabId, activeId, firstEnabledTab?.id, setActiveId]);
- (0,external_wp_element_namespaceObject.useEffect)(() => {
- if (!isControlled) {
- return;
- }
requestAnimationFrame(() => {
const focusedElement = items?.[0]?.element?.ownerDocument.activeElement;
if (!focusedElement || !items.some(item => focusedElement === item.element)) {
@@ -73912,7 +72140,7 @@
setActiveId(focusedElement.id);
}
});
- }, [activeId, isControlled, items, setActiveId]);
+ }, [activeId, items, setActiveId]);
const contextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
store,
instanceId
@@ -73921,16 +72149,38 @@
value: contextValue,
children: children
});
-}
-Tabs.TabList = TabList;
-Tabs.Tab = tab_Tab;
-Tabs.TabPanel = tabpanel_TabPanel;
-Tabs.Context = TabsContext;
-/* harmony default export */ const tabs = (Tabs);
-
-;// CONCATENATED MODULE: external ["wp","privateApis"]
+}, {
+ /**
+ * Renders a single tab.
+ *
+ * The currently active tab receives default styling that can be
+ * overridden with CSS targeting `[aria-selected="true"]`.
+ */
+ Tab: Object.assign(tab_Tab, {
+ displayName: 'Tabs.Tab'
+ }),
+ /**
+ * A wrapper component for the `Tab` components.
+ *
+ * It is responsible for rendering the list of tabs.
+ */
+ TabList: Object.assign(tablist_TabList, {
+ displayName: 'Tabs.TabList'
+ }),
+ /**
+ * Renders the content to display for a single tab once that tab is selected.
+ */
+ TabPanel: Object.assign(tabpanel_TabPanel, {
+ displayName: 'Tabs.TabPanel'
+ }),
+ Context: Object.assign(TabsContext, {
+ displayName: 'Tabs.Context'
+ })
+});
+
+;// external ["wp","privateApis"]
const external_wp_privateApis_namespaceObject = window["wp"]["privateApis"];
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/lock-unlock.js
+;// ./node_modules/@wordpress/components/build-module/lock-unlock.js
/**
* WordPress dependencies
*/
@@ -73940,15 +72190,142 @@
unlock
} = (0,external_wp_privateApis_namespaceObject.__dangerousOptInToUnstableAPIsOnlyForCoreModules)('I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.', '@wordpress/components');
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/private-apis.js
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
+;// ./node_modules/@wordpress/icons/build-module/library/info.js
+/**
+ * WordPress dependencies
+ */
+
+
+const info = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
+ viewBox: "0 0 24 24",
+ xmlns: "http://www.w3.org/2000/svg",
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
+ fillRule: "evenodd",
+ clipRule: "evenodd",
+ d: "M5.5 12a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0ZM12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm.75 4v1.5h-1.5V8h1.5Zm0 8v-5h-1.5v5h1.5Z"
+ })
+});
+/* harmony default export */ const library_info = (info);
+
+;// ./node_modules/@wordpress/icons/build-module/library/published.js
+/**
+ * WordPress dependencies
+ */
+
+
+const published = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
+ xmlns: "http://www.w3.org/2000/svg",
+ viewBox: "0 0 24 24",
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
+ fillRule: "evenodd",
+ clipRule: "evenodd",
+ d: "M12 18.5a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13ZM4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm11.53-1.47-1.06-1.06L11 12.94l-1.47-1.47-1.06 1.06L11 15.06l4.53-4.53Z"
+ })
+});
+/* harmony default export */ const library_published = (published);
+
+;// ./node_modules/@wordpress/icons/build-module/library/caution.js
+/**
+ * WordPress dependencies
+ */
+
+
+const caution = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
+ viewBox: "0 0 24 24",
+ xmlns: "http://www.w3.org/2000/svg",
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
+ fillRule: "evenodd",
+ clipRule: "evenodd",
+ d: "M5.5 12a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0ZM12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-.75 12v-1.5h1.5V16h-1.5Zm0-8v5h1.5V8h-1.5Z"
+ })
+});
+/* harmony default export */ const library_caution = (caution);
+
+;// ./node_modules/@wordpress/icons/build-module/library/error.js
+/**
+ * WordPress dependencies
+ */
+
+
+const error = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
+ viewBox: "0 0 24 24",
+ xmlns: "http://www.w3.org/2000/svg",
+ children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
+ fillRule: "evenodd",
+ clipRule: "evenodd",
+ d: "M12.218 5.377a.25.25 0 0 0-.436 0l-7.29 12.96a.25.25 0 0 0 .218.373h14.58a.25.25 0 0 0 .218-.372l-7.29-12.96Zm-1.743-.735c.669-1.19 2.381-1.19 3.05 0l7.29 12.96a1.75 1.75 0 0 1-1.525 2.608H4.71a1.75 1.75 0 0 1-1.525-2.608l7.29-12.96ZM12.75 17.46h-1.5v-1.5h1.5v1.5Zm-1.5-3h1.5v-5h-1.5v5Z"
+ })
+});
+/* harmony default export */ const library_error = (error);
+
+;// ./node_modules/@wordpress/components/build-module/badge/index.js
+/**
+ * External dependencies
+ */
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+/**
+ * Returns an icon based on the badge context.
+ *
+ * @return The corresponding icon for the provided context.
+ */
+
+function contextBasedIcon(intent = 'default') {
+ switch (intent) {
+ case 'info':
+ return library_info;
+ case 'success':
+ return library_published;
+ case 'warning':
+ return library_caution;
+ case 'error':
+ return library_error;
+ default:
+ return null;
+ }
+}
+function Badge({
+ className,
+ intent = 'default',
+ children,
+ ...props
+}) {
+ const icon = contextBasedIcon(intent);
+ const hasIcon = !!icon;
+ return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("span", {
+ className: dist_clsx('components-badge', className, {
+ [`is-${intent}`]: intent,
+ 'has-icon': hasIcon
+ }),
+ ...props,
+ children: [hasIcon && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
+ icon: icon,
+ size: 16,
+ fill: "currentColor",
+ className: "components-badge__icon"
+ }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
+ className: "components-badge__content",
+ children: children
+ })]
+ });
+}
+/* harmony default export */ const badge = (Badge);
+
+;// ./node_modules/@wordpress/components/build-module/private-apis.js
+/**
+ * Internal dependencies
+ */
@@ -73960,29 +72337,17 @@
const privateApis = {};
lock(privateApis, {
- CompositeV2: Composite,
- CompositeGroupV2: CompositeGroup,
- CompositeItemV2: CompositeItem,
- CompositeRowV2: CompositeRow,
- useCompositeStoreV2: useCompositeStore,
- CustomSelectControl: CustomSelectControl,
__experimentalPopoverLegacyPositionToPlacement: positionToPlacement,
- createPrivateSlotFill: createPrivateSlotFill,
ComponentsContext: ComponentsContext,
- Tabs: tabs,
+ Tabs: Tabs,
Theme: theme,
- DropdownMenuV2: dropdown_menu_v2_DropdownMenu,
- DropdownMenuGroupV2: DropdownMenuGroup,
- DropdownMenuItemV2: DropdownMenuItem,
- DropdownMenuCheckboxItemV2: DropdownMenuCheckboxItem,
- DropdownMenuRadioItemV2: DropdownMenuRadioItem,
- DropdownMenuSeparatorV2: DropdownMenuSeparator,
- DropdownMenuItemLabelV2: DropdownMenuItemLabel,
- DropdownMenuItemHelpTextV2: DropdownMenuItemHelpText,
- kebabCase: kebabCase
-});
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/index.js
+ Menu: menu_Menu,
+ kebabCase: kebabCase,
+ withIgnoreIMEEvents: withIgnoreIMEEvents,
+ Badge: badge
+});
+
+;// ./node_modules/@wordpress/components/build-module/index.js
// Primitives.
@@ -74106,6 +72471,8 @@
+
+
// Higher-Order Components.