"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.ToggleGroupControl = void 0;
var _element = require("@wordpress/element");
var _context = require("../../context");
var _hooks = require("../../utils/hooks");
var _baseControl = _interopRequireDefault(require("../../base-control"));
var _styles = _interopRequireWildcard(require("./styles"));
var styles = _styles;
var _asRadioGroup = require("./as-radio-group");
var _asButtonGroup = require("./as-button-group");
var _elementRect = require("../../utils/element-rect");
var _compose = require("@wordpress/compose");
var _useAnimatedOffsetRect = require("../../utils/hooks/use-animated-offset-rect");
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
 */

function UnconnectedToggleGroupControl(props, forwardedRef) {
  const {
    __nextHasNoMarginBottom = false,
    __next40pxDefaultSize = false,
    __shouldNotWarnDeprecated36pxSize,
    className,
    isAdaptiveWidth = false,
    isBlock = false,
    isDeselectable = false,
    label,
    hideLabelFromVision = false,
    help,
    onChange,
    size = 'default',
    value,
    children,
    ...otherProps
  } = (0, _context.useContextSystem)(props, 'ToggleGroupControl');
  const normalizedSize = __next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;
  const [selectedElement, setSelectedElement] = (0, _element.useState)();
  const [controlElement, setControlElement] = (0, _element.useState)();
  const refs = (0, _compose.useMergeRefs)([setControlElement, forwardedRef]);
  const selectedRect = (0, _elementRect.useTrackElementOffsetRect)(value || value === 0 ? selectedElement : undefined);
  (0, _useAnimatedOffsetRect.useAnimatedOffsetRect)(controlElement, selectedRect, {
    prefix: 'selected',
    dataAttribute: 'indicator-animated',
    transitionEndFilter: event => event.pseudoElement === '::before',
    roundRect: true
  });
  const cx = (0, _hooks.useCx)();
  const classes = (0, _element.useMemo)(() => cx(styles.toggleGroupControl({
    isBlock,
    isDeselectable,
    size: normalizedSize
  }), isBlock && styles.block, className), [className, cx, isBlock, isDeselectable, normalizedSize]);
  const MainControl = isDeselectable ? _asButtonGroup.ToggleGroupControlAsButtonGroup : _asRadioGroup.ToggleGroupControlAsRadioGroup;
  (0, _deprecated36pxSize.maybeWarnDeprecated36pxSize)({
    componentName: 'ToggleGroupControl',
    size,
    __next40pxDefaultSize,
    __shouldNotWarnDeprecated36pxSize
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_baseControl.default, {
    help: help,
    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
    __associatedWPComponentName: "ToggleGroupControl",
    children: [!hideLabelFromVision && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.VisualLabelWrapper, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseControl.default.VisualLabel, {
        children: label
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MainControl, {
      ...otherProps,
      setSelectedElement: setSelectedElement,
      className: classes,
      isAdaptiveWidth: isAdaptiveWidth,
      label: label,
      onChange: onChange,
      ref: refs,
      size: normalizedSize,
      value: value,
      children: children
    })]
  });
}

/**
 * `ToggleGroupControl` is a form component that lets users choose options
 * represented in horizontal segments. To render options for this control use
 * `ToggleGroupControlOption` component.
 *
 * This component is intended for selecting a single persistent value from a set of options,
 * similar to a how a radio button group would work. If you simply want a toggle to switch between views,
 * use a `TabPanel` instead.
 *
 * Only use this control when you know for sure the labels of items inside won't
 * wrap. For items with longer labels, you can consider a `SelectControl` or a
 * `CustomSelectControl` component instead.
 *
 * ```jsx
 * import {
 *   __experimentalToggleGroupControl as ToggleGroupControl,
 *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
 * } from '@wordpress/components';
 *
 * function Example() {
 *   return (
 *     <ToggleGroupControl
 *       label="my label"
 *       value="vertical"
 *       isBlock
 *       __nextHasNoMarginBottom
 *       __next40pxDefaultSize
 *     >
 *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
 *       <ToggleGroupControlOption value="vertical" label="Vertical" />
 *     </ToggleGroupControl>
 *   );
 * }
 * ```
 */
const ToggleGroupControl = exports.ToggleGroupControl = (0, _context.contextConnect)(UnconnectedToggleGroupControl, 'ToggleGroupControl');
var _default = exports.default = ToggleGroupControl;
//# sourceMappingURL=component.js.map