@qoretechnologies/reqore 0.30.5 → 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/header.tsx

@@ -2,9 +2,9 @@ import styled, { css } from 'styled-components';
 import { IReqoreTableColumn, IReqoreTableSort } from '.';
 import { IReqoreTheme } from '../../constants/theme';
 import { changeLightness } from '../../helpers/colors';
-import { alignToFlexAlign } from '../../helpers/utils';
 import { IReqoreIconName } from '../../types/icons';
 import ReqoreTableHeaderCell, { StyledTableHeader } from './headerCell';
+import { alignToFlex } from './row';
 
 export interface IReqoreTableSectionProps {
   columns: IReqoreTableColumn[];
@@ -46,7 +46,7 @@ export interface IReqoreTableHeaderStyle {
 export const StyledColumnGroupHeader = styled.div<IReqoreTableHeaderStyle>`
   ${({ align, theme }) => css`
     background-color: ${changeLightness(theme.main, 0.035)};
-    justify-content: ${align ? alignToFlexAlign(align) : 'flex-start'};
+    justify-content: ${align ? alignToFlex[align] : 'flex-start'};
   `}
 `;
 

package/src/components/Table/headerCell.tsx

@@ -4,9 +4,9 @@ import styled, { css } from 'styled-components';
 import { IReqoreTableColumn, IReqoreTableSort } from '.';
 import { IReqoreTheme } from '../../constants/theme';
 import { changeLightness, getReadableColor } from '../../helpers/colors';
-import { alignToFlexAlign } from '../../helpers/utils';
 import { useTooltip } from '../../hooks/useTooltip';
 import ReqoreIcon from '../Icon';
+import { alignToFlex } from './row';
 
 export interface IReqoreTableHeaderCellProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -32,7 +32,7 @@ export const StyledTableHeader = styled.div<IReqoreTableHeaderStyle>`
 
   ${({ align, theme }) => css`
     background-color: ${changeLightness(theme.main, 0.03)};
-    justify-content: ${align ? alignToFlexAlign(align) : 'flex-start'};
+    justify-content: ${align ? alignToFlex[align] : 'flex-start'};
   `}
 
   ${({ interactive, theme }) =>

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/Table/row.tsx

@@ -13,7 +13,6 @@ import { ReqorePopover } from '../..';
 import { SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import { changeLightness, getReadableColorFrom } from '../../helpers/colors';
-import { alignToFlexAlign } from '../../helpers/utils';
 import { TReqoreColor, TReqoreHexColor } from '../Effect';
 import { ReqoreH4 } from '../Header';
 import ReqoreIcon from '../Icon';
@@ -76,6 +75,12 @@ export interface IReqoreTableCellStyle {
   striped?: boolean;
 }
 
+export const alignToFlex = {
+  center: 'center',
+  left: 'flex-start',
+  right: 'flex-end',
+};
+
 export const StyledTableCell = styled.div<IReqoreTableCellStyle>`
   ${({ width, grow }) =>
     css`
@@ -132,7 +137,7 @@ export const StyledTableCell = styled.div<IReqoreTableCellStyle>`
     return css`
       display: flex;
       align-items: center;
-      justify-content: ${align ? alignToFlexAlign(align) : 'flex-start'};
+      justify-content: ${align ? alignToFlex[align] : 'flex-start'};
       flex-shrink: 0;
       border-bottom: ${!flat ? '1px solid ' : undefined};
 

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();
@@ -204,21 +203,19 @@ const ReqoreTabsList = ({
                     label: getMoreLabel(item, activeTab),
                     active: !!isTabHidden(item, activeTab),
                     activeIntent: activeTabIntent,
-                    intent: !!isTabHidden(item, activeTab) ? activeTabData?.intent : undefined,
-                    effect: !!isTabHidden(item, activeTab) ? activeTabData?.effect : undefined,
                     customTheme: !!isTabHidden(item, activeTab)
-                      ? activeTabData?.customTheme
+                      ? {
+                          main: currentTabColor,
+                        }
                       : theme,
                     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) =>