@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/Tabs/TabsItem.js

@@ -1,238 +0,0 @@
-import React 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, 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: 0,
-    right: 0,
-    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__*/React.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,
-    id,
-    render,
-    ...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
-  });
-  React.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]);
-  if (render) return render({
-    selected,
-    handlePress
-  });
-  return /*#__PURE__*/_jsx(Pressable, {
-    ref: ref,
-    onPress: handlePress,
-    href: href,
-    style: getPressableStyle,
-    onLayout: handleLayout,
-    nativeID: id,
-    ...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,
-  id: PropTypes.string,
-  render: PropTypes.func
-};
-const staticStyles = StyleSheet.create({
-  center: {
-    alignItems: 'center'
-  },
-  absolute: {
-    position: 'absolute',
-    alignItems: 'center',
-    left: 0,
-    right: 0
-  },
-  container: {
-    flexGrow: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    ...Platform.select({
-      web: {
-        pointerEvents: 'none'
-      }
-    })
-  }
-});
-export default withLinkRouter(TabsItem);

package/lib/TextInput/TextArea.js

@@ -1,98 +0,0 @@
-import React 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__*/React.forwardRef((_ref, ref) => {
-  let {
-    tokens,
-    variant = {},
-    ...rest
-  } = _ref;
-  const themeTokens = useThemeTokens('TextArea', tokens, variant);
-  const [inputHeight, setInputHeight] = React.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,
-    multiline: true,
-    onContentSizeChange: onHeightChange,
-    height: inputHeight,
-    tokens: themeTokens
-  };
-  return /*#__PURE__*/_jsx(InputSupports, {
-    ...supportsProps,
-    inputValue: selectedProps === null || selectedProps === void 0 ? void 0 : selectedProps.value,
-    children: _ref3 => {
-      let {
-        inputId,
-        ...props
-      } = _ref3;
-      return /*#__PURE__*/_jsx(TextInputBase, {
-        ref: ref,
-        nativeID: inputId,
-        ...props,
-        ...inputProps,
-        variant: {
-          ...variant,
-          validation: props.validation
-        }
-      });
-    }
-  });
-});
-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/TextInput/TextInput.js

@@ -1,79 +0,0 @@
-import React 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, Fragment as _Fragment, jsxs as _jsxs } 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__*/React.forwardRef((_ref, ref) => {
-  let {
-    tokens,
-    nativeID,
-    variant = {},
-    ...rest
-  } = _ref;
-  const {
-    supportsProps,
-    ...selectedProps
-  } = selectProps(rest);
-  const inputProps = {
-    ...selectedProps,
-    tokens
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(InputSupports, {
-      nativeID: nativeID,
-      ...supportsProps,
-      inputValue: selectedProps === null || selectedProps === void 0 ? void 0 : selectedProps.value,
-      children: _ref2 => {
-        let {
-          inputId,
-          ...propsFromInputSupports
-        } = _ref2;
-        return /*#__PURE__*/_jsx(TextInputBase, {
-          ref: ref,
-          nativeID: inputId,
-          ...propsFromInputSupports,
-          ...inputProps,
-          variant: {
-            ...variant,
-            validation: propsFromInputSupports.validation
-          }
-        });
-      }
-    }), rest.children]
-  });
-});
-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,
-  onKeyPress: PropTypes.func,
-  tokens: getTokensPropType('TextInput'),
-  variant: variantProp.propType
-};
-export default TextInput;