@telus-uds/components-base 1.96.0 → 1.97.1

package/lib-module/Modal/Modal.js

@@ -1,373 +0,0 @@
-import React from 'react';
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import TouchableWithoutFeedback from "react-native-web/dist/exports/TouchableWithoutFeedback";
-import View from "react-native-web/dist/exports/View";
-import ScrollView from "react-native-web/dist/exports/ScrollView";
-import NativeModal from "react-native-web/dist/exports/Modal";
-import Platform from "react-native-web/dist/exports/Platform";
-import PropTypes from 'prop-types';
-import { applyShadowToken, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, copyPropTypes, getTokensPropType, selectSystemProps, useCopy, variantProp, viewProps } from '../utils';
-import { useViewport } from '../ViewportProvider';
-import IconButton from '../IconButton';
-import dictionary from './dictionary';
-import useScrollBlocking from '../utils/useScrollBlocking';
-import ModalContent from './ModalContent';
-import WebModal from './WebModal';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, 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,
-    borderRadius,
-    height,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    paddingBottom,
-    shadow
-  } = _ref2;
-  return {
-    backgroundColor,
-    borderRadius,
-    height,
-    paddingLeft,
-    paddingRight,
-    paddingTop: Platform.OS !== 'web' ? 16 + paddingTop : paddingTop,
-    // the 16 additions are due to the border that is present in the mobile version
-    paddingBottom,
-    ...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.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.forwardRef((_ref5, ref) => {
-  var _modalContentRef$curr2;
-  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 = useViewport();
-  const themeTokens = useThemeTokens('Modal', tokens, variant, {
-    viewport,
-    maxWidth
-  });
-  const modalRef = useScrollBlocking(isOpen);
-  const modalBodyRef = React.useRef(ref);
-  const modalContentRef = React.useRef(null);
-  const {
-    closeIcon: CloseIconComponent
-  } = themeTokens;
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const closeLabel = getCopy('closeButton');
-  const handleClose = () => {
-    if (typeof onClose === 'function') onClose();
-  };
-  const handleKeyUp = event => {
-    if (event.key === 'Escape') onClose();
-  };
-  const manageFocus = React.useCallback(event => {
-    if (event.key === 'Tab') {
-      var _modalBodyRef$current;
-      const focusableElements = Array.from(modalBodyRef === null || modalBodyRef === void 0 ? void 0 : (_modalBodyRef$current = modalBodyRef.current) === null || _modalBodyRef$current === void 0 ? void 0 : _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.useRef(null);
-  const closeButtonRef = React.useRef(null);
-  React.useEffect(() => {
-    if (Platform.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.useEffect(() => {
-    if (isOpen) {
-      var _modalContentRef$curr;
-      modalContentRef === null || modalContentRef === void 0 ? void 0 : (_modalContentRef$curr = modalContentRef.current) === null || _modalContentRef$curr === void 0 ? void 0 : _modalContentRef$curr.focus();
-    }
-  }, [isOpen, modalContentRef === null || modalContentRef === void 0 ? void 0 : (_modalContentRef$curr2 = modalContentRef.current) === null || _modalContentRef$curr2 === void 0 ? void 0 : _modalContentRef$curr2.focus]);
-  if (!isOpen) {
-    return null;
-  }
-  const content = /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsxs(ScrollView, {
-      contentContainerStyle: [staticStyles.positioningContainer],
-      ref: modalRef,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: [staticStyles.sizingContainer, selectContainerStyles(themeTokens)],
-        pointerEvents: "box-none" // don't capture backdrop press events
-        ,
-        children: /*#__PURE__*/_jsxs(View, {
-          ref: modalBodyRef,
-          style: [staticStyles.modal, selectModalStyles(themeTokens)],
-          onKeyUp: handleKeyUp,
-          children: [showCloseButton && /*#__PURE__*/_jsx(View, {
-            style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
-            children: closeButton || /*#__PURE__*/_jsx(IconButton, {
-              onPress: handleClose,
-              icon: CloseIconComponent,
-              accessibilityRole: "button",
-              accessibilityLabel: closeLabel,
-              ref: closeButtonRef
-            })
-          }), /*#__PURE__*/_jsx(ModalContent, {
-            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 !== 'web' ? /*#__PURE__*/_jsx(ScrollView, {
-              style: selectScrollViewStyles,
-              children: children
-            }) : {
-              children
-            }
-          })]
-        })
-      }), /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
-        onPress: handleClose,
-        children: /*#__PURE__*/_jsx(View, {
-          style: [staticStyles.backdrop, selectBackdropStyles(themeTokens)]
-        })
-      })]
-    })
-  });
-  if (Platform.OS === 'web') {
-    return /*#__PURE__*/_jsxs(WebModal, {
-      ...selectProps(rest),
-      ref: modalContentRef,
-      children: [content, /*#__PURE__*/_jsx(View, {
-        accessibilityRole: "button",
-        ref: focusTrapRef
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsx(NativeModal, {
-    transparent: true,
-    ...selectProps(rest),
-    children: content
-  });
-});
-Modal.displayName = 'Modal';
-Modal.propTypes = {
-  ...selectedSystemPropTypes,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
-  /**
-   * To define the locale of the copy
-   */
-  copy: copyPropTypes,
-  /**
-   * Setting this to `true` will open the `Modal`
-   */
-  isOpen: PropTypes.bool,
-  /**
-   * This function is triggered when the `Modal` is closed
-   */
-  onClose: PropTypes.func,
-  /**
-   * `max-width` is applied to the `Modal` container
-   */
-  maxWidth: PropTypes.bool,
-  tokens: getTokensPropType('Modal'),
-  variant: variantProp.propType,
-  /**
-   * Pass a react node to override the default close button or pass `null` to hide the close button.
-   */
-  closeButton: PropTypes.node,
-  /**
-   * Receive a string to set the heading of the modal.
-   */
-  heading: PropTypes.string,
-  /**
-   * Receive h3 or h4 to define the level of the heading.
-   */
-  headingLevel: PropTypes.oneOf(['h3', 'h4']),
-  /**
-   * Receive a string to set the sub heading of the modal.
-   */
-  subHeading: PropTypes.string,
-  /**
-   * Receive small, medium or large to set the size of the sub heading.
-   */
-  subHeadingSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * Receive a string to set the bodyText of the modal.
-   */
-  bodyText: PropTypes.string,
-  /**
-   * Receive a string text for the confirm button.
-   */
-  confirmButtonText: PropTypes.string,
-  /**
-   * Receives a variant of button for the confirm button.
-   */
-  confirmButtonVariant: PropTypes.object,
-  /**
-   * Receive a function for the onConfirm event in the confirm button.
-   */
-  onConfirm: PropTypes.func,
-  /**
-   * Receive a string text for the cancel button.
-   */
-  cancelButtonText: PropTypes.string,
-  /**
-   * Receives a variant of button for the cancel button.
-   */
-  cancelButtonType: PropTypes.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.func
-};
-export default Modal;
-const staticStyles = StyleSheet.create({
-  backdrop: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: -1,
-    ...Platform.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.select({
-      web: {
-        overflow: 'auto'
-      }
-    })
-  },
-  closeButtonContainer: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    zIndex: 1
-  }
-});

package/lib-module/Modal/ModalContent.js

@@ -1,179 +0,0 @@
-import React from 'react';
-import View from "react-native-web/dist/exports/View";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Platform from "react-native-web/dist/exports/Platform";
-import PropTypes from 'prop-types';
-import Box from '../Box';
-import { Button } from '../Button';
-import { TextButton } from '../Link';
-import Spacer from '../Spacer';
-import Typography from '../Typography';
-import { useThemeTokens } from '../ThemeProvider';
-import { useViewport } from '../ViewportProvider';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    heading,
-    headingLevel = 'h3',
-    subHeading,
-    subHeadingSize = 'medium',
-    bodyText,
-    confirmButtonText,
-    confirmButtonVariant = {
-      priority: 'high'
-    },
-    onConfirm,
-    tokens,
-    variant,
-    cancelButtonText,
-    cancelButtonType: CancelButton = TextButton,
-    children,
-    onCancel
-  } = _ref;
-  const viewport = useViewport();
-  const {
-    headingColor,
-    cancelButtonColor,
-    ...themeTokens
-  } = useThemeTokens('Modal', tokens, variant, {
-    viewport
-  });
-  const [scrollContainerHeight, setScrollContainerHeight] = React.useState(0);
-  const [scrollContentHeight, setScrollContentHeight] = React.useState(0);
-  const handleContainerLayout = _ref2 => {
-    let {
-      nativeEvent: {
-        layout: {
-          height
-        }
-      }
-    } = _ref2;
-    return setScrollContainerHeight(height);
-  };
-  const onContentSizeChange = (_, height) => setScrollContentHeight(height);
-  const isContentOverflowing = scrollContentHeight > scrollContainerHeight;
-  const hasConfirmButton = confirmButtonText !== undefined && onConfirm !== undefined;
-  const hasCancelButton = cancelButtonText !== undefined && onCancel !== undefined;
-  const hasHeadingSection = Boolean(heading || subHeading);
-  const selectFooterContainerStyles = _ref3 => {
-    let {
-      paddingLeft,
-      paddingRight,
-      paddingTop,
-      marginLeft,
-      marginRight,
-      borderColor,
-      gap,
-      direction,
-      hasBorder
-    } = _ref3;
-    return {
-      flexDirection: direction,
-      alignItems: 'center',
-      gap,
-      marginLeft: -marginLeft,
-      marginRight: -marginRight,
-      paddingLeft,
-      paddingRight,
-      paddingTop,
-      borderTopColor: hasBorder ? borderColor : 'transparent',
-      borderTopWidth: hasBorder ? 1 : 0
-    };
-  };
-  const headingStyles = {
-    flexDirection: 'column',
-    paddingTop: 8,
-    paddingRight: themeTokens.headingPaddingRight
-  };
-  const subheadingStyles = {
-    marginTop: themeTokens.subHeadingMarginTop
-  };
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.modalContent,
-    ref: ref,
-    children: [hasHeadingSection && /*#__PURE__*/_jsxs(View, {
-      style: headingStyles,
-      children: [heading && /*#__PURE__*/_jsx(Typography, {
-        variant: {
-          size: headingLevel
-        },
-        tokens: {
-          color: headingColor
-        },
-        heading: headingLevel,
-        children: heading
-      }), subHeading && /*#__PURE__*/_jsx(View, {
-        style: subheadingStyles,
-        children: /*#__PURE__*/_jsx(Typography, {
-          variant: {
-            size: subHeadingSize
-          },
-          children: subHeading
-        })
-      }), Boolean(bodyText && hasHeadingSection) && /*#__PURE__*/_jsx(Spacer, {
-        space: 3
-      })]
-    }), bodyText && /*#__PURE__*/_jsx(Box, {
-      scroll: {
-        onContentSizeChange,
-        showsVerticalScrollIndicator: true
-      },
-      onLayout: handleContainerLayout,
-      children: /*#__PURE__*/_jsx(Typography, {
-        children: bodyText
-      })
-    }), children, (hasConfirmButton || hasCancelButton) && /*#__PURE__*/_jsxs(View, {
-      style: [selectFooterContainerStyles({
-        ...themeTokens,
-        hasBorder: isContentOverflowing
-      })],
-      children: [hasConfirmButton && /*#__PURE__*/_jsx(Button, {
-        variant: confirmButtonVariant,
-        tokens: {
-          width: viewport === 'xs' || viewport === 'sm' ? '100%' : undefined
-        },
-        onPress: onConfirm,
-        children: confirmButtonText
-      }), hasCancelButton ? /*#__PURE__*/_jsx(View, {
-        style: styles.cancelButton,
-        children: /*#__PURE__*/_jsx(CancelButton, {
-          tokens: {
-            color: cancelButtonColor
-          },
-          onPress: onCancel,
-          children: cancelButtonText
-        })
-      }) : null]
-    })]
-  });
-});
-ModalContent.displayName = 'ModalContent';
-const styles = StyleSheet.create({
-  modalContent: {
-    flex: 1,
-    flexDirection: 'column',
-    minHeight: Platform.OS === 'web' ? '100%' : 'auto'
-  },
-  cancelButton: {
-    display: 'flex'
-  }
-});
-ModalContent.propTypes = {
-  tokens: PropTypes.object,
-  variant: PropTypes.object,
-  heading: PropTypes.string,
-  headingLevel: PropTypes.oneOf(['h3', 'h4']),
-  subHeading: PropTypes.string,
-  subHeadingSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  bodyText: PropTypes.string,
-  confirmButtonText: PropTypes.string,
-  confirmButtonVariant: PropTypes.object,
-  onConfirm: PropTypes.func,
-  cancelButtonText: PropTypes.string,
-  cancelButtonType: PropTypes.elementType,
-  // TODO: figure out a way of passing an icon to the TextButton
-  children: PropTypes.node,
-  onCancel: PropTypes.func
-};
-export default ModalContent;

package/lib-module/Modal/WebModal.js

@@ -1,76 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import View from "react-native-web/dist/exports/View";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Portal from '../Portal';
-import { a11yProps, selectSystemProps, viewProps } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-/**
- * WebModal component.
- *
- * @component
- * @param {Object} props - The component props.
- * @param {ReactNode} props.children - The content of the modal.
- * @returns {JSX.Element} The rendered WebModal component.
- */
-const WebModal = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/_jsx(Portal, {
-    children: /*#__PURE__*/_jsx(View, {
-      style: staticStyles.container,
-      ...selectProps(rest),
-      focusable: true,
-      ref: ref,
-      children: /*#__PURE__*/_jsx("div", {
-        style: staticStyles.content,
-        role: "dialog",
-        "aria-modal": true,
-        children: children
-      })
-    })
-  });
-});
-WebModal.displayName = 'WebModal';
-WebModal.propTypes = {
-  ...selectedSystemPropTypes,
-  // children to be rendered within the modal
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
-};
-const staticStyles = StyleSheet.create({
-  container: {
-    position: 'fixed',
-    backgroundColor: 'rgba(0, 0, 0, 0)',
-    top: 0,
-    right: 0,
-    left: 0,
-    bottom: 0,
-    alignItems: 'stretch',
-    boxSizing: 'border-box',
-    display: 'flex',
-    flexBasis: 'auto',
-    flexDirection: 'column',
-    flexShrink: 0,
-    listStyle: 'none',
-    margin: 0,
-    minHeight: 0,
-    minWidth: 0,
-    padding: 0,
-    textDecorationLine: 'none',
-    zIndex: 1000
-  },
-  content: {
-    flex: 1,
-    flexGrow: 1,
-    flexShrink: 1,
-    flexBasis: 0,
-    zIndex: 1000,
-    display: 'flex',
-    overflowY: 'auto'
-  }
-});
-export default WebModal;

package/lib-module/Modal/dictionary.js

@@ -1,9 +0,0 @@
-export default {
-  en: {
-    // English text from TDS Community `Modal`
-    closeButton: 'Close'
-  },
-  fr: {
-    closeButton: 'Fermer'
-  }
-};

package/lib-module/Modal/index.js

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