@aws-amplify/ui-react 5.1.1 → 5.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (126) hide show
  1. package/dist/Field-4bd811d7.js +1 -0
  2. package/dist/esm/PrimitiveCatalog.mjs +1 -1
  3. package/dist/esm/components/AccountSettings/ChangePassword/ChangePassword.mjs +1 -1
  4. package/dist/esm/components/AccountSettings/ChangePassword/defaults.mjs +1 -1
  5. package/dist/esm/components/AccountSettings/DeleteUser/DeleteUser.mjs +1 -1
  6. package/dist/esm/components/AccountSettings/DeleteUser/defaults.mjs +1 -1
  7. package/dist/esm/components/AccountSettings/shared/Defaults.mjs +1 -1
  8. package/dist/esm/components/Authenticator/Authenticator.mjs +1 -1
  9. package/dist/esm/components/Authenticator/ConfirmSignIn/ConfirmSignIn.mjs +1 -1
  10. package/dist/esm/components/Authenticator/ConfirmSignUp/ConfirmSignUp.mjs +1 -1
  11. package/dist/esm/components/Authenticator/FederatedSignIn/FederatedSignInButtons/FederatedSignInButton.mjs +1 -1
  12. package/dist/esm/components/Authenticator/ForceNewPassword/ForceNewPassword.mjs +1 -1
  13. package/dist/esm/components/Authenticator/ResetPassword/ConfirmResetPassword.mjs +1 -1
  14. package/dist/esm/components/Authenticator/ResetPassword/ResetPassword.mjs +1 -1
  15. package/dist/esm/components/Authenticator/RouteContainer/RouteContainer.mjs +1 -1
  16. package/dist/esm/components/Authenticator/SetupTOTP/SetupTOTP.mjs +1 -1
  17. package/dist/esm/components/Authenticator/SignIn/SignIn.mjs +1 -1
  18. package/dist/esm/components/Authenticator/SignUp/SignUp.mjs +1 -1
  19. package/dist/esm/components/Authenticator/VerifyUser/ConfirmVerifyUser.mjs +1 -1
  20. package/dist/esm/components/Authenticator/VerifyUser/VerifyUser.mjs +1 -1
  21. package/dist/esm/components/Storage/FileUploader/FileUploader.mjs +1 -1
  22. package/dist/esm/components/Storage/FileUploader/UploadDropZone/UploadDropZone.mjs +1 -0
  23. package/dist/esm/components/Storage/FileUploader/UploadPreviewer/UploadPreviewer.mjs +1 -0
  24. package/dist/esm/components/Storage/FileUploader/UploadTracker/UploadMessage.mjs +1 -1
  25. package/dist/esm/components/Storage/FileUploader/UploadTracker/UploadTracker.mjs +1 -0
  26. package/dist/esm/components/index.mjs +1 -1
  27. package/dist/esm/index.mjs +1 -1
  28. package/dist/esm/internal.mjs +1 -1
  29. package/dist/esm/primitives/Alert/Alert.mjs +1 -1
  30. package/dist/esm/primitives/Alert/AlertIcon.mjs +1 -1
  31. package/dist/esm/primitives/Button/Button.mjs +1 -1
  32. package/dist/esm/primitives/Checkbox/Checkbox.mjs +1 -1
  33. package/dist/esm/primitives/DropZone/DropZone.mjs +1 -0
  34. package/dist/esm/primitives/DropZone/DropZoneChildren.mjs +1 -0
  35. package/dist/esm/primitives/DropZone/DropZoneContainer.mjs +1 -0
  36. package/dist/esm/primitives/DropZone/DropZoneProvider.mjs +1 -0
  37. package/dist/esm/primitives/DropZone/useDropZone.mjs +1 -0
  38. package/dist/esm/primitives/Expander/ExpanderItem.mjs +1 -1
  39. package/dist/esm/primitives/Field/FieldClearButton.mjs +1 -1
  40. package/dist/esm/primitives/Fieldset/Fieldset.mjs +1 -0
  41. package/dist/esm/primitives/Fieldset/useFieldset.mjs +1 -0
  42. package/dist/esm/primitives/Icon/context/IconsContext.mjs +1 -0
  43. package/dist/esm/primitives/Icon/context/IconsProvider.mjs +1 -0
  44. package/dist/esm/primitives/Icon/context/useIcons.mjs +1 -0
  45. package/dist/esm/primitives/Input/Input.mjs +1 -1
  46. package/dist/esm/primitives/Menu/Menu.mjs +1 -1
  47. package/dist/esm/primitives/Message/Message.mjs +1 -0
  48. package/dist/esm/primitives/Message/MessageContainer.mjs +1 -0
  49. package/dist/esm/primitives/Message/MessageContent.mjs +1 -0
  50. package/dist/esm/primitives/Message/MessageDismiss.mjs +1 -0
  51. package/dist/esm/primitives/Message/MessageHeading.mjs +1 -0
  52. package/dist/esm/primitives/Message/MessageIcon.mjs +1 -0
  53. package/dist/esm/primitives/Message/useMessage.mjs +1 -0
  54. package/dist/esm/primitives/Pagination/PaginationItem.mjs +1 -1
  55. package/dist/esm/primitives/PasswordField/ShowPasswordButton.mjs +1 -1
  56. package/dist/esm/primitives/Radio/Radio.mjs +1 -1
  57. package/dist/esm/primitives/Rating/Rating.mjs +1 -1
  58. package/dist/esm/primitives/SearchField/SearchField.mjs +1 -1
  59. package/dist/esm/primitives/SearchField/SearchFieldButton.mjs +1 -1
  60. package/dist/esm/primitives/Select/Select.mjs +1 -1
  61. package/dist/esm/primitives/SliderField/SliderField.mjs +1 -1
  62. package/dist/esm/primitives/StepperField/StepperField.mjs +1 -1
  63. package/dist/esm/primitives/SwitchField/SwitchField.mjs +1 -1
  64. package/dist/esm/primitives/TextArea/TextArea.mjs +1 -1
  65. package/dist/esm/primitives/index.mjs +1 -1
  66. package/dist/esm/primitives/shared/constants.mjs +1 -1
  67. package/dist/esm/version.mjs +1 -1
  68. package/dist/index.js +1 -1
  69. package/dist/internal.js +1 -1
  70. package/dist/styles.css +353 -11
  71. package/dist/types/components/Authenticator/Authenticator.d.ts +20 -2
  72. package/dist/types/components/Authenticator/hooks/useCustomComponents/index.d.ts +1 -7
  73. package/dist/types/components/Authenticator/hooks/useCustomComponents/useCustomComponents.d.ts +7 -0
  74. package/dist/types/components/Storage/FileUploader/UploadDropZone/UploadDropZone.d.ts +3 -0
  75. package/dist/types/components/Storage/FileUploader/UploadDropZone/index.d.ts +1 -3
  76. package/dist/types/components/Storage/FileUploader/UploadPreviewer/UploadPreviewer.d.ts +3 -0
  77. package/dist/types/components/Storage/FileUploader/UploadPreviewer/index.d.ts +1 -3
  78. package/dist/types/components/Storage/FileUploader/UploadTracker/UploadTracker.d.ts +3 -0
  79. package/dist/types/components/Storage/FileUploader/UploadTracker/index.d.ts +1 -3
  80. package/dist/types/components/ThemeProvider/ThemeProvider.d.ts +32 -0
  81. package/dist/types/components/ThemeProvider/index.d.ts +1 -32
  82. package/dist/types/internal.d.ts +1 -0
  83. package/dist/types/primitives/DropZone/DropZone.d.ts +13 -0
  84. package/dist/types/primitives/DropZone/DropZoneChildren.d.ts +18 -0
  85. package/dist/types/primitives/DropZone/DropZoneContainer.d.ts +4 -0
  86. package/dist/types/primitives/DropZone/DropZoneProvider.d.ts +8 -0
  87. package/dist/types/primitives/DropZone/index.d.ts +2 -0
  88. package/dist/types/primitives/DropZone/types.d.ts +32 -0
  89. package/dist/types/primitives/DropZone/useDropZone.d.ts +2 -0
  90. package/dist/types/primitives/Fieldset/Fieldset.d.ts +5 -0
  91. package/dist/types/primitives/Fieldset/index.d.ts +2 -0
  92. package/dist/types/primitives/Fieldset/useFieldset.d.ts +12 -0
  93. package/dist/types/primitives/Icon/context/IconsContext.d.ts +21 -0
  94. package/dist/types/primitives/Icon/context/IconsProvider.d.ts +8 -0
  95. package/dist/types/primitives/Icon/context/index.d.ts +2 -0
  96. package/dist/types/primitives/Icon/context/useIcons.d.ts +2 -0
  97. package/dist/types/primitives/Icon/index.d.ts +2 -0
  98. package/dist/types/primitives/Icon/internal.d.ts +1 -0
  99. package/dist/types/primitives/Message/Message.d.ts +5 -0
  100. package/dist/types/primitives/Message/MessageContainer.d.ts +2 -0
  101. package/dist/types/primitives/Message/MessageContent.d.ts +2 -0
  102. package/dist/types/primitives/Message/MessageDismiss.d.ts +2 -0
  103. package/dist/types/primitives/Message/MessageHeading.d.ts +2 -0
  104. package/dist/types/primitives/Message/MessageIcon.d.ts +2 -0
  105. package/dist/types/primitives/Message/index.d.ts +1 -0
  106. package/dist/types/primitives/Message/useMessage.d.ts +9 -0
  107. package/dist/types/primitives/Rating/RatingIcon.d.ts +1 -1
  108. package/dist/types/primitives/Rating/RatingMixedIcon.d.ts +2 -2
  109. package/dist/types/primitives/components.d.ts +5 -0
  110. package/dist/types/primitives/index.d.ts +1 -0
  111. package/dist/types/primitives/shared/constants.d.ts +3 -0
  112. package/dist/types/primitives/shared/types.d.ts +2 -2
  113. package/dist/types/primitives/types/checkbox.d.ts +1 -1
  114. package/dist/types/primitives/types/fieldset.d.ts +46 -0
  115. package/dist/types/primitives/types/index.d.ts +2 -0
  116. package/dist/types/primitives/types/message.d.ts +70 -0
  117. package/dist/types/version.d.ts +1 -1
  118. package/package.json +3 -3
  119. package/dist/Field-fb9d2ffe.js +0 -1
  120. package/dist/esm/components/Storage/FileUploader/UploadDropZone/index.mjs +0 -1
  121. package/dist/esm/components/Storage/FileUploader/UploadPreviewer/index.mjs +0 -1
  122. package/dist/esm/components/Storage/FileUploader/UploadTracker/index.mjs +0 -1
  123. package/dist/esm/primitives/Checkbox/useCheckbox.mjs +0 -1
  124. package/dist/types/primitives/Checkbox/useCheckbox.d.ts +0 -3
  125. /package/dist/esm/components/Authenticator/hooks/useCustomComponents/{index.mjs → useCustomComponents.mjs} +0 -0
  126. /package/dist/esm/components/ThemeProvider/{index.mjs → ThemeProvider.mjs} +0 -0
@@ -0,0 +1,13 @@
1
+ import { ForwardRefPrimitive } from '../types';
2
+ import { BaseDropZoneProps } from './types';
3
+ import { Accepted, Default, Rejected } from './DropZoneChildren';
4
+ type DropZoneType = ForwardRefPrimitive<BaseDropZoneProps, 'div'> & {
5
+ Accepted: typeof Accepted;
6
+ Rejected: typeof Rejected;
7
+ Default: typeof Default;
8
+ };
9
+ /**
10
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/dropzone)
11
+ */
12
+ declare const DropZone: DropZoneType;
13
+ export { DropZone };
@@ -0,0 +1,18 @@
1
+ import { Primitive } from '../types';
2
+ /**
3
+ * These are syntactic sugar components that make it easy to compose children
4
+ * in DropZone without having to expose the DropZoneContext.
5
+ */
6
+ /**
7
+ * This component renders when the user is dragging ONLY accepted files on the DropZone.
8
+ */
9
+ declare const Accepted: Primitive<{}, 'div'>;
10
+ /**
11
+ * This component renders when the user is dragging ANY rejected files on the DropZone.
12
+ */
13
+ declare const Rejected: Primitive<{}, 'div'>;
14
+ /**
15
+ * This component renders by default when the user is not dragging.
16
+ */
17
+ declare const Default: Primitive<{}, 'div'>;
18
+ export { Accepted, Rejected, Default };
@@ -0,0 +1,4 @@
1
+ import { BaseDropZoneContainerProps } from './types';
2
+ import { ForwardRefPrimitive } from '../types';
3
+ declare const DropZoneContainer: ForwardRefPrimitive<BaseDropZoneContainerProps, 'div'>;
4
+ export { DropZoneContainer };
@@ -0,0 +1,8 @@
1
+ import * as React from 'react';
2
+ import { DragState } from './types';
3
+ declare const DropZoneContext: React.Context<DragState>;
4
+ declare const DropZoneProvider: ({ value, children, }: {
5
+ value: DragState;
6
+ children?: React.ReactNode;
7
+ }) => JSX.Element;
8
+ export { DropZoneProvider, DropZoneContext };
@@ -0,0 +1,2 @@
1
+ export { DropZone } from './DropZone';
2
+ export { DropZoneProps } from './types';
@@ -0,0 +1,32 @@
1
+ import * as React from 'react';
2
+ import { ElementType, PrimitiveProps, BaseViewProps } from '../types';
3
+ interface DropProps {
4
+ acceptedFiles: File[];
5
+ rejectedFiles: File[];
6
+ }
7
+ export interface UseDropZoneProps extends Partial<DragEvents> {
8
+ onDropComplete?: (props: DropProps) => void;
9
+ /**
10
+ * List of accepted File types, values of `['*']` or undefined allow any files
11
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept
12
+ */
13
+ acceptedFileTypes?: string[];
14
+ }
15
+ export interface BaseDropZoneProps extends BaseViewProps, UseDropZoneProps {
16
+ }
17
+ export type DropZoneProps<Element extends ElementType = 'div'> = PrimitiveProps<BaseDropZoneProps, Element>;
18
+ interface DragEvents {
19
+ onDragStart: (event: React.DragEvent<HTMLDivElement>) => void;
20
+ onDragEnter: (event: React.DragEvent<HTMLDivElement>) => void;
21
+ onDragLeave: (event: React.DragEvent<HTMLDivElement>) => void;
22
+ onDragOver: (event: React.DragEvent<HTMLDivElement>) => void;
23
+ onDrop: (event: React.DragEvent<HTMLDivElement>) => void;
24
+ }
25
+ export type DragState = 'accept' | 'reject' | 'inactive';
26
+ export interface UseDropZoneReturn extends DragEvents {
27
+ dragState: DragState;
28
+ }
29
+ export interface BaseDropZoneContainerProps extends BaseViewProps, DragEvents {
30
+ }
31
+ export type DropZoneContainerProps<Element extends ElementType = 'div'> = PrimitiveProps<BaseDropZoneContainerProps, Element>;
32
+ export {};
@@ -0,0 +1,2 @@
1
+ import { UseDropZoneProps, UseDropZoneReturn } from './types';
2
+ export declare function useDropZone({ onDropComplete, onDragEnter: _onDragEnter, onDragLeave: _onDragLeave, onDragOver: _onDragOver, onDragStart: _onDragStart, onDrop: _onDrop, acceptedFileTypes, }: UseDropZoneProps): UseDropZoneReturn;
@@ -0,0 +1,5 @@
1
+ import { BaseFieldsetProps, ForwardRefPrimitive } from '../types';
2
+ /**
3
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/fieldset)
4
+ */
5
+ export declare const Fieldset: ForwardRefPrimitive<BaseFieldsetProps, 'fieldset'>;
@@ -0,0 +1,2 @@
1
+ export { Fieldset } from './Fieldset';
2
+ export { useFieldset } from './useFieldset';
@@ -0,0 +1,12 @@
1
+ import * as React from 'react';
2
+ interface FieldsetContextType {
3
+ isFieldsetDisabled?: boolean;
4
+ }
5
+ export declare const FieldsetContext: React.Context<FieldsetContextType>;
6
+ /**
7
+ * @description Fieldsets in HTML can be disabled, which disables all child
8
+ * fieldsets and input controls. `useFieldset` passes the disabled state down
9
+ * via context.
10
+ */
11
+ export declare const useFieldset: () => FieldsetContextType;
12
+ export {};
@@ -0,0 +1,21 @@
1
+ import * as React from 'react';
2
+ type ComponentIcons<Keys extends string> = {
3
+ [Key in Keys]?: React.ReactNode;
4
+ };
5
+ export type IconsContextInterface = {
6
+ alert?: ComponentIcons<'close' | 'info' | 'error' | 'success' | 'warning'>;
7
+ checkbox?: ComponentIcons<'indeterminate' | 'checked'>;
8
+ expander?: ComponentIcons<'more'>;
9
+ field?: ComponentIcons<'clear'>;
10
+ menu?: ComponentIcons<'menu'>;
11
+ message?: ComponentIcons<'close' | 'info' | 'error' | 'success' | 'warning'>;
12
+ pagination?: ComponentIcons<'previous' | 'next'>;
13
+ passwordField?: ComponentIcons<'visibility' | 'visibilityOff'>;
14
+ rating?: ComponentIcons<'filled' | 'empty'>;
15
+ searchField?: ComponentIcons<'search'>;
16
+ select?: ComponentIcons<'expand'>;
17
+ stepperField?: ComponentIcons<'add' | 'remove'>;
18
+ storageManager?: ComponentIcons<'upload' | 'remove' | 'error' | 'success' | 'file'>;
19
+ };
20
+ export declare const IconsContext: React.Context<IconsContextInterface | undefined>;
21
+ export {};
@@ -0,0 +1,8 @@
1
+ import * as React from 'react';
2
+ import { IconsContextInterface } from './IconsContext';
3
+ interface IconProviderProps {
4
+ children: React.ReactNode;
5
+ icons?: IconsContextInterface;
6
+ }
7
+ export { IconsContextInterface };
8
+ export declare function IconsProvider({ children, icons, }: IconProviderProps): JSX.Element;
@@ -0,0 +1,2 @@
1
+ export { IconsProvider, IconsContextInterface } from './IconsProvider';
2
+ export { useIcons } from './useIcons';
@@ -0,0 +1,2 @@
1
+ import { IconsContextInterface } from './IconsContext';
2
+ export declare function useIcons<Key extends keyof IconsContextInterface>(component?: Key): IconsContextInterface[Key] | undefined;
@@ -1 +1,3 @@
1
1
  export { Icon } from './Icon';
2
+ export { IconsProvider, IconsContextInterface, useIcons } from './context';
3
+ export * from './icons';
@@ -1 +1,2 @@
1
1
  export * from './icons';
2
+ export { useIcons } from './context/useIcons';
@@ -0,0 +1,5 @@
1
+ import { BaseMessageProps, ForwardRefPrimitive } from '../types';
2
+ /**
3
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/message)
4
+ */
5
+ export declare const Message: ForwardRefPrimitive<BaseMessageProps, 'div'>;
@@ -0,0 +1,2 @@
1
+ import { BaseMessageContainerProps, ForwardRefPrimitive } from '../types';
2
+ export declare const MessageContainer: ForwardRefPrimitive<BaseMessageContainerProps, 'div'>;
@@ -0,0 +1,2 @@
1
+ import { BaseMessageContentProps, ForwardRefPrimitive } from '../types';
2
+ export declare const MessageContent: ForwardRefPrimitive<BaseMessageContentProps, 'div'>;
@@ -0,0 +1,2 @@
1
+ import { BaseMessageDismissProps, ForwardRefPrimitive } from '../types';
2
+ export declare const MessageDismiss: ForwardRefPrimitive<BaseMessageDismissProps, 'button'>;
@@ -0,0 +1,2 @@
1
+ import { BaseMessageHeadingProps, ForwardRefPrimitive } from '../types';
2
+ export declare const MessageHeading: ForwardRefPrimitive<BaseMessageHeadingProps, 'div'>;
@@ -0,0 +1,2 @@
1
+ import { BaseMessageIconProps, ForwardRefPrimitive } from '../types';
2
+ export declare const MessageIcon: ForwardRefPrimitive<BaseMessageIconProps, 'div'>;
@@ -0,0 +1 @@
1
+ export { Message } from './Message';
@@ -0,0 +1,9 @@
1
+ import * as React from 'react';
2
+ import { MessageColorTheme } from '../types';
3
+ export interface MessageContextType {
4
+ colorTheme?: MessageColorTheme;
5
+ dismissed?: boolean;
6
+ setDismissed: (dismissed: boolean) => void;
7
+ }
8
+ export declare const MessageContext: React.Context<MessageContextType>;
9
+ export declare const useMessage: () => MessageContextType;
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import { Property } from 'csstype';
3
3
  import { StyleToken } from '../types/style';
4
4
  interface RatingIconProps {
5
- icon: JSX.Element;
5
+ icon: React.ReactNode;
6
6
  fill?: StyleToken<Property.Color>;
7
7
  className: string;
8
8
  }
@@ -3,9 +3,9 @@ import { Property } from 'csstype';
3
3
  import { StyleToken } from '../types/style';
4
4
  interface RatingMixedIconProps {
5
5
  emptyColor?: StyleToken<Property.Color>;
6
- emptyIcon: JSX.Element;
6
+ emptyIcon: React.ReactNode;
7
7
  fillColor?: StyleToken<Property.Color>;
8
- fillIcon: JSX.Element;
8
+ fillIcon: React.ReactNode;
9
9
  value: number;
10
10
  }
11
11
  export declare const RatingMixedIcon: React.FC<RatingMixedIconProps>;
@@ -8,17 +8,22 @@ export { Card } from './Card';
8
8
  export { CheckboxField } from './CheckboxField';
9
9
  export { Collection } from './Collection';
10
10
  export { Divider } from './Divider';
11
+ export { DropZone, DropZoneProps } from './DropZone';
11
12
  export { Expander, ExpanderItem } from './Expander';
12
13
  export { FieldGroupIcon, FieldGroupIconButton } from './FieldGroupIcon';
14
+ export { Fieldset } from './Fieldset';
13
15
  export { Flex } from './Flex';
14
16
  export { Grid } from './Grid';
15
17
  export { Heading } from './Heading';
16
18
  export { HighlightMatch } from './HighlightMatch';
17
19
  export { Icon } from './Icon';
18
20
  export { Image } from './Image';
21
+ export { Input } from './Input';
22
+ export { Label } from './Label';
19
23
  export { Link } from './Link';
20
24
  export { Loader } from './Loader';
21
25
  export { Menu, MenuButton, MenuItem } from './Menu';
26
+ export { Message } from './Message';
22
27
  export { Pagination } from './Pagination';
23
28
  export { PasswordField } from './PasswordField';
24
29
  export { PhoneNumberField } from './PhoneNumberField';
@@ -2,3 +2,4 @@ export * from './components';
2
2
  export * from './hooks';
3
3
  export * from './shared';
4
4
  export * from './types';
5
+ export { IconsProvider, IconsContextInterface } from './Icon';
@@ -20,6 +20,9 @@ export declare const ComponentText: {
20
20
  Fields: {
21
21
  clearButtonLabel: string;
22
22
  };
23
+ Message: {
24
+ dismissLabel: string;
25
+ };
23
26
  PaginationItem: {
24
27
  currentPageLabel: string;
25
28
  nextLabel: string;
@@ -1,6 +1,6 @@
1
1
  import { ComponentClassName } from '@aws-amplify/ui';
2
- type ComponentNameKey = 'Alert' | 'Autocomplete' | 'Badge' | 'Breadcrumbs' | 'Button' | 'Button' | 'Card' | 'Checkbox' | 'CheckboxField' | 'Collection' | 'PhoneNumberField' | 'Divider' | 'Expander' | 'FileUploader' | 'Flex' | 'Grid' | 'Heading' | 'HighlightMatch' | 'Icon' | 'Image' | 'Link' | 'Loader' | 'Menu' | 'Pagination' | 'PasswordField' | 'PhoneNumberField' | 'Placeholder' | 'Radio' | 'RadioGroupField' | 'Rating' | 'ScrollView' | 'SearchField' | 'Select' | 'SliderField' | 'SelectField' | 'StepperField' | 'StorageImage' | 'StorageManager' | 'SwitchField' | 'Table' | 'Tabs' | 'Text' | 'TextAreaField' | 'TextField' | 'ToggleButton' | 'ToggleButtonGroup' | 'VisuallyHidden';
3
- type ComponentClassNameKey = 'Alert' | 'AlertIcon' | 'AlertHeading' | 'AlertBody' | 'AlertDismiss' | 'Autocomplete' | 'AutocompleteMenu' | 'AutocompleteMenuEmpty' | 'AutocompleteMenuFooter' | 'AutocompleteMenuHeader' | 'AutocompleteMenuLoading' | 'AutocompleteMenuOption' | 'AutocompleteMenuOptions' | 'Badge' | 'Breadcrumbs' | 'BreadcrumbsItem' | 'BreadcrumbsLink' | 'BreadcrumbsList' | 'BreadcrumbsSeparator' | 'Button' | 'ButtonGroup' | 'ButtonLoaderWrapper' | 'Card' | 'Checkbox' | 'CheckboxButton' | 'CheckboxIcon' | 'CheckboxInput' | 'CheckboxLabel' | 'CheckboxField' | 'Collection' | 'CollectionItems' | 'CollectionSearch' | 'CollectionPagination' | 'CountryCodeSelect' | 'DialCodeSelect' | 'Divider' | 'DividerLabel' | 'Expander' | 'ExpanderContent' | 'ExpanderContentText' | 'ExpanderHeader' | 'ExpanderIcon' | 'ExpanderItem' | 'ExpanderTrigger' | 'Field' | 'FieldDescription' | 'FieldErrorMessage' | 'FieldGroup' | 'FieldGroupControl' | 'FieldGroupOuterEnd' | 'FieldGroupOuterStart' | 'FieldGroupInnerEnd' | 'FieldGroupInnerStart' | 'FieldGroupIcon' | 'FieldGroupIconButton' | 'FieldGroupHasInnerEnd' | 'FieldGroupHasInnerStart' | 'FieldShowPassword' | 'FieldGroupFieldWrapper' | 'FileUploaderDropZone' | 'FileUploaderDropZoneIcon' | 'FileUploaderDropZoneText' | 'FileUploaderDropZoneButton' | 'FileUploaderFile' | 'FileUploaderFileWrapper' | 'FileUploaderFileName' | 'FileUploaderFileSize' | 'FileUploaderFileInfo' | 'FileUploaderFileStatus' | 'FileUploaderFileImage' | 'FileUploaderFileMain' | 'FileUploaderLoader' | 'FileUploaderPreviewer' | 'FileUploaderPreviewerText' | 'FileUploaderPreviewerBody' | 'FileUploaderPreviewerFooter' | 'FileUploaderPreviewerFooterActions' | 'Flex' | 'Grid' | 'Heading' | 'HighlightMatch' | 'HighlightMatchHighlighted' | 'Icon' | 'Image' | 'Input' | 'Label' | 'Link' | 'Loader' | 'LoaderDeterminate' | 'LoaderPercentageText' | 'MenuContent' | 'MenuContentWrapper' | 'MenuItem' | 'MenuTrigger' | 'Pagination' | 'PaginationItemButton' | 'PaginationItemCurrent' | 'PaginationItemEllipsis' | 'PasswordField' | 'PhoneNumberField' | 'Placeholder' | 'Radio' | 'RadioButton' | 'RadioInput' | 'RadioLabel' | 'RadioGroupField' | 'RadioGroup' | 'Rating' | 'ScrollView' | 'SearchField' | 'SearchFieldClear' | 'SearchFieldSearch' | 'Select' | 'SelectField' | 'SelectWrapper' | 'SelectIconWrapper' | 'SliderField' | 'SliderFieldGroup' | 'SliderFieldLabel' | 'SliderFieldRange' | 'SliderFieldRoot' | 'SliderFieldThumb' | 'SliderFieldTrack' | 'StepperField' | 'StepperFieldButtonDecrease' | 'StepperFieldButtonIncrease' | 'StepperFieldInput' | 'StorageImage' | 'StorageManager' | 'StorageManagerDropZone' | 'StorageManagerDropZoneIcon' | 'StorageManagerDropZoneText' | 'StorageManagerFilePicker' | 'StorageManagerFile' | 'StorageManagerFileWrapper' | 'StorageManagerFileList' | 'StorageManagerFileName' | 'StorageManagerFileSize' | 'StorageManagerFileInfo' | 'StorageManagerFileStatus' | 'StorageManagerFileImage' | 'StorageManagerFileMain' | 'StorageManagerLoader' | 'StorageManagerPreviewer' | 'StorageManagerPreviewerText' | 'SwitchField' | 'SwitchLabel' | 'SwitchThumb' | 'SwitchTrack' | 'SwitchWrapper' | 'Table' | 'TableCaption' | 'TableBody' | 'TableTd' | 'TableTh' | 'TableFoot' | 'TableHead' | 'TableRow' | 'Tabs' | 'TabItems' | 'Text' | 'Textarea' | 'TextAreaField' | 'TextField' | 'ToggleButton' | 'ToggleButtonGroup' | 'VisuallyHidden';
2
+ type ComponentNameKey = 'Alert' | 'Autocomplete' | 'Badge' | 'Breadcrumbs' | 'Button' | 'Button' | 'Card' | 'Checkbox' | 'CheckboxField' | 'Collection' | 'PhoneNumberField' | 'Divider' | 'DropZone' | 'Expander' | 'Fieldset' | 'FileUploader' | 'Flex' | 'Grid' | 'Heading' | 'HighlightMatch' | 'Icon' | 'Image' | 'Input' | 'Label' | 'Link' | 'Loader' | 'Menu' | 'Message' | 'Pagination' | 'PasswordField' | 'PhoneNumberField' | 'Placeholder' | 'Radio' | 'RadioGroupField' | 'Rating' | 'ScrollView' | 'SearchField' | 'Select' | 'SliderField' | 'SelectField' | 'StepperField' | 'StorageImage' | 'StorageManager' | 'SwitchField' | 'Table' | 'Tabs' | 'Text' | 'TextAreaField' | 'TextField' | 'ToggleButton' | 'ToggleButtonGroup' | 'VisuallyHidden';
3
+ type ComponentClassNameKey = 'Alert' | 'AlertIcon' | 'AlertHeading' | 'AlertBody' | 'AlertDismiss' | 'Autocomplete' | 'AutocompleteMenu' | 'AutocompleteMenuEmpty' | 'AutocompleteMenuFooter' | 'AutocompleteMenuHeader' | 'AutocompleteMenuLoading' | 'AutocompleteMenuOption' | 'AutocompleteMenuOptions' | 'Badge' | 'Breadcrumbs' | 'BreadcrumbsItem' | 'BreadcrumbsLink' | 'BreadcrumbsList' | 'BreadcrumbsSeparator' | 'Button' | 'ButtonGroup' | 'ButtonLoaderWrapper' | 'Card' | 'Checkbox' | 'CheckboxButton' | 'CheckboxIcon' | 'CheckboxInput' | 'CheckboxLabel' | 'CheckboxField' | 'Collection' | 'CollectionItems' | 'CollectionSearch' | 'CollectionPagination' | 'CountryCodeSelect' | 'DialCodeSelect' | 'Divider' | 'DividerLabel' | 'DropZone' | 'Expander' | 'ExpanderContent' | 'ExpanderContentText' | 'ExpanderHeader' | 'ExpanderIcon' | 'ExpanderItem' | 'ExpanderTrigger' | 'Field' | 'FieldDescription' | 'FieldErrorMessage' | 'FieldGroup' | 'FieldGroupControl' | 'FieldGroupOuterEnd' | 'FieldGroupOuterStart' | 'FieldGroupInnerEnd' | 'FieldGroupInnerStart' | 'FieldGroupIcon' | 'FieldGroupIconButton' | 'FieldGroupHasInnerEnd' | 'FieldGroupHasInnerStart' | 'FieldShowPassword' | 'FieldGroupFieldWrapper' | 'Fieldset' | 'FieldsetLegend' | 'FileUploaderDropZone' | 'FileUploaderDropZoneIcon' | 'FileUploaderDropZoneText' | 'FileUploaderDropZoneButton' | 'FileUploaderFile' | 'FileUploaderFileWrapper' | 'FileUploaderFileName' | 'FileUploaderFileSize' | 'FileUploaderFileInfo' | 'FileUploaderFileStatus' | 'FileUploaderFileImage' | 'FileUploaderFileMain' | 'FileUploaderLoader' | 'FileUploaderPreviewer' | 'FileUploaderPreviewerText' | 'FileUploaderPreviewerBody' | 'FileUploaderPreviewerFooter' | 'FileUploaderPreviewerFooterActions' | 'Flex' | 'Grid' | 'Heading' | 'HighlightMatch' | 'HighlightMatchHighlighted' | 'Icon' | 'Image' | 'Input' | 'Label' | 'Link' | 'Loader' | 'LoaderDeterminate' | 'LoaderPercentageText' | 'MenuContent' | 'MenuContentWrapper' | 'MenuItem' | 'MenuTrigger' | 'Message' | 'MessageIcon' | 'MessageHeading' | 'MessageBody' | 'MessageContent' | 'MessageDismiss' | 'Pagination' | 'PaginationItemButton' | 'PaginationItemCurrent' | 'PaginationItemEllipsis' | 'PasswordField' | 'PhoneNumberField' | 'Placeholder' | 'Radio' | 'RadioButton' | 'RadioInput' | 'RadioLabel' | 'RadioGroupField' | 'RadioGroup' | 'Rating' | 'ScrollView' | 'SearchField' | 'SearchFieldClear' | 'SearchFieldSearch' | 'Select' | 'SelectField' | 'SelectWrapper' | 'SelectIconWrapper' | 'SliderField' | 'SliderFieldGroup' | 'SliderFieldLabel' | 'SliderFieldRange' | 'SliderFieldRoot' | 'SliderFieldThumb' | 'SliderFieldTrack' | 'StepperField' | 'StepperFieldButtonDecrease' | 'StepperFieldButtonIncrease' | 'StepperFieldInput' | 'StorageImage' | 'StorageManager' | 'StorageManagerDropZone' | 'StorageManagerDropZoneIcon' | 'StorageManagerDropZoneText' | 'StorageManagerFilePicker' | 'StorageManagerFile' | 'StorageManagerFileWrapper' | 'StorageManagerFileList' | 'StorageManagerFileName' | 'StorageManagerFileSize' | 'StorageManagerFileInfo' | 'StorageManagerFileStatus' | 'StorageManagerFileImage' | 'StorageManagerFileMain' | 'StorageManagerLoader' | 'StorageManagerPreviewer' | 'StorageManagerPreviewerText' | 'StorageManagerPreviewerActions' | 'StorageManagerPreviewerFooter' | 'SwitchField' | 'SwitchLabel' | 'SwitchThumb' | 'SwitchTrack' | 'SwitchWrapper' | 'Table' | 'TableCaption' | 'TableBody' | 'TableTd' | 'TableTh' | 'TableFoot' | 'TableHead' | 'TableRow' | 'Tabs' | 'TabItems' | 'Text' | 'Textarea' | 'TextAreaField' | 'TextField' | 'ToggleButton' | 'ToggleButtonGroup' | 'VisuallyHidden';
4
4
  interface ComponentClassNameMetadata {
5
5
  className: ComponentClassName;
6
6
  components?: ComponentNameKey[];
@@ -25,7 +25,7 @@ export interface BaseCheckboxProps extends BaseFlexProps, BaseInputProps {
25
25
  * The submitted value when checked
26
26
  * Shows on form submission as key pair `name:value`
27
27
  */
28
- value: string;
28
+ value?: string;
29
29
  /**
30
30
  * @description
31
31
  * Sets the position of label in relation to the CheckboxField,
@@ -0,0 +1,46 @@
1
+ import * as React from 'react';
2
+ import { Sizes } from './base';
3
+ import { BaseViewProps } from './view';
4
+ import { FlexContainerStyleProps } from './flex';
5
+ import { ElementType, PrimitiveProps } from './view';
6
+ /** @deprecated For internal use only */
7
+ export interface BaseFieldsetProps extends BaseViewProps, FlexContainerStyleProps {
8
+ /**
9
+ * @description
10
+ * Legend is the label for the Fieldset.
11
+ */
12
+ legend: React.ReactNode;
13
+ /**
14
+ * @description
15
+ * Visually hides the legend while making it still accessible to screenreaders.
16
+ */
17
+ legendHidden?: boolean;
18
+ /**
19
+ * @description
20
+ * Adds plain or outlined variation to the Fieldset
21
+ */
22
+ variation?: 'outlined' | 'plain';
23
+ /**
24
+ * @description
25
+ * Changes the size of the Fieldset
26
+ */
27
+ size?: Sizes;
28
+ /**
29
+ * @description
30
+ * Determines whether the Fieldset should be disabled.
31
+ * @default
32
+ * false
33
+ */
34
+ isDisabled?: boolean;
35
+ /**
36
+ * @description
37
+ * Name of the Fieldset.
38
+ */
39
+ name?: string;
40
+ /**
41
+ * @description
42
+ * Form to associate the Fieldset with
43
+ */
44
+ form?: string;
45
+ }
46
+ export type FieldsetProps<Element extends ElementType = 'fieldset'> = PrimitiveProps<BaseFieldsetProps, Element>;
@@ -14,6 +14,7 @@ export * from './expander';
14
14
  export * from './field';
15
15
  export * from './fieldGroup';
16
16
  export * from './fieldGroupIcon';
17
+ export * from './fieldset';
17
18
  export * from './flex';
18
19
  export * from './heading';
19
20
  export * from './highlightMatch';
@@ -24,6 +25,7 @@ export * from './label';
24
25
  export * from './link';
25
26
  export * from './loader';
26
27
  export * from './menu';
28
+ export * from './message';
27
29
  export * from './pagination';
28
30
  export * from './passwordField';
29
31
  export * from './phoneNumberField';
@@ -0,0 +1,70 @@
1
+ import * as React from 'react';
2
+ import { BaseFlexProps } from './flex';
3
+ import { BaseButtonProps } from './button';
4
+ import { ElementType, PrimitiveProps, BaseViewProps } from './view';
5
+ export type MessageColorTheme = 'neutral' | 'info' | 'error' | 'warning' | 'success';
6
+ export interface BaseMessageContainerProps extends BaseFlexProps {
7
+ /**
8
+ * @description
9
+ * The variation property will affect the overall style of the Message.
10
+ */
11
+ variation?: 'plain' | 'outlined' | 'filled';
12
+ /**
13
+ * @description
14
+ * The colorTheme property will affect the color and iconography used in the Message.
15
+ */
16
+ colorTheme?: MessageColorTheme;
17
+ }
18
+ export interface BaseMessageProps extends BaseMessageContainerProps {
19
+ /**
20
+ * @description
21
+ * Configures the accessible label for the Message's dismiss button.
22
+ */
23
+ dismissLabel?: string;
24
+ /**
25
+ * @description
26
+ * The isDismissible property will affect whether the user can dismiss (close) the Message. Defaults to false (not dismissible).
27
+ */
28
+ isDismissible?: boolean;
29
+ /**
30
+ * @description
31
+ * The onDismiss callback will be called when the user dismisses (closes) the Message.
32
+ */
33
+ onDismiss?: () => void;
34
+ /**
35
+ * @description
36
+ * The hasIcon property will determine whether or not an icon is displayed on the Message. Defaults to true (icon displayed).
37
+ */
38
+ hasIcon?: boolean;
39
+ /**
40
+ * @description
41
+ * The heading property will affect the content of the Message heading.
42
+ */
43
+ heading?: React.ReactNode;
44
+ }
45
+ export interface BaseMessageContentProps extends BaseFlexProps {
46
+ }
47
+ export interface BaseMessageDismissProps extends BaseButtonProps {
48
+ onDismiss?: () => void;
49
+ /**
50
+ * @description
51
+ * hasIcon determines whether the close icon will be displayed.
52
+ * @default true
53
+ */
54
+ hasIcon?: boolean;
55
+ /**
56
+ * @description
57
+ * Configures the accessible label for the Message's dismiss button.
58
+ */
59
+ dismissLabel?: string;
60
+ }
61
+ export interface BaseMessageHeadingProps extends BaseFlexProps {
62
+ }
63
+ export interface BaseMessageIconProps extends BaseViewProps {
64
+ }
65
+ export type MessageContainerProps<Element extends ElementType = 'div'> = PrimitiveProps<BaseMessageContainerProps, Element>;
66
+ export type MessageContentProps<Element extends ElementType = 'div'> = PrimitiveProps<BaseMessageContentProps, Element>;
67
+ export type MessageDismissProps<Element extends ElementType = 'button'> = PrimitiveProps<BaseMessageDismissProps, Element>;
68
+ export type MessageHeadingProps<Element extends ElementType = 'div'> = PrimitiveProps<BaseMessageHeadingProps, Element>;
69
+ export type MessageIconProps<Element extends ElementType = 'div'> = PrimitiveProps<BaseMessageIconProps, Element>;
70
+ export type MessageProps<Element extends ElementType = 'div'> = PrimitiveProps<BaseMessageProps, Element>;
@@ -1 +1 @@
1
- export declare const VERSION = "5.1.1";
1
+ export declare const VERSION = "5.3.0";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui-react",
3
- "version": "5.1.1",
3
+ "version": "5.3.0",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {
@@ -47,8 +47,8 @@
47
47
  "typecheck": "tsc --noEmit"
48
48
  },
49
49
  "dependencies": {
50
- "@aws-amplify/ui": "5.7.1",
51
- "@aws-amplify/ui-react-core": "2.1.30",
50
+ "@aws-amplify/ui": "5.8.0",
51
+ "@aws-amplify/ui-react-core": "2.1.32",
52
52
  "@radix-ui/react-accordion": "1.0.0",
53
53
  "@radix-ui/react-direction": "1.0.0",
54
54
  "@radix-ui/react-dropdown-menu": "1.0.0",