@telus-uds/components-base 1.18.1 → 1.19.0

package/lib/Search/Search.js

@@ -9,8 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ThemeProvider = require("../ThemeProvider");
@@ -21,8 +19,6 @@ var _TextInputBase = _interopRequireDefault(require("../TextInput/TextInputBase"
 
 var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
 
-var _StackView = _interopRequireDefault(require("../StackView"));
-
 var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
 
 var _dictionary = _interopRequireDefault(require("./dictionary"));
@@ -63,20 +59,11 @@ const selectInputTokens = _ref => {
 
 const selectButtonTokens = tokens => (0, _utils.selectTokens)('Button', tokens);
 
-const selectIconsContainerStyle = _ref2 => {
-  let {
-    paddingRight
-  } = _ref2;
-  return {
-    paddingRight
-  };
-};
-
-const selectIconTokens = _ref3 => {
+const selectIconTokens = _ref2 => {
   let {
     iconSize,
     iconColor
-  } = _ref3;
+  } = _ref2;
   return {
     color: iconColor,
     size: iconSize
@@ -97,7 +84,7 @@ const selectIconTokens = _ref3 => {
  */
 
 
-const Search = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
+const Search = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
     initialValue,
     value,
@@ -112,7 +99,7 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     tokens,
     variant,
     ...rest
-  } = _ref4;
+  } = _ref3;
   const {
     currentValue = '',
     setValue
@@ -164,10 +151,8 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     testID,
     ...containerProps
   } = selectContainerProps(rest);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-    style: staticStyles.container,
-    ...containerProps,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...containerProps,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
       nativeID: nativeID,
       testID: testID,
       ...selectInputProps(rest),
@@ -187,35 +172,29 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
       onChange: setValue,
       onSubmitEditing: handleSubmit,
       onFocus: handleFocus,
-      accessibilityLabel: a11yLabelText
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: [staticStyles.iconsContainer, selectIconsContainerStyle(themeTokens)],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
-        direction: "row",
-        space: buttonsGap,
-        children: [ClearButtonIcon && !isEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
-          onPress: handleClear,
-          inactive: inactive,
-          accessibilityRole: "button",
-          accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
-          tokens: appearances => selectButtonTokens(getButtonTokens(appearances)),
-          children: buttonState => /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearButtonIcon, { ...selectIconTokens(getButtonTokens(buttonState))
-          })
-        }), SubmitButtonIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
-          onPress: handleSubmit,
-          inactive: inactive,
-          accessibilityRole: "button",
-          accessibilityLabel: getCopy('submitButtonAccessibilityLabel'),
-          tokens: buttonState => selectButtonTokens(getButtonTokens({ ...buttonState,
+      accessibilityLabel: a11yLabelText,
+      buttons: [ClearButtonIcon && !isEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+        accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
+        accessibilityRole: "button",
+        inactive: inactive,
+        onPress: handleClear,
+        tokens: appearances => selectButtonTokens(getButtonTokens(appearances)),
+        children: buttonState => /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearButtonIcon, { ...selectIconTokens(getButtonTokens(buttonState))
+        })
+      }, "clear"), SubmitButtonIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+        accessibilityLabel: getCopy('submitButtonAccessibilityLabel'),
+        accessibilityRole: "button",
+        inactive: inactive,
+        onPress: handleSubmit,
+        tokens: buttonState => selectButtonTokens(getButtonTokens({ ...buttonState,
+          priority: 'high'
+        })),
+        children: buttonState => /*#__PURE__*/(0, _jsxRuntime.jsx)(SubmitButtonIcon, { ...selectIconTokens(getButtonTokens({ ...buttonState,
             priority: 'high'
-          })),
-          children: buttonState => /*#__PURE__*/(0, _jsxRuntime.jsx)(SubmitButtonIcon, { ...selectIconTokens(getButtonTokens({ ...buttonState,
-              priority: 'high'
-            }))
-          })
-        })]
-      })
-    })]
+          }))
+        })
+      }, "submit")]
+    })
   });
 });
 Search.displayName = 'Search';
@@ -280,16 +259,4 @@ Search.propTypes = { ...selectedContainerPropTypes,
   variant: _utils.variantProp.propType
 };
 var _default = Search;
-exports.default = _default;
-
-const staticStyles = _StyleSheet.default.create({
-  container: {// No styles needed here except the View defaults (position: relative etc)
-  },
-  iconsContainer: {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    bottom: 0,
-    justifyContent: 'center'
-  }
-});
+exports.default = _default;

package/lib/Tags/Tags.js

@@ -42,7 +42,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
 
-const selectIconTextTokens = _ref => {
+const separateIconTextTokens = (_ref, returnRest) => {
   let {
     icon,
     iconPosition,
@@ -54,9 +54,10 @@ const selectIconTextTokens = _ref => {
     iconAlignSelf,
     iconPadding,
     iconTranslateX,
-    iconTranslateY
+    iconTranslateY,
+    ...rest
   } = _ref;
-  return {
+  return returnRest ? rest : {
     icon,
     iconPosition,
     iconSpace,
@@ -81,6 +82,10 @@ const selectIconTextTokens = _ref => {
   };
 };
 
+const selectIconTextTokens = tokens => separateIconTextTokens(tokens, false);
+
+const selectNonIconTextTokens = tokens => separateIconTextTokens(tokens, true);
+
 const Tags = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   let {
     variant,
@@ -109,7 +114,8 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   } = themeTokens;
   const getItemTokens = (0, _ThemeProvider.useThemeTokensCallback)('TagsItem', tokens, variant);
 
-  const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getItemTokens(buttonState));
+  const getButtonTokens = buttonState => // Remove icon-text-related tokens, since we want to handle them ourselves, not use ButtonBase's handling
+  (0, _utils.selectTokens)('Button', selectNonIconTextTokens(getItemTokens(buttonState)));
 
   const {
     currentValues,

package/lib/TextInput/TextInputBase.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
@@ -15,10 +17,10 @@ var _TextInput = _interopRequireDefault(require("react-native-web/dist/cjs/expor
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _ThemeProvider = require("../ThemeProvider");
 
+var _StackView = _interopRequireDefault(require("../StackView"));
+
 var _utils = require("../utils");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -133,35 +135,47 @@ const selectIconTokens = _ref3 => {
   };
 };
 
-const selectIconContainerStyles = _ref4 => {
+const selectIconContainerStyles = (_ref4, buttonCount) => {
   let {
+    buttonSize,
+    buttonsGapSize,
     paddingRight,
     paddingBottom
   } = _ref4;
   return {
-    paddingRight,
+    paddingRight: paddingRight + buttonCount * (buttonSize + buttonsGapSize),
     paddingBottom
   };
 };
 
-const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
+const selectButtonsContainerStyle = _ref5 => {
   let {
-    value,
+    buttonsPaddingRight
+  } = _ref5;
+  return {
+    paddingRight: buttonsPaddingRight
+  };
+};
+
+const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
+  let {
+    buttons = [],
     height,
-    initialValue,
     inactive,
-    readOnly,
+    initialValue,
+    onBlur,
     onChange,
     onChangeText,
     onFocus,
-    onBlur,
-    onMouseOver,
     onMouseOut,
+    onMouseOver,
     pattern,
+    readOnly,
     tokens,
+    value,
     variant = {},
     ...rest
-  } = _ref5;
+  } = _ref6;
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
 
   const handleFocus = event => {
@@ -220,7 +234,8 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   };
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextInput', tokens, variant, states);
   const {
-    icon: IconComponent
+    icon: IconComponent,
+    buttonsGap
   } = themeTokens;
   const inputProps = { ...selectProps(rest),
     editable: !inactive,
@@ -233,7 +248,9 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     // currentValue is being updated even if the input is not controlled, passing it down to the
     // Input could lead to changing its state from uncontrolled to controlled
     value: isControlled ? currentValue : undefined
-  };
+  }; // Get the actual gap value for the current viewport
+
+  const buttonsGapSize = (0, _utils.useSpacingScale)(buttonsGap);
   const {
     themeOptions
   } = (0, _ThemeProvider.useTheme)();
@@ -249,32 +266,49 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     }), IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       pointerEvents: "none" // avoid hijacking input press events
       ,
-      style: [staticStyles.iconContainer, selectIconContainerStyles(themeTokens)],
+      style: [staticStyles.iconContainer, selectIconContainerStyles({ ...themeTokens,
+        buttonsGapSize
+      }, buttons === null || buttons === void 0 ? void 0 : buttons.length)],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconTokens(themeTokens)
       })
+    }), (buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: [staticStyles.buttonsContainer, selectButtonsContainerStyle(themeTokens)],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+        direction: "row",
+        space: buttonsGap,
+        children: buttons
+      })
     })]
   });
 });
 TextInputBase.displayName = 'TextInputBase';
 TextInputBase.propTypes = { ...selectedSystemPropTypes,
-  value: _propTypes.default.string,
+  buttons: _propTypes.default.arrayOf(_propTypes.default.node),
   height: _propTypes.default.number,
-  initialValue: _propTypes.default.string,
   inactive: _propTypes.default.bool,
-  readOnly: _propTypes.default.bool,
+  initialValue: _propTypes.default.string,
+  onBlur: _propTypes.default.func,
   onChange: _propTypes.default.func,
   onChangeText: _propTypes.default.func,
   onFocus: _propTypes.default.func,
-  onBlur: _propTypes.default.func,
-  onMouseOver: _propTypes.default.func,
   onMouseOut: _propTypes.default.func,
+  onMouseOver: _propTypes.default.func,
+  readOnly: _propTypes.default.bool,
   tokens: (0, _utils.getTokensPropType)('TextInput', 'TextArea'),
+  value: _propTypes.default.string,
   variant: _utils.variantProp.propType
 };
 var _default = TextInputBase;
 exports.default = _default;
 
 const staticStyles = _StyleSheet.default.create({
+  buttonsContainer: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center'
+  },
   iconContainer: {
     position: 'absolute',
     right: 0,

package/lib/index.js

@@ -31,6 +31,7 @@ var _exportNames = {
   QuickLinks: true,
   Radio: true,
   RadioCard: true,
+  Responsive: true,
   Search: true,
   Select: true,
   SideNav: true,
@@ -241,6 +242,12 @@ Object.defineProperty(exports, "RadioCard", {
     return _RadioCard.default;
   }
 });
+Object.defineProperty(exports, "Responsive", {
+  enumerable: true,
+  get: function () {
+    return _Responsive.default;
+  }
+});
 Object.defineProperty(exports, "Search", {
   enumerable: true,
   get: function () {
@@ -546,6 +553,8 @@ Object.keys(_RadioCard).forEach(function (key) {
   });
 });
 
+var _Responsive = _interopRequireDefault(require("./Responsive"));
+
 var _Search = _interopRequireDefault(require("./Search"));
 
 var _Select = _interopRequireDefault(require("./Select"));

package/lib-module/Button/ButtonBase.js

@@ -139,7 +139,9 @@ const selectTextStyles = (_ref6, themeOptions) => {
     lineHeight,
     fontName,
     fontWeight,
-    textAlign
+    textAlign,
+    textLine,
+    textLineStyle
   } = _ref6;
   return applyTextStyles({
     fontSize,
@@ -148,7 +150,9 @@ const selectTextStyles = (_ref6, themeOptions) => {
     fontName,
     fontWeight,
     themeOptions,
-    textAlign
+    textAlign,
+    textDecorationLine: textLine,
+    textDecorationStyle: textLineStyle
   });
 };
 

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
@@ -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),

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

@@ -25,16 +25,7 @@ const CarouselTabsPanel = /*#__PURE__*/forwardRef((_ref, ref) => {
   };
   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, {
+    children: [/*#__PURE__*/_jsx(StackView, {
       direction: "row",
       space: 3,
       divider: {

package/lib-module/Pagination/SideButton.js

@@ -8,13 +8,15 @@ import { useViewport } from '../ViewportProvider';
 import { copyPropTypes, hrefAttrsProp, linkProps, selectTokens, withLinkRouter } from '../utils';
 import dictionary from './dictionary';
 import useCopy from '../utils/useCopy'; // We need to drop the icon here since it gets rendered via children and not
-// `ButtonBase` in order to tap into the state of the button
+// `ButtonBase` in order to tap into the state of the button; `displayLabel` flag
+// is also not needed
 
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const selectButtonTokens = _ref => {
   let {
     icon: _,
+    displayLabel: __,
     ...rest
   } = _ref;
   return selectTokens('Button', rest);
@@ -59,7 +61,8 @@ const SideButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
     copy
   });
   const {
-    icon
+    icon,
+    displayLabel
   } = getTokens(tokens, buttonVariant);
 
   const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
@@ -67,7 +70,6 @@ const SideButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
   const getIconTokens = buttonState => selectIconTokens(getTokens(buttonState), direction);
 
   const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText');
-  const showLabel = viewport !== 'sm' && viewport !== 'xs';
   const accessibilityLabel = direction === 'previous' ? getCopy('previousLabel') : getCopy('nextLabel');
   const accessibilityRole = href !== undefined ? 'link' : 'button';
   const {
@@ -99,7 +101,7 @@ const SideButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
         space: 1,
         iconPosition: directionToSide[direction],
         iconProps: iconProps,
-        children: showLabel && /*#__PURE__*/_jsx(Text, {
+        children: displayLabel && /*#__PURE__*/_jsx(Text, {
           style: textStyles,
           children: label
         })

package/lib-module/Responsive/Responsive.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { viewports } from '@telus-uds/system-constants';
+import { useResponsiveProp } from '../utils';
+/**
+ * Responsive conditionally renders children based on whether the viewport matches the provided
+ * min and max viewports.
+ *
+ * In SSR, like other viewport utilities, it treats the viewport as `xs` both in SSR itself and
+ * during first hydration on the client side; then if the viewport is not `xs`, it re-renders
+ * after hydration. This may cause a layout shift on devices other than the narrowest.
+ */
+
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const Responsive = _ref => {
+  let {
+    min = 'xs',
+    max,
+    children
+  } = _ref;
+  // Start returning children at the 'min' viewport or greater
+  const byViewports = {
+    [min]: children
+  };
+
+  if (max && max !== 'xl') {
+    // Stop returning children at the viewport one above 'max' or greater
+    const maxIndex = viewports.keys.indexOf(max);
+    const maxPlusOne = maxIndex >= 0 ? viewports.keys[maxIndex + 1] : null;
+    if (maxPlusOne) byViewports[maxPlusOne] = null;
+  }
+
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: useResponsiveProp(byViewports, null)
+  });
+};
+
+Responsive.propTypes = {
+  min: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  children: PropTypes.node.isRequired
+};
+export default Responsive;

package/lib-module/Responsive/index.js

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