@telus-uds/components-base 2.0.0 → 2.0.2

package/lib-module/Tabs/TabsItem.js

@@ -1,228 +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, useTheme, 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 = _ref => {
-  let {
-    highlightColor,
-    highlightBarBorderRadius = 0,
-    highlightBarBorderWidth = 0,
-    highlightBarHeight = 0
-  } = _ref;
-  return {
-    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 = _ref2 => {
-  let {
-    highlightColor,
-    highlightTriangleSize
-  } = _ref2;
-  return {
-    container: {
-      bottom: 0 - highlightTriangleSize * 2
-    },
-    triangle: {
-      height: 0,
-      width: 0,
-      borderWidth: highlightTriangleSize,
-      borderTopColor: highlightColor,
-      borderBottomColor: 'transparent',
-      borderLeftColor: 'transparent',
-      borderRightColor: 'transparent'
-    }
-  };
-};
-
-const selectContainerStyles = _ref3 => {
-  let {
-    backgroundColor,
-    borderColor,
-    borderWidth = 0,
-    borderRadius,
-    paddingHorizontal = 0,
-    paddingVertical = 0
-  } = _ref3;
-  return {
-    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((_ref4, ref) => {
-  let {
-    href,
-    variant,
-    tokens,
-    selected,
-    itemPositions,
-    index,
-    children,
-    accessibilityRole,
-    accessibilityCurrent = Platform.OS === 'web' && accessibilityRole === 'link' && selected ? 'page' : undefined,
-    accessibilityState = accessibilityRole === 'tab' ? {
-      selected
-    } : undefined,
-    ...rawRest
-  } = _ref4;
-  // Convert onClick etc to onPress etc if used in an integration
-  const {
-    onPress,
-    ...rest
-  } = clickProps.toPressProps(rawRest);
-  const {
-    themeOptions
-  } = useTheme();
-  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 ? function () {
-    if (onPress) onPress(...arguments);
-    if (openHref) openHref(...arguments);
-  } : undefined;
-  const selectedProps = selectProps({
-    accessibilityRole,
-    accessibilityCurrent,
-    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),
-        themeOptions,
-        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,257 +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 separateIconTextTokens = (_ref, returnRest) => {
-  let {
-    icon,
-    iconPosition,
-    iconSpace,
-    iconSize,
-    iconColor,
-    iconBackground,
-    iconBorderRadius,
-    iconAlignSelf,
-    iconPadding,
-    iconTranslateX,
-    iconTranslateY,
-    ...rest
-  } = _ref;
-  return returnRest ? rest : {
-    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 selectIconTextTokens = tokens => separateIconTextTokens(tokens, false);
-
-const selectNonIconTextTokens = tokens => separateIconTextTokens(tokens, true);
-
-const Tags = /*#__PURE__*/forwardRef((_ref2, ref) => {
-  let {
-    variant,
-    tokens,
-    items = [],
-    values,
-    initialValues,
-    maxValues,
-    onChange,
-    readOnly = false,
-    inactive = false,
-    accessibilityRole = Platform.select({
-      web: 'group',
-      default: 'none'
-    }),
-    ...rest
-  } = _ref2;
-  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 => // Remove icon-text-related tokens, since we want to handle them ourselves, not use ButtonBase's handling
-  selectTokens('Button', selectNonIconTextTokens(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 ".concat(uniqueFields.join(', ')));
-  }
-
-  return /*#__PURE__*/_jsx(StackWrap, {
-    ref: ref,
-    ...selectedProps,
-    space: space,
-    direction: direction,
-    tokens: stackTokens,
-    children: items.map((_ref3, index) => {
-      let {
-        label,
-        id = label,
-        ref: itemRef,
-        ...itemRest
-      } = _ref3;
-      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 = selectItemProps({
-        accessibilityState: {
-          checked: isSelected
-        },
-        accessibilityRole: itemA11yRole,
-        ...a11yProps.getPositionInSet(items.length, index),
-        ...itemRest
-      });
-      return /*#__PURE__*/_jsx(ButtonBase, {
-        ref: itemRef,
-        ...pressHandlers,
-        onPress: handlePress,
-        tokens: getButtonTokens,
-        selected: isSelected,
-        inactive: inactive,
-        ...itemProps,
-        children: _ref4 => {
-          let {
-            textStyles,
-            ...buttonState
-          } = _ref4;
-          // 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,94 +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((_ref, ref) => {
-  let {
-    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 = _ref2 => {
-    let {
-      nativeEvent: {
-        contentSize: {
-          height
-        }
-      }
-    } = _ref2;
-
-    // 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: _ref3 => {
-      let {
-        inputId,
-        ...props
-      } = _ref3;
-      return /*#__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,73 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-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((_ref, ref) => {
-  let {
-    tokens,
-    nativeID,
-    variant = {},
-    ...rest
-  } = _ref;
-  const {
-    supportsProps,
-    ...selectedProps
-  } = selectProps(rest);
-  const inputProps = { ...selectedProps,
-    tokens,
-    variant: { ...variant,
-      validation: supportsProps.validation
-    }
-  };
-  return /*#__PURE__*/_jsx(InputSupports, {
-    nativeID: nativeID,
-    ...supportsProps,
-    children: _ref2 => {
-      let {
-        inputId,
-        ...propsFromInputSupports
-      } = _ref2;
-      return /*#__PURE__*/_jsx(TextInputBase, {
-        ref: ref,
-        nativeID: inputId,
-        ...propsFromInputSupports,
-        ...inputProps
-      });
-    }
-  });
-});
-TextInput.displayName = 'TextInput';
-TextInput.propTypes = { ...selectedSystemPropTypes,
-  ...textInputPropTypes,
-
-  /**
-   * A callback which if provided will get a clear button rendered and will be called whenever that button gets pressed.
-   */
-  onClear: PropTypes.func,
-  tokens: getTokensPropType('TextInput'),
-  variant: variantProp.propType
-};
-export default TextInput;