@livechat/design-system-react-components 1.0.0-beta.0 → 1.0.0-beta.2

package/dist/components/ActionMenu/ActionMenu.d.ts

@@ -27,5 +27,9 @@ export interface ActionMenuProps {
      * Will open menu on component initialization
      */
     openedOnInit?: boolean;
+    /**
+     * Menu will stay open after option click
+     */
+    keepOpenOnClick?: boolean;
 }
 export declare const ActionMenu: React.FC<ActionMenuProps>;

package/dist/components/ActionMenu/ActionMenu.stories.d.ts

@@ -7,4 +7,5 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: () => JSX.Element;
+export declare const Default: () => React.ReactElement;
+export declare const KeepOpenOnItemClick: () => React.ReactElement;

package/dist/components/Alert/Alert.stories.d.ts

@@ -4,6 +4,6 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
     children?: React.ReactNode;
 }>;
 export default _default;
-export declare const Default: (args: AlertProps) => JSX.Element;
-export declare const Kinds: () => JSX.Element;
-export declare const WithCTA: () => JSX.Element;
+export declare const Default: (args: AlertProps) => React.ReactElement;
+export declare const Kinds: () => React.ReactElement;
+export declare const WithCTA: () => React.ReactElement;

package/dist/components/Avatar/Avatar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 type AvatarShape = 'circle' | 'rounded-square';
-type AvatarSize = 'xxxsmall' | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+type AvatarSize = 'xxxsmall' | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
 type AvatarStatus = 'available' | 'unavailable' | 'unknown';
 type AvatarType = 'image' | 'text';
 export interface AvatarProps {

package/dist/components/Avatar/Avatar.stories.d.ts

@@ -5,18 +5,18 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
 }>;
 export default _default;
 export declare const Default: {
-    (args: AvatarProps): JSX.Element;
+    (args: AvatarProps): React.ReactElement;
     args: {
         type: string;
         text: string;
     };
 };
-export declare const Types: () => JSX.Element;
-export declare const Shapes: () => JSX.Element;
-export declare const Sizes: () => JSX.Element;
-export declare const Statuses: () => JSX.Element;
-export declare const Colors: () => JSX.Element;
-export declare const FallbackAvatar: () => JSX.Element;
-export declare const Rim: () => JSX.Element;
-export declare const SizesWithStatus: () => JSX.Element;
-export declare const SizesWithRim: () => JSX.Element;
+export declare const Types: () => React.ReactElement;
+export declare const Shapes: () => React.ReactElement;
+export declare const Sizes: () => React.ReactElement;
+export declare const Statuses: () => React.ReactElement;
+export declare const Colors: () => React.ReactElement;
+export declare const FallbackAvatar: () => React.ReactElement;
+export declare const Rim: () => React.ReactElement;
+export declare const SizesWithStatus: () => React.ReactElement;
+export declare const SizesWithRim: () => React.ReactElement;

package/dist/components/Badge/Badge.stories.d.ts

@@ -7,6 +7,6 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: Story<BadgeProps>;
-export declare const Sizes: () => JSX.Element;
-export declare const Kinds: () => JSX.Element;
-export declare const Types: () => JSX.Element;
+export declare const Sizes: () => React.ReactElement;
+export declare const Kinds: () => React.ReactElement;
+export declare const Types: () => React.ReactElement;

package/dist/components/DatePicker/helpers.d.ts

@@ -1,6 +1,6 @@
 import { Modifiers } from 'react-day-picker';
-import { IRangeDatePickerProps, IRangeDatePickerState, IRangeDatePickerOption } from './types';
 import { ClassNames } from 'react-day-picker/types/ClassNames';
+import { IRangeDatePickerProps, IRangeDatePickerState, IRangeDatePickerOption } from './types';
 export declare const isDateWithinRange: (date: Date, range: {
     from?: Date;
     to?: Date;
@@ -10,30 +10,7 @@ export declare const getRangeDatePickerModifiers: (from?: Date, to?: Date) => Pa
 export declare const getSelectedOption: (itemId: string | null, options: IRangeDatePickerOption[]) => IRangeDatePickerOption | undefined;
 export declare const isSelectingFirstDay: (from?: Date, to?: Date) => boolean;
 export declare const getInitialStateFromProps: (props: IRangeDatePickerProps) => Partial<IRangeDatePickerState>;
-export declare const getDatePickerClassNames: (range?: boolean, classNames?: ClassNames) => {
-    container: string;
-    wrapper: string;
-    interactionDisabled: string;
-    navBar: string;
-    navButtonPrev: string;
-    navButtonNext: string;
-    navButtonInteractionDisabled: string;
-    months: string;
-    month: string;
-    caption: string;
-    weekdays: string;
-    weekdaysRow: string;
-    weekday: string;
-    weekNumber: string;
-    body: string;
-    week: string;
-    day: string;
-    footer: string;
-    todayButton: string;
-    today: string;
-    selected: string;
-    disabled: string;
-    outside: string;
+export declare const getDatePickerClassNames: (range?: boolean, classNames?: ClassNames) => ClassNames & {
     start: string;
     end: string;
 };

package/dist/components/DatePicker/types.d.ts

@@ -1,8 +1,8 @@
-import { Reducer } from 'react';
+import { Reducer, Ref, ReactElement } from 'react';
 import ReactDayPicker, { DayPickerProps } from 'react-day-picker';
 import { ClassNames } from 'react-day-picker/types/ClassNames';
 export interface IDatePickerProps extends Omit<DayPickerProps, 'todayButton' | 'showWeekNumbers'> {
-    innerRef?: React.Ref<ReactDayPicker>;
+    innerRef?: Ref<ReactDayPicker>;
     range?: boolean;
 }
 export interface IDatePickerNavbarProps {
@@ -95,6 +95,6 @@ export interface IRangeDatePickerProps {
     initialToDate?: Date;
     toMonth?: Date;
     onChange: (selected: IRangeDatePickerOption | null) => void;
-    children(payload: IRangeDatePickerChildrenPayload): React.ReactElement;
+    children(payload: IRangeDatePickerChildrenPayload): ReactElement;
 }
 export {};

package/dist/components/FormField/FormField.stories.d.ts

@@ -5,5 +5,5 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
 }>;
 export default _default;
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, FormFieldProps>;
-export declare const Examples: () => JSX.Element;
+export declare const Examples: () => React.ReactElement;
 export declare const TextFieldWithError: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, FormFieldProps>;

package/dist/components/Input/Input.stories.d.ts

@@ -4,7 +4,7 @@ import { InputProps } from './Input';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, InputProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;
 export declare const Default: Story<InputProps>;
-export declare const Sizes: () => JSX.Element;
-export declare const States: () => JSX.Element;
-export declare const Types: () => JSX.Element;
-export declare const WithIcons: () => JSX.Element;
+export declare const Sizes: () => React.ReactElement;
+export declare const States: () => React.ReactElement;
+export declare const Types: () => React.ReactElement;
+export declare const WithIcons: () => React.ReactElement;

package/dist/components/Modal/ModalHeader.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { IconProps } from '../Icon';
 export interface ModalHeaderProps {
     title?: React.ReactNode;

package/dist/components/NumericInput/NumericInput.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-interface Props {
+export type NumericInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
     className?: string;
     error?: string;
     value: string;
@@ -8,7 +8,5 @@ interface Props {
     disabled?: boolean;
     noControls?: boolean;
     onChange: (value: string) => void;
-}
-export type NumericInputProps = React.InputHTMLAttributes<HTMLInputElement> & Props;
+};
 export declare const NumericInput: React.FC<NumericInputProps>;
-export {};

package/dist/components/NumericInput/NumericInput.stories.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { NumericInputProps } from './NumericInput';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, React.InputHTMLAttributes<HTMLInputElement> & {
+    className?: string | undefined;
+    error?: string | undefined;
+    value: string;
+    max?: number | undefined;
+    min?: number | undefined;
+    disabled?: boolean | undefined;
+    noControls?: boolean | undefined;
+    onChange: (value: string) => void;
+} & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const NumericInput: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, NumericInputProps>;
+export declare const NumericInputWithMinAndMaxValues: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, NumericInputProps>;
+export declare const NumericInputWithNoControls: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, NumericInputProps>;
+export declare const NumericInputWithDisabled: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, NumericInputProps>;
+export declare const NumericInputWithError: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, NumericInputProps>;

package/dist/components/Picker/Picker.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { IPickerListItem } from './PickerList';
-import { IconSize } from '../Icon';
 import { Size } from 'utils';
-export type PickerType = 'single' | 'multi';
+import { IconSize } from '../Icon';
+import { PickerType } from './constants';
+import { IPickerListItem } from './PickerList';
 export interface IPickerProps {
     /**
      * Specify the custom id
@@ -76,5 +76,9 @@ export interface IPickerProps {
      * Callback called after item selection
      */
     onSelect: (selectedItems: IPickerListItem[] | null) => void;
+    /**
+     * Clears the search input after item select
+     */
+    clearSearchAfterSelection?: boolean;
 }
 export declare const Picker: React.FC<IPickerProps>;

package/dist/components/Picker/TriggerBody.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
+import { IconSize } from '../Icon';
+import { PickerType } from './constants';
 import { IPickerListItem } from './PickerList';
-import { PickerType } from './Picker';
-import { IconSize } from 'index';
 export interface ITriggerBodyProps {
     isOpen: boolean;
     isSearchDisabled?: boolean;
@@ -10,6 +10,7 @@ export interface ITriggerBodyProps {
     items?: IPickerListItem[] | null;
     type: PickerType;
     iconSize?: IconSize;
+    clearSearchAfterSelection?: boolean;
     onItemRemove: (item: IPickerListItem) => void;
     onFilter: (text: string) => void;
 }

package/dist/components/Picker/constants.d.ts

@@ -19,3 +19,4 @@ export declare const defaultExtendedOptions: ({
     groupHeader?: undefined;
 })[];
 export declare const SELECT_ALL_OPTION_KEY = "select-all";
+export type PickerType = 'single' | 'multi';

package/dist/components/Picker/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Picker';
 export * from './PickerList';
+export type { PickerType } from './constants';

package/dist/components/Switch/Switch.d.ts

@@ -3,15 +3,45 @@ export declare const baseClass = "switch";
 export type SwitchSize = 'compact' | 'medium' | 'large';
 export type SwitchState = 'regular' | 'loading' | 'locked';
 export interface SwitchProps {
+    /**
+     * Specify the label for the switch input
+     */
     ariaLabel?: string;
+    /**
+     * The CSS class for switch container
+     */
     className?: string;
+    /**
+     * Will set the switch to "on" on component initialization
+     */
     defaultOn?: boolean;
+    /**
+     * Specify whether the switch should be disabled
+     */
     disabled?: boolean;
+    /**
+     * Ref object
+     */
     innerRef?: React.LegacyRef<HTMLInputElement> | undefined;
+    /**
+     * Specify the switch input name
+     */
     name?: string;
+    /**
+     * Define if switch is "on"
+     */
     on?: boolean;
+    /**
+     * The event handler for onChange
+     */
     onChange?(e: React.FormEvent, value: boolean): void;
+    /**
+     * Specify the switch size
+     */
     size?: SwitchSize;
+    /**
+     * Specify the switch state
+     */
     state?: SwitchState;
 }
 export declare const Switch: React.FC<SwitchProps>;

package/dist/components/Tab/Tab.stories.d.ts

@@ -25,5 +25,5 @@ export declare const Tab: {
     (args: ITabArgs): React.ReactElement;
     args: TabProps;
 };
-export declare const StatesAndVariants: () => JSX.Element;
-export declare const Sizes: () => JSX.Element;
+export declare const StatesAndVariants: () => React.ReactElement;
+export declare const Sizes: () => React.ReactElement;

package/dist/components/TagInput/EmailTagInput.d.ts

@@ -1,5 +1,5 @@
-import { TagInputProps } from './TagInput';
 import * as React from 'react';
+import { TagInputProps } from './TagInput';
 export type EmailTagInputProps = Omit<TagInputProps, 'validator'>;
 export declare const emailRegex: RegExp;
 export declare const EmailTagInput: React.FC<EmailTagInputProps>;

package/dist/components/TagInput/TagInput.stories.d.ts

@@ -7,4 +7,4 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
 export default _default;
 export declare const DefaultTagInput: Story<TagInputProps>;
 export declare const DefaultEmailTagInput: Story<EmailTagInputProps>;
-export declare const Sizes: () => JSX.Element;
+export declare const Sizes: () => React.ReactElement;

package/dist/components/Textarea/Textarea.stories.d.ts

@@ -4,4 +4,4 @@ import { TextareaProps } from './Textarea';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export default _default;
 export declare const Default: Story<TextareaProps>;
-export declare const States: () => JSX.Element;
+export declare const States: () => React.ReactElement;

package/dist/components/Toast/Toast.stories.d.ts

@@ -9,6 +9,6 @@ export declare const Default: Story<ToastProps>;
 export declare const Kinds: Story;
 export declare const WithCloseIcon: Story;
 export declare const WithCustomAction: {
-    (): JSX.Element;
+    (): React.ReactElement;
     parameters: import("@storybook/types").Parameters;
 };

package/dist/components/Tooltip/Tooltip.stories.d.ts

@@ -20,11 +20,11 @@ export declare const Default: {
         hoverOutDelayTimeout: number;
     };
 };
-export declare const TooltipInfo: () => JSX.Element;
-export declare const TooltipInteractive: () => JSX.Element;
-export declare const TooltipReports: () => JSX.Element;
+export declare const TooltipInfo: () => React.ReactElement;
+export declare const TooltipInteractive: () => React.ReactElement;
+export declare const TooltipReports: () => React.ReactElement;
 export declare const TooltipUserGuide: {
-    (args: ITooltipProps): JSX.Element;
+    (args: ITooltipProps): React.ReactElement;
     args: {
         placement: string;
         isVisible: boolean;

package/dist/components/Tooltip/components/UserGuide/SpotlightOverlay.d.ts

@@ -1,7 +1,8 @@
+import * as React from 'react';
 declare const SpotlightOverlay: ({ gap, isVisible, slide, disablePointerEvents, }: {
     gap: DOMRect | null;
     isVisible: boolean;
     slide: boolean;
     disablePointerEvents: boolean;
-}) => JSX.Element | null;
+}) => React.ReactElement | null;
 export default SpotlightOverlay;