@aws-amplify/ui-react 3.0.0 → 3.0.1

package/README.md

@@ -9,7 +9,7 @@ Amplify UI is an open-source UI library with cloud-connected components that are
 
 ## React Documentation
 
-- https://ui.docs.amplify.aws/?platform=react
+- https://ui.docs.amplify.aws/react
 
 ## Features 🚀
 

package/dist/styles.css

@@ -3,7 +3,7 @@
  */
 /**
  * Do not edit directly
- * Generated on Fri, 17 Jun 2022 21:04:04 GMT
+ * Generated on Tue, 21 Jun 2022 22:00:04 GMT
  */
 :root, [data-amplify-theme] {
   --amplify-transforms-slide-x-large: translateX(2em);

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

@@ -3,26 +3,32 @@ import { FlexProps } from './flex';
 export declare type AlertVariations = 'info' | 'error' | 'warning' | 'success';
 export interface AlertProps extends FlexProps {
     /**
+     * @description
      * The variation property will affect the background color of the Alert.
      */
     variation?: AlertVariations;
     /**
+     * @description
      * The isDismissible property will affect whether the user can dismiss (close) the Alert. Defaults to false (not dismissible).
      */
     isDismissible?: boolean;
     /**
+     * @description
      * The onDismiss callback will be called when the user dismisses (closes) the Alert.
      */
     onDismiss?: () => void;
     /**
+     * @description
      * The hasIcon property will determine whether or not an icon is displayed on the Alert. Defaults to true (icon displayed).
      */
     hasIcon?: boolean;
     /**
+     * @description
      * The heading property will affect the content of the Alert heading.
      */
     heading?: React.ReactNode;
     /**
+     * @description
      * The ref will be forwarded to the dismiss button
      */
     buttonRef?: React.Ref<HTMLButtonElement>;

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

@@ -4,10 +4,12 @@ export declare type BadgeVariations = 'info' | 'error' | 'warning' | 'success';
 export declare type BadgeSizes = Sizes;
 export interface BadgeProps extends ViewProps {
     /**
+     * @description
      * The variation property will affect the background color of the badge.
      */
     variation?: BadgeVariations;
     /**
+     * @description
      * The size property will affect the font size of the badge.
      */
     size?: BadgeSizes;

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

@@ -1,21 +1,36 @@
 import React, { AriaAttributes } from 'react';
 export interface BaseComponentProps {
     /**
+     * @description
      * Unique identifier
      */
     id?: string;
     /**
+     * @description
      * Additional CSS class name for component
      */
     className?: string;
     /**
+     * @description
      * Used to provide a `data-testid` attribute for testing purposes
      */
     testId?: string;
 }
 export interface AriaProps {
+    /**
+     * @description
+     * Defines a string value that labels an interactive element for accessibility
+     */
     ariaLabel?: AriaAttributes['aria-label'];
+    /**
+     * @description
+     * Defines the human readable text alternative of `aria-valuenow` for a range widget
+     */
     ariaValuetext?: AriaAttributes['aria-valuetext'];
+    /**
+     * @description
+     * Provides semantic meaning to content, allowing screen readers to support interaction in a way that is consistent with user expectations
+     */
     role?: React.AriaRole;
 }
 export declare type Sizes = 'small' | 'large';

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

@@ -7,37 +7,45 @@ export declare type ButtonTypes = 'button' | 'reset' | 'submit';
 export declare type ButtonVariations = 'primary' | 'link' | 'menu';
 export interface ButtonProps extends ViewProps, FlexContainerStyleProps {
     /**
+     * @description
      * If `true`, the button will be disabled.
      */
     isDisabled?: boolean;
     /**
+     * @description
      * If `true`, the button will take up the full width of its container.
      */
     isFullWidth?: boolean;
     /**
+     * @description
      * If `true`, the button will show a spinner.
      */
     isLoading?: boolean;
     /**
+     * @description
      * The label to show in the button when `loading` is true
      * If no text is passed, it only shows the spinner
      */
     loadingText?: string;
     /**
+     * @description
      * Button click event handler
      */
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     /**
+     * @description
      * Changes the size of the button.
      * @default "medium"
      */
     size?: ButtonSizes;
     /**
+     * @description
      * Changes the button type
      * @default "button"
      */
     type?: ButtonTypes;
     /**
+     * @description
      * Changes the visual weight of the button.
      */
     variation?: ButtonVariations;

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

@@ -1,5 +1,9 @@
 import { ViewProps } from './view';
 export declare type CardVariations = 'outlined' | 'elevated';
 export interface CardProps extends ViewProps {
+    /**
+     * @description
+     * Changes the displayed style of the Card. Options include ‘outlined’, ‘elevated’ and none (default)
+     */
     variation?: CardVariations;
 }

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

@@ -3,7 +3,8 @@ import { InputProps } from './input';
 import { FieldProps, LabelPositions } from './field';
 export interface CheckboxProps extends FlexProps, InputProps {
     /**
-     * The label text
+     * @description
+     * Sets the label text
      */
     label: FieldProps['label'];
     /**
@@ -21,8 +22,9 @@ export interface CheckboxProps extends FlexProps, InputProps {
      */
     value: string;
     /**
-     * Position of label in relation to the checkbox,
-     * default is 'start'
+     * @description
+     * Sets the position of label in relation to the CheckboxField,
+     * @default "start"
      */
     labelPosition?: LabelPositions;
 }

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

@@ -4,37 +4,48 @@ import { BaseStyleProps } from './style';
 export declare type CollectionType = 'list' | 'grid' | 'table';
 export interface CollectionWrapperProps extends BaseStyleProps {
     /**
+     * @description
      * Collection type. This will be used to determine collection wrapper component.
      * @default 'list'
      */
     type?: CollectionType;
     /**
+     * @description
      * Enable pagination for collection items
      */
     isPaginated?: boolean;
     /**
+     * @description
      * Page size (when pagination is enabled)
      */
     itemsPerPage?: number;
     /**
+     * @description
      * Enable collection filtering
      */
     isSearchable?: boolean;
     /**
+     * @description
      * Custom search filter (when search is enabled)
      */
     searchFilter?: (item: unknown, searchText: string) => boolean;
     /**
+     * @description
      * Search field label
      * @default "Search"
      */
     searchLabel?: string;
     /**
+     * @description
      * Search field placeholder
      */
     searchPlaceholder?: string;
 }
 export interface CollectionBaseProps<Item> {
+    /**
+     * @description
+     * The items from a data source that will be mapped by the Collection component
+     */
     items: Array<Item>;
     children: (item: Item, index: number) => JSX.Element;
 }

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

@@ -4,16 +4,19 @@ export declare type DividerOrientations = 'horizontal' | 'vertical';
 export declare type DividerSizes = Sizes;
 export interface DividerOptions {
     /**
+     * @description
      * Controls whether the divider is oriented horizontally or vertically.
      * @default "horizontal"
      */
     orientation?: DividerOrientations;
     /**
+     * @description
      * Size of the divider (height for a horizontal divider, width for vertical)
      * @default "small"
      */
     size?: DividerSizes;
     /**
+     * @description
      * Adds text to the divider, usually something like "or" to separate 2 things.
      */
     label?: string;

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

@@ -3,32 +3,39 @@ import { ViewProps } from '../types/view';
 declare type ExpanderType = 'single' | 'multiple';
 export interface ExpanderProps extends ViewProps {
     /**
+     * @description
      * The value of the item(s) to expand.  Use on uncontrolled component.
      */
     defaultValue?: string | string[];
     /**
+     * @description
      * The controlled value of the item(s) to expand. Must be used in conjunction with onChange.
      */
     value?: string | string[];
     /**
+     * @description
      * Determines whether the opened item can be collapsed if this is a single expander.
      */
     isCollapsible?: boolean;
     /**
+     * @description
      * Determines whether one or multiple items can be opened at the same time.
      */
     type?: ExpanderType;
     /**
+     * @description
      * Event handler called when the expanded state of an item changes
      */
     onChange?: (value?: string | string[]) => void;
 }
 export interface ExpanderItemProps extends ViewProps {
     /**
+     * @description
      * The content of the heading.
      */
     title?: React.ReactNode;
     /**
+     * @description
      * A unique value for the item.
      */
     value: string;

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

@@ -7,19 +7,23 @@ import { TextProps } from './text';
  */
 export interface FieldProps {
     /**
+     * @description
      * Provides additional information needed to fill field
      * (e.g. password requirements, etc.)
      */
     descriptiveText?: React.ReactNode;
     /**
+     * @description
      *  When defined and `hasError` is true, show error message
      */
     errorMessage?: string;
     /**
+     * @description
      * Label text for field (required)
      */
     label: React.ReactNode;
     /**
+     * @description
      * Visually hide label (not recommended in most cases)
      * @default false
      */

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

@@ -2,10 +2,12 @@ import { ViewProps } from './view';
 import { ButtonProps } from './button';
 export interface FieldGroupIconProps extends ViewProps {
     /**
+     * @description
      * Determines whether Icon should be visible
      */
     isVisible?: boolean;
     /**
+     * @description
      * Determines whether element should be focusable.
      * When set to false, tabindex="-1" will be set
      */

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

@@ -3,11 +3,13 @@ import { CSSLayoutStyleProps, ResponsiveStyle } from './style';
 import { ViewProps } from './view';
 export interface FlexContainerStyleProps extends CSSLayoutStyleProps {
     /**
+     * @description
      * Sets how flex items are placed in the flex container defining the main axis
      * and the direction (normal or reversed). (maps to flex-direction CSS property)
      */
     direction?: ResponsiveStyle<Property.FlexDirection>;
     /**
+     * @description
      * The flexWrap property is set on containers and it controls what happens when
      * children overflow the size of the container along the main axis. By default,
      * children are forced into a single line (which can shrink elements). If
@@ -21,22 +23,27 @@ export interface FlexProps extends ViewProps, FlexContainerStyleProps {
 }
 export interface FlexItemStyleProps {
     /**
+     * @description
      * Shorthand for flex grow / shrink / basis
      */
     flex?: ResponsiveStyle<Property.Flex>;
     /**
+     * @description
      * Controls order flex items appear
      */
     order?: ResponsiveStyle<Property.Order>;
     /**
+     * @description
      * Ability for flex item to grow
      */
     grow?: ResponsiveStyle<Property.FlexGrow>;
     /**
+     * @description
      * Ability for flex item to shrink
      */
     shrink?: ResponsiveStyle<Property.FlexShrink>;
     /**
+     * @description
      * Default size of element before remaining space is distributed
      */
     basis?: ResponsiveStyle<Property.FlexBasis>;

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

@@ -11,32 +11,37 @@ export interface ViewBox {
 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;
     /**
+     * @description
      * 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
+     * @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.
      */

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

@@ -3,34 +3,48 @@ 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 {
     /**
+     * @description
      * Alternative text description of the image (required)
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt
+     * @see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt)
      */
     alt: React.ImgHTMLAttributes<HTMLImageElement>['alt'];
     /**
+     * @description
      * Set of image source sizes
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
+     * @see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes)
      */
     sizes?: React.ImgHTMLAttributes<HTMLImageElement>['sizes'];
     /**
+     * @description
      * URl source for image (required)
      */
     src: React.ImgHTMLAttributes<HTMLImageElement>['src'];
     /**
+     * @description
      * Possible image sources for the browser to use
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset
+     * @see [MND](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset)
      */
     srcSet?: React.ImgHTMLAttributes<HTMLImageElement>['srcSet'];
     /**
+     * @description
      * Handles loading event on image
      */
     onLoad?(event: React.SyntheticEvent<HTMLImageElement, Event>): void;
     /**
+     * @description
      * Handles error events on image
      */
     onError?(error: string | React.SyntheticEvent<HTMLImageElement, Event>): void;

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

@@ -6,52 +6,63 @@ export declare type InputMode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel'
 export declare type InputSizes = Sizes;
 export interface InputProps extends ViewProps {
     /**
+     * @description
      * Specifies permissions for browser UA to autocomplete field
-     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+     * @see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
      */
     autoComplete?: string;
     /**
+     * @description
      * If checked is provided, this will be a controlled checkbox or radio
      */
     checked?: boolean;
     /**
+     * @description
      * Use this to initialize an uncontrolled checkbox or radio
      */
     defaultChecked?: boolean;
     /**
+     * @description
      * Use this to provide a default value for an uncontrolled field
      */
     defaultValue?: React.AllHTMLAttributes<'input'>['defaultValue'];
     /**
+     * @description
      * Indicates that Field is in error state
      */
     hasError?: boolean;
     /**
+     * @description
      * Provides hint for virtual keyboard shown
-     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
+     * @see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)
      * @default: "text"
      */
     inputMode?: InputMode;
     /**
+     * @description
      *  Determines whether field should be disabled
      * @default false
      */
     isDisabled?: boolean;
     /**
+     * @description
      * Determines whether field should be immutable
-     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly
+     * @see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly)
      * @default false
      */
     isReadOnly?: boolean;
     /**
+     * @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;
     /**
+     * @description
      * Placeholder text shown when field is empty
      * Accessibility tip: avoid putting important instructions for
      * filling out the TextField in the placeholder. Use descriptiveText
@@ -59,18 +70,22 @@ export interface InputProps extends ViewProps {
      */
     placeholder?: string;
     /**
+     * @description
      * Changes the font-size, padding, and height of the field.
      */
     size?: InputSizes;
     /**
+     * @description
      * Input field type
      */
     type?: React.HTMLInputTypeAttribute;
     /**
+     * @description
      * If value is provided, this will be a controlled field
      */
     value?: React.AllHTMLAttributes<'input'>['value'];
     /**
+     * @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,15 +2,18 @@ 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;

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;