@telus-uds/components-base 1.9.0 → 1.12.0

package/lib/Carousel/CarouselContext.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CarouselProvider = void 0;
+exports.useCarousel = useCarousel;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const CarouselContext = /*#__PURE__*/_react.default.createContext();
+
+const CarouselProvider = _ref => {
+  let {
+    children,
+    activeIndex,
+    totalItems,
+    width,
+    goTo
+  } = _ref;
+
+  const value = _react.default.useMemo(() => ({
+    activeIndex,
+    totalItems,
+    width,
+    goTo
+  }), [activeIndex, totalItems, width, goTo]);
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CarouselContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+
+exports.CarouselProvider = CarouselProvider;
+
+function useCarousel() {
+  const context = _react.default.useContext(CarouselContext);
+
+  if (context === undefined) {
+    throw new Error("'useCarousel' must be used within a 'CarouselProvider'");
+  }
+
+  return context;
+}
+
+CarouselProvider.propTypes = {
+  children: _propTypes.default.arrayOf(_propTypes.default.element).isRequired,
+  activeIndex: _propTypes.default.number.isRequired,
+  totalItems: _propTypes.default.number.isRequired,
+  width: _propTypes.default.number.isRequired,
+  goTo: _propTypes.default.func.isRequired
+};

package/lib/Carousel/CarouselItem/CarouselItem.js

@@ -0,0 +1,92 @@
+"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,
+    tag = 'li',
+    hidden,
+    ...rest
+  } = _ref;
+  const {
+    width,
+    activeIndex
+  } = (0, _CarouselContext.useCarousel)();
+  const selectedProps = selectProps({ ...rest,
+    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, rest.accessibilityRole)
+  });
+  const focusabilityProps = activeIndex === elementIndex ? {} : _utils.a11yProps.nonFocusableProps;
+  const style = {
+    width
+  };
+
+  if (hidden && _Platform.default.OS === 'web') {
+    // On web, visibility: hidden makes all children non-focusable. It doesn't exist on native.
+    style.visibility = 'hidden';
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: style,
+    ...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,
+
+  /**
+   * Sets the HTML tag of the outer container. By default `'li'` so that assistive technology sees
+   * the Carousel as a list of items.
+   *
+   * 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.default.oneOf(_utils.layoutTags)
+};
+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/dictionary.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// 'stepLabel' and 'stepTrackerLabel' are passed down to StepTracker
+var _default = {
+  en: {
+    carouselLabel: '%{stepCount} items',
+    iconButtonLabel: 'Show %{itemLabel} %{targetStep} of %{stepCount}',
+    stepLabel: '%{itemLabel} %{stepNumber}',
+    stepTrackerLabel: '%{itemLabel} %{stepNumber} of %{stepCount}'
+  },
+  fr: {
+    // TODO: French translations here
+    carouselLabel: '(fr) %{stepCount} items',
+    iconButtonLabel: '(fr) Show %{itemLabel} %{targetStep} of %{stepCount}',
+    stepLabel: '(fr) %{itemLabel} %{stepNumber}',
+    stepTrackerLabel: '(fr) %{itemLabel} %{stepNumber} of %{stepCount}'
+  }
+};
+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/InputSupports/InputSupports.js

@@ -36,7 +36,8 @@ const InputSupports = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     hintPosition = 'inline',
     feedback,
     tooltip,
-    validation
+    validation,
+    nativeID
   } = _ref;
   const {
     space
@@ -50,7 +51,8 @@ const InputSupports = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     feedback,
     hint,
     label,
-    validation
+    validation,
+    nativeID
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
     space: space,
@@ -111,7 +113,12 @@ InputSupports.propTypes = {
   /**
    * Use to visually mark an input as valid or invalid.
    */
-  validation: _propTypes.default.oneOf(['error', 'success'])
+  validation: _propTypes.default.oneOf(['error', 'success']),
+
+  /**
+   * ID for DOM element on web
+   */
+  nativeID: _propTypes.default.string
 };
 var _default = InputSupports;
 exports.default = _default;

package/lib/InputSupports/useInputSupports.js

@@ -16,7 +16,8 @@ const useInputSupports = _ref => {
     label,
     feedback,
     validation,
-    hint
+    hint,
+    nativeID
   } = _ref;
   const hasValidationError = validation === 'error';
   const inputId = (0, _useUniqueId.default)('input');
@@ -31,7 +32,7 @@ const useInputSupports = _ref => {
     accessibilityInvalid: hasValidationError
   };
   return {
-    inputId,
+    inputId: nativeID || inputId,
     hintId,
     feedbackId,
     a11yProps

package/lib/Modal/Modal.js

@@ -29,6 +29,8 @@ var _IconButton = _interopRequireDefault(require("../IconButton"));
 
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 
+var _useScrollBlocking = _interopRequireDefault(require("../utils/useScrollBlocking"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -135,6 +137,7 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     viewport,
     maxWidth
   });
+  const modalRef = (0, _useScrollBlocking.default)(isOpen);
   const {
     closeIcon: CloseIconComponent
   } = themeTokens;
@@ -165,6 +168,7 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: [staticStyles.positioningContainer],
+      ref: modalRef,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: [staticStyles.sizingContainer, selectContainerStyles(themeTokens)],
         pointerEvents: "box-none" // don't capture backdrop press events

package/lib/Skeleton/Skeleton.js

@@ -42,6 +42,7 @@ const selectSkeletonStyles = _ref => {
   return {
     backgroundColor: color,
     borderRadius: radius,
+    maxWidth: '100%',
     ...fadeAnimation
   };
 };

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
@@ -176,19 +179,19 @@ const StepTracker = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     })
   });
 });
-StepTracker.displayName = 'StepTracker';
+StepTracker.displayName = 'StepTracker'; // If a language dictionary entry is provided, it must contain every key
+
+const dictionaryContentShape = _propTypes.default.shape({
+  stepLabel: _propTypes.default.string.isRequired,
+  stepTrackerLabel: _propTypes.default.string.isRequired
+});
+
 StepTracker.propTypes = { ...selectedSystemPropTypes,
   current: _propTypes.default.number,
-  copy: _propTypes.default.oneOf(['en', 'fr']),
+  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), dictionaryContentShape]),
   dictionary: _propTypes.default.shape({
-    en: _propTypes.default.shape({
-      stepLabel: _propTypes.default.string,
-      stepTrackerLabel: _propTypes.default.string
-    }),
-    fr: _propTypes.default.shape({
-      stepLabel: _propTypes.default.string,
-      stepTrackerLabel: _propTypes.default.string
-    })
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
   }),
   steps: _propTypes.default.arrayOf(_propTypes.default.string),
   tokens: (0, _utils.getTokensPropType)('StepTracker'),

package/lib/TextInput/TextInput.js

@@ -59,7 +59,9 @@ const TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       validation: supportsProps.validation
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, {
+    nativeID: selectedProps.nativeID,
+    ...supportsProps,
     children: _ref2 => {
       let {
         inputId,

package/lib/index.js

@@ -20,6 +20,7 @@ var _exportNames = {
   Icon: true,
   IconButton: true,
   InputLabel: true,
+  InputSupports: true,
   List: true,
   ListItem: true,
   ListBase: true,
@@ -158,6 +159,12 @@ Object.defineProperty(exports, "InputLabel", {
     return _InputLabel.default;
   }
 });
+Object.defineProperty(exports, "InputSupports", {
+  enumerable: true,
+  get: function () {
+    return _InputSupports.default;
+  }
+});
 Object.defineProperty(exports, "List", {
   enumerable: true,
   get: function () {
@@ -385,6 +392,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) {
@@ -441,6 +462,8 @@ var _IconButton = _interopRequireDefault(require("./IconButton"));
 
 var _InputLabel = _interopRequireDefault(require("./InputLabel"));
 
+var _InputSupports = _interopRequireDefault(require("./InputSupports"));
+
 var _Link = require("./Link");
 
 Object.keys(_Link).forEach(function (key) {

package/lib/utils/index.js

@@ -9,6 +9,7 @@ var _exportNames = {
   useHash: true,
   useSpacingScale: true,
   useResponsiveProp: true,
+  useScrollBlocking: true,
   useUniqueId: true,
   withLinkRouter: true,
   containUniqueFields: true
@@ -43,6 +44,12 @@ Object.defineProperty(exports, "useResponsiveProp", {
     return _useResponsiveProp.default;
   }
 });
+Object.defineProperty(exports, "useScrollBlocking", {
+  enumerable: true,
+  get: function () {
+    return _useScrollBlocking.default;
+  }
+});
 Object.defineProperty(exports, "useSpacingScale", {
   enumerable: true,
   get: function () {
@@ -168,6 +175,8 @@ Object.keys(_useResponsiveProp).forEach(function (key) {
   });
 });
 
+var _useScrollBlocking = _interopRequireDefault(require("./useScrollBlocking"));
+
 var _useUniqueId = _interopRequireDefault(require("./useUniqueId"));
 
 var _withLinkRouter = _interopRequireDefault(require("./withLinkRouter"));

package/lib/utils/props/clickProps.js

@@ -11,8 +11,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const clickHandlerMapping = {
   onClick: 'onPress',
-  mouseDown: 'onPressIn',
-  mouseUp: 'onPressOut'
+  onMouseDown: 'onPressIn',
+  onMouseUp: 'onPressOut'
 };
 var _default = {
   /**

package/lib/utils/props/handlerProps.js

@@ -3,10 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.textInputHandlerProps = exports.focusHandlerProps = exports.default = void 0;
+exports.textInputHandlerProps = exports.focusHandlerProps = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _getPropSelector = _interopRequireDefault(require("./getPropSelector"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const focusHandlerProps = {
@@ -20,19 +24,10 @@ const focusHandlerProps = {
      * onFocus handler
      */
     onFocus: _propTypes.default.func
-  },
-  select: _ref => {
-    let {
-      onBlur,
-      onFocus
-    } = _ref;
-    return {
-      onBlur,
-      onFocus
-    };
   }
 };
 exports.focusHandlerProps = focusHandlerProps;
+focusHandlerProps.select = (0, _getPropSelector.default)(focusHandlerProps.types);
 const textInputHandlerProps = {
   types: {
     /**
@@ -53,26 +48,77 @@ const textInputHandlerProps = {
     /**
      * onSubmitEditing handler
      */
-    onSubmitEditing: _propTypes.default.func
-  },
-  select: _ref2 => {
-    let {
-      onChange,
-      onChangeText,
-      onSubmit,
-      onSubmitEditing
-    } = _ref2;
-    return {
-      onChange,
-      onChangeText,
-      onSubmit,
-      onSubmitEditing
-    };
+    onSubmitEditing: _propTypes.default.func,
+
+    /**
+     * onContentSizeChange handler
+     */
+    onContentSizeChange: _propTypes.default.func,
+
+    /**
+     * onEndEditing handler
+     */
+    onEndEditing: _propTypes.default.func,
+
+    /**
+     * onScroll handler
+     */
+    onScroll: _propTypes.default.func,
+
+    /**
+     * onSelectionChange handler
+     */
+    onSelectionChange: _propTypes.default.func,
+
+    /**
+     * onKeyPress handler
+     */
+    onKeyPress: _propTypes.default.func,
+
+    /**
+     * onKeyUp handler (only supported on Web)
+     */
+    onKeyUp: _propTypes.default.func,
+
+    /**
+     * onKeyDown handler (only supported on Web)
+     */
+    onKeyDown: _propTypes.default.func
   }
 };
 exports.textInputHandlerProps = textInputHandlerProps;
-var _default = {
-  focusHandlerProps,
-  textInputHandlerProps
-};
-exports.default = _default;
+const selectTextInputHandlers = (0, _getPropSelector.default)(textInputHandlerProps.types);
+
+textInputHandlerProps.select = props => {
+  // Support for onKeyPress/onKeyUp/onKeyDown is inconsistent between React Native and React Native Web
+  const {
+    onKeyPress,
+    onKeyUp,
+    onKeyDown,
+    ...resolvedProps
+  } = selectTextInputHandlers(props);
+
+  if (onKeyPress || onKeyUp || onKeyDown) {
+    if (_Platform.default.OS !== 'web') {
+      // React Native only supports onKeyPress. Call any key handlers supplied in expected order.
+      resolvedProps.onKeyPress = event => {
+        if (typeof onKeyDown === 'function') onKeyDown(event);
+        if (typeof onKeyPress === 'function') onKeyPress(event);
+        if (typeof onKeyUp === 'function') onKeyUp(event);
+      };
+    } else {
+      // React Native Web supports onKeyUp the normal way.
+      if (onKeyUp) resolvedProps.onKeyUp = onKeyUp; // React Native Web doesn't support the `onKeyDown` prop name, but maps a supplied onKeyPress handler
+      // to the onKeyDown event and calls it with a keydown event. Make React Native Web call either or both.
+
+      if (onKeyPress || onKeyDown) {
+        resolvedProps.onKeyPress = event => {
+          if (typeof onKeyDown === 'function') onKeyDown(event);
+          if (typeof onKeyPress === 'function') onKeyPress(event);
+        };
+      }
+    }
+  }
+
+  return resolvedProps;
+};

package/lib/utils/useScrollBlocking.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+const addScrollBlocking = (preventScrolling, stopPropagation, ref) => {
+  var _ref$current;
+
+  document.body.addEventListener('touchmove', preventScrolling, {
+    passive: false
+  });
+  (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.addEventListener('touchmove', stopPropagation);
+  document.body.style.overflow = 'hidden';
+};
+
+const removeScrollBlocking = (preventScrolling, stopPropagation, ref) => {
+  var _ref$current2;
+
+  document.body.removeEventListener('touchmove', preventScrolling);
+  (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.removeEventListener('touchmove', stopPropagation);
+  document.body.style.overflow = 'inherit';
+};
+/**
+ * Disables scrolling when passed `true` or an array where all items are `true`.
+ *
+ * Returns an optional callback ref. Pass this to an element if it or its children
+ * should allow touch-based scrolling within that element's bounds.
+ *
+ * @param {boolean | boolean[]} conditionProps
+ * @returns
+ */
+
+
+const useScrollBlocking = conditionProps => {
+  // useRef refs are null on first render and don't trigger a re-render when they get their
+  // element. Force re-run when ref mounts to ensure the stopPropagation listener is attached.
+  const ref = (0, _react.useRef)();
+  const [refIsMounted, setRefIsMounted] = (0, _react.useState)(false);
+  const callbackRef = (0, _react.useCallback)(element => {
+    ref.current = element;
+    setRefIsMounted(Boolean(element));
+  }, []);
+  const conditionsMet = Array.isArray(conditionProps) ? conditionProps.every(condition => condition) : Boolean(conditionProps);
+  const preventScrolling = (0, _react.useCallback)(event => event.preventDefault(), []);
+  const stopPropagation = (0, _react.useCallback)(event => event.stopPropagation(), []);
+  (0, _react.useEffect)(() => {
+    const cleanup = () => removeScrollBlocking(preventScrolling, stopPropagation, ref);
+
+    if (conditionsMet) {
+      addScrollBlocking(preventScrolling, stopPropagation, ref);
+    } else {
+      cleanup();
+    }
+
+    return cleanup; // preventScrolling and stopPropagation are stable callbacks with no deps, so this
+    // will re-run when conditionsMet or refIsMounted flip between true and false.
+  }, [preventScrolling, conditionsMet, stopPropagation, refIsMounted]);
+  return callbackRef;
+};
+
+var _default = useScrollBlocking;
+exports.default = _default;

package/lib/utils/useScrollBlocking.native.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+// This is a no-op to emphasize that the original hook is web-only
+var _default = () => {};
+
+exports.default = _default;