@gridsuite/commons-ui 0.94.0 → 0.96.0

package/dist/components/checkBoxList/CheckBoxList.d.ts

@@ -1,2 +1,2 @@
 import { CheckboxListProps } from './checkBoxList.type';
-export declare function CheckBoxList<T>({ isDndDragAndDropActive, onDragStart, onDragEnd, isDragDisable, sx, ...props }: CheckboxListProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function CheckBoxList<T>({ isDndActive, onDragStart, onDragEnd, isDragDisable, sx, ...props }: CheckboxListProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/checkBoxList/CheckBoxList.js

@@ -4,7 +4,7 @@ import { Box } from "@mui/material";
 import { DragDropContext, Droppable } from "@hello-pangea/dnd";
 import { CheckBoxListItems } from "./CheckBoxListItems.js";
 function CheckBoxList({
-  isDndDragAndDropActive = false,
+  isDndActive = false,
   onDragStart,
   onDragEnd,
   isDragDisable = false,
@@ -12,16 +12,8 @@ function CheckBoxList({
   ...props
 }) {
   const [isDragging, setIsDragging] = useState(false);
-  const checkBoxField = /* @__PURE__ */ jsx(
-    CheckBoxListItems,
-    {
-      isDndDragAndDropActive,
-      isDragDisable: isDragDisable || isDragging,
-      sx,
-      ...props
-    }
-  );
-  return isDndDragAndDropActive ? /* @__PURE__ */ jsx(
+  const checkBoxField = /* @__PURE__ */ jsx(CheckBoxListItems, { isDndActive, isDragDisable: isDragDisable || isDragging, sx, ...props });
+  return isDndActive ? /* @__PURE__ */ jsx(
     DragDropContext,
     {
       onDragEnd: (dropResult) => {

package/dist/components/checkBoxList/CheckBoxListItem.d.ts

@@ -1,2 +1,2 @@
 import { CheckBoxListItemProps } from './checkBoxList.type';
-export declare function CheckBoxListItem<T>({ item, sx, secondaryAction, getItemId, divider, onItemClick, isItemClickable, ...props }: Readonly<CheckBoxListItemProps<T>>): import("react/jsx-runtime").JSX.Element;
+export declare function CheckBoxListItem<T>({ item, sx, secondaryAction, getItemId, divider, onItemClick, isItemClickable, disabled, ...props }: Readonly<CheckBoxListItemProps<T>>): import("react/jsx-runtime").JSX.Element;

package/dist/components/checkBoxList/CheckBoxListItem.js

@@ -1,8 +1,29 @@
 import { jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import { ListItem } from "@mui/material";
-import { ClickableCheckBoxItem } from "./ClickableCheckBoxItem.js";
-import { ClickableRowItem } from "./ClickableRowItem.js";
+import { useState, useCallback } from "react";
+import { ListItem, ListItemButton } from "@mui/material";
+import { CheckBoxListItemContent } from "./CheckBoxListItemContent.js";
+import "../../utils/conversionUtils.js";
+import "@mui/icons-material";
+import { mergeSx } from "../../utils/styles.js";
+import "../../utils/types/equipmentType.js";
+import "../../utils/yupConfig.js";
+const styles = {
+  checkboxListItem: {
+    alignItems: "flex-start",
+    // this is the only way to unset the absolute positionning of the secondary action
+    "& .MuiListItemSecondaryAction-root": {
+      marginTop: "1px",
+      position: "relative",
+      top: 0,
+      right: 0,
+      transform: "none"
+    },
+    // this is the only way to unset a 48px right padding when ListItemButton is hovered
+    "& .MuiListItemButton-root": {
+      paddingRight: "0px"
+    }
+  }
+};
 function CheckBoxListItem({
   item,
   sx,
@@ -11,28 +32,40 @@ function CheckBoxListItem({
   divider,
   onItemClick,
   isItemClickable,
+  disabled,
   ...props
 }) {
   const [hover, setHover] = useState("");
+  const handleItemClick = useCallback(() => {
+    if (!onItemClick) {
+      return;
+    }
+    if (isItemClickable) {
+      if (isItemClickable(item)) {
+        onItemClick(item);
+      }
+      return;
+    }
+    onItemClick(item);
+  }, [isItemClickable, item, onItemClick]);
   return /* @__PURE__ */ jsx(
     ListItem,
     {
       secondaryAction: secondaryAction == null ? void 0 : secondaryAction(item, hover),
-      sx: { minWidth: 0, ...sx == null ? void 0 : sx.checkboxListItem },
+      sx: mergeSx(styles.checkboxListItem, sx == null ? void 0 : sx.checkboxListItem),
       onMouseEnter: () => setHover(getItemId(item)),
       onMouseLeave: () => setHover(""),
-      disablePadding: !!onItemClick,
-      disableGutters: true,
+      disablePadding: true,
       divider,
-      children: !onItemClick ? /* @__PURE__ */ jsx(ClickableCheckBoxItem, { sx, ...props }) : /* @__PURE__ */ jsx(
-        ClickableRowItem,
+      children: onItemClick ? /* @__PURE__ */ jsx(
+        ListItemButton,
         {
-          isItemClickable: isItemClickable == null ? void 0 : isItemClickable(item),
-          onItemClick: () => onItemClick(item),
-          sx,
-          ...props
+          sx: mergeSx({ alignItems: "flex-start", padding: "unset" }, sx == null ? void 0 : sx.checkboxButton),
+          disabled,
+          onClick: handleItemClick,
+          children: /* @__PURE__ */ jsx(CheckBoxListItemContent, { sx, ...props })
         }
-      )
+      ) : /* @__PURE__ */ jsx(CheckBoxListItemContent, { sx, ...props })
     }
   );
 }

package/dist/components/checkBoxList/CheckBoxListItemContent.d.ts

@@ -0,0 +1,2 @@
+import { CheckBoxListItemContentProps } from './checkBoxList.type';
+export declare function CheckBoxListItemContent({ sx, label, secondary, onClick, ...props }: Readonly<CheckBoxListItemContentProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/checkBoxList/CheckBoxListItemContent.js

@@ -0,0 +1,45 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { ListItemIcon, Checkbox, ListItemText } from "@mui/material";
+import { OverflowableText } from "../overflowableText/OverflowableText.js";
+import "../../utils/conversionUtils.js";
+import "@mui/icons-material";
+import { mergeSx } from "../../utils/styles.js";
+import "../../utils/types/equipmentType.js";
+import "../../utils/yupConfig.js";
+function CheckBoxListItemContent({
+  sx,
+  label,
+  secondary,
+  onClick,
+  ...props
+}) {
+  const onCheckboxClick = (event) => {
+    event.stopPropagation();
+    onClick();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ListItemIcon, { sx: mergeSx({ marginTop: "0px" }, sx == null ? void 0 : sx.checkBoxIcon), children: /* @__PURE__ */ jsx(Checkbox, { sx: sx == null ? void 0 : sx.checkbox, disableRipple: true, onClick: onCheckboxClick, ...props }) }),
+    /* @__PURE__ */ jsx(
+      ListItemText,
+      {
+        sx: mergeSx(
+          {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            paddingTop: "0px",
+            // this is to align text with default padding/margin of the checkbox
+            marginTop: "9px"
+          },
+          sx == null ? void 0 : sx.listItemText
+        ),
+        disableTypography: true,
+        secondary,
+        children: /* @__PURE__ */ jsx(OverflowableText, { sx: mergeSx({ width: "100%" }, sx == null ? void 0 : sx.label), text: label })
+      }
+    )
+  ] });
+}
+export {
+  CheckBoxListItemContent
+};

package/dist/components/checkBoxList/CheckBoxListItems.d.ts

@@ -1,2 +1,2 @@
 import { CheckBoxListItemsProps } from './checkBoxList.type';
-export declare function CheckBoxListItems<T>({ items, selectedItems, onSelectionChange, getItemId, sx, secondaryAction, addSelectAllCheckbox, selectAllCheckBoxLabel, getItemLabel, isDisabled, isDndDragAndDropActive, isDragDisable, divider, onItemClick, isItemClickable, ...props }: Readonly<CheckBoxListItemsProps<T>>): import("react/jsx-runtime").JSX.Element;
+export declare function CheckBoxListItems<T>({ items, selectedItems, onSelectionChange, getItemId, sx, secondaryAction, addSelectAllCheckbox, selectAllCheckBoxLabel, getItemLabel, getItemLabelSecondary, isDisabled, isDndActive, isDragDisable, divider, onItemClick, isItemClickable, ...props }: Readonly<CheckBoxListItemsProps<T>>): import("react/jsx-runtime").JSX.Element;

package/dist/components/checkBoxList/CheckBoxListItems.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
-import { List, ListItem, ListItemButton, ListItemIcon, Checkbox, ListItemText } from "@mui/material";
+import { List, ListItem, ListItemButton } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { Draggable } from "@hello-pangea/dnd";
 import { CheckBoxListItem } from "./CheckBoxListItem.js";
-import { OverflowableText } from "../overflowableText/OverflowableText.js";
 import { DraggableCheckBoxListItem } from "./DraggableCheckBoxListItem.js";
+import { CheckBoxListItemContent } from "./CheckBoxListItemContent.js";
 function CheckBoxListItems({
   items,
   selectedItems,
@@ -16,8 +16,9 @@ function CheckBoxListItems({
   addSelectAllCheckbox,
   selectAllCheckBoxLabel,
   getItemLabel,
+  getItemLabelSecondary,
   isDisabled,
-  isDndDragAndDropActive,
+  isDndActive,
   isDragDisable,
   divider,
   onItemClick,
@@ -82,30 +83,31 @@ function CheckBoxListItems({
             borderBottom: "2px solid"
           }
         },
-        children: /* @__PURE__ */ jsxs(ListItemButton, { onClick: toggleSelectAll, sx: { paddingLeft: 0 }, children: [
-          /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 0 }, children: /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              sx: { paddingLeft: 0 },
-              checked: selectedItems.length !== 0,
-              indeterminate: selectedItems.length > 0 && selectedItems.length !== items.length
-            }
-          ) }),
-          /* @__PURE__ */ jsx(ListItemText, { sx: { display: "flex" }, disableTypography: true, children: /* @__PURE__ */ jsx(
-            OverflowableText,
-            {
-              text: /* @__PURE__ */ jsx(FormattedMessage, { id: selectAllLabel, defaultMessage: selectAllLabel })
-            }
-          ) })
-        ] })
+        children: /* @__PURE__ */ jsx(
+          ListItemButton,
+          {
+            onClick: toggleSelectAll,
+            sx: { alignItems: "flex-start", paddingLeft: isDndActive ? "24px" : 0 },
+            children: /* @__PURE__ */ jsx(
+              CheckBoxListItemContent,
+              {
+                onClick: toggleSelectAll,
+                checked: selectedItems.length !== 0,
+                indeterminate: selectedItems.length > 0 && selectedItems.length !== items.length,
+                label: /* @__PURE__ */ jsx(FormattedMessage, { id: selectAllLabel, defaultMessage: selectAllLabel })
+              }
+            )
+          }
+        )
       }
     ),
     items == null ? void 0 : items.map((item, index) => {
       const label = getItemLabel ? getItemLabel(item) : getItemId(item);
+      const secondary = getItemLabelSecondary ? getItemLabelSecondary(item) : null;
       const disabled = isDisabled ? isDisabled(item) : false;
       const addDivider = divider && index < items.length - 1;
       const calculatedItemSx = typeof (sx == null ? void 0 : sx.items) === "function" ? sx == null ? void 0 : sx.items(item) : sx == null ? void 0 : sx.items;
-      if (isDndDragAndDropActive) {
+      if (isDndActive) {
         return /* @__PURE__ */ jsx(
           Draggable,
           {
@@ -118,6 +120,7 @@ function CheckBoxListItems({
                 item,
                 checked: isChecked(item),
                 label,
+                secondary,
                 onClick: () => toggleSelection(getItemId(item)),
                 sx: calculatedItemSx,
                 disabled,
@@ -141,6 +144,7 @@ function CheckBoxListItems({
           item,
           checked: isChecked(item),
           label,
+          secondary,
           onClick: () => toggleSelection(getItemId(item)),
           disabled,
           getItemId,

package/dist/components/checkBoxList/DraggableCheckBoxListItem.d.ts

@@ -1,2 +1,2 @@
 import { DraggableCheckBoxListItemProps } from './checkBoxList.type';
-export declare function DraggableCheckBoxListItem<T>({ item, sx, secondaryAction, getItemId, isDragDisable, provided, divider, onItemClick, isItemClickable, ...props }: Readonly<DraggableCheckBoxListItemProps<T>>): import("react/jsx-runtime").JSX.Element;
+export declare function DraggableCheckBoxListItem<T>({ item, sx, secondaryAction, getItemId, isDragDisable, provided, divider, onItemClick, isItemClickable, disabled, ...props }: Readonly<DraggableCheckBoxListItemProps<T>>): import("react/jsx-runtime").JSX.Element;

package/dist/components/checkBoxList/DraggableCheckBoxListItem.js

@@ -1,8 +1,30 @@
 import { jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import { ListItem } from "@mui/material";
-import { DraggableClickableCheckBoxItem } from "./DraggableClickableCheckBoxItem.js";
-import { DraggableClickableRowItem } from "./DraggableClickableRowItem.js";
+import { useState, useCallback } from "react";
+import { ListItem, ListItemButton } from "@mui/material";
+import { DraggableCheckBoxListItemContent } from "./DraggableCheckBoxListItemContent.js";
+import "../../utils/conversionUtils.js";
+import "@mui/icons-material";
+import { mergeSx } from "../../utils/styles.js";
+import "../../utils/types/equipmentType.js";
+import "../../utils/yupConfig.js";
+const styles = {
+  checkboxListItem: {
+    // this is to align ListItem children and its secondary action
+    alignItems: "flex-start",
+    // this is the only way to unset the absolute positionning of the secondary action
+    "& .MuiListItemSecondaryAction-root": {
+      marginTop: "1px",
+      position: "relative",
+      top: 0,
+      right: 0,
+      transform: "none"
+    },
+    // this is the only way to unset a 48px right padding when ListItemButton is hovered
+    "& .MuiListItemButton-root": {
+      paddingRight: "0px"
+    }
+  }
+};
 function DraggableCheckBoxListItem({
   item,
   sx,
@@ -13,36 +35,43 @@ function DraggableCheckBoxListItem({
   divider,
   onItemClick,
   isItemClickable,
+  disabled,
   ...props
 }) {
   const [hover, setHover] = useState("");
+  const handleItemClick = useCallback(() => onItemClick == null ? void 0 : onItemClick(item), [item, onItemClick]);
   return /* @__PURE__ */ jsx(
     ListItem,
     {
       secondaryAction: secondaryAction == null ? void 0 : secondaryAction(item, hover),
-      sx: { minWidth: 0, ...sx == null ? void 0 : sx.checkboxListItem },
+      sx: mergeSx(styles.checkboxListItem, sx == null ? void 0 : sx.checkboxListItem),
       onMouseEnter: () => setHover(getItemId(item)),
       onMouseLeave: () => setHover(""),
-      disablePadding: !!onItemClick,
-      disableGutters: true,
-      divider,
+      disablePadding: true,
       ref: provided.innerRef,
       ...provided.draggableProps,
-      children: !onItemClick ? /* @__PURE__ */ jsx(
-        DraggableClickableCheckBoxItem,
+      children: (isItemClickable == null ? void 0 : isItemClickable(item)) ? /* @__PURE__ */ jsx(
+        ListItemButton,
         {
-          provided,
-          isHighlighted: hover === getItemId(item) && !isDragDisable,
-          sx,
-          ...props
+          sx: mergeSx({ alignItems: "flex-start", paddingTop: "0px" }, sx == null ? void 0 : sx.checkboxButton),
+          disabled,
+          onClick: handleItemClick,
+          disableGutters: true,
+          children: /* @__PURE__ */ jsx(
+            DraggableCheckBoxListItemContent,
+            {
+              provided,
+              isHighlighted: hover === getItemId(item) && !isDragDisable,
+              sx,
+              ...props
+            }
+          )
         }
       ) : /* @__PURE__ */ jsx(
-        DraggableClickableRowItem,
+        DraggableCheckBoxListItemContent,
         {
           provided,
           isHighlighted: hover === getItemId(item) && !isDragDisable,
-          onItemClick: () => onItemClick(item),
-          isItemClickable: isItemClickable == null ? void 0 : isItemClickable(item),
           sx,
           ...props
         }

package/dist/components/checkBoxList/DraggableCheckBoxListItemContent.d.ts

@@ -0,0 +1,2 @@
+import { DraggableCheckBoxListItemContentProps } from './checkBoxList.type';
+export declare function DraggableCheckBoxListItemContent({ provided, isHighlighted, sx, ...props }: Readonly<DraggableCheckBoxListItemContentProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/checkBoxList/DraggableCheckBoxListItemContent.js

@@ -0,0 +1,38 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { DragIndicator } from "@mui/icons-material";
+import { IconButton } from "@mui/material";
+import { CheckBoxListItemContent } from "./CheckBoxListItemContent.js";
+import "../../utils/conversionUtils.js";
+import { mergeSx } from "../../utils/styles.js";
+import "../../utils/types/equipmentType.js";
+import "../../utils/yupConfig.js";
+function DraggableCheckBoxListItemContent({
+  provided,
+  isHighlighted,
+  sx,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        ...provided.dragHandleProps,
+        size: "small",
+        sx: mergeSx(
+          {
+            display: isHighlighted ? "block" : "none",
+            padding: "unset",
+            marginTop: "9px"
+            // this is to align drag button to the checkbox and label
+          },
+          sx == null ? void 0 : sx.dragButton
+        ),
+        children: /* @__PURE__ */ jsx(DragIndicator, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(CheckBoxListItemContent, { sx, ...props })
+  ] });
+}
+export {
+  DraggableCheckBoxListItemContent
+};

package/dist/components/checkBoxList/checkBoxList.type.d.ts

@@ -3,10 +3,12 @@ import { DraggableProvided, DragStart, DropResult } from '@hello-pangea/dnd';
 import { SxProps, Theme } from '@mui/material';
 export type CheckBoxListItemSx = {
     checkBoxIcon?: SxProps<Theme>;
+    listItemText?: SxProps<Theme>;
     label?: SxProps<Theme>;
     checkboxListItem?: SxProps<Theme>;
     checkboxButton?: SxProps<Theme>;
     checkbox?: SxProps<Theme>;
+    dragButton?: SxProps<Theme>;
 };
 export type CheckBoxListSx = {
     dragAndDropContainer?: SxProps<Theme>;
@@ -20,6 +22,7 @@ export interface CheckBoxListItemProps<T> {
     item: T;
     sx?: CheckBoxListItemSx;
     label: ReactNode;
+    secondary?: ReactNode;
     onClick: () => void;
     secondaryAction?: (item: T, hover: string) => ReactElement | null;
     getItemId: (item: T) => string;
@@ -39,12 +42,13 @@ export interface CheckBoxListItemsProps<T> {
     onSelectionChange?: (selectedItems: T[]) => void;
     getItemId: (item: T) => string;
     getItemLabel?: (item: T) => ReactNode;
+    getItemLabelSecondary?: (item: T) => ReactNode;
     secondaryAction?: (item: T, hover: boolean) => ReactElement | null;
     isDisabled?: (item: T) => boolean;
     addSelectAllCheckbox?: boolean;
     selectAllCheckBoxLabel?: string;
     sx?: CheckBoxListItemSxProps<T>;
-    isDndDragAndDropActive?: boolean;
+    isDndActive?: boolean;
     isDragDisable?: boolean;
     divider?: boolean;
     onItemClick?: (item: T) => void;
@@ -54,23 +58,17 @@ export interface CheckboxListProps<T> extends CheckBoxListItemsProps<T> {
     onDragStart?: (dragStart: DragStart) => void;
     onDragEnd?: (dropResult: DropResult) => void;
 }
-export interface ClickableCheckBoxItemProps {
+export interface CheckBoxListItemContentProps {
     sx?: CheckBoxListItemSx;
     label: ReactNode;
+    secondary?: ReactNode;
     onClick: () => void;
     disabled?: boolean;
     checked: boolean;
+    indeterminate?: boolean;
 }
-export interface DraggableClickableCheckBoxItemProps extends ClickableCheckBoxItemProps {
+export interface DraggableCheckBoxListItemContentProps extends CheckBoxListItemContentProps {
     provided: DraggableProvided;
     isHighlighted: boolean;
 }
-interface ClickableItem {
-    onItemClick: () => void;
-    isItemClickable?: boolean;
-}
-export interface ClickableRowItemProps extends ClickableCheckBoxItemProps, ClickableItem {
-}
-export interface DraggableClickableRowItemProps extends DraggableClickableCheckBoxItemProps, ClickableItem {
-}
 export {};

package/dist/components/customAGGrid/customAggrid.d.ts

@@ -1,9 +1,12 @@
-import { default as React } from 'react';
 import { AgGridReact, AgGridReactProps } from 'ag-grid-react';
-interface CustomAGGGridStyleProps {
-    shouldHidePinnedHeaderRightBorder?: boolean;
-}
-export interface CustomAGGridProps extends AgGridReactProps, CustomAGGGridStyleProps {
-}
-export declare const CustomAGGrid: React.ForwardRefExoticComponent<CustomAGGridProps & React.RefAttributes<AgGridReact<any>>>;
-export {};
+import { AG_GRID_LOCALE_EN } from '@ag-grid-community/locale';
+import { BoxProps } from '@mui/material';
+import { GsLangUser } from '../../utils/langs';
+export type AgGridLocale = Partial<Record<keyof typeof AG_GRID_LOCALE_EN, string>>;
+export type AgGridLocales = Record<GsLangUser, AgGridLocale>;
+export type CustomAGGridProps<TData = any> = Omit<AgGridReactProps<TData>, 'localeText' | 'getLocaleText'> & Pick<BoxProps, 'sx'> & {
+    overrideLocales?: AgGridLocales;
+};
+export declare const CustomAGGrid: import('react').ForwardRefExoticComponent<Omit<AgGridReactProps<any>, "localeText" | "getLocaleText"> & Pick<BoxProps, "sx"> & {
+    overrideLocales?: AgGridLocales;
+} & import('react').RefAttributes<AgGridReact<any>>>;

package/dist/components/customAGGrid/customAggrid.js

@@ -1,60 +1,63 @@
 import { jsx } from "react/jsx-runtime";
-import React, { useCallback } from "react";
+import { forwardRef, useMemo } from "react";
 import { AgGridReact } from "ag-grid-react";
-import { useIntl } from "react-intl";
 import "ag-grid-community/styles/ag-grid.css";
 import "ag-grid-community/styles/ag-theme-alpine.css";
+import { AG_GRID_LOCALE_EN, AG_GRID_LOCALE_FR } from "@ag-grid-community/locale";
+import { useIntl } from "react-intl";
 import { useTheme, Box } from "@mui/material";
 import { mergeSx } from "../../utils/styles.js";
 import { CUSTOM_AGGRID_THEME, styles } from "./customAggrid.style.js";
-const onColumnResized = (params) => {
-  var _a;
-  const { column, finished } = params;
-  const colDefinedMinWidth = (_a = column == null ? void 0 : column.getColDef()) == null ? void 0 : _a.minWidth;
-  if (column && colDefinedMinWidth && finished) {
-    const newWidth = column == null ? void 0 : column.getActualWidth();
-    if (newWidth < colDefinedMinWidth) {
-      params.api.setColumnWidths([{ key: column, newWidth: colDefinedMinWidth }], finished, params.source);
-    }
-  }
-};
-const CustomAGGrid = React.forwardRef((props, ref) => {
-  const { shouldHidePinnedHeaderRightBorder = false, ...agGridReactProps } = props;
-  const theme = useTheme();
+import { LANG_ENGLISH, LANG_FRENCH } from "../../utils/langs.js";
+function useAgGridLocale(overrideLocales) {
   const intl = useIntl();
-  const GRID_PREFIX = "grid.";
-  const getLocaleText = useCallback(
-    (params) => {
-      const key = GRID_PREFIX + params.key;
-      return intl.formatMessage({
-        id: key,
-        defaultMessage: params.defaultValue
-      });
-    },
-    [intl]
-  );
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      sx: mergeSx(
-        styles.grid,
-        shouldHidePinnedHeaderRightBorder ? styles.noBorderRight : void 0
-      ),
-      className: `${theme.aggrid.theme} ${CUSTOM_AGGRID_THEME}`,
-      children: /* @__PURE__ */ jsx(
-        AgGridReact,
-        {
-          ref,
-          getLocaleText,
-          onColumnResized,
-          enableCellTextSelection: true,
-          theme: "legacy",
-          ...agGridReactProps
-        }
-      )
+  return useMemo(() => {
+    switch ((intl.locale || intl.defaultLocale).toLowerCase().substring(0, 2)) {
+      case LANG_FRENCH:
+        return {
+          ...AG_GRID_LOCALE_FR,
+          thousandSeparator: " ",
+          decimalSeparator: ",",
+          ...overrideLocales == null ? void 0 : overrideLocales[LANG_FRENCH]
+        };
+      case LANG_ENGLISH:
+      default:
+        return { ...AG_GRID_LOCALE_EN, ...overrideLocales == null ? void 0 : overrideLocales[LANG_ENGLISH] };
+    }
+  }, [intl.defaultLocale, intl.locale, overrideLocales]);
+}
+function onColumnResized({ api, column, finished, source }) {
+  if (column) {
+    const colDefinedMinWidth = column.getColDef().minWidth;
+    if (colDefinedMinWidth && finished && column.getActualWidth() < colDefinedMinWidth) {
+      api.setColumnWidths([{ key: column, newWidth: colDefinedMinWidth }], finished, source);
     }
-  );
-});
+  }
+}
+const CustomAGGrid = forwardRef(
+  ({ overrideLocales, sx, ...agGridReactProps }, ref) => {
+    const theme = useTheme();
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "div",
+        sx: mergeSx(styles.grid, sx),
+        className: `${theme.aggrid.theme} ${CUSTOM_AGGRID_THEME}`,
+        children: /* @__PURE__ */ jsx(
+          AgGridReact,
+          {
+            ref,
+            localeText: useAgGridLocale(overrideLocales),
+            onColumnResized,
+            enableCellTextSelection: true,
+            theme: "legacy",
+            ...agGridReactProps
+          }
+        )
+      }
+    );
+  }
+);
 export {
   CustomAGGrid
 };

package/dist/components/customAGGrid/customAggrid.style.d.ts

@@ -24,9 +24,4 @@ export declare const styles: {
             border: "none !important";
         };
     };
-    readonly noBorderRight: {
-        readonly '& .ag-pinned-left-header': {
-            readonly borderRight: "none";
-        };
-    };
 };

package/dist/components/customAGGrid/customAggrid.style.js

@@ -27,13 +27,7 @@ const styles = {
     "& .ag-cell-focus, .ag-cell": {
       border: "none !important"
     }
-  }),
-  noBorderRight: {
-    // hides right border for header of "Edit" column due to column being pinned
-    "& .ag-pinned-left-header": {
-      borderRight: "none"
-    }
-  }
+  })
 };
 export {
   CUSTOM_AGGRID_THEME,

package/dist/components/dialogs/elementSaveDialog/ElementSaveDialog.js

@@ -13,8 +13,6 @@ import "../../overflowableText/OverflowableText.js";
 import { DirectoryItemSelector } from "../../directoryItemSelector/DirectoryItemSelector.js";
 import { fetchDirectoryElementPath } from "../../../services/directory.js";
 import "../../inputs/reactHookForm/agGridTable/BottomRightButtons.js";
-import "ag-grid-community/styles/ag-grid.css";
-import "ag-grid-community/styles/ag-theme-alpine.css";
 import { FieldConstants } from "../../../utils/constants/fieldConstants.js";
 import "../../customAGGrid/customAggrid.js";
 import "ag-grid-community";

package/dist/components/filter/HeaderFilterForm.js

@@ -16,8 +16,6 @@ import "notistack";
 import "../overflowableText/OverflowableText.js";
 import "../treeViewFinder/TreeViewFinder.js";
 import "../inputs/reactHookForm/agGridTable/BottomRightButtons.js";
-import "ag-grid-community/styles/ag-grid.css";
-import "ag-grid-community/styles/ag-theme-alpine.css";
 import "../customAGGrid/customAggrid.js";
 import "ag-grid-community";
 import "react-papaparse";