"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/components/src/custom-select-control/index.tsx
var custom_select_control_exports = {};
__export(custom_select_control_exports, {
  default: () => custom_select_control_default
});
module.exports = __toCommonJS(custom_select_control_exports);
var Ariakit = __toESM(require("@ariakit/react"), 1);
var import_clsx = __toESM(require("clsx"), 1);
var import_compose = require("@wordpress/compose");
var import_i18n = require("@wordpress/i18n");
var import_custom_select = __toESM(require("../custom-select-control-v2/custom-select.cjs"), 1);
var import_item = __toESM(require("../custom-select-control-v2/item.cjs"), 1);
var Styled = __toESM(require("../custom-select-control-v2/styles.cjs"), 1);
var import_visually_hidden = require("../visually-hidden/index.cjs");
var import_deprecated_36px_size = require("../utils/deprecated-36px-size.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
function useDeprecatedProps({
  __experimentalShowSelectedHint,
  ...otherProps
}) {
  return {
    showSelectedHint: __experimentalShowSelectedHint,
    ...otherProps
  };
}
function applyOptionDeprecations({
  __experimentalHint,
  ...rest
}) {
  return {
    hint: __experimentalHint,
    ...rest
  };
}
function getDescribedBy(currentName, describedBy) {
  if (describedBy) {
    return describedBy;
  }
  return (0, import_i18n.sprintf)((0, import_i18n.__)("Currently selected: %s"), currentName);
}
function CustomSelectControl(props) {
  var _options$map$find;
  const {
    __next40pxDefaultSize = false,
    __shouldNotWarnDeprecated36pxSize,
    describedBy,
    options,
    onChange,
    size = "default",
    value,
    className: classNameProp,
    showSelectedHint = false,
    ...restProps
  } = useDeprecatedProps(props);
  (0, import_deprecated_36px_size.maybeWarnDeprecated36pxSize)({
    componentName: "CustomSelectControl",
    __next40pxDefaultSize,
    size,
    __shouldNotWarnDeprecated36pxSize
  });
  const descriptionId = (0, import_compose.useInstanceId)(CustomSelectControl, "custom-select-control__description");
  const store = Ariakit.useSelectStore({
    async setValue(nextValue) {
      const nextOption = options.find((item) => item.key === nextValue);
      if (!onChange || !nextOption) {
        return;
      }
      await Promise.resolve();
      const state = store.getState();
      const changeObject = {
        highlightedIndex: state.renderedItems.findIndex((item) => item.value === nextValue),
        inputValue: "",
        isOpen: state.open,
        selectedItem: nextOption,
        type: ""
      };
      onChange(changeObject);
    },
    value: value?.key,
    // Setting the first option as a default value when no value is provided
    // is already done natively by the underlying Ariakit component,
    // but doing this explicitly avoids the `onChange` callback from firing
    // on initial render, thus making this implementation closer to the v1.
    defaultValue: options[0]?.key
  });
  const children = options.map(applyOptionDeprecations).map(({
    name,
    key,
    hint,
    style,
    className
  }) => {
    const withHint = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Styled.WithHintItemWrapper, {
      children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
        children: name
      }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Styled.WithHintItemHint, {
        // Keeping the classname for legacy reasons
        className: "components-custom-select-control__item-hint",
        children: hint
      })]
    });
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_item.default, {
      value: key,
      children: hint ? withHint : name,
      style,
      className: (0, import_clsx.default)(
        className,
        // Keeping the classnames for legacy reasons
        "components-custom-select-control__item",
        {
          "has-hint": hint
        }
      )
    }, key);
  });
  const currentValue = Ariakit.useStoreState(store, "value");
  const selectedOption = (_options$map$find = options?.map(applyOptionDeprecations)?.find(({
    key
  }) => currentValue === key)) !== null && _options$map$find !== void 0 ? _options$map$find : options[0];
  const renderSelectedValue = () => {
    if (!showSelectedHint || !selectedOption.hint) {
      return selectedOption?.name;
    }
    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Styled.SelectedExperimentalHintWrapper, {
      children: [selectedOption?.name, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Styled.SelectedExperimentalHintItem, {
        // Keeping the classname for legacy reasons
        className: "components-custom-select-control__hint",
        children: selectedOption?.hint
      })]
    });
  };
  const translatedSize = (() => {
    if (__next40pxDefaultSize && size === "default" || size === "__unstable-large") {
      return "default";
    }
    if (!__next40pxDefaultSize && size === "default") {
      return "compact";
    }
    return size;
  })();
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_custom_select.default, {
      "aria-describedby": descriptionId,
      renderSelectedValue,
      size: translatedSize,
      store,
      className: (0, import_clsx.default)(
        // Keeping the classname for legacy reasons
        "components-custom-select-control",
        classNameProp
      ),
      isLegacy: true,
      ...restProps,
      children
    }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_visually_hidden.VisuallyHidden, {
      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
        id: descriptionId,
        children: getDescribedBy(selectedOption?.name, describedBy)
      })
    })]
  });
}
var custom_select_control_default = CustomSelectControl;
//# sourceMappingURL=index.cjs.map
