@qoretechnologies/reqore 0.30.6 → 0.30.8

package/src/components/Spacer/index.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, useMemo } 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,32 +6,68 @@ import { useReqoreTheme } from '../../hooks/useTheme';
 import { IReqoreIntent, IWithReqoreCustomTheme, IWithReqoreEffect } from '../../types/global';
 import { StyledEffect } from '../Effect';
 
-export const StyledSpacer = styled(StyledEffect)`
+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;
+
   ${({ horizontal, vertical, width, height, lineSize }) => {
     if (horizontal) {
       return css`
-        margin-left: ${width / 2}px;
-        margin-right: ${width / 2}px;
-        width: ${lineSize === 'none' ? 1 : SIZE_TO_NUMBER[lineSize]}px;
+        width: ${width / 2 - lineSize / 2}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)};
-  flex-shrink: 0;
+
+  ${({ 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;
+      `;
+    }
+  }}
 `;
 
 export interface IReqoreSpacerProps
@@ -66,16 +102,29 @@ 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 ? alignToFlex[align] : 'flex-start'};
+    justify-content: ${align ? alignToFlexAlign(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 ? alignToFlex[align] : 'flex-start'};
+    justify-content: ${align ? alignToFlexAlign(align) : 'flex-start'};
   `}
 
   ${({ interactive, theme }) =>

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

@@ -13,6 +13,7 @@ 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';
@@ -75,12 +76,6 @@ 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`
@@ -137,7 +132,7 @@ export const StyledTableCell = styled.div<IReqoreTableCellStyle>`
     return css`
       display: flex;
       align-items: center;
-      justify-content: ${align ? alignToFlex[align] : 'flex-start'};
+      justify-content: ${align ? alignToFlexAlign(align) : 'flex-start'};
       flex-shrink: 0;
       border-bottom: ${!flat ? '1px solid ' : undefined};
 

package/src/components/Tabs/content.tsx

@@ -1,9 +1,12 @@
 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`
@@ -11,11 +14,16 @@ const StyledTabsContent = styled.div`
   flex-flow: column;
   overflow: hidden;
   flex: 1;
-  padding: 10px;
+  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}`};
 `;
 
-const ReqoreTabsContent = ({ children, className, ...rest }: IReqoreTabsContent) => (
-  <StyledTabsContent {...rest} className={`${className || ''} reqore-tabs-content`}>
+const ReqoreTabsContent = ({ children, className, padded = true, ...rest }: IReqoreTabsContent) => (
+  <StyledTabsContent {...rest} padded={padded} className={`${className || ''} reqore-tabs-content`}>
     {children}
   </StyledTabsContent>
 );

package/src/components/Tabs/index.tsx

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

package/src/components/Tabs/item.tsx

@@ -18,6 +18,7 @@ export interface IReqoreTabListItemProps extends IReqoreTabsListItem, IWithReqor
   wrapTabNames?: boolean;
   fill?: boolean;
   className?: string;
+  padded?: boolean;
 }
 
 export interface IReqoreTabListItemStyle extends IReqoreTabListItemProps {
@@ -27,7 +28,7 @@ export interface IReqoreTabListItemStyle extends IReqoreTabListItemProps {
 }
 
 export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
-  ${({ disabled, vertical, size, fill }: IReqoreTabListItemStyle) => {
+  ${({ disabled, vertical, size, fill, padded }: IReqoreTabListItemStyle) => {
     return css`
       display: flex;
       flex-shrink: 0;
@@ -45,20 +46,40 @@ 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;
             }
+
+            ${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;
+              border-bottom-left-radius: 0 !important;
             }
             ${StyledButton}:last-child {
-              border-bottom-right-radius: 0;
+              border-bottom-right-radius: 0 !important;
             }
+
+            ${padded === false &&
+            css`
+              &:first-child {
+                padding-left: 0;
+              }
+              &:last-child {
+                padding-right: 0;
+              }
+            `}
           `}
 
       ${fill &&
@@ -109,6 +130,7 @@ const ReqoreTabsListItem = memo(
         flat = true,
         wrapTabNames,
         id,
+        padded,
         ...rest
       }: IReqoreTabListItemProps,
       ref
@@ -129,6 +151,7 @@ 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,6 +162,7 @@ const ReqoreTabsList = ({
   flat,
   size,
   intent,
+  padded,
   ...rest
 }: IReqoreTabsListProps) => {
   const [ref, { width }] = useMeasure();
@@ -203,19 +204,21 @@ 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)
-                      ? {
-                          main: currentTabColor,
-                        }
+                      ? activeTabData?.customTheme
                       : theme,
                     vertical,
                     flat,
                     size,
+                    padded,
                     className: 'reqore-tabs-list-item-menu',
                   } as IReqoreTabListItemProps
                 }
                 closeOnOutsideClick
                 isReqoreComponent
+                noWrapper
                 handler='hoverStay'
                 content={
                   <ReqoreMenu customTheme={theme}>
@@ -278,6 +281,7 @@ const ReqoreTabsList = ({
                 fill={fill}
                 size={size}
                 flat={flat}
+                padded={padded}
                 activeIntent={activeTabIntent}
                 wrapTabNames={wrapTabNames}
                 {...item}

package/src/components/Tag/group.tsx

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