@telus-uds/components-base 1.96.0 → 1.97.1

package/lib-module/List/ListItemBase.js

@@ -1,164 +0,0 @@
-import React from 'react';
-import View from "react-native-web/dist/exports/View";
-import Platform from "react-native-web/dist/exports/Platform";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import PropTypes from 'prop-types';
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
-import ListItemContent from './ListItemContent';
-import ListItemMark from './ListItemMark';
-import Typography from '../Typography';
-import { useThemeTokens } from '../ThemeProvider';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const selectItemBlockStyles = _ref => {
-  let {
-    interItemMargin
-  } = _ref;
-  return {
-    marginBottom: interItemMargin
-  };
-};
-const selectDividerStyles = _ref2 => {
-  let {
-    dividerColor,
-    dividerSize,
-    interItemMarginWithDivider
-  } = _ref2;
-  return {
-    borderBottomWidth: dividerSize,
-    borderColor: dividerColor,
-    marginBottom: interItemMarginWithDivider,
-    paddingBottom: interItemMarginWithDivider
-  };
-};
-
-/**
- * ListItem is responsible for rendering icon or a bullet as side item
- */
-const ListItemBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
-  let {
-    tokens,
-    icon,
-    iconColor,
-    iconSize,
-    showDivider,
-    children,
-    title,
-    isLastItem,
-    accessibilityRole = Platform.select({
-      web: 'listitem',
-      default: undefined
-    }),
-    ...rest
-  } = _ref3;
-  const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
-  const itemBlockStyles = selectItemBlockStyles(themeTokens);
-  const dividerStyles = selectDividerStyles(themeTokens);
-  const {
-    iconMarginTop,
-    itemIconSize
-  } = themeTokens;
-  let adjustedIconMarginTop = iconMarginTop;
-  const {
-    fontSize,
-    lineHeight: lineHeightRatio
-  } = useThemeTokens('Typography', {}, {
-    size: 'h4',
-    bold: true
-  });
-  if (title) {
-    adjustedIconMarginTop = (fontSize * lineHeightRatio - itemIconSize) / 2;
-  }
-  /**
-   * Function responsible returning styling, in case the item is the last shouldn't
-   * add extra margin on the bottom, if "showDivider" is true it should add a divider
-   * and custom margin and padding, otherwise just adds a margin to the bottom
-   */
-  const getContainerStyle = () => {
-    if (isLastItem) {
-      return undefined;
-    }
-    if (showDivider) {
-      return dividerStyles;
-    }
-    return itemBlockStyles;
-  };
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    style: [staticStyles.container, getContainerStyle()],
-    accessibilityRole: accessibilityRole,
-    ...selectProps(rest),
-    children: typeof children === 'function' ? children({
-      tokens,
-      icon,
-      iconColor,
-      iconSize,
-      isLastItem
-    }) : /*#__PURE__*/_jsxs(View, {
-      style: staticStyles.container,
-      children: [/*#__PURE__*/_jsx(ListItemMark, {
-        tokens: {
-          ...tokens,
-          iconMarginTop: adjustedIconMarginTop
-        },
-        icon: icon,
-        iconColor: iconColor,
-        iconSize: iconSize
-      }), /*#__PURE__*/_jsxs(View, {
-        style: staticStyles.titleAndContentContainer,
-        children: [Boolean(title) && /*#__PURE__*/_jsx(Typography, {
-          variant: {
-            size: 'h4',
-            bold: true
-          },
-          children: title
-        }), /*#__PURE__*/_jsx(ListItemContent, {
-          tokens: tokens,
-          children: children
-        })]
-      })]
-    })
-  });
-});
-ListItemBase.displayName = 'ListItem';
-const staticStyles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'row'
-  },
-  titleAndContentContainer: {
-    flexDirection: 'column',
-    flexShrink: 1,
-    flexGrow: 1
-  }
-});
-ListItemBase.propTypes = {
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('List'),
-  variant: variantProp.propType,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-  /**
-   * Renders side item icon
-   */
-  icon: PropTypes.elementType,
-  /**
-   * Will set display icon color
-   */
-  iconColor: PropTypes.string,
-  /**
-   * Allow the user define the icon size if not defined the theme's file
-   */
-  iconSize: PropTypes.number,
-  /**
-   * @ignore
-   * Defined by parent if it's last item on the list
-   */
-  isLastItem: PropTypes.bool,
-  /**
-   * @ignore
-   * In case it is not the last item allow display divider
-   */
-  showDivider: PropTypes.bool
-};
-export default ListItemBase;

package/lib-module/List/ListItemContent.js

@@ -1,73 +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 { wrapStringsInText } from '../utils';
-import { useTheme, applyTextStyles } from '../ThemeProvider';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const tokenTypes = {
-  itemFontWeight: PropTypes.string.isRequired,
-  itemFontSize: PropTypes.number.isRequired,
-  itemLineHeight: PropTypes.number.isRequired,
-  itemFontName: PropTypes.string.isRequired,
-  itemFontColor: PropTypes.string
-};
-const selectItemTextStyles = (_ref, themeOptions) => {
-  let {
-    itemFontWeight,
-    itemFontSize,
-    itemLineHeight,
-    itemFontName,
-    itemFontColor,
-    itemTextColor
-  } = _ref;
-  return applyTextStyles({
-    fontColor: itemFontColor || itemTextColor,
-    fontWeight: itemFontWeight,
-    fontSize: itemFontSize,
-    lineHeight: itemLineHeight,
-    fontName: itemFontName,
-    themeOptions
-  });
-};
-
-/**
- * Subcomponent used within ListItem and similar components for rendering content that fills
- * and wraps available space in a { flexDirection: row } container alongside a ListIconMark,
- * and that applies text styles to strings via supplied tokens.
- *
- * It's the responsibility of themes to make sure that these text tokens align the first line of
- * text nicely against the bullet or icon rendered by ListIconMark.
- */
-const ListItemContent = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    tokens,
-    children
-  } = _ref2;
-  const {
-    themeOptions
-  } = useTheme();
-  const textStyles = selectItemTextStyles(tokens, themeOptions);
-  return /*#__PURE__*/_jsx(View, {
-    style: [staticStyles.wrap, (tokens === null || tokens === void 0 ? void 0 : tokens.itemUnderline) && {
-      textDecorationLine: tokens.itemUnderline,
-      textDecorationColor: tokens.itemFontColor
-    }],
-    ref: ref,
-    children: wrapStringsInText(children, {
-      style: textStyles
-    })
-  });
-});
-ListItemContent.displayName = 'ListItemContent';
-const staticStyles = StyleSheet.create({
-  wrap: {
-    flex: 1,
-    justifyContent: 'center'
-  }
-});
-ListItemContent.propTypes = {
-  tokens: PropTypes.shape(tokenTypes).isRequired,
-  children: PropTypes.node.isRequired
-};
-export default ListItemContent;

package/lib-module/List/ListItemMark.js

@@ -1,126 +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 Icon from '../Icon';
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const tokenTypes = {
-  itemIconSize: PropTypes.number.isRequired,
-  itemIconColor: PropTypes.string.isRequired,
-  listGutter: PropTypes.number.isRequired,
-  iconMarginTop: PropTypes.number.isRequired
-};
-const selectItemIconTokens = _ref => {
-  let {
-    itemIconSize,
-    itemIconColor
-  } = _ref;
-  return {
-    size: itemIconSize,
-    color: itemIconColor
-  };
-};
-const selectSideItemContainerStyles = _ref2 => {
-  let {
-    listGutter,
-    iconMarginTop
-  } = _ref2;
-  return {
-    marginTop: iconMarginTop,
-    marginRight: listGutter
-  };
-};
-
-// Align bullets with the top line of text the same way icons are aligned
-const selectBulletPositioningStyles = _ref3 => {
-  let {
-    itemIconSize
-  } = _ref3;
-  return {
-    width: itemIconSize,
-    height: itemIconSize
-  };
-};
-const selectBulletContainerStyles = _ref4 => {
-  let {
-    itemBulletContainerWidth,
-    itemBulletContainerAlign
-  } = _ref4;
-  return {
-    width: itemBulletContainerWidth,
-    alignItems: itemBulletContainerAlign
-  };
-};
-
-/**
- * Subcomponent used within ListItem and similar components for rendering bullets or icons
- * that sit alongside a ListIconContent in a { flexDirection: row } container.
- *
- * It's the responsibility of themes to make sure that the supplied tokens align the
- * icon or bullet nicely against the first line of text in a ListIconContent.
- */
-const ListItemMark = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
-  let {
-    icon,
-    iconColor,
-    iconSize,
-    tokens = {}
-  } = _ref5;
-  const IconComponent = icon || /*#__PURE__*/_jsx(_Fragment, {});
-  const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
-  const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
-  if (icon) {
-    const iconTokens = selectItemIconTokens(themeTokens);
-    return /*#__PURE__*/_jsx(View, {
-      style: sideItemContainerStyles,
-      children: /*#__PURE__*/_jsx(IconComponent, {
-        size: iconSize || iconTokens.size,
-        color: iconColor || iconTokens.color
-      })
-    });
-  }
-  const bulletColor = themeTokens.itemBulletColor;
-  const {
-    bulletIcon
-  } = themeTokens;
-  const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens);
-  const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens);
-  return /*#__PURE__*/_jsx(View, {
-    style: [sideItemContainerStyles, itemBulletContainerStyles],
-    ref: ref,
-    children: /*#__PURE__*/_jsx(View, {
-      style: [staticStyles.bulletPositioning, itemBulletPositioningStyles],
-      testID: "unordered-item-bullet",
-      children: /*#__PURE__*/_jsx(Icon, {
-        icon: bulletIcon,
-        tokens: {
-          color: bulletColor
-        }
-      })
-    })
-  });
-});
-ListItemMark.displayName = 'ListItemMark';
-ListItemMark.propTypes = {
-  tokens: PropTypes.shape(tokenTypes).isRequired,
-  /**
-   * Renders side item icon
-   */
-  icon: PropTypes.elementType,
-  /**
-   * Will set display icon color
-   */
-  iconColor: PropTypes.string,
-  /**
-   * Allow the user define the icon size
-   */
-  iconSize: PropTypes.number
-};
-const staticStyles = StyleSheet.create({
-  bulletPositioning: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
-export default ListItemMark;

package/lib-module/List/PressableListItemBase.js

@@ -1,112 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ABBPropTypes from 'airbnb-prop-types';
-import Pressable from "react-native-web/dist/exports/Pressable";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Platform from "react-native-web/dist/exports/Platform";
-import { resolvePressableTokens, clickProps, linkProps, hrefAttrsProp, selectTokens, withLinkRouter } from '../utils';
-import ListItemBase from './ListItemBase';
-import ListItemContent from './ListItemContent';
-import ListItemMark from './ListItemMark';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const selectPressableStyles = _ref => {
-  let {
-    backgroundColor,
-    itemFontColor,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    paddingBottom,
-    interItemMargin
-  } = _ref;
-  return {
-    backgroundColor,
-    itemFontColor,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    paddingBottom,
-    marginBottom: interItemMargin,
-    ...Platform.select({
-      web: {
-        outline: 'none'
-      }
-    })
-  };
-};
-const PressableListItemBase = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    href,
-    tokens,
-    icon,
-    children,
-    listItemRef,
-    ...rest
-  } = _ref2;
-  const {
-    onPress,
-    ...props
-  } = clickProps.toPressProps(rest);
-  const {
-    hrefAttrs,
-    rest: listItemProps
-  } = hrefAttrsProp.bundle(props);
-  const handlePress = linkProps.handleHref({
-    href,
-    onPress
-  });
-  const listItemTokens = selectTokens('List', typeof tokens === 'function' ? tokens() : tokens);
-  return /*#__PURE__*/_jsx(ListItemBase, {
-    ref: listItemRef,
-    tokens: listItemTokens,
-    ...listItemProps,
-    children: _ref3 => {
-      let {
-        isLastItem
-      } = _ref3;
-      const getTokens = pressableState => resolvePressableTokens(tokens, pressableState, {
-        last: isLastItem
-      });
-      const getPressableStyle = pressableState => [staticStyles.itemContainer, selectPressableStyles(getTokens(pressableState))];
-      return /*#__PURE__*/_jsx(Pressable, {
-        onPress: handlePress,
-        href: href,
-        hrefAttrs: hrefAttrs,
-        style: getPressableStyle,
-        ref: ref,
-        children: pressableState => {
-          const themeTokens = getTokens(pressableState);
-          return /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(ListItemMark, {
-              icon: icon,
-              tokens: themeTokens
-            }), /*#__PURE__*/_jsx(ListItemContent, {
-              tokens: themeTokens,
-              children: typeof children === 'function' ? children(pressableState) : children
-            })]
-          });
-        }
-      });
-    }
-  });
-});
-PressableListItemBase.displayName = 'PressableListItemBase';
-const staticStyles = StyleSheet.create({
-  itemContainer: {
-    flexDirection: 'row',
-    flex: 1
-  }
-});
-PressableListItemBase.propTypes = {
-  ...withLinkRouter.propTypes,
-  href: PropTypes.string,
-  onPress: PropTypes.func,
-  // eslint-disable-next-line react/forbid-prop-types
-  tokens: PropTypes.any,
-  icon: PropTypes.elementType,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  listItemRef: ABBPropTypes.ref()
-};
-export default withLinkRouter(PressableListItemBase);

package/lib-module/List/index.js

@@ -1,5 +0,0 @@
-import List from './List';
-import ListItem from './ListItem';
-List.Item = ListItem;
-export { List as ListBase, ListItem };
-export default List;

package/lib-module/Listbox/GroupControl.js

@@ -1,102 +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 Text from "react-native-web/dist/exports/Text";
-import { useThemeTokens } from '../ThemeProvider';
-import Icon from '../Icon';
-import Spacer from '../Spacer';
-import { useListboxContext } from './ListboxContext';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const styles = StyleSheet.create({
-  controlWrapper: {
-    width: '100%',
-    flex: 1,
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    boxSizing: 'border-box'
-  }
-});
-const GroupControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    expanded,
-    pressed,
-    hover,
-    focus,
-    label,
-    id
-  } = _ref;
-  const {
-    selectedId,
-    setSelectedId
-  } = useListboxContext();
-  const tokens = useThemeTokens('Listbox', {}, {}, {
-    expanded,
-    pressed,
-    hover,
-    current: selectedId === id && id !== undefined,
-    focus
-  });
-  const {
-    groupFontName,
-    groupFontWeight,
-    groupFontSize,
-    groupColor,
-    groupBackgroundColor,
-    groupBorderColor,
-    groupBorderWidth,
-    groupBorderRadius,
-    groupPaddingLeft,
-    groupPaddingRight,
-    groupPaddingTop,
-    groupPaddingBottom,
-    itemTextDecoration,
-    itemOutline,
-    groupHeight
-  } = tokens;
-  return /*#__PURE__*/_jsxs(View, {
-    onPress: () => setSelectedId(id),
-    style: [styles.controlWrapper, {
-      fontFamily: `${groupFontName}${groupFontWeight}normal`,
-      fontSize: groupFontSize,
-      color: groupColor,
-      textDecoration: itemTextDecoration,
-      backgroundColor: groupBackgroundColor,
-      outline: itemOutline,
-      height: groupHeight,
-      border: `${groupBorderWidth}px solid ${groupBorderColor}`,
-      borderRadius: groupBorderRadius,
-      paddingLeft: groupPaddingLeft - groupBorderWidth,
-      paddingRight: groupPaddingRight - groupBorderWidth,
-      paddingTop: groupPaddingTop - groupBorderWidth,
-      paddingBottom: groupPaddingBottom - groupBorderWidth
-    }],
-    ref: ref,
-    children: [/*#__PURE__*/_jsx(Text, {
-      children: label
-    }), /*#__PURE__*/_jsx(Spacer, {
-      space: 1,
-      direction: "row"
-    }), /*#__PURE__*/_jsx(Icon, {
-      icon: tokens.groupIcon,
-      tokens: {
-        color: tokens.groupColor
-      },
-      variant: {
-        size: 'micro'
-      }
-    })]
-  });
-});
-GroupControl.displayName = 'GroupControl';
-GroupControl.propTypes = {
-  id: PropTypes.string,
-  expanded: PropTypes.bool,
-  pressed: PropTypes.bool,
-  hover: PropTypes.bool,
-  focus: PropTypes.bool,
-  label: PropTypes.string
-};
-export default GroupControl;