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

UI components for WordPress.

// packages/components/src/custom-select-control/index.tsx
import * as Ariakit from "@ariakit/react";
import clsx from "clsx";
import { useInstanceId } from "@wordpress/compose";
import { __, sprintf } from "@wordpress/i18n";
import _CustomSelect from "../custom-select-control-v2/custom-select";
import CustomSelectItem from "../custom-select-control-v2/item";
import * as Styled from "../custom-select-control-v2/styles";
import { VisuallyHidden } from "../visually-hidden";
import { maybeWarnDeprecated36pxSize } from "../utils/deprecated-36px-size";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "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 sprintf(__("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);
  maybeWarnDeprecated36pxSize({
    componentName: "CustomSelectControl",
    __next40pxDefaultSize,
    size,
    __shouldNotWarnDeprecated36pxSize
  });
  const descriptionId = 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__ */ _jsxs(Styled.WithHintItemWrapper, {
      children: [/* @__PURE__ */ _jsx("span", {
        children: name
      }), /* @__PURE__ */ _jsx(Styled.WithHintItemHint, {
        // Keeping the classname for legacy reasons
        className: "components-custom-select-control__item-hint",
        children: hint
      })]
    });
    return /* @__PURE__ */ _jsx(CustomSelectItem, {
      value: key,
      children: hint ? withHint : name,
      style,
      className: clsx(
        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__ */ _jsxs(Styled.SelectedExperimentalHintWrapper, {
      children: [selectedOption?.name, /* @__PURE__ */ _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__ */ _jsxs(_Fragment, {
    children: [/* @__PURE__ */ _jsx(_CustomSelect, {
      "aria-describedby": descriptionId,
      renderSelectedValue,
      size: translatedSize,
      store,
      className: clsx(
        // Keeping the classname for legacy reasons
        "components-custom-select-control",
        classNameProp
      ),
      isLegacy: true,
      ...restProps,
      children
    }), /* @__PURE__ */ _jsx(VisuallyHidden, {
      children: /* @__PURE__ */ _jsx("span", {
        id: descriptionId,
        children: getDescribedBy(selectedOption?.name, describedBy)
      })
    })]
  });
}
var custom_select_control_default = CustomSelectControl;
export {
  custom_select_control_default as default
};
//# sourceMappingURL=index.js.map