@ttdk-design-system/library-react 0.0.0-stage → 1.0.0

package/src/web/selectbox/selectbox.tsx

@@ -0,0 +1,1048 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect } from "react";
+
+export type SelectboxUiProps = UiProps;
+export interface SelectboxOption {
+  /**
+   * Teks label tampilan pilihan dropdown.
+   */
+  label: string;
+
+  /**
+   * Nilai unik (value) dari opsi pilihan.
+   */
+  value: string | number;
+
+  /**
+   * Status apakah opsi ini dinonaktifkan dari pemilihan.
+   * @default false
+   */
+  disabled?: boolean;
+}
+export interface SelectboxProps {
+  /**
+   * Teks label judul field yang ditampilkan di atas selectbox (14px Semibold, #141313).
+   */
+  label?: string;
+
+  /**
+   * Style kustom untuk elemen label judul field (UiProps).
+   */
+  labelStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen label judul field.
+   */
+  labelClass?: string;
+
+  /**
+   * Style kustom untuk elemen trigger kontrol selectbox (UiProps).
+   */
+  controlStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen trigger kontrol selectbox.
+   */
+  controlClass?: string;
+
+  /**
+   * Style kustom untuk elemen menu dropdown popover (UiProps).
+   */
+  menuStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen menu dropdown popover.
+   */
+  menuClass?: string;
+
+  /**
+   * Alias untuk menuStyle (konsistensi dengan Dropdown listStyle).
+   */
+  listStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk opsi list dropdown (atau alias menuClass).
+   */
+  listClass?: string;
+
+  /**
+   * Style kustom untuk elemen pesan error validasi (UiProps).
+   */
+  errorMessageStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen pesan error validasi.
+   */
+  errorMessageClass?: string;
+
+  /**
+   * Style kustom untuk elemen helper text (UiProps).
+   */
+  helperTextStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen helper text.
+   */
+  helperTextClass?: string;
+
+  /**
+   * Menandai field sebagai opsi opsional dengan menambahkan teks '(Opsional)' (12px Regular, #9698A2).
+   * @default false
+   */
+  optional?: boolean;
+
+  /**
+   * Kustomisasi teks keterangan opsional.
+   * @default '(Opsional)'
+   */
+  optionalText?: string;
+
+  /**
+   * Teks petunjuk saat belum ada opsi yang dipilih.
+   * @default 'Pilih dropdown menu'
+   */
+  placeholder?: string;
+
+  /**
+   * Nilai terpilih saat ini (single string/number atau array nilai untuk mode multiple).
+   */
+  value?: any;
+
+  /**
+   * Nilai awal tidak terkontrol (uncontrolled initial value).
+   */
+  defaultValue?: any;
+
+  /**
+   * Daftar pilihan opsi dropdown. Dapat berupa array of object `{ label, value }` atau array of string.
+   */
+  options?: Array<SelectboxOption | string>;
+
+  /**
+   * Mode pemilihan jamak (multi-select) dengan tampilan chips/tag dan daftar checkbox.
+   * @default false
+   */
+  multiple?: boolean;
+
+  /**
+   * Mengaktifkan kotak pencarian (search input) di dalam menu dropdown.
+   * @default false
+   */
+  searchable?: boolean;
+
+  /**
+   * Placeholder pada kotak pencarian di dalam dropdown.
+   * @default 'Cari'
+   */
+  searchPlaceholder?: string;
+
+  /**
+   * Teks tombol terapkan pada footer multi-select.
+   * @default 'Terapkan'
+   */
+  applyText?: string;
+
+  /**
+   * Teks tombol reset pada footer multi-select.
+   * @default 'Reset'
+   */
+  resetText?: string;
+
+  /**
+   * Nama form field HTML.
+   */
+  name?: string;
+
+  /**
+   * Identifier unik elemen selectbox.
+   */
+  id?: string;
+
+  /**
+   * Status apakah selectbox sedang dalam kondisi error / tidak valid.
+   * @default false
+   */
+  error?: boolean;
+
+  /**
+   * Pesan teks penjelasan kesalahan validasi di bawah field.
+   */
+  errorMessage?: string;
+
+  /**
+   * Teks petunjuk atau keterangan bantuan di bawah field (12px Regular, #3C4245).
+   */
+  helperText?: string;
+
+  /**
+   * Posisi teks helper
+   */
+  helperTextPosition?: "top" | "bottom";
+
+  /**
+   * Skala ukuran selectbox.
+   * - `'sm'`: 36px
+   * - `'md'`: 48px (standar desain)
+   * - `'lg'`: 56px
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Bentuk sudut kelengkungan selectbox.
+   * - `'none'`: 0px
+   * - `'sm'`: 4px
+   * - `'md'`: 8px (standar desain)
+   * - `'lg'`: 12px
+   * - `'full'`: 9999px (kapsul)
+   * @default 'md'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Menjadikan lebar field selectbox memenuhi kontainer penuh (full-width 100%).
+   * @default false
+   */
+  block?: boolean;
+
+  /**
+   * Status apakah selectbox dinonaktifkan (disabled).
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Menandai field sebagai input wajib diisi (menampilkan tanda bintang merah *).
+   * @default false
+   */
+  required?: boolean;
+
+  /**
+   * Ref instance elemen control selectbox untuk akses DOM langsung.
+   */
+  inputRef?: any;
+
+  /**
+   * Menampilkan tombol × untuk menghapus pilihan yang sudah dipilih.
+   * @default false
+   */
+  clearable?: boolean;
+
+  /**
+   * Menampilkan spinner loading dan menonaktifkan interaksi selectbox.
+   * @default false
+   */
+  loading?: boolean;
+
+  /**
+   * Menjadikan selectbox hanya-baca (tidak bisa dibuka/diubah).
+   * @default false
+   */
+  readOnly?: boolean;
+
+  /**
+   * Inline CSS style object native.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Kustomisasi visual granular root / form-item (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Callback event saat nilai pilihan berubah.
+   */
+  onChange?: (value: any) => void;
+
+  /**
+   * Callback event saat pengguna mengetik di kolom pencarian.
+   */
+  onSearch?: (query: string) => void;
+
+  /**
+   * Callback event saat menu dropdown terbuka.
+   */
+  onOpen?: () => void;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Menonaktifkan middleware `shift` pada floating-ui sehingga posisi list popover
+   * tidak bergeser secara horizontal mengikuti tepi layar.
+   * Berguna saat ingin list tetap berada di tengah atau posisi placement yang ditentukan.
+   * @default false
+   */
+  disableShift?: boolean;
+
+  /**
+   * Callback event saat menu dropdown ditutup.
+   */
+  onClose?: () => void;
+}
+
+/**
+ * Komponen Selectbox TTDK sesuai spesifikasi Desain:
+ * - Single Select dengan Checkmark indicator dan Active Teal border (#00A3A6)
+ * - Multi-Select dengan Checkbox list, Chip tags (Label ✕), dan Action footer (Reset & Terapkan)
+ * - Searchable filter bar dengan input Cari 🔍
+ * - Visual States: Default, Active/Open, Filled, Error (#FF3A39), Disabled (#E4E5E7)
+ */
+
+import {
+  computePosition,
+  autoUpdate,
+  flip,
+  shift,
+  offset,
+  size as floatingSize,
+} from "@floating-ui/dom";
+import { buildUiVars, UiProps } from "../../core/types";
+
+function Selectbox(props: SelectboxProps) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const controlRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(() => false);
+
+  const [searchQuery, setSearchQuery] = useState(() => "");
+
+  const [currentValue, setCurrentValue] = useState(() =>
+    props.value !== undefined
+      ? props.value
+      : props.defaultValue !== undefined
+      ? props.defaultValue
+      : props.multiple
+      ? []
+      : ""
+  );
+
+  const [tempMultiValue, setTempMultiValue] = useState<any[]>(() => []);
+
+  const cleanupAutoUpdateRef = useRef<any>(null);
+
+  function updatePosition() {
+    if (!controlRef.current || !dropdownRef.current) return;
+    computePosition(controlRef.current, dropdownRef.current, {
+      placement: "bottom-start",
+      strategy: "absolute",
+      middleware: [
+        offset(4),
+        flip({
+          padding: {
+            top: 80,
+            bottom: 16,
+            left: 16,
+            right: 16,
+          },
+        }),
+        ...(props.disableShift
+          ? []
+          : [
+              shift({
+                padding: {
+                  top: 80,
+                  bottom: 16,
+                  left: 16,
+                  right: 16,
+                },
+              }),
+            ]),
+        floatingSize({
+          apply({ rects, elements, availableHeight }) {
+            const customWidth =
+              props.menuStyle?.width !== undefined &&
+              props.menuStyle?.width !== null &&
+              props.menuStyle?.width !== ""
+                ? typeof props.menuStyle.width === "number" ||
+                  /^\d+(\.\d+)?$/.test(String(props.menuStyle.width).trim())
+                  ? `${String(props.menuStyle.width).trim()}px`
+                  : String(props.menuStyle.width)
+                : props.listStyle?.width !== undefined &&
+                  props.listStyle?.width !== null &&
+                  props.listStyle?.width !== ""
+                ? typeof props.listStyle.width === "number" ||
+                  /^\d+(\.\d+)?$/.test(String(props.listStyle.width).trim())
+                  ? `${String(props.listStyle.width).trim()}px`
+                  : String(props.listStyle.width)
+                : props.ui?.dropdownWidth !== undefined &&
+                  props.ui?.dropdownWidth !== null &&
+                  props.ui?.dropdownWidth !== ""
+                ? typeof props.ui.dropdownWidth === "number" ||
+                  /^\d+(\.\d+)?$/.test(String(props.ui.dropdownWidth).trim())
+                  ? `${String(props.ui.dropdownWidth).trim()}px`
+                  : String(props.ui.dropdownWidth)
+                : undefined;
+            Object.assign(elements.floating.style, {
+              width: customWidth || `${rects.reference.width}px`,
+              minWidth: customWidth ? customWidth : undefined,
+              maxHeight: `${Math.min(availableHeight, 360)}px`,
+            });
+          },
+          padding: {
+            top: 80,
+            bottom: 16,
+            left: 16,
+            right: 16,
+          },
+        }),
+      ],
+    }).then(({ x, y, placement }: any) => {
+      if (!dropdownRef.current) return;
+      dropdownRef.current.style.left = `${x}px`;
+      dropdownRef.current.style.top = `${y}px`;
+      dropdownRef.current.setAttribute("data-placement", placement);
+    });
+  }
+
+  function startFloating() {
+    stopFloating();
+    if (controlRef.current && dropdownRef.current) {
+      cleanupAutoUpdateRef.current = autoUpdate(
+        controlRef.current,
+        dropdownRef.current,
+        () => {
+          updatePosition();
+        }
+      );
+    }
+  }
+
+  function stopFloating() {
+    if (typeof cleanupAutoUpdateRef.current === "function") {
+      cleanupAutoUpdateRef.current();
+      cleanupAutoUpdateRef.current = null;
+    }
+  }
+
+  function handleClickOutside(event: any) {
+    if (!dropdownRef.current) return;
+    const target = event.target;
+    if (
+      rootRef.current &&
+      !rootRef.current.contains(target) &&
+      dropdownRef.current &&
+      !dropdownRef.current.contains(target)
+    ) {
+      closeDropdown();
+    }
+  }
+
+  function onPointerDown(event: any) {
+    handleClickOutside(event);
+  }
+
+  function toggleDropdown() {
+    if (props.disabled || props.readOnly || props.loading) return;
+    const nextOpen = !isOpen;
+    setIsOpen(nextOpen);
+    if (nextOpen) {
+      if (props.multiple) {
+        setTempMultiValue(Array.isArray(currentValue) ? [...currentValue] : []);
+      }
+      if (props.onOpen) props.onOpen();
+    } else {
+      setSearchQuery("");
+      if (props.onClose) props.onClose();
+    }
+  }
+
+  function closeDropdown() {
+    stopFloating();
+    setIsOpen(false);
+    setSearchQuery("");
+    if (props.onClose) props.onClose();
+  }
+
+  function normalizedOptions() {
+    if (!props.options || !Array.isArray(props.options)) return [];
+    return props.options.map((opt: any) => {
+      if (typeof opt === "object" && opt !== null) {
+        return {
+          label: String(opt.label ?? opt.value ?? ""),
+          value: opt.value ?? opt.label ?? "",
+          disabled: Boolean(opt.disabled),
+        };
+      }
+      return {
+        label: String(opt),
+        value: opt,
+        disabled: false,
+      };
+    });
+  }
+
+  function filteredOptions() {
+    const opts = normalizedOptions();
+    if (!searchQuery || !searchQuery.trim()) return opts;
+    const q = searchQuery.toLowerCase().trim();
+    return opts.filter((opt: any) => opt.label.toLowerCase().includes(q));
+  }
+
+  function isOptionSelected(optValue: any) {
+    if (props.multiple) {
+      const list = isOpen
+        ? tempMultiValue
+        : Array.isArray(currentValue)
+        ? currentValue
+        : [];
+      return list.some((v: any) => String(v) === String(optValue));
+    }
+    return String(currentValue) === String(optValue);
+  }
+
+  function handleSingleSelect(opt: any) {
+    if (opt.disabled || props.disabled) return;
+    setCurrentValue(opt.value);
+    if (props.onChange) {
+      props.onChange(opt.value);
+    }
+    closeDropdown();
+  }
+
+  function handleMultiToggle(opt: any) {
+    if (opt.disabled || props.disabled) return;
+    const index = tempMultiValue.findIndex(
+      (v: any) => String(v) === String(opt.value)
+    );
+    if (index > -1) {
+      const next = [...tempMultiValue];
+      next.splice(index, 1);
+      setTempMultiValue(next);
+    } else {
+      setTempMultiValue([...tempMultiValue, opt.value]);
+    }
+  }
+
+  function handleRemoveTag(val: any, event: any) {
+    if (event && event.stopPropagation) event.stopPropagation();
+    if (props.disabled) return;
+    if (Array.isArray(currentValue)) {
+      const next = currentValue.filter((v: any) => String(v) !== String(val));
+      setCurrentValue(next);
+      setTempMultiValue([...next]);
+      if (props.onChange) {
+        props.onChange(next);
+      }
+    }
+  }
+
+  function handleApply() {
+    setCurrentValue([...tempMultiValue]);
+    if (props.onChange) {
+      props.onChange([...tempMultiValue]);
+    }
+    closeDropdown();
+  }
+
+  function handleReset() {
+    setTempMultiValue([]);
+    setCurrentValue([]);
+    if (props.onChange) {
+      props.onChange([]);
+    }
+  }
+
+  function handleSearchInput(e: any) {
+    setSearchQuery(e.target.value);
+    if (props.onSearch) {
+      props.onSearch(e.target.value);
+    }
+  }
+
+  function getSingleSelectedLabel() {
+    const opts = normalizedOptions();
+    const match = opts.find(
+      (opt: any) => String(opt.value) === String(currentValue)
+    );
+    return match ? match.label : "";
+  }
+
+  function getMultiSelectedChips() {
+    const list = Array.isArray(currentValue) ? currentValue : [];
+    const opts = normalizedOptions();
+    return list.map((val: any) => {
+      const match = opts.find((o: any) => String(o.value) === String(val));
+      return {
+        value: val,
+        label: match ? match.label : String(val),
+      };
+    });
+  }
+
+  function hasValue() {
+    if (props.multiple) {
+      return Array.isArray(currentValue) && currentValue.length > 0;
+    }
+    return (
+      currentValue !== undefined && currentValue !== "" && currentValue !== null
+    );
+  }
+
+  function handleClear(event: any) {
+    if (event && event.stopPropagation) event.stopPropagation();
+    if (props.disabled || props.readOnly) return;
+    const emptyVal = props.multiple ? [] : "";
+    setCurrentValue(emptyVal);
+    setTempMultiValue([]);
+    if (props.onChange) {
+      props.onChange(emptyVal);
+    }
+  }
+
+  useEffect(() => {
+    if (props.value !== undefined) {
+      setCurrentValue(props.value);
+    }
+  }, [props.value]);
+
+  useEffect(() => {
+    if (isOpen) {
+      startFloating();
+
+      const handlePointerDown = (event: any) => {
+        const target = event.target;
+        if (
+          rootRef.current &&
+          !rootRef.current.contains(target) &&
+          dropdownRef.current &&
+          !dropdownRef.current.contains(target)
+        ) {
+          closeDropdown();
+        }
+      };
+
+      document.addEventListener("pointerdown", handlePointerDown, true);
+
+      return () => {
+        stopFloating();
+        document.removeEventListener("pointerdown", handlePointerDown, true);
+      };
+    } else {
+      stopFloating();
+    }
+  }, [isOpen]);
+
+  return (
+    <div
+      ref={rootRef}
+      className={`ttdk-form-item ${props.className || ""}`.trim()}
+      data-disabled={props.disabled}
+      data-error={Boolean(props.error || props.errorMessage)}
+      data-size={props.size || "md"}
+      data-block={props.block ? "true" : undefined}
+      style={{
+        ...buildUiVars(props.ui),
+        ...((props.ui as any) || {}),
+        ...((props as any)["style"] || {}),
+              ...props.style,
+      }}
+    >
+      {props.label ? (
+        <label
+          className={`ttdk-form-label ${props.labelClass || ""}`.trim()}
+          htmlFor={props.id}
+          style={{
+            ...buildUiVars(props.labelStyle),
+          }}
+        >
+          <span>{props.label}</span>
+          {props.required ? (
+            <span className="ttdk-form-required" aria-hidden="true">
+              *
+            </span>
+          ) : null}
+          {props.optional ? (
+            <span className="ttdk-form-optional">
+              {props.optionalText || "(Opsional)"}
+            </span>
+          ) : null}
+        </label>
+      ) : null}
+      {props.helperText && props.helperTextPosition === "top" ? (
+        <div
+          className={`ttdk-form-helper ${props.helperTextClass || ""}`.trim()}
+          style={{
+            ...buildUiVars(props.helperTextStyle),
+          }}
+        >
+          {props.helperText}
+        </div>
+      ) : null}
+      <div
+        role="combobox"
+        aria-haspopup="listbox"
+        ref={controlRef}
+        className={`ttdk-selectbox-control ${props.controlClass || ""}`.trim()}
+        id={props.id}
+        tabIndex={props.disabled ? -1 : 0}
+        aria-expanded={isOpen}
+        aria-disabled={props.disabled}
+        aria-invalid={Boolean(props.error || props.errorMessage)}
+        data-open={isOpen ? "true" : "false"}
+        data-filled={hasValue() ? "true" : "false"}
+        data-error={Boolean(props.error || props.errorMessage)}
+        data-disabled={Boolean(props.disabled)}
+        data-size={props.size || "md"}
+        data-rounded={props.rounded || "md"}
+        style={{
+          ...buildUiVars(props.controlStyle),
+        }}
+        onClick={(event) =>
+          props.disabled || props.readOnly || props.loading
+            ? undefined
+            : toggleDropdown()
+        }
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            toggleDropdown();
+          } else if (e.key === "Escape") {
+            closeDropdown();
+          }
+        }}
+      >
+        <div className="ttdk-selectbox-display">
+          {props.multiple && hasValue() ? (
+            <div className="ttdk-selectbox-chips">
+              {getMultiSelectedChips()?.map((chip) => (
+                <span className="ttdk-select-chip" key={chip.value}>
+                  <span className="ttdk-select-chip-text">{chip.label}</span>
+                  <button
+                    type="button"
+                    className="ttdk-select-chip-remove"
+                    aria-label={`Hapus ${chip.label}`}
+                    onClick={(e) => handleRemoveTag(chip.value, e)}
+                  >
+                    <svg
+                      className="ttdk-select-chip-remove-icon"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                    >
+                      <line x1="18" y1="6" x2="6" y2="18" />
+                      <line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                  </button>
+                </span>
+              ))}
+            </div>
+          ) : null}
+          {!props.multiple && hasValue() ? (
+            <span className="ttdk-selectbox-value">
+              {getSingleSelectedLabel()}
+            </span>
+          ) : null}
+          {!hasValue() ? (
+            <span className="ttdk-selectbox-placeholder">
+              {props.placeholder || "Pilih dropdown menu"}
+            </span>
+          ) : null}
+        </div>
+        {props.clearable &&
+        hasValue() &&
+        !props.disabled &&
+        !props.readOnly &&
+        !props.loading ? (
+          <button
+            type="button"
+            className="ttdk-selectbox-clear"
+            aria-label="Hapus pilihan"
+            onClick={(e) => handleClear(e)}
+          >
+            <svg
+              className="ttdk-selectbox-clear-icon"
+              viewBox="0 0 24 24"
+              fill="none"
+            >
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        ) : null}
+        {props.loading ? (
+          <span className="ttdk-selectbox-spinner" aria-hidden="true">
+            <svg
+              className="ttdk-selectbox-spinner-icon"
+              viewBox="0 0 24 24"
+              fill="none"
+            >
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.175"
+                transform="rotate(0 12 12)"
+              />
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.25"
+                transform="rotate(30 12 12)"
+              />
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.325"
+                transform="rotate(60 12 12)"
+              />
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.4"
+                transform="rotate(90 12 12)"
+              />
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.475"
+                transform="rotate(120 12 12)"
+              />
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.55"
+                transform="rotate(150 12 12)"
+              />
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.625"
+                transform="rotate(180 12 12)"
+              />
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.7"
+                transform="rotate(210 12 12)"
+              />
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.775"
+                transform="rotate(240 12 12)"
+              />
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.85"
+                transform="rotate(270 12 12)"
+              />
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.925"
+                transform="rotate(300 12 12)"
+              />
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="1"
+                transform="rotate(330 12 12)"
+              />
+            </svg>
+          </span>
+        ) : null}
+        {!props.loading ? (
+          <span
+            className="ttdk-selectbox-arrow"
+            data-open={isOpen ? "true" : "false"}
+          >
+            <svg
+              className="ttdk-selectbox-arrow-icon"
+              viewBox="0 0 24 24"
+              fill="none"
+            >
+              <polyline points="6 9 12 15 18 9" />
+            </svg>
+          </span>
+        ) : null}
+      </div>
+      {isOpen && !props.disabled ? (
+        <div
+          role="listbox"
+          ref={dropdownRef}
+          className={`ttdk-selectbox-dropdown ${props.menuClass || ""}`.trim()}
+          style={{
+            ...buildUiVars(props.menuStyle || props.listStyle),
+          }}
+        >
+          {props.searchable ? (
+            <div
+              className="ttdk-selectbox-search"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <input
+                type="text"
+                className="ttdk-selectbox-search-input"
+                placeholder={props.searchPlaceholder || "Cari"}
+                value={searchQuery}
+                onInput={(e) => handleSearchInput(e)}
+                autoFocus
+              />
+              <span className="ttdk-selectbox-search-icon" aria-hidden="true">
+                <svg
+                  className="ttdk-selectbox-search-svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                >
+                  <circle cx="11" cy="11" r="8" />
+                  <line x1="21" y1="21" x2="16.65" y2="16.65" />
+                </svg>
+              </span>
+            </div>
+          ) : null}
+          <div className="ttdk-selectbox-options-list">
+            {filteredOptions()?.map((opt) => (
+              <div
+                role="option"
+                key={opt.value}
+                className={`ttdk-selectbox-option ${
+                  props.listClass || ""
+                }`.trim()}
+                aria-selected={isOptionSelected(opt.value)}
+                aria-disabled={opt.disabled}
+                data-selected={isOptionSelected(opt.value) ? "true" : "false"}
+                data-disabled={opt.disabled ? "true" : "false"}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  if (props.multiple) {
+                    handleMultiToggle(opt);
+                  } else {
+                    handleSingleSelect(opt);
+                  }
+                }}
+              >
+                {props.multiple ? (
+                  <span
+                    className="ttdk-selectbox-checkbox"
+                    data-checked={
+                      isOptionSelected(opt.value) ? "true" : "false"
+                    }
+                  >
+                    {isOptionSelected(opt.value) ? (
+                      <svg
+                        className="ttdk-selectbox-checkbox-icon"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                      >
+                        <polyline points="20 6 9 17 4 12" />
+                      </svg>
+                    ) : null}
+                  </span>
+                ) : null}
+                <span className="ttdk-selectbox-option-label">{opt.label}</span>
+                {!props.multiple && isOptionSelected(opt.value) ? (
+                  <span
+                    className="ttdk-selectbox-check-icon"
+                    aria-hidden="true"
+                  >
+                    <svg
+                      className="ttdk-selectbox-check-svg"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                    >
+                      <polyline points="20 6 9 17 4 12" />
+                    </svg>
+                  </span>
+                ) : null}
+              </div>
+            ))}
+            {filteredOptions().length === 0 ? (
+              <div className="ttdk-selectbox-empty">
+                Tidak ada pilihan ditemukan
+              </div>
+            ) : null}
+          </div>
+          {props.multiple ? (
+            <div
+              className="ttdk-selectbox-actions"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <button
+                type="button"
+                className="ttdk-selectbox-btn-reset"
+                onClick={(event) => handleReset()}
+              >
+                <svg
+                  className="ttdk-selectbox-btn-reset-icon"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                >
+                  <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+                  <path d="M3 3v5h5" />
+                </svg>
+                <span>{props.resetText || "Reset"}</span>
+              </button>
+              <button
+                type="button"
+                className="ttdk-selectbox-btn-apply"
+                onClick={(event) => handleApply()}
+              >
+                <span>{props.applyText || "Terapkan"}</span>
+                <svg
+                  className="ttdk-selectbox-btn-apply-icon"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                >
+                  <polyline points="20 6 9 17 4 12" />
+                </svg>
+              </button>
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+      {props.helperText && props.helperTextPosition !== "top" ? (
+        <div
+          className={`ttdk-form-helper ${props.helperTextClass || ""}`.trim()}
+          style={{
+            ...buildUiVars(props.helperTextStyle),
+          }}
+        >
+          {props.helperText}
+        </div>
+      ) : null}
+      {props.errorMessage ? (
+        <div
+          role="alert"
+          className={`ttdk-form-error ${props.errorMessageClass || ""}`.trim()}
+          style={{
+            ...buildUiVars(props.errorMessageStyle),
+          }}
+        >
+          {props.errorMessage}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export default Selectbox;
+
+export { Selectbox };