@telus-uds/components-base 0.0.2-prerelease.7 → 1.0.1

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;

package/lib/Typography/Typography.js

@@ -1,20 +1,37 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Text, View } from 'react-native';
-import { useThemeTokens } from '../ThemeProvider';
-import { useViewport } from '../ViewportProvider';
-import { applyTextStyles } from '../ThemeProvider/utils';
-import { a11yProps, variantProp, getTokensPropType, getMaxFontMultiplier } from '../utils';
-/**
- * If passed a string like 'h1', 'h2' etc, returns the heading number as a string,
- * else returns false
- */
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(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");
 
-function getHeadingLevel(heading) {
-  const match = typeof heading === 'string' && heading.match(/^h(\d)$/);
-  return match && match[1];
-}
+var _utils2 = require("../utils");
 
+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; }
+
+/**
+ * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
+ */
 const selectTextStyles = ({
   fontWeight,
   fontSize,
@@ -22,71 +39,100 @@ 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
 
 
-const Typography = ({
+const Typography = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   variant,
   heading,
+  tag = typeof heading === 'string' ? heading : undefined,
+  accessibilityRole = heading === true ? 'header' : undefined,
   block = false,
   align = undefined,
-  accessibilityRole = heading ? 'header' : 'text',
   tokens,
+  dataSet,
   ...rest
-}) => {
-  const viewport = useViewport();
-  const themeTokens = useThemeTokens('Typography', tokens, variant, {
+}, ref) => {
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Typography', tokens, variant, {
     viewport
   });
   const textProps = {
     style: selectTextStyles(align ? { ...themeTokens,
       textAlign: align
     } : themeTokens),
-    maxFontSizeMultiplier: getMaxFontMultiplier(themeTokens)
+    dataSet,
+    maxFontSizeMultiplier: (0, _utils2.getMaxFontMultiplier)(themeTokens)
   };
-  const headingLevel = getHeadingLevel(heading);
-  const a11y = { ...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
+  const a11y = { ...(0, _utils2.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ..._utils2.a11yProps.select(rest)
   };
-  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, {
+    ref: ref,
+    ...a11y,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, { ...textProps,
+      children: children
+    })
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+    ref: ref,
+    ...textProps,
+    ...a11y,
+    children: children
+  });
+});
+Typography.displayName = 'Typography';
+Typography.propTypes = { ..._utils2.a11yProps.types,
+  tokens: (0, _utils2.getTokensPropType)('Typography'),
+  variant: _utils2.variantProp.propType,
 
-Typography.propTypes = { ...a11yProps.types,
-  tokens: getTokensPropType('Typography'),
-  variant: variantProp.propType,
+  /**
+   * Renders the text as a semantic heading. If a html heading tag is provided, uses that tag on Web.
+   *
+   * Does not affect styling: <Typography heading="h2"> will render a <h2> that looks like plain text.
+   * Use both `heading` and `variant` props to render semantic headings that look like headings.
+   *
+   * In native apps, if this is `true` or any html heading tag string and accessibilityRole prop
+   * is not defined, the accessibilityRole will default to "heading".
+   */
+  heading: _propTypes.default.oneOf([..._utils2.headingTags, true]),
 
   /**
-   * If truthy, will render a heading; if a html heading tag is provided, uses that tag on Web
+   * Optional semantic HTML tag, to apply to the text on web. Does not change styling.
+   *
+   * `tag` and `heading` props set the same thing, so shouldn't be used together (`tag` overrides `heading`).
+   *
+   * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
+   * is not defined, the accessibilityRole will default to "heading".
    */
-  heading: PropTypes.oneOf([true, 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+  tag: _propTypes.default.oneOf(_utils2.textTags),
 
   /**
    * 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

@@ -1,25 +1,46 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { viewports } from '@telus-uds/system-constants';
-import { ViewportContext } from './useViewport';
-import useViewportListener from './useViewportListener';
+"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] = useState(viewports.keys[0]);
-  useViewportListener(setViewport);
-  return /*#__PURE__*/React.createElement(ViewportContext.Provider, {
-    value: viewport
-  }, children);
+  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.node.isRequired
+  children: _propTypes.default.node.isRequired
 };
-export default ViewportProvider;
+var _default = ViewportProvider;
+exports.default = _default;

package/lib/ViewportProvider/index.js

@@ -1,3 +1,28 @@
-import ViewportProvider from './ViewportProvider';
-export default ViewportProvider;
-export * from './useViewport';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+
+var _ViewportProvider = _interopRequireDefault(require("./ViewportProvider"));
+
+var _useViewport = require("./useViewport");
+
+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];
+    }
+  });
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _ViewportProvider.default;
+exports.default = _default;

package/lib/ViewportProvider/useViewport.js

@@ -1,3 +1,15 @@
-import { createContext, useContext } from 'react';
-export const ViewportContext = /*#__PURE__*/createContext({});
-export const useViewport = () => useContext(ViewportContext);
+"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

@@ -1,10 +1,22 @@
-import { useLayoutEffect } from 'react';
-import { Dimensions } from 'react-native';
-import { viewports } from '@telus-uds/system-constants'; // Use Dimensions instead of useWindowDimensions because useWindowDimensions forces context
+"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 = () => viewports.select(Dimensions.get('window').width);
+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
@@ -23,21 +35,23 @@ const useViewportListenerSSR = () => {};
 
 
 const useViewportListenerCSR = setViewport => {
-  useLayoutEffect(() => {
+  (0, _react.useLayoutEffect)(() => {
     setViewport(lookupViewport());
 
     const onChange = ({
       window
-    }) => setViewport(viewports.select(window.width));
+    }) => setViewport(_systemConstants.viewports.select(window.width));
 
-    const listener = Dimensions.addEventListener('change', onChange); // From RN 0.65.0, Dimensions.removeEventListener is deprecated for `remove` on addEventListener return value;
+    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?.remove || (() => Dimensions.removeEventListener('change', onChange)); // setViewport is a function from `useState` so it is stable and won't make the effect re-run
+
+    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;
-export default useViewportListener;
+var _default = useViewportListener;
+exports.default = _default;