@telus-uds/components-base 1.9.0 → 1.12.0

package/lib-module/Carousel/CarouselItem/CarouselItem.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
+import { layoutTags, getA11yPropsFromHtmlTag, selectSystemProps, a11yProps, viewProps } from '../../utils';
+import { useCarousel } from '../CarouselContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, 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
+  } = useCarousel();
+  const selectedProps = selectProps({ ...rest,
+    ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole)
+  });
+  const focusabilityProps = activeIndex === elementIndex ? {} : a11yProps.nonFocusableProps;
+  const style = {
+    width
+  };
+
+  if (hidden && Platform.OS === 'web') {
+    // On web, visibility: hidden makes all children non-focusable. It doesn't exist on native.
+    style.visibility = 'hidden';
+  }
+
+  return /*#__PURE__*/_jsx(View, {
+    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.number,
+
+  /**
+   * Provide custom accessibilityLabelledBy for Carousel slide
+   */
+  accessibilityLabelledBy: PropTypes.string,
+
+  /**
+   * Content of the slide
+   */
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.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.oneOf(layoutTags)
+};
+CarouselItem.displayName = 'Carousel.Item';
+export default CarouselItem;

package/lib-module/Carousel/CarouselItem/index.js

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

package/lib-module/Carousel/dictionary.js

@@ -0,0 +1,16 @@
+// 'stepLabel' and 'stepTrackerLabel' are passed down to StepTracker
+export 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}'
+  }
+};

package/lib-module/Carousel/index.js

@@ -0,0 +1,2 @@
+export * from './CarouselContext';
+export { default as Carousel } from './Carousel';

package/lib-module/InputSupports/InputSupports.js

@@ -16,7 +16,8 @@ const InputSupports = /*#__PURE__*/forwardRef((_ref, ref) => {
     hintPosition = 'inline',
     feedback,
     tooltip,
-    validation
+    validation,
+    nativeID
   } = _ref;
   const {
     space
@@ -30,7 +31,8 @@ const InputSupports = /*#__PURE__*/forwardRef((_ref, ref) => {
     feedback,
     hint,
     label,
-    validation
+    validation,
+    nativeID
   });
   return /*#__PURE__*/_jsxs(StackView, {
     space: space,
@@ -91,6 +93,11 @@ InputSupports.propTypes = {
   /**
    * Use to visually mark an input as valid or invalid.
    */
-  validation: PropTypes.oneOf(['error', 'success'])
+  validation: PropTypes.oneOf(['error', 'success']),
+
+  /**
+   * ID for DOM element on web
+   */
+  nativeID: PropTypes.string
 };
 export default InputSupports;

package/lib-module/InputSupports/useInputSupports.js

@@ -7,7 +7,8 @@ const useInputSupports = _ref => {
     label,
     feedback,
     validation,
-    hint
+    hint,
+    nativeID
   } = _ref;
   const hasValidationError = validation === 'error';
   const inputId = useUniqueId('input');
@@ -22,7 +23,7 @@ const useInputSupports = _ref => {
     accessibilityInvalid: hasValidationError
   };
   return {
-    inputId,
+    inputId: nativeID || inputId,
     hintId,
     feedbackId,
     a11yProps

package/lib-module/Modal/Modal.js

@@ -10,6 +10,7 @@ import { a11yProps, copyPropTypes, getTokensPropType, selectSystemProps, useCopy
 import { useViewport } from '../ViewportProvider';
 import IconButton from '../IconButton';
 import dictionary from './dictionary';
+import useScrollBlocking from '../utils/useScrollBlocking';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
@@ -110,6 +111,7 @@ const Modal = /*#__PURE__*/forwardRef((_ref5, ref) => {
     viewport,
     maxWidth
   });
+  const modalRef = useScrollBlocking(isOpen);
   const {
     closeIcon: CloseIconComponent
   } = themeTokens;
@@ -140,6 +142,7 @@ const Modal = /*#__PURE__*/forwardRef((_ref5, ref) => {
     ...selectProps(rest),
     children: /*#__PURE__*/_jsxs(View, {
       style: [staticStyles.positioningContainer],
+      ref: modalRef,
       children: [/*#__PURE__*/_jsx(View, {
         style: [staticStyles.sizingContainer, selectContainerStyles(themeTokens)],
         pointerEvents: "box-none" // don't capture backdrop press events

package/lib-module/Skeleton/Skeleton.js

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

package/lib-module/StepTracker/StepTracker.js

@@ -109,7 +109,10 @@ const StepTracker = /*#__PURE__*/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,
@@ -135,7 +138,7 @@ const StepTracker = /*#__PURE__*/forwardRef((_ref4, ref) => {
           return /*#__PURE__*/_jsx(Step, {
             status: current,
             label: label,
-            name: getCopy('stepLabel').replace('%{stepNumber}', index + 1),
+            name: getStepLabel(index),
             stepIndex: index,
             stepCount: steps.length,
             tokens: themeTokens
@@ -151,19 +154,18 @@ const StepTracker = /*#__PURE__*/forwardRef((_ref4, ref) => {
     })
   });
 });
-StepTracker.displayName = 'StepTracker';
+StepTracker.displayName = 'StepTracker'; // If a language dictionary entry is provided, it must contain every key
+
+const dictionaryContentShape = PropTypes.shape({
+  stepLabel: PropTypes.string.isRequired,
+  stepTrackerLabel: PropTypes.string.isRequired
+});
 StepTracker.propTypes = { ...selectedSystemPropTypes,
   current: PropTypes.number,
-  copy: PropTypes.oneOf(['en', 'fr']),
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), dictionaryContentShape]),
   dictionary: PropTypes.shape({
-    en: PropTypes.shape({
-      stepLabel: PropTypes.string,
-      stepTrackerLabel: PropTypes.string
-    }),
-    fr: PropTypes.shape({
-      stepLabel: PropTypes.string,
-      stepTrackerLabel: PropTypes.string
-    })
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
   }),
   steps: PropTypes.arrayOf(PropTypes.string),
   tokens: getTokensPropType('StepTracker'),

package/lib-module/TextInput/TextInput.js

@@ -40,7 +40,9 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
       validation: supportsProps.validation
     }
   };
-  return /*#__PURE__*/_jsx(InputSupports, { ...supportsProps,
+  return /*#__PURE__*/_jsx(InputSupports, {
+    nativeID: selectedProps.nativeID,
+    ...supportsProps,
     children: _ref2 => {
       let {
         inputId,

package/lib-module/index.js

@@ -3,6 +3,7 @@ export { default as ActivityIndicator } from './ActivityIndicator';
 export { default as Box } from './Box';
 export * from './Button';
 export { default as Card, PressableCardBase } from './Card';
+export * from './Carousel';
 export { default as Checkbox } from './Checkbox';
 export * from './Checkbox';
 export { default as Divider } from './Divider';
@@ -16,6 +17,7 @@ export { default as Icon } from './Icon';
 export * from './Icon';
 export { default as IconButton } from './IconButton';
 export { default as InputLabel } from './InputLabel';
+export { default as InputSupports } from './InputSupports';
 export * from './Link';
 export { default as List, ListItem, ListBase } from './List';
 export { default as Modal } from './Modal';

package/lib-module/utils/index.js

@@ -9,6 +9,7 @@ export { default as useCopy } from './useCopy';
 export { default as useHash } from './useHash';
 export { default as useSpacingScale } from './useSpacingScale';
 export { default as useResponsiveProp } from './useResponsiveProp';
+export { default as useScrollBlocking } from './useScrollBlocking';
 export * from './useResponsiveProp';
 export { default as useUniqueId } from './useUniqueId';
 export { default as withLinkRouter } from './withLinkRouter';

package/lib-module/utils/props/clickProps.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 const clickHandlerMapping = {
   onClick: 'onPress',
-  mouseDown: 'onPressIn',
-  mouseUp: 'onPressOut'
+  onMouseDown: 'onPressIn',
+  onMouseUp: 'onPressOut'
 };
 export default {
   /**

package/lib-module/utils/props/handlerProps.js

@@ -1,5 +1,7 @@
 import PropTypes from 'prop-types';
-export const focusHandlerProps = {
+import Platform from "react-native-web/dist/exports/Platform";
+import getPropSelector from './getPropSelector';
+const focusHandlerProps = {
   types: {
     /**
      * onBlur handler
@@ -10,19 +12,10 @@ export const focusHandlerProps = {
      * onFocus handler
      */
     onFocus: PropTypes.func
-  },
-  select: _ref => {
-    let {
-      onBlur,
-      onFocus
-    } = _ref;
-    return {
-      onBlur,
-      onFocus
-    };
   }
 };
-export const textInputHandlerProps = {
+focusHandlerProps.select = getPropSelector(focusHandlerProps.types);
+const textInputHandlerProps = {
   types: {
     /**
      * onChange handler
@@ -42,24 +35,78 @@ export const textInputHandlerProps = {
     /**
      * onSubmitEditing handler
      */
-    onSubmitEditing: PropTypes.func
-  },
-  select: _ref2 => {
-    let {
-      onChange,
-      onChangeText,
-      onSubmit,
-      onSubmitEditing
-    } = _ref2;
-    return {
-      onChange,
-      onChangeText,
-      onSubmit,
-      onSubmitEditing
-    };
+    onSubmitEditing: PropTypes.func,
+
+    /**
+     * onContentSizeChange handler
+     */
+    onContentSizeChange: PropTypes.func,
+
+    /**
+     * onEndEditing handler
+     */
+    onEndEditing: PropTypes.func,
+
+    /**
+     * onScroll handler
+     */
+    onScroll: PropTypes.func,
+
+    /**
+     * onSelectionChange handler
+     */
+    onSelectionChange: PropTypes.func,
+
+    /**
+     * onKeyPress handler
+     */
+    onKeyPress: PropTypes.func,
+
+    /**
+     * onKeyUp handler (only supported on Web)
+     */
+    onKeyUp: PropTypes.func,
+
+    /**
+     * onKeyDown handler (only supported on Web)
+     */
+    onKeyDown: PropTypes.func
   }
 };
-export default {
-  focusHandlerProps,
-  textInputHandlerProps
-};
+const selectTextInputHandlers = getPropSelector(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.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;
+};
+
+export { focusHandlerProps, textInputHandlerProps };

package/lib-module/utils/useScrollBlocking.js

@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useRef, useState } from '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 = useRef();
+  const [refIsMounted, setRefIsMounted] = useState(false);
+  const callbackRef = useCallback(element => {
+    ref.current = element;
+    setRefIsMounted(Boolean(element));
+  }, []);
+  const conditionsMet = Array.isArray(conditionProps) ? conditionProps.every(condition => condition) : Boolean(conditionProps);
+  const preventScrolling = useCallback(event => event.preventDefault(), []);
+  const stopPropagation = useCallback(event => event.stopPropagation(), []);
+  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;
+};
+
+export default useScrollBlocking;

package/lib-module/utils/useScrollBlocking.native.js

@@ -0,0 +1,2 @@
+// This is a no-op to emphasize that the original hook is web-only
+export default (() => {});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "1.9.0",
+  "version": "1.12.0",
   "description": "Base components",
   "keywords": [
     "base"
@@ -46,8 +46,8 @@
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-native": "0.68.2",
-    "react-native-web": "^0.17.0"
+    "react-native": "*",
+    "react-native-web": "~0.17.5"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^6.5.6",
@@ -66,7 +66,7 @@
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",
     "@telus-uds/system-constants": "^1.0.4",
-    "@telus-uds/system-theme-tokens": "^2.0.2",
+    "@telus-uds/system-theme-tokens": "^2.1.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",