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

package/src/web/dropdown/dropdown.tsx

@@ -0,0 +1,1274 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect } from "react";
+
+export interface DropdownOption {
+  /**
+   * Teks label tampilan pilihan dropdown menu.
+   */
+  label: string;
+
+  /**
+   * Nilai unik (value) dari item dropdown.
+   */
+  value: string | number;
+
+  /**
+   * Status apakah opsi ini dinonaktifkan dari pemilihan.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Ikon kustom di samping label item pilihan.
+   */
+  icon?: any;
+
+  /**
+   * Deskripsi atau teks bantuan kecil di bawah label item pilihan.
+   */
+  description?: string;
+
+  /**
+   * Menandai item sebagai aksi berbahaya/destruktif (misal: "Hapus"), ditampilkan dengan warna aksen merah.
+   * @default false
+   */
+  danger?: boolean;
+
+  /**
+   * Menampilkan garis pemisah horizontal (divider) di atas item ini.
+   * @default false
+   */
+  divider?: boolean;
+
+  /**
+   * Callback event saat item ini diklik.
+   */
+  onClick?: (option?: DropdownOption) => void;
+}
+export type DropdownMenuItem = DropdownOption;
+export type DropdownUiProps = UiProps;
+export interface DropdownProps {
+  /**
+   * Teks label judul field yang ditampilkan di atas dropdown (14px Semibold, #141313).
+   */
+  label?: 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 menu. Dapat berupa array of object `{ label, value }` atau array of string.
+   */
+  options?: Array<DropdownOption | 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 dropdown.
+   */
+  id?: string;
+
+  /**
+   * Status apakah dropdown 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 dropdown.
+   * - `'sm'`: 36px
+   * - `'md'`: 48px (standar desain)
+   * - `'lg'`: 56px
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Bentuk sudut kelengkungan dropdown.
+   * - `'none'`: 0px
+   * - `'sm'`: 4px
+   * - `'md'`: 8px (standar desain)
+   * - `'lg'`: 12px
+   * - `'full'`: 9999px (kapsul)
+   * @default 'md'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Posisi penempatan panel menu dropdown popover terhadap elemen trigger.
+   * @default 'bottom-start'
+   */
+  placement?:
+    | "bottom-start"
+    | "bottom-end"
+    | "bottom"
+    | "top-start"
+    | "top-end"
+    | "top";
+
+  /**
+   * Menampilkan panah chevron indikator buka/tutup pada trigger.
+   * @default true
+   */
+  arrow?: boolean;
+
+  /**
+   * Ikon kustom di awal teks trigger (leading icon).
+   */
+  icon?: any;
+
+  /**
+   * Otomatis menutup menu popover setelah pengguna memilih opsi (pada single select).
+   * @default true
+   */
+  closeOnSelect?: boolean;
+
+  /**
+   * Menjadikan lebar field dropdown memenuhi kontainer penuh (full-width 100%).
+   * @default false
+   */
+  block?: boolean;
+
+  /**
+   * Status apakah dropdown dinonaktifkan (disabled).
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Menandai field sebagai input wajib diisi (menampilkan tanda bintang merah *).
+   * @default false
+   */
+  required?: boolean;
+
+  /**
+   * Ref instance elemen control dropdown untuk akses DOM langsung.
+   */
+  inputRef?: any;
+
+  /**
+   * Menampilkan tombol × untuk menghapus pilihan yang sudah dipilih.
+   * @default false
+   */
+  clearable?: boolean;
+
+  /**
+   * Menampilkan spinner loading dan menonaktifkan interaksi dropdown.
+   * @default false
+   */
+  loading?: boolean;
+
+  /**
+   * Menjadikan dropdown hanya-baca (tidak bisa dibuka/diubah).
+   * @default false
+   */
+  readOnly?: boolean;
+
+  /**
+   * Kustomisasi visual granular wrapper utama (UiProps).
+   */
+  ui?: DropdownUiProps;
+
+  /**
+   * Style inline native untuk wrapper luar.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Style kustom untuk elemen label (UiProps).
+   */
+  labelStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen label (Tailwind / class kustom).
+   */
+  labelClass?: string;
+
+  /**
+   * Style kustom untuk elemen kotak pemicu (control trigger) (UiProps).
+   */
+  controlStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen kotak pemicu (control trigger) (Tailwind / class kustom).
+   */
+  controlClass?: string;
+
+  /**
+   * Style kustom untuk panel popover / menu list opsi (UiProps).
+   */
+  listStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk panel popover / menu list opsi (Tailwind / class kustom).
+   */
+  listClass?: string;
+
+  /**
+   * Style kustom untuk pesan teks error validasi (UiProps).
+   */
+  errorMessageStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk pesan teks error validasi (Tailwind / class kustom).
+   */
+  errorMessageClass?: string;
+
+  /**
+   * Style kustom untuk teks petunjuk bantuan (UiProps).
+   */
+  helperTextStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks petunjuk bantuan (Tailwind / class kustom).
+   */
+  helperTextClass?: string;
+
+  /**
+   * Callback event saat nilai pilihan berubah.
+   */
+  onChange?: (value: any) => void;
+
+  /**
+   * Callback event saat sebuah opsi dipilih dari menu.
+   */
+  onSelect?: (option: DropdownOption) => void;
+
+  /**
+   * Callback event saat pengguna mengetik di kolom pencarian.
+   */
+  onSearch?: (query: string) => void;
+
+  /**
+   * Callback event saat menu dropdown terbuka.
+   */
+  onOpen?: () => void;
+
+  /**
+   * Callback event saat menu dropdown ditutup.
+   */
+  onClose?: () => void;
+
+  /**
+   * 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;
+
+  /**
+   * Class CSS kustom wrapper luar.
+   */
+  className?: string;
+
+  /**
+   * Elemen pemicu (trigger) kustom, tombol, ikon, atau komponen anak lainnya.
+   */
+  children?: any;
+
+  /**
+   * Konten kustom yang ditampilkan di dalam panel popover menggantikan list opsi standar.
+   * Berguna untuk menampilkan komponen seperti Calendar, Color Picker, dsb. di dalam Dropdown.
+   * Ketika prop ini di-set, `options` tidak akan dirender.
+   * Menerima ReactNode atau render function `({ close }) => ReactNode`.
+   */
+  panelContent?: any;
+
+  /**
+   * Label atau teks kustom untuk ditampilkan pada trigger dropdown.
+   * Sangat berguna saat menggunakan `panelContent` seperti Date Picker di mana nilai trigger diformat secara kustom.
+   */
+  displayValue?: string;
+
+  /**
+   * Strategi positioning Floating UI ('fixed' atau 'absolute').
+   * Default 'fixed' agar dropdown tidak terpotong (clipped) oleh kontainer parent yang memiliki `overflow: hidden`.
+   * @default 'fixed'
+   */
+  // strategy?: 'fixed' | 'absolute';
+}
+export type DropdownMenuProps = DropdownProps;
+
+/**
+ * Komponen Dropdown Menu TTDK sesuai spesifikasi Desain:
+ * - Selaras UI & Props dengan Selectbox: Label, Helper/Error text, Search bar, Floating popover
+ * - Mode Single Select / Menu Actions dengan Active Teal Checkmark (#00A3A6)
+ * - Mode Multi-Select dengan Checkbox list, Chip tags (Label ✕), dan Action footer (Reset & Terapkan)
+ * - Varian trigger fleksibel: 'select' (standar form), 'action' / 'primary' (tombol aksi), 'outline', 'ghost'
+ * - Dukungan Trigger Kustom melalui Slot / Children (misal: tombol kustom)
+ * - Dukungan item kaya: Icon, Deskripsi, Divider pemisah seksi, dan Danger item
+ */
+
+import {
+  computePosition,
+  autoUpdate,
+  flip,
+  shift,
+  offset,
+  size as floatingSize,
+} from "@floating-ui/dom";
+import { buildUiVars, UiProps } from "../../core/types";
+
+function Dropdown(props: DropdownProps) {
+  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;
+    dropdownRef.current.style.maxHeight = "";
+    computePosition(controlRef.current, dropdownRef.current, {
+      placement: props.placement || "bottom-start",
+      strategy: "absolute",
+      middleware: [
+        offset(4),
+        flip({
+          fallbackPlacements: [
+            "top-start",
+            "top-end",
+            "bottom-start",
+            "bottom-end",
+          ],
+          padding: {
+            top: 16,
+            bottom: 16,
+            left: 16,
+            right: 16,
+          },
+        }),
+        ...(props.disableShift
+          ? []
+          : [
+              shift({
+                padding: {
+                  top: 16,
+                  bottom: 16,
+                  left: 16,
+                  right: 16,
+                },
+              }),
+            ]),
+        floatingSize({
+          apply({ rects, elements, availableHeight }) {
+            const isPanel = Boolean(props.panelContent);
+            const customWidth =
+              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)
+                : undefined;
+            const customMaxHeight =
+              props.listStyle?.maxHeight !== undefined &&
+              props.listStyle?.maxHeight !== null &&
+              props.listStyle?.maxHeight !== ""
+                ? props.listStyle.maxHeight === "none"
+                  ? "none"
+                  : typeof props.listStyle.maxHeight === "number" ||
+                    /^\d+(\.\d+)?$/.test(
+                      String(props.listStyle.maxHeight).trim()
+                    )
+                  ? `${String(props.listStyle.maxHeight).trim()}px`
+                  : String(props.listStyle.maxHeight)
+                : undefined;
+            Object.assign(elements.floating.style, {
+              width:
+                customWidth ||
+                (isPanel ? "auto" : `${rects.reference.width}px`),
+              minWidth: customWidth
+                ? customWidth
+                : isPanel
+                ? "auto"
+                : undefined,
+              maxHeight:
+                customMaxHeight !== undefined
+                  ? customMaxHeight
+                  : isPanel
+                  ? "none"
+                  : `${Math.max(180, Math.min(availableHeight, 360))}px`,
+            });
+          },
+          padding: {
+            top: 16,
+            bottom: 16,
+            left: 16,
+            right: 16,
+          },
+        }),
+      ],
+    }).then(({ x, y, placement }: any) => {
+      if (!dropdownRef.current) return;
+      dropdownRef.current.style.position = "absolute";
+      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() {
+    const raw = props.options;
+    if (!raw || !Array.isArray(raw)) return [];
+    return raw.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),
+          icon: opt.icon,
+          description: opt.description,
+          danger: Boolean(opt.danger),
+          divider: Boolean(opt.divider),
+          onClick: opt.onClick,
+        };
+      }
+      return {
+        label: String(opt),
+        value: opt,
+        disabled: false,
+        icon: undefined,
+        description: undefined,
+        danger: false,
+        divider: false,
+        onClick: undefined,
+      };
+    });
+  }
+
+  function filteredOptions() {
+    const opts = normalizedOptions();
+    if (!searchQuery || !searchQuery.trim()) return opts;
+    const q = searchQuery.toLowerCase().trim();
+    return opts.filter((opt: any) => {
+      const matchLabel = opt.label && opt.label.toLowerCase().includes(q);
+      const matchDesc =
+        opt.description && opt.description.toLowerCase().includes(q);
+      return matchLabel || matchDesc;
+    });
+  }
+
+  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;
+    if (opt.onClick) {
+      opt.onClick(opt);
+    }
+    setCurrentValue(opt.value);
+    if (props.onSelect) {
+      props.onSelect(opt);
+    }
+    if (props.onChange) {
+      props.onChange(opt.value);
+    }
+    if (props.closeOnSelect !== false) {
+      closeDropdown();
+    }
+  }
+
+  function handleMultiToggle(opt: any) {
+    if (opt.disabled || props.disabled) return;
+    if (opt.onClick) {
+      opt.onClick(opt);
+    }
+    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() {
+    if (
+      props.displayValue !== undefined &&
+      props.displayValue !== null &&
+      props.displayValue !== ""
+    ) {
+      return props.displayValue;
+    }
+    const opts = normalizedOptions();
+    const match = opts.find(
+      (opt: any) => String(opt.value) === String(currentValue)
+    );
+    if (match) {
+      return match.label;
+    }
+    if (
+      currentValue !== undefined &&
+      currentValue !== null &&
+      currentValue !== ""
+    ) {
+      return String(currentValue);
+    }
+    return "";
+  }
+
+  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.displayValue !== undefined &&
+      props.displayValue !== null &&
+      props.displayValue !== ""
+    ) {
+      return true;
+    }
+    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-dropdown-wrapper ${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-dropdown-label ${props.labelClass || ""}`.trim()}
+          htmlFor={props.id}
+          style={{
+            ...buildUiVars(props.labelStyle),
+          }}
+        >
+          <span>{props.label}</span>
+          {props.required ? (
+            <span className="ttdk-dropdown-required" aria-hidden="true">
+              *
+            </span>
+          ) : null}
+          {props.optional ? (
+            <span className="ttdk-dropdown-optional">
+              {props.optionalText || "(Opsional)"}
+            </span>
+          ) : null}
+        </label>
+      ) : null}
+      {props.helperText && props.helperTextPosition === "top" ? (
+        <div
+          className={`ttdk-dropdown-helper-text ${
+            props.helperTextClass || ""
+          }`.trim()}
+          style={{
+            ...buildUiVars(props.helperTextStyle),
+          }}
+        >
+          {props.helperText}
+        </div>
+      ) : null}
+      <div
+        role="button"
+        aria-haspopup="menu"
+        ref={controlRef}
+        className={`ttdk-dropdown-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"}
+        data-custom-trigger={props.children ? "true" : undefined}
+        style={{
+          ...buildUiVars(props.controlStyle),
+        }}
+        onClick={(event) => toggleDropdown()}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            toggleDropdown();
+          } else if (e.key === "Escape") {
+            closeDropdown();
+          }
+        }}
+      >
+        {props.children ? <>{props.children}</> : null}
+        {!props.children ? (
+          <>
+            <div className="ttdk-dropdown-display">
+              {props.icon ? (
+                <span className="ttdk-dropdown-leading-icon" aria-hidden="true">
+                  {props.icon}
+                </span>
+              ) : null}
+              {props.multiple && hasValue() ? (
+                <div className="ttdk-dropdown-chips">
+                  {getMultiSelectedChips()?.map((chip) => (
+                    <span className="ttdk-dropdown-chip" key={chip.value}>
+                      <span className="ttdk-dropdown-chip-text">
+                        {chip.label}
+                      </span>
+                      <button
+                        type="button"
+                        className="ttdk-dropdown-chip-remove"
+                        aria-label={`Hapus ${chip.label}`}
+                        onClick={(e) => handleRemoveTag(chip.value, e)}
+                      >
+                        <svg
+                          className="ttdk-dropdown-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-dropdown-value">
+                  {getSingleSelectedLabel()}
+                </span>
+              ) : null}
+              {!hasValue() ? (
+                <span className="ttdk-dropdown-placeholder">
+                  {props.placeholder || "Pilih dropdown menu"}
+                </span>
+              ) : null}
+            </div>
+            {props.clearable &&
+            hasValue() &&
+            !props.disabled &&
+            !props.readOnly &&
+            !props.loading ? (
+              <button
+                type="button"
+                className="ttdk-dropdown-clear"
+                aria-label="Hapus pilihan"
+                onClick={(e) => handleClear(e)}
+              >
+                <svg
+                  className="ttdk-dropdown-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-dropdown-spinner" aria-hidden="true">
+                <svg
+                  className="ttdk-dropdown-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 && props.arrow !== false ? (
+              <span
+                className="ttdk-dropdown-arrow"
+                data-open={isOpen ? "true" : "false"}
+              >
+                <svg
+                  className="ttdk-dropdown-arrow-icon"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                >
+                  <polyline points="6 9 12 15 18 9" />
+                </svg>
+              </span>
+            ) : null}
+          </>
+        ) : null}
+      </div>
+      {isOpen && !props.disabled ? (
+        <div
+          className="ttdk-dropdown-menu"
+          role="menu"
+          ref={dropdownRef}
+          style={{
+            ...buildUiVars(props.listStyle),
+            ...(props.listStyle?.width !== undefined &&
+            props.listStyle?.width !== null &&
+            props.listStyle?.width !== ""
+              ? {
+                  width:
+                    typeof props.listStyle.width === "number" ||
+                    /^\d+(\.\d+)?$/.test(String(props.listStyle.width).trim())
+                      ? `${String(props.listStyle.width).trim()}px`
+                      : String(props.listStyle.width),
+                  minWidth:
+                    typeof props.listStyle.width === "number" ||
+                    /^\d+(\.\d+)?$/.test(String(props.listStyle.width).trim())
+                      ? `${String(props.listStyle.width).trim()}px`
+                      : String(props.listStyle.width),
+                }
+              : {}),
+          }}
+        >
+          {props.searchable ? (
+            <div
+              className="ttdk-dropdown-search"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <input
+                type="text"
+                className="ttdk-dropdown-search-input"
+                placeholder={props.searchPlaceholder || "Cari"}
+                value={searchQuery}
+                onInput={(e) => handleSearchInput(e)}
+                autoFocus
+              />
+              <span className="ttdk-dropdown-search-icon" aria-hidden="true">
+                <svg
+                  className="ttdk-dropdown-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}
+          {props.panelContent ? (
+            <div
+              className="ttdk-dropdown-panel-content"
+              onClick={(e) => e.stopPropagation()}
+            >
+              {typeof props.panelContent === "function" ? (
+                <>
+                  {props.panelContent({
+                    close: () => closeDropdown(),
+                  })}
+                </>
+              ) : (
+                <>{props.panelContent}</>
+              )}
+            </div>
+          ) : null}
+          {!props.panelContent ? (
+            <div className="ttdk-dropdown-options-list" role="presentation">
+              {filteredOptions()?.map((opt) => (
+                <div key={opt.value}>
+                  {opt.divider ? (
+                    <div className="ttdk-dropdown-divider" role="separator" />
+                  ) : null}
+                  <div
+                    className={`ttdk-dropdown-option ${
+                      props.listClass || ""
+                    }`.trim()}
+                    role={props.multiple ? "menuitemcheckbox" : "menuitem"}
+                    aria-selected={isOptionSelected(opt.value)}
+                    aria-disabled={opt.disabled}
+                    data-selected={
+                      isOptionSelected(opt.value) ? "true" : "false"
+                    }
+                    data-disabled={opt.disabled ? "true" : "false"}
+                    data-danger={opt.danger ? "true" : undefined}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      if (props.multiple) {
+                        handleMultiToggle(opt);
+                      } else {
+                        handleSingleSelect(opt);
+                      }
+                    }}
+                  >
+                    {props.multiple ? (
+                      <span
+                        className="ttdk-dropdown-checkbox"
+                        data-checked={
+                          isOptionSelected(opt.value) ? "true" : "false"
+                        }
+                      >
+                        {isOptionSelected(opt.value) ? (
+                          <svg
+                            className="ttdk-dropdown-checkbox-icon"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                          >
+                            <polyline points="20 6 9 17 4 12" />
+                          </svg>
+                        ) : null}
+                      </span>
+                    ) : null}
+                    {opt.icon ? (
+                      <span
+                        className="ttdk-dropdown-option-icon"
+                        aria-hidden="true"
+                      >
+                        {opt.icon}
+                      </span>
+                    ) : null}
+                    <div className="ttdk-dropdown-option-content">
+                      <span className="ttdk-dropdown-option-label">
+                        {opt.label}
+                      </span>
+                      {opt.description ? (
+                        <span className="ttdk-dropdown-option-desc">
+                          {opt.description}
+                        </span>
+                      ) : null}
+                    </div>
+                    {!props.multiple && isOptionSelected(opt.value) ? (
+                      <span
+                        className="ttdk-dropdown-check-icon"
+                        aria-hidden="true"
+                      >
+                        <svg
+                          className="ttdk-dropdown-check-svg"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                        >
+                          <polyline points="20 6 9 17 4 12" />
+                        </svg>
+                      </span>
+                    ) : null}
+                  </div>
+                </div>
+              ))}
+              {filteredOptions().length === 0 ? (
+                <div className="ttdk-dropdown-empty">
+                  Tidak ada pilihan ditemukan
+                </div>
+              ) : null}
+            </div>
+          ) : null}
+          {props.multiple ? (
+            <div
+              className="ttdk-dropdown-actions"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <button
+                type="button"
+                className="ttdk-dropdown-btn-reset"
+                onClick={(event) => handleReset()}
+              >
+                <svg
+                  className="ttdk-dropdown-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-dropdown-btn-apply"
+                onClick={(event) => handleApply()}
+              >
+                <span>{props.applyText || "Terapkan"}</span>
+                <svg
+                  className="ttdk-dropdown-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-dropdown-helper-text ${
+            props.helperTextClass || ""
+          }`.trim()}
+          style={{
+            ...buildUiVars(props.helperTextStyle),
+          }}
+        >
+          {props.helperText}
+        </div>
+      ) : null}
+      {props.errorMessage ||
+      (typeof props.error === "string" && props.error) ? (
+        <div
+          role="alert"
+          className={`ttdk-dropdown-error-text ${
+            props.errorMessageClass || ""
+          }`.trim()}
+          style={{
+            ...buildUiVars(props.errorMessageStyle),
+          }}
+        >
+          {props.errorMessage ||
+            (typeof props.error === "string" ? props.error : "")}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export default Dropdown;
+
+export { Dropdown };