@aws-amplify/ui-react 6.4.0 → 6.5.1

package/dist/{Field-4b189104.js → Field-3db91851.js}

@@ -5,7 +5,6 @@ var core = require('@aws-amplify/core');
 var auth = require('aws-amplify/auth');
 var uiReactCore = require('@aws-amplify/ui-react-core');
 var ui = require('@aws-amplify/ui');
-var primitiveWithForwardRef = require('./primitiveWithForwardRef-7e929242.js');
 
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -636,6 +635,17 @@ const useStyles = (props, style) => {
     }), [propStyles, style, breakpoints, breakpoint, tokens]);
 };
 
+/**
+ * Updates the return type for primitives wrapped in `React.forwardRef` to
+ * `React.ReactElement`. In React 18 the return type of `React.ExoticComponent`
+ * was changed from `React.ReactElement` to `React.ReactNode`, which breaks
+ * clients using React 16 and 17.
+ *
+ * @param primitive UI Primitive to be wrapped with `React.forwardRef`
+ * @returns ForwaredRef wrapped UI Primitive
+ */
+const primitiveWithForwardRef = (primitive) => React__namespace.forwardRef(primitive);
+
 const ViewPrimitive = ({ as = 'div', children, testId, ariaLabel, isDisabled, style, inert, ...rest }, ref) => {
     const { propStyles, nonStyleProps } = useStyles(rest, style);
     return React__namespace.createElement(as, {
@@ -651,7 +661,7 @@ const ViewPrimitive = ({ as = 'div', children, testId, ariaLabel, isDisabled, st
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/view)
  */
-const View = primitiveWithForwardRef.primitiveWithForwardRef(ViewPrimitive);
+const View = primitiveWithForwardRef(ViewPrimitive);
 View.displayName = 'View';
 
 const defaultViewBox = { minX: 0, minY: 0, width: 24, height: 24 };
@@ -681,7 +691,7 @@ as = 'svg', fill = 'currentColor', pathData, viewBox = defaultViewBox, children,
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/icon)
  */
-const Icon = primitiveWithForwardRef.primitiveWithForwardRef(IconPrimitive);
+const Icon = primitiveWithForwardRef(IconPrimitive);
 Icon.displayName = 'Icon';
 
 const IconsContext = React__namespace.createContext({});
@@ -994,7 +1004,7 @@ function useDropZone({ onDropComplete, onDragEnter: _onDragEnter, onDragLeave: _
 const FieldGroupIconPrimitive = ({ className, children, isVisible = true, excludeFromTabOrder = false, ...rest }, ref) => {
     return isVisible ? (React__namespace.createElement(View, { className: ui.classNames(ui.ComponentClassName.FieldGroupIcon, className), ref: ref, tabIndex: excludeFromTabOrder ? -1 : undefined, ...rest }, children)) : null;
 };
-const FieldGroupIcon = primitiveWithForwardRef.primitiveWithForwardRef(FieldGroupIconPrimitive);
+const FieldGroupIcon = primitiveWithForwardRef(FieldGroupIconPrimitive);
 FieldGroupIcon.displayName = 'FieldGroupIcon';
 
 const FieldsetContext = React__namespace.createContext({
@@ -1011,7 +1021,7 @@ const FlexPrimitive = ({ className, children, ...rest }, ref) => (React__namespa
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/flex)
  */
-const Flex = primitiveWithForwardRef.primitiveWithForwardRef(FlexPrimitive);
+const Flex = primitiveWithForwardRef(FlexPrimitive);
 Flex.displayName = 'Flex';
 
 const LINEAR_EMPTY = 'linear-empty';
@@ -1061,7 +1071,7 @@ const LoaderPrimitive = ({ className, filledColor, emptyColor, size, variation,
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/loader)
  */
-const Loader = primitiveWithForwardRef.primitiveWithForwardRef(LoaderPrimitive);
+const Loader = primitiveWithForwardRef(LoaderPrimitive);
 Loader.displayName = 'Loader';
 
 // These variations support colorThemes. 'undefined' accounts for our
@@ -1085,11 +1095,11 @@ const ButtonPrimitive = ({ className, children, colorTheme, isFullWidth = false,
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/button)
  */
-const Button = primitiveWithForwardRef.primitiveWithForwardRef(ButtonPrimitive);
+const Button = primitiveWithForwardRef(ButtonPrimitive);
 Button.displayName = 'Button';
 
 const FieldGroupIconButtonPrimitive = ({ children, className, ...rest }, ref) => (React__namespace.createElement(FieldGroupIcon, { as: Button, className: ui.classNames(ui.ComponentClassName.FieldGroupIconButton, className), ref: ref, ...rest }, children));
-const FieldGroupIconButton = primitiveWithForwardRef.primitiveWithForwardRef(FieldGroupIconButtonPrimitive);
+const FieldGroupIconButton = primitiveWithForwardRef(FieldGroupIconButtonPrimitive);
 FieldGroupIconButton.displayName = 'FieldGroupIconButton';
 
 const ariaLabelText = ComponentText.Fields.clearButtonLabel;
@@ -1097,7 +1107,7 @@ const FieldClearButtonPrimitive = ({ ariaLabel = ariaLabelText, size, ...rest },
     const icons = useIcons('field');
     return (React__namespace.createElement(FieldGroupIconButton, { ariaLabel: ariaLabel, size: size, ref: ref, ...rest }, icons?.clear ?? React__namespace.createElement(IconClose, null)));
 };
-const FieldClearButton = primitiveWithForwardRef.primitiveWithForwardRef(FieldClearButtonPrimitive);
+const FieldClearButton = primitiveWithForwardRef(FieldClearButtonPrimitive);
 FieldClearButton.displayName = 'FieldClearButton';
 
 const TextPrimitive = ({ as = 'p', className, children, isTruncated, variation, ...rest }, ref) => {
@@ -1107,7 +1117,7 @@ const TextPrimitive = ({ as = 'p', className, children, isTruncated, variation,
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/text)
  */
-const Text = primitiveWithForwardRef.primitiveWithForwardRef(TextPrimitive);
+const Text = primitiveWithForwardRef(TextPrimitive);
 Text.displayName = 'Text';
 
 const QA_FIELD_DESCRIPTION = 'qa-field-description';
@@ -1126,7 +1136,7 @@ const LabelPrimitive = ({ children, className, visuallyHidden, ...rest }, ref) =
             [ui.ComponentClassName.VisuallyHidden]: visuallyHidden,
         }), ref: ref, ...rest }, children));
 };
-const Label = primitiveWithForwardRef.primitiveWithForwardRef(LabelPrimitive);
+const Label = primitiveWithForwardRef(LabelPrimitive);
 Label.displayName = 'Label';
 
 const FieldPrimitive = (props, ref) => {
@@ -1137,7 +1147,7 @@ const FieldPrimitive = (props, ref) => {
         children,
         errorMessage ? (React__namespace.createElement(FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })) : null));
 };
-const Field = primitiveWithForwardRef.primitiveWithForwardRef(FieldPrimitive);
+const Field = primitiveWithForwardRef(FieldPrimitive);
 Field.displayName = 'Field';
 
 exports.ARROW_DOWN = ARROW_DOWN;
@@ -1185,6 +1195,7 @@ exports.View = View;
 exports.getConsecutiveIntArray = getConsecutiveIntArray;
 exports.getStyleValue = getStyleValue;
 exports.getValueAtCurrentBreakpoint = getValueAtCurrentBreakpoint;
+exports.primitiveWithForwardRef = primitiveWithForwardRef;
 exports.strHasLength = strHasLength;
 exports.useAuth = useAuth;
 exports.useBreakpoint = useBreakpoint;

package/dist/{ThemeStyle-b2dce96a.js → ThemeStyle-7d5abbc4.js}

@@ -1,7 +1,6 @@
 'use strict';
 
 var React = require('react');
-var primitiveWithForwardRef = require('./primitiveWithForwardRef-7e929242.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -23,10 +22,11 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-const ThemeStylePrimitive = ({ theme, nonce, ...rest }, ref) => {
-    if (!theme)
-        return null;
-    const { name, cssText } = theme;
+/**
+ * @experimental
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
+ */
+const Style = ({ cssText, ...rest }) => {
     /*
       Only inject theme CSS variables if given a theme.
       The CSS file users import already has the default theme variables in it.
@@ -72,20 +72,26 @@ const ThemeStylePrimitive = ({ theme, nonce, ...rest }, ref) => {
           Therefore, by only rendering CSS text which does not include a closing '</style>' tag,
           we ensure that the browser will correctly interpret all the text as CSS.
     */
-    if (/<\/style/i.test(cssText)) {
+    if (cssText === undefined || /<\/style/i.test(cssText)) {
         return null;
     }
-    else {
-        return (React__namespace.createElement("style", { ...rest, ref: ref, id: `amplify-theme-${name}`, 
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML: { __html: cssText }, nonce: nonce }));
-    }
+    return (React__namespace.createElement("style", { ...rest, 
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: { __html: cssText } }));
 };
+Style.displayName = 'Style';
+
 /**
  * @experimental
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
  */
-const ThemeStyle = primitiveWithForwardRef.primitiveWithForwardRef(ThemeStylePrimitive);
+const ThemeStyle = ({ theme, ...rest }) => {
+    if (!theme)
+        return null;
+    const { name, cssText } = theme;
+    return React__namespace.createElement(Style, { ...rest, cssText: cssText, id: `amplify-theme-${name}` });
+};
 ThemeStyle.displayName = 'ThemeStyle';
 
+exports.Style = Style;
 exports.ThemeStyle = ThemeStyle;

package/dist/esm/components/ThemeProvider/ComponentStyle.mjs

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { createComponentCSS } from '@aws-amplify/ui';
+import { Style } from './Style.mjs';
+
+/**
+ * @experimental
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
+ */
+const ComponentStyle = ({ theme, componentThemes = [], ...rest }) => {
+    if (!theme || !componentThemes.length) {
+        return null;
+    }
+    const cssText = createComponentCSS({
+        theme,
+        components: componentThemes,
+    });
+    return React.createElement(Style, { ...rest, cssText: cssText });
+};
+ComponentStyle.displayName = 'ComponentStyle';
+
+export { ComponentStyle };

package/dist/esm/components/ThemeProvider/GlobalStyle.mjs

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { createGlobalCSS } from '@aws-amplify/ui';
+import { Style } from './Style.mjs';
+
+/**
+ * @experimental
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
+ */
+const GlobalStyle = ({ styles, ...rest }) => {
+    if (!styles) {
+        return null;
+    }
+    const cssText = createGlobalCSS(styles);
+    return React.createElement(Style, { ...rest, cssText: cssText });
+};
+GlobalStyle.displayName = 'GlobalStyle';
+
+export { GlobalStyle };

package/dist/esm/components/ThemeProvider/Style.mjs

@@ -0,0 +1,62 @@
+import * as React from 'react';
+
+/**
+ * @experimental
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
+ */
+const Style = ({ cssText, ...rest }) => {
+    /*
+      Only inject theme CSS variables if given a theme.
+      The CSS file users import already has the default theme variables in it.
+      This will allow users to use the provider and theme with CSS variables
+      without having to worry about specificity issues because this stylesheet
+      will likely come after a user's defined CSS.
+  
+      Q: Why are we using dangerouslySetInnerHTML?
+      A: We need to directly inject the theme's CSS string into the <style> tag without typical HTML escaping.
+          For example, JSX would escape characters meaningful in CSS such as ', ", < and >, thus breaking the CSS.
+      Q: Why not use a sanitization library such as DOMPurify?
+      A: For our use case, we specifically want to purify CSS text, *not* HTML.
+          DOMPurify, as well as any other HTML sanitization library, would escape/encode meaningful CSS characters
+          and break our CSS in the same way that JSX would.
+  
+      Q: Are there any security risks in this particular use case?
+      A: Anything set inside of a <style> tag is always interpreted as CSS text, *not* HTML.
+          Reference: “Restrictions on the content of raw text elements” https://html.spec.whatwg.org/dev/syntax.html#cdata-rcdata-restrictions
+          And in our case, we are using dangerouslySetInnerHTML to set CSS text inside of a <style> tag.
+              
+          Thus, it really comes down to the question: Could a malicious user escape from the context of the <style> tag?
+          For example, when inserting HTML into the DOM, could someone prematurely close the </style> tag and add a <script> tag?
+            e.g., </style><script>alert('hello')</script>
+          The answer depends on whether the code is rendered on the client or server side.
+  
+          Client side
+          - To prevent XSS inside of the <style> tag, we need to make sure it's not closed prematurely.
+          - This is prevented by React because React creates a style DOM node (e.g., React.createElement(‘style’, ...)), and directly sets innerHTML as a string.
+          - Even if the string contains a closing </style> tag, it will still be interpreted as CSS text by the browser.
+          - Therefore, there is not an XSS vulnerability on the client side.
+  
+          Server side
+          - When React code is rendered on the server side (e.g., NextJS), the code is sent to the browser as HTML text.
+          - Therefore, it *IS* possible to insert a closing </style> tag and escape the CSS context, which opens an XSS vulnerability.
+  
+      Q: How are we mitigating the potential attack vector?
+      A: To fix this potential attack vector on the server side, we need to filter out any closing </style> tags,
+          as this the only way to escape from the context of the browser interpreting the text as CSS.
+          We also need to catch cases where there is any kind of whitespace character </style[HERE]>, such as tabs, carriage returns, etc:
+          </style
+          
+          >
+          Therefore, by only rendering CSS text which does not include a closing '</style>' tag,
+          we ensure that the browser will correctly interpret all the text as CSS.
+    */
+    if (cssText === undefined || /<\/style/i.test(cssText)) {
+        return null;
+    }
+    return (React.createElement("style", { ...rest, 
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: { __html: cssText } }));
+};
+Style.displayName = 'Style';
+
+export { Style };

package/dist/esm/components/ThemeProvider/ThemeStyle.mjs

@@ -1,69 +1,16 @@
 import * as React from 'react';
-import { primitiveWithForwardRef } from '../../primitives/utils/primitiveWithForwardRef.mjs';
+import { Style } from './Style.mjs';
 
-const ThemeStylePrimitive = ({ theme, nonce, ...rest }, ref) => {
-    if (!theme)
-        return null;
-    const { name, cssText } = theme;
-    /*
-      Only inject theme CSS variables if given a theme.
-      The CSS file users import already has the default theme variables in it.
-      This will allow users to use the provider and theme with CSS variables
-      without having to worry about specificity issues because this stylesheet
-      will likely come after a user's defined CSS.
-  
-      Q: Why are we using dangerouslySetInnerHTML?
-      A: We need to directly inject the theme's CSS string into the <style> tag without typical HTML escaping.
-          For example, JSX would escape characters meaningful in CSS such as ', ", < and >, thus breaking the CSS.
-      Q: Why not use a sanitization library such as DOMPurify?
-      A: For our use case, we specifically want to purify CSS text, *not* HTML.
-          DOMPurify, as well as any other HTML sanitization library, would escape/encode meaningful CSS characters
-          and break our CSS in the same way that JSX would.
-  
-      Q: Are there any security risks in this particular use case?
-      A: Anything set inside of a <style> tag is always interpreted as CSS text, *not* HTML.
-          Reference: “Restrictions on the content of raw text elements” https://html.spec.whatwg.org/dev/syntax.html#cdata-rcdata-restrictions
-          And in our case, we are using dangerouslySetInnerHTML to set CSS text inside of a <style> tag.
-              
-          Thus, it really comes down to the question: Could a malicious user escape from the context of the <style> tag?
-          For example, when inserting HTML into the DOM, could someone prematurely close the </style> tag and add a <script> tag?
-            e.g., </style><script>alert('hello')</script>
-          The answer depends on whether the code is rendered on the client or server side.
-  
-          Client side
-          - To prevent XSS inside of the <style> tag, we need to make sure it's not closed prematurely.
-          - This is prevented by React because React creates a style DOM node (e.g., React.createElement(‘style’, ...)), and directly sets innerHTML as a string.
-          - Even if the string contains a closing </style> tag, it will still be interpreted as CSS text by the browser.
-          - Therefore, there is not an XSS vulnerability on the client side.
-  
-          Server side
-          - When React code is rendered on the server side (e.g., NextJS), the code is sent to the browser as HTML text.
-          - Therefore, it *IS* possible to insert a closing </style> tag and escape the CSS context, which opens an XSS vulnerability.
-  
-      Q: How are we mitigating the potential attack vector?
-      A: To fix this potential attack vector on the server side, we need to filter out any closing </style> tags,
-          as this the only way to escape from the context of the browser interpreting the text as CSS.
-          We also need to catch cases where there is any kind of whitespace character </style[HERE]>, such as tabs, carriage returns, etc:
-          </style
-          
-          >
-          Therefore, by only rendering CSS text which does not include a closing '</style>' tag,
-          we ensure that the browser will correctly interpret all the text as CSS.
-    */
-    if (/<\/style/i.test(cssText)) {
-        return null;
-    }
-    else {
-        return (React.createElement("style", { ...rest, ref: ref, id: `amplify-theme-${name}`, 
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML: { __html: cssText }, nonce: nonce }));
-    }
-};
 /**
  * @experimental
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
  */
-const ThemeStyle = primitiveWithForwardRef(ThemeStylePrimitive);
+const ThemeStyle = ({ theme, ...rest }) => {
+    if (!theme)
+        return null;
+    const { name, cssText } = theme;
+    return React.createElement(Style, { ...rest, cssText: cssText, id: `amplify-theme-${name}` });
+};
 ThemeStyle.displayName = 'ThemeStyle';
 
 export { ThemeStyle };

package/dist/esm/server.mjs

@@ -1,2 +1,4 @@
 export { ThemeStyle } from './components/ThemeProvider/ThemeStyle.mjs';
+export { ComponentStyle } from './components/ThemeProvider/ComponentStyle.mjs';
+export { GlobalStyle } from './components/ThemeProvider/GlobalStyle.mjs';
 export { createComponentClasses, createTheme, defaultDarkModeOverride, defaultTheme, defineComponentTheme } from '@aws-amplify/ui';

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '6.4.0';
+const VERSION = '6.5.1';
 
 export { VERSION };