@wordpress/components 30.9.0 → 31.0.1-next.6deb34194.0

package/build-module/alignment-matrix-control/index.js

@@ -5,9 +5,134 @@ import { useInstanceId } from "@wordpress/compose";
 import { useCallback } from "@wordpress/element";
 import Cell from "./cell";
 import { Composite } from "../composite";
-import { GridContainer, GridRow } from "./styles";
 import AlignmentMatrixControlIcon from "./icon";
 import { GRID, getItemId, getItemValue } from "./utils";
+
+// packages/components/src/alignment-matrix-control/style.module.scss
+var css = `/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+.style-module__grid-container__AuKvW {
+  direction: ltr;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  box-sizing: border-box;
+  aspect-ratio: 1;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  outline: none;
+  cursor: pointer;
+}
+
+.style-module__grid-row__xCH47 {
+  grid-column: 1/-1;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.style-module__cell__Ovdp9 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  appearance: none;
+  border: none;
+  outline: none;
+}
+
+.style-module__point__N-8S1 {
+  display: block;
+  contain: strict;
+  box-sizing: border-box;
+  width: 6px;
+  aspect-ratio: 1;
+  margin: auto;
+  color: var(--wp-components-color-gray-400, #ccc);
+  /* Use border instead of background color so that the point shows
+  in Windows High Contrast Mode */
+  border: 3px solid currentColor;
+  /* Highlight active item */
+}
+.style-module__cell__Ovdp9[data-active-item] .style-module__point__N-8S1 {
+  color: var(--wp-components-color-foreground, #1e1e1e);
+  transform: scale(1.6666666667);
+}
+.style-module__point__N-8S1 {
+  /* Hover styles for non-active items */
+}
+.style-module__cell__Ovdp9:not([data-active-item]):hover .style-module__point__N-8S1 {
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+}
+.style-module__point__N-8S1 {
+  /* Show an outline only when interacting with keyboard */
+}
+.style-module__cell__Ovdp9[data-focus-visible] .style-module__point__N-8S1 {
+  outline: 1px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  outline-offset: 1px;
+}
+@media not (prefers-reduced-motion) {
+  .style-module__point__N-8S1 {
+    transition-property: color, transform;
+    transition-duration: 120ms;
+    transition-timing-function: linear;
+  }
+}`;
+document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
+var style_module_default = {
+  "grid-container": "style-module__grid-container__AuKvW",
+  "grid-row": "style-module__grid-row__xCH47",
+  "cell": "style-module__cell__Ovdp9",
+  "point": "style-module__point__N-8S1"
+};
+
+// packages/components/src/alignment-matrix-control/index.tsx
 import { jsx as _jsx } from "react/jsx-runtime";
 function UnforwardedAlignmentMatrixControl({
   className,
@@ -26,22 +151,25 @@ function UnforwardedAlignmentMatrixControl({
       onChange?.(nextValue);
     }
   }, [baseId, onChange]);
-  const classes = clsx("component-alignment-matrix-control", className);
+  const classes = clsx("component-alignment-matrix-control", style_module_default["grid-container"], className);
   return /* @__PURE__ */ _jsx(Composite, {
     defaultActiveId: getItemId(baseId, defaultValue),
     activeId: getItemId(baseId, value),
     setActiveId,
     rtl: isRTL(),
-    render: /* @__PURE__ */ _jsx(GridContainer, {
+    render: /* @__PURE__ */ _jsx("div", {
       ...props,
-      "aria-label": label,
       className: classes,
+      "aria-label": label,
       id: baseId,
       role: "grid",
-      size: width
+      style: {
+        width: `${width}px`
+      }
     }),
     children: GRID.map((cells, index) => /* @__PURE__ */ _jsx(Composite.Row, {
-      render: /* @__PURE__ */ _jsx(GridRow, {
+      render: /* @__PURE__ */ _jsx("div", {
+        className: style_module_default["grid-row"],
         role: "row"
       }),
       children: cells.map((cell) => /* @__PURE__ */ _jsx(Cell, {

package/build-module/alignment-matrix-control/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/alignment-matrix-control/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite } from '../composite';\nimport { GridContainer, GridRow } from './styles';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId, getItemValue } from './utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedAlignmentMatrixControl({\n  className,\n  id,\n  label = __('Alignment Matrix Control'),\n  defaultValue = 'center center',\n  value,\n  onChange,\n  width = 92,\n  ...props\n}) {\n  const baseId = useInstanceId(UnforwardedAlignmentMatrixControl, 'alignment-matrix-control', id);\n  const setActiveId = useCallback(nextActiveId => {\n    const nextValue = getItemValue(baseId, nextActiveId);\n    if (nextValue) {\n      onChange?.(nextValue);\n    }\n  }, [baseId, onChange]);\n  const classes = clsx('component-alignment-matrix-control', className);\n  return /*#__PURE__*/_jsx(Composite, {\n    defaultActiveId: getItemId(baseId, defaultValue),\n    activeId: getItemId(baseId, value),\n    setActiveId: setActiveId,\n    rtl: isRTL(),\n    render: /*#__PURE__*/_jsx(GridContainer, {\n      ...props,\n      \"aria-label\": label,\n      className: classes,\n      id: baseId,\n      role: \"grid\",\n      size: width\n    }),\n    children: GRID.map((cells, index) => /*#__PURE__*/_jsx(Composite.Row, {\n      render: /*#__PURE__*/_jsx(GridRow, {\n        role: \"row\"\n      }),\n      children: cells.map(cell => /*#__PURE__*/_jsx(Cell, {\n        id: getItemId(baseId, cell),\n        value: cell\n      }, cell))\n    }, index))\n  });\n}\n\n/**\n * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.\n *\n * ```jsx\n * import { AlignmentMatrixControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ alignment, setAlignment ] = useState( 'center center' );\n *\n * \treturn (\n * \t\t<AlignmentMatrixControl\n * \t\t\tvalue={ alignment }\n * \t\t\tonChange={ setAlignment }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const AlignmentMatrixControl = Object.assign(UnforwardedAlignmentMatrixControl, {\n  /**\n   * Render an alignment matrix as an icon.\n   *\n   * ```jsx\n   * import { AlignmentMatrixControl } from '@wordpress/components';\n   *\n   * <Icon icon={<AlignmentMatrixControl.Icon value=\"top left\" />} />\n   * ```\n   */\n  Icon: Object.assign(AlignmentMatrixControlIcon, {\n    displayName: 'AlignmentMatrixControl.Icon'\n  })\n});\nexport default AlignmentMatrixControl;"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,IAAI,aAAa;AAC1B,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAK5B,OAAO,UAAU;AACjB,SAAS,iBAAiB;AAC1B,SAAS,eAAe,eAAe;AACvC,OAAO,gCAAgC;AACvC,SAAS,MAAM,WAAW,oBAAoB;AAC9C,SAAS,OAAO,YAAY;AAC5B,SAAS,kCAAkC;AAAA,EACzC;AAAA,EACA;AAAA,EACA,QAAQ,GAAG,0BAA0B;AAAA,EACrC,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAAG;AACD,QAAM,SAAS,cAAc,mCAAmC,4BAA4B,EAAE;AAC9F,QAAM,cAAc,YAAY,kBAAgB;AAC9C,UAAM,YAAY,aAAa,QAAQ,YAAY;AACnD,QAAI,WAAW;AACb,iBAAW,SAAS;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,QAAQ,QAAQ,CAAC;AACrB,QAAM,UAAU,KAAK,sCAAsC,SAAS;AACpE,SAAoB,qBAAK,WAAW;AAAA,IAClC,iBAAiB,UAAU,QAAQ,YAAY;AAAA,IAC/C,UAAU,UAAU,QAAQ,KAAK;AAAA,IACjC;AAAA,IACA,KAAK,MAAM;AAAA,IACX,QAAqB,qBAAK,eAAe;AAAA,MACvC,GAAG;AAAA,MACH,cAAc;AAAA,MACd,WAAW;AAAA,MACX,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,MAAM;AAAA,IACR,CAAC;AAAA,IACD,UAAU,KAAK,IAAI,CAAC,OAAO,UAAuB,qBAAK,UAAU,KAAK;AAAA,MACpE,QAAqB,qBAAK,SAAS;AAAA,QACjC,MAAM;AAAA,MACR,CAAC;AAAA,MACD,UAAU,MAAM,IAAI,UAAqB,qBAAK,MAAM;AAAA,QAClD,IAAI,UAAU,QAAQ,IAAI;AAAA,QAC1B,OAAO;AAAA,MACT,GAAG,IAAI,CAAC;AAAA,IACV,GAAG,KAAK,CAAC;AAAA,EACX,CAAC;AACH;AAqBO,IAAM,yBAAyB,OAAO,OAAO,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUrF,MAAM,OAAO,OAAO,4BAA4B;AAAA,IAC9C,aAAa;AAAA,EACf,CAAC;AACH,CAAC;AACD,IAAO,mCAAQ;",
+  "sources": ["../../src/alignment-matrix-control/index.tsx", "../../src/alignment-matrix-control/style.module.scss"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite } from '../composite';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId, getItemValue } from './utils';\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedAlignmentMatrixControl({\n  className,\n  id,\n  label = __('Alignment Matrix Control'),\n  defaultValue = 'center center',\n  value,\n  onChange,\n  width = 92,\n  ...props\n}) {\n  const baseId = useInstanceId(UnforwardedAlignmentMatrixControl, 'alignment-matrix-control', id);\n  const setActiveId = useCallback(nextActiveId => {\n    const nextValue = getItemValue(baseId, nextActiveId);\n    if (nextValue) {\n      onChange?.(nextValue);\n    }\n  }, [baseId, onChange]);\n  const classes = clsx('component-alignment-matrix-control', styles['grid-container'], className);\n  return /*#__PURE__*/_jsx(Composite, {\n    defaultActiveId: getItemId(baseId, defaultValue),\n    activeId: getItemId(baseId, value),\n    setActiveId: setActiveId,\n    rtl: isRTL(),\n    render: /*#__PURE__*/_jsx(\"div\", {\n      ...props,\n      className: classes,\n      \"aria-label\": label,\n      id: baseId,\n      role: \"grid\",\n      style: {\n        width: `${width}px`\n      }\n    }),\n    children: GRID.map((cells, index) => /*#__PURE__*/_jsx(Composite.Row, {\n      render: /*#__PURE__*/_jsx(\"div\", {\n        className: styles['grid-row'],\n        role: \"row\"\n      }),\n      children: cells.map(cell => /*#__PURE__*/_jsx(Cell, {\n        id: getItemId(baseId, cell),\n        value: cell\n      }, cell))\n    }, index))\n  });\n}\n\n/**\n * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.\n *\n * ```jsx\n * import { AlignmentMatrixControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ alignment, setAlignment ] = useState( 'center center' );\n *\n * \treturn (\n * \t\t<AlignmentMatrixControl\n * \t\t\tvalue={ alignment }\n * \t\t\tonChange={ setAlignment }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const AlignmentMatrixControl = Object.assign(UnforwardedAlignmentMatrixControl, {\n  /**\n   * Render an alignment matrix as an icon.\n   *\n   * ```jsx\n   * import { AlignmentMatrixControl } from '@wordpress/components';\n   *\n   * <Icon icon={<AlignmentMatrixControl.Icon value=\"top left\" />} />\n   * ```\n   */\n  Icon: Object.assign(AlignmentMatrixControlIcon, {\n    displayName: 'AlignmentMatrixControl.Icon'\n  })\n});\nexport default AlignmentMatrixControl;", "const css = `/**\n * SCSS Variables.\n *\n * Please use variables from this sheet to ensure consistency across the UI.\n * Don't add to this sheet unless you're pretty sure the value will be reused in many places.\n * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.\n */\n/**\n * Colors\n */\n/**\n * Fonts & basic variables.\n */\n/**\n * Typography\n */\n/**\n * Grid System.\n * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/\n */\n/**\n * Radius scale.\n */\n/**\n * Elevation scale.\n */\n/**\n * Dimensions.\n */\n/**\n * Mobile specific styles\n */\n/**\n * Editor styles.\n */\n/**\n * Block & Editor UI.\n */\n/**\n * Block paddings.\n */\n/**\n * React Native specific.\n * These variables do not appear to be used anywhere else.\n */\n.style-module__grid-container__AuKvW {\n  direction: ltr;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: repeat(3, 1fr);\n  box-sizing: border-box;\n  aspect-ratio: 1;\n  border: 1px solid transparent;\n  border-radius: 4px;\n  outline: none;\n  cursor: pointer;\n}\n\n.style-module__grid-row__xCH47 {\n  grid-column: 1/-1;\n  box-sizing: border-box;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n}\n\n.style-module__cell__Ovdp9 {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  appearance: none;\n  border: none;\n  outline: none;\n}\n\n.style-module__point__N-8S1 {\n  display: block;\n  contain: strict;\n  box-sizing: border-box;\n  width: 6px;\n  aspect-ratio: 1;\n  margin: auto;\n  color: var(--wp-components-color-gray-400, #ccc);\n  /* Use border instead of background color so that the point shows\n  in Windows High Contrast Mode */\n  border: 3px solid currentColor;\n  /* Highlight active item */\n}\n.style-module__cell__Ovdp9[data-active-item] .style-module__point__N-8S1 {\n  color: var(--wp-components-color-foreground, #1e1e1e);\n  transform: scale(1.6666666667);\n}\n.style-module__point__N-8S1 {\n  /* Hover styles for non-active items */\n}\n.style-module__cell__Ovdp9:not([data-active-item]):hover .style-module__point__N-8S1 {\n  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));\n}\n.style-module__point__N-8S1 {\n  /* Show an outline only when interacting with keyboard */\n}\n.style-module__cell__Ovdp9[data-focus-visible] .style-module__point__N-8S1 {\n  outline: 1px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));\n  outline-offset: 1px;\n}\n@media not (prefers-reduced-motion) {\n  .style-module__point__N-8S1 {\n    transition-property: color, transform;\n    transition-duration: 120ms;\n    transition-timing-function: linear;\n  }\n}`;\ndocument.head\n    .appendChild(document.createElement(\"style\"))\n    .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n  \"grid-container\": \"style-module__grid-container__AuKvW\",\n  \"grid-row\": \"style-module__grid-row__xCH47\",\n  \"cell\": \"style-module__cell__Ovdp9\",\n  \"point\": \"style-module__point__N-8S1\"\n};"],
+  "mappings": "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",
   "names": []
 }

package/build-module/angle-picker-control/angle-circle.js

@@ -1,11 +1,102 @@
 // packages/components/src/angle-picker-control/angle-circle.tsx
+import clsx from "clsx";
 import { useEffect, useRef } from "@wordpress/element";
 import { __experimentalUseDragging as useDragging } from "@wordpress/compose";
-import { CircleRoot, CircleIndicatorWrapper, CircleIndicator } from "./styles/angle-picker-control-styles";
+
+// packages/components/src/angle-picker-control/style.module.scss
+var css = `/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+.style-module__circle-root__j1e41 {
+  border-radius: 50%;
+  border: 1px solid var(--wp-components-color-gray-600, #949494);
+  box-sizing: border-box;
+  cursor: grab;
+  height: 32px;
+  overflow: hidden;
+  width: 32px;
+}
+.style-module__circle-root__j1e41:active {
+  cursor: grabbing;
+}
+
+.style-module__circle-indicator-wrapper__sbrph {
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.style-module__circle-indicator-wrapper__sbrph:focus-visible {
+  outline: none;
+}
+
+.style-module__circle-indicator__bS-go {
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  border-radius: 50%;
+  box-sizing: border-box;
+  display: block;
+  left: 50%;
+  top: 4px;
+  transform: translateX(-50%);
+  position: absolute;
+  width: 6px;
+  height: 6px;
+}`;
+document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
+var style_module_default = {
+  "circle-root": "style-module__circle-root__j1e41",
+  "circle-indicator-wrapper": "style-module__circle-indicator-wrapper__sbrph",
+  "circle-indicator": "style-module__circle-indicator__bS-go"
+};
+
+// packages/components/src/angle-picker-control/angle-circle.tsx
 import { jsx as _jsx } from "react/jsx-runtime";
 function AngleCircle({
   value,
   onChange,
+  className,
   ...props
 }) {
   const angleCircleRef = useRef(null);
@@ -57,22 +148,25 @@ function AngleCircle({
       previousCursorValueRef.current = void 0;
     }
   }, [isDragging]);
-  return /* @__PURE__ */ _jsx(CircleRoot, {
-    ref: angleCircleRef,
-    onMouseDown: startDrag,
-    className: "components-angle-picker-control__angle-circle",
-    ...props,
-    children: /* @__PURE__ */ _jsx(CircleIndicatorWrapper, {
-      style: value ? {
-        transform: `rotate(${value}deg)`
-      } : void 0,
-      className: "components-angle-picker-control__angle-circle-indicator-wrapper",
-      tabIndex: -1,
-      children: /* @__PURE__ */ _jsx(CircleIndicator, {
-        className: "components-angle-picker-control__angle-circle-indicator"
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ _jsx("div", {
+      ref: angleCircleRef,
+      onMouseDown: startDrag,
+      className: clsx("components-angle-picker-control__angle-circle", style_module_default["circle-root"], className),
+      ...props,
+      children: /* @__PURE__ */ _jsx("div", {
+        style: value ? {
+          transform: `rotate(${value}deg)`
+        } : void 0,
+        className: clsx("components-angle-picker-control__angle-circle-indicator-wrapper", style_module_default["circle-indicator-wrapper"]),
+        tabIndex: -1,
+        children: /* @__PURE__ */ _jsx("div", {
+          className: clsx("components-angle-picker-control__angle-circle-indicator", style_module_default["circle-indicator"])
+        })
       })
     })
-  });
+  );
 }
 function getAngle(centerX, centerY, pointX, pointY) {
   const y = pointY - centerY;

package/build-module/angle-picker-control/angle-circle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/angle-picker-control/angle-circle.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { CircleRoot, CircleIndicatorWrapper, CircleIndicator } from './styles/angle-picker-control-styles';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction AngleCircle({\n  value,\n  onChange,\n  ...props\n}) {\n  const angleCircleRef = useRef(null);\n  const angleCircleCenterRef = useRef();\n  const previousCursorValueRef = useRef();\n  const setAngleCircleCenter = () => {\n    if (angleCircleRef.current === null) {\n      return;\n    }\n    const rect = angleCircleRef.current.getBoundingClientRect();\n    angleCircleCenterRef.current = {\n      x: rect.x + rect.width / 2,\n      y: rect.y + rect.height / 2\n    };\n  };\n  const changeAngleToPosition = event => {\n    if (event === undefined) {\n      return;\n    }\n\n    // Prevent (drag) mouse events from selecting and accidentally\n    // triggering actions from other elements.\n    event.preventDefault();\n    // Input control needs to lose focus and by preventDefault above, it doesn't.\n    event.target?.focus();\n    if (angleCircleCenterRef.current !== undefined && onChange !== undefined) {\n      const {\n        x: centerX,\n        y: centerY\n      } = angleCircleCenterRef.current;\n      onChange(getAngle(centerX, centerY, event.clientX, event.clientY));\n    }\n  };\n  const {\n    startDrag,\n    isDragging\n  } = useDragging({\n    onDragStart: event => {\n      setAngleCircleCenter();\n      changeAngleToPosition(event);\n    },\n    onDragMove: changeAngleToPosition,\n    onDragEnd: changeAngleToPosition\n  });\n  useEffect(() => {\n    if (isDragging) {\n      if (previousCursorValueRef.current === undefined) {\n        previousCursorValueRef.current = document.body.style.cursor;\n      }\n      document.body.style.cursor = 'grabbing';\n    } else {\n      document.body.style.cursor = previousCursorValueRef.current || '';\n      previousCursorValueRef.current = undefined;\n    }\n  }, [isDragging]);\n  return /*#__PURE__*/_jsx(CircleRoot, {\n    ref: angleCircleRef,\n    onMouseDown: startDrag,\n    className: \"components-angle-picker-control__angle-circle\",\n    ...props,\n    children: /*#__PURE__*/_jsx(CircleIndicatorWrapper, {\n      style: value ? {\n        transform: `rotate(${value}deg)`\n      } : undefined,\n      className: \"components-angle-picker-control__angle-circle-indicator-wrapper\",\n      tabIndex: -1,\n      children: /*#__PURE__*/_jsx(CircleIndicator, {\n        className: \"components-angle-picker-control__angle-circle-indicator\"\n      })\n    })\n  });\n}\nfunction getAngle(centerX, centerY, pointX, pointY) {\n  const y = pointY - centerY;\n  const x = pointX - centerX;\n  const angleInRadians = Math.atan2(y, x);\n  const angleInDeg = Math.round(angleInRadians * (180 / Math.PI)) + 90;\n  if (angleInDeg < 0) {\n    return 360 + angleInDeg;\n  }\n  return angleInDeg;\n}\nexport default AngleCircle;"],
-  "mappings": ";AAGA,SAAS,WAAW,cAAc;AAClC,SAAS,6BAA6B,mBAAmB;AAKzD,SAAS,YAAY,wBAAwB,uBAAuB;AACpE,SAAS,OAAO,YAAY;AAC5B,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM,iBAAiB,OAAO,IAAI;AAClC,QAAM,uBAAuB,OAAO;AACpC,QAAM,yBAAyB,OAAO;AACtC,QAAM,uBAAuB,MAAM;AACjC,QAAI,eAAe,YAAY,MAAM;AACnC;AAAA,IACF;AACA,UAAM,OAAO,eAAe,QAAQ,sBAAsB;AAC1D,yBAAqB,UAAU;AAAA,MAC7B,GAAG,KAAK,IAAI,KAAK,QAAQ;AAAA,MACzB,GAAG,KAAK,IAAI,KAAK,SAAS;AAAA,IAC5B;AAAA,EACF;AACA,QAAM,wBAAwB,WAAS;AACrC,QAAI,UAAU,QAAW;AACvB;AAAA,IACF;AAIA,UAAM,eAAe;AAErB,UAAM,QAAQ,MAAM;AACpB,QAAI,qBAAqB,YAAY,UAAa,aAAa,QAAW;AACxE,YAAM;AAAA,QACJ,GAAG;AAAA,QACH,GAAG;AAAA,MACL,IAAI,qBAAqB;AACzB,eAAS,SAAS,SAAS,SAAS,MAAM,SAAS,MAAM,OAAO,CAAC;AAAA,IACnE;AAAA,EACF;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,YAAY;AAAA,IACd,aAAa,WAAS;AACpB,2BAAqB;AACrB,4BAAsB,KAAK;AAAA,IAC7B;AAAA,IACA,YAAY;AAAA,IACZ,WAAW;AAAA,EACb,CAAC;AACD,YAAU,MAAM;AACd,QAAI,YAAY;AACd,UAAI,uBAAuB,YAAY,QAAW;AAChD,+BAAuB,UAAU,SAAS,KAAK,MAAM;AAAA,MACvD;AACA,eAAS,KAAK,MAAM,SAAS;AAAA,IAC/B,OAAO;AACL,eAAS,KAAK,MAAM,SAAS,uBAAuB,WAAW;AAC/D,6BAAuB,UAAU;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AACf,SAAoB,qBAAK,YAAY;AAAA,IACnC,KAAK;AAAA,IACL,aAAa;AAAA,IACb,WAAW;AAAA,IACX,GAAG;AAAA,IACH,UAAuB,qBAAK,wBAAwB;AAAA,MAClD,OAAO,QAAQ;AAAA,QACb,WAAW,UAAU,KAAK;AAAA,MAC5B,IAAI;AAAA,MACJ,WAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAuB,qBAAK,iBAAiB;AAAA,QAC3C,WAAW;AAAA,MACb,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;AACA,SAAS,SAAS,SAAS,SAAS,QAAQ,QAAQ;AAClD,QAAM,IAAI,SAAS;AACnB,QAAM,IAAI,SAAS;AACnB,QAAM,iBAAiB,KAAK,MAAM,GAAG,CAAC;AACtC,QAAM,aAAa,KAAK,MAAM,kBAAkB,MAAM,KAAK,GAAG,IAAI;AAClE,MAAI,aAAa,GAAG;AAClB,WAAO,MAAM;AAAA,EACf;AACA,SAAO;AACT;AACA,IAAO,uBAAQ;",
+  "sources": ["../../src/angle-picker-control/angle-circle.tsx", "../../src/angle-picker-control/style.module.scss"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction AngleCircle({\n  value,\n  onChange,\n  className,\n  ...props\n}) {\n  const angleCircleRef = useRef(null);\n  const angleCircleCenterRef = useRef();\n  const previousCursorValueRef = useRef();\n  const setAngleCircleCenter = () => {\n    if (angleCircleRef.current === null) {\n      return;\n    }\n    const rect = angleCircleRef.current.getBoundingClientRect();\n    angleCircleCenterRef.current = {\n      x: rect.x + rect.width / 2,\n      y: rect.y + rect.height / 2\n    };\n  };\n  const changeAngleToPosition = event => {\n    if (event === undefined) {\n      return;\n    }\n\n    // Prevent (drag) mouse events from selecting and accidentally\n    // triggering actions from other elements.\n    event.preventDefault();\n    // Input control needs to lose focus and by preventDefault above, it doesn't.\n    event.target?.focus();\n    if (angleCircleCenterRef.current !== undefined && onChange !== undefined) {\n      const {\n        x: centerX,\n        y: centerY\n      } = angleCircleCenterRef.current;\n      onChange(getAngle(centerX, centerY, event.clientX, event.clientY));\n    }\n  };\n  const {\n    startDrag,\n    isDragging\n  } = useDragging({\n    onDragStart: event => {\n      setAngleCircleCenter();\n      changeAngleToPosition(event);\n    },\n    onDragMove: changeAngleToPosition,\n    onDragEnd: changeAngleToPosition\n  });\n  useEffect(() => {\n    if (isDragging) {\n      if (previousCursorValueRef.current === undefined) {\n        previousCursorValueRef.current = document.body.style.cursor;\n      }\n      document.body.style.cursor = 'grabbing';\n    } else {\n      document.body.style.cursor = previousCursorValueRef.current || '';\n      previousCursorValueRef.current = undefined;\n    }\n  }, [isDragging]);\n  return (\n    /*#__PURE__*/\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    _jsx(\"div\", {\n      ref: angleCircleRef,\n      onMouseDown: startDrag,\n      className: clsx('components-angle-picker-control__angle-circle', styles['circle-root'], className),\n      ...props,\n      children: /*#__PURE__*/_jsx(\"div\", {\n        style: value ? {\n          transform: `rotate(${value}deg)`\n        } : undefined,\n        className: clsx('components-angle-picker-control__angle-circle-indicator-wrapper', styles['circle-indicator-wrapper']),\n        tabIndex: -1,\n        children: /*#__PURE__*/_jsx(\"div\", {\n          className: clsx('components-angle-picker-control__angle-circle-indicator', styles['circle-indicator'])\n        })\n      })\n    })\n  );\n}\nfunction getAngle(centerX, centerY, pointX, pointY) {\n  const y = pointY - centerY;\n  const x = pointX - centerX;\n  const angleInRadians = Math.atan2(y, x);\n  const angleInDeg = Math.round(angleInRadians * (180 / Math.PI)) + 90;\n  if (angleInDeg < 0) {\n    return 360 + angleInDeg;\n  }\n  return angleInDeg;\n}\nexport default AngleCircle;", "const css = `/**\n * SCSS Variables.\n *\n * Please use variables from this sheet to ensure consistency across the UI.\n * Don't add to this sheet unless you're pretty sure the value will be reused in many places.\n * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.\n */\n/**\n * Colors\n */\n/**\n * Fonts & basic variables.\n */\n/**\n * Typography\n */\n/**\n * Grid System.\n * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/\n */\n/**\n * Radius scale.\n */\n/**\n * Elevation scale.\n */\n/**\n * Dimensions.\n */\n/**\n * Mobile specific styles\n */\n/**\n * Editor styles.\n */\n/**\n * Block & Editor UI.\n */\n/**\n * Block paddings.\n */\n/**\n * React Native specific.\n * These variables do not appear to be used anywhere else.\n */\n.style-module__circle-root__j1e41 {\n  border-radius: 50%;\n  border: 1px solid var(--wp-components-color-gray-600, #949494);\n  box-sizing: border-box;\n  cursor: grab;\n  height: 32px;\n  overflow: hidden;\n  width: 32px;\n}\n.style-module__circle-root__j1e41:active {\n  cursor: grabbing;\n}\n\n.style-module__circle-indicator-wrapper__sbrph {\n  box-sizing: border-box;\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.style-module__circle-indicator-wrapper__sbrph:focus-visible {\n  outline: none;\n}\n\n.style-module__circle-indicator__bS-go {\n  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));\n  border-radius: 50%;\n  box-sizing: border-box;\n  display: block;\n  left: 50%;\n  top: 4px;\n  transform: translateX(-50%);\n  position: absolute;\n  width: 6px;\n  height: 6px;\n}`;\ndocument.head\n    .appendChild(document.createElement(\"style\"))\n    .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n  \"circle-root\": \"style-module__circle-root__j1e41\",\n  \"circle-indicator-wrapper\": \"style-module__circle-indicator-wrapper__sbrph\",\n  \"circle-indicator\": \"style-module__circle-indicator__bS-go\"\n};"],
+  "mappings": "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",
   "names": []
 }

package/build-module/angle-picker-control/index.js

@@ -5,8 +5,9 @@ import { isRTL, __ } from "@wordpress/i18n";
 import { Flex, FlexBlock } from "../flex";
 import { Spacer } from "../spacer";
 import NumberControl from "../number-control";
+import InputControlPrefixWrapper from "../input-control/input-prefix-wrapper";
+import InputControlSuffixWrapper from "../input-control/input-suffix-wrapper";
 import AngleCircle from "./angle-circle";
-import { UnitText } from "./styles/angle-picker-control-styles";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function UnforwardedAnglePickerControl(props, ref) {
   const {
@@ -24,10 +25,15 @@ function UnforwardedAnglePickerControl(props, ref) {
     onChange(inputValue);
   };
   const classes = clsx("components-angle-picker-control", className);
-  const unitText = /* @__PURE__ */ _jsx(UnitText, {
-    children: "\xB0"
-  });
-  const [prefixedUnitText, suffixedUnitText] = isRTL() ? [unitText, null] : [null, unitText];
+  const prefixOrSuffixProp = isRTL() ? {
+    prefix: /* @__PURE__ */ _jsx(InputControlPrefixWrapper, {
+      children: "\xB0"
+    })
+  } : {
+    suffix: /* @__PURE__ */ _jsx(InputControlSuffixWrapper, {
+      children: "\xB0"
+    })
+  };
   return /* @__PURE__ */ _jsxs(Flex, {
     ...restProps,
     ref,
@@ -44,8 +50,7 @@ function UnforwardedAnglePickerControl(props, ref) {
         step: "1",
         value,
         spinControls: "none",
-        prefix: prefixedUnitText,
-        suffix: suffixedUnitText
+        ...prefixOrSuffixProp
       })
     }), /* @__PURE__ */ _jsx(Spacer, {
       marginBottom: "1",

package/build-module/angle-picker-control/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/angle-picker-control/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Flex, FlexBlock } from '../flex';\nimport { Spacer } from '../spacer';\nimport NumberControl from '../number-control';\nimport AngleCircle from './angle-circle';\nimport { UnitText } from './styles/angle-picker-control-styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction UnforwardedAnglePickerControl(props, ref) {\n  const {\n    className,\n    label = __('Angle'),\n    onChange,\n    value,\n    ...restProps\n  } = props;\n  const handleOnNumberChange = unprocessedValue => {\n    if (onChange === undefined) {\n      return;\n    }\n    const inputValue = unprocessedValue !== undefined && unprocessedValue !== '' ? parseInt(unprocessedValue, 10) : 0;\n    onChange(inputValue);\n  };\n  const classes = clsx('components-angle-picker-control', className);\n  const unitText = /*#__PURE__*/_jsx(UnitText, {\n    children: \"\\xB0\"\n  });\n  const [prefixedUnitText, suffixedUnitText] = isRTL() ? [unitText, null] : [null, unitText];\n  return /*#__PURE__*/_jsxs(Flex, {\n    ...restProps,\n    ref: ref,\n    className: classes,\n    gap: 2,\n    children: [/*#__PURE__*/_jsx(FlexBlock, {\n      children: /*#__PURE__*/_jsx(NumberControl, {\n        __next40pxDefaultSize: true,\n        label: label,\n        className: \"components-angle-picker-control__input-field\",\n        max: 360,\n        min: 0,\n        onChange: handleOnNumberChange,\n        step: \"1\",\n        value: value,\n        spinControls: \"none\",\n        prefix: prefixedUnitText,\n        suffix: suffixedUnitText\n      })\n    }), /*#__PURE__*/_jsx(Spacer, {\n      marginBottom: \"1\",\n      marginTop: \"auto\",\n      children: /*#__PURE__*/_jsx(AngleCircle, {\n        \"aria-hidden\": \"true\",\n        value: value,\n        onChange: onChange\n      })\n    })]\n  });\n}\n\n/**\n * `AnglePickerControl` is a React component to render a UI that allows users to\n * pick an angle. Users can choose an angle in a visual UI with the mouse by\n * dragging an angle indicator inside a circle or by directly inserting the\n * desired angle in a text field.\n *\n * ```jsx\n * import { useState } from '@wordpress/element';\n * import { AnglePickerControl } from '@wordpress/components';\n *\n * function Example() {\n *   const [ angle, setAngle ] = useState( 0 );\n *   return (\n *     <AnglePickerControl\n *       value={ angle }\n *       onChange={ setAngle }\n *     />\n *   );\n * }\n * ```\n */\nexport const AnglePickerControl = forwardRef(UnforwardedAnglePickerControl);\nexport default AnglePickerControl;"],
-  "mappings": ";AAIA,OAAO,UAAU;AAKjB,SAAS,kBAAkB;AAC3B,SAAS,OAAO,UAAU;AAK1B,SAAS,MAAM,iBAAiB;AAChC,SAAS,cAAc;AACvB,OAAO,mBAAmB;AAC1B,OAAO,iBAAiB;AACxB,SAAS,gBAAgB;AACzB,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,8BAA8B,OAAO,KAAK;AACjD,QAAM;AAAA,IACJ;AAAA,IACA,QAAQ,GAAG,OAAO;AAAA,IAClB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,uBAAuB,sBAAoB;AAC/C,QAAI,aAAa,QAAW;AAC1B;AAAA,IACF;AACA,UAAM,aAAa,qBAAqB,UAAa,qBAAqB,KAAK,SAAS,kBAAkB,EAAE,IAAI;AAChH,aAAS,UAAU;AAAA,EACrB;AACA,QAAM,UAAU,KAAK,mCAAmC,SAAS;AACjE,QAAM,WAAwB,qBAAK,UAAU;AAAA,IAC3C,UAAU;AAAA,EACZ,CAAC;AACD,QAAM,CAAC,kBAAkB,gBAAgB,IAAI,MAAM,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,MAAM,QAAQ;AACzF,SAAoB,sBAAM,MAAM;AAAA,IAC9B,GAAG;AAAA,IACH;AAAA,IACA,WAAW;AAAA,IACX,KAAK;AAAA,IACL,UAAU,CAAc,qBAAK,WAAW;AAAA,MACtC,UAAuB,qBAAK,eAAe;AAAA,QACzC,uBAAuB;AAAA,QACvB;AAAA,QACA,WAAW;AAAA,QACX,KAAK;AAAA,QACL,KAAK;AAAA,QACL,UAAU;AAAA,QACV,MAAM;AAAA,QACN;AAAA,QACA,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,QAAQ;AAAA,MACV,CAAC;AAAA,IACH,CAAC,GAAgB,qBAAK,QAAQ;AAAA,MAC5B,cAAc;AAAA,MACd,WAAW;AAAA,MACX,UAAuB,qBAAK,aAAa;AAAA,QACvC,eAAe;AAAA,QACf;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAuBO,IAAM,qBAAqB,WAAW,6BAA6B;AAC1E,IAAO,+BAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Flex, FlexBlock } from '../flex';\nimport { Spacer } from '../spacer';\nimport NumberControl from '../number-control';\nimport InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';\nimport InputControlSuffixWrapper from '../input-control/input-suffix-wrapper';\nimport AngleCircle from './angle-circle';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction UnforwardedAnglePickerControl(props, ref) {\n  const {\n    className,\n    label = __('Angle'),\n    onChange,\n    value,\n    ...restProps\n  } = props;\n  const handleOnNumberChange = unprocessedValue => {\n    if (onChange === undefined) {\n      return;\n    }\n    const inputValue = unprocessedValue !== undefined && unprocessedValue !== '' ? parseInt(unprocessedValue, 10) : 0;\n    onChange(inputValue);\n  };\n  const classes = clsx('components-angle-picker-control', className);\n\n  // Override the default behavior and position the degree symbol to the\n  // right of the number, regardless of the language direction.\n  const prefixOrSuffixProp = isRTL() ? {\n    prefix: /*#__PURE__*/_jsx(InputControlPrefixWrapper, {\n      children: \"\\xB0\"\n    })\n  } : {\n    suffix: /*#__PURE__*/_jsx(InputControlSuffixWrapper, {\n      children: \"\\xB0\"\n    })\n  };\n  return /*#__PURE__*/_jsxs(Flex, {\n    ...restProps,\n    ref: ref,\n    className: classes,\n    gap: 2,\n    children: [/*#__PURE__*/_jsx(FlexBlock, {\n      children: /*#__PURE__*/_jsx(NumberControl, {\n        __next40pxDefaultSize: true,\n        label: label,\n        className: \"components-angle-picker-control__input-field\",\n        max: 360,\n        min: 0,\n        onChange: handleOnNumberChange,\n        step: \"1\",\n        value: value,\n        spinControls: \"none\",\n        ...prefixOrSuffixProp\n      })\n    }), /*#__PURE__*/_jsx(Spacer, {\n      marginBottom: \"1\",\n      marginTop: \"auto\",\n      children: /*#__PURE__*/_jsx(AngleCircle, {\n        \"aria-hidden\": \"true\",\n        value: value,\n        onChange: onChange\n      })\n    })]\n  });\n}\n\n/**\n * `AnglePickerControl` is a React component to render a UI that allows users to\n * pick an angle. Users can choose an angle in a visual UI with the mouse by\n * dragging an angle indicator inside a circle or by directly inserting the\n * desired angle in a text field.\n *\n * ```jsx\n * import { useState } from '@wordpress/element';\n * import { AnglePickerControl } from '@wordpress/components';\n *\n * function Example() {\n *   const [ angle, setAngle ] = useState( 0 );\n *   return (\n *     <AnglePickerControl\n *       value={ angle }\n *       onChange={ setAngle }\n *     />\n *   );\n * }\n * ```\n */\nexport const AnglePickerControl = forwardRef(UnforwardedAnglePickerControl);\nexport default AnglePickerControl;"],
+  "mappings": ";AAIA,OAAO,UAAU;AAKjB,SAAS,kBAAkB;AAC3B,SAAS,OAAO,UAAU;AAK1B,SAAS,MAAM,iBAAiB;AAChC,SAAS,cAAc;AACvB,OAAO,mBAAmB;AAC1B,OAAO,+BAA+B;AACtC,OAAO,+BAA+B;AACtC,OAAO,iBAAiB;AACxB,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,8BAA8B,OAAO,KAAK;AACjD,QAAM;AAAA,IACJ;AAAA,IACA,QAAQ,GAAG,OAAO;AAAA,IAClB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,uBAAuB,sBAAoB;AAC/C,QAAI,aAAa,QAAW;AAC1B;AAAA,IACF;AACA,UAAM,aAAa,qBAAqB,UAAa,qBAAqB,KAAK,SAAS,kBAAkB,EAAE,IAAI;AAChH,aAAS,UAAU;AAAA,EACrB;AACA,QAAM,UAAU,KAAK,mCAAmC,SAAS;AAIjE,QAAM,qBAAqB,MAAM,IAAI;AAAA,IACnC,QAAqB,qBAAK,2BAA2B;AAAA,MACnD,UAAU;AAAA,IACZ,CAAC;AAAA,EACH,IAAI;AAAA,IACF,QAAqB,qBAAK,2BAA2B;AAAA,MACnD,UAAU;AAAA,IACZ,CAAC;AAAA,EACH;AACA,SAAoB,sBAAM,MAAM;AAAA,IAC9B,GAAG;AAAA,IACH;AAAA,IACA,WAAW;AAAA,IACX,KAAK;AAAA,IACL,UAAU,CAAc,qBAAK,WAAW;AAAA,MACtC,UAAuB,qBAAK,eAAe;AAAA,QACzC,uBAAuB;AAAA,QACvB;AAAA,QACA,WAAW;AAAA,QACX,KAAK;AAAA,QACL,KAAK;AAAA,QACL,UAAU;AAAA,QACV,MAAM;AAAA,QACN;AAAA,QACA,cAAc;AAAA,QACd,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC,GAAgB,qBAAK,QAAQ;AAAA,MAC5B,cAAc;AAAA,MACd,WAAW;AAAA,MACX,UAAuB,qBAAK,aAAa;AAAA,QACvC,eAAe;AAAA,QACf;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAuBO,IAAM,qBAAqB,WAAW,6BAA6B;AAC1E,IAAO,+BAAQ;",
   "names": []
 }

package/build-module/dropdown-menu/index.js

@@ -112,7 +112,7 @@ function UnconnectedDropdownMenu(dropdownMenuProps) {
         ...mergedMenuProps,
         role: "menu",
         children: [isFunction(children) ? children(props) : null, controlSets?.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => /* @__PURE__ */ _jsx(Button, {
-          __next40pxDefaultSize: true,
+          size: "compact",
           onClick: (event) => {
             event.stopPropagation();
             props.onClose();

package/build-module/dropdown-menu/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/dropdown-menu/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { menu } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { contextConnectWithoutRef, useContextSystem } from '../context';\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport { NavigableMenu } from '../navigable-container';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction mergeProps(defaultProps = {}, props = {}) {\n  const mergedProps = {\n    ...defaultProps,\n    ...props\n  };\n  if (props.className && defaultProps.className) {\n    mergedProps.className = clsx(props.className, defaultProps.className);\n  }\n  return mergedProps;\n}\nfunction isFunction(maybeFunc) {\n  return typeof maybeFunc === 'function';\n}\nfunction UnconnectedDropdownMenu(dropdownMenuProps) {\n  const {\n    children,\n    className,\n    controls,\n    icon = menu,\n    label,\n    popoverProps,\n    toggleProps,\n    menuProps,\n    disableOpenOnArrowDown = false,\n    text,\n    noIcons,\n    open,\n    defaultOpen,\n    onToggle: onToggleProp,\n    // Context\n    variant\n  } = useContextSystem(dropdownMenuProps, 'DropdownMenu');\n  if (!controls?.length && !isFunction(children)) {\n    return null;\n  }\n\n  // Normalize controls to nested array of objects (sets of controls)\n  let controlSets;\n  if (controls?.length) {\n    // @ts-expect-error The check below is needed because `DropdownMenus`\n    // rendered by `ToolBarGroup` receive controls as a nested array.\n    controlSets = controls;\n    if (!Array.isArray(controlSets[0])) {\n      // This is not ideal, but at this point we know that `controls` is\n      // not a nested array, even if TypeScript doesn't.\n      controlSets = [controls];\n    }\n  }\n  const mergedPopoverProps = mergeProps({\n    className: 'components-dropdown-menu__popover',\n    variant\n  }, popoverProps);\n  return /*#__PURE__*/_jsx(Dropdown, {\n    className: className,\n    popoverProps: mergedPopoverProps,\n    renderToggle: ({\n      isOpen,\n      onToggle\n    }) => {\n      var _toggleProps$showTool;\n      const openOnArrowDown = event => {\n        if (disableOpenOnArrowDown) {\n          return;\n        }\n        if (!isOpen && event.code === 'ArrowDown') {\n          event.preventDefault();\n          onToggle();\n        }\n      };\n      const {\n        as: Toggle = Button,\n        ...restToggleProps\n      } = toggleProps !== null && toggleProps !== void 0 ? toggleProps : {};\n      const mergedToggleProps = mergeProps({\n        className: clsx('components-dropdown-menu__toggle', {\n          'is-opened': isOpen\n        })\n      }, restToggleProps);\n      return /*#__PURE__*/_jsx(Toggle, {\n        ...mergedToggleProps,\n        icon: icon,\n        onClick: event => {\n          onToggle();\n          if (mergedToggleProps.onClick) {\n            mergedToggleProps.onClick(event);\n          }\n        },\n        onKeyDown: event => {\n          openOnArrowDown(event);\n          if (mergedToggleProps.onKeyDown) {\n            mergedToggleProps.onKeyDown(event);\n          }\n        },\n        \"aria-haspopup\": \"true\",\n        \"aria-expanded\": isOpen,\n        label: label,\n        text: text,\n        showTooltip: (_toggleProps$showTool = toggleProps?.showTooltip) !== null && _toggleProps$showTool !== void 0 ? _toggleProps$showTool : true,\n        children: mergedToggleProps.children\n      });\n    },\n    renderContent: props => {\n      const mergedMenuProps = mergeProps({\n        'aria-label': label,\n        className: clsx('components-dropdown-menu__menu', {\n          'no-icons': noIcons\n        })\n      }, menuProps);\n      return /*#__PURE__*/_jsxs(NavigableMenu, {\n        ...mergedMenuProps,\n        role: \"menu\",\n        children: [isFunction(children) ? children(props) : null, controlSets?.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => /*#__PURE__*/_jsx(Button, {\n          __next40pxDefaultSize: true,\n          onClick: event => {\n            event.stopPropagation();\n            props.onClose();\n            if (control.onClick) {\n              control.onClick();\n            }\n          },\n          className: clsx('components-dropdown-menu__menu-item', {\n            'has-separator': indexOfSet > 0 && indexOfControl === 0,\n            'is-active': control.isActive,\n            'is-icon-only': !control.title\n          }),\n          icon: control.icon,\n          label: control.label,\n          \"aria-checked\": control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.isActive : undefined,\n          role: control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.role : 'menuitem',\n          accessibleWhenDisabled: true,\n          disabled: control.isDisabled,\n          children: control.title\n        }, [indexOfSet, indexOfControl].join())))]\n      });\n    },\n    open: open,\n    defaultOpen: defaultOpen,\n    onToggle: onToggleProp\n  });\n}\n\n/**\n *\n * The DropdownMenu displays a list of actions (each contained in a MenuItem,\n * MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover\n * after the user has interacted with an element (a button or icon) or when\n * they perform a specific action.\n *\n * Render a Dropdown Menu with a set of controls:\n *\n * ```jsx\n * import { DropdownMenu } from '@wordpress/components';\n * import {\n * \tmore,\n * \tarrowLeft,\n * \tarrowRight,\n * \tarrowUp,\n * \tarrowDown,\n * } from '@wordpress/icons';\n *\n * const MyDropdownMenu = () => (\n * \t<DropdownMenu\n * \t\ticon={ more }\n * \t\tlabel=\"Select a direction\"\n * \t\tcontrols={ [\n * \t\t\t{\n * \t\t\t\ttitle: 'Up',\n * \t\t\t\ticon: arrowUp,\n * \t\t\t\tonClick: () => console.log( 'up' ),\n * \t\t\t},\n * \t\t\t{\n * \t\t\t\ttitle: 'Right',\n * \t\t\t\ticon: arrowRight,\n * \t\t\t\tonClick: () => console.log( 'right' ),\n * \t\t\t},\n * \t\t\t{\n * \t\t\t\ttitle: 'Down',\n * \t\t\t\ticon: arrowDown,\n * \t\t\t\tonClick: () => console.log( 'down' ),\n * \t\t\t},\n * \t\t\t{\n * \t\t\t\ttitle: 'Left',\n * \t\t\t\ticon: arrowLeft,\n * \t\t\t\tonClick: () => console.log( 'left' ),\n * \t\t\t},\n * \t\t] }\n * \t/>\n * );\n * ```\n *\n * Alternatively, specify a `children` function which returns elements valid for\n * use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`.\n *\n * ```jsx\n * import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';\n * import { more, arrowUp, arrowDown, trash } from '@wordpress/icons';\n *\n * const MyDropdownMenu = () => (\n * \t<DropdownMenu icon={ more } label=\"Select a direction\">\n * \t\t{ ( { onClose } ) => (\n * \t\t\t<>\n * \t\t\t\t<MenuGroup>\n * \t\t\t\t\t<MenuItem icon={ arrowUp } onClick={ onClose }>\n * \t\t\t\t\t\tMove Up\n * \t\t\t\t\t</MenuItem>\n * \t\t\t\t\t<MenuItem icon={ arrowDown } onClick={ onClose }>\n * \t\t\t\t\t\tMove Down\n * \t\t\t\t\t</MenuItem>\n * \t\t\t\t</MenuGroup>\n * \t\t\t\t<MenuGroup>\n * \t\t\t\t\t<MenuItem icon={ trash } onClick={ onClose }>\n * \t\t\t\t\t\tRemove\n * \t\t\t\t\t</MenuItem>\n * \t\t\t\t</MenuGroup>\n * \t\t\t</>\n * \t\t) }\n * \t</DropdownMenu>\n * );\n * ```\n *\n */\nexport const DropdownMenu = contextConnectWithoutRef(UnconnectedDropdownMenu, 'DropdownMenu');\nexport default DropdownMenu;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { menu } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { contextConnectWithoutRef, useContextSystem } from '../context';\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport { NavigableMenu } from '../navigable-container';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction mergeProps(defaultProps = {}, props = {}) {\n  const mergedProps = {\n    ...defaultProps,\n    ...props\n  };\n  if (props.className && defaultProps.className) {\n    mergedProps.className = clsx(props.className, defaultProps.className);\n  }\n  return mergedProps;\n}\nfunction isFunction(maybeFunc) {\n  return typeof maybeFunc === 'function';\n}\nfunction UnconnectedDropdownMenu(dropdownMenuProps) {\n  const {\n    children,\n    className,\n    controls,\n    icon = menu,\n    label,\n    popoverProps,\n    toggleProps,\n    menuProps,\n    disableOpenOnArrowDown = false,\n    text,\n    noIcons,\n    open,\n    defaultOpen,\n    onToggle: onToggleProp,\n    // Context\n    variant\n  } = useContextSystem(dropdownMenuProps, 'DropdownMenu');\n  if (!controls?.length && !isFunction(children)) {\n    return null;\n  }\n\n  // Normalize controls to nested array of objects (sets of controls)\n  let controlSets;\n  if (controls?.length) {\n    // @ts-expect-error The check below is needed because `DropdownMenus`\n    // rendered by `ToolBarGroup` receive controls as a nested array.\n    controlSets = controls;\n    if (!Array.isArray(controlSets[0])) {\n      // This is not ideal, but at this point we know that `controls` is\n      // not a nested array, even if TypeScript doesn't.\n      controlSets = [controls];\n    }\n  }\n  const mergedPopoverProps = mergeProps({\n    className: 'components-dropdown-menu__popover',\n    variant\n  }, popoverProps);\n  return /*#__PURE__*/_jsx(Dropdown, {\n    className: className,\n    popoverProps: mergedPopoverProps,\n    renderToggle: ({\n      isOpen,\n      onToggle\n    }) => {\n      var _toggleProps$showTool;\n      const openOnArrowDown = event => {\n        if (disableOpenOnArrowDown) {\n          return;\n        }\n        if (!isOpen && event.code === 'ArrowDown') {\n          event.preventDefault();\n          onToggle();\n        }\n      };\n      const {\n        as: Toggle = Button,\n        ...restToggleProps\n      } = toggleProps !== null && toggleProps !== void 0 ? toggleProps : {};\n      const mergedToggleProps = mergeProps({\n        className: clsx('components-dropdown-menu__toggle', {\n          'is-opened': isOpen\n        })\n      }, restToggleProps);\n      return /*#__PURE__*/_jsx(Toggle, {\n        ...mergedToggleProps,\n        icon: icon,\n        onClick: event => {\n          onToggle();\n          if (mergedToggleProps.onClick) {\n            mergedToggleProps.onClick(event);\n          }\n        },\n        onKeyDown: event => {\n          openOnArrowDown(event);\n          if (mergedToggleProps.onKeyDown) {\n            mergedToggleProps.onKeyDown(event);\n          }\n        },\n        \"aria-haspopup\": \"true\",\n        \"aria-expanded\": isOpen,\n        label: label,\n        text: text,\n        showTooltip: (_toggleProps$showTool = toggleProps?.showTooltip) !== null && _toggleProps$showTool !== void 0 ? _toggleProps$showTool : true,\n        children: mergedToggleProps.children\n      });\n    },\n    renderContent: props => {\n      const mergedMenuProps = mergeProps({\n        'aria-label': label,\n        className: clsx('components-dropdown-menu__menu', {\n          'no-icons': noIcons\n        })\n      }, menuProps);\n      return /*#__PURE__*/_jsxs(NavigableMenu, {\n        ...mergedMenuProps,\n        role: \"menu\",\n        children: [isFunction(children) ? children(props) : null, controlSets?.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => /*#__PURE__*/_jsx(Button, {\n          size: \"compact\",\n          onClick: event => {\n            event.stopPropagation();\n            props.onClose();\n            if (control.onClick) {\n              control.onClick();\n            }\n          },\n          className: clsx('components-dropdown-menu__menu-item', {\n            'has-separator': indexOfSet > 0 && indexOfControl === 0,\n            'is-active': control.isActive,\n            'is-icon-only': !control.title\n          }),\n          icon: control.icon,\n          label: control.label,\n          \"aria-checked\": control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.isActive : undefined,\n          role: control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.role : 'menuitem',\n          accessibleWhenDisabled: true,\n          disabled: control.isDisabled,\n          children: control.title\n        }, [indexOfSet, indexOfControl].join())))]\n      });\n    },\n    open: open,\n    defaultOpen: defaultOpen,\n    onToggle: onToggleProp\n  });\n}\n\n/**\n *\n * The DropdownMenu displays a list of actions (each contained in a MenuItem,\n * MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover\n * after the user has interacted with an element (a button or icon) or when\n * they perform a specific action.\n *\n * Render a Dropdown Menu with a set of controls:\n *\n * ```jsx\n * import { DropdownMenu } from '@wordpress/components';\n * import {\n * \tmore,\n * \tarrowLeft,\n * \tarrowRight,\n * \tarrowUp,\n * \tarrowDown,\n * } from '@wordpress/icons';\n *\n * const MyDropdownMenu = () => (\n * \t<DropdownMenu\n * \t\ticon={ more }\n * \t\tlabel=\"Select a direction\"\n * \t\tcontrols={ [\n * \t\t\t{\n * \t\t\t\ttitle: 'Up',\n * \t\t\t\ticon: arrowUp,\n * \t\t\t\tonClick: () => console.log( 'up' ),\n * \t\t\t},\n * \t\t\t{\n * \t\t\t\ttitle: 'Right',\n * \t\t\t\ticon: arrowRight,\n * \t\t\t\tonClick: () => console.log( 'right' ),\n * \t\t\t},\n * \t\t\t{\n * \t\t\t\ttitle: 'Down',\n * \t\t\t\ticon: arrowDown,\n * \t\t\t\tonClick: () => console.log( 'down' ),\n * \t\t\t},\n * \t\t\t{\n * \t\t\t\ttitle: 'Left',\n * \t\t\t\ticon: arrowLeft,\n * \t\t\t\tonClick: () => console.log( 'left' ),\n * \t\t\t},\n * \t\t] }\n * \t/>\n * );\n * ```\n *\n * Alternatively, specify a `children` function which returns elements valid for\n * use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`.\n *\n * ```jsx\n * import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';\n * import { more, arrowUp, arrowDown, trash } from '@wordpress/icons';\n *\n * const MyDropdownMenu = () => (\n * \t<DropdownMenu icon={ more } label=\"Select a direction\">\n * \t\t{ ( { onClose } ) => (\n * \t\t\t<>\n * \t\t\t\t<MenuGroup>\n * \t\t\t\t\t<MenuItem icon={ arrowUp } onClick={ onClose }>\n * \t\t\t\t\t\tMove Up\n * \t\t\t\t\t</MenuItem>\n * \t\t\t\t\t<MenuItem icon={ arrowDown } onClick={ onClose }>\n * \t\t\t\t\t\tMove Down\n * \t\t\t\t\t</MenuItem>\n * \t\t\t\t</MenuGroup>\n * \t\t\t\t<MenuGroup>\n * \t\t\t\t\t<MenuItem icon={ trash } onClick={ onClose }>\n * \t\t\t\t\t\tRemove\n * \t\t\t\t\t</MenuItem>\n * \t\t\t\t</MenuGroup>\n * \t\t\t</>\n * \t\t) }\n * \t</DropdownMenu>\n * );\n * ```\n *\n */\nexport const DropdownMenu = contextConnectWithoutRef(UnconnectedDropdownMenu, 'DropdownMenu');\nexport default DropdownMenu;"],
+  "mappings": "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",
   "names": []
 }