unifyedx-storybook-new 0.1.30 → 0.1.31

package/dist/unifyedx-storybook-new.css

@@ -1096,11 +1096,6 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .ring-2 {
-    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-
   .ring-black {
     --tw-ring-color: var(--color-black);
   }
@@ -1109,10 +1104,6 @@
     --tw-ring-color: var(--gray300);
   }
 
-  .ring-indigo-600 {
-    --tw-ring-color: var(--color-indigo-600);
-  }
-
   .ring-red-500 {
     --tw-ring-color: var(--color-red-500);
   }
@@ -1191,11 +1182,6 @@
     transition-timing-function: var(--ease-out);
   }
 
-  .outline-none {
-    --tw-outline-style: none;
-    outline-style: none;
-  }
-
   .select-none {
     -webkit-user-select: none;
     user-select: none;
@@ -1279,6 +1265,10 @@
     --tw-ring-color: var(--color-blue-500);
   }
 
+  .focus\:ring-indigo-600:focus {
+    --tw-ring-color: var(--color-indigo-600);
+  }
+
   .focus\:ring-offset-2:focus {
     --tw-ring-offset-width: 2px;
     --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1311,6 +1301,11 @@
       font-size: var(--text-sm);
       line-height: var(--tw-leading, var(--text-sm--line-height));
     }
+
+    .sm\:leading-6 {
+      --tw-leading: calc(var(--spacing) * 6);
+      line-height: calc(var(--spacing) * 6);
+    }
   }
 }
 

package/dist/unifyedx-storybook-new.es.js

@@ -70328,7 +70328,6 @@ const AddUserGroupsRolesModal = ({
 function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
 }
-const toId = (v) => String(v);
 function MultiSelect({
   label,
   options = [],
@@ -70340,61 +70339,74 @@ function MultiSelect({
   placeholder = "Select options",
   error = null,
   displayLimit = 3,
-  // New prop
-  selectionLimit = -1
-  // New prop
+  selectionLimit = -1,
+  // NEW: search behavior
+  searchMode = "client",
+  // "client" | "server"
+  onSearch,
+  // (query: string) => void (required if searchMode==="server")
+  serverLoading = false,
+  minSearchChars = 2,
+  // NEW: mappers (id/label keys)
+  getOptionId = (o) => String(o.id),
+  getOptionLabel = (o) => o.name
 }) {
   const labelId = useId$1();
   const errorId = useId$1();
   const [searchQuery, setSearchQuery] = useState("");
+  const lastFiredQueryRef = useRef("");
   const optionsById = useMemo(() => {
     const m = /* @__PURE__ */ new Map();
-    for (const o of options) m.set(toId(o.id), o);
+    for (const o of options) m.set(getOptionId(o), o);
     return m;
-  }, [options]);
+  }, [options, getOptionId]);
   const selectedObjs = useMemo(() => {
     if (!Array.isArray(selected)) return [];
     return selected.map((v) => {
-      if (v && typeof v === "object") return optionsById.get(toId(v.id)) || null;
-      return optionsById.get(toId(v));
+      if (v && typeof v === "object") {
+        return optionsById.get(getOptionId(v)) || null;
+      }
+      return optionsById.get(String(v));
     }).filter(Boolean);
-  }, [selected, optionsById]);
-  const filteredOptions = useMemo(() => {
-    if (!searchQuery) {
-      return options;
+  }, [selected, optionsById, getOptionId]);
+  const clientFiltered = useMemo(() => {
+    if (!searchQuery) return options;
+    const q = searchQuery.toLowerCase();
+    return options.filter((o) => getOptionLabel(o).toLowerCase().includes(q));
+  }, [options, searchQuery, getOptionLabel]);
+  useEffect(() => {
+    if (searchMode !== "server") return;
+    if (searchQuery.length >= minSearchChars && searchQuery !== lastFiredQueryRef.current) {
+      lastFiredQueryRef.current = searchQuery;
+      onSearch && onSearch(searchQuery);
     }
-    const lowerCaseQuery = searchQuery.toLowerCase();
-    return options.filter(
-      (option) => option.name.toLowerCase().includes(lowerCaseQuery)
-    );
-  }, [options, searchQuery]);
+  }, [searchQuery, searchMode, minSearchChars, onSearch]);
+  const filteredOptions = searchMode === "client" ? clientFiltered : options;
   const displayValue = () => {
     if (!selectedObjs.length) {
-      return /* @__PURE__ */ jsx("span", { className: " text-gray-500", children: placeholder });
+      return /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: placeholder });
     }
     const displayedChips = selectedObjs.slice(0, displayLimit);
-    const remainingCount = selectedObjs.length - displayLimit;
-    return /* @__PURE__ */ jsxs("div", { className: " flex  flex-wrap  gap-2", children: [
+    const remaining = selectedObjs.length - displayLimit;
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
       displayedChips.map((o) => /* @__PURE__ */ jsx(
         "span",
         {
-          className: " px-2  py-1  text-xs  font-medium  text-blue-800  bg-blue-100  rounded-full",
-          children: o.name
+          className: "px-2 py-1 text-xs font-medium text-blue-800 bg-blue-100 rounded-full",
+          children: getOptionLabel(o)
         },
-        toId(o.id)
+        getOptionId(o)
       )),
-      remainingCount > 0 && /* @__PURE__ */ jsxs("span", { className: " px-2  py-1  text-xs  font-medium  text-gray-600  bg-gray-200  rounded-full", children: [
+      remaining > 0 && /* @__PURE__ */ jsxs("span", { className: "px-2 py-1 text-xs font-medium text-gray-600 bg-gray-200 rounded-full", children: [
         "+",
-        remainingCount,
+        remaining,
         " more"
       ] })
     ] });
   };
   const handleChange = (nextObjs) => {
-    const ids = Array.from(new Set(nextObjs.map((o) => toId(o.id))));
-    if (selectionLimit !== -1 && ids.length > selectionLimit) {
-      return;
-    }
+    const ids = Array.from(new Set(nextObjs.map((o) => getOptionId(o))));
+    if (selectionLimit !== -1 && ids.length > selectionLimit) return;
     onChange(ids);
   };
   return /* @__PURE__ */ jsx(Listbox, { value: selectedObjs, onChange: handleChange, multiple: true, by: "id", children: ({ open }) => /* @__PURE__ */ jsxs("div", { children: [
@@ -70402,11 +70414,11 @@ function MultiSelect({
       Listbox.Label,
       {
         id: labelId,
-        className: " block  text-sm  font-medium  leading-6  text-gray-900",
+        className: "block text-sm font-medium leading-6 text-gray-900",
         children: label
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: " relative  mt-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative mt-2", children: [
       /* @__PURE__ */ jsxs(
         Listbox.Button,
         {
@@ -70415,12 +70427,12 @@ function MultiSelect({
           "aria-describedby": error ? errorId : void 0,
           onBlur,
           className: classNames(
-            " relative  w-full  min-h-[38px]  cursor-default  rounded-md  bg-white  py-1.5  pl-3  pr-10  text-left  text-gray-900  shadow-sm  ring-1  ring-inset focus: outline-none focus: ring-2 focus: ring-indigo-600 sm: text-sm sm: leading-6",
-            error ? " ring-red-500" : " ring-gray-300"
+            "relative w-full min-h-[38px] cursor-default rounded-md bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset focus:outline-none focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6",
+            error ? "ring-red-500" : "ring-gray-300"
           ),
           children: [
-            /* @__PURE__ */ jsx("span", { className: " block  truncate", children: displayValue() }),
-            /* @__PURE__ */ jsx("span", { className: " absolute  inset-y-0  right-0  flex  items-center  pr-2  pointer-events-none", children: /* @__PURE__ */ jsx(ChevronsUpDown, { className: " w-5  h-5  text-gray-400", "aria-hidden": "true" }) })
+            /* @__PURE__ */ jsx("span", { className: "block truncate", children: displayValue() }),
+            /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none", children: /* @__PURE__ */ jsx(ChevronsUpDown, { className: "w-5 h-5 text-gray-400", "aria-hidden": "true" }) })
           ]
         }
       ),
@@ -70429,20 +70441,23 @@ function MultiSelect({
         {
           as: Fragment$1,
           show: open,
-          leave: " transition  ease-in  duration-100",
-          leaveFrom: " opacity-100",
-          leaveTo: " opacity-0",
-          children: /* @__PURE__ */ jsxs(Listbox.Options, { className: " absolute  z-10  w-full  py-1  mt-1  overflow-auto  text-base  bg-white  rounded-md  shadow-lg  max-h-60  ring-1  ring-black  ring-opacity-5 focus: outline-none sm: text-sm", children: [
-            /* @__PURE__ */ jsx("div", { className: " p-2  sticky  top-0  bg-white  z-20  shadow-sm", children: /* @__PURE__ */ jsx(
+          leave: "transition ease-in duration-100",
+          leaveFrom: "opacity-100",
+          leaveTo: "opacity-0",
+          children: /* @__PURE__ */ jsxs(Listbox.Options, { className: "absolute z-10 w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm", children: [
+            /* @__PURE__ */ jsx("div", { className: "p-2 sticky top-0 bg-white z-20 shadow-sm", children: /* @__PURE__ */ jsx(
               SearchBar,
               {
                 value: searchQuery,
                 onDebouncedChange: setSearchQuery,
-                placeholder: "Search options..."
+                placeholder: searchMode === "server" ? `Search (min ${minSearchChars})…` : "Search options…"
               }
             ) }),
-            filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: " py-2  px-3  text-gray-500", children: "No options found." }) : filteredOptions.map((option) => {
-              const isSelected = selectedObjs.some((o) => toId(o.id) === toId(option.id));
+            searchMode === "server" && serverLoading && /* @__PURE__ */ jsx("div", { className: "py-2 px-3 text-gray-500", children: "Loading…" }),
+            filteredOptions.length === 0 && !serverLoading ? /* @__PURE__ */ jsx("div", { className: "py-2 px-3 text-gray-500", children: searchMode === "server" ? searchQuery.length < minSearchChars ? `Type at least ${minSearchChars} characters to search.` : "No results." : "No options found." }) : filteredOptions.map((option) => {
+              const id = getOptionId(option);
+              const labelText = getOptionLabel(option);
+              const isSelected = selectedObjs.some((o) => getOptionId(o) === id);
               const isDisabled = selectionLimit !== -1 && selectedObjs.length >= selectionLimit && !isSelected;
               return /* @__PURE__ */ jsx(
                 Listbox.Option,
@@ -70450,39 +70465,39 @@ function MultiSelect({
                   value: option,
                   disabled: isDisabled,
                   className: ({ active }) => classNames(
-                    isDisabled ? " text-gray-400  bg-white  cursor-not-allowed" : active ? " bg-indigo-600  text-white" : " text-gray-900",
-                    " relative  cursor-default  select-none  py-2  pl-3  pr-9"
+                    isDisabled ? "text-gray-400 bg-white cursor-not-allowed" : active ? "bg-indigo-600 text-white" : "text-gray-900",
+                    "relative cursor-default select-none py-2 pl-3 pr-9"
                   ),
-                  children: ({ selected: isSelected2, active }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                  children: ({ selected: isSel, active }) => /* @__PURE__ */ jsxs(Fragment, { children: [
                     /* @__PURE__ */ jsx(
                       "span",
                       {
                         className: classNames(
-                          isSelected2 ? " font-semibold" : " font-normal",
-                          " block  truncate"
+                          isSel ? "font-semibold" : "font-normal",
+                          "block truncate"
                         ),
-                        children: option.name
+                        children: labelText
                       }
                     ),
-                    isSelected2 && /* @__PURE__ */ jsx(
+                    isSel && /* @__PURE__ */ jsx(
                       "span",
                       {
                         className: classNames(
-                          active ? " text-white" : " text-indigo-600",
-                          " absolute  inset-y-0  right-0  flex  items-center  pr-4"
+                          active ? "text-white" : "text-indigo-600",
+                          "absolute inset-y-0 right-0 flex items-center pr-4"
                         ),
-                        children: /* @__PURE__ */ jsx(Check, { className: " w-5  h-5", "aria-hidden": "true" })
+                        children: /* @__PURE__ */ jsx(Check, { className: "w-5 h-5", "aria-hidden": "true" })
                       }
                     )
                   ] })
                 },
-                toId(option.id)
+                id
               );
             })
           ] })
         }
       ),
-      error && /* @__PURE__ */ jsx("p", { id: errorId, className: " mt-1  text-sm  text-red-600", children: error })
+      error && /* @__PURE__ */ jsx("p", { id: errorId, className: "mt-1 text-sm text-red-600", children: error })
     ] })
   ] }) });
 }
@@ -70490,8 +70505,8 @@ MultiSelect.propTypes = {
   label: PropTypes.string.isRequired,
   options: PropTypes.arrayOf(
     PropTypes.shape({
-      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-      name: PropTypes.string.isRequired
+      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      name: PropTypes.string
     })
   ),
   selected: PropTypes.array,
@@ -70500,7 +70515,15 @@ MultiSelect.propTypes = {
   placeholder: PropTypes.string,
   error: PropTypes.string,
   displayLimit: PropTypes.number,
-  selectionLimit: PropTypes.number
+  selectionLimit: PropTypes.number,
+  // NEW
+  searchMode: PropTypes.oneOf(["client", "server"]),
+  onSearch: PropTypes.func,
+  // required when searchMode="server"
+  serverLoading: PropTypes.bool,
+  minSearchChars: PropTypes.number,
+  getOptionId: PropTypes.func,
+  getOptionLabel: PropTypes.func
 };
 MultiSelect.defaultProps = {
   options: [],
@@ -70512,7 +70535,13 @@ MultiSelect.defaultProps = {
   },
   error: null,
   displayLimit: 3,
-  selectionLimit: -1
+  selectionLimit: -1,
+  searchMode: "client",
+  onSearch: void 0,
+  serverLoading: false,
+  minSearchChars: 2,
+  getOptionId: (o) => String(o.id),
+  getOptionLabel: (o) => o.name
 };
 
 export { AddUserGroupsRolesModal, Avatar, AvatarGroup, Badge, Breadcrumbs, Button$1 as Button, Checkbox, DatePicker, DateRangePicker$1 as DateRangePicker, FileUploadModal, FullScreenLoader, GenericFilter, Input, Modal, MultiSelect, OptionsMenu, PageHeader, PageLayout, Pagination, RadioGroup, SearchBar, Select, Sidebar, Spinner, Textarea, ToggleSwitch, Tooltip, UnifyedCoreButton, WizardModal, adGroupsListSearchApi, axiosDelete, axiosGet, axiosPatch, axiosPost, axiosPut, cookies$1 as cookies, createHttpClient, directoryPermissionsApi, filePermissionsApi, gateWayUrl, gatewayBase, getBaseUrl, getSnapshot, http, localStore, myDriveGatewayBaseV2, provisioningBase, rbacBase, searchRolesApi, sessionStore, userSearchBase };