import { r as B, u as f, J as M, M as z, N as C, j as s, W as X, l as w, O as L, T as F, P as Y, Q as H, R as J, X as T, Y as U } from "./index-CsBCemCF.js";
import { memo as j, useContext as E, useMemo as c, useCallback as d } from "react";
import { u as O } from "./useBasicWidgetState-KOlq_goV.js";
const A = /* @__PURE__ */ B("div", process.env.NODE_ENV === "production" ? {
  target: "e6zijwc0"
} : {
  target: "e6zijwc0",
  label: "StyledUISelect"
})(({
  theme: o
}) => ({
  "span[aria-disabled='true']": {
    background: o.colors.fadedText05
  }
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3N0bGl0ZS9zdGxpdGUvc3RyZWFtbGl0L2Zyb250ZW5kL2xpYi9zcmMvY29tcG9uZW50cy93aWRnZXRzL011bHRpc2VsZWN0L3N0eWxlZC1jb21wb25lbnRzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCOEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvc3RsaXRlL3N0bGl0ZS9zdHJlYW1saXQvZnJvbnRlbmQvbGliL3NyYy9jb21wb25lbnRzL3dpZGdldHMvTXVsdGlzZWxlY3Qvc3R5bGVkLWNvbXBvbmVudHMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgU3RyZWFtbGl0IEluYy4gKDIwMTgtMjAyMikgU25vd2ZsYWtlIEluYy4gKDIwMjItMjAyNSlcbiAqXG4gKiBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cblxuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCJcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFVJU2VsZWN0ID0gc3R5bGVkLmRpdigoeyB0aGVtZSB9KSA9PiAoe1xuICBcInNwYW5bYXJpYS1kaXNhYmxlZD0ndHJ1ZSddXCI6IHtcbiAgICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuZmFkZWRUZXh0MDUsXG4gIH0sXG59KSlcbiJdfQ== */"), k = (o, t) => o.getStringArrayValue(t), Q = (o) => o.default.map((t) => o.options[t]) ?? null, D = (o) => o.rawValues ?? null, P = (o, t, n, a) => {
  t.setStringArrayValue(o, n.value, {
    fromUi: n.fromUi
  }, a);
}, K = (o) => {
  const {
    element: t,
    widgetMgr: n,
    fragmentId: a
  } = o, e = f(), I = E(M), [l, u] = O({
    getStateFromWidgetMgr: k,
    getDefaultStateFromProto: Q,
    getCurrStateFromProto: D,
    updateWidgetMgrState: P,
    element: t,
    widgetMgr: n,
    fragmentId: a
  }), p = t.maxSelections > 0 && l.length >= t.maxSelections, S = c(() => {
    if (t.maxSelections === 0)
      return "No results";
    if (l.length === t.maxSelections) {
      const i = t.maxSelections !== 1 ? "options" : "option";
      return `You can only select up to ${t.maxSelections} ${i}. Remove an option first.`;
    }
    return "No results";
  }, [t.maxSelections, l.length]), g = d((i) => {
    switch (i.type) {
      case "remove":
        return z(l, i.option?.value);
      case "clear":
        return [];
      case "select":
        return l.concat([i.option?.value]);
      default:
        throw new Error(`State transition is unknown: ${i.type}`);
    }
  }, [l]), y = d((i) => {
    t.maxSelections && i.type === "select" && l.length >= t.maxSelections || u({
      value: g(i),
      fromUi: !0
    });
  }, [t.maxSelections, g, u, l.length]), {
    options: W
  } = t, {
    placeholder: x,
    disabled: v,
    selectOptions: G,
    inputReadOnly: V,
    valuesToUiMulti: b,
    createFilterOptions: m
  } = C({
    options: W,
    isMulti: !0,
    acceptNewOptions: t.acceptNewOptions ?? !1,
    placeholderInput: t.placeholder
  }), Z = d((i, h) => p ? [] : m(l)(i, h), [m, p, l]), r = o.disabled || v, N = c(() => b(l), [b, l]), R = c(() => {
    const i = e.fontSizes.baseFontSize * 1.6 + 14;
    return `${Math.round(i * 4.25)}px`;
  }, [e.fontSizes.baseFontSize]);
  return /* @__PURE__ */ s.jsxs("div", { className: "stMultiSelect", "data-testid": "stMultiSelect", children: [
    /* @__PURE__ */ s.jsx(X, { label: t.label, disabled: r, labelVisibility: w(t.labelVisibility?.value), children: t.help && /* @__PURE__ */ s.jsx(L, { children: /* @__PURE__ */ s.jsx(F, { content: t.help, placement: Y.TOP_RIGHT }) }) }),
    /* @__PURE__ */ s.jsx(A, { children: /* @__PURE__ */ s.jsx(H, { creatable: t.acceptNewOptions ?? !1, options: G, labelKey: "label", valueKey: "value", "aria-label": t.label, placeholder: x, type: U.select, multi: !0, onChange: y, value: N, disabled: r, size: "compact", noResultsMsg: S, filterOptions: Z, closeOnSelect: !1, ignoreCase: !1, overrides: {
      Popover: {
        props: {
          ignoreBoundary: I,
          overrides: {
            Body: {
              style: () => ({
                marginTop: e.spacing.px
              })
            }
          }
        }
      },
      SelectArrow: {
        component: T,
        props: {
          style: {
            cursor: "pointer"
          },
          overrides: {
            Svg: {
              style: () => ({
                width: e.iconSizes.xl,
                height: e.iconSizes.xl
              })
            }
          }
        }
      },
      IconsContainer: {
        style: () => ({
          paddingRight: e.spacing.sm
        })
      },
      ControlContainer: {
        style: {
          maxHeight: R,
          minHeight: e.sizes.minElementHeight,
          // Baseweb requires long-hand props, short-hand leads to weird bugs & warnings.
          borderLeftWidth: e.sizes.borderWidth,
          borderRightWidth: e.sizes.borderWidth,
          borderTopWidth: e.sizes.borderWidth,
          borderBottomWidth: e.sizes.borderWidth
        }
      },
      Placeholder: {
        style: () => ({
          flex: "inherit",
          color: r ? e.colors.fadedText40 : e.colors.fadedText60
        })
      },
      ValueContainer: {
        style: () => ({
          overflowY: "auto",
          paddingLeft: e.spacing.sm,
          paddingTop: e.spacing.none,
          paddingBottom: e.spacing.none,
          paddingRight: e.spacing.none
        })
      },
      ClearIcon: {
        props: {
          overrides: {
            Svg: {
              style: {
                color: e.colors.grayTextColor,
                // setting this width and height makes the clear-icon align with dropdown arrows of other input fields
                padding: e.spacing.threeXS,
                height: e.sizes.clearIconSize,
                width: e.sizes.clearIconSize,
                cursor: "pointer",
                ":hover": {
                  fill: e.colors.bodyText
                }
              }
            }
          }
        }
      },
      SearchIcon: {
        style: {
          color: e.colors.grayTextColor
        }
      },
      Tag: {
        props: {
          overrides: {
            Root: {
              style: {
                fontWeight: e.fontWeights.normal,
                borderTopLeftRadius: e.radii.md,
                borderTopRightRadius: e.radii.md,
                borderBottomRightRadius: e.radii.md,
                borderBottomLeftRadius: e.radii.md,
                fontSize: e.fontSizes.md,
                paddingLeft: e.spacing.sm,
                marginLeft: e.spacing.none,
                marginRight: e.spacing.sm,
                // The tag height is derived from the minElementHeight
                // minus a top and bottom padding (2 * spacing.xs)
                // to nicely fit into the input field.
                height: `calc(${e.sizes.minElementHeight} - 2 * ${e.spacing.xs})`,
                maxWidth: `calc(100% - ${e.spacing.lg})`,
                // Using !important because the alternative would be
                // uglier: we'd have to put it under a selector like
                // "&[role="button"]:not(:disabled)" in order to win in
                // the order of the precedence.
                cursor: "default !important"
              }
            },
            Action: {
              style: {
                paddingLeft: 0
              }
            },
            ActionIcon: {
              props: {
                overrides: {
                  Svg: {
                    style: {
                      // The action icon should be around 0.625% of the parent font size.
                      width: "0.625em",
                      height: "0.625em"
                    }
                  }
                }
              }
            }
          }
        }
      },
      MultiValue: {
        props: {
          overrides: {
            Root: {
              style: {
                fontSize: e.fontSizes.sm
              }
            }
          }
        }
      },
      Input: {
        props: {
          readOnly: V
        }
      },
      Dropdown: {
        component: J
      }
    } }) })
  ] });
}, ee = j(K);
export {
  ee as default
};
//# sourceMappingURL=index-C_KUQlWP.js.map
