@livechat/design-system-react-components 1.0.0-alpha.51 → 1.0.0-alpha.53

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Placement } from '@floating-ui/react-dom';
+export interface ActionMenuProps {
+    /**
+     * The CSS class for menu container
+     */
+    className?: string;
+    /**
+     * Array of menu options
+     */
+    options: Array<{
+        key: string;
+        element: string | React.ReactElement;
+        disabled?: boolean;
+        withDivider?: boolean;
+        onClick: () => void;
+    }>;
+    /**
+     * Trigger element
+     */
+    triggerRenderer: React.ReactNode;
+    /**
+     * The menu placement
+     */
+    placement?: Placement;
+}
+export declare const ActionMenu: React.FC<ActionMenuProps>;

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

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

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

@@ -1,8 +1,17 @@
 import * as React from 'react';
 declare type AlertKind = 'info' | 'warning' | 'success' | 'error';
 export interface AlertProps {
+    /**
+     * The CSS class for container
+     */
     className?: string;
+    /**
+     * Specify the kind of Alert
+     */
     kind?: AlertKind;
+    /**
+     * The optional event handler for close button
+     */
     onClose?: () => void;
 }
 export declare const Alert: React.FC<React.PropsWithChildren<AlertProps>>;

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

@@ -4,15 +4,45 @@ declare type AvatarSize = 'xxxsmall' | 'xxsmall' | 'xsmall' | 'small' | 'medium'
 declare type AvatarStatus = 'available' | 'unavailable' | 'unknown';
 declare type AvatarType = 'image' | 'text';
 export interface AvatarProps {
+    /**
+     * Alternate text for an image avatar
+     */
     alt?: string;
+    /**
+     * The CSS class for container
+     */
     className?: string;
+    /**
+     * Specify the background color
+     */
     color?: string;
+    /**
+     * Specify the avatar shape
+     */
     shape?: AvatarShape;
+    /**
+     * Specify the avatar size
+     */
     size?: AvatarSize;
+    /**
+     * Image source for the image avatar
+     */
     src?: string;
+    /**
+     * Displays status dot
+     */
     status?: AvatarStatus;
+    /**
+     * Text for an text avatar
+     */
     text?: string;
+    /**
+     * Specify the avatar type
+     */
     type: AvatarType;
+    /**
+     * Displays rim
+     */
     withRim?: boolean;
 }
 export declare const Avatar: React.FC<AvatarProps>;

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

@@ -1,9 +1,24 @@
 import * as React from 'react';
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Value to display
+     */
     count?: number;
+    /**
+     * Specify the badge kind
+     */
     kind?: 'primary' | 'secondary' | 'tertiary';
+    /**
+     * The maximum value after which a "+" will be displayed next to the number
+     */
     max?: number;
+    /**
+     * Specify the badge size
+     */
     size?: 'large' | 'medium' | 'compact';
+    /**
+     * Specify the badge type
+     */
     type?: 'counter' | 'alert' | 'dot';
 }
 export declare const Badge: React.FC<BadgeProps>;

package/dist/src/components/Button/Button.d.ts

@@ -1,21 +1,63 @@
 import * as React from 'react';
 import { Size } from 'utils';
-export declare type ButtonKind = 'basic' | 'primary' | 'secondary' | 'destructive' | 'text' | 'plain' | 'plain-light' | 'subtle';
+export declare type ButtonKind = 'basic' | 'primary' | 'secondary' | 'destructive' | 'text' | 'plain' | 'plain-light' | 'subtle' | 'float';
 export declare type ButtonProps = {
+    /**
+     * Specify the button kind
+     */
     kind?: ButtonKind;
+    /**
+     * Specify the button size
+     */
     size?: Size;
+    /**
+     * Set the loading state
+     */
     loading?: boolean;
+    /**
+     * Set the button for full width
+     */
     fullWidth?: boolean;
+    /**
+     * Text displayed in loading state
+     */
     loaderLabel?: string;
+    /**
+     * Renders given element
+     */
     icon?: React.ReactElement;
+    /**
+     * Specify the place to render element given in `icon` prop
+     */
     iconPosition?: 'left' | 'right';
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & React.AnchorHTMLAttributes<HTMLAnchorElement>;
 export declare const Button: React.ForwardRefExoticComponent<{
+    /**
+     * Specify the button kind
+     */
     kind?: ButtonKind | undefined;
+    /**
+     * Specify the button size
+     */
     size?: Size | undefined;
+    /**
+     * Set the loading state
+     */
     loading?: boolean | undefined;
+    /**
+     * Set the button for full width
+     */
     fullWidth?: boolean | undefined;
+    /**
+     * Text displayed in loading state
+     */
     loaderLabel?: string | undefined;
+    /**
+     * Renders given element
+     */
     icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-    iconPosition?: "left" | "right" | undefined;
+    /**
+     * Specify the place to render element given in `icon` prop
+     */
+    iconPosition?: "right" | "left" | undefined;
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;

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

@@ -4,20 +4,69 @@ import { IconSize } from '../Icon';
 import { Size } from 'utils';
 export declare 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;
+    /**
+     * Callback called after item selection
+     */
     onSelect: (selectedItems: IPickerListItem[] | null) => void;
 }
 export declare const Picker: React.FC<IPickerProps>;

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

@@ -9,6 +9,7 @@ export interface ITriggerProps {
     isRequired?: boolean;
     isMultiSelect?: boolean;
     size?: Size;
+    hideClearButton?: boolean;
     onTrigger: (e: React.MouseEvent | KeyboardEvent) => void;
     onClear: () => void;
 }

package/dist/src/components/Popover/Popover.d.ts

@@ -2,11 +2,33 @@ import * as React from 'react';
 import { Placement, flip } from '@floating-ui/react-dom';
 export interface IPopoverProps {
     children?: React.ReactNode;
+    /**
+     * The CSS class for popover container
+     */
     className?: string;
+    /**
+     * The popover placement related to the trigger element
+     */
     placement?: Placement;
+    /**
+     * Set popover visibility
+     */
     isVisible?: boolean;
+    /**
+     * Set the popover placement to keep it in view
+     */
     flipOptions?: Parameters<typeof flip>[0];
+    /**
+     * Set `false` if the menu is not to be closed with a esc press
+     */
+    closeOnEsc?: boolean;
+    /**
+     * Trigger element
+     */
     triggerRenderer: () => React.ReactNode;
+    /**
+     * Optional callback called after popover close
+     */
     onClose?: () => void;
 }
 export declare const Popover: React.FC<IPopoverProps>;

package/dist/src/index.d.ts

@@ -2,6 +2,7 @@ export { DesignToken } from './themes/design-token';
 export { SpacingToken } from './foundations/spacing-token';
 export { ShadowToken } from './foundations/shadow-token';
 export type { Size } from './utils';
+export * from './components/ActionMenu';
 export * from './components/Alert';
 export * from './components/Avatar';
 export * from './components/Badge';