@wordpress/components 30.5.1-next.233ccab9b.0 → 30.6.0

package/build-module/context/context-connect.js

@@ -1,117 +1,62 @@
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-import warn from '@wordpress/warning';
-
-/**
- * Internal dependencies
- */
-import { CONNECT_STATIC_NAMESPACE } from './constants';
-import { getStyledClassNameFromKey } from './get-styled-class-name-from-key';
-/**
- * Forwards ref (React.ForwardRef) and "Connects" (or registers) a component
- * within the Context system under a specified namespace.
- *
- * @param Component The component to register into the Context system.
- * @param namespace The namespace to register the component under.
- * @return The connected WordPressComponent
- */
-export function contextConnect(Component, namespace) {
+import { forwardRef } from "@wordpress/element";
+import warn from "@wordpress/warning";
+import { CONNECT_STATIC_NAMESPACE } from "./constants";
+import { getStyledClassNameFromKey } from "./get-styled-class-name-from-key";
+function contextConnect(Component, namespace) {
   return _contextConnect(Component, namespace, {
     forwardsRef: true
   });
 }
-
-/**
- * "Connects" (or registers) a component within the Context system under a specified namespace.
- * Does not forward a ref.
- *
- * @param Component The component to register into the Context system.
- * @param namespace The namespace to register the component under.
- * @return The connected WordPressComponent
- */
-export function contextConnectWithoutRef(Component, namespace) {
+function contextConnectWithoutRef(Component, namespace) {
   return _contextConnect(Component, namespace);
 }
-
-// This is an (experimental) evolution of the initial connect() HOC.
-// The hope is that we can improve render performance by removing functional
-// component wrappers.
 function _contextConnect(Component, namespace, options) {
   const WrappedComponent = options?.forwardsRef ? forwardRef(Component) : Component;
-  if (typeof namespace === 'undefined') {
-    globalThis.SCRIPT_DEBUG === true ? warn('contextConnect: Please provide a namespace') : void 0;
+  if (typeof namespace === "undefined") {
+    globalThis.SCRIPT_DEBUG === true ? warn("contextConnect: Please provide a namespace") : void 0;
   }
-
-  // @ts-expect-error internal property
   let mergedNamespace = WrappedComponent[CONNECT_STATIC_NAMESPACE] || [namespace];
-
-  /**
-   * Consolidate (merge) namespaces before attaching it to the WrappedComponent.
-   */
   if (Array.isArray(namespace)) {
     mergedNamespace = [...mergedNamespace, ...namespace];
   }
-  if (typeof namespace === 'string') {
+  if (typeof namespace === "string") {
     mergedNamespace = [...mergedNamespace, namespace];
   }
-
-  // @ts-expect-error We can't rely on inferred types here because of the
-  // `as` prop polymorphism we're handling in https://github.com/WordPress/gutenberg/blob/4f3a11243c365f94892e479bff0b922ccc4ccda3/packages/components/src/context/wordpress-component.ts#L32-L33
   return Object.assign(WrappedComponent, {
     [CONNECT_STATIC_NAMESPACE]: [...new Set(mergedNamespace)],
     displayName: namespace,
     selector: `.${getStyledClassNameFromKey(namespace)}`
   });
 }
-
-/**
- * Attempts to retrieve the connected namespace from a component.
- *
- * @param Component The component to retrieve a namespace from.
- * @return The connected namespaces.
- */
-export function getConnectNamespace(Component) {
+function getConnectNamespace(Component) {
   if (!Component) {
     return [];
   }
   let namespaces = [];
-
-  // @ts-ignore internal property
   if (Component[CONNECT_STATIC_NAMESPACE]) {
-    // @ts-ignore internal property
     namespaces = Component[CONNECT_STATIC_NAMESPACE];
   }
-
-  // @ts-ignore
   if (Component.type && Component.type[CONNECT_STATIC_NAMESPACE]) {
-    // @ts-ignore
     namespaces = Component.type[CONNECT_STATIC_NAMESPACE];
   }
   return namespaces;
 }
-
-/**
- * Checks to see if a component is connected within the Context system.
- *
- * @param Component The component to retrieve a namespace from.
- * @param match     The namespace to check.
- */
-export function hasConnectNamespace(Component, match) {
+function hasConnectNamespace(Component, match) {
   if (!Component) {
     return false;
   }
-  if (typeof match === 'string') {
+  if (typeof match === "string") {
     return getConnectNamespace(Component).includes(match);
   }
   if (Array.isArray(match)) {
-    return match.some(result => getConnectNamespace(Component).includes(result));
+    return match.some((result) => getConnectNamespace(Component).includes(result));
   }
   return false;
 }
-//# sourceMappingURL=context-connect.js.map
+export {
+  contextConnect,
+  contextConnectWithoutRef,
+  getConnectNamespace,
+  hasConnectNamespace
+};
+//# sourceMappingURL=context-connect.js.map

package/build-module/context/context-connect.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["forwardRef","warn","CONNECT_STATIC_NAMESPACE","getStyledClassNameFromKey","contextConnect","Component","namespace","_contextConnect","forwardsRef","contextConnectWithoutRef","options","WrappedComponent","globalThis","SCRIPT_DEBUG","mergedNamespace","Array","isArray","Object","assign","Set","displayName","selector","getConnectNamespace","namespaces","type","hasConnectNamespace","match","includes","some","result"],"sources":["@wordpress/components/src/context/context-connect.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef, ReactElement, ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { CONNECT_STATIC_NAMESPACE } from './constants';\nimport { getStyledClassNameFromKey } from './get-styled-class-name-from-key';\nimport type { WordPressComponentFromProps } from '.';\n\ntype AcceptsTwoArgs<\n\tF extends ( ...args: any ) => any,\n\tErrorMessage = never,\n> = Parameters< F >[ 'length' ] extends 2 ? {} : ErrorMessage;\n\ntype ContextConnectOptions = {\n\tforwardsRef?: boolean;\n};\n\n/**\n * Forwards ref (React.ForwardRef) and \"Connects\" (or registers) a component\n * within the Context system under a specified namespace.\n *\n * @param Component The component to register into the Context system.\n * @param namespace The namespace to register the component under.\n * @return The connected WordPressComponent\n */\nexport function contextConnect<\n\tC extends ( props: any, ref: ForwardedRef< any > ) => JSX.Element | null,\n>(\n\tComponent: C &\n\t\tAcceptsTwoArgs<\n\t\t\tC,\n\t\t\t'Warning: Your component function does not take a ref as the second argument. Did you mean to use `contextConnectWithoutRef`?'\n\t\t>,\n\tnamespace: string\n) {\n\treturn _contextConnect( Component, namespace, { forwardsRef: true } );\n}\n\n/**\n * \"Connects\" (or registers) a component within the Context system under a specified namespace.\n * Does not forward a ref.\n *\n * @param Component The component to register into the Context system.\n * @param namespace The namespace to register the component under.\n * @return The connected WordPressComponent\n */\nexport function contextConnectWithoutRef< P >(\n\tComponent: ( props: P ) => JSX.Element | null,\n\tnamespace: string\n) {\n\treturn _contextConnect( Component, namespace );\n}\n\n// This is an (experimental) evolution of the initial connect() HOC.\n// The hope is that we can improve render performance by removing functional\n// component wrappers.\nfunction _contextConnect<\n\tC extends ( props: any, ref: ForwardedRef< any > ) => JSX.Element | null,\n\tO extends ContextConnectOptions,\n>(\n\tComponent: C,\n\tnamespace: string,\n\toptions?: O\n): WordPressComponentFromProps<\n\tParameters< C >[ 0 ],\n\tO[ 'forwardsRef' ] extends true ? true : false\n> {\n\tconst WrappedComponent = options?.forwardsRef\n\t\t? forwardRef< any, Parameters< C >[ 0 ] >( Component )\n\t\t: Component;\n\n\tif ( typeof namespace === 'undefined' ) {\n\t\twarn( 'contextConnect: Please provide a namespace' );\n\t}\n\n\t// @ts-expect-error internal property\n\tlet mergedNamespace = WrappedComponent[ CONNECT_STATIC_NAMESPACE ] || [\n\t\tnamespace,\n\t];\n\n\t/**\n\t * Consolidate (merge) namespaces before attaching it to the WrappedComponent.\n\t */\n\tif ( Array.isArray( namespace ) ) {\n\t\tmergedNamespace = [ ...mergedNamespace, ...namespace ];\n\t}\n\tif ( typeof namespace === 'string' ) {\n\t\tmergedNamespace = [ ...mergedNamespace, namespace ];\n\t}\n\n\t// @ts-expect-error We can't rely on inferred types here because of the\n\t// `as` prop polymorphism we're handling in https://github.com/WordPress/gutenberg/blob/4f3a11243c365f94892e479bff0b922ccc4ccda3/packages/components/src/context/wordpress-component.ts#L32-L33\n\treturn Object.assign( WrappedComponent, {\n\t\t[ CONNECT_STATIC_NAMESPACE ]: [ ...new Set( mergedNamespace ) ],\n\t\tdisplayName: namespace,\n\t\tselector: `.${ getStyledClassNameFromKey( namespace ) }`,\n\t} );\n}\n\n/**\n * Attempts to retrieve the connected namespace from a component.\n *\n * @param Component The component to retrieve a namespace from.\n * @return The connected namespaces.\n */\nexport function getConnectNamespace(\n\tComponent: ReactElement | number | string | undefined | {}\n): string[] {\n\tif ( ! Component ) {\n\t\treturn [];\n\t}\n\n\tlet namespaces = [];\n\n\t// @ts-ignore internal property\n\tif ( Component[ CONNECT_STATIC_NAMESPACE ] ) {\n\t\t// @ts-ignore internal property\n\t\tnamespaces = Component[ CONNECT_STATIC_NAMESPACE ];\n\t}\n\n\t// @ts-ignore\n\tif ( Component.type && Component.type[ CONNECT_STATIC_NAMESPACE ] ) {\n\t\t// @ts-ignore\n\t\tnamespaces = Component.type[ CONNECT_STATIC_NAMESPACE ];\n\t}\n\n\treturn namespaces;\n}\n\n/**\n * Checks to see if a component is connected within the Context system.\n *\n * @param Component The component to retrieve a namespace from.\n * @param match     The namespace to check.\n */\nexport function hasConnectNamespace(\n\tComponent: ReactNode,\n\tmatch: string[] | string\n): boolean {\n\tif ( ! Component ) {\n\t\treturn false;\n\t}\n\n\tif ( typeof match === 'string' ) {\n\t\treturn getConnectNamespace( Component ).includes( match );\n\t}\n\tif ( Array.isArray( match ) ) {\n\t\treturn match.some( ( result ) =>\n\t\t\tgetConnectNamespace( Component ).includes( result )\n\t\t);\n\t}\n\n\treturn false;\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,oBAAoB;AAC/C,OAAOC,IAAI,MAAM,oBAAoB;;AAErC;AACA;AACA;AACA,SAASC,wBAAwB,QAAQ,aAAa;AACtD,SAASC,yBAAyB,QAAQ,kCAAkC;AAY5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAcA,CAG7BC,SAIE,EACFC,SAAiB,EAChB;EACD,OAAOC,eAAe,CAAEF,SAAS,EAAEC,SAAS,EAAE;IAAEE,WAAW,EAAE;EAAK,CAAE,CAAC;AACtE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,wBAAwBA,CACvCJ,SAA6C,EAC7CC,SAAiB,EAChB;EACD,OAAOC,eAAe,CAAEF,SAAS,EAAEC,SAAU,CAAC;AAC/C;;AAEA;AACA;AACA;AACA,SAASC,eAAeA,CAIvBF,SAAY,EACZC,SAAiB,EACjBI,OAAW,EAIV;EACD,MAAMC,gBAAgB,GAAGD,OAAO,EAAEF,WAAW,GAC1CR,UAAU,CAA+BK,SAAU,CAAC,GACpDA,SAAS;EAEZ,IAAK,OAAOC,SAAS,KAAK,WAAW,EAAG;IACvCM,UAAA,CAAAC,YAAA,YAAAZ,IAAI,CAAE,4CAA6C,CAAC;EACrD;;EAEA;EACA,IAAIa,eAAe,GAAGH,gBAAgB,CAAET,wBAAwB,CAAE,IAAI,CACrEI,SAAS,CACT;;EAED;AACD;AACA;EACC,IAAKS,KAAK,CAACC,OAAO,CAAEV,SAAU,CAAC,EAAG;IACjCQ,eAAe,GAAG,CAAE,GAAGA,eAAe,EAAE,GAAGR,SAAS,CAAE;EACvD;EACA,IAAK,OAAOA,SAAS,KAAK,QAAQ,EAAG;IACpCQ,eAAe,GAAG,CAAE,GAAGA,eAAe,EAAER,SAAS,CAAE;EACpD;;EAEA;EACA;EACA,OAAOW,MAAM,CAACC,MAAM,CAAEP,gBAAgB,EAAE;IACvC,CAAET,wBAAwB,GAAI,CAAE,GAAG,IAAIiB,GAAG,CAAEL,eAAgB,CAAC,CAAE;IAC/DM,WAAW,EAAEd,SAAS;IACtBe,QAAQ,EAAE,IAAKlB,yBAAyB,CAAEG,SAAU,CAAC;EACtD,CAAE,CAAC;AACJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASgB,mBAAmBA,CAClCjB,SAA0D,EAC/C;EACX,IAAK,CAAEA,SAAS,EAAG;IAClB,OAAO,EAAE;EACV;EAEA,IAAIkB,UAAU,GAAG,EAAE;;EAEnB;EACA,IAAKlB,SAAS,CAAEH,wBAAwB,CAAE,EAAG;IAC5C;IACAqB,UAAU,GAAGlB,SAAS,CAAEH,wBAAwB,CAAE;EACnD;;EAEA;EACA,IAAKG,SAAS,CAACmB,IAAI,IAAInB,SAAS,CAACmB,IAAI,CAAEtB,wBAAwB,CAAE,EAAG;IACnE;IACAqB,UAAU,GAAGlB,SAAS,CAACmB,IAAI,CAAEtB,wBAAwB,CAAE;EACxD;EAEA,OAAOqB,UAAU;AAClB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,mBAAmBA,CAClCpB,SAAoB,EACpBqB,KAAwB,EACd;EACV,IAAK,CAAErB,SAAS,EAAG;IAClB,OAAO,KAAK;EACb;EAEA,IAAK,OAAOqB,KAAK,KAAK,QAAQ,EAAG;IAChC,OAAOJ,mBAAmB,CAAEjB,SAAU,CAAC,CAACsB,QAAQ,CAAED,KAAM,CAAC;EAC1D;EACA,IAAKX,KAAK,CAACC,OAAO,CAAEU,KAAM,CAAC,EAAG;IAC7B,OAAOA,KAAK,CAACE,IAAI,CAAIC,MAAM,IAC1BP,mBAAmB,CAAEjB,SAAU,CAAC,CAACsB,QAAQ,CAAEE,MAAO,CACnD,CAAC;EACF;EAEA,OAAO,KAAK;AACb","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/context/context-connect.ts"],
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { CONNECT_STATIC_NAMESPACE } from './constants';\nimport { getStyledClassNameFromKey } from './get-styled-class-name-from-key';\n/**\n * Forwards ref (React.ForwardRef) and \"Connects\" (or registers) a component\n * within the Context system under a specified namespace.\n *\n * @param Component The component to register into the Context system.\n * @param namespace The namespace to register the component under.\n * @return The connected WordPressComponent\n */\nexport function contextConnect(Component, namespace) {\n  return _contextConnect(Component, namespace, {\n    forwardsRef: true\n  });\n}\n\n/**\n * \"Connects\" (or registers) a component within the Context system under a specified namespace.\n * Does not forward a ref.\n *\n * @param Component The component to register into the Context system.\n * @param namespace The namespace to register the component under.\n * @return The connected WordPressComponent\n */\nexport function contextConnectWithoutRef(Component, namespace) {\n  return _contextConnect(Component, namespace);\n}\n\n// This is an (experimental) evolution of the initial connect() HOC.\n// The hope is that we can improve render performance by removing functional\n// component wrappers.\nfunction _contextConnect(Component, namespace, options) {\n  const WrappedComponent = options?.forwardsRef ? forwardRef(Component) : Component;\n  if (typeof namespace === 'undefined') {\n    globalThis.SCRIPT_DEBUG === true ? warn('contextConnect: Please provide a namespace') : void 0;\n  }\n\n  // @ts-expect-error internal property\n  let mergedNamespace = WrappedComponent[CONNECT_STATIC_NAMESPACE] || [namespace];\n\n  /**\n   * Consolidate (merge) namespaces before attaching it to the WrappedComponent.\n   */\n  if (Array.isArray(namespace)) {\n    mergedNamespace = [...mergedNamespace, ...namespace];\n  }\n  if (typeof namespace === 'string') {\n    mergedNamespace = [...mergedNamespace, namespace];\n  }\n\n  // @ts-expect-error We can't rely on inferred types here because of the\n  // `as` prop polymorphism we're handling in https://github.com/WordPress/gutenberg/blob/4f3a11243c365f94892e479bff0b922ccc4ccda3/packages/components/src/context/wordpress-component.ts#L32-L33\n  return Object.assign(WrappedComponent, {\n    [CONNECT_STATIC_NAMESPACE]: [...new Set(mergedNamespace)],\n    displayName: namespace,\n    selector: `.${getStyledClassNameFromKey(namespace)}`\n  });\n}\n\n/**\n * Attempts to retrieve the connected namespace from a component.\n *\n * @param Component The component to retrieve a namespace from.\n * @return The connected namespaces.\n */\nexport function getConnectNamespace(Component) {\n  if (!Component) {\n    return [];\n  }\n  let namespaces = [];\n\n  // @ts-ignore internal property\n  if (Component[CONNECT_STATIC_NAMESPACE]) {\n    // @ts-ignore internal property\n    namespaces = Component[CONNECT_STATIC_NAMESPACE];\n  }\n\n  // @ts-ignore\n  if (Component.type && Component.type[CONNECT_STATIC_NAMESPACE]) {\n    // @ts-ignore\n    namespaces = Component.type[CONNECT_STATIC_NAMESPACE];\n  }\n  return namespaces;\n}\n\n/**\n * Checks to see if a component is connected within the Context system.\n *\n * @param Component The component to retrieve a namespace from.\n * @param match     The namespace to check.\n */\nexport function hasConnectNamespace(Component, match) {\n  if (!Component) {\n    return false;\n  }\n  if (typeof match === 'string') {\n    return getConnectNamespace(Component).includes(match);\n  }\n  if (Array.isArray(match)) {\n    return match.some(result => getConnectNamespace(Component).includes(result));\n  }\n  return false;\n}"],
+  "mappings": "AAOA,SAAS,kBAAkB;AAC3B,OAAO,UAAU;AAKjB,SAAS,gCAAgC;AACzC,SAAS,iCAAiC;AASnC,SAAS,eAAe,WAAW,WAAW;AACnD,SAAO,gBAAgB,WAAW,WAAW;AAAA,IAC3C,aAAa;AAAA,EACf,CAAC;AACH;AAUO,SAAS,yBAAyB,WAAW,WAAW;AAC7D,SAAO,gBAAgB,WAAW,SAAS;AAC7C;AAKA,SAAS,gBAAgB,WAAW,WAAW,SAAS;AACtD,QAAM,mBAAmB,SAAS,cAAc,WAAW,SAAS,IAAI;AACxE,MAAI,OAAO,cAAc,aAAa;AACpC,eAAW,iBAAiB,OAAO,KAAK,4CAA4C,IAAI;AAAA,EAC1F;AAGA,MAAI,kBAAkB,iBAAiB,wBAAwB,KAAK,CAAC,SAAS;AAK9E,MAAI,MAAM,QAAQ,SAAS,GAAG;AAC5B,sBAAkB,CAAC,GAAG,iBAAiB,GAAG,SAAS;AAAA,EACrD;AACA,MAAI,OAAO,cAAc,UAAU;AACjC,sBAAkB,CAAC,GAAG,iBAAiB,SAAS;AAAA,EAClD;AAIA,SAAO,OAAO,OAAO,kBAAkB;AAAA,IACrC,CAAC,wBAAwB,GAAG,CAAC,GAAG,IAAI,IAAI,eAAe,CAAC;AAAA,IACxD,aAAa;AAAA,IACb,UAAU,IAAI,0BAA0B,SAAS,CAAC;AAAA,EACpD,CAAC;AACH;AAQO,SAAS,oBAAoB,WAAW;AAC7C,MAAI,CAAC,WAAW;AACd,WAAO,CAAC;AAAA,EACV;AACA,MAAI,aAAa,CAAC;AAGlB,MAAI,UAAU,wBAAwB,GAAG;AAEvC,iBAAa,UAAU,wBAAwB;AAAA,EACjD;AAGA,MAAI,UAAU,QAAQ,UAAU,KAAK,wBAAwB,GAAG;AAE9D,iBAAa,UAAU,KAAK,wBAAwB;AAAA,EACtD;AACA,SAAO;AACT;AAQO,SAAS,oBAAoB,WAAW,OAAO;AACpD,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AACA,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO,oBAAoB,SAAS,EAAE,SAAS,KAAK;AAAA,EACtD;AACA,MAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,WAAO,MAAM,KAAK,YAAU,oBAAoB,SAAS,EAAE,SAAS,MAAM,CAAC;AAAA,EAC7E;AACA,SAAO;AACT;",
+  "names": []
+}

package/build-module/context/context-system-provider.js

@@ -1,34 +1,16 @@
-/**
- * External dependencies
- */
-import deepmerge from 'deepmerge';
-import fastDeepEqual from 'fast-deep-equal/es6';
-import { isPlainObject } from 'is-plain-object';
-
-/**
- * WordPress dependencies
- */
-import { createContext, useContext, useRef, useMemo, memo } from '@wordpress/element';
-import warn from '@wordpress/warning';
-
-/**
- * Internal dependencies
- */
-import { useUpdateEffect } from '../utils';
+import deepmerge from "deepmerge";
+import fastDeepEqual from "fast-deep-equal/es6";
+import { isPlainObject } from "is-plain-object";
+import { createContext, useContext, useRef, useMemo, memo } from "@wordpress/element";
+import warn from "@wordpress/warning";
+import { useUpdateEffect } from "../utils";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const ComponentsContext = createContext(/** @type {Record<string, any>} */{});
-ComponentsContext.displayName = 'ComponentsContext';
-export const useComponentsContext = () => useContext(ComponentsContext);
-
-/**
- * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.
- *
- * Note: This function will warn if it detects an un-memoized `value`
- *
- * @param {Object}              props
- * @param {Record<string, any>} props.value
- * @return {Record<string, any>} The consolidated value.
- */
+const ComponentsContext = createContext(
+  /** @type {Record<string, any>} */
+  {}
+);
+ComponentsContext.displayName = "ComponentsContext";
+const useComponentsContext = () => useContext(ComponentsContext);
 function useContextSystemBridge({
   value
 }) {
@@ -36,52 +18,20 @@ function useContextSystemBridge({
   const valueRef = useRef(value);
   useUpdateEffect(() => {
     if (
-    // Objects are equivalent.
-    fastDeepEqual(valueRef.current, value) &&
-    // But not the same reference.
-    valueRef.current !== value) {
+      // Objects are equivalent.
+      fastDeepEqual(valueRef.current, value) && // But not the same reference.
+      valueRef.current !== value
+    ) {
       globalThis.SCRIPT_DEBUG === true ? warn(`Please memoize your context: ${JSON.stringify(value)}`) : void 0;
     }
   }, [value]);
-
-  // `parentContext` will always be memoized (i.e., the result of this hook itself)
-  // or the default value from when the `ComponentsContext` was originally
-  // initialized (which will never change, it's a static variable)
-  // so this memoization will prevent `deepmerge()` from rerunning unless
-  // the references to `value` change OR the `parentContext` has an actual material change
-  // (because again, it's guaranteed to be memoized or a static reference to the empty object
-  // so we know that the only changes for `parentContext` are material ones... i.e., why we
-  // don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only
-  // need to bother with the `value`). The `useUpdateEffect` above will ensure that we are
-  // correctly warning when the `value` isn't being properly memoized. All of that to say
-  // that this should be super safe to assume that `useMemo` will only run on actual
-  // changes to the two dependencies, therefore saving us calls to `deepmerge()`!
   const config = useMemo(() => {
-    // Deep clone `parentContext` to avoid mutating it later.
     return deepmerge(parentContext !== null && parentContext !== void 0 ? parentContext : {}, value !== null && value !== void 0 ? value : {}, {
       isMergeableObject: isPlainObject
     });
   }, [parentContext, value]);
   return config;
 }
-
-/**
- * A Provider component that can modify props for connected components within
- * the Context system.
- *
- * @example
- * ```jsx
- * <ContextSystemProvider value={{ Button: { size: 'small' }}}>
- *   <Button>...</Button>
- * </ContextSystemProvider>
- * ```
- *
- * @template {Record<string, any>} T
- * @param {Object}                    options
- * @param {import('react').ReactNode} options.children Children to render.
- * @param {T}                         options.value    Props to render into connected components.
- * @return {JSX.Element} A Provider wrapped component.
- */
 const BaseContextSystemProvider = ({
   children,
   value
@@ -89,10 +39,15 @@ const BaseContextSystemProvider = ({
   const contextValue = useContextSystemBridge({
     value
   });
-  return /*#__PURE__*/_jsx(ComponentsContext.Provider, {
+  return /* @__PURE__ */ _jsx(ComponentsContext.Provider, {
     value: contextValue,
-    children: children
+    children
   });
 };
-export const ContextSystemProvider = memo(BaseContextSystemProvider);
-//# sourceMappingURL=context-system-provider.js.map
+const ContextSystemProvider = memo(BaseContextSystemProvider);
+export {
+  ComponentsContext,
+  ContextSystemProvider,
+  useComponentsContext
+};
+//# sourceMappingURL=context-system-provider.js.map

package/build-module/context/context-system-provider.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["deepmerge","fastDeepEqual","isPlainObject","createContext","useContext","useRef","useMemo","memo","warn","useUpdateEffect","jsx","_jsx","ComponentsContext","displayName","useComponentsContext","useContextSystemBridge","value","parentContext","valueRef","current","globalThis","SCRIPT_DEBUG","JSON","stringify","config","isMergeableObject","BaseContextSystemProvider","children","contextValue","Provider","ContextSystemProvider"],"sources":["@wordpress/components/src/context/context-system-provider.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport deepmerge from 'deepmerge';\nimport fastDeepEqual from 'fast-deep-equal/es6';\nimport { isPlainObject } from 'is-plain-object';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreateContext,\n\tuseContext,\n\tuseRef,\n\tuseMemo,\n\tmemo,\n} from '@wordpress/element';\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { useUpdateEffect } from '../utils';\n\nexport const ComponentsContext = createContext(\n\t/** @type {Record<string, any>} */ ( {} )\n);\nComponentsContext.displayName = 'ComponentsContext';\n\nexport const useComponentsContext = () => useContext( ComponentsContext );\n\n/**\n * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.\n *\n * Note: This function will warn if it detects an un-memoized `value`\n *\n * @param {Object}              props\n * @param {Record<string, any>} props.value\n * @return {Record<string, any>} The consolidated value.\n */\nfunction useContextSystemBridge( { value } ) {\n\tconst parentContext = useComponentsContext();\n\n\tconst valueRef = useRef( value );\n\n\tuseUpdateEffect( () => {\n\t\tif (\n\t\t\t// Objects are equivalent.\n\t\t\tfastDeepEqual( valueRef.current, value ) &&\n\t\t\t// But not the same reference.\n\t\t\tvalueRef.current !== value\n\t\t) {\n\t\t\twarn( `Please memoize your context: ${ JSON.stringify( value ) }` );\n\t\t}\n\t}, [ value ] );\n\n\t// `parentContext` will always be memoized (i.e., the result of this hook itself)\n\t// or the default value from when the `ComponentsContext` was originally\n\t// initialized (which will never change, it's a static variable)\n\t// so this memoization will prevent `deepmerge()` from rerunning unless\n\t// the references to `value` change OR the `parentContext` has an actual material change\n\t// (because again, it's guaranteed to be memoized or a static reference to the empty object\n\t// so we know that the only changes for `parentContext` are material ones... i.e., why we\n\t// don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only\n\t// need to bother with the `value`). The `useUpdateEffect` above will ensure that we are\n\t// correctly warning when the `value` isn't being properly memoized. All of that to say\n\t// that this should be super safe to assume that `useMemo` will only run on actual\n\t// changes to the two dependencies, therefore saving us calls to `deepmerge()`!\n\tconst config = useMemo( () => {\n\t\t// Deep clone `parentContext` to avoid mutating it later.\n\t\treturn deepmerge( parentContext ?? {}, value ?? {}, {\n\t\t\tisMergeableObject: isPlainObject,\n\t\t} );\n\t}, [ parentContext, value ] );\n\n\treturn config;\n}\n\n/**\n * A Provider component that can modify props for connected components within\n * the Context system.\n *\n * @example\n * ```jsx\n * <ContextSystemProvider value={{ Button: { size: 'small' }}}>\n *   <Button>...</Button>\n * </ContextSystemProvider>\n * ```\n *\n * @template {Record<string, any>} T\n * @param {Object}                    options\n * @param {import('react').ReactNode} options.children Children to render.\n * @param {T}                         options.value    Props to render into connected components.\n * @return {JSX.Element} A Provider wrapped component.\n */\nconst BaseContextSystemProvider = ( { children, value } ) => {\n\tconst contextValue = useContextSystemBridge( { value } );\n\n\treturn (\n\t\t<ComponentsContext.Provider value={ contextValue }>\n\t\t\t{ children }\n\t\t</ComponentsContext.Provider>\n\t);\n};\n\nexport const ContextSystemProvider = memo( BaseContextSystemProvider );\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,SAAS,MAAM,WAAW;AACjC,OAAOC,aAAa,MAAM,qBAAqB;AAC/C,SAASC,aAAa,QAAQ,iBAAiB;;AAE/C;AACA;AACA;AACA,SACCC,aAAa,EACbC,UAAU,EACVC,MAAM,EACNC,OAAO,EACPC,IAAI,QACE,oBAAoB;AAC3B,OAAOC,IAAI,MAAM,oBAAoB;;AAErC;AACA;AACA;AACA,SAASC,eAAe,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE3C,OAAO,MAAMC,iBAAiB,GAAGT,aAAa,CAC7C,kCAAqC,CAAC,CACvC,CAAC;AACDS,iBAAiB,CAACC,WAAW,GAAG,mBAAmB;AAEnD,OAAO,MAAMC,oBAAoB,GAAGA,CAAA,KAAMV,UAAU,CAAEQ,iBAAkB,CAAC;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,sBAAsBA,CAAE;EAAEC;AAAM,CAAC,EAAG;EAC5C,MAAMC,aAAa,GAAGH,oBAAoB,CAAC,CAAC;EAE5C,MAAMI,QAAQ,GAAGb,MAAM,CAAEW,KAAM,CAAC;EAEhCP,eAAe,CAAE,MAAM;IACtB;IACC;IACAR,aAAa,CAAEiB,QAAQ,CAACC,OAAO,EAAEH,KAAM,CAAC;IACxC;IACAE,QAAQ,CAACC,OAAO,KAAKH,KAAK,EACzB;MACDI,UAAA,CAAAC,YAAA,YAAAb,IAAI,CAAE,gCAAiCc,IAAI,CAACC,SAAS,CAAEP,KAAM,CAAC,EAAI,CAAC;IACpE;EACD,CAAC,EAAE,CAAEA,KAAK,CAAG,CAAC;;EAEd;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAMQ,MAAM,GAAGlB,OAAO,CAAE,MAAM;IAC7B;IACA,OAAON,SAAS,CAAEiB,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAI,CAAC,CAAC,EAAED,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,EAAE;MACnDS,iBAAiB,EAAEvB;IACpB,CAAE,CAAC;EACJ,CAAC,EAAE,CAAEe,aAAa,EAAED,KAAK,CAAG,CAAC;EAE7B,OAAOQ,MAAM;AACd;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAME,yBAAyB,GAAGA,CAAE;EAAEC,QAAQ;EAAEX;AAAM,CAAC,KAAM;EAC5D,MAAMY,YAAY,GAAGb,sBAAsB,CAAE;IAAEC;EAAM,CAAE,CAAC;EAExD,oBACCL,IAAA,CAACC,iBAAiB,CAACiB,QAAQ;IAACb,KAAK,EAAGY,YAAc;IAAAD,QAAA,EAC/CA;EAAQ,CACiB,CAAC;AAE/B,CAAC;AAED,OAAO,MAAMG,qBAAqB,GAAGvB,IAAI,CAAEmB,yBAA0B,CAAC","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/context/context-system-provider.js"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport deepmerge from 'deepmerge';\nimport fastDeepEqual from 'fast-deep-equal/es6';\nimport { isPlainObject } from 'is-plain-object';\n\n/**\n * WordPress dependencies\n */\nimport { createContext, useContext, useRef, useMemo, memo } from '@wordpress/element';\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { useUpdateEffect } from '../utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const ComponentsContext = createContext(/** @type {Record<string, any>} */{});\nComponentsContext.displayName = 'ComponentsContext';\nexport const useComponentsContext = () => useContext(ComponentsContext);\n\n/**\n * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.\n *\n * Note: This function will warn if it detects an un-memoized `value`\n *\n * @param {Object}              props\n * @param {Record<string, any>} props.value\n * @return {Record<string, any>} The consolidated value.\n */\nfunction useContextSystemBridge({\n  value\n}) {\n  const parentContext = useComponentsContext();\n  const valueRef = useRef(value);\n  useUpdateEffect(() => {\n    if (\n    // Objects are equivalent.\n    fastDeepEqual(valueRef.current, value) &&\n    // But not the same reference.\n    valueRef.current !== value) {\n      globalThis.SCRIPT_DEBUG === true ? warn(`Please memoize your context: ${JSON.stringify(value)}`) : void 0;\n    }\n  }, [value]);\n\n  // `parentContext` will always be memoized (i.e., the result of this hook itself)\n  // or the default value from when the `ComponentsContext` was originally\n  // initialized (which will never change, it's a static variable)\n  // so this memoization will prevent `deepmerge()` from rerunning unless\n  // the references to `value` change OR the `parentContext` has an actual material change\n  // (because again, it's guaranteed to be memoized or a static reference to the empty object\n  // so we know that the only changes for `parentContext` are material ones... i.e., why we\n  // don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only\n  // need to bother with the `value`). The `useUpdateEffect` above will ensure that we are\n  // correctly warning when the `value` isn't being properly memoized. All of that to say\n  // that this should be super safe to assume that `useMemo` will only run on actual\n  // changes to the two dependencies, therefore saving us calls to `deepmerge()`!\n  const config = useMemo(() => {\n    // Deep clone `parentContext` to avoid mutating it later.\n    return deepmerge(parentContext !== null && parentContext !== void 0 ? parentContext : {}, value !== null && value !== void 0 ? value : {}, {\n      isMergeableObject: isPlainObject\n    });\n  }, [parentContext, value]);\n  return config;\n}\n\n/**\n * A Provider component that can modify props for connected components within\n * the Context system.\n *\n * @example\n * ```jsx\n * <ContextSystemProvider value={{ Button: { size: 'small' }}}>\n *   <Button>...</Button>\n * </ContextSystemProvider>\n * ```\n *\n * @template {Record<string, any>} T\n * @param {Object}                    options\n * @param {import('react').ReactNode} options.children Children to render.\n * @param {T}                         options.value    Props to render into connected components.\n * @return {JSX.Element} A Provider wrapped component.\n */\nconst BaseContextSystemProvider = ({\n  children,\n  value\n}) => {\n  const contextValue = useContextSystemBridge({\n    value\n  });\n  return /*#__PURE__*/_jsx(ComponentsContext.Provider, {\n    value: contextValue,\n    children: children\n  });\n};\nexport const ContextSystemProvider = memo(BaseContextSystemProvider);"],
+  "mappings": "AAGA,OAAO,eAAe;AACtB,OAAO,mBAAmB;AAC1B,SAAS,qBAAqB;AAK9B,SAAS,eAAe,YAAY,QAAQ,SAAS,YAAY;AACjE,OAAO,UAAU;AAKjB,SAAS,uBAAuB;AAChC,SAAS,OAAO,YAAY;AACrB,MAAM,oBAAoB;AAAA;AAAA,EAAgD,CAAC;AAAC;AACnF,kBAAkB,cAAc;AACzB,MAAM,uBAAuB,MAAM,WAAW,iBAAiB;AAWtE,SAAS,uBAAuB;AAAA,EAC9B;AACF,GAAG;AACD,QAAM,gBAAgB,qBAAqB;AAC3C,QAAM,WAAW,OAAO,KAAK;AAC7B,kBAAgB,MAAM;AACpB;AAAA;AAAA,MAEA,cAAc,SAAS,SAAS,KAAK;AAAA,MAErC,SAAS,YAAY;AAAA,MAAO;AAC1B,iBAAW,iBAAiB,OAAO,KAAK,gCAAgC,KAAK,UAAU,KAAK,CAAC,EAAE,IAAI;AAAA,IACrG;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAcV,QAAM,SAAS,QAAQ,MAAM;AAE3B,WAAO,UAAU,kBAAkB,QAAQ,kBAAkB,SAAS,gBAAgB,CAAC,GAAG,UAAU,QAAQ,UAAU,SAAS,QAAQ,CAAC,GAAG;AAAA,MACzI,mBAAmB;AAAA,IACrB,CAAC;AAAA,EACH,GAAG,CAAC,eAAe,KAAK,CAAC;AACzB,SAAO;AACT;AAmBA,MAAM,4BAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,uBAAuB;AAAA,IAC1C;AAAA,EACF,CAAC;AACD,SAAoB,qBAAK,kBAAkB,UAAU;AAAA,IACnD,OAAO;AAAA,IACP;AAAA,EACF,CAAC;AACH;AACO,MAAM,wBAAwB,KAAK,yBAAyB;",
+  "names": []
+}

package/build-module/context/get-styled-class-name-from-key.js

@@ -1,18 +1,11 @@
-/**
- * External dependencies
- */
-import { paramCase as kebabCase } from 'change-case';
-import memoize from 'memize';
-
-/**
- * Generates the connected component CSS className based on the namespace.
- *
- * @param namespace The name of the connected component.
- * @return The generated CSS className.
- */
+import { paramCase as kebabCase } from "change-case";
+import memoize from "memize";
 function getStyledClassName(namespace) {
   const kebab = kebabCase(namespace);
   return `components-${kebab}`;
 }
-export const getStyledClassNameFromKey = memoize(getStyledClassName);
-//# sourceMappingURL=get-styled-class-name-from-key.js.map
+const getStyledClassNameFromKey = memoize(getStyledClassName);
+export {
+  getStyledClassNameFromKey
+};
+//# sourceMappingURL=get-styled-class-name-from-key.js.map

package/build-module/context/get-styled-class-name-from-key.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["paramCase","kebabCase","memoize","getStyledClassName","namespace","kebab","getStyledClassNameFromKey"],"sources":["@wordpress/components/src/context/get-styled-class-name-from-key.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { paramCase as kebabCase } from 'change-case';\nimport memoize from 'memize';\n\n/**\n * Generates the connected component CSS className based on the namespace.\n *\n * @param namespace The name of the connected component.\n * @return The generated CSS className.\n */\nfunction getStyledClassName( namespace: string ): string {\n\tconst kebab = kebabCase( namespace );\n\treturn `components-${ kebab }`;\n}\n\nexport const getStyledClassNameFromKey = memoize( getStyledClassName );\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,IAAIC,SAAS,QAAQ,aAAa;AACpD,OAAOC,OAAO,MAAM,QAAQ;;AAE5B;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,kBAAkBA,CAAEC,SAAiB,EAAW;EACxD,MAAMC,KAAK,GAAGJ,SAAS,CAAEG,SAAU,CAAC;EACpC,OAAO,cAAeC,KAAK,EAAG;AAC/B;AAEA,OAAO,MAAMC,yBAAyB,GAAGJ,OAAO,CAAEC,kBAAmB,CAAC","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/context/get-styled-class-name-from-key.ts"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { paramCase as kebabCase } from 'change-case';\nimport memoize from 'memize';\n\n/**\n * Generates the connected component CSS className based on the namespace.\n *\n * @param namespace The name of the connected component.\n * @return The generated CSS className.\n */\nfunction getStyledClassName(namespace) {\n  const kebab = kebabCase(namespace);\n  return `components-${kebab}`;\n}\nexport const getStyledClassNameFromKey = memoize(getStyledClassName);"],
+  "mappings": "AAGA,SAAS,aAAa,iBAAiB;AACvC,OAAO,aAAa;AAQpB,SAAS,mBAAmB,WAAW;AACrC,QAAM,QAAQ,UAAU,SAAS;AACjC,SAAO,cAAc,KAAK;AAC5B;AACO,MAAM,4BAA4B,QAAQ,kBAAkB;",
+  "names": []
+}

package/build-module/context/index.js

@@ -1,5 +1,14 @@
-export { ContextSystemProvider, useComponentsContext } from './context-system-provider';
-export { contextConnect, contextConnectWithoutRef, hasConnectNamespace, getConnectNamespace } from './context-connect';
-export { useContextSystem } from './use-context-system';
-export * from './wordpress-component';
-//# sourceMappingURL=index.js.map
+import { ContextSystemProvider, useComponentsContext } from "./context-system-provider";
+import { contextConnect, contextConnectWithoutRef, hasConnectNamespace, getConnectNamespace } from "./context-connect";
+import { useContextSystem } from "./use-context-system";
+export * from "./wordpress-component";
+export {
+  ContextSystemProvider,
+  contextConnect,
+  contextConnectWithoutRef,
+  getConnectNamespace,
+  hasConnectNamespace,
+  useComponentsContext,
+  useContextSystem
+};
+//# sourceMappingURL=index.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["ContextSystemProvider","useComponentsContext","contextConnect","contextConnectWithoutRef","hasConnectNamespace","getConnectNamespace","useContextSystem"],"sources":["@wordpress/components/src/context/index.ts"],"sourcesContent":["export {\n\tContextSystemProvider,\n\tuseComponentsContext,\n} from './context-system-provider';\nexport {\n\tcontextConnect,\n\tcontextConnectWithoutRef,\n\thasConnectNamespace,\n\tgetConnectNamespace,\n} from './context-connect';\nexport { useContextSystem } from './use-context-system';\nexport * from './wordpress-component';\n"],"mappings":"AAAA,SACCA,qBAAqB,EACrBC,oBAAoB,QACd,2BAA2B;AAClC,SACCC,cAAc,EACdC,wBAAwB,EACxBC,mBAAmB,EACnBC,mBAAmB,QACb,mBAAmB;AAC1B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,cAAc,uBAAuB","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/context/index.ts"],
+  "sourcesContent": ["export { ContextSystemProvider, useComponentsContext } from './context-system-provider';\nexport { contextConnect, contextConnectWithoutRef, hasConnectNamespace, getConnectNamespace } from './context-connect';\nexport { useContextSystem } from './use-context-system';\nexport * from './wordpress-component';"],
+  "mappings": "AAAA,SAAS,uBAAuB,4BAA4B;AAC5D,SAAS,gBAAgB,0BAA0B,qBAAqB,2BAA2B;AACnG,SAAS,wBAAwB;AACjC,cAAc;",
+  "names": []
+}

package/build-module/context/use-context-system.js

@@ -1,46 +1,18 @@
-/**
- * WordPress dependencies
- */
-import warn from '@wordpress/warning';
-
-/**
- * Internal dependencies
- */
-import { useComponentsContext } from './context-system-provider';
-import { getNamespace, getConnectedNamespace } from './utils';
-import { getStyledClassNameFromKey } from './get-styled-class-name-from-key';
-import { useCx } from '../utils/hooks/use-cx';
-
-/**
- * @template TProps
- * @typedef {TProps & { className: string }} ConnectedProps
- */
-
-/**
- * Custom hook that derives registered props from the Context system.
- * These derived props are then consolidated with incoming component props.
- *
- * @template {{ className?: string }} P
- * @param {P}      props     Incoming props from the component.
- * @param {string} namespace The namespace to register and to derive context props from.
- * @return {ConnectedProps<P>} The connected props.
- */
-export function useContextSystem(props, namespace) {
+import warn from "@wordpress/warning";
+import { useComponentsContext } from "./context-system-provider";
+import { getNamespace, getConnectedNamespace } from "./utils";
+import { getStyledClassNameFromKey } from "./get-styled-class-name-from-key";
+import { useCx } from "../utils/hooks/use-cx";
+function useContextSystem(props, namespace) {
   const contextSystemProps = useComponentsContext();
-  if (typeof namespace === 'undefined') {
-    globalThis.SCRIPT_DEBUG === true ? warn('useContextSystem: Please provide a namespace') : void 0;
+  if (typeof namespace === "undefined") {
+    globalThis.SCRIPT_DEBUG === true ? warn("useContextSystem: Please provide a namespace") : void 0;
   }
   const contextProps = contextSystemProps?.[namespace] || {};
-
-  /* eslint-disable jsdoc/no-undefined-types */
-  /** @type {ConnectedProps<P>} */
-  // @ts-ignore We fill in the missing properties below
   const finalComponentProps = {
     ...getConnectedNamespace(),
     ...getNamespace(namespace)
   };
-  /* eslint-enable jsdoc/no-undefined-types */
-
   const {
     _overrides: overrideProps,
     ...otherContextProps
@@ -48,25 +20,20 @@ export function useContextSystem(props, namespace) {
   const initialMergedProps = Object.entries(otherContextProps).length ? Object.assign({}, otherContextProps, props) : props;
   const cx = useCx();
   const classes = cx(getStyledClassNameFromKey(namespace), props.className);
-
-  // Provides the ability to customize the render of the component.
-  const rendered = typeof initialMergedProps.renderChildren === 'function' ? initialMergedProps.renderChildren(initialMergedProps) : initialMergedProps.children;
+  const rendered = typeof initialMergedProps.renderChildren === "function" ? initialMergedProps.renderChildren(initialMergedProps) : initialMergedProps.children;
   for (const key in initialMergedProps) {
-    // @ts-ignore filling in missing props
     finalComponentProps[key] = initialMergedProps[key];
   }
   for (const key in overrideProps) {
-    // @ts-ignore filling in missing props
     finalComponentProps[key] = overrideProps[key];
   }
-
-  // Setting an `undefined` explicitly can cause unintended overwrites
-  // when a `cloneElement()` is involved.
-  if (rendered !== undefined) {
-    // @ts-ignore
+  if (rendered !== void 0) {
     finalComponentProps.children = rendered;
   }
   finalComponentProps.className = classes;
   return finalComponentProps;
 }
-//# sourceMappingURL=use-context-system.js.map
+export {
+  useContextSystem
+};
+//# sourceMappingURL=use-context-system.js.map

package/build-module/context/use-context-system.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["warn","useComponentsContext","getNamespace","getConnectedNamespace","getStyledClassNameFromKey","useCx","useContextSystem","props","namespace","contextSystemProps","globalThis","SCRIPT_DEBUG","contextProps","finalComponentProps","_overrides","overrideProps","otherContextProps","initialMergedProps","Object","entries","length","assign","cx","classes","className","rendered","renderChildren","children","key","undefined"],"sources":["@wordpress/components/src/context/use-context-system.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { useComponentsContext } from './context-system-provider';\nimport { getNamespace, getConnectedNamespace } from './utils';\nimport { getStyledClassNameFromKey } from './get-styled-class-name-from-key';\nimport { useCx } from '../utils/hooks/use-cx';\n\n/**\n * @template TProps\n * @typedef {TProps & { className: string }} ConnectedProps\n */\n\n/**\n * Custom hook that derives registered props from the Context system.\n * These derived props are then consolidated with incoming component props.\n *\n * @template {{ className?: string }} P\n * @param {P}      props     Incoming props from the component.\n * @param {string} namespace The namespace to register and to derive context props from.\n * @return {ConnectedProps<P>} The connected props.\n */\nexport function useContextSystem( props, namespace ) {\n\tconst contextSystemProps = useComponentsContext();\n\tif ( typeof namespace === 'undefined' ) {\n\t\twarn( 'useContextSystem: Please provide a namespace' );\n\t}\n\n\tconst contextProps = contextSystemProps?.[ namespace ] || {};\n\n\t/* eslint-disable jsdoc/no-undefined-types */\n\t/** @type {ConnectedProps<P>} */\n\t// @ts-ignore We fill in the missing properties below\n\tconst finalComponentProps = {\n\t\t...getConnectedNamespace(),\n\t\t...getNamespace( namespace ),\n\t};\n\t/* eslint-enable jsdoc/no-undefined-types */\n\n\tconst { _overrides: overrideProps, ...otherContextProps } = contextProps;\n\n\tconst initialMergedProps = Object.entries( otherContextProps ).length\n\t\t? Object.assign( {}, otherContextProps, props )\n\t\t: props;\n\n\tconst cx = useCx();\n\n\tconst classes = cx(\n\t\tgetStyledClassNameFromKey( namespace ),\n\t\tprops.className\n\t);\n\n\t// Provides the ability to customize the render of the component.\n\tconst rendered =\n\t\ttypeof initialMergedProps.renderChildren === 'function'\n\t\t\t? initialMergedProps.renderChildren( initialMergedProps )\n\t\t\t: initialMergedProps.children;\n\n\tfor ( const key in initialMergedProps ) {\n\t\t// @ts-ignore filling in missing props\n\t\tfinalComponentProps[ key ] = initialMergedProps[ key ];\n\t}\n\n\tfor ( const key in overrideProps ) {\n\t\t// @ts-ignore filling in missing props\n\t\tfinalComponentProps[ key ] = overrideProps[ key ];\n\t}\n\n\t// Setting an `undefined` explicitly can cause unintended overwrites\n\t// when a `cloneElement()` is involved.\n\tif ( rendered !== undefined ) {\n\t\t// @ts-ignore\n\t\tfinalComponentProps.children = rendered;\n\t}\n\n\tfinalComponentProps.className = classes;\n\n\treturn finalComponentProps;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,oBAAoB;;AAErC;AACA;AACA;AACA,SAASC,oBAAoB,QAAQ,2BAA2B;AAChE,SAASC,YAAY,EAAEC,qBAAqB,QAAQ,SAAS;AAC7D,SAASC,yBAAyB,QAAQ,kCAAkC;AAC5E,SAASC,KAAK,QAAQ,uBAAuB;;AAE7C;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAAEC,KAAK,EAAEC,SAAS,EAAG;EACpD,MAAMC,kBAAkB,GAAGR,oBAAoB,CAAC,CAAC;EACjD,IAAK,OAAOO,SAAS,KAAK,WAAW,EAAG;IACvCE,UAAA,CAAAC,YAAA,YAAAX,IAAI,CAAE,8CAA+C,CAAC;EACvD;EAEA,MAAMY,YAAY,GAAGH,kBAAkB,GAAID,SAAS,CAAE,IAAI,CAAC,CAAC;;EAE5D;EACA;EACA;EACA,MAAMK,mBAAmB,GAAG;IAC3B,GAAGV,qBAAqB,CAAC,CAAC;IAC1B,GAAGD,YAAY,CAAEM,SAAU;EAC5B,CAAC;EACD;;EAEA,MAAM;IAAEM,UAAU,EAAEC,aAAa;IAAE,GAAGC;EAAkB,CAAC,GAAGJ,YAAY;EAExE,MAAMK,kBAAkB,GAAGC,MAAM,CAACC,OAAO,CAAEH,iBAAkB,CAAC,CAACI,MAAM,GAClEF,MAAM,CAACG,MAAM,CAAE,CAAC,CAAC,EAAEL,iBAAiB,EAAET,KAAM,CAAC,GAC7CA,KAAK;EAER,MAAMe,EAAE,GAAGjB,KAAK,CAAC,CAAC;EAElB,MAAMkB,OAAO,GAAGD,EAAE,CACjBlB,yBAAyB,CAAEI,SAAU,CAAC,EACtCD,KAAK,CAACiB,SACP,CAAC;;EAED;EACA,MAAMC,QAAQ,GACb,OAAOR,kBAAkB,CAACS,cAAc,KAAK,UAAU,GACpDT,kBAAkB,CAACS,cAAc,CAAET,kBAAmB,CAAC,GACvDA,kBAAkB,CAACU,QAAQ;EAE/B,KAAM,MAAMC,GAAG,IAAIX,kBAAkB,EAAG;IACvC;IACAJ,mBAAmB,CAAEe,GAAG,CAAE,GAAGX,kBAAkB,CAAEW,GAAG,CAAE;EACvD;EAEA,KAAM,MAAMA,GAAG,IAAIb,aAAa,EAAG;IAClC;IACAF,mBAAmB,CAAEe,GAAG,CAAE,GAAGb,aAAa,CAAEa,GAAG,CAAE;EAClD;;EAEA;EACA;EACA,IAAKH,QAAQ,KAAKI,SAAS,EAAG;IAC7B;IACAhB,mBAAmB,CAACc,QAAQ,GAAGF,QAAQ;EACxC;EAEAZ,mBAAmB,CAACW,SAAS,GAAGD,OAAO;EAEvC,OAAOV,mBAAmB;AAC3B","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/context/use-context-system.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { useComponentsContext } from './context-system-provider';\nimport { getNamespace, getConnectedNamespace } from './utils';\nimport { getStyledClassNameFromKey } from './get-styled-class-name-from-key';\nimport { useCx } from '../utils/hooks/use-cx';\n\n/**\n * @template TProps\n * @typedef {TProps & { className: string }} ConnectedProps\n */\n\n/**\n * Custom hook that derives registered props from the Context system.\n * These derived props are then consolidated with incoming component props.\n *\n * @template {{ className?: string }} P\n * @param {P}      props     Incoming props from the component.\n * @param {string} namespace The namespace to register and to derive context props from.\n * @return {ConnectedProps<P>} The connected props.\n */\nexport function useContextSystem(props, namespace) {\n  const contextSystemProps = useComponentsContext();\n  if (typeof namespace === 'undefined') {\n    globalThis.SCRIPT_DEBUG === true ? warn('useContextSystem: Please provide a namespace') : void 0;\n  }\n  const contextProps = contextSystemProps?.[namespace] || {};\n\n  /* eslint-disable jsdoc/no-undefined-types */\n  /** @type {ConnectedProps<P>} */\n  // @ts-ignore We fill in the missing properties below\n  const finalComponentProps = {\n    ...getConnectedNamespace(),\n    ...getNamespace(namespace)\n  };\n  /* eslint-enable jsdoc/no-undefined-types */\n\n  const {\n    _overrides: overrideProps,\n    ...otherContextProps\n  } = contextProps;\n  const initialMergedProps = Object.entries(otherContextProps).length ? Object.assign({}, otherContextProps, props) : props;\n  const cx = useCx();\n  const classes = cx(getStyledClassNameFromKey(namespace), props.className);\n\n  // Provides the ability to customize the render of the component.\n  const rendered = typeof initialMergedProps.renderChildren === 'function' ? initialMergedProps.renderChildren(initialMergedProps) : initialMergedProps.children;\n  for (const key in initialMergedProps) {\n    // @ts-ignore filling in missing props\n    finalComponentProps[key] = initialMergedProps[key];\n  }\n  for (const key in overrideProps) {\n    // @ts-ignore filling in missing props\n    finalComponentProps[key] = overrideProps[key];\n  }\n\n  // Setting an `undefined` explicitly can cause unintended overwrites\n  // when a `cloneElement()` is involved.\n  if (rendered !== undefined) {\n    // @ts-ignore\n    finalComponentProps.children = rendered;\n  }\n  finalComponentProps.className = classes;\n  return finalComponentProps;\n}"],
+  "mappings": "AAGA,OAAO,UAAU;AAKjB,SAAS,4BAA4B;AACrC,SAAS,cAAc,6BAA6B;AACpD,SAAS,iCAAiC;AAC1C,SAAS,aAAa;AAgBf,SAAS,iBAAiB,OAAO,WAAW;AACjD,QAAM,qBAAqB,qBAAqB;AAChD,MAAI,OAAO,cAAc,aAAa;AACpC,eAAW,iBAAiB,OAAO,KAAK,8CAA8C,IAAI;AAAA,EAC5F;AACA,QAAM,eAAe,qBAAqB,SAAS,KAAK,CAAC;AAKzD,QAAM,sBAAsB;AAAA,IAC1B,GAAG,sBAAsB;AAAA,IACzB,GAAG,aAAa,SAAS;AAAA,EAC3B;AAGA,QAAM;AAAA,IACJ,YAAY;AAAA,IACZ,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,qBAAqB,OAAO,QAAQ,iBAAiB,EAAE,SAAS,OAAO,OAAO,CAAC,GAAG,mBAAmB,KAAK,IAAI;AACpH,QAAM,KAAK,MAAM;AACjB,QAAM,UAAU,GAAG,0BAA0B,SAAS,GAAG,MAAM,SAAS;AAGxE,QAAM,WAAW,OAAO,mBAAmB,mBAAmB,aAAa,mBAAmB,eAAe,kBAAkB,IAAI,mBAAmB;AACtJ,aAAW,OAAO,oBAAoB;AAEpC,wBAAoB,GAAG,IAAI,mBAAmB,GAAG;AAAA,EACnD;AACA,aAAW,OAAO,eAAe;AAE/B,wBAAoB,GAAG,IAAI,cAAc,GAAG;AAAA,EAC9C;AAIA,MAAI,aAAa,QAAW;AAE1B,wBAAoB,WAAW;AAAA,EACjC;AACA,sBAAoB,YAAY;AAChC,SAAO;AACT;",
+  "names": []
+}

package/build-module/context/utils.js

@@ -1,40 +1,16 @@
-/**
- * Internal dependencies
- */
-import { CONNECTED_NAMESPACE, COMPONENT_NAMESPACE } from './constants';
-
-/**
- * Creates a dedicated context namespace HTML attribute for components.
- * ns is short for "namespace"
- *
- * @example
- * ```jsx
- * <div {...ns('Container')} />
- * ```
- *
- * @param {string} componentName The name for the component.
- * @return {Record<string, any>} A props object with the namespaced HTML attribute.
- */
-export function getNamespace(componentName) {
+import { CONNECTED_NAMESPACE, COMPONENT_NAMESPACE } from "./constants";
+function getNamespace(componentName) {
   return {
     [COMPONENT_NAMESPACE]: componentName
   };
 }
-
-/**
- * Creates a dedicated connected context namespace HTML attribute for components.
- * ns is short for "namespace"
- *
- * @example
- * ```jsx
- * <div {...cns()} />
- * ```
- *
- * @return {Record<string, any>} A props object with the namespaced HTML attribute.
- */
-export function getConnectedNamespace() {
+function getConnectedNamespace() {
   return {
     [CONNECTED_NAMESPACE]: true
   };
 }
-//# sourceMappingURL=utils.js.map
+export {
+  getConnectedNamespace,
+  getNamespace
+};
+//# sourceMappingURL=utils.js.map

package/build-module/context/utils.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["CONNECTED_NAMESPACE","COMPONENT_NAMESPACE","getNamespace","componentName","getConnectedNamespace"],"sources":["@wordpress/components/src/context/utils.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { CONNECTED_NAMESPACE, COMPONENT_NAMESPACE } from './constants';\n\n/**\n * Creates a dedicated context namespace HTML attribute for components.\n * ns is short for \"namespace\"\n *\n * @example\n * ```jsx\n * <div {...ns('Container')} />\n * ```\n *\n * @param {string} componentName The name for the component.\n * @return {Record<string, any>} A props object with the namespaced HTML attribute.\n */\nexport function getNamespace( componentName ) {\n\treturn { [ COMPONENT_NAMESPACE ]: componentName };\n}\n\n/**\n * Creates a dedicated connected context namespace HTML attribute for components.\n * ns is short for \"namespace\"\n *\n * @example\n * ```jsx\n * <div {...cns()} />\n * ```\n *\n * @return {Record<string, any>} A props object with the namespaced HTML attribute.\n */\nexport function getConnectedNamespace() {\n\treturn { [ CONNECTED_NAMESPACE ]: true };\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,mBAAmB,EAAEC,mBAAmB,QAAQ,aAAa;;AAEtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,YAAYA,CAAEC,aAAa,EAAG;EAC7C,OAAO;IAAE,CAAEF,mBAAmB,GAAIE;EAAc,CAAC;AAClD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,qBAAqBA,CAAA,EAAG;EACvC,OAAO;IAAE,CAAEJ,mBAAmB,GAAI;EAAK,CAAC;AACzC","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/context/utils.js"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { CONNECTED_NAMESPACE, COMPONENT_NAMESPACE } from './constants';\n\n/**\n * Creates a dedicated context namespace HTML attribute for components.\n * ns is short for \"namespace\"\n *\n * @example\n * ```jsx\n * <div {...ns('Container')} />\n * ```\n *\n * @param {string} componentName The name for the component.\n * @return {Record<string, any>} A props object with the namespaced HTML attribute.\n */\nexport function getNamespace(componentName) {\n  return {\n    [COMPONENT_NAMESPACE]: componentName\n  };\n}\n\n/**\n * Creates a dedicated connected context namespace HTML attribute for components.\n * ns is short for \"namespace\"\n *\n * @example\n * ```jsx\n * <div {...cns()} />\n * ```\n *\n * @return {Record<string, any>} A props object with the namespaced HTML attribute.\n */\nexport function getConnectedNamespace() {\n  return {\n    [CONNECTED_NAMESPACE]: true\n  };\n}"],
+  "mappings": "AAGA,SAAS,qBAAqB,2BAA2B;AAclD,SAAS,aAAa,eAAe;AAC1C,SAAO;AAAA,IACL,CAAC,mBAAmB,GAAG;AAAA,EACzB;AACF;AAaO,SAAS,wBAAwB;AACtC,SAAO;AAAA,IACL,CAAC,mBAAmB,GAAG;AAAA,EACzB;AACF;",
+  "names": []
+}

package/build-module/context/wordpress-component.js

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=wordpress-component.js.map
+//# sourceMappingURL=wordpress-component.js.map

package/build-module/context/wordpress-component.js.map

@@ -1 +1,7 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/context/wordpress-component.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type * as React from 'react';\n\n// Based on https://github.com/ariakit/ariakit/blob/reakit/packages/reakit-utils/src/types.ts\nexport type WordPressComponentProps<\n\t/** Prop types. */\n\tP,\n\t/** The HTML element to inherit props from. */\n\tT extends React.ElementType | null,\n\t/** Supports polymorphism through the `as` prop. */\n\tIsPolymorphic extends boolean = true,\n> = P &\n\t( T extends React.ElementType\n\t\t? // The `children` prop is being explicitly omitted since it is otherwise implicitly added\n\t\t  // by `ComponentPropsWithRef`. The context is that components should require the `children`\n\t\t  // prop explicitly when needed (see https://github.com/WordPress/gutenberg/pull/31817).\n\t\t  Omit<\n\t\t\t\tReact.ComponentPropsWithoutRef< T >,\n\t\t\t\t'as' | keyof P | 'children'\n\t\t  >\n\t\t: {} ) &\n\t( IsPolymorphic extends true\n\t\t? {\n\t\t\t\t/** The HTML element or React component to render the component as. */\n\t\t\t\tas?: T | keyof JSX.IntrinsicElements;\n\t\t  }\n\t\t: {} );\n\nexport type WordPressComponent<\n\tT extends React.ElementType | null,\n\tO,\n\tIsPolymorphic extends boolean,\n> = {\n\t< TT extends React.ElementType >(\n\t\tprops: WordPressComponentProps< O, TT, IsPolymorphic > &\n\t\t\t( IsPolymorphic extends true ? { as: TT } : {} )\n\t): JSX.Element | null;\n\t(\n\t\tprops: WordPressComponentProps< O, T, IsPolymorphic >\n\t): JSX.Element | null;\n\tdisplayName?: string;\n\t/**\n\t * A CSS selector used to fake component interpolation in styled components\n\t * for components not generated by `styled`. Anything passed to `contextConnect`\n\t * will get this property.\n\t *\n\t * We restrict it to a class to align with the already existing class names that\n\t * are generated by the context system.\n\t */\n\tselector?: `.${ string }`;\n};\n\nexport type WordPressComponentFromProps<\n\tProps,\n\tForwardsRef extends boolean = true,\n> = Props extends WordPressComponentProps< infer P, infer T, infer I >\n\t? WordPressComponent<\n\t\t\tT,\n\t\t\tP & ( ForwardsRef extends true ? React.RefAttributes< any > : {} ),\n\t\t\tI\n\t  >\n\t: never;\n"],"mappings":"","ignoreList":[]}
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/build-module/css.d.js

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=css.d.js.map
+//# sourceMappingURL=css.d.js.map

package/build-module/css.d.js.map

@@ -1 +1,7 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/css.d.ts"],"sourcesContent":["import type * as CSS from 'csstype';\n\n// See: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/f6d4d15522356eba4a0267142834e3abc6b603fc/types/react/index.d.ts#L2580-L2587\ndeclare module 'csstype' {\n\tinterface Properties {\n\t\t// Allow any CSS Custom Properties\n\t\t[ index: `--${ string }` ]: any;\n\t}\n}\n"],"mappings":"","ignoreList":[]}
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}