@qoretechnologies/reqore 0.36.6 → 0.36.8

package/src/components/Notifications/notification.tsx

@@ -14,7 +14,12 @@ import {
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
 import { fadeIn } from '../../helpers/animations';
-import { changeLightness, getNotificationIntent, getReadableColor } from '../../helpers/colors';
+import {
+  changeDarkness,
+  changeLightness,
+  getNotificationIntent,
+  getReadableColor,
+} from '../../helpers/colors';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import {
   IWithReqoreCustomTheme,
@@ -118,7 +123,7 @@ export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotification
     hasShadow,
     flat,
     minimal,
-    opaque,
+    opaque = true,
   }: IReqoreNotificationStyle) => css`
     background-color: ${minimal
       ? 'transparent'
@@ -147,16 +152,17 @@ export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotification
       }
     `}
 
-    color: ${getReadableColor(theme, null, null, true, !opaque ? theme.originalMain : undefined)};
+    color: ${getReadableColor(theme, null, null, true, minimal ? theme.originalMain : undefined)};
 
     ${clickable &&
     css`
       cursor: pointer;
       &:hover {
-        background-color: ${rgba(
-          getNotificationIntent(theme, intent || type),
-          minimal ? 0.2 : 0.5
-        )};
+        background-color: ${minimal
+          ? 'transparent'
+          : opaque
+          ? changeDarkness(theme.main, 0.002)
+          : rgba(getNotificationIntent(theme, intent || type), 0.4)};
         border-color: ${changeLightness(getNotificationIntent(theme, intent || type), 0.25)};
       }
     `}

package/src/components/Panel/index.tsx

@@ -98,8 +98,11 @@ export interface IReqorePanelProps
   closeButtonProps?: IReqoreButtonProps;
 
   rounded?: boolean;
+
   actions?: TReqorePanelActions;
   bottomActions?: TReqorePanelBottomActions;
+  showActionsWhenCollapsed?: boolean;
+
   unMountContentOnCollapse?: boolean;
   onCollapseChange?: (isCollapsed?: boolean) => void;
   fill?: boolean;
@@ -353,6 +356,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       headerProps = {},
       disabled,
       breadcrumbs,
+      showActionsWhenCollapsed = true,
       ...rest
     }: IReqorePanelProps,
     ref
@@ -436,21 +440,21 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
         (action: IReqorePanelAction, index: number) => {
           return renderActions(action, index, true, align);
         },
-      [actions]
+      [actions, showActionsWhenCollapsed, _isCollapsed]
     );
 
     const hasNonResponsiveActions = useCallback(
       (data: TReqorePanelActions) =>
         (!responsiveActions && size(data)) ||
         data.some((action) => action.responsive === false && action.show !== false),
-      [actions, bottomActions, responsiveActions]
+      [actions, bottomActions, responsiveActions, showActionsWhenCollapsed, _isCollapsed]
     );
 
     const hasResponsiveActions = useCallback(
       (data: TReqorePanelActions) =>
         responsiveActions &&
         data.some((action) => action.responsive !== false && action.show !== false),
-      [actions, bottomActions, responsiveActions]
+      [actions, bottomActions, responsiveActions, showActionsWhenCollapsed, _isCollapsed]
     );
 
     const renderNonResponsiveActions = useCallback(
@@ -458,7 +462,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
         (action: IReqorePanelAction, index: number) => {
           return renderActions(action, index, false, align);
         },
-      [actions, bottomActions, responsiveActions]
+      [actions, bottomActions, responsiveActions, showActionsWhenCollapsed, _isCollapsed]
     );
 
     const renderActions = useCallback(
@@ -470,6 +474,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       ) => {
         if (
           action.show === false ||
+          (showActionsWhenCollapsed === false && _isCollapsed === true) ||
           (includeResponsive && action.responsive === false) ||
           (!includeResponsive &&
             responsiveActions &&
@@ -569,7 +574,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
           </ReqoreButton>
         );
       },
-      [actions, theme]
+      [actions, theme, showActionsWhenCollapsed, _isCollapsed]
     );
 
     const interactive: boolean = !!(

package/src/components/Table/body.tsx

@@ -1,5 +1,5 @@
 import count from 'lodash/size';
-import { forwardRef, useMemo } from 'react';
+import { forwardRef, memo, useMemo } from 'react';
 import { useMount } from 'react-use';
 import { FixedSizeList as List } from 'react-window';
 import styled from 'styled-components';
@@ -106,4 +106,4 @@ const ReqoreTableBody = forwardRef<HTMLDivElement, IReqoreTableSectionBodyProps>
   }
 );
 
-export default ReqoreTableBody;
+export default memo(ReqoreTableBody);

package/src/components/Table/cell.tsx

@@ -1,5 +1,5 @@
 import { lighten, rgba } from 'polished';
-import { forwardRef } from 'react';
+import { forwardRef, memo } from 'react';
 import styled, { css } from 'styled-components';
 import { IReqoreTableColumn } from '.';
 import { TEXT_FROM_SIZE } from '../../constants/sizes';
@@ -123,12 +123,14 @@ export const StyledTableCell = styled.div<IReqoreTableCellStyle>`
   }}
 `;
 
-export const ReqoreTableBodyCell = forwardRef<HTMLButtonElement, IReqoreTableBodyCellProps>(
-  (props: IReqoreTableBodyCellProps, ref) => {
-    const { targetRef } = useCombinedRefs(ref);
+export const ReqoreTableBodyCell = memo(
+  forwardRef<HTMLButtonElement, IReqoreTableBodyCellProps>(
+    (props: IReqoreTableBodyCellProps, ref) => {
+      const { targetRef } = useCombinedRefs(ref);
 
-    useTooltip(targetRef.current, props.tooltip);
+      useTooltip(targetRef.current, props.tooltip);
 
-    return <StyledTableCell {...props} ref={targetRef} />;
-  }
+      return <StyledTableCell {...props} ref={targetRef} />;
+    }
+  )
 );

package/src/components/Table/header.tsx

@@ -1,5 +1,5 @@
 import { omit } from 'lodash';
-import { forwardRef, useCallback } from 'react';
+import { forwardRef, memo, useCallback } from 'react';
 import { useMount } from 'react-use';
 import styled, { css } from 'styled-components';
 import { IReqoreTableColumn, IReqoreTableSort } from '.';
@@ -233,4 +233,4 @@ const ReqoreTableHeader = forwardRef<HTMLDivElement, IReqoreTableSectionProps>(
   }
 );
 
-export default ReqoreTableHeader;
+export default memo(ReqoreTableHeader);

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/stories/Message/Message.stories.tsx

@@ -81,11 +81,11 @@ export const WithIconColor: Story = {
   },
 };
 
-export const Opaque: Story = {
+export const NonOpaque: Story = {
   render: Template,
 
   args: {
-    opaque: true,
+    opaque: false,
     intent: 'info',
   },
 };

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,