@livechat/design-system-react-components 2.8.0 → 2.9.0

package/dist/components/Accordion/Accordion.d.ts

@@ -1,3 +1,4 @@
-import { IAccordionProps } from './types';
+import { IAccordionProps, IAccordionPromoProps } from './types';
 import * as React from 'react';
 export declare const Accordion: React.FC<IAccordionProps>;
+export declare const AccordionPromo: React.FC<IAccordionPromoProps>;

package/dist/components/Accordion/hooks.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+interface UseAccordionProps {
+    isControlled: boolean;
+    isExpanded: boolean;
+    setShouldBeVisible: (isVisible: boolean) => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+interface IUseAccordion {
+    handleExpandChange: (isExpanded: boolean) => void;
+    handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+}
+export declare const useAccordion: ({ isControlled, isExpanded, setShouldBeVisible, onOpen, onClose, }: UseAccordionProps) => IUseAccordion;
+export {};

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

@@ -1 +1 @@
-export { Accordion } from './Accordion';
+export { Accordion, AccordionPromo } from './Accordion';

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

@@ -4,7 +4,7 @@ export type AccordionLabel = React.ReactNode | {
     open: React.ReactNode;
     closed: React.ReactNode;
 };
-export interface IAccordionProps extends ComponentCoreProps {
+export interface IAccordionGlobalProps extends ComponentCoreProps {
     /**
      * Specify the content of the accordion
      */
@@ -18,9 +18,9 @@ export interface IAccordionProps extends ComponentCoreProps {
      */
     multilineElement?: React.ReactNode;
     /**
-     * Specify the kind of the accordion
+     * Specify the footer element, which will be displayed at the bottom
      */
-    kind?: 'default' | 'warning' | 'error';
+    footer?: React.ReactNode;
     /**
      * Specify if the accordion should be open on init
      */
@@ -38,6 +38,24 @@ export interface IAccordionProps extends ComponentCoreProps {
      */
     onOpen?: () => void;
 }
+export interface IAccordionProps extends IAccordionGlobalProps {
+    /**
+     * Specify the kind of the accordion
+     */
+    kind?: 'default' | 'warning' | 'error';
+}
+export interface IAccordionPromoProps extends IAccordionGlobalProps {
+}
+export interface IAccordionComponentProps extends IAccordionGlobalProps {
+    /**
+     * CSS class name for the main accordion wrapper
+     */
+    mainClassName: string;
+    /**
+     * Set to display promo accordion
+     */
+    isPromo?: boolean;
+}
 export interface IAccordionAnimatedLabelProps {
     open: React.ReactNode;
     closed: React.ReactNode;

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

@@ -1,11 +1,11 @@
 import { Placement, Strategy } from '@floating-ui/react';
-import { InputProps } from '../Input';
+import { IInputProps } from '../Input/types';
 import { IPickerListItem } from '../Picker';
 import * as React from 'react';
 export type IAutoCompleteListItem = Omit<IPickerListItem, 'key' | 'customElement'> & {
     customElement?: React.ReactElement;
 };
-export interface AutoCompleteProps extends Omit<InputProps, 'type'> {
+export interface AutoCompleteProps extends Omit<IInputProps, 'type'> {
     /** Options that will be displayed in the picker. If they are strings, they will be converted to `IPickerListItem[]`*/
     options?: string[] | IAutoCompleteListItem[];
     /** If true, disables filtering of the options. Useful for getting options from an external source.*/

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

@@ -1,29 +1,5 @@
+import { IInputComponentProps, IInputPromoProps, IInputProps } from './types';
 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;
-    /**
-     * Set to enable ellipsis
-     */
-    cropOnBlur?: boolean;
-}
-export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
-export {};
+export declare const InputComponent: React.ForwardRefExoticComponent<IInputComponentProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Input: React.ForwardRefExoticComponent<IInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const InputPromo: React.ForwardRefExoticComponent<IInputPromoProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,41 @@
+import * as React from 'react';
+export interface IInputIcon {
+    source: React.ReactElement;
+    place: 'left' | 'right';
+}
+export interface IInputGlobalProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * 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?: IInputIcon;
+    /**
+     * Set to enable ellipsis
+     */
+    cropOnBlur?: boolean;
+}
+export interface IInputProps extends IInputGlobalProps {
+    /**
+     * Specify the input size
+     */
+    inputSize?: 'xsmall' | 'compact' | 'medium' | 'large';
+}
+export interface IInputPromoProps extends IInputGlobalProps {
+}
+export interface IInputComponentProps extends IInputGlobalProps {
+    /**
+     * CSS class name for the main input wrapper
+     */
+    mainClassName: string;
+    /**
+     * Set to display promo input
+     */
+    isPromo?: boolean;
+}

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

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes, ReactElement } from 'react';
-import { Placement, Strategy, UseClickProps, UseDismissProps } from '@floating-ui/react';
+import { FloatingPortalProps, Placement, Strategy, UseClickProps, UseDismissProps } from '@floating-ui/react';
 import { VirtuosoProps } from 'react-virtuoso';
 import { Size } from '../../utils';
 import { ComponentCoreProps } from '../../utils/types';
@@ -123,6 +123,10 @@ export interface IPickerProps extends ComponentCoreProps {
      * Floating strategy for the picker component from @floating-ui/react
      */
     floatingStrategy?: Strategy;
+    /**
+     * Root node the portal container from @floating-ui/react will be appended to
+     */
+    root?: FloatingPortalProps['root'];
     /**
      * Set the `floating-ui` useDismiss hook params if you need more control
      * https://floating-ui.com/docs/usedismiss

package/dist/components/Typography/Text.d.ts

@@ -16,6 +16,8 @@ interface IProps extends React.HTMLAttributes<HTMLElement> {
     uppercase?: boolean;
     /** Optional prop to set the bold */
     bold?: boolean;
+    /** Optional prop to set the semi-bold */
+    semiBold?: boolean;
     /** Optional prop to set the underline */
     underline?: boolean;
     /** Optional prop to set the strike */

package/dist/foundations/design-token.d.ts

@@ -370,5 +370,7 @@ export declare const DesignToken: {
     SurfaceCheckListItemOpenBackground: string;
     SurfaceCheckListBackground: string;
     ContentBasicPlaceholder: string;
+    InputPromoBorderDefault: string;
+    InputPromoBorderHover: string;
 };
 export type DesignTokenKey = keyof typeof DesignToken;