@telus-uds/components-base 1.96.0 → 1.97.1

package/lib-module/Autocomplete/Loading.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ActivityIndicator from '../ActivityIndicator';
-import Typography from '../Typography';
-import Box from '../Box';
-import StackView from '../StackView';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const Loading = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    label
-  } = _ref;
-  return /*#__PURE__*/_jsx(Box, {
-    space: 3,
-    ref: ref,
-    children: /*#__PURE__*/_jsxs(StackView, {
-      direction: "row",
-      space: 2,
-      tokens: {
-        alignItems: 'center'
-      },
-      children: [/*#__PURE__*/_jsx(ActivityIndicator, {
-        variant: {
-          size: 'large'
-        }
-      }), /*#__PURE__*/_jsx(Typography, {
-        children: label
-      })]
-    })
-  });
-});
-Loading.displayName = 'Loading';
-Loading.propTypes = {
-  label: PropTypes.string
-};
-export default Loading;

package/lib-module/Autocomplete/Suggestions.js

@@ -1,66 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import A11yText from '../A11yText';
-import Typography from '../Typography';
-import Box from '../Box';
-import Listbox from '../Listbox';
-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 Suggestions = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    hasResults,
-    items = [],
-    noResults,
-    onClose,
-    onSelect,
-    parentRef
-  } = _ref;
-  const pressableItems = items.map(_ref2 => {
-    let {
-      id,
-      ...rest
-    } = _ref2;
-    return {
-      id,
-      onPress: () => onSelect(id),
-      ...rest
-    };
-  });
-  if (items !== null && items !== void 0 && items.length) return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(A11yText, {
-      accessibilityLiveRegion: "polite",
-      text: hasResults
-    }), /*#__PURE__*/_jsx(Listbox, {
-      items: pressableItems,
-      firstItemRef: ref,
-      parentRef: parentRef,
-      onClose: onClose
-    })]
-  });
-  return /*#__PURE__*/_jsx(Box, {
-    space: 3,
-    children: typeof noResults === 'string' ? /*#__PURE__*/_jsx(_Fragment, {
-      children: /*#__PURE__*/_jsx(Typography, {
-        accessibilityLiveRegion: "polite",
-        variant: {
-          size: 'small'
-        },
-        children: noResults
-      })
-    }) : noResults
-  });
-});
-Suggestions.displayName = 'Suggestions';
-Suggestions.propTypes = {
-  hasResults: PropTypes.string.isRequired,
-  items: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    label: PropTypes.node
-  })).isRequired,
-  noResults: PropTypes.node.isRequired,
-  onClose: PropTypes.func.isRequired,
-  onSelect: PropTypes.func.isRequired,
-  parentRef: PropTypes.object.isRequired
-};
-export default Suggestions;

package/lib-module/Autocomplete/constants.js

@@ -1,4 +0,0 @@
-export const DEFAULT_MIN_TO_SUGGESTION = 1;
-export const DEFAULT_MAX_SUGGESTIONS = 5;
-export const INPUT_LEFT_PADDING = 16;
-export const MIN_LISTBOX_WIDTH = 288;

package/lib-module/Autocomplete/dictionary.js

@@ -1,12 +0,0 @@
-export default {
-  en: {
-    hasResults: 'Some results are available',
-    loading: 'Searching...',
-    noResults: 'No results found'
-  },
-  fr: {
-    hasResults: 'Quelques suggestions sont disponible',
-    loading: 'Recherche...',
-    noResults: 'Aucun résultat trouvé'
-  }
-};

package/lib-module/Autocomplete/index.js

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

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%'
-  }
-});