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

package/lib/Typography/Typography.js

@@ -1,15 +1,34 @@
-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';
+"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];
@@ -22,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
 
 
@@ -44,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),
-    maxFontSizeMultiplier: getMaxFontMultiplier(themeTokens)
+    maxFontSizeMultiplier: (0, _utils2.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

@@ -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;