"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _components = require("@wordpress/components");
var _icons = require("@wordpress/icons");
var _compose = require("@wordpress/compose");
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

function LinkSettingsDrawer({
  children,
  settingsOpen,
  setSettingsOpen
}) {
  const prefersReducedMotion = (0, _compose.useReducedMotion)();
  const MaybeAnimatePresence = prefersReducedMotion ? _element.Fragment : _components.__unstableAnimatePresence;
  const MaybeMotionDiv = prefersReducedMotion ? 'div' : _components.__unstableMotion.div;
  const id = (0, _compose.useInstanceId)(LinkSettingsDrawer);
  const settingsDrawerId = `link-control-settings-drawer-${id}`;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
      className: "block-editor-link-control__drawer-toggle",
      "aria-expanded": settingsOpen,
      onClick: () => setSettingsOpen(!settingsOpen),
      icon: (0, _i18n.isRTL)() ? _icons.chevronLeftSmall : _icons.chevronRightSmall,
      "aria-controls": settingsDrawerId,
      children: (0, _i18n._x)('Advanced', 'Additional link settings')
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MaybeAnimatePresence, {
      children: settingsOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(MaybeMotionDiv, {
        className: "block-editor-link-control__drawer",
        hidden: !settingsOpen,
        id: settingsDrawerId,
        initial: "collapsed",
        animate: "open",
        exit: "collapsed",
        variants: {
          open: {
            opacity: 1,
            height: 'auto'
          },
          collapsed: {
            opacity: 0,
            height: 0
          }
        },
        transition: {
          duration: 0.1
        },
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "block-editor-link-control__drawer-inner",
          children: children
        })
      })
    })]
  });
}
var _default = exports.default = LinkSettingsDrawer;
//# sourceMappingURL=settings-drawer.js.map