@addev-be/ui 0.2.7 → 0.2.8

package/package.json

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

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

@@ -66,6 +66,7 @@ const sortDesc: Record<DataGridFilterType, [string, IconFC]> = {
 
 const footerFunctionsTexts: Record<DataGridFooterPredefinedFunction, string> = {
   average: 'Moyenne',
+  avg: 'Moyenne',
   count: 'Nombre',
   max: 'Maximum',
   min: 'Minimum',
@@ -73,6 +74,7 @@ const footerFunctionsTexts: Record<DataGridFooterPredefinedFunction, string> = {
 };
 const footerFunctionsIcons: Record<DataGridFooterPredefinedFunction, IconFC> = {
   average: XBarIcon,
+  avg: XBarIcon,
   count: TallyIcon,
   max: ArrowUpBigSmallIcon,
   min: ArrowDownBigSmallIcon,
@@ -195,19 +197,10 @@ export const DataGridFilterMenu = <R,>({
   }, []);
 
   const checkboxesComponent = useMemo(() => {
-    if (column.type === 'date') {
-      const groups = getDateGroups(filteredAvailableValues);
-      return (
-        <FilterValuesScroller
-          values={filteredAvailableValues}
-          selectedValues={selectedValues}
-          onToggle={toggleValues}
-          formatter={formatter}
-          renderer={renderer}
-          groups={groups}
-        />
-      );
-    }
+    const groups =
+      column.type === 'date'
+        ? getDateGroups(filteredAvailableValues)
+        : undefined;
     return (
       <FilterValuesScroller
         values={filteredAvailableValues}
@@ -215,6 +208,7 @@ export const DataGridFilterMenu = <R,>({
         onToggle={toggleValues}
         formatter={formatter}
         renderer={renderer}
+        groups={groups}
       />
     );
   }, [

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

@@ -29,33 +29,39 @@ const CheckboxTemplate = ({
   className?: string;
   style?: React.CSSProperties;
   onToggle?: (values: DataGridFilterValue[]) => void;
-}) => (
-  <div
-    key={index}
-    className={join(
-      [
-        // 'absolute left-0 right-0 flex flex-row cursor-pointer hover:bg-gray-50',
-        className,
-      ],
-      ' '
-    )}
-    style={{ ...style, paddingLeft: `${value.level}rem` }}
-    title={value.title}
-    onClick={() => onToggle?.([value.value])}
-  >
-    <input
-      type="checkbox"
-      checked={selectedValues.includes(value.value)}
-      readOnly
-      // className="inline-block mr-2"
-    />
-    <span
-    // className="mr-2 truncate"
+}) => {
+  const checked = useMemo(
+    () => value.values.every((v) => selectedValues.includes(v)),
+    [selectedValues, value.values]
+  );
+  return (
+    <styles.FilterValueContainer
+      key={index}
+      className={join(
+        [
+          // 'absolute left-0 right-0 flex flex-row cursor-pointer hover:bg-gray-50',
+          className,
+        ],
+        ' '
+      )}
+      style={{ ...style, paddingLeft: `${value.level}rem` }}
+      title={value.title}
+      onClick={() => onToggle?.(value.values)}
     >
-      {value.displayValue || '(Vides)'}
-    </span>
-  </div>
-);
+      <input
+        type="checkbox"
+        checked={checked}
+        readOnly
+        // className="inline-block mr-2"
+      />
+      <span
+      // className="mr-2 truncate"
+      >
+        {value.displayValue || '(Vides)'}
+      </span>
+    </styles.FilterValueContainer>
+  );
+};
 
 type FilterValuesScrollerProps = {
   values: DataGridFilterValue[];
@@ -96,7 +102,7 @@ export const FilterValuesScroller = ({
   );
 
   const checkboxes = useMemo(
-    () => getCheckboxes(values, renderer, formatter, groups),
+    () => getCheckboxes(values, '', renderer, formatter, groups),
     [values, groups, renderer, formatter]
   );
   const visibleCheckboxes = checkboxes.slice(

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

@@ -87,11 +87,15 @@ export const dateColumn = <R extends Record<string, any>>(
 ): DataGridColumns<R> => ({
   [key]: {
     name: title,
+    type: 'date',
     render: (row) => moment(row[key]).format('DD/MM/YYYY') ?? '',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     footer: (_, filteredRows) => `${filteredRows.length} éléments`,
-    filter: textFilter(key),
+    filter: {
+      ...textFilter(key),
+      renderer: (value) => moment(value).format('DD/MM/YYYY') ?? '',
+    },
     ...options,
   },
 });

package/src/components/data/DataGrid/helpers/filters.ts

@@ -168,8 +168,10 @@ export const getDateGroups = (dates: any[]): DataGridFilterGroup[] => {
   const grouperDates = groupDatesByYearAndMonth(dates);
   return Object.entries(grouperDates).map(([year, months]) => ({
     name: year,
+    displayValue: year,
     values: Object.values(months).flat(),
     groups: Object.entries(months).map(([month, dates]) => ({
+      displayValue: month,
       name: month,
       values: dates,
     })),
@@ -181,29 +183,37 @@ export const defaultRendererAndFormatter = (value: any) =>
 
 export const getCheckboxes = (
   values: DataGridFilterValue[],
+  displayValue: DataGridFilterValue,
   renderer: DataGridFilterRenderer,
   formatter: DataGridFilterFormatter,
   groups?: DataGridFilterGroup[],
   level = 0
-): DataGridFilterCheckbox[] => [
-  ...(groups ?? [])
-    .map<DataGridFilterCheckbox[]>((group) =>
-      getCheckboxes(
-        group.values ?? [],
-        renderer,
-        formatter,
-        group.groups,
-        level + 1
-      )
-    )
-    .flat(),
-  ...values.map<DataGridFilterCheckbox>((value) => ({
-    displayValue: renderer(value),
-    title: formatter(value),
-    value: value ?? '',
-    level,
-  })),
-];
+): DataGridFilterCheckbox[] =>
+  groups
+    ? groups
+        .map<DataGridFilterCheckbox[]>((group) => [
+          {
+            displayValue: group.displayValue,
+            title: formatter(group.displayValue),
+            values: group.values ?? [],
+            level,
+          },
+          ...getCheckboxes(
+            group.values ?? [],
+            group.displayValue,
+            renderer,
+            formatter,
+            group.groups,
+            level + 1
+          ),
+        ])
+        .flat()
+    : values.map<DataGridFilterCheckbox>((value) => ({
+        displayValue: renderer(value),
+        title: formatter(value),
+        values: [value ?? ''],
+        level,
+      }));
 
 export const textFilter = (key: string): DataGridFilter<'text'> => ({
   type: 'text',

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

@@ -123,6 +123,7 @@ export const DataGrid = <R,>({
         $headerRowHeight={headerRowHeight}
         $rowHeight={rowHeight}
         $rowsCount={contextProps.sortedRows.length}
+        $withFooter={hasFooter}
         className={className}
       >
         <DataGridHeader context={DataGridContext} />

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

@@ -5,6 +5,7 @@ import { ThemeColor } from '../../../providers/ThemeProvider/types';
 export const VIRTUAL_SCROLL_TOLERANCE = 20;
 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 DEFAULT_FILTER_ROW_HEIGHT = 24;
 
@@ -175,6 +176,7 @@ export const DataGridContainer = styled.div<{
   $rowHeight?: number;
   $rowsCount: number;
   $showToolsHeader?: boolean;
+  $withFooter?: boolean;
 }>`
   display: grid;
   width: 100%;
@@ -182,8 +184,13 @@ export const DataGridContainer = styled.div<{
   background-color: var(--color-neutral-50);
   font-size: var(--text-base);
   overflow: scroll;
-  grid-template-rows: ${({ $headerRowHeight = DEFAULT_HEADER_ROW_HEIGHT }) =>
-    `${TOOLBAR_HEIGHT}px ${$headerRowHeight}px auto`};
+  grid-template-rows: ${({
+    $headerRowHeight = DEFAULT_HEADER_ROW_HEIGHT,
+    $withFooter = false,
+  }) =>
+    `${TOOLBAR_HEIGHT}px ${$headerRowHeight}px auto ${
+      $withFooter ? DEFAULT_FOOTER_ROW_HEIGHT + 'px' : ''
+    }`};
 
   ${DataGridToolsRow} {
     height: ${TOOLBAR_HEIGHT}px;
@@ -345,3 +352,16 @@ export const FilterValuesScrollerContainer = styled.div.attrs({
     }
   }
 `;
+
+export const FilterValueContainer = styled.div.attrs({
+  className: 'FilterValueContainer',
+})`
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--color-neutral-50);
+  }
+`;

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

@@ -23,6 +23,7 @@ export type DataGridCellFC = FC<{
 
 export type DataGridFooterPredefinedFunction =
   | 'average'
+  | 'avg'
   | 'count'
   | 'max'
   | 'min'
@@ -246,7 +247,8 @@ export type DataGridFilter<T extends string = DataGridFilterType> =
 
 export type DataGridFilterGroup = {
   name: string;
-  values?: (string | number | null)[];
+  displayValue: DataGridFilterValue;
+  values?: DataGridFilterValue[];
   groups?: DataGridFilterGroup[];
 };
 
@@ -255,6 +257,6 @@ export type DataGridFilterValue = string | number | null;
 export type DataGridFilterCheckbox = {
   displayValue: ReactNode;
   title: string;
-  value: DataGridFilterValue;
+  values: DataGridFilterValue[];
   level: number;
 };

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

@@ -99,6 +99,7 @@ export const sqlDateColumn = <R extends Record<string, any>>(
 ): SqlRequestDataGridColumns<R> => ({
   [key]: {
     name: title,
+    type: 'date',
     render: (row) => formatDate(row[key]),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',

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

@@ -59,7 +59,7 @@ export const SqlRequestDataGrid = <R,>({
   const columnTypes = useMemo(
     () =>
       visibleColumnsKeys.map((key) =>
-        String(props.columns[key].type ?? 'text')
+        String(props.columns[key]?.type ?? 'text')
       ),
     [visibleColumnsKeys, props.columns]
   );

package/src/components/ui/ContextMenu/index.tsx

@@ -4,6 +4,7 @@ import {
   HTMLAttributes,
   PropsWithChildren,
   useCallback,
+  useRef,
   useState,
 } from 'react';
 
@@ -27,7 +28,9 @@ export const ParentMenuItem: FC<HTMLAttributes<HTMLDivElement>> = ({
   ...props
 }) => {
   const [isOpened, setIsOpened] = useState(false);
+  const [isSubMenuLeft, setIsSubMenuLeft] = useState(false);
   const [currentTimeout, setCurrentTimeout] = useState<number | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
 
   const stopTimeout = useCallback(() => {
     if (currentTimeout) {
@@ -42,6 +45,8 @@ export const ParentMenuItem: FC<HTMLAttributes<HTMLDivElement>> = ({
       setCurrentTimeout(
         window.setTimeout(
           () => {
+            const rect = containerRef.current?.getBoundingClientRect();
+            setIsSubMenuLeft(!!rect && rect.right + 280 > window.innerWidth);
             setIsOpened(open);
           },
           open ? 100 : 300
@@ -56,8 +61,9 @@ export const ParentMenuItem: FC<HTMLAttributes<HTMLDivElement>> = ({
 
   return (
     <MenuItemContainer
+      ref={containerRef}
       {...props}
-      className={isOpened ? 'opened' : ''}
+      className={`${isOpened ? 'opened' : ''} ${isSubMenuLeft ? 'left' : ''}`}
       onMouseEnter={open}
       onMouseLeave={close}
       $withArrow

package/src/components/ui/ContextMenu/styles.ts

@@ -104,6 +104,10 @@ export const MenuItemContainer = styled.div.attrs({
   &.opened > ${SubMenu} {
     display: block;
   }
+  &.opened.left > ${SubMenu} {
+    left: auto;
+    right: 100%;
+  }
 `;
 MenuItemContainer.displayName = 'MenuItemContainer';