@telus-uds/components-base 1.97.0 → 1.97.1

package/lib-module/OrderedList/OrderedList.js

@@ -1,64 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { htmlAttrs, selectSystemProps, variantProp, viewProps, getTokensPropType } from '../utils';
-import OrderedListBase from './OrderedListBase';
-import Item from './Item';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropsTypes] = selectSystemProps([htmlAttrs, viewProps]);
-const OrderedList = /*#__PURE__*/React.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.useMemo(() => {
-    const addVariantAndTokensToProps = (child, i, isLastChild) => {
-      var _child$props, _child$props2;
-      const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
-      const existingChildTokens = ((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.tokens) ?? {};
-      return /*#__PURE__*/React.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__*/_jsx(OrderedListBase, {
-    ref: ref,
-    ...selectProps(rest),
-    children: childrenWithParentVariants
-  });
-});
-OrderedList.propTypes = {
-  ...selectedSystemPropsTypes,
-  /**
-   * A list of ordered items wrapped in `OrderedList.Item`.
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * The position to start the list with.
-   */
-  start: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  variant: variantProp.propType,
-  tokens: getTokensPropType('OrderedList')
-};
-OrderedList.displayName = 'OrderedList';
-OrderedList.Item = Item;
-export default OrderedList;

package/lib-module/OrderedList/OrderedListBase.js

@@ -1,36 +0,0 @@
-/* eslint-disable react-native-a11y/has-valid-accessibility-role */
-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 ItemBase from './ItemBase';
-import { jsx as _jsx } from "react/jsx-runtime";
-const OrderedListBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/_jsx(View, {
-    accessibilityRole: "list",
-    ref: ref,
-    style: staticStyles.container,
-    ...rest,
-    children: children
-  });
-});
-OrderedListBase.propTypes = {
-  /**
-   * A list of ordered items wrapped in `OrderedListBase.Item`.
-   */
-  children: PropTypes.node.isRequired
-};
-OrderedListBase.displayName = 'OrderedList';
-OrderedListBase.Item = ItemBase;
-export default OrderedListBase;
-const staticStyles = StyleSheet.create({
-  container: {
-    flexDirection: 'column',
-    margin: 0,
-    padding: 0
-  }
-});

package/lib-module/OrderedList/index.js

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

package/lib-module/Pagination/PageButton.js

@@ -1,74 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ButtonBase from '../Button/ButtonBase';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, copyPropTypes, getTokensPropType, hrefAttrsProp, linkProps, selectTokens, variantProp, withLinkRouter } from '../utils';
-import useCopy from '../utils/useCopy';
-import dictionary from './dictionary';
-import { createElement as _createElement } from "react";
-const PageButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    label,
-    onPress,
-    href,
-    isActive,
-    copy,
-    variant,
-    tokens,
-    ...props
-  } = _ref;
-  const getTokens = useThemeTokensCallback('PaginationPageButton', tokens, variant);
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const getButtonTokens = buttonState => selectTokens('Button', getTokens(buttonState));
-  const activeProps = isActive ? {
-    selected: true,
-    ...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
-  } = hrefAttrsProp.bundle(props);
-  const buttonProps = {
-    accessibilityRole,
-    accessibilityLabel,
-    onPress,
-    href,
-    hrefAttrs,
-    ...rest
-  };
-  return /*#__PURE__*/_createElement(ButtonBase, {
-    ref: ref,
-    ...buttonProps,
-    tokens: getButtonTokens,
-    key: key,
-    ...activeProps
-  }, label);
-});
-PageButton.displayName = 'PageButton';
-PageButton.propTypes = {
-  ...linkProps.types,
-  /**
-   * To set custom label for the button
-   */
-  label: PropTypes.string,
-  /**
-   * To set `PageButton` to active state
-   */
-  isActive: PropTypes.bool,
-  /**
-   * To change the language for labels
-   */
-  copy: copyPropTypes,
-  variant: variantProp.propType,
-  tokens: getTokensPropType('PaginationPageButton')
-};
-export default withLinkRouter(PageButton);

package/lib-module/Pagination/Pagination.js

@@ -1,218 +0,0 @@
-import React 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";
-import { createElement as _createElement } from "react";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const selectTextStyles = (_ref, themeOptions) => {
-  let {
-    color,
-    fontName,
-    fontSize,
-    fontWeight,
-    lineHeight
-  } = _ref;
-  return applyTextStyles({
-    color,
-    fontName,
-    fontSize,
-    fontWeight,
-    lineHeight,
-    themeOptions
-  });
-};
-const Pagination = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    children,
-    copy = 'en',
-    variant,
-    tokens,
-    sideButtonVariant,
-    sideButtonTokens,
-    LinkRouter,
-    linkRouterProps,
-    numberOfPagesBeforeEllipsis = 4,
-    ...rest
-  } = _ref2;
-  const viewport = useViewport();
-  const {
-    truncateAbove,
-    gap,
-    ...themeTokens
-  } = useThemeTokens('Pagination', tokens, variant, {
-    viewport
-  });
-  const {
-    themeOptions
-  } = useTheme();
-  const {
-    borderColor,
-    borderWidth,
-    borderLeftWidth,
-    borderRightWidth,
-    borderTopWidth,
-    borderBottomWidth,
-    ellipsisPadding,
-    ellipsisBorderRightWidth,
-    ellipsisBorderLeftWidth,
-    ellipsisBorderTopWidth,
-    ellipsisBorderBottomWidth,
-    ellipsisHeight
-  } = themeTokens;
-  const items = React.Children.toArray(children);
-  const {
-    isItemActive,
-    getItemProps,
-    showPrevious,
-    showNext,
-    nextItemProps,
-    previousItemProps,
-    shouldRenderButton,
-    shouldRenderEllipsis
-  } = usePagination({
-    items,
-    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__*/_jsx(SideButton, {
-    ...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__*/_createElement(PageButton, {
-        ...itemProps,
-        LinkRouter: ItemLinkRouter,
-        linkRouterProps: itemLinkRouterProps,
-        label: buttonLabel,
-        copy: copy,
-        isActive: isItemActive(itemIndex),
-        key: buttonLabel
-      });
-    }
-    if (shouldRenderEllipsis(itemIndex)) {
-      return /*#__PURE__*/_jsx(View, {
-        style: {
-          ...ellipisContainerStyles.container
-        },
-        children: /*#__PURE__*/_jsx(Text, {
-          style: {
-            ...ellipsisTextStyles
-          },
-          children: "..."
-        })
-      }, "...");
-    }
-    return null;
-  }), showNext && /*#__PURE__*/_jsx(SideButton, {
-    ...nextItemProps,
-    direction: "next",
-    copy: copy,
-    variant: sideButtonVariant,
-    tokens: sideButtonTokens,
-    LinkRouter: LinkRouter,
-    linkRouterProps: linkRouterProps
-  })];
-  return /*#__PURE__*/_jsx(View, {
-    style: {
-      ...staticStyles.container
-    },
-    ref: ref,
-    ...selectProps(rest),
-    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.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.create({
-  container: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center'
-  }
-});
-export default Pagination;

package/lib-module/Pagination/SideButton.js

@@ -1,113 +0,0 @@
-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 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.forwardRef((_ref3, ref) => {
-  let {
-    direction = 'previous',
-    onPress,
-    href,
-    copy,
-    variant,
-    tokens,
-    ...props
-  } = _ref3;
-  const viewport = useViewport();
-  const buttonVariant = {
-    direction,
-    viewport,
-    ...variant
-  };
-  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
-  } = hrefAttrsProp.bundle(props);
-  const buttonProps = {
-    accessibilityRole,
-    accessibilityLabel,
-    onPress,
-    href,
-    hrefAttrs,
-    ...rest
-  };
-  return /*#__PURE__*/_jsx(ButtonBase, {
-    ref: ref,
-    ...buttonProps,
-    tokens: getButtonTokens,
-    children: _ref4 => {
-      let {
-        textStyles,
-        ...buttonState
-      } = _ref4;
-      const iconProps = {
-        tokens: getIconTokens(buttonState)
-      };
-      return /*#__PURE__*/_jsx(IconText, {
-        icon: icon,
-        space: 1,
-        iconPosition: directionToSide[direction],
-        iconProps: iconProps,
-        children: displayLabel && /*#__PURE__*/_jsx(Text, {
-          style: textStyles,
-          children: label
-        })
-      });
-    }
-  });
-});
-SideButton.displayName = 'SideButton';
-SideButton.propTypes = {
-  direction: PropTypes.oneOf(['previous', 'next']),
-  copy: copyPropTypes,
-  ...linkProps.types
-};
-export default withLinkRouter(SideButton);

package/lib-module/Pagination/constants.js

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

package/lib-module/Pagination/dictionary.js

@@ -1,18 +0,0 @@
-export 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-module/Pagination/index.js

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

package/lib-module/Pagination/usePagination.js

@@ -1,79 +0,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,
-    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;
-    const {
-      onPress,
-      href,
-      hrefAttrs,
-      variant,
-      tokens
-    } = ((_items$index = items[index]) === null || _items$index === void 0 ? void 0 : _items$index.props) ?? {};
-    return {
-      onPress,
-      href,
-      hrefAttrs,
-      variant,
-      tokens
-    };
-  };
-  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 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)
-  };
-}
-export default usePagination;

package/lib-module/Portal/Portal.js

@@ -1,50 +0,0 @@
-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-module/Portal/Portal.native.js

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

package/lib-module/Portal/index.js

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