import u from "./index-extends.js";
import Re from "./index-objectWithoutPropertiesLoose.js";
import * as i from "react";
import { isFragment as Fe } from "react-is";
import t from "./index-_virtual16.js";
import { clsx as $e } from "./index-clsx.js";
import je from "./index-Menu2.js";
import { nativeSelectSelectStyles as Ve, nativeSelectIconStyles as We } from "./index-NativeSelectInput.js";
import { isFilled as Ae } from "./index-utils8.js";
import U from "./index-styled.js";
import I, { getSelectUtilityClasses as ke } from "./index-selectClasses.js";
import { jsxs as Te, jsx as w } from "react/jsx-runtime";
import ae from "./index-useControlled2.js";
import Ue from "./index-useForkRef.js";
import _e from "./index-ownerDocument2.js";
import Be from "./index-formatMuiErrorMessage.js";
import Ke from "./index-useId2.js";
import ue from "./index-capitalize.js";
import Le from "./index-composeClasses.js";
import ze from "./index-slotShouldForwardProp.js";
import qe from "./index-refType.js";
var ie;
const He = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "error", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"], Ye = U("div", {
  name: "MuiSelect",
  slot: "Select",
  overridesResolver: (l, o) => {
    const {
      ownerState: s
    } = l;
    return [
      // Win specificity over the input base
      {
        [`&.${I.select}`]: o.select
      },
      {
        [`&.${I.select}`]: o[s.variant]
      },
      {
        [`&.${I.error}`]: o.error
      },
      {
        [`&.${I.multiple}`]: o.multiple
      }
    ];
  }
})(Ve, {
  // Win specificity over the input base
  [`&.${I.select}`]: {
    height: "auto",
    // Resets for multiple select with chips
    minHeight: "1.4375em",
    // Required for select\text-field height consistency
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
    overflow: "hidden"
  }
}), Ge = U("svg", {
  name: "MuiSelect",
  slot: "Icon",
  overridesResolver: (l, o) => {
    const {
      ownerState: s
    } = l;
    return [o.icon, s.variant && o[`icon${ue(s.variant)}`], s.open && o.iconOpen];
  }
})(We), Je = U("input", {
  shouldForwardProp: (l) => ze(l) && l !== "classes",
  name: "MuiSelect",
  slot: "NativeInput",
  overridesResolver: (l, o) => o.nativeInput
})({
  bottom: 0,
  left: 0,
  position: "absolute",
  opacity: 0,
  pointerEvents: "none",
  width: "100%",
  boxSizing: "border-box"
});
function se(l, o) {
  return typeof o == "object" && o !== null ? l === o : String(l) === String(o);
}
function Qe(l) {
  return l == null || typeof l == "string" && !l.trim();
}
const Xe = (l) => {
  const {
    classes: o,
    variant: s,
    disabled: y,
    multiple: F,
    open: $,
    error: h
  } = l, f = {
    select: ["select", s, y && "disabled", F && "multiple", h && "error"],
    icon: ["icon", `icon${ue(s)}`, $ && "iconOpen", y && "disabled"],
    nativeInput: ["nativeInput"]
  };
  return Le(f, ke, o);
}, Ze = /* @__PURE__ */ i.forwardRef(function(o, s) {
  var y;
  const {
    "aria-describedby": F,
    "aria-label": $,
    autoFocus: h,
    autoWidth: f,
    children: ce,
    className: pe,
    defaultOpen: _,
    defaultValue: de,
    disabled: E,
    displayEmpty: fe,
    error: B = !1,
    IconComponent: me,
    inputRef: be,
    labelId: S,
    MenuProps: g = {},
    multiple: c,
    name: p,
    onBlur: K,
    onChange: x,
    onClose: L,
    onFocus: ve,
    onOpen: z,
    open: q,
    readOnly: H,
    renderValue: Y,
    SelectDisplayProps: j = {},
    tabIndex: G,
    value: ye,
    variant: he = "standard"
  } = o, J = Re(o, He), [r, Q] = ae({
    controlled: ye,
    default: de,
    name: "Select"
  }), [X, Se] = ae({
    controlled: q,
    default: _,
    name: "Select"
  }), Z = i.useRef(null), d = i.useRef(null), [m, ge] = i.useState(null), {
    current: V
  } = i.useRef(q != null), [Ie, ee] = i.useState(), we = Ue(s, be), Ee = i.useCallback((e) => {
    d.current = e, e && ge(e);
  }, []), C = m == null ? void 0 : m.parentNode;
  i.useImperativeHandle(we, () => ({
    focus: () => {
      d.current.focus();
    },
    node: Z.current,
    value: r
  }), [r]), i.useEffect(() => {
    _ && X && m && !V && (ee(f ? null : C.clientWidth), d.current.focus());
  }, [m, f]), i.useEffect(() => {
    h && d.current.focus();
  }, [h]), i.useEffect(() => {
    if (!S)
      return;
    const e = _e(d.current).getElementById(S);
    if (e) {
      const n = () => {
        getSelection().isCollapsed && d.current.focus();
      };
      return e.addEventListener("click", n), () => {
        e.removeEventListener("click", n);
      };
    }
  }, [S]);
  const O = (e, n) => {
    e ? z && z(n) : L && L(n), V || (ee(f ? null : C.clientWidth), Se(e));
  }, xe = (e) => {
    e.button === 0 && (e.preventDefault(), d.current.focus(), O(!0, e));
  }, Ce = (e) => {
    O(!1, e);
  }, P = i.Children.toArray(ce), Oe = (e) => {
    const n = P.find((a) => a.props.value === e.target.value);
    n !== void 0 && (Q(n.props.value), x && x(e, n));
  }, Pe = (e) => (n) => {
    let a;
    if (n.currentTarget.hasAttribute("tabindex")) {
      if (c) {
        a = Array.isArray(r) ? r.slice() : [];
        const v = r.indexOf(e.props.value);
        v === -1 ? a.push(e.props.value) : a.splice(v, 1);
      } else
        a = e.props.value;
      if (e.props.onClick && e.props.onClick(n), r !== a && (Q(a), x)) {
        const v = n.nativeEvent || n, le = new v.constructor(v.type, v);
        Object.defineProperty(le, "target", {
          writable: !0,
          value: {
            value: a,
            name: p
          }
        }), x(le, e);
      }
      c || O(!1, n);
    }
  }, Me = (e) => {
    H || [
      " ",
      "ArrowUp",
      "ArrowDown",
      // The native select doesn't respond to enter on macOS, but it's recommended by
      // https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
      "Enter"
    ].indexOf(e.key) !== -1 && (e.preventDefault(), O(!0, e));
  }, M = m !== null && X, Ne = (e) => {
    !M && K && (Object.defineProperty(e, "target", {
      writable: !0,
      value: {
        value: r,
        name: p
      }
    }), K(e));
  };
  delete J["aria-invalid"];
  let b, te;
  const N = [];
  let D = !1, W = !1;
  (Ae({
    value: r
  }) || fe) && (Y ? b = Y(r) : D = !0);
  const De = P.map((e) => {
    if (!/* @__PURE__ */ i.isValidElement(e))
      return null;
    process.env.NODE_ENV !== "production" && Fe(e);
    let n;
    if (c) {
      if (!Array.isArray(r))
        throw new Error(process.env.NODE_ENV !== "production" ? "MUI: The `value` prop must be an array when using the `Select` component with `multiple`." : Be(2));
      n = r.some((a) => se(a, e.props.value)), n && D && N.push(e.props.children);
    } else
      n = se(r, e.props.value), n && D && (te = e.props.children);
    return n && (W = !0), /* @__PURE__ */ i.cloneElement(e, {
      "aria-selected": n ? "true" : "false",
      onClick: Pe(e),
      onKeyUp: (a) => {
        a.key === " " && a.preventDefault(), e.props.onKeyUp && e.props.onKeyUp(a);
      },
      role: "option",
      selected: n,
      value: void 0,
      // The value is most likely not a valid HTML attribute.
      "data-value": e.props.value
      // Instead, we provide it as a data attribute.
    });
  });
  process.env.NODE_ENV !== "production" && i.useEffect(() => {
    if (!W && !c && r !== "") {
      const e = P.map((n) => n.props.value);
    }
  }, [W, P, c, p, r]), D && (c ? N.length === 0 ? b = null : b = N.reduce((e, n, a) => (e.push(n), a < N.length - 1 && e.push(", "), e), []) : b = te);
  let ne = Ie;
  !f && V && m && (ne = C.clientWidth);
  let A;
  typeof G < "u" ? A = G : A = E ? null : 0;
  const oe = j.id || (p ? `mui-component-select-${p}` : void 0), R = u({}, o, {
    variant: he,
    value: r,
    open: M,
    error: B
  }), k = Xe(R), T = u({}, g.PaperProps, (y = g.slotProps) == null ? void 0 : y.paper), re = Ke();
  return /* @__PURE__ */ Te(i.Fragment, {
    children: [/* @__PURE__ */ w(Ye, u({
      ref: Ee,
      tabIndex: A,
      role: "combobox",
      "aria-controls": re,
      "aria-disabled": E ? "true" : void 0,
      "aria-expanded": M ? "true" : "false",
      "aria-haspopup": "listbox",
      "aria-label": $,
      "aria-labelledby": [S, oe].filter(Boolean).join(" ") || void 0,
      "aria-describedby": F,
      onKeyDown: Me,
      onMouseDown: E || H ? null : xe,
      onBlur: Ne,
      onFocus: ve
    }, j, {
      ownerState: R,
      className: $e(j.className, k.select, pe),
      id: oe,
      children: Qe(b) ? (
        // notranslate needed while Google Translate will not fix zero-width space issue
        ie || (ie = /* @__PURE__ */ w("span", {
          className: "notranslate",
          children: "​"
        }))
      ) : b
    })), /* @__PURE__ */ w(Je, u({
      "aria-invalid": B,
      value: Array.isArray(r) ? r.join(",") : r,
      name: p,
      ref: Z,
      "aria-hidden": !0,
      onChange: Oe,
      tabIndex: -1,
      disabled: E,
      className: k.nativeInput,
      autoFocus: h,
      ownerState: R
    }, J)), /* @__PURE__ */ w(Ge, {
      as: me,
      className: k.icon,
      ownerState: R
    }), /* @__PURE__ */ w(je, u({
      id: `menu-${p || ""}`,
      anchorEl: C,
      open: M,
      onClose: Ce,
      anchorOrigin: {
        vertical: "bottom",
        horizontal: "center"
      },
      transformOrigin: {
        vertical: "top",
        horizontal: "center"
      }
    }, g, {
      MenuListProps: u({
        "aria-labelledby": S,
        role: "listbox",
        "aria-multiselectable": c ? "true" : void 0,
        disableListWrap: !0,
        id: re
      }, g.MenuListProps),
      slotProps: u({}, g.slotProps, {
        paper: u({}, T, {
          style: u({
            minWidth: ne
          }, T != null ? T.style : null)
        })
      }),
      children: De
    }))]
  });
});
process.env.NODE_ENV !== "production" && (Ze.propTypes = {
  /**
   * @ignore
   */
  "aria-describedby": t.string,
  /**
   * @ignore
   */
  "aria-label": t.string,
  /**
   * @ignore
   */
  autoFocus: t.bool,
  /**
   * If `true`, the width of the popover will automatically be set according to the items inside the
   * menu, otherwise it will be at least the width of the select input.
   */
  autoWidth: t.bool,
  /**
   * The option elements to populate the select with.
   * Can be some `<MenuItem>` elements.
   */
  children: t.node,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: t.object,
  /**
   * The CSS class name of the select element.
   */
  className: t.string,
  /**
   * If `true`, the component is toggled on mount. Use when the component open state is not controlled.
   * You can only use it when the `native` prop is `false` (default).
   */
  defaultOpen: t.bool,
  /**
   * The default value. Use when the component is not controlled.
   */
  defaultValue: t.any,
  /**
   * If `true`, the select is disabled.
   */
  disabled: t.bool,
  /**
   * If `true`, the selected item is displayed even if its value is empty.
   */
  displayEmpty: t.bool,
  /**
   * If `true`, the `select input` will indicate an error.
   */
  error: t.bool,
  /**
   * The icon that displays the arrow.
   */
  IconComponent: t.elementType.isRequired,
  /**
   * Imperative handle implementing `{ value: T, node: HTMLElement, focus(): void }`
   * Equivalent to `ref`
   */
  inputRef: qe,
  /**
   * The ID of an element that acts as an additional label. The Select will
   * be labelled by the additional label and the selected value.
   */
  labelId: t.string,
  /**
   * Props applied to the [`Menu`](/material-ui/api/menu/) element.
   */
  MenuProps: t.object,
  /**
   * If `true`, `value` must be an array and the menu will support multiple selections.
   */
  multiple: t.bool,
  /**
   * Name attribute of the `select` or hidden `input` element.
   */
  name: t.string,
  /**
   * @ignore
   */
  onBlur: t.func,
  /**
   * Callback fired when a menu item is selected.
   *
   * @param {object} event The event source of the callback.
   * You can pull out the new value by accessing `event.target.value` (any).
   * @param {object} [child] The react element that was selected.
   */
  onChange: t.func,
  /**
   * Callback fired when the component requests to be closed.
   * Use in controlled mode (see open).
   *
   * @param {object} event The event source of the callback.
   */
  onClose: t.func,
  /**
   * @ignore
   */
  onFocus: t.func,
  /**
   * Callback fired when the component requests to be opened.
   * Use in controlled mode (see open).
   *
   * @param {object} event The event source of the callback.
   */
  onOpen: t.func,
  /**
   * If `true`, the component is shown.
   */
  open: t.bool,
  /**
   * @ignore
   */
  readOnly: t.bool,
  /**
   * Render the selected value.
   *
   * @param {any} value The `value` provided to the component.
   * @returns {ReactNode}
   */
  renderValue: t.func,
  /**
   * Props applied to the clickable div element.
   */
  SelectDisplayProps: t.object,
  /**
   * @ignore
   */
  tabIndex: t.oneOfType([t.number, t.string]),
  /**
   * @ignore
   */
  type: t.any,
  /**
   * The input value.
   */
  value: t.any,
  /**
   * The variant to use.
   */
  variant: t.oneOf(["standard", "outlined", "filled"])
});
export {
  Ze as default
};
