@wordpress/components 19.14.0 → 19.15.0

package/build/grid/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/grid/component.js"],"names":["Grid","props","forwardedRef","gridProps","ConnectedGrid"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA,SAASA,IAAT,CAAeC,KAAf,EAAsBC,YAAtB,EAAqC;AACpC,QAAMC,SAAS,GAAG,mBAASF,KAAT,CAAlB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,SAAX;AAAuB,IAAA,GAAG,EAAGD;AAA7B,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,aAAa,GAAG,6BAAgBJ,IAAhB,EAAsB,MAAtB,CAAtB;eAEeI,a","sourcesContent":["/**\n * Internal dependencies\n */\nimport { contextConnect } from '../ui/context';\nimport { View } from '../view';\nimport useGrid from './hook';\n\n/**\n * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props\n * @param {import('react').ForwardedRef<any>}                                               forwardedRef\n */\nfunction Grid( props, forwardedRef ) {\n\tconst gridProps = useGrid( props );\n\n\treturn <View { ...gridProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Grid` is a primitive layout component that can arrange content in a grid configuration.\n *\n * @example\n * ```jsx\n * import {\n * \t__experimentalGrid as Grid,\n * \t__experimentalText as Text\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<Grid columns={ 3 }>\n * \t\t\t<Text>Code</Text>\n * \t\t\t<Text>is</Text>\n * \t\t\t<Text>Poetry</Text>\n * \t\t</Grid>\n * \t);\n * }\n * ```\n */\nconst ConnectedGrid = contextConnect( Grid, 'Grid' );\n\nexport default ConnectedGrid;\n"]}
+{"version":3,"sources":["@wordpress/components/src/grid/component.tsx"],"names":["UnconnectedGrid","props","forwardedRef","gridProps","Grid"],"mappings":";;;;;;;;;;;;;AAQA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAMA,SAASA,eAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,SAAS,GAAG,mBAASF,KAAT,CAAlB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,SAAX;AAAuB,IAAA,GAAG,EAAGD;AAA7B,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAME,IAAI,GAAG,6BAAgBJ,eAAhB,EAAiC,MAAjC,CAAb;;eAEQI,I","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../ui/context';\nimport { View } from '../view';\nimport useGrid from './hook';\nimport type { GridProps } from './types';\n\nfunction UnconnectedGrid(\n\tprops: WordPressComponentProps< GridProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst gridProps = useGrid( props );\n\n\treturn <View { ...gridProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Grid` is a primitive layout component that can arrange content in a grid configuration.\n *\n * ```jsx\n * import {\n * \t__experimentalGrid as Grid,\n * \t__experimentalText as Text\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<Grid columns={ 3 }>\n * \t\t\t<Text>Code</Text>\n * \t\t\t<Text>is</Text>\n * \t\t\t<Text>Poetry</Text>\n * \t\t</Grid>\n * \t);\n * }\n * ```\n */\nexport const Grid = contextConnect( UnconnectedGrid, 'Grid' );\n\nexport default Grid;\n"]}

package/build/grid/hook.js

@@ -32,10 +32,6 @@ var _useCx = require("../utils/hooks/use-cx");
 /**
  * Internal dependencies
  */
-
-/**
- * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
- */
 function useGrid(props) {
   const {
     align,
@@ -72,7 +68,7 @@ function useGrid(props) {
       justifyContent: justify,
       verticalAlign: isInline ? 'middle' : undefined,
       ...alignmentProps
-    }, process.env.NODE_ENV === "production" ? "" : ";label:gridClasses;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZ3JpZC9ob29rLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNEc0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ncmlkL2hvb2suanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogV29yZFByZXNzIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyB1c2VNZW1vIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgdXNlQ29udGV4dFN5c3RlbSB9IGZyb20gJy4uL3VpL2NvbnRleHQnO1xuaW1wb3J0IHsgZ2V0QWxpZ25tZW50UHJvcHMgfSBmcm9tICcuL3V0aWxzJztcbmltcG9ydCB7IHVzZVJlc3BvbnNpdmVWYWx1ZSB9IGZyb20gJy4uL3VpL3V0aWxzL3VzZS1yZXNwb25zaXZlLXZhbHVlJztcbmltcG9ydCBDT05GSUcgZnJvbSAnLi4vdXRpbHMvY29uZmlnLXZhbHVlcyc7XG5pbXBvcnQgeyB1c2VDeCB9IGZyb20gJy4uL3V0aWxzL2hvb2tzL3VzZS1jeCc7XG5cbi8qKlxuICogQHBhcmFtIHtpbXBvcnQoJy4uL3VpL2NvbnRleHQnKS5Xb3JkUHJlc3NDb21wb25lbnRQcm9wczxpbXBvcnQoJy4vdHlwZXMnKS5Qcm9wcywgJ2Rpdic+fSBwcm9wc1xuICovXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiB1c2VHcmlkKCBwcm9wcyApIHtcblx0Y29uc3Qge1xuXHRcdGFsaWduLFxuXHRcdGFsaWdubWVudCxcblx0XHRjbGFzc05hbWUsXG5cdFx0Y29sdW1uR2FwLFxuXHRcdGNvbHVtbnMgPSAyLFxuXHRcdGdhcCA9IDMsXG5cdFx0aXNJbmxpbmUgPSBmYWxzZSxcblx0XHRqdXN0aWZ5LFxuXHRcdHJvd0dhcCxcblx0XHRyb3dzLFxuXHRcdHRlbXBsYXRlQ29sdW1ucyxcblx0XHR0ZW1wbGF0ZVJvd3MsXG5cdFx0Li4ub3RoZXJQcm9wc1xuXHR9ID0gdXNlQ29udGV4dFN5c3RlbSggcHJvcHMsICdHcmlkJyApO1xuXG5cdGNvbnN0IGNvbHVtbnNBc0FycmF5ID0gQXJyYXkuaXNBcnJheSggY29sdW1ucyApID8gY29sdW1ucyA6IFsgY29sdW1ucyBdO1xuXHRjb25zdCBjb2x1bW4gPSB1c2VSZXNwb25zaXZlVmFsdWUoIGNvbHVtbnNBc0FycmF5ICk7XG5cdGNvbnN0IHJvd3NBc0FycmF5ID0gQXJyYXkuaXNBcnJheSggcm93cyApID8gcm93cyA6IFsgcm93cyBdO1xuXHRjb25zdCByb3cgPSB1c2VSZXNwb25zaXZlVmFsdWUoIHJvd3NBc0FycmF5ICk7XG5cblx0Y29uc3QgZ3JpZFRlbXBsYXRlQ29sdW1ucyA9XG5cdFx0dGVtcGxhdGVDb2x1bW5zIHx8ICggISEgY29sdW1ucyAmJiBgcmVwZWF0KCAkeyBjb2x1bW4gfSwgMWZyIClgICk7XG5cdGNvbnN0IGdyaWRUZW1wbGF0ZVJvd3MgPVxuXHRcdHRlbXBsYXRlUm93cyB8fCAoICEhIHJvd3MgJiYgYHJlcGVhdCggJHsgcm93IH0sIDFmciApYCApO1xuXG5cdGNvbnN0IGN4ID0gdXNlQ3goKTtcblxuXHRjb25zdCBjbGFzc2VzID0gdXNlTWVtbyggKCkgPT4ge1xuXHRcdGNvbnN0IGFsaWdubWVudFByb3BzID0gZ2V0QWxpZ25tZW50UHJvcHMoIGFsaWdubWVudCApO1xuXG5cdFx0Y29uc3QgZ3JpZENsYXNzZXMgPSBjc3MoIHtcblx0XHRcdGFsaWduSXRlbXM6IGFsaWduLFxuXHRcdFx0ZGlzcGxheTogaXNJbmxpbmUgPyAnaW5saW5lLWdyaWQnIDogJ2dyaWQnLFxuXHRcdFx0Z2FwOiBgY2FsYyggJHsgQ09ORklHLmdyaWRCYXNlIH0gKiAkeyBnYXAgfSApYCxcblx0XHRcdGdyaWRUZW1wbGF0ZUNvbHVtbnM6IGdyaWRUZW1wbGF0ZUNvbHVtbnMgfHwgdW5kZWZpbmVkLFxuXHRcdFx0Z3JpZFRlbXBsYXRlUm93czogZ3JpZFRlbXBsYXRlUm93cyB8fCB1bmRlZmluZWQsXG5cdFx0XHRncmlkUm93R2FwOiByb3dHYXAsXG5cdFx0XHRncmlkQ29sdW1uR2FwOiBjb2x1bW5HYXAsXG5cdFx0XHRqdXN0aWZ5Q29udGVudDoganVzdGlmeSxcblx0XHRcdHZlcnRpY2FsQWxpZ246IGlzSW5saW5lID8gJ21pZGRsZScgOiB1bmRlZmluZWQsXG5cdFx0XHQuLi5hbGlnbm1lbnRQcm9wcyxcblx0XHR9ICk7XG5cblx0XHRyZXR1cm4gY3goIGdyaWRDbGFzc2VzLCBjbGFzc05hbWUgKTtcblx0fSwgW1xuXHRcdGFsaWduLFxuXHRcdGFsaWdubWVudCxcblx0XHRjbGFzc05hbWUsXG5cdFx0Y29sdW1uR2FwLFxuXHRcdGN4LFxuXHRcdGdhcCxcblx0XHRncmlkVGVtcGxhdGVDb2x1bW5zLFxuXHRcdGdyaWRUZW1wbGF0ZVJvd3MsXG5cdFx0aXNJbmxpbmUsXG5cdFx0anVzdGlmeSxcblx0XHRyb3dHYXAsXG5cdF0gKTtcblxuXHRyZXR1cm4geyAuLi5vdGhlclByb3BzLCBjbGFzc05hbWU6IGNsYXNzZXMgfTtcbn1cbiJdfQ== */");
+    }, process.env.NODE_ENV === "production" ? "" : ";label:gridClasses;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZ3JpZC9ob29rLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNEc0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ncmlkL2hvb2sudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogV29yZFByZXNzIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyB1c2VNZW1vIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgdXNlQ29udGV4dFN5c3RlbSwgV29yZFByZXNzQ29tcG9uZW50UHJvcHMgfSBmcm9tICcuLi91aS9jb250ZXh0JztcbmltcG9ydCB7IGdldEFsaWdubWVudFByb3BzIH0gZnJvbSAnLi91dGlscyc7XG5pbXBvcnQgeyB1c2VSZXNwb25zaXZlVmFsdWUgfSBmcm9tICcuLi91aS91dGlscy91c2UtcmVzcG9uc2l2ZS12YWx1ZSc7XG5pbXBvcnQgQ09ORklHIGZyb20gJy4uL3V0aWxzL2NvbmZpZy12YWx1ZXMnO1xuaW1wb3J0IHsgdXNlQ3ggfSBmcm9tICcuLi91dGlscy9ob29rcy91c2UtY3gnO1xuaW1wb3J0IHR5cGUgeyBHcmlkUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gdXNlR3JpZChcblx0cHJvcHM6IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzPCBHcmlkUHJvcHMsICdkaXYnID5cbikge1xuXHRjb25zdCB7XG5cdFx0YWxpZ24sXG5cdFx0YWxpZ25tZW50LFxuXHRcdGNsYXNzTmFtZSxcblx0XHRjb2x1bW5HYXAsXG5cdFx0Y29sdW1ucyA9IDIsXG5cdFx0Z2FwID0gMyxcblx0XHRpc0lubGluZSA9IGZhbHNlLFxuXHRcdGp1c3RpZnksXG5cdFx0cm93R2FwLFxuXHRcdHJvd3MsXG5cdFx0dGVtcGxhdGVDb2x1bW5zLFxuXHRcdHRlbXBsYXRlUm93cyxcblx0XHQuLi5vdGhlclByb3BzXG5cdH0gPSB1c2VDb250ZXh0U3lzdGVtKCBwcm9wcywgJ0dyaWQnICk7XG5cblx0Y29uc3QgY29sdW1uc0FzQXJyYXkgPSBBcnJheS5pc0FycmF5KCBjb2x1bW5zICkgPyBjb2x1bW5zIDogWyBjb2x1bW5zIF07XG5cdGNvbnN0IGNvbHVtbiA9IHVzZVJlc3BvbnNpdmVWYWx1ZSggY29sdW1uc0FzQXJyYXkgKTtcblx0Y29uc3Qgcm93c0FzQXJyYXkgPSBBcnJheS5pc0FycmF5KCByb3dzICkgPyByb3dzIDogWyByb3dzIF07XG5cdGNvbnN0IHJvdyA9IHVzZVJlc3BvbnNpdmVWYWx1ZSggcm93c0FzQXJyYXkgKTtcblxuXHRjb25zdCBncmlkVGVtcGxhdGVDb2x1bW5zID1cblx0XHR0ZW1wbGF0ZUNvbHVtbnMgfHwgKCAhISBjb2x1bW5zICYmIGByZXBlYXQoICR7IGNvbHVtbiB9LCAxZnIgKWAgKTtcblx0Y29uc3QgZ3JpZFRlbXBsYXRlUm93cyA9XG5cdFx0dGVtcGxhdGVSb3dzIHx8ICggISEgcm93cyAmJiBgcmVwZWF0KCAkeyByb3cgfSwgMWZyIClgICk7XG5cblx0Y29uc3QgY3ggPSB1c2VDeCgpO1xuXG5cdGNvbnN0IGNsYXNzZXMgPSB1c2VNZW1vKCAoKSA9PiB7XG5cdFx0Y29uc3QgYWxpZ25tZW50UHJvcHMgPSBnZXRBbGlnbm1lbnRQcm9wcyggYWxpZ25tZW50ICk7XG5cblx0XHRjb25zdCBncmlkQ2xhc3NlcyA9IGNzcygge1xuXHRcdFx0YWxpZ25JdGVtczogYWxpZ24sXG5cdFx0XHRkaXNwbGF5OiBpc0lubGluZSA/ICdpbmxpbmUtZ3JpZCcgOiAnZ3JpZCcsXG5cdFx0XHRnYXA6IGBjYWxjKCAkeyBDT05GSUcuZ3JpZEJhc2UgfSAqICR7IGdhcCB9IClgLFxuXHRcdFx0Z3JpZFRlbXBsYXRlQ29sdW1uczogZ3JpZFRlbXBsYXRlQ29sdW1ucyB8fCB1bmRlZmluZWQsXG5cdFx0XHRncmlkVGVtcGxhdGVSb3dzOiBncmlkVGVtcGxhdGVSb3dzIHx8IHVuZGVmaW5lZCxcblx0XHRcdGdyaWRSb3dHYXA6IHJvd0dhcCxcblx0XHRcdGdyaWRDb2x1bW5HYXA6IGNvbHVtbkdhcCxcblx0XHRcdGp1c3RpZnlDb250ZW50OiBqdXN0aWZ5LFxuXHRcdFx0dmVydGljYWxBbGlnbjogaXNJbmxpbmUgPyAnbWlkZGxlJyA6IHVuZGVmaW5lZCxcblx0XHRcdC4uLmFsaWdubWVudFByb3BzLFxuXHRcdH0gKTtcblxuXHRcdHJldHVybiBjeCggZ3JpZENsYXNzZXMsIGNsYXNzTmFtZSApO1xuXHR9LCBbXG5cdFx0YWxpZ24sXG5cdFx0YWxpZ25tZW50LFxuXHRcdGNsYXNzTmFtZSxcblx0XHRjb2x1bW5HYXAsXG5cdFx0Y3gsXG5cdFx0Z2FwLFxuXHRcdGdyaWRUZW1wbGF0ZUNvbHVtbnMsXG5cdFx0Z3JpZFRlbXBsYXRlUm93cyxcblx0XHRpc0lubGluZSxcblx0XHRqdXN0aWZ5LFxuXHRcdHJvd0dhcCxcblx0XSApO1xuXG5cdHJldHVybiB7IC4uLm90aGVyUHJvcHMsIGNsYXNzTmFtZTogY2xhc3NlcyB9O1xufVxuIl19 */");
     return cx(gridClasses, className);
   }, [align, alignment, className, columnGap, cx, gap, gridTemplateColumns, gridTemplateRows, isInline, justify, rowGap]);
   return { ...otherProps,

package/build/grid/hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/grid/hook.js"],"names":["useGrid","props","align","alignment","className","columnGap","columns","gap","isInline","justify","rowGap","rows","templateColumns","templateRows","otherProps","columnsAsArray","Array","isArray","column","rowsAsArray","row","gridTemplateColumns","gridTemplateRows","cx","classes","alignmentProps","gridClasses","alignItems","display","CONFIG","gridBase","undefined","gridRowGap","gridColumnGap","justifyContent","verticalAlign"],"mappings":";;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAjBA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAOA;AACA;AACA;AACe,SAASA,OAAT,CAAkBC,KAAlB,EAA0B;AACxC,QAAM;AACLC,IAAAA,KADK;AAELC,IAAAA,SAFK;AAGLC,IAAAA,SAHK;AAILC,IAAAA,SAJK;AAKLC,IAAAA,OAAO,GAAG,CALL;AAMLC,IAAAA,GAAG,GAAG,CAND;AAOLC,IAAAA,QAAQ,GAAG,KAPN;AAQLC,IAAAA,OARK;AASLC,IAAAA,MATK;AAULC,IAAAA,IAVK;AAWLC,IAAAA,eAXK;AAYLC,IAAAA,YAZK;AAaL,OAAGC;AAbE,MAcF,+BAAkBb,KAAlB,EAAyB,MAAzB,CAdJ;AAgBA,QAAMc,cAAc,GAAGC,KAAK,CAACC,OAAN,CAAeX,OAAf,IAA2BA,OAA3B,GAAqC,CAAEA,OAAF,CAA5D;AACA,QAAMY,MAAM,GAAG,4CAAoBH,cAApB,CAAf;AACA,QAAMI,WAAW,GAAGH,KAAK,CAACC,OAAN,CAAeN,IAAf,IAAwBA,IAAxB,GAA+B,CAAEA,IAAF,CAAnD;AACA,QAAMS,GAAG,GAAG,4CAAoBD,WAApB,CAAZ;AAEA,QAAME,mBAAmB,GACxBT,eAAe,IAAM,CAAC,CAAEN,OAAH,IAAe,WAAWY,MAAQ,SADxD;AAEA,QAAMI,gBAAgB,GACrBT,YAAY,IAAM,CAAC,CAAEF,IAAH,IAAY,WAAWS,GAAK,SAD/C;AAGA,QAAMG,EAAE,GAAG,mBAAX;AAEA,QAAMC,OAAO,GAAG,sBAAS,MAAM;AAC9B,UAAMC,cAAc,GAAG,8BAAmBtB,SAAnB,CAAvB;AAEA,UAAMuB,WAAW,gBAAG,gBAAK;AACxBC,MAAAA,UAAU,EAAEzB,KADY;AAExB0B,MAAAA,OAAO,EAAEpB,QAAQ,GAAG,aAAH,GAAmB,MAFZ;AAGxBD,MAAAA,GAAG,EAAG,SAASsB,sBAAOC,QAAU,MAAMvB,GAAK,IAHnB;AAIxBc,MAAAA,mBAAmB,EAAEA,mBAAmB,IAAIU,SAJpB;AAKxBT,MAAAA,gBAAgB,EAAEA,gBAAgB,IAAIS,SALd;AAMxBC,MAAAA,UAAU,EAAEtB,MANY;AAOxBuB,MAAAA,aAAa,EAAE5B,SAPS;AAQxB6B,MAAAA,cAAc,EAAEzB,OARQ;AASxB0B,MAAAA,aAAa,EAAE3B,QAAQ,GAAG,QAAH,GAAcuB,SATb;AAUxB,SAAGN;AAVqB,KAAL,ixGAApB;AAaA,WAAOF,EAAE,CAAEG,WAAF,EAAetB,SAAf,CAAT;AACA,GAjBe,EAiBb,CACFF,KADE,EAEFC,SAFE,EAGFC,SAHE,EAIFC,SAJE,EAKFkB,EALE,EAMFhB,GANE,EAOFc,mBAPE,EAQFC,gBARE,EASFd,QATE,EAUFC,OAVE,EAWFC,MAXE,CAjBa,CAAhB;AA+BA,SAAO,EAAE,GAAGI,UAAL;AAAiBV,IAAAA,SAAS,EAAEoB;AAA5B,GAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem } from '../ui/context';\nimport { getAlignmentProps } from './utils';\nimport { useResponsiveValue } from '../ui/utils/use-responsive-value';\nimport CONFIG from '../utils/config-values';\nimport { useCx } from '../utils/hooks/use-cx';\n\n/**\n * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props\n */\nexport default function useGrid( props ) {\n\tconst {\n\t\talign,\n\t\talignment,\n\t\tclassName,\n\t\tcolumnGap,\n\t\tcolumns = 2,\n\t\tgap = 3,\n\t\tisInline = false,\n\t\tjustify,\n\t\trowGap,\n\t\trows,\n\t\ttemplateColumns,\n\t\ttemplateRows,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Grid' );\n\n\tconst columnsAsArray = Array.isArray( columns ) ? columns : [ columns ];\n\tconst column = useResponsiveValue( columnsAsArray );\n\tconst rowsAsArray = Array.isArray( rows ) ? rows : [ rows ];\n\tconst row = useResponsiveValue( rowsAsArray );\n\n\tconst gridTemplateColumns =\n\t\ttemplateColumns || ( !! columns && `repeat( ${ column }, 1fr )` );\n\tconst gridTemplateRows =\n\t\ttemplateRows || ( !! rows && `repeat( ${ row }, 1fr )` );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo( () => {\n\t\tconst alignmentProps = getAlignmentProps( alignment );\n\n\t\tconst gridClasses = css( {\n\t\t\talignItems: align,\n\t\t\tdisplay: isInline ? 'inline-grid' : 'grid',\n\t\t\tgap: `calc( ${ CONFIG.gridBase } * ${ gap } )`,\n\t\t\tgridTemplateColumns: gridTemplateColumns || undefined,\n\t\t\tgridTemplateRows: gridTemplateRows || undefined,\n\t\t\tgridRowGap: rowGap,\n\t\t\tgridColumnGap: columnGap,\n\t\t\tjustifyContent: justify,\n\t\t\tverticalAlign: isInline ? 'middle' : undefined,\n\t\t\t...alignmentProps,\n\t\t} );\n\n\t\treturn cx( gridClasses, className );\n\t}, [\n\t\talign,\n\t\talignment,\n\t\tclassName,\n\t\tcolumnGap,\n\t\tcx,\n\t\tgap,\n\t\tgridTemplateColumns,\n\t\tgridTemplateRows,\n\t\tisInline,\n\t\tjustify,\n\t\trowGap,\n\t] );\n\n\treturn { ...otherProps, className: classes };\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/grid/hook.ts"],"names":["useGrid","props","align","alignment","className","columnGap","columns","gap","isInline","justify","rowGap","rows","templateColumns","templateRows","otherProps","columnsAsArray","Array","isArray","column","rowsAsArray","row","gridTemplateColumns","gridTemplateRows","cx","classes","alignmentProps","gridClasses","alignItems","display","CONFIG","gridBase","undefined","gridRowGap","gridColumnGap","justifyContent","verticalAlign"],"mappings":";;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAjBA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAQe,SAASA,OAAT,CACdC,KADc,EAEb;AACD,QAAM;AACLC,IAAAA,KADK;AAELC,IAAAA,SAFK;AAGLC,IAAAA,SAHK;AAILC,IAAAA,SAJK;AAKLC,IAAAA,OAAO,GAAG,CALL;AAMLC,IAAAA,GAAG,GAAG,CAND;AAOLC,IAAAA,QAAQ,GAAG,KAPN;AAQLC,IAAAA,OARK;AASLC,IAAAA,MATK;AAULC,IAAAA,IAVK;AAWLC,IAAAA,eAXK;AAYLC,IAAAA,YAZK;AAaL,OAAGC;AAbE,MAcF,+BAAkBb,KAAlB,EAAyB,MAAzB,CAdJ;AAgBA,QAAMc,cAAc,GAAGC,KAAK,CAACC,OAAN,CAAeX,OAAf,IAA2BA,OAA3B,GAAqC,CAAEA,OAAF,CAA5D;AACA,QAAMY,MAAM,GAAG,4CAAoBH,cAApB,CAAf;AACA,QAAMI,WAAW,GAAGH,KAAK,CAACC,OAAN,CAAeN,IAAf,IAAwBA,IAAxB,GAA+B,CAAEA,IAAF,CAAnD;AACA,QAAMS,GAAG,GAAG,4CAAoBD,WAApB,CAAZ;AAEA,QAAME,mBAAmB,GACxBT,eAAe,IAAM,CAAC,CAAEN,OAAH,IAAe,WAAWY,MAAQ,SADxD;AAEA,QAAMI,gBAAgB,GACrBT,YAAY,IAAM,CAAC,CAAEF,IAAH,IAAY,WAAWS,GAAK,SAD/C;AAGA,QAAMG,EAAE,GAAG,mBAAX;AAEA,QAAMC,OAAO,GAAG,sBAAS,MAAM;AAC9B,UAAMC,cAAc,GAAG,8BAAmBtB,SAAnB,CAAvB;AAEA,UAAMuB,WAAW,gBAAG,gBAAK;AACxBC,MAAAA,UAAU,EAAEzB,KADY;AAExB0B,MAAAA,OAAO,EAAEpB,QAAQ,GAAG,aAAH,GAAmB,MAFZ;AAGxBD,MAAAA,GAAG,EAAG,SAASsB,sBAAOC,QAAU,MAAMvB,GAAK,IAHnB;AAIxBc,MAAAA,mBAAmB,EAAEA,mBAAmB,IAAIU,SAJpB;AAKxBT,MAAAA,gBAAgB,EAAEA,gBAAgB,IAAIS,SALd;AAMxBC,MAAAA,UAAU,EAAEtB,MANY;AAOxBuB,MAAAA,aAAa,EAAE5B,SAPS;AAQxB6B,MAAAA,cAAc,EAAEzB,OARQ;AASxB0B,MAAAA,aAAa,EAAE3B,QAAQ,GAAG,QAAH,GAAcuB,SATb;AAUxB,SAAGN;AAVqB,KAAL,yxGAApB;AAaA,WAAOF,EAAE,CAAEG,WAAF,EAAetB,SAAf,CAAT;AACA,GAjBe,EAiBb,CACFF,KADE,EAEFC,SAFE,EAGFC,SAHE,EAIFC,SAJE,EAKFkB,EALE,EAMFhB,GANE,EAOFc,mBAPE,EAQFC,gBARE,EASFd,QATE,EAUFC,OAVE,EAWFC,MAXE,CAjBa,CAAhB;AA+BA,SAAO,EAAE,GAAGI,UAAL;AAAiBV,IAAAA,SAAS,EAAEoB;AAA5B,GAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, WordPressComponentProps } from '../ui/context';\nimport { getAlignmentProps } from './utils';\nimport { useResponsiveValue } from '../ui/utils/use-responsive-value';\nimport CONFIG from '../utils/config-values';\nimport { useCx } from '../utils/hooks/use-cx';\nimport type { GridProps } from './types';\n\nexport default function useGrid(\n\tprops: WordPressComponentProps< GridProps, 'div' >\n) {\n\tconst {\n\t\talign,\n\t\talignment,\n\t\tclassName,\n\t\tcolumnGap,\n\t\tcolumns = 2,\n\t\tgap = 3,\n\t\tisInline = false,\n\t\tjustify,\n\t\trowGap,\n\t\trows,\n\t\ttemplateColumns,\n\t\ttemplateRows,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Grid' );\n\n\tconst columnsAsArray = Array.isArray( columns ) ? columns : [ columns ];\n\tconst column = useResponsiveValue( columnsAsArray );\n\tconst rowsAsArray = Array.isArray( rows ) ? rows : [ rows ];\n\tconst row = useResponsiveValue( rowsAsArray );\n\n\tconst gridTemplateColumns =\n\t\ttemplateColumns || ( !! columns && `repeat( ${ column }, 1fr )` );\n\tconst gridTemplateRows =\n\t\ttemplateRows || ( !! rows && `repeat( ${ row }, 1fr )` );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo( () => {\n\t\tconst alignmentProps = getAlignmentProps( alignment );\n\n\t\tconst gridClasses = css( {\n\t\t\talignItems: align,\n\t\t\tdisplay: isInline ? 'inline-grid' : 'grid',\n\t\t\tgap: `calc( ${ CONFIG.gridBase } * ${ gap } )`,\n\t\t\tgridTemplateColumns: gridTemplateColumns || undefined,\n\t\t\tgridTemplateRows: gridTemplateRows || undefined,\n\t\t\tgridRowGap: rowGap,\n\t\t\tgridColumnGap: columnGap,\n\t\t\tjustifyContent: justify,\n\t\t\tverticalAlign: isInline ? 'middle' : undefined,\n\t\t\t...alignmentProps,\n\t\t} );\n\n\t\treturn cx( gridClasses, className );\n\t}, [\n\t\talign,\n\t\talignment,\n\t\tclassName,\n\t\tcolumnGap,\n\t\tcx,\n\t\tgap,\n\t\tgridTemplateColumns,\n\t\tgridTemplateRows,\n\t\tisInline,\n\t\tjustify,\n\t\trowGap,\n\t] );\n\n\treturn { ...otherProps, className: classes };\n}\n"]}

package/build/grid/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/grid/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["export { default as Grid } from './component';\nexport { default as useGrid } from './hook';\n"]}
+{"version":3,"sources":["@wordpress/components/src/grid/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["export { default as Grid } from './component';\nexport { default as useGrid } from './hook';\n"]}

package/build/grid/utils.js

@@ -4,6 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getAlignmentProps = getAlignmentProps;
+
+/**
+ * External dependencies
+ */
 const ALIGNMENTS = {
   bottom: {
     alignItems: 'flex-end',
@@ -49,16 +53,9 @@ const ALIGNMENTS = {
     justifyContent: 'flex-end'
   }
 };
-/* eslint-disable jsdoc/valid-types */
-
-/**
- * @param {keyof typeof ALIGNMENTS | undefined} alignment
- * @return {{ alignItems?: import('react').CSSProperties['alignItems'], justifyContent?: import('react').CSSProperties['justifyContent']}} CSS props for alignment
- */
 
 function getAlignmentProps(alignment) {
   const alignmentProps = alignment ? ALIGNMENTS[alignment] : {};
   return alignmentProps;
 }
-/* eslint-enable jsdoc/valid-types */
 //# sourceMappingURL=utils.js.map

package/build/grid/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/grid/utils.js"],"names":["ALIGNMENTS","bottom","alignItems","justifyContent","bottomLeft","bottomRight","center","spaced","left","right","stretch","top","topLeft","topRight","getAlignmentProps","alignment","alignmentProps"],"mappings":";;;;;;AAAA,MAAMA,UAAU,GAAG;AAClBC,EAAAA,MAAM,EAAE;AAAEC,IAAAA,UAAU,EAAE,UAAd;AAA0BC,IAAAA,cAAc,EAAE;AAA1C,GADU;AAElBC,EAAAA,UAAU,EAAE;AAAEF,IAAAA,UAAU,EAAE,YAAd;AAA4BC,IAAAA,cAAc,EAAE;AAA5C,GAFM;AAGlBE,EAAAA,WAAW,EAAE;AAAEH,IAAAA,UAAU,EAAE,UAAd;AAA0BC,IAAAA,cAAc,EAAE;AAA1C,GAHK;AAIlBG,EAAAA,MAAM,EAAE;AAAEJ,IAAAA,UAAU,EAAE,QAAd;AAAwBC,IAAAA,cAAc,EAAE;AAAxC,GAJU;AAKlBI,EAAAA,MAAM,EAAE;AAAEL,IAAAA,UAAU,EAAE,QAAd;AAAwBC,IAAAA,cAAc,EAAE;AAAxC,GALU;AAMlBK,EAAAA,IAAI,EAAE;AAAEN,IAAAA,UAAU,EAAE,QAAd;AAAwBC,IAAAA,cAAc,EAAE;AAAxC,GANY;AAOlBM,EAAAA,KAAK,EAAE;AAAEP,IAAAA,UAAU,EAAE,QAAd;AAAwBC,IAAAA,cAAc,EAAE;AAAxC,GAPW;AAQlBO,EAAAA,OAAO,EAAE;AAAER,IAAAA,UAAU,EAAE;AAAd,GARS;AASlBS,EAAAA,GAAG,EAAE;AAAET,IAAAA,UAAU,EAAE,YAAd;AAA4BC,IAAAA,cAAc,EAAE;AAA5C,GATa;AAUlBS,EAAAA,OAAO,EAAE;AAAEV,IAAAA,UAAU,EAAE,YAAd;AAA4BC,IAAAA,cAAc,EAAE;AAA5C,GAVS;AAWlBU,EAAAA,QAAQ,EAAE;AAAEX,IAAAA,UAAU,EAAE,YAAd;AAA4BC,IAAAA,cAAc,EAAE;AAA5C;AAXQ,CAAnB;AAcA;;AACA;AACA;AACA;AACA;;AACO,SAASW,iBAAT,CAA4BC,SAA5B,EAAwC;AAC9C,QAAMC,cAAc,GAAGD,SAAS,GAAGf,UAAU,CAAEe,SAAF,CAAb,GAA6B,EAA7D;AAEA,SAAOC,cAAP;AACA;AACD","sourcesContent":["const ALIGNMENTS = {\n\tbottom: { alignItems: 'flex-end', justifyContent: 'center' },\n\tbottomLeft: { alignItems: 'flex-start', justifyContent: 'flex-end' },\n\tbottomRight: { alignItems: 'flex-end', justifyContent: 'flex-end' },\n\tcenter: { alignItems: 'center', justifyContent: 'center' },\n\tspaced: { alignItems: 'center', justifyContent: 'space-between' },\n\tleft: { alignItems: 'center', justifyContent: 'flex-start' },\n\tright: { alignItems: 'center', justifyContent: 'flex-end' },\n\tstretch: { alignItems: 'stretch' },\n\ttop: { alignItems: 'flex-start', justifyContent: 'center' },\n\ttopLeft: { alignItems: 'flex-start', justifyContent: 'flex-start' },\n\ttopRight: { alignItems: 'flex-start', justifyContent: 'flex-end' },\n};\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * @param {keyof typeof ALIGNMENTS | undefined} alignment\n * @return {{ alignItems?: import('react').CSSProperties['alignItems'], justifyContent?: import('react').CSSProperties['justifyContent']}} CSS props for alignment\n */\nexport function getAlignmentProps( alignment ) {\n\tconst alignmentProps = alignment ? ALIGNMENTS[ alignment ] : {};\n\n\treturn alignmentProps;\n}\n/* eslint-enable jsdoc/valid-types */\n"]}
+{"version":3,"sources":["@wordpress/components/src/grid/utils.ts"],"names":["ALIGNMENTS","bottom","alignItems","justifyContent","bottomLeft","bottomRight","center","spaced","left","right","stretch","top","topLeft","topRight","getAlignmentProps","alignment","alignmentProps"],"mappings":";;;;;;;AAAA;AACA;AACA;AAGA,MAAMA,UAAU,GAAG;AAClBC,EAAAA,MAAM,EAAE;AAAEC,IAAAA,UAAU,EAAE,UAAd;AAA0BC,IAAAA,cAAc,EAAE;AAA1C,GADU;AAElBC,EAAAA,UAAU,EAAE;AAAEF,IAAAA,UAAU,EAAE,YAAd;AAA4BC,IAAAA,cAAc,EAAE;AAA5C,GAFM;AAGlBE,EAAAA,WAAW,EAAE;AAAEH,IAAAA,UAAU,EAAE,UAAd;AAA0BC,IAAAA,cAAc,EAAE;AAA1C,GAHK;AAIlBG,EAAAA,MAAM,EAAE;AAAEJ,IAAAA,UAAU,EAAE,QAAd;AAAwBC,IAAAA,cAAc,EAAE;AAAxC,GAJU;AAKlBI,EAAAA,MAAM,EAAE;AAAEL,IAAAA,UAAU,EAAE,QAAd;AAAwBC,IAAAA,cAAc,EAAE;AAAxC,GALU;AAMlBK,EAAAA,IAAI,EAAE;AAAEN,IAAAA,UAAU,EAAE,QAAd;AAAwBC,IAAAA,cAAc,EAAE;AAAxC,GANY;AAOlBM,EAAAA,KAAK,EAAE;AAAEP,IAAAA,UAAU,EAAE,QAAd;AAAwBC,IAAAA,cAAc,EAAE;AAAxC,GAPW;AAQlBO,EAAAA,OAAO,EAAE;AAAER,IAAAA,UAAU,EAAE;AAAd,GARS;AASlBS,EAAAA,GAAG,EAAE;AAAET,IAAAA,UAAU,EAAE,YAAd;AAA4BC,IAAAA,cAAc,EAAE;AAA5C,GATa;AAUlBS,EAAAA,OAAO,EAAE;AAAEV,IAAAA,UAAU,EAAE,YAAd;AAA4BC,IAAAA,cAAc,EAAE;AAA5C,GAVS;AAWlBU,EAAAA,QAAQ,EAAE;AAAEX,IAAAA,UAAU,EAAE,YAAd;AAA4BC,IAAAA,cAAc,EAAE;AAA5C;AAXQ,CAAnB;;AAcO,SAASW,iBAAT,CAA4BC,SAA5B,EAGL;AACD,QAAMC,cAAc,GAAGD,SAAS,GAAGf,UAAU,CAAEe,SAAF,CAAb,GAA6B,EAA7D;AAEA,SAAOC,cAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\nconst ALIGNMENTS = {\n\tbottom: { alignItems: 'flex-end', justifyContent: 'center' },\n\tbottomLeft: { alignItems: 'flex-start', justifyContent: 'flex-end' },\n\tbottomRight: { alignItems: 'flex-end', justifyContent: 'flex-end' },\n\tcenter: { alignItems: 'center', justifyContent: 'center' },\n\tspaced: { alignItems: 'center', justifyContent: 'space-between' },\n\tleft: { alignItems: 'center', justifyContent: 'flex-start' },\n\tright: { alignItems: 'center', justifyContent: 'flex-end' },\n\tstretch: { alignItems: 'stretch' },\n\ttop: { alignItems: 'flex-start', justifyContent: 'center' },\n\ttopLeft: { alignItems: 'flex-start', justifyContent: 'flex-start' },\n\ttopRight: { alignItems: 'flex-start', justifyContent: 'flex-end' },\n};\n\nexport function getAlignmentProps( alignment?: keyof typeof ALIGNMENTS ): {\n\talignItems?: CSSProperties[ 'alignItems' ];\n\tjustifyContent?: CSSProperties[ 'justifyContent' ];\n} {\n\tconst alignmentProps = alignment ? ALIGNMENTS[ alignment ] : {};\n\n\treturn alignmentProps;\n}\n"]}

package/build/h-stack/component.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.HStack = void 0;
 
 var _element = require("@wordpress/element");
 
@@ -20,12 +20,7 @@ var _hook = require("./hook");
 /**
  * Internal dependencies
  */
-
-/**
- * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                               forwardedRef
- */
-function HStack(props, forwardedRef) {
+function UnconnectedHStack(props, forwardedRef) {
   const hStackProps = (0, _hook.useHStack)(props);
   return (0, _element.createElement)(_view.View, (0, _extends2.default)({}, hStackProps, {
     ref: forwardedRef
@@ -56,7 +51,8 @@ function HStack(props, forwardedRef) {
  */
 
 
-const ConnectedHStack = (0, _context.contextConnect)(HStack, 'HStack');
-var _default = ConnectedHStack;
+const HStack = (0, _context.contextConnect)(UnconnectedHStack, 'HStack');
+exports.HStack = HStack;
+var _default = HStack;
 exports.default = _default;
 //# sourceMappingURL=component.js.map

package/build/h-stack/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/h-stack/component.js"],"names":["HStack","props","forwardedRef","hStackProps","ConnectedHStack"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA,SAASA,MAAT,CAAiBC,KAAjB,EAAwBC,YAAxB,EAAuC;AACtC,QAAMC,WAAW,GAAG,qBAAWF,KAAX,CAApB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,WAAX;AAAyB,IAAA,GAAG,EAAGD;AAA/B,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,eAAe,GAAG,6BAAgBJ,MAAhB,EAAwB,QAAxB,CAAxB;eAEeI,e","sourcesContent":["/**\n * Internal dependencies\n */\nimport { contextConnect } from '../ui/context';\nimport { View } from '../view';\nimport { useHStack } from './hook';\n\n/**\n * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props\n * @param {import('react').ForwardedRef<any>}                                               forwardedRef\n */\nfunction HStack( props, forwardedRef ) {\n\tconst hStackProps = useHStack( props );\n\n\treturn <View { ...hStackProps } ref={ forwardedRef } />;\n}\n\n/**\n * `HStack` (Horizontal Stack) arranges child elements in a horizontal line.\n *\n * `HStack` can render anything inside.\n *\n * @example\n * ```jsx\n * import {\n * \t__experimentalHStack as HStack,\n * \t__experimentalText as Text,\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<HStack>\n * \t\t\t<Text>Code</Text>\n * \t\t\t<Text>is</Text>\n * \t\t\t<Text>Poetry</Text>\n * \t\t</HStack>\n * \t);\n * }\n * ```\n */\nconst ConnectedHStack = contextConnect( HStack, 'HStack' );\n\nexport default ConnectedHStack;\n"]}
+{"version":3,"sources":["@wordpress/components/src/h-stack/component.tsx"],"names":["UnconnectedHStack","props","forwardedRef","hStackProps","HStack"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;AAMA,SAASA,iBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,WAAW,GAAG,qBAAWF,KAAX,CAApB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,WAAX;AAAyB,IAAA,GAAG,EAAGD;AAA/B,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAME,MAAM,GAAG,6BAAgBJ,iBAAhB,EAAmC,QAAnC,CAAf;;eAEQI,M","sourcesContent":["/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../ui/context';\nimport { View } from '../view';\nimport { useHStack } from './hook';\nimport type { Props } from './types';\n\nfunction UnconnectedHStack(\n\tprops: WordPressComponentProps< Props, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) {\n\tconst hStackProps = useHStack( props );\n\n\treturn <View { ...hStackProps } ref={ forwardedRef } />;\n}\n\n/**\n * `HStack` (Horizontal Stack) arranges child elements in a horizontal line.\n *\n * `HStack` can render anything inside.\n *\n * @example\n * ```jsx\n * import {\n * \t__experimentalHStack as HStack,\n * \t__experimentalText as Text,\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<HStack>\n * \t\t\t<Text>Code</Text>\n * \t\t\t<Text>is</Text>\n * \t\t\t<Text>Poetry</Text>\n * \t\t</HStack>\n * \t);\n * }\n * ```\n */\nexport const HStack = contextConnect( UnconnectedHStack, 'HStack' );\n\nexport default HStack;\n"]}

package/build/h-stack/hook.js

@@ -20,12 +20,11 @@ var _utils = require("./utils");
 var _getValidChildren = require("../ui/utils/get-valid-children");
 
 /**
- * Internal dependencies
+ * External dependencies
  */
 
 /**
- *
- * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
+ * Internal dependencies
  */
 function useHStack(props) {
   const {
@@ -37,19 +36,18 @@ function useHStack(props) {
   } = (0, _context.useContextSystem)(props, 'HStack');
   const align = (0, _utils.getAlignmentProps)(alignment, direction);
   const validChildren = (0, _getValidChildren.getValidChildren)(children);
-  const clonedChildren = validChildren.map( // @ts-ignore
-  (
-  /** @type {import('react').ReactElement} */
-  child, index) => {
-    const _key = child.key || `hstack-${index}`;
-
+  const clonedChildren = validChildren.map((child, index) => {
     const _isSpacer = (0, _context.hasConnectNamespace)(child, ['Spacer']);
 
     if (_isSpacer) {
+      const childElement = child;
+
+      const _key = childElement.key || `hstack-${index}`;
+
       return (0, _element.createElement)(_flex.FlexItem, (0, _extends2.default)({
         isBlock: true,
         key: _key
-      }, child.props));
+      }, childElement.props));
     }
 
     return child;

package/build/h-stack/hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/h-stack/hook.js"],"names":["useHStack","props","alignment","children","direction","spacing","otherProps","align","validChildren","clonedChildren","map","child","index","_key","key","_isSpacer","propsForFlex","justify","gap","flexProps"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AANA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACO,SAASA,SAAT,CAAoBC,KAApB,EAA4B;AAClC,QAAM;AACLC,IAAAA,SAAS,GAAG,MADP;AAELC,IAAAA,QAFK;AAGLC,IAAAA,SAHK;AAILC,IAAAA,OAAO,GAAG,CAJL;AAKL,OAAGC;AALE,MAMF,+BAAkBL,KAAlB,EAAyB,QAAzB,CANJ;AAQA,QAAMM,KAAK,GAAG,8BAAmBL,SAAnB,EAA8BE,SAA9B,CAAd;AAEA,QAAMI,aAAa,GAAG,wCAAkBL,QAAlB,CAAtB;AACA,QAAMM,cAAc,GAAGD,aAAa,CAACE,GAAd,EACtB;AACA;AAAE;AAA4CC,EAAAA,KAA9C,EAAqDC,KAArD,KAAgE;AAC/D,UAAMC,IAAI,GAAGF,KAAK,CAACG,GAAN,IAAc,UAAUF,KAAO,EAA5C;;AACA,UAAMG,SAAS,GAAG,kCAAqBJ,KAArB,EAA4B,CAAE,QAAF,CAA5B,CAAlB;;AAEA,QAAKI,SAAL,EAAiB;AAChB,aAAO,4BAAC,cAAD;AAAU,QAAA,OAAO,MAAjB;AAAkB,QAAA,GAAG,EAAGF;AAAxB,SAAoCF,KAAK,CAACV,KAA1C,EAAP;AACA;;AAED,WAAOU,KAAP;AACA,GAXqB,CAAvB;AAcA,QAAMK,YAAY,GAAG;AACpBb,IAAAA,QAAQ,EAAEM,cADU;AAEpBL,IAAAA,SAFoB;AAGpBa,IAAAA,OAAO,EAAE,QAHW;AAIpB,OAAGV,KAJiB;AAKpB,OAAGD,UALiB;AAMpBY,IAAAA,GAAG,EAAEb;AANe,GAArB;AASA,QAAMc,SAAS,GAAG,mBAASH,YAAT,CAAlB;AAEA,SAAOG,SAAP;AACA","sourcesContent":["/**\n * Internal dependencies\n */\nimport { hasConnectNamespace, useContextSystem } from '../ui/context';\nimport { FlexItem, useFlex } from '../flex';\nimport { getAlignmentProps } from './utils';\nimport { getValidChildren } from '../ui/utils/get-valid-children';\n\n/**\n *\n * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props\n */\nexport function useHStack( props ) {\n\tconst {\n\t\talignment = 'edge',\n\t\tchildren,\n\t\tdirection,\n\t\tspacing = 2,\n\t\t...otherProps\n\t} = useContextSystem( props, 'HStack' );\n\n\tconst align = getAlignmentProps( alignment, direction );\n\n\tconst validChildren = getValidChildren( children );\n\tconst clonedChildren = validChildren.map(\n\t\t// @ts-ignore\n\t\t( /** @type {import('react').ReactElement} */ child, index ) => {\n\t\t\tconst _key = child.key || `hstack-${ index }`;\n\t\t\tconst _isSpacer = hasConnectNamespace( child, [ 'Spacer' ] );\n\n\t\t\tif ( _isSpacer ) {\n\t\t\t\treturn <FlexItem isBlock key={ _key } { ...child.props } />;\n\t\t\t}\n\n\t\t\treturn child;\n\t\t}\n\t);\n\n\tconst propsForFlex = {\n\t\tchildren: clonedChildren,\n\t\tdirection,\n\t\tjustify: 'center',\n\t\t...align,\n\t\t...otherProps,\n\t\tgap: spacing,\n\t};\n\n\tconst flexProps = useFlex( propsForFlex );\n\n\treturn flexProps;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/h-stack/hook.tsx"],"names":["useHStack","props","alignment","children","direction","spacing","otherProps","align","validChildren","clonedChildren","map","child","index","_isSpacer","childElement","_key","key","propsForFlex","justify","gap","flexProps"],"mappings":";;;;;;;;;;;;;AAQA;;AAKA;;AACA;;AACA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;AAWO,SAASA,SAAT,CAAoBC,KAApB,EAAqE;AAC3E,QAAM;AACLC,IAAAA,SAAS,GAAG,MADP;AAELC,IAAAA,QAFK;AAGLC,IAAAA,SAHK;AAILC,IAAAA,OAAO,GAAG,CAJL;AAKL,OAAGC;AALE,MAMF,+BAAkBL,KAAlB,EAAyB,QAAzB,CANJ;AAQA,QAAMM,KAAK,GAAG,8BAAmBL,SAAnB,EAA8BE,SAA9B,CAAd;AAEA,QAAMI,aAAa,GAAG,wCAAkBL,QAAlB,CAAtB;AACA,QAAMM,cAAc,GAAGD,aAAa,CAACE,GAAd,CAAmB,CAAEC,KAAF,EAASC,KAAT,KAAoB;AAC7D,UAAMC,SAAS,GAAG,kCAAqBF,KAArB,EAA4B,CAAE,QAAF,CAA5B,CAAlB;;AAEA,QAAKE,SAAL,EAAiB;AAChB,YAAMC,YAAY,GAAGH,KAArB;;AACA,YAAMI,IAAI,GAAGD,YAAY,CAACE,GAAb,IAAqB,UAAUJ,KAAO,EAAnD;;AAEA,aAAO,4BAAC,cAAD;AAAU,QAAA,OAAO,MAAjB;AAAkB,QAAA,GAAG,EAAGG;AAAxB,SAAoCD,YAAY,CAACb,KAAjD,EAAP;AACA;;AAED,WAAOU,KAAP;AACA,GAXsB,CAAvB;AAaA,QAAMM,YAAY,GAAG;AACpBd,IAAAA,QAAQ,EAAEM,cADU;AAEpBL,IAAAA,SAFoB;AAGpBc,IAAAA,OAAO,EAAE,QAHW;AAIpB,OAAGX,KAJiB;AAKpB,OAAGD,UALiB;AAMpBa,IAAAA,GAAG,EAAEd;AANe,GAArB;AASA,QAAMe,SAAS,GAAG,mBAASH,YAAT,CAAlB;AAEA,SAAOG,SAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactElement } from 'react';\n\n/**\n * Internal dependencies\n */\nimport {\n\thasConnectNamespace,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { FlexItem, useFlex } from '../flex';\nimport { getAlignmentProps } from './utils';\nimport { getValidChildren } from '../ui/utils/get-valid-children';\nimport type { Props } from './types';\n\nexport function useHStack( props: WordPressComponentProps< Props, 'div' > ) {\n\tconst {\n\t\talignment = 'edge',\n\t\tchildren,\n\t\tdirection,\n\t\tspacing = 2,\n\t\t...otherProps\n\t} = useContextSystem( props, 'HStack' );\n\n\tconst align = getAlignmentProps( alignment, direction );\n\n\tconst validChildren = getValidChildren( children );\n\tconst clonedChildren = validChildren.map( ( child, index ) => {\n\t\tconst _isSpacer = hasConnectNamespace( child, [ 'Spacer' ] );\n\n\t\tif ( _isSpacer ) {\n\t\t\tconst childElement = child as ReactElement;\n\t\t\tconst _key = childElement.key || `hstack-${ index }`;\n\n\t\t\treturn <FlexItem isBlock key={ _key } { ...childElement.props } />;\n\t\t}\n\n\t\treturn child;\n\t} );\n\n\tconst propsForFlex = {\n\t\tchildren: clonedChildren,\n\t\tdirection,\n\t\tjustify: 'center',\n\t\t...align,\n\t\t...otherProps,\n\t\tgap: spacing,\n\t};\n\n\tconst flexProps = useFlex( propsForFlex );\n\n\treturn flexProps;\n}\n"]}

package/build/h-stack/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/h-stack/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["export { default as HStack } from './component';\nexport { useHStack } from './hook';\n"]}
+{"version":3,"sources":["@wordpress/components/src/h-stack/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["export { default as HStack } from './component';\nexport { useHStack } from './hook';\n"]}

package/build/h-stack/utils.js

@@ -8,11 +8,13 @@ exports.getAlignmentProps = getAlignmentProps;
 var _values = require("../utils/values");
 
 /**
- * Internal dependencies
+ * External dependencies
  */
 
-/** @type {import('./types').Alignments} */
-const ALIGNMENTS = {
+/**
+ * Internal dependencies
+ */
+const H_ALIGNMENTS = {
   bottom: {
     align: 'flex-end',
     justify: 'center'
@@ -57,8 +59,6 @@ const ALIGNMENTS = {
     justify: 'flex-end'
   }
 };
-/** @type {import('./types').Alignments} */
-
 const V_ALIGNMENTS = {
   bottom: {
     justify: 'flex-end',
@@ -104,15 +104,6 @@ const V_ALIGNMENTS = {
     align: 'flex-end'
   }
 };
-/* eslint-disable jsdoc/valid-types */
-
-/**
- * @param {import('./types').HStackAlignment | import('react').CSSProperties[ 'alignItems' ]} alignment         Where to align.
- * @param {import('../flex/types').FlexDirection}                                             [direction='row'] Direction to align.
- * @return {import('./types').AlignmentProps} Alignment props.
- */
-
-/* eslint-enable jsdoc/valid-types */
 
 function getAlignmentProps(alignment) {
   let direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'row';
@@ -122,10 +113,8 @@ function getAlignmentProps(alignment) {
   }
 
   const isVertical = direction === 'column';
-  const props = isVertical ? V_ALIGNMENTS : ALIGNMENTS;
-  const alignmentProps = alignment in props ? props[
-  /** @type {keyof typeof ALIGNMENTS} */
-  alignment] : {
+  const props = isVertical ? V_ALIGNMENTS : H_ALIGNMENTS;
+  const alignmentProps = alignment in props ? props[alignment] : {
     align: alignment
   };
   return alignmentProps;

package/build/h-stack/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/h-stack/utils.js"],"names":["ALIGNMENTS","bottom","align","justify","bottomLeft","bottomRight","center","edge","left","right","stretch","top","topLeft","topRight","V_ALIGNMENTS","getAlignmentProps","alignment","direction","isVertical","props","alignmentProps"],"mappings":"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","sourcesContent":["/**\n * Internal dependencies\n */\nimport { isValueDefined } from '../utils/values';\n\n/** @type {import('./types').Alignments} */\nconst ALIGNMENTS = {\n\tbottom: { align: 'flex-end', justify: 'center' },\n\tbottomLeft: { align: 'flex-start', justify: 'flex-end' },\n\tbottomRight: { align: 'flex-end', justify: 'flex-end' },\n\tcenter: { align: 'center', justify: 'center' },\n\tedge: { align: 'center', justify: 'space-between' },\n\tleft: { align: 'center', justify: 'flex-start' },\n\tright: { align: 'center', justify: 'flex-end' },\n\tstretch: { align: 'stretch' },\n\ttop: { align: 'flex-start', justify: 'center' },\n\ttopLeft: { align: 'flex-start', justify: 'flex-start' },\n\ttopRight: { align: 'flex-start', justify: 'flex-end' },\n};\n\n/** @type {import('./types').Alignments} */\nconst V_ALIGNMENTS = {\n\tbottom: { justify: 'flex-end', align: 'center' },\n\tbottomLeft: { justify: 'flex-start', align: 'flex-end' },\n\tbottomRight: { justify: 'flex-end', align: 'flex-end' },\n\tcenter: { justify: 'center', align: 'center' },\n\tedge: { justify: 'space-between', align: 'center' },\n\tleft: { justify: 'center', align: 'flex-start' },\n\tright: { justify: 'center', align: 'flex-end' },\n\tstretch: { justify: 'stretch' },\n\ttop: { justify: 'flex-start', align: 'center' },\n\ttopLeft: { justify: 'flex-start', align: 'flex-start' },\n\ttopRight: { justify: 'flex-start', align: 'flex-end' },\n};\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * @param {import('./types').HStackAlignment | import('react').CSSProperties[ 'alignItems' ]} alignment         Where to align.\n * @param {import('../flex/types').FlexDirection}                                             [direction='row'] Direction to align.\n * @return {import('./types').AlignmentProps} Alignment props.\n */\n/* eslint-enable jsdoc/valid-types */\nexport function getAlignmentProps( alignment, direction = 'row' ) {\n\tif ( ! isValueDefined( alignment ) ) {\n\t\treturn {};\n\t}\n\tconst isVertical = direction === 'column';\n\tconst props = isVertical ? V_ALIGNMENTS : ALIGNMENTS;\n\n\tconst alignmentProps =\n\t\talignment in props\n\t\t\t? props[ /** @type {keyof typeof ALIGNMENTS} */ ( alignment ) ]\n\t\t\t: { align: alignment };\n\n\treturn alignmentProps;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/h-stack/utils.ts"],"names":["H_ALIGNMENTS","bottom","align","justify","bottomLeft","bottomRight","center","edge","left","right","stretch","top","topLeft","topRight","V_ALIGNMENTS","getAlignmentProps","alignment","direction","isVertical","props","alignmentProps"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n/**\n * Internal dependencies\n */\nimport type { FlexDirection } from '../flex/types';\nimport type { HStackAlignment, AlignmentProps, Alignments } from './types';\nimport { isValueDefined } from '../utils/values';\n\nconst H_ALIGNMENTS: Alignments = {\n\tbottom: { align: 'flex-end', justify: 'center' },\n\tbottomLeft: { align: 'flex-start', justify: 'flex-end' },\n\tbottomRight: { align: 'flex-end', justify: 'flex-end' },\n\tcenter: { align: 'center', justify: 'center' },\n\tedge: { align: 'center', justify: 'space-between' },\n\tleft: { align: 'center', justify: 'flex-start' },\n\tright: { align: 'center', justify: 'flex-end' },\n\tstretch: { align: 'stretch' },\n\ttop: { align: 'flex-start', justify: 'center' },\n\ttopLeft: { align: 'flex-start', justify: 'flex-start' },\n\ttopRight: { align: 'flex-start', justify: 'flex-end' },\n};\n\nconst V_ALIGNMENTS: Alignments = {\n\tbottom: { justify: 'flex-end', align: 'center' },\n\tbottomLeft: { justify: 'flex-start', align: 'flex-end' },\n\tbottomRight: { justify: 'flex-end', align: 'flex-end' },\n\tcenter: { justify: 'center', align: 'center' },\n\tedge: { justify: 'space-between', align: 'center' },\n\tleft: { justify: 'center', align: 'flex-start' },\n\tright: { justify: 'center', align: 'flex-end' },\n\tstretch: { justify: 'stretch' },\n\ttop: { justify: 'flex-start', align: 'center' },\n\ttopLeft: { justify: 'flex-start', align: 'flex-start' },\n\ttopRight: { justify: 'flex-start', align: 'flex-end' },\n};\n\nexport function getAlignmentProps(\n\talignment: HStackAlignment | CSSProperties[ 'alignItems' ],\n\tdirection: FlexDirection = 'row'\n): AlignmentProps {\n\tif ( ! isValueDefined( alignment ) ) {\n\t\treturn {};\n\t}\n\tconst isVertical = direction === 'column';\n\tconst props = isVertical ? V_ALIGNMENTS : H_ALIGNMENTS;\n\n\tconst alignmentProps =\n\t\talignment in props\n\t\t\t? props[ alignment as keyof typeof props ]\n\t\t\t: { align: alignment };\n\n\treturn alignmentProps;\n}\n"]}

package/build/icon/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/icon/index.tsx"],"names":["Icon","icon","size","additionalProps","Dashicon","type","prototype","Component","SVG","appliedProps","width","height","props"],"mappings":";;;;;;;;;;;AAQA;;AAMA;;AAKA;;AAnBA;AACA;AACA;;AAGA;AACA;AACA;;AASA;AACA;AACA;AA8BA,SAASA,IAAT,OAIgB;AAAA,MAJI;AACnBC,IAAAA,IAAI,GAAG,IADY;AAEnBC,IAAAA,IAAI,GAAG,EAFY;AAGnB,OAAGC;AAHgB,GAIJ;;AACf,MAAK,aAAa,OAAOF,IAAzB,EAAgC;AAC/B,WACC,4BAAC,iBAAD;AACC,MAAA,IAAI,EAAGA;AADR,OAEQE,eAFR,EADD;AAMA;;AAED,MAAK,6BAAgBF,IAAhB,KAA0BG,sBAAaH,IAAI,CAACI,IAAjD,EAAwD;AACvD,WAAO,2BAAcJ,IAAd,EAAoB,EAC1B,GAAGE;AADuB,KAApB,CAAP;AAGA;;AAED,MAAK,eAAe,OAAOF,IAA3B,EAAkC;AACjC,QAAKA,IAAI,CAACK,SAAL,YAA0BC,kBAA/B,EAA2C;AAC1C,aAAO,4BAAeN,IAAf,EAAqB;AAC3BC,QAAAA,IAD2B;AAE3B,WAAGC;AAFwB,OAArB,CAAP;AAIA;;AAED,WAASF,IAAF,CAA+C;AACrDC,MAAAA,IADqD;AAErD,SAAGC;AAFkD,KAA/C,CAAP;AAIA;;AAED,MAAKF,IAAI,KAAMA,IAAI,CAACI,IAAL,KAAc,KAAd,IAAuBJ,IAAI,CAACI,IAAL,KAAcG,eAA3C,CAAT,EAA4D;AAC3D,UAAMC,YAAY,GAAG;AACpBC,MAAAA,KAAK,EAAER,IADa;AAEpBS,MAAAA,MAAM,EAAET,IAFY;AAGpB,SAAGD,IAAI,CAACW,KAHY;AAIpB,SAAGT;AAJiB,KAArB;AAOA,WAAO,4BAAC,eAAD,EAAUM,YAAV,CAAP;AACA;;AAED,MAAK,6BAAgBR,IAAhB,CAAL,EAA8B;AAC7B,WAAO,2BAAcA,IAAd,EAAoB;AAC1B;AACAC,MAAAA,IAF0B;AAG1B,SAAGC;AAHuB,KAApB,CAAP;AAKA;;AAED,SAAOF,IAAP;AACA;;eAEcD,I","sourcesContent":["/**\n * External dependencies\n */\nimport type { ComponentType, HTMLProps, SVGProps } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcloneElement,\n\tcreateElement,\n\tComponent,\n\tisValidElement,\n} from '@wordpress/element';\nimport { SVG } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport Dashicon from '../dashicon';\nimport type { IconKey as DashiconIconKey } from '../dashicon/types';\n\ntype IconType< P > = DashiconIconKey | ComponentType< P > | JSX.Element;\n\ninterface BaseProps< P > {\n\t/**\n\t * The icon to render. Supported values are: Dashicons (specified as\n\t * strings), functions, Component instances and `null`.\n\t *\n\t * @default null\n\t */\n\ticon?: IconType< P > | null;\n\t/**\n\t * The size (width and height) of the icon.\n\t *\n\t * @default 24\n\t */\n\tsize?: number;\n}\n\ntype AdditionalProps< T > = T extends ComponentType< infer U >\n\t? U\n\t: T extends DashiconIconKey\n\t? SVGProps< SVGSVGElement >\n\t: {};\n\nexport type Props< P > = BaseProps< P > & AdditionalProps< IconType< P > >;\n\nfunction Icon< P >( {\n\ticon = null,\n\tsize = 24,\n\t...additionalProps\n}: Props< P > ) {\n\tif ( 'string' === typeof icon ) {\n\t\treturn (\n\t\t\t<Dashicon\n\t\t\t\ticon={ icon }\n\t\t\t\t{ ...( additionalProps as HTMLProps< HTMLSpanElement > ) }\n\t\t\t/>\n\t\t);\n\t}\n\n\tif ( isValidElement( icon ) && Dashicon === icon.type ) {\n\t\treturn cloneElement( icon, {\n\t\t\t...additionalProps,\n\t\t} );\n\t}\n\n\tif ( 'function' === typeof icon ) {\n\t\tif ( icon.prototype instanceof Component ) {\n\t\t\treturn createElement( icon, {\n\t\t\t\tsize,\n\t\t\t\t...additionalProps,\n\t\t\t} as unknown as P );\n\t\t}\n\n\t\treturn ( icon as ( ...args: any[] ) => JSX.Element )( {\n\t\t\tsize,\n\t\t\t...additionalProps,\n\t\t} );\n\t}\n\n\tif ( icon && ( icon.type === 'svg' || icon.type === SVG ) ) {\n\t\tconst appliedProps = {\n\t\t\twidth: size,\n\t\t\theight: size,\n\t\t\t...icon.props,\n\t\t\t...additionalProps,\n\t\t};\n\n\t\treturn <SVG { ...appliedProps } />;\n\t}\n\n\tif ( isValidElement( icon ) ) {\n\t\treturn cloneElement( icon, {\n\t\t\t// @ts-ignore Just forwarding the size prop along\n\t\t\tsize,\n\t\t\t...additionalProps,\n\t\t} );\n\t}\n\n\treturn icon;\n}\n\nexport default Icon;\n"]}
+{"version":3,"sources":["@wordpress/components/src/icon/index.tsx"],"names":["Icon","icon","size","additionalProps","Dashicon","type","prototype","Component","SVG","appliedProps","width","height","props"],"mappings":";;;;;;;;;;;AAQA;;AAMA;;AAKA;;AAnBA;AACA;AACA;;AAGA;AACA;AACA;;AASA;AACA;AACA;AA8BA,SAASA,IAAT,OAIgB;AAAA,MAJI;AACnBC,IAAAA,IAAI,GAAG,IADY;AAEnBC,IAAAA,IAAI,GAAG,EAFY;AAGnB,OAAGC;AAHgB,GAIJ;;AACf,MAAK,aAAa,OAAOF,IAAzB,EAAgC;AAC/B,WACC,4BAAC,iBAAD;AACC,MAAA,IAAI,EAAGA;AADR,OAEQE,eAFR,EADD;AAMA;;AAED,MAAK,6BAAgBF,IAAhB,KAA0BG,sBAAaH,IAAI,CAACI,IAAjD,EAAwD;AACvD,WAAO,2BAAcJ,IAAd,EAAoB,EAC1B,GAAGE;AADuB,KAApB,CAAP;AAGA;;AAED,MAAK,eAAe,OAAOF,IAA3B,EAAkC;AACjC,QAAKA,IAAI,CAACK,SAAL,YAA0BC,kBAA/B,EAA2C;AAC1C,aAAO,4BAAeN,IAAf,EAAqB;AAC3BC,QAAAA,IAD2B;AAE3B,WAAGC;AAFwB,OAArB,CAAP;AAIA;;AAED,WAASF,IAAF,CAA+C;AACrDC,MAAAA,IADqD;AAErD,SAAGC;AAFkD,KAA/C,CAAP;AAIA;;AAED,MAAKF,IAAI,KAAMA,IAAI,CAACI,IAAL,KAAc,KAAd,IAAuBJ,IAAI,CAACI,IAAL,KAAcG,eAA3C,CAAT,EAA4D;AAC3D,UAAMC,YAAY,GAAG;AACpBC,MAAAA,KAAK,EAAER,IADa;AAEpBS,MAAAA,MAAM,EAAET,IAFY;AAGpB,SAAGD,IAAI,CAACW,KAHY;AAIpB,SAAGT;AAJiB,KAArB;AAOA,WAAO,4BAAC,eAAD,EAAUM,YAAV,CAAP;AACA;;AAED,MAAK,6BAAgBR,IAAhB,CAAL,EAA8B;AAC7B,WAAO,2BAAcA,IAAd,EAAoB;AAC1B;AACAC,MAAAA,IAF0B;AAG1B,SAAGC;AAHuB,KAApB,CAAP;AAKA;;AAED,SAAOF,IAAP;AACA;;eAEcD,I","sourcesContent":["/**\n * External dependencies\n */\nimport type { ComponentType, HTMLProps, SVGProps } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcloneElement,\n\tcreateElement,\n\tComponent,\n\tisValidElement,\n} from '@wordpress/element';\nimport { SVG } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport Dashicon from '../dashicon';\nimport type { IconKey as DashiconIconKey } from '../dashicon/types';\n\nexport type IconType< P > = DashiconIconKey | ComponentType< P > | JSX.Element;\n\ninterface BaseProps< P > {\n\t/**\n\t * The icon to render. Supported values are: Dashicons (specified as\n\t * strings), functions, Component instances and `null`.\n\t *\n\t * @default null\n\t */\n\ticon?: IconType< P > | null;\n\t/**\n\t * The size (width and height) of the icon.\n\t *\n\t * @default 24\n\t */\n\tsize?: number;\n}\n\ntype AdditionalProps< T > = T extends ComponentType< infer U >\n\t? U\n\t: T extends DashiconIconKey\n\t? SVGProps< SVGSVGElement >\n\t: {};\n\nexport type Props< P > = BaseProps< P > & AdditionalProps< IconType< P > >;\n\nfunction Icon< P >( {\n\ticon = null,\n\tsize = 24,\n\t...additionalProps\n}: Props< P > ) {\n\tif ( 'string' === typeof icon ) {\n\t\treturn (\n\t\t\t<Dashicon\n\t\t\t\ticon={ icon }\n\t\t\t\t{ ...( additionalProps as HTMLProps< HTMLSpanElement > ) }\n\t\t\t/>\n\t\t);\n\t}\n\n\tif ( isValidElement( icon ) && Dashicon === icon.type ) {\n\t\treturn cloneElement( icon, {\n\t\t\t...additionalProps,\n\t\t} );\n\t}\n\n\tif ( 'function' === typeof icon ) {\n\t\tif ( icon.prototype instanceof Component ) {\n\t\t\treturn createElement( icon, {\n\t\t\t\tsize,\n\t\t\t\t...additionalProps,\n\t\t\t} as unknown as P );\n\t\t}\n\n\t\treturn ( icon as ( ...args: any[] ) => JSX.Element )( {\n\t\t\tsize,\n\t\t\t...additionalProps,\n\t\t} );\n\t}\n\n\tif ( icon && ( icon.type === 'svg' || icon.type === SVG ) ) {\n\t\tconst appliedProps = {\n\t\t\twidth: size,\n\t\t\theight: size,\n\t\t\t...icon.props,\n\t\t\t...additionalProps,\n\t\t};\n\n\t\treturn <SVG { ...appliedProps } />;\n\t}\n\n\tif ( isValidElement( icon ) ) {\n\t\treturn cloneElement( icon, {\n\t\t\t// @ts-ignore Just forwarding the size prop along\n\t\t\tsize,\n\t\t\t...additionalProps,\n\t\t} );\n\t}\n\n\treturn icon;\n}\n\nexport default Icon;\n"]}

package/build/menu-item/index.js

@@ -14,8 +14,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _lodash = require("lodash");
-
 var _shortcut = _interopRequireDefault(require("../shortcut"));
 
 var _button = _interopRequireDefault(require("../button"));
@@ -59,7 +57,7 @@ function MenuItem(props, ref) {
     }, info));
   }
 
-  if (icon && !(0, _lodash.isString)(icon)) {
+  if (icon && typeof icon !== 'string') {
     icon = (0, _element.cloneElement)(icon, {
       className: (0, _classnames.default)('components-menu-items__item-icon', {
         'has-icon-right': iconPosition === 'right'

package/build/menu-item/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/menu-item/index.js"],"names":["MenuItem","props","ref","children","info","className","icon","iconPosition","shortcut","isSelected","role","buttonProps","undefined"],"mappings":";;;;;;;;;;AAUA;;;;AANA;;AACA;;AAUA;;AACA;;AACA;;AAjBA;;AACA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AAKO,SAASA,QAAT,CAAmBC,KAAnB,EAA0BC,GAA1B,EAAgC;AACtC,MAAI;AACHC,IAAAA,QADG;AAEHC,IAAAA,IAFG;AAGHC,IAAAA,SAHG;AAIHC,IAAAA,IAJG;AAKHC,IAAAA,YAAY,GAAG,OALZ;AAMHC,IAAAA,QANG;AAOHC,IAAAA,UAPG;AAQHC,IAAAA,IAAI,GAAG,UARJ;AASH,OAAGC;AATA,MAUAV,KAVJ;AAYAI,EAAAA,SAAS,GAAG,yBAAY,8BAAZ,EAA4CA,SAA5C,CAAZ;;AAEA,MAAKD,IAAL,EAAY;AACXD,IAAAA,QAAQ,GACP;AAAM,MAAA,SAAS,EAAC;AAAhB,OACC;AAAM,MAAA,SAAS,EAAC;AAAhB,OAA+CA,QAA/C,CADD,EAEC;AAAM,MAAA,SAAS,EAAC;AAAhB,OAA+CC,IAA/C,CAFD,CADD;AAMA;;AAED,MAAKE,IAAI,IAAI,CAAE,sBAAUA,IAAV,CAAf,EAAkC;AACjCA,IAAAA,IAAI,GAAG,2BAAcA,IAAd,EAAoB;AAC1BD,MAAAA,SAAS,EAAE,yBAAY,kCAAZ,EAAgD;AAC1D,0BAAkBE,YAAY,KAAK;AADuB,OAAhD;AADe,KAApB,CAAP;AAKA;;AAED,SACC,4BAAC,eAAD;AACC,IAAA,GAAG,EAAGL,GADP,CAEC;AAFD;AAGC,oBACCQ,IAAI,KAAK,kBAAT,IAA+BA,IAAI,KAAK,eAAxC,GACGD,UADH,GAEGG,SANL;AAQC,IAAA,IAAI,EAAGF,IARR;AASC,IAAA,IAAI,EAAGH,YAAY,KAAK,MAAjB,GAA0BD,IAA1B,GAAiCM,SATzC;AAUC,IAAA,SAAS,EAAGP;AAVb,KAWMM,WAXN,GAaC;AAAM,IAAA,SAAS,EAAC;AAAhB,KAA+CR,QAA/C,CAbD,EAcC,4BAAC,iBAAD;AACC,IAAA,SAAS,EAAC,gCADX;AAEC,IAAA,QAAQ,EAAGK;AAFZ,IAdD,EAkBGF,IAAI,IAAIC,YAAY,KAAK,OAAzB,IAAoC,4BAAC,aAAD;AAAM,IAAA,IAAI,EAAGD;AAAb,IAlBvC,CADD;AAsBA;;eAEc,yBAAYN,QAAZ,C","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { isString } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { cloneElement, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Shortcut from '../shortcut';\nimport Button from '../button';\nimport Icon from '../icon';\n\nexport function MenuItem( props, ref ) {\n\tlet {\n\t\tchildren,\n\t\tinfo,\n\t\tclassName,\n\t\ticon,\n\t\ticonPosition = 'right',\n\t\tshortcut,\n\t\tisSelected,\n\t\trole = 'menuitem',\n\t\t...buttonProps\n\t} = props;\n\n\tclassName = classnames( 'components-menu-item__button', className );\n\n\tif ( info ) {\n\t\tchildren = (\n\t\t\t<span className=\"components-menu-item__info-wrapper\">\n\t\t\t\t<span className=\"components-menu-item__item\">{ children }</span>\n\t\t\t\t<span className=\"components-menu-item__info\">{ info }</span>\n\t\t\t</span>\n\t\t);\n\t}\n\n\tif ( icon && ! isString( icon ) ) {\n\t\ticon = cloneElement( icon, {\n\t\t\tclassName: classnames( 'components-menu-items__item-icon', {\n\t\t\t\t'has-icon-right': iconPosition === 'right',\n\t\t\t} ),\n\t\t} );\n\t}\n\n\treturn (\n\t\t<Button\n\t\t\tref={ ref }\n\t\t\t// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked\n\t\t\taria-checked={\n\t\t\t\trole === 'menuitemcheckbox' || role === 'menuitemradio'\n\t\t\t\t\t? isSelected\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\trole={ role }\n\t\t\ticon={ iconPosition === 'left' ? icon : undefined }\n\t\t\tclassName={ className }\n\t\t\t{ ...buttonProps }\n\t\t>\n\t\t\t<span className=\"components-menu-item__item\">{ children }</span>\n\t\t\t<Shortcut\n\t\t\t\tclassName=\"components-menu-item__shortcut\"\n\t\t\t\tshortcut={ shortcut }\n\t\t\t/>\n\t\t\t{ icon && iconPosition === 'right' && <Icon icon={ icon } /> }\n\t\t</Button>\n\t);\n}\n\nexport default forwardRef( MenuItem );\n"]}
+{"version":3,"sources":["@wordpress/components/src/menu-item/index.js"],"names":["MenuItem","props","ref","children","info","className","icon","iconPosition","shortcut","isSelected","role","buttonProps","undefined"],"mappings":";;;;;;;;;;AASA;;;;AALA;;AAUA;;AACA;;AACA;;AAhBA;;AACA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAKO,SAASA,QAAT,CAAmBC,KAAnB,EAA0BC,GAA1B,EAAgC;AACtC,MAAI;AACHC,IAAAA,QADG;AAEHC,IAAAA,IAFG;AAGHC,IAAAA,SAHG;AAIHC,IAAAA,IAJG;AAKHC,IAAAA,YAAY,GAAG,OALZ;AAMHC,IAAAA,QANG;AAOHC,IAAAA,UAPG;AAQHC,IAAAA,IAAI,GAAG,UARJ;AASH,OAAGC;AATA,MAUAV,KAVJ;AAYAI,EAAAA,SAAS,GAAG,yBAAY,8BAAZ,EAA4CA,SAA5C,CAAZ;;AAEA,MAAKD,IAAL,EAAY;AACXD,IAAAA,QAAQ,GACP;AAAM,MAAA,SAAS,EAAC;AAAhB,OACC;AAAM,MAAA,SAAS,EAAC;AAAhB,OAA+CA,QAA/C,CADD,EAEC;AAAM,MAAA,SAAS,EAAC;AAAhB,OAA+CC,IAA/C,CAFD,CADD;AAMA;;AAED,MAAKE,IAAI,IAAI,OAAOA,IAAP,KAAgB,QAA7B,EAAwC;AACvCA,IAAAA,IAAI,GAAG,2BAAcA,IAAd,EAAoB;AAC1BD,MAAAA,SAAS,EAAE,yBAAY,kCAAZ,EAAgD;AAC1D,0BAAkBE,YAAY,KAAK;AADuB,OAAhD;AADe,KAApB,CAAP;AAKA;;AAED,SACC,4BAAC,eAAD;AACC,IAAA,GAAG,EAAGL,GADP,CAEC;AAFD;AAGC,oBACCQ,IAAI,KAAK,kBAAT,IAA+BA,IAAI,KAAK,eAAxC,GACGD,UADH,GAEGG,SANL;AAQC,IAAA,IAAI,EAAGF,IARR;AASC,IAAA,IAAI,EAAGH,YAAY,KAAK,MAAjB,GAA0BD,IAA1B,GAAiCM,SATzC;AAUC,IAAA,SAAS,EAAGP;AAVb,KAWMM,WAXN,GAaC;AAAM,IAAA,SAAS,EAAC;AAAhB,KAA+CR,QAA/C,CAbD,EAcC,4BAAC,iBAAD;AACC,IAAA,SAAS,EAAC,gCADX;AAEC,IAAA,QAAQ,EAAGK;AAFZ,IAdD,EAkBGF,IAAI,IAAIC,YAAY,KAAK,OAAzB,IAAoC,4BAAC,aAAD;AAAM,IAAA,IAAI,EAAGD;AAAb,IAlBvC,CADD;AAsBA;;eAEc,yBAAYN,QAAZ,C","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { cloneElement, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Shortcut from '../shortcut';\nimport Button from '../button';\nimport Icon from '../icon';\n\nexport function MenuItem( props, ref ) {\n\tlet {\n\t\tchildren,\n\t\tinfo,\n\t\tclassName,\n\t\ticon,\n\t\ticonPosition = 'right',\n\t\tshortcut,\n\t\tisSelected,\n\t\trole = 'menuitem',\n\t\t...buttonProps\n\t} = props;\n\n\tclassName = classnames( 'components-menu-item__button', className );\n\n\tif ( info ) {\n\t\tchildren = (\n\t\t\t<span className=\"components-menu-item__info-wrapper\">\n\t\t\t\t<span className=\"components-menu-item__item\">{ children }</span>\n\t\t\t\t<span className=\"components-menu-item__info\">{ info }</span>\n\t\t\t</span>\n\t\t);\n\t}\n\n\tif ( icon && typeof icon !== 'string' ) {\n\t\ticon = cloneElement( icon, {\n\t\t\tclassName: classnames( 'components-menu-items__item-icon', {\n\t\t\t\t'has-icon-right': iconPosition === 'right',\n\t\t\t} ),\n\t\t} );\n\t}\n\n\treturn (\n\t\t<Button\n\t\t\tref={ ref }\n\t\t\t// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked\n\t\t\taria-checked={\n\t\t\t\trole === 'menuitemcheckbox' || role === 'menuitemradio'\n\t\t\t\t\t? isSelected\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\trole={ role }\n\t\t\ticon={ iconPosition === 'left' ? icon : undefined }\n\t\t\tclassName={ className }\n\t\t\t{ ...buttonProps }\n\t\t>\n\t\t\t<span className=\"components-menu-item__item\">{ children }</span>\n\t\t\t<Shortcut\n\t\t\t\tclassName=\"components-menu-item__shortcut\"\n\t\t\t\tshortcut={ shortcut }\n\t\t\t/>\n\t\t\t{ icon && iconPosition === 'right' && <Icon icon={ icon } /> }\n\t\t</Button>\n\t);\n}\n\nexport default forwardRef( MenuItem );\n"]}

package/build/mobile/focal-point-settings-panel/index.native.js

@@ -67,7 +67,7 @@ const FocalPointSettingsPanelMemo = (0, _element.memo)(_ref => {
     onPress: () => onButtonPress('apply')
   })), (0, _element.createElement)(_components.FocalPointPicker, {
     focalPoint: draftFocalPoint,
-    onChange: setPosition,
+    onChange: (0, _element.useCallback)(setPosition, []),
     shouldEnableBottomSheetScroll: shouldEnableBottomSheetScroll,
     url: url
   }));

package/build/mobile/focal-point-settings-panel/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/mobile/focal-point-settings-panel/index.native.js"],"names":["FocalPointSettingsPanelMemo","focalPoint","onFocalPointChange","shouldEnableBottomSheetScroll","url","navigation","onButtonPress","action","goBack","draftFocalPoint","setDraftFocalPoint","setPosition","coordinates","prevState","styles","safearea","FocalPointSettingsPanel","props","route","BottomSheetContext","params"],"mappings":";;;;;;;;;AAUA;;;;AAPA;;AACA;;AAKA;;AAEA;;AAKA;;AACA;;AAjBA;AACA;AACA;;AAIA;AACA;AACA;;AAKA;AACA;AACA;AAIA,MAAMA,2BAA2B,GAAG,mBACnC,QAKO;AAAA,MALL;AACDC,IAAAA,UADC;AAEDC,IAAAA,kBAFC;AAGDC,IAAAA,6BAHC;AAIDC,IAAAA;AAJC,GAKK;AACN,QAAMC,UAAU,GAAG,4BAAnB;;AAEA,WAASC,aAAT,CAAwBC,MAAxB,EAAiC;AAChCF,IAAAA,UAAU,CAACG,MAAX;;AACA,QAAKD,MAAM,KAAK,OAAhB,EAA0B;AACzBL,MAAAA,kBAAkB,CAAEO,eAAF,CAAlB;AACA;AACD;;AAED,QAAM,CAAEA,eAAF,EAAmBC,kBAAnB,IAA0C,uBAAUT,UAAV,CAAhD;;AACA,WAASU,WAAT,CAAsBC,WAAtB,EAAoC;AACnCF,IAAAA,kBAAkB,CAAIG,SAAF,KAAmB,EACtC,GAAGA,SADmC;AAEtC,SAAGD;AAFmC,KAAnB,CAAF,CAAlB;AAIA;;AAED,SACC,4BAAC,yBAAD;AAAc,IAAA,KAAK,EAAGE,gBAAOC;AAA7B,KACC,4BAAC,eAAD,QACC,4BAAC,eAAD,CAAQ,aAAR;AACC,IAAA,OAAO,EAAG,MAAMT,aAAa,CAAE,QAAF;AAD9B,IADD,EAIC,4BAAC,eAAD,CAAQ,OAAR,QACG,cAAI,kBAAJ,CADH,CAJD,EAOC,4BAAC,eAAD,CAAQ,WAAR;AACC,IAAA,OAAO,EAAG,MAAMA,aAAa,CAAE,OAAF;AAD9B,IAPD,CADD,EAYC,4BAAC,4BAAD;AACC,IAAA,UAAU,EAAGG,eADd;AAEC,IAAA,QAAQ,EAAGE,WAFZ;AAGC,IAAA,6BAA6B,EAC5BR,6BAJF;AAMC,IAAA,GAAG,EAAGC;AANP,IAZD,CADD;AAuBA,CA/CkC,CAApC;;AAkDA,SAASY,uBAAT,CAAkCC,KAAlC,EAA0C;AACzC,QAAMC,KAAK,GAAG,uBAAd;AACA,QAAM;AAAEf,IAAAA;AAAF,MAAoC,yBAAYgB,8BAAZ,CAA1C;AAEA,SACC,4BAAC,2BAAD;AACC,IAAA,6BAA6B,EAAGhB;AADjC,KAEMc,KAFN,EAGMC,KAAK,CAACE,MAHZ,EADD;AAOA;;eAEcJ,uB","sourcesContent":["/**\n * External dependencies\n */\nimport { SafeAreaView } from 'react-native';\nimport { useRoute, useNavigation } from '@react-navigation/native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { memo, useContext, useState } from '@wordpress/element';\nimport { BottomSheetContext, FocalPointPicker } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport NavBar from '../bottom-sheet/nav-bar';\nimport styles from './styles.scss';\n\nconst FocalPointSettingsPanelMemo = memo(\n\t( {\n\t\tfocalPoint,\n\t\tonFocalPointChange,\n\t\tshouldEnableBottomSheetScroll,\n\t\turl,\n\t} ) => {\n\t\tconst navigation = useNavigation();\n\n\t\tfunction onButtonPress( action ) {\n\t\t\tnavigation.goBack();\n\t\t\tif ( action === 'apply' ) {\n\t\t\t\tonFocalPointChange( draftFocalPoint );\n\t\t\t}\n\t\t}\n\n\t\tconst [ draftFocalPoint, setDraftFocalPoint ] = useState( focalPoint );\n\t\tfunction setPosition( coordinates ) {\n\t\t\tsetDraftFocalPoint( ( prevState ) => ( {\n\t\t\t\t...prevState,\n\t\t\t\t...coordinates,\n\t\t\t} ) );\n\t\t}\n\n\t\treturn (\n\t\t\t<SafeAreaView style={ styles.safearea }>\n\t\t\t\t<NavBar>\n\t\t\t\t\t<NavBar.DismissButton\n\t\t\t\t\t\tonPress={ () => onButtonPress( 'cancel' ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<NavBar.Heading>\n\t\t\t\t\t\t{ __( 'Edit focal point' ) }\n\t\t\t\t\t</NavBar.Heading>\n\t\t\t\t\t<NavBar.ApplyButton\n\t\t\t\t\t\tonPress={ () => onButtonPress( 'apply' ) }\n\t\t\t\t\t/>\n\t\t\t\t</NavBar>\n\t\t\t\t<FocalPointPicker\n\t\t\t\t\tfocalPoint={ draftFocalPoint }\n\t\t\t\t\tonChange={ setPosition }\n\t\t\t\t\tshouldEnableBottomSheetScroll={\n\t\t\t\t\t\tshouldEnableBottomSheetScroll\n\t\t\t\t\t}\n\t\t\t\t\turl={ url }\n\t\t\t\t/>\n\t\t\t</SafeAreaView>\n\t\t);\n\t}\n);\n\nfunction FocalPointSettingsPanel( props ) {\n\tconst route = useRoute();\n\tconst { shouldEnableBottomSheetScroll } = useContext( BottomSheetContext );\n\n\treturn (\n\t\t<FocalPointSettingsPanelMemo\n\t\t\tshouldEnableBottomSheetScroll={ shouldEnableBottomSheetScroll }\n\t\t\t{ ...props }\n\t\t\t{ ...route.params }\n\t\t/>\n\t);\n}\n\nexport default FocalPointSettingsPanel;\n"]}
+{"version":3,"sources":["@wordpress/components/src/mobile/focal-point-settings-panel/index.native.js"],"names":["FocalPointSettingsPanelMemo","focalPoint","onFocalPointChange","shouldEnableBottomSheetScroll","url","navigation","onButtonPress","action","goBack","draftFocalPoint","setDraftFocalPoint","setPosition","coordinates","prevState","styles","safearea","FocalPointSettingsPanel","props","route","BottomSheetContext","params"],"mappings":";;;;;;;;;AAUA;;;;AAPA;;AACA;;AAKA;;AAEA;;AAKA;;AACA;;AAjBA;AACA;AACA;;AAIA;AACA;AACA;;AAKA;AACA;AACA;AAIA,MAAMA,2BAA2B,GAAG,mBACnC,QAKO;AAAA,MALL;AACDC,IAAAA,UADC;AAEDC,IAAAA,kBAFC;AAGDC,IAAAA,6BAHC;AAIDC,IAAAA;AAJC,GAKK;AACN,QAAMC,UAAU,GAAG,4BAAnB;;AAEA,WAASC,aAAT,CAAwBC,MAAxB,EAAiC;AAChCF,IAAAA,UAAU,CAACG,MAAX;;AACA,QAAKD,MAAM,KAAK,OAAhB,EAA0B;AACzBL,MAAAA,kBAAkB,CAAEO,eAAF,CAAlB;AACA;AACD;;AAED,QAAM,CAAEA,eAAF,EAAmBC,kBAAnB,IAA0C,uBAAUT,UAAV,CAAhD;;AACA,WAASU,WAAT,CAAsBC,WAAtB,EAAoC;AACnCF,IAAAA,kBAAkB,CAAIG,SAAF,KAAmB,EACtC,GAAGA,SADmC;AAEtC,SAAGD;AAFmC,KAAnB,CAAF,CAAlB;AAIA;;AAED,SACC,4BAAC,yBAAD;AAAc,IAAA,KAAK,EAAGE,gBAAOC;AAA7B,KACC,4BAAC,eAAD,QACC,4BAAC,eAAD,CAAQ,aAAR;AACC,IAAA,OAAO,EAAG,MAAMT,aAAa,CAAE,QAAF;AAD9B,IADD,EAIC,4BAAC,eAAD,CAAQ,OAAR,QACG,cAAI,kBAAJ,CADH,CAJD,EAOC,4BAAC,eAAD,CAAQ,WAAR;AACC,IAAA,OAAO,EAAG,MAAMA,aAAa,CAAE,OAAF;AAD9B,IAPD,CADD,EAYC,4BAAC,4BAAD;AACC,IAAA,UAAU,EAAGG,eADd;AAEC,IAAA,QAAQ,EAAG,0BAAaE,WAAb,EAA0B,EAA1B,CAFZ;AAGC,IAAA,6BAA6B,EAC5BR,6BAJF;AAMC,IAAA,GAAG,EAAGC;AANP,IAZD,CADD;AAuBA,CA/CkC,CAApC;;AAkDA,SAASY,uBAAT,CAAkCC,KAAlC,EAA0C;AACzC,QAAMC,KAAK,GAAG,uBAAd;AACA,QAAM;AAAEf,IAAAA;AAAF,MAAoC,yBAAYgB,8BAAZ,CAA1C;AAEA,SACC,4BAAC,2BAAD;AACC,IAAA,6BAA6B,EAAGhB;AADjC,KAEMc,KAFN,EAGMC,KAAK,CAACE,MAHZ,EADD;AAOA;;eAEcJ,uB","sourcesContent":["/**\n * External dependencies\n */\nimport { SafeAreaView } from 'react-native';\nimport { useRoute, useNavigation } from '@react-navigation/native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { memo, useContext, useState, useCallback } from '@wordpress/element';\nimport { BottomSheetContext, FocalPointPicker } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport NavBar from '../bottom-sheet/nav-bar';\nimport styles from './styles.scss';\n\nconst FocalPointSettingsPanelMemo = memo(\n\t( {\n\t\tfocalPoint,\n\t\tonFocalPointChange,\n\t\tshouldEnableBottomSheetScroll,\n\t\turl,\n\t} ) => {\n\t\tconst navigation = useNavigation();\n\n\t\tfunction onButtonPress( action ) {\n\t\t\tnavigation.goBack();\n\t\t\tif ( action === 'apply' ) {\n\t\t\t\tonFocalPointChange( draftFocalPoint );\n\t\t\t}\n\t\t}\n\n\t\tconst [ draftFocalPoint, setDraftFocalPoint ] = useState( focalPoint );\n\t\tfunction setPosition( coordinates ) {\n\t\t\tsetDraftFocalPoint( ( prevState ) => ( {\n\t\t\t\t...prevState,\n\t\t\t\t...coordinates,\n\t\t\t} ) );\n\t\t}\n\n\t\treturn (\n\t\t\t<SafeAreaView style={ styles.safearea }>\n\t\t\t\t<NavBar>\n\t\t\t\t\t<NavBar.DismissButton\n\t\t\t\t\t\tonPress={ () => onButtonPress( 'cancel' ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<NavBar.Heading>\n\t\t\t\t\t\t{ __( 'Edit focal point' ) }\n\t\t\t\t\t</NavBar.Heading>\n\t\t\t\t\t<NavBar.ApplyButton\n\t\t\t\t\t\tonPress={ () => onButtonPress( 'apply' ) }\n\t\t\t\t\t/>\n\t\t\t\t</NavBar>\n\t\t\t\t<FocalPointPicker\n\t\t\t\t\tfocalPoint={ draftFocalPoint }\n\t\t\t\t\tonChange={ useCallback( setPosition, [] ) }\n\t\t\t\t\tshouldEnableBottomSheetScroll={\n\t\t\t\t\t\tshouldEnableBottomSheetScroll\n\t\t\t\t\t}\n\t\t\t\t\turl={ url }\n\t\t\t\t/>\n\t\t\t</SafeAreaView>\n\t\t);\n\t}\n);\n\nfunction FocalPointSettingsPanel( props ) {\n\tconst route = useRoute();\n\tconst { shouldEnableBottomSheetScroll } = useContext( BottomSheetContext );\n\n\treturn (\n\t\t<FocalPointSettingsPanelMemo\n\t\t\tshouldEnableBottomSheetScroll={ shouldEnableBottomSheetScroll }\n\t\t\t{ ...props }\n\t\t\t{ ...route.params }\n\t\t/>\n\t);\n}\n\nexport default FocalPointSettingsPanel;\n"]}

package/build/mobile/image/index.native.js

@@ -13,6 +13,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _reactNative = require("react-native");
 
+var _reactNativeFastImage = _interopRequireDefault(require("react-native-fast-image"));
+
 var _i18n = require("@wordpress/i18n");
 
 var _components = require("@wordpress/components");
@@ -185,7 +187,7 @@ const ImageComponent = _ref => {
     style: _style.default.imageUploadingIconContainer
   }, getIcon(ICON_TYPE.UPLOAD))) : (0, _element.createElement)(_reactNative.View, {
     style: focalPoint && _style.default.focalPointContent
-  }, (0, _element.createElement)(_reactNative.Image, (0, _extends2.default)({}, !resizeMode && {
+  }, (0, _element.createElement)(_reactNativeFastImage.default, (0, _extends2.default)({}, !resizeMode && {
     aspectRatio: imageData === null || imageData === void 0 ? void 0 : imageData.aspectRatio
   }, {
     style: imageStyles,
@@ -195,7 +197,7 @@ const ImageComponent = _ref => {
   }, !focalPoint && {
     resizeMethod: 'scale'
   }, {
-    resizeMode: resizeMode
+    resizeMode: _reactNativeFastImage.default.resizeMode[resizeMode]
   }))), isUploadFailed && retryMessage && (0, _element.createElement)(_reactNative.View, {
     style: [_style.default.imageContainer, _style.default.retryContainer]
   }, (0, _element.createElement)(_reactNative.View, {

package/build/mobile/image/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/mobile/image/index.native.js"],"names":["ICON_TYPE","PLACEHOLDER","RETRY","UPLOAD","IMAGE_DEFAULT_FOCAL_POINT","x","y","ImageComponent","align","alt","editButton","focalPoint","height","imageHeight","highlightSelected","isSelected","isUploadFailed","isUploadInProgress","mediaPickerOptions","onImageDataLoad","onSelectMediaUploadOption","openMediaOptions","resizeMode","retryMessage","retryIcon","url","shapeStyle","style","width","imageWidth","imageData","setImageData","containerSize","setContainerSize","isCurrent","Image","getSize","imgWidth","imgHeight","metaData","aspectRatio","onContainerLayout","event","nativeEvent","layout","getIcon","iconType","iconStyle","SvgIconRetry","styles","iconRetry","iconPlaceholderStyles","iconUploadStyles","icon","iconPlaceholder","iconPlaceholderDark","iconUpload","iconUploadDark","placeholderStyles","imageContainerUpload","imageContainerUploadDark","imageContainerUploadWithFocalpoint","customWidth","wide","imageContainerStyles","imageContent","focalPointContainer","imageStyles","opacity","undefined","container","alignItems","imageBorder","imageUploadingIconContainer","focalPointContent","uri","resizeMethod","imageContainer","retryContainer","customRetryIcon","uploadFailedText"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { Image, Text, View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Icon } from '@wordpress/components';\nimport { image as icon } from '@wordpress/icons';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getImageWithFocalPointStyles } from './utils';\nimport styles from './style.scss';\nimport SvgIconRetry from './icon-retry';\nimport ImageEditingButton from './image-editing-button';\n\nconst ICON_TYPE = {\n\tPLACEHOLDER: 'placeholder',\n\tRETRY: 'retry',\n\tUPLOAD: 'upload',\n};\n\nexport const IMAGE_DEFAULT_FOCAL_POINT = { x: 0.5, y: 0.5 };\n\nconst ImageComponent = ( {\n\talign,\n\talt,\n\teditButton = true,\n\tfocalPoint,\n\theight: imageHeight,\n\thighlightSelected = true,\n\tisSelected,\n\tisUploadFailed,\n\tisUploadInProgress,\n\tmediaPickerOptions,\n\tonImageDataLoad,\n\tonSelectMediaUploadOption,\n\topenMediaOptions,\n\tresizeMode,\n\tretryMessage,\n\tretryIcon,\n\turl,\n\tshapeStyle,\n\tstyle,\n\twidth: imageWidth,\n} ) => {\n\tconst [ imageData, setImageData ] = useState( null );\n\tconst [ containerSize, setContainerSize ] = useState( null );\n\n\tuseEffect( () => {\n\t\tlet isCurrent = true;\n\t\tif ( url ) {\n\t\t\tImage.getSize( url, ( imgWidth, imgHeight ) => {\n\t\t\t\tif ( ! isCurrent ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst metaData = {\n\t\t\t\t\taspectRatio: imgWidth / imgHeight,\n\t\t\t\t\twidth: imgWidth,\n\t\t\t\t\theight: imgHeight,\n\t\t\t\t};\n\t\t\t\tsetImageData( metaData );\n\t\t\t\tif ( onImageDataLoad ) {\n\t\t\t\t\tonImageDataLoad( metaData );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t\treturn () => ( isCurrent = false );\n\t}, [ url ] );\n\n\tconst onContainerLayout = ( event ) => {\n\t\tconst { height, width } = event.nativeEvent.layout;\n\n\t\tif (\n\t\t\twidth !== 0 &&\n\t\t\theight !== 0 &&\n\t\t\t( containerSize?.width !== width ||\n\t\t\t\tcontainerSize?.height !== height )\n\t\t) {\n\t\t\tsetContainerSize( { width, height } );\n\t\t}\n\t};\n\n\tconst getIcon = ( iconType ) => {\n\t\tlet iconStyle;\n\t\tswitch ( iconType ) {\n\t\t\tcase ICON_TYPE.RETRY:\n\t\t\t\treturn (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ retryIcon || SvgIconRetry }\n\t\t\t\t\t\t{ ...styles.iconRetry }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase ICON_TYPE.PLACEHOLDER:\n\t\t\t\ticonStyle = iconPlaceholderStyles;\n\t\t\t\tbreak;\n\t\t\tcase ICON_TYPE.UPLOAD:\n\t\t\t\ticonStyle = iconUploadStyles;\n\t\t\t\tbreak;\n\t\t}\n\t\treturn <Icon icon={ icon } { ...iconStyle } />;\n\t};\n\n\tconst iconPlaceholderStyles = usePreferredColorSchemeStyle(\n\t\tstyles.iconPlaceholder,\n\t\tstyles.iconPlaceholderDark\n\t);\n\n\tconst iconUploadStyles = usePreferredColorSchemeStyle(\n\t\tstyles.iconUpload,\n\t\tstyles.iconUploadDark\n\t);\n\n\tconst placeholderStyles = [\n\t\tusePreferredColorSchemeStyle(\n\t\t\tstyles.imageContainerUpload,\n\t\t\tstyles.imageContainerUploadDark\n\t\t),\n\t\tfocalPoint && styles.imageContainerUploadWithFocalpoint,\n\t\timageHeight && { height: imageHeight },\n\t];\n\n\tconst customWidth =\n\t\timageData?.width < containerSize?.width\n\t\t\t? imageData?.width\n\t\t\t: styles.wide?.width;\n\n\tconst imageContainerStyles = [\n\t\tstyles.imageContent,\n\t\t{\n\t\t\twidth:\n\t\t\t\timageWidth === styles.wide?.width ||\n\t\t\t\t( imageData &&\n\t\t\t\t\timageWidth > 0 &&\n\t\t\t\t\timageWidth < containerSize?.width )\n\t\t\t\t\t? imageWidth\n\t\t\t\t\t: customWidth,\n\t\t},\n\t\tresizeMode && { width: styles.wide?.width },\n\t\tfocalPoint && styles.focalPointContainer,\n\t];\n\n\tconst imageStyles = [\n\t\t{\n\t\t\topacity: isUploadInProgress ? 0.3 : 1,\n\t\t\theight: containerSize?.height,\n\t\t},\n\t\tfocalPoint && styles.focalPoint,\n\t\tfocalPoint &&\n\t\t\tgetImageWithFocalPointStyles(\n\t\t\t\tfocalPoint,\n\t\t\t\tcontainerSize,\n\t\t\t\timageData\n\t\t\t),\n\t\t! focalPoint &&\n\t\t\timageData &&\n\t\t\tcontainerSize && {\n\t\t\t\theight:\n\t\t\t\t\timageData?.width > containerSize?.width\n\t\t\t\t\t\t? containerSize?.width / imageData?.aspectRatio\n\t\t\t\t\t\t: undefined,\n\t\t\t},\n\t\timageHeight && { height: imageHeight },\n\t\tshapeStyle,\n\t];\n\n\treturn (\n\t\t<View\n\t\t\tstyle={ [\n\t\t\t\tstyles.container,\n\t\t\t\t// Only set alignItems if an image exists because alignItems causes the placeholder\n\t\t\t\t// to disappear when an aligned image can't be downloaded\n\t\t\t\t// https://github.com/wordpress-mobile/gutenberg-mobile/issues/1592\n\t\t\t\timageData && align && { alignItems: align },\n\t\t\t\tstyle,\n\t\t\t] }\n\t\t\tonLayout={ onContainerLayout }\n\t\t>\n\t\t\t<View\n\t\t\t\taccessible\n\t\t\t\tdisabled={ ! isSelected }\n\t\t\t\taccessibilityLabel={ alt }\n\t\t\t\taccessibilityHint={ __( 'Double tap and hold to edit' ) }\n\t\t\t\taccessibilityRole={ 'imagebutton' }\n\t\t\t\tkey={ url }\n\t\t\t\tstyle={ imageContainerStyles }\n\t\t\t>\n\t\t\t\t{ isSelected &&\n\t\t\t\t\thighlightSelected &&\n\t\t\t\t\t! ( isUploadInProgress || isUploadFailed ) && (\n\t\t\t\t\t\t<View\n\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\tstyles.imageBorder,\n\t\t\t\t\t\t\t\t{ height: containerSize?.height },\n\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t{ ! imageData ? (\n\t\t\t\t\t<View style={ placeholderStyles }>\n\t\t\t\t\t\t<View style={ styles.imageUploadingIconContainer }>\n\t\t\t\t\t\t\t{ getIcon( ICON_TYPE.UPLOAD ) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</View>\n\t\t\t\t) : (\n\t\t\t\t\t<View style={ focalPoint && styles.focalPointContent }>\n\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t{ ...( ! resizeMode && {\n\t\t\t\t\t\t\t\taspectRatio: imageData?.aspectRatio,\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\tstyle={ imageStyles }\n\t\t\t\t\t\t\tsource={ { uri: url } }\n\t\t\t\t\t\t\t{ ...( ! focalPoint && {\n\t\t\t\t\t\t\t\tresizeMethod: 'scale',\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\tresizeMode={ resizeMode }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</View>\n\t\t\t\t) }\n\n\t\t\t\t{ isUploadFailed && retryMessage && (\n\t\t\t\t\t<View\n\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\tstyles.imageContainer,\n\t\t\t\t\t\t\tstyles.retryContainer,\n\t\t\t\t\t\t] }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View\n\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\tstyles.retryIcon,\n\t\t\t\t\t\t\t\tretryIcon && styles.customRetryIcon,\n\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ getIcon( ICON_TYPE.RETRY ) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t\t<Text style={ styles.uploadFailedText }>\n\t\t\t\t\t\t\t{ retryMessage }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</View>\n\t\t\t\t) }\n\t\t\t</View>\n\n\t\t\t{ editButton && isSelected && ! isUploadInProgress && (\n\t\t\t\t<ImageEditingButton\n\t\t\t\t\tonSelectMediaUploadOption={ onSelectMediaUploadOption }\n\t\t\t\t\topenMediaOptions={ openMediaOptions }\n\t\t\t\t\turl={ ! isUploadFailed && imageData && url }\n\t\t\t\t\tpickerOptions={ mediaPickerOptions }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</View>\n\t);\n};\n\nexport default ImageComponent;\n"]}
+{"version":3,"sources":["@wordpress/components/src/mobile/image/index.native.js"],"names":["ICON_TYPE","PLACEHOLDER","RETRY","UPLOAD","IMAGE_DEFAULT_FOCAL_POINT","x","y","ImageComponent","align","alt","editButton","focalPoint","height","imageHeight","highlightSelected","isSelected","isUploadFailed","isUploadInProgress","mediaPickerOptions","onImageDataLoad","onSelectMediaUploadOption","openMediaOptions","resizeMode","retryMessage","retryIcon","url","shapeStyle","style","width","imageWidth","imageData","setImageData","containerSize","setContainerSize","isCurrent","Image","getSize","imgWidth","imgHeight","metaData","aspectRatio","onContainerLayout","event","nativeEvent","layout","getIcon","iconType","iconStyle","SvgIconRetry","styles","iconRetry","iconPlaceholderStyles","iconUploadStyles","icon","iconPlaceholder","iconPlaceholderDark","iconUpload","iconUploadDark","placeholderStyles","imageContainerUpload","imageContainerUploadDark","imageContainerUploadWithFocalpoint","customWidth","wide","imageContainerStyles","imageContent","focalPointContainer","imageStyles","opacity","undefined","container","alignItems","imageBorder","imageUploadingIconContainer","focalPointContent","uri","resizeMethod","FastImage","imageContainer","retryContainer","customRetryIcon","uploadFailedText"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { Image, Text, View } from 'react-native';\nimport FastImage from 'react-native-fast-image';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Icon } from '@wordpress/components';\nimport { image as icon } from '@wordpress/icons';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getImageWithFocalPointStyles } from './utils';\nimport styles from './style.scss';\nimport SvgIconRetry from './icon-retry';\nimport ImageEditingButton from './image-editing-button';\n\nconst ICON_TYPE = {\n\tPLACEHOLDER: 'placeholder',\n\tRETRY: 'retry',\n\tUPLOAD: 'upload',\n};\n\nexport const IMAGE_DEFAULT_FOCAL_POINT = { x: 0.5, y: 0.5 };\n\nconst ImageComponent = ( {\n\talign,\n\talt,\n\teditButton = true,\n\tfocalPoint,\n\theight: imageHeight,\n\thighlightSelected = true,\n\tisSelected,\n\tisUploadFailed,\n\tisUploadInProgress,\n\tmediaPickerOptions,\n\tonImageDataLoad,\n\tonSelectMediaUploadOption,\n\topenMediaOptions,\n\tresizeMode,\n\tretryMessage,\n\tretryIcon,\n\turl,\n\tshapeStyle,\n\tstyle,\n\twidth: imageWidth,\n} ) => {\n\tconst [ imageData, setImageData ] = useState( null );\n\tconst [ containerSize, setContainerSize ] = useState( null );\n\n\tuseEffect( () => {\n\t\tlet isCurrent = true;\n\t\tif ( url ) {\n\t\t\tImage.getSize( url, ( imgWidth, imgHeight ) => {\n\t\t\t\tif ( ! isCurrent ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst metaData = {\n\t\t\t\t\taspectRatio: imgWidth / imgHeight,\n\t\t\t\t\twidth: imgWidth,\n\t\t\t\t\theight: imgHeight,\n\t\t\t\t};\n\t\t\t\tsetImageData( metaData );\n\t\t\t\tif ( onImageDataLoad ) {\n\t\t\t\t\tonImageDataLoad( metaData );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t\treturn () => ( isCurrent = false );\n\t}, [ url ] );\n\n\tconst onContainerLayout = ( event ) => {\n\t\tconst { height, width } = event.nativeEvent.layout;\n\n\t\tif (\n\t\t\twidth !== 0 &&\n\t\t\theight !== 0 &&\n\t\t\t( containerSize?.width !== width ||\n\t\t\t\tcontainerSize?.height !== height )\n\t\t) {\n\t\t\tsetContainerSize( { width, height } );\n\t\t}\n\t};\n\n\tconst getIcon = ( iconType ) => {\n\t\tlet iconStyle;\n\t\tswitch ( iconType ) {\n\t\t\tcase ICON_TYPE.RETRY:\n\t\t\t\treturn (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ retryIcon || SvgIconRetry }\n\t\t\t\t\t\t{ ...styles.iconRetry }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase ICON_TYPE.PLACEHOLDER:\n\t\t\t\ticonStyle = iconPlaceholderStyles;\n\t\t\t\tbreak;\n\t\t\tcase ICON_TYPE.UPLOAD:\n\t\t\t\ticonStyle = iconUploadStyles;\n\t\t\t\tbreak;\n\t\t}\n\t\treturn <Icon icon={ icon } { ...iconStyle } />;\n\t};\n\n\tconst iconPlaceholderStyles = usePreferredColorSchemeStyle(\n\t\tstyles.iconPlaceholder,\n\t\tstyles.iconPlaceholderDark\n\t);\n\n\tconst iconUploadStyles = usePreferredColorSchemeStyle(\n\t\tstyles.iconUpload,\n\t\tstyles.iconUploadDark\n\t);\n\n\tconst placeholderStyles = [\n\t\tusePreferredColorSchemeStyle(\n\t\t\tstyles.imageContainerUpload,\n\t\t\tstyles.imageContainerUploadDark\n\t\t),\n\t\tfocalPoint && styles.imageContainerUploadWithFocalpoint,\n\t\timageHeight && { height: imageHeight },\n\t];\n\n\tconst customWidth =\n\t\timageData?.width < containerSize?.width\n\t\t\t? imageData?.width\n\t\t\t: styles.wide?.width;\n\n\tconst imageContainerStyles = [\n\t\tstyles.imageContent,\n\t\t{\n\t\t\twidth:\n\t\t\t\timageWidth === styles.wide?.width ||\n\t\t\t\t( imageData &&\n\t\t\t\t\timageWidth > 0 &&\n\t\t\t\t\timageWidth < containerSize?.width )\n\t\t\t\t\t? imageWidth\n\t\t\t\t\t: customWidth,\n\t\t},\n\t\tresizeMode && { width: styles.wide?.width },\n\t\tfocalPoint && styles.focalPointContainer,\n\t];\n\n\tconst imageStyles = [\n\t\t{\n\t\t\topacity: isUploadInProgress ? 0.3 : 1,\n\t\t\theight: containerSize?.height,\n\t\t},\n\t\tfocalPoint && styles.focalPoint,\n\t\tfocalPoint &&\n\t\t\tgetImageWithFocalPointStyles(\n\t\t\t\tfocalPoint,\n\t\t\t\tcontainerSize,\n\t\t\t\timageData\n\t\t\t),\n\t\t! focalPoint &&\n\t\t\timageData &&\n\t\t\tcontainerSize && {\n\t\t\t\theight:\n\t\t\t\t\timageData?.width > containerSize?.width\n\t\t\t\t\t\t? containerSize?.width / imageData?.aspectRatio\n\t\t\t\t\t\t: undefined,\n\t\t\t},\n\t\timageHeight && { height: imageHeight },\n\t\tshapeStyle,\n\t];\n\n\treturn (\n\t\t<View\n\t\t\tstyle={ [\n\t\t\t\tstyles.container,\n\t\t\t\t// Only set alignItems if an image exists because alignItems causes the placeholder\n\t\t\t\t// to disappear when an aligned image can't be downloaded\n\t\t\t\t// https://github.com/wordpress-mobile/gutenberg-mobile/issues/1592\n\t\t\t\timageData && align && { alignItems: align },\n\t\t\t\tstyle,\n\t\t\t] }\n\t\t\tonLayout={ onContainerLayout }\n\t\t>\n\t\t\t<View\n\t\t\t\taccessible\n\t\t\t\tdisabled={ ! isSelected }\n\t\t\t\taccessibilityLabel={ alt }\n\t\t\t\taccessibilityHint={ __( 'Double tap and hold to edit' ) }\n\t\t\t\taccessibilityRole={ 'imagebutton' }\n\t\t\t\tkey={ url }\n\t\t\t\tstyle={ imageContainerStyles }\n\t\t\t>\n\t\t\t\t{ isSelected &&\n\t\t\t\t\thighlightSelected &&\n\t\t\t\t\t! ( isUploadInProgress || isUploadFailed ) && (\n\t\t\t\t\t\t<View\n\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\tstyles.imageBorder,\n\t\t\t\t\t\t\t\t{ height: containerSize?.height },\n\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t{ ! imageData ? (\n\t\t\t\t\t<View style={ placeholderStyles }>\n\t\t\t\t\t\t<View style={ styles.imageUploadingIconContainer }>\n\t\t\t\t\t\t\t{ getIcon( ICON_TYPE.UPLOAD ) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</View>\n\t\t\t\t) : (\n\t\t\t\t\t<View style={ focalPoint && styles.focalPointContent }>\n\t\t\t\t\t\t<FastImage\n\t\t\t\t\t\t\t{ ...( ! resizeMode && {\n\t\t\t\t\t\t\t\taspectRatio: imageData?.aspectRatio,\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\tstyle={ imageStyles }\n\t\t\t\t\t\t\tsource={ { uri: url } }\n\t\t\t\t\t\t\t{ ...( ! focalPoint && {\n\t\t\t\t\t\t\t\tresizeMethod: 'scale',\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\tresizeMode={ FastImage.resizeMode[ resizeMode ] }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</View>\n\t\t\t\t) }\n\n\t\t\t\t{ isUploadFailed && retryMessage && (\n\t\t\t\t\t<View\n\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\tstyles.imageContainer,\n\t\t\t\t\t\t\tstyles.retryContainer,\n\t\t\t\t\t\t] }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View\n\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\tstyles.retryIcon,\n\t\t\t\t\t\t\t\tretryIcon && styles.customRetryIcon,\n\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ getIcon( ICON_TYPE.RETRY ) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t\t<Text style={ styles.uploadFailedText }>\n\t\t\t\t\t\t\t{ retryMessage }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</View>\n\t\t\t\t) }\n\t\t\t</View>\n\n\t\t\t{ editButton && isSelected && ! isUploadInProgress && (\n\t\t\t\t<ImageEditingButton\n\t\t\t\t\tonSelectMediaUploadOption={ onSelectMediaUploadOption }\n\t\t\t\t\topenMediaOptions={ openMediaOptions }\n\t\t\t\t\turl={ ! isUploadFailed && imageData && url }\n\t\t\t\t\tpickerOptions={ mediaPickerOptions }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</View>\n\t);\n};\n\nexport default ImageComponent;\n"]}

package/build/modal/index.js

@@ -81,6 +81,7 @@ function Modal(props, forwardedRef) {
   const constrainedTabbingRef = (0, _compose.useConstrainedTabbing)();
   const focusReturnRef = (0, _compose.useFocusReturn)();
   const focusOutsideProps = (0, _compose.__experimentalUseFocusOutside)(onRequestClose);
+  const [hasScrolledContent, setHasScrolledContent] = (0, _element.useState)(false);
   (0, _element.useEffect)(() => {
     openModalCount++;
 
@@ -109,6 +110,17 @@ function Modal(props, forwardedRef) {
     }
   }
 
+  const onContentContainerScroll = (0, _element.useCallback)(e => {
+    var _e$target$scrollTop, _e$target;
+
+    const scrollY = (_e$target$scrollTop = e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.scrollTop) !== null && _e$target$scrollTop !== void 0 ? _e$target$scrollTop : -1;
+
+    if (!hasScrolledContent && scrollY > 0) {
+      setHasScrolledContent(true);
+    } else if (hasScrolledContent && scrollY <= 0) {
+      setHasScrolledContent(false);
+    }
+  }, [hasScrolledContent]);
   return (0, _element.createPortal)( // eslint-disable-next-line jsx-a11y/no-static-element-interactions
   (0, _element.createElement)("div", {
     ref: (0, _compose.useMergeRefs)([ref, forwardedRef]),
@@ -131,9 +143,11 @@ function Modal(props, forwardedRef) {
     onKeyDown: onKeyDown
   }), (0, _element.createElement)("div", {
     className: (0, _classnames.default)('components-modal__content', {
-      'hide-header': __experimentalHideHeader
+      'hide-header': __experimentalHideHeader,
+      'has-scrolled-content': hasScrolledContent
     }),
-    role: "document"
+    role: "document",
+    onScroll: onContentContainerScroll
   }, !__experimentalHideHeader && (0, _element.createElement)("div", {
     className: "components-modal__header"
   }, (0, _element.createElement)("div", {
@@ -146,7 +160,7 @@ function Modal(props, forwardedRef) {
     className: "components-modal__header-heading"
   }, title)), isDismissible && (0, _element.createElement)(_button.default, {
     onClick: onRequestClose,
-    icon: _icons.closeSmall,
+    icon: _icons.close,
     label: closeButtonLabel || (0, _i18n.__)('Close dialog')
   })), children)))), document.body);
 }