@telus-uds/components-base 1.8.0 → 1.8.3

package/lib-module/Tabs/TabsItem.js

@@ -1,215 +0,0 @@
-import React, { forwardRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import Platform from "react-native-web/dist/exports/Platform";
-import Pressable from "react-native-web/dist/exports/Pressable";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Text from "react-native-web/dist/exports/Text";
-import View from "react-native-web/dist/exports/View";
-import { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, clickProps, getTokensPropType, linkProps, resolvePressableTokens, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
-import Spacer from '../Spacer';
-import { horizontalScrollUtils } from '../HorizontalScroll';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const {
-  itemPositionsPropType,
-  getItemPositionLayoutHandler
-} = horizontalScrollUtils;
-
-const selectHighlightBarStyles = ({
-  highlightColor,
-  highlightBarBorderRadius = 0,
-  highlightBarBorderWidth = 0,
-  highlightBarHeight = 0
-}) => ({
-  backgroundColor: highlightColor,
-  borderColor: highlightColor,
-  height: highlightBarHeight + highlightBarBorderWidth * 2,
-  borderRadius: highlightBarBorderRadius,
-  borderWidth: highlightBarBorderWidth,
-  bottom: -1 * (highlightBarHeight + highlightBarBorderWidth),
-  left: -1 * highlightBarBorderWidth,
-  right: -1 * highlightBarBorderWidth,
-  zIndex: 1 + highlightBarBorderWidth
-});
-
-const selectHighlightTriangleStyles = ({
-  highlightColor,
-  highlightTriangleSize
-}) => ({
-  container: {
-    bottom: 0 - highlightTriangleSize * 2
-  },
-  triangle: {
-    height: 0,
-    width: 0,
-    borderWidth: highlightTriangleSize,
-    borderTopColor: highlightColor,
-    borderBottomColor: 'transparent',
-    borderLeftColor: 'transparent',
-    borderRightColor: 'transparent'
-  }
-});
-
-const selectContainerStyles = ({
-  backgroundColor,
-  borderColor,
-  borderWidth = 0,
-  borderRadius,
-  paddingHorizontal = 0,
-  paddingVertical = 0
-}) => ({
-  backgroundColor,
-  borderColor,
-  borderWidth,
-  borderRadius,
-  paddingHorizontal: paddingHorizontal - borderWidth,
-  paddingVertical: paddingVertical - borderWidth
-});
-/**
- * Item within a Tabs component representing one tab of content. May be rendered as a link
- * or as a "menuitem" button depending on whether 'href' is passed.
- *
- * This is rendered automatically by `Tabs` and isn't intended be used directly.
- */
-
-
-const TabsItem = /*#__PURE__*/forwardRef(({
-  href,
-  variant,
-  tokens,
-  selected,
-  itemPositions,
-  index,
-  children,
-  accessibilityRole = href ? 'link' : 'tab',
-  accessibilityState = Platform.OS === 'web' && accessibilityRole === 'link' ? // Web links can't be aria-selected but can be aria-current
-  {
-    current: selected ? 'page' : false
-  } : {
-    selected
-  },
-  ...rawRest
-}, ref) => {
-  // Convert onClick etc to onPress etc if used in an integration
-  const {
-    onPress,
-    ...rest
-  } = clickProps.toPressProps(rawRest);
-  const getTokens = useThemeTokensCallback('TabsItem', tokens, variant);
-
-  const resolveTokens = pressableState => resolvePressableTokens(getTokens, pressableState, {
-    selected
-  });
-
-  const getPressableStyle = pressableState => {
-    const {
-      maxWidth
-    } = resolveTokens(pressableState);
-    return [{
-      maxWidth
-    }, Platform.OS === 'web' && {
-      outline: 'none'
-    }];
-  };
-
-  const handleLayout = getItemPositionLayoutHandler(itemPositions.positions, index); // On press, update the selection, call any press handler, and open any href in platform-appropriate way
-
-  const openHref = href && linkProps.handleHref({
-    href
-  });
-  const handlePress = onPress || openHref ? (...args) => {
-    if (onPress) onPress(...args);
-    if (openHref) openHref(...args);
-  } : undefined;
-  const selectedProps = selectProps({
-    accessibilityRole,
-    accessibilityState,
-    ...rest
-  });
-  useEffect(() => {
-    // If this is selected while off-screen, scroll it into view
-    if (selected) {
-      const position = itemPositions.positions[index];
-      const scrollEnd = itemPositions.scrollOffset + itemPositions.containerWidth;
-
-      if ( // is off the right edge, or
-      scrollEnd && (position === null || position === void 0 ? void 0 : position.end) > scrollEnd || // is off the left edge
-      typeof (position === null || position === void 0 ? void 0 : position.start) === 'number' && position.start < itemPositions.scrollOffset) {
-        itemPositions.scrollTo(position.start);
-      }
-    } // itemPositions is a ref object so this should only re-run when `selected` (or `index`) change
-
-  }, [selected, index, itemPositions]);
-  return /*#__PURE__*/_jsx(Pressable, {
-    ref: ref,
-    onPress: handlePress,
-    href: href,
-    style: getPressableStyle,
-    onLayout: handleLayout,
-    ...selectedProps,
-    children: pressableState => {
-      const {
-        space,
-        textAlign,
-        ...themeTokens
-      } = resolveTokens(pressableState);
-      const hasHighlightBar = Boolean(themeTokens.highlightBarHeight);
-      const highlightBarStyle = hasHighlightBar && selectHighlightBarStyles(themeTokens);
-      const hasHighlightTriangle = Boolean(themeTokens.highlightTriangleSize);
-      const highlightTriangleStyle = hasHighlightTriangle && selectHighlightTriangleStyles(themeTokens);
-      const containerStyles = selectContainerStyles(themeTokens);
-      const textStyles = applyTextStyles({ ...selectTokens('Typography', themeTokens),
-        textAlign
-      });
-      return /*#__PURE__*/_jsxs(View, {
-        style: staticStyles.container,
-        children: [/*#__PURE__*/_jsx(View, {
-          style: containerStyles,
-          children: /*#__PURE__*/_jsx(Text, {
-            style: textStyles,
-            children: children
-          })
-        }), /*#__PURE__*/_jsx(Spacer, {
-          space: space
-        }), hasHighlightBar && /*#__PURE__*/_jsx(View, {
-          style: [staticStyles.absolute, highlightBarStyle]
-        }), hasHighlightTriangle && /*#__PURE__*/_jsx(View, {
-          style: [staticStyles.absolute, highlightTriangleStyle.container],
-          children: /*#__PURE__*/_jsx(View, {
-            style: highlightTriangleStyle.triangle
-          })
-        })]
-      });
-    }
-  });
-});
-TabsItem.displayName = 'TabsItem';
-TabsItem.propTypes = { ...selectedSystemPropTypes,
-  tokens: getTokensPropType('TabsItem'),
-  variant: variantProp.propType,
-  onPress: PropTypes.func,
-  href: PropTypes.string,
-  index: PropTypes.number,
-  selected: PropTypes.bool,
-  itemPositions: itemPositionsPropType,
-  children: PropTypes.string
-};
-const staticStyles = StyleSheet.create({
-  center: {
-    alignItems: 'center'
-  },
-  absolute: {
-    position: 'absolute',
-    alignItems: 'center',
-    left: 0,
-    right: 0
-  },
-  container: {
-    flexGrow: 1,
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
-export default withLinkRouter(TabsItem);

package/lib-module/Tabs/index.js

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

package/lib-module/Tags/Tags.js

@@ -1,245 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import ABBPropTypes from 'airbnb-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 ButtonBase from '../Button/ButtonBase';
-import Icon from '../Icon';
-import { StackWrap, getStackedContent } from '../StackView';
-import { useViewport } from '../ViewportProvider';
-import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, containUniqueFields, focusHandlerProps, getTokensPropType, pressProps, selectSystemProps, selectTokens, useMultipleInputValues, variantProp, viewProps } from '../utils';
-import { getPressHandlersWithArgs } from '../utils/pressability';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
-
-const selectIconTextTokens = ({
-  icon,
-  iconPosition,
-  iconSpace,
-  iconSize,
-  iconColor,
-  iconBackground,
-  iconBorderRadius,
-  iconAlignSelf,
-  iconPadding,
-  iconTranslateX,
-  iconTranslateY
-}) => ({
-  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 Tags = /*#__PURE__*/forwardRef(({
-  variant,
-  tokens,
-  items = [],
-  values,
-  initialValues,
-  maxValues,
-  onChange,
-  readOnly = false,
-  inactive = false,
-  accessibilityRole = Platform.select({
-    web: 'group',
-    default: 'none'
-  }),
-  ...rest
-}, ref) => {
-  const viewport = useViewport();
-  const themeTokens = useThemeTokens('Tags', tokens, variant, {
-    viewport
-  });
-  const stackTokens = selectTokens('StackView', themeTokens);
-  const {
-    direction,
-    space
-  } = themeTokens;
-  const getItemTokens = useThemeTokensCallback('TagsItem', tokens, variant);
-
-  const getButtonTokens = buttonState => selectTokens('Button', getItemTokens(buttonState));
-
-  const {
-    currentValues,
-    toggleOneValue
-  } = useMultipleInputValues({
-    initialValues,
-    values,
-    maxValues,
-    onChange,
-    readOnly
-  });
-  const selectedProps = selectProps({
-    accessibilityRole,
-    ...rest
-  });
-  const itemA11yRole = 'checkbox';
-  const uniqueFields = ['id', 'label'];
-
-  if (!containUniqueFields(items, uniqueFields)) {
-    throw new Error(`Tags items must have unique ${uniqueFields.join(', ')}`);
-  }
-
-  return /*#__PURE__*/_jsx(StackWrap, {
-    ref: ref,
-    ...selectedProps,
-    space: space,
-    direction: direction,
-    tokens: stackTokens,
-    children: items.map(({
-      label,
-      id = label,
-      ref: itemRef,
-      ...itemRest
-    }, index) => {
-      const isSelected = currentValues.includes(id); // Pass an object of relevant component state as first argument for any passed-in press handlers
-
-      const pressHandlers = getPressHandlersWithArgs(rest, [{
-        id,
-        label,
-        currentValues
-      }]);
-
-      const handlePress = event => {
-        if (pressHandlers.onPress) pressHandlers.onPress(event);
-        toggleOneValue(id, event);
-      };
-
-      const itemProps = {
-        accessibilityState: {
-          checked: isSelected
-        },
-        accessibilityRole: itemA11yRole,
-        ...a11yProps.getPositionInSet(items.length, index),
-        ...selectItemProps(itemRest)
-      };
-      return /*#__PURE__*/_jsx(ButtonBase, {
-        ref: itemRef,
-        ...pressHandlers,
-        onPress: handlePress,
-        tokens: getButtonTokens,
-        selected: isSelected,
-        inactive: inactive,
-        ...itemProps,
-        children: ({
-          textStyles,
-          ...buttonState
-        }) => {
-          // 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 = getItemTokens(buttonState);
-          const {
-            iconTokens,
-            iconPosition,
-            iconSpace,
-            iconWrapperStyle,
-            icon: IconComponent
-          } = selectIconTextTokens(itemTokens);
-          const iconContent = IconComponent ? /*#__PURE__*/_jsx(View, {
-            style: iconWrapperStyle,
-            children: /*#__PURE__*/_jsx(Icon, {
-              icon: IconComponent,
-              tokens: iconTokens
-            })
-          }) : null;
-
-          const textContent = /*#__PURE__*/_jsx(Text, {
-            style: textStyles,
-            children: label
-          });
-
-          return getStackedContent(iconPosition === 'left' ? [iconContent, textContent] : [textContent, iconContent], {
-            space: iconSpace,
-            direction: 'row'
-          });
-        }
-      }, id);
-    })
-  });
-});
-Tags.displayName = 'Tags';
-Tags.propTypes = { ...selectedSystemPropTypes,
-  tokens: getTokensPropType('Tags'),
-  variant: variantProp.propType,
-
-  /**
-   * If provided, sets a maximum number of items a user may select at once.
-   */
-  maxValues: PropTypes.number,
-
-  /**
-   * The options a user may select
-   */
-  items: PropTypes.arrayOf(PropTypes.shape({ ...selectedItemPropTypes,
-
-    /**
-     * The text displayed to the user in the button, describing this option,
-     * passed to the button as its child.
-     */
-    label: PropTypes.string.isRequired,
-
-    /**
-     * An optional accessibility label may be passed to ButtonGroup Buttons
-     * which is applied as normal for a React Native accessibilityLabel prop.
-     */
-    accessibilityLabel: PropTypes.string,
-
-    /**
-     * An optional unique string may be provided to identify this option,
-     * which will be used in code and passed to any onChange function.
-     * If not provided, the label is used.
-     */
-    id: PropTypes.string,
-
-    /**
-     * An optional ref for one individual Tag button in the tags
-     */
-    ref: ABBPropTypes.ref()
-  })),
-
-  /**
-   * If provided, this function is called when the current selection is changed
-   * and is passed an array of the `id`s of all currently selected `items`.
-   */
-  onChange: PropTypes.func,
-
-  /**
-   * If the selected item(s) in the button group are to be controlled externally by
-   * a parent component, pass an array of strings as well as an `onChange` handler.
-   * Passing an array for "values" makes the ButtonGroup a "controlled" component that
-   * expects its state to be handled via `onChange` and so doesn't handle it itself.
-   */
-  values: PropTypes.arrayOf(PropTypes.string),
-
-  /**
-   * If `values` is not passed, making the ButtonGroup an "uncontrolled" component
-   * managing its own selected state, a default set of selections may be provided.
-   * Changing the `initialValues` does not change the user's selections.
-   */
-  initialValues: PropTypes.arrayOf(PropTypes.string)
-};
-export default Tags;

package/lib-module/Tags/index.js

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

package/lib-module/TextInput/TextArea.js

@@ -1,88 +0,0 @@
-import React, { forwardRef, useState } from 'react';
-import Platform from "react-native-web/dist/exports/Platform";
-import { a11yProps, focusHandlerProps, getTokensPropType, inputSupportsProps, selectSystemProps, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
-import InputSupports from '../InputSupports';
-import TextInputBase from './TextInputBase';
-import { useThemeTokens } from '../ThemeProvider';
-import textInputPropTypes from './propTypes';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, inputSupportsProps, textInputHandlerProps, textInputProps, viewProps]);
-/**
- * Use to collect long-form information such as product feedback or support queries.
- * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
- * The `TextArea` height will automatically increase when new lines are added - this behavior can be limited within the theme.
- *
- * ## Controlled component
- * If it is required that the state of the `TextArea` be controlled by the application or other external methods,
- * `value` and `onChange` props must be passed to the `TextArea`.
- * If the `TextArea` value should not be changed by user input, a `readOnly` prop must be provided.
- *
- * ## Uncontrolled component
- * If it is not necessary to control the `TextArea` state, you can create one without a value prop.
- * In this case its value can be accessed within the `onChange` callback.
- *
- * ## Getting feedback for entered values
- * Use the `feedback` prop to give the user feedback regarding their input.
- * You can affirm that the user's input was correct, or highlight errors that must be corrected, using the `validation` prop.
- * Keep feedback text as brief as possible, should be limited to text and links.
- *
- * ## Supplying a hint
- * Use the `hint` prop to succinctly clarify attributes of the expected input data, such as the expected format,
- * or an indicator that the field is optional.
- * It is a more usable and accessible option than the HTML `placeholder` attribute.
- */
-
-const TextArea = /*#__PURE__*/forwardRef(({
-  tokens,
-  variant = {},
-  ...rest
-}, ref) => {
-  const themeTokens = useThemeTokens('TextArea', tokens, variant);
-  const [inputHeight, setInputHeight] = useState(); // adjust the text area's height as new lines are added to the content
-
-  const onHeightChange = ({
-    nativeEvent: {
-      contentSize: {
-        height
-      }
-    }
-  }) => {
-    // on native this is happens out of the box
-    if (Platform.OS === 'web') {
-      setInputHeight(height);
-    }
-  };
-
-  const {
-    supportsProps,
-    ...selectedProps
-  } = selectProps(rest);
-  const inputProps = { ...selectedProps,
-    variant: { ...variant,
-      validation: supportsProps.validation
-    },
-    multiline: true,
-    onContentSizeChange: onHeightChange,
-    height: inputHeight,
-    tokens: themeTokens
-  };
-  return /*#__PURE__*/_jsx(InputSupports, { ...supportsProps,
-    children: ({
-      inputId,
-      ...props
-    }) => /*#__PURE__*/_jsx(TextInputBase, {
-      ref: ref,
-      ...inputProps,
-      nativeID: inputId,
-      ...props
-    })
-  });
-});
-TextArea.displayName = 'TextArea';
-TextArea.propTypes = { ...selectedSystemPropTypes,
-  ...textInputPropTypes,
-  tokens: getTokensPropType('TextArea', 'TextInput'),
-  // TODO: support both TextArea and TextInput tokens
-  variant: variantProp.propType
-};
-export default TextArea;

package/lib-module/TextInput/TextInput.js

@@ -1,68 +0,0 @@
-import React, { forwardRef } from 'react';
-import Platform from "react-native-web/dist/exports/Platform";
-import { a11yProps, focusHandlerProps, getTokensPropType, inputSupportsProps, selectSystemProps, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
-import InputSupports from '../InputSupports';
-import TextInputBase from './TextInputBase';
-import textInputPropTypes from './propTypes';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, inputSupportsProps, textInputHandlerProps, textInputProps, viewProps]);
-/**
- * A basic text input component. Use in forms or individually to receive user's input.
- * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
- *
- * ## Controlled component
- * If it is required that the state of the `TextInput` be controlled by the application or other external methods,
- * `value` and `onChange` props must be passed to the `TextInput`.
- * If the `TextInput` value should not be changed by user input, a `readOnly` prop must be provided.
- *
- * ## Uncontrolled component
- * If it is not necessary to control the `TextInput` state, you can create one without a value prop.
- * In this case its value can be accessed within the `onChange` callback.
- *
- * NOTE: In order to support more advanced usages all additional props will be passed down to the React Native's
- * `TextInput` component. See <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native documentation</a> for
- * supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
- * their implementation on the web.
- */
-
-const TextInput = /*#__PURE__*/forwardRef(({
-  tokens,
-  variant = {},
-  pattern,
-  ...rest
-}, ref) => {
-  React.useEffect(() => {
-    if (Platform.OS === 'web' && pattern && ref.current) {
-      // eslint-disable-next-line no-param-reassign
-      ref.current.pattern = pattern;
-    }
-  }, [ref, pattern]);
-  const {
-    supportsProps,
-    ...selectedProps
-  } = selectProps(rest);
-  const inputProps = { ...selectedProps,
-    tokens,
-    variant: { ...variant,
-      validation: supportsProps.validation
-    }
-  };
-  return /*#__PURE__*/_jsx(InputSupports, { ...supportsProps,
-    children: ({
-      inputId,
-      ...props
-    }) => /*#__PURE__*/_jsx(TextInputBase, {
-      ref: ref,
-      ...inputProps,
-      nativeID: inputId,
-      ...props
-    })
-  });
-});
-TextInput.displayName = 'TextInput';
-TextInput.propTypes = { ...selectedSystemPropTypes,
-  ...textInputPropTypes,
-  tokens: getTokensPropType('TextInput'),
-  variant: variantProp.propType
-};
-export default TextInput;