@livechat/design-system-react-components 1.15.0 → 1.16.0

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

@@ -1,78 +1,3 @@
 import * as React from 'react';
-import { Size } from 'utils';
-import { IPickerListItem, PickerType } from './types';
-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;
-    /**
-     * 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;
-    /**
-     * Clears the search input after item select
-     */
-    clearSearchAfterSelection?: boolean;
-}
+import { IPickerProps } from './types';
 export declare const Picker: React.FC<IPickerProps>;

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

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

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { FloatingContext } from '@floating-ui/react';
+import { VirtuosoProps } from 'react-virtuoso';
+import { IPickerListItem } from '../types';
+export interface IPickerListProps {
+    pickerType?: 'single' | 'multi';
+    options: IPickerListItem[];
+    context: FloatingContext<HTMLButtonElement>;
+    setFloating: (node: HTMLElement | null) => void;
+    floatingStyles: React.CSSProperties;
+    maxHeight: number;
+    listElementsRef: React.MutableRefObject<(HTMLElement | null)[]>;
+    isPositioned: boolean;
+    pointer: boolean;
+    activeIndex: number | null;
+    selectedKeys: string[];
+    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;
+    listClassName?: string;
+    virtuosoProps?: VirtuosoProps<IPickerListItem, unknown>;
+}
+export declare const PickerList: React.FC<IPickerListProps>;

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { IPickerListItem } from '../types';
+interface IPickerListItemProps {
+    index: number;
+    isActive: boolean;
+    isSelected: boolean;
+    numberOfItems: number;
+    listElementsRef: React.MutableRefObject<(HTMLElement | null)[]>;
+    onSelect: (key: string) => void;
+    getItemProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    item: IPickerListItem;
+}
+export declare const PickerListItem: React.FC<IPickerListItemProps>;
+export {};

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Size } from '../../../utils';
+export interface PickerTriggerProps {
+    setReference: (element: HTMLElement | null) => void;
+    getReferenceProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    testId?: string;
+    size?: Size;
+    isMultiSelect?: boolean;
+    isItemSelected: boolean;
+    hideClearButton?: boolean;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    isError?: boolean;
+    isOpen: boolean;
+    onClear: () => void;
+}
+export declare const PickerTrigger: React.FC<React.PropsWithChildren<PickerTriggerProps>>;

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Size } from '../../../utils';
+import { PickerType, IPickerListItem } from '../types';
+export interface ITriggerBodyProps {
+    isOpen: boolean;
+    isSearchDisabled?: boolean;
+    isDisabled?: boolean;
+    placeholder: string;
+    searchPhrase?: string;
+    selectedItems?: IPickerListItem[] | null;
+    type: PickerType;
+    clearSearchAfterSelection?: boolean;
+    size?: Size;
+    onItemRemove: (key: string) => void;
+    onSelect: (key: string) => void;
+    onFilter: (text: string) => void;
+    virtualItemRef: React.MutableRefObject<HTMLElement | null>;
+}
+export declare const PickerTriggerBody: React.FC<ITriggerBodyProps>;

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

@@ -1,4 +1,21 @@
-export declare const DEFAULT_PICKER_OPTIONS: {
+export declare const ITEM_ROW_HEIGHT = 35;
+export declare const ITEM_GAP_HEIGHT = 2;
+export declare const ITEM_HEIGHT: number;
+export declare const DEFAULT_LIST_HEIGHT = 400;
+export declare const DEFAULT_PICKER_OPTIONS: ({
+    key: string;
+    name: string;
+    disabled: boolean;
+} | {
+    key: string;
+    name: string;
+    groupHeader?: undefined;
+} | {
+    key: string;
+    name: string;
+    groupHeader: boolean;
+})[];
+export declare const SELECTED_OPTIONS: {
     key: string;
     name: string;
 }[];

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

@@ -1,2 +1,3 @@
 import { IPickerListItem } from './types';
-export declare function getAdjacentItemPositions(items: IPickerListItem[], selectedKeys: string[] | null): Record<string, 'top' | 'middle' | 'bottom'>;
+export declare const findIndicesWhere: <T>(array: T[], predicate: (item: T) => boolean) => number[];
+export declare const getNormalizedItems: (items: IPickerListItem[]) => IPickerListItem[];

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

@@ -1,3 +1,3 @@
 export * from './Picker';
-export * from './PickerList';
-export type { PickerType, IPickerListItem } from './types';
+export * from './components/PickerList';
+export type { PickerType, IPickerListItem, IPickerProps } from './types';

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

@@ -1,11 +1,14 @@
-import * as React from 'react';
+import { ReactElement } from 'react';
+import { Strategy, UseClickProps, UseDismissProps } from '@floating-ui/react';
+import { VirtuosoProps } from 'react-virtuoso';
+import { Size } from '../../utils';
 import { IconSource } from '../Icon';
 export interface IPickerListItem {
     key: string;
     name: string;
     customElement?: {
-        listItemBody: React.ReactElement;
-        selectedItemBody: React.ReactElement;
+        listItemBody: ReactElement;
+        selectedItemBody: ReactElement;
     };
     groupHeader?: boolean;
     disabled?: boolean;
@@ -15,3 +18,100 @@ export interface IPickerListItem {
     showCheckbox?: boolean;
 }
 export type PickerType = 'single' | 'multi';
+export interface IPickerProps {
+    /**
+     * Specify the custom id
+     */
+    id?: string;
+    /**
+     * The CSS class for picker container
+     */
+    className?: string;
+    /**
+     * The CSS class for picker list
+     */
+    listClassName?: 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;
+    /**
+     * 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;
+    /**
+     * Clears the search input after item select
+     */
+    clearSearchAfterSelection?: boolean;
+    /**
+     * Floating strategy for the picker component from @floating-ui/react
+     */
+    floatingStrategy?: Strategy;
+    /**
+     * Set the `floating-ui` useDismiss hook params if you need more control
+     * https://floating-ui.com/docs/usedismiss
+     */
+    useDismissHookProps?: UseDismissProps;
+    /**
+     * Set the `floating-ui` useClick hook params if you need more control
+     * https://floating-ui.com/docs/useclick
+     */
+    useClickHookProps?: UseClickProps;
+    /**
+     * Props for the Virtuoso component
+     * https://virtuoso.dev/virtuoso-api-reference/
+     */
+    virtuosoProps?: VirtuosoProps<IPickerListItem, unknown>;
+}

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

@@ -17,11 +17,11 @@ export interface IPopoverProps {
     /**
      * Optional handler called on tooltip hide
      */
-    onClose?: () => void;
+    onClose?: (event?: Event) => void;
     /**
      * Optional handler called on tooltip show
      */
-    onOpen?: () => void;
+    onOpen?: (event?: Event) => void;
     /**
      * Set popover visibility
      */

package/dist/components/Tag/Tag.d.ts

@@ -23,7 +23,7 @@ export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * The event handler for close icon click
      */
-    onRemove?(): void;
+    onRemove?(e: React.MouseEvent): void;
     /**
      * React node element to show on the left
      */