@telus-uds/components-base 1.96.0 → 1.97.1

package/lib-module/SideNav/Item.js

@@ -1,143 +0,0 @@
-import React from 'react';
-import Pressable from "react-native-web/dist/exports/Pressable";
-import Platform from "react-native-web/dist/exports/Platform";
-import PropTypes from 'prop-types';
-import { a11yProps, getTokensPropType, hrefAttrsProp, linkProps, selectSystemProps, variantProp, viewProps } from '../utils';
-import { useThemeTokensCallback, verticalAlignRow } from '../ThemeProvider';
-import ItemContent from './ItemContent';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
-function selectItemStyles(_ref) {
-  let {
-    backgroundColor,
-    borderColor,
-    borderWidth,
-    borderStyle,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    paddingBottom,
-    justifyContent,
-    verticalAlign
-  } = _ref;
-  return {
-    backgroundColor,
-    borderTopColor: borderColor,
-    borderTopWidth: borderWidth,
-    borderTopStyle: borderStyle,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    paddingBottom,
-    justifyContent,
-    ...verticalAlignRow(verticalAlign)
-  };
-}
-
-/**
- `SideNav.Item` is a navigational element that is used within `SideNav` or `SideNav.ItemsGroup`.
-
- This component can only be accessed as a name-spaced component: `SideNav.Item`.
- */
-const Item = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    children,
-    itemId,
-    groupId,
-    onPress,
-    isActive = false,
-    isExpanded = false,
-    tokens,
-    variant,
-    href,
-    accessibilityRole = 'link',
-    testID,
-    ...props
-  } = _ref2;
-  const handlePress = () => onPress(itemId, groupId);
-  const {
-    hrefAttrs,
-    rest
-  } = hrefAttrsProp.bundle(props);
-  const selectedProps = selectProps({
-    accessibilityRole,
-    href,
-    onPress: handlePress,
-    hrefAttrs,
-    ...rest
-  });
-  const getTokens = useThemeTokensCallback('SideNavItem', tokens, variant);
-  const getAppearanceState = _ref3 => {
-    let {
-      hovered,
-      focused
-    } = _ref3;
-    return {
-      hover: hovered,
-      active: isActive,
-      expanded: isExpanded,
-      focus: focused
-    };
-  };
-  const getPressableStyle = pressableState => ({
-    ...selectItemStyles(getTokens(getAppearanceState(pressableState))),
-    ...(Platform.OS === 'web' ? {
-      outline: 'none'
-    } : {})
-  });
-  return /*#__PURE__*/_jsx(Pressable, {
-    ref: ref,
-    style: getPressableStyle,
-    accessibilityState: {
-      selected: isActive
-    },
-    ...selectedProps,
-    children: pressableState => {
-      const themeTokens = getTokens(getAppearanceState(pressableState));
-      return /*#__PURE__*/_jsx(ItemContent, {
-        tokens: themeTokens,
-        children: children
-      });
-    }
-  });
-});
-Item.displayName = 'Item';
-Item.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * Text content of the `Item`.
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * @ignore
-   * Set internally in `SideNav` render function - used to keep track of active item.
-   */
-  itemId: PropTypes.string,
-  /**
-   * @ignore
-   * Set internally in `SideNav` render function - used to keep track of expanded items groups.
-   */
-  groupId: PropTypes.string,
-  onPress: PropTypes.func,
-  href: PropTypes.string,
-  /**
-   * On Web if href is passed, React Native Web maps this object's props to
-   * `rel`, `target` and `download` attrs.
-   */
-  hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
-  /**
-   * @ignore
-   * Set internally in `SideNav` render function.
-   */
-  isActive: PropTypes.bool,
-  /**
-   * @ignore
-   * Set internally in `SideNav.ItemsGroup` render function. Used to mark expanded `ItemsGroup` parent.
-   */
-  isExpanded: PropTypes.bool,
-  accessibilityRole: PropTypes.string,
-  testID: PropTypes.number,
-  tokens: getTokensPropType('SideNavItem'),
-  variant: variantProp.propType
-};
-export default Item;

package/lib-module/SideNav/ItemContent.js

@@ -1,50 +0,0 @@
-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 Typography from '../Typography';
-import { selectTokens, getTokensPropType } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export function selectAccentStyles(tokens) {
-  return {
-    left: tokens.accentOffset,
-    top: tokens.accentPadding,
-    bottom: tokens.accentPadding,
-    backgroundColor: tokens.accentBackgroundColor,
-    width: tokens.accentWidth,
-    position: 'absolute'
-  };
-}
-
-/**
- * Content inside an item or control in a SideNav, themed by the SideNavItem theme
- */
-const ItemContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    tokens
-  } = _ref;
-  const typographyTokens = selectTokens('Typography', tokens);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Typography, {
-      tokens: typographyTokens,
-      ref: ref,
-      children: children
-    }), /*#__PURE__*/_jsx(View, {
-      style: [staticStyles.absolute, selectAccentStyles(tokens)]
-    })]
-  });
-});
-ItemContent.displayName = 'ItemContent';
-ItemContent.propTypes = {
-  tokens: getTokensPropType('SideNavItem'),
-  children: PropTypes.node
-};
-const staticStyles = StyleSheet.create({
-  absolute: {
-    position: 'absolute'
-  }
-});
-export default ItemContent;

package/lib-module/SideNav/ItemsGroup.js

@@ -1,121 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ItemContent from './ItemContent';
-import ExpandCollapse from '../ExpandCollapse';
-import { getTokensPropType, variantProp, componentPropType, selectTokens } from '../utils';
-import { useThemeTokensCallback } from '../ThemeProvider';
-
-/**
- Expandable content areas for use within `SideNav`.
-
- This component can only be accessed as a name-spaced component: `SideNav.ItemsGroup`.
-
- `SideNav.ItemsGroup` contains a label and a list of items. Items can link to in-page elements or route to other pages.
-
- ## Usage Criteria
- - Use `SideNav.ItemsGroup` with large pages that have multiple sections
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-const ItemsGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    label,
-    openGroups,
-    groupId,
-    isActive = false,
-    variant,
-    tokens,
-    itemTokens,
-    onToggle
-  } = _ref;
-  // A SideNav control uses the same style and theme as SideNavItem, with a 'parent' variant,
-  // plus control-specific tokens from the SideNavItemsGroup theme (e.g. open/close icon, etc).
-  const getAppearance = appearance => ({
-    ...variant,
-    ...appearance,
-    active: isActive
-  });
-  const getItemAppearance = appearance => ({
-    ...getAppearance(appearance),
-    type: 'parent'
-  });
-  const getGroupTokens = useThemeTokensCallback('SideNavItemsGroup', tokens, variant);
-  const getPanelTokens = appearance => {
-    const {
-      panelBorderColor,
-      ...itemsGroupTokens
-    } = getGroupTokens(getAppearance(appearance));
-    const groupTokens = {
-      ...itemsGroupTokens,
-      borderWidth: 0,
-      marginBottom: 0
-    };
-    return selectTokens('ExpandCollapsePanel', groupTokens);
-  };
-  const getItemTokens = useThemeTokensCallback('SideNavItem', itemTokens, variant);
-  const getControlTokens = appearance => selectTokens('ExpandCollapseControl', {
-    ...getItemTokens(getItemAppearance(appearance)),
-    // main style from SideNavItem
-    ...getGroupTokens(getAppearance(appearance)) // control-specific tokens like icon etc
-  });
-
-  const controlContent = controlState => {
-    const currentItemTokens = getItemTokens(getItemAppearance(controlState));
-    return /*#__PURE__*/_jsx(ItemContent, {
-      tokens: currentItemTokens,
-      children: label
-    });
-  };
-  return /*#__PURE__*/_jsx(ExpandCollapse.Panel, {
-    ref: ref,
-    openIds: openGroups,
-    panelId: groupId,
-    onToggle: onToggle,
-    tokens: getPanelTokens,
-    controlTokens: getControlTokens,
-    control: controlContent,
-    accessibilityState: {
-      active: isActive
-    } // ExpandCollapse.Panel handles expanded state
-    ,
-    children: children
-  });
-});
-ItemsGroup.displayName = 'ItemsGroup';
-ItemsGroup.propTypes = {
-  /**
-   * Specifies the links contained within. It may only contain `SideNav.Item`.
-   */
-  children: componentPropType('Item'),
-  /**
-   * Text content of the group's parent `SideNav.Item`.
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * @ignore
-   * Set internally in `SideNav` render function - used to keep track of expanded items groups.
-   */
-  groupId: PropTypes.string,
-  /**
-   * @ignore
-   * Set internally in `SideNav` render function. Called when the group is expanded/collapsed.
-   */
-  onToggle: PropTypes.func,
-  /**
-   * @ignore
-   * Set internally in `SideNav` render function. Contains `groupId`s of currently open groups.
-   */
-  openGroups: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
-  /**
-   * @ignore
-   * Set internally in `SideNav` render function. Used to mark group containing the currently active `SideNav.Item`.
-   */
-  isActive: PropTypes.bool,
-  variant: variantProp.propType,
-  tokens: getTokensPropType('SideNavItemsGroup'),
-  /**
-   * Custom tokens for `SideNav.Item`
-   */
-  itemTokens: getTokensPropType('SideNavItem')
-};
-export default ItemsGroup;

package/lib-module/SideNav/SideNav.js

@@ -1,131 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ExpandCollapse from '../ExpandCollapse';
-import Item from './Item';
-import ItemsGroup from './ItemsGroup';
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, componentPropType, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
-import { createElement as _createElement } from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-function selectBorderStyles(tokens) {
-  return {
-    borderBottomWidth: tokens.borderWidth,
-    borderBottomStyle: tokens.borderStyle,
-    borderBottomColor: tokens.borderColor
-  };
-}
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-/**
- ## Usage Criteria
- - Use in conjunction with a large amount of educational / informational content
- - Allow the user to navigate between options frequently and efficiently
- */
-const SideNav = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    variant = {},
-    tokens,
-    accordion = true,
-    itemTokens,
-    groupTokens,
-    ...rest
-  } = _ref;
-  const themeTokens = useThemeTokens('SideNav', tokens, variant);
-  const [active, setActive] = React.useState({
-    groupId: undefined,
-    itemId: undefined
-  });
-  const onItemPress = (itemId, groupId) => {
-    setActive({
-      itemId,
-      groupId
-    });
-  };
-  const isItemActive = (itemId, groupId) => {
-    return active.groupId === groupId && active.itemId === itemId;
-  };
-  return /*#__PURE__*/_jsx(ExpandCollapse, {
-    ref: ref,
-    maxOpen: accordion ? 1 : null,
-    style: selectBorderStyles(themeTokens),
-    ...selectProps(rest),
-    children: _ref2 => {
-      let {
-        openIds,
-        onToggle
-      } = _ref2;
-      const renderItem = (item, index, groupId) => {
-        const {
-          itemId = `item-${index}`,
-          onPress
-        } = item.props;
-        const handlePress = function () {
-          onItemPress(...arguments);
-          if (onPress) onPress(...arguments);
-        };
-        return /*#__PURE__*/_createElement(Item, {
-          ...item.props,
-          key: itemId,
-          itemId: itemId,
-          groupId: groupId,
-          variant: groupId ? {
-            ...variant,
-            type: 'child'
-          } : variant,
-          tokens: itemTokens,
-          isActive: isItemActive(itemId, groupId),
-          onPress: handlePress
-        });
-      };
-      return React.Children.map(children, (child, index) => {
-        // iterate over children and identify them internally to later reference expanded groups and active items
-        if (child.type === Item) return renderItem(child, index);
-        if (child.type === ItemsGroup) {
-          const {
-            groupId = `group-${index}`
-          } = child.props;
-          const isGroupActive = active.itemId !== undefined && active.groupId === groupId;
-          const handleToggle = event => onToggle(groupId, event);
-          return /*#__PURE__*/_createElement(ItemsGroup, {
-            ...child.props,
-            key: groupId,
-            groupId: groupId,
-            variant: variant,
-            tokens: groupTokens,
-            itemTokens: itemTokens,
-            openGroups: openIds,
-            isActive: isGroupActive,
-            onToggle: handleToggle
-          }, React.Children.map(child.props.children, (item, itemIndex) => renderItem(item, itemIndex, groupId)));
-        }
-        return null;
-      });
-    }
-  });
-});
-SideNav.displayName = 'SideNav';
-SideNav.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * Specifies the structure and links of the `SideNav`. It may only consist of `SideNav.Item` and `SideNav.ItemsGroup`.
-   */
-  children: componentPropType(['Item', 'ItemsGroup']),
-  /**
-   * Identifies if only one `SideNav.ItemsGroup` should be open at a time.
-   */
-  accordion: PropTypes.bool,
-  variant: variantProp.propType,
-  tokens: getTokensPropType('SideNav'),
-  /**
-   * Custom tokens for `SideNav.Item`
-   */
-  itemTokens: getTokensPropType('SideNavItem'),
-  /**
-   * Custom tokens for `SideNavItemsGroup`
-   */
-  groupTokens: getTokensPropType('SideNavItemsGroup')
-};
-SideNav.Item = Item;
-SideNav.ItemsGroup = ItemsGroup;
-export default SideNav;

package/lib-module/SideNav/index.js

@@ -1 +0,0 @@
-export { default } from './SideNav';

package/lib-module/Skeleton/Skeleton.js

@@ -1,177 +0,0 @@
-import React from 'react';
-import Animated from "react-native-web/dist/exports/Animated";
-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 propTypes from 'prop-types';
-import StackView from '../StackView';
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, responsiveProps, useResponsiveProp, useSpacingScale, spacingProps, variantProp, viewProps } from '../utils';
-import useSkeletonNativeAnimation from './useSkeletonNativeAnimation';
-import skeletonWebAnimation from './skeletonWebAnimation';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const selectSkeletonStyles = _ref => {
-  let {
-    color,
-    radius
-  } = _ref;
-  return {
-    backgroundColor: color,
-    borderRadius: radius,
-    maxWidth: '100%'
-  };
-};
-const selectLineStyles = _ref2 => {
-  let {
-    skeletonHeight,
-    lineWidth,
-    radius
-  } = _ref2;
-  return {
-    width: lineWidth,
-    height: skeletonHeight,
-    borderRadius: radius
-  };
-};
-const selectShapeStyles = _ref3 => {
-  let {
-    skeletonHeight
-  } = _ref3;
-  return {
-    height: skeletonHeight,
-    width: skeletonHeight
-  };
-};
-const selectSquareStyles = _ref4 => {
-  let {
-    radius
-  } = _ref4;
-  return {
-    borderRadius: radius
-  };
-};
-const Skeleton = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
-  let {
-    tokens,
-    variant,
-    size,
-    sizeIndex = size,
-    sizePixels,
-    characters,
-    lines,
-    shape = 'line',
-    ...rest
-  } = _ref5;
-  const themeTokens = useThemeTokens('Skeleton', tokens, variant);
-  const pixels = useResponsiveProp(sizePixels);
-  const spacingScaleValue = typeof pixels === 'number' ?
-  // Size by an exact number of pixels
-  {
-    options: {
-      size: pixels
-    }
-  } :
-  // Size by an index on the spacing scale (getting default index from theme if none provided)
-  sizeIndex || themeTokens.size;
-  const skeletonHeight = useSpacingScale(spacingScaleValue);
-
-  // Animation color and animation duration
-  const {
-    secondColor,
-    animationDuration
-  } = themeTokens;
-  const nativeAnimation = useSkeletonNativeAnimation({
-    animationDuration
-  });
-  const getAnimationBasedOnPlatform = () => {
-    const animation = Platform.OS === 'web' ? skeletonWebAnimation(secondColor, animationDuration) : nativeAnimation;
-    // We must pass the animation styles through `StyleSheet.create`
-    // @see https://github.com/necolas/react-native-web/issues/2387
-    const styles = StyleSheet.create({
-      animation
-    });
-    return styles.animation;
-  };
-  const getLineWidth = () => {
-    if (characters) {
-      return characters * themeTokens.baseWidth;
-    }
-    return themeTokens.characters * themeTokens.baseWidth;
-  };
-  const getStyledBasedOnShape = () => {
-    if (shape === 'circle') {
-      return selectShapeStyles({
-        skeletonHeight
-      });
-    }
-    if (shape === 'box') {
-      return [selectShapeStyles({
-        skeletonHeight
-      }), selectSquareStyles({
-        radius: themeTokens.squareRadius
-      })];
-    }
-    return selectLineStyles({
-      skeletonHeight,
-      lineWidth: getLineWidth(),
-      radius: themeTokens.lineRadius
-    });
-  };
-  const renderSkeleton = function () {
-    let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    // @see https://github.com/necolas/react-native-web/issues/2387
-    const Component = Platform.OS === 'web' ? View : Animated.View;
-    return /*#__PURE__*/_jsx(Component, {
-      testID: "skeleton",
-      style: [selectSkeletonStyles(themeTokens), getAnimationBasedOnPlatform(), getStyledBasedOnShape()]
-    }, `skeleton-${index + 1}`);
-  };
-  return /*#__PURE__*/_jsx(StackView, {
-    space: themeTokens.spaceBetweenLines,
-    ref: ref,
-    ...selectProps(rest),
-    children: lines > 1 ? [...Array(lines)].map((_, index) => renderSkeleton(index)) : renderSkeleton()
-  });
-});
-Skeleton.displayName = 'Skeleton';
-Skeleton.propTypes = {
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('Skeleton'),
-  variant: variantProp.propType,
-  /**
-   * Sets the size of Skeleton lines or shape according to the theme's spacing scale. For example, size={1} gives the smallest non-zero theme-defined spacing size.
-   *
-   * May also accept an object with responsive viewport keys or spacing scale options - see `useSpacingScale` for details.
-   */
-  sizeIndex: spacingProps.types.spacingValue,
-  /**
-   * @deprecated alias for `sizeIndex`
-   */
-  size: spacingProps.types.spacingValue,
-  /**
-   * Sets the size of Skeleton lines or shape to an exact number of pixels. Use when it's necessary to exactly match sizes of images or other boxes.
-   *
-   * Accepts a number or an object with responsive viewport keys, e.g. { xs: 32, lg: 64 } would be 32px at xs, sm and md and 64 at lg and xl viewports.
-   */
-  sizePixels: responsiveProps.getTypeOptionallyByViewport(propTypes.number),
-  /**
-   * Determines the width of simulated lines of text if the Skeleton's shape is 'line' (the default shape).
-   *
-   * Only has any affect if shape is line (the default). If unset, takes a default value from the theme.
-   */
-  characters: propTypes.number,
-  /**
-   * Determines how many Skeleton items are rendered (default 1).
-   *
-   * Recommended usage is to simulate paragraphs of text when Skeleton's shape is 'line' (the default shape).
-   *
-   * The amount of spacing between multiple lines is controlled by theme tokens.
-   */
-  lines: propTypes.number,
-  /**
-   * Determines if the skeleton should resemble lines of text (default), a circle, or a square box with themed rounded corners.
-   */
-  shape: propTypes.oneOf(['line', 'circle', 'box'])
-};
-export default Skeleton;

package/lib-module/Skeleton/index.js

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

package/lib-module/Skeleton/skeleton.constant.js

@@ -1,2 +0,0 @@
-export const DEFAULT_OPACITY = 1;
-export const OPACITY_STOP = 0.4;

package/lib-module/Skeleton/skeletonWebAnimation.js

@@ -1,14 +0,0 @@
-const skeletonWebAnimation = (secondColor, animationTime) => {
-  return {
-    animationDuration: `${animationTime}ms`,
-    animationTimingFunction: 'ease-in-out',
-    animationDelay: '0.5s',
-    animationIterationCount: 'infinite',
-    animationKeyframes: {
-      '50%': {
-        backgroundColor: secondColor
-      }
-    }
-  };
-};
-export default skeletonWebAnimation;

package/lib-module/Skeleton/useSkeletonNativeAnimation.js

@@ -1,28 +0,0 @@
-import { useEffect, useRef } from 'react';
-import Animated from "react-native-web/dist/exports/Animated";
-import Platform from "react-native-web/dist/exports/Platform";
-import { DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant';
-const useSkeletonNativeAnimation = _ref => {
-  let {
-    animationDuration
-  } = _ref;
-  const fadeAnimation = useRef(new Animated.Value(DEFAULT_OPACITY)).current;
-
-  /* eslint-disable react-hooks/exhaustive-deps */
-  useEffect(() => {
-    const fade = Animated.sequence([Animated.timing(fadeAnimation, {
-      toValue: OPACITY_STOP,
-      duration: animationDuration,
-      useNativeDriver: Platform.OS !== 'web'
-    }), Animated.timing(fadeAnimation, {
-      toValue: DEFAULT_OPACITY,
-      duration: animationDuration,
-      useNativeDriver: Platform.OS !== 'web'
-    })]);
-    Animated.loop(fade).start();
-  }, [fadeAnimation]);
-  return {
-    opacity: fadeAnimation
-  };
-};
-export default useSkeletonNativeAnimation;