@algorithm-shift/design-system 1.2.969 → 1.2.971

package/dist/index.js

@@ -27887,14 +27887,46 @@ function useLazyDropdown(config) {
       };
     });
   }, []);
+  function extractAndEnforceUrlParams(apiUrl, enforceStrict) {
+    const urlObj = new URL(
+      apiUrl,
+      typeof window !== "undefined" ? window.location.origin : "http://localhost"
+    );
+    const cleaned = {};
+    let hasEmpty = false;
+    const baseUrl = urlObj.origin + urlObj.pathname;
+    urlObj.searchParams.forEach((value, key) => {
+      const isEmpty = value === "" || value === void 0 || value === null;
+      if (isEmpty) {
+        hasEmpty = true;
+        if (enforceStrict) return;
+        return;
+      }
+      cleaned[key] = value;
+    });
+    return {
+      baseUrl,
+      shouldAbort: enforceStrict && hasEmpty,
+      params: cleaned
+    };
+  }
   const fetchApiData = (0, import_react19.useCallback)(async (pageNum, term) => {
     if (!configRef.current.apiUrl) return [];
     const limit = PAGE_SIZE;
     const params = { page: pageNum, limit };
     if (term) params[configRef.current.dataLabel ? `${configRef.current.dataLabel}[ilike]` : "search[ilike]"] = term;
+    const { baseUrl, shouldAbort, params: urlParams } = extractAndEnforceUrlParams(
+      configRef.current.apiUrl,
+      configRef.current.enforceStrictQueryParams ?? false
+    );
+    if (shouldAbort) {
+      setLoading(false);
+      return [];
+    }
+    const finalParams = { ...urlParams, ...params };
     const axiosClient = configRef.current.axiosInstance ?? import_axios.default;
-    const res = await axiosClient.get(configRef.current.apiUrl, {
-      params,
+    const res = await axiosClient.get(baseUrl, {
+      params: finalParams,
       withCredentials: true
     });
     if (res.data?.success && Array.isArray(res.data.data)) {
@@ -27957,8 +27989,17 @@ function useLazyDropdown(config) {
           [`${configRef.current.dataKey}[in]`]: configRef.current.value.join(",")
         };
       }
-      const res = await axiosClient.get(configRef.current.apiUrl, {
-        params,
+      const { baseUrl, shouldAbort, params: urlParams } = extractAndEnforceUrlParams(
+        configRef.current.apiUrl,
+        configRef.current.enforceStrictQueryParams ?? false
+      );
+      if (shouldAbort) {
+        setLoading(false);
+        return;
+      }
+      const finalParams = { ...urlParams, ...params };
+      const res = await axiosClient.get(baseUrl, {
+        params: finalParams,
         withCredentials: true
       });
       if (res.data?.success && Array.isArray(res.data.data) && res.data.data.length > 0) {
@@ -28011,6 +28052,32 @@ function useLazyDropdown(config) {
       if (debounceTimer.current) clearTimeout(debounceTimer.current);
     };
   }, []);
+  const createNewOption = async (label) => {
+    if (!configRef.current.apiUrl) return null;
+    const axiosClient = configRef.current.axiosInstance ?? import_axios.default;
+    const apiUrl = configRef.current.apiUrl;
+    const urlObj = new URL(
+      apiUrl,
+      typeof window !== "undefined" ? window.location.origin : "http://localhost"
+    );
+    const queryParams = {};
+    urlObj.searchParams.forEach((value, key) => {
+      queryParams[key] = value;
+    });
+    const body = {
+      ...queryParams,
+      [configRef.current.dataLabel]: label
+    };
+    const res = await axiosClient.post(urlObj.origin + urlObj.pathname, body, {
+      withCredentials: true
+    });
+    if (res.data?.success && Array.isArray(res.data.data) && res.data.data.length > 0) {
+      const fetched = transformToOptions(res.data.data);
+      setOptions((prev) => uniqueOptions([...fetched, ...prev]));
+      return fetched[0];
+    }
+    return null;
+  };
   return {
     options,
     loading,
@@ -28018,7 +28085,8 @@ function useLazyDropdown(config) {
     loadMore,
     search,
     reset,
-    loadPage
+    loadPage,
+    createNewOption
   };
 }
 
@@ -28039,7 +28107,8 @@ function LazySelectDropdown({
   dataKey = "id",
   dataLabel = "name",
   errorMessage,
-  axiosInstance
+  axiosInstance,
+  enableAddNewOption = false
 }) {
   const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
   const [searchTerm, setSearchTerm] = (0, import_react20.useState)("");
@@ -28052,7 +28121,8 @@ function LazySelectDropdown({
     loadMore,
     search,
     reset,
-    loadPage
+    loadPage,
+    createNewOption
   } = useLazyDropdown({
     enabled: true,
     dataSource: source || "",
@@ -28110,6 +28180,15 @@ function LazySelectDropdown({
     reset();
     search("");
   };
+  const handleAddNewOption = async (newOption) => {
+    const option = await createNewOption(newOption);
+    if (option) {
+      onChange?.(option.value, id || "");
+      setIsOpen(false);
+      setSearchTerm("");
+      reset();
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ref: dropdownRef, className: "relative w-full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "input",
@@ -28179,7 +28258,19 @@ function LazySelectDropdown({
               ] }) : "Scroll for more..."
             }
           )
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "px-3 py-4 text-sm text-center text-gray-500", children: searchTerm ? `No results for "${searchTerm}"` : "No options available" })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "px-3 py-4 text-sm text-center text-gray-500", children: [
+          searchTerm ? `No results for "${searchTerm}"` : "No options available",
+          enableAddNewOption && searchTerm && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            "div",
+            {
+              onClick: () => {
+                handleAddNewOption(searchTerm);
+              },
+              className: "mt-2 px-3 py-2 bg-green-50 hover:bg-green-100 cursor-pointer text-green-700 rounded text-sm",
+              children: `Add "${searchTerm}"`
+            }
+          )
+        ] })
       }
     ) })
   ] });
@@ -28859,14 +28950,20 @@ function DateTimePicker({
   }, [date, mode]);
   const isInputDisabled = isDisabled || !isEditable;
   const [calendarMonthState, setCalendarMonthState] = React6.useState(() => {
-    return date ? new Date(date.getFullYear(), date.getMonth()) : new Date(year, 0);
+    const currentMonth = (/* @__PURE__ */ new Date()).getMonth();
+    return date ? new Date(date.getFullYear(), date.getMonth()) : new Date(year, currentMonth);
   });
   React6.useEffect(() => {
     setCalendarMonthState(new Date(year, calendarMonthState.getMonth()));
   }, [year]);
+  const handleToday = () => {
+    const today = /* @__PURE__ */ new Date();
+    const selectedYearDate = new Date(year, today.getMonth(), today.getDate());
+    updateDateTime(selectedYearDate);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-col", children: [
     /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Popover, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
         Button,
         {
           type: "button",
@@ -28882,17 +28979,28 @@ function DateTimePicker({
             borderColor: props.errorMessage ? "#f87171" : style?.borderColor
           },
           disabled: isInputDisabled,
-          children: displayValue || placeholder
+          children: [
+            displayValue || placeholder,
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Calendar1, { className: "absolute right-2 top-2" })
+          ]
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PopoverContent, { className: "w-auto text-sm p-2", align: "start", style: { fontSize: "0.75rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PopoverContent, { className: "w-auto text-sm p-2", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-col gap-1", children: [
         (mode === "date" || mode === "datetime") && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center justify-between gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("label", { className: "text-xs text-muted-foreground", children: "Year" }),
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              "label",
+              {
+                className: "text-xs text-blue-600 font-bold cursor-pointer",
+                role: "presentation",
+                onClick: handleToday,
+                children: "Today"
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               "select",
               {
-                className: "h-8 rounded border bg-background px-2 text-sm",
+                className: "h-8 rounded border bg-background px-2 text-xs",
                 value: year,
                 onChange: (e) => setYear(Number(e.target.value)),
                 disabled: isInputDisabled || isReadonly,
@@ -28913,7 +29021,8 @@ function DateTimePicker({
                 if (maxDate && d > maxDate) return true;
                 return false;
               },
-              initialFocus: true
+              className: "p-[10px]",
+              autoFocus: true
             }
           ) })
         ] }),
@@ -28922,7 +29031,7 @@ function DateTimePicker({
           /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             "select",
             {
-              className: "h-8 rounded border bg-background px-2 text-sm",
+              className: "h-8 rounded border bg-background px-2 text-xs",
               value: displayHours,
               onChange: handleHoursChange,
               disabled: isInputDisabled || isReadonly,
@@ -28933,7 +29042,7 @@ function DateTimePicker({
           /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             "select",
             {
-              className: "h-8 rounded border bg-background px-2 text-sm",
+              className: "h-8 rounded border bg-background px-2 text-xs",
               value: minutes,
               onChange: handleMinutesChange,
               disabled: isInputDisabled || isReadonly,
@@ -28946,7 +29055,7 @@ function DateTimePicker({
           /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
             "select",
             {
-              className: "h-8 rounded border bg-background px-2 text-sm",
+              className: "h-8 rounded border bg-background px-2 text-xs",
               value: amPm,
               onChange: handleAmPmChange,
               disabled: isInputDisabled || isReadonly,