@gridsuite/commons-ui 0.64.2 → 0.64.3

package/dist/components/CheckBoxList/check-box-list-item.d.ts

@@ -0,0 +1,4 @@
+import { CheckBoxListItemProps } from './check-box-list-type';
+
+export declare function CheckBoxListItem<T>({ item, sx, secondaryAction, getItemId, divider, isCheckboxClickableOnly, ...props }: CheckBoxListItemProps<T>): import("react/jsx-runtime").JSX.Element;
+export default CheckBoxListItem;

package/dist/components/CheckBoxList/check-box-list-item.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { ListItem } from "@mui/material";
+import { ClickableCheckBoxItem } from "./clickable-check-box-item.js";
+import { ClickableRowItem } from "./clickable-row-item.js";
+function CheckBoxListItem({
+  item,
+  sx,
+  secondaryAction,
+  getItemId,
+  divider,
+  isCheckboxClickableOnly,
+  ...props
+}) {
+  const [hover, setHover] = useState("");
+  return /* @__PURE__ */ jsx(
+    ListItem,
+    {
+      secondaryAction: secondaryAction == null ? void 0 : secondaryAction(item, hover),
+      sx: { minWidth: 0, ...sx == null ? void 0 : sx.checkboxList },
+      onMouseEnter: () => setHover(getItemId(item)),
+      onMouseLeave: () => setHover(""),
+      disablePadding: !isCheckboxClickableOnly,
+      disableGutters: true,
+      divider,
+      children: isCheckboxClickableOnly ? /* @__PURE__ */ jsx(ClickableCheckBoxItem, { ...props }) : /* @__PURE__ */ jsx(ClickableRowItem, { ...props })
+    }
+  );
+}
+export {
+  CheckBoxListItem,
+  CheckBoxListItem as default
+};

package/dist/components/CheckBoxList/check-box-list-items.d.ts

@@ -0,0 +1,4 @@
+import { CheckBoxListItemsProps } from './check-box-list-type';
+
+export declare function CheckBoxListItems<T>({ items, selectedItems, onSelectionChange, getItemId, sx, secondaryAction, enableSecondaryActionOnHover, addSelectAllCheckbox, selectAllCheckBoxLabel, getItemLabel, isDisabled, isDndDragAndDropActive, isDragDisable, divider, isCheckboxClickableOnly, ...props }: CheckBoxListItemsProps<T>): import("react/jsx-runtime").JSX.Element;
+export default CheckBoxListItems;

package/dist/components/CheckBoxList/check-box-list-items.js

@@ -0,0 +1,163 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Draggable } from "react-beautiful-dnd";
+import { useCallback, useMemo } from "react";
+import { List, ListItem, ListItemButton, ListItemIcon, Checkbox, ListItemText } from "@mui/material";
+import { FormattedMessage } from "react-intl";
+import { CheckBoxListItem } from "./check-box-list-item.js";
+import { OverflowableText } from "../OverflowableText/overflowable-text.js";
+import { DraggableCheckBoxListItem } from "./draggable-check-box-list-item.js";
+function CheckBoxListItems({
+  items,
+  selectedItems,
+  onSelectionChange,
+  getItemId,
+  sx,
+  secondaryAction,
+  enableSecondaryActionOnHover,
+  addSelectAllCheckbox,
+  selectAllCheckBoxLabel,
+  getItemLabel,
+  isDisabled,
+  isDndDragAndDropActive,
+  isDragDisable,
+  divider,
+  isCheckboxClickableOnly,
+  ...props
+}) {
+  const handleOnchange = useCallback(
+    (newValues) => {
+      if (onSelectionChange) {
+        onSelectionChange(newValues);
+      }
+    },
+    [onSelectionChange]
+  );
+  const toggleSelectAll = useCallback(() => {
+    if (selectedItems.length !== items.length) {
+      handleOnchange(items);
+    } else {
+      handleOnchange([]);
+    }
+  }, [selectedItems, handleOnchange, items]);
+  const toggleSelection = useCallback(
+    (elementToToggleId) => {
+      const element = items == null ? void 0 : items.find((v) => getItemId(v) === elementToToggleId);
+      if (element === void 0) {
+        return;
+      }
+      const elementSelected = selectedItems.find((v) => getItemId(v) === elementToToggleId);
+      const newValues = [...selectedItems];
+      if (elementSelected === void 0) {
+        newValues.push(element);
+        handleOnchange(newValues);
+      } else {
+        handleOnchange(newValues.filter((v) => getItemId(v) !== elementToToggleId));
+      }
+    },
+    [items, selectedItems, getItemId, handleOnchange]
+  );
+  const isChecked = useCallback(
+    (item) => selectedItems.map((v) => getItemId(v)).includes(getItemId(item)),
+    [selectedItems, getItemId]
+  );
+  const handleSecondaryAction = (item, hover) => {
+    if (!secondaryAction) {
+      return null;
+    }
+    if (!enableSecondaryActionOnHover) {
+      return secondaryAction(item);
+    }
+    if (hover === getItemId(item)) {
+      return secondaryAction(item);
+    }
+    return null;
+  };
+  const selectAllLabel = useMemo(
+    () => selectAllCheckBoxLabel ?? "multiple_selection_dialog/selectAll",
+    [selectAllCheckBoxLabel]
+  );
+  return /* @__PURE__ */ jsxs(List, { dense: true, disablePadding: true, ...props, children: [
+    addSelectAllCheckbox && /* @__PURE__ */ jsx(
+      ListItem,
+      {
+        disablePadding: true,
+        divider,
+        sx: {
+          "&:not(:last-child)": {
+            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 })
+            }
+          ) })
+        ] })
+      }
+    ),
+    items == null ? void 0 : items.map((item, index) => {
+      const label = getItemLabel ? getItemLabel(item) : getItemId(item);
+      const disabled = isDisabled ? isDisabled(item) : false;
+      const addDivider = divider && index < items.length - 1;
+      if (isDndDragAndDropActive) {
+        return /* @__PURE__ */ jsx(
+          Draggable,
+          {
+            draggableId: getItemId(item),
+            index,
+            isDragDisabled: isDragDisable,
+            children: (provided) => /* @__PURE__ */ jsx(
+              DraggableCheckBoxListItem,
+              {
+                item,
+                checked: isChecked(item),
+                label,
+                onClick: () => toggleSelection(getItemId(item)),
+                sx,
+                disabled,
+                getItemId,
+                secondaryAction: handleSecondaryAction,
+                isDragDisable,
+                provided,
+                divider: addDivider,
+                isCheckboxClickableOnly
+              },
+              getItemId(item)
+            )
+          },
+          getItemId(item)
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        CheckBoxListItem,
+        {
+          item,
+          checked: isChecked(item),
+          label,
+          onClick: () => toggleSelection(getItemId(item)),
+          disabled,
+          getItemId,
+          sx,
+          secondaryAction: handleSecondaryAction,
+          divider: addDivider,
+          isCheckboxClickableOnly
+        },
+        getItemId(item)
+      );
+    })
+  ] }, "droppable-checkbox-list");
+}
+export {
+  CheckBoxListItems,
+  CheckBoxListItems as default
+};

package/dist/components/CheckBoxList/check-box-list-type.d.ts

@@ -0,0 +1,59 @@
+import { SxProps } from '@mui/system';
+import { DraggableProvided, DragStart, DropResult } from 'react-beautiful-dnd';
+import { default as React } from 'react';
+
+export interface CheckBoxListItemSxProps {
+    checkBoxIcon?: SxProps;
+    label?: SxProps;
+    checkboxList?: SxProps;
+    checkboxButton?: SxProps;
+    checkbox?: SxProps;
+}
+export interface CheckBoxListItemProps<T> {
+    item: T;
+    sx?: CheckBoxListItemSxProps;
+    label: string;
+    onClick: () => void;
+    secondaryAction?: (item: T, hover: string) => React.ReactElement | null;
+    getItemId: (item: T) => string;
+    disabled?: boolean;
+    divider?: boolean;
+    checked: boolean;
+    isCheckboxClickableOnly?: boolean;
+}
+export interface DraggableCheckBoxListItemProps<T> extends CheckBoxListItemProps<T> {
+    isDragDisable?: boolean;
+    provided: DraggableProvided;
+}
+export interface CheckBoxListItemsProps<T> {
+    items: T[];
+    selectedItems: T[];
+    onSelectionChange?: (selectedItems: T[]) => void;
+    getItemId: (item: T) => string;
+    getItemLabel?: (item: T) => string;
+    secondaryAction?: (item: T) => React.ReactElement | null;
+    enableSecondaryActionOnHover?: boolean;
+    isDisabled?: (item: T) => boolean;
+    addSelectAllCheckbox?: boolean;
+    selectAllCheckBoxLabel?: string;
+    sx?: CheckBoxListItemSxProps;
+    isDndDragAndDropActive?: boolean;
+    isDragDisable?: boolean;
+    divider?: boolean;
+    isCheckboxClickableOnly?: boolean;
+}
+export interface CheckboxListProps<T> extends CheckBoxListItemsProps<T> {
+    onDragStart?: (dragStart: DragStart) => void;
+    onDragEnd?: (dropResult: DropResult) => void;
+}
+export interface ClickableItemProps {
+    sx?: CheckBoxListItemSxProps;
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+    checked: boolean;
+}
+export interface DraggableClickableItemProps extends ClickableItemProps {
+    provided: DraggableProvided;
+    isHighlighted: boolean;
+}

package/dist/components/CheckBoxList/check-box-list-type.js

@@ -0,0 +1 @@
+

package/dist/components/CheckBoxList/check-box-list.d.ts

@@ -0,0 +1,4 @@
+import { CheckboxListProps } from './check-box-list-type';
+
+export declare function CheckboxList<T>({ isDndDragAndDropActive, onDragStart, onDragEnd, isDragDisable, ...props }: CheckboxListProps<T>): import("react/jsx-runtime").JSX.Element;
+export default CheckboxList;

package/dist/components/CheckBoxList/check-box-list.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box } from "@mui/material";
+import { DragDropContext, Droppable } from "react-beautiful-dnd";
+import { CheckBoxListItems } from "./check-box-list-items.js";
+function CheckboxList({
+  isDndDragAndDropActive = false,
+  onDragStart,
+  onDragEnd,
+  isDragDisable = false,
+  ...props
+}) {
+  const [isDragging, setIsDragging] = useState(false);
+  const checkBoxField = /* @__PURE__ */ jsx(
+    CheckBoxListItems,
+    {
+      isDndDragAndDropActive,
+      isDragDisable: isDragDisable || isDragging,
+      ...props
+    }
+  );
+  return isDndDragAndDropActive ? /* @__PURE__ */ jsx(
+    DragDropContext,
+    {
+      onDragEnd: (dropResult) => {
+        if (onDragEnd) {
+          onDragEnd(dropResult);
+        }
+        setIsDragging(false);
+      },
+      onDragStart: (dragStart) => {
+        if (onDragStart) {
+          onDragStart(dragStart);
+        }
+        setIsDragging(true);
+      },
+      children: /* @__PURE__ */ jsx(Droppable, { droppableId: "droppable-checkbox-list", isDropDisabled: isDragDisable, children: (provided) => /* @__PURE__ */ jsxs(Box, { ...provided.droppableProps, ref: provided.innerRef, children: [
+        checkBoxField,
+        provided.placeholder
+      ] }) })
+    }
+  ) : checkBoxField;
+}
+export {
+  CheckboxList,
+  CheckboxList as default
+};

package/dist/components/CheckBoxList/clickable-check-box-item.d.ts

@@ -0,0 +1,4 @@
+import { ClickableItemProps } from './check-box-list-type';
+
+export declare function ClickableCheckBoxItem({ sx, label, ...props }: ClickableItemProps): import("react/jsx-runtime").JSX.Element;
+export default ClickableCheckBoxItem;

package/dist/components/CheckBoxList/clickable-check-box-item.js

@@ -0,0 +1,13 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { ListItemIcon, Checkbox, ListItemText } from "@mui/material";
+import { OverflowableText } from "../OverflowableText/overflowable-text.js";
+function ClickableCheckBoxItem({ sx, label, ...props }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 0, ...sx == null ? void 0 : sx.checkBoxIcon }, children: /* @__PURE__ */ jsx(Checkbox, { disableRipple: true, sx: { paddingLeft: 0, ...sx == null ? void 0 : sx.checkbox }, ...props }) }),
+    /* @__PURE__ */ jsx(ListItemText, { sx: { display: "flex" }, disableTypography: true, children: /* @__PURE__ */ jsx(OverflowableText, { sx: sx == null ? void 0 : sx.label, text: label }) })
+  ] });
+}
+export {
+  ClickableCheckBoxItem,
+  ClickableCheckBoxItem as default
+};

package/dist/components/CheckBoxList/clickable-row-item.d.ts

@@ -0,0 +1,4 @@
+import { ClickableItemProps } from './check-box-list-type';
+
+export declare function ClickableRowItem({ sx, disabled, label, onClick, ...props }: ClickableItemProps): import("react/jsx-runtime").JSX.Element;
+export default ClickableRowItem;

package/dist/components/CheckBoxList/clickable-row-item.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { ListItemButton, ListItemIcon, Checkbox, ListItemText } from "@mui/material";
+import { OverflowableText } from "../OverflowableText/overflowable-text.js";
+function ClickableRowItem({ sx, disabled, label, onClick, ...props }) {
+  return /* @__PURE__ */ jsxs(ListItemButton, { sx: { paddingLeft: 0, ...sx == null ? void 0 : sx.checkboxButton }, disabled, onClick, children: [
+    /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 0, ...sx == null ? void 0 : sx.checkBoxIcon }, children: /* @__PURE__ */ jsx(Checkbox, { disableRipple: true, sx: { paddingLeft: 0, ...sx == null ? void 0 : sx.checkbox }, ...props }) }),
+    /* @__PURE__ */ jsx(
+      ListItemText,
+      {
+        sx: {
+          display: "flex"
+        },
+        disableTypography: true,
+        children: /* @__PURE__ */ jsx(OverflowableText, { sx: sx == null ? void 0 : sx.label, text: label })
+      }
+    )
+  ] });
+}
+export {
+  ClickableRowItem,
+  ClickableRowItem as default
+};

package/dist/components/CheckBoxList/draggable-check-box-list-item.d.ts

@@ -0,0 +1,4 @@
+import { DraggableCheckBoxListItemProps } from './check-box-list-type';
+
+export declare function DraggableCheckBoxListItem<T>({ item, sx, secondaryAction, getItemId, isDragDisable, provided, divider, isCheckboxClickableOnly, ...props }: DraggableCheckBoxListItemProps<T>): import("react/jsx-runtime").JSX.Element;
+export default DraggableCheckBoxListItem;

package/dist/components/CheckBoxList/draggable-check-box-list-item.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { ListItem } from "@mui/material";
+import { DraggableClickableCheckBoxItem } from "./draggable-clickable-check-box-item.js";
+import { DraggableClickableRowItem } from "./draggable-clickable-row-item.js";
+function DraggableCheckBoxListItem({
+  item,
+  sx,
+  secondaryAction,
+  getItemId,
+  isDragDisable,
+  provided,
+  divider,
+  isCheckboxClickableOnly,
+  ...props
+}) {
+  const [hover, setHover] = useState("");
+  return /* @__PURE__ */ jsx(
+    ListItem,
+    {
+      secondaryAction: secondaryAction == null ? void 0 : secondaryAction(item, hover),
+      sx: { minWidth: 0, ...sx == null ? void 0 : sx.checkboxList },
+      onMouseEnter: () => setHover(getItemId(item)),
+      onMouseLeave: () => setHover(""),
+      disablePadding: !isCheckboxClickableOnly,
+      disableGutters: true,
+      divider,
+      ref: provided.innerRef,
+      ...provided.draggableProps,
+      children: isCheckboxClickableOnly ? /* @__PURE__ */ jsx(
+        DraggableClickableCheckBoxItem,
+        {
+          provided,
+          isHighlighted: hover === getItemId(item) && !isDragDisable,
+          ...props
+        }
+      ) : /* @__PURE__ */ jsx(
+        DraggableClickableRowItem,
+        {
+          provided,
+          isHighlighted: hover === getItemId(item) && !isDragDisable,
+          ...props
+        }
+      )
+    }
+  );
+}
+export {
+  DraggableCheckBoxListItem,
+  DraggableCheckBoxListItem as default
+};

package/dist/components/CheckBoxList/draggable-clickable-check-box-item.d.ts

@@ -0,0 +1,4 @@
+import { DraggableClickableItemProps } from './check-box-list-type';
+
+export declare function DraggableClickableCheckBoxItem({ sx, disabled, provided, isHighlighted, label, ...props }: DraggableClickableItemProps): import("react/jsx-runtime").JSX.Element;
+export default DraggableClickableCheckBoxItem;

package/dist/components/CheckBoxList/draggable-clickable-check-box-item.js

@@ -0,0 +1,51 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { IconButton, ListItemIcon, Checkbox, ListItemText } from "@mui/material";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import { OverflowableText } from "../OverflowableText/overflowable-text.js";
+const styles = {
+  dragIcon: (theme) => ({
+    padding: "unset",
+    border: theme.spacing(0),
+    borderRadius: theme.spacing(0),
+    zIndex: 90
+  })
+};
+function DraggableClickableCheckBoxItem({
+  sx,
+  disabled,
+  provided,
+  isHighlighted,
+  label,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        ...provided.dragHandleProps,
+        size: "small",
+        sx: {
+          opacity: isHighlighted ? "1" : "0",
+          padding: "unset",
+          ...styles.dragIcon
+        },
+        children: /* @__PURE__ */ jsx(DragIndicatorIcon, { spacing: 0 })
+      }
+    ),
+    /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 0, ...sx == null ? void 0 : sx.checkBoxIcon }, children: /* @__PURE__ */ jsx(Checkbox, { disableRipple: true, sx: { paddingLeft: 0, ...sx == null ? void 0 : sx.checkbox }, ...props }) }),
+    /* @__PURE__ */ jsx(
+      ListItemText,
+      {
+        sx: {
+          display: "flex"
+        },
+        disableTypography: true,
+        children: /* @__PURE__ */ jsx(OverflowableText, { sx: sx == null ? void 0 : sx.label, text: label })
+      }
+    )
+  ] });
+}
+export {
+  DraggableClickableCheckBoxItem,
+  DraggableClickableCheckBoxItem as default
+};

package/dist/components/CheckBoxList/draggable-clickable-row-item.d.ts

@@ -0,0 +1,4 @@
+import { DraggableClickableItemProps } from './check-box-list-type';
+
+export declare function DraggableClickableRowItem({ sx, disabled, onClick, provided, isHighlighted, label, ...props }: DraggableClickableItemProps): import("react/jsx-runtime").JSX.Element;
+export default DraggableClickableRowItem;

package/dist/components/CheckBoxList/draggable-clickable-row-item.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { ListItemButton, IconButton, ListItemIcon, Checkbox, ListItemText } from "@mui/material";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import { OverflowableText } from "../OverflowableText/overflowable-text.js";
+const styles = {
+  dragIcon: (theme) => ({
+    padding: "unset",
+    border: theme.spacing(0),
+    borderRadius: theme.spacing(0),
+    zIndex: 90
+  })
+};
+function DraggableClickableRowItem({
+  sx,
+  disabled,
+  onClick,
+  provided,
+  isHighlighted,
+  label,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(ListItemButton, { sx: { paddingLeft: 0, ...sx == null ? void 0 : sx.checkboxButton }, disabled, onClick, children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        ...provided.dragHandleProps,
+        size: "small",
+        sx: {
+          opacity: isHighlighted ? "1" : "0",
+          padding: "unset",
+          ...styles.dragIcon
+        },
+        children: /* @__PURE__ */ jsx(DragIndicatorIcon, { spacing: 0 })
+      }
+    ),
+    /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 0, ...sx == null ? void 0 : sx.checkBoxIcon }, children: /* @__PURE__ */ jsx(Checkbox, { disableRipple: true, sx: { paddingLeft: 0, ...sx == null ? void 0 : sx.checkbox }, ...props }) }),
+    /* @__PURE__ */ jsx(
+      ListItemText,
+      {
+        sx: {
+          display: "flex"
+        },
+        disableTypography: true,
+        children: /* @__PURE__ */ jsx(OverflowableText, { sx: sx == null ? void 0 : sx.label, text: label })
+      }
+    )
+  ] });
+}
+export {
+  DraggableClickableRowItem,
+  DraggableClickableRowItem as default
+};

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

@@ -0,0 +1,3 @@
+import { default as defaultCheckboxList } from './check-box-list';
+
+export default defaultCheckboxList;

package/dist/components/CheckBoxList/index.js

@@ -0,0 +1,4 @@
+import { CheckboxList } from "./check-box-list.js";
+export {
+  CheckboxList as default
+};

package/dist/components/FlatParameters/FlatParameters.js

@@ -247,11 +247,13 @@ function FlatParameters({
               /* @__PURE__ */ jsx(
                 MultipleSelectionDialog,
                 {
-                  options: allOptions,
+                  items: allOptions,
                   titleId: getSelectionDialogName(param.name),
                   open: openSelector,
-                  getOptionLabel: (option) => getTranslatedValue(param.name, option),
-                  selectedOptions: fieldValue,
+                  getItemLabel: (option) => getTranslatedValue(param.name, option),
+                  getItemId: (o) => o,
+                  selectedItems: fieldValue,
+                  addSelectAllCheckbox: true,
                   handleClose: () => setOpenSelector(false),
                   handleValidate: (selectedOptions) => {
                     onFieldChange(selectedOptions, param);

package/dist/components/MultipleSelectionDialog/MultipleSelectionDialog.d.ts

@@ -1,17 +1,10 @@
-/**
- * Copyright (c) 2023, RTE (http://www.rte-france.com)
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- */
-export interface MultipleSelectionDialogProps {
-    options: string[];
-    selectedOptions: string[];
+import { CheckboxListProps } from '../CheckBoxList/check-box-list-type';
+
+export interface MultipleSelectionDialogProps<T> extends CheckboxListProps<T> {
     open: boolean;
-    getOptionLabel: (option: string) => string;
     handleClose: () => void;
-    handleValidate: (ids: string[]) => void;
+    handleValidate: (options: T[]) => void;
     titleId: string;
 }
-declare function MultipleSelectionDialog({ options, selectedOptions, open, getOptionLabel, handleClose, handleValidate, titleId, }: MultipleSelectionDialogProps): import("react/jsx-runtime").JSX.Element;
+declare function MultipleSelectionDialog<T>({ open, handleClose, handleValidate, selectedItems, titleId, ...props }: MultipleSelectionDialogProps<T>): import("react/jsx-runtime").JSX.Element;
 export default MultipleSelectionDialog;

package/dist/components/MultipleSelectionDialog/MultipleSelectionDialog.js

@@ -1,67 +1,27 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Dialog, DialogTitle, DialogContent, Grid, FormControlLabel, Checkbox, List, DialogActions, Button } from "@mui/material";
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { useState } from "react";
+import { CheckboxList } from "../CheckBoxList/check-box-list.js";
 function MultipleSelectionDialog({
-  options,
-  selectedOptions,
   open,
-  getOptionLabel,
   handleClose,
   handleValidate,
-  titleId
+  selectedItems,
+  titleId,
+  ...props
 }) {
-  const [selectedIds, setSelectedIds] = useState(selectedOptions ?? []);
-  const handleSelectAll = () => {
-    if (selectedIds.length !== options.length) {
-      setSelectedIds(options);
-    } else {
-      setSelectedIds([]);
-    }
-  };
-  const handleOptionSelection = (option) => {
-    setSelectedIds((oldValues) => {
-      if (oldValues.includes(option)) {
-        return oldValues.filter((o) => o !== option);
-      }
-      return [...oldValues, option];
-    });
-  };
-  return /* @__PURE__ */ jsxs(Dialog, { open, children: [
+  const [selectedIds, setSelectedIds] = useState(selectedItems ?? []);
+  return /* @__PURE__ */ jsxs(Dialog, { open, fullWidth: true, children: [
     /* @__PURE__ */ jsx(DialogTitle, { children: titleId }),
-    /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, flexDirection: "column", children: [
-      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
-        FormControlLabel,
-        {
-          label: /* @__PURE__ */ jsx(FormattedMessage, { id: "multiple_selection_dialog/selectAll" }),
-          control: /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              checked: selectedIds.length === options.length,
-              indeterminate: !!selectedIds.length && selectedIds.length !== options.length,
-              onChange: handleSelectAll
-            }
-          )
-        }
-      ) }),
-      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(List, { children: options.map((option) => {
-        const optionId = option;
-        const label = getOptionLabel(option);
-        return /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
-          FormControlLabel,
-          {
-            label,
-            control: /* @__PURE__ */ jsx(
-              Checkbox,
-              {
-                checked: selectedIds.includes(optionId),
-                onChange: () => handleOptionSelection(optionId)
-              }
-            )
-          }
-        ) }, optionId);
-      }) }) })
-    ] }) }),
+    /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(
+      CheckboxList,
+      {
+        selectedItems: selectedIds,
+        onSelectionChange: (values) => setSelectedIds(values),
+        ...props
+      }
+    ) }),
     /* @__PURE__ */ jsxs(DialogActions, { children: [
       /* @__PURE__ */ jsx(Button, { onClick: () => handleClose(), children: /* @__PURE__ */ jsx(FormattedMessage, { id: "multiple_selection_dialog/cancel" }) }),
       /* @__PURE__ */ jsx(Button, { onClick: () => handleValidate(selectedIds), children: /* @__PURE__ */ jsx(FormattedMessage, { id: "multiple_selection_dialog/validate" }) })

package/dist/index.d.ts

@@ -24,6 +24,7 @@ export type { OverflowableTextProps } from './components/OverflowableText';
 export { ElementSearchDialog } from './components/ElementSearchDialog';
 export type { ElementSearchDialogProps } from './components/ElementSearchDialog';
 export { default as FlatParameters } from './components/FlatParameters';
+export { default as CheckboxList } from './components/CheckBoxList/check-box-list';
 export type { FlatParametersProps, Parameter } from './components/FlatParameters';
 export { default as ExpandableGroup } from './components/ExpandableGroup';
 export type { ExpandableGroupProps } from './components/ExpandableGroup';

package/dist/index.js

@@ -17,6 +17,7 @@ import { default as default10 } from "./components/ElementSearchDialog/tag-rende
 import { ElementSearchInput } from "./components/ElementSearchDialog/element-search-input.js";
 import { default as default11 } from "./components/ElementSearchDialog/use-element-search.js";
 import { FlatParameters } from "./components/FlatParameters/FlatParameters.js";
+import { CheckboxList } from "./components/CheckBoxList/check-box-list.js";
 import { default as default12 } from "./components/ExpandableGroup/expandable-group.js";
 import { default as default13 } from "./components/MultipleSelectionDialog/MultipleSelectionDialog.js";
 import { default as default14 } from "./components/dialogs/custom-mui-dialog.js";
@@ -137,6 +138,7 @@ export {
   default53 as CardErrorBoundary,
   ChangeWays,
   default68 as CheckboxInput,
+  CheckboxList,
   default88 as CountriesInput,
   default84 as CriteriaBasedFilterEditionDialog,
   default18 as CriteriaBasedForm,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.64.2",
+    "version": "0.64.3",
     "description": "common react components for gridsuite applications",
     "engines": {
         "npm": ">=9",
@@ -37,6 +37,7 @@
         "memoize-one": "^6.0.0",
         "oidc-client": "^1.11.5",
         "prop-types": "^15.8.1",
+        "react-beautiful-dnd": "^13.1.1",
         "react-csv-downloader": "^3.1.0",
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
@@ -89,6 +90,7 @@
         "@types/node": "^18.19.31",
         "@types/prop-types": "^15.7.12",
         "@types/react": "^18.2.75",
+        "@types/react-beautiful-dnd": "^13.1.8",
         "@types/react-dom": "^18.2.24",
         "@types/react-resizable": "^3.0.7",
         "@types/react-virtualized": "^9.21.29",