@telus-uds/components-base 1.14.0 → 1.14.3

package/CHANGELOG.md

@@ -1,12 +1,38 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 17 Aug 2022 18:43:08 GMT and should not be manually modified.
+This log was last generated on Thu, 01 Sep 2022 15:38:33 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.14.3
+
+Thu, 01 Sep 2022 15:38:33 GMT
+
+### Patches
+
+- add input validation to select component (evander.owusu@telus.com)
+- Refactor ssr support to match ssrStyles approach proven in ds-allium (alan.slater@nearform.com)
+
+## 1.14.2
+
+Tue, 23 Aug 2022 19:32:37 GMT
+
+### Patches
+
+- fix: remove extra icons from pagination (ruslan.bredikhin@nearform.com)
+- Bump @telus-uds/system-theme-tokens to v2.4.0
+
+## 1.14.1
+
+Wed, 17 Aug 2022 20:50:59 GMT
+
+### Patches
+
+- Bump @telus-uds/system-theme-tokens to v2.3.0
+
 ## 1.14.0
 
-Wed, 17 Aug 2022 18:43:08 GMT
+Wed, 17 Aug 2022 18:45:01 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -1157,6 +1157,16 @@
             true
           ],
           "type": "state"
+        },
+        "width": {
+          "description": "The width of the modal",
+          "values": [
+            "s",
+            "m",
+            "l",
+            "xl"
+          ],
+          "type": "state"
         }
       },
       "Notification": {

package/lib/Pagination/SideButton.js

@@ -33,12 +33,22 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 selectIconTokens = (_ref, direction) => {
+// We need to drop the icon here since it gets rendered via children and not
+// `ButtonBase` in order to tap into the state of the button
+const selectButtonTokens = _ref => {
+  let {
+    icon: _,
+    ...rest
+  } = _ref;
+  return (0, _utils.selectTokens)('Button', rest);
+};
+
+const selectIconTokens = (_ref2, direction) => {
   let {
     color,
     iconSize,
     iconDisplace
-  } = _ref;
+  } = _ref2;
   return {
     color,
     size: iconSize,
@@ -50,7 +60,7 @@ const directionToSide = {
   previous: 'left',
   next: 'right'
 };
-const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
     direction = 'previous',
     onPress,
@@ -59,7 +69,7 @@ const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     variant,
     tokens,
     ...props
-  } = _ref2;
+  } = _ref3;
   const viewport = (0, _ViewportProvider.useViewport)();
   const buttonVariant = {
     direction,
@@ -75,7 +85,7 @@ const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     icon
   } = getTokens(tokens, buttonVariant);
 
-  const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getTokens(buttonState));
+  const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
 
   const getIconTokens = buttonState => selectIconTokens(getTokens(buttonState), direction);
 
@@ -101,11 +111,11 @@ const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     ref: ref,
     ...buttonProps,
     tokens: getButtonTokens,
-    children: _ref3 => {
+    children: _ref4 => {
       let {
         textStyles,
         ...buttonState
-      } = _ref3;
+      } = _ref4;
       const iconProps = {
         tokens: getIconTokens(buttonState)
       };

package/lib/Select/Select.js

@@ -258,6 +258,7 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
   } = (0, _ThemeProvider.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
     ...selectedProps,
+    validation: validation,
     children: _ref8 => {
       let {
         inputId,

package/lib/utils/ssr.js

@@ -3,10 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSSRStyles = exports.getReactNativeWebSSRStyles = void 0;
+exports.ssrStyles = exports.getSSRStyles = exports.getReactNativeWebSSRStyles = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
 
 var _AppRegistry = _interopRequireDefault(require("react-native-web/dist/cjs/exports/AppRegistry"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /** @typedef {import('react').ComponentType} ReactComponent */
@@ -14,6 +18,112 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /** @typedef {import('react').ReactElement} ReactElement */
 
 /**
+ * Returns object with `renderApp` and `getStyles` functions.
+ * Weave these into your app's server-side render process:
+ *
+ * - Call `renderApp` first to do the actual server-side render
+ * - After the render is complete, call `getStyles`
+ * - Include the style tags returned by `getStyles` in the SSR <head>
+ *
+ * @param {string} [appName] - optional unique identifier if ssrStyles is called multiple times for multiple apps
+ * @param {object} [options] -
+ *  - `styleGetters`: optional array of additional style getter functions to call after render
+ *  - `collectStyles`: optional function, takes the rendered app, returns either the same or a new app element
+ * @param {boolean} [options.styleGetters]
+ * @param {(ReactElement) => ReactElement} [options.collectStyles]
+ */
+const ssrStyles = function () {
+  let appName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'UDS app';
+  let {
+    styleGetters = [],
+    collectStyles
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let hasAppRendered = false;
+  return {
+    /**
+     * Server-side-renders the provided app in a way that supports collecting
+     * styles for Styled Components and React Native Web stylesheets.
+     *
+     * @param {ReactComponent} App - the root component for the app
+     * @param {object} [props] - props for this render e.g. page routing props
+     * @param {object} [options] -
+     *  - `renderedByRNW`: pass as true if the main render is by AppRegistry.runApplication from React Native
+     *  - `WrapperComponent`: Component rendered with no props around app content and inside root tag
+     * @param {boolean} [options.renderedByRNW]
+     * @param {ReactComponent} [options.WrapperComponent]
+     *
+     * @returns {ReactElement} - the rendered app output
+     */
+    renderApp: function (App, props) {
+      let {
+        renderedByRNW = false,
+        WrapperComponent
+      } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+      _AppRegistry.default.registerComponent(appName, () => App); // AppRegistry.getApplication renders the app in a container, and collects styles.
+
+
+      const {
+        element,
+        getStyleElement
+      } = _AppRegistry.default.getApplication(appName, {
+        WrapperComponent,
+        initialProps: props
+      });
+
+      let renderedApp = // React Native Web's AppRegistry.getApplication assumes the app is rendered using
+      // AppRegistry.runApplication and wraps it in <AppContainer>, which wraps the entire app
+      // in two outer containers resembling <View style={{ flex: 1 }} pointerEvents="box-none">.
+      // So, use that IF user says AppRegistry.runApplication will do the client-side render.
+      renderedByRNW && element || // If the live app is not rendered using AppRegistry.runApplication, we need to
+      // re-render it without the <AppContainer> wrapper, to avoid SSR mismatch errors.
+      // Default to this as many platforms (e.g. NextJS) will use their own renderers.
+      WrapperComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperComponent, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(App, { ...props
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(App, { ...props
+      });
+
+      const getRNWStyle = () => getStyleElement({
+        key: 'react-native-stylesheet'
+      });
+
+      styleGetters.push(getRNWStyle);
+
+      if (typeof collectStyles === 'function') {
+        renderedApp = collectStyles(renderedApp);
+      }
+
+      hasAppRendered = true;
+      return renderedApp;
+    },
+
+    /**
+     * Turns styles collected during renderApp into an array of React elements of
+     * HTML <style> tags ready for insertion into the SSR HTML's <head>.
+     *
+     * Must be called after `renderApp` has completed.
+     *
+     * @param {...ReactElement} existingStyles - any existing style tag elements to merge in
+     * @returns {ReactElement[]} - flat array of <style> React elements
+     */
+    getStyles: function () {
+      if (!hasAppRendered) throw new Error('Called getStyles before renderApp in ssrStyles');
+
+      for (var _len = arguments.length, existingStyles = new Array(_len), _key = 0; _key < _len; _key++) {
+        existingStyles[_key] = arguments[_key];
+      }
+
+      return [...existingStyles, ...styleGetters.flatMap(getter => getter())];
+    }
+  };
+};
+
+exports.ssrStyles = ssrStyles;
+var _default = ssrStyles;
+/**
+ * @deprecated - use ssrStyles instead
+ *
  * Registers the app's root component with React Native Web and generates
  * the main <style> tag containing React Native Web stylesheet styles.
  *
@@ -21,6 +131,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {string} [appName]
  * @returns {ReactElement[]}
  */
+
+exports.default = _default;
+
 const getReactNativeWebSSRStyles = function (AppRoot) {
   let appName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
 
@@ -33,6 +146,8 @@ const getReactNativeWebSSRStyles = function (AppRoot) {
   return [getStyleElement()];
 };
 /**
+ * @deprecated - use ssrStyles instead
+ *
  * Gets style tags for each currently supported CSS-in-JS library and returns
  * them alongside any existing style tags.
  *

package/lib-module/Pagination/SideButton.js

@@ -7,15 +7,25 @@ import { useThemeTokensCallback } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
 import { copyPropTypes, hrefAttrsProp, linkProps, selectTokens, withLinkRouter } from '../utils';
 import dictionary from './dictionary';
-import useCopy from '../utils/useCopy';
+import useCopy from '../utils/useCopy'; // We need to drop the icon here since it gets rendered via children and not
+// `ButtonBase` in order to tap into the state of the button
+
 import { jsx as _jsx } from "react/jsx-runtime";
 
-const selectIconTokens = (_ref, direction) => {
+const selectButtonTokens = _ref => {
+  let {
+    icon: _,
+    ...rest
+  } = _ref;
+  return selectTokens('Button', rest);
+};
+
+const selectIconTokens = (_ref2, direction) => {
   let {
     color,
     iconSize,
     iconDisplace
-  } = _ref;
+  } = _ref2;
   return {
     color,
     size: iconSize,
@@ -27,7 +37,7 @@ const directionToSide = {
   previous: 'left',
   next: 'right'
 };
-const SideButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const SideButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     direction = 'previous',
     onPress,
@@ -36,7 +46,7 @@ const SideButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
     variant,
     tokens,
     ...props
-  } = _ref2;
+  } = _ref3;
   const viewport = useViewport();
   const buttonVariant = {
     direction,
@@ -52,7 +62,7 @@ const SideButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
     icon
   } = getTokens(tokens, buttonVariant);
 
-  const getButtonTokens = buttonState => selectTokens('Button', getTokens(buttonState));
+  const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
 
   const getIconTokens = buttonState => selectIconTokens(getTokens(buttonState), direction);
 
@@ -76,11 +86,11 @@ const SideButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ref: ref,
     ...buttonProps,
     tokens: getButtonTokens,
-    children: _ref3 => {
+    children: _ref4 => {
       let {
         textStyles,
         ...buttonState
-      } = _ref3;
+      } = _ref4;
       const iconProps = {
         tokens: getIconTokens(buttonState)
       };

package/lib-module/Select/Select.js

@@ -234,6 +234,7 @@ const Select = /*#__PURE__*/forwardRef((_ref7, ref) => {
   } = useTheme();
   return /*#__PURE__*/_jsx(InputSupports, { ...supportsProps,
     ...selectedProps,
+    validation: validation,
     children: _ref8 => {
       let {
         inputId,

package/lib-module/utils/ssr.js

@@ -1,9 +1,113 @@
+import React from 'react';
 import AppRegistry from "react-native-web/dist/exports/AppRegistry";
 /** @typedef {import('react').ComponentType} ReactComponent */
 
 /** @typedef {import('react').ReactElement} ReactElement */
 
 /**
+ * Returns object with `renderApp` and `getStyles` functions.
+ * Weave these into your app's server-side render process:
+ *
+ * - Call `renderApp` first to do the actual server-side render
+ * - After the render is complete, call `getStyles`
+ * - Include the style tags returned by `getStyles` in the SSR <head>
+ *
+ * @param {string} [appName] - optional unique identifier if ssrStyles is called multiple times for multiple apps
+ * @param {object} [options] -
+ *  - `styleGetters`: optional array of additional style getter functions to call after render
+ *  - `collectStyles`: optional function, takes the rendered app, returns either the same or a new app element
+ * @param {boolean} [options.styleGetters]
+ * @param {(ReactElement) => ReactElement} [options.collectStyles]
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ssrStyles = function () {
+  let appName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'UDS app';
+  let {
+    styleGetters = [],
+    collectStyles
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let hasAppRendered = false;
+  return {
+    /**
+     * Server-side-renders the provided app in a way that supports collecting
+     * styles for Styled Components and React Native Web stylesheets.
+     *
+     * @param {ReactComponent} App - the root component for the app
+     * @param {object} [props] - props for this render e.g. page routing props
+     * @param {object} [options] -
+     *  - `renderedByRNW`: pass as true if the main render is by AppRegistry.runApplication from React Native
+     *  - `WrapperComponent`: Component rendered with no props around app content and inside root tag
+     * @param {boolean} [options.renderedByRNW]
+     * @param {ReactComponent} [options.WrapperComponent]
+     *
+     * @returns {ReactElement} - the rendered app output
+     */
+    renderApp: function (App, props) {
+      let {
+        renderedByRNW = false,
+        WrapperComponent
+      } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      AppRegistry.registerComponent(appName, () => App); // AppRegistry.getApplication renders the app in a container, and collects styles.
+
+      const {
+        element,
+        getStyleElement
+      } = AppRegistry.getApplication(appName, {
+        WrapperComponent,
+        initialProps: props
+      });
+      let renderedApp = // React Native Web's AppRegistry.getApplication assumes the app is rendered using
+      // AppRegistry.runApplication and wraps it in <AppContainer>, which wraps the entire app
+      // in two outer containers resembling <View style={{ flex: 1 }} pointerEvents="box-none">.
+      // So, use that IF user says AppRegistry.runApplication will do the client-side render.
+      renderedByRNW && element || // If the live app is not rendered using AppRegistry.runApplication, we need to
+      // re-render it without the <AppContainer> wrapper, to avoid SSR mismatch errors.
+      // Default to this as many platforms (e.g. NextJS) will use their own renderers.
+      WrapperComponent ? /*#__PURE__*/_jsx(WrapperComponent, {
+        children: /*#__PURE__*/_jsx(App, { ...props
+        })
+      }) : /*#__PURE__*/_jsx(App, { ...props
+      });
+
+      const getRNWStyle = () => getStyleElement({
+        key: 'react-native-stylesheet'
+      });
+
+      styleGetters.push(getRNWStyle);
+
+      if (typeof collectStyles === 'function') {
+        renderedApp = collectStyles(renderedApp);
+      }
+
+      hasAppRendered = true;
+      return renderedApp;
+    },
+
+    /**
+     * Turns styles collected during renderApp into an array of React elements of
+     * HTML <style> tags ready for insertion into the SSR HTML's <head>.
+     *
+     * Must be called after `renderApp` has completed.
+     *
+     * @param {...ReactElement} existingStyles - any existing style tag elements to merge in
+     * @returns {ReactElement[]} - flat array of <style> React elements
+     */
+    getStyles: function () {
+      if (!hasAppRendered) throw new Error('Called getStyles before renderApp in ssrStyles');
+
+      for (var _len = arguments.length, existingStyles = new Array(_len), _key = 0; _key < _len; _key++) {
+        existingStyles[_key] = arguments[_key];
+      }
+
+      return [...existingStyles, ...styleGetters.flatMap(getter => getter())];
+    }
+  };
+};
+export default ssrStyles;
+/**
+ * @deprecated - use ssrStyles instead
+ *
  * Registers the app's root component with React Native Web and generates
  * the main <style> tag containing React Native Web stylesheet styles.
  *
@@ -21,6 +125,8 @@ export const getReactNativeWebSSRStyles = function (AppRoot) {
   return [getStyleElement()];
 };
 /**
+ * @deprecated - use ssrStyles instead
+ *
  * Gets style tags for each currently supported CSS-in-JS library and returns
  * them alongside any existing style tags.
  *

package/package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",
     "@telus-uds/system-constants": "^1.0.4",
-    "@telus-uds/system-theme-tokens": "^2.2.0",
+    "@telus-uds/system-theme-tokens": "^2.4.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",
@@ -71,5 +71,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.14.0"
+  "version": "1.14.3"
 }

package/src/Pagination/SideButton.jsx

@@ -12,6 +12,9 @@ import { copyPropTypes, hrefAttrsProp, linkProps, selectTokens, withLinkRouter }
 import dictionary from './dictionary'
 import useCopy from '../utils/useCopy'
 
+// We need to drop the icon here since it gets rendered via children and not
+// `ButtonBase` in order to tap into the state of the button
+const selectButtonTokens = ({ icon: _, ...rest }) => selectTokens('Button', rest)
 const selectIconTokens = ({ color, iconSize, iconDisplace }, direction) => {
   return {
     color,
@@ -35,7 +38,7 @@ const SideButton = forwardRef(
 
     const { icon } = getTokens(tokens, buttonVariant)
 
-    const getButtonTokens = (buttonState) => selectTokens('Button', getTokens(buttonState))
+    const getButtonTokens = (buttonState) => selectButtonTokens(getTokens(buttonState))
     const getIconTokens = (buttonState) => selectIconTokens(getTokens(buttonState), direction)
 
     const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText')

package/src/Select/Select.jsx

@@ -215,7 +215,7 @@ const Select = forwardRef(
     const { themeOptions } = useTheme()
 
     return (
-      <InputSupports {...supportsProps} {...selectedProps}>
+      <InputSupports {...supportsProps} {...selectedProps} validation={validation}>
         {({ inputId, ...props }) => (
           <View style={selectOuterBorderStyles(themeTokens)}>
             <Picker

package/src/utils/ssr.jsx

@@ -0,0 +1,124 @@
+import React from 'react'
+import { AppRegistry } from 'react-native'
+/** @typedef {import('react').ComponentType} ReactComponent */
+/** @typedef {import('react').ReactElement} ReactElement */
+
+/**
+ * Returns object with `renderApp` and `getStyles` functions.
+ * Weave these into your app's server-side render process:
+ *
+ * - Call `renderApp` first to do the actual server-side render
+ * - After the render is complete, call `getStyles`
+ * - Include the style tags returned by `getStyles` in the SSR <head>
+ *
+ * @param {string} [appName] - optional unique identifier if ssrStyles is called multiple times for multiple apps
+ * @param {object} [options] -
+ *  - `styleGetters`: optional array of additional style getter functions to call after render
+ *  - `collectStyles`: optional function, takes the rendered app, returns either the same or a new app element
+ * @param {boolean} [options.styleGetters]
+ * @param {(ReactElement) => ReactElement} [options.collectStyles]
+ */
+export const ssrStyles = (appName = 'UDS app', { styleGetters = [], collectStyles } = {}) => {
+  let hasAppRendered = false
+  return {
+    /**
+     * Server-side-renders the provided app in a way that supports collecting
+     * styles for Styled Components and React Native Web stylesheets.
+     *
+     * @param {ReactComponent} App - the root component for the app
+     * @param {object} [props] - props for this render e.g. page routing props
+     * @param {object} [options] -
+     *  - `renderedByRNW`: pass as true if the main render is by AppRegistry.runApplication from React Native
+     *  - `WrapperComponent`: Component rendered with no props around app content and inside root tag
+     * @param {boolean} [options.renderedByRNW]
+     * @param {ReactComponent} [options.WrapperComponent]
+     *
+     * @returns {ReactElement} - the rendered app output
+     */
+    renderApp: (App, props, { renderedByRNW = false, WrapperComponent } = {}) => {
+      AppRegistry.registerComponent(appName, () => App)
+      // AppRegistry.getApplication renders the app in a container, and collects styles.
+      const { element, getStyleElement } = AppRegistry.getApplication(appName, {
+        WrapperComponent,
+        initialProps: props
+      })
+
+      let renderedApp =
+        // React Native Web's AppRegistry.getApplication assumes the app is rendered using
+        // AppRegistry.runApplication and wraps it in <AppContainer>, which wraps the entire app
+        // in two outer containers resembling <View style={{ flex: 1 }} pointerEvents="box-none">.
+        // So, use that IF user says AppRegistry.runApplication will do the client-side render.
+        (renderedByRNW && element) ||
+        // If the live app is not rendered using AppRegistry.runApplication, we need to
+        // re-render it without the <AppContainer> wrapper, to avoid SSR mismatch errors.
+        // Default to this as many platforms (e.g. NextJS) will use their own renderers.
+        WrapperComponent ? (
+          <WrapperComponent>
+            <App {...props} />
+          </WrapperComponent>
+        ) : (
+          <App {...props} />
+        )
+
+      const getRNWStyle = () => getStyleElement({ key: 'react-native-stylesheet' })
+      styleGetters.push(getRNWStyle)
+
+      if (typeof collectStyles === 'function') {
+        renderedApp = collectStyles(renderedApp)
+      }
+      hasAppRendered = true
+      return renderedApp
+    },
+    /**
+     * Turns styles collected during renderApp into an array of React elements of
+     * HTML <style> tags ready for insertion into the SSR HTML's <head>.
+     *
+     * Must be called after `renderApp` has completed.
+     *
+     * @param {...ReactElement} existingStyles - any existing style tag elements to merge in
+     * @returns {ReactElement[]} - flat array of <style> React elements
+     */
+    getStyles: (...existingStyles) => {
+      if (!hasAppRendered) throw new Error('Called getStyles before renderApp in ssrStyles')
+      return [...existingStyles, ...styleGetters.flatMap((getter) => getter())]
+    }
+  }
+}
+
+export default ssrStyles
+
+/**
+ * @deprecated - use ssrStyles instead
+ *
+ * Registers the app's root component with React Native Web and generates
+ * the main <style> tag containing React Native Web stylesheet styles.
+ *
+ * @param {ReactComponent} AppRoot
+ * @param {string} [appName]
+ * @returns {ReactElement[]}
+ */
+
+export const getReactNativeWebSSRStyles = (AppRoot, appName = 'app') => {
+  AppRegistry.registerComponent(appName, () => AppRoot)
+  const { getStyleElement } = AppRegistry.getApplication(appName)
+  return [getStyleElement()]
+}
+
+/**
+ * @deprecated - use ssrStyles instead
+ *
+ * Gets style tags for each currently supported CSS-in-JS library and returns
+ * them alongside any existing style tags.
+ *
+ * @param {ReactComponent} AppRoot
+ * @param {string} [appName]
+ * @param {ReactElement[]} [existingStyles]
+ * @returns {ReactElement[]}
+ */
+export const getSSRStyles = (AppRoot, appName = 'app', existingStyles = []) => {
+  return [
+    ...existingStyles,
+    ...getReactNativeWebSSRStyles(AppRoot, appName)
+    // if any other CSS-in-JS is added e.g. styled-components generate and add its styles here
+  ]
+}

package/src/utils/ssr.js

@@ -1,35 +0,0 @@
-import { AppRegistry } from 'react-native'
-/** @typedef {import('react').ComponentType} ReactComponent */
-/** @typedef {import('react').ReactElement} ReactElement */
-
-/**
- * Registers the app's root component with React Native Web and generates
- * the main <style> tag containing React Native Web stylesheet styles.
- *
- * @param {ReactComponent} AppRoot
- * @param {string} [appName]
- * @returns {ReactElement[]}
- */
-
-export const getReactNativeWebSSRStyles = (AppRoot, appName = 'app') => {
-  AppRegistry.registerComponent(appName, () => AppRoot)
-  const { getStyleElement } = AppRegistry.getApplication(appName)
-  return [getStyleElement()]
-}
-
-/**
- * Gets style tags for each currently supported CSS-in-JS library and returns
- * them alongside any existing style tags.
- *
- * @param {ReactComponent} AppRoot
- * @param {string} [appName]
- * @param {ReactElement[]} [existingStyles]
- * @returns {ReactElement[]}
- */
-export const getSSRStyles = (AppRoot, appName = 'app', existingStyles = []) => {
-  return [
-    ...existingStyles,
-    ...getReactNativeWebSSRStyles(AppRoot, appName)
-    // if any other CSS-in-JS is added e.g. styled-components generate and add its styles here
-  ]
-}