@livechat/design-system-react-components 2.12.0 → 2.14.0

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

@@ -1,3 +1,2 @@
 export { ActionMenu } from './ActionMenu';
-export { ActionMenuItem } from './ActionMenuItem';
 export type { IActionMenuOption } from './types';

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

@@ -64,17 +64,3 @@ export interface IActionMenuProps extends ComponentCoreProps {
      */
     footer?: React.ReactNode;
 }
-export interface ActionMenuItemProps {
-    /**
-     * Renders given element on the left of element
-     */
-    leftNode?: React.ReactNode;
-    /**
-     * Renders given element on the right of element
-     */
-    rightNode?: React.ReactNode;
-    /**
-     * Specify the kind of menu item
-     */
-    kind?: 'warning' | undefined;
-}

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

@@ -1,4 +1,3 @@
-import { default as ReactDayPicker } from 'react-day-picker';
 import { IDatePickerProps } from './types';
 import * as React from 'react';
-export declare const DatePicker: React.ForwardRefExoticComponent<IDatePickerProps & React.RefAttributes<ReactDayPicker>>;
+export declare const DatePicker: React.FC<IDatePickerProps>;

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

@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
 import { IRangeDatePickerProps } from './types';
 
 export declare const RangeDatePicker: {
-    ({ options, initialSelectedItemKey, initialFromDate, initialToDate, toMonth, onChange, children, }: IRangeDatePickerProps): ReactElement;
+    ({ options, initialSelectedItemKey, initialFromDate, initialToDate, toMonth, onChange, onSelect, children, }: IRangeDatePickerProps): ReactElement;
     defaultProps: {
         options: {
             id: string;

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

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

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

@@ -1,5 +1,3 @@
-import { Modifiers } from 'react-day-picker';
-import { ClassNames } from 'react-day-picker/types/ClassNames';
 import { IRangeDatePickerProps, IRangeDatePickerState, IRangeDatePickerOption } from './types';
 
 export declare const isDateWithinRange: (date: Date, range: {
@@ -7,11 +5,6 @@ export declare const isDateWithinRange: (date: Date, range: {
     to?: Date;
 }) => boolean;
 export declare const calculateDatePickerMonth: (initialFromDate?: Date, initialToDate?: Date, toMonth?: Date) => Date;
-export declare const getRangeDatePickerModifiers: (from?: Date, to?: Date) => Partial<Modifiers>;
 export declare const getSelectedOption: (itemId: string | null, options: IRangeDatePickerOption[]) => IRangeDatePickerOption | undefined;
 export declare const isSelectingFirstDay: (from?: Date, to?: Date) => boolean;
 export declare const getInitialStateFromProps: (props: IRangeDatePickerProps) => Partial<IRangeDatePickerState>;
-export declare const getDatePickerClassNames: (range?: boolean, classNames?: ClassNames) => ClassNames & {
-    start: string;
-    end: string;
-};

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

@@ -1,23 +1,13 @@
-import { Reducer, Ref, ReactElement } from 'react';
-import { default as ReactDayPicker, DayPickerProps } from 'react-day-picker';
-import { ClassNames } from 'react-day-picker/types/ClassNames';
+import { Reducer, ReactElement } from 'react';
+import { DayPickerProps, DateRange } from 'react-day-picker';
 
-export interface IDatePickerProps extends Omit<DayPickerProps, 'todayButton' | 'showWeekNumbers'> {
-    innerRef?: Ref<ReactDayPicker>;
-    range?: boolean;
-}
-export interface IDatePickerNavbarProps {
-    showPreviousButton?: boolean;
-    showNextButton?: boolean;
-    month: Date;
-    fromMonth?: Date;
-    toMonth?: Date;
+export type IDatePickerProps = DayPickerProps;
+export interface IDatePickerCustomNavigationProps {
+    currentMonth: Date;
+    setMonth: (date: Date) => void;
+    startMonth?: Date;
+    endMonth?: Date;
     numberOfMonths?: number;
-    className?: string;
-    classNames: ClassNames;
-    onPreviousClick?: () => void;
-    onNextClick?: () => void;
-    onMonthChange: (newMonth: Date) => void;
 }
 export declare enum RangeDatePickerAction {
     NEW_SELECTED_ITEM = "NEW_SELECTED_ITEM",
@@ -63,20 +53,6 @@ export interface IRangeDatePickerOption {
         to?: Date;
     } | null;
 }
-interface IRangeDatePickerChildrenPayloadDatePicker {
-    modifiers?: DayPickerProps['modifiers'];
-    initialMonth?: Date;
-    month: Date;
-    range?: boolean;
-    numberOfMonths: number;
-    fromMonth?: Date;
-    toMonth?: Date;
-    selectedDays?: DayPickerProps['selectedDays'];
-    disabledDays?: DayPickerProps['disabledDays'];
-    onDayMouseEnter: DayPickerProps['onDayMouseEnter'];
-    onDayClick(day: Date): void;
-    onMonthChange(month: Date): void;
-}
 export interface IRangeDatePickerChildrenPayload {
     select: {
         selected: string | number;
@@ -86,7 +62,7 @@ export interface IRangeDatePickerChildrenPayload {
         fromDate?: Date;
         toDate?: Date;
     };
-    datepicker: IRangeDatePickerChildrenPayloadDatePicker;
+    datepicker: DayPickerProps;
     selectedOption?: IRangeDatePickerOption;
 }
 export interface IRangeDatePickerProps {
@@ -96,6 +72,6 @@ export interface IRangeDatePickerProps {
     initialToDate?: Date;
     toMonth?: Date;
     onChange: (selected: IRangeDatePickerOption | null) => void;
+    onSelect?: (selected: DateRange | null) => void;
     children(payload: IRangeDatePickerChildrenPayload): ReactElement;
 }
-export {};

package/dist/components/ListItem/ListItem.d.ts

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from 'react';
+import { ListItemProps } from './types';
+
+export declare const ListItem: FC<PropsWithChildren<ListItemProps>>;
+/**
+ * @deprecated Use `ListItem` instead. This will be removed in a future release.
+ */
+export declare const ActionMenuItem: FC<PropsWithChildren<ListItemProps>>;

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

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

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

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+
+export interface ListItemProps {
+    /**
+     * Renders given element on the left of element
+     */
+    leftNode?: ReactNode;
+    /**
+     * Renders given element on the right of element
+     */
+    rightNode?: ReactNode;
+    /**
+     * Specify the kind of menu item
+     */
+    kind?: 'warning' | undefined;
+}

package/dist/components/OverflowTooltipText/OverflowTooltipText.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { OverflowTooltipTextProps } from './types';
+
+export declare const OverflowTooltipText: FC<OverflowTooltipTextProps>;

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

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

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

@@ -0,0 +1,3 @@
+export interface OverflowTooltipTextProps {
+    text: string;
+}

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

@@ -1,5 +1,5 @@
 import { OffsetOptions } from '@floating-ui/core';
-import { Placement, UseClickProps, UseDismissProps, FlipOptions, Strategy } from '@floating-ui/react';
+import { Placement, UseClickProps, UseDismissProps, FlipOptions, Strategy, UseTransitionStylesProps } from '@floating-ui/react';
 import * as React from 'react';
 export interface IPopoverProps {
     children?: React.ReactNode;
@@ -62,4 +62,10 @@ export interface IPopoverProps {
      * https://floating-ui.com/docs/usefloating#strategy
      */
     floatingStrategy?: Strategy;
+    /**
+     * Options to define or customize the transition styles for the popover's appearance and disappearance.
+     * Uses the default transition styles if not specified.
+     * @see https://floating-ui.com/docs/usetransition
+     */
+    transitionOptions?: UseTransitionStylesProps;
 }

package/dist/hooks/index.d.ts

@@ -2,3 +2,5 @@ export { useAnimations } from './useAnimations';
 export { useHeightResizer } from './useHeightResizer';
 export { useMobileViewDetector } from './useMobileViewDetector';
 export { useInteractive } from './useInteractive';
+export { useOnHover } from './useOnHover';
+export { useIsOverflow } from './useIsOverflow';

package/dist/hooks/types.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export type NODE = HTMLDivElement | null;
+export type NODE = HTMLElement | null;
 export type CALLBACK = (newSize: DOMRectReadOnly) => void;
 export interface IUseHeightResizer {
     size: number;
@@ -18,3 +18,8 @@ export interface UseInteractiveProps {
 export interface IUseInteractive {
     handleInteractiveClick: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 }
+export interface IUseOnHover {
+    isHovered: boolean;
+    handleMouseOver: () => void;
+    handleMouseOut: () => void;
+}

package/dist/hooks/useIsOverflow.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from 'react';
+
+export declare const useIsOverflow: <T extends HTMLElement>(ref: RefObject<T>) => boolean;

package/dist/hooks/useOnHover.d.ts

@@ -0,0 +1,3 @@
+import { IUseOnHover } from './types';
+
+export declare const useOnHover: (initialState?: boolean) => IUseOnHover;