@telus-uds/components-base 3.28.2 → 4.0.0-alpha.0

package/lib/cjs/Typography/Typography.js

@@ -3,22 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Typography = 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 _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../ThemeProvider/utils");
-var _utils2 = require("../utils");
-var _ViewportProvider = require("../ViewportProvider");
+var _useResponsiveThemeTokens = require("../ThemeProvider/useResponsiveThemeTokens");
+var _useTheme = require("../ThemeProvider/useTheme");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _styles = require("../ThemeProvider/utils/styles");
+var _a11yProps = require("../utils/props/a11yProps");
+var _variantProp = require("../utils/props/variantProp");
+var _tokens = require("../utils/props/tokens");
+var _textSize = require("../utils/a11y/textSize");
+var _semantics = require("../utils/a11y/semantics");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _textProps = require("../utils/props/textProps");
+var _viewProps = require("../utils/props/viewProps");
+var _ssrMediaQuery = require("../utils/ssr-media-query/ssr-media-query");
+var _useViewport = require("../ViewportProvider/useViewport");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
- */const [selectContainerProps, selectedContainerPropTypes] = (0, _utils2.selectSystemProps)([_utils2.a11yProps, _utils2.viewProps]);
-const [selectTextProps, selectedTextPropTypes] = (0, _utils2.selectSystemProps)([_utils2.textProps]);
+ */const [selectContainerProps, selectedContainerPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
+const [selectTextProps, selectedTextPropTypes] = (0, _selectSystemProps.selectSystemProps)([_textProps.textProps]);
 const selectTextStyles = (_ref, themeOptions) => {
   let {
     fontWeight,
@@ -30,14 +40,16 @@ const selectTextStyles = (_ref, themeOptions) => {
     textTransform,
     letterSpacing,
     textDecorationLine,
+    fontStyle,
     gradient
   } = _ref;
-  return (0, _utils.applyTextStyles)({
+  return (0, _styles.applyTextStyles)({
     fontWeight,
     fontSize,
     color,
     lineHeight,
     fontName,
+    fontStyle,
     themeOptions,
     textAlign,
     textTransform,
@@ -61,7 +73,7 @@ const selectMobileSubSupStyles = (_ref2, type) => {
 };
 
 // General-purpose flexible theme-neutral base component for text
-const Typography = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const Typography = exports.Typography = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     children,
     variant,
@@ -75,19 +87,20 @@ const Typography = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     strikeThrough = false,
     ...rest
   } = _ref3;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = (0, _useViewport.useViewport)();
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
+  } = (0, _useTheme.useTheme)();
   const {
     enableMediaQueryStyleSheet
   } = themeOptions;
-  const useTokens = enableMediaQueryStyleSheet ? _ThemeProvider.useResponsiveThemeTokens : _ThemeProvider.useThemeTokens;
+  const useTokens = enableMediaQueryStyleSheet ? _useResponsiveThemeTokens.useResponsiveThemeTokens : _useThemeTokens.useThemeTokens;
   const themeTokens = useTokens('Typography', tokens, variant, !enableMediaQueryStyleSheet && {
     viewport
   });
-  const maxFontSizeMultiplier = enableMediaQueryStyleSheet ? (0, _utils2.getMaxFontMultiplier)(themeTokens[viewport]) : (0, _utils2.getMaxFontMultiplier)(themeTokens);
+  const maxFontSizeMultiplier = enableMediaQueryStyleSheet ? (0, _textSize.getMaxFontMultiplier)(themeTokens[viewport]) : (0, _textSize.getMaxFontMultiplier)(themeTokens);
   const textDecorationLine = strikeThrough ? 'line-through' : 'none';
+  const fontStyle = tag === 'em' ? 'italic' : undefined;
   const generateGradientString = gradientObj => {
     let gradientStr = '';
     const {
@@ -132,7 +145,10 @@ const Typography = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       acc[vp] = selectTextStyles({
         textAlign: resolvedAlign,
         textDecorationLine,
-        ...viewportTokens
+        ...viewportTokens,
+        ...(fontStyle && {
+          fontStyle
+        })
       }, themeOptions);
       if (themeTokens[vp].gradient) {
         const tokensWithGradient = {
@@ -148,11 +164,11 @@ const Typography = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       }
       return acc;
     }, {});
-    const mediaQueryStyles = (0, _utils2.createMediaQueryStyles)(transformedThemeTokens);
+    const mediaQueryStyles = (0, _ssrMediaQuery.createMediaQueryStyles)(transformedThemeTokens);
     const {
       ids,
       styles
-    } = _utils2.StyleSheet.create({
+    } = _ssrMediaQuery.StyleSheet.create({
       text: mediaQueryStyles
     });
     textStyles = styles.text;
@@ -161,7 +177,10 @@ const Typography = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     textStyles = selectTextStyles({
       textAlign: resolvedAlign,
       textDecorationLine,
-      ...themeTokens
+      ...themeTokens,
+      ...(fontStyle && {
+        fontStyle
+      })
     }, themeOptions);
   }
   const resolvedTextProps = {
@@ -170,7 +189,7 @@ const Typography = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   };
   const containerProps = {
     accessibilityRole,
-    ...(0, _utils2.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...(0, _semantics.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
     ...selectContainerProps(rest)
   };
   const resetTagStyling = child => {
@@ -231,8 +250,8 @@ Typography.displayName = 'Typography';
 Typography.propTypes = {
   ...selectedContainerPropTypes,
   ...selectedTextPropTypes,
-  tokens: (0, _utils2.getTokensPropType)('Typography'),
-  variant: _utils2.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('Typography'),
+  variant: _variantProp.variantProp.propType,
   /**
    * Renders the text with "text-decoration: 'line-through'" applied.
    */
@@ -246,7 +265,7 @@ Typography.propTypes = {
    * 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]),
+  heading: _propTypes.default.oneOf([..._semantics.headingTags, true]),
   /**
    * Optional semantic HTML tag, to apply to the text on web. Does not change styling.
    *
@@ -255,7 +274,7 @@ Typography.propTypes = {
    * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
    * is not defined, the accessibilityRole will default to "heading".
    */
-  tag: _propTypes.default.oneOf(_utils2.textTags),
+  tag: _propTypes.default.oneOf(_semantics.textTags),
   /**
    * If true, forces the element to behave as a View block even if nested in other text
    */
@@ -273,5 +292,4 @@ Typography.propTypes = {
    * Data attributes to be added to the element
    */
   dataSet: _propTypes.default.object
-};
-var _default = exports.default = Typography;
+};

package/lib/cjs/Validator/Validator.js

@@ -3,20 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Validator = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _utils = require("../utils");
-var _TextInput = require("../TextInput");
-var _StackView = _interopRequireDefault(require("../StackView"));
-var _InputSupports = _interopRequireDefault(require("../InputSupports"));
-var _ThemeProvider = require("../ThemeProvider");
+var _inputSupportsProps = require("../utils/props/inputSupportsProps");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _TextInput = require("../TextInput/TextInput");
+var _StackView = require("../StackView/StackView");
+var _InputSupports = require("../InputSupports/InputSupports");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.inputSupportsProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_inputSupportsProps.inputSupportsProps]);
 const selectCodeTextInputTokens = _ref => {
   let {
     outerBorderColor,
@@ -28,7 +29,7 @@ const selectCodeTextInputTokens = _ref => {
     icon: null
   };
 };
-const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const Validator = exports.Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     value = '',
     inactive,
@@ -55,7 +56,7 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   const handleMouseOut = () => {
     setIsHover(false);
   };
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextInput', tokens, variant, {
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('TextInput', tokens, variant, {
     hover: isHover
   });
 
@@ -293,13 +294,13 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
      */
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.InputSupports, {
     ...supportsProps,
     feedbackProps: {
       ...rest?.feedbackProps,
       showFeedbackIcon: true
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackView, {
       space: 2,
       direction: "row",
       ref: codeRef,
@@ -327,7 +328,6 @@ Validator.propTypes = {
    */
   onChange: _propTypes.default.func
 };
-var _default = exports.default = Validator;
 const staticStyles = _StyleSheet.default.create({
   codeInputWidth: {
     width: 43

package/lib/cjs/ViewportProvider/ViewportProvider.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ViewportProvider = void 0;
 var _react = _interopRequireDefault(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 _useViewportListener = require("./useViewportListener");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -17,7 +17,9 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * @param {React.ReactNode} children - Child components that will have access to viewport context
  * @param {string} [defaultViewport] - Default viewport to use during server-side rendering.
  *   Must be one of the viewport keys from system-constants. If not provided, defaults to the smallest viewport.
- */const ViewportProvider = _ref => {
+ */
+// eslint-disable-next-line no-unused-vars
+const ViewportProvider = exports.ViewportProvider = /*#__PURE__*/_react.default.forwardRef((_ref, _) => {
   let {
     children,
     defaultViewport
@@ -25,14 +27,14 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
   // 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] = _react.default.useState(defaultViewport || _systemConstants.viewports.keys[0]);
-  (0, _useViewportListener.default)(setViewport);
+  (0, _useViewportListener.useViewportListener)(setViewport);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_useViewport.ViewportContext.Provider, {
     value: viewport,
     children: children
   });
-};
+});
+ViewportProvider.displayName = 'ViewportProvider';
 ViewportProvider.propTypes = {
   children: _propTypes.default.node.isRequired,
   defaultViewport: _propTypes.default.oneOf(_systemConstants.viewports.keys)
-};
-var _default = exports.default = ViewportProvider;
+};

package/lib/cjs/ViewportProvider/useViewportListener.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.useViewportListener = void 0;
 var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
 var _systemConstants = require("@telus-uds/system-constants");
-var _useSafeLayoutEffect = _interopRequireDefault(require("../utils/useSafeLayoutEffect"));
+var _useSafeLayoutEffect = require("../utils/useSafeLayoutEffect");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // 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
@@ -19,7 +19,7 @@ const lookupViewport = () => _systemConstants.viewports.select(_Dimensions.defau
  * is shown to the user. Then bind events to update the viewport if it changes.
  */
 const useViewportListener = setViewport => {
-  (0, _useSafeLayoutEffect.default)(() => {
+  (0, _useSafeLayoutEffect.useSafeLayoutEffect)(() => {
     setViewport(lookupViewport());
     const onChange = _ref => {
       let {
@@ -40,4 +40,4 @@ const useViewportListener = setViewport => {
     };
   }, [setViewport]);
 };
-var _default = exports.default = useViewportListener;
+exports.useViewportListener = useViewportListener;