@carton-org/react-neumorphism/dist/components/Dropdown/Dropdown.js

A React component library implementing the neumorphism design style

import { jsxs as W, jsx as g } from "@emotion/react/jsx-runtime";
import { withTheme as H, css as y } from "@emotion/react";
import { forwardRef as J, useRef as N, useState as u } from "react";
import { StyledContainer as h, StyledHeader as k, StyledDropdownContent as r, StyledContentWrapper as F, StyledOptionItem as w } from "./dropdown.styles.js";
import { useClickOutside as T } from "../../hooks/useClickOutside.js";
import e from "../Typography/Typography.js";
import { useForwardRef as Y } from "../../hooks/useForwardRef.js";
import { CarretDownIcon as S } from "../../icons/CarretDownIcon.js";
const U = (c) => /* @__PURE__ */ y({
  transition: "transform 0.3s ease-in-out",
  transform: c ? "rotate(180deg)" : "rotate(0deg)"
}, process.env.NODE_ENV === "production" ? "" : ";label:rotateOpenIconStyle;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9iZW4vRG9jdW1lbnRzL1Byb2plY3RzL3JlYWN0LW5ldW1vcnBoaXNtZS9zcmMvbGliL2NvbXBvbmVudHMvRHJvcGRvd24vRHJvcGRvd24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtDRSIsImZpbGUiOiIvVXNlcnMvYmVuL0RvY3VtZW50cy9Qcm9qZWN0cy9yZWFjdC1uZXVtb3JwaGlzbWUvc3JjL2xpYi9jb21wb25lbnRzL0Ryb3Bkb3duL0Ryb3Bkb3duLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgd2l0aFRoZW1lIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XG5pbXBvcnQgeyBmb3J3YXJkUmVmLCB1c2VSZWYsIHVzZVN0YXRlIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQge1xuICBTdHlsZWRDb250YWluZXIsXG4gIFN0eWxlZENvbnRlbnRXcmFwcGVyLFxuICBTdHlsZWREcm9wZG93bkNvbnRlbnQsXG4gIFN0eWxlZEhlYWRlcixcbiAgU3R5bGVkT3B0aW9uSXRlbSxcbn0gZnJvbSBcIi4vZHJvcGRvd24uc3R5bGVzXCI7XG5pbXBvcnQgeyBTaXplcyB9IGZyb20gXCIuLi8uLi9jb25zdGFudHNcIjtcbmltcG9ydCB7IENhcnJldERvd25JY29uIH0gZnJvbSBcIi4uLy4uL2ljb25zXCI7XG5pbXBvcnQgeyB1c2VDbGlja091dHNpZGUgfSBmcm9tIFwiLi4vLi4vaG9va3MvdXNlQ2xpY2tPdXRzaWRlXCI7XG5pbXBvcnQgVHlwb2dyYXBoeSBmcm9tIFwiLi4vVHlwb2dyYXBoeS9UeXBvZ3JhcGh5XCI7XG5pbXBvcnQgeyB1c2VGb3J3YXJkUmVmIH0gZnJvbSBcIi4uLy4uL2hvb2tzL3VzZUZvcndhcmRSZWZcIjtcblxuaW50ZXJmYWNlIE9wdGlvbiB7XG4gIGxhYmVsOiBzdHJpbmc7XG4gIHZhbHVlOiBzdHJpbmc7XG59XG5cbmludGVyZmFjZSBEcm9wZG93blByb3BzIHtcbiAgdmFsdWU/OiBzdHJpbmc7XG4gIHBsYWNlaG9sZGVyPzogc3RyaW5nO1xuICBvcHRpb25zOiBPcHRpb25bXTtcbiAgb25DaGFuZ2U6ICh2YWx1ZTogc3RyaW5nKSA9PiB2b2lkO1xuICBzaXplPzogU2l6ZXM7XG4gIGRyb3Bkb3duSGVhZGVyTGFiZWxTdHlsZT86IFJlYWN0LkNTU1Byb3BlcnRpZXM7XG4gIGRyb3Bkb3duSGVhZGVyU3R5bGU/OiBSZWFjdC5DU1NQcm9wZXJ0aWVzO1xuICBkcm9wZG93bkNvbnRlbnRTdHlsZT86IFJlYWN0LkNTU1Byb3BlcnRpZXM7XG4gIGRyb3Bkb3duT3B0aW9uTGFiZWxTdHlsZT86IFJlYWN0LkNTU1Byb3BlcnRpZXM7XG4gIGRyb3Bkb3duT3B0aW9uSXRlbVN0eWxlPzogUmVhY3QuQ1NTUHJvcGVydGllcztcbn1cblxuY29uc3Qgcm90YXRlT3Blbkljb25TdHlsZSA9IChvcGVuOiBib29sZWFuKSA9PlxuICBjc3Moe1xuICAgIHRyYW5zaXRpb246IFwidHJhbnNmb3JtIDAuM3MgZWFzZS1pbi1vdXRcIixcbiAgICB0cmFuc2Zvcm06IG9wZW4gPyBcInJvdGF0ZSgxODBkZWcpXCIgOiBcInJvdGF0ZSgwZGVnKVwiLFxuICB9KTtcblxuY29uc3QgRHJvcGRvd24gPSBmb3J3YXJkUmVmPEhUTUxEaXZFbGVtZW50LCBEcm9wZG93blByb3BzPihcbiAgKFxuICAgIHtcbiAgICAgIHZhbHVlLFxuICAgICAgcGxhY2Vob2xkZXIsXG4gICAgICBvcHRpb25zLFxuICAgICAgb25DaGFuZ2UsXG4gICAgICBzaXplID0gXCJzbVwiLFxuICAgICAgZHJvcGRvd25IZWFkZXJMYWJlbFN0eWxlLFxuICAgICAgZHJvcGRvd25IZWFkZXJTdHlsZSxcbiAgICAgIGRyb3Bkb3duQ29udGVudFN0eWxlLFxuICAgICAgZHJvcGRvd25PcHRpb25MYWJlbFN0eWxlLFxuICAgICAgZHJvcGRvd25PcHRpb25JdGVtU3R5bGUsXG4gICAgfSxcbiAgICByZWYsXG4gICkgPT4ge1xuICAgIGNvbnN0IGRyb3Bkb3duQ29udGFpbmVyUmVmID0gdXNlRm9yd2FyZFJlZjxIVE1MRGl2RWxlbWVudD4ocmVmKTtcbiAgICBjb25zdCBkcm9wZG93bkhlYWRlclJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudD4obnVsbCk7XG4gICAgY29uc3QgW2lzT3Blbiwgc2V0SXNPcGVuXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgICBjb25zdCBbY3VycmVudFZhbHVlLCBzZXRDdXJyZW50VmFsdWVdID0gdXNlU3RhdGU8c3RyaW5nIHwgdW5kZWZpbmVkPih2YWx1ZSk7XG5cbiAgICBjb25zdCBjdXJyZW50T3B0aW9uID0gb3B0aW9ucy5maW5kKFxuICAgICAgKG9wdGlvbikgPT4gb3B0aW9uLnZhbHVlID09PSBjdXJyZW50VmFsdWUsXG4gICAgKTtcbiAgICBjb25zdCBkaXNwbGF5UGxhY2Vob2xkZXIgPSBjdXJyZW50T3B0aW9uID09PSB1bmRlZmluZWQ7XG5cbiAgICBjb25zdCB0b2dnbGVEcm9wZG93biA9IChldmVudDogUmVhY3QuTW91c2VFdmVudDxIVE1MRGl2RWxlbWVudD4pID0+IHtcbiAgICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgICAgc2V0SXNPcGVuKChwcmV2KSA9PiAhcHJldik7XG4gICAgfTtcblxuICAgIHVzZUNsaWNrT3V0c2lkZShkcm9wZG93bkNvbnRhaW5lclJlZiwgKCkgPT4gc2V0SXNPcGVuKGZhbHNlKSk7XG5cbiAgICBjb25zdCBoYW5kbGVPcHRpb25TZWxlY3Rpb24gPSAoXG4gICAgICBldmVudDogUmVhY3QuTW91c2VFdmVudDxIVE1MRGl2RWxlbWVudD4sXG4gICAgICBvcHRpb246IE9wdGlvbixcbiAgICApID0+IHtcbiAgICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgICAgc2V0Q3VycmVudFZhbHVlKG9wdGlvbi52YWx1ZSk7XG4gICAgICBvbkNoYW5nZShvcHRpb24udmFsdWUpO1xuICAgICAgdG9nZ2xlRHJvcGRvd24oZXZlbnQpO1xuICAgIH07XG5cbiAgICByZXR1cm4gKFxuICAgICAgPFN0eWxlZENvbnRhaW5lciByZWY9e2Ryb3Bkb3duQ29udGFpbmVyUmVmfT5cbiAgICAgICAgPFN0eWxlZEhlYWRlclxuICAgICAgICAgIG9uQ2xpY2s9e3RvZ2dsZURyb3Bkb3dufVxuICAgICAgICAgIHJlZj17ZHJvcGRvd25IZWFkZXJSZWZ9XG4gICAgICAgICAgJGlzUGxhY2Vob2xkZXI9e2Rpc3BsYXlQbGFjZWhvbGRlcn1cbiAgICAgICAgICAkc2l6ZT17c2l6ZX1cbiAgICAgICAgICAkZHJvcGRvd25IZWFkZXJTdHlsZT17ZHJvcGRvd25IZWFkZXJTdHlsZX1cbiAgICAgICAgPlxuICAgICAgICAgIDxUeXBvZ3JhcGh5IHNpemU9e3NpemV9IGxhYmVsU3R5bGU9e2Ryb3Bkb3duSGVhZGVyTGFiZWxTdHlsZX0+XG4gICAgICAgICAgICB7Y3VycmVudE9wdGlvbj8ubGFiZWwgPz8gcGxhY2Vob2xkZXJ9XG4gICAgICAgICAgPC9UeXBvZ3JhcGh5PlxuICAgICAgICAgIDxDYXJyZXREb3duSWNvbiBjdXN0b21TdHlsZXM9e3JvdGF0ZU9wZW5JY29uU3R5bGUoaXNPcGVuKX0gLz5cbiAgICAgICAgPC9TdHlsZWRIZWFkZXI+XG4gICAgICAgIDxTdHlsZWREcm9wZG93bkNvbnRlbnQgb25DbGljaz17dG9nZ2xlRHJvcGRvd259ICRpc09wZW49e2lzT3Blbn0+XG4gICAgICAgICAgPFN0eWxlZENvbnRlbnRXcmFwcGVyXG4gICAgICAgICAgICAkc2l6ZT17c2l6ZX1cbiAgICAgICAgICAgICRkcm9wZG93bkNvbnRlbnRTdHlsZT17ZHJvcGRvd25Db250ZW50U3R5bGV9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge29wdGlvbnMubWFwKChvcHRpb24pID0+IChcbiAgICAgICAgICAgICAgPFN0eWxlZE9wdGlvbkl0ZW1cbiAgICAgICAgICAgICAgICBrZXk9e29wdGlvbi52YWx1ZX1cbiAgICAgICAgICAgICAgICAkc2l6ZT17c2l6ZX1cbiAgICAgICAgICAgICAgICBvbkNsaWNrPXsoZXZlbnQpID0+IGhhbmRsZU9wdGlvblNlbGVjdGlvbihldmVudCwgb3B0aW9uKX1cbiAgICAgICAgICAgICAgICAkZHJvcGRvd25PcHRpb25MYWJlbFN0eWxlPXtkcm9wZG93bk9wdGlvbkl0ZW1TdHlsZX1cbiAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIDxUeXBvZ3JhcGh5IHNpemU9e3NpemV9IGxhYmVsU3R5bGU9e2Ryb3Bkb3duT3B0aW9uTGFiZWxTdHlsZX0+XG4gICAgICAgICAgICAgICAgICB7b3B0aW9uLmxhYmVsfVxuICAgICAgICAgICAgICAgIDwvVHlwb2dyYXBoeT5cbiAgICAgICAgICAgICAgPC9TdHlsZWRPcHRpb25JdGVtPlxuICAgICAgICAgICAgKSl9XG4gICAgICAgICAgPC9TdHlsZWRDb250ZW50V3JhcHBlcj5cbiAgICAgICAgPC9TdHlsZWREcm9wZG93bkNvbnRlbnQ+XG4gICAgICA8L1N0eWxlZENvbnRhaW5lcj5cbiAgICApO1xuICB9LFxuKTtcblxuZXhwb3J0IGRlZmF1bHQgd2l0aFRoZW1lKERyb3Bkb3duKTtcbiJdfQ== */"), z = J(({
  value: c,
  placeholder: R,
  options: d,
  onChange: n,
  size: l = "sm",
  dropdownHeaderLabelStyle: i,
  dropdownHeaderStyle: B,
  dropdownContentStyle: V,
  dropdownOptionLabelStyle: v,
  dropdownOptionItemStyle: m
}, o) => {
  const Z = Y(o), t = N(null), [G, X] = u(!1), [x, s] = u(c), C = d.find((I) => I.value === x), p = C === void 0, A = (I) => {
    I.stopPropagation(), X((b) => !b);
  };
  T(Z, () => X(!1));
  const a = (I, b) => {
    I.stopPropagation(), s(b.value), n(b.value), A(I);
  };
  return /* @__PURE__ */ W(h, { ref: Z, children: [
    /* @__PURE__ */ W(k, { onClick: A, ref: t, $isPlaceholder: p, $size: l, $dropdownHeaderStyle: B, children: [
      /* @__PURE__ */ g(e, { size: l, labelStyle: i, children: (C == null ? void 0 : C.label) ?? R }),
      /* @__PURE__ */ g(S, { customStyles: U(G) })
    ] }),
    /* @__PURE__ */ g(r, { onClick: A, $isOpen: G, children: /* @__PURE__ */ g(F, { $size: l, $dropdownContentStyle: V, children: d.map((I) => /* @__PURE__ */ g(w, { $size: l, onClick: (b) => a(b, I), $dropdownOptionLabelStyle: m, children: /* @__PURE__ */ g(e, { size: l, labelStyle: v, children: I.label }) }, I.value)) }) })
  ] });
}), K = H(z);
export {
  K as default
};