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

UI components for WordPress.

// packages/components/src/custom-select-control-v2/custom-select.tsx
import * as Ariakit from "@ariakit/react";
import { createContext, useCallback, useMemo } from "@wordpress/element";
import { __, _n, sprintf } from "@wordpress/i18n";
import { VisuallyHidden } from "../visually-hidden";
import * as Styled from "./styles";
import InputBase from "../input-control/input-base";
import SelectControlChevronDown from "../select-control/chevron-down";
import BaseControl from "../base-control";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var CustomSelectContext = 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 __("Select an item");
  }
  if (Array.isArray(value)) {
    return value.length === 1 ? value[0] : sprintf(
      // translators: %d: number of items selected (it will always be 2 or more items)
      _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 = useMemo(() => renderSelectedValue !== null && renderSelectedValue !== void 0 ? renderSelectedValue : defaultRenderSelectedValue, [renderSelectedValue]);
  return /* @__PURE__ */ _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 = useCallback((e) => {
    if (isLegacy) {
      e.stopPropagation();
    }
  }, [isLegacy]);
  const contextValue = useMemo(() => ({
    store,
    size
  }), [store, size]);
  return (
    // Where should `restProps` be forwarded to?
    /* @__PURE__ */ _jsxs("div", {
      className,
      children: [/* @__PURE__ */ _jsx(Ariakit.SelectLabel, {
        store,
        render: hideLabelFromVision ? (
          // @ts-expect-error `children` are passed via the render prop
          /* @__PURE__ */ _jsx(VisuallyHidden, {})
        ) : (
          // @ts-expect-error `children` are passed via the render prop
          /* @__PURE__ */ _jsx(BaseControl.VisualLabel, {
            as: "div"
          })
        ),
        children: label
      }), /* @__PURE__ */ _jsxs(InputBase, {
        __next40pxDefaultSize: true,
        size,
        suffix: /* @__PURE__ */ _jsx(SelectControlChevronDown, {}),
        children: [/* @__PURE__ */ _jsx(CustomSelectButton, {
          ...restProps,
          size,
          store,
          showOnKeyDown: !isLegacy
        }), /* @__PURE__ */ _jsx(Styled.SelectPopover, {
          gutter: 12,
          store,
          sameWidth: true,
          slide: false,
          onKeyDown: onSelectPopoverKeyDown,
          flip: !isLegacy,
          children: /* @__PURE__ */ _jsx(CustomSelectContext.Provider, {
            value: contextValue,
            children
          })
        })]
      })]
    })
  );
}
var custom_select_default = _CustomSelect;
export {
  CustomSelectContext,
  custom_select_default as default
};
//# sourceMappingURL=custom-select.js.map