@idds/react 1.5.44 → 1.5.45

package/dist/index.es.js

@@ -2397,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)) {
@@ -2405,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";
@@ -2420,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"
@@ -3658,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);
@@ -3669,6 +3692,10 @@ function Modal({
       });
     } else {
       setIsVisible(false);
+      if (previousFocus.current) {
+        previousFocus.current.focus();
+        previousFocus.current = null;
+      }
       const timer = setTimeout(() => {
         setShouldRender(false);
       }, 300);
@@ -3686,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);
@@ -5278,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;
@@ -5308,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();
       }
     };
@@ -5423,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) {
@@ -5540,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();
     }
@@ -5553,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(
@@ -5592,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",
@@ -5638,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) => {
@@ -5675,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 }),
@@ -5735,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..." })