@qoretechnologies/reqore 0.29.3 → 0.29.5

package/src/components/ControlGroup/index.tsx

@@ -1,14 +1,20 @@
-import React, { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
+import React, { forwardRef, memo, useMemo } from 'react';
+import styled from 'styled-components';
 import { GAP_FROM_SIZE, RADIUS_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
-import { IWithReqoreFlat, IWithReqoreMinimal, IWithReqoreSize } from '../../types/global';
+import {
+  IReqoreIntent,
+  IWithReqoreFlat,
+  IWithReqoreMinimal,
+  IWithReqoreSize,
+} from '../../types/global';
 
 export interface IReqoreControlGroupProps
   extends React.HTMLAttributes<HTMLDivElement>,
     IWithReqoreFlat,
     IWithReqoreSize,
-    IWithReqoreMinimal {
+    IWithReqoreMinimal,
+    IReqoreIntent {
   stack?: boolean;
   children: any;
   fluid?: boolean;
@@ -18,6 +24,14 @@ export interface IReqoreControlGroupProps
    * Whether the contents of the control group should be stacked vertically
    */
   vertical?: boolean;
+  wrap?: boolean;
+  isInsideStackGroup?: boolean;
+  isInsideVerticalGroup?: boolean;
+  isFirst?: boolean;
+  isLast?: boolean;
+  isLastInFirstGroup?: boolean;
+  isLastInLastGroup?: boolean;
+  isFirstInLastGroup?: boolean;
 }
 
 export interface IReqoreControlGroupStyle extends IReqoreControlGroupProps {
@@ -30,117 +44,219 @@ export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
   width: ${({ fluid }) => (fluid ? '100%' : undefined)};
   align-items: ${({ fluid }) => (fluid ? 'stretch' : 'flex-start')};
   flex-flow: ${({ vertical }) => (vertical ? 'column' : 'row')};
+  gap: ${({ gapSize, stack }) => (!stack ? `${GAP_FROM_SIZE[gapSize]}px` : undefined)};
+  flex-wrap: ${({ wrap }) => (wrap ? 'wrap' : 'nowrap')};
 
-  > .reqore-control-wrapper .reqore-control {
+  > * {
     border-radius: ${({ stack }) => (!stack ? undefined : 0)};
   }
+`;
 
-  ${({ vertical }) =>
-    vertical
-      ? css`
-          > .reqore-control,
-          > .reqore-control-wrapper,
-          > .reqore-tag,
-          > * {
-            &:not(:last-child) {
-              margin-bottom: ${({ stack, gapSize }) =>
-                !stack ? `${GAP_FROM_SIZE[gapSize]}px` : undefined};
-              border-bottom: ${({ stack }) => (!stack ? undefined : 0)};
-            }
-
-            border-radius: ${({ stack }) => (!stack ? undefined : 0)};
-
-            ${({ rounded, size, stack }) =>
-              rounded && stack
-                ? css`
-                    &:first-child {
-                      border-top-left-radius: ${RADIUS_FROM_SIZE[size]}px;
-                      border-top-right-radius: ${RADIUS_FROM_SIZE[size]}px;
-                    }
-
-                    &:last-child {
-                      border-bottom-left-radius: ${RADIUS_FROM_SIZE[size]}px;
-                      border-bottom-right-radius: ${RADIUS_FROM_SIZE[size]}px;
-                    }
-                  `
-                : undefined}
-          }
+const ReqoreControlGroup = memo(
+  forwardRef<HTMLDivElement, IReqoreControlGroupProps>(
+    (
+      {
+        children,
+        className,
+        minimal,
+        size = 'normal',
+        gapSize = 'normal',
+        fluid,
+        flat,
+        rounded = true,
+        wrap,
+        stack,
+        isInsideStackGroup,
+        isInsideVerticalGroup,
+        isFirstInLastGroup,
+        isLastInFirstGroup,
+        isLastInLastGroup,
+        intent,
+        isFirst,
+        isLast,
+        vertical,
+        ...rest
+      }: IReqoreControlGroupProps,
+      ref
+    ) => {
+      const isStack = stack || isInsideStackGroup;
+      const isVertical = vertical || isInsideVerticalGroup;
+      const realChildCount = useMemo((): number => {
+        const count = React.Children.toArray(children).filter((child: any) => child).length;
+
+        return count < 0 ? 0 : count;
+      }, [children]);
+
+      const getIsFirst = (index: number): boolean => {
+        return !isInsideStackGroup ? index === 0 : (isFirst || isFirst !== false) && index === 0;
+      };
+      const getIsLast = (index: number): boolean => {
+        return !isInsideStackGroup
+          ? index === realChildCount - 1
+          : (isLast || isLast !== false) && index === realChildCount - 1;
+      };
+      const getIsLastInFirstGroup = (index: number): boolean => {
+        return !isInsideStackGroup
+          ? index === 0
+          : (isFirst || isFirst !== false) && index === realChildCount - 1;
+      };
+      const getIsFirstInLastGroup = (index: number): boolean => {
+        return !isInsideStackGroup
+          ? index === realChildCount - 1
+          : (isLast || isLast !== false) && index === 0;
+      };
+      const getIsLastInLastGroup = (index: number): boolean => {
+        return !isInsideStackGroup
+          ? index === realChildCount - 1
+          : (isLast || isLast !== false) && index === realChildCount - 1;
+      };
+
+      const getBorderTopLeftRadius = (index: number): number | undefined => {
+        // IF this group does not stack
+        if (!isStack) {
+          return undefined;
+        }
+        // If this is the first item
+        if (getIsFirst(index)) {
+          return RADIUS_FROM_SIZE[size];
+        }
+
+        return undefined;
+      };
 
-          > .reqore-control-wrapper:not(:last-child) .reqore-control {
-            margin-bottom: ${({ stack, gapSize }) =>
-              !stack ? `${GAP_FROM_SIZE[gapSize]}px` : undefined};
-            border-bottom: ${({ stack }) => (!stack ? undefined : 0)};
+      const getBorderTopRightRadius = (index: number): number | undefined => {
+        // IF this group does not stack
+        if (!isStack) {
+          return undefined;
+        }
+
+        // If this group is not vertical we need to style the very last item
+        if (!isVertical) {
+          if (getIsLast(index)) {
+            return RADIUS_FROM_SIZE[size];
           }
-        `
-      : css`
-          > .reqore-control,
-          > .reqore-control-wrapper,
-          > .reqore-tag,
-          > * {
-            &:not(:last-child) {
-              margin-right: ${({ stack, gapSize }) =>
-                !stack ? `${GAP_FROM_SIZE[gapSize]}px` : undefined};
-              border-right: ${({ stack }) => (!stack ? undefined : 0)};
-            }
-
-            border-radius: ${({ stack }) => (!stack ? undefined : 0)};
-
-            ${({ rounded, size, stack }) =>
-              rounded && stack
-                ? css`
-                    &:first-child {
-                      border-top-left-radius: ${RADIUS_FROM_SIZE[size]}px;
-                      border-bottom-left-radius: ${RADIUS_FROM_SIZE[size]}px;
-                    }
-
-                    &:last-child {
-                      border-top-right-radius: ${RADIUS_FROM_SIZE[size]}px;
-                      border-bottom-right-radius: ${RADIUS_FROM_SIZE[size]}px;
-                    }
-                  `
-                : undefined}
+
+          return undefined;
+        }
+
+        // This border only needs to apply when this group is vertical
+        // AND this item is the last item of the first group
+        if (getIsLastInFirstGroup(index)) {
+          return RADIUS_FROM_SIZE[size];
+        }
+
+        return undefined;
+      };
+
+      const getBorderBottomLeftRadius = (index: number): number | undefined => {
+        // IF this group does not stack
+        if (!isStack) {
+          return undefined;
+        }
+
+        // If this group is not vertical we need to style the very first item
+        if (!isVertical) {
+          if (getIsFirst(index)) {
+            return RADIUS_FROM_SIZE[size];
           }
-        `}
-`;
 
-const ReqoreControlGroup = forwardRef<HTMLDivElement, IReqoreControlGroupProps>(
-  (
-    {
-      children,
-      className,
-      minimal,
-      size = 'normal',
-      gapSize = 'normal',
-      fluid,
-      flat,
-      rounded = true,
-      ...rest
-    }: IReqoreControlGroupProps,
-    ref
-  ) => (
-    <StyledReqoreControlGroup
-      {...rest}
-      size={size}
-      gapSize={gapSize}
-      ref={ref}
-      rounded={rounded}
-      fluid={fluid}
-      className={`${className || ''} reqore-control-group`}
-    >
-      {React.Children.map(children, (child) =>
-        child
-          ? React.cloneElement(child, {
-              minimal:
-                child.props?.minimal || child.props?.minimal === false
-                  ? child.props.minimal
-                  : minimal,
-              size: child.props?.size || size,
-              flat: child.props?.flat || child.props?.flat === false ? child.props.flat : flat,
-              fluid,
-            })
-          : null
-      )}
-    </StyledReqoreControlGroup>
+          return undefined;
+        }
+
+        // This border only needs to apply when this group is vertical
+        // AND this item is the first item of the last group
+        if (getIsFirstInLastGroup(index)) {
+          return RADIUS_FROM_SIZE[size];
+        }
+
+        return undefined;
+      };
+
+      const getBorderBottomRightRadius = (index: number): number | undefined => {
+        // IF this group does not stack
+        if (!isStack) {
+          return undefined;
+        }
+
+        // If this is the last item
+        if (getIsLast(index)) {
+          return RADIUS_FROM_SIZE[size];
+        }
+
+        return undefined;
+      };
+
+      let index = 0;
+
+      return (
+        <StyledReqoreControlGroup
+          {...rest}
+          vertical={vertical}
+          size={size}
+          gapSize={gapSize}
+          ref={ref}
+          rounded={rounded}
+          fluid={fluid}
+          wrap={wrap}
+          stack={isStack}
+          className={`${className || ''} reqore-control-group`}
+        >
+          {React.Children.map(children, (child) => {
+            /*
+             * Because of the way React.Children.map works, we have to
+             * manually decrement the index for every child that is `null`
+             * because react maps through null children and returns them in `Count`
+             * We filter these children out in the `realChildCount` variable,
+             * but the index is still incremented
+             * */
+            const result = child
+              ? React.cloneElement(child, {
+                  key: index,
+                  minimal:
+                    child.props?.minimal || child.props?.minimal === false
+                      ? child.props.minimal
+                      : minimal,
+                  size: child.props?.size || size,
+                  flat: child.props?.flat || child.props?.flat === false ? child.props.flat : flat,
+                  fluid:
+                    child.props?.fluid || child.props?.fluid === false ? child.props.fluid : fluid,
+                  stack:
+                    child.props?.stack || child.props?.stack === false
+                      ? child.props.stack
+                      : isStack,
+                  intent: child.props?.intent || intent,
+                  style: {
+                    borderTopLeftRadius: getBorderTopLeftRadius(index),
+                    borderBottomLeftRadius: getBorderBottomLeftRadius(index),
+                    borderTopRightRadius: getBorderTopRightRadius(index),
+                    borderBottomRightRadius: getBorderBottomRightRadius(index),
+                    ...(child.props?.style || {}),
+                  },
+                  rounded: !isStack,
+                  isInsideStackGroup: isStack,
+                  isInsideVerticalGroup: isVertical,
+                  isFirst: getIsFirst(index),
+                  isLast: getIsLast(index),
+                  isLastInFirstGroup: getIsLastInFirstGroup(index),
+                  isLastInLastGroup: getIsLastInLastGroup(index),
+                  isFirstInLastGroup: getIsFirstInLastGroup(index),
+                })
+              : null;
+
+            /*
+             * Because of the way React.Children.map works, we have to
+             * manually decrement the index for every child that is `null`
+             * because react maps through null children and returns them in `Count`
+             * We filter these children out in the `realChildCount` variable,
+             * but the index is still incremented
+             * */
+            index = !child ? index : index + 1;
+
+            return result;
+          })}
+        </StyledReqoreControlGroup>
+      );
+    }
   )
 );
 

package/src/components/Dropdown/index.tsx

@@ -98,6 +98,7 @@ function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
       useTargetWidth={useTargetWidth}
       component={component || ReqoreButton}
       componentProps={componentProps}
+      isReqoreComponent
       noWrapper
       placement={placement || 'bottom-start'}
       handler={handler || 'click'}

package/src/components/Icon/index.tsx

@@ -6,14 +6,15 @@ import styled, { css } from 'styled-components';
 import { ReqoreThemeContext } from '../..';
 import { ICON_FROM_SIZE, PADDING_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { TReqoreIntent } from '../../constants/theme';
+import { getColorFromMaybeString } from '../../helpers/colors';
 import { isStringSize } from '../../helpers/utils';
 import { IWithReqoreEffect } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
-import { StyledEffect } from '../Effect';
+import { StyledEffect, TReqoreEffectColor } from '../Effect';
 
 export interface IReqoreIconProps extends React.HTMLAttributes<HTMLSpanElement>, IWithReqoreEffect {
   icon?: IReqoreIconName;
-  color?: string;
+  color?: TReqoreEffectColor;
   size?: TSizes | string;
   iconProps?: IconBaseProps;
   intent?: TReqoreIntent;
@@ -66,7 +67,9 @@ const ReqoreIcon = memo(
   }: IReqoreIconProps) => {
     const theme = useContext(ReqoreThemeContext);
     const Icon: IconType = RemixIcons[`Ri${icon}`];
-    const finalColor: string | undefined = intent ? theme.intents[intent] : color;
+    const finalColor: string | undefined = intent
+      ? theme.intents[intent]
+      : getColorFromMaybeString(theme, color);
     const finalSize: string = isStringSize(size) ? ICON_FROM_SIZE[size] : size;
 
     if (image) {

package/src/components/Input/index.tsx

@@ -22,7 +22,7 @@ import {
   IWithReqoreEffect,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
-import { StyledEffect } from '../Effect';
+import { StyledEffect, TReqoreEffectColor } from '../Effect';
 import ReqoreIcon from '../Icon';
 import ReqoreInputClearButton from '../InputClearButton';
 
@@ -48,6 +48,7 @@ export interface IReqoreInputProps
   rounded?: boolean;
   type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
   wrapperStyle?: React.CSSProperties;
+  iconColor?: TReqoreEffectColor;
 }
 
 export interface IReqoreInputStyle extends IReqoreInputProps {
@@ -150,6 +151,7 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
       className,
       onClearClick,
       icon,
+      iconColor,
       flat,
       rounded = true,
       minimal,
@@ -185,7 +187,7 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
       >
         {icon && (
           <StyledIconWrapper _size={size}>
-            <ReqoreIcon size={size} icon={icon} />
+            <ReqoreIcon size={size} icon={icon} color={iconColor} />
           </StyledIconWrapper>
         )}
         <StyledInput

package/src/components/InternalPopover/index.tsx

@@ -62,8 +62,8 @@ const StyledPopoverWrapper = styled.div<{ theme: IReqoreTheme }>`
   max-height: ${({ maxHeight = '80vh' }) => maxHeight};
   z-index: 999999;
   border-radius: ${RADIUS_FROM_SIZE.normal}px;
-  border: ${({ flat, isString, ...rest }: any) =>
-    !flat && !isString ? `1px solid ${getPopoverArrowColor({ ...rest, flat })}` : undefined};
+  border: ${({ flat, noWrapper, ...rest }: any) =>
+    !flat && noWrapper ? `1px solid ${getPopoverArrowColor({ ...rest, flat })}` : undefined};
 
   ${({ transparent }) =>
     !transparent &&
@@ -129,7 +129,7 @@ const StyledPopoverWrapper = styled.div<{ theme: IReqoreTheme }>`
   }
 `;
 
-const StyledPopoverContent = styled.div<{ isString?: boolean }>`
+const StyledPopoverContent = styled.div`
   width: 100%;
   height: 100%;
   z-index: 20;
@@ -145,6 +145,7 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = ({
   id,
   placement,
   noArrow,
+  noWrapper,
   useTargetWidth,
   transparent,
   maxWidth,
@@ -219,7 +220,7 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = ({
         isOpaque={!transparent && !minimal}
         intent={intent}
         flat={flat}
-        isString={isString(content)}
+        noWrapper={noWrapper}
         dim={flat && !transparent && !effect && minimal}
         className='reqore-popover-content'
         ref={(el) => {
@@ -236,8 +237,8 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = ({
         {!noArrow && !transparent ? (
           <StyledPopoverArrow ref={setArrowElement} style={styles.arrow} data-popper-arrow />
         ) : null}
-        <StyledPopoverContent isString={isString(content)}>
-          {isString(content) ? (
+        <StyledPopoverContent>
+          {!noWrapper || isString(content) ? (
             <ReqoreMessage
               opaque={!transparent && !minimal}
               className='reqore-popover-text'

package/src/components/Message/index.tsx

@@ -14,6 +14,7 @@ import {
   IWithReqoreSize,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
+import { TReqoreEffectColor } from '../Effect';
 import { ReqoreHeading } from '../Header';
 import ReqoreIcon from '../Icon';
 import {
@@ -35,6 +36,7 @@ export interface IReqoreMessageProps
   title?: string;
   children: any;
   icon?: IReqoreIconName;
+  iconColor?: TReqoreEffectColor;
   onClose?: () => any;
   onClick?: () => any;
   duration?: number;
@@ -64,6 +66,7 @@ const ReqoreMessage = forwardRef<HTMLDivElement, IReqoreMessageProps>(
       minimal,
       size = 'normal',
       customTheme,
+      iconColor,
       ...rest
     },
     ref: any
@@ -128,7 +131,12 @@ const ReqoreMessage = forwardRef<HTMLDivElement, IReqoreMessageProps>(
         >
           {leftIcon ? (
             <StyledIconWrapper intent={intent} size={size} theme={theme}>
-              <ReqoreIcon icon={leftIcon} margin={flat && minimal ? 'right' : 'both'} size={size} />
+              <ReqoreIcon
+                icon={leftIcon}
+                margin={flat && minimal ? 'right' : 'both'}
+                size={size}
+                color={iconColor}
+              />
             </StyledIconWrapper>
           ) : null}
           <StyledNotificationContentWrapper size={size} theme={theme}>

package/src/components/Panel/index.tsx

@@ -87,6 +87,7 @@ export interface IReqorePanelProps
   contentEffect?: IReqoreEffect;
   headerEffect?: IReqoreEffect;
   transparent?: boolean;
+  iconColor?: TReqoreEffectColor;
 }
 
 export interface IStyledPanel extends IReqorePanelProps {
@@ -266,6 +267,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       minimal,
       tooltip,
       badge,
+      iconColor,
       ...rest
     }: IReqorePanelProps,
     ref
@@ -455,6 +457,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
                   size={`${ICON_FROM_HEADER_SIZE[headerSize]}px`}
                   icon={icon}
                   margin='right'
+                  color={iconColor}
                 />
               )}
               {typeof label === 'string' ? (

package/src/components/Popover/index.tsx

@@ -8,7 +8,6 @@ export interface IReqorePopoverProps extends IReqoreComponent, IPopoverOptions {
   componentProps?: any;
   children?: any;
   isReqoreComponent?: boolean;
-  noWrapper?: boolean;
   wrapperTag?: string;
   wrapperStyle?: React.CSSProperties;
 }
@@ -23,7 +22,6 @@ const Popover = memo(
     componentProps,
     children,
     isReqoreComponent,
-    noWrapper,
     wrapperTag = 'span',
     wrapperStyle = {},
     passPopoverData,
@@ -39,7 +37,7 @@ const Popover = memo(
       passPopoverData?.(popoverData);
     }, [popoverData]);
 
-    if (isReqoreComponent || noWrapper) {
+    if (isReqoreComponent) {
       return (
         <Component
           {...componentProps}

package/src/components/Table/helpers.ts

@@ -1,19 +1,25 @@
-import { firstBy } from "thenby";
-import { IReqoreTableSort } from ".";
+import { firstBy } from 'thenby';
+import { IReqoreTableSort } from '.';
 
-export const flipSortDirection = (direction: "asc" | "desc"): "asc" | "desc" =>
-  direction === "asc" ? "desc" : "asc";
+export const flipSortDirection = (direction: 'asc' | 'desc'): 'asc' | 'desc' =>
+  direction === 'asc' ? 'desc' : 'asc';
 
 export const fixSort = (sort?: IReqoreTableSort) => {
-  return { ...(sort || {}), direction: sort?.direction || "desc" };
+  return { ...(sort || {}), direction: sort?.direction || 'desc' };
 };
 
 export const sortTableData = (data: any[], sort: IReqoreTableSort) => {
-  const { by, direction } = sort;
+  const { by, thenBy, direction } = sort;
 
   if (!by) {
     return data;
   }
 
+  if (thenBy) {
+    return [...data].sort(
+      firstBy(by, { ignoreCase: true, direction }).thenBy(thenBy, { ignoreCase: true, direction })
+    );
+  }
+
   return [...data].sort(firstBy(by, { ignoreCase: true, direction }));
 };

package/src/components/Table/index.tsx

@@ -89,6 +89,7 @@ export interface IReqoreTableStyle {
 
 export interface IReqoreTableSort {
   by?: string;
+  thenBy?: string;
   direction?: 'asc' | 'desc';
 }
 

package/src/components/Tabs/item.tsx

@@ -45,8 +45,8 @@ export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
               border-right: 0;
             }
             ${StyledButton}:last-child {
-              border-top-right-radius: 0;
-              border-bottom-right-radius: 0;
+              border-top-right-radius: 0 !important;
+              border-bottom-right-radius: 0 !important;
             }
           `
         : css`
@@ -54,10 +54,10 @@ export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
               border-bottom: 0;
             }
             ${StyledButton}:first-child {
-              border-bottom-left-radius: 0;
+              border-bottom-left-radius: 0 !important;
             }
             ${StyledButton}:last-child {
-              border-bottom-right-radius: 0;
+              border-bottom-right-radius: 0 !important;
             }
           `}
 

package/src/components/Tabs/list.tsx

@@ -216,6 +216,7 @@ const ReqoreTabsList = ({
                 }
                 closeOnOutsideClick
                 isReqoreComponent
+                noWrapper
                 handler='hoverStay'
                 content={
                   <ReqoreMenu customTheme={theme}>