@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/cjs/Modal/ModalContent.js

@@ -0,0 +1,205 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Box = _interopRequireDefault(require("../Box"));
+var _Button = require("../Button");
+var _Link = require("../Link");
+var _Spacer = _interopRequireDefault(require("../Spacer"));
+var _Typography = _interopRequireDefault(require("../Typography"));
+var _ThemeProvider = require("../ThemeProvider");
+var _ViewportProvider = require("../ViewportProvider");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    heading,
+    headingLevel = 'h3',
+    subHeading,
+    subHeadingSize = 'medium',
+    bodyText,
+    confirmButtonText,
+    confirmButtonVariant = {
+      priority: 'high'
+    },
+    onConfirm,
+    tokens,
+    variant,
+    cancelButtonText,
+    cancelButtonType: CancelButton = _Link.TextButton,
+    children,
+    onCancel
+  } = _ref;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const {
+    headingColor,
+    cancelButtonColor,
+    ...themeTokens
+  } = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant, {
+    viewport
+  });
+  const [scrollContainerHeight, setScrollContainerHeight] = _react.default.useState(0);
+  const [scrollContentHeight, setScrollContentHeight] = _react.default.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 selectHeadingContainerStyles = _ref3 => {
+    let {
+      paddingLeft,
+      paddingRight,
+      marginLeft,
+      marginRight,
+      borderColor,
+      headingBorderBottomWidth,
+      headingPaddingRight,
+      headingPaddingTop
+    } = _ref3;
+    return {
+      flexDirection: 'column',
+      marginLeft: -marginLeft,
+      marginRight: -marginRight,
+      paddingLeft,
+      paddingTop: headingPaddingTop,
+      paddingRight: paddingRight + headingPaddingRight,
+      borderBottomColor: borderColor,
+      borderBottomWidth: headingBorderBottomWidth
+    };
+  };
+  const selectFooterContainerStyles = _ref4 => {
+    let {
+      paddingLeft,
+      paddingRight,
+      paddingTop,
+      marginLeft,
+      marginRight,
+      borderColor,
+      gap,
+      direction,
+      footerTopWidth,
+      hasBorder
+    } = _ref4;
+    return {
+      flexDirection: direction,
+      alignItems: 'center',
+      gap,
+      marginLeft: -marginLeft,
+      marginRight: -marginRight,
+      paddingLeft,
+      paddingRight,
+      paddingTop,
+      borderTopWidth: footerTopWidth > 0 ? footerTopWidth : hasBorder && 1 || 0,
+      borderTopColor: borderColor
+    };
+  };
+  const subheadingStyles = {
+    marginTop: themeTokens.subHeadingMarginTop
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    style: styles.modalContent,
+    ref: ref,
+    children: [hasHeadingSection && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: selectHeadingContainerStyles(themeTokens),
+      children: [heading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        variant: {
+          size: headingLevel
+        },
+        tokens: {
+          color: headingColor
+        },
+        heading: headingLevel,
+        children: heading
+      }), subHeading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: subheadingStyles,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: {
+            size: subHeadingSize
+          },
+          children: subHeading
+        })
+      }), Boolean(bodyText && hasHeadingSection) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+        space: 3
+      })]
+    }), bodyText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      scroll: {
+        onContentSizeChange,
+        showsVerticalScrollIndicator: true
+      },
+      onLayout: handleContainerLayout,
+      top: themeTokens.contentPaddingTop,
+      bottom: themeTokens.contentPaddingBottom,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        children: bodyText
+      })
+    }), children, (hasConfirmButton || hasCancelButton) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: [selectFooterContainerStyles({
+        ...themeTokens,
+        hasBorder: isContentOverflowing
+      })],
+      children: [hasConfirmButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+        variant: confirmButtonVariant,
+        tokens: {
+          width: viewport === 'xs' || viewport === 'sm' ? '100%' : undefined
+        },
+        onPress: onConfirm,
+        children: confirmButtonText
+      }), hasCancelButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: styles.cancelButton,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CancelButton, {
+          tokens: {
+            color: cancelButtonColor
+          },
+          onPress: onCancel,
+          children: cancelButtonText
+        })
+      }) : null]
+    })]
+  });
+});
+ModalContent.displayName = 'ModalContent';
+const styles = _StyleSheet.default.create({
+  modalContent: {
+    flex: 1,
+    flexDirection: 'column',
+    minHeight: _Platform.default.OS === 'web' ? '100%' : 'auto'
+  },
+  cancelButton: {
+    display: 'flex'
+  }
+});
+ModalContent.propTypes = {
+  tokens: _propTypes.default.object,
+  variant: _propTypes.default.object,
+  heading: _propTypes.default.string,
+  headingLevel: _propTypes.default.oneOf(['h3', 'h4']),
+  subHeading: _propTypes.default.string,
+  subHeadingSize: _propTypes.default.oneOf(['small', 'medium', 'large']),
+  bodyText: _propTypes.default.string,
+  confirmButtonText: _propTypes.default.string,
+  confirmButtonVariant: _propTypes.default.object,
+  onConfirm: _propTypes.default.func,
+  cancelButtonText: _propTypes.default.string,
+  cancelButtonType: _propTypes.default.elementType,
+  // TODO: figure out a way of passing an icon to the TextButton
+  children: _propTypes.default.node,
+  onCancel: _propTypes.default.func
+};
+var _default = exports.default = ModalContent;

package/lib/cjs/Modal/WebModal.js

@@ -0,0 +1,83 @@
+"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 _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Portal = _interopRequireDefault(require("../Portal"));
+var _utils = require("../utils");
+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]);
+
+/**
+ * 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.default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Portal.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: staticStyles.container,
+      ...selectProps(rest),
+      focusable: true,
+      ref: ref,
+      children: /*#__PURE__*/(0, _jsxRuntime.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.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)])
+};
+const staticStyles = _StyleSheet.default.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'
+  }
+});
+var _default = exports.default = WebModal;

package/lib/cjs/Modal/dictionary.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  en: {
+    // English text from TDS Community `Modal`
+    closeButton: 'Close'
+  },
+  fr: {
+    closeButton: 'Fermer'
+  }
+};

package/lib/cjs/Modal/index.js

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

package/lib/cjs/MultiSelectFilter/ModalOverlay.js

@@ -0,0 +1,162 @@
+"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 _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _portal = require("@gorhom/portal");
+var _utils = require("../utils");
+var _ViewportProvider = require("../ViewportProvider");
+var _ThemeProvider = require("../ThemeProvider");
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _Card = _interopRequireDefault(require("../Card"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const staticStyles = _StyleSheet.default.create({
+  positioner: {
+    flex: 1,
+    // Grow to maxWidth when possible, shrink when not possible
+    zIndex: 10000,
+    // Position on top of all the other overlays, including backdrops and modals,
+    elevation: 10000,
+    // Position on top of all the other overlays, including backdrops and modals,
+    borderRadius: 4,
+    ..._Platform.default.select({
+      web: {
+        boxShadow: 'rgba(0, 0, 0, 0.1) 0px 4px 8px 0px'
+      },
+      default: {
+        shadowColor: 'rgba(0, 0, 0, 0.1)',
+        shadowOffset: {
+          width: 0,
+          height: 4
+        },
+        shadowOpacity: 1,
+        shadowRadius: 8
+      }
+    })
+  },
+  card: {
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 0,
+    paddingBottom: 0
+  },
+  closeButtonContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    zIndex: 1
+  },
+  hidden: {
+    // Use opacity not visibility to hide the dropdown during positioning
+    // so on web, children may be focused from the first render
+    opacity: 0
+  }
+});
+const selectContainerStyle = (enableFullscreen, themeTokens) => ({
+  borderColor: themeTokens.borderColor,
+  ..._Platform.default.select({
+    web: {
+      position: enableFullscreen ? 'fixed' : 'absolute'
+    },
+    default: {
+      position: 'absolute'
+    }
+  })
+});
+const selectCloseButtonContainerStyles = _ref => {
+  let {
+    paddingRight,
+    paddingTop
+  } = _ref;
+  return {
+    paddingRight,
+    paddingTop
+  };
+};
+const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    children,
+    isReady = false,
+    maxHeight,
+    maxHeightSize,
+    maxWidthSize,
+    minHeight,
+    minWidth,
+    overlaidPosition,
+    onLayout,
+    variant,
+    tokens,
+    copy,
+    onClose,
+    enableFullscreen = false
+  } = _ref2;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant, {
+    viewport,
+    maxWidth: false
+  });
+  const containerWidthHeight = {
+    minWidth: tokens.maxWidth ? maxWidthSize : minWidth,
+    minHeight: maxHeight ? maxHeightSize : minHeight,
+    maxWidth: maxWidthSize,
+    maxHeight: maxHeightSize
+  };
+  const {
+    closeIcon: CloseIconComponent
+  } = themeTokens;
+  const getCopy = (0, _utils.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+  const closeLabel = getCopy('closeButton');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.Portal, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      ref: ref,
+      onLayout: onLayout,
+      style: [overlaidPosition, containerWidthHeight, staticStyles.positioner, !isReady && staticStyles.hidden, selectContainerStyle(enableFullscreen, themeTokens)],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.default, {
+        tokens: staticStyles.card,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+            onPress: onClose,
+            icon: CloseIconComponent,
+            accessibilityRole: "button",
+            accessibilityLabel: closeLabel
+          })
+        }), children]
+      })
+    })
+  });
+});
+ModalOverlay.displayName = 'ModalOverlay';
+ModalOverlay.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  isReady: _propTypes.default.bool,
+  overlaidPosition: _propTypes.default.shape({
+    top: _propTypes.default.number,
+    left: _propTypes.default.number,
+    width: _propTypes.default.number
+  }),
+  minWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  minHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  maxHeightSize: _propTypes.default.number,
+  maxWidthSize: _propTypes.default.number,
+  maxHeight: _propTypes.default.bool,
+  maxWidth: _propTypes.default.bool,
+  onLayout: _propTypes.default.func,
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('Modal'),
+  copy: _utils.copyPropTypes,
+  onClose: _propTypes.default.func,
+  enableFullscreen: _propTypes.default.bool
+};
+var _default = exports.default = ModalOverlay;