@telus-uds/components-base 2.0.0 → 2.0.2

package/lib/Footnote/FootnoteLink.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import TouchableWithoutFeedback from "react-native-web/dist/exports/TouchableWithoutFeedback";
+import dictionary from './dictionary';
+import { htmlAttrs, selectSystemProps, useCopy, viewProps, wrapStringsInText, variantProp } from '../utils';
+import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps]);
+
+// The top property varies between devices due to how devices render the viewport.
+const selectTextStyle = _ref => {
+  let {
+    fontSize,
+    lineHeight
+  } = _ref;
+  return {
+    fontSize,
+    lineHeight: lineHeight !== 1 ? lineHeight : fontSize * 2,
+    ...Platform.select({
+      ios: {
+        top: -fontSize / 2
+      },
+      android: {
+        top: fontSize / 4
+      },
+      web: {
+        top: -fontSize / 2.8
+      }
+    })
+  };
+};
+const FootnoteLink = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    copy = 'en',
+    content = [],
+    onClick,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref2;
+  const themeTokens = useThemeTokens('FootnoteLink', tokens, variant);
+  const textStyles = applyTextStyles(themeTokens);
+  const numbers = Array.isArray(content) ? content : [content];
+  const refs = numbers.map(() => /*#__PURE__*/React.createRef());
+  const handleOnClick = index => {
+    onClick(numbers[index], refs[index]);
+  };
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: staticStyles.container,
+    children: numbers.map((num, index) => /*#__PURE__*/_jsx(View, {
+      accessibilityLabel: getCopy('a11yLabel'),
+      ref: refs[index],
+      ...selectProps(rest),
+      children: /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
+        onPress: handleOnClick,
+        accessibilityRole: "button",
+        children: wrapStringsInText(`${num}${index !== numbers.length - 1 ? ',' : ''}`, {
+          style: {
+            ...textStyles,
+            ...staticStyles.text,
+            ...selectTextStyle(themeTokens)
+          }
+        })
+      })
+    }, num))
+  });
+});
+FootnoteLink.displayName = 'FootnoteLink';
+const copyShape = PropTypes.shape({
+  a11yLabel: PropTypes.string.isRequired
+});
+FootnoteLink.propTypes = {
+  ...selectedSystemPropTypes,
+  variant: variantProp.propType,
+  /**
+   * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
+   * To provide your own, pass a JSON object with the key `a11yLabel`.
+   */
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), copyShape]),
+  /**
+   * The footnote number, or multiple numbers if passed as an array.
+   * If using an array, a comma-separated group of numbers will be rendered as superscript.
+   */
+  content: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number), PropTypes.string, PropTypes.arrayOf(PropTypes.string)]).isRequired,
+  /**
+   * A callback function to handle the click of a FootnoteLink.
+   */
+  onClick: PropTypes.func.isRequired
+};
+export default FootnoteLink;
+const staticStyles = StyleSheet.create({
+  text: {
+    position: 'relative',
+    textDecorationLine: 'underline'
+  },
+  container: {
+    flexDirection: 'row'
+  }
+});

package/lib/Footnote/dictionary.js

@@ -0,0 +1,12 @@
+export default {
+  en: {
+    a11yLabel: 'Read legal footnote',
+    close: 'close',
+    heading: 'Terms and conditions'
+  },
+  fr: {
+    a11yLabel: 'Lire la note de bas de page légale',
+    close: 'fermer',
+    heading: 'Modalités et conditions'
+  }
+};

package/lib/Footnote/index.js

@@ -0,0 +1,4 @@
+import Footnote from './Footnote';
+import FootnoteLink from './FootnoteLink';
+Footnote.Link = FootnoteLink;
+export default Footnote;

package/lib/HorizontalScroll/HorizontalScroll.js

@@ -1,50 +1,24 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.selectHorizontalScrollTokens = exports.default = 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 [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import { validateThemeTokens, resolveThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensSetPropType, selectSystemProps, selectTokens, viewProps } from '../utils';
+import ScrollViewEnd from './ScrollViewEnd';
+import { getItemPositionScrollTarget, itemPositionsPropType } from './itemPositions';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const tokenKeys = ['nextIcon', 'previousIcon', 'gutter', 'borderBottomWidth', 'borderBottomColor', 'buttonClearance'];
+export const selectHorizontalScrollTokens = (themeTokens, prefix) => selectTokens(tokenKeys, themeTokens, prefix);
 
-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 revisit `ScrollButton` after IconButton is stable.
  */
-
-
-exports.selectHorizontalScrollTokens = selectHorizontalScrollTokens;
-const HorizontalScroll = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const HorizontalScroll = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     ScrollButton,
     tokens,
@@ -59,15 +33,14 @@ const HorizontalScroll = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     borderBottomWidth,
     borderBottomColor,
     buttonClearance = 0
-  } = (0, _ThemeProvider.validateThemeTokens)((0, _ThemeProvider.resolveThemeTokens)(tokens), // Allow missing icons
-  (0, _utils.getTokensSetPropType)(tokenKeys, {
+  } = validateThemeTokens(resolveThemeTokens(tokens),
+  // Allow missing icons
+  getTokensSetPropType(tokenKeys, {
     partial: true
   }), 'HorizontalScroll');
-  const [containerWidth, setContainerWidth] = (0, _react.useState)(0);
-  const [contentWidth, setContentWidth] = (0, _react.useState)(0);
-
+  const [containerWidth, setContainerWidth] = React.useState(0);
+  const [contentWidth, setContentWidth] = React.useState(0);
   const handleContentWidth = width => setContentWidth(width);
-
   const handleContainerLayout = _ref2 => {
     let {
       nativeEvent: {
@@ -77,12 +50,11 @@ const HorizontalScroll = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       }
     } = _ref2;
     return 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);
+  };
 
+  // Update the scroll position only when scrolling actions ends to minimally rerender
+  // and update which buttons are conditionally rendered.
+  const [scrollOffset, setScrollOffset] = React.useState(0);
   const handleScrollEnd = _ref3 => {
     let {
       nativeEvent: {
@@ -93,65 +65,56 @@ const HorizontalScroll = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     } = _ref3;
     setScrollOffset(x);
   };
-
   const scrollMax = Math.max(0, contentWidth - containerWidth);
   const showNextButton = scrollOffset < scrollMax;
   const showPreviousButton = scrollOffset > 0;
-  const scrollRef = (0, _react.useRef)(null);
-
+  const scrollRef = 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);
+      const x = getItemPositionScrollTarget(targetX, scrollMax, itemPositions.positions, buttonClearance);
       scrollRef.current.scrollTo({
         x,
         animated: true
       });
-
-      if (_Platform.default.OS === 'android') {
+      if (Platform.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.
+  };
+  // 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...
+  const hasWidths = itemPositions.contentWidth > 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 scrollPrevious = () => scrollTo(scrollOffset - scrollDistance); // On Web, being scrollable in one direction prevents overflow: visible in the other direction.
+  // 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, {
+  return /*#__PURE__*/_jsxs(View, {
     ref: ref,
     style: staticStyles.container,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollViewEnd.default, {
+    children: [/*#__PURE__*/_jsx(ScrollViewEnd, {
       onScrollEnd: handleScrollEnd,
       ref: scrollRef,
       horizontal: true,
@@ -164,12 +127,12 @@ const HorizontalScroll = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       }],
       ...selectProps(rest),
       children: children
-    }), showPreviousButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(ScrollButton, {
+    }), showPreviousButton && /*#__PURE__*/_jsx(ScrollButton, {
       icon: previousIcon,
       onPress: scrollPrevious,
       offset: gutter,
       direction: "previous"
-    }), showNextButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(ScrollButton, {
+    }), showNextButton && /*#__PURE__*/_jsx(ScrollButton, {
       icon: nextIcon,
       onPress: scrollNext,
       offset: gutter,
@@ -178,8 +141,7 @@ const HorizontalScroll = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   });
 });
 HorizontalScroll.displayName = 'HorizontalScroll';
-
-const staticStyles = _StyleSheet.default.create({
+const staticStyles = StyleSheet.create({
   scrollContainer: {
     // Gives inner container width from content, allowing it to exceed its container's width
     alignSelf: 'flex-start',
@@ -190,14 +152,13 @@ const staticStyles = _StyleSheet.default.create({
     justifyContent: 'center'
   }
 });
-
-HorizontalScroll.propTypes = { ...selectedSystemPropTypes,
-  itemPositions: _itemPositions.itemPositionsPropType,
-  ScrollButton: _propTypes.default.elementType,
-  tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {
+HorizontalScroll.propTypes = {
+  ...selectedSystemPropTypes,
+  itemPositions: itemPositionsPropType,
+  ScrollButton: PropTypes.elementType,
+  tokens: getTokensSetPropType(tokenKeys, {
     allowFunction: true
   }),
-  children: _propTypes.default.node
+  children: PropTypes.node
 };
-var _default = HorizontalScroll;
-exports.default = _default;
+export default HorizontalScroll;

package/lib/HorizontalScroll/HorizontalScrollButton.js

@@ -1,34 +1,12 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
-var _utils = require("../utils");
-
-var _ThemeProvider = require("../ThemeProvider");
-
-var _IconButton = _interopRequireDefault(require("../IconButton"));
-
-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; }
-
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import { variantProp, getTokensPropType, useCopy, copyPropTypes, a11yProps } from '../utils';
+import { useThemeTokens } from '../ThemeProvider';
+import IconButton from '../IconButton';
+import dictionary from './dictionary';
+import { jsx as _jsx } from "react/jsx-runtime";
 const selectContainerStyles = _ref => {
   let {
     offset
@@ -37,6 +15,7 @@ const selectContainerStyles = _ref => {
     marginTop: offset ? -offset : 0
   };
 };
+
 /**
  * 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.
@@ -45,9 +24,7 @@ const selectContainerStyles = _ref => {
  *
  * @TODO when IconButton is complete and stable revisit this and update interaction state styles.
  */
-
-
-const HorizontalScrollButton = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const HorizontalScrollButton = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     direction = 'next',
     icon,
@@ -57,30 +34,29 @@ const HorizontalScrollButton = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref)
     tokens,
     copy
   } = _ref2;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('HorizontalScrollButton', tokens, variant);
-  const getCopy = (0, _utils.useCopy)({
-    dictionary: _dictionary.default,
+  const themeTokens = useThemeTokens('HorizontalScrollButton', tokens, variant);
+  const getCopy = useCopy({
+    dictionary,
     copy
   });
   const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return /*#__PURE__*/_jsx(View, {
     style: [staticStyles.absolute, staticStyles[direction], selectContainerStyles({
       offset
     })],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+    children: /*#__PURE__*/_jsx(IconButton, {
       accessibilityLabel: label,
       icon: icon,
       onPress: onPress,
       ref: ref,
       tokens: themeTokens,
       variant: variant,
-      ..._utils.a11yProps.nonFocusableProps
+      ...a11yProps.nonFocusableProps
     })
   });
 });
 HorizontalScrollButton.displayName = 'HorizontalScrollButton';
-
-const staticStyles = _StyleSheet.default.create({
+const staticStyles = StyleSheet.create({
   absolute: {
     position: 'absolute'
   },
@@ -91,15 +67,13 @@ const staticStyles = _StyleSheet.default.create({
     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
+  tokens: getTokensPropType('HorizontalScrollButton'),
+  variant: variantProp.propType,
+  copy: copyPropTypes,
+  direction: PropTypes.oneOf(['previous', 'next']),
+  offset: PropTypes.number,
+  icon: PropTypes.elementType,
+  onPress: PropTypes.func.isRequired
 };
-var _default = HorizontalScrollButton;
-exports.default = _default;
+export default HorizontalScrollButton;

package/lib/HorizontalScroll/ScrollViewEnd.js

@@ -1,27 +1,10 @@
-"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; }
-
+import React from 'react';
+import PropTypes from 'prop-types';
+import ScrollView from "react-native-web/dist/exports/ScrollView";
+import debounce from 'lodash.debounce';
+import { jsx as _jsx } from "react/jsx-runtime";
 const DEBOUNCE_MS = 100;
+
 /**
  * A wrapper for ScrollView that supports an `onScrollEnd` function.
  *
@@ -29,26 +12,26 @@ const DEBOUNCE_MS = 100;
  * 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)((_ref, ref) => {
+const ScrollViewEnd = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     onScrollEnd,
-    onScroll,
+    onScroll = null,
     ...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 debounceScrollEnd = React.useCallback(debounce(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, {
+  // Cancel any lingering debounce timeouts on dismount
+  React.useEffect(() => debounceScrollEnd.cancel);
+  return /*#__PURE__*/_jsx(ScrollView, {
     ref: ref,
     ...props,
     onScroll: handleScroll,
@@ -57,11 +40,7 @@ const ScrollViewEnd = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 });
 ScrollViewEnd.displayName = 'ScrollViewEnd';
 ScrollViewEnd.propTypes = {
-  onScrollEnd: _propTypes.default.func.isRequired,
-  onScroll: _propTypes.default.func
-};
-ScrollViewEnd.defaultProps = {
-  onScroll: null
+  onScrollEnd: PropTypes.func.isRequired,
+  onScroll: PropTypes.func
 };
-var _default = ScrollViewEnd;
-exports.default = _default;
+export default ScrollViewEnd;

package/lib/HorizontalScroll/ScrollViewEnd.native.js

@@ -1,35 +1,18 @@
-"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; }
-
+import React from 'react';
+import PropTypes from 'prop-types';
+import ScrollView from "react-native-web/dist/exports/ScrollView";
 /**
  * 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)((_ref, ref) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+const ScrollViewEnd = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     onScrollEnd,
     ...props
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
+  return /*#__PURE__*/_jsx(ScrollView, {
     ref: ref,
     ...props,
     onScrollEndDrag: onScrollEnd,
@@ -38,7 +21,6 @@ const ScrollViewEnd = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 });
 ScrollViewEnd.displayName = 'ScrollViewEnd';
 ScrollViewEnd.propTypes = {
-  onScrollEnd: _propTypes.default.func.isRequired
+  onScrollEnd: PropTypes.func.isRequired
 };
-var _default = ScrollViewEnd;
-exports.default = _default;
+export default ScrollViewEnd;

package/lib/HorizontalScroll/dictionary.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
+export default {
   en: {
     // English text from TDS Community `Tabs`
     previousLabel: 'Move menu to the left',
@@ -14,5 +8,4 @@ var _default = {
     previousLabel: 'Déplacer le menu vers la gauche',
     nextLabel: 'Déplacer le menu vers la droite'
   }
-};
-exports.default = _default;
+};