@livechat/design-system-react-components 1.16.4 → 1.16.6

package/README.md

@@ -0,0 +1,82 @@
+<h1 align="center">
+  <img src="./../../docs/assets/logo.png" alt="livechat design-system logo" /><br />
+  LiveChat Design System React Components
+</h1>
+
+<p align="center">
+  <a href="https://www.npmjs.com/@livechat/design-system-react-components">
+    <img alt="npm version react-components" src="https://img.shields.io/npm/v/@livechat/design-system-react-components.svg?label=react-components">
+  </a>
+  <a href="https://design.livechat.com/">
+    <img src="https://img.shields.io/static/v1?label=documentation&message=storybook&color=ff4685">
+  </a>
+  <a href="https://github.com/livechat/design-system/actions/workflows/tests.yml">
+    <img src="https://github.com/livechat/design-system/actions/workflows/tests.yml/badge.svg" alt="Workflow status badge" loading="lazy">
+  </a>
+</p>
+
+This package contains a library of reusable React components designed to be used in various projects. These components are the building blocks of our design system and can be easily integrated into your applications.
+
+
+## Installation
+
+Run the following command using [npm](https://www.npmjs.com/) (or with you other favorite package manager, eg. [yarn](https://yarnpkg.com/)):
+
+```
+npm install @livechat/design-system-react-components @livechat/design-system-icons --save
+```
+
+## Basic usage
+
+It is required to import the `CSS` directly into your project so it could be applied to components:
+
+```js
+import '@livechat/design-system-react-components/dist/style.css';
+```
+
+You can import components directly from the npm package:
+
+```jsx
+import { Button } from '@livechat/design-system-react-components';
+```
+
+In case of icons there is a separate package (`@livechat/design-system-icons`) to be used in conjunction:
+
+```jsx
+import { Edit } from '@livechat/design-system-icons';
+import { Icon } from '@livechat/design-system-react-components';
+
+<Icon source={Edit} kind="primary" />;
+```
+
+## Documentation
+
+At this stage of the project we consider Storybook and Figma as parts of our documentation ecosystem.
+
+[Storybook](https://design.livechat.com/) - includes design system foundations, describes components API and allows to familiarize with the thier capabilities
+[Figma](https://www.figma.com/file/2pFu80PXO5A2tfyrAGnx91/Product-Components) - it's not an official documentation from design perspective but we follow a simple rule of working in public
+
+
+### Development
+
+Required version of `node.js` is `16.13.2`.
+
+If you're a [volta](https://volta.sh/) user, the project maintains node version entry within `package.json`.
+
+You should start with installing dependencies:
+
+```
+npm install
+```
+
+After that just execute the `start` command. It will build all necessary packages in `watch` mode. `Storybook` should start automatically (if not - try visiting http://localhost:6006).
+
+```
+npm start
+```
+
+If `Storybook` is not enough, you can additionaly run `npm start:example` which will run `example-react` package in `watch` mode. `example-react` is a simple [React](https://reactjs.org/) app based on [vite-react boilterplate](https://github.com/vitejs/vite/tree/main/packages/create-vite). It has a direct dependency on `react-components` package, so every change should be reflected in the app via auto-reload.
+
+### Contributing
+
+For the `contribution/testing/releasing` guides please refer to the [main repository](https://github.com/livechat/design-system/) documentation.

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

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

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

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

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ButtonProps } from './Button';
 import { ButtonKind, ButtonSize } from './types';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, {
     kind?: ButtonKind | undefined;
     size?: ButtonSize | undefined;
     loading?: boolean | undefined;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Story } from '@storybook/react';
 import { CardProps } from '../Card';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, CardProps & {
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, CardProps & {
     children?: React.ReactNode;
 }>;
 export default _default;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { CheckboxProps } from './Checkbox';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;
 export declare const Checkbox: {
     (args: CheckboxProps): React.ReactElement;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IDatePickerProps } from './types';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, IDatePickerProps & React.RefAttributes<import("react-day-picker").default>>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, IDatePickerProps & React.RefAttributes<import("react-day-picker").default>>;
 export default _default;
-export declare const DatePicker: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IDatePickerProps>;
-export declare const DatePickerWithDatesBetweenTwoMonths: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IDatePickerProps>;
-export declare const DatePickerWithCustomFirstDayOfWeek: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IDatePickerProps>;
+export declare const DatePicker: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, IDatePickerProps>;
+export declare const DatePickerWithDatesBetweenTwoMonths: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, IDatePickerProps>;
+export declare const DatePickerWithCustomFirstDayOfWeek: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, IDatePickerProps>;

package/dist/components/DatePicker/RangeDatePicker.stories.d.ts

@@ -1,4 +1,4 @@
 import { IRangeDatePickerProps } from './types';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, IRangeDatePickerProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, IRangeDatePickerProps>;
 export default _default;
-export declare const RangeDatePicker: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IRangeDatePickerProps>;
+export declare const RangeDatePicker: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, IRangeDatePickerProps>;

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

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

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { FileUploadProgressProps } from './FileUploadProgress';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, FileUploadProgressProps & React.RefAttributes<HTMLInputElement>>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, FileUploadProgressProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;
-export declare const FileUploadProgress: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, FileUploadProgressProps>;
-export declare const FileUploadProgressWithIcon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, FileUploadProgressProps>;
+export declare const FileUploadProgress: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, FileUploadProgressProps>;
+export declare const FileUploadProgressWithIcon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, FileUploadProgressProps>;
 export declare const FileUploadProgressStates: React.FC;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Story } from '@storybook/react';
 import { FormProps } from '../Form';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, FormProps & {
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, FormProps & {
     children?: React.ReactNode;
 }>;
 export default _default;

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { FormFieldProps } from './FormField';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, FormFieldProps & {
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, FormFieldProps & {
     children?: React.ReactNode;
 }>;
 export default _default;
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, FormFieldProps>;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, FormFieldProps>;
 export declare const Examples: () => React.ReactElement;
-export declare const TextFieldWithError: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, FormFieldProps>;
+export declare const TextFieldWithError: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, FormFieldProps>;

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

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

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

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

package/dist/components/Icon/IconsShowcase/IconsShowcase.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { IconSource } from '../index';
+import { IconName } from './types';
+export type IconsMap = {
+    [key: string]: IconSource;
+};
+interface IProps {
+    data: IconName[];
+}
+export declare const IconsShowcase: React.FC<IProps>;
+export {};

package/dist/components/Icon/IconsShowcase/constans.d.ts

@@ -0,0 +1,2 @@
+import { IconGroup, IconName } from './types';
+export declare const IconsData: Record<IconName, IconGroup>;

package/dist/components/Icon/IconsShowcase/helpers.d.ts

@@ -0,0 +1,2 @@
+import { IconGroup, IconName } from './types';
+export declare const getIconsByGroup: (group: IconGroup) => IconName[];

package/dist/components/Icon/IconsShowcase/types.d.ts

@@ -0,0 +1,9 @@
+import * as DSIcons from '@livechat/design-system-icons';
+export type IconName = keyof typeof DSIcons;
+export declare enum IconGroup {
+    Arrows = 0,
+    Text = 1,
+    FileType = 2,
+    General = 3,
+    Brands = 4
+}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Story } from '@storybook/react';
 import { InputProps } from './Input';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, InputProps & React.RefAttributes<HTMLInputElement>>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, InputProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;
 export declare const Default: Story<InputProps>;
 export declare const Sizes: () => React.ReactElement;

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

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

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

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

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

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { ModalProps, ModalPortalProps } from './index';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ModalProps & {
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, ModalProps & {
     children?: React.ReactNode;
 }>;
 export default _default;
-export declare const Modal: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ModalProps>;
-export declare const ModalWithCustomHeader: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ModalProps>;
-export declare const ModalWithLabeledHeader: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ModalProps>;
-export declare const ModalWithFullSpaceContent: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ModalProps>;
+export declare const Modal: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, ModalProps>;
+export declare const ModalWithCustomHeader: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, ModalProps>;
+export declare const ModalWithLabeledHeader: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, ModalProps>;
+export declare const ModalWithFullSpaceContent: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, ModalProps>;
 export declare const ModalPortal: {
     ({ children, ...args }: ModalPortalProps): React.ReactElement;
     args: ModalPortalProps;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { NumericInputProps } from './NumericInput';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, React.InputHTMLAttributes<HTMLInputElement> & {
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, React.InputHTMLAttributes<HTMLInputElement> & {
     className?: string | undefined;
     error?: string | undefined;
     value: string;
@@ -13,8 +13,8 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
     children?: React.ReactNode;
 }>;
 export default _default;
-export declare const NumericInput: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, NumericInputProps>;
-export declare const NumericInputWithMinAndMaxValues: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, NumericInputProps>;
-export declare const NumericInputWithNoControls: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, NumericInputProps>;
-export declare const NumericInputWithDisabled: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, NumericInputProps>;
-export declare const NumericInputWithError: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, NumericInputProps>;
+export declare const NumericInput: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, NumericInputProps>;
+export declare const NumericInputWithMinAndMaxValues: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, NumericInputProps>;
+export declare const NumericInputWithNoControls: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, NumericInputProps>;
+export declare const NumericInputWithDisabled: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, NumericInputProps>;
+export declare const NumericInputWithError: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, NumericInputProps>;

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { IPickerProps } from './types';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, IPickerProps & {
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, IPickerProps & {
     children?: React.ReactNode;
 }>;
 export default _default;
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IPickerProps>;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, IPickerProps>;
 export declare const States: () => React.ReactElement;
 export declare const PickerWithGroupedOptions: () => React.ReactElement;
 export declare const PickerWithMoreOptions: () => React.ReactElement;

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

@@ -1,3 +1,4 @@
 import { IPickerListItem } from './types';
 export declare const findIndicesWhere: <T>(array: T[], predicate: (item: T) => boolean) => number[];
 export declare const getNormalizedItems: (items: IPickerListItem[]) => IPickerListItem[];
+export declare const getPickerListItemKey: ({ key }: IPickerListItem) => string;

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { FloatingContext, Placement, Strategy, UseClickProps, UseDismissProps } from '@floating-ui/react';
+import { IPickerListItem } from '../types';
+interface UseFloatingPickerProps {
+    disabled?: boolean;
+    items: IPickerListItem[];
+    placement?: Placement;
+    floatingStrategy?: Strategy;
+    useClickHookProps?: UseClickProps;
+    useDismissHookProps?: UseDismissProps;
+    openedOnInit: boolean;
+    isOpen?: boolean;
+    onVisibilityChange?: (open: boolean, event?: Event | undefined) => void;
+}
+interface IUseFloatingPicker {
+    getReferenceProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    setReference: (element: HTMLElement | null) => void;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    floatingStyles: React.CSSProperties;
+    isPositioned: boolean;
+    context: FloatingContext<HTMLButtonElement>;
+    nodeId: string;
+    setFloating: (node: HTMLElement | null) => void;
+    activeIndex: number | null;
+    listElementsRef: React.MutableRefObject<(HTMLElement | null)[]>;
+    virtualItemRef: React.RefObject<HTMLDivElement>;
+    maxHeight: number;
+    pointer: boolean;
+    setPointer: (pointer: boolean) => void;
+}
+export declare const useFloatingPicker: ({ disabled, items, placement, floatingStrategy, useDismissHookProps, useClickHookProps, isOpen, onVisibilityChange, }: UseFloatingPickerProps) => IUseFloatingPicker;
+export {};

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

@@ -0,0 +1,20 @@
+import { IPickerListItem } from '../types';
+interface UsePickerItemsProps {
+    selected?: IPickerListItem[] | null;
+    options: IPickerListItem[];
+    type: 'single' | 'multi';
+    selectAllOptionText?: string;
+    onSelect: (items: IPickerListItem[] | null) => void;
+    setOpen: (isOpen: boolean) => void;
+}
+interface IUsePickerItems {
+    selectedKeys: string[];
+    items: IPickerListItem[];
+    searchPhrase: string;
+    handleSelect: (key: string) => void;
+    handleOnFilter: (text: string) => void;
+    handleItemRemove: (itemKey: string) => void;
+    handleClear: () => void;
+}
+export declare const usePickerItems: ({ selected, options, type, selectAllOptionText, onSelect, setOpen, }: UsePickerItemsProps) => IUsePickerItems;
+export {};

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

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { Strategy, UseClickProps, UseDismissProps } from '@floating-ui/react';
+import { Placement, Strategy, UseClickProps, UseDismissProps } from '@floating-ui/react';
 import { VirtuosoProps } from 'react-virtuoso';
 import { Size } from '../../utils';
 import { ComponentCoreProps } from '../../utils/types';
@@ -80,6 +80,18 @@ export interface IPickerProps extends ComponentCoreProps {
      * Set to hide clear selection button
      */
     hideClearButton?: boolean;
+    /**
+     * Set picker visibility
+     */
+    isVisible?: boolean;
+    /**
+     * Optional handler called on picker list hide
+     */
+    onClose?: (event?: Event) => void;
+    /**
+     * Optional handler called on picker list show
+     */
+    onOpen?: (event?: Event) => void;
     /**
      * Will open picker on component initialization
      */
@@ -92,6 +104,10 @@ export interface IPickerProps extends ComponentCoreProps {
      * Clears the search input after item select
      */
     clearSearchAfterSelection?: boolean;
+    /**
+     * The popover placement related to the trigger element
+     */
+    placement?: Placement;
     /**
      * Floating strategy for the picker component from @floating-ui/react
      */

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { StoryFn } from '@storybook/react';
 import type { IPopoverProps } from './types';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, IPopoverProps & {
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, IPopoverProps & {
     children?: React.ReactNode;
 }>;
 export default _default;

package/dist/components/Progress/ProgressBar.stories.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ProgressBarProps } from './ProgressBar';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ProgressBarProps & React.RefAttributes<HTMLInputElement>>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, ProgressBarProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;
 export declare const ProgressBar: {
     (args: ProgressBarProps): React.ReactElement;

package/dist/components/Progress/ProgressCircle.stories.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ProgressCircleProps } from './ProgressCircle';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ProgressCircleProps & React.RefAttributes<HTMLInputElement>>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, ProgressCircleProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;
 export declare const ProgressCircle: {
     (args: ProgressCircleProps): React.ReactElement;

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { PromoBannerProps } from './PromoBanner';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, PromoBannerProps & {
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, PromoBannerProps & {
     children?: React.ReactNode;
 }>;
 export default _default;
-export declare const PromoBanner: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PromoBannerProps>;
-export declare const WithButtons: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PromoBannerProps>;
-export declare const WithImage: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PromoBannerProps>;
-export declare const WithClose: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PromoBannerProps>;
-export declare const WithLight: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PromoBannerProps>;
+export declare const PromoBanner: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, PromoBannerProps>;
+export declare const WithButtons: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, PromoBannerProps>;
+export declare const WithImage: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, PromoBannerProps>;
+export declare const WithClose: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, PromoBannerProps>;
+export declare const WithLight: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, PromoBannerProps>;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { RadioButtonProps } from './RadioButton';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;
 export declare const RadioButton: {
     ({ children, ...args }: RadioButtonProps): React.ReactElement;

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { ISearchInputProps } from './Search';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ISearchInputProps & {
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, ISearchInputProps & {
     children?: React.ReactNode;
 }>;
 export default _default;
-export declare const Search: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ISearchInputProps>;
+export declare const Search: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, ISearchInputProps>;
 export declare const States: {
     (args: ISearchInputProps): React.ReactElement;
     args: {};

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Story } from '@storybook/react';
 import { SegmentedControlProps } from './SegmentedControl';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, SegmentedControlProps & {
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, SegmentedControlProps & {
     children?: React.ReactNode;
 }>;
 export default _default;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Story } from '@storybook/react';
 import { SwitchProps } from './Switch';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, SwitchProps & {
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, SwitchProps & {
     children?: React.ReactNode;
 }>;
 export default _default;

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

@@ -1,24 +1,6 @@
 import * as React from 'react';
 import { TabProps } from './Tab';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, React.AnchorHTMLAttributes<HTMLAnchorElement> & {
-    href: string;
-} & {
-    count?: number | undefined;
-    isSelected?: boolean | undefined;
-    asBadge?: boolean | undefined;
-    size?: import("../..").Size | undefined;
-} & {
-    children?: React.ReactNode;
-}> | import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    href?: undefined;
-} & {
-    count?: number | undefined;
-    isSelected?: boolean | undefined;
-    asBadge?: boolean | undefined;
-    size?: import("../..").Size | undefined;
-} & {
-    children?: React.ReactNode;
-}>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, React.PropsWithChildren<React.PropsWithChildren<TabProps>>>;
 export default _default;
 type ITabArgs = TabProps;
 export declare const Tab: {

package/dist/components/Tab/TabsWrapper.stories.d.ts

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

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

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

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Story } from '@storybook/react';
 import { TagInputProps, EmailTagInputProps } from './index';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, TagInputProps & {
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, TagInputProps & {
     children?: React.ReactNode;
 }>;
 export default _default;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Story } from '@storybook/react';
 import { TextareaProps } from './Textarea';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export default _default;
 export declare const Default: Story<TextareaProps>;
 export declare const States: () => React.ReactElement;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Story } from '@storybook/react';
 import { ToastProps } from './Toast';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ToastProps & {
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, ToastProps & {
     children?: React.ReactNode;
 }>;
 export default _default;