@aws-amplify/ui-react 3.0.0 → 3.0.1

package/dist/types/primitives/types/menu.d.ts

@@ -4,34 +4,44 @@ import { FlexProps } from './flex';
 import { Sizes } from './base';
 export interface MenuProps extends FlexProps {
     /**
+     * @description
      * Alignment of menu against trigger
      * @default "start"
      */
     menuAlign?: 'start' | 'center' | 'end';
     /**
+     * @description
      * Handle open and close event of menu
      */
     onOpenChange?: (isOpen: boolean) => void;
     /**
+     * @description
      * Default for controlled menu
      */
     isOpen?: boolean;
     /**
+     * @description
      * Size of Menu button and items
      */
     size?: Sizes;
     /**
+     * @description
      * Trigger node
      * @default MenuButton with IconMenu
      * @note Must forward refs to DOM element
      */
     trigger?: React.ReactNode;
     /**
+     * @description
      * ClassName to apply to default trigger button
      * Note: only applies if `trigger` prop is null
      */
     triggerClassName?: string;
 }
 export interface MenuItemProps extends ButtonProps {
+    /**
+     * @description
+     * Accepts any number of MenuItem components
+     */
     children?: React.ReactNode;
 }

package/dist/types/primitives/types/pagination.d.ts

@@ -6,52 +6,63 @@ export declare type PaginationCallbackType = 'onNext' | 'onPrevious' | 'onChange
 export declare type PaginationLabelType = 'pageLabel' | 'currentPageLabel' | 'previousLabel' | 'nextLabel';
 interface BasePaginationProps {
     /**
+     * @description
      * Index of the current page. (starting from 1)
      */
     currentPage?: number;
     /**
+     * @description
      * Total number of available pages.
      */
     totalPages: number;
     /**
+     * @description
      * The number of siblings on each side of current page.
      */
     siblingCount?: number;
     /**
+     * @description
      * Optionally indicates whether there are more pages after `totalPages`. Can be combined with `totalPages` to enable the next button when reaching the last page.
      * @default false
      */
     hasMorePages?: boolean;
     /**
+     * @description
      * Set the invisible label for current page.
      * @default "Current Page:"
      */
     currentPageLabel?: string;
     /**
+     * @description
      * Set the label text for each page button other than the current page.
      * It will be used to construct the `aria-label` for each page button. e.g, "Go to page 1" for page 1 button
      * @default "Go to page"
      */
     pageLabel?: string;
     /**
+     * @description
      * Set the `aria-label` for the left arrow button.
      * @default "Go to previous page"
      */
     previousLabel?: string;
     /**
+     * @description
      * Set the `aria-label` for the right arrow button.
      * @default "Go to next page"
      */
     nextLabel?: string;
     /**
+     * @description
      * Callback function triggered when the next-page button is pressed
      */
     onNext?: () => void;
     /**
+     * @description
      * Callback function triggered when the prev-page button is pressed
      */
     onPrevious?: () => void;
     /**
+     * @description
      * Callback function triggered every time the page changes
      */
     onChange?: (newPageIndex: number, prevPageIndex: number) => void;
@@ -64,27 +75,33 @@ export interface UsePaginationResult extends Required<Omit<BasePaginationProps,
 }
 export interface PaginationItemProps extends BaseComponentProps, BaseStyleProps, AriaProps {
     /**
+     * @description
      * Available item type are 'page', 'next', 'previous' and 'ellipsis'.
      */
     type: PaginationItemType;
     /**
+     * @description
      * For 'page' item, this is the page number to be rendered.
      */
     page?: number;
     /**
+     * @description
      * The index of current page.
      */
     currentPage?: number;
     /**
+     * @description
      * An item is not clickable if disabled
      */
     isDisabled?: boolean;
     /**
+     * @description
      * Set the invisible label for current page.
      * @default "Current Page:"
      */
     currentPageLabel?: string;
     /**
+     * @description
      * Triggered every time the item is clicked.
      */
     onClick?: (newPageIndex?: number, prevPageIndex?: number) => void;

package/dist/types/primitives/types/passwordField.d.ts

@@ -3,39 +3,50 @@ import { ButtonProps } from './button';
 import { TextInputFieldProps } from './textField';
 export interface PasswordFieldProps extends TextInputFieldProps {
     /**
+     * @description
      * For password fields, will hide the "show password" button
      */
     hideShowPassword?: boolean;
     /**
+     * @description
      * Set the `aria-label` for hide password button
      * @default "Hide password"
      */
     hidePasswordButtonLabel?: string;
     /**
+     * @description
      * Set the `aria-label` for show password button
      * @default "Show password"
      */
     showPasswordButtonLabel?: string;
     /**
+     * @description
      * Password autocomplete type
-     * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
+     * @See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)
      * @default "current-password"
      */
     autoComplete?: 'new-password' | 'current-password' | string;
     /**
+     * @description
      * Forwarded ref for access to show password button DOM element
      */
     showPasswordButtonRef?: React.Ref<HTMLButtonElement>;
 }
 export declare type PasswordFieldType = 'password' | 'text';
 export interface ShowPasswordButtonProps extends ButtonProps {
+    /**
+     * @description
+     * Determines whether the input is hidden or displayed. Options include 'password' or 'text'
+     */
     fieldType: PasswordFieldType;
     /**
+     * @description
      * Set the `aria-label` for hide password button
      * @default "Hide password"
      */
     hidePasswordButtonLabel?: string;
     /**
+     * @description
      * Set the `aria-label` for show password button
      * @default "Show password"
      */

package/dist/types/primitives/types/phoneNumberField.d.ts

@@ -2,13 +2,38 @@ import * as React from 'react';
 import { SelectFieldProps } from './selectField';
 import { TextInputFieldProps } from './textField';
 export interface PhoneNumberFieldProps extends TextInputFieldProps {
+    /**
+     * @description
+     * Sets a hidden and accessible label for the dial code selector
+     */
     countryCodeLabel?: string;
+    /**
+     * @description
+     * Sets the name used when handling form submission for the dial code selector
+     */
     countryCodeName?: string;
+    /**
+     * @description
+     * Sets the default dial code that will be selected on initial render
+     */
     defaultCountryCode: string;
+    /**
+     * @description
+     * Accepts an array of dial codes (strings) used as options in the dial code selector
+     */
     dialCodeList?: Array<string>;
+    /**
+     * @description
+     * Handles change events for the dial code selector
+     */
     onCountryCodeChange?: React.ChangeEventHandler<HTMLSelectElement>;
+    /**
+     * @description
+     * <input> elements of type 'tel' are used to let the user enter and edit a telephone number
+     */
     type?: 'tel';
     /**
+     * @description
      * Forwarded ref for access to Country Code select DOM element
      */
     countryCodeRef?: React.Ref<HTMLSelectElement>;

package/dist/types/primitives/types/placeholder.d.ts

@@ -3,11 +3,13 @@ import { ViewProps } from './view';
 export declare type PlaceholderSizes = Sizes;
 export interface PlaceholderProps extends ViewProps {
     /**
+     * @description
      * If true, the placeholder won't show, if false the placeholder will show.
      * @default false
      */
     isLoaded?: boolean;
     /**
+     * @description
      * Controls the display size of placeholder
      */
     size?: PlaceholderSizes;

package/dist/types/primitives/types/radio.d.ts

@@ -3,6 +3,7 @@ import { LabelPositions } from './field';
 export interface RadioProps extends InputProps {
     value: string;
     /**
+     * @description
      * Position of label in relation to the radio,
      * default is 'start'
      */

package/dist/types/primitives/types/radioGroupField.d.ts

@@ -7,10 +7,12 @@ export interface RadioGroupFieldProps extends FieldProps, FlexContainerStyleProp
     value?: string;
     defaultValue?: string;
     /**
+     * @description
      * Handle onChange event
      */
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
     /**
+     * @description
      * Position of label in relation to the radio,
      * default is 'start'
      */

package/dist/types/primitives/types/rating.d.ts

@@ -5,22 +5,26 @@ import { StyleToken } from './style';
 export declare type RatingSizes = Sizes;
 export interface RatingOptions {
     /**
+     * @description
      * The CSS color to use on the empty rating icon
      * Default css value is #A2A2A2
      */
     emptyColor?: StyleToken<Property.Color>;
     /**
+     * @description
      * This will override which icon to use as the empty icon. This will only
      * override the empty icon an will create a rating component that uses
      * different icons for filled and empty icons.
      */
     emptyIcon?: JSX.Element;
     /**
+     * @description
      * The CSS color to use on the filled rating icon
      * Default css value is #ffb400
      */
     fillColor?: StyleToken<Property.Color>;
     /**
+     * @description
      * This will override which icon to use. This will override both
      * the filled and empty icon values unless an empty icon is specified
      * with the emptyIcon prop
@@ -28,17 +32,20 @@ export interface RatingOptions {
      */
     icon?: JSX.Element;
     /**
+     * @description
      * The max rating integer value
      * Default is 5
      */
     maxValue?: number;
     /**
+     * @description
      *
      * This will set the icon size of the stars
      * Default css value is medium
      */
     size?: RatingSizes;
     /**
+     * @description
      * The value of the rating
      * Default is 0
      */

package/dist/types/primitives/types/searchField.d.ts

@@ -3,24 +3,29 @@ import { FieldGroupIconButtonProps } from './fieldGroupIcon';
 import { TextInputFieldProps } from './textField';
 export interface SearchFieldProps extends TextInputFieldProps {
     /**
+     * @description
      * Handle submission of search field input
      */
     onSubmit?: (value: string) => void;
     /**
+     * @description
      * Triggered when search field is cleared
      */
     onClear?: () => void;
     /**
+     * @description
      * Visually hide label
      * @default true
      */
     labelHidden?: boolean;
     /**
+     * @description
      * Set the `aria-label` for clear button
      * @default "Clear search"
      */
     clearButtonLabel?: string;
     /**
+     * @description
      * Provides ref access to search button DOM element
      */
     searchButtonRef?: React.Ref<HTMLButtonElement>;

package/dist/types/primitives/types/select.d.ts

@@ -3,17 +3,69 @@ import { ViewProps } from './view';
 import { Sizes } from './base';
 export declare type SelectVariation = 'quiet';
 export interface SelectProps extends ViewProps {
+    /**
+     * @description
+     * A string providing a hint for a user agent's autocomplete feature
+     */
     autoComplete?: string;
+    /**
+     * @description
+     * Specifies the name of the control used when submitting form data
+     */
     name?: string;
+    /**
+     * @description
+     * Sets the SelectField’s initial value on render
+     */
     defaultValue?: string;
+    /**
+     * @description
+     * Controls the current value when using the SelectField as a controlled component
+     */
     value?: string;
+    /**
+     * @description
+     * Changes the height and font size of the SelectField. Available options are ‘small’, none (default), and ‘large’
+     */
     size?: Sizes;
+    /**
+     * @description
+     * Changes the displayed style of the SelectField. Options include ‘quiet’ and none (default)
+     */
     variation?: SelectVariation;
+    /**
+     * @description
+     * Changes the icon used to expand and collapse the SelectField
+     */
     icon?: React.ReactElement;
+    /**
+     * @description
+     * Controls the color of the icon used to expand and collapse the SelectField
+     */
     iconColor?: string;
+    /**
+     * @description
+     * Sets the text that appears in the form control when it has no value set
+     */
     placeholder?: string;
+    /**
+     * @description
+     * Marks the SelectField as having a validation error
+     */
     hasError?: boolean;
+    /**
+     * @description
+     * A Boolean attribute indicating that the user cannot interact with the control
+     */
     isDisabled?: boolean;
+    /**
+     * @description
+     * A Boolean attribute indicating that an option with a non-empty string value must be selected
+     */
     isRequired?: boolean;
+    /**
+     * @description
+     * Handles changes to the current value when using the SelectField as a controlled component
+     */
     onChange?: React.ChangeEventHandler<HTMLSelectElement>;
 }

package/dist/types/primitives/types/selectField.d.ts

@@ -3,6 +3,7 @@ import { SelectProps } from './select';
 import { FieldProps } from './field';
 export interface SelectFieldProps extends FieldProps, FlexContainerStyleProps, SelectProps {
     /**
+     * @description
      * List of option values for select dropdown
      */
     options?: string[];

package/dist/types/primitives/types/sliderField.d.ts

@@ -4,17 +4,65 @@ import { TextInputFieldProps } from './textField';
 import { ViewProps } from './view';
 declare type SliderOrientation = 'horizontal' | 'vertical';
 export interface SliderFieldProps extends TextInputFieldProps, ViewProps {
+    /**
+     * @description
+     * Sets the minimum value for the SliderField range
+     */
     min?: number;
+    /**
+     * @description
+     * Sets the maximum value for the SliderField range
+     */
     max?: number;
+    /**
+     * @description
+     * Controls the interval between selectable values
+     */
     step?: number;
+    /**
+     * @description
+     * Changes the orientation of the SliderField to either 'vertical' or 'horizontal' (default)
+     */
     orientation?: SliderOrientation;
+    /**
+     * @description
+     * When `true`, hides the numerical value to the right of the label
+     */
     isValueHidden?: boolean;
+    /**
+     * @description
+     * Controls the width of the track and size of the thumb. Options include 'small', none (default), and 'large'
+     */
     trackSize?: string;
+    /**
+     * @description
+     * Applies to the empty part of the SliderField track
+     */
     emptyTrackColor?: StyleToken<Property.Color>;
+    /**
+     * @description
+     * Applies to the filled-in part of the SliderField track
+     */
     filledTrackColor?: StyleToken<Property.Color>;
+    /**
+     * @description
+     * Applies to the thumb component that users can slide
+     */
     thumbColor?: StyleToken<Property.Color>;
+    /**
+     * @description
+     * Controls the current value when using the SliderField as a controlled component
+     */
     value?: number;
+    /**
+     * @description
+     * Sets the SliderField’s initial value on render
+     */
     defaultValue?: number;
+    /**
+     * @description
+     * Handles changes to the current value when using the SliderField as a controlled component
+     */
     onChange?: (value: number) => void;
 }
 export {};

package/dist/types/primitives/types/stepperField.d.ts

@@ -1,29 +1,64 @@
 import { TextInputFieldProps } from '../types/textField';
 export interface StepperFieldProps extends TextInputFieldProps {
+    /**
+     * @description
+     * <input> elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries.
+     */
     type?: 'number';
+    /**
+     * @description
+     * Sets the minimum possible value
+     */
     min?: number;
+    /**
+     * @description
+     * Sets the maximum possible value
+     */
     max?: number;
+    /**
+     * @description
+     * Controls the interval between selectable values
+     */
     step?: number;
+    /**
+     * @description
+     * Controls the current value when using the StepperField as a controlled component
+     */
     value?: number;
+    /**
+     * @description
+     * Sets the StepperField’s initial value on render
+     */
     defaultValue?: number;
     /**
+     * @description
      * Set the label text for increase button.
      * This will be used to construct its the `aria-label`. e.g., "Increase to 2" if the current step is 1.
      * @default "Increase to"
      */
     increaseButtonLabel?: string;
     /**
+     * @description
      * Set the label text for decrease button.
      * This will be used to construct its the `aria-label`. e.g., "Decrease to 0" if the current step is 1.
      * @default "Decrease to"
      */
     decreaseButtonLabel?: string;
     /**
+     * @description
      * TODO:
      * Extends StepperField props from Omit<TextFieldProps, 'onChange'>, after removing [key: string]: any from the base type
      * and rename onStepChange to onChange
      */
     onStepChange?: (value: number) => void;
+    /**
+     * @description
+     * Handles the event when a user clicks on the increment button
+     */
     onIncrease?: () => void;
+    /**
+     * @description
+     * Handles the event when a user clicks on the decrement button
+     */
     onDecrease?: () => void;
 }