@addev-be/ui 0.15.0 → 0.15.1

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

@@ -1,105 +1,106 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
-
-import { EditableDataGridCellProps, EditableDataGridColumn } from '../types';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
-import { DataGridEditableCellFC } from './types';
-import { EditableCellContainer } from '../styles';
-import { useDataGridContext } from '../hooks';
-
-export const DataGridEditableCell = <R, T>({
-  row,
-  columnKey,
-  column,
-  context,
-}: EditableDataGridCellProps<R, T>) => {
-  const { setEditingCell, setRows, editRow, rows, rowKeyGetter } =
-    useDataGridContext(context);
-  const initialValue = useMemo(() => column.getter(row) ?? '', [column, row]);
-  const [value, setValue] = useState(initialValue);
-  const inputRef = useRef<HTMLInputElement | null>(null);
-  const rowKey = rowKeyGetter(row);
-
-  const defaultPartialRowGetter = useCallback(
-    (row: R, newValue: T): Partial<R> =>
-      ({ [columnKey]: newValue } as Partial<R>),
-    [columnKey]
-  );
-  const partialRowGetter: EditableDataGridColumn<R, T>['partialRowGetter'] =
-    column.partialRowGetter ?? defaultPartialRowGetter;
-
-  const save = useCallback(() => {
-    const rowIndex = rows.findIndex(
-      (r) => rowKeyGetter(r) === rowKeyGetter(row)
-    );
-
-    // If row is found
-    if (rowIndex >= 0) {
-      // Update the row with the new value
-      const partialRow = partialRowGetter(row, value);
-      const newRow = {
-        ...row,
-        ...partialRow,
-      };
-
-      // Update the edited rows state
-      editRow(rowKey, partialRow);
-
-      // Update the rows
-      setRows?.((oldRows) => {
-        const newRows = [...oldRows];
-        newRows[rowIndex] = newRow;
-        return newRows;
-      });
-    }
-  }, [
-    editRow,
-    partialRowGetter,
-    row,
-    rowKey,
-    rowKeyGetter,
-    rows,
-    setRows,
-    value,
-  ]);
-
-  const onClose = useCallback(
-    (shouldSave: boolean, nextEditingCell: [number, number] = [-1, -1]) => {
-      if (shouldSave && value !== initialValue) {
-        save();
-      }
-      setEditingCell(nextEditingCell);
-    },
-    [initialValue, save, setEditingCell, value]
-  );
-
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-      inputRef.current.select?.();
-    }
-  }, [inputRef]);
-
-  const input = useMemo(() => {
-    if (!column.editable || !column.editComponent) {
-      return null;
-    }
-    const EditComponent = column.editComponent as DataGridEditableCellFC<R>;
-    return (
-      <EditComponent
-        row={row}
-        ref={inputRef}
-        value={value}
-        onChange={setValue}
-        onClose={onClose}
-      />
-    );
-  }, [column.editComponent, column.editable, onClose, row, value]);
-
-  return (
-    <EditableCellContainer key={columnKey} $textAlign={column.textAlign}>
-      {input}
-    </EditableCellContainer>
-  );
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+
+import { EditableDataGridCellProps, EditableDataGridColumn } from '../types';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { DataGridEditableCellFC } from './types';
+import { EditableCellContainer } from './styles';
+import { useDataGridContext } from '../hooks';
+
+export const DataGridEditableCell = <R, T>({
+  row,
+  columnKey,
+  column,
+  context,
+}: EditableDataGridCellProps<R, T>) => {
+  const { setEditingCell, setRows, editRow, rows, rowKeyGetter } =
+    useDataGridContext(context);
+  const initialValue = useMemo(() => column.getter(row) ?? '', [column, row]);
+  const [value, setValue] = useState(initialValue);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const rowKey = rowKeyGetter(row);
+
+  const defaultItemToPartialRow = useCallback(
+    (row: R, newValue: T): Partial<R> =>
+      ({ [columnKey]: newValue } as Partial<R>),
+    [columnKey]
+  );
+  const partialRowGetter: EditableDataGridColumn<R, T>['itemToPartialRow'] =
+    column.itemToPartialRow ?? defaultItemToPartialRow;
+
+  const save = useCallback(() => {
+    const rowIndex = rows.findIndex(
+      (r) => rowKeyGetter(r) === rowKeyGetter(row)
+    );
+
+    // If row is found
+    if (rowIndex >= 0) {
+      // Update the row with the new value
+      const partialRow = partialRowGetter(row, value);
+      const newRow = {
+        ...row,
+        ...partialRow,
+      };
+
+      // Update the edited rows state
+      editRow(rowKey, partialRow);
+
+      // Update the rows
+      setRows?.((oldRows) => {
+        const newRows = [...oldRows];
+        newRows[rowIndex] = newRow;
+        return newRows;
+      });
+    }
+  }, [
+    editRow,
+    partialRowGetter,
+    row,
+    rowKey,
+    rowKeyGetter,
+    rows,
+    setRows,
+    value,
+  ]);
+
+  const onClose = useCallback(
+    (shouldSave: boolean, nextEditingCell: [number, number] = [-1, -1]) => {
+      if (shouldSave && value !== initialValue) {
+        save();
+      }
+      setEditingCell(nextEditingCell);
+    },
+    [initialValue, save, setEditingCell, value]
+  );
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select?.();
+    }
+  }, [inputRef]);
+
+  const input = useMemo(() => {
+    if (!column.editable || !column.editComponent) {
+      return null;
+    }
+    const EditComponent = column.editComponent as DataGridEditableCellFC<R>;
+    return (
+      <EditComponent
+        row={row}
+        ref={inputRef}
+        value={value}
+        onChange={setValue}
+        onClose={onClose}
+        context={context}
+      />
+    );
+  }, [column.editComponent, column.editable, context, onClose, row, value]);
+
+  return (
+    <EditableCellContainer key={columnKey} $textAlign={column.textAlign}>
+      {input}
+    </EditableCellContainer>
+  );
+};

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

@@ -0,0 +1,35 @@
+import { dataGridCellCss } from '../styles';
+import styled from 'styled-components';
+
+export const EditableCellContainer = styled.div<{
+  $textAlign?: 'left' | 'right' | 'center';
+}>`
+  position: relative;
+  ${dataGridCellCss}
+  padding: 1px 4px 0px 4px;
+  overflow: visible;
+  background-color: var(--color-neutral-0);
+
+  & input,
+  & select {
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    text-align: ${({ $textAlign = 'left' }) => $textAlign};
+
+    border: 1px solid var(--color-neutral-300);
+    padding: var(--space-1) var(--space-2);
+
+    color: var(--color-neutral-900);
+    &::placeholder {
+      color: var(--color-neutral-400);
+    }
+
+    border: none;
+    outline: none;
+  }
+`;

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

@@ -1,15 +1,17 @@
-import { ForwardedRef } from 'react';
-
-export type DataGridEditableCellProps<R, T> = {
-  ref?: ForwardedRef<HTMLInputElement>;
-  row: R;
-  value: T;
-  onChange: (value: T) => void;
-  onClose: (save: boolean) => void;
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type DataGridEditableCellFC<R, T = any> = (
-  props: DataGridEditableCellProps<R, T>,
-  ref: ForwardedRef<HTMLInputElement>
-) => JSX.Element | null;
+import { DataGridContext } from '../types';
+import { ForwardedRef } from 'react';
+
+export type DataGridEditableCellProps<R, T> = {
+  ref?: ForwardedRef<HTMLInputElement>;
+  row: R;
+  value: T;
+  onChange: (value: T) => void;
+  onClose: (save: boolean) => void;
+  context: DataGridContext<R>;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type DataGridEditableCellFC<R, T = any> = (
+  props: DataGridEditableCellProps<R, T>,
+  ref: ForwardedRef<HTMLInputElement>
+) => JSX.Element | null;

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

@@ -1,131 +1,131 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import * as styles from './styles';
-
-import {
-  DataGridFilterCheckbox,
-  DataGridFilterFormatter,
-  DataGridFilterGroup,
-  DataGridFilterRenderer,
-  DataGridFilterValue,
-} from '../types';
-import { defaultRendererAndFormatter, getCheckboxes } from '../helpers';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
-import { debounce } from 'lodash';
-import { useElementSize } from '../../../../hooks';
-
-const CheckboxTemplate = ({
-  selectedValues,
-  value,
-  index,
-  style,
-  onToggle,
-}: {
-  selectedValues: DataGridFilterValue[];
-  value: DataGridFilterCheckbox;
-  index: number;
-  style?: React.CSSProperties;
-  onToggle?: (values: DataGridFilterValue[]) => void;
-}) => {
-  const checked = useMemo(
-    () => value.values.every((v) => selectedValues.includes(v)),
-    [selectedValues, value.values]
-  );
-  return (
-    <styles.FilterValueContainer
-      key={index}
-      style={{ ...style, paddingLeft: `${value.level}rem` }}
-      title={value.title}
-      onClick={() => onToggle?.(value.values)}
-    >
-      <input type="checkbox" checked={checked} readOnly />
-      <span>{value.displayValue || '(Vides)'}</span>
-    </styles.FilterValueContainer>
-  );
-};
-
-type FilterValuesScrollerProps = {
-  values: DataGridFilterValue[];
-  rowHeight?: number;
-  formatter: DataGridFilterFormatter;
-  renderer: DataGridFilterRenderer;
-  onRangeChange?: (startIndex: number, length: number) => void;
-  onToggle?: (values: DataGridFilterValue[]) => void;
-  selectedValues?: DataGridFilterValue[];
-  groups?: DataGridFilterGroup[];
-};
-
-export const FilterValuesScroller = ({
-  values,
-  rowHeight = styles.DEFAULT_FILTER_ROW_HEIGHT,
-  onRangeChange,
-  onToggle,
-  formatter = defaultRendererAndFormatter,
-  renderer = defaultRendererAndFormatter,
-  selectedValues = [],
-  groups,
-}: FilterValuesScrollerProps) => {
-  const scrollableRef = useRef<HTMLDivElement | null>(null);
-  const { height } = useElementSize(scrollableRef.current);
-
-  const tolerance = 20;
-  const [scrollTop, setScrollTop] = useState(0);
-  const index = Math.floor(scrollTop / rowHeight);
-  const length = Math.ceil(height / rowHeight);
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const onScroll = useCallback(
-    debounce((e: React.UIEvent<HTMLDivElement>) => {
-      const target = e.target as HTMLDivElement;
-      setScrollTop(() => target.scrollTop);
-    }, 50),
-    []
-  );
-
-  const checkboxes = useMemo(
-    () => getCheckboxes(values, '', renderer, formatter, groups),
-    [values, groups, renderer, formatter]
-  );
-  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;
-
-  useEffect(() => {
-    onRangeChange?.(index, length);
-  }, [index, length, onRangeChange]);
-
-  return (
-    <styles.FilterValuesScrollerContainer
-      ref={scrollableRef}
-      onScroll={onScroll}
-      $rowHeight={rowHeight}
-    >
-      <div style={{ height: `${checkboxes.length * rowHeight}px` }}>
-        {visibleCheckboxes.map((value, index) => (
-          <CheckboxTemplate
-            style={{ top: firstCheckboxTop + index * rowHeight + 'px' }}
-            key={index}
-            selectedValues={selectedValues}
-            value={value}
-            index={index}
-            onToggle={onToggle}
-          />
-        ))}
-      </div>
-    </styles.FilterValuesScrollerContainer>
-  );
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import * as styles from './styles';
+
+import {
+  DataGridFilterCheckbox,
+  DataGridFilterFormatter,
+  DataGridFilterGroup,
+  DataGridFilterRenderer,
+  DataGridFilterValue,
+} from '../types';
+import { defaultRendererAndFormatter, getCheckboxes } from '../helpers';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { debounce } from 'lodash';
+import { useElementSize } from '../../../../hooks';
+
+const CheckboxTemplate = ({
+  selectedValues,
+  value,
+  index,
+  style,
+  onToggle,
+}: {
+  selectedValues: DataGridFilterValue[];
+  value: DataGridFilterCheckbox;
+  index: number;
+  style?: React.CSSProperties;
+  onToggle?: (values: DataGridFilterValue[]) => void;
+}) => {
+  const checked = useMemo(
+    () => value.values.every((v) => selectedValues.includes(v)),
+    [selectedValues, value.values]
+  );
+  return (
+    <styles.FilterValueContainer
+      key={index}
+      style={{ ...style, paddingLeft: `${value.level}rem` }}
+      title={value.title}
+      onClick={() => onToggle?.(value.values)}
+    >
+      <input type="checkbox" checked={checked} readOnly />
+      <span>{value.displayValue || '(Vides)'}</span>
+    </styles.FilterValueContainer>
+  );
+};
+
+type FilterValuesScrollerProps = {
+  values: DataGridFilterValue[];
+  rowHeight?: number;
+  formatter: DataGridFilterFormatter;
+  renderer: DataGridFilterRenderer;
+  onRangeChange?: (startIndex: number, length: number) => void;
+  onToggle?: (values: DataGridFilterValue[]) => void;
+  selectedValues?: DataGridFilterValue[];
+  groups?: DataGridFilterGroup[];
+};
+
+export const FilterValuesScroller = ({
+  values,
+  rowHeight = styles.DEFAULT_FILTER_ROW_HEIGHT,
+  onRangeChange,
+  onToggle,
+  formatter = defaultRendererAndFormatter,
+  renderer = defaultRendererAndFormatter,
+  selectedValues = [],
+  groups,
+}: FilterValuesScrollerProps) => {
+  const scrollableRef = useRef<HTMLDivElement | null>(null);
+  const { height } = useElementSize(scrollableRef.current);
+
+  const tolerance = 20;
+  const [scrollTop, setScrollTop] = useState(0);
+  const index = Math.floor(scrollTop / rowHeight);
+  const length = Math.ceil(height / rowHeight);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const onScroll = useCallback(
+    debounce((e: React.UIEvent<HTMLDivElement>) => {
+      const target = e.target as HTMLDivElement;
+      setScrollTop(() => target.scrollTop);
+    }, 50),
+    []
+  );
+
+  const checkboxes = useMemo(
+    () => getCheckboxes(values, '', renderer, formatter, groups),
+    [values, groups, renderer, formatter]
+  );
+  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;
+
+  useEffect(() => {
+    onRangeChange?.(index, length);
+  }, [index, length, onRangeChange]);
+
+  return (
+    <styles.FilterValuesScrollerContainer
+      ref={scrollableRef}
+      onScroll={onScroll}
+      $rowHeight={rowHeight}
+    >
+      <div style={{ height: `${checkboxes.length * rowHeight}px` }}>
+        {visibleCheckboxes.map((value, index) => (
+          <CheckboxTemplate
+            style={{ top: firstCheckboxTop + index * rowHeight + 'px' }}
+            key={index}
+            selectedValues={selectedValues}
+            value={value}
+            index={index}
+            onToggle={onToggle}
+          />
+        ))}
+      </div>
+    </styles.FilterValuesScrollerContainer>
+  );
+};