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

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/Button/Button.d.ts

@@ -29,6 +29,10 @@ export type ButtonProps = {
      * Specify the place to render element given in `icon` prop
      */
     iconPosition?: 'left' | 'right';
+    /**
+     * Set to enable animation that will show label on button hover if icon is present
+     */
+    animatedLabel?: boolean;
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & React.AnchorHTMLAttributes<HTMLAnchorElement>;
 export declare const Button: React.ForwardRefExoticComponent<{
     /**
@@ -59,4 +63,8 @@ export declare const Button: React.ForwardRefExoticComponent<{
      * Specify the place to render element given in `icon` prop
      */
     iconPosition?: "left" | "right" | undefined;
+    /**
+     * Set to enable animation that will show label on button hover if icon is present
+     */
+    animatedLabel?: boolean | undefined;
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;

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

@@ -1,3 +1,6 @@
 import { ButtonKind } from './types';
-
+import * as React from 'react';
 export declare const getSpinnerColors: (kind: ButtonKind) => Record<string, string> | undefined;
+export declare const handleMouseInteraction: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>, internalHandler: () => void, userHandler?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>) => void;
+export declare const handleKeyboardInteraction: (event: React.FocusEvent<HTMLButtonElement> | React.FocusEvent<HTMLAnchorElement>, internalHandler: () => void, userHandler?: React.FocusEventHandler<HTMLButtonElement | HTMLAnchorElement>) => void;
+export declare const buttonRef: (node: HTMLSpanElement | null, internalHandler: (width: number) => void) => void;

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

@@ -1,2 +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/hooks/useHeightResizer.d.ts

@@ -1,7 +1,3 @@
-type NODE = HTMLDivElement | null;
-interface IUseResizer {
-    size: number;
-    handleResize: (node: NODE) => void;
-}
-export declare const useHeightResizer: () => IUseResizer;
-export {};
+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;
+};