"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.BorderBoxControl = void 0;
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _borderBoxControlLinkedButton = _interopRequireDefault(require("../border-box-control-linked-button"));
var _borderBoxControlSplitControls = _interopRequireDefault(require("../border-box-control-split-controls"));
var _borderControl = require("../../border-control");
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 _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: "label",
    children: label
  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseControlStyles.StyledLabel, {
    children: label
  });
};
const UnconnectedBorderBoxControl = (props, forwardedRef) => {
  const {
    className,
    colors,
    disableCustomColors,
    disableUnits,
    enableAlpha,
    enableStyle,
    hasMixedBorders,
    hideLabelFromVision,
    isLinked,
    label,
    linkedControlClassName,
    linkedValue,
    onLinkedChange,
    onSplitChange,
    popoverPlacement,
    popoverOffset,
    size,
    splitValue,
    toggleLinked,
    wrapperClassName,
    __experimentalIsRenderedInSidebar,
    ...otherProps
  } = (0, _hook.useBorderBoxControl)(props);

  // Use internal state instead of a ref to make sure that the component
  // re-renders when the popover's anchor updates.
  const [popoverAnchor, setPopoverAnchor] = (0, _element.useState)(null);

  // Memoize popoverProps to avoid returning a new object every time.
  const popoverProps = (0, _element.useMemo)(() => popoverPlacement ? {
    placement: popoverPlacement,
    offset: popoverOffset,
    anchor: popoverAnchor,
    shift: true
  } : undefined, [popoverPlacement, popoverOffset, popoverAnchor]);
  const mergedRef = (0, _compose.useMergeRefs)([setPopoverAnchor, forwardedRef]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_view.View, {
    className: className,
    ...otherProps,
    ref: mergedRef,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BorderLabel, {
      label: label,
      hideLabelFromVision: hideLabelFromVision
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_view.View, {
      className: wrapperClassName,
      children: [isLinked ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_borderControl.BorderControl, {
        className: linkedControlClassName,
        colors: colors,
        disableUnits: disableUnits,
        disableCustomColors: disableCustomColors,
        enableAlpha: enableAlpha,
        enableStyle: enableStyle,
        onChange: onLinkedChange,
        placeholder: hasMixedBorders ? (0, _i18n.__)('Mixed') : undefined,
        __unstablePopoverProps: popoverProps,
        shouldSanitizeBorder: false // This component will handle that.
        ,
        value: linkedValue,
        withSlider: true,
        width: size === '__unstable-large' ? '116px' : '110px',
        __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
        __shouldNotWarnDeprecated36pxSize: true,
        size: size
      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_borderBoxControlSplitControls.default, {
        colors: colors,
        disableCustomColors: disableCustomColors,
        enableAlpha: enableAlpha,
        enableStyle: enableStyle,
        onChange: onSplitChange,
        popoverPlacement: popoverPlacement,
        popoverOffset: popoverOffset,
        value: splitValue,
        __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
        size: size
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_borderBoxControlLinkedButton.default, {
        onClick: toggleLinked,
        isLinked: isLinked,
        size: size
      })]
    })]
  });
};

/**
 * An input control for the color, style, and width of the border of a box. The
 * border can be customized as a whole, or individually for each side of the box.
 *
 * ```jsx
 * import { BorderBoxControl } from '@wordpress/components';
 * import { __ } from '@wordpress/i18n';
 *
 * const colors = [
 * 	{ name: 'Blue 20', color: '#72aee6' },
 * 	// ...
 * ];
 *
 * const MyBorderBoxControl = () => {
 * 	const defaultBorder = {
 * 		color: '#72aee6',
 * 		style: 'dashed',
 * 		width: '1px',
 * 	};
 * 	const [ borders, setBorders ] = useState( {
 * 		top: defaultBorder,
 * 		right: defaultBorder,
 * 		bottom: defaultBorder,
 * 		left: defaultBorder,
 * 	} );
 * 	const onChange = ( newBorders ) => setBorders( newBorders );
 *
 * 	return (
 * 		<BorderBoxControl
 * 			__next40pxDefaultSize
 * 			colors={ colors }
 * 			label={ __( 'Borders' ) }
 * 			onChange={ onChange }
 * 			value={ borders }
 * 		/>
 * 	);
 * };
 * ```
 */
const BorderBoxControl = exports.BorderBoxControl = (0, _context.contextConnect)(UnconnectedBorderBoxControl, 'BorderBoxControl');
var _default = exports.default = BorderBoxControl;
//# sourceMappingURL=component.js.map