@telus-uds/components-base 1.79.0 → 1.80.1

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @telus-uds/components-base
 
-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, 19 Mar 2024 18:37:02 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.80.1
+
+Tue, 19 Mar 2024 18:37:02 GMT
+
+### Patches
+
+- prevent flexgrid dataset property to be overruled (guillermo.peitzner@telus.com)
+- `Autocomplete`: Component breaks on Android because of type-casting (shahzaibkhalidmalik@outlook.com)
+- `Autocomplete`: Overlay does not render next to `TextInput` (shahzaibkhalidmalik@outlook.com)
+
+## 1.80.0
+
+Tue, 12 Mar 2024 22:26:51 GMT
+
+### Minor changes
+
+- New variants added to Footnote.Link component (josue.higueros@telus.com)
+
 ## 1.79.0
 
-Wed, 06 Mar 2024 00:02:37 GMT
+Wed, 06 Mar 2024 00:09:16 GMT
 
 ### Minor changes
 

package/lib/Autocomplete/Autocomplete.js

@@ -193,7 +193,7 @@ const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
       const throttledUpdateInputWidth = (0, _lodash.default)(updateInputWidth, 100, {
         leading: false
       });
-      updateInputWidth();
+      throttledUpdateInputWidth();
       _Dimensions.default.addEventListener('change', throttledUpdateInputWidth);
       return () => {
         _Dimensions.default.removeEventListener('change', throttledUpdateInputWidth);

package/lib/FlexGrid/FlexGrid.js

@@ -37,6 +37,7 @@ const FlexGrid = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     tag,
     accessibilityRole,
     children,
+    dataSet,
     ...rest
   } = _ref;
   const reverseLevel = (0, _helpers.default)([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
@@ -99,15 +100,17 @@ const FlexGrid = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
     ...selectProps(rest)
   };
+  const dataSetValue = mediaIds ? {
+    media: mediaIds,
+    ...dataSet
+  } : dataSet;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GutterContext.default.Provider, {
     value: gutter,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.BaseView, {
       ref: ref,
       ...props,
       style: flexgridStyles,
-      dataSet: mediaIds && {
-        media: mediaIds
-      },
+      dataSet: dataSetValue,
       children: children
     })
   });

package/lib/Footnote/FootnoteLink.js

@@ -83,6 +83,7 @@ const copyShape = _propTypes.default.shape({
 });
 FootnoteLink.propTypes = {
   ...selectedSystemPropTypes,
+  variant: _utils.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/Listbox/ListboxOverlay.js

@@ -9,7 +9,7 @@ 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 _Portal = _interopRequireDefault(require("../Portal"));
 var _ThemeProvider = require("../ThemeProvider");
 var _Card = _interopRequireDefault(require("../Card"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -66,7 +66,7 @@ const DropdownOverlay = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 const withPortal = Overlay => {
   // eslint-disable-next-line react/display-name, react/no-multi-comp
   return props => {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.Portal, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Portal.default, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, {
         ...props
       })

package/lib/Portal/Portal.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 }; }
+/**
+ * Portal component renders its children in a separate portal container appended to the document body.
+ *
+ * While `@gorhom/portal` works well for a lot of use-cases, there are some issues with it, particularly around
+ * reading context values (see issues below). For web-only components, it is safe to replace `Portal` from `@gorhom/portal`
+ * to `Portal` to solve such issues
+ *
+ * https://github.com/gorhom/react-native-portal/issues/34
+ * https://github.com/gorhom/react-native-portal/issues/2
+ * https://github.com/gorhom/react-native-portal/issues/3
+ * https://github.com/gorhom/react-native-portal/issues/31
+ *
+ * @component
+ * @param {object} props - The component props.
+ * @param {React.ReactNode} props.children - The content to render within the portal.
+ * @returns {React.ReactPortal} The React portal component.
+ */
+
+const Portal = _ref => {
+  let {
+    children
+  } = _ref;
+  const [portalContainer, setPortalContainer] = (0, _react.useState)(null);
+  const isWebClient = typeof document !== 'undefined' && typeof window !== 'undefined';
+  (0, _react.useEffect)(() => {
+    if (!isWebClient) {
+      return;
+    }
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    setPortalContainer(container);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      if (container && container.parentNode) {
+        container.parentNode.removeChild(container);
+      }
+    };
+  }, [isWebClient]);
+  if (!portalContainer || !isWebClient) return null;
+  return /*#__PURE__*/_reactDom.default.createPortal(children, portalContainer);
+};
+Portal.propTypes = {
+  children: _propTypes.default.node.isRequired
+};
+var _default = Portal;
+exports.default = _default;

package/lib/Portal/Portal.native.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _portal = require("@gorhom/portal");
+var _default = _portal.Portal;
+exports.default = _default;

package/lib/Portal/index.js

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

package/lib/TextInput/TextInputBase.js

@@ -357,7 +357,7 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
       ref: inputRef,
-      keyboardType: isNumeric && 'numeric',
+      keyboardType: isNumeric ? 'numeric' : 'default',
       inputMode: isNumeric && 'numeric',
       style: nativeInputStyle,
       secureTextEntry: isPassword && !showPassword,

package/lib/index.js

@@ -277,7 +277,7 @@ Object.defineProperty(exports, "Pagination", {
 Object.defineProperty(exports, "Portal", {
   enumerable: true,
   get: function () {
-    return _portal.Portal;
+    return _Portal.default;
   }
 });
 Object.defineProperty(exports, "PressableCardBase", {
@@ -695,7 +695,7 @@ Object.keys(_utils).forEach(function (key) {
     }
   });
 });
-var _portal = require("@gorhom/portal");
+var _Portal = _interopRequireDefault(require("./Portal"));
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib-module/Autocomplete/Autocomplete.js

@@ -185,7 +185,7 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
       const throttledUpdateInputWidth = throttle(updateInputWidth, 100, {
         leading: false
       });
-      updateInputWidth();
+      throttledUpdateInputWidth();
       Dimensions.addEventListener('change', throttledUpdateInputWidth);
       return () => {
         Dimensions.removeEventListener('change', throttledUpdateInputWidth);

package/lib-module/FlexGrid/FlexGrid.js

@@ -28,6 +28,7 @@ const FlexGrid = /*#__PURE__*/forwardRef((_ref, ref) => {
     tag,
     accessibilityRole,
     children,
+    dataSet,
     ...rest
   } = _ref;
   const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
@@ -90,15 +91,17 @@ const FlexGrid = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
     ...selectProps(rest)
   };
+  const dataSetValue = mediaIds ? {
+    media: mediaIds,
+    ...dataSet
+  } : dataSet;
   return /*#__PURE__*/_jsx(GutterContext.Provider, {
     value: gutter,
     children: /*#__PURE__*/_jsx(BaseView, {
       ref: ref,
       ...props,
       style: flexgridStyles,
-      dataSet: mediaIds && {
-        media: mediaIds
-      },
+      dataSet: dataSetValue,
       children: children
     })
   });

package/lib-module/Footnote/FootnoteLink.js

@@ -5,7 +5,7 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
 import TouchableWithoutFeedback from "react-native-web/dist/exports/TouchableWithoutFeedback";
 import dictionary from './dictionary';
-import { htmlAttrs, selectSystemProps, useCopy, viewProps, wrapStringsInText } from '../utils';
+import { htmlAttrs, selectSystemProps, useCopy, viewProps, wrapStringsInText, variantProp } from '../utils';
 import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -77,6 +77,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/Listbox/ListboxOverlay.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 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 { Portal } from '@gorhom/portal';
+import Portal from '../Portal';
 import { useThemeTokens } from '../ThemeProvider';
 import Card from '../Card';
 import { jsx as _jsx } from "react/jsx-runtime";

package/lib-module/Portal/Portal.js

@@ -0,0 +1,50 @@
+import { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+
+/**
+ * Portal component renders its children in a separate portal container appended to the document body.
+ *
+ * While `@gorhom/portal` works well for a lot of use-cases, there are some issues with it, particularly around
+ * reading context values (see issues below). For web-only components, it is safe to replace `Portal` from `@gorhom/portal`
+ * to `Portal` to solve such issues
+ *
+ * https://github.com/gorhom/react-native-portal/issues/34
+ * https://github.com/gorhom/react-native-portal/issues/2
+ * https://github.com/gorhom/react-native-portal/issues/3
+ * https://github.com/gorhom/react-native-portal/issues/31
+ *
+ * @component
+ * @param {object} props - The component props.
+ * @param {React.ReactNode} props.children - The content to render within the portal.
+ * @returns {React.ReactPortal} The React portal component.
+ */
+
+const Portal = _ref => {
+  let {
+    children
+  } = _ref;
+  const [portalContainer, setPortalContainer] = useState(null);
+  const isWebClient = typeof document !== 'undefined' && typeof window !== 'undefined';
+  useEffect(() => {
+    if (!isWebClient) {
+      return;
+    }
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    setPortalContainer(container);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      if (container && container.parentNode) {
+        container.parentNode.removeChild(container);
+      }
+    };
+  }, [isWebClient]);
+  if (!portalContainer || !isWebClient) return null;
+  return /*#__PURE__*/ReactDOM.createPortal(children, portalContainer);
+};
+Portal.propTypes = {
+  children: PropTypes.node.isRequired
+};
+export default Portal;

package/lib-module/Portal/Portal.native.js

@@ -0,0 +1,2 @@
+import { Portal } from '@gorhom/portal';
+export default Portal;

package/lib-module/Portal/index.js

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

package/lib-module/TextInput/TextInputBase.js

@@ -349,7 +349,7 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref7, ref) => {
       })
     }), /*#__PURE__*/_jsx(NativeTextInput, {
       ref: inputRef,
-      keyboardType: isNumeric && 'numeric',
+      keyboardType: isNumeric ? 'numeric' : 'default',
       inputMode: isNumeric && 'numeric',
       style: nativeInputStyle,
       secureTextEntry: isPassword && !showPassword,

package/lib-module/index.js

@@ -65,4 +65,4 @@ export { default as Validator } from './Validator';
 export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider';
 export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, useThemeTokensCallback, getThemeTokens, applyOuterBorder, applyTextStyles, applyShadowToken } from './ThemeProvider';
 export * from './utils';
-export { Portal } from '@gorhom/portal';
+export { default as Portal } from './Portal';

package/package.json

@@ -85,6 +85,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.79.0",
+  "version": "1.80.1",
   "types": "types/index.d.ts"
 }

package/src/Autocomplete/Autocomplete.jsx

@@ -167,7 +167,7 @@ const Autocomplete = forwardRef(
 
         const throttledUpdateInputWidth = throttle(updateInputWidth, 100, { leading: false })
 
-        updateInputWidth()
+        throttledUpdateInputWidth()
 
         Dimensions.addEventListener('change', throttledUpdateInputWidth)
 

package/src/FlexGrid/FlexGrid.jsx

@@ -39,6 +39,7 @@ const FlexGrid = forwardRef(
       tag,
       accessibilityRole,
       children,
+      dataSet,
       ...rest
     },
     ref
@@ -104,14 +105,11 @@ const FlexGrid = forwardRef(
       ...selectProps(rest)
     }
 
+    const dataSetValue = mediaIds ? { media: mediaIds, ...dataSet } : dataSet
+
     return (
       <GutterContext.Provider value={gutter}>
-        <BaseView
-          ref={ref}
-          {...props}
-          style={flexgridStyles}
-          dataSet={mediaIds && { media: mediaIds }}
-        >
+        <BaseView ref={ref} {...props} style={flexgridStyles} dataSet={dataSetValue}>
           {children}
         </BaseView>
       </GutterContext.Provider>

package/src/Footnote/FootnoteLink.jsx

@@ -2,7 +2,14 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet, Platform, TouchableWithoutFeedback } from 'react-native'
 import dictionary from './dictionary'
-import { htmlAttrs, selectSystemProps, useCopy, viewProps, wrapStringsInText } from '../utils'
+import {
+  htmlAttrs,
+  selectSystemProps,
+  useCopy,
+  viewProps,
+  wrapStringsInText,
+  variantProp
+} from '../utils'
 import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
@@ -64,6 +71,7 @@ const copyShape = PropTypes.shape({ a11yLabel: PropTypes.string.isRequired })
 
 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/Listbox/ListboxOverlay.jsx

@@ -2,7 +2,7 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet, Platform } from 'react-native'
-import { Portal } from '@gorhom/portal'
+import Portal from '../Portal'
 import { useThemeTokens } from '../ThemeProvider'
 import Card from '../Card'
 

package/src/Portal/Portal.jsx

@@ -0,0 +1,52 @@
+import { useState, useEffect } from 'react'
+import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types'
+
+/**
+ * Portal component renders its children in a separate portal container appended to the document body.
+ *
+ * While `@gorhom/portal` works well for a lot of use-cases, there are some issues with it, particularly around
+ * reading context values (see issues below). For web-only components, it is safe to replace `Portal` from `@gorhom/portal`
+ * to `Portal` to solve such issues
+ *
+ * https://github.com/gorhom/react-native-portal/issues/34
+ * https://github.com/gorhom/react-native-portal/issues/2
+ * https://github.com/gorhom/react-native-portal/issues/3
+ * https://github.com/gorhom/react-native-portal/issues/31
+ *
+ * @component
+ * @param {object} props - The component props.
+ * @param {React.ReactNode} props.children - The content to render within the portal.
+ * @returns {React.ReactPortal} The React portal component.
+ */
+
+const Portal = ({ children }) => {
+  const [portalContainer, setPortalContainer] = useState(null)
+  const isWebClient = typeof document !== 'undefined' && typeof window !== 'undefined'
+
+  useEffect(() => {
+    if (!isWebClient) {
+      return
+    }
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    setPortalContainer(container)
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      if (container && container.parentNode) {
+        container.parentNode.removeChild(container)
+      }
+    }
+  }, [isWebClient])
+
+  if (!portalContainer || !isWebClient) return null
+
+  return ReactDOM.createPortal(children, portalContainer)
+}
+
+Portal.propTypes = {
+  children: PropTypes.node.isRequired
+}
+
+export default Portal

package/src/Portal/Portal.native.jsx

@@ -0,0 +1,3 @@
+import { Portal } from '@gorhom/portal'
+
+export default Portal

package/src/Portal/index.js

@@ -0,0 +1,3 @@
+import Portal from './Portal'
+
+export default Portal

package/src/TextInput/TextInputBase.jsx

@@ -334,7 +334,7 @@ const TextInputBase = forwardRef(
         )}
         <NativeTextInput
           ref={inputRef}
-          keyboardType={isNumeric && 'numeric'}
+          keyboardType={isNumeric ? 'numeric' : 'default'}
           inputMode={isNumeric && 'numeric'}
           style={nativeInputStyle}
           secureTextEntry={isPassword && !showPassword}

package/src/index.js

@@ -77,4 +77,4 @@ export {
 } from './ThemeProvider'
 
 export * from './utils'
-export { Portal } from '@gorhom/portal'
+export { default as Portal } from './Portal'

package/types/Portal.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react'
+
+export interface PortalProps {
+  children: ReactNode
+}

package/types/index.d.ts

@@ -59,4 +59,7 @@ export { TooltipTokens, TooltipVariants, TooltipProps } from './ToolTip'
 export { default as Typography } from './Typography'
 export { TypographyProps, TypographyVariants, TypographyTokens } from './Typography'
 
+export { default as Portal } from './Portal'
+export { PortalProps } from './Portal'
+
 export * from './Common'