@aws-amplify/ui-react 6.1.14 → 6.2.0

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

@@ -10,6 +10,9 @@ import { splitPrimitiveProps } from '../utils/splitPrimitiveProps.mjs';
 import { TextArea } from '../TextArea/TextArea.mjs';
 import { useStableId } from '../utils/useStableId.mjs';
 import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+import { createSpaceSeparatedIds } from '../utils/createSpaceSeparatedIds.mjs';
+import { DESCRIPTION_SUFFIX, ERROR_SUFFIX } from '../../helpers/constants.mjs';
+import { getUniqueComponentId } from '../utils/getUniqueComponentId.mjs';
 
 const DEFAULT_ROW_COUNT = 3;
 const TextAreaFieldPrimitive = (props, ref) => {
@@ -18,14 +21,20 @@ const TextAreaFieldPrimitive = (props, ref) => {
     // it should go on the textarea element and not the wrapper div.
     resize, ..._rest } = props;
     const fieldId = useStableId(id);
-    const descriptionId = useStableId();
-    const ariaDescribedBy = descriptiveText ? descriptionId : undefined;
+    const stableId = useStableId();
+    const descriptionId = descriptiveText
+        ? getUniqueComponentId(stableId, DESCRIPTION_SUFFIX)
+        : undefined;
+    const errorId = hasError
+        ? getUniqueComponentId(stableId, ERROR_SUFFIX)
+        : undefined;
+    const ariaDescribedBy = createSpaceSeparatedIds([errorId, descriptionId]);
     const { styleProps, rest } = splitPrimitiveProps(_rest);
     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 }),
-        React.createElement(FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+        React.createElement(FieldErrorMessage, { id: errorId, hasError: hasError, errorMessage: errorMessage })));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/textareafield)

package/dist/esm/primitives/TextField/TextField.mjs

@@ -11,19 +11,28 @@ import { Label } from '../Label/Label.mjs';
 import { splitPrimitiveProps } from '../utils/splitPrimitiveProps.mjs';
 import { useStableId } from '../utils/useStableId.mjs';
 import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+import { createSpaceSeparatedIds } from '../utils/createSpaceSeparatedIds.mjs';
+import { DESCRIPTION_SUFFIX, ERROR_SUFFIX } from '../../helpers/constants.mjs';
+import { getUniqueComponentId } from '../utils/getUniqueComponentId.mjs';
 
 const TextFieldPrimitive = (props, ref) => {
     const { className, descriptiveText, errorMessage, hasError = false, id, innerEndComponent, innerStartComponent, label, labelHidden = false, outerEndComponent, outerStartComponent, size, testId, variation, inputStyles, ..._rest } = props;
     const fieldId = useStableId(id);
-    const descriptionId = useStableId();
-    const ariaDescribedBy = descriptiveText ? descriptionId : undefined;
+    const stableId = useStableId();
+    const descriptionId = descriptiveText
+        ? getUniqueComponentId(stableId, DESCRIPTION_SUFFIX)
+        : undefined;
+    const errorId = hasError
+        ? getUniqueComponentId(stableId, ERROR_SUFFIX)
+        : undefined;
+    const ariaDescribedBy = createSpaceSeparatedIds([errorId, descriptionId]);
     const { styleProps, rest } = splitPrimitiveProps(_rest);
     return (React.createElement(Flex, { className: classNames(ComponentClassName.Field, classNameModifier(ComponentClassName.Field, size), ComponentClassName.TextField, className), testId: testId, ...styleProps },
         React.createElement(Label, { htmlFor: fieldId, visuallyHidden: labelHidden }, label),
         React.createElement(FieldDescription, { id: descriptionId, labelHidden: labelHidden, descriptiveText: descriptiveText }),
         React.createElement(FieldGroup, { outerStartComponent: outerStartComponent, outerEndComponent: outerEndComponent, innerStartComponent: innerStartComponent, innerEndComponent: innerEndComponent, variation: variation },
             React.createElement(Input, { "aria-describedby": ariaDescribedBy, hasError: hasError, id: fieldId, ref: ref, size: size, variation: variation, ...inputStyles, ...rest })),
-        React.createElement(FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+        React.createElement(FieldErrorMessage, { id: errorId, hasError: hasError, errorMessage: errorMessage })));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/textfield)

package/dist/esm/primitives/utils/createSpaceSeparatedIds.mjs

@@ -0,0 +1,13 @@
+/**
+ * Joins an array of strings and undefined values into a single string with spaces as separators.
+ * If all elements are undefined, returns undefined.
+ *
+ * @param {(string | undefined)[]} ids - An array of strings or undefined values.
+ * @returns {string | undefined} A single string with space-separated IDs, or undefined if all elements are undefined.
+ */
+const createSpaceSeparatedIds = (ids) => {
+    const joinedIds = ids.filter((id) => id !== undefined).join(' ');
+    return joinedIds.length > 0 ? joinedIds : undefined;
+};
+
+export { createSpaceSeparatedIds };

package/dist/esm/primitives/utils/getUniqueComponentId.mjs

@@ -0,0 +1,3 @@
+const getUniqueComponentId = (id, suffix) => (id && suffix ? `${id}-${suffix}` : undefined);
+
+export { getUniqueComponentId };

package/dist/esm/server.mjs

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

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '6.1.14';
+const VERSION = '6.2.0';
 
 export { VERSION };