taxonium-component/dist/SortByTagDialog-thHjzK2V.js

React component for exploring large phylogenetic trees in the browser

import { jsx as t, jsxs as r } from "react/jsx-runtime";
import { useState as g } from "react";
import { o as p, a as h, D as u, T as n, c as m, d as y, B as l } from "./JBrowsePanel-uJIA-L6s.js";
const v = p(function(s) {
  const { model: i, handleClose: o } = s, [e, c] = g(""), a = /^[A-Za-z][A-Za-z0-9]$/.exec(e);
  return t(h.Dialog, { open: !0, onClose: o, title: "Sort by tag", children: r(u, { children: [t(n, { children: "Set the tag to sort by" }), t(n, { color: "textSecondary", children: "Examples: HP for haplotype, RG for read group, etc." }), t(m, { value: e, onChange: (d) => {
    c(d.target.value);
  }, placeholder: "Enter tag name", error: e.length === 2 && !a, helperText: e.length === 2 && !a ? "Not a valid tag" : "", autoComplete: "off", "data-testid": "sort-tag-name", slotProps: {
    htmlInput: {
      maxLength: 2,
      "data-testid": "sort-tag-name-input"
    }
  } }), r(y, { children: [t(l, { variant: "contained", color: "primary", type: "submit", autoFocus: !0, onClick: () => {
    i.setSortedBy("tag", e), o();
  }, children: "Submit" }), t(l, { variant: "contained", color: "secondary", onClick: () => {
    o();
  }, children: "Cancel" })] })] }) });
});
export {
  v as default
};
//# sourceMappingURL=SortByTagDialog-thHjzK2V.js.map