@wavv/ui 1.6.6 → 1.7.0-beta.1

package/build/esm/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/esm/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/esm/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';

package/build/index.d.ts

@@ -522,7 +522,7 @@ type Padding = {
     paddingRight?: number | string;
     paddingLeft?: number | string;
 };
-type Position$1 = {
+type Position$2 = {
     position?: 'static' | 'relative' | 'absolute' | 'sticky' | 'fixed';
     top?: number | string;
     bottom?: number | string;
@@ -1117,29 +1117,22 @@ type ButtonComponentProps = {
     joined?: never;
 } & BasicButtonProps & DropdownProps$2 & Margin;
 
-type Position = 'top' | 'bottom' | 'right' | 'left' | 'top left' | 'bottom left' | 'top right' | 'bottom right';
-type TooltipProps = {
+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$1 = Side | Top | Bottom | Left | Right;
+type TooltipProps$1 = {
     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;
+    position?: Position$1;
+    /** Offset of the Tooltip from the trigger */
+    offset?: number;
     /** The width of the Tooltip element */
     width?: number | string;
     /** The maxWidth of the Tooltip element */
@@ -1150,17 +1143,19 @@ 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;
+declare const Tooltip$1: {
+    ({ trigger, children, content, position, offset, width, maxWidth, textAlign, disabled, id, bgColor, color, container, afterShow, afterHide, }: TooltipProps$1): JSX.Element;
     Header: _emotion_styled.StyledComponent<{
         theme?: _emotion_react.Theme | undefined;
         as?: React.ElementType<any> | undefined;
@@ -1175,7 +1170,7 @@ declare const Tooltip: {
 declare const Button: {
     (props: ButtonComponentProps): JSX.Element;
     Group: ({ children, disabled, outline, size, small, large, secondary, negative, positive, caution, collapse, ...props }: {
-        children: (React.ReactElement<BasicButtonProps | ButtonComponentProps, string | React.JSXElementConstructor<any>> | React.ReactElement<TooltipProps, string | React.JSXElementConstructor<any>>) | (React.ReactElement<BasicButtonProps | ButtonComponentProps, string | React.JSXElementConstructor<any>> | React.ReactElement<TooltipProps, string | React.JSXElementConstructor<any>>)[];
+        children: (React.ReactElement<BasicButtonProps | ButtonComponentProps, string | React.JSXElementConstructor<any>> | React.ReactElement<TooltipProps$1, string | React.JSXElementConstructor<any>>) | (React.ReactElement<BasicButtonProps | ButtonComponentProps, string | React.JSXElementConstructor<any>> | React.ReactElement<TooltipProps$1, string | React.JSXElementConstructor<any>>)[];
         disabled?: boolean | undefined;
         size?: "small" | "large" | "medium" | undefined;
         small?: boolean | undefined;
@@ -1330,7 +1325,7 @@ type IconProps = {
 } & ConditionalProps & MarginPadding & As & DivAttributes;
 declare const Icon: ({ name, svg, size, width, height, color, hoverColor, pointer, inheritColor, style, onClick, ...props }: IconProps) => JSX.Element | null;
 
-type IconType = IconNames | IconProps | ReactElement<IconProps> | ReactElement<TooltipProps>;
+type IconType = IconNames | IconProps | ReactElement<IconProps> | ReactElement<TooltipProps$1>;
 
 type OnClear = () => void;
 type OnChangeDefault = (event: ChangeEvent<HTMLInputElement>) => void;
@@ -2095,7 +2090,7 @@ declare const Notification: _emotion_styled.StyledComponent<{
     size?: string | number | undefined;
     /** Styles the dot to accommodate containing a number */
     number?: boolean | undefined;
-} & ThemeProp & Margin & Position$1, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & ThemeProp & Margin & Position$2, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 
 type OptionsProps = {
     children: ReactNode;
@@ -2246,7 +2241,7 @@ type SpinnerProps = {
     background?: string | boolean;
     /** If center positioned, specifies the zIndex of the spinner */
     zIndex?: number;
-} & Margin & Position$1;
+} & Margin & Position$2;
 declare const Spinner: ({ size, color, center, background, zIndex, margin, marginTop, marginBottom, marginRight, marginLeft, position, top, bottom, right, left, ...props }: SpinnerProps) => JSX.Element;
 
 type Color = ColorNames | CSSProperties['color'];
@@ -2354,6 +2349,60 @@ type ToggleProps = {
 } & Margin & As & CheckboxAttributes;
 declare const Toggle: ({ id, label, labelPosition, checked, disabled, onChange, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: ToggleProps) => JSX.Element;
 
+type Position = 'top' | 'bottom' | 'right' | 'left' | 'top left' | 'bottom left' | 'top right' | 'bottom right';
+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: _emotion_styled.StyledComponent<{
+        theme?: _emotion_react.Theme | undefined;
+        as?: React.ElementType<any> | undefined;
+    } & ThemeProp, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Body: _emotion_styled.StyledComponent<{
+        theme?: _emotion_react.Theme | undefined;
+        as?: React.ElementType<any> | undefined;
+    } & ThemeProp, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+};
+
 declare const useEventListener: <T extends Event>(element: MutableRefObject<HTMLElement> | HTMLElement | Document | Window, type: keyof WindowEventMap, listener: (event: T) => void, condition?: boolean, dependencies?: unknown[]) => void;
 
 declare const useOnClickOutside: <T extends HTMLElement>(onClickOutside: () => void, condition?: boolean, exclusions?: string[]) => MutableRefObject<T | null>;
@@ -2442,7 +2491,7 @@ declare const marginProps: ({ margin, marginTop, marginBottom, marginRight, marg
     marginRight: string | number | undefined;
     marginLeft: string | number | undefined;
 };
-declare const positionProps: ({ position, top, bottom, right, left }: Position$1) => {
+declare const positionProps: ({ position, top, bottom, right, left }: Position$2) => {
     position: "static" | "relative" | "absolute" | "sticky" | "fixed" | undefined;
     top: string | number | undefined;
     bottom: string | number | undefined;
@@ -2450,4 +2499,4 @@ declare const positionProps: ({ position, top, bottom, right, left }: Position$1
     left: string | number | undefined;
 };
 
-export { Accordion, As, Audio, AudioRef, BarChart, Button, Calendar, Checkbox, Code, Table$1 as DocTable, DraftEditor, DraftEditorRef, Dropdown, OptionItem as DropdownOption, FlexPosition, Form, Grid, Height, ITheme, Icon, IconNames, ImageViewer, InlineCode, Input, InputRef, _default as InputUtils, Label, LineChart, Margin, MarginPadding, MaxHeight, MaxWidth, MaxWidthHeight, Menu, Message, MessageHr, Modal, MultiSelect, Notification, Options, Padding, Pagination, PieChart, Position$1 as Position, Progress, Radio, ResetStyles, ScrollbarStyles, Slider, Spacer, Spinner, Table, ThemeProp, ToastStyles, Toggle, Tooltip, Action as TransferAction, Item as TransferItem, TransferList, Next as TransferNext, Width, WidthHeight, copyToClipboard, formatDate, marginProps, numberWithCommas, paddingProps, positionProps, theme, useConfirm, useElementObserver, useEventListener, useOnClickOutside, useSelect, useSelectAll, useWindowSize, widthHeightProps };
+export { Accordion, As, Audio, AudioRef, BarChart, Button, Calendar, Checkbox, Code, Table$1 as DocTable, DraftEditor, DraftEditorRef, Dropdown, OptionItem as DropdownOption, FlexPosition, Form, Grid, Height, ITheme, Icon, IconNames, ImageViewer, InlineCode, Input, InputRef, _default as InputUtils, Label, LineChart, Margin, MarginPadding, MaxHeight, MaxWidth, MaxWidthHeight, Menu, Message, MessageHr, Modal, MultiSelect, Notification, Options, Padding, Pagination, PieChart, Position$2 as Position, Progress, Radio, ResetStyles, ScrollbarStyles, Slider, Spacer, Spinner, Table, ThemeProp, ToastStyles, Toggle, Tooltip$1 as Tooltip, Tooltip as TooltipLegacy, Action as TransferAction, Item as TransferItem, TransferList, Next as TransferNext, Width, WidthHeight, copyToClipboard, formatDate, marginProps, numberWithCommas, paddingProps, positionProps, theme, useConfirm, useElementObserver, useEventListener, useOnClickOutside, useSelect, useSelectAll, useWindowSize, widthHeightProps };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wavv/ui",
-	"version": "1.6.6",
+	"version": "1.7.0-beta.1",
 	"files": [
 		"build/**/*"
 	],
@@ -21,6 +21,7 @@
 	"dependencies": {
 		"@emotion/styled": "^11.10.6",
 		"@radix-ui/react-accordion": "^1.1.1",
+		"@radix-ui/react-tooltip": "^1.0.5",
 		"@react-hook/resize-observer": "^1.2.6",
 		"date-fns": "^2.29.3",
 		"draft-js": "^0.11.7",