@aws-amplify/ui-react 6.3.1 → 6.4.0

package/dist/esm/PrimitiveCatalog.mjs

@@ -658,6 +658,9 @@ const PrimitiveCatalog = {
             "size": {
                 "type": "string"
             },
+            "isLoading": {
+                "type": "boolean"
+            },
             "isDisabled": {
                 "type": "boolean"
             },

package/dist/esm/primitives/Avatar/Avatar.mjs

@@ -7,12 +7,15 @@ import '../Icon/context/IconsContext.mjs';
 import { useIcons } from '../Icon/context/useIcons.mjs';
 import { IconUser } from '../Icon/icons/IconUser.mjs';
 import { Image } from '../Image/Image.mjs';
+import { Loader } from '../Loader/Loader.mjs';
 
-const AvatarPrimitive = ({ className, children, variation, colorTheme, size, src, alt, ...rest }, ref) => {
+const AvatarPrimitive = ({ className, children, variation, colorTheme, size, src, alt, isLoading, ...rest }, ref) => {
     const icons = useIcons('avatar');
     const icon = icons?.user ?? React.createElement(IconUser, null);
     const componentClasses = classNames(ComponentClassName.Avatar, className, classNameModifier(ComponentClassName.Avatar, variation), classNameModifier(ComponentClassName.Avatar, size), classNameModifier(ComponentClassName.Avatar, colorTheme));
-    return (React.createElement(View, { as: "span", className: componentClasses, ref: ref, ...rest }, src ? (React.createElement(Image, { className: ComponentClassName.AvatarImage, src: src, alt: alt })) : (children ?? (React.createElement(View, { as: "span", className: ComponentClassName.AvatarIcon, "aria-hidden": "true" }, icon)))));
+    return (React.createElement(View, { as: "span", className: componentClasses, ref: ref, ...rest },
+        src ? (React.createElement(Image, { className: ComponentClassName.AvatarImage, src: src, alt: alt })) : (children ?? (React.createElement(View, { as: "span", className: ComponentClassName.AvatarIcon, "aria-hidden": "true" }, icon))),
+        isLoading ? (React.createElement(Loader, { className: ComponentClassName.AvatarLoader })) : null));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/avatar)

package/dist/esm/version.mjs

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

package/dist/index.js

@@ -669,11 +669,13 @@ const ImagePrimitive = ({ className, ...rest }, ref) => (React__namespace.create
 const Image = primitiveWithForwardRef.primitiveWithForwardRef(ImagePrimitive);
 Image.displayName = 'Image';
 
-const AvatarPrimitive = ({ className, children, variation, colorTheme, size, src, alt, ...rest }, ref) => {
+const AvatarPrimitive = ({ className, children, variation, colorTheme, size, src, alt, isLoading, ...rest }, ref) => {
     const icons = Field.useIcons('avatar');
     const icon = icons?.user ?? React__namespace.createElement(Field.IconUser, null);
     const componentClasses = ui.classNames(ui.ComponentClassName.Avatar, className, ui.classNameModifier(ui.ComponentClassName.Avatar, variation), ui.classNameModifier(ui.ComponentClassName.Avatar, size), ui.classNameModifier(ui.ComponentClassName.Avatar, colorTheme));
-    return (React__namespace.createElement(Field.View, { as: "span", className: componentClasses, ref: ref, ...rest }, src ? (React__namespace.createElement(Image, { className: ui.ComponentClassName.AvatarImage, src: src, alt: alt })) : (children ?? (React__namespace.createElement(Field.View, { as: "span", className: ui.ComponentClassName.AvatarIcon, "aria-hidden": "true" }, icon)))));
+    return (React__namespace.createElement(Field.View, { as: "span", className: componentClasses, ref: ref, ...rest },
+        src ? (React__namespace.createElement(Image, { className: ui.ComponentClassName.AvatarImage, src: src, alt: alt })) : (children ?? (React__namespace.createElement(Field.View, { as: "span", className: ui.ComponentClassName.AvatarIcon, "aria-hidden": "true" }, icon))),
+        isLoading ? (React__namespace.createElement(Field.Loader, { className: ui.ComponentClassName.AvatarLoader })) : null));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/avatar)
@@ -2521,7 +2523,7 @@ const defaultDeleteUserDisplayText = {
     warningText: 'Deleting your account is not reversible. You will lose access to your account and all data associated with it.',
 };
 
-const VERSION = '6.3.1';
+const VERSION = '6.4.0';
 
 const logger$2 = ui.getLogger('AccountSettings');
 const getIsDisabled = (formValues, validationError) => {

package/dist/internal.js

@@ -818,6 +818,9 @@ const PrimitiveCatalog = {
             "size": {
                 "type": "string"
             },
+            "isLoading": {
+                "type": "boolean"
+            },
             "isDisabled": {
                 "type": "boolean"
             },

package/dist/styles/avatar.css

@@ -6,6 +6,7 @@
   --avatar-border-color: var(--amplify-components-avatar-border-color);
   --avatar-size: var(--amplify-components-avatar-width);
   --amplify-components-icon-height: 100%;
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -56,6 +57,9 @@
   --avatar-filled-color: var(
     --amplify-components-avatar-warning-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-warning-color
+  );
 }
 .amplify-avatar--error {
   --avatar-border-color: var(--amplify-components-avatar-error-border-color);
@@ -69,6 +73,9 @@
   --avatar-filled-color: var(
     --amplify-components-avatar-error-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-error-color
+  );
 }
 .amplify-avatar--info {
   --avatar-border-color: var(--amplify-components-avatar-info-border-color);
@@ -82,6 +89,9 @@
   --avatar-filled-color: var(
     --amplify-components-avatar-info-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-info-color
+  );
 }
 .amplify-avatar--success {
   --avatar-border-color: var(
@@ -97,6 +107,9 @@
   --avatar-filled-color: var(
     --amplify-components-avatar-success-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-success-color
+  );
 }
 .amplify-avatar__icon {
   display: flex;
@@ -108,4 +121,11 @@
   -o-object-fit: cover;
      object-fit: cover;
   display: block;
+}
+.amplify-avatar__loader {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  stroke: transparent;
 }

package/dist/styles/avatar.layer.css

@@ -7,6 +7,7 @@
   --avatar-border-color: var(--amplify-components-avatar-border-color);
   --avatar-size: var(--amplify-components-avatar-width);
   --amplify-components-icon-height: 100%;
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -57,6 +58,9 @@
   --avatar-filled-color: var(
     --amplify-components-avatar-warning-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-warning-color
+  );
 }
 .amplify-avatar--error {
   --avatar-border-color: var(--amplify-components-avatar-error-border-color);
@@ -70,6 +74,9 @@
   --avatar-filled-color: var(
     --amplify-components-avatar-error-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-error-color
+  );
 }
 .amplify-avatar--info {
   --avatar-border-color: var(--amplify-components-avatar-info-border-color);
@@ -83,6 +90,9 @@
   --avatar-filled-color: var(
     --amplify-components-avatar-info-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-info-color
+  );
 }
 .amplify-avatar--success {
   --avatar-border-color: var(
@@ -98,6 +108,9 @@
   --avatar-filled-color: var(
     --amplify-components-avatar-success-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-success-color
+  );
 }
 .amplify-avatar__icon {
   display: flex;
@@ -110,4 +123,11 @@
      object-fit: cover;
   display: block;
 }
+.amplify-avatar__loader {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  stroke: transparent;
+}
 }

package/dist/styles.css

@@ -3519,6 +3519,7 @@ strong.amplify-text {
   --avatar-border-color: var(--amplify-components-avatar-border-color);
   --avatar-size: var(--amplify-components-avatar-width);
   --amplify-components-icon-height: 100%;
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3569,6 +3570,9 @@ strong.amplify-text {
   --avatar-filled-color: var(
     --amplify-components-avatar-warning-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-warning-color
+  );
 }
 .amplify-avatar--error {
   --avatar-border-color: var(--amplify-components-avatar-error-border-color);
@@ -3582,6 +3586,9 @@ strong.amplify-text {
   --avatar-filled-color: var(
     --amplify-components-avatar-error-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-error-color
+  );
 }
 .amplify-avatar--info {
   --avatar-border-color: var(--amplify-components-avatar-info-border-color);
@@ -3595,6 +3602,9 @@ strong.amplify-text {
   --avatar-filled-color: var(
     --amplify-components-avatar-info-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-info-color
+  );
 }
 .amplify-avatar--success {
   --avatar-border-color: var(
@@ -3610,6 +3620,9 @@ strong.amplify-text {
   --avatar-filled-color: var(
     --amplify-components-avatar-success-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-success-color
+  );
 }
 .amplify-avatar__icon {
   display: flex;
@@ -3622,6 +3635,13 @@ strong.amplify-text {
      object-fit: cover;
   display: block;
 }
+.amplify-avatar__loader {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  stroke: transparent;
+}
 
 .amplify-breadcrumbs__list {
   display: flex;

package/dist/styles.layer.css

@@ -3520,6 +3520,7 @@ strong.amplify-text {
   --avatar-border-color: var(--amplify-components-avatar-border-color);
   --avatar-size: var(--amplify-components-avatar-width);
   --amplify-components-icon-height: 100%;
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3570,6 +3571,9 @@ strong.amplify-text {
   --avatar-filled-color: var(
     --amplify-components-avatar-warning-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-warning-color
+  );
 }
 .amplify-avatar--error {
   --avatar-border-color: var(--amplify-components-avatar-error-border-color);
@@ -3583,6 +3587,9 @@ strong.amplify-text {
   --avatar-filled-color: var(
     --amplify-components-avatar-error-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-error-color
+  );
 }
 .amplify-avatar--info {
   --avatar-border-color: var(--amplify-components-avatar-info-border-color);
@@ -3596,6 +3603,9 @@ strong.amplify-text {
   --avatar-filled-color: var(
     --amplify-components-avatar-info-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-info-color
+  );
 }
 .amplify-avatar--success {
   --avatar-border-color: var(
@@ -3611,6 +3621,9 @@ strong.amplify-text {
   --avatar-filled-color: var(
     --amplify-components-avatar-success-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-success-color
+  );
 }
 .amplify-avatar__icon {
   display: flex;
@@ -3623,6 +3636,13 @@ strong.amplify-text {
      object-fit: cover;
   display: block;
 }
+.amplify-avatar__loader {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  stroke: transparent;
+}
 
 .amplify-breadcrumbs__list {
   display: flex;

package/dist/types/primitives/Avatar/types.d.ts

@@ -31,6 +31,11 @@ export interface BaseAvatarProps extends BaseViewProps {
      * The size property will affect the size of the avatar.
      */
     size?: AvatarSizes;
+    /**
+     * @description
+     * The isLoading property will display a loader around the avatar
+     */
+    isLoading?: boolean;
 }
 export type AvatarProps<Element extends ElementType = 'span'> = PrimitiveProps<BaseAvatarProps, Element>;
 export {};

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "6.3.1";
+export declare const VERSION = "6.4.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react",
-  "version": "6.3.1",
+  "version": "6.4.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -55,8 +55,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.4.1",
-    "@aws-amplify/ui-react-core": "3.0.22",
+    "@aws-amplify/ui": "6.5.0",
+    "@aws-amplify/ui-react-core": "3.0.23",
     "@radix-ui/react-direction": "1.0.0",
     "@radix-ui/react-dropdown-menu": "1.0.0",
     "@radix-ui/react-slider": "1.0.0",