linear-react-components-ui 1.1.24-beta.1 → 1.1.25-rc.0

package/lib/inputs/period/helper.d.ts

@@ -6,7 +6,7 @@ import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import '../../@types/Align.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 declare const getCalendarDropdownStyle: ({ topPosition, leftPosition, width }: {

package/lib/inputs/period/index.d.ts

@@ -6,7 +6,7 @@ import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import '../../@types/Align.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 declare const PeriodPicker: (props: IPeriodPickerProps) => JSX.Element | null;

package/lib/inputs/period/index.js

@@ -43,7 +43,9 @@ const PeriodPicker = props => {
     hintPosition = 'below',
     themePopover = 'light',
     popoverAlign = 'left',
-    gridLayout
+    gridLayout,
+    nameDateInitial = 'valueInitial',
+    nameDateFinal = 'valueFinal'
   } = props;
   const idValueInitial = (0, _react.useId)();
   const idValueFinal = (0, _react.useId)();
@@ -244,7 +246,7 @@ const PeriodPicker = props => {
         name: changingAux
       } = event.target;
       if (value && value.replace(/\D/g, '').trim().length !== 0) {
-        if (changingAux === 'valueInitial') {
+        if (changingAux === nameDateInitial) {
           setValueInitial(undefined);
         } else {
           setValueFinal(undefined);
@@ -268,21 +270,21 @@ const PeriodPicker = props => {
     const dateObj = (0, _moment.default)(value, 'DD/MM/YYYY');
     if (showCalendarValueInitial) inputInitialRef.current?.focus();
     if (showCalendarValueFinal) inputFinalRef.current?.focus();
-    if (valueDateName === 'valueFinal' && valueInitial && dateObj.isBefore(valueInitial)) {
+    if (valueDateName === nameDateFinal && valueInitial && dateObj.isBefore(valueInitial)) {
       setValueInitial(dateObj);
       setValueFinal(valueInitial);
       onDateChange({
         initial: dateObj,
         final: valueInitial
       });
-    } else if (valueDateName === 'valueInitial' && valueFinal && dateObj.isAfter(valueFinal)) {
+    } else if (valueDateName === nameDateInitial && valueFinal && dateObj.isAfter(valueFinal)) {
       setValueInitial(valueFinal);
       setValueFinal(dateObj);
       onDateChange({
         initial: valueFinal,
         final: dateObj
       });
-    } else if (valueDateName === 'valueInitial') {
+    } else if (valueDateName === nameDateInitial) {
       setValueInitial(dateObj);
       onDateChange({
         initial: dateObj,
@@ -295,7 +297,7 @@ const PeriodPicker = props => {
         final: dateObj
       });
     }
-    if (valueDateName === 'valueInitial' && !valueFinal && shouldOpenDropdown) {
+    if (valueDateName === nameDateInitial && !valueFinal && shouldOpenDropdown) {
       inputFinalRef.current?.focus();
       setTimeout(() => setShowCalendarValueFinal(true), 100);
     }
@@ -405,7 +407,7 @@ const PeriodPicker = props => {
         handlerClose: () => onCloseDateDialog('valueInitial'),
         dialogSize: dialogSize,
         onOpenChange: setShowCalendarValueInitial
-      }, getCalendar(valueInitial, calendarColorStyle, 'valueInitial'));
+      }, getCalendar(valueInitial, calendarColorStyle, nameDateInitial));
     }
     return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
       containerRef: wrapperBaseInputPeriodRef,
@@ -424,7 +426,7 @@ const PeriodPicker = props => {
         handlerClose: () => onCloseDateDialog('valueFinal'),
         dialogSize: dialogSize,
         onOpenChange: setShowCalendarValueFinal
-      }, getCalendar(valueFinal, calendarColorStyle, 'valueFinal'));
+      }, getCalendar(valueFinal, calendarColorStyle, nameDateFinal));
     }
     return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
       containerRef: wrapperBaseInputPeriodRef,

package/lib/inputs/period/types.d.ts

@@ -1,11 +1,11 @@
 import { Moment } from 'moment';
-import { ReactNode, RefObject } from 'react';
+import { ReactNode, RefObject, MouseEvent } from 'react';
 import { ColorStyles } from '../../@types/ColorStyles.js';
 import { Period } from '../../@types/Period.js';
 import { PermissionAttr } from '../../@types/PermissionAttr.js';
 import { CustomInputEvent } from '../base/types.js';
 import '../../@types/Align.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 type DateTypes = 'today' | 'week' | 'lastweek' | 'last15' | 'month' | 'lastmonth';
@@ -55,11 +55,14 @@ interface IPeriodPickerProps {
     calendarColorStyle?: ColorStyles;
     required?: boolean;
     onChange?: (event?: CustomInputEvent, maskValue?: string, date?: Period) => void;
+    onClick?: (event?: MouseEvent) => void;
     disabled?: boolean;
     permissionAttr?: PermissionAttr;
     errorMessages?: string[];
     name?: string;
     hint?: string;
+    nameDateInitial?: string;
+    nameDateFinal?: string;
     hintPosition?: 'below' | 'onLabelRight';
     onBlur?: (e: CustomInputEvent) => void;
     onFocus?: (e: CustomInputEvent) => void;

package/lib/inputs/search/index.d.ts

@@ -5,7 +5,7 @@ import '../../@types/DataCombo.js';
 import '../base/types.js';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 import '../../drawer/types.js';
 import '../../@types/Icon.js';

package/lib/inputs/select/ActionButtons.d.ts

@@ -5,7 +5,7 @@ import '../../@types/DataCombo.js';
 import '../base/types.js';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 import '../../drawer/types.js';
 import '../../@types/Icon.js';

package/lib/inputs/select/Dropdown.d.ts

@@ -5,7 +5,7 @@ import '../../@types/DataCombo.js';
 import '../base/types.js';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 import '../../drawer/types.js';
 import '../../@types/Icon.js';

package/lib/inputs/select/helper.d.ts

@@ -6,7 +6,7 @@ import '../../@types/DataCombo.js';
 import '../base/types.js';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 import '../../drawer/types.js';
 import '../../@types/Icon.js';

package/lib/inputs/select/index.d.ts

@@ -5,7 +5,7 @@ import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import 'react';
 import '../../@types/Period.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 declare const SelectField: (props: ISelectFieldProps) => JSX.Element;

package/lib/inputs/select/multiple/Selecteds.d.ts

@@ -5,7 +5,7 @@ import '../../../@types/PermissionAttr.js';
 import '../../base/types.js';
 import 'react';
 import '../../../@types/Period.js';
-import '../../../tooltip/types.js';
+import '../../../internals/types.js';
 import '../../../@types/Position.js';
 
 declare const Selecteds: ({ currents, descriptionKey, idKey, disabled, handlerOnUnselect, }: ISelectedsMultipleProps) => JSX.Element;

package/lib/inputs/select/multiple/index.d.ts

@@ -5,7 +5,7 @@ import '../../../@types/PermissionAttr.js';
 import '../../base/types.js';
 import 'react';
 import '../../../@types/Period.js';
-import '../../../tooltip/types.js';
+import '../../../internals/types.js';
 import '../../../@types/Position.js';
 
 declare const MultipleSelect: (props: IMultipleSelectProps) => JSX.Element;

package/lib/inputs/select/simple/index.d.ts

@@ -5,7 +5,7 @@ import '../../../@types/PermissionAttr.js';
 import '../../base/types.js';
 import 'react';
 import '../../../@types/Period.js';
-import '../../../tooltip/types.js';
+import '../../../internals/types.js';
 import '../../../@types/Position.js';
 
 declare const SimpleSelect: (props: ISimpleSelectProps) => JSX.Element;

package/lib/inputs/select/types.d.ts

@@ -4,7 +4,7 @@ import { PermissionAttr } from '../../@types/PermissionAttr.js';
 import { CustomInputEvent } from '../base/types.js';
 import { MutableRefObject } from 'react';
 import '../../@types/Period.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 type AllOptions = {

package/lib/inputs/text/index.d.ts

@@ -4,7 +4,7 @@ import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import 'react';
 import '../../@types/Align.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 declare const TextField: (props: ITextField) => JSX.Element;

package/lib/inputs/text/types.d.ts

@@ -1,12 +1,13 @@
 import { Period } from '../../@types/Period.js';
 import { PermissionAttr } from '../../@types/PermissionAttr.js';
 import { IBaseProps, CustomInputEvent } from '../base/types.js';
+import { WithTooltipProps } from '../../internals/types.js';
 import 'react';
 import '../../@types/Align.js';
-import '../../tooltip/types.js';
 import '../../@types/Position.js';
 
-interface ITextField extends IBaseProps {
+type CommonProperties = Pick<WithTooltipProps, 'tooltip' | 'tooltipPosition' | 'tooltipWidth'>;
+interface ITextField extends IBaseProps, CommonProperties {
     value?: string | string[];
     required?: boolean;
     name?: string;

package/lib/inputs/textarea/index.d.ts

@@ -4,7 +4,7 @@ import 'react';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 declare const TextArea: (props: ITextAreaProps) => JSX.Element;

package/lib/inputs/textarea/types.d.ts

@@ -3,7 +3,7 @@ import 'react';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 interface ITextAreaProps extends IBaseProps {

package/lib/inputs/types.d.ts

@@ -5,7 +5,7 @@ import { IBaseProps, CustomInputEvent } from './base/types.js';
 import { IDrawerProps } from '../drawer/types.js';
 import { TextAlign } from '../@types/Align.js';
 import '../@types/Period.js';
-import '../tooltip/types.js';
+import '../internals/types.js';
 import '../@types/Position.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';

package/lib/internals/types.d.ts

@@ -1,3 +1,19 @@
+import { CSSProperties } from 'react';
+import { OnDenied } from '../@types/PermissionAttr.js';
+import { Position } from '../@types/Position.js';
+
+interface WithTooltipProps {
+    tooltipWidth?: string | number;
+    space?: number;
+    tooltip?: string;
+    tooltipPosition?: Exclude<Position, 'center'>;
+    style?: CSSProperties;
+    handlerSetOnDeniedText?: (onDeniedValue: OnDenied) => void;
+    errorMessage?: string;
+}
+interface ITooltipContext {
+    handlerSetOnDeniedText: (text: string) => void;
+}
 interface GetDisplayNameParams {
     displayName?: string;
     name?: string;
@@ -6,4 +22,4 @@ interface HasToolTipParams {
     tooltip?: string;
 }
 
-export { GetDisplayNameParams, HasToolTipParams };
+export { GetDisplayNameParams, HasToolTipParams, ITooltipContext, WithTooltipProps };

package/lib/internals/withTooltip.d.ts

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import { ITooltipContext, WithTooltipProps } from './types.js';
+import '../@types/PermissionAttr.js';
+import '../@types/Position.js';
+
+declare const TooltipContext: React__default.Context<ITooltipContext>;
+declare const withTooltip: <ComponentProps extends WithTooltipProps>(WrappedComponent: React__default.ComponentType<ComponentProps>) => {
+    (props: ComponentProps): JSX.Element;
+    displayName: string;
+};
+
+export { TooltipContext, withTooltip as default };

package/lib/internals/withTooltip.js

@@ -0,0 +1,172 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TooltipContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _tooltip = _interopRequireDefault(require("../tooltip"));
+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; }
+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); }
+const TOOLTIP_INITIAL_HEIGHT = 40;
+const hasTooltip = _ref => {
+  let {
+    tooltip
+  } = _ref;
+  return tooltip;
+};
+const TooltipContext = exports.TooltipContext = /*#__PURE__*/_react.default.createContext({});
+const getDisplayName = _ref2 => {
+  let {
+    displayName,
+    name
+  } = _ref2;
+  return displayName || name || 'Component';
+};
+const withTooltip = WrappedComponent => {
+  const EnhancedComponent = props => {
+    const {
+      tooltip,
+      tooltipWidth = 'auto',
+      space = 20,
+      tooltipPosition = 'bottom',
+      errorMessage
+    } = props;
+    const [stateTooltipPosition, setStateTooltipPosition] = (0, _react.useState)(tooltipPosition);
+    const [onDeniedText, setOnDeniedText] = (0, _react.useState)('');
+    const [tooltipStyle, setTooltipStyle] = (0, _react.useState)('');
+    const [showTooltip, setShowTooltip] = (0, _react.useState)(false);
+    const [tooltipDimensions, setTooltipDimensions] = (0, _react.useState)({
+      width: tooltipWidth,
+      height: TOOLTIP_INITIAL_HEIGHT
+    });
+    const targetElement = (0, _react.useRef)(null);
+    const tooltipElement = (0, _react.useRef)(null);
+    const onMouseOver = e => {
+      if (targetElement.current && targetElement.current.contains(e.target)) {
+        setShowTooltip(true);
+      } else setShowTooltip(false);
+    };
+    const onMouseOut = () => {
+      setShowTooltip(false);
+    };
+    const onAnyScroll = () => {
+      setShowTooltip(false);
+    };
+    (0, _react.useEffect)(() => {
+      if (hasTooltip(props) || onDeniedText) {
+        if (errorMessage) {
+          setShowTooltip(true);
+        } else {
+          setShowTooltip(false);
+          document.addEventListener('mouseover', onMouseOver);
+          document.addEventListener('scroll', onAnyScroll, true);
+          if (targetElement && targetElement.current) {
+            targetElement.current.addEventListener('mouseout', onMouseOut);
+          }
+        }
+      }
+      return () => {
+        if (hasTooltip(props) || onDeniedText) {
+          document.removeEventListener('mouseover', onMouseOver);
+          document.removeEventListener('scroll', onAnyScroll, true);
+          if (targetElement && targetElement.current) {
+            targetElement.current.removeEventListener('mouseout', onMouseOut);
+          }
+        }
+      };
+    }, [errorMessage, tooltip, onDeniedText]);
+    (0, _react.useEffect)(() => {
+      if (targetElement.current && tooltipElement.current) {
+        const {
+          width,
+          height
+        } = tooltipDimensions;
+        const targetDimensions = targetElement.current.getBoundingClientRect();
+        const targetVerticalCenter = (targetDimensions.top + targetDimensions.bottom) / 2;
+        const tooltipClientWidth = tooltipElement.current.clientWidth;
+        let style = `width: ${typeof width === 'string' ? width : `${width}px`}`;
+        let left = targetDimensions.left + targetDimensions.width / 2 - tooltipClientWidth / 2;
+        left = Math.min(left, document.body.clientWidth - tooltipClientWidth - space);
+        style += `; left: ${Math.max(space, left)}px`;
+        switch (stateTooltipPosition) {
+          case 'top':
+            if (targetDimensions.top < height) {
+              setStateTooltipPosition('bottom');
+            } else {
+              style += `; top: ${targetDimensions.top + window.scrollY - height - 5}px`;
+            }
+            break;
+          case 'bottom':
+            if (window.innerHeight - targetDimensions.bottom < height) {
+              setStateTooltipPosition('top');
+            } else {
+              style += `; top: ${targetDimensions.top + window.scrollY + targetDimensions.height + 5}px`;
+            }
+            break;
+          case 'left':
+            if (targetDimensions.left < tooltipClientWidth) {
+              if (window.innerWidth - targetDimensions.right < tooltipClientWidth) {
+                setStateTooltipPosition('bottom');
+              } else {
+                setStateTooltipPosition('right');
+              }
+            } else {
+              style += `; top: ${targetVerticalCenter + window.scrollY - height / 2}px`;
+              style += `; left: ${targetDimensions.left - tooltipClientWidth - 6}px`;
+            }
+            break;
+          case 'right':
+            if (window.innerWidth - targetDimensions.right < tooltipClientWidth) {
+              setStateTooltipPosition('left');
+            } else {
+              style += `; top: ${targetVerticalCenter + window.scrollY - height / 2}px`;
+              style += `; left: ${targetDimensions.left + targetDimensions.width + 5}px`;
+            }
+            break;
+          default:
+            style += '';
+        }
+        setTooltipStyle(style);
+      }
+    }, [tooltipDimensions, stateTooltipPosition]);
+    (0, _react.useEffect)(() => {
+      setStateTooltipPosition(tooltipPosition);
+    }, [window.scrollY, window.scrollX, window.innerWidth]);
+    const getTooltip = () => {
+      if (tooltip || onDeniedText) {
+        return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+          text: onDeniedText || tooltip,
+          textError: errorMessage,
+          tooltipRef: tooltipElement,
+          style: tooltipStyle,
+          className: stateTooltipPosition,
+          tooltipDimensions: tooltipDimensions,
+          handlerSetDimensions: setTooltipDimensions
+        });
+      }
+      return null;
+    };
+    const getTarget = targetEl => {
+      if (!targetElement.current) targetElement.current = targetEl;
+    };
+    const contextValues = {
+      handlerSetOnDeniedText: setOnDeniedText
+    };
+    if (!hasTooltip(props) && !onDeniedText) {
+      return /*#__PURE__*/_react.default.createElement(TooltipContext.Provider, {
+        value: contextValues
+      }, /*#__PURE__*/_react.default.createElement(WrappedComponent, props));
+    }
+    return /*#__PURE__*/_react.default.createElement(TooltipContext.Provider, {
+      value: contextValues
+    }, /*#__PURE__*/_react.default.createElement(WrappedComponent, _extends({}, props, {
+      targetRef: getTarget
+    })), showTooltip && getTooltip());
+  };
+  EnhancedComponent.displayName = `withTooltip(${getDisplayName(WrappedComponent)})`;
+  return EnhancedComponent;
+};
+var _default = exports.default = withTooltip;

package/lib/labels/DangerLabel.d.ts

@@ -5,7 +5,6 @@ import '../@types/Position.js';
 import '../@types/Size.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
-import '../tooltip/types.js';
 
 declare const DangerLabel: ({ ...rest }: ILabelProps) => JSX.Element;
 

package/lib/labels/DefaultLabel.d.ts

@@ -5,8 +5,10 @@ import '../@types/Position.js';
 import '../@types/Size.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
-import '../tooltip/types.js';
 
-declare const DefaultLabel: ({ style, iconName, icon, children, visible, customClass, className, disabled, size, iconAlign, bordered, permissionAttr, skeletonize, tooltip, tooltipPosition, tooltipWidth, }: ILabelProps) => JSX.Element | null;
+declare const _default: {
+    (props: ILabelProps): JSX.Element;
+    displayName: string;
+};
 
-export { DefaultLabel as default };
+export { _default as default };

package/lib/labels/DefaultLabel.js

@@ -6,14 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _icons = _interopRequireDefault(require("../icons"));
+var _withTooltip = _interopRequireDefault(require("../internals/withTooltip"));
 var _permissionValidations = require("../permissionValidations");
-var _tooltip = require("../tooltip");
 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 DefaultLabel = _ref => {
   let {
     style,
+    targetRef,
     iconName,
     icon,
     children,
@@ -25,14 +26,10 @@ const DefaultLabel = _ref => {
     iconAlign = 'left',
     bordered,
     permissionAttr,
-    skeletonize,
-    tooltip,
-    tooltipPosition,
-    tooltipWidth
+    skeletonize
   } = _ref;
   const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible];
   const [onDenied] = (0, _react.useState)((0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr));
-  const labelRef = (0, _react.useRef)(null);
   const getClass = () => `label-component ${className} ${customClass} ${bordered ? '-bordered' : ''} ${disabled ? '-disabled' : ''}
     ${skeletonize ? '-skeletonized' : ''}
     ${size ? `-${size}` : ''}
@@ -49,15 +46,10 @@ const DefaultLabel = _ref => {
     return null;
   };
   if (!visible || onDenied.unvisible) return null;
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     style: style,
     className: getClass(),
-    ref: labelRef
-  }, getIcon(), children), /*#__PURE__*/_react.default.createElement(_tooltip.Tooltip, {
-    targetRef: labelRef,
-    text: tooltip,
-    width: tooltipWidth,
-    position: tooltipPosition
-  }));
+    ref: r => targetRef && targetRef(r)
+  }, getIcon(), children);
 };
-var _default = exports.default = DefaultLabel;
+var _default = exports.default = (0, _withTooltip.default)(DefaultLabel);

package/lib/labels/InfoLabel.d.ts

@@ -5,7 +5,6 @@ import '../@types/Position.js';
 import '../@types/Size.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
-import '../tooltip/types.js';
 
 declare const InfoLabel: ({ ...rest }: ILabelProps) => JSX.Element;
 

package/lib/labels/PrimaryLabel.d.ts

@@ -5,7 +5,6 @@ import '../@types/Position.js';
 import '../@types/Size.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
-import '../tooltip/types.js';
 
 declare const PrimaryLabel: ({ ...rest }: ILabelProps) => JSX.Element;
 

package/lib/labels/SuccessLabel.d.ts

@@ -5,7 +5,6 @@ import '../@types/Position.js';
 import '../@types/Size.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
-import '../tooltip/types.js';
 
 declare const SuccessLabel: ({ ...rest }: ILabelProps) => JSX.Element;
 

package/lib/labels/WarningLabel.d.ts

@@ -5,7 +5,6 @@ import '../@types/Position.js';
 import '../@types/Size.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
-import '../tooltip/types.js';
 
 declare const WarningLabel: ({ ...rest }: ILabelProps) => JSX.Element;
 

package/lib/labels/index.d.ts

@@ -1,5 +1,5 @@
 export { default as LabelContainer } from './label_container/index.js';
-import DefaultLabel from './DefaultLabel.js';
+import _default from './DefaultLabel.js';
 export { default as DangerLabel } from './DangerLabel.js';
 export { default as PrimaryLabel } from './PrimaryLabel.js';
 export { default as WarningLabel } from './WarningLabel.js';
@@ -12,8 +12,7 @@ import '../@types/PermissionAttr.js';
 import '../@types/Size.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
-import '../tooltip/types.js';
 
 
 
-export { DefaultLabel as default };
+export { _default as default };

package/lib/labels/types.d.ts

@@ -3,16 +3,19 @@ import { PermissionAttr } from '../@types/PermissionAttr.js';
 import { Position } from '../@types/Position.js';
 import { Size } from '../@types/Size.js';
 import { IconNames } from '../@types/Icon.js';
-import { ITooltipCommonProps } from '../tooltip/types.js';
 import '../icons/helper.js';
 
-interface ILabelProps extends React.HTMLAttributes<HTMLDivElement>, ITooltipCommonProps {
+interface ILabelProps extends React.HTMLAttributes<HTMLDivElement> {
     customClass?: string;
     size?: Size;
     iconName?: IconNames;
     iconAlign?: Position;
     icon?: ReactElement;
+    targetRef?: (ref: HTMLDivElement | null) => void;
     bordered?: boolean;
+    tooltipPosition?: Exclude<Position, 'center'>;
+    tooltipWidth?: string | number;
+    tooltip?: string;
     visible?: boolean;
     disabled?: boolean;
     permissionAttr?: PermissionAttr | PermissionAttr[];

package/lib/list/Header.d.ts

@@ -3,7 +3,6 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
-import '../tooltip/types.js';
 import '../@types/Position.js';
 
 declare const Header: ({ title, children, style, customClass }: IListHeaderProps) => JSX.Element;