odaptos_design_system 2.0.71 → 2.0.72

package/dist/Organisms/MultiSelect/MultiSelect.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
+interface OptionType {
+    label: string;
+    value: string;
+}
 interface MultiSelectProps {
     label: string;
     placeholder?: string;
@@ -12,7 +16,7 @@ interface MultiSelectProps {
     disabled?: boolean;
     required?: boolean;
     defaultValue: any[];
-    options: any[];
+    options: OptionType[];
     error?: boolean;
     helperText?: string;
     errorText?: string;
@@ -22,9 +26,11 @@ interface MultiSelectProps {
     deleteOption: (value: any) => void;
     limitTags?: number;
     onBlur?: () => void;
+    loadMoreOptions?: () => Promise<OptionType[]>;
+    initialLoadCount?: number;
 }
 /**
  * Use this component for multiselection !!
  */
-export declare const MultiSelect: ({ options, label, placeholder, name, className, onChange, disabled, defaultValue, topLabel, topLabelWeight, topLabelSize, id, inputId, required, error, helperText, errorText, canAddNewOption, deleteOption, disableCloseOnSelect, limitTags, onBlur, ...props }: MultiSelectProps) => React.JSX.Element;
+export declare const MultiSelect: ({ options: initialOptions, loadMoreOptions, initialLoadCount, label, placeholder, name, className, onChange, disabled, defaultValue, topLabel, topLabelWeight, topLabelSize, id, inputId, required, error, helperText, errorText, canAddNewOption, deleteOption, disableCloseOnSelect, limitTags, onBlur, ...props }: MultiSelectProps) => React.JSX.Element;
 export {};

package/dist/Organisms/SingleSelect/SingleSelect.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
+interface OptionType {
+    label: string;
+    value: string;
+}
 interface SingleSelectProps {
     label: string;
     placeholder?: string;
@@ -16,12 +20,14 @@ interface SingleSelectProps {
     errorText?: string;
     canAddNewOption?: boolean;
     defaultValue: any;
-    options: any[];
+    options: OptionType[];
     onChange: (value: any) => void;
     onBlur?: () => void;
+    loadMoreOptions?: () => Promise<OptionType[]>;
+    initialLoadCount?: number;
 }
 /**
  * Use this component for single selection !!
  */
-export declare const SingleSelect: ({ options, label, placeholder, name, className, onChange, disabled, defaultValue, topLabel, topLabelWeight, topLabelSize, id, inputId, required, error, helperText, errorText, canAddNewOption, onBlur, ...props }: SingleSelectProps) => React.JSX.Element;
+export declare const SingleSelect: ({ options: initialOptions, loadMoreOptions, initialLoadCount, label, placeholder, name, className, onChange, disabled, defaultValue, topLabel, topLabelWeight, topLabelSize, id, inputId, required, error, helperText, errorText, canAddNewOption, onBlur, ...props }: SingleSelectProps) => React.JSX.Element;
 export {};

package/dist/odaptos_design_system.cjs.development.js

@@ -13340,11 +13340,21 @@ const CssTextField$1 = /*#__PURE__*/styles$15.styled(material.TextField)({
     }
   }
 });
+// Fonction utilitaire de debounce
+const debounce = (func, delay) => {
+  let timeoutId;
+  return (...args) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => func(...args), delay);
+  };
+};
 /**
  * Use this component for multiselection !!
  */
 const MultiSelect = ({
-  options,
+  options: initialOptions,
+  loadMoreOptions,
+  initialLoadCount = 50,
   label,
   placeholder,
   name,
@@ -13368,8 +13378,28 @@ const MultiSelect = ({
   onBlur,
   ...props
 }) => {
+  const [options, setOptions] = React.useState(initialOptions.slice(0, initialLoadCount));
+  const [loading, setLoading] = React.useState(false);
+  const [hasMore, setHasMore] = React.useState(initialOptions.length > initialLoadCount);
   const [value, setValue] = React.useState(defaultValue === undefined ? [] : defaultValue);
   const [inputValue, setInputValue] = React__default.useState('');
+  const loadMore = React.useCallback(async () => {
+    if (loading || !hasMore) return;
+    setLoading(true);
+    if (loadMoreOptions) {
+      const newOptions = await loadMoreOptions();
+      setOptions(prevOptions => [...prevOptions, ...newOptions]);
+      setHasMore(newOptions.length > 0);
+    } else {
+      const currentLength = options.length;
+      const nextOptions = initialOptions.slice(currentLength, currentLength + initialLoadCount);
+      setOptions(prevOptions => [...prevOptions, ...nextOptions]);
+      setHasMore(currentLength + nextOptions.length < initialOptions.length);
+    }
+    setLoading(false);
+  }, [loading, hasMore, loadMoreOptions, initialOptions, options.length, initialLoadCount]);
+  // Création d'une version debounced de loadMore
+  const debouncedLoadMore = React.useRef(debounce(loadMore, 300)).current;
   React.useEffect(() => {
     setValue(defaultValue === undefined ? [] : defaultValue);
   }, [defaultValue]);
@@ -13397,11 +13427,7 @@ const MultiSelect = ({
       setValue(newValue);
       onChange(newValue);
     },
-    options: options ? options : [{
-      label: 'Loading...',
-      value: 0,
-      year: 100
-    }],
+    options: options,
     multiple: true,
     autoComplete: options.length > 10,
     size: "small",
@@ -13447,6 +13473,12 @@ const MultiSelect = ({
     renderOption: (props, option, {
       selected
     }) => {
+      if (option.value === 'load-more') {
+        return /*#__PURE__*/React__default.createElement(material.ListSubheader, {
+          key: "load-more",
+          component: "div"
+        }, loading ? 'Chargement...' : 'Charger plus');
+      }
       return /*#__PURE__*/React__default.createElement("li", Object.assign({}, props, {
         id: option.value,
         key: `${props.id}`,
@@ -13484,6 +13516,14 @@ const MultiSelect = ({
         });
       }
       return filtered;
+    },
+    ListboxProps: {
+      onScroll: event => {
+        const listboxNode = event.currentTarget;
+        if (listboxNode.scrollTop + listboxNode.clientHeight >= listboxNode.scrollHeight - 50) {
+          debouncedLoadMore();
+        }
+      }
     }
   }, props)), errorText && /*#__PURE__*/React__default.createElement(Text, {
     size: "xs",
@@ -14996,6 +15036,14 @@ var css_248z$J = ".SingleSelect-modules_newAutocomplete__eqYQo{min-width:16rem;w
 var styles$J = {"newAutocomplete":"SingleSelect-modules_newAutocomplete__eqYQo","MuiAutocomplete-endAdornment":"SingleSelect-modules_MuiAutocomplete-endAdornment__8EaFU","tags-container":"SingleSelect-modules_tags-container__ohLVa","input_top_label":"SingleSelect-modules_input_top_label__duzAQ","MuiOutlinedInput-root":"SingleSelect-modules_MuiOutlinedInput-root__bpVWQ","MuiInputBase-root":"SingleSelect-modules_MuiInputBase-root__FVaHT","MuiInputBase-formControl":"SingleSelect-modules_MuiInputBase-formControl__lYoNJ","text_below":"SingleSelect-modules_text_below__6l3Mu","icon":"SingleSelect-modules_icon__-dAuA"};
 styleInject(css_248z$J);
 
+// Fonction utilitaire de debounce
+const debounce$1 = (func, delay) => {
+  let timeoutId;
+  return (...args) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => func(...args), delay);
+  };
+};
 const filter$2 = /*#__PURE__*/Autocomplete.createFilterOptions();
 const CssTextField$6 = /*#__PURE__*/styles$15.styled(material.TextField)({
   '& .MuiInputBase-input': {
@@ -15088,7 +15136,9 @@ const CssTextField$6 = /*#__PURE__*/styles$15.styled(material.TextField)({
  * Use this component for single selection !!
  */
 const SingleSelect = ({
-  options,
+  options: initialOptions,
+  loadMoreOptions,
+  initialLoadCount = 50,
   label,
   placeholder,
   name,
@@ -15111,9 +15161,29 @@ const SingleSelect = ({
 }) => {
   const [value, setValue] = React.useState(defaultValue === undefined ? null : defaultValue);
   const [inputValue, setInputValue] = React__default.useState('');
+  const [options, setOptions] = React.useState(initialOptions.slice(0, initialLoadCount));
+  const [loading, setLoading] = React.useState(false);
+  const [hasMore, setHasMore] = React.useState(initialOptions.length > initialLoadCount);
   React.useEffect(() => {
     setValue(defaultValue === undefined ? null : defaultValue);
   }, [defaultValue]);
+  const loadMore = React.useCallback(async () => {
+    if (loading || !hasMore) return;
+    setLoading(true);
+    if (loadMoreOptions) {
+      const newOptions = await loadMoreOptions();
+      setOptions(prevOptions => [...prevOptions, ...newOptions]);
+      setHasMore(newOptions.length > 0);
+    } else {
+      const currentLength = options.length;
+      const nextOptions = initialOptions.slice(currentLength, currentLength + initialLoadCount);
+      setOptions(prevOptions => [...prevOptions, ...nextOptions]);
+      setHasMore(currentLength + nextOptions.length < initialOptions.length);
+    }
+    setLoading(false);
+  }, [loading, hasMore, loadMoreOptions, initialOptions, options.length, initialLoadCount]);
+  // Création d'une version debounced de loadMore
+  const debouncedLoadMore = React.useRef(debounce$1(loadMore, 300)).current;
   return /*#__PURE__*/React__default.createElement("div", {
     className: `${className && className}`,
     style: {
@@ -15175,6 +15245,12 @@ const SingleSelect = ({
     }),
     className: `${styles$J.newAutocomplete}`,
     renderOption: (props, option) => {
+      if (option.value === 'load-more') {
+        return /*#__PURE__*/React__default.createElement(material.ListSubheader, {
+          key: "load-more",
+          component: "div"
+        }, loading ? 'Chargement...' : 'Charger plus');
+      }
       return /*#__PURE__*/React__default.createElement("li", Object.assign({}, props, {
         key: option.value,
         id: option.value
@@ -15183,6 +15259,14 @@ const SingleSelect = ({
         size: "sm"
       }));
     },
+    ListboxProps: {
+      onScroll: event => {
+        const listboxNode = event.currentTarget;
+        if (listboxNode.scrollTop + listboxNode.clientHeight >= listboxNode.scrollHeight - 50) {
+          debouncedLoadMore();
+        }
+      }
+    },
     filterOptions: (options, params) => {
       const filtered = filter$2(options, params);
       const {