@weng-lab/ui-components 2.1.0 → 2.2.0

package/dist/ui-components.es3.js

@@ -1,401 +1,117 @@
-import { j as l } from "./ui-components.es13.js";
-import { c as $e } from "./ui-components.es15.js";
-import { useState as Te, useReducer as ze, useEffect as ke, useRef as je, Fragment as Je } from "react";
-import { reducer as Ue } from "./ui-components.es26.js";
-import Ge from "./ui-components.es18.js";
-import qe from "./ui-components.es27.js";
-import Ke from "./ui-components.es28.js";
-import Qe from "./ui-components.es29.js";
-import Xe from "./ui-components.es30.js";
-import { Stack as Ie } from "@mui/material";
-import Ye from "./ui-components.es31.js";
-import Ze from "./ui-components.es32.js";
-import Pe from "./ui-components.es22.js";
-import Le from "./ui-components.es33.js";
-import Oe from "./ui-components.es34.js";
-import Re from "./ui-components.es35.js";
-import Ve from "./ui-components.es36.js";
-import ae from "./ui-components.es37.js";
-import D from "./ui-components.es38.js";
-import _e from "./ui-components.es39.js";
-import pe from "./ui-components.es40.js";
-import et from "./ui-components.es41.js";
-import tt from "./ui-components.es42.js";
-import Se from "./ui-components.es43.js";
-import lt from "./ui-components.es44.js";
-import nt from "./ui-components.es45.js";
-import ot from "./ui-components.es46.js";
-import it from "./ui-components.es47.js";
-import st from "./ui-components.es48.js";
-import rt from "./ui-components.es21.js";
-import at from "./ui-components.es49.js";
-import ct from "./ui-components.es50.js";
-import { alpha as Ae } from "./ui-components.es51.js";
-function Fe(t) {
-  const e = parseFloat(t);
-  return !isNaN(e) && isFinite(e);
-}
-function mt(t, e) {
-  return Fe(t) && Fe(e) ? parseFloat(t) - parseFloat(e) : t.localeCompare ? t.localeCompare(e) : 0;
-}
-const ut = Re("div")(({
-  theme: t
-}) => ({
-  position: "relative",
-  borderRadius: t.shape.borderRadius,
-  backgroundColor: Ae(t.palette.common.white, 0.75),
-  "&:hover": {
-    backgroundColor: Ae(t.palette.common.white, 0.95)
-  },
-  marginLeft: 0,
-  width: "100%",
-  [t.breakpoints.up("sm")]: {
-    marginLeft: t.spacing(1),
-    width: "auto"
-  }
-})), dt = Re("div")(({
-  theme: t
-}) => ({
-  padding: t.spacing(0, 2),
-  height: "100%",
-  position: "absolute",
-  pointerEvents: "none",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center"
-})), ht = Re(tt)(({
-  theme: t
-}) => ({
-  color: "inherit",
-  "& .MuiInputBase-input": {
-    padding: t.spacing(1, 1, 1, 0),
-    // vertical padding + font size from searchIcon
-    paddingLeft: `calc(1em + ${t.spacing(4)})`,
-    transition: t.transitions.create("width"),
-    width: "100%",
-    [t.breakpoints.up("sm")]: {
-      width: "12ch",
-      "&:focus": {
-        width: "20ch"
-      }
-    }
-  }
-})), ft = {
-  position: "absolute",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  width: 400,
-  bgcolor: "background.paper",
-  border: "2px solid #000",
-  boxShadow: 24,
-  p: 4
-}, Vt = (t) => {
-  const e = $e.c(124), [s, f] = Te(t.page || 0);
-  let g;
-  e[0] !== t.itemsPerPage ? (g = () => Array.isArray(t.itemsPerPage) ? t.itemsPerPage[0] : typeof t.itemsPerPage == "number" ? t.itemsPerPage : 5, e[0] = t.itemsPerPage, e[1] = g) : g = e[1];
-  const [c, Ee] = Te(g);
-  let N;
-  e[2] === Symbol.for("react.memo_cache_sentinel") ? (N = (o) => {
-    f(o);
-  }, e[2] = N) : N = e[2];
-  const He = N;
-  let W;
-  e[3] === Symbol.for("react.memo_cache_sentinel") ? (W = (o) => {
-    Ee(+o.target.value), f(0);
-  }, e[3] = W) : W = e[3];
-  const Be = W, De = gt;
-  let $;
-  e[4] !== t.highlighted ? ($ = function(i) {
-    let r = !1;
-    return Array.isArray(t.highlighted) ? (t.highlighted.forEach((a) => {
-      JSON.stringify(i) === JSON.stringify(a) && (r = !0);
-    }), !!r) : JSON.stringify(i) === JSON.stringify(t.highlighted);
-  }, e[4] = t.highlighted, e[5] = $) : $ = e[5];
-  const ce = $, z = t.noOfDefaultColumns || t.columns.length, me = t.sortColumn || 0, ue = !!t.sortDescending;
-  let x;
-  e[6] !== me || e[7] !== ue ? (x = {
-    column: me,
-    asc: ue
-  }, e[6] = me, e[7] = ue, e[8] = x) : x = e[8];
-  let C;
-  e[9] !== z || e[10] !== t.columns || e[11] !== t.defaultColumnsToShow ? (C = t.columns.length <= z ? t.columns : t.defaultColumnsToShow ? t.columns.filter((o) => t.defaultColumnsToShow?.includes(o.header)) : t.columns.slice(0, z), e[9] = z, e[10] = t.columns, e[11] = t.defaultColumnsToShow, e[12] = C) : C = e[12];
-  let J;
-  e[13] !== x || e[14] !== C ? (J = {
-    sort: x,
-    filter: "",
-    page: 0,
-    columns: C,
-    showAddColumnsModal: !1
-  }, e[13] = x, e[14] = C, e[15] = J) : J = e[15];
-  const [n, d] = ze(Ue, J);
-  let U, G;
-  e[16] !== t.columns ? (G = () => {
-    d({
-      type: "columnsChanged",
-      columns: t.columns
+import { j as l } from "./ui-components.es15.js";
+import I, { useState as R, useMemo as F, useEffect as N, useCallback as W, createElement as Q } from "react";
+import { c as V } from "./ui-components.es16.js";
+import { isDomain as z } from "./ui-components.es62.js";
+import { Box as M, Autocomplete as H, TextField as J, Button as U, Typography as w } from "@mui/material";
+import { useEntityAutocomplete as X } from "./ui-components.es12.js";
+const f = 3, Y = ({
+  queries: n,
+  assembly: e,
+  showiCREFlag: o,
+  geneVersion: O,
+  geneLimit: E = f,
+  snpLimit: c = f,
+  icreLimit: s = f,
+  ccreLimit: i = f,
+  legacyCcreLimit: $ = f,
+  studyLimit: K = f,
+  onSearchSubmit: d,
+  defaultResults: k = [],
+  style: T,
+  sx: A,
+  slots: p,
+  slotProps: x,
+  ..._
+}) => {
+  const [u, g] = R(""), [m, v] = R(null), {
+    data: a,
+    loading: B
+  } = X(u && u !== "" ? [u] : [], {
+    queries: n,
+    assembly: e,
+    geneVersion: O,
+    limits: {
+      gene: E,
+      snp: c,
+      icre: s,
+      ccre: i,
+      legacyCcre: $,
+      study: K
+    },
+    showiCREFlag: o,
+    debounceMs: 100
+  }), b = F(() => {
+    const t = new Map(n.map((y, h) => [y, h])), r = (y) => [...y].sort((h, L) => {
+      const C = t.get(h.type), j = t.get(L.type);
+      return C === void 0 && j === void 0 ? (h.title || "").localeCompare(L.title || "") : C === void 0 ? 1 : j === void 0 ? -1 : C !== j ? C - j : (h.title || "").localeCompare(L.title || "");
     });
-  }, U = [t.columns], e[16] = t.columns, e[17] = U, e[18] = G) : (U = e[17], G = e[18]), ke(G, U);
-  let q;
-  e[19] !== n.columns ? (q = (o, i) => {
-    for (const r in n.columns) {
-      const a = n.columns[r];
-      if (a.unsearchable)
-        continue;
-      if (a.search && a.search(o) || a.value(o).toString().toLowerCase().includes(i.toLowerCase()))
-        return !0;
+    return {
+      data: a && r(a),
+      defaultResults: r(k)
+    };
+  }, [a, k, n]);
+  N(() => {
+    g(""), v(null);
+  }, [e]);
+  const D = W(() => {
+    m && d && d(m);
+  }, [d, m]), G = W((t) => {
+    if (t.key === "Enter") {
+      const r = a?.find((y) => y.title?.toLowerCase() === u.toLowerCase());
+      r && (v(r), d && d(r));
     }
-    return !1;
-  }, e[19] = n.columns, e[20] = q) : q = e[20];
-  const de = q;
-  let K;
-  e[21] !== n.columns || e[22] !== n.sort.asc || e[23] !== n.sort.column ? (K = (o) => {
-    const i = n.columns[n.sort.column].sort || ((a, h) => mt(n.columns[n.sort.column].value(a), n.columns[n.sort.column].value(h))), r = o.sort(i);
-    return n.sort.asc || r.reverse(), r;
-  }, e[21] = n.columns, e[22] = n.sort.asc, e[23] = n.sort.column, e[24] = K) : K = e[24];
-  const he = K;
-  let Q;
-  e[25] !== de ? (Q = (o, i) => i === "" ? [...o] : o.filter((r) => de(r, i)), e[25] = de, e[26] = Q) : Q = e[26];
-  const fe = Q, ge = n.filter || t.search || "";
-  let X;
-  e[27] !== fe || e[28] !== t.rows || e[29] !== he || e[30] !== ge ? (X = he(fe(t.rows, ge)), e[27] = fe, e[28] = t.rows, e[29] = he, e[30] = ge, e[31] = X) : X = e[31];
-  const u = X;
-  let B;
-  e[32] !== u || e[33] !== s || e[34] !== t.onDisplayedRowsChange || e[35] !== c ? (B = u.slice(s * c, (s + 1) * c), t.onDisplayedRowsChange?.(s, B), e[32] = u, e[33] = s, e[34] = t.onDisplayedRowsChange, e[35] = c, e[36] = B) : B = e[36];
-  const xe = B, Y = s > 0 ? Math.max(0, (1 + s) * c - t.rows.length) : 0;
-  let Z;
-  e[37] !== u || e[38] !== t.downloadFileName || e[39] !== n.columns ? (Z = () => {
-    const o = n.columns.map(xt).join("	") + `
-` + u.map((h) => n.columns.map((We) => We.value(h)).join("	")).join(`
-`) + `
-`, i = document.createElement("a");
-    document.body.appendChild(i), i.setAttribute("style", "display: none");
-    const r = new Blob([o], {
-      type: "text/plain"
-    }), a = window.URL.createObjectURL(r);
-    i.href = a, i.download = t.downloadFileName || "table.tsv", i.click(), window.URL.revokeObjectURL(a), i.remove();
-  }, e[37] = u, e[38] = t.downloadFileName, e[39] = n.columns, e[40] = Z) : Z = e[40];
-  const Ce = Z, m = je(null), V = je(null), _ = je(null), Me = Ct;
-  let p, ee;
-  e[41] === Symbol.for("react.memo_cache_sentinel") ? (p = () => {
-    m.current && (m.current.addEventListener("scroll", () => Me(m, V, _)), new ResizeObserver(() => {
-      Me(m, V, _);
-    }).observe(m.current));
-  }, ee = [m, _, V], e[41] = p, e[42] = ee) : (p = e[41], ee = e[42]), ke(p, ee);
-  let te;
-  e[43] === Symbol.for("react.memo_cache_sentinel") ? (te = {
-    "& .MuiToolbar-root": {
-      pl: 2
-    },
-    position: "relative"
-  }, e[43] = te) : te = e[43];
-  const be = `${t.headerColor ? t.headerColor.backgroundColor : "transparent"}`;
-  let b;
-  e[44] !== be ? (b = {
-    backgroundColor: be,
-    borderTopLeftRadius: 4,
-    borderTopRightRadius: 4
-  }, e[44] = be, e[45] = b) : b = e[45];
-  let w;
-  e[46] !== t.headerColor || e[47] !== t.tableTitle ? (w = typeof t.tableTitle == "string" ? /* @__PURE__ */ l.jsx(Pe, { variant: "h5", noWrap: !0, component: "div", sx: {
-    display: {
-      xs: "none",
-      sm: "block"
-    },
-    fontWeight: "normal",
-    color: `${t.headerColor ? t.headerColor.textColor : "inherit"}`
-  }, children: t.tableTitle }) : t.tableTitle, e[46] = t.headerColor, e[47] = t.tableTitle, e[48] = w) : w = e[48];
-  let y;
-  e[49] !== t.titleHoverInfo ? (y = t.titleHoverInfo && /* @__PURE__ */ l.jsx(Le, { title: t.titleHoverInfo, color: "primary", sx: {
-    ml: 1
-  }, placement: "right-start", children: /* @__PURE__ */ l.jsx(Ke, {}) }), e[49] = t.titleHoverInfo, e[50] = y) : y = e[50];
-  let v;
-  e[51] !== w || e[52] !== y ? (v = /* @__PURE__ */ l.jsxs(Ie, { direction: "row", alignItems: "center", flexGrow: 1, children: [
-    w,
-    y
-  ] }), e[51] = w, e[52] = y, e[53] = v) : v = e[53];
-  let j;
-  e[54] !== t.columns.length || e[55] !== t.noOfDefaultColumns || e[56] !== t.showMoreColumns ? (j = t.showMoreColumns && t.columns.length > (t.noOfDefaultColumns || 5) && /* @__PURE__ */ l.jsxs(Oe, { variant: "outlined", size: "small", color: "primary", sx: {
-    textTransform: "none"
-  }, onClick: () => d({
-    type: "modalChanged",
-    showAddColumnsModal: !0
-  }), children: [
-    /* @__PURE__ */ l.jsx(qe, { fontSize: "small" }),
-    "Manage Columns"
-  ] }), e[54] = t.columns.length, e[55] = t.noOfDefaultColumns, e[56] = t.showMoreColumns, e[57] = j) : j = e[57];
-  let P;
-  e[58] !== t.searchable ? (P = t.searchable && /* @__PURE__ */ l.jsxs(ut, { children: [
-    /* @__PURE__ */ l.jsx(dt, { children: /* @__PURE__ */ l.jsx(Xe, {}) }),
-    /* @__PURE__ */ l.jsx(ht, { id: "table-search", placeholder: "Filter Items", inputProps: {
-      "aria-label": "search"
-    }, onChange: (o) => {
-      d({
-        type: "searchChanged",
-        value: o.target.value
-      }), f(0);
-    } })
-  ] }), e[58] = t.searchable, e[59] = P) : P = e[59];
-  const we = `${t.headerColor?.textColor || "inherit"}`;
-  let S;
-  e[60] !== we ? (S = /* @__PURE__ */ l.jsx(Ge, { htmlColor: we }), e[60] = we, e[61] = S) : S = e[61];
-  let R;
-  e[62] !== Ce || e[63] !== S ? (R = /* @__PURE__ */ l.jsx(Se, { onClick: Ce, children: S }), e[62] = Ce, e[63] = S, e[64] = R) : R = e[64];
-  let M;
-  e[65] !== b || e[66] !== v || e[67] !== j || e[68] !== P || e[69] !== R ? (M = /* @__PURE__ */ l.jsxs(lt, { sx: b, children: [
-    v,
-    j,
-    P,
-    R
-  ] }), e[65] = b, e[66] = v, e[67] = j, e[68] = P, e[69] = R, e[70] = M) : M = e[70];
-  const ye = t.maxHeight ? t.maxHeight : "none";
-  let T;
-  e[71] !== ye ? (T = {
-    maxHeight: ye
-  }, e[71] = ye, e[72] = T) : T = e[72];
-  const ve = t.dense ? "checkbox" : "normal";
-  let k;
-  e[73] !== t.hideHeader || e[74] !== n.columns || e[75] !== n.sort.asc || e[76] !== n.sort.column ? (k = !t.hideHeader && /* @__PURE__ */ l.jsx(Ve, { children: /* @__PURE__ */ l.jsx(ae, { children: n.columns.map((o, i) => /* @__PURE__ */ l.jsx(D, { sx: i !== n.columns.length - 1 ? {
-    pr: 0
-  } : {}, onClick: () => {
-    o.unsortable || d({
-      type: "sortChanged",
-      sortColumn: i
-    }), f(0);
-  }, children: /* @__PURE__ */ l.jsxs(_e, { active: i === n.sort.column, direction: n.sort.asc ? "asc" : "desc", hideSortIcon: !0, children: [
-    o.HeaderRender ? /* @__PURE__ */ l.jsx(o.HeaderRender, {}) : o.header,
-    o.tooltip ? /* @__PURE__ */ l.jsx(Le, { title: o.tooltip, color: "primary", sx: {
-      ml: 0.5
-    }, placement: "right-start", children: /* @__PURE__ */ l.jsx(Qe, { fontSize: "small" }) }) : null
-  ] }) }, `${o.header}${i}`)) }) }), e[73] = t.hideHeader, e[74] = n.columns, e[75] = n.sort.asc, e[76] = n.sort.column, e[77] = k) : k = e[77];
-  let I;
-  e[78] !== Y || e[79] !== ce || e[80] !== s || e[81] !== t || e[82] !== xe || e[83] !== c || e[84] !== n.columns ? (I = /* @__PURE__ */ l.jsx(pe, { children: t.rows.length === 0 ? /* @__PURE__ */ l.jsxs(ae, { children: [
-    /* @__PURE__ */ l.jsx(D, { children: t.emptyText || "No data available." }),
-    De(t.columns.length)
-  ] }) : /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
-    xe.map((o, i) => /* @__PURE__ */ l.jsx(ae, { selected: t.highlighted ? ce(o) : !1, hover: !0, id: "row" + i, onClick: () => t.onRowClick && t.onRowClick(o, i + s * c), sx: {
-      cursor: t.onRowClick ? "pointer" : "auto"
-    }, onMouseEnter: () => t.onRowMouseEnter && t.onRowMouseEnter(o, i + s * c), onMouseLeave: () => t.onRowMouseLeave && t.onRowMouseLeave(o, i + s * c), children: n.columns.map((r, a) => /* @__PURE__ */ l.jsx(D, { sx: a !== n.columns.length - 1 ? {
-      pr: 0
-    } : {}, onMouseEnter: () => t.onCellMouseEnter && t.onCellMouseEnter(r.value(o), i, a), onMouseLeave: () => t.onCellMouseLeave && t.onCellMouseLeave(r.value(o), i, a), children: r.FunctionalRender ? /* @__PURE__ */ l.jsx(r.FunctionalRender, { ...o }) : r.render ? /* @__PURE__ */ l.jsx(r.render, { ...o }) : r.value(o) }, r.header + "Row" + i + "Column" + a)) }, "row" + i)),
-    Y > 0 && /* @__PURE__ */ l.jsx(ae, { style: {
-      height: (document.getElementById("row0")?.offsetHeight ?? (t.dense ? 33 : 53)) * Y
-    }, children: /* @__PURE__ */ l.jsx(D, { colSpan: 6 }) })
-  ] }) }), e[78] = Y, e[79] = ce, e[80] = s, e[81] = t, e[82] = xe, e[83] = c, e[84] = n.columns, e[85] = I) : I = e[85];
-  let L;
-  e[86] !== ve || e[87] !== k || e[88] !== I ? (L = /* @__PURE__ */ l.jsxs(nt, { stickyHeader: !0, "aria-label": "sticky table", padding: ve, children: [
-    k,
-    I
-  ] }), e[86] = ve, e[87] = k, e[88] = I, e[89] = L) : L = e[89];
-  let le;
-  e[90] === Symbol.for("react.memo_cache_sentinel") ? (le = /* @__PURE__ */ l.jsx(Se, { ref: _, sx: {
-    position: "absolute",
-    top: "50%",
-    left: "10px",
-    background: "rgba(0,0,0,0.15)",
-    visibility: "hidden"
-  }, onClick: () => {
-    m.current && (m.current.scrollLeft = 0);
-  }, children: /* @__PURE__ */ l.jsx(Ze, {}) }), e[90] = le) : le = e[90];
-  let ne;
-  e[91] === Symbol.for("react.memo_cache_sentinel") ? (ne = /* @__PURE__ */ l.jsx(Se, { ref: V, sx: {
-    position: "absolute",
-    top: "50%",
-    right: "10px",
-    background: "rgba(0,0,0,0.15)",
-    visibility: "hidden"
-  }, onClick: () => {
-    m.current && (m.current.scrollLeft = m.current.scrollWidth - m.current.clientWidth);
-  }, children: /* @__PURE__ */ l.jsx(Ye, {}) }), e[91] = ne) : ne = e[91];
-  let O;
-  e[92] !== T || e[93] !== L ? (O = /* @__PURE__ */ l.jsxs(ot, { ref: m, sx: T, children: [
-    L,
-    le,
-    ne
-  ] }), e[92] = T, e[93] = L, e[94] = O) : O = e[94];
-  let A;
-  e[95] !== u.length || e[96] !== s || e[97] !== t.dense || e[98] !== t.hidePageMenu || e[99] !== t.itemsPerPage || e[100] !== t.rows.length || e[101] !== c ? (A = !t.hidePageMenu && /* @__PURE__ */ l.jsxs(Ie, { direction: "column", useFlexGap: !0, justifyContent: "space-between", children: [
-    /* @__PURE__ */ l.jsx(Pe, { pl: t.dense ? "4px" : 2, sx: {
-      mt: "auto",
-      mb: "auto"
-    }, children: u.length !== t.rows.length && `Showing ${u.length} matching rows of ${t.rows.length} total.` }),
-    /* @__PURE__ */ l.jsx(et, { rowsPerPageOptions: t.itemsPerPage ? Array.isArray(t.itemsPerPage) ? t.itemsPerPage : [t.itemsPerPage] : [5, 10, 25, 100], component: "div", count: u.length, rowsPerPage: c, page: s, onPageChange: (o, i) => He(i), onRowsPerPageChange: Be, showFirstButton: !t.dense, showLastButton: !t.dense, labelRowsPerPage: t.dense ? "Rows:" : void 0, sx: t.dense ? {
-      "& .MuiTablePagination-toolbar": {
-        pl: "6px"
-      },
-      "& .css-h0cf5v-MuiInputBase-root-MuiTablePagination-select": {
-        mr: "6px",
-        ml: "0px"
-      },
-      "& .MuiTablePagination-actions": {
-        ml: "4px !important"
-      }
-    } : void 0 })
-  ] }), e[95] = u.length, e[96] = s, e[97] = t.dense, e[98] = t.hidePageMenu, e[99] = t.itemsPerPage, e[100] = t.rows.length, e[101] = c, e[102] = A) : A = e[102];
-  const Ne = n.showAddColumnsModal;
-  let oe;
-  e[103] === Symbol.for("react.memo_cache_sentinel") ? (oe = () => d({
-    type: "modalChanged",
-    showAddColumnsModal: !1
-  }), e[103] = oe) : oe = e[103];
-  let ie;
-  e[104] === Symbol.for("react.memo_cache_sentinel") ? (ie = /* @__PURE__ */ l.jsx(Pe, { variant: "h4", children: "Add Columns" }), e[104] = ie) : ie = e[104];
-  let F;
-  if (e[105] !== t.columns || e[106] !== t.defaultColumnsToShow || e[107] !== t.noOfDefaultColumns || e[108] !== n.columns) {
-    let o;
-    e[110] !== t.columns || e[111] !== n.columns ? (o = (i, r) => /* @__PURE__ */ l.jsxs(Je, { children: [
-      /* @__PURE__ */ l.jsx(it, { control: /* @__PURE__ */ l.jsx(st, { checked: n.columns.find((a) => a.header === i.header) !== void 0, onChange: (a) => {
-        a.target.checked && t.columns.find((h) => h.header === i.header) ? d({
-          type: "columnsChanged",
-          columns: [...n.columns, i]
-        }) : d({
-          type: "columnsChanged",
-          columns: n.columns.filter((h) => h.header !== i.header)
-        });
-      } }), label: i.header }),
-      /* @__PURE__ */ l.jsx("br", {})
-    ] }, r), e[110] = t.columns, e[111] = n.columns, e[112] = o) : o = e[112], F = (t.defaultColumnsToShow ? t.columns.filter((i) => !t.defaultColumnsToShow?.includes(i.header)) : t.columns.slice(t.noOfDefaultColumns || 5, t.columns.length)).map(o), e[105] = t.columns, e[106] = t.defaultColumnsToShow, e[107] = t.noOfDefaultColumns, e[108] = n.columns, e[109] = F;
-  } else
-    F = e[109];
-  let se;
-  e[113] === Symbol.for("react.memo_cache_sentinel") ? (se = /* @__PURE__ */ l.jsx(Oe, { onClick: () => d({
-    type: "modalChanged",
-    showAddColumnsModal: !1
-  }), children: "Cancel" }), e[113] = se) : se = e[113];
-  let E;
-  e[114] !== F ? (E = /* @__PURE__ */ l.jsxs(rt, { sx: ft, children: [
-    ie,
-    F,
-    se
-  ] }), e[114] = F, e[115] = E) : E = e[115];
-  let H;
-  e[116] !== n.showAddColumnsModal || e[117] !== E ? (H = /* @__PURE__ */ l.jsx(at, { open: Ne, onClose: oe, children: E }), e[116] = n.showAddColumnsModal, e[117] = E, e[118] = H) : H = e[118];
-  let re;
-  return e[119] !== M || e[120] !== O || e[121] !== A || e[122] !== H ? (re = /* @__PURE__ */ l.jsxs(ct, { elevation: 3, sx: te, children: [
-    M,
-    O,
-    A,
-    H
-  ] }), e[119] = M, e[120] = O, e[121] = A, e[122] = H, e[123] = re) : re = e[123], re;
+  }, [a, v, d]), q = (t, r) => {
+    v(r), g(r?.title || "");
+  };
+  return /* @__PURE__ */ l.jsxs(M, { display: "flex", flexDirection: "row", gap: 2, style: {
+    ...T
+  }, sx: {
+    ...A
+  }, ...x?.box, children: [
+    /* @__PURE__ */ l.jsx(H, { onChange: q, value: m, options: u === "" ? b.defaultResults : B || !b.data ? [] : b.data, getOptionLabel: (t) => t.title || "", groupBy: (t) => t.type || "", renderGroup: (t) => Z(t, u), noOptionsText: S(u, B, a), isOptionEqualToValue: (t, r) => t.title === r.title, renderOption: P, filterOptions: (t) => t, renderInput: (t) => p && p.input ? I.cloneElement(p.input, {
+      ...t,
+      onKeyDown: G,
+      value: u,
+      onChange: (r) => g(r.target.value)
+    }) : /* @__PURE__ */ l.jsx(J, { ...t, label: "Search", onKeyDown: G, value: u, onChange: (r) => g(r.target.value), ...x?.input }), style: T, sx: A, ..._ }),
+    p && p.button ? I.cloneElement(p.button, {
+      onClick: () => D()
+    }) : /* @__PURE__ */ l.jsx(U, { variant: "contained", onClick: () => D(), ...x?.button, children: x?.button?.children || "Go" })
+  ] });
 };
-function gt(t) {
-  const e = [];
-  for (let s = 1; s < t; s++)
-    e.push(/* @__PURE__ */ l.jsx(D, {}, s));
-  return e;
+function Z(n, e) {
+  const o = Array.isArray(n.children) && !z(e) ? n.children.sort((O, E) => {
+    const c = (O.props?.children?.props?.children?.[0]?.props?.children || "").toLowerCase(), s = (E.props?.children?.props?.children?.[0]?.props?.children || "").toLowerCase(), i = e.toLowerCase();
+    return c === i && s !== i ? -1 : s === i && c !== i ? 1 : c.startsWith(i) && !s.startsWith(i) ? -1 : s.startsWith(i) && !c.startsWith(i) ? 1 : c.includes(i) && !s.includes(i) ? -1 : s.includes(i) && !c.includes(i) ? 1 : c.localeCompare(s);
+  }) : n.children;
+  return /* @__PURE__ */ l.jsxs("div", { children: [
+    /* @__PURE__ */ l.jsx(w, { variant: "subtitle2", sx: {
+      color: "gray",
+      paddingInline: 1.5,
+      paddingBlock: 1
+    }, children: n.group }),
+    o
+  ] }, n.key);
+}
+function S(n, e, o) {
+  return /* @__PURE__ */ l.jsx(w, { variant: "caption", children: n ? e ? "Loading..." : Array.isArray(o) && o.length === 0 ? "No results found" : "" : "Start typing for options" });
 }
-function xt(t) {
-  return t.header;
+function P(n, e) {
+  return /* @__PURE__ */ Q("li", { ...n, key: `${e.type}-${e.title || "untitled"}-${e.description || "no-description"}` }, /* @__PURE__ */ l.jsxs(M, { children: [
+    /* @__PURE__ */ l.jsx(w, { variant: "body1", component: "div", fontWeight: "bold", sx: e.type === "Gene" ? {
+      fontStyle: "italic"
+    } : {}, children: e.title }),
+    /* @__PURE__ */ l.jsx(w, { variant: "body2", color: "text.secondary", style: {
+      whiteSpace: "pre-line"
+    }, children: e.description })
+  ] }));
 }
-function Ct(t, e, s) {
-  if (t.current && e.current && s.current) {
-    const f = t.current.scrollWidth > t.current.clientWidth, g = t.current.scrollLeft > 0, c = t.current.scrollLeft + 1 < t.current.scrollWidth - t.current.clientWidth;
-    e.current.style.visibility = f && c ? "visible" : "hidden", s.current.style.visibility = f && g ? "visible" : "hidden";
-  }
+function le(n) {
+  const e = V.c(2);
+  let o;
+  return e[0] !== n ? (o = /* @__PURE__ */ l.jsx(Y, { ...n }), e[0] = n, e[1] = o) : o = e[1], o;
 }
 export {
-  Vt as default,
-  mt as genericSort,
-  Fe as isNumeric
+  le as default
 };
 //# sourceMappingURL=ui-components.es3.js.map