synapse-react-client/dist/components/DropdownSelect/DropdownSelect.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { jsxs as h, Fragment as M, jsx as e } from "react/jsx-runtime";
import { useState as x, useRef as y } from "react";
import { ButtonGroup as B, Button as b, Popper as G, Grow as P, Paper as j, ClickAwayListener as z, MenuList as F, MenuItem as O } from "@mui/material";
import T from "../IconSvg/IconSvg.js";
function J(I) {
  const {
    options: c,
    selectedIndex: n,
    setSelectedIndex: i,
    variant: C = "contained",
    buttonGroupAriaLabel: k,
    onButtonClick: s,
    buttonText: d,
    anchorRef: g,
    ...v
  } = I, [l, a] = x(!1), w = y(null), o = g ?? w, [u, A] = x(
    n ?? 0
  ), L = (t, r) => {
    i ? i(r) : A(r), a(!1);
  }, p = () => {
    a((t) => !t);
  }, R = (t) => {
    o.current && o.current.contains(t.target) || a(!1);
  };
  return /* @__PURE__ */ h(M, { children: [
    /* @__PURE__ */ h(
      B,
      {
        variant: C,
        ref: o,
        "aria-label": "split button",
        ...v,
        children: [
          /* @__PURE__ */ e(
            b,
            {
              onClick: () => {
                s ? s(n ?? u) : p();
              },
              children: d || c[n ?? u]
            }
          ),
          /* @__PURE__ */ e(
            b,
            {
              size: "small",
              "aria-controls": l ? "split-button-menu" : void 0,
              "aria-expanded": l ? "true" : void 0,
              "aria-label": k,
              "aria-haspopup": "menu",
              onClick: p,
              sx: { width: "36px" },
              children: /* @__PURE__ */ e(T, { icon: "expandMore", wrap: !1 })
            }
          )
        ]
      }
    ),
    /* @__PURE__ */ e(
      G,
      {
        sx: {
          zIndex: 10
        },
        open: l,
        placement: "bottom-start",
        anchorEl: o.current,
        role: void 0,
        transition: !0,
        disablePortal: !0,
        children: ({ TransitionProps: t, placement: r }) => /* @__PURE__ */ e(
          P,
          {
            ...t,
            style: {
              transformOrigin: r === "bottom" ? "center top" : "center bottom"
            },
            children: /* @__PURE__ */ e(j, { children: /* @__PURE__ */ e(z, { onClickAway: R, children: /* @__PURE__ */ e(F, { id: "split-button-menu", autoFocusItem: !0, children: c.map((m, f) => /* @__PURE__ */ e(
              O,
              {
                selected: f === n,
                onClick: (S) => L(S, f),
                children: m
              },
              m
            )) }) }) })
          }
        )
      }
    )
  ] });
}
export {
  J as default
};
//# sourceMappingURL=DropdownSelect.js.map