@telus-uds/components-base 2.5.0 → 3.1.0

package/lib/cjs/Listbox/PressableItem.js

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _utils = require("../utils");
+var _ListboxContext = require("./ListboxContext");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs]);
+const getItemStyles = _ref => {
+  let {
+    groupFontName,
+    groupFontWeight,
+    itemFontSize,
+    itemPaddingTop,
+    itemPaddingBottom,
+    itemPaddingLeft,
+    itemBorderLeftWidth,
+    itemPaddingRight,
+    itemBackgroundColor,
+    itemColor,
+    itemOutline,
+    itemTextDecoration,
+    itemBorderLeftColor,
+    itemBorderRightWidth,
+    itemBorderRightColor,
+    itemBorderTopWidth,
+    itemBorderTopColor,
+    itemBorderBottomWidth,
+    itemBorderBottomColor,
+    itemBorderRadius
+  } = _ref;
+  return {
+    fontFamily: `${groupFontName}${groupFontWeight}normal`,
+    fontSize: itemFontSize,
+    paddingTop: itemPaddingTop - itemBorderTopWidth,
+    paddingBottom: itemPaddingBottom - itemBorderBottomWidth,
+    paddingLeft: itemPaddingLeft - itemBorderLeftWidth,
+    paddingRight: itemPaddingRight - itemBorderRightWidth,
+    width: '100%',
+    backgroundColor: itemBackgroundColor,
+    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}`,
+    borderRadius: itemBorderRadius,
+    justifyContent: 'center'
+  };
+};
+const PressableItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    children,
+    href,
+    isChild = false,
+    onBlur,
+    onPress,
+    tabIndex = 0,
+    nextItemRef,
+    prevItemRef,
+    tokens,
+    id,
+    ...rest
+  } = _ref2;
+  const {
+    selectedId,
+    setSelectedId
+  } = (0, _ListboxContext.useListboxContext)();
+  const selectTextStyles = _ref3 => {
+    let {
+      groupFontName,
+      groupFontWeight,
+      itemFontSize,
+      itemColor,
+      lineHeight
+    } = _ref3;
+    return {
+      fontFamily: `${groupFontName}${groupFontWeight}normal`,
+      fontSize: itemFontSize,
+      color: itemColor,
+      lineHeight: lineHeight * itemFontSize
+    };
+  };
+  const resolveButtonTokens = pressableState => {
+    const themeTokens = (0, _utils.resolvePressableTokens)(tokens, pressableState, {
+      isChild,
+      current: id === selectedId && id !== undefined
+    });
+    return themeTokens;
+  };
+  const handleKeyPress = event => {
+    if (['Enter', ' '].includes(event?.key)) {
+      onPress?.(event);
+    } else if (event?.key === 'ArrowDown') {
+      nextItemRef.current.focus();
+    } else if (event?.key === 'ArrowUp' && prevItemRef?.current) {
+      prevItemRef.current.focus();
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    isChild: isChild,
+    style: pressableState => getItemStyles(resolveButtonTokens(pressableState)),
+    onBlur: onBlur,
+    onClick: onPress,
+    onKeyPress: handleKeyPress,
+    ref: ref,
+    tabIndex: tabIndex,
+    ...(href && {
+      href
+    }),
+    ...(onPress && {
+      onClick: onPress
+    }),
+    ...selectProps(rest),
+    onPress: event => {
+      setSelectedId(id);
+      onPress(event);
+    },
+    children: pressableState => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
+        style: selectTextStyles(resolveButtonTokens(pressableState)),
+        children: [children, " "]
+      });
+    }
+  });
+});
+PressableItem.displayName = 'PressableItem';
+PressableItem.propTypes = {
+  ...selectedSystemPropTypes,
+  href: _propTypes.default.string,
+  isChild: _propTypes.default.bool,
+  children: _propTypes.default.node.isRequired,
+  onBlur: _propTypes.default.func,
+  onPress: _propTypes.default.func,
+  nextItemRef: _propTypes.default.object,
+  prevItemRef: _propTypes.default.object
+};
+var _default = exports.default = PressableItem;

package/lib/cjs/Listbox/index.js

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

package/lib/cjs/Modal/Modal.js

@@ -0,0 +1,375 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _TouchableWithoutFeedback = _interopRequireDefault(require("react-native-web/dist/cjs/exports/TouchableWithoutFeedback"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ScrollView"));
+var _Modal = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Modal"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _ViewportProvider = require("../ViewportProvider");
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _useScrollBlocking = _interopRequireDefault(require("../utils/useScrollBlocking"));
+var _ModalContent = _interopRequireDefault(require("./ModalContent"));
+var _WebModal = _interopRequireDefault(require("./WebModal"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const selectContainerStyles = _ref => {
+  let {
+    containerPaddingLeft,
+    containerPaddingRight,
+    containerPaddingTop,
+    containerPaddingBottom,
+    maxWidth,
+    height
+  } = _ref;
+  return {
+    height,
+    maxWidth,
+    paddingLeft: containerPaddingLeft,
+    paddingRight: containerPaddingRight,
+    paddingTop: containerPaddingTop,
+    paddingBottom: containerPaddingBottom
+  };
+};
+const selectModalStyles = _ref2 => {
+  let {
+    backgroundColor,
+    borderColor,
+    borderRadius,
+    borderWidth,
+    height,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    shadow
+  } = _ref2;
+  return {
+    backgroundColor,
+    borderColor,
+    borderRadius,
+    borderWidth,
+    height,
+    paddingLeft,
+    paddingRight,
+    paddingTop: _Platform.default.OS !== 'web' ? 16 + paddingTop : paddingTop,
+    // the 16 additions are due to the border that is present in the mobile version
+    paddingBottom,
+    ...(0, _ThemeProvider.applyShadowToken)(shadow)
+  };
+};
+const selectBackdropStyles = _ref3 => {
+  let {
+    backdropColor,
+    backdropOpacity
+  } = _ref3;
+  return {
+    backgroundColor: backdropColor,
+    opacity: backdropOpacity
+  };
+};
+const selectCloseButtonContainerStyles = _ref4 => {
+  let {
+    paddingRight,
+    paddingTop
+  } = _ref4;
+  return {
+    paddingRight,
+    paddingTop: _Platform.default.OS !== 'web' ? 24 + paddingTop : paddingTop // The 24 additions are due to the border that is present in the mobile version for the close button
+  };
+};
+const selectScrollViewStyles = () => ({
+  flex: 1
+});
+
+/**
+ * A modal window is a secondary window that opens on top of the main one.
+ * Users have to interact with it before they can carry out their task and return to the main window.
+ * Use to reveal additional information to a user after they have performed an explicit interaction.
+ * They are a strongly discouraged pattern; it's preferred to have all relevant information within a page,
+ * and irrelevant information either linked externally or omitted.
+ *
+ * - Must only appear after a customer interaction, not on page load or any other circumstance
+ * - Open a modal based on explicit customer action e.g. clicking on a button/link/form field
+ * - Only one modal should be "current" at any time
+ * - Read [WebAIM's documentation](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) to create accessible modals
+ * - Don’t use modals to reinforce or repeat information already available in the parent page or view
+ * - Don’t use modals consecutively
+ */
+const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+  let {
+    children,
+    isOpen,
+    onClose,
+    maxWidth,
+    tokens,
+    copy,
+    closeButton,
+    onCancel = onClose,
+    onConfirm,
+    heading,
+    headingLevel,
+    subHeading,
+    subHeadingSize,
+    bodyText,
+    variant = {},
+    confirmButtonText,
+    confirmButtonVariant,
+    cancelButtonText,
+    cancelButtonType,
+    ...rest
+  } = _ref5;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant, {
+    viewport,
+    maxWidth
+  });
+  const modalRef = (0, _useScrollBlocking.default)(isOpen);
+  const modalBodyRef = _react.default.useRef(ref);
+  const modalContentRef = _react.default.useRef(null);
+  const {
+    closeIcon: CloseIconComponent
+  } = themeTokens;
+  const getCopy = (0, _utils.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+  const closeLabel = getCopy('closeButton');
+  const handleClose = () => {
+    if (typeof onClose === 'function') onClose();
+  };
+  const handleKeyUp = event => {
+    if (event.key === 'Escape') onClose();
+  };
+  const manageFocus = _react.default.useCallback(event => {
+    if (event.key === 'Tab') {
+      const focusableElements = Array.from(modalBodyRef?.current?.querySelectorAll(`
+      a[href], button, textarea, input, select, 
+      [tabindex]:not([tabindex="-1"]),
+      [contenteditable="true"]
+    `) || []);
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      if (event.shiftKey && document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+      } else if (!event.shiftKey && document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    }
+  }, [modalBodyRef]);
+
+  // Show the custom react node passed to `closedButton` or the default close button if `closeButton` is `undefined`.
+  // Hide the close button if `closeButton` is `null`.
+  const showCloseButton = closeButton !== null;
+
+  // These refs are used to manage focus in the web modal container
+  const focusTrapRef = _react.default.useRef(null);
+  const closeButtonRef = _react.default.useRef(null);
+  _react.default.useEffect(() => {
+    if (_Platform.default.OS === 'web') {
+      // Add an event listener to manage keydown and focus in the web modal container
+      document.addEventListener('keydown', manageFocus);
+
+      // Clean up the event listener
+      return () => document.removeEventListener('keydown', manageFocus);
+    }
+    return undefined;
+  }, [manageFocus]);
+  _react.default.useEffect(() => {
+    if (isOpen) {
+      modalContentRef?.current?.focus();
+    }
+  }, [isOpen, modalContentRef?.current?.focus]);
+  if (!isOpen) {
+    return null;
+  }
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ScrollView.default, {
+      contentContainerStyle: [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
+        ,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+          ref: modalBodyRef,
+          style: [staticStyles.modal, selectModalStyles(themeTokens)],
+          onKeyUp: handleKeyUp,
+          children: [showCloseButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+            style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
+            children: closeButton || /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+              onPress: handleClose,
+              icon: CloseIconComponent,
+              accessibilityRole: "button",
+              accessibilityLabel: closeLabel,
+              ref: closeButtonRef
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalContent.default, {
+            tokens: tokens,
+            variant: variant,
+            onCancel: onCancel,
+            onConfirm: onConfirm,
+            heading: heading,
+            headingLevel: headingLevel,
+            subHeading: subHeading,
+            subHeadingSize: subHeadingSize,
+            bodyText: bodyText,
+            confirmButtonText: confirmButtonText,
+            confirmButtonVariant: confirmButtonVariant,
+            cancelButtonText: cancelButtonText,
+            cancelButtonType: cancelButtonType,
+            children: _Platform.default.OS !== 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
+              style: selectScrollViewStyles,
+              children: children
+            }) : children
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TouchableWithoutFeedback.default, {
+        onPress: handleClose,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: [staticStyles.backdrop, selectBackdropStyles(themeTokens)]
+        })
+      })]
+    })
+  });
+  if (_Platform.default.OS === 'web') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_WebModal.default, {
+      ...selectProps(rest),
+      ref: modalContentRef,
+      children: [content, /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        accessibilityRole: "button",
+        ref: focusTrapRef
+      })]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
+    transparent: true,
+    ...selectProps(rest),
+    children: content
+  });
+});
+Modal.displayName = 'Modal';
+Modal.propTypes = {
+  ...selectedSystemPropTypes,
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)]),
+  /**
+   * To define the locale of the copy
+   */
+  copy: _utils.copyPropTypes,
+  /**
+   * Setting this to `true` will open the `Modal`
+   */
+  isOpen: _propTypes.default.bool,
+  /**
+   * This function is triggered when the `Modal` is closed
+   */
+  onClose: _propTypes.default.func,
+  /**
+   * `max-width` is applied to the `Modal` container
+   */
+  maxWidth: _propTypes.default.bool,
+  tokens: (0, _utils.getTokensPropType)('Modal'),
+  variant: _utils.variantProp.propType,
+  /**
+   * Pass a react node to override the default close button or pass `null` to hide the close button.
+   */
+  closeButton: _propTypes.default.node,
+  /**
+   * Receive a string to set the heading of the modal.
+   */
+  heading: _propTypes.default.string,
+  /**
+   * Receive h3 or h4 to define the level of the heading.
+   */
+  headingLevel: _propTypes.default.oneOf(['h3', 'h4']),
+  /**
+   * Receive a string to set the sub heading of the modal.
+   */
+  subHeading: _propTypes.default.string,
+  /**
+   * Receive small, medium or large to set the size of the sub heading.
+   */
+  subHeadingSize: _propTypes.default.oneOf(['small', 'medium', 'large']),
+  /**
+   * Receive a string to set the bodyText of the modal.
+   */
+  bodyText: _propTypes.default.string,
+  /**
+   * Receive a string text for the confirm button.
+   */
+  confirmButtonText: _propTypes.default.string,
+  /**
+   * Receives a variant of button for the confirm button.
+   */
+  confirmButtonVariant: _propTypes.default.object,
+  /**
+   * Receive a function for the onConfirm event in the confirm button.
+   */
+  onConfirm: _propTypes.default.func,
+  /**
+   * Receive a string text for the cancel button.
+   */
+  cancelButtonText: _propTypes.default.string,
+  /**
+   * Receives a variant of button for the cancel button.
+   */
+  cancelButtonType: _propTypes.default.elementType,
+  // TODO: figure out a way of passing an icon to the TextButton
+  /**
+   * Receive a function for the onCancel event in the cancel button.
+   */
+  onCancel: _propTypes.default.func
+};
+var _default = exports.default = Modal;
+const staticStyles = _StyleSheet.default.create({
+  backdrop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: -1,
+    ..._Platform.default.select({
+      web: {
+        cursor: 'pointer'
+      }
+    })
+  },
+  positioningContainer: {
+    flexBasis: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  sizingContainer: {
+    maxHeight: '100%',
+    // so that the container can expand up to the full viewport height
+    width: '100%' // ensure that the modal actually expands to the set maxWidth
+  },
+  modal: {
+    maxHeight: '100%',
+    // so that the modal can expand vertically up to the  sizing container's height (exclusive of its vertical padding)
+    ..._Platform.default.select({
+      web: {
+        overflow: 'auto'
+      }
+    })
+  },
+  closeButtonContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    zIndex: 1
+  }
+});