@qoretechnologies/reqore 0.38.7 → 0.39.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.38.7",
+  "version": "0.39.0",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/Collection/index.tsx

@@ -1,4 +1,4 @@
-import { size } from 'lodash';
+import { map, size } from 'lodash';
 import { useCallback, useMemo, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
@@ -12,7 +12,13 @@ import { IReqoreColumnsProps, StyledColumns } from '../Columns';
 import ReqoreControlGroup from '../ControlGroup';
 import ReqoreInput, { IReqoreInputProps } from '../Input';
 import ReqoreMessage from '../Message';
-import { IReqorePanelAction, IReqorePanelProps, ReqorePanel, TReqorePanelActions } from '../Panel';
+import {
+  IReqorePanelAction,
+  IReqorePanelProps,
+  IReqorePanelSubAction,
+  ReqorePanel,
+  TReqorePanelActions,
+} from '../Panel';
 import { ReqoreVerticalSpacer } from '../Spacer';
 import { getZoomActions, sizeToZoom, sortTableData, zoomToSize } from '../Table/helpers';
 import { IReqoreCollectionItemProps, ReqoreCollectionItem } from './item';
@@ -32,6 +38,10 @@ export interface IReqoreCollectionProps extends IReqorePanelProps, IReqoreColumn
 
   defaultQuery?: string;
   defaultZoom?: 0 | 0.5 | 1 | 1.5 | 2;
+  defaultSort?: 'asc' | 'desc';
+  defaultSortBy?: string;
+
+  sortKeys?: Record<string, string>;
 
   filterable?: boolean;
   sortable?: boolean;
@@ -103,7 +113,13 @@ export const ReqoreCollection = ({
   flat = true,
   minimal,
   transparent = true,
+
   defaultQuery,
+  defaultSort = 'asc',
+  defaultSortBy = 'label',
+
+  sortKeys = {},
+
   onQueryChange,
   contentRenderer = (children, _items, searchInput) => (
     <>
@@ -130,7 +146,8 @@ export const ReqoreCollection = ({
   ...rest
 }: IReqoreCollectionProps) => {
   const [_showAs, setShowAs] = useState<'list' | 'grid'>(showAs);
-  const [sort, setSort] = useState<'asc' | 'desc'>('asc');
+  const [sort, setSort] = useState<'asc' | 'desc'>(defaultSort);
+  const [sortBy, setSortBy] = useState<string>(defaultSortBy);
   const [contentRef, setContentRef] = useState<HTMLDivElement>(undefined);
   const isMobile = useReqoreProperty('isMobile');
   const [zoom, setZoom] = useState<number>(defaultZoom || sizeToZoom.normal);
@@ -150,6 +167,8 @@ export const ReqoreCollection = ({
       return items;
     }
 
+    const _sortBy = !!sortKeys[sortBy] ? (v) => v?.metadata?.[sortBy] : sortBy;
+
     if (showSelectedFirst) {
       // Filter out the selected items
       const selectedItems = items.filter((item) => item.selected);
@@ -157,12 +176,12 @@ export const ReqoreCollection = ({
       const unselectedItems = items.filter((item) => !item.selected);
       // Sort the selected items
       const sortedSelectedItems = sortTableData(selectedItems, {
-        by: 'label',
+        by: _sortBy,
         direction: sort,
       });
       // Sort the unselected items
       const sortedUnselectedItems = sortTableData(unselectedItems, {
-        by: 'label',
+        by: _sortBy,
         direction: sort,
       });
 
@@ -170,10 +189,10 @@ export const ReqoreCollection = ({
     }
 
     return sortTableData(items, {
-      by: 'label',
+      by: _sortBy,
       direction: sort,
     });
-  }, [items, sort]);
+  }, [items, sort, sortBy, showSelectedFirst, sortable]);
 
   const filteredItems: IReqoreCollectionItemProps[] = useMemo(() => {
     if (!filterable || query === '') {
@@ -216,17 +235,6 @@ export const ReqoreCollection = ({
       ],
     };
 
-    if (sortable) {
-      toolbarGroup.actions.push({
-        icon: sort === 'desc' ? 'SortDesc' : 'SortAsc',
-        onClick: () => setSort(sort === 'desc' ? 'asc' : 'desc'),
-        tooltip: sortButtonTooltip(sort),
-        label: sortButtonTooltip(sort),
-        disabled: !size(filteredItems),
-        ...sortButtonProps,
-      });
-    }
-
     if (zoomable) {
       toolbarGroup.actions = [
         ...toolbarGroup.actions,
@@ -258,6 +266,44 @@ export const ReqoreCollection = ({
       ];
     }
 
+    if (sortable) {
+      const _sortKeys = {
+        label: 'Label',
+        intent: 'Intent',
+        ...sortKeys,
+      };
+
+      actions.push({
+        icon: sort === 'desc' ? 'SortDesc' : 'SortAsc',
+        tooltip: sortButtonTooltip(sort),
+        className: 'reqore-collection-sort',
+        fixed: true,
+        fluid: false,
+        disabled: !size(filteredItems),
+        actions: [
+          {
+            divider: true,
+            label: 'Sort by',
+            dividerAlign: 'left',
+            minimal: true,
+            dividerPadded: 'bottom',
+          },
+          ...map(
+            _sortKeys,
+            (label, key): IReqorePanelSubAction => ({
+              label,
+              selected: sortBy === key,
+              onClick: () => {
+                setSortBy(key);
+                setSort(sort === 'desc' ? 'asc' : 'desc');
+              },
+            })
+          ),
+        ],
+        ...sortButtonProps,
+      });
+    }
+
     return [...actions, toolbarGroup];
   }, [
     filterable,

package/src/components/Collection/item.tsx

@@ -41,6 +41,8 @@ export interface IReqoreCollectionItemProps
   maxContentHeight?: number;
   showContentFade?: boolean;
   searchString?: string;
+  // Used for passing values and sorting
+  metadata?: Record<string, any>;
 }
 
 export const StyledCollectionItemContent = styled.div`

package/src/components/Dropdown/list.tsx

@@ -21,6 +21,7 @@ export interface IReqoreDropdownItem
   onClick?: TDropdownItemOnClick;
   divider?: boolean;
   dividerAlign?: 'left' | 'center' | 'right';
+  dividerPadded?: 'top' | 'bottom' | 'both' | 'none';
   line?: boolean;
 }
 
@@ -188,12 +189,16 @@ const ReqoreDropdownList = memo(
               ref={setMenuRef}
             >
               {finalItems.map(
-                ({ dividerAlign, divider, ...item }: IReqoreDropdownItem, index: number) =>
+                (
+                  { dividerAlign, dividerPadded, divider, ...item }: IReqoreDropdownItem,
+                  index: number
+                ) =>
                   divider ? (
                     <ReqoreMenuDivider
                       key={index}
                       {...(item as unknown as IReqoreMenuDividerProps)}
                       align={dividerAlign}
+                      padded={dividerPadded}
                     />
                   ) : (
                     <ReqoreDropdownItem

package/src/components/InputClearButton/index.tsx

@@ -19,7 +19,6 @@ export const StyledInputClearButton = styled(ReqoreIcon)<{ show?: boolean }>`
   align-items: center;
   transition: all 0.1s ease-out;
   cursor: pointer;
-  display: none;
 
   &:hover {
     opacity: 1 !important;

package/src/components/Menu/divider.tsx

@@ -14,12 +14,17 @@ export interface IReqoreMenuDividerProps
   label?: string | number;
   margin?: 'left' | 'right' | 'both' | 'none';
   align?: 'left' | 'center' | 'right';
+  padded?: 'top' | 'bottom' | 'both' | 'none';
   line?: boolean;
 }
 
 export const StyledMenuDivider = styled(StyledTextEffect)`
   width: 100%;
-  padding: ${({ size }) => `${PADDING_FROM_SIZE[size]}px 0`};
+  padding: 0;
+  padding-top: ${({ padded, size }) =>
+    padded === 'top' || padded === 'both' ? `${PADDING_FROM_SIZE[size]}px` : undefined};
+  padding-bottom: ${({ padded, size }) =>
+    padded === 'bottom' || padded === 'both' ? `${PADDING_FROM_SIZE[size]}px` : undefined};
   background-color: transparent;
 
   ${({ margin, size }) =>
@@ -48,6 +53,7 @@ const ReqoreMenuDivider = forwardRef<HTMLDivElement, IReqoreMenuDividerProps>(
       effect,
       size = 'normal',
       align = 'center',
+      padded = 'both',
       line,
       ...rest
     }: IReqoreMenuDividerProps,
@@ -63,6 +69,7 @@ const ReqoreMenuDivider = forwardRef<HTMLDivElement, IReqoreMenuDividerProps>(
       <StyledMenuDivider
         as='div'
         {...rest}
+        padded={padded}
         size={size}
         className={`${className || ''} reqore-menu-divider`}
         ref={ref}

package/src/components/Table/helpers.ts

@@ -21,10 +21,12 @@ export const sortTableData = (data: any[], sort: IReqoreTableSort) => {
 
   if (thenBy) {
     return [...data].sort(
+      // @ts-expect-error Needed because of the thenby library
       firstBy(by, { ignoreCase: true, direction }).thenBy(thenBy, { ignoreCase: true, direction })
     );
   }
 
+  // @ts-expect-error Needed because of the thenby library
   return [...data].sort(firstBy(by, { ignoreCase: true, direction }));
 };
 

package/src/components/Table/index.tsx

@@ -160,7 +160,7 @@ export interface IReqoreTableStyle {
 }
 
 export interface IReqoreTableSort {
-  by: string;
+  by: string | ((v: any) => any) | ((v1: any, v2: any) => number);
   thenBy?: string;
   direction?: 'asc' | 'desc';
 }

package/src/components/Textarea/index.tsx

@@ -61,6 +61,7 @@ export interface IReqoreTextareaProps
 
 export interface IReqoreTextareaStyle extends IReqoreTextareaProps {
   theme: IReqoreTheme;
+  hasClearButton?: boolean;
   _size?: TSizes;
 }
 
@@ -88,6 +89,8 @@ export const StyledTextarea = styled(StyledEffect)<IReqoreTextareaStyle>`
   font-size: ${({ _size }) => CONTROL_TEXT_FROM_SIZE[_size]}px;
   margin: 0;
   padding: ${({ _size }) => PADDING_FROM_SIZE[_size] / 2}px;
+  padding-right: ${({ hasClearButton, _size }) =>
+    hasClearButton ? `${SIZE_TO_PX[_size]}px` : undefined};
   min-height: ${({ _size }) => SIZE_TO_PX[_size]}px;
   line-height: ${({ _size }) => SIZE_TO_PX[_size] - CONTROL_TEXT_FROM_SIZE[_size]}px;
   vertical-align: middle;
@@ -218,6 +221,7 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
             value={_value}
             readonly={rest?.readOnly}
             tabIndex={rest?.disabled ? -1 : 0}
+            hasClearButton={!rest?.readOnly && !rest?.disabled && !!(onClearClick && onChange)}
           />
           <ReqoreInputClearButton
             enabled={!rest?.readOnly && !rest?.disabled && !!(onClearClick && onChange)}

package/src/mock/collectionData.tsx

@@ -45,6 +45,10 @@ export default [
       },
     ],
     expandable: true,
+    metadata: {
+      id: 23,
+      category: 'Article',
+    },
   },
   {
     label: 'Test with tooltip',
@@ -69,6 +73,10 @@ export default [
         icon: 'CodeLine',
       },
     ],
+    metadata: {
+      id: 24,
+      category: 'Post',
+    },
   },
   {
     icon: 'TextWrap',
@@ -80,6 +88,10 @@ export default [
     minimal: false,
     badge: 0,
     searchString: 'secret',
+    metadata: {
+      id: 1,
+      category: 'None',
+    },
   },
   {
     icon: 'ZcoolLine',
@@ -87,6 +99,10 @@ export default [
     content:
       'Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long Hello I am a test item content and I am very long so will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long Hello I am a test item content and I am very long so will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long',
     showContentFade: false,
+    metadata: {
+      id: 13,
+      category: 'Article',
+    },
   },
   {
     icon: 'FolderWarningFill',
@@ -114,8 +130,16 @@ export default [
         onRemoveClick: noop(),
       },
     ],
+    metadata: {
+      id: 99,
+      category: 'Post',
+    },
   },
   {
+    metadata: {
+      id: 30,
+      category: 'Article',
+    },
     label: 'Item with custom content when expanded',
     tooltip: 'Expandable item with custom content',
     selected: true,
@@ -234,6 +258,10 @@ export default [
     ],
   },
   {
+    metadata: {
+      id: 31,
+      category: 'None',
+    },
     label: 'I have intent!',
     transparent: true,
     minimal: false,
@@ -287,6 +315,10 @@ export default [
     intent: 'info',
   },
   {
+    metadata: {
+      id: 25,
+      category: 'Article',
+    },
     label: 'I have actions',
     content:
       'Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long',
@@ -309,6 +341,10 @@ export default [
     expandable: true,
   },
   {
+    metadata: {
+      id: 2,
+      category: 'None',
+    },
     content:
       'Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long',
     expandedActions: [

package/src/stories/Collection/Collection.stories.tsx

@@ -5,6 +5,10 @@ import { IReqoreColumnsProps } from '../../components/Columns';
 import { PADDING_FROM_SIZE } from '../../constants/sizes';
 import items, { bigCollection } from '../../mock/collectionData';
 
+import { expect } from '@storybook/jest';
+import { fireEvent } from '@storybook/testing-library';
+import { waitFor } from '@testing-library/react';
+import { sleep } from '../../helpers/utils';
 import { StoryMeta } from '../utils';
 import { argManager, IntentArg, SizeArg } from '../utils/args';
 
@@ -283,3 +287,31 @@ export const DefaultFilter: Story = {
     ],
   } as IReqoreCollectionProps,
 };
+
+export const CustomSortKeysWithDefaultSort: Story = {
+  args: {
+    label: 'Posts',
+    items: items.map((item) => ({
+      ...item,
+      badge: [item.metadata.id, item.metadata.category],
+    })),
+    defaultSort: 'desc',
+    defaultSortBy: 'id',
+    sortKeys: {
+      id: 'ID',
+      category: 'Category',
+    },
+  },
+  play: async ({ canvasElement }) => {
+    await sleep(500);
+
+    await fireEvent.click(canvasElement.querySelector('.reqore-collection-sort'));
+
+    await waitFor(
+      () => expect(document.querySelectorAll('.reqore-popover-content')).toHaveLength(1),
+      {
+        timeout: 5000,
+      }
+    );
+  },
+};