@telus-uds/components-base 3.21.0 → 3.23.0

package/lib/cjs/Icon/IconText.js

@@ -107,7 +107,6 @@ IconText.propTypes = {
    * `<Typography>` component, or a component that renders `<Text>`.
    */
   children: _propTypes.default.node
-  /* eslint-enable react/no-unused-prop-types */
 };
 const staticStyles = _StyleSheet.default.create({
   adjustedContainer: {

package/lib/cjs/Listbox/GroupControl.js

@@ -7,8 +7,8 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _ThemeProvider = require("../ThemeProvider");
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _Spacer = _interopRequireDefault(require("../Spacer"));
@@ -16,7 +16,7 @@ var _ListboxContext = require("./ListboxContext");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const styles = _StyleSheet.default.create({
-  controlWrapper: {
+  container: {
     width: '100%',
     flex: 1,
     alignItems: 'center',
@@ -25,6 +25,34 @@ const styles = _StyleSheet.default.create({
     boxSizing: 'border-box'
   }
 });
+const selectTextStyles = tokens => ({
+  color: tokens.groupColor,
+  fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
+  fontSize: tokens.groupFontSize,
+  fontWeight: tokens.groupFontWeight
+});
+const selectContainerStyles = tokens => ({
+  fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
+  fontSize: tokens.groupFontSize,
+  color: tokens.groupColor,
+  textDecoration: tokens.itemTextDecoration,
+  backgroundColor: tokens.groupBackgroundColor,
+  outline: tokens.itemOutline,
+  minHeight: tokens.groupHeight,
+  borderRadius: tokens.groupBorderRadius,
+  paddingLeft: tokens.groupPaddingLeft - tokens.groupBorderLeftWidth,
+  paddingRight: tokens.groupPaddingRight - tokens.groupBorderRightWidth,
+  paddingTop: tokens.groupPaddingTop - tokens.groupBorderTopWidth,
+  paddingBottom: tokens.groupPaddingBottom - tokens.groupBorderBottomWidth,
+  borderLeftWidth: tokens.groupBorderLeftWidth,
+  borderLeftColor: tokens.groupBorderLeftColor,
+  borderRightWidth: tokens.groupBorderRightWidth,
+  borderRightColor: tokens.groupBorderRightColor,
+  borderTopWidth: tokens.groupBorderTopWidth,
+  borderTopColor: tokens.groupBorderTopColor,
+  borderBottomWidth: tokens.groupBorderBottomWidth,
+  borderBottomColor: tokens.groupBorderBottomColor
+});
 const GroupControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     expanded,
@@ -45,51 +73,17 @@ const GroupControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     current: selectedId === id && id !== undefined,
     focus
   });
-  const {
-    groupFontName,
-    groupFontWeight,
-    groupFontSize,
-    groupColor,
-    groupBackgroundColor,
-    groupBorderColor,
-    groupBorderWidth,
-    groupBorderRadius,
-    groupPaddingLeft,
-    groupPaddingRight,
-    groupPaddingTop,
-    groupPaddingBottom,
-    itemTextDecoration,
-    itemOutline,
-    groupHeight
-  } = tokens;
-  const getTextStyles = () => ({
-    color: groupColor
-  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     onPress: () => setSelectedId(id),
-    style: [styles.controlWrapper, {
-      fontFamily: `${groupFontName}${groupFontWeight}normal`,
-      fontSize: groupFontSize,
-      color: groupColor,
-      textDecoration: itemTextDecoration,
-      backgroundColor: groupBackgroundColor,
-      outline: itemOutline,
-      height: groupHeight,
-      border: `${groupBorderWidth}px solid ${groupBorderColor}`,
-      borderRadius: groupBorderRadius,
-      paddingLeft: groupPaddingLeft - groupBorderWidth,
-      paddingRight: groupPaddingRight - groupBorderWidth,
-      paddingTop: groupPaddingTop - groupBorderWidth,
-      paddingBottom: groupPaddingBottom - groupBorderWidth
-    }],
+    style: [styles.container, selectContainerStyles(tokens)],
     ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-      style: getTextStyles(),
+      style: selectTextStyles(tokens),
       children: label
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
       space: 1,
       direction: "row"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    }), tokens.groupIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
       icon: tokens.groupIcon,
       tokens: {
         color: tokens.groupColor

package/lib/cjs/Listbox/Listbox.js

@@ -7,8 +7,8 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _ExpandCollapse = _interopRequireDefault(require("../ExpandCollapse"));
@@ -21,11 +21,16 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const styles = _StyleSheet.default.create({
-  list: {
+  container: {
     padding: 0,
     margin: 0
   }
 });
+const selectContainerStyles = tokens => ({
+  minHeight: tokens.minHeight,
+  minWidth: tokens.minWidth,
+  backgroundColor: tokens.containerBackgroundColor
+});
 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 = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
@@ -39,14 +44,12 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     itemRouterProps,
     onClose,
     variant,
-    tokens
+    tokens,
+    testID
   } = _ref;
   const initialOpen = getInitialOpen(items, defaultSelectedId);
   const [selectedId, setSelectedId] = _react.default.useState(defaultSelectedId);
-  const {
-    minHeight,
-    minWidth
-  } = (0, _ThemeProvider.useThemeTokens)('Listbox', variant, tokens);
+  const listboxTokens = (0, _ThemeProvider.useThemeTokens)('Listbox', tokens, variant);
 
   // We need to keep track of each item's ref in order to be able to
   // focus on a specific item via keyboard navigation
@@ -105,11 +108,9 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       maxOpen: 1,
       ref: ref,
       children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: [styles.list, {
-          minHeight,
-          minWidth
-        }],
-        role: "listbox",
+        style: [styles.container, selectContainerStyles(listboxTokens)],
+        accessibilityRole: "combobox",
+        testID: testID,
         children: items.map((item, index) => {
           const {
             id,
@@ -171,7 +172,15 @@ Listbox.propTypes = {
   /**
    * onClose event
    */
-  onClose: _propTypes.default.func
+  onClose: _propTypes.default.func,
+  /**
+   * Test ID for testing
+   */
+  testID: _propTypes.default.string,
+  /**
+   * Listbox variant
+   */
+  variant: _utils.variantProp.propType
 };
 Listbox.Overlay = _ListboxOverlay.default;
 var _default = exports.default = Listbox;

package/lib/cjs/Listbox/ListboxGroup.js

@@ -85,7 +85,8 @@ const ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         borderColor: 'transparent',
         borderRadius: 0,
         borderWidth: 0,
-        marginBottom: 0
+        marginBottom: 0,
+        contentPanelBackgroundColor: 'transparent'
       },
       controlRef: ref,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {

package/lib/cjs/Listbox/ListboxOverlay.js

@@ -37,12 +37,14 @@ const DropdownOverlay = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     maxWidth,
     minWidth,
     onLayout,
-    tokens
+    tokens,
+    testID
   } = _ref;
   const systemTokens = (0, _ThemeProvider.useThemeTokens)('Listbox', {}, {});
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     onLayout: onLayout,
+    testID: testID,
     style: [overlaidPosition, {
       maxWidth,
       minWidth
@@ -81,6 +83,7 @@ DropdownOverlay.propTypes = {
   maxWidth: _propTypes.default.number,
   minWidth: _propTypes.default.number,
   onLayout: _propTypes.default.func,
-  tokens: _propTypes.default.object
+  tokens: _propTypes.default.object,
+  testID: _propTypes.default.string
 };
 var _default = exports.default = _Platform.default.OS === 'web' ? withPortal(DropdownOverlay) : DropdownOverlay;

package/lib/cjs/Listbox/PressableItem.js

@@ -48,10 +48,14 @@ const getItemStyles = _ref => {
     color: itemColor,
     outline: itemOutline,
     textDecoration: itemTextDecoration,
-    borderLeft: `${itemBorderLeftWidth}px solid ${itemBorderLeftColor}`,
-    borderRight: `${itemBorderRightWidth}px solid ${itemBorderRightColor}`,
-    borderTop: `${itemBorderTopWidth}px solid ${itemBorderTopColor}`,
-    borderBottom: `${itemBorderBottomWidth}px solid ${itemBorderBottomColor}`,
+    borderLeftWidth: itemBorderLeftWidth,
+    borderLeftColor: itemBorderLeftColor,
+    borderRightWidth: itemBorderRightWidth,
+    borderRightColor: itemBorderRightColor,
+    borderTopWidth: itemBorderTopWidth,
+    borderTopColor: itemBorderTopColor,
+    borderBottomWidth: itemBorderBottomWidth,
+    borderBottomColor: itemBorderBottomColor,
     borderRadius: itemBorderRadius,
     justifyContent: 'center'
   };

package/lib/cjs/TextInput/TextInputBase.js

@@ -286,6 +286,10 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
       // Add a space every 4 digits starting from the 5th position
       filteredText = formattedValue.replace(regex, '$1 ').trim();
     }
+    // Apply maxLength if provided
+    if (rest.maxLength && filteredText && filteredText.length > rest.maxLength) {
+      filteredText = filteredText.substring(0, rest.maxLength);
+    }
     setValue(filteredText, event);
     if (typeof onChangeText === 'function') onChangeText(filteredText, event);
   };
@@ -358,7 +362,7 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     onMouseOut: handleMouseOut,
     onChange: handleChangeText,
     defaultValue: initialValue,
-    maxLength: type === 'card' ? 19 : undefined,
+    maxLength: type === 'card' ? 19 : rest.maxLength,
     value: isControlled ? currentValue : undefined,
     onKeyPress
   };

package/lib/cjs/ThemeProvider/index.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   useTheme: true,
   useSetTheme: true,
-  useResponsiveThemeTokens: true
+  useResponsiveThemeTokens: true,
+  useResponsiveThemeTokensCallback: true
 };
 exports.default = void 0;
 Object.defineProperty(exports, "useResponsiveThemeTokens", {
@@ -15,6 +16,12 @@ Object.defineProperty(exports, "useResponsiveThemeTokens", {
     return _useResponsiveThemeTokens.default;
   }
 });
+Object.defineProperty(exports, "useResponsiveThemeTokensCallback", {
+  enumerable: true,
+  get: function () {
+    return _useResponsiveThemeTokensCallback.default;
+  }
+});
 Object.defineProperty(exports, "useSetTheme", {
   enumerable: true,
   get: function () {
@@ -31,6 +38,7 @@ var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
 var _useTheme = _interopRequireDefault(require("./useTheme"));
 var _useSetTheme = _interopRequireDefault(require("./useSetTheme"));
 var _useResponsiveThemeTokens = _interopRequireDefault(require("./useResponsiveThemeTokens"));
+var _useResponsiveThemeTokensCallback = _interopRequireDefault(require("./useResponsiveThemeTokensCallback"));
 var _useThemeTokens = require("./useThemeTokens");
 Object.keys(_useThemeTokens).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/cjs/ThemeProvider/useResponsiveThemeTokensCallback.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _systemConstants = require("@telus-uds/system-constants");
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+var _utils = require("./utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const getResponsiveThemeTokens = function (_ref, tokensProp) {
+  let {
+    rules = [],
+    tokens: defaultThemeTokens = {}
+  } = _ref;
+  let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  let states = arguments.length > 3 ? arguments[3] : undefined;
+  const appearances = (0, _utils.mergeAppearances)(variants, states);
+  const tokensByViewport = Object.fromEntries(_systemConstants.viewports.keys.map(viewport => [viewport, {
+    ...defaultThemeTokens
+  }]));
+
+  // Go through each rule and collect them for the corresponding viewport if they apply
+  rules.forEach(rule => {
+    if (doesRuleApply(rule, appearances)) {
+      // If the rule does not have a viewport specified, we collect it in all viewports
+      let targetViewports = rule.if.viewport || _systemConstants.viewports.keys;
+      if (!Array.isArray(targetViewports)) {
+        targetViewports = [targetViewports];
+      }
+      targetViewports.forEach(viewport => {
+        tokensByViewport[viewport] = {
+          ...tokensByViewport[viewport],
+          ...rule.tokens
+        };
+      });
+    }
+  });
+  Object.keys(tokensByViewport).forEach(viewport => {
+    tokensByViewport[viewport] = (0, _utils.resolveThemeTokens)(tokensByViewport[viewport], appearances, tokensProp);
+  });
+  return tokensByViewport;
+};
+const doesRuleApply = (rule, appearances) => Object.entries(rule.if).every(condition => doesConditionApply(condition, appearances));
+const doesConditionApply = (_ref2, appearances) => {
+  let [key, value] = _ref2;
+  if (key === 'viewport') {
+    return true;
+  }
+  // use null rather than undefined so we can serialise the value in themes
+  const appearanceValue = appearances[key] ?? null;
+  return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue;
+};
+
+/**
+ * @typedef {import('../utils/props/tokens.js').TokensSet} TokensSet
+ * @typedef {import('../utils/props/tokens.js').TokensProp} TokensProp
+ * @typedef {import('../utils/props/variantProp').AppearanceSet} AppearanceSet
+ */
+
+/**
+ * Returns a memoised tokens getter function that gets responsive tokens for all viewports,
+ * similar to calling useResponsiveThemeTokens but with the callback pattern of useThemeTokensCallback.
+ *
+ * Scenarios where `useResponsiveThemeTokensCallback` should be used:
+ *
+ * - Where responsive tokens are to be obtained from state that is accessible only in scopes like callbacks
+ *   and render functions, where calling useResponsiveThemeTokens directly would be disallowed by React's hook rules.
+ * - When using media query stylesheets and need to resolve tokens based on dynamic state (e.g., pressed, hovered)
+ *   that changes at runtime.
+ * - Passing a responsive tokens getter down via a child component's `tokens` prop, applying rules using the
+ *   child component's current state.
+ *
+ * The function returned may be called with an object of state appearances to get an object
+ * of tokens for each viewport, which can then be passed to createMediaQueryStyles.
+ *
+ * @example
+ * // Resolving responsive tokens inside Pressable's style function, based on Pressable state
+ * const PressMe = ({ tokens, variant, children }) => {
+ *   const getResponsiveTokens = useResponsiveThemeTokensCallback('PressMe', tokens, variant)
+ *   const getPressableStyle = ({ pressed }) => {
+ *     const responsiveTokens = getResponsiveTokens({ pressed })
+ *     const mediaQueryStyles = createMediaQueryStyles(responsiveTokens)
+ *     return mediaQueryStyles
+ *   }
+ *   return <Pressable style={getPressableStyle}>{children}</Pressable>
+ * }
+ *
+ * @example
+ * // Setting the theme in a parent and resolving it in a child based on child's state
+ * const MenuButton = ({ tokens, variant, ...buttonProps }) => {
+ *   // Define what theme, variant etc we want in this component...
+ *   const getResponsiveTokens = useResponsiveThemeTokensCallback('Button', tokens, variant)
+ *   // ...resolve them in another component based on its state (e.g. press, hover...)
+ *   return <ButtonBase tokens={getResponsiveTokens} accessibilityRole="menuitem" {...buttonProps} />
+ * }
+ *
+ * @typedef {Object} ResponsiveObject
+ * @property {TokensSet} xs
+ * @property {TokensSet} sm
+ * @property {TokensSet} md
+ * @property {TokensSet} lg
+ * @property {TokensSet} xl
+ *
+ * @param {string} componentName - the name as defined in the theme schema of the component whose theme is to be used
+ * @param {TokensProp} [tokens] - every themed component should accept a `tokens` prop allowing theme tokens to be overridden
+ * @param {AppearanceSet} [variants] - variants passed in as props that don't change dynamically
+ * @returns {(states: AppearanceSet, tokenOverrides?: TokensProp) => ResponsiveObject}
+ *    - callback function that returns an overridable responsive tokens object for current state. Only pass
+ *      tokenOverrides in rare cases where tokens overrides are also generated outside hook scope.
+ */
+const useResponsiveThemeTokensCallback = function (componentName) {
+  let tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const theme = (0, _useTheme.default)();
+  const componentTheme = (0, _utils.getComponentTheme)(theme, componentName);
+  const getResponsiveThemeTokensCallback = (0, _react.useCallback)((states, tokenOverrides) => {
+    const resolvedTokens = (0, _utils.resolveThemeTokens)(tokens, (0, _utils.mergeAppearances)(variants, states), tokenOverrides);
+    return getResponsiveThemeTokens(componentTheme, resolvedTokens, variants, states);
+  }, [componentTheme, tokens, variants]);
+  return getResponsiveThemeTokensCallback;
+};
+var _default = exports.default = useResponsiveThemeTokensCallback;