@telus-uds/components-base 1.69.0 → 1.71.0

package/lib-module/FlexGrid/FlexGrid.js

@@ -1,11 +1,9 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { viewports } from '@telus-uds/system-constants';
-import { a11yProps, viewProps, getA11yPropsFromHtmlTag, layoutTags, selectSystemProps, BaseView } from '../utils';
+import { a11yProps, viewProps, getA11yPropsFromHtmlTag, layoutTags, selectSystemProps, BaseView, StyleSheet, createMediaQueryStyles } from '../utils';
 import Row from './Row';
 import Col from './Col';
-import { useViewport } from '../ViewportProvider';
 import GutterContext from './providers/GutterContext';
 import applyInheritance from './helpers';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -30,33 +28,40 @@ const FlexGrid = /*#__PURE__*/forwardRef((_ref, ref) => {
     children,
     ...rest
   } = _ref;
-  const viewPort = useViewport();
   const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
-  const marginVertical = 0;
-  const marginHorizontal = outsideGutter ? 'auto' : -16;
-  const width = outsideGutter ? '100%' : 'auto';
-  let flexDirection;
-  let maxWidth;
-  if (viewPort === viewports.xs) {
-    // no maxWidth for xs
-    flexDirection = reverseLevel[0] ? 'column-reverse' : 'column';
-  }
-  if (viewPort === viewports.sm) {
-    maxWidth = limitWidth && viewports.map.get(viewports.sm);
-    flexDirection = reverseLevel[1] ? 'column-reverse' : 'column';
-  }
-  if (viewPort === viewports.md) {
-    maxWidth = limitWidth && viewports.map.get(viewports.md);
-    flexDirection = reverseLevel[2] ? 'column-reverse' : 'column';
-  }
-  if (viewPort === viewports.lg) {
-    maxWidth = limitWidth && viewports.map.get(viewports.lg);
-    flexDirection = reverseLevel[3] ? 'column-reverse' : 'column';
-  }
-  if (viewPort === viewports.xl) {
-    maxWidth = limitWidth && viewports.map.get(viewports.xl);
-    flexDirection = reverseLevel[4] ? 'column-reverse' : 'column';
-  }
+  const mediaQueryStyles = createMediaQueryStyles({
+    xs: {
+      flexDirection: reverseLevel[0] ? 'column-reverse' : 'column'
+    },
+    sm: {
+      maxWidth: limitWidth && viewports.map.get('sm'),
+      flexDirection: reverseLevel[1] ? 'column-reverse' : 'column'
+    },
+    md: {
+      maxWidth: limitWidth && viewports.map.get('md'),
+      flexDirection: reverseLevel[2] ? 'column-reverse' : 'column'
+    },
+    lg: {
+      maxWidth: limitWidth && viewports.map.get('lg'),
+      flexDirection: reverseLevel[3] ? 'column-reverse' : 'column'
+    },
+    xl: {
+      maxWidth: limitWidth && viewports.map.get('xl'),
+      flexDirection: reverseLevel[4] ? 'column-reverse' : 'column'
+    }
+  });
+  const {
+    ids,
+    styles
+  } = StyleSheet.create({
+    flexgrid: {
+      flexWrap: 'wrap',
+      width: outsideGutter ? '100%' : 'auto',
+      marginVertical: 0,
+      marginHorizontal: outsideGutter ? 'auto' : -16,
+      ...mediaQueryStyles
+    }
+  });
   const props = {
     accessibilityRole,
     ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
@@ -67,23 +72,15 @@ const FlexGrid = /*#__PURE__*/forwardRef((_ref, ref) => {
     children: /*#__PURE__*/_jsx(BaseView, {
       ref: ref,
       ...props,
-      style: [styles.grid, {
-        marginHorizontal,
-        marginVertical,
-        width,
-        flexDirection,
-        maxWidth
-      }],
+      style: [styles.flexgrid],
+      dataSet: {
+        media: ids.flexgrid
+      },
       children: children
     })
   });
 });
 FlexGrid.displayName = 'FlexGrid';
-const styles = StyleSheet.create({
-  grid: {
-    flexWrap: 'wrap'
-  }
-});
 FlexGrid.propTypes = {
   ...selectedSystemPropTypes,
   /**

package/lib-module/FlexGrid/Row/Row.js

@@ -1,10 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import { viewports } from '@telus-uds/system-constants';
-import { useViewport } from '../../ViewportProvider';
 import applyInheritance from '../helpers';
-import { BaseView } from '../../utils';
+import { BaseView, StyleSheet, createMediaQueryStyles } from '../../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const horizontalAlignStyles = horizontalAlign => {
   switch (horizontalAlign) {
@@ -72,55 +69,57 @@ const Row = /*#__PURE__*/forwardRef((_ref, ref) => {
     children,
     ...rest
   } = _ref;
-  const viewPort = useViewport();
   const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
-  let flexDirection = '';
-  let flexWrap = '';
-  if (viewPort === viewports.xs) {
-    flexDirection = reverseLevel[0] ? 'row-reverse' : 'row';
-    flexWrap = reverseLevel[0] ? 'wrap-reverse' : 'wrap';
-  }
-  if (viewPort === viewports.sm) {
-    flexDirection = reverseLevel[1] ? 'row-reverse' : 'row';
-    flexWrap = reverseLevel[1] ? 'wrap-reverse' : 'wrap';
-  }
-  if (viewPort === viewports.md) {
-    flexDirection = reverseLevel[2] ? 'row-reverse' : 'row';
-    flexWrap = reverseLevel[2] ? 'wrap-reverse' : 'wrap';
-  }
-  if (viewPort === viewports.lg) {
-    flexDirection = reverseLevel[3] ? 'row-reverse' : 'row';
-    flexWrap = reverseLevel[3] ? 'wrap-reverse' : 'wrap';
-  }
-  if (viewPort === viewports.xl) {
-    flexDirection = reverseLevel[4] ? 'row-reverse' : 'row';
-    flexWrap = reverseLevel[4] ? 'wrap-reverse' : 'wrap';
-  }
+  const mediaQueryStyles = createMediaQueryStyles({
+    xs: {
+      flexDirection: reverseLevel[0] ? 'row-reverse' : 'row',
+      flexWrap: reverseLevel[0] ? 'wrap-reverse' : 'wrap'
+    },
+    sm: {
+      flexDirection: reverseLevel[1] ? 'row-reverse' : 'row',
+      flexWrap: reverseLevel[1] ? 'wrap-reverse' : 'wrap'
+    },
+    md: {
+      flexDirection: reverseLevel[2] ? 'row-reverse' : 'row',
+      flexWrap: reverseLevel[2] ? 'wrap-reverse' : 'wrap'
+    },
+    lg: {
+      flexDirection: reverseLevel[3] ? 'row-reverse' : 'row',
+      flexWrap: reverseLevel[3] ? 'wrap-reverse' : 'wrap'
+    },
+    xl: {
+      flexDirection: reverseLevel[4] ? 'row-reverse' : 'row',
+      flexWrap: reverseLevel[4] ? 'wrap-reverse' : 'wrap'
+    }
+  });
+  const {
+    ids,
+    styles
+  } = StyleSheet.create({
+    row: {
+      width: '100%',
+      marginVertical: 0,
+      marginHorizontal: 'auto',
+      flexGrow: 0,
+      flexShrink: 1,
+      flexBasis: 'auto',
+      ...horizontalAlignStyles(horizontalAlign),
+      ...verticalAlignStyles(verticalAlign),
+      ...distributeStyles(distribute),
+      ...mediaQueryStyles
+    }
+  });
   return /*#__PURE__*/_jsx(BaseView, {
     ref: ref,
     ...rest,
-    style: [styles.row, {
-      flexDirection,
-      flexWrap,
-      ...horizontalAlignStyles(horizontalAlign),
-      ...verticalAlignStyles(verticalAlign),
-      ...distributeStyles(distribute)
-    }],
+    style: [styles.row],
+    dataSet: {
+      media: ids.row
+    },
     children: children
   });
 });
 Row.displayName = 'Row';
-const styles = StyleSheet.create({
-  row: {
-    width: '100%',
-    marginVertical: 0,
-    marginHorizontal: 'auto',
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 'auto',
-    flexDirection: 'row'
-  }
-});
 Row.propTypes = {
   /**
    * Align columns horizontally within their row.

package/lib-module/Icon/IconText.js

@@ -16,7 +16,7 @@ import { spacingProps } from '../utils';
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 const IconText = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var _iconProps$tokens;
+  var _iconProps$tokens, _iconProps$tokens2;
   let {
     space,
     iconPosition = 'left',
@@ -34,6 +34,13 @@ const IconText = /*#__PURE__*/forwardRef((_ref, ref) => {
   // Inline images on Android are always baseline-aligned which makes them look misaligned - offset it.
   // See abandoned issue https://github.com/facebook/react-native/issues/6529
   const size = (iconProps === null || iconProps === void 0 ? void 0 : (_iconProps$tokens = iconProps.tokens) === null || _iconProps$tokens === void 0 ? void 0 : _iconProps$tokens.size) ?? 0;
+  const valueTranslateY = iconProps === null || iconProps === void 0 ? void 0 : (_iconProps$tokens2 = iconProps.tokens) === null || _iconProps$tokens2 === void 0 ? void 0 : _iconProps$tokens2.translateY;
+  /**
+   * These calculations were carried out using a set of linear equations to calculate that the
+   * position of the icon "->"" is aligned to the first line of the tooltip text on IOS and Android.
+   * The issue was mainly on IOS, the translateY style didn't match with the old calculations.
+   */
+  const resultY = valueTranslateY ? Math.floor(-1 * (valueTranslateY - 4)) : 0;
   const iconAdjustedAndriod = /*#__PURE__*/_jsx(View, {
     style: {
       transform: [{
@@ -45,7 +52,7 @@ const IconText = /*#__PURE__*/forwardRef((_ref, ref) => {
   const iconAdjustedIOS = /*#__PURE__*/_jsx(View, {
     style: {
       transform: [{
-        translateY: size * 0.01
+        translateY: valueTranslateY ? resultY : size * 0.01
       }]
     },
     children: iconContent

package/lib-module/Link/LinkBase.js

@@ -91,13 +91,20 @@ const selectIconTokens = _ref5 => {
   let {
     color,
     iconSize,
-    iconTranslateX,
-    iconTranslateY
+    blockFontSize,
+    iconTranslateX
   } = _ref5;
+  /**
+   * These calculations were carried out using a set of linear equations to calculate that the
+   * position of the icon "->"" is aligned to the first line of the tooltip text.
+   * The base equation is: X/4 + Y/4 - 4 - |X - Y| = Z
+   * where X = blockFontSize, Y = iconSize and Z = translateY
+   */
+  const translateY = blockFontSize / 4 + iconSize / 4 - 4 - Math.abs(iconSize - blockFontSize);
   return {
     color,
     translateX: iconTranslateX,
-    translateY: iconTranslateY,
+    translateY: translateY < 0 ? 0 : translateY,
     size: iconSize
   };
 };

package/lib-module/utils/index.js

@@ -4,6 +4,7 @@ export * from './children';
 export * from './input';
 export * from './pressability';
 export * from './props';
+export * from './ssr-media-query';
 export { default as info } from './info';
 export { default as useCopy } from './useCopy';
 export { default as useHash } from './useHash';

package/lib-module/utils/ssr-media-query/create-stylesheet.js

@@ -0,0 +1,68 @@
+import mediaQuery from 'css-mediaquery';
+import Dimensions from "react-native-web/dist/exports/Dimensions";
+import Platform from "react-native-web/dist/exports/Platform";
+import { addCss } from './utils/inject';
+import createDeclarationBlock from './utils/create-declaration-block';
+import hash from './hash';
+import { isMediaOrPseudo, isMedia, deepClone, createCssRule } from './utils/common';
+const createStyleSheet = stylesWithQuery => {
+  if (!stylesWithQuery) return {
+    ids: {},
+    styles: {},
+    fullStyles: {}
+  };
+  let cleanStyles;
+  let ids = {};
+  Object.keys(stylesWithQuery).forEach(key => {
+    if (!(stylesWithQuery !== null && stylesWithQuery !== void 0 && stylesWithQuery[key])) return;
+    const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(isMediaOrPseudo);
+    if (Platform.OS === 'web') {
+      cleanStyles = deepClone(stylesWithQuery);
+      mediaQueriesAndPseudoClasses.forEach(query => {
+        var _ids;
+        const css = createDeclarationBlock(stylesWithQuery[key][query]);
+        const stringHash = `rnmq-${hash(`${key}${query}${css}`)}`;
+        const rule = createCssRule(query, stringHash, css);
+        addCss(`${stringHash}`, rule);
+        delete cleanStyles[key][query];
+        ids = {
+          ...ids,
+          [key]: `${(_ids = ids) !== null && _ids !== void 0 && _ids[key] ? `${ids[key]} ` : ''}${stringHash}`
+        };
+      });
+    } else {
+      cleanStyles = JSON.parse(JSON.stringify(stylesWithQuery));
+      mediaQueriesAndPseudoClasses.forEach(str => {
+        if (isMedia(str)) {
+          const mqStr = str.replace('@media', '');
+          const {
+            width,
+            height
+          } = Dimensions.get('window');
+          const isMatchingMediaQuery = mediaQuery.match(mqStr, {
+            width,
+            height,
+            orientation: width > height ? 'landscape' : 'portrait',
+            'aspect-ratio': width / height
+          });
+          if (isMatchingMediaQuery) {
+            cleanStyles = {
+              ...cleanStyles,
+              [key]: {
+                ...cleanStyles[key],
+                ...stylesWithQuery[key][str]
+              }
+            };
+          }
+        }
+        delete cleanStyles[key][str];
+      });
+    }
+  });
+  return {
+    ids,
+    styles: cleanStyles,
+    fullStyles: stylesWithQuery
+  };
+};
+export default createStyleSheet;

package/lib-module/utils/ssr-media-query/hash.js

@@ -0,0 +1,13 @@
+/* eslint-disable no-bitwise */
+export default function hash(text) {
+  if (!text) {
+    return '';
+  }
+  let hashValue = 5381;
+  let index = text.length - 1;
+  while (index) {
+    hashValue = hashValue * 33 ^ text.charCodeAt(index);
+    index -= 1;
+  }
+  return (hashValue >>> 0).toString(16);
+}

package/lib-module/utils/ssr-media-query/index.js

@@ -0,0 +1,6 @@
+import createStyleSheet from './create-stylesheet';
+import createMediaQueryStyles from './utils/create-media-query-styles';
+const StyleSheet = {
+  create: createStyleSheet
+};
+export { StyleSheet, createMediaQueryStyles };

package/lib-module/utils/ssr-media-query/utils/common.js

@@ -0,0 +1,15 @@
+const isMedia = query => query.indexOf('@media') === 0;
+const isPseudo = query => query.indexOf(':') === 0;
+const isMediaOrPseudo = query => isMedia(query) || isPseudo(query);
+const deepClone = obj => JSON.parse(JSON.stringify(obj));
+const createCssRule = (query, stringHash, css) => {
+  let rule;
+  const dataMediaSelector = `[data-media~="${stringHash}"]`;
+  if (isMedia(query)) {
+    rule = `${query} {${dataMediaSelector} ${css}}`;
+  } else {
+    rule = `${dataMediaSelector}${query} ${css}`;
+  }
+  return rule;
+};
+export { isMedia, isPseudo, isMediaOrPseudo, deepClone, createCssRule };

package/lib-module/utils/ssr-media-query/utils/create-declaration-block.js

@@ -0,0 +1,16 @@
+import createReactDOMStyle from 'react-native-web/dist/cjs/exports/StyleSheet/compiler/createReactDOMStyle';
+import prefixStyles from 'react-native-web/dist/cjs/modules/prefixStyles';
+import hyphenateStyleName from './hyphenate-style-name';
+const createDeclarationBlock = style => {
+  const domStyle = prefixStyles(createReactDOMStyle(style));
+  const declarationsString = Object.keys(domStyle).map(property => {
+    const value = domStyle[property];
+    const prop = hyphenateStyleName(property);
+    if (Array.isArray(value)) {
+      return value.map(v => `${prop}:${v}`).join(';');
+    }
+    return `${prop}:${value} !important`;
+  }).sort().join(';');
+  return `{${declarationsString};}`;
+};
+export default createDeclarationBlock;

package/lib-module/utils/ssr-media-query/utils/create-media-query-styles.js

@@ -0,0 +1,30 @@
+import { viewports } from '@telus-uds/system-constants';
+
+/**
+ * @typedef { Object } CssStyles
+ * @typedef { Record<"xs" | "sm" | "md" | "lg" | "xl", CssStyles> } ViewportStyles
+ * @typedef { Record<String, CssStyles> } MediaQueryStyles
+ */
+
+/**
+ * Generates media query styles based on specified viewport styles.
+ * @param {ViewportStyles} viewportStyles
+ * @returns { MediaQueryStyles }
+ */
+
+function createMediaQueryStyles(viewportStyles) {
+  const viewportsArray = Object.keys(viewportStyles);
+  const mediaQueries = Object.entries(viewportStyles).reduce((acc, _ref) => {
+    let [viewport, styles] = _ref;
+    const minWidth = viewports.map.get(viewport);
+    const nextViewport = viewportsArray[viewportsArray.indexOf(viewport) + 1];
+    const maxWidth = viewports.map.get(nextViewport);
+    const mediaQuery = `@media (min-width: ${minWidth}px)${maxWidth ? ` and (max-width: ${maxWidth}px)` : ''}`;
+    return {
+      ...acc,
+      [mediaQuery]: styles
+    };
+  }, {});
+  return mediaQueries;
+}
+export default createMediaQueryStyles;

package/lib-module/utils/ssr-media-query/utils/hyphenate-style-name.js

@@ -0,0 +1,12 @@
+const uppercasePattern = /[A-Z]/g;
+const msPattern = /^ms-/;
+const cache = {};
+const toHyphenLower = match => `-${match.toLowerCase()}`;
+const hyphenateStyleName = name => {
+  if (Object.prototype.hasOwnProperty.call(cache, name)) {
+    return cache[name];
+  }
+  const hName = name.replace(uppercasePattern, toHyphenLower);
+  return cache[name] === msPattern.test(hName) ? `-${hName}` : hName;
+};
+export default hyphenateStyleName;

package/lib-module/utils/ssr-media-query/utils/inject.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
+const rules = {};
+let styleSheet;
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  styleSheet = (() => {
+    const style = document.createElement('style');
+    style.id = 'RNMQCSS';
+    style.appendChild(document.createTextNode(''));
+    document.head.appendChild(style);
+    return style.sheet;
+  })();
+}
+export const hasCss = (id, text) => {
+  var _rules$id$text, _rules$id$text$includ;
+  return !!rules[id] && !!((_rules$id$text = rules[id].text) !== null && _rules$id$text !== void 0 && (_rules$id$text$includ = _rules$id$text.includes) !== null && _rules$id$text$includ !== void 0 && _rules$id$text$includ.call(_rules$id$text, text));
+};
+export const addCss = (id, text) => {
+  if (!hasCss(id, text)) {
+    var _rules$id;
+    rules[id] = (rules === null || rules === void 0 ? void 0 : rules[id]) || {};
+    rules[id].text = (((_rules$id = rules[id]) === null || _rules$id === void 0 ? void 0 : _rules$id.text) || '') + text;
+    if (styleSheet) {
+      styleSheet.insertRule(text, Object.keys(rules).length - 1);
+    }
+  }
+};
+export const flush = () => {
+  if (Platform.OS === 'web') {
+    return /*#__PURE__*/React.createElement('style', {
+      id: 'rnmq',
+      key: 'rnmq',
+      dangerouslySetInnerHTML: {
+        __html: Object.keys(rules).map(key => rules[key].text).join('\n')
+      }
+    });
+  }
+  return {};
+};

package/lib-module/utils/ssr.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import AppRegistry from "react-native-web/dist/exports/AppRegistry";
+import { flush } from './ssr-media-query/utils/inject';
 /** @typedef {import('react').ComponentType} ReactComponent */
 /** @typedef {import('react').ReactElement} ReactElement */
+
 /**
  * Returns object with `renderApp` and `getStyles` functions.
  * Weave these into your app's server-side render process:
@@ -94,7 +96,7 @@ export const ssrStyles = function () {
       for (var _len = arguments.length, existingStyles = new Array(_len), _key = 0; _key < _len; _key++) {
         existingStyles[_key] = arguments[_key];
       }
-      return [...existingStyles, ...styleGetters.flatMap(getter => getter())];
+      return [...existingStyles, ...styleGetters.flatMap(getter => getter()), flush()];
     }
   };
 };

package/package.json

@@ -11,8 +11,9 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.46.0",
+    "@telus-uds/system-theme-tokens": "^2.47.0",
     "airbnb-prop-types": "^2.16.0",
+    "css-mediaquery": "^0.1.2",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "lodash.throttle": "^4.1.1",
@@ -73,5 +74,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.69.0"
+  "version": "1.71.0"
 }

package/src/Autocomplete/Autocomplete.jsx

@@ -241,31 +241,24 @@ const Autocomplete = forwardRef(
     }, [nestedSelectedValue, items])
 
     const handleClose = (event) => {
-      if (event.type === 'keydown') {
-        if (event.key === 'Escape' || event.key === 27) {
-          setIsExpanded(false)
-          setNestedSelectedValue(null)
-        } else if (event.key === 'ArrowDown' && isExpanded && !isLoading && targetRef?.current) {
-          targetRef.current.focus()
-        }
-      } else if (
-        event.type === 'click' &&
-        openOverlayRef?.current &&
-        event.target &&
-        !openOverlayRef?.current?.contains(event.target)
+      if (
+        (event.type === 'keydown' && (event.key === 'Escape' || event.key === '27')) ||
+        (event.type === 'click' && !openOverlayRef?.current?.contains(event.target)) ||
+        (event.type === 'touchstart' &&
+          openOverlayRef?.current &&
+          event.touches[0].target &&
+          !openOverlayRef?.current?.contains(event.touches[0].target))
       ) {
         setIsExpanded(false)
+        setNestedSelectedValue(null)
       } else if (
-        event.type === 'touchstart' &&
-        openOverlayRef?.current &&
-        event.touches[0].target &&
-        !openOverlayRef?.current?.contains(event.touches[0].target)
+        event.type === 'keydown' &&
+        event.key === 'ArrowDown' &&
+        isExpanded &&
+        !isLoading &&
+        targetRef?.current
       ) {
-        setIsExpanded(false)
-      } else if (Platform.OS === 'web') {
-        // needed for dropdown to be collapsed when clicking outside on web
-        setIsExpanded(false)
-        setNestedSelectedValue(null)
+        targetRef.current.focus()
       }
     }
     const itemsToShow = currentValue