@addev-be/ui 2.7.4 → 2.7.5

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

@@ -1,97 +1,97 @@
-import styled from 'styled-components';
-
-export const DEFAULT_FILTER_ROW_HEIGHT = 24;
-
-export const InputContainer = styled.div.attrs({
-  className: 'InputContainer',
-})`
-  position: relative;
-  border-radius: var(--rounded-md);
-  padding: 0 var(--space-1);
-
-  svg {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    left: var(--space-4);
-    display: flex;
-    align-items: center;
-    fill: var(--color-base-400);
-    width: var(--space-4);
-    height: var(--space-4);
-  }
-
-  input {
-    padding-left: var(--space-8);
-  }
-`;
-
-export const CheckboxesContainer = styled.div.attrs({
-  className: 'CheckboxesContainer',
-})`
-  font-weight: normal;
-  user-select: none;
-  padding: var(--space-2);
-  margin: var(--space-1);
-  margin-bottom: 0;
-  border: 1px solid var(--color-base-300);
-  border-radius: var(--rounded-md);
-  box-shadow: var(--shadow-inner);
-  background-color: var(--color-base-0);
-  height: 20em;
-  overflow-y: hidden;
-  white-space: nowrap;
-`;
-
-export const Separator = styled.div.attrs({
-  className: 'Separator',
-})`
-  border-top: 1px solid var(--color-base-200);
-  margin: var(--space-1) 0;
-`;
-
-export const FilterValueContainer = styled.div.attrs({
-  className: 'FilterValueContainer',
-})`
-  position: absolute;
-  left: 0;
-  right: 0;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  cursor: pointer;
-  &:hover {
-    background-color: var(--color-base-50);
-  }
-`;
-
-export const FilterValuesScrollerContainer = styled.div.attrs({
-  className: 'FilterValuesScrollerContainer',
-})<{
-  $rowHeight?: number;
-}>`
-  display: block;
-  font-size: var(--text-base);
-  background-color: var(--color-base-0);
-  overflow-y: scroll;
-  overflow-x: hidden;
-  height: 100%;
-
-  & > div {
-    position: relative;
-  }
-
-  & ${FilterValueContainer} {
-    position: absolute;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    height: ${({ $rowHeight = DEFAULT_FILTER_ROW_HEIGHT }) =>
-      `${$rowHeight}px`};
-
-    input[type='checkbox'] {
-      margin-right: var(--space-1);
-      flex-shrink: 0;
-    }
-  }
-`;
+import styled from 'styled-components';
+
+export const DEFAULT_FILTER_ROW_HEIGHT = 24;
+
+export const InputContainer = styled.div.attrs({
+  className: 'InputContainer',
+})`
+  position: relative;
+  border-radius: var(--rounded-md);
+  padding: 0 var(--space-1);
+
+  svg {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: var(--space-4);
+    display: flex;
+    align-items: center;
+    fill: var(--color-base-400);
+    width: var(--space-4);
+    height: var(--space-4);
+  }
+
+  input {
+    padding-left: var(--space-8);
+  }
+`;
+
+export const CheckboxesContainer = styled.div.attrs({
+  className: 'CheckboxesContainer',
+})`
+  font-weight: normal;
+  user-select: none;
+  padding: var(--space-2);
+  margin: var(--space-1);
+  margin-bottom: 0;
+  border: 1px solid var(--color-base-300);
+  border-radius: var(--rounded-md);
+  box-shadow: var(--shadow-inner);
+  background-color: var(--color-base-0);
+  height: 20em;
+  overflow-y: hidden;
+  white-space: nowrap;
+`;
+
+export const Separator = styled.div.attrs({
+  className: 'Separator',
+})`
+  border-top: 1px solid var(--color-base-200);
+  margin: var(--space-1) 0;
+`;
+
+export const FilterValueContainer = styled.div.attrs({
+  className: 'FilterValueContainer',
+})`
+  position: absolute;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--color-base-50);
+  }
+`;
+
+export const FilterValuesScrollerContainer = styled.div.attrs({
+  className: 'FilterValuesScrollerContainer',
+})<{
+  $rowHeight?: number;
+}>`
+  display: block;
+  font-size: var(--text-base);
+  background-color: var(--color-base-0);
+  overflow-y: scroll;
+  overflow-x: hidden;
+  height: 100%;
+
+  & > div {
+    position: relative;
+  }
+
+  & ${FilterValueContainer} {
+    position: absolute;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: ${({ $rowHeight = DEFAULT_FILTER_ROW_HEIGHT }) =>
+      `${$rowHeight}px`};
+
+    input[type='checkbox'] {
+      margin-right: var(--space-1);
+      flex-shrink: 0;
+    }
+  }
+`;

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

@@ -1,47 +1,47 @@
-import * as styles from './styles';
-
-import { DEFAULT_COLUMN_WIDTH } from './constants';
-import { DataGridContext } from './types';
-import { useDataGridContext } from './hooks';
-
-export const DataGridFooter = <R,>({
-  context,
-}: {
-  context: DataGridContext<R>;
-}) => {
-  const {
-    visibleColumns,
-    rows,
-    selectedRows,
-    sortedRows,
-    selectable,
-    headerColor,
-    footers = {},
-    gridTemplateColumns,
-    footerFunctions,
-  } = useDataGridContext(context);
-
-  if (!Object.keys(footers).length) {
-    return null;
-  }
-
-  return (
-    <styles.DataGridFooterRow
-      $gridTemplateColumns={gridTemplateColumns}
-      $headerColor={headerColor}
-    >
-      {!!selectable && (
-        <styles.HeaderSelectionCell $headerColor={headerColor} />
-      )}
-      {visibleColumns.map((col) => (
-        <styles.DataGridHeaderCellContainer
-          key={col.key}
-          style={{ width: (col.width ?? DEFAULT_COLUMN_WIDTH) + 'px' }}
-          $headerColor={col.color ?? headerColor}
-        >
-          {footerFunctions?.[col.key]?.(rows, sortedRows, selectedRows)}
-        </styles.DataGridHeaderCellContainer>
-      ))}
-    </styles.DataGridFooterRow>
-  );
-};
+import * as styles from './styles';
+
+import { DEFAULT_COLUMN_WIDTH } from './constants';
+import { DataGridContext } from './types';
+import { useDataGridContext } from './hooks';
+
+export const DataGridFooter = <R,>({
+  context,
+}: {
+  context: DataGridContext<R>;
+}) => {
+  const {
+    visibleColumns,
+    rows,
+    selectedRows,
+    sortedRows,
+    selectable,
+    headerColor,
+    footers = {},
+    gridTemplateColumns,
+    footerFunctions,
+  } = useDataGridContext(context);
+
+  if (!Object.keys(footers).length) {
+    return null;
+  }
+
+  return (
+    <styles.DataGridFooterRow
+      $gridTemplateColumns={gridTemplateColumns}
+      $headerColor={headerColor}
+    >
+      {!!selectable && (
+        <styles.HeaderSelectionCell $headerColor={headerColor} />
+      )}
+      {visibleColumns.map((col) => (
+        <styles.DataGridHeaderCellContainer
+          key={col.key}
+          style={{ width: (col.width ?? DEFAULT_COLUMN_WIDTH) + 'px' }}
+          $headerColor={col.color ?? headerColor}
+        >
+          {footerFunctions?.[col.key]?.(rows, sortedRows, selectedRows)}
+        </styles.DataGridHeaderCellContainer>
+      ))}
+    </styles.DataGridFooterRow>
+  );
+};

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

@@ -1,74 +1,74 @@
-import * as styles from './styles';
-
-import { useCallback, useState } from 'react';
-
-import { DataGridContext } from './types';
-import { DataGridHeaderCell } from './DataGridHeaderCell';
-import { IndeterminateCheckbox } from '../../forms/IndeterminateCheckbox';
-import { useDataGridContext } from './hooks';
-
-export const DataGridHeader = <R,>({
-  context,
-}: {
-  context: DataGridContext<R>;
-}) => {
-  const {
-    visibleColumns,
-    selectable,
-    rows,
-    selectedKeys,
-    setSelectedKeys,
-    headerColor,
-    rowKeyGetter,
-    gridTemplateColumns,
-    getAllIds,
-  } = useDataGridContext(context);
-  const [visibleFilter, setVisibleFilter] = useState<string | undefined>();
-
-  const checkboxStatus =
-    selectedKeys.length === 0
-      ? false
-      : selectedKeys.length === rows.length
-      ? true
-      : undefined;
-  const toggleAll = useCallback(
-    async (newStatus: boolean) => {
-      const allIds = getAllIds ? await getAllIds() : rows.map(rowKeyGetter);
-      setSelectedKeys(newStatus ? allIds : []);
-    },
-    [getAllIds, rowKeyGetter, rows, setSelectedKeys]
-  );
-
-  const onFilterButtonClicked = useCallback((columnKey: string) => {
-    setVisibleFilter((prev) => (prev === columnKey ? undefined : columnKey));
-  }, []);
-
-  return (
-    <>
-      <styles.DataGridHeaderRow
-        $gridTemplateColumns={gridTemplateColumns}
-        $headerColor={headerColor}
-      >
-        {!!selectable && (
-          <styles.HeaderSelectionCell
-            $headerColor={headerColor}
-            onClick={() => toggleAll(!(checkboxStatus ?? true))}
-          >
-            <IndeterminateCheckbox checked={checkboxStatus} readOnly />
-          </styles.HeaderSelectionCell>
-        )}
-        {visibleColumns.map((col, index) => (
-          <DataGridHeaderCell
-            key={col.key}
-            columnKey={col.key}
-            column={col}
-            context={context}
-            columnIndex={index}
-            isFilterOpen={visibleFilter === col.key}
-            onFilterButtonClicked={onFilterButtonClicked}
-          />
-        ))}
-      </styles.DataGridHeaderRow>
-    </>
-  );
-};
+import * as styles from './styles';
+
+import { useCallback, useState } from 'react';
+
+import { DataGridContext } from './types';
+import { DataGridHeaderCell } from './DataGridHeaderCell';
+import { IndeterminateCheckbox } from '../../forms/IndeterminateCheckbox';
+import { useDataGridContext } from './hooks';
+
+export const DataGridHeader = <R,>({
+  context,
+}: {
+  context: DataGridContext<R>;
+}) => {
+  const {
+    visibleColumns,
+    selectable,
+    rows,
+    selectedKeys,
+    setSelectedKeys,
+    headerColor,
+    rowKeyGetter,
+    gridTemplateColumns,
+    getAllIds,
+  } = useDataGridContext(context);
+  const [visibleFilter, setVisibleFilter] = useState<string | undefined>();
+
+  const checkboxStatus =
+    selectedKeys.length === 0
+      ? false
+      : selectedKeys.length === rows.length
+      ? true
+      : undefined;
+  const toggleAll = useCallback(
+    async (newStatus: boolean) => {
+      const allIds = getAllIds ? await getAllIds() : rows.map(rowKeyGetter);
+      setSelectedKeys(newStatus ? allIds : []);
+    },
+    [getAllIds, rowKeyGetter, rows, setSelectedKeys]
+  );
+
+  const onFilterButtonClicked = useCallback((columnKey: string) => {
+    setVisibleFilter((prev) => (prev === columnKey ? undefined : columnKey));
+  }, []);
+
+  return (
+    <>
+      <styles.DataGridHeaderRow
+        $gridTemplateColumns={gridTemplateColumns}
+        $headerColor={headerColor}
+      >
+        {!!selectable && (
+          <styles.HeaderSelectionCell
+            $headerColor={headerColor}
+            onClick={() => toggleAll(!(checkboxStatus ?? true))}
+          >
+            <IndeterminateCheckbox checked={checkboxStatus} readOnly />
+          </styles.HeaderSelectionCell>
+        )}
+        {visibleColumns.map((col, index) => (
+          <DataGridHeaderCell
+            key={col.key}
+            columnKey={col.key}
+            column={col}
+            context={context}
+            columnIndex={index}
+            isFilterOpen={visibleFilter === col.key}
+            onFilterButtonClicked={onFilterButtonClicked}
+          />
+        ))}
+      </styles.DataGridHeaderRow>
+    </>
+  );
+};

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

@@ -1,112 +1,112 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import * as styles from './styles';
-
-import { useCallback, useMemo, useRef, useState } from 'react';
-
-import { ChevronDownIcon } from '../../../Icons';
-import { DataGridFilterMenu } from './DataGridFilterMenu';
-import { DataGridHeaderCellProps } from './types';
-import { Dropdown } from '../../layout/Dropdown';
-import { IconButton } from '../../forms/IconButton';
-import { useDataGridContext } from './hooks';
-import { useUi } from '../../../providers/hooks';
-
-export const DataGridHeaderCell = <R,>({
-  columnKey,
-  column,
-  context,
-}: DataGridHeaderCellProps<R>) => {
-  const { getElementScreenRect } = useUi();
-  const contextValue = useDataGridContext(context);
-  const {
-    filters = {},
-    headerColor,
-    resizingColumnKey,
-    startResizing,
-  } = contextValue;
-  const filterButtonRef = useRef<HTMLButtonElement | null>(null);
-
-  /** RESIZING */
-
-  const [isFilterDropdownVisible, setIsFilterDropdownVisible] = useState(false);
-  const filterDropdown = useMemo(() => {
-    if (
-      !isFilterDropdownVisible ||
-      !filterButtonRef.current ||
-      !columnKey ||
-      !column.filter
-    ) {
-      return null;
-    }
-    const filterButtonRect = getElementScreenRect(filterButtonRef.current);
-    filterButtonRect.x += window.scrollX;
-    filterButtonRect.y += window.scrollY;
-    return (
-      <Dropdown
-        $sourceRect={filterButtonRect}
-        onClose={() => setIsFilterDropdownVisible(false)}
-        $width={320}
-        $height={[350, 500]}
-        $autoPositionX
-      >
-        <DataGridFilterMenu
-          column={column as any}
-          context={context}
-          onClose={() => setIsFilterDropdownVisible(false)}
-        />
-      </Dropdown>
-    );
-  }, [
-    column,
-    columnKey,
-    context,
-    getElementScreenRect,
-    isFilterDropdownVisible,
-  ]);
-
-  const onFilterButtonClicked = useCallback(() => {
-    setIsFilterDropdownVisible(true);
-  }, []);
-
-  const isResizing = resizingColumnKey === columnKey;
-  const hasFilters = filters[columnKey]?.values.length > 0;
-
-  return (
-    <styles.DataGridHeaderCellContainer
-      $headerColor={column.color ?? headerColor}
-      $isResizing={isResizing}
-      $hasFilterOpened={isFilterDropdownVisible || hasFilters}
-    >
-      {filterDropdown}
-
-      {typeof column.name === 'string' ? (
-        <span>{column.name}</span>
-      ) : (
-        <styles.DataGridHeaderTextContainer>
-          {column.name}
-        </styles.DataGridHeaderTextContainer>
-      )}
-      {!!column.filter && (
-        <IconButton
-          size="small"
-          className={hasFilters ? 'danger' : ''}
-          ref={filterButtonRef}
-          icon={ChevronDownIcon}
-          color={hasFilters ? 'danger' : headerColor}
-          onClick={onFilterButtonClicked}
-          bordered
-        />
-      )}
-      {column.resizable !== false && (
-        <>
-          <styles.DataGridResizeGrip
-            className={isResizing ? 'active' : ''}
-            $headerColor={headerColor}
-            onMouseDown={(e) => startResizing(e, columnKey)}
-          />
-        </>
-      )}
-    </styles.DataGridHeaderCellContainer>
-  );
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import * as styles from './styles';
+
+import { useCallback, useMemo, useRef, useState } from 'react';
+
+import { ChevronDownIcon } from '../../../Icons';
+import { DataGridFilterMenu } from './DataGridFilterMenu';
+import { DataGridHeaderCellProps } from './types';
+import { Dropdown } from '../../layout/Dropdown';
+import { IconButton } from '../../forms/IconButton';
+import { useDataGridContext } from './hooks';
+import { useUi } from '../../../providers/hooks';
+
+export const DataGridHeaderCell = <R,>({
+  columnKey,
+  column,
+  context,
+}: DataGridHeaderCellProps<R>) => {
+  const { getElementScreenRect } = useUi();
+  const contextValue = useDataGridContext(context);
+  const {
+    filters = {},
+    headerColor,
+    resizingColumnKey,
+    startResizing,
+  } = contextValue;
+  const filterButtonRef = useRef<HTMLButtonElement | null>(null);
+
+  /** RESIZING */
+
+  const [isFilterDropdownVisible, setIsFilterDropdownVisible] = useState(false);
+  const filterDropdown = useMemo(() => {
+    if (
+      !isFilterDropdownVisible ||
+      !filterButtonRef.current ||
+      !columnKey ||
+      !column.filter
+    ) {
+      return null;
+    }
+    const filterButtonRect = getElementScreenRect(filterButtonRef.current);
+    filterButtonRect.x += window.scrollX;
+    filterButtonRect.y += window.scrollY;
+    return (
+      <Dropdown
+        $sourceRect={filterButtonRect}
+        onClose={() => setIsFilterDropdownVisible(false)}
+        $width={320}
+        $height={[350, 500]}
+        $autoPositionX
+      >
+        <DataGridFilterMenu
+          column={column as any}
+          context={context}
+          onClose={() => setIsFilterDropdownVisible(false)}
+        />
+      </Dropdown>
+    );
+  }, [
+    column,
+    columnKey,
+    context,
+    getElementScreenRect,
+    isFilterDropdownVisible,
+  ]);
+
+  const onFilterButtonClicked = useCallback(() => {
+    setIsFilterDropdownVisible(true);
+  }, []);
+
+  const isResizing = resizingColumnKey === columnKey;
+  const hasFilters = filters[columnKey]?.values.length > 0;
+
+  return (
+    <styles.DataGridHeaderCellContainer
+      $headerColor={column.color ?? headerColor}
+      $isResizing={isResizing}
+      $hasFilterOpened={isFilterDropdownVisible || hasFilters}
+    >
+      {filterDropdown}
+
+      {typeof column.name === 'string' ? (
+        <span>{column.name}</span>
+      ) : (
+        <styles.DataGridHeaderTextContainer>
+          {column.name}
+        </styles.DataGridHeaderTextContainer>
+      )}
+      {!!column.filter && (
+        <IconButton
+          size="small"
+          className={hasFilters ? 'danger' : ''}
+          ref={filterButtonRef}
+          icon={ChevronDownIcon}
+          color={hasFilters ? 'danger' : headerColor}
+          onClick={onFilterButtonClicked}
+          bordered
+        />
+      )}
+      {column.resizable !== false && (
+        <>
+          <styles.DataGridResizeGrip
+            className={isResizing ? 'active' : ''}
+            $headerColor={headerColor}
+            onMouseDown={(e) => startResizing(e, columnKey)}
+          />
+        </>
+      )}
+    </styles.DataGridHeaderCellContainer>
+  );
+};