@aws-amplify/ui-react 6.1.13 → 6.2.0

package/dist/esm/primitives/StepperField/StepperField.mjs

@@ -21,6 +21,9 @@ import { ComponentText } from '../shared/constants.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 DECREASE_ICON = 'decrease-icon';
 const INCREASE_ICON = 'increase-icon';
@@ -33,8 +36,14 @@ const StepperFieldPrimitive = (props, ref) => {
     // this is only required in useStepper hook but deconstruct here to remove its existence in rest
     value: controlledValue, variation, ..._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);
     const icons = useIcons('stepperField');
     const { step, value, inputValue, handleDecrease, handleIncrease, handleOnBlur, handleOnChange, handleOnWheel, setInputValue, shouldDisableDecreaseButton, shouldDisableIncreaseButton, } = useStepper({ ...props, defaultValue, onStepChange });
@@ -49,7 +58,7 @@ const StepperFieldPrimitive = (props, ref) => {
         React.createElement(FieldDescription, { id: descriptionId, labelHidden: labelHidden, descriptiveText: descriptiveText }),
         React.createElement(FieldGroup, { outerStartComponent: React.createElement(FieldGroupIconButton, { "aria-controls": fieldId, ariaLabel: `${decreaseButtonLabel} ${value - step}`, className: classNames(ComponentClassName.StepperFieldButtonDecrease, classNameModifier(ComponentClassName.StepperFieldButtonDecrease, variation), classNameModifierByFlag(ComponentClassName.StepperFieldButtonDecrease, 'disabled', shouldDisableDecreaseButton)), "data-invalid": hasError, isDisabled: shouldDisableDecreaseButton, onClick: handleDecrease, size: size }, icons?.remove ?? React.createElement(IconRemove, { "data-testid": DECREASE_ICON })), outerEndComponent: React.createElement(FieldGroupIconButton, { "aria-controls": fieldId, ariaLabel: `${increaseButtonLabel} ${value + step}`, className: classNames(ComponentClassName.StepperFieldButtonIncrease, classNameModifier(ComponentClassName.StepperFieldButtonIncrease, variation), classNameModifierByFlag(ComponentClassName.StepperFieldButtonIncrease, 'disabled', shouldDisableIncreaseButton)), "data-invalid": hasError, isDisabled: shouldDisableIncreaseButton, onClick: handleIncrease, size: size }, icons?.add ?? React.createElement(IconAdd, { "data-testid": INCREASE_ICON })) },
             React.createElement(Input, { "aria-describedby": ariaDescribedBy, className: ComponentClassName.StepperFieldInput, hasError: hasError, id: fieldId, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, onBlur: handleOnBlur, onChange: handleOnChange, onWheel: handleOnWheel, ref: ref, size: size, variation: variation, type: "number", value: inputValue, ...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/stepperfield)

package/dist/esm/primitives/Tabs/TabsContainer.mjs

@@ -3,8 +3,10 @@ import { isFunction, classNames, ComponentClassName } from '@aws-amplify/ui';
 import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
 import { View } from '../View/View.mjs';
 import { TabsContext } from './TabsContext.mjs';
+import { useStableId } from '../utils/useStableId.mjs';
 
 const TabsContainerPrimitive = ({ children, defaultValue, className, value: controlledValue, onValueChange, isLazy, ...rest }, ref) => {
+    const groupId = useStableId(); // groupId is used to ensure uniqueness between Tab Groups in IDs
     const isControlled = controlledValue !== undefined;
     const [localValue, setLocalValue] = React.useState(() => isControlled ? controlledValue : defaultValue);
     const activeTab = isControlled ? controlledValue : localValue ?? '';
@@ -21,8 +23,9 @@ const TabsContainerPrimitive = ({ children, defaultValue, className, value: cont
             activeTab,
             isLazy,
             setActiveTab,
+            groupId,
         };
-    }, [activeTab, setActiveTab, isLazy]);
+    }, [activeTab, setActiveTab, isLazy, groupId]);
     return (React.createElement(TabsContext.Provider, { value: _value },
         React.createElement(View, { ...rest, ref: ref, className: classNames(className, ComponentClassName.Tabs) }, children)));
 };

package/dist/esm/primitives/Tabs/TabsContext.mjs

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 const TabsContext = React.createContext({
+    groupId: '',
     activeTab: '',
     setActiveTab: () => { },
 });

package/dist/esm/primitives/Tabs/TabsItem.mjs

@@ -3,9 +3,14 @@ import { classNames, ComponentClassName, classNameModifierByFlag, isTypedFunctio
 import { View } from '../View/View.mjs';
 import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
 import { TabsContext } from './TabsContext.mjs';
+import { WHITESPACE_VALUE } from './constants.mjs';
 
 const TabsItemPrimitive = ({ className, value, children, onClick, as = 'button', role = 'tab', ...rest }, ref) => {
-    const { activeTab, setActiveTab } = React.useContext(TabsContext);
+    const { activeTab, setActiveTab, groupId } = React.useContext(TabsContext);
+    let idValue = value;
+    if (typeof idValue === 'string') {
+        idValue = idValue.replace(' ', WHITESPACE_VALUE);
+    }
     const isActive = activeTab === value;
     const handleOnClick = (e) => {
         if (isTypedFunction(onClick)) {
@@ -13,7 +18,7 @@ const TabsItemPrimitive = ({ className, value, children, onClick, as = 'button',
         }
         setActiveTab(value);
     };
-    return (React.createElement(View, { ...rest, role: role, as: as, id: `${value}-tab`, "aria-selected": isActive, "aria-controls": `${value}-panel`, tabIndex: !isActive ? -1 : undefined, className: classNames(ComponentClassName.TabsItem, classNameModifierByFlag(ComponentClassName.TabsItem, 'active', activeTab === value), className), ref: ref, onClick: handleOnClick }, children));
+    return (React.createElement(View, { ...rest, role: role, as: as, id: `${groupId}-tab-${idValue}`, "aria-selected": isActive, "aria-controls": `${groupId}-panel-${idValue}`, tabIndex: !isActive ? -1 : undefined, className: classNames(ComponentClassName.TabsItem, classNameModifierByFlag(ComponentClassName.TabsItem, 'active', activeTab === value), className), ref: ref, onClick: handleOnClick }, children));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/tabs)

package/dist/esm/primitives/Tabs/TabsPanel.mjs

@@ -3,12 +3,17 @@ import { classNames, ComponentClassName, classNameModifierByFlag } from '@aws-am
 import { View } from '../View/View.mjs';
 import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
 import { TabsContext } from './TabsContext.mjs';
+import { WHITESPACE_VALUE } from './constants.mjs';
 
 const TabPanelPrimitive = ({ className, value, children, role = 'tabpanel', ...rest }, ref) => {
-    const { activeTab, isLazy } = React.useContext(TabsContext);
+    const { activeTab, isLazy, groupId } = React.useContext(TabsContext);
     if (isLazy && activeTab !== value)
         return null;
-    return (React.createElement(View, { ...rest, role: role, id: `${value}-panel`, "aria-labelledby": `${value}-tab`, className: classNames(ComponentClassName.TabsPanel, classNameModifierByFlag(ComponentClassName.TabsPanel, 'active', activeTab === value), className), ref: ref }, children));
+    let idValue = value;
+    if (typeof idValue === 'string') {
+        idValue = idValue.replace(' ', WHITESPACE_VALUE);
+    }
+    return (React.createElement(View, { ...rest, role: role, id: `${groupId}-panel-${idValue}`, "aria-labelledby": `${groupId}-tab-${idValue}`, className: classNames(ComponentClassName.TabsPanel, classNameModifierByFlag(ComponentClassName.TabsPanel, 'active', activeTab === value), className), ref: ref }, children));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/tabs)

package/dist/esm/primitives/Tabs/constants.mjs

@@ -0,0 +1,4 @@
+/* WHITESPACE_VALUE is used to fill whitespace present in user-inputed `value` when creating id for TabsItem and TabsPanel */
+const WHITESPACE_VALUE = '-';
+
+export { WHITESPACE_VALUE };

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.13';
+const VERSION = '6.2.0';
 
 export { VERSION };