@wordpress/components 27.5.0 → 28.0.0

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

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useRef","__experimentalUseDragging","useDragging","CircleRoot","CircleIndicatorWrapper","CircleIndicator","AngleCircle","value","onChange","props","angleCircleRef","angleCircleCenter","previousCursorValue","setAngleCircleCenter","current","rect","getBoundingClientRect","x","width","y","height","changeAngleToPosition","event","undefined","preventDefault","target","focus","centerX","centerY","getAngle","clientX","clientY","startDrag","isDragging","onDragStart","onDragMove","onDragEnd","document","body","style","cursor","createElement","ref","onMouseDown","className","transform","tabIndex","pointX","pointY","angleInRadians","Math","atan2","angleInDeg","round","PI"],"sources":["@wordpress/components/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 {\n\tCircleRoot,\n\tCircleIndicatorWrapper,\n\tCircleIndicator,\n} from './styles/angle-picker-control-styles';\n\nimport type { WordPressComponentProps } from '../context';\nimport type { AngleCircleProps } from './types';\n\ntype UseDraggingArgumentType = Parameters< typeof useDragging >[ 0 ];\ntype UseDraggingCallbackEvent =\n\t| Parameters< UseDraggingArgumentType[ 'onDragStart' ] >[ 0 ]\n\t| Parameters< UseDraggingArgumentType[ 'onDragMove' ] >[ 0 ]\n\t| Parameters< UseDraggingArgumentType[ 'onDragEnd' ] >[ 0 ];\n\nfunction AngleCircle( {\n\tvalue,\n\tonChange,\n\t...props\n}: WordPressComponentProps< AngleCircleProps, 'div' > ) {\n\tconst angleCircleRef = useRef< HTMLDivElement | null >( null );\n\tconst angleCircleCenter = useRef< { x: number; y: number } | undefined >();\n\tconst previousCursorValue = useRef< CSSStyleDeclaration[ 'cursor' ] >();\n\n\tconst setAngleCircleCenter = () => {\n\t\tif ( angleCircleRef.current === null ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst rect = angleCircleRef.current.getBoundingClientRect();\n\t\tangleCircleCenter.current = {\n\t\t\tx: rect.x + rect.width / 2,\n\t\t\ty: rect.y + rect.height / 2,\n\t\t};\n\t};\n\n\tconst changeAngleToPosition = ( event: UseDraggingCallbackEvent ) => {\n\t\tif ( event === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Prevent (drag) mouse events from selecting and accidentally\n\t\t// triggering actions from other elements.\n\t\tevent.preventDefault();\n\t\t// Input control needs to lose focus and by preventDefault above, it doesn't.\n\t\t( event.target as HTMLDivElement | null )?.focus();\n\n\t\tif (\n\t\t\tangleCircleCenter.current !== undefined &&\n\t\t\tonChange !== undefined\n\t\t) {\n\t\t\tconst { x: centerX, y: centerY } = angleCircleCenter.current;\n\t\t\tonChange(\n\t\t\t\tgetAngle( centerX, centerY, event.clientX, event.clientY )\n\t\t\t);\n\t\t}\n\t};\n\n\tconst { startDrag, isDragging } = useDragging( {\n\t\tonDragStart: ( event ) => {\n\t\t\tsetAngleCircleCenter();\n\t\t\tchangeAngleToPosition( event );\n\t\t},\n\t\tonDragMove: changeAngleToPosition,\n\t\tonDragEnd: changeAngleToPosition,\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( isDragging ) {\n\t\t\tif ( previousCursorValue.current === undefined ) {\n\t\t\t\tpreviousCursorValue.current = document.body.style.cursor;\n\t\t\t}\n\t\t\tdocument.body.style.cursor = 'grabbing';\n\t\t} else {\n\t\t\tdocument.body.style.cursor = previousCursorValue.current || '';\n\t\t\tpreviousCursorValue.current = undefined;\n\t\t}\n\t}, [ isDragging ] );\n\n\treturn (\n\t\t<CircleRoot\n\t\t\tref={ angleCircleRef }\n\t\t\tonMouseDown={ startDrag }\n\t\t\tclassName=\"components-angle-picker-control__angle-circle\"\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<CircleIndicatorWrapper\n\t\t\t\tstyle={\n\t\t\t\t\tvalue ? { transform: `rotate(${ value }deg)` } : undefined\n\t\t\t\t}\n\t\t\t\tclassName=\"components-angle-picker-control__angle-circle-indicator-wrapper\"\n\t\t\t\ttabIndex={ -1 }\n\t\t\t>\n\t\t\t\t<CircleIndicator className=\"components-angle-picker-control__angle-circle-indicator\" />\n\t\t\t</CircleIndicatorWrapper>\n\t\t</CircleRoot>\n\t);\n}\n\nfunction getAngle(\n\tcenterX: number,\n\tcenterY: number,\n\tpointX: number,\n\tpointY: number\n) {\n\tconst y = pointY - centerY;\n\tconst x = pointX - centerX;\n\n\tconst angleInRadians = Math.atan2( y, x );\n\tconst angleInDeg = Math.round( angleInRadians * ( 180 / Math.PI ) ) + 90;\n\tif ( angleInDeg < 0 ) {\n\t\treturn 360 + angleInDeg;\n\t}\n\treturn angleInDeg;\n}\n\nexport default AngleCircle;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useEffect","useRef","__experimentalUseDragging","useDragging","CircleRoot","CircleIndicatorWrapper","CircleIndicator","jsx","_jsx","AngleCircle","value","onChange","props","angleCircleRef","angleCircleCenter","previousCursorValue","setAngleCircleCenter","current","rect","getBoundingClientRect","x","width","y","height","changeAngleToPosition","event","undefined","preventDefault","target","focus","centerX","centerY","getAngle","clientX","clientY","startDrag","isDragging","onDragStart","onDragMove","onDragEnd","document","body","style","cursor","ref","onMouseDown","className","children","transform","tabIndex","pointX","pointY","angleInRadians","Math","atan2","angleInDeg","round","PI"],"sources":["@wordpress/components/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 {\n\tCircleRoot,\n\tCircleIndicatorWrapper,\n\tCircleIndicator,\n} from './styles/angle-picker-control-styles';\n\nimport type { WordPressComponentProps } from '../context';\nimport type { AngleCircleProps } from './types';\n\ntype UseDraggingArgumentType = Parameters< typeof useDragging >[ 0 ];\ntype UseDraggingCallbackEvent =\n\t| Parameters< UseDraggingArgumentType[ 'onDragStart' ] >[ 0 ]\n\t| Parameters< UseDraggingArgumentType[ 'onDragMove' ] >[ 0 ]\n\t| Parameters< UseDraggingArgumentType[ 'onDragEnd' ] >[ 0 ];\n\nfunction AngleCircle( {\n\tvalue,\n\tonChange,\n\t...props\n}: WordPressComponentProps< AngleCircleProps, 'div' > ) {\n\tconst angleCircleRef = useRef< HTMLDivElement | null >( null );\n\tconst angleCircleCenter = useRef< { x: number; y: number } | undefined >();\n\tconst previousCursorValue = useRef< CSSStyleDeclaration[ 'cursor' ] >();\n\n\tconst setAngleCircleCenter = () => {\n\t\tif ( angleCircleRef.current === null ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst rect = angleCircleRef.current.getBoundingClientRect();\n\t\tangleCircleCenter.current = {\n\t\t\tx: rect.x + rect.width / 2,\n\t\t\ty: rect.y + rect.height / 2,\n\t\t};\n\t};\n\n\tconst changeAngleToPosition = ( event: UseDraggingCallbackEvent ) => {\n\t\tif ( event === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Prevent (drag) mouse events from selecting and accidentally\n\t\t// triggering actions from other elements.\n\t\tevent.preventDefault();\n\t\t// Input control needs to lose focus and by preventDefault above, it doesn't.\n\t\t( event.target as HTMLDivElement | null )?.focus();\n\n\t\tif (\n\t\t\tangleCircleCenter.current !== undefined &&\n\t\t\tonChange !== undefined\n\t\t) {\n\t\t\tconst { x: centerX, y: centerY } = angleCircleCenter.current;\n\t\t\tonChange(\n\t\t\t\tgetAngle( centerX, centerY, event.clientX, event.clientY )\n\t\t\t);\n\t\t}\n\t};\n\n\tconst { startDrag, isDragging } = useDragging( {\n\t\tonDragStart: ( event ) => {\n\t\t\tsetAngleCircleCenter();\n\t\t\tchangeAngleToPosition( event );\n\t\t},\n\t\tonDragMove: changeAngleToPosition,\n\t\tonDragEnd: changeAngleToPosition,\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( isDragging ) {\n\t\t\tif ( previousCursorValue.current === undefined ) {\n\t\t\t\tpreviousCursorValue.current = document.body.style.cursor;\n\t\t\t}\n\t\t\tdocument.body.style.cursor = 'grabbing';\n\t\t} else {\n\t\t\tdocument.body.style.cursor = previousCursorValue.current || '';\n\t\t\tpreviousCursorValue.current = undefined;\n\t\t}\n\t}, [ isDragging ] );\n\n\treturn (\n\t\t<CircleRoot\n\t\t\tref={ angleCircleRef }\n\t\t\tonMouseDown={ startDrag }\n\t\t\tclassName=\"components-angle-picker-control__angle-circle\"\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<CircleIndicatorWrapper\n\t\t\t\tstyle={\n\t\t\t\t\tvalue ? { transform: `rotate(${ value }deg)` } : undefined\n\t\t\t\t}\n\t\t\t\tclassName=\"components-angle-picker-control__angle-circle-indicator-wrapper\"\n\t\t\t\ttabIndex={ -1 }\n\t\t\t>\n\t\t\t\t<CircleIndicator className=\"components-angle-picker-control__angle-circle-indicator\" />\n\t\t\t</CircleIndicatorWrapper>\n\t\t</CircleRoot>\n\t);\n}\n\nfunction getAngle(\n\tcenterX: number,\n\tcenterY: number,\n\tpointX: number,\n\tpointY: number\n) {\n\tconst y = pointY - centerY;\n\tconst x = pointX - centerX;\n\n\tconst angleInRadians = Math.atan2( y, x );\n\tconst angleInDeg = Math.round( angleInRadians * ( 180 / Math.PI ) ) + 90;\n\tif ( angleInDeg < 0 ) {\n\t\treturn 360 + angleInDeg;\n\t}\n\treturn angleInDeg;\n}\n\nexport default AngleCircle;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;AACtD,SAASC,yBAAyB,IAAIC,WAAW,QAAQ,oBAAoB;;AAE7E;AACA;AACA;AACA,SACCC,UAAU,EACVC,sBAAsB,EACtBC,eAAe,QACT,sCAAsC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAW9C,SAASC,WAAWA,CAAE;EACrBC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACgD,CAAC,EAAG;EACvD,MAAMC,cAAc,GAAGZ,MAAM,CAA2B,IAAK,CAAC;EAC9D,MAAMa,iBAAiB,GAAGb,MAAM,CAAyC,CAAC;EAC1E,MAAMc,mBAAmB,GAAGd,MAAM,CAAoC,CAAC;EAEvE,MAAMe,oBAAoB,GAAGA,CAAA,KAAM;IAClC,IAAKH,cAAc,CAACI,OAAO,KAAK,IAAI,EAAG;MACtC;IACD;IAEA,MAAMC,IAAI,GAAGL,cAAc,CAACI,OAAO,CAACE,qBAAqB,CAAC,CAAC;IAC3DL,iBAAiB,CAACG,OAAO,GAAG;MAC3BG,CAAC,EAAEF,IAAI,CAACE,CAAC,GAAGF,IAAI,CAACG,KAAK,GAAG,CAAC;MAC1BC,CAAC,EAAEJ,IAAI,CAACI,CAAC,GAAGJ,IAAI,CAACK,MAAM,GAAG;IAC3B,CAAC;EACF,CAAC;EAED,MAAMC,qBAAqB,GAAKC,KAA+B,IAAM;IACpE,IAAKA,KAAK,KAAKC,SAAS,EAAG;MAC1B;IACD;;IAEA;IACA;IACAD,KAAK,CAACE,cAAc,CAAC,CAAC;IACtB;IACEF,KAAK,CAACG,MAAM,EAA6BC,KAAK,CAAC,CAAC;IAElD,IACCf,iBAAiB,CAACG,OAAO,KAAKS,SAAS,IACvCf,QAAQ,KAAKe,SAAS,EACrB;MACD,MAAM;QAAEN,CAAC,EAAEU,OAAO;QAAER,CAAC,EAAES;MAAQ,CAAC,GAAGjB,iBAAiB,CAACG,OAAO;MAC5DN,QAAQ,CACPqB,QAAQ,CAAEF,OAAO,EAAEC,OAAO,EAAEN,KAAK,CAACQ,OAAO,EAAER,KAAK,CAACS,OAAQ,CAC1D,CAAC;IACF;EACD,CAAC;EAED,MAAM;IAAEC,SAAS;IAAEC;EAAW,CAAC,GAAGjC,WAAW,CAAE;IAC9CkC,WAAW,EAAIZ,KAAK,IAAM;MACzBT,oBAAoB,CAAC,CAAC;MACtBQ,qBAAqB,CAAEC,KAAM,CAAC;IAC/B,CAAC;IACDa,UAAU,EAAEd,qBAAqB;IACjCe,SAAS,EAAEf;EACZ,CAAE,CAAC;EAEHxB,SAAS,CAAE,MAAM;IAChB,IAAKoC,UAAU,EAAG;MACjB,IAAKrB,mBAAmB,CAACE,OAAO,KAAKS,SAAS,EAAG;QAChDX,mBAAmB,CAACE,OAAO,GAAGuB,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,MAAM;MACzD;MACAH,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG,UAAU;IACxC,CAAC,MAAM;MACNH,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG5B,mBAAmB,CAACE,OAAO,IAAI,EAAE;MAC9DF,mBAAmB,CAACE,OAAO,GAAGS,SAAS;IACxC;EACD,CAAC,EAAE,CAAEU,UAAU,CAAG,CAAC;EAEnB,oBACC5B,IAAA,CAACJ,UAAU;IACVwC,GAAG,EAAG/B,cAAgB;IACtBgC,WAAW,EAAGV,SAAW;IACzBW,SAAS,EAAC,+CAA+C;IAAA,GACpDlC,KAAK;IAAAmC,QAAA,eAEVvC,IAAA,CAACH,sBAAsB;MACtBqC,KAAK,EACJhC,KAAK,GAAG;QAAEsC,SAAS,EAAG,UAAUtC,KAAO;MAAM,CAAC,GAAGgB,SACjD;MACDoB,SAAS,EAAC,iEAAiE;MAC3EG,QAAQ,EAAG,CAAC,CAAG;MAAAF,QAAA,eAEfvC,IAAA,CAACF,eAAe;QAACwC,SAAS,EAAC;MAAyD,CAAE;IAAC,CAChE;EAAC,CACd,CAAC;AAEf;AAEA,SAASd,QAAQA,CAChBF,OAAe,EACfC,OAAe,EACfmB,MAAc,EACdC,MAAc,EACb;EACD,MAAM7B,CAAC,GAAG6B,MAAM,GAAGpB,OAAO;EAC1B,MAAMX,CAAC,GAAG8B,MAAM,GAAGpB,OAAO;EAE1B,MAAMsB,cAAc,GAAGC,IAAI,CAACC,KAAK,CAAEhC,CAAC,EAAEF,CAAE,CAAC;EACzC,MAAMmC,UAAU,GAAGF,IAAI,CAACG,KAAK,CAAEJ,cAAc,IAAK,GAAG,GAAGC,IAAI,CAACI,EAAE,CAAG,CAAC,GAAG,EAAE;EACxE,IAAKF,UAAU,GAAG,CAAC,EAAG;IACrB,OAAO,GAAG,GAAGA,UAAU;EACxB;EACA,OAAOA,UAAU;AAClB;AAEA,eAAe9C,WAAW","ignoreList":[]}

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

@@ -1,9 +1,8 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
 
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -19,6 +18,8 @@ import { Spacer } from '../spacer';
 import NumberControl from '../number-control';
 import AngleCircle from './angle-circle';
 import { UnitText } from './styles/angle-picker-control-styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function UnforwardedAnglePickerControl(props, ref) {
   const {
     className,
@@ -34,34 +35,40 @@ function UnforwardedAnglePickerControl(props, ref) {
     const inputValue = unprocessedValue !== undefined && unprocessedValue !== '' ? parseInt(unprocessedValue, 10) : 0;
     onChange(inputValue);
   };
-  const classes = classnames('components-angle-picker-control', className);
-  const unitText = createElement(UnitText, null, "\xB0");
+  const classes = clsx('components-angle-picker-control', className);
+  const unitText = /*#__PURE__*/_jsx(UnitText, {
+    children: "\xB0"
+  });
   const [prefixedUnitText, suffixedUnitText] = isRTL() ? [unitText, null] : [null, unitText];
-  return createElement(Flex, {
+  return /*#__PURE__*/_jsxs(Flex, {
     ...restProps,
     ref: ref,
     className: classes,
-    gap: 2
-  }, createElement(FlexBlock, null, createElement(NumberControl, {
-    label: label,
-    className: "components-angle-picker-control__input-field",
-    max: 360,
-    min: 0,
-    onChange: handleOnNumberChange,
-    size: "__unstable-large",
-    step: "1",
-    value: value,
-    spinControls: "none",
-    prefix: prefixedUnitText,
-    suffix: suffixedUnitText
-  })), createElement(Spacer, {
-    marginBottom: "1",
-    marginTop: "auto"
-  }, createElement(AngleCircle, {
-    "aria-hidden": "true",
-    value: value,
-    onChange: onChange
-  })));
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(FlexBlock, {
+      children: /*#__PURE__*/_jsx(NumberControl, {
+        label: label,
+        className: "components-angle-picker-control__input-field",
+        max: 360,
+        min: 0,
+        onChange: handleOnNumberChange,
+        size: "__unstable-large",
+        step: "1",
+        value: value,
+        spinControls: "none",
+        prefix: prefixedUnitText,
+        suffix: suffixedUnitText
+      })
+    }), /*#__PURE__*/_jsx(Spacer, {
+      marginBottom: "1",
+      marginTop: "auto",
+      children: /*#__PURE__*/_jsx(AngleCircle, {
+        "aria-hidden": "true",
+        value: value,
+        onChange: onChange
+      })
+    })]
+  });
 }
 
 /**

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

@@ -1 +1 @@
-{"version":3,"names":["classnames","forwardRef","isRTL","__","Flex","FlexBlock","Spacer","NumberControl","AngleCircle","UnitText","UnforwardedAnglePickerControl","props","ref","className","label","onChange","value","restProps","handleOnNumberChange","unprocessedValue","undefined","inputValue","parseInt","classes","unitText","createElement","prefixedUnitText","suffixedUnitText","gap","max","min","size","step","spinControls","prefix","suffix","marginBottom","marginTop","AnglePickerControl"],"sources":["@wordpress/components/src/angle-picker-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport classnames from 'classnames';\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';\n\nimport type { WordPressComponentProps } from '../context';\nimport type { AnglePickerControlProps } from './types';\n\nfunction UnforwardedAnglePickerControl(\n\tprops: WordPressComponentProps< AnglePickerControlProps, 'div' >,\n\tref: ForwardedRef< any >\n) {\n\tconst {\n\t\tclassName,\n\t\tlabel = __( 'Angle' ),\n\t\tonChange,\n\t\tvalue,\n\t\t...restProps\n\t} = props;\n\n\tconst handleOnNumberChange = ( unprocessedValue: string | undefined ) => {\n\t\tif ( onChange === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst inputValue =\n\t\t\tunprocessedValue !== undefined && unprocessedValue !== ''\n\t\t\t\t? parseInt( unprocessedValue, 10 )\n\t\t\t\t: 0;\n\t\tonChange( inputValue );\n\t};\n\n\tconst classes = classnames( 'components-angle-picker-control', className );\n\n\tconst unitText = <UnitText>°</UnitText>;\n\tconst [ prefixedUnitText, suffixedUnitText ] = isRTL()\n\t\t? [ unitText, null ]\n\t\t: [ null, unitText ];\n\n\treturn (\n\t\t<Flex { ...restProps } ref={ ref } className={ classes } gap={ 2 }>\n\t\t\t<FlexBlock>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tclassName=\"components-angle-picker-control__input-field\"\n\t\t\t\t\tmax={ 360 }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ handleOnNumberChange }\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\tstep=\"1\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\tprefix={ prefixedUnitText }\n\t\t\t\t\tsuffix={ suffixedUnitText }\n\t\t\t\t/>\n\t\t\t</FlexBlock>\n\t\t\t<Spacer marginBottom=\"1\" marginTop=\"auto\">\n\t\t\t\t<AngleCircle\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t</Spacer>\n\t\t</Flex>\n\t);\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 );\n\nexport default AnglePickerControl;\n"],"mappings":";AAAA;AACA;AACA;;AAEA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,KAAK,EAAEC,EAAE,QAAQ,iBAAiB;;AAE3C;AACA;AACA;AACA,SAASC,IAAI,EAAEC,SAAS,QAAQ,SAAS;AACzC,SAASC,MAAM,QAAQ,WAAW;AAClC,OAAOC,aAAa,MAAM,mBAAmB;AAC7C,OAAOC,WAAW,MAAM,gBAAgB;AACxC,SAASC,QAAQ,QAAQ,sCAAsC;AAK/D,SAASC,6BAA6BA,CACrCC,KAAgE,EAChEC,GAAwB,EACvB;EACD,MAAM;IACLC,SAAS;IACTC,KAAK,GAAGX,EAAE,CAAE,OAAQ,CAAC;IACrBY,QAAQ;IACRC,KAAK;IACL,GAAGC;EACJ,CAAC,GAAGN,KAAK;EAET,MAAMO,oBAAoB,GAAKC,gBAAoC,IAAM;IACxE,IAAKJ,QAAQ,KAAKK,SAAS,EAAG;MAC7B;IACD;IAEA,MAAMC,UAAU,GACfF,gBAAgB,KAAKC,SAAS,IAAID,gBAAgB,KAAK,EAAE,GACtDG,QAAQ,CAAEH,gBAAgB,EAAE,EAAG,CAAC,GAChC,CAAC;IACLJ,QAAQ,CAAEM,UAAW,CAAC;EACvB,CAAC;EAED,MAAME,OAAO,GAAGvB,UAAU,CAAE,iCAAiC,EAAEa,SAAU,CAAC;EAE1E,MAAMW,QAAQ,GAAGC,aAAA,CAAChB,QAAQ,QAAC,MAAW,CAAC;EACvC,MAAM,CAAEiB,gBAAgB,EAAEC,gBAAgB,CAAE,GAAGzB,KAAK,CAAC,CAAC,GACnD,CAAEsB,QAAQ,EAAE,IAAI,CAAE,GAClB,CAAE,IAAI,EAAEA,QAAQ,CAAE;EAErB,OACCC,aAAA,CAACrB,IAAI;IAAA,GAAMa,SAAS;IAAGL,GAAG,EAAGA,GAAK;IAACC,SAAS,EAAGU,OAAS;IAACK,GAAG,EAAG;EAAG,GACjEH,aAAA,CAACpB,SAAS,QACToB,aAAA,CAAClB,aAAa;IACbO,KAAK,EAAGA,KAAO;IACfD,SAAS,EAAC,8CAA8C;IACxDgB,GAAG,EAAG,GAAK;IACXC,GAAG,EAAG,CAAG;IACTf,QAAQ,EAAGG,oBAAsB;IACjCa,IAAI,EAAC,kBAAkB;IACvBC,IAAI,EAAC,GAAG;IACRhB,KAAK,EAAGA,KAAO;IACfiB,YAAY,EAAC,MAAM;IACnBC,MAAM,EAAGR,gBAAkB;IAC3BS,MAAM,EAAGR;EAAkB,CAC3B,CACS,CAAC,EACZF,aAAA,CAACnB,MAAM;IAAC8B,YAAY,EAAC,GAAG;IAACC,SAAS,EAAC;EAAM,GACxCZ,aAAA,CAACjB,WAAW;IACX,eAAY,MAAM;IAClBQ,KAAK,EAAGA,KAAO;IACfD,QAAQ,EAAGA;EAAU,CACrB,CACM,CACH,CAAC;AAET;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMuB,kBAAkB,GAAGrC,UAAU,CAAES,6BAA8B,CAAC;AAE7E,eAAe4B,kBAAkB","ignoreList":[]}
+{"version":3,"names":["clsx","forwardRef","isRTL","__","Flex","FlexBlock","Spacer","NumberControl","AngleCircle","UnitText","jsx","_jsx","jsxs","_jsxs","UnforwardedAnglePickerControl","props","ref","className","label","onChange","value","restProps","handleOnNumberChange","unprocessedValue","undefined","inputValue","parseInt","classes","unitText","children","prefixedUnitText","suffixedUnitText","gap","max","min","size","step","spinControls","prefix","suffix","marginBottom","marginTop","AnglePickerControl"],"sources":["@wordpress/components/src/angle-picker-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\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';\n\nimport type { WordPressComponentProps } from '../context';\nimport type { AnglePickerControlProps } from './types';\n\nfunction UnforwardedAnglePickerControl(\n\tprops: WordPressComponentProps< AnglePickerControlProps, 'div' >,\n\tref: ForwardedRef< any >\n) {\n\tconst {\n\t\tclassName,\n\t\tlabel = __( 'Angle' ),\n\t\tonChange,\n\t\tvalue,\n\t\t...restProps\n\t} = props;\n\n\tconst handleOnNumberChange = ( unprocessedValue: string | undefined ) => {\n\t\tif ( onChange === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst inputValue =\n\t\t\tunprocessedValue !== undefined && unprocessedValue !== ''\n\t\t\t\t? parseInt( unprocessedValue, 10 )\n\t\t\t\t: 0;\n\t\tonChange( inputValue );\n\t};\n\n\tconst classes = clsx( 'components-angle-picker-control', className );\n\n\tconst unitText = <UnitText>°</UnitText>;\n\tconst [ prefixedUnitText, suffixedUnitText ] = isRTL()\n\t\t? [ unitText, null ]\n\t\t: [ null, unitText ];\n\n\treturn (\n\t\t<Flex { ...restProps } ref={ ref } className={ classes } gap={ 2 }>\n\t\t\t<FlexBlock>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tclassName=\"components-angle-picker-control__input-field\"\n\t\t\t\t\tmax={ 360 }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ handleOnNumberChange }\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\tstep=\"1\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\tprefix={ prefixedUnitText }\n\t\t\t\t\tsuffix={ suffixedUnitText }\n\t\t\t\t/>\n\t\t\t</FlexBlock>\n\t\t\t<Spacer marginBottom=\"1\" marginTop=\"auto\">\n\t\t\t\t<AngleCircle\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t</Spacer>\n\t\t</Flex>\n\t);\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 );\n\nexport default AnglePickerControl;\n"],"mappings":"AAAA;AACA;AACA;;AAEA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,KAAK,EAAEC,EAAE,QAAQ,iBAAiB;;AAE3C;AACA;AACA;AACA,SAASC,IAAI,EAAEC,SAAS,QAAQ,SAAS;AACzC,SAASC,MAAM,QAAQ,WAAW;AAClC,OAAOC,aAAa,MAAM,mBAAmB;AAC7C,OAAOC,WAAW,MAAM,gBAAgB;AACxC,SAASC,QAAQ,QAAQ,sCAAsC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAKhE,SAASC,6BAA6BA,CACrCC,KAAgE,EAChEC,GAAwB,EACvB;EACD,MAAM;IACLC,SAAS;IACTC,KAAK,GAAGf,EAAE,CAAE,OAAQ,CAAC;IACrBgB,QAAQ;IACRC,KAAK;IACL,GAAGC;EACJ,CAAC,GAAGN,KAAK;EAET,MAAMO,oBAAoB,GAAKC,gBAAoC,IAAM;IACxE,IAAKJ,QAAQ,KAAKK,SAAS,EAAG;MAC7B;IACD;IAEA,MAAMC,UAAU,GACfF,gBAAgB,KAAKC,SAAS,IAAID,gBAAgB,KAAK,EAAE,GACtDG,QAAQ,CAAEH,gBAAgB,EAAE,EAAG,CAAC,GAChC,CAAC;IACLJ,QAAQ,CAAEM,UAAW,CAAC;EACvB,CAAC;EAED,MAAME,OAAO,GAAG3B,IAAI,CAAE,iCAAiC,EAAEiB,SAAU,CAAC;EAEpE,MAAMW,QAAQ,gBAAGjB,IAAA,CAACF,QAAQ;IAAAoB,QAAA,EAAC;EAAC,CAAU,CAAC;EACvC,MAAM,CAAEC,gBAAgB,EAAEC,gBAAgB,CAAE,GAAG7B,KAAK,CAAC,CAAC,GACnD,CAAE0B,QAAQ,EAAE,IAAI,CAAE,GAClB,CAAE,IAAI,EAAEA,QAAQ,CAAE;EAErB,oBACCf,KAAA,CAACT,IAAI;IAAA,GAAMiB,SAAS;IAAGL,GAAG,EAAGA,GAAK;IAACC,SAAS,EAAGU,OAAS;IAACK,GAAG,EAAG,CAAG;IAAAH,QAAA,gBACjElB,IAAA,CAACN,SAAS;MAAAwB,QAAA,eACTlB,IAAA,CAACJ,aAAa;QACbW,KAAK,EAAGA,KAAO;QACfD,SAAS,EAAC,8CAA8C;QACxDgB,GAAG,EAAG,GAAK;QACXC,GAAG,EAAG,CAAG;QACTf,QAAQ,EAAGG,oBAAsB;QACjCa,IAAI,EAAC,kBAAkB;QACvBC,IAAI,EAAC,GAAG;QACRhB,KAAK,EAAGA,KAAO;QACfiB,YAAY,EAAC,MAAM;QACnBC,MAAM,EAAGR,gBAAkB;QAC3BS,MAAM,EAAGR;MAAkB,CAC3B;IAAC,CACQ,CAAC,eACZpB,IAAA,CAACL,MAAM;MAACkC,YAAY,EAAC,GAAG;MAACC,SAAS,EAAC,MAAM;MAAAZ,QAAA,eACxClB,IAAA,CAACH,WAAW;QACX,eAAY,MAAM;QAClBY,KAAK,EAAGA,KAAO;QACfD,QAAQ,EAAGA;MAAU,CACrB;IAAC,CACK,CAAC;EAAA,CACJ,CAAC;AAET;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMuB,kBAAkB,GAAGzC,UAAU,CAAEa,6BAA8B,CAAC;AAE7E,eAAe4B,kBAAkB","ignoreList":[]}

package/build-module/animate/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -22,7 +22,7 @@ function getDefaultOrigin(type) {
  */
 export function getAnimateClassName(options) {
   if (options.type === 'loading') {
-    return classnames('components-animate__loading');
+    return 'components-animate__loading';
   }
   const {
     type,
@@ -30,13 +30,13 @@ export function getAnimateClassName(options) {
   } = options;
   if (type === 'appear') {
     const [yAxis, xAxis = 'center'] = origin.split(' ');
-    return classnames('components-animate__appear', {
+    return clsx('components-animate__appear', {
       ['is-from-' + xAxis]: xAxis !== 'center',
       ['is-from-' + yAxis]: yAxis !== 'middle'
     });
   }
   if (type === 'slide-in') {
-    return classnames('components-animate__slide-in', 'is-from-' + origin);
+    return clsx('components-animate__slide-in', 'is-from-' + origin);
   }
   return undefined;
 }

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

@@ -1 +1 @@
-{"version":3,"names":["classnames","getDefaultOrigin","type","getAnimateClassName","options","origin","yAxis","xAxis","split","undefined","Animate","children","className"],"sources":["@wordpress/components/src/animate/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport type { AnimateProps, GetAnimateOptions } from './types';\n\n/**\n * @param type The animation type\n * @return Default origin\n */\nfunction getDefaultOrigin( type?: GetAnimateOptions[ 'type' ] ) {\n\treturn type === 'appear' ? 'top' : 'left';\n}\n\n/**\n * @param options\n *\n * @return ClassName that applies the animations\n */\nexport function getAnimateClassName( options: GetAnimateOptions ) {\n\tif ( options.type === 'loading' ) {\n\t\treturn classnames( 'components-animate__loading' );\n\t}\n\n\tconst { type, origin = getDefaultOrigin( type ) } = options;\n\n\tif ( type === 'appear' ) {\n\t\tconst [ yAxis, xAxis = 'center' ] = origin.split( ' ' );\n\t\treturn classnames( 'components-animate__appear', {\n\t\t\t[ 'is-from-' + xAxis ]: xAxis !== 'center',\n\t\t\t[ 'is-from-' + yAxis ]: yAxis !== 'middle',\n\t\t} );\n\t}\n\n\tif ( type === 'slide-in' ) {\n\t\treturn classnames(\n\t\t\t'components-animate__slide-in',\n\t\t\t'is-from-' + origin\n\t\t);\n\t}\n\n\treturn undefined;\n}\n\n/**\n * Simple interface to introduce animations to components.\n *\n * ```jsx\n * import { Animate, Notice } from '@wordpress/components';\n *\n * const MyAnimatedNotice = () => (\n * \t<Animate type=\"slide-in\" options={ { origin: 'top' } }>\n * \t\t{ ( { className } ) => (\n * \t\t\t<Notice className={ className } status=\"success\">\n * \t\t\t\t<p>Animation finished.</p>\n * \t\t\t</Notice>\n * \t\t) }\n * \t</Animate>\n * );\n * ```\n */\nexport function Animate( { type, options = {}, children }: AnimateProps ) {\n\treturn children( {\n\t\tclassName: getAnimateClassName( {\n\t\t\ttype,\n\t\t\t...options,\n\t\t} as GetAnimateOptions ),\n\t} );\n}\n\nexport default Animate;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA,SAASC,gBAAgBA,CAAEC,IAAkC,EAAG;EAC/D,OAAOA,IAAI,KAAK,QAAQ,GAAG,KAAK,GAAG,MAAM;AAC1C;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,mBAAmBA,CAAEC,OAA0B,EAAG;EACjE,IAAKA,OAAO,CAACF,IAAI,KAAK,SAAS,EAAG;IACjC,OAAOF,UAAU,CAAE,6BAA8B,CAAC;EACnD;EAEA,MAAM;IAAEE,IAAI;IAAEG,MAAM,GAAGJ,gBAAgB,CAAEC,IAAK;EAAE,CAAC,GAAGE,OAAO;EAE3D,IAAKF,IAAI,KAAK,QAAQ,EAAG;IACxB,MAAM,CAAEI,KAAK,EAAEC,KAAK,GAAG,QAAQ,CAAE,GAAGF,MAAM,CAACG,KAAK,CAAE,GAAI,CAAC;IACvD,OAAOR,UAAU,CAAE,4BAA4B,EAAE;MAChD,CAAE,UAAU,GAAGO,KAAK,GAAIA,KAAK,KAAK,QAAQ;MAC1C,CAAE,UAAU,GAAGD,KAAK,GAAIA,KAAK,KAAK;IACnC,CAAE,CAAC;EACJ;EAEA,IAAKJ,IAAI,KAAK,UAAU,EAAG;IAC1B,OAAOF,UAAU,CAChB,8BAA8B,EAC9B,UAAU,GAAGK,MACd,CAAC;EACF;EAEA,OAAOI,SAAS;AACjB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,OAAOA,CAAE;EAAER,IAAI;EAAEE,OAAO,GAAG,CAAC,CAAC;EAAEO;AAAuB,CAAC,EAAG;EACzE,OAAOA,QAAQ,CAAE;IAChBC,SAAS,EAAET,mBAAmB,CAAE;MAC/BD,IAAI;MACJ,GAAGE;IACJ,CAAuB;EACxB,CAAE,CAAC;AACJ;AAEA,eAAeM,OAAO","ignoreList":[]}
+{"version":3,"names":["clsx","getDefaultOrigin","type","getAnimateClassName","options","origin","yAxis","xAxis","split","undefined","Animate","children","className"],"sources":["@wordpress/components/src/animate/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport type { AnimateProps, GetAnimateOptions } from './types';\n\n/**\n * @param type The animation type\n * @return Default origin\n */\nfunction getDefaultOrigin( type?: GetAnimateOptions[ 'type' ] ) {\n\treturn type === 'appear' ? 'top' : 'left';\n}\n\n/**\n * @param options\n *\n * @return ClassName that applies the animations\n */\nexport function getAnimateClassName( options: GetAnimateOptions ) {\n\tif ( options.type === 'loading' ) {\n\t\treturn 'components-animate__loading';\n\t}\n\n\tconst { type, origin = getDefaultOrigin( type ) } = options;\n\n\tif ( type === 'appear' ) {\n\t\tconst [ yAxis, xAxis = 'center' ] = origin.split( ' ' );\n\t\treturn clsx( 'components-animate__appear', {\n\t\t\t[ 'is-from-' + xAxis ]: xAxis !== 'center',\n\t\t\t[ 'is-from-' + yAxis ]: yAxis !== 'middle',\n\t\t} );\n\t}\n\n\tif ( type === 'slide-in' ) {\n\t\treturn clsx( 'components-animate__slide-in', 'is-from-' + origin );\n\t}\n\n\treturn undefined;\n}\n\n/**\n * Simple interface to introduce animations to components.\n *\n * ```jsx\n * import { Animate, Notice } from '@wordpress/components';\n *\n * const MyAnimatedNotice = () => (\n * \t<Animate type=\"slide-in\" options={ { origin: 'top' } }>\n * \t\t{ ( { className } ) => (\n * \t\t\t<Notice className={ className } status=\"success\">\n * \t\t\t\t<p>Animation finished.</p>\n * \t\t\t</Notice>\n * \t\t) }\n * \t</Animate>\n * );\n * ```\n */\nexport function Animate( { type, options = {}, children }: AnimateProps ) {\n\treturn children( {\n\t\tclassName: getAnimateClassName( {\n\t\t\ttype,\n\t\t\t...options,\n\t\t} as GetAnimateOptions ),\n\t} );\n}\n\nexport default Animate;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA,SAASC,gBAAgBA,CAAEC,IAAkC,EAAG;EAC/D,OAAOA,IAAI,KAAK,QAAQ,GAAG,KAAK,GAAG,MAAM;AAC1C;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,mBAAmBA,CAAEC,OAA0B,EAAG;EACjE,IAAKA,OAAO,CAACF,IAAI,KAAK,SAAS,EAAG;IACjC,OAAO,6BAA6B;EACrC;EAEA,MAAM;IAAEA,IAAI;IAAEG,MAAM,GAAGJ,gBAAgB,CAAEC,IAAK;EAAE,CAAC,GAAGE,OAAO;EAE3D,IAAKF,IAAI,KAAK,QAAQ,EAAG;IACxB,MAAM,CAAEI,KAAK,EAAEC,KAAK,GAAG,QAAQ,CAAE,GAAGF,MAAM,CAACG,KAAK,CAAE,GAAI,CAAC;IACvD,OAAOR,IAAI,CAAE,4BAA4B,EAAE;MAC1C,CAAE,UAAU,GAAGO,KAAK,GAAIA,KAAK,KAAK,QAAQ;MAC1C,CAAE,UAAU,GAAGD,KAAK,GAAIA,KAAK,KAAK;IACnC,CAAE,CAAC;EACJ;EAEA,IAAKJ,IAAI,KAAK,UAAU,EAAG;IAC1B,OAAOF,IAAI,CAAE,8BAA8B,EAAE,UAAU,GAAGK,MAAO,CAAC;EACnE;EAEA,OAAOI,SAAS;AACjB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,OAAOA,CAAE;EAAER,IAAI;EAAEE,OAAO,GAAG,CAAC,CAAC;EAAEO;AAAuB,CAAC,EAAG;EACzE,OAAOA,QAAQ,CAAE;IAChBC,SAAS,EAAET,mBAAmB,CAAE;MAC/BD,IAAI;MACJ,GAAGE;IACJ,CAAuB;EACxB,CAAE,CAAC;AACJ;AAEA,eAAeM,OAAO","ignoreList":[]}

package/build-module/autocomplete/autocompleter-ui.js

@@ -1,8 +1,7 @@
-import { createElement, Fragment } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -21,8 +20,38 @@ import Button from '../button';
 import Popover from '../popover';
 import { VisuallyHidden } from '../visually-hidden';
 import { createPortal } from 'react-dom';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function ListBox({
+  items,
+  onSelect,
+  selectedIndex,
+  instanceId,
+  listBoxId,
+  className,
+  Component = 'div'
+}) {
+  return /*#__PURE__*/_jsx(Component, {
+    id: listBoxId,
+    role: "listbox",
+    className: "components-autocomplete__results",
+    children: items.map((option, index) => /*#__PURE__*/_jsx(Button, {
+      id: `components-autocomplete-item-${instanceId}-${option.key}`,
+      role: "option",
+      "aria-selected": index === selectedIndex,
+      disabled: option.isDisabled,
+      className: clsx('components-autocomplete__result', className, {
+        'is-selected': index === selectedIndex
+      }),
+      onClick: () => onSelect(option),
+      children: option.label
+    }, option.key))
+  });
+}
 export function getAutoCompleterUI(autocompleter) {
-  const useItems = autocompleter.useItems ? autocompleter.useItems : getDefaultUseItems(autocompleter);
+  var _autocompleter$useIte;
+  const useItems = (_autocompleter$useIte = autocompleter.useItems) !== null && _autocompleter$useIte !== void 0 ? _autocompleter$useIte : getDefaultUseItems(autocompleter);
   function AutocompleterUI({
     filterValue,
     instanceId,
@@ -49,7 +78,7 @@ export function getAutoCompleterUI(autocompleter) {
       // If the popover is rendered in a different document than
       // the content, we need to duplicate the options list in the
       // content document so that it's available to the screen
-      // readers, which check the DOM ID based aira-* attributes.
+      // readers, which check the DOM ID based aria-* attributes.
       setNeedsA11yCompat(node.ownerDocument !== contentRef.current.ownerDocument);
     }, [contentRef])]);
     useOnClickOutside(popoverRef, reset);
@@ -80,33 +109,32 @@ export function getAutoCompleterUI(autocompleter) {
     if (items.length === 0) {
       return null;
     }
-    const ListBox = ({
-      Component = 'div'
-    }) => createElement(Component, {
-      id: listBoxId,
-      role: "listbox",
-      className: "components-autocomplete__results"
-    }, items.map((option, index) => createElement(Button, {
-      key: option.key,
-      id: `components-autocomplete-item-${instanceId}-${option.key}`,
-      role: "option",
-      "aria-selected": index === selectedIndex,
-      disabled: option.isDisabled,
-      className: classnames('components-autocomplete__result', className, {
-        'is-selected': index === selectedIndex
-      }),
-      onClick: () => onSelect(option)
-    }, option.label)));
-    return createElement(Fragment, null, createElement(Popover, {
-      focusOnMount: false,
-      onClose: onReset,
-      placement: "top-start",
-      className: "components-autocomplete__popover",
-      anchor: popoverAnchor,
-      ref: popoverRefs
-    }, createElement(ListBox, null)), contentRef.current && needsA11yCompat && createPortal(createElement(ListBox, {
-      Component: VisuallyHidden
-    }), contentRef.current.ownerDocument.body));
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Popover, {
+        focusOnMount: false,
+        onClose: onReset,
+        placement: "top-start",
+        className: "components-autocomplete__popover",
+        anchor: popoverAnchor,
+        ref: popoverRefs,
+        children: /*#__PURE__*/_jsx(ListBox, {
+          items: items,
+          onSelect: onSelect,
+          selectedIndex: selectedIndex,
+          instanceId: instanceId,
+          listBoxId: listBoxId,
+          className: className
+        })
+      }), contentRef.current && needsA11yCompat && createPortal( /*#__PURE__*/_jsx(ListBox, {
+        items: items,
+        onSelect: onSelect,
+        selectedIndex: selectedIndex,
+        instanceId: instanceId,
+        listBoxId: listBoxId,
+        className: className,
+        Component: VisuallyHidden
+      }), contentRef.current.ownerDocument.body)]
+    });
   }
   return AutocompleterUI;
 }

package/build-module/autocomplete/autocompleter-ui.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","useLayoutEffect","useRef","useEffect","useState","useAnchor","useDebounce","useMergeRefs","useRefEffect","speak","__","_n","sprintf","getDefaultUseItems","Button","Popover","VisuallyHidden","createPortal","getAutoCompleterUI","autocompleter","useItems","AutocompleterUI","filterValue","instanceId","listBoxId","className","selectedIndex","onChangeOptions","onSelect","onReset","reset","contentRef","items","popoverAnchor","editableContentElement","current","needsA11yCompat","setNeedsA11yCompat","popoverRef","popoverRefs","node","ownerDocument","useOnClickOutside","debouncedSpeak","announce","options","length","ListBox","Component","createElement","id","role","map","option","index","key","disabled","isDisabled","onClick","label","Fragment","focusOnMount","onClose","placement","anchor","ref","body","handler","listener","event","contains","target","document","addEventListener","removeEventListener"],"sources":["@wordpress/components/src/autocomplete/autocompleter-ui.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseLayoutEffect,\n\tuseRef,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\nimport { useAnchor } from '@wordpress/rich-text';\nimport { useDebounce, useMergeRefs, useRefEffect } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { __, _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport getDefaultUseItems from './get-default-use-items';\nimport Button from '../button';\nimport Popover from '../popover';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { createPortal } from 'react-dom';\nimport type { AutocompleterUIProps, KeyedOption, WPCompleter } from './types';\n\nexport function getAutoCompleterUI( autocompleter: WPCompleter ) {\n\tconst useItems = autocompleter.useItems\n\t\t? autocompleter.useItems\n\t\t: getDefaultUseItems( autocompleter );\n\n\tfunction AutocompleterUI( {\n\t\tfilterValue,\n\t\tinstanceId,\n\t\tlistBoxId,\n\t\tclassName,\n\t\tselectedIndex,\n\t\tonChangeOptions,\n\t\tonSelect,\n\t\tonReset,\n\t\treset,\n\t\tcontentRef,\n\t}: AutocompleterUIProps ) {\n\t\tconst [ items ] = useItems( filterValue );\n\t\tconst popoverAnchor = useAnchor( {\n\t\t\teditableContentElement: contentRef.current,\n\t\t} );\n\n\t\tconst [ needsA11yCompat, setNeedsA11yCompat ] = useState( false );\n\t\tconst popoverRef = useRef< HTMLElement >( null );\n\t\tconst popoverRefs = useMergeRefs( [\n\t\t\tpopoverRef,\n\t\t\tuseRefEffect(\n\t\t\t\t( node ) => {\n\t\t\t\t\tif ( ! contentRef.current ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\t// If the popover is rendered in a different document than\n\t\t\t\t\t// the content, we need to duplicate the options list in the\n\t\t\t\t\t// content document so that it's available to the screen\n\t\t\t\t\t// readers, which check the DOM ID based aira-* attributes.\n\t\t\t\t\tsetNeedsA11yCompat(\n\t\t\t\t\t\tnode.ownerDocument !== contentRef.current.ownerDocument\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t\t[ contentRef ]\n\t\t\t),\n\t\t] );\n\n\t\tuseOnClickOutside( popoverRef, reset );\n\n\t\tconst debouncedSpeak = useDebounce( speak, 500 );\n\n\t\tfunction announce( options: Array< KeyedOption > ) {\n\t\t\tif ( ! debouncedSpeak ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif ( !! options.length ) {\n\t\t\t\tif ( filterValue ) {\n\t\t\t\t\tdebouncedSpeak(\n\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t/* translators: %d: number of results. */\n\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\t'assertive'\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\tdebouncedSpeak(\n\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t/* translators: %d: number of results. */\n\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t'Initial %d result loaded. Type to filter all available results. Use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\t'Initial %d results loaded. Type to filter all available results. Use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\t'assertive'\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tdebouncedSpeak( __( 'No results.' ), 'assertive' );\n\t\t\t}\n\t\t}\n\n\t\tuseLayoutEffect( () => {\n\t\t\tonChangeOptions( items );\n\t\t\tannounce( items );\n\t\t\t// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.\n\t\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t}, [ items ] );\n\n\t\tif ( items.length === 0 ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst ListBox = ( {\n\t\t\tComponent = 'div',\n\t\t}: {\n\t\t\tComponent?: React.ElementType;\n\t\t} ) => (\n\t\t\t<Component\n\t\t\t\tid={ listBoxId }\n\t\t\t\trole=\"listbox\"\n\t\t\t\tclassName=\"components-autocomplete__results\"\n\t\t\t>\n\t\t\t\t{ items.map( ( option, index ) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ option.key }\n\t\t\t\t\t\tid={ `components-autocomplete-item-${ instanceId }-${ option.key }` }\n\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\taria-selected={ index === selectedIndex }\n\t\t\t\t\t\tdisabled={ option.isDisabled }\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'components-autocomplete__result',\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-selected': index === selectedIndex,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonClick={ () => onSelect( option ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t</Button>\n\t\t\t\t) ) }\n\t\t\t</Component>\n\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Popover\n\t\t\t\t\tfocusOnMount={ false }\n\t\t\t\t\tonClose={ onReset }\n\t\t\t\t\tplacement=\"top-start\"\n\t\t\t\t\tclassName=\"components-autocomplete__popover\"\n\t\t\t\t\tanchor={ popoverAnchor }\n\t\t\t\t\tref={ popoverRefs }\n\t\t\t\t>\n\t\t\t\t\t<ListBox />\n\t\t\t\t</Popover>\n\t\t\t\t{ contentRef.current &&\n\t\t\t\t\tneedsA11yCompat &&\n\t\t\t\t\tcreatePortal(\n\t\t\t\t\t\t<ListBox Component={ VisuallyHidden } />,\n\t\t\t\t\t\tcontentRef.current.ownerDocument.body\n\t\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn AutocompleterUI;\n}\n\nfunction useOnClickOutside(\n\tref: React.RefObject< HTMLElement >,\n\thandler: AutocompleterUIProps[ 'reset' ]\n) {\n\tuseEffect( () => {\n\t\tconst listener = ( event: MouseEvent | TouchEvent ) => {\n\t\t\t// Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element\n\t\t\tif (\n\t\t\t\t! ref.current ||\n\t\t\t\tref.current.contains( event.target as Node )\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\thandler( event );\n\t\t};\n\t\tdocument.addEventListener( 'mousedown', listener );\n\t\tdocument.addEventListener( 'touchstart', listener );\n\t\treturn () => {\n\t\t\tdocument.removeEventListener( 'mousedown', listener );\n\t\t\tdocument.removeEventListener( 'touchstart', listener );\n\t\t};\n\t\t// Disable reason: `ref` is a ref object and should not be included in a\n\t\t// hook's dependency list.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ handler ] );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["clsx","useLayoutEffect","useRef","useEffect","useState","useAnchor","useDebounce","useMergeRefs","useRefEffect","speak","__","_n","sprintf","getDefaultUseItems","Button","Popover","VisuallyHidden","createPortal","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","ListBox","items","onSelect","selectedIndex","instanceId","listBoxId","className","Component","id","role","children","map","option","index","key","disabled","isDisabled","onClick","label","getAutoCompleterUI","autocompleter","_autocompleter$useIte","useItems","AutocompleterUI","filterValue","onChangeOptions","onReset","reset","contentRef","popoverAnchor","editableContentElement","current","needsA11yCompat","setNeedsA11yCompat","popoverRef","popoverRefs","node","ownerDocument","useOnClickOutside","debouncedSpeak","announce","options","length","focusOnMount","onClose","placement","anchor","ref","body","handler","listener","event","contains","target","document","addEventListener","removeEventListener"],"sources":["@wordpress/components/src/autocomplete/autocompleter-ui.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseLayoutEffect,\n\tuseRef,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\nimport { useAnchor } from '@wordpress/rich-text';\nimport { useDebounce, useMergeRefs, useRefEffect } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { __, _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport getDefaultUseItems from './get-default-use-items';\nimport Button from '../button';\nimport Popover from '../popover';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { createPortal } from 'react-dom';\nimport type { AutocompleterUIProps, KeyedOption, WPCompleter } from './types';\n\ntype ListBoxProps = {\n\titems: KeyedOption[];\n\tonSelect: ( option: KeyedOption ) => void;\n\tselectedIndex: number;\n\tinstanceId: number;\n\tlistBoxId: string | undefined;\n\tclassName?: string;\n\tComponent?: React.ElementType;\n};\n\nfunction ListBox( {\n\titems,\n\tonSelect,\n\tselectedIndex,\n\tinstanceId,\n\tlistBoxId,\n\tclassName,\n\tComponent = 'div',\n}: ListBoxProps ) {\n\treturn (\n\t\t<Component\n\t\t\tid={ listBoxId }\n\t\t\trole=\"listbox\"\n\t\t\tclassName=\"components-autocomplete__results\"\n\t\t>\n\t\t\t{ items.map( ( option, index ) => (\n\t\t\t\t<Button\n\t\t\t\t\tkey={ option.key }\n\t\t\t\t\tid={ `components-autocomplete-item-${ instanceId }-${ option.key }` }\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\taria-selected={ index === selectedIndex }\n\t\t\t\t\tdisabled={ option.isDisabled }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'components-autocomplete__result',\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'is-selected': index === selectedIndex,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tonClick={ () => onSelect( option ) }\n\t\t\t\t>\n\t\t\t\t\t{ option.label }\n\t\t\t\t</Button>\n\t\t\t) ) }\n\t\t</Component>\n\t);\n}\n\nexport function getAutoCompleterUI( autocompleter: WPCompleter ) {\n\tconst useItems =\n\t\tautocompleter.useItems ?? getDefaultUseItems( autocompleter );\n\n\tfunction AutocompleterUI( {\n\t\tfilterValue,\n\t\tinstanceId,\n\t\tlistBoxId,\n\t\tclassName,\n\t\tselectedIndex,\n\t\tonChangeOptions,\n\t\tonSelect,\n\t\tonReset,\n\t\treset,\n\t\tcontentRef,\n\t}: AutocompleterUIProps ) {\n\t\tconst [ items ] = useItems( filterValue );\n\t\tconst popoverAnchor = useAnchor( {\n\t\t\teditableContentElement: contentRef.current,\n\t\t} );\n\n\t\tconst [ needsA11yCompat, setNeedsA11yCompat ] = useState( false );\n\t\tconst popoverRef = useRef< HTMLElement >( null );\n\t\tconst popoverRefs = useMergeRefs( [\n\t\t\tpopoverRef,\n\t\t\tuseRefEffect(\n\t\t\t\t( node ) => {\n\t\t\t\t\tif ( ! contentRef.current ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\t// If the popover is rendered in a different document than\n\t\t\t\t\t// the content, we need to duplicate the options list in the\n\t\t\t\t\t// content document so that it's available to the screen\n\t\t\t\t\t// readers, which check the DOM ID based aria-* attributes.\n\t\t\t\t\tsetNeedsA11yCompat(\n\t\t\t\t\t\tnode.ownerDocument !== contentRef.current.ownerDocument\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t\t[ contentRef ]\n\t\t\t),\n\t\t] );\n\n\t\tuseOnClickOutside( popoverRef, reset );\n\n\t\tconst debouncedSpeak = useDebounce( speak, 500 );\n\n\t\tfunction announce( options: Array< KeyedOption > ) {\n\t\t\tif ( ! debouncedSpeak ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif ( !! options.length ) {\n\t\t\t\tif ( filterValue ) {\n\t\t\t\t\tdebouncedSpeak(\n\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t/* translators: %d: number of results. */\n\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\t'assertive'\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\tdebouncedSpeak(\n\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t/* translators: %d: number of results. */\n\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t'Initial %d result loaded. Type to filter all available results. Use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\t'Initial %d results loaded. Type to filter all available results. Use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\t'assertive'\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tdebouncedSpeak( __( 'No results.' ), 'assertive' );\n\t\t\t}\n\t\t}\n\n\t\tuseLayoutEffect( () => {\n\t\t\tonChangeOptions( items );\n\t\t\tannounce( items );\n\t\t\t// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.\n\t\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t}, [ items ] );\n\n\t\tif ( items.length === 0 ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Popover\n\t\t\t\t\tfocusOnMount={ false }\n\t\t\t\t\tonClose={ onReset }\n\t\t\t\t\tplacement=\"top-start\"\n\t\t\t\t\tclassName=\"components-autocomplete__popover\"\n\t\t\t\t\tanchor={ popoverAnchor }\n\t\t\t\t\tref={ popoverRefs }\n\t\t\t\t>\n\t\t\t\t\t<ListBox\n\t\t\t\t\t\titems={ items }\n\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\tselectedIndex={ selectedIndex }\n\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\tlistBoxId={ listBoxId }\n\t\t\t\t\t\tclassName={ className }\n\t\t\t\t\t/>\n\t\t\t\t</Popover>\n\t\t\t\t{ contentRef.current &&\n\t\t\t\t\tneedsA11yCompat &&\n\t\t\t\t\tcreatePortal(\n\t\t\t\t\t\t<ListBox\n\t\t\t\t\t\t\titems={ items }\n\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\tselectedIndex={ selectedIndex }\n\t\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\t\tlistBoxId={ listBoxId }\n\t\t\t\t\t\t\tclassName={ className }\n\t\t\t\t\t\t\tComponent={ VisuallyHidden }\n\t\t\t\t\t\t/>,\n\t\t\t\t\t\tcontentRef.current.ownerDocument.body\n\t\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn AutocompleterUI;\n}\n\nfunction useOnClickOutside(\n\tref: React.RefObject< HTMLElement >,\n\thandler: AutocompleterUIProps[ 'reset' ]\n) {\n\tuseEffect( () => {\n\t\tconst listener = ( event: MouseEvent | TouchEvent ) => {\n\t\t\t// Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element\n\t\t\tif (\n\t\t\t\t! ref.current ||\n\t\t\t\tref.current.contains( event.target as Node )\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\thandler( event );\n\t\t};\n\t\tdocument.addEventListener( 'mousedown', listener );\n\t\tdocument.addEventListener( 'touchstart', listener );\n\t\treturn () => {\n\t\t\tdocument.removeEventListener( 'mousedown', listener );\n\t\t\tdocument.removeEventListener( 'touchstart', listener );\n\t\t};\n\t\t// Disable reason: `ref` is a ref object and should not be included in a\n\t\t// hook's dependency list.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ handler ] );\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/autocomplete/autocompleter-ui.native.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -9,7 +8,6 @@ import { View, Animated, StyleSheet, Text, TouchableOpacity, ScrollView } from '
  */
 import { useLayoutEffect, useEffect, useRef, useState, useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { Icon, __unstableAutocompletionItemsFill as AutocompletionItemsFill } from '@wordpress/components';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
@@ -18,6 +16,10 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import BackgroundView from './background-view';
 import getDefaultUseItems from './get-default-use-items';
 import styles from './style.scss';
+import Icon from '../icon';
+import { __unstableAutocompletionItemsFill as AutocompletionItemsFill } from '../mobile/autocompletion-items';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const {
   compose: stylesCompose
 } = StyleSheet;
@@ -93,44 +95,53 @@ export function getAutoCompleterUI(autocompleter) {
     if (!filteredItems.length > 0 || !isVisible) {
       return null;
     }
-    return createElement(AutocompletionItemsFill, null, createElement(View, {
-      style: styles['components-autocomplete']
-    }, createElement(Animated.View, {
-      style: contentStyles
-    }, createElement(BackgroundView, null, createElement(ScrollView, {
-      testID: "autocompleter",
-      ref: scrollViewRef,
-      horizontal: true,
-      contentContainerStyle: styles['components-autocomplete__content'],
-      showsHorizontalScrollIndicator: false,
-      keyboardShouldPersistTaps: "always",
-      accessibilityLabel:
-      // translators: Slash inserter autocomplete results
-      __('Slash inserter results')
-    }, filteredItems.map((option, index) => {
-      const isActive = index === selectedIndex;
-      const itemStyle = stylesCompose(styles['components-autocomplete__item'], isActive && activeItemStyles);
-      const textStyle = stylesCompose(textStyles, isActive && activeTextStyles);
-      const iconStyle = stylesCompose(iconStyles, isActive && activeIconStyles);
-      const iconSource = option?.value?.icon?.src || option?.value?.icon;
-      return createElement(TouchableOpacity, {
-        activeOpacity: 0.5,
-        style: itemStyle,
-        key: index,
-        onPress: () => onSelect(option),
-        accessibilityLabel: sprintf(
-        // translators: %s: Block name e.g. "Image block"
-        __('%s block'), option?.value?.title)
-      }, createElement(View, {
-        style: styles['components-autocomplete__icon']
-      }, createElement(Icon, {
-        icon: iconSource,
-        size: 24,
-        style: iconStyle
-      })), createElement(Text, {
-        style: textStyle
-      }, option?.value?.title));
-    }))))));
+    return /*#__PURE__*/_jsx(AutocompletionItemsFill, {
+      children: /*#__PURE__*/_jsx(View, {
+        style: styles['components-autocomplete'],
+        children: /*#__PURE__*/_jsx(Animated.View, {
+          style: contentStyles,
+          children: /*#__PURE__*/_jsx(BackgroundView, {
+            children: /*#__PURE__*/_jsx(ScrollView, {
+              testID: "autocompleter",
+              ref: scrollViewRef,
+              horizontal: true,
+              contentContainerStyle: styles['components-autocomplete__content'],
+              showsHorizontalScrollIndicator: false,
+              keyboardShouldPersistTaps: "always",
+              accessibilityLabel:
+              // translators: Slash inserter autocomplete results
+              __('Slash inserter results'),
+              children: filteredItems.map((option, index) => {
+                const isActive = index === selectedIndex;
+                const itemStyle = stylesCompose(styles['components-autocomplete__item'], isActive && activeItemStyles);
+                const textStyle = stylesCompose(textStyles, isActive && activeTextStyles);
+                const iconStyle = stylesCompose(iconStyles, isActive && activeIconStyles);
+                const iconSource = option?.value?.icon?.src || option?.value?.icon;
+                return /*#__PURE__*/_jsxs(TouchableOpacity, {
+                  activeOpacity: 0.5,
+                  style: itemStyle,
+                  onPress: () => onSelect(option),
+                  accessibilityLabel: sprintf(
+                  // translators: %s: Block name e.g. "Image block"
+                  __('%s block'), option?.value?.title),
+                  children: [/*#__PURE__*/_jsx(View, {
+                    style: styles['components-autocomplete__icon'],
+                    children: /*#__PURE__*/_jsx(Icon, {
+                      icon: iconSource,
+                      size: 24,
+                      style: iconStyle
+                    })
+                  }), /*#__PURE__*/_jsx(Text, {
+                    style: textStyle,
+                    children: option?.value?.title
+                  })]
+                }, index);
+              })
+            })
+          })
+        })
+      })
+    });
   }
   return AutocompleterUI;
 }

package/build-module/autocomplete/autocompleter-ui.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["View","Animated","StyleSheet","Text","TouchableOpacity","ScrollView","useLayoutEffect","useEffect","useRef","useState","useCallback","__","sprintf","Icon","__unstableAutocompletionItemsFill","AutocompletionItemsFill","usePreferredColorSchemeStyle","BackgroundView","getDefaultUseItems","styles","compose","stylesCompose","getAutoCompleterUI","autocompleter","useItems","AutocompleterUI","filterValue","selectedIndex","onChangeOptions","onSelect","value","reset","items","filteredItems","filter","item","isDisabled","scrollViewRef","animationValue","Value","current","isVisible","setIsVisible","text","length","scrollTo","x","animated","startAnimation","activeItemStyles","iconStyles","activeIconStyles","textStyles","activeTextStyles","show","timing","toValue","duration","useNativeDriver","start","finished","contentStyles","transform","translateY","interpolate","inputRange","outputRange","height","createElement","style","testID","ref","horizontal","contentContainerStyle","showsHorizontalScrollIndicator","keyboardShouldPersistTaps","accessibilityLabel","map","option","index","isActive","itemStyle","textStyle","iconStyle","iconSource","icon","src","activeOpacity","key","onPress","title","size"],"sources":["@wordpress/components/src/autocomplete/autocompleter-ui.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tView,\n\tAnimated,\n\tStyleSheet,\n\tText,\n\tTouchableOpacity,\n\tScrollView,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseLayoutEffect,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n\tuseCallback,\n} from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tIcon,\n\t__unstableAutocompletionItemsFill as AutocompletionItemsFill,\n} from '@wordpress/components';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BackgroundView from './background-view';\nimport getDefaultUseItems from './get-default-use-items';\nimport styles from './style.scss';\n\nconst { compose: stylesCompose } = StyleSheet;\n\nexport function getAutoCompleterUI( autocompleter ) {\n\tconst useItems = autocompleter.useItems\n\t\t? autocompleter.useItems\n\t\t: getDefaultUseItems( autocompleter );\n\n\tfunction AutocompleterUI( {\n\t\tfilterValue,\n\t\tselectedIndex,\n\t\tonChangeOptions,\n\t\tonSelect,\n\t\tvalue,\n\t\treset,\n\t} ) {\n\t\tconst [ items ] = useItems( filterValue );\n\t\tconst filteredItems = items.filter( ( item ) => ! item.isDisabled );\n\t\tconst scrollViewRef = useRef();\n\t\tconst animationValue = useRef( new Animated.Value( 0 ) ).current;\n\t\tconst [ isVisible, setIsVisible ] = useState( false );\n\t\tconst { text } = value;\n\n\t\tuseEffect( () => {\n\t\t\tif ( ! isVisible && text.length > 0 ) {\n\t\t\t\tsetIsVisible( true );\n\t\t\t}\n\t\t}, [ isVisible, text ] );\n\n\t\tuseLayoutEffect( () => {\n\t\t\tonChangeOptions( items );\n\t\t\tscrollViewRef.current?.scrollTo( { x: 0, animated: false } );\n\n\t\t\tif ( isVisible && text.length > 0 ) {\n\t\t\t\tstartAnimation( true );\n\t\t\t} else if ( isVisible && text.length === 0 ) {\n\t\t\t\tstartAnimation( false );\n\t\t\t}\n\t\t\t// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.\n\t\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t}, [ items, isVisible, text ] );\n\n\t\tconst activeItemStyles = usePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-autocomplete__item-active' ],\n\t\t\tstyles[ 'components-autocomplete__item-active-dark' ]\n\t\t);\n\n\t\tconst iconStyles = usePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-autocomplete__icon' ],\n\t\t\tstyles[ 'components-autocomplete__icon-active-dark' ]\n\t\t);\n\n\t\tconst activeIconStyles = usePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-autocomplete__icon-active ' ],\n\t\t\tstyles[ 'components-autocomplete__icon-active-dark' ]\n\t\t);\n\n\t\tconst textStyles = usePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-autocomplete__text' ],\n\t\t\tstyles[ 'components-autocomplete__text-dark' ]\n\t\t);\n\n\t\tconst activeTextStyles = usePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-autocomplete__text-active' ],\n\t\t\tstyles[ 'components-autocomplete__text-active-dark' ]\n\t\t);\n\n\t\tconst startAnimation = useCallback(\n\t\t\t( show ) => {\n\t\t\t\tAnimated.timing( animationValue, {\n\t\t\t\t\ttoValue: show ? 1 : 0,\n\t\t\t\t\tduration: show ? 200 : 100,\n\t\t\t\t\tuseNativeDriver: true,\n\t\t\t\t} ).start( ( { finished } ) => {\n\t\t\t\t\tif ( finished && ! show && isVisible ) {\n\t\t\t\t\t\tsetIsVisible( false );\n\t\t\t\t\t\treset();\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t},\n\t\t\t// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.\n\t\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t\t[ isVisible ]\n\t\t);\n\n\t\tconst contentStyles = {\n\t\t\ttransform: [\n\t\t\t\t{\n\t\t\t\t\ttranslateY: animationValue.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, 1 ],\n\t\t\t\t\t\toutputRange: [\n\t\t\t\t\t\t\tstyles[ 'components-autocomplete' ].height,\n\t\t\t\t\t\t\t0,\n\t\t\t\t\t\t],\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t],\n\t\t};\n\n\t\tif ( ! filteredItems.length > 0 || ! isVisible ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<AutocompletionItemsFill>\n\t\t\t\t<View style={ styles[ 'components-autocomplete' ] }>\n\t\t\t\t\t<Animated.View style={ contentStyles }>\n\t\t\t\t\t\t<BackgroundView>\n\t\t\t\t\t\t\t<ScrollView\n\t\t\t\t\t\t\t\ttestID=\"autocompleter\"\n\t\t\t\t\t\t\t\tref={ scrollViewRef }\n\t\t\t\t\t\t\t\thorizontal\n\t\t\t\t\t\t\t\tcontentContainerStyle={\n\t\t\t\t\t\t\t\t\tstyles[ 'components-autocomplete__content' ]\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\t\t\t\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\t\t\t\t\t\taccessibilityLabel={\n\t\t\t\t\t\t\t\t\t// translators: Slash inserter autocomplete results\n\t\t\t\t\t\t\t\t\t__( 'Slash inserter results' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ filteredItems.map( ( option, index ) => {\n\t\t\t\t\t\t\t\t\tconst isActive = index === selectedIndex;\n\t\t\t\t\t\t\t\t\tconst itemStyle = stylesCompose(\n\t\t\t\t\t\t\t\t\t\tstyles[\n\t\t\t\t\t\t\t\t\t\t\t'components-autocomplete__item'\n\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\tisActive && activeItemStyles\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tconst textStyle = stylesCompose(\n\t\t\t\t\t\t\t\t\t\ttextStyles,\n\t\t\t\t\t\t\t\t\t\tisActive && activeTextStyles\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tconst iconStyle = stylesCompose(\n\t\t\t\t\t\t\t\t\t\ticonStyles,\n\t\t\t\t\t\t\t\t\t\tisActive && activeIconStyles\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tconst iconSource =\n\t\t\t\t\t\t\t\t\t\toption?.value?.icon?.src ||\n\t\t\t\t\t\t\t\t\t\toption?.value?.icon;\n\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<TouchableOpacity\n\t\t\t\t\t\t\t\t\t\t\tactiveOpacity={ 0.5 }\n\t\t\t\t\t\t\t\t\t\t\tstyle={ itemStyle }\n\t\t\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\t\t\tonPress={ () => onSelect( option ) }\n\t\t\t\t\t\t\t\t\t\t\taccessibilityLabel={ sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t// translators: %s: Block name e.g. \"Image block\"\n\t\t\t\t\t\t\t\t\t\t\t\t__( '%s block' ),\n\t\t\t\t\t\t\t\t\t\t\t\toption?.value?.title\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyles[\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'components-autocomplete__icon'\n\t\t\t\t\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\t\t\ticon={ iconSource }\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={ iconStyle }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t\t\t\t\t\t<Text style={ textStyle }>\n\t\t\t\t\t\t\t\t\t\t\t\t{ option?.value?.title }\n\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t</TouchableOpacity>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t</ScrollView>\n\t\t\t\t\t\t</BackgroundView>\n\t\t\t\t\t</Animated.View>\n\t\t\t\t</View>\n\t\t\t</AutocompletionItemsFill>\n\t\t);\n\t}\n\n\treturn AutocompleterUI;\n}\n\nexport default getAutoCompleterUI;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["View","Animated","StyleSheet","Text","TouchableOpacity","ScrollView","useLayoutEffect","useEffect","useRef","useState","useCallback","__","sprintf","usePreferredColorSchemeStyle","BackgroundView","getDefaultUseItems","styles","Icon","__unstableAutocompletionItemsFill","AutocompletionItemsFill","jsx","_jsx","jsxs","_jsxs","compose","stylesCompose","getAutoCompleterUI","autocompleter","useItems","AutocompleterUI","filterValue","selectedIndex","onChangeOptions","onSelect","value","reset","items","filteredItems","filter","item","isDisabled","scrollViewRef","animationValue","Value","current","isVisible","setIsVisible","text","length","scrollTo","x","animated","startAnimation","activeItemStyles","iconStyles","activeIconStyles","textStyles","activeTextStyles","show","timing","toValue","duration","useNativeDriver","start","finished","contentStyles","transform","translateY","interpolate","inputRange","outputRange","height","children","style","testID","ref","horizontal","contentContainerStyle","showsHorizontalScrollIndicator","keyboardShouldPersistTaps","accessibilityLabel","map","option","index","isActive","itemStyle","textStyle","iconStyle","iconSource","icon","src","activeOpacity","onPress","title","size"],"sources":["@wordpress/components/src/autocomplete/autocompleter-ui.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tView,\n\tAnimated,\n\tStyleSheet,\n\tText,\n\tTouchableOpacity,\n\tScrollView,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseLayoutEffect,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n\tuseCallback,\n} from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BackgroundView from './background-view';\nimport getDefaultUseItems from './get-default-use-items';\nimport styles from './style.scss';\nimport Icon from '../icon';\nimport { __unstableAutocompletionItemsFill as AutocompletionItemsFill } from '../mobile/autocompletion-items';\n\nconst { compose: stylesCompose } = StyleSheet;\n\nexport function getAutoCompleterUI( autocompleter ) {\n\tconst useItems = autocompleter.useItems\n\t\t? autocompleter.useItems\n\t\t: getDefaultUseItems( autocompleter );\n\n\tfunction AutocompleterUI( {\n\t\tfilterValue,\n\t\tselectedIndex,\n\t\tonChangeOptions,\n\t\tonSelect,\n\t\tvalue,\n\t\treset,\n\t} ) {\n\t\tconst [ items ] = useItems( filterValue );\n\t\tconst filteredItems = items.filter( ( item ) => ! item.isDisabled );\n\t\tconst scrollViewRef = useRef();\n\t\tconst animationValue = useRef( new Animated.Value( 0 ) ).current;\n\t\tconst [ isVisible, setIsVisible ] = useState( false );\n\t\tconst { text } = value;\n\n\t\tuseEffect( () => {\n\t\t\tif ( ! isVisible && text.length > 0 ) {\n\t\t\t\tsetIsVisible( true );\n\t\t\t}\n\t\t}, [ isVisible, text ] );\n\n\t\tuseLayoutEffect( () => {\n\t\t\tonChangeOptions( items );\n\t\t\tscrollViewRef.current?.scrollTo( { x: 0, animated: false } );\n\n\t\t\tif ( isVisible && text.length > 0 ) {\n\t\t\t\tstartAnimation( true );\n\t\t\t} else if ( isVisible && text.length === 0 ) {\n\t\t\t\tstartAnimation( false );\n\t\t\t}\n\t\t\t// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.\n\t\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t}, [ items, isVisible, text ] );\n\n\t\tconst activeItemStyles = usePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-autocomplete__item-active' ],\n\t\t\tstyles[ 'components-autocomplete__item-active-dark' ]\n\t\t);\n\n\t\tconst iconStyles = usePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-autocomplete__icon' ],\n\t\t\tstyles[ 'components-autocomplete__icon-active-dark' ]\n\t\t);\n\n\t\tconst activeIconStyles = usePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-autocomplete__icon-active ' ],\n\t\t\tstyles[ 'components-autocomplete__icon-active-dark' ]\n\t\t);\n\n\t\tconst textStyles = usePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-autocomplete__text' ],\n\t\t\tstyles[ 'components-autocomplete__text-dark' ]\n\t\t);\n\n\t\tconst activeTextStyles = usePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-autocomplete__text-active' ],\n\t\t\tstyles[ 'components-autocomplete__text-active-dark' ]\n\t\t);\n\n\t\tconst startAnimation = useCallback(\n\t\t\t( show ) => {\n\t\t\t\tAnimated.timing( animationValue, {\n\t\t\t\t\ttoValue: show ? 1 : 0,\n\t\t\t\t\tduration: show ? 200 : 100,\n\t\t\t\t\tuseNativeDriver: true,\n\t\t\t\t} ).start( ( { finished } ) => {\n\t\t\t\t\tif ( finished && ! show && isVisible ) {\n\t\t\t\t\t\tsetIsVisible( false );\n\t\t\t\t\t\treset();\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t},\n\t\t\t// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.\n\t\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t\t[ isVisible ]\n\t\t);\n\n\t\tconst contentStyles = {\n\t\t\ttransform: [\n\t\t\t\t{\n\t\t\t\t\ttranslateY: animationValue.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, 1 ],\n\t\t\t\t\t\toutputRange: [\n\t\t\t\t\t\t\tstyles[ 'components-autocomplete' ].height,\n\t\t\t\t\t\t\t0,\n\t\t\t\t\t\t],\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t],\n\t\t};\n\n\t\tif ( ! filteredItems.length > 0 || ! isVisible ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<AutocompletionItemsFill>\n\t\t\t\t<View style={ styles[ 'components-autocomplete' ] }>\n\t\t\t\t\t<Animated.View style={ contentStyles }>\n\t\t\t\t\t\t<BackgroundView>\n\t\t\t\t\t\t\t<ScrollView\n\t\t\t\t\t\t\t\ttestID=\"autocompleter\"\n\t\t\t\t\t\t\t\tref={ scrollViewRef }\n\t\t\t\t\t\t\t\thorizontal\n\t\t\t\t\t\t\t\tcontentContainerStyle={\n\t\t\t\t\t\t\t\t\tstyles[ 'components-autocomplete__content' ]\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\t\t\t\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\t\t\t\t\t\taccessibilityLabel={\n\t\t\t\t\t\t\t\t\t// translators: Slash inserter autocomplete results\n\t\t\t\t\t\t\t\t\t__( 'Slash inserter results' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ filteredItems.map( ( option, index ) => {\n\t\t\t\t\t\t\t\t\tconst isActive = index === selectedIndex;\n\t\t\t\t\t\t\t\t\tconst itemStyle = stylesCompose(\n\t\t\t\t\t\t\t\t\t\tstyles[\n\t\t\t\t\t\t\t\t\t\t\t'components-autocomplete__item'\n\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\tisActive && activeItemStyles\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tconst textStyle = stylesCompose(\n\t\t\t\t\t\t\t\t\t\ttextStyles,\n\t\t\t\t\t\t\t\t\t\tisActive && activeTextStyles\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tconst iconStyle = stylesCompose(\n\t\t\t\t\t\t\t\t\t\ticonStyles,\n\t\t\t\t\t\t\t\t\t\tisActive && activeIconStyles\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tconst iconSource =\n\t\t\t\t\t\t\t\t\t\toption?.value?.icon?.src ||\n\t\t\t\t\t\t\t\t\t\toption?.value?.icon;\n\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<TouchableOpacity\n\t\t\t\t\t\t\t\t\t\t\tactiveOpacity={ 0.5 }\n\t\t\t\t\t\t\t\t\t\t\tstyle={ itemStyle }\n\t\t\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\t\t\tonPress={ () => onSelect( option ) }\n\t\t\t\t\t\t\t\t\t\t\taccessibilityLabel={ sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t// translators: %s: Block name e.g. \"Image block\"\n\t\t\t\t\t\t\t\t\t\t\t\t__( '%s block' ),\n\t\t\t\t\t\t\t\t\t\t\t\toption?.value?.title\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyles[\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'components-autocomplete__icon'\n\t\t\t\t\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\t\t\ticon={ iconSource }\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={ iconStyle }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t\t\t\t\t\t<Text style={ textStyle }>\n\t\t\t\t\t\t\t\t\t\t\t\t{ option?.value?.title }\n\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t</TouchableOpacity>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t</ScrollView>\n\t\t\t\t\t\t</BackgroundView>\n\t\t\t\t\t</Animated.View>\n\t\t\t\t</View>\n\t\t\t</AutocompletionItemsFill>\n\t\t);\n\t}\n\n\treturn AutocompleterUI;\n}\n\nexport default getAutoCompleterUI;\n"],"mappings":"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","ignoreList":[]}

package/build-module/autocomplete/background-view.android.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -13,13 +12,15 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
  * Internal dependencies
  */
 import styles from './style.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
 const BackgroundView = ({
   children
 }) => {
   const backgroundStyles = usePreferredColorSchemeStyle(styles['components-autocomplete__background'], styles['components-autocomplete__background-dark']);
-  return createElement(View, {
-    style: backgroundStyles
-  }, children);
+  return /*#__PURE__*/_jsx(View, {
+    style: backgroundStyles,
+    children: children
+  });
 };
 export default BackgroundView;
 //# sourceMappingURL=background-view.android.js.map

package/build-module/autocomplete/background-view.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["View","usePreferredColorSchemeStyle","styles","BackgroundView","children","backgroundStyles","createElement","style"],"sources":["@wordpress/components/src/autocomplete/background-view.android.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst BackgroundView = ( { children } ) => {\n\tconst backgroundStyles = usePreferredColorSchemeStyle(\n\t\tstyles[ 'components-autocomplete__background' ],\n\t\tstyles[ 'components-autocomplete__background-dark' ]\n\t);\n\n\treturn <View style={ backgroundStyles }>{ children }</View>;\n};\n\nexport default BackgroundView;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,QAAQ,cAAc;;AAEnC;AACA;AACA;AACA,SAASC,4BAA4B,QAAQ,oBAAoB;;AAEjE;AACA;AACA;AACA,OAAOC,MAAM,MAAM,cAAc;AAEjC,MAAMC,cAAc,GAAGA,CAAE;EAAEC;AAAS,CAAC,KAAM;EAC1C,MAAMC,gBAAgB,GAAGJ,4BAA4B,CACpDC,MAAM,CAAE,qCAAqC,CAAE,EAC/CA,MAAM,CAAE,0CAA0C,CACnD,CAAC;EAED,OAAOI,aAAA,CAACN,IAAI;IAACO,KAAK,EAAGF;EAAkB,GAAGD,QAAgB,CAAC;AAC5D,CAAC;AAED,eAAeD,cAAc","ignoreList":[]}
+{"version":3,"names":["View","usePreferredColorSchemeStyle","styles","jsx","_jsx","BackgroundView","children","backgroundStyles","style"],"sources":["@wordpress/components/src/autocomplete/background-view.android.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst BackgroundView = ( { children } ) => {\n\tconst backgroundStyles = usePreferredColorSchemeStyle(\n\t\tstyles[ 'components-autocomplete__background' ],\n\t\tstyles[ 'components-autocomplete__background-dark' ]\n\t);\n\n\treturn <View style={ backgroundStyles }>{ children }</View>;\n};\n\nexport default BackgroundView;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAI,QAAQ,cAAc;;AAEnC;AACA;AACA;AACA,SAASC,4BAA4B,QAAQ,oBAAoB;;AAEjE;AACA;AACA;AACA,OAAOC,MAAM,MAAM,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAElC,MAAMC,cAAc,GAAGA,CAAE;EAAEC;AAAS,CAAC,KAAM;EAC1C,MAAMC,gBAAgB,GAAGN,4BAA4B,CACpDC,MAAM,CAAE,qCAAqC,CAAE,EAC/CA,MAAM,CAAE,0CAA0C,CACnD,CAAC;EAED,oBAAOE,IAAA,CAACJ,IAAI;IAACQ,KAAK,EAAGD,gBAAkB;IAAAD,QAAA,EAAGA;EAAQ,CAAQ,CAAC;AAC5D,CAAC;AAED,eAAeD,cAAc","ignoreList":[]}