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

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.CustomSelectContext = void 0;
var Ariakit = _interopRequireWildcard(require("@ariakit/react"));
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _ = require("..");
var Styled = _interopRequireWildcard(require("./styles"));
var _inputBase = _interopRequireDefault(require("../input-control/input-base"));
var _chevronDown = _interopRequireDefault(require("../select-control/chevron-down"));
var _baseControl = _interopRequireDefault(require("../base-control"));
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const CustomSelectContext = exports.CustomSelectContext = (0, _element.createContext)(undefined);
function defaultRenderSelectedValue(value) {
  const isValueEmpty = Array.isArray(value) ? value.length === 0 : value === undefined || value === null;
  if (isValueEmpty) {
    return (0, _i18n.__)('Select an item');
  }
  if (Array.isArray(value)) {
    return value.length === 1 ? value[0] : (0, _i18n.sprintf)(
    // translators: %d: number of items selected (it will always be 2 or more items)
    (0, _i18n._n)('%d item selected', '%d items selected', value.length), value.length);
  }
  return value;
}
const CustomSelectButton = ({
  renderSelectedValue,
  size = 'default',
  store,
  ...restProps
}) => {
  const {
    value: currentValue
  } = Ariakit.useStoreState(store);
  const computedRenderSelectedValue = (0, _element.useMemo)(() => renderSelectedValue !== null && renderSelectedValue !== void 0 ? renderSelectedValue : defaultRenderSelectedValue, [renderSelectedValue]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Styled.Select, {
    ...restProps,
    size: size,
    hasCustomRenderProp: !!renderSelectedValue,
    store: store,
    children: computedRenderSelectedValue(currentValue)
  });
};
function _CustomSelect(props) {
  const {
    children,
    hideLabelFromVision = false,
    label,
    size,
    store,
    className,
    isLegacy = false,
    ...restProps
  } = props;
  const onSelectPopoverKeyDown = (0, _element.useCallback)(e => {
    if (isLegacy) {
      e.stopPropagation();
    }
  }, [isLegacy]);
  const contextValue = (0, _element.useMemo)(() => ({
    store,
    size
  }), [store, size]);
  return (
    /*#__PURE__*/
    // Where should `restProps` be forwarded to?
    (0, _jsxRuntime.jsxs)("div", {
      className: className,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Ariakit.SelectLabel, {
        store: store,
        render: hideLabelFromVision ?
        /*#__PURE__*/
        // @ts-expect-error `children` are passed via the render prop
        (0, _jsxRuntime.jsx)(_.VisuallyHidden, {}) :
        /*#__PURE__*/
        // @ts-expect-error `children` are passed via the render prop
        (0, _jsxRuntime.jsx)(_baseControl.default.VisualLabel, {
          as: "div"
        }),
        children: label
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_inputBase.default, {
        __next40pxDefaultSize: true,
        size: size,
        suffix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_chevronDown.default, {}),
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomSelectButton, {
          ...restProps,
          size: size,
          store: store
          // Match legacy behavior (move selection rather than open the popover)
          ,
          showOnKeyDown: !isLegacy
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Styled.SelectPopover, {
          gutter: 12,
          store: store,
          sameWidth: true,
          slide: false,
          onKeyDown: onSelectPopoverKeyDown
          // Match legacy behavior
          ,
          flip: !isLegacy,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomSelectContext.Provider, {
            value: contextValue,
            children: children
          })
        })]
      })]
    })
  );
}
var _default = exports.default = _CustomSelect;
//# sourceMappingURL=custom-select.js.map