arengibook 2.4.608 → 2.4.610

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useContext, useEffect, useState, useRef, forwardRef, Fragment, useMemo } from 'react';
+import React__default, { useContext, useEffect, useState, useRef, forwardRef, Fragment } from 'react';
 import ReactDOM from 'react-dom';
 
 function _arrayWithHoles$d(r) {
@@ -35963,7 +35963,7 @@ var Dropdown = function Dropdown(_ref) {
     _ref$objValue = _ref.objValue,
     objValue = _ref$objValue === void 0 ? null : _ref$objValue,
     _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? null : _ref$placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'Sélectionnez une option' : _ref$placeholder,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$filter = _ref.filter,
@@ -35984,8 +35984,6 @@ var Dropdown = function Dropdown(_ref) {
     onChange = _ref.onChange,
     _ref$optionStyle = _ref.optionStyle,
     optionStyle = _ref$optionStyle === void 0 ? {} : _ref$optionStyle,
-    _ref$editable = _ref.editable,
-    editable = _ref$editable === void 0 ? false : _ref$editable,
     name = _ref.name,
     _ref$showClear = _ref.showClear,
     showClear = _ref$showClear === void 0 ? false : _ref$showClear,
@@ -36020,42 +36018,14 @@ var Dropdown = function Dropdown(_ref) {
     _useState6 = _slicedToArray$8(_useState5, 2),
     loadedOptions = _useState6[0],
     setLoadedOptions = _useState6[1];
-  var isOptionLoadFunction = typeof options === 'function'; // (détecte si l'option est une fonction donc fonction asynchrone)
+  var isOptionLoadFunction = typeof options === 'function';
   var filterRef = useRef('');
   var dropdownRef = useRef(null);
   var _useState7 = useState(null),
     _useState8 = _slicedToArray$8(_useState7, 2),
     valueToOptionMap = _useState8[0],
     setValueToOptionMap = _useState8[1];
-  var _useState9 = useState(20),
-    _useState0 = _slicedToArray$8(_useState9, 2),
-    inputWidth = _useState0[0];
-    _useState0[1]; // largeur initiale minimale
-
   useEffect(function () {
-    // const editableFunction = () => {
-    //     if (editable) {
-    //         const hiddenInput= document.getElementsByClassName("p-dropdown-label");
-    //         hiddenInput[0].setAttribute('type', 'hidden');
-    //
-    //         const editableDiv = document.createElement('div');
-    //         editableDiv.contentEditable = 'true';
-    //         editableDiv.textContent = 'Mon texte ici';
-    //
-    //
-    //         editableDiv.style.display = 'inline-block';
-    //         editableDiv.style.width = 'auto';
-    //         editableDiv.style.padding = '6px 10px';
-    //         editableDiv.style.color = 'green';
-    //         editableDiv.style.backgroundColor = 'gray';
-    //         editableDiv.style.borderRadius = '20px';
-    //         editableDiv.style.fontSize = '16px';
-    //         editableDiv.style.outline = 'none';
-    //         hiddenInput[0].parentNode.insertBefore(editableDiv, hiddenInput[0]);
-    //     }
-    // }
-    // editableFunction();
-
     if (isOptionLoadFunction && objValue && isSelectMeta) {
       setValueToOptionMap(objValue);
     }
@@ -36088,9 +36058,7 @@ var Dropdown = function Dropdown(_ref) {
               setLoading(true);
               _context.p = 1;
               _context.n = 2;
-              return options('', [], {
-                page: 1
-              });
+              return options();
             case 2:
               result = _context.v;
               setLoadedOptions(Array.isArray(result.options) ? result.options : []);
@@ -36185,43 +36153,44 @@ var Dropdown = function Dropdown(_ref) {
   };
   var valueTemplate = function valueTemplate(option) {
     if (isSelectMeta) {
-      if (objValue === null) {
-        var iconColor = option !== null && option !== void 0 && option.color ? inverseColor(option === null || option === void 0 ? void 0 : option.color) : '#FFFFFF';
-        return /*#__PURE__*/React__default.createElement("span", {
-          ref: dropdownRef
-        }, /*#__PURE__*/React__default.createElement("div", {
+      if (objValue && valueToOptionMap && _typeof$a(objValue) === 'object') {
+        var mappedOption = valueToOptionMap;
+        var iconColor = mappedOption.color ? inverseColor(mappedOption.color) : '#FFFFFF';
+        return /*#__PURE__*/React__default.createElement("div", {
           className: 'badge select-badge',
           style: _objectSpread2({
-            backgroundColor: option === null || option === void 0 ? void 0 : option.color,
+            backgroundColor: mappedOption.color,
             color: iconColor,
             padding: '0.5rem',
             display: 'inline-block'
           }, valueStyle)
-        }, option !== null && option !== void 0 && option[optionLabel] ? /*#__PURE__*/React__default.createElement("span", {
+        }, /*#__PURE__*/React__default.createElement("span", {
           style: {
             color: iconColor
           }
-        }, option === null || option === void 0 ? void 0 : option[optionLabel]) : /*#__PURE__*/React__default.createElement("span", {
-          style: {
-            color: '#000000'
-          }
-        }, placeholder)));
-      } else if (objValue && valueToOptionMap && _typeof$a(objValue) === 'object') {
-        var mappedOption = valueToOptionMap;
-        var _iconColor = mappedOption.color ? inverseColor(mappedOption.color) : '#FFFFFF';
-        return /*#__PURE__*/React__default.createElement("div", {
+        }, mappedOption.label));
+      }
+      if (objValue === null) {
+        var _iconColor = option !== null && option !== void 0 && option.color ? inverseColor(option === null || option === void 0 ? void 0 : option.color) : '#FFFFFF';
+        return /*#__PURE__*/React__default.createElement("span", {
+          ref: dropdownRef
+        }, /*#__PURE__*/React__default.createElement("div", {
           className: 'badge select-badge',
           style: _objectSpread2({
-            backgroundColor: mappedOption.color,
+            backgroundColor: option === null || option === void 0 ? void 0 : option.color,
             color: _iconColor,
             padding: '0.5rem',
             display: 'inline-block'
           }, valueStyle)
-        }, /*#__PURE__*/React__default.createElement("span", {
+        }, option !== null && option !== void 0 && option[optionLabel] ? /*#__PURE__*/React__default.createElement("span", {
           style: {
             color: _iconColor
           }
-        }, mappedOption.label));
+        }, option === null || option === void 0 ? void 0 : option[optionLabel]) : /*#__PURE__*/React__default.createElement("span", {
+          style: {
+            color: '#000000'
+          }
+        }, placeholder)));
       }
     } else {
       return /*#__PURE__*/React__default.createElement("span", {
@@ -36239,7 +36208,7 @@ var Dropdown = function Dropdown(_ref) {
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.n) {
           case 0:
-            if (!(!isOptionLoadFunction || loading)) {
+            if (isOptionLoadFunction) {
               _context2.n = 1;
               break;
             }
@@ -36355,54 +36324,10 @@ var Dropdown = function Dropdown(_ref) {
       }, option.label)));
     }
   };
-
-  // 🔍 Trouver l’option actuelle (comme valueTemplate)
-  var currentOption = useMemo(function () {
-    var allOptions = Array.isArray(loadedOptions) ? loadedOptions : [];
-    return allOptions.find(function (opt) {
-      return opt[optionValue] === optionSelected;
-    }) || null;
-  }, [loadedOptions, optionSelected, optionValue]);
-  var getTextWidth = function getTextWidth(text, font) {
-    var span = document.createElement('span');
-    span.style.visibility = 'hidden';
-    span.style.whiteSpace = 'pre';
-    span.style.position = 'absolute';
-    span.style.font = font;
-    span.textContent = text || '';
-    document.body.appendChild(span);
-    var width = span.offsetWidth;
-    document.body.removeChild(span);
-    return width + 16;
-  };
-  var editableInputStyle = useMemo(function () {
-    if (!editable) return {};
-    var bg = (currentOption === null || currentOption === void 0 ? void 0 : currentOption.color) || '#FFFFFF';
-    var iconColor = currentOption !== null && currentOption !== void 0 && currentOption.color ? inverseColor(currentOption.color) : '#000000';
-    return _objectSpread2({
-      backgroundColor: bg,
-      color: iconColor,
-      padding: '0.5rem',
-      borderRadius: '1rem',
-      width: getTextWidth(currentOption === null || currentOption === void 0 ? void 0 : currentOption.label),
-      marginRight: '16px'
-    }, valueStyle);
-  }, [editable, currentOption, inputWidth, valueStyle]);
-  var handleEditableChange = function handleEditableChange(e) {
-    var text = e.target.value;
-    if (!text || text.trim() === "") {
-      setOptionSelected(null);
-      if (onChange) onChange(null);
-    } else {
-      setOptionSelected(text);
-      if (onChange) onChange(text);
-    }
-  };
   return /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col gap-1"
   }, /*#__PURE__*/React__default.createElement(Dropdown$1, _extends$A({
     value: optionSelected,
-    valueTemplate: valueTemplate,
     options: loadedOptions,
     onChange: handleChange,
     placeholder: placeholder,
@@ -36417,39 +36342,20 @@ var Dropdown = function Dropdown(_ref) {
       overflowY: 'auto'
     },
     itemTemplate: optionTemplate,
+    valueTemplate: valueTemplate,
     showClear: showClear,
-    optionGroupTemplate: isGroupedOption ? groupedItemTemplate : null,
-    editable: editable
-  }, editable && {
-    editable: editable,
-    pt: {
-      input: {
-        className: 'badge select-badge',
-        style: editableInputStyle
-      },
-      root: {
-        style: {
-          border: '1px solid #ccc',
-          width: '100%',
-          display: 'inline-flex',
-          alignItems: 'center',
-          justifyContent: 'flex-start',
-          padding: '0.25rem 0.5rem'
-        }
-      }
-    },
-    onInput: handleEditableChange
+    optionGroupTemplate: isGroupedOption ? groupedItemTemplate : null
   }, isGroupedOption && {
     optionGroupLabel: 'label',
     optionGroupChildren: 'items'
   }, (isSelectMeta || isOptionLoadFunction) && {
     virtualScrollerOptions: {
-      showLoader: true,
+      lazy: true,
       onLazyLoad: onLazyLoad,
       itemSize: 38,
-      totalrecords: loadedOptions.length + 50,
+      showLoader: true,
       loading: loading,
-      lazy: true
+      delay: 250
     }
   })), name && /*#__PURE__*/React__default.createElement("input", {
     type: "hidden",
@@ -36587,7 +36493,6 @@ var DropdownPresets = {
     placeholder: 'Sélectionnez une couleur',
     options: optionsWithColors,
     isSelectMeta: true,
-    editable: false,
     selectMetaConfig: {
       generalIcon: 'pi pi-circle-fill'
     },
@@ -36602,9 +36507,9 @@ var DropdownPresets = {
     }
   },
   SelectMetaAsyncLoad: {
-    editable: false,
-    value: 3,
-    // objValue: { label: 'Option 3', value: 3, color: '#000000' }, // simule un affichage direct de l'option dans l'input si celle-ci a été enregistrée (si options asynchrones uniquement
+    placeholder: 'Chargement distant simulé',
+    value: 20,
+    // objValue: { label: 'Option 2', value: 2, color: 'green' }, // simule un affichage direct de l'option dans l'input si celle-ci a été enregistrée (si options asynchrones uniquement
     options: function () {
       var _options = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(search, loadedOptions, _ref) {
         var page, length, start, data;
@@ -36612,7 +36517,7 @@ var DropdownPresets = {
           while (1) switch (_context.n) {
             case 0:
               page = _ref.page;
-              length = 20;
+              length = 2;
               start = (page - 1) * length; // Simule un délai réseau
               _context.n = 1;
               return new Promise(function (res) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "arengibook",
   "private": false,
-  "version": "2.4.608",
+  "version": "2.4.610",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "exports": {