@qoretechnologies/reqore 0.34.12 → 0.35.0

package/dist/index.js

@@ -12,7 +12,7 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 }));
 exports.__esModule = true;
 exports.ReqoreVerticalSpacer = exports.ReqoreSpacer = exports.ReqoreHorizontalSpacer = exports.ReqoreSidebar = exports.ReqoreRadioGroup = exports.ReqorePopover = exports.ReqoreParagraph = exports.ReqoreP = exports.ReqorePanel = exports.ReqorePagination = exports.ReqoreNotification = exports.ReqoreNotificationsWrapper = exports.ReqoreNavbarItem = exports.ReqoreNavbarGroup = exports.ReqoreNavbarDivider = exports.ReqoreHeader = exports.ReqoreFooter = exports.ReqoreMultiSelect = exports.ReqoreModal = exports.ReqoreMessage = exports.ReqoreMenuItem = exports.ReqoreMenuDivider = exports.ReqoreMenu = exports.ReqoreLayoutContent = exports.ReqoreInput = exports.ReqoreIcon = exports.ReqoreHeading = exports.ReqoreH6 = exports.ReqoreH5 = exports.ReqoreH4 = exports.ReqoreH3 = exports.ReqoreH2 = exports.ReqoreH1 = exports.ReqoreTextEffect = exports.ReqoreEffect = exports.ReqoreDropdownItem = exports.ReqoreDropdownDivider = exports.ReqoreDropdown = exports.ReqoreDrawer = exports.ReqoreControlGroup = exports.ReqoreContent = exports.ReqoreCommentFeed = exports.ReqoreComment = exports.ReqoreColumn = exports.ReqoreColumns = exports.ReqoreCollection = exports.ReqoreCheckbox = exports.ReqoreButton = exports.ReqoreBreadcrumbsItem = exports.ReqoreBreadcrumbs = void 0;
-exports.useReqoreTheme = exports.useReqoreProperty = exports.useReqore = exports.useReqorePaging = exports.useLatestZIndex = exports.ReqoreThemeContext = exports.ReqoreContext = exports.ReqoreUIProvider = exports.ReqoreNotifications = exports.ReqorePaginationContainer = exports.ReqoreIntents = exports.ReqoreSizes = exports.ReqoreColors = exports.ReqoreTree = exports.ReqoreTimeAgo = exports.ReqoreTextarea = exports.ReqoreTagGroup = exports.ReqoreTag = exports.ReqoreTabsList = exports.ReqoreTabsListItem = exports.ReqoreTabsContent = exports.ReqoreTabs = exports.ReqoreTable = exports.ReqoreSpinner = void 0;
+exports.useReqoreTheme = exports.useReqoreProperty = exports.useReqore = exports.useReqorePaging = exports.useLatestZIndex = exports.ReqoreThemeContext = exports.ReqoreContext = exports.ReqoreUIProvider = exports.ReqoreNotifications = exports.ReqorePaginationContainer = exports.ReqoreIntents = exports.ReqoreSizes = exports.ReqoreColors = exports.ReqoreTree = exports.ReqoreTimeAgo = exports.ReqoreTextarea = exports.ReqoreTagGroup = exports.ReqoreTag = exports.ReqoreTabsList = exports.ReqoreTabsListItem = exports.ReqoreTabsContent = exports.ReqoreTabs = exports.ReqoreTableRow = exports.ReqoreTableHeaderCell = exports.ReqoreTableBodyCell = exports.ReqoreTable = exports.ReqoreSpinner = void 0;
 var Breadcrumbs_1 = require("./components/Breadcrumbs");
 __createBinding(exports, Breadcrumbs_1, "default", "ReqoreBreadcrumbs");
 var item_1 = require("./components/Breadcrumbs/item");
@@ -105,6 +105,12 @@ var Spinner_1 = require("./components/Spinner");
 __createBinding(exports, Spinner_1, "ReqoreSpinner");
 var Table_1 = require("./components/Table");
 __createBinding(exports, Table_1, "default", "ReqoreTable");
+var cell_1 = require("./components/Table/cell");
+__createBinding(exports, cell_1, "ReqoreTableBodyCell");
+var headerCell_1 = require("./components/Table/headerCell");
+__createBinding(exports, headerCell_1, "ReqoreTableHeaderCell");
+var row_1 = require("./components/Table/row");
+__createBinding(exports, row_1, "default", "ReqoreTableRow");
 var Tabs_1 = require("./components/Tabs");
 __createBinding(exports, Tabs_1, "default", "ReqoreTabs");
 var content_2 = require("./components/Tabs/content");

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,wDAAwE;AAA/D,wEAA4B;AACrC,sDAAiF;AAAxE,qEAAgC;AACzC,8CAA8D;AAArD,8DAAuB;AAChC,kDAAkE;AAAzD,kEAAyB;AAClC,sDAA2D;AAAlD,2DAAgB;AACzB,gDAAqD;AAA5C,qDAAa;AACtB,sDAA2D;AAAlD,mDAAY;AACrB,gDAAqD;AAA5C,qDAAa;AACtB,wDAA6D;AAApD,6DAAiB;AAC1B,gDAAgE;AAAvD,gEAAwB;AACjC,0DAA0E;AAAjE,0EAA6B;AACtC,8CAAmD;AAA1C,mDAAY;AACrB,kDAAkE;AAAzD,kEAAyB;AAClC,mDAAuF;AAA9E,0DAAqB;AAAE,uDAAkB;AAClD,8CAAqE;AAA5D,mDAAY;AAAE,uDAAgB;AACvC,8CAQ6B;AAP3B,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,oDAAa;AAEf,0CAA0D;AAAjD,0DAAqB;AAC9B,4CAA4D;AAAnD,4DAAsB;AAC/B,uDAA6E;AAApE,sEAA8B;AACvC,0CAA0D;AAAjD,0DAAqB;AAC9B,qDAAyE;AAAhE,oEAA4B;AACrC,+CAAmE;AAA1D,8DAAyB;AAClC,gDAAgE;AAAvD,gEAAwB;AACjC,4CAAiD;AAAxC,iDAAW;AACpB,wDAA6D;AAApD,6DAAiB;AAC1B,8CAAiE;AAAxD,mDAAY;AAAE,mDAAY;AACnC,uDAA6E;AAApE,sEAA8B;AACvC,mDAAyE;AAAhE,kEAA4B;AACrC,iDAAuE;AAA9D,gEAA2B;AACpC,4DAAmF;AAA1E,mFAAqC;AAC9C,wEAAwF;AAA/E,0EAA6B;AACtC,8CAAuD;AAA9C,uDAAgB;AACzB,4CAAiD;AAAxC,iDAAW;AACpB,oDAA6E;AAApE,iDAAO;AAAE,oEAA0B;AAC5C,gDAAgE;AAAvD,gEAAwB;AACjC,sDAAsE;AAA7D,sEAA2B;AACpC,gDAAgE;AAAvD,gEAAwB;AACjC,8CAAiG;AAAxF,6DAAsB;AAAE,mDAAY;AAAE,2DAAoB;AACnE,gDAAqD;AAA5C,qDAAa;AACtB,4CAA4D;AAAnD,4DAAsB;AAC/B,0CAA0D;AAAjD,0DAAqB;AAC9B,qDAAyE;AAAhE,oEAA4B;AACrC,+CAAuE;AAA9D,kEAA6B;AACtC,+CAAmE;AAA1D,8DAAyB;AAClC,wCAAwD;AAA/C,wDAAoB;AAC7B,gDAAmE;AAA1D,+DAAyB;AAClC,kDAAkE;AAAzD,kEAAyB;AAClC,gDAAgE;AAAvD,gEAAwB;AACjC,0CAA+C;AAAtC,+CAAU;AACnB,6CAA4D;AAAnD,6DAAsB;AAC/B,2CAAgD;AAAvC,iDAAW;AACpB,2CAAkD;AAAzC,mDAAa;AACtB,8CAAgE;AAAvD,gEAAyB;AAClC,8DAA6E;AAApE,6EAA8B;AACvC,sDAAsE;AAA7D,sEAA2B;AACpC,yDAAmE;AAA1D,sEAAwB;AACjC,uDAAuE;AAA9D,0EAA6B;AACtC,2DAAqE;AAA5D,0EAA0B;AACnC,+CAAoD;AAA3C,yDAAe;AACxB,+CAA8C;AAArC,mDAAS;AAClB,6DAA6D;AAApD,kEAAiB;AAC1B,6CAAkD;AAAzC,uDAAc"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,wDAAwE;AAA/D,wEAA4B;AACrC,sDAAiF;AAAxE,qEAAgC;AACzC,8CAA8D;AAArD,8DAAuB;AAChC,kDAAkE;AAAzD,kEAAyB;AAClC,sDAA2D;AAAlD,2DAAgB;AACzB,gDAAqD;AAA5C,qDAAa;AACtB,sDAA2D;AAAlD,mDAAY;AACrB,gDAAqD;AAA5C,qDAAa;AACtB,wDAA6D;AAApD,6DAAiB;AAC1B,gDAAgE;AAAvD,gEAAwB;AACjC,0DAA0E;AAAjE,0EAA6B;AACtC,8CAAmD;AAA1C,mDAAY;AACrB,kDAAkE;AAAzD,kEAAyB;AAClC,mDAAuF;AAA9E,0DAAqB;AAAE,uDAAkB;AAClD,8CAAqE;AAA5D,mDAAY;AAAE,uDAAgB;AACvC,8CAQ6B;AAP3B,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,oDAAa;AAEf,0CAA0D;AAAjD,0DAAqB;AAC9B,4CAA4D;AAAnD,4DAAsB;AAC/B,uDAA6E;AAApE,sEAA8B;AACvC,0CAA0D;AAAjD,0DAAqB;AAC9B,qDAAyE;AAAhE,oEAA4B;AACrC,+CAAmE;AAA1D,8DAAyB;AAClC,gDAAgE;AAAvD,gEAAwB;AACjC,4CAAiD;AAAxC,iDAAW;AACpB,wDAA6D;AAApD,6DAAiB;AAC1B,8CAAiE;AAAxD,mDAAY;AAAE,mDAAY;AACnC,uDAA6E;AAApE,sEAA8B;AACvC,mDAAyE;AAAhE,kEAA4B;AACrC,iDAAuE;AAA9D,gEAA2B;AACpC,4DAAmF;AAA1E,mFAAqC;AAC9C,wEAAwF;AAA/E,0EAA6B;AACtC,8CAAuD;AAA9C,uDAAgB;AACzB,4CAAiD;AAAxC,iDAAW;AACpB,oDAA6E;AAApE,iDAAO;AAAE,oEAA0B;AAC5C,gDAAgE;AAAvD,gEAAwB;AACjC,sDAAsE;AAA7D,sEAA2B;AACpC,gDAAgE;AAAvD,gEAAwB;AACjC,8CAAiG;AAAxF,6DAAsB;AAAE,mDAAY;AAAE,2DAAoB;AACnE,gDAAqD;AAA5C,qDAAa;AACtB,4CAA4D;AAAnD,4DAAsB;AAC/B,gDAA8D;AAArD,wDAAmB;AAC5B,4DAAsE;AAA7D,gEAAqB;AAC9B,8CAAmE;AAA1D,6DAAyB;AAClC,0CAA0D;AAAjD,0DAAqB;AAC9B,qDAAyE;AAAhE,oEAA4B;AACrC,+CAAuE;AAA9D,kEAA6B;AACtC,+CAAmE;AAA1D,8DAAyB;AAClC,wCAAwD;AAA/C,wDAAoB;AAC7B,gDAAmE;AAA1D,+DAAyB;AAClC,kDAAkE;AAAzD,kEAAyB;AAClC,gDAAgE;AAAvD,gEAAwB;AACjC,0CAA+C;AAAtC,+CAAU;AACnB,6CAA4D;AAAnD,6DAAsB;AAC/B,2CAAgD;AAAvC,iDAAW;AACpB,2CAAkD;AAAzC,mDAAa;AACtB,8CAAgE;AAAvD,gEAAyB;AAClC,8DAA6E;AAApE,6EAA8B;AACvC,sDAAsE;AAA7D,sEAA2B;AACpC,yDAAmE;AAA1D,sEAAwB;AACjC,uDAAuE;AAA9D,0EAA6B;AACtC,2DAAqE;AAA5D,0EAA0B;AACnC,+CAAoD;AAA3C,yDAAe;AACxB,+CAA8C;AAArC,mDAAS;AAClB,6DAA6D;AAApD,kEAAiB;AAC1B,6CAAkD;AAAzC,uDAAc"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.34.12",
+  "version": "0.35.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/Button/index.tsx

@@ -77,6 +77,8 @@ export interface IReqoreButtonProps
   descriptionEffect?: IReqoreEffect;
   label?: React.HTMLAttributes<HTMLButtonElement>['children'];
   as?: string | React.ElementType;
+  grow?: 1 | 2 | 3 | 4;
+  rounded?: boolean;
 }
 
 export interface IReqoreButtonStyle extends Omit<IReqoreButtonProps, 'intent'> {
@@ -94,6 +96,7 @@ const getButtonMainColor = (theme: IReqoreTheme, color?: TReqoreHexColor) => {
 };
 
 export const StyledAnimatedTextWrapper = styled.span`
+  min-width: 5px;
   overflow: hidden;
   position: relative;
   text-align: ${({ textAlign }) => textAlign};
@@ -180,9 +183,11 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
       : null}
 
   flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto')};
+  flex-grow: ${({ grow }) => grow};
   align-self: ${({ fixed, fluid }) => (fixed ? 'flex-start' : fluid ? 'stretch' : undefined)};
 
-  border-radius: ${({ size }) => RADIUS_FROM_SIZE[size]}px;
+  border-radius: ${({ size, rounded }) =>
+    rounded === false ? undefined : RADIUS_FROM_SIZE[size]}px;
 
   background-color: ${({ minimal, color }) => {
     if (minimal) {

package/src/components/Collection/index.tsx

@@ -1,11 +1,12 @@
 import { size } from 'lodash';
 import { useCallback, useMemo, useState } from 'react';
-import { useDebounce, useUpdateEffect } from 'react-use';
+import { useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import { useReqoreProperty } from '../..';
 import { TReqorePaginationType } from '../../constants/paging';
 import { PADDING_FROM_SIZE } from '../../constants/sizes';
 import { ReqorePaginationContainer } from '../../containers/Paging';
+import { useQueryWithDelay } from '../../hooks/useQueryWithDelay';
 import { IReqoreIconName } from '../../types/icons';
 import { IReqoreColumnsProps, StyledColumns } from '../Columns';
 import ReqoreControlGroup from '../ControlGroup';
@@ -29,6 +30,7 @@ export interface IReqoreCollectionProps extends IReqorePanelProps, IReqoreColumn
   fill?: boolean;
   maxItemHeight?: number;
   filterable?: boolean;
+  defaultQuery?: string;
   sortable?: boolean;
   showAs?: 'list' | 'grid';
   showSelectedFirst?: boolean;
@@ -84,6 +86,7 @@ export const ReqoreCollection = ({
   flat = true,
   minimal,
   transparent = true,
+  defaultQuery,
   onQueryChange,
   contentRenderer = (children, _items, searchInput) => (
     <>
@@ -111,27 +114,18 @@ export const ReqoreCollection = ({
 }: IReqoreCollectionProps) => {
   const [_showAs, setShowAs] = useState<'list' | 'grid'>(showAs);
   const [sort, setSort] = useState<'asc' | 'desc'>('asc');
-  const [query, setQuery] = useState<string>('');
-  const [preQuery, setPreQuery] = useState<string>('');
   const [contentRef, setContentRef] = useState<HTMLDivElement>(undefined);
   const isMobile = useReqoreProperty('isMobile');
+  const { query, setQuery, preQuery, setPreQuery } = useQueryWithDelay(
+    defaultQuery,
+    searchDelay,
+    onQueryChange
+  );
 
   useUpdateEffect(() => {
     setShowAs(showAs);
   }, [showAs]);
 
-  useUpdateEffect(() => {
-    onQueryChange?.(query);
-  }, [query]);
-
-  useDebounce(
-    () => {
-      setQuery(preQuery);
-    },
-    searchDelay,
-    [preQuery]
-  );
-
   const sortedItems: IReqoreCollectionItemProps[] = useMemo(() => {
     if (!sortable) {
       return items;

package/src/components/ControlGroup/index.tsx

@@ -13,6 +13,7 @@ import {
   IWithReqoreMinimal,
   IWithReqoreSize,
 } from '../../types/global';
+import { StyledEffect } from '../Effect';
 import { StyledHeader } from '../Header';
 import { StyledParagraph } from '../Paragraph';
 
@@ -56,7 +57,7 @@ export interface IReqoreControlGroupStyle extends IReqoreControlGroupProps {
   theme: IReqoreTheme;
 }
 
-export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
+export const StyledReqoreControlGroup = styled(StyledEffect)<IReqoreControlGroupStyle>`
   display: flex;
   flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? undefined : '0 0 auto')};
   width: ${({ fluid, fixed }) => (fluid && !fixed ? '100%' : undefined)};
@@ -356,10 +357,14 @@ const ReqoreControlGroup = memo(
               newProps = {
                 ...newProps,
                 style: {
-                  borderTopLeftRadius: getBorderTopLeftRadius(index),
-                  borderBottomLeftRadius: getBorderBottomLeftRadius(index),
-                  borderTopRightRadius: getBorderTopRightRadius(index),
-                  borderBottomRightRadius: getBorderBottomRightRadius(index),
+                  borderTopLeftRadius:
+                    child.props?.rounded === false ? undefined : getBorderTopLeftRadius(index),
+                  borderBottomLeftRadius:
+                    child.props?.rounded === false ? undefined : getBorderBottomLeftRadius(index),
+                  borderTopRightRadius:
+                    child.props?.rounded === false ? undefined : getBorderTopRightRadius(index),
+                  borderBottomRightRadius:
+                    child.props?.rounded === false ? undefined : getBorderBottomRightRadius(index),
                   ...(child.props?.style || {}),
                 },
                 isChild: true,

package/src/components/Dropdown/index.tsx

@@ -20,6 +20,9 @@ export interface IReqoreDropdownProps extends Partial<Omit<IPopoverOptions, 'ope
   listStyle?: React.CSSProperties;
   component?: any;
   filterable?: boolean;
+  onFilterChange?: (query: string) => void;
+  filter?: string | number;
+  filterPlaceholder?: string;
   label?: any;
   children?: any;
   listWidth?: string;
@@ -58,6 +61,9 @@ function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
   handler,
   placement,
   filterable,
+  onFilterChange,
+  filterPlaceholder,
+  filter,
   icon,
   rightIcon,
   caretPosition = 'left',
@@ -110,6 +116,9 @@ function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
         inputProps={inputProps}
         scrollToSelected={scrollToSelected}
         paging={paging}
+        onFilterChange={onFilterChange}
+        filterPlaceholder={filterPlaceholder}
+        filter={filter}
       />
     ) : undefined;
   }, [items]);

package/src/components/Dropdown/list.tsx

@@ -28,7 +28,12 @@ export interface IReqoreDropdownListProps extends IReqoreComponent {
   listStyle?: React.CSSProperties;
   width?: string;
   height?: string;
+
   filterable?: boolean;
+  onFilterChange?: (query: string) => void;
+  filter?: string | number;
+  filterPlaceholder?: string;
+
   onItemSelect?: TDropdownItemOnClick;
   inputProps?: IReqoreInputProps;
   scrollToSelected?: boolean;
@@ -48,9 +53,12 @@ const ReqoreDropdownList = memo(
     inputProps,
     scrollToSelected,
     paging,
+    onFilterChange,
+    filterPlaceholder,
+    filter,
   }: IReqoreDropdownListProps) => {
     const [_items, setItems] = useState<TReqoreDropdownItems>(items);
-    const [query, setQuery] = useState<string>('');
+    const [query, setQuery] = useState<string | number>(onFilterChange ? '' : filter || '');
     const [menuRef, setMenuRef] = useState<HTMLDivElement>(undefined);
 
     useEffect(() => {
@@ -73,12 +81,16 @@ const ReqoreDropdownList = memo(
           return false;
         }
 
-        return text.toString().toLowerCase().indexOf(query.toLowerCase()) !== -1;
+        return text.toString().toLowerCase().indexOf(query.toString().toLowerCase()) !== -1;
       });
     }, [items, query, _items]);
 
     const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      setQuery(event.target.value);
+      if (onFilterChange) {
+        onFilterChange(event.target.value);
+      } else {
+        setQuery(event.target.value);
+      }
     };
 
     const handleItemClick = (item: IReqoreDropdownItem): void => {
@@ -96,11 +108,11 @@ const ReqoreDropdownList = memo(
         {filterable && (
           <>
             <ReqoreInput
-              value={query}
+              value={onFilterChange ? filter : query}
               icon='SearchLine'
               onChange={handleQueryChange}
-              placeholder={`Search ${size(_items)} items...`}
-              onClearClick={() => setQuery('')}
+              placeholder={filterPlaceholder || `Search ${size(_items)} items...`}
+              onClearClick={() => (onFilterChange ? onFilterChange('') : setQuery(''))}
               {...inputProps}
             />
             <ReqoreVerticalSpacer height={PADDING_FROM_SIZE.normal} />

package/src/components/Input/index.tsx

@@ -73,7 +73,7 @@ export const StyledInputWrapper = styled.div<IReqoreInputStyle>`
   position: relative;
   overflow: hidden;
   border-radius: ${({ minimal, rounded, _size }) =>
-    minimal || !rounded ? 0 : RADIUS_FROM_SIZE[_size]}px;
+    minimal || rounded === false ? 0 : RADIUS_FROM_SIZE[_size]}px;
 `;
 
 const StyledIconWrapper = styled.div<IReqoreInputStyle>`
@@ -109,7 +109,7 @@ export const StyledInput = styled(StyledEffect)<IReqoreInputStyle>`
   font-size: ${({ _size }) => TEXT_FROM_SIZE[_size]}px;
   transition: all 0.2s ease-out;
   border-radius: ${({ minimal, rounded, _size }) =>
-    minimal || !rounded ? 0 : RADIUS_FROM_SIZE[_size]}px;
+    minimal || rounded === false ? 0 : RADIUS_FROM_SIZE[_size]}px;
   border: ${({ minimal, theme, flat }) =>
     !minimal && !flat ? `1px solid ${changeLightness(theme.main, 0.2)}` : 0};
   border-bottom: ${({ minimal, theme, flat }) =>
@@ -175,7 +175,7 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
       iconColor,
       rightIconColor,
       flat,
-      rounded = true,
+      rounded,
       minimal,
       children,
       readOnly,

package/src/components/Paging/index.tsx

@@ -16,14 +16,17 @@ export interface IReqorePaginationComponentProps
   listPageButtonProps?: IReqoreDropdownProps;
   controlPageButtonProps?: IReqoreButtonProps;
   loadMoreButtonProps?: IReqoreButtonProps;
+  loadAllButtonProps?: IReqoreButtonProps;
   firstPageLabel?: string;
   lastPageLabel?: string;
   nextPageLabel?: string;
   previousPageLabel?: string;
   pageLabel?: string;
   loadMoreLabel?: string;
+  loadAllLabel?: string;
   showPages?: boolean;
   showControls?: boolean;
+  showLoadAllButton?: boolean;
   showPagesAs?: 'buttons' | 'list';
   showLabels?: boolean;
   scrollOnLoadMore?: boolean;
@@ -66,15 +69,18 @@ function Pagination<T>({
   listPageButtonProps = {},
   controlPageButtonProps = {},
   loadMoreButtonProps = {},
+  loadAllButtonProps = {},
   firstPageLabel = 'First',
   lastPageLabel = 'Last',
   nextPageLabel = 'Next',
   previousPageLabel = 'Back',
   pageLabel = 'Page',
   loadMoreLabel = 'Load more',
+  loadAllLabel = 'Load all',
   showLabels,
   showPages = true,
   showControls = true,
+  showLoadAllButton = true,
   scrollOnLoadMore,
   autoLoadMore,
   itemsPerPage,
@@ -191,19 +197,35 @@ function Pagination<T>({
       {infinite && !isLastPage ? (
         <ReqoreControlGroup vertical>
           <div className='reqore-auto-scroll-target' ref={setScrollTargetRef} />
-          <ReqoreButton
-            icon='ArrowDropDownLine'
-            badge={itemsLeft}
-            iconsAlign='center'
-            {...loadMoreButtonProps}
-            onClick={next}
-            ref={setLoadMoreRef}
-            style={{
-              scrollMarginTop: '200px',
-            }}
-          >
-            {showLabels && loadMoreLabel}
-          </ReqoreButton>
+          <ReqoreControlGroup stack>
+            <ReqoreButton
+              icon='ArrowDropDownLine'
+              badge={itemsPerPage}
+              iconsAlign='center'
+              {...loadMoreButtonProps}
+              onClick={next}
+              ref={setLoadMoreRef}
+              style={{
+                scrollMarginTop: '200px',
+              }}
+            >
+              {showLabels && loadMoreLabel}
+            </ReqoreButton>
+            {showLoadAllButton && (
+              <ReqoreButton
+                icon='ArrowDropDownLine'
+                badge={itemsLeft}
+                iconsAlign='center'
+                {...loadAllButtonProps}
+                onClick={last}
+                style={{
+                  scrollMarginTop: '200px',
+                }}
+              >
+                {showLabels && loadAllLabel}
+              </ReqoreButton>
+            )}
+          </ReqoreControlGroup>
         </ReqoreControlGroup>
       ) : null}
       {!infinite ? (

package/src/components/Panel/index.tsx

@@ -47,11 +47,13 @@ import { ReqoreHeading, StyledHeader } from '../Header';
 import ReqoreIcon, { IReqoreIconProps, StyledIconWrapper } from '../Icon';
 import { ReqorePanelNonResponsiveActions } from './NonResponsiveActions';
 
+export interface IReqorePanelSubAction extends Omit<IReqoreDropdownItem, 'value'> {}
 export interface IReqorePanelAction extends IReqoreButtonProps, IWithReqoreTooltip, IReqoreIntent {
   label?: string | number;
   onClick?: () => void;
   group?: IReqorePanelAction[];
-  actions?: Omit<IReqoreDropdownItem[], 'value'>;
+  actions?: IReqorePanelSubAction[];
+  multiSelect?: boolean;
   // Custom react element
   as?: React.ElementType;
   props?: { [key: string | number]: any } | undefined;

package/src/components/Table/cell.tsx

@@ -0,0 +1,117 @@
+import { lighten, rgba } from 'polished';
+import styled, { css } from 'styled-components';
+import { IReqoreTableColumn } from '.';
+import { TEXT_FROM_SIZE } from '../../constants/sizes';
+import { changeLightness, getReadableColorFrom } from '../../helpers/colors';
+import { alignToFlexAlign } from '../../helpers/utils';
+import { TReqoreColor } from '../Effect';
+import { IReqoreTableCellStyle } from './row';
+
+export interface IReqoreCustomTableBodyCellProps extends IReqoreTableBodyCellProps {}
+export interface IReqoreCustomTableBodyCell extends React.FC<IReqoreCustomTableBodyCellProps> {}
+export interface IReqoreTableBodyCellProps
+  extends Partial<IReqoreTableColumn>,
+    React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}
+
+export const StyledTableCell = styled.div<IReqoreTableCellStyle>`
+  ${({ width, grow }) =>
+    css`
+      width: ${width}px;
+      flex-grow: ${grow || (width ? undefined : 1)};
+    `}
+
+  ${({
+    theme,
+    align,
+    interactive,
+    interactiveCell,
+    intent,
+    size,
+    flat,
+    striped,
+    even,
+    selected,
+    selectedIntent,
+    disabled,
+    hovered,
+  }: IReqoreTableCellStyle) => {
+    const getBackgroundColor = (): TReqoreColor => {
+      let color = theme.main;
+      let opacity = 0;
+      // Is there any intent
+      if (intent || (selected && selectedIntent)) {
+        color = theme.intents[intent || selectedIntent];
+        opacity += 0.02;
+      }
+      // Is the table striped and this row odd
+      if (striped && !even) {
+        opacity += 0.05;
+      }
+      // Is this row selected
+      if (selected) {
+        opacity += 0.02;
+      }
+      // Is this row hovered
+      if (hovered) {
+        opacity += 0.08;
+      }
+
+      // Set the color as transparent if opacity is 0
+      if (opacity === 0) {
+        return 'transparent';
+      }
+
+      return changeLightness(color, opacity);
+    };
+
+    const backgroundColor = getBackgroundColor();
+
+    return css`
+      display: flex;
+      align-items: center;
+      justify-content: ${align ? alignToFlexAlign(align) : 'flex-start'};
+      flex-shrink: 0;
+      border-bottom: ${!flat ? '1px solid ' : undefined};
+
+      height: 100%;
+      padding: 0 10px;
+      font-size: ${TEXT_FROM_SIZE[size]}px;
+      background-color: ${backgroundColor === 'transparent'
+        ? 'transparent'
+        : rgba(getBackgroundColor(), 0.8)};
+      color: ${getReadableColorFrom(
+        backgroundColor === 'transparent' ? theme.main : backgroundColor,
+        !hovered
+      )};
+      border-color: ${changeLightness(
+        backgroundColor === 'transparent' ? theme.main : backgroundColor,
+        0.1
+      )};
+      transition: background-color 0.2s ease-out;
+      opacity: ${disabled ? 0.2 : 1};
+      pointer-events: ${disabled ? 'none' : undefined};
+      cursor: ${interactive || interactiveCell ? 'pointer' : 'default'};
+
+      ${interactiveCell &&
+      css`
+        &:hover {
+          background-color: ${lighten(0.2, getBackgroundColor())};
+        }
+      `}
+
+      p.reqore-table-text {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        margin: 0;
+        padding: 0;
+      }
+    `;
+  }}
+`;
+
+export const ReqoreTableBodyCell = (props: IReqoreTableBodyCellProps) => {
+  return <StyledTableCell {...props} />;
+};