@telus-uds/components-base 0.0.2-prerelease.6 → 1.0.0

package/lib/Tooltip/Backdrop.native.js

@@ -1,32 +1,56 @@
-import React from 'react';
-import { TouchableWithoutFeedback, Modal, StyleSheet, View } from 'react-native';
-import PropTypes from 'prop-types';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _TouchableWithoutFeedback = _interopRequireDefault(require("react-native-web/dist/cjs/exports/TouchableWithoutFeedback"));
+
+var _Modal = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Modal"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /**
  * The Native version of Backdrop utilizes React Native's Modal component for overlaying
  * the app's content, since this is the only reliable to do it. The only drawback of this
  * approach is that a press on the Backdrop will actually stop the press event from propagating,
  * i.e. anything rendered beneath the Backdrop can't be pressed until the Backdrop is closed.
  */
-
 function Backdrop({
   onPress,
   children
 }) {
-  return /*#__PURE__*/React.createElement(Modal, {
-    transparent: true
-  }, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
-    onPress: onPress
-  }, /*#__PURE__*/React.createElement(View, {
-    style: staticStyles.backdrop
-  }, children)));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
+    transparent: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TouchableWithoutFeedback.default, {
+      onPress: onPress,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: staticStyles.backdrop,
+        children: children
+      })
+    })
+  });
 }
 
-export default Backdrop;
+var _default = Backdrop;
+exports.default = _default;
 Backdrop.propTypes = {
-  onPress: PropTypes.func,
-  children: PropTypes.node
+  onPress: _propTypes.default.func,
+  children: _propTypes.default.node
 };
-const staticStyles = StyleSheet.create({
+
+const staticStyles = _StyleSheet.default.create({
   backdrop: {
     flexBasis: '100%',
     backgroundColor: 'rgba(255, 255, 255, 0.5)' // to visually mark that the content beneath is not pressable

package/lib/Tooltip/Tooltip.js

@@ -1,13 +1,47 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Dimensions, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
-import PropTypes from 'prop-types';
-import { applyShadowToken, applyTextStyles, useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, selectTokens, variantProp } from '../utils';
-import Backdrop from './Backdrop';
-import getTooltipPosition from './getTooltipPosition';
-import TooltipButton from '../TooltipButton';
-import useCopy from '../utils/useCopy';
-import dictionary from './dictionary';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+
+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 _Backdrop = _interopRequireDefault(require("./Backdrop"));
+
+var _getTooltipPosition = _interopRequireDefault(require("./getTooltipPosition"));
+
+var _TooltipButton = _interopRequireDefault(require("../TooltipButton"));
+
+var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
+
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+
+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; }
 
 const selectTooltipStyles = ({
   backgroundColor,
@@ -30,7 +64,7 @@ const selectTooltipShadowStyles = ({
   borderRadius
 }) => ({
   borderRadius,
-  ...applyShadowToken(shadow)
+  ...(0, _ThemeProvider.applyShadowToken)(shadow)
 });
 
 const selectTooltipPositionStyles = ({
@@ -99,17 +133,16 @@ const selectArrowStyles = ({
     height: rectangleSide,
     borderBottomRightRadius: arrowBorderRadius,
     // this corner will be the arrow tip after rotation
-    ...applyShadowToken(shadow),
+    ...(0, _ThemeProvider.applyShadowToken)(shadow),
     ...directionalStyles[position]
   };
 };
 
-const selectTextStyles = tokens => applyTextStyles(selectTokens('Typography', tokens));
+const selectTextStyles = tokens => (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', tokens));
 
-const defaultControl = (pressableState, variant) => /*#__PURE__*/React.createElement(TooltipButton, {
-  variant: { ...pressableState,
-    ...variant
-  }
+const defaultControl = (pressableState, variant) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipButton.default, {
+  pressableState: pressableState,
+  variant: variant
 });
 /**
  * Tooltip provides a descriptive and detailed explanation or instructions. It can be used next to an input label
@@ -128,36 +161,37 @@ const defaultControl = (pressableState, variant) => /*#__PURE__*/React.createEle
  */
 
 
-const Tooltip = ({
+const Tooltip = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   content,
   position = 'auto',
   copy = 'en',
   tokens,
   variant
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const controlRef = useRef();
-  const [controlLayout, setControlLayout] = useState(null);
-  const [tooltipDimensions, setTooltipDimensions] = useState(null);
-  const [windowDimensions, setWindowDimensions] = useState(Dimensions.get('window'));
-  const [tooltipPosition, setTooltipPosition] = useState(null);
-  const getCopy = useCopy({
-    dictionary,
+}, ref) => {
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const controlRef = (0, _react.useRef)();
+  const [controlLayout, setControlLayout] = (0, _react.useState)(null);
+  const [tooltipDimensions, setTooltipDimensions] = (0, _react.useState)(null);
+  const [windowDimensions, setWindowDimensions] = (0, _react.useState)(_Dimensions.default.get('window'));
+  const [tooltipPosition, setTooltipPosition] = (0, _react.useState)(null);
+  const getCopy = (0, _useCopy.default)({
+    dictionary: _dictionary.default,
     copy
   });
-  const themeTokens = useThemeTokens('Tooltip', tokens, variant);
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Tooltip', tokens, variant);
   const {
     arrowWidth,
     arrowOffset
   } = themeTokens;
-  useEffect(() => {
-    const subscription = Dimensions.addEventListener('change', ({
+  (0, _react.useEffect)(() => {
+    const subscription = _Dimensions.default.addEventListener('change', ({
       window
     }) => {
       setWindowDimensions(window);
     });
-    return () => subscription?.remove();
+
+    return () => subscription === null || subscription === void 0 ? void 0 : subscription.remove();
   });
 
   const toggleIsOpen = () => setIsOpen(!isOpen);
@@ -184,7 +218,7 @@ const Tooltip = ({
   }) => {
     if (tooltipDimensions === null || tooltipDimensions.width !== width || tooltipDimensions.height !== height) {
       setTooltipDimensions({
-        width: Platform.select({
+        width: _Platform.default.select({
           web: width + 0.3,
           // avoids often unnecessary line breaks due to subpixel rendering of fonts
           native: width
@@ -194,7 +228,7 @@ const Tooltip = ({
     }
   };
 
-  useEffect(() => {
+  (0, _react.useEffect)(() => {
     if (isOpen) {
       controlRef.current.measureInWindow((x, y, width, height) => {
         setControlLayout({
@@ -210,15 +244,15 @@ const Tooltip = ({
       setTooltipPosition(null);
     }
   }, [isOpen]);
-  useEffect(() => {
+  (0, _react.useEffect)(() => {
     setIsOpen(false);
   }, [windowDimensions]);
-  useEffect(() => {
-    if (tooltipPosition !== null && !tooltipPosition?.isNormalized || !isOpen || controlLayout === null || tooltipDimensions == null) {
+  (0, _react.useEffect)(() => {
+    if (tooltipPosition !== null && !(tooltipPosition !== null && tooltipPosition !== void 0 && tooltipPosition.isNormalized) || !isOpen || controlLayout === null || tooltipDimensions == null) {
       return;
     }
 
-    const updatedPosition = getTooltipPosition(position, {
+    const updatedPosition = (0, _getTooltipPosition.default)(position, {
       controlLayout,
       tooltipDimensions,
       windowDimensions,
@@ -226,14 +260,14 @@ const Tooltip = ({
       arrowOffset
     }); // avoid ending up in an infinite normalization loop
 
-    if (tooltipPosition?.isNormalized && updatedPosition.isNormalized) {
+    if (tooltipPosition !== null && tooltipPosition !== void 0 && tooltipPosition.isNormalized && updatedPosition.isNormalized) {
       return;
     }
 
     setTooltipPosition(updatedPosition);
   }, [isOpen, position, tooltipDimensions, controlLayout, windowDimensions, arrowWidth, arrowOffset, tooltipPosition]);
   const control = children !== undefined ? children : defaultControl;
-  const pressableStyles = control === defaultControl ? Platform.select({
+  const pressableStyles = control === defaultControl ? _Platform.default.select({
     web: {
       outline: 'none'
     }
@@ -244,59 +278,68 @@ const Tooltip = ({
     left: 10,
     right: 10
   } : undefined;
-  return /*#__PURE__*/React.createElement(View, {
-    style: staticStyles.container
-  }, /*#__PURE__*/React.createElement(Pressable, {
-    onPress: toggleIsOpen,
-    ref: controlRef,
-    onBlur: close,
-    style: pressableStyles,
-    hitSlop: pressableHitSlop,
-    accessibilityLabel: getCopy('a11yText'),
-    accessibilityRole: "button"
-  }, typeof control === 'function' ? pressableState => control(getPressableState(pressableState), variant) : control), isOpen && /*#__PURE__*/React.createElement(Backdrop, {
-    onPress: close
-  }, /*#__PURE__*/React.createElement(View, {
-    style: [staticStyles.tooltip, selectTooltipShadowStyles(themeTokens), // applied separately so that it doesn't cover the arrow
-    tooltipPosition && selectTooltipPositionStyles(tooltipPosition), (tooltipPosition === null || tooltipPosition?.isNormalized) && staticStyles.tooltipHidden // visually hide the tooltip until we have a final measurement
-    ],
-    onLayout: onTooltipLayout,
-    accessibilityRole: "alert"
-  }, /*#__PURE__*/React.createElement(View, {
-    style: [staticStyles.arrow, tooltipPosition && selectArrowStyles(themeTokens, tooltipPosition)]
-  }), /*#__PURE__*/React.createElement(View, {
-    style: selectTooltipStyles(themeTokens)
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: selectTextStyles(themeTokens)
-  }, content)))));
-};
-
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    style: staticStyles.container,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+      onPress: toggleIsOpen,
+      ref: controlRef,
+      onBlur: close,
+      style: pressableStyles,
+      hitSlop: pressableHitSlop,
+      accessibilityLabel: getCopy('a11yText'),
+      accessibilityRole: "button",
+      children: typeof control === 'function' ? pressableState => control(getPressableState(pressableState), variant) : control
+    }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Backdrop.default, {
+      onPress: close,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        ref: ref,
+        style: [staticStyles.tooltip, selectTooltipShadowStyles(themeTokens), // applied separately so that it doesn't cover the arrow
+        tooltipPosition && selectTooltipPositionStyles(tooltipPosition), (tooltipPosition === null || (tooltipPosition === null || tooltipPosition === void 0 ? void 0 : tooltipPosition.isNormalized)) && staticStyles.tooltipHidden // visually hide the tooltip until we have a final measurement
+        ],
+        onLayout: onTooltipLayout,
+        accessibilityRole: "alert",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: [staticStyles.arrow, tooltipPosition && selectArrowStyles(themeTokens, tooltipPosition)]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectTooltipStyles(themeTokens),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+            style: selectTextStyles(themeTokens),
+            children: content
+          })
+        })]
+      })
+    })]
+  });
+});
+Tooltip.displayName = 'Tooltip';
 Tooltip.propTypes = {
   /**
    * Used to render the control (i.e. tooltip trigger). If a render function is used it will receive the
    * pressable state and tooltip variant as an argument.
    */
-  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
 
   /**
    * The message. Can be raw text or text components.
    */
-  content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
 
   /**
    * Select english or french copy for the accessible label.
    */
-  copy: PropTypes.oneOf(['en', 'fr']),
+  copy: _propTypes.default.oneOf(['en', 'fr']),
 
   /**
    * Use to place the tooltip in a specific location (only if it fits within viewport).
    */
-  position: PropTypes.oneOf(['auto', 'above', 'right', 'below', 'left']),
-  tokens: getTokensPropType('Tooltip'),
-  variant: variantProp.propType
+  position: _propTypes.default.oneOf(['auto', 'above', 'right', 'below', 'left']),
+  tokens: (0, _utils.getTokensPropType)('Tooltip'),
+  variant: _utils.variantProp.propType
 };
-export default Tooltip;
-const staticStyles = StyleSheet.create({
+var _default = Tooltip;
+exports.default = _default;
+
+const staticStyles = _StyleSheet.default.create({
   container: {
     alignItems: 'flex-start'
   },

package/lib/Tooltip/dictionary.js

@@ -1,8 +1,15 @@
-export default {
+"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

@@ -1,3 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
 function normalizePosition(position) {
   const {
     left,
@@ -161,4 +168,5 @@ function getTooltipPosition(position, {
   return normalizePosition(leastOverflowing.position === 'above' ? findRectByPosition('below', boundingRects) : leastOverflowing);
 }
 
-export default getTooltipPosition;
+var _default = getTooltipPosition;
+exports.default = _default;

package/lib/Tooltip/index.js

@@ -1,2 +1,13 @@
-import Tooltip from './Tooltip';
-export default Tooltip;
+"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

@@ -1,26 +1,25 @@
-import React from 'react';
-import { View } from 'react-native';
-import { useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, variantProp } from '../utils';
-
-const selectOuterContainerStyles = ({
-  outerBorderColor,
-  outerBorderWidth = 0,
-  outerBorderGap = 0,
-  outerBorderRadius
-}) => {
-  const outerBorderOffset = -1 * (outerBorderWidth + outerBorderGap);
-  return {
-    marginTop: outerBorderOffset,
-    marginLeft: outerBorderOffset,
-    marginRight: outerBorderOffset,
-    marginBottom: outerBorderOffset,
-    borderColor: outerBorderColor,
-    borderWidth: outerBorderWidth,
-    padding: outerBorderGap,
-    borderRadius: outerBorderRadius
-  };
-};
+"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,
@@ -32,33 +31,53 @@ const selectInnerContainerStyles = ({
 
 const selectIconTokens = ({
   iconSize,
-  iconColor,
-  iconScale = 1
+  iconColor
+  /* iconScale = 1 */
+
 }) => ({
   size: iconSize,
-  color: iconColor,
-  scale: iconScale
+  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 = useThemeTokens('TooltipButton', tokens, variant);
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('TooltipButton', tokens, variant, pressableState);
   const {
     icon: IconComponent
   } = themeTokens;
-  return /*#__PURE__*/React.createElement(View, {
-    style: selectOuterContainerStyles(themeTokens)
-  }, /*#__PURE__*/React.createElement(View, {
-    style: selectInnerContainerStyles(themeTokens)
-  }, IconComponent && /*#__PURE__*/React.createElement(IconComponent, {
-    tokens: selectIconTokens(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 = {
-  tokens: getTokensPropType('TooltipButton'),
-  variant: variantProp.propType
+  /**
+   * 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
 };
-export default TooltipButton;
+var _default = TooltipButton;
+exports.default = _default;

package/lib/TooltipButton/index.js

@@ -1,2 +1,13 @@
-import TooltipButton from './TooltipButton';
-export default TooltipButton;
+"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;