@telus-uds/components-base 0.0.2-prerelease.6 → 1.0.0

package/lib/FlexGrid/Row/Row.js

@@ -1,9 +1,31 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { View, StyleSheet } from 'react-native';
-import { viewports } from '@telus-uds/system-constants';
-import { useViewport } from '../../ViewportProvider';
-import applyInheritance from '../helpers';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _systemConstants = require("@telus-uds/system-constants");
+
+var _ViewportProvider = require("../../ViewportProvider");
+
+var _helpers = _interopRequireDefault(require("../helpers"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
 
 const horizontalAlignStyles = horizontalAlign => {
   switch (horizontalAlign) {
@@ -69,7 +91,7 @@ const distributeStyles = distribute => {
   }
 };
 
-const Row = ({
+const Row = /*#__PURE__*/(0, _react.forwardRef)(({
   horizontalAlign,
   verticalAlign,
   distribute,
@@ -80,42 +102,46 @@ const Row = ({
   xlReverse,
   children,
   ...rest
-}) => {
-  const viewPort = useViewport();
-  const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
+}, ref) => {
+  const viewPort = (0, _ViewportProvider.useViewport)();
+  const reverseLevel = (0, _helpers.default)([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
   let flexDirection = '';
 
-  if (viewPort === viewports.xs) {
+  if (viewPort === _systemConstants.viewports.xs) {
     flexDirection = reverseLevel[0] ? 'row-reverse' : 'row';
   }
 
-  if (viewPort === viewports.sm) {
+  if (viewPort === _systemConstants.viewports.sm) {
     flexDirection = reverseLevel[1] ? 'row-reverse' : 'row';
   }
 
-  if (viewPort === viewports.md) {
+  if (viewPort === _systemConstants.viewports.md) {
     flexDirection = reverseLevel[2] ? 'row-reverse' : 'row';
   }
 
-  if (viewPort === viewports.lg) {
+  if (viewPort === _systemConstants.viewports.lg) {
     flexDirection = reverseLevel[3] ? 'row-reverse' : 'row';
   }
 
-  if (viewPort === viewports.xl) {
+  if (viewPort === _systemConstants.viewports.xl) {
     flexDirection = reverseLevel[4] ? 'row-reverse' : 'row';
   }
 
-  return /*#__PURE__*/React.createElement(View, Object.assign({}, rest, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    ...rest,
     style: [styles.row, {
       flexDirection,
       ...horizontalAlignStyles(horizontalAlign),
       ...verticalAlignStyles(verticalAlign),
       ...distributeStyles(distribute)
-    }]
-  }), children);
-};
+    }],
+    children: children
+  });
+});
+Row.displayName = 'Row';
 
-const styles = StyleSheet.create({
+const styles = _StyleSheet.default.create({
   row: {
     width: '100%',
     marginVertical: 0,
@@ -127,46 +153,48 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap'
   }
 });
+
 Row.propTypes = {
   /**
    * Align columns horizontally within their row.
    */
-  horizontalAlign: PropTypes.oneOf(['start', 'center', 'end']),
+  horizontalAlign: _propTypes.default.oneOf(['start', 'center', 'end']),
 
   /**
    * Align columns vertically within their row.
    */
-  verticalAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
+  verticalAlign: _propTypes.default.oneOf(['top', 'middle', 'bottom']),
 
   /**
    * Distribute empty space around columns.
    */
-  distribute: PropTypes.oneOf(['around', 'between']),
+  distribute: _propTypes.default.oneOf(['around', 'between']),
 
   /**
    * Choose if the item order should be reversed from the 'xs' breakpoint. When you pass in false, the order will be normal from the xs breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
-  xsReverse: PropTypes.bool,
+  xsReverse: _propTypes.default.bool,
 
   /**
    * Choose if the item order should be reversed from the 'sm' breakpoint. When you pass in false, the order will be normal from the sm breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
-  smReverse: PropTypes.bool,
+  smReverse: _propTypes.default.bool,
 
   /**
    * Choose if the item order should be reversed from the 'md' breakpoint. When you pass in false, the order will be normal from the md breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
-  mdReverse: PropTypes.bool,
+  mdReverse: _propTypes.default.bool,
 
   /**
    * Choose if the item order should be reversed from the 'lg' breakpoint. When you pass in false, the order will be normal from the lg breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
-  lgReverse: PropTypes.bool,
+  lgReverse: _propTypes.default.bool,
 
   /**
    * Choose if the item order should be reversed from the 'xl' breakpoint. When you pass in false, the order will be normal from the xl breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
-  xlReverse: PropTypes.bool,
-  children: PropTypes.node.isRequired
+  xlReverse: _propTypes.default.bool,
+  children: _propTypes.default.node.isRequired
 };
-export default Row;
+var _default = Row;
+exports.default = _default;

package/lib/FlexGrid/Row/index.js

@@ -1,2 +1,13 @@
-import Row from './Row';
-export default Row;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Row = _interopRequireDefault(require("./Row"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _Row.default;
+exports.default = _default;

package/lib/FlexGrid/helpers/index.js

@@ -1,3 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
 const applyInheritance = sizes => {
   let prevSize;
   return sizes.map((size, index) => {
@@ -18,4 +25,5 @@ const applyInheritance = sizes => {
   });
 };
 
-export default applyInheritance;
+var _default = applyInheritance;
+exports.default = _default;

package/lib/FlexGrid/index.js

@@ -1,2 +1,13 @@
-import FlexGrid from './FlexGrid';
-export default FlexGrid;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _FlexGrid = _interopRequireDefault(require("./FlexGrid"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _FlexGrid.default;
+exports.default = _default;

package/lib/FlexGrid/providers/GutterContext.js

@@ -1,3 +1,15 @@
-import React from 'react';
-const GutterContext = /*#__PURE__*/React.createContext(false);
-export default GutterContext;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const GutterContext = /*#__PURE__*/_react.default.createContext(false);
+
+var _default = GutterContext;
+exports.default = _default;

package/lib/HorizontalScroll/HorizontalScroll.js

@@ -0,0 +1,200 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.selectHorizontalScrollTokens = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _ScrollViewEnd = _interopRequireDefault(require("./ScrollViewEnd"));
+
+var _itemPositions = require("./itemPositions");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+const tokenKeys = ['nextIcon', 'previousIcon', 'gutter', 'borderBottomWidth', 'borderBottomColor', 'buttonClearance'];
+
+const selectHorizontalScrollTokens = (themeTokens, prefix) => (0, _utils.selectTokens)(tokenKeys, themeTokens, prefix);
+/**
+ * Base component that scrolls horizontally and displays left and right buttons if
+ * there is content to the left and the right which can be scrolled to.
+ *
+ * @TODO revist `ScrollButton` after IconButton is stable.
+ */
+
+
+exports.selectHorizontalScrollTokens = selectHorizontalScrollTokens;
+const HorizontalScroll = /*#__PURE__*/(0, _react.forwardRef)(({
+  ScrollButton,
+  tokens,
+  itemPositions,
+  children,
+  ...rest
+}, ref) => {
+  const {
+    nextIcon,
+    previousIcon,
+    gutter,
+    borderBottomWidth,
+    borderBottomColor,
+    buttonClearance = 0
+  } = (0, _ThemeProvider.validateThemeTokens)((0, _ThemeProvider.resolveThemeTokens)(tokens), // Allow missing icons
+  (0, _utils.getTokensSetPropType)(tokenKeys, {
+    partial: true
+  }), 'HorizontalScroll');
+  const [containerWidth, setContainerWidth] = (0, _react.useState)(0);
+  const [contentWidth, setContentWidth] = (0, _react.useState)(0);
+
+  const handleContentWidth = width => setContentWidth(width);
+
+  const handleContainerLayout = ({
+    nativeEvent: {
+      layout: {
+        width
+      }
+    }
+  }) => setContainerWidth(width); // Update the scroll position only when scrolling actions ends to minimally rerender
+  // and update which buttons are conditionally rendered.
+
+
+  const [scrollOffset, setScrollOffset] = (0, _react.useState)(0);
+
+  const handleScrollEnd = ({
+    nativeEvent: {
+      contentOffset: {
+        x
+      }
+    }
+  }) => {
+    setScrollOffset(x);
+  };
+
+  const scrollMax = Math.max(0, contentWidth - containerWidth);
+  const showNextButton = scrollOffset < scrollMax;
+  const showPreviousButton = scrollOffset > 0;
+  const scrollRef = (0, _react.useRef)(null);
+
+  const scrollTo = targetX => {
+    var _scrollRef$current;
+
+    if (typeof ((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollTo) === 'function') {
+      const x = (0, _itemPositions.getItemPositionScrollTarget)(targetX, scrollMax, itemPositions.positions, buttonClearance);
+      scrollRef.current.scrollTo({
+        x,
+        animated: true
+      });
+
+      if (_Platform.default.OS === 'android') {
+        // React Native calls onScrollMomentumEnd after scrollTo for iOS, but not Android.
+        // See https://github.com/facebook/react-native/issues/26661
+        // There's also no callback for when scrollTo finishes.
+        setTimeout(() => setScrollOffset(x), 300);
+      }
+    }
+  }; // Make scrollTo and relevant co-ordinates available to any component with an interest in itemPositions.
+  // ItemPositions is a mutable ref object intended to have its properties mutated without any rerenders.
+
+  /* eslint-disable-next-line no-param-reassign */
+
+
+  itemPositions.scrollTo = scrollTo;
+  /* eslint-disable-next-line no-param-reassign */
+
+  itemPositions.containerWidth = containerWidth;
+  /* eslint-disable-next-line no-param-reassign */
+
+  itemPositions.contentWidth = contentWidth;
+  /* eslint-disable-next-line no-param-reassign */
+
+  itemPositions.scrollOffset = scrollOffset;
+  const hasWidths = itemPositions.contentWidth > 0 && itemPositions.contentWidth > 0;
+  (0, _react.useEffect)(() => {
+    if (hasWidths) itemPositions.setIsReady(true); // itemPositions is a ref object so this should occur only when elements' widths are set in state
+  }, [hasWidths, itemPositions]); // When scrolling, allow clearance around scroll buttons, so e.g. this...
+  // (<-) Item 5   Item 6   Item 7   Item 8   It(->)
+  // ...doesn't scroll like this with Item 9 never being properly visible:
+  // (<-)em 9   Item 10  Item 11  Item 12  Item (->)
+
+  const scrollDistance = containerWidth - buttonClearance * 2;
+
+  const scrollNext = () => scrollTo(scrollOffset + scrollDistance);
+
+  const scrollPrevious = () => scrollTo(scrollOffset - scrollDistance);
+
+  const a11y = _utils.a11yProps.select(rest); // On Web, being scrollable in one direction prevents overflow: visible in the other direction.
+  // Apply a fixed margin gutter that tab highlight effects can overhang without getting trimmed.
+
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    ref: ref,
+    style: staticStyles.container,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollViewEnd.default, {
+      onScrollEnd: handleScrollEnd,
+      ref: scrollRef,
+      horizontal: true,
+      onContentSizeChange: handleContentWidth,
+      onLayout: handleContainerLayout,
+      showsHorizontalScrollIndicator: false,
+      contentContainerStyle: [staticStyles.scrollContainer, {
+        marginBottom: gutter,
+        borderBottomWidth,
+        borderBottomColor
+      }],
+      ...a11y,
+      children: children
+    }), showPreviousButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(ScrollButton, {
+      icon: previousIcon,
+      onPress: scrollPrevious,
+      offset: gutter,
+      direction: "previous"
+    }), showNextButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(ScrollButton, {
+      icon: nextIcon,
+      onPress: scrollNext,
+      offset: gutter,
+      direction: "next"
+    })]
+  });
+});
+HorizontalScroll.displayName = 'HorizontalScroll';
+
+const staticStyles = _StyleSheet.default.create({
+  scrollContainer: {
+    // Gives inner container width from content, allowing it to exceed its container's width
+    alignSelf: 'flex-start',
+    flexGrow: 1
+  },
+  container: {
+    // Vertically center the ScrollButtons buttons
+    justifyContent: 'center'
+  }
+});
+
+HorizontalScroll.propTypes = {
+  itemPositions: _itemPositions.itemPositionsPropType,
+  ScrollButton: _propTypes.default.elementType,
+  tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {
+    allowFunction: true
+  }),
+  children: _propTypes.default.node
+};
+var _default = HorizontalScroll;
+exports.default = _default;

package/lib/HorizontalScroll/HorizontalScrollButton.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _Typography = _interopRequireDefault(require("../Typography"));
+
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+const selectButtonStyles = ({
+  borderRadius,
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  padding
+}, direction) => [staticStyles.absolute, staticStyles[direction], {
+  borderRadius,
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  padding
+}];
+/**
+ * Button within a Tabs component showing users that content is available to the left or
+ * right, scrolling a screen's worth of content left or right when pressed.
+ *
+ * This is rendered automatically by `Tabs` and isn't intended be used directly.
+ *
+ * @TODO when IconButton is complete and stable revisit this and update interaction state styles.
+ */
+
+
+const HorizontalScrollButton = /*#__PURE__*/(0, _react.forwardRef)(({
+  direction = 'next',
+  icon,
+  onPress,
+  offset,
+  variant,
+  tokens,
+  copy
+}, ref) => {
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('HorizontalScrollButton', tokens, variant);
+
+  const resolveButtonTokens = pressableState => (0, _utils.resolvePressableTokens)(getTokens, pressableState);
+
+  const getPressableStyle = pressableState => [selectButtonStyles(resolveButtonTokens(pressableState), direction), {
+    marginTop: -1 * (offset || 0)
+  }];
+
+  const getCopy = (0, _utils.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+  const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
+    style: getPressableStyle,
+    onPress: onPress,
+    accessibilityLabel: label,
+    accessibilityRole: "button" // For keyboard-tab or screenreader-swipe navigation, users can just go through all items
+    ,
+    ..._utils.a11yProps.nonFocusableProps,
+    children: pressableState => {
+      const iconTokens = (0, _utils.selectTokens)('Icon', resolveButtonTokens(pressableState), 'icon');
+      return icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        icon: icon,
+        tokens: iconTokens
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        tokens: {
+          fontSize: iconTokens.size,
+          lineHeight: 1,
+          color: iconTokens.color
+        },
+        children: direction === 'next' ? '→' : '←'
+      });
+    }
+  });
+});
+HorizontalScrollButton.displayName = 'HorizontalScrollButton';
+
+const staticStyles = _StyleSheet.default.create({
+  absolute: {
+    position: 'absolute'
+  },
+  previous: {
+    left: 0
+  },
+  next: {
+    right: 0
+  }
+});
+
+HorizontalScrollButton.propTypes = {
+  tokens: (0, _utils.getTokensPropType)('HorizontalScrollButton'),
+  variant: _utils.variantProp.propType,
+  copy: _utils.copyPropTypes,
+  direction: _propTypes.default.oneOf(['previous', 'next']),
+  offset: _propTypes.default.number,
+  icon: _propTypes.default.elementType,
+  onPress: _propTypes.default.func.isRequired
+};
+var _default = HorizontalScrollButton;
+exports.default = _default;

package/lib/HorizontalScroll/ScrollViewEnd.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ScrollView"));
+
+var _lodash = _interopRequireDefault(require("lodash.debounce"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+const DEBOUNCE_MS = 100;
+/**
+ * A wrapper for ScrollView that supports an `onScrollEnd` function.
+ *
+ * React Native Web hasn't got around to implementing any scroll end handlers yet,
+ * so we need to work around it with debouncing on `onScroll`. See:
+ * https://github.com/necolas/react-native-web/issues/1021
+ */
+
+const ScrollViewEnd = /*#__PURE__*/(0, _react.forwardRef)(({
+  onScrollEnd,
+  onScroll,
+  ...props
+}, ref) => {
+  // Return debounced function directly from useCallback so it has .cancel method etc.
+  // Linter complains this stops it automatically scanning the deps, but we can check them manually.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debounceScrollEnd = (0, _react.useCallback)((0, _lodash.default)(event => onScrollEnd(event), DEBOUNCE_MS), [onScrollEnd]); // Call any onScroll handler immediately, and any onScrollEnd handler after 100ms of no scrolling
+
+  const handleScroll = event => {
+    if (typeof onScroll === 'function') onScroll(event);
+    if (typeof onScrollEnd === 'function') debounceScrollEnd(event);
+  }; // Cancel any lingering debounce timeouts on dismount
+
+
+  (0, _react.useEffect)(() => debounceScrollEnd.cancel);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
+    ref: ref,
+    ...props,
+    onScroll: handleScroll,
+    scrollEventThrottle: DEBOUNCE_MS / 2
+  });
+});
+ScrollViewEnd.displayName = 'ScrollViewEnd';
+ScrollViewEnd.propTypes = {
+  onScrollEnd: _propTypes.default.func.isRequired,
+  onScroll: _propTypes.default.func
+};
+ScrollViewEnd.defaultProps = {
+  onScroll: null
+};
+var _default = ScrollViewEnd;
+exports.default = _default;

package/lib/HorizontalScroll/ScrollViewEnd.native.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ScrollView"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+/**
+ * A wrapper for ScrollView that supports an `onScrollEnd` function.
+ *
+ * React Native has two scroll end handlers, we want to treat them both the same.
+ */
+const ScrollViewEnd = /*#__PURE__*/(0, _react.forwardRef)(({
+  onScrollEnd,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
+  ref: ref,
+  ...props,
+  onScrollEndDrag: onScrollEnd,
+  onMomentumScrollEnd: onScrollEnd
+}));
+ScrollViewEnd.displayName = 'ScrollViewEnd';
+ScrollViewEnd.propTypes = {
+  onScrollEnd: _propTypes.default.func.isRequired
+};
+var _default = ScrollViewEnd;
+exports.default = _default;