@aws-amplify/ui-react 5.3.2 → 6.0.0

package/dist/esm/primitives/Alert/Alert.mjs

@@ -1 +1,36 @@
-import{__rest as e}from"tslib";import*as t from"react";import s from"classnames";import{isFunction as i,classNameModifier as o}from"@aws-amplify/ui";import{ComponentClassNames as a,ComponentText as r}from"../shared/constants.mjs";import{View as m}from"../View/View.mjs";import{Flex as n}from"../Flex/Flex.mjs";import{Button as l}from"../Button/Button.mjs";import{AlertIcon as c}from"./AlertIcon.mjs";import"../Icon/Icon.mjs";import"../Icon/context/IconsContext.mjs";import{useIcons as d}from"../Icon/context/useIcons.mjs";import{IconClose as f}from"../Icon/icons/IconClose.mjs";const p=t.forwardRef(((p,u)=>{var b,{buttonRef:I,children:j,className:h,dismissButtonLabel:v=r.Alert.dismissButtonLabel,hasIcon:A=!0,heading:x,isDismissible:E=!1,onDismiss:N,variation:B}=p,D=e(p,["buttonRef","children","className","dismissButtonLabel","hasIcon","heading","isDismissible","onDismiss","variation"]);const[g,w]=t.useState(!1),C=d("alert"),L=t.useCallback((()=>{w(!g),i(N)&&N()}),[w,N,g]);return g?null:t.createElement(n,Object.assign({className:s(a.Alert,h,o(a.Alert,B)),"data-variation":B,ref:u,role:"alert"},D),A&&t.createElement(c,{variation:B,ariaHidden:!0}),t.createElement(m,{flex:"1"},x&&t.createElement(m,{className:a.AlertHeading},x),t.createElement(m,{className:a.AlertBody},j)),E&&t.createElement(l,{ariaLabel:v,variation:"link",className:a.AlertDismiss,onClick:L,ref:I},null!==(b=null==C?void 0:C.close)&&void 0!==b?b:t.createElement(f,{"aria-hidden":"true"})))}));p.displayName="Alert";export{p as Alert};
+import * as React from 'react';
+import { isFunction, classNames, ComponentClassName, classNameModifier } from '@aws-amplify/ui';
+import { ComponentText } from '../shared/constants.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+import { View } from '../View/View.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { Button } from '../Button/Button.mjs';
+import { AlertIcon } from './AlertIcon.mjs';
+import '../Icon/Icon.mjs';
+import '../Icon/context/IconsContext.mjs';
+import { useIcons } from '../Icon/context/useIcons.mjs';
+import { IconClose } from '../Icon/icons/IconClose.mjs';
+
+const AlertPrimitive = ({ buttonRef, children, className, dismissButtonLabel = ComponentText.Alert.dismissButtonLabel, hasIcon = true, heading, isDismissible = false, onDismiss, variation, ...rest }, ref) => {
+    const [dismissed, setDismissed] = React.useState(false);
+    const icons = useIcons('alert');
+    const dismissAlert = React.useCallback(() => {
+        setDismissed(!dismissed);
+        if (isFunction(onDismiss)) {
+            onDismiss();
+        }
+    }, [setDismissed, onDismiss, dismissed]);
+    return !dismissed ? (React.createElement(Flex, { className: classNames(ComponentClassName.Alert, className, classNameModifier(ComponentClassName.Alert, variation)), ref: ref, role: "alert", ...rest },
+        hasIcon && React.createElement(AlertIcon, { variation: variation, ariaHidden: true }),
+        React.createElement(View, { flex: "1" },
+            heading && (React.createElement(View, { className: ComponentClassName.AlertHeading }, heading)),
+            React.createElement(View, { className: ComponentClassName.AlertBody }, children)),
+        isDismissible && (React.createElement(Button, { ariaLabel: dismissButtonLabel, variation: "link", className: ComponentClassName.AlertDismiss, onClick: dismissAlert, ref: buttonRef }, icons?.close ?? React.createElement(IconClose, { "aria-hidden": "true" }))))) : null;
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/alert)
+ */
+const Alert = primitiveWithForwardRef(AlertPrimitive);
+Alert.displayName = 'Alert';
+
+export { Alert };

package/dist/esm/primitives/Alert/AlertIcon.mjs

@@ -1 +1,36 @@
-import*as o from"react";import{ComponentClassNames as n}from"../shared/constants.mjs";import"../Icon/Icon.mjs";import"../Icon/context/IconsContext.mjs";import{useIcons as e}from"../Icon/context/useIcons.mjs";import"tslib";import"classnames";import"../View/View.mjs";import{IconCheckCircle as r}from"../Icon/icons/IconCheckCircle.mjs";import{IconError as i}from"../Icon/icons/IconError.mjs";import{IconInfo as c}from"../Icon/icons/IconInfo.mjs";import{IconWarning as t}from"../Icon/icons/IconWarning.mjs";const s=({variation:s,ariaHidden:a})=>{var m,l,d,I;const p=e("alert");let u;switch(s){case"info":u=null!==(m=null==p?void 0:p.info)&&void 0!==m?m:o.createElement(c,{"aria-hidden":a});break;case"error":u=null!==(l=null==p?void 0:p.error)&&void 0!==l?l:o.createElement(i,{"aria-hidden":a});break;case"warning":u=null!==(d=null==p?void 0:p.warning)&&void 0!==d?d:o.createElement(t,{"aria-hidden":a});break;case"success":u=null!==(I=null==p?void 0:p.success)&&void 0!==I?I:o.createElement(r,{"aria-hidden":a})}return u?o.createElement("span",{className:n.AlertIcon},u):null};s.displayName="AlertIcon";export{s as AlertIcon};
+import * as React from 'react';
+import { ComponentClassName } from '@aws-amplify/ui';
+import '../Icon/Icon.mjs';
+import '../Icon/context/IconsContext.mjs';
+import { useIcons } from '../Icon/context/useIcons.mjs';
+import '../View/View.mjs';
+import { IconCheckCircle } from '../Icon/icons/IconCheckCircle.mjs';
+import { IconError } from '../Icon/icons/IconError.mjs';
+import { IconInfo } from '../Icon/icons/IconInfo.mjs';
+import { IconWarning } from '../Icon/icons/IconWarning.mjs';
+
+/**
+ * @internal For internal Amplify UI use only. May be removed in a future release.
+ */
+const AlertIcon = ({ variation, ariaHidden, }) => {
+    const icons = useIcons('alert');
+    let icon;
+    switch (variation) {
+        case 'info':
+            icon = icons?.info ?? React.createElement(IconInfo, { "aria-hidden": ariaHidden });
+            break;
+        case 'error':
+            icon = icons?.error ?? React.createElement(IconError, { "aria-hidden": ariaHidden });
+            break;
+        case 'warning':
+            icon = icons?.warning ?? React.createElement(IconWarning, { "aria-hidden": ariaHidden });
+            break;
+        case 'success':
+            icon = icons?.success ?? React.createElement(IconCheckCircle, { "aria-hidden": ariaHidden });
+            break;
+    }
+    return icon ? (React.createElement("span", { className: ComponentClassName.AlertIcon }, icon)) : null;
+};
+AlertIcon.displayName = 'AlertIcon';
+
+export { AlertIcon };

package/dist/esm/primitives/Autocomplete/Autocomplete.mjs

@@ -1 +1,67 @@
-import{__rest as e}from"tslib";import o from"classnames";import*as t from"react";import{isFunction as n}from"@aws-amplify/ui";import{AutocompleteOption as a}from"./AutocompleteOption.mjs";import{AutocompleteMenu as i}from"./AutocompleteMenu.mjs";import{useAutocomplete as l}from"./useAutocomplete.mjs";import{HighlightMatch as r}from"../HighlightMatch/HighlightMatch.mjs";import{SearchField as s}from"../SearchField/SearchField.mjs";import{View as m}from"../View/View.mjs";import{ComponentClassNames as c}from"../shared/constants.mjs";const u=(u,p)=>{var{className:d,defaultValue:h,value:f,isLoading:C=!1,menuSlots:g={},options:O,optionFilter:b,onBlur:v,onChange:I,onClear:S,onClick:j,onSelect:w,onSubmit:M,renderOption:k,testId:A}=u,B=e(u,["className","defaultValue","value","isLoading","menuSlots","options","optionFilter","onBlur","onChange","onClear","onClick","onSelect","onSubmit","renderOption","testId"]);const{activeOptionId:V,autocompleteId:x,composedValue:y,filteredOptions:F,handleOnBlur:E,handleOnClear:D,handleOnClick:N,handleOnChange:L,handleOnKeyDown:H,isControlled:K,isCustomFiltering:$,isMenuOpen:q,listboxId:R,menuId:z,optionBaseId:G,setActiveOption:J,setIsMenuOpen:P,setInternalValue:Q}=l({defaultValue:h,value:f,options:O,optionFilter:b,onBlur:v,onChange:I,onClear:S,onClick:j,onSelect:w,onSubmit:M}),T={role:"combobox","aria-activedescendant":V,"aria-autocomplete":"list","aria-controls":q?z:void 0,"aria-expanded":q,"aria-haspopup":"listbox","aria-owns":q?z:void 0},U=F.map(((o,i)=>{const{id:l,label:s}=o,m=e(o,["id","label"]),c=null!=l?l:`${G}-option-${i}`,u=c===V;return t.createElement(a,Object.assign({isActive:u,id:c,key:c,onClick:()=>{P(!1),J(null),K||Q(s),n(w)&&w(o)},onMouseDown:e=>{e.preventDefault()},onMouseMove:()=>{J(o)}},m),n(k)?k(o,y):$?s:t.createElement(r,{query:y},s))}));return t.createElement(m,{className:o(c.Autocomplete,d),id:x,testId:A},t.createElement(s,Object.assign({hasSearchButton:!1,hasSearchIcon:!0,onBlur:E,onChange:L,onClear:D,onClick:N,onKeyDown:H,ref:p,value:y},T,B)),q?t.createElement(i,Object.assign({id:z,isLoading:C,listboxId:R},g),U):null)},p=t.forwardRef(u);p.displayName="Autocomplete";export{p as Autocomplete,u as AutocompletePrimitive};
+import { isFunction, classNames, ComponentClassName } from '@aws-amplify/ui';
+import * as React from 'react';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+import { AutocompleteOption } from './AutocompleteOption.mjs';
+import { AutocompleteMenu } from './AutocompleteMenu.mjs';
+import { useAutocomplete } from './useAutocomplete.mjs';
+import { HighlightMatch } from '../HighlightMatch/HighlightMatch.mjs';
+import { SearchField } from '../SearchField/SearchField.mjs';
+import { View } from '../View/View.mjs';
+
+const AutocompletePrimitive = ({ className, defaultValue, value, isLoading = false, menuSlots = {}, options, optionFilter, onBlur, onChange, onClear, onClick, onSelect, onSubmit, renderOption, testId, ...rest }, ref) => {
+    const { activeOptionId, autocompleteId, composedValue, filteredOptions, handleOnBlur, handleOnClear, handleOnClick, handleOnChange, handleOnKeyDown, isControlled, isCustomFiltering, isMenuOpen, listboxId, menuId, optionBaseId, setActiveOption, setIsMenuOpen, setInternalValue, } = useAutocomplete({
+        defaultValue,
+        value,
+        options,
+        optionFilter,
+        onBlur,
+        onChange,
+        onClear,
+        onClick,
+        onSelect,
+        onSubmit,
+    });
+    const comboboxProps = {
+        role: 'combobox',
+        'aria-activedescendant': activeOptionId,
+        'aria-autocomplete': 'list',
+        'aria-controls': isMenuOpen ? menuId : undefined,
+        'aria-expanded': isMenuOpen,
+        'aria-haspopup': 'listbox',
+        'aria-owns': isMenuOpen ? menuId : undefined,
+    };
+    const Options = filteredOptions.map((option, idx) => {
+        const { id, label, ...rest } = option;
+        const handleOnClick = () => {
+            setIsMenuOpen(false);
+            setActiveOption(null);
+            if (!isControlled) {
+                setInternalValue(label);
+            }
+            if (isFunction(onSelect)) {
+                onSelect(option);
+            }
+        };
+        // This is required. Mousedown event will fire a blur event by default
+        // and so the menu will close before the click event on an option gets a chance to fire
+        const handleOnMouseDown = (event) => {
+            event.preventDefault();
+        };
+        const handleOnMouseMove = () => {
+            setActiveOption(option);
+        };
+        const optionId = id ?? `${optionBaseId}-option-${idx}`;
+        const isActive = optionId === activeOptionId;
+        return (React.createElement(AutocompleteOption, { isActive: isActive, id: optionId, key: optionId, onClick: handleOnClick, onMouseDown: handleOnMouseDown, onMouseMove: handleOnMouseMove, ...rest }, isFunction(renderOption) ? (renderOption(option, composedValue)) : isCustomFiltering ? (label) : (React.createElement(HighlightMatch, { query: composedValue }, label))));
+    });
+    return (React.createElement(View, { className: classNames(ComponentClassName.Autocomplete, className), id: autocompleteId, testId: testId },
+        React.createElement(SearchField, { hasSearchButton: false, hasSearchIcon: true, onBlur: handleOnBlur, onChange: handleOnChange, onClear: handleOnClear, onClick: handleOnClick, onKeyDown: handleOnKeyDown, ref: ref, value: composedValue, ...comboboxProps, ...rest }),
+        isMenuOpen ? (React.createElement(AutocompleteMenu, { id: menuId, isLoading: isLoading, listboxId: listboxId, ...menuSlots }, Options)) : null));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/autocomplete)
+ */
+const Autocomplete = primitiveWithForwardRef(AutocompletePrimitive);
+Autocomplete.displayName = 'Autocomplete';
+
+export { Autocomplete, AutocompletePrimitive };

package/dist/esm/primitives/Autocomplete/AutocompleteMenu.mjs

@@ -1 +1,36 @@
-import{__rest as e}from"tslib";import*as t from"react";import{Loader as l}from"../Loader/Loader.mjs";import{ScrollView as a}from"../ScrollView/ScrollView.mjs";import{View as o}from"../View/View.mjs";import{ComponentClassNames as r,ComponentText as m}from"../shared/constants.mjs";const n=t.forwardRef(((n,c)=>{var{ariaLabel:s,children:i,Header:u=null,Footer:p=null,LoadingIndicator:d=null,Empty:E=null,isLoading:g,listboxId:A}=n,L=e(n,["ariaLabel","children","Header","Footer","LoadingIndicator","Empty","isLoading","listboxId"]);return t.createElement(a,Object.assign({className:r.AutocompleteMenu,ref:c},L),g?t.createElement((()=>{const e=null!=d?d:t.createElement(t.Fragment,null,t.createElement(l,null),m.Autocomplete.loadingText);return t.createElement(o,{className:r.AutocompleteMenuLoading},e)}),null):t.createElement(t.Fragment,null,t.createElement((()=>u&&t.createElement(o,{className:r.AutocompleteMenuHeader},u)),null),i.length>0?t.createElement(a,{as:"ul",ariaLabel:s,className:r.AutocompleteMenuOptions,id:A,role:"listbox"},i):t.createElement((()=>E?t.createElement(o,{className:r.AutocompleteMenuEmpty},E):t.createElement(o,{className:r.AutocompleteMenuEmpty},m.Autocomplete.emptyText)),null),t.createElement((()=>p&&t.createElement(o,{className:r.AutocompleteMenuFooter},p)),null)))}));n.displayName="AutocompleteMenu";export{n as AutocompleteMenu};
+import * as React from 'react';
+import { ComponentClassName } from '@aws-amplify/ui';
+import { Loader } from '../Loader/Loader.mjs';
+import { ScrollView } from '../ScrollView/ScrollView.mjs';
+import { View } from '../View/View.mjs';
+import { ComponentText } from '../shared/constants.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const MenuHeader = ({ children }) => {
+    if (!children) {
+        return null;
+    }
+    return (React.createElement(View, { className: ComponentClassName.AutocompleteMenuHeader }, children));
+};
+const MenuFooter = ({ children }) => {
+    if (!children) {
+        return null;
+    }
+    return (React.createElement(View, { className: ComponentClassName.AutocompleteMenuFooter }, children));
+};
+const MenuLoading = ({ children }) => {
+    return (React.createElement(View, { className: ComponentClassName.AutocompleteMenuLoading }, children ?? (React.createElement(React.Fragment, null,
+        React.createElement(Loader, null),
+        ComponentText.Autocomplete.loadingText))));
+};
+const MenuEmpty = ({ children }) => (React.createElement(View, { className: ComponentClassName.AutocompleteMenuEmpty }, children ?? ComponentText.Autocomplete.emptyText));
+const AutocompleteMenuPrimitive = ({ ariaLabel, children, Header = null, Footer = null, LoadingIndicator = null, Empty = null, isLoading, listboxId, ...rest }, ref) => {
+    return (React.createElement(ScrollView, { className: ComponentClassName.AutocompleteMenu, ref: ref, ...rest }, isLoading ? (React.createElement(MenuLoading, null, LoadingIndicator)) : (React.createElement(React.Fragment, null,
+        React.createElement(MenuHeader, null, Header),
+        children.length > 0 ? (React.createElement(ScrollView, { as: "ul", ariaLabel: ariaLabel, className: ComponentClassName.AutocompleteMenuOptions, id: listboxId, role: "listbox" }, children)) : (React.createElement(MenuEmpty, null, Empty)),
+        React.createElement(MenuFooter, null, Footer)))));
+};
+const AutocompleteMenu = primitiveWithForwardRef(AutocompleteMenuPrimitive);
+AutocompleteMenu.displayName = 'AutocompleteMenu';
+
+export { AutocompleteMenu };

package/dist/esm/primitives/Autocomplete/AutocompleteOption.mjs

@@ -1 +1,12 @@
-import{__rest as e}from"tslib";import t from"classnames";import*as o from"react";import{View as i}from"../View/View.mjs";import{ComponentClassNames as r}from"../shared/constants.mjs";import{classNameModifierByFlag as s}from"@aws-amplify/ui";const a=o.forwardRef(((a,m)=>{var{children:c,className:l,isActive:p}=a,n=e(a,["children","className","isActive"]);return o.createElement(i,Object.assign({"aria-selected":p,as:"li",role:"option",className:t(r.AutocompleteMenuOption,s(r.AutocompleteMenuOption,"active",p),l),ref:m},n),c)}));a.displayName="AutocompleteOption";export{a as AutocompleteOption};
+import { classNames, ComponentClassName, classNameModifierByFlag } from '@aws-amplify/ui';
+import * as React from 'react';
+import { View } from '../View/View.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const AutocompleteOptionPrimitive = ({ children, className, isActive, ...rest }, ref) => {
+    return (React.createElement(View, { "aria-selected": isActive, as: "li", role: "option", className: classNames(ComponentClassName.AutocompleteMenuOption, classNameModifierByFlag(ComponentClassName.AutocompleteMenuOption, 'active', isActive), className), ref: ref, ...rest }, children));
+};
+const AutocompleteOption = primitiveWithForwardRef(AutocompleteOptionPrimitive);
+AutocompleteOption.displayName = 'AutocompleteOption';
+
+export { AutocompleteOption };

package/dist/esm/primitives/Autocomplete/useAutocomplete.mjs

@@ -1 +1,188 @@
-import*as e from"react";import{isFunction as t}from"@aws-amplify/ui";import{ARROW_UP as o,ARROW_DOWN as n,ENTER_KEY as l,ESCAPE_KEY as s}from"../shared/constants.mjs";import{strHasLength as i}from"../shared/utils.mjs";import{useStableId as a}from"../utils/useStableId.mjs";const u=new Set([n,o,l,s]),c=({defaultValue:c="",value:r,options:d,optionFilter:m,onBlur:f,onChange:p,onClear:h,onClick:g,onSelect:b,onSubmit:v})=>{var C;const I=void 0!==r,[k,w]=e.useState(c),O=I?r:k,[B,E]=e.useState(!1),[y,S]=e.useState(null),T=t(m),H=e.useMemo((()=>{var e;const t=T?e=>m(e,O):e=>{const{label:t}=e;return null==t?void 0:t.toLocaleLowerCase().includes(null==O?void 0:O.toLocaleLowerCase())};return null!==(e=null==d?void 0:d.filter(t))&&void 0!==e?e:[]}),[O,m,T,d]),L=a(),M=a(),V=a(),j=a(),x=H.findIndex((e=>e===y)),D=null!==(C=null==y?void 0:y.id)&&void 0!==C?C:-1!==x?`${j}-option-${x}`:void 0,F=e.useCallback((e=>{E(!1),S(null),t(f)&&f(e)}),[f]),R=e.useCallback((e=>{S(null),E(!0),I||w(e.target.value),t(p)&&p(e)}),[I,p]),$=e.useCallback((()=>{I||w(""),t(h)&&h()}),[I,h]),A=e.useCallback((e=>{E(!0),t(g)&&g(e)}),[g]);return e.useEffect((()=>{const e=document.getElementById(L),t=document.getElementById(V);if(t&&B&&e){const{bottom:o}=t.getBoundingClientRect(),{offsetParent:n,offsetTop:l}=e;n===document.body&&o>document.documentElement.clientHeight&&window.scrollTo({top:Math.min(o-document.documentElement.clientHeight+window.scrollY+20,l),behavior:"smooth"})}}),[L,B,V]),e.useEffect((()=>{const e=document.getElementById(M),t=i(D)?document.getElementById(D):null;if(t&&e){const{scrollTop:o,clientHeight:n}=e,{offsetHeight:l,offsetTop:s}=t,{top:i,bottom:a}=t.getBoundingClientRect();o>s&&(e.scrollTop=s),o+n<s+l&&(e.scrollTop=s+l-n),(i<0||a>document.documentElement.clientHeight)&&t.scrollIntoView({behavior:"smooth",block:"nearest"})}}),[D,M]),{activeOptionId:D,autocompleteId:L,composedValue:O,filteredOptions:H,handleOnBlur:F,handleOnClear:$,handleOnClick:A,handleOnChange:R,handleOnKeyDown:e=>{const{key:i}=e;if(u.has(i))switch(e.preventDefault(),i){case s:B?(E(!1),S(null)):$();break;case l:if(y){const{label:e}=y;I||w(e),t(b)&&b(y)}else t(v)&&v(O);E(!1),S(null);break;case n:{if(H.length<=0)return;E(!0);const e=x>=H.length-1?0:x+1;S(H[e]);break}case o:{if(H.length<=0)return;E(!0);const e=x<=0?H.length-1:x-1;S(H[e])}}},isControlled:I,isCustomFiltering:T,isMenuOpen:B,listboxId:M,menuId:V,optionBaseId:j,setActiveOption:S,setIsMenuOpen:E,setInternalValue:w}};export{c as useAutocomplete};
+import * as React from 'react';
+import { isFunction } from '@aws-amplify/ui';
+import { ARROW_UP, ARROW_DOWN, ENTER_KEY, ESCAPE_KEY } from '../shared/constants.mjs';
+import { strHasLength } from '../shared/utils.mjs';
+import { useStableId } from '../utils/useStableId.mjs';
+
+const DEFAULT_KEYS = new Set([ARROW_DOWN, ARROW_UP, ENTER_KEY, ESCAPE_KEY]);
+const useAutocomplete = ({ defaultValue = '', value, options, optionFilter, onBlur, onChange, onClear, onClick, onSelect, onSubmit, }) => {
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const composedValue = isControlled ? value : internalValue;
+    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+    const [activeOption, setActiveOption] = React.useState(null);
+    const isCustomFiltering = isFunction(optionFilter);
+    const filteredOptions = React.useMemo(() => {
+        const defaultFilter = (option) => {
+            const { label } = option;
+            return label
+                ?.toLocaleLowerCase()
+                .includes(composedValue?.toLocaleLowerCase());
+        };
+        const filter = isCustomFiltering
+            ? (option) => optionFilter(option, composedValue)
+            : defaultFilter;
+        return options?.filter(filter) ?? [];
+    }, [composedValue, optionFilter, isCustomFiltering, options]);
+    const autocompleteId = useStableId();
+    const listboxId = useStableId();
+    const menuId = useStableId();
+    const optionBaseId = useStableId();
+    const activeIndex = filteredOptions.findIndex((option) => option === activeOption);
+    const activeOptionId = activeOption?.id ??
+        (activeIndex !== -1 ? `${optionBaseId}-option-${activeIndex}` : undefined);
+    const handleOnBlur = React.useCallback((event) => {
+        setIsMenuOpen(false);
+        setActiveOption(null);
+        if (isFunction(onBlur)) {
+            onBlur(event);
+        }
+    }, [onBlur]);
+    const handleOnChange = React.useCallback((event) => {
+        setActiveOption(null);
+        setIsMenuOpen(true);
+        if (!isControlled) {
+            setInternalValue(event.target.value);
+        }
+        if (isFunction(onChange)) {
+            onChange(event);
+        }
+    }, [isControlled, onChange]);
+    const handleOnClear = React.useCallback(() => {
+        if (!isControlled) {
+            setInternalValue('');
+        }
+        if (isFunction(onClear)) {
+            onClear();
+        }
+    }, [isControlled, onClear]);
+    const handleOnClick = React.useCallback((event) => {
+        setIsMenuOpen(true);
+        if (isFunction(onClick)) {
+            onClick(event);
+        }
+    }, [onClick]);
+    const handleOnKeyDown = (event) => {
+        const { key } = event;
+        if (!DEFAULT_KEYS.has(key)) {
+            return;
+        }
+        event.preventDefault();
+        switch (key) {
+            case ESCAPE_KEY: {
+                if (isMenuOpen) {
+                    setIsMenuOpen(false);
+                    setActiveOption(null);
+                }
+                else {
+                    handleOnClear();
+                }
+                break;
+            }
+            case ENTER_KEY: {
+                if (!activeOption) {
+                    if (isFunction(onSubmit)) {
+                        onSubmit(composedValue);
+                    }
+                }
+                else {
+                    const { label } = activeOption;
+                    if (!isControlled) {
+                        setInternalValue(label);
+                    }
+                    if (isFunction(onSelect)) {
+                        onSelect(activeOption);
+                    }
+                }
+                setIsMenuOpen(false);
+                setActiveOption(null);
+                break;
+            }
+            case ARROW_DOWN: {
+                if (filteredOptions.length <= 0) {
+                    return;
+                }
+                setIsMenuOpen(true);
+                const newActiveIndex = activeIndex >= filteredOptions.length - 1 ? 0 : activeIndex + 1;
+                setActiveOption(filteredOptions[newActiveIndex]);
+                break;
+            }
+            case ARROW_UP: {
+                if (filteredOptions.length <= 0) {
+                    return;
+                }
+                setIsMenuOpen(true);
+                const newActiveIndex = activeIndex <= 0 ? filteredOptions.length - 1 : activeIndex - 1;
+                setActiveOption(filteredOptions[newActiveIndex]);
+            }
+        }
+    };
+    // The window will scroll down to the right place to show the whole menu
+    // if space is not enough in current viewport
+    React.useEffect(() => {
+        const autocompleteElement = document.getElementById(autocompleteId);
+        const menuElement = document.getElementById(menuId);
+        if (menuElement && isMenuOpen && autocompleteElement) {
+            const { bottom } = menuElement.getBoundingClientRect();
+            const { offsetParent, offsetTop } = autocompleteElement;
+            if (offsetParent === document.body &&
+                bottom > document.documentElement.clientHeight) {
+                window.scrollTo({
+                    top: Math.min(bottom -
+                        document.documentElement.clientHeight +
+                        window.scrollY +
+                        20, // Add 20 gap between menu bottom and window viewport bottom
+                    offsetTop),
+                    behavior: 'smooth',
+                });
+            }
+        }
+    }, [autocompleteId, isMenuOpen, menuId]);
+    // This will make the menu able to scroll with keyboard,
+    // and scroll each option into window viewport if necessary
+    React.useEffect(() => {
+        const listboxElement = document.getElementById(listboxId);
+        const activeOptionElement = strHasLength(activeOptionId)
+            ? document.getElementById(activeOptionId)
+            : null;
+        if (activeOptionElement && listboxElement) {
+            const { scrollTop, clientHeight } = listboxElement;
+            const { offsetHeight, offsetTop } = activeOptionElement;
+            const { top, bottom } = activeOptionElement.getBoundingClientRect();
+            if (scrollTop > offsetTop) {
+                listboxElement.scrollTop = offsetTop;
+            }
+            if (scrollTop + clientHeight < offsetTop + offsetHeight) {
+                listboxElement.scrollTop = offsetTop + offsetHeight - clientHeight;
+            }
+            if (top < 0 || bottom > document.documentElement.clientHeight) {
+                activeOptionElement.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                });
+            }
+        }
+    }, [activeOptionId, listboxId]);
+    return {
+        activeOptionId,
+        autocompleteId,
+        composedValue,
+        filteredOptions,
+        handleOnBlur,
+        handleOnClear,
+        handleOnClick,
+        handleOnChange,
+        handleOnKeyDown,
+        isControlled,
+        isCustomFiltering,
+        isMenuOpen,
+        listboxId,
+        menuId,
+        optionBaseId,
+        setActiveOption,
+        setIsMenuOpen,
+        setInternalValue,
+    };
+};
+
+export { useAutocomplete };

package/dist/esm/primitives/Badge/Badge.mjs

@@ -1 +1,16 @@
-import{__rest as a}from"tslib";import*as e from"react";import r from"classnames";import{classNameModifier as s}from"@aws-amplify/ui";import{ComponentClassNames as i}from"../shared/constants.mjs";import{View as t}from"../View/View.mjs";const m=e.forwardRef(((m,o)=>{var{className:n,children:c,variation:d,size:f}=m,l=a(m,["className","children","variation","size"]);const p=r(i.Badge,n,s(i.Badge,d),s(i.Badge,f));return e.createElement(t,Object.assign({as:"span",className:p,"data-variation":d,"data-size":f,ref:o},l),c)}));m.displayName="Badge";export{m as Badge};
+import * as React from 'react';
+import { classNames, ComponentClassName, classNameModifier } from '@aws-amplify/ui';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+import { View } from '../View/View.mjs';
+
+const BadgePrimitive = ({ className, children, variation, size, ...rest }, ref) => {
+    const componentClasses = classNames(ComponentClassName.Badge, className, classNameModifier(ComponentClassName.Badge, variation), classNameModifier(ComponentClassName.Badge, size));
+    return (React.createElement(View, { as: "span", className: componentClasses, ref: ref, ...rest }, children));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/badge)
+ */
+const Badge = primitiveWithForwardRef(BadgePrimitive);
+Badge.displayName = 'Badge';
+
+export { Badge };

package/dist/esm/primitives/Breadcrumbs/BreadcrumbContainer.mjs

@@ -1 +1,18 @@
-import{__rest as a}from"tslib";import*as r from"react";import e from"classnames";import{ComponentClassNames as s}from"../shared/constants.mjs";import{View as m}from"../View/View.mjs";const t=r.forwardRef(((t,c)=>{var l,{className:o,children:i}=t,n=a(t,["className","children"]);const d=e(s.Breadcrumbs,o),b=null!==(l=n["aria-label"])&&void 0!==l?l:"Breadcrumb";return r.createElement(m,Object.assign({},n,{as:"nav","aria-label":b,className:d,ref:c}),r.createElement(m,{as:"ol",className:s.BreadcrumbsList},i))}));t.displayName="Breadcrumbs.Container";export{t as BreadcrumbContainer};
+import * as React from 'react';
+import { classNames, ComponentClassName } from '@aws-amplify/ui';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+import { View } from '../View/View.mjs';
+
+const BreadcrumbContainerPrimitive = ({ className, children, ...rest }, ref) => {
+    const componentClasses = classNames(ComponentClassName.Breadcrumbs, className);
+    const ariaLabel = rest['aria-label'] ?? 'Breadcrumb';
+    return (React.createElement(View, { ...rest, as: "nav", "aria-label": ariaLabel, className: componentClasses, ref: ref },
+        React.createElement(View, { as: "ol", className: ComponentClassName.BreadcrumbsList }, children)));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/breadcrumbs)
+ */
+const BreadcrumbContainer = primitiveWithForwardRef(BreadcrumbContainerPrimitive);
+BreadcrumbContainer.displayName = 'Breadcrumbs.Container';
+
+export { BreadcrumbContainer };

package/dist/esm/primitives/Breadcrumbs/BreadcrumbItem.mjs

@@ -1 +1,16 @@
-import{__rest as r}from"tslib";import*as s from"react";import e from"classnames";import{ComponentClassNames as a}from"../shared/constants.mjs";import{View as m}from"../View/View.mjs";const t=s.forwardRef(((t,o)=>{var{className:c,children:i,as:l="li"}=t,n=r(t,["className","children","as"]);const f=e(a.BreadcrumbsItem,c);return s.createElement(m,Object.assign({},n,{as:l,className:f,ref:o}),i)}));t.displayName="Breadcrumbs.Item";export{t as BreadcrumbItem};
+import * as React from 'react';
+import { classNames, ComponentClassName } from '@aws-amplify/ui';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+import { View } from '../View/View.mjs';
+
+const BreadcrumbItemPrimitive = ({ className, children, as = 'li', ...rest }, ref) => {
+    const componentClasses = classNames(ComponentClassName.BreadcrumbsItem, className);
+    return (React.createElement(View, { ...rest, as: as, className: componentClasses, ref: ref }, children));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/breadcrumbs)
+ */
+const BreadcrumbItem = primitiveWithForwardRef(BreadcrumbItemPrimitive);
+BreadcrumbItem.displayName = 'Breadcrumbs.Item';
+
+export { BreadcrumbItem };

package/dist/esm/primitives/Breadcrumbs/BreadcrumbLink.mjs

@@ -1 +1,24 @@
-import{__rest as r}from"tslib";import*as e from"react";import s from"classnames";import{classNameModifierByFlag as a}from"@aws-amplify/ui";import{ComponentClassNames as t}from"../shared/constants.mjs";import{Link as m}from"../Link/Link.mjs";import{Text as i}from"../Text/Text.mjs";const n=e.forwardRef(((n,c)=>{var o,f,{className:l,children:u,href:p,isCurrent:d}=n,b=r(n,["className","children","href","isCurrent"]);const h=s(t.BreadcrumbsLink,a(t.BreadcrumbsLink,"current",d),l);if(d){const r=null!==(o=b["aria-current"])&&void 0!==o?o:"page",s=null!==(f=b.as)&&void 0!==f?f:"span";return e.createElement(i,Object.assign({},b,{as:s,"aria-current":r,className:h,ref:c}),u)}return e.createElement(m,Object.assign({},b,{className:h,ref:c,href:p}),u)}));n.displayName="Breadcrumbs.Link";export{n as BreadcrumbLink};
+import * as React from 'react';
+import { classNames, ComponentClassName, classNameModifierByFlag } from '@aws-amplify/ui';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+import { Link } from '../Link/Link.mjs';
+import { Text } from '../Text/Text.mjs';
+
+const BreadcrumbLinkPrimitive = ({ className, children, href, isCurrent, ...rest }, ref) => {
+    const componentClasses = classNames(ComponentClassName.BreadcrumbsLink, classNameModifierByFlag(ComponentClassName.BreadcrumbsLink, 'current', isCurrent), className);
+    if (isCurrent) {
+        const ariaCurrent = rest['aria-current'] ?? 'page';
+        const as = rest.as ?? 'span';
+        return (React.createElement(Text, { ...rest, as: as, "aria-current": ariaCurrent, className: componentClasses, ref: ref }, children));
+    }
+    else {
+        return (React.createElement(Link, { ...rest, className: componentClasses, ref: ref, href: href }, children));
+    }
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/breadcrumbs)
+ */
+const BreadcrumbLink = primitiveWithForwardRef(BreadcrumbLinkPrimitive);
+BreadcrumbLink.displayName = 'Breadcrumbs.Link';
+
+export { BreadcrumbLink };

package/dist/esm/primitives/Breadcrumbs/BreadcrumbSeparator.mjs

@@ -1 +1,16 @@
-import{__rest as r}from"tslib";import*as a from"react";import e from"classnames";import{ComponentClassNames as s}from"../shared/constants.mjs";import{View as m}from"../View/View.mjs";const t=a.forwardRef(((t,o)=>{var i,{className:c,children:n="/",as:d="span"}=t,l=r(t,["className","children","as"]);const p=null!==(i=l["aria-hidden"])&&void 0!==i?i:"true";return a.createElement(m,Object.assign({},l,{as:d,ref:o,"aria-hidden":p,className:e(s.BreadcrumbsSeparator,c)}),n)}));t.displayName="Breadcrumbs.Separator";export{t as BreadcrumbSeparator};
+import * as React from 'react';
+import { classNames, ComponentClassName } from '@aws-amplify/ui';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+import { View } from '../View/View.mjs';
+
+const BreadcrumbSeparatorPrimitive = ({ className, children = '/', as = 'span', ...rest }, ref) => {
+    const ariaHidden = rest['aria-hidden'] ?? 'true';
+    return (React.createElement(View, { ...rest, as: as, ref: ref, "aria-hidden": ariaHidden, className: classNames(ComponentClassName.BreadcrumbsSeparator, className) }, children));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/breadcrumbs)
+ */
+const BreadcrumbSeparator = primitiveWithForwardRef(BreadcrumbSeparatorPrimitive);
+BreadcrumbSeparator.displayName = 'Breadcrumbs.Separator';
+
+export { BreadcrumbSeparator };

package/dist/esm/primitives/Breadcrumbs/Breadcrumbs.mjs

@@ -1 +1,28 @@
-import{__rest as r}from"tslib";import*as e from"react";import{BreadcrumbItem as a}from"./BreadcrumbItem.mjs";import{BreadcrumbLink as t}from"./BreadcrumbLink.mjs";import{BreadcrumbSeparator as m}from"./BreadcrumbSeparator.mjs";import{BreadcrumbContainer as s}from"./BreadcrumbContainer.mjs";const o=Object.assign(e.forwardRef(((o,l)=>{var n,{className:i,items:c,separator:p=e.createElement(m,null)}=o,u=r(o,["className","items","separator"]);const b=null!==(n=u["aria-label"])&&void 0!==n?n:"Breadcrumb";return e.createElement(s,Object.assign({},u,{"aria-label":b,className:i,ref:l}),null==c?void 0:c.map((({href:r,label:m},s)=>{const o=c.length-1===s;return e.createElement(a,{key:`${r}${s}`},e.createElement(t,{href:r,isCurrent:o},m),o?null:p)})))})),{Item:a,Link:t,Separator:m,Container:s});o.displayName="Breadcrumbs";export{o as Breadcrumbs};
+import * as React from 'react';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+import { BreadcrumbItem } from './BreadcrumbItem.mjs';
+import { BreadcrumbLink } from './BreadcrumbLink.mjs';
+import { BreadcrumbSeparator } from './BreadcrumbSeparator.mjs';
+import { BreadcrumbContainer } from './BreadcrumbContainer.mjs';
+
+const BreadcrumbsPrimitive = ({ className, items, separator = React.createElement(BreadcrumbSeparator, null), ...rest }, ref) => {
+    const ariaLabel = rest['aria-label'] ?? 'Breadcrumb';
+    return (React.createElement(BreadcrumbContainer, { ...rest, "aria-label": ariaLabel, className: className, ref: ref }, items?.map(({ href, label }, idx) => {
+        const isCurrent = items.length - 1 === idx;
+        return (React.createElement(BreadcrumbItem, { key: `${href}${idx}` },
+            React.createElement(BreadcrumbLink, { href: href, isCurrent: isCurrent }, label),
+            isCurrent ? null : separator));
+    })));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/breadcrumbs)
+ */
+const Breadcrumbs = Object.assign(primitiveWithForwardRef(BreadcrumbsPrimitive), {
+    Item: BreadcrumbItem,
+    Link: BreadcrumbLink,
+    Separator: BreadcrumbSeparator,
+    Container: BreadcrumbContainer,
+});
+Breadcrumbs.displayName = 'Breadcrumbs';
+
+export { Breadcrumbs };

package/dist/esm/primitives/Button/Button.mjs

@@ -1 +1,33 @@
-import{__rest as t}from"tslib";import e from"classnames";import*as i from"react";import{classNameModifier as a,classNameModifierByFlag as o}from"@aws-amplify/ui";import{ComponentClassNames as s}from"../shared/constants.mjs";import{useFieldset as l}from"../Fieldset/useFieldset.mjs";import{Flex as r}from"../Flex/Flex.mjs";import{Loader as n}from"../Loader/Loader.mjs";import{View as d}from"../View/View.mjs";const m=["link","primary",void 0],u=i.forwardRef(((u,p)=>{var c,{className:f,children:b,colorTheme:h,isFullWidth:B=!1,isDisabled:F,isLoading:g,loadingText:v="",size:j,type:w="button",variation:y}=u,x=t(u,["className","children","colorTheme","isFullWidth","isDisabled","isLoading","loadingText","size","type","variation"]);const L=m.includes(y)&&h?`${null!=y?y:"outlined"}--${h}`:void 0,{isFieldsetDisabled:N}=l(),z=N||(null!==(c=null!=F?F:g)&&void 0!==c?c:x.disabled),D=e(s.Button,s.FieldGroupControl,a(s.Button,y),a(s.Button,L),a(s.Button,j),o(s.Button,"disabled",z),o(s.Button,"loading",g),o(s.Button,"fullwidth",B),f);return i.createElement(d,Object.assign({ref:p,as:"button",className:D,"data-fullwidth":B,"data-loading":g,"data-size":j,"data-variation":y,isDisabled:z,type:w},x),g?i.createElement(r,{as:"span",className:s.ButtonLoaderWrapper},i.createElement(n,{size:j}),v||null):b)}));u.displayName="Button";export{u as Button};
+import * as React from 'react';
+import { classNames, ComponentClassName, classNameModifier, classNameModifierByFlag } from '@aws-amplify/ui';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+import { useFieldset } from '../Fieldset/useFieldset.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { Loader } from '../Loader/Loader.mjs';
+import { View } from '../View/View.mjs';
+
+// These variations support colorThemes. 'undefined' accounts for our
+// 'default' variation which is not named.
+const supportedVariations = ['link', 'primary', undefined];
+const ButtonPrimitive = ({ className, children, colorTheme, isFullWidth = false, isDisabled, isLoading, loadingText = '', size, type = 'button', variation, ...rest }, ref) => {
+    // Creates our colorTheme modifier string based on if the variation
+    // supports colorThemes and a colorTheme is used.
+    const colorThemeModifier = supportedVariations.includes(variation) && colorTheme
+        ? `${variation ?? 'outlined'}--${colorTheme}`
+        : undefined;
+    const { isFieldsetDisabled } = useFieldset();
+    const shouldBeDisabled = isFieldsetDisabled
+        ? isFieldsetDisabled
+        : isDisabled ?? isLoading ?? rest['disabled'];
+    const componentClasses = classNames(ComponentClassName.Button, ComponentClassName.FieldGroupControl, classNameModifier(ComponentClassName.Button, variation), classNameModifier(ComponentClassName.Button, colorThemeModifier), classNameModifier(ComponentClassName.Button, size), classNameModifierByFlag(ComponentClassName.Button, 'disabled', shouldBeDisabled), classNameModifierByFlag(ComponentClassName.Button, 'loading', isLoading), classNameModifierByFlag(ComponentClassName.Button, 'fullwidth', isFullWidth), className);
+    return (React.createElement(View, { ref: ref, as: "button", className: componentClasses, isDisabled: shouldBeDisabled, type: type, ...rest }, isLoading ? (React.createElement(Flex, { as: "span", className: ComponentClassName.ButtonLoaderWrapper },
+        React.createElement(Loader, { size: size }),
+        loadingText ? loadingText : null)) : (children)));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/button)
+ */
+const Button = primitiveWithForwardRef(ButtonPrimitive);
+Button.displayName = 'Button';
+
+export { Button };

package/dist/esm/primitives/ButtonGroup/ButtonGroup.mjs

@@ -1 +1,19 @@
-import{__rest as r}from"tslib";import*as e from"react";import o from"classnames";import{ComponentClassNames as a}from"../shared/constants.mjs";import{Flex as t}from"../Flex/Flex.mjs";const s=e.forwardRef(((s,i)=>{var{className:n,children:m,role:l="group",size:c,variation:p}=s,f=r(s,["className","children","role","size","variation"]);return e.createElement(t,Object.assign({className:o(a.ButtonGroup,n),role:l,ref:i},f),e.Children.map(m,(r=>{if(e.isValidElement(r)){const{size:o=c,variation:a=p}=r.props;return e.cloneElement(r,{size:o,variation:a})}return r})))}));s.displayName="ButtonGroup";export{s as ButtonGroup};
+import * as React from 'react';
+import { classNames, ComponentClassName } from '@aws-amplify/ui';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+
+const ButtonGroupPrimitive = ({ className, children, role = 'group', size: _size, variation: _variation, ...rest }, ref) => (React.createElement(Flex, { className: classNames(ComponentClassName.ButtonGroup, className), role: role, ref: ref, ...rest }, React.Children.map(children, (child) => {
+    if (React.isValidElement(child)) {
+        const { size = _size, variation = _variation } = child.props;
+        return React.cloneElement(child, { size, variation });
+    }
+    return child;
+})));
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/button#buttongroup)
+ */
+const ButtonGroup = primitiveWithForwardRef(ButtonGroupPrimitive);
+ButtonGroup.displayName = 'ButtonGroup';
+
+export { ButtonGroup };

package/dist/esm/primitives/Card/Card.mjs

@@ -1 +1,15 @@
-import{__rest as a}from"tslib";import r from"classnames";import*as i from"react";import{classNameModifier as m}from"@aws-amplify/ui";import{ComponentClassNames as s}from"../shared/constants.mjs";import{View as e}from"../View/View.mjs";const t=i.forwardRef(((t,o)=>{var{className:n,children:c,variation:f}=t,l=a(t,["className","children","variation"]);return i.createElement(e,Object.assign({className:r(s.Card,m(s.Card,f),n),"data-variation":f,ref:o},l),c)}));t.displayName="Card";export{t as Card};
+import { classNames, ComponentClassName, classNameModifier } from '@aws-amplify/ui';
+import * as React from 'react';
+import { View } from '../View/View.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const CardPrimitive = ({ className, children, variation, ...rest }, ref) => {
+    return (React.createElement(View, { className: classNames(ComponentClassName.Card, classNameModifier(ComponentClassName.Card, variation), className), ref: ref, ...rest }, children));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/card)
+ */
+const Card = primitiveWithForwardRef(CardPrimitive);
+Card.displayName = 'Card';
+
+export { Card };