@qoretechnologies/reqore 0.30.4 → 0.30.6

package/src/components/Spacer/index.tsx

@@ -1,4 +1,4 @@
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import styled, { css } from 'styled-components';
 import { SIZE_TO_NUMBER, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { changeLightness } from '../../helpers/colors';
@@ -6,68 +6,32 @@ import { useReqoreTheme } from '../../hooks/useTheme';
 import { IReqoreIntent, IWithReqoreCustomTheme, IWithReqoreEffect } from '../../types/global';
 import { StyledEffect } from '../Effect';
 
-export const StyledSpacer = styled.div`
-  display: ${({ horizontal }) => (horizontal ? 'inline-flex' : 'flex')};
-  vertical-align: middle;
-
-  ${({ horizontal, vertical }) => {
-    if (horizontal) {
-      return css`
-        flex-flow: row;
-      `;
-    }
-
-    if (vertical) {
-      return css`
-        flex-flow: column;
-      `;
-    }
-  }}
-
-  flex-shrink: 0;
-`;
-
-export const StyledSpace = styled.div`
-  display: inline-block;
-  flex: 0 0 auto;
-
+export const StyledSpacer = styled(StyledEffect)`
   ${({ horizontal, vertical, width, height, lineSize }) => {
     if (horizontal) {
       return css`
-        width: ${width / 2 - lineSize / 2}px;
+        margin-left: ${width / 2}px;
+        margin-right: ${width / 2}px;
+        width: ${lineSize === 'none' ? 1 : SIZE_TO_NUMBER[lineSize]}px;
         height: ${height ? `${height}px` : `${TEXT_FROM_SIZE.normal}px`};
+        vertical-align: middle;
+        display: inline-block;
       `;
     }
 
     if (vertical) {
       return css`
+        margin-top: ${height / 2}px;
+        margin-bottom: ${height / 2}px;
+        height: ${lineSize === 'none' ? 1 : SIZE_TO_NUMBER[lineSize]}px;
         width: ${width ? `${width}px` : '100%'};
-        height: ${height / 2 - lineSize / 2}px;
       `;
     }
   }}
-`;
 
-export const StyledLine = styled(StyledEffect)`
-  flex-shrink: 0;
   background-color: ${({ theme, lineSize }) =>
     lineSize === 'none' ? 'transparent' : changeLightness(theme.main, 0.2)};
-
-  ${({ horizontal, vertical, width, height, lineSize }) => {
-    if (horizontal) {
-      return css`
-        width: ${lineSize}px;
-        height: ${height ? `${height}px` : `${TEXT_FROM_SIZE.normal}px`};
-      `;
-    }
-
-    if (vertical) {
-      return css`
-        width: ${width ? `${width}px` : '100%'};
-        height: ${lineSize}px;
-      `;
-    }
-  }}
+  flex-shrink: 0;
 `;
 
 export interface IReqoreSpacerProps
@@ -102,29 +66,16 @@ export const ReqoreSpacer = memo(
       }
     }
 
-    const _lineSize = useMemo(
-      () => (lineSize === 'none' ? 0 : SIZE_TO_NUMBER[lineSize]),
-      [lineSize]
-    );
-
     return (
       <StyledSpacer
         as='div'
         {...rest}
+        theme={theme}
+        lineSize={lineSize}
         horizontal={horizontal}
         vertical={vertical}
         className='reqore-spacer'
-      >
-        <StyledSpace {...rest} horizontal={horizontal} vertical={vertical} lineSize={_lineSize} />
-        <StyledLine
-          {...rest}
-          horizontal={horizontal}
-          vertical={vertical}
-          theme={theme}
-          lineSize={_lineSize}
-        />
-        <StyledSpace {...rest} horizontal={horizontal} vertical={vertical} lineSize={_lineSize} />
-      </StyledSpacer>
+      />
     );
   }
 );

package/src/components/Table/helpers.ts

@@ -1,25 +1,19 @@
-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, thenBy, direction } = sort;
+  const { by, 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,7 +89,6 @@ export interface IReqoreTableStyle {
 
 export interface IReqoreTableSort {
   by?: string;
-  thenBy?: string;
   direction?: 'asc' | 'desc';
 }
 

package/src/components/Tabs/content.tsx

@@ -1,12 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 
-export type TReqoreTabsContentPadding = 'horizontal' | 'vertical' | 'none' | 'both' | true | false;
-
 export interface IReqoreTabsContent extends React.HTMLAttributes<HTMLDivElement> {
   children?: any;
   tabId: string | number;
-  padded?: TReqoreTabsContentPadding;
 }
 
 const StyledTabsContent = styled.div`
@@ -14,16 +11,11 @@ const StyledTabsContent = styled.div`
   flex-flow: column;
   overflow: hidden;
   flex: 1;
-  padding: ${({ padded }: IReqoreTabsContent) =>
-    padded === 'none' || padded === false
-      ? undefined
-      : `${padded === 'both' || padded === true || padded === 'vertical' ? 10 : 0}px ${
-          padded === 'both' || padded === true || padded === 'horizontal' ? 10 : 0
-        }px}`};
+  padding: 10px;
 `;
 
-const ReqoreTabsContent = ({ children, className, padded = true, ...rest }: IReqoreTabsContent) => (
-  <StyledTabsContent {...rest} padded={padded} className={`${className || ''} reqore-tabs-content`}>
+const ReqoreTabsContent = ({ children, className, ...rest }: IReqoreTabsContent) => (
+  <StyledTabsContent {...rest} className={`${className || ''} reqore-tabs-content`}>
     {children}
   </StyledTabsContent>
 );

package/src/components/Tabs/index.tsx

@@ -1,11 +1,9 @@
-import React, { ReactElement, useState } from 'react';
-import { useUpdateEffect } from 'react-use';
+import React, { ReactElement, useEffect, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { TSizes } from '../../constants/sizes';
 import { IReqoreCustomTheme, TReqoreIntent } from '../../constants/theme';
 import { IReqoreIconName } from '../../types/icons';
 import { IReqoreButtonProps } from '../Button';
-import { TReqoreTabsContentPadding } from './content';
 import ReqoreTabsList from './list';
 
 export interface IReqoreTabsListItem extends Omit<IReqoreButtonProps, 'id'> {
@@ -28,8 +26,6 @@ export interface IReqoreTabsProps extends React.HTMLAttributes<HTMLDivElement> {
   fillParent?: boolean;
   vertical?: boolean;
   activeTabIntent?: TReqoreIntent;
-  padded?: boolean;
-  tabsPadding?: TReqoreTabsContentPadding;
   wrapTabNames?: boolean;
   flat?: boolean;
   size?: TSizes;
@@ -65,13 +61,11 @@ const ReqoreTabs = ({
   wrapTabNames,
   customTheme,
   intent,
-  padded,
-  tabsPadding,
   ...rest
 }: IReqoreTabsProps) => {
   const [_activeTab, setActiveTab] = useState<string | number>(activeTab || tabs[0].id);
 
-  useUpdateEffect(() => {
+  useEffect(() => {
     if (activeTab || activeTab === 0) {
       setActiveTab(activeTab);
 
@@ -90,7 +84,6 @@ const ReqoreTabs = ({
     >
       <ReqoreTabsList
         tabs={tabs}
-        padded={padded}
         flat={flat}
         fill={fill}
         size={size}
@@ -111,11 +104,7 @@ const ReqoreTabs = ({
         }}
       />
       {React.Children.map(children, (child) =>
-        child && child.props?.tabId === _activeTab
-          ? React.cloneElement(child, {
-              padded: child.props?.padded || tabsPadding,
-            })
-          : null
+        child && child.props?.tabId === _activeTab ? child : null
       )}
     </StyledTabs>
   );

package/src/components/Tabs/item.tsx

@@ -18,7 +18,6 @@ export interface IReqoreTabListItemProps extends IReqoreTabsListItem, IWithReqor
   wrapTabNames?: boolean;
   fill?: boolean;
   className?: string;
-  padded?: boolean;
 }
 
 export interface IReqoreTabListItemStyle extends IReqoreTabListItemProps {
@@ -28,7 +27,7 @@ export interface IReqoreTabListItemStyle extends IReqoreTabListItemProps {
 }
 
 export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
-  ${({ disabled, vertical, size, fill, padded }: IReqoreTabListItemStyle) => {
+  ${({ disabled, vertical, size, fill }: IReqoreTabListItemStyle) => {
     return css`
       display: flex;
       flex-shrink: 0;
@@ -46,40 +45,20 @@ export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
               border-right: 0;
             }
             ${StyledButton}:last-child {
-              border-top-right-radius: 0 !important;
-              border-bottom-right-radius: 0 !important;
+              border-top-right-radius: 0;
+              border-bottom-right-radius: 0;
             }
-
-            ${padded === false &&
-            css`
-              &:first-child {
-                padding-top: 0;
-              }
-              &:last-child {
-                padding-bottom: 0;
-              }
-            `}
           `
         : css`
             ${StyledButton} {
               border-bottom: 0;
             }
             ${StyledButton}:first-child {
-              border-bottom-left-radius: 0 !important;
+              border-bottom-left-radius: 0;
             }
             ${StyledButton}:last-child {
-              border-bottom-right-radius: 0 !important;
+              border-bottom-right-radius: 0;
             }
-
-            ${padded === false &&
-            css`
-              &:first-child {
-                padding-left: 0;
-              }
-              &:last-child {
-                padding-right: 0;
-              }
-            `}
           `}
 
       ${fill &&
@@ -130,7 +109,6 @@ const ReqoreTabsListItem = memo(
         flat = true,
         wrapTabNames,
         id,
-        padded,
         ...rest
       }: IReqoreTabListItemProps,
       ref
@@ -151,7 +129,6 @@ const ReqoreTabsListItem = memo(
           vertical={vertical}
           theme={theme}
           fill={fill}
-          padded={padded}
         >
           {label || icon ? (
             <ReqoreControlGroup stack size={size} fluid={fill || vertical}>

package/src/components/Tabs/list.tsx

@@ -162,7 +162,6 @@ const ReqoreTabsList = ({
   flat,
   size,
   intent,
-  padded,
   ...rest
 }: IReqoreTabsListProps) => {
   const [ref, { width }] = useMeasure();
@@ -212,13 +211,11 @@ const ReqoreTabsList = ({
                     vertical,
                     flat,
                     size,
-                    padded,
                     className: 'reqore-tabs-list-item-menu',
                   } as IReqoreTabListItemProps
                 }
                 closeOnOutsideClick
                 isReqoreComponent
-                noWrapper
                 handler='hoverStay'
                 content={
                   <ReqoreMenu customTheme={theme}>
@@ -281,7 +278,6 @@ const ReqoreTabsList = ({
                 fill={fill}
                 size={size}
                 flat={flat}
-                padded={padded}
                 activeIntent={activeTabIntent}
                 wrapTabNames={wrapTabNames}
                 {...item}

package/src/components/Tag/group.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { StyledTag } from '.';
 import { GAP_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IWithReqoreMinimal, IWithReqoreSize } from '../../types/global';
 
@@ -10,14 +11,19 @@ export interface IReqoreTagGroup
   children: any;
   gapSize?: TSizes;
   columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
-  wrap?: boolean;
+  hasBottomMargin?: boolean;
 }
 
 const StyledTagGroup = styled.div`
   flex-shrink: 0;
-  display: flex;
-  flex-wrap: ${({ wrap }: IReqoreTagGroup) => (wrap ? 'wrap' : 'nowrap')};
-  gap: ${({ gapSize }: IReqoreTagGroup) => GAP_FROM_SIZE[gapSize]}px;
+
+  ${StyledTag} {
+    &:not(:last-child) {
+      margin-right: ${({ gapSize }: IReqoreTagGroup) => `${GAP_FROM_SIZE[gapSize]}px`};
+    }
+
+    margin-bottom: ${({ hasBottomMargin }) => (hasBottomMargin ? '5px' : '0px')};
+  }
 `;
 
 const ReqoreTagGroup = ({
@@ -27,13 +33,13 @@ const ReqoreTagGroup = ({
   minimal,
   className,
   columns,
-  wrap = true,
+  hasBottomMargin = true,
   ...rest
 }: IReqoreTagGroup) => (
   <StyledTagGroup
     {...rest}
     gapSize={gapSize}
-    wrap={wrap}
+    hasBottomMargin={hasBottomMargin}
     className={`${className || ''} reqore-tag-group`}
   >
     {React.Children.map(children, (child) =>

package/src/components/Tag/index.tsx

@@ -21,13 +21,10 @@ import {
 } from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useTooltip } from '../../hooks/useTooltip';
-import { ActiveIconScale, InactiveIconScale } from '../../styles';
 import {
   IReqoreDisabled,
   IReqoreIntent,
   IWithReqoreEffect,
-  IWithReqoreFixed,
-  IWithReqoreFluid,
   IWithReqoreMinimal,
   IWithReqoreTooltip,
 } from '../../types/global';
@@ -37,7 +34,6 @@ import ReqoreIcon from '../Icon';
 
 export interface IReqoreTagAction extends IWithReqoreTooltip, IReqoreDisabled, IReqoreIntent {
   icon: IReqoreIconName;
-  show?: boolean;
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
 
@@ -46,9 +42,7 @@ export interface IReqoreTagProps
     IWithReqoreTooltip,
     IReqoreDisabled,
     IWithReqoreEffect,
-    IWithReqoreMinimal,
-    IWithReqoreFluid,
-    IWithReqoreFixed {
+    IWithReqoreMinimal {
   size?: TSizes;
   label?: string | number;
   labelKey?: string | number;
@@ -56,9 +50,6 @@ export interface IReqoreTagProps
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
   icon?: IReqoreIconName;
   rightIcon?: IReqoreIconName;
-  iconColor?: TReqoreEffectColor;
-  leftIconColor?: TReqoreEffectColor;
-  rightIconColor?: TReqoreEffectColor;
   color?: TReqoreEffectColor;
   actions?: IReqoreTagAction[];
   width?: string;
@@ -86,14 +77,10 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
   font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
 
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
-  width: ${({ fluid, fixed }) => (fluid && !fixed ? '100%' : undefined)};
-  flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto')};
   border-radius: ${({ asBadge, size }) => (asBadge ? 18 : RADIUS_FROM_SIZE[size])}px;
   width: ${({ width }) => width || undefined};
   transition: all 0.2s ease-out;
 
-  ${InactiveIconScale};
-
   ${({ wrap, hasWidth }) =>
     wrap || hasWidth
       ? css`
@@ -119,24 +106,16 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
     `}
 
   ${({ theme, color, interactive, minimal, effect }) =>
-    interactive
+    interactive && !effect?.gradient
       ? css`
           cursor: pointer;
           &:hover {
-            .reqore-tag-content,
-            .reqore-tag-key-content {
-              ${ActiveIconScale}
-            }
-
-            ${!effect?.gradient &&
-            css`
-              background-color: ${changeLightness(color || theme.main, color ? 0.05 : 0.15)};
-              color: ${minimal
-                ? getReadableColor(theme, undefined, undefined, false, theme.originalMain)
-                : color
-                ? getReadableColorFrom(color)
-                : getReadableColor(theme, undefined, undefined)};
-            `}
+            background-color: ${changeLightness(color || theme.main, color ? 0.05 : 0.15)};
+            color: ${minimal
+              ? getReadableColor(theme, undefined, undefined, false, theme.originalMain)
+              : color
+              ? getReadableColorFrom(color)
+              : getReadableColor(theme, undefined, undefined)};
           }
         `
       : undefined}
@@ -151,6 +130,8 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
     `}
 `;
 
+const StyledTagRightIcon = styled(ReqoreIcon)``;
+
 const StyledTagKeyWrapper = styled.span<{ size: TSizes }>`
   display: flex;
   align-items: center;
@@ -246,9 +227,6 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
       minimal,
       wrap = false,
       width,
-      leftIconColor,
-      rightIconColor,
-      iconColor,
       ...rest
     }: IReqoreTagProps,
     ref
@@ -298,14 +276,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
             hasWidth={!!width}
             hasKey={!!labelKey}
           >
-            {icon && (
-              <ReqoreIcon
-                icon={icon}
-                size={size}
-                margin={label ? 'left' : 'both'}
-                color={leftIconColor || iconColor}
-              />
-            )}
+            {icon && <ReqoreIcon icon={icon} size={size} margin={label ? 'left' : 'both'} />}
             {labelKey && (
               <StyledTagContentKey wrap={wrap} hasWidth={!!width} size={size}>
                 {labelKey}
@@ -328,40 +299,37 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
               </StyledTagContent>
             ) : null}
             {rightIcon && (
-              <ReqoreIcon
+              <StyledTagRightIcon
                 icon={rightIcon}
                 size={size}
                 margin={label || icon ? 'right' : 'both'}
-                color={rightIconColor || iconColor}
               />
             )}
           </StyledTagContentWrapper>
         ) : null}
         {_size(actions)
-          ? actions
-              .filter((action) => action.show !== false)
-              .map((action, index) => (
-                <React.Fragment key={index}>
-                  <ReqorePopover
-                    component={StyledButtonWrapper}
-                    componentProps={{
-                      size,
-                      color: getCustomColor(action.intent),
-                      className: 'reqore-tag-action',
-                      onClick: action.onClick,
-                      effect: rest.effect,
-                    }}
-                    {...(action.tooltip
-                      ? typeof action.tooltip === 'string'
-                        ? { tooltip: action.tooltip }
-                        : action.tooltip
-                      : {})}
-                    isReqoreComponent
-                  >
-                    <ReqoreIcon icon={action.icon} size={size} />
-                  </ReqorePopover>
-                </React.Fragment>
-              ))
+          ? actions.map((action, index) => (
+              <React.Fragment key={index}>
+                <ReqorePopover
+                  component={StyledButtonWrapper}
+                  componentProps={{
+                    size,
+                    color: getCustomColor(action.intent),
+                    className: 'reqore-tag-action',
+                    onClick: action.onClick,
+                    effect: rest.effect,
+                  }}
+                  {...(action.tooltip
+                    ? typeof action.tooltip === 'string'
+                      ? { tooltip: action.tooltip }
+                      : action.tooltip
+                    : {})}
+                  noWrapper
+                >
+                  <ReqoreIcon icon={action.icon} size={size} />
+                </ReqorePopover>
+              </React.Fragment>
+            ))
           : null}
         {onRemoveClick && !rest.disabled ? (
           <ReqorePopover
@@ -373,7 +341,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
               onClick: onRemoveClick,
               effect: rest.effect,
             }}
-            isReqoreComponent
+            noWrapper
             content='Remove'
           >
             <ReqoreIcon icon='CloseLine' size={size} />

package/src/components/Tree/index.tsx

@@ -181,7 +181,7 @@ export const ReqoreTree = ({
   return (
     <StyledTreeWrapper className='reqore-tree'>
       {showControls && (
-        <ReqoreControlGroup stack size={size} responsive>
+        <ReqoreControlGroup stack size={size}>
           {isDeep() && !allExpanded ? (
             <ReqoreButton
               flat

package/src/constants/animations.ts

@@ -1,5 +1,5 @@
 export const SPRING_CONFIG = {
-  tension: 180,
+  tension: 120,
   friction: 20,
 };
 

package/src/constants/sizes.ts

@@ -37,19 +37,19 @@ export const HEADER_SIZE_TO_NUMBER = {
 };
 
 export const SIZE_TO_PX = {
-  tiny: 18,
-  small: 24,
+  tiny: 10,
+  small: 20,
   normal: 30,
   big: 40,
   huge: 50,
 };
 
 export const BADGE_SIZE_TO_PX = {
-  tiny: 14,
-  small: 20,
-  normal: 26,
-  big: 32,
-  huge: 38,
+  tiny: 10,
+  small: 18,
+  normal: 24,
+  big: 30,
+  huge: 36,
 };
 
 export const TABS_SIZE_TO_PX = {
@@ -109,9 +109,9 @@ export const PADDING_FROM_SIZE = {
 };
 
 export const RADIUS_FROM_SIZE = {
-  tiny: 4,
-  small: 5,
-  normal: 5.5,
+  tiny: 1,
+  small: 3,
+  normal: 5,
   big: 7,
   huge: 9,
 };