linear-react-components-ui 1.1.22 → 1.1.24-beta.0

package/lib/menus/sidenav/NavMenuItem.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _withTooltip = _interopRequireDefault(require("../../internals/withTooltip"));
 var _icons = _interopRequireDefault(require("../../icons"));
+var _tooltip = require("../../tooltip");
 var _MenuLink = _interopRequireDefault(require("./MenuLink"));
 var _helpers = require("./helpers");
 var _permissionValidations = require("../../permissionValidations");
@@ -26,11 +26,14 @@ const NavMenuItem = props => {
     maxWidth = '90%',
     minWidth = 500,
     columnsQtty,
-    targetRef,
     disableDefaultStyle = false,
     showDropdownOnClick = false,
     style,
-    customClassForDropdown
+    customClassForDropdown,
+    tooltip,
+    tooltipPosition,
+    tooltipWidth,
+    errorMessage
   } = props;
   const [showSubMenu, setShowSubMenu] = (0, _react.useState)(false);
   const [targetDimensions, setTargetDimensions] = (0, _react.useState)({});
@@ -93,10 +96,7 @@ const NavMenuItem = props => {
     value: contextValues
   }, /*#__PURE__*/_react.default.createElement("li", {
     style: style,
-    ref: r => {
-      menuItemRef.current = r;
-      if (targetRef) targetRef(r);
-    },
+    ref: menuItemRef,
     className: `item ${url && !disabled && '-withlink'} ${customClass} ${disabled && '-disabled'}`,
     onMouseEnter: onMouseEnter,
     onMouseLeave: () => {
@@ -110,9 +110,7 @@ const NavMenuItem = props => {
     }
   }, /*#__PURE__*/_react.default.createElement(_MenuLink.default, _extends({
     disabled: disabled
-  }, props, {
-    targetRef: null
-  }), /*#__PURE__*/_react.default.createElement(_react.Fragment, null, iconName && /*#__PURE__*/_react.default.createElement(_icons.default, {
+  }, props), /*#__PURE__*/_react.default.createElement(_react.Fragment, null, iconName && /*#__PURE__*/_react.default.createElement(_icons.default, {
     name: iconName,
     size: menuSize === 'small' && 16 || menuSize === 'medium' && 24 || menuSize === 'large' && 32 || 16,
     customClassForContainer: "menuicon-container",
@@ -141,6 +139,12 @@ const NavMenuItem = props => {
     style: {
       gridTemplateColumns: `repeat(${columnsQtty}, 1fr)`
     }
-  }, children))));
+  }, children))), /*#__PURE__*/_react.default.createElement(_tooltip.Tooltip, {
+    targetRef: menuItemRef,
+    text: tooltip,
+    position: tooltipPosition,
+    width: tooltipWidth,
+    textError: errorMessage
+  }));
 };
-var _default = exports.default = (0, _withTooltip.default)(NavMenuItem);
+var _default = exports.default = NavMenuItem;

package/lib/menus/sidenav/NavSubMenuItem.d.ts

@@ -2,10 +2,10 @@ import { INavSubMenuItemProps } from './types.js';
 import 'react';
 import '../../@types/PermissionAttr.js';
 import '../../@types/Size.js';
-import '../../internals/types.js';
-import '../../@types/Position.js';
 import '../../@types/Icon.js';
 import '../../icons/helper.js';
+import '../../tooltip/types.js';
+import '../../@types/Position.js';
 
 declare const NavSubMenuItem: ({ title, url, permissionAttr }: INavSubMenuItemProps) => JSX.Element | null;
 

package/lib/menus/sidenav/helpers.d.ts

@@ -2,10 +2,10 @@ import React__default from 'react';
 import { ISubMenuContext, ISideNavContext } from './types.js';
 import '../../@types/PermissionAttr.js';
 import '../../@types/Size.js';
-import '../../internals/types.js';
-import '../../@types/Position.js';
 import '../../@types/Icon.js';
 import '../../icons/helper.js';
+import '../../tooltip/types.js';
+import '../../@types/Position.js';
 
 declare const getCssClassMenu: (isExpanded?: boolean, size?: string) => string;
 declare const SubMenuContext: React__default.Context<ISubMenuContext>;

package/lib/menus/sidenav/index.d.ts

@@ -6,10 +6,10 @@ import { ISideNavProps } from './types.js';
 import 'react';
 import '../../@types/PermissionAttr.js';
 import '../../@types/Size.js';
-import '../../internals/types.js';
-import '../../@types/Position.js';
 import '../../@types/Icon.js';
 import '../../icons/helper.js';
+import '../../tooltip/types.js';
+import '../../@types/Position.js';
 
 declare const SideNav: (props: ISideNavProps) => JSX.Element;
 

package/lib/menus/sidenav/popup_menu_search/EmptyList.d.ts

@@ -2,10 +2,10 @@ import { IEmptyListProps } from '../types.js';
 import 'react';
 import '../../../@types/PermissionAttr.js';
 import '../../../@types/Size.js';
-import '../../../internals/types.js';
-import '../../../@types/Position.js';
 import '../../../@types/Icon.js';
 import '../../../icons/helper.js';
+import '../../../tooltip/types.js';
+import '../../../@types/Position.js';
 
 declare const EmptyList: ({ info, visible, }: IEmptyListProps) => JSX.Element;
 

package/lib/menus/sidenav/popup_menu_search/index.d.ts

@@ -2,10 +2,10 @@ import React__default from 'react';
 import { IPopupMenuSearchProps } from '../types.js';
 import '../../../@types/PermissionAttr.js';
 import '../../../@types/Size.js';
-import '../../../internals/types.js';
-import '../../../@types/Position.js';
 import '../../../@types/Icon.js';
 import '../../../icons/helper.js';
+import '../../../tooltip/types.js';
+import '../../../@types/Position.js';
 
 declare const PopupMenuSearch: (props: IPopupMenuSearchProps) => React__default.ReactPortal;
 

package/lib/menus/sidenav/types.d.ts

@@ -1,10 +1,10 @@
 import { ReactNode, ReactElement, CSSProperties } from 'react';
 import { PermissionAttr } from '../../@types/PermissionAttr.js';
 import { Size } from '../../@types/Size.js';
-import { WithTooltipProps } from '../../internals/types.js';
 import { IconNames } from '../../@types/Icon.js';
-import '../../@types/Position.js';
+import { ITooltipCommonProps } from '../../tooltip/types.js';
 import '../../icons/helper.js';
+import '../../@types/Position.js';
 
 interface ISideNavProps {
     children: ReactNode;
@@ -30,18 +30,18 @@ interface IMenuItemContent {
     content: string;
     url: string;
 }
-interface IMenuLinkProps extends WithTooltipProps {
+interface IMenuLinkProps extends ITooltipCommonProps {
     children: ReactElement;
     url?: string;
-    targetRef?: ((ref: HTMLAnchorElement | null) => void) | null;
     disabled?: boolean;
+    errorMessage?: string;
 }
 interface INavMenuGroupProps {
     children: ReactNode;
     scrollable?: boolean;
     style?: CSSProperties;
 }
-interface INavMenuItemProps extends WithTooltipProps {
+interface INavMenuItemProps extends ITooltipCommonProps {
     children?: ReactNode;
     title?: string;
     iconName?: IconNames;
@@ -52,11 +52,11 @@ interface INavMenuItemProps extends WithTooltipProps {
     minWidth?: string | number;
     maxWidth?: string | number;
     columnsQtty?: number;
-    targetRef?: (ref: HTMLLIElement | null) => void;
     disableDefaultStyle?: boolean;
     showDropdownOnClick?: boolean;
     style?: CSSProperties;
     customClassForDropdown?: string;
+    errorMessage?: string;
 }
 interface INavSubMenuItemProps {
     title: string;

package/lib/popover/PopoverText.js

@@ -9,11 +9,20 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const PopoverText = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
-    children
+    children,
+    text
   } = _ref;
+  const hintRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, () => hintRef.current, [hintRef.current]);
+  (0, _react.useEffect)(() => {
+    if (hintRef.current && text !== undefined) {
+      hintRef.current.innerHTML = text;
+    }
+  }, [text, hintRef.current]);
   return /*#__PURE__*/_react.default.createElement("p", {
     className: "text",
-    ref: ref
+    ref: hintRef,
+    "data-testid": "popover-text"
   }, children);
 });
 PopoverText.displayName = 'PopoverText';

package/lib/popover/types.d.ts

@@ -10,6 +10,7 @@ interface PopoverTitleProps {
 }
 interface PopoverTextProps {
     children?: ReactNode;
+    text?: string;
 }
 interface IPopoverProps {
     iconName?: IconNames;

package/lib/textContent/index.d.ts

@@ -1,22 +1,17 @@
-import React__default, { MutableRefObject } from 'react';
-import { WithTooltipProps } from '../internals/types.js';
-import '../@types/PermissionAttr.js';
+import React__default from 'react';
+import { ITooltipCommonProps } from '../tooltip/types.js';
 import '../@types/Position.js';
 
-interface TextContentProps extends React__default.HTMLAttributes<HTMLElement>, WithTooltipProps {
+interface TextContentProps extends React__default.HTMLAttributes<HTMLElement>, ITooltipCommonProps {
     as?: 'span' | 'strong' | 'p';
     label?: string | string[];
     styleForLabel?: object;
     labelUppercase?: boolean;
     required?: boolean;
     disabled?: boolean;
-    targetRef?: (ref: HTMLSpanElement | null) => void;
-    labelRef?: MutableRefObject<HTMLSpanElement | null>;
     onHoverLabel?: (e: React__default.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
+    errorMessage?: string;
 }
-declare const _default: {
-    (props: TextContentProps & React__default.RefAttributes<HTMLElement>): JSX.Element;
-    displayName: string;
-};
+declare const TextContent: React__default.ForwardRefExoticComponent<TextContentProps & React__default.RefAttributes<HTMLElement>>;
 
-export { _default as default };
+export { TextContent as default };

package/lib/textContent/index.js

@@ -6,10 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 require("../assets/styles/textContent.scss");
-var _withTooltip = _interopRequireDefault(require("../internals/withTooltip"));
-var _lodash = _interopRequireDefault(require("lodash"));
-const _excluded = ["as", "children", "className", "styleForLabel", "onHoverLabel"];
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _tooltip = require("../tooltip");
+const _excluded = ["as", "children", "className", "styleForLabel", "onHoverLabel", "tooltip", "tooltipPosition", "tooltipWidth", "errorMessage", "labelUppercase"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -21,18 +19,29 @@ const TextContent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       children,
       className,
       styleForLabel,
-      onHoverLabel
+      onHoverLabel,
+      tooltip,
+      tooltipPosition,
+      tooltipWidth,
+      errorMessage,
+      labelUppercase: __
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  const typedRef = ref;
-  const restProps = _lodash.default.omit(props, ['tooltipWidth', 'tooltip', 'tooltipPosition', 'labelUppercase']);
-  return /*#__PURE__*/_react.default.createElement(Comp, _extends({
-    ref: typedRef,
+  const compRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, () => compRef.current, []);
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(Comp, _extends({
+    ref: compRef,
     style: styleForLabel,
     className: `text-content-component ${className}`,
     "data-textcontent": Comp,
     onMouseEnter: onHoverLabel
-  }, restProps), children);
+  }, props), children), /*#__PURE__*/_react.default.createElement(_tooltip.Tooltip, {
+    targetRef: compRef,
+    text: tooltip,
+    position: tooltipPosition,
+    width: tooltipWidth,
+    textError: errorMessage
+  }));
 });
 TextContent.displayName = 'TextContent';
-var _default = exports.default = (0, _withTooltip.default)(TextContent);
+var _default = exports.default = TextContent;

package/lib/tooltip/TooltipContent.d.ts

@@ -0,0 +1,7 @@
+import React__default from 'react';
+import { ITooltipContentProps } from './types.js';
+import '../@types/Position.js';
+
+declare const TooltipContent: ({ text, textError, tooltipRef, style, styleForContent, tooltipDimensions, position, handlerSetDimensions, }: ITooltipContentProps) => React__default.ReactPortal;
+
+export { TooltipContent as default };

package/lib/tooltip/TooltipContent.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var uuid = _interopRequireWildcard(require("uuid"));
+require("../assets/styles/tooltip.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const TooltipContent = _ref => {
+  let {
+    text,
+    textError,
+    tooltipRef,
+    style = '',
+    styleForContent,
+    tooltipDimensions,
+    position = 'bottom',
+    handlerSetDimensions = () => {}
+  } = _ref;
+  const tooltipComponent = (0, _react.useRef)(document.createElement('div'));
+  (0, _react.useEffect)(() => {
+    tooltipComponent.current.id = `tooltip-${uuid.v1()}`;
+    tooltipComponent.current.className = `tooltip-component ${position} `;
+    tooltipComponent.current.dataset.testid = 'tooltip-component';
+    tooltipComponent.current.style.cssText = style;
+    document.body.appendChild(tooltipComponent.current);
+    const tooltipEl = document.querySelector(`div#${tooltipComponent.current.id}`);
+    let widthDimension = tooltipEl?.offsetWidth;
+    const heightDimension = tooltipEl?.offsetHeight;
+    if (tooltipDimensions && tooltipDimensions.width) {
+      widthDimension = tooltipDimensions.width;
+    }
+    handlerSetDimensions({
+      width: widthDimension,
+      height: Number(heightDimension)
+    });
+    // eslint-disable-next-line no-param-reassign
+    if (tooltipRef) {
+      tooltipRef.current = tooltipEl;
+    }
+    return () => {
+      document.body.removeChild(tooltipComponent.current);
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    tooltipComponent.current.className = `tooltip-component ${position} `;
+  }, [position]);
+  (0, _react.useEffect)(() => {
+    tooltipComponent.current.style.cssText = style;
+  }, [style]);
+  (0, _react.useEffect)(() => {
+    tooltipComponent.current.className = textError ? `tooltip-error tooltip-component ${position}` : `tooltip-component ${position}`;
+  }, [textError]);
+  const getTooltipContent = () => /*#__PURE__*/_react.default.createElement("div", {
+    className: "tooltipcontent",
+    style: styleForContent
+  }, textError || text);
+  return /*#__PURE__*/_reactDom.default.createPortal(getTooltipContent(), tooltipComponent.current);
+};
+var _default = exports.default = TooltipContent;

package/lib/tooltip/index.d.ts

@@ -1,6 +1,7 @@
-import React__default from 'react';
 import { ITooltipProps } from './types.js';
+import 'react';
+import '../@types/Position.js';
 
-declare const Tooltip: ({ text, textError, tooltipRef, style, tooltipDimensions, className, handlerSetDimensions, }: ITooltipProps) => React__default.ReactPortal;
+declare function Tooltip({ text, textError, targetRef, style, width, space, className, position, onDeniedText, }: ITooltipProps): JSX.Element | null;
 
-export { Tooltip as default };
+export { Tooltip, Tooltip as default };

package/lib/tooltip/index.js

@@ -3,61 +3,44 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var uuid = _interopRequireWildcard(require("uuid"));
-require("../assets/styles/tooltip.scss");
+exports.Tooltip = exports.default = Tooltip;
+var _react = _interopRequireDefault(require("react"));
+var _TooltipContent = _interopRequireDefault(require("./TooltipContent"));
+var _useTooltip2 = require("./useTooltip");
+const _excluded = ["showTooltip"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const Tooltip = _ref => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function Tooltip(_ref) {
   let {
     text,
     textError,
-    tooltipRef,
-    style = '',
-    tooltipDimensions,
-    className = 'bottom',
-    handlerSetDimensions = () => {}
+    targetRef,
+    style,
+    width,
+    space,
+    className,
+    position = 'bottom',
+    onDeniedText
   } = _ref;
-  const tooltipComponent = (0, _react.useRef)(document.createElement('div'));
-  (0, _react.useEffect)(() => {
-    tooltipComponent.current.id = `tooltip-${uuid.v1()}`;
-    tooltipComponent.current.className = `tooltip-component ${className} `;
-    tooltipComponent.current.dataset.testid = 'tooltip-component';
-    tooltipComponent.current.style.cssText = style;
-    document.body.appendChild(tooltipComponent.current);
-    const tooltipEl = document.querySelector(`div#${tooltipComponent.current.id}`);
-    let widthDimension = tooltipEl?.offsetWidth;
-    const heightDimension = tooltipEl?.offsetHeight;
-    if (tooltipDimensions && tooltipDimensions.width) {
-      widthDimension = tooltipDimensions.width;
-    }
-    handlerSetDimensions({
-      width: widthDimension,
-      height: Number(heightDimension)
-    });
-    // eslint-disable-next-line no-param-reassign
-    if (tooltipRef) {
-      tooltipRef.current = tooltipEl;
-    }
-    return () => {
-      document.body.removeChild(tooltipComponent.current);
-    };
-  }, []);
-  (0, _react.useEffect)(() => {
-    tooltipComponent.current.className = `tooltip-component ${className} `;
-  }, [className]);
-  (0, _react.useEffect)(() => {
-    tooltipComponent.current.style.cssText = style;
-  }, [style]);
-  (0, _react.useEffect)(() => {
-    tooltipComponent.current.className = textError ? `tooltip-error tooltip-component ${className}` : `tooltip-component ${className}`;
-  }, [textError]);
-  const getTooltipContent = () => /*#__PURE__*/_react.default.createElement("div", {
-    className: "tooltipcontent"
-  }, textError || text);
-  return /*#__PURE__*/_reactDom.default.createPortal(getTooltipContent(), tooltipComponent.current);
-};
-var _default = exports.default = Tooltip;
+  const _useTooltip = (0, _useTooltip2.useTooltip)({
+      targetRef,
+      errorMessage: textError,
+      position,
+      width,
+      text,
+      space,
+      onDeniedText
+    }),
+    {
+      showTooltip
+    } = _useTooltip,
+    tooltipContentProps = _objectWithoutProperties(_useTooltip, _excluded);
+  if (!showTooltip) return null;
+  return /*#__PURE__*/_react.default.createElement(_TooltipContent.default, _extends({
+    styleForContent: style,
+    classNameForContent: className,
+    position: position
+  }, tooltipContentProps));
+}

package/lib/tooltip/types.d.ts

@@ -1,17 +1,39 @@
-import { MutableRefObject } from 'react';
+import { RefObject, CSSProperties, MutableRefObject } from 'react';
+import { Position } from '../@types/Position.js';
 
 type Dimensions = {
     width: number | string;
     height: number;
 };
 interface ITooltipProps {
+    targetRef: RefObject<HTMLElement>;
     text?: string;
-    style?: string;
+    textError?: string;
+    style?: CSSProperties;
     className?: string;
+    width?: string | number;
+    space?: number;
+    position?: Exclude<Position, 'center'>;
+    onDeniedText?: string;
+}
+interface ITooltipContentProps {
     tooltipRef?: MutableRefObject<HTMLElement | null>;
+    text?: string;
+    style?: string;
+    styleForContent?: CSSProperties;
+    classNameForContent?: string;
+    width?: string | number;
+    space?: number;
+    tooltip?: string;
+    position?: Exclude<Position, 'center'>;
     handlerSetDimensions?: ({ width, height }: Dimensions) => void;
     tooltipDimensions?: Dimensions;
     textError?: string;
 }
+interface ITooltipCommonProps {
+    tooltip?: string;
+    tooltipWidth?: string | number;
+    tooltipPosition?: Exclude<Position, 'center'>;
+}
 
-export { ITooltipProps };
+export { ITooltipCommonProps, ITooltipContentProps, ITooltipProps };

package/lib/tooltip/useTooltip.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { RefObject } from 'react';
+import { Position } from '../@types/Position.js';
+
+interface UseTooltipProps {
+    text?: string;
+    width?: number | string;
+    space?: number;
+    position?: Exclude<Position, 'center'>;
+    errorMessage?: string;
+    targetRef: RefObject<HTMLElement>;
+    onDeniedText?: string;
+}
+declare function useTooltip({ targetRef, text, width: widthProp, space, position: positionProp, errorMessage, onDeniedText, }: UseTooltipProps): {
+    text: string | undefined;
+    tooltipRef: React.MutableRefObject<HTMLElement | null>;
+    style: string;
+    className: "left" | "right" | "top" | "bottom";
+    handlerSetDimensions: React.Dispatch<React.SetStateAction<{
+        width: string | number;
+        height: number;
+    }>>;
+    tooltipDimensions: {
+        width: string | number;
+        height: number;
+    };
+    showTooltip: boolean;
+};
+
+export { useTooltip };