"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DimensionControl = DimensionControl;
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _i18n = require("@wordpress/i18n");
var _icon = _interopRequireDefault(require("../icon"));
var _selectControl = _interopRequireDefault(require("../select-control"));
var _sizes = _interopRequireWildcard(require("./sizes"));
var _context = require("../context");
var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
var _deprecated36pxSize = require("../utils/deprecated-36px-size");
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 CONTEXT_VALUE = {
  BaseControl: {
    // Temporary during deprecation grace period: Overrides the underlying `__associatedWPComponentName`
    // via the context system to override the value set by SelectControl.
    _overrides: {
      __associatedWPComponentName: 'DimensionControl'
    }
  }
};

/**
 * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.
 *
 * @deprecated
 *
 * ```jsx
 * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
 * import { useState } from '@wordpress/element';
 *
 * export default function MyCustomDimensionControl() {
 * 	const [ paddingSize, setPaddingSize ] = useState( '' );
 *
 * 	return (
 * 		<DimensionControl
 * 			__next40pxDefaultSize
 * 			__nextHasNoMarginBottom
 * 			label={ 'Padding' }
 * 			icon={ 'desktop' }
 * 			onChange={ ( value ) => setPaddingSize( value ) }
 * 			value={ paddingSize }
 * 		/>
 * 	);
 * }
 * ```
 */
function DimensionControl(props) {
  const {
    __next40pxDefaultSize = false,
    __nextHasNoMarginBottom = false,
    label,
    value,
    sizes = _sizes.default,
    icon,
    onChange,
    className = ''
  } = props;
  (0, _deprecated.default)('wp.components.DimensionControl', {
    since: '6.7',
    version: '7.0'
  });
  (0, _deprecated36pxSize.maybeWarnDeprecated36pxSize)({
    componentName: 'DimensionControl',
    __next40pxDefaultSize,
    size: undefined
  });
  const onChangeSpacingSize = val => {
    const theSize = (0, _sizes.findSizeBySlug)(sizes, val);
    if (!theSize || value === theSize.slug) {
      onChange?.(undefined);
    } else if (typeof onChange === 'function') {
      onChange(theSize.slug);
    }
  };
  const formatSizesAsOptions = theSizes => {
    const options = theSizes.map(({
      name,
      slug
    }) => ({
      label: name,
      value: slug
    }));
    return [{
      label: (0, _i18n.__)('Default'),
      value: ''
    }, ...options];
  };
  const selectLabel = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
      icon: icon
    }), label]
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ContextSystemProvider, {
    value: CONTEXT_VALUE,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectControl.default, {
      __next40pxDefaultSize: __next40pxDefaultSize,
      __nextHasNoMarginBottom: __nextHasNoMarginBottom,
      className: (0, _clsx.default)(className, 'block-editor-dimension-control'),
      label: selectLabel,
      hideLabelFromVision: false,
      value: value,
      onChange: onChangeSpacingSize,
      options: formatSizesAsOptions(sizes)
    })
  });
}
var _default = exports.default = DimensionControl;
//# sourceMappingURL=index.js.map