@idds/react 1.5.27 → 1.5.29

package/dist/index.es.js

@@ -2318,10 +2318,11 @@ function Dropdown({
   dropdownClassName = "",
   dropdownStyle,
   disabled = false,
-  dropdownWidth = 160
+  dropdownWidth
 }) {
   const [open, setOpen] = useState(false);
-  const [dropdownPosition, setDropdownPosition] = useState({ vertical: "bottom", horizontal: "right" });
+  const [dropdownPosition, setDropdownPosition] = useState({ vertical: "bottom", horizontal: "left" });
+  const [triggerWidth, setTriggerWidth] = useState(0);
   const containerRef = useRef(null);
   const [mounted, setMounted] = useState(false);
   useEffect(() => {
@@ -2344,26 +2345,13 @@ function Dropdown({
     if (disabled) return;
     if (containerRef.current) {
       const rect = containerRef.current.getBoundingClientRect();
-      const dropdownHeight = items.length * 40 + 16;
+      setTriggerWidth(rect.width);
+      const dropdownHeight = 200;
       const fitsBelow = rect.bottom + dropdownHeight <= window.innerHeight;
       const vertical = fitsBelow ? "bottom" : "top";
-      const fitsRight = rect.right + dropdownWidth <= window.innerWidth;
-      const horizontal = fitsRight ? "right" : "left";
-      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-      const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-      let top = 0;
-      let left = 0;
-      if (vertical === "bottom") {
-        top = rect.bottom + scrollTop + 8;
-      } else {
-        top = rect.top + scrollTop - dropdownHeight - 8;
-      }
-      if (horizontal === "right") {
-        left = rect.left + scrollLeft;
-      } else {
-        left = rect.right + scrollLeft - dropdownWidth;
-      }
-      setDropdownPosition({ vertical, horizontal, top, left });
+      const fitsRight = rect.left + (dropdownWidth ?? 160) <= window.innerWidth;
+      const horizontal = fitsRight ? "left" : "right";
+      setDropdownPosition({ vertical, horizontal });
     }
     setOpen((o) => !o);
   };
@@ -2379,40 +2367,66 @@ function Dropdown({
     `ina-dropdown__menu--align-${dropdownPosition.horizontal}`,
     dropdownClassName
   );
-  const menuContent = open && mounted ? /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: menuClasses,
-      style: {
-        width: dropdownWidth,
-        position: "absolute",
-        top: dropdownPosition.top,
-        left: dropdownPosition.left,
-        ...dropdownStyle
-      },
-      role: "menu",
-      onMouseDown: (e) => e.stopPropagation(),
-      children: /* @__PURE__ */ jsx("ul", { className: "ina-dropdown__list", children: items.map((item, idx) => {
-        if (item && typeof item === "object" && "props" in item && item.props.className) {
-          return /* @__PURE__ */ jsx("li", {
-            role: "none",
-            // Clone element dengan className hasil clsx
-            // @ts-ignore
-            children: React.cloneElement(item, {
+  const effectiveWidth = dropdownWidth ?? triggerWidth;
+  const isStandardTrigger = typeof trigger === "string" || typeof trigger === "number";
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: dropdownContainerClasses, children: [
+    /* @__PURE__ */ jsx("div", { onClick: handleTriggerClick, className: triggerClasses, children: isStandardTrigger ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(
+          "ina-dropdown__trigger-button",
+          open && "ina-dropdown__trigger-button--open"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "ina-dropdown__trigger-content", children: trigger }),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "ina-dropdown__trigger-icon",
+              width: "16",
+              height: "16",
+              viewBox: "0 0 16 16",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M4 6L8 10L12 6",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          )
+        ]
+      }
+    ) : trigger }),
+    open && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: menuClasses,
+        style: {
+          width: effectiveWidth || void 0,
+          minWidth: effectiveWidth ? void 0 : "160px",
+          ...dropdownStyle
+        },
+        role: "menu",
+        onMouseDown: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ jsx("ul", { className: "ina-dropdown__list", children: items.map((item, idx) => {
+          if (item && typeof item === "object" && "props" in item && item.props.className) {
+            return /* @__PURE__ */ jsx("li", { role: "none", children: React.cloneElement(item, {
               className: clsx(
                 "ina-dropdown__item",
                 item.props.className
               )
-            })
-          }, idx);
-        }
-        return /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsx("div", { className: "ina-dropdown__item", children: item }) }, idx);
-      }) })
-    }
-  ) : null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { ref: containerRef, className: dropdownContainerClasses, children: /* @__PURE__ */ jsx("div", { onClick: handleTriggerClick, className: triggerClasses, children: trigger }) }),
-    mounted && createPortal(menuContent, document.body)
+            }) }, idx);
+          }
+          return /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsx("div", { className: "ina-dropdown__item", children: item }) }, idx);
+        }) })
+      }
+    )
   ] });
 }
 const ALLOWED_MIME_TYPES = {
@@ -4230,7 +4244,7 @@ const COUNTRIES = [
   { code: "KR", name: "Korea, Republic of", dialCode: "+82" },
   { code: "KW", name: "Kuwait", dialCode: "+965" },
   { code: "KG", name: "Kyrgyzstan", dialCode: "+996" },
-  { code: "LA", name: "Lao People's Democratic Republic", dialCode: "+856" },
+  { code: "LA", name: "Laos", dialCode: "+856" },
   { code: "LV", name: "Latvia", dialCode: "+371" },
   { code: "LB", name: "Lebanon", dialCode: "+961" },
   { code: "LS", name: "Lesotho", dialCode: "+266" },
@@ -5067,7 +5081,7 @@ function PhoneInput({
               value: countrySearch,
               onChange: (e) => setCountrySearch(e.target.value),
               type: "text",
-              placeholder: "Search countries...",
+              placeholder: "Cari",
               className: "ina-phone-input__country-search-input"
             }
           ) }),
@@ -5091,7 +5105,12 @@ function PhoneInput({
                     height: "18"
                   }
                 ),
-                /* @__PURE__ */ jsx("span", { className: "ina-phone-input__country-name", children: country.name }),
+                /* @__PURE__ */ jsxs("span", { className: "ina-phone-input__country-name", children: [
+                  country.name,
+                  " (",
+                  country.code,
+                  ")"
+                ] }),
                 /* @__PURE__ */ jsx("span", { className: "ina-phone-input__country-dial-code", children: country.dialCode })
               ]
             },
@@ -5194,7 +5213,7 @@ function toCssSize(v) {
   if (v === void 0 || v === null) return void 0;
   return typeof v === "number" ? `${v}px` : v;
 }
-function SelectDropdown({
+const SelectDropdown = ({
   options,
   selected,
   onSelect,
@@ -5227,8 +5246,9 @@ function SelectDropdown({
   searchable = true,
   onSelectedRawChange,
   label,
-  required
-}) {
+  required,
+  selectionTitle
+}) => {
   const [isOpen, setIsOpen] = useState(false);
   const [internalSearchTerm, setInternalSearchTerm] = useState("");
   const containerRef = useRef(null);
@@ -5285,10 +5305,6 @@ function SelectDropdown({
       }
     };
   }, []);
-  const toggleOpen = () => {
-    if (disabled) return;
-    setIsOpen((prev) => !prev);
-  };
   const isArraySelected = multiple && Array.isArray(selected);
   const selectedArray = isArraySelected ? selected : [];
   const singleSelected = !multiple ? selected : null;
@@ -5472,19 +5488,47 @@ function SelectDropdown({
   const triggerClasses = clsx(
     "ina-select-dropdown__trigger",
     `ina-select-dropdown__trigger--size-${size}`,
+    // Status classes
+    // Note: You might want to add props for status (error, warning, etc) if needed
     disabled && "ina-select-dropdown__trigger--disabled",
     triggerClassName
   );
-  const triggerTextClasses = clsx(
-    "ina-select-dropdown__trigger-text",
-    disabled && "ina-select-dropdown__trigger-text--disabled",
-    triggerLabel === placeholder && !disabled && "ina-select-dropdown__trigger-text--placeholder",
-    triggerLabel !== placeholder && !disabled && "ina-select-dropdown__trigger-text--selected"
-  );
   const triggerIconClasses = clsx(
     "ina-select-dropdown__trigger-icon",
     disabled && "ina-select-dropdown__trigger-icon--disabled"
   );
+  const getInputValue = () => {
+    if (multiple) {
+      return searchTerm;
+    }
+    if (isOpen) {
+      return searchTerm;
+    }
+    if (singleSelected !== null && singleSelected !== void 0 && singleSelected !== "") {
+      const label2 = getLabelForValue(singleSelected);
+      return label2 || "";
+    }
+    return "";
+  };
+  const handleTriggerClick = () => {
+    var _a;
+    if (!isOpen && !disabled) {
+      setIsOpen(true);
+    }
+    const input = (_a = containerRef.current) == null ? void 0 : _a.querySelector("input");
+    if (input) {
+      input.focus();
+    }
+  };
+  const onInputChange = (e) => {
+    if (!isOpen) setIsOpen(true);
+    handleSearchChange(e);
+  };
+  const handleInputKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+    }
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -5497,15 +5541,39 @@ function SelectDropdown({
           required && /* @__PURE__ */ jsx("span", { className: "ina-select-dropdown__required", children: "*" })
         ] }),
         /* @__PURE__ */ jsxs(
-          "button",
+          "div",
           {
-            type: "button",
-            onClick: toggleOpen,
-            disabled,
+            onClick: handleTriggerClick,
             className: triggerClasses,
+            role: "combobox",
+            "aria-expanded": isOpen,
+            "aria-haspopup": "listbox",
             children: [
               prefixNode && /* @__PURE__ */ jsx("div", { className: "ina-select-dropdown__trigger-prefix", children: prefixNode }),
-              /* @__PURE__ */ jsx("span", { className: triggerTextClasses, children: triggerLabel }),
+              searchable && !disabled ? /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  className: "ina-select-dropdown__trigger-input",
+                  placeholder: triggerLabel,
+                  value: getInputValue(),
+                  onChange: onInputChange,
+                  onKeyDown: handleInputKeyDown,
+                  disabled,
+                  "aria-autocomplete": "list"
+                }
+              ) : /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: clsx(
+                    "ina-select-dropdown__trigger-text",
+                    disabled && "ina-select-dropdown__trigger-text--disabled",
+                    triggerLabel === placeholder && !disabled && "ina-select-dropdown__trigger-text--placeholder",
+                    triggerLabel !== placeholder && !disabled && "ina-select-dropdown__trigger-text--selected"
+                  ),
+                  children: triggerLabel
+                }
+              ),
               isOpen ? /* @__PURE__ */ jsx(
                 IconChevronUp,
                 {
@@ -5527,26 +5595,11 @@ function SelectDropdown({
           {
             className: clsx("ina-select-dropdown__panel", panelClassName),
             style: {
-              width: toCssSize(panelWidth) ?? toCssSize(width),
+              // width is now 100% via CSS, but we can override if panelWidth is provided
+              width: panelWidth ? toCssSize(panelWidth) : void 0,
               maxHeight: toCssSize(panelHeight)
-              // ← tinggi popup dapat diatur
             },
             children: [
-              searchable && /* @__PURE__ */ jsx("div", { className: "ina-select-dropdown__search", children: /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "text",
-                  "aria-label": `Search ${placeholder}`,
-                  value: searchTerm,
-                  onChange: handleSearchChange,
-                  placeholder: "Cari data",
-                  disabled,
-                  className: clsx(
-                    "ina-select-dropdown__search-input",
-                    disabled && "ina-select-dropdown__search-input--disabled"
-                  )
-                }
-              ) }),
               showPreviewValue && renderSelectedPreviewContent() !== null && /* @__PURE__ */ jsx("div", { className: "ina-select-dropdown__preview", children: renderSelectedPreviewContent() }),
               /* @__PURE__ */ jsxs(
                 "div",
@@ -5554,6 +5607,7 @@ function SelectDropdown({
                   ref: scrollContainerRef,
                   className: "ina-select-dropdown__options",
                   children: [
+                    selectionTitle && /* @__PURE__ */ jsx("div", { className: "ina-select-dropdown__selection-title", children: selectionTitle }),
                     filteredOptions.map((option, index) => {
                       const isSelected = multiple ? selectedArray.includes(option.value) : option.value === singleSelected;
                       const labelContent = renderOptionLabel ? renderOptionLabel(option) : /* @__PURE__ */ jsx("span", { className: "ina-select-dropdown__option-label", children: option.label });
@@ -5589,8 +5643,11 @@ function SelectDropdown({
                           }
                         );
                       }
-                      const handleOptionClick = () => {
-                        if (disabled) return;
+                      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];
@@ -5603,6 +5660,8 @@ function SelectDropdown({
                             );
                           }
                           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);
@@ -5628,12 +5687,12 @@ function SelectDropdown({
                         {
                           type: "button",
                           onClick: handleOptionClick,
-                          disabled,
+                          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 && "ina-select-dropdown__option--disabled"
+                            (disabled || option.disabled) && "ina-select-dropdown__option--disabled"
                           ),
                           children: [
                             /* @__PURE__ */ jsx("div", { className: "ina-select-dropdown__option-content", children: labelContent }),
@@ -5666,7 +5725,7 @@ function SelectDropdown({
       ]
     }
   );
-}
+};
 function Drawer({
   isOpen,
   onClose,