@aws-amplify/ui-react 5.3.1 → 6.0.0

package/dist/esm/primitives/Pagination/useRange.mjs

@@ -1 +1,72 @@
-import*as t from"react";import{getConsecutiveIntArray as r}from"../shared/utils.mjs";const a="...",m=(m,o,n=1)=>t.useMemo((()=>{const t=Math.max(m,1),s=Math.max(n,1),e=Math.max(t,o),i=e;if(e<5+2*s)return r(1,e);const c=Math.max(t-s,1),h=Math.min(t+s,i),u=c>2,M=h<i-1;if(u&&!M){const t=r(i-(3+2*s)+1,i);return[1,a,...t]}if(!u&&M){return[...r(1,3+2*s),a,i]}const f=r(c,h);return[1,a,...f,a,i]}),[m,o,n]);export{a as ELLIPSIS,m as useRange};
+import * as React from 'react';
+import { getConsecutiveIntArray } from '../shared/utils.mjs';
+
+const ELLIPSIS = '...';
+/**
+ * This hook will be used to determine the range of page numbers to be rendered,
+ * including ellipsis dots(e.g., an array like [1, '...', 4, 5, 6, '...', 10]).
+ * @param currentPage current page number
+ * @param totalPages total number of pages
+ * @param siblingCount the number of siblings on each side of
+ * @returns an array that contains the range of numbers to be rendered
+ */
+const useRange = (currentPageParam, totalPagesParam, siblingCountParam = 1) => {
+    const range = React.useMemo(() => {
+        // The current page should not be less than 1
+        const currentPage = Math.max(currentPageParam, 1);
+        // The sibling count should not be less than 1
+        const siblingCount = Math.max(siblingCountParam, 1);
+        // The total pages should be always greater than current page
+        const totalPages = Math.max(currentPage, totalPagesParam);
+        // Note: 1-based index will be used for page value.
+        const firstPage = 1;
+        const lastPage = totalPages;
+        /**
+         * To avoid resizing our pagination component while a user is interacting with the component,
+         * the total number of items returned by the hook should remain constant.
+         * The consant is supposed to be the max number of items that would returned by the hook in all cases,
+         * so it should be calculated by 1(first page) + 1(last page) + 1(current page) + 2 * siblingCount + 2(ellipses)
+         */
+        const maxNumOfItems = 5 + 2 * siblingCount;
+        /**
+         * Case 1: If the total number of pages is not greater than the max number of items that would potentially be returned,
+         * then no need to run through the ellipsis cases, just simply return the range from 1 to totalPages (e.g. [1, 2, 3, 4]).
+         */
+        if (totalPages < maxNumOfItems) {
+            return getConsecutiveIntArray(1, totalPages);
+        }
+        /**
+         * Determine if ellipsis dots should be rendered on either left or right side, or both
+         */
+        const leftSiblingPage = Math.max(currentPage - siblingCount, firstPage);
+        const rightSiblingPage = Math.min(currentPage + siblingCount, lastPage);
+        const shouldRenderStartEllipsis = leftSiblingPage > 2;
+        const shouldRenderEndEllipsis = rightSiblingPage < lastPage - 1;
+        /**
+         * Case 2: Only render ellipsis dots on the left side (e.g. [1, '...', 6, 7, 8, 9, 10]).
+         */
+        if (shouldRenderStartEllipsis && !shouldRenderEndEllipsis) {
+            // 1(current page) + 1(last page) + 1(fill up a page for the position of end ellipsis) + 2 * siblingCount
+            const rightItemCount = 3 + 2 * siblingCount;
+            const rightRange = getConsecutiveIntArray(lastPage - rightItemCount + 1, lastPage);
+            return [firstPage, ELLIPSIS, ...rightRange];
+        }
+        /**
+         * Case 3: Only render ellipsis dots on the right side (e.g. [1, 2, 3, 4, 5, '...', 10]).
+         */
+        if (!shouldRenderStartEllipsis && shouldRenderEndEllipsis) {
+            // 1(current page) + 1(last page) + 1(fill up a page for the position of start ellipsis) + 2 * siblingCount
+            const leftItemCount = 3 + 2 * siblingCount;
+            const leftRange = getConsecutiveIntArray(firstPage, leftItemCount);
+            return [...leftRange, ELLIPSIS, lastPage];
+        }
+        /**
+         * Case 4: Render ellipsis on both side (e.g. [1, '...', 4, 5, 6, '...', 10]).
+         */
+        const middleRange = getConsecutiveIntArray(leftSiblingPage, rightSiblingPage);
+        return [firstPage, ELLIPSIS, ...middleRange, ELLIPSIS, lastPage];
+    }, [currentPageParam, totalPagesParam, siblingCountParam]);
+    return range;
+};
+
+export { ELLIPSIS, useRange };

package/dist/esm/primitives/PasswordField/PasswordField.mjs

@@ -1 +1,25 @@
-import{__rest as s}from"tslib";import o from"classnames";import*as e from"react";import{ComponentClassNames as a}from"../shared/constants.mjs";import{ShowPasswordButton as r}from"./ShowPasswordButton.mjs";import{TextField as t}from"../TextField/TextField.mjs";const d=e.forwardRef(((d,l)=>{var{autoComplete:w="current-password",label:n,className:m,hideShowPassword:i=!1,passwordIsHiddenLabel:p,passwordIsShownLabel:h,showPasswordButtonLabel:b,showPasswordButtonRef:u,size:c,hasError:f}=d,P=s(d,["autoComplete","label","className","hideShowPassword","passwordIsHiddenLabel","passwordIsShownLabel","showPasswordButtonLabel","showPasswordButtonRef","size","hasError"]);const[L,E]=e.useState("password"),S=e.useCallback((()=>{E("password"===L?"text":"password")}),[E,L]);return e.createElement(t,Object.assign({autoComplete:w,outerEndComponent:i?null:e.createElement(r,{fieldType:L,onClick:S,passwordIsHiddenLabel:p,passwordIsShownLabel:h,ref:u,size:c,showPasswordButtonLabel:b,hasError:f}),size:c,type:L,label:n,className:o(a.PasswordField,m),ref:l,hasError:f},P))}));d.displayName="PasswordField";export{d as PasswordField};
+import { classNames, ComponentClassName } from '@aws-amplify/ui';
+import * as React from 'react';
+import { ShowPasswordButton } from './ShowPasswordButton.mjs';
+import { TextField } from '../TextField/TextField.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const PasswordFieldPrimitive = ({ autoComplete = 'current-password', label, className, hideShowPassword = false, passwordIsHiddenLabel, passwordIsShownLabel, showPasswordButtonLabel, showPasswordButtonRef, size, hasError, ...rest }, ref) => {
+    const [type, setType] = React.useState('password');
+    const showPasswordOnClick = React.useCallback(() => {
+        if (type === 'password') {
+            setType('text');
+        }
+        else {
+            setType('password');
+        }
+    }, [setType, type]);
+    return (React.createElement(TextField, { autoComplete: autoComplete, outerEndComponent: hideShowPassword ? null : (React.createElement(ShowPasswordButton, { fieldType: type, onClick: showPasswordOnClick, passwordIsHiddenLabel: passwordIsHiddenLabel, passwordIsShownLabel: passwordIsShownLabel, ref: showPasswordButtonRef, size: size, showPasswordButtonLabel: showPasswordButtonLabel, hasError: hasError })), size: size, type: type, label: label, className: classNames(ComponentClassName.PasswordField, className), ref: ref, hasError: hasError, ...rest }));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/passwordfield)
+ */
+const PasswordField = primitiveWithForwardRef(PasswordFieldPrimitive);
+PasswordField.displayName = 'PasswordField';
+
+export { PasswordField };

package/dist/esm/primitives/PasswordField/ShowPasswordButton.mjs

@@ -1 +1,30 @@
-import{__rest as s}from"tslib";import*as o from"react";import r from"classnames";import{Button as i}from"../Button/Button.mjs";import{VisuallyHidden as e}from"../VisuallyHidden/VisuallyHidden.mjs";import{ComponentClassNames as a,ComponentText as t}from"../shared/constants.mjs";import"../Icon/Icon.mjs";import"../Icon/context/IconsContext.mjs";import{useIcons as d}from"../Icon/context/useIcons.mjs";import"../View/View.mjs";import{IconVisibilityOff as n}from"../Icon/icons/IconVisibilityOff.mjs";import{IconVisibility as l}from"../Icon/icons/IconVisibility.mjs";import{classNameModifierByFlag as m}from"@aws-amplify/ui";const{passwordIsHidden:w,passwordIsShown:p,showPassword:c}=t.PasswordField,f=o.forwardRef(((t,f)=>{var h,u,{fieldType:I,passwordIsHiddenLabel:b=w,passwordIsShownLabel:j=p,showPasswordButtonLabel:y=c,size:v,hasError:L}=t,P=s(t,["fieldType","passwordIsHiddenLabel","passwordIsShownLabel","showPasswordButtonLabel","size","hasError"]);const E=d("passwordField"),S=r(a.FieldShowPassword,m(a.FieldShowPassword,"error",L)),V="password"===I?null!==(h=null==E?void 0:E.visibility)&&void 0!==h?h:o.createElement(l,{"aria-hidden":"true"}):null!==(u=null==E?void 0:E.visibilityOff)&&void 0!==u?u:o.createElement(n,{"aria-hidden":"true"});return o.createElement(i,Object.assign({"aria-checked":"password"!==I,ariaLabel:y,className:S,ref:f,role:"switch",size:v},P),o.createElement(e,{"aria-live":"polite"},"password"===I?b:j),V)}));f.displayName="ShowPasswordButton";export{f as ShowPasswordButton};
+import * as React from 'react';
+import { classNames, ComponentClassName, classNameModifierByFlag } from '@aws-amplify/ui';
+import { Button } from '../Button/Button.mjs';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
+import { ComponentText } from '../shared/constants.mjs';
+import '../Icon/Icon.mjs';
+import '../Icon/context/IconsContext.mjs';
+import { useIcons } from '../Icon/context/useIcons.mjs';
+import '../View/View.mjs';
+import { IconVisibilityOff } from '../Icon/icons/IconVisibilityOff.mjs';
+import { IconVisibility } from '../Icon/icons/IconVisibility.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const { passwordIsHidden, passwordIsShown, showPassword } = ComponentText.PasswordField;
+const ShowPasswordButtonPrimitive = ({ fieldType, passwordIsHiddenLabel = passwordIsHidden, passwordIsShownLabel = passwordIsShown, showPasswordButtonLabel = showPassword, size, hasError, ...rest }, ref) => {
+    const icons = useIcons('passwordField');
+    const showPasswordButtonClass = classNames(ComponentClassName.FieldShowPassword, classNameModifierByFlag(ComponentClassName.FieldShowPassword, 'error', hasError));
+    const icon = fieldType === 'password'
+        ? icons?.visibility ?? React.createElement(IconVisibility, { "aria-hidden": "true" })
+        : icons?.visibilityOff ?? React.createElement(IconVisibilityOff, { "aria-hidden": "true" });
+    return (React.createElement(Button, { "aria-checked": fieldType !== 'password', ariaLabel: showPasswordButtonLabel, className: showPasswordButtonClass, ref: ref, role: "switch", size: size, ...rest },
+        React.createElement(VisuallyHidden, { "aria-live": "polite" }, fieldType === 'password'
+            ? passwordIsHiddenLabel
+            : passwordIsShownLabel),
+        icon));
+};
+const ShowPasswordButton = primitiveWithForwardRef(ShowPasswordButtonPrimitive);
+ShowPasswordButton.displayName = 'ShowPasswordButton';
+
+export { ShowPasswordButton };

package/dist/esm/primitives/PhoneNumberField/DialCodeSelect.mjs

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { classNames, ComponentClassName, countryDialCodes } from '@aws-amplify/ui';
+import { SelectField } from '../SelectField/SelectField.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const DialCodeSelectPrimitive = ({ className, dialCodeList, isReadOnly, ...props }, ref) => {
+    const dialList = dialCodeList ?? countryDialCodes;
+    const dialCodeOptions = React.useMemo(() => dialList.map((dialCode) => (
+    // Regarding the `disabled` attribute, see comment in SelectField below
+    React.createElement("option", { key: dialCode, value: dialCode, disabled: isReadOnly }, dialCode))), [dialList, isReadOnly]);
+    return (React.createElement(SelectField
+    /*
+        Since <select> elements do not support the `readonly` html attribute, it is suggested to use the `disabled` html attribute
+        so that a screen reader will announce something to the user about the interactivity of the options list ( https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+      */
+    , { "aria-disabled": isReadOnly, autoComplete: "tel-country-code", className: classNames(ComponentClassName.CountryCodeSelect, ComponentClassName.DialCodeSelect, className), labelHidden: true, ref: ref, ...props }, dialCodeOptions));
+};
+const DialCodeSelect = primitiveWithForwardRef(DialCodeSelectPrimitive);
+DialCodeSelect.displayName = 'DialCodeSelect';
+
+export { DialCodeSelect };

package/dist/esm/primitives/PhoneNumberField/PhoneNumberField.mjs

@@ -1 +1,17 @@
-import{__rest as e}from"tslib";import*as o from"react";import a from"classnames";import{ComponentClassNames as l,ComponentText as t}from"../shared/constants.mjs";import{CountryCodeSelect as n}from"./CountryCodeSelect.mjs";import{TextField as r}from"../TextField/TextField.mjs";const d=o.forwardRef(((d,i)=>{var{autoComplete:s="tel-national",className:C,countryCodeName:m,countryCodeLabel:u=t.PhoneNumberField.countryCodeLabel,countryCodeRef:c,defaultCountryCode:f,defaultDialCode:y,dialCodeLabel:b=t.PhoneNumberField.countryCodeLabel,dialCodeList:p,dialCodeName:h,dialCodeRef:N,hasError:L,isDisabled:R,isReadOnly:D,onCountryCodeChange:g,onDialCodeChange:E,onInput:F,size:v,variation:O}=d,j=e(d,["autoComplete","className","countryCodeName","countryCodeLabel","countryCodeRef","defaultCountryCode","defaultDialCode","dialCodeLabel","dialCodeList","dialCodeName","dialCodeRef","hasError","isDisabled","isReadOnly","onCountryCodeChange","onDialCodeChange","onInput","size","variation"]);const z=null!=h?h:m,P=null!=b?b:u,x=null!=y?y:f,I=null!=E?E:g,S=null!=N?N:c;return o.createElement(r,Object.assign({outerStartComponent:o.createElement(n,{defaultValue:x,dialCodeList:p,className:C,hasError:L,isDisabled:R,isReadOnly:D,label:P,name:z,onChange:I,ref:S,size:v,variation:O}),autoComplete:s,className:a(l.PhoneNumberField,C),hasError:L,isDisabled:R,isReadOnly:D,onInput:F,ref:i,size:v,type:"tel",variation:O},j))}));d.displayName="PhoneNumberField";export{d as PhoneNumberField};
+import * as React from 'react';
+import { classNames, ComponentClassName } from '@aws-amplify/ui';
+import { DialCodeSelect } from './DialCodeSelect.mjs';
+import { ComponentText } from '../shared/constants.mjs';
+import { TextField } from '../TextField/TextField.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const PhoneNumberFieldPrimitive = ({ autoComplete = 'tel-national', className, defaultDialCode, dialCodeLabel = ComponentText.PhoneNumberField.countryCodeLabel, dialCodeList, dialCodeName, dialCodeRef, hasError, isDisabled, isReadOnly, onDialCodeChange, onInput, size, variation, ...rest }, ref) => {
+    return (React.createElement(TextField, { outerStartComponent: React.createElement(DialCodeSelect, { defaultValue: defaultDialCode, dialCodeList: dialCodeList, className: className, hasError: hasError, isDisabled: isDisabled, isReadOnly: isReadOnly, label: dialCodeLabel, name: dialCodeName, onChange: onDialCodeChange, ref: dialCodeRef, size: size, variation: variation }), autoComplete: autoComplete, className: classNames(ComponentClassName.PhoneNumberField, className), hasError: hasError, isDisabled: isDisabled, isReadOnly: isReadOnly, onInput: onInput, ref: ref, size: size, type: "tel", variation: variation, ...rest }));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/phonenumberfield)
+ */
+const PhoneNumberField = primitiveWithForwardRef(PhoneNumberFieldPrimitive);
+PhoneNumberField.displayName = 'PhoneNumberField';
+
+export { PhoneNumberField };

package/dist/esm/primitives/Placeholder/Placeholder.mjs

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

package/dist/esm/primitives/Radio/Radio.mjs

@@ -1 +1,31 @@
-import{__rest as e}from"tslib";import*as i from"react";import a from"classnames";import{classNameModifierByFlag as t,classNameModifier as s}from"@aws-amplify/ui";import{ComponentClassNames as o}from"../shared/constants.mjs";import{Flex as d}from"../Flex/Flex.mjs";import{Input as l}from"../Input/Input.mjs";import{Text as r}from"../Text/Text.mjs";import{useRadioGroupContext as m}from"../RadioGroupField/context.mjs";import{useFieldset as n}from"../Fieldset/useFieldset.mjs";const p=(p,c)=>{var{children:h,className:u,id:b,isDisabled:f,testId:R,value:g,labelPosition:v,height:j,width:N,bottom:x,left:y,position:E,padding:F,right:I,top:w}=p,D=e(p,["children","className","id","isDisabled","testId","value","labelPosition","height","width","bottom","left","position","padding","right","top"]);const{currentValue:C,defaultValue:O,name:P,hasError:V,isGroupDisabled:k,isRequired:q,isReadOnly:z,onChange:B,size:G,labelPosition:T}=m(),{isFieldsetDisabled:H}=n(),L=H||(k||f||z&&O!==g),A=void 0!==C?g===C:void 0,J=void 0!==O?g===O:void 0,K=v||T;return i.createElement(d,{as:"label",className:a(o.Radio,t(o.Radio,"disabled",L),u),"data-disabled":L,"data-label-position":K,height:j,width:N,bottom:x,top:w,right:I,left:y,position:E,padding:F},h&&i.createElement(r,{as:"span",className:o.RadioLabel,"data-disabled":L},h),i.createElement(l,Object.assign({checked:A,className:a(o.VisuallyHidden,o.RadioInput),defaultChecked:J,hasError:V,id:b,isDisabled:L,isReadOnly:z,isRequired:q,onChange:B,ref:c,type:"radio",name:P,value:g},D)),i.createElement(d,{"aria-hidden":"true",as:"span",className:a(o.RadioButton,s(o.RadioButton,G)),"data-size":G,testId:R}))},c=i.forwardRef(p);c.displayName="Radio";export{c as Radio,p as RadioPrimitive};
+import * as React from 'react';
+import { classNames, ComponentClassName, classNameModifierByFlag, classNameModifier } from '@aws-amplify/ui';
+import { Flex } from '../Flex/Flex.mjs';
+import { Input } from '../Input/Input.mjs';
+import { Text } from '../Text/Text.mjs';
+import { useRadioGroupContext } from '../RadioGroupField/context.mjs';
+import { useFieldset } from '../Fieldset/useFieldset.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const RadioPrimitive = ({ children, className, id, isDisabled = false, testId, value, labelPosition: radioLabelPosition, ...rest }, ref) => {
+    const { currentValue, defaultValue, name, hasError, isGroupDisabled = false, isRequired, isReadOnly, onChange, size, labelPosition: groupLabelPosition, } = useRadioGroupContext();
+    const { isFieldsetDisabled } = useFieldset();
+    const shouldBeDisabled = isFieldsetDisabled
+        ? isFieldsetDisabled
+        : isGroupDisabled || isDisabled || (isReadOnly && defaultValue !== value);
+    // for controlled component
+    const checked = currentValue !== undefined ? value === currentValue : undefined;
+    // for uncontrolled component
+    const defaultChecked = defaultValue !== undefined ? value === defaultValue : undefined;
+    const labelPosition = radioLabelPosition
+        ? radioLabelPosition
+        : groupLabelPosition;
+    return (React.createElement(Flex, { as: "label", className: classNames(ComponentClassName.Radio, classNameModifierByFlag(ComponentClassName.Radio, `disabled`, shouldBeDisabled), labelPosition ? `amplify-label-${labelPosition}` : null, className) },
+        children && (React.createElement(Text, { as: "span", className: classNames(ComponentClassName.RadioLabel, classNameModifierByFlag(ComponentClassName.RadioLabel, `disabled`, shouldBeDisabled)) }, children)),
+        React.createElement(Input, { checked: checked, className: classNames(ComponentClassName.VisuallyHidden, ComponentClassName.RadioInput), defaultChecked: defaultChecked, hasError: hasError, id: id, isDisabled: shouldBeDisabled, isReadOnly: isReadOnly, isRequired: isRequired, onChange: onChange, ref: ref, type: "radio", name: name, value: value, ...rest }),
+        React.createElement(Flex, { "aria-hidden": "true", as: "span", className: classNames(ComponentClassName.RadioButton, classNameModifier(ComponentClassName.RadioButton, size)), testId: testId })));
+};
+const Radio = primitiveWithForwardRef(RadioPrimitive);
+Radio.displayName = 'Radio';
+
+export { Radio, RadioPrimitive };

package/dist/esm/primitives/RadioGroupField/RadioGroupField.mjs

@@ -1 +1,55 @@
-import{__rest as e}from"tslib";import*as i from"react";import r from"classnames";import{classNameModifier as a}from"@aws-amplify/ui";import{ComponentClassNames as s}from"../shared/constants.mjs";import"../Field/FieldClearButton.mjs";import{FieldDescription as l}from"../Field/FieldDescription.mjs";import{FieldErrorMessage as t}from"../Field/FieldErrorMessage.mjs";import"../Field/Field.mjs";import{Flex as d}from"../Flex/Flex.mjs";import{Label as o}from"../Label/Label.mjs";import{VisuallyHidden as m}from"../VisuallyHidden/VisuallyHidden.mjs";import{RadioGroupContext as n}from"./context.mjs";import{getTestId as u}from"../utils/getTestId.mjs";import{useStableId as p}from"../utils/useStableId.mjs";const c=i.forwardRef(((c,f)=>{var{children:b,className:F,defaultValue:j,descriptiveText:E,errorMessage:g,hasError:h=!1,id:R,isDisabled:v,isRequired:y,isReadOnly:x,label:H,labelHidden:I=!1,labelPosition:V,onChange:G,name:M,size:N,testId:z,value:C}=c,D=e(c,["children","className","defaultValue","descriptiveText","errorMessage","hasError","id","isDisabled","isRequired","isReadOnly","label","labelHidden","labelPosition","onChange","name","size","testId","value"]);const O=p(R),P=p(),T=E?P:void 0,q=u(z,s.RadioGroup),w=i.useMemo((()=>({currentValue:C,defaultValue:j,hasError:h,isRequired:y,isReadOnly:x,isGroupDisabled:v,onChange:G,size:N,name:M,labelPosition:V})),[j,h,v,y,x,G,N,M,C,V]);return i.createElement(d,Object.assign({as:"fieldset",className:r(s.Field,a(s.Field,N),s.RadioGroupField,F),"data-size":N,ref:f,role:"radiogroup",testId:z},D),i.createElement(m,{as:"legend"},H),i.createElement(o,{"aria-hidden":!0,visuallyHidden:I},H),i.createElement(l,{id:P,labelHidden:I,descriptiveText:E}),i.createElement(d,{"aria-describedby":T,className:s.RadioGroup,id:O,testId:q},i.createElement(n.Provider,{value:w},b)),i.createElement(t,{hasError:h,errorMessage:g}))}));c.displayName="RadioGroupField";export{c as RadioGroupField};
+import * as React from 'react';
+import { ComponentClassName, classNames, classNameModifier } from '@aws-amplify/ui';
+import '../Field/FieldClearButton.mjs';
+import { FieldDescription } from '../Field/FieldDescription.mjs';
+import { FieldErrorMessage } from '../Field/FieldErrorMessage.mjs';
+import '../Field/Field.mjs';
+import { Fieldset } from '../Fieldset/Fieldset.mjs';
+import '../Fieldset/useFieldset.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { RadioGroupContext } from './context.mjs';
+import { getTestId } from '../utils/getTestId.mjs';
+import { useStableId } from '../utils/useStableId.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const RadioGroupFieldPrimitive = ({ children, className, defaultValue, descriptiveText, errorMessage, hasError = false, id, isDisabled, isRequired, isReadOnly, legend, legendHidden = false, labelPosition, onChange, name, size, testId, value, variation, ...rest }, ref) => {
+    const fieldId = useStableId(id);
+    const descriptionId = useStableId();
+    const ariaDescribedBy = descriptiveText ? descriptionId : undefined;
+    const radioGroupTestId = getTestId(testId, ComponentClassName.RadioGroup);
+    const radioGroupContextValue = React.useMemo(() => ({
+        currentValue: value,
+        defaultValue,
+        hasError,
+        isRequired,
+        isReadOnly,
+        isGroupDisabled: isDisabled,
+        onChange,
+        size,
+        name,
+        labelPosition,
+    }), [
+        defaultValue,
+        hasError,
+        isDisabled,
+        isRequired,
+        isReadOnly,
+        onChange,
+        size,
+        name,
+        value,
+        labelPosition,
+    ]);
+    return (React.createElement(Fieldset, { className: classNames(ComponentClassName.Field, classNameModifier(ComponentClassName.Field, size), ComponentClassName.RadioGroupField, className), isDisabled: isDisabled, legend: legend, legendHidden: legendHidden, ref: ref, role: "radiogroup", size: size, testId: testId, variation: variation, ...rest },
+        React.createElement(FieldDescription, { id: descriptionId, labelHidden: legendHidden, descriptiveText: descriptiveText }),
+        React.createElement(Flex, { "aria-describedby": ariaDescribedBy, className: ComponentClassName.RadioGroup, id: fieldId, testId: radioGroupTestId },
+            React.createElement(RadioGroupContext.Provider, { value: radioGroupContextValue }, children)),
+        React.createElement(FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/radiogroupfield)
+ */
+const RadioGroupField = primitiveWithForwardRef(RadioGroupFieldPrimitive);
+RadioGroupField.displayName = 'RadioGroupField';
+
+export { RadioGroupField };

package/dist/esm/primitives/RadioGroupField/context.mjs

@@ -1 +1,9 @@
-import t,{useContext as e}from"react";const o=t.createContext({name:"default"}),r=()=>e(o);export{o as RadioGroupContext,r as useRadioGroupContext};
+import React__default, { useContext } from 'react';
+
+const defaultValue = { name: 'default' };
+const RadioGroupContext = React__default.createContext(defaultValue);
+const useRadioGroupContext = () => {
+    return useContext(RadioGroupContext);
+};
+
+export { RadioGroupContext, useRadioGroupContext };

package/dist/esm/primitives/Rating/Rating.mjs

@@ -1 +1,44 @@
-import{__rest as o}from"tslib";import*as e from"react";import l from"classnames";import{classNameModifier as t}from"@aws-amplify/ui";import{ComponentClassNames as i}from"../shared/constants.mjs";import{Flex as m}from"../Flex/Flex.mjs";import"../Icon/Icon.mjs";import"../Icon/context/IconsContext.mjs";import{useIcons as n}from"../Icon/context/useIcons.mjs";import"../View/View.mjs";import{IconStar as r}from"../Icon/icons/IconStar.mjs";import{isIconFilled as a,isIconEmpty as s,isIconMixed as c}from"./utils.mjs";import{RatingIcon as p}from"./RatingIcon.mjs";import{RatingMixedIcon as f}from"./RatingMixedIcon.mjs";import{VisuallyHidden as u}from"../VisuallyHidden/VisuallyHidden.mjs";const y=5,d=0,I=e.forwardRef(((I,g)=>{var j,v,x,{className:C,emptyColor:E,emptyIcon:N,fillColor:R,icon:V,maxValue:w=y,size:S,value:k=d}=I,z=o(I,["className","emptyColor","emptyIcon","fillColor","icon","maxValue","size","value"]);const b=n("rating"),h=null!==(j=null!=V?V:null==b?void 0:b.filled)&&void 0!==j?j:e.createElement(r,null),F=null!==(x=null!==(v=null!=N?N:V)&&void 0!==v?v:null==b?void 0:b.empty)&&void 0!==x?x:e.createElement(r,null),H=new Array(Math.ceil(w)).fill(1).map(((o,l)=>{const t=l+1;return a(t,k)?e.createElement(p,{key:l.toString(),icon:h,fill:R,className:"amplify-rating-icon-filled"}):s(t,k)?e.createElement(p,{key:l.toString(),icon:F,fill:E,className:"amplify-rating-icon-empty"}):c(t,k)?e.createElement(f,{key:l.toString(),fillIcon:h,emptyIcon:F,value:k,fillColor:R,emptyColor:E}):void 0}));return e.createElement(m,Object.assign({className:l(i.Rating,t(i.Rating,S),C),"data-size":S,ref:g},z),H,e.createElement(u,null,k," out of ",w," rating"))}));I.displayName="Rating";export{I as Rating};
+import * as React from 'react';
+import { classNameModifier, ComponentClassName, classNames } from '@aws-amplify/ui';
+import { Flex } from '../Flex/Flex.mjs';
+import '../Icon/Icon.mjs';
+import '../Icon/context/IconsContext.mjs';
+import { useIcons } from '../Icon/context/useIcons.mjs';
+import '../View/View.mjs';
+import { IconStar } from '../Icon/icons/IconStar.mjs';
+import { isIconFilled, isIconEmpty, isIconMixed } from './utils.mjs';
+import { RatingIcon } from './RatingIcon.mjs';
+import { RatingMixedIcon } from './RatingMixedIcon.mjs';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const RATING_DEFAULT_MAX_VALUE = 5;
+const RATING_DEFAULT_VALUE = 0;
+const RatingPrimitive = ({ className, emptyColor, emptyIcon, fillColor, icon, maxValue = RATING_DEFAULT_MAX_VALUE, size, value = RATING_DEFAULT_VALUE, ...rest }, ref) => {
+    const icons = useIcons('rating');
+    const filledIcon = icon ?? icons?.filled ?? React.createElement(IconStar, null);
+    const _emptyIcon = emptyIcon ?? icon ?? icons?.empty ?? React.createElement(IconStar, null);
+    const items = new Array(Math.ceil(maxValue)).fill(1).map((_, index) => {
+        const currentIconIndex = index + 1;
+        if (isIconFilled(currentIconIndex, value))
+            return (React.createElement(RatingIcon, { key: index.toString(), icon: filledIcon, fill: fillColor, className: classNameModifier(ComponentClassName.RatingIcon, 'filled') }));
+        if (isIconEmpty(currentIconIndex, value))
+            return (React.createElement(RatingIcon, { key: index.toString(), icon: _emptyIcon, fill: emptyColor, className: classNameModifier(ComponentClassName.RatingIcon, 'empty') }));
+        if (isIconMixed(currentIconIndex, value))
+            return (React.createElement(RatingMixedIcon, { key: index.toString(), fillIcon: filledIcon, emptyIcon: _emptyIcon, value: value, fillColor: fillColor, emptyColor: emptyColor }));
+    });
+    return (React.createElement(Flex, { className: classNames(ComponentClassName.Rating, classNameModifier(ComponentClassName.Rating, size), className), ref: ref, ...rest },
+        items,
+        React.createElement(VisuallyHidden, null,
+            value,
+            " out of ",
+            maxValue,
+            " rating")));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/rating)
+ */
+const Rating = primitiveWithForwardRef(RatingPrimitive);
+Rating.displayName = 'Rating';
+
+export { Rating };

package/dist/esm/primitives/Rating/RatingIcon.mjs

@@ -1 +1,11 @@
-import*as a from"react";import e from"classnames";import{View as s}from"../View/View.mjs";const i=({icon:i,fill:m,className:r})=>a.createElement(s,{as:"span",className:"amplify-rating-icon-container","aria-hidden":"true"},a.createElement(s,{as:"span",className:e(r),color:m},i));i.displayName="RatingIcon";export{i as RatingIcon};
+import * as React from 'react';
+import { ComponentClassName, classNames } from '@aws-amplify/ui';
+import { View } from '../View/View.mjs';
+
+const RatingIcon = ({ icon, fill, className, }) => {
+    return (React.createElement(View, { as: "span", className: ComponentClassName.RatingItem, "aria-hidden": "true" },
+        React.createElement(View, { as: "span", className: classNames(className), color: fill }, icon)));
+};
+RatingIcon.displayName = 'RatingIcon';
+
+export { RatingIcon };

package/dist/esm/primitives/Rating/RatingMixedIcon.mjs

@@ -1 +1,13 @@
-import*as a from"react";import e from"classnames";import{View as i}from"../View/View.mjs";const l=({emptyColor:l,emptyIcon:n,fillColor:t,fillIcon:m,value:r})=>{const s=r%1*100+"%";return a.createElement(i,{as:"span",className:"amplify-rating-icon-container","aria-hidden":"true"},a.createElement(i,{as:"span",className:"amplify-rating-label"},a.createElement(i,{as:"span",className:e("amplify-rating-icon","amplify-rating-icon-empty"),color:l},n)),a.createElement(i,{as:"span",className:"amplify-rating-label",width:s},a.createElement(i,{as:"span",className:e("amplify-rating-icon","amplify-rating-icon-filled"),color:t},m)))};l.displayName="RatingMixedIcon";export{l as RatingMixedIcon};
+import * as React from 'react';
+import { ComponentClassName, classNames, classNameModifier } from '@aws-amplify/ui';
+import { View } from '../View/View.mjs';
+
+const RatingMixedIcon = ({ emptyColor, emptyIcon, fillColor, fillIcon, value, }) => {
+    const widthPercentage = `${(value % 1) * 100}%`;
+    return (React.createElement(View, { as: "span", className: ComponentClassName.RatingItem, "aria-hidden": "true" },
+        React.createElement(View, { as: "span", className: classNames(ComponentClassName.RatingIcon, classNameModifier(ComponentClassName.RatingIcon, 'empty')), color: emptyColor }, emptyIcon),
+        React.createElement(View, { as: "span", className: classNames(ComponentClassName.RatingIcon, classNameModifier(ComponentClassName.RatingIcon, 'filled')), width: widthPercentage, color: fillColor }, fillIcon)));
+};
+RatingMixedIcon.displayName = 'RatingMixedIcon';
+
+export { RatingMixedIcon };

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

@@ -1 +1,18 @@
-const o=(o,t)=>o<=t,t=(o,t)=>o-1>=t,c=(o,t)=>o>t&&o-1<t;export{t as isIconEmpty,o as isIconFilled,c as isIconMixed};
+const isIconFilled = (currentIconIndex, ratingValue) => {
+    if (currentIconIndex <= ratingValue)
+        return true;
+    return false;
+};
+const isIconEmpty = (currentIconIndex, ratingValue) => {
+    if (currentIconIndex - 1 >= ratingValue)
+        return true;
+    return false;
+};
+const isIconMixed = (currentIconIndex, ratingValue) => {
+    if (currentIconIndex > ratingValue && currentIconIndex - 1 < ratingValue) {
+        return true;
+    }
+    return false;
+};
+
+export { isIconEmpty, isIconFilled, isIconMixed };

package/dist/esm/primitives/ScrollView/ScrollView.mjs

@@ -1 +1,13 @@
-import{__rest as r}from"tslib";import*as e from"react";import a from"classnames";import{classNameModifier as o}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,s)=>{var{children:l,className:n,orientation:c}=m,f=r(m,["children","className","orientation"]);return e.createElement(t,Object.assign({className:a(i.ScrollView,o(i.ScrollView,c),n),"data-orientation":c,ref:s},f),l)}));m.displayName="ScrollView";export{m as ScrollView};
+import * as React from 'react';
+import { classNames, ComponentClassName, classNameModifier } from '@aws-amplify/ui';
+import { View } from '../View/View.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const ScrollViewPrimitive = ({ children, className, orientation, ...rest }, ref) => (React.createElement(View, { className: classNames(ComponentClassName.ScrollView, classNameModifier(ComponentClassName.ScrollView, orientation), className), ref: ref, ...rest }, children));
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/scrollview)
+ */
+const ScrollView = primitiveWithForwardRef(ScrollViewPrimitive);
+ScrollView.displayName = 'ScrollView';
+
+export { ScrollView };

package/dist/esm/primitives/SearchField/SearchField.mjs

@@ -1 +1,38 @@
-import{__rest as e}from"tslib";import o from"classnames";import*as a from"react";import{FieldClearButton as n}from"../Field/FieldClearButton.mjs";import"../Field/FieldDescription.mjs";import"../Field/FieldErrorMessage.mjs";import"../Field/Field.mjs";import{FieldGroupIcon as t}from"../FieldGroupIcon/FieldGroupIcon.mjs";import"../FieldGroupIcon/FieldGroupIconButton.mjs";import{ComponentClassNames as r}from"../shared/constants.mjs";import"../View/View.mjs";import{IconSearch as i}from"../Icon/icons/IconSearch.mjs";import"../Icon/context/IconsContext.mjs";import{SearchFieldButton as l}from"./SearchFieldButton.mjs";import{TextField as m}from"../TextField/TextField.mjs";import{useSearchField as s}from"./useSearchField.mjs";import{strHasLength as c}from"../shared/utils.mjs";const d=a.forwardRef(((d,u)=>{var{autoComplete:p="off",className:f,isDisabled:h,clearButtonLabel:C,labelHidden:F=!0,name:b="q",hasSearchButton:j=!0,hasSearchIcon:S=!1,onChange:I,onClear:B,onSubmit:v,searchButtonRef:E,size:g,defaultValue:x,value:D}=d,V=e(d,["autoComplete","className","isDisabled","clearButtonLabel","labelHidden","name","hasSearchButton","hasSearchIcon","onChange","onClear","onSubmit","searchButtonRef","size","defaultValue","value"]);const{composedValue:w,onClearHandler:z,onKeyDown:R,onClick:k,handleOnChange:G,composedRefs:H}=s({defaultValue:x,value:D,onChange:I,onClear:B,onSubmit:v,externalRef:u}),N=j?a.createElement(l,{isDisabled:h,onClick:k,ref:E,size:g}):void 0,y=S?a.createElement(t,null,a.createElement(i,null)):void 0;return a.createElement(m,Object.assign({autoComplete:p,className:o(r.SearchField,f),labelHidden:F,innerStartComponent:y,innerEndComponent:a.createElement(n,{ariaLabel:C,excludeFromTabOrder:!0,isVisible:!h&&c(w),onClick:z,size:g,variation:"link"}),isDisabled:h,name:b,onChange:G,onKeyDown:R,outerEndComponent:N,ref:H,size:g,value:w},V))}));d.displayName="SearchField";export{d as SearchField};
+import { classNames, ComponentClassName } from '@aws-amplify/ui';
+import * as React from 'react';
+import { FieldClearButton } from '../Field/FieldClearButton.mjs';
+import '../Field/FieldDescription.mjs';
+import '../Field/FieldErrorMessage.mjs';
+import '../Field/Field.mjs';
+import { FieldGroupIcon } from '../FieldGroupIcon/FieldGroupIcon.mjs';
+import '../FieldGroupIcon/FieldGroupIconButton.mjs';
+import '../View/View.mjs';
+import { IconSearch } from '../Icon/icons/IconSearch.mjs';
+import '../Icon/context/IconsContext.mjs';
+import { SearchFieldButton } from './SearchFieldButton.mjs';
+import { TextField } from '../TextField/TextField.mjs';
+import { useSearchField } from './useSearchField.mjs';
+import { strHasLength } from '../shared/utils.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const SearchFieldPrimitive = ({ autoComplete = 'off', className, isDisabled, clearButtonLabel, labelHidden = true, name = 'q', hasSearchButton = true, hasSearchIcon = false, onChange, onClear, onSubmit, searchButtonRef, size, defaultValue, value, ...rest }, ref) => {
+    const { composedValue, onClearHandler, onKeyDown, onClick, handleOnChange, composedRefs, } = useSearchField({
+        defaultValue,
+        value,
+        onChange,
+        onClear,
+        onSubmit,
+        externalRef: ref,
+    });
+    const SearchButton = hasSearchButton ? (React.createElement(SearchFieldButton, { isDisabled: isDisabled, onClick: onClick, ref: searchButtonRef, size: size })) : undefined;
+    const SearchIcon = hasSearchIcon ? (React.createElement(FieldGroupIcon, null,
+        React.createElement(IconSearch, null))) : undefined;
+    return (React.createElement(TextField, { autoComplete: autoComplete, className: classNames(ComponentClassName.SearchField, className), labelHidden: labelHidden, innerStartComponent: SearchIcon, innerEndComponent: React.createElement(FieldClearButton, { ariaLabel: clearButtonLabel, excludeFromTabOrder: true, isVisible: !isDisabled && strHasLength(composedValue), onClick: onClearHandler, size: size, variation: "link" }), isDisabled: isDisabled, name: name, onChange: handleOnChange, onKeyDown: onKeyDown, outerEndComponent: SearchButton, ref: composedRefs, size: size, value: composedValue, ...rest }));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/searchfield)
+ */
+const SearchField = primitiveWithForwardRef(SearchFieldPrimitive);
+SearchField.displayName = 'SearchField';
+
+export { SearchField };

package/dist/esm/primitives/SearchField/SearchFieldButton.mjs

@@ -1 +1,21 @@
-import{__rest as o}from"tslib";import*as e from"react";import{ComponentClassNames as r,ComponentText as t}from"../shared/constants.mjs";import"../FieldGroupIcon/FieldGroupIcon.mjs";import{FieldGroupIconButton as s}from"../FieldGroupIcon/FieldGroupIconButton.mjs";import"../Icon/Icon.mjs";import"../Icon/context/IconsContext.mjs";import{useIcons as c}from"../Icon/context/useIcons.mjs";import"classnames";import"../View/View.mjs";import{IconSearch as i}from"../Icon/icons/IconSearch.mjs";const m=t.SearchField.searchButtonLabel,n=e.forwardRef(((t,n)=>{var a,{size:l}=t,p=o(t,["size"]);const d=c("searchField");return e.createElement(s,Object.assign({ariaLabel:m,className:r.SearchFieldSearch,size:l,ref:n,type:"submit"},p),null!==(a=null==d?void 0:d.search)&&void 0!==a?a:e.createElement(i,null))}));n.displayName="SearchFieldButton";export{n as SearchFieldButton};
+import * as React from 'react';
+import { ComponentClassName } from '@aws-amplify/ui';
+import { ComponentText } from '../shared/constants.mjs';
+import '../FieldGroupIcon/FieldGroupIcon.mjs';
+import { FieldGroupIconButton } from '../FieldGroupIcon/FieldGroupIconButton.mjs';
+import '../Icon/Icon.mjs';
+import '../Icon/context/IconsContext.mjs';
+import { useIcons } from '../Icon/context/useIcons.mjs';
+import '../View/View.mjs';
+import { IconSearch } from '../Icon/icons/IconSearch.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const ariaLabelText = ComponentText.SearchField.searchButtonLabel;
+const SearchFieldButtonPrimitive = ({ size, ...props }, ref) => {
+    const icons = useIcons('searchField');
+    return (React.createElement(FieldGroupIconButton, { ariaLabel: ariaLabelText, className: ComponentClassName.SearchFieldSearch, size: size, ref: ref, type: "submit", ...props }, icons?.search ?? React.createElement(IconSearch, null)));
+};
+const SearchFieldButton = primitiveWithForwardRef(SearchFieldButtonPrimitive);
+SearchFieldButton.displayName = 'SearchFieldButton';
+
+export { SearchFieldButton };

package/dist/esm/primitives/SearchField/useSearchField.mjs

@@ -1 +1,64 @@
-import*as e from"react";import{isFunction as a}from"@aws-amplify/ui";import{ESCAPE_KEY as l,ENTER_KEY as o}from"../shared/constants.mjs";import{useComposeRefsCallback as n}from"../../hooks/useComposeRefsCallback.mjs";const s=new Set([l,o]),t=({defaultValue:t="",value:r,onChange:u,onClear:c,onSubmit:m,externalRef:f})=>{const i=void 0!==r,[C,p]=e.useState(t),d=i?r:C,k=e.useRef(null),b=n({externalRef:f,internalRef:k}),v=e.useCallback((()=>{var e;i||p(""),null===(e=null==k?void 0:k.current)||void 0===e||e.focus(),a(c)&&c()}),[i,p,c]),h=e.useCallback((e=>{a(m)&&m(e)}),[m]),R=e.useCallback((e=>{const{key:a}=e;s.has(a)&&(e.preventDefault(),a===l?v():a===o&&h(d))}),[d,v,h]),g=e.useCallback((e=>{i||p(e.target.value),a(u)&&u(e)}),[i,u,p]),w=e.useCallback((()=>{h(d)}),[h,d]);return{composedValue:d,onClearHandler:v,onKeyDown:R,onClick:w,handleOnChange:g,composedRefs:b}};export{t as useSearchField};
+import * as React from 'react';
+import { isFunction } from '@aws-amplify/ui';
+import { ESCAPE_KEY, ENTER_KEY } from '../shared/constants.mjs';
+import { useComposeRefsCallback } from '../../hooks/useComposeRefsCallback.mjs';
+
+const DEFAULT_KEYS = new Set([ESCAPE_KEY, ENTER_KEY]);
+const useSearchField = ({ defaultValue = '', value, onChange, onClear, onSubmit, externalRef, }) => {
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const composedValue = isControlled ? value : internalValue;
+    const internalRef = React.useRef(null);
+    const composedRefs = useComposeRefsCallback({
+        externalRef,
+        internalRef,
+    });
+    const onClearHandler = React.useCallback(() => {
+        if (!isControlled) {
+            setInternalValue('');
+        }
+        internalRef?.current?.focus();
+        if (isFunction(onClear)) {
+            onClear();
+        }
+    }, [isControlled, setInternalValue, onClear]);
+    const onSubmitHandler = React.useCallback((value) => {
+        if (isFunction(onSubmit)) {
+            onSubmit(value);
+        }
+    }, [onSubmit]);
+    const onKeyDown = React.useCallback((event) => {
+        const { key } = event;
+        if (!DEFAULT_KEYS.has(key)) {
+            return;
+        }
+        event.preventDefault();
+        if (key === ESCAPE_KEY) {
+            onClearHandler();
+        }
+        else if (key === ENTER_KEY) {
+            onSubmitHandler(composedValue);
+        }
+    }, [composedValue, onClearHandler, onSubmitHandler]);
+    const handleOnChange = React.useCallback((event) => {
+        if (!isControlled) {
+            setInternalValue(event.target.value);
+        }
+        if (isFunction(onChange)) {
+            onChange(event);
+        }
+    }, [isControlled, onChange, setInternalValue]);
+    const onClick = React.useCallback(() => {
+        onSubmitHandler(composedValue);
+    }, [onSubmitHandler, composedValue]);
+    return {
+        composedValue,
+        onClearHandler,
+        onKeyDown,
+        onClick,
+        handleOnChange,
+        composedRefs,
+    };
+};
+
+export { useSearchField };

package/dist/esm/primitives/Select/Select.mjs

@@ -1 +1,31 @@
-import{__rest as e}from"tslib";import*as l from"react";import o from"classnames";import{classNameModifier as t,classNameModifierByFlag as a}from"@aws-amplify/ui";import{ComponentClassNames as r}from"../shared/constants.mjs";import{Flex as i}from"../Flex/Flex.mjs";import"../Icon/Icon.mjs";import"../Icon/context/IconsContext.mjs";import{useIcons as s}from"../Icon/context/useIcons.mjs";import{View as c}from"../View/View.mjs";import{IconExpandMore as m}from"../Icon/icons/IconExpandMore.mjs";import{useFieldset as n}from"../Fieldset/useFieldset.mjs";const p=l.forwardRef(((p,d)=>{var u,{autoComplete:f,className:v,size:S,variation:I,value:j,defaultValue:x,hasError:E,icon:h,iconColor:C,children:b,placeholder:z,isDisabled:F,isRequired:N,isMultiple:V=!1,selectSize:w=1}=p,D=e(p,["autoComplete","className","size","variation","value","defaultValue","hasError","icon","iconColor","children","placeholder","isDisabled","isRequired","isMultiple","selectSize"]);const q=void 0===j&&void 0===x&&z,M=V||w>1,R=o(r.Select,r.FieldGroupControl,t(r.Select,S),t(r.Select,I),a(r.Select,"error",E),a(r.Select,"expanded",M),v),W=s("select"),{isFieldsetDisabled:y}=n();return l.createElement(c,{className:r.SelectWrapper},l.createElement(c,Object.assign({"aria-invalid":E,as:"select",autoComplete:f,value:j,defaultValue:q?"":x,isDisabled:y||F,multiple:V,size:w,required:N,"data-size":S,"data-variation":I,className:R,ref:d},D),z&&l.createElement("option",{value:""},z),b),M?null:l.createElement(i,{className:o(r.SelectIconWrapper,t(r.SelectIconWrapper,S)),color:C},null!==(u=null!=h?h:null==W?void 0:W.expand)&&void 0!==u?u:l.createElement(m,null)))}));p.displayName="Select";export{p as Select};
+import * as React from 'react';
+import { classNames, ComponentClassName, classNameModifier, classNameModifierByFlag } from '@aws-amplify/ui';
+import { Flex } from '../Flex/Flex.mjs';
+import '../Icon/Icon.mjs';
+import '../Icon/context/IconsContext.mjs';
+import { useIcons } from '../Icon/context/useIcons.mjs';
+import { View } from '../View/View.mjs';
+import { IconExpandMore } from '../Icon/icons/IconExpandMore.mjs';
+import { useFieldset } from '../Fieldset/useFieldset.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const SelectPrimitive = ({ autoComplete, className, size, variation, value, defaultValue, hasError, icon, iconColor, children, placeholder, isDisabled, isRequired, isMultiple = false, selectSize = 1, ...rest }, ref) => {
+    const DEFAULT_PLACEHOLDER_VALUE = '';
+    // value === undefined is to make sure that component is used in uncontrolled way so that setting defaultValue is valid
+    const shouldSetDefaultPlaceholderValue = value === undefined && defaultValue === undefined && placeholder;
+    const isExpanded = isMultiple || selectSize > 1;
+    const componentClasses = classNames(ComponentClassName.Select, ComponentClassName.FieldGroupControl, classNameModifier(ComponentClassName.Select, size), classNameModifier(ComponentClassName.Select, variation), classNameModifierByFlag(ComponentClassName.Select, 'error', hasError), classNameModifierByFlag(ComponentClassName.Select, 'expanded', isExpanded), className);
+    const icons = useIcons('select');
+    const { isFieldsetDisabled } = useFieldset();
+    return (React.createElement(View, { className: ComponentClassName.SelectWrapper },
+        React.createElement(View, { "aria-invalid": hasError, as: "select", autoComplete: autoComplete, value: value, defaultValue: shouldSetDefaultPlaceholderValue
+                ? DEFAULT_PLACEHOLDER_VALUE
+                : defaultValue, isDisabled: isFieldsetDisabled ? isFieldsetDisabled : isDisabled, multiple: isMultiple, size: selectSize, required: isRequired, className: componentClasses, ref: ref, ...rest },
+            placeholder && React.createElement("option", { value: "" }, placeholder),
+            children),
+        isExpanded ? null : (React.createElement(Flex, { className: classNames(ComponentClassName.SelectIcon, classNameModifier(ComponentClassName.SelectIcon, size)), color: iconColor }, icon ?? icons?.expand ?? React.createElement(IconExpandMore, null)))));
+};
+const Select = primitiveWithForwardRef(SelectPrimitive);
+Select.displayName = 'Select';
+
+export { Select };