@qoretechnologies/reqore 0.30.6 → 0.30.8

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

package/src/components/Collection/index.tsx

@@ -1,18 +1,31 @@
 import { size } from 'lodash';
 import { useMemo, useState } from 'react';
+import { useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
-import { ReqoreIntents } from '../../constants/theme';
+import { IReqoreIconName } from '../../types/icons';
 import { IReqoreColumnsProps, StyledColumns } from '../Columns';
 import ReqoreInput from '../Input';
 import ReqoreMessage from '../Message';
-import { IReqorePanelAction, IReqorePanelProps, ReqorePanel } from '../Panel';
+import { IReqorePanelAction, IReqorePanelProps, ReqorePanel, TReqorePanelActions } 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'
+      | 'size'
+      | 'intent'
+      | 'customTheme'
+      | 'actions'
+      | 'bottomActions'
+      | 'label'
+      | 'headerSize'
+      | 'badge'
+      | 'icon'
+      | 'flat'
+      | 'minimal'
+      | 'transparent'
+      | 'fluid'
     >,
     IReqoreColumnsProps {
   items?: IReqoreCollectionItemProps[];
@@ -23,6 +36,10 @@ export interface IReqoreCollectionProps
   maxItemHeight?: number;
   filterable?: boolean;
   sortable?: boolean;
+  showAs?: 'list' | 'grid';
+  showSelectedFirst?: boolean;
+  selectedIcon?: IReqoreIconName;
+  emptyMessage?: string;
 }
 
 export const StyledCollectionWrapper = styled(StyledColumns)`
@@ -48,17 +65,53 @@ 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'>('grid');
+  const [_showAs, setShowAs] = useState<'list' | 'grid'>(showAs);
   const [sort, setSort] = useState<'asc' | 'desc'>('asc');
   const [query, setQuery] = useState<string>('');
 
-  const sortedItems: IReqoreCollectionItemProps[] = useMemo(
-    () => (sortable ? sortTableData(items, { by: 'label', direction: sort }) : items),
-    [items, sort]
-  );
+  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 filteredItems: IReqoreCollectionItemProps[] = useMemo(() => {
     if (!filterable || query === '') {
@@ -81,8 +134,29 @@ export const ReqoreCollection = ({
   };
 
   const finalItems = filteredItems;
-  const finalActions: (IReqorePanelAction[] | IReqorePanelAction)[] = useMemo(() => {
-    let actions: (IReqorePanelAction[] | IReqorePanelAction)[] = [];
+  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),
+      });
+    }
 
     if (filterable) {
       actions = [
@@ -101,74 +175,32 @@ export const ReqoreCollection = ({
       ];
     }
 
-    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 [...actions, toolbarGroup];
+  }, [filterable, handleQueryChange, query, rest.actions, _showAs, sort, sortable, finalItems]);
 
   return (
     <ReqorePanel
       {...rest}
       headerSize={headerSize}
       style={{
+        ...rest.style,
         height: height ?? undefined,
       }}
       fill={fill}
       padded
-      opacity={0}
+      transparent={transparent}
+      minimal={minimal}
+      flat={flat}
       actions={finalActions}
       className={`reqore-collection ${rest.className || ''}`}
     >
       {!size(finalItems) ? (
         <ReqoreMessage intent='muted' flat title='No items found'>
-          No data in this collection, try changing your search query or filters
+          {emptyMessage}
         </ReqoreMessage>
       ) : (
         <StyledCollectionWrapper
-          columns={showAs === 'grid' ? 'auto-fit' : 1}
+          columns={_showAs === 'grid' ? 'auto-fit' : 1}
           columnsGap={stacked ? '0px' : columnsGap}
           rounded={rounded}
           stacked={stacked}
@@ -177,6 +209,7 @@ 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,22 +29,24 @@ export interface IReqoreCollectionItemProps
     | 'unMountContentOnCollapse'
     | 'bottomActions'
   > {
-  subHeader?: string;
+  selected?: boolean;
   content?: string | React.ReactNode;
   expandable?: boolean;
   expandedContent?: string | React.ReactNode;
   expandedActions?: IReqorePanelBottomAction[];
   image?: string;
-  actions?: IReqoreDropdownItem[];
+  actions?: IReqorePanelAction[];
   tags?: IReqoreTagProps[];
   maxContentHeight?: number;
+  showContentFade?: boolean;
 }
 
 export const StyledCollectionItemContent = styled.div`
   max-height: ${({ providedHeight }) => (providedHeight ? `${providedHeight}px` : 'auto')};
-  overflow: hidden;
+  overflow: ${({ isSelected }) => (isSelected ? 'auto' : 'hidden')};
   position: relative;
   transition: 0.3s ease-in-out;
+  flex: 1;
 
   ${({ contentOverflows, theme, opacity = 1 }) =>
     contentOverflows &&
@@ -69,7 +71,6 @@ export const StyledCollectionItemContent = styled.div`
 export const ReqoreCollectionItem = ({
   flat = true,
   minimal = true,
-  headerSize = 3,
   style,
   content,
   actions,
@@ -78,6 +79,7 @@ export const ReqoreCollectionItem = ({
   expandedContent,
   expandedActions,
   maxContentHeight,
+  showContentFade = true,
   ...rest
 }: IReqoreCollectionItemProps) => {
   const [isSelected, setIsSelected] = useState(false);
@@ -182,7 +184,7 @@ export const ReqoreCollectionItem = ({
           { icon: 'CloseLine', onClick: handleItemClick },
         ] as IReqorePanelAction[])
       : size(actions)
-      ? [{ icon: 'More2Fill', actions, minimal: true, flat: true }]
+      ? actions
       : undefined;
 
     return (
@@ -200,7 +202,6 @@ export const ReqoreCollectionItem = ({
         )}
         <ReqorePanel
           flat={flat}
-          headerSize={headerSize}
           ref={ref}
           minimal={minimal}
           {...rest}
@@ -212,18 +213,37 @@ 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.opacity}
+            opacity={rest.transparent ? 0 : rest.opacity}
             providedHeight={isSelected ? undefined : maxContentHeight}
-            contentOverflows={!isSelected && sizes?.height > maxContentHeight}
+            isSelected={isSelected}
+            contentOverflows={
+              !rest.transparent &&
+              !rest.contentEffect &&
+              !isSelected &&
+              sizes?.height > maxContentHeight &&
+              showContentFade
+            }
           >
             <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,5 +22,6 @@ export const ReqoreColumn = styled.div<IReqoreColumnProps>`
     flex: ${flex};
     flex-grow: ${flexGrow};
     flex-shrink: ${flexShrink};
+    overflow-x: hidden;
   `}
 `;