@open-formulieren/formio-builder/lib/esm/components/formio/select.js

An opinionated Formio webform builder for Open Forms

import { jsxs as R, jsx as m } from "react/jsx-runtime";
import { useField as V } from "formik";
import k from "react-select";
import E from "./component.js";
import I from "./description.js";
function C(o) {
  return o.options === void 0;
}
function q(o) {
  return o.options !== void 0;
}
function w(o, l, i, n = "value") {
  const a = i ? [l] : l, t = [], d = (r) => a.includes(r[n]);
  for (const r of o)
    if (C(r) && d(r) && t.push(r), q(r))
      for (const c of r.options)
        d(c) && t.push(c);
  return i ? t[0] : t;
}
const A = (o) => ({
  ...o,
  borderRadius: 4
  // same as bootstrap inputs
});
function L() {
  return {
    control: (o, l) => ({
      ...o,
      backgroundColor: "var(--form-input-bg, #fff)",
      borderColor: l.isFocused ? "var(--body-quiet-color, #666)" : "var(--border-color, #ccc)",
      boxShadow: void 0,
      "&:hover": {
        borderColor: void 0
      }
    }),
    placeholder: (o) => ({
      ...o,
      color: "var(--body-quiet-color, #e0e0e0)"
    }),
    indicatorSeparator: (o) => ({
      ...o,
      backgroundColor: "var(--border-color, #ccc)"
    }),
    dropdownIndicator: (o) => ({
      ...o,
      color: "var(--body-quiet-color, #e0e0e0)",
      "&:hover": {
        color: "var(--body-loud-color, #000)"
      }
    }),
    clearIndicator: (o) => ({
      ...o,
      color: "var(--body-quiet-color, #e0e0e0)",
      "&:hover": {
        color: "var(--body-loud-color, #000)"
      }
    }),
    valueContainer: (o) => ({
      ...o,
      color: "var(--body-fg, #333)"
    }),
    input: (o) => ({
      ...o,
      color: "var(--body-fg, #333)"
    }),
    singleValue: (o) => ({
      ...o,
      color: "var(--body-fg, #333)"
    }),
    multiValue: (o) => ({
      ...o,
      backgroundColor: "var(--default-button-bg, #017092)"
    }),
    multiValueLabel: (o) => ({
      ...o,
      color: "var(--formio-dropdown-value-label-color, #fff)"
    }),
    multiValueRemove: (o) => ({
      ...o,
      color: "var(--formio-dropdown-value-label-color, #fff)"
    }),
    menu: (o) => ({
      ...o,
      backgroundColor: "var(--form-input-bg, #fff)",
      borderColor: "var(--border-color, #ccc)"
    }),
    menuList: (o) => ({
      ...o,
      border: "solid 1px var(--border-color, #ccc)",
      borderRadius: "4px"
    }),
    option: (o, l) => ({
      ...o,
      color: "var(--body-fg, #333)",
      backgroundColor: l.isFocused ? "var(--formio-dropdown-highlighted-bg, #f2f2f2)" : void 0
    })
  };
}
function G({
  name: o,
  label: l,
  required: i = !1,
  tooltip: n = "",
  description: a = "",
  isClearable: t = !1,
  isLoading: d = !1,
  valueProperty: r = "value",
  // react-select uses null internally, see
  // https://github.com/JedWatson/react-select/blob/06e34882638d1526b9f5a1238bb567a3e9460ce5/packages/react-select/src/Select.tsx#L1083
  emptyValue: c = null,
  onChange: u,
  ...s
}) {
  const [p, , {
    setValue: S
  }] = V(o), g = `editform-${o}`;
  let y;
  if (s.options) {
    const e = p.value, f = !Array.isArray(e);
    y = w(s.options, e, f, r);
  }
  return /* @__PURE__ */ R(E, { type: "select", field: o, required: i, htmlId: g, label: l, tooltip: n, children: [
    /* @__PURE__ */ m("div", { children: /* @__PURE__ */ m(k, { inputId: g, isClearable: t, isLoading: d, getOptionValue: (e) => C(e) && e[r], className: "formio-builder-select", classNamePrefix: "formio-builder-select", theme: A, styles: L(), menuPlacement: "auto", ...p, ...s, onChange: (e, f) => {
      const b = !Array.isArray(e);
      f.action === "clear" && b && (e = c);
      const h = (b ? [e] : e).map((v) => (v == null ? void 0 : v[r]) ?? c), x = b ? h[0] : h;
      S(x), u == null || u({
        target: {
          name: o,
          value: x
        }
      });
    }, value: y }) }),
    a && /* @__PURE__ */ m(I, { text: a })
  ] });
}
export {
  G as default,
  L as getReactSelectStyles
};