@wordpress/components 19.13.0 → 19.16.0

package/build/elevation/styles.js

@@ -15,7 +15,7 @@ const Elevation = process.env.NODE_ENV === "production" ? {
 } : {
   name: "1n58bsy-Elevation",
   styles: "background:transparent;display:block;margin:0!important;pointer-events:none;position:absolute;will-change:box-shadow;label:Elevation;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZWxldmF0aW9uL3N0eWxlcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLNEIiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9lbGV2YXRpb24vc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5leHBvcnQgY29uc3QgRWxldmF0aW9uID0gY3NzYFxuXHRiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcblx0ZGlzcGxheTogYmxvY2s7XG5cdG1hcmdpbjogMCAhaW1wb3J0YW50O1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR3aWxsLWNoYW5nZTogYm94LXNoYWRvdztcbmA7XG4iXX0= */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZWxldmF0aW9uL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLNEIiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9lbGV2YXRpb24vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5leHBvcnQgY29uc3QgRWxldmF0aW9uID0gY3NzYFxuXHRiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcblx0ZGlzcGxheTogYmxvY2s7XG5cdG1hcmdpbjogMCAhaW1wb3J0YW50O1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR3aWxsLWNoYW5nZTogYm94LXNoYWRvdztcbmA7XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 exports.Elevation = Elevation;

package/build/elevation/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/elevation/styles.js"],"names":["Elevation"],"mappings":";;;;;;;AAGA;;;;AAEO,MAAMA,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\nexport const Elevation = css`\n\tbackground: transparent;\n\tdisplay: block;\n\tmargin: 0 !important;\n\tpointer-events: none;\n\tposition: absolute;\n\twill-change: box-shadow;\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/elevation/styles.ts"],"names":["Elevation"],"mappings":";;;;;;;AAGA;;;;AAEO,MAAMA,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\nexport const Elevation = css`\n\tbackground: transparent;\n\tdisplay: block;\n\tmargin: 0 !important;\n\tpointer-events: none;\n\tposition: absolute;\n\twill-change: box-shadow;\n`;\n"]}

package/build/external-link/index.js

@@ -13,8 +13,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _lodash = require("lodash");
-
 var _i18n = require("@wordpress/i18n");
 
 var _icons = require("@wordpress/icons");
@@ -42,7 +40,7 @@ function UnforwardedExternalLink(props, ref) {
     rel = '',
     ...additionalProps
   } = props;
-  const optimizedRel = (0, _lodash.uniq)((0, _lodash.compact)([...rel.split(' '), 'external', 'noreferrer', 'noopener'])).join(' ');
+  const optimizedRel = [...new Set([...rel.split(' '), 'external', 'noreferrer', 'noopener'].filter(Boolean))].join(' ');
   const classes = (0, _classnames.default)('components-external-link', className);
   return (
     /* eslint-disable react/jsx-no-target-blank */

package/build/external-link/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/external-link/index.tsx"],"names":["UnforwardedExternalLink","props","ref","href","children","className","rel","additionalProps","optimizedRel","split","join","classes","external","ExternalLink"],"mappings":";;;;;;;;;AAWA;;;;AARA;;AACA;;AAMA;;AAEA;;AAKA;;AACA;;AAlBA;AACA;AACA;;AAKA;AACA;AACA;;AAKA;AACA;AACA;AAMA,SAASA,uBAAT,CACCC,KADD,EAKCC,GALD,EAME;AACD,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,QAAR;AAAkBC,IAAAA,SAAlB;AAA6BC,IAAAA,GAAG,GAAG,EAAnC;AAAuC,OAAGC;AAA1C,MAA8DN,KAApE;AACA,QAAMO,YAAY,GAAG,kBACpB,qBAAS,CAAE,GAAGF,GAAG,CAACG,KAAJ,CAAW,GAAX,CAAL,EAAuB,UAAvB,EAAmC,YAAnC,EAAiD,UAAjD,CAAT,CADoB,EAEnBC,IAFmB,CAEb,GAFa,CAArB;AAGA,QAAMC,OAAO,GAAG,yBAAY,0BAAZ,EAAwCN,SAAxC,CAAhB;AACA;AACC;AACA,gEACME,eADN;AAEC,MAAA,SAAS,EAAGI,OAFb;AAGC,MAAA,IAAI,EAAGR,IAHR;AAIC,MAAA,MAAM,EAAC,QAJR;AAKC,MAAA,GAAG,EAAGK,YALP;AAMC,MAAA,GAAG,EAAGN;AANP,QAQGE,QARH,EASC,4BAAC,8BAAD;AAAgB,MAAA,EAAE,EAAC;AAAnB;AAEE;AACA,kBAAI,sBAAJ,CAHF,CATD,EAeC,4BAAC,8BAAD;AACC,MAAA,IAAI,EAAGQ,eADR;AAEC,MAAA,SAAS,EAAC;AAFX,MAfD;AAoBA;;AAtBD;AAwBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMC,YAAY,GAAG,yBAAYb,uBAAZ,CAArB;;eAEQa,Y","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { compact, uniq } from 'lodash';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { forwardRef } from '@wordpress/element';\nimport { external } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport { StyledIcon } from './styles/external-link-styles';\nimport type { ExternalLinkProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nfunction UnforwardedExternalLink(\n\tprops: Omit<\n\t\tWordPressComponentProps< ExternalLinkProps, 'a', false >,\n\t\t'target'\n\t>,\n\tref: ForwardedRef< HTMLAnchorElement >\n) {\n\tconst { href, children, className, rel = '', ...additionalProps } = props;\n\tconst optimizedRel = uniq(\n\t\tcompact( [ ...rel.split( ' ' ), 'external', 'noreferrer', 'noopener' ] )\n\t).join( ' ' );\n\tconst classes = classnames( 'components-external-link', className );\n\treturn (\n\t\t/* eslint-disable react/jsx-no-target-blank */\n\t\t<a\n\t\t\t{ ...additionalProps }\n\t\t\tclassName={ classes }\n\t\t\thref={ href }\n\t\t\ttarget=\"_blank\"\n\t\t\trel={ optimizedRel }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t{ children }\n\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t{\n\t\t\t\t\t/* translators: accessibility text */\n\t\t\t\t\t__( '(opens in a new tab)' )\n\t\t\t\t}\n\t\t\t</VisuallyHidden>\n\t\t\t<StyledIcon\n\t\t\t\ticon={ external }\n\t\t\t\tclassName=\"components-external-link__icon\"\n\t\t\t/>\n\t\t</a>\n\t\t/* eslint-enable react/jsx-no-target-blank */\n\t);\n}\n\n/**\n * Link to an external resource.\n *\n * ```jsx\n * import { ExternalLink } from '@wordpress/components';\n *\n * const MyExternalLink = () => (\n *   <ExternalLink href=\"https://wordpress.org\">WordPress.org</ExternalLink>\n * );\n * ```\n */\nexport const ExternalLink = forwardRef( UnforwardedExternalLink );\n\nexport default ExternalLink;\n"]}
+{"version":3,"sources":["@wordpress/components/src/external-link/index.tsx"],"names":["UnforwardedExternalLink","props","ref","href","children","className","rel","additionalProps","optimizedRel","Set","split","filter","Boolean","join","classes","external","ExternalLink"],"mappings":";;;;;;;;;AAUA;;;;AAPA;;AAMA;;AAEA;;AAKA;;AACA;;AAjBA;AACA;AACA;;AAIA;AACA;AACA;;AAKA;AACA;AACA;AAMA,SAASA,uBAAT,CACCC,KADD,EAKCC,GALD,EAME;AACD,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,QAAR;AAAkBC,IAAAA,SAAlB;AAA6BC,IAAAA,GAAG,GAAG,EAAnC;AAAuC,OAAGC;AAA1C,MAA8DN,KAApE;AACA,QAAMO,YAAY,GAAG,CACpB,GAAG,IAAIC,GAAJ,CACF,CACC,GAAGH,GAAG,CAACI,KAAJ,CAAW,GAAX,CADJ,EAEC,UAFD,EAGC,YAHD,EAIC,UAJD,EAKEC,MALF,CAKUC,OALV,CADE,CADiB,EASnBC,IATmB,CASb,GATa,CAArB;AAUA,QAAMC,OAAO,GAAG,yBAAY,0BAAZ,EAAwCT,SAAxC,CAAhB;AACA;AACC;AACA,gEACME,eADN;AAEC,MAAA,SAAS,EAAGO,OAFb;AAGC,MAAA,IAAI,EAAGX,IAHR;AAIC,MAAA,MAAM,EAAC,QAJR;AAKC,MAAA,GAAG,EAAGK,YALP;AAMC,MAAA,GAAG,EAAGN;AANP,QAQGE,QARH,EASC,4BAAC,8BAAD;AAAgB,MAAA,EAAE,EAAC;AAAnB;AAEE;AACA,kBAAI,sBAAJ,CAHF,CATD,EAeC,4BAAC,8BAAD;AACC,MAAA,IAAI,EAAGW,eADR;AAEC,MAAA,SAAS,EAAC;AAFX,MAfD;AAoBA;;AAtBD;AAwBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMC,YAAY,GAAG,yBAAYhB,uBAAZ,CAArB;;eAEQgB,Y","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { forwardRef } from '@wordpress/element';\nimport { external } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport { StyledIcon } from './styles/external-link-styles';\nimport type { ExternalLinkProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nfunction UnforwardedExternalLink(\n\tprops: Omit<\n\t\tWordPressComponentProps< ExternalLinkProps, 'a', false >,\n\t\t'target'\n\t>,\n\tref: ForwardedRef< HTMLAnchorElement >\n) {\n\tconst { href, children, className, rel = '', ...additionalProps } = props;\n\tconst optimizedRel = [\n\t\t...new Set(\n\t\t\t[\n\t\t\t\t...rel.split( ' ' ),\n\t\t\t\t'external',\n\t\t\t\t'noreferrer',\n\t\t\t\t'noopener',\n\t\t\t].filter( Boolean )\n\t\t),\n\t].join( ' ' );\n\tconst classes = classnames( 'components-external-link', className );\n\treturn (\n\t\t/* eslint-disable react/jsx-no-target-blank */\n\t\t<a\n\t\t\t{ ...additionalProps }\n\t\t\tclassName={ classes }\n\t\t\thref={ href }\n\t\t\ttarget=\"_blank\"\n\t\t\trel={ optimizedRel }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t{ children }\n\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t{\n\t\t\t\t\t/* translators: accessibility text */\n\t\t\t\t\t__( '(opens in a new tab)' )\n\t\t\t\t}\n\t\t\t</VisuallyHidden>\n\t\t\t<StyledIcon\n\t\t\t\ticon={ external }\n\t\t\t\tclassName=\"components-external-link__icon\"\n\t\t\t/>\n\t\t</a>\n\t\t/* eslint-enable react/jsx-no-target-blank */\n\t);\n}\n\n/**\n * Link to an external resource.\n *\n * ```jsx\n * import { ExternalLink } from '@wordpress/components';\n *\n * const MyExternalLink = () => (\n *   <ExternalLink href=\"https://wordpress.org\">WordPress.org</ExternalLink>\n * );\n * ```\n */\nexport const ExternalLink = forwardRef( UnforwardedExternalLink );\n\nexport default ExternalLink;\n"]}

package/build/flex/flex/component.js

@@ -50,27 +50,21 @@ function Flex(props, forwardedRef) {
  *
  * @example
  * ```jsx
- * import {
- * 	__experimentalFlex as Flex,
- * 	__experimentalFlexBlock as FlexBlock,
- * 	__experimentalFlexItem as FlexItem,
- * 	__experimentalText as Text
- * } from `@wordpress/components`;
+ * import { Flex, FlexBlock, FlexItem } from '@wordpress/components';
  *
  * function Example() {
- * 	return (
- * 		<Flex>
- * 			<FlexItem>
- * 				<Text>Code</Text>
- * 			</FlexItem>
- * 			<FlexBlock>
- * 				<Text>Poetry</Text>
- * 			</FlexBlock>
- * 		</Flex>
- * 	);
+ *   return (
+ *     <Flex>
+ *       <FlexItem>
+ *         <p>Code</p>
+ *       </FlexItem>
+ *       <FlexBlock>
+ *         <p>Poetry</p>
+ *       </FlexBlock>
+ *     </Flex>
+ *   );
  * }
  * ```
- *
  */
 
 

package/build/flex/flex/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/flex/flex/component.js"],"names":["Flex","props","forwardedRef","children","isColumn","otherProps","flexItemDisplay","undefined","ConnectedFlex"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AANA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA,SAASA,IAAT,CAAeC,KAAf,EAAsBC,YAAtB,EAAqC;AACpC,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,QAAZ;AAAsB,OAAGC;AAAzB,MAAwC,mBAASJ,KAAT,CAA9C;AAEA,SACC,4BAAC,qBAAD,CAAa,QAAb;AACC,IAAA,KAAK,EAAG;AAAEK,MAAAA,eAAe,EAAEF,QAAQ,GAAG,OAAH,GAAaG;AAAxC;AADT,KAGC,4BAAC,UAAD,6BAAWF,UAAX;AAAwB,IAAA,GAAG,EAAGH;AAA9B,MACGC,QADH,CAHD,CADD;AASA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMK,aAAa,GAAG,6BAAgBR,IAAhB,EAAsB,MAAtB,CAAtB;eAEeQ,a","sourcesContent":["/**\n * Internal dependencies\n */\nimport { contextConnect } from '../../ui/context';\nimport { useFlex } from './hook';\nimport { FlexContext } from './../context';\nimport { View } from '../../view';\n\n/**\n * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} props\n * @param {import('react').ForwardedRef<any>}                                                       forwardedRef\n */\nfunction Flex( props, forwardedRef ) {\n\tconst { children, isColumn, ...otherProps } = useFlex( props );\n\n\treturn (\n\t\t<FlexContext.Provider\n\t\t\tvalue={ { flexItemDisplay: isColumn ? 'block' : undefined } }\n\t\t>\n\t\t\t<View { ...otherProps } ref={ forwardedRef }>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</FlexContext.Provider>\n\t);\n}\n\n/**\n * `Flex` is a primitive layout component that adaptively aligns child content\n * horizontally or vertically. `Flex` powers components like `HStack` and\n * `VStack`.\n *\n * `Flex` is used with any of it's two sub-components, `FlexItem` and `FlexBlock`.\n *\n * @example\n * ```jsx\n * import {\n * \t__experimentalFlex as Flex,\n * \t__experimentalFlexBlock as FlexBlock,\n * \t__experimentalFlexItem as FlexItem,\n * \t__experimentalText as Text\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<Flex>\n * \t\t\t<FlexItem>\n * \t\t\t\t<Text>Code</Text>\n * \t\t\t</FlexItem>\n * \t\t\t<FlexBlock>\n * \t\t\t\t<Text>Poetry</Text>\n * \t\t\t</FlexBlock>\n * \t\t</Flex>\n * \t);\n * }\n * ```\n *\n */\nconst ConnectedFlex = contextConnect( Flex, 'Flex' );\n\nexport default ConnectedFlex;\n"]}
+{"version":3,"sources":["@wordpress/components/src/flex/flex/component.js"],"names":["Flex","props","forwardedRef","children","isColumn","otherProps","flexItemDisplay","undefined","ConnectedFlex"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AANA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA,SAASA,IAAT,CAAeC,KAAf,EAAsBC,YAAtB,EAAqC;AACpC,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,QAAZ;AAAsB,OAAGC;AAAzB,MAAwC,mBAASJ,KAAT,CAA9C;AAEA,SACC,4BAAC,qBAAD,CAAa,QAAb;AACC,IAAA,KAAK,EAAG;AAAEK,MAAAA,eAAe,EAAEF,QAAQ,GAAG,OAAH,GAAaG;AAAxC;AADT,KAGC,4BAAC,UAAD,6BAAWF,UAAX;AAAwB,IAAA,GAAG,EAAGH;AAA9B,MACGC,QADH,CAHD,CADD;AASA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMK,aAAa,GAAG,6BAAgBR,IAAhB,EAAsB,MAAtB,CAAtB;eAEeQ,a","sourcesContent":["/**\n * Internal dependencies\n */\nimport { contextConnect } from '../../ui/context';\nimport { useFlex } from './hook';\nimport { FlexContext } from './../context';\nimport { View } from '../../view';\n\n/**\n * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} props\n * @param {import('react').ForwardedRef<any>}                                                       forwardedRef\n */\nfunction Flex( props, forwardedRef ) {\n\tconst { children, isColumn, ...otherProps } = useFlex( props );\n\n\treturn (\n\t\t<FlexContext.Provider\n\t\t\tvalue={ { flexItemDisplay: isColumn ? 'block' : undefined } }\n\t\t>\n\t\t\t<View { ...otherProps } ref={ forwardedRef }>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</FlexContext.Provider>\n\t);\n}\n\n/**\n * `Flex` is a primitive layout component that adaptively aligns child content\n * horizontally or vertically. `Flex` powers components like `HStack` and\n * `VStack`.\n *\n * `Flex` is used with any of it's two sub-components, `FlexItem` and `FlexBlock`.\n *\n * @example\n * ```jsx\n * import { Flex, FlexBlock, FlexItem } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Flex>\n *       <FlexItem>\n *         <p>Code</p>\n *       </FlexItem>\n *       <FlexBlock>\n *         <p>Poetry</p>\n *       </FlexBlock>\n *     </Flex>\n *   );\n * }\n * ```\n */\nconst ConnectedFlex = contextConnect( Flex, 'Flex' );\n\nexport default ConnectedFlex;\n"]}

package/build/flex/flex-block/component.js

@@ -36,9 +36,15 @@ function FlexBlock(props, forwardedRef) {
  *
  * @example
  * ```jsx
- * <Flex>
- * 	<FlexBlock>...</FlexBlock>
- * </Flex>
+ * import { Flex, FlexBlock } from '@wordpress/components';
+ *
+ * function Example() {
+ *   return (
+ *     <Flex>
+ *       <FlexBlock>...</FlexBlock>
+ *     </Flex>
+ *   );
+ * }
  * ```
  */
 

package/build/flex/flex-block/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/flex/flex-block/component.js"],"names":["FlexBlock","props","forwardedRef","flexBlockProps","ConnectedFlexBlock"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA,SAASA,SAAT,CAAoBC,KAApB,EAA2BC,YAA3B,EAA0C;AACzC,QAAMC,cAAc,GAAG,wBAAcF,KAAd,CAAvB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,cAAX;AAA4B,IAAA,GAAG,EAAGD;AAAlC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,kBAAkB,GAAG,6BAAgBJ,SAAhB,EAA2B,WAA3B,CAA3B;eAEeI,kB","sourcesContent":["/**\n * Internal dependencies\n */\nimport { contextConnect } from '../../ui/context';\nimport { View } from '../../view';\nimport { useFlexBlock } from './hook';\n\n/**\n * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexBlockProps, 'div'>} props\n * @param {import('react').ForwardedRef<any>}                                                            forwardedRef\n */\nfunction FlexBlock( props, forwardedRef ) {\n\tconst flexBlockProps = useFlexBlock( props );\n\n\treturn <View { ...flexBlockProps } ref={ forwardedRef } />;\n}\n\n/**\n * `FlexBlock` is a primitive layout component that adaptively resizes content within layout containers like `Flex`.\n *\n * @example\n * ```jsx\n * <Flex>\n * \t<FlexBlock>...</FlexBlock>\n * </Flex>\n * ```\n */\nconst ConnectedFlexBlock = contextConnect( FlexBlock, 'FlexBlock' );\n\nexport default ConnectedFlexBlock;\n"]}
+{"version":3,"sources":["@wordpress/components/src/flex/flex-block/component.js"],"names":["FlexBlock","props","forwardedRef","flexBlockProps","ConnectedFlexBlock"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA,SAASA,SAAT,CAAoBC,KAApB,EAA2BC,YAA3B,EAA0C;AACzC,QAAMC,cAAc,GAAG,wBAAcF,KAAd,CAAvB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,cAAX;AAA4B,IAAA,GAAG,EAAGD;AAAlC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,kBAAkB,GAAG,6BAAgBJ,SAAhB,EAA2B,WAA3B,CAA3B;eAEeI,kB","sourcesContent":["/**\n * Internal dependencies\n */\nimport { contextConnect } from '../../ui/context';\nimport { View } from '../../view';\nimport { useFlexBlock } from './hook';\n\n/**\n * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexBlockProps, 'div'>} props\n * @param {import('react').ForwardedRef<any>}                                                            forwardedRef\n */\nfunction FlexBlock( props, forwardedRef ) {\n\tconst flexBlockProps = useFlexBlock( props );\n\n\treturn <View { ...flexBlockProps } ref={ forwardedRef } />;\n}\n\n/**\n * `FlexBlock` is a primitive layout component that adaptively resizes content within layout containers like `Flex`.\n *\n * @example\n * ```jsx\n * import { Flex, FlexBlock } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Flex>\n *       <FlexBlock>...</FlexBlock>\n *     </Flex>\n *   );\n * }\n * ```\n */\nconst ConnectedFlexBlock = contextConnect( FlexBlock, 'FlexBlock' );\n\nexport default ConnectedFlexBlock;\n"]}

package/build/flex/flex-item/component.js

@@ -36,9 +36,15 @@ function FlexItem(props, forwardedRef) {
  *
  * @example
  * ```jsx
- * <Flex>
- * 	<FlexItem>...</FlexItem>
- * </Flex>
+ * import { Flex, FlexItem } from '@wordpress/components';
+ *
+ * function Example() {
+ *   return (
+ *     <Flex>
+ *       <FlexItem>...</FlexItem>
+ *     </Flex>
+ *   );
+ * }
  * ```
  */
 

package/build/flex/flex-item/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/flex/flex-item/component.js"],"names":["FlexItem","props","forwardedRef","flexItemProps","ConnectedFlexItem"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA,SAASA,QAAT,CAAmBC,KAAnB,EAA0BC,YAA1B,EAAyC;AACxC,QAAMC,aAAa,GAAG,uBAAaF,KAAb,CAAtB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,aAAX;AAA2B,IAAA,GAAG,EAAGD;AAAjC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,iBAAiB,GAAG,6BAAgBJ,QAAhB,EAA0B,UAA1B,CAA1B;eAEeI,iB","sourcesContent":["/**\n * Internal dependencies\n */\nimport { contextConnect } from '../../ui/context';\nimport { View } from '../../view';\nimport { useFlexItem } from './hook';\n\n/**\n * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexItemProps, 'div'>} props\n * @param {import('react').ForwardedRef<any>}                                                           forwardedRef\n */\nfunction FlexItem( props, forwardedRef ) {\n\tconst flexItemProps = useFlexItem( props );\n\n\treturn <View { ...flexItemProps } ref={ forwardedRef } />;\n}\n\n/**\n * `FlexItem` is a primitive layout component that aligns content within layout containers like `Flex`.\n *\n * @example\n * ```jsx\n * <Flex>\n * \t<FlexItem>...</FlexItem>\n * </Flex>\n * ```\n */\nconst ConnectedFlexItem = contextConnect( FlexItem, 'FlexItem' );\n\nexport default ConnectedFlexItem;\n"]}
+{"version":3,"sources":["@wordpress/components/src/flex/flex-item/component.js"],"names":["FlexItem","props","forwardedRef","flexItemProps","ConnectedFlexItem"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA,SAASA,QAAT,CAAmBC,KAAnB,EAA0BC,YAA1B,EAAyC;AACxC,QAAMC,aAAa,GAAG,uBAAaF,KAAb,CAAtB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,aAAX;AAA2B,IAAA,GAAG,EAAGD;AAAjC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,iBAAiB,GAAG,6BAAgBJ,QAAhB,EAA0B,UAA1B,CAA1B;eAEeI,iB","sourcesContent":["/**\n * Internal dependencies\n */\nimport { contextConnect } from '../../ui/context';\nimport { View } from '../../view';\nimport { useFlexItem } from './hook';\n\n/**\n * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexItemProps, 'div'>} props\n * @param {import('react').ForwardedRef<any>}                                                           forwardedRef\n */\nfunction FlexItem( props, forwardedRef ) {\n\tconst flexItemProps = useFlexItem( props );\n\n\treturn <View { ...flexItemProps } ref={ forwardedRef } />;\n}\n\n/**\n * `FlexItem` is a primitive layout component that aligns content within layout containers like `Flex`.\n *\n * @example\n * ```jsx\n * import { Flex, FlexItem } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Flex>\n *       <FlexItem>...</FlexItem>\n *     </Flex>\n *   );\n * }\n * ```\n */\nconst ConnectedFlexItem = contextConnect( FlexItem, 'FlexItem' );\n\nexport default ConnectedFlexItem;\n"]}

package/build/focal-point-picker/grid.js

@@ -22,11 +22,6 @@ var _hooks = require("../utils/hooks");
 /**
  * Internal dependencies
  */
-const {
-  clearTimeout,
-  setTimeout
-} = typeof window !== 'undefined' ? window : {};
-
 function FocalPointPickerGrid(_ref) {
   let {
     bounds = {},
@@ -70,10 +65,10 @@ function useRevealAnimation(value) {
   const [isActive, setIsActive] = (0, _element.useState)(false);
   (0, _hooks.useUpdateEffect)(() => {
     setIsActive(true);
-    const timeout = setTimeout(() => {
+    const timeout = window.setTimeout(() => {
       setIsActive(false);
     }, 600);
-    return () => clearTimeout(timeout);
+    return () => window.clearTimeout(timeout);
   }, [value]);
   return {
     isActive

package/build/focal-point-picker/grid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/grid.js"],"names":["clearTimeout","setTimeout","window","FocalPointPickerGrid","bounds","value","props","animationProps","useRevealAnimation","style","width","height","top","left","isActive","setIsActive","timeout"],"mappings":";;;;;;;;;AAGA;;;;AAKA;;AAKA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;AAQA,MAAM;AAAEA,EAAAA,YAAF;AAAgBC,EAAAA;AAAhB,IACL,OAAOC,MAAP,KAAkB,WAAlB,GAAgCA,MAAhC,GAAyC,EAD1C;;AAGe,SAASC,oBAAT,OAIX;AAAA,MAJ0C;AAC7CC,IAAAA,MAAM,GAAG,EADoC;AAE7CC,IAAAA,KAF6C;AAG7C,OAAGC;AAH0C,GAI1C;AACH,QAAMC,cAAc,GAAGC,kBAAkB,CAAEH,KAAF,CAAzC;AACA,QAAMI,KAAK,GAAG;AACbC,IAAAA,KAAK,EAAEN,MAAM,CAACM,KADD;AAEbC,IAAAA,MAAM,EAAEP,MAAM,CAACO;AAFF,GAAd;AAKA,SACC,4BAAC,+BAAD,6BACML,KADN,EAEMC,cAFN;AAGC,IAAA,SAAS,EAAC,qCAHX;AAIC,IAAA,KAAK,EAAGE;AAJT,MAMC,4BAAC,gCAAD;AAAW,IAAA,KAAK,EAAG;AAAEG,MAAAA,GAAG,EAAE;AAAP;AAAnB,IAND,EAOC,4BAAC,gCAAD;AAAW,IAAA,KAAK,EAAG;AAAEA,MAAAA,GAAG,EAAE;AAAP;AAAnB,IAPD,EAQC,4BAAC,gCAAD;AAAW,IAAA,KAAK,EAAG;AAAEC,MAAAA,IAAI,EAAE;AAAR;AAAnB,IARD,EASC,4BAAC,gCAAD;AAAW,IAAA,KAAK,EAAG;AAAEA,MAAAA,IAAI,EAAE;AAAR;AAAnB,IATD,CADD;AAaA;AAED;AACA;AACA;AACA;AACA;;;AACA,SAASL,kBAAT,CAA6BH,KAA7B,EAAqC;AACpC,QAAM,CAAES,QAAF,EAAYC,WAAZ,IAA4B,uBAAU,KAAV,CAAlC;AAEA,8BAAiB,MAAM;AACtBA,IAAAA,WAAW,CAAE,IAAF,CAAX;AACA,UAAMC,OAAO,GAAGf,UAAU,CAAE,MAAM;AACjCc,MAAAA,WAAW,CAAE,KAAF,CAAX;AACA,KAFyB,EAEvB,GAFuB,CAA1B;AAIA,WAAO,MAAMf,YAAY,CAAEgB,OAAF,CAAzB;AACA,GAPD,EAOG,CAAEX,KAAF,CAPH;AASA,SAAO;AACNS,IAAAA;AADM,GAAP;AAGA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tGridView,\n\tGridLineX,\n\tGridLineY,\n} from './styles/focal-point-picker-style';\nimport { useUpdateEffect } from '../utils/hooks';\n\nconst { clearTimeout, setTimeout } =\n\ttypeof window !== 'undefined' ? window : {};\n\nexport default function FocalPointPickerGrid( {\n\tbounds = {},\n\tvalue,\n\t...props\n} ) {\n\tconst animationProps = useRevealAnimation( value );\n\tconst style = {\n\t\twidth: bounds.width,\n\t\theight: bounds.height,\n\t};\n\n\treturn (\n\t\t<GridView\n\t\t\t{ ...props }\n\t\t\t{ ...animationProps }\n\t\t\tclassName=\"components-focal-point-picker__grid\"\n\t\t\tstyle={ style }\n\t\t>\n\t\t\t<GridLineX style={ { top: '33%' } } />\n\t\t\t<GridLineX style={ { top: '66%' } } />\n\t\t\t<GridLineY style={ { left: '33%' } } />\n\t\t\t<GridLineY style={ { left: '66%' } } />\n\t\t</GridView>\n\t);\n}\n\n/**\n * Custom hook that renders the \"flash\" animation whenever the value changes.\n *\n * @param {string} value Value of (box) side.\n */\nfunction useRevealAnimation( value ) {\n\tconst [ isActive, setIsActive ] = useState( false );\n\n\tuseUpdateEffect( () => {\n\t\tsetIsActive( true );\n\t\tconst timeout = setTimeout( () => {\n\t\t\tsetIsActive( false );\n\t\t}, 600 );\n\n\t\treturn () => clearTimeout( timeout );\n\t}, [ value ] );\n\n\treturn {\n\t\tisActive,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/grid.js"],"names":["FocalPointPickerGrid","bounds","value","props","animationProps","useRevealAnimation","style","width","height","top","left","isActive","setIsActive","timeout","window","setTimeout","clearTimeout"],"mappings":";;;;;;;;;AAGA;;;;AAKA;;AAKA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;AAQe,SAASA,oBAAT,OAIX;AAAA,MAJ0C;AAC7CC,IAAAA,MAAM,GAAG,EADoC;AAE7CC,IAAAA,KAF6C;AAG7C,OAAGC;AAH0C,GAI1C;AACH,QAAMC,cAAc,GAAGC,kBAAkB,CAAEH,KAAF,CAAzC;AACA,QAAMI,KAAK,GAAG;AACbC,IAAAA,KAAK,EAAEN,MAAM,CAACM,KADD;AAEbC,IAAAA,MAAM,EAAEP,MAAM,CAACO;AAFF,GAAd;AAKA,SACC,4BAAC,+BAAD,6BACML,KADN,EAEMC,cAFN;AAGC,IAAA,SAAS,EAAC,qCAHX;AAIC,IAAA,KAAK,EAAGE;AAJT,MAMC,4BAAC,gCAAD;AAAW,IAAA,KAAK,EAAG;AAAEG,MAAAA,GAAG,EAAE;AAAP;AAAnB,IAND,EAOC,4BAAC,gCAAD;AAAW,IAAA,KAAK,EAAG;AAAEA,MAAAA,GAAG,EAAE;AAAP;AAAnB,IAPD,EAQC,4BAAC,gCAAD;AAAW,IAAA,KAAK,EAAG;AAAEC,MAAAA,IAAI,EAAE;AAAR;AAAnB,IARD,EASC,4BAAC,gCAAD;AAAW,IAAA,KAAK,EAAG;AAAEA,MAAAA,IAAI,EAAE;AAAR;AAAnB,IATD,CADD;AAaA;AAED;AACA;AACA;AACA;AACA;;;AACA,SAASL,kBAAT,CAA6BH,KAA7B,EAAqC;AACpC,QAAM,CAAES,QAAF,EAAYC,WAAZ,IAA4B,uBAAU,KAAV,CAAlC;AAEA,8BAAiB,MAAM;AACtBA,IAAAA,WAAW,CAAE,IAAF,CAAX;AACA,UAAMC,OAAO,GAAGC,MAAM,CAACC,UAAP,CAAmB,MAAM;AACxCH,MAAAA,WAAW,CAAE,KAAF,CAAX;AACA,KAFe,EAEb,GAFa,CAAhB;AAIA,WAAO,MAAME,MAAM,CAACE,YAAP,CAAqBH,OAArB,CAAb;AACA,GAPD,EAOG,CAAEX,KAAF,CAPH;AASA,SAAO;AACNS,IAAAA;AADM,GAAP;AAGA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tGridView,\n\tGridLineX,\n\tGridLineY,\n} from './styles/focal-point-picker-style';\nimport { useUpdateEffect } from '../utils/hooks';\n\nexport default function FocalPointPickerGrid( {\n\tbounds = {},\n\tvalue,\n\t...props\n} ) {\n\tconst animationProps = useRevealAnimation( value );\n\tconst style = {\n\t\twidth: bounds.width,\n\t\theight: bounds.height,\n\t};\n\n\treturn (\n\t\t<GridView\n\t\t\t{ ...props }\n\t\t\t{ ...animationProps }\n\t\t\tclassName=\"components-focal-point-picker__grid\"\n\t\t\tstyle={ style }\n\t\t>\n\t\t\t<GridLineX style={ { top: '33%' } } />\n\t\t\t<GridLineX style={ { top: '66%' } } />\n\t\t\t<GridLineY style={ { left: '33%' } } />\n\t\t\t<GridLineY style={ { left: '66%' } } />\n\t\t</GridView>\n\t);\n}\n\n/**\n * Custom hook that renders the \"flash\" animation whenever the value changes.\n *\n * @param {string} value Value of (box) side.\n */\nfunction useRevealAnimation( value ) {\n\tconst [ isActive, setIsActive ] = useState( false );\n\n\tuseUpdateEffect( () => {\n\t\tsetIsActive( true );\n\t\tconst timeout = window.setTimeout( () => {\n\t\t\tsetIsActive( false );\n\t\t}, 600 );\n\n\t\treturn () => window.clearTimeout( timeout );\n\t}, [ value ] );\n\n\treturn {\n\t\tisActive,\n\t};\n}\n"]}

package/build/focal-point-picker/index.native.js

@@ -15,8 +15,6 @@ var _reactNative = require("react-native");
 
 var _reactNativeVideo = _interopRequireDefault(require("react-native-video"));
 
-var _lodash = require("lodash");
-
 var _reactNativeBridge = require("@wordpress/react-native-bridge");
 
 var _i18n = require("@wordpress/i18n");
@@ -33,6 +31,8 @@ var _style = _interopRequireDefault(require("./style.scss"));
 
 var _utils = require("./utils");
 
+var _math = require("../utils/math");
+
 /**
  * External dependencies
  */
@@ -67,8 +67,8 @@ function FocalPointPicker(props) {
   const [displayPlaceholder, setDisplayPlaceholder] = (0, _element.useState)(true);
   const [videoNaturalSize, setVideoNaturalSize] = (0, _element.useState)(null);
   const [tooltipVisible, setTooltipVisible] = (0, _element.useState)(false);
-  let locationPageOffsetX = (0, _element.useRef)().current;
-  let locationPageOffsetY = (0, _element.useRef)().current;
+  const locationPageOffsetX = (0, _element.useRef)();
+  const locationPageOffsetY = (0, _element.useRef)();
   const videoRef = (0, _element.useRef)(null);
   (0, _element.useEffect)(() => {
     (0, _reactNativeBridge.requestFocalPointPickerTooltipShown)(tooltipShown => {
@@ -92,7 +92,7 @@ function FocalPointPicker(props) {
         y: focalPoint.y * containerSize.height
       });
     }
-  }, [focalPoint, containerSize]); // Pan responder to manage drag handle interactivity.
+  }, [focalPoint, containerSize, pan]); // Pan responder to manage drag handle interactivity.
 
   const panResponder = (0, _element.useMemo)(() => _reactNative.PanResponder.create({
     onStartShouldSetPanResponder: () => true,
@@ -107,8 +107,8 @@ function FocalPointPicker(props) {
         pageX,
         pageY
       } = event.nativeEvent;
-      locationPageOffsetX = pageX - x;
-      locationPageOffsetY = pageY - y;
+      locationPageOffsetX.current = pageX - x;
+      locationPageOffsetY.current = pageY - y;
       pan.setValue({
         x,
         y
@@ -137,18 +137,18 @@ function FocalPointPicker(props) {
       // results in inaccurate locationX and locationY coordinates to be
       // reported. https://github.com/facebook/react-native/issues/15290#issuecomment-435494944
 
-      const x = pageX - locationPageOffsetX;
-      const y = pageY - locationPageOffsetY;
+      const x = pageX - locationPageOffsetX.current;
+      const y = pageY - locationPageOffsetY.current;
       onChange({
-        x: (0, _lodash.clamp)(x / (containerSize === null || containerSize === void 0 ? void 0 : containerSize.width), 0, 1).toFixed(2),
-        y: (0, _lodash.clamp)(y / (containerSize === null || containerSize === void 0 ? void 0 : containerSize.height), 0, 1).toFixed(2)
+        x: (0, _math.clamp)(x / (containerSize === null || containerSize === void 0 ? void 0 : containerSize.width), 0, 1).toFixed(2),
+        y: (0, _math.clamp)(y / (containerSize === null || containerSize === void 0 ? void 0 : containerSize.height), 0, 1).toFixed(2)
       }); // Slider (child of RangeCell) is uncontrolled, so we must increment a
       // key to re-mount and sync the pan gesture values to the sliders
       // https://github.com/callstack/react-native-slider/tree/v3.0.3#value
 
       setSliderKey(prevState => prevState + 1);
     }
-  }), [containerSize]);
+  }), [containerSize, pan, onChange, shouldEnableBottomSheetScroll]);
   const mediaBackground = (0, _compose.usePreferredColorSchemeStyle)(_style.default.mediaBackground, _style.default.mediaBackgroundDark);
   const imagePreviewStyles = [displayPlaceholder && _style.default.mediaPlaceholder, _style.default.image];
   const videoPreviewStyles = [{

package/build/focal-point-picker/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/index.native.js"],"names":["MIN_POSITION_VALUE","MAX_POSITION_VALUE","FOCAL_POINT_UNITS","default","label","value","FocalPointPicker","props","focalPoint","onChange","shouldEnableBottomSheetScroll","url","isVideo","containerSize","setContainerSize","sliderKey","setSliderKey","displayPlaceholder","setDisplayPlaceholder","videoNaturalSize","setVideoNaturalSize","tooltipVisible","setTooltipVisible","locationPageOffsetX","current","locationPageOffsetY","videoRef","tooltipShown","pan","Animated","ValueXY","setValue","x","width","y","height","panResponder","PanResponder","create","onStartShouldSetPanResponder","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderGrant","event","locationX","locationY","pageX","pageY","nativeEvent","extractOffset","onPanResponderMove","dx","dy","useNativeDriver","onPanResponderRelease","flattenOffset","toFixed","prevState","mediaBackground","styles","mediaBackgroundDark","imagePreviewStyles","mediaPlaceholder","image","videoPreviewStyles","aspectRatio","opacity","video","focalPointGroupStyles","focalPointGroup","transform","translateX","interpolate","inputRange","outputRange","extrapolate","translateY","FOCAL_POINT_SIZE","focalPointStyles","marginLeft","marginTop","onTooltipPress","onMediaLayout","layout","onImageDataLoad","onVideoLoad","naturalSize","seek","onXCoordinateChange","onYCoordinateChange","container","media","panHandlers","mediaContainer","uri","Math","round"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, PanResponder, View } from 'react-native';\nimport Video from 'react-native-video';\nimport { clamp } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport {\n\trequestFocalPointPickerTooltipShown,\n\tsetFocalPointPickerTooltipShown,\n} from '@wordpress/react-native-bridge';\nimport { __ } from '@wordpress/i18n';\nimport { Image, UnitControl } from '@wordpress/components';\nimport { useRef, useState, useMemo, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport FocalPoint from './focal-point';\nimport Tooltip from './tooltip';\nimport styles from './style.scss';\nimport { isVideoType } from './utils';\n\nconst MIN_POSITION_VALUE = 0;\nconst MAX_POSITION_VALUE = 100;\nconst FOCAL_POINT_UNITS = [ { default: 50, label: '%', value: '%' } ];\n\nfunction FocalPointPicker( props ) {\n\tconst { focalPoint, onChange, shouldEnableBottomSheetScroll, url } = props;\n\n\tconst isVideo = isVideoType( url );\n\n\tconst [ containerSize, setContainerSize ] = useState( null );\n\tconst [ sliderKey, setSliderKey ] = useState( 0 );\n\tconst [ displayPlaceholder, setDisplayPlaceholder ] = useState( true );\n\tconst [ videoNaturalSize, setVideoNaturalSize ] = useState( null );\n\tconst [ tooltipVisible, setTooltipVisible ] = useState( false );\n\n\tlet locationPageOffsetX = useRef().current;\n\tlet locationPageOffsetY = useRef().current;\n\tconst videoRef = useRef( null );\n\n\tuseEffect( () => {\n\t\trequestFocalPointPickerTooltipShown( ( tooltipShown ) => {\n\t\t\tif ( ! tooltipShown ) {\n\t\t\t\tsetTooltipVisible( true );\n\t\t\t\tsetFocalPointPickerTooltipShown( true );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\t// Animated coordinates for drag handle.\n\tconst pan = useRef( new Animated.ValueXY() ).current;\n\n\t/**\n\t * Set drag handle position anytime focal point coordinates change.\n\t * E.g. initial render, dragging range sliders.\n\t */\n\tuseEffect( () => {\n\t\tif ( containerSize ) {\n\t\t\tpan.setValue( {\n\t\t\t\tx: focalPoint.x * containerSize.width,\n\t\t\t\ty: focalPoint.y * containerSize.height,\n\t\t\t} );\n\t\t}\n\t}, [ focalPoint, containerSize ] );\n\n\t// Pan responder to manage drag handle interactivity.\n\tconst panResponder = useMemo(\n\t\t() =>\n\t\t\tPanResponder.create( {\n\t\t\t\tonStartShouldSetPanResponder: () => true,\n\t\t\t\tonStartShouldSetPanResponderCapture: () => true,\n\t\t\t\tonMoveShouldSetPanResponder: () => true,\n\t\t\t\tonMoveShouldSetPanResponderCapture: () => true,\n\n\t\t\t\tonPanResponderGrant: ( event ) => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( false );\n\t\t\t\t\tconst {\n\t\t\t\t\t\tlocationX: x,\n\t\t\t\t\t\tlocationY: y,\n\t\t\t\t\t\tpageX,\n\t\t\t\t\t\tpageY,\n\t\t\t\t\t} = event.nativeEvent;\n\t\t\t\t\tlocationPageOffsetX = pageX - x;\n\t\t\t\t\tlocationPageOffsetY = pageY - y;\n\t\t\t\t\tpan.setValue( { x, y } ); // Set cursor to tap location.\n\t\t\t\t\tpan.extractOffset(); // Set offset to current value.\n\t\t\t\t},\n\t\t\t\t// Move cursor to match delta drag.\n\t\t\t\tonPanResponderMove: Animated.event(\n\t\t\t\t\t[ null, { dx: pan.x, dy: pan.y } ],\n\t\t\t\t\t{ useNativeDriver: false }\n\t\t\t\t),\n\t\t\t\tonPanResponderRelease: ( event ) => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( true );\n\t\t\t\t\tpan.flattenOffset(); // Flatten offset into value.\n\t\t\t\t\tconst { pageX, pageY } = event.nativeEvent;\n\t\t\t\t\t// Ideally, x and y below are merely locationX and locationY from the\n\t\t\t\t\t// nativeEvent. However, we are required to compute these relative\n\t\t\t\t\t// coordinates to workaround a bug affecting Android's PanResponder.\n\t\t\t\t\t// Specifically, dragging the handle outside the bounds of the image\n\t\t\t\t\t// results in inaccurate locationX and locationY coordinates to be\n\t\t\t\t\t// reported. https://github.com/facebook/react-native/issues/15290#issuecomment-435494944\n\t\t\t\t\tconst x = pageX - locationPageOffsetX;\n\t\t\t\t\tconst y = pageY - locationPageOffsetY;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tx: clamp( x / containerSize?.width, 0, 1 ).toFixed( 2 ),\n\t\t\t\t\t\ty: clamp( y / containerSize?.height, 0, 1 ).toFixed(\n\t\t\t\t\t\t\t2\n\t\t\t\t\t\t),\n\t\t\t\t\t} );\n\t\t\t\t\t// Slider (child of RangeCell) is uncontrolled, so we must increment a\n\t\t\t\t\t// key to re-mount and sync the pan gesture values to the sliders\n\t\t\t\t\t// https://github.com/callstack/react-native-slider/tree/v3.0.3#value\n\t\t\t\t\tsetSliderKey( ( prevState ) => prevState + 1 );\n\t\t\t\t},\n\t\t\t} ),\n\t\t[ containerSize ]\n\t);\n\n\tconst mediaBackground = usePreferredColorSchemeStyle(\n\t\tstyles.mediaBackground,\n\t\tstyles.mediaBackgroundDark\n\t);\n\tconst imagePreviewStyles = [\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t\tstyles.image,\n\t];\n\tconst videoPreviewStyles = [\n\t\t{\n\t\t\taspectRatio:\n\t\t\t\tvideoNaturalSize &&\n\t\t\t\tvideoNaturalSize.width / videoNaturalSize.height,\n\t\t\t// Hide Video component since it has black background while loading the source\n\t\t\topacity: displayPlaceholder ? 0 : 1,\n\t\t},\n\t\tstyles.video,\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t];\n\tconst focalPointGroupStyles = [\n\t\tstyles.focalPointGroup,\n\t\t{\n\t\t\ttransform: [\n\t\t\t\t{\n\t\t\t\t\ttranslateX: pan.x.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.width || 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.width || 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttranslateY: pan.y.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.height || 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.height || 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t];\n\tconst FOCAL_POINT_SIZE = 50;\n\tconst focalPointStyles = [\n\t\tstyles.focalPoint,\n\t\t{\n\t\t\theight: FOCAL_POINT_SIZE,\n\t\t\tmarginLeft: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\tmarginTop: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\twidth: FOCAL_POINT_SIZE,\n\t\t},\n\t];\n\n\tconst onTooltipPress = () => setTooltipVisible( false );\n\tconst onMediaLayout = ( 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\tconst onImageDataLoad = () => setDisplayPlaceholder( false );\n\tconst onVideoLoad = ( event ) => {\n\t\tconst { height, width } = event.naturalSize;\n\t\tsetVideoNaturalSize( { height, width } );\n\t\tsetDisplayPlaceholder( false );\n\t\t// Avoid invisible, paused video on Android, presumably related to\n\t\t// https://github.com/react-native-video/react-native-video/issues/1979\n\t\tvideoRef?.current.seek( 0 );\n\t};\n\tconst onXCoordinateChange = ( x ) =>\n\t\tonChange( { x: ( x / 100 ).toFixed( 2 ) } );\n\tconst onYCoordinateChange = ( y ) =>\n\t\tonChange( { y: ( y / 100 ).toFixed( 2 ) } );\n\n\treturn (\n\t\t<View style={ styles.container }>\n\t\t\t<Tooltip onPress={ onTooltipPress } visible={ tooltipVisible }>\n\t\t\t\t<View style={ [ styles.media, mediaBackground ] }>\n\t\t\t\t\t<View\n\t\t\t\t\t\t{ ...panResponder.panHandlers }\n\t\t\t\t\t\tonLayout={ onMediaLayout }\n\t\t\t\t\t\tstyle={ styles.mediaContainer }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! isVideo && (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\teditButton={ false }\n\t\t\t\t\t\t\t\thighlightSelected={ false }\n\t\t\t\t\t\t\t\tisSelected={ ! displayPlaceholder }\n\t\t\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\t\t\tstyle={ imagePreviewStyles }\n\t\t\t\t\t\t\t\tonImageDataLoad={ onImageDataLoad }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ isVideo && (\n\t\t\t\t\t\t\t<Video\n\t\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\t\tpaused\n\t\t\t\t\t\t\t\tdisableFocus\n\t\t\t\t\t\t\t\tonLoad={ onVideoLoad }\n\t\t\t\t\t\t\t\tref={ videoRef }\n\t\t\t\t\t\t\t\tresizeMode=\"contain\"\n\t\t\t\t\t\t\t\tsource={ { uri: url } }\n\t\t\t\t\t\t\t\tstyle={ videoPreviewStyles }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ! displayPlaceholder && (\n\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\t\t\t\tstyle={ focalPointGroupStyles }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Tooltip.Label\n\t\t\t\t\t\t\t\t\ttext={ __( 'Drag to adjust focal point' ) }\n\t\t\t\t\t\t\t\t\tyOffset={ -( FOCAL_POINT_SIZE / 2 ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t\t\t\theight={ styles.focalPoint?.height }\n\t\t\t\t\t\t\t\t\tstyle={ focalPointStyles }\n\t\t\t\t\t\t\t\t\twidth={ styles.focalPoint?.width }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Animated.View>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</View>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `xAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'X-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onXCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.x * 100 ) }\n\t\t\t\t/>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `yAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'Y-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onYCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.y * 100 ) }\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t</View>\n\t);\n}\n\nexport default FocalPointPicker;\n"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/index.native.js"],"names":["MIN_POSITION_VALUE","MAX_POSITION_VALUE","FOCAL_POINT_UNITS","default","label","value","FocalPointPicker","props","focalPoint","onChange","shouldEnableBottomSheetScroll","url","isVideo","containerSize","setContainerSize","sliderKey","setSliderKey","displayPlaceholder","setDisplayPlaceholder","videoNaturalSize","setVideoNaturalSize","tooltipVisible","setTooltipVisible","locationPageOffsetX","locationPageOffsetY","videoRef","tooltipShown","pan","Animated","ValueXY","current","setValue","x","width","y","height","panResponder","PanResponder","create","onStartShouldSetPanResponder","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderGrant","event","locationX","locationY","pageX","pageY","nativeEvent","extractOffset","onPanResponderMove","dx","dy","useNativeDriver","onPanResponderRelease","flattenOffset","toFixed","prevState","mediaBackground","styles","mediaBackgroundDark","imagePreviewStyles","mediaPlaceholder","image","videoPreviewStyles","aspectRatio","opacity","video","focalPointGroupStyles","focalPointGroup","transform","translateX","interpolate","inputRange","outputRange","extrapolate","translateY","FOCAL_POINT_SIZE","focalPointStyles","marginLeft","marginTop","onTooltipPress","onMediaLayout","layout","onImageDataLoad","onVideoLoad","naturalSize","seek","onXCoordinateChange","onYCoordinateChange","container","media","panHandlers","mediaContainer","uri","Math","round"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, PanResponder, View } from 'react-native';\nimport Video from 'react-native-video';\n\n/**\n * WordPress dependencies\n */\nimport {\n\trequestFocalPointPickerTooltipShown,\n\tsetFocalPointPickerTooltipShown,\n} from '@wordpress/react-native-bridge';\nimport { __ } from '@wordpress/i18n';\nimport { Image, UnitControl } from '@wordpress/components';\nimport { useRef, useState, useMemo, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport FocalPoint from './focal-point';\nimport Tooltip from './tooltip';\nimport styles from './style.scss';\nimport { isVideoType } from './utils';\nimport { clamp } from '../utils/math';\n\nconst MIN_POSITION_VALUE = 0;\nconst MAX_POSITION_VALUE = 100;\nconst FOCAL_POINT_UNITS = [ { default: 50, label: '%', value: '%' } ];\n\nfunction FocalPointPicker( props ) {\n\tconst { focalPoint, onChange, shouldEnableBottomSheetScroll, url } = props;\n\n\tconst isVideo = isVideoType( url );\n\n\tconst [ containerSize, setContainerSize ] = useState( null );\n\tconst [ sliderKey, setSliderKey ] = useState( 0 );\n\tconst [ displayPlaceholder, setDisplayPlaceholder ] = useState( true );\n\tconst [ videoNaturalSize, setVideoNaturalSize ] = useState( null );\n\tconst [ tooltipVisible, setTooltipVisible ] = useState( false );\n\n\tconst locationPageOffsetX = useRef();\n\tconst locationPageOffsetY = useRef();\n\tconst videoRef = useRef( null );\n\n\tuseEffect( () => {\n\t\trequestFocalPointPickerTooltipShown( ( tooltipShown ) => {\n\t\t\tif ( ! tooltipShown ) {\n\t\t\t\tsetTooltipVisible( true );\n\t\t\t\tsetFocalPointPickerTooltipShown( true );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\t// Animated coordinates for drag handle.\n\tconst pan = useRef( new Animated.ValueXY() ).current;\n\n\t/**\n\t * Set drag handle position anytime focal point coordinates change.\n\t * E.g. initial render, dragging range sliders.\n\t */\n\tuseEffect( () => {\n\t\tif ( containerSize ) {\n\t\t\tpan.setValue( {\n\t\t\t\tx: focalPoint.x * containerSize.width,\n\t\t\t\ty: focalPoint.y * containerSize.height,\n\t\t\t} );\n\t\t}\n\t}, [ focalPoint, containerSize, pan ] );\n\n\t// Pan responder to manage drag handle interactivity.\n\tconst panResponder = useMemo(\n\t\t() =>\n\t\t\tPanResponder.create( {\n\t\t\t\tonStartShouldSetPanResponder: () => true,\n\t\t\t\tonStartShouldSetPanResponderCapture: () => true,\n\t\t\t\tonMoveShouldSetPanResponder: () => true,\n\t\t\t\tonMoveShouldSetPanResponderCapture: () => true,\n\n\t\t\t\tonPanResponderGrant: ( event ) => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( false );\n\t\t\t\t\tconst {\n\t\t\t\t\t\tlocationX: x,\n\t\t\t\t\t\tlocationY: y,\n\t\t\t\t\t\tpageX,\n\t\t\t\t\t\tpageY,\n\t\t\t\t\t} = event.nativeEvent;\n\t\t\t\t\tlocationPageOffsetX.current = pageX - x;\n\t\t\t\t\tlocationPageOffsetY.current = pageY - y;\n\t\t\t\t\tpan.setValue( { x, y } ); // Set cursor to tap location.\n\t\t\t\t\tpan.extractOffset(); // Set offset to current value.\n\t\t\t\t},\n\t\t\t\t// Move cursor to match delta drag.\n\t\t\t\tonPanResponderMove: Animated.event(\n\t\t\t\t\t[ null, { dx: pan.x, dy: pan.y } ],\n\t\t\t\t\t{ useNativeDriver: false }\n\t\t\t\t),\n\t\t\t\tonPanResponderRelease: ( event ) => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( true );\n\t\t\t\t\tpan.flattenOffset(); // Flatten offset into value.\n\t\t\t\t\tconst { pageX, pageY } = event.nativeEvent;\n\t\t\t\t\t// Ideally, x and y below are merely locationX and locationY from the\n\t\t\t\t\t// nativeEvent. However, we are required to compute these relative\n\t\t\t\t\t// coordinates to workaround a bug affecting Android's PanResponder.\n\t\t\t\t\t// Specifically, dragging the handle outside the bounds of the image\n\t\t\t\t\t// results in inaccurate locationX and locationY coordinates to be\n\t\t\t\t\t// reported. https://github.com/facebook/react-native/issues/15290#issuecomment-435494944\n\t\t\t\t\tconst x = pageX - locationPageOffsetX.current;\n\t\t\t\t\tconst y = pageY - locationPageOffsetY.current;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tx: clamp( x / containerSize?.width, 0, 1 ).toFixed( 2 ),\n\t\t\t\t\t\ty: clamp( y / containerSize?.height, 0, 1 ).toFixed(\n\t\t\t\t\t\t\t2\n\t\t\t\t\t\t),\n\t\t\t\t\t} );\n\t\t\t\t\t// Slider (child of RangeCell) is uncontrolled, so we must increment a\n\t\t\t\t\t// key to re-mount and sync the pan gesture values to the sliders\n\t\t\t\t\t// https://github.com/callstack/react-native-slider/tree/v3.0.3#value\n\t\t\t\t\tsetSliderKey( ( prevState ) => prevState + 1 );\n\t\t\t\t},\n\t\t\t} ),\n\t\t[ containerSize, pan, onChange, shouldEnableBottomSheetScroll ]\n\t);\n\n\tconst mediaBackground = usePreferredColorSchemeStyle(\n\t\tstyles.mediaBackground,\n\t\tstyles.mediaBackgroundDark\n\t);\n\tconst imagePreviewStyles = [\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t\tstyles.image,\n\t];\n\tconst videoPreviewStyles = [\n\t\t{\n\t\t\taspectRatio:\n\t\t\t\tvideoNaturalSize &&\n\t\t\t\tvideoNaturalSize.width / videoNaturalSize.height,\n\t\t\t// Hide Video component since it has black background while loading the source\n\t\t\topacity: displayPlaceholder ? 0 : 1,\n\t\t},\n\t\tstyles.video,\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t];\n\tconst focalPointGroupStyles = [\n\t\tstyles.focalPointGroup,\n\t\t{\n\t\t\ttransform: [\n\t\t\t\t{\n\t\t\t\t\ttranslateX: pan.x.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.width || 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.width || 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttranslateY: pan.y.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.height || 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.height || 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t];\n\tconst FOCAL_POINT_SIZE = 50;\n\tconst focalPointStyles = [\n\t\tstyles.focalPoint,\n\t\t{\n\t\t\theight: FOCAL_POINT_SIZE,\n\t\t\tmarginLeft: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\tmarginTop: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\twidth: FOCAL_POINT_SIZE,\n\t\t},\n\t];\n\n\tconst onTooltipPress = () => setTooltipVisible( false );\n\tconst onMediaLayout = ( 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\tconst onImageDataLoad = () => setDisplayPlaceholder( false );\n\tconst onVideoLoad = ( event ) => {\n\t\tconst { height, width } = event.naturalSize;\n\t\tsetVideoNaturalSize( { height, width } );\n\t\tsetDisplayPlaceholder( false );\n\t\t// Avoid invisible, paused video on Android, presumably related to\n\t\t// https://github.com/react-native-video/react-native-video/issues/1979\n\t\tvideoRef?.current.seek( 0 );\n\t};\n\tconst onXCoordinateChange = ( x ) =>\n\t\tonChange( { x: ( x / 100 ).toFixed( 2 ) } );\n\tconst onYCoordinateChange = ( y ) =>\n\t\tonChange( { y: ( y / 100 ).toFixed( 2 ) } );\n\n\treturn (\n\t\t<View style={ styles.container }>\n\t\t\t<Tooltip onPress={ onTooltipPress } visible={ tooltipVisible }>\n\t\t\t\t<View style={ [ styles.media, mediaBackground ] }>\n\t\t\t\t\t<View\n\t\t\t\t\t\t{ ...panResponder.panHandlers }\n\t\t\t\t\t\tonLayout={ onMediaLayout }\n\t\t\t\t\t\tstyle={ styles.mediaContainer }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! isVideo && (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\teditButton={ false }\n\t\t\t\t\t\t\t\thighlightSelected={ false }\n\t\t\t\t\t\t\t\tisSelected={ ! displayPlaceholder }\n\t\t\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\t\t\tstyle={ imagePreviewStyles }\n\t\t\t\t\t\t\t\tonImageDataLoad={ onImageDataLoad }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ isVideo && (\n\t\t\t\t\t\t\t<Video\n\t\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\t\tpaused\n\t\t\t\t\t\t\t\tdisableFocus\n\t\t\t\t\t\t\t\tonLoad={ onVideoLoad }\n\t\t\t\t\t\t\t\tref={ videoRef }\n\t\t\t\t\t\t\t\tresizeMode=\"contain\"\n\t\t\t\t\t\t\t\tsource={ { uri: url } }\n\t\t\t\t\t\t\t\tstyle={ videoPreviewStyles }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ! displayPlaceholder && (\n\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\t\t\t\tstyle={ focalPointGroupStyles }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Tooltip.Label\n\t\t\t\t\t\t\t\t\ttext={ __( 'Drag to adjust focal point' ) }\n\t\t\t\t\t\t\t\t\tyOffset={ -( FOCAL_POINT_SIZE / 2 ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t\t\t\theight={ styles.focalPoint?.height }\n\t\t\t\t\t\t\t\t\tstyle={ focalPointStyles }\n\t\t\t\t\t\t\t\t\twidth={ styles.focalPoint?.width }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Animated.View>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</View>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `xAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'X-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onXCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.x * 100 ) }\n\t\t\t\t/>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `yAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'Y-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onYCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.y * 100 ) }\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t</View>\n\t);\n}\n\nexport default FocalPointPicker;\n"]}

package/build/focal-point-picker/tooltip/index.native.js

@@ -78,19 +78,18 @@ function Label(_ref2) {
   }
 
   (0, _element.useEffect)(() => {
-    startAnimation();
-  }, [visible]);
-
-  const startAnimation = () => {
-    _reactNative.Animated.timing(animationValue, {
-      toValue: visible ? 1 : 0,
-      duration: visible ? 300 : 150,
-      useNativeDriver: true,
-      delay: visible ? 500 : 0,
-      easing: _reactNative.Easing.out(_reactNative.Easing.quad)
-    }).start();
-  }; // Transforms rely upon onLayout to enable custom offsets additions.
+    const startAnimation = () => {
+      _reactNative.Animated.timing(animationValue, {
+        toValue: visible ? 1 : 0,
+        duration: visible ? 300 : 150,
+        useNativeDriver: true,
+        delay: visible ? 500 : 0,
+        easing: _reactNative.Easing.out(_reactNative.Easing.quad)
+      }).start();
+    };
 
+    startAnimation();
+  }, [animationValue, visible]); // Transforms rely upon onLayout to enable custom offsets additions.
 
   let tooltipTransforms;
 

package/build/focal-point-picker/tooltip/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/tooltip/index.native.js"],"names":["TooltipContext","Tooltip","children","onPress","style","visible","panResponder","PanResponder","create","onStartShouldSetPanResponderCapture","current","panHandlers","Label","align","text","xOffset","yOffset","animationValue","Animated","Value","dimensions","setDimensions","Error","startAnimation","timing","toValue","duration","useNativeDriver","delay","easing","Easing","out","quad","start","tooltipTransforms","translateX","width","translateY","height","tooltipStyles","styles","tooltip","shadowColor","tooltipShadow","color","shadowOffset","shadowOpacity","shadowRadius","elevation","transform","tooltipLeftAlign","arrowStyles","arrow","arrowLeftAlign","opacity","interpolate","inputRange","outputRange","nativeEvent","layout","defaultProps"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, Easing, PanResponder, Text, View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreateContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n\tuseContext,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst TooltipContext = createContext();\n\nfunction Tooltip( { children, onPress, style, visible } ) {\n\tconst panResponder = useRef(\n\t\tPanResponder.create( {\n\t\t\t/**\n\t\t\t * To allow dimissing the tooltip on press while also avoiding blocking\n\t\t\t * interactivity within the child context, we place this `onPress` side\n\t\t\t * effect within the `onStartShouldSetPanResponderCapture` callback.\n\t\t\t *\n\t\t\t * This is a bit unorthodox, but may be the simplest approach to achieving\n\t\t\t * this outcome. This is effectively a gesture responder that never\n\t\t\t * becomes the controlling responder. https://bit.ly/2J3ugKF\n\t\t\t */\n\t\t\tonStartShouldSetPanResponderCapture: () => {\n\t\t\t\tif ( onPress ) {\n\t\t\t\t\tonPress();\n\t\t\t\t}\n\t\t\t\treturn false;\n\t\t\t},\n\t\t} )\n\t).current;\n\n\treturn (\n\t\t<TooltipContext.Provider value={ visible }>\n\t\t\t<View\n\t\t\t\t{ ...( visible ? panResponder.panHandlers : {} ) }\n\t\t\t\tstyle={ style }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</TooltipContext.Provider>\n\t);\n}\n\nfunction Label( { align, text, xOffset, yOffset } ) {\n\tconst animationValue = useRef( new Animated.Value( 0 ) ).current;\n\tconst [ dimensions, setDimensions ] = useState( null );\n\tconst visible = useContext( TooltipContext );\n\n\tif ( typeof visible === 'undefined' ) {\n\t\tthrow new Error(\n\t\t\t'Tooltip.Label cannot be rendered outside of the Tooltip component'\n\t\t);\n\t}\n\n\tuseEffect( () => {\n\t\tstartAnimation();\n\t}, [ visible ] );\n\n\tconst startAnimation = () => {\n\t\tAnimated.timing( animationValue, {\n\t\t\ttoValue: visible ? 1 : 0,\n\t\t\tduration: visible ? 300 : 150,\n\t\t\tuseNativeDriver: true,\n\t\t\tdelay: visible ? 500 : 0,\n\t\t\teasing: Easing.out( Easing.quad ),\n\t\t} ).start();\n\t};\n\n\t// Transforms rely upon onLayout to enable custom offsets additions.\n\tlet tooltipTransforms;\n\tif ( dimensions ) {\n\t\ttooltipTransforms = [\n\t\t\t{\n\t\t\t\ttranslateX:\n\t\t\t\t\t( align === 'center' ? -dimensions.width / 2 : 0 ) +\n\t\t\t\t\txOffset,\n\t\t\t},\n\t\t\t{ translateY: -dimensions.height + yOffset },\n\t\t];\n\t}\n\n\tconst tooltipStyles = [\n\t\tstyles.tooltip,\n\t\t{\n\t\t\tshadowColor: styles.tooltipShadow?.color,\n\t\t\tshadowOffset: {\n\t\t\t\twidth: 0,\n\t\t\t\theight: 2,\n\t\t\t},\n\t\t\tshadowOpacity: 0.25,\n\t\t\tshadowRadius: 2,\n\t\t\televation: 2,\n\t\t\ttransform: tooltipTransforms,\n\t\t},\n\t\talign === 'left' && styles.tooltipLeftAlign,\n\t];\n\tconst arrowStyles = [\n\t\tstyles.arrow,\n\t\talign === 'left' && styles.arrowLeftAlign,\n\t];\n\n\treturn (\n\t\t<Animated.View\n\t\t\tstyle={ {\n\t\t\t\topacity: animationValue,\n\t\t\t\ttransform: [\n\t\t\t\t\t{\n\t\t\t\t\t\ttranslateY: animationValue.interpolate( {\n\t\t\t\t\t\t\tinputRange: [ 0, 1 ],\n\t\t\t\t\t\t\toutputRange: [ visible ? 4 : -8, -8 ],\n\t\t\t\t\t\t} ),\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t} }\n\t\t>\n\t\t\t<View\n\t\t\t\tonLayout={ ( { nativeEvent } ) => {\n\t\t\t\t\tconst { height, width } = nativeEvent.layout;\n\t\t\t\t\tsetDimensions( { height, width } );\n\t\t\t\t} }\n\t\t\t\tstyle={ tooltipStyles }\n\t\t\t>\n\t\t\t\t<Text style={ styles.text }>{ text }</Text>\n\t\t\t\t<View style={ arrowStyles } />\n\t\t\t</View>\n\t\t</Animated.View>\n\t);\n}\n\nLabel.defaultProps = {\n\talign: 'center',\n\txOffset: 0,\n\tyOffset: 0,\n};\n\nTooltip.Label = Label;\n\nexport default Tooltip;\n"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/tooltip/index.native.js"],"names":["TooltipContext","Tooltip","children","onPress","style","visible","panResponder","PanResponder","create","onStartShouldSetPanResponderCapture","current","panHandlers","Label","align","text","xOffset","yOffset","animationValue","Animated","Value","dimensions","setDimensions","Error","startAnimation","timing","toValue","duration","useNativeDriver","delay","easing","Easing","out","quad","start","tooltipTransforms","translateX","width","translateY","height","tooltipStyles","styles","tooltip","shadowColor","tooltipShadow","color","shadowOffset","shadowOpacity","shadowRadius","elevation","transform","tooltipLeftAlign","arrowStyles","arrow","arrowLeftAlign","opacity","interpolate","inputRange","outputRange","nativeEvent","layout","defaultProps"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, Easing, PanResponder, Text, View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreateContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n\tuseContext,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst TooltipContext = createContext();\n\nfunction Tooltip( { children, onPress, style, visible } ) {\n\tconst panResponder = useRef(\n\t\tPanResponder.create( {\n\t\t\t/**\n\t\t\t * To allow dimissing the tooltip on press while also avoiding blocking\n\t\t\t * interactivity within the child context, we place this `onPress` side\n\t\t\t * effect within the `onStartShouldSetPanResponderCapture` callback.\n\t\t\t *\n\t\t\t * This is a bit unorthodox, but may be the simplest approach to achieving\n\t\t\t * this outcome. This is effectively a gesture responder that never\n\t\t\t * becomes the controlling responder. https://bit.ly/2J3ugKF\n\t\t\t */\n\t\t\tonStartShouldSetPanResponderCapture: () => {\n\t\t\t\tif ( onPress ) {\n\t\t\t\t\tonPress();\n\t\t\t\t}\n\t\t\t\treturn false;\n\t\t\t},\n\t\t} )\n\t).current;\n\n\treturn (\n\t\t<TooltipContext.Provider value={ visible }>\n\t\t\t<View\n\t\t\t\t{ ...( visible ? panResponder.panHandlers : {} ) }\n\t\t\t\tstyle={ style }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</TooltipContext.Provider>\n\t);\n}\n\nfunction Label( { align, text, xOffset, yOffset } ) {\n\tconst animationValue = useRef( new Animated.Value( 0 ) ).current;\n\tconst [ dimensions, setDimensions ] = useState( null );\n\tconst visible = useContext( TooltipContext );\n\n\tif ( typeof visible === 'undefined' ) {\n\t\tthrow new Error(\n\t\t\t'Tooltip.Label cannot be rendered outside of the Tooltip component'\n\t\t);\n\t}\n\n\tuseEffect( () => {\n\t\tconst startAnimation = () => {\n\t\t\tAnimated.timing( animationValue, {\n\t\t\t\ttoValue: visible ? 1 : 0,\n\t\t\t\tduration: visible ? 300 : 150,\n\t\t\t\tuseNativeDriver: true,\n\t\t\t\tdelay: visible ? 500 : 0,\n\t\t\t\teasing: Easing.out( Easing.quad ),\n\t\t\t} ).start();\n\t\t};\n\t\tstartAnimation();\n\t}, [ animationValue, visible ] );\n\n\t// Transforms rely upon onLayout to enable custom offsets additions.\n\tlet tooltipTransforms;\n\tif ( dimensions ) {\n\t\ttooltipTransforms = [\n\t\t\t{\n\t\t\t\ttranslateX:\n\t\t\t\t\t( align === 'center' ? -dimensions.width / 2 : 0 ) +\n\t\t\t\t\txOffset,\n\t\t\t},\n\t\t\t{ translateY: -dimensions.height + yOffset },\n\t\t];\n\t}\n\n\tconst tooltipStyles = [\n\t\tstyles.tooltip,\n\t\t{\n\t\t\tshadowColor: styles.tooltipShadow?.color,\n\t\t\tshadowOffset: {\n\t\t\t\twidth: 0,\n\t\t\t\theight: 2,\n\t\t\t},\n\t\t\tshadowOpacity: 0.25,\n\t\t\tshadowRadius: 2,\n\t\t\televation: 2,\n\t\t\ttransform: tooltipTransforms,\n\t\t},\n\t\talign === 'left' && styles.tooltipLeftAlign,\n\t];\n\tconst arrowStyles = [\n\t\tstyles.arrow,\n\t\talign === 'left' && styles.arrowLeftAlign,\n\t];\n\n\treturn (\n\t\t<Animated.View\n\t\t\tstyle={ {\n\t\t\t\topacity: animationValue,\n\t\t\t\ttransform: [\n\t\t\t\t\t{\n\t\t\t\t\t\ttranslateY: animationValue.interpolate( {\n\t\t\t\t\t\t\tinputRange: [ 0, 1 ],\n\t\t\t\t\t\t\toutputRange: [ visible ? 4 : -8, -8 ],\n\t\t\t\t\t\t} ),\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t} }\n\t\t>\n\t\t\t<View\n\t\t\t\tonLayout={ ( { nativeEvent } ) => {\n\t\t\t\t\tconst { height, width } = nativeEvent.layout;\n\t\t\t\t\tsetDimensions( { height, width } );\n\t\t\t\t} }\n\t\t\t\tstyle={ tooltipStyles }\n\t\t\t>\n\t\t\t\t<Text style={ styles.text }>{ text }</Text>\n\t\t\t\t<View style={ arrowStyles } />\n\t\t\t</View>\n\t\t</Animated.View>\n\t);\n}\n\nLabel.defaultProps = {\n\talign: 'center',\n\txOffset: 0,\n\tyOffset: 0,\n};\n\nTooltip.Label = Label;\n\nexport default Tooltip;\n"]}

package/build/form-toggle/index.js

@@ -5,6 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.FormToggle = FormToggle;
 exports.noop = exports.default = void 0;
 
 var _element = require("@wordpress/element");
@@ -17,18 +18,40 @@ var _classnames = _interopRequireDefault(require("classnames"));
  * External dependencies
  */
 const noop = () => {};
+/**
+ * FormToggle switches a single setting on or off.
+ *
+ * ```jsx
+ * import { FormToggle } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyFormToggle = () => {
+ *   const [ isChecked, setChecked ] = useState( true );
+ *
+ *   return (
+ *     <FormToggle
+ *       checked={ isChecked }
+ *       onChange={ () => setChecked( ( state ) => ! state ) }
+ *     />
+ *   );
+ * };
+ * ```
+ */
+
 
 exports.noop = noop;
 
-function FormToggle(_ref) {
-  let {
+function FormToggle( // ref is omitted until we have `WordPressComponentPropsWithoutRef` or add
+// ref forwarding to FormToggle.
+props) {
+  const {
     className,
     checked,
     id,
     disabled,
     onChange = noop,
-    ...props
-  } = _ref;
+    ...additionalProps
+  } = props;
   const wrapperClasses = (0, _classnames.default)('components-form-toggle', className, {
     'is-checked': checked,
     'is-disabled': disabled
@@ -42,7 +65,7 @@ function FormToggle(_ref) {
     checked: checked,
     onChange: onChange,
     disabled: disabled
-  }, props)), (0, _element.createElement)("span", {
+  }, additionalProps)), (0, _element.createElement)("span", {
     className: "components-form-toggle__track"
   }), (0, _element.createElement)("span", {
     className: "components-form-toggle__thumb"

package/build/form-toggle/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/form-toggle/index.js"],"names":["noop","FormToggle","className","checked","id","disabled","onChange","props","wrapperClasses"],"mappings":";;;;;;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGO,MAAMA,IAAI,GAAG,MAAM,CAAE,CAArB;;;;AAEP,SAASC,UAAT,OAOI;AAAA,MAPiB;AACpBC,IAAAA,SADoB;AAEpBC,IAAAA,OAFoB;AAGpBC,IAAAA,EAHoB;AAIpBC,IAAAA,QAJoB;AAKpBC,IAAAA,QAAQ,GAAGN,IALS;AAMpB,OAAGO;AANiB,GAOjB;AACH,QAAMC,cAAc,GAAG,yBAAY,wBAAZ,EAAsCN,SAAtC,EAAiD;AACvE,kBAAcC,OADyD;AAEvE,mBAAeE;AAFwD,GAAjD,CAAvB;AAKA,SACC;AAAM,IAAA,SAAS,EAAGG;AAAlB,KACC;AACC,IAAA,SAAS,EAAC,+BADX;AAEC,IAAA,EAAE,EAAGJ,EAFN;AAGC,IAAA,IAAI,EAAC,UAHN;AAIC,IAAA,OAAO,EAAGD,OAJX;AAKC,IAAA,QAAQ,EAAGG,QALZ;AAMC,IAAA,QAAQ,EAAGD;AANZ,KAOME,KAPN,EADD,EAUC;AAAM,IAAA,SAAS,EAAC;AAAhB,IAVD,EAWC;AAAM,IAAA,SAAS,EAAC;AAAhB,IAXD,CADD;AAeA;;eAEcN,U","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\nexport const noop = () => {};\n\nfunction FormToggle( {\n\tclassName,\n\tchecked,\n\tid,\n\tdisabled,\n\tonChange = noop,\n\t...props\n} ) {\n\tconst wrapperClasses = classnames( 'components-form-toggle', className, {\n\t\t'is-checked': checked,\n\t\t'is-disabled': disabled,\n\t} );\n\n\treturn (\n\t\t<span className={ wrapperClasses }>\n\t\t\t<input\n\t\t\t\tclassName=\"components-form-toggle__input\"\n\t\t\t\tid={ id }\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tchecked={ checked }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t\t<span className=\"components-form-toggle__track\"></span>\n\t\t\t<span className=\"components-form-toggle__thumb\"></span>\n\t\t</span>\n\t);\n}\n\nexport default FormToggle;\n"]}
+{"version":3,"sources":["@wordpress/components/src/form-toggle/index.tsx"],"names":["noop","FormToggle","props","className","checked","id","disabled","onChange","additionalProps","wrapperClasses"],"mappings":";;;;;;;;;;;;;;AAGA;;AAHA;AACA;AACA;AASO,MAAMA,IAAI,GAAG,MAAM,CAAE,CAArB;AAEP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AACO,SAASC,UAAT,EACN;AACA;AACAC,KAHM,EAOL;AACD,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,OAFK;AAGLC,IAAAA,EAHK;AAILC,IAAAA,QAJK;AAKLC,IAAAA,QAAQ,GAAGP,IALN;AAML,OAAGQ;AANE,MAOFN,KAPJ;AAQA,QAAMO,cAAc,GAAG,yBAAY,wBAAZ,EAAsCN,SAAtC,EAAiD;AACvE,kBAAcC,OADyD;AAEvE,mBAAeE;AAFwD,GAAjD,CAAvB;AAKA,SACC;AAAM,IAAA,SAAS,EAAGG;AAAlB,KACC;AACC,IAAA,SAAS,EAAC,+BADX;AAEC,IAAA,EAAE,EAAGJ,EAFN;AAGC,IAAA,IAAI,EAAC,UAHN;AAIC,IAAA,OAAO,EAAGD,OAJX;AAKC,IAAA,QAAQ,EAAGG,QALZ;AAMC,IAAA,QAAQ,EAAGD;AANZ,KAOME,eAPN,EADD,EAUC;AAAM,IAAA,SAAS,EAAC;AAAhB,IAVD,EAWC;AAAM,IAAA,SAAS,EAAC;AAAhB,IAXD,CADD;AAeA;;eAEcP,U","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport type { FormToggleProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nexport const noop = () => {};\n\n/**\n * FormToggle switches a single setting on or off.\n *\n * ```jsx\n * import { FormToggle } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyFormToggle = () => {\n *   const [ isChecked, setChecked ] = useState( true );\n *\n *   return (\n *     <FormToggle\n *       checked={ isChecked }\n *       onChange={ () => setChecked( ( state ) => ! state ) }\n *     />\n *   );\n * };\n * ```\n */\nexport function FormToggle(\n\t// ref is omitted until we have `WordPressComponentPropsWithoutRef` or add\n\t// ref forwarding to FormToggle.\n\tprops: Omit<\n\t\tWordPressComponentProps< FormToggleProps, 'input', false >,\n\t\t'ref'\n\t>\n) {\n\tconst {\n\t\tclassName,\n\t\tchecked,\n\t\tid,\n\t\tdisabled,\n\t\tonChange = noop,\n\t\t...additionalProps\n\t} = props;\n\tconst wrapperClasses = classnames( 'components-form-toggle', className, {\n\t\t'is-checked': checked,\n\t\t'is-disabled': disabled,\n\t} );\n\n\treturn (\n\t\t<span className={ wrapperClasses }>\n\t\t\t<input\n\t\t\t\tclassName=\"components-form-toggle__input\"\n\t\t\t\tid={ id }\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tchecked={ checked }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t\t<span className=\"components-form-toggle__track\"></span>\n\t\t\t<span className=\"components-form-toggle__thumb\"></span>\n\t\t</span>\n\t);\n}\n\nexport default FormToggle;\n"]}

package/build/form-toggle/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/build/form-toggle/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}