@telus-uds/components-base 1.96.0 → 1.97.1

package/lib-module/Tabs/Tabs.js

@@ -1,179 +0,0 @@
-import React from 'react';
-import Platform from "react-native-web/dist/exports/Platform";
-import PropTypes from 'prop-types';
-import ABBPropTypes from 'airbnb-prop-types';
-import { useThemeTokens } from '../ThemeProvider';
-import StackView from '../StackView';
-import { a11yProps, getTokensPropType, focusHandlerProps, pressProps, selectSystemProps, useHash, useInputValue, variantProp, viewProps, withLinkRouter } from '../utils';
-import HorizontalScroll, { horizontalScrollUtils, HorizontalScrollButton } from '../HorizontalScroll';
-import TabsItem from './TabsItem';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
-const {
-  selectHorizontalScrollTokens,
-  useItemPositions
-} = horizontalScrollUtils;
-const getDefaultTabItemAccessibilityRole = parentRole => {
-  switch (parentRole) {
-    case 'tablist':
-      return 'tab';
-    case 'navigation':
-      return 'link';
-    default:
-      return undefined;
-  }
-};
-const getStackViewTokens = variant => {
-  const equalWidth = variant === null || variant === void 0 ? void 0 : variant.equalWidth;
-  return Platform.select({
-    web: {
-      justifyContent: equalWidth ? 'space-evenly' : 'flex-start',
-      width: equalWidth ? '100%' : 'auto'
-    },
-    default: {}
-  });
-};
-
-/**
- * Tabs renders a horizontally-scrolling menu of selectable buttons which may link
- * to a page or control what content is displayed on this page.
- *
- * If you are using Tabs to navigate to a new page (web-only) you should pass
- * `navigation`as the `accessibilityRole` to te Tabs component, this will cause
- * TabItems to default to a role of link and obtain aria-current behaviour.
- */
-const Tabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    tokens,
-    itemTokens,
-    scrollButtonTokens,
-    variant,
-    value,
-    initialValue,
-    onChange,
-    items = [],
-    LinkRouter,
-    linkRouterProps,
-    ...rest
-  } = _ref;
-  const {
-    space,
-    ...themeTokens
-  } = useThemeTokens('Tabs', tokens, variant);
-  const {
-    currentValue,
-    setValue
-  } = useInputValue({
-    value,
-    initialValue,
-    onChange
-  });
-  const [itemPositions, isPositioningReady] = useItemPositions();
-  useHash(React.useCallback((hash, event) => {
-    const hashItem = hash && items.find(_ref2 => {
-      let {
-        href
-      } = _ref2;
-      return hash === href;
-    });
-    const hashId = hashItem && (hashItem.id || hashItem.label);
-    if (hashId) setTimeout(setValue(hashId, event), 500);
-  }, [items, setValue]), isPositioningReady);
-  const restProps = selectProps(rest);
-  const parentAccessibilityRole = restProps.accessibilityRole ?? 'tablist';
-  const defaultTabItemAccessibiltyRole = getDefaultTabItemAccessibilityRole(parentAccessibilityRole);
-  const stackViewTokens = getStackViewTokens(variant);
-  return /*#__PURE__*/_jsx(HorizontalScroll, {
-    ref: ref,
-    ScrollButton: HorizontalScrollButton,
-    itemPositions: itemPositions,
-    tokens: selectHorizontalScrollTokens(themeTokens),
-    scrollButtonTokens: scrollButtonTokens,
-    accessibilityRole: parentAccessibilityRole,
-    ...restProps,
-    children: /*#__PURE__*/_jsx(StackView, {
-      space: space,
-      direction: "row",
-      tokens: stackViewTokens,
-      children: items.map((_ref3, index) => {
-        let {
-          href,
-          label,
-          id,
-          accessibilityRole = defaultTabItemAccessibiltyRole,
-          onPress,
-          ref: itemRef,
-          LinkRouter: ItemLinkRouter = LinkRouter,
-          linkRouterProps: itemLinkRouterProps,
-          render,
-          ...itemRest
-        } = _ref3;
-        const itemId = id ?? label;
-        const isSelected = Boolean(currentValue && currentValue === itemId);
-        const handlePress = event => {
-          if (typeof onPress === 'function') onPress(event);
-          setValue(itemId, event);
-        };
-        const itemProps = selectItemProps(itemRest);
-        return /*#__PURE__*/_jsx(TabsItem, {
-          ref: itemRef,
-          id: itemId,
-          href: href,
-          variant: variant,
-          tokens: itemTokens,
-          onPress: handlePress,
-          selected: isSelected,
-          itemPositions: itemPositions,
-          index: index,
-          accessibilityRole: accessibilityRole,
-          LinkRouter: ItemLinkRouter,
-          linkRouterProps: {
-            ...linkRouterProps,
-            ...itemLinkRouterProps
-          },
-          render: render,
-          ...itemProps,
-          children: label
-        }, itemId);
-      })
-    })
-  });
-});
-Tabs.displayName = 'Tabs';
-Tabs.propTypes = {
-  ...selectedSystemPropTypes,
-  ...withLinkRouter.PropTypes,
-  /**
-   * Array of `TabsItem`s
-   */
-  items: PropTypes.arrayOf(PropTypes.shape({
-    ...selectedItemPropTypes,
-    ...withLinkRouter.PropTypes,
-    href: PropTypes.string,
-    label: PropTypes.string,
-    id: PropTypes.string,
-    ref: ABBPropTypes.ref(),
-    render: PropTypes.func
-  })),
-  /**
-   * `id` property of the current tab in the items array
-   */
-  value: PropTypes.string,
-  initialValue: PropTypes.string,
-  /**
-   * Callback for when the selected tab changes
-   */
-  onChange: PropTypes.func,
-  tokens: getTokensPropType('Tabs'),
-  /**
-   * Custom tokens for `TabsItem`
-   */
-  itemTokens: getTokensPropType('TabsItem'),
-  /**
-   * Custom tokens for `HorizontalScrollButton`
-   */
-  scrollButtonTokens: getTokensPropType('HorizontalScrollButton'),
-  variant: variantProp.propType
-};
-export default Tabs;

package/lib-module/Tabs/TabsItem.js

@@ -1,239 +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 } 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: 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-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 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__*/React.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 ${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),
-  /**
-   * AccesibilityRole for the Tags
-   */
-  accessibilityRole: PropTypes.string
-};
-export default Tags;

package/lib-module/Tags/index.js

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