@wordpress/block-editor 12.25.0 → 13.0.0

package/build/components/block-types-list/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_blocks","require","_compose","_inserterListItem","_interopRequireDefault","_inserterListbox","chunk","array","size","chunks","i","j","length","push","slice","BlockTypesList","items","onSelect","onHover","children","label","isDraggable","className","listId","useInstanceId","_react","createElement","InserterListboxGroup","map","row","InserterListboxRow","key","item","default","id","getBlockMenuDefaultClassName","isDisabled","isFirst","rowId","_default","exports"],"sources":["@wordpress/block-editor/src/components/block-types-list/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockMenuDefaultClassName } from '@wordpress/blocks';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport InserterListItem from '../inserter-list-item';\nimport { InserterListboxGroup, InserterListboxRow } from '../inserter-listbox';\n\nfunction chunk( array, size ) {\n\tconst chunks = [];\n\tfor ( let i = 0, j = array.length; i < j; i += size ) {\n\t\tchunks.push( array.slice( i, i + size ) );\n\t}\n\treturn chunks;\n}\n\nfunction BlockTypesList( {\n\titems = [],\n\tonSelect,\n\tonHover = () => {},\n\tchildren,\n\tlabel,\n\tisDraggable = true,\n} ) {\n\tconst className = 'block-editor-block-types-list';\n\tconst listId = useInstanceId( BlockTypesList, className );\n\treturn (\n\t\t<InserterListboxGroup className={ className } aria-label={ label }>\n\t\t\t{ chunk( items, 3 ).map( ( row, i ) => (\n\t\t\t\t<InserterListboxRow key={ i }>\n\t\t\t\t\t{ row.map( ( item, j ) => (\n\t\t\t\t\t\t<InserterListItem\n\t\t\t\t\t\t\tkey={ item.id }\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tclassName={ getBlockMenuDefaultClassName(\n\t\t\t\t\t\t\t\titem.id\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\tonHover={ onHover }\n\t\t\t\t\t\t\tisDraggable={ isDraggable && ! item.isDisabled }\n\t\t\t\t\t\t\tisFirst={ i === 0 && j === 0 }\n\t\t\t\t\t\t\trowId={ `${ listId }-${ i }` }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</InserterListboxRow>\n\t\t\t) ) }\n\t\t\t{ children }\n\t\t</InserterListboxGroup>\n\t);\n}\n\nexport default BlockTypesList;\n"],"mappings":";;;;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,gBAAA,GAAAJ,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIA,SAASK,KAAKA,CAAEC,KAAK,EAAEC,IAAI,EAAG;EAC7B,MAAMC,MAAM,GAAG,EAAE;EACjB,KAAM,IAAIC,CAAC,GAAG,CAAC,EAAEC,CAAC,GAAGJ,KAAK,CAACK,MAAM,EAAEF,CAAC,GAAGC,CAAC,EAAED,CAAC,IAAIF,IAAI,EAAG;IACrDC,MAAM,CAACI,IAAI,CAAEN,KAAK,CAACO,KAAK,CAAEJ,CAAC,EAAEA,CAAC,GAAGF,IAAK,CAAE,CAAC;EAC1C;EACA,OAAOC,MAAM;AACd;AAEA,SAASM,cAAcA,CAAE;EACxBC,KAAK,GAAG,EAAE;EACVC,QAAQ;EACRC,OAAO,GAAGA,CAAA,KAAM,CAAC,CAAC;EAClBC,QAAQ;EACRC,KAAK;EACLC,WAAW,GAAG;AACf,CAAC,EAAG;EACH,MAAMC,SAAS,GAAG,+BAA+B;EACjD,MAAMC,MAAM,GAAG,IAAAC,sBAAa,EAAET,cAAc,EAAEO,SAAU,CAAC;EACzD,OACC,IAAAG,MAAA,CAAAC,aAAA,EAACrB,gBAAA,CAAAsB,oBAAoB;IAACL,SAAS,EAAGA,SAAW;IAAC,cAAaF;EAAO,GAC/Dd,KAAK,CAAEU,KAAK,EAAE,CAAE,CAAC,CAACY,GAAG,CAAE,CAAEC,GAAG,EAAEnB,CAAC,KAChC,IAAAe,MAAA,CAAAC,aAAA,EAACrB,gBAAA,CAAAyB,kBAAkB;IAACC,GAAG,EAAGrB;EAAG,GAC1BmB,GAAG,CAACD,GAAG,CAAE,CAAEI,IAAI,EAAErB,CAAC,KACnB,IAAAc,MAAA,CAAAC,aAAA,EAACvB,iBAAA,CAAA8B,OAAgB;IAChBF,GAAG,EAAGC,IAAI,CAACE,EAAI;IACfF,IAAI,EAAGA,IAAM;IACbV,SAAS,EAAG,IAAAa,oCAA4B,EACvCH,IAAI,CAACE,EACN,CAAG;IACHjB,QAAQ,EAAGA,QAAU;IACrBC,OAAO,EAAGA,OAAS;IACnBG,WAAW,EAAGA,WAAW,IAAI,CAAEW,IAAI,CAACI,UAAY;IAChDC,OAAO,EAAG3B,CAAC,KAAK,CAAC,IAAIC,CAAC,KAAK,CAAG;IAC9B2B,KAAK,EAAI,GAAGf,MAAQ,IAAIb,CAAG;EAAG,CAC9B,CACA,CACiB,CACnB,CAAC,EACDS,QACmB,CAAC;AAEzB;AAAC,IAAAoB,QAAA,GAAAC,OAAA,CAAAP,OAAA,GAEclB,cAAc","ignoreList":[]}
+{"version":3,"names":["_blocks","require","_compose","_inserterListItem","_interopRequireDefault","_inserterListbox","_jsxRuntime","chunk","array","size","chunks","i","j","length","push","slice","BlockTypesList","items","onSelect","onHover","children","label","isDraggable","className","listId","useInstanceId","jsxs","InserterListboxGroup","map","row","jsx","InserterListboxRow","item","default","getBlockMenuDefaultClassName","id","isDisabled","isFirst","rowId","_default","exports"],"sources":["@wordpress/block-editor/src/components/block-types-list/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockMenuDefaultClassName } from '@wordpress/blocks';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport InserterListItem from '../inserter-list-item';\nimport { InserterListboxGroup, InserterListboxRow } from '../inserter-listbox';\n\nfunction chunk( array, size ) {\n\tconst chunks = [];\n\tfor ( let i = 0, j = array.length; i < j; i += size ) {\n\t\tchunks.push( array.slice( i, i + size ) );\n\t}\n\treturn chunks;\n}\n\nfunction BlockTypesList( {\n\titems = [],\n\tonSelect,\n\tonHover = () => {},\n\tchildren,\n\tlabel,\n\tisDraggable = true,\n} ) {\n\tconst className = 'block-editor-block-types-list';\n\tconst listId = useInstanceId( BlockTypesList, className );\n\treturn (\n\t\t<InserterListboxGroup className={ className } aria-label={ label }>\n\t\t\t{ chunk( items, 3 ).map( ( row, i ) => (\n\t\t\t\t<InserterListboxRow key={ i }>\n\t\t\t\t\t{ row.map( ( item, j ) => (\n\t\t\t\t\t\t<InserterListItem\n\t\t\t\t\t\t\tkey={ item.id }\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tclassName={ getBlockMenuDefaultClassName(\n\t\t\t\t\t\t\t\titem.id\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\tonHover={ onHover }\n\t\t\t\t\t\t\tisDraggable={ isDraggable && ! item.isDisabled }\n\t\t\t\t\t\t\tisFirst={ i === 0 && j === 0 }\n\t\t\t\t\t\t\trowId={ `${ listId }-${ i }` }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</InserterListboxRow>\n\t\t\t) ) }\n\t\t\t{ children }\n\t\t</InserterListboxGroup>\n\t);\n}\n\nexport default BlockTypesList;\n"],"mappings":";;;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,gBAAA,GAAAJ,OAAA;AAA+E,IAAAK,WAAA,GAAAL,OAAA;AAV/E;AACA;AACA;;AAIA;AACA;AACA;;AAIA,SAASM,KAAKA,CAAEC,KAAK,EAAEC,IAAI,EAAG;EAC7B,MAAMC,MAAM,GAAG,EAAE;EACjB,KAAM,IAAIC,CAAC,GAAG,CAAC,EAAEC,CAAC,GAAGJ,KAAK,CAACK,MAAM,EAAEF,CAAC,GAAGC,CAAC,EAAED,CAAC,IAAIF,IAAI,EAAG;IACrDC,MAAM,CAACI,IAAI,CAAEN,KAAK,CAACO,KAAK,CAAEJ,CAAC,EAAEA,CAAC,GAAGF,IAAK,CAAE,CAAC;EAC1C;EACA,OAAOC,MAAM;AACd;AAEA,SAASM,cAAcA,CAAE;EACxBC,KAAK,GAAG,EAAE;EACVC,QAAQ;EACRC,OAAO,GAAGA,CAAA,KAAM,CAAC,CAAC;EAClBC,QAAQ;EACRC,KAAK;EACLC,WAAW,GAAG;AACf,CAAC,EAAG;EACH,MAAMC,SAAS,GAAG,+BAA+B;EACjD,MAAMC,MAAM,GAAG,IAAAC,sBAAa,EAAET,cAAc,EAAEO,SAAU,CAAC;EACzD,oBACC,IAAAjB,WAAA,CAAAoB,IAAA,EAACrB,gBAAA,CAAAsB,oBAAoB;IAACJ,SAAS,EAAGA,SAAW;IAAC,cAAaF,KAAO;IAAAD,QAAA,GAC/Db,KAAK,CAAEU,KAAK,EAAE,CAAE,CAAC,CAACW,GAAG,CAAE,CAAEC,GAAG,EAAElB,CAAC,kBAChC,IAAAL,WAAA,CAAAwB,GAAA,EAACzB,gBAAA,CAAA0B,kBAAkB;MAAAX,QAAA,EAChBS,GAAG,CAACD,GAAG,CAAE,CAAEI,IAAI,EAAEpB,CAAC,kBACnB,IAAAN,WAAA,CAAAwB,GAAA,EAAC3B,iBAAA,CAAA8B,OAAgB;QAEhBD,IAAI,EAAGA,IAAM;QACbT,SAAS,EAAG,IAAAW,oCAA4B,EACvCF,IAAI,CAACG,EACN,CAAG;QACHjB,QAAQ,EAAGA,QAAU;QACrBC,OAAO,EAAGA,OAAS;QACnBG,WAAW,EAAGA,WAAW,IAAI,CAAEU,IAAI,CAACI,UAAY;QAChDC,OAAO,EAAG1B,CAAC,KAAK,CAAC,IAAIC,CAAC,KAAK,CAAG;QAC9B0B,KAAK,EAAI,GAAGd,MAAQ,IAAIb,CAAG;MAAG,GATxBqB,IAAI,CAACG,EAUX,CACA;IAAC,GAdsBxB,CAeN,CACnB,CAAC,EACDS,QAAQ;EAAA,CACW,CAAC;AAEzB;AAAC,IAAAmB,QAAA,GAAAC,OAAA,CAAAP,OAAA,GAEcjB,cAAc","ignoreList":[]}

package/build/components/block-types-list/index.native.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = BlockTypesList;
-var _react = require("react");
 var _reactNative = require("react-native");
 var _element = require("@wordpress/element");
 var _components = require("@wordpress/components");
 var _compose = require("@wordpress/compose");
 var _style = _interopRequireDefault(require("./style.scss"));
 var _inserterButton = _interopRequireDefault(require("../inserter-button"));
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -72,26 +72,27 @@ function BlockTypesList({
   const renderSection = ({
     item
   }) => {
-    return (0, _react.createElement)(_reactNative.TouchableWithoutFeedback, {
-      accessible: false
-    }, (0, _react.createElement)(_reactNative.FlatList, {
-      data: item.list,
-      key: `InserterUI-${name}-${numberOfColumns}` // Re-render when numberOfColumns changes.
-      ,
-      numColumns: numberOfColumns,
-      ItemSeparatorComponent: () => (0, _react.createElement)(_reactNative.TouchableWithoutFeedback, {
-        accessible: false
-      }, (0, _react.createElement)(_reactNative.View, {
-        style: _style.default['block-types-list__row-separator']
-      })),
-      scrollEnabled: false,
-      renderItem: renderListItem
-    }));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
+      accessible: false,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+        data: item.list,
+        // Re-render when numberOfColumns changes.
+        numColumns: numberOfColumns,
+        ItemSeparatorComponent: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
+          accessible: false,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: _style.default['block-types-list__row-separator']
+          })
+        }),
+        scrollEnabled: false,
+        renderItem: renderListItem
+      }, `InserterUI-${name}-${numberOfColumns}`)
+    });
   };
   const renderListItem = ({
     item
   }) => {
-    return (0, _react.createElement)(_inserterButton.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_inserterButton.default, {
       item: item,
       itemWidth: itemWidth,
       maxWidth: maxWidth,
@@ -109,16 +110,19 @@ function BlockTypesList({
     if (!metadata?.icon || !metadata?.title) {
       return null;
     }
-    return (0, _react.createElement)(_reactNative.TouchableWithoutFeedback, {
-      accessible: false
-    }, (0, _react.createElement)(_components.Gradient, {
-      gradientValue: sectionHeaderGradientValue,
-      style: _style.default['block-types-list__section-header']
-    }, metadata?.icon, (0, _react.createElement)(_reactNative.Text, {
-      style: sectionHeaderTitleStyles
-    }, metadata?.title)));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
+      accessible: false,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Gradient, {
+        gradientValue: sectionHeaderGradientValue,
+        style: _style.default['block-types-list__section-header'],
+        children: [metadata?.icon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: sectionHeaderTitleStyles,
+          children: metadata?.title
+        })]
+      })
+    });
   };
-  return (0, _react.createElement)(_reactNative.SectionList, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.SectionList, {
     onLayout: onLayout,
     testID: `InserterUI-${name}`,
     accessibilityLabel: label,

package/build/components/block-types-list/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_element","_components","_compose","_style","_interopRequireDefault","_inserterButton","MIN_COL_NUM","BlockTypesList","name","sections","onSelect","label","listProps","initialNumToRender","numberOfColumns","setNumberOfColumns","useState","itemWidth","setItemWidth","maxWidth","setMaxWidth","useEffect","dimensionsChangeSubscription","Dimensions","addEventListener","onLayout","remove","calculateItemWidth","paddingLeft","itemPaddingLeft","paddingRight","itemPaddingRight","InserterButton","Styles","modalItem","width","modalIconWrapper","columnStyle","styles","sumLeftRightPadding","bottomSheetWidth","BottomSheet","getWidth","containerTotalWidth","itemTotalWidth","columnsFitToWidth","Math","floor","numColumns","max","updatedItemWidth","contentContainerStyle","StyleSheet","flatten","renderSection","item","_react","createElement","TouchableWithoutFeedback","accessible","FlatList","data","list","key","ItemSeparatorComponent","View","style","scrollEnabled","renderItem","renderListItem","default","colorScheme","usePreferredColorScheme","sectionHeaderGradientValue","sectionHeaderTitleStyles","usePreferredColorSchemeStyle","renderSectionHeader","section","metadata","icon","title","Gradient","gradientValue","Text","SectionList","testID","accessibilityLabel","keyboardShouldPersistTaps","paddingBottom","safeAreaBottomInset"],"sources":["@wordpress/block-editor/src/components/block-types-list/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tDimensions,\n\tFlatList,\n\tSectionList,\n\tStyleSheet,\n\tText,\n\tTouchableWithoutFeedback,\n\tView,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { BottomSheet, Gradient } from '@wordpress/components';\nimport {\n\tusePreferredColorScheme,\n\tusePreferredColorSchemeStyle,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport InserterButton from '../inserter-button';\n\nconst MIN_COL_NUM = 3;\n\nexport default function BlockTypesList( {\n\tname,\n\tsections,\n\tonSelect,\n\tlabel,\n\tlistProps,\n\tinitialNumToRender = 3,\n} ) {\n\tconst [ numberOfColumns, setNumberOfColumns ] = useState( MIN_COL_NUM );\n\tconst [ itemWidth, setItemWidth ] = useState();\n\tconst [ maxWidth, setMaxWidth ] = useState();\n\n\tuseEffect( () => {\n\t\tconst dimensionsChangeSubscription = Dimensions.addEventListener(\n\t\t\t'change',\n\t\t\tonLayout\n\t\t);\n\t\tonLayout();\n\t\treturn () => {\n\t\t\tdimensionsChangeSubscription.remove();\n\t\t};\n\t}, [] );\n\n\tfunction calculateItemWidth() {\n\t\tconst { paddingLeft: itemPaddingLeft, paddingRight: itemPaddingRight } =\n\t\t\tInserterButton.Styles.modalItem;\n\t\tconst { width } = InserterButton.Styles.modalIconWrapper;\n\t\treturn width + itemPaddingLeft + itemPaddingRight;\n\t}\n\n\tfunction onLayout() {\n\t\tconst columnStyle = styles[ 'block-types-list__column' ];\n\t\tconst sumLeftRightPadding =\n\t\t\tcolumnStyle.paddingLeft + columnStyle.paddingRight;\n\n\t\tconst bottomSheetWidth = BottomSheet.getWidth();\n\t\tconst containerTotalWidth = bottomSheetWidth - sumLeftRightPadding;\n\t\tconst itemTotalWidth = calculateItemWidth();\n\n\t\tconst columnsFitToWidth = Math.floor(\n\t\t\tcontainerTotalWidth / itemTotalWidth\n\t\t);\n\n\t\tconst numColumns = Math.max( MIN_COL_NUM, columnsFitToWidth );\n\n\t\tsetNumberOfColumns( numColumns );\n\t\tsetMaxWidth( containerTotalWidth / numColumns );\n\n\t\tif ( columnsFitToWidth < MIN_COL_NUM ) {\n\t\t\tconst updatedItemWidth =\n\t\t\t\t( bottomSheetWidth - 2 * sumLeftRightPadding ) / MIN_COL_NUM;\n\t\t\tsetItemWidth( updatedItemWidth );\n\t\t}\n\t}\n\n\tconst contentContainerStyle = StyleSheet.flatten(\n\t\tlistProps.contentContainerStyle\n\t);\n\n\tconst renderSection = ( { item } ) => {\n\t\treturn (\n\t\t\t<TouchableWithoutFeedback accessible={ false }>\n\t\t\t\t<FlatList\n\t\t\t\t\tdata={ item.list }\n\t\t\t\t\tkey={ `InserterUI-${ name }-${ numberOfColumns }` } // Re-render when numberOfColumns changes.\n\t\t\t\t\tnumColumns={ numberOfColumns }\n\t\t\t\t\tItemSeparatorComponent={ () => (\n\t\t\t\t\t\t<TouchableWithoutFeedback accessible={ false }>\n\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\tstyles[ 'block-types-list__row-separator' ]\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t) }\n\t\t\t\t\tscrollEnabled={ false }\n\t\t\t\t\trenderItem={ renderListItem }\n\t\t\t\t/>\n\t\t\t</TouchableWithoutFeedback>\n\t\t);\n\t};\n\n\tconst renderListItem = ( { item } ) => {\n\t\treturn (\n\t\t\t<InserterButton\n\t\t\t\titem={ item }\n\t\t\t\titemWidth={ itemWidth }\n\t\t\t\tmaxWidth={ maxWidth }\n\t\t\t\tonSelect={ onSelect }\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst colorScheme = usePreferredColorScheme();\n\tconst sectionHeaderGradientValue =\n\t\tcolorScheme === 'light'\n\t\t\t? 'linear-gradient(#fff 70%, rgba(255, 255, 255, 0))'\n\t\t\t: 'linear-gradient(#2e2e2e 70%, rgba(46, 46, 46, 0))';\n\tconst sectionHeaderTitleStyles = usePreferredColorSchemeStyle(\n\t\tstyles[ 'block-types-list__section-header-title' ],\n\t\tstyles[ 'block-types-list__section-header-title--dark' ]\n\t);\n\n\tconst renderSectionHeader = ( { section: { metadata } } ) => {\n\t\tif ( ! metadata?.icon || ! metadata?.title ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<TouchableWithoutFeedback accessible={ false }>\n\t\t\t\t<Gradient\n\t\t\t\t\tgradientValue={ sectionHeaderGradientValue }\n\t\t\t\t\tstyle={ styles[ 'block-types-list__section-header' ] }\n\t\t\t\t>\n\t\t\t\t\t{ metadata?.icon }\n\t\t\t\t\t<Text style={ sectionHeaderTitleStyles }>\n\t\t\t\t\t\t{ metadata?.title }\n\t\t\t\t\t</Text>\n\t\t\t\t</Gradient>\n\t\t\t</TouchableWithoutFeedback>\n\t\t);\n\t};\n\n\treturn (\n\t\t<SectionList\n\t\t\tonLayout={ onLayout }\n\t\t\ttestID={ `InserterUI-${ name }` }\n\t\t\taccessibilityLabel={ label }\n\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\tsections={ sections }\n\t\t\tinitialNumToRender={ initialNumToRender }\n\t\t\trenderItem={ renderSection }\n\t\t\trenderSectionHeader={ renderSectionHeader }\n\t\t\t{ ...listProps }\n\t\t\tcontentContainerStyle={ {\n\t\t\t\t...contentContainerStyle,\n\t\t\t\tpaddingBottom: Math.max(\n\t\t\t\t\tlistProps.safeAreaBottomInset,\n\t\t\t\t\tcontentContainerStyle.paddingBottom\n\t\t\t\t),\n\t\t\t} }\n\t\t/>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_element","_components","_compose","_style","_interopRequireDefault","_inserterButton","_jsxRuntime","MIN_COL_NUM","BlockTypesList","name","sections","onSelect","label","listProps","initialNumToRender","numberOfColumns","setNumberOfColumns","useState","itemWidth","setItemWidth","maxWidth","setMaxWidth","useEffect","dimensionsChangeSubscription","Dimensions","addEventListener","onLayout","remove","calculateItemWidth","paddingLeft","itemPaddingLeft","paddingRight","itemPaddingRight","InserterButton","Styles","modalItem","width","modalIconWrapper","columnStyle","styles","sumLeftRightPadding","bottomSheetWidth","BottomSheet","getWidth","containerTotalWidth","itemTotalWidth","columnsFitToWidth","Math","floor","numColumns","max","updatedItemWidth","contentContainerStyle","StyleSheet","flatten","renderSection","item","jsx","TouchableWithoutFeedback","accessible","children","FlatList","data","list","ItemSeparatorComponent","View","style","scrollEnabled","renderItem","renderListItem","default","colorScheme","usePreferredColorScheme","sectionHeaderGradientValue","sectionHeaderTitleStyles","usePreferredColorSchemeStyle","renderSectionHeader","section","metadata","icon","title","jsxs","Gradient","gradientValue","Text","SectionList","testID","accessibilityLabel","keyboardShouldPersistTaps","paddingBottom","safeAreaBottomInset"],"sources":["@wordpress/block-editor/src/components/block-types-list/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tDimensions,\n\tFlatList,\n\tSectionList,\n\tStyleSheet,\n\tText,\n\tTouchableWithoutFeedback,\n\tView,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { BottomSheet, Gradient } from '@wordpress/components';\nimport {\n\tusePreferredColorScheme,\n\tusePreferredColorSchemeStyle,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport InserterButton from '../inserter-button';\n\nconst MIN_COL_NUM = 3;\n\nexport default function BlockTypesList( {\n\tname,\n\tsections,\n\tonSelect,\n\tlabel,\n\tlistProps,\n\tinitialNumToRender = 3,\n} ) {\n\tconst [ numberOfColumns, setNumberOfColumns ] = useState( MIN_COL_NUM );\n\tconst [ itemWidth, setItemWidth ] = useState();\n\tconst [ maxWidth, setMaxWidth ] = useState();\n\n\tuseEffect( () => {\n\t\tconst dimensionsChangeSubscription = Dimensions.addEventListener(\n\t\t\t'change',\n\t\t\tonLayout\n\t\t);\n\t\tonLayout();\n\t\treturn () => {\n\t\t\tdimensionsChangeSubscription.remove();\n\t\t};\n\t}, [] );\n\n\tfunction calculateItemWidth() {\n\t\tconst { paddingLeft: itemPaddingLeft, paddingRight: itemPaddingRight } =\n\t\t\tInserterButton.Styles.modalItem;\n\t\tconst { width } = InserterButton.Styles.modalIconWrapper;\n\t\treturn width + itemPaddingLeft + itemPaddingRight;\n\t}\n\n\tfunction onLayout() {\n\t\tconst columnStyle = styles[ 'block-types-list__column' ];\n\t\tconst sumLeftRightPadding =\n\t\t\tcolumnStyle.paddingLeft + columnStyle.paddingRight;\n\n\t\tconst bottomSheetWidth = BottomSheet.getWidth();\n\t\tconst containerTotalWidth = bottomSheetWidth - sumLeftRightPadding;\n\t\tconst itemTotalWidth = calculateItemWidth();\n\n\t\tconst columnsFitToWidth = Math.floor(\n\t\t\tcontainerTotalWidth / itemTotalWidth\n\t\t);\n\n\t\tconst numColumns = Math.max( MIN_COL_NUM, columnsFitToWidth );\n\n\t\tsetNumberOfColumns( numColumns );\n\t\tsetMaxWidth( containerTotalWidth / numColumns );\n\n\t\tif ( columnsFitToWidth < MIN_COL_NUM ) {\n\t\t\tconst updatedItemWidth =\n\t\t\t\t( bottomSheetWidth - 2 * sumLeftRightPadding ) / MIN_COL_NUM;\n\t\t\tsetItemWidth( updatedItemWidth );\n\t\t}\n\t}\n\n\tconst contentContainerStyle = StyleSheet.flatten(\n\t\tlistProps.contentContainerStyle\n\t);\n\n\tconst renderSection = ( { item } ) => {\n\t\treturn (\n\t\t\t<TouchableWithoutFeedback accessible={ false }>\n\t\t\t\t<FlatList\n\t\t\t\t\tdata={ item.list }\n\t\t\t\t\tkey={ `InserterUI-${ name }-${ numberOfColumns }` } // Re-render when numberOfColumns changes.\n\t\t\t\t\tnumColumns={ numberOfColumns }\n\t\t\t\t\tItemSeparatorComponent={ () => (\n\t\t\t\t\t\t<TouchableWithoutFeedback accessible={ false }>\n\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\tstyles[ 'block-types-list__row-separator' ]\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t) }\n\t\t\t\t\tscrollEnabled={ false }\n\t\t\t\t\trenderItem={ renderListItem }\n\t\t\t\t/>\n\t\t\t</TouchableWithoutFeedback>\n\t\t);\n\t};\n\n\tconst renderListItem = ( { item } ) => {\n\t\treturn (\n\t\t\t<InserterButton\n\t\t\t\titem={ item }\n\t\t\t\titemWidth={ itemWidth }\n\t\t\t\tmaxWidth={ maxWidth }\n\t\t\t\tonSelect={ onSelect }\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst colorScheme = usePreferredColorScheme();\n\tconst sectionHeaderGradientValue =\n\t\tcolorScheme === 'light'\n\t\t\t? 'linear-gradient(#fff 70%, rgba(255, 255, 255, 0))'\n\t\t\t: 'linear-gradient(#2e2e2e 70%, rgba(46, 46, 46, 0))';\n\tconst sectionHeaderTitleStyles = usePreferredColorSchemeStyle(\n\t\tstyles[ 'block-types-list__section-header-title' ],\n\t\tstyles[ 'block-types-list__section-header-title--dark' ]\n\t);\n\n\tconst renderSectionHeader = ( { section: { metadata } } ) => {\n\t\tif ( ! metadata?.icon || ! metadata?.title ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<TouchableWithoutFeedback accessible={ false }>\n\t\t\t\t<Gradient\n\t\t\t\t\tgradientValue={ sectionHeaderGradientValue }\n\t\t\t\t\tstyle={ styles[ 'block-types-list__section-header' ] }\n\t\t\t\t>\n\t\t\t\t\t{ metadata?.icon }\n\t\t\t\t\t<Text style={ sectionHeaderTitleStyles }>\n\t\t\t\t\t\t{ metadata?.title }\n\t\t\t\t\t</Text>\n\t\t\t\t</Gradient>\n\t\t\t</TouchableWithoutFeedback>\n\t\t);\n\t};\n\n\treturn (\n\t\t<SectionList\n\t\t\tonLayout={ onLayout }\n\t\t\ttestID={ `InserterUI-${ name }` }\n\t\t\taccessibilityLabel={ label }\n\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\tsections={ sections }\n\t\t\tinitialNumToRender={ initialNumToRender }\n\t\t\trenderItem={ renderSection }\n\t\t\trenderSectionHeader={ renderSectionHeader }\n\t\t\t{ ...listProps }\n\t\t\tcontentContainerStyle={ {\n\t\t\t\t...contentContainerStyle,\n\t\t\t\tpaddingBottom: Math.max(\n\t\t\t\t\tlistProps.safeAreaBottomInset,\n\t\t\t\t\tcontentContainerStyle.paddingBottom\n\t\t\t\t),\n\t\t\t} }\n\t\t/>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build/components/block-variation-picker/index.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
 var _icons = require("@wordpress/icons");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -26,36 +26,41 @@ function BlockVariationPicker({
   onSelect,
   allowSkip
 }) {
-  const classes = (0, _classnames.default)('block-editor-block-variation-picker', {
+  const classes = (0, _clsx.default)('block-editor-block-variation-picker', {
     'has-many-variations': variations.length > 4
   });
-  return (0, _react.createElement)(_components.Placeholder, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Placeholder, {
     icon: icon,
     label: label,
     instructions: instructions,
-    className: classes
-  }, (0, _react.createElement)("ul", {
-    className: "block-editor-block-variation-picker__variations",
-    role: "list",
-    "aria-label": (0, _i18n.__)('Block variations')
-  }, variations.map(variation => (0, _react.createElement)("li", {
-    key: variation.name
-  }, (0, _react.createElement)(_components.Button, {
-    __next40pxDefaultSize: true,
-    variant: "tertiary",
-    icon: variation.icon && variation.icon.src ? variation.icon.src : variation.icon,
-    iconSize: 48,
-    onClick: () => onSelect(variation),
-    className: "block-editor-block-variation-picker__variation",
-    label: variation.description || variation.title
-  }), (0, _react.createElement)("span", {
-    className: "block-editor-block-variation-picker__variation-label"
-  }, variation.title)))), allowSkip && (0, _react.createElement)("div", {
-    className: "block-editor-block-variation-picker__skip"
-  }, (0, _react.createElement)(_components.Button, {
-    variant: "link",
-    onClick: () => onSelect()
-  }, (0, _i18n.__)('Skip'))));
+    className: classes,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+      className: "block-editor-block-variation-picker__variations",
+      role: "list",
+      "aria-label": (0, _i18n.__)('Block variations'),
+      children: variations.map(variation => /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+          __next40pxDefaultSize: true,
+          variant: "tertiary",
+          icon: variation.icon && variation.icon.src ? variation.icon.src : variation.icon,
+          iconSize: 48,
+          onClick: () => onSelect(variation),
+          className: "block-editor-block-variation-picker__variation",
+          label: variation.description || variation.title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "block-editor-block-variation-picker__variation-label",
+          children: variation.title
+        })]
+      }, variation.name))
+    }), allowSkip && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "block-editor-block-variation-picker__skip",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+        variant: "link",
+        onClick: () => onSelect(),
+        children: (0, _i18n.__)('Skip')
+      })
+    })]
+  });
 }
 var _default = exports.default = BlockVariationPicker;
 //# sourceMappingURL=index.js.map

package/build/components/block-variation-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_i18n","_components","_icons","BlockVariationPicker","icon","layout","label","__","instructions","variations","onSelect","allowSkip","classes","classnames","length","_react","createElement","Placeholder","className","role","map","variation","key","name","Button","__next40pxDefaultSize","variant","src","iconSize","onClick","description","title","_default","exports","default"],"sources":["@wordpress/block-editor/src/components/block-variation-picker/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Button, Placeholder } from '@wordpress/components';\nimport { layout } from '@wordpress/icons';\n\nfunction BlockVariationPicker( {\n\ticon = layout,\n\tlabel = __( 'Choose variation' ),\n\tinstructions = __( 'Select a variation to start with:' ),\n\tvariations,\n\tonSelect,\n\tallowSkip,\n} ) {\n\tconst classes = classnames( 'block-editor-block-variation-picker', {\n\t\t'has-many-variations': variations.length > 4,\n\t} );\n\n\treturn (\n\t\t<Placeholder\n\t\t\ticon={ icon }\n\t\t\tlabel={ label }\n\t\t\tinstructions={ instructions }\n\t\t\tclassName={ classes }\n\t\t>\n\t\t\t{ /*\n\t\t\t * Disable reason: The `list` ARIA role is redundant but\n\t\t\t * Safari+VoiceOver won't announce the list otherwise.\n\t\t\t */\n\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t<ul\n\t\t\t\tclassName=\"block-editor-block-variation-picker__variations\"\n\t\t\t\trole=\"list\"\n\t\t\t\taria-label={ __( 'Block variations' ) }\n\t\t\t>\n\t\t\t\t{ variations.map( ( variation ) => (\n\t\t\t\t\t<li key={ variation.name }>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\tvariation.icon && variation.icon.src\n\t\t\t\t\t\t\t\t\t? variation.icon.src\n\t\t\t\t\t\t\t\t\t: variation.icon\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticonSize={ 48 }\n\t\t\t\t\t\t\tonClick={ () => onSelect( variation ) }\n\t\t\t\t\t\t\tclassName=\"block-editor-block-variation-picker__variation\"\n\t\t\t\t\t\t\tlabel={ variation.description || variation.title }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span className=\"block-editor-block-variation-picker__variation-label\">\n\t\t\t\t\t\t\t{ variation.title }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</li>\n\t\t\t\t) ) }\n\t\t\t</ul>\n\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t{ allowSkip && (\n\t\t\t\t<div className=\"block-editor-block-variation-picker__skip\">\n\t\t\t\t\t<Button variant=\"link\" onClick={ () => onSelect() }>\n\t\t\t\t\t\t{ __( 'Skip' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</Placeholder>\n\t);\n}\n\nexport default BlockVariationPicker;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAVA;AACA;AACA;;AAGA;AACA;AACA;;AAKA,SAASI,oBAAoBA,CAAE;EAC9BC,IAAI,GAAGC,aAAM;EACbC,KAAK,GAAG,IAAAC,QAAE,EAAE,kBAAmB,CAAC;EAChCC,YAAY,GAAG,IAAAD,QAAE,EAAE,mCAAoC,CAAC;EACxDE,UAAU;EACVC,QAAQ;EACRC;AACD,CAAC,EAAG;EACH,MAAMC,OAAO,GAAG,IAAAC,mBAAU,EAAE,qCAAqC,EAAE;IAClE,qBAAqB,EAAEJ,UAAU,CAACK,MAAM,GAAG;EAC5C,CAAE,CAAC;EAEH,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAgB,WAAW;IACXb,IAAI,EAAGA,IAAM;IACbE,KAAK,EAAGA,KAAO;IACfE,YAAY,EAAGA,YAAc;IAC7BU,SAAS,EAAGN;EAAS,GAOrB,IAAAG,MAAA,CAAAC,aAAA;IACCE,SAAS,EAAC,iDAAiD;IAC3DC,IAAI,EAAC,MAAM;IACX,cAAa,IAAAZ,QAAE,EAAE,kBAAmB;EAAG,GAErCE,UAAU,CAACW,GAAG,CAAIC,SAAS,IAC5B,IAAAN,MAAA,CAAAC,aAAA;IAAIM,GAAG,EAAGD,SAAS,CAACE;EAAM,GACzB,IAAAR,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAuB,MAAM;IACNC,qBAAqB;IACrBC,OAAO,EAAC,UAAU;IAClBtB,IAAI,EACHiB,SAAS,CAACjB,IAAI,IAAIiB,SAAS,CAACjB,IAAI,CAACuB,GAAG,GACjCN,SAAS,CAACjB,IAAI,CAACuB,GAAG,GAClBN,SAAS,CAACjB,IACb;IACDwB,QAAQ,EAAG,EAAI;IACfC,OAAO,EAAGA,CAAA,KAAMnB,QAAQ,CAAEW,SAAU,CAAG;IACvCH,SAAS,EAAC,gDAAgD;IAC1DZ,KAAK,EAAGe,SAAS,CAACS,WAAW,IAAIT,SAAS,CAACU;EAAO,CAClD,CAAC,EACF,IAAAhB,MAAA,CAAAC,aAAA;IAAME,SAAS,EAAC;EAAsD,GACnEG,SAAS,CAACU,KACP,CACH,CACH,CACC,CAAC,EAEHpB,SAAS,IACV,IAAAI,MAAA,CAAAC,aAAA;IAAKE,SAAS,EAAC;EAA2C,GACzD,IAAAH,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAuB,MAAM;IAACE,OAAO,EAAC,MAAM;IAACG,OAAO,EAAGA,CAAA,KAAMnB,QAAQ,CAAC;EAAG,GAChD,IAAAH,QAAE,EAAE,MAAO,CACN,CACJ,CAEM,CAAC;AAEhB;AAAC,IAAAyB,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc/B,oBAAoB","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_components","_icons","_jsxRuntime","BlockVariationPicker","icon","layout","label","__","instructions","variations","onSelect","allowSkip","classes","clsx","length","jsxs","Placeholder","className","children","jsx","role","map","variation","Button","__next40pxDefaultSize","variant","src","iconSize","onClick","description","title","name","_default","exports","default"],"sources":["@wordpress/block-editor/src/components/block-variation-picker/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Button, Placeholder } from '@wordpress/components';\nimport { layout } from '@wordpress/icons';\n\nfunction BlockVariationPicker( {\n\ticon = layout,\n\tlabel = __( 'Choose variation' ),\n\tinstructions = __( 'Select a variation to start with:' ),\n\tvariations,\n\tonSelect,\n\tallowSkip,\n} ) {\n\tconst classes = clsx( 'block-editor-block-variation-picker', {\n\t\t'has-many-variations': variations.length > 4,\n\t} );\n\n\treturn (\n\t\t<Placeholder\n\t\t\ticon={ icon }\n\t\t\tlabel={ label }\n\t\t\tinstructions={ instructions }\n\t\t\tclassName={ classes }\n\t\t>\n\t\t\t{ /*\n\t\t\t * Disable reason: The `list` ARIA role is redundant but\n\t\t\t * Safari+VoiceOver won't announce the list otherwise.\n\t\t\t */\n\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t<ul\n\t\t\t\tclassName=\"block-editor-block-variation-picker__variations\"\n\t\t\t\trole=\"list\"\n\t\t\t\taria-label={ __( 'Block variations' ) }\n\t\t\t>\n\t\t\t\t{ variations.map( ( variation ) => (\n\t\t\t\t\t<li key={ variation.name }>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\tvariation.icon && variation.icon.src\n\t\t\t\t\t\t\t\t\t? variation.icon.src\n\t\t\t\t\t\t\t\t\t: variation.icon\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticonSize={ 48 }\n\t\t\t\t\t\t\tonClick={ () => onSelect( variation ) }\n\t\t\t\t\t\t\tclassName=\"block-editor-block-variation-picker__variation\"\n\t\t\t\t\t\t\tlabel={ variation.description || variation.title }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span className=\"block-editor-block-variation-picker__variation-label\">\n\t\t\t\t\t\t\t{ variation.title }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</li>\n\t\t\t\t) ) }\n\t\t\t</ul>\n\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t{ allowSkip && (\n\t\t\t\t<div className=\"block-editor-block-variation-picker__skip\">\n\t\t\t\t\t<Button variant=\"link\" onClick={ () => onSelect() }>\n\t\t\t\t\t\t{ __( 'Skip' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</Placeholder>\n\t);\n}\n\nexport default BlockVariationPicker;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAA0C,IAAAI,WAAA,GAAAJ,OAAA;AAV1C;AACA;AACA;;AAGA;AACA;AACA;;AAKA,SAASK,oBAAoBA,CAAE;EAC9BC,IAAI,GAAGC,aAAM;EACbC,KAAK,GAAG,IAAAC,QAAE,EAAE,kBAAmB,CAAC;EAChCC,YAAY,GAAG,IAAAD,QAAE,EAAE,mCAAoC,CAAC;EACxDE,UAAU;EACVC,QAAQ;EACRC;AACD,CAAC,EAAG;EACH,MAAMC,OAAO,GAAG,IAAAC,aAAI,EAAE,qCAAqC,EAAE;IAC5D,qBAAqB,EAAEJ,UAAU,CAACK,MAAM,GAAG;EAC5C,CAAE,CAAC;EAEH,oBACC,IAAAZ,WAAA,CAAAa,IAAA,EAACf,WAAA,CAAAgB,WAAW;IACXZ,IAAI,EAAGA,IAAM;IACbE,KAAK,EAAGA,KAAO;IACfE,YAAY,EAAGA,YAAc;IAC7BS,SAAS,EAAGL,OAAS;IAAAM,QAAA,gBAOrB,IAAAhB,WAAA,CAAAiB,GAAA;MACCF,SAAS,EAAC,iDAAiD;MAC3DG,IAAI,EAAC,MAAM;MACX,cAAa,IAAAb,QAAE,EAAE,kBAAmB,CAAG;MAAAW,QAAA,EAErCT,UAAU,CAACY,GAAG,CAAIC,SAAS,iBAC5B,IAAApB,WAAA,CAAAa,IAAA;QAAAG,QAAA,gBACC,IAAAhB,WAAA,CAAAiB,GAAA,EAACnB,WAAA,CAAAuB,MAAM;UACNC,qBAAqB;UACrBC,OAAO,EAAC,UAAU;UAClBrB,IAAI,EACHkB,SAAS,CAAClB,IAAI,IAAIkB,SAAS,CAAClB,IAAI,CAACsB,GAAG,GACjCJ,SAAS,CAAClB,IAAI,CAACsB,GAAG,GAClBJ,SAAS,CAAClB,IACb;UACDuB,QAAQ,EAAG,EAAI;UACfC,OAAO,EAAGA,CAAA,KAAMlB,QAAQ,CAAEY,SAAU,CAAG;UACvCL,SAAS,EAAC,gDAAgD;UAC1DX,KAAK,EAAGgB,SAAS,CAACO,WAAW,IAAIP,SAAS,CAACQ;QAAO,CAClD,CAAC,eACF,IAAA5B,WAAA,CAAAiB,GAAA;UAAMF,SAAS,EAAC,sDAAsD;UAAAC,QAAA,EACnEI,SAAS,CAACQ;QAAK,CACZ,CAAC;MAAA,GAhBER,SAAS,CAACS,IAiBhB,CACH;IAAC,CACA,CAAC,EAEHpB,SAAS,iBACV,IAAAT,WAAA,CAAAiB,GAAA;MAAKF,SAAS,EAAC,2CAA2C;MAAAC,QAAA,eACzD,IAAAhB,WAAA,CAAAiB,GAAA,EAACnB,WAAA,CAAAuB,MAAM;QAACE,OAAO,EAAC,MAAM;QAACG,OAAO,EAAGA,CAAA,KAAMlB,QAAQ,CAAC,CAAG;QAAAQ,QAAA,EAChD,IAAAX,QAAE,EAAE,MAAO;MAAC,CACP;IAAC,CACL,CACL;EAAA,CACW,CAAC;AAEhB;AAAC,IAAAyB,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc/B,oBAAoB","ignoreList":[]}

package/build/components/block-variation-picker/index.native.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _reactNative = require("react-native");
 var _data = require("@wordpress/data");
 var _compose = require("@wordpress/compose");
@@ -16,6 +15,7 @@ var _icons = require("@wordpress/icons");
 var _style = _interopRequireDefault(require("./style.scss"));
 var _store = require("../../store");
 var _inserterButton = _interopRequireDefault(require("../inserter-button"));
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -45,40 +45,47 @@ function BlockVariationPicker({
   } = (0, _data.useDispatch)(_store.store);
   const isIOS = _reactNative.Platform.OS === 'ios';
   const cancelButtonStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.cancelButton, _style.default.cancelButtonDark);
-  const leftButton = (0, _react.createElement)(_reactNative.TouchableWithoutFeedback, {
+  const leftButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
     onPress: onClose,
-    hitSlop: hitSlop
-  }, (0, _react.createElement)(_reactNative.View, null, isIOS ? (0, _react.createElement)(_reactNative.Text, {
-    style: cancelButtonStyle,
-    maxFontSizeMultiplier: 2
-  }, (0, _i18n.__)('Cancel')) : (0, _react.createElement)(_icons.Icon, {
-    icon: _icons.close,
-    size: 24,
-    style: _style.default.closeIcon
-  })));
+    hitSlop: hitSlop,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      children: isIOS ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: cancelButtonStyle,
+        maxFontSizeMultiplier: 2,
+        children: (0, _i18n.__)('Cancel')
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+        icon: _icons.close,
+        size: 24,
+        style: _style.default.closeIcon
+      })
+    })
+  });
   const onVariationSelect = variation => {
     replaceInnerBlocks(clientId, (0, _blocks.createBlocksFromInnerBlocksTemplate)(variation.innerBlocks));
     onClose();
   };
-  return (0, _react.createElement)(_components.BottomSheet, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.BottomSheet, {
     isVisible: isVisible,
     onClose: onClose,
     title: (0, _i18n.__)('Select a layout'),
     contentStyle: _style.default.contentStyle,
     leftButton: leftButton,
-    testID: "block-variation-modal"
-  }, (0, _react.createElement)(_reactNative.ScrollView, {
-    horizontal: true,
-    showsHorizontalScrollIndicator: false,
-    contentContainerStyle: _style.default.contentContainerStyle,
-    style: _style.default.containerStyle
-  }, variations.map(v => (0, _react.createElement)(_inserterButton.default, {
-    item: v,
-    key: v.name,
-    onSelect: () => onVariationSelect(v)
-  }))), (0, _react.createElement)(_components.PanelBody, null, (0, _react.createElement)(_components.FooterMessageControl, {
-    label: (0, _i18n.__)('Note: Column layout may vary between themes and screen sizes')
-  })));
+    testID: "block-variation-modal",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      contentContainerStyle: _style.default.contentContainerStyle,
+      style: _style.default.containerStyle,
+      children: variations.map(v => /*#__PURE__*/(0, _jsxRuntime.jsx)(_inserterButton.default, {
+        item: v,
+        onSelect: () => onVariationSelect(v)
+      }, v.name))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PanelBody, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FooterMessageControl, {
+        label: (0, _i18n.__)('Note: Column layout may vary between themes and screen sizes')
+      })
+    })]
+  });
 }
 var _default = exports.default = BlockVariationPicker;
 //# sourceMappingURL=index.native.js.map

package/build/components/block-variation-picker/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_data","_compose","_blocks","_i18n","_components","_icons","_style","_interopRequireDefault","_store","_inserterButton","hitSlop","top","bottom","left","right","BlockVariationPicker","isVisible","onClose","clientId","variations","replaceInnerBlocks","useDispatch","blockEditorStore","isIOS","Platform","OS","cancelButtonStyle","usePreferredColorSchemeStyle","styles","cancelButton","cancelButtonDark","leftButton","_react","createElement","TouchableWithoutFeedback","onPress","View","Text","style","maxFontSizeMultiplier","__","Icon","icon","close","size","closeIcon","onVariationSelect","variation","createBlocksFromInnerBlocksTemplate","innerBlocks","BottomSheet","title","contentStyle","testID","ScrollView","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","containerStyle","map","v","default","item","key","name","onSelect","PanelBody","FooterMessageControl","label","_default","exports"],"sources":["@wordpress/block-editor/src/components/block-variation-picker/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tScrollView,\n\tView,\n\tText,\n\tTouchableWithoutFeedback,\n\tPlatform,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useDispatch } from '@wordpress/data';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { createBlocksFromInnerBlocksTemplate } from '@wordpress/blocks';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tPanelBody,\n\tBottomSheet,\n\tFooterMessageControl,\n} from '@wordpress/components';\nimport { Icon, close } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport { store as blockEditorStore } from '../../store';\nimport InserterButton from '../inserter-button';\n\nconst hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };\n\nfunction BlockVariationPicker( { isVisible, onClose, clientId, variations } ) {\n\tconst { replaceInnerBlocks } = useDispatch( blockEditorStore );\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst cancelButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.cancelButton,\n\t\tstyles.cancelButtonDark\n\t);\n\n\tconst leftButton = (\n\t\t<TouchableWithoutFeedback onPress={ onClose } hitSlop={ hitSlop }>\n\t\t\t<View>\n\t\t\t\t{ isIOS ? (\n\t\t\t\t\t<Text\n\t\t\t\t\t\tstyle={ cancelButtonStyle }\n\t\t\t\t\t\tmaxFontSizeMultiplier={ 2 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t</Text>\n\t\t\t\t) : (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\tstyle={ styles.closeIcon }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</View>\n\t\t</TouchableWithoutFeedback>\n\t);\n\n\tconst onVariationSelect = ( variation ) => {\n\t\treplaceInnerBlocks(\n\t\t\tclientId,\n\t\t\tcreateBlocksFromInnerBlocksTemplate( variation.innerBlocks )\n\t\t);\n\t\tonClose();\n\t};\n\n\treturn (\n\t\t<BottomSheet\n\t\t\tisVisible={ isVisible }\n\t\t\tonClose={ onClose }\n\t\t\ttitle={ __( 'Select a layout' ) }\n\t\t\tcontentStyle={ styles.contentStyle }\n\t\t\tleftButton={ leftButton }\n\t\t\ttestID=\"block-variation-modal\"\n\t\t>\n\t\t\t<ScrollView\n\t\t\t\thorizontal\n\t\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\t\tcontentContainerStyle={ styles.contentContainerStyle }\n\t\t\t\tstyle={ styles.containerStyle }\n\t\t\t>\n\t\t\t\t{ variations.map( ( v ) => (\n\t\t\t\t\t<InserterButton\n\t\t\t\t\t\titem={ v }\n\t\t\t\t\t\tkey={ v.name }\n\t\t\t\t\t\tonSelect={ () => onVariationSelect( v ) }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ScrollView>\n\t\t\t<PanelBody>\n\t\t\t\t<FooterMessageControl\n\t\t\t\t\tlabel={ __(\n\t\t\t\t\t\t'Note: Column layout may vary between themes and screen sizes'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</PanelBody>\n\t\t</BottomSheet>\n\t);\n}\n\nexport default BlockVariationPicker;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_data","_compose","_blocks","_i18n","_components","_icons","_style","_interopRequireDefault","_store","_inserterButton","_jsxRuntime","hitSlop","top","bottom","left","right","BlockVariationPicker","isVisible","onClose","clientId","variations","replaceInnerBlocks","useDispatch","blockEditorStore","isIOS","Platform","OS","cancelButtonStyle","usePreferredColorSchemeStyle","styles","cancelButton","cancelButtonDark","leftButton","jsx","TouchableWithoutFeedback","onPress","children","View","Text","style","maxFontSizeMultiplier","__","Icon","icon","close","size","closeIcon","onVariationSelect","variation","createBlocksFromInnerBlocksTemplate","innerBlocks","jsxs","BottomSheet","title","contentStyle","testID","ScrollView","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","containerStyle","map","v","default","item","onSelect","name","PanelBody","FooterMessageControl","label","_default","exports"],"sources":["@wordpress/block-editor/src/components/block-variation-picker/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tScrollView,\n\tView,\n\tText,\n\tTouchableWithoutFeedback,\n\tPlatform,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useDispatch } from '@wordpress/data';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { createBlocksFromInnerBlocksTemplate } from '@wordpress/blocks';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tPanelBody,\n\tBottomSheet,\n\tFooterMessageControl,\n} from '@wordpress/components';\nimport { Icon, close } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport { store as blockEditorStore } from '../../store';\nimport InserterButton from '../inserter-button';\n\nconst hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };\n\nfunction BlockVariationPicker( { isVisible, onClose, clientId, variations } ) {\n\tconst { replaceInnerBlocks } = useDispatch( blockEditorStore );\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst cancelButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.cancelButton,\n\t\tstyles.cancelButtonDark\n\t);\n\n\tconst leftButton = (\n\t\t<TouchableWithoutFeedback onPress={ onClose } hitSlop={ hitSlop }>\n\t\t\t<View>\n\t\t\t\t{ isIOS ? (\n\t\t\t\t\t<Text\n\t\t\t\t\t\tstyle={ cancelButtonStyle }\n\t\t\t\t\t\tmaxFontSizeMultiplier={ 2 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t</Text>\n\t\t\t\t) : (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\tstyle={ styles.closeIcon }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</View>\n\t\t</TouchableWithoutFeedback>\n\t);\n\n\tconst onVariationSelect = ( variation ) => {\n\t\treplaceInnerBlocks(\n\t\t\tclientId,\n\t\t\tcreateBlocksFromInnerBlocksTemplate( variation.innerBlocks )\n\t\t);\n\t\tonClose();\n\t};\n\n\treturn (\n\t\t<BottomSheet\n\t\t\tisVisible={ isVisible }\n\t\t\tonClose={ onClose }\n\t\t\ttitle={ __( 'Select a layout' ) }\n\t\t\tcontentStyle={ styles.contentStyle }\n\t\t\tleftButton={ leftButton }\n\t\t\ttestID=\"block-variation-modal\"\n\t\t>\n\t\t\t<ScrollView\n\t\t\t\thorizontal\n\t\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\t\tcontentContainerStyle={ styles.contentContainerStyle }\n\t\t\t\tstyle={ styles.containerStyle }\n\t\t\t>\n\t\t\t\t{ variations.map( ( v ) => (\n\t\t\t\t\t<InserterButton\n\t\t\t\t\t\titem={ v }\n\t\t\t\t\t\tkey={ v.name }\n\t\t\t\t\t\tonSelect={ () => onVariationSelect( v ) }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ScrollView>\n\t\t\t<PanelBody>\n\t\t\t\t<FooterMessageControl\n\t\t\t\t\tlabel={ __(\n\t\t\t\t\t\t'Note: Column layout may vary between themes and screen sizes'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</PanelBody>\n\t\t</BottomSheet>\n\t);\n}\n\nexport default BlockVariationPicker;\n"],"mappings":"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","ignoreList":[]}

package/build/components/block-variation-transforms/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _blocks = require("@wordpress/blocks");
 var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
@@ -14,6 +13,7 @@ var _element = require("@wordpress/element");
 var _icons = require("@wordpress/icons");
 var _blockIcon = _interopRequireDefault(require("../block-icon"));
 var _store = require("../../store");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -28,23 +28,24 @@ function VariationsButtons({
   selectedValue,
   variations
 }) {
-  return (0, _react.createElement)("fieldset", {
-    className: className
-  }, (0, _react.createElement)(_components.VisuallyHidden, {
-    as: "legend"
-  }, (0, _i18n.__)('Transform to variation')), variations.map(variation => (0, _react.createElement)(_components.Button, {
-    key: variation.name,
-    icon: (0, _react.createElement)(_blockIcon.default, {
-      icon: variation.icon,
-      showColors: true
-    }),
-    isPressed: selectedValue === variation.name,
-    label: selectedValue === variation.name ? variation.title : (0, _i18n.sprintf)( /* translators: %s: Name of the block variation */
-    (0, _i18n.__)('Transform to %s'), variation.title),
-    onClick: () => onSelectVariation(variation.name),
-    "aria-label": variation.title,
-    showTooltip: true
-  })));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
+    className: className,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.VisuallyHidden, {
+      as: "legend",
+      children: (0, _i18n.__)('Transform to variation')
+    }), variations.map(variation => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockIcon.default, {
+        icon: variation.icon,
+        showColors: true
+      }),
+      isPressed: selectedValue === variation.name,
+      label: selectedValue === variation.name ? variation.title : (0, _i18n.sprintf)( /* translators: %s: Name of the block variation */
+      (0, _i18n.__)('Transform to %s'), variation.title),
+      onClick: () => onSelectVariation(variation.name),
+      "aria-label": variation.title,
+      showTooltip: true
+    }, variation.name))]
+  });
 }
 function VariationsDropdown({
   className,
@@ -61,7 +62,7 @@ function VariationsDropdown({
     label: title,
     info: description
   }));
-  return (0, _react.createElement)(_components.DropdownMenu, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
     className: className,
     label: (0, _i18n.__)('Transform to variation'),
     text: (0, _i18n.__)('Transform to variation'),
@@ -72,14 +73,18 @@ function VariationsDropdown({
     icon: _icons.chevronDown,
     toggleProps: {
       iconPosition: 'right'
-    }
-  }, () => (0, _react.createElement)("div", {
-    className: `${className}__container`
-  }, (0, _react.createElement)(_components.MenuGroup, null, (0, _react.createElement)(_components.MenuItemsChoice, {
-    choices: selectOptions,
-    value: selectedValue,
-    onSelect: onSelectVariation
-  }))));
+    },
+    children: () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: `${className}__container`,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItemsChoice, {
+          choices: selectOptions,
+          value: selectedValue,
+          onSelect: onSelectVariation
+        })
+      })
+    })
+  });
 }
 function VariationsToggleGroupControl({
   className,
@@ -87,25 +92,26 @@ function VariationsToggleGroupControl({
   selectedValue,
   variations
 }) {
-  return (0, _react.createElement)("div", {
-    className: className
-  }, (0, _react.createElement)(_components.__experimentalToggleGroupControl, {
-    label: (0, _i18n.__)('Transform to variation'),
-    value: selectedValue,
-    hideLabelFromVision: true,
-    onChange: onSelectVariation,
-    __next40pxDefaultSize: true,
-    __nextHasNoMarginBottom: true
-  }, variations.map(variation => (0, _react.createElement)(_components.__experimentalToggleGroupControlOptionIcon, {
-    key: variation.name,
-    icon: (0, _react.createElement)(_blockIcon.default, {
-      icon: variation.icon,
-      showColors: true
-    }),
-    value: variation.name,
-    label: selectedValue === variation.name ? variation.title : (0, _i18n.sprintf)( /* translators: %s: Name of the block variation */
-    (0, _i18n.__)('Transform to %s'), variation.title)
-  }))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControl, {
+      label: (0, _i18n.__)('Transform to variation'),
+      value: selectedValue,
+      hideLabelFromVision: true,
+      onChange: onSelectVariation,
+      __next40pxDefaultSize: true,
+      __nextHasNoMarginBottom: true,
+      children: variations.map(variation => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOptionIcon, {
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockIcon.default, {
+          icon: variation.icon,
+          showColors: true
+        }),
+        value: variation.name,
+        label: selectedValue === variation.name ? variation.title : (0, _i18n.sprintf)( /* translators: %s: Name of the block variation */
+        (0, _i18n.__)('Transform to %s'), variation.title)
+      }, variation.name))
+    })
+  });
 }
 function __experimentalBlockVariationTransforms({
   blockClientId
@@ -164,7 +170,7 @@ function __experimentalBlockVariationTransforms({
   const showButtons = variations.length > 5;
   const ButtonComponent = showButtons ? VariationsButtons : VariationsToggleGroupControl;
   const Component = hasUniqueIcons ? ButtonComponent : VariationsDropdown;
-  return (0, _react.createElement)(Component, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
     className: baseClass,
     onSelectVariation: onSelectVariation,
     selectedValue: selectedValue,