@telus-uds/components-base 1.82.0 → 1.84.0

package/lib/ExpandCollapse/ExpandCollapse.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 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");
 var _utils = require("../utils");
@@ -54,16 +55,19 @@ const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   });
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('ExpandCollapse', tokens, variant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: staticStyles.container,
     ref: ref,
-    style: selectBorderStyles(themeTokens),
     ...selectProps(rest),
-    children: typeof children === 'function' ? children({
-      openIds,
-      onToggle,
-      resetValues,
-      setValues,
-      unsetValues
-    }) : children
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: selectBorderStyles(themeTokens),
+      children: typeof children === 'function' ? children({
+        openIds,
+        onToggle,
+        resetValues,
+        setValues,
+        unsetValues
+      }) : children
+    })
   });
 });
 ExpandCollapse.displayName = 'ExpandCollapse';
@@ -96,4 +100,9 @@ ExpandCollapse.propTypes = {
   initialOpen: _propTypes.default.arrayOf(_propTypes.default.string)
 };
 var _default = ExpandCollapse;
-exports.default = _default;
+exports.default = _default;
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    display: 'flex'
+  }
+});

package/lib/ExpandCollapse/Panel.js

@@ -14,6 +14,7 @@ var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
 var _Control = _interopRequireDefault(require("./Control"));
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
+var _dictionary = _interopRequireDefault(require("./dictionary"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -108,10 +109,15 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) =>
     variant,
     controlRef,
     content,
+    copy = 'en',
     ...rest
   } = _ref5;
   const [containerHeight, setContainerHeight] = (0, _react.useState)(null);
   const isExpanded = openIds.includes(panelId);
+  const getCopy = (0, _utils.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
   const selectedProps = selectProps({
     ...rest,
     accessibilityState: {
@@ -142,15 +148,20 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) =>
     tokens: themeTokens
   });
   const focusabilityProps = isExpanded ? {} : _utils.a11yProps.nonFocusableProps;
+  const panelAccessibilityLabel = `${panelId} ${getCopy('panel')}`;
+  const subPanelAccessibilityLabel = `${panelId} ${getCopy('subPanel')}`;
   return content ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: selectContentPanelStyles(themeTokens),
+    accessibilityLabel: panelAccessibilityLabel,
     children: typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
       style: selectTextStyles(themeTokens),
+      accessibilityLabel: subPanelAccessibilityLabel,
       children: children
     }) : children
   }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     ref: ref,
     style: themeTokens,
+    accessibilityLabel: panelAccessibilityLabel,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: selectControlPanelStyles(themeTokens),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Control.default, {
@@ -185,6 +196,7 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) =>
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
           style: selectContainerStyles(themeTokens),
+          accessibilityLabel: subPanelAccessibilityLabel,
           children: children
         })
       })

package/lib/ExpandCollapse/dictionary.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  en: {
+    panel: 'Panel',
+    subPanel: 'SubPanel'
+  },
+  fr: {
+    panel: 'Panneau',
+    subPanel: 'Sous-Panneau'
+  }
+};
+exports.default = _default;

package/lib/Icon/IconText.js

@@ -48,10 +48,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
    * The issue was mainly on IOS, the translateY style didn't match with the old calculations.
    */
   const resultY = valueTranslateY ? Math.floor(-1 * (valueTranslateY - 4)) : 0;
-  const iconAdjustedAndriod = /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  const iconAdjustedAndroid = /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: {
       transform: [{
-        translateY: size * 0.2
+        translateY: valueTranslateY ? size * 0.2 : size * 0.01
       }]
     },
     children: iconContent
@@ -64,7 +64,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     },
     children: iconContent
   });
-  const mobile = _Platform.default.OS === 'android' ? iconAdjustedAndriod : iconAdjustedIOS;
+  const mobile = _Platform.default.OS === 'android' ? iconAdjustedAndroid : iconAdjustedIOS;
   const adjustedContainer = _Platform.default.OS === 'web' ? iconContent : mobile;
   return (0, _StackView.getStackedContent)(iconPosition === 'left' ? [adjustedContainer, children] : [children, adjustedContainer], {
     space,

package/lib/Listbox/Listbox.js

@@ -27,7 +27,7 @@ const styles = _StyleSheet.default.create({
   }
 });
 const getInitialOpen = (items, selectedId) => items.filter(item => item.items && item.items.some(nestedItem => (nestedItem.id ?? nestedItem.label) === selectedId)).map(item => item.id ?? item.label);
-const Listbox = _ref => {
+const Listbox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     items = [],
     firstItemRef = null,
@@ -106,6 +106,7 @@ const Listbox = _ref => {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
       initialOpen: initialOpen,
       maxOpen: 1,
+      ref: ref,
       children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: [styles.list, {
           minHeight,
@@ -121,9 +122,9 @@ const Listbox = _ref => {
           const itemId = id ?? label;
 
           // Give the list of refs.
-          const itemRef = ref => {
-            itemRefs.current[index] = ref;
-            return ref;
+          const itemRef = currentItemRef => {
+            itemRefs.current[index] = currentItemRef;
+            return currentItemRef;
           };
           return nestedItems ? /*#__PURE__*/(0, _react.createElement)(_ListboxGroup.default, {
             ...item,
@@ -148,7 +149,8 @@ const Listbox = _ref => {
       })
     })
   });
-};
+});
+Listbox.displayName = 'Listbox';
 Listbox.propTypes = {
   ..._utils.withLinkRouter.propTypes,
   tokens: (0, _utils.getTokensPropType)('Listbox'),

package/lib/Modal/WebModal.js

@@ -31,6 +31,7 @@ const WebModal = _ref => {
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: staticStyles.content,
+      accessibilityRole: "dialog",
       children: children
     })
   });
@@ -59,14 +60,15 @@ const staticStyles = _StyleSheet.default.create({
     minHeight: 0,
     minWidth: 0,
     padding: 0,
-    textDecoration: 'none',
-    zIndex: 1
+    textDecorationLine: 'none',
+    zIndex: 1000
   },
   content: {
     flex: 1,
     flexGrow: 1,
     flexShrink: 1,
-    flexBasis: 0
+    flexBasis: 0,
+    zIndex: 1000
   }
 });
 var _default = WebModal;

package/lib/Notification/Notification.js

@@ -72,7 +72,7 @@ const selectDismissButtonContainerStyles = _ref4 => {
   };
 };
 const selectContentContainerStyle = maxWidth => ({
-  width: maxWidth || '100%'
+  maxWidth: maxWidth || '100%'
 });
 const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, dismissible) => {
   const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {

package/lib/Radio/Radio.js

@@ -248,7 +248,7 @@ Radio.propTypes = {
   /**
    * The label.
    */
-  label: _propTypes.default.string,
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   /**
    * Associate this radio button with a group (set as the name attribute).
    */

package/lib-module/Button/ButtonGroup.js

@@ -15,6 +15,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, f
 const ButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     variant,
+    buttonVariant,
     tokens,
     items = [],
     values,
@@ -127,6 +128,7 @@ const ButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
         // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
         return /*#__PURE__*/_jsx(ButtonBase, {
           ref: itemRef,
+          variant: buttonVariant,
           ...pressHandlers,
           onPress: handlePress,
           tokens: getButtonTokens,
@@ -148,6 +150,13 @@ ButtonGroup.displayName = 'ButtonGroup';
 ButtonGroup.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('ButtonGroup'),
+  /**
+   * To allow Button specific variant
+   */
+  buttonVariant: variantProp.propType,
+  /**
+   * Default variant prop
+   */
   variant: variantProp.propType,
   /**
    * The maximum number of items a user may select at once. Defaults to 1 and behaves