@livechat/design-system-react-components 2.0.0-alpha.6 → 2.0.0-alpha.8

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

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

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

@@ -0,0 +1,3 @@
+import { IAccordionAnimatedLabelProps } from '../types';
+import * as React from 'react';
+export declare const AccordionAnimatedLabel: React.FC<IAccordionAnimatedLabelProps>;

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface IAccordionMultilineElementProps {
+    children: React.ReactNode;
+    isExpanded: boolean;
+}
+export declare const AccordionMultilineElement: React.FC<IAccordionMultilineElementProps>;

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

@@ -0,0 +1,10 @@
+import { AccordionLabel } from './types';
+import * as React from 'react';
+export declare const isLabelObject: (label: React.ReactNode | {
+    open: React.ReactNode;
+    closed: React.ReactNode;
+}) => label is {
+    open: React.ReactNode;
+    closed: React.ReactNode;
+};
+export declare const getLabel: (label: AccordionLabel, currentlyOpen: boolean) => React.ReactNode;

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

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

package/dist/components/Accordion/stories-helpers.d.ts

@@ -0,0 +1,4 @@
+import { IPickerListItem } from '../Picker';
+
+export declare const RULE_PICKER_OPTIONS: IPickerListItem[];
+export declare const TAGS_PICKER_OPTIONS: IPickerListItem[];

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

@@ -0,0 +1,45 @@
+import { ComponentCoreProps } from '../../utils/types';
+import * as React from 'react';
+export type AccordionLabel = React.ReactNode | {
+    open: React.ReactNode;
+    closed: React.ReactNode;
+};
+export interface IAccordionProps extends ComponentCoreProps {
+    /**
+     * Specify the content of the accordion
+     */
+    children: React.ReactNode;
+    /**
+     * Specify the label of the accordion, single element or different for open and closed state
+     */
+    label: AccordionLabel;
+    /**
+     * Specify the multiline element, which will be displayed under the label
+     */
+    multilineElement?: React.ReactNode;
+    /**
+     * Specify the kind of the accordion
+     */
+    kind?: 'default' | 'warning' | 'error';
+    /**
+     * Specify if the accordion should be open on init
+     */
+    openOnInit?: boolean;
+    /**
+     * Set to control accordion state
+     */
+    isOpen?: boolean;
+    /**
+     * Optional handler called on accordion close
+     */
+    onClose?: () => void;
+    /**
+     * Optional handler called on accordion open
+     */
+    onOpen?: () => void;
+}
+export interface IAccordionAnimatedLabelProps {
+    open: React.ReactNode;
+    closed: React.ReactNode;
+    isOpen: boolean;
+}

package/dist/components/AppFrame/components/MobileNavigation/MobileNavigation.d.ts

@@ -0,0 +1,3 @@
+import { IMobileNavigationProps } from './types';
+import * as React from 'react';
+export declare const MobileNavigation: React.FC<IMobileNavigationProps>;

package/dist/components/AppFrame/components/MobileNavigation/types.d.ts

@@ -0,0 +1,8 @@
+import { ComponentCoreProps } from '../../../../utils/types';
+import * as React from 'react';
+export interface IMobileNavigationProps extends ComponentCoreProps {
+    /**
+     * It will display your navigation elements
+     */
+    children: React.ReactNode;
+}

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

@@ -7,3 +7,4 @@ export { Navigation } from './Navigation/Navigation';
 export { NavigationTopBar, NavigationTopBarAlert, NavigationTopBarTitle, } from './NavigationTopBar/NavigationTopBar';
 export { SIDE_NAVIGATION_ITEM_TEST_ID, SIDE_NAVIGATION_ACTIVE_ITEM_TEST_ID, SIDE_NAVIGATION_PARENT_ICON_TEST_ID, } from './SideNavigationItem/constants';
 export { ExpirationCounter } from './ExpirationCounter/ExpirationCounter';
+export { MobileNavigation } from './MobileNavigation/MobileNavigation';

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

@@ -9,6 +9,10 @@ export interface IAppFrameProps extends ComponentCoreProps {
      * It will display navigation elements
      */
     navigation: React.ReactNode;
+    /**
+     * It will display mobile navigation elements
+     */
+    mobileNavigation: React.ReactNode;
     /**
      * It will display the side navigation bar
      */
@@ -29,6 +33,11 @@ export interface IAppFrameProps extends ComponentCoreProps {
      * The CSS class for the content container
      */
     contentClassName?: string;
+    /**
+     * The value that will determine on which resolution mobile view will be displayed
+     * @default 705
+     */
+    mobileViewBreakpoint?: number;
 }
 export type { INavigationProps } from './components/Navigation/types';
 export type { INavigationGroupProps } from './components/NavigationGroup/types';

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

@@ -0,0 +1,13 @@
+import { AutoCompleteProps } from './types';
+import * as React from 'react';
+/**
+ * Text input with autocomplete functionality. The autocomplete list is displayed below the input and is accessible via the keyboard
+ * and mouse. The list is filtered based on the input value.
+ *
+ * @example
+ * <AutoComplete
+ *  options={['Paul', 'Adam', 'John']}
+ *  placeholder="Type a name"
+ * />
+ */
+export declare const AutoComplete: React.ForwardRefExoticComponent<AutoCompleteProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,7 @@
+import { IPickerListItem } from '../Picker';
+import { AutoCompleteProps, IAutoCompleteListItem } from './types';
+
+export declare const areAllOptionsStrings: (options: AutoCompleteProps['options']) => options is string[];
+export declare const buildOptionsFromStrings: (options: string[]) => IPickerListItem[];
+export declare const buildOptionsFromAutoCompleteListItems: (options: IAutoCompleteListItem[]) => IPickerListItem[];
+export declare const getFilteredPickerItems: (items: IPickerListItem[], single: boolean, hideIfExactMatch: boolean, inputValue: string) => IPickerListItem[];

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

@@ -0,0 +1,5 @@
+import { AutoComplete } from './AutoComplete';
+import { AutoCompleteProps } from './types';
+
+export { AutoComplete };
+export type { AutoCompleteProps };

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

@@ -0,0 +1,27 @@
+import { Placement, Strategy } from '@floating-ui/react';
+import { InputProps } from '../Input';
+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'> {
+    /** 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.*/
+    alwaysShowAllOptions?: boolean;
+    /** If true, the autocomplete list will be open when the component mounts.*/
+    autocompleteOpenOnInit?: boolean;
+    /** Minimum height of the list */
+    minListHeight?: number;
+    /** Maximum height of the list */
+    maxListHeight?: number;
+    /** Placement of the list */
+    placement?: Placement;
+    /** Floating strategy */
+    floatingStrategy?: Strategy;
+    /** Type of the input. If true, only shows one matching item. */
+    single?: boolean;
+    /** If true, the option list will be hidden if there is only one option and it is an exact match to the input value. */
+    hideIfExactMatch?: boolean;
+}

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

@@ -58,5 +58,5 @@ export declare const Button: React.ForwardRefExoticComponent<{
     /**
      * Specify the place to render element given in `icon` prop
      */
-    iconPosition?: "right" | "left" | undefined;
+    iconPosition?: "left" | "right" | undefined;
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-    bold: boolean;
+    bold?: boolean;
 }
 /**
  * Simple component which renders an `<a>` element.

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

@@ -12,11 +12,15 @@ export interface IPickerListProps {
     listElementsRef: React.MutableRefObject<(HTMLElement | null)[]>;
     activeIndex: number | null;
     selectedKeys: string[];
+    isPositioned: boolean;
+    searchDisabled: boolean;
+    onItemRemove: (key: string) => void;
     setPointer: (pointer: boolean) => void;
     onSelect: (key: string) => void;
     getFloatingProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
     getItemProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
     emptyStateText?: string;
+    hideWhenEmpty?: boolean;
     listClassName?: string;
     virtuosoProps?: VirtuosoProps<IPickerListItem, unknown>;
 }

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

@@ -18,5 +18,6 @@ export interface ITriggerBodyProps {
     virtualItemRef: React.MutableRefObject<HTMLElement | null>;
     isTriggerFocused: boolean;
     inputRef?: React.RefObject<HTMLInputElement>;
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
 }
 export declare const PickerTriggerBody: React.FC<ITriggerBodyProps>;

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

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { InputHTMLAttributes, ReactElement } from 'react';
 import { Placement, Strategy, UseClickProps, UseDismissProps } from '@floating-ui/react';
 import { VirtuosoProps } from 'react-virtuoso';
 import { Size } from '../../utils';
@@ -9,8 +9,8 @@ export interface IPickerListItem {
     key: string;
     name: string;
     customElement?: {
-        listItemBody: ReactElement;
-        selectedItemBody: ReactElement;
+        listItemBody?: ReactElement;
+        selectedItemBody?: ReactElement;
     };
     groupHeader?: boolean;
     disabled?: boolean;
@@ -136,4 +136,8 @@ export interface IPickerProps extends ComponentCoreProps {
      * https://virtuoso.dev/virtuoso-api-reference/
      */
     virtuosoProps?: VirtuosoProps<IPickerListItem, unknown>;
+    /**
+     * Additional props for the input element
+     */
+    inputProps?: InputHTMLAttributes<HTMLInputElement> | Record<string, unknown>;
 }

package/dist/hooks/helpers.d.ts

@@ -0,0 +1,3 @@
+import { NODE } from './types';
+
+export declare const resizeCallback: (node: NODE, handler: (newSize: DOMRectReadOnly) => void) => void;

package/dist/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useAnimations } from './useAnimations';
+export { useHeightResizer } from './useHeightResizer';
+export { useMobileViewDetector } from './useMobileViewDetector';

package/dist/hooks/types.d.ts

@@ -0,0 +1,13 @@
+export type NODE = HTMLDivElement | null;
+export type CALLBACK = (newSize: DOMRectReadOnly) => void;
+export interface IUseHeightResizer {
+    size: number;
+    handleResizeRef: (node: NODE) => void;
+}
+export interface IUseMobileViewDetectorProps {
+    mobileBreakpoint: number;
+}
+export interface IUseMobileViewDetector {
+    isMobile: boolean;
+    handleResizeRef: (node: NODE) => void;
+}

package/dist/{components/AppFrame/hooks/useAppFrameAnimations.d.ts → hooks/useAnimations.d.ts}

@@ -1,12 +1,12 @@
 import * as React from 'react';
-interface UseAppFrameAnimationsProps {
+interface UseAnimationsProps {
     isVisible: boolean;
     elementRef: React.RefObject<HTMLDivElement>;
 }
-interface IUseAppFrameAnimations {
+interface IUseAnimations {
     isOpen: boolean;
     isMounted: boolean;
     setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
-export declare const useAppFrameAnimations: ({ isVisible, elementRef, }: UseAppFrameAnimationsProps) => IUseAppFrameAnimations;
+export declare const useAnimations: ({ isVisible, elementRef, }: UseAnimationsProps) => IUseAnimations;
 export {};

package/dist/hooks/useHeightResizer.d.ts

@@ -0,0 +1,3 @@
+import { IUseHeightResizer } from './types';
+
+export declare const useHeightResizer: () => IUseHeightResizer;

package/dist/hooks/useMobileViewDetector.d.ts

@@ -0,0 +1,3 @@
+import { IUseMobileViewDetector, IUseMobileViewDetectorProps } from './types';
+
+export declare const useMobileViewDetector: ({ mobileBreakpoint, }: IUseMobileViewDetectorProps) => IUseMobileViewDetector;

package/dist/hooks/useSharedResizeObserver.d.ts

@@ -0,0 +1,6 @@
+import { CALLBACK, NODE } from './types';
+
+export declare const useSharedResizeObserver: {
+    observe: (node: NODE, callback: CALLBACK) => void;
+    unobserve: (node: NODE) => void;
+};