@telus-uds/components-base 1.97.0 → 1.97.1

package/lib-module/Badge/Badge.js

@@ -1,102 +0,0 @@
-import React from 'react';
-import View from "react-native-web/dist/exports/View";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import PropTypes from 'prop-types';
-import { useThemeTokens } from '../ThemeProvider';
-import Typography from '../Typography';
-import { htmlAttrs, selectSystemProps, getTokensPropType, variantProp, viewProps } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const fontSizeMapping = {
-  12: 'micro',
-  14: 'small',
-  16: 'h6'
-};
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps]);
-const selectContainerBackground = _ref => {
-  let {
-    backgroundColor
-  } = _ref;
-  return {
-    backgroundColor
-  };
-};
-const selectContainerBorder = _ref2 => {
-  let {
-    borderWidth,
-    borderColor,
-    borderRadius
-  } = _ref2;
-  return {
-    borderWidth,
-    borderColor,
-    borderRadius
-  };
-};
-const selectContainerPadding = _ref3 => {
-  let {
-    paddingTop,
-    paddingRight,
-    paddingBottom,
-    paddingLeft
-  } = _ref3;
-  return {
-    paddingTop,
-    paddingRight,
-    paddingBottom,
-    paddingLeft
-  };
-};
-const getTypographyTokens = _ref4 => {
-  let {
-    fontName,
-    fontWeight,
-    color
-  } = _ref4;
-  return {
-    fontName,
-    fontWeight,
-    color
-  };
-};
-const getTypographyVariant = _ref5 => {
-  let {
-    fontSize
-  } = _ref5;
-  return {
-    size: fontSizeMapping[fontSize]
-  };
-};
-const Badge = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
-  let {
-    children,
-    tokens,
-    variant = {},
-    ...rest
-  } = _ref6;
-  const themeTokens = useThemeTokens('Badge', tokens, variant);
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    style: [staticStyles.container, selectContainerBackground(themeTokens), selectContainerBorder(themeTokens), selectContainerPadding(themeTokens)],
-    ...selectProps(rest),
-    children: /*#__PURE__*/_jsx(Typography, {
-      tokens: getTypographyTokens(themeTokens),
-      variant: getTypographyVariant(themeTokens),
-      children: children
-    })
-  });
-});
-Badge.propTypes = {
-  ...selectedSystemPropTypes,
-  children: PropTypes.node,
-  tokens: getTokensPropType('Badge'),
-  variant: variantProp.propType
-};
-Badge.displayName = 'Badge';
-export default Badge;
-const staticStyles = StyleSheet.create({
-  container: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignSelf: 'flex-start'
-  }
-});

package/lib-module/Badge/index.js

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

package/lib-module/BaseProvider/HydrationContext.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Platform from "react-native-web/dist/exports/Platform";
-import { jsx as _jsx } from "react/jsx-runtime";
-const HydrationContext = /*#__PURE__*/React.createContext();
-const isSSR = typeof window === 'undefined';
-const hasWebStyleTag = () => {
-  var _document;
-  if (isSSR || Platform.OS !== 'web' || typeof document !== 'object') {
-    return false;
-  }
-  return Boolean((_document = document) === null || _document === void 0 ? void 0 : _document.getElementById('react-native-stylesheet'));
-};
-
-/**
- * Returns true if this render cycle is the hydration of existing SSR content.
- *
- * Use this when changing how content renders based on data that is instantly available
- * during the very first client-side render or hydration, but not available on the server,
- * to ensure no changes happen until the original SSR DOM has been hydrated.
- */
-export const useHydrationContext = () => React.useContext(HydrationContext);
-
-/**
- * Allows components and hooks to observe if SSR hydration is currently in progress
- * and if so, to re-render with content that differs to the server when it is complete.
- */
-export const HydrationProvider = _ref => {
-  let {
-    children
-  } = _ref;
-  const [hasMounted, setHasMounted] = React.useState(false);
-  React.useEffect(() => {
-    setHasMounted(true);
-  }, []);
-
-  // If we've got a HydrationProvider inside a HydrationProvider somehow, defer to the top one
-  const valueFromAncestor = useHydrationContext();
-  const isHydrating = valueFromAncestor ?? Boolean(!hasMounted && hasWebStyleTag());
-  return /*#__PURE__*/_jsx(HydrationContext.Provider, {
-    value: isHydrating,
-    children: children
-  });
-};
-HydrationProvider.propTypes = {
-  children: PropTypes.node
-};
-export default HydrationProvider;

package/lib-module/BaseProvider/index.js

@@ -1,38 +0,0 @@
-var _ThemeProvider$propTy;
-import React from 'react';
-import PropTypes from 'prop-types';
-import { PortalProvider } from '@gorhom/portal';
-import A11yInfoProvider from '../A11yInfoProvider';
-import ViewportProvider from '../ViewportProvider';
-import ThemeProvider from '../ThemeProvider';
-import { HydrationProvider } from './HydrationContext';
-import { jsx as _jsx } from "react/jsx-runtime";
-const BaseProvider = _ref => {
-  let {
-    defaultTheme,
-    children,
-    themeOptions
-  } = _ref;
-  return /*#__PURE__*/_jsx(HydrationProvider, {
-    children: /*#__PURE__*/_jsx(A11yInfoProvider, {
-      children: /*#__PURE__*/_jsx(ViewportProvider, {
-        children: /*#__PURE__*/_jsx(ThemeProvider, {
-          defaultTheme: defaultTheme,
-          themeOptions: themeOptions,
-          children: /*#__PURE__*/_jsx(PortalProvider, {
-            children: children
-          })
-        })
-      })
-    })
-  });
-};
-BaseProvider.propTypes = {
-  children: PropTypes.node.isRequired,
-  defaultTheme: (_ThemeProvider$propTy = ThemeProvider.propTypes) === null || _ThemeProvider$propTy === void 0 ? void 0 : _ThemeProvider$propTy.defaultTheme,
-  themeOptions: PropTypes.shape({
-    forceAbsoluteFontSizing: PropTypes.bool,
-    forceZIndex: PropTypes.bool
-  })
-};
-export default BaseProvider;

package/lib-module/Box/Box.js

@@ -1,379 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import View from "react-native-web/dist/exports/View";
-import ScrollView from "react-native-web/dist/exports/ScrollView";
-import Platform from "react-native-web/dist/exports/Platform";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import ImageBackground from "react-native-web/dist/exports/ImageBackground";
-import Image from "react-native-web/dist/exports/Image";
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useResponsiveProp, useSpacingScale, variantProp, viewProps } from '../utils';
-import backgroundImageStylesMap from './backgroundImageStylesMap';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-/**
- * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
- * @typedef {import('../utils/props/spacingProps.js').SpacingIndex} SpacingIndex
- * @typedef {import('../utils/props/spacingProps.js').SpacingObject} SpacingObject
- * @typedef {import('../utils/props/spacingProps.js').SpacingOptions} SpacingOptions
- */
-
-const selectBoxStyles = (_ref, customGradient) => {
-  let {
-    backgroundColor,
-    gradient,
-    borderWidth,
-    borderColor,
-    borderTopLeftRadius,
-    borderTopRightRadius,
-    borderBottomLeftRadius,
-    borderBottomRightRadius,
-    ...rest
-  } = _ref;
-  const styles = {
-    backgroundColor,
-    borderWidth,
-    borderColor,
-    borderTopLeftRadius,
-    borderTopRightRadius,
-    borderBottomLeftRadius,
-    borderBottomRightRadius
-  };
-  if (gradient) {
-    const {
-      angle,
-      stops: [stopOne, stopTwo]
-    } = gradient;
-    if (Platform.OS === 'web') {
-      styles.backgroundImage = `linear-gradient(${angle}deg, ${stopOne.color}, 75%, ${stopTwo.color})`;
-    } else if (customGradient && Platform.OS !== 'web') {
-      styles.colors = [stopOne.color, stopTwo.color];
-    }
-  }
-  const paddings = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom'];
-  // Only set on styles if token provided because we spread this object after the spacing scale values
-  paddings.forEach(side => {
-    if (rest[side]) {
-      styles[side] = rest[side];
-    }
-  });
-  return styles;
-};
-const setBackgroundImage = _ref2 => {
-  let {
-    src,
-    alt,
-    backgroundImageResizeMode,
-    backgroundImagePosition,
-    backgroundImageAlign,
-    backgroundImageWidth,
-    backgroundImageHeight,
-    content
-  } = _ref2;
-  if (backgroundImageResizeMode === 'contain') {
-    const containedViewStyle = {
-      ...staticStyles.containedView,
-      width: backgroundImageWidth,
-      height: backgroundImageHeight,
-      ...backgroundImageStylesMap[`${backgroundImagePosition}-${backgroundImageAlign}`]
-    };
-    return /*#__PURE__*/_jsxs(View, {
-      style: staticStyles.containedContainer,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: containedViewStyle,
-        children: /*#__PURE__*/_jsx(Image, {
-          source: {
-            uri: src
-          },
-          alt: alt,
-          style: staticStyles.containedImage,
-          accessibilityIgnoresInvertColors: true
-        })
-      }), content]
-    });
-  }
-  return /*#__PURE__*/_jsx(ImageBackground, {
-    source: {
-      uri: src
-    },
-    alt: alt,
-    style: staticStyles.backgroundImageContainer,
-    resizeMode: backgroundImageResizeMode,
-    children: content
-  });
-};
-
-/**
- * A layout utility component. Use Box to create space (padding) around content.
- *
- * ## Spacing
- *
- * For most simple uses, pass a number to Box's `space` prop referring to an index in the theme's
- * spacing scale. For example, for a box with the theme's smallest non-zero amount of padding on all sides:
- *
- * ```jsx
- * <Box space={1}>
- * ```
- *
- * #### Targetting specific sides
- *
- * Box allows spacing value props to be assigned to any side or all sides using the following props:
- *
- * - `space` sets the default for all sides, which is overridden by other props below
- * - `horizontal` sets defaults for `left` and `right` (overriding `space` there if it is set)
- * - `vertical` sets defaults for `top` and `bottom` (overriding `space` there if it is set)
- * - `left` sets the left side padding, inside the box's bounds
- * - `right` sets the right side padding, inside the box's bounds
- * - `top` sets the top side padding, inside the box's bounds
- * - `bottom` sets the bottom side padding, inside the box's bounds
- *
- * Box only controls spacing within its bounds. If space is needed around a box outside of its bounds,
- * use `Spacer`, `StackView` or wrap the `Box` inside another `Box`.
- *
- * #### Viewport-specific spacing
- *
- * Responsive behaviours may be set by passing any of the above props an object keyed by viewports.
- *
- * For example, if a theme's spacing scale is [0, 4, 8...], this below will have padding of 4px on top,
- * bottom, and right, and its left padding will be 0px on xs, sm and md viewports and 8px on lg and xl viewports:
- *
- * ```jsx
- * <Box space={1} left={{ xs: 0, lg: 2 }} />`
- * ```
- *
- * #### Subtracting from spacing
- *
- * A parent may sometimes need to reduce the spacing size on one or more sides of a `Box` by some variable.
- * For example, the parent may have a border on one side and want to reduce the spacing of a child box
- * by the width of that border on that side. This can be achieved using the `subtract` option of the
- * spacing object, for example:
- *
- * ```jsx
- * <Box space={2} left={{ space: 2, options: { subtract: themeTokens.borderWidthLeft } }} />`
- * ```
- *
- * See `useSpacingScale` hook for other spacing value options and documentation.
- *
- * ## Theming
- *
- * Box is intended for layout, so minimal theming is supported. Use components like `Card` for
- * more sophisticated theming.
- *
- * ## Scroll
- *
- * If passed, the box will be scrollable. If an object is passed, it will be passed to React Native's
- * `ScrollView` component as props.
- *
- * When building native iOS and Android apps, it is important to remember to ensure any screen containing
- * text content is inside a scrollable box, as screens are not scrollable by default and even very
- * short text will require scrolling on small devices at the highest accessibility text scaling settings.
- */
-const Box = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
-  let {
-    space,
-    horizontal = space,
-    vertical = space,
-    top = vertical,
-    bottom = vertical,
-    left = horizontal,
-    right = horizontal,
-    flex,
-    children,
-    variant,
-    tokens,
-    scroll,
-    tag,
-    accessibilityRole,
-    testID,
-    dataSet,
-    customGradient,
-    backgroundImage,
-    ...rest
-  } = _ref3;
-  const props = {
-    accessibilityRole,
-    ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
-    ...selectProps(rest)
-  };
-  const themeTokens = useThemeTokens('Box', tokens, variant);
-  const styles = {
-    flex,
-    paddingLeft: useSpacingScale(left),
-    paddingRight: useSpacingScale(right),
-    paddingTop: useSpacingScale(top),
-    paddingBottom: useSpacingScale(bottom),
-    ...selectBoxStyles(themeTokens, customGradient)
-  };
-  let content = children;
-  if (typeof customGradient === 'function') content = customGradient(styles.colors, styles)(children);
-  const {
-    src = '',
-    alt = '',
-    resizeMode = '',
-    position = '',
-    align = ''
-  } = backgroundImage || {};
-  const backgroundImageResizeMode = useResponsiveProp(resizeMode, 'cover');
-  const backgroundImagePosition = useResponsiveProp(position, 'none');
-  const backgroundImageAlign = useResponsiveProp(align, 'stretch');
-  const [backgroundImageWidth, setBackgroundImageWidth] = React.useState(0);
-  const [backgroundImageHeight, setBackgroundImageHeight] = React.useState(0);
-  if (backgroundImage) content = setBackgroundImage({
-    src,
-    alt,
-    backgroundImageResizeMode,
-    backgroundImagePosition,
-    backgroundImageAlign,
-    backgroundImageWidth,
-    backgroundImageHeight,
-    content
-  });
-  React.useEffect(() => {
-    if (backgroundImage && backgroundImageWidth === 0 && backgroundImageHeight === 0) {
-      Image.getSize(src, (width, height) => {
-        // Only update the state if the size has changed
-        if (width !== backgroundImageWidth || height !== backgroundImageHeight) {
-          setBackgroundImageWidth(width);
-          setBackgroundImageHeight(height);
-        }
-      });
-    }
-  }, [backgroundImage, backgroundImageWidth, backgroundImageHeight, src]);
-  if (scroll) {
-    const scrollProps = typeof scroll === 'object' ? scroll : {};
-    scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle];
-    return /*#__PURE__*/_jsx(ScrollView, {
-      ...scrollProps,
-      ...props,
-      testID: testID,
-      dataSet: dataSet,
-      ref: ref,
-      children: content
-    });
-  }
-  return /*#__PURE__*/_jsx(View, {
-    ...props,
-    style: styles,
-    testID: testID,
-    dataSet: dataSet,
-    ref: ref,
-    children: content
-  });
-});
-Box.displayName = 'Box';
-Box.propTypes = {
-  ...selectedSystemPropTypes,
-  variant: variantProp.propType,
-  tokens: getTokensPropType('Box'),
-  /**
-   * Sets default padding on all sides of the box using the theme's spacing scale.
-   *
-   * @see {@link SpacingValue}
-   */
-  space: spacingProps.types.spacingValue,
-  /**
-   * Sets top and bottom padding using the theme's spacing scale.
-   *
-   * @see {@link SpacingValue}
-   */
-  vertical: spacingProps.types.spacingValue,
-  /**
-   * Sets left and right padding using the theme's spacing scale.
-   *
-   * @see {@link SpacingValue}
-   */
-  horizontal: spacingProps.types.spacingValue,
-  /**
-   * Sets bottom padding using the theme's spacing scale.
-   *
-   * @see {@link SpacingValue}
-   */
-  bottom: spacingProps.types.spacingValue,
-  /**
-   * Sets left padding using the theme's spacing scale.
-   *
-   * @see {@link SpacingValue}
-   */
-  left: spacingProps.types.spacingValue,
-  /**
-   * Sets right padding using the theme's spacing scale.
-   *
-   * @see {@link SpacingValue}
-   */
-  right: spacingProps.types.spacingValue,
-  /**
-   * Sets top padding using the theme's spacing scale.
-   *
-   * @see {@link SpacingValue}
-   */
-  top: spacingProps.types.spacingValue,
-  /**
-   * Sets the `flex` style, which controls `flexGrow`, `flexShrink` and `flexBasis` styles.
-   *
-   * Set as 1 for the box to stretch and grow to fit in the available space, or another number to share
-   * space disproportionately with siblings. See https://reactnative.dev/docs/flexbox#flex for details.
-   *
-   * With the default `0`, the box takes its minimum width from its content.
-   */
-  flex: PropTypes.number,
-  /**
-   * Renders a scrollable ScrollView instead of an unscrollable View.
-   *
-   * May take an object of ScrollView props which are passed to the rendered ScrollView.
-   */
-  scroll: PropTypes.oneOfType([PropTypes.bool, ScrollView.propTypes ? PropTypes.shape(ScrollView.propTypes) : PropTypes.object]),
-  /**
-   * Optional semantic HTML tag, to apply to the container on web. Does not change styling.
-   *
-   * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
-   * is not defined, the accessibilityRole will default to "heading".
-   */
-  tag: PropTypes.oneOf(layoutTags),
-  /**
-   * Use in tests if the box itself needs to be targetted and no other way of selecting the
-   * box is available (e.g. it cannot be targetted using an appropriate `accessibilityRole`).
-   */
-  testID: PropTypes.string,
-  /**
-   * @ignore
-   */
-  dataSet: PropTypes.object,
-  /**
-   * Box accepts any content as children.
-   */
-  children: PropTypes.node.isRequired,
-  /**
-  Use this prop if need to add a custom gradient for mobile
-  */
-  customGradient: PropTypes.func,
-  /**
-   * Use this prop to add a background image to the box.
-   */
-  backgroundImage: PropTypes.shape({
-    src: PropTypes.string.isRequired,
-    alt: PropTypes.string,
-    resizeMode: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
-    position: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['none', 'bottom', 'left', 'right', 'top'])),
-    align: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['start', 'end', 'center', 'stretch']))
-  })
-};
-export default Box;
-const staticStyles = StyleSheet.create({
-  backgroundImageContainer: {
-    flex: 1
-  },
-  containedContainer: {
-    flex: 1,
-    overflow: 'hidden'
-  },
-  containedView: {
-    zIndex: -1,
-    position: 'absolute'
-  },
-  containedImage: {
-    width: '100%',
-    height: '100%'
-  }
-});

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;