@telus-uds/components-base 1.96.0 → 1.97.1

package/lib-module/Box/backgroundImageStylesMap.js

@@ -1,94 +0,0 @@
-export default {
-  'top-start': {
-    top: 0
-  },
-  'top-center': {
-    left: 0,
-    right: 0,
-    marginHorizontal: 'auto'
-  },
-  'top-end': {
-    top: 0,
-    right: 0
-  },
-  'right-start': {
-    top: 0,
-    right: 0
-  },
-  'left-start': {
-    top: 0
-  },
-  'left-center': {
-    top: 0,
-    bottom: 0,
-    marginVertical: 'auto'
-  },
-  'none-start': {
-    top: 0,
-    bottom: 0,
-    marginVertical: 'auto'
-  },
-  'none-center': {
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    margin: 'auto'
-  },
-  'right-center': {
-    top: 0,
-    bottom: 0,
-    right: 0,
-    marginVertical: 'auto'
-  },
-  'none-end': {
-    top: 0,
-    bottom: 0,
-    right: 0,
-    marginVertical: 'auto'
-  },
-  'bottom-start': {
-    bottom: 0,
-    left: 0
-  },
-  'left-end': {
-    bottom: 0,
-    left: 0
-  },
-  'bottom-center': {
-    left: 0,
-    right: 0,
-    bottom: 0,
-    marginHorizontal: 'auto'
-  },
-  'bottom-end': {
-    right: 0,
-    bottom: 0
-  },
-  'right-end': {
-    right: 0,
-    bottom: 0
-  },
-  'top-stretch': {
-    left: 0,
-    right: 0,
-    width: '100%'
-  },
-  'left-stretch': {
-    top: 0,
-    bottom: 0,
-    height: '100%'
-  },
-  'right-stretch': {
-    top: 0,
-    bottom: 0,
-    right: 0,
-    height: '100%'
-  },
-  'bottom-stretch': {
-    left: 0,
-    right: 0,
-    bottom: 0,
-    width: '100%'
-  }
-};

package/lib-module/Box/index.js

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

package/lib-module/Button/Button.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import ButtonBase from './ButtonBase';
-import buttonPropTypes, { textAndA11yText } from './propTypes';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps } from '../utils/props';
-import { useViewport } from '../ViewportProvider';
-import { jsx as _jsx } from "react/jsx-runtime";
-const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    accessibilityRole = 'button',
-    tokens,
-    variant,
-    ...props
-  } = _ref;
-  const viewport = useViewport();
-  const buttonVariant = {
-    viewport,
-    ...variant
-  };
-  const getTokens = useThemeTokensCallback('Button', tokens, buttonVariant);
-  return /*#__PURE__*/_jsx(ButtonBase, {
-    ...props,
-    tokens: getTokens,
-    accessibilityRole: accessibilityRole,
-    ref: ref
-  });
-});
-Button.displayName = 'Button';
-Button.propTypes = {
-  ...a11yProps.types,
-  ...buttonPropTypes,
-  children: textAndA11yText
-};
-export default Button;

package/lib-module/Button/ButtonBase.js

@@ -1,347 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Pressable from "react-native-web/dist/exports/Pressable";
-import View from "react-native-web/dist/exports/View";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Platform from "react-native-web/dist/exports/Platform";
-import { applyTextStyles, applyShadowToken, applyOuterBorder, useTheme } from '../ThemeProvider';
-import buttonPropTypes from './propTypes';
-import { a11yProps, clickProps, focusHandlerProps, getCursorStyle, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, viewProps, wrapStringsInText, withLinkRouter } from '../utils';
-import { IconText } from '../Icon';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, linkProps, viewProps]);
-const getOuterBorderOffset = _ref => {
-  let {
-    outerBorderGap = 0,
-    outerBorderWidth = 0
-  } = _ref;
-  return outerBorderGap + outerBorderWidth;
-};
-const selectOuterContainerStyles = _ref2 => {
-  let {
-    opacity,
-    outerBorderColor,
-    outerBorderWidth,
-    outerBorderGap,
-    borderRadius,
-    outerBackgroundColor
-  } = _ref2;
-  return {
-    ...Platform.select({
-      native: {
-        alignSelf: 'flex-start'
-      }
-    }),
-    backgroundColor: outerBackgroundColor,
-    opacity,
-    ...applyOuterBorder({
-      outerBorderGap,
-      outerBorderWidth,
-      outerBorderColor,
-      borderRadius
-    })
-  };
-};
-const selectOuterSizeStyles = _ref3 => {
-  let {
-    outerBorderGap,
-    outerBorderWidth,
-    width,
-    height
-  } = _ref3;
-  // The inner container's bounding box is the bounding box of the button overall
-  // so this many device pixels will sit outside of the overall bounding box
-  const outerBorderOffset = getOuterBorderOffset({
-    outerBorderGap,
-    outerBorderWidth
-  });
-  const sizeStyles = {};
-  // Apply width/height tokens: number === pixels, string === explicit units e.g. %
-  if (typeof width === 'number' && width > 0 || typeof height === 'number' && height > 0) {
-    sizeStyles.width = width ? width + outerBorderOffset * 2 : width;
-    sizeStyles.height = height ? height + outerBorderOffset * 2 : height;
-    return sizeStyles;
-  }
-  if (!width) {
-    return {
-      ...sizeStyles,
-      // Wrap content, stopping a flex parent's default align-items: stretch stretching focus ring beyond content
-      ...Platform.select({
-        // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
-        web: {
-          display: 'inline-flex'
-        }
-      })
-    };
-  }
-
-  // Ensure the negative margin doesn't make element off-centre
-  if (Platform.OS === 'web') {
-    sizeStyles.width = `calc(${width} + ${outerBorderOffset * 2}px)`;
-    sizeStyles.height = `calc(${height} + ${outerBorderOffset * 2}px)`;
-    return sizeStyles;
-  }
-  // Can't use calc() on native but (unlike on web) flexGrow fills the container width here
-  if (width === '100%') {
-    sizeStyles.flexGrow = 1;
-    return sizeStyles;
-  }
-
-  // Slight offset not such a concern if % width < 100%, as the button isn't centered anyway.
-  // If centering support is added (e.g. alignSelf: center), set marginHorizontal 0 when centered.
-  sizeStyles.width = width;
-  sizeStyles.height = height;
-  return sizeStyles;
-};
-const selectInnerContainerStyles = _ref4 => {
-  let {
-    backgroundColor,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    paddingBottom,
-    shadow,
-    borderWidth,
-    borderLeftWidth,
-    borderRightWidth,
-    borderTopWidth,
-    borderBottomWidth,
-    minWidth
-  } = _ref4;
-  // Subtract border width from padding so overall button width/height doesn't
-  // jump around if the border width changes (avoiding NaN and negative padding)
-  const offsetBorder = _ref5 => {
-    let {
-      value,
-      borderSize = borderWidth
-    } = _ref5;
-    return typeof value === 'number' && typeof borderSize === 'number' ? Math.max(0, value - borderSize) : value;
-  };
-  return {
-    paddingLeft: offsetBorder({
-      value: paddingLeft,
-      borderSize: borderLeftWidth
-    }),
-    paddingRight: offsetBorder({
-      value: paddingRight,
-      borderSize: borderRightWidth
-    }),
-    paddingTop: offsetBorder({
-      value: paddingTop,
-      borderSize: borderTopWidth
-    }),
-    paddingBottom: offsetBorder({
-      value: paddingBottom,
-      borderSize: borderBottomWidth
-    }),
-    backgroundColor,
-    minWidth,
-    ...applyShadowToken(shadow)
-  };
-};
-const selectBorderStyles = _ref6 => {
-  let {
-    borderColor,
-    borderWidth,
-    borderRadius,
-    borderLeftWidth,
-    borderRightWidth,
-    borderTopWidth,
-    borderBottomWidth
-  } = _ref6;
-  return {
-    borderColor,
-    borderWidth,
-    borderRadius,
-    borderLeftWidth,
-    borderRightWidth,
-    borderTopWidth,
-    borderBottomWidth
-  };
-};
-const selectTextStyles = (_ref7, themeOptions) => {
-  let {
-    fontSize,
-    color,
-    lineHeight,
-    fontName,
-    fontWeight,
-    textAlign,
-    textLine,
-    textLineStyle
-  } = _ref7;
-  return applyTextStyles({
-    fontSize,
-    color,
-    lineHeight,
-    fontName,
-    fontWeight,
-    themeOptions,
-    textAlign,
-    textDecorationLine: textLine,
-    textDecorationStyle: textLineStyle
-  });
-};
-const selectWebOnlyStyles = (inactive, themeTokens, _ref8) => {
-  let {
-    accessibilityRole
-  } = _ref8;
-  return Platform.select({
-    web: {
-      // if it would overflow the container, wraps instead
-      maxWidth: `calc(100% + ${getOuterBorderOffset(themeTokens) * 2}px)`,
-      width: 'fit-content',
-      outline: 'none',
-      // removes the default browser :focus outline
-      ...getCursorStyle(inactive, accessibilityRole)
-    },
-    default: {}
-  });
-};
-const selectButtonStyles = _ref9 => {
-  let {
-    textAlign
-  } = _ref9;
-  return {
-    flexDirection: 'row',
-    justifyContent: textAlign
-  };
-};
-const selectItemIconTokens = _ref10 => {
-  let {
-    color,
-    iconColor,
-    iconSize
-  } = _ref10;
-  return {
-    size: iconSize,
-    color: iconColor || color
-  };
-};
-const ButtonBase = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
-  let {
-    id,
-    href,
-    hrefAttrs,
-    children,
-    tokens = {},
-    disabled = false,
-    // alias for inactive
-    inactive = disabled,
-    selected = false,
-    icon,
-    iconPosition = icon ? 'left' : undefined,
-    iconProps,
-    ...rawRest
-  } = _ref11;
-  const {
-    onPress,
-    ...rest
-  } = clickProps.toPressProps(rawRest);
-  const extraButtonState = {
-    inactive,
-    selected,
-    iconPosition
-  };
-  const resolveButtonTokens = pressableState => resolvePressableTokens(tokens, pressableState, extraButtonState);
-  const systemProps = selectProps(rest);
-  const getPressableStyle = pressableState => {
-    const themeTokens = resolveButtonTokens(pressableState);
-    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), selectOuterSizeStyles(themeTokens)];
-  };
-  const {
-    themeOptions
-  } = useTheme();
-  return /*#__PURE__*/_jsx(Pressable, {
-    ref: ref,
-    href: href,
-    onPress: linkProps.handleHref({
-      href,
-      onPress
-    }),
-    style: getPressableStyle,
-    disabled: inactive,
-    hrefAttrs: hrefAttrs,
-    ...systemProps,
-    children: pressableState => {
-      const themeTokens = resolveButtonTokens(pressableState);
-      const containerStyles = selectInnerContainerStyles(themeTokens);
-      const borderStyles = selectBorderStyles(themeTokens);
-      const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text, Platform.select({
-        web: {
-          pointerEvents: 'none' // bubbles press event to parent `Pressable`
-        }
-      })];
-
-      const iconTokens = selectItemIconTokens(themeTokens);
-      const {
-        iconSpace
-      } = themeTokens;
-
-      // If the container has a width set, fill it instead of sizing from content.
-      // If in future we support text alignments other than center, add here.
-      const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align;
-      const IconComponent = icon || themeTokens.icon;
-      const rowStyles = selectButtonStyles(themeTokens);
-      return /*#__PURE__*/_jsx(View, {
-        id: id,
-        style: [containerStyles, borderStyles, stretchStyles, staticStyles.row, Platform.select({
-          web: {
-            maxWidth: '100%',
-            // ensure overflowing content wraps
-            // TODO: https://github.com/telus/universal-design-system/issues/487
-            transition: 'background-color 200ms, border-color 200ms',
-            pointerEvents: 'none',
-            // bubbles press event to parent `Pressable`
-            ...rowStyles
-          }
-        })],
-        children: /*#__PURE__*/_jsx(IconText, {
-          icon: IconComponent,
-          iconPosition: iconPosition,
-          space: icon ? iconSpace : 0,
-          iconProps: {
-            ...iconProps,
-            tokens: iconTokens
-          },
-          children: wrapStringsInText(typeof children === 'function' ? children({
-            ...resolvePressableState(pressableState, extraButtonState),
-            textStyles
-          }) : children, {
-            style: textStyles
-          })
-        })
-      });
-    }
-  });
-});
-ButtonBase.displayName = 'ButtonBase';
-ButtonBase.propTypes = {
-  id: PropTypes.string,
-  ...selectedSystemPropTypes,
-  ...buttonPropTypes
-};
-const staticStyles = StyleSheet.create({
-  row: {
-    // Apply all button alignment horizontally; no vertical stacking within a button
-    flexDirection: 'row',
-    justifyContent: 'center'
-  },
-  text: {
-    ...Platform.select({
-      // TODO: https://github.com/telus/universal-design-system/issues/487
-      web: {
-        transition: 'color 200ms'
-      }
-    })
-  },
-  align: {
-    alignItems: 'center'
-  },
-  stretch: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
-export default withLinkRouter(ButtonBase);

package/lib-module/Button/ButtonDropdown.js

@@ -1,173 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Platform from "react-native-web/dist/exports/Platform";
-import Text from "react-native-web/dist/exports/Text";
-import View from "react-native-web/dist/exports/View";
-import buttonPropTypes, { textAndA11yText } from './propTypes';
-import ButtonBase from './ButtonBase';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, focusHandlerProps, resolvePressableState, selectTokens, useInputValue } from '../utils';
-import Icon from '../Icon';
-import { getStackedContent } from '../StackView';
-import { getPressHandlersWithArgs } from '../utils/pressability';
-import { jsx as _jsx } from "react/jsx-runtime";
-const selectIconTokens = _ref => {
-  let {
-    icon,
-    iconPosition,
-    iconSpace,
-    iconSize,
-    iconColor,
-    iconBackground,
-    iconBorderRadius,
-    iconAlignSelf,
-    iconPadding,
-    iconTranslateX,
-    iconTranslateY
-  } = _ref;
-  return {
-    icon,
-    iconPosition,
-    iconSpace,
-    iconWrapperStyle: {
-      backgroundColor: iconBackground,
-      borderRadius: iconBorderRadius,
-      alignSelf: iconAlignSelf,
-      padding: iconPadding,
-      ...Platform.select({
-        // TODO: https://github.com/telus/universal-design-system/issues/487
-        web: {
-          transition: 'color 200ms, background 200ms'
-        }
-      })
-    },
-    iconTokens: {
-      size: iconSize,
-      color: iconColor,
-      translateX: iconTranslateX,
-      translateY: iconTranslateY
-    }
-  };
-};
-const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    value,
-    initialValue,
-    onChange,
-    label,
-    tokens,
-    variant,
-    inactive = false,
-    readOnly = false,
-    children = null,
-    accessibilityRole = 'radio',
-    ...props
-  } = _ref2;
-  const {
-    currentValue: isOpen,
-    setValue: setIsOpen
-  } = useInputValue({
-    value,
-    initialValue,
-    onChange,
-    readOnly
-  }, 'useButtonDropdownValues');
-  const extraState = {
-    open: isOpen,
-    inactive,
-    ...variant
-  };
-  const getTokens = useThemeTokensCallback('ButtonDropdown', tokens, extraState);
-  const getButtonTokens = buttonState => selectTokens('Button', getTokens(buttonState));
-
-  // Pass an object of relevant component state as first argument for any passed-in press handlers
-  const pressHandlers = getPressHandlersWithArgs(props, [{
-    label,
-    open: isOpen
-  }]);
-  const handlePress = event => {
-    if (!inactive) {
-      if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 ? void 0 : pressHandlers.onPress(event);
-      setIsOpen(!isOpen, event);
-    }
-  };
-  return /*#__PURE__*/_jsx(ButtonBase, {
-    ref: ref,
-    ...pressHandlers,
-    onPress: handlePress,
-    tokens: getButtonTokens,
-    inactive: inactive,
-    icon: () => null,
-    accessibilityRole: accessibilityRole,
-    ...props,
-    children: _ref3 => {
-      let {
-        textStyles,
-        ...buttonState
-      } = _ref3;
-      // TODO: once Icon/IconButton designs are stable, see if this sort of styling around
-      // an icon should go in Icon itself, or possibly via an IconText token set. Related issues:
-      // - Icon: https://github.com/telus/universal-design-system/issues/327
-      // - IconButton: https://github.com/telus/universal-design-system/issues/281
-      // - Token sets: https://github.com/telus/universal-design-system/issues/782
-
-      const itemTokens = getTokens(buttonState);
-      const {
-        iconTokens,
-        iconPosition,
-        iconSpace,
-        iconWrapperStyle,
-        icon: IconComponent
-      } = selectIconTokens(itemTokens);
-      const iconContent = IconComponent ? /*#__PURE__*/_jsx(View, {
-        style: iconWrapperStyle,
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: IconComponent,
-          tokens: iconTokens
-        })
-      }) : null;
-      const childrenContent = () => typeof children === 'function' ? children({
-        ...resolvePressableState(buttonState, extraState),
-        textStyles
-      }) : children;
-      const content = children ? childrenContent() : /*#__PURE__*/_jsx(Text, {
-        style: textStyles,
-        children: label
-      });
-      return getStackedContent(iconPosition === 'left' ? [iconContent, content] : [content, iconContent], {
-        space: iconSpace,
-        direction: 'row'
-      });
-    }
-  });
-});
-ButtonDropdown.displayName = 'ButtonDropdown';
-ButtonDropdown.propTypes = {
-  ...a11yProps.types,
-  ...focusHandlerProps.types,
-  ...buttonPropTypes,
-  children: textAndA11yText,
-  tokens: getTokensPropType('ButtonDropdown'),
-  /**
-   * Callback called when a controlled ButtonDropdown gets interacted with.
-   */
-  onChange: PropTypes.func,
-  /**
-   * `value` prop is being used to set the 'open' state of ButtonDropdown. Use it for
-   *  controlled ButtonDropdown. For uncontrolled ButtonDropdown, use `initialValue`.
-   */
-  value: PropTypes.bool,
-  /**
-   * Use `initialValue` to provide the initial value for an uncontrolled version.
-   */
-  initialValue: PropTypes.bool,
-  /**
-   * The label of ButtonDropdown.
-   */
-  label: PropTypes.string,
-  /**
-   * By default, `ButtonDropdown` is treated by accessibility tools as a radio button.
-   */
-  accessibilityRole: PropTypes.string
-};
-export default ButtonDropdown;