@addev-be/ui 0.9.1 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",

package/src/components/auth/LoginForm.tsx

@@ -73,7 +73,7 @@ export const LoginForm: FC = () => {
 
         {error && <Message type="error">{error}</Message>}
 
-        <Button color="primary" onClick={onLoginClicked}>
+        <Button $color="primary" onClick={onLoginClicked}>
           Se connecter
         </Button>
 

package/src/components/auth/PasswordRecoveryForm.tsx

@@ -41,7 +41,7 @@ export const PasswordRecoveryForm: FC = () => {
               />
             </StackedLabel>
 
-            <Button color="primary" onClick={onSubmitClicked}>
+            <Button $color="primary" onClick={onSubmitClicked}>
               Envoyer un lien de récupération
             </Button>
           </>

package/src/components/auth/PasswordResetForm.tsx

@@ -100,7 +100,7 @@ export const PasswordResetForm: FC = () => {
               </Message>
             )}
 
-            <Button color="primary" onClick={onSubmitClicked}>
+            <Button $color="primary" onClick={onSubmitClicked}>
               Réinitialiser le mot de passe
             </Button>
           </>

package/src/components/data/DataGrid/DataGridColumnsModal/hooks.tsx

@@ -43,7 +43,7 @@ export const useDataGridColumnsModal = <R,>(context: DataGridContext<R>) => {
           <Modal.Footer>
             <Button onClick={closeModal}>Annuler</Button>
             <Button
-              color="primary"
+              $color="primary"
               style={{ marginLeft: 'auto' }}
               onClick={onApplyClicked}
             >

package/src/components/data/DataGrid/DataGridFilterMenu/hooks.tsx

@@ -55,12 +55,12 @@ export const useFilterModal = <R,>({
         />
       </Modal.ContentWithIcon>
       <Modal.Buttons>
-        <Button color="danger" icon={FilterSlashIcon} onClick={onClearClicked}>
+        <Button $color="danger" icon={FilterSlashIcon} onClick={onClearClicked}>
           Supprimer
         </Button>
         <Button
           style={{ marginLeft: 'auto' }}
-          color="primary"
+          $color="primary"
           icon={FilterIcon}
           onClick={onApplyClicked}
         >

package/src/components/data/DataGrid/DataGridFilterMenu/index.tsx

@@ -46,6 +46,7 @@ import {
 import { ContextMenu } from '../../../ui/ContextMenu';
 import { FilterValuesScroller } from './FilterValuesScroller';
 import { Input } from '../../../forms';
+import { MenuContainer } from '../../../ui/ContextMenu/styles';
 import { useFilterModal } from './hooks';
 
 type FilterValuesProps<R> = {
@@ -53,6 +54,8 @@ type FilterValuesProps<R> = {
   columnIndex: number;
   context: DataGridContext<R>;
   onClose?: () => void;
+  contextMenu?: boolean;
+  showTotalButton?: boolean;
 };
 
 const sortAsc: Record<DataGridFilterType, [string, IconFC]> = {
@@ -87,6 +90,8 @@ export const DataGridFilterMenu = <R,>({
   columnKey,
   context,
   onClose,
+  contextMenu = true,
+  showTotalButton = true,
 }: FilterValuesProps<R>) => {
   const { openModal, modal } = useFilterModal({ columnKey, context });
   const {
@@ -258,8 +263,8 @@ export const DataGridFilterMenu = <R,>({
     onClose?.();
   }, [columnKey, onClose, setFooters]);
 
-  return (
-    <ContextMenu>
+  const content = (
+    <>
       {modal}
       {column.sortGetter && (
         <>
@@ -283,48 +288,55 @@ export const DataGridFilterMenu = <R,>({
           <ContextMenu.Divider />
         </>
       )}
-      {!isFooterVisible && typeof column.footer === 'function' && (
+      {showTotalButton && (
         <>
-          <ContextMenu.Item onClick={() => showFooter('count')}>
-            <TableFooterIcon />
-            Afficher le total
-          </ContextMenu.Item>
-          <ContextMenu.Divider />
-        </>
-      )}
-      {typeof column.footer === 'object' && (
-        <>
-          <ContextMenu.ParentItem>
-            <TableFooterIcon />
-            Afficher le total
-            <ContextMenu.SubMenu>
-              {Object.keys(column.footer).map((key) => {
-                const TotalIcon =
-                  footerFunctionsIcons[
-                    key as DataGridFooterPredefinedFunction
-                  ] ?? TableFooterIcon;
-                return (
-                  <ContextMenu.Item key={key} onClick={() => showFooter(key)}>
-                    <TotalIcon />
-                    {key in footerFunctionsTexts
-                      ? footerFunctionsTexts[
-                          key as DataGridFooterPredefinedFunction
-                        ]
-                      : key}
+          {!isFooterVisible && typeof column.footer === 'function' && (
+            <>
+              <ContextMenu.Item onClick={() => showFooter('count')}>
+                <TableFooterIcon />
+                Afficher le total
+              </ContextMenu.Item>
+              <ContextMenu.Divider />
+            </>
+          )}
+          {showTotalButton && typeof column.footer === 'object' && (
+            <>
+              <ContextMenu.ParentItem>
+                <TableFooterIcon />
+                Afficher le total
+                <ContextMenu.SubMenu>
+                  {Object.keys(column.footer).map((key) => {
+                    const TotalIcon =
+                      footerFunctionsIcons[
+                        key as DataGridFooterPredefinedFunction
+                      ] ?? TableFooterIcon;
+                    return (
+                      <ContextMenu.Item
+                        key={key}
+                        onClick={() => showFooter(key)}
+                      >
+                        <TotalIcon />
+                        {key in footerFunctionsTexts
+                          ? footerFunctionsTexts[
+                              key as DataGridFooterPredefinedFunction
+                            ]
+                          : key}
+                      </ContextMenu.Item>
+                    );
+                  })}
+                  <ContextMenu.Divider />
+                  <ContextMenu.Item
+                    onClick={hideFooter}
+                    disabled={!isFooterVisible}
+                  >
+                    <TableFooterSlashIcon />
+                    Masquer le total
                   </ContextMenu.Item>
-                );
-              })}
+                </ContextMenu.SubMenu>
+              </ContextMenu.ParentItem>
               <ContextMenu.Divider />
-              <ContextMenu.Item
-                onClick={hideFooter}
-                disabled={!isFooterVisible}
-              >
-                <TableFooterSlashIcon />
-                Masquer le total
-              </ContextMenu.Item>
-            </ContextMenu.SubMenu>
-          </ContextMenu.ParentItem>
-          <ContextMenu.Divider />
+            </>
+          )}
         </>
       )}
       <ContextMenu.Item onClick={openModal}>
@@ -355,6 +367,12 @@ export const DataGridFilterMenu = <R,>({
       <styles.CheckboxesContainer>
         {checkboxesComponent}
       </styles.CheckboxesContainer>
-    </ContextMenu>
+    </>
   );
+
+  if (!contextMenu) {
+    return <MenuContainer>{content}</MenuContainer>;
+  }
+
+  return <ContextMenu>{content}</ContextMenu>;
 };

package/src/components/data/DataGrid/DataGridHeader.tsx

@@ -76,16 +76,16 @@ export const DataGridHeader = <R,>({
           Rafraîchir
         </Button>
       )}
-      <Button color="emerald" size="small" onClick={runCopyTable}>
+      <Button $color="emerald" size="small" onClick={runCopyTable}>
         <CopyIcon />
         Copier la table
       </Button>
-      <Button size="small" color="danger" onClick={() => setFilters({})}>
+      <Button size="small" $color="danger" onClick={() => setFilters({})}>
         <FilterSlashIcon />
         Supprimer les filtres
       </Button>
       {name && (
-        <Button color="info" size="small" onClick={openModal}>
+        <Button $color="info" size="small" onClick={openModal}>
           <TableColumnsIcon />
           Paramètres des colonnes
         </Button>

package/src/components/data/DataGrid/DataGridHeaderCell.tsx

@@ -108,7 +108,7 @@ export const DataGridHeaderCell = <R,>({
           className={hasFilters ? 'danger' : ''}
           ref={filterButtonRef}
           icon={ChevronDownIcon}
-          color={hasFilters ? 'danger' : headerColor}
+          $color={hasFilters ? 'danger' : headerColor}
           onClick={onFilterButtonClicked}
         />
       )}

package/src/components/data/DataGrid/index.tsx

@@ -66,6 +66,7 @@ export const DataGridInner = <R,>(
       >
         <DataGridHeader context={DataGridContext} />
         <VirtualScroller<R, { context: Context<DataGridContextProps<R>> }>
+          integrated
           gridTemplateColumns={gridTemplateColumns}
           items={sortedRows}
           itemTemplate={rowTemplate}

package/src/components/data/DataGrid/styles.ts

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 
 import { ThemeColor } from '../../../providers/ThemeProvider/types';
-import { VirtualScrollerContainer } from '../VirtualScroller/styles';
+import { VirtualScrollerFiller } from '../VirtualScroller/styles';
 
 export const TOOLBAR_HEIGHT = 40;
 export const DEFAULT_HEADER_ROW_HEIGHT = 40;
@@ -168,7 +168,7 @@ export const DataGridContainer = styled.div<{
     box-sizing: border-box;
   }
 
-  ${VirtualScrollerContainer} {
+  ${VirtualScrollerFiller} {
     grid-column-start: 1;
     grid-column-end: -1;
     grid-row: 3;

package/src/components/data/SqlRequestDataGrid/helpers/columns.tsx

@@ -3,6 +3,7 @@
 import { SqlRequestDataGridColumn, SqlRequestDataGridColumns } from '../types';
 import {
   buildExcelFormat,
+  dateFilter,
   numberFilter,
   textFilter,
 } from '../../DataGrid/helpers';
@@ -110,7 +111,7 @@ export const sqlDateColumn = <R extends Record<string, any>>(
     excelFormatter: () => 'dd/mm/yyyy',
     excelValue: (value) => formatDate(value, 'YYYY-MM-DD'),
     filter: {
-      ...textFilter(key),
+      ...dateFilter(key),
       getter: (value) => value[key] ?? '',
       formatter: (value) => formatDate(value),
       renderer: (value) => formatDate(value),
@@ -134,7 +135,7 @@ export const sqlDateTimeColumn = <R extends Record<string, any>>(
     excelFormatter: () => 'dd/mm/yyyy hh:mm:ss',
     excelValue: (value) => formatDateTime(value, 'YYYY-MM-DD HH:mm:ss'),
     filter: {
-      ...textFilter(key),
+      ...dateFilter(key),
       getter: (value) => value[key] ?? '',
       formatter: (value) => formatDateTime(value),
       renderer: (value) => formatDateTime(value),
@@ -172,7 +173,7 @@ export const sqlNumberColumn = <R extends Record<string, any>>(
     excelFormatter: () => buildExcelFormat(decimals),
     excelValue: (value) => formatNumberInvariant(value, decimals),
     getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? 0,
     filter: {
       ...numberFilter(key),
       getter: (value) => value[key] ?? 0,
@@ -202,7 +203,7 @@ export const sqlMoneyColumn = <R extends Record<string, any>>(
     excelFormatter: () => buildExcelFormat(decimals, ' €'),
     excelValue: (value) => formatNumberInvariant(value, decimals),
     getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? 0,
     filter: {
       ...numberFilter(key),
       getter: (value) => value[key] ?? 0,
@@ -231,7 +232,7 @@ export const sqlPercentageColumn = <R extends Record<string, any>>(
     excelFormatter: () => buildExcelFormat(decimals, '%'),
     excelValue: (value) => formatNumberInvariant(value, decimals),
     getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? 0,
     filter: {
       ...numberFilter(key),
       getter: (value) => value[key] ?? 0,

package/src/components/data/SqlRequestGrid/filters/FiltersSidebar.tsx

@@ -0,0 +1,102 @@
+import * as styles from './styles';
+
+import {
+  CircleXMarkIcon,
+  FilterSlashIcon,
+  LeftIcon,
+  RightIcon,
+} from '../../../../Icons';
+import { MouseEvent, useCallback, useState } from 'react';
+
+import { DataGridContext } from '../../DataGrid/types';
+import { DataGridFilterMenu } from '../../DataGrid/DataGridFilterMenu';
+import { IconButton } from '../../../forms';
+import { SqlRequestGridProps } from '../types';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+type FiltersSidebarProps<R, P extends object = {}> = {
+  props: SqlRequestGridProps<R, P>;
+  context: DataGridContext<R>;
+  onClose?: () => void;
+  onClearFilters?: () => void;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export const FiltersSidebar = <R, P extends object = {}>({
+  props,
+  context,
+  onClose,
+  onClearFilters,
+}: FiltersSidebarProps<R, P>) => {
+  const [columnKey, setColumnKey] = useState<string | null>(null);
+  const column = columnKey ? props.fields[columnKey] : null;
+  const visible = !!(columnKey && column);
+
+  const stopPropagation = useCallback((e: MouseEvent) => {
+    e.stopPropagation();
+  }, []);
+
+  const onFilterClick = useCallback((columnKey: string | null) => {
+    setColumnKey(columnKey);
+  }, []);
+
+  return (
+    <styles.Backdrop onClick={onClose}>
+      <styles.FiltersSidebarContainer onClick={stopPropagation}>
+        {visible ? (
+          <>
+            <styles.FiltersSidebarHeader>
+              <IconButton
+                rounded
+                icon={LeftIcon}
+                color="secondary"
+                onClick={() => onFilterClick(null)}
+              />
+              <h3>{column.name}</h3>
+              <IconButton
+                rounded
+                icon={CircleXMarkIcon}
+                color="secondary"
+                onClick={onClose}
+              />
+            </styles.FiltersSidebarHeader>
+            <DataGridFilterMenu
+              contextMenu={false}
+              columnKey={columnKey}
+              columnIndex={0}
+              context={context}
+              showTotalButton={false}
+            />
+          </>
+        ) : (
+          <>
+            <styles.FiltersSidebarHeader>
+              <h3>Filtres</h3>
+              <IconButton
+                rounded
+                icon={FilterSlashIcon}
+                color="danger"
+                onClick={onClearFilters}
+              />
+              <IconButton
+                rounded
+                icon={CircleXMarkIcon}
+                color="secondary"
+                onClick={onClose}
+              />
+            </styles.FiltersSidebarHeader>
+            {Object.entries(props.fields).map(([key, field], index) => (
+              <styles.FiltersSidebarFilter
+                key={index}
+                onClick={() => onFilterClick(key)}
+              >
+                {field.name}
+                <RightIcon />
+              </styles.FiltersSidebarFilter>
+            ))}
+          </>
+        )}
+      </styles.FiltersSidebarContainer>
+    </styles.Backdrop>
+  );
+};

package/src/components/data/SqlRequestGrid/filters/styles.ts

@@ -0,0 +1,83 @@
+import {
+  Divider,
+  MenuContainer,
+  MenuItemContainer,
+} from '../../../ui/ContextMenu/styles';
+
+import styled from 'styled-components';
+
+export const FiltersSidebarContainer = styled.div`
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  max-width: var(--space-96);
+  border-radius: var(--rounded-none);
+  padding: 0;
+  z-index: 1;
+  overflow-y: auto;
+  box-sizing: border-box;
+  background-color: var(--color-neutral-50);
+  border-right: 1px solid var(--color-neutral-300);
+  box-shadow: var(--shadow-sm);
+
+  & > ${MenuContainer} {
+    position: relative;
+    background: none;
+    padding: var(--space-2) 0;
+
+    ${MenuItemContainer} {
+      background: none;
+      /* height: var(--size-6); */
+      padding: var(--space-2) var(--space-4);
+    }
+
+    ${Divider} {
+      margin: var(--space-2) 0;
+    }
+  }
+`;
+
+export const FiltersSidebarHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-2);
+
+  padding-bottom: var(--space-2);
+  border-bottom: 1px solid var(--color-neutral-300);
+
+  h3 {
+    margin: 0;
+    margin-right: auto;
+  }
+`;
+
+export const FiltersSidebarFilter = styled.div`
+  display: flex;
+  align-items: center;
+  padding: var(--space-4) var(--space-2);
+  border-bottom: 1px solid var(--color-neutral-300);
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--color-neutral-100);
+  }
+  svg {
+    margin-left: auto;
+    width: var(--space-4);
+    height: var(--space-4);
+  }
+`;
+
+export const Backdrop = styled.div`
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  background-color: rgba(0, 0, 0, 0.5);
+`;

package/src/components/data/SqlRequestGrid/index.tsx

@@ -15,30 +15,53 @@ import {
   useRef,
   useState,
 } from 'react';
-import { SqlRequestGridProps, SqlRequestGridRefProps } from './types';
+import {
+  SqlRequestGridFilters,
+  SqlRequestGridProps,
+  SqlRequestGridRefProps,
+} from './types';
+import { debounce, pickBy } from 'lodash';
 
+import { DataGridSort } from '../DataGrid/types';
+import { FilterFullIcon } from '../../../Icons';
+import { FiltersSidebar } from './filters/FiltersSidebar';
+import { IconButton } from '../../forms';
 import { VirtualScroller } from '../VirtualScroller';
-import { debounce } from 'lodash';
+import { convertSqlFiltersToConditions } from './helpers';
 import { isColumnVisible } from '../DataGrid/helpers';
+import { useDataGrid } from '../DataGrid/hooks';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export const SqlRequestGridInner = <R, P extends object = {}>(
-  {
+  allProps: SqlRequestGridProps<R, P>,
+  ref: ForwardedRef<SqlRequestGridRefProps>
+) => {
+  const {
     rowHeight = styles.DEFAULT_ROW_HEIGHT,
     itemsPerRow,
     itemTemplate,
     itemProps,
     gap,
     ...props
-  }: SqlRequestGridProps<R, P>,
-  ref: ForwardedRef<SqlRequestGridRefProps>
-) => {
+  } = allProps;
   const currentRows = useRef<R[]>([]);
   const [rows, setRows] = useState<R[]>([]);
   const [start, setStart] = useState(0);
   const [length, setLength] = useState(50);
   const [count, setCount] = useState(-1);
   const [sqlRequest] = useSqlRequestHandler<R>(props.type);
+  const [conditions, setConditions] = useState<Record<string, ConditionDTO>>(
+    {}
+  );
+  const [orderBy, setOrderBy] = useState<OrderByDTO[]>(
+    Object.entries(props.initialSorts ?? {}).map(
+      ([columnKey, direction]): OrderByDTO => ({
+        field: props.fields[columnKey].field?.fieldAlias ?? columnKey,
+        type: props.fields[columnKey].type ?? 'text',
+        direction: direction.toUpperCase() as 'ASC' | 'DESC',
+      })
+    )
+  );
 
   const [columnsKeys, visibleColumnsKeys] = useMemo(
     () => [
@@ -107,6 +130,69 @@ export const SqlRequestGridInner = <R, P extends object = {}>(
     )
   );
 
+  const refresh = useCallback(() => {
+    setRows([]);
+    setStart(0);
+    setLength(50);
+    setCount(-1);
+  }, []);
+
+  const onFiltersChanged = useCallback(
+    (filters: SqlRequestGridFilters) => {
+      const newConditions = convertSqlFiltersToConditions(filters);
+      setConditions(newConditions);
+      refresh();
+    },
+    [refresh]
+  );
+
+  const onSortsChanged = useCallback(
+    (sorts: Record<string, DataGridSort>) => {
+      refresh();
+      const newOrderBy = Object.entries(sorts).map(
+        ([columnKey, direction]) =>
+          ({
+            field: columnKey,
+            direction: direction.toUpperCase(),
+          } as OrderByDTO)
+      );
+      setOrderBy(newOrderBy);
+    },
+    [refresh]
+  );
+
+  const loadFilterValues = useCallback(
+    (columnKey: string) => {
+      return sqlRequest({
+        columns: columnsKeys,
+        returnColumns: [columnKey],
+        columnTypes: [props.fields[columnKey].type ?? 'text'],
+        conditions: [
+          ...(props.conditions ?? []),
+          ...Object.values(pickBy(conditions, (_, key) => key !== columnKey)),
+        ].filter((condition) => condition.field !== columnKey),
+        orderBy: [
+          {
+            field:
+              props.fields[columnKey].filterField ??
+              props.fields[columnKey].field?.fieldAlias ??
+              props.fields[columnKey].field?.fieldName ??
+              columnKey,
+            type: props.fields[columnKey].type ?? 'text',
+            direction: 'ASC',
+          },
+        ],
+        getCount: false,
+        unique: true,
+      }).then((response) =>
+        response.data.map(
+          (row) => props.fields[columnKey].filter?.getter?.(row) ?? null
+        )
+      );
+    },
+    [columnsKeys, conditions, props.fields, props.conditions, sqlRequest]
+  );
+
   useEffect(() => {
     if (
       !rows.length ||
@@ -115,8 +201,8 @@ export const SqlRequestGridInner = <R, P extends object = {}>(
       loadRows.current(
         columnsKeys,
         visibleColumnsKeys,
-        props.conditions,
-        props.orderBy,
+        [...(props.conditions ?? []), ...Object.values(conditions)],
+        orderBy,
         start,
         length,
         count < 0
@@ -127,11 +213,12 @@ export const SqlRequestGridInner = <R, P extends object = {}>(
     start,
     length,
     count,
-    props.conditions,
+    conditions,
     columnsKeys,
     visibleColumnsKeys,
     rows,
-    props.orderBy,
+    orderBy,
+    props.conditions,
   ]);
 
   const onVisibleRowsChanged = useCallback(
@@ -144,13 +231,6 @@ export const SqlRequestGridInner = <R, P extends object = {}>(
     [length, start]
   );
 
-  const refresh = useCallback(() => {
-    setRows([]);
-    setStart(0);
-    setLength(50);
-    setCount(-1);
-  }, []);
-
   useImperativeHandle(
     ref,
     () => ({
@@ -159,19 +239,69 @@ export const SqlRequestGridInner = <R, P extends object = {}>(
     [refresh]
   );
 
+  const [contextProps, DataGridContext] = useDataGrid({
+    columns: props.fields,
+    rows,
+    onFiltersChanged,
+    filterValuesLoader: loadFilterValues,
+    onSortsChanged,
+    onSelectionChange: () => {},
+    onSelectedRowsChanged: () => {},
+    selectable: false,
+    rowKey: () => '',
+    filter: false,
+    sort: false,
+  });
+
+  const [sidebarVisible, setSidebarVisible] = useState(false);
+  const onSidebarClose = useCallback(() => {
+    setSidebarVisible(false);
+  }, []);
+  const onClearFilters = useCallback(() => {
+    onFiltersChanged({});
+    setSidebarVisible(false);
+  }, [onFiltersChanged]);
+
   return (
-    <styles.SqlRequestGridContainer>
-      <VirtualScroller
-        gridTemplateColumns={`repeat(${itemsPerRow}, 1fr)`}
-        items={rows}
-        itemTemplate={itemTemplate}
-        itemsPerRow={itemsPerRow}
-        itemProps={itemProps}
-        rowHeightInPx={rowHeight}
-        onRangeChanged={onVisibleRowsChanged}
-        gap={gap}
-      />
-    </styles.SqlRequestGridContainer>
+    <DataGridContext.Provider value={contextProps}>
+      <styles.SqlRequestGridContainer>
+        {sidebarVisible ? (
+          <>
+            <FiltersSidebar
+              props={allProps}
+              context={DataGridContext}
+              onClose={onSidebarClose}
+              onClearFilters={onClearFilters}
+            />
+          </>
+        ) : (
+          <IconButton
+            size="large"
+            onClick={() => setSidebarVisible(true)}
+            icon={FilterFullIcon}
+            color="primary"
+            rounded
+            style={{
+              position: 'absolute',
+              bottom: 'var(--space-2)',
+              right: 'var(--space-2)',
+              zIndex: 1,
+            }}
+          />
+        )}
+
+        <VirtualScroller
+          gridTemplateColumns={`repeat(${itemsPerRow}, 1fr)`}
+          items={rows}
+          itemTemplate={itemTemplate}
+          itemsPerRow={itemsPerRow}
+          itemProps={itemProps}
+          rowHeightInPx={rowHeight}
+          onRangeChanged={onVisibleRowsChanged}
+          gap={gap}
+        />
+      </styles.SqlRequestGridContainer>
+    </DataGridContext.Provider>
   );
 };
 

package/src/components/data/SqlRequestGrid/styles.ts

@@ -1,3 +1,4 @@
+import { VirtualScrollerContainer } from '../VirtualScroller/styles';
 import styled from 'styled-components';
 
 export const DEFAULT_ROW_HEIGHT = 200;
@@ -8,43 +9,12 @@ export const SqlRequestGridContainer = styled.div.attrs({
   height: 100%;
   width: 100%;
   overflow: auto;
-`;
-
-export const TopPaddingRow = styled.div``;
-export const BottomPaddingRow = styled.div``;
-
-export const VirtualScrollerContainer = styled.div<{
-  $height: number;
-}>`
   position: relative;
-  overflow: visible;
-  height: ${({ $height }) => `${$height}px`};
-`;
-export const VirtualScrollerRowsContainer = styled.div.attrs<{
-  $gridTemplateColumns: string;
-  $topPadding: number;
-  $rowHeight?: number;
-}>(({ $gridTemplateColumns, $topPadding, $rowHeight = DEFAULT_ROW_HEIGHT }) => {
-  const rowHeightValue = `${$rowHeight}px`;
-  return {
-    style: {
-      top: `${$topPadding}px`,
-      gridTemplateColumns: $gridTemplateColumns,
-      gridAutoRows: rowHeightValue,
-    },
-  };
-})`
-  display: grid;
-  position: absolute;
 
-  ${TopPaddingRow} {
-    grid-column-start: 1;
-    grid-column-end: -1;
-    grid-row: 1;
-  }
-  ${BottomPaddingRow} {
-    grid-column-start: 1;
-    grid-column-end: -1;
-    grid-row: -1;
+  ${VirtualScrollerContainer} {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
   }
 `;

package/src/components/data/SqlRequestGrid/types.ts

@@ -10,6 +10,7 @@ import {
   DataGridColumn,
   DataGridFilter,
   DataGridFilterType,
+  DataGridSort,
 } from '../DataGrid/types';
 
 import { VirtualScrollerTemplateFC } from '../VirtualScroller/types';
@@ -44,6 +45,7 @@ export type SqlRequestGridProps<R, P extends object = {}> = {
   conditions?: ConditionDTO[];
   parser?: (row: SqlRequestRow<R>) => R;
   itemProps: P;
+  initialSorts?: Record<string, DataGridSort>;
 };
 
 export type SqlRequestGridRefProps = {

package/src/components/data/VirtualScroller/index.tsx

@@ -17,6 +17,7 @@ type VirtualScrollerProps<R, P extends object> = {
   tolerance?: number;
   itemProps: P;
   onRangeChanged?: (index: number, length: number) => void;
+  integrated?: boolean;
 };
 
 export const VirtualScroller = <R, P extends object>({
@@ -29,6 +30,7 @@ export const VirtualScroller = <R, P extends object>({
   gap,
   itemsPerRow,
   tolerance,
+  integrated,
 }: VirtualScrollerProps<R, P>) => {
   const [scrollableElement, setScrollableElement] =
     useState<HTMLElement | null>(null);
@@ -51,25 +53,33 @@ export const VirtualScroller = <R, P extends object>({
   }, [indexWithTolerance, lengthWithTolerance, onRangeChanged]);
 
   return (
-    <styles.VirtualScrollerContainer
-      $height={totalHeight}
-      ref={(element) => setScrollableElement(element?.parentElement ?? null)}
-    >
-      <styles.VirtualScrollerItemsContainer
-        $gridTemplateColumns={gridTemplateColumns}
-        $topPadding={topPadding}
-        $itemHeight={rowHeightInPx}
-        $gap={gap}
+    <styles.VirtualScrollerContainer $integrated={integrated}>
+      <styles.VirtualScrollerFiller
+        $height={totalHeight}
+        ref={(element) =>
+          setScrollableElement(
+            (integrated
+              ? element?.parentElement?.parentElement
+              : element?.parentElement) ?? null
+          )
+        }
       >
-        {visibleItems.map((item, currentIndex) => (
-          <ItemTemplate
-            key={indexWithTolerance + currentIndex}
-            item={item}
-            index={currentIndex}
-            {...itemProps}
-          />
-        ))}
-      </styles.VirtualScrollerItemsContainer>
+        <styles.VirtualScrollerItemsContainer
+          $gridTemplateColumns={gridTemplateColumns}
+          $topPadding={topPadding}
+          $itemHeight={rowHeightInPx}
+          $gap={gap}
+        >
+          {visibleItems.map((item, currentIndex) => (
+            <ItemTemplate
+              key={indexWithTolerance + currentIndex}
+              item={item}
+              index={currentIndex}
+              {...itemProps}
+            />
+          ))}
+        </styles.VirtualScrollerItemsContainer>
+      </styles.VirtualScrollerFiller>
     </styles.VirtualScrollerContainer>
   );
 };

package/src/components/data/VirtualScroller/styles.ts

@@ -5,7 +5,16 @@ export const DEFAULT_ROW_HEIGHT = 32;
 export const TopPaddingItem = styled.div``;
 export const BottomPaddingItem = styled.div``;
 
-export const VirtualScrollerContainer = styled.div.attrs<{
+export const VirtualScrollerContainer = styled.div<{
+  $integrated?: boolean;
+}>`
+  position: relative;
+  overflow: auto;
+  height: 100%;
+  display: ${({ $integrated }) => ($integrated ? 'contents' : 'block')};
+`;
+
+export const VirtualScrollerFiller = styled.div.attrs<{
   $height: number;
 }>(({ $height }) => ({
   className: 'VirtualScrollerFiller',

package/src/components/forms/Button.tsx

@@ -4,9 +4,14 @@ import styled, { css } from 'styled-components';
 import { IconFC } from '../../Icons';
 import { ThemeColor } from '../../providers/ThemeProvider/types';
 
+type StyledButtonProps = {
+  $color?: ThemeColor;
+  $rounded?: boolean;
+};
+
 export const StyledButton = styled.button.withConfig({
   shouldForwardProp: () => true,
-})<ButtonProps>`
+})<StyledButtonProps>`
   display: inline-flex;
   vertical-align: middle;
   align-items: center;
@@ -17,18 +22,18 @@ export const StyledButton = styled.button.withConfig({
   font-family: var(--font-sans);
   cursor: pointer;
 
-  ${({ color }) =>
-    color
+  ${({ $color }) =>
+    $color
       ? css`
-          background-color: var(--color-${color}-400);
-          border: 1px solid var(--color-${color}-500);
+          background-color: var(--color-${$color}-400);
+          border: 1px solid var(--color-${$color}-500);
           &:hover {
-            background-color: var(--color-${color}-300);
-            border: 1px solid var(--color-${color}-400);
+            background-color: var(--color-${$color}-300);
+            border: 1px solid var(--color-${$color}-400);
           }
-          color: var(--color-${color}-950);
+          color: var(--color-${$color}-950);
           svg {
-            fill: var(--color-${color}-950);
+            fill: var(--color-${$color}-950);
           }
         `
       : css`
@@ -44,7 +49,7 @@ export const StyledButton = styled.button.withConfig({
           }
         `}
 
-  ${({ rounded }) => rounded && 'border-radius: var(--rounded-full);'}
+  ${({ $rounded }) => $rounded && 'border-radius: var(--rounded-full);'}
 
   &.small {
     padding: var(--space-1) var(--space-1_5);
@@ -91,9 +96,28 @@ export type ButtonProps = {
 export const Button = forwardRef<
   HTMLButtonElement,
   ComponentProps<typeof StyledButton> & ButtonProps
->(({ children, size = 'medium', icon: Icon, className, ...props }, ref) => (
-  <StyledButton ref={ref} className={`${size} ${className}`} {...props}>
-    {Icon && <Icon />}
-    {children}
-  </StyledButton>
-));
+>(
+  (
+    {
+      children,
+      size = 'medium',
+      icon: Icon,
+      className,
+      rounded = false,
+      color = 'secondary',
+      ...props
+    },
+    ref
+  ) => (
+    <StyledButton
+      ref={ref}
+      className={`${size} ${className}`}
+      $color={color}
+      $rounded={rounded}
+      {...props}
+    >
+      {Icon && <Icon />}
+      {children}
+    </StyledButton>
+  )
+);

package/src/components/ui/Label.tsx

@@ -0,0 +1,90 @@
+import { ComponentProps, forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+
+import { ThemeColor } from '../../providers/ThemeProvider/types';
+
+export const StyledLabel = styled.span.withConfig({
+  shouldForwardProp: () => true,
+})<LabelProps>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-sans);
+  font-weight: 500;
+
+  ${({ color }) =>
+    color
+      ? css`
+          background-color: var(--color-${color}-100);
+          color: var(--color-${color}-700);
+          svg {
+            fill: var(--color-${color}-700);
+          }
+        `
+      : css`
+          background-color: var(--color-neutral-100);
+          color: var(--color-neutral-700);
+          svg {
+            fill: var(--color-neutral-700);
+          }
+        `}
+
+  ${({ bordered, color }) =>
+    bordered
+      ? css`
+          border: 1px solid
+            ${color ? `var(--color-${color}-200)` : 'var(--color-neutral-200)'};
+        `
+      : 'border: none;'}
+
+  ${({ rounded }) => rounded && 'border-radius: var(--rounded-full);'}
+
+  &.small {
+    padding: var(--space-0_5) var(--space-1_5);
+    font-size: var(--text-xs);
+    border-radius: var(--rounded-sm);
+    svg {
+      margin-right: var(--space-1);
+      width: var(--space-3);
+      height: var(--space-3);
+    }
+  }
+
+  &.medium {
+    padding: var(--space-1) var(--space-2);
+    font-size: var(--text-sm);
+    border-radius: var(--rounded-md);
+    svg {
+      margin-right: var(--space-1);
+      width: var(--space-3_5);
+      height: var(--space-3_5);
+    }
+  }
+
+  &.large {
+    padding: var(--space-1_5) var(--space-2_5);
+    font-size: var(--text-base);
+    border-radius: var(--rounded-lg);
+    svg {
+      margin-right: var(--space-1_5);
+      width: var(--space-4);
+      height: var(--space-4);
+    }
+  }
+`;
+
+export type LabelProps = {
+  color?: ThemeColor;
+  size?: 'small' | 'medium' | 'large';
+  rounded?: boolean;
+  bordered?: boolean;
+};
+
+export const Label = forwardRef<
+  HTMLSpanElement,
+  ComponentProps<typeof StyledLabel> & LabelProps
+>(({ children, size = 'medium', className = '', ...props }, ref) => (
+  <StyledLabel ref={ref} className={`${size} ${className}`} {...props}>
+    {children}
+  </StyledLabel>
+));

package/src/components/ui/index.ts

@@ -1,4 +1,5 @@
 export * from './Avatar';
 export * from './Card';
 export * from './ContextMenu';
+export * from './Label';
 export * from './Message';

package/src/providers/ThemeProvider/defaultTheme.ts

@@ -400,6 +400,12 @@ export const defaultTheme: Theme = {
     '32': '8rem',
     '40': '10rem',
     '48': '12rem',
+    '56': '14rem',
+    '64': '16rem',
+    '72': '18rem',
+    '80': '20rem',
+    '96': '24rem',
+    '128': '32rem',
   },
 
   sizes: {
@@ -422,6 +428,12 @@ export const defaultTheme: Theme = {
     '32': '8rem',
     '40': '10rem',
     '48': '12rem',
+    '56': '14rem',
+    '64': '16rem',
+    '72': '18rem',
+    '80': '20rem',
+    '96': '24rem',
+    '128': '32rem',
   },
 
   rounded: {

package/src/providers/ThemeProvider/types.ts

@@ -82,7 +82,13 @@ export type ThemeSpace =
   | '24'
   | '32'
   | '40'
-  | '48';
+  | '48'
+  | '56'
+  | '64'
+  | '72'
+  | '80'
+  | '96'
+  | '128';
 export type ThemeSize =
   | '0'
   | '0_5'