@aws-amplify/ui-react 6.2.2 → 6.3.0

package/dist/esm/primitives/TextArea/useAutoresizeTextarea.mjs

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+
+// Updates the height of a <textarea> when the value changes.
+const useAutoresizeTextArea = (textAreaRef, value) => {
+    useEffect(() => {
+        const resizeTextArea = () => {
+            if (textAreaRef && value) {
+                // We need to reset the height momentarily to get the correct scrollHeight for the textarea
+                textAreaRef.style.height = 'auto';
+                const { scrollHeight } = textAreaRef;
+                // We then set the height directly, outside of the render loop
+                // Trying to set this with state or a ref will product an incorrect value.
+                textAreaRef.style.height = `${scrollHeight}px`;
+            }
+        };
+        resizeTextArea();
+        window.addEventListener('resize', resizeTextArea);
+        return () => {
+            window.removeEventListener('resize', resizeTextArea);
+        };
+    }, [
+        textAreaRef,
+        // Trigger the effect if the value changes
+        value,
+    ]);
+};
+
+export { useAutoresizeTextArea };

package/dist/esm/primitives/TextAreaField/TextAreaField.mjs

@@ -8,6 +8,7 @@ import { Flex } from '../Flex/Flex.mjs';
 import { Label } from '../Label/Label.mjs';
 import { splitPrimitiveProps } from '../utils/splitPrimitiveProps.mjs';
 import { TextArea } from '../TextArea/TextArea.mjs';
+import { AutoresizeTextArea } from '../TextArea/AutoresizeTextarea.mjs';
 import { useStableId } from '../utils/useStableId.mjs';
 import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
 import { createSpaceSeparatedIds } from '../utils/createSpaceSeparatedIds.mjs';
@@ -16,7 +17,7 @@ import { getUniqueComponentId } from '../utils/getUniqueComponentId.mjs';
 
 const DEFAULT_ROW_COUNT = 3;
 const TextAreaFieldPrimitive = (props, ref) => {
-    const { className, descriptiveText, errorMessage, hasError = false, id, label, labelHidden = false, rows, size, testId, inputStyles, 
+    const { className, descriptiveText, errorMessage, hasError = false, id, label, labelHidden = false, rows, size, testId, inputStyles, autoResize, 
     // Destructuring the 'resize' style prop because while it is a style prop
     // it should go on the textarea element and not the wrapper div.
     resize, ..._rest } = props;
@@ -33,7 +34,7 @@ const TextAreaFieldPrimitive = (props, ref) => {
     return (React.createElement(Flex, { className: classNames(ComponentClassName.Field, classNameModifier(ComponentClassName.Field, size), ComponentClassName.TextAreaField, className), testId: testId, ...styleProps },
         React.createElement(Label, { htmlFor: fieldId, visuallyHidden: labelHidden }, label),
         React.createElement(FieldDescription, { id: descriptionId, labelHidden: labelHidden, descriptiveText: descriptiveText }),
-        React.createElement(TextArea, { "aria-describedby": ariaDescribedBy, hasError: hasError, id: fieldId, ref: ref, rows: rows ?? DEFAULT_ROW_COUNT, size: size, resize: resize, ...rest, ...inputStyles }),
+        autoResize ? (React.createElement(AutoresizeTextArea, { "aria-describedby": ariaDescribedBy, hasError: hasError, id: fieldId, ref: ref, rows: rows ?? DEFAULT_ROW_COUNT, size: size, resize: resize, ...rest, ...inputStyles })) : (React.createElement(TextArea, { "aria-describedby": ariaDescribedBy, hasError: hasError, id: fieldId, ref: ref, rows: rows ?? DEFAULT_ROW_COUNT, size: size, resize: resize, ...rest, ...inputStyles })),
         React.createElement(FieldErrorMessage, { id: errorId, hasError: hasError, errorMessage: errorMessage })));
 };
 /**

package/dist/esm/primitives/index.mjs

@@ -1,5 +1,6 @@
 export { Alert } from './Alert/Alert.mjs';
 export { Autocomplete } from './Autocomplete/Autocomplete.mjs';
+export { Avatar } from './Avatar/Avatar.mjs';
 export { Badge } from './Badge/Badge.mjs';
 export { Breadcrumbs } from './Breadcrumbs/Breadcrumbs.mjs';
 export { Button } from './Button/Button.mjs';

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '6.2.2';
+const VERSION = '6.3.0';
 
 export { VERSION };

package/dist/index.js

@@ -6,7 +6,7 @@ var React = require('react');
 var isEqual = require('lodash/isEqual.js');
 var uiReactCore = require('@aws-amplify/ui-react-core');
 var ui = require('@aws-amplify/ui');
-var Field = require('./Field-d47a49dc.js');
+var Field = require('./Field-4b189104.js');
 require('aws-amplify/storage');
 var primitiveWithForwardRef = require('./primitiveWithForwardRef-7e929242.js');
 var debounce = require('lodash/debounce.js');
@@ -102,7 +102,42 @@ const AutocompleteOptionPrimitive = ({ children, className, isActive, ...rest },
 const AutocompleteOption = primitiveWithForwardRef.primitiveWithForwardRef(AutocompleteOptionPrimitive);
 AutocompleteOption.displayName = 'AutocompleteOption';
 
-const ScrollViewPrimitive = ({ children, className, orientation, ...rest }, ref) => (React__namespace.createElement(Field.View, { className: ui.classNames(ui.ComponentClassName.ScrollView, ui.classNameModifier(ui.ComponentClassName.ScrollView, orientation), className), ref: ref, ...rest }, children));
+/**
+ *  Creates ref callback to compose together external and internal refs
+ */
+function useComposeRefsCallback({ externalRef, internalRef, }) {
+    return React__namespace.useCallback((node) => {
+        // Handle callback ref
+        if (ui.isFunction(externalRef)) {
+            externalRef(node);
+        }
+        else if (externalRef) {
+            externalRef.current = node;
+        }
+        internalRef.current = node;
+    }, [externalRef, internalRef]);
+}
+
+const ScrollViewPrimitive = ({ children, className, orientation, autoScroll, ...rest }, externalRef) => {
+    const internalRef = React__namespace.useRef(null);
+    const composedRefs = useComposeRefsCallback({
+        externalRef,
+        internalRef,
+    });
+    React__namespace.useEffect(() => {
+        if (autoScroll) {
+            internalRef.current?.scrollTo({
+                top: internalRef.current?.scrollHeight,
+                left: internalRef.current?.scrollWidth,
+                behavior: autoScroll,
+            });
+        }
+    }, [
+        children,
+        autoScroll,
+    ]);
+    return (React__namespace.createElement(Field.View, { className: ui.classNames(ui.ComponentClassName.ScrollView, ui.classNameModifier(ui.ComponentClassName.ScrollView, orientation), className), ref: composedRefs, ...rest }, children));
+};
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/scrollview)
  */
@@ -493,22 +528,6 @@ const TextFieldPrimitive = (props, ref) => {
 const TextField = primitiveWithForwardRef.primitiveWithForwardRef(TextFieldPrimitive);
 TextField.displayName = 'TextField';
 
-/**
- *  Creates ref callback to compose together external and internal refs
- */
-function useComposeRefsCallback({ externalRef, internalRef, }) {
-    return React__namespace.useCallback((node) => {
-        // Handle callback ref
-        if (ui.isFunction(externalRef)) {
-            externalRef(node);
-        }
-        else if (externalRef) {
-            externalRef.current = node;
-        }
-        internalRef.current = node;
-    }, [externalRef, internalRef]);
-}
-
 const DEFAULT_KEYS = new Set([Field.ESCAPE_KEY, Field.ENTER_KEY]);
 const useSearchField = ({ defaultValue = '', value, onChange, onClear, onSubmit, externalRef, }) => {
     const isControlled = value !== undefined;
@@ -643,6 +662,25 @@ const AutocompletePrimitive = ({ className, defaultValue, value, isLoading = fal
 const Autocomplete = primitiveWithForwardRef.primitiveWithForwardRef(AutocompletePrimitive);
 Autocomplete.displayName = 'Autocomplete';
 
+const ImagePrimitive = ({ className, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: "img", ref: ref, className: ui.classNames(ui.ComponentClassName.Image, className), ...rest }));
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/image)
+ */
+const Image = primitiveWithForwardRef.primitiveWithForwardRef(ImagePrimitive);
+Image.displayName = 'Image';
+
+const AvatarPrimitive = ({ className, children, variation, colorTheme, size, src, alt, ...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)))));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/avatar)
+ */
+const Avatar = primitiveWithForwardRef.primitiveWithForwardRef(AvatarPrimitive);
+Avatar.displayName = 'Avatar';
+
 const BadgePrimitive = ({ className, children, variation, size, ...rest }, ref) => {
     const componentClasses = ui.classNames(ui.ComponentClassName.Badge, className, ui.classNameModifier(ui.ComponentClassName.Badge, variation), ui.classNameModifier(ui.ComponentClassName.Badge, size));
     return (React__namespace.createElement(Field.View, { as: "span", className: componentClasses, ref: ref, ...rest }, children));
@@ -1345,13 +1383,6 @@ const HeadingPrimitive = ({ className, children, isTruncated, level = 6, ...rest
 const Heading = primitiveWithForwardRef.primitiveWithForwardRef(HeadingPrimitive);
 Heading.displayName = 'Heading';
 
-const ImagePrimitive = ({ className, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: "img", ref: ref, className: ui.classNames(ui.ComponentClassName.Image, className), ...rest }));
-/**
- * [📖 Docs](https://ui.docs.amplify.aws/react/components/image)
- */
-const Image = primitiveWithForwardRef.primitiveWithForwardRef(ImagePrimitive);
-Image.displayName = 'Image';
-
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/menu)
  */
@@ -2219,9 +2250,46 @@ const TextAreaPrimitive = ({ className, isDisabled, isReadOnly, isRequired, size
 const TextArea = primitiveWithForwardRef.primitiveWithForwardRef(TextAreaPrimitive);
 TextArea.displayName = 'TextArea';
 
+// Updates the height of a <textarea> when the value changes.
+const useAutoresizeTextArea = (textAreaRef, value) => {
+    React.useEffect(() => {
+        const resizeTextArea = () => {
+            if (textAreaRef && value) {
+                // We need to reset the height momentarily to get the correct scrollHeight for the textarea
+                textAreaRef.style.height = 'auto';
+                const { scrollHeight } = textAreaRef;
+                // We then set the height directly, outside of the render loop
+                // Trying to set this with state or a ref will product an incorrect value.
+                textAreaRef.style.height = `${scrollHeight}px`;
+            }
+        };
+        resizeTextArea();
+        window.addEventListener('resize', resizeTextArea);
+        return () => {
+            window.removeEventListener('resize', resizeTextArea);
+        };
+    }, [
+        textAreaRef,
+        // Trigger the effect if the value changes
+        value,
+    ]);
+};
+
+const AutoresizeTextAreaPrimitive = ({ value, ...rest }, externalRef) => {
+    const internalRef = React__namespace.useRef(null);
+    useAutoresizeTextArea(internalRef.current, value);
+    const composedRef = useComposeRefsCallback({
+        externalRef,
+        internalRef,
+    });
+    return React__namespace.createElement(TextArea, { ...rest, ref: composedRef, value: value });
+};
+const AutoresizeTextArea = primitiveWithForwardRef.primitiveWithForwardRef(AutoresizeTextAreaPrimitive);
+AutoresizeTextArea.displayName = 'AutoresizeTextArea';
+
 const DEFAULT_ROW_COUNT = 3;
 const TextAreaFieldPrimitive = (props, ref) => {
-    const { className, descriptiveText, errorMessage, hasError = false, id, label, labelHidden = false, rows, size, testId, inputStyles, 
+    const { className, descriptiveText, errorMessage, hasError = false, id, label, labelHidden = false, rows, size, testId, inputStyles, autoResize, 
     // Destructuring the 'resize' style prop because while it is a style prop
     // it should go on the textarea element and not the wrapper div.
     resize, ..._rest } = props;
@@ -2238,7 +2306,7 @@ const TextAreaFieldPrimitive = (props, ref) => {
     return (React__namespace.createElement(Field.Flex, { className: ui.classNames(ui.ComponentClassName.Field, ui.classNameModifier(ui.ComponentClassName.Field, size), ui.ComponentClassName.TextAreaField, className), testId: testId, ...styleProps },
         React__namespace.createElement(Field.Label, { htmlFor: fieldId, visuallyHidden: labelHidden }, label),
         React__namespace.createElement(Field.FieldDescription, { id: descriptionId, labelHidden: labelHidden, descriptiveText: descriptiveText }),
-        React__namespace.createElement(TextArea, { "aria-describedby": ariaDescribedBy, hasError: hasError, id: fieldId, ref: ref, rows: rows ?? DEFAULT_ROW_COUNT, size: size, resize: resize, ...rest, ...inputStyles }),
+        autoResize ? (React__namespace.createElement(AutoresizeTextArea, { "aria-describedby": ariaDescribedBy, hasError: hasError, id: fieldId, ref: ref, rows: rows ?? DEFAULT_ROW_COUNT, size: size, resize: resize, ...rest, ...inputStyles })) : (React__namespace.createElement(TextArea, { "aria-describedby": ariaDescribedBy, hasError: hasError, id: fieldId, ref: ref, rows: rows ?? DEFAULT_ROW_COUNT, size: size, resize: resize, ...rest, ...inputStyles })),
         React__namespace.createElement(Field.FieldErrorMessage, { id: errorId, hasError: hasError, errorMessage: errorMessage })));
 };
 /**
@@ -2348,6 +2416,7 @@ var index$1 = /*#__PURE__*/Object.freeze({
     IconsProvider: IconsProvider,
     Alert: Alert,
     Autocomplete: Autocomplete,
+    Avatar: Avatar,
     Badge: Badge,
     Breadcrumbs: Breadcrumbs,
     Button: Field.Button,
@@ -2452,7 +2521,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.2.2';
+const VERSION = '6.3.0';
 
 const logger$2 = ui.getLogger('AccountSettings');
 const getIsDisabled = (formValues, validationError) => {
@@ -3481,6 +3550,7 @@ exports.AccountSettings = AccountSettings;
 exports.Alert = Alert;
 exports.Authenticator = Authenticator;
 exports.Autocomplete = Autocomplete;
+exports.Avatar = Avatar;
 exports.Badge = Badge;
 exports.Breadcrumbs = Breadcrumbs;
 exports.ButtonGroup = ButtonGroup;