@qoretechnologies/reqore 0.30.5 → 0.30.6

package/src/components/Button/index.tsx

@@ -11,7 +11,7 @@ import {
 import { IReqoreCustomTheme, IReqoreTheme } from '../../constants/theme';
 import ReqoreContext from '../../context/ReqoreContext';
 import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors';
-import { alignToFlexAlign, getOneLessSize } from '../../helpers/utils';
+import { getOneLessSize } from '../../helpers/utils';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreEffect } from '../../hooks/useReqoreEffect';
 import { useReqoreTheme } from '../../hooks/useTheme';
@@ -33,7 +33,6 @@ import {
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import {
-  IReqoreEffect,
   ReqoreTextEffect,
   StyledEffect,
   StyledTextEffect,
@@ -68,11 +67,6 @@ export interface IReqoreButtonProps
   description?: string | number;
   maxWidth?: string;
   textAlign?: 'left' | 'center' | 'right';
-  iconColor?: TReqoreEffectColor;
-  leftIconColor?: TReqoreEffectColor;
-  rightIconColor?: TReqoreEffectColor;
-  labelEffect?: IReqoreEffect;
-  descriptionEffect?: IReqoreEffect;
 }
 
 export interface IReqoreButtonStyle extends Omit<IReqoreButtonProps, 'intent'> {
@@ -92,13 +86,10 @@ const getButtonMainColor = (theme: IReqoreTheme, color?: TReqoreHexColor) => {
 export const StyledAnimatedTextWrapper = styled.span`
   overflow: hidden;
   position: relative;
-  text-align: ${({ textAlign }) => textAlign};
-  display: flex;
-  flex-flow: column;
-  align-items: ${({ textAlign }) => alignToFlexAlign(textAlign)};
+  text-align: left;
 `;
 
-export const StyledActiveContent = styled(StyledTextEffect)`
+export const StyledActiveContent = styled.span`
   position: absolute;
   transform: translateY(-150%);
   opacity: 0;
@@ -118,7 +109,7 @@ export const StyledActiveContent = styled(StyledTextEffect)`
         `}
 `;
 
-export const StyledInActiveContent = styled(StyledTextEffect)`
+export const StyledInActiveContent = styled.span`
   position: absolute;
   transform: translateY(0);
   transition: all 0.2s ease-out;
@@ -136,7 +127,7 @@ export const StyledInActiveContent = styled(StyledTextEffect)`
         `}
 `;
 
-export const StyledInvisibleContent = styled(StyledTextEffect)`
+export const StyledInvisibleContent = styled.span`
   visibility: hidden;
   position: relative;
   overflow: hidden;
@@ -167,7 +158,7 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
 
   min-height: ${({ size }) => SIZE_TO_PX[size]}px;
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
-  max-width: ${({ maxWidth, fluid, fixed }) => maxWidth || (fluid && !fixed ? '100%' : undefined)};
+  max-width: ${({ maxWidth }) => maxWidth || undefined};
   ${({ wrap, description }) =>
     !wrap && !description
       ? css`
@@ -176,7 +167,6 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
       : null}
 
   flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto')};
-  align-self: ${({ fixed, fluid }) => (fixed ? 'flex-start' : fluid ? 'stretch' : undefined)};
 
   border-radius: ${({ size }) => RADIUS_FROM_SIZE[size]}px;
 
@@ -207,7 +197,7 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
             transition: all 0.2s ease-out;
 
             &:active {
-              transform: scale(0.97);
+              transform: translateY(2px);
             }
 
             &:hover,
@@ -247,32 +237,24 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
         `
       : undefined}
 
-  ${({ active, flat, theme, color }: IReqoreButtonStyle) => {
-    if (active) {
-      return css`
-        cursor: pointer;
-        background-color: ${changeLightness(getButtonMainColor(theme, color), 0.1)};
-        color: ${getReadableColor(
-          { main: changeLightness(getButtonMainColor(theme, color), 0.1) },
-          undefined,
-          undefined
-        )};
+  ${({ active, flat, theme, color }: IReqoreButtonStyle) =>
+    active &&
+    css`
+      cursor: pointer;
+      background-color: ${changeLightness(getButtonMainColor(theme, color), 0.1)};
+      color: ${getReadableColor({ main: getButtonMainColor(theme, color) }, undefined, undefined)};
+      border-color: ${flat ? undefined : changeLightness(getButtonMainColor(theme, color), 0.175)};
+
+      &:hover,
+      &:active,
+      &:focus {
         border-color: ${flat
           ? undefined
-          : changeLightness(getButtonMainColor(theme, color), 0.175)};
-
-        &:hover,
-        &:active,
-        &:focus {
-          border-color: ${flat
-            ? undefined
-            : changeLightness(getButtonMainColor(theme, color), 0.275)};
-        }
-
-        ${ActiveIconScale}
-      `;
-    }
-  }}
+          : changeLightness(getButtonMainColor(theme, color), 0.275)};
+      }
+
+      ${ActiveIconScale}
+    `}
 
   &:disabled {
     ${DisabledElement};
@@ -288,7 +270,7 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
       minimal ? undefined : changeLightness(getButtonMainColor(theme, color), 0.4)};
   }
 
-  .reqore-button-description {
+  ${StyledTextEffect} {
     padding-bottom: ${({ size }) => PADDING_FROM_SIZE[getOneLessSize(size)]}px;
   }
 `;
@@ -343,7 +325,7 @@ export const ButtonBadge = memo((props: IReqoreButtonBadgeProps) => {
           width={props.wrap ? undefined : PADDING_FROM_SIZE[props.size]}
           height={!props.wrap ? undefined : PADDING_FROM_SIZE[props.size] / 2}
         />
-        <ReqoreTagGroup>
+        <ReqoreTagGroup hasBottomMargin={false}>
           {props.content.map((badge, index) => renderTag({ ...props, content: badge, key: index }))}
         </ReqoreTagGroup>
       </>
@@ -385,11 +367,6 @@ const ReqoreButton = memo(
         maxWidth,
         textAlign = 'left',
         effect,
-        labelEffect,
-        descriptionEffect,
-        leftIconColor,
-        rightIconColor,
-        iconColor,
         ...rest
       }: IReqoreButtonProps,
       ref
@@ -414,14 +391,10 @@ const ReqoreButton = memo(
       return (
         <StyledButton
           {...rest}
-          effect={
-            intent
-              ? undefined
-              : {
-                  interactive: !readOnly && !rest.disabled,
-                  ...fixedEffect,
-                }
-          }
+          effect={{
+            interactive: !readOnly && !rest.disabled,
+            ...fixedEffect,
+          }}
           as='button'
           theme={theme}
           ref={targetRef}
@@ -442,12 +415,7 @@ const ReqoreButton = memo(
           <StyledButtonContent size={size} wrap={wrap} description={description} flat={_flat}>
             {icon && (
               <>
-                <ReqoreIcon
-                  icon={icon}
-                  size={size}
-                  color={leftIconColor || iconColor}
-                  style={textAlign !== 'left' ? { marginRight: 'auto' } : undefined}
-                />
+                <ReqoreIcon icon={icon} size={size} />
                 {children || badge || rightIcon ? (
                   <ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
                 ) : null}
@@ -455,15 +423,9 @@ const ReqoreButton = memo(
             )}
             {children && (
               <StyledAnimatedTextWrapper textAlign={textAlign}>
-                <StyledActiveContent wrap={wrap} effect={labelEffect}>
-                  {children}
-                </StyledActiveContent>
-                <StyledInActiveContent wrap={wrap} effect={labelEffect}>
-                  {children}
-                </StyledInActiveContent>
-                <StyledInvisibleContent wrap={wrap} effect={labelEffect}>
-                  {children}
-                </StyledInvisibleContent>
+                <StyledActiveContent wrap={wrap}>{children}</StyledActiveContent>
+                <StyledInActiveContent wrap={wrap}>{children}</StyledInActiveContent>
+                <StyledInvisibleContent wrap={wrap}>{children}</StyledInvisibleContent>
                 {(badge || badge === 0) && wrap ? (
                   <ButtonBadge content={badge} size={size} color={color} wrap />
                 ) : null}
@@ -475,25 +437,18 @@ const ReqoreButton = memo(
             {rightIcon && (
               <>
                 {children || badge ? <ReqoreSpacer width={PADDING_FROM_SIZE[size]} /> : null}
-                <ReqoreIcon
-                  icon={rightIcon}
-                  size={size}
-                  style={textAlign !== 'right' ? { marginLeft: 'auto' } : undefined}
-                  color={rightIconColor || iconColor}
-                />
+                <ReqoreIcon icon={rightIcon} size={size} style={{ marginLeft: 'auto' }} />
               </>
             )}
           </StyledButtonContent>
 
           {description && (
             <ReqoreTextEffect
-              className='reqore-button-description'
               effect={{
                 textSize: getOneLessSize(size),
                 weight: 'light',
                 color: `${color}90`,
                 textAlign,
-                ...descriptionEffect,
               }}
             >
               {description}

package/src/components/Checkbox/index.tsx

@@ -137,8 +137,7 @@ const StyledCheckbox = styled.div<IReqoreCheckboxStyle>`
   height: ${({ size }) => SIZE_TO_PX[size]}px;
   font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
 
-  max-width: ${({ fluid, fixed }) => (fluid && !fixed ? '100%' : undefined)};
-  flex: ${({ fluid, fixed }) => (fixed ? '0 auto' : fluid ? '1 auto' : '0 0 auto')};
+  flex: ${({ fluid, fixed }) => (fixed ? '0 auto' : fluid ? '1' : '0 0 auto')};
 
   ${({ disabled }) =>
     disabled &&
@@ -273,7 +272,7 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
                       textSize: getOneLessSize(size),
                       weight: 'bold',
                       ...switchTextEffect,
-                      opacity: checked ? 0.3 : 1,
+                      opacity: checked ? 0.8 : 1,
                     } as IReqoreEffect
                   }
                 >

package/src/components/Collection/index.tsx

@@ -1,31 +1,18 @@
 import { size } from 'lodash';
 import { useMemo, useState } from 'react';
-import { useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
-import { IReqoreIconName } from '../../types/icons';
+import { ReqoreIntents } from '../../constants/theme';
 import { IReqoreColumnsProps, StyledColumns } from '../Columns';
 import ReqoreInput from '../Input';
 import ReqoreMessage from '../Message';
-import { IReqorePanelAction, IReqorePanelProps, ReqorePanel, TReqorePanelActions } from '../Panel';
+import { IReqorePanelAction, IReqorePanelProps, ReqorePanel } from '../Panel';
 import { sortTableData } from '../Table/helpers';
 import { IReqoreCollectionItemProps, ReqoreCollectionItem } from './item';
 
 export interface IReqoreCollectionProps
   extends Pick<
       IReqorePanelProps,
-      | 'size'
-      | 'intent'
-      | 'customTheme'
-      | 'actions'
-      | 'bottomActions'
-      | 'label'
-      | 'headerSize'
-      | 'badge'
-      | 'icon'
-      | 'flat'
-      | 'minimal'
-      | 'transparent'
-      | 'fluid'
+      'size' | 'intent' | 'customTheme' | 'actions' | 'bottomActions' | 'label' | 'headerSize'
     >,
     IReqoreColumnsProps {
   items?: IReqoreCollectionItemProps[];
@@ -36,10 +23,6 @@ export interface IReqoreCollectionProps
   maxItemHeight?: number;
   filterable?: boolean;
   sortable?: boolean;
-  showAs?: 'list' | 'grid';
-  showSelectedFirst?: boolean;
-  selectedIcon?: IReqoreIconName;
-  emptyMessage?: string;
 }
 
 export const StyledCollectionWrapper = styled(StyledColumns)`
@@ -65,53 +48,17 @@ export const ReqoreCollection = ({
   maxItemHeight,
   filterable,
   sortable,
-  showSelectedFirst,
   headerSize = 2,
-  showAs = 'grid',
-  selectedIcon,
-  flat = true,
-  minimal,
-  transparent = true,
-  emptyMessage = 'No data in this collection, try changing your search query or filters',
   ...rest
 }: IReqoreCollectionProps) => {
-  const [_showAs, setShowAs] = useState<'list' | 'grid'>(showAs);
+  const [showAs, setShowAs] = useState<'list' | 'grid'>('grid');
   const [sort, setSort] = useState<'asc' | 'desc'>('asc');
   const [query, setQuery] = useState<string>('');
 
-  useUpdateEffect(() => {
-    setShowAs(showAs);
-  }, [showAs]);
-
-  const sortedItems: IReqoreCollectionItemProps[] = useMemo(() => {
-    if (!sortable) {
-      return items;
-    }
-
-    if (showSelectedFirst) {
-      // Filter out the selected items
-      const selectedItems = items.filter((item) => item.selected);
-      // Filter out the unselected items
-      const unselectedItems = items.filter((item) => !item.selected);
-      // Sort the selected items
-      const sortedSelectedItems = sortTableData(selectedItems, {
-        by: 'label',
-        direction: sort,
-      });
-      // Sort the unselected items
-      const sortedUnselectedItems = sortTableData(unselectedItems, {
-        by: 'label',
-        direction: sort,
-      });
-
-      return [...sortedSelectedItems, ...sortedUnselectedItems];
-    }
-
-    return sortTableData(items, {
-      by: 'label',
-      direction: sort,
-    });
-  }, [items, sort]);
+  const sortedItems: IReqoreCollectionItemProps[] = useMemo(
+    () => (sortable ? sortTableData(items, { by: 'label', direction: sort }) : items),
+    [items, sort]
+  );
 
   const filteredItems: IReqoreCollectionItemProps[] = useMemo(() => {
     if (!filterable || query === '') {
@@ -134,29 +81,8 @@ export const ReqoreCollection = ({
   };
 
   const finalItems = filteredItems;
-  const finalActions: TReqorePanelActions = useMemo(() => {
-    let actions: TReqorePanelActions = rest.actions ? [...rest.actions] : [];
-
-    const toolbarGroup: IReqorePanelAction = {
-      responsive: false,
-      group: [
-        {
-          icon: _showAs === 'grid' ? 'ListOrdered' : 'GridLine',
-          onClick: () => setShowAs(_showAs === 'grid' ? 'list' : 'grid'),
-          tooltip: _showAs === 'grid' ? 'Show as list' : 'Show as grid',
-          disabled: !size(finalItems),
-        },
-      ],
-    };
-
-    if (sortable) {
-      toolbarGroup.group.push({
-        icon: sort === 'desc' ? 'SortDesc' : 'SortAsc',
-        onClick: () => setSort(sort === 'desc' ? 'asc' : 'desc'),
-        tooltip: sort === 'desc' ? 'Sort ascending' : 'Sort descending',
-        disabled: !size(finalItems),
-      });
-    }
+  const finalActions: (IReqorePanelAction[] | IReqorePanelAction)[] = useMemo(() => {
+    let actions: (IReqorePanelAction[] | IReqorePanelAction)[] = [];
 
     if (filterable) {
       actions = [
@@ -175,32 +101,74 @@ export const ReqoreCollection = ({
       ];
     }
 
-    return [...actions, toolbarGroup];
-  }, [filterable, handleQueryChange, query, rest.actions, _showAs, sort, sortable, finalItems]);
+    if (sortable) {
+      actions = [
+        ...actions,
+        [
+          {
+            icon: 'SortAsc',
+            intent: sort === 'asc' ? ReqoreIntents.INFO : undefined,
+            onClick: () => setSort('asc'),
+            active: sort === 'asc',
+            tooltip: 'Sort ascending',
+            disabled: !size(finalItems),
+          },
+          {
+            icon: 'SortDesc',
+            intent: sort === 'desc' ? ReqoreIntents.INFO : undefined,
+            onClick: () => setSort('desc'),
+            active: sort === 'desc',
+            tooltip: 'Sort descending',
+            disabled: !size(finalItems),
+          },
+        ],
+      ];
+    }
+
+    return [
+      ...actions,
+      [
+        {
+          icon: 'GridLine',
+          onClick: () => setShowAs('grid'),
+          intent: showAs === 'grid' ? ReqoreIntents.INFO : undefined,
+          active: showAs === 'grid',
+          tooltip: 'Show as grid',
+          disabled: !size(finalItems),
+        },
+        {
+          icon: 'ListOrdered',
+          onClick: () => setShowAs('list'),
+          intent: showAs === 'list' ? ReqoreIntents.INFO : undefined,
+          active: showAs === 'list',
+          tooltip: 'Show as list',
+          disabled: !size(finalItems),
+        },
+      ],
+      ...(rest.actions || []),
+    ];
+  }, [filterable, handleQueryChange, query, rest.actions, showAs, sort, sortable, finalItems]);
 
   return (
     <ReqorePanel
       {...rest}
       headerSize={headerSize}
       style={{
-        ...rest.style,
         height: height ?? undefined,
       }}
       fill={fill}
       padded
-      transparent={transparent}
-      minimal={minimal}
-      flat={flat}
+      opacity={0}
       actions={finalActions}
       className={`reqore-collection ${rest.className || ''}`}
     >
       {!size(finalItems) ? (
         <ReqoreMessage intent='muted' flat title='No items found'>
-          {emptyMessage}
+          No data in this collection, try changing your search query or filters
         </ReqoreMessage>
       ) : (
         <StyledCollectionWrapper
-          columns={_showAs === 'grid' ? 'auto-fit' : 1}
+          columns={showAs === 'grid' ? 'auto-fit' : 1}
           columnsGap={stacked ? '0px' : columnsGap}
           rounded={rounded}
           stacked={stacked}
@@ -209,7 +177,6 @@ export const ReqoreCollection = ({
           {finalItems?.map((item) => (
             <ReqoreCollectionItem
               {...item}
-              icon={item.icon || (item.selected ? selectedIcon : undefined)}
               key={item.id || item.label.toString()}
               rounded={!stacked}
               maxContentHeight={maxItemHeight}

package/src/components/Collection/item.tsx

@@ -7,13 +7,13 @@ import ReqoreContext from '../../context/ReqoreContext';
 import { changeDarkness, getMainBackgroundColor } from '../../helpers/colors';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { StyledBackdrop } from '../Drawer';
+import { IReqoreDropdownItem } from '../Dropdown/list';
 import {
   IReqorePanelAction,
   IReqorePanelBottomAction,
   IReqorePanelProps,
   ReqorePanel,
 } from '../Panel';
-import { ReqoreP } from '../Paragraph';
 import { ReqoreSpacer } from '../Spacer';
 import ReqoreTag, { IReqoreTagProps } from '../Tag';
 import ReqoreTagGroup from '../Tag/group';
@@ -29,24 +29,22 @@ export interface IReqoreCollectionItemProps
     | 'unMountContentOnCollapse'
     | 'bottomActions'
   > {
-  selected?: boolean;
+  subHeader?: string;
   content?: string | React.ReactNode;
   expandable?: boolean;
   expandedContent?: string | React.ReactNode;
   expandedActions?: IReqorePanelBottomAction[];
   image?: string;
-  actions?: IReqorePanelAction[];
+  actions?: IReqoreDropdownItem[];
   tags?: IReqoreTagProps[];
   maxContentHeight?: number;
-  showContentFade?: boolean;
 }
 
 export const StyledCollectionItemContent = styled.div`
   max-height: ${({ providedHeight }) => (providedHeight ? `${providedHeight}px` : 'auto')};
-  overflow: ${({ isSelected }) => (isSelected ? 'auto' : 'hidden')};
+  overflow: hidden;
   position: relative;
   transition: 0.3s ease-in-out;
-  flex: 1;
 
   ${({ contentOverflows, theme, opacity = 1 }) =>
     contentOverflows &&
@@ -71,6 +69,7 @@ export const StyledCollectionItemContent = styled.div`
 export const ReqoreCollectionItem = ({
   flat = true,
   minimal = true,
+  headerSize = 3,
   style,
   content,
   actions,
@@ -79,7 +78,6 @@ export const ReqoreCollectionItem = ({
   expandedContent,
   expandedActions,
   maxContentHeight,
-  showContentFade = true,
   ...rest
 }: IReqoreCollectionItemProps) => {
   const [isSelected, setIsSelected] = useState(false);
@@ -184,7 +182,7 @@ export const ReqoreCollectionItem = ({
           { icon: 'CloseLine', onClick: handleItemClick },
         ] as IReqorePanelAction[])
       : size(actions)
-      ? actions
+      ? [{ icon: 'More2Fill', actions, minimal: true, flat: true }]
       : undefined;
 
     return (
@@ -202,6 +200,7 @@ export const ReqoreCollectionItem = ({
         )}
         <ReqorePanel
           flat={flat}
+          headerSize={headerSize}
           ref={ref}
           minimal={minimal}
           {...rest}
@@ -213,37 +212,18 @@ export const ReqoreCollectionItem = ({
             ...dimensions,
             transformOrigin: 'center',
           }}
-          contentStyle={{
-            ...rest.contentStyle,
-            display: 'flex',
-            flexFlow: 'column',
-            justifyContent: 'space-between',
-          }}
           onClick={(expandable && !isSelected) || rest.onClick ? handleItemClick : undefined}
           actions={actualActions}
           className={`reqore-collection-item ${rest.className || ''}`}
         >
           <StyledCollectionItemContent
             theme={theme}
-            opacity={rest.transparent ? 0 : rest.opacity}
+            opacity={rest.opacity}
             providedHeight={isSelected ? undefined : maxContentHeight}
-            isSelected={isSelected}
-            contentOverflows={
-              !rest.transparent &&
-              !rest.contentEffect &&
-              !isSelected &&
-              sizes?.height > maxContentHeight &&
-              showContentFade
-            }
+            contentOverflows={!isSelected && sizes?.height > maxContentHeight}
           >
             <div ref={contentRef}>{actualContent}</div>
           </StyledCollectionItemContent>
-          {showContentFade &&
-          (rest.contentEffect || rest.transparent) &&
-          !isSelected &&
-          sizes?.height > maxContentHeight ? (
-            <ReqoreP>...</ReqoreP>
-          ) : null}
           {size(tags) ? (
             <>
               <ReqoreSpacer height={10} />

package/src/components/Columns/column.tsx

@@ -22,6 +22,5 @@ export const ReqoreColumn = styled.div<IReqoreColumnProps>`
     flex: ${flex};
     flex-grow: ${flexGrow};
     flex-shrink: ${flexShrink};
-    overflow-x: hidden;
   `}
 `;