arengibook 1.1.2-main → 1.1.3-main

package/dist/index.js

@@ -36993,12 +36993,16 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
     _useState0 = _slicedToArray$c(_useState9, 2),
     inputText = _useState0[0];
     _useState0[1];
-
-  // 🔹 Lazy loading
   var _useState1 = useState(false),
     _useState10 = _slicedToArray$c(_useState1, 2),
-    loading = _useState10[0],
-    setLoading = _useState10[1];
+    showRequiredError = _useState10[0],
+    setShowRequiredError = _useState10[1];
+
+  // 🔹 Lazy loading
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray$c(_useState11, 2),
+    loading = _useState12[0],
+    setLoading = _useState12[1];
   var loadLazyTimeout = useRef();
   useRef(1);
   useRef('');
@@ -37032,11 +37036,15 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
       style: styleLabel
     }, option === null || option === void 0 ? void 0 : option[optionLabel])));
   };
+  var isInvalidEffective = invalid || showRequiredError;
   var style = {
-    border: invalid ? '1px solid red' : '1px solid #ccc',
+    border: isInvalidEffective ? '1px solid red' : '1px solid #ccc',
     width: '100%',
     minHeight: '45px'
   };
+  useEffect(function () {
+    if (optionSelected) setShowRequiredError(false);
+  }, [optionSelected]);
   useEffect(function () {
     setOptionSelected(objValue ? objValue === null || objValue === void 0 ? void 0 : objValue[optionValue] : value !== null && value !== void 0 ? value : null);
     var loadInitialOptions = /*#__PURE__*/function () {
@@ -37250,7 +37258,7 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     ref: dropdownRef,
     className: "flex flex-col gap-1",
-    onClick: invalid || disabled ? null : function () {
+    onClick: isInvalidEffective || disabled ? null : function () {
       return setIsEditing(editable);
     }
   }, /*#__PURE__*/React__default.createElement(Dropdown$1, {
@@ -37298,13 +37306,20 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
     required: true,
     value: "",
     onChange: function onChange() {},
+    onInvalid: function onInvalid(e) {
+      e.preventDefault();
+      setShowRequiredError(true);
+    },
     style: {
       opacity: 0,
       height: 0,
-      position: 'absolute',
+      padding: 0,
+      margin: 0,
+      border: 'none',
+      display: 'block',
       pointerEvents: 'none'
     }
-  }), invalid && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("small", {
+  }), isInvalidEffective && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("small", {
     style: {
       color: 'red',
       fontStyle: 'italic'
@@ -37459,12 +37474,16 @@ var Dropdown = function Dropdown(props) {
     _useState10 = _slicedToArray$c(_useState1, 2),
     sortOrder = _useState10[0],
     setSortOrder = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray$c(_useState11, 2),
+    showRequiredError = _useState12[0],
+    setShowRequiredError = _useState12[1];
 
   // --- Derived values ---
   var hasSelection = options.some(function (opt) {
     return (opt === null || opt === void 0 ? void 0 : opt[optionValue]) === optionSelected;
   });
-  var isError = Boolean(invalid || status === 'error');
+  var isError = Boolean(invalid || status === 'error' || showRequiredError);
   var isInvalidEffective = Boolean(isError && !hasSelection);
   var effectiveOptions = loading ? [] : options;
   var mergedClassName = "flex flex-col gap-1 ".concat(attr["class"] || '').trim();
@@ -37478,6 +37497,9 @@ var Dropdown = function Dropdown(props) {
   var emptyMessage = loading ? 'Chargement…' : 'Aucune option disponible';
 
   // --- Effects ---
+  useEffect(function () {
+    if (optionSelected) setShowRequiredError(false);
+  }, [optionSelected]);
   useEffect(function () {
     setOptionSelected(objValue ? objValue === null || objValue === void 0 ? void 0 : objValue[optionValue] : value !== null && value !== void 0 ? value : null);
   }, [value, objValue, optionValue]);
@@ -38135,10 +38157,17 @@ var Dropdown = function Dropdown(props) {
     required: true,
     value: "",
     onChange: function onChange() {},
+    onInvalid: function onInvalid(e) {
+      e.preventDefault();
+      setShowRequiredError(true);
+    },
     style: {
       opacity: 0,
       height: 0,
-      position: 'absolute',
+      padding: 0,
+      margin: 0,
+      border: 'none',
+      display: 'block',
       pointerEvents: 'none'
     }
   }), isInvalidEffective && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("small", {
@@ -40960,6 +40989,11 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
     _useState8 = _slicedToArray$c(_useState7, 2);
     _useState8[0];
     var setHovered = _useState8[1];
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray$c(_useState9, 2),
+    showRequiredError = _useState0[0],
+    setShowRequiredError = _useState0[1];
+  var hasSelection = Array.isArray(selectedOptions) && selectedOptions.length > 0;
   var fetchOptionsFromUrl = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
       var search,
@@ -41049,6 +41083,9 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
       return [];
     }
   };
+  useEffect(function () {
+    if (hasSelection) setShowRequiredError(false);
+  }, [hasSelection]);
   useEffect(function () {
     var _numValue;
     setSelectedOptions(numObjValue && Array.isArray(numObjValue) && numObjValue.length ? numObjValue.map(function (opt) {
@@ -41139,8 +41176,9 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
     var luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
     return luminance > 0.18 ? '#000000' : '#FFFFFF';
   };
+  var isInvalidEffective = invalid || showRequiredError && !hasSelection;
   var style = {
-    border: invalid ? '1px solid red' : '1px solid #ccc',
+    border: isInvalidEffective ? '1px solid red' : '1px solid #ccc',
     width: '100%'
   };
   var optionTemplate = function optionTemplate(option) {
@@ -41415,19 +41453,26 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
       "data-name": nameAttr,
       value: id
     });
-  }), required && !(Array.isArray(selectedOptions) && selectedOptions.length > 0) && /*#__PURE__*/React__default.createElement("input", {
+  }), required && !hasSelection && /*#__PURE__*/React__default.createElement("input", {
     tabIndex: -1,
     "aria-hidden": "true",
     required: true,
     value: "",
     onChange: function onChange() {},
+    onInvalid: function onInvalid(e) {
+      e.preventDefault();
+      setShowRequiredError(true);
+    },
     style: {
       opacity: 0,
       height: 0,
-      position: 'absolute',
+      padding: 0,
+      margin: 0,
+      border: 'none',
+      display: 'block',
       pointerEvents: 'none'
     }
-  })), invalid && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("small", {
+  })), isInvalidEffective && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("small", {
     style: {
       color: 'red',
       fontStyle: 'italic'
@@ -41568,23 +41613,27 @@ var MultiSelect = function MultiSelect(props) {
     _useState6 = _slicedToArray$c(_useState5, 2),
     displayValue = _useState6[0],
     setDisplayValue = _useState6[1];
-  var isError = Boolean(invalid || status === 'error');
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray$c(_useState7, 2),
+    showRequiredError = _useState8[0],
+    setShowRequiredError = _useState8[1];
+  var isError = Boolean(invalid || status === 'error' || showRequiredError);
   var hasSelection = Array.isArray(selectedOptions) && selectedOptions.length > 0;
   var isInvalidEffective = Boolean(isError && !hasSelection);
-  var _useState7 = useState(0),
-    _useState8 = _slicedToArray$c(_useState7, 2),
-    tooltipKey = _useState8[0],
-    setTooltipKey = _useState8[1];
+  var _useState9 = useState(0),
+    _useState0 = _slicedToArray$c(_useState9, 2),
+    tooltipKey = _useState0[0],
+    setTooltipKey = _useState0[1];
   var multiSelectRef = useRef(null);
   var containerRef = useRef(null);
-  var _useState9 = useState(null),
-    _useState0 = _slicedToArray$c(_useState9, 2),
-    sortOrder = _useState0[0],
-    setSortOrder = _useState0[1];
-  var _useState1 = useState([]),
+  var _useState1 = useState(null),
     _useState10 = _slicedToArray$c(_useState1, 2),
-    collapsedGroups = _useState10[0],
-    setCollapsedGroups = _useState10[1];
+    sortOrder = _useState10[0],
+    setSortOrder = _useState10[1];
+  var _useState11 = useState([]),
+    _useState12 = _slicedToArray$c(_useState11, 2),
+    collapsedGroups = _useState12[0],
+    setCollapsedGroups = _useState12[1];
 
   // ────────────────────────────────────────────────────────────
   // FLATOPTIONS — Options aplaties (tableau plat)
@@ -41610,6 +41659,9 @@ var MultiSelect = function MultiSelect(props) {
       return (_group = group[optionGroupChildren || 'items']) !== null && _group !== void 0 ? _group : [];
     });
   }, [options, isGroupedOption, optionGroupChildren]);
+  useEffect(function () {
+    if (hasSelection) setShowRequiredError(false);
+  }, [hasSelection]);
   useEffect(function () {
     var next = objValue ? _toConsumableArray$a(objValue.map(function (opt) {
       return opt[optionValue];
@@ -42609,10 +42661,17 @@ var MultiSelect = function MultiSelect(props) {
     required: true,
     value: "",
     onChange: function onChange() {},
+    onInvalid: function onInvalid(e) {
+      e.preventDefault();
+      setShowRequiredError(true);
+    },
     style: {
       opacity: 0,
       height: 0,
-      position: 'absolute',
+      padding: 0,
+      margin: 0,
+      border: 'none',
+      display: 'block',
       pointerEvents: 'none'
     }
   })), isInvalidEffective && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("small", {

package/package.json

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