@marigold/components 5.1.0 → 5.3.0

package/dist/index.d.ts

@@ -1,10 +1,11 @@
 export { useAsyncList, useListData } from '@react-stately/data';
-import { ThemeExtension, ThemeComponentProps, ResponsiveStyleValue, ThemeExtensionsWithParts, StateAttrProps, CSSObject, BoxOwnProps, Theme as Theme$1, ThemeProviderProps, GlobalProps, SVGProps } from '@marigold/system';
+import { ThemeExtensionsWithParts, ThemeExtension, ThemeComponentProps, ResponsiveStyleValue, StateAttrProps, CSSObject, BoxOwnProps, Theme as Theme$1, ThemeProviderProps, GlobalProps, SVGProps } from '@marigold/system';
 export { Box, BoxOwnProps, BoxProps, ThemeProvider, useTheme } from '@marigold/system';
-import React, { ReactNode, HTMLAttributes, LabelHTMLAttributes, Key, ForwardRefExoticComponent, RefAttributes, ReactElement } from 'react';
-import { HtmlProps, PropsOf, PolymorphicComponent, NonZeroPercentage } from '@marigold/types';
 import * as _react_types_shared from '@react-types/shared';
 import { PressEvents, CollectionElement, StyleProps } from '@react-types/shared';
+import React, { Key, ReactNode, HTMLAttributes, LabelHTMLAttributes, ReactElement, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { SearchAutocompleteProps } from '@react-types/autocomplete';
+import { HtmlProps, PropsOf, PolymorphicComponent, NonZeroPercentage } from '@marigold/types';
 import { AriaCheckboxProps, AriaCheckboxGroupProps } from '@react-types/checkbox';
 import { AriaDialogProps } from '@react-types/dialog';
 import { SeparatorProps } from '@react-aria/separator';
@@ -26,6 +27,38 @@ import { OverlayTriggerState } from '@react-stately/overlays';
 export { SSRProvider } from '@react-aria/ssr';
 export { VisuallyHidden } from '@react-aria/visually-hidden';
 
+interface AutocompleteThemeExtension extends ThemeExtensionsWithParts<'Autocomplete', ['icon', 'clear']> {
+}
+interface AutocompleteProps extends Omit<SearchAutocompleteProps<object>, 'isDisabled' | 'isRequired' | 'isReadonly' | 'validationState' | 'icon' | 'onInputChange' | 'inputValue' | 'defaultInputValue'> {
+    disabled?: boolean;
+    required?: boolean;
+    readOnly?: boolean;
+    error?: boolean;
+    defaultValue?: SearchAutocompleteProps<object>['defaultInputValue'];
+    value?: SearchAutocompleteProps<object>['inputValue'];
+    /**
+     * Handler that is called when the input value changes.
+     */
+    onChange?: SearchAutocompleteProps<object>['onInputChange'];
+    /**
+     * Handler that is called when the SearchAutocomplete is submitted.
+     *
+     * A `key` will be passed if the submission is a selected item (e.g. a user
+     * clicks or presses enter on an option). If the input is a custom `value`, `key` will be `null`.
+     *
+     * A `value` will be passed if the submission is a custom value (e.g. a user
+     * types then presses enter). If the input is a selected item, `value` will be `null`.
+     */
+    onSubmit?: (key: Key | null, value: string | null) => void;
+    variant?: string;
+    size?: string;
+    width?: string;
+}
+declare const Autocomplete: {
+    ({ disabled, required, readOnly, error, onChange, value, defaultValue, variant, size, width, ...rest }: AutocompleteProps): JSX.Element;
+    Item: <T>(props: _react_types_shared.ItemProps<T>) => JSX.Element;
+};
+
 interface BadgeThemeExtension extends ThemeExtension<'Badge'> {
 }
 interface BadgeProps extends HtmlProps<'div'> {
@@ -235,11 +268,13 @@ interface ImageProps extends HtmlProps<'img'> {
 }
 declare const Image: ({ variant, size, fit, position, ...props }: ImageProps) => JSX.Element;
 
-interface InputThemeExtension extends ThemeExtension<'Input'> {
+interface InputThemeExtension extends ThemeExtensionsWithParts<'Input', ['input', 'icon', 'container']> {
 }
 interface InputOwnProps extends Omit<HtmlProps<'input'>, 'size'> {
-    size?: string;
+    icon?: ReactElement;
+    action?: ReactElement;
     variant?: string;
+    size?: string;
 }
 interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, 'size'>, InputOwnProps {
 }
@@ -549,7 +584,7 @@ declare const Tooltip: {
     Trigger: ({ disabled, open, delay, placement, children, ...rest }: TooltipTriggerProps) => JSX.Element;
 };
 
-interface ComponentStyles extends BadgeThemeExtension, ButtonThemeExtension, CardThemeExtension, CheckboxThemeExtension, BodyThemeExtension, DialogThemeExtension, DividerThemeExtension, FieldThemeExtension, FooterThemeExtension, HeaderThemeExtension, HeadlineThemeExtension, HelpTextThemeExtension, ImageThemeExtension, InputThemeExtension, LabelThemeExtension, LinkThemeExtension, ListThemeExtension, ListBoxThemeExtension, MenuThemeExtension, MessageThemeExtension, NumberFieldThemeExtension, RadioThemeExtension, SelectThemeExtension, SliderThemeExtension, SwitchThemeExtension, TableThemeExtension, TextThemeExtension, TextAreaThemeExtension, TooltipThemeExtension, UnderlayThemeExtension {
+interface ComponentStyles extends AutocompleteThemeExtension, BadgeThemeExtension, ButtonThemeExtension, CardThemeExtension, CheckboxThemeExtension, BodyThemeExtension, DialogThemeExtension, DividerThemeExtension, FieldThemeExtension, FooterThemeExtension, HeaderThemeExtension, HeadlineThemeExtension, HelpTextThemeExtension, ImageThemeExtension, InputThemeExtension, LabelThemeExtension, LinkThemeExtension, ListThemeExtension, ListBoxThemeExtension, MenuThemeExtension, MessageThemeExtension, NumberFieldThemeExtension, RadioThemeExtension, SelectThemeExtension, SliderThemeExtension, SwitchThemeExtension, TableThemeExtension, TextThemeExtension, TextAreaThemeExtension, TooltipThemeExtension, UnderlayThemeExtension {
 }
 interface Theme extends Theme$1 {
     components: ComponentStyles;
@@ -632,6 +667,19 @@ interface InlineProps {
 }
 declare const Inline: ({ space, alignX, alignY, children, ...props }: InlineProps) => JSX.Element;
 
+type InsetProps = {
+    children: ReactNode;
+    space?: never;
+    spaceX?: ResponsiveStyleValue<string>;
+    spaceY?: ResponsiveStyleValue<string>;
+} | {
+    children: ReactNode;
+    space?: ResponsiveStyleValue<string>;
+    spaceX?: never;
+    spaceY?: never;
+};
+declare const Inset: ({ space, spaceX, spaceY, children }: InsetProps) => JSX.Element;
+
 interface MarigoldProviderProps<T extends Theme$1> extends ThemeProviderProps<T>, GlobalProps {
 }
 declare function MarigoldProvider<T extends Theme$1>({ children, theme, selector, normalizeDocument, }: MarigoldProviderProps<T>): JSX.Element;
@@ -691,4 +739,4 @@ declare const Tiles: ({ space, stretch, equalHeight, tilesWidth, children, ...pr
 
 declare const XLoader: React.ForwardRefExoticComponent<SVGProps & React.RefAttributes<SVGElement>>;
 
-export { ActionMenu, Aside, AsideProps, Aspect, AspectProps, Badge, BadgeProps, BadgeThemeExtension, Body, BodyProps, BodyThemeExtension, Breakout, BreakoutProps, Button, ButtonOwnProps, ButtonProps, ButtonThemeExtension, Card, CardProps, CardThemeExtension, Center, CenterProps, Checkbox, CheckboxGroup, CheckboxGroupContext, CheckboxGroupContextProps, CheckboxProps, CheckboxThemeExtension, Columns, ColumnsProps, Container, ContainerProps, CustomCheckboxProps, CustomRadioProps, CustomSwitchProps, CustomTextAreaEvents, CustomTextFieldEvents, CustomizedTheme, Dialog, DialogChildProps, DialogProps, DialogThemeExtension, Divider, DividerProps, DividerThemeExtension, FieldBase, FieldBaseProps, FieldGroup, FieldGroupContext, FieldGroupContextProps, FieldGroupProps, FieldThemeExtension, Footer, FooterProps, FooterThemeExtension, Header, HeaderProps, HeaderThemeExtension, Headline, HeadlineProps, HeadlineThemeExtension, Image, ImageProps, ImageThemeExtension, Inline, InlineProps, Input, InputOwnProps, InputProps, InputThemeExtension, Label, LabelProps, LabelThemeExtension, Link, LinkOwnProps, LinkProps, LinkThemeExtension, List, ListProps, ListThemeExtension, MarigoldProvider, MarigoldProviderProps, Menu, MenuProps, MenuThemeExtension, Message, MessageProps, MessageThemeExtension, Modal, ModalProps, NumberField, NumberFieldProps, NumberFieldThemeExtension, Overlay, OverlayProps, Popover, PopoverProps, Radio, RadioComponent, RadioGroupProps, RadioProps, RadioThemeExtension, RowProps, Select, SelectComponent, SelectProps, SelectThemeExtension, Slider, SliderProps, SliderThemeExtension, Split, SplitProps, Stack, StackProps, Switch, SwitchProps, SwitchThemeExtension, Table, TableProps, TableThemeExtension, Text, TextArea, TextAreaProps, TextAreaThemeExtension, TextField, TextFieldProps, TextProps, TextThemeExtension, Theme, Tiles, TilesProps, Tooltip, TooltipProps, TooltipThemeExtension, Tray, TrayProps, TrayWrapper, Underlay, UnderlayProps, UnderlayThemeExtension, XLoader, extendTheme, useCheckboxGroupContext, useFieldGroupContext };
+export { ActionMenu, Aside, AsideProps, Aspect, AspectProps, Autocomplete, AutocompleteProps, AutocompleteThemeExtension, Badge, BadgeProps, BadgeThemeExtension, Body, BodyProps, BodyThemeExtension, Breakout, BreakoutProps, Button, ButtonOwnProps, ButtonProps, ButtonThemeExtension, Card, CardProps, CardThemeExtension, Center, CenterProps, Checkbox, CheckboxGroup, CheckboxGroupContext, CheckboxGroupContextProps, CheckboxGroupProps, CheckboxProps, CheckboxThemeExtension, Columns, ColumnsProps, Container, ContainerProps, CustomCheckboxProps, CustomRadioProps, CustomSwitchProps, CustomTextAreaEvents, CustomTextFieldEvents, CustomizedTheme, Dialog, DialogChildProps, DialogProps, DialogThemeExtension, Divider, DividerProps, DividerThemeExtension, FieldBase, FieldBaseProps, FieldGroup, FieldGroupContext, FieldGroupContextProps, FieldGroupProps, FieldThemeExtension, Footer, FooterProps, FooterThemeExtension, Header, HeaderProps, HeaderThemeExtension, Headline, HeadlineProps, HeadlineThemeExtension, Image, ImageProps, ImageThemeExtension, Inline, InlineProps, Input, InputOwnProps, InputProps, InputThemeExtension, Inset, InsetProps, Label, LabelProps, LabelThemeExtension, Link, LinkOwnProps, LinkProps, LinkThemeExtension, List, ListProps, ListThemeExtension, MarigoldProvider, MarigoldProviderProps, Menu, MenuProps, MenuThemeExtension, Message, MessageProps, MessageThemeExtension, Modal, ModalProps, NumberField, NumberFieldProps, NumberFieldThemeExtension, Overlay, OverlayProps, Popover, PopoverProps, Radio, RadioComponent, RadioGroupProps, RadioProps, RadioThemeExtension, RowProps, Select, SelectComponent, SelectProps, SelectThemeExtension, Slider, SliderProps, SliderThemeExtension, Split, SplitProps, Stack, StackProps, Switch, SwitchProps, SwitchThemeExtension, Table, TableProps, TableThemeExtension, Text, TextArea, TextAreaProps, TextAreaThemeExtension, TextField, TextFieldProps, TextProps, TextThemeExtension, Theme, Tiles, TilesProps, Tooltip, TooltipProps, TooltipThemeExtension, Tray, TrayProps, TrayWrapper, Underlay, UnderlayProps, UnderlayThemeExtension, XLoader, extendTheme, useCheckboxGroupContext, useFieldGroupContext };