@telus-uds/components-web 2.31.5 → 2.32.0

package/CHANGELOG.md

@@ -1,12 +1,25 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Wed, 06 Mar 2024 00:02:37 GMT and should not be manually modified.
+This log was last generated on Tue, 12 Mar 2024 22:22:38 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.32.0
+
+Tue, 12 Mar 2024 22:22:38 GMT
+
+### Minor changes
+
+- Changes to enable the new variants for Footnote.Link (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/components-base to v1.80.0
+
+### Patches
+
+- Make `WebPortal` SSR compliant and use it in `DatePicker` instead of `Portal` from `@gorhom/portal` (shahzaibkhalidmalik@outlook.com)
+
 ## 2.31.5
 
-Wed, 06 Mar 2024 00:02:37 GMT
+Wed, 06 Mar 2024 00:09:16 GMT
 
 ### Patches
 

package/lib/DatePicker/DatePicker.js

@@ -17,6 +17,7 @@ var _lodash = require("lodash");
 var _CalendarContainer = _interopRequireDefault(require("./CalendarContainer"));
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 var _utils = require("../utils");
+var _WebPortal = _interopRequireDefault(require("../WebPortal"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -125,7 +126,7 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   });
   (0, _componentsBase.useSafeLayoutEffect)(() => {
     const updateDimensions = () => {
-      if (inline) return;
+      if (inline || !textInputRef.current) return;
       const {
         left,
         top
@@ -138,7 +139,7 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     const throttledUpdateDimensions = (0, _lodash.throttle)(updateDimensions, 100, {
       leading: false
     });
-    updateDimensions();
+    throttledUpdateDimensions();
     window.addEventListener('resize', throttledUpdateDimensions);
     return () => window.removeEventListener('resize', throttledUpdateDimensions);
   }, []);
@@ -328,7 +329,7 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         validation: validation,
         inactive: disabled,
         ref: textInputRef,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Portal, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_WebPortal.default, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PortalPositionedContainer, {
             top: datePickerPosition.top,
             left: datePickerPosition.left,

package/lib/Footnote/FootnoteLink.js

@@ -30,7 +30,7 @@ const StyledSup = /*#__PURE__*/_styledComponents.default.sup.withConfig({
     cursor: 'pointer',
     // we want to fallback on 'smaller' but have a valid size when a custom font size is provided.
     fontSize: fontSize ? `${fontSize}px` : 'smaller',
-    lineHeight: `${fontSize * lineHeight}px`,
+    lineHeight: lineHeight ?? `${fontSize * 2}px`,
     margin: 0,
     paddingVertical: 0,
     paddingLeft,
@@ -90,7 +90,7 @@ const FootnoteLink = _ref2 => {
       tabIndex: 0,
       ...selectProps(rest),
       ...themeTokens,
-      fontSize: fontSize,
+      fontSize: fontSize ?? themeTokens.fontSize,
       children: `${num}${index !== numbers.length - 1 ? ',' : ''}`
     }, num))
   });
@@ -100,6 +100,7 @@ const copyShape = _propTypes.default.shape({
 });
 FootnoteLink.propTypes = {
   ...selectedSystemPropTypes,
+  variant: _componentsBase.variantProp.propType,
   /**
    * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
    * To provide your own, pass a JSON object with the key `a11yLabel`.

package/lib/WebPortal/WebPortal.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * WebPortal component renders its children in a separate portal container appended to the document body.
@@ -29,14 +30,22 @@ const WebPortal = _ref => {
   let {
     children
   } = _ref;
-  const portalContainer = document.createElement('div');
+  const [portalContainer, setPortalContainer] = (0, _react.useState)(null);
   (0, _react.useEffect)(() => {
-    document.body.appendChild(portalContainer);
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    setPortalContainer(container);
     return () => {
-      document.body.removeChild(portalContainer);
+      if (container && container.parentNode) {
+        container.parentNode.removeChild(container);
+      }
     };
-  }, [portalContainer]);
+  }, []);
+  if (!portalContainer) return null;
   return /*#__PURE__*/_reactDom.default.createPortal(children, portalContainer);
 };
+WebPortal.propTypes = {
+  children: _propTypes.default.node.isRequired
+};
 var _default = WebPortal;
 exports.default = _default;

package/lib-module/DatePicker/DatePicker.js

@@ -5,12 +5,13 @@ import momentPropTypes from 'react-moment-proptypes';
 import 'react-dates/initialize';
 import SingleDatePicker from 'react-dates/lib/components/SingleDatePicker';
 import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController';
-import { IconButton, TextInput, selectSystemProps, useCopy, useViewport, useThemeTokens, applyTextStyles, getTokensPropType, Portal, useSafeLayoutEffect } from '@telus-uds/components-base';
+import { IconButton, TextInput, selectSystemProps, useCopy, useViewport, useThemeTokens, applyTextStyles, getTokensPropType, useSafeLayoutEffect } from '@telus-uds/components-base';
 import moment from 'moment';
 import { isUndefined, throttle } from 'lodash';
 import CalendarContainer from './CalendarContainer';
 import dictionary from './dictionary';
 import { htmlAttrs } from '../utils';
+import WebPortal from '../WebPortal';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -118,7 +119,7 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref3, ref) => {
   });
   useSafeLayoutEffect(() => {
     const updateDimensions = () => {
-      if (inline) return;
+      if (inline || !textInputRef.current) return;
       const {
         left,
         top
@@ -131,7 +132,7 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref3, ref) => {
     const throttledUpdateDimensions = throttle(updateDimensions, 100, {
       leading: false
     });
-    updateDimensions();
+    throttledUpdateDimensions();
     window.addEventListener('resize', throttledUpdateDimensions);
     return () => window.removeEventListener('resize', throttledUpdateDimensions);
   }, []);
@@ -321,7 +322,7 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref3, ref) => {
         validation: validation,
         inactive: disabled,
         ref: textInputRef,
-        children: /*#__PURE__*/_jsx(Portal, {
+        children: /*#__PURE__*/_jsx(WebPortal, {
           children: /*#__PURE__*/_jsx(PortalPositionedContainer, {
             top: datePickerPosition.top,
             left: datePickerPosition.left,

package/lib-module/Footnote/FootnoteLink.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { applyTextStyles, selectSystemProps, useCopy, useThemeTokens } from '@telus-uds/components-base';
+import { applyTextStyles, selectSystemProps, useCopy, useThemeTokens, variantProp } from '@telus-uds/components-base';
 import dictionary from './dictionary';
 import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -24,7 +24,7 @@ const StyledSup = /*#__PURE__*/styled.sup.withConfig({
     cursor: 'pointer',
     // we want to fallback on 'smaller' but have a valid size when a custom font size is provided.
     fontSize: fontSize ? `${fontSize}px` : 'smaller',
-    lineHeight: `${fontSize * lineHeight}px`,
+    lineHeight: lineHeight ?? `${fontSize * 2}px`,
     margin: 0,
     paddingVertical: 0,
     paddingLeft,
@@ -84,7 +84,7 @@ const FootnoteLink = _ref2 => {
       tabIndex: 0,
       ...selectProps(rest),
       ...themeTokens,
-      fontSize: fontSize,
+      fontSize: fontSize ?? themeTokens.fontSize,
       children: `${num}${index !== numbers.length - 1 ? ',' : ''}`
     }, num))
   });
@@ -94,6 +94,7 @@ const copyShape = PropTypes.shape({
 });
 FootnoteLink.propTypes = {
   ...selectedSystemPropTypes,
+  variant: variantProp.propType,
   /**
    * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
    * To provide your own, pass a JSON object with the key `a11yLabel`.

package/lib-module/WebPortal/WebPortal.js

@@ -1,5 +1,6 @@
-import { useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
 
 /**
  * WebPortal component renders its children in a separate portal container appended to the document body.
@@ -23,13 +24,21 @@ const WebPortal = _ref => {
   let {
     children
   } = _ref;
-  const portalContainer = document.createElement('div');
+  const [portalContainer, setPortalContainer] = useState(null);
   useEffect(() => {
-    document.body.appendChild(portalContainer);
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    setPortalContainer(container);
     return () => {
-      document.body.removeChild(portalContainer);
+      if (container && container.parentNode) {
+        container.parentNode.removeChild(container);
+      }
     };
-  }, [portalContainer]);
+  }, []);
+  if (!portalContainer) return null;
   return /*#__PURE__*/ReactDOM.createPortal(children, portalContainer);
 };
+WebPortal.propTypes = {
+  children: PropTypes.node.isRequired
+};
 export default WebPortal;

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.79.0",
+    "@telus-uds/components-base": "1.80.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -83,5 +83,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.31.5"
+  "version": "2.32.0"
 }

package/src/DatePicker/DatePicker.jsx

@@ -14,7 +14,6 @@ import {
   useThemeTokens,
   applyTextStyles,
   getTokensPropType,
-  Portal,
   useSafeLayoutEffect
 } from '@telus-uds/components-base'
 import moment from 'moment'
@@ -22,6 +21,7 @@ import { isUndefined, throttle } from 'lodash'
 import CalendarContainer from './CalendarContainer'
 import dictionary from './dictionary'
 import { htmlAttrs } from '../utils'
+import WebPortal from '../WebPortal'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 const dateFormat = 'DD / MM / YYYY'
@@ -110,7 +110,7 @@ const DatePicker = forwardRef(
 
     useSafeLayoutEffect(() => {
       const updateDimensions = () => {
-        if (inline) return
+        if (inline || !textInputRef.current) return
         const { left, top } = textInputRef.current.getBoundingClientRect()
         setDatePickerPosition({
           left,
@@ -118,7 +118,7 @@ const DatePicker = forwardRef(
         })
       }
       const throttledUpdateDimensions = throttle(updateDimensions, 100, { leading: false })
-      updateDimensions()
+      throttledUpdateDimensions()
       window.addEventListener('resize', throttledUpdateDimensions)
       return () => window.removeEventListener('resize', throttledUpdateDimensions)
     }, [])
@@ -294,7 +294,7 @@ const DatePicker = forwardRef(
               inactive={disabled}
               ref={textInputRef}
             >
-              <Portal>
+              <WebPortal>
                 {/* Because `SingleDatePicker` is an absolutely positioned element,
                  * putting it in a `Portal` breaks view heirarchy because it doesn't
                  * align with `TextInput`, but rather position itself with the nearest
@@ -359,7 +359,7 @@ const DatePicker = forwardRef(
                     />
                   </CalendarContainer>
                 </PortalPositionedContainer>
-              </Portal>
+              </WebPortal>
             </TextInput>
           </DateInputWrapper>
         )}

package/src/Footnote/FootnoteLink.jsx

@@ -5,7 +5,8 @@ import {
   applyTextStyles,
   selectSystemProps,
   useCopy,
-  useThemeTokens
+  useThemeTokens,
+  variantProp
 } from '@telus-uds/components-base'
 import dictionary from './dictionary'
 import { htmlAttrs } from '../utils'
@@ -20,7 +21,7 @@ const StyledSup = styled.sup(
       cursor: 'pointer',
       // we want to fallback on 'smaller' but have a valid size when a custom font size is provided.
       fontSize: fontSize ? `${fontSize}px` : 'smaller',
-      lineHeight: `${fontSize * lineHeight}px`,
+      lineHeight: lineHeight ?? `${fontSize * 2}px`,
       margin: 0,
       paddingVertical: 0,
       paddingLeft,
@@ -83,7 +84,7 @@ const FootnoteLink = ({
           tabIndex={0}
           {...selectProps(rest)}
           {...themeTokens}
-          fontSize={fontSize}
+          fontSize={fontSize ?? themeTokens.fontSize}
         >
           {`${num}${index !== numbers.length - 1 ? ',' : ''}`}
         </StyledSup>
@@ -98,6 +99,7 @@ const copyShape = PropTypes.shape({
 
 FootnoteLink.propTypes = {
   ...selectedSystemPropTypes,
+  variant: variantProp.propType,
   /**
    * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
    * To provide your own, pass a JSON object with the key `a11yLabel`.

package/src/WebPortal/WebPortal.jsx

@@ -1,5 +1,6 @@
-import { useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types'
 
 /**
  * WebPortal component renders its children in a separate portal container appended to the document body.
@@ -20,17 +21,27 @@ import ReactDOM from 'react-dom'
  */
 
 const WebPortal = ({ children }) => {
-  const portalContainer = document.createElement('div')
+  const [portalContainer, setPortalContainer] = useState(null)
 
   useEffect(() => {
-    document.body.appendChild(portalContainer)
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    setPortalContainer(container)
 
     return () => {
-      document.body.removeChild(portalContainer)
+      if (container && container.parentNode) {
+        container.parentNode.removeChild(container)
+      }
     }
-  }, [portalContainer])
+  }, [])
+
+  if (!portalContainer) return null
 
   return ReactDOM.createPortal(children, portalContainer)
 }
 
+WebPortal.propTypes = {
+  children: PropTypes.node.isRequired
+}
+
 export default WebPortal