@livechat/design-system-react-components 1.35.0 → 1.36.0

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { AutoCompleteProps } from './types';
+/**
+ * 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,6 @@
+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,4 @@
+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 * as React from 'react';
+import { Placement, Strategy } from '@floating-ui/react';
+import { InputProps } from '../Input';
+import { IPickerListItem } from '../Picker';
+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/Picker/components/PickerList.d.ts

@@ -17,6 +17,7 @@ export interface IPickerListProps {
     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/types.d.ts

@@ -8,8 +8,8 @@ export interface IPickerListItem {
     key: string;
     name: string;
     customElement?: {
-        listItemBody: ReactElement;
-        selectedItemBody: ReactElement;
+        listItemBody?: ReactElement;
+        selectedItemBody?: ReactElement;
     };
     groupHeader?: boolean;
     disabled?: boolean;