@telus-uds/components-base 1.8.4 → 1.10.0

package/lib/Carousel/CarouselItem/CarouselItem.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _utils = require("../../utils");
+
+var _CarouselContext = require("../CarouselContext");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+/**
+ * `Carousel.Item` is used to wrap the content of an individual slide and is suppsoed to be the
+ * only top-level component passed to the `Carousel`
+ */
+
+const CarouselItem = _ref => {
+  let {
+    children,
+    elementIndex,
+    ...rest
+  } = _ref;
+  const {
+    width,
+    activeIndex,
+    totalItems
+  } = (0, _CarouselContext.useCarousel)();
+  const selectedProps = selectProps({ ...rest,
+    // `group` role crashes the app on Android so setting it to `none` for Android
+    accessibilityRole: _Platform.default.OS === 'android' ? 'none' : 'group',
+    accessibilityLabel: "Showing ".concat(elementIndex + 1, " of ").concat(totalItems)
+  });
+  const focusabilityProps = activeIndex === elementIndex ? {} : _utils.a11yProps.nonFocusableProps;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: {
+      width
+    },
+    ...selectedProps,
+    ...focusabilityProps,
+    children: children
+  });
+};
+
+CarouselItem.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Index of the current slide
+   * Don't pass this prop when using `Carousel.Item` as it is already being passed by `Carousel` top-level component
+   */
+  elementIndex: _propTypes.default.number,
+
+  /**
+   * Provide custom accessibilityLabelledBy for Carousel slide
+   */
+  accessibilityLabelledBy: _propTypes.default.string,
+
+  /**
+   * Content of the slide
+   */
+  children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired
+};
+CarouselItem.displayName = 'Carousel.Item';
+var _default = CarouselItem;
+exports.default = _default;

package/lib/Carousel/CarouselItem/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _CarouselItem = _interopRequireDefault(require("./CarouselItem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _CarouselItem.default;
+exports.default = _default;

package/lib/Carousel/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Carousel: true
+};
+Object.defineProperty(exports, "Carousel", {
+  enumerable: true,
+  get: function () {
+    return _Carousel.default;
+  }
+});
+
+var _CarouselContext = require("./CarouselContext");
+
+Object.keys(_CarouselContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _CarouselContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CarouselContext[key];
+    }
+  });
+});
+
+var _Carousel = _interopRequireDefault(require("./Carousel"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/Checkbox/Checkbox.js

@@ -265,8 +265,10 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
                   isControlled: isControlled,
                   name: name,
                   value: value
-                }), isChecked && IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...iconTokens,
-                  testID: "Checkbox-Icon"
+                }), isChecked && IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+                  testID: "Checkbox-Icon",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...iconTokens
+                  })
                 })]
               })
             }), Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {

package/lib/ExpandCollapse/Panel.js

@@ -15,6 +15,8 @@ var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Vi
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
+
 var _Control = _interopRequireDefault(require("./Control"));
 
 var _ThemeProvider = require("../ThemeProvider");
@@ -70,6 +72,7 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
     children,
     tokens,
     variant,
+    controlRef,
     ...rest
   } = _ref2;
   const [containerHeight, setContainerHeight] = (0, _react.useState)(null);
@@ -112,6 +115,7 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
       isExpanded: isExpanded,
       tokens: controlTokens,
       onPress: handleControlPress,
+      ref: controlRef,
       children: control
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
       ref: animatedRef,
@@ -167,7 +171,12 @@ ExpandCollapsePanel.propTypes = { ...selectedSystemPropTypes,
   /**
    * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
    */
-  controlTokens: (0, _utils.getTokensPropType)('ExpandCollapseControl')
+  controlTokens: (0, _utils.getTokensPropType)('ExpandCollapseControl'),
+
+  /**
+   * An optional ref to be attached to the control
+   */
+  controlRef: _airbnbPropTypes.default.ref()
 };
 var _default = ExpandCollapsePanel;
 exports.default = _default;

package/lib/Link/InlinePressable.js

@@ -37,11 +37,12 @@ const InlinePressable = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     children,
     style,
+    inline = false,
     ...props
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
-    style: pressState => [staticStyles.inline, typeof style === 'function' ? style(pressState) : style],
+    style: pressState => [staticStyles[inline ? 'inline' : 'inlineFlex'], typeof style === 'function' ? style(pressState) : style],
     ...props,
     children: pressState => typeof children === 'function' ? children(pressState) : children
   });
@@ -51,6 +52,9 @@ InlinePressable.displayName = 'InlinePressable';
 const staticStyles = _StyleSheet.default.create({
   inline: {
     // Stop Pressable defaulting to (block) flex
+    display: 'inline'
+  },
+  inlineFlex: {
     display: 'inline-flex'
   }
 });

package/lib/Link/LinkBase.js

@@ -186,17 +186,20 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
 
   const resolveLinkTokens = pressState => (0, _pressability.resolvePressableTokens)(tokens, pressState, {
     iconPosition
-  }); // On web, this makes focus rings wrap only the link, not the entire block
+  });
 
+  const defaultThemeTokens = resolveLinkTokens({});
+  const hasIcon = Boolean(icon || defaultThemeTokens.icon); // On web, this makes focus rings wrap only the link, not the entire block
 
   const blockLeftStyle = _Platform.default.OS === 'web' && staticStyles.blockLeft;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlinePressable.default, { ...selectedProps,
+    inline: hasIcon // assuming links without icons should be inline (even if they are long)
+    ,
     ref: ref,
     style: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);
       const decorationStyles = selectDecorationStyles(themeTokens);
-      const hasIcon = Boolean(icon || themeTokens.icon);
       return [outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
     },
     children: linkState => {

package/lib/StepTracker/StepTracker.js

@@ -134,7 +134,10 @@ const StepTracker = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     dictionary,
     copy
   });
-  const stepTrackerLabel = getCopy('stepTrackerLabel').replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length).replace('%{stepCount}', steps.length).replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1]);
+  const stepTrackerLabel = showStepTrackerLabel ? getCopy('stepTrackerLabel').replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length).replace('%{stepCount}', steps.length).replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1]) : '';
+
+  const getStepLabel = index => themeTokens.showStepLabel ? getCopy('stepLabel').replace('%{stepNumber}', index + 1) : '';
+
   if (!steps.length) return null;
   const selectedProps = selectProps({
     accessibilityLabel: stepTrackerLabel,
@@ -160,7 +163,7 @@ const StepTracker = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Step.default, {
             status: current,
             label: label,
-            name: getCopy('stepLabel').replace('%{stepNumber}', index + 1),
+            name: getStepLabel(index),
             stepIndex: index,
             stepCount: steps.length,
             tokens: themeTokens

package/lib/TextInput/TextInput.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
 var _utils = require("../utils");
 
 var _InputSupports = _interopRequireDefault(require("../InputSupports"));
@@ -49,17 +47,8 @@ const TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     tokens,
     variant = {},
-    pattern,
     ...rest
   } = _ref;
-
-  _react.default.useEffect(() => {
-    if (_Platform.default.OS === 'web' && pattern && ref.current) {
-      // eslint-disable-next-line no-param-reassign
-      ref.current.pattern = pattern;
-    }
-  }, [ref, pattern]);
-
   const {
     supportsProps,
     ...selectedProps

package/lib/TextInput/TextInputBase.js

@@ -156,6 +156,7 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     onBlur,
     onMouseOver,
     onMouseOut,
+    pattern,
     tokens,
     variant = {},
     ...rest
@@ -194,6 +195,14 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     onChange,
     readOnly
   });
+  const element = ref === null || ref === void 0 ? void 0 : ref.current;
+  (0, _react.useEffect)(() => {
+    if (_Platform.default.OS === 'web' && pattern && element) {
+      // React Native Web doesn't support `pattern`, so we have to attach it via a ref,
+      // which a `pattern` user must provide anyway to call .checkValidity() on the element.
+      element.pattern = pattern;
+    }
+  }, [element, pattern]);
 
   const handleChangeText = event => {
     var _event$nativeEvent, _event$target;

package/lib/TextInput/propTypes.js

@@ -7,10 +7,10 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// These are prop types specific to UDS TextInput; see also ../utils/props/textInputProps
+// for generic React Native props and HTML input attrs that are passed through.
 const textInputPropTypes = {
   /**
    * If the input's state is to be controlled by a parent component, use this prop
@@ -38,12 +38,7 @@ const textInputPropTypes = {
    * Use to react upon input's value changes. Required when the `value` prop is set.
    * Will receive the input's value as an argument.
    */
-  onChange: _propTypes.default.func,
-  ..._Platform.default.select({
-    web: {
-      pattern: _propTypes.default.string
-    }
-  })
+  onChange: _propTypes.default.func
 };
 var _default = textInputPropTypes;
 exports.default = _default;

package/lib/index.js

@@ -385,6 +385,20 @@ Object.keys(_Button).forEach(function (key) {
 
 var _Card = _interopRequireWildcard(require("./Card"));
 
+var _Carousel = require("./Carousel");
+
+Object.keys(_Carousel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Carousel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Carousel[key];
+    }
+  });
+});
+
 var _Checkbox = _interopRequireWildcard(require("./Checkbox"));
 
 Object.keys(_Checkbox).forEach(function (key) {

package/lib/utils/props/textInputProps.js

@@ -147,7 +147,14 @@ const crossPlatform = { ...textProps,
 const webOnly = {
   disabled: _propTypes.default.bool,
   dir: _propTypes.default.oneOf(['auto', 'ltr', 'rtl']),
-  lang: _propTypes.default.string
+  lang: _propTypes.default.string,
+
+  /**
+   * Sets the HTML input `pattern` attr. Not supported by React Native Web, but is supported by UDS.
+   * Must also pass in a ref and check validity by calling the HTML element's checkValidity method:
+   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity
+   */
+  pattern: _propTypes.default.string
 };
 /**
  * These props are supported in React Native but not React Native Web.

package/lib-module/Card/Card.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { useThemeTokens } from '../ThemeProvider';
 import { getTokensPropType, variantProp } from '../utils';
@@ -56,7 +56,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * depending on what you are trying to achieve.
  */
 
-const Card = _ref => {
+const Card = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
     tokens,
@@ -69,13 +69,14 @@ const Card = _ref => {
     viewport
   });
   return /*#__PURE__*/_jsx(CardBase, {
+    ref: ref,
     tokens: themeTokens,
     dataSet: dataSet,
     ...selectProps(rest),
     children: children
   });
-};
-
+});
+Card.displayName = 'Card';
 Card.propTypes = { ...selectedSystemPropTypes,
   children: PropTypes.node,
   tokens: getTokensPropType('Card'),