@telus-uds/components-base 2.0.0 → 2.0.1

package/lib/Pagination/Pagination.js

@@ -1,42 +1,17 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
-var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
-var _utils = require("../utils");
-
-var _ThemeProvider = require("../ThemeProvider");
-
-var _ViewportProvider = require("../ViewportProvider");
-
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _usePagination = _interopRequireDefault(require("./usePagination"));
-
-var _PageButton = _interopRequireDefault(require("./PageButton"));
-
-var _SideButton = _interopRequireDefault(require("./SideButton"));
-
-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, { createElement as _createElement } from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import Text from "react-native-web/dist/exports/Text";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import { a11yProps, componentPropType, copyPropTypes, getTokensPropType, selectSystemProps, variantProp, viewProps, withLinkRouter } from '../utils';
+import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider';
+import { useViewport } from '../ViewportProvider';
+import Box from '../Box';
+import usePagination from './usePagination';
+import PageButton from './PageButton';
+import SideButton from './SideButton';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectTextStyles = (_ref, themeOptions) => {
   let {
     color,
@@ -45,7 +20,7 @@ const selectTextStyles = (_ref, themeOptions) => {
     fontWeight,
     lineHeight
   } = _ref;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return applyTextStyles({
     color,
     fontName,
     fontSize,
@@ -54,8 +29,7 @@ const selectTextStyles = (_ref, themeOptions) => {
     themeOptions
   });
 };
-
-const Pagination = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const Pagination = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     copy = 'en',
@@ -65,22 +39,35 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     sideButtonTokens,
     LinkRouter,
     linkRouterProps,
+    numberOfPagesBeforeEllipsis = 4,
     ...rest
   } = _ref2;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = useViewport();
   const {
     truncateAbove,
     gap,
     ...themeTokens
-  } = (0, _ThemeProvider.useThemeTokens)('Pagination', tokens, variant, {
+  } = useThemeTokens('Pagination', tokens, variant, {
     viewport
   });
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
-
-  const items = _react.default.Children.toArray(children);
-
+  } = useTheme();
+  const {
+    borderColor,
+    borderWidth,
+    borderLeftWidth,
+    borderRightWidth,
+    borderTopWidth,
+    borderBottomWidth,
+    ellipsisPadding,
+    ellipsisBorderRightWidth,
+    ellipsisBorderLeftWidth,
+    ellipsisBorderTopWidth,
+    ellipsisBorderBottomWidth,
+    ellipsisHeight
+  } = themeTokens;
+  const items = React.Children.toArray(children);
   const {
     isItemActive,
     getItemProps,
@@ -90,19 +77,31 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     previousItemProps,
     shouldRenderButton,
     shouldRenderEllipsis
-  } = (0, _usePagination.default)({
+  } = usePagination({
     items,
-    truncateAbove
+    truncateAbove,
+    numberOfPagesBeforeEllipsis
   });
   const ellipsisTextStyles = selectTextStyles(themeTokens, themeOptions);
-
+  const ellipisContainerStyles = StyleSheet.create({
+    container: {
+      height: ellipsisHeight,
+      padding: ellipsisPadding,
+      borderRightWidth: ellipsisBorderRightWidth,
+      borderLeftWidth: ellipsisBorderLeftWidth,
+      borderTopWidth: ellipsisBorderTopWidth,
+      borderBottomWidth: ellipsisBorderBottomWidth,
+      borderColor
+    }
+  });
   if (items.length === 0) {
     return null;
-  } // TODO: replace with a spacing component when https://github.com/telus/universal-design-system/pull/531 is implemented
-  // concatenate all items to easily wrap them in identical spacing components
-
+  }
 
-  const buttons = [showPrevious && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideButton.default, { ...previousItemProps,
+  // TODO: replace with a spacing component when https://github.com/telus/universal-design-system/pull/531 is implemented
+  // concatenate all items to easily wrap them in identical spacing components
+  const buttons = [showPrevious && /*#__PURE__*/_jsx(SideButton, {
+    ...previousItemProps,
     direction: "previous",
     copy: copy,
     variant: sideButtonVariant,
@@ -110,17 +109,16 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     LinkRouter: LinkRouter,
     linkRouterProps: linkRouterProps
   }), ...items.map((_child, itemIndex) => {
-    var _itemProps$LinkRouter;
-
-    const buttonLabel = "".concat(itemIndex + 1);
+    const buttonLabel = `${itemIndex + 1}`;
     const itemProps = getItemProps(itemIndex);
-    const ItemLinkRouter = (_itemProps$LinkRouter = itemProps.LinkRouter) !== null && _itemProps$LinkRouter !== void 0 ? _itemProps$LinkRouter : LinkRouter;
-    const itemLinkRouterProps = { ...linkRouterProps,
+    const ItemLinkRouter = itemProps.LinkRouter ?? LinkRouter;
+    const itemLinkRouterProps = {
+      ...linkRouterProps,
       ...itemProps.linkRouterProps
     };
-
     if (shouldRenderButton(itemIndex)) {
-      return /*#__PURE__*/(0, _react.createElement)(_PageButton.default, { ...itemProps,
+      return /*#__PURE__*/_createElement(PageButton, {
+        ...itemProps,
         LinkRouter: ItemLinkRouter,
         linkRouterProps: itemLinkRouterProps,
         label: buttonLabel,
@@ -129,16 +127,22 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
         key: buttonLabel
       });
     }
-
     if (shouldRenderEllipsis(itemIndex)) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-        style: ellipsisTextStyles,
-        children: "..."
+      return /*#__PURE__*/_jsx(View, {
+        style: {
+          ...ellipisContainerStyles.container
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          style: {
+            ...ellipsisTextStyles
+          },
+          children: "..."
+        })
       }, "...");
     }
-
     return null;
-  }), showNext && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideButton.default, { ...nextItemProps,
+  }), showNext && /*#__PURE__*/_jsx(SideButton, {
+    ...nextItemProps,
     direction: "next",
     copy: copy,
     variant: sideButtonVariant,
@@ -146,43 +150,68 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     LinkRouter: LinkRouter,
     linkRouterProps: linkRouterProps
   })];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-    style: staticStyles.container,
+  return /*#__PURE__*/_jsx(View, {
+    style: {
+      ...staticStyles.container
+    },
     ref: ref,
     ...selectProps(rest),
-    children: buttons // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
-    .map((element, index) => [element, "page-".concat(index + 1)]).filter(_ref3 => {
-      let [element] = _ref3;
-      return element !== null;
-    }).map(_ref4 => {
-      let [element, key] = _ref4;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-        right: gap,
-        children: element
-      }, key);
+    children: /*#__PURE__*/_jsx(View, {
+      style: {
+        borderColor,
+        borderWidth,
+        borderLeftWidth,
+        borderRightWidth,
+        borderTopWidth,
+        borderBottomWidth,
+        ...staticStyles.container
+      },
+      children: buttons
+      // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
+      .map((element, index) => [element, `page-${index + 1}`]).filter(_ref3 => {
+        let [element] = _ref3;
+        return element !== null;
+      }).map(_ref4 => {
+        let [element, key] = _ref4;
+        return /*#__PURE__*/_jsx(Box, {
+          right: gap,
+          children: element
+        }, key);
+      })
     })
   });
 });
 Pagination.displayName = 'Pagination';
-_PageButton.default.displayName = 'PageButton';
-Pagination.PageButton = _PageButton.default;
-Pagination.propTypes = { ...selectedSystemPropTypes,
-  ..._utils.withLinkRouter.propTypes,
-  children: (0, _utils.componentPropType)('PageButton'),
-  copy: _utils.copyPropTypes,
-  variant: _utils.variantProp.propType,
-  tokens: (0, _utils.getTokensPropType)('Pagination'),
-  sideButtonVariant: _utils.variantProp.propType,
-  sideButtonTokens: (0, _utils.getTokensPropType)('PaginationSideButton')
+PageButton.displayName = 'PageButton';
+Pagination.PageButton = PageButton;
+Pagination.propTypes = {
+  ...selectedSystemPropTypes,
+  ...withLinkRouter.propTypes,
+  children: componentPropType('PageButton'),
+  /**
+   * To change the language for labels
+   */
+  copy: copyPropTypes,
+  variant: variantProp.propType,
+  tokens: getTokensPropType('Pagination'),
+  /**
+   * When passed as `{{ compact: true }}`, `Pagination` does not render labels along side buttons
+   */
+  sideButtonVariant: variantProp.propType,
+  /**
+   * Custom tokens for `PaginationSideButton`
+   */
+  sideButtonTokens: getTokensPropType('PaginationSideButton'),
+  /**
+   * The number of pages before the ellipsis is shown
+   */
+  numberOfPagesBeforeEllipsis: PropTypes.number
 };
-
-const staticStyles = _StyleSheet.default.create({
+const staticStyles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     flexWrap: 'wrap',
     alignItems: 'center'
   }
 });
-
-var _default = Pagination;
-exports.default = _default;
+export default Pagination;

package/lib/Pagination/SideButton.js

@@ -1,50 +1,26 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
-
-var _Icon = require("../Icon");
-
-var _ThemeProvider = require("../ThemeProvider");
-
-var _ViewportProvider = require("../ViewportProvider");
-
-var _utils = require("../utils");
-
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-
-var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
-
-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 Text from "react-native-web/dist/exports/Text";
+import PropTypes from 'prop-types';
+import ButtonBase from '../Button/ButtonBase';
+import { IconText } from '../Icon';
+import { useThemeTokensCallback } from '../ThemeProvider';
+import { useViewport } from '../ViewportProvider';
+import { copyPropTypes, hrefAttrsProp, linkProps, selectTokens, withLinkRouter } from '../utils';
+import dictionary from './dictionary';
+import useCopy from '../utils/useCopy';
 
 // We need to drop the icon here since it gets rendered via children and not
 // `ButtonBase` in order to tap into the state of the button; `displayLabel` flag
 // is also not needed
+import { jsx as _jsx } from "react/jsx-runtime";
 const selectButtonTokens = _ref => {
   let {
     icon: _,
     displayLabel: __,
     ...rest
   } = _ref;
-  return (0, _utils.selectTokens)('Button', rest);
+  return selectTokens('Button', rest);
 };
-
 const selectIconTokens = (_ref2, direction) => {
   let {
     color,
@@ -57,12 +33,11 @@ const selectIconTokens = (_ref2, direction) => {
     translateX: iconDisplace * (direction === 'previous' ? -1 : 1)
   };
 };
-
 const directionToSide = {
   previous: 'left',
   next: 'right'
 };
-const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+const SideButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     direction = 'previous',
     onPress,
@@ -72,35 +47,30 @@ const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     tokens,
     ...props
   } = _ref3;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = useViewport();
   const buttonVariant = {
     direction,
     viewport,
     ...variant
   };
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('PaginationSideButton', tokens, buttonVariant);
-  const getCopy = (0, _useCopy.default)({
-    dictionary: _dictionary.default,
+  const getTokens = useThemeTokensCallback('PaginationSideButton', tokens, buttonVariant);
+  const getCopy = useCopy({
+    dictionary,
     copy
   });
   const {
     icon,
     displayLabel
   } = getTokens(tokens, buttonVariant);
-
   const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
-
   const getIconTokens = buttonState => selectIconTokens(getTokens(buttonState), direction);
-
   const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText');
   const accessibilityLabel = direction === 'previous' ? getCopy('previousLabel') : getCopy('nextLabel');
   const accessibilityRole = href !== undefined ? 'link' : 'button';
-
   const {
     hrefAttrs,
     rest
-  } = _utils.hrefAttrsProp.bundle(props);
-
+  } = hrefAttrsProp.bundle(props);
   const buttonProps = {
     accessibilityRole,
     accessibilityLabel,
@@ -109,7 +79,7 @@ const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     hrefAttrs,
     ...rest
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+  return /*#__PURE__*/_jsx(ButtonBase, {
     ref: ref,
     ...buttonProps,
     tokens: getButtonTokens,
@@ -121,12 +91,12 @@ const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
       const iconProps = {
         tokens: getIconTokens(buttonState)
       };
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconText, {
+      return /*#__PURE__*/_jsx(IconText, {
         icon: icon,
         space: 1,
         iconPosition: directionToSide[direction],
         iconProps: iconProps,
-        children: displayLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        children: displayLabel && /*#__PURE__*/_jsx(Text, {
           style: textStyles,
           children: label
         })
@@ -136,11 +106,8 @@ const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
 });
 SideButton.displayName = 'SideButton';
 SideButton.propTypes = {
-  direction: _propTypes.default.oneOf(['previous', 'next']),
-  copy: _utils.copyPropTypes,
-  ..._utils.linkProps.types
+  direction: PropTypes.oneOf(['previous', 'next']),
+  copy: copyPropTypes,
+  ...linkProps.types
 };
-
-var _default = (0, _utils.withLinkRouter)(SideButton);
-
-exports.default = _default;
+export default withLinkRouter(SideButton);

package/lib/Pagination/constants.js

@@ -0,0 +1,3 @@
+export const TRUNCATE_ABOVE_VALUE = 4;
+export const MIN_PAGES_TO_SHOW = 3;
+export const DEFAULT_PAGE_TO_SHOW_VALUE = 1;

package/lib/Pagination/dictionary.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
+export default {
   en: {
     goToLabel: 'Go to page number',
     currentLabel: '(current)',
@@ -14,12 +8,11 @@ var _default = {
     nextText: 'Next'
   },
   fr: {
-    goToLabel: 'Aller au page n°',
+    goToLabel: 'Aller à la page n°',
     currentLabel: '(page actuelle)',
-    previousLabel: 'Aller au page précédent',
+    previousLabel: 'Aller à la page précédente',
     previousText: 'Précédent',
-    nextLabel: 'Aller au prochain page',
+    nextLabel: 'Aller à la page suivante',
     nextText: 'Suivant'
   }
-};
-exports.default = _default;
+};

package/lib/Pagination/index.js

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

package/lib/Pagination/usePagination.js

@@ -1,35 +1,29 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
+import { DEFAULT_PAGE_TO_SHOW_VALUE, MIN_PAGES_TO_SHOW, TRUNCATE_ABOVE_VALUE } from './constants';
 /**
  * Handles configurable truncating of pagination items.
  *
  * @param {object} props
  * @param {React.Element[]} items
  * @param {number} truncateAbove
+ * @param {number} numberOfPagesBeforeEllipsis
  */
 function usePagination(_ref) {
   let {
     items,
-    truncateAbove
+    truncateAbove,
+    numberOfPagesBeforeEllipsis
   } = _ref;
   const activeItemIndex = Math.max(items.findIndex(item => item.props.isActive), 0 // default to the first item if none is marked as active
   );
-
   const getItemProps = index => {
-    var _items$index$props, _items$index;
-
+    var _items$index;
     const {
       onPress,
       href,
       hrefAttrs,
       variant,
       tokens
-    } = (_items$index$props = (_items$index = items[index]) === null || _items$index === void 0 ? void 0 : _items$index.props) !== null && _items$index$props !== void 0 ? _items$index$props : {};
+    } = ((_items$index = items[index]) === null || _items$index === void 0 ? void 0 : _items$index.props) ?? {};
     return {
       onPress,
       href,
@@ -38,33 +32,38 @@ function usePagination(_ref) {
       tokens
     };
   };
-
-  const windowSize = truncateAbove > 4 ? 3 : 1;
-  const truncateEnabled = items.length > truncateAbove;
+  let windowSize;
+  if (numberOfPagesBeforeEllipsis >= 1 && numberOfPagesBeforeEllipsis < items.length) {
+    windowSize = numberOfPagesBeforeEllipsis;
+  } else if (truncateAbove > TRUNCATE_ABOVE_VALUE) {
+    windowSize = MIN_PAGES_TO_SHOW;
+  } else {
+    windowSize = DEFAULT_PAGE_TO_SHOW_VALUE;
+  }
+  const truncateEnabled = items.length > windowSize;
   const truncateWindowStart = windowSize;
-  const truncateWindowEnd = items.length - 1 - windowSize; // basically how many items next to the currently active one do we want to render
+  const truncateWindowEnd = items.length - 1 - windowSize;
 
+  // basically how many items next to the currently active one do we want to render
   const activeWindowStart = activeItemIndex - (windowSize - 1) / 2;
   const activeWindowEnd = activeItemIndex + (windowSize - 1) / 2;
   const isFirstActive = activeItemIndex === 0;
-  const isLastActive = activeItemIndex === items.length - 1; // start truncating when the active item is within the truncate window
+  const isLastActive = activeItemIndex === items.length - 1;
 
+  // start truncating when the active item is within the truncate window
   const isLeftTruncated = truncateEnabled && activeItemIndex >= truncateWindowStart;
   const isRightTruncated = truncateEnabled && activeItemIndex <= truncateWindowEnd;
-
   function shouldRenderEllipsis(itemIndex) {
     const isNextToFirst = itemIndex === 1;
     const isNextToLast = itemIndex === items.length - 2;
     return isLeftTruncated && isNextToFirst || isRightTruncated && isNextToLast;
   }
-
   function shouldRenderButton(itemIndex) {
     const isFirst = itemIndex === 0;
     const isLast = itemIndex === items.length - 1;
     const isInActiveWindow = itemIndex >= activeWindowStart && itemIndex <= activeWindowEnd;
     return isFirst || isLast || isInActiveWindow || !isLeftTruncated && itemIndex <= truncateWindowStart || !isRightTruncated && itemIndex >= truncateWindowEnd;
   }
-
   return {
     showPrevious: !isFirstActive,
     showNext: !isLastActive,
@@ -76,6 +75,4 @@ function usePagination(_ref) {
     previousItemProps: getItemProps(activeItemIndex - 1)
   };
 }
-
-var _default = usePagination;
-exports.default = _default;
+export default usePagination;

package/lib/Portal/Portal.js

@@ -0,0 +1,50 @@
+import { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+
+/**
+ * Portal component renders its children in a separate portal container appended to the document body.
+ *
+ * While `@gorhom/portal` works well for a lot of use-cases, there are some issues with it, particularly around
+ * reading context values (see issues below). For web-only components, it is safe to replace `Portal` from `@gorhom/portal`
+ * to `Portal` to solve such issues
+ *
+ * https://github.com/gorhom/react-native-portal/issues/34
+ * https://github.com/gorhom/react-native-portal/issues/2
+ * https://github.com/gorhom/react-native-portal/issues/3
+ * https://github.com/gorhom/react-native-portal/issues/31
+ *
+ * @component
+ * @param {object} props - The component props.
+ * @param {React.ReactNode} props.children - The content to render within the portal.
+ * @returns {React.ReactPortal} The React portal component.
+ */
+
+const Portal = _ref => {
+  let {
+    children
+  } = _ref;
+  const [portalContainer, setPortalContainer] = useState(null);
+  const isWebClient = typeof document !== 'undefined' && typeof window !== 'undefined';
+  useEffect(() => {
+    if (!isWebClient) {
+      return;
+    }
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    setPortalContainer(container);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      if (container && container.parentNode) {
+        container.parentNode.removeChild(container);
+      }
+    };
+  }, [isWebClient]);
+  if (!portalContainer || !isWebClient) return null;
+  return /*#__PURE__*/ReactDOM.createPortal(children, portalContainer);
+};
+Portal.propTypes = {
+  children: PropTypes.node.isRequired
+};
+export default Portal;

package/lib/Portal/Portal.native.js

@@ -0,0 +1,2 @@
+import { Portal } from '@gorhom/portal';
+export default Portal;

package/lib/Portal/index.js

@@ -0,0 +1,2 @@
+import Portal from './Portal';
+export default Portal;