@idds/react 1.5.43 → 1.5.45

package/dist/index.es.js

@@ -37,6 +37,17 @@ const iddsColorTokens = {
   "cyan-700": "var(--ina-cyan-700)",
   "cyan-800": "var(--ina-cyan-800)",
   "cyan-900": "var(--ina-cyan-900)",
+  // Teal Colors
+  "teal-50": "var(--ina-teal-50)",
+  "teal-100": "var(--ina-teal-100)",
+  "teal-200": "var(--ina-teal-200)",
+  "teal-300": "var(--ina-teal-300)",
+  "teal-400": "var(--ina-teal-400)",
+  "teal-500": "var(--ina-teal-500)",
+  "teal-600": "var(--ina-teal-600)",
+  "teal-700": "var(--ina-teal-700)",
+  "teal-800": "var(--ina-teal-800)",
+  "teal-900": "var(--ina-teal-900)",
   // Green Colors
   "green-50": "var(--ina-green-50)",
   "green-100": "var(--ina-green-100)",
@@ -81,6 +92,17 @@ const iddsColorTokens = {
   "orange-700": "var(--ina-orange-700)",
   "orange-800": "var(--ina-orange-800)",
   "orange-900": "var(--ina-orange-900)",
+  // Coral Colors
+  "coral-50": "var(--ina-coral-50)",
+  "coral-100": "var(--ina-coral-100)",
+  "coral-200": "var(--ina-coral-200)",
+  "coral-300": "var(--ina-coral-300)",
+  "coral-400": "var(--ina-coral-400)",
+  "coral-500": "var(--ina-coral-500)",
+  "coral-600": "var(--ina-coral-600)",
+  "coral-700": "var(--ina-coral-700)",
+  "coral-800": "var(--ina-coral-800)",
+  "coral-900": "var(--ina-coral-900)",
   // Red Colors
   "red-50": "var(--ina-red-50)",
   "red-100": "var(--ina-red-100)",
@@ -114,6 +136,17 @@ const iddsColorTokens = {
   "magenta-700": "var(--ina-magenta-700)",
   "magenta-800": "var(--ina-magenta-800)",
   "magenta-900": "var(--ina-magenta-900)",
+  // Violet Colors
+  "violet-50": "var(--ina-violet-50)",
+  "violet-100": "var(--ina-violet-100)",
+  "violet-200": "var(--ina-violet-200)",
+  "violet-300": "var(--ina-violet-300)",
+  "violet-400": "var(--ina-violet-400)",
+  "violet-500": "var(--ina-violet-500)",
+  "violet-600": "var(--ina-violet-600)",
+  "violet-700": "var(--ina-violet-700)",
+  "violet-800": "var(--ina-violet-800)",
+  "violet-900": "var(--ina-violet-900)",
   // Purple Colors
   "purple-50": "var(--ina-purple-50)",
   "purple-100": "var(--ina-purple-100)",
@@ -125,6 +158,17 @@ const iddsColorTokens = {
   "purple-700": "var(--ina-purple-700)",
   "purple-800": "var(--ina-purple-800)",
   "purple-900": "var(--ina-purple-900)",
+  // Lilac Colors
+  "lilac-50": "var(--ina-lilac-50)",
+  "lilac-100": "var(--ina-lilac-100)",
+  "lilac-200": "var(--ina-lilac-200)",
+  "lilac-300": "var(--ina-lilac-300)",
+  "lilac-400": "var(--ina-lilac-400)",
+  "lilac-500": "var(--ina-lilac-500)",
+  "lilac-600": "var(--ina-lilac-600)",
+  "lilac-700": "var(--ina-lilac-700)",
+  "lilac-800": "var(--ina-lilac-800)",
+  "lilac-900": "var(--ina-lilac-900)",
   // Indigo Colors
   "indigo-50": "var(--ina-indigo-50)",
   "indigo-100": "var(--ina-indigo-100)",
@@ -278,6 +322,7 @@ const inapasColorTokens = {
 };
 const bgnColorTokens = {
   // Primary shades
+  "primary-25": "var(--ina-primary-25)",
   "primary-50": "var(--ina-primary-50)",
   "primary-100": "var(--ina-primary-100)",
   "primary-200": "var(--ina-primary-200)",
@@ -288,7 +333,19 @@ const bgnColorTokens = {
   "primary-700": "var(--ina-primary-700)",
   "primary-800": "var(--ina-primary-800)",
   "primary-900": "var(--ina-primary-900)",
-  "primary-primary": "var(--ina-primary-primary)"
+  "primary-primary": "var(--ina-primary-primary)",
+  // Secondary shades
+  "secondary-25": "var(--ina-secondary-25)",
+  "secondary-50": "var(--ina-secondary-50)",
+  "secondary-100": "var(--ina-secondary-100)",
+  "secondary-200": "var(--ina-secondary-200)",
+  "secondary-300": "var(--ina-secondary-300)",
+  "secondary-400": "var(--ina-secondary-400)",
+  "secondary-500": "var(--ina-secondary-500)",
+  "secondary-600": "var(--ina-secondary-600)",
+  "secondary-700": "var(--ina-secondary-700)",
+  "secondary-800": "var(--ina-secondary-800)",
+  "secondary-900": "var(--ina-secondary-900)"
 };
 const bknColorTokens = {
   // Primary shades
@@ -2340,6 +2397,13 @@ function BasicDropdown({
     if (disabled) return;
     handleOpenChange(!isOpen);
   };
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleOpenChange(!isOpen);
+    }
+  };
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
@@ -2348,11 +2412,18 @@ function BasicDropdown({
         }
       }
     };
+    const handleEscape = (event) => {
+      if (event.key === "Escape" && isOpen) {
+        handleOpenChange(false);
+      }
+    };
     document.addEventListener("mousedown", handleClickOutside);
     document.addEventListener("touchstart", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
       document.removeEventListener("touchstart", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
     };
   }, [isOpen, onOpenChange]);
   const isPrimitiveTrigger = typeof trigger === "string" || typeof trigger === "number";
@@ -2363,11 +2434,18 @@ function BasicDropdown({
         ref: triggerRef,
         className: clsx("ina-basic-dropdown__trigger", triggerClassName),
         onClick: toggle,
+        tabIndex: !isPrimitiveTrigger ? 0 : -1,
+        role: !isPrimitiveTrigger ? "button" : void 0,
+        "aria-haspopup": !isPrimitiveTrigger ? "true" : void 0,
+        "aria-expanded": !isPrimitiveTrigger ? isOpen : void 0,
+        onKeyDown: !isPrimitiveTrigger ? handleKeyDown : void 0,
         children: isPrimitiveTrigger ? /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
             disabled,
+            "aria-haspopup": "true",
+            "aria-expanded": isOpen,
             className: clsx(
               "ina-basic-dropdown__trigger-button",
               isOpen && "ina-basic-dropdown__trigger-button--open"
@@ -3601,10 +3679,12 @@ function Modal({
   const [isVisible, setIsVisible] = useState(false);
   const closeBtnRef = useRef(null);
   const labelId = useRef(`modal-title-${Math.random().toString(36).slice(2)}`);
+  const previousFocus = useRef(null);
   useEffect(() => setMounted(true), []);
   useEffect(() => {
     if (open) {
       setShouldRender(true);
+      previousFocus.current = document.activeElement;
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
           setIsVisible(true);
@@ -3612,6 +3692,10 @@ function Modal({
       });
     } else {
       setIsVisible(false);
+      if (previousFocus.current) {
+        previousFocus.current.focus();
+        previousFocus.current = null;
+      }
       const timer = setTimeout(() => {
         setShouldRender(false);
       }, 300);
@@ -3629,13 +3713,39 @@ function Modal({
     }
   }, [shouldRender, mounted]);
   useEffect(() => {
-    var _a;
     if (!shouldRender || !mounted) return;
     if (isVisible) {
-      (_a = closeBtnRef.current) == null ? void 0 : _a.focus();
+      setTimeout(() => {
+        var _a;
+        (_a = closeBtnRef.current) == null ? void 0 : _a.focus();
+      }, 50);
     }
     const onKey = (e) => {
-      if (e.key === "Escape" && isVisible) onClose();
+      if (e.key === "Escape" && isVisible) {
+        onClose();
+        return;
+      }
+      if (e.key === "Tab" && isVisible) {
+        const modalElement = document.querySelector(".ina-modal__dialog");
+        if (!modalElement) return;
+        const focusableElements = modalElement.querySelectorAll(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        if (focusableElements.length === 0) return;
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        if (e.shiftKey) {
+          if (document.activeElement === firstElement) {
+            e.preventDefault();
+            lastElement.focus();
+          }
+        } else {
+          if (document.activeElement === lastElement) {
+            e.preventDefault();
+            firstElement.focus();
+          }
+        }
+      }
     };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
@@ -5221,10 +5331,13 @@ const SelectDropdown = ({
   required,
   selectionTitle
 }) => {
+  var _a;
   const [isOpen, setIsOpen] = useState(false);
   const [internalSearchTerm, setInternalSearchTerm] = useState("");
+  const [focusedIndex, setFocusedIndex] = useState(-1);
   const containerRef = useRef(null);
   const scrollContainerRef = useRef(null);
+  const optionsRefs = useRef([]);
   const searchTimeoutRef = useRef(null);
   const selectedLabelsCacheRef = useRef(/* @__PURE__ */ new Map());
   const isSearchControlled = searchValue !== void 0;
@@ -5251,19 +5364,11 @@ const SelectDropdown = ({
       setInternalSearchTerm(searchValue);
     }
   }, [searchValue, isSearchControlled, internalSearchTerm]);
-  const handleLoadMoreClick = () => {
-    if (disabled || !hasMore || loading || !onLoadMore) return;
-    onLoadMore(currentPage + 1);
-  };
   useEffect(() => {
     const handleClickOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         setIsOpen(false);
-        if (isSearchControlled) {
-          onSearchChange == null ? void 0 : onSearchChange("");
-        } else {
-          setInternalSearchTerm("");
-        }
+        setFocusedIndex(-1);
         onClose == null ? void 0 : onClose();
       }
     };
@@ -5366,6 +5471,18 @@ const SelectDropdown = ({
   const filteredOptions = onSearch ? options : !searchable ? options : options.filter(
     (o) => o.label.toLowerCase().includes(searchTerm.toLowerCase())
   );
+  useEffect(() => {
+    setFocusedIndex(-1);
+  }, [filteredOptions]);
+  useEffect(() => {
+    var _a2;
+    if (isOpen && focusedIndex >= 0 && optionsRefs.current[focusedIndex]) {
+      (_a2 = optionsRefs.current[focusedIndex]) == null ? void 0 : _a2.scrollIntoView({
+        block: "nearest",
+        inline: "nearest"
+      });
+    }
+  }, [focusedIndex, isOpen]);
   const handleSearchChange = (e) => {
     const newValue = e.target.value;
     if (isSearchControlled) {
@@ -5483,11 +5600,11 @@ const SelectDropdown = ({
     return "";
   };
   const handleTriggerClick = () => {
-    var _a;
+    var _a2;
     if (!isOpen && !disabled) {
       setIsOpen(true);
     }
-    const input = (_a = containerRef.current) == null ? void 0 : _a.querySelector("input");
+    const input = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelector("input");
     if (input) {
       input.focus();
     }
@@ -5496,9 +5613,62 @@ const SelectDropdown = ({
     if (!isOpen) setIsOpen(true);
     handleSearchChange(e);
   };
+  const handleOptionSelect = (option) => {
+    var _a2;
+    if (disabled || option.disabled) return;
+    if (multiple) {
+      const prev = Array.isArray(selected) ? [...selected] : [];
+      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);
+      const input = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelector("input");
+      if (input) input.focus();
+    } else {
+      const isSelected = option.value === singleSelected;
+      if (isSelected) {
+        selectedLabelsCacheRef.current.delete(option.value);
+        onSelect(null, option);
+      } else {
+        selectedLabelsCacheRef.current.set(option.value, option.label);
+        onSelect(option.value, option);
+      }
+      setIsOpen(false);
+      setFocusedIndex(-1);
+      if (isSearchControlled) {
+        onSearchChange == null ? void 0 : onSearchChange("");
+      } else {
+        setInternalSearchTerm("");
+      }
+      onClose == null ? void 0 : onClose();
+    }
+  };
   const handleInputKeyDown = (e) => {
-    if (e.key === "Enter") {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (!isOpen) {
+        setIsOpen(true);
+        setFocusedIndex(0);
+      } else {
+        setFocusedIndex(
+          (prev) => prev < filteredOptions.length - 1 ? prev + 1 : prev
+        );
+      }
+    } else if (e.key === "ArrowUp") {
       e.preventDefault();
+      setFocusedIndex((prev) => prev > 0 ? prev - 1 : prev);
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (isOpen && focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
+        handleOptionSelect(filteredOptions[focusedIndex]);
+      }
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setIsOpen(false);
+      setFocusedIndex(-1);
     }
   };
   return /* @__PURE__ */ jsxs(
@@ -5535,7 +5705,8 @@ const SelectDropdown = ({
                   onChange: onInputChange,
                   onKeyDown: handleInputKeyDown,
                   disabled,
-                  "aria-autocomplete": "list"
+                  "aria-autocomplete": "list",
+                  "aria-activedescendant": isOpen && focusedIndex >= 0 ? `option-${(_a = filteredOptions[focusedIndex]) == null ? void 0 : _a.value}` : void 0
                 }
               ) : /* @__PURE__ */ jsx(
                 "span",
@@ -5581,6 +5752,12 @@ const SelectDropdown = ({
                 {
                   ref: scrollContainerRef,
                   className: "ina-select-dropdown__options",
+                  onScroll: (e) => {
+                    const target = e.currentTarget;
+                    if (target.scrollHeight - target.scrollTop - target.clientHeight < 50 && !loading && hasMore && onLoadMore && !disabled) {
+                      onLoadMore(currentPage + 1);
+                    }
+                  },
                   children: [
                     selectionTitle && /* @__PURE__ */ jsx("div", { className: "ina-select-dropdown__selection-title", children: selectionTitle }),
                     filteredOptions.map((option, index) => {
@@ -5618,56 +5795,26 @@ const SelectDropdown = ({
                           }
                         );
                       }
-                      const handleOptionClick = (e) => {
-                        var _a;
-                        e.preventDefault();
-                        e.stopPropagation();
-                        if (disabled || option.disabled) return;
-                        if (multiple) {
-                          const prev = Array.isArray(selected) ? [...selected] : [];
-                          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);
-                          const input = (_a = containerRef.current) == null ? void 0 : _a.querySelector("input");
-                          if (input) input.focus();
-                        } else {
-                          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("");
-                          } else {
-                            setInternalSearchTerm("");
-                          }
-                          onClose == null ? void 0 : onClose();
-                        }
-                      };
                       return /* @__PURE__ */ jsxs(
                         "button",
                         {
+                          ref: (el) => {
+                            optionsRefs.current[index] = el;
+                          },
+                          id: `option-${option.value}`,
                           type: "button",
-                          onClick: handleOptionClick,
+                          onClick: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            handleOptionSelect(option);
+                          },
                           disabled: disabled || option.disabled,
                           className: clsx(
                             "ina-select-dropdown__option",
                             !multiple && isSelected && "ina-select-dropdown__option--selected-single",
                             multiple && isSelected && "ina-select-dropdown__option--selected-multiple",
-                            (disabled || option.disabled) && "ina-select-dropdown__option--disabled"
+                            (disabled || option.disabled) && "ina-select-dropdown__option--disabled",
+                            index === focusedIndex && "ina-select-dropdown__option--focused"
                           ),
                           children: [
                             /* @__PURE__ */ jsx("div", { className: "ina-select-dropdown__option-content", children: labelContent }),
@@ -5678,15 +5825,6 @@ const SelectDropdown = ({
                       );
                     }),
                     filteredOptions.length === 0 && !loading && /* @__PURE__ */ jsx("div", { className: "ina-select-dropdown__empty", children: "No results" }),
-                    hasMore && !loading && filteredOptions.length > 0 && onLoadMore && !disabled && /* @__PURE__ */ jsx("div", { className: "ina-select-dropdown__load-more", children: /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: handleLoadMoreClick,
-                        className: "ina-select-dropdown__load-more-button",
-                        children: "Tampilkan Lebih Banyak"
-                      }
-                    ) }),
                     loading && /* @__PURE__ */ jsxs("div", { className: "ina-select-dropdown__loading", children: [
                       /* @__PURE__ */ jsx("div", { className: "ina-select-dropdown__loading-spinner", children: /* @__PURE__ */ jsx(IconLoader2, { size: 20 }) }),
                       /* @__PURE__ */ jsx("span", { className: "ina-select-dropdown__loading-text", children: "Loading..." })