@addev-be/ui 0.10.12 → 0.11.0

package/package.json

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

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

@@ -87,9 +87,20 @@ export const FilterValuesScroller = ({
     () => getCheckboxes(values, '', renderer, formatter, groups),
     [values, groups, renderer, formatter]
   );
-  const visibleCheckboxes = checkboxes.slice(
-    Math.max(0, index - tolerance),
-    index + length + 1 + tolerance
+  const visibleCheckboxes = useMemo(
+    () => [
+      {
+        title: 'Sélectionner tout',
+        values: checkboxes.map((checkbox) => checkbox.values).flat(),
+        displayValue: 'Sélectionner tout',
+        level: 0,
+      },
+      ...checkboxes.slice(
+        Math.max(0, index - tolerance),
+        index + length + 1 + tolerance
+      ),
+    ],
+    [checkboxes, index, length, tolerance]
   );
   const firstCheckboxTop = Math.max(0, index - tolerance) * rowHeight;
 

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

@@ -3,6 +3,7 @@
 
 import * as styles from './styles';
 
+import { DEFAULT_COLUMN_WIDTH } from './constants';
 import { DataGridContext } from './types';
 import { useDataGridContext } from './hooks';
 
@@ -32,7 +33,7 @@ export const DataGridFooter = <R,>({
       {visibleColumns.map(([key, col]) => (
         <styles.DataGridHeaderCellContainer
           key={key}
-          style={{ width: (col.width ?? 150) + 'px' }}
+          style={{ width: (col.width ?? DEFAULT_COLUMN_WIDTH) + 'px' }}
         >
           {footerFunctions?.[key]?.(rows, sortedRows, selectedRows)}
         </styles.DataGridHeaderCellContainer>

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

@@ -69,27 +69,29 @@ export const DataGridHeader = <R,>({
 
   const toolsRow = (
     <styles.DataGridToolsRow>
-      <Loading visible={isLoadingVisible} />
-      {refresh && (
-        <Button size="small" onClick={refresh}>
-          <ArrowsRotateIcon />
-          Rafraîchir
+      <styles.DataGridToolsRowButtonsContainer>
+        <Loading visible={isLoadingVisible} />
+        {refresh && (
+          <Button size="small" onClick={refresh}>
+            <ArrowsRotateIcon />
+            Rafraîchir
+          </Button>
+        )}
+        <Button $color="emerald" size="small" onClick={runCopyTable}>
+          <CopyIcon />
+          Copier la table
         </Button>
-      )}
-      <Button $color="emerald" size="small" onClick={runCopyTable}>
-        <CopyIcon />
-        Copier la table
-      </Button>
-      <Button size="small" $color="danger" onClick={() => setFilters({})}>
-        <FilterSlashIcon />
-        Supprimer les filtres
-      </Button>
-      {name && (
-        <Button $color="info" size="small" onClick={openModal}>
-          <TableColumnsIcon />
-          Paramètres des colonnes
+        <Button size="small" $color="danger" onClick={() => setFilters({})}>
+          <FilterSlashIcon />
+          Supprimer les filtres
         </Button>
-      )}
+        {name && (
+          <Button $color="info" size="small" onClick={openModal}>
+            <TableColumnsIcon />
+            Paramètres des colonnes
+          </Button>
+        )}
+      </styles.DataGridToolsRowButtonsContainer>
     </styles.DataGridToolsRow>
   );
 

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

@@ -6,12 +6,13 @@ import * as styles from './styles';
 import { MouseEvent, useCallback, useMemo, useRef, useState } from 'react';
 
 import { ChevronDownIcon } from '../../../Icons';
-import { useUi } from '../../../providers';
-import { IconButton } from '../../forms/IconButton';
-import { Dropdown } from '../../layout';
+import { DEFAULT_COLUMN_WIDTH } from './constants';
 import { DataGridFilterMenu } from './DataGridFilterMenu';
-import { useDataGridContext } from './hooks';
 import { DataGridHeaderCellProps } from './types';
+import { Dropdown } from '../../layout';
+import { IconButton } from '../../forms/IconButton';
+import { useDataGridContext } from './hooks';
+import { useUi } from '../../../providers';
 
 export const DataGridHeaderCell = <R,>({
   columnKey,
@@ -36,7 +37,8 @@ export const DataGridHeaderCell = <R,>({
 
   const onResizeStart = useCallback(
     (e: MouseEvent) => {
-      resizingOffset.current = e.screenX - (column.width || 150);
+      resizingOffset.current =
+        e.screenX - (column.width || DEFAULT_COLUMN_WIDTH);
       setIsResizing(true);
     },
     [column.width]

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

@@ -0,0 +1,6 @@
+export const TOOLBAR_HEIGHT = 40;
+export const DEFAULT_HEADER_ROW_HEIGHT = 40;
+export const DEFAULT_FOOTER_ROW_HEIGHT = 40;
+export const DEFAULT_ROW_HEIGHT = 32;
+export const SELECTION_CELL_WIDTH = 'var(--space-8)';
+export const DEFAULT_COLUMN_WIDTH = 150;

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

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+import { DEFAULT_COLUMN_WIDTH, SELECTION_CELL_WIDTH } from '../constants';
 import {
   DataGridColumns,
   DataGridContext,
@@ -58,8 +59,10 @@ export const useDataGrid = <R,>(
   const gridTemplateColumns = useMemo(
     () =>
       [
-        ...(selectable ? ['var(--space-8)'] : []),
-        ...visibleColumns.map(([, col]) => `${col.width ?? 150}px`),
+        ...(selectable ? [SELECTION_CELL_WIDTH] : []),
+        ...visibleColumns.map(
+          ([, col]) => `${col.width ?? DEFAULT_COLUMN_WIDTH}px`
+        ),
       ].join(' '),
     [selectable, visibleColumns]
   );

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

@@ -5,8 +5,14 @@ import {
   ForwardedRef,
   forwardRef,
   useImperativeHandle,
+  useMemo,
   useRef,
 } from 'react';
+import {
+  DEFAULT_COLUMN_WIDTH,
+  DEFAULT_ROW_HEIGHT,
+  SELECTION_CELL_WIDTH,
+} from './constants';
 import { DataGridContextProps, DataGridProps, DataGridRefProps } from './types';
 
 import { DataGridFooter } from './DataGridFooter';
@@ -32,6 +38,7 @@ export const DataGridInner = <R,>(
   const [contextProps, DataGridContext] = useDataGrid(props, contextOverride);
   const {
     columns,
+    selectable,
     rowHeight = 32,
     headerRowHeight = 40,
     gridTemplateColumns,
@@ -39,6 +46,7 @@ export const DataGridInner = <R,>(
     onVisibleRowsChange,
     refresh,
     setSelectedKeys,
+    fixedColumnsCount,
   } = contextProps;
 
   useImperativeHandle(
@@ -51,6 +59,15 @@ export const DataGridInner = <R,>(
   );
 
   const hasFooter = Object.values(columns).some((col) => col.footer);
+  const fixedColumnWidths = useMemo(
+    () => [
+      ...(selectable ? [SELECTION_CELL_WIDTH] : []),
+      ...Object.values(columns)
+        .slice(0, fixedColumnsCount ?? 0)
+        .map((col) => col.width ?? DEFAULT_COLUMN_WIDTH),
+    ],
+    [columns, fixedColumnsCount, selectable]
+  );
 
   const rowTemplate = DataGridRowTemplate;
 
@@ -63,6 +80,7 @@ export const DataGridInner = <R,>(
         $rowsCount={contextProps.sortedRows.length}
         $withFooter={hasFooter}
         className={className}
+        $fixedColumnWidths={fixedColumnWidths}
       >
         <DataGridHeader context={DataGridContext} />
         <VirtualScroller<R, { context: Context<DataGridContextProps<R>> }>
@@ -71,7 +89,7 @@ export const DataGridInner = <R,>(
           items={sortedRows}
           itemTemplate={rowTemplate}
           itemProps={{ context: DataGridContext }}
-          rowHeightInPx={styles.DEFAULT_ROW_HEIGHT}
+          rowHeightInPx={DEFAULT_ROW_HEIGHT}
           onRangeChanged={onVisibleRowsChange}
         />
         {hasFooter && <DataGridFooter context={DataGridContext} />}

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

@@ -1,13 +1,15 @@
+import {
+  DEFAULT_FOOTER_ROW_HEIGHT,
+  DEFAULT_HEADER_ROW_HEIGHT,
+  DEFAULT_ROW_HEIGHT,
+  SELECTION_CELL_WIDTH,
+  TOOLBAR_HEIGHT,
+} from './constants';
 import styled, { css } from 'styled-components';
 
 import { ThemeColor } from '../../../providers/ThemeProvider/types';
 import { VirtualScrollerFiller } from '../VirtualScroller/styles';
 
-export const TOOLBAR_HEIGHT = 40;
-export const DEFAULT_HEADER_ROW_HEIGHT = 40;
-export const DEFAULT_FOOTER_ROW_HEIGHT = 40;
-export const DEFAULT_ROW_HEIGHT = 32;
-
 export const DataGridResizeGrip = styled.div<{ $headerColor?: ThemeColor }>`
   position: absolute;
   top: 0;
@@ -120,16 +122,20 @@ export const DataGridToolsRow = styled.div`
   grid-column-end: -1;
   grid-row: 1;
   display: flex;
-  gap: var(--space-1);
-  padding: 0 var(--space-1);
-  align-items: center;
   background-color: var(--color-neutral-200);
   position: sticky;
   top: 0;
-  left: 0;
   z-index: 10;
 `;
-DataGridToolsRow.displayName = 'DataGridToolsRow';
+
+export const DataGridToolsRowButtonsContainer = styled.div`
+  display: inline-flex;
+  gap: var(--space-1);
+  align-items: center;
+  padding: 0 var(--space-1);
+  position: sticky;
+  left: 0;
+`;
 
 export const DataGridContainer = styled.div<{
   $headerRowHeight?: number;
@@ -137,6 +143,7 @@ export const DataGridContainer = styled.div<{
   $rowsCount: number;
   $showToolsHeader?: boolean;
   $withFooter?: boolean;
+  $fixedColumnWidths?: (string | number)[];
 }>`
   display: grid;
   width: 100%;
@@ -168,6 +175,42 @@ export const DataGridContainer = styled.div<{
     box-sizing: border-box;
   }
 
+  ${({ $fixedColumnWidths = [] }) =>
+    $fixedColumnWidths.map(
+      (width, i) => `
+    ${DataGridHeaderCellContainer}:nth-child(${i + 1}) {
+      position: sticky;
+      left: ${
+        i === 0
+          ? '0'
+          : `calc(${$fixedColumnWidths
+              .slice(0, i)
+              .map((w) => (typeof w === 'number' ? `${w}px` : w))
+              .join(' + ')})`
+      };
+      background-color: var(--color-neutral-200);
+      z-index: 1;
+    }`
+    )}
+
+  ${({ $fixedColumnWidths = [] }) =>
+    $fixedColumnWidths.map(
+      (width, i) => `
+    ${DataGridCell}:nth-child(${i + 1}) {
+      position: sticky;
+      left: ${
+        i === 0
+          ? '0'
+          : `calc(${$fixedColumnWidths
+              .slice(0, i)
+              .map((w) => (typeof w === 'number' ? `${w}px` : w))
+              .join(' + ')})`
+      };
+      background-color: var(--color-neutral-50);
+      z-index: 1;
+    }`
+    )}
+
   ${VirtualScrollerFiller} {
     grid-column-start: 1;
     grid-column-end: -1;
@@ -254,7 +297,7 @@ const selectionCellStyle = css`
 
   & > input[type='checkbox'] {
     height: var(--space-4);
-    width: var(--space-4);
+    width: ${SELECTION_CELL_WIDTH};
     border-radius: var(--rounded-sm);
     border: 1px solid var(--color-neutral-300);
     color: var(--color-primary-600);

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

@@ -100,6 +100,7 @@ export type DataGridProps<R> = {
   loadCopyRows?: () => Promise<R[]>;
   refresh?: () => void;
   headerColor?: ThemeColor;
+  fixedColumnsCount?: number;
 };
 
 export type DataGridContextProps<R> = DataGridProps<R> & {

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

@@ -122,7 +122,7 @@ export const SqlRequestDataGridInner = <R,>(
         conditions: ConditionDTO[] = [],
         orderBy: OrderByDTO[] = [],
         start = 0,
-        length = 100,
+        length = 0,
         getCount = false
       ) => {
         sqlRequest({
@@ -136,7 +136,7 @@ export const SqlRequestDataGridInner = <R,>(
           conditions,
           orderBy,
           start,
-          length,
+          length: Math.max(length, 0),
           getCount,
         }).then((response) => {
           if (getCount) {

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

@@ -11,7 +11,7 @@ type VirtualScrollerProps<R, P extends object> = {
   gridTemplateColumns: string;
   items: R[];
   itemTemplate: VirtualScrollerTemplateFC<R, P>;
-  rowHeightInPx?: number;
+  rowHeightInPx: number;
   gap?: string;
   itemsPerRow?: number;
   tolerance?: number;
@@ -23,7 +23,7 @@ type VirtualScrollerProps<R, P extends object> = {
 export const VirtualScroller = <R, P extends object>({
   gridTemplateColumns,
   items,
-  rowHeightInPx = styles.DEFAULT_ROW_HEIGHT,
+  rowHeightInPx,
   itemTemplate: ItemTemplate,
   itemProps,
   onRangeChanged,

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

@@ -1,7 +1,5 @@
 import styled from 'styled-components';
 
-export const DEFAULT_ROW_HEIGHT = 32;
-
 export const TopPaddingItem = styled.div``;
 export const BottomPaddingItem = styled.div``;