@datarobot/design-system 29.1.1 → 29.2.0

package/js/bundle/bundle.js

@@ -48173,6 +48173,7 @@ var DATE_RANGE_ERROR_TYPES = /*#__PURE__*/function (DATE_RANGE_ERROR_TYPES) {
   DATE_RANGE_ERROR_TYPES["START_AFTER_MAX"] = "START_AFTER_MAX";
   DATE_RANGE_ERROR_TYPES["INVALID_START_DATE"] = "INVALID_START_DATE";
   DATE_RANGE_ERROR_TYPES["INVALID_END_DATE"] = "INVALID_END_DATE";
+  DATE_RANGE_ERROR_TYPES["START_END_SAME"] = "START_END_SAME";
   return DATE_RANGE_ERROR_TYPES;
 }({});
 var DATE_RANGE_INPUT_TYPES = {
@@ -56966,9 +56967,11 @@ var FloatingPanelContext = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.cr
   onDrag: function onDrag() {},
   onDragStart: function onDragStart() {},
   onDragEnd: function onDragEnd() {},
-  isDocked: false,
   isMoving: false,
+  isDocked: false,
   setIsDocked: function setIsDocked() {},
+  isCollapsed: false,
+  setIsCollapsed: function setIsCollapsed() {},
   onMoveWithArrows: function onMoveWithArrows() {},
   getPosition: function getPosition() {
     return {
@@ -57067,17 +57070,13 @@ function getHtmlElement(anchorEl) {
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _use_draggable_area__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./use-draggable-area */ "./src/components/floating-panel/use-draggable-area.ts");
 var _excluded = ["areaId", "testId", "className", "onDragStart", "onDrag", "onDragEnd", "children"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 
+
 function DraggableArea(_ref) {
   var areaId = _ref.areaId,
     testId = _ref.testId,
@@ -57090,53 +57089,12 @@ function DraggableArea(_ref) {
     _ref$children = _ref.children,
     children = _ref$children === void 0 ? null : _ref$children,
     props = _objectWithoutProperties(_ref, _excluded);
-  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isDragging = _useState2[0],
-    setIsDragging = _useState2[1];
-  var onStart = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
-    var draggableEvent = Object.assign(e, {
-      areaId: areaId
-    });
-    e.preventDefault();
-    setIsDragging(true);
-    onDragStart(draggableEvent);
-  }, []);
-  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-    if (!isDragging) {
-      return;
-    }
-    function onDragHandler(e) {
-      var draggableEvent = Object.assign(e, {
-        areaId: areaId
-      });
-      e.preventDefault();
-      onDrag(draggableEvent);
-    }
-    function onDragEndHandler(e) {
-      var draggableEvent = Object.assign(e, {
-        areaId: areaId
-      });
-      e.preventDefault();
-      removeListeners();
-      setIsDragging(false);
-      onDragEnd(draggableEvent);
-    }
-    function onDragBlurHandler() {
-      setIsDragging(false);
-      onDragEnd(areaId);
-      removeListeners();
-    }
-    window.addEventListener('mousemove', onDragHandler);
-    window.addEventListener('mouseup', onDragEndHandler);
-    window.addEventListener('blur', onDragBlurHandler);
-    function removeListeners() {
-      window.removeEventListener('mousemove', onDragHandler);
-      window.removeEventListener('mouseup', onDragEndHandler);
-      window.removeEventListener('blur', onDragBlurHandler);
-    }
-    return removeListeners;
-  }, [isDragging, onDragStart, onDrag, onDragEnd, areaId]);
+  var onStart = (0,_use_draggable_area__WEBPACK_IMPORTED_MODULE_1__.useDraggableArea)({
+    areaId: areaId,
+    onDragStart: onDragStart,
+    onDrag: onDrag,
+    onDragEnd: onDragEnd
+  });
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", _extends({
     className: className,
     onMouseDown: onStart,
@@ -57147,6 +57105,56 @@ function DraggableArea(_ref) {
 
 /***/ }),
 
+/***/ "./src/components/floating-panel/floating-panel-collapse-button.tsx":
+/*!**************************************************************************!*\
+  !*** ./src/components/floating-panel/floating-panel-collapse-button.tsx ***!
+  \**************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   FloatingPanelCollapseButton: () => (/* binding */ FloatingPanelCollapseButton)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _fortawesome_free_solid_svg_icons_faChevronDown__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @fortawesome/free-solid-svg-icons/faChevronDown */ "@fortawesome/free-solid-svg-icons/faChevronDown");
+/* harmony import */ var _fortawesome_free_solid_svg_icons_faChevronDown__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_fortawesome_free_solid_svg_icons_faChevronDown__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _fortawesome_free_solid_svg_icons_faChevronUp__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @fortawesome/free-solid-svg-icons/faChevronUp */ "@fortawesome/free-solid-svg-icons/faChevronUp");
+/* harmony import */ var _fortawesome_free_solid_svg_icons_faChevronUp__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_fortawesome_free_solid_svg_icons_faChevronUp__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _button__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../button */ "./src/components/button/index.ts");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../hooks */ "./src/components/hooks/index.ts");
+/* harmony import */ var _font_awesome_icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../font-awesome-icon */ "./src/components/font-awesome-icon/index.ts");
+/* harmony import */ var _tooltip__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../tooltip */ "./src/components/tooltip/index.ts");
+
+
+
+
+
+
+
+function FloatingPanelCollapseButton(_ref) {
+  var isCollapsed = _ref.isCollapsed,
+    setIsCollapsed = _ref.setIsCollapsed;
+  var _useTranslation = (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useTranslation)(),
+    t = _useTranslation.t;
+  var ariaLabel = isCollapsed ? t('Expand') : t('Collapse');
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_button__WEBPACK_IMPORTED_MODULE_3__.Button, {
+    testId: "floating-panel-collapse-button",
+    accentType: _button__WEBPACK_IMPORTED_MODULE_3__.ACCENT_TYPES.ROUND_ICON,
+    onClick: function onClick() {
+      return setIsCollapsed(!isCollapsed);
+    },
+    "aria-label": ariaLabel,
+    tooltipText: ariaLabel,
+    tooltipPlacement: _tooltip__WEBPACK_IMPORTED_MODULE_6__.TOOLTIP_PLACEMENT_TYPES.TOP,
+    tooltipDelayType: _tooltip__WEBPACK_IMPORTED_MODULE_6__.TOOLTIP_DELAY_TYPES.SLOW
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_font_awesome_icon__WEBPACK_IMPORTED_MODULE_5__.FontAwesomeIcon, {
+    icon: isCollapsed ? _fortawesome_free_solid_svg_icons_faChevronUp__WEBPACK_IMPORTED_MODULE_2__.faChevronUp : _fortawesome_free_solid_svg_icons_faChevronDown__WEBPACK_IMPORTED_MODULE_1__.faChevronDown
+  }));
+}
+
+/***/ }),
+
 /***/ "./src/components/floating-panel/floating-panel-dock-button.tsx":
 /*!**********************************************************************!*\
   !*** ./src/components/floating-panel/floating-panel-dock-button.tsx ***!
@@ -57188,7 +57196,8 @@ function FloatingPanelDockButton(_ref) {
     },
     "aria-label": ariaLabel,
     tooltipText: ariaLabel,
-    tooltipPlacement: _tooltip__WEBPACK_IMPORTED_MODULE_6__.TOOLTIP_PLACEMENT_TYPES.TOP
+    tooltipPlacement: _tooltip__WEBPACK_IMPORTED_MODULE_6__.TOOLTIP_PLACEMENT_TYPES.TOP,
+    tooltipDelayType: _tooltip__WEBPACK_IMPORTED_MODULE_6__.TOOLTIP_DELAY_TYPES.SLOW
   }, isDocked ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_font_awesome_icon__WEBPACK_IMPORTED_MODULE_5__.FontAwesomeIcon, {
     icon: _fortawesome_free_solid_svg_icons_faThumbtackSlash__WEBPACK_IMPORTED_MODULE_1__.faThumbtackSlash
   }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_font_awesome_icon__WEBPACK_IMPORTED_MODULE_5__.FontAwesomeIcon, {
@@ -57230,14 +57239,7 @@ function FloatingPanelDragHandle(_ref) {
     onDrag = _useContext.onDrag,
     onDragStart = _useContext.onDragStart,
     onDragEnd = _useContext.onDragEnd,
-    onMoveWithArrows = _useContext.onMoveWithArrows,
-    isDocked = _useContext.isDocked;
-  if (isDocked) {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-      className: "drag-handle disabled",
-      "test-id": "floating-area-drag-handle"
-    }, content);
-  }
+    onMoveWithArrows = _useContext.onMoveWithArrows;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_draggable_area__WEBPACK_IMPORTED_MODULE_4__.DraggableArea, {
     tabIndex: 0,
     testId: "floating-area-drag-handle",
@@ -57273,6 +57275,12 @@ function FloatingPanelDragHandle(_ref) {
 /* harmony import */ var _hooks_use_translation__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../hooks/use-translation */ "./src/components/hooks/use-translation/index.ts");
 /* harmony import */ var _floating_panel_dock_button__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./floating-panel-dock-button */ "./src/components/floating-panel/floating-panel-dock-button.tsx");
 /* harmony import */ var _floating_panel_drag_handle__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./floating-panel-drag-handle */ "./src/components/floating-panel/floating-panel-drag-handle.tsx");
+/* harmony import */ var _use_draggable_area__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./use-draggable-area */ "./src/components/floating-panel/use-draggable-area.ts");
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./constants */ "./src/components/floating-panel/constants.ts");
+/* harmony import */ var _floating_panel_collapse_button__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./floating-panel-collapse-button */ "./src/components/floating-panel/floating-panel-collapse-button.tsx");
+
+
+
 
 
 
@@ -57290,26 +57298,51 @@ var FloatingPanelHeader = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.for
     dragIcon = _ref.dragIcon;
   var _useTranslation = (0,_hooks_use_translation__WEBPACK_IMPORTED_MODULE_4__.useTranslation)(),
     t = _useTranslation.t;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("header", {
-    ref: ref,
-    className: "floating-panel-header"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_floating_panel_drag_handle__WEBPACK_IMPORTED_MODULE_6__.FloatingPanelDragHandle, {
-    dragIcon: dragIcon
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "actions"
-  }, actions, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_floating_panel_dock_button__WEBPACK_IMPORTED_MODULE_5__.FloatingPanelDockButton, {
-    isDocked: isDocked,
-    setIsDocked: setIsDocked
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_button__WEBPACK_IMPORTED_MODULE_2__.Button, {
-    testId: "floating-panel-close-action",
-    accentType: _button__WEBPACK_IMPORTED_MODULE_2__.ACCENT_TYPES.ROUND_ICON,
-    onClick: function onClick() {
-      return onClose(getPosition());
-    },
-    "aria-label": t('Close')
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_font_awesome_icon__WEBPACK_IMPORTED_MODULE_3__.FontAwesomeIcon, {
-    icon: _fortawesome_free_solid_svg_icons_faXmark__WEBPACK_IMPORTED_MODULE_1__.faXmark
-  }))));
+  var _useContext = (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(_constants__WEBPACK_IMPORTED_MODULE_8__.FloatingPanelContext),
+    onDrag = _useContext.onDrag,
+    onDragStart = _useContext.onDragStart,
+    onDragEnd = _useContext.onDragEnd,
+    isCollapsed = _useContext.isCollapsed,
+    setIsCollapsed = _useContext.setIsCollapsed;
+  var onStart = (0,_use_draggable_area__WEBPACK_IMPORTED_MODULE_7__.useDraggableArea)({
+    areaId: 'drag-header',
+    onDrag: onDrag,
+    onDragStart: onDragStart,
+    onDragEnd: onDragEnd
+  });
+  return (
+    /*#__PURE__*/
+    // FloatingPanelDragHandle is responsible for accessibility of the drag handle
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("header", {
+      ref: ref,
+      className: "floating-panel-header",
+      onMouseDown: onStart
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_floating_panel_drag_handle__WEBPACK_IMPORTED_MODULE_6__.FloatingPanelDragHandle, {
+      dragIcon: dragIcon
+    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "actions",
+      onMouseDown: function onMouseDown(event) {
+        // Prevent dragging when clicking on action buttons
+        event.stopPropagation();
+      }
+    }, actions, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_floating_panel_collapse_button__WEBPACK_IMPORTED_MODULE_9__.FloatingPanelCollapseButton, {
+      isCollapsed: isCollapsed,
+      setIsCollapsed: setIsCollapsed
+    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_floating_panel_dock_button__WEBPACK_IMPORTED_MODULE_5__.FloatingPanelDockButton, {
+      isDocked: isDocked,
+      setIsDocked: setIsDocked
+    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_button__WEBPACK_IMPORTED_MODULE_2__.Button, {
+      testId: "floating-panel-close-action",
+      accentType: _button__WEBPACK_IMPORTED_MODULE_2__.ACCENT_TYPES.ROUND_ICON,
+      onClick: function onClick() {
+        return onClose(getPosition());
+      },
+      "aria-label": t('Close')
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_font_awesome_icon__WEBPACK_IMPORTED_MODULE_3__.FontAwesomeIcon, {
+      icon: _fortawesome_free_solid_svg_icons_faXmark__WEBPACK_IMPORTED_MODULE_1__.faXmark
+    }))))
+  );
 });
 FloatingPanelHeader.displayName = 'FloatingPanelHeader';
 
@@ -57384,7 +57417,7 @@ var noop = function noop() {
  * @alpine-light-supported
  */
 function FloatingPanel(_ref) {
-  var _props$isDocked, _props$setIsDocked;
+  var _props$isDocked, _props$setIsDocked, _props$isCollapsed, _props$setIsCollapsed;
   var children = _ref.children,
     _ref$minHeight = _ref.minHeight,
     minHeight = _ref$minHeight === void 0 ? 648 : _ref$minHeight,
@@ -57422,6 +57455,8 @@ function FloatingPanel(_ref) {
       initialState: initialState,
       isDocked: (_props$isDocked = props.isDocked) !== null && _props$isDocked !== void 0 ? _props$isDocked : false,
       setIsDocked: (_props$setIsDocked = props.setIsDocked) !== null && _props$setIsDocked !== void 0 ? _props$setIsDocked : noop,
+      isCollapsed: (_props$isCollapsed = props.isCollapsed) !== null && _props$isCollapsed !== void 0 ? _props$isCollapsed : false,
+      setIsCollapsed: (_props$setIsCollapsed = props.setIsCollapsed) !== null && _props$setIsCollapsed !== void 0 ? _props$setIsCollapsed : noop,
       containerElement: containerElement,
       pageContentElement: (0,_constants__WEBPACK_IMPORTED_MODULE_7__.getHtmlElement)(pageContentEl)
     }),
@@ -57431,8 +57466,9 @@ function FloatingPanel(_ref) {
     onResize = _useFloatingPanelStat.onResize,
     onMovementStart = _useFloatingPanelStat.onMovementStart,
     onResizeEnd = _useFloatingPanelStat.onResizeEnd,
-    setState = _useFloatingPanelStat.setState,
+    setPosition = _useFloatingPanelStat.setPosition,
     isDocked = _useFloatingPanelStat.isDocked,
+    isCollapsed = _useFloatingPanelStat.isCollapsed,
     setIsDocked = _useFloatingPanelStat.setIsDocked,
     getPosition = _useFloatingPanelStat.getPosition,
     context = _useFloatingPanelStat.context;
@@ -57445,7 +57481,7 @@ function FloatingPanel(_ref) {
     panelRef.current.focus();
     if (initialState && !initialStateAppliedOnce.current) {
       initialStateAppliedOnce.current = true;
-      return setState(initialState);
+      return setPosition(initialState);
     }
     if (!anchorEl) {
       return;
@@ -57458,7 +57494,7 @@ function FloatingPanel(_ref) {
         var _getBoundingClientRec = panelRef.current.getBoundingClientRect(),
           left = _getBoundingClientRec.left,
           top = _getBoundingClientRec.top;
-        setState(function (state) {
+        setPosition(function (state) {
           return _objectSpread(_objectSpread({}, state), {}, {
             left: left,
             top: top
@@ -57474,7 +57510,8 @@ function FloatingPanel(_ref) {
     ref: panelRef,
     "test-id": testId,
     className: classnames__WEBPACK_IMPORTED_MODULE_2___default()('floating-panel', {
-      docked: isDocked
+      docked: isDocked,
+      collapsed: isCollapsed
     })
     /* eslint-disable-next-line react/forbid-dom-props */,
     style: style,
@@ -57524,6 +57561,115 @@ function FloatingPanel(_ref) {
 
 
 
+/***/ }),
+
+/***/ "./src/components/floating-panel/types.ts":
+/*!************************************************!*\
+  !*** ./src/components/floating-panel/types.ts ***!
+  \************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   PANEL_STATE: () => (/* binding */ PANEL_STATE)
+/* harmony export */ });
+var PANEL_STATE = /*#__PURE__*/function (PANEL_STATE) {
+  PANEL_STATE["FLOATING"] = "floating";
+  PANEL_STATE["COLLAPSED"] = "collapsed";
+  PANEL_STATE["DOCKED"] = "docked";
+  PANEL_STATE["TO_BE_DOCKED"] = "to-be-docked";
+  return PANEL_STATE;
+}({});
+
+/***/ }),
+
+/***/ "./src/components/floating-panel/use-draggable-area.ts":
+/*!*************************************************************!*\
+  !*** ./src/components/floating-panel/use-draggable-area.ts ***!
+  \*************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   useDraggableArea: () => (/* binding */ useDraggableArea)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+
+/**
+ *
+ * @param areaId
+ * @param onDragStart
+ * @param onDrag
+ * @param onDragEnd
+ * @returns onStart function to be used in onMouseDown event
+ */
+function useDraggableArea(_ref) {
+  var areaId = _ref.areaId,
+    _ref$onDragStart = _ref.onDragStart,
+    onDragStart = _ref$onDragStart === void 0 ? function () {} : _ref$onDragStart,
+    onDrag = _ref.onDrag,
+    _ref$onDragEnd = _ref.onDragEnd,
+    onDragEnd = _ref$onDragEnd === void 0 ? function () {} : _ref$onDragEnd;
+  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
+  var onStart = function onStart(e) {
+    var draggableEvent = Object.assign(e, {
+      areaId: areaId
+    });
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+    onDragStart(draggableEvent);
+  };
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    if (!isDragging) {
+      return;
+    }
+    function onDragHandler(e) {
+      var draggableEvent = Object.assign(e, {
+        areaId: areaId
+      });
+      e.preventDefault();
+      e.stopPropagation();
+      onDrag(draggableEvent);
+    }
+    function onDragEndHandler(e) {
+      var draggableEvent = Object.assign(e, {
+        areaId: areaId
+      });
+      e.preventDefault();
+      e.stopPropagation();
+      removeListeners();
+      setIsDragging(false);
+      onDragEnd(draggableEvent);
+    }
+    function onDragBlurHandler() {
+      setIsDragging(false);
+      onDragEnd(areaId);
+      removeListeners();
+    }
+    window.addEventListener('mousemove', onDragHandler);
+    window.addEventListener('mouseup', onDragEndHandler);
+    window.addEventListener('blur', onDragBlurHandler);
+    function removeListeners() {
+      window.removeEventListener('mousemove', onDragHandler);
+      window.removeEventListener('mouseup', onDragEndHandler);
+      window.removeEventListener('blur', onDragBlurHandler);
+    }
+    return removeListeners;
+  }, [isDragging, onDragStart, onDrag, onDragEnd, areaId]);
+  return onStart;
+}
+
 /***/ }),
 
 /***/ "./src/components/floating-panel/use-floating-panel-root.ts":
@@ -57579,7 +57725,8 @@ function useFloatingPanelRoot(_ref) {
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../hooks */ "./src/components/hooks/index.ts");
 /* harmony import */ var _use_floating_panel_root__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./use-floating-panel-root */ "./src/components/floating-panel/use-floating-panel-root.ts");
-/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./constants */ "./src/components/floating-panel/constants.ts");
+/* harmony import */ var _types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./types */ "./src/components/floating-panel/types.ts");
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./constants */ "./src/components/floating-panel/constants.ts");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -57596,18 +57743,19 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 
 
 
+
 var step = 80;
 var dockAreaWidth = 26;
-var delta = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _constants__WEBPACK_IMPORTED_MODULE_3__.MOVE_KEYS.UP, {
+var delta = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _constants__WEBPACK_IMPORTED_MODULE_4__.MOVE_KEYS.UP, {
   dx: 0,
   dy: -step
-}), _constants__WEBPACK_IMPORTED_MODULE_3__.MOVE_KEYS.RIGHT, {
+}), _constants__WEBPACK_IMPORTED_MODULE_4__.MOVE_KEYS.RIGHT, {
   dx: step,
   dy: 0
-}), _constants__WEBPACK_IMPORTED_MODULE_3__.MOVE_KEYS.DOWN, {
+}), _constants__WEBPACK_IMPORTED_MODULE_4__.MOVE_KEYS.DOWN, {
   dx: 0,
   dy: step
-}), _constants__WEBPACK_IMPORTED_MODULE_3__.MOVE_KEYS.LEFT, {
+}), _constants__WEBPACK_IMPORTED_MODULE_4__.MOVE_KEYS.LEFT, {
   dx: -step,
   dy: 0
 });
@@ -57618,35 +57766,34 @@ function useFloatingPanelState(_ref) {
     maxHeight = _ref.maxHeight,
     isDockedExternal = _ref.isDocked,
     setIsDockedExternal = _ref.setIsDocked,
+    isCollapsedExternal = _ref.isCollapsed,
+    setIsCollapsedExternal = _ref.setIsCollapsed,
     initialState = _ref.initialState,
     containerElement = _ref.containerElement,
     pageContentElement = _ref.pageContentElement;
-  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(isDockedExternal),
+  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(function () {
+      if (isDockedExternal) {
+        return _types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.DOCKED;
+      }
+      if (isCollapsedExternal) {
+        return _types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.COLLAPSED;
+      }
+      return _types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.FLOATING;
+    }),
     _useState2 = _slicedToArray(_useState, 2),
-    isDocked = _useState2[0],
-    setIsDocked = _useState2[1];
+    state = _useState2[0],
+    setState = _useState2[1];
   var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
     _useState4 = _slicedToArray(_useState3, 2),
     isMoving = _useState4[0],
     setIsMoving = _useState4[1];
-  var animationRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
-  var headerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
-  var headerHeightRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(36);
-  var panelRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
-  var dragStartPositionsRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
-  var isDockHighlightedRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);
-  var containerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(containerElement);
-  var lastPositionRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)({
-    top: 0,
-    left: 0,
-    width: 0,
-    height: 0
-  });
+  var isDocked = state === _types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.DOCKED;
+  var isCollapsed = state === _types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.COLLAPSED;
   var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(initialState ? {
-      top: initialState.top || lastPositionRef.current.top,
-      left: initialState.left || lastPositionRef.current.left,
-      width: between(initialState.width || lastPositionRef.current.width, minWidth, maxWidth),
-      height: between(initialState.height || lastPositionRef.current.height, minHeight, maxHeight)
+      top: initialState.top,
+      left: initialState.left,
+      width: between(initialState.width, minWidth, maxWidth),
+      height: between(initialState.height, minHeight, maxHeight)
     } : {
       top: 0,
       left: 0,
@@ -57654,17 +57801,80 @@ function useFloatingPanelState(_ref) {
       height: minHeight
     }),
     _useState6 = _slicedToArray(_useState5, 2),
-    state = _useState6[0],
-    setState = _useState6[1];
-  lastPositionRef.current = state;
+    position = _useState6[0],
+    setPosition = _useState6[1];
+  var animationRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  var headerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  var headerHeightRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(36);
+  var lastActiveElementRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
+  var panelRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  var dragStartPositionsRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)({
+    width: minWidth,
+    height: minHeight,
+    left: 0,
+    top: 0,
+    mouseX: 0,
+    mouseY: 0
+  });
+  var containerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(containerElement);
+  var lastPositionRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(position);
+  var lastExpandedPositionRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(position);
+  var stateRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(state);
+  stateRef.current = state;
+  lastPositionRef.current = position;
   containerRef.current = containerElement;
   var style = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
     return isDocked ? {} : {
-      transform: "translate3d(".concat(state.left, "px, ").concat(state.top, "px, 0px)"),
-      width: "".concat(state.width, "px"),
-      height: "".concat(state.height, "px")
+      transform: "translate3d(".concat(position.left, "px, ").concat(position.top, "px, 0px)"),
+      width: "".concat(position.width, "px"),
+      height: "".concat(position.height, "px")
+    };
+  }, [position, isDocked]);
+  var runStateTransition = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (nextState) {
+    setState(nextState);
+    var getKey = function getKey(from, to) {
+      return "".concat(from, "->").concat(to);
     };
-  }, [state, isDocked]);
+    var transitionPairs = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, getKey(_types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.FLOATING, _types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.COLLAPSED), function () {
+      setIsCollapsedExternal(true);
+    }), getKey(_types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.COLLAPSED, _types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.FLOATING), function () {
+      setIsCollapsedExternal(false);
+    }), getKey(_types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.FLOATING, _types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.DOCKED), function () {
+      setIsDockedExternal(true);
+    }), getKey(_types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.DOCKED, _types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.FLOATING), function () {
+      setIsDockedExternal(false);
+      setPosition(function (state) {
+        var _dragStartPositionsRe, _dragStartPositionsRe2;
+        return _objectSpread(_objectSpread({}, state), {}, {
+          top: (_dragStartPositionsRe = dragStartPositionsRef.current) === null || _dragStartPositionsRe === void 0 ? void 0 : _dragStartPositionsRe.top,
+          left: (_dragStartPositionsRe2 = dragStartPositionsRef.current) === null || _dragStartPositionsRe2 === void 0 ? void 0 : _dragStartPositionsRe2.left,
+          width: lastPositionRef.current.width,
+          height: lastPositionRef.current.height
+        });
+      });
+    }), getKey(_types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.COLLAPSED, _types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.DOCKED), function () {
+      setIsCollapsedExternal(false);
+      setIsDockedExternal(true);
+    }), getKey(_types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.DOCKED, _types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.COLLAPSED), function () {
+      setIsCollapsedExternal(true);
+      setIsDockedExternal(false);
+    }), getKey(_types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.FLOATING, _types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.TO_BE_DOCKED), function () {
+      toggleDockHighlight(true, containerRef.current);
+    }), getKey(_types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.TO_BE_DOCKED, _types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.FLOATING), function () {
+      toggleDockHighlight(false, containerRef.current);
+      setIsDockedExternal(false);
+    }), getKey(_types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.TO_BE_DOCKED, _types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.DOCKED), function () {
+      setIsDockedExternal(true);
+      toggleDockHighlight(false, containerRef.current);
+    }), getKey(_types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.DOCKED, _types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.TO_BE_DOCKED), function () {
+      setIsDockedExternal(false);
+      toggleDockHighlight(true, containerRef.current);
+    });
+    var transition = transitionPairs[getKey(stateRef.current, nextState)];
+    if (transition) {
+      transition();
+    }
+  }, [setIsCollapsedExternal, setIsDockedExternal]);
   var onDrag = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (event) {
     if (animationRef.current) {
       return;
@@ -57675,18 +57885,11 @@ function useFloatingPanelState(_ref) {
       var maxTop = window.innerHeight - headerHeightRef.current;
       var nextLeft = event.clientX - (start.mouseX - start.left);
       var nextTop = event.clientY - (start.mouseY - start.top);
-      setState(function (state) {
-        var nextState = _objectSpread(_objectSpread({}, state), {}, {
+      setPosition(function (position) {
+        return _objectSpread(_objectSpread({}, position), {}, {
           top: between(nextTop, 0, maxTop),
           left: between(nextLeft, 0, maxLeft)
         });
-        var nextIsDockHighlighted = isInDockArea(nextState);
-        // DOM manipulation, not state
-        if (nextIsDockHighlighted !== isDockHighlightedRef.current) {
-          toggleDockHighlight(nextIsDockHighlighted, containerRef.current);
-          isDockHighlightedRef.current = nextIsDockHighlighted;
-        }
-        return nextState;
       });
       animationRef.current = null;
     });
@@ -57704,26 +57907,17 @@ function useFloatingPanelState(_ref) {
       mouseX: mouseX,
       mouseY: mouseY
     });
-    lastPositionRef.current = dragStartPositionsRef.current;
     setIsMoving(true);
-  }, []);
+    if (!isCollapsed) {
+      lastExpandedPositionRef.current = dragStartPositionsRef.current;
+    }
+  }, [isCollapsed]);
   var onDragEnd = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
-    if (isDockHighlightedRef.current) {
-      var position = dragStartPositionsRef.current;
-      setIsDocked(true);
-      setIsDockedExternal(true);
-      setState(function (state) {
-        var nextState = _objectSpread(_objectSpread({}, state), {}, {
-          left: window.innerWidth - position.width - dockAreaWidth * 2
-        });
-        lastPositionRef.current = nextState;
-        return nextState;
-      });
-      isDockHighlightedRef.current = false;
-      toggleDockHighlight(false, containerRef.current);
+    if (state === _types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.TO_BE_DOCKED) {
+      runStateTransition(_types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.DOCKED);
     }
     setIsMoving(false);
-  }, []);
+  }, [state, runStateTransition]);
   var onResize = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
     if (animationRef.current) {
       return;
@@ -57731,7 +57925,7 @@ function useFloatingPanelState(_ref) {
     animationRef.current = requestAnimationFrame(function () {
       var start = dragStartPositionsRef.current;
       var statePatch = {};
-      var resize = _constants__WEBPACK_IMPORTED_MODULE_3__.resizeHandlesMap.get(e.areaId);
+      var resize = _constants__WEBPACK_IMPORTED_MODULE_4__.resizeHandlesMap.get(e.areaId);
       if (resize !== null && resize !== void 0 && resize.right) {
         var width = between(start.width + (e.pageX - start.mouseX), minWidth, maxWidth);
         if (width !== start.width) {
@@ -57747,9 +57941,10 @@ function useFloatingPanelState(_ref) {
       if (resize !== null && resize !== void 0 && resize.top) {
         var _height = start.height - (e.pageY - start.mouseY);
         var nextTop = start.top + (e.pageY - start.mouseY);
-        if (_height > minHeight && _height <= maxHeight && nextTop > 0) {
+        var nextTopLimited = between(0, nextTop, window.innerHeight - headerHeightRef.current);
+        if (_height > minHeight && _height <= maxHeight && nextTopLimited > 0) {
           statePatch.height = _height;
-          statePatch.top = nextTop;
+          statePatch.top = nextTopLimited;
         }
       }
       if (resize !== null && resize !== void 0 && resize.left) {
@@ -57760,8 +57955,8 @@ function useFloatingPanelState(_ref) {
         }
       }
       if (Object.keys(statePatch).length) {
-        setState(function (state) {
-          return _objectSpread(_objectSpread({}, state), statePatch);
+        setPosition(function (position) {
+          return _objectSpread(_objectSpread({}, position), statePatch);
         });
       }
       animationRef.current = null;
@@ -57769,23 +57964,44 @@ function useFloatingPanelState(_ref) {
   }, [minWidth, minHeight, maxWidth, maxHeight]);
   var onResizeEnd = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
     setIsMoving(false);
-  }, []);
-  var setIsDockedHandler = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (docked) {
-    var element = panelRef.current;
-    if (!element || docked === isDocked) {
-      return;
+    var nextIsDockHighlighted = isInDockArea(_objectSpread({}, lastPositionRef.current));
+    if (nextIsDockHighlighted && state !== _types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.DOCKED) {
+      runStateTransition(_types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.DOCKED);
     }
+  }, [state]);
+  var setIsDockedHandler = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (docked) {
     if (docked) {
-      setIsDocked(true);
+      var element = panelRef.current;
+      dragStartPositionsRef.current = _objectSpread(_objectSpread({}, getPanelStateFromElement(element)), {}, {
+        mouseX: 0,
+        mouseY: 0
+      });
+      runStateTransition(_types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.DOCKED);
     } else {
-      setIsDocked(false);
+      runStateTransition(_types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.FLOATING);
+    }
+  }, [runStateTransition]);
+  var setIsCollapsedHandler = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (collapsed) {
+    if (collapsed === isCollapsed) {
+      return;
+    }
+    if (collapsed && !isDocked) {
+      lastExpandedPositionRef.current = getPanelStateFromElement(panelRef.current);
     }
-    if (isDockedExternal !== docked) {
-      setIsDockedExternal(docked);
+    if (collapsed) {
+      setPosition(function (position) {
+        return _objectSpread(_objectSpread({}, position), {}, {
+          top: window.innerHeight - headerHeightRef.current
+        });
+      });
+    } else {
+      setPosition(function (position) {
+        return _objectSpread(_objectSpread({}, position), lastExpandedPositionRef.current);
+      });
     }
-  }, [isDockedExternal, isDocked, setIsDockedExternal]);
-  var onMoveWithArrows = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (event) {
-    if (!_constants__WEBPACK_IMPORTED_MODULE_3__.MOVE_KEYS_VALUES.includes(event.key)) {
+  }, [isCollapsed, isDocked]);
+  var onMoveWithArrows = function onMoveWithArrows(event) {
+    if (!_constants__WEBPACK_IMPORTED_MODULE_4__.MOVE_KEYS_VALUES.includes(event.key)) {
       return;
     }
     var element = panelRef.current;
@@ -57799,38 +58015,72 @@ function useFloatingPanelState(_ref) {
     var maxTop = window.innerHeight - headerHeightRef.current;
     var nextLeft = currentState.left + dx;
     var nextTop = currentState.top + dy;
-    var shouldDockInsteadOfMove = false;
-    var nextState = _objectSpread(_objectSpread({}, state), {}, {
+    var nextState = _objectSpread(_objectSpread({}, position), {}, {
       top: between(nextTop, 0, maxTop),
       left: between(nextLeft, 0, maxLeft)
     });
-    shouldDockInsteadOfMove = isInDockArea(nextState) !== isDocked;
-    if (shouldDockInsteadOfMove) {
-      setIsDocked(true);
-      setIsDockedExternal(true);
+    if (nextState.top === lastPositionRef.current.top && nextState.left === lastPositionRef.current.left) {
+      return;
+    }
+    var nextDocked = isInDockArea(nextState);
+    if (isDocked && nextDocked === isDocked) {
+      return;
+    }
+    if (nextDocked && !isDocked) {
+      dragStartPositionsRef.current = _objectSpread(_objectSpread({}, currentState), {}, {
+        mouseX: 0,
+        mouseY: 0
+      });
+      lastExpandedPositionRef.current = dragStartPositionsRef.current;
+      runStateTransition(_types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.DOCKED);
     } else {
-      setState(nextState);
+      setPosition(nextState);
     }
-  }, [isDocked, state, setIsDockedExternal]);
+  };
   var getPosition = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
     return lastPositionRef.current;
   }, []);
+
+  // state transition based on position
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    var nextCollapsed = isCollapsedPosition(position, headerHeightRef.current);
+    var nextIsDockHighlighted = isInDockArea(position);
+    if (nextCollapsed && state !== _types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.COLLAPSED) {
+      runStateTransition(_types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.COLLAPSED);
+    } else if (nextIsDockHighlighted && ![_types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.TO_BE_DOCKED, _types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.DOCKED].includes(state)) {
+      runStateTransition(_types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.TO_BE_DOCKED);
+    } else if (!nextCollapsed && !nextIsDockHighlighted && state !== _types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.FLOATING) {
+      runStateTransition(_types__WEBPACK_IMPORTED_MODULE_3__.PANEL_STATE.FLOATING);
+    }
+  }, [position]);
+
+  // sync up with external state changes
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
     if (isDockedExternal !== isDocked) {
       setIsDockedHandler(isDockedExternal);
     }
   }, [isDockedExternal]);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    if (isCollapsedExternal !== isCollapsed) {
+      setIsCollapsedHandler(isCollapsedExternal);
+    }
+  }, [isCollapsedExternal]);
 
   // update position on window resize
+  // initialise position and sizes
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
     var header = headerRef.current;
     headerHeightRef.current = header.getBoundingClientRect().height;
+    dragStartPositionsRef.current = _objectSpread(_objectSpread({}, getPanelStateFromElement(panelRef.current)), {}, {
+      mouseX: 0,
+      mouseY: 0
+    });
     var onResizeHandler = function onResizeHandler() {
       var start = lastPositionRef.current;
       var maxLeft = window.innerWidth - start.width;
       var maxTop = window.innerHeight - headerHeightRef.current;
       if (start.left > maxLeft || start.top > maxTop) {
-        setState(function (state) {
+        setPosition(function (state) {
           return _objectSpread(_objectSpread({}, state), {}, {
             top: between(start.top, 0, maxTop),
             left: between(start.left, 0, maxLeft)
@@ -57847,42 +58097,65 @@ function useFloatingPanelState(_ref) {
       }
     };
   }, []);
+
+  // this allows to return focus to the last active element
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)(function () {
+    lastActiveElementRef.current = document.activeElement;
+    var onEscapeHandler = function onEscapeHandler(e) {
+      if (e.key === 'Escape') {
+        (lastActiveElementRef.current || document.body).focus();
+      }
+    };
+    window.addEventListener('keydown', onEscapeHandler);
+    return function () {
+      window.addEventListener('keydown', onEscapeHandler);
+    };
+  }, []);
   (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useFocusTrap)(panelRef);
   // update style according to content and header height
   (0,_use_floating_panel_root__WEBPACK_IMPORTED_MODULE_2__.useFloatingPanelRoot)({
     containerElement: containerElement,
     pageContentElement: pageContentElement
   });
-  var context = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
-    return {
-      onDrag: onDrag,
-      onDragStart: onMovementStart,
-      onDragEnd: onDragEnd,
-      onMoveWithArrows: onMoveWithArrows,
-      isDocked: isDocked,
-      setIsDocked: setIsDockedHandler,
-      getPosition: getPosition,
-      isMoving: isMoving
-    };
-  }, [isDocked, setIsDockedHandler, onDrag, onDragEnd, onMovementStart, onMoveWithArrows, getPosition, isMoving]);
-  var api = {
+  var context = {
+    onDrag: onDrag,
+    onDragStart: onMovementStart,
+    onDragEnd: onDragEnd,
+    onMoveWithArrows: onMoveWithArrows,
+    isDocked: isDocked,
+    setIsDocked: setIsDockedHandler,
+    isCollapsed: isCollapsed,
+    setIsCollapsed: setIsCollapsedHandler,
+    getPosition: getPosition,
+    isMoving: isMoving
+  };
+  return {
     style: style,
     panelRef: panelRef,
     headerRef: headerRef,
     onResize: onResize,
     onMovementStart: onMovementStart,
     onResizeEnd: onResizeEnd,
-    setState: setState,
-    context: context,
+    setPosition: setPosition,
+    context: (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+      return context;
+    }, Object.values(context)),
     isDocked: isDocked,
     setIsDocked: setIsDockedHandler,
+    isCollapsed: isCollapsed,
+    setIsCollapsed: setIsCollapsedHandler,
     getPosition: getPosition
   };
-  return (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
-    return api;
-  }, Object.values(api));
 }
 function getPanelStateFromElement(element) {
+  if (!element) {
+    return {
+      width: 0,
+      height: 0,
+      left: 0,
+      top: 0
+    };
+  }
   var bbox = element.getBoundingClientRect();
   return {
     width: bbox.width,
@@ -57894,14 +58167,17 @@ function getPanelStateFromElement(element) {
 function isInDockArea(panelPosition) {
   return panelPosition.left + panelPosition.width > window.innerWidth - dockAreaWidth;
 }
+function isCollapsedPosition(panelPosition, headerHeight) {
+  return window.innerHeight - panelPosition.top <= headerHeight;
+}
 function toggleDockHighlight(isDockHighlighted, element) {
   if (!element) {
     return;
   }
   if (isDockHighlighted) {
-    element.classList.add(_constants__WEBPACK_IMPORTED_MODULE_3__.HIGHLIGHTED_CLASSNAME);
+    element.classList.add(_constants__WEBPACK_IMPORTED_MODULE_4__.HIGHLIGHTED_CLASSNAME);
   } else {
-    element.classList.remove(_constants__WEBPACK_IMPORTED_MODULE_3__.HIGHLIGHTED_CLASSNAME);
+    element.classList.remove(_constants__WEBPACK_IMPORTED_MODULE_4__.HIGHLIGHTED_CLASSNAME);
   }
 }
 function between(value, min, max) {