@appquality/unguess-design-system 4.0.40 → 4.0.41

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# v4.0.41 (Thu Jun 19 2025)
+
+#### 🐛 Bug Fix
+
+- Add disabled to multiselect [#530](https://github.com/AppQuality/unguess-design-system/pull/530) ([@sinatragianpaolo](https://github.com/sinatragianpaolo) [@d-beezee](https://github.com/d-beezee))
+- feat: Implement disabled state for MultiSelect component to prevent interactions [#529](https://github.com/AppQuality/unguess-design-system/pull/529) ([@sinatragianpaolo](https://github.com/sinatragianpaolo))
+
+#### Authors: 2
+
+- [@d-beezee](https://github.com/d-beezee)
+- Gianpaolo Sinatra ([@sinatragianpaolo](https://github.com/sinatragianpaolo))
+
+---
+
 # v4.0.40 (Tue Jun 17 2025)
 
 #### 🐛 Bug Fix

package/build/index.d.ts

@@ -5419,7 +5419,7 @@ export declare const ModalFullScreen: {
     FooterItem: ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & RefAttributes<HTMLSpanElement>>;
 };
 
-export declare const MultiSelect: ({ options, onChange, creatable, i18n, maxItems, size, menuHeight, listboxAppendToNode, }: MultiSelectProps) => JSX_2.Element;
+export declare const MultiSelect: ({ options, onChange, creatable, i18n, maxItems, size, menuHeight, listboxAppendToNode, disabled }: MultiSelectProps) => JSX_2.Element;
 
 declare type MultiSelectProps = {
     maxItems?: number;
@@ -5437,6 +5437,7 @@ declare type MultiSelectProps = {
         addNew?: (value: string) => string;
         showMore?: (value: number) => string;
     };
+    disabled?: boolean;
 };
 
 /**

package/build/index.js

@@ -76352,75 +76352,79 @@ const ntt = (e) => /* @__PURE__ */ W.createElement("svg", { width: 16, height: 1
   maxItems: i,
   size: o,
   menuHeight: a,
-  listboxAppendToNode: s
+  listboxAppendToNode: s,
+  disabled: l
 }) => {
-  const [l, d] = Ue(""), [h, m] = Ue(e);
+  const [d, h] = Ue(""), [m, y] = Ue(e);
   return Ye(() => {
-    const y = e.filter(
-      (w) => w.label.trim().toLowerCase().indexOf(l.trim().toLowerCase()) !== -1
+    const w = e.filter(
+      (C) => C.label.trim().toLowerCase().indexOf(d.trim().toLowerCase()) !== -1
     );
-    m(y);
-  }, [l, e]), /* @__PURE__ */ M.jsxs(ef, { children: [
+    y(w);
+  }, [d, e]), /* @__PURE__ */ M.jsxs(ef, { children: [
     /* @__PURE__ */ M.jsx(Wp, { hidden: !0, children: (r == null ? void 0 : r.label) ?? "Multiselect" }),
     /* @__PURE__ */ M.jsxs(
       ps,
       {
-        renderValue: ({ selection: y }) => {
-          if (!y || Array.isArray(y) && y.length === 0)
+        isDisabled: l,
+        renderValue: ({ selection: w }) => {
+          if (!w || Array.isArray(w) && w.length === 0)
             return /* @__PURE__ */ M.jsx("div", { style: { color: Ie.palette.grey[400] }, children: (r == null ? void 0 : r.placeholder) ?? "Select items..." });
         },
-        renderExpandTags: r != null && r.showMore ? (y) => r.showMore ? r.showMore(y) : "" : void 0,
+        renderExpandTags: r != null && r.showMore ? (w) => r.showMore ? r.showMore(w) : "" : void 0,
         listboxAppendToNode: s,
         maxHeight: "auto",
         isCompact: o !== "medium",
         isMultiselectable: !0,
         maxTags: i,
-        inputValue: l,
-        selectionValue: e.filter((y) => y.selected).map((y) => y.id.toString()),
+        inputValue: d,
+        selectionValue: e.filter((w) => w.selected).map((w) => w.id.toString()),
         listboxMaxHeight: a ?? "200px",
         isAutocomplete: !0,
-        onChange: ({ type: y, inputValue: w, selectionValue: C }) => {
-          var E;
-          if (y === "input:change") {
-            d(w || "");
-            return;
-          }
-          if (t && (y === "fn:setSelectionValue" || y === "option:click" || y === "input:keyDown:Enter") && Array.isArray(C)) {
-            const I = C.map((R) => {
-              const _ = e.find(($) => $.id === parseInt(R));
-              return _ ? {
-                ..._,
-                selected: !0
-              } : {
-                id: void 0,
-                label: R,
-                selected: !0
-              };
-            }), L = I.filter((R) => R.id), k = (E = I.find((R) => !R.id)) == null ? void 0 : E.label;
-            t(
-              e.map((R) => ({
-                ...R,
-                selected: L.some((_) => _.id === R.id)
-              })),
-              k || void 0
-            ).then(() => d(""));
+        onChange: ({ type: w, inputValue: C, selectionValue: E }) => {
+          var I;
+          if (!l) {
+            if (w === "input:change") {
+              h(C || "");
+              return;
+            }
+            if (t && (w === "fn:setSelectionValue" || w === "option:click" || w === "input:keyDown:Enter") && Array.isArray(E)) {
+              const L = E.map((_) => {
+                const $ = e.find((F) => F.id === parseInt(_));
+                return $ ? {
+                  ...$,
+                  selected: !0
+                } : {
+                  id: void 0,
+                  label: _,
+                  selected: !0
+                };
+              }), k = L.filter((_) => _.id), R = (I = L.find((_) => !_.id)) == null ? void 0 : I.label;
+              t(
+                e.map((_) => ({
+                  ..._,
+                  selected: k.some(($) => $.id === _.id)
+                })),
+                R || void 0
+              ).then(() => h(""));
+            }
           }
         },
         children: [
-          e.map((y) => /* @__PURE__ */ M.jsx(
+          e.map((w) => /* @__PURE__ */ M.jsx(
             ho,
             {
-              isHidden: !h.some((w) => w.id === y.id),
-              value: y.id.toString(),
-              label: y.label,
-              isSelected: y.selected,
+              isHidden: !m.some((C) => C.id === w.id),
+              value: w.id.toString(),
+              label: w.label,
+              isSelected: w.selected,
               tagProps: {
                 isPill: !0
               }
             },
-            y.id
+            w.id
           )),
-          h.length === 0 && !n && /* @__PURE__ */ M.jsx(
+          m.length === 0 && !n && /* @__PURE__ */ M.jsx(
             ho,
             {
               isDisabled: !0,
@@ -76428,17 +76432,17 @@ const ntt = (e) => /* @__PURE__ */ W.createElement("svg", { width: 16, height: 1
               label: (r == null ? void 0 : r.noMatches) ?? "No matches found"
             }
           ),
-          n && l.length > 0 && !h.find(
-            (y) => y.label.toLowerCase() === l.toLowerCase()
+          n && d.length > 0 && !m.find(
+            (w) => w.label.toLowerCase() === d.toLowerCase()
           ) ? /* @__PURE__ */ M.jsxs(M.Fragment, { children: [
             /* @__PURE__ */ M.jsx(Oc, {}),
             /* @__PURE__ */ M.jsx(
               ho,
               {
                 tagProps: { isPill: !0 },
-                value: l,
+                value: d,
                 icon: /* @__PURE__ */ M.jsx(ntt, {}),
-                label: r != null && r.addNew ? r.addNew(l) : `Want to add "${l}"?`
+                label: r != null && r.addNew ? r.addNew(d) : `Want to add "${d}"?`
               }
             )
           ] }) : null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "4.0.40",
+  "version": "4.0.41",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",