@qoretechnologies/reqore 0.36.2 → 0.36.3

package/src/components/Breadcrumbs/item.tsx

@@ -20,7 +20,6 @@ const ReqoreBreadcrumbsItem = forwardRef<HTMLButtonElement, IReqoreBreadcrumbIte
 
     return (
       <ReqoreButton
-        // @ts-ignore
         as={as}
         ref={ref}
         className='reqore-breadcrumbs-item'

package/src/components/Comment/index.tsx

@@ -1,4 +1,4 @@
-import { size } from 'lodash';
+import { omit, size } from 'lodash';
 import styled from 'styled-components';
 import { ReqoreButton, ReqoreColumn, ReqoreControlGroup, ReqoreDropdown } from '../..';
 import { TReqoreIntent } from '../../constants/theme';
@@ -96,10 +96,11 @@ export const ReqoreComment = ({
             {size(actions) ? (
               <ReqoreColumn justifyContent='flex-end'>
                 <ReqoreControlGroup minimal size='small'>
-                  {actions.map(({ label, actions, show, ...rest }) =>
+                  {actions.map(({ label, actions, ...rest }, index) =>
                     size(actions) ? (
                       <ReqoreDropdown
-                        {...rest}
+                        {...omit(rest, ['show'])}
+                        key={index}
                         label={label}
                         componentProps={{
                           minimal: true,
@@ -111,7 +112,8 @@ export const ReqoreComment = ({
                       />
                     ) : (
                       <ReqoreButton
-                        {...rest}
+                        {...omit(rest, ['show'])}
+                        key={index}
                         onClick={
                           rest.onClick
                             ? (e: React.MouseEvent<HTMLButtonElement>) => {

package/src/components/ControlGroup/index.tsx

@@ -131,9 +131,6 @@ const ReqoreControlGroup = memo(
     stack,
     isInsideStackGroup,
     isInsideVerticalGroup,
-    isFirstInLastGroup,
-    isLastInFirstGroup,
-    isLastInLastGroup,
     intent,
     customTheme,
     isFirst,
@@ -430,6 +427,7 @@ const ReqoreControlGroup = memo(
           ? [
               children.slice(overflowingChildren),
               <ReqoreButton
+                key='control-group-menu'
                 icon='MenuLine'
                 customTheme={customTheme}
                 tooltip={{

package/src/components/Dropdown/index.tsx

@@ -13,7 +13,10 @@ import ReqoreDropdownList, {
   TDropdownItemOnClick,
 } from './list';
 
-export interface IReqoreDropdownProps extends Partial<Omit<IPopoverOptions, 'openOnMount'>> {
+export interface IReqoreDropdownProps
+  extends Partial<
+    Omit<IPopoverOptions, 'openOnMount' | 'show' | 'targetElement' | 'wrapperProps'>
+  > {
   items?: IReqoreDropdownItem[];
   multiSelect?: boolean;
   buttonStyle?: React.CSSProperties;
@@ -50,7 +53,7 @@ const ReqoreDropdownListWrapper = ({
   );
 };
 
-function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
+function ReqoreDropdown<T = IReqoreButtonProps>({
   items,
   component,
   label,
@@ -72,21 +75,17 @@ function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
   closeOnOutsideClick,
   blur,
   closeOnAnyClick,
-  content,
   delay,
   maxHeight,
   maxWidth,
   noArrow = true,
   transparent,
-  show,
-  targetElement,
   useTargetWidth,
   listWidth,
   listHeight,
   passPopoverData,
   inputProps,
   scrollToSelected,
-  wrapperProps,
   paging,
   ...rest
 }: IReqoreDropdownProps & T) {

package/src/components/Dropdown/list.tsx

@@ -9,6 +9,7 @@ import ReqoreMenu from '../Menu';
 import ReqoreMenuDivider from '../Menu/divider';
 import ReqoreMenuItem, { IReqoreMenuItemProps } from '../Menu/item';
 import { ReqoreVerticalSpacer } from '../Spacer';
+import { IReqoreDropdownDividerProps } from './item';
 
 export type TDropdownItemOnClick = (item: IReqoreDropdownItem) => void;
 export interface IReqoreDropdownItem
@@ -133,7 +134,11 @@ const ReqoreDropdownList = memo(
               {finalItems.map(
                 ({ onClick, dividerAlign, divider, ...item }: IReqoreDropdownItem, index: number) =>
                   divider ? (
-                    <ReqoreMenuDivider key={index} {...item} align={dividerAlign} />
+                    <ReqoreMenuDivider
+                      key={index}
+                      {...(item as unknown as IReqoreDropdownDividerProps)}
+                      align={dividerAlign}
+                    />
                   ) : (
                     <ReqoreMenuItem
                       key={index}

package/src/components/Input/index.tsx

@@ -1,3 +1,4 @@
+import { omit } from 'lodash';
 import { rgba } from 'polished';
 import React, { forwardRef, useState } from 'react';
 import styled, { css } from 'styled-components';
@@ -177,7 +178,6 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
       flat,
       rounded,
       minimal,
-      children,
       readOnly,
       customTheme,
       intent,
@@ -216,7 +216,7 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
           </StyledIconWrapper>
         )}
         <StyledInput
-          {...rest}
+          {...omit(rest, ['children'])}
           effect={{
             interactive: !rest?.disabled && !readOnly,
             ...rest?.effect,

package/src/components/KeyValueTable/index.tsx

@@ -30,6 +30,7 @@ export interface IReqoreKeyValueTableProps
       | 'zoomable'
       | 'wrapperSize'
       | 'paging'
+      | 'onRowClick'
     > {
   data: { [key: string | number]: TReqoreKeyValueTableValue };
 
@@ -73,7 +74,7 @@ export const ReqoreKeyValueTable = ({
   ...rest
 }: IReqoreKeyValueTableProps) => {
   const { columns, items } = useMemo(() => {
-    let columns: IReqoreTableColumn[] = [
+    const columns: IReqoreTableColumn[] = [
       {
         dataId: 'tableKey',
         grow: 1,
@@ -115,6 +116,7 @@ export const ReqoreKeyValueTable = ({
             content: JSON.stringify(value),
             noArrow: true,
             useTargetWidth: true,
+            delay: 400,
           }),
           content: (data) =>
             valueRenderer?.(data, ReqoreTableValue) || <ReqoreTableValue value={data.value} />,
@@ -139,7 +141,7 @@ export const ReqoreKeyValueTable = ({
       });
     }
 
-    let items: IReqoreTableRowData[] = [];
+    const items: IReqoreTableRowData[] = [];
 
     keys(data).map((key) => {
       items.push({

package/src/components/Menu/index.tsx

@@ -84,8 +84,7 @@ const ReqoreMenu = forwardRef<HTMLDivElement, IReqoreMenuProps>(
         >
           {React.Children.map(children, (child) => {
             return child
-              ? // @ts-ignore
-                React.cloneElement(child, {
+              ? React.cloneElement(child, {
                   _insidePopover,
                   _popoverId,
                   customTheme: child.props?.customTheme || theme,

package/src/components/Menu/item.tsx

@@ -7,13 +7,8 @@ import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { IReqoreComponent } from '../../types/global';
 import { IReqoreButtonProps } from '../Button';
 
-// @ts-ignore
-export interface IReqoreMenuItemProps
-  extends IReqoreComponent,
-    React.HTMLAttributes<HTMLElement>,
-    IReqoreButtonProps {
+export interface IReqoreMenuItemProps extends IReqoreComponent, IReqoreButtonProps {
   label?: string | number;
-  as?: JSX.Element | React.ElementType | never;
   selected?: boolean;
   itemId?: string;
   onRightIconClick?: (itemId?: string, event?: React.MouseEvent<HTMLElement>) => void;
@@ -93,7 +88,6 @@ const ReqoreMenuItem = forwardRef<HTMLButtonElement, IReqoreMenuItemProps>(
     return (
       <ReqoreControlGroup stack={!!onRightIconClick} fluid fill>
         <ReqoreButton
-          //@ts-ignore
           as={as}
           {...rest}
           flat={flat}

package/src/components/Paging/index.tsx

@@ -50,7 +50,6 @@ export const StyledPagesWrapper = styled(ReqoreControlGroup)`
 `;
 
 function Pagination<T>({
-  allPages,
   back,
   first,
   currentPage,

package/src/components/Panel/index.tsx

@@ -473,12 +473,11 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
           return null;
         }
 
-        let {
+        const {
           id,
           actions,
           label,
           intent,
-          className,
           as: CustomElement,
           props = {},
           group,
@@ -486,6 +485,8 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
           ...rest
         }: IReqorePanelAction = action;
 
+        let { className }: IReqorePanelAction = action;
+
         // If the show prop is 'hover', add the hidden class to the action
         className = classNames(className, show === 'hover' ? 'reqore-panel-action-hidden' : '');
 

package/src/components/Popover/index.tsx

@@ -31,8 +31,6 @@ const Popover = memo(
   }: IReqorePopoverProps) => {
     const [ref, setRef] = useState(undefined);
 
-    console.log(rest);
-
     const popoverData: IPopoverControls = usePopover({ targetElement: ref, ...rest });
 
     useEffect(() => {
@@ -40,7 +38,6 @@ const Popover = memo(
     }, [popoverData]);
 
     if (isReqoreComponent) {
-      console.log(Component);
       return (
         <Component
           {...componentProps}
@@ -54,9 +51,7 @@ const Popover = memo(
     }
 
     return (
-      // @ts-ignore
       <StyledPopover
-        // @ts-ignore
         as={wrapperTag}
         className='reqore-popover-wrapper'
         ref={setRef}

package/src/components/RadioGroup/index.tsx

@@ -38,10 +38,11 @@ const ReqoreRadioGroup = ({
   ...rest
 }: IReqoreRadioGroupProps) => (
   <ReqoreControlGroup {...rest} vertical={vertical}>
-    {items.map(({ value, divider, ...itemRest }) =>
+    {items.map(({ value, divider, ...itemRest }, index) =>
       divider ? (
         <ReqoreMenuDivider
           {...itemRest}
+          key={index}
           size={size || itemRest.size}
           effect={{ textAlign: 'left', ...itemRest.effect }}
           margin={margin}

package/src/components/Sidebar/index.tsx

@@ -34,10 +34,10 @@ export interface IQorusSidebarItem {
   activePaths?: string[];
   submenu?: IQorusSidebarItem[];
   id: string;
-  as?: JSX.Element | string;
+  as?: React.ElementType | string;
   icon?: IReqoreIconName;
   exact?: boolean;
-  element?: JSX.Element;
+  element?: React.ElementType;
 }
 
 export interface IQorusSidebarProps {

package/src/components/Sidebar/item.tsx

@@ -18,8 +18,8 @@ export interface SidebarItemProps {
   tooltip?: string;
   children?: any;
   expandedSection?: string;
-  onFavoriteClick?: Function;
-  onUnfavoriteClick?: Function;
+  onFavoriteClick?: (id: string) => void;
+  onUnfavoriteClick?: (id: string) => void;
   favoriteItems?: any;
   formatItemName?: (itemName: string) => string;
   currentPath?: string;
@@ -34,14 +34,14 @@ export interface ISidebarTooltipProps {
   isCollapsed?: boolean;
   children: any;
   itemData: IQorusSidebarItem;
-  isActive: boolean;
-  isSubcategory: boolean;
-  isSubitem: boolean;
-  onClick: any;
+  isActive?: boolean;
+  isSubcategory?: boolean;
+  isSubitem?: boolean;
+  onClick?: any;
   useNativeTitle?: boolean;
 }
 
-const SidebarItemTooltip: Function = ({
+const SidebarItemTooltip = ({
   isCollapsed,
   children,
   itemData,
@@ -55,7 +55,6 @@ const SidebarItemTooltip: Function = ({
 
   if (useNativeTitle) {
     return (
-      //@ts-ignore
       <Element
         {...itemData.props}
         onClick={(e) => {
@@ -75,7 +74,6 @@ const SidebarItemTooltip: Function = ({
   }
 
   return (
-    //@ts-ignore
     <ReqorePopover
       component={Element}
       componentProps={{
@@ -215,7 +213,6 @@ const SidebarItemWrapper = ({
     const { element: Element } = itemData;
 
     return (
-      //@ts-ignore
       <Element
         isCollapsed={isCollapsed}
         backgroundColor={theme.sidebar?.main || theme.main}

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)`
@@ -85,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/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

@@ -180,7 +180,7 @@ const StyledTablesWrapper = styled.div`
 
 const ReqoreTable = ({
   className,
-  height = 300,
+  height,
   width,
   columns,
   data = [],
@@ -217,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));
@@ -249,7 +250,7 @@ const ReqoreTable = ({
   }, [_selectedQuant]);
 
   const finalColumns = useMemo(() => {
-    let fullColumns = [..._internalColumns];
+    const fullColumns = [..._internalColumns];
 
     if (selectable) {
       fullColumns.unshift({
@@ -669,6 +670,8 @@ const ReqoreTable = ({
           <ReqoreTableBody
             ref={refs[type]}
             refs={refs}
+            hoveredRow={hoveredRow}
+            setHoveredRow={setHoveredRow}
             type={type}
             data={items}
             columns={tableColumns}

package/src/components/Table/row.tsx

@@ -1,6 +1,6 @@
 /* @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 } from '../..';
@@ -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;
@@ -218,7 +221,7 @@ const ReqoreTableRow = ({
               flat,
               even: index % 2 === 0 ? true : false,
               intent: cell?.intent || data[index]._intent || intent,
-              hovered: isHovered,
+              hovered: hoveredRow === index,
               interactive: !!cell?.onClick || !!onRowClick,
               interactiveCell: !!cell?.onClick,
               onClick: (e: React.MouseEvent<HTMLDivElement>) => {
@@ -246,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/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} />