@telus-uds/components-base 3.28.2 → 4.0.0-alpha.0

package/lib/cjs/Modal/Modal.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Modal = 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"));
@@ -12,17 +12,24 @@ var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/expo
 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 _styles = require("../ThemeProvider/utils/styles");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _copyPropTypes = require("../utils/props/copyPropTypes");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _useCopy = require("../utils/useCopy");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _useViewport = require("../ViewportProvider/useViewport");
+var _IconButton = require("../IconButton/IconButton");
+var _dictionary = require("./dictionary");
+var _useScrollBlocking = require("../utils/useScrollBlocking");
+var _ModalContent = require("./ModalContent");
+var _WebModal = 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 [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 const selectContainerStyles = _ref => {
   let {
     containerPaddingLeft,
@@ -65,7 +72,7 @@ const selectModalStyles = _ref2 => {
     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)
+    ...(0, _styles.applyShadowToken)(shadow)
   };
 };
 const selectBackdropStyles = _ref3 => {
@@ -110,7 +117,7 @@ const selectScrollViewStyles = () => ({
  * - 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) => {
+const Modal = exports.Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   let {
     children,
     isOpen,
@@ -135,21 +142,21 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     backgroundDismissible = true,
     ...rest
   } = _ref5;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = (0, _useViewport.useViewport)();
   const isBackdropClickable = onClose && backgroundDismissible;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant, {
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('Modal', tokens, variant, {
     viewport,
     maxWidth,
     backdropCursor: isBackdropClickable ? 'pointer' : 'default'
   });
-  const modalRef = (0, _useScrollBlocking.default)(isOpen);
+  const modalRef = (0, _useScrollBlocking.useScrollBlocking)(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,
+  const getCopy = (0, _useCopy.useCopy)({
+    dictionary: _dictionary.dictionary,
     copy
   });
   const closeLabel = getCopy('closeButton');
@@ -217,14 +224,14 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
           onKeyUp: handleKeyUp,
           children: [showCloseButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
             style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
-            children: closeButton || /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+            children: closeButton || /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
               onPress: handleClose,
               icon: CloseIconComponent,
               accessibilityRole: "button",
               accessibilityLabel: closeLabel,
               ref: closeButtonRef
             })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalContent.default, {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalContent.ModalContent, {
             tokens: tokens,
             variant: variant,
             onCancel: onCancel,
@@ -246,7 +253,7 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
           })]
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TouchableWithoutFeedback.default, {
-        onPress: isBackdropClickable && handleClose,
+        onPress: isBackdropClickable ? handleClose : undefined,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
           style: [staticStyles.backdrop, selectBackdropStyles(themeTokens)]
         })
@@ -254,7 +261,7 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     })
   });
   if (_Platform.default.OS === 'web') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_WebModal.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_WebModal.WebModal, {
       ...selectProps(rest),
       ref: modalContentRef,
       children: [content, /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -276,7 +283,7 @@ Modal.propTypes = {
   /**
    * To define the locale of the copy
    */
-  copy: _utils.copyPropTypes,
+  copy: _copyPropTypes.copyPropTypes,
   /**
    * Setting this to `true` will open the `Modal`
    */
@@ -289,8 +296,8 @@ Modal.propTypes = {
    * `max-width` is applied to the `Modal` container
    */
   maxWidth: _propTypes.default.bool,
-  tokens: (0, _utils.getTokensPropType)('Modal'),
-  variant: _utils.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('Modal'),
+  variant: _variantProp.variantProp.propType,
   /**
    * Pass a react node to override the default close button or pass `null` to hide the close button.
    */
@@ -353,7 +360,6 @@ Modal.propTypes = {
    */
   backgroundDismissible: _propTypes.default.bool
 };
-var _default = exports.default = Modal;
 const staticStyles = _StyleSheet.default.create({
   backdrop: {
     position: 'absolute',

package/lib/cjs/Modal/ModalContent.js

@@ -3,22 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ModalContent = 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 _Box = require("../Box/Box");
+var _Button = require("../Button/Button");
+var _TextButton = require("../Link/TextButton");
+var _Spacer = require("../Spacer/Spacer");
+var _Typography = require("../Typography/Typography");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _useViewport = require("../ViewportProvider/useViewport");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const ModalContent = exports.ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     heading,
     headingLevel = 'h3',
@@ -33,17 +33,17 @@ const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     tokens,
     variant,
     cancelButtonText,
-    cancelButtonType: CancelButton = _Link.TextButton,
+    cancelButtonType: CancelButton = _TextButton.TextButton,
     children,
     onCancel,
     footer
   } = _ref;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = (0, _useViewport.useViewport)();
   const {
     headingColor,
     cancelButtonColor,
     ...themeTokens
-  } = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant, {
+  } = (0, _useThemeTokens.useThemeTokens)('Modal', tokens, variant, {
     viewport
   });
   const [scrollContainerHeight, setScrollContainerHeight] = _react.default.useState(0);
@@ -119,7 +119,7 @@ const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     ref: ref,
     children: [hasHeadingSection && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: selectHeadingContainerStyles(themeTokens),
-      children: [heading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      children: [heading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.Typography, {
         variant: {
           size: headingLevel
         },
@@ -130,16 +130,16 @@ const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         children: heading
       }), subHeading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: subheadingStyles,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.Typography, {
           variant: {
             size: subHeadingSize
           },
           children: subHeading
         })
-      }), Boolean((bodyText || children) && hasHeadingSection) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+      }), Boolean((bodyText || children) && hasHeadingSection) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.Spacer, {
         space: 3
       })]
-    }), bodyText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    }), bodyText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.Box, {
       scroll: {
         onContentSizeChange,
         showsVerticalScrollIndicator: true
@@ -147,7 +147,7 @@ const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       onLayout: handleContainerLayout,
       top: themeTokens.contentPaddingTop,
       bottom: themeTokens.contentPaddingBottom,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.Typography, {
         children: bodyText
       })
     }), children, (hasConfirmButton || hasCancelButton) && !footer && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
@@ -203,5 +203,4 @@ ModalContent.propTypes = {
   children: _propTypes.default.node,
   onCancel: _propTypes.default.func,
   footer: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)])
-};
-var _default = exports.default = ModalContent;
+};

package/lib/cjs/Modal/WebModal.js

@@ -3,16 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.WebModal = 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 _Portal = require("../Portal/Portal");
+var _a11yProps = require("../utils/props/a11yProps");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _viewProps = require("../utils/props/viewProps");
 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 [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 
 /**
  * WebModal component.
@@ -22,12 +24,12 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * @param {ReactNode} props.children - The content of the modal.
  * @returns {JSX.Element} The rendered WebModal component.
  */
-const WebModal = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const WebModal = exports.WebModal = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     ...rest
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Portal.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Portal.Portal, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: staticStyles.container,
       ...selectProps(rest),
@@ -79,5 +81,4 @@ const staticStyles = _StyleSheet.default.create({
     display: 'flex',
     overflowY: 'auto'
   }
-});
-var _default = exports.default = WebModal;
+});

package/lib/cjs/Modal/dictionary.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _default = exports.default = {
+exports.dictionary = void 0;
+const dictionary = exports.dictionary = {
   en: {
     // English text from TDS Community `Modal`
     closeButton: 'Close'

package/lib/cjs/MultiSelectFilter/ModalOverlay.js

@@ -3,20 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ModalOverlay = 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 _useDetectOutsideClick = _interopRequireDefault(require("../utils/useDetectOutsideClick"));
+var _useCopy = require("../utils/useCopy");
+var _copyPropTypes = require("../utils/props/copyPropTypes");
+var _tokens = require("../utils/props/tokens");
+var _variantProp = require("../utils/props/variantProp");
+var _useViewport = require("../ViewportProvider/useViewport");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _dictionary = require("./dictionary");
+var _Card = require("../Card/Card");
+var _IconButton = require("../IconButton/IconButton");
+var _useDetectOutsideClick = require("../utils/useDetectOutsideClick");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const staticStyles = _StyleSheet.default.create({
@@ -83,7 +86,7 @@ const selectCloseButtonContainerStyles = _ref => {
     paddingTop
   };
 };
-const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const ModalOverlay = exports.ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     isReady = false,
@@ -98,16 +101,15 @@ const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     tokens,
     copy,
     onClose,
-    enableFullscreen = false,
-    dismissWhenPressedOutside = false
+    enableFullscreen = false
   } = _ref2;
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant, {
+  const viewport = (0, _useViewport.useViewport)();
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('Modal', tokens, variant, {
     viewport,
     maxWidth: false
   });
   const containerRef = _react.default.useRef(ref || null);
-  (0, _useDetectOutsideClick.default)(containerRef, onClose, dismissWhenPressedOutside);
+  (0, _useDetectOutsideClick.useDetectOutsideClick)(containerRef, onClose);
   const containerWidthHeight = {
     minWidth: tokens.maxWidth ? maxWidthSize : minWidth,
     minHeight: maxHeight ? maxHeightSize : minHeight,
@@ -118,8 +120,8 @@ const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     closeIcon: CloseIconComponent,
     backgroundColor
   } = themeTokens;
-  const getCopy = (0, _utils.useCopy)({
-    dictionary: _dictionary.default,
+  const getCopy = (0, _useCopy.useCopy)({
+    dictionary: _dictionary.dictionary,
     copy
   });
   const closeLabel = getCopy('closeButton');
@@ -128,14 +130,14 @@ const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       ref: containerRef,
       onLayout: onLayout,
       style: [overlaidPosition, containerWidthHeight, staticStyles.positioner, !isReady && staticStyles.hidden, selectContainerStyle(enableFullscreen, themeTokens)],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.Card, {
         tokens: {
           ...staticStyles.card,
           backgroundColor
         },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
           style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
             onPress: onClose,
             icon: CloseIconComponent,
             accessibilityRole: "button",
@@ -162,15 +164,9 @@ ModalOverlay.propTypes = {
   maxHeight: _propTypes.default.bool,
   maxWidth: _propTypes.default.bool,
   onLayout: _propTypes.default.func,
-  variant: _utils.variantProp.propType,
-  tokens: (0, _utils.getTokensPropType)('Modal'),
-  copy: _utils.copyPropTypes,
+  variant: _variantProp.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('Modal'),
+  copy: _copyPropTypes.copyPropTypes,
   onClose: _propTypes.default.func,
-  enableFullscreen: _propTypes.default.bool,
-  /**
-   * If true, clicking outside the content will trigger the a close callback, dismissing the content.
-   * @deprecated This parameter will be removed in the next major release; detection will be always enabled by default.
-   */
-  dismissWhenPressedOutside: _propTypes.default.bool
-};
-var _default = exports.default = ModalOverlay;
+  enableFullscreen: _propTypes.default.bool
+};