@qoretechnologies/reqore 0.36.1 → 0.36.3

package/src/components/Table/body.tsx

@@ -17,6 +17,8 @@ export interface IReqoreTableSectionBodyProps extends IReqoreTableRowOptions {
   };
   type: 'left' | 'right' | 'main';
   onScrollChange?: (isScrolled: boolean) => void;
+  setHoveredRow?: (index: number) => void;
+  hoveredRow?: number;
 }
 
 const StyledList = styled(List)`
@@ -42,29 +44,32 @@ const ReqoreTableBody = forwardRef<HTMLDivElement, IReqoreTableSectionBodyProps>
 
     useMount(() => {
       targetRef.current?.addEventListener('wheel', (e) => {
-        if (e.deltaY) {
-          e.preventDefault();
+        // Only scroll if the element is scrollable
+        if (refs[type].current?.scrollHeight > refs[type].current?.clientHeight) {
+          if (e.deltaY) {
+            e.preventDefault();
 
-          const currentScroll = refs[type].current?.scrollTop + e.deltaY;
+            const currentScroll = refs[type].current?.scrollTop + e.deltaY;
 
-          onScrollChange?.(currentScroll > 0);
+            onScrollChange?.(currentScroll > 0);
 
-          refs[type].current?.scrollTo({ top: currentScroll });
+            refs[type].current?.scrollTo({ top: currentScroll });
 
-          if (type === 'left') {
-            refs.main.current?.scrollTo({ top: refs.main.current?.scrollTop + e.deltaY });
-            refs.right.current?.scrollTo({ top: refs.right.current?.scrollTop + e.deltaY });
-          } else if (type === 'main') {
-            refs.left.current?.scrollTo({ top: refs.left.current?.scrollTop + e.deltaY });
-            refs.right.current?.scrollTo({ top: refs.right.current?.scrollTop + e.deltaY });
-          } else if (type === 'right') {
-            refs.main.current?.scrollTo({ top: refs.main.current?.scrollTop + e.deltaY });
-            refs.left.current?.scrollTo({ top: refs.left.current?.scrollTop + e.deltaY });
+            if (type === 'left') {
+              refs.main.current?.scrollTo({ top: refs.main.current?.scrollTop + e.deltaY });
+              refs.right.current?.scrollTo({ top: refs.right.current?.scrollTop + e.deltaY });
+            } else if (type === 'main') {
+              refs.left.current?.scrollTo({ top: refs.left.current?.scrollTop + e.deltaY });
+              refs.right.current?.scrollTo({ top: refs.right.current?.scrollTop + e.deltaY });
+            } else if (type === 'right') {
+              refs.main.current?.scrollTo({ top: refs.main.current?.scrollTop + e.deltaY });
+              refs.left.current?.scrollTo({ top: refs.left.current?.scrollTop + e.deltaY });
+            }
           }
-        }
 
-        if (e.deltaX && type === 'main') {
-          refs.header.current?.scrollTo({ left: refs.main.current?.scrollLeft + e.deltaX });
+          if (e.deltaX && type === 'main') {
+            refs.header.current?.scrollTo({ left: refs.main.current?.scrollLeft + e.deltaX });
+          }
         }
       });
     });
@@ -82,7 +87,11 @@ const ReqoreTableBody = forwardRef<HTMLDivElement, IReqoreTableSectionBodyProps>
         itemCount={itemCount}
         // If the defined height is less than the count of items' height
         // use that height instead
-        height={height > itemCount * rowHeight ? itemCount * rowHeight : height}
+        height={
+          (!height && height !== 0) || height > itemCount * rowHeight
+            ? itemCount * rowHeight
+            : height
+        }
         className='reqore-table-body'
         itemSize={rest.flat ? TABLE_SIZE_TO_PX[size] : TABLE_SIZE_TO_PX[size] + 1}
         itemData={{

package/src/components/Table/cell.tsx

@@ -1,9 +1,13 @@
 import { lighten, rgba } from 'polished';
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { IReqoreTableColumn } from '.';
 import { TEXT_FROM_SIZE } from '../../constants/sizes';
 import { changeLightness, getReadableColorFrom } from '../../helpers/colors';
 import { alignToFlexAlign } from '../../helpers/utils';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs';
+import { useTooltip } from '../../hooks/useTooltip';
+import { IWithReqoreTooltip } from '../../types/global';
 import { TReqoreColor } from '../Effect';
 import { IReqoreTableCellStyle } from './row';
 
@@ -11,7 +15,8 @@ export interface IReqoreCustomTableBodyCellProps extends IReqoreTableBodyCellPro
 export interface IReqoreCustomTableBodyCell extends React.FC<IReqoreCustomTableBodyCellProps> {}
 export interface IReqoreTableBodyCellProps
   extends Partial<IReqoreTableColumn>,
-    React.HTMLAttributes<HTMLDivElement> {
+    React.HTMLAttributes<HTMLDivElement>,
+    IWithReqoreTooltip {
   children?: React.ReactNode;
   padded?: IReqoreTableColumn['cell']['padded'];
 }
@@ -118,6 +123,12 @@ export const StyledTableCell = styled.div<IReqoreTableCellStyle>`
   }}
 `;
 
-export const ReqoreTableBodyCell = (props: IReqoreTableBodyCellProps) => {
-  return <StyledTableCell {...props} />;
-};
+export const ReqoreTableBodyCell = forwardRef<HTMLButtonElement, IReqoreTableBodyCellProps>(
+  (props: IReqoreTableBodyCellProps, ref) => {
+    const { targetRef } = useCombinedRefs(ref);
+
+    useTooltip(targetRef.current, props.tooltip);
+
+    return <StyledTableCell {...props} ref={targetRef} />;
+  }
+);

package/src/components/Table/helpers.ts

@@ -249,7 +249,7 @@ export const prepareColumns = (
       };
     }
 
-    let newWidth = calculateMinimumCellWidth(
+    const newWidth = calculateMinimumCellWidth(
       column.width || 50,
       size,
       column.header?.icon,

package/src/components/Table/index.tsx

@@ -3,10 +3,17 @@ import { size as count, isArray } from 'lodash';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { useMeasure, useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
-import { ReqoreMessage, ReqorePaginationContainer, ReqorePanel, ReqoreVerticalSpacer } from '../..';
+import {
+  ReqoreMessage,
+  ReqorePaginationContainer,
+  ReqorePanel,
+  ReqoreVerticalSpacer,
+  useReqoreTheme,
+} from '../..';
 import { TReqorePaginationType, getPagingObjectFromType } from '../../constants/paging';
 import { TABLE_SIZE_TO_PX, TSizes } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
+import ReqoreThemeProvider from '../../containers/ThemeProvider';
 import { useQueryWithDelay } from '../../hooks/useQueryWithDelay';
 import { IReqoreIntent, IReqoreTooltip } from '../../types/global';
 import { IReqoreButtonProps, TReqoreBadge } from '../Button';
@@ -173,7 +180,7 @@ const StyledTablesWrapper = styled.div`
 
 const ReqoreTable = ({
   className,
-  height = 300,
+  height,
   width,
   columns,
   data = [],
@@ -183,7 +190,6 @@ const ReqoreTable = ({
   selected,
   onSelectedChange,
   selectToggleTooltip,
-  customTheme,
   onRowClick,
   striped,
   selectedRowIntent = 'info',
@@ -211,6 +217,7 @@ const ReqoreTable = ({
   const mainTableRef = useRef<HTMLDivElement>(null);
   const mainHeaderRef = useRef<HTMLDivElement>(null);
 
+  const [hoveredRow, setHoveredRow] = useState<number>();
   const [isScrolled, setIsScrolled] = useState<boolean>(false);
   const [_data, setData] = useState<IReqoreTableData>(data || []);
   const [_sort, setSort] = useState<IReqoreTableSort | undefined>(fixSort(sort));
@@ -222,6 +229,7 @@ const ReqoreTable = ({
   const [_internalColumns, setColumns] = useState<IReqoreTableColumn[]>(columns);
   const [zoom, setZoom] = useState<number>(sizeToZoom[size]);
   const [showExportModal, setShowExportModal] = useState<'full' | 'current' | undefined>(undefined);
+  const theme = useReqoreTheme('main', rest.customTheme, intent);
 
   const [wrapperRef, sizes] = useMeasure();
   const { query, preQuery, setQuery, setPreQuery } = useQueryWithDelay(
@@ -242,7 +250,7 @@ const ReqoreTable = ({
   }, [_selectedQuant]);
 
   const finalColumns = useMemo(() => {
-    let fullColumns = [..._internalColumns];
+    const fullColumns = [..._internalColumns];
 
     if (selectable) {
       fullColumns.unshift({
@@ -554,6 +562,7 @@ const ReqoreTable = ({
 
       if (exportable) {
         moreActions = [
+          ...moreActions,
           ...getExportActions((type) => setShowExportModal(type)),
           { divider: true, line: true },
         ];
@@ -561,6 +570,7 @@ const ReqoreTable = ({
 
       if (zoomable) {
         moreActions = [
+          ...moreActions,
           ...getZoomActions('reqore-table', zoom, setZoom, true),
           { divider: true, line: true },
         ];
@@ -660,6 +670,8 @@ const ReqoreTable = ({
           <ReqoreTableBody
             ref={refs[type]}
             refs={refs}
+            hoveredRow={hoveredRow}
+            setHoveredRow={setHoveredRow}
             type={type}
             data={items}
             columns={tableColumns}
@@ -703,47 +715,49 @@ const ReqoreTable = ({
         getContentRef={wrapperRef}
         badge={badge}
       >
-        <ReqorePaginationContainer<IReqoreTableRowData>
-          items={transformedData}
-          type={
-            pagingOptions
-              ? {
-                  ...pagingOptions,
-                  onPageChange: () => {
-                    if (!pagingOptions.infinite) {
-                      handleScrollToTop();
-                    }
-                  },
-                }
-              : undefined
-          }
-        >
-          {(pagedData) => (
-            <>
-              {showExportModal && (
-                <ReqoreExportModal
-                  data={removeInternalData(
-                    showExportModal === 'current' ? pagedData : transformedData
-                  )}
-                  onClose={() => setShowExportModal(undefined)}
-                />
-              )}
-              <StyledTablesWrapper className='reqore-table-wrapper'>
-                {renderTable('left', pagedData)}
-                {renderTable('main', pagedData)}
-                {renderTable('right', pagedData)}
-              </StyledTablesWrapper>
-              {count(pagedData) === 0 ? (
-                <>
-                  <ReqoreVerticalSpacer height={10} />
-                  <ReqoreMessage flat size={size} icon='Search2Line'>
-                    {emptyMessage}
-                  </ReqoreMessage>
-                </>
-              ) : null}
-            </>
-          )}
-        </ReqorePaginationContainer>
+        <ReqoreThemeProvider theme={theme}>
+          <ReqorePaginationContainer<IReqoreTableRowData>
+            items={transformedData}
+            type={
+              pagingOptions
+                ? {
+                    ...pagingOptions,
+                    onPageChange: () => {
+                      if (!pagingOptions.infinite) {
+                        handleScrollToTop();
+                      }
+                    },
+                  }
+                : undefined
+            }
+          >
+            {(pagedData) => (
+              <>
+                {showExportModal && (
+                  <ReqoreExportModal
+                    data={removeInternalData(
+                      showExportModal === 'current' ? pagedData : transformedData
+                    )}
+                    onClose={() => setShowExportModal(undefined)}
+                  />
+                )}
+                <StyledTablesWrapper className='reqore-table-wrapper'>
+                  {renderTable('left', pagedData)}
+                  {renderTable('main', pagedData)}
+                  {renderTable('right', pagedData)}
+                </StyledTablesWrapper>
+                {count(pagedData) === 0 ? (
+                  <>
+                    <ReqoreVerticalSpacer height={10} />
+                    <ReqoreMessage flat size={size} icon='Search2Line'>
+                      {emptyMessage}
+                    </ReqoreMessage>
+                  </>
+                ) : null}
+              </>
+            )}
+          </ReqorePaginationContainer>
+        </ReqoreThemeProvider>
       </ReqorePanel>
     </>
   );

package/src/components/Table/row.tsx

@@ -1,9 +1,9 @@
 /* @flow */
 import { isFunction, isString } from 'lodash';
-import React, { ReactElement, useState } from 'react';
+import React, { ReactElement } from 'react';
 import styled, { css } from 'styled-components';
 import { IReqoreTableColumn, IReqoreTableData, IReqoreTableRowClick } from '.';
-import { ReqoreButton, ReqoreControlGroup, ReqorePopover } from '../..';
+import { ReqoreButton, ReqoreControlGroup } from '../..';
 import { SIZE_TO_PX, TSizes } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import { IReqoreTooltip } from '../../types/global';
@@ -28,6 +28,8 @@ export interface IReqoreTableRowOptions {
   flat?: boolean;
   cellComponent?: IReqoreCustomTableBodyCell;
   rowComponent?: IReqoreCustomTableRow;
+  setHoveredRow?: (index: number) => void;
+  hoveredRow?: number;
 }
 export interface IReqoreCustomTableRowProps extends IReqoreTableRowOptions {
   style?: React.CSSProperties;
@@ -90,11 +92,12 @@ const ReqoreTableRow = ({
     flat,
     cellComponent,
     rowComponent,
+    setHoveredRow,
+    hoveredRow,
   },
   style,
   index,
 }: IReqoreTableRowProps) => {
-  const [isHovered, setIsHovered] = useState<boolean>(false);
   const isSelected =
     data[index]._selectId &&
     selected.find((selectId) => selectId.toString() === data[index]._selectId.toString());
@@ -145,12 +148,12 @@ const ReqoreTableRow = ({
 
     if (isString(content)) {
       // Separate the content string by colon
-      let [type, intentOrColor] = content.split(':');
+      const [type, intentOrColor] = content.split(':');
       // Check if the intent starts with hash for tags
-      let intent: TReqoreIntent = intentOrColor?.startsWith('#')
+      const intent: TReqoreIntent = intentOrColor?.startsWith('#')
         ? undefined
         : (intentOrColor as TReqoreIntent);
-      let color: TReqoreHexColor =
+      const color: TReqoreHexColor =
         intentOrColor?.startsWith('#') && type === 'tag'
           ? (intentOrColor as TReqoreHexColor)
           : undefined;
@@ -200,48 +203,44 @@ const ReqoreTableRow = ({
           : {};
 
         return (
-          <ReqorePopover
+          <CellComponent
             key={dataId}
-            component={CellComponent}
-            isReqoreComponent
-            componentProps={
-              {
-                width: resizedWidth || width,
-                minWidth,
-                maxWidth,
-                grow,
-                align,
-                size,
-                striped,
-                padded: cell?.padded,
-                disabled: data[index]._disabled,
-                selected: !!isSelected,
-                selectedIntent: selectedRowIntent,
-                flat,
-                even: index % 2 === 0 ? true : false,
-                intent: cell?.intent || data[index]._intent || intent,
-                hovered: isHovered,
-                interactive: !!cell?.onClick || !!onRowClick,
-                interactiveCell: !!cell?.onClick,
-                onClick: (e: React.MouseEvent<HTMLDivElement>) => {
-                  if (cell?.onClick) {
-                    e.stopPropagation();
-                    cell.onClick(data[index]);
-                  } else if (onRowClick) {
-                    e.stopPropagation();
-                    onRowClick(data[index]);
-                  } else if (selectable && data[index]._selectId) {
-                    // Otherwise select the row if selectable
-                    onSelectClick(data[index]._selectId!);
-                  }
-                },
-                className: 'reqore-table-cell',
-              } as IReqoreTableCellStyle
-            }
-            {...tooltip}
+            {...({
+              width: resizedWidth || width,
+              minWidth,
+              maxWidth,
+              grow,
+              align,
+              size,
+              striped,
+              tooltip,
+              padded: cell?.padded,
+              disabled: data[index]._disabled,
+              selected: !!isSelected,
+              selectedIntent: selectedRowIntent,
+              flat,
+              even: index % 2 === 0 ? true : false,
+              intent: cell?.intent || data[index]._intent || intent,
+              hovered: hoveredRow === index,
+              interactive: !!cell?.onClick || !!onRowClick,
+              interactiveCell: !!cell?.onClick,
+              onClick: (e: React.MouseEvent<HTMLDivElement>) => {
+                if (cell?.onClick) {
+                  e.stopPropagation();
+                  cell.onClick(data[index]);
+                } else if (onRowClick) {
+                  e.stopPropagation();
+                  onRowClick(data[index]);
+                } else if (selectable && data[index]._selectId) {
+                  // Otherwise select the row if selectable
+                  onSelectClick(data[index]._selectId!);
+                }
+              },
+              className: 'reqore-table-cell',
+            } as IReqoreTableCellStyle)}
           >
             {renderContent(cell, data[index], dataId, align)}
-          </ReqorePopover>
+          </CellComponent>
         );
       }
     );
@@ -250,15 +249,15 @@ const ReqoreTableRow = ({
     <RowComponent
       style={style}
       className='reqore-table-row'
-      interactive={!!onRowClick}
+      interactive={!!onRowClick && !data[index]._disabled}
       onMouseEnter={() => {
         // Set hovered is this row is interactive
         if (onRowClick || (selectable && data[index]._selectId && !data[index]._disabled)) {
-          setIsHovered(true);
+          setHoveredRow(index);
         }
       }}
       onMouseLeave={() => {
-        setIsHovered(false);
+        setHoveredRow(undefined);
       }}
     >
       {renderCells(columns, data)}

package/src/components/Tabs/item.tsx

@@ -1,3 +1,4 @@
+import { omit } from 'lodash';
 import { forwardRef, memo } from 'react';
 import styled, { css } from 'styled-components';
 import { IReqoreTabsListItem } from '.';
@@ -129,7 +130,6 @@ const ReqoreTabsListItem = memo(
         className,
         flat = true,
         wrapTabNames,
-        id,
         padded,
         ...rest
       }: IReqoreTabListItemProps,
@@ -168,7 +168,7 @@ const ReqoreTabsListItem = memo(
                 tooltip={tooltip}
                 customTheme={theme}
                 className={`reqore-tabs-list-item ${active ? 'reqore-tabs-list-item-active' : ''}`}
-                {...rest}
+                {...omit(rest, ['id'])}
               >
                 {label}
               </ReqoreButton>

package/src/components/TimeAgo/index.tsx

@@ -4,11 +4,11 @@ import { useInterval } from 'react-use';
 import { getTimeAgoIntervalDelay } from '../../helpers/time';
 
 export const TimeAgo = ({ time }: { time: number | string }) => {
-  const [_lastUpdate, _setLastUpdate] = useState<number>(Date.now());
+  const setUpdate = useState<number>(Date.now());
   const _time = typeof time === 'number' ? time : Date.parse(time);
 
   useInterval(() => {
-    _setLastUpdate(Date.now());
+    setUpdate[1](Date.now());
   }, getTimeAgoIntervalDelay(_time));
 
   return timeago(_time);

package/src/components/Tree/index.tsx

@@ -13,7 +13,7 @@ import { getExportActions, getZoomActions, sizeToZoom, zoomToSize } from '../Tab
 import ReqoreTag from '../Tag';
 
 export interface IReqoreTreeProps extends IReqorePanelProps, IWithReqoreSize {
-  data: Object | Array<any>;
+  data: Record<string, unknown> | Array<any>;
   mode?: 'tree' | 'copy';
   expanded?: boolean;
   showTypes?: boolean;
@@ -36,7 +36,6 @@ export const StyledTreeLabel = styled(ReqoreMessage)`
 
 export const ReqoreTree = ({
   data,
-  mode = 'tree',
   size = 'normal',
   expanded,
   showTypes,
@@ -154,21 +153,6 @@ export const ReqoreTree = ({
     });
   };
 
-  const renderText = (data, tabs = '') => {
-    let text = '';
-
-    Object.keys(data).forEach((key) => {
-      if (typeof data[key] !== 'object' || !data[key]) {
-        text += `${tabs}${key}: ${data[key]}\r\n`;
-      } else {
-        text += `${tabs}${key}:\r\n`;
-        text += renderText(data[key], `${tabs}\t`);
-      }
-    });
-
-    return text;
-  };
-
   const actions = useMemo(() => {
     let _actions: IReqorePanelAction[] = [];
 

package/src/constants/sizes.ts

@@ -110,11 +110,11 @@ export const TEXT_FROM_SIZE = {
 };
 
 export const ICON_FROM_SIZE = {
-  tiny: 11,
-  small: 14,
-  normal: 17,
-  big: 20,
-  huge: 23,
+  tiny: 13,
+  small: 17,
+  normal: 20,
+  big: 26,
+  huge: 33,
 };
 
 export const PADDING_FROM_SIZE = {

package/src/containers/UIProvider.tsx

@@ -66,7 +66,7 @@ const StyledPortal = styled.div`
   `}
 `;
 
-const ReqorePortal = forwardRef<HTMLDivElement, {}>((_props, ref) => {
+const ReqorePortal = forwardRef<HTMLDivElement, object>((_props, ref) => {
   return (
     <ReqoreThemeProvider>
       <StyledPortal id='reqore-portal' ref={ref} />

package/src/helpers/sidebar.ts

@@ -1,47 +1,42 @@
-import { reduce, size } from "lodash";
-import {
-  IQorusSidebarCustomItem,
-  IQorusSidebarItems,
-} from "../components/Sidebar";
+import { reduce, size } from 'lodash';
+import { IQorusSidebarCustomItem, IQorusSidebarItems } from '../components/Sidebar';
 
-export const transformMenu: Function = (
+export const transformMenu = (
   menu: IQorusSidebarItems,
   bookmarks: string[],
   customItems?: IQorusSidebarCustomItem[]
-): Object => {
+) => {
   let newMenu: IQorusSidebarItems = { ...menu };
   let _qorusCustomElements;
   let _qorusBookmarks;
 
   if (size(bookmarks)) {
     _qorusBookmarks = {
-      title: "Bookmarks",
+      title: 'Bookmarks',
       items: [],
     };
 
     newMenu = reduce(
       newMenu,
       (cur, menuSection, name: string) => {
-        let newSection = { ...menuSection };
+        const newSection = { ...menuSection };
 
         newSection.items = [...newSection.items]
           .map((newSectionItem) => {
             const copySectionItem = { ...newSectionItem };
 
             if (copySectionItem.submenu) {
-              copySectionItem.submenu = copySectionItem.submenu.filter(
-                (submenuItem) => {
-                  const isItemInSubmenu = bookmarks.find(
-                    (favoriteItem) => favoriteItem === submenuItem.id
-                  );
+              copySectionItem.submenu = copySectionItem.submenu.filter((submenuItem) => {
+                const isItemInSubmenu = bookmarks.find(
+                  (favoriteItem) => favoriteItem === submenuItem.id
+                );
 
-                  if (isItemInSubmenu) {
-                    _qorusBookmarks.items.push(submenuItem);
-                  }
-
-                  return !isItemInSubmenu;
+                if (isItemInSubmenu) {
+                  _qorusBookmarks.items.push(submenuItem);
                 }
-              );
+
+                return !isItemInSubmenu;
+              });
 
               if (size(copySectionItem.submenu)) {
                 return copySectionItem;
@@ -49,11 +44,7 @@ export const transformMenu: Function = (
                 return undefined;
               }
             } else {
-              if (
-                !bookmarks.find(
-                  (favoriteItem) => favoriteItem === copySectionItem.id
-                )
-              ) {
+              if (!bookmarks.find((favoriteItem) => favoriteItem === copySectionItem.id)) {
                 return copySectionItem;
               } else {
                 _qorusBookmarks.items.push(copySectionItem);
@@ -82,17 +73,10 @@ export const transformMenu: Function = (
   return newMenu;
 };
 
-export const isActive = (
-  to: string,
-  currentPath: string,
-  exact?: boolean
-): boolean => (exact ? currentPath === to : currentPath.startsWith(to));
-
-export const isActiveMulti: Function = (
-  to: string[],
-  currentPath: string,
-  exact?: boolean
-): boolean => {
+export const isActive = (to: string, currentPath: string, exact?: boolean): boolean =>
+  exact ? currentPath === to : currentPath.startsWith(to);
+
+export const isActiveMulti = (to: string[], currentPath: string, exact?: boolean): boolean => {
   let active: boolean = false;
 
   to.forEach((path: string) => {

package/src/helpers/utils.ts

@@ -13,7 +13,7 @@ import { NUMBER_TO_SIZE, SIZES, SIZE_TO_NUMBER, TSizes } from '../constants/size
 
 export const sleep = async (ms: number) => await new Promise((r) => setTimeout(r, ms));
 
-export const getTypeFromValue: Function = (item: any): string => {
+export const getTypeFromValue = (item: any): string => {
   if (isBoolean(item)) {
     return 'boolean';
   }