@qoretechnologies/reqore 0.29.4 → 0.29.6

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;
@@ -19,6 +25,18 @@ export interface IReqoreControlGroupProps
    */
   vertical?: boolean;
   wrap?: boolean;
+  isInsideStackGroup?: boolean;
+  isInsideVerticalGroup?: boolean;
+  isFirst?: boolean;
+  isLast?: boolean;
+  isLastInFirstGroup?: boolean;
+  isLastInLastGroup?: boolean;
+  isFirstInLastGroup?: boolean;
+  childrenCount?: number;
+  childId?: number;
+  isChild?: boolean;
+  isFirstGroup?: boolean;
+  isLastGroup?: boolean;
 }
 
 export interface IReqoreControlGroupStyle extends IReqoreControlGroupProps {
@@ -34,112 +52,243 @@ export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
   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) {
-              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,
+        childrenCount,
+        childId,
+        isChild,
+        isFirstGroup,
+        isLastGroup,
+        ...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 || childrenCount === 1
+          ? 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
+          : isFirstGroup && (isLast || isLast !== false) && index === realChildCount - 1;
+      };
+      const getIsFirstInLastGroup = (index: number): boolean => {
+        return !isInsideStackGroup
+          ? index === realChildCount - 1
+          : isLastGroup && (isFirst || isFirst !== false) && childId === 1 && index === 0;
+      };
+      const getIsLastInLastGroup = (index: number): boolean => {
+        return !isInsideStackGroup
+          ? index === realChildCount - 1
+          : isLastGroup && (isLast || isLast !== false) && index === realChildCount - 1;
+      };
+
+      const getBorderTopLeftRadius = (index: number): number | undefined => {
+        const _isFirstGroup =
+          !isInsideStackGroup || childrenCount === 1 ? true : isChild ? isFirstGroup : index === 0;
+
+        // If this is the first item
+        if (_isFirstGroup && getIsFirst(index)) {
+          return RADIUS_FROM_SIZE[size];
+        }
+
+        return undefined;
+      };
 
-          > .reqore-control-wrapper:not(:last-child) .reqore-control {
-            border-bottom: ${({ stack }) => (!stack ? undefined : 0)};
+      const getBorderTopRightRadius = (index: number): number | undefined => {
+        // If this group is not vertical we need to style the very last item
+        if (!isVertical || !isStack) {
+          const _isLastGroup =
+            !isInsideStackGroup || childrenCount === 1
+              ? true
+              : isChild
+              ? isLastGroup
+              : index === realChildCount - 1;
+
+          if (_isLastGroup && getIsLast(index)) {
+            return RADIUS_FROM_SIZE[size];
           }
-        `
-      : css`
-          > .reqore-control,
-          > .reqore-control-wrapper,
-          > .reqore-tag,
-          > * {
-            &:not(:last-child) {
-              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 is not vertical we need to style the very first item
+        if (!isVertical || !isStack) {
+          const _isFirstGroup =
+            !isInsideStackGroup || childrenCount === 1
+              ? true
+              : isChild
+              ? isFirstGroup
+              : index === 0;
+
+          if (_isFirstGroup && getIsFirst(index)) {
+            return RADIUS_FROM_SIZE[size];
           }
-        `}
-`;
 
-const ReqoreControlGroup = forwardRef<HTMLDivElement, IReqoreControlGroupProps>(
-  (
-    {
-      children,
-      className,
-      minimal,
-      size = 'normal',
-      gapSize = 'normal',
-      fluid,
-      flat,
-      rounded = true,
-      wrap,
-      ...rest
-    }: IReqoreControlGroupProps,
-    ref
-  ) => (
-    <StyledReqoreControlGroup
-      {...rest}
-      size={size}
-      gapSize={gapSize}
-      ref={ref}
-      rounded={rounded}
-      fluid={fluid}
-      wrap={wrap}
-      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: child.props?.fluid || child.props?.fluid === false ? child.props.fluid : 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 => {
+        const _isLastGroup =
+          !isInsideStackGroup || childrenCount === 1
+            ? true
+            : isChild
+            ? isLastGroup
+            : index === realChildCount - 1;
+
+        // If this is the last item
+        if (_isLastGroup && getIsLast(index)) {
+          return RADIUS_FROM_SIZE[size];
+        }
+
+        return undefined;
+      };
+
+      let index = 0;
+
+      const getStuff = (index, child) => {
+        if (isStack) {
+          return {
+            style: {
+              borderTopLeftRadius: getBorderTopLeftRadius(index),
+              borderBottomLeftRadius: getBorderBottomLeftRadius(index),
+              borderTopRightRadius: getBorderTopRightRadius(index),
+              borderBottomRightRadius: getBorderBottomRightRadius(index),
+              ...(child.props?.style || {}),
+            },
+            rounded: !isStack,
+            isInsideStackGroup: isStack,
+            isInsideVerticalGroup: isVertical,
+            isFirst: isChild ? getIsFirst(index) : undefined,
+            isLast: isChild ? getIsLast(index) : undefined,
+            isLastInFirstGroup: getIsLastInFirstGroup(index),
+            isLastInLastGroup: getIsLastInLastGroup(index),
+            isFirstInLastGroup: getIsFirstInLastGroup(index),
+            childrenCount: realChildCount,
+            childId: index + 1,
+            isChild: true,
+            isFirstGroup: isChild ? isFirstGroup : index === 0,
+            isLastGroup: isChild ? isLastGroup : index === realChildCount - 1,
+          };
+        }
+
+        return {};
+      };
+
+      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,
+                  ...getStuff(index, child),
+                })
+              : 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/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 {
@@ -60,7 +61,9 @@ export interface IReqoreInputStyle extends IReqoreInputProps {
 export const StyledInputWrapper = styled.div<IReqoreInputStyle>`
   height: ${({ _size }) => SIZE_TO_PX[_size]}px;
   width: ${({ width }) => (width ? `${width}px` : 'auto')};
-  flex: ${({ fluid, fixed }) => (fixed ? '0 auto' : fluid ? '1 0 auto' : '0 0 auto')};
+  max-width: ${({ fluid, fixed }) => (fluid && !fixed ? '100%' : undefined)};
+  min-width: 60px;
+  flex: ${({ fluid, fixed }) => (fixed ? '0 auto' : fluid ? '1 auto' : '0 1 auto')};
   font-size: ${({ _size }) => TEXT_FROM_SIZE[_size]}px;
   position: relative;
   overflow: hidden;
@@ -150,6 +153,7 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
       className,
       onClearClick,
       icon,
+      iconColor,
       flat,
       rounded = true,
       minimal,
@@ -185,7 +189,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/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/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}>