@idds/react 1.4.0 → 1.4.4

package/dist/index.es.js

@@ -535,7 +535,9 @@ function clsx() {
   for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
   return n;
 }
-const AccordionGroupContext = createContext(null);
+const AccordionGroupContext = createContext(
+  null
+);
 function useAccordionGroup() {
   const context = useContext(AccordionGroupContext);
   return context;
@@ -557,19 +559,29 @@ function AccordionGroup(props) {
   const [version, setVersion] = useState(0);
   const openIndexesRef = useRef(openIndexes);
   openIndexesRef.current = openIndexes;
-  const registerItem = useCallback((itemId, defaultOpen) => {
-    const index = itemsRef.current.size;
-    itemsRef.current.set(itemId, index);
-    if (!allowMultiple && defaultOpen) {
-      setOpenIndexes((prev) => {
-        if (prev.length === 0) {
-          return [index];
-        }
-        return prev;
-      });
-    }
-    return index;
-  }, [allowMultiple]);
+  const registerItem = useCallback(
+    (itemId, defaultOpen) => {
+      const index = itemsRef.current.size;
+      itemsRef.current.set(itemId, index);
+      if (defaultOpen) {
+        setOpenIndexes((prev) => {
+          if (allowMultiple) {
+            if (!prev.includes(index)) {
+              return [...prev, index];
+            }
+            return prev;
+          } else {
+            if (prev.length === 0) {
+              return [index];
+            }
+            return prev;
+          }
+        });
+      }
+      return index;
+    },
+    [allowMultiple]
+  );
   const unregisterItem = useCallback((itemId) => {
     const index = itemsRef.current.get(itemId);
     if (index !== void 0) {
@@ -629,7 +641,14 @@ function AccordionGroup(props) {
       version
       // Include version untuk trigger re-render
     }),
-    [allowMultiple, registerItem, unregisterItem, handleItemToggle, isItemOpen, version]
+    [
+      allowMultiple,
+      registerItem,
+      unregisterItem,
+      handleItemToggle,
+      isItemOpen,
+      version
+    ]
   );
   return /* @__PURE__ */ jsx(AccordionGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: clsx("ina-accordion-group", className), children }) });
 }
@@ -2839,13 +2858,13 @@ function FileUpload({
                 uploadedFile.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--uploading", children: /* @__PURE__ */ jsx(
                   IconLoader2,
                   {
-                    size: 16,
+                    size: 20,
                     className: "ina-file-upload__file-icon--spinning"
                   }
                 ) }),
-                uploadedFile.status === "success" && /* @__PURE__ */ jsx("div", { className: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--success", children: /* @__PURE__ */ jsx(IconCircleCheck, { size: 16, stroke: "2" }) }),
-                uploadedFile.status === "error" && /* @__PURE__ */ jsx("div", { className: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--error", children: /* @__PURE__ */ jsx(IconCircleX, { size: 16, stroke: "2" }) }),
-                uploadedFile.status === "idle" && /* @__PURE__ */ jsx("div", { className: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--success", children: /* @__PURE__ */ jsx(IconCircleCheck, { size: 16, stroke: "2" }) })
+                uploadedFile.status === "success" && /* @__PURE__ */ jsx("div", { className: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--success", children: /* @__PURE__ */ jsx(IconCircleCheck, { size: 20, stroke: "2" }) }),
+                uploadedFile.status === "error" && /* @__PURE__ */ jsx("div", { className: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--error", children: /* @__PURE__ */ jsx(IconCircleX, { size: 20, stroke: "2" }) }),
+                uploadedFile.status === "idle" && /* @__PURE__ */ jsx("div", { className: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--success", children: /* @__PURE__ */ jsx(IconCircleCheck, { size: 20, stroke: "2" }) })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "ina-file-upload__file-info", children: [
                 /* @__PURE__ */ jsx("div", { className: "ina-file-upload__file-name", children: sanitizeFileName(uploadedFile.file.name) }),
@@ -2863,7 +2882,7 @@ function FileUpload({
                         updateFileStatus(originalIndex, "idle");
                       },
                       title: "Coba lagi",
-                      children: /* @__PURE__ */ jsx(IconRotateClockwise, { size: 16 })
+                      children: /* @__PURE__ */ jsx(IconRotateClockwise, { size: 20 })
                     }
                   ),
                   /* @__PURE__ */ jsx(
@@ -2873,7 +2892,7 @@ function FileUpload({
                       className: "ina-file-upload__file-remove",
                       onClick: () => removeFile(originalIndex),
                       title: "Hapus file",
-                      children: /* @__PURE__ */ jsx(IconTrash, { size: 16 })
+                      children: /* @__PURE__ */ jsx(IconTrash, { size: 20 })
                     }
                   )
                 ] }),
@@ -2884,7 +2903,7 @@ function FileUpload({
                     className: "ina-file-upload__file-remove",
                     onClick: () => removeFile(originalIndex),
                     title: "Batalkan upload",
-                    children: /* @__PURE__ */ jsx(IconX, { size: 16 })
+                    children: /* @__PURE__ */ jsx(IconX, { size: 20 })
                   }
                 ),
                 uploadedFile.status === "success" && /* @__PURE__ */ jsx(
@@ -2894,7 +2913,7 @@ function FileUpload({
                     className: "ina-file-upload__file-remove",
                     onClick: () => removeFile(originalIndex),
                     title: "Hapus file",
-                    children: /* @__PURE__ */ jsx(IconTrash, { size: 16 })
+                    children: /* @__PURE__ */ jsx(IconTrash, { size: 20 })
                   }
                 ),
                 uploadedFile.status === "idle" && /* @__PURE__ */ jsx(
@@ -2904,7 +2923,7 @@ function FileUpload({
                     className: "ina-file-upload__file-remove",
                     onClick: () => removeFile(originalIndex),
                     title: "Hapus file",
-                    children: /* @__PURE__ */ jsx(IconTrash, { size: 16 })
+                    children: /* @__PURE__ */ jsx(IconTrash, { size: 20 })
                   }
                 )
               ] })
@@ -3261,7 +3280,7 @@ function SingleFileUpload({
                   handleRemove();
                 },
                 "aria-label": "Remove file",
-                children: /* @__PURE__ */ jsx(IconTrash, { size: 20 })
+                children: /* @__PURE__ */ jsx(IconTrash, { size: 18 })
               }
             )
           ] })
@@ -4162,13 +4181,15 @@ function SelectDropdown({
   onSearchChange,
   disabled = false,
   showPreviewValue = true,
-  searchable = true
+  searchable = true,
+  onSelectedRawChange
 }) {
   const [isOpen, setIsOpen] = useState(false);
   const [internalSearchTerm, setInternalSearchTerm] = useState("");
   const containerRef = useRef(null);
   const scrollContainerRef = useRef(null);
   const searchTimeoutRef = useRef(null);
+  const selectedLabelsCacheRef = useRef(/* @__PURE__ */ new Map());
   const isSearchControlled = searchValue !== void 0;
   const searchTerm = isSearchControlled ? searchValue : internalSearchTerm;
   useEffect(() => {
@@ -4226,16 +4247,88 @@ function SelectDropdown({
   const isArraySelected = multiple && Array.isArray(selected);
   const selectedArray = isArraySelected ? selected : [];
   const singleSelected = !multiple ? selected : null;
+  const getLabelForValue = (value) => {
+    if (selectedLabelsCacheRef.current.has(value)) {
+      return selectedLabelsCacheRef.current.get(value) || null;
+    }
+    const found = options.find((o) => o.value === value);
+    if (found) {
+      selectedLabelsCacheRef.current.set(value, found.label);
+      return found.label;
+    }
+    return null;
+  };
+  const getOptionForValue = (value) => {
+    const label = getLabelForValue(value);
+    if (label !== null) {
+      return { label, value };
+    }
+    const found = options.find((o) => o.value === value);
+    return found || null;
+  };
+  useEffect(() => {
+    if (onSelectedRawChange) {
+      let selectedRaw = null;
+      if (multiple) {
+        if (selectedArray.length > 0) {
+          const rawOptions = selectedArray.map((val) => getOptionForValue(val)).filter((opt) => opt !== null);
+          selectedRaw = rawOptions.length > 0 ? rawOptions : null;
+        }
+      } else {
+        if (singleSelected !== null && singleSelected !== void 0 && singleSelected !== "") {
+          selectedRaw = getOptionForValue(singleSelected);
+        }
+      }
+      onSelectedRawChange(selectedRaw);
+    }
+  }, [selected, multiple, options]);
+  useEffect(() => {
+    const cache = selectedLabelsCacheRef.current;
+    options.forEach((option) => {
+      if (cache.has(option.value)) {
+        cache.set(option.value, option.label);
+      }
+    });
+  }, [options]);
+  useEffect(() => {
+    const cache = selectedLabelsCacheRef.current;
+    if (multiple && Array.isArray(selected)) {
+      selected.forEach((value) => {
+        if (!cache.has(value)) {
+          const found = options.find((o) => o.value === value);
+          if (found) {
+            cache.set(value, found.label);
+          }
+        }
+      });
+      cache.forEach((_, value) => {
+        if (!selected.includes(value)) {
+          cache.delete(value);
+        }
+      });
+    } else if (selected !== null && selected !== void 0 && selected !== "") {
+      if (!cache.has(selected)) {
+        const found = options.find((o) => o.value === selected);
+        if (found) {
+          cache.set(selected, found.label);
+        }
+      }
+    } else {
+      cache.clear();
+    }
+  }, [selected, multiple, options]);
   let triggerLabel;
   if (multiple) {
     if (!selectedArray.length) triggerLabel = placeholder;
     else if (selectedArray.length > 3)
       triggerLabel = `${selectedArray.length} data terpilih`;
-    else
-      triggerLabel = options.filter((o) => selectedArray.includes(o.value)).map((o) => o.label).join(", ");
+    else {
+      const labels = selectedArray.map((val) => getLabelForValue(val)).filter((label) => label !== null);
+      triggerLabel = labels.length > 0 ? labels.join(", ") : placeholder;
+    }
   } else {
-    const found = options.find((o) => o.value === singleSelected);
-    triggerLabel = found ? found.label : placeholder;
+    const label = getLabelForValue(singleSelected);
+    triggerLabel = label || placeholder;
   }
   const filteredOptions = onSearch ? options : !searchable ? options : options.filter(
     (o) => o.label.toLowerCase().includes(searchTerm.toLowerCase())
@@ -4249,6 +4342,7 @@ function SelectDropdown({
     }
   };
   const handleRemoveSelected = (value) => {
+    selectedLabelsCacheRef.current.delete(value);
     if (onRemoveSelected) {
       onRemoveSelected(value);
     } else {
@@ -4268,13 +4362,14 @@ function SelectDropdown({
     if (multiple && selectedArray.length > 0) {
       return /* @__PURE__ */ jsxs("div", { className: "ina-select-dropdown__preview-content", children: [
         selectedArray.slice(0, 3).map((value, index) => {
-          const option = options.find((o) => o.value === value);
+          const label = getLabelForValue(value);
+          const displayLabel = label || value;
           return /* @__PURE__ */ jsxs(
             "div",
             {
               className: "ina-select-dropdown__preview-item ina-select-dropdown__preview-item--multiple",
               children: [
-                /* @__PURE__ */ jsx("span", { className: "ina-select-dropdown__preview-item-text", children: (option == null ? void 0 : option.label) || value }),
+                /* @__PURE__ */ jsx("span", { className: "ina-select-dropdown__preview-item-text", children: displayLabel }),
                 !disabled && /* @__PURE__ */ jsx(
                   "button",
                   {
@@ -4284,7 +4379,7 @@ function SelectDropdown({
                       handleRemoveSelected(value);
                     },
                     className: "ina-select-dropdown__preview-remove ina-select-dropdown__preview-remove--multiple",
-                    "aria-label": `Remove ${(option == null ? void 0 : option.label) || value}`,
+                    "aria-label": `Remove ${displayLabel}`,
                     disabled,
                     children: /* @__PURE__ */ jsx(IconX, { size: 12 })
                   }
@@ -4302,9 +4397,10 @@ function SelectDropdown({
       ] });
     }
     if (!multiple && singleSelected !== null && singleSelected !== void 0 && singleSelected !== "") {
-      const option = options.find((o) => o.value === singleSelected);
+      const label = getLabelForValue(singleSelected);
+      const displayLabel = label || singleSelected;
       return /* @__PURE__ */ jsx("div", { className: "ina-select-dropdown__preview-content", children: /* @__PURE__ */ jsxs("div", { className: "ina-select-dropdown__preview-item ina-select-dropdown__preview-item--single", children: [
-        /* @__PURE__ */ jsx("span", { className: "ina-select-dropdown__preview-item-text", children: (option == null ? void 0 : option.label) || singleSelected }),
+        /* @__PURE__ */ jsx("span", { className: "ina-select-dropdown__preview-item-text", children: displayLabel }),
         !disabled && /* @__PURE__ */ jsx(
           "button",
           {
@@ -4314,7 +4410,7 @@ function SelectDropdown({
               handleRemoveSelected(singleSelected);
             },
             className: "ina-select-dropdown__preview-remove ina-select-dropdown__preview-remove--single",
-            "aria-label": `Remove ${(option == null ? void 0 : option.label) || singleSelected}`,
+            "aria-label": `Remove ${displayLabel}`,
             disabled,
             children: /* @__PURE__ */ jsx(IconX, { size: 12 })
           }
@@ -4448,11 +4544,27 @@ function SelectDropdown({
                         if (disabled) return;
                         if (multiple) {
                           const prev = Array.isArray(selected) ? [...selected] : [];
-                          onSelect(
-                            prev.includes(option.value) ? prev.filter((v) => v !== option.value) : [...prev, option.value]
-                          );
+                          const newSelected = prev.includes(option.value) ? prev.filter((v) => v !== option.value) : [...prev, option.value];
+                          if (prev.includes(option.value)) {
+                            selectedLabelsCacheRef.current.delete(option.value);
+                          } else {
+                            selectedLabelsCacheRef.current.set(
+                              option.value,
+                              option.label
+                            );
+                          }
+                          onSelect(newSelected);
                         } else {
-                          onSelect(isSelected ? null : option.value, option);
+                          if (isSelected) {
+                            selectedLabelsCacheRef.current.delete(option.value);
+                            onSelect(null, option);
+                          } else {
+                            selectedLabelsCacheRef.current.set(
+                              option.value,
+                              option.label
+                            );
+                            onSelect(option.value, option);
+                          }
                           setIsOpen(false);
                           if (isSearchControlled) {
                             onSearchChange == null ? void 0 : onSearchChange("");