@datarobot/design-system 29.1.1 → 29.2.0

package/cjs/floating-panel/use-floating-panel-state.js

@@ -7,6 +7,7 @@ exports.useFloatingPanelState = useFloatingPanelState;
 var _react = require("react");
 var _hooks = require("../hooks");
 var _useFloatingPanelRoot = require("./use-floating-panel-root");
+var _types = require("./types");
 var _constants = require("./constants");
 const step = 80;
 const dockAreaWidth = 26;
@@ -35,43 +36,112 @@ function useFloatingPanelState({
   maxHeight,
   isDocked: isDockedExternal,
   setIsDocked: setIsDockedExternal,
+  isCollapsed: isCollapsedExternal,
+  setIsCollapsed: setIsCollapsedExternal,
   initialState,
   containerElement,
   pageContentElement
 }) {
-  const [isDocked, setIsDocked] = (0, _react.useState)(isDockedExternal);
+  const [state, setState] = (0, _react.useState)(() => {
+    if (isDockedExternal) {
+      return _types.PANEL_STATE.DOCKED;
+    }
+    if (isCollapsedExternal) {
+      return _types.PANEL_STATE.COLLAPSED;
+    }
+    return _types.PANEL_STATE.FLOATING;
+  });
   const [isMoving, setIsMoving] = (0, _react.useState)(false);
+  const isDocked = state === _types.PANEL_STATE.DOCKED;
+  const isCollapsed = state === _types.PANEL_STATE.COLLAPSED;
+  const [position, setPosition] = (0, _react.useState)(initialState ? {
+    top: initialState.top,
+    left: initialState.left,
+    width: between(initialState.width, minWidth, maxWidth),
+    height: between(initialState.height, minHeight, maxHeight)
+  } : {
+    top: 0,
+    left: 0,
+    width: minWidth,
+    height: minHeight
+  });
   const animationRef = (0, _react.useRef)(null);
   const headerRef = (0, _react.useRef)(null);
   const headerHeightRef = (0, _react.useRef)(36);
+  const lastActiveElementRef = (0, _react.useRef)();
   const panelRef = (0, _react.useRef)(null);
-  const dragStartPositionsRef = (0, _react.useRef)();
-  const isDockHighlightedRef = (0, _react.useRef)(false);
-  const containerRef = (0, _react.useRef)(containerElement);
-  const lastPositionRef = (0, _react.useRef)({
-    top: 0,
+  const dragStartPositionsRef = (0, _react.useRef)({
+    width: minWidth,
+    height: minHeight,
     left: 0,
-    width: 0,
-    height: 0
-  });
-  const [state, setState] = (0, _react.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: 0,
-    left: 0,
-    width: minWidth,
-    height: minHeight
+    mouseX: 0,
+    mouseY: 0
   });
-  lastPositionRef.current = state;
+  const containerRef = (0, _react.useRef)(containerElement);
+  const lastPositionRef = (0, _react.useRef)(position);
+  const lastExpandedPositionRef = (0, _react.useRef)(position);
+  const stateRef = (0, _react.useRef)(state);
+  stateRef.current = state;
+  lastPositionRef.current = position;
   containerRef.current = containerElement;
   const style = (0, _react.useMemo)(() => isDocked ? {} : {
-    transform: `translate3d(${state.left}px, ${state.top}px, 0px)`,
-    width: `${state.width}px`,
-    height: `${state.height}px`
-  }, [state, isDocked]);
+    transform: `translate3d(${position.left}px, ${position.top}px, 0px)`,
+    width: `${position.width}px`,
+    height: `${position.height}px`
+  }, [position, isDocked]);
+  const runStateTransition = (0, _react.useCallback)(nextState => {
+    setState(nextState);
+    const getKey = (from, to) => `${from}->${to}`;
+    const transitionPairs = {
+      [getKey(_types.PANEL_STATE.FLOATING, _types.PANEL_STATE.COLLAPSED)]: () => {
+        setIsCollapsedExternal(true);
+      },
+      [getKey(_types.PANEL_STATE.COLLAPSED, _types.PANEL_STATE.FLOATING)]: () => {
+        setIsCollapsedExternal(false);
+      },
+      [getKey(_types.PANEL_STATE.FLOATING, _types.PANEL_STATE.DOCKED)]: () => {
+        setIsDockedExternal(true);
+      },
+      [getKey(_types.PANEL_STATE.DOCKED, _types.PANEL_STATE.FLOATING)]: () => {
+        setIsDockedExternal(false);
+        setPosition(state => ({
+          ...state,
+          top: dragStartPositionsRef.current?.top,
+          left: dragStartPositionsRef.current?.left,
+          width: lastPositionRef.current.width,
+          height: lastPositionRef.current.height
+        }));
+      },
+      [getKey(_types.PANEL_STATE.COLLAPSED, _types.PANEL_STATE.DOCKED)]: () => {
+        setIsCollapsedExternal(false);
+        setIsDockedExternal(true);
+      },
+      [getKey(_types.PANEL_STATE.DOCKED, _types.PANEL_STATE.COLLAPSED)]: () => {
+        setIsCollapsedExternal(true);
+        setIsDockedExternal(false);
+      },
+      [getKey(_types.PANEL_STATE.FLOATING, _types.PANEL_STATE.TO_BE_DOCKED)]: () => {
+        toggleDockHighlight(true, containerRef.current);
+      },
+      [getKey(_types.PANEL_STATE.TO_BE_DOCKED, _types.PANEL_STATE.FLOATING)]: () => {
+        toggleDockHighlight(false, containerRef.current);
+        setIsDockedExternal(false);
+      },
+      [getKey(_types.PANEL_STATE.TO_BE_DOCKED, _types.PANEL_STATE.DOCKED)]: () => {
+        setIsDockedExternal(true);
+        toggleDockHighlight(false, containerRef.current);
+      },
+      [getKey(_types.PANEL_STATE.DOCKED, _types.PANEL_STATE.TO_BE_DOCKED)]: () => {
+        setIsDockedExternal(false);
+        toggleDockHighlight(true, containerRef.current);
+      }
+    };
+    const transition = transitionPairs[getKey(stateRef.current, nextState)];
+    if (transition) {
+      transition();
+    }
+  }, [setIsCollapsedExternal, setIsDockedExternal]);
   const onDrag = (0, _react.useCallback)(event => {
     if (animationRef.current) {
       return;
@@ -82,20 +152,11 @@ function useFloatingPanelState({
       const maxTop = window.innerHeight - headerHeightRef.current;
       const nextLeft = event.clientX - (start.mouseX - start.left);
       const nextTop = event.clientY - (start.mouseY - start.top);
-      setState(state => {
-        const nextState = {
-          ...state,
-          top: between(nextTop, 0, maxTop),
-          left: between(nextLeft, 0, maxLeft)
-        };
-        const nextIsDockHighlighted = isInDockArea(nextState);
-        // DOM manipulation, not state
-        if (nextIsDockHighlighted !== isDockHighlightedRef.current) {
-          toggleDockHighlight(nextIsDockHighlighted, containerRef.current);
-          isDockHighlightedRef.current = nextIsDockHighlighted;
-        }
-        return nextState;
-      });
+      setPosition(position => ({
+        ...position,
+        top: between(nextTop, 0, maxTop),
+        left: between(nextLeft, 0, maxLeft)
+      }));
       animationRef.current = null;
     });
   }, []);
@@ -113,27 +174,17 @@ function useFloatingPanelState({
       mouseX,
       mouseY
     };
-    lastPositionRef.current = dragStartPositionsRef.current;
     setIsMoving(true);
-  }, []);
+    if (!isCollapsed) {
+      lastExpandedPositionRef.current = dragStartPositionsRef.current;
+    }
+  }, [isCollapsed]);
   const onDragEnd = (0, _react.useCallback)(() => {
-    if (isDockHighlightedRef.current) {
-      const position = dragStartPositionsRef.current;
-      setIsDocked(true);
-      setIsDockedExternal(true);
-      setState(state => {
-        const nextState = {
-          ...state,
-          left: window.innerWidth - position.width - dockAreaWidth * 2
-        };
-        lastPositionRef.current = nextState;
-        return nextState;
-      });
-      isDockHighlightedRef.current = false;
-      toggleDockHighlight(false, containerRef.current);
+    if (state === _types.PANEL_STATE.TO_BE_DOCKED) {
+      runStateTransition(_types.PANEL_STATE.DOCKED);
     }
     setIsMoving(false);
-  }, []);
+  }, [state, runStateTransition]);
   const onResize = (0, _react.useCallback)(e => {
     if (animationRef.current) {
       return;
@@ -157,9 +208,10 @@ function useFloatingPanelState({
       if (resize?.top) {
         const height = start.height - (e.pageY - start.mouseY);
         const nextTop = start.top + (e.pageY - start.mouseY);
-        if (height > minHeight && height <= maxHeight && nextTop > 0) {
+        const 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?.left) {
@@ -170,8 +222,8 @@ function useFloatingPanelState({
         }
       }
       if (Object.keys(statePatch).length) {
-        setState(state => ({
-          ...state,
+        setPosition(position => ({
+          ...position,
           ...statePatch
         }));
       }
@@ -180,22 +232,46 @@ function useFloatingPanelState({
   }, [minWidth, minHeight, maxWidth, maxHeight]);
   const onResizeEnd = (0, _react.useCallback)(() => {
     setIsMoving(false);
-  }, []);
-  const setIsDockedHandler = (0, _react.useCallback)(docked => {
-    const element = panelRef.current;
-    if (!element || docked === isDocked) {
-      return;
+    const nextIsDockHighlighted = isInDockArea({
+      ...lastPositionRef.current
+    });
+    if (nextIsDockHighlighted && state !== _types.PANEL_STATE.DOCKED) {
+      runStateTransition(_types.PANEL_STATE.DOCKED);
     }
+  }, [state]);
+  const setIsDockedHandler = (0, _react.useCallback)(docked => {
     if (docked) {
-      setIsDocked(true);
+      const element = panelRef.current;
+      dragStartPositionsRef.current = {
+        ...getPanelStateFromElement(element),
+        mouseX: 0,
+        mouseY: 0
+      };
+      runStateTransition(_types.PANEL_STATE.DOCKED);
     } else {
-      setIsDocked(false);
+      runStateTransition(_types.PANEL_STATE.FLOATING);
+    }
+  }, [runStateTransition]);
+  const setIsCollapsedHandler = (0, _react.useCallback)(collapsed => {
+    if (collapsed === isCollapsed) {
+      return;
+    }
+    if (collapsed && !isDocked) {
+      lastExpandedPositionRef.current = getPanelStateFromElement(panelRef.current);
     }
-    if (isDockedExternal !== docked) {
-      setIsDockedExternal(docked);
+    if (collapsed) {
+      setPosition(position => ({
+        ...position,
+        top: window.innerHeight - headerHeightRef.current
+      }));
+    } else {
+      setPosition(position => ({
+        ...position,
+        ...lastExpandedPositionRef.current
+      }));
     }
-  }, [isDockedExternal, isDocked, setIsDockedExternal]);
-  const onMoveWithArrows = (0, _react.useCallback)(event => {
+  }, [isCollapsed, isDocked]);
+  const onMoveWithArrows = event => {
     if (!_constants.MOVE_KEYS_VALUES.includes(event.key)) {
       return;
     }
@@ -210,39 +286,75 @@ function useFloatingPanelState({
     const maxTop = window.innerHeight - headerHeightRef.current;
     const nextLeft = currentState.left + dx;
     const nextTop = currentState.top + dy;
-    let shouldDockInsteadOfMove = false;
     const nextState = {
-      ...state,
+      ...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;
+    }
+    const nextDocked = isInDockArea(nextState);
+    if (isDocked && nextDocked === isDocked) {
+      return;
+    }
+    if (nextDocked && !isDocked) {
+      dragStartPositionsRef.current = {
+        ...currentState,
+        mouseX: 0,
+        mouseY: 0
+      };
+      lastExpandedPositionRef.current = dragStartPositionsRef.current;
+      runStateTransition(_types.PANEL_STATE.DOCKED);
     } else {
-      setState(nextState);
+      setPosition(nextState);
     }
-  }, [isDocked, state, setIsDockedExternal]);
+  };
   const getPosition = (0, _react.useCallback)(() => {
     return lastPositionRef.current;
   }, []);
+
+  // state transition based on position
+  (0, _react.useEffect)(() => {
+    const nextCollapsed = isCollapsedPosition(position, headerHeightRef.current);
+    const nextIsDockHighlighted = isInDockArea(position);
+    if (nextCollapsed && state !== _types.PANEL_STATE.COLLAPSED) {
+      runStateTransition(_types.PANEL_STATE.COLLAPSED);
+    } else if (nextIsDockHighlighted && ![_types.PANEL_STATE.TO_BE_DOCKED, _types.PANEL_STATE.DOCKED].includes(state)) {
+      runStateTransition(_types.PANEL_STATE.TO_BE_DOCKED);
+    } else if (!nextCollapsed && !nextIsDockHighlighted && state !== _types.PANEL_STATE.FLOATING) {
+      runStateTransition(_types.PANEL_STATE.FLOATING);
+    }
+  }, [position]);
+
+  // sync up with external state changes
   (0, _react.useEffect)(() => {
     if (isDockedExternal !== isDocked) {
       setIsDockedHandler(isDockedExternal);
     }
   }, [isDockedExternal]);
+  (0, _react.useEffect)(() => {
+    if (isCollapsedExternal !== isCollapsed) {
+      setIsCollapsedHandler(isCollapsedExternal);
+    }
+  }, [isCollapsedExternal]);
 
   // update position on window resize
+  // initialise position and sizes
   (0, _react.useEffect)(() => {
     const header = headerRef.current;
     headerHeightRef.current = header.getBoundingClientRect().height;
+    dragStartPositionsRef.current = {
+      ...getPanelStateFromElement(panelRef.current),
+      mouseX: 0,
+      mouseY: 0
+    };
     const onResizeHandler = () => {
       const start = lastPositionRef.current;
       const maxLeft = window.innerWidth - start.width;
       const maxTop = window.innerHeight - headerHeightRef.current;
       if (start.left > maxLeft || start.top > maxTop) {
-        setState(state => ({
+        setPosition(state => ({
           ...state,
           top: between(start.top, 0, maxTop),
           left: between(start.left, 0, maxLeft)
@@ -258,38 +370,63 @@ function useFloatingPanelState({
       }
     };
   }, []);
+
+  // this allows to return focus to the last active element
+  (0, _react.useLayoutEffect)(() => {
+    lastActiveElementRef.current = document.activeElement;
+    const onEscapeHandler = e => {
+      if (e.key === 'Escape') {
+        (lastActiveElementRef.current || document.body).focus();
+      }
+    };
+    window.addEventListener('keydown', onEscapeHandler);
+    return () => {
+      window.addEventListener('keydown', onEscapeHandler);
+    };
+  }, []);
   (0, _hooks.useFocusTrap)(panelRef);
   // update style according to content and header height
   (0, _useFloatingPanelRoot.useFloatingPanelRoot)({
     containerElement,
     pageContentElement
   });
-  const context = (0, _react.useMemo)(() => ({
+  const context = {
     onDrag,
     onDragStart: onMovementStart,
     onDragEnd,
     onMoveWithArrows,
     isDocked,
     setIsDocked: setIsDockedHandler,
+    isCollapsed,
+    setIsCollapsed: setIsCollapsedHandler,
     getPosition,
     isMoving
-  }), [isDocked, setIsDockedHandler, onDrag, onDragEnd, onMovementStart, onMoveWithArrows, getPosition, isMoving]);
-  const api = {
+  };
+  return {
     style,
     panelRef,
     headerRef,
     onResize,
     onMovementStart,
     onResizeEnd,
-    setState,
-    context,
+    setPosition,
+    context: (0, _react.useMemo)(() => context, Object.values(context)),
     isDocked,
     setIsDocked: setIsDockedHandler,
+    isCollapsed,
+    setIsCollapsed: setIsCollapsedHandler,
     getPosition
   };
-  return (0, _react.useMemo)(() => api, Object.values(api));
 }
 function getPanelStateFromElement(element) {
+  if (!element) {
+    return {
+      width: 0,
+      height: 0,
+      left: 0,
+      top: 0
+    };
+  }
   const bbox = element.getBoundingClientRect();
   return {
     width: bbox.width,
@@ -301,6 +438,9 @@ 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;

package/cjs/hooks/use-analytics/use-analytics.test.js

@@ -94,15 +94,5 @@ describe('useAnalytics', function () {
         prop: 'value'
       }]);
     });
-    it('should pass custom event to provider', function () {
-      (0, _react.act)(() => hook.result.current.track({
-        event: 'project_created',
-        label: 'example_dataset',
-        property: 'industry',
-        value: 42
-      }));
-      expect(provider.getLastMediator().method).toEqual(_constants.ANALYTICS_METHODS.TRACK);
-      expect(provider.getLastMediator().args).toEqual(['page.key', 'project_created', 'example_dataset', 'industry', 42, false]);
-    });
   });
 });

package/esm/datetime-range-picker/datetime-range-picker-panel.d.ts

@@ -10,7 +10,8 @@ export declare enum DATE_RANGE_ERROR_TYPES {
     END_AFTER_MIN = "END_AFTER_MIN",
     START_AFTER_MAX = "START_AFTER_MAX",
     INVALID_START_DATE = "INVALID_START_DATE",
-    INVALID_END_DATE = "INVALID_END_DATE"
+    INVALID_END_DATE = "INVALID_END_DATE",
+    START_END_SAME = "START_END_SAME"
 }
 export type DateRangeErrors = {
     [DATE_RANGE_ERROR_TYPES.INVALID_DATETIME]?: string;

package/esm/datetime-range-picker/datetime-range-picker-panel.js

@@ -19,6 +19,7 @@ export let DATE_RANGE_ERROR_TYPES = /*#__PURE__*/function (DATE_RANGE_ERROR_TYPE
   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;
 }({});
 export const DATE_RANGE_INPUT_TYPES = {

package/esm/floating-panel/constants.js

@@ -3,9 +3,11 @@ export const FloatingPanelContext = /*#__PURE__*/createContext({
   onDrag: () => {},
   onDragStart: () => {},
   onDragEnd: () => {},
-  isDocked: false,
   isMoving: false,
+  isDocked: false,
   setIsDocked: () => {},
+  isCollapsed: false,
+  setIsCollapsed: () => {},
   onMoveWithArrows: () => {},
   getPosition: () => ({
     left: 0,

package/esm/floating-panel/draggable-area.d.ts

@@ -8,5 +8,6 @@ export type DraggableAreaProps = {
     onDragEnd?: (event: DraggableEvent | string) => void;
     children?: React.ReactNode;
     testId?: string;
+    tagName?: keyof JSX.IntrinsicElements;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'onDragEnd' | 'onDrag' | 'onDragStart'>;
 export declare function DraggableArea({ areaId, testId, className, onDragStart, onDrag, onDragEnd, children, ...props }: DraggableAreaProps): import("react/jsx-runtime").JSX.Element;

package/esm/floating-panel/draggable-area.js

@@ -1,4 +1,5 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React from 'react';
+import { useDraggableArea } from './use-draggable-area';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function DraggableArea({
   areaId,
@@ -10,50 +11,12 @@ export function DraggableArea({
   children = null,
   ...props
 }) {
-  const [isDragging, setIsDragging] = useState(false);
-  const onStart = useCallback(e => {
-    const draggableEvent = Object.assign(e, {
-      areaId
-    });
-    e.preventDefault();
-    setIsDragging(true);
-    onDragStart(draggableEvent);
-  }, []);
-  useEffect(() => {
-    if (!isDragging) {
-      return;
-    }
-    function onDragHandler(e) {
-      const draggableEvent = Object.assign(e, {
-        areaId
-      });
-      e.preventDefault();
-      onDrag(draggableEvent);
-    }
-    function onDragEndHandler(e) {
-      const draggableEvent = Object.assign(e, {
-        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]);
+  const onStart = useDraggableArea({
+    areaId,
+    onDragStart,
+    onDrag,
+    onDragEnd
+  });
   return /*#__PURE__*/_jsx("div", {
     className: className,
     onMouseDown: onStart,

package/esm/floating-panel/floating-panel-collapse-button.d.ts

@@ -0,0 +1,5 @@
+export type FloatingPanelCollapseButtonProps = {
+    isCollapsed: boolean;
+    setIsCollapsed: (collapsed: boolean) => void;
+};
+export declare function FloatingPanelCollapseButton({ isCollapsed, setIsCollapsed, }: FloatingPanelCollapseButtonProps): import("react/jsx-runtime").JSX.Element;

package/esm/floating-panel/floating-panel-collapse-button.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
+import { faChevronUp } from '@fortawesome/free-solid-svg-icons/faChevronUp';
+import { Button, ACCENT_TYPES } from '../button';
+import { useTranslation } from '../hooks';
+import { FontAwesomeIcon } from '../font-awesome-icon';
+import { TOOLTIP_DELAY_TYPES, TOOLTIP_PLACEMENT_TYPES } from '../tooltip';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FloatingPanelCollapseButton({
+  isCollapsed,
+  setIsCollapsed
+}) {
+  const {
+    t
+  } = useTranslation();
+  const ariaLabel = isCollapsed ? t('Expand') : t('Collapse');
+  return /*#__PURE__*/_jsx(Button, {
+    testId: "floating-panel-collapse-button",
+    accentType: ACCENT_TYPES.ROUND_ICON,
+    onClick: () => setIsCollapsed(!isCollapsed),
+    "aria-label": ariaLabel,
+    tooltipText: ariaLabel,
+    tooltipPlacement: TOOLTIP_PLACEMENT_TYPES.TOP,
+    tooltipDelayType: TOOLTIP_DELAY_TYPES.SLOW,
+    children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+      icon: isCollapsed ? faChevronUp : faChevronDown
+    })
+  });
+}

package/esm/floating-panel/floating-panel-dock-button.js

@@ -4,7 +4,7 @@ import { faThumbtack } from '@fortawesome/free-solid-svg-icons/faThumbtack';
 import { Button, ACCENT_TYPES } from '../button';
 import { useTranslation } from '../hooks';
 import { FontAwesomeIcon } from '../font-awesome-icon';
-import { TOOLTIP_PLACEMENT_TYPES } from '../tooltip';
+import { TOOLTIP_DELAY_TYPES, TOOLTIP_PLACEMENT_TYPES } from '../tooltip';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function FloatingPanelDockButton({
   isDocked,
@@ -21,6 +21,7 @@ export function FloatingPanelDockButton({
     "aria-label": ariaLabel,
     tooltipText: ariaLabel,
     tooltipPlacement: TOOLTIP_PLACEMENT_TYPES.TOP,
+    tooltipDelayType: TOOLTIP_DELAY_TYPES.SLOW,
     children: isDocked ? /*#__PURE__*/_jsx(FontAwesomeIcon, {
       icon: faThumbtackSlash
     }) : /*#__PURE__*/_jsx(FontAwesomeIcon, {

package/esm/floating-panel/floating-panel-drag-handle.js

@@ -17,16 +17,8 @@ export function FloatingPanelDragHandle({
     onDrag,
     onDragStart,
     onDragEnd,
-    onMoveWithArrows,
-    isDocked
+    onMoveWithArrows
   } = useContext(FloatingPanelContext);
-  if (isDocked) {
-    return /*#__PURE__*/_jsx("div", {
-      className: "drag-handle disabled",
-      "test-id": "floating-area-drag-handle",
-      children: content
-    });
-  }
   return /*#__PURE__*/_jsx(DraggableArea, {
     tabIndex: 0,
     testId: "floating-area-drag-handle",