@aws-amplify/ui-react 2.10.4 → 2.13.0

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

@@ -0,0 +1,14 @@
+import { Sizes } from './base';
+import { ViewProps } from './view';
+export declare type BadgeVariations = 'info' | 'error' | 'warning' | 'success';
+export declare type BadgeSizes = Sizes;
+export interface BadgeProps extends ViewProps {
+    /**
+     * The variation property will affect the background color of the badge.
+     */
+    variation?: BadgeVariations;
+    /**
+     * The size property will affect the font size of the badge.
+     */
+    size?: BadgeSizes;
+}

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

@@ -0,0 +1,21 @@
+import React, { AriaAttributes } from 'react';
+export interface BaseComponentProps {
+    /**
+     * Unique identifier
+     */
+    id?: string;
+    /**
+     * Additional CSS class name for component
+     */
+    className?: string;
+    /**
+     * Used to provide a `data-testid` attribute for testing purposes
+     */
+    testId?: string;
+}
+export interface AriaProps {
+    ariaLabel?: AriaAttributes['aria-label'];
+    ariaValuetext?: AriaAttributes['aria-valuetext'];
+    role?: React.AriaRole;
+}
+export declare type Sizes = 'small' | 'large';

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

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

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { AriaProps } from './base';
+import { BaseStyleProps } from './style';
+import { ButtonProps } from './button';
+import { FlexProps } from './flex';
+export interface ButtonGroupProps extends AriaProps, BaseStyleProps, FlexProps, Pick<ButtonProps, 'size' | 'variation'> {
+    children: React.ReactNode;
+}

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

@@ -0,0 +1,5 @@
+import { ViewProps } from './view';
+export declare type CardVariations = 'outlined' | 'elevated';
+export interface CardProps extends ViewProps {
+    variation?: CardVariations;
+}

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

@@ -0,0 +1,28 @@
+import { FlexProps } from './flex';
+import { InputProps } from './input';
+import { FieldProps, LabelPositions } from './field';
+export interface CheckboxProps extends FlexProps, InputProps {
+    /**
+     * The label text
+     */
+    label: FieldProps['label'];
+    /**
+     * Visually hide label (not recommended in most cases)
+     * @default false
+     */
+    labelHidden?: boolean;
+    /**
+     * The name of the input field in a checkbox (Useful for form submission).
+     */
+    name: string;
+    /**
+     * The submitted value when checked
+     * Shows on form submission as key pair `name:value`
+     */
+    value: string;
+    /**
+     * Position of label in relation to the checkbox,
+     * default is 'start'
+     */
+    labelPosition?: LabelPositions;
+}

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

@@ -0,0 +1,4 @@
+import { CheckboxProps } from './checkbox';
+import { FieldProps } from './field';
+export interface CheckboxFieldProps extends CheckboxProps, FieldProps {
+}

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

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { FlexProps } from './flex';
+import { GridProps } from './grid';
+import { BaseStyleProps } from './style';
+export declare type CollectionType = 'list' | 'grid' | 'table';
+export interface CollectionWrapperProps extends BaseStyleProps {
+    /**
+     * Collection type. This will be used to determine collection wrapper component.
+     * @default 'list'
+     */
+    type?: CollectionType;
+    /**
+     * Enable pagination for collection items
+     */
+    isPaginated?: boolean;
+    /**
+     * Page size (when pagination is enabled)
+     */
+    itemsPerPage?: number;
+    /**
+     * Enable collection filtering
+     */
+    isSearchable?: boolean;
+    /**
+     * Custom search filter (when search is enabled)
+     */
+    searchFilter?: (item: unknown, searchText: string) => boolean;
+    /**
+     * Search field placeholder
+     */
+    searchPlaceholder?: string;
+}
+export interface CollectionBaseProps<Item> {
+    items: Array<Item>;
+    children: (item: Item, index: number) => JSX.Element;
+}
+export declare type ListCollectionProps<Item> = FlexProps & CollectionBaseProps<Item>;
+export declare type GridCollectionProps<Item> = GridProps & CollectionBaseProps<Item>;
+export declare type CollectionProps<Item> = CollectionWrapperProps & (({
+    type: 'list';
+} & ListCollectionProps<Item>) | ({
+    type: 'grid';
+} & GridCollectionProps<Item>));

package/dist/{datastore-d2cb91cb.d.ts → types/primitives/types/datastore.d.ts}

@@ -1,10 +1,9 @@
 import { PersistentModel, PersistentModelConstructor, ProducerModelPredicate, ProducerPaginationInput } from '@aws-amplify/datastore';
-
-declare type DataStoreItemProps<Model extends PersistentModel> = {
+export declare type DataStoreItemProps<Model extends PersistentModel> = {
     model: PersistentModelConstructor<Model>;
     id: string;
 };
-declare type DataStoreCollectionProps<Model extends PersistentModel> = {
+export declare type DataStoreCollectionProps<Model extends PersistentModel> = {
     model: PersistentModelConstructor<Model>;
     criteria?: ProducerModelPredicate<Model>;
     pagination?: ProducerPaginationInput<Model>;
@@ -13,21 +12,20 @@ declare type DataStoreBaseResult = {
     error?: Error;
     isLoading: boolean;
 };
-declare type DataStoreItemResult<Model extends PersistentModel> = DataStoreBaseResult & {
+export declare type DataStoreItemResult<Model extends PersistentModel> = DataStoreBaseResult & {
     item?: Model;
 };
-declare type DataStoreCollectionResult<Model extends PersistentModel> = DataStoreBaseResult & {
+export declare type DataStoreCollectionResult<Model extends PersistentModel> = DataStoreBaseResult & {
     items: Model[];
 };
-declare type DataStoreBindingProps<Model extends PersistentModel, BindingType extends 'record' | 'collection'> = {
+export declare type DataStoreBindingProps<Model extends PersistentModel, BindingType extends 'record' | 'collection'> = {
     type: BindingType;
 } & (BindingType extends 'record' ? DataStoreItemProps<Model> : BindingType extends 'collection' ? DataStoreCollectionProps<Model> : never);
-declare type DataStorePredicateObject = {
+export declare type DataStorePredicateObject = {
     and?: DataStorePredicateObject[];
     or?: DataStorePredicateObject[];
     field?: string;
     operand?: string;
     operator?: string;
 };
-
-export { DataStoreItemProps as D, DataStoreCollectionProps as a, DataStoreItemResult as b, DataStoreCollectionResult as c, DataStoreBindingProps as d, DataStorePredicateObject as e };
+export {};

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

@@ -0,0 +1,22 @@
+import { Sizes } from './base';
+import { ViewProps } from './view';
+export declare type DividerOrientations = 'horizontal' | 'vertical';
+export declare type DividerSizes = Sizes;
+export interface DividerOptions {
+    /**
+     * Controls whether the divider is oriented horizontally or vertically.
+     * @default "horizontal"
+     */
+    orientation?: DividerOrientations;
+    /**
+     * Size of the divider (height for a horizontal divider, width for vertical)
+     * @default "small"
+     */
+    size?: DividerSizes;
+    /**
+     * Adds text to the divider, usually something like "or" to separate 2 things.
+     */
+    label?: string;
+}
+export interface DividerProps extends ViewProps, DividerOptions {
+}

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

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

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

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { FieldGroupIconButtonProps } from './fieldGroupIcon';
+import { InputProps } from './input';
+import { TextProps } from './text';
+/**
+ * Shared type across all field types
+ */
+export interface FieldProps {
+    /**
+     * Provides additional information needed to fill field
+     * (e.g. password requirements, etc.)
+     */
+    descriptiveText?: React.ReactNode;
+    /**
+     *  When defined and `hasError` is true, show error message
+     */
+    errorMessage?: string;
+    /**
+     * Label text for field (required)
+     */
+    label: React.ReactNode;
+    /**
+     * Visually hide label (not recommended in most cases)
+     * @default false
+     */
+    labelHidden?: boolean;
+}
+export interface FieldClearButtonProps extends Partial<FieldGroupIconButtonProps> {
+}
+export interface FieldDescriptionProps extends TextProps, Pick<FieldProps, 'descriptiveText' | 'labelHidden'> {
+}
+export interface FieldErrorMessageProps extends TextProps, Pick<FieldProps, 'errorMessage'>, Pick<InputProps, 'hasError'> {
+}
+export declare type FieldVariations = 'quiet';
+export declare type LabelPositions = 'start' | 'end' | 'top' | 'bottom';

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { FlexProps } from './flex';
+export declare type FieldGroupOrientation = 'horizontal' | 'vertical';
+export interface FieldGroupOptions extends FlexProps {
+    children?: React.ReactNode;
+    orientation?: FieldGroupOrientation;
+    outerStartComponent?: React.ReactNode;
+    outerEndComponent?: React.ReactNode;
+    innerStartComponent?: React.ReactNode;
+    innerEndComponent?: React.ReactNode;
+}

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

@@ -0,0 +1,15 @@
+import { ViewProps } from './view';
+import { ButtonProps } from './button';
+export interface FieldGroupIconProps extends ViewProps {
+    /**
+     * Determines whether Icon should be visible
+     */
+    isVisible?: boolean;
+    /**
+     * Determines whether element should be focusable.
+     * When set to false, tabindex="-1" will be set
+     */
+    excludeFromTabOrder?: boolean;
+}
+export interface FieldGroupIconButtonProps extends FieldGroupIconProps, Pick<ButtonProps, 'onClick' | 'variation' | 'size' | 'type'> {
+}

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

@@ -0,0 +1,43 @@
+import { Property } from 'csstype';
+import { CSSLayoutStyleProps, ResponsiveStyle } from './style';
+import { ViewProps } from './view';
+export interface FlexContainerStyleProps extends CSSLayoutStyleProps {
+    /**
+     * 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>;
+    /**
+     * 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
+     * wrapping is allowed, items are wrapped into multiple lines along the main
+     * axis if needed.
+     * (maps to flex-wrap CSS property)
+     */
+    wrap?: ResponsiveStyle<Property.FlexWrap>;
+}
+export interface FlexProps extends ViewProps, FlexContainerStyleProps {
+}
+export interface FlexItemStyleProps {
+    /**
+     * Shorthand for flex grow / shrink / basis
+     */
+    flex?: ResponsiveStyle<Property.Flex>;
+    /**
+     * Controls order flex items appear
+     */
+    order?: ResponsiveStyle<Property.Order>;
+    /**
+     * Ability for flex item to grow
+     */
+    grow?: ResponsiveStyle<Property.FlexGrow>;
+    /**
+     * Ability for flex item to shrink
+     */
+    shrink?: ResponsiveStyle<Property.FlexShrink>;
+    /**
+     * Default size of element before remaining space is distributed
+     */
+    basis?: ResponsiveStyle<Property.FlexBasis>;
+}

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

@@ -0,0 +1,25 @@
+import { Property } from 'csstype';
+import { ResponsiveStyle, CSSLayoutStyleProps } from './style';
+import { ViewProps } from './view';
+export declare type GridSpanType = number | string | 'auto';
+export interface GridContainerStyleProps extends CSSLayoutStyleProps {
+    autoColumns?: ResponsiveStyle<Property.GridAutoColumns>;
+    autoFlow?: ResponsiveStyle<Property.GridAutoFlow>;
+    autoRows?: ResponsiveStyle<Property.GridAutoRows>;
+    templateAreas?: ResponsiveStyle<Property.GridTemplateAreas>;
+    templateColumns?: ResponsiveStyle<Property.GridTemplateColumns>;
+    templateRows?: ResponsiveStyle<Property.GridTemplateRows>;
+}
+export interface GridItemStyleProps {
+    area?: ResponsiveStyle<Property.GridArea>;
+    column?: ResponsiveStyle<Property.GridColumn>;
+    columnEnd?: ResponsiveStyle<Property.GridColumnEnd>;
+    columnSpan?: ResponsiveStyle<GridSpanType>;
+    columnStart?: ResponsiveStyle<Property.GridColumnStart>;
+    row?: ResponsiveStyle<Property.GridRow>;
+    rowEnd?: ResponsiveStyle<Property.GridRowEnd>;
+    rowSpan?: ResponsiveStyle<GridSpanType>;
+    rowStart?: ResponsiveStyle<Property.GridRowStart>;
+}
+export interface GridProps extends GridContainerStyleProps, ViewProps {
+}

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

@@ -0,0 +1,5 @@
+import { TextProps } from './text';
+export declare type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export interface HeadingProps extends TextProps {
+    level?: HeadingLevel;
+}

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

@@ -0,0 +1,44 @@
+import { Property } from 'csstype';
+import { ViewProps } from './view';
+import { Sizes } from './base';
+import * as React from 'react';
+export interface ViewBox {
+    minX?: number;
+    minY?: number;
+    width?: number;
+    height?: number;
+}
+export declare type IconSize = Sizes;
+export interface IconProps extends ViewProps {
+    /**
+     * This defines the shape of the <path> SVG element(the 'd' attribute).
+     * @link https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path
+     */
+    pathData?: string;
+    /**
+     * 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;
+    /**
+     * 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
+     */
+    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
+     */
+    fill?: Property.Color;
+    /**
+     * You can pass SVG elements like <path> directly as children for more
+     * flexibility and to allow for multiple paths.
+     */
+    children?: React.ReactNode;
+    /**
+     * Optionally pass an array of path-like objects which
+     * the icon will map to <path> elements.
+     */
+    paths?: Array<React.SVGAttributes<SVGPathElement>>;
+}

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

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import { Property } from 'csstype';
+import { ViewProps } from './view';
+import { ResponsiveStyle } from './style';
+export interface ImageStyleProps {
+    objectFit?: ResponsiveStyle<Property.ObjectFit>;
+    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
+     */
+    alt: React.ImgHTMLAttributes<HTMLImageElement>['alt'];
+    /**
+     * Set of image source sizes
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
+     */
+    sizes?: React.ImgHTMLAttributes<HTMLImageElement>['sizes'];
+    /**
+     * 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
+     */
+    srcSet?: React.ImgHTMLAttributes<HTMLImageElement>['srcSet'];
+    /**
+     * Handles loading event on image
+     */
+    onLoad?(event: React.SyntheticEvent<HTMLImageElement, Event>): void;
+    /**
+     * Handles error events on image
+     */
+    onError?(error: string | React.SyntheticEvent<HTMLImageElement, Event>): void;
+}
+export interface ImageProps extends ViewProps, ImageOptions {
+}

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

@@ -0,0 +1,48 @@
+export * from './alert';
+export * from './badge';
+export * from './base';
+export * from './button';
+export * from './buttonGroup';
+export * from './card';
+export * from './checkboxField';
+export * from './collection';
+export * from './datastore';
+export * from './divider';
+export * from './expander';
+export * from './field';
+export * from './fieldGroup';
+export * from './fieldGroupIcon';
+export * from './flex';
+export * from './heading';
+export * from './icon';
+export * from './input';
+export * from './image';
+export * from './label';
+export * from './link';
+export * from './loader';
+export * from './menu';
+export * from './pagination';
+export * from './passwordField';
+export * from './phoneNumberField';
+export * from './placeholder';
+export * from './radio';
+export * from './radioGroupField';
+export * from './rating';
+export * from './scrollView';
+export * from './searchField';
+export * from './selectField';
+export * from './sliderField';
+export * from './stepperField';
+export * from './style';
+export * from './switchField';
+export * from './table';
+export * from './tabs';
+export * from './text';
+export * from './textArea';
+export * from './textAreaField';
+export * from './textField';
+export * from './toggleButton';
+export * from './toggleButtonGroup';
+export * from './view';
+export * from './visuallyHidden';
+export * from './grid';

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

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { Sizes } from './base';
+import { FieldVariations } from './field';
+import { ViewProps } from './view';
+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
+     */
+    autoComplete?: string;
+    /**
+     * If checked is provided, this will be a controlled checkbox or radio
+     */
+    checked?: boolean;
+    /**
+     * Use this to initialize an uncontrolled checkbox or radio
+     */
+    defaultChecked?: boolean;
+    /**
+     * Use this to provide a default value for an uncontrolled field
+     */
+    defaultValue?: React.AllHTMLAttributes<'input'>['defaultValue'];
+    /**
+     * 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"
+     */
+    inputMode?: InputMode;
+    /**
+     *  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
+     */
+    isReadOnly?: boolean;
+    /**
+     * Whether field should be marked required
+     */
+    isRequired?: boolean;
+    /**
+     * 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
+     */
+    placeholder?: string;
+    /**
+     * Changes the font-size, padding, and height of the field.
+     */
+    size?: InputSizes;
+    /**
+     * Input field type
+     */
+    type?: React.HTMLInputTypeAttribute;
+    /**
+     * If value is provided, this will be a controlled field
+     */
+    value?: React.AllHTMLAttributes<'input'>['value'];
+    /**
+     * Variants
+     */
+    variation?: FieldVariations;
+}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ViewProps } from './view';
+export interface LabelProps extends ViewProps {
+    /**
+     * Whether label should be visually hidden
+     */
+    visuallyHidden?: boolean;
+    /**
+     * Inner text of the label
+     */
+    children: React.ReactNode;
+}

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { ViewProps } from './view';
+export interface LinkOptions {
+    /**
+     * Children to be rendered inside the Link component
+     */
+    children: React.ReactNode;
+    /**
+     * Boolean value indicating an external link
+     * sets the rel attribute to "noopener noreferrer"
+     */
+    isExternal?: boolean;
+    /**
+     * A string representation of the URL path
+     */
+    to?: string;
+}
+export interface LinkProps extends ViewProps, LinkOptions {
+}