cecomponent 1.0.135 → 1.0.136

package/dist/ce-component-lib.mjs

@@ -43859,22 +43859,24 @@ const CEAdvancedMultiSelectDropdown = ({
   id: o
 }) => {
   const [l, c] = useState(!1), [f, u] = useState(!1), [x, d] = useState(""), y = useRef(null), m = useRef(null), p = t.filter(
-    (_) => _.label.toLowerCase().includes(x.toLowerCase())
-  ), E = (_) => {
+    (T) => T.label.toLowerCase().includes(x.toLowerCase())
+  ), E = (T) => {
     if (s) {
-      const T = i.includes(_.value);
+      const b = i.includes(T.value);
       n(
-        T ? i.filter((b) => b !== _.value) : [...i, _.value]
+        b ? i.filter((C) => C !== T.value) : [...i, T.value]
       ), d("");
     } else
-      n([_.value]), d(_.label), c(!1);
-  }, g = (_) => {
-    m.current && !m.current.contains(_.target) && (c(!1), u(!1));
+      n([T.value]), d(T.label), c(!1);
+  }, g = (T) => {
+    m.current && !m.current.contains(T.target) && (c(!1), u(!1));
   };
   useEffect(() => (document.addEventListener("mousedown", g), () => document.removeEventListener("mousedown", g)), []);
-  const S = (_) => {
-    var T;
-    return ((T = t.find((b) => b.value === _)) == null ? void 0 : T.label) || _;
+  const S = (T) => {
+    var b;
+    return ((b = t.find((C) => C.value === T)) == null ? void 0 : b.label) || T;
+  }, _ = (T) => {
+    T.stopPropagation(), d(""), n([]);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
@@ -43892,18 +43894,18 @@ const CEAdvancedMultiSelectDropdown = ({
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "autocomplete-label", children: e }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "input-area", children: [
-                s && i.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "selected-values", children: i.map((_) => /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "selected-tag", children: [
-                  S(_),
+                s && i.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "selected-values", children: i.map((T) => /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "selected-tag", children: [
+                  S(T),
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
                     "button",
                     {
-                      onClick: (T) => {
-                        T.stopPropagation(), n(i.filter((b) => b !== _));
+                      onClick: (b) => {
+                        b.stopPropagation(), n(i.filter((C) => C !== T));
                       },
                       children: "×"
                     }
                   )
-                ] }, _)) }),
+                ] }, T)) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   "input",
                   {
@@ -43911,17 +43913,20 @@ const CEAdvancedMultiSelectDropdown = ({
                     type: "text",
                     className: "autocomplete-input",
                     value: x,
-                    onChange: (_) => d(_.target.value),
+                    onChange: (T) => d(T.target.value),
                     onFocus: () => {
                       u(!0), c(!0);
                     }
                   }
                 ),
+                i.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "clear-icon", onClick: _, title: "Clear", children: "×" }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   "span",
                   {
                     className: "dropdown-toggle-icon",
-                    onClick: () => c((_) => !_),
+                    onClick: (T) => {
+                      T.stopPropagation(), c((b) => !b);
+                    },
                     children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M7 10l5 5 5-5H7z", fill: "gray" }) })
                   }
                 )
@@ -43937,25 +43942,25 @@ const CEAdvancedMultiSelectDropdown = ({
                 type: "checkbox",
                 checked: i.length === t.length,
                 onChange: () => {
-                  const _ = i.length === t.length;
-                  n(_ ? [] : t.map((T) => T.value));
+                  const T = i.length === t.length;
+                  n(T ? [] : t.map((b) => b.value));
                 }
               }
             ),
             "Select All"
           ] }) }),
-          p.map((_) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { onClick: () => E(_), children: s && a ? /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { children: [
+          p.map((T) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { onClick: () => E(T), children: s && a ? /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               "input",
               {
                 type: "checkbox",
-                checked: i.includes(_.value),
-                onChange: () => E(_),
-                onClick: (T) => T.stopPropagation()
+                checked: i.includes(T.value),
+                onChange: () => E(T),
+                onClick: (b) => b.stopPropagation()
               }
             ),
-            _.label
-          ] }) : _.label }, _.value))
+            T.label
+          ] }) : T.label }, T.value))
         ] })
       ]
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cecomponent",
   "description": "A React component library for building modern UIs for Cleanearth",
-  "version": "1.0.135",
+  "version": "1.0.136",
   "main": "dist/ce-component-lib.js",
   "module": "dist/ce-component-lib.mjs",
   "types": "dist/index.d.ts",