@qoretechnologies/reqore 0.36.2 → 0.36.4

package/src/components/Table/index.tsx

@@ -18,8 +18,9 @@ import { useQueryWithDelay } from '../../hooks/useQueryWithDelay';
 import { IReqoreIntent, IReqoreTooltip } from '../../types/global';
 import { IReqoreButtonProps, TReqoreBadge } from '../Button';
 import { IReqoreDropdownItem } from '../Dropdown/list';
-import { ReqoreExportModal } from '../ExportModal';
+import { IReqoreExportModalProps, ReqoreExportModal } from '../ExportModal';
 import ReqoreInput, { IReqoreInputProps } from '../Input';
+import { TReqoreKeyValueTableExportMapper } from '../KeyValueTable';
 import { IReqorePanelAction, IReqorePanelProps, IReqorePanelSubAction } from '../Panel';
 import ReqoreTableBody from './body';
 import ReqoreTableHeader, { IReqoreCustomHeaderCellComponent } from './header';
@@ -43,7 +44,7 @@ import {
 import { IReqoreTableRowOptions } from './row';
 
 export type TReqoreTableColumnContent =
-  | React.FC<{ [key: string]: any; _selectId?: string | number; _size: TSizes; _dataId: string }>
+  | ((data: IReqoreTableRowData) => any)
   | 'time-ago'
   | 'tag'
   | `tag:${TReqoreIntent}`
@@ -51,7 +52,9 @@ export type TReqoreTableColumnContent =
   | 'title'
   | `title:${TReqoreIntent}`
   | 'text'
-  | `text:${TReqoreIntent}`;
+  | `text:${TReqoreIntent}`
+  | string
+  | number;
 
 export interface IReqoreTableColumn extends IReqoreIntent {
   dataId: string;
@@ -136,6 +139,10 @@ export interface IReqoreTableProps extends IReqorePanelProps {
   headerCellComponent?: IReqoreCustomHeaderCellComponent;
   rowComponent?: IReqoreTableRowOptions['rowComponent'];
   bodyCellComponent?: IReqoreTableRowOptions['cellComponent'];
+
+  exportMapper?:
+    | TReqoreKeyValueTableExportMapper
+    | ((data: unknown[]) => IReqoreExportModalProps['data']);
 }
 
 export interface IReqoreTableStyle {
@@ -178,9 +185,29 @@ const StyledTablesWrapper = styled.div`
   overflow: hidden;
 `;
 
+export interface IReqoreTableExportModalProps {
+  data: unknown;
+  onClose: () => void;
+  exportMapper?: IReqoreTableProps['exportMapper'];
+}
+
+const ReqoreTableExportModal = ({ data, onClose, exportMapper }) => {
+  const fixedData = useMemo(() => {
+    let _fixedData = removeInternalData(data);
+
+    if (exportMapper) {
+      _fixedData = exportMapper(_fixedData);
+    }
+
+    return _fixedData;
+  }, [data, exportMapper]);
+
+  return <ReqoreExportModal data={fixedData} onClose={onClose} />;
+};
+
 const ReqoreTable = ({
   className,
-  height = 300,
+  height,
   width,
   columns,
   data = [],
@@ -210,6 +237,7 @@ const ReqoreTable = ({
   onSelectClick,
   paging,
   exportable,
+  exportMapper,
   ...rest
 }: IReqoreTableProps) => {
   const leftTableRef = useRef<HTMLDivElement>(null);
@@ -217,6 +245,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 +278,7 @@ const ReqoreTable = ({
   }, [_selectedQuant]);
 
   const finalColumns = useMemo(() => {
-    let fullColumns = [..._internalColumns];
+    const fullColumns = [..._internalColumns];
 
     if (selectable) {
       fullColumns.unshift({
@@ -669,6 +698,8 @@ const ReqoreTable = ({
           <ReqoreTableBody
             ref={refs[type]}
             refs={refs}
+            hoveredRow={hoveredRow}
+            setHoveredRow={setHoveredRow}
             type={type}
             data={items}
             columns={tableColumns}
@@ -731,11 +762,10 @@ const ReqoreTable = ({
             {(pagedData) => (
               <>
                 {showExportModal && (
-                  <ReqoreExportModal
-                    data={removeInternalData(
-                      showExportModal === 'current' ? pagedData : transformedData
-                    )}
+                  <ReqoreTableExportModal
+                    data={showExportModal === 'current' ? pagedData : transformedData}
                     onClose={() => setShowExportModal(undefined)}
+                    exportMapper={exportMapper}
                   />
                 )}
                 <StyledTablesWrapper className='reqore-table-wrapper'>

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;
@@ -176,7 +179,7 @@ const ReqoreTableRow = ({
             </ReqoreP>
           );
         default:
-          return <ReqoreP className='reqore-table-text'>{data[dataId]}</ReqoreP>;
+          return <ReqoreP className='reqore-table-text'>{content}</ReqoreP>;
       }
     }
 
@@ -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} />

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';
   }
@@ -57,7 +57,12 @@ export const getLineCount = (value: string | null): number => {
 // to a CSV string
 export const convertToCSV = (objArray: any[]): string => {
   const header = Object.keys(objArray[0]).join(',');
-  const rows = objArray.map((obj) => Object.values(obj).join(','));
+  const rows = objArray.map((obj) =>
+    Object.values(obj)
+      .map((value) => JSON.stringify(value))
+      .join(',')
+  );
+
   return [header, ...rows].join('\n');
 };
 

package/src/hooks/usePopover.tsx

@@ -194,13 +194,7 @@ const usePopover = ({
         }
       }
     };
-  }, [
-    targetElement?.toString(),
-    //@ts-ignore
-    content,
-    current,
-    currentPopover,
-  ]);
+  }, [targetElement?.toString(), content, current, currentPopover]);
 
   useUnmount(() => {
     cancelTimeout();

package/src/hooks/useTheme.ts

@@ -27,7 +27,7 @@ export const useReqoreTheme = (
       return theme;
     }
 
-    let _customTheme: IReqoreCustomTheme = cloneDeep(customTheme);
+    const _customTheme: IReqoreCustomTheme = cloneDeep(customTheme);
 
     if (_customTheme.main) {
       _customTheme.main = getColorFromMaybeString(theme, customTheme.main);

package/src/hooks/useWhyDidYouUpdate.ts

@@ -23,7 +23,7 @@ export function useWhyDidYouUpdate(name, props) {
       });
       // If changesObj not empty then output to console
       if (Object.keys(changesObj).length) {
-        console.log('[why-did-you-update]', name, changesObj);
+        console.warn('[why-did-you-update]', name, changesObj);
       }
     }
     // Finally update previousProps with current props for next hook call

package/src/stories/KeyValueTable/KeyValueTable.stories.tsx

@@ -1,4 +1,6 @@
 import { StoryObj } from '@storybook/react';
+import { fireEvent, userEvent, waitFor, within } from '@storybook/testing-library';
+import { noop } from 'lodash';
 import ReqoreIcon from '../../components/Icon';
 import { IReqoreKeyValueTableProps, ReqoreKeyValueTable } from '../../components/KeyValueTable';
 import { IReqoreTableRowData, TReqoreTableColumnContent } from '../../components/Table';
@@ -92,6 +94,16 @@ export const Basic: Story = {};
 export const NoLabel: Story = {
   args: {
     label: undefined,
+    onRowClick: noop,
+  },
+};
+
+export const InteractiveRows: Story = {
+  args: {
+    onRowClick: noop,
+  },
+  play: async ({ canvasElement }) => {
+    await userEvent.hover(canvasElement.querySelectorAll('.reqore-table-row')[2]);
   },
 };
 
@@ -107,6 +119,12 @@ export const NotFlat: Story = {
   },
 };
 
+export const NoHeight: Story = {
+  args: {
+    height: undefined,
+  },
+};
+
 export const Striped: Story = {
   args: {
     striped: true,
@@ -245,6 +263,12 @@ export const CustomPaging: Story = {
   },
 };
 
+export const CustomKeyRenderer: Story = {
+  args: {
+    keyRenderer: (label) => `${label}_custom`,
+  },
+};
+
 export const CustomValueRenderer: Story = {
   args: {
     valueRenderer: ({ value, tableKey }, Component): TReqoreTableColumnContent | JSX.Element => {
@@ -263,3 +287,25 @@ export const CustomValueRenderer: Story = {
     },
   },
 };
+
+export const CustomExportMapper: Story = {
+  args: {
+    exportable: true,
+    exportMapper: (data) => {
+      return data.reduce(
+        (acc, row) => ({
+          ...acc,
+          [row.tableKey.toString()]: row.value,
+        }),
+        {}
+      );
+    },
+  },
+  play: async ({ canvasElement, ...rest }) => {
+    const canvas = within(canvasElement);
+    // @ts-expect-error
+    await ExportableTable.play({ canvasElement, ...rest });
+    await fireEvent.click(canvas.getAllByText('Export full data')[0]);
+    await waitFor(() => canvas.findAllByText('Export data'), { timeout: 5000 });
+  },
+};

package/src/stories/Table/Table.stories.tsx

@@ -1,5 +1,6 @@
 import { StoryObj } from '@storybook/react';
-import { fireEvent, waitFor, within } from '@storybook/testing-library';
+import { fireEvent, userEvent, waitFor, within } from '@storybook/testing-library';
+import { noop, slice } from 'lodash';
 import { StyledEffect } from '../../components/Effect';
 import { IReqoreTableColumn, IReqoreTableProps, IReqoreTableRowData } from '../../components/Table';
 import { IReqoreCustomTableBodyCellProps } from '../../components/Table/cell';
@@ -375,6 +376,22 @@ export const NotFlat: Story = {
   },
 };
 
+export const NoHeight: Story = {
+  args: {
+    height: undefined,
+    data: slice(tableData.data, 0, 150),
+  },
+};
+
+export const InteractiveRows: Story = {
+  args: {
+    onRowClick: noop,
+  },
+  play: async ({ canvasElement }) => {
+    await userEvent.hover(canvasElement.querySelectorAll('.reqore-table-row')[2]);
+  },
+};
+
 export const Striped: Story = {
   args: {
     striped: true,