@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/cjs/OrderedList/OrderedList.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("../utils");
+var _OrderedListBase = _interopRequireDefault(require("./OrderedListBase"));
+var _Item = _interopRequireDefault(require("./Item"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropsTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs, _utils.viewProps]);
+const OrderedList = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    start = 1,
+    variant = {},
+    tokens = {},
+    ...rest
+  } = _ref;
+  // Pass any variants and tokens "OrderedList" receives down to the individual list items.
+  const childrenWithParentVariants = _react.default.useMemo(() => {
+    const addVariantAndTokensToProps = (child, i, isLastChild) => {
+      const existingChildVariants = child.props?.variant ?? {};
+      const existingChildTokens = child.props?.tokens ?? {};
+      return /*#__PURE__*/_react.default.cloneElement(child, {
+        index: start + i,
+        isLastChild,
+        variant: {
+          ...existingChildVariants,
+          ...variant
+        },
+        tokens: {
+          ...existingChildTokens,
+          ...tokens
+        }
+      });
+    };
+    if (variant || tokens) {
+      if (Array.isArray(children)) {
+        return children.map((child, i) => addVariantAndTokensToProps(child, i, i === children.length - 1));
+      }
+      return [addVariantAndTokensToProps(children, 0, true)];
+    }
+    return children;
+  }, [children, variant, start, tokens]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OrderedListBase.default, {
+    ref: ref,
+    ...selectProps(rest),
+    children: childrenWithParentVariants
+  });
+});
+OrderedList.propTypes = {
+  ...selectedSystemPropsTypes,
+  /**
+   * A list of ordered items wrapped in `OrderedList.Item`.
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * The position to start the list with.
+   */
+  start: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('OrderedList')
+};
+OrderedList.displayName = 'OrderedList';
+OrderedList.Item = _Item.default;
+var _default = exports.default = OrderedList;

package/lib/cjs/OrderedList/OrderedListBase.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(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 _ItemBase = _interopRequireDefault(require("./ItemBase"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* eslint-disable react-native-a11y/has-valid-accessibility-role */
+
+const OrderedListBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    accessibilityRole: "list",
+    ref: ref,
+    style: staticStyles.container,
+    ...rest,
+    children: children
+  });
+});
+OrderedListBase.propTypes = {
+  /**
+   * A list of ordered items wrapped in `OrderedListBase.Item`.
+   */
+  children: _propTypes.default.node.isRequired
+};
+OrderedListBase.displayName = 'OrderedList';
+OrderedListBase.Item = _ItemBase.default;
+var _default = exports.default = OrderedListBase;
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    flexDirection: 'column',
+    margin: 0,
+    padding: 0
+  }
+});

package/lib/cjs/OrderedList/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _OrderedList = _interopRequireDefault(require("./OrderedList"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _OrderedList.default;

package/lib/cjs/Pagination/PageButton.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const PageButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    label,
+    onPress,
+    href,
+    isActive,
+    copy,
+    variant,
+    tokens,
+    ...props
+  } = _ref;
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('PaginationPageButton', tokens, variant);
+  const getCopy = (0, _useCopy.default)({
+    dictionary: _dictionary.default,
+    copy
+  });
+  const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getTokens(buttonState));
+  const activeProps = isActive ? {
+    selected: true,
+    ..._utils.a11yProps.nonFocusableProps
+    // a brute fix for the focus state being stuck on an active item since it becomes non-focusable
+    // (see https://github.com/telus/universal-design-system/pull/577#issuecomment-931344107)
+  } : {};
+  const key = isActive ? 'active-item' : undefined;
+  const accessibilityRole = href !== undefined ? 'link' : 'button';
+  const activeLabel = isActive ? ` ${getCopy('currentLabel')}` : '';
+  const accessibilityLabel = `${getCopy('goToLabel')} ${label}${activeLabel}`;
+  const {
+    hrefAttrs,
+    rest
+  } = _utils.hrefAttrsProp.bundle(props);
+  const buttonProps = {
+    accessibilityRole,
+    accessibilityLabel,
+    onPress,
+    href,
+    hrefAttrs,
+    ...rest
+  };
+  return /*#__PURE__*/(0, _react.createElement)(_ButtonBase.default, {
+    ref: ref,
+    ...buttonProps,
+    tokens: getButtonTokens,
+    key: key,
+    ...activeProps
+  }, label);
+});
+PageButton.displayName = 'PageButton';
+PageButton.propTypes = {
+  ..._utils.linkProps.types,
+  /**
+   * To set custom label for the button
+   */
+  label: _propTypes.default.string,
+  /**
+   * To set `PageButton` to active state
+   */
+  isActive: _propTypes.default.bool,
+  /**
+   * To change the language for labels
+   */
+  copy: _utils.copyPropTypes,
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('PaginationPageButton')
+};
+var _default = exports.default = (0, _utils.withLinkRouter)(PageButton);

package/lib/cjs/Pagination/Pagination.js

@@ -0,0 +1,226 @@
+"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 _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(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const selectTextStyles = (_ref, themeOptions) => {
+  let {
+    color,
+    fontName,
+    fontSize,
+    fontWeight,
+    lineHeight
+  } = _ref;
+  return (0, _ThemeProvider.applyTextStyles)({
+    color,
+    fontName,
+    fontSize,
+    fontWeight,
+    lineHeight,
+    themeOptions
+  });
+};
+const Pagination = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    children,
+    copy = 'en',
+    variant,
+    tokens,
+    sideButtonVariant,
+    sideButtonTokens,
+    LinkRouter,
+    linkRouterProps,
+    numberOfPagesBeforeEllipsis = 4,
+    ...rest
+  } = _ref2;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const {
+    truncateAbove,
+    gap,
+    ...themeTokens
+  } = (0, _ThemeProvider.useThemeTokens)('Pagination', tokens, variant, {
+    viewport
+  });
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const {
+    borderColor,
+    borderWidth,
+    borderLeftWidth,
+    borderRightWidth,
+    borderTopWidth,
+    borderBottomWidth,
+    ellipsisPadding,
+    ellipsisBorderRightWidth,
+    ellipsisBorderLeftWidth,
+    ellipsisBorderTopWidth,
+    ellipsisBorderBottomWidth,
+    ellipsisHeight
+  } = themeTokens;
+  const items = _react.default.Children.toArray(children);
+  const {
+    isItemActive,
+    getItemProps,
+    showPrevious,
+    showNext,
+    nextItemProps,
+    previousItemProps,
+    shouldRenderButton,
+    shouldRenderEllipsis
+  } = (0, _usePagination.default)({
+    items,
+    truncateAbove,
+    numberOfPagesBeforeEllipsis
+  });
+  const ellipsisTextStyles = selectTextStyles(themeTokens, themeOptions);
+  const ellipisContainerStyles = _StyleSheet.default.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,
+    direction: "previous",
+    copy: copy,
+    variant: sideButtonVariant,
+    tokens: sideButtonTokens,
+    LinkRouter: LinkRouter,
+    linkRouterProps: linkRouterProps
+  }), ...items.map((_child, itemIndex) => {
+    const buttonLabel = `${itemIndex + 1}`;
+    const itemProps = getItemProps(itemIndex);
+    const ItemLinkRouter = itemProps.LinkRouter ?? LinkRouter;
+    const itemLinkRouterProps = {
+      ...linkRouterProps,
+      ...itemProps.linkRouterProps
+    };
+    if (shouldRenderButton(itemIndex)) {
+      return /*#__PURE__*/(0, _react.createElement)(_PageButton.default, {
+        ...itemProps,
+        LinkRouter: ItemLinkRouter,
+        linkRouterProps: itemLinkRouterProps,
+        label: buttonLabel,
+        copy: copy,
+        isActive: isItemActive(itemIndex),
+        key: buttonLabel
+      });
+    }
+    if (shouldRenderEllipsis(itemIndex)) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: {
+          ...ellipisContainerStyles.container
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+          style: {
+            ...ellipsisTextStyles
+          },
+          children: "..."
+        })
+      }, "...");
+    }
+    return null;
+  }), showNext && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideButton.default, {
+    ...nextItemProps,
+    direction: "next",
+    copy: copy,
+    variant: sideButtonVariant,
+    tokens: sideButtonTokens,
+    LinkRouter: LinkRouter,
+    linkRouterProps: linkRouterProps
+  })];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: {
+      ...staticStyles.container
+    },
+    ref: ref,
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      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__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          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'),
+  /**
+   * To change the language for labels
+   */
+  copy: _utils.copyPropTypes,
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('Pagination'),
+  /**
+   * When passed as `{{ compact: true }}`, `Pagination` does not render labels along side buttons
+   */
+  sideButtonVariant: _utils.variantProp.propType,
+  /**
+   * Custom tokens for `PaginationSideButton`
+   */
+  sideButtonTokens: (0, _utils.getTokensPropType)('PaginationSideButton'),
+  /**
+   * The number of pages before the ellipsis is shown
+   */
+  numberOfPagesBeforeEllipsis: _propTypes.default.number
+};
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center'
+  }
+});
+var _default = exports.default = Pagination;

package/lib/cjs/Pagination/SideButton.js

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(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(e) { return e && e.__esModule ? e : { default: e }; }
+// 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
+const selectButtonTokens = _ref => {
+  let {
+    icon: _,
+    displayLabel: __,
+    ...rest
+  } = _ref;
+  return (0, _utils.selectTokens)('Button', rest);
+};
+const selectIconTokens = (_ref2, direction) => {
+  let {
+    color,
+    iconSize,
+    iconDisplace
+  } = _ref2;
+  return {
+    color,
+    size: iconSize,
+    translateX: iconDisplace * (direction === 'previous' ? -1 : 1)
+  };
+};
+const directionToSide = {
+  previous: 'left',
+  next: 'right'
+};
+const SideButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+  let {
+    direction = 'previous',
+    onPress,
+    href,
+    copy,
+    variant,
+    tokens,
+    ...props
+  } = _ref3;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const buttonVariant = {
+    direction,
+    viewport,
+    ...variant
+  };
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('PaginationSideButton', tokens, buttonVariant);
+  const getCopy = (0, _useCopy.default)({
+    dictionary: _dictionary.default,
+    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);
+  const buttonProps = {
+    accessibilityRole,
+    accessibilityLabel,
+    onPress,
+    href,
+    hrefAttrs,
+    ...rest
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+    ref: ref,
+    ...buttonProps,
+    tokens: getButtonTokens,
+    children: _ref4 => {
+      let {
+        textStyles,
+        ...buttonState
+      } = _ref4;
+      const iconProps = {
+        tokens: getIconTokens(buttonState)
+      };
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconText, {
+        icon: icon,
+        space: 1,
+        iconPosition: directionToSide[direction],
+        iconProps: iconProps,
+        children: displayLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+          style: textStyles,
+          children: label
+        })
+      });
+    }
+  });
+});
+SideButton.displayName = 'SideButton';
+SideButton.propTypes = {
+  direction: _propTypes.default.oneOf(['previous', 'next']),
+  copy: _utils.copyPropTypes,
+  ..._utils.linkProps.types
+};
+var _default = exports.default = (0, _utils.withLinkRouter)(SideButton);

package/lib/cjs/Pagination/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TRUNCATE_ABOVE_VALUE = exports.MIN_PAGES_TO_SHOW = exports.DEFAULT_PAGE_TO_SHOW_VALUE = void 0;
+const TRUNCATE_ABOVE_VALUE = exports.TRUNCATE_ABOVE_VALUE = 4;
+const MIN_PAGES_TO_SHOW = exports.MIN_PAGES_TO_SHOW = 3;
+const DEFAULT_PAGE_TO_SHOW_VALUE = exports.DEFAULT_PAGE_TO_SHOW_VALUE = 1;

package/lib/cjs/Pagination/dictionary.js

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

package/lib/cjs/Pagination/index.js

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

package/lib/cjs/Pagination/usePagination.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _constants = require("./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,
+    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 => {
+    const {
+      onPress,
+      href,
+      hrefAttrs,
+      variant,
+      tokens
+    } = items[index]?.props ?? {};
+    return {
+      onPress,
+      href,
+      hrefAttrs,
+      variant,
+      tokens
+    };
+  };
+  let windowSize;
+  if (numberOfPagesBeforeEllipsis >= 1 && numberOfPagesBeforeEllipsis < items.length) {
+    windowSize = numberOfPagesBeforeEllipsis;
+  } else if (truncateAbove > _constants.TRUNCATE_ABOVE_VALUE) {
+    windowSize = _constants.MIN_PAGES_TO_SHOW;
+  } else {
+    windowSize = _constants.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 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 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,
+    shouldRenderButton,
+    shouldRenderEllipsis,
+    isItemActive: itemIndex => itemIndex === activeItemIndex,
+    getItemProps,
+    nextItemProps: getItemProps(activeItemIndex + 1),
+    previousItemProps: getItemProps(activeItemIndex - 1)
+  };
+}
+var _default = exports.default = usePagination;