@wordpress/components 25.14.0 → 25.15.1-next.79a6196f.0

package/build/mobile/keyboard-aware-flat-list/index.ios.js

@@ -7,15 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.KeyboardAwareFlatList = void 0;
 var _react = require("react");
 var _reactNative = require("react-native");
-var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
 var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
+var _useScroll = _interopRequireDefault(require("./use-scroll"));
 var _useTextInputOffset = _interopRequireDefault(require("./use-text-input-offset"));
-var _useKeyboardOffset = _interopRequireDefault(require("./use-keyboard-offset"));
-var _useScrollToTextInput = _interopRequireDefault(require("./use-scroll-to-text-input"));
 var _useTextInputCaretPosition = _interopRequireDefault(require("./use-text-input-caret-position"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
  * External dependencies
  */
@@ -28,95 +25,66 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * Internal dependencies
  */
 
+const DEFAULT_FONT_SIZE = 16;
 const AnimatedScrollView = _reactNativeReanimated.default.createAnimatedComponent(_reactNative.ScrollView);
 
+/** @typedef {import('@wordpress/element').RefObject} RefObject */
 /**
  * React component that provides a FlatList that is aware of the keyboard state and can scroll
  * to the currently focused TextInput.
  *
- * @param {Object}   props                              Component props.
- * @param {number}   props.extraScrollHeight            Extra scroll height for the content.
- * @param {Function} props.innerRef                     Function to pass the ScrollView ref to the parent component.
- * @param {Function} props.onScroll                     Function to be called when the list is scrolled.
- * @param {boolean}  props.scrollEnabled                Whether the list can be scrolled.
- * @param {Object}   props.scrollViewStyle              Additional style for the ScrollView component.
- * @param {boolean}  props.shouldPreventAutomaticScroll Whether to prevent scrolling when there's a Keyboard offset set.
- * @param {Object}   props...                           Other props to pass to the FlatList component.
+ * @param {Object}    props                              Component props.
+ * @param {number}    props.extraScrollHeight            Extra scroll height for the content.
+ * @param {Function}  props.onScroll                     Function to be called when the list is scrolled.
+ * @param {boolean}   props.scrollEnabled                Whether the list can be scrolled.
+ * @param {Object}    props.scrollViewStyle              Additional style for the ScrollView component.
+ * @param {boolean}   props.shouldPreventAutomaticScroll Whether to prevent scrolling when there's a Keyboard offset set.
+ * @param {Object}    props...                           Other props to pass to the FlatList component.
+ * @param {RefObject} ref
  * @return {Component} KeyboardAwareFlatList component.
  */
 const KeyboardAwareFlatList = ({
   extraScrollHeight,
-  innerRef,
   onScroll,
   scrollEnabled,
   scrollViewStyle,
   shouldPreventAutomaticScroll,
   ...props
-}) => {
-  const scrollViewRef = (0, _element.useRef)();
-  const scrollViewMeasurements = (0, _element.useRef)();
-  const scrollViewYOffset = (0, _reactNativeReanimated.useSharedValue)(-1);
+}, ref) => {
   const {
-    height: windowHeight,
-    width: windowWidth
-  } = (0, _reactNative.useWindowDimensions)();
-  const isLandscape = windowWidth >= windowHeight;
-  const [keyboardOffset] = (0, _useKeyboardOffset.default)(scrollEnabled, shouldPreventAutomaticScroll);
-  const [currentCaretData] = (0, _useTextInputCaretPosition.default)(scrollEnabled);
+    scrollViewRef,
+    scrollHandler,
+    keyboardOffset,
+    scrollToSection,
+    scrollToElement,
+    onContentSizeChange,
+    lastScrollTo
+  } = (0, _useScroll.default)({
+    scrollEnabled,
+    shouldPreventAutomaticScroll,
+    extraScrollHeight,
+    onScroll,
+    onSizeChange
+  });
   const [getTextInputOffset] = (0, _useTextInputOffset.default)(scrollEnabled, scrollViewRef);
-  const [scrollToTextInputOffset] = (0, _useScrollToTextInput.default)(extraScrollHeight, keyboardOffset, scrollEnabled, scrollViewMeasurements, scrollViewRef, scrollViewYOffset);
   const onScrollToTextInput = (0, _compose.useThrottle)((0, _element.useCallback)(async caret => {
+    const {
+      caretHeight = DEFAULT_FONT_SIZE
+    } = caret !== null && caret !== void 0 ? caret : {};
     const textInputOffset = await getTextInputOffset(caret);
     const hasTextInputOffset = textInputOffset !== null;
     if (hasTextInputOffset) {
-      scrollToTextInputOffset(caret, textInputOffset);
+      scrollToSection(textInputOffset, caretHeight);
     }
-  }, [getTextInputOffset, scrollToTextInputOffset]), 200, {
+  }, [getTextInputOffset, scrollToSection]), 200, {
     leading: false
   });
+  const [currentCaretData] = (0, _useTextInputCaretPosition.default)(scrollEnabled);
+  const onSizeChange = (0, _element.useCallback)(() => onScrollToTextInput(currentCaretData), [currentCaretData, onScrollToTextInput]);
   (0, _element.useEffect)(() => {
     onScrollToTextInput(currentCaretData);
   }, [currentCaretData, onScrollToTextInput]);
 
-  // When the orientation changes, the ScrollView measurements
-  // need to be re-calculated.
-  (0, _element.useEffect)(() => {
-    scrollViewMeasurements.current = null;
-  }, [isLandscape]);
-  const scrollHandler = (0, _reactNativeReanimated.useAnimatedScrollHandler)({
-    onScroll: event => {
-      const {
-        contentOffset
-      } = event;
-      scrollViewYOffset.value = contentOffset.y;
-      onScroll(event);
-    }
-  });
-  const measureScrollView = (0, _element.useCallback)(() => {
-    if (scrollViewRef.current) {
-      const scrollRef = scrollViewRef.current.getNativeScrollRef();
-      scrollRef.measureInWindow((_x, y, width, height) => {
-        scrollViewMeasurements.current = {
-          y,
-          width,
-          height
-        };
-      });
-    }
-  }, []);
-  const onContentSizeChange = (0, _element.useCallback)(() => {
-    onScrollToTextInput(currentCaretData);
-
-    // Sets the first values when the content size changes.
-    if (!scrollViewMeasurements.current) {
-      measureScrollView();
-    }
-  }, [measureScrollView, onScrollToTextInput, currentCaretData]);
-  const getRef = (0, _element.useCallback)(ref => {
-    scrollViewRef.current = ref;
-    innerRef(ref);
-  }, [innerRef]);
-
   // Adds content insets when the keyboard is opened to have
   // extra padding at the bottom.
   const contentInset = {
@@ -125,13 +93,21 @@ const KeyboardAwareFlatList = ({
   const style = [{
     flex: 1
   }, scrollViewStyle];
+  (0, _element.useImperativeHandle)(ref, () => {
+    return {
+      scrollViewRef: scrollViewRef.current,
+      scrollToSection,
+      scrollToElement,
+      lastScrollTo
+    };
+  });
   return (0, _react.createElement)(AnimatedScrollView, {
     automaticallyAdjustContentInsets: false,
     contentInset: contentInset,
     keyboardShouldPersistTaps: "handled",
     onContentSizeChange: onContentSizeChange,
     onScroll: scrollHandler,
-    ref: getRef,
+    ref: scrollViewRef,
     scrollEnabled: scrollEnabled,
     scrollEventThrottle: 16,
     style: style
@@ -141,6 +117,6 @@ const KeyboardAwareFlatList = ({
   }));
 };
 exports.KeyboardAwareFlatList = KeyboardAwareFlatList;
-var _default = KeyboardAwareFlatList;
+var _default = (0, _element.forwardRef)(KeyboardAwareFlatList);
 exports.default = _default;
 //# sourceMappingURL=index.ios.js.map

package/build/mobile/keyboard-aware-flat-list/index.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_reactNativeReanimated","_interopRequireWildcard","_element","_compose","_useTextInputOffset","_interopRequireDefault","_useKeyboardOffset","_useScrollToTextInput","_useTextInputCaretPosition","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","AnimatedScrollView","Animated","createAnimatedComponent","ScrollView","KeyboardAwareFlatList","extraScrollHeight","innerRef","onScroll","scrollEnabled","scrollViewStyle","shouldPreventAutomaticScroll","props","scrollViewRef","useRef","scrollViewMeasurements","scrollViewYOffset","useSharedValue","height","windowHeight","width","windowWidth","useWindowDimensions","isLandscape","keyboardOffset","useKeyboardOffset","currentCaretData","useTextInputCaretPosition","getTextInputOffset","useTextInputOffset","scrollToTextInputOffset","useScrollToTextInput","onScrollToTextInput","useThrottle","useCallback","caret","textInputOffset","hasTextInputOffset","leading","useEffect","current","scrollHandler","useAnimatedScrollHandler","event","contentOffset","value","y","measureScrollView","scrollRef","getNativeScrollRef","measureInWindow","_x","onContentSizeChange","getRef","ref","contentInset","bottom","style","flex","_react","createElement","automaticallyAdjustContentInsets","keyboardShouldPersistTaps","scrollEventThrottle","FlatList","exports","_default"],"sources":["@wordpress/components/src/mobile/keyboard-aware-flat-list/index.ios.js"],"sourcesContent":["/**\n * External dependencies\n */\n\nimport { ScrollView, FlatList, useWindowDimensions } from 'react-native';\nimport Animated, {\n\tuseAnimatedScrollHandler,\n\tuseSharedValue,\n} from 'react-native-reanimated';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef } from '@wordpress/element';\nimport { useThrottle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport useTextInputOffset from './use-text-input-offset';\nimport useKeyboardOffset from './use-keyboard-offset';\nimport useScrollToTextInput from './use-scroll-to-text-input';\nimport useTextInputCaretPosition from './use-text-input-caret-position';\n\nconst AnimatedScrollView = Animated.createAnimatedComponent( ScrollView );\n\n/**\n * React component that provides a FlatList that is aware of the keyboard state and can scroll\n * to the currently focused TextInput.\n *\n * @param {Object}   props                              Component props.\n * @param {number}   props.extraScrollHeight            Extra scroll height for the content.\n * @param {Function} props.innerRef                     Function to pass the ScrollView ref to the parent component.\n * @param {Function} props.onScroll                     Function to be called when the list is scrolled.\n * @param {boolean}  props.scrollEnabled                Whether the list can be scrolled.\n * @param {Object}   props.scrollViewStyle              Additional style for the ScrollView component.\n * @param {boolean}  props.shouldPreventAutomaticScroll Whether to prevent scrolling when there's a Keyboard offset set.\n * @param {Object}   props...                           Other props to pass to the FlatList component.\n * @return {Component} KeyboardAwareFlatList component.\n */\nexport const KeyboardAwareFlatList = ( {\n\textraScrollHeight,\n\tinnerRef,\n\tonScroll,\n\tscrollEnabled,\n\tscrollViewStyle,\n\tshouldPreventAutomaticScroll,\n\t...props\n} ) => {\n\tconst scrollViewRef = useRef();\n\tconst scrollViewMeasurements = useRef();\n\tconst scrollViewYOffset = useSharedValue( -1 );\n\n\tconst { height: windowHeight, width: windowWidth } = useWindowDimensions();\n\tconst isLandscape = windowWidth >= windowHeight;\n\n\tconst [ keyboardOffset ] = useKeyboardOffset(\n\t\tscrollEnabled,\n\t\tshouldPreventAutomaticScroll\n\t);\n\n\tconst [ currentCaretData ] = useTextInputCaretPosition( scrollEnabled );\n\n\tconst [ getTextInputOffset ] = useTextInputOffset(\n\t\tscrollEnabled,\n\t\tscrollViewRef\n\t);\n\n\tconst [ scrollToTextInputOffset ] = useScrollToTextInput(\n\t\textraScrollHeight,\n\t\tkeyboardOffset,\n\t\tscrollEnabled,\n\t\tscrollViewMeasurements,\n\t\tscrollViewRef,\n\t\tscrollViewYOffset\n\t);\n\n\tconst onScrollToTextInput = useThrottle(\n\t\tuseCallback(\n\t\t\tasync ( caret ) => {\n\t\t\t\tconst textInputOffset = await getTextInputOffset( caret );\n\t\t\t\tconst hasTextInputOffset = textInputOffset !== null;\n\n\t\t\t\tif ( hasTextInputOffset ) {\n\t\t\t\t\tscrollToTextInputOffset( caret, textInputOffset );\n\t\t\t\t}\n\t\t\t},\n\t\t\t[ getTextInputOffset, scrollToTextInputOffset ]\n\t\t),\n\t\t200,\n\t\t{ leading: false }\n\t);\n\n\tuseEffect( () => {\n\t\tonScrollToTextInput( currentCaretData );\n\t}, [ currentCaretData, onScrollToTextInput ] );\n\n\t// When the orientation changes, the ScrollView measurements\n\t// need to be re-calculated.\n\tuseEffect( () => {\n\t\tscrollViewMeasurements.current = null;\n\t}, [ isLandscape ] );\n\n\tconst scrollHandler = useAnimatedScrollHandler( {\n\t\tonScroll: ( event ) => {\n\t\t\tconst { contentOffset } = event;\n\t\t\tscrollViewYOffset.value = contentOffset.y;\n\t\t\tonScroll( event );\n\t\t},\n\t} );\n\n\tconst measureScrollView = useCallback( () => {\n\t\tif ( scrollViewRef.current ) {\n\t\t\tconst scrollRef = scrollViewRef.current.getNativeScrollRef();\n\n\t\t\tscrollRef.measureInWindow( ( _x, y, width, height ) => {\n\t\t\t\tscrollViewMeasurements.current = { y, width, height };\n\t\t\t} );\n\t\t}\n\t}, [] );\n\n\tconst onContentSizeChange = useCallback( () => {\n\t\tonScrollToTextInput( currentCaretData );\n\n\t\t// Sets the first values when the content size changes.\n\t\tif ( ! scrollViewMeasurements.current ) {\n\t\t\tmeasureScrollView();\n\t\t}\n\t}, [ measureScrollView, onScrollToTextInput, currentCaretData ] );\n\n\tconst getRef = useCallback(\n\t\t( ref ) => {\n\t\t\tscrollViewRef.current = ref;\n\t\t\tinnerRef( ref );\n\t\t},\n\t\t[ innerRef ]\n\t);\n\n\t// Adds content insets when the keyboard is opened to have\n\t// extra padding at the bottom.\n\tconst contentInset = { bottom: keyboardOffset };\n\n\tconst style = [ { flex: 1 }, scrollViewStyle ];\n\n\treturn (\n\t\t<AnimatedScrollView\n\t\t\tautomaticallyAdjustContentInsets={ false }\n\t\t\tcontentInset={ contentInset }\n\t\t\tkeyboardShouldPersistTaps=\"handled\"\n\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\tonScroll={ scrollHandler }\n\t\t\tref={ getRef }\n\t\t\tscrollEnabled={ scrollEnabled }\n\t\t\tscrollEventThrottle={ 16 }\n\t\t\tstyle={ style }\n\t\t>\n\t\t\t<FlatList { ...props } scrollEnabled={ false } />\n\t\t</AnimatedScrollView>\n\t);\n};\n\nexport default KeyboardAwareFlatList;\n"],"mappings":"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"}
+{"version":3,"names":["_reactNative","require","_reactNativeReanimated","_interopRequireDefault","_element","_compose","_useScroll","_useTextInputOffset","_useTextInputCaretPosition","DEFAULT_FONT_SIZE","AnimatedScrollView","Animated","createAnimatedComponent","ScrollView","KeyboardAwareFlatList","extraScrollHeight","onScroll","scrollEnabled","scrollViewStyle","shouldPreventAutomaticScroll","props","ref","scrollViewRef","scrollHandler","keyboardOffset","scrollToSection","scrollToElement","onContentSizeChange","lastScrollTo","useScroll","onSizeChange","getTextInputOffset","useTextInputOffset","onScrollToTextInput","useThrottle","useCallback","caret","caretHeight","textInputOffset","hasTextInputOffset","leading","currentCaretData","useTextInputCaretPosition","useEffect","contentInset","bottom","style","flex","useImperativeHandle","current","_react","createElement","automaticallyAdjustContentInsets","keyboardShouldPersistTaps","scrollEventThrottle","FlatList","exports","_default","forwardRef","default"],"sources":["@wordpress/components/src/mobile/keyboard-aware-flat-list/index.ios.js"],"sourcesContent":["/**\n * External dependencies\n */\n\nimport { ScrollView, FlatList } from 'react-native';\nimport Animated from 'react-native-reanimated';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseCallback,\n\tuseEffect,\n\tforwardRef,\n\tuseImperativeHandle,\n} from '@wordpress/element';\nimport { useThrottle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport useScroll from './use-scroll';\nimport useTextInputOffset from './use-text-input-offset';\nimport useTextInputCaretPosition from './use-text-input-caret-position';\n\nconst DEFAULT_FONT_SIZE = 16;\nconst AnimatedScrollView = Animated.createAnimatedComponent( ScrollView );\n\n/** @typedef {import('@wordpress/element').RefObject} RefObject */\n/**\n * React component that provides a FlatList that is aware of the keyboard state and can scroll\n * to the currently focused TextInput.\n *\n * @param {Object}    props                              Component props.\n * @param {number}    props.extraScrollHeight            Extra scroll height for the content.\n * @param {Function}  props.onScroll                     Function to be called when the list is scrolled.\n * @param {boolean}   props.scrollEnabled                Whether the list can be scrolled.\n * @param {Object}    props.scrollViewStyle              Additional style for the ScrollView component.\n * @param {boolean}   props.shouldPreventAutomaticScroll Whether to prevent scrolling when there's a Keyboard offset set.\n * @param {Object}    props...                           Other props to pass to the FlatList component.\n * @param {RefObject} ref\n * @return {Component} KeyboardAwareFlatList component.\n */\nexport const KeyboardAwareFlatList = (\n\t{\n\t\textraScrollHeight,\n\t\tonScroll,\n\t\tscrollEnabled,\n\t\tscrollViewStyle,\n\t\tshouldPreventAutomaticScroll,\n\t\t...props\n\t},\n\tref\n) => {\n\tconst {\n\t\tscrollViewRef,\n\t\tscrollHandler,\n\t\tkeyboardOffset,\n\t\tscrollToSection,\n\t\tscrollToElement,\n\t\tonContentSizeChange,\n\t\tlastScrollTo,\n\t} = useScroll( {\n\t\tscrollEnabled,\n\t\tshouldPreventAutomaticScroll,\n\t\textraScrollHeight,\n\t\tonScroll,\n\t\tonSizeChange,\n\t} );\n\n\tconst [ getTextInputOffset ] = useTextInputOffset(\n\t\tscrollEnabled,\n\t\tscrollViewRef\n\t);\n\n\tconst onScrollToTextInput = useThrottle(\n\t\tuseCallback(\n\t\t\tasync ( caret ) => {\n\t\t\t\tconst { caretHeight = DEFAULT_FONT_SIZE } = caret ?? {};\n\t\t\t\tconst textInputOffset = await getTextInputOffset( caret );\n\t\t\t\tconst hasTextInputOffset = textInputOffset !== null;\n\n\t\t\t\tif ( hasTextInputOffset ) {\n\t\t\t\t\tscrollToSection( textInputOffset, caretHeight );\n\t\t\t\t}\n\t\t\t},\n\t\t\t[ getTextInputOffset, scrollToSection ]\n\t\t),\n\t\t200,\n\t\t{ leading: false }\n\t);\n\n\tconst [ currentCaretData ] = useTextInputCaretPosition( scrollEnabled );\n\n\tconst onSizeChange = useCallback(\n\t\t() => onScrollToTextInput( currentCaretData ),\n\t\t[ currentCaretData, onScrollToTextInput ]\n\t);\n\n\tuseEffect( () => {\n\t\tonScrollToTextInput( currentCaretData );\n\t}, [ currentCaretData, onScrollToTextInput ] );\n\n\t// Adds content insets when the keyboard is opened to have\n\t// extra padding at the bottom.\n\tconst contentInset = { bottom: keyboardOffset };\n\n\tconst style = [ { flex: 1 }, scrollViewStyle ];\n\n\tuseImperativeHandle( ref, () => {\n\t\treturn {\n\t\t\tscrollViewRef: scrollViewRef.current,\n\t\t\tscrollToSection,\n\t\t\tscrollToElement,\n\t\t\tlastScrollTo,\n\t\t};\n\t} );\n\n\treturn (\n\t\t<AnimatedScrollView\n\t\t\tautomaticallyAdjustContentInsets={ false }\n\t\t\tcontentInset={ contentInset }\n\t\t\tkeyboardShouldPersistTaps=\"handled\"\n\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\tonScroll={ scrollHandler }\n\t\t\tref={ scrollViewRef }\n\t\t\tscrollEnabled={ scrollEnabled }\n\t\t\tscrollEventThrottle={ 16 }\n\t\t\tstyle={ style }\n\t\t>\n\t\t\t<FlatList { ...props } scrollEnabled={ false } />\n\t\t</AnimatedScrollView>\n\t);\n};\n\nexport default forwardRef( KeyboardAwareFlatList );\n"],"mappings":";;;;;;;;AAIA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAKA,IAAAG,QAAA,GAAAH,OAAA;AAMA,IAAAI,QAAA,GAAAJ,OAAA;AAKA,IAAAK,UAAA,GAAAH,sBAAA,CAAAF,OAAA;AACA,IAAAM,mBAAA,GAAAJ,sBAAA,CAAAF,OAAA;AACA,IAAAO,0BAAA,GAAAL,sBAAA,CAAAF,OAAA;AAvBA;AACA;AACA;;AAKA;AACA;AACA;;AASA;AACA;AACA;;AAKA,MAAMQ,iBAAiB,GAAG,EAAE;AAC5B,MAAMC,kBAAkB,GAAGC,8BAAQ,CAACC,uBAAuB,CAAEC,uBAAW,CAAC;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,qBAAqB,GAAGA,CACpC;EACCC,iBAAiB;EACjBC,QAAQ;EACRC,aAAa;EACbC,eAAe;EACfC,4BAA4B;EAC5B,GAAGC;AACJ,CAAC,EACDC,GAAG,KACC;EACJ,MAAM;IACLC,aAAa;IACbC,aAAa;IACbC,cAAc;IACdC,eAAe;IACfC,eAAe;IACfC,mBAAmB;IACnBC;EACD,CAAC,GAAG,IAAAC,kBAAS,EAAE;IACdZ,aAAa;IACbE,4BAA4B;IAC5BJ,iBAAiB;IACjBC,QAAQ;IACRc;EACD,CAAE,CAAC;EAEH,MAAM,CAAEC,kBAAkB,CAAE,GAAG,IAAAC,2BAAkB,EAChDf,aAAa,EACbK,aACD,CAAC;EAED,MAAMW,mBAAmB,GAAG,IAAAC,oBAAW,EACtC,IAAAC,oBAAW,EACV,MAAQC,KAAK,IAAM;IAClB,MAAM;MAAEC,WAAW,GAAG5B;IAAkB,CAAC,GAAG2B,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC;IACvD,MAAME,eAAe,GAAG,MAAMP,kBAAkB,CAAEK,KAAM,CAAC;IACzD,MAAMG,kBAAkB,GAAGD,eAAe,KAAK,IAAI;IAEnD,IAAKC,kBAAkB,EAAG;MACzBd,eAAe,CAAEa,eAAe,EAAED,WAAY,CAAC;IAChD;EACD,CAAC,EACD,CAAEN,kBAAkB,EAAEN,eAAe,CACtC,CAAC,EACD,GAAG,EACH;IAAEe,OAAO,EAAE;EAAM,CAClB,CAAC;EAED,MAAM,CAAEC,gBAAgB,CAAE,GAAG,IAAAC,kCAAyB,EAAEzB,aAAc,CAAC;EAEvE,MAAMa,YAAY,GAAG,IAAAK,oBAAW,EAC/B,MAAMF,mBAAmB,CAAEQ,gBAAiB,CAAC,EAC7C,CAAEA,gBAAgB,EAAER,mBAAmB,CACxC,CAAC;EAED,IAAAU,kBAAS,EAAE,MAAM;IAChBV,mBAAmB,CAAEQ,gBAAiB,CAAC;EACxC,CAAC,EAAE,CAAEA,gBAAgB,EAAER,mBAAmB,CAAG,CAAC;;EAE9C;EACA;EACA,MAAMW,YAAY,GAAG;IAAEC,MAAM,EAAErB;EAAe,CAAC;EAE/C,MAAMsB,KAAK,GAAG,CAAE;IAAEC,IAAI,EAAE;EAAE,CAAC,EAAE7B,eAAe,CAAE;EAE9C,IAAA8B,4BAAmB,EAAE3B,GAAG,EAAE,MAAM;IAC/B,OAAO;MACNC,aAAa,EAAEA,aAAa,CAAC2B,OAAO;MACpCxB,eAAe;MACfC,eAAe;MACfE;IACD,CAAC;EACF,CAAE,CAAC;EAEH,OACC,IAAAsB,MAAA,CAAAC,aAAA,EAACzC,kBAAkB;IAClB0C,gCAAgC,EAAG,KAAO;IAC1CR,YAAY,EAAGA,YAAc;IAC7BS,yBAAyB,EAAC,SAAS;IACnC1B,mBAAmB,EAAGA,mBAAqB;IAC3CX,QAAQ,EAAGO,aAAe;IAC1BF,GAAG,EAAGC,aAAe;IACrBL,aAAa,EAAGA,aAAe;IAC/BqC,mBAAmB,EAAG,EAAI;IAC1BR,KAAK,EAAGA;EAAO,GAEf,IAAAI,MAAA,CAAAC,aAAA,EAACnD,YAAA,CAAAuD,QAAQ;IAAA,GAAMnC,KAAK;IAAGH,aAAa,EAAG;EAAO,CAAE,CAC7B,CAAC;AAEvB,CAAC;AAACuC,OAAA,CAAA1C,qBAAA,GAAAA,qBAAA;AAAA,IAAA2C,QAAA,GAEa,IAAAC,mBAAU,EAAE5C,qBAAsB,CAAC;AAAA0C,OAAA,CAAAG,OAAA,GAAAF,QAAA"}

package/build/mobile/keyboard-aware-flat-list/use-scroll-to-element.native.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useScrollToElement;
+var _element = require("@wordpress/element");
+/**
+ * WordPress dependencies
+ */
+
+/** @typedef {import('@wordpress/element').RefObject} RefObject */
+/**
+ * Hook to scroll to a specified element by taking into account the Keyboard
+ * and the Header.
+ *
+ * @param {RefObject} scrollViewRef   Scroll view reference.
+ * @param {Function}  scrollToSection Function to scroll.
+ * @return {Function[]} Function to scroll to an element.
+ */
+function useScrollToElement(scrollViewRef, scrollToSection) {
+  /**
+   * Function to scroll to an element.
+   *
+   * @param {RefObject} elementRef Ref of the element.
+   */
+  const scrollToElement = (0, _element.useCallback)(elementRef => {
+    if (!scrollViewRef.current || !elementRef) {
+      return;
+    }
+    elementRef.current.measureLayout(scrollViewRef.current, (_x, y, _width, height) => {
+      if (height || y) {
+        scrollToSection(Math.round(y), height);
+      }
+    }, () => {});
+  }, [scrollViewRef, scrollToSection]);
+  return [scrollToElement];
+}
+//# sourceMappingURL=use-scroll-to-element.native.js.map

package/build/mobile/keyboard-aware-flat-list/use-scroll-to-element.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","useScrollToElement","scrollViewRef","scrollToSection","scrollToElement","useCallback","elementRef","current","measureLayout","_x","y","_width","height","Math","round"],"sources":["@wordpress/components/src/mobile/keyboard-aware-flat-list/use-scroll-to-element.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\n\n/** @typedef {import('@wordpress/element').RefObject} RefObject */\n/**\n * Hook to scroll to a specified element by taking into account the Keyboard\n * and the Header.\n *\n * @param {RefObject} scrollViewRef   Scroll view reference.\n * @param {Function}  scrollToSection Function to scroll.\n * @return {Function[]} Function to scroll to an element.\n */\nexport default function useScrollToElement( scrollViewRef, scrollToSection ) {\n\t/**\n\t * Function to scroll to an element.\n\t *\n\t * @param {RefObject} elementRef Ref of the element.\n\t */\n\tconst scrollToElement = useCallback(\n\t\t( elementRef ) => {\n\t\t\tif ( ! scrollViewRef.current || ! elementRef ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\telementRef.current.measureLayout(\n\t\t\t\tscrollViewRef.current,\n\t\t\t\t( _x, y, _width, height ) => {\n\t\t\t\t\tif ( height || y ) {\n\t\t\t\t\t\tscrollToSection( Math.round( y ), height );\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t() => {}\n\t\t\t);\n\t\t},\n\t\t[ scrollViewRef, scrollToSection ]\n\t);\n\n\treturn [ scrollToElement ];\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASC,kBAAkBA,CAAEC,aAAa,EAAEC,eAAe,EAAG;EAC5E;AACD;AACA;AACA;AACA;EACC,MAAMC,eAAe,GAAG,IAAAC,oBAAW,EAChCC,UAAU,IAAM;IACjB,IAAK,CAAEJ,aAAa,CAACK,OAAO,IAAI,CAAED,UAAU,EAAG;MAC9C;IACD;IAEAA,UAAU,CAACC,OAAO,CAACC,aAAa,CAC/BN,aAAa,CAACK,OAAO,EACrB,CAAEE,EAAE,EAAEC,CAAC,EAAEC,MAAM,EAAEC,MAAM,KAAM;MAC5B,IAAKA,MAAM,IAAIF,CAAC,EAAG;QAClBP,eAAe,CAAEU,IAAI,CAACC,KAAK,CAAEJ,CAAE,CAAC,EAAEE,MAAO,CAAC;MAC3C;IACD,CAAC,EACD,MAAM,CAAC,CACR,CAAC;EACF,CAAC,EACD,CAAEV,aAAa,EAAEC,eAAe,CACjC,CAAC;EAED,OAAO,CAAEC,eAAe,CAAE;AAC3B"}

package/build/mobile/keyboard-aware-flat-list/{use-scroll-to-text-input.native.js → use-scroll-to-section.native.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = useScrollToTextInput;
+exports.default = useScrollToSection;
 var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
 var _element = require("@wordpress/element");
 /**
@@ -14,24 +14,21 @@ var _element = require("@wordpress/element");
  * WordPress dependencies
  */
 
-const DEFAULT_FONT_SIZE = 16;
-
 /** @typedef {import('@wordpress/element').RefObject} RefObject */
 /** @typedef {import('react-native-reanimated').SharedValue} SharedValue */
 /**
- * Hook to scroll to the currently focused TextInput
- * depending on where the caret is placed taking into
- * account the Keyboard and the Header.
+ * Hook to scroll to a specified section by taking into account the Keyboard
+ * and the Header.
  *
  * @param {number}      extraScrollHeight      Extra space to not overlap the content.
  * @param {number}      keyboardOffset         Keyboard space offset.
  * @param {boolean}     scrollEnabled          Whether the scroll is enabled or not.
  * @param {RefObject}   scrollViewMeasurements ScrollView Layout measurements.
- * @param {RefObject}   scrollViewRef          ScrollView reference.
+ * @param {RefObject}   scrollViewRef          Scroll view reference.
  * @param {SharedValue} scrollViewYOffset      Current offset position of the ScrollView.
- * @return {Function[]} Function to scroll to the current TextInput's offset.
+ * @return {Function[]} Function to scroll to a section.
  */
-function useScrollToTextInput(extraScrollHeight, keyboardOffset, scrollEnabled, scrollViewMeasurements, scrollViewRef, scrollViewYOffset) {
+function useScrollToSection(extraScrollHeight, keyboardOffset, scrollEnabled, scrollViewMeasurements, scrollViewRef, scrollViewYOffset) {
   const {
     top,
     bottom
@@ -39,42 +36,38 @@ function useScrollToTextInput(extraScrollHeight, keyboardOffset, scrollEnabled,
   const insets = top + bottom;
 
   /**
-   * Function to scroll to the current TextInput's offset.
+   * Function to scroll to a section.
    *
-   * @param {Object} caret             The caret position data of the currently focused TextInput.
-   * @param {number} caret.caretHeight The height of the caret.
-   * @param {number} textInputOffset   The offset calculated with the caret's Y coordinate + the
-   *                                   TextInput's Y coord or height value.
+   * @param {Object} section        Section data to scroll to.
+   * @param {number} section.y      Y-coordinate of of the section.
+   * @param {number} section.height Height of the section.
    */
-  const scrollToTextInputOffset = (0, _element.useCallback)((caret, textInputOffset) => {
-    const {
-      caretHeight = DEFAULT_FONT_SIZE
-    } = caret !== null && caret !== void 0 ? caret : {};
-    if (!scrollViewRef.current || !scrollEnabled || !scrollViewMeasurements.current) {
+  const scrollToSection = (0, _element.useCallback)((sectionY, sectionHeight) => {
+    if (!scrollViewRef.current || !scrollEnabled || !scrollViewMeasurements) {
       return;
     }
     const currentScrollViewYOffset = Math.max(0, scrollViewYOffset.value);
 
-    // Scroll up.
-    if (textInputOffset < currentScrollViewYOffset) {
+    // Scroll to the top of the section.
+    if (sectionY < currentScrollViewYOffset) {
       scrollViewRef.current.scrollTo({
-        y: textInputOffset,
+        y: sectionY,
         animated: true
       });
       return;
     }
-    const availableScreenSpace = Math.abs(Math.floor(scrollViewMeasurements.current.height - (keyboardOffset + extraScrollHeight + caretHeight)));
+    const availableScreenSpace = Math.abs(Math.floor(scrollViewMeasurements.current.height - (keyboardOffset + extraScrollHeight + sectionHeight)));
     const maxOffset = Math.floor(currentScrollViewYOffset + availableScreenSpace);
-    const isAtTheTop = textInputOffset < scrollViewMeasurements.current.y + insets;
+    const isAtTheTop = sectionY < scrollViewMeasurements.current.y + insets;
 
-    // Scroll down.
-    if (textInputOffset > maxOffset && !isAtTheTop) {
+    // Scroll to the bottom of the section.
+    if (sectionY > maxOffset && !isAtTheTop) {
       scrollViewRef.current.scrollTo({
-        y: textInputOffset - availableScreenSpace,
+        y: sectionY - availableScreenSpace,
         animated: true
       });
     }
   }, [extraScrollHeight, insets, keyboardOffset, scrollEnabled, scrollViewMeasurements, scrollViewRef, scrollViewYOffset]);
-  return [scrollToTextInputOffset];
+  return [scrollToSection];
 }
-//# sourceMappingURL=use-scroll-to-text-input.native.js.map
+//# sourceMappingURL=use-scroll-to-section.native.js.map

package/build/mobile/keyboard-aware-flat-list/use-scroll-to-section.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNativeSafeAreaContext","require","_element","useScrollToSection","extraScrollHeight","keyboardOffset","scrollEnabled","scrollViewMeasurements","scrollViewRef","scrollViewYOffset","top","bottom","useSafeAreaInsets","insets","scrollToSection","useCallback","sectionY","sectionHeight","current","currentScrollViewYOffset","Math","max","value","scrollTo","y","animated","availableScreenSpace","abs","floor","height","maxOffset","isAtTheTop"],"sources":["@wordpress/components/src/mobile/keyboard-aware-flat-list/use-scroll-to-section.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\n\n/** @typedef {import('@wordpress/element').RefObject} RefObject */\n/** @typedef {import('react-native-reanimated').SharedValue} SharedValue */\n/**\n * Hook to scroll to a specified section by taking into account the Keyboard\n * and the Header.\n *\n * @param {number}      extraScrollHeight      Extra space to not overlap the content.\n * @param {number}      keyboardOffset         Keyboard space offset.\n * @param {boolean}     scrollEnabled          Whether the scroll is enabled or not.\n * @param {RefObject}   scrollViewMeasurements ScrollView Layout measurements.\n * @param {RefObject}   scrollViewRef          Scroll view reference.\n * @param {SharedValue} scrollViewYOffset      Current offset position of the ScrollView.\n * @return {Function[]} Function to scroll to a section.\n */\nexport default function useScrollToSection(\n\textraScrollHeight,\n\tkeyboardOffset,\n\tscrollEnabled,\n\tscrollViewMeasurements,\n\tscrollViewRef,\n\tscrollViewYOffset\n) {\n\tconst { top, bottom } = useSafeAreaInsets();\n\tconst insets = top + bottom;\n\n\t/**\n\t * Function to scroll to a section.\n\t *\n\t * @param {Object} section        Section data to scroll to.\n\t * @param {number} section.y      Y-coordinate of of the section.\n\t * @param {number} section.height Height of the section.\n\t */\n\tconst scrollToSection = useCallback(\n\t\t( sectionY, sectionHeight ) => {\n\t\t\tif (\n\t\t\t\t! scrollViewRef.current ||\n\t\t\t\t! scrollEnabled ||\n\t\t\t\t! scrollViewMeasurements\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst currentScrollViewYOffset = Math.max(\n\t\t\t\t0,\n\t\t\t\tscrollViewYOffset.value\n\t\t\t);\n\n\t\t\t// Scroll to the top of the section.\n\t\t\tif ( sectionY < currentScrollViewYOffset ) {\n\t\t\t\tscrollViewRef.current.scrollTo( {\n\t\t\t\t\ty: sectionY,\n\t\t\t\t\tanimated: true,\n\t\t\t\t} );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst availableScreenSpace = Math.abs(\n\t\t\t\tMath.floor(\n\t\t\t\t\tscrollViewMeasurements.current.height -\n\t\t\t\t\t\t( keyboardOffset + extraScrollHeight + sectionHeight )\n\t\t\t\t)\n\t\t\t);\n\t\t\tconst maxOffset = Math.floor(\n\t\t\t\tcurrentScrollViewYOffset + availableScreenSpace\n\t\t\t);\n\n\t\t\tconst isAtTheTop =\n\t\t\t\tsectionY < scrollViewMeasurements.current.y + insets;\n\n\t\t\t// Scroll to the bottom of the section.\n\t\t\tif ( sectionY > maxOffset && ! isAtTheTop ) {\n\t\t\t\tscrollViewRef.current.scrollTo( {\n\t\t\t\t\ty: sectionY - availableScreenSpace,\n\t\t\t\t\tanimated: true,\n\t\t\t\t} );\n\t\t\t}\n\t\t},\n\t\t[\n\t\t\textraScrollHeight,\n\t\t\tinsets,\n\t\t\tkeyboardOffset,\n\t\t\tscrollEnabled,\n\t\t\tscrollViewMeasurements,\n\t\t\tscrollViewRef,\n\t\t\tscrollViewYOffset,\n\t\t]\n\t);\n\n\treturn [ scrollToSection ];\n}\n"],"mappings":";;;;;;AAGA,IAAAA,2BAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASE,kBAAkBA,CACzCC,iBAAiB,EACjBC,cAAc,EACdC,aAAa,EACbC,sBAAsB,EACtBC,aAAa,EACbC,iBAAiB,EAChB;EACD,MAAM;IAAEC,GAAG;IAAEC;EAAO,CAAC,GAAG,IAAAC,6CAAiB,EAAC,CAAC;EAC3C,MAAMC,MAAM,GAAGH,GAAG,GAAGC,MAAM;;EAE3B;AACD;AACA;AACA;AACA;AACA;AACA;EACC,MAAMG,eAAe,GAAG,IAAAC,oBAAW,EAClC,CAAEC,QAAQ,EAAEC,aAAa,KAAM;IAC9B,IACC,CAAET,aAAa,CAACU,OAAO,IACvB,CAAEZ,aAAa,IACf,CAAEC,sBAAsB,EACvB;MACD;IACD;IAEA,MAAMY,wBAAwB,GAAGC,IAAI,CAACC,GAAG,CACxC,CAAC,EACDZ,iBAAiB,CAACa,KACnB,CAAC;;IAED;IACA,IAAKN,QAAQ,GAAGG,wBAAwB,EAAG;MAC1CX,aAAa,CAACU,OAAO,CAACK,QAAQ,CAAE;QAC/BC,CAAC,EAAER,QAAQ;QACXS,QAAQ,EAAE;MACX,CAAE,CAAC;MACH;IACD;IAEA,MAAMC,oBAAoB,GAAGN,IAAI,CAACO,GAAG,CACpCP,IAAI,CAACQ,KAAK,CACTrB,sBAAsB,CAACW,OAAO,CAACW,MAAM,IAClCxB,cAAc,GAAGD,iBAAiB,GAAGa,aAAa,CACtD,CACD,CAAC;IACD,MAAMa,SAAS,GAAGV,IAAI,CAACQ,KAAK,CAC3BT,wBAAwB,GAAGO,oBAC5B,CAAC;IAED,MAAMK,UAAU,GACff,QAAQ,GAAGT,sBAAsB,CAACW,OAAO,CAACM,CAAC,GAAGX,MAAM;;IAErD;IACA,IAAKG,QAAQ,GAAGc,SAAS,IAAI,CAAEC,UAAU,EAAG;MAC3CvB,aAAa,CAACU,OAAO,CAACK,QAAQ,CAAE;QAC/BC,CAAC,EAAER,QAAQ,GAAGU,oBAAoB;QAClCD,QAAQ,EAAE;MACX,CAAE,CAAC;IACJ;EACD,CAAC,EACD,CACCrB,iBAAiB,EACjBS,MAAM,EACNR,cAAc,EACdC,aAAa,EACbC,sBAAsB,EACtBC,aAAa,EACbC,iBAAiB,CAEnB,CAAC;EAED,OAAO,CAAEK,eAAe,CAAE;AAC3B"}

package/build/mobile/keyboard-aware-flat-list/use-scroll.native.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useScroll;
+var _reactNative = require("react-native");
+var _reactNativeReanimated = require("react-native-reanimated");
+var _element = require("@wordpress/element");
+var _useKeyboardOffset = _interopRequireDefault(require("./use-keyboard-offset"));
+var _useScrollToSection = _interopRequireDefault(require("./use-scroll-to-section"));
+var _useScrollToElement = _interopRequireDefault(require("./use-scroll-to-element"));
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function useScroll({
+  scrollEnabled,
+  shouldPreventAutomaticScroll,
+  onScroll,
+  onSizeChange,
+  extraScrollHeight
+}) {
+  const scrollViewRef = (0, _element.useRef)();
+  const scrollViewMeasurements = (0, _element.useRef)();
+  const scrollViewYOffset = (0, _reactNativeReanimated.useSharedValue)(-1);
+  const lastScrollTo = (0, _element.useRef)({
+    clientId: null
+  });
+  const {
+    height: windowHeight,
+    width: windowWidth
+  } = (0, _reactNative.useWindowDimensions)();
+  const isLandscape = windowWidth >= windowHeight;
+  const [keyboardOffset] = (0, _useKeyboardOffset.default)(scrollEnabled, shouldPreventAutomaticScroll);
+  const scrollHandler = (0, _reactNativeReanimated.useAnimatedScrollHandler)({
+    onScroll: event => {
+      const {
+        contentOffset
+      } = event;
+      scrollViewYOffset.value = contentOffset.y;
+      onScroll(event);
+    }
+  });
+
+  // When the orientation changes, the ScrollView measurements
+  // need to be re-calculated.
+  (0, _element.useEffect)(() => {
+    scrollViewMeasurements.current = null;
+  }, [isLandscape]);
+  const [scrollToSection] = (0, _useScrollToSection.default)(extraScrollHeight, keyboardOffset, scrollEnabled, scrollViewMeasurements, scrollViewRef, scrollViewYOffset);
+  const [scrollToElement] = (0, _useScrollToElement.default)(scrollViewRef, scrollToSection);
+  const measureScrollView = (0, _element.useCallback)(() => {
+    if (scrollViewRef.current) {
+      scrollViewRef.current.measureInWindow((_x, y, width, height) => {
+        scrollViewMeasurements.current = {
+          y,
+          width,
+          height
+        };
+      });
+    }
+  }, [scrollViewRef]);
+  const onContentSizeChange = (0, _element.useCallback)(() => {
+    if (onSizeChange) {
+      onSizeChange();
+    }
+
+    // Sets the first values when the content size changes.
+    if (!scrollViewMeasurements.current) {
+      measureScrollView();
+    }
+  }, [measureScrollView, onSizeChange]);
+  return {
+    scrollViewRef,
+    scrollHandler,
+    keyboardOffset,
+    scrollToSection,
+    scrollToElement,
+    onContentSizeChange,
+    lastScrollTo
+  };
+}
+//# sourceMappingURL=use-scroll.native.js.map

package/build/mobile/keyboard-aware-flat-list/use-scroll.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_reactNativeReanimated","_element","_useKeyboardOffset","_interopRequireDefault","_useScrollToSection","_useScrollToElement","useScroll","scrollEnabled","shouldPreventAutomaticScroll","onScroll","onSizeChange","extraScrollHeight","scrollViewRef","useRef","scrollViewMeasurements","scrollViewYOffset","useSharedValue","lastScrollTo","clientId","height","windowHeight","width","windowWidth","useWindowDimensions","isLandscape","keyboardOffset","useKeyboardOffset","scrollHandler","useAnimatedScrollHandler","event","contentOffset","value","y","useEffect","current","scrollToSection","useScrollToSection","scrollToElement","useScrollToElement","measureScrollView","useCallback","measureInWindow","_x","onContentSizeChange"],"sources":["@wordpress/components/src/mobile/keyboard-aware-flat-list/use-scroll.native.js"],"sourcesContent":["/**\n * External dependencies\n */\n\nimport { useWindowDimensions } from 'react-native';\nimport {\n\tuseAnimatedScrollHandler,\n\tuseSharedValue,\n} from 'react-native-reanimated';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useKeyboardOffset from './use-keyboard-offset';\nimport useScrollToSection from './use-scroll-to-section';\nimport useScrollToElement from './use-scroll-to-element';\n\nexport default function useScroll( {\n\tscrollEnabled,\n\tshouldPreventAutomaticScroll,\n\tonScroll,\n\tonSizeChange,\n\textraScrollHeight,\n} ) {\n\tconst scrollViewRef = useRef();\n\tconst scrollViewMeasurements = useRef();\n\tconst scrollViewYOffset = useSharedValue( -1 );\n\tconst lastScrollTo = useRef( {\n\t\tclientId: null,\n\t} );\n\n\tconst { height: windowHeight, width: windowWidth } = useWindowDimensions();\n\tconst isLandscape = windowWidth >= windowHeight;\n\n\tconst [ keyboardOffset ] = useKeyboardOffset(\n\t\tscrollEnabled,\n\t\tshouldPreventAutomaticScroll\n\t);\n\n\tconst scrollHandler = useAnimatedScrollHandler( {\n\t\tonScroll: ( event ) => {\n\t\t\tconst { contentOffset } = event;\n\t\t\tscrollViewYOffset.value = contentOffset.y;\n\t\t\tonScroll( event );\n\t\t},\n\t} );\n\n\t// When the orientation changes, the ScrollView measurements\n\t// need to be re-calculated.\n\tuseEffect( () => {\n\t\tscrollViewMeasurements.current = null;\n\t}, [ isLandscape ] );\n\n\tconst [ scrollToSection ] = useScrollToSection(\n\t\textraScrollHeight,\n\t\tkeyboardOffset,\n\t\tscrollEnabled,\n\t\tscrollViewMeasurements,\n\t\tscrollViewRef,\n\t\tscrollViewYOffset\n\t);\n\tconst [ scrollToElement ] = useScrollToElement(\n\t\tscrollViewRef,\n\t\tscrollToSection\n\t);\n\n\tconst measureScrollView = useCallback( () => {\n\t\tif ( scrollViewRef.current ) {\n\t\t\tscrollViewRef.current.measureInWindow( ( _x, y, width, height ) => {\n\t\t\t\tscrollViewMeasurements.current = { y, width, height };\n\t\t\t} );\n\t\t}\n\t}, [ scrollViewRef ] );\n\n\tconst onContentSizeChange = useCallback( () => {\n\t\tif ( onSizeChange ) {\n\t\t\tonSizeChange();\n\t\t}\n\n\t\t// Sets the first values when the content size changes.\n\t\tif ( ! scrollViewMeasurements.current ) {\n\t\t\tmeasureScrollView();\n\t\t}\n\t}, [ measureScrollView, onSizeChange ] );\n\n\treturn {\n\t\tscrollViewRef,\n\t\tscrollHandler,\n\t\tkeyboardOffset,\n\t\tscrollToSection,\n\t\tscrollToElement,\n\t\tonContentSizeChange,\n\t\tlastScrollTo,\n\t};\n}\n"],"mappings":";;;;;;;AAIA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAD,OAAA;AAQA,IAAAE,QAAA,GAAAF,OAAA;AAKA,IAAAG,kBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,mBAAA,GAAAD,sBAAA,CAAAJ,OAAA;AACA,IAAAM,mBAAA,GAAAF,sBAAA,CAAAJ,OAAA;AApBA;AACA;AACA;;AAQA;AACA;AACA;;AAGA;AACA;AACA;;AAKe,SAASO,SAASA,CAAE;EAClCC,aAAa;EACbC,4BAA4B;EAC5BC,QAAQ;EACRC,YAAY;EACZC;AACD,CAAC,EAAG;EACH,MAAMC,aAAa,GAAG,IAAAC,eAAM,EAAC,CAAC;EAC9B,MAAMC,sBAAsB,GAAG,IAAAD,eAAM,EAAC,CAAC;EACvC,MAAME,iBAAiB,GAAG,IAAAC,qCAAc,EAAE,CAAC,CAAE,CAAC;EAC9C,MAAMC,YAAY,GAAG,IAAAJ,eAAM,EAAE;IAC5BK,QAAQ,EAAE;EACX,CAAE,CAAC;EAEH,MAAM;IAAEC,MAAM,EAAEC,YAAY;IAAEC,KAAK,EAAEC;EAAY,CAAC,GAAG,IAAAC,gCAAmB,EAAC,CAAC;EAC1E,MAAMC,WAAW,GAAGF,WAAW,IAAIF,YAAY;EAE/C,MAAM,CAAEK,cAAc,CAAE,GAAG,IAAAC,0BAAiB,EAC3CnB,aAAa,EACbC,4BACD,CAAC;EAED,MAAMmB,aAAa,GAAG,IAAAC,+CAAwB,EAAE;IAC/CnB,QAAQ,EAAIoB,KAAK,IAAM;MACtB,MAAM;QAAEC;MAAc,CAAC,GAAGD,KAAK;MAC/Bd,iBAAiB,CAACgB,KAAK,GAAGD,aAAa,CAACE,CAAC;MACzCvB,QAAQ,CAAEoB,KAAM,CAAC;IAClB;EACD,CAAE,CAAC;;EAEH;EACA;EACA,IAAAI,kBAAS,EAAE,MAAM;IAChBnB,sBAAsB,CAACoB,OAAO,GAAG,IAAI;EACtC,CAAC,EAAE,CAAEV,WAAW,CAAG,CAAC;EAEpB,MAAM,CAAEW,eAAe,CAAE,GAAG,IAAAC,2BAAkB,EAC7CzB,iBAAiB,EACjBc,cAAc,EACdlB,aAAa,EACbO,sBAAsB,EACtBF,aAAa,EACbG,iBACD,CAAC;EACD,MAAM,CAAEsB,eAAe,CAAE,GAAG,IAAAC,2BAAkB,EAC7C1B,aAAa,EACbuB,eACD,CAAC;EAED,MAAMI,iBAAiB,GAAG,IAAAC,oBAAW,EAAE,MAAM;IAC5C,IAAK5B,aAAa,CAACsB,OAAO,EAAG;MAC5BtB,aAAa,CAACsB,OAAO,CAACO,eAAe,CAAE,CAAEC,EAAE,EAAEV,CAAC,EAAEX,KAAK,EAAEF,MAAM,KAAM;QAClEL,sBAAsB,CAACoB,OAAO,GAAG;UAAEF,CAAC;UAAEX,KAAK;UAAEF;QAAO,CAAC;MACtD,CAAE,CAAC;IACJ;EACD,CAAC,EAAE,CAAEP,aAAa,CAAG,CAAC;EAEtB,MAAM+B,mBAAmB,GAAG,IAAAH,oBAAW,EAAE,MAAM;IAC9C,IAAK9B,YAAY,EAAG;MACnBA,YAAY,CAAC,CAAC;IACf;;IAEA;IACA,IAAK,CAAEI,sBAAsB,CAACoB,OAAO,EAAG;MACvCK,iBAAiB,CAAC,CAAC;IACpB;EACD,CAAC,EAAE,CAAEA,iBAAiB,EAAE7B,YAAY,CAAG,CAAC;EAExC,OAAO;IACNE,aAAa;IACbe,aAAa;IACbF,cAAc;IACdU,eAAe;IACfE,eAAe;IACfM,mBAAmB;IACnB1B;EACD,CAAC;AACF"}