@wavv/ui 1.6.5 → 1.7.0-beta.1

package/build/cjs/types/components/Spinner.d.ts

@@ -10,6 +10,8 @@ type SpinnerProps = {
     center?: boolean;
     /** If center positioned, adds a background overlay behind the spinner */
     background?: string | boolean;
+    /** If center positioned, specifies the zIndex of the spinner */
+    zIndex?: number;
 } & Margin & Position;
-declare const Spinner: ({ size, color, center, background, margin, marginTop, marginBottom, marginRight, marginLeft, position, top, bottom, right, left, ...props }: SpinnerProps) => JSX.Element;
+declare const Spinner: ({ size, color, center, background, zIndex, margin, marginTop, marginBottom, marginRight, marginLeft, position, top, bottom, right, left, ...props }: SpinnerProps) => JSX.Element;
 export default Spinner;

package/build/cjs/types/components/Tooltip.d.ts

@@ -1,28 +1,21 @@
 import { ReactNode } from 'react';
-import { ThemeProp } from './types';
-type Position = 'top' | 'bottom' | 'right' | 'left' | 'top left' | 'bottom left' | 'top right' | 'bottom right';
+import type { ThemeProp } from './types';
+type Side = 'top' | 'bottom' | 'right' | 'left';
+type Top = 'top center' | 'top left' | 'top right';
+type Bottom = 'bottom center' | 'bottom left' | 'bottom right';
+type Left = 'left center' | 'left top' | 'left bottom';
+type Right = 'right center' | 'right top' | 'right bottom';
+type Position = Side | Top | Bottom | Left | Right;
 export type TooltipProps = {
     children?: ReactNode;
     /** The element that will trigger the opening of the Tooltip */
     trigger: ReactNode;
-    /** Sets the instigator of the Tooltip opening */
-    on?: 'hover' | 'click';
     /** The text content of the Tooltip */
     content?: string;
-    /** The style prop of the Tooltip container */
-    style?: {
-        [key: string]: string | number;
-    };
     /** The position of the Tooltip body and arrow in relation to the trigger */
     position?: Position;
-    /** Offsets the vertical position of the Tooltip */
-    offsetY?: number;
-    /** Offsets the horizontal position of the Tooltip arrow */
-    offsetArrowX?: number;
-    /** Offsets the horizontal position of the Tooltip */
-    offsetX?: number;
-    /** The width of the Tooltip container */
-    containerWidth?: number | string;
+    /** Offset of the Tooltip from the trigger */
+    offset?: number;
     /** The width of the Tooltip element */
     width?: number | string;
     /** The maxWidth of the Tooltip element */
@@ -33,17 +26,19 @@ export type TooltipProps = {
     disabled?: boolean;
     /** The id of the Tooltip element */
     id?: string;
-    /** The function called after the Tooltip opens */
-    afterShow?: () => void;
-    /** The function called after the Tooltip closes */
-    afterHide?: () => void;
     /** The backgroundColor of the Tooltip element */
     bgColor?: string;
     /** The text color of the Tooltip element */
     color?: string;
+    /** Specify a container element to portal the content into */
+    container?: HTMLElement;
+    /** The function called after the Tooltip opens */
+    afterShow?: () => void;
+    /** The function called after the Tooltip closes */
+    afterHide?: () => void;
 };
 declare const Tooltip: {
-    ({ trigger, on, children, content, style, position, offsetY, offsetArrowX, offsetX, containerWidth, width, maxWidth, textAlign, disabled, id, afterShow, afterHide, bgColor, color, }: TooltipProps): JSX.Element;
+    ({ trigger, children, content, position, offset, width, maxWidth, textAlign, disabled, id, bgColor, color, container, afterShow, afterHide, }: TooltipProps): JSX.Element;
     Header: import("@emotion/styled").StyledComponent<{
         theme?: import("@emotion/react").Theme | undefined;
         as?: import("react").ElementType<any> | undefined;

package/build/cjs/types/components/TooltipLegacy.d.ts

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+import { ThemeProp } from './types';
+type Position = 'top' | 'bottom' | 'right' | 'left' | 'top left' | 'bottom left' | 'top right' | 'bottom right';
+export type TooltipProps = {
+    children?: ReactNode;
+    /** The element that will trigger the opening of the Tooltip */
+    trigger: ReactNode;
+    /** Sets the instigator of the Tooltip opening */
+    on?: 'hover' | 'click';
+    /** The text content of the Tooltip */
+    content?: string;
+    /** The style prop of the Tooltip container */
+    style?: {
+        [key: string]: string | number;
+    };
+    /** The position of the Tooltip body and arrow in relation to the trigger */
+    position?: Position;
+    /** Offsets the vertical position of the Tooltip */
+    offsetY?: number;
+    /** Offsets the horizontal position of the Tooltip arrow */
+    offsetArrowX?: number;
+    /** Offsets the horizontal position of the Tooltip */
+    offsetX?: number;
+    /** The width of the Tooltip container */
+    containerWidth?: number | string;
+    /** The width of the Tooltip element */
+    width?: number | string;
+    /** The maxWidth of the Tooltip element */
+    maxWidth?: number | string;
+    /** The textAlignment of the Tooltip text */
+    textAlign?: 'left' | 'right' | 'center';
+    /** Prevents the Tooltip from opening */
+    disabled?: boolean;
+    /** The id of the Tooltip element */
+    id?: string;
+    /** The function called after the Tooltip opens */
+    afterShow?: () => void;
+    /** The function called after the Tooltip closes */
+    afterHide?: () => void;
+    /** The backgroundColor of the Tooltip element */
+    bgColor?: string;
+    /** The text color of the Tooltip element */
+    color?: string;
+};
+declare const Tooltip: {
+    ({ trigger, on, children, content, style, position, offsetY, offsetArrowX, offsetX, containerWidth, width, maxWidth, textAlign, disabled, id, afterShow, afterHide, bgColor, color, }: TooltipProps): JSX.Element;
+    Header: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Body: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+};
+export default Tooltip;

package/build/cjs/types/index.d.ts

@@ -38,6 +38,7 @@ export { default as TransferList } from './components/TransferList';
 export { default as Table } from './components/Table';
 export { default as Toggle } from './components/Toggle';
 export { default as Tooltip } from './components/Tooltip';
+export { default as TooltipLegacy } from './components/TooltipLegacy';
 export { default as theme } from './theme';
 export type { ITheme, ThemeProp } from './theme/ThemeTypes';
 export type { IconNames } from './components/Icon/icons';
@@ -53,4 +54,5 @@ export { default as useConfirm } from './hooks/useConfirm';
 export { default as useElementObserver } from './hooks/useElementObserver';
 export { default as formatDate } from './utils/formatDate';
 export { default as copyToClipboard } from './utils/copyToClipboard';
+export { default as numberWithCommas } from './utils/numberWithCommas';
 export { widthHeightProps, paddingProps, marginProps, positionProps } from './components/helpers/styledProps';

package/build/cjs/types/utils/index.d.ts

@@ -2,3 +2,4 @@ export { default as chunk } from './chunk';
 export { default as range } from './range';
 export { default as formatDate } from './formatDate';
 export { default as copyToClipboard } from './copyToClipboard';
+export { default as numberWithCommas } from './numberWithCommas';

package/build/cjs/types/utils/numberWithCommas.d.ts

@@ -0,0 +1,2 @@
+declare const numberWithCommas: (number: number) => string;
+export default numberWithCommas;