@wordpress/components/build/unit-control/unit-select-control.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _element = require("@wordpress/element");
var _unitControlStyles = require("./styles/unit-control-styles");
var _utils = require("./utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function UnitSelectControl({
  className,
  isUnitSelectTabbable: isTabbable = true,
  onChange,
  size = 'default',
  unit = 'px',
  units = _utils.CSS_UNITS,
  ...props
}, ref) {
  if (!(0, _utils.hasUnits)(units) || units?.length === 1) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_unitControlStyles.UnitLabel, {
      className: "components-unit-control__unit-label",
      selectSize: size,
      children: unit
    });
  }
  const handleOnChange = event => {
    const {
      value: unitValue
    } = event.target;
    const data = units.find(option => option.value === unitValue);
    onChange?.(unitValue, {
      event,
      data
    });
  };
  const classes = (0, _clsx.default)('components-unit-control__select', className);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_unitControlStyles.UnitSelect, {
    ref: ref,
    className: classes,
    onChange: handleOnChange,
    selectSize: size,
    tabIndex: isTabbable ? undefined : -1,
    value: unit,
    ...props,
    children: units.map(option => /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
      value: option.value,
      children: option.label
    }, option.value))
  });
}
var _default = exports.default = (0, _element.forwardRef)(UnitSelectControl);
//# sourceMappingURL=unit-select-control.js.map