@aws-amplify/ui-react 3.0.0 → 3.0.3

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

@@ -3,22 +3,106 @@ import { ResponsiveStyle, CSSLayoutStyleProps } from './style';
 import { ViewProps } from './view';
 export declare type GridSpanType = number | string | 'auto';
 export interface GridContainerStyleProps extends CSSLayoutStyleProps {
+    /**
+     * @description
+     * Specifies the size of an implicitly-created grid column track or pattern of tracks.
+     * @see
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns)
+     */
     autoColumns?: ResponsiveStyle<Property.GridAutoColumns>;
+    /**
+     * @description
+     * Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.
+     * @see
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow)
+     */
     autoFlow?: ResponsiveStyle<Property.GridAutoFlow>;
+    /**
+     * @description
+     * Specifies the size of an implicitly-created grid row track or pattern of tracks.
+     * @see
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows)
+     */
     autoRows?: ResponsiveStyle<Property.GridAutoRows>;
+    /**
+     * @description
+     * specifies named grid areas, establishing the cells in the grid and assigning them names.
+     * @see
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)
+     */
     templateAreas?: ResponsiveStyle<Property.GridTemplateAreas>;
+    /**
+     * @description
+     * Defines the line names and track sizing functions of the grid columns.
+     * @see
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)
+     */
     templateColumns?: ResponsiveStyle<Property.GridTemplateColumns>;
+    /**
+     * @description
+     * Defines the line names and track sizing functions of the grid rows.
+     * @see
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows)
+     */
     templateRows?: ResponsiveStyle<Property.GridTemplateRows>;
 }
 export interface GridItemStyleProps {
+    /**
+     * @description
+     * Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
+     * @see
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)
+     */
     area?: ResponsiveStyle<Property.GridArea>;
+    /**
+     * @description
+     * Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.
+     * @see
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)
+     */
     column?: ResponsiveStyle<Property.GridColumn>;
+    /**
+     * @description
+     * Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area.
+     * @see
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)
+     */
     columnEnd?: ResponsiveStyle<Property.GridColumnEnd>;
+    /**
+     * @description
+     * Makes it possible for an element to span across all columns when its value is set to all.
+     * @see
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)
+     */
     columnSpan?: ResponsiveStyle<GridSpanType>;
+    /**
+     * @description
+     * Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area.
+     * @see
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)
+     */
     columnStart?: ResponsiveStyle<Property.GridColumnStart>;
+    /**
+     * @description
+     * Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.
+     * @see
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)
+     */
     row?: ResponsiveStyle<Property.GridRow>;
+    /**
+     * @description
+     * Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area.
+     * @see
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)
+     */
     rowEnd?: ResponsiveStyle<Property.GridRowEnd>;
     rowSpan?: ResponsiveStyle<GridSpanType>;
+    /**
+     * @description
+     * Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area.
+     * @see
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)
+     */
     rowStart?: ResponsiveStyle<Property.GridRowStart>;
 }
 export interface GridProps extends GridContainerStyleProps, ViewProps {

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

@@ -1,5 +1,9 @@
 import { TextProps } from './text';
 export declare type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export interface HeadingProps extends TextProps {
+    /**
+     * @description
+     * Controls which semantic section heading element is rendered, <h1> through <h6>
+     */
     level?: HeadingLevel;
 }

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

@@ -2,43 +2,50 @@ import { Property } from 'csstype';
 import { ViewProps } from './view';
 import { Sizes } from './base';
 import * as React from 'react';
-export interface ViewBox {
+export declare type ViewBox = {
     minX?: number;
     minY?: number;
     width?: number;
     height?: number;
-}
+};
 export declare type IconSize = Sizes;
 export interface IconProps extends ViewProps {
     /**
+     * @description
      * This defines the shape of the <path> SVG element(the 'd' attribute).
-     * @link https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path
+     * @see
+     *[MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path)
      */
     pathData?: string;
     /**
+     * @description
      * This is used to define a string that labels the current element.
-     * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
      */
     ariaLabel: string;
     /**
+     * @description
      * This defines the position and dimension, in user space, of an SVG viewport.
-     * @link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
+     * @see
+     *[MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox)
      */
     viewBox?: ViewBox;
     /**
-     * By default this will be "currentColor" to match what is generally expected
-     * of icons (they inherit their color from current font color).
-     * @link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill
+     * @description
+     * By default this will be "currentColor" to match what is generally expected of icons (they inherit their color from current font color).
+     * @see
+     *[MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill)
      */
     fill?: Property.Color;
     /**
+     * @description
      * You can pass SVG elements like <path> directly as children for more
      * flexibility and to allow for multiple paths.
      */
     children?: React.ReactNode;
     /**
+     * @description
      * Optionally pass an array of path-like objects which
      * the icon will map to <path> elements.
      */
-    paths?: Array<React.SVGAttributes<SVGPathElement>>;
+    paths?: React.SVGAttributes<SVGPathElement>[];
 }

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

@@ -3,35 +3,52 @@ import { Property } from 'csstype';
 import { ViewProps } from './view';
 import { ResponsiveStyle } from './style';
 export interface ImageStyleProps {
+    /**
+     * @description
+     *  Sets how the content of an <img> should be resized to fit its container
+     */
     objectFit?: ResponsiveStyle<Property.ObjectFit>;
+    /**
+     * @description
+     *  Specifies the alignment of the selected replaced element's contents within the element's box
+     */
     objectPosition?: ResponsiveStyle<Property.ObjectPosition>;
 }
 export interface ImageOptions extends ImageStyleProps {
     /**
-     * Alternative text description of the image (required)
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt
+     * @description
+     * Alternative text description of the image (required).
+     * @see
+     *[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt)
      */
     alt: React.ImgHTMLAttributes<HTMLImageElement>['alt'];
     /**
-     * Set of image source sizes
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
+     * @description
+     * Set of image source sizes.
+     * @see
+     *[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes)
      */
     sizes?: React.ImgHTMLAttributes<HTMLImageElement>['sizes'];
     /**
-     * URl source for image (required)
+     * @description
+     * URl source for image (required).
      */
     src: React.ImgHTMLAttributes<HTMLImageElement>['src'];
     /**
-     * Possible image sources for the browser to use
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset
+     * @description
+     * Possible image sources for the browser to use.
+     * @see
+     *[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset)
      */
     srcSet?: React.ImgHTMLAttributes<HTMLImageElement>['srcSet'];
     /**
-     * Handles loading event on image
+     * @description
+     * Handles loading event on image.
      */
     onLoad?(event: React.SyntheticEvent<HTMLImageElement, Event>): void;
     /**
-     * Handles error events on image
+     * @description
+     * Handles error events on image.
      */
     onError?(error: string | React.SyntheticEvent<HTMLImageElement, Event>): void;
 }

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

@@ -2,76 +2,101 @@ import * as React from 'react';
 import { Sizes } from './base';
 import { FieldVariations } from './field';
 import { ViewProps } from './view';
+export declare type EnterKeyHint = 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
 export declare type InputMode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
 export declare type InputSizes = Sizes;
 export interface InputProps extends ViewProps {
     /**
-     * Specifies permissions for browser UA to autocomplete field
-     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+     * @description
+     * Specifies permissions for browser UA to autocomplete field.
+     * @see
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
      */
     autoComplete?: string;
     /**
-     * If checked is provided, this will be a controlled checkbox or radio
+     * @description
+     * If checked is provided, this will be a controlled checkbox or radio.
      */
     checked?: boolean;
     /**
-     * Use this to initialize an uncontrolled checkbox or radio
+     * @description
+     * Use this to initialize an uncontrolled checkbox or radio.
      */
     defaultChecked?: boolean;
     /**
-     * Use this to provide a default value for an uncontrolled field
+     * @description
+     * Use this to provide a default value for an uncontrolled field.
      */
     defaultValue?: React.AllHTMLAttributes<'input'>['defaultValue'];
     /**
-     * Indicates that Field is in error state
+     * @description
+     * Indicates that Field is in error state.
      */
     hasError?: boolean;
     /**
-     * Provides hint for virtual keyboard shown
-     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
-     * @default: "text"
+     * @description
+     * Defines what action label (or icon) to present for the enter key on virtual keyboards.
+     * @see
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)
+     */
+    enterKeyHint?: EnterKeyHint;
+    /**
+     * @description
+     *  Provides hint for virtual keyboard shown
+     * @see
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)
+     * @default "text"
      */
     inputMode?: InputMode;
     /**
-     *  Determines whether field should be disabled
-     * @default false
+     * @description
+     *  Determines whether field should be disabled.
+     * @default
+     * false
      */
     isDisabled?: boolean;
     /**
-     * Determines whether field should be immutable
-     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly
-     * @default false
+     * @description
+     * Determines whether field should be immutable.
+     * @see
+     *[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly)
+     * @default
+     * false
      */
     isReadOnly?: boolean;
     /**
-     * Whether field should be marked required
+     * @description
+     * Whether field should be marked required.
      */
     isRequired?: boolean;
     /**
+     * @description
      * Name of the field. Submitted with the form as part of a name/value pair.
      */
     name?: string;
     /**
-     * Placeholder text shown when field is empty
-     * Accessibility tip: avoid putting important instructions for
-     * filling out the TextField in the placeholder. Use descriptiveText
-     * for important instructions
+     * @description
+     * Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.
      */
     placeholder?: string;
     /**
+     * @description
      * Changes the font-size, padding, and height of the field.
      */
     size?: InputSizes;
     /**
-     * Input field type
+     * @description
+     * Input field type.
      */
     type?: React.HTMLInputTypeAttribute;
     /**
-     * If value is provided, this will be a controlled field
+     * @description
+     * If value is provided, this will be a controlled field.
      */
     value?: React.AllHTMLAttributes<'input'>['value'];
     /**
-     * Variants
+     * @description
+     * Variants.
      */
     variation?: FieldVariations;
 }

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

@@ -2,10 +2,12 @@
 import { ViewProps } from './view';
 export interface LabelProps extends ViewProps {
     /**
+     * @description
      * Whether label should be visually hidden
      */
     visuallyHidden?: boolean;
     /**
+     * @description
      * Inner text of the label
      */
     children: React.ReactNode;

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

@@ -2,18 +2,28 @@ import * as React from 'react';
 import { ViewProps } from './view';
 export interface LinkOptions {
     /**
+     * @description
      * Children to be rendered inside the Link component
      */
     children: React.ReactNode;
     /**
+     * @description
      * Boolean value indicating an external link
      * sets the rel attribute to "noopener noreferrer"
      */
     isExternal?: boolean;
     /**
+     * @description
      * A string representation of the URL path
      */
     to?: string;
+    /**
+     * @description
+     * a stringifier that returns a string containing the whole URL, and allows the href to be updated.
+     * @see
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/href)
+     */
+    href?: string;
 }
 export interface LinkProps extends ViewProps, LinkOptions {
 }

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

@@ -6,30 +6,37 @@ export declare type LoaderSizes = Sizes;
 export declare type LoaderVariations = 'linear';
 export interface LoaderProps extends ViewProps {
     /**
+     * @description
      * This will set the size of Loader.
      */
     size?: LoaderSizes;
     /**
+     * @description
      * This will set the variation of Loader. Available options are linear and none(circular).
      */
     variation?: LoaderVariations;
     /**
+     * @description
      * This will set the filled color of Loader.
      */
     filledColor?: StyleToken<Property.Color>;
     /**
+     * @description
      * This will set the empty color of Loader.
      */
     emptyColor?: StyleToken<Property.Color>;
     /**
+     * @description
      * This will set the percentage of a determinate Loader.
      */
     percentage?: number;
     /**
+     * @description
      * This will mark the Loader as determinate.
      */
     isDeterminate?: boolean;
     /**
+     * @description
      * This will set the visibility of percentage text.
      */
     isPercentageTextHidden?: boolean;

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

@@ -4,34 +4,47 @@ import { FlexProps } from './flex';
 import { Sizes } from './base';
 export interface MenuProps extends FlexProps {
     /**
+     * @description
      * Alignment of menu against trigger
-     * @default "start"
+     * @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
+     * @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,68 @@ 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
+     * @default
+     * false
      */
     hasMorePages?: boolean;
     /**
+     * @description
      * Set the invisible label for current page.
-     * @default "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"
+     * @default
+     * "Go to page"
      */
     pageLabel?: string;
     /**
+     * @description
      * Set the `aria-label` for the left arrow button.
-     * @default "Go to previous page"
+     * @default
+     * "Go to previous page"
      */
     previousLabel?: string;
     /**
+     * @description
      * Set the `aria-label` for the right arrow button.
-     * @default "Go to next page"
+     * @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 +80,34 @@ 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.
+     * @default
+     * "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,41 +3,57 @@ 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"
+     * @default
+     * "Hide password"
      */
     hidePasswordButtonLabel?: string;
     /**
+     * @description
      * Set the `aria-label` for show password button
-     * @default "Show password"
+     * @default
+     * "Show password"
      */
     showPasswordButtonLabel?: string;
     /**
+     * @description
      * Password autocomplete type
-     * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
-     * @default "current-password"
+     * @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"
+     * @default
+     * "Hide password"
      */
     hidePasswordButtonLabel?: string;
     /**
+     * @description
      * Set the `aria-label` for show password button
-     * @default "Show password"
+     * @default
+     * "Show password"
      */
     showPasswordButtonLabel?: string;
 }