@qoretechnologies/reqore 0.36.5 → 0.36.7

package/src/components/Table/row.tsx

@@ -1,6 +1,6 @@
 /* @flow */
 import { isFunction, isString } from 'lodash';
-import React, { ReactElement } from 'react';
+import React, { ReactElement, memo } from 'react';
 import styled, { css } from 'styled-components';
 import { IReqoreTableColumn, IReqoreTableData, IReqoreTableRowClick } from '.';
 import { ReqoreButton, ReqoreControlGroup } from '../..';
@@ -78,191 +78,211 @@ export interface IReqoreTableCellStyle {
   padded?: IReqoreTableColumn['cell']['padded'];
 }
 
-const ReqoreTableRow = ({
-  data: {
-    data,
-    columns,
-    selectable,
-    onSelectClick,
-    selected,
-    onRowClick,
-    striped,
-    size,
-    selectedRowIntent,
-    flat,
-    cellComponent,
-    rowComponent,
-    setHoveredRow,
-    hoveredRow,
-  },
-  style,
-  index,
-}: IReqoreTableRowProps) => {
-  const isSelected =
-    data[index]._selectId &&
-    selected.find((selectId) => selectId.toString() === data[index]._selectId.toString());
+const ReqoreTableRow = memo(
+  ({
+    data: {
+      data,
+      columns,
+      selectable,
+      onSelectClick,
+      selected,
+      onRowClick,
+      striped,
+      size,
+      selectedRowIntent,
+      flat,
+      cellComponent,
+      rowComponent,
+      setHoveredRow,
+      hoveredRow,
+    },
+    style,
+    index,
+  }: IReqoreTableRowProps) => {
+    const isSelected =
+      data[index]._selectId &&
+      selected.find((selectId) => selectId.toString() === data[index]._selectId.toString());
 
-  const CellComponent = cellComponent || ReqoreTableBodyCell;
-  const RowComponent = rowComponent || StyledTableRow;
+    const CellComponent = cellComponent || ReqoreTableBodyCell;
+    const RowComponent = rowComponent || StyledTableRow;
 
-  const renderContent = (
-    cell: IReqoreTableColumn['cell'],
-    data: any,
-    dataId: string,
-    align?: 'center' | 'left' | 'right'
-  ): ReactElement<any, any> => {
-    if (cell?.actions) {
-      return (
-        <ReqoreControlGroup size={size} stack fill fluid style={{ height: '100%' }} rounded={false}>
-          {cell.actions(data).map((action, index) => (
-            <ReqoreButton
-              key={index}
-              rounded={false}
-              iconsAlign={align === 'center' ? 'center' : 'sides'}
-              textAlign={align}
-              {...action}
-              onClick={(e) => {
-                e.stopPropagation();
-
-                action.onClick?.(e);
-              }}
-            />
-          ))}
-        </ReqoreControlGroup>
-      );
-    }
-
-    let content = cell?.content;
+    const renderContent = (
+      cell: IReqoreTableColumn['cell'],
+      data: any,
+      dataId: string,
+      align?: 'center' | 'left' | 'right'
+    ): ReactElement<any, any> => {
+      if (cell?.actions) {
+        return (
+          <ReqoreControlGroup
+            size={size}
+            stack
+            fill
+            fluid
+            style={{ height: '100%' }}
+            rounded={false}
+          >
+            {cell.actions(data).map((action, index) => (
+              <ReqoreButton
+                key={index}
+                rounded={false}
+                iconsAlign={align === 'center' ? 'center' : 'sides'}
+                textAlign={align}
+                {...action}
+                onClick={(e) => {
+                  e.stopPropagation();
 
-    if (isFunction(content)) {
-      // Check what type does the content function return
-      if (React.isValidElement(content(data))) {
-        const Content = content;
-        // If it's a react element, return it
-        return <Content {...data} _size={size} _dataId={dataId} />;
+                  action.onClick?.(e);
+                }}
+              />
+            ))}
+          </ReqoreControlGroup>
+        );
       }
 
-      // If it's a function, call it and return the result
-      content = content(data) as any;
-    }
+      let content = cell?.content;
 
-    if (isString(content)) {
-      // Separate the content string by colon
-      const [type, intentOrColor] = content.split(':');
-      // Check if the intent starts with hash for tags
-      const intent: TReqoreIntent = intentOrColor?.startsWith('#')
-        ? undefined
-        : (intentOrColor as TReqoreIntent);
-      const color: TReqoreHexColor =
-        intentOrColor?.startsWith('#') && type === 'tag'
-          ? (intentOrColor as TReqoreHexColor)
-          : undefined;
-      // Render content based on the type
-      switch (type) {
-        case 'time-ago':
-          return <TimeAgo time={data[dataId]} />;
-        case 'tag':
-          return (
-            <ReqoreTag
-              label={data[dataId]}
-              size={size}
-              intent={intent as TReqoreIntent}
-              color={color}
-            />
-          );
-        case 'title':
-          return <ReqoreH4 intent={intent as TReqoreIntent}>{data[dataId]}</ReqoreH4>;
-        case 'text':
-          return (
-            <ReqoreP className='reqore-table-text' intent={intent as TReqoreIntent}>
-              {data[dataId]}
-            </ReqoreP>
-          );
-        default:
-          return <ReqoreP className='reqore-table-text'>{content}</ReqoreP>;
-      }
-    }
+      if (isFunction(content)) {
+        // Check what type does the content function return
+        if (React.isValidElement(content(data))) {
+          const Content = content;
+          // If it's a react element, return it
+          return <Content {...data} _size={size} _dataId={dataId} />;
+        }
 
-    return <ReqoreP className='reqore-table-text'>{data[dataId]}</ReqoreP>;
-  };
+        // If it's a function, call it and return the result
+        content = content(data) as any;
+      }
 
-  const renderCells = (columns: IReqoreTableColumn[], data: IReqoreTableData) =>
-    getOnlyShownColumns(columns).map(
-      ({ width, minWidth, maxWidth, resizedWidth, grow, dataId, cell, header, align, intent }) => {
-        if (header?.columns) {
-          return renderCells(header.columns, data);
+      if (isString(content)) {
+        // Separate the content string by colon
+        const [type, intentOrColor] = content.split(':');
+        // Check if the intent starts with hash for tags
+        const intent: TReqoreIntent = intentOrColor?.startsWith('#')
+          ? undefined
+          : (intentOrColor as TReqoreIntent);
+        const color: TReqoreHexColor =
+          intentOrColor?.startsWith('#') && type === 'tag'
+            ? (intentOrColor as TReqoreHexColor)
+            : undefined;
+        // Render content based on the type
+        switch (type) {
+          case 'time-ago':
+            return <TimeAgo time={data[dataId]} />;
+          case 'tag':
+            return (
+              <ReqoreTag
+                label={data[dataId]}
+                size={size}
+                intent={intent as TReqoreIntent}
+                color={color}
+              />
+            );
+          case 'title':
+            return <ReqoreH4 intent={intent as TReqoreIntent}>{data[dataId]}</ReqoreH4>;
+          case 'text':
+            return (
+              <ReqoreP className='reqore-table-text' intent={intent as TReqoreIntent}>
+                {data[dataId]}
+              </ReqoreP>
+            );
+          default:
+            return <ReqoreP className='reqore-table-text'>{content}</ReqoreP>;
         }
+      }
 
-        // Build the tooltip
-        const tooltip: IReqoreTooltip = cell?.tooltip
-          ? typeof cell?.tooltip(data[index][dataId]) !== 'object'
-            ? {
-                content: cell.tooltip(data[index][dataId]) as string,
-              }
-            : (cell.tooltip(data[index][dataId]) as IReqoreTooltip)
-          : {};
+      return <ReqoreP className='reqore-table-text'>{data[dataId]}</ReqoreP>;
+    };
 
-        return (
-          <CellComponent
-            key={dataId}
-            {...({
-              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!);
+    const renderCells = (columns: IReqoreTableColumn[], data: IReqoreTableData) =>
+      getOnlyShownColumns(columns).map(
+        ({
+          width,
+          minWidth,
+          maxWidth,
+          resizedWidth,
+          grow,
+          dataId,
+          cell,
+          header,
+          align,
+          intent,
+        }) => {
+          if (header?.columns) {
+            return renderCells(header.columns, data);
+          }
+
+          // Build the tooltip
+          const tooltip: IReqoreTooltip = cell?.tooltip
+            ? typeof cell?.tooltip(data[index][dataId]) !== 'object'
+              ? {
+                  content: cell.tooltip(data[index][dataId]) as string,
                 }
-              },
-              className: 'reqore-table-cell',
-            } as IReqoreTableCellStyle)}
-          >
-            {renderContent(cell, data[index], dataId, align)}
-          </CellComponent>
-        );
-      }
-    );
+              : (cell.tooltip(data[index][dataId]) as IReqoreTooltip)
+            : {};
 
-  return (
-    <RowComponent
-      style={style}
-      className='reqore-table-row'
-      interactive={!!onRowClick && !data[index]._disabled}
-      onMouseEnter={() => {
-        // Set hovered is this row is interactive
-        if (onRowClick || (selectable && data[index]._selectId && !data[index]._disabled)) {
-          setHoveredRow(index);
+          return (
+            <CellComponent
+              key={dataId}
+              {...({
+                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)}
+            </CellComponent>
+          );
         }
-      }}
-      onMouseLeave={() => {
-        setHoveredRow(undefined);
-      }}
-    >
-      {renderCells(columns, data)}
-    </RowComponent>
-  );
-};
+      );
+
+    return (
+      <RowComponent
+        style={style}
+        className='reqore-table-row'
+        interactive={!!onRowClick && !data[index]._disabled}
+        onMouseEnter={() => {
+          // Set hovered is this row is interactive
+          if (onRowClick || (selectable && data[index]._selectId && !data[index]._disabled)) {
+            setHoveredRow(index);
+          }
+        }}
+        onMouseLeave={() => {
+          setHoveredRow(undefined);
+        }}
+      >
+        {renderCells(columns, data)}
+      </RowComponent>
+    );
+  }
+);
 
 export default ReqoreTableRow;

package/src/components/Table/value.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import ReqoreIcon from '../Icon';
 import { ReqoreP } from '../Paragraph';
 
@@ -5,7 +6,7 @@ export interface IReqoreTableValueProps {
   value?: string | number | boolean | any[] | { [key: string]: any };
 }
 
-export const ReqoreTableValue = ({ value }: IReqoreTableValueProps) => {
+export const ReqoreTableValue = memo(({ value }: IReqoreTableValueProps) => {
   if (value === undefined || value === null) {
     return <>-</>;
   }
@@ -24,4 +25,4 @@ export const ReqoreTableValue = ({ value }: IReqoreTableValueProps) => {
     default:
       return <ReqoreP className='reqore-table-text'>{JSON.stringify(value)}</ReqoreP>;
   }
-};
+});

package/src/helpers/utils.ts

@@ -128,3 +128,25 @@ export const alignToFlexAlign = (
       return 'flex-start';
   }
 };
+
+export function decycle(obj, stack = []) {
+  if (!obj || typeof obj !== 'object') return obj;
+
+  if (stack.includes(obj)) return null;
+
+  const s = stack.concat([obj]);
+
+  return Array.isArray(obj)
+    ? obj.map((x) => decycle(x, s))
+    : Object.fromEntries(Object.entries(obj).map(([k, v]) => [k, decycle(v, s)]));
+}
+
+export const stringifyAndDecycleObject = (obj: any): string => {
+  return JSON.stringify(decycle(obj), (_key, value) => {
+    if (typeof value === 'function') {
+      return value.toString();
+    }
+
+    return value;
+  });
+};

package/src/hooks/usePopover.tsx

@@ -57,6 +57,7 @@ export interface IPopover
   maxHeight?: string;
   icon?: IReqoreIconName;
   title?: string;
+  updater?: string | number;
 }
 
 export interface IPopoverOptions extends IPopover {
@@ -164,7 +165,7 @@ const usePopover = ({
     if (openOnMount && targetElement) {
       _addPopover();
     }
-  }, [targetElement?.toString()]);
+  }, [targetElement?.outerHTML]);
 
   useEffect(() => {
     if (targetElement && content) {

package/src/hooks/useTooltip.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { IReqoreTooltip, TReqoreTooltipProp } from '../types/global';
 import usePopover from './usePopover';
 
@@ -8,13 +8,17 @@ export const useTooltip = (
 ): void => {
   const [element, setElement] = useState<HTMLElement | undefined>(undefined);
   const [data, setData] = useState<string | IReqoreTooltip | undefined>(undefined);
+  const content = useMemo(
+    () => (typeof tooltip === 'object' ? tooltip?.content : tooltip),
+    [tooltip]
+  );
 
   useEffect(() => {
-    if (targetElement && tooltip) {
+    if (targetElement && content) {
       setElement(targetElement);
       setData(tooltip);
     }
-  }, [targetElement?.toString(), tooltip?.toString()]);
+  }, [targetElement, content]);
 
   const popoverData = typeof data === 'string' ? { content: data } : data;
 

package/src/stories/ControlGroup/ControlGroup.stories.tsx

@@ -151,7 +151,7 @@ const Template: StoryFn<typeof ReqoreControlGroup> = (args) => {
     <>
       <ReqoreControlGroup {...args}>
         <ReqoreButton icon='PictureInPictureLine'>Button</ReqoreButton>
-        <ReqoreButton icon='PictureInPictureLine' fluid>
+        <ReqoreButton icon='PictureInPictureLine' fluid shrink={0}>
           Fluid Button
         </ReqoreButton>
         <ReqoreButton

package/src/stories/Panel/Panel.stories.tsx

@@ -445,6 +445,32 @@ export const ActionsShownOnHover: Story = {
   },
 };
 
+export const ActionsShownOnlyWhenExpanded: Story = {
+  render: (args) => (
+    <ReqoreControlGroup verticalAlign='flex-start'>
+      <ReqorePanel {...args} isCollapsed fluid />
+      <ReqorePanel {...args} fluid />
+    </ReqoreControlGroup>
+  ),
+
+  args: {
+    collapsible: true,
+    showActionsWhenCollapsed: false,
+    actions: [{ label: 'test' }],
+    children: 'This is a panel',
+    bottomActions: [
+      {
+        position: 'right',
+        fluid: false,
+        group: [
+          { label: 'test 2', show: true },
+          { label: 'test 3', show: true },
+        ],
+      },
+    ],
+  },
+};
+
 export const TransparentFlat: Story = {
   render: Template,
 

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

@@ -172,7 +172,7 @@ const defaultColumns: IReqoreTableColumn[] = [
     header: {
       icon: 'SettingsLine',
     },
-    width: 100,
+    width: 120,
     align: 'center',
     pin: 'right',
 
@@ -287,6 +287,22 @@ const defaultColumnsWithPinnedColumns: IReqoreTableColumn[] = defaultColumns.map
   }
 );
 
+const defaultColumnsWithCustomContentHeaders: IReqoreTableColumn[] = defaultColumns.map(
+  (column, index) => {
+    if (index === 4) {
+      return {
+        ...column,
+        header: {
+          ...column.header,
+          content: <ReqoreInput icon='PriceTag2Fill' value='Custom input value' rounded={false} />,
+        },
+      };
+    }
+
+    return column;
+  }
+);
+
 const meta = {
   title: 'Collections/Table/Stories',
   component: ReqoreTable,
@@ -519,6 +535,12 @@ export const CustomPaging: Story = {
   },
 };
 
+export const CustomHeaderContent: Story = {
+  args: {
+    columns: defaultColumnsWithCustomContentHeaders,
+  },
+};
+
 const CustomHeaderCell = (props: IReqoreCustomHeaderCellProps) => {
   if (props.hasColumns) {
     return <ReqoreH3 intent='success'>{props.label}</ReqoreH3>;