@wordpress/components 20.0.0 → 21.0.0

package/build-module/flex/flex/hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/flex/flex/hook.ts"],"names":["css","useMemo","deprecated","useContextSystem","useResponsiveValue","space","styles","useCx","rtl","useDeprecatedProps","props","isReversed","otherProps","alternative","since","direction","useFlex","align","className","directionProp","expanded","gap","justify","wrap","directionAsArray","Array","isArray","isColumn","includes","isReverse","cx","rtlWatchResult","watch","classes","sx","Base","alignItems","flexDirection","flexWrap","undefined","justifyContent","height","width","marginBottom","Items","marginLeft","marginRight","WrapItems","Flex","ItemsColumn","ItemsRow"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { css, SerializedStyles } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useResponsiveValue } from '../../ui/utils/use-responsive-value';\nimport { space } from '../../ui/utils/space';\nimport * as styles from '../styles';\nimport { useCx, rtl } from '../../utils';\nimport type { FlexProps } from '../types';\n\nfunction useDeprecatedProps(\n\tprops: WordPressComponentProps< FlexProps, 'div' >\n): WordPressComponentProps< FlexProps, 'div' > {\n\tconst { isReversed, ...otherProps } = props;\n\n\tif ( typeof isReversed !== 'undefined' ) {\n\t\tdeprecated( 'Flex isReversed', {\n\t\t\talternative: 'Flex direction=\"row-reverse\" or \"column-reverse\"',\n\t\t\tsince: '5.9',\n\t\t} );\n\t\treturn {\n\t\t\t...otherProps,\n\t\t\tdirection: isReversed ? 'row-reverse' : 'row',\n\t\t};\n\t}\n\n\treturn otherProps;\n}\n\nexport function useFlex( props: WordPressComponentProps< FlexProps, 'div' > ) {\n\tconst {\n\t\talign = 'center',\n\t\tclassName,\n\t\tdirection: directionProp = 'row',\n\t\texpanded = true,\n\t\tgap = 2,\n\t\tjustify = 'space-between',\n\t\twrap = false,\n\t\t...otherProps\n\t} = useContextSystem( useDeprecatedProps( props ), 'Flex' );\n\n\tconst directionAsArray = Array.isArray( directionProp )\n\t\t? directionProp\n\t\t: [ directionProp ];\n\tconst direction = useResponsiveValue( directionAsArray );\n\n\tconst isColumn =\n\t\ttypeof direction === 'string' && !! direction.includes( 'column' );\n\tconst isReverse =\n\t\ttypeof direction === 'string' && direction.includes( 'reverse' );\n\n\tconst cx = useCx();\n\tconst rtlWatchResult = rtl.watch();\n\n\tconst classes = useMemo( () => {\n\t\tconst sx: {\n\t\t\tBase?: SerializedStyles;\n\t\t\tItems?: SerializedStyles;\n\t\t\tWrapItems?: SerializedStyles;\n\t\t} = {};\n\n\t\tsx.Base = css( {\n\t\t\talignItems: isColumn ? 'normal' : align,\n\t\t\tflexDirection: direction,\n\t\t\tflexWrap: wrap ? 'wrap' : undefined,\n\t\t\tjustifyContent: justify,\n\t\t\theight: isColumn && expanded ? '100%' : undefined,\n\t\t\twidth: ! isColumn && expanded ? '100%' : undefined,\n\t\t\tmarginBottom: wrap ? `calc(${ space( gap ) } * -1)` : undefined,\n\t\t} );\n\n\t\t/**\n\t\t * Workaround to optimize DOM rendering.\n\t\t * We'll enhance alignment with naive parent flex assumptions.\n\t\t *\n\t\t * Trade-off:\n\t\t * Far less DOM less. However, UI rendering is not as reliable.\n\t\t */\n\t\tsx.Items = css`\n\t\t\t> * + *:not( marquee ) {\n\t\t\t\tmargin-top: ${ isColumn ? space( gap ) : undefined };\n\t\t\t\t${ rtl( {\n\t\t\t\t\tmarginLeft:\n\t\t\t\t\t\t! isColumn && ! isReverse ? space( gap ) : undefined,\n\t\t\t\t\tmarginRight:\n\t\t\t\t\t\t! isColumn && isReverse ? space( gap ) : undefined,\n\t\t\t\t} )() }\n\t\t\t}\n\t\t`;\n\n\t\tsx.WrapItems = css`\n\t\t\t> *:not( marquee ) {\n\t\t\t\tmargin-bottom: ${ space( gap ) };\n\t\t\t\t${ rtl( {\n\t\t\t\t\tmarginLeft:\n\t\t\t\t\t\t! isColumn && isReverse ? space( gap ) : undefined,\n\t\t\t\t\tmarginRight:\n\t\t\t\t\t\t! isColumn && ! isReverse ? space( gap ) : undefined,\n\t\t\t\t} )() }\n\t\t\t}\n\n\t\t\t> *:last-child:not( marquee ) {\n\t\t\t\t${ rtl( {\n\t\t\t\t\tmarginLeft: ! isColumn && isReverse ? 0 : undefined,\n\t\t\t\t\tmarginRight: ! isColumn && ! isReverse ? 0 : undefined,\n\t\t\t\t} )() }\n\t\t\t}\n\t\t`;\n\n\t\treturn cx(\n\t\t\tstyles.Flex,\n\t\t\tsx.Base,\n\t\t\twrap ? sx.WrapItems : sx.Items,\n\t\t\tisColumn ? styles.ItemsColumn : styles.ItemsRow,\n\t\t\tclassName\n\t\t);\n\t\t// rtlWatchResult is needed to refresh styles when the writing direction changes\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [\n\t\talign,\n\t\tclassName,\n\t\tcx,\n\t\tdirection,\n\t\texpanded,\n\t\tgap,\n\t\tisColumn,\n\t\tisReverse,\n\t\tjustify,\n\t\twrap,\n\t\trtlWatchResult,\n\t] );\n\n\treturn { ...otherProps, className: classes, isColumn };\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/flex/flex/hook.ts"],"names":["css","useMemo","deprecated","useContextSystem","useResponsiveValue","space","styles","useCx","useDeprecatedProps","props","isReversed","otherProps","alternative","since","direction","useFlex","align","className","directionProp","expanded","gap","justify","wrap","directionAsArray","Array","isArray","isColumn","includes","isReverse","cx","classes","base","alignItems","flexDirection","flexWrap","undefined","justifyContent","height","width","Flex","ItemsColumn","ItemsRow"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useResponsiveValue } from '../../ui/utils/use-responsive-value';\nimport { space } from '../../ui/utils/space';\nimport * as styles from '../styles';\nimport { useCx } from '../../utils';\nimport type { FlexProps } from '../types';\n\nfunction useDeprecatedProps(\n\tprops: WordPressComponentProps< FlexProps, 'div' >\n): WordPressComponentProps< FlexProps, 'div' > {\n\tconst { isReversed, ...otherProps } = props;\n\n\tif ( typeof isReversed !== 'undefined' ) {\n\t\tdeprecated( 'Flex isReversed', {\n\t\t\talternative: 'Flex direction=\"row-reverse\" or \"column-reverse\"',\n\t\t\tsince: '5.9',\n\t\t} );\n\t\treturn {\n\t\t\t...otherProps,\n\t\t\tdirection: isReversed ? 'row-reverse' : 'row',\n\t\t};\n\t}\n\n\treturn otherProps;\n}\n\nexport function useFlex( props: WordPressComponentProps< FlexProps, 'div' > ) {\n\tconst {\n\t\talign = 'center',\n\t\tclassName,\n\t\tdirection: directionProp = 'row',\n\t\texpanded = true,\n\t\tgap = 2,\n\t\tjustify = 'space-between',\n\t\twrap = false,\n\t\t...otherProps\n\t} = useContextSystem( useDeprecatedProps( props ), 'Flex' );\n\n\tconst directionAsArray = Array.isArray( directionProp )\n\t\t? directionProp\n\t\t: [ directionProp ];\n\tconst direction = useResponsiveValue( directionAsArray );\n\n\tconst isColumn =\n\t\ttypeof direction === 'string' && !! direction.includes( 'column' );\n\tconst isReverse =\n\t\ttypeof direction === 'string' && direction.includes( 'reverse' );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo( () => {\n\t\tconst base = css( {\n\t\t\talignItems: isColumn ? 'normal' : align,\n\t\t\tflexDirection: direction,\n\t\t\tflexWrap: wrap ? 'wrap' : undefined,\n\t\t\tgap: space( gap ),\n\t\t\tjustifyContent: justify,\n\t\t\theight: isColumn && expanded ? '100%' : undefined,\n\t\t\twidth: ! isColumn && expanded ? '100%' : undefined,\n\t\t} );\n\n\t\treturn cx(\n\t\t\tstyles.Flex,\n\t\t\tbase,\n\t\t\tisColumn ? styles.ItemsColumn : styles.ItemsRow,\n\t\t\tclassName\n\t\t);\n\t}, [\n\t\talign,\n\t\tclassName,\n\t\tcx,\n\t\tdirection,\n\t\texpanded,\n\t\tgap,\n\t\tisColumn,\n\t\tisReverse,\n\t\tjustify,\n\t\twrap,\n\t] );\n\n\treturn { ...otherProps, className: classes, isColumn };\n}\n"]}

package/build-module/focal-point-picker/controls.js

@@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 
-import { UnitControl as BaseUnitControl, ControlWrapper } from './styles/focal-point-picker-style';
+import { StyledUnitControl, ControlWrapper } from './styles/focal-point-picker-style';
 import { fractionToPercentage } from './utils';
 const TEXTCONTROL_MIN = 0;
 const TEXTCONTROL_MAX = 100;
@@ -18,33 +18,38 @@ const noop = () => {};
 
 export default function FocalPointPickerControls(_ref) {
   let {
+    __nextHasNoMarginBottom,
+    hasHelpText,
     onChange = noop,
-    percentages = {
+    point = {
       x: 0.5,
       y: 0.5
     }
   } = _ref;
-  const valueX = fractionToPercentage(percentages.x);
-  const valueY = fractionToPercentage(percentages.y);
+  const valueX = fractionToPercentage(point.x);
+  const valueY = fractionToPercentage(point.y);
 
   const handleChange = (value, axis) => {
+    if (value === undefined) return;
     const num = parseInt(value, 10);
 
     if (!isNaN(num)) {
-      onChange({ ...percentages,
+      onChange({ ...point,
         [axis]: num / 100
       });
     }
   };
 
   return createElement(ControlWrapper, {
-    className: "focal-point-picker__controls"
-  }, createElement(UnitControl, {
+    className: "focal-point-picker__controls",
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
+    hasHelpText: hasHelpText
+  }, createElement(FocalPointUnitControl, {
     label: __('Left'),
     value: [valueX, '%'].join(''),
     onChange: next => handleChange(next, 'x'),
     dragDirection: "e"
-  }), createElement(UnitControl, {
+  }), createElement(FocalPointUnitControl, {
     label: __('Top'),
     value: [valueY, '%'].join(''),
     onChange: next => handleChange(next, 'y'),
@@ -52,8 +57,8 @@ export default function FocalPointPickerControls(_ref) {
   }));
 }
 
-function UnitControl(props) {
-  return createElement(BaseUnitControl, _extends({
+function FocalPointUnitControl(props) {
+  return createElement(StyledUnitControl, _extends({
     className: "focal-point-picker__controls-position-unit-control",
     labelPosition: "top",
     max: TEXTCONTROL_MAX,

package/build-module/focal-point-picker/controls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/controls.js"],"names":["__","UnitControl","BaseUnitControl","ControlWrapper","fractionToPercentage","TEXTCONTROL_MIN","TEXTCONTROL_MAX","noop","FocalPointPickerControls","onChange","percentages","x","y","valueX","valueY","handleChange","value","axis","num","parseInt","isNaN","join","next","props","label"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SACCC,WAAW,IAAIC,eADhB,EAECC,cAFD,QAGO,mCAHP;AAIA,SAASC,oBAAT,QAAqC,SAArC;AAEA,MAAMC,eAAe,GAAG,CAAxB;AACA,MAAMC,eAAe,GAAG,GAAxB;;AACA,MAAMC,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,eAAe,SAASC,wBAAT,OAMX;AAAA,MAN8C;AACjDC,IAAAA,QAAQ,GAAGF,IADsC;AAEjDG,IAAAA,WAAW,GAAG;AACbC,MAAAA,CAAC,EAAE,GADU;AAEbC,MAAAA,CAAC,EAAE;AAFU;AAFmC,GAM9C;AACH,QAAMC,MAAM,GAAGT,oBAAoB,CAAEM,WAAW,CAACC,CAAd,CAAnC;AACA,QAAMG,MAAM,GAAGV,oBAAoB,CAAEM,WAAW,CAACE,CAAd,CAAnC;;AAEA,QAAMG,YAAY,GAAG,CAAEC,KAAF,EAASC,IAAT,KAAmB;AACvC,UAAMC,GAAG,GAAGC,QAAQ,CAAEH,KAAF,EAAS,EAAT,CAApB;;AAEA,QAAK,CAAEI,KAAK,CAAEF,GAAF,CAAZ,EAAsB;AACrBT,MAAAA,QAAQ,CAAE,EAAE,GAAGC,WAAL;AAAkB,SAAEO,IAAF,GAAUC,GAAG,GAAG;AAAlC,OAAF,CAAR;AACA;AACD,GAND;;AAQA,SACC,cAAC,cAAD;AAAgB,IAAA,SAAS,EAAC;AAA1B,KACC,cAAC,WAAD;AACC,IAAA,KAAK,EAAGlB,EAAE,CAAE,MAAF,CADX;AAEC,IAAA,KAAK,EAAG,CAAEa,MAAF,EAAU,GAAV,EAAgBQ,IAAhB,CAAsB,EAAtB,CAFT;AAGC,IAAA,QAAQ,EAAKC,IAAF,IAAYP,YAAY,CAAEO,IAAF,EAAQ,GAAR,CAHpC;AAIC,IAAA,aAAa,EAAC;AAJf,IADD,EAOC,cAAC,WAAD;AACC,IAAA,KAAK,EAAGtB,EAAE,CAAE,KAAF,CADX;AAEC,IAAA,KAAK,EAAG,CAAEc,MAAF,EAAU,GAAV,EAAgBO,IAAhB,CAAsB,EAAtB,CAFT;AAGC,IAAA,QAAQ,EAAKC,IAAF,IAAYP,YAAY,CAAEO,IAAF,EAAQ,GAAR,CAHpC;AAIC,IAAA,aAAa,EAAC;AAJf,IAPD,CADD;AAgBA;;AAED,SAASrB,WAAT,CAAsBsB,KAAtB,EAA8B;AAC7B,SACC,cAAC,eAAD;AACC,IAAA,SAAS,EAAC,oDADX;AAEC,IAAA,aAAa,EAAC,KAFf;AAGC,IAAA,GAAG,EAAGjB,eAHP;AAIC,IAAA,GAAG,EAAGD,eAJP;AAKC,IAAA,KAAK,EAAG,CAAE;AAAEW,MAAAA,KAAK,EAAE,GAAT;AAAcQ,MAAAA,KAAK,EAAE;AAArB,KAAF;AALT,KAMMD,KANN,EADD;AAUA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tUnitControl as BaseUnitControl,\n\tControlWrapper,\n} from './styles/focal-point-picker-style';\nimport { fractionToPercentage } from './utils';\n\nconst TEXTCONTROL_MIN = 0;\nconst TEXTCONTROL_MAX = 100;\nconst noop = () => {};\n\nexport default function FocalPointPickerControls( {\n\tonChange = noop,\n\tpercentages = {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n} ) {\n\tconst valueX = fractionToPercentage( percentages.x );\n\tconst valueY = fractionToPercentage( percentages.y );\n\n\tconst handleChange = ( value, axis ) => {\n\t\tconst num = parseInt( value, 10 );\n\n\t\tif ( ! isNaN( num ) ) {\n\t\t\tonChange( { ...percentages, [ axis ]: num / 100 } );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ControlWrapper className=\"focal-point-picker__controls\">\n\t\t\t<UnitControl\n\t\t\t\tlabel={ __( 'Left' ) }\n\t\t\t\tvalue={ [ valueX, '%' ].join( '' ) }\n\t\t\t\tonChange={ ( next ) => handleChange( next, 'x' ) }\n\t\t\t\tdragDirection=\"e\"\n\t\t\t/>\n\t\t\t<UnitControl\n\t\t\t\tlabel={ __( 'Top' ) }\n\t\t\t\tvalue={ [ valueY, '%' ].join( '' ) }\n\t\t\t\tonChange={ ( next ) => handleChange( next, 'y' ) }\n\t\t\t\tdragDirection=\"s\"\n\t\t\t/>\n\t\t</ControlWrapper>\n\t);\n}\n\nfunction UnitControl( props ) {\n\treturn (\n\t\t<BaseUnitControl\n\t\t\tclassName=\"focal-point-picker__controls-position-unit-control\"\n\t\t\tlabelPosition=\"top\"\n\t\t\tmax={ TEXTCONTROL_MAX }\n\t\t\tmin={ TEXTCONTROL_MIN }\n\t\t\tunits={ [ { value: '%', label: '%' } ] }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/controls.tsx"],"names":["__","StyledUnitControl","ControlWrapper","fractionToPercentage","TEXTCONTROL_MIN","TEXTCONTROL_MAX","noop","FocalPointPickerControls","__nextHasNoMarginBottom","hasHelpText","onChange","point","x","y","valueX","valueY","handleChange","value","axis","undefined","num","parseInt","isNaN","join","next","FocalPointUnitControl","props","label"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SACCC,iBADD,EAECC,cAFD,QAGO,mCAHP;AAIA,SAASC,oBAAT,QAAqC,SAArC;AAOA,MAAMC,eAAe,GAAG,CAAxB;AACA,MAAMC,eAAe,GAAG,GAAxB;;AACA,MAAMC,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,eAAe,SAASC,wBAAT,OAQoB;AAAA,MARe;AACjDC,IAAAA,uBADiD;AAEjDC,IAAAA,WAFiD;AAGjDC,IAAAA,QAAQ,GAAGJ,IAHsC;AAIjDK,IAAAA,KAAK,GAAG;AACPC,MAAAA,CAAC,EAAE,GADI;AAEPC,MAAAA,CAAC,EAAE;AAFI;AAJyC,GAQf;AAClC,QAAMC,MAAM,GAAGX,oBAAoB,CAAEQ,KAAK,CAACC,CAAR,CAAnC;AACA,QAAMG,MAAM,GAAGZ,oBAAoB,CAAEQ,KAAK,CAACE,CAAR,CAAnC;;AAEA,QAAMG,YAAY,GAAG,CACpBC,KADoB,EAEpBC,IAFoB,KAGhB;AACJ,QAAKD,KAAK,KAAKE,SAAf,EAA2B;AAE3B,UAAMC,GAAG,GAAGC,QAAQ,CAAEJ,KAAF,EAAS,EAAT,CAApB;;AAEA,QAAK,CAAEK,KAAK,CAAEF,GAAF,CAAZ,EAAsB;AACrBV,MAAAA,QAAQ,CAAE,EAAE,GAAGC,KAAL;AAAY,SAAEO,IAAF,GAAUE,GAAG,GAAG;AAA5B,OAAF,CAAR;AACA;AACD,GAXD;;AAaA,SACC,cAAC,cAAD;AACC,IAAA,SAAS,EAAC,8BADX;AAEC,IAAA,uBAAuB,EAAGZ,uBAF3B;AAGC,IAAA,WAAW,EAAGC;AAHf,KAKC,cAAC,qBAAD;AACC,IAAA,KAAK,EAAGT,EAAE,CAAE,MAAF,CADX;AAEC,IAAA,KAAK,EAAG,CAAEc,MAAF,EAAU,GAAV,EAAgBS,IAAhB,CAAsB,EAAtB,CAFT;AAGC,IAAA,QAAQ,EACHC,IAAF,IACDR,YAAY,CACXQ,IADW,EAEX,GAFW,CALf;AAUC,IAAA,aAAa,EAAC;AAVf,IALD,EAiBC,cAAC,qBAAD;AACC,IAAA,KAAK,EAAGxB,EAAE,CAAE,KAAF,CADX;AAEC,IAAA,KAAK,EAAG,CAAEe,MAAF,EAAU,GAAV,EAAgBQ,IAAhB,CAAsB,EAAtB,CAFT;AAGC,IAAA,QAAQ,EACHC,IAAF,IACDR,YAAY,CACXQ,IADW,EAEX,GAFW,CALf;AAUC,IAAA,aAAa,EAAC;AAVf,IAjBD,CADD;AAgCA;;AAED,SAASC,qBAAT,CAAgCC,KAAhC,EAA0D;AACzD,SACC,cAAC,iBAAD;AACC,IAAA,SAAS,EAAC,oDADX;AAEC,IAAA,aAAa,EAAC,KAFf;AAGC,IAAA,GAAG,EAAGrB,eAHP;AAIC,IAAA,GAAG,EAAGD,eAJP;AAKC,IAAA,KAAK,EAAG,CAAE;AAAEa,MAAAA,KAAK,EAAE,GAAT;AAAcU,MAAAA,KAAK,EAAE;AAArB,KAAF;AALT,KAMMD,KANN,EADD;AAUA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tStyledUnitControl,\n\tControlWrapper,\n} from './styles/focal-point-picker-style';\nimport { fractionToPercentage } from './utils';\nimport type {\n\tUnitControlProps,\n\tUnitControlOnChangeCallback,\n} from '../unit-control/types';\nimport type { FocalPointAxis, FocalPointPickerControlsProps } from './types';\n\nconst TEXTCONTROL_MIN = 0;\nconst TEXTCONTROL_MAX = 100;\nconst noop = () => {};\n\nexport default function FocalPointPickerControls( {\n\t__nextHasNoMarginBottom,\n\thasHelpText,\n\tonChange = noop,\n\tpoint = {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n}: FocalPointPickerControlsProps ) {\n\tconst valueX = fractionToPercentage( point.x );\n\tconst valueY = fractionToPercentage( point.y );\n\n\tconst handleChange = (\n\t\tvalue: Parameters< UnitControlOnChangeCallback >[ 0 ],\n\t\taxis: FocalPointAxis\n\t) => {\n\t\tif ( value === undefined ) return;\n\n\t\tconst num = parseInt( value, 10 );\n\n\t\tif ( ! isNaN( num ) ) {\n\t\t\tonChange( { ...point, [ axis ]: num / 100 } );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ControlWrapper\n\t\t\tclassName=\"focal-point-picker__controls\"\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\thasHelpText={ hasHelpText }\n\t\t>\n\t\t\t<FocalPointUnitControl\n\t\t\t\tlabel={ __( 'Left' ) }\n\t\t\t\tvalue={ [ valueX, '%' ].join( '' ) }\n\t\t\t\tonChange={\n\t\t\t\t\t( ( next ) =>\n\t\t\t\t\t\thandleChange(\n\t\t\t\t\t\t\tnext,\n\t\t\t\t\t\t\t'x'\n\t\t\t\t\t\t) ) as UnitControlOnChangeCallback\n\t\t\t\t}\n\t\t\t\tdragDirection=\"e\"\n\t\t\t/>\n\t\t\t<FocalPointUnitControl\n\t\t\t\tlabel={ __( 'Top' ) }\n\t\t\t\tvalue={ [ valueY, '%' ].join( '' ) }\n\t\t\t\tonChange={\n\t\t\t\t\t( ( next ) =>\n\t\t\t\t\t\thandleChange(\n\t\t\t\t\t\t\tnext,\n\t\t\t\t\t\t\t'y'\n\t\t\t\t\t\t) ) as UnitControlOnChangeCallback\n\t\t\t\t}\n\t\t\t\tdragDirection=\"s\"\n\t\t\t/>\n\t\t</ControlWrapper>\n\t);\n}\n\nfunction FocalPointUnitControl( props: UnitControlProps ) {\n\treturn (\n\t\t<StyledUnitControl\n\t\t\tclassName=\"focal-point-picker__controls-position-unit-control\"\n\t\t\tlabelPosition=\"top\"\n\t\t\tmax={ TEXTCONTROL_MAX }\n\t\t\tmin={ TEXTCONTROL_MIN }\n\t\t\tunits={ [ { value: '%', label: '%' } ] }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"]}

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

@@ -12,16 +12,14 @@ import { FocalPointWrapper, PointerIconPathFill, PointerIconPathOutline, Pointer
 import classnames from 'classnames';
 export default function FocalPoint(_ref) {
   let {
-    coordinates = {
-      left: '50%',
-      top: '50%'
-    },
+    left = '50%',
+    top = '50%',
     ...props
   } = _ref;
   const classes = classnames('components-focal-point-picker__icon_container');
   const style = {
-    left: coordinates.left,
-    top: coordinates.top
+    left,
+    top
   };
   return createElement(FocalPointWrapper, _extends({}, props, {
     className: classes,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/focal-point.js"],"names":["FocalPointWrapper","PointerIconPathFill","PointerIconPathOutline","PointerIconSVG","classnames","FocalPoint","coordinates","left","top","props","classes","style"],"mappings":";;;AAAA;AACA;AACA;AACA,SACCA,iBADD,EAECC,mBAFD,EAGCC,sBAHD,EAICC,cAJD,QAKO,4BALP;AAOA;AACA;AACA;;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,eAAe,SAASC,UAAT,OAGX;AAAA,MAHgC;AACnCC,IAAAA,WAAW,GAAG;AAAEC,MAAAA,IAAI,EAAE,KAAR;AAAeC,MAAAA,GAAG,EAAE;AAApB,KADqB;AAEnC,OAAGC;AAFgC,GAGhC;AACH,QAAMC,OAAO,GAAGN,UAAU,CACzB,+CADyB,CAA1B;AAIA,QAAMO,KAAK,GAAG;AACbJ,IAAAA,IAAI,EAAED,WAAW,CAACC,IADL;AAEbC,IAAAA,GAAG,EAAEF,WAAW,CAACE;AAFJ,GAAd;AAKA,SACC,cAAC,iBAAD,eAAwBC,KAAxB;AAAgC,IAAA,SAAS,EAAGC,OAA5C;AAAsD,IAAA,KAAK,EAAGC;AAA9D,MACC,cAAC,cAAD;AACC,IAAA,SAAS,EAAC,qCADX;AAEC,IAAA,KAAK,EAAC,4BAFP;AAGC,IAAA,OAAO,EAAC;AAHT,KAKC,cAAC,sBAAD;AACC,IAAA,SAAS,EAAC,6CADX;AAEC,IAAA,CAAC,EAAC;AAFH,IALD,EASC,cAAC,mBAAD;AACC,IAAA,SAAS,EAAC,0CADX;AAEC,IAAA,CAAC,EAAC;AAFH,IATD,CADD,CADD;AAkBA","sourcesContent":["/**\n * Internal dependencies\n */\nimport {\n\tFocalPointWrapper,\n\tPointerIconPathFill,\n\tPointerIconPathOutline,\n\tPointerIconSVG,\n} from './styles/focal-point-style';\n\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\nexport default function FocalPoint( {\n\tcoordinates = { left: '50%', top: '50%' },\n\t...props\n} ) {\n\tconst classes = classnames(\n\t\t'components-focal-point-picker__icon_container'\n\t);\n\n\tconst style = {\n\t\tleft: coordinates.left,\n\t\ttop: coordinates.top,\n\t};\n\n\treturn (\n\t\t<FocalPointWrapper { ...props } className={ classes } style={ style }>\n\t\t\t<PointerIconSVG\n\t\t\t\tclassName=\"components-focal-point-picker__icon\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tviewBox=\"0 0 30 30\"\n\t\t\t>\n\t\t\t\t<PointerIconPathOutline\n\t\t\t\t\tclassName=\"components-focal-point-picker__icon-outline\"\n\t\t\t\t\td=\"M15 1C7.3 1 1 7.3 1 15s6.3 14 14 14 14-6.3 14-14S22.7 1 15 1zm0 22c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z\"\n\t\t\t\t/>\n\t\t\t\t<PointerIconPathFill\n\t\t\t\t\tclassName=\"components-focal-point-picker__icon-fill\"\n\t\t\t\t\td=\"M15 3C8.4 3 3 8.4 3 15s5.4 12 12 12 12-5.4 12-12S21.6 3 15 3zm0 22C9.5 25 5 20.5 5 15S9.5 5 15 5s10 4.5 10 10-4.5 10-10 10z\"\n\t\t\t\t/>\n\t\t\t</PointerIconSVG>\n\t\t</FocalPointWrapper>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/focal-point.tsx"],"names":["FocalPointWrapper","PointerIconPathFill","PointerIconPathOutline","PointerIconSVG","classnames","FocalPoint","left","top","props","classes","style"],"mappings":";;;AAAA;AACA;AACA;AACA,SACCA,iBADD,EAECC,mBAFD,EAGCC,sBAHD,EAICC,cAJD,QAKO,4BALP;AAOA;AACA;AACA;;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAIA,eAAe,SAASC,UAAT,OAIwC;AAAA,MAJnB;AACnCC,IAAAA,IAAI,GAAG,KAD4B;AAEnCC,IAAAA,GAAG,GAAG,KAF6B;AAGnC,OAAGC;AAHgC,GAImB;AACtD,QAAMC,OAAO,GAAGL,UAAU,CACzB,+CADyB,CAA1B;AAIA,QAAMM,KAAK,GAAG;AAAEJ,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAd;AAEA,SACC,cAAC,iBAAD,eAAwBC,KAAxB;AAAgC,IAAA,SAAS,EAAGC,OAA5C;AAAsD,IAAA,KAAK,EAAGC;AAA9D,MACC,cAAC,cAAD;AACC,IAAA,SAAS,EAAC,qCADX;AAEC,IAAA,KAAK,EAAC,4BAFP;AAGC,IAAA,OAAO,EAAC;AAHT,KAKC,cAAC,sBAAD;AACC,IAAA,SAAS,EAAC,6CADX;AAEC,IAAA,CAAC,EAAC;AAFH,IALD,EASC,cAAC,mBAAD;AACC,IAAA,SAAS,EAAC,0CADX;AAEC,IAAA,CAAC,EAAC;AAFH,IATD,CADD,CADD;AAkBA","sourcesContent":["/**\n * Internal dependencies\n */\nimport {\n\tFocalPointWrapper,\n\tPointerIconPathFill,\n\tPointerIconPathOutline,\n\tPointerIconSVG,\n} from './styles/focal-point-style';\n\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { FocalPointProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nexport default function FocalPoint( {\n\tleft = '50%',\n\ttop = '50%',\n\t...props\n}: WordPressComponentProps< FocalPointProps, 'div' > ) {\n\tconst classes = classnames(\n\t\t'components-focal-point-picker__icon_container'\n\t);\n\n\tconst style = { left, top };\n\n\treturn (\n\t\t<FocalPointWrapper { ...props } className={ classes } style={ style }>\n\t\t\t<PointerIconSVG\n\t\t\t\tclassName=\"components-focal-point-picker__icon\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tviewBox=\"0 0 30 30\"\n\t\t\t>\n\t\t\t\t<PointerIconPathOutline\n\t\t\t\t\tclassName=\"components-focal-point-picker__icon-outline\"\n\t\t\t\t\td=\"M15 1C7.3 1 1 7.3 1 15s6.3 14 14 14 14-6.3 14-14S22.7 1 15 1zm0 22c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z\"\n\t\t\t\t/>\n\t\t\t\t<PointerIconPathFill\n\t\t\t\t\tclassName=\"components-focal-point-picker__icon-fill\"\n\t\t\t\t\td=\"M15 3C8.4 3 3 8.4 3 15s5.4 12 12 12 12-5.4 12-12S21.6 3 15 3zm0 22C9.5 25 5 20.5 5 15S9.5 5 15 5s10 4.5 10 10-4.5 10-10 10z\"\n\t\t\t\t/>\n\t\t\t</PointerIconSVG>\n\t\t</FocalPointWrapper>\n\t);\n}\n"]}

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

@@ -1,30 +1,21 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-
 import { GridView, GridLineX, GridLineY } from './styles/focal-point-picker-style';
-import { useUpdateEffect } from '../utils/hooks';
 export default function FocalPointPickerGrid(_ref) {
   let {
-    bounds = {},
-    value,
+    bounds,
     ...props
   } = _ref;
-  const animationProps = useRevealAnimation(value);
-  const style = {
-    width: bounds.width,
-    height: bounds.height
-  };
-  return createElement(GridView, _extends({}, props, animationProps, {
+  return createElement(GridView, _extends({}, props, {
     className: "components-focal-point-picker__grid",
-    style: style
+    style: {
+      width: bounds.width,
+      height: bounds.height
+    }
   }), createElement(GridLineX, {
     style: {
       top: '33%'
@@ -43,23 +34,4 @@ export default function FocalPointPickerGrid(_ref) {
     }
   }));
 }
-/**
- * Custom hook that renders the "flash" animation whenever the value changes.
- *
- * @param {string} value Value of (box) side.
- */
-
-function useRevealAnimation(value) {
-  const [isActive, setIsActive] = useState(false);
-  useUpdateEffect(() => {
-    setIsActive(true);
-    const timeout = window.setTimeout(() => {
-      setIsActive(false);
-    }, 600);
-    return () => window.clearTimeout(timeout);
-  }, [value]);
-  return {
-    isActive
-  };
-}
 //# sourceMappingURL=grid.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/grid.js"],"names":["useState","GridView","GridLineX","GridLineY","useUpdateEffect","FocalPointPickerGrid","bounds","value","props","animationProps","useRevealAnimation","style","width","height","top","left","isActive","setIsActive","timeout","window","setTimeout","clearTimeout"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,QAAT,QAAyB,oBAAzB;AAEA;AACA;AACA;;AACA,SACCC,QADD,EAECC,SAFD,EAGCC,SAHD,QAIO,mCAJP;AAKA,SAASC,eAAT,QAAgC,gBAAhC;AAEA,eAAe,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,cAAC,QAAD,eACML,KADN,EAEMC,cAFN;AAGC,IAAA,SAAS,EAAC,qCAHX;AAIC,IAAA,KAAK,EAAGE;AAJT,MAMC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEG,MAAAA,GAAG,EAAE;AAAP;AAAnB,IAND,EAOC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEA,MAAAA,GAAG,EAAE;AAAP;AAAnB,IAPD,EAQC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEC,MAAAA,IAAI,EAAE;AAAR;AAAnB,IARD,EASC,cAAC,SAAD;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,IAA4BjB,QAAQ,CAAE,KAAF,CAA1C;AAEAI,EAAAA,eAAe,CAAE,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,GAPc,EAOZ,CAAEX,KAAF,CAPY,CAAf;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"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/grid.tsx"],"names":["GridView","GridLineX","GridLineY","FocalPointPickerGrid","bounds","props","width","height","top","left"],"mappings":";;;AAAA;AACA;AACA;AACA,SACCA,QADD,EAECC,SAFD,EAGCC,SAHD,QAIO,mCAJP;AAQA,eAAe,SAASC,oBAAT,OAGkD;AAAA,MAHnB;AAC7CC,IAAAA,MAD6C;AAE7C,OAAGC;AAF0C,GAGmB;AAChE,SACC,cAAC,QAAD,eACMA,KADN;AAEC,IAAA,SAAS,EAAC,qCAFX;AAGC,IAAA,KAAK,EAAG;AACPC,MAAAA,KAAK,EAAEF,MAAM,CAACE,KADP;AAEPC,MAAAA,MAAM,EAAEH,MAAM,CAACG;AAFR;AAHT,MAQC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEC,MAAAA,GAAG,EAAE;AAAP;AAAnB,IARD,EASC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEA,MAAAA,GAAG,EAAE;AAAP;AAAnB,IATD,EAUC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEC,MAAAA,IAAI,EAAE;AAAR;AAAnB,IAVD,EAWC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEA,MAAAA,IAAI,EAAE;AAAR;AAAnB,IAXD,CADD;AAeA","sourcesContent":["/**\n * Internal dependencies\n */\nimport {\n\tGridView,\n\tGridLineX,\n\tGridLineY,\n} from './styles/focal-point-picker-style';\nimport type { FocalPointPickerGridProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context/wordpress-component';\n\nexport default function FocalPointPickerGrid( {\n\tbounds,\n\t...props\n}: WordPressComponentProps< FocalPointPickerGridProps, 'div' > ) {\n\treturn (\n\t\t<GridView\n\t\t\t{ ...props }\n\t\t\tclassName=\"components-focal-point-picker__grid\"\n\t\t\tstyle={ {\n\t\t\t\twidth: bounds.width,\n\t\t\t\theight: bounds.height,\n\t\t\t} }\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"]}