import { r as a, m as W, bd as I, bv as M, bw as V, j as r, aI as O, aJ as $, b0 as j, aK as L, ap as P, c as E, bh as N, bx as k, bl as A, by as B } from "./index-6wLGsgHc.js";
import { S as F } from "./useBasicWidgetState-DqA4I-I_-Cy-zNgyc.js";
const H = /* @__PURE__ */ E("div", {
  target: "e6zijwc0"
})(({
  theme: o
}) => ({
  "span[aria-disabled='true']": {
    background: o.colors.fadedText05
  }
}), ""), D = (o, t) => o.getStringArrayValue(t), K = (o) => o.default.map((t) => o.options[t]) ?? null, U = (o) => o.rawValues ?? null, Y = (o, t, l, n) => {
  t.setStringArrayValue(o, l.value, {
    fromUi: l.fromUi
  }, n);
}, G = (o) => {
  const {
    element: t,
    widgetMgr: l,
    fragmentId: n
  } = o, e = W(), h = a.useContext(I), [s, c] = F({
    getStateFromWidgetMgr: D,
    getDefaultStateFromProto: K,
    getCurrStateFromProto: U,
    updateWidgetMgrState: Y,
    element: t,
    widgetMgr: l,
    fragmentId: n
  }), p = t.maxSelections > 0 && s.length >= t.maxSelections, b = a.useMemo(() => {
    if (t.maxSelections === 0) return "No results";
    if (s.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, s.length]), g = a.useCallback((i) => {
    switch (i.type) {
      case "remove":
        return M(s, i.option?.value);
      case "clear":
        return [];
      case "select":
        return s.concat([i.option?.value]);
      default:
        throw new Error(`State transition is unknown: ${i.type}`);
    }
  }, [s]), S = a.useCallback((i) => {
    t.maxSelections && i.type === "select" && s.length >= t.maxSelections || c({
      value: g(i),
      fromUi: !0
    });
  }, [t.maxSelections, g, c, s.length]), {
    options: f
  } = t, {
    placeholder: x,
    disabled: y,
    selectOptions: v,
    inputReadOnly: z,
    valuesToUiMulti: m,
    createFilterOptions: u
  } = V({
    options: f,
    isMulti: !0,
    acceptNewOptions: t.acceptNewOptions ?? !1,
    placeholderInput: t.placeholder
  }), w = a.useCallback((i, C) => p ? [] : u(s)(i, C), [u, p, s]), d = o.disabled || y, T = a.useMemo(() => m(s), [m, s]), R = a.useMemo(() => {
    const i = e.fontSizes.baseFontSize * 1.6 + 14;
    return `${Math.round(i * 4.25)}px`;
  }, [e.fontSizes.baseFontSize]);
  return /* @__PURE__ */ r.jsxs("div", {
    className: "stMultiSelect",
    "data-testid": "stMultiSelect",
    children: [/* @__PURE__ */ r.jsx(O, {
      label: t.label,
      disabled: d,
      labelVisibility: $(t.labelVisibility?.value),
      children: t.help && /* @__PURE__ */ r.jsx(j, {
        children: /* @__PURE__ */ r.jsx(L, {
          content: t.help,
          placement: P.TOP_RIGHT
        })
      })
    }), /* @__PURE__ */ r.jsx(H, {
      children: /* @__PURE__ */ r.jsx(N, {
        creatable: t.acceptNewOptions ?? !1,
        options: v,
        labelKey: "label",
        valueKey: "value",
        "aria-label": t.label,
        placeholder: x,
        type: B.select,
        multi: !0,
        onChange: S,
        value: T,
        disabled: d,
        size: "compact",
        noResultsMsg: b,
        filterOptions: w,
        closeOnSelect: !1,
        ignoreCase: !1,
        overrides: {
          Popover: {
            props: {
              ignoreBoundary: h,
              overrides: {
                Body: {
                  style: () => ({
                    marginTop: e.spacing.px
                  })
                }
              }
            }
          },
          SelectArrow: {
            component: A,
            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: d ? 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: z
            }
          },
          Dropdown: {
            component: k
          }
        }
      })
    })]
  });
}, X = a.memo(G);
export {
  X as default
};
//# sourceMappingURL=index-DU9g9Sd6-CBWT9pYx.js.map
