@livechat/design-system-react-components 1.0.0-alpha.6 → 1.0.0-alpha.61

package/dist/{src/components → components}/FieldError/FieldError.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-export declare type FieldErrorProps = React.HTMLAttributes<HTMLSpanElement>;
+export type FieldErrorProps = React.HTMLAttributes<HTMLSpanElement>;
 export declare const FieldError: React.FC<FieldErrorProps>;

package/dist/{src/components → components}/FieldGroup/FieldGroup.d.ts

@@ -5,4 +5,4 @@ export interface FieldGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     inline?: boolean;
     stretch?: boolean;
 }
-export declare const FieldGroup: React.FC<FieldGroupProps>;
+export declare const FieldGroup: React.FC<React.PropsWithChildren<FieldGroupProps>>;

package/dist/components/FieldGroup/FieldGroup.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { FieldGroupProps } from './FieldGroup';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, FieldGroupProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const FieldGroup: {
+    ({ ...args }: FieldGroupProps): React.ReactElement;
+    args: FieldGroupProps;
+};

package/dist/components/FileUploadProgress/FileUploadProgress.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { ProgressSize, ProgressStatus } from '../Progress/constants';
+export type UploadProgressActionState = 'visible' | 'hover' | 'hidden';
+export interface FileUploadProgressProps {
+    /**
+     * Define if action buttons should be visible, visible on hover, or hidden
+     */
+    actionsVisibility?: UploadProgressActionState;
+    /**
+     * The CSS class for progress bar
+     */
+    className?: string;
+    /**
+     * Renders given element
+     */
+    icon?: React.ReactNode;
+    /**
+     * Specify the uploading file name
+     */
+    title: string;
+    /**
+     * Specify the value of current file upload progress (0-100)
+     */
+    progressValue: number;
+    /**
+     * Specify the progress bar size
+     */
+    size?: ProgressSize;
+    /**
+     * Specify the uploading file status
+     */
+    status?: ProgressStatus;
+    /**
+     * The event handler for close icon click
+     */
+    onCloseButtonClick?: () => void;
+    /**
+     * The event handler for retry icon click
+     */
+    onRetryButtonClick?: () => void;
+}
+export declare const FileUploadProgress: React.ExoticComponent<FileUploadProgressProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { FileUploadProgressProps } from './FileUploadProgress';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, FileUploadProgressProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;
+export declare const FileUploadProgress: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, FileUploadProgressProps>;
+export declare const FileUploadProgressWithIcon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, FileUploadProgressProps>;
+export declare const FileUploadProgressStates: React.FC;

package/dist/components/FileUploadProgress/FileUploadProgressActions.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ProgressStatus } from '../Progress/constants';
+interface FileUploadProgressActionsProps {
+    status: ProgressStatus;
+    onCloseButtonClick?: () => void;
+    onRetryButtonClick?: () => void;
+}
+export declare const FileUploadProgressActions: React.FC<FileUploadProgressActionsProps>;
+export {};

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

@@ -0,0 +1,2 @@
+export * from './FileUploadProgress';
+export * from './FileUploadProgressActions';

package/dist/{src/components → components}/Form/Form.d.ts

@@ -4,4 +4,4 @@ export interface FormProps extends React.HTMLAttributes<HTMLFormElement> {
     helperText?: string;
     formFooter?: React.ReactNode;
 }
-export declare const Form: React.FC<FormProps>;
+export declare const Form: React.FC<React.PropsWithChildren<FormProps>>;

package/dist/components/Form/Form.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Story } from '@storybook/react';
+import { FormProps } from '../Form';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, FormProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Form: Story<FormProps>;

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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+export interface FormFieldProps {
+    /**
+     * Define label text
+     */
+    labelText?: string;
+    /**
+     * Renders given element aligned to label, `inline` will affect
+     */
+    labelAdornment?: React.ReactNode;
+    /**
+     * Define to associate the label with the field
+     */
+    labelFor?: string;
+    /**
+     * The CSS class for field container
+     */
+    className?: string;
+    /**
+     * Set the label to inline version
+     */
+    inline?: boolean;
+    /**
+     * Define error text
+     */
+    error?: string;
+    /**
+     * Define the description text
+     */
+    description?: React.ReactNode;
+    /**
+     * Wrapped element
+     */
+    children?: React.ReactNode;
+    /**
+     * Renders given element above the filed
+     */
+    labelRightNode?: React.ReactNode;
+}
+export declare const FormField: React.FC<FormFieldProps>;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { FormFieldProps } from './FormField';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, FormFieldProps & {
+    children?: React.ReactNode;
+}>;
+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 TextFieldWithError: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, FormFieldProps>;

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

@@ -0,0 +1 @@
+export * from './FormField';

package/dist/{src/components → components}/FormGroup/FormGroup.d.ts

@@ -4,4 +4,4 @@ export interface FormGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     labelText?: string;
     helperText?: string;
 }
-export declare const FormGroup: React.FC<FormGroupProps>;
+export declare const FormGroup: React.FC<React.PropsWithChildren<FormGroupProps>>;

package/dist/components/FormGroup/FormGroup.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { FormGroupProps } from './FormGroup';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, FormGroupProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const FormGroup: {
+    ({ ...args }: FormGroupProps): React.ReactElement;
+    args: FormGroupProps;
+};

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export type IconSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export type IconKind = 'primary' | 'subtle' | 'inverted' | 'inverted-subtle' | 'link' | 'success' | 'warning' | 'error' | 'negative' | 'positive' | 'warning' | 'action-primary' | 'action-negative' | 'action-positive' | 'action-warning' | 'action-neutral';
+export type IconSource = React.FC<React.SVGProps<SVGSVGElement>> & React.ReactElement;
+export interface IconProps {
+    source: IconSource;
+    size?: IconSize;
+    kind?: IconKind;
+    disabled?: boolean;
+    className?: string;
+    customColor?: string;
+}
+export declare const Icon: React.FC<IconProps>;
+export default Icon;

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { IconProps } from './Icon';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, IconProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Icon: {
+    (args: IconProps): React.ReactElement;
+    args: {
+        source: any;
+        size: string;
+        kind: string;
+        disabled: boolean;
+    };
+};

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

@@ -0,0 +1 @@
+export * from './Icon';

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+interface InputIcon {
+    source: React.ReactElement;
+    place: 'left' | 'right';
+}
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * Specify the input size
+     */
+    inputSize?: 'xsmall' | 'compact' | 'medium' | 'large';
+    /**
+     * Specify whether the input should be in error state
+     */
+    error?: boolean;
+    /**
+     * Specify whether the input should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Set the icon and its position
+     */
+    icon?: InputIcon;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Story } from '@storybook/react';
+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;

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

@@ -0,0 +1 @@
+export * from './Input';

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { LinkProps } from './Link';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, LinkProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Link: {
+    ({ ...args }: LinkProps): React.ReactElement;
+    args: {
+        bold: boolean;
+    };
+};

package/dist/{src/components → components}/Loader/Loader.d.ts

@@ -1,10 +1,20 @@
 import * as React from 'react';
 export interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify the loader size
+     */
     size?: 'small' | 'medium' | 'large';
+    /**
+     * Specify the loader label
+     */
     label?: string;
-    /** Fragment circle color */
+    /**
+     * Set the loader highlight color
+     */
     primaryColor?: string;
-    /** Main circle color */
+    /**
+     * Set the loader color
+     */
     secondaryColor?: string;
 }
 export declare const Loader: React.FC<LoaderProps>;

package/dist/components/Loader/Loader.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { LoaderProps } from './Loader';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, LoaderProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Default: (args: LoaderProps) => React.ReactElement;
+export declare const Sizes: () => React.ReactElement;
+export declare const Labeled: (args: LoaderProps) => React.ReactElement;
+export declare const CustomColors: (args: LoaderProps) => React.ReactElement;

package/dist/{src/components → components}/Modal/Modal.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { ModalBaseProps } from './ModalBase';
 export interface ModalProps extends ModalBaseProps {
     heading?: React.ReactNode;
+    labelHeading?: React.ReactNode;
+    fullSpaceContent?: boolean;
     footer?: React.ReactNode;
 }
 export declare const Modal: React.FC<ModalProps>;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ModalProps, ModalPortalProps } from './index';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ModalProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Modal: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ModalProps>;
+export declare const ModalWithCustomHeader: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ModalProps>;
+export declare const ModalWithLabeledHeader: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ModalProps>;
+export declare const ModalWithFullSpaceContent: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ModalProps>;
+export declare const ModalPortal: {
+    ({ children, ...args }: ModalPortalProps): React.ReactElement;
+    args: ModalPortalProps;
+};

package/dist/{src/components → components}/Modal/ModalBase.d.ts

@@ -2,5 +2,6 @@ import * as React from 'react';
 export interface ModalBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     onClose(): void;
     closeOnEscPress?: boolean;
+    closeOnOverlayPress?: boolean;
 }
-export declare const ModalBase: React.FC<ModalBaseProps>;
+export declare const ModalBase: React.FC<React.PropsWithChildren<ModalBaseProps>>;

package/dist/components/Modal/ModalBase.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface ModalCloseButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    labelType?: boolean;
+    customColor?: string;
+}
+export declare const ModalCloseButton: React.FC<ModalCloseButtonProps>;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IconProps } from '../Icon';
+export interface ModalHeaderProps {
+    title?: React.ReactNode;
+    iconProps?: IconProps;
+    children?: React.ReactNode;
+    className?: 'string';
+}
+export declare const ModalHeader: React.FC<ModalHeaderProps>;

package/dist/{src/components → components}/Modal/ModalPortal.d.ts

@@ -2,6 +2,6 @@ import * as React from 'react';
 export interface ModalPortalProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     zIndex: number;
-    parentElementName: string;
+    parentElementName?: string;
 }
 export declare const ModalPortal: React.FC<ModalPortalProps>;

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare const ModalFullSpaceContent: React.FC;
+export declare const ModalContent: React.FC;
+export declare const ModalFooter: React.FC;

package/dist/{src/components → components}/Modal/index.d.ts

@@ -1,10 +1,10 @@
-export { ActionModal } from './ActionModal';
 export { Modal } from './Modal';
 export { ModalBase } from './ModalBase';
 export { ModalCloseButton } from './ModalCloseButton';
 export { ModalPortal } from './ModalPortal';
-export type { ActionModalProps } from './ActionModal';
+export { ModalHeader } from './ModalHeader';
 export type { ModalProps } from './Modal';
 export type { ModalBaseProps } from './ModalBase';
 export type { ModalCloseButtonProps } from './ModalCloseButton';
 export type { ModalPortalProps } from './ModalPortal';
+export type { ModalHeaderProps } from './ModalHeader';

package/dist/{src/components → components}/NumericInput/NumericInput.d.ts

@@ -9,6 +9,6 @@ interface Props {
     noControls?: boolean;
     onChange: (value: string) => void;
 }
-export declare type NumericInputProps = React.InputHTMLAttributes<HTMLInputElement> & Props;
+export type NumericInputProps = React.InputHTMLAttributes<HTMLInputElement> & Props;
 export declare const NumericInput: React.FC<NumericInputProps>;
 export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export { NumericInput } from './NumericInput';

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

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { IPickerListItem } from './PickerList';
+import { IconSize } from '../Icon';
+import { Size } from 'utils';
+export type PickerType = 'single' | 'multi';
+export interface IPickerProps {
+    /**
+     * Specify the custom id
+     */
+    id?: string;
+    /**
+     * The CSS class for picker container
+     */
+    className?: string;
+    /**
+     * Specify whether the picker should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify whether the picker should be in error state
+     */
+    error?: boolean;
+    /**
+     * Array of picker options
+     */
+    options: IPickerListItem[];
+    /**
+     * Array of picker selected options
+     */
+    selected?: IPickerListItem[] | null;
+    /**
+     * Specify the picker size
+     */
+    size?: Size;
+    /**
+     * Set the dismiss icon size in tags when `multi` type is enabled
+     */
+    tagIconSize?: IconSize;
+    /**
+     * Specify the placeholder for search input
+     */
+    placeholder?: string;
+    /**
+     * Specify whether the option select is required
+     */
+    isRequired?: boolean;
+    /**
+     * Text if no search result were found
+     */
+    noSearchResultText?: string;
+    /**
+     * Text for `select all` option which will be visible if defined in multi select mode
+     */
+    selectAllOptionText?: string;
+    /**
+     * Set `multi` to specify whether the picker should allow to multi selection
+     */
+    type?: PickerType;
+    /**
+     * Set to disable search input
+     */
+    searchDisabled?: boolean;
+    /**
+     * Set to hide clear selection button
+     */
+    hideClearButton?: boolean;
+    /**
+     * Will open picker on component initialization
+     */
+    openedOnInit?: boolean;
+    /**
+     * Test id passed to the picker trigger element
+     */
+    ['data-testid']?: string;
+    /**
+     * Callback called after item selection
+     */
+    onSelect: (selectedItems: IPickerListItem[] | null) => void;
+}
+export declare const Picker: React.FC<IPickerProps>;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { IPickerProps } from './Picker';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, IPickerProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IPickerProps>;
+export declare const States: () => React.ReactElement;
+export declare const PickerWithGroupedOptions: () => React.ReactElement;
+export declare const PickerWithOptionsAsCustomElements: () => React.ReactElement;

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export interface IPickerListItem {
+    key: string;
+    name: string;
+    customElement?: {
+        listItemBody: React.ReactElement;
+        selectedItemBody: React.ReactElement;
+    };
+    groupHeader?: boolean;
+    disabled?: boolean;
+}
+export interface IPickerListProps {
+    isOpen: boolean;
+    items: IPickerListItem[];
+    selectedItemsKeys: string[] | null;
+    emptyStateText?: string;
+    selectAllOptionText?: string;
+    isMultiSelect?: boolean;
+    onClose: () => void;
+    onSelect: (item: IPickerListItem) => void;
+    onSelectAll: () => void;
+}
+export declare const PickerList: React.FC<IPickerListProps>;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Size } from 'utils';
+export interface ITriggerProps {
+    isSearchDisabled: boolean;
+    isDisabled?: boolean;
+    isError?: boolean;
+    isItemSelected: boolean;
+    isOpen: boolean;
+    isRequired?: boolean;
+    isMultiSelect?: boolean;
+    size?: Size;
+    hideClearButton?: boolean;
+    onTrigger: (e: React.MouseEvent | KeyboardEvent) => void;
+    onClear: () => void;
+    testId?: string;
+}
+export declare const Trigger: React.FC<React.PropsWithChildren<ITriggerProps>>;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { IPickerListItem } from './PickerList';
+import { PickerType } from './Picker';
+import { IconSize } from 'index';
+export interface ITriggerBodyProps {
+    isOpen: boolean;
+    isSearchDisabled?: boolean;
+    isDisabled?: boolean;
+    placeholder: string;
+    items?: IPickerListItem[] | null;
+    type: PickerType;
+    iconSize?: IconSize;
+    onItemRemove: (item: IPickerListItem) => void;
+    onFilter: (text: string) => void;
+}
+export declare const TriggerBody: React.FC<ITriggerBodyProps>;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,21 @@
+export declare const defaultPickerOptions: {
+    key: string;
+    name: string;
+}[];
+export declare const defaultExtendedOptions: ({
+    key: string;
+    name: string;
+    groupHeader: boolean;
+    disabled?: undefined;
+} | {
+    key: string;
+    name: string;
+    groupHeader?: undefined;
+    disabled?: undefined;
+} | {
+    key: string;
+    name: string;
+    disabled: boolean;
+    groupHeader?: undefined;
+})[];
+export declare const SELECT_ALL_OPTION_KEY = "select-all";

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

@@ -0,0 +1,2 @@
+export * from './Picker';
+export * from './PickerList';