fix: prevent asset conflicts between React and Grid.js versions

Add coexistence checks to all enqueue methods to prevent loading
both React and Grid.js assets simultaneously.

Changes:
- ReactAdmin.php: Only enqueue React assets when ?react=1
- Init.php: Skip Grid.js when React active on admin pages
- Form.php, Coupon.php, Access.php: Restore classic assets when ?react=0
- Customer.php, Product.php, License.php: Add coexistence checks

Now the toggle between Classic and React versions works correctly.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>

node_modules/@wordpress/components/build-module/resizable-box/index.js

@@ -0,0 +1,69 @@
+import { createElement } from "react";
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { Resizable } from 're-resizable';
+/**
+ * Internal dependencies
+ */
+import ResizeTooltip from './resize-tooltip';
+const HANDLE_CLASS_NAME = 'components-resizable-box__handle';
+const SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle';
+const CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle';
+const HANDLE_CLASSES = {
+  top: classnames(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top'),
+  right: classnames(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-right'),
+  bottom: classnames(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom'),
+  left: classnames(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-left'),
+  topLeft: classnames(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-left'),
+  topRight: classnames(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-right'),
+  bottomRight: classnames(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-right'),
+  bottomLeft: classnames(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-left')
+};
+
+// Removes the inline styles in the drag handles.
+const HANDLE_STYLES_OVERRIDES = {
+  width: undefined,
+  height: undefined,
+  top: undefined,
+  right: undefined,
+  bottom: undefined,
+  left: undefined
+};
+const HANDLE_STYLES = {
+  top: HANDLE_STYLES_OVERRIDES,
+  right: HANDLE_STYLES_OVERRIDES,
+  bottom: HANDLE_STYLES_OVERRIDES,
+  left: HANDLE_STYLES_OVERRIDES,
+  topLeft: HANDLE_STYLES_OVERRIDES,
+  topRight: HANDLE_STYLES_OVERRIDES,
+  bottomRight: HANDLE_STYLES_OVERRIDES,
+  bottomLeft: HANDLE_STYLES_OVERRIDES
+};
+function UnforwardedResizableBox({
+  className,
+  children,
+  showHandle = true,
+  __experimentalShowTooltip: showTooltip = false,
+  __experimentalTooltipProps: tooltipProps = {},
+  ...props
+}, ref) {
+  return createElement(Resizable, {
+    className: classnames('components-resizable-box__container', showHandle && 'has-show-handle', className),
+    handleClasses: HANDLE_CLASSES,
+    handleStyles: HANDLE_STYLES,
+    ref: ref,
+    ...props
+  }, children, showTooltip && createElement(ResizeTooltip, {
+    ...tooltipProps
+  }));
+}
+export const ResizableBox = forwardRef(UnforwardedResizableBox);
+export default ResizableBox;
+//# sourceMappingURL=index.js.map

node_modules/@wordpress/components/build-module/resizable-box/index.native.js

@@ -0,0 +1,31 @@
+import { createElement } from "react";
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+/**
+ * WordPress dependencies
+ */
+import { withPreferredColorScheme } from '@wordpress/compose';
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+function ResizableBox(props) {
+  const {
+    size,
+    showHandle = true,
+    getStylesFromColorScheme
+  } = props;
+  const {
+    height
+  } = size;
+  const defaultStyle = getStylesFromColorScheme(styles.staticSpacer, styles.staticDarkSpacer);
+  return createElement(View, {
+    style: [defaultStyle, showHandle && styles.selectedSpacer, {
+      height
+    }]
+  });
+}
+export default withPreferredColorScheme(ResizableBox);
+//# sourceMappingURL=index.native.js.map

node_modules/@wordpress/components/build-module/resizable-box/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","withPreferredColorScheme","styles","ResizableBox","props","size","showHandle","getStylesFromColorScheme","height","defaultStyle","staticSpacer","staticDarkSpacer","createElement","style","selectedSpacer"],"sources":["@wordpress/components/src/resizable-box/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { withPreferredColorScheme } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nfunction ResizableBox( props ) {\n\tconst { size, showHandle = true, getStylesFromColorScheme } = props;\n\tconst { height } = size;\n\tconst defaultStyle = getStylesFromColorScheme(\n\t\tstyles.staticSpacer,\n\t\tstyles.staticDarkSpacer\n\t);\n\treturn (\n\t\t<View\n\t\t\tstyle={ [\n\t\t\t\tdefaultStyle,\n\t\t\t\tshowHandle && styles.selectedSpacer,\n\t\t\t\t{ height },\n\t\t\t] }\n\t\t></View>\n\t);\n}\n\nexport default withPreferredColorScheme( ResizableBox );\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,QAAQ,cAAc;AACnC;AACA;AACA;AACA,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D;AACA;AACA;AACA,OAAOC,MAAM,MAAM,cAAc;AAEjC,SAASC,YAAYA,CAAEC,KAAK,EAAG;EAC9B,MAAM;IAAEC,IAAI;IAAEC,UAAU,GAAG,IAAI;IAAEC;EAAyB,CAAC,GAAGH,KAAK;EACnE,MAAM;IAAEI;EAAO,CAAC,GAAGH,IAAI;EACvB,MAAMI,YAAY,GAAGF,wBAAwB,CAC5CL,MAAM,CAACQ,YAAY,EACnBR,MAAM,CAACS,gBACR,CAAC;EACD,OACCC,aAAA,CAACZ,IAAI;IACJa,KAAK,EAAG,CACPJ,YAAY,EACZH,UAAU,IAAIJ,MAAM,CAACY,cAAc,EACnC;MAAEN;IAAO,CAAC;EACR,CACG,CAAC;AAEV;AAEA,eAAeP,wBAAwB,CAAEE,YAAa,CAAC"}

node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/index.js

@@ -0,0 +1,57 @@
+import { createElement } from "react";
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Label from './label';
+import { useResizeLabel, POSITIONS } from './utils';
+import { Root } from './styles/resize-tooltip.styles';
+const noop = () => {};
+function ResizeTooltip({
+  axis,
+  className,
+  fadeTimeout = 180,
+  isVisible = true,
+  labelRef,
+  onResize = noop,
+  position = POSITIONS.bottom,
+  showPx = true,
+  zIndex = 1000,
+  ...props
+}, ref) {
+  const {
+    label,
+    resizeListener
+  } = useResizeLabel({
+    axis,
+    fadeTimeout,
+    onResize,
+    showPx,
+    position
+  });
+  if (!isVisible) return null;
+  const classes = classnames('components-resize-tooltip', className);
+  return createElement(Root, {
+    "aria-hidden": "true",
+    className: classes,
+    ref: ref,
+    ...props
+  }, resizeListener, createElement(Label, {
+    "aria-hidden": props['aria-hidden'],
+    label: label,
+    position: position,
+    ref: labelRef,
+    zIndex: zIndex
+  }));
+}
+const ForwardedComponent = forwardRef(ResizeTooltip);
+export default ForwardedComponent;
+//# sourceMappingURL=index.js.map

node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["classnames","forwardRef","Label","useResizeLabel","POSITIONS","Root","noop","ResizeTooltip","axis","className","fadeTimeout","isVisible","labelRef","onResize","position","bottom","showPx","zIndex","props","ref","label","resizeListener","classes","createElement","ForwardedComponent"],"sources":["@wordpress/components/src/resizable-box/resize-tooltip/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { Ref, ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Label from './label';\nimport type { Axis, Position } from './utils';\nimport { useResizeLabel, POSITIONS } from './utils';\nimport { Root } from './styles/resize-tooltip.styles';\n\ntype ResizeTooltipProps = React.ComponentProps< typeof Root > & {\n\t'aria-hidden'?: boolean;\n\taxis?: Axis;\n\tclassName?: string;\n\tfadeTimeout?: number;\n\tisVisible?: boolean;\n\tlabelRef?: Ref< HTMLDivElement >;\n\tonResize?: Parameters< typeof useResizeLabel >[ 0 ][ 'onResize' ];\n\tposition?: Position;\n\tshowPx?: boolean;\n\tzIndex?: number;\n};\n\nconst noop = () => {};\n\nfunction ResizeTooltip(\n\t{\n\t\taxis,\n\t\tclassName,\n\t\tfadeTimeout = 180,\n\t\tisVisible = true,\n\t\tlabelRef,\n\t\tonResize = noop,\n\t\tposition = POSITIONS.bottom,\n\t\tshowPx = true,\n\t\tzIndex = 1000,\n\t\t...props\n\t}: ResizeTooltipProps,\n\tref: ForwardedRef< HTMLDivElement >\n): JSX.Element | null {\n\tconst { label, resizeListener } = useResizeLabel( {\n\t\taxis,\n\t\tfadeTimeout,\n\t\tonResize,\n\t\tshowPx,\n\t\tposition,\n\t} );\n\n\tif ( ! isVisible ) return null;\n\n\tconst classes = classnames( 'components-resize-tooltip', className );\n\n\treturn (\n\t\t<Root aria-hidden=\"true\" className={ classes } ref={ ref } { ...props }>\n\t\t\t{ resizeListener }\n\t\t\t<Label\n\t\t\t\taria-hidden={ props[ 'aria-hidden' ] }\n\t\t\t\tlabel={ label }\n\t\t\t\tposition={ position }\n\t\t\t\tref={ labelRef }\n\t\t\t\tzIndex={ zIndex }\n\t\t\t/>\n\t\t</Root>\n\t);\n}\n\nconst ForwardedComponent = forwardRef( ResizeTooltip );\n\nexport default ForwardedComponent;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;AAGnC;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,KAAK,MAAM,SAAS;AAE3B,SAASC,cAAc,EAAEC,SAAS,QAAQ,SAAS;AACnD,SAASC,IAAI,QAAQ,gCAAgC;AAerD,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,SAASC,aAAaA,CACrB;EACCC,IAAI;EACJC,SAAS;EACTC,WAAW,GAAG,GAAG;EACjBC,SAAS,GAAG,IAAI;EAChBC,QAAQ;EACRC,QAAQ,GAAGP,IAAI;EACfQ,QAAQ,GAAGV,SAAS,CAACW,MAAM;EAC3BC,MAAM,GAAG,IAAI;EACbC,MAAM,GAAG,IAAI;EACb,GAAGC;AACgB,CAAC,EACrBC,GAAmC,EACd;EACrB,MAAM;IAAEC,KAAK;IAAEC;EAAe,CAAC,GAAGlB,cAAc,CAAE;IACjDK,IAAI;IACJE,WAAW;IACXG,QAAQ;IACRG,MAAM;IACNF;EACD,CAAE,CAAC;EAEH,IAAK,CAAEH,SAAS,EAAG,OAAO,IAAI;EAE9B,MAAMW,OAAO,GAAGtB,UAAU,CAAE,2BAA2B,EAAES,SAAU,CAAC;EAEpE,OACCc,aAAA,CAAClB,IAAI;IAAC,eAAY,MAAM;IAACI,SAAS,EAAGa,OAAS;IAACH,GAAG,EAAGA,GAAK;IAAA,GAAMD;EAAK,GAClEG,cAAc,EAChBE,aAAA,CAACrB,KAAK;IACL,eAAcgB,KAAK,CAAE,aAAa,CAAI;IACtCE,KAAK,EAAGA,KAAO;IACfN,QAAQ,EAAGA,QAAU;IACrBK,GAAG,EAAGP,QAAU;IAChBK,MAAM,EAAGA;EAAQ,CACjB,CACI,CAAC;AAET;AAEA,MAAMO,kBAAkB,GAAGvB,UAAU,CAAEM,aAAc,CAAC;AAEtD,eAAeiB,kBAAkB"}

node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/label.js

@@ -0,0 +1,71 @@
+import { createElement } from "react";
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+
+import { POSITIONS } from './utils';
+import { TooltipWrapper, Tooltip, LabelText } from './styles/resize-tooltip.styles';
+const CORNER_OFFSET = 4;
+const CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;
+function Label({
+  label,
+  position = POSITIONS.corner,
+  zIndex = 1000,
+  ...props
+}, ref) {
+  const showLabel = !!label;
+  const isBottom = position === POSITIONS.bottom;
+  const isCorner = position === POSITIONS.corner;
+  if (!showLabel) return null;
+  let style = {
+    opacity: showLabel ? 1 : undefined,
+    zIndex
+  };
+  let labelStyle = {};
+  if (isBottom) {
+    style = {
+      ...style,
+      position: 'absolute',
+      bottom: CURSOR_OFFSET_TOP * -1,
+      left: '50%',
+      transform: 'translate(-50%, 0)'
+    };
+    labelStyle = {
+      transform: `translate(0, 100%)`
+    };
+  }
+  if (isCorner) {
+    style = {
+      ...style,
+      position: 'absolute',
+      top: CORNER_OFFSET,
+      right: isRTL() ? undefined : CORNER_OFFSET,
+      left: isRTL() ? CORNER_OFFSET : undefined
+    };
+  }
+  return createElement(TooltipWrapper, {
+    "aria-hidden": "true",
+    className: "components-resizable-tooltip__tooltip-wrapper",
+    ref: ref,
+    style: style,
+    ...props
+  }, createElement(Tooltip, {
+    className: "components-resizable-tooltip__tooltip",
+    style: labelStyle
+  }, createElement(LabelText, {
+    as: "span"
+  }, label)));
+}
+const ForwardedComponent = forwardRef(Label);
+export default ForwardedComponent;
+//# sourceMappingURL=label.js.map

node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/label.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","isRTL","POSITIONS","TooltipWrapper","Tooltip","LabelText","CORNER_OFFSET","CURSOR_OFFSET_TOP","Label","label","position","corner","zIndex","props","ref","showLabel","isBottom","bottom","isCorner","style","opacity","undefined","labelStyle","left","transform","top","right","createElement","className","as","ForwardedComponent"],"sources":["@wordpress/components/src/resizable-box/resize-tooltip/label.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { Position } from './utils';\nimport { POSITIONS } from './utils';\nimport {\n\tTooltipWrapper,\n\tTooltip,\n\tLabelText,\n} from './styles/resize-tooltip.styles';\n\nconst CORNER_OFFSET = 4;\nconst CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;\n\ntype LabelProps = React.DetailedHTMLProps<\n\tReact.HTMLAttributes< HTMLDivElement >,\n\tHTMLDivElement\n> & {\n\tlabel?: string;\n\tposition: Position;\n\tzIndex: number;\n};\n\nfunction Label(\n\t{ label, position = POSITIONS.corner, zIndex = 1000, ...props }: LabelProps,\n\tref: ForwardedRef< HTMLDivElement >\n): JSX.Element | null {\n\tconst showLabel = !! label;\n\n\tconst isBottom = position === POSITIONS.bottom;\n\tconst isCorner = position === POSITIONS.corner;\n\n\tif ( ! showLabel ) return null;\n\n\tlet style: React.CSSProperties = {\n\t\topacity: showLabel ? 1 : undefined,\n\t\tzIndex,\n\t};\n\n\tlet labelStyle = {};\n\n\tif ( isBottom ) {\n\t\tstyle = {\n\t\t\t...style,\n\t\t\tposition: 'absolute',\n\t\t\tbottom: CURSOR_OFFSET_TOP * -1,\n\t\t\tleft: '50%',\n\t\t\ttransform: 'translate(-50%, 0)',\n\t\t};\n\n\t\tlabelStyle = {\n\t\t\ttransform: `translate(0, 100%)`,\n\t\t};\n\t}\n\n\tif ( isCorner ) {\n\t\tstyle = {\n\t\t\t...style,\n\t\t\tposition: 'absolute',\n\t\t\ttop: CORNER_OFFSET,\n\t\t\tright: isRTL() ? undefined : CORNER_OFFSET,\n\t\t\tleft: isRTL() ? CORNER_OFFSET : undefined,\n\t\t};\n\t}\n\n\treturn (\n\t\t<TooltipWrapper\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName=\"components-resizable-tooltip__tooltip-wrapper\"\n\t\t\tref={ ref }\n\t\t\tstyle={ style }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<Tooltip\n\t\t\t\tclassName=\"components-resizable-tooltip__tooltip\"\n\t\t\t\tstyle={ labelStyle }\n\t\t\t>\n\t\t\t\t<LabelText as=\"span\">{ label }</LabelText>\n\t\t\t</Tooltip>\n\t\t</TooltipWrapper>\n\t);\n}\n\nconst ForwardedComponent = forwardRef( Label );\n\nexport default ForwardedComponent;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,KAAK,QAAQ,iBAAiB;;AAEvC;AACA;AACA;;AAEA,SAASC,SAAS,QAAQ,SAAS;AACnC,SACCC,cAAc,EACdC,OAAO,EACPC,SAAS,QACH,gCAAgC;AAEvC,MAAMC,aAAa,GAAG,CAAC;AACvB,MAAMC,iBAAiB,GAAGD,aAAa,GAAG,GAAG;AAW7C,SAASE,KAAKA,CACb;EAAEC,KAAK;EAAEC,QAAQ,GAAGR,SAAS,CAACS,MAAM;EAAEC,MAAM,GAAG,IAAI;EAAE,GAAGC;AAAkB,CAAC,EAC3EC,GAAmC,EACd;EACrB,MAAMC,SAAS,GAAG,CAAC,CAAEN,KAAK;EAE1B,MAAMO,QAAQ,GAAGN,QAAQ,KAAKR,SAAS,CAACe,MAAM;EAC9C,MAAMC,QAAQ,GAAGR,QAAQ,KAAKR,SAAS,CAACS,MAAM;EAE9C,IAAK,CAAEI,SAAS,EAAG,OAAO,IAAI;EAE9B,IAAII,KAA0B,GAAG;IAChCC,OAAO,EAAEL,SAAS,GAAG,CAAC,GAAGM,SAAS;IAClCT;EACD,CAAC;EAED,IAAIU,UAAU,GAAG,CAAC,CAAC;EAEnB,IAAKN,QAAQ,EAAG;IACfG,KAAK,GAAG;MACP,GAAGA,KAAK;MACRT,QAAQ,EAAE,UAAU;MACpBO,MAAM,EAAEV,iBAAiB,GAAG,CAAC,CAAC;MAC9BgB,IAAI,EAAE,KAAK;MACXC,SAAS,EAAE;IACZ,CAAC;IAEDF,UAAU,GAAG;MACZE,SAAS,EAAG;IACb,CAAC;EACF;EAEA,IAAKN,QAAQ,EAAG;IACfC,KAAK,GAAG;MACP,GAAGA,KAAK;MACRT,QAAQ,EAAE,UAAU;MACpBe,GAAG,EAAEnB,aAAa;MAClBoB,KAAK,EAAEzB,KAAK,CAAC,CAAC,GAAGoB,SAAS,GAAGf,aAAa;MAC1CiB,IAAI,EAAEtB,KAAK,CAAC,CAAC,GAAGK,aAAa,GAAGe;IACjC,CAAC;EACF;EAEA,OACCM,aAAA,CAACxB,cAAc;IACd,eAAY,MAAM;IAClByB,SAAS,EAAC,+CAA+C;IACzDd,GAAG,EAAGA,GAAK;IACXK,KAAK,EAAGA,KAAO;IAAA,GACVN;EAAK,GAEVc,aAAA,CAACvB,OAAO;IACPwB,SAAS,EAAC,uCAAuC;IACjDT,KAAK,EAAGG;EAAY,GAEpBK,aAAA,CAACtB,SAAS;IAACwB,EAAE,EAAC;EAAM,GAAGpB,KAAkB,CACjC,CACM,CAAC;AAEnB;AAEA,MAAMqB,kBAAkB,GAAG9B,UAAU,CAAEQ,KAAM,CAAC;AAE9C,eAAesB,kBAAkB"}

node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js

@@ -0,0 +1,56 @@
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+import { Text } from '../../../text';
+import { font, COLORS } from '../../../utils';
+export const Root = _styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1wq7y4k3"
+} : {
+  target: "e1wq7y4k3",
+  label: "Root"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1cd7zoc",
+  styles: "bottom:0;box-sizing:border-box;left:0;pointer-events:none;position:absolute;right:0;top:0"
+} : {
+  name: "1cd7zoc",
+  styles: "bottom:0;box-sizing:border-box;left:0;pointer-events:none;position:absolute;right:0;top:0",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvcmVzaXphYmxlLWJveC9yZXNpemUtdG9vbHRpcC9zdHlsZXMvcmVzaXplLXRvb2x0aXAuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVc4QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3Jlc2l6YWJsZS1ib3gvcmVzaXplLXRvb2x0aXAvc3R5bGVzL3Jlc2l6ZS10b29sdGlwLnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gJy4uLy4uLy4uL3RleHQnO1xuaW1wb3J0IHsgZm9udCwgQ09MT1JTIH0gZnJvbSAnLi4vLi4vLi4vdXRpbHMnO1xuXG5leHBvcnQgY29uc3QgUm9vdCA9IHN0eWxlZC5kaXZgXG5cdGJvdHRvbTogMDtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0bGVmdDogMDtcblx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0cmlnaHQ6IDA7XG5cdHRvcDogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBUb29sdGlwV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGlubGluZS1mbGV4O1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblx0b3BhY2l0eTogMDtcblx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cdHRyYW5zaXRpb246IG9wYWNpdHkgMTIwbXMgbGluZWFyO1xuYDtcblxuZXhwb3J0IGNvbnN0IFRvb2x0aXAgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0Ym9yZGVyLXJhZGl1czogMnB4O1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRmb250LWZhbWlseTogJHsgZm9udCggJ2RlZmF1bHQuZm9udEZhbWlseScgKSB9O1xuXHRmb250LXNpemU6IDEycHg7XG5cdGNvbG9yOiAkeyBDT0xPUlMudWkudGV4dERhcmsgfTtcblx0cGFkZGluZzogNHB4IDhweDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuLy8gVE9ETzogUmVzb2x2ZSBuZWVkIHRvIHVzZSAmJiYgdG8gaW5jcmVhc2Ugc3BlY2lmaWNpdHlcbi8vIGh0dHBzOi8vZ2l0aHViLmNvbS9Xb3JkUHJlc3MvZ3V0ZW5iZXJnL2lzc3Vlcy8xODQ4M1xuXG5leHBvcnQgY29uc3QgTGFiZWxUZXh0ID0gc3R5bGVkKCBUZXh0IClgXG5cdCYmJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy51aS50ZXh0RGFyayB9O1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdGZvbnQtc2l6ZTogMTNweDtcblx0XHRsaW5lLWhlaWdodDogMS40O1xuXHRcdHdoaXRlLXNwYWNlOiBub3dyYXA7XG5cdH1cbmA7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const TooltipWrapper = _styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1wq7y4k2"
+} : {
+  target: "e1wq7y4k2",
+  label: "TooltipWrapper"
+})(process.env.NODE_ENV === "production" ? {
+  name: "ajymcs",
+  styles: "align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;opacity:0;pointer-events:none;transition:opacity 120ms linear"
+} : {
+  name: "ajymcs",
+  styles: "align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;opacity:0;pointer-events:none;transition:opacity 120ms linear",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvcmVzaXphYmxlLWJveC9yZXNpemUtdG9vbHRpcC9zdHlsZXMvcmVzaXplLXRvb2x0aXAuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFCd0MiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9yZXNpemFibGUtYm94L3Jlc2l6ZS10b29sdGlwL3N0eWxlcy9yZXNpemUtdG9vbHRpcC5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi8uLi8uLi90ZXh0JztcbmltcG9ydCB7IGZvbnQsIENPTE9SUyB9IGZyb20gJy4uLy4uLy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuXHRib3R0b206IDA7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGxlZnQ6IDA7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHJpZ2h0OiAwO1xuXHR0b3A6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgVG9vbHRpcFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdG9wYWNpdHk6IDA7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHR0cmFuc2l0aW9uOiBvcGFjaXR5IDEyMG1zIGxpbmVhcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBUb29sdGlwID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmdyYXlbIDkwMCBdIH07XG5cdGJvcmRlci1yYWRpdXM6IDJweDtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0Zm9udC1mYW1pbHk6ICR7IGZvbnQoICdkZWZhdWx0LmZvbnRGYW1pbHknICkgfTtcblx0Zm9udC1zaXplOiAxMnB4O1xuXHRjb2xvcjogJHsgQ09MT1JTLnVpLnRleHREYXJrIH07XG5cdHBhZGRpbmc6IDRweCA4cHg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbi8vIFRPRE86IFJlc29sdmUgbmVlZCB0byB1c2UgJiYmIHRvIGluY3JlYXNlIHNwZWNpZmljaXR5XG4vLyBodHRwczovL2dpdGh1Yi5jb20vV29yZFByZXNzL2d1dGVuYmVyZy9pc3N1ZXMvMTg0ODNcblxuZXhwb3J0IGNvbnN0IExhYmVsVGV4dCA9IHN0eWxlZCggVGV4dCApYFxuXHQmJiYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudWkudGV4dERhcmsgfTtcblx0XHRkaXNwbGF5OiBibG9jaztcblx0XHRmb250LXNpemU6IDEzcHg7XG5cdFx0bGluZS1oZWlnaHQ6IDEuNDtcblx0XHR3aGl0ZS1zcGFjZTogbm93cmFwO1xuXHR9XG5gO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const Tooltip = _styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1wq7y4k1"
+} : {
+  target: "e1wq7y4k1",
+  label: "Tooltip"
+})("background:", COLORS.gray[900], ";border-radius:2px;box-sizing:border-box;font-family:", font('default.fontFamily'), ";font-size:12px;color:", COLORS.ui.textDark, ";padding:4px 8px;position:relative;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvcmVzaXphYmxlLWJveC9yZXNpemUtdG9vbHRpcC9zdHlsZXMvcmVzaXplLXRvb2x0aXAuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStCaUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9yZXNpemFibGUtYm94L3Jlc2l6ZS10b29sdGlwL3N0eWxlcy9yZXNpemUtdG9vbHRpcC5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi8uLi8uLi90ZXh0JztcbmltcG9ydCB7IGZvbnQsIENPTE9SUyB9IGZyb20gJy4uLy4uLy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuXHRib3R0b206IDA7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGxlZnQ6IDA7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHJpZ2h0OiAwO1xuXHR0b3A6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgVG9vbHRpcFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdG9wYWNpdHk6IDA7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHR0cmFuc2l0aW9uOiBvcGFjaXR5IDEyMG1zIGxpbmVhcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBUb29sdGlwID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmdyYXlbIDkwMCBdIH07XG5cdGJvcmRlci1yYWRpdXM6IDJweDtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0Zm9udC1mYW1pbHk6ICR7IGZvbnQoICdkZWZhdWx0LmZvbnRGYW1pbHknICkgfTtcblx0Zm9udC1zaXplOiAxMnB4O1xuXHRjb2xvcjogJHsgQ09MT1JTLnVpLnRleHREYXJrIH07XG5cdHBhZGRpbmc6IDRweCA4cHg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbi8vIFRPRE86IFJlc29sdmUgbmVlZCB0byB1c2UgJiYmIHRvIGluY3JlYXNlIHNwZWNpZmljaXR5XG4vLyBodHRwczovL2dpdGh1Yi5jb20vV29yZFByZXNzL2d1dGVuYmVyZy9pc3N1ZXMvMTg0ODNcblxuZXhwb3J0IGNvbnN0IExhYmVsVGV4dCA9IHN0eWxlZCggVGV4dCApYFxuXHQmJiYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudWkudGV4dERhcmsgfTtcblx0XHRkaXNwbGF5OiBibG9jaztcblx0XHRmb250LXNpemU6IDEzcHg7XG5cdFx0bGluZS1oZWlnaHQ6IDEuNDtcblx0XHR3aGl0ZS1zcGFjZTogbm93cmFwO1xuXHR9XG5gO1xuIl19 */"));
+
+// TODO: Resolve need to use &&& to increase specificity
+// https://github.com/WordPress/gutenberg/issues/18483
+
+export const LabelText = /*#__PURE__*/_styled(Text, process.env.NODE_ENV === "production" ? {
+  target: "e1wq7y4k0"
+} : {
+  target: "e1wq7y4k0",
+  label: "LabelText"
+})("&&&{color:", COLORS.ui.textDark, ";display:block;font-size:13px;line-height:1.4;white-space:nowrap;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvcmVzaXphYmxlLWJveC9yZXNpemUtdG9vbHRpcC9zdHlsZXMvcmVzaXplLXRvb2x0aXAuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZDdUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9yZXNpemFibGUtYm94L3Jlc2l6ZS10b29sdGlwL3N0eWxlcy9yZXNpemUtdG9vbHRpcC5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi8uLi8uLi90ZXh0JztcbmltcG9ydCB7IGZvbnQsIENPTE9SUyB9IGZyb20gJy4uLy4uLy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuXHRib3R0b206IDA7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGxlZnQ6IDA7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHJpZ2h0OiAwO1xuXHR0b3A6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgVG9vbHRpcFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdG9wYWNpdHk6IDA7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHR0cmFuc2l0aW9uOiBvcGFjaXR5IDEyMG1zIGxpbmVhcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBUb29sdGlwID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmdyYXlbIDkwMCBdIH07XG5cdGJvcmRlci1yYWRpdXM6IDJweDtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0Zm9udC1mYW1pbHk6ICR7IGZvbnQoICdkZWZhdWx0LmZvbnRGYW1pbHknICkgfTtcblx0Zm9udC1zaXplOiAxMnB4O1xuXHRjb2xvcjogJHsgQ09MT1JTLnVpLnRleHREYXJrIH07XG5cdHBhZGRpbmc6IDRweCA4cHg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbi8vIFRPRE86IFJlc29sdmUgbmVlZCB0byB1c2UgJiYmIHRvIGluY3JlYXNlIHNwZWNpZmljaXR5XG4vLyBodHRwczovL2dpdGh1Yi5jb20vV29yZFByZXNzL2d1dGVuYmVyZy9pc3N1ZXMvMTg0ODNcblxuZXhwb3J0IGNvbnN0IExhYmVsVGV4dCA9IHN0eWxlZCggVGV4dCApYFxuXHQmJiYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudWkudGV4dERhcmsgfTtcblx0XHRkaXNwbGF5OiBibG9jaztcblx0XHRmb250LXNpemU6IDEzcHg7XG5cdFx0bGluZS1oZWlnaHQ6IDEuNDtcblx0XHR3aGl0ZS1zcGFjZTogbm93cmFwO1xuXHR9XG5gO1xuIl19 */"));
+//# sourceMappingURL=resize-tooltip.styles.js.map

node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Text","font","COLORS","Root","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","TooltipWrapper","Tooltip","gray","ui","textDark","LabelText"],"sources":["@wordpress/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { Text } from '../../../text';\nimport { font, COLORS } from '../../../utils';\n\nexport const Root = styled.div`\n\tbottom: 0;\n\tbox-sizing: border-box;\n\tleft: 0;\n\tpointer-events: none;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n`;\n\nexport const TooltipWrapper = styled.div`\n\talign-items: center;\n\tbox-sizing: border-box;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\topacity: 0;\n\tpointer-events: none;\n\ttransition: opacity 120ms linear;\n`;\n\nexport const Tooltip = styled.div`\n\tbackground: ${ COLORS.gray[ 900 ] };\n\tborder-radius: 2px;\n\tbox-sizing: border-box;\n\tfont-family: ${ font( 'default.fontFamily' ) };\n\tfont-size: 12px;\n\tcolor: ${ COLORS.ui.textDark };\n\tpadding: 4px 8px;\n\tposition: relative;\n`;\n\n// TODO: Resolve need to use &&& to increase specificity\n// https://github.com/WordPress/gutenberg/issues/18483\n\nexport const LabelText = styled( Text )`\n\t&&& {\n\t\tcolor: ${ COLORS.ui.textDark };\n\t\tdisplay: block;\n\t\tfont-size: 13px;\n\t\tline-height: 1.4;\n\t\twhite-space: nowrap;\n\t}\n`;\n"],"mappings":";;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,IAAI,QAAQ,eAAe;AACpC,SAASC,IAAI,EAAEC,MAAM,QAAQ,gBAAgB;AAE7C,OAAO,MAAMC,IAAI,GAAAC,OAAA,QAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,EAQhB;AAED,OAAO,MAAMC,cAAc,GAAAX,OAAA,QAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,EAQ1B;AAED,OAAO,MAAME,OAAO,GAAAZ,OAAA,QAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,kBACJP,MAAM,CAACe,IAAI,CAAE,GAAG,CAAE,2DAGjBhB,IAAI,CAAE,oBAAqB,CAAC,4BAElCC,MAAM,CAACgB,EAAE,CAACC,QAAQ,2CAAAd,OAAA,CAAAC,GAAA,CAAAC,QAAA,w+DAG5B;;AAED;AACA;;AAEA,OAAO,MAAMa,SAAS,GAAG,aAAAhB,OAAA,CAAQJ,IAAI,EAAAK,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,CAAC,CAAC,eAE3BP,MAAM,CAACgB,EAAE,CAACC,QAAQ,0EAAAd,OAAA,CAAAC,GAAA,CAAAC,QAAA,w+DAM7B"}

node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/utils.js

@@ -0,0 +1,197 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
+import { useResizeObserver } from '@wordpress/compose';
+const noop = () => {};
+export const POSITIONS = {
+  bottom: 'bottom',
+  corner: 'corner'
+};
+/**
+ * Custom hook that manages resize listener events. It also provides a label
+ * based on current resize width x height values.
+ *
+ * @param props
+ * @param props.axis        Only shows the label corresponding to the axis.
+ * @param props.fadeTimeout Duration (ms) before deactivating the resize label.
+ * @param props.onResize    Callback when a resize occurs. Provides { width, height } callback.
+ * @param props.position    Adjusts label value.
+ * @param props.showPx      Whether to add `PX` to the label.
+ *
+ * @return Properties for hook.
+ */
+export function useResizeLabel({
+  axis,
+  fadeTimeout = 180,
+  onResize = noop,
+  position = POSITIONS.bottom,
+  showPx = false
+}) {
+  /*
+   * The width/height values derive from this special useResizeObserver hook.
+   * This custom hook uses the ResizeObserver API to listen for resize events.
+   */
+  const [resizeListener, sizes] = useResizeObserver();
+
+  /*
+   * Indicates if the x/y axis is preferred.
+   * If set, we will avoid resetting the moveX and moveY values.
+   * This will allow for the preferred axis values to persist in the label.
+   */
+  const isAxisControlled = !!axis;
+
+  /*
+   * The moveX and moveY values are used to track whether the label should
+   * display width, height, or width x height.
+   */
+  const [moveX, setMoveX] = useState(false);
+  const [moveY, setMoveY] = useState(false);
+
+  /*
+   * Cached dimension values to check for width/height updates from the
+   * sizes property from useResizeAware()
+   */
+  const {
+    width,
+    height
+  } = sizes;
+  const heightRef = useRef(height);
+  const widthRef = useRef(width);
+
+  /*
+   * This timeout is used with setMoveX and setMoveY to determine of
+   * both width and height values have changed at (roughly) the same time.
+   */
+  const moveTimeoutRef = useRef();
+  const debounceUnsetMoveXY = useCallback(() => {
+    const unsetMoveXY = () => {
+      /*
+       * If axis is controlled, we will avoid resetting the moveX and moveY values.
+       * This will allow for the preferred axis values to persist in the label.
+       */
+      if (isAxisControlled) return;
+      setMoveX(false);
+      setMoveY(false);
+    };
+    if (moveTimeoutRef.current) {
+      window.clearTimeout(moveTimeoutRef.current);
+    }
+    moveTimeoutRef.current = window.setTimeout(unsetMoveXY, fadeTimeout);
+  }, [fadeTimeout, isAxisControlled]);
+  useEffect(() => {
+    /*
+     * On the initial render of useResizeAware, the height and width values are
+     * null. They are calculated then set using via an internal useEffect hook.
+     */
+    const isRendered = width !== null || height !== null;
+    if (!isRendered) return;
+    const didWidthChange = width !== widthRef.current;
+    const didHeightChange = height !== heightRef.current;
+    if (!didWidthChange && !didHeightChange) return;
+
+    /*
+     * After the initial render, the useResizeAware will set the first
+     * width and height values. We'll sync those values with our
+     * width and height refs. However, we shouldn't render our Tooltip
+     * label on this first cycle.
+     */
+    if (width && !widthRef.current && height && !heightRef.current) {
+      widthRef.current = width;
+      heightRef.current = height;
+      return;
+    }
+
+    /*
+     * After the first cycle, we can track width and height changes.
+     */
+    if (didWidthChange) {
+      setMoveX(true);
+      widthRef.current = width;
+    }
+    if (didHeightChange) {
+      setMoveY(true);
+      heightRef.current = height;
+    }
+    onResize({
+      width,
+      height
+    });
+    debounceUnsetMoveXY();
+  }, [width, height, onResize, debounceUnsetMoveXY]);
+  const label = getSizeLabel({
+    axis,
+    height,
+    moveX,
+    moveY,
+    position,
+    showPx,
+    width
+  });
+  return {
+    label,
+    resizeListener
+  };
+}
+/**
+ * Gets the resize label based on width and height values (as well as recent changes).
+ *
+ * @param props
+ * @param props.axis     Only shows the label corresponding to the axis.
+ * @param props.height   Height value.
+ * @param props.moveX    Recent width (x axis) changes.
+ * @param props.moveY    Recent width (y axis) changes.
+ * @param props.position Adjusts label value.
+ * @param props.showPx   Whether to add `PX` to the label.
+ * @param props.width    Width value.
+ *
+ * @return The rendered label.
+ */
+function getSizeLabel({
+  axis,
+  height,
+  moveX = false,
+  moveY = false,
+  position = POSITIONS.bottom,
+  showPx = false,
+  width
+}) {
+  if (!moveX && !moveY) return undefined;
+
+  /*
+   * Corner position...
+   * We want the label to appear like width x height.
+   */
+  if (position === POSITIONS.corner) {
+    return `${width} x ${height}`;
+  }
+
+  /*
+   * Other POSITIONS...
+   * The label will combine both width x height values if both
+   * values have recently been changed.
+   *
+   * Otherwise, only width or height will be displayed.
+   * The `PX` unit will be added, if specified by the `showPx` prop.
+   */
+  const labelUnit = showPx ? ' px' : '';
+  if (axis) {
+    if (axis === 'x' && moveX) {
+      return `${width}${labelUnit}`;
+    }
+    if (axis === 'y' && moveY) {
+      return `${height}${labelUnit}`;
+    }
+  }
+  if (moveX && moveY) {
+    return `${width} x ${height}`;
+  }
+  if (moveX) {
+    return `${width}${labelUnit}`;
+  }
+  if (moveY) {
+    return `${height}${labelUnit}`;
+  }
+  return undefined;
+}
+//# sourceMappingURL=utils.js.map