@gridsuite/commons-ui 0.213.0 → 0.215.0

package/dist/components/ui/directoryItemSelector/DirectoryItemSelector.js

@@ -0,0 +1,305 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import "../../../utils/conversionUtils.js";
+import { snackWithFallback } from "../../../utils/error.js";
+import { arraysContainIdenticalStrings } from "../../../utils/functions.js";
+import { ElementType } from "../../../utils/types/elementType.js";
+import "../../../utils/types/equipmentType.js";
+import { fetchRootFolders, fetchDirectoryContent } from "../../../services/directory.js";
+import { getFileIcon } from "../../../utils/mapper/getFileIcon.js";
+import "../../../utils/yupConfig.js";
+import { TreeViewFinder } from "../treeViewFinder/TreeViewFinder.js";
+import "react-intl";
+import { fetchElementsInfos } from "../../../services/explore.js";
+import "@mui/material";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import { useSnackMessage } from "../../../hooks/useSnackMessage.js";
+import { getExpansionPathsForSelected, fetchChildrenForExpandedNodes, initializeFromLastSelected, saveLastSelectedDirectoryFromNode } from "./utils.js";
+const styles = {
+  icon: (theme) => ({
+    marginRight: theme.spacing(1),
+    width: "18px",
+    height: "18px"
+  })
+};
+function sameRights(sourceAccessRights, accessRightsToCompare) {
+  if (!sourceAccessRights && !accessRightsToCompare) {
+    return true;
+  }
+  if (!sourceAccessRights || !accessRightsToCompare) {
+    return false;
+  }
+  return sourceAccessRights.isPrivate === accessRightsToCompare.isPrivate;
+}
+function flattenDownNodes(n, cef) {
+  const subs = cef(n);
+  if (subs.length === 0) {
+    return [n];
+  }
+  return Array.prototype.concat([n], ...subs.map((sn) => flattenDownNodes(sn, cef)));
+}
+function refreshedUpNodes(nodeMap, newElement) {
+  if (!newElement?.elementUuid) {
+    return [];
+  }
+  if (newElement.parentUuid === null) {
+    return [newElement];
+  }
+  const parent = nodeMap[newElement.parentUuid];
+  const nextChildren = parent.children.map((c) => c.elementUuid === newElement.elementUuid ? newElement : c);
+  const nextParent = { ...parent, children: nextChildren };
+  return [newElement, ...refreshedUpNodes(nodeMap, nextParent)];
+}
+function updatedTree(prevRoots, prevMap, nodeId, children) {
+  const nextChildren = children.sort((a, b) => a.elementName.localeCompare(b.elementName)).map((n) => {
+    const pn = prevMap[n.elementUuid];
+    if (!pn) {
+      return { ...n, children: [], parentUuid: nodeId };
+    }
+    if (n.elementName === pn.elementName && sameRights(n.accessRights, pn.accessRights) && n.subdirectoriesCount === pn.subdirectoriesCount && nodeId === pn.parentUuid) {
+      return pn;
+    }
+    if (pn.parentUuid !== nodeId) {
+      console.warn(`reparent ${pn.parentUuid} -> ${nodeId}`);
+    }
+    return {
+      ...pn,
+      elementName: n.elementName,
+      accessRights: n.accessRights,
+      subdirectoriesCount: n.subdirectoriesCount,
+      parentUuid: nodeId
+    };
+  });
+  const prevChildren = nodeId ? prevMap[nodeId]?.children : prevRoots;
+  if (prevChildren?.length === nextChildren.length && prevChildren.every((e, i) => e === nextChildren[i])) {
+    return [prevRoots, prevMap];
+  }
+  const nextUuids = new Set(children ? children.map((n) => n.elementUuid) : []);
+  const prevUuids = prevChildren ? prevChildren.map((n) => n.elementUuid) : [];
+  const mayNodeId = nodeId ? [nodeId] : [];
+  const nonCopyUuids = /* @__PURE__ */ new Set([
+    ...nextUuids,
+    ...mayNodeId,
+    ...Array.prototype.concat(
+      ...prevUuids.filter((u) => !nextUuids.has(u)).map((u) => flattenDownNodes(prevMap[u], (n) => n.children).map((n) => n.elementUuid))
+    )
+  ]);
+  const prevNode = nodeId ? prevMap[nodeId] : {};
+  const nextNode = {
+    elementUuid: nodeId,
+    parentUuid: null,
+    ...prevNode,
+    children: nextChildren,
+    subdirectoriesCount: nextChildren.length
+  };
+  const nextMap = Object.fromEntries([
+    ...Object.entries(prevMap).filter(([k]) => !nonCopyUuids.has(k)),
+    ...nextChildren.map((n) => [n.elementUuid, n]),
+    ...refreshedUpNodes(prevMap, nextNode).map((n) => [n.elementUuid, n])
+  ]);
+  const nextRoots = nodeId === null ? nextChildren : prevRoots.map((r) => nextMap[r.elementUuid]);
+  return [nextRoots, nextMap];
+}
+function sortHandlingDirectories(a, b) {
+  if (a.children && !b.children) {
+    return -1;
+  }
+  if (b.children && !a.children) {
+    return 1;
+  }
+  return a.name.localeCompare(b.name);
+}
+function DirectoryItemSelector({
+  open,
+  types,
+  equipmentTypes,
+  itemFilter,
+  expanded,
+  selected,
+  onClose,
+  ...otherTreeViewFinderProps
+}) {
+  const [data, setData] = useState([]);
+  const [lastFetchedEquipmentTypes, setLastFetchedEquipmentTypes] = useState();
+  const [rootDirectories, setRootDirectories] = useState([]);
+  const [isRootsLoaded, setIsRootsLoaded] = useState(false);
+  const [autoExpandedNodes, setAutoExpandedNodes] = useState([]);
+  const nodeMap = useRef({});
+  const dataRef = useRef([]);
+  dataRef.current = data;
+  const rootsRef = useRef([]);
+  rootsRef.current = rootDirectories;
+  const { snackError } = useSnackMessage();
+  const contentFilter = useCallback(() => /* @__PURE__ */ new Set([ElementType.DIRECTORY, ...types]), [types]);
+  const convertChildren = useCallback((children) => {
+    return children.map((e) => {
+      return {
+        id: e.elementUuid,
+        name: e.elementName,
+        type: e.type,
+        description: e.description,
+        specificMetadata: e.specificMetadata,
+        icon: getFileIcon(e.type, styles.icon),
+        children: e.type === ElementType.DIRECTORY ? convertChildren(e.children) : void 0,
+        childrenCount: e.type === ElementType.DIRECTORY ? e.subdirectoriesCount : void 0
+      };
+    });
+  }, []);
+  const convertRoots = useCallback(
+    (newRoots) => {
+      return newRoots.map((e) => {
+        return {
+          id: e.elementUuid,
+          name: e.elementName,
+          description: e.description,
+          icon: getFileIcon(e.type, styles.icon),
+          children: e.type === ElementType.DIRECTORY ? convertChildren(nodeMap.current[e.elementUuid].children) : void 0,
+          childrenCount: e.type === ElementType.DIRECTORY ? e.subdirectoriesCount : void 0
+        };
+      });
+    },
+    [convertChildren]
+  );
+  const addToDirectory = useCallback(
+    (nodeId, content) => {
+      const [nrs, mdr] = updatedTree(rootsRef.current, nodeMap.current, nodeId, content);
+      setRootDirectories(nrs);
+      nodeMap.current = mdr;
+      setData(convertRoots(nrs));
+    },
+    [convertRoots]
+  );
+  const updateRootDirectories = useCallback(() => {
+    setIsRootsLoaded(false);
+    fetchRootFolders(types).then((newData) => {
+      const [nrs, mdr] = updatedTree(rootsRef.current, nodeMap.current, null, newData);
+      setRootDirectories(nrs);
+      nodeMap.current = mdr;
+      setData(convertRoots(nrs));
+    }).catch((error) => {
+      snackWithFallback(snackError, error, { headerId: "DirectoryItemSelector" });
+    }).finally(() => {
+      setIsRootsLoaded(true);
+    });
+  }, [convertRoots, types, snackError]);
+  const fetchDirectoryChildren = useCallback(
+    (nodeId) => {
+      const typeList = types.includes(ElementType.DIRECTORY) ? [] : types;
+      return fetchDirectoryContent(nodeId, typeList).then((children) => {
+        const childrenMatchedTypes = children.filter(
+          (item) => contentFilter().has(item.type)
+        );
+        if (childrenMatchedTypes.length > 0 && equipmentTypes && equipmentTypes.length > 0) {
+          return fetchElementsInfos(
+            childrenMatchedTypes.map((e) => e.elementUuid),
+            types,
+            equipmentTypes
+          ).then((childrenWithMetadata) => {
+            const filteredChildren = itemFilter ? childrenWithMetadata.filter((val) => {
+              if (val.type === ElementType.DIRECTORY) {
+                return true;
+              }
+              return itemFilter(val);
+            }) : childrenWithMetadata;
+            addToDirectory(nodeId, filteredChildren);
+          });
+        }
+        addToDirectory(nodeId, childrenMatchedTypes);
+        return Promise.resolve();
+      }).catch((error) => {
+        console.warn(`Could not update subs (and content) of '${nodeId}' : ${error.message}`);
+      });
+    },
+    [types, equipmentTypes, itemFilter, contentFilter, addToDirectory]
+  );
+  const fetchNodeChildrenIfNeeded = useCallback(
+    async (nodeId) => {
+      const node = nodeMap.current[nodeId];
+      if (node && (!node.children || node.children.length === 0 || !arraysContainIdenticalStrings(equipmentTypes, lastFetchedEquipmentTypes)) && node.type === ElementType.DIRECTORY) {
+        setLastFetchedEquipmentTypes(equipmentTypes);
+        await fetchDirectoryChildren(nodeId);
+      }
+    },
+    [equipmentTypes, lastFetchedEquipmentTypes, setLastFetchedEquipmentTypes, fetchDirectoryChildren]
+  );
+  const handleSelectedExpansion = useCallback(async () => {
+    if (!selected || selected.length === 0) {
+      return false;
+    }
+    const expandedArray = await getExpansionPathsForSelected(selected, expanded);
+    setAutoExpandedNodes(expandedArray);
+    await fetchChildrenForExpandedNodes(expandedArray, fetchNodeChildrenIfNeeded);
+    return true;
+  }, [selected, expanded, fetchNodeChildrenIfNeeded]);
+  const handleProvidedExpansion = useCallback(async () => {
+    if (!expanded || expanded.length === 0) {
+      return false;
+    }
+    setAutoExpandedNodes(expanded);
+    await fetchChildrenForExpandedNodes(expanded, fetchNodeChildrenIfNeeded);
+    return true;
+  }, [expanded, fetchNodeChildrenIfNeeded]);
+  const handleLastSelectedExpansion = useCallback(async () => {
+    const expandPath = await initializeFromLastSelected();
+    if (!expandPath) {
+      return false;
+    }
+    setAutoExpandedNodes(expandPath);
+    await fetchChildrenForExpandedNodes(expandPath, fetchNodeChildrenIfNeeded);
+    return true;
+  }, [fetchNodeChildrenIfNeeded]);
+  const initializeExpansion = useCallback(async () => {
+    const selectedSuccess = await handleSelectedExpansion();
+    if (selectedSuccess) {
+      return;
+    }
+    const expandedSuccess = await handleProvidedExpansion();
+    if (expandedSuccess) {
+      return;
+    }
+    await handleLastSelectedExpansion();
+  }, [handleSelectedExpansion, handleProvidedExpansion, handleLastSelectedExpansion]);
+  useEffect(() => {
+    if (!open) {
+      setIsRootsLoaded(false);
+      setAutoExpandedNodes([]);
+      return;
+    }
+    if (!isRootsLoaded) {
+      updateRootDirectories();
+      return;
+    }
+    initializeExpansion();
+  }, [open, isRootsLoaded, updateRootDirectories, initializeExpansion]);
+  const handleClose = useCallback(
+    (nodes) => {
+      if (nodes && nodes.length > 0) {
+        const lastSelectedNode = nodes[0];
+        saveLastSelectedDirectoryFromNode(lastSelectedNode);
+      }
+      setAutoExpandedNodes([]);
+      onClose(nodes);
+    },
+    [onClose]
+  );
+  return /* @__PURE__ */ jsx(
+    TreeViewFinder,
+    {
+      onTreeBrowse: fetchDirectoryChildren,
+      sortMethod: sortHandlingDirectories,
+      multiSelect: true,
+      open,
+      expanded: autoExpandedNodes,
+      onlyLeaves: true,
+      selected,
+      onClose: handleClose,
+      ...otherTreeViewFinderProps,
+      data
+    }
+  );
+}
+export {
+  DirectoryItemSelector
+};

package/dist/components/ui/directoryItemSelector/utils.d.ts

@@ -0,0 +1,55 @@
+import { UUID } from 'node:crypto';
+import { ElementAttributes } from '../../../utils';
+/**
+ * Gets the last selected directory ID from localStorage with proper null handling
+ * @returns UUID or null if no valid directory ID is stored
+ */
+export declare function getLastSelectedDirectoryId(): UUID | null;
+/**
+ * Clears the last selected directory from both localStorage and backend
+ */
+export declare function clearLastSelectedDirectory(): Promise<void>;
+/**
+ * Saves a directory ID as the last selected directory
+ * @param directoryId The directory UUID to save
+ */
+export declare function saveLastSelectedDirectory(directoryId: UUID): Promise<void>;
+/**
+ * Fetches directory path with error handling and validation
+ * @param directoryId The directory UUID to fetch path for
+ * @returns Promise resolving to path array or null if failed
+ */
+export declare function fetchDirectoryPathSafe(directoryId: UUID): Promise<ElementAttributes[] | null>;
+/**
+ * Initializes directory expansion from last selected directory
+ * @returns Promise resolving to expansion path or null if failed
+ */
+export declare function initializeFromLastSelected(): Promise<UUID[] | null>;
+/**
+ * Fetches expansion paths for multiple selected items, collecting unique parent directories
+ * (excluding the selected items themselves) and sorting them by their minimum depth across
+ * all paths. This ensures parents appear before their descendants in the returned array,
+ * which is crucial for sequential fetching to avoid loading children before parents are
+ * fully populated in the node map.
+ * @param selectedIds Array of selected item UUIDs
+ * @param expanded Optional existing expanded nodes
+ * @returns Promise resolving to combined expansion array sorted by depth
+ */
+export declare function getExpansionPathsForSelected(selectedIds: UUID[], expanded?: UUID[]): Promise<UUID[]>;
+/**
+ * Saves the last selected directory from a TreeViewFinderNode
+ * @param node The selected node
+ */
+export declare function saveLastSelectedDirectoryFromNode(node: {
+    id: UUID;
+    type?: string;
+    parents?: Array<{
+        id: UUID;
+    }>;
+}): Promise<void>;
+/**
+ * Fetches children for expanded nodes sequentially to ensure parent nodes are loaded before children
+ * @param expandedNodes Array of node UUIDs to fetch children for
+ * @param fetchChildrenCallback Function to fetch children for a single node
+ */
+export declare function fetchChildrenForExpandedNodes(expandedNodes: UUID[], fetchChildrenCallback: (nodeId: UUID) => Promise<void>): Promise<void>;

package/dist/components/ui/directoryItemSelector/utils.js

@@ -0,0 +1,102 @@
+import { LAST_SELECTED_DIRECTORY, COMMON_APP_NAME } from "../../../utils/constants/configConstants.js";
+import "../../../utils/conversionUtils.js";
+import { ElementType } from "../../../utils/types/elementType.js";
+import "../../../utils/types/equipmentType.js";
+import { fetchDirectoryElementPath } from "../../../services/directory.js";
+import "react/jsx-runtime";
+import "@mui/icons-material";
+import "../../../utils/yupConfig.js";
+import { updateConfigParameter } from "../../../services/config.js";
+function getLastSelectedDirectoryId() {
+  const lastSelectedDirId = localStorage.getItem(LAST_SELECTED_DIRECTORY);
+  if (!lastSelectedDirId || lastSelectedDirId === "null") {
+    return null;
+  }
+  return lastSelectedDirId;
+}
+async function clearLastSelectedDirectory() {
+  localStorage.removeItem(LAST_SELECTED_DIRECTORY);
+  try {
+    await updateConfigParameter(COMMON_APP_NAME, LAST_SELECTED_DIRECTORY, "null");
+  } catch (error) {
+    console.error("Failed to clear last selected directory:", error);
+  }
+}
+async function saveLastSelectedDirectory(directoryId) {
+  try {
+    await updateConfigParameter(COMMON_APP_NAME, LAST_SELECTED_DIRECTORY, directoryId);
+  } catch (error) {
+    console.error("Failed to save last selected directory:", error);
+  }
+}
+async function fetchDirectoryPathSafe(directoryId) {
+  try {
+    const path = await fetchDirectoryElementPath(directoryId);
+    if (!path || path.length === 0) {
+      return null;
+    }
+    return path;
+  } catch (error) {
+    console.warn(`Failed to fetch directory path for ${directoryId}:`, error);
+    return null;
+  }
+}
+async function initializeFromLastSelected() {
+  const lastSelectedDirId = getLastSelectedDirectoryId();
+  if (!lastSelectedDirId) {
+    return null;
+  }
+  const path = await fetchDirectoryPathSafe(lastSelectedDirId);
+  if (!path) {
+    await clearLastSelectedDirectory();
+    return null;
+  }
+  return path.map((element) => element.elementUuid);
+}
+async function getExpansionPathsForSelected(selectedIds, expanded = []) {
+  const expandedSet = new Set(expanded);
+  const idToMinIndex = /* @__PURE__ */ new Map();
+  const paths = await Promise.all(selectedIds.map(fetchDirectoryPathSafe));
+  paths.filter((p) => !!p && p.length > 0).forEach((path) => {
+    path.forEach((element, index) => {
+      if (index < path.length - 1) {
+        const id = element.elementUuid;
+        expandedSet.add(id);
+        if (!idToMinIndex.has(id) || index < idToMinIndex.get(id)) {
+          idToMinIndex.set(id, index);
+        }
+      }
+    });
+  });
+  const expandedArray = Array.from(expandedSet).sort(
+    (a, b) => (idToMinIndex.get(a) ?? Infinity) - (idToMinIndex.get(b) ?? Infinity)
+  );
+  return expandedArray;
+}
+async function saveLastSelectedDirectoryFromNode(node) {
+  let lastSelectedDirId;
+  if (node.type === ElementType.DIRECTORY || node.type === void 0) {
+    lastSelectedDirId = node.id;
+  } else if (node.parents && node.parents.length > 0) {
+    lastSelectedDirId = node.parents[node.parents.length - 1].id;
+  }
+  if (lastSelectedDirId) {
+    await saveLastSelectedDirectory(lastSelectedDirId);
+  }
+}
+async function fetchChildrenForExpandedNodes(expandedNodes, fetchChildrenCallback) {
+  await expandedNodes.reduce(async (promise, nodeId) => {
+    await promise;
+    return fetchChildrenCallback(nodeId);
+  }, Promise.resolve());
+}
+export {
+  clearLastSelectedDirectory,
+  fetchChildrenForExpandedNodes,
+  fetchDirectoryPathSafe,
+  getExpansionPathsForSelected,
+  getLastSelectedDirectoryId,
+  initializeFromLastSelected,
+  saveLastSelectedDirectory,
+  saveLastSelectedDirectoryFromNode
+};

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

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2026, 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 * from './addButton';
+export * from './reactHookForm';
+export * from './checkBoxList';
+export * from './inputs';
+export * from './dialogs';
+export * from './overflowableText';
+export * from './snackbarProvider';
+export * from './tooltip';
+export * from './icons';
+export * from './menus';
+export * from './resizablePanels';
+export * from './csvDownloader';
+export * from './treeViewFinder';
+export * from './directoryItemSelector';

package/dist/components/ui/index.js

@@ -0,0 +1,163 @@
+import { AddButton, AddButtonMode } from "./addButton/AddButton.js";
+import { OverflowableChip } from "./reactHookForm/OverflowableChip.js";
+import { OverflowableChipWithHelperText } from "./reactHookForm/OverflowableChipWithHelperText.js";
+import { ChipItemsInput } from "./reactHookForm/chip-items-input.js";
+import { DirectoryItemsInput } from "./reactHookForm/DirectoryItemsInput.js";
+import { RawReadOnlyInput } from "./reactHookForm/RawReadOnlyInput.js";
+import { AutocompleteInput } from "./reactHookForm/autocompleteInputs/AutocompleteInput.js";
+import { MultipleAutocompleteInput } from "./reactHookForm/autocompleteInputs/MultipleAutocompleteInput.js";
+import { BooleanInput } from "./reactHookForm/booleans/BooleanInput.js";
+import { CheckboxInput } from "./reactHookForm/booleans/CheckboxInput.js";
+import { RadioInput } from "./reactHookForm/booleans/RadioInput.js";
+import { SwitchInput } from "./reactHookForm/booleans/SwitchInput.js";
+import { ErrorInput } from "./reactHookForm/errorManagement/ErrorInput.js";
+import { FieldErrorAlert } from "./reactHookForm/errorManagement/FieldErrorAlert.js";
+import { MidFormError } from "./reactHookForm/errorManagement/MidFormError.js";
+import { FloatInput } from "./reactHookForm/numbers/FloatInput.js";
+import { IntegerInput } from "./reactHookForm/numbers/IntegerInput.js";
+import { DEFAULT_RANGE_VALUE, RangeInput, RangeType, getRangeInputSchema } from "./reactHookForm/numbers/RangeInput.js";
+import { SliderInput } from "./reactHookForm/numbers/SliderInput.js";
+import { isFloatNumber, isIntegerNumber } from "./reactHookForm/numbers/utils.js";
+import { CustomFormContext, CustomFormProvider } from "./reactHookForm/provider/CustomFormProvider.js";
+import { useCustomFormContext } from "./reactHookForm/provider/useCustomFormContext.js";
+import { ReadOnlyInput } from "./reactHookForm/readOnly/ReadOnlyInput.js";
+import { ButtonReadOnlyInput } from "./reactHookForm/readOnly/ButtonReadOnlyInput.js";
+import { CountriesInput } from "./reactHookForm/selectInputs/CountriesInput.js";
+import { InputWithPopupConfirmation } from "./reactHookForm/selectInputs/InputWithPopupConfirmation.js";
+import { MuiSelectInput } from "./reactHookForm/selectInputs/MuiSelectInput.js";
+import { SelectInput } from "./reactHookForm/selectInputs/SelectInput.js";
+import { SelectWithConfirmationInput } from "./reactHookForm/selectInputs/SelectWithConfirmationInput.js";
+import { EnumInput } from "./reactHookForm/selectInputs/EnumInput.js";
+import { TableNumericalInput } from "./reactHookForm/tableInputs/table-numerical-input.js";
+import { TableTextInput } from "./reactHookForm/tableInputs/table-text-input.js";
+import { DescriptionField } from "./reactHookForm/text/DescriptionField.js";
+import { ExpandingTextField } from "./reactHookForm/text/ExpandingTextField.js";
+import { TextInput } from "./reactHookForm/text/TextInput.js";
+import { UniqueNameInput } from "./reactHookForm/text/UniqueNameInput.js";
+import { DescriptionInput } from "./reactHookForm/text/DescriptionInput.js";
+import { CancelButton } from "./reactHookForm/utils/CancelButton.js";
+import { FieldLabel } from "./reactHookForm/utils/FieldLabel.js";
+import { SubmitButton } from "./reactHookForm/utils/SubmitButton.js";
+import { TextFieldWithAdornment } from "./reactHookForm/utils/TextFieldWithAdornment.js";
+import { genHelperError, gridItem, identity, isFieldRequired, toFloatOrNullValue } from "./reactHookForm/utils/functions.js";
+import { HelperPreviousValue } from "./reactHookForm/utils/HelperPreviousValue.js";
+import { DESCRIPTION, NAME } from "./reactHookForm/constants.js";
+import { ExpandableInput } from "./reactHookForm/expandableInput/ExpandableInput.js";
+import { CountrySelectionInput } from "./reactHookForm/CountrySelectionInput.js";
+import { CheckboxNullableInput } from "./reactHookForm/CheckboxNullableInput.js";
+import { CheckBoxList } from "./checkBoxList/CheckBoxList.js";
+import { SelectClearable } from "./inputs/SelectClearable.js";
+import { ActivableChip } from "./inputs/ActivableChip.js";
+import { CustomMuiDialog, unscrollableDialogStyles } from "./dialogs/customMuiDialog/CustomMuiDialog.js";
+import { DescriptionModificationDialog } from "./dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import { ElementSaveDialog } from "./dialogs/elementSaveDialog/ElementSaveDialog.js";
+import { initializeDirectory } from "./dialogs/elementSaveDialog/utils.js";
+import { ModifyElementSelection } from "./dialogs/modifyElementSelection/ModifyElementSelection.js";
+import { PopupConfirmationDialog } from "./dialogs/popupConfirmationDialog/PopupConfirmationDialog.js";
+import { MultipleSelectionDialog } from "./dialogs/multipleSelectionDialog/MultipleSelectionDialog.js";
+import { OverflowableText } from "./overflowableText/OverflowableText.js";
+import { SnackbarProvider } from "./snackbarProvider/SnackbarProvider.js";
+import { CustomTooltip } from "./tooltip/CustomTooltip.js";
+import { LeftPanelOpenIcon } from "./icons/LeftPanelOpenIcon.js";
+import { ArrowsOutputIcon } from "./icons/ArrowsOutputIcon.js";
+import { ArrowsInputIcon } from "./icons/ArrowsInputIcon.js";
+import { LeftPanelCloseIcon } from "./icons/LeftPanelCloseIcon.js";
+import { EditNoteIcon } from "./icons/EditNoteIcon.js";
+import { CustomMenuItem, CustomNestedMenuItem } from "./menus/custom-nested-menu.js";
+import { ResizeHandle } from "./resizablePanels/ResizeHandle.js";
+import { CsvExport } from "./csvDownloader/csv-export.js";
+import { ExportCsvButton } from "./csvDownloader/export-csv-button.js";
+import { fetchCsvSeparator, useCsvExport } from "./csvDownloader/use-csv-export.js";
+import { TreeViewFinder, generateTreeViewFinderClass } from "./treeViewFinder/TreeViewFinder.js";
+import { doesNodeHasChildren } from "./treeViewFinder/TreeViewUtils.js";
+import { DirectoryItemSelector } from "./directoryItemSelector/DirectoryItemSelector.js";
+export {
+  ActivableChip,
+  AddButton,
+  AddButtonMode,
+  ArrowsInputIcon,
+  ArrowsOutputIcon,
+  AutocompleteInput,
+  BooleanInput,
+  ButtonReadOnlyInput,
+  CancelButton,
+  CheckBoxList,
+  CheckboxInput,
+  CheckboxNullableInput,
+  ChipItemsInput,
+  CountriesInput,
+  CountrySelectionInput,
+  CsvExport,
+  CustomFormContext,
+  CustomFormProvider,
+  CustomMenuItem,
+  CustomMuiDialog,
+  CustomNestedMenuItem,
+  CustomTooltip,
+  DEFAULT_RANGE_VALUE,
+  DESCRIPTION,
+  DescriptionField,
+  DescriptionInput,
+  DescriptionModificationDialog,
+  DirectoryItemSelector,
+  DirectoryItemsInput,
+  EditNoteIcon,
+  ElementSaveDialog,
+  EnumInput,
+  ErrorInput,
+  ExpandableInput,
+  ExpandingTextField,
+  ExportCsvButton,
+  FieldErrorAlert,
+  FieldLabel,
+  FloatInput,
+  HelperPreviousValue,
+  InputWithPopupConfirmation,
+  IntegerInput,
+  LeftPanelCloseIcon,
+  LeftPanelOpenIcon,
+  MidFormError,
+  ModifyElementSelection,
+  MuiSelectInput,
+  MultipleAutocompleteInput,
+  MultipleSelectionDialog,
+  NAME,
+  OverflowableChip,
+  OverflowableChipWithHelperText,
+  OverflowableText,
+  PopupConfirmationDialog,
+  RadioInput,
+  RangeInput,
+  RangeType,
+  RawReadOnlyInput,
+  ReadOnlyInput,
+  ResizeHandle,
+  SelectClearable,
+  SelectInput,
+  SelectWithConfirmationInput,
+  SliderInput,
+  SnackbarProvider,
+  SubmitButton,
+  SwitchInput,
+  TableNumericalInput,
+  TableTextInput,
+  TextFieldWithAdornment,
+  TextInput,
+  TreeViewFinder,
+  UniqueNameInput,
+  doesNodeHasChildren,
+  fetchCsvSeparator,
+  genHelperError,
+  generateTreeViewFinderClass,
+  getRangeInputSchema,
+  gridItem,
+  identity,
+  initializeDirectory,
+  isFieldRequired,
+  isFloatNumber,
+  isIntegerNumber,
+  toFloatOrNullValue,
+  unscrollableDialogStyles,
+  useCsvExport,
+  useCustomFormContext
+};

package/dist/components/ui/inputs/SelectClearable.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { useIntl } from "react-intl";
+import { Autocomplete, TextField } from "@mui/material";
+import { FieldLabel } from "../reactHookForm/utils/FieldLabel.js";
+function SelectClearable(props) {
+  const { value, onChange, label, options, ...otherProps } = props;
+  const intl = useIntl();
+  const inputTransform = (inputValue) => {
+    return value && options.find((option) => option.id === inputValue) || null;
+  };
+  const outputTransform = (option) => {
+    return option?.id ?? null;
+  };
+  return /* @__PURE__ */ jsx(
+    Autocomplete,
+    {
+      value: inputTransform(value),
+      onChange: (_, newValue) => onChange(outputTransform(newValue)),
+      getOptionLabel: (option) => {
+        return option.label ? intl.formatMessage({ id: option.label }) : option.id;
+      },
+      renderInput: ({ inputProps, ...otherParams }) => /* @__PURE__ */ jsx(
+        TextField,
+        {
+          ...otherParams,
+          ...label && {
+            label: FieldLabel({
+              label
+            })
+          },
+          inputProps: { ...inputProps, readOnly: true }
+        }
+      ),
+      options,
+      ...otherProps
+    }
+  );
+}
+export {
+  SelectClearable
+};