@wordpress/components/build/custom-select-control-v2/custom-select.js

UI components for WordPress.

"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-v2/custom-select.tsx
var custom_select_exports = {};
__export(custom_select_exports, {
  CustomSelectContext: () => CustomSelectContext,
  default: () => custom_select_default
});
module.exports = __toCommonJS(custom_select_exports);
var Ariakit = __toESM(require("@ariakit/react"));
var import_element = require("@wordpress/element");
var import_i18n = require("@wordpress/i18n");
var import_visually_hidden = require("../visually-hidden");
var Styled = __toESM(require("./styles"));
var import_input_base = __toESM(require("../input-control/input-base"));
var import_chevron_down = __toESM(require("../select-control/chevron-down"));
var import_base_control = __toESM(require("../base-control"));
var import_jsx_runtime = require("react/jsx-runtime");
var CustomSelectContext = (0, import_element.createContext)(void 0);
CustomSelectContext.displayName = "CustomSelectContext";
function defaultRenderSelectedValue(value) {
  const isValueEmpty = Array.isArray(value) ? value.length === 0 : value === void 0 || value === null;
  if (isValueEmpty) {
    return (0, import_i18n.__)("Select an item");
  }
  if (Array.isArray(value)) {
    return value.length === 1 ? value[0] : (0, import_i18n.sprintf)(
      // translators: %d: number of items selected (it will always be 2 or more items)
      (0, import_i18n._n)("%d item selected", "%d items selected", value.length),
      value.length
    );
  }
  return value;
}
var CustomSelectButton = ({
  renderSelectedValue,
  size = "default",
  store,
  ...restProps
}) => {
  const {
    value: currentValue
  } = Ariakit.useStoreState(store);
  const computedRenderSelectedValue = (0, import_element.useMemo)(() => renderSelectedValue !== null && renderSelectedValue !== void 0 ? renderSelectedValue : defaultRenderSelectedValue, [renderSelectedValue]);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Styled.Select, {
    ...restProps,
    size,
    hasCustomRenderProp: !!renderSelectedValue,
    store,
    children: computedRenderSelectedValue(currentValue)
  });
};
function _CustomSelect(props) {
  const {
    children,
    hideLabelFromVision = false,
    label,
    size,
    store,
    className,
    isLegacy = false,
    ...restProps
  } = props;
  const onSelectPopoverKeyDown = (0, import_element.useCallback)((e) => {
    if (isLegacy) {
      e.stopPropagation();
    }
  }, [isLegacy]);
  const contextValue = (0, import_element.useMemo)(() => ({
    store,
    size
  }), [store, size]);
  return (
    // Where should `restProps` be forwarded to?
    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
      className,
      children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ariakit.SelectLabel, {
        store,
        render: hideLabelFromVision ? (
          // @ts-expect-error `children` are passed via the render prop
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_visually_hidden.VisuallyHidden, {})
        ) : (
          // @ts-expect-error `children` are passed via the render prop
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_base_control.default.VisualLabel, {
            as: "div"
          })
        ),
        children: label
      }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_input_base.default, {
        __next40pxDefaultSize: true,
        size,
        suffix: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_chevron_down.default, {}),
        children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomSelectButton, {
          ...restProps,
          size,
          store,
          showOnKeyDown: !isLegacy
        }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Styled.SelectPopover, {
          gutter: 12,
          store,
          sameWidth: true,
          slide: false,
          onKeyDown: onSelectPopoverKeyDown,
          flip: !isLegacy,
          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomSelectContext.Provider, {
            value: contextValue,
            children
          })
        })]
      })]
    })
  );
}
var custom_select_default = _CustomSelect;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  CustomSelectContext
});
//# sourceMappingURL=custom-select.js.map