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

package/lib/buttons/SuccessButton.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 SuccessButton: ({ customClass, ...rest }: IButtonProps) => JSX.Element;
 

package/lib/buttons/WarningButton.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 WarningButton: ({ customClass, ...rest }: IButtonProps) => JSX.Element;
 

package/lib/buttons/index.d.ts

@@ -20,7 +20,6 @@ import '../@types/PermissionAttr.js';
 import '../@types/Size.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
-import '../tooltip/types.js';
 
 
 

package/lib/buttons/split_button/index.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 SplitButton: (props: ISplitButtonProps) => JSX.Element;
 

package/lib/buttons/types.d.ts

@@ -3,10 +3,9 @@ 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 IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ITooltipCommonProps {
+interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     label?: string;
     activeIconColor?: string;
     toggleable?: boolean;
@@ -33,6 +32,10 @@ interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ITooltip
     permissionAttr?: PermissionAttr | PermissionAttr[];
     transparent?: boolean;
     skeletonize?: boolean;
+    tooltipPosition?: Exclude<Position, 'center'>;
+    tooltipWidth?: string | number;
+    space?: number;
+    tooltip?: string;
     split?: boolean;
     isFloatMenu?: boolean;
     customClassForDropdown?: string;

package/lib/calendar/base/index.js

@@ -4,21 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("../../assets/styles/calendar.scss");
 var _react = _interopRequireWildcard(require("react"));
-var _uuid = require("uuid");
 var _moment = _interopRequireDefault(require("moment"));
-var _Month = _interopRequireDefault(require("./Month"));
-var _buttons = _interopRequireDefault(require("../../buttons"));
+var _uuid = require("uuid");
 var _gridlayout = _interopRequireDefault(require("../../gridlayout"));
+var _buttons = _interopRequireDefault(require("../../buttons"));
 var _helpers = require("./helpers");
-require("../../assets/styles/calendar.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 arrowKeys = ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft'];
 const Calendar = props => {
   const {
-    currentDate = (0, _moment.default)(),
+    currentDate: currentDateProp = (0, _moment.default)(),
     onDateChange,
     drawGridLines = false,
     colorStyle,
@@ -28,46 +27,98 @@ const Calendar = props => {
     currentDateButton,
     calendarContainer
   } = props;
-  const currentMonth = (0, _react.useRef)(null);
   const currentCalendarRef = (0, _react.useRef)(null);
-  const [dataAtual, setDataAtual] = (0, _react.useState)((0, _helpers.validDate)(currentDate));
+  const calendarMonthsContainerRef = (0, _react.useRef)(null);
+  const currentDaySelectedContainerRef = (0, _react.useRef)(null);
+  const [currentDate, setCurrentDate] = (0, _react.useState)(currentDateProp);
+  const [currentMonth, setCurrentMonth] = (0, _react.useState)((0, _moment.default)(currentDateProp).format('MM-YYYY'));
   const onDateChangeFunction = date => {
+    setCurrentDate(date);
     if (onDateChange) onDateChange(date);
-    setDataAtual(date);
   };
-  const previousMonth = () => {
-    const currentDateClone = dataAtual.clone();
-    setDataAtual(currentDateClone.subtract(1, 'month'));
+  const createCalendarWithWeeksAndDays = () => {
+    const firstDayOfMonth = (0, _moment.default)(currentMonth, 'MM-YYYY').startOf('month');
+    const lastDayOfMonth = (0, _moment.default)(currentMonth, 'MM-YYYY').endOf('month');
+    const startDate = firstDayOfMonth.clone().startOf('week');
+    const endDate = lastDayOfMonth.clone().endOf('week');
+    const days = [];
+    const day = startDate.clone();
+    while (day.isBefore(endDate, 'day') || day.isSame(endDate, 'day')) {
+      days.push({
+        date: day.clone(),
+        isDaySelected: day.isSame(currentDate)
+      });
+      day.add(1, 'day');
+    }
+    return days;
   };
-  const nextMonth = () => {
-    const currentDateClone = dataAtual.clone();
-    setDataAtual(currentDateClone.add(1, 'month'));
+  const changeMonth = amountMonthsToChange => {
+    const newDate = (0, _moment.default)(currentMonth, 'MM-YYYY').add(amountMonthsToChange, 'month').format('MM-YYYY');
+    setCurrentMonth(newDate);
+  };
+  const getFirstOrLastDayButtonOfCalendar = function () {
+    let firstOrLast = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'first';
+    const listOfButtons = currentCalendarRef.current?.getElementsByClassName('daybutton') || [];
+    if (firstOrLast === 'first') return listOfButtons[0];
+    if (firstOrLast === 'last') return listOfButtons[listOfButtons.length - 1];
   };
   const navigateWithArrows = event => {
-    const sourceTarget = event.target;
-    const daysOfMonth = currentMonth.current?.getElementsByClassName('daybutton');
     let indexCurrentDay = 0;
-    if (daysOfMonth.length) {
-      Array.from(daysOfMonth).find((dayButton, index) => {
-        if (dayButton && dayButton.id === sourceTarget.id) indexCurrentDay = index;
-      });
+    const eventTarget = event.target;
+    indexCurrentDay = Number(eventTarget.getAttribute('data-day-index') || 0);
+    const containerDaySelected = currentCalendarRef.current?.getElementsByClassName('-selectedday');
+    const buttonDaySelected = containerDaySelected?.[0]?.firstChild;
+    const daysOfMonth = currentCalendarRef.current?.getElementsByClassName('daybutton');
+    const lastDayButtonElement = getFirstOrLastDayButtonOfCalendar('last');
+    if (!currentCalendarRef.current?.contains(document.activeElement)) {
+      if (currentCalendarRef.current?.contains(buttonDaySelected)) {
+        buttonDaySelected.focus();
+        indexCurrentDay = Number(buttonDaySelected.getAttribute('data-day-index') || 0);
+      }
+    }
+    if (calendarMonthsContainerRef.current?.contains(document.activeElement)) {
+      const element = {
+        ArrowUp: daysOfMonth[indexCurrentDay - 7],
+        ArrowRight: daysOfMonth[indexCurrentDay + 1],
+        ArrowDown: daysOfMonth[indexCurrentDay + 7],
+        ArrowLeft: daysOfMonth[indexCurrentDay - 1]
+      }[event.code];
+      if (element) element.focus();
+      const lastButtonElementIndex = Number(lastDayButtonElement?.getAttribute('data-day-index') || 0);
+      if (indexCurrentDay === 0 && event.code === 'ArrowLeft') {
+        setCurrentMonth(prevState => {
+          return (0, _moment.default)(prevState, 'MM-YYYY').subtract(1, 'month').format('MM-YYYY');
+        });
+        setTimeout(() => {
+          getFirstOrLastDayButtonOfCalendar('last')?.focus();
+        }, 1);
+      }
+      if (indexCurrentDay === lastButtonElementIndex && event.code === 'ArrowRight') {
+        setCurrentMonth(prevState => {
+          return (0, _moment.default)(prevState, 'MM-YYYY').add(1, 'month').format('MM-YYYY');
+        });
+        setTimeout(() => {
+          getFirstOrLastDayButtonOfCalendar('first')?.focus();
+        }, 1);
+      }
+    } else {
+      if (calendarMonthsContainerRef.current?.contains(buttonDaySelected)) {
+        buttonDaySelected.focus();
+      } else {
+        getFirstOrLastDayButtonOfCalendar('first')?.focus();
+      }
     }
-    const element = {
-      ArrowUp: daysOfMonth[indexCurrentDay - 7],
-      ArrowRight: daysOfMonth[indexCurrentDay + 1],
-      ArrowDown: daysOfMonth[indexCurrentDay + 7],
-      ArrowLeft: daysOfMonth[indexCurrentDay - 1]
-    }[event.code];
-    if (element) element.focus();
   };
   const contextValues = {
     handleDateChange: onDateChangeFunction
   };
   (0, _react.useEffect)(() => {
+    setCurrentDate((0, _helpers.validDate)(currentDateProp));
     calendarContainer?.(currentCalendarRef?.current);
-    setDataAtual((0, _helpers.validDate)(currentDate));
+  }, []);
+  (0, _react.useEffect)(() => {
     document.addEventListener('keydown', event => {
-      if (event && event.code && arrowKeys.includes(event.code) && currentCalendarRef.current && currentCalendarRef.current.contains(document.activeElement) && currentMonth.current && currentMonth.current.contains(document.activeElement)) {
+      if (event && event.code && arrowKeys.includes(event.code) && document.contains(currentCalendarRef.current)) {
         navigateWithArrows(event);
         event.stopPropagation();
         event.preventDefault();
@@ -77,12 +128,10 @@ const Calendar = props => {
       document.removeEventListener('keydown', () => {});
     };
   }, []);
-  (0, _react.useEffect)(() => {
-    const daysOfMonth = currentMonth.current?.getElementsByClassName('-selectedday')[0];
-    currentDateButton?.(daysOfMonth.firstChild);
-  }, [currentDate]);
   const component = /*#__PURE__*/_react.default.createElement("div", {
     ref: currentCalendarRef,
+    role: "grid",
+    "aria-label": String('calendar-container-').concat((0, _uuid.v1)()),
     className: (0, _helpers.getCalendarCssClass)({
       unpadding,
       drawGridLines,
@@ -93,30 +142,54 @@ const Calendar = props => {
     className: "calendarheader"
   }, /*#__PURE__*/_react.default.createElement(_buttons.default, {
     id: (0, _uuid.v1)(),
+    tabIndex: -1,
     boxShadow: false,
     iconName: "arrow_left",
     customClass: "navbutton nav-arrow-left",
     onClick: () => {
-      previousMonth();
+      changeMonth(-1);
     }
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "monthname"
-  }, dataAtual.format('MMMM YYYY')), /*#__PURE__*/_react.default.createElement(_buttons.default, {
+  }, (0, _moment.default)(currentMonth, 'MM-YYYY').format('MMMM YYYY')), /*#__PURE__*/_react.default.createElement(_buttons.default, {
     id: (0, _uuid.v1)(),
+    tabIndex: -1,
     boxShadow: false,
     iconName: "arrow_right",
     customClass: "navbutton nav-arrow-right",
     onClick: () => {
-      nextMonth();
+      changeMonth(1);
     }
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "daynames"
   }, (0, _helpers.dayNames)().map(name => /*#__PURE__*/_react.default.createElement("div", {
     key: `day-${name}`
-  }, name))), /*#__PURE__*/_react.default.createElement(_Month.default, {
-    monthRef: currentMonth,
-    currentDate: dataAtual
-  }));
+  }, name))), /*#__PURE__*/_react.default.createElement("div", {
+    ref: calendarMonthsContainerRef,
+    className: "calendarmonth"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "monthweek"
+  }, createCalendarWithWeeksAndDays().map((_ref, index) => {
+    let {
+      date,
+      isDaySelected
+    } = _ref;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: date.format('YYYY-MM-DD'),
+      ref: isDaySelected ? currentDaySelectedContainerRef : undefined,
+      className: (0, _helpers.getDayContainerCssClass)(currentDate, date)
+    }, /*#__PURE__*/_react.default.createElement(_buttons.default, {
+      "data-day-index": index,
+      id: (0, _uuid.v1)(),
+      type: "button",
+      buttonRef: ref => isDaySelected && ref ? currentDateButton?.(ref) : undefined,
+      tabIndex: -1,
+      boxShadow: false,
+      label: date.date().toString(),
+      onClick: () => onDateChangeFunction(date),
+      customClass: ` ${(0, _helpers.getDayCssClass)(currentDate, date)} numberdaycalendar`
+    }));
+  }))));
   return /*#__PURE__*/_react.default.createElement(_helpers.CalendarContext.Provider, {
     value: contextValues
   }, !gridLayout ? component : /*#__PURE__*/_react.default.createElement(_gridlayout.default, {

package/lib/dialog/base/index.js

@@ -136,7 +136,7 @@ const BaseDialog = props => {
     className: "modalcontainer",
     onMouseDown: handleClickOutside,
     style: {
-      zIndex: Number(zIndex)
+      zIndex: 99999 + Number(zIndex)
     }
   }, overlay && /*#__PURE__*/_react.default.createElement("div", {
     className: "modal-overlay",

package/lib/form/Field.d.ts

@@ -6,7 +6,7 @@ import '../@types/DataCombo.js';
 import '../@types/PermissionAttr.js';
 import '../inputs/base/types.js';
 import '../@types/Period.js';
-import '../tooltip/types.js';
+import '../internals/types.js';
 import '../@types/Position.js';
 
 declare const _default: React__default.ForwardRefExoticComponent<Pick<IFieldProps & React__default.RefAttributes<unknown>, "key" | keyof IFieldProps> & React__default.RefAttributes<HTMLElement>>;

package/lib/form/FieldArray.d.ts

@@ -6,7 +6,7 @@ import '../@types/DataCombo.js';
 import '../@types/PermissionAttr.js';
 import '../inputs/base/types.js';
 import '../@types/Period.js';
-import '../tooltip/types.js';
+import '../internals/types.js';
 import '../@types/Position.js';
 
 declare const _default: React__default.ForwardRefExoticComponent<IFieldArrayProps & React__default.RefAttributes<HTMLElement>>;

package/lib/form/FieldNumber.d.ts

@@ -6,7 +6,7 @@ import '../@types/DataCombo.js';
 import '../@types/PermissionAttr.js';
 import '../inputs/base/types.js';
 import '../@types/Period.js';
-import '../tooltip/types.js';
+import '../internals/types.js';
 import '../@types/Position.js';
 
 declare const _default: React__default.ForwardRefExoticComponent<IFieldProps & React__default.RefAttributes<HTMLElement>>;

package/lib/form/FieldPeriod.d.ts

@@ -6,7 +6,7 @@ import '../@types/DataCombo.js';
 import '../@types/PermissionAttr.js';
 import '../inputs/base/types.js';
 import '../@types/Period.js';
-import '../tooltip/types.js';
+import '../internals/types.js';
 import '../@types/Position.js';
 
 declare const _default: React__default.ForwardRefExoticComponent<IFieldPeriodProps & React__default.RefAttributes<HTMLElement>>;

package/lib/form/helpers.d.ts

@@ -6,7 +6,7 @@ import '../@types/DataCombo.js';
 import '../@types/PermissionAttr.js';
 import '../inputs/base/types.js';
 import '../@types/Period.js';
-import '../tooltip/types.js';
+import '../internals/types.js';
 import '../@types/Position.js';
 
 declare const securityBeforeUnload = "securityBeforeUnload";

package/lib/form/index.d.ts

@@ -10,7 +10,7 @@ import '../@types/DataCombo.js';
 import '../@types/PermissionAttr.js';
 import '../inputs/base/types.js';
 import '../@types/Period.js';
-import '../tooltip/types.js';
+import '../internals/types.js';
 import '../@types/Position.js';
 
 declare const Form: ({ submitOnPressEnterKey, dataSource, securityBeforeUnload, handlerReset, handlerSubmit, handlerValidates, style, customClass, securityTitle, securityText, securityData, onDataChange, onValidateForm, externalFieldErrors, onSubmit, skeletonize, disabled, children, useInternalState, onValidateErrorsOnTab, }: FormProps) => JSX.Element;

package/lib/form/types.d.ts

@@ -5,7 +5,7 @@ import '../@types/DataCombo.js';
 import '../@types/PermissionAttr.js';
 import '../inputs/base/types.js';
 import '../@types/Period.js';
-import '../tooltip/types.js';
+import '../internals/types.js';
 import '../@types/Position.js';
 
 type Validator = (value: string) => string | undefined;

package/lib/form/withFieldHOC.d.ts

@@ -6,7 +6,7 @@ import '../@types/DataCombo.js';
 import '../@types/PermissionAttr.js';
 import '../inputs/base/types.js';
 import '../@types/Period.js';
-import '../tooltip/types.js';
+import '../internals/types.js';
 import '../@types/Position.js';
 
 declare const withFieldHOC: <ComponentProps extends WithFieldProps>(WrappedComponent: React__default.ComponentType<ComponentProps>) => React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ComponentProps> & React__default.RefAttributes<HTMLElement>>;

package/lib/form/withFormSecurity.d.ts

@@ -6,7 +6,7 @@ import '../@types/DataCombo.js';
 import '../@types/PermissionAttr.js';
 import '../inputs/base/types.js';
 import '../@types/Period.js';
-import '../tooltip/types.js';
+import '../internals/types.js';
 import '../@types/Position.js';
 
 declare const FormSecurityContext: React__default.Context<IFormSecurityContext>;

package/lib/icons/index.d.ts

@@ -4,10 +4,12 @@ import '../@types/PointerEvents.js';
 import '../@types/SizePixels.js';
 import '../@types/Icon.js';
 import './helper.js';
-import '../@types/ColorStyles.js';
-import '../tooltip/types.js';
 import '../@types/Position.js';
+import '../@types/ColorStyles.js';
 
-declare const Icon: ({ name, onClick, svgStruct, size, style, visible, disabled, customClass, customClassForContainer, colorStyle, color, viewBox, pointerEvents, tooltip, tooltipPosition, tooltipWidth, }: IconProps) => JSX.Element | null;
+declare const _default: {
+    (props: IconProps): JSX.Element;
+    displayName: string;
+};
 
-export { Icon as default };
+export { _default as default };

package/lib/icons/index.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _helper = _interopRequireDefault(require("./helper"));
+var _withTooltip = _interopRequireDefault(require("../internals/withTooltip"));
 require("../assets/styles/icon.scss");
-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; }
@@ -28,13 +28,11 @@ const Icon = _ref => {
     color,
     viewBox,
     pointerEvents = 'none',
-    tooltip,
-    tooltipPosition,
-    tooltipWidth
+    targetRef,
+    tooltip
   } = _ref;
   const isUsingColorStyle = colorStyle !== 'default';
   const colorFromProp = isUsingColorStyle || !color ? undefined : color;
-  const containerRef = (0, _react.useRef)(null);
   const refSvg = (0, _react.useRef)(null);
   const viewBoxFromIconOrSvgStrcut = name ? listIcon[name].viewbox : svgStruct?.viewbox;
   const getPaths = () => name ? listIcon[name].paths : svgStruct?.paths;
@@ -65,14 +63,11 @@ const Icon = _ref => {
   if (!name && !svgStruct) throw new Error('One of the "name" and "svgStruct" props must be filled');
   if (!visible) return null;
   if (!tooltip) return getSvg();
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: `icon-component-container ${customClassForContainer}`,
-    ref: containerRef
-  }, getSvg()), /*#__PURE__*/_react.default.createElement(_tooltip.Tooltip, {
-    targetRef: containerRef,
-    text: tooltip,
-    width: tooltipWidth,
-    position: tooltipPosition
-  }));
+    ref: r => {
+      if (targetRef && r) targetRef(r);
+    }
+  }, getSvg());
 };
-var _default = exports.default = Icon;
+var _default = exports.default = (0, _withTooltip.default)(Icon);

package/lib/icons/types.d.ts

@@ -2,10 +2,9 @@ import { CSSProperties } from 'react';
 import { PointerEvents } from '../@types/PointerEvents.js';
 import { SizePixels } from '../@types/SizePixels.js';
 import { IconNames } from '../@types/Icon.js';
+import { Position } from '../@types/Position.js';
 import { ColorStyles } from '../@types/ColorStyles.js';
-import { ITooltipCommonProps } from '../tooltip/types.js';
 import './helper.js';
-import '../@types/Position.js';
 
 type ListIconType = {
     [name: string]: {
@@ -17,7 +16,7 @@ type SvgStruct = {
     viewbox: string;
     paths: Array<string>;
 };
-type BaseIconProps = ITooltipCommonProps & {
+type BaseIconProps = {
     size?: SizePixels;
     customClass?: string;
     customClassForContainer?: string;
@@ -27,6 +26,10 @@ type BaseIconProps = ITooltipCommonProps & {
     pointerEvents?: PointerEvents;
     viewBox?: string;
     onClick?: () => void;
+    tooltipPosition?: Exclude<Position, 'center'>;
+    tooltipWidth?: string | number;
+    tooltip?: string;
+    targetRef?: (ref: HTMLDivElement) => void;
 };
 type ColorProps = ({
     colorStyle?: ColorStyles | 'default';

package/lib/index.d.ts

@@ -23,7 +23,6 @@ import './toolbar/Separator.js';
 import './toolbar/ButtonBar.js';
 import './toolbar/LabelBar.js';
 import './buttons/types.js';
-import './tooltip/types.js';
 import './labels/types.js';
 import './icons/types.js';
 import './@types/PointerEvents.js';

package/lib/inputs/base/InputTextBase.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';
 
 declare const _default: (props: IBaseProps) => JSX.Element;

package/lib/inputs/base/InputTextBase.js

@@ -9,12 +9,12 @@ var _lodash = _interopRequireDefault(require("lodash"));
 var _inputHOC = _interopRequireDefault(require("../inputHOC"));
 require("../../assets/styles/input.scss");
 var helpers = _interopRequireWildcard(require("./helpers"));
+var _withTooltip = _interopRequireDefault(require("../../internals/withTooltip"));
 var _permissionValidations = require("../../permissionValidations");
 var _hint = _interopRequireDefault(require("../../hint"));
 var _errorMessage = require("../errorMessage");
 var _textContent = _interopRequireDefault(require("../../textContent"));
 var _popover = _interopRequireDefault(require("../../popover"));
-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; }
@@ -51,6 +51,7 @@ const InputTextBase = props => {
     permissionAttr,
     onDeniedActions,
     handlerSetOnDenied,
+    targetRef,
     skeletonize = false,
     style,
     styleForInputContent,
@@ -72,10 +73,7 @@ const InputTextBase = props => {
     autoComplete = 'on',
     themePopover = 'light',
     popoverAlign = 'left',
-    tabIndex,
-    tooltip,
-    tooltipPosition,
-    tooltipWidth
+    tabIndex
   } = props;
   let propsInput;
   const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible, _permissionValidations.OPTIONS_ON_DENIED.readOnly, _permissionValidations.OPTIONS_ON_DENIED.hideContent];
@@ -86,7 +84,6 @@ const InputTextBase = props => {
     unvisible
   } = onDenied;
   const [showTooltip, setShowTooltip] = (0, _react.useState)(false);
-  const inputElementRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
     if (handlerSetOnDenied) handlerSetOnDenied(onDenied);
   }, []);
@@ -125,7 +122,7 @@ const InputTextBase = props => {
             inputRef(r);
           }
         }
-        inputElementRef.current = r;
+        if (targetRef) targetRef(r);
       }
     };
     if (!disableCallbacks) {
@@ -207,7 +204,7 @@ const InputTextBase = props => {
       textAlign: textAlign === 'center' ? 'left' : textAlign
     }
   }, /*#__PURE__*/_react.default.createElement(_textContent.default, {
-    ref: labelRef,
+    labelRef: labelRef,
     required: required,
     label: label,
     onHoverLabel: onHoverLabel,
@@ -265,11 +262,6 @@ const InputTextBase = props => {
     description: hint
   }), /*#__PURE__*/_react.default.createElement(_errorMessage.ErrorMessage, {
     messages: errorMessages
-  }), /*#__PURE__*/_react.default.createElement(_tooltip.Tooltip, {
-    targetRef: inputElementRef,
-    text: tooltip,
-    width: tooltipWidth,
-    position: tooltipPosition
   }));
 };
-var _default = exports.default = (0, _inputHOC.default)(InputTextBase);
+var _default = exports.default = (0, _inputHOC.default)((0, _withTooltip.default)(InputTextBase));

package/lib/inputs/base/Label.d.ts

@@ -0,0 +1,14 @@
+import { InputLabelProps } from './types.js';
+import 'react';
+import '../../@types/Align.js';
+import '../../@types/Period.js';
+import '../../@types/PermissionAttr.js';
+import '../../internals/types.js';
+import '../../@types/Position.js';
+
+declare const _default: {
+    (props: InputLabelProps): JSX.Element;
+    displayName: string;
+};
+
+export { _default as default };

package/lib/inputs/base/Label.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _withTooltip = _interopRequireDefault(require("../../internals/withTooltip"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Label = props => {
+  const {
+    label,
+    styleForLabel,
+    customClassForLabel,
+    labelUppercase,
+    required,
+    targetRef,
+    labelRef,
+    onHoverLabel
+  } = props;
+  return /*#__PURE__*/_react.default.createElement("span", {
+    style: styleForLabel,
+    ref: ref => {
+      if (ref) {
+        if (labelRef) labelRef.current = ref;
+        if (targetRef) targetRef(ref);
+      }
+    },
+    onMouseEnter: onHoverLabel,
+    className: `label ${customClassForLabel} ${labelUppercase && ' -uppercase'}`
+  }, label, required && /*#__PURE__*/_react.default.createElement("span", {
+    className: "-requiredlabel"
+  }, "*"));
+};
+var _default = exports.default = (0, _withTooltip.default)(Label);

package/lib/inputs/base/helpers.d.ts

@@ -3,7 +3,7 @@ import { TextAlign } from '../../@types/Align.js';
 import 'react';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 declare const getInputClass: ({ textAlign, readOnly, readOnlyClass, }: {