@telus-uds/components-base 1.18.1 → 1.20.0

package/lib-module/Button/ButtonDropdown.js

@@ -0,0 +1,181 @@
+import React, { forwardRef } from 'react';
+import PropTypes from '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 buttonPropTypes, { textAndA11yText } from './propTypes';
+import ButtonBase from './ButtonBase';
+import { useThemeTokensCallback } from '../ThemeProvider';
+import { a11yProps, focusHandlerProps, resolvePressableState, selectTokens, useInputValue } from '../utils';
+import Icon from '../Icon';
+import { getStackedContent } from '../StackView';
+import { getPressHandlersWithArgs } from '../utils/pressability';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const selectIconTokens = _ref => {
+  let {
+    icon,
+    iconPosition,
+    iconSpace,
+    iconSize,
+    iconColor,
+    iconBackground,
+    iconBorderRadius,
+    iconAlignSelf,
+    iconPadding,
+    iconTranslateX,
+    iconTranslateY
+  } = _ref;
+  return {
+    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 ButtonDropdown = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    value,
+    initialValue,
+    onChange,
+    label,
+    tokens,
+    variant,
+    inactive = false,
+    readOnly = false,
+    children = null,
+    accessibilityRole = 'radio',
+    ...props
+  } = _ref2;
+  const {
+    currentValue: isOpen,
+    setValue: setIsOpen
+  } = useInputValue({
+    value,
+    initialValue,
+    onChange,
+    readOnly
+  }, 'useButtonDropdownValues');
+  const extraState = {
+    open: isOpen,
+    inactive,
+    ...variant
+  };
+  const getTokens = useThemeTokensCallback('ButtonDropdown', tokens, extraState);
+
+  const getButtonTokens = buttonState => selectTokens('Button', getTokens(buttonState)); // Pass an object of relevant component state as first argument for any passed-in press handlers
+
+
+  const pressHandlers = getPressHandlersWithArgs(props, [{
+    label,
+    open: isOpen
+  }]);
+
+  const handlePress = event => {
+    if (!inactive) {
+      if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 ? void 0 : pressHandlers.onPress(event);
+      setIsOpen(!isOpen, event);
+    }
+  };
+
+  return /*#__PURE__*/_jsx(ButtonBase, {
+    ref: ref,
+    ...pressHandlers,
+    onPress: handlePress,
+    tokens: getButtonTokens,
+    inactive: inactive,
+    icon: () => null,
+    accessibilityRole: accessibilityRole,
+    ...props,
+    children: _ref3 => {
+      let {
+        textStyles,
+        ...buttonState
+      } = _ref3;
+      // 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 = getTokens(buttonState);
+      const {
+        iconTokens,
+        iconPosition,
+        iconSpace,
+        iconWrapperStyle,
+        icon: IconComponent
+      } = selectIconTokens(itemTokens);
+      const iconContent = IconComponent ? /*#__PURE__*/_jsx(View, {
+        style: iconWrapperStyle,
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: IconComponent,
+          tokens: iconTokens
+        })
+      }) : null;
+
+      const childrenContent = () => typeof children === 'function' ? children({ ...resolvePressableState(buttonState, extraState),
+        textStyles
+      }) : children;
+
+      const content = children ? childrenContent() : /*#__PURE__*/_jsx(Text, {
+        style: textStyles,
+        children: label
+      });
+      return getStackedContent(iconPosition === 'left' ? [iconContent, content] : [content, iconContent], {
+        space: iconSpace,
+        direction: 'row'
+      });
+    }
+  });
+});
+ButtonDropdown.displayName = 'ButtonDropdown';
+ButtonDropdown.propTypes = { ...a11yProps.types,
+  ...focusHandlerProps.types,
+  ...buttonPropTypes,
+  children: textAndA11yText,
+
+  /**
+   * Callback called when a controlled ButtonDropdown gets interacted with.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * `value` prop is being used to set the 'open' state of ButtonDropdown. Use it for
+   *  controlled ButtonDropdown. For uncontrolled ButtonDropdown, use `initialValue`.
+   */
+  value: PropTypes.bool,
+
+  /**
+   * Use `initialValue` to provide the initial value for an uncontrolled version.
+   */
+  initialValue: PropTypes.bool,
+
+  /**
+   * The label of ButtonDropdown.
+   */
+  label: PropTypes.string,
+
+  /**
+   * By default, `ButtonDropdown` is treated by accessibility tools as a radio button.
+   */
+  accessibilityRole: PropTypes.string
+};
+export default ButtonDropdown;

package/lib-module/Button/index.js

@@ -1,4 +1,5 @@
 import Button from './Button';
 import ButtonLink from './ButtonLink';
 import ButtonGroup from './ButtonGroup';
-export { Button, ButtonGroup, ButtonLink };
+import ButtonDropdown from './ButtonDropdown';
+export { Button, ButtonDropdown, ButtonGroup, ButtonLink };

package/lib-module/Carousel/Carousel.js

@@ -127,6 +127,8 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  */
 
 const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  var _systemProps$accessib;
+
   let {
     tokens,
     variant,
@@ -150,7 +152,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }) : /*#__PURE__*/_jsx(CarouselStepTracker, {}),
     tag = 'ul',
     accessibilityRole,
-    accessibilityLabel = title,
+    accessibilityLabel,
     accessibilityLiveRegion = 'polite',
     copy,
     ...rest
@@ -296,7 +298,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     setActiveIndex(index);
     toValue.x = containerLayout.width * -1 * calcDelta;
     animate(toValue, index);
-    if (onIndexChanged) onIndexChanged(calcDelta);
+    if (onIndexChanged) onIndexChanged(calcDelta, index);
     return calcDelta;
   }, [containerLayout.width, activeIndex, animate, children.length, onIndexChanged]);
   const fixOffsetAndGo = React.useCallback(delta => {
@@ -396,6 +398,33 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const activePanelNavigation = tabs && showPanelTabs ? /*#__PURE__*/_jsx(CarouselTabsPanel, {
     items: tabs
   }) : panelNavigation;
+  const isFirstFocusContainer = Boolean(refocus && !skipLinkHref);
+
+  const containerRef = element => {
+    // Apply both firstFocusRef to the container
+    firstFocusRef.current = element; // Also apply forwarded ref if there is one (which could be a function ref)
+
+    if (ref) {
+      if (typeof ref === 'object') {
+        // eslint-disable-next-line no-param-reassign
+        ref.current = element;
+      } else if (typeof ref === 'function') {
+        ref(element);
+      }
+    }
+  }; // If container isn't used for focus, give it a label of title if none is passed in,
+  // otherwise read the current position on focus
+
+
+  const containerAccessibilityLabel = ((_systemProps$accessib = systemProps.accessibilityLabel) !== null && _systemProps$accessib !== void 0 ? _systemProps$accessib : isFirstFocusContainer) ? "".concat(title ? "".concat(title, " ") : '').concat(getCopyWithPlaceholders('stepTrackerLabel')) : title;
+  const containerProps = {
+    accessibilityLabel: containerAccessibilityLabel,
+    // If used for focus, attach the ref and draw a focus box around the whole carousel
+    ...(isFirstFocusContainer && {
+      ref: containerRef,
+      focusable: true
+    })
+  };
   return /*#__PURE__*/_jsxs(CarouselProvider, {
     activeIndex: activeIndex,
     goTo: goTo,
@@ -411,6 +440,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       onLayout: onContainerLayout,
       ref: ref,
       ...systemProps,
+      ...containerProps,
       children: [showPreviousNextNavigation && /*#__PURE__*/_jsx(View, {
         style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true),
         testID: "previous-button-container",
@@ -425,12 +455,10 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         ref: firstFocusRef,
         href: skipLinkHref,
         children: getCopyWithPlaceholders('skipLink')
-      }), /*#__PURE__*/_jsx(A11yText // Read the current slide position to screen readers on slide.
+      }), !isFirstFocusContainer && /*#__PURE__*/_jsx(A11yText // Read the current slide position to screen readers on slide.
       // If it's set to refocus and doesn't have a SkipLink to focus to, focus this.
       , {
-        ref: !skipLinkHref && refocus ? firstFocusRef : null,
         accessibilityLiveRegion: !skipLinkHref && refocus ? undefined : 'polite',
-        focusable: !skipLinkHref && refocus,
         text: getCopyWithPlaceholders('stepTrackerLabel')
       }), /*#__PURE__*/_jsx(View, {
         style: selectContainerStyles(containerLayout.width),
@@ -531,7 +559,7 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
    * This function is also provided with a parameter indicating changed index (either 1, or -1)
    * Use it as follows:
    * ```js
-   *    const onIndexChangedCallback = React.useCallback((changedIndex) => {
+   *    const onIndexChangedCallback = React.useCallback((changedIndex, currentActiveIndex) => {
    *      console.log(changedIndex)
    *    }, [])  // pass local dependencies as per your component
    *    <Carousel

package/lib-module/Carousel/CarouselItem/CarouselItem.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
-import { layoutTags, getA11yPropsFromHtmlTag, selectSystemProps, a11yProps, viewProps } from '../../utils';
+import { layoutTags, getA11yPropsFromHtmlTag, selectSystemProps, a11yProps, viewProps, variantProp } from '../../utils';
 import { useCarousel } from '../CarouselContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
@@ -45,6 +45,7 @@ const CarouselItem = _ref => {
 };
 
 CarouselItem.propTypes = { ...selectedSystemPropTypes,
+  variant: variantProp.propType,
 
   /**
    * Index of the current slide
@@ -69,7 +70,12 @@ CarouselItem.propTypes = { ...selectedSystemPropTypes,
    * Carousel's innermost container defaults to `'ul'` which can be overridden. If the tag of either
    * `Carousel` or `Carousel.Item` is overriden, the other should be too, to avoid producing invalid HTML.
    */
-  tag: PropTypes.oneOf(layoutTags)
+  tag: PropTypes.oneOf(layoutTags),
+
+  /**
+   * Function to set carousel content background color when slide is being display
+   */
+  setContentBackgroundColor: PropTypes.func
 };
 CarouselItem.displayName = 'Carousel.Item';
 export default CarouselItem;

package/lib-module/Carousel/CarouselTabs/CarouselTabsPanel.js

@@ -1,12 +1,16 @@
-import React, { forwardRef, useRef } from 'react';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
 import StackView from '../../StackView';
 import { useCarousel } from '../CarouselContext';
 import CarouselTabsPanelItem from './CarouselTabsPanelItem';
 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 selectTabPanelStyle = () => ({
+  backgroundColor: 'transparent'
+});
+
 const CarouselTabsPanel = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     items
@@ -16,25 +20,23 @@ const CarouselTabsPanel = /*#__PURE__*/forwardRef((_ref, ref) => {
     goTo
   } = useCarousel();
   const nextFocusRef = useRef();
-  const firstTabRef = useRef(); // TODO: figure out a better cross-brand way to specify subcomponent variants.
+  const firstTabRef = useRef();
+  const [isInverse, setIsInverse] = useState(false); // TODO: figure out a better cross-brand way to specify subcomponent variants.
   // For now, this picks an Allium variant, and does nothing in brands that lack it.
   // See similar comment in Carousel and https://github.com/telus/universal-design-system/issues/1549
 
   const dividerVariant = {
     decorative: true
   };
-  const lastTabSelected = activeIndex === items.length - 1;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(View, {
-      focusable: true,
-      accessible: true,
-      onFocus: event => {
-        // When user forward-tabs into this section, focus the next tab; if they backwards-tab
-        // (shift-tab) back into the carousel content, don't interfere.
-        const previousWebFocus = event.relatedTarget;
-        if (previousWebFocus !== firstTabRef.current) nextFocusRef.current.focus();
-      }
-    }), /*#__PURE__*/_jsx(StackView, {
+  const lastTabSelected = activeIndex === items.length - 1; // Get current select tab style
+
+  useEffect(() => {
+    const [selectedVariantIsInverse] = items.filter((_, index) => index === activeIndex);
+    setIsInverse(selectedVariantIsInverse === null || selectedVariantIsInverse === void 0 ? void 0 : selectedVariantIsInverse.inverse);
+  }, [items, activeIndex]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: selectTabPanelStyle(),
+    children: [/*#__PURE__*/_jsx(StackView, {
       direction: "row",
       space: 3,
       divider: {
@@ -45,6 +47,7 @@ const CarouselTabsPanel = /*#__PURE__*/forwardRef((_ref, ref) => {
         let {
           title,
           onPress,
+          inverse,
           ...panelItemProps
         } = _ref2;
         const selected = index === activeIndex;
@@ -59,6 +62,9 @@ const CarouselTabsPanel = /*#__PURE__*/forwardRef((_ref, ref) => {
           title: title,
           selected: selected,
           onPress: handlePress,
+          variant: {
+            inverse: isInverse
+          },
           ...panelItemProps
         }, title);
       })
@@ -71,6 +77,8 @@ const CarouselTabsPanel = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 CarouselTabsPanel.displayName = 'CarouselTabsPanel';
 CarouselTabsPanel.propTypes = {
-  items: PropTypes.arrayOf(PropTypes.shape(CarouselTabsPanelItem.propTypes || {}))
+  items: PropTypes.arrayOf(PropTypes.shape(CarouselTabsPanelItem.propTypes || {})),
+  // Color defined by `Carousel.item` variant otherwise fallback to transparent
+  contentBackgroundColor: PropTypes.string
 };
 export default CarouselTabsPanel;

package/lib-module/FlexGrid/Col/Col.js

@@ -2,12 +2,11 @@ import React, { forwardRef, useContext } from 'react';
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import View from "react-native-web/dist/exports/View";
 import { viewports } from '@telus-uds/system-constants';
 import GutterContext from '../providers/GutterContext';
 import { useViewport } from '../../ViewportProvider';
 import applyInheritance from '../helpers';
-import { responsiveProps } from '../../utils';
+import { responsiveProps, BaseView } from '../../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const Col = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -156,7 +155,7 @@ const Col = /*#__PURE__*/forwardRef((_ref, ref) => {
     lg: offsetsWithIheritance[3],
     xl: offsetsWithIheritance[4]
   };
-  return /*#__PURE__*/_jsx(View, {
+  return /*#__PURE__*/_jsx(BaseView, {
     ref: ref,
     ...viewProps,
     style: [styles.col, gutterPadding, offsetStyles(offsets), sizeStyles(sizes), { ...hidingStyles

package/lib-module/FlexGrid/FlexGrid.js

@@ -1,14 +1,13 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { viewports } from '@telus-uds/system-constants';
+import { a11yProps, viewProps, getA11yPropsFromHtmlTag, layoutTags, selectSystemProps, BaseView } from '../utils';
 import Row from './Row';
 import Col from './Col';
 import { useViewport } from '../ViewportProvider';
 import GutterContext from './providers/GutterContext';
 import applyInheritance from './helpers';
-import { a11yProps, viewProps, getA11yPropsFromHtmlTag, layoutTags, selectSystemProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 /**
@@ -68,7 +67,7 @@ const FlexGrid = /*#__PURE__*/forwardRef((_ref, ref) => {
   };
   return /*#__PURE__*/_jsx(GutterContext.Provider, {
     value: gutter,
-    children: /*#__PURE__*/_jsx(View, {
+    children: /*#__PURE__*/_jsx(BaseView, {
       ref: ref,
       ...props,
       style: [styles.grid, {

package/lib-module/FlexGrid/Row/Row.js

@@ -1,10 +1,10 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { viewports } from '@telus-uds/system-constants';
 import { useViewport } from '../../ViewportProvider';
 import applyInheritance from '../helpers';
+import { BaseView } from '../../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const horizontalAlignStyles = horizontalAlign => {
@@ -114,7 +114,7 @@ const Row = /*#__PURE__*/forwardRef((_ref, ref) => {
     flexWrap = reverseLevel[4] ? 'wrap-reverse' : 'wrap';
   }
 
-  return /*#__PURE__*/_jsx(View, {
+  return /*#__PURE__*/_jsx(BaseView, {
     ref: ref,
     ...rest,
     style: [styles.row, {

package/lib-module/IconButton/IconButton.js

@@ -77,10 +77,20 @@ const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
   const selectedProps = selectProps({ ...rest,
     accessibilityRole
   });
-  const handlePress = linkProps.handleHref({
-    href,
-    onPress
-  });
+
+  const handlePress = () => {
+    var _ref$current;
+
+    linkProps.handleHref({
+      href,
+      onPress
+    })({
+      nativeEvent: {
+        target: ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.id
+      }
+    });
+  };
+
   const getTokens = useThemeTokensCallback('IconButton', tokens, variant);
 
   const getOuterStyle = pressableState => selectOuterStyle(getTokens(resolvePressableState(pressableState)));