@telus-uds/components-base 0.0.2-prerelease.5 → 0.0.2-prerelease.9

package/lib/Tooltip/dictionary.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  en: {
+    a11yText: 'Reveal additional information.'
+  },
+  fr: {
+    a11yText: 'Afficher des renseignements supplémentaires.'
+  }
+};
+exports.default = _default;

package/lib/Tooltip/getTooltipPosition.js

@@ -0,0 +1,172 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+function normalizePosition(position) {
+  const {
+    left,
+    right,
+    bottom,
+    top,
+    width,
+    ...rest
+  } = position; // adjust the coordinates so that it fits within the window
+
+  const normalized = {
+    left: Math.max(0, left),
+    right: Math.max(0, right),
+    top: Math.max(0, top),
+    bottom // since it's ok the make the document grow downwards - no need to normalize here
+
+  };
+
+  const getAbsoluteDiff = (value1, value2) => Math.abs(Math.abs(value1) - Math.abs(value2)); // adjust the width by whatever has been subtracted from left or right
+
+
+  normalized.width = width - Math.abs(getAbsoluteDiff(left, normalized.left) - getAbsoluteDiff(right, normalized.right));
+
+  if (normalized.top !== top) {
+    normalized.bottom += normalized.top - top;
+  }
+
+  const isNormalized = normalized.right !== right || normalized.left !== left || normalized.top !== top;
+  return { ...normalized,
+    ...rest,
+    isNormalized
+  };
+}
+
+function invertPosition(position) {
+  switch (position) {
+    case 'above':
+      return 'below';
+
+    case 'below':
+      return 'above';
+
+    case 'left':
+      return 'right';
+
+    default:
+      return 'left';
+  }
+}
+
+function findRectByPosition(position, rectsArray) {
+  return rectsArray.find(({
+    position: rectPosition
+  }) => rectPosition === position);
+}
+/**
+ * Used for absolute positioning of the tooltip. Since the tooltip is always centered relatively
+ * to the control (button) and we have a limited set of positions, an easy and consistent way
+ * of positioning it is to check all of the possible positions and pick one that will be rendered
+ * within the window bounds. This way we can also rely on the tooltip being actually rendered
+ * before it is shown, which makes it account for the width being limiting in styles, custom font
+ * rendering, etc.
+ */
+
+
+function getTooltipPosition(position, {
+  controlLayout,
+  tooltipDimensions,
+  windowDimensions,
+  arrowWidth = 0,
+  arrowOffset = 0
+}) {
+  const {
+    width: controlWidth,
+    height: controlHeight,
+    x: controlX,
+    y: controlY
+  } = controlLayout;
+  const {
+    width: tooltipWidth,
+    height: tooltipHeight
+  } = tooltipDimensions;
+  const {
+    width: windowWidth,
+    height: windowHeight
+  } = windowDimensions;
+  const arrowSize = arrowWidth / 2 + arrowOffset;
+  const horizontalBounds = {
+    left: controlX + controlWidth / 2 - tooltipWidth / 2,
+    right: windowWidth - (controlX + controlWidth / 2 + tooltipWidth / 2)
+  };
+  const verticalBounds = {
+    top: controlY + controlHeight / 2 - tooltipHeight / 2,
+    bottom: windowHeight - (controlY + controlHeight / 2 + tooltipHeight / 2)
+  }; // calculate absolute coordinates for each of the potential positions (relative to window)
+
+  const boundingRects = [{
+    position: 'above',
+    ...horizontalBounds,
+    top: controlY - tooltipHeight - arrowSize,
+    bottom: windowHeight - (controlY - arrowSize)
+  }, {
+    position: 'right',
+    ...verticalBounds,
+    left: controlX + controlWidth + arrowSize,
+    right: windowWidth - (controlX + controlWidth + tooltipWidth + arrowSize)
+  }, {
+    position: 'below',
+    ...horizontalBounds,
+    top: controlY + controlHeight + arrowSize,
+    bottom: windowHeight - (controlY + controlHeight + tooltipHeight + arrowSize)
+  }, {
+    position: 'left',
+    ...verticalBounds,
+    left: controlX - tooltipWidth - arrowSize,
+    right: windowWidth - (controlX - arrowSize)
+  }].map(rect => {
+    // an absolute value representing how much of the tooltip is overflowing the window on each side
+    const windowOverflow = Math.abs(Math.min(rect.top, 0) - Math.min(rect.left, 0) - Math.min(rect.right, 0) - Math.min(rect.bottom, 0));
+    return { ...rect,
+      ...tooltipDimensions,
+      overflow: windowOverflow,
+      isNormalized: false
+    };
+  }); // the 'position' prop overrides the automatic positioning
+
+  if (position !== 'auto') {
+    let rect = findRectByPosition(position, boundingRects); // check if the suggested 'position' fits in window
+
+    if (rect.overflow === 0) {
+      return rect;
+    } // otherwise try the inverted position (e.g. left -> right)
+
+
+    rect = findRectByPosition(invertPosition(position), boundingRects);
+
+    if (rect.overflow === 0) {
+      return rect;
+    }
+  }
+
+  const inWindow = boundingRects.filter(({
+    overflow
+  }) => overflow === 0); // pick the first position that fits in window
+  // (these are sorted clockwise which makes them show where one would expect them to be)
+
+  if (inWindow.length > 0) {
+    return inWindow[0];
+  } // if all positions would end up being out of window bounds, let's pick the one that is
+  // the least overflowing and normalize its position to fit within window bounds
+
+
+  boundingRects.sort(({
+    overflow: overflowA
+  }, {
+    overflow: overflowB
+  }) => overflowA - overflowB);
+  const leastOverflowing = boundingRects[0]; // prefer 'below' over 'above', since we can always expand the document downwards,
+  // and 'above' might cause issues on small viewports with large tooltips
+
+  return normalizePosition(leastOverflowing.position === 'above' ? findRectByPosition('below', boundingRects) : leastOverflowing);
+}
+
+var _default = getTooltipPosition;
+exports.default = _default;

package/lib/Tooltip/index.js

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

package/lib/TooltipButton/TooltipButton.js

@@ -0,0 +1,83 @@
+"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 _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const selectInnerContainerStyles = ({
+  borderRadius,
+  width
+}) => ({
+  borderRadius,
+  width
+});
+
+const selectIconTokens = ({
+  iconSize,
+  iconColor
+  /* iconScale = 1 */
+
+}) => ({
+  size: iconSize,
+  color: iconColor // scale: iconScale TODO re-enable with icon component
+
+});
+/**
+ * `TooltipButton` is a helper component used as a default control for the `Tooltip` component.
+ * In fact though, it isn't actually a pressable - it's meant to be used as pressable's content.
+ * Due to this any interaction states (e.g. pressed, hover, etc.) has to be passed down to it as a prop.
+ */
+
+
+const TooltipButton = ({
+  pressableState,
+  tokens,
+  variant
+}) => {
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('TooltipButton', tokens, variant, pressableState);
+  const {
+    icon: IconComponent
+  } = themeTokens;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: (0, _ThemeProvider.applyOuterBorder)(themeTokens),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: selectInnerContainerStyles(themeTokens),
+      children: IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        icon: IconComponent,
+        tokens: selectIconTokens(themeTokens)
+      })
+    })
+  });
+};
+
+TooltipButton.propTypes = {
+  /**
+   * Used as appearances when resolving theme tokens.
+   */
+  pressableState: _propTypes.default.shape({
+    pressed: _propTypes.default.bool,
+    hover: _propTypes.default.bool,
+    focus: _propTypes.default.bool
+  }),
+  tokens: (0, _utils.getTokensPropType)('TooltipButton'),
+  variant: _utils.variantProp.propType
+};
+var _default = TooltipButton;
+exports.default = _default;

package/lib/TooltipButton/index.js

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

package/lib/Typography/Typography.js

@@ -1,34 +1,38 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Platform, Text, View } from 'react-native';
-import { useThemeTokens } from '../ThemeProvider';
-import { useViewport } from '../ViewportProvider';
-import { applyTextStyles } from '../ThemeProvider/utils';
-import { a11yProps, variantProp, getTokensPropType } from '../utils/propTypes';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _ViewportProvider = require("../ViewportProvider");
+
+var _utils = require("../ThemeProvider/utils");
+
+var _utils2 = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /**
  * If passed a string like 'h1', 'h2' etc, returns the heading number as a string,
  * else returns false
  */
-
 function getHeadingLevel(heading) {
   const match = typeof heading === 'string' && heading.match(/^h(\d)$/);
   return match && match[1];
 }
-/**
- * Enforces `fontScaleCap` theme tokens as the maximum font size text can become
- * after iOS or Android font scaling, to give consistent accessible maximum sizes
- * that don't make the content unusable
- */
-
-
-function getMaxFontMultiplier({
-  fontSize,
-  fontScaleCap
-}) {
-  if (!fontScaleCap || !fontSize) return undefined;
-  if (fontScaleCap <= fontSize) return 1;
-  return fontScaleCap / fontSize;
-}
 
 const selectTextStyles = ({
   fontWeight,
@@ -37,15 +41,17 @@ const selectTextStyles = ({
   lineHeight,
   fontName,
   textAlign,
-  textTransform
-}) => applyTextStyles({
+  textTransform,
+  letterSpacing
+}) => (0, _utils.applyTextStyles)({
   fontWeight,
   fontSize,
   color,
   lineHeight,
   fontName,
   textAlign,
-  textTransform
+  textTransform,
+  letterSpacing
 }); // General-purpose flexible theme-neutral base component for text
 
 
@@ -59,49 +65,58 @@ const Typography = ({
   tokens,
   ...rest
 }) => {
-  const viewport = useViewport();
-  const themeTokens = useThemeTokens('Typography', tokens, variant, {
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Typography', tokens, variant, {
     viewport
   });
   const textProps = {
     style: selectTextStyles(align ? { ...themeTokens,
       textAlign: align
-    } : themeTokens)
+    } : themeTokens),
+    maxFontSizeMultiplier: (0, _utils2.getMaxFontMultiplier)(themeTokens)
   };
-  if (Platform.OS !== 'web') textProps.maxFontSizeMultiplier = getMaxFontMultiplier(themeTokens);
   const headingLevel = getHeadingLevel(heading);
-  const a11y = { ...a11yProps.select(rest),
+  const a11y = { ..._utils2.a11yProps.select(rest),
     accessibilityRole,
-    // On React Native Web, `aria-level` controls which heading tag (h1, h2 etc) is used.
-    // Must be hyphenated, not camel case; `accessibilityLevel` only works on RNW >=0.15.1
-    [headingLevel && 'aria-level']: headingLevel
+    // On React Native Web, `accessibilityLevel` controls which heading tag (h1, h2 etc) is used.
+    ...(headingLevel && {
+      accessibilityLevel: headingLevel
+    })
   };
-  return block ? /*#__PURE__*/React.createElement(View, a11y, /*#__PURE__*/React.createElement(Text, textProps, children)) : /*#__PURE__*/React.createElement(Text, Object.assign({}, textProps, a11y), children);
+  return block ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...a11y,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, { ...textProps,
+      children: children
+    })
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, { ...textProps,
+    ...a11y,
+    children: children
+  });
 };
 
-Typography.propTypes = { ...a11yProps.types,
-  tokens: getTokensPropType('Typography'),
-  variant: variantProp.propType,
+Typography.propTypes = { ..._utils2.a11yProps.types,
+  tokens: (0, _utils2.getTokensPropType)('Typography'),
+  variant: _utils2.variantProp.propType,
 
   /**
    * If truthy, will render a heading; if a html heading tag is provided, uses that tag on Web
    */
-  heading: PropTypes.oneOf([true, 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+  heading: _propTypes.default.oneOf([true, 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
 
   /**
    * If true, forces the element to behave as a View block even if nested in other text
    */
-  block: PropTypes.bool,
+  block: _propTypes.default.bool,
 
   /**
    * Works the same as css text-align, note that RN doesn't support "start" or "end" (see https://reactnative.dev/docs/text-style-props#textalign)
    * Justify is known to make text harder to read, especially for people with dyslexia (see https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#accessibility_concerns)
    */
-  align: PropTypes.oneOf(['auto', 'left', 'right', 'center', 'justify']),
+  align: _propTypes.default.oneOf(['auto', 'left', 'right', 'center', 'justify']),
 
   /**
    * Same children allowed as a React Native <Text> node
    */
-  children: PropTypes.node
+  children: _propTypes.default.node
 };
-export default Typography;
+var _default = Typography;
+exports.default = _default;

package/lib/Typography/index.js

@@ -1,2 +1,13 @@
-import Typography from './Typography';
-export default Typography;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Typography = _interopRequireDefault(require("./Typography"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _Typography.default;
+exports.default = _default;

package/lib/ViewportProvider/ViewportProvider.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _systemConstants = require("@telus-uds/system-constants");
+
+var _useViewport = require("./useViewport");
+
+var _useViewportListener = _interopRequireDefault(require("./useViewportListener"));
+
+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); }
+
+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; }
+
+/**
+ * Provides an up-to-date viewport value from system-constants, available via the `useViewport` hook
+ */
+const ViewportProvider = ({
+  children
+}) => {
+  // Default to the smallest viewport for mobile-first SSR. On client side, this is updated
+  // by useViewportListener in a layout effect before anything is shown to the user.
+  const [viewport, setViewport] = (0, _react.useState)(_systemConstants.viewports.keys[0]);
+  (0, _useViewportListener.default)(setViewport);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_useViewport.ViewportContext.Provider, {
+    value: viewport,
+    children: children
+  });
+};
+
+ViewportProvider.propTypes = {
+  children: _propTypes.default.node.isRequired
+};
+var _default = ViewportProvider;
+exports.default = _default;

package/lib/ViewportProvider/index.js

@@ -1,44 +1,28 @@
-import React, { createContext, useState, useEffect, useContext } from 'react';
-import PropTypes from 'prop-types';
-import { Dimensions } from 'react-native';
-import { viewports } from '@telus-uds/system-constants'; // we are using Dimensions instead of useWindowDimensions
-// that's because useWindowDimensions forces context to update on
-// every pixel change on the browser, therefore we used Dimension to only enforce
-// context update on viewport changes
+"use strict";
 
-const lookupViewport = () => viewports.select(Dimensions.get('window').width);
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
 
-export const ViewportContext = /*#__PURE__*/createContext({});
-/**
- * Provides an up-to-date viewport value from system-constants, available via the `useViewport` hook
- */
+var _ViewportProvider = _interopRequireDefault(require("./ViewportProvider"));
 
-const ViewportProvider = ({
-  children
-}) => {
-  // initialize with a function so we don't re-execute on each render
-  const [viewport, setViewport] = useState(lookupViewport);
-  useEffect(() => {
-    const onChange = ({
-      window
-    }) => setViewport(viewports.select(window.width));
+var _useViewport = require("./useViewport");
 
-    Dimensions.addEventListener('change', onChange); // We might have missed an update between calling `get` in render and
-    // `addEventListener` in this handler, so we set it here. If there was
-    // no change, React will filter out this update as a no-op.
+Object.keys(_useViewport).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useViewport[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useViewport[key];
+    }
+  });
+});
 
-    setViewport(lookupViewport());
-    return () => {
-      Dimensions.removeEventListener('change', onChange);
-    };
-  }, []);
-  return /*#__PURE__*/React.createElement(ViewportContext.Provider, {
-    value: viewport
-  }, children);
-};
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-ViewportProvider.propTypes = {
-  children: PropTypes.node.isRequired
-};
-export default ViewportProvider;
-export const useViewport = () => useContext(ViewportContext);
+var _default = _ViewportProvider.default;
+exports.default = _default;

package/lib/ViewportProvider/useViewport.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useViewport = exports.ViewportContext = void 0;
+
+var _react = require("react");
+
+const ViewportContext = /*#__PURE__*/(0, _react.createContext)({});
+exports.ViewportContext = ViewportContext;
+
+const useViewport = () => (0, _react.useContext)(ViewportContext);
+
+exports.useViewport = useViewport;

package/lib/ViewportProvider/useViewportListener.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
+
+var _systemConstants = require("@telus-uds/system-constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Use Dimensions instead of useWindowDimensions because useWindowDimensions forces context
+// to update on every pixel change during window resize; but we only want rerenders to occur
+// when a viewport threshold has been crossed.
+const lookupViewport = () => _systemConstants.viewports.select(_Dimensions.default.get('window').width);
+/**
+ * In SSR, React gets spooked if it sees `useLayoutEffect` and fires warnings assuming the
+ * developer doesn't realise the effect won't run: https://reactjs.org/link/uselayouteffect-ssr
+ *
+ * To avoid these warnings while still conforming to the rules of hooks, always use this
+ * explicitly no-op hook, instead of the useLayoutEffect that is implicitly no-op on SSR.
+ */
+
+
+const useViewportListenerSSR = () => {};
+/**
+ * When client-side rendering, immediately set the viewport to the correct value as a layout effect so
+ * if the viewport isn't the smallest, any SSR-rendered components rerender correctly before anything
+ * is shown to the user. Then bind events to update the viewport if it changes.
+ */
+
+
+const useViewportListenerCSR = setViewport => {
+  (0, _react.useLayoutEffect)(() => {
+    setViewport(lookupViewport());
+
+    const onChange = ({
+      window
+    }) => setViewport(_systemConstants.viewports.select(window.width));
+
+    const listener = _Dimensions.default.addEventListener('change', onChange); // From RN 0.65.0, Dimensions.removeEventListener is deprecated for `remove` on addEventListener return value;
+    // however, that is not available in RN <=0.64.X, therefore not in any Expo release as of 2021 (Expo SDK 43).
+
+
+    return (listener === null || listener === void 0 ? void 0 : listener.remove) || (() => _Dimensions.default.removeEventListener('change', onChange)); // setViewport is a function from `useState` so it is stable and won't make the effect re-run
+  }, [setViewport]);
+}; // Window is a defined global object in both Web and Native client-side, and undefined in SSR
+
+
+const isSSR = typeof window === 'undefined';
+const useViewportListener = isSSR ? useViewportListenerSSR : useViewportListenerCSR;
+var _default = useViewportListener;
+exports.default = _default;