"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.BorderControl = void 0;
var _i18n = require("@wordpress/i18n");
var _borderControlDropdown = _interopRequireDefault(require("../border-control-dropdown"));
var _unitControl = _interopRequireDefault(require("../../unit-control"));
var _rangeControl = _interopRequireDefault(require("../../range-control"));
var _hStack = require("../../h-stack");
var _baseControlStyles = require("../../base-control/styles/base-control-styles");
var _view = require("../../view");
var _visuallyHidden = require("../../visually-hidden");
var _context = require("../../context");
var _hook = require("./hook");
var _spacer = require("../../spacer");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const BorderLabel = props => {
  const {
    label,
    hideLabelFromVision
  } = props;
  if (!label) {
    return null;
  }
  return hideLabelFromVision ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_visuallyHidden.VisuallyHidden, {
    as: "legend",
    children: label
  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseControlStyles.StyledLabel, {
    as: "legend",
    children: label
  });
};
const UnconnectedBorderControl = (props, forwardedRef) => {
  const {
    __next40pxDefaultSize = false,
    colors,
    disableCustomColors,
    disableUnits,
    enableAlpha,
    enableStyle,
    hideLabelFromVision,
    innerWrapperClassName,
    inputWidth,
    isStyleSettable,
    label,
    onBorderChange,
    onSliderChange,
    onWidthChange,
    placeholder,
    __unstablePopoverProps,
    previousStyleSelection,
    showDropdownHeader,
    size,
    sliderClassName,
    value: border,
    widthUnit,
    widthValue,
    withSlider,
    __experimentalIsRenderedInSidebar,
    ...otherProps
  } = (0, _hook.useBorderControl)(props);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_view.View, {
    as: "fieldset",
    ...otherProps,
    ref: forwardedRef,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BorderLabel, {
      label: label,
      hideLabelFromVision: hideLabelFromVision
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_hStack.HStack, {
      spacing: 4,
      className: innerWrapperClassName,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_unitControl.default, {
        prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_spacer.Spacer, {
          marginRight: 1,
          marginBottom: 0,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_borderControlDropdown.default, {
            border: border,
            colors: colors,
            __unstablePopoverProps: __unstablePopoverProps,
            disableCustomColors: disableCustomColors,
            enableAlpha: enableAlpha,
            enableStyle: enableStyle,
            isStyleSettable: isStyleSettable,
            onChange: onBorderChange,
            previousStyleSelection: previousStyleSelection,
            showDropdownHeader: showDropdownHeader,
            __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
            size: size
          })
        }),
        label: (0, _i18n.__)('Border width'),
        hideLabelFromVision: true,
        min: 0,
        onChange: onWidthChange,
        value: border?.width || '',
        placeholder: placeholder,
        disableUnits: disableUnits,
        __unstableInputWidth: inputWidth,
        size: size
      }), withSlider && /*#__PURE__*/(0, _jsxRuntime.jsx)(_rangeControl.default, {
        __nextHasNoMarginBottom: true,
        label: (0, _i18n.__)('Border width'),
        hideLabelFromVision: true,
        className: sliderClassName,
        initialPosition: 0,
        max: 100,
        min: 0,
        onChange: onSliderChange,
        step: ['px', '%'].includes(widthUnit) ? 1 : 0.1,
        value: widthValue || undefined,
        withInputField: false,
        __next40pxDefaultSize: __next40pxDefaultSize
      })]
    })]
  });
};

/**
 * The `BorderControl` brings together internal sub-components which allow users to
 * set the various properties of a border. The first sub-component, a
 * `BorderDropdown` contains options representing border color and style. The
 * border width is controlled via a `UnitControl` and an optional `RangeControl`.
 *
 * Border radius is not covered by this control as it may be desired separate to
 * color, style, and width. For example, the border radius may be absorbed under
 * a "shape" abstraction.
 *
 * ```jsx
 * import { __experimentalBorderControl as BorderControl } from '@wordpress/components';
 * import { __ } from '@wordpress/i18n';
 *
 * const colors = [
 * 	{ name: 'Blue 20', color: '#72aee6' },
 * 	// ...
 * ];
 *
 * const MyBorderControl = () => {
 * 	const [ border, setBorder ] = useState();
 * 	const onChange = ( newBorder ) => setBorder( newBorder );
 *
 * 	return (
 * 		<BorderControl
 * 			colors={ colors }
 * 			label={ __( 'Border' ) }
 * 			onChange={ onChange }
 * 			value={ border }
 * 		/>
 * 	);
 * };
 * ```
 */
const BorderControl = exports.BorderControl = (0, _context.contextConnect)(UnconnectedBorderControl, 'BorderControl');
var _default = exports.default = BorderControl;
//# sourceMappingURL=component.js.map