@qoretechnologies/reqore 0.24.0 → 0.25.2

package/src/components/Panel/index.tsx

@@ -4,37 +4,51 @@ import { forwardRef, ReactElement, useCallback, useMemo, useState } from 'react'
 import { useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import { RADIUS_FROM_SIZE } from '../../constants/sizes';
-import { IReqoreCustomTheme, IReqoreTheme, TReqoreIntent } from '../../constants/theme';
-import ReqoreThemeProvider from '../../containers/ThemeProvider';
+import { IReqoreTheme } from '../../constants/theme';
 import {
   changeDarkness,
   changeLightness,
   getMainBackgroundColor,
   getReadableColor,
 } from '../../helpers/colors';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreTheme } from '../../hooks/useTheme';
+import { useTooltip } from '../../hooks/useTooltip';
+import {
+  IReqoreIntent,
+  IWithReqoreCustomTheme,
+  IWithReqoreFlat,
+  IWithReqoreSize,
+  IWithReqoreTooltip,
+} from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
-import ReqoreButton from '../Button';
+import ReqoreButton, { IReqoreButtonProps } from '../Button';
+import { StyledCollectionItemContent } from '../Collection/item';
 import ReqoreControlGroup from '../ControlGroup';
 import ReqoreDropdown from '../Dropdown';
 import { IReqoreDropdownItemProps } from '../Dropdown/item';
 import ReqoreIcon from '../Icon';
 
-export interface IReqorePanelAction {
-  icon?: IReqoreIconName;
-  label?: string;
+export interface IReqorePanelAction extends IReqoreButtonProps, IWithReqoreTooltip, IReqoreIntent {
+  label?: string | number;
   onClick?: () => void;
-  intent?: TReqoreIntent;
   actions?: IReqoreDropdownItemProps[];
-  className?: string;
-  id?: string;
+  customContent?: () => string | React.ReactNode;
 }
 
 export interface IReqorePanelBottomAction extends IReqorePanelAction {
   position: 'left' | 'right';
 }
 
-export interface IReqorePanelProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface IReqorePanelContent {}
+
+export interface IReqorePanelProps
+  extends IWithReqoreSize,
+    IWithReqoreCustomTheme,
+    IWithReqoreFlat,
+    IReqoreIntent,
+    IWithReqoreTooltip,
+    React.HTMLAttributes<HTMLDivElement> {
   as?: any;
   children?: any;
   icon?: IReqoreIconName;
@@ -43,11 +57,8 @@ export interface IReqorePanelProps extends React.HTMLAttributes<HTMLDivElement>
   isCollapsed?: boolean;
   onClose?: () => void;
   rounded?: boolean;
-  actions?: IReqorePanelAction[];
+  actions?: (IReqorePanelAction | IReqorePanelAction[])[];
   bottomActions?: IReqorePanelBottomAction[];
-  customTheme?: IReqoreCustomTheme;
-  intent?: TReqoreIntent;
-  flat?: boolean;
   unMountContentOnCollapse?: boolean;
   onCollapseChange?: (isCollapsed?: boolean) => void;
   fill?: boolean;
@@ -55,6 +66,8 @@ export interface IReqorePanelProps extends React.HTMLAttributes<HTMLDivElement>
   contentStyle?: React.CSSProperties;
   opacity?: number;
   blur?: number;
+  minimal?: boolean;
+  headerSize?: 1 | 2 | 3 | 4 | 5 | 6;
 }
 
 export interface IStyledPanel extends IReqorePanelProps {
@@ -76,6 +89,26 @@ export const StyledPanel = styled.div<IStyledPanel>`
   position: relative;
   z-index: 1;
   backdrop-filter: ${({ blur, opacity }) => (blur && opacity < 1 ? `blur(${blur}px)` : undefined)};
+  transition: 0.3s ease-in-out;
+
+  ${({ interactive, theme, opacity = 1 }) =>
+    interactive
+      ? css`
+          cursor: pointer;
+
+          &:hover {
+            background-color: ${rgba(changeDarkness(getMainBackgroundColor(theme), 0.06), opacity)};
+
+            ${StyledCollectionItemContent}:after {
+              background: linear-gradient(
+                to top,
+                ${rgba(changeDarkness(getMainBackgroundColor(theme), 0.06), opacity)} 0%,
+                transparent 100%
+              );
+            }
+          }
+        `
+      : undefined}
 
   ${({ fill, isCollapsed }) =>
     !isCollapsed && fill
@@ -125,7 +158,10 @@ export const StyledPanelBottomActions = styled(StyledPanelTitle)`
 export const StyledPanelContent = styled.div<IStyledPanel>`
   display: ${({ isCollapsed }) => (isCollapsed ? 'none' : undefined)};
   min-height: ${({ isCollapsed }) => (isCollapsed ? undefined : '40px')};
-  padding: ${({ padded }) => (!padded ? undefined : '10px')};
+  padding: ${({ padded }) => (!padded ? undefined : '15px')};
+  // The padding is not needed when the panel is minimal and has title, since
+  // the title already has padding and is transparent
+  padding-top: ${({ minimal, hasLabel }) => (minimal && hasLabel ? '0px' : undefined)};
   flex: 1;
   overflow: auto;
 `;
@@ -134,6 +170,7 @@ export const StyledPanelTitleLabel = styled.span`
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  margin: 0;
 `;
 
 export const StyledPanelTitleHeader = styled.div`
@@ -168,12 +205,18 @@ export const ReqorePanel = forwardRef(
       onCollapseChange,
       padded = true,
       contentStyle,
+      headerSize = 4,
+      minimal,
+      tooltip,
       ...rest
     }: IReqorePanelProps,
     ref
   ) => {
     const [_isCollapsed, setIsCollapsed] = useState(isCollapsed || false);
     const theme = useReqoreTheme('main', customTheme, intent);
+    const { targetRef } = useCombinedRefs(ref);
+
+    useTooltip(targetRef.current, tooltip);
 
     useUpdateEffect(() => {
       setIsCollapsed(!!isCollapsed);
@@ -206,33 +249,50 @@ export const ReqorePanel = forwardRef(
       [leftBottomActions, rightBottomActions]
     );
 
-    const renderActions = ({
-      label,
-      actions,
-      intent,
-      className,
-      id,
-      ...rest
-    }: IReqorePanelAction) =>
-      size(actions) ? (
-        <ReqoreDropdown
-          {...rest}
-          label={label}
-          componentProps={{
-            intent,
-            id,
-            minimal: true,
-            className,
-            onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
-              e.stopPropagation();
-            },
-          }}
-          items={actions}
-        />
-      ) : (
+    const renderActions = (
+      actionOrActions: IReqorePanelAction | IReqorePanelAction[],
+      index: number
+    ) => {
+      if (Array.isArray(actionOrActions)) {
+        return (
+          <ReqoreControlGroup stack minimal>
+            {actionOrActions.map(renderActions)}
+          </ReqoreControlGroup>
+        );
+      }
+
+      const { id, actions, label, intent, className, customContent, ...rest }: IReqorePanelAction =
+        actionOrActions;
+
+      if (size(actions)) {
+        return (
+          <ReqoreDropdown
+            {...rest}
+            key={index}
+            label={label}
+            componentProps={{
+              intent,
+              id,
+              minimal: true,
+              className,
+              onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
+                e.stopPropagation();
+              },
+            }}
+            items={actions}
+          />
+        );
+      }
+
+      if (customContent) {
+        return customContent();
+      }
+
+      return (
         <ReqoreButton
           {...rest}
           id={id}
+          key={index}
           className={className}
           customTheme={theme}
           intent={intent}
@@ -248,86 +308,97 @@ export const ReqorePanel = forwardRef(
           {label}
         </ReqoreButton>
       );
+    };
+
+    const HTMLheaderElement = useMemo(() => {
+      return `h${headerSize}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    }, [headerSize]);
+
+    const interactive: boolean = !!(
+      rest.onClick ||
+      rest.onMouseOver ||
+      rest.onMouseEnter ||
+      rest.onDoubleClick ||
+      rest.onContextMenu
+    );
 
     return (
-      <ReqoreThemeProvider theme={theme}>
-        <StyledPanel
-          {...rest}
-          as={rest.as || 'div'}
-          ref={ref as any}
-          isCollapsed={_isCollapsed}
-          rounded={rounded}
-          flat={flat}
-          className={`${className || ''} reqore-panel`}
-        >
-          {hasTitleBar && (
-            <StyledPanelTitle
-              flat={flat}
-              isCollapsed={_isCollapsed}
-              collapsible={collapsible}
-              className='reqore-panel-title'
-              onClick={handleCollapseClick}
-              theme={theme}
-              opacity={rest.opacity}
-            >
-              <StyledPanelTitleHeader>
-                {icon && <ReqoreIcon icon={icon} margin='right' />}
-                {typeof label === 'string' ? (
-                  <StyledPanelTitleLabel>{label}</StyledPanelTitleLabel>
-                ) : (
-                  label
-                )}
-              </StyledPanelTitleHeader>
-              <ReqoreControlGroup minimal>
-                {actions.map(renderActions)}
-                {collapsible && (
-                  <ReqoreButton
-                    customTheme={theme}
-                    icon={_isCollapsed ? 'ArrowDownSLine' : 'ArrowUpSLine'}
-                    onClick={handleCollapseClick}
-                    tooltip={_isCollapsed ? 'Expand' : 'Collapse'}
-                  />
-                )}
-                {onClose && (
-                  <ReqoreButton
-                    customTheme={theme}
-                    icon='CloseLine'
-                    onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
-                      e.stopPropagation();
-                      onClose?.();
-                    }}
-                  />
-                )}
-              </ReqoreControlGroup>
-            </StyledPanelTitle>
-          )}
-          {!_isCollapsed || (_isCollapsed && !unMountContentOnCollapse) ? (
-            <StyledPanelContent
-              className='reqore-panel-content'
-              isCollapsed={_isCollapsed}
-              style={contentStyle}
-              padded={padded}
-            >
-              {children}
-            </StyledPanelContent>
-          ) : null}
-          {hasBottomActions && !_isCollapsed ? (
-            <StyledPanelBottomActions
-              flat={flat}
-              className='reqore-panel-bottom-actions'
-              theme={theme}
-              opacity={rest.opacity}
-            >
-              <ReqoreControlGroup minimal>
-                {leftBottomActions.map(renderActions)}
-              </ReqoreControlGroup>
-              <ReqoreControlGroup minimal>
-                {rightBottomActions.map(renderActions)}
-              </ReqoreControlGroup>
-            </StyledPanelBottomActions>
-          ) : null}
-        </StyledPanel>
-      </ReqoreThemeProvider>
+      <StyledPanel
+        {...rest}
+        as={rest.as || 'div'}
+        ref={targetRef}
+        isCollapsed={_isCollapsed}
+        rounded={rounded}
+        flat={flat}
+        className={`${className || ''} reqore-panel`}
+        interactive={interactive}
+        theme={theme}
+      >
+        {hasTitleBar && (
+          <StyledPanelTitle
+            flat={flat}
+            isCollapsed={_isCollapsed}
+            collapsible={collapsible}
+            className='reqore-panel-title'
+            onClick={handleCollapseClick}
+            theme={theme}
+            opacity={rest.opacity ?? (minimal ? 0 : 1)}
+          >
+            <StyledPanelTitleHeader>
+              {icon && <ReqoreIcon icon={icon} margin='right' />}
+              {typeof label === 'string' ? (
+                <StyledPanelTitleLabel as={HTMLheaderElement}>{label}</StyledPanelTitleLabel>
+              ) : (
+                label
+              )}
+            </StyledPanelTitleHeader>
+            <ReqoreControlGroup minimal>
+              {actions.map(renderActions)}
+              {collapsible && (
+                <ReqoreButton
+                  customTheme={theme}
+                  icon={_isCollapsed ? 'ArrowDownSLine' : 'ArrowUpSLine'}
+                  onClick={handleCollapseClick}
+                  tooltip={_isCollapsed ? 'Expand' : 'Collapse'}
+                />
+              )}
+              {onClose && (
+                <ReqoreButton
+                  customTheme={theme}
+                  icon='CloseLine'
+                  onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                    e.stopPropagation();
+                    onClose?.();
+                  }}
+                />
+              )}
+            </ReqoreControlGroup>
+          </StyledPanelTitle>
+        )}
+        {!_isCollapsed || (_isCollapsed && !unMountContentOnCollapse) ? (
+          <StyledPanelContent
+            className='reqore-panel-content'
+            hasLabel={!!label}
+            isCollapsed={_isCollapsed}
+            style={contentStyle}
+            padded={padded}
+            minimal={minimal}
+          >
+            {children}
+          </StyledPanelContent>
+        ) : null}
+        {hasBottomActions && !_isCollapsed ? (
+          <StyledPanelBottomActions
+            flat={flat}
+            className='reqore-panel-bottom-actions'
+            theme={theme}
+            opacity={rest.opacity ?? (minimal ? 0 : 1)}
+          >
+            <ReqoreControlGroup minimal>{leftBottomActions.map(renderActions)}</ReqoreControlGroup>
+            <ReqoreControlGroup minimal>{rightBottomActions.map(renderActions)}</ReqoreControlGroup>
+          </StyledPanelBottomActions>
+        ) : null}
+      </StyledPanel>
     );
   }
 );

package/src/components/Table/index.tsx

@@ -16,7 +16,7 @@ import { IReqoreTableHeaderStyle, StyledTableHeader } from './headerCell';
 import { fixSort, flipSortDirection, sortTableData } from './helpers';
 
 export type TReqoreTableColumnContent =
-  | React.FC<{ [key: string]: any; _selectId?: string }>
+  | React.FC<{ [key: string]: any; _selectId?: string | number }>
   | 'time-ago'
   | 'tag'
   | `tag:${TReqoreIntent}`
@@ -39,13 +39,13 @@ export interface IReqoreTableColumn extends IReqoreIntent {
   icon?: IReqoreIconName;
   iconSize?: string;
   tooltip?: string;
-  cellTooltip?: (data: { [key: string]: any; _selectId?: string }) => string | JSX.Element;
-  onCellClick?: (data: { [key: string]: any; _selectId?: string }) => void;
+  cellTooltip?: (data: { [key: string]: any; _selectId?: string | number }) => string | JSX.Element;
+  onCellClick?: (data: { [key: string]: any; _selectId?: string | number }) => void;
 }
 
 export interface IReqoreTableRowData {
   [key: string]: any;
-  _selectId?: string;
+  _selectId?: string | number;
   _intent?: TReqoreIntent;
   _disabled?: boolean;
 }
@@ -146,7 +146,7 @@ const ReqoreTable = ({
   const [leftScroll, setLeftScroll] = useState<number>(0);
   const [_data, setData] = useState<IReqoreTableData>(data || []);
   const [_sort, setSort] = useState<IReqoreTableSort>(fixSort(sort));
-  const [_selected, setSelected] = useState<string[]>([]);
+  const [_selected, setSelected] = useState<(string | number)[]>([]);
   const [_selectedQuant, setSelectedQuant] = useState<'all' | 'none' | 'some'>('none');
   const [wrapperRef, sizes] = useMeasure();
   const theme = useReqoreTheme('main', customTheme, intent);
@@ -197,7 +197,7 @@ const ReqoreTable = ({
     });
   };
 
-  const handleSelectClick = (selectId: string) => {
+  const handleSelectClick = (selectId: string | number) => {
     setSelected((current) => {
       let newSelected = [...current];
       const isSelected = newSelected.find((selected) => selectId === selected);
@@ -216,7 +216,7 @@ const ReqoreTable = ({
     switch (_selectedQuant) {
       case 'none':
       case 'some': {
-        const selectableData: string[] = _data
+        const selectableData: (string | number)[] = _data
           .filter((datum) => datum._selectId ?? false)
           .map((datum) => datum._selectId);
 

package/src/components/Table/row.tsx

@@ -23,8 +23,8 @@ export interface IReqoreTableRowOptions {
   columns: IReqoreTableColumn[];
   data?: IReqoreTableData;
   selectable?: boolean;
-  onSelectClick?: (selectId: string) => void;
-  selected?: string[];
+  onSelectClick?: (selectId: string | number) => void;
+  selected?: (string | number)[];
   onRowClick?: IReqoreTableRowClick;
   striped?: boolean;
   selectedRowIntent?: TReqoreIntent;

package/src/components/Tag/index.tsx

@@ -28,7 +28,8 @@ export interface IReqoreTagProps
     IWithReqoreTooltip,
     IReqoreDisabled {
   size?: TSizes;
-  label?: string;
+  label?: string | number;
+  labelKey?: string | number;
   onRemoveClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
   icon?: IReqoreIconName;
@@ -59,11 +60,23 @@ export const StyledTag = styled.div<IReqoreTagStyle>`
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
   border-radius: ${({ badge, size }) => (badge ? 20 : RADIUS_FROM_SIZE[size])}px;
   width: ${({ width }) => width || undefined};
+  transition: all 0.2s ease-out;
 
-  ${({ theme, color }) =>
+  ${({ theme, color, labelKey }) =>
     css`
       background-color: ${color || changeLightness(theme.main, 0.1)};
       color: ${color ? getReadableColorFrom(color) : getReadableColor(theme, undefined, undefined)};
+
+      ${StyledTagContentWrapper} {
+        background-color: ${labelKey ? changeLightness(color || theme.main, 0.05) : undefined};
+      }
+
+      ${StyledTagContent} {
+        background-color: ${labelKey ? changeLightness(color || theme.main, 0.1) : undefined};
+      }
+
+      ${StyledTagContentKey} {
+        background-color: ${labelKey ? changeLightness(color || theme.main, 0.05) : undefined};
       }
     `}
 
@@ -90,23 +103,29 @@ export const StyledTag = styled.div<IReqoreTagStyle>`
 `;
 
 const StyledTagContentWrapper = styled.div<{ size: TSizes }>`
-  padding: 0 ${({ size }) => PADDING_FROM_SIZE[size]}px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   flex: 1;
   overflow: hidden;
+  height: 100%;
 `;
 
 const StyledTagContent = styled.span<{ size: TSizes }>`
+  padding: 0 ${({ size }) => PADDING_FROM_SIZE[size]}px;
   height: 100%;
+  display: flex;
   align-items: center;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
 
+const StyledTagContentKey = styled(StyledTagContent)`
+  font-weight: 800;
+`;
+
 const StyledButtonWrapper = styled.div<IReqoreTagStyle>`
   flex-shrink: 0;
   font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
@@ -115,7 +134,7 @@ const StyledButtonWrapper = styled.div<IReqoreTagStyle>`
   display: flex;
   justify-content: center;
   align-items: center;
-  transition: background-color 0.2s ease-out;
+  transition: all 0.2s ease-out;
 
   ${({ theme, color }) =>
     css`
@@ -138,6 +157,7 @@ const ReqoreTag = forwardRef(
     {
       tooltip,
       label,
+      labelKey,
       icon,
       rightIcon,
       className,
@@ -163,6 +183,7 @@ const ReqoreTag = forwardRef(
     return (
       <StyledTag
         {...rest}
+        labelKey={labelKey}
         color={customColor}
         className={`${className || ''} reqore-tag`}
         size={size}
@@ -176,9 +197,10 @@ const ReqoreTag = forwardRef(
             <ReqoreIcon
               icon={icon}
               size={`${TEXT_FROM_SIZE[size]}px`}
-              margin={label || rightIcon ? 'right' : undefined}
+              margin={label || rightIcon ? 'left' : 'both'}
             />
           )}
+          {labelKey && <StyledTagContentKey size={size}>{labelKey}</StyledTagContentKey>}
           {label && <StyledTagContent size={size}>{label}</StyledTagContent>}
           {rightIcon && (
             <ReqoreIcon

package/src/constants/theme.ts

@@ -100,3 +100,12 @@ export const DEFAULT_THEME: IReqoreTheme = {
   intents: DEFAULT_INTENTS,
   notifications: {},
 };
+
+export const ReqoreIntents: { [key: string]: TReqoreIntent } = {
+  INFO: 'info',
+  SUCCESS: 'success',
+  PENDING: 'pending',
+  WARNING: 'warning',
+  DANGER: 'danger',
+  MUTED: 'muted',
+};

package/src/hooks/usePopover.tsx

@@ -29,6 +29,7 @@ export interface IPopover {
   closeOnOutsideClick?: boolean;
   closeOnAnyClick?: boolean;
   delay?: number;
+  blur?: number;
 }
 
 export interface IPopoverOptions extends IPopover {
@@ -88,7 +89,7 @@ const usePopover = ({
   };
 
   useUpdateEffect(() => {
-    if (show) {
+    if (content && show) {
       updatePopover?.(current, {
         id: current,
         content,
@@ -100,13 +101,13 @@ const usePopover = ({
         closeOnAnyClick: handler === 'hover' || handler === 'hoverStay',
       });
     }
-  }, [content]);
+  }, [content?.toString()]);
 
   useEffect(() => {
     if (openOnMount && targetElement) {
       _addPopover();
     }
-  }, [targetElement]);
+  }, [targetElement?.toString()]);
 
   useEffect(() => {
     if (targetElement && content) {
@@ -135,9 +136,10 @@ const usePopover = ({
         }
       }
     };
-  }, [targetElement, content, current, currentPopover]);
+  }, [targetElement?.toString(), content?.toString(), current, currentPopover]);
 
   useUnmount(() => {
+    console.log('UNMOUNTING POPOVER', content);
     cancelTimeout();
   });
 

package/src/hooks/useTooltip.ts

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

package/src/index.tsx

@@ -2,6 +2,7 @@ export { default as ReqoreBreadcrumbs } from './components/Breadcrumbs';
 export { default as ReqoreBreadcrumbsItem } from './components/Breadcrumbs/item';
 export { default as ReqoreButton } from './components/Button';
 export { default as ReqoreCheckbox } from './components/Checkbox';
+export { ReqoreCollection } from './components/Collection';
 export { ReqoreColumns } from './components/Columns';
 export { ReqoreColumn } from './components/Columns/column';
 export { ReqoreComment } from './components/Comment';