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

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

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

package/lib/buttons/RestoreButton.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 RestoreButton: (props: IButtonProps) => JSX.Element;
 

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

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

@@ -29,7 +29,7 @@ const BaseDialog = props => {
     children,
     open: openProp,
     onOpenChange,
-    zIndex,
+    zIndex = 0,
     handlerClose
   } = props;
   const {
@@ -136,7 +136,7 @@ const BaseDialog = props => {
     className: "modalcontainer",
     onMouseDown: handleClickOutside,
     style: {
-      zIndex: zIndex ? Number(zIndex) : undefined
+      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/helper.d.ts

@@ -631,26 +631,6 @@ declare const _default: {
         viewbox: string;
         paths: string[];
     };
-    clipboard: {
-        viewbox: string;
-        paths: string[];
-    };
-    square: {
-        viewbox: string;
-        paths: string[];
-    };
-    typography: {
-        viewbox: string;
-        paths: string[];
-    };
-    shrink: {
-        viewbox: string;
-        paths: string[];
-    };
-    minus: {
-        viewbox: string;
-        paths: string[];
-    };
 };
 
 export { _default as default };

package/lib/icons/helper.js

@@ -636,25 +636,5 @@ var _default = exports.default = {
   earth: {
     viewbox: '0 0 16 16',
     paths: ['M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 15c-0.984 0-1.92-0.203-2.769-0.57l3.643-4.098c0.081-0.092 0.126-0.21 0.126-0.332v-1.5c0-0.276-0.224-0.5-0.5-0.5-1.765 0-3.628-1.835-3.646-1.854-0.094-0.094-0.221-0.146-0.354-0.146h-2c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.189 0.107 0.363 0.276 0.447l1.724 0.862v2.936c-1.813-1.265-3-3.366-3-5.745 0-1.074 0.242-2.091 0.674-3h1.826c0.133 0 0.26-0.053 0.354-0.146l2-2c0.094-0.094 0.146-0.221 0.146-0.354v-1.21c0.634-0.189 1.305-0.29 2-0.29 1.1 0 2.141 0.254 3.067 0.706-0.065 0.055-0.128 0.112-0.188 0.172-0.567 0.567-0.879 1.32-0.879 2.121s0.312 1.555 0.879 2.121c0.569 0.569 1.332 0.879 2.119 0.879 0.049 0 0.099-0.001 0.149-0.004 0.216 0.809 0.605 2.917-0.131 5.818-0.007 0.027-0.011 0.055-0.013 0.082-1.271 1.298-3.042 2.104-5.002 2.104z']
-  },
-  clipboard: {
-    viewbox: '0 0 16 16',
-    paths: ['M14.5 2h-4.5c0-1.105-0.895-2-2-2s-2 0.895-2 2h-4.5c-0.276 0-0.5 0.224-0.5 0.5v13c0 0.276 0.224 0.5 0.5 0.5h13c0.276 0 0.5-0.224 0.5-0.5v-13c0-0.276-0.224-0.5-0.5-0.5zM8 1c0.552 0 1 0.448 1 1s-0.448 1-1 1c-0.552 0-1-0.448-1-1s0.448-1 1-1zM14 15h-12v-12h2v1.5c0 0.276 0.224 0.5 0.5 0.5h7c0.276 0 0.5-0.224 0.5-0.5v-1.5h2v12z', 'M11.5 9h-7c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h7c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5z', 'M11.5 11h-7c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h7c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5z', 'M11.5 13h-7c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h7c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5z']
-  },
-  square: {
-    viewbox: '0 0 16 16',
-    paths: ['M0 0h16v16h-16z']
-  },
-  typography: {
-    viewbox: '0 0 16 16',
-    paths: ['M1 0v5l2-3h4v13h-2l-1 1h8l-1-1h-2v-13h4l2 3v-5z']
-  },
-  shrink: {
-    viewbox: '0 0 16 16',
-    paths: ['M9 7h6.5l-2.5-2.5 3-3-1.5-1.5-3 3-2.5-2.5z', 'M9 9v6.5l2.5-2.5 3 3 1.5-1.5-3-3 2.5-2.5z', 'M7 9h-6.5l2.5 2.5-3 3 1.5 1.5 3-3 2.5 2.5z', 'M7 7v-6.5l-2.5 2.5-3-3-1.5 1.5 3 3-2.5 2.5z']
-  },
-  minus: {
-    viewbox: '0 0 16 16',
-    paths: ['M0 5h16v6h-16z']
   }
 };

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;